From 40bd4287dfbb90516a0a57732a8a6e5ed5962b85 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:01:44 -0400
Subject: [PATCH 01/99] Restyle a :has() change's earlier siblings only for a
 :has(+ x) or :has(~ x)

A change under an element restyled every element a :has() could be
tested on: its ancestors, and every earlier sibling of each. Only a
:has() whose argument starts with + or ~ can match from a sibling, so
the siblings are walked only when a rule has one. In a list styled with
li:has(.on), toggling a class in one item restyled every item before it.

The box model and a list marker's text style are kept by the style
object a resolved style keeps until it changes, as the paint style is.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts    | 94 ++++++++++++++++++++++++++++++++++++----
 src/internal/layout.ts   |  2 +-
 src/internal/painter.ts  | 55 ++++++++++++++---------
 tests/stylesheet.test.ts | 29 +++++++++++++
 4 files changed, 149 insertions(+), 31 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index d8631e0c..8d4b500a 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -391,8 +391,34 @@ export function getCellBorderWidths(
 	};
 }
 
-/** An element's margins, borders and padding, in cells. */
+// The entry point for every read of the cascade from a node, including
+// reads deep inside the cascade itself that have no Cascade in
+// hand.
+const documentCascades = new WeakMap<object, Cascade>();
+
+// Each resolved style's box model, by the object the style keeps until
+// it changes.
+const boxModels = new WeakMap<object, CSSValues.BoxModel>();
+
+/**
+ * An element's margins, borders and padding, in cells. The same object
+ * until the element's style changes, so a caller copies it to change it.
+ */
 export function getBoxModel(element: Element): CSSValues.BoxModel {
+	const document = ownerDocumentOf(element);
+	const cascade = document ? documentCascades.get(document) : undefined;
+	const key = cascade?.getStyleKey(element) ?? null;
+	let model = key === null ? undefined : boxModels.get(key);
+	if (model === undefined) {
+		model = readBoxModel(element);
+		if (key !== null) {
+			boxModels.set(key, model);
+		}
+	}
+	return model;
+}
+
+function readBoxModel(element: Element): CSSValues.BoxModel {
 	// The engine's own read: the cascade's declaration directly, without
 	// the author path's resolved-value work.
 	const length = (property: string, vertical: boolean, signed = false) =>
@@ -443,11 +469,6 @@ export function getBoxModel(element: Element): CSSValues.BoxModel {
 	};
 }
 
-// The entry point for every read of the cascade from a node, including
-// reads deep inside the cascade itself that have no Cascade in
-// hand.
-const documentCascades = new WeakMap<object, Cascade>();
-
 // What list-style-type spells, quoted the way a content value is
 // written. Null outside a list.
 function getDefaultMarkerContent(hostElement: Element): string | null {
@@ -5986,6 +6007,7 @@ interface ParsedCSSRule {
 	// hasAnchors keeps them, and the pseudo-classes inside it.
 	hasAnchors?: readonly string[];
 	hasStates?: readonly string[];
+	hasSiblings?: boolean;
 
 	// Cascade ORIGIN, the tier above specificity. Every author rule beats
 	// every UA rule, which lets `input::placeholder { color }` beat the UA
@@ -6221,6 +6243,9 @@ export class Cascade {
 	// change inside an element that has none of them leaves every :has()
 	// as it was.
 	hasAnchors: Set<string>;
+	// Whether a :has() argument starts with + or ~, which an element's
+	// earlier siblings can match from, and not only its ancestors.
+	hasSiblingRules: boolean;
 
 	// The engine reads this to decide whether the terminal must report
 	// pointer motion. A sheet that never tests :hover cannot show it, and
@@ -6329,6 +6354,7 @@ export class Cascade {
 		this.scopedRulesExist = false;
 		this.hasRulesExist = false;
 		this.hasAnchors = new Set();
+		this.hasSiblingRules = false;
 		this.hasStates = new Set();
 		this.hoverRulesDeclared = false;
 		this.parsedStyleSheetCount = -1;
@@ -6415,7 +6441,9 @@ export class Cascade {
 					for (
 						let element: Element | null = ancestor;
 						element !== null;
-						element = element.previousElementSibling
+						element = this.hasSiblingRules
+							? element.previousElementSibling
+							: null
 					) {
 						if (!anchors.has(element) && couldAnchorHas(this, element)) {
 							anchors.add(element);
@@ -6881,8 +6909,12 @@ function noteHasRule(
 	cascade: Cascade,
 	anchors: readonly string[],
 	states: readonly string[],
+	siblings: boolean,
 ): void {
 	cascade.hasRulesExist = true;
+	if (siblings) {
+		cascade.hasSiblingRules = true;
+	}
 	for (const anchor of anchors) {
 		cascade.hasAnchors.add(anchor);
 	}
@@ -6891,6 +6923,39 @@ function noteHasRule(
 	}
 }
 
+// Whether a :has() in the selector takes a relative selector that starts
+// with + or ~.
+function hasSiblingArgument(selector: string): boolean {
+	for (
+		let at = selector.indexOf(":has(");
+		at !== -1;
+		at = selector.indexOf(":has(", at + 5)
+	) {
+		let depth = 0;
+		let start = at + 5;
+		for (let index = start; index < selector.length; index++) {
+			const char = selector[index];
+			if (char === "(" || char === "[") {
+				depth++;
+			} else if (char === ")" || char === "]") {
+				if (depth === 0) {
+					if (/^\s*[+~]/.test(selector.slice(start, index))) {
+						return true;
+					}
+					break;
+				}
+				depth--;
+			} else if (char === "," && depth === 0) {
+				if (/^\s*[+~]/.test(selector.slice(start, index))) {
+					return true;
+				}
+				start = index + 1;
+			}
+		}
+	}
+	return false;
+}
+
 // For each :has() in a selector, what the compound it is written on asks
 // of an element: its id, else a class, else its local name, else
 // anything. What a functional pseudo-class or an attribute selector asks
@@ -6965,10 +7030,16 @@ function forgetShadowRoot(cascade: Cascade, root: ShadowRoot): void {
 	// The root's :has() rules went with it, and so does what they asked for.
 	cascade.hasRulesExist = false;
 	cascade.hasAnchors = new Set();
+	cascade.hasSiblingRules = false;
 	cascade.hasStates = new Set();
 	for (const rule of cascade.parsedRules) {
 		if (rule.hasAnchors !== undefined) {
-			noteHasRule(cascade, rule.hasAnchors, rule.hasStates ?? []);
+			noteHasRule(
+				cascade,
+				rule.hasAnchors,
+				rule.hasStates ?? [],
+				rule.hasSiblings === true,
+			);
 		}
 	}
 	// A parse already due builds without the root. One that is not would
@@ -8606,6 +8677,7 @@ function parseStylesheetsNow(cascade: Cascade): void {
 	cascade.scopedRulesExist = false;
 	cascade.hasRulesExist = false;
 	cascade.hasAnchors = new Set();
+	cascade.hasSiblingRules = false;
 	cascade.hasStates = new Set();
 	cascade.hoverRulesDeclared = false;
 	cascade.stylesheetsDirty = false;
@@ -9543,13 +9615,15 @@ function parseSelector(
 	// sweep only for documents that need it.
 	let hasAnchors: string[] | undefined;
 	let hasStates: string[] | undefined;
+	let hasSiblings: boolean | undefined;
 	if (selector.includes(":has(")) {
 		hasAnchors = getHasAnchors(selector);
 		const inside = selector.slice(selector.indexOf(":has(") + 5);
 		hasStates = Array.from(inside.matchAll(/:([a-zA-Z-]+)/g), (match) =>
 			match[1].toLowerCase(),
 		);
-		noteHasRule(cascade, hasAnchors, hasStates);
+		hasSiblings = hasSiblingArgument(selector);
+		noteHasRule(cascade, hasAnchors, hasStates, hasSiblings);
 	}
 	if (selector.includes(":hover")) {
 		cascade.hoverRulesDeclared = true;
@@ -9637,6 +9711,7 @@ function parseSelector(
 			reachesHost,
 			hasAnchors,
 			hasStates,
+			hasSiblings,
 			layer,
 			layerRank: 0,
 			scopes,
@@ -9662,6 +9737,7 @@ function parseSelector(
 			reachesHost,
 			hasAnchors,
 			hasStates,
+			hasSiblings,
 			layer,
 			layerRank: 0,
 			scopes,
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 33bb0b53..bbc55d5c 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3445,7 +3445,7 @@ function collectLeaves(
 					syncIndependentFormattingContext(layout, element);
 				}
 
-				const boxModel = getBoxModel(element);
+				const boxModel = {...getBoxModel(element)};
 
 				// getBoxModel carries only absolute widths. A percentage
 				// resolves here against the run's available width, which is
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 11a4d68e..c17d63e5 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1641,27 +1641,7 @@ function renderOutsideMarker(
 	// Cells, not code units. "日本 " is 3 characters and 5 cells.
 	const markerWidth = ctx.measureText(markerContent).width;
 
-	const markerColor =
-		getComputedValue(element, "color", "::marker") ||
-		getComputedValue(element, "color");
-	const {bold: markerBold, dim: markerDim} = resolveFontWeight(
-		getComputedValue(element, "font-weight", "::marker"),
-	);
-	const markerItalic =
-		getComputedValue(element, "font-style", "::marker") === "italic";
-	const markerUnderline = CSSValues.parseTextDecorationLine(
-		getComputedValue(element, "text-decoration-line", "::marker"),
-	).underline;
-
-	const markerTextStyle = {
-		fg: markerColor && markerColor !== "initial"
-			? CSSValues.numberFromCSSColor(markerColor)
-			: undefined,
-		bold: markerBold,
-		dim: markerDim,
-		italic: markerItalic,
-		underline: markerUnderline,
-	};
+	const markerTextStyle = getMarkerTextStyle(painter, element);
 
 	// Outside the content box, as css-lists-3 §3.3 places it. A marker
 	// that would start before the first column is clipped away whole,
@@ -1676,6 +1656,39 @@ function renderOutsideMarker(
 	ctx.drawText(markerContent, markerX, Math.round(rect.top), markerTextStyle);
 }
 
+// A marker's text style, by the object its element's style keeps until it
+// changes.
+const markerTextStyles = new WeakMap<object, CellStyle>();
+
+function getMarkerTextStyle(painter: Painter, element: Element): CellStyle {
+	const key = painter.cascade.getStyleKey(element);
+	const known = key === null ? undefined : markerTextStyles.get(key);
+	if (known !== undefined) {
+		return known;
+	}
+	const color =
+		getComputedValue(element, "color", "::marker") ||
+		getComputedValue(element, "color");
+	const {bold, dim} = resolveFontWeight(
+		getComputedValue(element, "font-weight", "::marker"),
+	);
+	const style: CellStyle = {
+		fg: color && color !== "initial"
+			? CSSValues.numberFromCSSColor(color)
+			: undefined,
+		bold,
+		dim,
+		italic: getComputedValue(element, "font-style", "::marker") === "italic",
+		underline: CSSValues.parseTextDecorationLine(
+			getComputedValue(element, "text-decoration-line", "::marker"),
+		).underline,
+	};
+	if (key !== null) {
+		markerTextStyles.set(key, style);
+	}
+	return style;
+}
+
 // A focused editing host parks the cursor at the document selection's
 // focus, the way a focused text control parks it at its own, and shows
 // none while the selection holds text.
diff --git a/tests/stylesheet.test.ts b/tests/stylesheet.test.ts
index a8c39a12..372fb288 100644
--- a/tests/stylesheet.test.ts
+++ b/tests/stylesheet.test.ts
@@ -1,6 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
+import {getBoxModel} from "../src/internal/cssom.ts";
 import {
 	getPseudoHost,
 	getPseudoName,
@@ -622,3 +623,31 @@ test(":has() restyles its anchor, its siblings and what it styles below when a c
 	expect(color(".title")).toBe("rgb(1, 2, 3)");
 	termdom.dispose();
 });
+
+test("a :has() that reads only down the tree restyles a changed item's ancestors, not the items before it", async () => {
+	const terminal = new MockProcess();
+	const termdom = new TermDOM({transport: terminal.transport});
+	const {document} = termdom;
+	document.body.innerHTML =
+		"<style>li:has(.on) { color: rgb(255, 0, 0); }</style><ul>" +
+		Array.from({length: 5}, (_, i) => `<li><span id=s${i}>${i}</span></li>`)
+			.join("") +
+		"</ul>";
+	await nextFrame(termdom);
+	const items = [...document.querySelectorAll("li")];
+	const before = items.map((item) => getBoxModel(item));
+	document.getElementById("s3")!.classList.add("on");
+	await nextFrame(termdom);
+	const after = items.map((item) => getBoxModel(item));
+	// The box model is kept until its element restyles.
+	expect(after.map((model, i) => model === before[i])).toEqual([
+		true,
+		true,
+		true,
+		false,
+		true,
+	]);
+	expect(termdom.window.getComputedStyle(items[3]).color)
+		.toBe("rgb(255, 0, 0)");
+	termdom.dispose();
+});

From 63aebc42db05266d87d1b824cfd0db8b1a285724 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:17:49 -0400
Subject: [PATCH 02/99] Test that the box model and marker style caches follow
 every kind of style change

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/style-caches.test.ts | 107 +++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 tests/style-caches.test.ts

diff --git a/tests/style-caches.test.ts b/tests/style-caches.test.ts
new file mode 100644
index 00000000..450d5012
--- /dev/null
+++ b/tests/style-caches.test.ts
@@ -0,0 +1,107 @@
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {getBoxModel} from "../src/internal/cssom.ts";
+import {MockProcess, nextFrame} from "./test-utils.js";
+
+async function mount(html: string): Promise<{dom: TermDOM; document: any}> {
+	const terminal = new MockProcess({cols: 40, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	return {dom, document: dom.document};
+}
+
+test("the box model is the same object until the element's style changes", async () => {
+	const {dom, document} =
+		await mount("<div id=a style=\"padding: 0 2px\">a</div><div id=b>b</div>");
+	const a = document.getElementById("a");
+	const first = getBoxModel(a);
+	expect(getBoxModel(a)).toBe(first);
+	document.getElementById("b").style.color = "red";
+	await nextFrame(dom);
+	expect(getBoxModel(a)).toBe(first);
+	dom.dispose();
+});
+
+test("the box model follows an inline style change", async () => {
+	const {dom, document} =
+		await mount("<div id=a style=\"padding-left: 2px\">a</div>");
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(2);
+	a.style.paddingLeft = "5px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(5);
+	a.removeAttribute("style");
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft === 0).toBe(true);
+	dom.dispose();
+});
+
+test("the box model follows a class that changes which rule matches", async () => {
+	const {dom, document} = await mount(
+		"<style>.wide { margin-left: 4px; border: 1px solid }</style><div id=a>a</div>",
+	);
+	const a = document.getElementById("a");
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([0, 0]);
+	a.classList.add("wide");
+	await nextFrame(dom);
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([4, 1]);
+	a.classList.remove("wide");
+	await nextFrame(dom);
+	expect([getBoxModel(a).marginLeft, getBoxModel(a).borderLeftWidth])
+		.toEqual([0, 0]);
+	dom.dispose();
+});
+
+test("the box model follows a stylesheet edited in place", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>div { padding-left: 1px }</style><div id=a>a</div>",
+	);
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(1);
+	document.getElementById("s").textContent = "div { padding-left: 3px }";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(3);
+	const sheet = document.getElementById("s").sheet;
+	sheet.cssRules[0].style.paddingLeft = "6px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(6);
+	dom.dispose();
+});
+
+test("the box model follows an inherited font size its lengths are in", async () => {
+	const {dom, document} = await mount(
+		"<div id=p style=\"font-size: 2px\"><div id=a style=\"padding-left: 1em\">a</div></div>",
+	);
+	const a = document.getElementById("a");
+	expect(getBoxModel(a).paddingLeft).toBe(2);
+	document.getElementById("p").style.fontSize = "3px";
+	await nextFrame(dom);
+	expect(getBoxModel(a).paddingLeft).toBe(3);
+	dom.dispose();
+});
+
+test("a list marker's color follows its ::marker rule", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>li::marker { color: rgb(0, 128, 0) }</style><ul><li>item</li></ul>",
+	);
+	const bulletColor = (): string => {
+		const output = dom.renderANSI();
+		const bullet = output.indexOf("•");
+		return output.slice(0, bullet);
+	};
+	expect(bulletColor()).toContain("38;2;0;128;0");
+	document.getElementById("s").textContent =
+		"li::marker { color: rgb(255, 0, 0) }";
+	await nextFrame(dom);
+	expect(bulletColor()).toContain("38;2;255;0;0");
+	document.querySelector("li").style.fontWeight = "bold";
+	document.getElementById("s").textContent =
+		"li::marker { color: rgb(0, 0, 255) }";
+	await nextFrame(dom);
+	expect(bulletColor()).toContain("38;2;0;0;255");
+	dom.dispose();
+});

From afca46ebb202d4bc98757e9a7cecab06427a675b Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:26:42 -0400
Subject: [PATCH 03/99] Split a text into graphemes once, and build each output
 line as a string

A list marker is not ASCII, so every frame measured and drew each
item's bullet through Intl.Segmenter. A short text's graphemes are now
kept. The frame writer appended every cell to an array it then joined,
and tested each one-character cell with a regex.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/framebuffer.ts | 65 +++++++++++++++++--------------------
 src/internal/text.ts        | 14 ++++++++
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 2cdc3308..bd0fcadf 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -1,8 +1,8 @@
 import {blendColor, getColorAlpha, TRANSPARENCY_UNIT} from "./cssvalues.ts";
 import type {ColorDepth, Exchange} from "./exchange.ts";
 import {
+	getGraphemes,
 	getStringWidth,
-	graphemeSegmenter,
 	isControlByte,
 	isWidthUncertain,
 	PRINTABLE_ASCII,
@@ -129,66 +129,61 @@ function getUnderlineCodes(style: UnderlineStyle): string[] {
 class FrameWriter {
 	colorDepth: ColorDepth;
 
-	out: string[];
+	out: string;
 
 	constructor(colorDepth: ColorDepth) {
 		this.colorDepth = colorDepth;
-		this.out = [];
+		this.out = "";
 	}
 
-	// Most takes hold one piece or none.
 	take(): string {
-		const out = this.out;
-		if (out.length === 0) {
-			return "";
-		}
-		const taken = out.length === 1 ? out[0] : out.join("");
-		out.length = 0;
+		const taken = this.out;
+		this.out = "";
 		return taken;
 	}
 
 	carriageReturn(): this {
-		this.out.push("\r");
+		this.out += "\r";
 		return this;
 	}
 
 	newLine(rows = 1): this {
-		this.out.push("\r\n".repeat(rows));
+		this.out += "\r\n".repeat(rows);
 		return this;
 	}
 
 	cursorTo(row: number, col: number): this {
-		this.out.push(`\x1b[${row};${col}H`);
+		this.out += `\x1b[${row};${col}H`;
 		return this;
 	}
 
 	cursorForward(columns: number): this {
-		this.out.push(`\x1b[${columns}C`);
+		this.out += `\x1b[${columns}C`;
 		return this;
 	}
 
 	cursorDown(rows: number): this {
-		this.out.push(`\x1b[${rows}B`);
+		this.out += `\x1b[${rows}B`;
 		return this;
 	}
 
 	saveCursor(): this {
-		this.out.push("\x1b7");
+		this.out += "\x1b7";
 		return this;
 	}
 
 	restoreCursor(): this {
-		this.out.push("\x1b8");
+		this.out += "\x1b8";
 		return this;
 	}
 
 	eraseToLineEnd(): this {
-		this.out.push("\x1b[K");
+		this.out += "\x1b[K";
 		return this;
 	}
 
 	eraseBelow(): this {
-		this.out.push("\x1b[J");
+		this.out += "\x1b[J";
 		return this;
 	}
 
@@ -197,41 +192,43 @@ class FrameWriter {
 	 * measures cursor moves from the top margin.
 	 */
 	setScrollRegion(top: number, bottom: number): this {
-		this.out.push(`\x1b[?6l\x1b[${top};${bottom}r`);
+		this.out += `\x1b[?6l\x1b[${top};${bottom}r`;
 		return this;
 	}
 
 	resetScrollRegion(): this {
-		this.out.push("\x1b[r");
+		this.out += "\x1b[r";
 		return this;
 	}
 
 	deleteLines(count: number): this {
-		this.out.push(`\x1b[${count}M`);
+		this.out += `\x1b[${count}M`;
 		return this;
 	}
 
 	insertLines(count: number): this {
-		this.out.push(`\x1b[${count}L`);
+		this.out += `\x1b[${count}L`;
 		return this;
 	}
 
 	resetStyle(): this {
-		this.out.push("\x1b[0m");
+		this.out += "\x1b[0m";
 		return this;
 	}
 
 	style(run: StyleSpan): this {
 		const escape = createStyleEscape(run, this.colorDepth);
-		if (escape !== "") {
-			this.out.push(escape);
-		}
+		this.out += escape;
 		return this;
 	}
 
 	text(glyphs: string): this {
-		if (PRINTABLE_ASCII.test(glyphs)) {
-			this.out.push(glyphs);
+		if (
+			glyphs.length === 1
+				? glyphs >= " " && glyphs <= "~"
+				: PRINTABLE_ASCII.test(glyphs)
+		) {
+			this.out += glyphs;
 			return this;
 		}
 		let safe = "";
@@ -244,7 +241,7 @@ class FrameWriter {
 			}
 			safe += char;
 		}
-		this.out.push(safe);
+		this.out += safe;
 		return this;
 	}
 }
@@ -1204,8 +1201,8 @@ export class CellContext {
 			return {width: text.length};
 		}
 		let width = 0;
-		for (const segment of graphemeSegmenter.segment(text)) {
-			width += getStringWidth(segment.segment);
+		for (const grapheme of getGraphemes(text)) {
+			width += getStringWidth(grapheme);
 		}
 		return {width};
 	}
@@ -1224,9 +1221,7 @@ export class CellContext {
 			return;
 		}
 
-		for (const segment of graphemeSegmenter.segment(text)) {
-			const char = segment.segment;
-
+		for (const char of getGraphemes(text)) {
 			// Never write a control char to a cell. A cell is a column, and a
 			// control byte must be rejected before it takes one, or it survives
 			// to the output as a raw escape byte (injection from untrusted
diff --git a/src/internal/text.ts b/src/internal/text.ts
index fee0f773..a04e785e 100644
--- a/src/internal/text.ts
+++ b/src/internal/text.ts
@@ -96,6 +96,20 @@ export const PRINTABLE_ASCII = /^[\x20-\x7e]*$/;
 // Bounded, so a stream of unique strings (a logger) cannot grow it.
 const widthCache = new LRUCache<string, number>(2 ** 14);
 
+const graphemeCache = new LRUCache<string, string[]>(2 ** 12);
+
+// The same array for the same short text, so a caller must not change it.
+export function getGraphemes(text: string): string[] {
+	let graphemes = graphemeCache.get(text);
+	if (graphemes === undefined) {
+		graphemes = Array.from(graphemeSegmenter.segment(text), (s) => s.segment);
+		if (text.length <= 256) {
+			graphemeCache.set(text, graphemes);
+		}
+	}
+	return graphemes;
+}
+
 // Advances the attached terminal reported that disagree with the tables
 // (Terminal.app advances ☀️ one cell and ⛅️ two, and no rule separates
 // them). Not a cache: a measurement of the one terminal, written once,

From ad1efd2789e50bb21478dacd457e16b153df21ac Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:32:46 -0400
Subject: [PATCH 04/99] Look up a pseudo-element's rules by its type instead of
 filtering every rule

Each list item's marker filtered the whole rule list for ::marker rules
every frame. The rules are already filed by pseudo-element, and are now
filed again in cascade order whenever the rule list is sorted.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts      | 23 ++++++++++++++++-------
 tests/style-caches.test.ts | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 8d4b500a..ba9b9067 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -8726,7 +8726,8 @@ function parseStylesheetsNow(cascade: Cascade): void {
 }
 
 // Origin first (UA below every author rule, later wins), then layer,
-// then specificity, then the order the rules were read in.
+// then specificity, then the order the rules were read in. The
+// pseudo-element rules are filed again in that order.
 function sortRulesForCascade(cascade: Cascade): void {
 	const sourceOrder = new Map(
 		cascade.parsedRules.map((rule, index) => [rule, index] as const),
@@ -8743,6 +8744,18 @@ function sortRulesForCascade(cascade: Cascade): void {
 		}
 		return sourceOrder.get(a)! - sourceOrder.get(b)!;
 	});
+	cascade.pseudoRulesByType = new Map();
+	for (const rule of cascade.parsedRules) {
+		if (rule.pseudoElement === undefined) {
+			continue;
+		}
+		const byType = cascade.pseudoRulesByType.get(rule.pseudoElement);
+		if (byType) {
+			byType.push(rule);
+		} else {
+			cascade.pseudoRulesByType.set(rule.pseudoElement, [rule]);
+		}
+	}
 }
 
 // Declare a layer and every layer its path nests inside.
@@ -10089,12 +10102,8 @@ function computePseudoElementStyle(
 	pseudoElement: string,
 ): Record<string, string> {
 	const pseudoRoot = element.getRootNode() as unknown as Node;
-	const matchingRules = cascade.parsedRules.filter((rule) => {
-		if (rule.pseudoElement !== pseudoElement) {
-			return false;
-		}
-		return isRuleMatch(element, rule, pseudoRoot);
-	});
+	const matchingRules = (cascade.pseudoRulesByType.get(pseudoElement) ?? [])
+		.filter((rule) => isRuleMatch(element, rule, pseudoRoot));
 
 	// A pseudo-element's declarations are a flat record, not a per-property
 	// cascade, so a flow-relative declaration fills BOTH names of its slot
diff --git a/tests/style-caches.test.ts b/tests/style-caches.test.ts
index 450d5012..90590219 100644
--- a/tests/style-caches.test.ts
+++ b/tests/style-caches.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {getBoxModel} from "../src/internal/cssom.ts";
+import {getBoxModel, getDeclaredDisplay} from "../src/internal/cssom.ts";
 import {MockProcess, nextFrame} from "./test-utils.js";
 
 async function mount(html: string): Promise<{dom: TermDOM; document: any}> {
@@ -84,6 +84,24 @@ test("the box model follows an inherited font size its lengths are in", async ()
 	dom.dispose();
 });
 
+test("the declared display follows a class and an edited stylesheet", async () => {
+	const {dom, document} = await mount(
+		"<style id=s>.row { display: flex }</style><span id=a>a</span>",
+	);
+	const a = document.getElementById("a");
+	expect(getDeclaredDisplay(a)).toBe("inline");
+	a.className = "row";
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("flex");
+	document.getElementById("s").textContent = ".row { display: grid }";
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("grid");
+	a.removeAttribute("class");
+	await nextFrame(dom);
+	expect(getDeclaredDisplay(a)).toBe("inline");
+	dom.dispose();
+});
+
 test("a list marker's color follows its ::marker rule", async () => {
 	const {dom, document} = await mount(
 		"<style id=s>li::marker { color: rgb(0, 128, 0) }</style><ul><li>item</li></ul>",
@@ -105,3 +123,18 @@ test("a list marker's color follows its ::marker rule", async () => {
 	expect(bulletColor()).toContain("38;2;0;0;255");
 	dom.dispose();
 });
+
+test("a list marker's text follows a ::marker rule added after the first frame", async () => {
+	const {dom, document} =
+		await mount("<style id=s></style><ul><li>item</li></ul>");
+	expect(dom.renderANSI()).toContain("•");
+	document.getElementById("s").textContent = "li::marker { content: '> ' }";
+	await nextFrame(dom);
+	expect(dom.renderANSI()).toContain("> item");
+	document.getElementById("s").textContent =
+		"ul li::marker { content: '- ' } li::marker { content: '* ' } " +
+		"@layer a { ul li::marker { content: '+ ' } }";
+	await nextFrame(dom);
+	expect(dom.renderANSI()).toContain("- item");
+	dom.dispose();
+});

From 9caa674f1d53b1a5c2c82e9179b8c74ae4a8398e Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:37:02 -0400
Subject: [PATCH 05/99] Drop an @import or @namespace out of its place, and
 read namespaces from the top of a sheet

A sheet kept an @import or @namespace after a style rule, after a later
kind of prelude rule, or nested in another rule. Browsers drop each of
these, as css-cascade-5 and css-namespaces-3 require. With namespaces
only at the top, each style rule's parse reads the sheet's namespaces
from the top instead of walking every rule in the sheet.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 36 +++++++++++++++++++++++++++++++++++-
 tests/cssom.test.ts   | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index ba9b9067..21dd9ab5 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -1697,6 +1697,27 @@ class CSSStyleRule extends CSSGroupingRule {
 	}
 }
 
+// A sheet opens with @layer statements, then @import rules, then
+// @namespace rules, and either of the last two anywhere else is dropped,
+// as css-cascade-5 and css-namespaces-3 place them.
+const PRELUDE_LAYERS = 0;
+const PRELUDE_IMPORTS = 1;
+const PRELUDE_NAMESPACES = 2;
+const PRELUDE_OVER = 3;
+
+function getPreludeStage(rule: CSSRule): number {
+	if (rule instanceof CSSLayerStatementRule) {
+		return PRELUDE_LAYERS;
+	}
+	if (rule instanceof CSSImportRule) {
+		return PRELUDE_IMPORTS;
+	}
+	if (rule instanceof CSSNamespaceRule) {
+		return PRELUDE_NAMESPACES;
+	}
+	return PRELUDE_OVER;
+}
+
 function getSheetNamespaces(
 	sheet: CSSStyleSheet | null,
 ): SelectorNamespaces | undefined {
@@ -1704,7 +1725,10 @@ function getSheetNamespaces(
 		return undefined;
 	}
 	const namespaces: SelectorNamespaces = {default: null, prefixes: new Map()};
-	for (const rule of Array.from(sheet.cssRules)) {
+	for (const rule of sheet.cssRules) {
+		if (getPreludeStage(rule) === PRELUDE_OVER) {
+			break;
+		}
 		if (!(rule instanceof CSSNamespaceRule)) {
 			continue;
 		}
@@ -3275,6 +3299,7 @@ function convertRules(
 			run = [];
 		}
 	};
+	let stage = PRELUDE_LAYERS;
 	for (const node of nodes) {
 		if (node.type === "Declaration") {
 			if (nestedContext) {
@@ -3287,6 +3312,15 @@ function convertRules(
 		if (!rule) {
 			continue;
 		}
+		const ruleStage = getPreludeStage(rule);
+		if (ruleStage !== PRELUDE_LAYERS && ruleStage !== PRELUDE_OVER) {
+			if (parentRule !== null || ruleStage < stage) {
+				continue;
+			}
+			stage = ruleStage;
+		} else if (stage !== PRELUDE_LAYERS || ruleStage === PRELUDE_OVER) {
+			stage = PRELUDE_OVER;
+		}
 		if (rule instanceof CSSNamespaceRule) {
 			if (rule.prefix === "") {
 				namespaces.default = rule.namespaceURI;
diff --git a/tests/cssom.test.ts b/tests/cssom.test.ts
index b81dfcbb..e34e89ad 100644
--- a/tests/cssom.test.ts
+++ b/tests/cssom.test.ts
@@ -547,3 +547,44 @@ test("text the CSS parsers cannot judge passes through as authored", () => {
 
 	dom.dispose();
 });
+
+test("an @import or @namespace out of its place at the top of a sheet is dropped", () => {
+	const {dom} = makeDOM();
+	const names = (text: string): string[] => {
+		const style = dom.document.createElement("style");
+		style.textContent = text;
+		dom.document.head.append(style);
+		const rules = [...style.sheet!.cssRules].map((rule) =>
+			rule.constructor.name);
+		style.remove();
+		return rules;
+	};
+	expect(names("a {} @import url(x.css); @namespace url(y); b {}"))
+		.toEqual(["CSSStyleRule", "CSSStyleRule"]);
+	expect(names("@namespace url(y); @import url(x.css);"))
+		.toEqual(["CSSNamespaceRule"]);
+	expect(names("@layer a; @import url(x.css); @namespace url(y);"))
+		.toEqual(["CSSLayerStatementRule", "CSSImportRule", "CSSNamespaceRule"]);
+	expect(names("@import url(x.css); @layer a; @namespace url(y);"))
+		.toEqual(["CSSImportRule", "CSSLayerStatementRule"]);
+	expect(names("@media all { @import url(x.css); @namespace url(y); }"))
+		.toEqual(["CSSMediaRule"]);
+	dom.dispose();
+});
+
+test("a namespace prefix declared after a style rule does not apply", async () => {
+	const {dom} = makeDOM("<p>text</p>");
+	const style = dom.document.createElement("style");
+	style.textContent =
+		"@namespace h url(http://www.w3.org/1999/xhtml); h|p { color: red } " +
+		"b {} @namespace q url(http://www.w3.org/1999/xhtml); q|p { color: blue }";
+	dom.document.head.append(style);
+	await nextFrame(dom);
+	expect(
+		dom.document.defaultView!.getComputedStyle(
+			dom.document.querySelector("p")!,
+		).color,
+	).toBe("rgb(255, 0, 0)");
+	expect(style.sheet!.cssRules.length).toBe(3);
+	dom.dispose();
+});

From 8f4e028daef887facb5970625287f6ea45727773 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:41:28 -0400
Subject: [PATCH 06/99] Read each selector once, not once per document that
 parses it

Every document parsed the UA sheet again, and reading its selectors
with css-tree was most of what a new document's stylesheet parse cost.
A reading depends only on the selector's text and nothing changes it,
so readings are kept by that text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssvalues.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/internal/cssvalues.ts b/src/internal/cssvalues.ts
index d4283b90..1d3ea277 100644
--- a/src/internal/cssvalues.ts
+++ b/src/internal/cssvalues.ts
@@ -4613,11 +4613,27 @@ function harvestRequiredKeys(
 // and :empty.
 const SIBLING_SELECTOR = /[+~]|:(?:nth-|first-|last-|only-|empty)/;
 
+// Every document reads the UA sheet's selectors again, so each selector
+// is read once and its reading shared. No caller changes a reading.
+const selectorReadings = new Map<string, SelectorReading>();
+
+export function readSelector(selector: string): SelectorReading {
+	let reading = selectorReadings.get(selector);
+	if (reading === undefined) {
+		reading = readSelectorText(selector);
+		if (selectorReadings.size > 4096) {
+			selectorReadings.clear();
+		}
+		selectorReadings.set(selector, reading);
+	}
+	return reading;
+}
+
 // A selector this parser cannot read weighs nothing. The matcher reads
 // a wider grammar and may still accept it, and a rule whose weight
 // cannot be counted should lose a tie. It anchors to no type and names
 // no keys.
-export function readSelector(selector: string): SelectorReading {
+function readSelectorText(selector: string): SelectorReading {
 	const reachesSiblings = SIBLING_SELECTOR.test(selector);
 	let failed = false;
 	let list: CSSTree.SelectorNode | null = null;

From d5b7230e267131c56cd7526de56d859a7776e75a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 15:43:27 -0400
Subject: [PATCH 07/99] Build a window's class record and parse its operations
 once, not per window

Each new window spread every platform class into a fresh object two
times, and parsed the Web IDL text of each Window operation after
building a map of every interface class. Both depend on nothing a
window has.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts    |  7 +++++--
 src/internal/webidl.ts | 30 +++++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index f214ccae..424c340c 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -39540,8 +39540,10 @@ function startPendingImages(
 // cycle through cssvalues, and a table built at module load would read
 // its classes before they exist when canvas.ts is the first module
 // imported.
-function getWindowClasses(): Record<string, Constructor> {
-	return {
+let windowClasses: Readonly<Record<string, Constructor>> | null = null;
+
+function getWindowClasses(): Readonly<Record<string, Constructor>> {
+	windowClasses ??= {
 		...platform,
 		...CSSOM_INTERFACES,
 		CanvasGradient,
@@ -39551,6 +39553,7 @@ function getWindowClasses(): Record<string, Constructor> {
 		ImageData,
 		Path2D,
 	} as unknown as Record<string, Constructor>;
+	return windowClasses;
 }
 
 /** The names of the interfaces a window exposes. */
diff --git a/src/internal/webidl.ts b/src/internal/webidl.ts
index 4688ccec..6cfc53bb 100644
--- a/src/internal/webidl.ts
+++ b/src/internal/webidl.ts
@@ -845,6 +845,27 @@ export function installInterfaces(
 	return interfaceObjects;
 }
 
+// Every window wraps the same operations, so each is parsed once.
+const windowOperations = new Map<string, Member | null>();
+
+function getWindowOperation(name: string): Member | null {
+	let member = windowOperations.get(name);
+	if (member === undefined) {
+		const text = DOM_INTERFACES.Window?.members.find(([key]) => key === name);
+		if (text === undefined || !text[1].startsWith("o")) {
+			member = null;
+		} else {
+			const classes = new Map<string, Constructor>();
+			for (const [type, interfaceName] of interfaceNames) {
+				classes.set(interfaceName, type);
+			}
+			member = parseMember(text[1], classes);
+		}
+		windowOperations.set(name, member);
+	}
+	return member;
+}
+
 /**
  * `implementation` as the member `name` of `window`, with the checks
  * Window's operation of that name makes. Called without an object, as a
@@ -855,15 +876,10 @@ export function windowMember(
 	name: string,
 	implementation: (...args: never[]) => unknown,
 ): (...args: unknown[]) => unknown {
-	const text = DOM_INTERFACES.Window?.members.find(([key]) => key === name);
-	if (text === undefined || !text[1].startsWith("o")) {
+	const member = getWindowOperation(name);
+	if (member === null) {
 		return implementation as (...args: unknown[]) => unknown;
 	}
-	const classes = new Map<string, Constructor>();
-	for (const [type, interfaceName] of interfaceNames) {
-		classes.set(interfaceName, type);
-	}
-	const member = parseMember(text[1], classes);
 	const wrapper = {
 		[name](this: unknown, ...args: unknown[]): unknown {
 			if (this != null && this !== window) {

From c87eb4683a97a85d182945efc135ccf53b7868cf Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 16:19:22 -0400
Subject: [PATCH 08/99] Try only the rules an element's name allows, and skip
 pseudo-element rules outside shadow trees

The rule index filed rules by id and class, so a plain span tried 152
rules, among them the UA's rules for inputs, dialogs and table cells. A
rule whose subject names an element is now filed by that name too.
Pseudo-element rules match through a shadow host, so outside a shadow
tree they are rejected before the ::part() test. Checking a name for
uppercase is a loop rather than a regex.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 48 ++++++++++++++++++++++++++++---------------
 src/internal/text.ts  | 12 ++++++++---
 tests/cssom.test.ts   | 13 ++++++++++++
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 21dd9ab5..55911e97 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -9802,10 +9802,12 @@ interface RuleIndex {
 	rules: ParsedCSSRule[];
 	length: number;
 	keyed: Map<string, number[]>;
-	unkeyed: ParsedCSSRule[];
+	// The rest by the element name their subject requires, so a span never
+	// tries the rules for inputs and table cells.
+	tagged: Map<string, number[]>;
 	unkeyedPositions: number[];
-	// Candidates by the id and classes that chose them, since elements
-	// alike in both, like an editor's lines, try the same rules.
+	// Candidates by the name, id and classes that chose them, since elements
+	// alike in those, like an editor's lines, try the same rules.
 	candidates: Map<string, ParsedCSSRule[]>;
 }
 
@@ -9825,23 +9827,26 @@ function getRuleIndex(cascade: Cascade): RuleIndex {
 		rules,
 		length: rules.length,
 		keyed: new Map(),
-		unkeyed: [],
+		tagged: new Map(),
 		unkeyedPositions: [],
 		candidates: new Map(),
 	};
 	for (const [position, rule] of rules.entries()) {
 		// A pseudo-element's rule matches through its host, and a :host rule
 		// through the tree's host, so neither is filed under the element.
-		if (
-			rule.subjectKey === undefined || rule.pseudoElement || rule.reachesHost
-		) {
-			index.unkeyed.push(rule);
+		if (rule.pseudoElement || rule.reachesHost) {
+			index.unkeyedPositions.push(position);
+			continue;
+		}
+		const key = rule.subjectKey ?? rule.subjectTag;
+		if (key === undefined) {
 			index.unkeyedPositions.push(position);
 			continue;
 		}
-		const bucket = index.keyed.get(rule.subjectKey);
+		const buckets = rule.subjectKey === undefined ? index.tagged : index.keyed;
+		const bucket = buckets.get(key);
 		if (bucket === undefined) {
-			index.keyed.set(rule.subjectKey, [position]);
+			buckets.set(key, [position]);
 		} else {
 			bucket.push(position);
 		}
@@ -9874,10 +9879,8 @@ function getCandidateRules(
 	const index = getRuleIndex(cascade);
 	const id = getIdValue(element);
 	const classes = getClassTokens(element);
-	if (id === null && classes.size === 0) {
-		return index.unkeyed;
-	}
-	let key = id === null ? "" : `#${id}`;
+	const tag = localNameOf(element);
+	let key = id === null ? tag : `${tag} #${id}`;
 	for (const name of classes) {
 		key += ` .${name}`;
 	}
@@ -9886,6 +9889,14 @@ function getCandidateRules(
 		return candidates;
 	}
 	const positions = new Set(index.unkeyedPositions);
+	// A foreign element's name keeps its case, and a type selector may
+	// still match it lowercased, as isRuleMatch allows.
+	const lower = tag.toLowerCase();
+	for (const name of lower === tag ? [tag] : [tag, lower]) {
+		for (const position of index.tagged.get(name) ?? []) {
+			positions.add(position);
+		}
+	}
 	if (id !== null) {
 		for (const position of index.keyed.get(`#${id}`) ?? []) {
 			positions.add(position);
@@ -9918,15 +9929,19 @@ function getMatchingRules(cascade: Cascade, element: Element): ParsedCSSRule[] {
 		.filter(Boolean);
 	const matched = getCandidateRules(cascade, element).filter((rule) => {
 		if (rule.pseudoElement) {
+			if (shadowHost === null) {
+				return false;
+			}
 			// ::part(name) matches the shadow's HOST, and its declarations
 			// cascade onto the part element. This is the standard CSS Shadow
 			// Parts crossing. A built-in control's parts are the UA's, as in
 			// every browser, and a page reaches them only through the
 			// pseudo-elements above.
-			const partArg = rule.pseudoElement.match(/^::part\((.+)\)$/);
+			const partArg = rule.pseudoElement.startsWith("::part(")
+				? rule.pseudoElement.match(/^::part\((.+)\)$/)
+				: null;
 			if (partArg) {
 				return (
-					shadowHost !== null &&
 					(rule.uaOrigin || !isUAShadowTree(root)) &&
 					splitOnASCIIWhitespace(partArg[1])
 						.every((name) => partNames.includes(name)) &&
@@ -9937,7 +9952,6 @@ function getMatchingRules(cascade: Cascade, element: Element): ParsedCSSRule[] {
 				);
 			}
 			return (
-				shadowHost !== null &&
 				partPseudos.includes(rule.pseudoElement) &&
 				isRuleMatch(shadowHost, rule)
 			);
diff --git a/src/internal/text.ts b/src/internal/text.ts
index a04e785e..a9c15c07 100644
--- a/src/internal/text.ts
+++ b/src/internal/text.ts
@@ -27,11 +27,17 @@ export function splitOnASCIIWhitespace(value: string): string[] {
 	return trimmed === "" ? [] : trimmed.split(/[\t\n\f\r ]+/);
 }
 
-const ASCII_UPPER = /[A-Z]/;
-
 // What HTML and CSS case-fold with. Never the locale.
 export function toASCIILowercase(value: string): string {
-	if (!ASCII_UPPER.test(value)) {
+	let upper = false;
+	for (let i = 0; i < value.length; i++) {
+		const code = value.charCodeAt(i);
+		if (code >= 65 && code <= 90) {
+			upper = true;
+			break;
+		}
+	}
+	if (!upper) {
 		return value;
 	}
 	return value.replace(/[A-Z]/g, (character) =>
diff --git a/tests/cssom.test.ts b/tests/cssom.test.ts
index e34e89ad..7ecc2f30 100644
--- a/tests/cssom.test.ts
+++ b/tests/cssom.test.ts
@@ -588,3 +588,16 @@ test("a namespace prefix declared after a style rule does not apply", async () =
 	expect(style.sheet!.cssRules.length).toBe(3);
 	dom.dispose();
 });
+
+test("a type selector matches its element through the rules filed by name", () => {
+	const {dom} = makeDOM(
+		"<style>p { color: red } foreignObject { color: blue }</style>" +
+			"<p class=x>text</p><svg><foreignObject id=f></foreignObject></svg>",
+	);
+	const view = dom.document.defaultView!;
+	const color = (selector: string): string =>
+		view.getComputedStyle(dom.document.querySelector(selector)!).color;
+	expect(color("p")).toBe("rgb(255, 0, 0)");
+	expect(color("#f")).toBe("rgb(0, 0, 255)");
+	dom.dispose();
+});

From d1f9e87bb2df0ae06b45e0bcdee85880c6b94700 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 16:28:14 -0400
Subject: [PATCH 09/99] Derive no boxes for a mutation inside a tree that has
 left the document

A child added to a tree that was then removed before the frame still
had its boxes derived, and asking whether each was display: contents
resolved a style for every node of it. Building 20,000 spans under a
div and removing the div resolved 20,000 styles. A detached tree holds
no boxes, and the record that brings it back derives it whole.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts               |  4 ++--
 src/internal/layout.ts            | 10 ++++++++--
 tests/layout-invalidation.test.ts | 28 ++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 424c340c..ef46c55b 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -16750,8 +16750,8 @@ export function isModalDialog(node: globalThis.Node): boolean {
 	);
 }
 
-function isConnectedNode(node: Node): boolean {
-	return _(node).connected;
+export function isConnectedNode(node: globalThis.Node): boolean {
+	return _(node as Node).connected;
 }
 
 class HTMLDirectoryElement extends HTMLElement {
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index bbc55d5c..40203a0e 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -34,6 +34,7 @@ import {
 	getAddedNodes,
 	getScrollOffset,
 	getShadowRoot,
+	isConnectedNode,
 	isDocumentElement,
 	isInFlatTree,
 	isModalDialog,
@@ -6732,6 +6733,12 @@ function invalidateForRecord(
 		measured.add(target);
 		return;
 	}
+	measured.add(target);
+	// A tree that has left the document holds no boxes. Inserted again, it
+	// is derived whole from the record that brings it back.
+	if (!isConnectedNode(target)) {
+		return;
+	}
 	// The removed nodes are already detached, so the container is reached
 	// through the target rather than through them.
 	if (nodeTypeOf(target) === target.ELEMENT_NODE) {
@@ -6739,8 +6746,7 @@ function invalidateForRecord(
 	}
 	// A member gaining or losing a descendant changes no box list (the
 	// member is still there, holding more or less), so the box measuring it
-	// is notified directly.
-	measured.add(target);
+	// is notified directly, above.
 	for (const node of getAddedNodes(record)) {
 		invalidateSubtreeDerivation(layout, node);
 	}
diff --git a/tests/layout-invalidation.test.ts b/tests/layout-invalidation.test.ts
index 4c5c93ff..e76ffd3e 100644
--- a/tests/layout-invalidation.test.ts
+++ b/tests/layout-invalidation.test.ts
@@ -852,3 +852,31 @@ test("many children of one container changed in one frame all repaint", async ()
 	}
 	dom.dispose();
 });
+
+test("a subtree changed while out of the document lays out its changes when it returns", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div id=box><p id=a>first</p><p>second</p></div><p>after</p>";
+	await nextFrame(dom);
+	const box = document.getElementById("box")!;
+	box.remove();
+	await nextFrame(dom);
+	expect(dom.renderANSI()).not.toContain("first");
+	box.querySelector("#a")!.textContent = "changed and much longer";
+	const span = document.createElement("span");
+	span.textContent = "added";
+	box.prepend(span);
+	box.lastElementChild!.remove();
+	document.body.prepend(box);
+	await nextFrame(dom);
+	const lines = dom.renderANSI().split("\n").map((line) =>
+		line.replace(/\x1b\[[0-9;:]*m/g, "").trimEnd());
+	expect(lines.slice(0, 3)).toEqual([
+		"added",
+		"changed and much longer",
+		"after",
+	]);
+	dom.dispose();
+});

From 8e0c779f3b76eed4bdad492214f8ee5fcc11a293 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 16:31:35 -0400
Subject: [PATCH 10/99] Attach no pseudo-elements in a detached tree, and walk
 an added tree without a NodeList

Each added element's descendants came from querySelectorAll, which
built a NodeList and defined an index property per element. They are
now walked directly. A detached tree's pseudo-elements and shadow roots
wait for the record that inserts it, which visits the same elements.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts             | 31 ++++++++++++++++++++---------
 tests/layout-invalidation.test.ts | 33 +++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 55911e97..64753dc7 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -44,12 +44,14 @@ import {
 	hasAttributeOf,
 	HTML_NAMESPACE,
 	isButtonInput,
+	isConnectedNode,
 	isDocumentElement,
 	isShadowRoot,
 	isUAShadowTree,
 	localNameOf,
 	MATHML_NAMESPACE,
 	namespaceOf,
+	nextInTree,
 	nodeTypeOf,
 	ownerDocumentOf,
 	pseudoElement,
@@ -6526,15 +6528,26 @@ export class Cascade {
 								shouldSyncStylesheets = true;
 							}
 						} else {
-							invalidateElementCaches(this, element);
-							attachPseudoElementsToElement(this, element);
-							registerConnectedShadowRoots(this, element);
-
-							const childElements = element.querySelectorAll("*");
-							for (const childElement of childElements) {
-								invalidateElementCaches(this, childElement);
-								attachPseudoElementsToElement(this, childElement);
-								registerConnectedShadowRoots(this, childElement);
+							// A detached tree's pseudo-elements and shadow roots wait
+							// for the record that brings it into the document. Its
+							// styles still answer getComputedStyle.
+							const connected = isConnectedNode(element);
+							const elements: Element[] = [];
+							for (
+								let next: DOMNode | null = element as unknown as DOMNode;
+								next !== null;
+								next = nextInTree(next, element as unknown as DOMNode)
+							) {
+								if (nodeTypeOf(next) === Node.ELEMENT_NODE) {
+									elements.push(next as unknown as Element);
+								}
+							}
+							for (const each of elements) {
+								invalidateElementCaches(this, each);
+								if (connected) {
+									attachPseudoElementsToElement(this, each);
+									registerConnectedShadowRoots(this, each);
+								}
 							}
 						}
 					}
diff --git a/tests/layout-invalidation.test.ts b/tests/layout-invalidation.test.ts
index e76ffd3e..a5413681 100644
--- a/tests/layout-invalidation.test.ts
+++ b/tests/layout-invalidation.test.ts
@@ -880,3 +880,36 @@ test("a subtree changed while out of the document lays out its changes when it r
 	]);
 	dom.dispose();
 });
+
+test("pseudo-elements built while a tree is detached show once it is inserted", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<style>.tag::before { content: '> ' } .warm { color: red }</style>";
+	await nextFrame(dom);
+	const box = document.createElement("div");
+	const list = document.createElement("ul");
+	box.append(list);
+	const item = document.createElement("li");
+	item.textContent = "item";
+	list.append(item);
+	const tag = document.createElement("p");
+	tag.className = "tag";
+	tag.textContent = "tagged";
+	box.append(tag);
+	const warm = document.createElement("div");
+	warm.className = "warm";
+	const moved = document.createElement("span");
+	moved.textContent = "moved";
+	box.append(moved);
+	warm.append(moved);
+	box.append(warm);
+	document.body.append(box);
+	await nextFrame(dom);
+	const text = terminal.getPlainText();
+	expect(text).toContain("• item");
+	expect(text).toContain("> tagged");
+	expect(text).toContain("moved");
+	dom.dispose();
+});

From 4c83342897a1ac6ab3da03ea3f7cc872159f8802 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 17:03:55 -0400
Subject: [PATCH 11/99] Restyle only the children a sibling rule could name
 when a child comes or goes

The UA sheet's details > summary:first-of-type sets display and list
styles, so in every document a sibling rule reached descendants, and a
parent gaining a child restyled everything under it. Appending a message
to a chat log restyled every earlier message. Each child is now checked
against the sibling rules' keys, as it already was when no rule reached
descendants, and only one they could name restyles with its subtree.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts      |  6 ++---
 tests/style-caches.test.ts | 48 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 64753dc7..6d7ccdd6 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -8350,11 +8350,9 @@ function invalidateElement(cascade: Cascade, element: Element): void {
 // children match, and the element itself through :empty. Their
 // descendants only follow when a sheet tests siblings outside a subject
 // or inherits through one.
+// Only a child a sibling-tested compound could name restyles, with its
+// subtree when such a rule reaches descendants.
 function invalidateChildren(cascade: Cascade, element: Element): void {
-	if (getSiblingIndex(cascade, element)?.reachesDescendants) {
-		invalidateSubtree(cascade, element);
-		return;
-	}
 	invalidateSibling(cascade, element);
 	for (const child of element.children) {
 		invalidateSibling(cascade, child);
diff --git a/tests/style-caches.test.ts b/tests/style-caches.test.ts
index 90590219..a90b2908 100644
--- a/tests/style-caches.test.ts
+++ b/tests/style-caches.test.ts
@@ -138,3 +138,51 @@ test("a list marker's text follows a ::marker rule added after the first frame",
 	expect(dom.renderANSI()).toContain("- item");
 	dom.dispose();
 });
+
+test("appending a child leaves its earlier siblings' styles alone", async () => {
+	const {dom, document} =
+		await mount("<div id=log><div id=first><span>a</span></div></div>");
+	const first = document.getElementById("first");
+	const span = first.firstElementChild;
+	const boxes = [getBoxModel(first), getBoxModel(span)];
+	const next = document.createElement("div");
+	next.textContent = "b";
+	document.getElementById("log").append(next);
+	await nextFrame(dom);
+	expect([getBoxModel(first), getBoxModel(span)]).toEqual(boxes);
+	expect(getBoxModel(first)).toBe(boxes[0]);
+	expect(getBoxModel(span)).toBe(boxes[1]);
+	dom.dispose();
+});
+
+test("a sibling rule that reaches descendants follows a child placed first", async () => {
+	const {dom, document} = await mount(
+		"<style>li:first-child span { padding-left: 2px }</style>" +
+			"<ul><li id=a><span id=sa>a</span></li></ul>",
+	);
+	expect(getBoxModel(document.getElementById("sa")).paddingLeft).toBe(2);
+	const b = document.createElement("li");
+	b.innerHTML = "<span id=sb>b</span>";
+	document.querySelector("ul").prepend(b);
+	await nextFrame(dom);
+	expect(getBoxModel(document.getElementById("sb")).paddingLeft).toBe(2);
+	expect(getBoxModel(document.getElementById("sa")).paddingLeft === 0)
+		.toBe(true);
+	dom.dispose();
+});
+
+test("only a details element's first summary is its marker", async () => {
+	const {dom, document} =
+		await mount("<details><summary id=old>old</summary>body</details>");
+	const view = dom.window;
+	const display = (id: string): string =>
+		view.getComputedStyle(document.getElementById(id)).display;
+	expect(display("old")).toBe("list-item");
+	const summary = document.createElement("summary");
+	summary.id = "new";
+	summary.textContent = "new";
+	document.querySelector("details").prepend(summary);
+	await nextFrame(dom);
+	expect([display("new"), display("old")]).toEqual(["list-item", "block"]);
+	dom.dispose();
+});

From 3be561de845002ef008d261ada82a9b450921fca Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 17:12:09 -0400
Subject: [PATCH 12/99] Ask whether a scroller is the root box only when it has
 scrolled

Measuring a box walked its ancestors and asked each whether it was the
html or body element, reading both through the window's bindings, before
reading a scroll offset that was nearly always zero. CodeMirror measures
on every keystroke.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 40203a0e..3e31608d 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -4792,10 +4792,14 @@ function getScrollShift(
 		if (next === null) {
 			break;
 		}
-		const scroller = getScrollOwner(layout, next);
-		if (scroller !== null) {
-			x -= getScrollOffset(scroller, "left");
-			y -= getScrollOffset(scroller, "top");
+		const owner = next.owner as Node | undefined;
+		if (owner && nodeTypeOf(owner) === owner.ELEMENT_NODE) {
+			const left = getScrollOffset(owner as Element, "left");
+			const top = getScrollOffset(owner as Element, "top");
+			if ((left !== 0 || top !== 0) && !isRootBox(layout, owner as Element)) {
+				x -= left;
+				y -= top;
+			}
 		}
 		current = next;
 	}

From 191fcceb3b065e4445fb6cb8da7db447f9ee3fce Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 17:24:31 -0400
Subject: [PATCH 13/99] Add a benchmark harness, and compare each pull request
 against its base

bench/run.ts runs each scenario in bench/scenarios in a process of its
own and prints the median CPU time of each measurement. With --against
it checks a ref out into a temporary worktree and alternates runs
between the two checkouts. Four scenarios are shaped like apps: startup
to a first frame, scrolling a long document, appending to a React chat
log, and typing in CodeMirror. Four are synthetic: the email fixtures, a
1000-row table, a :has() toggle and building 20,000 spans.

A workflow runs the comparison on every pull request and writes the
table to the job summary. Shared runners are too noisy to fail on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .github/workflows/bench.yml |  32 ++++++++
 bench/harness.ts            |  78 +++++++++++++++++++
 bench/run.ts                | 145 ++++++++++++++++++++++++++++++++++++
 bench/scenarios/chat.ts     |  83 +++++++++++++++++++++
 bench/scenarios/dom-ops.ts  |  22 ++++++
 bench/scenarios/editor.ts   |  73 ++++++++++++++++++
 bench/scenarios/emails.ts   |  18 +++++
 bench/scenarios/scroll.ts   |  25 +++++++
 bench/scenarios/startup.ts  |  26 +++++++
 bench/scenarios/table.ts    |  16 ++++
 bench/scenarios/toggle.ts   |  24 ++++++
 eslint.config.js            |   2 +-
 package.json                |   1 +
 tsconfig.json               |   2 +-
 14 files changed, 545 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/bench.yml
 create mode 100644 bench/harness.ts
 create mode 100644 bench/run.ts
 create mode 100644 bench/scenarios/chat.ts
 create mode 100644 bench/scenarios/dom-ops.ts
 create mode 100644 bench/scenarios/editor.ts
 create mode 100644 bench/scenarios/emails.ts
 create mode 100644 bench/scenarios/scroll.ts
 create mode 100644 bench/scenarios/startup.ts
 create mode 100644 bench/scenarios/table.ts
 create mode 100644 bench/scenarios/toggle.ts

diff --git a/.github/workflows/bench.yml b/.github/workflows/bench.yml
new file mode 100644
index 00000000..ee1f1171
--- /dev/null
+++ b/.github/workflows/bench.yml
@@ -0,0 +1,32 @@
+name: Benchmarks
+
+on:
+  pull_request:
+
+# Shared runners are too noisy to fail a pull request on a number, so the
+# comparison is a report in the job summary, not a check.
+jobs:
+  compare:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 26
+
+      - run: bun install --frozen-lockfile
+
+      - name: Compare with the base branch
+        run: |
+          {
+            echo "## Benchmarks: median CPU time, base against this pull request"
+            echo
+            node bench/run.ts --runs 3 --against "origin/${{ github.base_ref }}" --markdown
+          } >> "$GITHUB_STEP_SUMMARY"
diff --git a/bench/harness.ts b/bench/harness.ts
new file mode 100644
index 00000000..1d9f0068
--- /dev/null
+++ b/bench/harness.ts
@@ -0,0 +1,78 @@
+/**
+ * What every scenario shares. A scenario runs against the checkout named
+ * by its first argument, so the runner can point the same scenario at two
+ * checkouts, and prints one JSON line per measurement.
+ */
+import {readFileSync} from "node:fs";
+
+export const root = process.argv[2];
+
+/** The bench's own checkout, which every input is read from. */
+export const benchRoot = new URL("..", import.meta.url).pathname;
+
+const index = await import(`${root}/src/index.ts`);
+const utils = await import(`${root}/tests/test-utils.ts`);
+
+export const TermDOM = index.TermDOM;
+export const installGlobals = index.installGlobals;
+export const MockProcess = utils.MockProcess;
+export const nextFrame: (dom: unknown) => Promise<void> = utils.nextFrame;
+
+export function readBenchFile(path: string): string {
+	return readFileSync(`${benchRoot}${path}`, "utf8");
+}
+
+export async function mount(
+	cols = 100,
+	rows = 40,
+): Promise<{proc: any; dom: any}> {
+	const proc = new MockProcess({cols, rows});
+	const dom = new TermDOM({transport: proc.transport});
+	dom.attach();
+	await nextFrame(dom);
+	return {proc, dom};
+}
+
+/**
+ * The terminal becomes a sink once the page is up, so what is measured
+ * is the engine and not the emulator reading its output.
+ */
+export function silence(proc: any): void {
+	proc.stdout.write = (chunk: unknown, enc?: unknown, cb?: unknown) => {
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+}
+
+/** CPU time, so the time a frame waits for its turn is not counted. */
+export function cpuMs(): number {
+	const {user, system} = process.cpuUsage();
+	return (user + system) / 1000;
+}
+
+export function report(label: string, times: number[]): void {
+	const sorted = [...times].sort((a, b) => a - b);
+	const median = sorted[Math.floor(sorted.length / 2)];
+	console.log(JSON.stringify({label, median}));
+}
+
+export async function measure(
+	label: string,
+	steps: number,
+	step: (i: number) => Promise<void> | void,
+	warm = 10,
+): Promise<void> {
+	for (let i = 0; i < warm; i++) {
+		await step(i);
+	}
+	const times: number[] = [];
+	for (let i = warm; i < warm + steps; i++) {
+		const start = cpuMs();
+		await step(i);
+		times.push(cpuMs() - start);
+	}
+	report(label, times);
+}
diff --git a/bench/run.ts b/bench/run.ts
new file mode 100644
index 00000000..4562a2da
--- /dev/null
+++ b/bench/run.ts
@@ -0,0 +1,145 @@
+/**
+ * Runs the scenarios in bench/scenarios, each in a process of its own,
+ * and prints the median CPU time of each measurement.
+ *
+ *   node bench/run.ts [--runs N] [--only a,b] [--against REF] [--markdown]
+ *
+ * --against checks REF out into a temporary worktree and runs the same
+ * scenarios against it, alternating with this checkout, so both sides
+ * share whatever the machine was doing.
+ */
+import {spawnSync} from "node:child_process";
+import {mkdtempSync, readdirSync, rmSync, symlinkSync} from "node:fs";
+import {tmpdir} from "node:os";
+import {join} from "node:path";
+
+const benchRoot = new URL("..", import.meta.url).pathname;
+const scenarioDirectory = new URL("scenarios/", import.meta.url).pathname;
+
+function option(name: string): string | undefined {
+	const index = process.argv.indexOf(name);
+	return index === -1 ? undefined : process.argv[index + 1];
+}
+
+const runs = Number(option("--runs") ?? 3);
+const only = option("--only")?.split(",");
+const against = option("--against");
+const markdown = process.argv.includes("--markdown");
+
+const scenarios = readdirSync(scenarioDirectory)
+	.filter((name) => name.endsWith(".ts"))
+	.map((name) => name.slice(0, -3))
+	.filter((name) => only === undefined || only.includes(name));
+
+function git(...args: string[]): void {
+	const result = spawnSync("git", args, {cwd: benchRoot, stdio: "inherit"});
+	if (result.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed`);
+	}
+}
+
+function runScenario(name: string, root: string): Map<string, number> {
+	const result = spawnSync(
+		process.execPath,
+		[...process.execArgv, join(scenarioDirectory, `${name}.ts`), root],
+		{
+			cwd: root,
+			encoding: "utf8",
+			timeout: 600_000,
+			stdio: ["ignore", "pipe", "pipe"],
+		},
+	);
+	const medians = new Map<string, number>();
+	for (const line of result.stdout.split("\n")) {
+		if (line.startsWith("{")) {
+			const {label, median} = JSON.parse(line);
+			medians.set(label, median);
+		}
+	}
+	if (medians.size === 0) {
+		console.error(`${name} on ${root} reported nothing:\n${result.stderr}`);
+	}
+	return medians;
+}
+
+function median(values: number[]): number {
+	const sorted = [...values].sort((a, b) => a - b);
+	return sorted[Math.floor(sorted.length / 2)];
+}
+
+const roots: Array<{name: string; path: string}> = [];
+let worktree: string | undefined;
+if (against !== undefined) {
+	worktree = mkdtempSync(join(tmpdir(), "termdom-bench-"));
+	git("worktree", "add", "--detach", worktree, against);
+	symlinkSync(join(benchRoot, "node_modules"), join(worktree, "node_modules"));
+	roots.push({name: against, path: worktree});
+}
+roots.push({name: "this checkout", path: benchRoot.replace(/\/$/, "")});
+
+const samples = new Map<string, Map<string, number[]>>();
+try {
+	for (let run = 0; run < runs; run++) {
+		for (const scenario of scenarios) {
+			for (const root of roots) {
+				for (const [label, value] of runScenario(scenario, root.path)) {
+					let byRoot = samples.get(label);
+					if (byRoot === undefined) {
+						byRoot = new Map();
+						samples.set(label, byRoot);
+					}
+					const values = byRoot.get(root.name) ?? [];
+					values.push(value);
+					byRoot.set(root.name, values);
+				}
+			}
+		}
+		console.error(`run ${run + 1} of ${runs} done`);
+	}
+} finally {
+	if (worktree !== undefined) {
+		rmSync(join(worktree, "node_modules"));
+		git("worktree", "remove", "--force", worktree);
+	}
+}
+
+const header = [
+	"Measurement",
+	...roots.map((root) => `${root.name} (ms)`),
+	...(roots.length === 2 ? ["Change"] : []),
+];
+const rows = [...samples].map(([label, byRoot]) => {
+	const values = roots.map((root) => {
+		const values = byRoot.get(root.name);
+		return values === undefined ? NaN : median(values);
+	});
+	const cells = [label, ...values.map((value) => value.toFixed(2))];
+	if (values.length === 2) {
+		const change = (values[1] - values[0]) / values[0] * 100;
+		cells.push(`${change > 0 ? "+" : ""}${change.toFixed(0)}%`);
+	}
+	return cells;
+});
+
+if (markdown) {
+	console.log(`| ${header.join(" | ")} |`);
+	console.log(
+		`|${header.map((_, i) => i === 0 ? " --- " : " ---: ").join("|")}|`,
+	);
+	for (const row of rows) {
+		console.log(`| ${row.join(" | ")} |`);
+	}
+} else {
+	const widths = header.map((_, i) =>
+		Math.max(header[i].length, ...rows.map((row) => row[i].length)));
+	const format = (cells: string[]): string =>
+		cells
+			.map((cell, i) =>
+				i === 0 ? cell.padEnd(widths[i]) : cell.padStart(widths[i]),
+			)
+			.join("  ");
+	console.log(format(header));
+	for (const row of rows) {
+		console.log(format(row));
+	}
+}
diff --git a/bench/scenarios/chat.ts b/bench/scenarios/chat.ts
new file mode 100644
index 00000000..7e2307a5
--- /dev/null
+++ b/bench/scenarios/chat.ts
@@ -0,0 +1,83 @@
+import {
+	installGlobals,
+	measure,
+	mount,
+	nextFrame,
+	silence,
+} from "../harness.ts";
+
+const {proc, dom} = await mount();
+installGlobals(dom);
+const React = await import("react");
+const {createRoot} = await import("react-dom/client");
+const {flushSync} = await import("react-dom");
+const h = React.createElement;
+
+dom.document.head.innerHTML = `<style>
+	.msg { margin-top: 1px }
+	.who { font-weight: bold }
+	.you .who { color: #5fafff }
+	.bot .who { color: #87d787 }
+	.body { display: block }
+	.time { color: #808080 }
+	.prompt { display: flex }
+	textarea { flex-grow: 1; border: none; padding: 0 }
+</style>`;
+
+interface Message {
+	id: number;
+	who: string;
+	text: string;
+}
+
+let append: (message: Message) => void = () => {};
+
+function App(): React.ReactElement {
+	const [messages, setMessages] = React.useState<Message[]>([]);
+	append = (message) => setMessages((list) => [...list, message]);
+	return h(
+		"div",
+		null,
+		h(
+			"div",
+			{className: "log"},
+			messages.map((message) =>
+				h(
+					"div",
+					{key: message.id, className: `msg ${message.who}`},
+					h("span", {className: "who"}, message.who === "you" ? "You" : "Bot"),
+					" ",
+					h(
+						"span",
+						{className: "time"},
+						`12:${String(message.id % 60).padStart(2, "0")}`,
+					),
+					h("span", {className: "body"}, message.text),
+				)),
+		),
+		h(
+			"div",
+			{className: "prompt"},
+			h("span", null, "› "),
+			h("textarea", {rows: 1}),
+		),
+	);
+}
+
+const reactRoot = createRoot(dom.document.body);
+flushSync(() => reactRoot.render(h(App)));
+await nextFrame(dom);
+silence(proc);
+
+const words = (
+	"the quick brown fox jumps over the lazy dog while a terminal renders the dom"
+).split(" ");
+let id = 0;
+await measure("react chat: append a message", 200, async () => {
+	const text = Array.from({length: 12 + (id % 20)}, (_, k) => words[(id + k) %
+		words.length]).join(" ");
+	flushSync(() => append({id, who: id % 2 ? "bot" : "you", text}));
+	id++;
+	await nextFrame(dom);
+});
+dom.dispose();
diff --git a/bench/scenarios/dom-ops.ts b/bench/scenarios/dom-ops.ts
new file mode 100644
index 00000000..50c3232c
--- /dev/null
+++ b/bench/scenarios/dom-ops.ts
@@ -0,0 +1,22 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const term = new TermDOM();
+const {document} = term;
+await measure(
+	"dom: build, render and remove 20000 spans",
+	15,
+	() => {
+		const root = document.createElement("div");
+		document.body.appendChild(root);
+		for (let k = 0; k < 20000; k++) {
+			const span = document.createElement("span");
+			span.className = `c${k % 7}`;
+			span.textContent = "t";
+			root.appendChild(span);
+		}
+		root.remove();
+		term.renderANSI();
+	},
+	3,
+);
+term.dispose();
diff --git a/bench/scenarios/editor.ts b/bench/scenarios/editor.ts
new file mode 100644
index 00000000..02039066
--- /dev/null
+++ b/bench/scenarios/editor.ts
@@ -0,0 +1,73 @@
+import {
+	installGlobals,
+	measure,
+	mount,
+	nextFrame,
+	silence,
+} from "../harness.ts";
+
+const {proc, dom} = await mount();
+installGlobals(dom);
+const {EditorState} = await import("@codemirror/state");
+const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
+const {defaultKeymap, history, historyKeymap} = await import(
+	"@codemirror/commands",
+);
+const {javascript} = await import("@codemirror/lang-javascript");
+const {defaultHighlightStyle, syntaxHighlighting} = await import(
+	"@codemirror/language",
+);
+
+const {document} = dom;
+document.body.innerHTML = "<h1>Editor</h1><div id=editor></div>";
+const doc = Array.from(
+	{length: 100},
+	(_, i) =>
+		[
+			`function step${i}(value: number, rect: {x: number; y: number}): number {`,
+			`\tconst scaled = value * ${i + 1} + rect.x; // step ${i}`,
+			"\treturn Math.max(scaled, rect.y);",
+			"}",
+		].join("\n"),
+).join("\n");
+const view = new EditorView({
+	state: EditorState.create({
+		doc,
+		extensions: [
+			lineNumbers(),
+			history(),
+			javascript({typescript: true}),
+			syntaxHighlighting(defaultHighlightStyle),
+			keymap.of([...defaultKeymap, ...historyKeymap]),
+			EditorView.theme({
+				".cm-scroller": {lineHeight: "1"},
+				".cm-content": {padding: "0"},
+			}),
+		],
+	}),
+	parent: document.getElementById("editor"),
+});
+view.focus();
+view.dispatch({selection: {anchor: doc.indexOf("\n", 200)}});
+await nextFrame(dom);
+silence(proc);
+
+async function press(data: string): Promise<void> {
+	const before = view.state.doc.length;
+	proc.stdin.simulateResponse(data);
+	for (let i = 0; i < 200 && view.state.doc.length === before; i++) {
+		await new Promise((resolve) => setImmediate(resolve));
+	}
+	await nextFrame(dom);
+}
+
+const text = "const value = compute(element, rect);";
+let typed = 0;
+await measure("codemirror: type a character", 120, async () => {
+	await press(text[typed % text.length]);
+	typed++;
+	if (typed % text.length === 0) {
+		await press("\r");
+	}
+});
+dom.dispose();
diff --git a/bench/scenarios/emails.ts b/bench/scenarios/emails.ts
new file mode 100644
index 00000000..fe0ac74f
--- /dev/null
+++ b/bench/scenarios/emails.ts
@@ -0,0 +1,18 @@
+import {readdirSync} from "node:fs";
+
+import {benchRoot, measure, readBenchFile, TermDOM} from "../harness.ts";
+
+const directory = "tests/fixtures/email";
+const emails = readdirSync(`${benchRoot}${directory}`)
+	.filter((name) => name.endsWith(".html"))
+	.map((name) => readBenchFile(`${directory}/${name}`));
+await measure(
+	"emails: parse and render every fixture",
+	7,
+	() => {
+		for (const html of emails) {
+			new TermDOM({html}).renderANSI();
+		}
+	},
+	2,
+);
diff --git a/bench/scenarios/scroll.ts b/bench/scenarios/scroll.ts
new file mode 100644
index 00000000..13932e8b
--- /dev/null
+++ b/bench/scenarios/scroll.ts
@@ -0,0 +1,25 @@
+import {marked} from "marked";
+
+import {measure, mount, nextFrame, readBenchFile, silence} from "../harness.ts";
+
+const html = marked.parse(readBenchFile("README.md"), {async: false});
+const {proc, dom} = await mount();
+dom.document.body.innerHTML = `<article>${html}</article>`;
+await nextFrame(dom);
+silence(proc);
+const view = dom.window;
+let direction = 1;
+
+async function scroll(rows: number): Promise<void> {
+	const max = dom.document.body.scrollHeight - view.innerHeight;
+	const next = view.scrollY + rows * direction;
+	if (next > max || next < 0) {
+		direction = -direction;
+	}
+	view.scrollBy(0, rows * direction);
+	await nextFrame(dom);
+}
+
+await measure("scroll: one row", 100, () => scroll(1));
+await measure("scroll: one page", 60, () => scroll(40));
+dom.dispose();
diff --git a/bench/scenarios/startup.ts b/bench/scenarios/startup.ts
new file mode 100644
index 00000000..db087fc0
--- /dev/null
+++ b/bench/scenarios/startup.ts
@@ -0,0 +1,26 @@
+import {marked} from "marked";
+
+import {
+	cpuMs,
+	MockProcess,
+	nextFrame,
+	readBenchFile,
+	report,
+	TermDOM,
+} from "../harness.ts";
+
+const html = marked.parse(readBenchFile("README.md"), {async: false});
+const times: number[] = [];
+for (let i = 0; i < 25; i++) {
+	const proc = new MockProcess({cols: 100, rows: 40});
+	const start = cpuMs();
+	const dom = new TermDOM({transport: proc.transport});
+	dom.document.body.innerHTML = `<article>${html}</article>`;
+	dom.attach();
+	await nextFrame(dom);
+	if (i >= 5) {
+		times.push(cpuMs() - start);
+	}
+	dom.dispose();
+}
+report("startup: README to first frame", times);
diff --git a/bench/scenarios/table.ts b/bench/scenarios/table.ts
new file mode 100644
index 00000000..b8a70449
--- /dev/null
+++ b/bench/scenarios/table.ts
@@ -0,0 +1,16 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const rows = Array.from(
+	{length: 1000},
+	(_, i) => `<tr><td>${i}</td><td class=a>row ${i}</td><td><b>x</b></td></tr>`,
+).join("");
+const html =
+	`<style>td { padding: 0 1ch } .a { color: red }</style><table>${rows}</table>`;
+await measure(
+	"table: render 1000 rows",
+	7,
+	() => {
+		new TermDOM({html}).renderANSI();
+	},
+	2,
+);
diff --git a/bench/scenarios/toggle.ts b/bench/scenarios/toggle.ts
new file mode 100644
index 00000000..30fa1c1b
--- /dev/null
+++ b/bench/scenarios/toggle.ts
@@ -0,0 +1,24 @@
+import {measure, TermDOM} from "../harness.ts";
+
+const term = new TermDOM();
+const {document} = term;
+document.body.innerHTML =
+	"<style>.on { color: red; font-weight: bold } li:has(.on) { background: blue }</style>" +
+	"<ul>" +
+	Array.from(
+		{length: 500},
+		(_, i) => `<li><span id=s${i}>item ${i}</span></li>`,
+	).join("") +
+	"</ul>";
+term.renderANSI();
+let next = 0;
+await measure(
+	"toggle: a class under li:has(), 500 items",
+	200,
+	() => {
+		document.getElementById(`s${next++ % 500}`).classList.toggle("on");
+		term.renderANSI();
+	},
+	50,
+);
+term.dispose();
diff --git a/eslint.config.js b/eslint.config.js
index fad21ad7..ec170b67 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,7 +20,7 @@ export default [
 	{
 		// Scripts and examples print to the terminal as their job. URL is a
 		// runtime global everywhere the scripts run.
-		files: ["scripts/**", "examples/**"],
+		files: ["scripts/**", "examples/**", "bench/**"],
 		languageOptions: {globals: {URL: "readonly"}},
 		rules: {"no-console": "off"},
 	},
diff --git a/package.json b/package.json
index 38f4d476..e53fc8f9 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "LICENSE"
   ],
   "scripts": {
+    "bench": "node bench/run.ts",
     "build": "libuild build",
     "lint": "eslint .",
     "prepublishOnly": "echo 'ERROR: Cannot publish from root directory. Use libuild to publish or stage the package.' && exit 1",
diff --git a/tsconfig.json b/tsconfig.json
index 98c2ac55..5677d7be 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,7 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true
   },
-  "include": ["src", "tests", "fuzz", "examples", "scripts"],
+  "include": ["src", "tests", "fuzz", "examples", "scripts", "bench"],
 	// The drift ledger instantiates every class against lib.dom, which is
 	// twenty seconds and a gigabyte the ordinary typecheck does not need.
 	// scripts/lib-dom-drift.ts checks it in a program of its own.

From c9702fb666fef033cff2c0fdb4c21c137ccd0c55 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 17:30:07 -0400
Subject: [PATCH 14/99] Make the canvas contexts' internal steps plain
 functions

The symbol-keyed methods were moved off the public prototypes onto the
records at startup, and called through those symbols. Each is now a
module function that takes the record, as the engine's other reads do.
The gradient and pattern lookups, the one pair a call chose between, are
chosen by the paint's class.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/canvas.ts | 837 ++++++++++++++++++++---------------------
 1 file changed, 401 insertions(+), 436 deletions(-)

diff --git a/src/internal/canvas.ts b/src/internal/canvas.ts
index 68c39233..df48df81 100644
--- a/src/internal/canvas.ts
+++ b/src/internal/canvas.ts
@@ -42,7 +42,6 @@ import {
 	type internals,
 	seal,
 	type Slots,
-	type Step,
 } from "./slots.ts";
 import {getStringWidth, graphemeSegmenter, toVisualOrder} from "./text.ts";
 
@@ -156,8 +155,6 @@ export class ImageData {
 
 declareSealedRoot(ImageData);
 
-const kColorAt = Symbol("colorAt");
-
 export interface ImageBitmapSlots {
 	bitmapData: Bitmap | null;
 }
@@ -436,8 +433,6 @@ interface Subpath {
 	closed: boolean;
 }
 
-const kSubpaths = Symbol("subpaths");
-
 class PathBuilder {
 	subpaths: Subpath[];
 	last: [number, number] | null;
@@ -786,7 +781,6 @@ interface DOMPointInit {
 
 export interface Path2DSlots {
 	builder: PathBuilder;
-	[kSubpaths]: Step<Path2D[typeof kSubpaths]>;
 }
 
 export interface Path2D {
@@ -805,10 +799,6 @@ export class Path2D {
 		}
 	}
 
-	get [kSubpaths](): Subpath[] {
-		return (this as unknown as Slots<Path2D>).builder.subpaths;
-	}
-
 	addPath(path: Path2D, transform?: Partial<CanvasMatrix>): void {
 		const m: Matrix = [
 			transform?.a ?? 1,
@@ -1457,7 +1447,6 @@ function pathPolygons(subpaths: Subpath[]): number[][] {
 export interface CanvasGradientSlots {
 	stops: Array<{offset: number; color: RGBA}>;
 	position: (x: number, y: number) => number;
-	[kColorAt]: Step<CanvasGradient[typeof kColorAt]>;
 }
 
 export interface CanvasGradient {
@@ -1488,44 +1477,47 @@ export class CanvasGradient {
 		}
 		slots.stops.splice(index, 0, {offset, color: parsed});
 	}
+}
 
-	/** The color at a user-space point, or null where the gradient has none. */
-	[kColorAt](this: Slots<CanvasGradient>, x: number, y: number): RGBA | null {
-		const slots = this;
-		const stops = slots.stops;
-		if (stops.length === 0) {
-			return {r: 0, g: 0, b: 0, a: 0};
-		}
-		const t = slots.position(x, y);
-		if (Number.isNaN(t)) {
-			return null;
-		}
-		if (t <= stops[0].offset) {
-			return stops[0].color;
-		}
-		const last = stops[stops.length - 1];
-		if (t >= last.offset) {
-			return last.color;
-		}
-		for (let i = 1; i < stops.length; i++) {
-			const a = stops[i - 1];
-			const b = stops[i];
-			if (t <= b.offset) {
-				const span = b.offset - a.offset;
-				const u = span === 0 ? 1 : (t - a.offset) / span;
-				// HTML interpolates the four channels as they are, without
-				// premultiplying.
-				const mix = (p: number, q: number) => p + (q - p) * u;
-				return {
-					r: mix(a.color.r, b.color.r),
-					g: mix(a.color.g, b.color.g),
-					b: mix(a.color.b, b.color.b),
-					a: mix(a.color.a, b.color.a),
-				};
-			}
-		}
+/** The color at a user-space point, or null where the gradient has none. */
+function getGradientColor(
+	slots: Slots<CanvasGradient>,
+	x: number,
+	y: number,
+): RGBA | null {
+	const stops = slots.stops;
+	if (stops.length === 0) {
+		return {r: 0, g: 0, b: 0, a: 0};
+	}
+	const t = slots.position(x, y);
+	if (Number.isNaN(t)) {
+		return null;
+	}
+	if (t <= stops[0].offset) {
+		return stops[0].color;
+	}
+	const last = stops[stops.length - 1];
+	if (t >= last.offset) {
 		return last.color;
 	}
+	for (let i = 1; i < stops.length; i++) {
+		const a = stops[i - 1];
+		const b = stops[i];
+		if (t <= b.offset) {
+			const span = b.offset - a.offset;
+			const u = span === 0 ? 1 : (t - a.offset) / span;
+			// HTML interpolates the four channels as they are, without
+			// premultiplying.
+			const mix = (p: number, q: number) => p + (q - p) * u;
+			return {
+				r: mix(a.color.r, b.color.r),
+				g: mix(a.color.g, b.color.g),
+				b: mix(a.color.b, b.color.b),
+				a: mix(a.color.a, b.color.a),
+			};
+		}
+	}
+	return last.color;
 }
 
 declareSealedRoot(CanvasGradient);
@@ -1535,7 +1527,6 @@ export interface CanvasPatternSlots {
 	repeatX: boolean;
 	repeatY: boolean;
 	patternTransform: Matrix;
-	[kColorAt]: Step<CanvasPattern[typeof kColorAt]>;
 }
 
 export interface CanvasPattern {
@@ -1564,35 +1555,43 @@ export class CanvasPattern {
 			transform?.f ?? 0,
 		];
 	}
+}
 
-	[kColorAt](this: Slots<CanvasPattern>, x: number, y: number): RGBA {
-		const slots = this;
-		const inverse = invert(slots.patternTransform);
-		if (inverse !== null) {
-			[x, y] = apply(inverse, x, y);
-		}
-		const bitmap = slots.patternBitmap;
-		const {width, height, data} = bitmap;
-		// The pattern tiles at the image's natural size.
-		let px = Math.floor((x * width) / naturalWidthOf(bitmap));
-		let py = Math.floor((y * height) / naturalHeightOf(bitmap));
-		if (slots.repeatX) {
-			px = ((px % width) + width) % width;
-		}
-		if (slots.repeatY) {
-			py = ((py % height) + height) % height;
-		}
-		if (px < 0 || py < 0 || px >= width || py >= height) {
-			return {r: 0, g: 0, b: 0, a: 0};
-		}
-		const at = (py * width + px) * 4;
-		return {
-			r: data[at],
-			g: data[at + 1],
-			b: data[at + 2],
-			a: data[at + 3] / 255,
-		};
+function getPatternColor(
+	slots: Slots<CanvasPattern>,
+	x: number,
+	y: number,
+): RGBA {
+	const inverse = invert(slots.patternTransform);
+	if (inverse !== null) {
+		[x, y] = apply(inverse, x, y);
+	}
+	const bitmap = slots.patternBitmap;
+	const {width, height, data} = bitmap;
+	// The pattern tiles at the image's natural size.
+	let px = Math.floor((x * width) / naturalWidthOf(bitmap));
+	let py = Math.floor((y * height) / naturalHeightOf(bitmap));
+	if (slots.repeatX) {
+		px = ((px % width) + width) % width;
 	}
+	if (slots.repeatY) {
+		py = ((py % height) + height) % height;
+	}
+	if (px < 0 || py < 0 || px >= width || py >= height) {
+		return {r: 0, g: 0, b: 0, a: 0};
+	}
+	const at = (py * width + px) * 4;
+	return {r: data[at], g: data[at + 1], b: data[at + 2], a: data[at + 3] / 255};
+}
+
+function getPaintColor(
+	paint: CanvasGradient | CanvasPattern,
+	x: number,
+	y: number,
+): RGBA | null {
+	return paint instanceof CanvasGradient
+		? getGradientColor(_(paint), x, y)
+		: getPatternColor(_(paint), x, y);
 }
 
 declareSealedRoot(CanvasPattern);
@@ -1785,17 +1784,6 @@ interface CanvasHost {
 	direction(): "ltr" | "rtl";
 }
 
-const kSetMatrix = Symbol("setMatrix");
-const kSubpathsFor = Symbol("subpathsFor");
-const kReadPathArgs = Symbol("readPathArgs");
-const kStrokeStyle = Symbol("strokeStyle");
-const kScale = Symbol("scale");
-const kRectMask = Symbol("rectMask");
-const kPaint = Symbol("paint");
-const kDropText = Symbol("dropText");
-const kCoverText = Symbol("coverText");
-const kDrawText = Symbol("drawText");
-
 // The host getContext() is making a context for. A context made any other
 // way has none, and its constructor is illegal, as a browser's is.
 let constructingHost: CanvasHost | GridHost | null = null;
@@ -1827,16 +1815,6 @@ export interface CanvasRenderingContext2DSlots {
 	state: State;
 	stack: State[];
 	path: PathBuilder;
-	[kSetMatrix]: Step<CanvasRenderingContext2D[typeof kSetMatrix]>;
-	[kSubpathsFor]: Step<CanvasRenderingContext2D[typeof kSubpathsFor]>;
-	[kReadPathArgs]: Step<CanvasRenderingContext2D[typeof kReadPathArgs]>;
-	[kStrokeStyle]: Step<CanvasRenderingContext2D[typeof kStrokeStyle]>;
-	[kScale]: Step<CanvasRenderingContext2D[typeof kScale]>;
-	[kRectMask]: Step<CanvasRenderingContext2D[typeof kRectMask]>;
-	[kPaint]: Step<CanvasRenderingContext2D[typeof kPaint]>;
-	[kDropText]: Step<CanvasRenderingContext2D[typeof kDropText]>;
-	[kCoverText]: Step<CanvasRenderingContext2D[typeof kCoverText]>;
-	[kDrawText]: Step<CanvasRenderingContext2D[typeof kDrawText]>;
 }
 
 export interface CanvasRenderingContext2D {
@@ -2102,21 +2080,22 @@ export class CanvasRenderingContext2D {
 
 	scale(x: number, y: number): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [x, 0, 0, y, 0, 0]));
+		setMatrix(slots, multiply(slots.state.transform, [x, 0, 0, y, 0, 0]));
 	}
 
 	rotate(angle: number): void {
 		const cos = Math.cos(angle);
 		const sin = Math.sin(angle);
 		const slots = _(this);
-		slots[kSetMatrix](
+		setMatrix(
+			slots,
 			multiply(slots.state.transform, [cos, sin, -sin, cos, 0, 0]),
 		);
 	}
 
 	translate(x: number, y: number): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [1, 0, 0, 1, x, y]));
+		setMatrix(slots, multiply(slots.state.transform, [1, 0, 0, 1, x, y]));
 	}
 
 	transform(
@@ -2128,7 +2107,7 @@ export class CanvasRenderingContext2D {
 		f: number,
 	): void {
 		const slots = _(this);
-		slots[kSetMatrix](multiply(slots.state.transform, [a, b, c, d, e, f]));
+		setMatrix(slots, multiply(slots.state.transform, [a, b, c, d, e, f]));
 	}
 
 	setTransform(
@@ -2141,9 +2120,9 @@ export class CanvasRenderingContext2D {
 	): void {
 		const slots = _(this);
 		if (typeof a === "number") {
-			slots[kSetMatrix]([a, b!, c!, d!, e!, f!]);
+			setMatrix(slots, [a, b!, c!, d!, e!, f!]);
 		} else {
-			slots[kSetMatrix]([
+			setMatrix(slots, [
 				a?.a ?? 1,
 				a?.b ?? 0,
 				a?.c ?? 0,
@@ -2155,7 +2134,7 @@ export class CanvasRenderingContext2D {
 	}
 
 	resetTransform(): void {
-		_(this)[kSetMatrix]([1, 0, 0, 1, 0, 0]);
+		setMatrix(_(this), [1, 0, 0, 1, 0, 0]);
 	}
 
 	getTransform(): CanvasMatrix {
@@ -2343,15 +2322,15 @@ export class CanvasRenderingContext2D {
 
 	fill(pathOrRule?: Path2D | FillRule, rule?: FillRule): void {
 		const slots = _(this);
-		const args = slots[kReadPathArgs](pathOrRule, rule);
+		const args = readPathArgs(pathOrRule, rule);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			pathPolygons(slots[kSubpathsFor](args.path)),
+			pathPolygons(subpathsFor(slots, args.path)),
 			bitmap.width,
 			bitmap.height,
 			args.rule,
 		);
-		slots[kPaint](mask, slots.state.fillStyle);
+		paintMask(slots, mask, slots.state.fillStyle);
 	}
 
 	stroke(path?: Path2D): void {
@@ -2359,23 +2338,23 @@ export class CanvasRenderingContext2D {
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
 			strokePolygons(
-				slots[kSubpathsFor](path),
-				slots[kStrokeStyle](),
-				slots[kScale](),
+				subpathsFor(slots, path),
+				getStrokeStyle(slots),
+				getTransformScale(slots),
 			),
 			bitmap.width,
 			bitmap.height,
 			"nonzero",
 		);
-		slots[kPaint](mask, slots.state.strokeStyle);
+		paintMask(slots, mask, slots.state.strokeStyle);
 	}
 
 	clip(pathOrRule?: Path2D | FillRule, rule?: FillRule): void {
 		const slots = _(this);
-		const args = slots[kReadPathArgs](pathOrRule, rule);
+		const args = readPathArgs(pathOrRule, rule);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			pathPolygons(slots[kSubpathsFor](args.path)),
+			pathPolygons(subpathsFor(slots, args.path)),
 			bitmap.width,
 			bitmap.height,
 			args.rule,
@@ -2415,7 +2394,7 @@ export class CanvasRenderingContext2D {
 		// The point is in canvas coordinates, unaffected by the transform.
 		let winding = 0;
 		let crossings = 0;
-		for (const points of pathPolygons(_(this)[kSubpathsFor](path))) {
+		for (const points of pathPolygons(subpathsFor(_(this), path))) {
 			const count = points.length / 2;
 			for (let i = 0; i < count; i++) {
 				const ax = points[i * 2];
@@ -2447,9 +2426,9 @@ export class CanvasRenderingContext2D {
 		}
 		const slots = _(this);
 		for (const points of strokePolygons(
-			slots[kSubpathsFor](path),
-			slots[kStrokeStyle](),
-			slots[kScale](),
+			subpathsFor(slots, path),
+			getStrokeStyle(slots),
+			getTransformScale(slots),
 		)) {
 			let inside = false;
 			const count = points.length / 2;
@@ -2476,7 +2455,7 @@ export class CanvasRenderingContext2D {
 			return;
 		}
 		const slots = _(this);
-		slots[kPaint](slots[kRectMask](x, y, w, h), slots.state.fillStyle);
+		paintMask(slots, getRectMask(slots, x, y, w, h), slots.state.fillStyle);
 	}
 
 	strokeRect(x: number, y: number, w: number, h: number): void {
@@ -2489,12 +2468,16 @@ export class CanvasRenderingContext2D {
 		builder.rect(x, y, w, h);
 		const bitmap = slots.host.bitmap();
 		const mask = rasterize(
-			strokePolygons(builder.subpaths, slots[kStrokeStyle](), slots[kScale]()),
+			strokePolygons(
+				builder.subpaths,
+				getStrokeStyle(slots),
+				getTransformScale(slots),
+			),
 			bitmap.width,
 			bitmap.height,
 			"nonzero",
 		);
-		slots[kPaint](mask, slots.state.strokeStyle);
+		paintMask(slots, mask, slots.state.strokeStyle);
 	}
 
 	clearRect(x: number, y: number, w: number, h: number): void {
@@ -2502,7 +2485,7 @@ export class CanvasRenderingContext2D {
 			return;
 		}
 		const slots = _(this);
-		const mask = slots[kRectMask](x, y, w, h);
+		const mask = getRectMask(slots, x, y, w, h);
 		const clip = slots.state.clip;
 		const data = slots.host.bitmap().data;
 		for (let i = 0; i < mask.length; i++) {
@@ -2517,7 +2500,7 @@ export class CanvasRenderingContext2D {
 				data[at] = data[at + 1] = data[at + 2] = 0;
 			}
 		}
-		slots[kDropText](mask, 0.5);
+		dropText(slots, mask, 0.5);
 		slots.host.changed();
 	}
 
@@ -2655,7 +2638,7 @@ export class CanvasRenderingContext2D {
 		};
 		// Large downscales average the source area a pixel covers, so a
 		// photo drawn small does not alias.
-		const scale = slots[kScale]();
+		const scale = getTransformScale(slots);
 		const shrinkX = Math.abs(sw / (dw * scale));
 		const shrinkY = Math.abs(sh / (dh * scale));
 		const average = smooth && (shrinkX > 2 || shrinkY > 2);
@@ -2710,7 +2693,7 @@ export class CanvasRenderingContext2D {
 			}
 		}
 		if (operation === "source-over" || operation === "copy") {
-			slots[kDropText](mask, 0.5);
+			dropText(slots, mask, 0.5);
 		}
 		slots.host.changed();
 	}
@@ -2802,12 +2785,12 @@ export class CanvasRenderingContext2D {
 
 	fillText(text: string, x: number, y: number, _maxWidth?: number): void {
 		const slots = _(this);
-		slots[kDrawText](String(text), x, y, slots.state.fillStyle);
+		drawContextText(slots, String(text), x, y, slots.state.fillStyle);
 	}
 
 	strokeText(text: string, x: number, y: number, _maxWidth?: number): void {
 		const slots = _(this);
-		slots[kDrawText](String(text), x, y, slots.state.strokeStyle);
+		drawContextText(slots, String(text), x, y, slots.state.strokeStyle);
 	}
 
 	/** Widths in canvas pixels: a cell's width in pixels for each column. */
@@ -2838,289 +2821,277 @@ export class CanvasRenderingContext2D {
 	}
 
 	drawFocusIfNeeded(): void {}
+}
 
-	[kSetMatrix](this: Slots<CanvasRenderingContext2D>, m: Matrix): void {
-		if (!isFiniteAll(...m)) {
-			return;
-		}
-		const slots = this;
-		slots.state.transform = m;
-		slots.path.transform = m;
+function setMatrix(slots: Slots<CanvasRenderingContext2D>, m: Matrix): void {
+	if (!isFiniteAll(...m)) {
+		return;
 	}
+	slots.state.transform = m;
+	slots.path.transform = m;
+}
 
-	// A Path2D's points are in user space and go through the transform
-	// when it is used; the current path's went through as they were added.
-	[kSubpathsFor](
-		this: Slots<CanvasRenderingContext2D>,
-		path?: Path2D,
-	): Subpath[] {
-		const slots = this;
-		if (path === undefined) {
-			return slots.path.subpaths;
-		}
-		const builder = new PathBuilder();
-		builder.append(_(path)[kSubpaths], slots.state.transform);
-		return builder.subpaths;
+// A Path2D's points are in user space and go through the transform
+// when it is used; the current path's went through as they were added.
+function subpathsFor(
+	slots: Slots<CanvasRenderingContext2D>,
+	path?: Path2D,
+): Subpath[] {
+	if (path === undefined) {
+		return slots.path.subpaths;
 	}
+	const builder = new PathBuilder();
+	builder.append(_(path).builder.subpaths, slots.state.transform);
+	return builder.subpaths;
+}
 
-	[kReadPathArgs](
-		pathOrRule?: Path2D | FillRule,
-		maybeRule?: FillRule,
-	): {path: Path2D | undefined; rule: FillRule} {
-		if (pathOrRule instanceof Path2D) {
-			return {
-				path: pathOrRule,
-				rule: maybeRule === "evenodd" ? "evenodd" : "nonzero",
-			};
-		}
+function readPathArgs(
+	pathOrRule?: Path2D | FillRule,
+	maybeRule?: FillRule,
+): {path: Path2D | undefined; rule: FillRule} {
+	if (pathOrRule instanceof Path2D) {
 		return {
-			path: undefined,
-			rule: pathOrRule === "evenodd" ? "evenodd" : "nonzero",
+			path: pathOrRule,
+			rule: maybeRule === "evenodd" ? "evenodd" : "nonzero",
 		};
 	}
+	return {
+		path: undefined,
+		rule: pathOrRule === "evenodd" ? "evenodd" : "nonzero",
+	};
+}
 
-	[kStrokeStyle](this: Slots<CanvasRenderingContext2D>): StrokeStyle {
-		const slots = this;
-		const scale = slots[kScale]();
-		return {
-			width: slots.state.lineWidth,
-			cap: slots.state.lineCap,
-			join: slots.state.lineJoin,
-			miterLimit: slots.state.miterLimit,
-			dash: slots.state.lineDash.map((value) => value * scale),
-			dashOffset: slots.state.lineDashOffset * scale,
-		};
-	}
+function getStrokeStyle(slots: Slots<CanvasRenderingContext2D>): StrokeStyle {
+	const scale = getTransformScale(slots);
+	return {
+		width: slots.state.lineWidth,
+		cap: slots.state.lineCap,
+		join: slots.state.lineJoin,
+		miterLimit: slots.state.miterLimit,
+		dash: slots.state.lineDash.map((value) => value * scale),
+		dashOffset: slots.state.lineDashOffset * scale,
+	};
+}
 
-	// How much the transform scales lengths, for line widths and dashes.
-	[kScale](this: Slots<CanvasRenderingContext2D>): number {
-		const m = this.state.transform;
-		return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
-	}
+// How much the transform scales lengths, for line widths and dashes.
+function getTransformScale(slots: Slots<CanvasRenderingContext2D>): number {
+	const m = slots.state.transform;
+	return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2]));
+}
 
-	[kRectMask](
-		this: Slots<CanvasRenderingContext2D>,
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-	): Float32Array {
-		const builder = new PathBuilder();
-		const slots = this;
-		builder.transform = slots.state.transform;
-		builder.rect(x, y, w, h);
-		const bitmap = slots.host.bitmap();
-		return rasterize(
-			pathPolygons(builder.subpaths),
-			bitmap.width,
-			bitmap.height,
-			"nonzero",
-		);
-	}
+function getRectMask(
+	slots: Slots<CanvasRenderingContext2D>,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): Float32Array {
+	const builder = new PathBuilder();
+	builder.transform = slots.state.transform;
+	builder.rect(x, y, w, h);
+	const bitmap = slots.host.bitmap();
+	return rasterize(
+		pathPolygons(builder.subpaths),
+		bitmap.width,
+		bitmap.height,
+		"nonzero",
+	);
+}
 
-	[kPaint](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		paint: Paint,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		const {width, height, data} = bitmap;
-		const operation = slots.state.globalCompositeOperation;
-		const unbounded = UNBOUNDED.has(operation);
-		const alpha = slots.state.globalAlpha;
-		const clip = slots.state.clip;
-		const solid = typeof paint === "string" ? parseCanvasColor(paint) : null;
-		const inverse = typeof paint === "string"
-			? null
-			: invert(slots.state.transform);
-		for (let y = 0; y < height; y++) {
-			for (let x = 0; x < width; x++) {
-				const i = y * width + x;
-				const clipCover = clip === null ? 1 : clip[i];
-				if (clipCover <= 0) {
-					continue;
-				}
-				const cover = mask[i];
-				if (cover <= 0 && !unbounded) {
-					continue;
-				}
-				let color: RGBA | null = solid;
-				if (color === null && cover > 0 && inverse !== null) {
-					const [ux, uy] = apply(inverse, x + 0.5, y + 0.5);
-					color = _((paint as CanvasGradient | CanvasPattern))[kColorAt](
-						ux,
-						uy,
-					);
-				}
-				const sa = color === null ? 0 : color.a * alpha * cover;
-				if (clipCover < 1) {
-					// Blend the result back toward the old pixel where the clip
-					// only partly covers it.
-					const before = [
-						data[i * 4],
-						data[i * 4 + 1],
-						data[i * 4 + 2],
-						data[i * 4 + 3],
-					];
-					composite(
-						data,
-						i * 4,
-						color?.r ?? 0,
-						color?.g ?? 0,
-						color?.b ?? 0,
-						sa,
-						operation,
-					);
-					for (let c = 0; c < 4; c++) {
-						data[i * 4 + c] =
-							before[c] + (data[i * 4 + c] - before[c]) * clipCover;
-					}
-				} else {
-					composite(
-						data,
-						i * 4,
-						color?.r ?? 0,
-						color?.g ?? 0,
-						color?.b ?? 0,
-						sa,
-						operation,
-					);
-				}
+function paintMask(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	paint: Paint,
+): void {
+	const bitmap = slots.host.bitmap();
+	const {width, height, data} = bitmap;
+	const operation = slots.state.globalCompositeOperation;
+	const unbounded = UNBOUNDED.has(operation);
+	const alpha = slots.state.globalAlpha;
+	const clip = slots.state.clip;
+	const solid = typeof paint === "string" ? parseCanvasColor(paint) : null;
+	const inverse = typeof paint === "string"
+		? null
+		: invert(slots.state.transform);
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const i = y * width + x;
+			const clipCover = clip === null ? 1 : clip[i];
+			if (clipCover <= 0) {
+				continue;
 			}
-		}
-		if (operation === "source-over") {
-			slots[kCoverText](
-				mask,
-				(x, y) =>
-					solid ??
-				(inverse === null
-					? null
-					: _((paint as CanvasGradient | CanvasPattern))[kColorAt](
-						...apply(inverse, x + 0.5, y + 0.5),
-					)),
-				alpha,
-			);
-		} else if (operation === "copy") {
-			slots[kDropText](mask, 0.5);
-		}
-		slots.host.changed();
-	}
-
-	// Translucent paint over text blends the text toward the paint, as it
-	// would blend the text's pixels in a browser, so drawing a dim fill
-	// every frame fades text out over several frames.
-	[kCoverText](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		colorAt: (x: number, y: number) => RGBA | null,
-		alpha: number,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		if (bitmap.width === 0 || bitmap.height === 0) {
-			return;
-		}
-		slots.text = slots.text.filter((run) => {
-			const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
-			const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
-			const cover = mask[y * bitmap.width + x];
-			if (cover <= 0) {
-				return true;
+			const cover = mask[i];
+			if (cover <= 0 && !unbounded) {
+				continue;
 			}
-			const paint = colorAt(x, y);
-			const amount = paint === null ? 0 : paint.a * alpha * cover;
-			run.covered = 1 - (1 - run.covered) * (1 - amount);
-			if (run.covered >= 0.5) {
-				return false;
+			let color: RGBA | null = solid;
+			if (color === null && cover > 0 && inverse !== null) {
+				const [ux, uy] = apply(inverse, x + 0.5, y + 0.5);
+				color = getPaintColor(paint as CanvasGradient | CanvasPattern, ux, uy);
 			}
-			if (paint !== null) {
-				run.color = {
-					r: run.color.r + (paint.r - run.color.r) * amount,
-					g: run.color.g + (paint.g - run.color.g) * amount,
-					b: run.color.b + (paint.b - run.color.b) * amount,
-					a: run.color.a,
-				};
+			const sa = color === null ? 0 : color.a * alpha * cover;
+			if (clipCover < 1) {
+				// Blend the result back toward the old pixel where the clip
+				// only partly covers it.
+				const before = [
+					data[i * 4],
+					data[i * 4 + 1],
+					data[i * 4 + 2],
+					data[i * 4 + 3],
+				];
+				composite(
+					data,
+					i * 4,
+					color?.r ?? 0,
+					color?.g ?? 0,
+					color?.b ?? 0,
+					sa,
+					operation,
+				);
+				for (let c = 0; c < 4; c++) {
+					data[i * 4 + c] =
+						before[c] + (data[i * 4 + c] - before[c]) * clipCover;
+				}
+			} else {
+				composite(
+					data,
+					i * 4,
+					color?.r ?? 0,
+					color?.g ?? 0,
+					color?.b ?? 0,
+					sa,
+					operation,
+				);
 			}
-			return true;
-		});
-	}
-
-	// Text under the shape painted last is covered, as it would be
-	// in pixels.
-	[kDropText](
-		this: Slots<CanvasRenderingContext2D>,
-		mask: Float32Array,
-		threshold: number,
-	): void {
-		const slots = this;
-		const bitmap = slots.host.bitmap();
-		if (bitmap.width === 0 || bitmap.height === 0) {
-			return;
 		}
-		// An anchor on or past an edge (right-aligned text at the canvas's
-		// width, say) is read at the nearest pixel inside, so clearing the
-		// canvas clears it too.
-		slots.text = slots.text.filter((run) => {
-			const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
-			const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
-			return mask[y * bitmap.width + x] < threshold;
-		});
 	}
+	if (operation === "source-over") {
+		coverText(
+			slots,
+			mask,
+			(x, y) =>
+				solid ??
+			(inverse === null
+				? null
+				: getPaintColor(
+					paint as CanvasGradient | CanvasPattern,
+					...apply(inverse, x + 0.5, y + 0.5),
+				)),
+			alpha,
+		);
+	} else if (operation === "copy") {
+		dropText(slots, mask, 0.5);
+	}
+	slots.host.changed();
+}
 
-	[kDrawText](
-		this: Slots<CanvasRenderingContext2D>,
-		text: string,
-		x: number,
-		y: number,
-		paint: Paint,
-	): void {
-		if (!isFiniteAll(x, y)) {
-			return;
+// Translucent paint over text blends the text toward the paint, as it
+// would blend the text's pixels in a browser, so drawing a dim fill
+// every frame fades text out over several frames.
+function coverText(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	colorAt: (x: number, y: number) => RGBA | null,
+	alpha: number,
+): void {
+	const bitmap = slots.host.bitmap();
+	if (bitmap.width === 0 || bitmap.height === 0) {
+		return;
+	}
+	slots.text = slots.text.filter((run) => {
+		const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
+		const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
+		const cover = mask[y * bitmap.width + x];
+		if (cover <= 0) {
+			return true;
 		}
-		const slots = this;
-		const [px, py] = apply(slots.state.transform, x, y);
-		const color = typeof paint === "string"
-			? parseCanvasColor(paint)
-			: _((paint as CanvasGradient | CanvasPattern))[kColorAt](x, y);
-		if (color === null || color.a * slots.state.globalAlpha === 0) {
-			return;
+		const paint = colorAt(x, y);
+		const amount = paint === null ? 0 : paint.a * alpha * cover;
+		run.covered = 1 - (1 - run.covered) * (1 - amount);
+		if (run.covered >= 0.5) {
+			return false;
 		}
-		// "inherit" takes the canvas's direction as the text is drawn.
-		const direction = slots.state.direction === "inherit"
-			? slots.host.direction()
-			: slots.state.direction;
-		const rtl = direction === "rtl";
-		const align = slots.state.textAlign;
-		const resolved = align === "center"
-			? "center"
-			: align === "right" ||
-				(align === "end" && !rtl) ||
-				(align === "start" && rtl)
-				? "right"
-				: "left";
-		const words = slots.state.font.toLowerCase().split(/\s+/);
-		const run: CanvasTextRun = {
-			text: toVisualOrder(
-				text.replace(/[\t\n\f\r]/g, " "),
-				rtl ? "rtl" : "ltr",
-			),
-			x: px,
-			y: py,
-			align: resolved,
-			baseline: slots.state.textBaseline,
-			color: {...color, a: color.a * slots.state.globalAlpha},
-			covered: 0,
-			bold: words.some(
-				(word) => word === "bold" ||
-					word === "bolder" ||
-				(/^\d+$/.test(word) && Number(word) >= 600),
-			),
-			italic: words.includes("italic") || words.includes("oblique"),
-		};
-		slots.text.push(run);
-		slots.host.changed();
+		if (paint !== null) {
+			run.color = {
+				r: run.color.r + (paint.r - run.color.r) * amount,
+				g: run.color.g + (paint.g - run.color.g) * amount,
+				b: run.color.b + (paint.b - run.color.b) * amount,
+				a: run.color.a,
+			};
+		}
+		return true;
+	});
+}
+
+// Text under the shape painted last is covered, as it would be
+// in pixels.
+function dropText(
+	slots: Slots<CanvasRenderingContext2D>,
+	mask: Float32Array,
+	threshold: number,
+): void {
+	const bitmap = slots.host.bitmap();
+	if (bitmap.width === 0 || bitmap.height === 0) {
+		return;
+	}
+	// An anchor on or past an edge (right-aligned text at the canvas's
+	// width, say) is read at the nearest pixel inside, so clearing the
+	// canvas clears it too.
+	slots.text = slots.text.filter((run) => {
+		const x = Math.min(bitmap.width - 1, Math.max(0, Math.floor(run.x)));
+		const y = Math.min(bitmap.height - 1, Math.max(0, Math.floor(run.y)));
+		return mask[y * bitmap.width + x] < threshold;
+	});
+}
+
+function drawContextText(
+	slots: Slots<CanvasRenderingContext2D>,
+	text: string,
+	x: number,
+	y: number,
+	paint: Paint,
+): void {
+	if (!isFiniteAll(x, y)) {
+		return;
+	}
+	const [px, py] = apply(slots.state.transform, x, y);
+	const color = typeof paint === "string"
+		? parseCanvasColor(paint)
+		: getPaintColor(paint as CanvasGradient | CanvasPattern, x, y);
+	if (color === null || color.a * slots.state.globalAlpha === 0) {
+		return;
 	}
+	// "inherit" takes the canvas's direction as the text is drawn.
+	const direction = slots.state.direction === "inherit"
+		? slots.host.direction()
+		: slots.state.direction;
+	const rtl = direction === "rtl";
+	const align = slots.state.textAlign;
+	const resolved = align === "center"
+		? "center"
+		: align === "right" ||
+			(align === "end" && !rtl) ||
+			(align === "start" && rtl)
+			? "right"
+			: "left";
+	const words = slots.state.font.toLowerCase().split(/\s+/);
+	const run: CanvasTextRun = {
+		text: toVisualOrder(text.replace(/[\t\n\f\r]/g, " "), rtl ? "rtl" : "ltr"),
+		x: px,
+		y: py,
+		align: resolved,
+		baseline: slots.state.textBaseline,
+		color: {...color, a: color.a * slots.state.globalAlpha},
+		covered: 0,
+		bold: words.some(
+			(word) => word === "bold" ||
+				word === "bolder" ||
+			(/^\d+$/.test(word) && Number(word) >= 600),
+		),
+		italic: words.includes("italic") || words.includes("oblique"),
+	};
+	slots.text.push(run);
+	slots.host.changed();
 }
 
 declareSealedRoot(CanvasRenderingContext2D);
@@ -3177,10 +3148,6 @@ interface GridHost {
 	drawsPixels(): boolean;
 }
 
-const kResolveDirection = Symbol("resolveDirection");
-const kTextColor = Symbol("textColor");
-const kRect = Symbol("rect");
-
 type GridTextAlign = "start" | "end" | "left" | "right" | "center";
 type GridDirection = "ltr" | "rtl" | "inherit";
 type GridLineStyle = LineStyle["style"] | "none";
@@ -3220,9 +3187,6 @@ export interface CanvasCellGridContextSlots {
 	gridHost: GridHost;
 	gridState: GridState;
 	gridStack: GridState[];
-	[kResolveDirection]: Step<CanvasCellGridContext[typeof kResolveDirection]>;
-	[kTextColor]: Step<CanvasCellGridContext[typeof kTextColor]>;
-	[kRect]: Step<CanvasCellGridContext[typeof kRect]>;
 }
 
 export interface CanvasCellGridContext {
@@ -3412,7 +3376,7 @@ export class CanvasCellGridContext {
 
 	fillRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
+		const rect = getGridRect(x, y, w, h);
 		const fill = toGridFill(slots.gridState.fillStyle);
 		if (rect === null || fill === undefined) {
 			return;
@@ -3424,7 +3388,7 @@ export class CanvasCellGridContext {
 
 	clearRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
+		const rect = getGridRect(x, y, w, h);
 		if (rect === null) {
 			return;
 		}
@@ -3442,12 +3406,12 @@ export class CanvasCellGridContext {
 			return;
 		}
 		const slots = _(this);
-		const color = slots[kTextColor](slots.gridState.fillStyle);
+		const color = getGridTextColor(slots.gridState.fillStyle);
 		if (color === undefined || (maxWidth !== undefined && !(maxWidth > 0))) {
 			return;
 		}
 		const cells = slots.gridHost.cells();
-		const rtl = slots[kResolveDirection]() === "rtl";
+		const rtl = resolveGridDirection(slots) === "rtl";
 		const clusters = [
 			...graphemeSegmenter.segment(
 				toVisualOrder(
@@ -3529,7 +3493,7 @@ export class CanvasCellGridContext {
 			return;
 		}
 		const slots = _(this);
-		const color = slots[kTextColor](slots.gridState.strokeStyle);
+		const color = getGridTextColor(slots.gridState.strokeStyle);
 		const style = slots.gridState.lineStyle;
 		if (color === undefined || style === "none" || style === "hidden") {
 			return;
@@ -3554,8 +3518,8 @@ export class CanvasCellGridContext {
 	/** A box on the cells `w` by `h` from (x, y), in strokeStyle and lineStyle. */
 	strokeRect(x: number, y: number, w: number, h: number): void {
 		const slots = _(this);
-		const rect = slots[kRect](x, y, w, h);
-		const color = slots[kTextColor](slots.gridState.strokeStyle);
+		const rect = getGridRect(x, y, w, h);
+		const color = getGridTextColor(slots.gridState.strokeStyle);
 		const style = slots.gridState.lineStyle;
 		if (
 			rect === null ||
@@ -3585,7 +3549,7 @@ export class CanvasCellGridContext {
 	measureText(text: string): {width: number} {
 		const slots = _(this);
 		return slots.gridHost.cells()
-			.measureText(toVisualOrder(String(text), slots[kResolveDirection]()));
+			.measureText(toVisualOrder(String(text), resolveGridDirection(slots)));
 	}
 
 	/**
@@ -3740,47 +3704,48 @@ export class CanvasCellGridContext {
 		slots.gridStack = [];
 		slots.gridHost.changed();
 	}
+}
 
-	[kResolveDirection](this: Slots<CanvasCellGridContext>): "ltr" | "rtl" {
-		const slots = this;
-		const {direction} = slots.gridState;
-		return direction === "inherit" ? slots.gridHost.direction() : direction;
-	}
+function resolveGridDirection(
+	slots: Slots<CanvasCellGridContext>,
+): "ltr" | "rtl" {
+	const {direction} = slots.gridState;
+	return direction === "inherit" ? slots.gridHost.direction() : direction;
+}
 
-	// A kept color as a glyph's color: a cell color, null for the
-	// terminal's own text color, or undefined for one too transparent to
-	// show, as a 2d context's text under half opaque does not.
-	[kTextColor](value: string): number | null | undefined {
-		const system = getSystemColor(value);
-		if (system !== null) {
-			return system.cell === 0 ? null : system.cell;
-		}
-		const color = parseCanvasColor(value)!;
-		if (color.a < 0.5) {
-			return undefined;
-		}
-		return toCellColor((color.r << 16) | (color.g << 8) | color.b);
+// A kept color as a glyph's color: a cell color, null for the
+// terminal's own text color, or undefined for one too transparent to
+// show, as a 2d context's text under half opaque does not.
+function getGridTextColor(value: string): number | null | undefined {
+	const system = getSystemColor(value);
+	if (system !== null) {
+		return system.cell === 0 ? null : system.cell;
+	}
+	const color = parseCanvasColor(value)!;
+	if (color.a < 0.5) {
+		return undefined;
 	}
+	return toCellColor((color.r << 16) | (color.g << 8) | color.b);
+}
 
-	[kRect](
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-	): [number, number, number, number] | null {
-		if (!isFiniteAll(x, y, w, h)) {
-			return null;
-		}
-		if (w < 0) {
-			x += w;
-			w = -w;
-		}
-		if (h < 0) {
-			y += h;
-			h = -h;
-		}
-		return [Math.round(x), Math.round(y), Math.round(x + w), Math.round(y + h)];
+function getGridRect(
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): [number, number, number, number] | null {
+	if (!isFiniteAll(x, y, w, h)) {
+		return null;
+	}
+	if (w < 0) {
+		x += w;
+		w = -w;
+	}
+	if (h < 0) {
+		y += h;
+		h = -h;
 	}
+	return [Math.round(x), Math.round(y), Math.round(x + w), Math.round(y + h)];
 }
 
 declareSealedRoot(CanvasCellGridContext);

From 5de8c09fb774dbfb67f24d949d367ea4da5a2e25 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 17:52:20 -0400
Subject: [PATCH 15/99] Name internal steps with a leading underscore instead
 of a symbol, and drop fallbacks no runtime takes

A class's internal steps were symbol-keyed methods that slots.ts moved
off the public prototype onto the record. They are now methods whose
names start with "_", which no Web IDL member's does, and slots.ts moves
those instead, so a step reads slots._insertionSteps() rather than
slots[kInsertionSteps](). Overrides and super calls work as before. A
test holds that no interface a page can reach shows such a member, and
that no member the specs name starts with one.

Node 20.19, Bun and Deno all have DOMException, FormData,
AbortController and AbortSignal, so the stand-ins for a runtime without
them, the sealed DOMException and a FormData of our own among them, and
the checks for their absence are gone. FormData extends the runtime's
directly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/canvas.ts |    6 +-
 src/internal/cssom.ts  |  195 ++++----
 src/internal/dom.ts    | 1002 +++++++++++++---------------------------
 src/internal/slots.ts  |   43 +-
 tests/membrane.test.ts |   33 +-
 tests/webidl.test.ts   |   30 ++
 6 files changed, 468 insertions(+), 841 deletions(-)

diff --git a/src/internal/canvas.ts b/src/internal/canvas.ts
index df48df81..f14c7c01 100644
--- a/src/internal/canvas.ts
+++ b/src/internal/canvas.ts
@@ -280,12 +280,8 @@ function copyRect(
 	}
 }
 
-// The platform's DOMException where there is one, which every runtime
-// this engine supports has.
 function domException(name: string, message: string): Error {
-	const Constructor = (globalThis as {DOMException?: typeof DOMException})
-		.DOMException;
-	return Constructor ? new Constructor(message, name) : new Error(message);
+	return new DOMException(message, name);
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 6d7ccdd6..b73e2256 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -580,10 +580,6 @@ function createCSSNamespace(document: Document): typeof CSSNamespace {
 
 const inlineStyles = new WeakMap<Element, CSSStyleDeclaration>();
 
-const kComputedValue = Symbol("computedValue");
-const kCustomProperties = Symbol("customProperties");
-const kSync = Symbol("sync");
-
 // Declarations are stored as longhands. A shorthand write expands and a
 // shorthand read reconstructs. An element-owned block and the `style`
 // attribute are one store seen from two sides: a property write
@@ -612,7 +608,7 @@ interface CSSStyleDeclarationSlots {
 	block: CSSValues.DeclarationBlock | null;
 	// How many numeric index properties currently name a declaration.
 	indexed: number;
-	[kSync]: Step<CSSStyleDeclaration[typeof kSync]>;
+	_sync: Step<CSSStyleDeclaration["_sync"]>;
 }
 
 interface CSSStyleDeclaration {
@@ -658,7 +654,7 @@ class CSSStyleDeclaration {
 			syncViewIndices(this);
 			return slots.viewOf.length;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations.length;
 	}
 
@@ -667,7 +663,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.cssText;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return serializeDeclarations(this);
 	}
 
@@ -677,7 +673,7 @@ class CSSStyleDeclaration {
 			slots.viewOf.cssText = text;
 			return;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		slots.declarations = [];
 		slots.byName.clear();
 		for (const declaration of CSSValues.parseDeclarationText(text ?? "")) {
@@ -700,7 +696,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.item(index);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations[index]?.name ?? "";
 	}
 
@@ -710,7 +706,7 @@ class CSSStyleDeclaration {
 			syncViewIndices(this);
 			return slots.viewOf[Symbol.iterator]();
 		}
-		slots[kSync]!();
+		slots._sync!();
 		return slots.declarations.map((entry) => entry.name)[Symbol.iterator]();
 	}
 
@@ -719,7 +715,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.getPropertyValue(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const declared = findDeclaration(this, name);
 		if (declared) {
@@ -734,7 +730,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.getPropertyPriority(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const declared = findDeclaration(this, name);
 		if (declared) {
@@ -756,7 +752,7 @@ class CSSStyleDeclaration {
 			slots.viewOf.setProperty(property, value, priority);
 			return;
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		if (!isSupportedDeclaration(this, name)) {
 			return;
@@ -787,7 +783,7 @@ class CSSStyleDeclaration {
 		if (slots.viewOf !== undefined) {
 			return slots.viewOf.removeProperty(property);
 		}
-		slots[kSync]!();
+		slots._sync!();
 		const name = CSSValues.normalizePropertyName(property);
 		const previous = this.getPropertyValue(name);
 		let changed = removeDeclaration(this, name);
@@ -804,7 +800,7 @@ class CSSStyleDeclaration {
 	 * Reparse the `style` attribute if it changed since this object last wrote
 	 * it.
 	 */
-	[kSync]?(this: Slots<CSSStyleDeclaration>): void {
+	_sync?(this: Slots<CSSStyleDeclaration>): void {
 		const slots = this;
 		if (!slots.element) {
 			return;
@@ -841,7 +837,7 @@ function getDeclarationBlock(
 	style: CSSStyleDeclaration,
 ): CSSValues.DeclarationBlock {
 	const styleSlots = _(style);
-	styleSlots[kSync]!();
+	styleSlots._sync!();
 	if (styleSlots.declarations.length === 0) {
 		return EMPTY_DECLARATIONS;
 	}
@@ -2824,7 +2820,7 @@ interface CSSStyleSheetSlots {
 	title: string | null;
 	// The owner node's text CSSStyleSheet sheet last parsed.
 	text: string | null;
-	[kSync]: Step<CSSStyleSheet[typeof kSync]>;
+	_sync: Step<CSSStyleSheet["_sync"]>;
 }
 
 interface CSSStyleSheet {
@@ -2862,7 +2858,7 @@ class CSSStyleSheet {
 
 	get cssRules(): CSSRuleList {
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		return slots.ruleList;
 	}
 
@@ -2923,7 +2919,7 @@ class CSSStyleSheet {
 			throw typeError("insertRule requires a rule", this);
 		}
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		if (index > slots.rules.length) {
 			throw domException(
 				`Cannot insert at index ${index}`,
@@ -2953,7 +2949,7 @@ class CSSStyleSheet {
 			throw typeError("deleteRule requires an index", this);
 		}
 		const slots = _(this);
-		slots[kSync]!();
+		slots._sync!();
 		if (index >= slots.rules.length) {
 			throw domException(
 				`Cannot delete at index ${index}`,
@@ -2990,7 +2986,7 @@ class CSSStyleSheet {
 	}
 
 	removeRule(index = 0): void {
-		_(this)[kSync]!();
+		_(this)._sync!();
 		if (index >= this.cssRules.length) {
 			throw domException(
 				`Cannot delete at index ${index}`,
@@ -3032,7 +3028,7 @@ class CSSStyleSheet {
 	}
 
 	// Reparse the owner element's text if it changed.
-	[kSync]?(this: Slots<CSSStyleSheet>): void {
+	_sync?(this: Slots<CSSStyleSheet>): void {
 		const slots = this;
 		const node = slots.ownerNode;
 		if (!node || node.tagName !== "STYLE") {
@@ -3888,7 +3884,7 @@ function getUAStyleSheet(): CSSStyleSheet {
 interface MeasuredSlots {
 	element: Element;
 	cascade: Cascade | null;
-	[kComputedValue](property: string): string;
+	_computedValue(property: string): string;
 }
 
 interface MeasuredDeclaration {
@@ -3933,10 +3929,10 @@ export function getComputedValue(
 		return "";
 	}
 	return pseudoElement
-		? _(getPseudoDeclaration(cascade, element, pseudoElement))[kComputedValue](
+		? _(getPseudoDeclaration(cascade, element, pseudoElement))._computedValue(
 			property,
 		)
-		: cascade.computedSlotsFor(element)[kComputedValue](property);
+		: cascade.computedSlotsFor(element)._computedValue(property);
 }
 
 // A box with nothing to contain or transform: no box at all, or a plain
@@ -4086,10 +4082,6 @@ function defineLonghandIndices(prototype: object): void {
 	}
 }
 
-const kSyncResolved = Symbol("syncResolved");
-const kUsedValue = Symbol("usedValue");
-const kBaseValue = Symbol("baseValue");
-
 // Writing a computed style is an error, not a no-op. It throws the
 // document's own DOMException, since one from another global is not
 // what an author catches.
@@ -4323,11 +4315,11 @@ interface ComputedStyleDeclarationSlots extends CSSStyleDeclarationSlots {
 	// for the paint style to be derived again.
 	styleVersion: object;
 	custom: string[] | null;
-	[kCustomProperties]: Step<ComputedStyleDeclaration[typeof kCustomProperties]>;
-	[kUsedValue]: Step<ComputedStyleDeclaration[typeof kUsedValue]>;
-	[kBaseValue]: Step<ComputedStyleDeclaration[typeof kBaseValue]>;
-	[kSyncResolved]: Step<ComputedStyleDeclaration[typeof kSyncResolved]>;
-	[kComputedValue]: Step<ComputedStyleDeclaration[typeof kComputedValue]>;
+	_customProperties: Step<ComputedStyleDeclaration["_customProperties"]>;
+	_usedValue: Step<ComputedStyleDeclaration["_usedValue"]>;
+	_baseValue: Step<ComputedStyleDeclaration["_baseValue"]>;
+	_syncResolved: Step<ComputedStyleDeclaration["_syncResolved"]>;
+	_computedValue: Step<ComputedStyleDeclaration["_computedValue"]>;
 }
 
 interface ComputedStyleDeclaration {
@@ -4384,16 +4376,16 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		}
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(slots)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
 		// A flow-relative longhand resolves as the physical longhand it maps
 		// to: same slot, same measurement, same result.
 		property = toPhysicalProperty(this, property);
 		if (slots.cascade && USED_VALUE_PROPERTIES.has(property)) {
-			return slots[kUsedValue](property);
+			return slots._usedValue(property);
 		}
 		if (slots.cascade && MIN_SIZE_PROPERTIES.has(property)) {
-			return getResolvedMinSize(this, slots[kComputedValue](property));
+			return getResolvedMinSize(this, slots._computedValue(property));
 		}
 		if (slots.cascade && USED_TRACK_PROPERTIES.has(property)) {
 			const tracks = usedGridTracks(
@@ -4413,9 +4405,9 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 				this.getPropertyValue(longhand),
 			);
 		}
-		let computed = slots[kComputedValue](property);
+		let computed = slots._computedValue(property);
 		if (AUTO_COLOR_PROPERTIES.has(property) && computed === "auto") {
-			computed = slots[kComputedValue]("color");
+			computed = slots._computedValue("color");
 		}
 		// A system color computes as its keyword, and reads back as the color
 		// it stands for here.
@@ -4454,7 +4446,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		return [...CSS_LONGHANDS, ...getCustomNames(this)][Symbol.iterator]();
 	}
 
-	[kCustomProperties](this: Slots<ComputedStyleDeclaration>): string[] {
+	_customProperties(this: Slots<ComputedStyleDeclaration>): string[] {
 		const names: string[] = [];
 		for (const rule of this.cssRules) {
 			for (const name of Object.keys(rule.declarations)) {
@@ -4476,10 +4468,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 	// Measured through the same flush a geometry read takes, and memoized
 	// behind it, so a property-heavy caller measures once per layout. The
 	// memo belongs to the cascade, which lets a flush drop every one.
-	[kUsedValue](
-		this: Slots<ComputedStyleDeclaration>,
-		property: string,
-	): string {
+	_usedValue(this: Slots<ComputedStyleDeclaration>, property: string): string {
 		const slots = this;
 		const cascade = slots.cascade!;
 		const used = getUsedValues(cascade, ownerOf(this));
@@ -4488,7 +4477,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 			return memoized;
 		}
 
-		const computed = slots[kComputedValue](property);
+		const computed = slots._computedValue(property);
 		const value = measureUsedValue(ownerOf(this), property, computed);
 		used.set(property, value);
 		return value;
@@ -4497,17 +4486,14 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 	// The cascade's value before a running transition overrides it, meaning
 	// the after-change style. An interpolated value moves every frame and
 	// must never enter the memo.
-	[kBaseValue](
-		this: Slots<ComputedStyleDeclaration>,
-		property: string,
-	): string {
+	_baseValue(this: Slots<ComputedStyleDeclaration>, property: string): string {
 		const slots = this;
 		let value = slots.resolved.get(property);
 		if (value === undefined) {
 			const longhands = CSSValues.getLonghands(property);
 			value = longhands
 				? CSSValues.resolveShorthand(property, longhands, (longhand) =>
-					slots[kBaseValue](longhand),
+					slots._baseValue(longhand),
 				)
 				: getAbsolutizedValue(
 					ownerOf(this),
@@ -4520,7 +4506,7 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 
 	// Reads call this only when the cascade no longer vouches for this
 	// declaration. It runs under every property read of every element.
-	[kSyncResolved](this: Slots<ComputedStyleDeclaration>): void {
+	_syncResolved(this: Slots<ComputedStyleDeclaration>): void {
 		const slots = this;
 		if (!slots.cascade) {
 			return;
@@ -4547,21 +4533,21 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		processTransitionStyle(
 			slots.cascade,
 			slots.element,
-			(property) => slots[kBaseValue](property),
+			(property) => slots._baseValue(property),
 			"",
 		);
 	}
 
-	[kComputedValue](
+	_computedValue(
 		this: Slots<ComputedStyleDeclaration>,
 		property: string,
 	): string {
 		const slots = this;
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(this)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
-		const value = slots[kBaseValue](property);
+		const value = slots._baseValue(property);
 		const cascade = slots.cascade;
 		if (cascade !== null && cascade.activeTransitions.size > 0) {
 			const transitional = getTransitionValue(
@@ -4632,7 +4618,7 @@ function getLengthContext(
 	const font = CSSValues.getFontSize(
 		own
 			? parent ? getComputedValue(parent, "font-size") : ""
-			: declarationSlots[kComputedValue]("font-size"),
+			: declarationSlots._computedValue("font-size"),
 		initial,
 	);
 	const root = getRootFontSize(declaration, own);
@@ -4711,7 +4697,7 @@ function getRootFontSize(
 		!root || (ownFontSize && root === declarationSlots.element)
 			? ""
 			: root === declarationSlots.element
-				? declarationSlots[kComputedValue]("font-size")
+				? declarationSlots._computedValue("font-size")
 				: getComputedValue(root, "font-size"),
 		getCellSize(declarationSlots.element).height,
 	);
@@ -4727,7 +4713,7 @@ function toPhysicalProperty(
 	return (
 		CSSValues.getPhysicalProperty(
 			property,
-			_(declaration)[kComputedValue]("direction"),
+			_(declaration)._computedValue("direction"),
 		) ?? property
 	);
 }
@@ -4742,7 +4728,7 @@ function measureUsedValue(
 	// A border with no style draws nothing and takes no space, whatever
 	// width it declares.
 	if (property.startsWith("border-") && property.endsWith("-width")) {
-		const style = _(declaration)[kComputedValue](
+		const style = _(declaration)._computedValue(
 			`${property.slice(0, -"-width".length)}-style`,
 		);
 		if (!style || style === "none" || style === "hidden") {
@@ -4773,7 +4759,7 @@ function measureUsedValue(
 		const border = vertical ? rect.height : rect.width;
 		// The used value of width is the box box-sizing names, so a
 		// border-box element reads its border box (css-sizing-3 §3.1).
-		if (_(declaration)[kComputedValue]("box-sizing") === "border-box") {
+		if (_(declaration)._computedValue("box-sizing") === "border-box") {
 			return CSSValues.getUsedLength(Math.max(0, border));
 		}
 		const edges =
@@ -4843,7 +4829,7 @@ function getUsedInset(
 
 	const opposite = OPPOSITE_INSET[property];
 	const other = CSSValues.getInsetLength(
-		_(declaration)[kComputedValue](opposite),
+		_(declaration)._computedValue(opposite),
 		basis,
 	);
 	// A relatively positioned box is offset from where it already was, so
@@ -5004,7 +4990,7 @@ function getResolvedMinSize(
 			return "0px";
 		}
 	}
-	if (declarationSlots[kComputedValue]("aspect-ratio") !== "auto") {
+	if (declarationSlots._computedValue("aspect-ratio") !== "auto") {
 		return "auto";
 	}
 	const parent = flatParentElement(declarationSlots.element);
@@ -5266,7 +5252,7 @@ function resolvePropertyValue(
 	if (
 		property === "text-align" &&
 		CSSValues.getLegacyAlignment(value) !== null &&
-		/^(?:inline-)?table$/.test(declarationSlots[kComputedValue]("display"))
+		/^(?:inline-)?table$/.test(declarationSlots._computedValue("display"))
 	) {
 		return "start";
 	}
@@ -5327,7 +5313,7 @@ function resolveCascadedValue(
 		// on.
 		return property === "color"
 			? (resolveFromParent(declaration, "color") ?? "")
-			: _(declaration)[kComputedValue]("color");
+			: _(declaration)._computedValue("color");
 	}
 	return value;
 }
@@ -5348,7 +5334,7 @@ function resolvePropertyValueRaw(
 			name === property ||
 			CSSValues.getPhysicalProperty(
 				name,
-				(direction ??= declarationSlots[kComputedValue]("direction")),
+				(direction ??= declarationSlots._computedValue("direction")),
 			) === property;
 
 	const inline = getInlineDeclarations(declaration);
@@ -5483,7 +5469,7 @@ function getCustomNames(computed: ComputedStyleDeclaration): string[] {
 	const computedSlots = _(computed);
 	const current = computedSlots.cascade?.currentDeclarations;
 	if (current !== undefined && !current.has(computedSlots)) {
-		computedSlots[kSyncResolved]();
+		computedSlots._syncResolved();
 	}
 	if (computedSlots.custom) {
 		return computedSlots.custom;
@@ -5495,7 +5481,7 @@ function getCustomNames(computed: ComputedStyleDeclaration): string[] {
 		element = flatParentElement(element)
 	) {
 		const declaration = computedSlots.cascade?.declarationFor(element);
-		for (const name of _maybe(declaration)?.[kCustomProperties]() ?? []) {
+		for (const name of _maybe(declaration)?._customProperties() ?? []) {
 			names.add(name);
 		}
 	}
@@ -5518,10 +5504,10 @@ interface PseudoStyleDeclarationSlots extends CSSStyleDeclarationSlots {
 	cascade: Cascade | null;
 	nodeResolved: Map<string, string>;
 	boxView: MeasuredDeclaration | null;
-	[kSyncResolved]: Step<PseudoStyleDeclaration[typeof kSyncResolved]>;
-	[kBaseValue]: Step<PseudoStyleDeclaration[typeof kBaseValue]>;
-	[kUsedValue]: Step<PseudoStyleDeclaration[typeof kUsedValue]>;
-	[kComputedValue]: Step<PseudoStyleDeclaration[typeof kComputedValue]>;
+	_syncResolved: Step<PseudoStyleDeclaration["_syncResolved"]>;
+	_baseValue: Step<PseudoStyleDeclaration["_baseValue"]>;
+	_usedValue: Step<PseudoStyleDeclaration["_usedValue"]>;
+	_computedValue: Step<PseudoStyleDeclaration["_computedValue"]>;
 }
 
 interface PseudoStyleDeclaration {
@@ -5568,12 +5554,12 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 		const slots = _(this);
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(slots)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
 		let value = slots.nodeResolved.get(property);
 		if (value === undefined) {
 			value =
-				slots[kBaseValue](property) ||
+				slots._baseValue(property) ||
 				CSSValues.getComputedValueEntry(
 					property,
 					getInitialStyle(null, property),
@@ -5590,13 +5576,13 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 			flushCascadeStyle(slots.cascade);
 		}
 		const computed =
-			slots[kComputedValue](property) ||
+			slots._computedValue(property) ||
 			CSSValues.getComputedValueEntry(
 				property,
 				getInitialStyle(null, property),
 			);
 		if (slots.cascade && USED_VALUE_PROPERTIES.has(property)) {
-			return slots[kUsedValue](property, computed);
+			return slots._usedValue(property, computed);
 		}
 		return computed;
 	}
@@ -5617,7 +5603,7 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 		return CSS_LONGHANDS[index] ?? "";
 	}
 
-	[kSyncResolved](this: Slots<PseudoStyleDeclaration>): void {
+	_syncResolved(this: Slots<PseudoStyleDeclaration>): void {
 		// Before the work, because resolving below reads back through this
 		// declaration.
 		const slots = this;
@@ -5644,21 +5630,21 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 			processTransitionStyle(
 				slots.cascade,
 				slots.element,
-				(property) => slots[kBaseValue](property),
+				(property) => slots._baseValue(property),
 				slots.pseudoElement,
 			);
 		}
 	}
 
 	// The cascade's declarations alone, with no transition overriding them.
-	[kBaseValue](this: Slots<PseudoStyleDeclaration>, property: string): string {
+	_baseValue(this: Slots<PseudoStyleDeclaration>, property: string): string {
 		const slots = this;
 		let value = slots.resolved.get(property);
 		if (value === undefined) {
 			const longhands = CSSValues.getLonghands(property);
 			value = longhands && slots.pseudoDeclarations[property] === undefined
 				? CSSValues.serializeShorthandValue(property, longhands, (longhand) =>
-					slots[kBaseValue](longhand) || CSS_INITIAL_VALUES[longhand] || "")
+					slots._baseValue(longhand) || CSS_INITIAL_VALUES[longhand] || "")
 				: CSSValues.getComputedValueEntry(
 					property,
 					slots.pseudoDeclarations[property] ?? "",
@@ -5672,7 +5658,7 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 	// through the same arithmetic as an element's metrics. A pseudo-element
 	// never given a node uses the percentage resolution below, against the
 	// box it would be in.
-	[kUsedValue](
+	_usedValue(
 		this: Slots<PseudoStyleDeclaration>,
 		property: string,
 		computed: string,
@@ -5724,16 +5710,16 @@ class PseudoStyleDeclaration extends CSSStyleProperties {
 	// The engine's read. An empty result means no rule reached the
 	// pseudo-element, which is what the ::selection and ::marker painters
 	// check.
-	[kComputedValue](
+	_computedValue(
 		this: Slots<PseudoStyleDeclaration>,
 		property: string,
 	): string {
 		const slots = this;
 		const current = slots.cascade?.currentDeclarations;
 		if (current !== undefined && !current.has(this)) {
-			slots[kSyncResolved]();
+			slots._syncResolved();
 		}
-		const value = slots[kBaseValue](property);
+		const value = slots._baseValue(property);
 		const transitional = getPseudoTransitionValue(ownerOf(this), property);
 		return transitional ?? value;
 	}
@@ -5781,7 +5767,7 @@ function getBoxView(
 		adoptSlots(measured, {
 			element: node,
 			cascade: declarationSlots.cascade,
-			[kComputedValue]: (property: string): string =>
+			_computedValue: (property: string): string =>
 				declaration.nodeValue(property),
 		});
 		view = measured as MeasuredDeclaration;
@@ -6120,9 +6106,9 @@ function shouldCreatePseudoElement(
 ): boolean {
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display === "list-item" && listStylePosition !== "outside") {
 			return true;
@@ -6204,7 +6190,7 @@ export class Cascade {
 
 	// The slots of every declaration resolved against the current cascade.
 	// Dropping one, or replacing the set, sends it back through
-	// kSyncResolved on its next read. Weak, so a declaration nobody holds
+	// _syncResolved on its next read. Weak, so a declaration nobody holds
 	// costs nothing.
 	currentDeclarations: WeakSet<object>;
 
@@ -6794,11 +6780,11 @@ export class Cascade {
 			slots = fresh;
 			this.computedStyleCache.set(element, fresh);
 			// Building a fresh declaration is the other form of the style
-			// change event kSyncResolved sees.
+			// change event _syncResolved sees.
 			processTransitionStyle(
 				this,
 				element,
-				(property) => fresh[kBaseValue](property),
+				(property) => fresh._baseValue(property),
 				"",
 			);
 		}
@@ -6815,7 +6801,7 @@ export class Cascade {
 		}
 		const declarationSlots = this.computedSlotsFor(element);
 		if (!this.currentDeclarations.has(declarationSlots)) {
-			declarationSlots[kSyncResolved]();
+			declarationSlots._syncResolved();
 		}
 		return declarationSlots.styleVersion;
 	}
@@ -6860,7 +6846,7 @@ export class Cascade {
 		}
 
 		const computedStyle = this.declarationFor(hostElement);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 
 		if (display !== "list-item") {
 			return null;
@@ -7228,7 +7214,7 @@ function pseudoDeclarationsFor(
 	const hostStyleSlots = _(hostStyle);
 	for (const property of inheritedProperties) {
 		if (!declarations[property]) {
-			const inherited = hostStyleSlots[kComputedValue](property);
+			const inherited = hostStyleSlots._computedValue(property);
 			if (inherited) {
 				declarations[property] = inherited;
 			}
@@ -7236,7 +7222,7 @@ function pseudoDeclarationsFor(
 	}
 	// A pseudo-element of a flex or grid container is one of its items,
 	// and an item's display isBlockified, including the initial `inline`.
-	if (ITEM_DISPLAYS.has(hostStyleSlots[kComputedValue]("display"))) {
+	if (ITEM_DISPLAYS.has(hostStyleSlots._computedValue("display"))) {
 		declarations.display = CSSValues.getBlockifiedDisplay(
 			declarations.display || getInitialStyle(null, "display"),
 		);
@@ -7513,7 +7499,7 @@ function getPseudoDeclaration(
 	processTransitionStyle(
 		cascade,
 		element,
-		(property) => _(declaration)[kBaseValue](property),
+		(property) => _(declaration)._baseValue(property),
 		pseudoElement,
 	);
 	return declaration;
@@ -7643,9 +7629,9 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 	for (const element of listItems) {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display === "list-item" && listStylePosition !== "outside") {
 			attachPseudoElementToElementForType(cascade, element, "::marker");
@@ -7686,9 +7672,9 @@ function initializeCounters(cascade: Cascade, element: Element): void {
 
 	const computedStyle = cascade.declarationFor(element);
 	const computedStyleSlots = _(computedStyle);
-	const counterReset = computedStyleSlots[kComputedValue]("counter-reset");
+	const counterReset = computedStyleSlots._computedValue("counter-reset");
 	const counterIncrement =
-		computedStyleSlots[kComputedValue]("counter-increment");
+		computedStyleSlots._computedValue("counter-increment");
 
 	const parentElement = element.parentElement;
 	const parentScope = parentElement
@@ -10179,8 +10165,9 @@ function computePseudoElementStyle(
 			if (!CSSValues.hasSlotAliases(name)) {
 				continue;
 			}
-			direction ??=
-				cascade.computedSlotsFor(element)[kComputedValue]("direction");
+			direction ??= cascade
+				.computedSlotsFor(element)
+				._computedValue("direction");
 			for (const other of CSSValues.getSlotNames(name, direction)) {
 				computedStyle[other] = value;
 			}
@@ -10200,11 +10187,11 @@ function getPseudoContent(
 
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(hostElement);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 
 		if (display === "list-item") {
 			const listStylePosition =
-				_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+				_(computedStyle)._computedValue("list-style-position") || "outside";
 
 			if (listStylePosition === "outside") {
 				return null;
@@ -10361,9 +10348,9 @@ function attachPseudoElementToElementForType(
 
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(element);
-		const display = _(computedStyle)[kComputedValue]("display");
+		const display = _(computedStyle)._computedValue("display");
 		const listStylePosition =
-			_(computedStyle)[kComputedValue]("list-style-position") || "outside";
+			_(computedStyle)._computedValue("list-style-position") || "outside";
 
 		if (display !== "list-item") {
 			return;
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index ef46c55b..1fbabc63 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -124,15 +124,12 @@ export const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
 export const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
 const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
 
-const kEnsureUAShadowTree = Symbol("build a control's UA shadow tree");
-
 // Safe to call more than once, and synchronous: the shadow tree exists
 // when this returns. A control that was removed and re-inserted keeps its
 // tree and only updates the state it missed.
 function ensureUAShadowTree(element: globalThis.Element): void {
-	(_(element) as unknown as Record<symbol, (() => void) | undefined>)[
-		kEnsureUAShadowTree
-	]?.();
+	(_(element) as unknown as Record<string, (() => void) | undefined>)
+		._ensureUAShadowTree?.();
 }
 
 // Built-in tags that get a UA shadow tree when they connect.
@@ -180,8 +177,6 @@ function ensureUAShadowTrees(root: globalThis.Node): void {
 	}
 }
 
-const kUASelection = Symbol("a control's selection, whatever its type");
-
 /**
  * A text control's selection record, without the type check authors get.
  * Per spec selectionStart is null on a number input, but the UA still needs
@@ -191,13 +186,11 @@ export function getSelectionRecord(
 	control: globalThis.Element,
 ): {start: number; end: number; direction: string} | null {
 	const slots = _(control) as unknown as {
-		[kUASelection]?: () => ReturnType<typeof getSelectionRecord>;
+		_uaSelection?: () => ReturnType<typeof getSelectionRecord>;
 	};
-	return slots[kUASelection]?.() ?? null;
+	return slots._uaSelection?.() ?? null;
 }
 
-const kSetUASelection = Symbol("move a control's selection, whatever its type");
-
 /** Set a text control's selection, without the type check authors get. */
 export function setUASelection(
 	control: globalThis.Element,
@@ -207,17 +200,15 @@ export function setUASelection(
 ): void {
 	(
 		_(control) as unknown as {
-			[kSetUASelection](
+			_setUASelection(
 				start: number,
 				end: number,
 				direction?: string,
 			): void;
 		}
-	)[kSetUASelection]!(start, end, direction);
+	)._setUASelection!(start, end, direction);
 }
 
-const kSyncUAShadowTree = Symbol("bring a control's UA tree back into step");
-
 // The pseudo-classes that read a control's state rather than its
 // attributes, each with its bit in a snapshot of what an element matches.
 // :autofill and :blank match nothing here, so they never change.
@@ -285,9 +276,8 @@ function reportControlStates(element: Element): void {
 // selected. Its shadow tree redraws, and the rules that read that state
 // are told, since no mutation record says so.
 function syncUAShadowTree(element: Element): void {
-	(_(element) as unknown as Record<symbol, (() => void) | undefined>)[
-		kSyncUAShadowTree
-	]?.();
+	(_(element) as unknown as Record<string, (() => void) | undefined>)
+		._syncUAShadowTree?.();
 	reportControlStates(element);
 	// A form and every fieldset around the control are :valid or :invalid
 	// by what they hold, so they are told as well.
@@ -329,9 +319,6 @@ export function takesTextCursor(
 	return isTextControl(element) && !CURSORLESS_INPUT_TYPES.has(element.type!);
 }
 
-const kUAValueText =
-	Symbol("the text node a control's editable value lives in");
-
 /**
  * The text node holding a form control's value inside its UA shadow tree,
  * or null before the tree is built. The editable text lives at
@@ -342,10 +329,8 @@ export function getTextControlValueText(
 	textControl: globalThis.Element,
 ): globalThis.Text | null {
 	return (
-		(_(textControl) as unknown as Record<
-			symbol,
-			globalThis.Text | null | undefined
-		>)[kUAValueText] ?? null
+		(_(textControl) as unknown as {_uaValueText?: globalThis.Text | null})
+			._uaValueText ?? null
 	);
 }
 
@@ -418,8 +403,6 @@ export function placeTextControlCaret(
 	return {textControl: target, offset};
 }
 
-const kUASelectionRange = Symbol("what an element's own selection covers");
-
 /**
  * The focused text control's selection over this text node, or null. Per
  * spec a control's selection is invisible to getSelection(), so this is
@@ -438,7 +421,7 @@ export function getTextControlSelectionRange(
 	const range =
 		_(
 			(active as HTMLInputElement | HTMLTextAreaElement),
-		)[kUASelectionRange]?.() ??
+		)._uaSelectionRange?.() ??
 		null;
 	if (!range || range.startContainer !== textNode) {
 		return null;
@@ -583,8 +566,6 @@ function moveTextControlSelection(
 	return {value, start: clamped, end: clamped, direction: "none"};
 }
 
-const kUAValue = Symbol("a text control's value, beneath the IDL attribute");
-
 // Handles Backspace, Delete, the horizontal arrows and the readline chords,
 // grapheme-aware. Returns null for any other key. Enter, vertical motion
 // and Home/End are left to the control, which knows where its lines end,
@@ -596,7 +577,7 @@ function applySharedTextControlEdit(
 	ctrlKey: boolean,
 	altKey: boolean,
 ): TextControlEditResult | null {
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end, direction} = getSelectionRecord(textControl)!;
 	const backward = direction === "backward";
 	const caret = backward ? start : end;
@@ -782,7 +763,7 @@ function printableTextControlEdit(
 	textControl: HTMLInputElement | HTMLTextAreaElement,
 	text: string,
 ): TextControlEditResult {
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end} = getSelectionRecord(textControl)!;
 	return createCollapsedEdit(
 		value.slice(0, start) + text + value.slice(end),
@@ -824,8 +805,6 @@ function createCollapsedEdit(
 	return {value, start: clamped, end: clamped, direction: "none"};
 }
 
-const kSetUAValue = Symbol("write a text control's value, as a user edit does");
-
 // Fires input when the value actually changed and select when the user
 // moved the selection. Writes to the control's value directly, never
 // through the value IDL setter. In a browser a user edit changes the value
@@ -886,7 +865,7 @@ function applyTextControlEdit(
 	kind: TextControlEditKind = {inputType: "", asked: true},
 ): void {
 	const textControlSlots = _(textControl);
-	const value = textControlSlots[kUAValue];
+	const value = textControlSlots._uaValue;
 	const {start, end, direction} = getSelectionRecord(textControl)!;
 	if (result.value !== value) {
 		const init = {
@@ -907,8 +886,8 @@ function applyTextControlEdit(
 			return;
 		}
 		editedSinceChange.add(textControl);
-		textControlSlots[kSetUAValue]!(result.value);
-		textControlSlots[kSetUASelection]!(
+		textControlSlots._setUAValue!(result.value);
+		textControlSlots._setUASelection!(
 			result.start,
 			result.end,
 			result.direction,
@@ -922,7 +901,7 @@ function applyTextControlEdit(
 		result.end !== end ||
 		(result.start !== result.end && result.direction !== direction)
 	) {
-		textControlSlots[kSetUASelection]!(
+		textControlSlots._setUASelection!(
 			result.start,
 			result.end,
 			result.direction,
@@ -1104,169 +1083,7 @@ function replaceTextRange(
 	}
 }
 
-// WebIDL §3.14.1: the legacy code of each name that had one, 0 for the
-// rest.
-const DOM_EXCEPTION_CODES = new Map<string, number>([
-	["IndexSizeError", 1],
-	["DOMStringSizeError", 2],
-	["HierarchyRequestError", 3],
-	["WrongDocumentError", 4],
-	["InvalidCharacterError", 5],
-	["NoDataAllowedError", 6],
-	["NoModificationAllowedError", 7],
-	["NotFoundError", 8],
-	["NotSupportedError", 9],
-	["InUseAttributeError", 10],
-	["InvalidStateError", 11],
-	["SyntaxError", 12],
-	["InvalidModificationError", 13],
-	["NamespaceError", 14],
-	["InvalidAccessError", 15],
-	["ValidationError", 16],
-	["TypeMismatchError", 17],
-	["SecurityError", 18],
-	["NetworkError", 19],
-	["AbortError", 20],
-	["URLMismatchError", 21],
-	["QuotaExceededError", 22],
-	["TimeoutError", 23],
-	["InvalidNodeTypeError", 24],
-	["DataCloneError", 25],
-]);
-
-export interface SealedDOMExceptionSlots {
-	exceptionName: string;
-	exceptionMessage: string;
-}
-
-export interface SealedDOMException {
-	readonly [internals]: SealedDOMExceptionSlots;
-}
-
-/**
- * WebIDL's DOMException, for a runtime that has none. Its prototype's is
- * Error's, as WebIDL says.
- */
-export class SealedDOMException
-	extends Error
-	implements globalThis.DOMException {
-	static readonly INDEX_SIZE_ERR = 1;
-	static readonly DOMSTRING_SIZE_ERR = 2;
-	static readonly HIERARCHY_REQUEST_ERR = 3;
-	static readonly WRONG_DOCUMENT_ERR = 4;
-	static readonly INVALID_CHARACTER_ERR = 5;
-	static readonly NO_DATA_ALLOWED_ERR = 6;
-	static readonly NO_MODIFICATION_ALLOWED_ERR = 7;
-	static readonly NOT_FOUND_ERR = 8;
-	static readonly NOT_SUPPORTED_ERR = 9;
-	static readonly INUSE_ATTRIBUTE_ERR = 10;
-	static readonly INVALID_STATE_ERR = 11;
-	static readonly SYNTAX_ERR = 12;
-	static readonly INVALID_MODIFICATION_ERR = 13;
-	static readonly NAMESPACE_ERR = 14;
-	static readonly INVALID_ACCESS_ERR = 15;
-	static readonly VALIDATION_ERR = 16;
-	static readonly TYPE_MISMATCH_ERR = 17;
-	static readonly SECURITY_ERR = 18;
-	static readonly NETWORK_ERR = 19;
-	static readonly ABORT_ERR = 20;
-	static readonly URL_MISMATCH_ERR = 21;
-	static readonly QUOTA_EXCEEDED_ERR = 22;
-	static readonly TIMEOUT_ERR = 23;
-	static readonly INVALID_NODE_TYPE_ERR = 24;
-	static readonly DATA_CLONE_ERR = 25;
-
-	declare readonly INDEX_SIZE_ERR: 1;
-	declare readonly DOMSTRING_SIZE_ERR: 2;
-	declare readonly HIERARCHY_REQUEST_ERR: 3;
-	declare readonly WRONG_DOCUMENT_ERR: 4;
-	declare readonly INVALID_CHARACTER_ERR: 5;
-	declare readonly NO_DATA_ALLOWED_ERR: 6;
-	declare readonly NO_MODIFICATION_ALLOWED_ERR: 7;
-	declare readonly NOT_FOUND_ERR: 8;
-	declare readonly NOT_SUPPORTED_ERR: 9;
-	declare readonly INUSE_ATTRIBUTE_ERR: 10;
-	declare readonly INVALID_STATE_ERR: 11;
-	declare readonly SYNTAX_ERR: 12;
-	declare readonly INVALID_MODIFICATION_ERR: 13;
-	declare readonly NAMESPACE_ERR: 14;
-	declare readonly INVALID_ACCESS_ERR: 15;
-	declare readonly VALIDATION_ERR: 16;
-	declare readonly TYPE_MISMATCH_ERR: 17;
-	declare readonly SECURITY_ERR: 18;
-	declare readonly NETWORK_ERR: 19;
-	declare readonly ABORT_ERR: 20;
-	declare readonly URL_MISMATCH_ERR: 21;
-	declare readonly QUOTA_EXCEEDED_ERR: 22;
-	declare readonly TIMEOUT_ERR: 23;
-	declare readonly INVALID_NODE_TYPE_ERR: 24;
-	declare readonly DATA_CLONE_ERR: 25;
-
-	constructor(message = "", name = "Error") {
-		super();
-		seal(this, new.target, SealedDOMException);
-		const slots = _(this);
-		slots.exceptionName = String(name);
-		slots.exceptionMessage = String(message);
-	}
-
-	override get name(): string {
-		return _(this).exceptionName;
-	}
-
-	override get message(): string {
-		return _(this).exceptionMessage;
-	}
-
-	get code(): number {
-		return DOM_EXCEPTION_CODES.get(_(this).exceptionName) ?? 0;
-	}
-}
-
-declareSealedRoot(SealedDOMException);
-
-for (const [index, name] of [
-	"INDEX_SIZE_ERR",
-	"DOMSTRING_SIZE_ERR",
-	"HIERARCHY_REQUEST_ERR",
-	"WRONG_DOCUMENT_ERR",
-	"INVALID_CHARACTER_ERR",
-	"NO_DATA_ALLOWED_ERR",
-	"NO_MODIFICATION_ALLOWED_ERR",
-	"NOT_FOUND_ERR",
-	"NOT_SUPPORTED_ERR",
-	"INUSE_ATTRIBUTE_ERR",
-	"INVALID_STATE_ERR",
-	"SYNTAX_ERR",
-	"INVALID_MODIFICATION_ERR",
-	"NAMESPACE_ERR",
-	"INVALID_ACCESS_ERR",
-	"VALIDATION_ERR",
-	"TYPE_MISMATCH_ERR",
-	"SECURITY_ERR",
-	"NETWORK_ERR",
-	"ABORT_ERR",
-	"URL_MISMATCH_ERR",
-	"QUOTA_EXCEEDED_ERR",
-	"TIMEOUT_ERR",
-	"INVALID_NODE_TYPE_ERR",
-	"DATA_CLONE_ERR",
-].entries()) {
-	Object.defineProperty(SealedDOMException.prototype, name, {
-		value: index + 1,
-		enumerable: true,
-	});
-}
-
-Object.defineProperty(SealedDOMException.prototype, Symbol.toStringTag, {
-	value: "DOMException",
-	configurable: true,
-});
-
-export const DOMException: typeof globalThis.DOMException =
-	(globalThis as {DOMException?: typeof globalThis.DOMException})
-		.DOMException ??
-	(SealedDOMException as unknown as typeof globalThis.DOMException);
+export const DOMException = globalThis.DOMException;
 
 export type DOMException = globalThis.DOMException;
 
@@ -1451,8 +1268,6 @@ function toDictionary<T extends object>(value: unknown, what: string): T {
 	return value as T;
 }
 
-const kState = Symbol("state");
-
 // One accessor shared by every event and installed as an own property on
 // each. The interface declares isTrusted unforgeable, so it cannot live on
 // the prototype or be redefined.
@@ -4399,8 +4214,6 @@ interface Listener {
 	hoverCount?: HoverListenerCount;
 }
 
-const kGetTheParent = Symbol("get the parent");
-
 // Every target starts on this one empty list, frozen since nothing may add
 // to it: most nodes are never listened to, and a list of their own would
 // be one more allocation each.
@@ -4423,7 +4236,7 @@ export interface EventTargetSlots {
 
 	/** Null until EventTarget target is given an event handler. Most never are. */
 	handlers: Map<string, EventHandlerRecord> | null;
-	[kGetTheParent]: Step<EventTarget[typeof kGetTheParent]>;
+	_getTheParent: Step<EventTarget["_getTheParent"]>;
 }
 
 export interface EventTarget {
@@ -4531,7 +4344,7 @@ export class EventTarget
 	}
 
 	// A bare event target ends the path. A node returns its parent.
-	[kGetTheParent](_event: Event): EventTarget | null {
+	_getTheParent(_event: Event): EventTarget | null {
 		return null;
 	}
 }
@@ -4645,11 +4458,6 @@ export function isAbortSignal(value: unknown): value is SealedAbortSignal {
 	);
 }
 
-const RuntimeAbortController:
-	typeof globalThis.AbortController | undefined = globalThis.AbortController;
-const RuntimeAbortSignal: typeof globalThis.AbortSignal | undefined =
-	globalThis.AbortSignal;
-
 const runtimeSignalFollowers = new WeakMap<
 	globalThis.AbortSignal,
 	SealedAbortSignal
@@ -4759,15 +4567,11 @@ Object.defineProperty(SealedAbortController.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-export const AbortController: typeof globalThis.AbortController =
-	RuntimeAbortController ??
-	(SealedAbortController as unknown as typeof globalThis.AbortController);
+export const AbortController = globalThis.AbortController;
 
 export type AbortController = globalThis.AbortController;
 
-export const AbortSignal: typeof globalThis.AbortSignal =
-	RuntimeAbortSignal ??
-	(SealedAbortSignal as unknown as typeof globalThis.AbortSignal);
+export const AbortSignal = globalThis.AbortSignal;
 
 export type AbortSignal = globalThis.AbortSignal;
 
@@ -4802,9 +4606,7 @@ function flattenMore(
 	if (given !== undefined) {
 		if (isAbortSignal(given)) {
 			signal = given;
-		} else if (
-			RuntimeAbortSignal !== undefined && given instanceof RuntimeAbortSignal
-		) {
+		} else if (given instanceof AbortSignal) {
 			signal = followRuntimeSignal(given);
 		} else {
 			throw new TypeError("A listener's signal must be an AbortSignal");
@@ -5484,7 +5286,7 @@ function dispatch(target: EventTarget, event: Event, trusted = true): boolean {
 		if (isActivationEvent && hasActivationBehavior(eventTarget)) {
 			activationTarget = eventTarget;
 		}
-		let parent = _(eventTarget)[kGetTheParent](event);
+		let parent = _(eventTarget)._getTheParent(event);
 		while (parent !== null) {
 			if (slottable !== null) {
 				slottable = null;
@@ -5536,7 +5338,7 @@ function dispatch(target: EventTarget, event: Event, trusted = true): boolean {
 				);
 			}
 			if (parent !== null) {
-				parent = _(parent)[kGetTheParent](event);
+				parent = _(parent)._getTheParent(event);
 			}
 			slotInClosedTree = false;
 		}
@@ -6062,18 +5864,14 @@ function getEventTargetDocument(target: EventTarget): Document | null {
 	return null;
 }
 
-const kSync = Symbol("resynchronize own properties");
-const kChildrenChangedSteps = Symbol("children changed steps");
-const kAttributeSync = Symbol("resynchronize after an attribute change");
-
 interface LiveCollection {
-	[kSync](): void;
-	[kChildrenChangedSteps](
+	_sync(): void;
+	_childrenChangedSteps(
 		point: Node,
 		changed: readonly Node[] | null,
 		added: boolean,
 	): void;
-	[kAttributeSync](element: Element, localName: string): void;
+	_attributeSync(element: Element, localName: string): void;
 }
 
 // A collection's indexed and named properties are own properties rather
@@ -6141,14 +5939,14 @@ function runChildrenChangedSteps(
 				continue;
 			}
 			for (const collection of held) {
-				_(collection)[kChildrenChangedSteps](point, changed, added);
+				_(collection)._childrenChangedSteps(point, changed, added);
 			}
 		}
 	}
 	const wide = _(pointSlots.document).extra.documentWideLists;
 	if (wide !== null) {
 		for (const collection of wide) {
-			_(collection)[kChildrenChangedSteps](point, changed, added);
+			_(collection)._childrenChangedSteps(point, changed, added);
 		}
 	}
 }
@@ -6161,16 +5959,16 @@ function syncAttributeCollections(element: Element, localName: string): void {
 	const elementSlots = _(element);
 	const map = elementSlots.attributesMap;
 	if (map !== null) {
-		_(map)[kSync]();
+		_(map)._sync();
 	}
 	const classList = elementSlots.classList;
 	if (classList !== null) {
-		_(classList)[kSync]();
+		_(classList)._sync();
 	}
 	const lists = elementSlots.tokenLists;
 	if (lists !== null) {
 		for (const list of lists.values()) {
-			_(list)[kSync]();
+			_(list)._sync();
 		}
 	}
 	if (heldListDocuments.has(elementSlots.document)) {
@@ -6182,14 +5980,14 @@ function syncAttributeCollections(element: Element, localName: string): void {
 				continue;
 			}
 			for (const collection of held) {
-				_(collection)[kAttributeSync](element, localName);
+				_(collection)._attributeSync(element, localName);
 			}
 		}
 	}
 	const wide = _(elementSlots.document).extra.documentWideLists;
 	if (wide !== null) {
 		for (const collection of wide) {
-			_(collection)[kAttributeSync](element, localName);
+			_(collection)._attributeSync(element, localName);
 		}
 	}
 }
@@ -6204,12 +6002,6 @@ const DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
 /** A stable per-node serial, so disconnected nodes order consistently. */
 let nodeSerial = 0;
 
-const kInsertionSteps = Symbol("insertion steps");
-const kRemovingSteps = Symbol("removing steps");
-const kAdoptingSteps = Symbol("adopting steps");
-const kCloningSteps = Symbol("cloning steps");
-const kCloneSingle = Symbol("clone a single node");
-
 /** The node-type constants, installed on the prototype below. */
 // The slots a class below Node, Element or CharacterData declares of its
 // own, kept apart so that every record of the family has one shape.
@@ -6245,11 +6037,11 @@ export interface NodeSlots extends EventTargetSlots {
 	// What nodeType reports, read here by the engine's hot paths.
 	nodeType: number;
 	registeredObservers: RegisteredObserver[] | null;
-	[kInsertionSteps]: Step<Node[typeof kInsertionSteps]>;
-	[kRemovingSteps]: Step<Node[typeof kRemovingSteps]>;
-	[kAdoptingSteps]: Step<Node[typeof kAdoptingSteps]>;
-	[kCloningSteps]: Step<Node[typeof kCloningSteps]>;
-	[kCloneSingle]: Step<Node[typeof kCloneSingle]>;
+	_insertionSteps: Step<Node["_insertionSteps"]>;
+	_removingSteps: Step<Node["_removingSteps"]>;
+	_adoptingSteps: Step<Node["_adoptingSteps"]>;
+	_cloningSteps: Step<Node["_cloningSteps"]>;
+	_cloneSingle: Step<Node["_cloneSingle"]>;
 	children: HTMLCollection | null;
 	// Set on the first collection a node is asked for by kind and name.
 	collectionCaches?: Map<string, HTMLCollection>;
@@ -6641,25 +6433,22 @@ export class Node extends EventTarget implements globalThis.Node {
 
 	// An assigned slottable overrides this to return its slot, where the
 	// composed tree continues.
-	override [kGetTheParent](
-		this: Slots<Node>,
-		_event: Event,
-	): EventTarget | null {
+	override _getTheParent(this: Slots<Node>, _event: Event): EventTarget | null {
 		return objectOf(this.parent);
 	}
 
 	// The spec's per-node steps. Subclasses override them; the algorithms
 	// call them.
 
-	[kInsertionSteps](): void {}
+	_insertionSteps(): void {}
 
-	[kRemovingSteps](_oldParent: Node): void {}
+	_removingSteps(_oldParent: Node): void {}
 
-	[kAdoptingSteps](_oldDocument: Document): void {}
+	_adoptingSteps(_oldDocument: Document): void {}
 
-	[kCloningSteps](_copy: Node, _document: Document, _deep: boolean): void {}
+	_cloningSteps(_copy: Node, _document: Document, _deep: boolean): void {}
 
-	[kCloneSingle](_document: Document): Node {
+	_cloneSingle(_document: Document): Node {
 		throw domError("NotSupportedError", "That node cannot be cloned");
 	}
 }
@@ -7288,7 +7077,7 @@ function insertNode(
 			)
 		) {
 			descendantSlots.connected = connected;
-			descendantSlots[kInsertionSteps]();
+			descendantSlots._insertionSteps();
 			if (!connected) {
 				continue;
 			}
@@ -7582,7 +7371,7 @@ function removeNode(node: Node, suppressObservers = false): void {
 	const parentWasConnected = _(parent).connected;
 	for (const descendant of shadowIncludingInclusiveDescendants(node)) {
 		_(descendant).connected = false;
-		_(descendant)[kRemovingSteps](parent);
+		_(descendant)._removingSteps(parent);
 		if (
 			parentWasConnected &&
 			nodeTypeOf(descendant) === ELEMENT_NODE &&
@@ -7631,7 +7420,7 @@ function adoptNode(node: Node, document: Document): void {
 				document,
 			]);
 		}
-		_(descendant)[kAdoptingSteps](oldDocument);
+		_(descendant)._adoptingSteps(oldDocument);
 	}
 }
 
@@ -8250,12 +8039,6 @@ function queueTreeMutationRecord(
 	);
 }
 
-const kMembersMoved = Symbol("members moved");
-
-const kListMembers = Symbol("listMembers");
-const kListNames = Symbol("listNames");
-const kChangedMembers = Symbol("changedMembers");
-
 const anyAttribute = Symbol("any attribute");
 
 // Copies an internal base's methods onto an interface's prototype, where
@@ -8295,17 +8078,17 @@ interface LiveListSlots {
 	documentWide: boolean;
 	watched: string | symbol | null;
 	names: string[];
-	[kListMembers](): Node[];
-	[kListNames](items: Node[]): Map<string, Node> | null;
-	[kChangedMembers](changed: readonly Node[]): Node[] | null;
-	[kMembersMoved](): void;
-	[kSync](): void;
-	[kChildrenChangedSteps](
+	_listMembers(): Node[];
+	_listNames(items: Node[]): Map<string, Node> | null;
+	_changedMembers(changed: readonly Node[]): Node[] | null;
+	_membersMoved(): void;
+	_sync(): void;
+	_childrenChangedSteps(
 		point: Node,
 		changed: readonly Node[] | null,
 		added: boolean,
 	): void;
-	[kAttributeSync](element: Element, localName: string): void;
+	_attributeSync(element: Element, localName: string): void;
 }
 
 interface LiveList {
@@ -8316,16 +8099,16 @@ interface LiveList {
 // where a page would see it: shareMethods() copies its methods onto each
 // list interface.
 abstract class LiveList implements LiveCollection {
-	abstract [kListMembers](): Node[];
+	abstract _listMembers(): Node[];
 
-	[kListNames](_items: Node[]): Map<string, Node> | null {
+	_listNames(_items: Node[]): Map<string, Node> | null {
 		return null;
 	}
 
 	// The members the changed nodes carry, if the collection can determine
 	// that from those nodes alone and knows its named properties did not
 	// move. Null if the list has to be recomputed to find out.
-	[kChangedMembers](
+	_changedMembers(
 		this: Slots<LiveList>,
 		changed: readonly Node[],
 	): Node[] | null {
@@ -8344,9 +8127,9 @@ abstract class LiveList implements LiveCollection {
 
 	// The list cannot tell its members moved, because a splice moves them
 	// within the one array the collection holds.
-	[kMembersMoved](): void {}
+	_membersMoved(): void {}
 
-	[kSync](this: Slots<LiveList>): void {
+	_sync(this: Slots<LiveList>): void {
 		const slots = this;
 		if (slots.registered === null) {
 			return;
@@ -8367,7 +8150,7 @@ abstract class LiveList implements LiveCollection {
 	// except for a document-wide list, which is dropped and recomputed on the
 	// next read, because a document sees far more changes than reads of such
 	// a list.
-	[kChildrenChangedSteps](
+	_childrenChangedSteps(
 		this: Slots<LiveList>,
 		point: Node,
 		changed: readonly Node[] | null,
@@ -8386,7 +8169,7 @@ abstract class LiveList implements LiveCollection {
 				return;
 			}
 			if (changed !== null) {
-				const members = slots[kChangedMembers](changed);
+				const members = slots._changedMembers(changed);
 				if (
 					members !== null &&
 					splice(ownerOf(this), point, changed, members, added)
@@ -8399,7 +8182,7 @@ abstract class LiveList implements LiveCollection {
 	}
 
 	// A list that reads none of the element's attributes is unaffected.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<LiveList>,
 		_element: Element,
 		localName: string,
@@ -8407,7 +8190,7 @@ abstract class LiveList implements LiveCollection {
 		const slots = this;
 		const watched = slots.watched;
 		if (watched === localName || watched === anyAttribute) {
-			slots[kSync]();
+			slots._sync();
 		}
 	}
 }
@@ -8449,14 +8232,14 @@ function dropList(list: LiveList): void {
 		return;
 	}
 	listSlots.exact = false;
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 }
 
 function recomputeList(list: LiveList): void {
 	const listSlots = _(list);
-	listSlots.items = listSlots[kListMembers]();
+	listSlots.items = listSlots._listMembers();
 	listSlots.exact = true;
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 	defineListProperties(list);
 }
 
@@ -8515,7 +8298,7 @@ function splice(
 		}
 		items.splice(at, members.length);
 	}
-	listSlots[kMembersMoved]();
+	listSlots._membersMoved();
 	defineIndices(list, items.length);
 	return true;
 }
@@ -8551,7 +8334,7 @@ function defineListProperties(list: LiveList): void {
 		delete record[name];
 	}
 	listSlots.names = [];
-	const named = listSlots[kListNames](items);
+	const named = listSlots._listNames(items);
 	if (named !== null) {
 		for (const [name, node] of named) {
 			if (name === "" || Object.prototype.hasOwnProperty.call(list, name)) {
@@ -8612,7 +8395,7 @@ function ensureList(list: LiveList): Node[] {
 
 export interface NodeListSlots extends LiveListSlots {
 	compute: () => Node[];
-	[kListMembers]: Step<NodeList[typeof kListMembers]>;
+	_listMembers: Step<NodeList["_listMembers"]>;
 }
 
 export interface NodeList extends LiveList {
@@ -8657,7 +8440,7 @@ export class NodeList {
 		return at < items.length ? (items[at] as unknown as globalThis.Node) : null;
 	}
 
-	[kListMembers](this: Slots<NodeList>): Node[] {
+	_listMembers(this: Slots<NodeList>): Node[] {
 		return this.compute();
 	}
 }
@@ -8693,11 +8476,11 @@ interface HTMLCollectionSlots extends LiveListSlots {
 	root?: Node;
 	matches?: (element: Element) => boolean;
 	members?: Set<Node> | null;
-	[kListMembers]: Step<HTMLCollection[typeof kListMembers]>;
-	[kChangedMembers]: Step<HTMLCollection[typeof kChangedMembers]>;
-	[kListNames]: Step<HTMLCollection[typeof kListNames]>;
-	[kAttributeSync]: Step<HTMLCollection[typeof kAttributeSync]>;
-	[kMembersMoved]: Step<HTMLCollection[typeof kMembersMoved]>;
+	_listMembers: Step<HTMLCollection["_listMembers"]>;
+	_changedMembers: Step<HTMLCollection["_changedMembers"]>;
+	_listNames: Step<HTMLCollection["_listNames"]>;
+	_attributeSync: Step<HTMLCollection["_attributeSync"]>;
+	_membersMoved: Step<HTMLCollection["_membersMoved"]>;
 }
 
 interface HTMLCollection extends LiveList {
@@ -8750,11 +8533,11 @@ class HTMLCollection {
 		return null;
 	}
 
-	[kListMembers](this: Slots<HTMLCollection>): Node[] {
+	_listMembers(this: Slots<HTMLCollection>): Node[] {
 		return this.compute();
 	}
 
-	[kChangedMembers](
+	_changedMembers(
 		this: Slots<HTMLCollection>,
 		changed: readonly Node[],
 	): Node[] | null {
@@ -8762,14 +8545,14 @@ class HTMLCollection {
 		if (matches !== undefined) {
 			return matchingChangedMembers(ownerOf(this), matches, changed);
 		}
-		const members = LiveList.prototype[kChangedMembers].call(this, changed);
+		const members = LiveList.prototype._changedMembers.call(this, changed);
 		if (members === null || isNameless(members)) {
 			return members;
 		}
 		return null;
 	}
 
-	[kListNames](items: Node[]): Map<string, Node> {
+	_listNames(items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		for (const item of items) {
 			const element = item as Element;
@@ -8791,7 +8574,7 @@ class HTMLCollection {
 	// change to either moves its named properties. No collection here selects
 	// members by id or name, so the members stay and only the names are
 	// rebuilt.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<HTMLCollection>,
 		element: Element,
 		localName: string,
@@ -8803,7 +8586,7 @@ class HTMLCollection {
 			return;
 		}
 		if (localName !== "id" && localName !== "name") {
-			LiveList.prototype[kAttributeSync].call(this, element, localName);
+			LiveList.prototype._attributeSync.call(this, element, localName);
 			return;
 		}
 		if (
@@ -8818,7 +8601,7 @@ class HTMLCollection {
 		}
 	}
 
-	[kMembersMoved](this: Slots<HTMLCollection>): void {
+	_membersMoved(this: Slots<HTMLCollection>): void {
 		const slots = this;
 		if (slots.members !== undefined) {
 			slots.members = null;
@@ -8988,7 +8771,7 @@ function matchingAttributeSync(
 			return;
 		}
 	}
-	collectionSlots[kSync]();
+	collectionSlots._sync();
 }
 
 function getDescendantElements(root: Node, into: Element[]): Element[] {
@@ -9146,15 +8929,13 @@ function toASCIIUppercase(value: string): string {
 	return value.toUpperCase();
 }
 
-const kTokens = Symbol("tokens");
-
 interface DOMTokenListSlots extends LiveListSlots {
 	element: Element;
 	attribute: string;
 	supported: Set<string> | null;
-	[kTokens]: Step<DOMTokenList[typeof kTokens]>;
-	[kChangedMembers]: Step<DOMTokenList[typeof kChangedMembers]>;
-	[kListMembers]: Step<DOMTokenList[typeof kListMembers]>;
+	_tokens: Step<DOMTokenList["_tokens"]>;
+	_changedMembers: Step<DOMTokenList["_changedMembers"]>;
+	_listMembers: Step<DOMTokenList["_listMembers"]>;
 }
 
 interface DOMTokenList extends LiveList {
@@ -9182,7 +8963,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	}
 
 	get length(): number {
-		return _(this)[kTokens].length;
+		return _(this)._tokens.length;
 	}
 
 	get value(): string {
@@ -9195,25 +8976,25 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		setAttributeOf(slots.element, slots.attribute, String(value));
 	}
 
-	get [kTokens](): string[] {
+	get _tokens(): string[] {
 		return ensureList(
 			ownerOf(this as unknown as Slots<DOMTokenList>),
 		) as unknown as string[];
 	}
 
 	item(index: number): string | null {
-		const tokens = _(this)[kTokens];
+		const tokens = _(this)._tokens;
 		const at = toUnsignedLong(index);
 		return at < tokens.length ? tokens[at] : null;
 	}
 
 	contains(token: string): boolean {
-		return _(this)[kTokens].includes(String(token));
+		return _(this)._tokens.includes(String(token));
 	}
 
 	add(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)[kTokens].slice();
+		const current = _(this)._tokens.slice();
 		for (const token of tokens) {
 			if (!current.includes(token)) {
 				current.push(String(token));
@@ -9224,7 +9005,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 
 	remove(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)[kTokens].filter(
+		const current = _(this)._tokens.filter(
 			(each) => !tokens.some((token) => String(token) === each),
 		);
 		writeTokenList(this, current);
@@ -9233,7 +9014,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	toggle(token: string, force?: boolean): boolean {
 		validateTokens([token]);
 		const name = String(token);
-		const current = _(this)[kTokens].slice();
+		const current = _(this)._tokens.slice();
 		const index = current.indexOf(name);
 		if (index !== -1) {
 			if (force === undefined || force === false) {
@@ -9255,7 +9036,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		validateTokens([token, newToken]);
 		const name = String(token);
 		const replacement = String(newToken);
-		const current = _(this)[kTokens].slice();
+		const current = _(this)._tokens.slice();
 		if (!current.includes(name)) {
 			return false;
 		}
@@ -9292,11 +9073,11 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	}
 
 	// An attribute's tokens are not part of the tree's shape.
-	[kChangedMembers](): Node[] {
+	_changedMembers(): Node[] {
 		return [];
 	}
 
-	[kListMembers](this: Slots<DOMTokenList>): Node[] {
+	_listMembers(this: Slots<DOMTokenList>): Node[] {
 		const slots = this;
 		const value = attributeOf(slots.element, slots.attribute);
 		const tokens = value === null ? [] : splitOnASCIIWhitespace(value);
@@ -9597,15 +9378,12 @@ export class Text extends CharacterData implements globalThis.Text {
 		return created;
 	}
 
-	override [kGetTheParent](
-		this: Slots<Text>,
-		_event: Event,
-	): EventTarget | null {
+	override _getTheParent(this: Slots<Text>, _event: Event): EventTarget | null {
 		const slots = this;
 		return slots.assignedSlot ?? objectOf(slots.parent);
 	}
 
-	override [kCloneSingle](this: Slots<Text>, document: Document): Node {
+	override _cloneSingle(this: Slots<Text>, document: Document): Node {
 		const copy = new Text(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9635,7 +9413,7 @@ class CDATASection extends Text {
 		return "#cdata-section";
 	}
 
-	override [kCloneSingle](this: Slots<CDATASection>, document: Document): Node {
+	override _cloneSingle(this: Slots<CDATASection>, document: Document): Node {
 		const copy = new CDATASection(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9668,7 +9446,7 @@ export class Comment extends CharacterData implements globalThis.Comment {
 		return "#comment";
 	}
 
-	override [kCloneSingle](this: Slots<Comment>, document: Document): Node {
+	override _cloneSingle(this: Slots<Comment>, document: Document): Node {
 		const copy = new Comment(this.data);
 		_(copy).document = document;
 		return copy;
@@ -9716,7 +9494,7 @@ class ProcessingInstruction extends CharacterData {
 		return _(this).extra.target;
 	}
 
-	override [kCloneSingle](
+	override _cloneSingle(
 		this: Slots<ProcessingInstruction>,
 		document: Document,
 	): Node {
@@ -9784,7 +9562,7 @@ class DocumentType extends Node {
 		return _(this).extra.name;
 	}
 
-	override [kCloneSingle](this: Slots<DocumentType>, document: Document): Node {
+	override _cloneSingle(this: Slots<DocumentType>, document: Document): Node {
 		const slots = this;
 		const copy = new DocumentType(
 			slots.extra.name,
@@ -9868,7 +9646,7 @@ export class DocumentFragment
 		return null;
 	}
 
-	override [kCloneSingle](document: Document): Node {
+	override _cloneSingle(document: Document): Node {
 		const copy = new DocumentFragment();
 		_(copy).document = document;
 		return copy;
@@ -9907,8 +9685,6 @@ function setDescendantText(node: Node, value: string | null): void {
 
 export type AttributeSlots = Slots<Attr>;
 
-const kQualifiedName = Symbol("qualified name");
-
 interface AttrExtra extends NodeExtra {
 	namespace: string | null;
 	prefix: string | null;
@@ -9919,7 +9695,7 @@ interface AttrExtra extends NodeExtra {
 
 interface AttrSlots extends NodeSlots {
 	extra: AttrExtra;
-	[kQualifiedName]: Step<Attr[typeof kQualifiedName]>;
+	_qualifiedName: Step<Attr["_qualifiedName"]>;
 }
 
 interface Attr {
@@ -9957,7 +9733,7 @@ class Attr extends Node implements globalThis.Attr {
 	}
 
 	get name(): string {
-		return _(this)[kQualifiedName];
+		return _(this)._qualifiedName;
 	}
 
 	get value(): string {
@@ -9981,7 +9757,7 @@ class Attr extends Node implements globalThis.Attr {
 	}
 
 	override get nodeName(): string {
-		return _(this)[kQualifiedName];
+		return _(this)._qualifiedName;
 	}
 
 	override get nodeValue(): string | null {
@@ -10000,14 +9776,14 @@ class Attr extends Node implements globalThis.Attr {
 		setExistingAttributeValue(this, nullableString(value));
 	}
 
-	get [kQualifiedName](): string {
+	get _qualifiedName(): string {
 		const slots = this as unknown as Slots<Attr>;
 		return slots.extra.prefix === null
 			? slots.extra.localName
 			: `${slots.extra.prefix}:${slots.extra.localName}`;
 	}
 
-	override [kCloneSingle](this: Slots<Attr>, document: Document): Node {
+	override _cloneSingle(this: Slots<Attr>, document: Document): Node {
 		const slots = this;
 		const copy = new Attr(
 			slots.extra.namespace,
@@ -10044,15 +9820,13 @@ function notifyAttributeChange(element: Element, localName: string): void {
 	styleAttributeChanged(element, localName);
 }
 
-const kAttributeChangeSteps = Symbol("attribute change steps");
-
 function changeAttribute(attribute: Attr, value: string): void {
 	const attributeSlots = _(attribute);
 	const element = attributeSlots.extra.ownerElement as Element;
 	const oldValue = attributeSlots.extra.value;
 	queueAttributeMutationRecord(element, attribute, oldValue);
 	attributeSlots.extra.value = value;
-	_(element)[kAttributeChangeSteps](
+	_(element)._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		oldValue,
 		value,
@@ -10071,7 +9845,7 @@ function appendAttribute(element: Element, attribute: Attr): void {
 	const attributeSlots = _(attribute);
 	attributeSlots.extra.ownerElement = element;
 	attributeSlots.document = elementSlots.document;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		null,
 		attributeSlots.extra.value,
@@ -10092,7 +9866,7 @@ function removeAttributeNode(element: Element, attribute: Attr): void {
 		list.splice(index, 1);
 	}
 	attributeSlots.extra.ownerElement = null;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		attributeSlots.extra.localName,
 		oldValue,
 		null,
@@ -10120,7 +9894,7 @@ function replaceAttribute(
 	newAttributeSlots.extra.ownerElement = element;
 	newAttributeSlots.document = elementSlots.document;
 	oldAttributeSlots.extra.ownerElement = null;
-	elementSlots[kAttributeChangeSteps](
+	elementSlots._attributeChangeSteps(
 		newAttributeSlots.extra.localName,
 		oldAttributeSlots.extra.value,
 		newAttributeSlots.extra.value,
@@ -10162,7 +9936,7 @@ function getAttributeByName(
 		name = toASCIILowercase(name);
 	}
 	for (const attribute of elementSlots.attributeList) {
-		if (attribute[kQualifiedName] === name) {
+		if (attribute._qualifiedName === name) {
 			return objectOf(attribute);
 		}
 	}
@@ -10215,9 +9989,9 @@ function setAttributeNode(element: Element, attribute: Attr): Attr | null {
 
 interface NamedNodeMapSlots extends LiveListSlots {
 	element: Element;
-	[kChangedMembers]: Step<NamedNodeMap[typeof kChangedMembers]>;
-	[kListMembers]: Step<NamedNodeMap[typeof kListMembers]>;
-	[kListNames]: Step<NamedNodeMap[typeof kListNames]>;
+	_changedMembers: Step<NamedNodeMap["_changedMembers"]>;
+	_listMembers: Step<NamedNodeMap["_listMembers"]>;
+	_listNames: Step<NamedNodeMap["_listNames"]>;
 }
 
 interface NamedNodeMap extends LiveList {
@@ -10288,17 +10062,17 @@ class NamedNodeMap implements globalThis.NamedNodeMap {
 	}
 
 	// An element's attributes are not part of the tree's shape.
-	[kChangedMembers](): Node[] {
+	_changedMembers(): Node[] {
 		return [];
 	}
 
-	[kListMembers](this: Slots<NamedNodeMap>): Node[] {
+	_listMembers(this: Slots<NamedNodeMap>): Node[] {
 		return _(this.element).attributeList.map((attribute) =>
 			objectOf(attribute),
 		);
 	}
 
-	[kListNames](this: Slots<NamedNodeMap>, items: Node[]): Map<string, Node> {
+	_listNames(this: Slots<NamedNodeMap>, items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		const slots = this;
 		const html =
@@ -10306,7 +10080,7 @@ class NamedNodeMap implements globalThis.NamedNodeMap {
 			isHTMLDocument(_(slots.element).document);
 		for (const item of items) {
 			const attribute = item as Attr;
-			const name = _(attribute)[kQualifiedName];
+			const name = _(attribute)._qualifiedName;
 			if (html && toASCIILowercase(name) !== name) {
 				continue;
 			}
@@ -10498,8 +10272,8 @@ export interface ElementSlots extends NodeSlots {
 	pseudoElements: Map<string, Element> | null;
 	pseudoHost: Element | null;
 	pseudoName: string | null;
-	[kQualifiedName]: Step<Element[typeof kQualifiedName]>;
-	[kAttributeChangeSteps]: Step<Element[typeof kAttributeChangeSteps]>;
+	_qualifiedName: Step<Element["_qualifiedName"]>;
+	_attributeChangeSteps: Step<Element["_attributeChangeSteps"]>;
 	// Set on the first selectionchange a text control schedules.
 	textSelectionChangeScheduled?: boolean;
 }
@@ -10644,11 +10418,11 @@ export class Element extends Node implements globalThis.Element {
 	get tagName(): string {
 		const slots = _(this);
 		if (slots.namespace !== HTML_NAMESPACE || !isHTMLDocument(slots.document)) {
-			return slots[kQualifiedName];
+			return slots._qualifiedName;
 		}
 		let upper = slots.upperName;
 		if (upper === null) {
-			upper = toASCIIUppercase(slots[kQualifiedName]);
+			upper = toASCIIUppercase(slots._qualifiedName);
 			slots.upperName = upper;
 		}
 		return upper;
@@ -10767,7 +10541,7 @@ export class Element extends Node implements globalThis.Element {
 		return 1;
 	}
 
-	get [kQualifiedName](): string {
+	get _qualifiedName(): string {
 		const slots = this;
 		return slots.prefix === null
 			? slots.localName
@@ -10894,7 +10668,7 @@ export class Element extends Node implements globalThis.Element {
 	}
 
 	getAttributeNames(): string[] {
-		return _(this).attributeList.map((attribute) => attribute[kQualifiedName]);
+		return _(this).attributeList.map((attribute) => attribute._qualifiedName);
 	}
 
 	getAttribute(qualifiedName: string): string | null {
@@ -10966,7 +10740,7 @@ export class Element extends Node implements globalThis.Element {
 			name = toASCIILowercase(name);
 		}
 		for (const attribute of slots.attributeList) {
-			if (attribute[kQualifiedName] === name) {
+			if (attribute._qualifiedName === name) {
 				return true;
 			}
 		}
@@ -11243,7 +11017,7 @@ export class Element extends Node implements globalThis.Element {
 	}
 
 	/** An assigned slottable returns its slot instead of its parent. */
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<Element>,
 		_event: Event,
 	): EventTarget | null {
@@ -11251,7 +11025,7 @@ export class Element extends Node implements globalThis.Element {
 		return slots.assignedSlot ?? objectOf(slots.parent);
 	}
 
-	override [kInsertionSteps](this: Slots<Element>): void {
+	override _insertionSteps(this: Slots<Element>): void {
 		const root = getRoot(ownerOf(this));
 		if (nodeTypeOf(root) === DOCUMENT_NODE) {
 			addToIdMap(root as Document, ownerOf(this));
@@ -11277,7 +11051,7 @@ export class Element extends Node implements globalThis.Element {
 		}
 	}
 
-	override [kRemovingSteps](this: Slots<Element>, oldParent: Node): void {
+	override _removingSteps(this: Slots<Element>, oldParent: Node): void {
 		const root = getRoot(oldParent);
 		if (nodeTypeOf(root) === DOCUMENT_NODE) {
 			removeFromIdMap(root as Document, ownerOf(this));
@@ -11294,7 +11068,7 @@ export class Element extends Node implements globalThis.Element {
 		}
 	}
 
-	[kAttributeChangeSteps](
+	_attributeChangeSteps(
 		this: Slots<Element>,
 		localName: string,
 		oldValue: string | null,
@@ -11373,7 +11147,7 @@ export class Element extends Node implements globalThis.Element {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	override [kCloneSingle](this: Slots<Element>, document: Document): Node {
+	override _cloneSingle(this: Slots<Element>, document: Document): Node {
 		const slots = this;
 		const copy = createElementInternal(
 			document,
@@ -12508,14 +12282,14 @@ export class HTMLElement extends Element {
 	// was showing as, so it closes. It closes silently, because the author
 	// who changed the attribute is not asking to be told about the old
 	// popover.
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLElement, kAttributeChangeSteps).call(
+		superStep(HTMLElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -12536,8 +12310,8 @@ export class HTMLElement extends Element {
 
 	// The top layer holds nothing that is off the tree, and there is no page
 	// for the popover to be above anymore.
-	override [kRemovingSteps](this: Slots<HTMLElement>, oldParent: Node): void {
-		superStep(HTMLElement, kRemovingSteps).call(this, oldParent);
+	override _removingSteps(this: Slots<HTMLElement>, oldParent: Node): void {
+		superStep(HTMLElement, "_removingSteps").call(this, oldParent);
 		if (!isShowingPopover(ownerOf(this))) {
 			return;
 		}
@@ -14598,7 +14372,7 @@ export class ShadowRoot
 
 	// Dispatch leaves a shadow tree through the host, unless the event was
 	// dispatched inside this tree and is not composed.
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<ShadowRoot>,
 		event: Event,
 	): EventTarget | null {
@@ -14614,7 +14388,7 @@ export class ShadowRoot
 		return this.extra.host;
 	}
 
-	override [kCloneSingle](_document: Document): Node {
+	override _cloneSingle(_document: Document): Node {
 		throw domError("NotSupportedError", "A shadow root cannot be cloned");
 	}
 }
@@ -15132,7 +14906,7 @@ class HTMLTemplateElement extends HTMLElement {
 		toggleAttributeOf(this, "shadowrootserializable", Boolean(value));
 	}
 
-	override [kAdoptingSteps](
+	override _adoptingSteps(
 		this: Slots<HTMLTemplateElement>,
 		_oldDocument: Document,
 	): void {
@@ -15143,7 +14917,7 @@ class HTMLTemplateElement extends HTMLElement {
 		}
 	}
 
-	override [kCloningSteps](
+	override _cloningSteps(
 		this: Slots<HTMLTemplateElement>,
 		copy: Node,
 		document: Document,
@@ -16076,14 +15850,14 @@ class HTMLCanvasElement extends HTMLElement {
 		return noMediaPipeline("bitmap");
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLCanvasElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLCanvasElement, kAttributeChangeSteps).call(
+		superStep(HTMLCanvasElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -16286,8 +16060,8 @@ interface HTMLDetailsElementExtra extends NodeExtra {
 
 interface HTMLDetailsElementSlots extends HTMLElementSlots {
 	extra: HTMLDetailsElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLDetailsElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLDetailsElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLDetailsElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLDetailsElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLDetailsElement {
@@ -16306,7 +16080,7 @@ class HTMLDetailsElement extends HTMLElement {
 		slots.extra.content = null;
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLDetailsElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLDetailsElement>): void {
 		if (this.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
 			return;
@@ -16336,7 +16110,7 @@ class HTMLDetailsElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLDetailsElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLDetailsElement>): void {
 		const content = this.extra.content;
 		if (content === null) {
 			return;
@@ -16347,14 +16121,14 @@ class HTMLDetailsElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLDetailsElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLDetailsElement, kAttributeChangeSteps).call(
+		superStep(HTMLDetailsElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -16593,25 +16367,25 @@ class HTMLDialogElement extends HTMLElement {
 
 	// Nothing off the tree can render above the document, and a detached
 	// dialog is no longer modal.
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLDialogElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLDialogElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLDialogElement, "_removingSteps").call(this, oldParent);
 		getTopLayer(this.document).delete(ownerOf(this));
 	}
 
 	// Removing `open` by hand ends a modal dialog's modality too: it leaves
 	// the top layer, and the page behind it is no longer inert (HTML's
 	// dialog attribute change steps).
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLDialogElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLDialogElement, kAttributeChangeSteps).call(
+		superStep(HTMLDialogElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -17137,14 +16911,12 @@ function implicitlySubmit(input: HTMLInputElement): void {
 	}
 }
 
-const kResetControl = Symbol("put a control back to its default");
-
 function resetControl(control: Element): void {
 	editedSinceChange.delete(control);
 	setUserValidity(control, false);
-	const resettable = control as unknown as Record<symbol, () => void>;
-	if (typeof _(resettable)[kResetControl] === "function") {
-		_(resettable)[kResetControl]!();
+	const slots = _(control) as unknown as {_resetControl?: () => void};
+	if (typeof slots._resetControl === "function") {
+		slots._resetControl();
 	} else if (isFormAssociatedCustom(control)) {
 		enqueueCallbackReaction(control, "formResetCallback", []);
 	}
@@ -17230,124 +17002,14 @@ function createEntry(
 	return [key, file];
 }
 
-const kEntryList = Symbol("the entry list");
-
-interface EntryListFormData {
-	[kEntryList]: FormDataEntry[];
-}
-
-/**
- * The entry list a runtime without its own FormData falls back to. Every
- * runtime this engine supports has one, and its storage is what `fetch`
- * reads, so it is the base below whenever it exists.
- */
-class EntryListFormData {
-	constructor() {
-		this[kEntryList] = [];
-	}
-
-	append(name: string, value: string | Blob, filename?: string): void {
-		this[kEntryList].push(createEntry(name, value, filename));
-	}
-
-	delete(name: string): void {
-		const wanted = toScalarValueString(String(name));
-		this[kEntryList] = this[kEntryList].filter(([key]) => key !== wanted);
-	}
-
-	get(name: string): globalThis.FormDataEntryValue | null {
-		const wanted = toScalarValueString(String(name));
-		const found = this[kEntryList].find(([key]) => key === wanted);
-		return found === undefined ? null : found[1];
-	}
-
-	getAll(name: string): globalThis.FormDataEntryValue[] {
-		const wanted = toScalarValueString(String(name));
-		return this[kEntryList]
-			.filter(([key]) => key === wanted).map(([, value]) => value);
-	}
-
-	has(name: string): boolean {
-		const wanted = toScalarValueString(String(name));
-		return this[kEntryList].some(([key]) => key === wanted);
-	}
-
-	set(name: string, value: string | Blob, filename?: string): void {
-		const entry = createEntry(name, value, filename);
-		const entries = this[kEntryList];
-		const at = entries.findIndex(([key]) => key === entry[0]);
-		if (at === -1) {
-			entries.push(entry);
-			return;
-		}
-		entries[at] = entry;
-		this[kEntryList] = entries.filter(
-			(held, index) => index === at || held[0] !== entry[0],
-		);
-	}
-
-	forEach(
-		callbackfn: (
-			value: globalThis.FormDataEntryValue,
-			key: string,
-			parent: any,
-		) => void,
-		thisArg?: any,
-	): void {
-		for (let index = 0; index < this[kEntryList].length; index++) {
-			const [key, value] = this[kEntryList][index];
-			callbackfn.call(thisArg, value, key, this);
-		}
-	}
-
-	entries(): FormDataIterator<[string, globalThis.FormDataEntryValue]> {
-		return this[kEntryList]
-			.map(([key, value]): [string, globalThis.FormDataEntryValue] =>
-				[key, value])[Symbol.iterator]();
-	}
-
-	keys(): FormDataIterator<string> {
-		return this[kEntryList].map(([key]) => key)[Symbol.iterator]();
-	}
-
-	values(): FormDataIterator<globalThis.FormDataEntryValue> {
-		return this[kEntryList].map(
-			([, value]): globalThis.FormDataEntryValue => value,
-		)[Symbol.iterator]();
-	}
-
-	[Symbol.iterator](): FormDataIterator<
-		[string, globalThis.FormDataEntryValue]
-	> {
-		return this.entries();
-	}
-}
-
-const FormDataBase: new () => EntryListFormData =
-	typeof (globalThis as {
-		FormData?: unknown;
-	}).FormData === "function"
-		? (globalThis as unknown as {FormData: new () => EntryListFormData})
-			.FormData
-		: EntryListFormData;
-
-// A runtime stores a file under the filename its caller gave, or, in at
-// least one, under the name the file already had. The wire is right
-// either way; only reading an entry back differs, so the filenames are
-// kept here when the runtime reports the wrong one.
+// A runtime stores a file under the filename its caller gave, or, as Bun
+// does, under the name the file already had. The wire is right either
+// way; only reading an entry back differs, so the filenames are kept here
+// when the runtime reports the wrong one.
 const runtimeKeepsFilenames = ((): boolean => {
-	const Runtime = (globalThis as {FormData?: unknown}).FormData;
-	if (typeof Runtime !== "function") {
-		return true;
-	}
-	try {
-		const probe = new (Runtime as new () => globalThis.FormData)();
-		probe.append("k", new File(["x"], "given"), "wanted");
-		return (probe.get("k") as globalThis.File).name === "wanted";
-	} catch (error) {
-		void error;
-		return true;
-	}
+	const probe = new globalThis.FormData();
+	probe.append("k", new File(["x"], "given"), "wanted");
+	return (probe.get("k") as globalThis.File).name === "wanted";
 })();
 
 // One File per stored blob and name, so reading an entry twice gives one
@@ -17385,7 +17047,7 @@ interface FormData {
 	readonly [internals]: FormDataSlots;
 }
 
-class FormData extends FormDataBase {
+class FormData extends globalThis.FormData {
 	constructor(form?: HTMLFormElement, submitter?: HTMLElement | null) {
 		super();
 		seal(this, new.target, FormData);
@@ -17866,7 +17528,7 @@ function constructEntryList(
 class HTMLFormControlsCollection
 	extends (HTMLCollection as new (
 		...args: ConstructorParameters<typeof HTMLCollection>
-	) => Omit<HTMLCollection, "namedItem" | typeof kListNames>) {
+	) => Omit<HTMLCollection, "namedItem" | "_listNames">) {
 	constructor(compute: () => Element[], owner: Node | null = null) {
 		// The form attribute can associate a control anywhere in the tree, and
 		// what counts as a control depends on its attributes, so the list is
@@ -17894,7 +17556,7 @@ class HTMLFormControlsCollection
 		) as unknown as Element;
 	}
 
-	[kListNames](
+	_listNames(
 		this: Slots<HTMLFormControlsCollection>,
 		items: Node[],
 	): Map<string, Node> {
@@ -18179,8 +17841,8 @@ class HTMLIFrameElement extends HTMLElement {
 		return null;
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLIFrameElement>): void {
-		superStep(HTMLIFrameElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLIFrameElement>): void {
+		superStep(HTMLIFrameElement, "_insertionSteps").call(this);
 		if (!ownerOf(this).isConnected) {
 			return;
 		}
@@ -18197,11 +17859,8 @@ class HTMLIFrameElement extends HTMLElement {
 		}, 0);
 	}
 
-	override [kRemovingSteps](
-		this: Slots<HTMLIFrameElement>,
-		parent: Node,
-	): void {
-		superStep(HTMLIFrameElement, kRemovingSteps).call(this, parent);
+	override _removingSteps(this: Slots<HTMLIFrameElement>, parent: Node): void {
+		superStep(HTMLIFrameElement, "_removingSteps").call(this, parent);
 		const slots = this;
 		slots.extra.contentDocument = null;
 		slots.extra.contentWindow = null;
@@ -18308,7 +17967,7 @@ interface HTMLImageElementExtra extends NodeExtra {
 
 interface HTMLImageElementSlots extends HTMLElementSlots {
 	extra: HTMLImageElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLImageElement[typeof kEnsureUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLImageElement["_ensureUAShadowTree"]>;
 }
 
 interface HTMLImageElement {
@@ -18451,7 +18110,7 @@ class HTMLImageElement extends HTMLElement {
 	// as an inline element would, unless HTML's rendering rules keep it a
 	// box. Its UA shadow tree holds the text, built the first time it can
 	// be needed.
-	[kEnsureUAShadowTree]?(this: Slots<HTMLImageElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLImageElement>): void {
 		const alt = attributeOf(ownerOf(this), "alt") ?? "";
 		const slots = this;
 		const text = slots.extra.altText;
@@ -18473,18 +18132,18 @@ class HTMLImageElement extends HTMLElement {
 		appendChildOf(root, slots.extra.altText as unknown as globalThis.Text);
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLImageElement>): void {
-		superStep(HTMLImageElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLImageElement>): void {
+		superStep(HTMLImageElement, "_insertionSteps").call(this);
 		if (this.extra.imageState.pending) {
 			updateImageData(ownerOf(this));
 		}
 	}
 
-	override [kAdoptingSteps](
+	override _adoptingSteps(
 		this: Slots<HTMLImageElement>,
 		oldDocument: Document,
 	): void {
-		superStep(HTMLImageElement, kAdoptingSteps).call(this, oldDocument);
+		superStep(HTMLImageElement, "_adoptingSteps").call(this, oldDocument);
 		// The fragment parser builds a <template>'s contents in the
 		// template's document and then moves them. A load that started
 		// there stops, and waits for a document with a window.
@@ -18496,14 +18155,14 @@ class HTMLImageElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLImageElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLImageElement, kAttributeChangeSteps).call(
+		superStep(HTMLImageElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -18789,15 +18448,15 @@ export interface HTMLInputElementExtra extends NodeExtra {
 
 export interface HTMLInputElementSlots extends HTMLElementSlots {
 	extra: HTMLInputElementExtra;
-	[kUAValue]: Step<HTMLInputElement[typeof kUAValue]>;
-	[kUAValueText]: Step<HTMLInputElement[typeof kUAValueText]>;
-	[kSetUAValue]: Step<HTMLInputElement[typeof kSetUAValue]>;
-	[kUASelection]: Step<HTMLInputElement[typeof kUASelection]>;
-	[kSetUASelection]: Step<HTMLInputElement[typeof kSetUASelection]>;
-	[kResetControl]: Step<HTMLInputElement[typeof kResetControl]>;
-	[kUASelectionRange]: Step<HTMLInputElement[typeof kUASelectionRange]>;
-	[kEnsureUAShadowTree]: Step<HTMLInputElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLInputElement[typeof kSyncUAShadowTree]>;
+	_uaValue: Step<HTMLInputElement["_uaValue"]>;
+	_uaValueText: Step<HTMLInputElement["_uaValueText"]>;
+	_setUAValue: Step<HTMLInputElement["_setUAValue"]>;
+	_uaSelection: Step<HTMLInputElement["_uaSelection"]>;
+	_setUASelection: Step<HTMLInputElement["_setUASelection"]>;
+	_resetControl: Step<HTMLInputElement["_resetControl"]>;
+	_uaSelectionRange: Step<HTMLInputElement["_uaSelectionRange"]>;
+	_ensureUAShadowTree: Step<HTMLInputElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLInputElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLInputElement {
@@ -18967,7 +18626,7 @@ export class HTMLInputElement extends HTMLElement {
 				return;
 			}
 
-			const value = slots[kUAValue];
+			const value = slots._uaValue;
 			const {start, end, direction} = getSelectionRecord(this)!;
 			const anchor = direction === "backward" ? end : start;
 			const caret = direction === "backward" ? start : end;
@@ -19303,14 +18962,14 @@ export class HTMLInputElement extends HTMLElement {
 					: type === "week" ? formatWeekString(value) : iso.slice(11, 19);
 	}
 
-	get [kUAValue](): string {
+	get _uaValue(): string {
 		const slots = this as unknown as Slots<HTMLInputElement>;
 		return getInputValueMode(ownerOf(slots).type) === "value"
 			? slots.extra.value
 			: "";
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLInputElement>).extra.valueText;
 	}
 
@@ -19355,7 +19014,7 @@ export class HTMLInputElement extends HTMLElement {
 			throw new TypeError("setSelectionRange needs a start and an end");
 		}
 		requireSelectable(this);
-		_(this)[kSetUASelection]!(start ?? 0, end ?? 0, direction);
+		_(this)._setUASelection!(start ?? 0, end ?? 0, direction);
 	}
 
 	setRangeText(replacement: string): void;
@@ -19399,7 +19058,7 @@ export class HTMLInputElement extends HTMLElement {
 	// collapse it to the end. A control with no value of its own (a file
 	// input's filename list) has nothing a keystroke can write, as in a
 	// browser, where its UI accepts no typing.
-	[kSetUAValue]?(this: Slots<HTMLInputElement>, value: string): void {
+	_setUAValue?(this: Slots<HTMLInputElement>, value: string): void {
 		if (getInputValueMode(ownerOf(this).type) !== "value") {
 			return;
 		}
@@ -19421,7 +19080,7 @@ export class HTMLInputElement extends HTMLElement {
 	// throw for the rest. But the caret in an email or number text control is
 	// real, and the UA shadow tree behind the control edits through it. This is
 	// the same algorithm without the type check an author gets.
-	[kUASelection]?(this: Slots<HTMLInputElement>): {
+	_uaSelection?(this: Slots<HTMLInputElement>): {
 		start: number;
 		end: number;
 		direction: string;
@@ -19434,7 +19093,7 @@ export class HTMLInputElement extends HTMLElement {
 		};
 	}
 
-	[kSetUASelection]?(
+	_setUASelection?(
 		this: Slots<HTMLInputElement>,
 		start: number,
 		end: number,
@@ -19455,14 +19114,14 @@ export class HTMLInputElement extends HTMLElement {
 		);
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLInputElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLInputElement, kAttributeChangeSteps).call(
+		superStep(HTMLInputElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -19486,7 +19145,7 @@ export class HTMLInputElement extends HTMLElement {
 		}
 	}
 
-	override [kCloningSteps](this: Slots<HTMLInputElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLInputElement>, copy: Node): void {
 		const clone = copy as HTMLInputElement;
 		const slots = this;
 		const cloneSlots = _(clone);
@@ -19496,7 +19155,7 @@ export class HTMLInputElement extends HTMLElement {
 		cloneSlots.extra.dirtyChecked = slots.extra.dirtyChecked;
 	}
 
-	[kResetControl]?(this: Slots<HTMLInputElement>): void {
+	_resetControl?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		slots.extra.value = sanitizeInputValue(
 			ownerOf(this),
@@ -19509,11 +19168,11 @@ export class HTMLInputElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kUASelectionRange]?(this: Slots<HTMLInputElement>): globalThis.Range | null {
+	_uaSelectionRange?(this: Slots<HTMLInputElement>): globalThis.Range | null {
 		return getTextSelectionRange(ownerOf(this), this.extra.valueText);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLInputElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			// A control that left the tree and came back keeps its tree. Only
@@ -19535,7 +19194,7 @@ export class HTMLInputElement extends HTMLElement {
 	// whether it is checked, which is state like any other: it is written
 	// here, where the state changes, so the frame that shows it is scheduled
 	// by the same mutation as every other change.
-	[kSyncUAShadowTree]?(this: Slots<HTMLInputElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLInputElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -19570,7 +19229,7 @@ export class HTMLInputElement extends HTMLElement {
 		if (!slots.extra.valueText) {
 			return;
 		}
-		const value = slots[kUAValue];
+		const value = slots._uaValue;
 		const placeholder = attributeOf(ownerOf(this), "placeholder") ?? "";
 		// A password puts one bullet per code unit into the shadow tree, never
 		// the real value. So what lays out, paints and can be selected is only
@@ -19628,7 +19287,7 @@ function insertTextControlText(
 	if (!text) {
 		return;
 	}
-	const value = _(textControl)[kUAValue];
+	const value = _(textControl)._uaValue;
 	const {start, end} = getSelectionRecord(textControl)!;
 	const next = value.slice(0, start) + text + value.slice(end);
 	if (textControl.type === "number" && !isFloatPrefix(next)) {
@@ -19882,7 +19541,7 @@ function getSteppedValue(
 	const min = parseFloatingPoint(attributeOf(input, "min")?.trim() ?? "");
 	const max = parseFloatingPoint(attributeOf(input, "max")?.trim() ?? "");
 	const inputSlots = _(input);
-	const current = parseFloatingPoint(inputSlots[kUAValue]) ?? 0;
+	const current = parseFloatingPoint(inputSlots._uaValue) ?? 0;
 	const base = min ?? 0;
 
 	// The offset in grid units, rounded enough that a value the grid itself
@@ -19904,7 +19563,7 @@ function getSteppedValue(
 	const places = Math.max(
 		getDecimalPlaces(stepAttribute),
 		getDecimalPlaces(attributeOf(input, "min")),
-		getDecimalPlaces(inputSlots[kUAValue]),
+		getDecimalPlaces(inputSlots._uaValue),
 	);
 	return String(Number(next.toFixed(Math.min(places, 20))));
 }
@@ -20753,8 +20412,8 @@ class HTMLMetaElement extends HTMLElement {
 
 	// HTML §4.2.5.3: the Content-Security-Policy pragma runs when the
 	// element is inserted into a document as a child of its head.
-	override [kInsertionSteps](this: Slots<HTMLMetaElement>): void {
-		superStep(HTMLMetaElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLMetaElement>): void {
+		superStep(HTMLMetaElement, "_insertionSteps").call(this);
 		const content = attributeOf(ownerOf(this), "content");
 		if (
 			ownerOf(this).isConnected &&
@@ -20836,8 +20495,8 @@ interface HTMLMeterElementExtra extends NodeExtra {
 
 interface HTMLMeterElementSlots extends HTMLElementSlots {
 	extra: HTMLMeterElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLMeterElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLMeterElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLMeterElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLMeterElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLMeterElement {
@@ -20918,7 +20577,7 @@ class HTMLMeterElement extends HTMLElement {
 		return getLabels(this);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLMeterElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLMeterElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -20933,7 +20592,7 @@ class HTMLMeterElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLMeterElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLMeterElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -20949,14 +20608,14 @@ class HTMLMeterElement extends HTMLElement {
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLMeterElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLMeterElement, kAttributeChangeSteps).call(
+		superStep(HTMLMeterElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21087,8 +20746,6 @@ class HTMLOptGroupElement extends HTMLElement {
 	declare label: string;
 }
 
-const kSelectedness = Symbol("an option's selectedness");
-
 interface HTMLOptionElementExtra extends NodeExtra {
 	selectednessValue: boolean;
 	optionDirty: boolean;
@@ -21096,8 +20753,7 @@ interface HTMLOptionElementExtra extends NodeExtra {
 
 interface HTMLOptionElementSlots extends HTMLElementSlots {
 	extra: HTMLOptionElementExtra;
-	[kSelectedness]: Step<HTMLOptionElement[typeof kSelectedness]>;
-	[kSelectedness]: Step<HTMLOptionElement[typeof kSelectedness]>;
+	_selectedness: Step<HTMLOptionElement["_selectedness"]>;
 }
 
 interface HTMLOptionElement {
@@ -21160,21 +20816,21 @@ class HTMLOptionElement extends HTMLElement {
 		if (select !== null) {
 			askForAReset(select);
 		}
-		return _(this)[kSelectedness];
+		return _(this)._selectedness;
 	}
 
 	set selected(value: boolean) {
 		const slots = _(this);
 		slots.extra.optionDirty = true;
-		slots[kSelectedness] = Boolean(value);
+		slots._selectedness = Boolean(value);
 		const select = getSelect(this);
 		if (select === null) {
 			return;
 		}
-		if (slots[kSelectedness] && !hasAttributeOf(select, "multiple")) {
+		if (slots._selectedness && !hasAttributeOf(select, "multiple")) {
 			for (const option of getOptions(select)) {
 				if (option !== this) {
-					_(option)[kSelectedness] = false;
+					_(option)._selectedness = false;
 				}
 			}
 		}
@@ -21185,13 +20841,13 @@ class HTMLOptionElement extends HTMLElement {
 	// Selectedness is not an attribute and not part of the tree. The one
 	// live list that depends on it is the select's `selectedOptions`, which
 	// is notified here.
-	get [kSelectedness](): boolean {
+	get _selectedness(): boolean {
 		return (this as unknown as Slots<
 			HTMLOptionElement
 		>).extra.selectednessValue;
 	}
 
-	set [kSelectedness](value: boolean) {
+	set _selectedness(value: boolean) {
 		const slots = this as unknown as Slots<HTMLOptionElement>;
 		if (slots.extra.selectednessValue === value) {
 			return;
@@ -21200,18 +20856,18 @@ class HTMLOptionElement extends HTMLElement {
 		const select = getSelect(ownerOf(slots));
 		const selected = select === null ? null : _(select).extra.selectedOptions;
 		if (selected !== null) {
-			_(selected)[kSync]();
+			_(selected)._sync();
 		}
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLOptionElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLOptionElement, kAttributeChangeSteps).call(
+		superStep(HTMLOptionElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21222,7 +20878,7 @@ class HTMLOptionElement extends HTMLElement {
 		if (
 			namespace === null && localName === "selected" && !slots.extra.optionDirty
 		) {
-			slots[kSelectedness] = value !== null;
+			slots._selectedness = value !== null;
 		}
 		const select = getSelect(ownerOf(this));
 		if (select !== null) {
@@ -21230,11 +20886,11 @@ class HTMLOptionElement extends HTMLElement {
 		}
 	}
 
-	override [kCloningSteps](this: Slots<HTMLOptionElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLOptionElement>, copy: Node): void {
 		const clone = copy as HTMLOptionElement;
 		const slots = this;
 		const cloneSlots = _(clone);
-		cloneSlots[kSelectedness] = slots[kSelectedness];
+		cloneSlots._selectedness = slots._selectedness;
 		cloneSlots.extra.optionDirty = slots.extra.optionDirty;
 	}
 }
@@ -21378,7 +21034,7 @@ interface HTMLOutputElementExtra extends NodeExtra {
 
 interface HTMLOutputElementSlots extends HTMLElementSlots {
 	extra: HTMLOutputElementExtra;
-	[kResetControl]: Step<HTMLOutputElement[typeof kResetControl]>;
+	_resetControl: Step<HTMLOutputElement["_resetControl"]>;
 }
 
 interface HTMLOutputElement {
@@ -21461,7 +21117,7 @@ class HTMLOutputElement extends HTMLElement {
 		setCustomValidity(this, error);
 	}
 
-	[kResetControl]?(this: Slots<HTMLOutputElement>): void {
+	_resetControl?(this: Slots<HTMLOutputElement>): void {
 		const slots = this;
 		if (slots.extra.dirty) {
 			setDescendantText(ownerOf(this), slots.extra.stored);
@@ -21500,8 +21156,8 @@ interface HTMLProgressElementExtra extends NodeExtra {
 
 interface HTMLProgressElementSlots extends HTMLElementSlots {
 	extra: HTMLProgressElementExtra;
-	[kEnsureUAShadowTree]: Step<HTMLProgressElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLProgressElement[typeof kSyncUAShadowTree]>;
+	_ensureUAShadowTree: Step<HTMLProgressElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLProgressElement["_syncUAShadowTree"]>;
 }
 
 interface HTMLProgressElement {
@@ -21545,7 +21201,7 @@ class HTMLProgressElement extends HTMLElement {
 		return getLabels(this);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLProgressElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLProgressElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -21560,7 +21216,7 @@ class HTMLProgressElement extends HTMLElement {
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLProgressElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLProgressElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
@@ -21569,14 +21225,14 @@ class HTMLProgressElement extends HTMLElement {
 		setGaugeFill(slots.extra.bar!, position < 0 ? null : position);
 	}
 
-	override [kAttributeChangeSteps](
+	override _attributeChangeSteps(
 		this: Slots<HTMLProgressElement>,
 		localName: string,
 		oldValue: string | null,
 		value: string | null,
 		namespace: string | null,
 	): void {
-		superStep(HTMLProgressElement, kAttributeChangeSteps).call(
+		superStep(HTMLProgressElement, "_attributeChangeSteps").call(
 			this,
 			localName,
 			oldValue,
@@ -21664,11 +21320,11 @@ export interface HTMLSelectElementExtra extends NodeExtra {
 
 export interface HTMLSelectElementSlots extends HTMLElementSlots {
 	extra: HTMLSelectElementExtra;
-	[kUAValueText]: Step<HTMLSelectElement[typeof kUAValueText]>;
-	[kUASelection]: Step<HTMLSelectElement[typeof kUASelection]>;
-	[kResetControl]: Step<HTMLSelectElement[typeof kResetControl]>;
-	[kEnsureUAShadowTree]: Step<HTMLSelectElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLSelectElement[typeof kSyncUAShadowTree]>;
+	_uaValueText: Step<HTMLSelectElement["_uaValueText"]>;
+	_uaSelection: Step<HTMLSelectElement["_uaSelection"]>;
+	_resetControl: Step<HTMLSelectElement["_resetControl"]>;
+	_ensureUAShadowTree: Step<HTMLSelectElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLSelectElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLSelectElement {
@@ -21851,7 +21507,7 @@ export class HTMLSelectElement extends HTMLElement {
 		if (selected === null) {
 			selected = live(
 				new HTMLCollection(() =>
-					getOptions(this).filter((option) => _(option)[kSelectedness]), this),
+					getOptions(this).filter((option) => _(option)._selectedness), this),
 			) as HTMLCollectionOf<HTMLOptionElement>;
 			slots.extra.selectedOptions = selected;
 		}
@@ -21861,18 +21517,18 @@ export class HTMLSelectElement extends HTMLElement {
 
 	get selectedIndex(): number {
 		askForAReset(this);
-		return getOptions(this).findIndex((option) => _(option)[kSelectedness]);
+		return getOptions(this).findIndex((option) => _(option)._selectedness);
 	}
 
 	set selectedIndex(value: number) {
 		const index = toLong(value);
 		const options = getOptions(this);
 		for (let at = 0; at < options.length; at++) {
-			_(options[at])[kSelectedness] = false;
+			_(options[at])._selectedness = false;
 			_(options[at]).extra.optionDirty = true;
 		}
 		if (index >= 0 && index < options.length) {
-			_(options[index])[kSelectedness] = true;
+			_(options[index])._selectedness = true;
 		}
 		syncUAShadowTree(this);
 	}
@@ -21880,7 +21536,7 @@ export class HTMLSelectElement extends HTMLElement {
 	get value(): string {
 		askForAReset(this);
 		for (const option of getOptions(this)) {
-			if (_(option)[kSelectedness]) {
+			if (_(option)._selectedness) {
 				return option.value;
 			}
 		}
@@ -21893,11 +21549,11 @@ export class HTMLSelectElement extends HTMLElement {
 		let found = false;
 		for (const option of options) {
 			if (!found && option.value === wanted) {
-				_(option)[kSelectedness] = true;
+				_(option)._selectedness = true;
 				_(option).extra.optionDirty = true;
 				found = true;
 			} else {
-				_(option)[kSelectedness] = false;
+				_(option)._selectedness = false;
 			}
 		}
 		syncUAShadowTree(this);
@@ -21915,7 +21571,7 @@ export class HTMLSelectElement extends HTMLElement {
 		return getValidationMessage(this);
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLSelectElement>).extra.valueText;
 	}
 
@@ -21982,20 +21638,20 @@ export class HTMLSelectElement extends HTMLElement {
 	// A select's selection record is always collapsed at the label's start, so
 	// the caret placement path can treat a select like a text control. The
 	// caret is the focus of the selection.
-	[kUASelection]?(): {start: number; end: number; direction: string} {
+	_uaSelection?(): {start: number; end: number; direction: string} {
 		return {start: 0, end: 0, direction: "none"};
 	}
 
-	[kResetControl]?(this: Slots<HTMLSelectElement>): void {
+	_resetControl?(this: Slots<HTMLSelectElement>): void {
 		for (const option of getOptions(ownerOf(this))) {
-			_(option)[kSelectedness] = hasAttributeOf(option, "selected");
+			_(option)._selectedness = hasAttributeOf(option, "selected");
 			_(option).extra.optionDirty = false;
 		}
 		askForAReset(ownerOf(this));
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLSelectElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLSelectElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			// Removed, the document's observer let go of it.
@@ -22033,11 +21689,11 @@ export class HTMLSelectElement extends HTMLElement {
 	// The dropdown is transient interaction state. Leaving the tree ends the
 	// interaction, the same as losing focus does. Removal also causes a focus
 	// loss, since focus cannot rest on an element off the tree.
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLSelectElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLSelectElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLSelectElement, "_removingSteps").call(this, oldParent);
 		const slots = this;
 		if (slots.extra.pickerHighlight !== null) {
 			slots.extra.pickerHighlight = null;
@@ -22045,7 +21701,7 @@ export class HTMLSelectElement extends HTMLElement {
 		}
 	}
 
-	[kSyncUAShadowTree]?(this: Slots<HTMLSelectElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLSelectElement>): void {
 		const slots = this;
 		const picker = slots.extra.picker;
 		if (!slots.extra.upgraded || picker === null) {
@@ -22316,7 +21972,7 @@ function getDisplaySize(select: HTMLSelectElement): number {
 // more than one option selected keeps only the last.
 function askForAReset(select: HTMLSelectElement): void {
 	const options = getOptions(select);
-	const selected = options.filter((option) => _(option)[kSelectedness]);
+	const selected = options.filter((option) => _(option)._selectedness);
 	if (
 		!hasAttributeOf(select, "multiple") &&
 		getDisplaySize(select) === 1 &&
@@ -22324,13 +21980,13 @@ function askForAReset(select: HTMLSelectElement): void {
 	) {
 		const first = options.find((option) => !isActuallyDisabled(option));
 		if (first !== undefined) {
-			_(first)[kSelectedness] = true;
+			_(first)._selectedness = true;
 		}
 		return;
 	}
 	if (selected.length >= 2 && !hasAttributeOf(select, "multiple")) {
 		for (let index = 0; index < selected.length - 1; index++) {
-			_(selected[index])[kSelectedness] = false;
+			_(selected[index])._selectedness = false;
 		}
 	}
 }
@@ -22372,18 +22028,18 @@ export class HTMLStyleElement extends HTMLElement {
 		void _value;
 	}
 
-	override [kInsertionSteps](this: Slots<HTMLStyleElement>): void {
-		superStep(HTMLStyleElement, kInsertionSteps).call(this);
+	override _insertionSteps(this: Slots<HTMLStyleElement>): void {
+		superStep(HTMLStyleElement, "_insertionSteps").call(this);
 		const slots = this;
 		_(slots.document).extra.styleElements =
 			_(slots.document).extra.styleElements + 1;
 	}
 
-	override [kRemovingSteps](
+	override _removingSteps(
 		this: Slots<HTMLStyleElement>,
 		oldParent: Node,
 	): void {
-		superStep(HTMLStyleElement, kRemovingSteps).call(this, oldParent);
+		superStep(HTMLStyleElement, "_removingSteps").call(this, oldParent);
 		const slots = this;
 		_(slots.document).extra.styleElements =
 			_(slots.document).extra.styleElements - 1;
@@ -22945,15 +22601,15 @@ export interface HTMLTextAreaElementExtra extends NodeExtra {
 
 export interface HTMLTextAreaElementSlots extends HTMLElementSlots {
 	extra: HTMLTextAreaElementExtra;
-	[kUAValue]: Step<HTMLTextAreaElement[typeof kUAValue]>;
-	[kUAValueText]: Step<HTMLTextAreaElement[typeof kUAValueText]>;
-	[kSetUAValue]: Step<HTMLTextAreaElement[typeof kSetUAValue]>;
-	[kUASelection]: Step<HTMLTextAreaElement[typeof kUASelection]>;
-	[kSetUASelection]: Step<HTMLTextAreaElement[typeof kSetUASelection]>;
-	[kResetControl]: Step<HTMLTextAreaElement[typeof kResetControl]>;
-	[kUASelectionRange]: Step<HTMLTextAreaElement[typeof kUASelectionRange]>;
-	[kEnsureUAShadowTree]: Step<HTMLTextAreaElement[typeof kEnsureUAShadowTree]>;
-	[kSyncUAShadowTree]: Step<HTMLTextAreaElement[typeof kSyncUAShadowTree]>;
+	_uaValue: Step<HTMLTextAreaElement["_uaValue"]>;
+	_uaValueText: Step<HTMLTextAreaElement["_uaValueText"]>;
+	_setUAValue: Step<HTMLTextAreaElement["_setUAValue"]>;
+	_uaSelection: Step<HTMLTextAreaElement["_uaSelection"]>;
+	_setUASelection: Step<HTMLTextAreaElement["_setUASelection"]>;
+	_resetControl: Step<HTMLTextAreaElement["_resetControl"]>;
+	_uaSelectionRange: Step<HTMLTextAreaElement["_uaSelectionRange"]>;
+	_ensureUAShadowTree: Step<HTMLTextAreaElement["_ensureUAShadowTree"]>;
+	_syncUAShadowTree: Step<HTMLTextAreaElement["_syncUAShadowTree"]>;
 }
 
 export interface HTMLTextAreaElement {
@@ -23021,7 +22677,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 				slots.extra.goalColumn = null;
 			}
 
-			const value = slots[kUAValue];
+			const value = slots._uaValue;
 			const {start, end, direction} = getSelectionRecord(this)!;
 			const backward = direction === "backward";
 			const caret = backward ? start : end;
@@ -23114,13 +22770,13 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	get value(): string {
-		return _(this)[kUAValue];
+		return _(this)._uaValue;
 	}
 
 	set value(value: string) {
 		editedSinceChange.delete(this);
 		const slots = _(this);
-		const previous = slots[kUAValue];
+		const previous = slots._uaValue;
 		slots.extra.value = normalizeNewlines(value === null ? "" : String(value));
 		slots.extra.dirty = true;
 		if (previous !== slots.extra.value) {
@@ -23187,14 +22843,14 @@ export class HTMLTextAreaElement extends HTMLElement {
 		return getValidationMessage(this);
 	}
 
-	get [kUAValue](): string {
+	get _uaValue(): string {
 		const slots = this as unknown as Slots<HTMLTextAreaElement>;
 		return slots.extra.dirty
 			? slots.extra.value
 			: normalizeNewlines(getDescendantText(ownerOf(slots)));
 	}
 
-	get [kUAValueText](): globalThis.Text | null {
+	get _uaValueText(): globalThis.Text | null {
 		return (this as unknown as Slots<HTMLTextAreaElement>).extra.valueText;
 	}
 
@@ -23225,7 +22881,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		if (arguments.length < 2) {
 			throw new TypeError("setSelectionRange needs a start and an end");
 		}
-		_(this)[kSetUASelection]!(start ?? 0, end ?? 0, direction);
+		_(this)._setUASelection!(start ?? 0, end ?? 0, direction);
 	}
 
 	setRangeText(replacement: string): void;
@@ -23265,7 +22921,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 
 	// A user edit: sets the raw value and the dirty value flag, and leaves
 	// the selection to the edit that made it.
-	[kSetUAValue]?(this: Slots<HTMLTextAreaElement>, value: string): void {
+	_setUAValue?(this: Slots<HTMLTextAreaElement>, value: string): void {
 		const slots = this;
 		slots.extra.value = normalizeNewlines(value);
 		slots.extra.dirty = true;
@@ -23273,7 +22929,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	// A textarea's selection is always its own. See the input's version.
-	[kUASelection]?(this: Slots<HTMLTextAreaElement>): {
+	_uaSelection?(this: Slots<HTMLTextAreaElement>): {
 		start: number;
 		end: number;
 		direction: string;
@@ -23286,7 +22942,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		};
 	}
 
-	[kSetUASelection]?(
+	_setUASelection?(
 		this: Slots<HTMLTextAreaElement>,
 		start: number,
 		end: number,
@@ -23298,7 +22954,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 			toUnsignedLong(start),
 			toUnsignedLong(end),
 			direction,
-			slots[kUAValue].length,
+			slots._uaValue.length,
 			(selection) => {
 				slots.extra.selectionStart = selection[0];
 				slots.extra.selectionEnd = selection[1];
@@ -23307,7 +22963,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		);
 	}
 
-	override [kCloningSteps](this: Slots<HTMLTextAreaElement>, copy: Node): void {
+	override _cloningSteps(this: Slots<HTMLTextAreaElement>, copy: Node): void {
 		const clone = copy as HTMLTextAreaElement;
 		const slots = this;
 		const cloneSlots = _(clone);
@@ -23315,20 +22971,20 @@ export class HTMLTextAreaElement extends HTMLElement {
 		cloneSlots.extra.dirty = slots.extra.dirty;
 	}
 
-	[kResetControl]?(this: Slots<HTMLTextAreaElement>): void {
+	_resetControl?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		slots.extra.value = "";
 		slots.extra.dirty = false;
 		syncUAShadowTree(ownerOf(this));
 	}
 
-	[kUASelectionRange]?(
+	_uaSelectionRange?(
 		this: Slots<HTMLTextAreaElement>,
 	): globalThis.Range | null {
 		return getTextSelectionRange(ownerOf(this), this.extra.valueText);
 	}
 
-	[kEnsureUAShadowTree]?(this: Slots<HTMLTextAreaElement>): void {
+	_ensureUAShadowTree?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		if (slots.extra.upgraded) {
 			syncUAShadowTree(ownerOf(this));
@@ -23359,13 +23015,13 @@ export class HTMLTextAreaElement extends HTMLElement {
 
 	// Placeholder visibility is real CSS (an inline display:none), not
 	// painter logic, so the normal pipeline never sees a hidden placeholder.
-	[kSyncUAShadowTree]?(this: Slots<HTMLTextAreaElement>): void {
+	_syncUAShadowTree?(this: Slots<HTMLTextAreaElement>): void {
 		const slots = this;
 		if (!slots.extra.upgraded) {
 			return;
 		}
 		const attached = getAttachedDocument(ownerOf(this))!;
-		const value = slots[kUAValue];
+		const value = slots._uaValue;
 		const placeholder = attributeOf(ownerOf(this), "placeholder") ?? "";
 		let changed = false;
 		if (slots.extra.valueText!.data !== value) {
@@ -24958,11 +24614,9 @@ function noValidityFlags(): ValidityFlags {
 	};
 }
 
-const kValidityFlags = Symbol("validity flags");
-
 interface ValidityStateSlots {
 	flags: () => ValidityFlags;
-	[kValidityFlags]: Step<ValidityState[typeof kValidityFlags]>;
+	_validityFlags: Step<ValidityState["_validityFlags"]>;
 }
 
 interface ValidityState {
@@ -24993,7 +24647,7 @@ class ValidityState {
 		return !VALIDITY_FLAG_NAMES.some((name) => flags[name]);
 	}
 
-	get [kValidityFlags](): ValidityFlags {
+	get _validityFlags(): ValidityFlags {
 		return (this as unknown as Slots<ValidityState>).flags();
 	}
 }
@@ -25003,7 +24657,7 @@ declareSealedRoot(ValidityState);
 for (const name of VALIDITY_FLAG_NAMES) {
 	Object.defineProperty(ValidityState.prototype, name, {
 		get(this: ValidityState): boolean {
-			return _(this)[kValidityFlags][name];
+			return _(this)._validityFlags[name];
 		},
 		enumerable: true,
 		configurable: true,
@@ -25899,7 +25553,7 @@ function collectSelectValidity(
 		return;
 	}
 	const options = getOptions(select);
-	const selected = options.filter((option) => _(option)[kSelectedness]);
+	const selected = options.filter((option) => _(option)._selectedness);
 	if (selected.length === 0) {
 		flags.valueMissing = true;
 		return;
@@ -26606,10 +26260,6 @@ interface ContentBox {
 	left: number;
 }
 
-// The observers' measuring hook, an internal step, which author code
-// must never see on an observer it holds.
-const kMeasure = Symbol("measure");
-
 // Keyed by document, not by a registry object, because the document is
 // what an observer can reach from the target it was given. That is why
 // `new ResizeObserver(callback)` needs only its callback.
@@ -26661,7 +26311,7 @@ interface ObserverSlots<TState, TEntry, TOptions> {
 	>;
 	// One entry per document the observer has a target in.
 	homes: Set<object>;
-	[kMeasure](
+	_measure(
 		target: globalThis.Element,
 		last: TState | null,
 		layout: Layout,
@@ -26737,7 +26387,7 @@ function checkObserver<TState, TEntry, TOptions>(
 ): void {
 	const entries: TEntry[] = [];
 	for (const [target, observation] of _(observer).targets) {
-		const result = _(observer)[kMeasure](
+		const result = _(observer)._measure(
 			target,
 			observation.last,
 			layout,
@@ -26793,7 +26443,7 @@ interface ResizeObserverSlots
 		ResizeObserverEntry,
 		ResizeObserverOptions
 	> {
-	[kMeasure]: Step<ResizeObserver[typeof kMeasure]>;
+	_measure: Step<ResizeObserver["_measure"]>;
 }
 
 interface ResizeObserver
@@ -26837,7 +26487,7 @@ class ResizeObserver {
 		disconnectObserver(this as unknown as AnyObserver);
 	}
 
-	[kMeasure](
+	_measure(
 		target: globalThis.Element,
 		last: ResizeSize | null,
 		layout: Layout,
@@ -26980,7 +26630,7 @@ function checkObserverMargin(margin: string, what: string): string {
 interface IntersectionObserverSlots
 	extends ObserverSlots<number, IntersectionObserverEntry, void> {
 	intersectionRoot: globalThis.Element | globalThis.Document | null;
-	[kMeasure]: Step<IntersectionObserver[typeof kMeasure]>;
+	_measure: Step<IntersectionObserver["_measure"]>;
 }
 
 interface IntersectionObserver {
@@ -27041,7 +26691,7 @@ class IntersectionObserver {
 		return [];
 	}
 
-	[kMeasure](
+	_measure(
 		this: Slots<IntersectionObserver>,
 		target: globalThis.Element,
 		last: number | null,
@@ -28682,7 +28332,7 @@ export class Document extends Node implements globalThis.Document {
 
 	// A document's parent in the event path is its window, for every event
 	// but load.
-	override [kGetTheParent](
+	override _getTheParent(
 		this: Slots<Document>,
 		event: Event,
 	): EventTarget | null {
@@ -28692,7 +28342,7 @@ export class Document extends Node implements globalThis.Document {
 		return this.extra.defaultView as EventTarget | null;
 	}
 
-	override [kCloneSingle](this: Slots<Document>, _document: Document): Node {
+	override _cloneSingle(this: Slots<Document>, _document: Document): Node {
 		const copy = new Document();
 		copyDocumentState(ownerOf(this), copy);
 		return copy;
@@ -28831,9 +28481,9 @@ function isAllNamed(element: Element, name: string): boolean {
 // also falsy and reports its typeof as "undefined", which no JavaScript
 // object can do, so here it is an ordinary collection.
 interface HTMLAllCollectionSlots extends LiveListSlots {
-	[kListMembers]: Step<HTMLAllCollection[typeof kListMembers]>;
-	[kListNames]: Step<HTMLAllCollection[typeof kListNames]>;
-	[kAttributeSync]: Step<HTMLAllCollection[typeof kAttributeSync]>;
+	_listMembers: Step<HTMLAllCollection["_listMembers"]>;
+	_listNames: Step<HTMLAllCollection["_listNames"]>;
+	_attributeSync: Step<HTMLAllCollection["_attributeSync"]>;
 }
 
 interface HTMLAllCollection extends LiveList {
@@ -28900,11 +28550,11 @@ class HTMLAllCollection {
 		);
 	}
 
-	[kListMembers](this: Slots<HTMLAllCollection>): Node[] {
+	_listMembers(this: Slots<HTMLAllCollection>): Node[] {
 		return getDescendantElements(this.owner as Document, []);
 	}
 
-	[kListNames](items: Node[]): Map<string, Node> {
+	_listNames(items: Node[]): Map<string, Node> {
 		const named = new Map<string, Node>();
 		for (const item of items) {
 			const element = item as Element;
@@ -28926,13 +28576,13 @@ class HTMLAllCollection {
 	}
 
 	// An id or name moves the named properties without moving a member.
-	[kAttributeSync](
+	_attributeSync(
 		this: Slots<HTMLAllCollection>,
 		element: Element,
 		localName: string,
 	): void {
 		if (localName !== "id" && localName !== "name") {
-			LiveList.prototype[kAttributeSync].call(this, element, localName);
+			LiveList.prototype._attributeSync.call(this, element, localName);
 			return;
 		}
 		if (this.exact) {
@@ -29109,7 +28759,7 @@ interface XMLDocument {
 }
 
 class XMLDocument extends Document {
-	override [kCloneSingle](this: Slots<XMLDocument>, _document: Document): Node {
+	override _cloneSingle(this: Slots<XMLDocument>, _document: Document): Node {
 		const copy = new XMLDocument();
 		copyDocumentState(ownerOf(this), copy);
 		return copy;
@@ -30062,12 +29712,12 @@ function cloneNode(
 ): Node {
 	const nodeSlots = _(node);
 	const target = document ?? nodeSlots.document;
-	const copy = nodeSlots[kCloneSingle](target);
+	const copy = nodeSlots._cloneSingle(target);
 	const copySlots = _(copy);
 	if (nodeTypeOf(copy) === DOCUMENT_NODE) {
 		copySlots.document = copy as Document;
 	}
-	nodeSlots[kCloningSteps](copy, target, deep);
+	nodeSlots._cloningSteps(copy, target, deep);
 	if (nodeTypeOf(node) === ELEMENT_NODE) {
 		const shadow = _((node as Element)).shadowRoot;
 		if (shadow !== null && _(shadow).extra.clonable) {
@@ -33783,7 +33433,7 @@ export interface TreeWalkerSlots {
 	whatToShow: number;
 	filter: NodeFilterInput;
 	active: {value: boolean};
-	[kState]: Step<TreeWalker[typeof kState]>;
+	_state: Step<TreeWalker["_state"]>;
 }
 
 export interface TreeWalker {
@@ -33824,7 +33474,7 @@ export class TreeWalker implements globalThis.TreeWalker {
 		_(this).current = node as Node;
 	}
 
-	get [kState](): {
+	get _state(): {
 		whatToShow: number;
 		filter: NodeFilterInput;
 		active: {value: boolean};
@@ -33875,7 +33525,7 @@ function walkChildren(walk: TreeWalker, first: boolean): Node | null {
 		? objectOf(_(walkSlots.current).firstChild)
 		: objectOf(_(walkSlots.current).lastChild);
 	while (node !== null) {
-		const result = filterNode(walkSlots[kState], node);
+		const result = filterNode(walkSlots._state, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -33925,7 +33575,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 		let sibling = next ? objectOf(_(node).next) : objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			const result = filterNode(walkSlots[kState], node);
+			const result = filterNode(walkSlots._state, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33942,7 +33592,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots[kState], node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
 			return null;
 		}
 	}
@@ -33953,9 +33603,7 @@ function walkParent(walk: TreeWalker): Node | null {
 	let node: Node | null = walkSlots.current;
 	while (node !== null && node !== walkSlots.root) {
 		node = objectOf(_(node).parent);
-		if (
-			node !== null && filterNode(walkSlots[kState], node) === FILTER_ACCEPT
-		) {
+		if (node !== null && filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}
@@ -33977,7 +33625,7 @@ function walkNext(walk: TreeWalker): Node | null {
 				break;
 			}
 			node = child;
-			result = filterNode(walkSlots[kState], node);
+			result = filterNode(walkSlots._state, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33999,7 +33647,7 @@ function walkNext(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = sibling;
-		result = filterNode(walkSlots[kState], node);
+		result = filterNode(walkSlots._state, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -34014,7 +33662,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 		let sibling = objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			let result = filterNode(walkSlots[kState], node);
+			let result = filterNode(walkSlots._state, node);
 			for (;;) {
 				if (result === FILTER_REJECT) {
 					break;
@@ -34024,7 +33672,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 					break;
 				}
 				node = child;
-				result = filterNode(walkSlots[kState], node);
+				result = filterNode(walkSlots._state, node);
 			}
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
@@ -34037,7 +33685,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots[kState], node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}
@@ -34789,14 +34437,14 @@ function createTreeAdapter(document: Document | null) {
 		},
 		getAttrList(element: Element): ParseAttribute[] {
 			return _(element).attributeList.map((attribute) => ({
-				name: attribute[kQualifiedName],
+				name: attribute._qualifiedName,
 				value: attribute.extra.value,
 				namespace: attribute.extra.namespace ?? undefined,
 				prefix: attribute.extra.prefix ?? undefined,
 			}));
 		},
 		getTagName(element: Element): string {
-			return _(element)[kQualifiedName];
+			return _(element)._qualifiedName;
 		},
 		getNamespaceURI(element: Element): string {
 			return _(element).namespace as string;
@@ -35785,7 +35433,7 @@ function getAttributeSerializedName(attribute: Attr): string {
 	if (namespace === XLINK_NAMESPACE) {
 		return `xlink:${attributeSlots.extra.localName}`;
 	}
-	return attributeSlots[kQualifiedName];
+	return attributeSlots._qualifiedName;
 }
 
 // A shadow root is written out as the template the parser reads back,
@@ -35867,7 +35515,7 @@ function serializeNode(
 				namespace === MATHML_NAMESPACE ||
 				namespace === SVG_NAMESPACE
 					? _(element).localName
-					: _(element)[kQualifiedName];
+					: _(element)._qualifiedName;
 			let html = `<${tagName}`;
 			for (const attribute of _(element).attributeList) {
 				html += ` ${getAttributeSerializedName(objectOf(attribute))}="${escapeAttribute(attribute.extra.value)}"`;
@@ -39667,7 +39315,7 @@ export function setAttributeOf(
 	}
 	const string = value === null ? "null" : String(value);
 	for (const attribute of slots.attributeList) {
-		if (attribute[kQualifiedName] === name) {
+		if (attribute._qualifiedName === name) {
 			changeAttribute(objectOf(attribute), string);
 			return;
 		}
diff --git a/src/internal/slots.ts b/src/internal/slots.ts
index 17184625..7d5f61a8 100644
--- a/src/internal/slots.ts
+++ b/src/internal/slots.ts
@@ -10,8 +10,8 @@
  * through `_()`.
  *
  * The record's prototype mirrors the object's class chain. The internal
- * steps and defaults a class defines under symbol keys move there from
- * the public prototype, and run with the record as `this`, so a step
+ * steps and defaults a class defines under names that start with "_"
+ * move there from the public prototype, and run with the record as `this`, so a step
  * reads its own slots without a lookup. `ownerOf()` gives it the object.
  *
  * A family, such as every element, makes its records one way instead:
@@ -92,17 +92,11 @@ class Slot extends Stamp {
 	}
 }
 
-const WELL_KNOWN_SYMBOLS = new Set<symbol>(
-	Object.getOwnPropertyNames(Symbol)
-		.map((name) => (Symbol as unknown as Record<string, unknown>)[name])
-		.filter((value): value is symbol => typeof value === "symbol"),
-);
-
 const hiddenPrototypes = new Map<Constructor, object>();
 const roots = new Map<Constructor, Constructor>();
 const superSteps = new Map<
 	Constructor,
-	Map<symbol, (this: object, ...args: unknown[]) => unknown>
+	Map<string, (this: object, ...args: unknown[]) => unknown>
 >();
 const recordTypes = new Map<Constructor, new () => SlotRecord>();
 
@@ -114,7 +108,7 @@ interface Family {
 		steps: object,
 		extra: object | null,
 	) => SlotRecord;
-	dispatched: Set<symbol>;
+	dispatched: Set<string>;
 }
 
 interface FamilyPlan {
@@ -451,7 +445,7 @@ function getFamily(familyRoot: Constructor, root: Constructor): Family {
 // A step a class below the family's root defines is found through the
 // record's table, since the record's prototype is the family's.
 function addDispatchers(family: Family, hidden: object): void {
-	for (const key of Object.getOwnPropertySymbols(hidden)) {
+	for (const key of internalKeys(hidden)) {
 		if (family.dispatched.has(key)) {
 			continue;
 		}
@@ -471,7 +465,7 @@ function addDispatchers(family: Family, hidden: object): void {
 		} else {
 			Object.defineProperty(family.prototype, key, {
 				value(this: SlotRecord, ...args: unknown[]): unknown {
-					const step = (this[kSteps] as Record<symbol, unknown>)[key] as
+					const step = (this[kSteps] as Record<string, unknown>)[key] as
 						((...stepArgs: unknown[]) => unknown) | undefined;
 					return step === undefined ? undefined : step.apply(this, args);
 				},
@@ -639,7 +633,7 @@ export function isSealed(value: object): boolean {
  */
 export function superStep(
 	type: Constructor,
-	key: symbol,
+	key: string,
 ): (this: object, ...args: unknown[]) => unknown {
 	let steps = superSteps.get(type);
 	if (steps === undefined) {
@@ -659,15 +653,15 @@ export function superStep(
 /** The internal step `key` as `type` defines or inherits it. */
 export function hiddenMember(
 	type: Constructor,
-	key: symbol,
+	key: string,
 ): (this: object, ...args: unknown[]) => unknown {
 	const hidden = hiddenPrototype(type, roots.get(type) ?? rootOf(type) ?? type);
-	const member = (hidden as Record<symbol, unknown>)[key];
+	const member = (hidden as Record<string, unknown>)[key];
 	return member as (this: object, ...args: unknown[]) => unknown;
 }
 
 /**
- * Moves the symbol-keyed members a module added to public prototypes
+ * Moves the internal members a module added to public prototypes
  * after their classes were first constructed. Called once the modules
  * have loaded.
  */
@@ -711,22 +705,21 @@ function hiddenPrototype(type: Constructor, root: Constructor): object {
 	return hidden;
 }
 
-function isMovable(key: symbol): boolean {
-	return !WELL_KNOWN_SYMBOLS.has(key) && Symbol.keyFor(key) === undefined;
+// No Web IDL member's name starts with "_", so none of these is one a
+// page should see.
+function internalKeys(object: object): string[] {
+	return Object.getOwnPropertyNames(object)
+		.filter((key) => key.startsWith("_"));
 }
 
 function hasMovableMembers(prototype: object): boolean {
-	return Object.getOwnPropertySymbols(prototype).some(isMovable);
+	return internalKeys(prototype).length > 0;
 }
 
 function moveMembers(prototype: object, hidden: object): void {
-	for (const key of Object.getOwnPropertySymbols(prototype)) {
-		if (!isMovable(key)) {
-			continue;
-		}
-
+	for (const key of internalKeys(prototype)) {
 		const descriptor = Object.getOwnPropertyDescriptor(prototype, key)!;
 		Object.defineProperty(hidden, key, descriptor);
-		delete (prototype as Record<symbol, unknown>)[key];
+		delete (prototype as Record<string, unknown>)[key];
 	}
 }
diff --git a/tests/membrane.test.ts b/tests/membrane.test.ts
index 872d2c86..215fbe2e 100644
--- a/tests/membrane.test.ts
+++ b/tests/membrane.test.ts
@@ -1,17 +1,12 @@
 /**
  * What a page, or the program embedding TermDOM, can reach holds nothing of
- * the engine's: no symbol-keyed state or steps on any object or prototype
- * but the runtime's own. Where the runtime has a class, the page gets it;
- * where it has none, the sealed one stands in.
+ * the engine's: no internal state or steps on any object or prototype but
+ * the runtime's own. Where the runtime has a class, the page gets it.
  */
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {
-	SealedAbortController,
-	SealedAbortSignal,
-	SealedDOMException,
-} from "../src/internal/dom.ts";
+import {SealedAbortController, SealedAbortSignal} from "../src/internal/dom.ts";
 import {MockProcess} from "./test-utils.js";
 
 function create(html = ""): TermDOM {
@@ -153,28 +148,6 @@ test("a window's DOMException is the runtime's where the runtime has one", () =>
 	dom.dispose();
 });
 
-test("the sealed DOMException is an Error with WebIDL's members", () => {
-	const dom = create();
-	const DOMException =
-		SealedDOMException as unknown as typeof globalThis.DOMException;
-	const error = new DOMException("gone", "NotFoundError");
-	expect(error).toBeInstanceOf(Error);
-	expect(Object.getPrototypeOf(DOMException.prototype)).toBe(Error.prototype);
-	expect([error.name, error.message, error.code]).toEqual([
-		"NotFoundError",
-		"gone",
-		8,
-	]);
-	expect(new DOMException().name).toBe("Error");
-	expect(new DOMException("x", "Unlisted").code).toBe(0);
-	expect([DOMException.NOT_FOUND_ERR, error.NOT_FOUND_ERR]).toEqual([8, 8]);
-	expect(String(error)).toBe("NotFoundError: gone");
-	expect(Object.prototype.toString.call(error)).toBe("[object DOMException]");
-	const name = Object.getOwnPropertyDescriptor(DOMException.prototype, "name")!;
-	expect(() => name.get!.call({})).toThrow(TypeError);
-	dom.dispose();
-});
-
 function document(dom: TermDOM): Document {
 	return dom.document;
 }
diff --git a/tests/webidl.test.ts b/tests/webidl.test.ts
index fb56f131..328e5ad1 100644
--- a/tests/webidl.test.ts
+++ b/tests/webidl.test.ts
@@ -6,6 +6,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
+import {DOM_INTERFACES} from "../src/generated/domidl.ts";
 import {TermDOM} from "../src/index.ts";
 
 function setup(): {window: any; document: any} {
@@ -212,3 +213,32 @@ test("an Illegal invocation carries no cause", () => {
 		expect((error as Error).cause).toBe(undefined);
 	}
 });
+
+test("no interface a page can reach shows an internal member", () => {
+	const {window} = setup();
+	const shown: string[] = [];
+	for (const name of Object.getOwnPropertyNames(window)) {
+		const value = window[name];
+		if (typeof value !== "function" || !/^[A-Z]/.test(name)) {
+			continue;
+		}
+		for (const target of [value, value.prototype]) {
+			if (target == null) {
+				continue;
+			}
+			for (const key of Object.getOwnPropertyNames(target)) {
+				if (key.startsWith("_")) {
+					shown.push(`${name}.${key}`);
+				}
+			}
+		}
+	}
+	expect(shown).toEqual([]);
+});
+
+test("no member the specs name starts with an underscore, which internal steps use", () => {
+	const named = Object.entries(DOM_INTERFACES).flatMap(([name, idl]) =>
+		idl.members.map(([key]) => `${name}.${key}`))
+		.filter((member) => member.split(".")[1].startsWith("_"));
+	expect(named).toEqual([]);
+});

From 4585fd7bc2cda26ab6fff6b3b6f68d5b3755444d Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:01:51 -0400
Subject: [PATCH 16/99] Read a walker's filter, a token list's tokens and a
 validity state's flags without a step

TreeWalker's step built a fresh object of three of its own slots for
every node the filter looked at, and NodeIterator built the same; both
now hand filterNode their record, which holds those slots. The token
list's step only called ensureList, and the validity state's only called
its own flags(). A computed style's custom property names come from a
plain function.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 44 ++++++++++++++-------------
 src/internal/dom.ts   | 71 ++++++++++++++-----------------------------
 2 files changed, 45 insertions(+), 70 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index b73e2256..f83d2136 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -4315,7 +4315,6 @@ interface ComputedStyleDeclarationSlots extends CSSStyleDeclarationSlots {
 	// for the paint style to be derived again.
 	styleVersion: object;
 	custom: string[] | null;
-	_customProperties: Step<ComputedStyleDeclaration["_customProperties"]>;
 	_usedValue: Step<ComputedStyleDeclaration["_usedValue"]>;
 	_baseValue: Step<ComputedStyleDeclaration["_baseValue"]>;
 	_syncResolved: Step<ComputedStyleDeclaration["_syncResolved"]>;
@@ -4446,25 +4445,6 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 		return [...CSS_LONGHANDS, ...getCustomNames(this)][Symbol.iterator]();
 	}
 
-	_customProperties(this: Slots<ComputedStyleDeclaration>): string[] {
-		const names: string[] = [];
-		for (const rule of this.cssRules) {
-			for (const name of Object.keys(rule.declarations)) {
-				if (name.startsWith("--") && !names.includes(name)) {
-					names.push(name);
-				}
-			}
-		}
-		for (const name of Object.keys(
-			getInlineDeclarations(ownerOf(this)).declarations,
-		)) {
-			if (name.startsWith("--") && !names.includes(name)) {
-				names.push(name);
-			}
-		}
-		return names;
-	}
-
 	// Measured through the same flush a geometry read takes, and memoized
 	// behind it, so a property-heavy caller measures once per layout. The
 	// memo belongs to the cascade, which lets a flush drop every one.
@@ -4564,6 +4544,27 @@ class ComputedStyleDeclaration extends CSSStyleProperties {
 	}
 }
 
+function getDeclaredCustomNames(
+	slots: Slots<ComputedStyleDeclaration>,
+): string[] {
+	const names: string[] = [];
+	for (const rule of slots.cssRules) {
+		for (const name of Object.keys(rule.declarations)) {
+			if (name.startsWith("--") && !names.includes(name)) {
+				names.push(name);
+			}
+		}
+	}
+	for (const name of Object.keys(
+		getInlineDeclarations(ownerOf(slots)).declarations,
+	)) {
+		if (name.startsWith("--") && !names.includes(name)) {
+			names.push(name);
+		}
+	}
+	return names;
+}
+
 // The cascade's declaration, interned, and absolutized against this
 // element when the interned entry says only an element can resolve it.
 function getAbsolutizedValue(
@@ -5481,7 +5482,8 @@ function getCustomNames(computed: ComputedStyleDeclaration): string[] {
 		element = flatParentElement(element)
 	) {
 		const declaration = computedSlots.cascade?.declarationFor(element);
-		for (const name of _maybe(declaration)?._customProperties() ?? []) {
+		const slots = _maybe(declaration);
+		for (const name of slots ? getDeclaredCustomNames(slots) : []) {
 			names.add(name);
 		}
 	}
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 1fbabc63..bb638cb8 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -8933,11 +8933,14 @@ interface DOMTokenListSlots extends LiveListSlots {
 	element: Element;
 	attribute: string;
 	supported: Set<string> | null;
-	_tokens: Step<DOMTokenList["_tokens"]>;
 	_changedMembers: Step<DOMTokenList["_changedMembers"]>;
 	_listMembers: Step<DOMTokenList["_listMembers"]>;
 }
 
+function getTokens(list: DOMTokenList): string[] {
+	return ensureList(list) as unknown as string[];
+}
+
 interface DOMTokenList extends LiveList {
 	readonly [internals]: DOMTokenListSlots;
 }
@@ -8963,7 +8966,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	}
 
 	get length(): number {
-		return _(this)._tokens.length;
+		return getTokens(this).length;
 	}
 
 	get value(): string {
@@ -8976,25 +8979,19 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		setAttributeOf(slots.element, slots.attribute, String(value));
 	}
 
-	get _tokens(): string[] {
-		return ensureList(
-			ownerOf(this as unknown as Slots<DOMTokenList>),
-		) as unknown as string[];
-	}
-
 	item(index: number): string | null {
-		const tokens = _(this)._tokens;
+		const tokens = getTokens(this);
 		const at = toUnsignedLong(index);
 		return at < tokens.length ? tokens[at] : null;
 	}
 
 	contains(token: string): boolean {
-		return _(this)._tokens.includes(String(token));
+		return getTokens(this).includes(String(token));
 	}
 
 	add(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)._tokens.slice();
+		const current = getTokens(this).slice();
 		for (const token of tokens) {
 			if (!current.includes(token)) {
 				current.push(String(token));
@@ -9005,7 +9002,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 
 	remove(...tokens: string[]): void {
 		validateTokens(tokens);
-		const current = _(this)._tokens.filter(
+		const current = getTokens(this).filter(
 			(each) => !tokens.some((token) => String(token) === each),
 		);
 		writeTokenList(this, current);
@@ -9014,7 +9011,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 	toggle(token: string, force?: boolean): boolean {
 		validateTokens([token]);
 		const name = String(token);
-		const current = _(this)._tokens.slice();
+		const current = getTokens(this).slice();
 		const index = current.indexOf(name);
 		if (index !== -1) {
 			if (force === undefined || force === false) {
@@ -9036,7 +9033,7 @@ class DOMTokenList implements globalThis.DOMTokenList {
 		validateTokens([token, newToken]);
 		const name = String(token);
 		const replacement = String(newToken);
-		const current = _(this)._tokens.slice();
+		const current = getTokens(this).slice();
 		if (!current.includes(name)) {
 			return false;
 		}
@@ -24616,7 +24613,6 @@ function noValidityFlags(): ValidityFlags {
 
 interface ValidityStateSlots {
 	flags: () => ValidityFlags;
-	_validityFlags: Step<ValidityState["_validityFlags"]>;
 }
 
 interface ValidityState {
@@ -24646,10 +24642,6 @@ class ValidityState {
 		const flags = _(this).flags();
 		return !VALIDITY_FLAG_NAMES.some((name) => flags[name]);
 	}
-
-	get _validityFlags(): ValidityFlags {
-		return (this as unknown as Slots<ValidityState>).flags();
-	}
 }
 
 declareSealedRoot(ValidityState);
@@ -24657,7 +24649,7 @@ declareSealedRoot(ValidityState);
 for (const name of VALIDITY_FLAG_NAMES) {
 	Object.defineProperty(ValidityState.prototype, name, {
 		get(this: ValidityState): boolean {
-			return _(this)._validityFlags[name];
+			return _(this).flags()[name];
 		},
 		enumerable: true,
 		configurable: true,
@@ -33348,11 +33340,6 @@ function traverseIterator(
 	const iteratorSlots = _(iterator);
 	let node: Node | null = iteratorSlots.reference;
 	let before = iteratorSlots.pointerBefore;
-	const state = {
-		whatToShow: iteratorSlots.whatToShow,
-		filter: iteratorSlots.filter,
-		active: iteratorSlots.active,
-	};
 	for (;;) {
 		if (forward) {
 			if (!before) {
@@ -33373,7 +33360,7 @@ function traverseIterator(
 				before = true;
 			}
 		}
-		if (filterNode(state, node as Node) === FILTER_ACCEPT) {
+		if (filterNode(iteratorSlots, node as Node) === FILTER_ACCEPT) {
 			// A filter that removed the node it was filtering leaves the
 			// reference where the pre-removing steps put it. A node outside the
 			// root can never be the reference.
@@ -33433,7 +33420,6 @@ export interface TreeWalkerSlots {
 	whatToShow: number;
 	filter: NodeFilterInput;
 	active: {value: boolean};
-	_state: Step<TreeWalker["_state"]>;
 }
 
 export interface TreeWalker {
@@ -33474,19 +33460,6 @@ export class TreeWalker implements globalThis.TreeWalker {
 		_(this).current = node as Node;
 	}
 
-	get _state(): {
-		whatToShow: number;
-		filter: NodeFilterInput;
-		active: {value: boolean};
-	} {
-		const slots = this as unknown as Slots<TreeWalker>;
-		return {
-			whatToShow: slots.whatToShow,
-			filter: slots.filter,
-			active: slots.active,
-		};
-	}
-
 	parentNode(): globalThis.Node | null {
 		return walkParent(this) as unknown as globalThis.Node | null;
 	}
@@ -33525,7 +33498,7 @@ function walkChildren(walk: TreeWalker, first: boolean): Node | null {
 		? objectOf(_(walkSlots.current).firstChild)
 		: objectOf(_(walkSlots.current).lastChild);
 	while (node !== null) {
-		const result = filterNode(walkSlots._state, node);
+		const result = filterNode(walkSlots, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -33575,7 +33548,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 		let sibling = next ? objectOf(_(node).next) : objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			const result = filterNode(walkSlots._state, node);
+			const result = filterNode(walkSlots, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33592,7 +33565,7 @@ function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			return null;
 		}
 	}
@@ -33603,7 +33576,7 @@ function walkParent(walk: TreeWalker): Node | null {
 	let node: Node | null = walkSlots.current;
 	while (node !== null && node !== walkSlots.root) {
 		node = objectOf(_(node).parent);
-		if (node !== null && filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
+		if (node !== null && filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}
@@ -33625,7 +33598,7 @@ function walkNext(walk: TreeWalker): Node | null {
 				break;
 			}
 			node = child;
-			result = filterNode(walkSlots._state, node);
+			result = filterNode(walkSlots, node);
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
 				return node;
@@ -33647,7 +33620,7 @@ function walkNext(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = sibling;
-		result = filterNode(walkSlots._state, node);
+		result = filterNode(walkSlots, node);
 		if (result === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
@@ -33662,7 +33635,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 		let sibling = objectOf(_(node).previous);
 		while (sibling !== null) {
 			node = sibling;
-			let result = filterNode(walkSlots._state, node);
+			let result = filterNode(walkSlots, node);
 			for (;;) {
 				if (result === FILTER_REJECT) {
 					break;
@@ -33672,7 +33645,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 					break;
 				}
 				node = child;
-				result = filterNode(walkSlots._state, node);
+				result = filterNode(walkSlots, node);
 			}
 			if (result === FILTER_ACCEPT) {
 				walkSlots.current = node;
@@ -33685,7 +33658,7 @@ function walkPrevious(walk: TreeWalker): Node | null {
 			return null;
 		}
 		node = parent;
-		if (filterNode(walkSlots._state, node) === FILTER_ACCEPT) {
+		if (filterNode(walkSlots, node) === FILTER_ACCEPT) {
 			walkSlots.current = node;
 			return node;
 		}

From 28a370a16595b02ddeeaf7324dbc7a53eb43d9b6 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:03:09 -0400
Subject: [PATCH 17/99] Name the slots live collections register in, which the
 comment called by symbols that are gone

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index bb638cb8..a26be0b3 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -5878,10 +5878,10 @@ interface LiveCollection {
 // than proxy traps, so they are observable without reading the
 // collection. So once a collection has been read, every relevant change
 // must notify it, and each collection updates as cheaply as it can. A
-// collection listing what one node contains registers on that node under
-// kLiveLists. A collection whose members can be anywhere in the document
-// (a form's controls, for example) registers on the document under
-// kDocumentWideLists.
+// collection listing what one node contains registers in that node's
+// liveLists. A collection whose members can be anywhere in the document
+// (a form's controls, for example) registers in the document's
+// documentWideLists.
 
 // A collection stays registered for its owner's lifetime, so this only
 // grows. A change in a document that never registered a collection skips

From 09f15223e02a2e377086a7b18801b2eebd496b76 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:11:30 -0400
Subject: [PATCH 18/99] Put stray comments back on the code they describe, and
 drop ones that describe nothing

Several doc comments had been left above the wrong declaration when code
moved around them: flushLayout's above revealEditingCaret, Window's above
two runtime constants, createWindow's above the class table, the hover
note above the :active map. Others headed nothing, said the same thing
twice, told how a bug once looked, or named writeTokenList() for the
clipboard's write().

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts | 84 +++++++++++++++++++++------------------------
 1 file changed, 39 insertions(+), 45 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index a26be0b3..8d4bc79a 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -32126,8 +32126,6 @@ function getSelectionIndex(
 	return last;
 }
 
-// An offset on the seam between two nodes maps to the earlier node's
-// end, which is the same position as the later node's start.
 // An index where one text node ends and the next begins is a point in
 // either. The end of the earlier node is the default; a line start wants
 // the later one.
@@ -33536,8 +33534,7 @@ function walkChildren(walk: TreeWalker, first: boolean): Node | null {
 
 // DOM Standard, "traverse siblings". A walk rooted at a node never
 // visits that node's siblings. Returning one would escape the subtree
-// the walk was scoped to, which is how an empty inline element once
-// measured the width of the sibling after it.
+// the walk was scoped to.
 function walkSiblings(walk: TreeWalker, next: boolean): Node | null {
 	const walkSlots = _(walk);
 	let node = walkSlots.current;
@@ -33671,10 +33668,6 @@ Object.defineProperty(TreeWalker.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-// Hover is not a mutation and no attribute records it. The engine
-// writes it here as motion reports arrive, and the `:hover` resolver
-// reads it. Absent means nothing is hovered, because the document has no
-// motion reporting or the pointer left.
 const activeElements = new WeakMap<Document, Element>();
 
 /** Record the element a mouse button is held down on, for `:active`. */
@@ -33713,6 +33706,10 @@ export function isActive(element: Element): boolean {
 	return false;
 }
 
+// Hover is not a mutation and no attribute records it. The engine
+// writes it here as motion reports arrive, and the `:hover` resolver
+// reads it. Absent means nothing is hovered, because the document has no
+// motion reporting or the pointer left.
 const hoveredElements = new WeakMap<Document, Element>();
 
 /**
@@ -34568,9 +34565,10 @@ function attachDeclarativeShadowRoot(template: HTMLTemplateElement): boolean {
 	return true;
 }
 
-// Builds the one document of this realm. It carries the realm's
-// registry. Every document an author builds carries none until a
-// registry claims it, exactly like a document with no browsing context.
+// Parses markup into a document carrying `registry`, which is none unless
+// the caller is making a window's or a frame's document. A document an
+// author builds carries none until a registry claims it, as one with no
+// browsing context does.
 function parseHTMLDocument(
 	html: string,
 	url = "about:blank",
@@ -35773,8 +35771,6 @@ for (const constructor of [HTMLBodyElement, HTMLFrameSetElement]) {
 	}
 }
 
-// State an attached document accepts only from its engine.
-
 // The lists with a listener, which are the only ones a viewport change
 // has anyone to tell. `matches` reads live, so a list without a listener
 // needs no bookkeeping and is the page's to drop. The resize path is the
@@ -35906,10 +35902,10 @@ export function syncMediaQueries(document: globalThis.Document): void {
 	}
 }
 
-/** What a TermDOM hands the document it draws. */
 /** How pixels reach the terminal, or "none" for not at all. */
 export type GraphicsSetting = "cells" | "none";
 
+/** What a TermDOM hands the document it draws. */
 export interface DocumentEngine {
 	layout: Layout;
 	cascade: Cascade;
@@ -36378,13 +36374,6 @@ export function flushStyle(node: globalThis.Node): boolean {
 	return had;
 }
 
-/**
- * Synchronously settle what a geometry read must see: pending mutations
- * delivered and layout brought up to date. A geometry read needs fresh
- * layout, not fresh pixels. Painting stays with the frame loop, but the
- * drain takes records from the observer callback that would have painted
- * them, so this requests the frame on the caller's behalf.
- */
 /**
  * Scrolls the boxes around an editing host's caret so the caret shows, as
  * a browser does after a key moves it or an edit lands.
@@ -36418,6 +36407,13 @@ export function revealPendingEditingCaret(document: globalThis.Document): void {
 	attachedSlots.extra.layout.revealCaret(node as Node, selection!.focusOffset);
 }
 
+/**
+ * Synchronously settle what a geometry read must see: pending mutations
+ * delivered and layout brought up to date. A geometry read needs fresh
+ * layout, not fresh pixels. Painting stays with the frame loop, but the
+ * drain takes records from the observer callback that would have painted
+ * them, so this requests the frame on the caller's behalf.
+ */
 export function flushLayout(node: globalThis.Node): boolean {
 	const attached = getAttachedDocument(node);
 	if (attached === undefined) {
@@ -36569,7 +36565,7 @@ Object.defineProperty(ClipboardItem.prototype, Symbol.toStringTag, {
 // travels in-band, including across SSH. Terminals without OSC 52 ignore
 // it, and there is no way to detect that, so the promise resolves when
 // the transport has the bytes. readText() queries the same way (OSC 52
-// with `?` as the payload) and resolves with the reply. writeTokenList() and
+// with `?` as the payload) and resolves with the reply. write() and
 // read() are the same two round trips over a ClipboardItem. This is an
 // EventTarget because the interface says so; nothing fires events at it.
 interface ClipboardSlots extends EventTargetSlots {
@@ -36842,7 +36838,7 @@ Object.defineProperty(Permissions.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-// The only one here is Location.ancestorOrigins, which is empty because
+// Only Location.ancestorOrigins makes one, and it is always empty, since
 // a terminal document is not in a frame.
 interface DOMStringListSlots {
 	strings: readonly string[];
@@ -37044,13 +37040,6 @@ function noNavigation(): DOMException {
 	);
 }
 
-// The window a document is attached to: an EventTarget whose members are the
-// browsing context's, implemented by the engine the document is attached to. A
-// window exists only when attached (a headless document has none), so the
-// members below may expect a mount, and degrade the way the document's own do
-// without one: a viewport of no size, a document scroll at the origin, a query
-// that matches nothing.
-
 // Keyed by the handle requestAnimationFrame returned, so
 // cancelAnimationFrame can cancel. The engine fires them once the frame
 // containing their pending mutations has been written.
@@ -37419,13 +37408,6 @@ function getNamedPropertyValue(
 	return collection;
 }
 
-/**
- * A terminal has one screen and no browsing context, so the window is a
- * plain object rather than a global. It exposes this file's interfaces,
- * the scrolling and sizing the display implements, and the handful of
- * APIs an author reaches for through `window`. The member types are the
- * host's, which is how a caller outside this file sees them.
- */
 // The runtime's clock and random source, which the window's Performance
 // and Crypto read through without handing the runtime's objects out.
 const runtimePerformance = globalThis.performance;
@@ -37780,6 +37762,18 @@ export interface Window {
 	readonly [internals]: WindowSlots;
 }
 
+/**
+ * A terminal has one screen and no browsing context, so the window is a
+ * plain object rather than a global. It exposes this file's interfaces,
+ * the scrolling and sizing the display implements, and the handful of
+ * APIs an author reaches for through `window`. The member types are the
+ * host's, which is how a caller outside this file sees them.
+ *
+ * A window exists only when its document is attached, so its members may
+ * expect a mount, and degrade the way the document's own do without one:
+ * a viewport of no size, a document scroll at the origin, a query that
+ * matches nothing.
+ */
 export class Window extends EventTarget {
 	[index: number]: Window;
 	declare getComputedStyle: (
@@ -38841,9 +38835,6 @@ const platform = {
 	XMLDocument,
 } as const;
 
-// A window starts with its interfaces and the timers any script expects
-// to find. The display fills in the rest (sizing, scrolling, animation
-// frames, the clipboard) as it mounts the document.
 // The runtime's own, as the module found them. installGlobals() puts the
 // window's in their place, and the window's call these.
 // Bound, since a browser's throws when called on anything but its global.
@@ -39009,6 +39000,9 @@ export function clearWindowTimers(window: Window): void {
 	idle?.clear();
 }
 
+// A window starts with its interfaces and the timers any script expects
+// to find. The display fills in the rest (sizing, scrolling, animation
+// frames, the clipboard) as it mounts the document.
 function buildWindow(document: Document): Window {
 	const window = new Window(document) as unknown as Record<string, unknown>;
 	// HTML reports an exception a timer or a microtask lets escape, as it
@@ -39151,11 +39145,6 @@ function startPendingImages(
 	}
 }
 
-/**
- * Parse a document from markup and display it in a window of its own. An
- * XML content type parses as XML, which is what a frame whose src names a
- * .xml, .xhtml or .svg file holds.
- */
 // The classes a window exposes by name. Read when a window is made rather
 // than in the module's interface table: canvas.ts is part of the import
 // cycle through cssvalues, and a table built at module load would read
@@ -39188,6 +39177,11 @@ function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
 	return installInterfaces(getWindowClasses());
 }
 
+/**
+ * Parse a document from markup and display it in a window of its own. An
+ * XML content type parses as XML, which is what a frame whose src names a
+ * .xml, .xhtml or .svg file holds.
+ */
 export function createWindow(
 	source: string,
 	url?: string,

From 4a1f0c80569aae52f172d8bd8c7af4a9092f88fc Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:17:04 -0400
Subject: [PATCH 19/99] Report an image's position from x and y, reject
 fullscreen on a detached element with a TypeError, and fix comments that
 misdescribe their code

img.x and img.y returned 0 while their comment said they read the
geometry; they are now the border box's edges from the document's
origin, as CSSOM View has them. requestFullscreen() on an element
outside the document rejected with an Error named InvalidStateError
through a try/catch that could not otherwise fire; it now fires
fullscreenerror and rejects with the TypeError the Fullscreen Standard
names. The document kept a children field nothing read.

Comments that told how a bug once looked now state the rule. Others
moved to the code they describe, named a function that exists instead
of one that does not, or claimed innerText did not read the rendered
text, which it does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts           | 93 +++++++++++++----------------------
 src/internal/exchange.ts      |  2 -
 src/internal/inspector.ts     |  4 +-
 src/internal/layout.ts        | 12 ++---
 src/internal/layoutsolver.ts  |  4 +-
 tests/document-mode.test.ts   | 15 ++++++
 tests/offset-geometry.test.ts | 14 ++++++
 7 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 8d4bc79a..8eae4995 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -8842,12 +8842,8 @@ function createTagNameNSCollection(
 }
 
 /**
- * An element's attributes as the element holds them, for engine code that
- * reads them. `attributes` would build a live NamedNodeMap to hand out.
- */
-/**
- * An element's attributes, as their slots, so a reader looks none of
- * them up. The accessors below read them.
+ * An element's attributes, as their slots, for engine code that reads
+ * them. `attributes` would build a live NamedNodeMap to hand out.
  */
 export function getAttributeList(
 	element: globalThis.Element,
@@ -12060,11 +12056,6 @@ export class HTMLElement extends Element {
 		return "";
 	}
 
-	// HTML's "rendered text" respects display, collapses white space and
-	// carries the line breaks layout chose. This engine computes all of
-	// that but does not read it back here yet, so every element takes the
-	// path the standard gives an element that is not being rendered: its
-	// descendant text content.
 	get innerText(): string {
 		return getInnerText(this);
 	}
@@ -12349,7 +12340,6 @@ function runFocusingSteps(element: HTMLElement): void {
 	}
 	// Uses shadow-including connectedness. A node whose tree root is a
 	// shadow root is focusable when its host chain reaches the document.
-	// The node-tree root test rejected every element in a shadow tree.
 	if (isFocusableArea(element) && element.isConnected) {
 		_(document).extra.activeElement = element;
 		// Focusing the body moves nothing a Tab would start from.
@@ -14070,8 +14060,8 @@ function upgradeElement(
 function getUpgradeDefinition(
 	element: Element,
 ): CustomElementDefinition | null {
-	// A template's contents never upgrade. A connected element's root is a
-	// document, so only a detached one has to climb to find out.
+	// A connected element's root is a document, so only a detached one
+	// has to climb to find out.
 	const elementSlots = _(element);
 	if (!elementSlots.connected) {
 		const root = getRoot(element);
@@ -15882,13 +15872,13 @@ class HTMLCanvasElement extends HTMLElement {
 
 declareExtraSlots(HTMLCanvasElement);
 
-// The bitmap, made at the canvas's size when first needed.
-// Past MAX_IMAGE_PIXELS a canvas gets no bitmap and draws nothing, as a
-// browser's canvas does past its own limit, rather than failing to
-// allocate. A cell takes 18 bytes, so a cell grid stops sooner.
+// A cell takes 18 bytes, so a cell grid stops sooner than a bitmap does.
 const GRID_CELL_LIMIT = 1 << 22;
 
-// The bitmap, made at the canvas's size when first drawn on.
+// The bitmap, made at the canvas's size when first drawn on. Past
+// MAX_IMAGE_PIXELS a canvas gets no bitmap and draws nothing, as a
+// browser's canvas does past its own limit, rather than failing to
+// allocate.
 function getCanvasBitmap(canvas: HTMLCanvasElement): Bitmap {
 	const width = canvas.width;
 	const height = canvas.height;
@@ -18078,14 +18068,16 @@ class HTMLImageElement extends HTMLElement {
 		return state.status === "complete" || state.status === "broken";
 	}
 
-	// Deprecated members that report the rendered position. This engine
-	// implements them through the geometry surface instead.
+	// The border box's left and top edges from the document's origin, as
+	// CSSOM View defines these old members, or 0 for an image with no box.
 	get x(): number {
-		return 0;
+		const view = this.ownerDocument.defaultView;
+		return this.getBoundingClientRect().left + (view?.scrollX ?? 0);
 	}
 
 	get y(): number {
-		return 0;
+		const view = this.ownerDocument.defaultView;
+		return this.getBoundingClientRect().top + (view?.scrollY ?? 0);
 	}
 
 	decode(): Promise<void> {
@@ -18840,7 +18832,6 @@ export class HTMLInputElement extends HTMLElement {
 		);
 	}
 
-	// Only the types that render as a button can invoke a popover.
 	get popoverTargetElement(): Element | null {
 		return getAttributeElement(this, "popovertarget");
 	}
@@ -21725,8 +21716,8 @@ export class HTMLSelectElement extends HTMLElement {
 
 		syncPickerRows(ownerOf(this), picker);
 
-		// Anchor below the text control in DOCUMENT coordinates (the picker's
-		// containing block is the ICB), at least the text control's width
+		// Anchor below the select in DOCUMENT coordinates (the picker's
+		// containing block is the ICB), at least the select's width
 		// and as wide as its widest row, a grouped option's indent included.
 		const rect = attachedSlots.extra.layout.getRect(ownerOf(this));
 		if (rect) {
@@ -24179,26 +24170,16 @@ function fullscreenChanged(element: Element): void {
 	_maybe(getAttachedDocument(element))?.extra.layout.invalidate(element);
 }
 
-// The alternate screen comes up holding whatever the terminal left in
-// it, so entering clears it and homes the cursor. The cursor is hidden
-// before the screen is touched, so it never blinks on the clear.
+// An element outside the document cannot go fullscreen: the Fullscreen
+// Standard fires fullscreenerror and rejects with a TypeError.
 function enterFullscreen(element: Element): void {
-	const stack = getFullscreenStack(_(element).document);
-	try {
-		if (!element.isConnected) {
-			const error = new Error("The element is not contained by a document.");
-			error.name = "InvalidStateError";
-			throw error;
-		}
-		stack.push(element);
-		fireFullscreenEvent("fullscreenchange", element);
-	} catch (error) {
-		if (stack[stack.length - 1] === element) {
-			stack.pop();
-		}
-		fireFullscreenEvent("fullscreenerror", element, {error: error as Error});
+	if (!element.isConnected) {
+		const error = new TypeError("The element is not in the document");
+		fireFullscreenEvent("fullscreenerror", element, {error});
 		throw error;
 	}
+	getFullscreenStack(_(element).document).push(element);
+	fireFullscreenEvent("fullscreenchange", element);
 }
 
 function getDatasetAttributeName(property: string): string {
@@ -25820,7 +25801,7 @@ export function isInFlatTree(target: globalThis.Node): boolean {
 // The flat-tree hops: shadow content in its slot's place, and
 // pseudo-element nodes among the children they belong beside. Neither is
 // a link a node stores, so each hop computes its result. The engine
-// walks this tree through the three traversals exported below; the DOM's
+// walks this tree through the traversals exported below; the DOM's
 // own TreeWalker never does.
 
 function isElementOrText(node: Node): boolean {
@@ -26675,8 +26656,8 @@ class IntersectionObserver {
 		disconnectObserver(this as unknown as AnyObserver);
 	}
 
-	// Records are computed and delivered in the same pass (see the
-	// manager's flush), so nothing is ever queued undelivered and this is
+	// Records are computed and delivered in the same pass (see
+	// flushObservers()), so nothing is ever queued undelivered and this is
 	// always empty. It exists because the interface has it and code checks
 	// for it.
 	takeRecords(): IntersectionObserverEntry[] {
@@ -26783,8 +26764,7 @@ function applyRootMargin(
 
 // This is what the spec actually watches. An observation fires when
 // this CHANGES, so a target scrolling through `[0, 0.5, 1]` reports at
-// each step. Tracking only the boolean "is it intersecting" collapsed
-// all of those into one callback and made threshold arrays decorative.
+// each step, not once when it starts to intersect.
 function getThresholdIndex(
 	observer: IntersectionObserver,
 	ratio: number,
@@ -26832,10 +26812,6 @@ function isHTMLDocument(document: Document): boolean {
 	return _(document).extra.type === "html";
 }
 
-/**
- * The event handler attributes installed on the prototype below, and the
- * ParentNode mixin from the tables.
- */
 export interface DocumentExtra extends NodeExtra {
 	// What an attached document renders through, set by attachDocument. A
 	// headless document has none and behaves as a document with no browsing
@@ -26884,7 +26860,6 @@ export interface DocumentExtra extends NodeExtra {
 	activeElement: Element | null;
 	defaultView: object | null;
 	styleElements: number;
-	children: HTMLCollection | null;
 	topLayer: Set<Element>;
 	// The reentrancy guards the popover algorithms keep on the document:
 	// one popover opening at a time, and a count of the ones closing under
@@ -29430,6 +29405,12 @@ function isDocumentScroller(element: Element): boolean {
 
 const scrolledElements = new WeakMap<Document, Set<Element>>();
 
+// The scroll steps of "update the rendering": each box scrolled since the
+// last frame gets one "scroll" event, and the document one that bubbles
+// to the window, before the frame's callbacks run.
+const pendingScrollTargets = new WeakMap<Document, Set<Element>>();
+const reportedDocumentScrollTop = new WeakMap<Document, number>();
+
 // A write on an attached document rounds to whole cells (everything
 // paints on the cell grid, like the document scroll), clamps into the
 // range layout reports for the box, stores the value, and tells the
@@ -29438,12 +29419,6 @@ const scrolledElements = new WeakMap<Document, Set<Element>>();
 // run) stores the write unclamped; the caret-reveal code owns those
 // offsets and keeps them sane. On a headless document the write is
 // stored and read back, and nothing moves.
-// The scroll steps of "update the rendering": each box scrolled since the
-// last frame gets one "scroll" event, and the document one that bubbles
-// to the window, before the frame's callbacks run.
-const pendingScrollTargets = new WeakMap<Document, Set<Element>>();
-const reportedDocumentScrollTop = new WeakMap<Document, number>();
-
 function setScrollOffset(
 	element: Element,
 	axis: "left" | "top",
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index cd2b49eb..b0af53ac 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -181,8 +181,6 @@ function createModeQuery(mode: string): string {
 		: `\x1b[${parseInt(mode, 10)}$p`;
 }
 
-// C0, DEL and the C1 range. In untrusted text one would end the
-// sequence around it or start one of its own.
 // Every mode the engine sets, so teardown can reset what was engaged
 // (in this order) and the panic paths can reset the union. A mode
 // written anywhere else is a restore leak.
diff --git a/src/internal/inspector.ts b/src/internal/inspector.ts
index 2dfe0fa5..47ae15d7 100644
--- a/src/internal/inspector.ts
+++ b/src/internal/inspector.ts
@@ -1,5 +1,5 @@
-// Node's inspect hook, so console.log(element) shows markup rather than a
-// text control dump. Importing the module installs the hooks.
+// Node's and Deno's inspect hooks, so console.log(element) shows markup
+// rather than a text control dump. Importing the module installs the hooks.
 import {
 	Comment,
 	Document,
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 3e31608d..0e47bbbb 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -5901,11 +5901,9 @@ export class Layout {
 			}
 
 			// An empty inline gets a zero-width rect at its position, as in a
-			// browser. The block fallback below returns the layout node's
-			// width, which for an empty inline is its containing block's, and
-			// `<div style="width:30ch"><span></span></div>` measured the span
-			// at 30 columns. inline-block keeps the fallback, since its node IS
-			// its box.
+			// browser. The block fallback below would give it the layout node's
+			// width, which for an empty inline is its containing block's.
+			// inline-block keeps the fallback, since its node IS its box.
 			if (display === "inline") {
 				const elementLayoutNode = runLayoutNode(this, element);
 				if (elementLayoutNode) {
@@ -5913,8 +5911,8 @@ export class Layout {
 					return new this.domRect(position.x, position.y, 0, 0);
 				}
 				// An empty inline that does not open its run still has a place:
-				// the cursor the line had reached. Null put the `span` in
-				// `<div>ab<span></span>cd</div>` at 0 rather than 2.
+				// the cursor the line had reached, so the span in
+				// `<div>ab<span></span>cd</div>` sits at 2.
 				const run = getBox(this, element);
 				if (run?.layoutNode) {
 					const origin = getAbsolutePosition(this, run.layoutNode);
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 185babee..ed56a9f8 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -5613,8 +5613,8 @@ function layoutBlock(
 	// so each is measured once at the width it keeps.
 	// While the width is being found, a child's percentage of it is
 	// cyclic and counts as auto (css-sizing-3 §5.2.1). Read against the
-	// probe, `width: 100%` turned every probe into a definite width of
-	// its own, and nested tables were laid out again for each.
+	// probe, `width: 100%` would make every probe a definite width of its
+	// own and lay nested tables out again for each.
 	let borderBoxWidth: number;
 	if (widthSpace === "definite") {
 		borderBoxWidth = availableWidth - marginRow;
diff --git a/tests/document-mode.test.ts b/tests/document-mode.test.ts
index 5ad5eba8..b83b16b1 100644
--- a/tests/document-mode.test.ts
+++ b/tests/document-mode.test.ts
@@ -523,3 +523,18 @@ test("hit-testing finds text in the root's boxes when the body is inline", async
 		.toBe(true);
 	dom.dispose();
 });
+
+test("an element outside the document cannot go fullscreen", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 8});
+	const dom = new TermDOM({transport: terminal.transport});
+	await nextFrame(dom);
+	const heard: string[] = [];
+	dom.document.addEventListener("fullscreenerror", (event) =>
+		heard.push(event.type));
+	const stage = dom.document.createElement("div");
+	await expect(stage.requestFullscreen()).rejects.toThrow(TypeError);
+	await new Promise((resolve) => setTimeout(resolve, 0));
+	expect(heard).toEqual(["fullscreenerror"]);
+	expect(dom.document.fullscreenElement).toBe(null);
+	dom.dispose();
+});
diff --git a/tests/offset-geometry.test.ts b/tests/offset-geometry.test.ts
index b1f2ebbe..4a38addb 100644
--- a/tests/offset-geometry.test.ts
+++ b/tests/offset-geometry.test.ts
@@ -235,3 +235,17 @@ test("offsetParent walks the flat tree and answers only shadow-including ancesto
 	expect(fixed.offsetParent).toBe(null);
 	dom.dispose();
 });
+
+test("an image's x and y are its box's edges from the document's origin", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML =
+		"<p>line</p><p>aa <img width=8 height=16 alt=x></p>";
+	await nextFrame(dom);
+	const image = dom.document.querySelector("img")!;
+	const rect = image.getBoundingClientRect();
+	expect([image.x, image.y]).toEqual([rect.left, rect.top]);
+	expect([image.x, image.y]).not.toEqual([0, 0]);
+	expect(new dom.window.Image().x).toBe(0);
+	dom.dispose();
+});

From faedea93611f3d0e7650371696ce6dc5ad34c0a2 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:21:51 -0400
Subject: [PATCH 20/99] Drop checks for an Event or EventTarget the runtime
 always has, unused parameters and dead branches, and have the typechecker
 refuse new ones

Every supported runtime has Event, EventTarget and Blob, so the guards
for their absence go. insertAdjacentHTML tested whether its context,
always an element, was one. hasRuntimeGlobal tested for names its one
caller never passes. blur() looked the focused element up twice with
nothing between. isDisabled forwarded to isActuallyDisabled with a match
state no one read, and isMutable took that state only to pass it on.
paintOutline and matchingChangedMembers took arguments they never used.

tsconfig now sets noUnusedLocals and noUnusedParameters.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/harness.ts             |  2 +-
 src/index.ts                 |  3 ---
 src/internal/cssselectors.ts | 16 ++++-------
 src/internal/dom.ts          | 51 +++++++++++++-----------------------
 src/internal/painter.ts      | 15 +++++------
 tests/highlights.test.ts     |  2 +-
 tsconfig.json                |  2 ++
 7 files changed, 34 insertions(+), 57 deletions(-)

diff --git a/bench/harness.ts b/bench/harness.ts
index 1d9f0068..cf9e1c93 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -38,7 +38,7 @@ export async function mount(
  * is the engine and not the emulator reading its output.
  */
 export function silence(proc: any): void {
-	proc.stdout.write = (chunk: unknown, enc?: unknown, cb?: unknown) => {
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
 		const callback = typeof enc === "function" ? enc : cb;
 		if (typeof callback === "function") {
 			(callback as () => void)();
diff --git a/src/index.ts b/src/index.ts
index e068971b..04547bd6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1698,9 +1698,6 @@ function hasRuntimeGlobal(name: string): boolean {
 	if (!(name in globalThis)) {
 		return false;
 	}
-	if (name !== "localStorage" && name !== "sessionStorage") {
-		return true;
-	}
 	const emitWarning = process.emitWarning;
 	process.emitWarning = () => {};
 	try {
diff --git a/src/internal/cssselectors.ts b/src/internal/cssselectors.ts
index 26596030..f839f97d 100644
--- a/src/internal/cssselectors.ts
+++ b/src/internal/cssselectors.ts
@@ -1222,12 +1222,11 @@ function compilePseudoClass(
 			compound.tests.push((element) => isDefaultControl(element));
 			return;
 		case "disabled":
-			compound.tests.push(isDisabled);
+			compound.tests.push(isActuallyDisabled);
 			return;
 		case "enabled":
 			compound.tests.push(
-				(element, state) => isDisableable(element) &&
-					!isDisabled(element, state),
+				(element) => isDisableable(element) && !isActuallyDisabled(element),
 			);
 			return;
 		case "valid":
@@ -1261,7 +1260,7 @@ function compilePseudoClass(
 				isRequirable(element) && attributeOf(element, "required") === null);
 			return;
 		case "read-only":
-			compound.tests.push((element, state) => !isMutable(element, state));
+			compound.tests.push((element) => !isMutable(element));
 			return;
 		case "read-write":
 			compound.tests.push(isMutable);
@@ -1599,11 +1598,6 @@ function isDisableable(element: Element): boolean {
 	);
 }
 
-// The selector matches what HTML calls actually disabled.
-function isDisabled(element: Element, _state: MatchState): boolean {
-	return isActuallyDisabled(element);
-}
-
 function isRequirable(element: Element): boolean {
 	if (namespaceOf(element) !== HTML_NAMESPACE) {
 		return false;
@@ -1621,7 +1615,7 @@ function isRequirable(element: Element): boolean {
 
 // `:read-write`: a text control the user can type into, or anything an
 // editing host contains.
-function isMutable(element: Element, state: MatchState): boolean {
+function isMutable(element: Element): boolean {
 	if (namespaceOf(element) === HTML_NAMESPACE) {
 		const name = localNameOf(element);
 		if (name === "input" || name === "textarea") {
@@ -1631,7 +1625,7 @@ function isMutable(element: Element, state: MatchState): boolean {
 			if (READONLY_INPUT_TYPES.has(type)) {
 				return (
 					attributeOf(element, "readonly") === null &&
-					!isDisabled(element, state)
+					!isActuallyDisabled(element)
 				);
 			}
 		}
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 8eae4995..edea2e0d 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -1288,9 +1288,7 @@ const isTrustedProperty: PropertyDescriptor = {
 // is in. It also marks the events the engine fires itself.
 let internalConstruction = false;
 
-const RuntimeEvent: typeof globalThis.Event | undefined = (
-	globalThis as {Event?: typeof globalThis.Event}
-).Event;
+const RuntimeEvent = globalThis.Event;
 
 function probeRuntimeEvent(
 	Runtime: typeof globalThis.Event,
@@ -1316,7 +1314,6 @@ function probeRuntimeEvent(
 // Deno's Event constructor writes a toStringTag onto each event, which a
 // read-only one on a subclass's prototype refuses.
 const runtimeTagsEvents =
-	RuntimeEvent !== undefined &&
 	probeRuntimeEvent(RuntimeEvent, false) === null &&
 	probeRuntimeEvent(RuntimeEvent, true) !== null;
 
@@ -1347,9 +1344,7 @@ const constructsRuntimeEvents =
 	runtimeEventSupport === "construct" || runtimeEventSupport === "untrusted";
 
 function runtimeEventMember(name: string): PropertyDescriptor | undefined {
-	return RuntimeEvent === undefined
-		? undefined
-		: Object.getOwnPropertyDescriptor(RuntimeEvent.prototype, name);
+	return Object.getOwnPropertyDescriptor(RuntimeEvent.prototype, name);
 }
 
 const runtimeEventPhase = runtimeEventMember("eventPhase")?.get;
@@ -1371,7 +1366,7 @@ const EventBase = (
 	constructsRuntimeEvents ? RuntimeEvent : function EventBase(): void {}
 ) as unknown as new (type: string, init: globalThis.EventInit) => object;
 
-if (RuntimeEvent !== undefined && !constructsRuntimeEvents) {
+if (!constructsRuntimeEvents) {
 	EventBase.prototype = Object.create(RuntimeEvent.prototype) as object;
 }
 
@@ -1422,7 +1417,7 @@ function makeEventTagsWritable(type: object): void {
 	writableTagTypes.add(type);
 	for (
 		let prototype = (type as {prototype: object}).prototype;
-		prototype !== RuntimeEvent!.prototype;
+		prototype !== RuntimeEvent.prototype;
 		prototype = Object.getPrototypeOf(prototype) as object
 	) {
 		const tag = Object.getOwnPropertyDescriptor(prototype, Symbol.toStringTag);
@@ -4222,14 +4217,8 @@ const NO_LISTENERS = Object.freeze([]) as unknown as Listener[];
 const EventTargetBase = function EventTargetBase(): void {} as unknown as
 	new () => object;
 
-const RuntimeEventTarget = (
-	globalThis as {EventTarget?: typeof globalThis.EventTarget}
-).EventTarget;
-
-if (RuntimeEventTarget !== undefined) {
-	EventTargetBase.prototype =
-		Object.create(RuntimeEventTarget.prototype) as object;
-}
+EventTargetBase.prototype =
+	Object.create(globalThis.EventTarget.prototype) as object;
 
 export interface EventTargetSlots {
 	listeners: Listener[];
@@ -5100,7 +5089,7 @@ function dispatchFromOutside(
 	const state = isSealed(event) ? _(event).state : undefined;
 	if (state === undefined) {
 		const given: unknown = event;
-		if (RuntimeEvent !== undefined && given instanceof RuntimeEvent) {
+		if (given instanceof RuntimeEvent) {
 			return dispatchRuntimeEvent(target, given, trusted);
 		}
 		throw new TypeError("dispatchEvent needs an Event");
@@ -8543,7 +8532,7 @@ class HTMLCollection {
 	): Node[] | null {
 		const matches = this.matches;
 		if (matches !== undefined) {
-			return matchingChangedMembers(ownerOf(this), matches, changed);
+			return matchingChangedMembers(matches, changed);
 		}
 		const members = LiveList.prototype._changedMembers.call(this, changed);
 		if (members === null || isNameless(members)) {
@@ -8733,7 +8722,6 @@ function createMatchingHTMLCollection(
 // Runs the test over the changed subtree rather than over the tree it
 // moved in or out of.
 function matchingChangedMembers(
-	collection: HTMLCollection,
 	matches: (element: Element) => boolean,
 	changed: readonly Node[],
 ): Node[] | null {
@@ -10888,7 +10876,7 @@ export class Element extends Node implements globalThis.Element {
 
 	insertAdjacentHTML(position: InsertPosition, text: string): void {
 		const where = toASCIILowercase(String(position));
-		let context: Node;
+		let context: Element;
 		const slots = _(this);
 		switch (where) {
 			case "beforebegin":
@@ -10901,7 +10889,7 @@ export class Element extends Node implements globalThis.Element {
 					);
 				}
 				context = nodeTypeOf(parent) === ELEMENT_NODE
-					? parent
+					? parent as Element
 					: createElementInternal(slots.document, "body", HTML_NAMESPACE);
 				break;
 			}
@@ -10912,16 +10900,14 @@ export class Element extends Node implements globalThis.Element {
 			default:
 				throw domError("SyntaxError", `"${position}" is not a position`);
 		}
-		let element = context as Element;
 		if (
-			nodeTypeOf(element) !== ELEMENT_NODE ||
-			(isHTMLDocument(_(element).document) &&
-				_(element).localName === "html" &&
-				_(element).namespace === HTML_NAMESPACE)
+			isHTMLDocument(_(context).document) &&
+			_(context).localName === "html" &&
+			_(context).namespace === HTML_NAMESPACE
 		) {
-			element = createElementInternal(slots.document, "body", HTML_NAMESPACE);
+			context = createElementInternal(slots.document, "body", HTML_NAMESPACE);
 		}
-		const fragment = parseHTMLFragment(String(text), element);
+		const fragment = parseHTMLFragment(String(text), context);
 		switch (where) {
 			case "beforebegin":
 				preInsert(fragment, objectOf(slots.parent) as Node, this);
@@ -12183,7 +12169,7 @@ export class HTMLElement extends Element {
 			(innermost as HTMLElement).blur();
 			return;
 		}
-		const wasFocused = getInnermostActive(document) === this;
+		const wasFocused = innermost === this;
 		if (wasFocused) {
 			commitTextControl(this);
 		}
@@ -15791,7 +15777,7 @@ class HTMLCanvasElement extends HTMLElement {
 
 	toBlob(
 		callback: globalThis.BlobCallback,
-		type?: string,
+		_type?: string,
 		_quality?: number,
 	): void {
 		if (typeof callback !== "function") {
@@ -15803,7 +15789,6 @@ class HTMLCanvasElement extends HTMLElement {
 		const bytes = bitmap === null || bitmap.width === 0 || bitmap.height === 0
 			? null
 			: encodePNG(bitmap);
-		void type;
 		setTimeout(() =>
 			callback(
 				bytes === null
@@ -38498,7 +38483,7 @@ export class Window extends EventTarget {
 				crop ? sh : undefined,
 			) as unknown as globalThis.ImageBitmap;
 		// A Blob is decoded first; an image still loading is waited for.
-		if (typeof Blob !== "undefined" && image instanceof Blob) {
+		if (image instanceof Blob) {
 			return image.arrayBuffer()
 				.then((buffer) => decodeImageOffThread(new Uint8Array(buffer)))
 				.then((bitmap) => settle(new ImageBitmap(bitmap)));
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index c17d63e5..ce700399 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -740,7 +740,7 @@ function paintBlock(
 
 	if (isReplacedBox(element)) {
 		paintReplaced(element, style, rect, ctx);
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 
@@ -749,13 +749,13 @@ function paintBlock(
 		if (style.visible) {
 			renderMath(painter, element, rect, ctx);
 		}
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	paintContent(painter, element, style, rect, ctx, (origin) => {
 		paintNodes(painter, node, origin, ctx);
 	});
-	paintOutline(painter, element, style, rect, ctx);
+	paintOutline(element, style, rect, ctx);
 }
 
 function paintContent(
@@ -1071,7 +1071,6 @@ function paintBox(
 // box's fragments, so an inline broken across lines is marked along
 // its own text on each line and not across the union of them.
 function paintOutline(
-	painter: Painter,
 	element: Element,
 	style: PaintStyle,
 	rect: Rect,
@@ -1273,7 +1272,7 @@ function paintInline(
 		paintMember(painter, child, run, ctx);
 	}
 	if (rect !== null) {
-		paintOutline(painter, element, style, rect, ctx, fragments);
+		paintOutline(element, style, rect, ctx, fragments);
 	}
 }
 
@@ -1351,14 +1350,14 @@ function paintAtomic(
 
 	if (isReplacedBox(element)) {
 		paintReplaced(element, style, rect, ctx);
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	if (isMathRoot(element)) {
 		if (style.visible) {
 			renderMath(painter, element, rect, ctx);
 		}
-		paintOutline(painter, element, style, rect, ctx);
+		paintOutline(element, style, rect, ctx);
 		return;
 	}
 	paintContent(painter, element, style, rect, ctx, (origin) => {
@@ -1378,7 +1377,7 @@ function paintAtomic(
 			);
 		}
 	});
-	paintOutline(painter, element, style, rect, ctx);
+	paintOutline(element, style, rect, ctx);
 }
 
 function resolveRun(
diff --git a/tests/highlights.test.ts b/tests/highlights.test.ts
index 34b8f076..0b208145 100644
--- a/tests/highlights.test.ts
+++ b/tests/highlights.test.ts
@@ -111,7 +111,7 @@ test("the registry is a map, and re-registering a name moves it last", () => {
 	expect([...registry.keys()]).toEqual(["second", "first"]);
 
 	const names: string[] = [];
-	registry.forEach((value: unknown, key: string, parent: unknown) => {
+	registry.forEach((_value: unknown, key: string, parent: unknown) => {
 		names.push(key);
 		expect(parent).toBe(registry);
 	});
diff --git a/tsconfig.json b/tsconfig.json
index 5677d7be..05bd3319 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,8 @@
     "strict": true,
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noImplicitOverride": true
   },
   "include": ["src", "tests", "fuzz", "examples", "scripts", "bench"],

From f1f7ef2e3ecdd73ae87dd5019338c9379ec15500 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:25:02 -0400
Subject: [PATCH 21/99] Call what one-line wrappers stood for, and stop
 exporting what no other module reads

canvas.ts's domException(name, message) only built a DOMException with
its arguments the other way round, so the twelve calls build it
themselves. resetCanvasContext, getCaretColumn, createBeforeUnloadEvent
and hasPaintContainment each forwarded to one call at one or two sites.
getValidityState set the internal construction flag by hand where
constructInternal does it. text.ts tested for a control byte by hand
beside its own isControlByte, and the inspector wrote a closing angle
bracket on two paths that could share it.

Eleven exports nothing outside their module imports are module-local.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/canvas.ts    | 39 ++++++++++++++++++------------------
 src/internal/cssom.ts     |  6 +-----
 src/internal/dom.ts       | 42 +++++++++++----------------------------
 src/internal/exchange.ts  |  2 +-
 src/internal/inspector.ts |  4 +---
 src/internal/mathml.ts    |  8 ++------
 src/internal/resources.ts |  2 +-
 src/internal/slots.ts     |  2 +-
 src/internal/text.ts      |  2 +-
 src/internal/webidl.ts    |  5 +----
 10 files changed, 40 insertions(+), 72 deletions(-)

diff --git a/src/internal/canvas.ts b/src/internal/canvas.ts
index f14c7c01..ad40e05c 100644
--- a/src/internal/canvas.ts
+++ b/src/internal/canvas.ts
@@ -114,9 +114,9 @@ export class ImageData {
 			width = Math.floor(dataOrWidth);
 			height = Math.floor(widthOrHeight);
 			if (!(width > 0) || !(height > 0)) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The width and height must be positive",
+					"IndexSizeError",
 				);
 			}
 			if (width * height > MAX_IMAGE_PIXELS) {
@@ -131,16 +131,16 @@ export class ImageData {
 			if (
 				!(width > 0) || data.length === 0 || data.length % (4 * width) !== 0
 			) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The data does not hold whole rows of that width",
+					"IndexSizeError",
 				);
 			}
 			const rows = data.length / (4 * width);
 			if (height !== undefined && Math.floor(height) !== rows) {
-				throw domException(
-					"IndexSizeError",
+				throw new DOMException(
 					"The data does not hold that many rows",
+					"IndexSizeError",
 				);
 			}
 			height = rows;
@@ -198,9 +198,9 @@ export function createImageBitmapFrom(
 ): ImageBitmap {
 	const bitmap = readDrawable(source);
 	if (bitmap === null) {
-		throw domException(
-			"InvalidStateError",
+		throw new DOMException(
 			"The image has nothing to copy yet",
+			"InvalidStateError",
 		);
 	}
 	const x = Math.floor(sx ?? 0);
@@ -208,7 +208,7 @@ export function createImageBitmapFrom(
 	const width = Math.floor(sw ?? naturalWidthOf(bitmap));
 	const height = Math.floor(sh ?? naturalHeightOf(bitmap));
 	if (width <= 0 || height <= 0) {
-		throw domException("IndexSizeError", "The crop rectangle is empty");
+		throw new DOMException("The crop rectangle is empty", "IndexSizeError");
 	}
 	if (bitmap.width === naturalWidthOf(bitmap)) {
 		const copy = createBitmap(width, height);
@@ -280,10 +280,6 @@ function copyRect(
 	}
 }
 
-function domException(name: string, message: string): Error {
-	return new DOMException(message, name);
-}
-
 // ---------------------------------------------------------------------------
 // Colors.
 
@@ -550,7 +546,7 @@ class PathBuilder {
 			return;
 		}
 		if (rx < 0 || ry < 0) {
-			throw domException("IndexSizeError", "The radius is negative");
+			throw new DOMException("The radius is negative", "IndexSizeError");
 		}
 		// HTML's sweep rules: a full turn or more draws the whole ellipse,
 		// and otherwise the sweep is brought into (0, 2π) in its direction.
@@ -605,7 +601,7 @@ class PathBuilder {
 			return;
 		}
 		if (radius < 0) {
-			throw domException("IndexSizeError", "The radius is negative");
+			throw new DOMException("The radius is negative", "IndexSizeError");
 		}
 		this.ensure(x1, y1);
 		const [x0, y0] = this.last!;
@@ -1459,11 +1455,11 @@ export class CanvasGradient {
 
 	addColorStop(offset: number, color: string): void {
 		if (!Number.isFinite(offset) || offset < 0 || offset > 1) {
-			throw domException("IndexSizeError", "The offset is outside 0 to 1");
+			throw new DOMException("The offset is outside 0 to 1", "IndexSizeError");
 		}
 		const parsed = parseCanvasColor(String(color));
 		if (parsed === null) {
-			throw domException("SyntaxError", "The color does not parse");
+			throw new DOMException("The color does not parse", "SyntaxError");
 		}
 		// A stop at an equal offset goes after the ones there already.
 		const slots = _(this);
@@ -2179,7 +2175,7 @@ export class CanvasRenderingContext2D {
 			throw new TypeError("The gradient's circles must be finite");
 		}
 		if (r0 < 0 || r1 < 0) {
-			throw domException("IndexSizeError", "A radius is negative");
+			throw new DOMException("A radius is negative", "IndexSizeError");
 		}
 		// The largest t whose circle passes through the point (HTML's
 		// two-circle gradient), solved as a quadratic.
@@ -2231,7 +2227,10 @@ export class CanvasRenderingContext2D {
 		const bitmap = readDrawable(image);
 		const mode = repetition ?? "";
 		if (!["", "repeat", "repeat-x", "repeat-y", "no-repeat"].includes(mode)) {
-			throw domException("SyntaxError", "The repetition is not one HTML names");
+			throw new DOMException(
+				"The repetition is not one HTML names",
+				"SyntaxError",
+			);
 		}
 		if (bitmap === null || bitmap.width === 0 || bitmap.height === 0) {
 			return null;
@@ -2706,7 +2705,7 @@ export class CanvasRenderingContext2D {
 			throw new TypeError("The rectangle must be finite");
 		}
 		if (sw === 0 || sh === 0) {
-			throw domException("IndexSizeError", "The rectangle is empty");
+			throw new DOMException("The rectangle is empty", "IndexSizeError");
 		}
 		if (sw < 0) {
 			sx += sw;
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index f83d2136..00ff843d 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -3989,10 +3989,6 @@ function hasContainment(element: Element, kinds: Set<string>): boolean {
 		.some((keyword) => kinds.has(keyword));
 }
 
-function hasPaintContainment(element: Element): boolean {
-	return hasContainment(element, PAINT_CONTAINMENT);
-}
-
 export function hasLayoutOrPaintContainment(element: Element): boolean {
 	return hasContainment(element, LAYOUT_OR_PAINT_CONTAINMENT);
 }
@@ -4003,7 +3999,7 @@ export function getUsedOverflow(element: Element, axis: "x" | "y"): string {
 	const overflow =
 		getComputedValue(element, axis === "x" ? "overflow-x" : "overflow-y") ||
 		getComputedValue(element, "overflow");
-	return overflow === "visible" && hasPaintContainment(element)
+	return overflow === "visible" && hasContainment(element, PAINT_CONTAINMENT)
 		? "clip"
 		: overflow;
 }
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index edea2e0d..25df3a2c 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -4438,7 +4438,7 @@ export class SealedAbortSignal extends EventTarget {
 }
 
 /** Whether `value` is one of this DOM's AbortSignals. */
-export function isAbortSignal(value: unknown): value is SealedAbortSignal {
+function isAbortSignal(value: unknown): value is SealedAbortSignal {
 	return (
 		typeof value === "object" &&
 		value !== null &&
@@ -4474,7 +4474,7 @@ function followRuntimeSignal(
 }
 
 /** Runs `algorithm` when `signal` aborts, as the DOM's specs do. */
-export function addAbortAlgorithm(
+function addAbortAlgorithm(
 	signal: SealedAbortSignal,
 	algorithm: () => void,
 ): void {
@@ -15847,7 +15847,9 @@ class HTMLCanvasElement extends HTMLElement {
 			const context = slots.extra.canvasContext;
 			if (context instanceof CanvasRenderingContext2D) {
 				clearCanvasText(context);
-				resetCanvasContext(context);
+				// A resize resets the context to its default state (HTML
+				// §4.12.5.1.1).
+				resetContextState(context);
 			}
 			slots.extra.canvasVersion++;
 			invalidateReplaced(ownerOf(this), true);
@@ -15923,12 +15925,6 @@ function fitCanvasGrid(
 	return cells;
 }
 
-// Resizing a canvas resets its context to the default state (HTML
-// §4.12.5.1.1), which is what reset() does apart from clearing.
-function resetCanvasContext(context: CanvasRenderingContext2D): void {
-	resetContextState(context);
-}
-
 /**
  * Every <img> and <canvas> in a tree, shadow trees included, laid out
  * again: their natural sizes in cells changed with the cell's size.
@@ -25255,13 +25251,8 @@ function setCustomValidity(element: Element, error: string): void {
 function getValidityState(element: Element): ValidityState {
 	let state = validityStates.get(element);
 	if (state === undefined) {
-		const previous = internalConstruction;
-		internalConstruction = true;
-		try {
-			state = new ValidityState(() => getValidityFlags(element));
-		} finally {
-			internalConstruction = previous;
-		}
+		state = constructInternal(() =>
+			new ValidityState(() => getValidityFlags(element)));
 		validityStates.set(element, state);
 	}
 	return state;
@@ -32183,11 +32174,6 @@ function getSelectionLine(lines: SelectionLine[], index: number): number {
 	return lines.length - 1;
 }
 
-function getCaretColumn(layout: Layout, point: [Node, number]): number | null {
-	const rect = layout.getCaretRect(point[0], point[1]);
-	return rect === null ? null : rect.x;
-}
-
 // Moving up from the first line or down from the last line goes to that
 // line's end, as a browser's arrow key does. The column is a screen
 // column and the target is a screen row, so the landing offset comes
@@ -32212,7 +32198,7 @@ function selectionLineMove(
 	if (target >= lines.length) {
 		return getSelectionPoint(run, lines[lines.length - 1].end);
 	}
-	const column = getCaretColumn(layout, from);
+	const column = layout.getCaretRect(from[0], from[1])?.x ?? null;
 	// Within the target line's own block. Scrolled out of its box, the
 	// line shares its rows with whatever covers them there, and a search of
 	// the whole document landed in that instead.
@@ -38426,7 +38412,7 @@ export class Window extends EventTarget {
 		if (attached === undefined) {
 			return;
 		}
-		const event = createBeforeUnloadEvent();
+		const event = constructInternal(() => new BeforeUnloadEvent());
 		dispatchAsUserAgent(this, event);
 		if (event.defaultPrevented || event.returnValue !== "") {
 			return;
@@ -38588,10 +38574,6 @@ export class Window extends EventTarget {
 	stop(): void {}
 }
 
-function createBeforeUnloadEvent(): BeforeUnloadEvent {
-	return constructInternal(() => new BeforeUnloadEvent());
-}
-
 // A window has both event handler mixins the HTML Standard gives it:
 // GlobalEventHandlers, shared with elements and documents, and
 // WindowEventHandlers, whose members exist as attributes whether or not
@@ -39208,7 +39190,7 @@ export function insertBeforeOf<T extends globalThis.Node>(
 }
 
 /** Node's removeChild, for the engine's own calls. */
-export function removeChildOf<T extends globalThis.Node>(
+function removeChildOf<T extends globalThis.Node>(
 	parent: globalThis.Node,
 	child: T,
 ): T {
@@ -39253,7 +39235,7 @@ export function setAttributeOf(
 }
 
 /** Element's removeAttribute, for the engine's own calls. */
-export function removeAttributeOf(
+function removeAttributeOf(
 	element: globalThis.Element,
 	qualifiedName: string,
 ): void {
@@ -39265,7 +39247,7 @@ export function removeAttributeOf(
 }
 
 /** Element's toggleAttribute, for the engine's own calls. */
-export function toggleAttributeOf(
+function toggleAttributeOf(
 	element: globalThis.Element,
 	qualifiedName: string,
 	force?: boolean,
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index b0af53ac..60ef842e 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -2393,7 +2393,7 @@ const STOP_CHECK = 50;
 const STOP_GRACE = 1000;
 
 // The size a terminal that reports none is taken to have, as a VT100's.
-export const DEFAULT_COLS = 80;
+const DEFAULT_COLS = 80;
 export const DEFAULT_ROWS = 24;
 
 /**
diff --git a/src/internal/inspector.ts b/src/internal/inspector.ts
index 47ae15d7..b6eb8473 100644
--- a/src/internal/inspector.ts
+++ b/src/internal/inspector.ts
@@ -119,13 +119,11 @@ function inspectElement(
 		"track",
 		"wbr",
 	];
+	output += `${c.tag}>${c.reset}`;
 	if (selfClosing.includes(tagName)) {
-		output += `${c.tag}>${c.reset}`;
 		return output;
 	}
 
-	output += `${c.tag}>${c.reset}`;
-
 	if (currentDepth < maxDepth && element.childNodes.length > 0) {
 		const childrenStr = formatChildren(element, {
 			...options,
diff --git a/src/internal/mathml.ts b/src/internal/mathml.ts
index c5faaaa0..a75acc10 100644
--- a/src/internal/mathml.ts
+++ b/src/internal/mathml.ts
@@ -590,11 +590,7 @@ export function layoutMath(element: Element, display: boolean): MathBox {
 	return layoutRow(getLayoutChildren(element), element, context);
 }
 
-export function createEmptyBox(
-	width: number,
-	height = 1,
-	baseline = 0,
-): MathBox {
+function createEmptyBox(width: number, height = 1, baseline = 0): MathBox {
 	const cells: MathCell[][] = [];
 	for (let row = 0; row < height; row++) {
 		cells.push(blankRow(width));
@@ -786,7 +782,7 @@ export function getMathCellRects(
 	return rects;
 }
 
-export function getDescent(box: MathBox): number {
+function getDescent(box: MathBox): number {
 	return box.height - box.baseline - 1;
 }
 
diff --git a/src/internal/resources.ts b/src/internal/resources.ts
index 927f4c0b..2e4369ac 100644
--- a/src/internal/resources.ts
+++ b/src/internal/resources.ts
@@ -25,7 +25,7 @@ export function isWindowFetch(value: unknown): boolean {
 	return typeof value === "function" && windowFetches.has(value);
 }
 
-export function networkFetch(request: Request): Promise<Response> {
+function networkFetch(request: Request): Promise<Response> {
 	const current = globalThis.fetch;
 	return isWindowFetch(current) ? runtimeFetch(request) : current(request);
 }
diff --git a/src/internal/slots.ts b/src/internal/slots.ts
index 7d5f61a8..b62a59c7 100644
--- a/src/internal/slots.ts
+++ b/src/internal/slots.ts
@@ -651,7 +651,7 @@ export function superStep(
 }
 
 /** The internal step `key` as `type` defines or inherits it. */
-export function hiddenMember(
+function hiddenMember(
 	type: Constructor,
 	key: string,
 ): (this: object, ...args: unknown[]) => unknown {
diff --git a/src/internal/text.ts b/src/internal/text.ts
index a9c15c07..cdf224d6 100644
--- a/src/internal/text.ts
+++ b/src/internal/text.ts
@@ -246,7 +246,7 @@ function getGraphemeWidth(cluster: string): number {
 
 	const code = cluster.codePointAt(0)!;
 
-	if (code < 32 || (code >= 0x7f && code < 0xa0)) {
+	if (isControlByte(code)) {
 		return 0;
 	}
 
diff --git a/src/internal/webidl.ts b/src/internal/webidl.ts
index 6cfc53bb..0f1e97f0 100644
--- a/src/internal/webidl.ts
+++ b/src/internal/webidl.ts
@@ -125,10 +125,7 @@ function parseCheck(
 const lineages = new Map<Constructor, Set<Constructor>>();
 
 /** Whether objects `type` makes implement `owner`'s interface. */
-export function implementsInterface(
-	type: Constructor,
-	owner: Constructor,
-): boolean {
+function implementsInterface(type: Constructor, owner: Constructor): boolean {
 	let lineage = lineages.get(type);
 	if (lineage === undefined) {
 		lineage = new Set();

From 1d00436ccc55206840951d1a5d95262f5ff88be3 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:30:03 -0400
Subject: [PATCH 22/99] Write each repeated piece of logic once: a URL
 attribute's read, a scroll container test, collapsing a selection to an edge

The url reflection, a hyperlink's href and its toString resolved the
attribute against the base URL in three copies. Layout asked whether
either axis scrolls in three places. collapseToStart and collapseToEnd
differed in which boundary point they took. getChildElementsNamed
repeated isHTMLElementNamed, and the document's named collections walked
the tree by hand beside getDescendantElements.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts    | 105 +++++++++++++++++------------------------
 src/internal/layout.ts |  33 +++++--------
 2 files changed, 55 insertions(+), 83 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 25df3a2c..e9fe736b 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -14947,6 +14947,18 @@ function parseURL(value: string, base: string): string | null {
 	}
 }
 
+// A URL attribute as its reflecting property reads it: resolved against
+// the document's base URL, the trimmed text when that fails, and "" when
+// the attribute is absent.
+function getURLAttribute(element: Element, attribute: string): string {
+	const value = attributeOf(element, attribute);
+	if (value === null) {
+		return "";
+	}
+	const trimmed = trimASCIIWhitespace(value);
+	return parseURL(trimmed, getDocumentBaseURL(_(element).document)) ?? trimmed;
+}
+
 // The href of the first base element that has one, resolved against the
 // document's URL. Falls back to the document's URL when there is no such
 // element or its href does not parse.
@@ -15049,13 +15061,7 @@ function installReflection(prototype: object, spec: ReflectSpec): void {
 			break;
 		case "url":
 			get = function (this: Element): string {
-				const value = attributeOf(this, attribute);
-				if (value === null) {
-					return "";
-				}
-				const trimmed = trimASCIIWhitespace(value);
-				return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ??
-					trimmed;
+				return getURLAttribute(this, attribute);
 			};
 			set = function (this: Element, value: unknown): void {
 				setAttributeOf(this, attribute, String(value));
@@ -15252,12 +15258,7 @@ function createHyperlinkPart(
 const hyperlinkMembers: PropertyDescriptorMap = {
 	href: {
 		get(this: Element): string {
-			const value = attributeOf(this, "href");
-			if (value === null) {
-				return "";
-			}
-			const trimmed = trimASCIIWhitespace(value);
-			return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ?? trimmed;
+			return getURLAttribute(this, "href");
 		},
 		set(this: Element, value: string): void {
 			setAttributeOf(this, "href", String(value));
@@ -15338,12 +15339,7 @@ const hyperlinkMembers: PropertyDescriptorMap = {
 	),
 	toString: {
 		value: function toString(this: Element): string {
-			const value = attributeOf(this, "href");
-			if (value === null) {
-				return "";
-			}
-			const trimmed = trimASCIIWhitespace(value);
-			return parseURL(trimmed, getDocumentBaseURL(_(this).document)) ?? trimmed;
+			return getURLAttribute(this, "href");
 		},
 		writable: true,
 		enumerable: true,
@@ -22325,15 +22321,8 @@ function getChildElementsNamed(parent: Node, localName: string): Element[] {
 		nodeSlots !== null;
 		nodeSlots = nodeSlots.next) {
 		const node = objectOf(nodeSlots);
-		if (nodeTypeOf(node) !== ELEMENT_NODE) {
-			continue;
-		}
-		const element = node as Element;
-		if (
-			_(element).namespace === HTML_NAMESPACE &&
-			_(element).localName === localName
-		) {
-			found.push(element);
+		if (isHTMLElementNamed(node, localName)) {
+			found.push(node as Element);
 		}
 	}
 	return found;
@@ -28375,15 +28364,10 @@ function getDocumentCollection(
 	let collection = collections.get(kind);
 	if (collection === undefined) {
 		collection = live(
-			new HTMLCollection(() => {
-				const found: Element[] = [];
-				for (const node of descendants(document)) {
-					if (nodeTypeOf(node) === ELEMENT_NODE && match(node as Element)) {
-						found.push(node as Element);
-					}
-				}
-				return found;
-			}, document, null, watched),
+			new HTMLCollection(() =>
+				getDescendantElements(document, []).filter(
+					match,
+				), document, null, watched),
 		);
 		collections.set(kind, collection);
 	}
@@ -31347,6 +31331,25 @@ interface SelectionSlots {
 	direction: "forwards" | "backwards" | "directionless";
 }
 
+function collapseSelectionToEdge(selection: Selection, start: boolean): void {
+	const slots = _(selection);
+	const range = slots.range;
+	if (range === null) {
+		throw domError("InvalidStateError", "The selection has no range");
+	}
+	const rangeSlots = _(range);
+	const point: [Node, number] = start
+		? [rangeSlots.startNode, rangeSlots.startOffset]
+		: [rangeSlots.endNode, rangeSlots.endOffset];
+	associateSelectionRange(
+		selection,
+		createRangeBetween(selection, point, point),
+		point,
+		point,
+		slots.direction,
+	);
+}
+
 interface Selection {
 	readonly [internals]: SelectionSlots;
 }
@@ -31601,35 +31604,11 @@ class Selection implements globalThis.Selection {
 	}
 
 	collapseToStart(): void {
-		const slots = _(this);
-		const range = slots.range;
-		if (range === null) {
-			throw domError("InvalidStateError", "The selection has no range");
-		}
-		const point: [Node, number] = [_(range).startNode, _(range).startOffset];
-		associateSelectionRange(
-			this,
-			createRangeBetween(this, point, point),
-			point,
-			point,
-			slots.direction,
-		);
+		collapseSelectionToEdge(this, true);
 	}
 
 	collapseToEnd(): void {
-		const slots = _(this);
-		const range = slots.range;
-		if (range === null) {
-			throw domError("InvalidStateError", "The selection has no range");
-		}
-		const point: [Node, number] = [_(range).endNode, _(range).endOffset];
-		associateSelectionRange(
-			this,
-			createRangeBetween(this, point, point),
-			point,
-			point,
-			slots.direction,
-		);
+		collapseSelectionToEdge(this, false);
 	}
 
 	extend(node: Node, offset = 0): void {
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 0e47bbbb..49c899a9 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -711,11 +711,7 @@ function applyMinMax(style: Style, element: Element): void {
 	style.maxHeight = read("max-height", true);
 	// A scroll container's content scrolls rather than sizes it, so its
 	// automatic minimum is zero (css-flexbox-1 §4.5, css-grid-2 §6.6).
-	const overflow = getComputedValue(element, "overflow");
-	if (
-		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow) ||
-		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow)
-	) {
+	if (isScrollContainer(element)) {
 		for (const key of ["minWidth", "minHeight"] as const) {
 			if (style[key].unit === "auto" || style[key].unit === "undefined") {
 				style[key] = toValue(0);
@@ -4618,14 +4614,7 @@ function getScrollOwner(layout: Layout, node: LayoutNode): Element | null {
 
 function scrollsContent(layout: Layout, node: LayoutNode): boolean {
 	const element = getScrollOwner(layout, node);
-	if (element === null) {
-		return false;
-	}
-	const overflow = getComputedValue(element, "overflow");
-	return (
-		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow) ||
-		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow)
-	);
+	return element !== null && isScrollContainer(element);
 }
 
 // A sticky box is laid out in flow and then moved, as far as the box it
@@ -7798,13 +7787,7 @@ function revealRectInScrollPorts(
 		ancestor && !isRootBox(engine, ancestor);
 		ancestor = flatParentElement(ancestor)
 	) {
-		const overflow = getComputedValue(ancestor, "overflow");
-		if (
-			isScrollingOverflow(
-				getComputedValue(ancestor, "overflow-y") || overflow,
-			) ||
-			isScrollingOverflow(getComputedValue(ancestor, "overflow-x") || overflow)
-		) {
+		if (isScrollContainer(ancestor)) {
 			revealInPort(engine, getRect(), ancestor, block, inline);
 		}
 	}
@@ -7844,3 +7827,13 @@ function revealInPort(
 function isScrollingOverflow(overflow: string): boolean {
 	return overflow === "auto" || overflow === "scroll" || overflow === "hidden";
 }
+
+// Whether either axis clips its content into a scroll port. A longhand
+// left unset takes the shorthand's value.
+function isScrollContainer(element: Element): boolean {
+	const overflow = getComputedValue(element, "overflow");
+	return (
+		isScrollingOverflow(getComputedValue(element, "overflow-x") || overflow) ||
+		isScrollingOverflow(getComputedValue(element, "overflow-y") || overflow)
+	);
+}

From 0efa2c29382a9dfc1db2219ac55ce6a65cc05820 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:34:00 -0400
Subject: [PATCH 23/99] Look a custom element's definition up in one function,
 and drop a popover forwarder and a hand-written focus walk

lookUpCustomElementDefinition only checked for a null registry before
calling lookUpDefinition, which nothing else called. hidePopoversUntil
forwarded to hidePopoverStackUntil for one caller. dropUnfocusableFocus
walked through shadow roots to the focused element as getFocusedElement
does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts | 61 +++++++++++----------------------------------
 1 file changed, 15 insertions(+), 46 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index e9fe736b..343e25e6 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -13867,13 +13867,18 @@ function toCallback(
 	return value as (...args: unknown[]) => void;
 }
 
-function lookUpDefinition(
-	registry: CustomElementRegistry,
+// Every node has a registry. An element takes its document's when
+// created and the tree's when inserted. A shadow root takes its host's
+// unless the caller named another. A node created for a registry that
+// has not been assigned one yet has null, which matches no definition
+// until a registry claims it.
+function lookUpCustomElementDefinition(
+	registry: CustomElementRegistry | null,
 	namespace: string | null,
 	localName: string,
 	is: string | null,
 ): CustomElementDefinition | null {
-	if (namespace !== HTML_NAMESPACE) {
+	if (registry === null || namespace !== HTML_NAMESPACE) {
 		return null;
 	}
 	const registrySlots = _(registry);
@@ -13930,23 +13935,6 @@ function createWindowRegistry(): CustomElementRegistry {
 	return constructInternal(() => new CustomElementRegistry());
 }
 
-// Every node has a registry. An element takes its document's when
-// created and the tree's when inserted. A shadow root takes its host's
-// unless the caller named another. A node created for a registry that
-// has not been assigned one yet has null, which matches no definition
-// until a registry claims it.
-function lookUpCustomElementDefinition(
-	registry: CustomElementRegistry | null,
-	namespace: string | null,
-	localName: string,
-	is: string | null,
-): CustomElementDefinition | null {
-	if (registry === null) {
-		return null;
-	}
-	return lookUpDefinition(registry, namespace, localName, is);
-}
-
 // Walks the node tree only. A shadow tree under an element keeps
 // whatever registry it was given, which is the point of scoping one.
 function associateRegistry(
@@ -23570,22 +23558,6 @@ function hidePopoverStackUntil(
 	}
 }
 
-// Run by both light dismiss and an opening popover. With no hint stack,
-// this is just the auto stack's version.
-function hidePopoversUntil(
-	document: globalThis.Document,
-	endpoint: globalThis.Element | null,
-	focusPreviousElement: boolean,
-	fireEvents: boolean,
-): void {
-	hidePopoverStackUntil(
-		document as Document,
-		endpoint as Element | null,
-		focusPreviousElement,
-		fireEvents,
-	);
-}
-
 // The open auto popover a node belongs to, either by sitting inside it
 // in the flat tree or by being invoked from inside it. Returns the LAST
 // such popover in the stack, so everything above it is exactly what is
@@ -24022,7 +23994,12 @@ export function lightDismissRelease(
 	}
 	const document = _((target as Element)).document;
 	if (getTopmostAutoPopover(document) !== null) {
-		hidePopoversUntil(document, dismissAncestor, false, true);
+		hidePopoverStackUntil(
+			document as Document,
+			dismissAncestor as Element | null,
+			false,
+			true,
+		);
 	}
 }
 
@@ -36233,15 +36210,7 @@ export function runFocusFixup(document: globalThis.Document): void {
 // it, a move into an inert parent, display:none anywhere on its flat
 // chain) unfocuses it, including blur events and restyle.
 function dropUnfocusableFocus(document: Document): void {
-	let active = document.activeElement;
-	while (active !== null) {
-		const shadow = _((active as Element)).shadowRoot;
-		const inner = shadow?.activeElement ?? null;
-		if (inner === null) {
-			break;
-		}
-		active = inner;
-	}
+	const active = getFocusedElement(document);
 	if (active === null || active === document.body) {
 		return;
 	}

From 204a0646704b6de88ecb560ff0d22a7f5e0a9787 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:45:57 -0400
Subject: [PATCH 24/99] Drop a popover's unread trigger, and build flushLayout
 on flushStyle

PopoverState.trigger was set on show and cleared on hide but never read:
HTML reads a popover's invoker only for CSS anchoring, which this engine
does not do. flushStyle and flushLayout each worked the document out
from the node by hand, though the attached document already is it, and
flushLayout repeated flushStyle line for line before its layout pass.
getInnerText settles layout through getSettledLayout.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts | 36 +++++++-----------------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 343e25e6..5a17153f 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -11457,13 +11457,8 @@ Object.defineProperties(Element.prototype, {
 // neighbouring counts merge into the larger, and none is needed at
 // either end.
 function getInnerText(element: Element): string {
-	const attached = getAttachedDocument(element);
-	if (attached === undefined || !element.isConnected) {
-		return element.textContent ?? "";
-	}
-	flushLayout(element);
-	const layout = _(attached).extra.layout;
-	if (!isElementRendered(layout, element)) {
+	const layout = getSettledLayout(element);
+	if (layout === undefined || !isElementRendered(layout, element)) {
 		return element.textContent ?? "";
 	}
 	const items: Array<string | number> = [];
@@ -12293,7 +12288,6 @@ export class HTMLElement extends Element {
 		getTopLayer(this.document).delete(ownerOf(this));
 		state.visibility = "hidden";
 		state.mode = null;
-		state.trigger = null;
 		state.previouslyFocused = null;
 		popoverStateChanged(ownerOf(this));
 	}
@@ -23189,7 +23183,6 @@ class HTMLUListElement extends HTMLElement {
 interface PopoverState {
 	visibility: "hidden" | "showing";
 	mode: "auto" | null;
-	trigger: Element | null;
 	previouslyFocused: Element | null;
 	hiding: boolean;
 	toggleTask: {oldState: string; canceled: boolean} | null;
@@ -23206,7 +23199,6 @@ function getPopoverState(element: Element): PopoverState {
 		state = {
 			visibility: "hidden",
 			mode: null,
-			trigger: null,
 			previouslyFocused: null,
 			hiding: false,
 			toggleTask: null,
@@ -23424,7 +23416,6 @@ function showPopover(
 	const originallyFocused = documentSlots.extra.activeElement;
 	getTopLayer(document).add(element);
 	state.visibility = "showing";
-	state.trigger = source;
 	popoverFocusingSteps(element);
 	if (shouldRestoreFocus && getPopoverAttributeState(element) !== null) {
 		state.previouslyFocused = originallyFocused;
@@ -23500,7 +23491,6 @@ function hidePopover(
 		}
 	}
 	getTopLayer(document).delete(element);
-	state.trigger = null;
 	state.mode = null;
 	state.visibility = "hidden";
 	if (fireEvents) {
@@ -36257,11 +36247,7 @@ export function flushStyle(node: globalThis.Node): boolean {
 	if (attached === undefined) {
 		return false;
 	}
-	const shaped = node as {nodeType?: number; ownerDocument?: object | null};
-	const document = (
-		shaped.nodeType === DOCUMENT_NODE ? node : shaped.ownerDocument
-	) as globalThis.Document;
-	const had = applyMutations(document);
+	const had = applyMutations(attached);
 	if (had) {
 		void _(attached).extra.render();
 	}
@@ -36309,20 +36295,12 @@ export function revealPendingEditingCaret(document: globalThis.Document): void {
  * them, so this requests the frame on the caller's behalf.
  */
 export function flushLayout(node: globalThis.Node): boolean {
+	const had = flushStyle(node);
 	const attached = getAttachedDocument(node);
-	if (attached === undefined) {
-		return false;
-	}
-	const shaped = node as {nodeType?: number; ownerDocument?: object | null};
-	const document = (
-		shaped.nodeType === DOCUMENT_NODE ? node : shaped.ownerDocument
-	) as globalThis.Document;
-	const had = applyMutations(document);
-	if (had) {
-		void _(attached).extra.render();
+	if (attached !== undefined) {
+		_(attached).extra.layout.performLayout();
+		clampScrollOffsets(attached);
 	}
-	_(attached).extra.layout.performLayout();
-	clampScrollOffsets(document);
 	return had;
 }
 

From d5ac58c1729f610cd0a1d3c96f74475d4e7c326c Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:48:48 -0400
Subject: [PATCH 25/99] Make Painter's methods plain functions that take the
 painter

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts            |  16 ++-
 src/internal/painter.ts | 250 ++++++++++++++++++++--------------------
 2 files changed, 137 insertions(+), 129 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 04547bd6..c14c5588 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -60,7 +60,12 @@ import {
 } from "./internal/images.ts";
 import {Input} from "./internal/input.ts";
 import {Layout} from "./internal/layout.ts";
-import {Painter} from "./internal/painter.ts";
+import {
+	paint,
+	Painter,
+	resolveDocumentScrollBand,
+	resolveScrollShift,
+} from "./internal/painter.ts";
 import {
 	answerRequest,
 	checkInlineHandler,
@@ -1484,7 +1489,7 @@ function renderStatic(termDOM: TermDOM, lineEnding: "\n" | "\r\n"): string {
 	return termDOMSlots.framebuffer.renderStatic(
 		termDOMSlots.layout.documentPaintHeight(),
 		lineEnding,
-		(context) => termDOMSlots.painter.paint(context),
+		(context) => paint(termDOMSlots.painter, context),
 	);
 }
 
@@ -1593,10 +1598,11 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	// The document scroll has nothing to move in fullscreen. A scroll box
 	// inside it still does, under DECSTBM margins.
 	const shift =
-		termDOMSlots.painter.resolveScrollShift(regionHeight, journalled) ??
+		resolveScrollShift(termDOMSlots.painter, regionHeight, journalled) ??
 		(fullscreen || termDOMSlots.framebuffer.journal.frameScroll === 0
 			? null
-			: termDOMSlots.painter.resolveDocumentScrollBand(
+			: resolveDocumentScrollBand(
+				termDOMSlots.painter,
 				regionHeight,
 				termDOMSlots.framebuffer.journal.frameScroll,
 			));
@@ -1609,7 +1615,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		delta: shift ? shift.delta : fullscreen ? 0 : clamped.frameScroll,
 		shift: shift ?? undefined,
 	});
-	termDOMSlots.painter.paint(context);
+	paint(termDOMSlots.painter, context);
 	const ansi = termDOMSlots.framebuffer.endFrame();
 	termDOMSlots.layout.framePainted();
 
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index ce700399..96e1825d 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -456,136 +456,138 @@ export class Painter {
 		this.framebuffer = framebuffer;
 		this.topLayer = getTopLayer(document) as unknown as Set<Element>;
 	}
+}
 
-	/**
-	 * The buffer rows a journalled element scroll covers, or null when the
-	 * terminal cannot shift them. DECSTBM margins are horizontal, so a scroll
-	 * shift is the region's full width or nothing. Content overlapping the
-	 * shift is dragged along and the diff repairs it. A box narrower than the
-	 * terminal shifts only when repairing what lies beside it costs less than
-	 * repainting the box.
-	 */
-	resolveScrollShift(
-		regionHeight: number,
-		record: {element: Element; delta: number} | null,
-	): {delta: number; top: number; end: number} | null {
-		const framebuffer = this.framebuffer;
-		const layout = this.layout;
-		if (
-			record === null ||
-			record.delta === 0 ||
-			// One scroll shift per frame. The document scroll's region already
-			// contains this box.
-			framebuffer.journal.frameScroll !== 0 ||
-			hasPaintedHighlights(this.document) ||
-			!record.element.isConnected
-		) {
-			return null;
-		}
-		const rect = layout.getRect(record.element);
-		if (rect === null) {
-			return null;
-		}
+/**
+ * The buffer rows a journalled element scroll covers, or null when the
+ * terminal cannot shift them. DECSTBM margins are horizontal, so a scroll
+ * shift is the region's full width or nothing. Content overlapping the
+ * shift is dragged along and the diff repairs it. A box narrower than the
+ * terminal shifts only when repairing what lies beside it costs less than
+ * repainting the box.
+ */
+export function resolveScrollShift(
+	painter: Painter,
+	regionHeight: number,
+	record: {element: Element; delta: number} | null,
+): {delta: number; top: number; end: number} | null {
+	const framebuffer = painter.framebuffer;
+	const layout = painter.layout;
+	if (
+		record === null ||
+		record.delta === 0 ||
+		// One scroll shift per frame. The document scroll's region already
+		// contains this box.
+		framebuffer.journal.frameScroll !== 0 ||
+		hasPaintedHighlights(painter.document) ||
+		!record.element.isConnected
+	) {
+		return null;
+	}
+	const rect = layout.getRect(record.element);
+	if (rect === null) {
+		return null;
+	}
 
-		// The scroll port is the padding box.
-		const border = getCellBorderWidths(record.element);
-		const left = rect.left + border.left;
-		const right = rect.left + rect.width - border.right;
-
-		// Layout rows are document rows. Buffer rows are the document
-		// scroll's. A fixed box is laid out in viewport rows and the paint
-		// cancels the document scroll for it.
-		const lift = layout.isInFixedSpace(record.element)
-			? 0
-			: framebuffer.scrollTop;
-		const top = Math.max(0, Math.round(rect.top + border.top) - lift);
-		const end = Math.min(
-			regionHeight,
-			Math.round(rect.top + rect.height - border.bottom) - lift,
-		);
-		if (end - top <= Math.abs(record.delta)) {
-			return null;
-		}
-		const delta = record.delta;
-		if (
-			(left > 0 || right < framebuffer.cols) &&
-			!framebuffer.insetShiftPays({delta, top, end, left, right})
-		) {
-			return null;
-		}
-		return {delta, top, end};
-	}
-
-	/**
-	 * The rows a document scroll shifts: the region, less the full-width
-	 * fixed bars at its top and bottom edges, which stay where they are on
-	 * screen. Null when no bar trims it.
-	 */
-	resolveDocumentScrollBand(
-		regionHeight: number,
-		delta: number,
-	): {delta: number; top: number; end: number} | null {
-		const bars = this.layout.fullWidthFixedRows(this.framebuffer.cols);
-		if (bars.length === 0) {
-			return null;
-		}
-		let top = 0;
-		let end = regionHeight;
-		for (let trimmed = true; trimmed;) {
-			trimmed = false;
-			for (const [barTop, barBottom] of bars) {
-				if (barTop <= top && barBottom > top) {
-					top = barBottom;
-					trimmed = true;
-				}
-				if (barTop < end && barBottom >= end) {
-					end = barTop;
-					trimmed = true;
-				}
+	// The scroll port is the padding box.
+	const border = getCellBorderWidths(record.element);
+	const left = rect.left + border.left;
+	const right = rect.left + rect.width - border.right;
+
+	// Layout rows are document rows. Buffer rows are the document
+	// scroll's. A fixed box is laid out in viewport rows and the paint
+	// cancels the document scroll for it.
+	const lift = layout.isInFixedSpace(record.element)
+		? 0
+		: framebuffer.scrollTop;
+	const top = Math.max(0, Math.round(rect.top + border.top) - lift);
+	const end = Math.min(
+		regionHeight,
+		Math.round(rect.top + rect.height - border.bottom) - lift,
+	);
+	if (end - top <= Math.abs(record.delta)) {
+		return null;
+	}
+	const delta = record.delta;
+	if (
+		(left > 0 || right < framebuffer.cols) &&
+		!framebuffer.insetShiftPays({delta, top, end, left, right})
+	) {
+		return null;
+	}
+	return {delta, top, end};
+}
+
+/**
+ * The rows a document scroll shifts: the region, less the full-width
+ * fixed bars at its top and bottom edges, which stay where they are on
+ * screen. Null when no bar trims it.
+ */
+export function resolveDocumentScrollBand(
+	painter: Painter,
+	regionHeight: number,
+	delta: number,
+): {delta: number; top: number; end: number} | null {
+	const bars = painter.layout.fullWidthFixedRows(painter.framebuffer.cols);
+	if (bars.length === 0) {
+		return null;
+	}
+	let top = 0;
+	let end = regionHeight;
+	for (let trimmed = true; trimmed;) {
+		trimmed = false;
+		for (const [barTop, barBottom] of bars) {
+			if (barTop <= top && barBottom > top) {
+				top = barBottom;
+				trimmed = true;
+			}
+			if (barTop < end && barBottom >= end) {
+				end = barTop;
+				trimmed = true;
 			}
 		}
-		if ((top === 0 && end === regionHeight) || end - top <= Math.abs(delta)) {
-			return null;
-		}
-		return {delta, top, end};
 	}
+	if ((top === 0 && end === regionHeight) || end - top <= Math.abs(delta)) {
+		return null;
+	}
+	return {delta, top, end};
+}
 
-	paint(ctx: CellContext): void {
-		this.renderedOutsideMarkers = new WeakSet<Element>();
-		this.scrolledRows = 0;
-		this.highlightedText = collectHighlightedText(this.document);
-		this.paintedText.clear();
-		this.highlightStyles = new Map();
-		const layers = this.layout.collectStackingLayers(this.topLayer);
-		// From the body, the root stacking context's content. A body that
-		// is inline, inline-block or display: contents puts its content in
-		// the root element's boxes rather than its own, so painting starts
-		// at the root.
-		const document = this.document;
-		const bodyDisplay = getDeclaredDisplay(document.body as Element);
-		const fromRoot =
-			document.documentElement !== null &&
-			(bodyDisplay === "contents" || bodyDisplay.startsWith("inline"));
-		renderStackingContext(
-			this,
-			(fromRoot ? document.documentElement : document.body) as Element,
-			ctx,
-			layers,
-		);
-		const rendered = renderedTopLayer(this.document) as unknown as Element[];
-		for (const element of rendered) {
-			const previousClip = ctx.clipRect;
-			ctx.clipRect = null;
-			// Entered from outside its ancestor chain, so seed the culling
-			// shift.
-			this.scrolledRows = this.layout.scrolledAncestorRows(element);
-			try {
-				renderBackdrop(element, ctx);
-				renderStackingContext(this, element, ctx, layers);
-			} finally {
-				ctx.clipRect = previousClip;
-				this.scrolledRows = 0;
-			}
+export function paint(painter: Painter, ctx: CellContext): void {
+	painter.renderedOutsideMarkers = new WeakSet<Element>();
+	painter.scrolledRows = 0;
+	painter.highlightedText = collectHighlightedText(painter.document);
+	painter.paintedText.clear();
+	painter.highlightStyles = new Map();
+	const layers = painter.layout.collectStackingLayers(painter.topLayer);
+	// From the body, the root stacking context's content. A body that
+	// is inline, inline-block or display: contents puts its content in
+	// the root element's boxes rather than its own, so painting starts
+	// at the root.
+	const document = painter.document;
+	const bodyDisplay = getDeclaredDisplay(document.body as Element);
+	const fromRoot =
+		document.documentElement !== null &&
+		(bodyDisplay === "contents" || bodyDisplay.startsWith("inline"));
+	renderStackingContext(
+		painter,
+		(fromRoot ? document.documentElement : document.body) as Element,
+		ctx,
+		layers,
+	);
+	const rendered = renderedTopLayer(painter.document) as unknown as Element[];
+	for (const element of rendered) {
+		const previousClip = ctx.clipRect;
+		ctx.clipRect = null;
+		// Entered from outside its ancestor chain, so seed the culling
+		// shift.
+		painter.scrolledRows = painter.layout.scrolledAncestorRows(element);
+		try {
+			renderBackdrop(element, ctx);
+			renderStackingContext(painter, element, ctx, layers);
+		} finally {
+			ctx.clipRect = previousClip;
+			painter.scrolledRows = 0;
 		}
 	}
 }

From 57eb5e75a425c1f178461576402549844b52422a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:50:06 -0400
Subject: [PATCH 26/99] Make eleven of Cascade's methods plain functions that
 take the cascade

The rest stay for now: they are called through an optional chain, or
their names are taken by a function already.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts            |   6 +-
 src/internal/cssom.ts   | 841 +++++++++++++++++++++-------------------
 src/internal/dom.ts     |  16 +-
 src/internal/input.ts   |  17 +-
 src/internal/painter.ts |   6 +-
 5 files changed, 464 insertions(+), 422 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index c14c5588..97bd85f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,9 @@ import {
 	Cascade,
 	type CellSize,
 	type CellSizeSetting,
+	dispose,
 	getCellSize,
+	hoverRulesExist,
 	UNIT_CELL,
 } from "./internal/cssom.ts";
 import {
@@ -946,7 +948,7 @@ export class TermDOM extends EventTarget {
 			void slots.staticSibling.dispose();
 			slots.staticSibling = null;
 		}
-		slots.cascade.dispose();
+		dispose(slots.cascade);
 		slots.layout.dispose();
 		clearHighlights(this.document);
 		disconnectObservers(this.document);
@@ -1196,7 +1198,7 @@ function syncHoverReporting(termDOM: TermDOM): void {
 	const wanted =
 		termDOMSlots.mouseReportingEnabled &&
 		(hoverListenerCount(termDOM.document) > 0 ||
-			termDOMSlots.cascade.hoverRulesExist());
+			hoverRulesExist(termDOMSlots.cascade));
 	if (wanted === termDOMSlots.hoverReportingEnabled) {
 		return;
 	}
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 00ff843d..aa2d2bd8 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -533,7 +533,7 @@ function getListGutterWidth(listElement: Element): number {
 				continue;
 			}
 			const marker = cascade
-				? cascade.getMarkerContent(child)
+				? getMarkerContent(cascade, child)
 				: CSSValues.withMarkerSeparator(getListMarker(child, listElement));
 			if (!marker) {
 				continue;
@@ -3932,7 +3932,7 @@ export function getComputedValue(
 		? _(getPseudoDeclaration(cascade, element, pseudoElement))._computedValue(
 			property,
 		)
-		: cascade.computedSlotsFor(element)._computedValue(property);
+		: computedSlotsFor(cascade, element)._computedValue(property);
 }
 
 // A box with nothing to contain or transform: no box at all, or a plain
@@ -4227,7 +4227,7 @@ function getResolvedValues(
 	if (cascade.getStyleKey(element) === null) {
 		return null;
 	}
-	return cascade.computedSlotsFor(element).resolved;
+	return computedSlotsFor(cascade, element).resolved;
 }
 
 function getSharedResolved(
@@ -6437,466 +6437,494 @@ export class Cascade {
 		}
 	}
 
-	handleMutations(mutations: MutationRecord[]): void {
-		const Node = this.window.Node;
-		let shouldSyncStylesheets = false;
-		let removedElements = false;
-		const changedParents = new Set<Element>();
+	// user-select, with `auto` resolved through the parent per css-ui-4.
+	// `text`, `all` and `contain` all behave as plain isSelectable. Nothing
+	// implements the shapes `all` and `contain` ask for yet.
+	isSelectable(element: Node): boolean {
+		let current = element as Element | null;
+		while (current) {
+			const value = getComputedValue(current, "user-select");
+			if (value === "none") {
+				return false;
+			}
+			if (value !== "auto" && value !== "") {
+				return true;
+			}
+			current = flatParentElement(current);
+		}
+		return true;
+	}
+
+	// The internal read path: no pseudo parsing, no being-rendered check, no
+	// resolved-value branch. Called thousands of times per frame, so it does
+	// the least it can.
+	declarationFor(element: Element): ComputedStyleDeclaration {
+		return ownerOf(computedSlotsFor(this, element));
+	}
 
-		// A :has() anchor sits above what changed it, or before it among its
-		// siblings for :has(+ x) and :has(~ x), and the rule can style the
-		// anchor's descendants too. So each such element a :has() could be
-		// tested on restyles, with everything under it.
-		if (this.hasRulesExist) {
-			const anchors = new Set<Element>();
-			for (const mutation of mutations) {
-				const start = nodeTypeOf(mutation.target) === 1
-					? (mutation.target as Element)
-					: mutation.target.parentElement;
+	/**
+	 * One object per resolved style, the same until the element's style
+	 * changes. Null for a pseudo-element and while a transition runs.
+	 */
+	getStyleKey(element: Element): object | null {
+		if (getPseudoHost(element) !== null || isTransitioning(this, element)) {
+			return null;
+		}
+		const declarationSlots = computedSlotsFor(this, element);
+		if (!this.currentDeclarations.has(declarationSlots)) {
+			declarationSlots._syncResolved();
+		}
+		return declarationSlots.styleVersion;
+	}
+
+	syncStylesheets(): void {
+		// A sheet materializing its rules under the parse in progress
+		// notifies once per rule; that parse reads them.
+		if (this.parsing) {
+			return;
+		}
+		parseStylesheets(this);
+
+		// Boxes may have been built under the pre-parse styles, such as a
+		// subtree a .view{display:none} in the same batch hides. Rebuild from
+		// the root. Stylesheet changes are rare.
+		const body = this.document.body;
+		if (body) {
+			this.layout.invalidate(body);
+		}
+	}
+}
+
+export function handleMutations(
+	cascade: Cascade,
+	mutations: MutationRecord[],
+): void {
+	const Node = cascade.window.Node;
+	let shouldSyncStylesheets = false;
+	let removedElements = false;
+	const changedParents = new Set<Element>();
+
+	// A :has() anchor sits above what changed it, or before it among its
+	// siblings for :has(+ x) and :has(~ x), and the rule can style the
+	// anchor's descendants too. So each such element a :has() could be
+	// tested on restyles, with everything under it.
+	if (cascade.hasRulesExist) {
+		const anchors = new Set<Element>();
+		for (const mutation of mutations) {
+			const start = nodeTypeOf(mutation.target) === 1
+				? (mutation.target as Element)
+				: mutation.target.parentElement;
+			for (
+				let ancestor: Element | null = start;
+				ancestor;
+				ancestor = flatParentElement(ancestor)
+			) {
 				for (
-					let ancestor: Element | null = start;
-					ancestor;
-					ancestor = flatParentElement(ancestor)
+					let element: Element | null = ancestor;
+					element !== null;
+					element = cascade.hasSiblingRules
+						? element.previousElementSibling
+						: null
 				) {
-					for (
-						let element: Element | null = ancestor;
-						element !== null;
-						element = this.hasSiblingRules
-							? element.previousElementSibling
-							: null
-					) {
-						if (!anchors.has(element) && couldAnchorHas(this, element)) {
-							anchors.add(element);
-							invalidateSubtree(this, element);
-						}
+					if (!anchors.has(element) && couldAnchorHas(cascade, element)) {
+						anchors.add(element);
+						invalidateSubtree(cascade, element);
 					}
 				}
 			}
 		}
+	}
 
-		// A root's sheets sync once a batch, after its records: each sync
-		// restyles the whole tree, and a page that fills its sheets a rule at
-		// a time sent a record per rule.
-		const rootsToSync = new Set<ShadowRoot>();
-		for (const mutation of mutations) {
-			if (mutation.type === "childList") {
-				// A <style>'s children ARE its stylesheet text. A shadow
-				// sheet's sync stays inside its root.
-				if ((mutation.target as Element).tagName === "STYLE") {
-					reparseOwnerText(getSheet(mutation.target as Element));
-					const styleRoot = mutation.target.getRootNode();
-					if (isShadowRoot(styleRoot)) {
-						rootsToSync.add(styleRoot);
-					} else {
-						shouldSyncStylesheets = true;
-					}
-				}
-				// A list's gutter is derived from its items' markers, so a
-				// change to the ITEMS invalidates the list: a wider marker added
-				// later overran the gutter the original items set. A change
-				// inside an item's content moves no marker.
-				if (mutationChangesListItems(mutation)) {
-					invalidateEnclosingList(this, mutation.target);
+	// A root's sheets sync once a batch, after its records: each sync
+	// restyles the whole tree, and a page that fills its sheets a rule at
+	// a time sent a record per rule.
+	const rootsToSync = new Set<ShadowRoot>();
+	for (const mutation of mutations) {
+		if (mutation.type === "childList") {
+			// A <style>'s children ARE its stylesheet text. A shadow
+			// sheet's sync stays inside its root.
+			if ((mutation.target as Element).tagName === "STYLE") {
+				reparseOwnerText(getSheet(mutation.target as Element));
+				const styleRoot = mutation.target.getRootNode();
+				if (isShadowRoot(styleRoot)) {
+					rootsToSync.add(styleRoot);
+				} else {
+					shouldSyncStylesheets = true;
 				}
+			}
+			// A list's gutter is derived from its items' markers, so a
+			// change to the ITEMS invalidates the list: a wider marker added
+			// later overran the gutter the original items set. A change
+			// inside an item's content moves no marker.
+			if (mutationChangesListItems(mutation)) {
+				invalidateEnclosingList(cascade, mutation.target);
+			}
 
-				for (const node of getAddedNodes(mutation)) {
-					if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
-						const element = node as Element;
-						if (isStyleElement(element)) {
-							const addedRoot = element.tagName === "STYLE"
-								? element.getRootNode()
-								: null;
-							if (addedRoot !== null && isShadowRoot(addedRoot)) {
-								rootsToSync.add(addedRoot);
-							} else {
-								shouldSyncStylesheets = true;
-							}
+			for (const node of getAddedNodes(mutation)) {
+				if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
+					const element = node as Element;
+					if (isStyleElement(element)) {
+						const addedRoot = element.tagName === "STYLE"
+							? element.getRootNode()
+							: null;
+						if (addedRoot !== null && isShadowRoot(addedRoot)) {
+							rootsToSync.add(addedRoot);
 						} else {
-							// A detached tree's pseudo-elements and shadow roots wait
-							// for the record that brings it into the document. Its
-							// styles still answer getComputedStyle.
-							const connected = isConnectedNode(element);
-							const elements: Element[] = [];
-							for (
-								let next: DOMNode | null = element as unknown as DOMNode;
-								next !== null;
-								next = nextInTree(next, element as unknown as DOMNode)
-							) {
-								if (nodeTypeOf(next) === Node.ELEMENT_NODE) {
-									elements.push(next as unknown as Element);
-								}
+							shouldSyncStylesheets = true;
+						}
+					} else {
+						// A detached tree's pseudo-elements and shadow roots wait
+						// for the record that brings it into the document. Its
+						// styles still answer getComputedStyle.
+						const connected = isConnectedNode(element);
+						const elements: Element[] = [];
+						for (
+							let next: DOMNode | null = element as unknown as DOMNode;
+							next !== null;
+							next = nextInTree(next, element as unknown as DOMNode)
+						) {
+							if (nodeTypeOf(next) === Node.ELEMENT_NODE) {
+								elements.push(next as unknown as Element);
 							}
-							for (const each of elements) {
-								invalidateElementCaches(this, each);
-								if (connected) {
-									attachPseudoElementsToElement(this, each);
-									registerConnectedShadowRoots(this, each);
-								}
+						}
+						for (const each of elements) {
+							invalidateElementCaches(cascade, each);
+							if (connected) {
+								attachPseudoElementsToElement(cascade, each);
+								registerConnectedShadowRoots(cascade, each);
 							}
 						}
 					}
 				}
+			}
 
-				for (const node of getRemovedNodes(mutation)) {
-					if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
-						const element = node as Element;
-						if (isStyleElement(element)) {
-							shouldSyncStylesheets = true;
-						}
-						removedElements = true;
+			for (const node of getRemovedNodes(mutation)) {
+				if (nodeTypeOf(node) === Node.ELEMENT_NODE) {
+					const element = node as Element;
+					if (isStyleElement(element)) {
+						shouldSyncStylesheets = true;
 					}
+					removedElements = true;
 				}
-				// A child that came or went changes what `li + li`,
-				// `:first-child` and `:empty` match on the children around it
-				// and on the parent, none of which the mutation names. Once
-				// per parent per batch: appending n children one at a time
-				// is n records against the same parent.
-				if (
-					nodeTypeOf(mutation.target) === Node.ELEMENT_NODE &&
-					getSiblingIndex(this, mutation.target as Element)?.reachesSiblings
-				) {
-					changedParents.add(mutation.target as Element);
-				}
-			} else if (mutation.type === "attributes") {
-				const element = mutation.target as Element;
-				// A value written over itself changes no style.
-				if (
-					mutation.oldValue !== null &&
-					mutation.oldValue === attributeOf(element, mutation.attributeName!)
-				) {
-					continue;
+			}
+			// A child that came or went changes what `li + li`,
+			// `:first-child` and `:empty` match on the children around it
+			// and on the parent, none of which the mutation names. Once
+			// per parent per batch: appending n children one at a time
+			// is n records against the same parent.
+			if (
+				nodeTypeOf(mutation.target) === Node.ELEMENT_NODE &&
+				getSiblingIndex(cascade, mutation.target as Element)?.reachesSiblings
+			) {
+				changedParents.add(mutation.target as Element);
+			}
+		} else if (mutation.type === "attributes") {
+			const element = mutation.target as Element;
+			// A value written over itself changes no style.
+			if (
+				mutation.oldValue !== null &&
+				mutation.oldValue === attributeOf(element, mutation.attributeName!)
+			) {
+				continue;
+			}
+			// A change to keys whose rules declare only paint properties
+			// leaves every box where it was. The styles are dropped so the
+			// next read resolves them, and layout is not told.
+			const notifyLayout = !isPaintOnlyChange(
+				cascade,
+				element,
+				mutation.attributeName!,
+				mutation.oldValue,
+			);
+			// Only a change the sheets USE that way reaches descendants.
+			// When no rule tests the class outside its own subject and none
+			// declares an inherited property, descendant styles are
+			// unchanged.
+			const subjects = mutation.attributeName === "class"
+				? classChangeSubjects(cascade, element, mutation.oldValue)
+				: null;
+			if (subjects !== null) {
+				invalidateElementCaches(cascade, element, notifyLayout);
+				attachPseudoElementsToElement(cascade, element);
+				if (subjects.length > 0) {
+					for (const descendant of element.querySelectorAll("*")) {
+						const parent = descendant.parentElement;
+						if (
+							subjects.some(
+								(anchor) =>
+									couldAnchor(descendant, anchor) ||
+									// A display change blockifies the changed element's
+									// own children, and those of anyone else it anchors.
+									(anchor.children === true &&
+										parent !== null &&
+										(parent === element || couldAnchor(parent, anchor))),
+							)
+						) {
+							invalidateElementCaches(cascade, descendant, notifyLayout);
+							attachPseudoElementsToElement(cascade, descendant);
+						}
+					}
 				}
-				// A change to keys whose rules declare only paint properties
-				// leaves every box where it was. The styles are dropped so the
-				// next read resolves them, and layout is not told.
-				const notifyLayout = !isPaintOnlyChange(
-					this,
+			} else if (
+				attributeReachesDescendants(
+					cascade,
 					element,
 					mutation.attributeName!,
 					mutation.oldValue,
-				);
-				// Only a change the sheets USE that way reaches descendants.
-				// When no rule tests the class outside its own subject and none
-				// declares an inherited property, descendant styles are
-				// unchanged.
-				const subjects = mutation.attributeName === "class"
-					? classChangeSubjects(this, element, mutation.oldValue)
-					: null;
-				if (subjects !== null) {
-					invalidateElementCaches(this, element, notifyLayout);
-					attachPseudoElementsToElement(this, element);
-					if (subjects.length > 0) {
-						for (const descendant of element.querySelectorAll("*")) {
-							const parent = descendant.parentElement;
-							if (
-								subjects.some(
-									(anchor) =>
-										couldAnchor(descendant, anchor) ||
-										// A display change blockifies the changed element's
-										// own children, and those of anyone else it anchors.
-										(anchor.children === true &&
-											parent !== null &&
-											(parent === element || couldAnchor(parent, anchor))),
-								)
-							) {
-								invalidateElementCaches(this, descendant, notifyLayout);
-								attachPseudoElementsToElement(this, descendant);
-							}
-						}
-					}
-				} else if (
-					attributeReachesDescendants(
-						this,
-						element,
-						mutation.attributeName!,
-						mutation.oldValue,
-					)
-				) {
-					invalidateSubtree(this, element, notifyLayout);
-				} else {
-					invalidateElementCaches(this, element, notifyLayout);
-					attachPseudoElementsToElement(this, element);
-				}
-				if (!notifyLayout) {
-					this.layout.invalidateFrame();
-				}
-				// `.on ~ .light` matches a FOLLOWING sibling whose cached
-				// styles know nothing of this change.
-				if (
-					changeReachesLaterSiblings(
-						getSiblingIndex(this, element),
-						element,
-						mutation.attributeName!,
-						mutation.oldValue,
-					)
-				) {
-					for (
-						let sibling = element.nextElementSibling;
-						sibling;
-						sibling = sibling.nextElementSibling
-					) {
-						invalidateSibling(this, sibling);
-					}
-				}
-			} else if (mutation.type === "characterData") {
-				const owner = mutation.target.parentElement;
-				if (owner?.tagName === "STYLE") {
-					reparseOwnerText(getSheet(owner));
-					const ownerRoot = owner.getRootNode();
-					if (isShadowRoot(ownerRoot)) {
-						rootsToSync.add(ownerRoot);
-					} else {
-						shouldSyncStylesheets = true;
-					}
-				}
+				)
+			) {
+				invalidateSubtree(cascade, element, notifyLayout);
+			} else {
+				invalidateElementCaches(cascade, element, notifyLayout);
+				attachPseudoElementsToElement(cascade, element);
 			}
-		}
-		for (const root of rootsToSync) {
-			syncShadowRoot(this, root);
-		}
-
-		for (const parent of changedParents) {
-			invalidateChildren(this, parent);
-		}
-		// What left the document is let go: elements given a pseudo-element,
-		// and shadow roots with their rules. A host connected again registers
-		// its root on the way in.
-		if (removedElements) {
-			for (const host of this.pseudoHosts) {
-				if (!host.isConnected) {
-					this.pseudoHosts.delete(host);
+			if (!notifyLayout) {
+				cascade.layout.invalidateFrame();
+			}
+			// `.on ~ .light` matches a FOLLOWING sibling whose cached
+			// styles know nothing of this change.
+			if (
+				changeReachesLaterSiblings(
+					getSiblingIndex(cascade, element),
+					element,
+					mutation.attributeName!,
+					mutation.oldValue,
+				)
+			) {
+				for (
+					let sibling = element.nextElementSibling;
+					sibling;
+					sibling = sibling.nextElementSibling
+				) {
+					invalidateSibling(cascade, sibling);
 				}
 			}
-			for (const root of this.shadowRoots) {
-				if (!root.host.isConnected) {
-					this.shadowRoots.delete(root);
-					forgetShadowRoot(this, root);
+		} else if (mutation.type === "characterData") {
+			const owner = mutation.target.parentElement;
+			if (owner?.tagName === "STYLE") {
+				reparseOwnerText(getSheet(owner));
+				const ownerRoot = owner.getRootNode();
+				if (isShadowRoot(ownerRoot)) {
+					rootsToSync.add(ownerRoot);
+				} else {
+					shouldSyncStylesheets = true;
 				}
 			}
-			releaseRemovedNodes(this.document);
-		}
-		if (shouldSyncStylesheets) {
-			this.syncStylesheets();
 		}
 	}
-
-	// user-select, with `auto` resolved through the parent per css-ui-4.
-	// `text`, `all` and `contain` all behave as plain isSelectable. Nothing
-	// implements the shapes `all` and `contain` ask for yet.
-	isSelectable(element: Node): boolean {
-		let current = element as Element | null;
-		while (current) {
-			const value = getComputedValue(current, "user-select");
-			if (value === "none") {
-				return false;
-			}
-			if (value !== "auto" && value !== "") {
-				return true;
-			}
-			current = flatParentElement(current);
-		}
-		return true;
+	for (const root of rootsToSync) {
+		syncShadowRoot(cascade, root);
 	}
 
-	// Focus is not a mutation, and nothing else invalidates. The cached
-	// declarations of the two moved elements hold rule sets matched BEFORE
-	// the move, so a :focus rule would never apply or stop applying.
-	handleFocusChange(...elements: Array<Element | null>): void {
-		if (FOCUS_STATES.some((state) => this.hasStates.has(state))) {
-			restyleAll(this);
-			return;
+	for (const parent of changedParents) {
+		invalidateChildren(cascade, parent);
+	}
+	// What left the document is let go: elements given a pseudo-element,
+	// and shadow roots with their rules. A host connected again registers
+	// its root on the way in.
+	if (removedElements) {
+		for (const host of cascade.pseudoHosts) {
+			if (!host.isConnected) {
+				cascade.pseudoHosts.delete(host);
+			}
 		}
-		for (const element of elements) {
-			// The whole flat-tree chain can observe focus (:focus-within,
-			// :host(:focus)), so every element on it goes stale together.
-			for (
-				let node: Element | null = element; node; node = flatParentElement(node)
-			) {
-				invalidateForState(this, node, FOCUS_STATES);
+		for (const root of cascade.shadowRoots) {
+			if (!root.host.isConnected) {
+				cascade.shadowRoots.delete(root);
+				forgetShadowRoot(cascade, root);
 			}
 		}
+		releaseRemovedNodes(cascade.document);
+	}
+	if (shouldSyncStylesheets) {
+		cascade.syncStylesheets();
 	}
+}
 
-	// State no attribute or tree records changed: a checkbox was checked, a
-	// custom element defined, a popover shown. `states` names the
-	// pseudo-classes that read it. A rule can test the state on the element
-	// itself, on an ancestor of what it styles, or before a sibling
-	// combinator, so the element's subtree and its later siblings restyle.
-	// One that tests it inside :has() can style anything, so everything
-	// restyles.
-	handleStateChange(element: Element, states: readonly string[]): void {
-		if (states.some((state) => this.hasStates.has(state))) {
-			restyleAll(this);
-			return;
+// Focus is not a mutation, and nothing else invalidates. The cached
+// declarations of the two moved elements hold rule sets matched BEFORE
+// the move, so a :focus rule would never apply or stop applying.
+export function handleFocusChange(
+	cascade: Cascade,
+	...elements: Array<Element | null>
+): void {
+	if (FOCUS_STATES.some((state) => cascade.hasStates.has(state))) {
+		restyleAll(cascade);
+		return;
+	}
+	for (const element of elements) {
+		// The whole flat-tree chain can observe focus (:focus-within,
+		// :host(:focus)), so every element on it goes stale together.
+		for (
+			let node: Element | null = element; node; node = flatParentElement(node)
+		) {
+			invalidateForState(cascade, node, FOCUS_STATES);
 		}
-		invalidateForState(this, element, states);
-		// No mutation record describes the change, so the frame that decides
-		// whether anything needs painting is notified here.
-		this.layout.invalidateFrame();
 	}
+}
 
-	// The same staleness a focus move leaves, scoped to the symmetric
-	// difference of the two flat-tree chains. The shared ancestors above the
-	// fork were hovered before and are hovered still.
-	handleHoverChange(previous: Element | null, next: Element | null): void {
-		chainStateChange(this, previous, next, "hover");
+// State no attribute or tree records changed: a checkbox was checked, a
+// custom element defined, a popover shown. `states` names the
+// pseudo-classes that read it. A rule can test the state on the element
+// itself, on an ancestor of what it styles, or before a sibling
+// combinator, so the element's subtree and its later siblings restyle.
+// One that tests it inside :has() can style anything, so everything
+// restyles.
+export function handleStateChange(
+	cascade: Cascade,
+	element: Element,
+	states: readonly string[],
+): void {
+	if (states.some((state) => cascade.hasStates.has(state))) {
+		restyleAll(cascade);
+		return;
 	}
+	invalidateForState(cascade, element, states);
+	// No mutation record describes the change, so the frame that decides
+	// whether anything needs painting is notified here.
+	cascade.layout.invalidateFrame();
+}
 
-	// The same for the element a mouse button is held down on, which with
-	// its ancestors is :active.
-	handleActiveChange(previous: Element | null, next: Element | null): void {
-		chainStateChange(this, previous, next, "active");
-	}
+// The same staleness a focus move leaves, scoped to the symmetric
+// difference of the two flat-tree chains. The shared ancestors above the
+// fork were hovered before and are hovered still.
+export function handleHoverChange(
+	cascade: Cascade,
+	previous: Element | null,
+	next: Element | null,
+): void {
+	chainStateChange(cascade, previous, next, "hover");
+}
 
-	// A dirty sheet list parses first, so a value read between frames still
-	// describes the current document.
-	hoverRulesExist(): boolean {
-		parseStylesheetsIfStale(this);
-		return this.hoverRulesDeclared;
-	}
+// The same for the element a mouse button is held down on, which with
+// its ancestors is :active.
+export function handleActiveChange(
+	cascade: Cascade,
+	previous: Element | null,
+	next: Element | null,
+): void {
+	chainStateChange(cascade, previous, next, "active");
+}
 
-	// The internal read path: no pseudo parsing, no being-rendered check, no
-	// resolved-value branch. Called thousands of times per frame, so it does
-	// the least it can.
-	declarationFor(element: Element): ComputedStyleDeclaration {
-		return ownerOf(this.computedSlotsFor(element));
-	}
+// A dirty sheet list parses first, so a value read between frames still
+// describes the current document.
+export function hoverRulesExist(cascade: Cascade): boolean {
+	parseStylesheetsIfStale(cascade);
+	return cascade.hoverRulesDeclared;
+}
 
-	// The slots of the declaration, which the cache holds, so a read of a
-	// computed value looks nothing up.
-	computedSlotsFor(element: Element): Slots<ComputedStyleDeclaration> {
-		let slots = this.computedStyleCache.get(element);
-		if (!slots) {
-			parseStylesheetsIfStale(this);
-			const fresh = _(
-				new ComputedStyleDeclaration(
-					element,
-					getCascadeRules(this, element),
-					this,
-				),
-			);
-			slots = fresh;
-			this.computedStyleCache.set(element, fresh);
-			// Building a fresh declaration is the other form of the style
-			// change event _syncResolved sees.
-			processTransitionStyle(
-				this,
+// The slots of the declaration, which the cache holds, so a read of a
+// computed value looks nothing up.
+function computedSlotsFor(
+	cascade: Cascade,
+	element: Element,
+): Slots<ComputedStyleDeclaration> {
+	let slots = cascade.computedStyleCache.get(element);
+	if (!slots) {
+		parseStylesheetsIfStale(cascade);
+		const fresh = _(
+			new ComputedStyleDeclaration(
 				element,
-				(property) => fresh._baseValue(property),
-				"",
-			);
-		}
-		return slots;
+				getCascadeRules(cascade, element),
+				cascade,
+			),
+		);
+		slots = fresh;
+		cascade.computedStyleCache.set(element, fresh);
+		// Building a fresh declaration is the other form of the style
+		// change event _syncResolved sees.
+		processTransitionStyle(
+			cascade,
+			element,
+			(property) => fresh._baseValue(property),
+			"",
+		);
 	}
+	return slots;
+}
 
-	/**
-	 * One object per resolved style, the same until the element's style
-	 * changes. Null for a pseudo-element and while a transition runs.
-	 */
-	getStyleKey(element: Element): object | null {
-		if (getPseudoHost(element) !== null || isTransitioning(this, element)) {
-			return null;
-		}
-		const declarationSlots = this.computedSlotsFor(element);
-		if (!this.currentDeclarations.has(declarationSlots)) {
-			declarationSlots._syncResolved();
-		}
-		return declarationSlots.styleVersion;
-	}
+/**
+ * The properties a pseudo-element's own rules set on this element, empty
+ * when no rule reaches it. Unlike getComputedValue, this does not fill in
+ * the originating element's inherited values.
+ */
+export function declaredPseudoProperties(
+	cascade: Cascade,
+	element: Element,
+	pseudoElement: string,
+): Set<string> {
+	parseStylesheetsIfStale(cascade);
+	return new Set(
+		Object.keys(computePseudoElementStyle(cascade, element, pseudoElement)),
+	);
+}
 
-	/**
-	 * The properties a pseudo-element's own rules set on this element, empty
-	 * when no rule reaches it. Unlike getComputedValue, this does not fill in
-	 * the originating element's inherited values.
-	 */
-	declaredPseudoProperties(
-		element: Element,
-		pseudoElement: string,
-	): Set<string> {
-		parseStylesheetsIfStale(this);
-		return new Set(
-			Object.keys(computePseudoElementStyle(this, element, pseudoElement)),
-		);
+// Public because window.matchMedia uses the SAME evaluator @media
+// does, so a stylesheet and a script can never disagree. A query that
+// does not parse is `not all`, and the rest of its list still counts.
+export function mediaQueryMatches(
+	cascade: Cascade,
+	mediaText: string,
+): boolean {
+	const text = mediaText.trim();
+	if (!text) {
+		return true;
 	}
-
-	// Public because window.matchMedia uses the SAME evaluator @media
-	// does, so a stylesheet and a script can never disagree. A query that
-	// does not parse is `not all`, and the rest of its list still counts.
-	mediaQueryMatches(mediaText: string): boolean {
-		const text = mediaText.trim();
-		if (!text) {
-			return true;
-		}
-		const queries = CSSValues.parseMediaQueryList(text);
-		if (queries) {
-			return queries.some((query) => mediaQueryNodeMatches(this, query));
-		}
-		return CSSValues.splitMediaQueryList(text).some((piece) => {
-			const parsed = CSSValues.parseMediaQueryList(piece);
-			return parsed?.length === 1 && mediaQueryNodeMatches(this, parsed[0]);
-		});
+	const queries = CSSValues.parseMediaQueryList(text);
+	if (queries) {
+		return queries.some((query) => mediaQueryNodeMatches(cascade, query));
 	}
+	return CSSValues.splitMediaQueryList(text).some((piece) => {
+		const parsed = CSSValues.parseMediaQueryList(piece);
+		return parsed?.length === 1 && mediaQueryNodeMatches(cascade, parsed[0]);
+	});
+}
 
-	/** The text a list item's marker draws, or null when it draws none. */
-	getMarkerContent(hostElement: Element): string | null {
-		if (!hostElement || nodeTypeOf(hostElement) !== hostElement.ELEMENT_NODE) {
-			return null;
-		}
-
-		const computedStyle = this.declarationFor(hostElement);
-		const display = _(computedStyle)._computedValue("display");
-
-		if (display !== "list-item") {
-			return null;
-		}
-
-		const styles = computePseudoElementStyle(this, hostElement, "::marker");
-		let content = styles.content;
+/** The text a list item's marker draws, or null when it draws none. */
+export function getMarkerContent(
+	cascade: Cascade,
+	hostElement: Element,
+): string | null {
+	if (!hostElement || nodeTypeOf(hostElement) !== hostElement.ELEMENT_NODE) {
+		return null;
+	}
 
-		if (!content || content === "none" || content === "normal") {
-			content = getDefaultMarkerContent(hostElement) ?? content;
-		}
-		if (!content || content === "none" || content === "normal") {
-			return null;
-		}
+	const computedStyle = cascade.declarationFor(hostElement);
+	const display = _(computedStyle)._computedValue("display");
 
-		let textContent = CSSValues.unquoteContent(content);
+	if (display !== "list-item") {
+		return null;
+	}
 
-		textContent = resolveCounterFunction(this, hostElement, textContent);
+	const styles = computePseudoElementStyle(cascade, hostElement, "::marker");
+	let content = styles.content;
 
-		return textContent;
+	if (!content || content === "none" || content === "normal") {
+		content = getDefaultMarkerContent(hostElement) ?? content;
+	}
+	if (!content || content === "none" || content === "normal") {
+		return null;
 	}
 
-	syncStylesheets(): void {
-		// A sheet materializing its rules under the parse in progress
-		// notifies once per rule; that parse reads them.
-		if (this.parsing) {
-			return;
-		}
-		parseStylesheets(this);
+	let textContent = CSSValues.unquoteContent(content);
 
-		// Boxes may have been built under the pre-parse styles, such as a
-		// subtree a .view{display:none} in the same batch hides. Rebuild from
-		// the root. Stylesheet changes are rare.
-		const body = this.document.body;
-		if (body) {
-			this.layout.invalidate(body);
-		}
-	}
+	textContent = resolveCounterFunction(cascade, hostElement, textContent);
 
-	// The document is being torn down.
-	dispose(): void {
-		this.computedStyleCache = new WeakMap();
-		this.hasResults = null;
-		this.pseudoElementStyleCache = new WeakMap();
-		this.counterScopes = new WeakMap();
-		if (this.transitionTimer !== null) {
-			clearTimeout(this.transitionTimer);
-			this.transitionTimer = null;
-		}
-		this.activeTransitions.clear();
-		this.transitionEvents = [];
+	return textContent;
+}
+
+// The document is being torn down.
+export function dispose(cascade: Cascade): void {
+	cascade.computedStyleCache = new WeakMap();
+	cascade.hasResults = null;
+	cascade.pseudoElementStyleCache = new WeakMap();
+	cascade.counterScopes = new WeakMap();
+	if (cascade.transitionTimer !== null) {
+		clearTimeout(cascade.transitionTimer);
+		cascade.transitionTimer = null;
 	}
+	cascade.activeTransitions.clear();
+	cascade.transitionEvents = [];
 }
 
 // Null for a box that generated no grid. The resolved value then stays
@@ -8852,7 +8880,7 @@ function parseStyleSheet(
 		if (container.disabled) {
 			return;
 		}
-		if (!cascade.mediaQueryMatches(container.media.mediaText)) {
+		if (!mediaQueryMatches(cascade, container.media.mediaText)) {
 			return;
 		}
 	}
@@ -8860,7 +8888,7 @@ function parseStyleSheet(
 		if (rule instanceof CSSStyleRule) {
 			parseStyleRule(cascade, rule, scope, uaOrigin, context);
 		} else if (rule instanceof CSSMediaRule) {
-			if (cascade.mediaQueryMatches(rule.conditionText)) {
+			if (mediaQueryMatches(cascade, rule.conditionText)) {
 				parseStyleSheet(cascade, rule, scope, uaOrigin, context);
 			}
 		} else if (rule instanceof CSSSupportsRule) {
@@ -9402,7 +9430,7 @@ function parseNestedRules(
 		} else if (rule instanceof CSSStyleRule) {
 			parseStyleRule(cascade, rule, scope, uaOriginSheet, context, parent);
 		} else if (rule instanceof CSSMediaRule) {
-			if (cascade.mediaQueryMatches(rule.conditionText)) {
+			if (mediaQueryMatches(cascade, rule.conditionText)) {
 				parseNestedRules(cascade, rule, parent, scope, uaOriginSheet, context);
 			}
 		} else if (rule instanceof CSSSupportsRule) {
@@ -10163,8 +10191,7 @@ function computePseudoElementStyle(
 			if (!CSSValues.hasSlotAliases(name)) {
 				continue;
 			}
-			direction ??= cascade
-				.computedSlotsFor(element)
+			direction ??= computedSlotsFor(cascade, element)
 				._computedValue("direction");
 			for (const other of CSSValues.getSlotNames(name, direction)) {
 				computedStyle[other] = value;
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 5a17153f..12f10904 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -37,6 +37,10 @@ import {
 	getInlineStyle,
 	getStyleSheets,
 	getWhiteSpace,
+	handleFocusChange,
+	handleMutations,
+	handleStateChange,
+	mediaQueryMatches,
 	pxFromCells,
 	styleAttributeChanged,
 	styleElementSheet,
@@ -7348,7 +7352,7 @@ function removeNode(node: Node, suppressObservers = false): void {
 					: nodeTypeOf(parent) === ELEMENT_NODE ? (parent as Element) : null;
 				const attached = getAttachedDocument(document);
 				if (left !== null && attached !== undefined) {
-					_(attached).extra.cascade.handleFocusChange(left);
+					handleFocusChange(_(attached).extra.cascade, left);
 				}
 				break;
 			}
@@ -12176,7 +12180,7 @@ export class HTMLElement extends Element {
 		if (attached === undefined) {
 			return;
 		}
-		_(attached).extra.cascade.handleFocusChange(this, null);
+		handleFocusChange(_(attached).extra.cascade, this, null);
 		_(attached).extra.framebuffer.invalidate();
 		void _(attached).extra.render();
 		dispatchAsUserAgent(
@@ -12337,7 +12341,7 @@ function runFocusingSteps(element: HTMLElement): void {
 	// :focus rules match live and a focus move is not a mutation, so both
 	// elements' resolved styles are stale whether or not a listener changes
 	// anything.
-	_(attached).extra.cascade.handleFocusChange(previous, element);
+	handleFocusChange(_(attached).extra.cascade, previous, element);
 	_(attached).extra.framebuffer.invalidate();
 	void _(attached).extra.render();
 	// An edit the user made in the control focus is leaving is committed
@@ -23273,7 +23277,7 @@ function stateChanged(element: Element, states: readonly string[]): void {
 	if (attached === undefined) {
 		return;
 	}
-	_(attached).extra.cascade.handleStateChange(element, states);
+	handleStateChange(_(attached).extra.cascade, element, states);
 	_(attached).extra.framebuffer.invalidate();
 	queueMicrotask(() => {
 		void _(attached).extra.render();
@@ -35696,7 +35700,7 @@ class MediaQueryList extends EventTarget {
 		const attached = getAttachedDocument(_(this).mediaQueryDocument);
 		return (
 			attached !== undefined &&
-			_(attached).extra.cascade.mediaQueryMatches(this.media)
+			mediaQueryMatches(_(attached).extra.cascade, this.media)
 		);
 	}
 
@@ -36155,7 +36159,7 @@ function handleMutationRecords(
 			ensureUAShadowTrees(added);
 		}
 	}
-	_(attached).extra.cascade.handleMutations(relevant);
+	handleMutations(_(attached).extra.cascade, relevant);
 	_(attached).extra.layout.handleMutations(relevant);
 	focusAutofocusedNodes(relevant);
 	dropUnfocusableFocus(document);
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 311351c2..d7346d8f 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -1,4 +1,11 @@
-import {type Cascade, getComputedValue, pxFromCells} from "./cssom.ts";
+import {
+	type Cascade,
+	getComputedValue,
+	handleActiveChange,
+	handleFocusChange,
+	handleHoverChange,
+	pxFromCells,
+} from "./cssom.ts";
 import {
 	attributeOf,
 	commitRangeThumb,
@@ -481,7 +488,7 @@ export class Input {
 		if (target !== previous) {
 			this.hoverElement = target;
 			setHoveredElement(this.document, target);
-			this.cascade.handleHoverChange(previous, target);
+			handleHoverChange(this.cascade, previous, target);
 			const getChain = (element: Element | null): Element[] => {
 				const chain: Element[] = [];
 				for (
@@ -1162,7 +1169,7 @@ function setPressed(input: Input, target: Element | null): void {
 		return;
 	}
 	setActiveElement(document, target);
-	input.cascade.handleActiveChange(previous, target);
+	handleActiveChange(input.cascade, previous, target);
 	requestRender(document);
 }
 
@@ -1185,7 +1192,7 @@ function dispatchPress(
 	input.popoverPressTarget = lightDismissPress(target);
 	input.textControlDragAnchor = null;
 	if (setDocumentFocusVisible(input.document, false)) {
-		input.cascade.handleFocusChange(getFocusedElement(input.document));
+		handleFocusChange(input.cascade, getFocusedElement(input.document));
 		requestRender(input.document);
 	}
 	const mousedown = constructInternal(() =>
@@ -1382,7 +1389,7 @@ function dispatchKey(input: Input, stroke: WireKey): void {
 	const keyCode = getLegacyKeyCode(keyName);
 
 	if (setDocumentFocusVisible(input.document, true)) {
-		input.cascade.handleFocusChange(getFocusedElement(input.document));
+		handleFocusChange(input.cascade, getFocusedElement(input.document));
 		requestRender(input.document);
 	}
 
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 96e1825d..2d42b69f 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1,11 +1,13 @@
 import {
 	type Cascade,
+	declaredPseudoProperties,
 	establishesFixedContainingBlock,
 	getBoxModel,
 	getCellBorderWidths,
 	getCellSize,
 	getComputedValue,
 	getDeclaredDisplay,
+	getMarkerContent,
 	getTabSize,
 	getUsedOverflow,
 	getWhiteSpace,
@@ -1634,7 +1636,7 @@ function renderOutsideMarker(
 	}
 	painter.renderedOutsideMarkers.add(element);
 
-	const markerContent = painter.cascade.getMarkerContent(element);
+	const markerContent = getMarkerContent(painter.cascade, element);
 	if (!markerContent) {
 		return;
 	}
@@ -1927,7 +1929,7 @@ function readHighlightStyle(
 	name: string,
 ): HighlightPaint | null {
 	const pseudo = `::highlight(${name})`;
-	const declared = painter.cascade.declaredPseudoProperties(element, pseudo);
+	const declared = declaredPseudoProperties(painter.cascade, element, pseudo);
 	const parent = flatParentElement(element);
 	const inherited = parent === null
 		? null

From 07b84808575c1bcf6ac64829b2552a6543c58303 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:52:59 -0400
Subject: [PATCH 27/99] Make Framebuffer's methods plain functions that take
 the framebuffer

renderStatic stays a method, since index.ts has a function of that name.
The test helper that drew a frame through any object with beginFrame and
endFrame takes a Framebuffer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts                    |   26 +-
 src/internal/dom.ts             |   36 +-
 src/internal/exchange.ts        |   25 +-
 src/internal/framebuffer.ts     | 1094 ++++++++++++++++---------------
 src/internal/input.ts           |    6 +-
 src/internal/painter.ts         |   13 +-
 tests/ansi-fixtures.ts          |   16 +-
 tests/ansi.test.ts              |   34 +-
 tests/line-clearing.test.ts     |    4 +-
 tests/test-utils.ts             |   18 +-
 tests/wide-cluster.test.ts      |   18 +-
 tests/width-measurement.test.ts |   10 +-
 12 files changed, 693 insertions(+), 607 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 97bd85f1..29f06649 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -54,7 +54,14 @@ import {
 	type TerminalTransport,
 	transportFromProcess,
 } from "./internal/exchange.ts";
-import {Framebuffer} from "./internal/framebuffer.ts";
+import {
+	beginFrame,
+	endFrame,
+	Framebuffer,
+	rebind,
+	repaintAll,
+	scrollTo,
+} from "./internal/framebuffer.ts";
 import {
 	releaseDecoder,
 	retainDecoder,
@@ -688,7 +695,7 @@ export class TermDOM extends EventTarget {
 			const depthSettled = slots.colorDepth === undefined
 				? slots.exchange.negotiateColorDepth().then((depth) => {
 					if (isAttached(this) && depth !== slots.framebuffer.colorDepth) {
-						slots.framebuffer.rebind(depth);
+						rebind(slots.framebuffer, depth);
 						syncMediaQueries(this.document);
 						void render(this);
 					}
@@ -999,7 +1006,7 @@ async function suspendTermDOM(termDOM: TermDOM): Promise<void> {
 		void termDOMSlots.exchange.setTitle(termDOM.document.title);
 	}
 	if (fullscreen) {
-		termDOMSlots.framebuffer.repaintAll();
+		repaintAll(termDOMSlots.framebuffer);
 	}
 	setDocumentVisible(termDOM.document, true);
 	void render(termDOM);
@@ -1505,8 +1512,8 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	const termDOMSlots = _(termDOM);
 	if (termDOMSlots.sealed) {
 		termDOMSlots.sealed = false;
-		termDOMSlots.framebuffer.scrollTo(0);
-		termDOMSlots.framebuffer.repaintAll();
+		scrollTo(termDOMSlots.framebuffer, 0);
+		repaintAll(termDOMSlots.framebuffer);
 		// detectAnchor reads a reply, so the listener must be attached.
 		if (termDOMSlots.transport.interactive) {
 			termDOM.attach();
@@ -1540,7 +1547,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		}
 		// Drop the diff model, or this frame patches one screen against the
 		// other's content.
-		termDOMSlots.framebuffer.repaintAll();
+		repaintAll(termDOMSlots.framebuffer);
 		syncMouseReporting(termDOM);
 		syncHoverReporting(termDOM);
 	}
@@ -1592,7 +1599,8 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		// Through scrollTo, so the journal's delta is what the screen is about
 		// to be shifted by.
 		const maxScroll = Math.max(0, contentHeight - regionHeight);
-		termDOMSlots.framebuffer.scrollTo(
+		scrollTo(
+			termDOMSlots.framebuffer,
 			Math.min(termDOMSlots.framebuffer.scrollTop, maxScroll),
 		);
 	}
@@ -1610,7 +1618,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 			));
 	// Read after the clamp, which adds to the journal.
 	const clamped = termDOMSlots.framebuffer.journal;
-	const context = termDOMSlots.framebuffer.beginFrame({
+	const context = beginFrame(termDOMSlots.framebuffer, {
 		offset: -termDOMSlots.framebuffer.scrollTop,
 		cursorRow: top,
 		regionRows: top + regionHeight,
@@ -1618,7 +1626,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		shift: shift ?? undefined,
 	});
 	paint(termDOMSlots.painter, context);
-	const ansi = termDOMSlots.framebuffer.endFrame();
+	const ansi = endFrame(termDOMSlots.framebuffer);
 	termDOMSlots.layout.framePainted();
 
 	// The cursor stays hidden while a frame paints and between frames. It
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 12f10904..dfcd1d3f 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -58,7 +58,13 @@ import {
 import * as CSSValues from "./cssvalues.ts";
 import {getEditingHost, installEditing} from "./editing.ts";
 import type {Exchange} from "./exchange.ts";
-import {CellContext, CellGrid, type Framebuffer} from "./framebuffer.ts";
+import {
+	CellContext,
+	CellGrid,
+	type Framebuffer,
+	invalidate,
+	scrollTo,
+} from "./framebuffer.ts";
 import {
 	getInterface,
 	getReflections,
@@ -10611,7 +10617,7 @@ export class Element extends Node implements globalThis.Element {
 			// subtree and repaint.
 			if (this.isConnected) {
 				_(attached).extra.layout.invalidate(this);
-				_(attached).extra.framebuffer.invalidate();
+				invalidate(_(attached).extra.framebuffer);
 				void _(attached).extra.render();
 			}
 		}
@@ -12181,7 +12187,7 @@ export class HTMLElement extends Element {
 			return;
 		}
 		handleFocusChange(_(attached).extra.cascade, this, null);
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 		dispatchAsUserAgent(
 			this,
@@ -12342,7 +12348,7 @@ function runFocusingSteps(element: HTMLElement): void {
 	// elements' resolved styles are stale whether or not a listener changes
 	// anything.
 	handleFocusChange(_(attached).extra.cascade, previous, element);
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 	// An edit the user made in the control focus is leaving is committed
 	// first, so change fires before blur.
@@ -15590,7 +15596,7 @@ function invalidateReplaced(element: Element, reflow: boolean): void {
 			_(attached).extra.layout.invalidate(parent as unknown as Node);
 		}
 	}
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -15933,7 +15939,7 @@ export function relayoutReplacedElements(
 		}
 	};
 	visit(root);
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -23278,7 +23284,7 @@ function stateChanged(element: Element, states: readonly string[]): void {
 		return;
 	}
 	handleStateChange(_(attached).extra.cascade, element, states);
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	queueMicrotask(() => {
 		void _(attached).extra.render();
 	});
@@ -29397,7 +29403,7 @@ function setScrollOffset(
 	if (axis === "top") {
 		recordScrollShift(attached, document, element, next - previous);
 	} else {
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 	}
 	let pending = pendingScrollTargets.get(document);
 	if (pending === undefined) {
@@ -29535,7 +29541,7 @@ export function clampScrollOffsets(document: globalThis.Document): void {
 	}
 	if (changed) {
 		scrollShifts.delete(document as Document);
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 	}
 }
@@ -29553,7 +29559,7 @@ function recordScrollShift(
 		shift.delta += delta;
 	} else {
 		scrollShifts.delete(document);
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 	}
 }
 
@@ -31184,7 +31190,7 @@ function scheduleSelectionChange(document: Document): void {
 	// below. That guard drops the second move in a task but not its paint.
 	const attached = getAttachedDocument(document);
 	if (attached !== undefined) {
-		_(attached).extra.framebuffer.invalidate();
+		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 	}
 	const documentSlots = _(document);
@@ -32975,7 +32981,7 @@ function invalidateHighlights(document: Document): void {
 	if (attached === undefined) {
 		return;
 	}
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -35911,7 +35917,7 @@ function onTextControlEditEvent(event: globalThis.Event): void {
 	_(attached).extra.pendingCaretReveal = target;
 	// A document scroll move and a caret move. No mutation record describes
 	// either.
-	_(attached).extra.framebuffer.invalidate();
+	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 }
 
@@ -35983,7 +35989,7 @@ export function scrollDocumentTo(
 	if (next === _(attached).extra.framebuffer.scrollTop) {
 		return;
 	}
-	_(attached).extra.framebuffer.scrollTo(next);
+	scrollTo(_(attached).extra.framebuffer, next);
 	void _(attached).extra.render();
 }
 
@@ -36103,7 +36109,7 @@ export function revealPendingCaret(document: globalThis.Document): void {
 				? revealBottom - (top + regionHeight)
 				: 0;
 	if (delta) {
-		attachedSlots.extra.framebuffer.scrollTo(top + delta);
+		scrollTo(attachedSlots.extra.framebuffer, top + delta);
 		// No mutation record describes a document scroll move.
 		void attachedSlots.extra.render();
 	}
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index 60ef842e..7763f43a 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -9,7 +9,16 @@ import {
 	syncMediaQueries,
 	type Window,
 } from "./dom.ts";
-import type {Framebuffer} from "./framebuffer.ts";
+import {
+	adoptCellPixels,
+	flushProbes,
+	type Framebuffer,
+	repaintAll,
+	replaced,
+	resize,
+	scrolled,
+	wrappedRowsAbovePark,
+} from "./framebuffer.ts";
 import type {Input} from "./input.ts";
 import type {Layout} from "./layout.ts";
 import {_, type internals} from "./slots.ts";
@@ -1312,7 +1321,7 @@ export class Exchange extends EventTarget {
 		return (
 			answer !== null &&
 			!slots.disposed &&
-			slots.framebuffer.adoptCellPixels(answer.width, answer.height)
+			adoptCellPixels(slots.framebuffer, answer.width, answer.height)
 		);
 	}
 
@@ -1594,7 +1603,7 @@ export class Exchange extends EventTarget {
 			// The previous buffer is not shifted. Its rows are region-relative
 			// and the region top moved by exactly the scroll. A pending
 			// post-resize reset is screen-absolute and does shift.
-			framebuffer.scrolled(push);
+			scrolled(framebuffer, push);
 		}
 		return framebuffer.documentTop;
 	}
@@ -1782,7 +1791,7 @@ function requestDeferredProbeFrame(session: Exchange): void {
 			return;
 		}
 		// Deferred probes go out with the next frame even if nothing changed.
-		sessionSlots.framebuffer.flushProbes();
+		flushProbes(sessionSlots.framebuffer);
 		requestRender(sessionSlots.window.document);
 	}, WIDTH_DEFERRAL_WAIT_MS);
 }
@@ -1875,7 +1884,7 @@ function settleWidthProbe(
 	// corrected measurements.
 	if (recordClusterAdvance(probe.cluster, advance)) {
 		sessionSlots.layout.invalidateTextMeasurement();
-		sessionSlots.framebuffer.repaintAll();
+		repaintAll(sessionSlots.framebuffer);
 		requestRender(sessionSlots.window.document);
 	}
 }
@@ -1962,7 +1971,7 @@ function terminalResized(
 	const framebuffer = sessionSlots.framebuffer;
 	// A SIGWINCH with an unchanged size still redraws but fires no event.
 	const sizeChanged = width !== framebuffer.cols || height !== framebuffer.rows;
-	framebuffer.resize(height, width);
+	resize(framebuffer, height, width);
 	sessionSlots.layout.resize(width, height);
 	// A size change can flip any @media result and every vw/vh value.
 	sessionSlots.cascade.syncStylesheets();
@@ -1994,14 +2003,14 @@ function handleResize(session: Exchange): void {
 	const layout = sessionSlots.layout;
 	layout.performLayout();
 	const contentHeight = layout.documentPaintHeight();
-	const wrappedRowsAbove = framebuffer.wrappedRowsAbovePark(newWidth);
+	const wrappedRowsAbove = wrappedRowsAbovePark(framebuffer, newWidth);
 	const documentTop = framebuffer.documentTop;
 	const settling = sessionSlots.settlingResize;
 
 	// The frame now starts at startRow. Repaint it from there.
 	const redraw = (startRow: number) => {
 		framebuffer.documentTop = startRow;
-		framebuffer.replaced(startRow);
+		replaced(framebuffer, startRow);
 		requestRender(sessionSlots.window.document);
 
 		// The frame is placed by the screen reset. Cursor detection is
diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index bd0fcadf..46d7e22e 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -2047,133 +2047,6 @@ export class Framebuffer {
 		this.documentTopRow = row;
 	}
 
-	resize(rows: number, cols: number): void {
-		this.rowCount = rows;
-		this.colCount = cols;
-	}
-
-	rebind(colorDepth: ColorDepth): void {
-		this.writer = new FrameWriter(colorDepth);
-	}
-
-	scrollTo(row: number): void {
-		const next = Math.max(0, row);
-		this.frameScroll += next - this.scrollRow;
-		this.scrollRow = next;
-	}
-
-	/**
-	 * XTWINOPS answered. Whatever was painted against the guess repaints.
-	 * Whether the size changed, which images sized from it need to know.
-	 */
-	adoptCellPixels(width: number, height: number): boolean {
-		const cell = this.cellSize;
-		if (cell.width === width && cell.height === height) {
-			return false;
-		}
-		this.cellSize = {width, height};
-		this.invalidate();
-		return true;
-	}
-
-	invalidate(): void {
-		this.dirty = true;
-	}
-
-	/**
-	 * Whether shifting the whole width of rows `[top, end)` by `delta` costs
-	 * less than repainting the columns `[left, right)` that scrolled. The
-	 * shift drags the cells beside those columns too, and the diff has to put
-	 * them back. Both costs are read from the previous frame: a cell costs
-	 * its glyph and each color it changes from its left neighbour, which is
-	 * what the diff writes.
-	 */
-	insetShiftPays(
-		{delta, top, end, left, right}: {
-			delta: number;
-			top: number;
-			end: number;
-			left: number;
-			right: number;
-		},
-	): boolean {
-		const prev = this.prev;
-		if (prev === null || prev.cols !== this.colCount) {
-			return false;
-		}
-		const cols = prev.cols;
-		const cost = (index: number, col: number): number =>
-			1 +
-			(col > 0 && prev.fg[index] !== prev.fg[index - 1] ? 16 : 0) +
-			(col > 0 && prev.bg[index] !== prev.bg[index - 1] ? 16 : 0);
-		const bandEnd = Math.min(end, prev.rows);
-		let beside = 0;
-		let inside = 0;
-		for (let row = top; row < bandEnd; row++) {
-			const from = row + delta;
-			const vacated = from < top || from >= bandEnd;
-			for (let col = 0; col < cols; col++) {
-				const index = row * cols + col;
-				const source = from * cols + col;
-				if (col < left || col >= right) {
-					if (
-						vacated
-							? prev.cluster[index] !== 0
-							: !prev.equalCells(index, prev, source)
-					) {
-						beside += cost(index, col);
-					}
-				} else if (!vacated && !prev.equalCells(index, prev, source)) {
-					inside += cost(source, col);
-				}
-			}
-		}
-		return beside < inside;
-	}
-
-	wrappedRowsAbovePark(cols: number): number | null {
-		// The resize re-anchor asks the terminal where the cursor is after the
-		// rewrap and subtracts this to find the frame's new top row.
-		const grid = this.prev;
-		if (grid === null || this.prevContentHeight === 0 || cols <= 0) {
-			return null;
-		}
-		const limit = Math.min(this.park.row, this.prevContentHeight, grid.rows);
-		let wrapped = 0;
-		for (let row = 0; row < limit; row++) {
-			wrapped += Math.max(1, Math.ceil(getLineLength(grid, row) / cols));
-		}
-		return wrapped + Math.floor(this.park.col / cols);
-	}
-
-	replaced(fromRow = 0): void {
-		this.needsScreenReset = true;
-		this.resetAtRow = Math.max(0, fromRow);
-		this.hasSavedCursor = false;
-		this.repaintAll();
-	}
-
-	scrolled(rows: number): void {
-		if (this.needsScreenReset && rows > 0) {
-			this.resetAtRow = Math.max(0, this.resetAtRow - rows);
-		}
-	}
-
-	flushProbes(): void {
-		this.probesWaiting = true;
-	}
-
-	repaintAll(): void {
-		// After a resize DECRC no longer points where the content began, so
-		// the next frame homes, clears the visible screen (ED2, not ED3, which
-		// leaves the scrollback alone) and reprints.
-		this.spare = this.prev;
-		this.prev = null;
-		this.prevContentHeight = 0;
-		this.needsFullClear = true;
-		this.renderedLines.clear();
-	}
-
 	/**
 	 * A static rendering painted apart from the live frame, whose pending
 	 * scroll and repaint it leaves as they were. A file wants a bare
@@ -2197,463 +2070,632 @@ export class Framebuffer {
 		}
 		return lines.join(lineEnding) + lineEnding;
 	}
+}
 
-	beginFrame(
-		{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift}: {
+export function resize(
+	framebuffer: Framebuffer,
+	rows: number,
+	cols: number,
+): void {
+	framebuffer.rowCount = rows;
+	framebuffer.colCount = cols;
+}
 
-			/** Rows the document scroll has scrolled, negative downward. */
-			offset: number;
+export function rebind(framebuffer: Framebuffer, colorDepth: ColorDepth): void {
+	framebuffer.writer = new FrameWriter(colorDepth);
+}
 
-			cursorRow?: number;
+export function scrollTo(framebuffer: Framebuffer, row: number): void {
+	const next = Math.max(0, row);
+	framebuffer.frameScroll += next - framebuffer.scrollRow;
+	framebuffer.scrollRow = next;
+}
 
-			/**
-		 * Rows past the terminal's height are printed with newlines, which is
-		 * what scrolls them into the scrollback where they stay readable (CSI n
-		 * S discards them). Only the last `rows` of them are kept as the previous
-		 * frame. They alone can still be redrawn.
-		 */
-			regionRows?: number;
+/**
+ * XTWINOPS answered. Whatever was painted against the guess repaints.
+ * Whether the size changed, which images sized from it need to know.
+ */
+export function adoptCellPixels(
+	framebuffer: Framebuffer,
+	width: number,
+	height: number,
+): boolean {
+	const cell = framebuffer.cellSize;
+	if (cell.width === width && cell.height === height) {
+		return false;
+	}
+	framebuffer.cellSize = {width, height};
+	invalidate(framebuffer);
+	return true;
+}
 
-			/** Rows the scroll moved since the last frame, positive downward. */
-			delta?: number;
+export function invalidate(framebuffer: Framebuffer): void {
+	framebuffer.dirty = true;
+}
 
-			/**
-		 * The buffer rows `delta` moved, `[top, end)`. A scrolling element's
-		 * port names its own rows here. The document scroll names none and takes the
-		 * whole region, which is the rows a document scroll spans.
-		 */
-			shift?: {top: number; end: number};
-		},
-	): CellContext {
-		const frameRows = Math.max(this.rowCount, regionRows ?? this.rowCount);
-		const overflowing = frameRows > this.rowCount;
-		const cols = this.colCount;
-		const next = takeGrid(this, frameRows, cols);
-
-		// A scroll is a rigid transform the terminal performs. DECSTBM pins the
-		// margins to the shifted rows (a shell prompt above stays outside
-		// them), and DL/IL move rows without touching the scrollback, unlike
-		// SU. The previous buffer shifts to match, so the diff emits only what
-		// the shift could not carry.
-		let scrollPrefix = "";
-		const regionTop = cursorPosition ?? 0;
-		const regionEnd = Math.min(regionRows ?? this.rowCount, this.rowCount);
-		const viewportTop = Math.max(0, shift ? shift.top : 0);
-		const bandEnd = Math.min(
-			this.prev?.rows ?? 0,
-			shift ? shift.end : regionEnd - regionTop,
-		);
-		const scrolling =
-			delta !== 0 &&
-			Math.abs(delta) < this.rowCount &&
-			bandEnd > viewportTop &&
-			this.prev !== null &&
-			// A rigid transform only makes sense between grids of one width.
-			this.prev.cols === cols &&
-			!overflowing &&
-			!this.needsScreenReset &&
-			!this.needsFullClear &&
-			cursorPosition !== undefined;
-		if (scrolling && this.prev) {
-			const prev = this.prev;
-			const start = viewportTop * cols;
-			const stop = bandEnd * cols;
-			const shift = Math.abs(delta) * cols;
-			if (shift >= stop - start) {
-				prev.clearRange(start, stop);
-			} else if (delta > 0) {
-				prev.moveRange(start, start + shift, stop);
-				prev.clearRange(stop - shift, stop);
-			} else {
-				prev.moveRange(start + shift, start, stop - shift);
-				prev.clearRange(start, start + shift);
-			}
-			const shiftedLines = new Set<number>();
-			for (const row of this.renderedLines) {
-				if (row < viewportTop || row >= bandEnd) {
-					shiftedLines.add(row);
-					continue;
-				}
-				const moved = row - delta;
-				if (moved >= viewportTop && moved < bandEnd) {
-					shiftedLines.add(moved);
+/**
+ * Whether shifting the whole width of rows `[top, end)` by `delta` costs
+ * less than repainting the columns `[left, right)` that scrolled. The
+ * shift drags the cells beside those columns too, and the diff has to put
+ * them back. Both costs are read from the previous frame: a cell costs
+ * its glyph and each color it changes from its left neighbour, which is
+ * what the diff writes.
+ */
+export function insetShiftPays(
+	framebuffer: Framebuffer,
+	{delta, top, end, left, right}: {
+		delta: number;
+		top: number;
+		end: number;
+		left: number;
+		right: number;
+	},
+): boolean {
+	const prev = framebuffer.prev;
+	if (prev === null || prev.cols !== framebuffer.colCount) {
+		return false;
+	}
+	const cols = prev.cols;
+	const cost = (index: number, col: number): number =>
+		1 +
+		(col > 0 && prev.fg[index] !== prev.fg[index - 1] ? 16 : 0) +
+		(col > 0 && prev.bg[index] !== prev.bg[index - 1] ? 16 : 0);
+	const bandEnd = Math.min(end, prev.rows);
+	let beside = 0;
+	let inside = 0;
+	for (let row = top; row < bandEnd; row++) {
+		const from = row + delta;
+		const vacated = from < top || from >= bandEnd;
+		for (let col = 0; col < cols; col++) {
+			const index = row * cols + col;
+			const source = from * cols + col;
+			if (col < left || col >= right) {
+				if (
+					vacated
+						? prev.cluster[index] !== 0
+						: !prev.equalCells(index, prev, source)
+				) {
+					beside += cost(index, col);
 				}
+			} else if (!vacated && !prev.equalCells(index, prev, source)) {
+				inside += cost(source, col);
 			}
-			this.renderedLines = shiftedLines;
-
-			// DECSTBM homes the cursor. The standard prefix always CUPs for
-			// this caller afterward.
-			const count = Math.abs(delta);
-			const bandRow = regionTop + viewportTop + 1;
-			const writer = this.writer;
-			writer.setScrollRegion(bandRow, regionTop + bandEnd).cursorTo(bandRow, 1);
-			if (delta > 0) {
-				writer.deleteLines(count);
-			} else {
-				writer.insertLines(count);
+		}
+	}
+	return beside < inside;
+}
+
+export function wrappedRowsAbovePark(
+	framebuffer: Framebuffer,
+	cols: number,
+): number | null {
+	// The resize re-anchor asks the terminal where the cursor is after the
+	// rewrap and subtracts this to find the frame's new top row.
+	const grid = framebuffer.prev;
+	if (grid === null || framebuffer.prevContentHeight === 0 || cols <= 0) {
+		return null;
+	}
+	const limit = Math.min(
+		framebuffer.park.row,
+		framebuffer.prevContentHeight,
+		grid.rows,
+	);
+	let wrapped = 0;
+	for (let row = 0; row < limit; row++) {
+		wrapped += Math.max(1, Math.ceil(getLineLength(grid, row) / cols));
+	}
+	return wrapped + Math.floor(framebuffer.park.col / cols);
+}
+
+export function replaced(framebuffer: Framebuffer, fromRow = 0): void {
+	framebuffer.needsScreenReset = true;
+	framebuffer.resetAtRow = Math.max(0, fromRow);
+	framebuffer.hasSavedCursor = false;
+	repaintAll(framebuffer);
+}
+
+export function scrolled(framebuffer: Framebuffer, rows: number): void {
+	if (framebuffer.needsScreenReset && rows > 0) {
+		framebuffer.resetAtRow = Math.max(0, framebuffer.resetAtRow - rows);
+	}
+}
+
+export function flushProbes(framebuffer: Framebuffer): void {
+	framebuffer.probesWaiting = true;
+}
+
+export function repaintAll(framebuffer: Framebuffer): void {
+	// After a resize DECRC no longer points where the content began, so
+	// the next frame homes, clears the visible screen (ED2, not ED3, which
+	// leaves the scrollback alone) and reprints.
+	framebuffer.spare = framebuffer.prev;
+	framebuffer.prev = null;
+	framebuffer.prevContentHeight = 0;
+	framebuffer.needsFullClear = true;
+	framebuffer.renderedLines.clear();
+}
+
+export function beginFrame(
+	framebuffer: Framebuffer,
+	{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift}: {
+
+		/** Rows the document scroll has scrolled, negative downward. */
+		offset: number;
+
+		cursorRow?: number;
+
+		/**
+	 * Rows past the terminal's height are printed with newlines, which is
+	 * what scrolls them into the scrollback where they stay readable (CSI n
+	 * S discards them). Only the last `rows` of them are kept as the previous
+	 * frame. They alone can still be redrawn.
+	 */
+		regionRows?: number;
+
+		/** Rows the scroll moved since the last frame, positive downward. */
+		delta?: number;
+
+		/**
+	 * The buffer rows `delta` moved, `[top, end)`. A scrolling element's
+	 * port names its own rows here. The document scroll names none and takes the
+	 * whole region, which is the rows a document scroll spans.
+	 */
+		shift?: {top: number; end: number};
+	},
+): CellContext {
+	const frameRows = Math.max(
+		framebuffer.rowCount,
+		regionRows ?? framebuffer.rowCount,
+	);
+	const overflowing = frameRows > framebuffer.rowCount;
+	const cols = framebuffer.colCount;
+	const next = takeGrid(framebuffer, frameRows, cols);
+
+	// A scroll is a rigid transform the terminal performs. DECSTBM pins the
+	// margins to the shifted rows (a shell prompt above stays outside
+	// them), and DL/IL move rows without touching the scrollback, unlike
+	// SU. The previous buffer shifts to match, so the diff emits only what
+	// the shift could not carry.
+	let scrollPrefix = "";
+	const regionTop = cursorPosition ?? 0;
+	const regionEnd = Math.min(
+		regionRows ?? framebuffer.rowCount,
+		framebuffer.rowCount,
+	);
+	const viewportTop = Math.max(0, shift ? shift.top : 0);
+	const bandEnd = Math.min(
+		framebuffer.prev?.rows ?? 0,
+		shift ? shift.end : regionEnd - regionTop,
+	);
+	const scrolling =
+		delta !== 0 &&
+		Math.abs(delta) < framebuffer.rowCount &&
+		bandEnd > viewportTop &&
+		framebuffer.prev !== null &&
+		// A rigid transform only makes sense between grids of one width.
+		framebuffer.prev.cols === cols &&
+		!overflowing &&
+		!framebuffer.needsScreenReset &&
+		!framebuffer.needsFullClear &&
+		cursorPosition !== undefined;
+	if (scrolling && framebuffer.prev) {
+		const prev = framebuffer.prev;
+		const start = viewportTop * cols;
+		const stop = bandEnd * cols;
+		const shift = Math.abs(delta) * cols;
+		if (shift >= stop - start) {
+			prev.clearRange(start, stop);
+		} else if (delta > 0) {
+			prev.moveRange(start, start + shift, stop);
+			prev.clearRange(stop - shift, stop);
+		} else {
+			prev.moveRange(start + shift, start, stop - shift);
+			prev.clearRange(start, start + shift);
+		}
+		const shiftedLines = new Set<number>();
+		for (const row of framebuffer.renderedLines) {
+			if (row < viewportTop || row >= bandEnd) {
+				shiftedLines.add(row);
+				continue;
+			}
+			const moved = row - delta;
+			if (moved >= viewportTop && moved < bandEnd) {
+				shiftedLines.add(moved);
 			}
-			scrollPrefix = writer.resetScrollRegion().take();
 		}
+		framebuffer.renderedLines = shiftedLines;
+
+		// DECSTBM homes the cursor. The standard prefix always CUPs for
+		// this caller afterward.
+		const count = Math.abs(delta);
+		const bandRow = regionTop + viewportTop + 1;
+		const writer = framebuffer.writer;
+		writer.setScrollRegion(bandRow, regionTop + bandEnd).cursorTo(bandRow, 1);
+		if (delta > 0) {
+			writer.deleteLines(count);
+		} else {
+			writer.insertLines(count);
+		}
+		scrollPrefix = writer.resetScrollRegion().take();
+	}
 
-		const context = new CellContext(next, frameRows, cols, offset);
-		context.backdrop = this.exchange?.terminalBackground ?? null;
-		this.pendingEnd = (): string => {
-			const measurer = this.exchange !== null && isProbingUseful(this.exchange)
-				? this.exchange
+	const context = new CellContext(next, frameRows, cols, offset);
+	context.backdrop = framebuffer.exchange?.terminalBackground ?? null;
+	framebuffer.pendingEnd = (): string => {
+		const measurer =
+			framebuffer.exchange !== null &&
+			isProbingUseful(framebuffer.exchange)
+				? framebuffer.exchange
 				: undefined;
-			// The frame is complete. Join the borders whose strokes touch, so
-			// the diff below sees a junction appear even when only its
-			// neighbour changed.
-			joinTouchingBorders(next);
-
-			// Build the diff. A frame taller than the terminal is a growth
-			// frame. The rows below the fold have never been on screen, so
-			// there is nothing to diff against. Print all of it.
-			let diff = this.diff;
-			if (diff === null || diff.rows !== frameRows || diff.cols !== cols) {
-				diff = new CellGrid(frameRows, cols);
-				this.diff = diff;
-			} else {
-				diff.clear();
-			}
+		// The frame is complete. Join the borders whose strokes touch, so
+		// the diff below sees a junction appear even when only its
+		// neighbour changed.
+		joinTouchingBorders(next);
+
+		// Build the diff. A frame taller than the terminal is a growth
+		// frame. The rows below the fold have never been on screen, so
+		// there is nothing to diff against. Print all of it.
+		let diff = framebuffer.diff;
+		if (diff === null || diff.rows !== frameRows || diff.cols !== cols) {
+			diff = new CellGrid(frameRows, cols);
+			framebuffer.diff = diff;
+		} else {
+			diff.clear();
+		}
 
-			const prev = this.prev;
-			const erasesDisputedRows =
-				this.exchange !== null && !this.exchange.clusterWidthsNegotiated();
-			if (prev === null || overflowing) {
-				diff.copyFrom(next, {to: 0, start: 0, end: frameRows * cols});
-			} else {
-				const prevRows = prev.rows;
-				const prevCols = prev.cols;
-				const aligned = prevCols === cols;
-
-				for (let row = 0; row < this.rowCount; row++) {
-					const nextRow = row * cols;
-					const prevRow = row * prevCols;
-					const rowInPrev = row < prevRows;
-
-					let col = 0;
-					if (aligned && rowInPrev) {
-						while (col < cols) {
-							const n = nextRow + col;
-							const p = prevRow + col;
-							if (
-								next.cluster[n] !== prev.cluster[p] ||
-								next.fg[n] !== prev.fg[p] ||
-								next.bg[n] !== prev.bg[p] ||
-								(next.attrs[n] & ATTR.StyleMask) !==
-								(prev.attrs[p] & ATTR.StyleMask) ||
-								next.border[n] !== prev.border[p]
-							) {
-								break;
-							}
-							col++;
-						}
-						if (col === cols) {
-							continue;
-						}
-						// A terminal that drew a cluster of the old row at another
-						// width than the engine measured has the rest of that row
-						// shifted. Cells rewritten after it would land beside the
-						// old ones, so the row is erased and written whole. A
-						// cluster of the new row is the same in reverse: a
-						// multiplexer that counts it wider than the terminal under
-						// it draws it never writes the extra column, and that
-						// column would keep the old row's glyph.
+		const prev = framebuffer.prev;
+		const erasesDisputedRows =
+			framebuffer.exchange !== null &&
+			!framebuffer.exchange.clusterWidthsNegotiated();
+		if (prev === null || overflowing) {
+			diff.copyFrom(next, {to: 0, start: 0, end: frameRows * cols});
+		} else {
+			const prevRows = prev.rows;
+			const prevCols = prev.cols;
+			const aligned = prevCols === cols;
+
+			for (let row = 0; row < framebuffer.rowCount; row++) {
+				const nextRow = row * cols;
+				const prevRow = row * prevCols;
+				const rowInPrev = row < prevRows;
+
+				let col = 0;
+				if (aligned && rowInPrev) {
+					while (col < cols) {
+						const n = nextRow + col;
+						const p = prevRow + col;
 						if (
-							erasesDisputedRows &&
-							hasDisputedCellBefore(prev, prevRow, cols, next, nextRow)
+							next.cluster[n] !== prev.cluster[p] ||
+							next.fg[n] !== prev.fg[p] ||
+							next.bg[n] !== prev.bg[p] ||
+							(next.attrs[n] & ATTR.StyleMask) !==
+							(prev.attrs[p] & ATTR.StyleMask) ||
+							next.border[n] !== prev.border[p]
 						) {
-							this.renderedLines.delete(row);
-							let empty = true;
-							for (let c = 0; c < cols; c++) {
-								if (next.cluster[nextRow + c] !== 0) {
-									diff.setFrom(nextRow + c, next, nextRow + c);
-									empty = false;
-								}
-							}
-							if (empty) {
-								diff.setBlank(nextRow);
+							break;
+						}
+						col++;
+					}
+					if (col === cols) {
+						continue;
+					}
+					// A terminal that drew a cluster of the old row at another
+					// width than the engine measured has the rest of that row
+					// shifted. Cells rewritten after it would land beside the
+					// old ones, so the row is erased and written whole. A
+					// cluster of the new row is the same in reverse: a
+					// multiplexer that counts it wider than the terminal under
+					// it draws it never writes the extra column, and that
+					// column would keep the old row's glyph.
+					if (
+						erasesDisputedRows &&
+						hasDisputedCellBefore(prev, prevRow, cols, next, nextRow)
+					) {
+						framebuffer.renderedLines.delete(row);
+						let empty = true;
+						for (let c = 0; c < cols; c++) {
+							if (next.cluster[nextRow + c] !== 0) {
+								diff.setFrom(nextRow + c, next, nextRow + c);
+								empty = false;
 							}
-							continue;
 						}
+						if (empty) {
+							diff.setBlank(nextRow);
+						}
+						continue;
 					}
+				}
 
-					for (; col < cols; col++) {
-						const n = nextRow + col;
-						const nextChar = next.cluster[n];
+				for (; col < cols; col++) {
+					const n = nextRow + col;
+					const nextChar = next.cluster[n];
 
-						if (!rowInPrev || col >= prevCols) {
-							if (nextChar !== 0) {
-								diff.setFrom(n, next, n);
-							}
-							continue;
+					if (!rowInPrev || col >= prevCols) {
+						if (nextChar !== 0) {
+							diff.setFrom(n, next, n);
 						}
+						continue;
+					}
 
-						const p = prevRow + col;
-						const prevChar = prev.cluster[p];
+					const p = prevRow + col;
+					const prevChar = prev.cluster[p];
 
-						if (prevChar === 0) {
-							if (nextChar !== 0) {
-								diff.setFrom(n, next, n);
-							}
-						} else if (nextChar === 0) {
-							// A cell the frame no longer paints has to be
-							// erased, not merely skipped. The terminal still
-							// shows the old glyph there.
-							diff.setBlank(n);
-						} else if (!next.equalCells(n, prev, p)) {
+					if (prevChar === 0) {
+						if (nextChar !== 0) {
 							diff.setFrom(n, next, n);
 						}
+					} else if (nextChar === 0) {
+						// A cell the frame no longer paints has to be
+						// erased, not merely skipped. The terminal still
+						// shows the old glyph there.
+						diff.setBlank(n);
+					} else if (!next.equalCells(n, prev, p)) {
+						diff.setFrom(n, next, n);
 					}
 				}
 			}
+		}
 
-			// A reset frame redraws onto rows whose terminal content is
-			// unknown, because the previous buffer was dropped. Every region
-			// row must clear ITSELF. A row the new frame leaves blank gets a
-			// seeded space so generateANSI emits its \r\e[K line like any
-			// content row. Per-row erases instead of one ED from the home
-			// position matter in tmux, which preserves a fully-erased screen by
-			// pushing it into scrollback (the courtesy it extends to `clear`).
-			// The ED archived a copy of the old frame into the scrollback on
-			// every resize.
-			const resetFrame = this.needsScreenReset || this.needsFullClear;
-			if (resetFrame) {
-				// Buffer rows are region-relative (the anchor row is where the
-				// frame CUPs to). regionRows is a screen-absolute end. Seed
-				// exactly the region's rows. Seeding further would count blank
-				// screen rows as content and skew the park the resize re-anchor
-				// measures from.
-				const anchorRow = this.needsScreenReset
-					? this.resetAtRow
-					: (cursorPosition ?? 0);
-				const regionHeight = (regionRows ?? this.rowCount) - anchorRow;
-				const seedRows = Math.min(frameRows, this.rowCount, regionHeight);
-				for (let row = 0; row < seedRows; row++) {
-					const rowStart = row * cols;
-					let empty = true;
-					for (let col = 0; col < cols; col++) {
-						if (diff.cluster[rowStart + col] !== 0) {
-							empty = false;
-							break;
-						}
-					}
-					if (empty) {
-						diff.setBlank(rowStart);
+		// A reset frame redraws onto rows whose terminal content is
+		// unknown, because the previous buffer was dropped. Every region
+		// row must clear ITSELF. A row the new frame leaves blank gets a
+		// seeded space so generateANSI emits its \r\e[K line like any
+		// content row. Per-row erases instead of one ED from the home
+		// position matter in tmux, which preserves a fully-erased screen by
+		// pushing it into scrollback (the courtesy it extends to `clear`).
+		// The ED archived a copy of the old frame into the scrollback on
+		// every resize.
+		const resetFrame =
+			framebuffer.needsScreenReset || framebuffer.needsFullClear;
+		if (resetFrame) {
+			// Buffer rows are region-relative (the anchor row is where the
+			// frame CUPs to). regionRows is a screen-absolute end. Seed
+			// exactly the region's rows. Seeding further would count blank
+			// screen rows as content and skew the park the resize re-anchor
+			// measures from.
+			const anchorRow = framebuffer.needsScreenReset
+				? framebuffer.resetAtRow
+				: (cursorPosition ?? 0);
+			const regionHeight = (regionRows ?? framebuffer.rowCount) - anchorRow;
+			const seedRows = Math.min(frameRows, framebuffer.rowCount, regionHeight);
+			for (let row = 0; row < seedRows; row++) {
+				const rowStart = row * cols;
+				let empty = true;
+				for (let col = 0; col < cols; col++) {
+					if (diff.cluster[rowStart + col] !== 0) {
+						empty = false;
+						break;
 					}
 				}
+				if (empty) {
+					diff.setBlank(rowStart);
+				}
 			}
+		}
 
-			let hasContent = false;
+		let hasContent = false;
 
-			const diffCells = frameRows * cols;
-			for (let index = 0; index < diffCells; index++) {
-				if (diff.cluster[index] !== 0) {
-					hasContent = true;
-					break;
-				}
+		const diffCells = frameRows * cols;
+		for (let index = 0; index < diffCells; index++) {
+			if (diff.cluster[index] !== 0) {
+				hasContent = true;
+				break;
 			}
+		}
 
-			// Waiting probes go only under cells this same write paints over.
-			// A frame that diffs to nothing offers none, so the first
-			// contentful row re-emits verbatim: identical cells, no erase, and
-			// the probes go under them.
-			if (this.probesWaiting) {
-				this.probesWaiting = false;
-				if (measurer !== undefined && !hasContent) {
-					for (let row = 0; row < frameRows && !hasContent; row++) {
-						const rowStart = row * cols;
-						for (let col = 0; col < cols; col++) {
-							const index = rowStart + col;
-							if (next.cluster[index] !== 0) {
-								diff.setFrom(index, next, index);
-								hasContent = true;
-							}
+		// Waiting probes go only under cells this same write paints over.
+		// A frame that diffs to nothing offers none, so the first
+		// contentful row re-emits verbatim: identical cells, no erase, and
+		// the probes go under them.
+		if (framebuffer.probesWaiting) {
+			framebuffer.probesWaiting = false;
+			if (measurer !== undefined && !hasContent) {
+				for (let row = 0; row < frameRows && !hasContent; row++) {
+					const rowStart = row * cols;
+					for (let col = 0; col < cols; col++) {
+						const index = rowStart + col;
+						if (next.cluster[index] !== 0) {
+							diff.setFrom(index, next, index);
+							hasContent = true;
 						}
 					}
 				}
 			}
+		}
 
-			// A caret appearing, moving, or disappearing must emit a frame even
-			// when no cell changed. A blurred input leaves no visual diff, but
-			// the real cursor is sitting visible at the stale caret until a
-			// frame re-parks it.
-			const caret = context.caret;
-			const caretBufferRow = caret === null ? null : caret.row + offset;
-			const caretVisible =
-				caret !== null &&
-				caretBufferRow !== null &&
-				caretBufferRow >= 0 &&
-				caretBufferRow < this.rowCount &&
-				caret.col >= 0 &&
-				caret.col < this.colCount;
-			const caretStateChanged =
-				caretVisible !== this.lastCaretVisible ||
-				(caretVisible &&
-					(this.park.row !== caretBufferRow || this.park.col !== caret.col));
-			if (caretStateChanged) {
-				hasContent = true;
-			}
-			this.lastCaretVisible = caretVisible;
+		// A caret appearing, moving, or disappearing must emit a frame even
+		// when no cell changed. A blurred input leaves no visual diff, but
+		// the real cursor is sitting visible at the stale caret until a
+		// frame re-parks it.
+		const caret = context.caret;
+		const caretBufferRow = caret === null ? null : caret.row + offset;
+		const caretVisible =
+			caret !== null &&
+			caretBufferRow !== null &&
+			caretBufferRow >= 0 &&
+			caretBufferRow < framebuffer.rowCount &&
+			caret.col >= 0 &&
+			caret.col < framebuffer.colCount;
+		const caretStateChanged =
+			caretVisible !== framebuffer.lastCaretVisible ||
+			(caretVisible &&
+				(framebuffer.park.row !== caretBufferRow ||
+					framebuffer.park.col !== caret.col));
+		if (caretStateChanged) {
+			hasContent = true;
+		}
+		framebuffer.lastCaretVisible = caretVisible;
 
-			if (scrolling) {
-				hasContent = true;
-			}
-			// A repaint asked the screen to be cleared, and the frame that
-			// answers it must be written even with nothing to draw. Leaving
-			// fullscreen for an emptied document shows the rows the document
-			// held before it went fullscreen until something erases them.
-			if (this.needsFullClear) {
-				hasContent = true;
-			}
+		if (scrolling) {
+			hasContent = true;
+		}
+		// A repaint asked the screen to be cleared, and the frame that
+		// answers it must be written even with nothing to draw. Leaving
+		// fullscreen for an emptied document shows the rows the document
+		// held before it went fullscreen until something erases them.
+		if (framebuffer.needsFullClear) {
+			hasContent = true;
+		}
 
-			const writer = this.writer;
-			let prefix = scrollPrefix;
-			let frameStartRow: number | undefined;
-			if (hasContent) {
-				if (this.needsScreenReset) {
-					// After a resize the terminal rewrapped our frame and moved
-					// the cursor where DECRC cannot find it. The row our
-					// content starts at still holds, since what is above us
-					// does not reflow-grow. No home and no ED. That would wipe
-					// what is above us, and tmux archives a full-screen erase
-					// into the scrollback.
-					prefix += writer.cursorTo(this.resetAtRow + 1, 1).saveCursor().take();
-					this.hasSavedCursor = true;
-					this.needsScreenReset = false;
-					this.needsFullClear = false;
-					frameStartRow = this.resetAtRow;
-				} else if (cursorPosition !== undefined) {
-					prefix += writer.cursorTo(cursorPosition + 1, 1).saveCursor().take();
-					this.hasSavedCursor = true;
-					frameStartRow = cursorPosition;
-				} else if (offset > 0) {
-					prefix += writer.cursorTo(offset + 1, 1).take();
-					frameStartRow = offset;
-				} else if (this.hasSavedCursor) {
-					prefix += writer.restoreCursor().saveCursor().take();
-				} else {
-					prefix += writer.saveCursor().take();
-					this.hasSavedCursor = true;
-				}
+		const writer = framebuffer.writer;
+		let prefix = scrollPrefix;
+		let frameStartRow: number | undefined;
+		if (hasContent) {
+			if (framebuffer.needsScreenReset) {
+				// After a resize the terminal rewrapped our frame and moved
+				// the cursor where DECRC cannot find it. The row our
+				// content starts at still holds, since what is above us
+				// does not reflow-grow. No home and no ED. That would wipe
+				// what is above us, and tmux archives a full-screen erase
+				// into the scrollback.
+				prefix += writer
+					.cursorTo(framebuffer.resetAtRow + 1, 1)
+					.saveCursor()
+					.take();
+				framebuffer.hasSavedCursor = true;
+				framebuffer.needsScreenReset = false;
+				framebuffer.needsFullClear = false;
+				frameStartRow = framebuffer.resetAtRow;
+			} else if (cursorPosition !== undefined) {
+				prefix += writer.cursorTo(cursorPosition + 1, 1).saveCursor().take();
+				framebuffer.hasSavedCursor = true;
+				frameStartRow = cursorPosition;
+			} else if (offset > 0) {
+				prefix += writer.cursorTo(offset + 1, 1).take();
+				frameStartRow = offset;
+			} else if (framebuffer.hasSavedCursor) {
+				prefix += writer.restoreCursor().saveCursor().take();
+			} else {
+				prefix += writer.saveCursor().take();
+				framebuffer.hasSavedCursor = true;
+			}
 
-				if (this.needsFullClear) {
-					prefix += writer.eraseBelow().take();
-					this.needsFullClear = false;
-				}
+			if (framebuffer.needsFullClear) {
+				prefix += writer.eraseBelow().take();
+				framebuffer.needsFullClear = false;
 			}
+		}
 
-			const output = generateANSI(diff, writer, this.renderedLines, measurer);
+		const output = generateANSI(
+			diff,
+			writer,
+			framebuffer.renderedLines,
+			measurer,
+		);
 
-			let contentHeight = 0;
-			for (const row of this.renderedLines) {
-				if (row + 1 > contentHeight) {
-					contentHeight = row + 1;
-				}
+		let contentHeight = 0;
+		for (const row of framebuffer.renderedLines) {
+			if (row + 1 > contentHeight) {
+				contentHeight = row + 1;
 			}
+		}
 
-			// Rows the last frame painted below where this one ends still show
-			// what it left on them.
-			let staleOutput = "";
-			if (this.hasSavedCursor && this.prevContentHeight > contentHeight) {
-				writer.restoreCursor();
-				if (contentHeight > 0) {
-					writer.cursorDown(contentHeight);
-				}
-				staleOutput = writer.carriageReturn().eraseBelow().take();
-			} else if (
-				resetFrame &&
-				frameStartRow !== undefined &&
-				frameStartRow + contentHeight < this.rowCount
-			) {
-				// After a reset nothing below the content is trusted either,
-				// because the old frame may have been taller. Erase from the
-				// first row past the content. This is a PARTIAL erase, which no
-				// terminal treats as a screen clear worth archiving.
-				staleOutput = writer
-					.cursorTo(frameStartRow + contentHeight + 1, 1)
-					.eraseBelow()
-					.take();
+		// Rows the last frame painted below where this one ends still show
+		// what it left on them.
+		let staleOutput = "";
+		if (
+			framebuffer.hasSavedCursor &&
+			framebuffer.prevContentHeight > contentHeight
+		) {
+			writer.restoreCursor();
+			if (contentHeight > 0) {
+				writer.cursorDown(contentHeight);
 			}
+			staleOutput = writer.carriageReturn().eraseBelow().take();
+		} else if (
+			resetFrame &&
+			frameStartRow !== undefined &&
+			frameStartRow + contentHeight < framebuffer.rowCount
+		) {
+			// After a reset nothing below the content is trusted either,
+			// because the old frame may have been taller. Erase from the
+			// first row past the content. This is a PARTIAL erase, which no
+			// terminal treats as a screen clear worth archiving.
+			staleOutput = writer
+				.cursorTo(frameStartRow + contentHeight + 1, 1)
+				.eraseBelow()
+				.take();
+		}
 
-			// The two grids trade places. Of an overflowing frame only the rows
-			// still on screen are kept. The rest scrolled into the scrollback.
-			const retired = this.prev;
-			if (overflowing) {
-				this.prev = next.bottomRows(this.rowCount);
-				this.spare = next;
-			} else {
-				this.prev = next;
-				this.spare = retired;
-			}
-			this.prevContentHeight = contentHeight;
-
-			// A diff leaves the cursor at the last changed cell, and a resize
-			// scrolls just enough to keep the cursor on screen, so the park is
-			// what wrappedRowsAbovePark re-anchors from. A caret parks the real
-			// cursor there, shown, because IME composition anchors at the real
-			// cursor.
-			let parkOutput = "";
-			if (hasContent && contentHeight > 0) {
-				if (caretVisible) {
-					this.park = {row: caretBufferRow, col: caret.col};
-					if (frameStartRow !== undefined) {
-						parkOutput = writer
-							.cursorTo(frameStartRow + caretBufferRow + 1, caret.col + 1)
-							.take();
-					} else if (this.hasSavedCursor) {
-						writer.restoreCursor().saveCursor();
-						if (caretBufferRow > 0) {
-							writer.cursorDown(caretBufferRow);
-						}
-						writer.carriageReturn();
-						if (caret.col > 0) {
-							writer.cursorForward(caret.col);
-						}
-						parkOutput = writer.take();
+		// The two grids trade places. Of an overflowing frame only the rows
+		// still on screen are kept. The rest scrolled into the scrollback.
+		const retired = framebuffer.prev;
+		if (overflowing) {
+			framebuffer.prev = next.bottomRows(framebuffer.rowCount);
+			framebuffer.spare = next;
+		} else {
+			framebuffer.prev = next;
+			framebuffer.spare = retired;
+		}
+		framebuffer.prevContentHeight = contentHeight;
+
+		// A diff leaves the cursor at the last changed cell, and a resize
+		// scrolls just enough to keep the cursor on screen, so the park is
+		// what wrappedRowsAbovePark re-anchors from. A caret parks the real
+		// cursor there, shown, because IME composition anchors at the real
+		// cursor.
+		let parkOutput = "";
+		if (hasContent && contentHeight > 0) {
+			if (caretVisible) {
+				framebuffer.park = {row: caretBufferRow, col: caret.col};
+				if (frameStartRow !== undefined) {
+					parkOutput = writer
+						.cursorTo(frameStartRow + caretBufferRow + 1, caret.col + 1)
+						.take();
+				} else if (framebuffer.hasSavedCursor) {
+					writer.restoreCursor().saveCursor();
+					if (caretBufferRow > 0) {
+						writer.cursorDown(caretBufferRow);
 					}
-				} else {
-					this.park = {row: Math.min(contentHeight, this.rowCount) - 1, col: 0};
-					if (frameStartRow !== undefined) {
-						// 0-based start + height = 1-based last row. The bottom
-						// margin caps it when the content overflows the screen.
-						const lastRow = Math.min(
-							frameStartRow + contentHeight,
-							this.rowCount,
-						);
-						parkOutput = writer.cursorTo(lastRow, 1).take();
-					} else if (this.hasSavedCursor) {
-						// No absolute row to name. Restore the saved content
-						// start, re-save it, and step down. CUD stops at the
-						// bottom margin, which is the content's visible bottom
-						// when it overflows.
-						writer.restoreCursor().saveCursor();
-						if (contentHeight > 1) {
-							writer.cursorDown(contentHeight - 1);
-						}
-						parkOutput = writer.carriageReturn().take();
+					writer.carriageReturn();
+					if (caret.col > 0) {
+						writer.cursorForward(caret.col);
+					}
+					parkOutput = writer.take();
+				}
+			} else {
+				framebuffer.park = {
+					row: Math.min(contentHeight, framebuffer.rowCount) - 1,
+					col: 0,
+				};
+				if (frameStartRow !== undefined) {
+					// 0-based start + height = 1-based last row. The bottom
+					// margin caps it when the content overflows the screen.
+					const lastRow = Math.min(
+						frameStartRow + contentHeight,
+						framebuffer.rowCount,
+					);
+					parkOutput = writer.cursorTo(lastRow, 1).take();
+				} else if (framebuffer.hasSavedCursor) {
+					// No absolute row to name. Restore the saved content
+					// start, re-save it, and step down. CUD stops at the
+					// bottom margin, which is the content's visible bottom
+					// when it overflows.
+					writer.restoreCursor().saveCursor();
+					if (contentHeight > 1) {
+						writer.cursorDown(contentHeight - 1);
 					}
+					parkOutput = writer.carriageReturn().take();
 				}
 			}
+		}
 
-			const frame = prefix + output + staleOutput + parkOutput;
-			return hasContent ? wrapSynchronized(frame) : frame;
-		};
-		return context;
-	}
+		const frame = prefix + output + staleOutput + parkOutput;
+		return hasContent ? wrapSynchronized(frame) : frame;
+	};
+	return context;
+}
 
-	endFrame(): string {
-		const end = this.pendingEnd;
-		if (end === null) {
-			throw new Error("endFrame without a begun frame");
-		}
-		this.pendingEnd = null;
-		const ansi = end();
-		this.frameScroll = 0;
-		this.dirty = false;
-		return ansi;
+export function endFrame(framebuffer: Framebuffer): string {
+	const end = framebuffer.pendingEnd;
+	if (end === null) {
+		throw new Error("endFrame without a begun frame");
 	}
+	framebuffer.pendingEnd = null;
+	const ansi = end();
+	framebuffer.frameScroll = 0;
+	framebuffer.dirty = false;
+	return ansi;
 }
 
 // Whether the old row or the new one holds a disputed cluster at or
diff --git a/src/internal/input.ts b/src/internal/input.ts
index d7346d8f..199c644a 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -54,7 +54,7 @@ import {
 } from "./dom.ts";
 import {getEditingHost, requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
-import type {Framebuffer} from "./framebuffer.ts";
+import {type Framebuffer, invalidate, repaintAll} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
 
 // The keys a terminal names, with the legacy keyCode plenty of code
@@ -448,7 +448,7 @@ export class Input {
 
 	dispatch(item: WireKey[] | WireMouse | WirePaste): void {
 		// Pseudo-state and the selection move with no mutation record.
-		this.framebuffer.invalidate();
+		invalidate(this.framebuffer);
 		if (Array.isArray(item)) {
 			deliverKeys(this, item);
 			return;
@@ -1439,7 +1439,7 @@ function dispatchKey(input: Input, stroke: WireKey): void {
 		// A terminal program's redraw, for a screen stray output scribbled
 		// on: clear what shows and paint the whole document again.
 		if (keyName === "l" && ctrlKey && !altKey && !shiftKey && !metaKey) {
-			input.framebuffer.repaintAll();
+			repaintAll(input.framebuffer);
 			requestRender(input.document);
 		}
 		if (keyName === "z" && ctrlKey && !altKey && !shiftKey && !metaKey) {
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 2d42b69f..871b6db9 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -38,11 +38,12 @@ import {
 	type Window,
 } from "./dom.ts";
 import {getEditingCaretPoint} from "./editing.ts";
-import type {
-	CellContext,
-	CellStyle,
-	Framebuffer,
-	LineStyle,
+import {
+	type CellContext,
+	type CellStyle,
+	type Framebuffer,
+	insetShiftPays,
+	type LineStyle,
 } from "./framebuffer.ts";
 import {
 	type Gradient,
@@ -513,7 +514,7 @@ export function resolveScrollShift(
 	const delta = record.delta;
 	if (
 		(left > 0 || right < framebuffer.cols) &&
-		!framebuffer.insetShiftPays({delta, top, end, left, right})
+		!insetShiftPays(framebuffer, {delta, top, end, left, right})
 	) {
 		return null;
 	}
diff --git a/tests/ansi-fixtures.ts b/tests/ansi-fixtures.ts
index 0c60ef98..a4a95f76 100644
--- a/tests/ansi-fixtures.ts
+++ b/tests/ansi-fixtures.ts
@@ -7,7 +7,13 @@
  * that alters a single byte fails the fixture test.
  */
 import type {ColorDepth} from "../src/internal/exchange.ts";
-import {type CellStyle, Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	type CellStyle,
+	Framebuffer,
+	repaintAll,
+	replaced,
+	wrappedRowsAbovePark,
+} from "../src/internal/framebuffer.ts";
 import type {CellContext} from "../src/internal/framebuffer.ts";
 import {renderFrame, renderStatic} from "./test-utils.js";
 
@@ -247,7 +253,7 @@ export const scenarios: Scenario[] = [
 				ctx.drawText("last", 0, 3);
 			});
 			const before = [20, 10, 7, 5].map((cols) =>
-				framebuffer.wrappedRowsAbovePark(cols),
+				wrappedRowsAbovePark(framebuffer, cols),
 			);
 			// A caret park moves the measurement point.
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
@@ -258,7 +264,7 @@ export const scenarios: Scenario[] = [
 				ctx.setCaret(3, 1);
 			});
 			const after = [20, 10, 7, 5].map((cols) =>
-				framebuffer.wrappedRowsAbovePark(cols),
+				wrappedRowsAbovePark(framebuffer, cols),
 			);
 			return JSON.stringify({before, after});
 		},
@@ -366,12 +372,12 @@ export const scenarios: Scenario[] = [
 				},
 			);
 			out += "|";
-			framebuffer.replaced(2);
+			replaced(framebuffer, 2);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				ctx.drawText("after reset", 0, 0);
 			});
 			out += "|";
-			framebuffer.repaintAll();
+			repaintAll(framebuffer);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				ctx.drawText("after clear", 0, 0);
 			});
diff --git a/tests/ansi.test.ts b/tests/ansi.test.ts
index 7a28c96c..ff5cfcde 100644
--- a/tests/ansi.test.ts
+++ b/tests/ansi.test.ts
@@ -1,9 +1,11 @@
 import {describe, expect, test} from "@b9g/libuild/test";
 
 import {
+	beginFrame,
 	type CellContext,
 	Framebuffer,
 	type LineStyle,
+	repaintAll,
 } from "../src/internal/framebuffer.ts";
 import {renderFrame, stripControlCodes} from "./test-utils.js";
 
@@ -47,7 +49,7 @@ describe("cells through the pen", () => {
 
 	test("measureText and the layout agree on widths", () => {
 		const framebuffer = new Framebuffer(1, 10);
-		const context = framebuffer.beginFrame({offset: 0});
+		const context = beginFrame(framebuffer, {offset: 0});
 		expect(
 			context.measureText("\u{1f468}\u200d\u{1f469}\u200d\u{1f467}")
 				.width,
@@ -143,7 +145,7 @@ describe("Framebuffer", () => {
 				ctx.drawText("First", 0, 0);
 			});
 
-			framebuffer.repaintAll();
+			repaintAll(framebuffer);
 
 			// Second frame should render everything (no diff)
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
@@ -702,7 +704,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 10);
 
 		// Clear previous buffer to ensure output
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw a simple box that fits in viewport
@@ -756,7 +758,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 8);
 
 		// Clear any previous state
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw box
@@ -784,7 +786,7 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - 2x2 grid", () => {
 		const framebuffer = new Framebuffer(5, 9);
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Simulate CSS collapsed table borders by drawing each cell's borders
@@ -843,7 +845,7 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - mixed border styles", () => {
 		const framebuffer = new Framebuffer(3, 11);
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Test border merging with different styles
@@ -880,7 +882,7 @@ describe("Border Integration", () => {
 	test("renders collapsed table borders - header and data rows", () => {
 		const framebuffer = new Framebuffer(5, 13); // 3 columns x 4 chars + 1 = 13 width
 
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Simulate a typical HTML table with header and data rows
@@ -949,7 +951,7 @@ describe("Border Integration", () => {
 
 	test("renders simple single cell with border", () => {
 		const framebuffer = new Framebuffer(4, 6);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			ctx.drawBox(1, 1, 4, 2, {
@@ -969,7 +971,7 @@ describe("Border Integration", () => {
 
 	test("renders double border box", () => {
 		const framebuffer = new Framebuffer(5, 8);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			ctx.drawBox(1, 1, 6, 3, {
@@ -991,7 +993,7 @@ describe("Border Integration", () => {
 
 	test("renders partial borders - top and left only", () => {
 		const framebuffer = new Framebuffer(4, 6);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			ctx.drawBox(0, 0, 5, 3, {top: {style: "solid"}, left: {style: "solid"}});
@@ -1012,7 +1014,7 @@ describe("Border Integration", () => {
 		// the end rows too. Skipping them is what cut a blockquote's border
 		// off at its first and last row.
 		const framebuffer = new Framebuffer(5, 8);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			ctx.drawBox(0, 0, 6, 4, {left: {style: "solid"}});
@@ -1028,7 +1030,7 @@ describe("Border Integration", () => {
 
 	test("renders L-shaped table border pattern", () => {
 		const framebuffer = new Framebuffer(4, 7);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Top row - 2 cells
@@ -1067,7 +1069,7 @@ describe("Border Integration", () => {
 
 	test("renders mixed border styles in adjacent cells", () => {
 		const framebuffer = new Framebuffer(3, 9);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Solid border cell
@@ -1109,7 +1111,7 @@ describe("Border Integration", () => {
 
 	test("renders nested borders", () => {
 		const framebuffer = new Framebuffer(7, 11); // Wider to accommodate text
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Outer border
@@ -1145,7 +1147,7 @@ describe("Border Integration", () => {
 
 	test("renders grid layout - 3x3 table", () => {
 		const framebuffer = new Framebuffer(7, 11);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw 3x3 grid of cells
@@ -1177,7 +1179,7 @@ describe("Border Integration", () => {
 
 	test("renders borders with background colors", () => {
 		const framebuffer = new Framebuffer(3, 7);
-		framebuffer.repaintAll();
+		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			ctx.drawRect(1, 0, 5, 3, 0x00ff00);
diff --git a/tests/line-clearing.test.ts b/tests/line-clearing.test.ts
index f7e69add..643ce0cc 100644
--- a/tests/line-clearing.test.ts
+++ b/tests/line-clearing.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {Framebuffer, replaced} from "../src/internal/framebuffer.ts";
 import {MockProcess, nextFrame, renderFrame} from "./test-utils.js";
 
 test("line clearing removes terminal artifacts from previous commands", async () => {
@@ -153,7 +153,7 @@ test("a screen reset clears stale rows without a screen-qualifying erase", async
 
 	// The resize path resets the screen; the new frame is shorter and leaves
 	// row 1 blank.
-	framebuffer.replaced(0);
+	replaced(framebuffer, 0);
 	const out = renderFrame(
 		framebuffer,
 		{offset: 0, cursorRow: 0, regionRows: 3},
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 6a5b91ef..70944b95 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -14,7 +14,11 @@ import {
 } from "../src/index.ts";
 import {framePainted} from "../src/internal/dom.ts";
 import type {ColorDepth} from "../src/internal/exchange.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
 import {getStringWidth} from "../src/internal/text.ts";
 
 const {Terminal} = xtermPkg;
@@ -346,7 +350,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 			this.terminal.cols,
 			this.colorDepth,
 		);
-		const context = framebuffer.beginFrame({offset: 0});
+		const context = beginFrame(framebuffer, {offset: 0});
 
 		for (let row = 0; row < this.terminal.rows; row++) {
 			const line = buffer.getLine(buffer.viewportY + row);
@@ -390,7 +394,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 
 		// The frame emitter withholds the final row's line ending (the screen
 		// has nothing below it); the oracle's callers split on lines.
-		return stripControlCodes(framebuffer.endFrame() + "\r\n");
+		return stripControlCodes(endFrame(framebuffer) + "\r\n");
 	}
 }
 
@@ -489,13 +493,13 @@ export function stripControlCodes(ansi: string): string {
  * is a caller with one painter and one frame.
  */
 export function renderFrame(
-	renderer: {beginFrame(options: any): any; endFrame(): string},
-	options: {offset: number} & Record<string, unknown>,
+	renderer: Framebuffer,
+	options: Parameters<typeof beginFrame>[1],
 	draw: (ctx: any) => void,
 ): string {
-	const context = renderer.beginFrame(options);
+	const context = beginFrame(renderer, options);
 	draw(context);
-	return renderer.endFrame();
+	return endFrame(renderer);
 }
 
 /** The same, for a frame that stands alone. */
diff --git a/tests/wide-cluster.test.ts b/tests/wide-cluster.test.ts
index 47bbb69e..cd6f2458 100644
--- a/tests/wide-cluster.test.ts
+++ b/tests/wide-cluster.test.ts
@@ -1,16 +1,20 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
 import {MockProcess, nextFrame, stripControlCodes} from "./test-utils.js";
 
 test("a cell written inside a wide cluster's span is dropped, not emitted", () => {
 	const framebuffer = new Framebuffer(2, 12, "rgb");
-	const ctx = framebuffer.beginFrame({offset: 0});
+	const ctx = beginFrame(framebuffer, {offset: 0});
 	ctx.drawText("काा", 2, 0);
 	ctx.drawText("ab", 3, 0);
 	ctx.drawText("cd", 6, 0);
-	const frame = stripControlCodes(framebuffer.endFrame());
+	const frame = stripControlCodes(endFrame(framebuffer));
 	expect(frame).toContain("काा");
 	expect(frame).toContain("cd");
 	expect(frame).not.toContain("a");
@@ -35,14 +39,14 @@ test("text that replaces wide characters on a fill rewrites every column", () =>
 	// written, so a frame may skip neither.
 	const framebuffer = new Framebuffer(1, 20, "rgb");
 	const white = {bg: 0x1000000 | 0xffffff, fg: 0x1000000};
-	let ctx = framebuffer.beginFrame({offset: 0});
+	let ctx = beginFrame(framebuffer, {offset: 0});
 	ctx.drawText(" ".repeat(20), 0, 0, white);
 	ctx.drawText("日本語のテキストです", 0, 0, white);
-	framebuffer.endFrame();
-	ctx = framebuffer.beginFrame({offset: 0});
+	endFrame(framebuffer);
+	ctx = beginFrame(framebuffer, {offset: 0});
 	ctx.drawText(" ".repeat(20), 0, 0, white);
 	ctx.drawText("a", 0, 0, white);
-	const update = framebuffer.endFrame();
+	const update = endFrame(framebuffer);
 	expect(update).not.toMatch(/\x1b\[\d*C/);
 	expect(update.replace(/\x1b(?:\[[?\d;]*[A-Za-z]|[78])|\r/g, "")).toBe(
 		"a" + " ".repeat(19),
diff --git a/tests/width-measurement.test.ts b/tests/width-measurement.test.ts
index 8513dc86..da303b8a 100644
--- a/tests/width-measurement.test.ts
+++ b/tests/width-measurement.test.ts
@@ -15,7 +15,11 @@ import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
 import type {Exchange} from "../src/internal/exchange.ts";
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {
+	beginFrame,
+	endFrame,
+	Framebuffer,
+} from "../src/internal/framebuffer.ts";
 import {getStringWidth, recordClusterAdvance} from "../src/internal/text.ts";
 import {
 	captureRawOutput,
@@ -132,11 +136,11 @@ function emit(
 ): string {
 	const framebuffer = new Framebuffer(rows, cols, "rgb");
 	framebuffer.measurer = measurer;
-	const context = framebuffer.beginFrame({offset: 0});
+	const context = beginFrame(framebuffer, {offset: 0});
 	for (const [index, cluster] of cells) {
 		context.drawText(cluster, index % cols, Math.floor(index / cols));
 	}
-	return framebuffer.endFrame();
+	return endFrame(framebuffer);
 }
 
 function settle(ms = 60): Promise<void> {

From 00139f2d58275e433f254fe81a0b180095a88e89 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 18:59:51 -0400
Subject: [PATCH 28/99] Make the Layout methods that no module layout.ts loads
 calls into plain functions

Those that read the layout take it first; those that never did take no
layout, and their calls drop a receiver they did not need. Methods that
dom.ts or cssom.ts call stay: layout.ts loads both, and importing a
function back from it would close a cycle and change which module
finishes loading first. So do the ones called through an optional chain.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts             |  12 +-
 src/internal/exchange.ts |  10 +-
 src/internal/layout.ts   | 689 ++++++++++++++++++++-------------------
 src/internal/painter.ts  |  39 ++-
 4 files changed, 393 insertions(+), 357 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 29f06649..44c1a0d9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -68,7 +68,11 @@ import {
 	setDecodeWorkerURL,
 } from "./internal/images.ts";
 import {Input} from "./internal/input.ts";
-import {Layout} from "./internal/layout.ts";
+import {
+	framePainted,
+	invalidateTextMeasurement,
+	Layout,
+} from "./internal/layout.ts";
 import {
 	paint,
 	Painter,
@@ -720,7 +724,7 @@ export class TermDOM extends EventTarget {
 			// to them, so what was measured before the answer measures again.
 			void slots.exchange.negotiateOverline().then((agreed) => {
 				if (agreed && isAttached(this)) {
-					slots.layout.invalidateTextMeasurement();
+					invalidateTextMeasurement(slots.layout);
 					void render(this);
 				}
 			});
@@ -1440,7 +1444,7 @@ function printStatic(termDOM: TermDOM): void {
 	applyMutations(termDOM.document);
 	const termDOMSlots = _(termDOM);
 	termDOMSlots.layout.performLayout();
-	termDOMSlots.layout.framePainted();
+	framePainted(termDOMSlots.layout);
 	termDOMSlots.unprinted = true;
 	sessionsUnprinted.add(termDOM);
 	installExitHook();
@@ -1627,7 +1631,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	});
 	paint(termDOMSlots.painter, context);
 	const ansi = endFrame(termDOMSlots.framebuffer);
-	termDOMSlots.layout.framePainted();
+	framePainted(termDOMSlots.layout);
 
 	// The cursor stays hidden while a frame paints and between frames. It
 	// is parked for resize bookkeeping, and a cursor blinking there is not
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index 7763f43a..f7988d0f 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -20,7 +20,11 @@ import {
 	wrappedRowsAbovePark,
 } from "./framebuffer.ts";
 import type {Input} from "./input.ts";
-import type {Layout} from "./layout.ts";
+import {
+	adoptTerminalReordering,
+	invalidateTextMeasurement,
+	type Layout,
+} from "./layout.ts";
 import {_, type internals} from "./slots.ts";
 import {isControlByte, recordClusterAdvance} from "./text.ts";
 import {
@@ -1286,7 +1290,7 @@ export class Exchange extends EventTarget {
 		}
 		slots.priorBidiMode = answer;
 		if (answer === 1 || answer === 3) {
-			slots.layout.adoptTerminalReordering();
+			adoptTerminalReordering(slots.layout);
 		}
 	}
 
@@ -1883,7 +1887,7 @@ function settleWidthProbe(
 	// a screen that was never drawn. Drop it and paint again from the
 	// corrected measurements.
 	if (recordClusterAdvance(probe.cluster, advance)) {
-		sessionSlots.layout.invalidateTextMeasurement();
+		invalidateTextMeasurement(sessionSlots.layout);
 		repaintAll(sessionSlots.framebuffer);
 		requestRender(sessionSlots.window.document);
 	}
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 49c899a9..b0bf0522 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -4919,8 +4919,8 @@ function hitTestInFlow(
 			) {
 				return null;
 			}
-			const node = layout.getLayoutNode(element);
-			const extent = node === null ? undefined : layout.paintExtent(node);
+			const node = getLayoutNode(layout, element);
+			const extent = node === null ? undefined : paintExtent(node);
 			if (extent === undefined || y < extent.top || y >= extent.bottom) {
 				return null;
 			}
@@ -4930,9 +4930,9 @@ function hitTestInFlow(
 	// long list is not walked whole for every pointer move. Paint extents
 	// are unscrolled document rows, so only an unscrolled element asks.
 	const candidates =
-		layout.scrolledAncestorRows(element) === 0 &&
+		scrolledAncestorRows(layout, element) === 0 &&
 		getScrollOffset(element, "top") === 0
-			? layout.getVisibleChildren(element, y, y + 1)
+			? getVisibleChildren(layout, element, y, y + 1)
 			: null;
 	const children: Element[] = [];
 	for (const child of candidates ?? flowContent(element)) {
@@ -5333,23 +5333,6 @@ export class Layout {
 		return this.geometryMoved;
 	}
 
-	adoptTerminalReordering(): void {
-		if (this.terminalReordersText) {
-			this.invalidate();
-			return;
-		}
-		this.terminalReordersText = true;
-		// Every measured line was built for the other contract.
-		this.invalidateTextMeasurement();
-	}
-
-	invalidateTextMeasurement(): void {
-		this.invalidate();
-		for (const layoutNode of this.measureNodes) {
-			layoutNode.invalidate();
-		}
-	}
-
 	// The engine keeps no copy of the size. The root it sizes here is the
 	// copy, and the document holds the one everything else reads.
 	resize(width: number, height: number): void {
@@ -5366,10 +5349,6 @@ export class Layout {
 		this.performLayout();
 	}
 
-	framePainted(): void {
-		this.geometryMoved = false;
-	}
-
 	performLayout(): void {
 		this.pass++;
 		// Built on the first pass, not at construction. The engine is
@@ -5479,76 +5458,6 @@ export class Layout {
 		this.dirtyRunContainers = new Set();
 	}
 
-	// Membership gates. A positioned inline run member owns no box of its
-	// own, and no layer would ever paint it, so it stays with its run.
-	hoistedToLayer(element: Element): boolean {
-		return isPositioned(element) && this.positionedElements.has(element);
-	}
-
-	// The children whose paint extent could intersect rows [top, bottom),
-	// found by binary search. Culling a long list cost O(total children)
-	// per frame instead of O(visible). Null when the search cannot be
-	// trusted (children[] not sorted by extent top), in which case callers
-	// walk every child.
-	getVisibleChildren(
-		element: Element,
-		top: number,
-		bottom: number,
-	): Node[] | null {
-		const layoutNode = this.nodeMap.get(element);
-		if (
-			!layoutNode ||
-			// A measure-function leaf never decomposes into layout children, so
-			// empty children[] means "not decomposed," not "nothing to paint."
-			layoutNode.measure !== null ||
-			extents.get(layoutNode)?.unstackedChildren !== 0 ||
-			layoutNode.style.displayType !== "block" ||
-			// Cheap proxy for "every DOM child has exactly one children[]
-			// entry". A run member owns no layout node, and a pseudo-element is a
-			// box-tree child with no childNodes entry. Uncounted, an element
-			// whose one child is text and whose ::before heads the run collides
-			// at one and one, and the fast path paints the pseudo alone.
-			element.childNodes.length + pseudoElementCount(element) !==
-			layoutNode.children.length ||
-			// A host's childNodes are its LIGHT children, unrelated to the
-			// composed ones the layout tree holds. The counts collide by
-			// accident. Hosts always take the walker.
-			getShadowRoot(element) !== null ||
-			// A broken inline's boxes are children[] entries whose DOM node
-			// lives a level DOWN. `<span>a<div/><span>c</span></span>d<input>`
-			// collides at three and three, and the fast path dropped the text
-			// and the input after the fragments.
-			this.boxes.get(element)?.holdsFragments === true
-		) {
-			return null;
-		}
-
-		const children = layoutNode.children;
-		let lo = 0;
-		let hi = children.length;
-		while (lo < hi) {
-			const mid = (lo + hi) >>> 1;
-			if (extents.get(children[mid])!.bottom <= top) {
-				lo = mid + 1;
-			} else {
-				hi = mid;
-			}
-		}
-
-		const result: Node[] = [];
-		for (let i = lo; i < children.length; i++) {
-			const child = children[i];
-			if (extents.get(child)!.top >= bottom) {
-				break;
-			}
-			const domNode = child.owner as Node | undefined;
-			if (domNode) {
-				result.push(domNode);
-			}
-		}
-		return result;
-	}
-
 	gridTracks(element: Element, rows: boolean): number[] | null {
 		const layoutNode = getContainerLayoutNode(this, element);
 		if (!layoutNode) {
@@ -5586,56 +5495,6 @@ export class Layout {
 		return height;
 	}
 
-	/** The cells a <math> element paints, laid out if no pass has yet. */
-	getMathBox(element: Element): MathBox {
-		return this.mathBoxes.get(element) ?? measureMath(this, element);
-	}
-
-	// Where a <math> element's cells start, in document coordinates: its
-	// content box, with the cells placed in it by text-align.
-	getMathOrigin(element: Element): {x: number; y: number} | null {
-		const rect = this.getRect(element);
-		if (rect === null) {
-			return null;
-		}
-		const box = this.getMathBox(element);
-		const model = getBoxModel(element);
-		const contentWidth =
-			Math.round(rect.width) -
-			model.borderLeftWidth -
-			model.borderRightWidth -
-			model.paddingLeft -
-			model.paddingRight;
-		return {
-			x:
-				Math.round(rect.left) +
-				model.borderLeftWidth +
-				model.paddingLeft +
-				getMathAlignOffset(
-					contentWidth - box.width,
-					getComputedValue(element, "text-align"),
-				),
-			y: Math.round(rect.top) + model.borderTopWidth + model.paddingTop,
-		};
-	}
-
-	// The rectangles of the cells inside a <math> element that render a
-	// node's text, in document coordinates.
-	getMathNodeRects(math: Element, node: Node): DOMRect[] {
-		const origin = this.getMathOrigin(math);
-		if (origin === null) {
-			return [];
-		}
-		return getMathCellRects(this.getMathBox(math), node).map((rect) =>
-			new this.domRect(
-				origin.x + rect.x,
-				origin.y + rect.y,
-				rect.width,
-				rect.height,
-			),
-		);
-	}
-
 	contentRect(element: Element): DOMRect | null {
 		const rect = this.getRect(element);
 		if (!rect) {
@@ -5845,15 +5704,6 @@ export class Layout {
 		);
 	}
 
-	// Paint extents are cached in unscrolled layout rows, so viewport culling
-	// of a scrolled subtree compares against the viewport moved by this amount
-	// rather than recomputing extents per scroll.
-	scrolledAncestorRows(element: Element): number {
-		const layoutNode =
-			this.nodeMap.get(element) ?? runLayoutNode(this, element);
-		return layoutNode ? -getScrollShift(this, layoutNode).y : 0;
-	}
-
 	getRect(element: Element): DOMRect | null {
 		const display = getLayoutDisplay(element);
 
@@ -5866,7 +5716,7 @@ export class Layout {
 		// An element inside <math> covers the cells that render its text.
 		const math = getEnclosingMath(element);
 		if (math !== null && math !== element) {
-			const rects = this.getMathNodeRects(math, element);
+			const rects = getMathNodeRects(this, math, element);
 			return rects.length === 0 ? null : unionRects(this, rects);
 		}
 
@@ -5938,7 +5788,7 @@ export class Layout {
 	getRects(node: Node): DOMRect[] {
 		const math = getEnclosingMath(node);
 		if (math !== null && math !== node) {
-			return this.getMathNodeRects(math, node);
+			return getMathNodeRects(this, math, node);
 		}
 		// Everything but true inline content is an atomic box with one rect,
 		// inline-block included. An <input> has no text runs at all, and
@@ -5961,7 +5811,7 @@ export class Layout {
 	// line.
 	getRangeRects(range: Range): DOMRect[] {
 		if (!range.collapsed) {
-			return this.getRangeSpans(range).map((run) => run.rect);
+			return getRangeSpans(this, range).map((run) => run.rect);
 		}
 		const caret = this.getCaretRect(range.startContainer, range.startOffset);
 		return caret === null ? [] : [caret];
@@ -5999,25 +5849,6 @@ export class Layout {
 			: getCaretRectInFragment(this, point[0], point[1]);
 	}
 
-	// The text lets a caller repaint the run in the selection style.
-	// getRangeRects is this without the text.
-	getRangeSpans(range: Range): Array<{rect: DOMRect; text: string}> {
-		if (range.collapsed) {
-			return [];
-		}
-		const runs: Array<{rect: DOMRect; text: string}> = [];
-		for (const textNode of rangeTextNodes(this, range)) {
-			const from = range.startContainer === textNode ? range.startOffset : 0;
-			const to = range.endContainer === textNode
-				? range.endOffset
-				: textNode.data.length;
-			if (to > from) {
-				runs.push(...getSelectionSpans(this, textNode, from, to));
-			}
-		}
-		return runs;
-	}
-
 	// One text node's share of the work above. A highlight narrows its
 	// ranges to the node it is painting over, and has no live range to
 	// hand getRangeSpans.
@@ -6029,44 +5860,6 @@ export class Layout {
 		return to > from ? getSelectionSpans(this, textNode, from, to) : [];
 	}
 
-	// The offsets the cells above actually cover, since a cell holds a
-	// whole cluster.
-	snapToClusters(
-		textNode: Text,
-		from: number,
-		to: number,
-	): {from: number; to: number} {
-		let start = from;
-		let end = to;
-		const whiteSpace = getWhiteSpace(textNode);
-		for (const fragment of this.lineFragments(textNode)) {
-			const {text, offsets} = renderWhiteSpaceOffsets(
-				textNode.data.slice(fragment.startOffset, fragment.endOffset),
-				whiteSpace,
-			);
-			const clusterStarts = getClusterStarts(text);
-			for (let i = 0; i < text.length; i++) {
-				const dataOffset = fragment.startOffset + getDataOffset(offsets, i);
-				if (dataOffset < from || dataOffset >= to) {
-					continue;
-				}
-				const before = clusterStarts.at(i);
-				start = Math.min(
-					start,
-					fragment.startOffset + getDataOffset(offsets, before),
-				);
-				const after = clusterStarts.after(i + 1);
-				end = Math.max(
-					end,
-					after < text.length
-						? fragment.startOffset + getDataOffset(offsets, after)
-						: fragment.endOffset,
-				);
-			}
-		}
-		return {from: start, to: end};
-	}
-
 	// The text a text node's boxes show, in logical order, as innerText
 	// reads it: white space processed, case transformed, and a preserved
 	// newline between two lines kept. A soft wrap is no break, and the
@@ -6178,10 +5971,10 @@ export class Layout {
 		// Math has no text runs. Its cells know what text they render.
 		const math = getEnclosingMath(root);
 		if (math !== null) {
-			const origin = this.getMathOrigin(math);
+			const origin = getMathOrigin(this, math);
 			return origin === null
 				? null
-				: findMathPosition(this.getMathBox(math), x - origin.x, y - origin.y);
+				: findMathPosition(getMathBox(this, math), x - origin.x, y - origin.y);
 		}
 		let best: {node: Text; offset: number; distance: number} | null = null;
 		let nearest: {node: Text; fragment: LineFragment; rows: number} | null =
@@ -6232,105 +6025,6 @@ export class Layout {
 		return {node: nearest.node, offset: found.offset};
 	}
 
-	// Positioned elements under their nearest stacking-context ancestor,
-	// bucketed into the CSS paint layers: negative-z, z:auto/0, positive-z.
-	// Walks only the positioned registry, so O(positioned x depth) per
-	// frame, never O(document). The painter walks these forward and
-	// hit-testing in reverse.
-	collectStackingLayers(
-		topLayer: Set<Element>,
-	): Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}> {
-		const layers = new Map<
-			Element,
-			{neg: Element[]; zero: Element[]; pos: Element[]}
-		>();
-		// A stray frame can fire after the window is torn down.
-		const body = this.window.document?.body;
-		if (!body) {
-			return layers;
-		}
-		for (const element of this.positionedElements) {
-			if (!element.isConnected || element === body) {
-				continue;
-			}
-			// Painted above everything.
-			if (topLayer.has(element)) {
-				continue;
-			}
-			// The registry is a superset. Re-check before trusting membership.
-			if (!isPositioned(element)) {
-				continue;
-			}
-			let root: Element = body;
-			for (
-				let ancestor = flatParentElement(element);
-				ancestor;
-				ancestor = flatParentElement(ancestor)
-			) {
-				if (isStackingContext(ancestor)) {
-					root = ancestor;
-					break;
-				}
-			}
-			let bucket = layers.get(root);
-			if (!bucket) {
-				bucket = {neg: [], zero: [], pos: []};
-				layers.set(root, bucket);
-			}
-			const z = getZIndexValue(element);
-			if (z === "auto" || z === 0) {
-				bucket.zero.push(element);
-			} else if (z < 0) {
-				bucket.neg.push(element);
-			} else {
-				bucket.pos.push(element);
-			}
-		}
-		// 4: b follows a.
-		const treeOrder = (a: Element, b: Element) =>
-			a.compareDocumentPosition(b) & 4 ? -1 : 1;
-		for (const bucket of layers.values()) {
-			const byZ = (a: Element, b: Element) => {
-				const za = getZIndexValue(a) as number;
-				const zb = getZIndexValue(b) as number;
-				return za !== zb ? za - zb : treeOrder(a, b);
-			};
-			bucket.neg.sort(byZ);
-			bucket.zero.sort(treeOrder);
-			bucket.pos.sort(byZ);
-		}
-		return layers;
-	}
-
-	/**
-	 * The viewport rows covered by fixed boxes as wide as the viewport, as
-	 * [top, bottom) pairs: a header or a status bar the document scrolls
-	 * under.
-	 */
-	fullWidthFixedRows(cols: number): Array<[number, number]> {
-		const rows: Array<[number, number]> = [];
-		for (const element of this.positionedElements) {
-			if (
-				!element.isConnected ||
-				getPosition(element) !== "fixed" ||
-				!this.isInFixedSpace(element)
-			) {
-				continue;
-			}
-			const rect = this.getRect(element);
-			if (
-				rect === null ||
-				rect.height <= 0 ||
-				Math.round(rect.left) > 0 ||
-				Math.round(rect.left + rect.width) < cols
-			) {
-				continue;
-			}
-			rows.push([Math.round(rect.top), Math.round(rect.top + rect.height)]);
-		}
-		return rows;
-	}
-
 	// The inverse of the paint order collectStackingLayers produces. A
 	// positioned box is probed at its CONTEXT, not through its parents, so a
 	// box hanging outside its parent's rect is still clickable.
@@ -6341,7 +6035,7 @@ export class Layout {
 		topLayer: Set<Element>,
 		documentScrollTop: number,
 	): Element | null {
-		const layers = this.collectStackingLayers(topLayer);
+		const layers = collectStackingLayers(this, topLayer);
 		const document = this.window.document;
 		if (!document?.body) {
 			return null;
@@ -6440,33 +6134,358 @@ export class Layout {
 		return false;
 	}
 
-	/** The layout node an element's principal box was laid out as, if any. */
-	getLayoutNode(element: Element): LayoutNode | null {
-		return this.nodeMap.get(element) ?? null;
+	/** The principal box of an element, or null before its container derived one. */
+	getBox(element: Element): Box | null {
+		return this.boxes.get(element) ?? null;
 	}
+}
 
-	/** The rows a node's subtree can paint, in document rows. */
-	paintExtent(node: LayoutNode): Extent | undefined {
-		return extents.get(node);
+export function adoptTerminalReordering(layout: Layout): void {
+	if (layout.terminalReordersText) {
+		layout.invalidate();
+		return;
 	}
+	layout.terminalReordersText = true;
+	// Every measured line was built for the other contract.
+	invalidateTextMeasurement(layout);
+}
 
-	/**
-	 * The box whose lines a layout node lays out, when it is a run's. Null
-	 * for a principal box's node.
-	 */
-	getRun(node: LayoutNode): Box | null {
-		const owner = node.owner as Node | null;
-		if (owner === null) {
-			return null;
+export function invalidateTextMeasurement(layout: Layout): void {
+	layout.invalidate();
+	for (const layoutNode of layout.measureNodes) {
+		layoutNode.invalidate();
+	}
+}
+
+export function framePainted(layout: Layout): void {
+	layout.geometryMoved = false;
+}
+
+// Membership gates. A positioned inline run member owns no box of its
+// own, and no layer would ever paint it, so it stays with its run.
+export function hoistedToLayer(layout: Layout, element: Element): boolean {
+	return isPositioned(element) && layout.positionedElements.has(element);
+}
+
+// The children whose paint extent could intersect rows [top, bottom),
+// found by binary search. Culling a long list cost O(total children)
+// per frame instead of O(visible). Null when the search cannot be
+// trusted (children[] not sorted by extent top), in which case callers
+// walk every child.
+function getVisibleChildren(
+	layout: Layout,
+	element: Element,
+	top: number,
+	bottom: number,
+): Node[] | null {
+	const layoutNode = layout.nodeMap.get(element);
+	if (
+		!layoutNode ||
+		// A measure-function leaf never decomposes into layout children, so
+		// empty children[] means "not decomposed," not "nothing to paint."
+		layoutNode.measure !== null ||
+		extents.get(layoutNode)?.unstackedChildren !== 0 ||
+		layoutNode.style.displayType !== "block" ||
+		// Cheap proxy for "every DOM child has exactly one children[]
+		// entry". A run member owns no layout node, and a pseudo-element is a
+		// box-tree child with no childNodes entry. Uncounted, an element
+		// whose one child is text and whose ::before heads the run collides
+		// at one and one, and the fast path paints the pseudo alone.
+		element.childNodes.length + pseudoElementCount(element) !==
+		layoutNode.children.length ||
+		// A host's childNodes are its LIGHT children, unrelated to the
+		// composed ones the layout tree holds. The counts collide by
+		// accident. Hosts always take the walker.
+		getShadowRoot(element) !== null ||
+		// A broken inline's boxes are children[] entries whose DOM node
+		// lives a level DOWN. `<span>a<div/><span>c</span></span>d<input>`
+		// collides at three and three, and the fast path dropped the text
+		// and the input after the fragments.
+		layout.boxes.get(element)?.holdsFragments === true
+	) {
+		return null;
+	}
+
+	const children = layoutNode.children;
+	let lo = 0;
+	let hi = children.length;
+	while (lo < hi) {
+		const mid = (lo + hi) >>> 1;
+		if (extents.get(children[mid])!.bottom <= top) {
+			lo = mid + 1;
+		} else {
+			hi = mid;
 		}
-		const box = getBox(this, owner);
-		return box !== null && box.layoutNode === node ? box : null;
 	}
 
-	/** The principal box of an element, or null before its container derived one. */
-	getBox(element: Element): Box | null {
-		return this.boxes.get(element) ?? null;
+	const result: Node[] = [];
+	for (let i = lo; i < children.length; i++) {
+		const child = children[i];
+		if (extents.get(child)!.top >= bottom) {
+			break;
+		}
+		const domNode = child.owner as Node | undefined;
+		if (domNode) {
+			result.push(domNode);
+		}
+	}
+	return result;
+}
+
+/** The cells a <math> element paints, laid out if no pass has yet. */
+export function getMathBox(layout: Layout, element: Element): MathBox {
+	return layout.mathBoxes.get(element) ?? measureMath(layout, element);
+}
+
+// Where a <math> element's cells start, in document coordinates: its
+// content box, with the cells placed in it by text-align.
+function getMathOrigin(
+	layout: Layout,
+	element: Element,
+): {x: number; y: number} | null {
+	const rect = layout.getRect(element);
+	if (rect === null) {
+		return null;
+	}
+	const box = getMathBox(layout, element);
+	const model = getBoxModel(element);
+	const contentWidth =
+		Math.round(rect.width) -
+		model.borderLeftWidth -
+		model.borderRightWidth -
+		model.paddingLeft -
+		model.paddingRight;
+	return {
+		x:
+			Math.round(rect.left) +
+			model.borderLeftWidth +
+			model.paddingLeft +
+			getMathAlignOffset(
+				contentWidth - box.width,
+				getComputedValue(element, "text-align"),
+			),
+		y: Math.round(rect.top) + model.borderTopWidth + model.paddingTop,
+	};
+}
+
+// The rectangles of the cells inside a <math> element that render a
+// node's text, in document coordinates.
+function getMathNodeRects(
+	layout: Layout,
+	math: Element,
+	node: Node,
+): DOMRect[] {
+	const origin = getMathOrigin(layout, math);
+	if (origin === null) {
+		return [];
+	}
+	return getMathCellRects(getMathBox(layout, math), node).map((rect) =>
+		new layout.domRect(
+			origin.x + rect.x,
+			origin.y + rect.y,
+			rect.width,
+			rect.height,
+		),
+	);
+}
+
+// Paint extents are cached in unscrolled layout rows, so viewport culling
+// of a scrolled subtree compares against the viewport moved by this amount
+// rather than recomputing extents per scroll.
+export function scrolledAncestorRows(layout: Layout, element: Element): number {
+	const layoutNode =
+		layout.nodeMap.get(element) ?? runLayoutNode(layout, element);
+	return layoutNode ? -getScrollShift(layout, layoutNode).y : 0;
+}
+
+// The text lets a caller repaint the run in the selection style.
+// getRangeRects is this without the text.
+function getRangeSpans(
+	layout: Layout,
+	range: Range,
+): Array<{rect: DOMRect; text: string}> {
+	if (range.collapsed) {
+		return [];
+	}
+	const runs: Array<{rect: DOMRect; text: string}> = [];
+	for (const textNode of rangeTextNodes(layout, range)) {
+		const from = range.startContainer === textNode ? range.startOffset : 0;
+		const to = range.endContainer === textNode
+			? range.endOffset
+			: textNode.data.length;
+		if (to > from) {
+			runs.push(...getSelectionSpans(layout, textNode, from, to));
+		}
+	}
+	return runs;
+}
+
+// The offsets the cells above actually cover, since a cell holds a
+// whole cluster.
+export function snapToClusters(
+	layout: Layout,
+	textNode: Text,
+	from: number,
+	to: number,
+): {from: number; to: number} {
+	let start = from;
+	let end = to;
+	const whiteSpace = getWhiteSpace(textNode);
+	for (const fragment of layout.lineFragments(textNode)) {
+		const {text, offsets} = renderWhiteSpaceOffsets(
+			textNode.data.slice(fragment.startOffset, fragment.endOffset),
+			whiteSpace,
+		);
+		const clusterStarts = getClusterStarts(text);
+		for (let i = 0; i < text.length; i++) {
+			const dataOffset = fragment.startOffset + getDataOffset(offsets, i);
+			if (dataOffset < from || dataOffset >= to) {
+				continue;
+			}
+			const before = clusterStarts.at(i);
+			start = Math.min(
+				start,
+				fragment.startOffset + getDataOffset(offsets, before),
+			);
+			const after = clusterStarts.after(i + 1);
+			end = Math.max(
+				end,
+				after < text.length
+					? fragment.startOffset + getDataOffset(offsets, after)
+					: fragment.endOffset,
+			);
+		}
+	}
+	return {from: start, to: end};
+}
+
+// Positioned elements under their nearest stacking-context ancestor,
+// bucketed into the CSS paint layers: negative-z, z:auto/0, positive-z.
+// Walks only the positioned registry, so O(positioned x depth) per
+// frame, never O(document). The painter walks these forward and
+// hit-testing in reverse.
+export function collectStackingLayers(
+	layout: Layout,
+	topLayer: Set<Element>,
+): Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}> {
+	const layers = new Map<
+		Element,
+		{neg: Element[]; zero: Element[]; pos: Element[]}
+	>();
+	// A stray frame can fire after the window is torn down.
+	const body = layout.window.document?.body;
+	if (!body) {
+		return layers;
+	}
+	for (const element of layout.positionedElements) {
+		if (!element.isConnected || element === body) {
+			continue;
+		}
+		// Painted above everything.
+		if (topLayer.has(element)) {
+			continue;
+		}
+		// The registry is a superset. Re-check before trusting membership.
+		if (!isPositioned(element)) {
+			continue;
+		}
+		let root: Element = body;
+		for (
+			let ancestor = flatParentElement(element);
+			ancestor;
+			ancestor = flatParentElement(ancestor)
+		) {
+			if (isStackingContext(ancestor)) {
+				root = ancestor;
+				break;
+			}
+		}
+		let bucket = layers.get(root);
+		if (!bucket) {
+			bucket = {neg: [], zero: [], pos: []};
+			layers.set(root, bucket);
+		}
+		const z = getZIndexValue(element);
+		if (z === "auto" || z === 0) {
+			bucket.zero.push(element);
+		} else if (z < 0) {
+			bucket.neg.push(element);
+		} else {
+			bucket.pos.push(element);
+		}
+	}
+	// 4: b follows a.
+	const treeOrder = (a: Element, b: Element) =>
+		a.compareDocumentPosition(b) & 4 ? -1 : 1;
+	for (const bucket of layers.values()) {
+		const byZ = (a: Element, b: Element) => {
+			const za = getZIndexValue(a) as number;
+			const zb = getZIndexValue(b) as number;
+			return za !== zb ? za - zb : treeOrder(a, b);
+		};
+		bucket.neg.sort(byZ);
+		bucket.zero.sort(treeOrder);
+		bucket.pos.sort(byZ);
+	}
+	return layers;
+}
+
+/**
+ * The viewport rows covered by fixed boxes as wide as the viewport, as
+ * [top, bottom) pairs: a header or a status bar the document scrolls
+ * under.
+ */
+export function fullWidthFixedRows(
+	layout: Layout,
+	cols: number,
+): Array<[number, number]> {
+	const rows: Array<[number, number]> = [];
+	for (const element of layout.positionedElements) {
+		if (
+			!element.isConnected ||
+			getPosition(element) !== "fixed" ||
+			!layout.isInFixedSpace(element)
+		) {
+			continue;
+		}
+		const rect = layout.getRect(element);
+		if (
+			rect === null ||
+			rect.height <= 0 ||
+			Math.round(rect.left) > 0 ||
+			Math.round(rect.left + rect.width) < cols
+		) {
+			continue;
+		}
+		rows.push([Math.round(rect.top), Math.round(rect.top + rect.height)]);
+	}
+	return rows;
+}
+
+/** The layout node an element's principal box was laid out as, if any. */
+export function getLayoutNode(
+	layout: Layout,
+	element: Element,
+): LayoutNode | null {
+	return layout.nodeMap.get(element) ?? null;
+}
+
+/** The rows a node's subtree can paint, in document rows. */
+export function paintExtent(node: LayoutNode): Extent | undefined {
+	return extents.get(node);
+}
+
+/**
+ * The box whose lines a layout node lays out, when it is a run's. Null
+ * for a principal box's node.
+ */
+export function getRun(layout: Layout, node: LayoutNode): Box | null {
+	const owner = node.owner as Node | null;
+	if (owner === null) {
+		return null;
 	}
+	const box = getBox(layout, owner);
+	return box !== null && box.layoutNode === node ? box : null;
 }
 
 // "auto" stays distinct from 0. It paints in the same layer but does
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 871b6db9..c69bbc56 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -55,17 +55,26 @@ import {
 	applyTextTransform,
 	type Box,
 	type BreakResult,
+	collectStackingLayers,
 	type Display,
+	fullWidthFixedRows,
 	getAtomicHeight,
+	getLayoutNode,
 	getLineAlignOffset,
 	getLineIndent,
+	getMathBox,
+	getRun,
 	hasItemParent,
+	hoistedToLayer,
 	type InlineBlockLeaf,
 	isAtomicInline,
 	isPositioned,
 	isStackingContext,
 	type Layout,
+	paintExtent,
 	renderTextFragment,
+	scrolledAncestorRows,
+	snapToClusters,
 } from "./layout.ts";
 import type {LayoutNode} from "./layoutsolver.ts";
 import {
@@ -531,7 +540,7 @@ export function resolveDocumentScrollBand(
 	regionHeight: number,
 	delta: number,
 ): {delta: number; top: number; end: number} | null {
-	const bars = painter.layout.fullWidthFixedRows(painter.framebuffer.cols);
+	const bars = fullWidthFixedRows(painter.layout, painter.framebuffer.cols);
 	if (bars.length === 0) {
 		return null;
 	}
@@ -562,7 +571,7 @@ export function paint(painter: Painter, ctx: CellContext): void {
 	painter.highlightedText = collectHighlightedText(painter.document);
 	painter.paintedText.clear();
 	painter.highlightStyles = new Map();
-	const layers = painter.layout.collectStackingLayers(painter.topLayer);
+	const layers = collectStackingLayers(painter.layout, painter.topLayer);
 	// From the body, the root stacking context's content. A body that
 	// is inline, inline-block or display: contents puts its content in
 	// the root element's boxes rather than its own, so painting starts
@@ -584,7 +593,7 @@ export function paint(painter: Painter, ctx: CellContext): void {
 		ctx.clipRect = null;
 		// Entered from outside its ancestor chain, so seed the culling
 		// shift.
-		painter.scrolledRows = painter.layout.scrolledAncestorRows(element);
+		painter.scrolledRows = scrolledAncestorRows(painter.layout, element);
 		try {
 			renderBackdrop(element, ctx);
 			renderStackingContext(painter, element, ctx, layers);
@@ -642,7 +651,7 @@ function renderStackingContext(
 		const previousScrolled = painter.scrolledRows;
 		ctx.clipRect = getPositionedClip(painter, element, root, contextClip);
 		// Entered from its stacking context, not its ancestor chain.
-		painter.scrolledRows = painter.layout.scrolledAncestorRows(element);
+		painter.scrolledRows = scrolledAncestorRows(painter.layout, element);
 		// Fixed space cancels the document scroll for the whole subtree. An
 		// absolute box inside a fixed bar moves with it.
 		if (painter.layout.isInFixedSpace(element)) {
@@ -680,7 +689,7 @@ function paintEntry(
 	afterOwnBox?: () => void,
 ): void {
 	const layout = painter.layout;
-	const node = layout.getLayoutNode(element);
+	const node = getLayoutNode(layout, element);
 	if (node === null) {
 		return;
 	}
@@ -697,7 +706,7 @@ function isOutsideViewport(
 	node: LayoutNode,
 	element: Element | null,
 ): boolean {
-	const extent = painter.layout.paintExtent(node);
+	const extent = paintExtent(node);
 	if (extent === undefined) {
 		return false;
 	}
@@ -969,13 +978,13 @@ function paintNodes(
 			x: origin.x + child.result.left,
 			y: origin.y + child.result.top,
 		};
-		const run = layout.getRun(child);
+		const run = getRun(layout, child);
 		if (run !== null) {
 			paintRun(painter, run, childOrigin, ctx);
 		} else if (
 			nodeTypeOf(owner) === owner.ELEMENT_NODE &&
 			(owner instanceof HTMLElement || isMathRoot(owner)) &&
-			!layout.hoistedToLayer(owner as Element)
+			!hoistedToLayer(layout, owner as Element)
 		) {
 			paintBlock(painter, owner as Element, child, childOrigin, ctx);
 		}
@@ -991,7 +1000,7 @@ function visibleChildren(
 	const children = node.children;
 	const top = -ctx.viewportOffset + painter.scrolledRows;
 	const bottom = top + ctx.rows;
-	const extent = layout.paintExtent(node);
+	const extent = paintExtent(node);
 	const owner = node.owner as Node | null;
 	if (
 		extent === undefined ||
@@ -1008,7 +1017,7 @@ function visibleChildren(
 	let hi = children.length;
 	while (lo < hi) {
 		const mid = (lo + hi) >>> 1;
-		const childExtent = layout.paintExtent(children[mid]);
+		const childExtent = paintExtent(children[mid]);
 		if (childExtent !== undefined && childExtent.bottom <= top) {
 			lo = mid + 1;
 		} else {
@@ -1017,7 +1026,7 @@ function visibleChildren(
 	}
 	const visible: LayoutNode[] = [];
 	for (let i = lo; i < children.length; i++) {
-		const childExtent = layout.paintExtent(children[i]);
+		const childExtent = paintExtent(children[i]);
 		if (childExtent !== undefined && childExtent.top >= bottom) {
 			break;
 		}
@@ -1250,7 +1259,7 @@ function paintMember(
 		paintAtomic(painter, element, leaf.leaf, {...leaf.rect, height}, ctx);
 		return;
 	}
-	if (painter.layout.hoistedToLayer(element)) {
+	if (hoistedToLayer(painter.layout, element)) {
 		return;
 	}
 	paintInline(painter, element, run, ctx);
@@ -1737,7 +1746,7 @@ function renderMath(
 	rect: Rect,
 	ctx: CellContext,
 ): void {
-	const box = painter.layout.getMathBox(element);
+	const box = getMathBox(painter.layout, element);
 	const boxModel = getBoxModel(element);
 	const contentWidth =
 		Math.round(rect.width) -
@@ -2105,7 +2114,7 @@ function renderTextHighlights(
 			const paint = getHighlightStyle(painter, parent, run.name);
 			if (paint !== null) {
 				layers.push({
-					...painter.layout.snapToClusters(textNode, run.from, run.to),
+					...snapToClusters(painter.layout, textNode, run.from, run.to),
 					paint,
 				});
 			}
@@ -2116,7 +2125,7 @@ function renderTextHighlights(
 		const paint = readSelectionStyle(selected.selectionParent);
 		if (paint !== null) {
 			layers.push({
-				...painter.layout.snapToClusters(textNode, selected.from, selected.to),
+				...snapToClusters(painter.layout, textNode, selected.from, selected.to),
 				paint,
 			});
 		}

From 6d43d9ea2153fd6ae76acfff7329d1bc8511c683 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:00:36 -0400
Subject: [PATCH 29/99] Make the Exchange methods no module exchange.ts loads
 calls into plain functions

start and flush become startExchange and flushExchange, since a bare
start() or flush() says nothing at the call. Methods that dom.ts or
framebuffer.ts call stay, as importing them back from exchange.ts would
close a cycle.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts             |  93 ++--
 src/internal/exchange.ts | 922 ++++++++++++++++++++-------------------
 2 files changed, 532 insertions(+), 483 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 44c1a0d9..17e34c93 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -45,14 +45,38 @@ import {
 	type Window,
 } from "./internal/dom.ts";
 import {
+	abandonColorDepthQuery,
+	abandonColorSchemeQuery,
+	clearScreen,
+	cursorToRow,
 	DEFAULT_ROWS,
+	deferResizeEvent,
+	detectAnchor,
 	type ColorDepth as EmittedColorDepth,
+	eraseBelow,
 	Exchange,
+	flushExchange,
+	initializeCursorDetection,
+	negotiateBidi,
+	negotiateCellPixels,
+	negotiateColorDepth,
+	negotiateColorScheme,
+	negotiateGraphemeClusters,
+	negotiateOverline,
+	queryDeviceAttributes,
+	reclaimModes,
+	releaseModes,
+	reserveRows,
+	restoreEngagedModes,
+	scrubProbeEcho,
+	setDisplayType,
+	startExchange,
 	type TerminalCloseInfo,
 	type TerminalResizeEvent,
 	type TerminalSize,
 	type TerminalTransport,
 	transportFromProcess,
+	writeLines,
 } from "./internal/exchange.ts";
 import {
 	beginFrame,
@@ -673,11 +697,11 @@ export class TermDOM extends EventTarget {
 			}
 
 			started = true;
-			slots.exchange.start(slots.input);
+			startExchange(slots.exchange, slots.input);
 			if (slots.transport.interactive) {
-				slots.exchange.setDisplayType("bracketedPaste", true);
+				setDisplayType(slots.exchange, "bracketedPaste", true);
 				// So dispose can restore the title.
-				slots.exchange.setDisplayType("titleStack", true);
+				setDisplayType(slots.exchange, "titleStack", true);
 				if (this.document.title) {
 					void slots.exchange.setTitle(this.document.title);
 				}
@@ -687,7 +711,7 @@ export class TermDOM extends EventTarget {
 			// The terminal's background, asked first so the first frame can
 			// wait for it.
 			const schemeBefore = slots.exchange.colorScheme;
-			void slots.exchange.negotiateColorScheme().then(() => {
+			void negotiateColorScheme(slots.exchange).then(() => {
 				if (isAttached(this) && slots.exchange.colorScheme !== schemeBefore) {
 					slots.cascade.syncStylesheets();
 					syncMediaQueries(this.document);
@@ -697,7 +721,7 @@ export class TermDOM extends EventTarget {
 			// What colors the terminal shows, when the program leaves it to the
 			// terminal to say. Asked before DA1, like the background.
 			const depthSettled = slots.colorDepth === undefined
-				? slots.exchange.negotiateColorDepth().then((depth) => {
+				? negotiateColorDepth(slots.exchange).then((depth) => {
 					if (isAttached(this) && depth !== slots.framebuffer.colorDepth) {
 						rebind(slots.framebuffer, depth);
 						syncMediaQueries(this.document);
@@ -707,34 +731,34 @@ export class TermDOM extends EventTarget {
 				: Promise.resolve();
 			// A terminal answers in the order it was asked, so once it answers
 			// DA1, one that said nothing of its background never will.
-			const answered = slots.exchange.queryDeviceAttributes();
-			slots.exchange.initializeCursorDetection();
+			const answered = queryDeviceAttributes(slots.exchange);
+			initializeCursorDetection(slots.exchange);
 			// A terminal that answers nothing is not waited on past the cursor
 			// question the anchor already waits for.
 			const cursor = slots.exchange.cursorDetectionPending;
 			const schemeSettled = (
 				cursor === null ? answered : Promise.race([answered, cursor])
 			).then(() => {
-				slots.exchange.abandonColorSchemeQuery();
-				slots.exchange.abandonColorDepthQuery();
+				abandonColorSchemeQuery(slots.exchange);
+				abandonColorDepthQuery(slots.exchange);
 			});
-			void slots.exchange.negotiateBidi();
-			void slots.exchange.negotiateGraphemeClusters();
+			void negotiateBidi(slots.exchange);
+			void negotiateGraphemeClusters(slots.exchange);
 			// Math draws its bars as overlines once the terminal has agreed
 			// to them, so what was measured before the answer measures again.
-			void slots.exchange.negotiateOverline().then((agreed) => {
+			void negotiateOverline(slots.exchange).then((agreed) => {
 				if (agreed && isAttached(this)) {
 					invalidateTextMeasurement(slots.layout);
 					void render(this);
 				}
 			});
-			slots.exchange.scrubProbeEcho();
+			scrubProbeEcho(slots.exchange);
 			// After the erase, which is for the mode probes' echo. What was
 			// painted against the guessed cell repaints when the answer lands.
 			// When the cell sizes the page, the first frame waits for it, so
 			// the page never lays out against the guess.
 			const measuresCell = getCellSizeSetting(this.document) === "auto";
-			const cellAnswered = slots.exchange.negotiateCellPixels().then(
+			const cellAnswered = negotiateCellPixels(slots.exchange).then(
 				(cellChanged) => {
 					if (!isAttached(this)) {
 						return;
@@ -759,10 +783,10 @@ export class TermDOM extends EventTarget {
 			if (measuresCell) {
 				// A font zoom resizes the grid, and the cell with it. The page
 				// hears of it once, when the cell is known.
-				slots.exchange.deferResizeEvent();
+				deferResizeEvent(slots.exchange);
 				slots.exchange.addEventListener("terminalresize", (event) => {
 					const {sizeChanged} = event as TerminalResizeEvent;
-					void slots.exchange.negotiateCellPixels().then((cellChanged) => {
+					void negotiateCellPixels(slots.exchange).then((cellChanged) => {
 						if (!isAttached(this)) {
 							return;
 						}
@@ -937,7 +961,7 @@ export class TermDOM extends EventTarget {
 		// Leaving the alternate screen puts the cursor where the switch saved
 		// it, on the flow content's bottom row. Step below it, or the shell's
 		// next line lands on ours.
-		slots.exchange.restoreEngagedModes();
+		restoreEngagedModes(slots.exchange);
 		dropFullscreen(this.document);
 		slots.hoverReportingEnabled = false;
 		slots.mouseReportingEnabled = false;
@@ -965,7 +989,7 @@ export class TermDOM extends EventTarget {
 		disconnectObservers(this.document);
 		clearWindowTimers(slots.window);
 		slots.disposal = Promise.all([
-			slots.exchange.flush(),
+			flushExchange(slots.exchange),
 			drained,
 			...slots.lifetimes,
 		]).then(() => {});
@@ -998,14 +1022,14 @@ async function suspendTermDOM(termDOM: TermDOM): Promise<void> {
 		flushDocument(termDOM);
 		termDOMSlots.sealed = true;
 	}
-	termDOMSlots.exchange.releaseModes();
-	await termDOMSlots.exchange.flush();
+	releaseModes(termDOMSlots.exchange);
+	await flushExchange(termDOMSlots.exchange);
 	await suspend.call(termDOMSlots.transport);
 	termDOMSlots.suspended = false;
 	if (termDOMSlots.lifecycle !== "attached") {
 		return;
 	}
-	termDOMSlots.exchange.reclaimModes();
+	reclaimModes(termDOMSlots.exchange);
 	if (termDOM.document.title) {
 		void termDOMSlots.exchange.setTitle(termDOM.document.title);
 	}
@@ -1136,7 +1160,7 @@ function writeHeldErrors(termDOM: TermDOM): void {
 		return;
 	}
 	termDOMSlots.unwrittenErrors = (termDOMSlots.unwrittenErrors ?? "") + text;
-	void termDOMSlots.exchange.writeLines(text).then(() => {
+	void writeLines(termDOMSlots.exchange, text).then(() => {
 		termDOMSlots.unwrittenErrors = null;
 		if (termDOMSlots.heldErrors.length === 0) {
 			sessionsHoldingErrors.delete(termDOM);
@@ -1197,7 +1221,7 @@ function syncMouseReporting(termDOM: TermDOM): void {
 		return;
 	}
 	termDOMSlots.mouseReportingEnabled = wanted;
-	termDOMSlots.exchange.setDisplayType("mouseCapture", wanted);
+	setDisplayType(termDOMSlots.exchange, "mouseCapture", wanted);
 }
 
 /**
@@ -1214,7 +1238,7 @@ function syncHoverReporting(termDOM: TermDOM): void {
 		return;
 	}
 	termDOMSlots.hoverReportingEnabled = wanted;
-	termDOMSlots.exchange.setDisplayType("motionReporting", wanted);
+	setDisplayType(termDOMSlots.exchange, "motionReporting", wanted);
 }
 
 // An image's or a canvas's natural size in cells is its pixels over the
@@ -1490,9 +1514,9 @@ function flushDocument(termDOM: TermDOM): void {
 	// old frame held below. Never a full ED from the top. tmux archives a
 	// fully erased screen into the scrollback, which put the document there
 	// twice.
-	void termDOMSlots.exchange.cursorToRow(top + 1);
-	void termDOMSlots.exchange.writeLines(output);
-	void termDOMSlots.exchange.eraseBelow();
+	void cursorToRow(termDOMSlots.exchange, top + 1);
+	void writeLines(termDOMSlots.exchange, output);
+	void eraseBelow(termDOMSlots.exchange);
 }
 
 /** The document as ANSI: colors and line breaks, no cursor controls, no modes. */
@@ -1523,7 +1547,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 			termDOM.attach();
 			// A terminal that does not answer leaves the anchor where it was,
 			// as at attach, and dispose() gives the question up.
-			await termDOMSlots.exchange.detectAnchor(NaN);
+			await detectAnchor(termDOMSlots.exchange, NaN);
 			if (termDOMSlots.lifecycle === "disposed") {
 				return;
 			}
@@ -1544,10 +1568,10 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	const wantAlt = isFullscreen(termDOM);
 	if (wantAlt !== termDOMSlots.onAlternateScreen) {
 		termDOMSlots.onAlternateScreen = wantAlt;
-		termDOMSlots.exchange.setDisplayType("altScreen", wantAlt);
+		setDisplayType(termDOMSlots.exchange, "altScreen", wantAlt);
 		if (wantAlt) {
-			termDOMSlots.exchange.setDisplayType("cursorHidden", true);
-			void termDOMSlots.exchange.clearScreen();
+			setDisplayType(termDOMSlots.exchange, "cursorHidden", true);
+			void clearScreen(termDOMSlots.exchange);
 		}
 		// Drop the diff model, or this frame patches one screen against the
 		// other's content.
@@ -1597,7 +1621,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		: termDOMSlots.layout.documentPaintHeight();
 	const regionHeight = Math.min(contentHeight, termDOMSlots.framebuffer.rows);
 
-	const top = fullscreen ? 0 : termDOMSlots.exchange.reserveRows(regionHeight);
+	const top = fullscreen ? 0 : reserveRows(termDOMSlots.exchange, regionHeight);
 
 	if (!fullscreen) {
 		// Through scrollTo, so the journal's delta is what the screen is about
@@ -1641,10 +1665,11 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 		if (!fullscreen) {
 			termDOMSlots.flowPainted = true;
 		}
-		termDOMSlots.exchange.setDisplayType("cursorHidden", true);
+		setDisplayType(termDOMSlots.exchange, "cursorHidden", true);
 		await termDOMSlots.exchange.write(ansi);
 	}
-	termDOMSlots.exchange.setDisplayType(
+	setDisplayType(
+		termDOMSlots.exchange,
 		"cursorHidden",
 		!termDOMSlots.framebuffer.caretVisible,
 	);
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index f7988d0f..0642854e 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -1059,11 +1059,6 @@ export class Exchange extends EventTarget {
 		return _(this).cursorDetectionPromise;
 	}
 
-	/** Leave the page's resize event to whoever handles terminalresize. */
-	deferResizeEvent(): void {
-		_(this).defersResize = true;
-	}
-
 	/**
 	 * A terminal is behind the transport and has not proven it never replies.
 	 */
@@ -1139,68 +1134,6 @@ export class Exchange extends EventTarget {
 		return CURSOR_QUERY;
 	}
 
-	/** Writes on change only. Teardown restores what was engaged. */
-	setDisplayType(name: ModeName, on: boolean): void {
-		const slots = _(this);
-		if (!slots.interactive || on === slots.engagedModes.has(name)) {
-			return;
-		}
-		if (on) {
-			slots.engagedModes.add(name);
-		} else {
-			slots.engagedModes.delete(name);
-		}
-		let output = on ? MODE_SPELLINGS[name].set : MODE_SPELLINGS[name].reset;
-		// tmux clears every mouse mode when any one of ?1000 to ?1003 is
-		// reset, so turning motion reporting off took the button mode with
-		// it and clicks stopped arriving. The base capture is asserted again.
-		if (
-			name === "motionReporting" &&
-			!on &&
-			slots.engagedModes.has("mouseCapture")
-		) {
-			output += MODE_SPELLINGS.mouseCapture.set;
-		}
-		void this.write(output);
-	}
-
-	/**
-	 * Resets every engaged mode without forgetting it, so the terminal is
-	 * the shell's while the program is suspended.
-	 */
-	releaseModes(): void {
-		const slots = _(this);
-		for (const name of MODE_RESTORE_ORDER) {
-			if (slots.engagedModes.has(name)) {
-				void this.write(MODE_SPELLINGS[name].reset);
-			}
-		}
-		if (slots.priorBidiMode === 1) {
-			void this.write(BIDI_IMPLICIT);
-		}
-	}
-
-	/** Sets every engaged mode again once a suspended program continues. */
-	reclaimModes(): void {
-		const slots = _(this);
-		if (slots.priorBidiMode === 1) {
-			void this.write(BIDI_EXPLICIT);
-		}
-		for (const name of MODE_RESTORE_ORDER) {
-			if (slots.engagedModes.has(name)) {
-				void this.write(MODE_SPELLINGS[name].set);
-			}
-		}
-	}
-
-	restoreEngagedModes(): void {
-		for (const name of MODE_RESTORE_ORDER) {
-			if (_(this).engagedModes.delete(name)) {
-				void this.write(MODE_SPELLINGS[name].reset);
-			}
-		}
-	}
-
 	write(output: string): Promise<void> {
 		// Probes taken while building one frame go out with it. A write ends
 		// the batch that can share a drift correction.
@@ -1218,331 +1151,6 @@ export class Exchange extends EventTarget {
 		return slots.lastWrite;
 	}
 
-	flush(): Promise<void> {
-		return _(this).lastWrite;
-	}
-
-	start(input: Input): void {
-		const slots = _(this);
-		if (slots.started) {
-			return;
-		}
-		slots.started = true;
-		slots.input = input;
-
-		// A transport that learns its size while it gets ready, as an SSH
-		// session does from its pty request, starts at that size.
-		const transport = slots.transport;
-		const framebuffer = slots.framebuffer;
-		if (
-			transport.cols !== framebuffer.cols || transport.rows !== framebuffer.rows
-		) {
-			terminalResized(this, transport.cols, transport.rows);
-		}
-
-		slots.reader = slots.transport.readable.getReader();
-		void readLoop(this, slots.reader);
-
-		slots.resizeReader = slots.transport.resizes.getReader();
-		void resizeLoop(this, slots.resizeReader);
-
-		void slots.transport.closed.then(() => {
-			if (!slots.disposed) {
-				slots.transportClosed = true;
-				this.dispatchEvent(constructInternal(() => new Event("terminalclose")));
-			}
-		});
-	}
-
-	initializeCursorDetection(): void {
-		const slots = _(this);
-		slots.cursorDetectionPromise = null;
-		if (slots.anchorDetectionEnabled) {
-			slots.cursorDetectionPromise = Promise.race([
-				this.detectAnchor().then(() => {}),
-				new Promise<void>((resolve) => setTimeout(resolve, QUERY_TIMEOUT_MS)),
-			])
-				.catch(() => {
-					slots.hasDetectedAnchor = false;
-				})
-				.finally(() => {
-					slots.cursorDetectionPromise = null;
-				});
-		}
-	}
-
-	/**
-	 * Ask for explicit bidi (mode 8 reset) and then ask what we got. The
-	 * diff hands the terminal single cells at absolute positions, which a
-	 * terminal reordering implicitly would scramble. A terminal that keeps
-	 * reordering anyway (1 or 3) is given logical order instead. Silence and
-	 * 0 mean no bidi, which is the contract explicit gives.
-	 */
-	async negotiateBidi(): Promise<void> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return;
-		}
-
-		const answer = await queryMode(this, "8", BIDI_EXPLICIT);
-		if (answer === null || answer === 0) {
-			return;
-		}
-		slots.priorBidiMode = answer;
-		if (answer === 1 || answer === 3) {
-			adoptTerminalReordering(slots.layout);
-		}
-	}
-
-	/**
-	 * What one cell measures in pixels. Silence leaves the guessed cell
-	 * standing, which is the contract an unanswered question gives
-	 * everywhere else here. A DA1 asked behind it ends the wait on a
-	 * terminal that does not answer. True when the cell changed.
-	 */
-	async negotiateCellPixels(): Promise<boolean> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return false;
-		}
-		let answered!: () => void;
-		const until = new Promise<void>((resolve) => (answered = resolve));
-		const cell = nextReply<"cell-size", {width: number; height: number} | null>(
-			this,
-			"cell-size",
-			{
-				ask: CELL_SIZE_QUERY,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: null,
-				until,
-				// A terminal with no window reports zeroes. That is not a cell.
-				read: ({width, height}) =>
-					width > 0 && height > 0 ? {width, height} : null,
-			},
-		);
-		void this.queryDeviceAttributes().then(answered);
-		const answer = await cell;
-		return (
-			answer !== null &&
-			!slots.disposed &&
-			adoptCellPixels(slots.framebuffer, answer.width, answer.height)
-		);
-	}
-
-	/**
-	 * The terminal's default background, as light or dark. Asked before
-	 * the cursor's position, which a terminal answers after it, so the
-	 * first frame's wait for the cursor covers this answer too.
-	 */
-	async negotiateColorScheme(): Promise<"light" | "dark" | null> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return null;
-		}
-		return await nextReply<"background", "light" | "dark" | null>(
-			this,
-			"background",
-			{
-				ask: BACKGROUND_QUERY,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: null,
-				read: ({red, green, blue}) => {
-					slots.terminalBackground =
-						(Math.round(red * 255) << 16) |
-						(Math.round(green * 255) << 8) |
-						Math.round(blue * 255);
-					return (
-						slots.colorScheme =
-							0.2126 * red + 0.7152 * green + 0.0722 * blue <
-						0.5
-								? "dark"
-								: "light"
-					);
-				},
-			},
-		);
-	}
-
-	/**
-	 * DA1, which every terminal answers, and answers after whatever it was
-	 * asked before: a marker that the questions ahead of it are settled.
-	 */
-	queryDeviceAttributes(): Promise<void> {
-		if (!_(this).interactive) {
-			return Promise.resolve();
-		}
-		return nextReply<"device-attributes", boolean>(this, "device-attributes", {
-			ask: DEVICE_ATTRIBUTES_QUERY,
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: false,
-			read: () => true,
-		}).then(() => {});
-	}
-
-	/**
-	 * Whether the terminal shows 24-bit color, from what it says over the
-	 * wire. It does when it keeps a 24-bit color in its style, or answers
-	 * XTGETTCAP for RGB or Tc. tmux says neither, but converts 24-bit color
-	 * for whatever terminal it runs in, so it counts too. Anything else gets
-	 * 256 colors, which every terminal in use draws.
-	 */
-	async negotiateColorDepth(): Promise<ColorDepth> {
-		if (!_(this).interactive) {
-			return "256";
-		}
-		const ask = <K extends WireItem["kind"]>(
-			kind: K,
-			question: string,
-			read: (item: ReplyItem<K>) => boolean,
-		) =>
-			nextReply<K, boolean>(this, kind, {
-				ask: question,
-				timeoutMs: QUERY_TIMEOUT_MS,
-				absent: false,
-				read,
-				group: "color-depth",
-			});
-		const answers = await Promise.all([
-			ask(
-				"sgr-report",
-				RGB_PROBE,
-				({params}) => params !== null && RGB_STYLE.test(params),
-			),
-			ask(
-				"capability-report",
-				`\x1bP+q${RGB_CAPABILITY}\x1b\\`,
-				({known}) => known,
-			),
-			ask(
-				"capability-report",
-				`\x1bP+q${TC_CAPABILITY}\x1b\\`,
-				({known}) => known,
-			),
-			ask("secondary-attributes", SECONDARY_ATTRIBUTES_QUERY, ({params}) =>
-				TMUX_ATTRIBUTES.test(params)),
-		]);
-		return answers.includes(true) ? "rgb" : "256";
-	}
-
-	/** A terminal that answered a later question will not answer these. */
-	abandonColorDepthQuery(): void {
-		const pending = _(this).pendingReplies;
-		for (const entry of pending.filter(
-			(entry) => entry.group === "color-depth",
-		)) {
-			pending.splice(pending.indexOf(entry), 1);
-			entry.giveUp();
-		}
-	}
-
-	/** A terminal that answered a later question will not answer this. */
-	abandonColorSchemeQuery(): void {
-		const pending = _(this).pendingReplies;
-		const index = pending.findIndex((entry) => entry.kind === "background");
-		if (index !== -1) {
-			const [entry] = pending.splice(index, 1);
-			entry.giveUp();
-		}
-	}
-
-	/** A terminal without DECRQM may echo the request's final byte as text. */
-	scrubProbeEcho(): void {
-		if (!_(this).asking) {
-			return;
-		}
-		void this.write("\r" + LINE_ERASE);
-	}
-
-	/**
-	 * Mode 2027: measure by grapheme cluster, as getStringWidth does, rather
-	 * than per code point as wcwidth does. A terminal that does not know the
-	 * mode leaves our measurements as they are. Only whether it agrees
-	 * changes.
-	 */
-	async negotiateGraphemeClusters(): Promise<void> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return;
-		}
-
-		const answer = await queryMode(
-			this,
-			"?2027",
-			MODE_SPELLINGS.clusterWidths.set,
-		);
-		slots.graphemeClustersNegotiated = answer === 1 || answer === 3;
-		// The set went out with the query's own write. A terminal that ignored
-		// it must not see the reset, so only an agreed offer is engaged.
-		if (slots.graphemeClustersNegotiated) {
-			slots.engagedModes.add("clusterWidths");
-		}
-	}
-
-	/**
-	 * SGR 53, overline. No terminal advertises it, but one that draws it
-	 * keeps it in its style, and DECRQSS reports the style back. The
-	 * probe sets it, asks, and resets it in one write, so the terminal's
-	 * style is what it was. A terminal that says nothing draws none.
-	 */
-	async negotiateOverline(): Promise<boolean> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return false;
-		}
-		const answer = await nextReply<"sgr-report", boolean>(this, "sgr-report", {
-			ask: "\x1b[53m\x1bP$qm\x1b\\\x1b[55m",
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: false,
-			read: ({params}) =>
-				params !== null && params.split(";").includes("53"),
-		});
-		slots.overlineNegotiated = answer;
-		return answer;
-	}
-
-	/**
-	 * DSR. The cursor row is the anchor. With `silence`, a terminal that
-	 * does not answer in time resolves to it, and the anchor stays.
-	 */
-	detectAnchor(silence?: number): Promise<number> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return Promise.reject(
-				new Error("Cannot detect cursor position: not interactive"),
-			);
-		}
-		// A cold start or a slow link can outlast a tighter window.
-		return nextReply(this, "cursor-report", {
-			ask: CURSOR_QUERY,
-			timeoutMs: QUERY_TIMEOUT_MS,
-			absent: silence,
-			sequence: slots.dsrSequence++,
-			// The 1-based row the command started on becomes the 0-based
-			// anchor.
-			read: ({row}) => {
-				slots.framebuffer.documentTop = row - 1;
-				slots.hasDetectedAnchor = true;
-				return row;
-			},
-		});
-	}
-
-	/** The 0-based cursor row, for the resize re-anchor. Rejects on timeout. */
-	queryCursorRow(): Promise<number> {
-		const slots = _(this);
-		if (!slots.interactive) {
-			return Promise.reject(new Error("not interactive"));
-		}
-		// Short, because the redraw should feel immediate, and a slow terminal
-		// falls back to the computed re-anchor.
-		return nextReply(this, "cursor-report", {
-			ask: CURSOR_QUERY,
-			timeoutMs: 200,
-			sequence: slots.dsrSequence++,
-			read: ({row}) => row - 1,
-		});
-	}
-
 	writeClipboard(text: string): Promise<void> {
 		return this.write(createClipboardEscape(text));
 	}
@@ -1568,60 +1176,6 @@ export class Exchange extends EventTarget {
 		});
 	}
 
-	clearScreen(): Promise<void> {
-		return this.write(SCREEN_CLEAR);
-	}
-
-	cursorToRow(row: number): Promise<void> {
-		return this.write(getRowStart(row));
-	}
-
-	eraseBelow(): Promise<void> {
-		return this.write(BELOW_ERASE);
-	}
-
-	/** Each line starts by erasing the rest of its row. */
-	writeLines(text: string): Promise<void> {
-		return this.write(
-			LINE_ERASE + text.replace(/\r\n(?!$)/g, "\r\n" + LINE_ERASE),
-		);
-	}
-
-	/**
-	 * Room below the anchor for `rows` comes from scrolling earlier output
-	 * into the scrollback, never from painting over it. Returns the screen
-	 * row the region starts at.
-	 */
-	reserveRows(rows: number): number {
-		const framebuffer = _(this).framebuffer;
-		const overflow = framebuffer.documentTop + rows - framebuffer.rows;
-		const push = overflow <= 0
-			? 0
-			: Math.min(overflow, framebuffer.documentTop);
-		if (push > 0) {
-			framebuffer.documentTop -= push;
-			// The scroll moves the cursor to the bottom row first. Hidden, or
-			// it shows there until the frame places it.
-			this.setDisplayType("cursorHidden", true);
-			void this.scrollUp(framebuffer.rows, push);
-			// The previous buffer is not shifted. Its rows are region-relative
-			// and the region top moved by exactly the scroll. A pending
-			// post-resize reset is screen-absolute and does shift.
-			scrolled(framebuffer, push);
-		}
-		return framebuffer.documentTop;
-	}
-
-	/**
-	 * The scroll is IND (ESC D) from the bottom row. A bare LF after an
-	 * absolute CUP does not scroll (tmux and xterm-headless both), and CSI n S
-	 * scrolls without adding the rows to xterm-headless's scrollback, which
-	 * would make this untestable.
-	 */
-	scrollUp(bottomRow: number, rows: number): Promise<void> {
-		return this.write(getRowStart(bottomRow) + SCROLL_STEP.repeat(rows));
-	}
-
 	/**
 	 * Hand the transport back. Cursor replies still owed are read for a
 	 * while first, because a reply after the tty is handed back is typed
@@ -1653,7 +1207,7 @@ export class Exchange extends EventTarget {
 			void this.write(BIDI_IMPLICIT);
 			slots.priorBidiMode = null;
 		}
-		this.restoreEngagedModes();
+		restoreEngagedModes(this);
 		slots.graphemeClustersNegotiated = false;
 		slots.overlineNegotiated = false;
 		abandonClipboardQuery(this);
@@ -1703,6 +1257,477 @@ export class Exchange extends EventTarget {
 	}
 }
 
+/** Leave the page's resize event to whoever handles terminalresize. */
+export function deferResizeEvent(exchange: Exchange): void {
+	_(exchange).defersResize = true;
+}
+
+/** Writes on change only. Teardown restores what was engaged. */
+export function setDisplayType(
+	exchange: Exchange,
+	name: ModeName,
+	on: boolean,
+): void {
+	const slots = _(exchange);
+	if (!slots.interactive || on === slots.engagedModes.has(name)) {
+		return;
+	}
+	if (on) {
+		slots.engagedModes.add(name);
+	} else {
+		slots.engagedModes.delete(name);
+	}
+	let output = on ? MODE_SPELLINGS[name].set : MODE_SPELLINGS[name].reset;
+	// tmux clears every mouse mode when any one of ?1000 to ?1003 is
+	// reset, so turning motion reporting off took the button mode with
+	// it and clicks stopped arriving. The base capture is asserted again.
+	if (
+		name === "motionReporting" && !on && slots.engagedModes.has("mouseCapture")
+	) {
+		output += MODE_SPELLINGS.mouseCapture.set;
+	}
+	void exchange.write(output);
+}
+
+/**
+ * Resets every engaged mode without forgetting it, so the terminal is
+ * the shell's while the program is suspended.
+ */
+export function releaseModes(exchange: Exchange): void {
+	const slots = _(exchange);
+	for (const name of MODE_RESTORE_ORDER) {
+		if (slots.engagedModes.has(name)) {
+			void exchange.write(MODE_SPELLINGS[name].reset);
+		}
+	}
+	if (slots.priorBidiMode === 1) {
+		void exchange.write(BIDI_IMPLICIT);
+	}
+}
+
+/** Sets every engaged mode again once a suspended program continues. */
+export function reclaimModes(exchange: Exchange): void {
+	const slots = _(exchange);
+	if (slots.priorBidiMode === 1) {
+		void exchange.write(BIDI_EXPLICIT);
+	}
+	for (const name of MODE_RESTORE_ORDER) {
+		if (slots.engagedModes.has(name)) {
+			void exchange.write(MODE_SPELLINGS[name].set);
+		}
+	}
+}
+
+export function restoreEngagedModes(exchange: Exchange): void {
+	for (const name of MODE_RESTORE_ORDER) {
+		if (_(exchange).engagedModes.delete(name)) {
+			void exchange.write(MODE_SPELLINGS[name].reset);
+		}
+	}
+}
+
+export function flushExchange(exchange: Exchange): Promise<void> {
+	return _(exchange).lastWrite;
+}
+
+export function startExchange(exchange: Exchange, input: Input): void {
+	const slots = _(exchange);
+	if (slots.started) {
+		return;
+	}
+	slots.started = true;
+	slots.input = input;
+
+	// A transport that learns its size while it gets ready, as an SSH
+	// session does from its pty request, starts at that size.
+	const transport = slots.transport;
+	const framebuffer = slots.framebuffer;
+	if (
+		transport.cols !== framebuffer.cols || transport.rows !== framebuffer.rows
+	) {
+		terminalResized(exchange, transport.cols, transport.rows);
+	}
+
+	slots.reader = slots.transport.readable.getReader();
+	void readLoop(exchange, slots.reader);
+
+	slots.resizeReader = slots.transport.resizes.getReader();
+	void resizeLoop(exchange, slots.resizeReader);
+
+	void slots.transport.closed.then(() => {
+		if (!slots.disposed) {
+			slots.transportClosed = true;
+			exchange.dispatchEvent(
+				constructInternal(() => new Event("terminalclose")),
+			);
+		}
+	});
+}
+
+export function initializeCursorDetection(exchange: Exchange): void {
+	const slots = _(exchange);
+	slots.cursorDetectionPromise = null;
+	if (slots.anchorDetectionEnabled) {
+		slots.cursorDetectionPromise = Promise.race([
+			detectAnchor(exchange).then(() => {}),
+			new Promise<void>((resolve) => setTimeout(resolve, QUERY_TIMEOUT_MS)),
+		])
+			.catch(() => {
+				slots.hasDetectedAnchor = false;
+			})
+			.finally(() => {
+				slots.cursorDetectionPromise = null;
+			});
+	}
+}
+
+/**
+ * Ask for explicit bidi (mode 8 reset) and then ask what we got. The
+ * diff hands the terminal single cells at absolute positions, which a
+ * terminal reordering implicitly would scramble. A terminal that keeps
+ * reordering anyway (1 or 3) is given logical order instead. Silence and
+ * 0 mean no bidi, which is the contract explicit gives.
+ */
+export async function negotiateBidi(exchange: Exchange): Promise<void> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return;
+	}
+
+	const answer = await queryMode(exchange, "8", BIDI_EXPLICIT);
+	if (answer === null || answer === 0) {
+		return;
+	}
+	slots.priorBidiMode = answer;
+	if (answer === 1 || answer === 3) {
+		adoptTerminalReordering(slots.layout);
+	}
+}
+
+/**
+ * What one cell measures in pixels. Silence leaves the guessed cell
+ * standing, which is the contract an unanswered question gives
+ * everywhere else here. A DA1 asked behind it ends the wait on a
+ * terminal that does not answer. True when the cell changed.
+ */
+export async function negotiateCellPixels(
+	exchange: Exchange,
+): Promise<boolean> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return false;
+	}
+	let answered!: () => void;
+	const until = new Promise<void>((resolve) => (answered = resolve));
+	const cell = nextReply<"cell-size", {width: number; height: number} | null>(
+		exchange,
+		"cell-size",
+		{
+			ask: CELL_SIZE_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: null,
+			until,
+			// A terminal with no window reports zeroes. That is not a cell.
+			read: ({width, height}) =>
+				width > 0 && height > 0 ? {width, height} : null,
+		},
+	);
+	void queryDeviceAttributes(exchange).then(answered);
+	const answer = await cell;
+	return (
+		answer !== null &&
+		!slots.disposed &&
+		adoptCellPixels(slots.framebuffer, answer.width, answer.height)
+	);
+}
+
+/**
+ * The terminal's default background, as light or dark. Asked before
+ * the cursor's position, which a terminal answers after it, so the
+ * first frame's wait for the cursor covers this answer too.
+ */
+export async function negotiateColorScheme(
+	exchange: Exchange,
+): Promise<"light" | "dark" | null> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return null;
+	}
+	return await nextReply<"background", "light" | "dark" | null>(
+		exchange,
+		"background",
+		{
+			ask: BACKGROUND_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: null,
+			read: ({red, green, blue}) => {
+				slots.terminalBackground =
+					(Math.round(red * 255) << 16) |
+					(Math.round(green * 255) << 8) |
+					Math.round(blue * 255);
+				return (
+					slots.colorScheme =
+						0.2126 * red + 0.7152 * green + 0.0722 * blue <
+					0.5
+							? "dark"
+							: "light"
+				);
+			},
+		},
+	);
+}
+
+/**
+ * DA1, which every terminal answers, and answers after whatever it was
+ * asked before: a marker that the questions ahead of it are settled.
+ */
+export function queryDeviceAttributes(exchange: Exchange): Promise<void> {
+	if (!_(exchange).interactive) {
+		return Promise.resolve();
+	}
+	return nextReply<"device-attributes", boolean>(
+		exchange,
+		"device-attributes",
+		{
+			ask: DEVICE_ATTRIBUTES_QUERY,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read: () => true,
+		},
+	).then(() => {});
+}
+
+/**
+ * Whether the terminal shows 24-bit color, from what it says over the
+ * wire. It does when it keeps a 24-bit color in its style, or answers
+ * XTGETTCAP for RGB or Tc. tmux says neither, but converts 24-bit color
+ * for whatever terminal it runs in, so it counts too. Anything else gets
+ * 256 colors, which every terminal in use draws.
+ */
+export async function negotiateColorDepth(
+	exchange: Exchange,
+): Promise<ColorDepth> {
+	if (!_(exchange).interactive) {
+		return "256";
+	}
+	const ask = <K extends WireItem["kind"]>(
+		kind: K,
+		question: string,
+		read: (item: ReplyItem<K>) => boolean,
+	) =>
+		nextReply<K, boolean>(exchange, kind, {
+			ask: question,
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read,
+			group: "color-depth",
+		});
+	const answers = await Promise.all([
+		ask(
+			"sgr-report",
+			RGB_PROBE,
+			({params}) => params !== null && RGB_STYLE.test(params),
+		),
+		ask(
+			"capability-report",
+			`\x1bP+q${RGB_CAPABILITY}\x1b\\`,
+			({known}) => known,
+		),
+		ask(
+			"capability-report",
+			`\x1bP+q${TC_CAPABILITY}\x1b\\`,
+			({known}) => known,
+		),
+		ask("secondary-attributes", SECONDARY_ATTRIBUTES_QUERY, ({params}) =>
+			TMUX_ATTRIBUTES.test(params)),
+	]);
+	return answers.includes(true) ? "rgb" : "256";
+}
+
+/** A terminal that answered a later question will not answer these. */
+export function abandonColorDepthQuery(exchange: Exchange): void {
+	const pending = _(exchange).pendingReplies;
+	for (const entry of pending.filter(
+		(entry) => entry.group === "color-depth",
+	)) {
+		pending.splice(pending.indexOf(entry), 1);
+		entry.giveUp();
+	}
+}
+
+/** A terminal that answered a later question will not answer this. */
+export function abandonColorSchemeQuery(exchange: Exchange): void {
+	const pending = _(exchange).pendingReplies;
+	const index = pending.findIndex((entry) => entry.kind === "background");
+	if (index !== -1) {
+		const [entry] = pending.splice(index, 1);
+		entry.giveUp();
+	}
+}
+
+/** A terminal without DECRQM may echo the request's final byte as text. */
+export function scrubProbeEcho(exchange: Exchange): void {
+	if (!_(exchange).asking) {
+		return;
+	}
+	void exchange.write("\r" + LINE_ERASE);
+}
+
+/**
+ * Mode 2027: measure by grapheme cluster, as getStringWidth does, rather
+ * than per code point as wcwidth does. A terminal that does not know the
+ * mode leaves our measurements as they are. Only whether it agrees
+ * changes.
+ */
+export async function negotiateGraphemeClusters(
+	exchange: Exchange,
+): Promise<void> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return;
+	}
+
+	const answer = await queryMode(
+		exchange,
+		"?2027",
+		MODE_SPELLINGS.clusterWidths.set,
+	);
+	slots.graphemeClustersNegotiated = answer === 1 || answer === 3;
+	// The set went out with the query's own write. A terminal that ignored
+	// it must not see the reset, so only an agreed offer is engaged.
+	if (slots.graphemeClustersNegotiated) {
+		slots.engagedModes.add("clusterWidths");
+	}
+}
+
+/**
+ * SGR 53, overline. No terminal advertises it, but one that draws it
+ * keeps it in its style, and DECRQSS reports the style back. The
+ * probe sets it, asks, and resets it in one write, so the terminal's
+ * style is what it was. A terminal that says nothing draws none.
+ */
+export async function negotiateOverline(exchange: Exchange): Promise<boolean> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return false;
+	}
+	const answer = await nextReply<"sgr-report", boolean>(
+		exchange,
+		"sgr-report",
+		{
+			ask: "\x1b[53m\x1bP$qm\x1b\\\x1b[55m",
+			timeoutMs: QUERY_TIMEOUT_MS,
+			absent: false,
+			read: ({params}) =>
+				params !== null && params.split(";").includes("53"),
+		},
+	);
+	slots.overlineNegotiated = answer;
+	return answer;
+}
+
+/**
+ * DSR. The cursor row is the anchor. With `silence`, a terminal that
+ * does not answer in time resolves to it, and the anchor stays.
+ */
+export function detectAnchor(
+	exchange: Exchange,
+	silence?: number,
+): Promise<number> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return Promise.reject(
+			new Error("Cannot detect cursor position: not interactive"),
+		);
+	}
+	// A cold start or a slow link can outlast a tighter window.
+	return nextReply(exchange, "cursor-report", {
+		ask: CURSOR_QUERY,
+		timeoutMs: QUERY_TIMEOUT_MS,
+		absent: silence,
+		sequence: slots.dsrSequence++,
+		// The 1-based row the command started on becomes the 0-based
+		// anchor.
+		read: ({row}) => {
+			slots.framebuffer.documentTop = row - 1;
+			slots.hasDetectedAnchor = true;
+			return row;
+		},
+	});
+}
+
+/** The 0-based cursor row, for the resize re-anchor. Rejects on timeout. */
+function queryCursorRow(exchange: Exchange): Promise<number> {
+	const slots = _(exchange);
+	if (!slots.interactive) {
+		return Promise.reject(new Error("not interactive"));
+	}
+	// Short, because the redraw should feel immediate, and a slow terminal
+	// falls back to the computed re-anchor.
+	return nextReply(exchange, "cursor-report", {
+		ask: CURSOR_QUERY,
+		timeoutMs: 200,
+		sequence: slots.dsrSequence++,
+		read: ({row}) => row - 1,
+	});
+}
+
+export function clearScreen(exchange: Exchange): Promise<void> {
+	return exchange.write(SCREEN_CLEAR);
+}
+
+export function cursorToRow(exchange: Exchange, row: number): Promise<void> {
+	return exchange.write(getRowStart(row));
+}
+
+export function eraseBelow(exchange: Exchange): Promise<void> {
+	return exchange.write(BELOW_ERASE);
+}
+
+/** Each line starts by erasing the rest of its row. */
+export function writeLines(exchange: Exchange, text: string): Promise<void> {
+	return exchange.write(
+		LINE_ERASE + text.replace(/\r\n(?!$)/g, "\r\n" + LINE_ERASE),
+	);
+}
+
+/**
+ * Room below the anchor for `rows` comes from scrolling earlier output
+ * into the scrollback, never from painting over it. Returns the screen
+ * row the region starts at.
+ */
+export function reserveRows(exchange: Exchange, rows: number): number {
+	const framebuffer = _(exchange).framebuffer;
+	const overflow = framebuffer.documentTop + rows - framebuffer.rows;
+	const push = overflow <= 0 ? 0 : Math.min(overflow, framebuffer.documentTop);
+	if (push > 0) {
+		framebuffer.documentTop -= push;
+		// The scroll moves the cursor to the bottom row first. Hidden, or
+		// it shows there until the frame places it.
+		setDisplayType(exchange, "cursorHidden", true);
+		void scrollUp(exchange, framebuffer.rows, push);
+		// The previous buffer is not shifted. Its rows are region-relative
+		// and the region top moved by exactly the scroll. A pending
+		// post-resize reset is screen-absolute and does shift.
+		scrolled(framebuffer, push);
+	}
+	return framebuffer.documentTop;
+}
+
+/**
+ * The scroll is IND (ESC D) from the bottom row. A bare LF after an
+ * absolute CUP does not scroll (tmux and xterm-headless both), and CSI n S
+ * scrolls without adding the rows to xterm-headless's scrollback, which
+ * would make this untestable.
+ */
+function scrollUp(
+	exchange: Exchange,
+	bottomRow: number,
+	rows: number,
+): Promise<void> {
+	return exchange.write(getRowStart(bottomRow) + SCROLL_STEP.repeat(rows));
+}
+
 function getRowStart(row: number): string {
 	return `\x1b[${row};1H`;
 }
@@ -2041,8 +2066,7 @@ function handleResize(session: Exchange): void {
 	};
 
 	if (sessionSlots.anchorDetectionEnabled && wrappedRowsAbove !== null) {
-		session
-			.queryCursorRow()
+		queryCursorRow(session)
 			.then((cursorRow) => {
 				if (settling !== sessionSlots.settlingResize) {
 					return;

From abf133e40bc6fdb040cc4e6b9db3dceeeb6fa78e Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:02:22 -0400
Subject: [PATCH 30/99] Make LayoutNode's, CellGrid's, CellContext's and
 Input's methods plain functions

CellGrid's clear, clone and copyFrom become clearGrid, cloneGrid and
copyGridFrom, and Input's dispatch becomes dispatchInput, since the bare
names say nothing at the call. FrameWriter stays a class whose methods
chain, which reads better than the nested calls functions would need.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts                    |   4 +-
 src/internal/canvas.ts          |  42 +-
 src/internal/dom.ts             |   3 +-
 src/internal/exchange.ts        |   6 +-
 src/internal/framebuffer.ts     | 864 +++++++++++++++++---------------
 src/internal/gradients.ts       |   8 +-
 src/internal/input.ts           | 187 +++----
 src/internal/layout.ts          |  41 +-
 src/internal/layoutsolver.ts    |  84 ++--
 src/internal/painter.ts         |  49 +-
 src/internal/replaced.ts        |  22 +-
 tests/ansi-fixtures.ts          | 195 +++----
 tests/ansi.test.ts              | 276 +++++-----
 tests/flex.test.ts              |  14 +-
 tests/line-clearing.test.ts     |   8 +-
 tests/test-utils.ts             |   3 +-
 tests/wide-cluster.test.ts      |  15 +-
 tests/width-measurement.test.ts |   3 +-
 tests/zero-width.test.ts        |   4 +-
 19 files changed, 965 insertions(+), 863 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 17e34c93..f2067430 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -91,7 +91,7 @@ import {
 	retainDecoder,
 	setDecodeWorkerURL,
 } from "./internal/images.ts";
-import {Input} from "./internal/input.ts";
+import {Input, resolvePendingHover} from "./internal/input.ts";
 import {
 	framePainted,
 	invalidateTextMeasurement,
@@ -1581,7 +1581,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	}
 
 	// First, so a hover listener's mutations join the records taken below.
-	termDOMSlots.input.resolvePendingHover();
+	resolvePendingHover(termDOMSlots.input);
 
 	applyMutations(termDOM.document);
 	runFocusFixup(termDOM.document);
diff --git a/src/internal/canvas.ts b/src/internal/canvas.ts
index ad40e05c..2b3b533a 100644
--- a/src/internal/canvas.ts
+++ b/src/internal/canvas.ts
@@ -22,6 +22,12 @@ import {
 import {
 	type CellContext,
 	type CellStyle,
+	clearGrid,
+	clearRange,
+	drawBox,
+	drawLine,
+	drawRect,
+	drawText,
 	LINE_STYLES,
 	type LineStyle,
 	readCell,
@@ -3377,7 +3383,7 @@ export class CanvasCellGridContext {
 			return;
 		}
 		const [x0, y0, x1, y1] = rect;
-		slots.gridHost.cells().drawRect(x0, y0, x1 - x0, y1 - y0, fill);
+		drawRect(slots.gridHost.cells(), x0, y0, x1 - x0, y1 - y0, fill);
 		slots.gridHost.changed();
 	}
 
@@ -3391,7 +3397,7 @@ export class CanvasCellGridContext {
 		const x0 = Math.max(0, rect[0]);
 		const x1 = Math.min(cols, rect[2]);
 		for (let row = Math.max(0, rect[1]); row < Math.min(rows, rect[3]); row++) {
-			grid.clearRange(row * cols + x0, row * cols + x1);
+			clearRange(grid, row * cols + x0, row * cols + x1);
 		}
 		slots.gridHost.changed();
 	}
@@ -3460,7 +3466,8 @@ export class CanvasCellGridContext {
 				inside &&
 				grid.cluster[index] !== 0 &&
 				readCell(grid, index)?.inverse === true;
-			cells.drawText(
+			drawText(
+				cells,
 				cluster,
 				col,
 				row,
@@ -3497,13 +3504,13 @@ export class CanvasCellGridContext {
 		const line: LineStyle = {style, color};
 		const cells = slots.gridHost.cells();
 		if (b === d) {
-			cells.drawLine(Math.min(a, c), b, Math.max(a, c) + 1, b, {
+			drawLine(cells, Math.min(a, c), b, Math.max(a, c) + 1, b, {
 				...line,
 				startCap: a === c ? "square" : undefined,
 				endCap: a === c ? "square" : undefined,
 			});
 		} else if (a === c) {
-			cells.drawLine(a, Math.min(b, d), a, Math.max(b, d) + 1, line);
+			drawLine(cells, a, Math.min(b, d), a, Math.max(b, d) + 1, line);
 		} else {
 			return;
 		}
@@ -3527,17 +3534,16 @@ export class CanvasCellGridContext {
 		const [x0, y0, x1, y1] = rect;
 		const side: LineStyle = {style, color};
 		const corner = slots.gridState.lineJoin === "round" ? "round" : undefined;
-		slots.gridHost.cells()
-			.drawBox(x0, y0, x1 - x0, y1 - y0, {
-				top: side,
-				right: side,
-				bottom: side,
-				left: side,
-				topLeft: corner,
-				topRight: corner,
-				bottomRight: corner,
-				bottomLeft: corner,
-			});
+		drawBox(slots.gridHost.cells(), x0, y0, x1 - x0, y1 - y0, {
+			top: side,
+			right: side,
+			bottom: side,
+			left: side,
+			topLeft: corner,
+			topRight: corner,
+			bottomRight: corner,
+			bottomLeft: corner,
+		});
 		slots.gridHost.changed();
 	}
 
@@ -3635,7 +3641,7 @@ export class CanvasCellGridContext {
 						: null,
 				);
 				if (half !== null) {
-					cells.drawText(half.char, x, y, half.style);
+					drawText(cells, half.char, x, y, half.style);
 				}
 			}
 		}
@@ -3694,7 +3700,7 @@ export class CanvasCellGridContext {
 
 	reset(): void {
 		const slots = _(this);
-		slots.gridHost.cells().grid.clear();
+		clearGrid(slots.gridHost.cells().grid);
 		slots.gridState = defaultGridState();
 		slots.gridStack = [];
 		slots.gridHost.changed();
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index dfcd1d3f..9c8a3718 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -61,6 +61,7 @@ import type {Exchange} from "./exchange.ts";
 import {
 	CellContext,
 	CellGrid,
+	drawGrid,
 	type Framebuffer,
 	invalidate,
 	scrollTo,
@@ -15907,7 +15908,7 @@ function fitCanvasGrid(
 	}
 	const cells = new CellContext(new CellGrid(rows, cols), rows, cols, 0);
 	if (previous !== null) {
-		cells.drawGrid(previous.grid, 0, 0);
+		drawGrid(cells, previous.grid, 0, 0);
 	}
 	canvasSlots.extra.canvasGrid = cells;
 	return cells;
diff --git a/src/internal/exchange.ts b/src/internal/exchange.ts
index 0642854e..59b1ed2e 100644
--- a/src/internal/exchange.ts
+++ b/src/internal/exchange.ts
@@ -19,7 +19,7 @@ import {
 	scrolled,
 	wrappedRowsAbovePark,
 } from "./framebuffer.ts";
-import type {Input} from "./input.ts";
+import {dispatchInput, type Input} from "./input.ts";
 import {
 	adoptTerminalReordering,
 	invalidateTextMeasurement,
@@ -2157,11 +2157,11 @@ function dispatchQueuedItems(session: Exchange): void {
 					}
 					break;
 				}
-				input.dispatch([item]);
+				dispatchInput(input, [item]);
 				break;
 			case "mouse":
 			case "paste":
-				input.dispatch(item);
+				dispatchInput(input, item);
 				break;
 			default:
 				dispatchReply(session, item);
diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 46d7e22e..0e871488 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -754,60 +754,6 @@ export class CellGrid {
 		this.border = new Uint32Array(size);
 	}
 
-	clear(): void {
-		this.cluster.fill(0);
-		this.fg.fill(0);
-		this.bg.fill(0);
-		this.attrs.fill(0);
-		this.border.fill(0);
-	}
-
-	clearRange(start: number, end: number): void {
-		if (end <= start) {
-			return;
-		}
-		this.cluster.fill(0, start, end);
-		this.fg.fill(0, start, end);
-		this.bg.fill(0, start, end);
-		this.attrs.fill(0, start, end);
-		this.border.fill(0, start, end);
-	}
-
-	moveRange(dest: number, srcStart: number, srcEnd: number): void {
-		this.cluster.copyWithin(dest, srcStart, srcEnd);
-		this.fg.copyWithin(dest, srcStart, srcEnd);
-		this.bg.copyWithin(dest, srcStart, srcEnd);
-		this.attrs.copyWithin(dest, srcStart, srcEnd);
-		this.border.copyWithin(dest, srcStart, srcEnd);
-	}
-
-	copyFrom(
-		source: CellGrid,
-		{to, start, end}: {to: number; start: number; end: number},
-	): void {
-		this.cluster.set(source.cluster.subarray(start, end), to);
-		this.fg.set(source.fg.subarray(start, end), to);
-		this.bg.set(source.bg.subarray(start, end), to);
-		this.attrs.set(source.attrs.subarray(start, end), to);
-		this.border.set(source.border.subarray(start, end), to);
-	}
-
-	clone(): CellGrid {
-		const copy = new CellGrid(this.rows, this.cols);
-		copy.copyFrom(this, {to: 0, start: 0, end: this.rows * this.cols});
-		return copy;
-	}
-
-	bottomRows(rows: number): CellGrid {
-		const kept = new CellGrid(rows, this.cols);
-		kept.copyFrom(this, {
-			to: 0,
-			start: (this.rows - rows) * this.cols,
-			end: this.rows * this.cols,
-		});
-		return kept;
-	}
-
 	setCell(
 		index: number,
 		grapheme: string,
@@ -824,25 +770,7 @@ export class CellGrid {
 			((width < ATTR.WidthWide ? width : ATTR.WidthWide) << ATTR.WidthShift);
 		this.border[index] = 0;
 		if (width > 1) {
-			this.settleWide(index, width);
-		}
-	}
-
-	/**
-	 * A terminal draws a wide glyph over the columns after its own, so the
-	 * grid holds nothing there, as the screen does. A fill painted under the
-	 * glyph would otherwise stay in its second column, and when the glyph
-	 * goes, a frame painting the same fill there again skips a cell the
-	 * terminal blanked when the glyph was overwritten.
-	 */
-	settleWide(index: number, width: number): void {
-		const end = Math.min(
-			index + width,
-			index - (index % this.cols) + this.cols,
-		);
-		for (let covered = index + 1; covered < end; covered++) {
-			this.cluster[covered] = 0;
-			this.border[covered] = 0;
+			settleWide(this, index, width);
 		}
 	}
 
@@ -857,42 +785,127 @@ export class CellGrid {
 			(packAttrs(style) & ~ATTR.DoubleUnderline) | (1 << ATTR.WidthShift);
 		this.border[index] = border;
 	}
+}
 
-	setBlank(index: number): void {
-		this.cluster[index] = 0x20;
-		this.fg[index] = 0;
-		this.bg[index] = 0;
-		this.attrs[index] = 1 << ATTR.WidthShift;
-		this.border[index] = 0;
-	}
+export function clearGrid(grid: CellGrid): void {
+	grid.cluster.fill(0);
+	grid.fg.fill(0);
+	grid.bg.fill(0);
+	grid.attrs.fill(0);
+	grid.border.fill(0);
+}
 
-	setFrom(index: number, source: CellGrid, sourceIndex: number): void {
-		this.cluster[index] = source.cluster[sourceIndex];
-		this.fg[index] = source.fg[sourceIndex];
-		this.bg[index] = source.bg[sourceIndex];
-		this.attrs[index] = source.attrs[sourceIndex];
-		this.border[index] = source.border[sourceIndex];
+export function clearRange(grid: CellGrid, start: number, end: number): void {
+	if (end <= start) {
+		return;
 	}
+	grid.cluster.fill(0, start, end);
+	grid.fg.fill(0, start, end);
+	grid.bg.fill(0, start, end);
+	grid.attrs.fill(0, start, end);
+	grid.border.fill(0, start, end);
+}
 
-	widthAt(index: number): number {
-		const width = (this.attrs[index] & ATTR.WidthMask) >>> ATTR.WidthShift;
-		return width === ATTR.WidthWide
-			? getStringWidth(decodeGrapheme(this.cluster[index]))
-			: width;
-	}
+function moveRange(
+	grid: CellGrid,
+	dest: number,
+	srcStart: number,
+	srcEnd: number,
+): void {
+	grid.cluster.copyWithin(dest, srcStart, srcEnd);
+	grid.fg.copyWithin(dest, srcStart, srcEnd);
+	grid.bg.copyWithin(dest, srcStart, srcEnd);
+	grid.attrs.copyWithin(dest, srcStart, srcEnd);
+	grid.border.copyWithin(dest, srcStart, srcEnd);
+}
 
-	equalCells(index: number, other: CellGrid, otherIndex: number): boolean {
-		return (
-			this.cluster[index] === other.cluster[otherIndex] &&
-			this.fg[index] === other.fg[otherIndex] &&
-			this.bg[index] === other.bg[otherIndex] &&
-			(this.attrs[index] & ATTR.StyleMask) ===
-			(other.attrs[otherIndex] & ATTR.StyleMask) &&
-			this.border[index] === other.border[otherIndex]
-		);
+function copyGridFrom(
+	grid: CellGrid,
+	source: CellGrid,
+	{to, start, end}: {to: number; start: number; end: number},
+): void {
+	grid.cluster.set(source.cluster.subarray(start, end), to);
+	grid.fg.set(source.fg.subarray(start, end), to);
+	grid.bg.set(source.bg.subarray(start, end), to);
+	grid.attrs.set(source.attrs.subarray(start, end), to);
+	grid.border.set(source.border.subarray(start, end), to);
+}
+
+export function cloneGrid(grid: CellGrid): CellGrid {
+	const copy = new CellGrid(grid.rows, grid.cols);
+	copyGridFrom(copy, grid, {to: 0, start: 0, end: grid.rows * grid.cols});
+	return copy;
+}
+
+function bottomRows(grid: CellGrid, rows: number): CellGrid {
+	const kept = new CellGrid(rows, grid.cols);
+	copyGridFrom(kept, grid, {
+		to: 0,
+		start: (grid.rows - rows) * grid.cols,
+		end: grid.rows * grid.cols,
+	});
+	return kept;
+}
+
+/**
+ * A terminal draws a wide glyph over the columns after its own, so the
+ * grid holds nothing there, as the screen does. A fill painted under the
+ * glyph would otherwise stay in its second column, and when the glyph
+ * goes, a frame painting the same fill there again skips a cell the
+ * terminal blanked when the glyph was overwritten.
+ */
+function settleWide(grid: CellGrid, index: number, width: number): void {
+	const end = Math.min(index + width, index - (index % grid.cols) + grid.cols);
+	for (let covered = index + 1; covered < end; covered++) {
+		grid.cluster[covered] = 0;
+		grid.border[covered] = 0;
 	}
 }
 
+function setBlank(grid: CellGrid, index: number): void {
+	grid.cluster[index] = 0x20;
+	grid.fg[index] = 0;
+	grid.bg[index] = 0;
+	grid.attrs[index] = 1 << ATTR.WidthShift;
+	grid.border[index] = 0;
+}
+
+function setFrom(
+	grid: CellGrid,
+	index: number,
+	source: CellGrid,
+	sourceIndex: number,
+): void {
+	grid.cluster[index] = source.cluster[sourceIndex];
+	grid.fg[index] = source.fg[sourceIndex];
+	grid.bg[index] = source.bg[sourceIndex];
+	grid.attrs[index] = source.attrs[sourceIndex];
+	grid.border[index] = source.border[sourceIndex];
+}
+
+function widthAt(grid: CellGrid, index: number): number {
+	const width = (grid.attrs[index] & ATTR.WidthMask) >>> ATTR.WidthShift;
+	return width === ATTR.WidthWide
+		? getStringWidth(decodeGrapheme(grid.cluster[index]))
+		: width;
+}
+
+function equalCells(
+	grid: CellGrid,
+	index: number,
+	other: CellGrid,
+	otherIndex: number,
+): boolean {
+	return (
+		grid.cluster[index] === other.cluster[otherIndex] &&
+		grid.fg[index] === other.fg[otherIndex] &&
+		grid.bg[index] === other.bg[otherIndex] &&
+		(grid.attrs[index] & ATTR.StyleMask) ===
+		(other.attrs[otherIndex] & ATTR.StyleMask) &&
+		grid.border[index] === other.border[otherIndex]
+	);
+}
+
 function meetEdges(existing: number, incoming: number): number {
 	let met = 0;
 	for (const mask of BORDER_EDGE_MASKS) {
@@ -1053,7 +1066,7 @@ function getGridLine(grid: CellGrid, row: number, writer: FrameWriter): string {
 		// already covered by the glyph. Skip it, or the line grows a phantom
 		// space per wide character and shifts what follows.
 		if (encoding === 0) {
-			col += Math.max(1, grid.widthAt(index)) - 1;
+			col += Math.max(1, widthAt(grid, index)) - 1;
 		}
 	}
 
@@ -1068,7 +1081,7 @@ function getLineLength(grid: CellGrid, row: number): number {
 	for (let col = grid.cols - 1; col >= 0; col--) {
 		const index = rowStart + col;
 		if (grid.cluster[index] !== 0) {
-			return col + Math.max(1, grid.widthAt(index));
+			return col + Math.max(1, widthAt(grid, index));
 		}
 	}
 	return 0;
@@ -1129,73 +1142,6 @@ export class CellContext {
 		this.viewportOffset = viewportOffset;
 	}
 
-	setCaret(x: number, y: number): void {
-		this.caret = {col: x, row: y};
-	}
-
-	drawRect(
-		x: number,
-		y: number,
-		width: number,
-		height: number,
-		background: number | null | undefined | "default" | "inverse",
-	): void {
-		if (background == null) {
-			return;
-		}
-
-		// "default" clears the cells to the terminal's own background (CSS's
-		// Canvas system color), which still OVERWRITES whatever was painted
-		// underneath with an opaque box in the theme's color, whatever that
-		// theme is. "inverse" fills with SGR inverse instead. That is the
-		// Highlight/HighlightText system-color pair, swapping each cell's
-		// colors with no assumption about what they are.
-		// An opaque fill writes one cell everywhere it lands, so it is
-		// clipped once rather than cell by cell. A page's background fills
-		// the whole screen every frame.
-		if (
-			background !== "inverse" &&
-			(background === "default" || background < TRANSPARENCY_UNIT) &&
-			Number.isInteger(x) &&
-			Number.isInteger(y)
-		) {
-			const bg = background === "default" ? 0 : background & COLOR_MASK;
-			const clip = this.clipRect;
-			const offset = this.viewportOffset;
-			const top = Math.max(y, clip?.top ?? y, -offset);
-			const bottom = Math.min(
-				y + height,
-				clip?.bottom ?? y + height,
-				this.rows - offset,
-			);
-			const left = Math.max(x, clip?.left ?? x, 0);
-			const right = Math.min(x + width, clip?.right ?? x + width, this.cols);
-			const grid = this.grid;
-			const attrs = 1 << ATTR.WidthShift;
-			for (let row = top; row < bottom; row++) {
-				const start = (row + offset) * this.cols;
-				for (let index = start + left; index < start + right; index++) {
-					grid.cluster[index] = 0x20;
-					grid.fg[index] = 0;
-					grid.bg[index] = bg;
-					grid.attrs[index] = attrs;
-					grid.border[index] = 0;
-				}
-			}
-			return;
-		}
-
-		const style: CellStyle = background === "inverse"
-			? {inverse: true}
-			: {bg: background === "default" ? 0 : background};
-
-		for (let row = y; row < y + height; row++) {
-			for (let col = x; col < x + width; col++) {
-				setCell(this, row, col, " ", style);
-			}
-		}
-	}
-
 	measureText(text: string): TextMetrics {
 		if (PRINTABLE_ASCII.test(text)) {
 			return {width: text.length};
@@ -1206,256 +1152,344 @@ export class CellContext {
 		}
 		return {width};
 	}
+}
 
-	drawText(text: string, x: number, y: number, style?: CellStyle): void {
-		let currentX = x;
+export function setCaret(context: CellContext, x: number, y: number): void {
+	context.caret = {col: x, row: y};
+}
 
-		if (PRINTABLE_ASCII.test(text)) {
-			for (let i = 0; i < text.length; i++) {
-				if (currentX + 1 > this.cols) {
-					break;
-				}
-				setCell(this, y, currentX, text[i], style);
-				currentX++;
+export function drawRect(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	background: number | null | undefined | "default" | "inverse",
+): void {
+	if (background == null) {
+		return;
+	}
+
+	// "default" clears the cells to the terminal's own background (CSS's
+	// Canvas system color), which still OVERWRITES whatever was painted
+	// underneath with an opaque box in the theme's color, whatever that
+	// theme is. "inverse" fills with SGR inverse instead. That is the
+	// Highlight/HighlightText system-color pair, swapping each cell's
+	// colors with no assumption about what they are.
+	// An opaque fill writes one cell everywhere it lands, so it is
+	// clipped once rather than cell by cell. A page's background fills
+	// the whole screen every frame.
+	if (
+		background !== "inverse" &&
+		(background === "default" || background < TRANSPARENCY_UNIT) &&
+		Number.isInteger(x) &&
+		Number.isInteger(y)
+	) {
+		const bg = background === "default" ? 0 : background & COLOR_MASK;
+		const clip = context.clipRect;
+		const offset = context.viewportOffset;
+		const top = Math.max(y, clip?.top ?? y, -offset);
+		const bottom = Math.min(
+			y + height,
+			clip?.bottom ?? y + height,
+			context.rows - offset,
+		);
+		const left = Math.max(x, clip?.left ?? x, 0);
+		const right = Math.min(x + width, clip?.right ?? x + width, context.cols);
+		const grid = context.grid;
+		const attrs = 1 << ATTR.WidthShift;
+		for (let row = top; row < bottom; row++) {
+			const start = (row + offset) * context.cols;
+			for (let index = start + left; index < start + right; index++) {
+				grid.cluster[index] = 0x20;
+				grid.fg[index] = 0;
+				grid.bg[index] = bg;
+				grid.attrs[index] = attrs;
+				grid.border[index] = 0;
 			}
-			return;
 		}
+		return;
+	}
 
-		for (const char of getGraphemes(text)) {
-			// Never write a control char to a cell. A cell is a column, and a
-			// control byte must be rejected before it takes one, or it survives
-			// to the output as a raw escape byte (injection from untrusted
-			// text).
-			if (isControlByte(char.codePointAt(0)!)) {
-				continue;
-			}
+	const style: CellStyle = background === "inverse"
+		? {inverse: true}
+		: {bg: background === "default" ? 0 : background};
 
-			const width = getStringWidth(char);
+	for (let row = y; row < y + height; row++) {
+		for (let col = x; col < x + width; col++) {
+			setCell(context, row, col, " ", style);
+		}
+	}
+}
 
-			// A soft hyphen or a lone format character has no width and takes
-			// no cell. A cell holding one would send every walk over the row
-			// backwards.
-			if (width === 0) {
-				continue;
-			}
-			if (currentX + width > this.cols) {
+export function drawText(
+	context: CellContext,
+	text: string,
+	x: number,
+	y: number,
+	style?: CellStyle,
+): void {
+	let currentX = x;
+
+	if (PRINTABLE_ASCII.test(text)) {
+		for (let i = 0; i < text.length; i++) {
+			if (currentX + 1 > context.cols) {
 				break;
 			}
-
-			setCell(
-				this,
-				y,
-				currentX,
-				char.length > 1 ? char.replace(INVISIBLE_IN_CLUSTER, "") : char,
-				style,
-			);
-			currentX += width;
+			setCell(context, y, currentX, text[i], style);
+			currentX++;
 		}
+		return;
 	}
 
-	/**
-	 * Another grid's cells with its top left at (x, y). An empty cell
-	 * leaves what is under it, one with no background takes the
-	 * background under it, and one in the default foreground takes
-	 * `fallback.fg`.
-	 */
-	drawGrid(source: CellGrid, x: number, y: number, fallback?: CellStyle): void {
-		const grid = this.grid;
-		const fg = (fallback?.fg ?? 0) & COLOR_MASK;
-		for (let row = 0; row < source.rows; row++) {
-			for (let col = 0; col < source.cols; col++) {
-				const from = row * source.cols + col;
-				if (source.cluster[from] === 0) {
-					continue;
-				}
-				const index = getGuardedWriteIndex(this, y + row, x + col);
-				if (index < 0) {
-					continue;
-				}
-				const under = grid.cluster[index] !== 0 ? grid.bg[index] : 0;
-				grid.setFrom(index, source, from);
-				grid.settleWide(index, grid.widthAt(index));
-				if (grid.fg[index] === 0) {
-					grid.fg[index] = fg;
-				}
-				if (grid.bg[index] === 0) {
-					grid.bg[index] = under;
-				}
-			}
+	for (const char of getGraphemes(text)) {
+		// Never write a control char to a cell. A cell is a column, and a
+		// control byte must be rejected before it takes one, or it survives
+		// to the output as a raw escape byte (injection from untrusted
+		// text).
+		if (isControlByte(char.codePointAt(0)!)) {
+			continue;
 		}
-	}
 
-	drawDecoration(x: number, y: number, width: number, style: CellStyle): void {
-		// An edge across existing glyphs, which drawText cannot draw because it
-		// overwrites. The style's fg is the row's default. A cell with its own
-		// (::selection, ::placeholder, an authored color) keeps it.
-		const grid = this.grid;
-		const edgeBit =
-			(style.underline ? ATTR.Underline : 0) |
-			(style.overline ? ATTR.Overline : 0);
-		if (edgeBit === 0) {
-			return;
+		const width = getStringWidth(char);
+
+		// A soft hyphen or a lone format character has no width and takes
+		// no cell. A cell holding one would send every walk over the row
+		// backwards.
+		if (width === 0) {
+			continue;
 		}
-		for (let col = x; col < x + width; col++) {
-			const index = getGuardedWriteIndex(this, y, col);
+		if (currentX + width > context.cols) {
+			break;
+		}
+
+		setCell(
+			context,
+			y,
+			currentX,
+			char.length > 1 ? char.replace(INVISIBLE_IN_CLUSTER, "") : char,
+			style,
+		);
+		currentX += width;
+	}
+}
+
+/**
+ * Another grid's cells with its top left at (x, y). An empty cell
+ * leaves what is under it, one with no background takes the
+ * background under it, and one in the default foreground takes
+ * `fallback.fg`.
+ */
+export function drawGrid(
+	context: CellContext,
+	source: CellGrid,
+	x: number,
+	y: number,
+	fallback?: CellStyle,
+): void {
+	const grid = context.grid;
+	const fg = (fallback?.fg ?? 0) & COLOR_MASK;
+	for (let row = 0; row < source.rows; row++) {
+		for (let col = 0; col < source.cols; col++) {
+			const from = row * source.cols + col;
+			if (source.cluster[from] === 0) {
+				continue;
+			}
+			const index = getGuardedWriteIndex(context, y + row, x + col);
 			if (index < 0) {
 				continue;
 			}
-			if (grid.cluster[index] !== 0) {
-				let attrs = grid.attrs[index] | edgeBit;
-				if (style.dim !== undefined) {
-					attrs = style.dim ? attrs | ATTR.Dim : attrs & ~ATTR.Dim;
-				}
-				grid.attrs[index] = attrs;
-			} else {
-				grid.cluster[index] = 0x20;
-				grid.fg[index] = (style.fg ?? 0) & COLOR_MASK;
-				grid.bg[index] = 0;
-				grid.attrs[index] =
-					edgeBit | (style.dim ? ATTR.Dim : 0) | (1 << ATTR.WidthShift);
+			const under = grid.cluster[index] !== 0 ? grid.bg[index] : 0;
+			setFrom(grid, index, source, from);
+			settleWide(grid, index, widthAt(grid, index));
+			if (grid.fg[index] === 0) {
+				grid.fg[index] = fg;
+			}
+			if (grid.bg[index] === 0) {
+				grid.bg[index] = under;
 			}
-			// The edge replaces a box-drawing glyph with the space that cell
-			// measures as. An outline is a line of its own, not a junction.
-			grid.border[index] = 0;
 		}
 	}
+}
 
-	drawLine(
-		x1: number,
-		y1: number,
-		x2: number,
-		y2: number,
-		line: LineStyle,
-	): void {
-		// Axis-aligned, half-open. The stroke runs from the start cell toward
-		// the end coordinate and stops short of it, so a one-cell vertical is
-		// (x, y, x, y + 1) and equal points stroke nothing. That is also what
-		// disambiguates the axis of a one-cell line.
-		if ((x1 !== x2 && y1 !== y2) || (x1 === x2 && y1 === y2)) {
-			return;
-		}
-		const bits = LINE_BITS[line.style];
-		if (bits === 0) {
-			return;
-		}
-		const style: CellStyle | undefined = line.color != null
-			? {fg: line.color}
-			: undefined;
-		const rounded = BORDER_EDGE_STYLE.Rounded;
-
-		// Each cell records which way the stroke LEAVES it, and an end cell
-		// keeps only its inward half. The stroke enters and stops at center.
-		// Two lines meeting in a cell then join into the corner, the tee or the
-		// cross without either knowing the other exists. A "square" cap
-		// projects through its cell instead, for a free end. A "round" cap is
-		// recorded on the half-stroke, which is how a corner cell learns it
-		// curves.
-		if (y1 === y2) {
-			const a = Math.min(x1, x2);
-			const b = Math.max(x1, x2) - 1;
-			const capA = x1 <= x2 ? line.startCap : line.endCap;
-			const capB = x1 <= x2 ? line.endCap : line.startCap;
-			for (let col = a; col <= b; col++) {
-				let toRight = col < b || capB === "square" ? bits : 0;
-				let toLeft = col > a || capA === "square" ? bits : 0;
-				if (col === a && capA === "round") {
-					toRight |= rounded;
-				}
-				if (col === b && capB === "round") {
-					toLeft |= rounded;
-				}
-				setBorderCell(
-					this,
-					col,
-					y1,
-					(toRight << BORDER_SHIFT.Right) | (toLeft << BORDER_SHIFT.Left),
-					style,
-				);
+export function drawDecoration(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	style: CellStyle,
+): void {
+	// An edge across existing glyphs, which drawText cannot draw because it
+	// overwrites. The style's fg is the row's default. A cell with its own
+	// (::selection, ::placeholder, an authored color) keeps it.
+	const grid = context.grid;
+	const edgeBit =
+		(style.underline ? ATTR.Underline : 0) |
+		(style.overline ? ATTR.Overline : 0);
+	if (edgeBit === 0) {
+		return;
+	}
+	for (let col = x; col < x + width; col++) {
+		const index = getGuardedWriteIndex(context, y, col);
+		if (index < 0) {
+			continue;
+		}
+		if (grid.cluster[index] !== 0) {
+			let attrs = grid.attrs[index] | edgeBit;
+			if (style.dim !== undefined) {
+				attrs = style.dim ? attrs | ATTR.Dim : attrs & ~ATTR.Dim;
 			}
+			grid.attrs[index] = attrs;
 		} else {
-			const a = Math.min(y1, y2);
-			const b = Math.max(y1, y2) - 1;
-			const capA = y1 <= y2 ? line.startCap : line.endCap;
-			const capB = y1 <= y2 ? line.endCap : line.startCap;
-			for (let row = a; row <= b; row++) {
-				let down = row < b || capB === "square" ? bits : 0;
-				let up = row > a || capA === "square" ? bits : 0;
-				if (row === a && capA === "round") {
-					down |= rounded;
-				}
-				if (row === b && capB === "round") {
-					up |= rounded;
-				}
-				setBorderCell(
-					this,
-					x1,
-					row,
-					(down << BORDER_SHIFT.Bottom) | (up << BORDER_SHIFT.Top),
-					style,
-				);
-			}
+			grid.cluster[index] = 0x20;
+			grid.fg[index] = (style.fg ?? 0) & COLOR_MASK;
+			grid.bg[index] = 0;
+			grid.attrs[index] =
+				edgeBit | (style.dim ? ATTR.Dim : 0) | (1 << ATTR.WidthShift);
 		}
+		// The edge replaces a box-drawing glyph with the space that cell
+		// measures as. An outline is a line of its own, not a junction.
+		grid.border[index] = 0;
 	}
+}
 
-	drawBox(
-		x: number,
-		y: number,
-		width: number,
-		height: number,
-		sides: {
-			top?: LineStyle;
-			right?: LineStyle;
-			bottom?: LineStyle;
-			left?: LineStyle;
-			topLeft?: "round";
-			topRight?: "round";
-			bottomRight?: "round";
-			bottomLeft?: "round";
-		},
-	): void {
-		if (width < 1 || height < 1) {
-			return;
-		}
-		const r = x + width - 1;
-		const b = y + height - 1;
-		const cap = (
-			adjacent: LineStyle | undefined,
-			corner: "round" | undefined,
-		): "round" | "square" | undefined => (adjacent ? corner : "square");
-
-		// Verticals first. A corner cell's glyph spans two sides but holds one
-		// color, and the horizontal side's wins, which is the closest a cell
-		// gets to the browser's diagonal miter.
-		if (sides.left) {
-			this.drawLine(x, y, x, b + 1, {
-				...sides.left,
-				startCap: cap(sides.top, sides.topLeft),
-				endCap: cap(sides.bottom, sides.bottomLeft),
-			});
-		}
-		if (sides.right) {
-			this.drawLine(r, y, r, b + 1, {
-				...sides.right,
-				startCap: cap(sides.top, sides.topRight),
-				endCap: cap(sides.bottom, sides.bottomRight),
-			});
-		}
-		if (sides.top) {
-			this.drawLine(x, y, r + 1, y, {
-				...sides.top,
-				startCap: cap(sides.left, sides.topLeft),
-				endCap: cap(sides.right, sides.topRight),
-			});
-		}
-		// A 1-row box's bottom shares the top's row, and the top already drew
-		// it.
-		if (sides.bottom && !(b === y && sides.top)) {
-			this.drawLine(x, b, r + 1, b, {
-				...sides.bottom,
-				startCap: cap(sides.left, sides.bottomLeft),
-				endCap: cap(sides.right, sides.bottomRight),
-			});
+export function drawLine(
+	context: CellContext,
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+	line: LineStyle,
+): void {
+	// Axis-aligned, half-open. The stroke runs from the start cell toward
+	// the end coordinate and stops short of it, so a one-cell vertical is
+	// (x, y, x, y + 1) and equal points stroke nothing. That is also what
+	// disambiguates the axis of a one-cell line.
+	if ((x1 !== x2 && y1 !== y2) || (x1 === x2 && y1 === y2)) {
+		return;
+	}
+	const bits = LINE_BITS[line.style];
+	if (bits === 0) {
+		return;
+	}
+	const style: CellStyle | undefined = line.color != null
+		? {fg: line.color}
+		: undefined;
+	const rounded = BORDER_EDGE_STYLE.Rounded;
+
+	// Each cell records which way the stroke LEAVES it, and an end cell
+	// keeps only its inward half. The stroke enters and stops at center.
+	// Two lines meeting in a cell then join into the corner, the tee or the
+	// cross without either knowing the other exists. A "square" cap
+	// projects through its cell instead, for a free end. A "round" cap is
+	// recorded on the half-stroke, which is how a corner cell learns it
+	// curves.
+	if (y1 === y2) {
+		const a = Math.min(x1, x2);
+		const b = Math.max(x1, x2) - 1;
+		const capA = x1 <= x2 ? line.startCap : line.endCap;
+		const capB = x1 <= x2 ? line.endCap : line.startCap;
+		for (let col = a; col <= b; col++) {
+			let toRight = col < b || capB === "square" ? bits : 0;
+			let toLeft = col > a || capA === "square" ? bits : 0;
+			if (col === a && capA === "round") {
+				toRight |= rounded;
+			}
+			if (col === b && capB === "round") {
+				toLeft |= rounded;
+			}
+			setBorderCell(
+				context,
+				col,
+				y1,
+				(toRight << BORDER_SHIFT.Right) | (toLeft << BORDER_SHIFT.Left),
+				style,
+			);
 		}
+	} else {
+		const a = Math.min(y1, y2);
+		const b = Math.max(y1, y2) - 1;
+		const capA = y1 <= y2 ? line.startCap : line.endCap;
+		const capB = y1 <= y2 ? line.endCap : line.startCap;
+		for (let row = a; row <= b; row++) {
+			let down = row < b || capB === "square" ? bits : 0;
+			let up = row > a || capA === "square" ? bits : 0;
+			if (row === a && capA === "round") {
+				down |= rounded;
+			}
+			if (row === b && capB === "round") {
+				up |= rounded;
+			}
+			setBorderCell(
+				context,
+				x1,
+				row,
+				(down << BORDER_SHIFT.Bottom) | (up << BORDER_SHIFT.Top),
+				style,
+			);
+		}
+	}
+}
+
+export function drawBox(
+	context: CellContext,
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+	sides: {
+		top?: LineStyle;
+		right?: LineStyle;
+		bottom?: LineStyle;
+		left?: LineStyle;
+		topLeft?: "round";
+		topRight?: "round";
+		bottomRight?: "round";
+		bottomLeft?: "round";
+	},
+): void {
+	if (width < 1 || height < 1) {
+		return;
+	}
+	const r = x + width - 1;
+	const b = y + height - 1;
+	const cap = (
+		adjacent: LineStyle | undefined,
+		corner: "round" | undefined,
+	): "round" | "square" | undefined => (adjacent ? corner : "square");
+
+	// Verticals first. A corner cell's glyph spans two sides but holds one
+	// color, and the horizontal side's wins, which is the closest a cell
+	// gets to the browser's diagonal miter.
+	if (sides.left) {
+		drawLine(context, x, y, x, b + 1, {
+			...sides.left,
+			startCap: cap(sides.top, sides.topLeft),
+			endCap: cap(sides.bottom, sides.bottomLeft),
+		});
+	}
+	if (sides.right) {
+		drawLine(context, r, y, r, b + 1, {
+			...sides.right,
+			startCap: cap(sides.top, sides.topRight),
+			endCap: cap(sides.bottom, sides.bottomRight),
+		});
+	}
+	if (sides.top) {
+		drawLine(context, x, y, r + 1, y, {
+			...sides.top,
+			startCap: cap(sides.left, sides.topLeft),
+			endCap: cap(sides.right, sides.topRight),
+		});
+	}
+	// A 1-row box's bottom shares the top's row, and the top already drew
+	// it.
+	if (sides.bottom && !(b === y && sides.top)) {
+		drawLine(context, x, b, r + 1, b, {
+			...sides.bottom,
+			startCap: cap(sides.left, sides.bottomLeft),
+			endCap: cap(sides.right, sides.bottomRight),
+		});
 	}
 }
 
@@ -1727,7 +1761,7 @@ function safeProbeCell(grid: CellGrid): {row: number; col: number} | null {
 			}
 			// A wide glyph covers its continuation column too, which the grid
 			// leaves empty. The span runs on across it.
-			col += border[index] > 0 ? 1 : Math.max(1, grid.widthAt(index));
+			col += border[index] > 0 ? 1 : Math.max(1, widthAt(grid, index));
 			if (
 				col - spanStart >= PROBE_RESIDUE_COLUMNS &&
 				spanStart + PROBE_RESIDUE_COLUMNS < cols
@@ -1877,7 +1911,7 @@ function generateANSI(
 				: decodeGrapheme(cluster[index]);
 			output += writer.text(glyph).take();
 
-			const width = grid.widthAt(index);
+			const width = widthAt(grid, index);
 
 			// Only clusters terminals disagree about are probed. The char test
 			// keeps ASCII from reaching isWidthUncertain, and a border glyph is
@@ -2153,11 +2187,11 @@ export function insetShiftPays(
 				if (
 					vacated
 						? prev.cluster[index] !== 0
-						: !prev.equalCells(index, prev, source)
+						: !equalCells(prev, index, prev, source)
 				) {
 					beside += cost(index, col);
 				}
-			} else if (!vacated && !prev.equalCells(index, prev, source)) {
+			} else if (!vacated && !equalCells(prev, index, prev, source)) {
 				inside += cost(source, col);
 			}
 		}
@@ -2284,13 +2318,13 @@ export function beginFrame(
 		const stop = bandEnd * cols;
 		const shift = Math.abs(delta) * cols;
 		if (shift >= stop - start) {
-			prev.clearRange(start, stop);
+			clearRange(prev, start, stop);
 		} else if (delta > 0) {
-			prev.moveRange(start, start + shift, stop);
-			prev.clearRange(stop - shift, stop);
+			moveRange(prev, start, start + shift, stop);
+			clearRange(prev, stop - shift, stop);
 		} else {
-			prev.moveRange(start + shift, start, stop - shift);
-			prev.clearRange(start, start + shift);
+			moveRange(prev, start + shift, start, stop - shift);
+			clearRange(prev, start, start + shift);
 		}
 		const shiftedLines = new Set<number>();
 		for (const row of framebuffer.renderedLines) {
@@ -2340,7 +2374,7 @@ export function beginFrame(
 			diff = new CellGrid(frameRows, cols);
 			framebuffer.diff = diff;
 		} else {
-			diff.clear();
+			clearGrid(diff);
 		}
 
 		const prev = framebuffer.prev;
@@ -2348,7 +2382,7 @@ export function beginFrame(
 			framebuffer.exchange !== null &&
 			!framebuffer.exchange.clusterWidthsNegotiated();
 		if (prev === null || overflowing) {
-			diff.copyFrom(next, {to: 0, start: 0, end: frameRows * cols});
+			copyGridFrom(diff, next, {to: 0, start: 0, end: frameRows * cols});
 		} else {
 			const prevRows = prev.rows;
 			const prevCols = prev.cols;
@@ -2395,12 +2429,12 @@ export function beginFrame(
 						let empty = true;
 						for (let c = 0; c < cols; c++) {
 							if (next.cluster[nextRow + c] !== 0) {
-								diff.setFrom(nextRow + c, next, nextRow + c);
+								setFrom(diff, nextRow + c, next, nextRow + c);
 								empty = false;
 							}
 						}
 						if (empty) {
-							diff.setBlank(nextRow);
+							setBlank(diff, nextRow);
 						}
 						continue;
 					}
@@ -2412,7 +2446,7 @@ export function beginFrame(
 
 					if (!rowInPrev || col >= prevCols) {
 						if (nextChar !== 0) {
-							diff.setFrom(n, next, n);
+							setFrom(diff, n, next, n);
 						}
 						continue;
 					}
@@ -2422,15 +2456,15 @@ export function beginFrame(
 
 					if (prevChar === 0) {
 						if (nextChar !== 0) {
-							diff.setFrom(n, next, n);
+							setFrom(diff, n, next, n);
 						}
 					} else if (nextChar === 0) {
 						// A cell the frame no longer paints has to be
 						// erased, not merely skipped. The terminal still
 						// shows the old glyph there.
-						diff.setBlank(n);
-					} else if (!next.equalCells(n, prev, p)) {
-						diff.setFrom(n, next, n);
+						setBlank(diff, n);
+					} else if (!equalCells(next, n, prev, p)) {
+						setFrom(diff, n, next, n);
 					}
 				}
 			}
@@ -2468,7 +2502,7 @@ export function beginFrame(
 					}
 				}
 				if (empty) {
-					diff.setBlank(rowStart);
+					setBlank(diff, rowStart);
 				}
 			}
 		}
@@ -2495,7 +2529,7 @@ export function beginFrame(
 					for (let col = 0; col < cols; col++) {
 						const index = rowStart + col;
 						if (next.cluster[index] !== 0) {
-							diff.setFrom(index, next, index);
+							setFrom(diff, index, next, index);
 							hasContent = true;
 						}
 					}
@@ -2621,7 +2655,7 @@ export function beginFrame(
 		// still on screen are kept. The rest scrolled into the scrollback.
 		const retired = framebuffer.prev;
 		if (overflowing) {
-			framebuffer.prev = next.bottomRows(framebuffer.rowCount);
+			framebuffer.prev = bottomRows(next, framebuffer.rowCount);
 			framebuffer.spare = next;
 		} else {
 			framebuffer.prev = next;
@@ -2709,7 +2743,7 @@ function hasDisputedCellBefore(
 	nextRow: number,
 ): boolean {
 	let last = cols - 1;
-	while (last >= 0 && next.equalCells(nextRow + last, prev, prevRow + last)) {
+	while (last >= 0 && equalCells(next, nextRow + last, prev, prevRow + last)) {
 		last--;
 	}
 	for (let col = 0; col <= last; col++) {
@@ -2727,7 +2761,7 @@ function takeGrid(screen: Framebuffer, rows: number, cols: number): CellGrid {
 	const spare = screen.spare;
 	if (spare !== null && spare.rows === rows && spare.cols === cols) {
 		screen.spare = null;
-		spare.clear();
+		clearGrid(spare);
 		return spare;
 	}
 	return new CellGrid(rows, cols);
diff --git a/src/internal/gradients.ts b/src/internal/gradients.ts
index 509fdda5..f48b97f7 100644
--- a/src/internal/gradients.ts
+++ b/src/internal/gradients.ts
@@ -11,7 +11,7 @@ import {
 	parseColor,
 	toCellColor,
 } from "./cssvalues.ts";
-import type {CellContext} from "./framebuffer.ts";
+import {type CellContext, drawRect} from "./framebuffer.ts";
 
 /**
  * Where a stop sits: CSS pixels, a percentage of the gradient line, a
@@ -430,14 +430,14 @@ export function renderGradient(
 		for (let col = 0; col < cols; col++) {
 			const color = colorAt(col + 0.5 - startX, 0);
 			if (color !== null) {
-				ctx.drawRect(left + col, top, 1, rows, color);
+				drawRect(ctx, left + col, top, 1, rows, color);
 			}
 		}
 	} else if (dx === 0) {
 		for (let row = 0; row < rows; row++) {
 			const color = colorAt(0, (row + 0.5) * aspect - startY);
 			if (color !== null) {
-				ctx.drawRect(left, top + row, cols, 1, color);
+				drawRect(ctx, left, top + row, cols, 1, color);
 			}
 		}
 	} else {
@@ -446,7 +446,7 @@ export function renderGradient(
 			for (let col = 0; col < cols; col++) {
 				const color = colorAt(col + 0.5 - startX, y);
 				if (color !== null) {
-					ctx.drawRect(left + col, top + row, 1, 1, color);
+					drawRect(ctx, left + col, top + row, 1, 1, color);
 				}
 			}
 		}
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 199c644a..7913c743 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -445,116 +445,117 @@ export class Input {
 	}
 
 	dispose(): void {}
+}
 
-	dispatch(item: WireKey[] | WireMouse | WirePaste): void {
-		// Pseudo-state and the selection move with no mutation record.
-		invalidate(this.framebuffer);
-		if (Array.isArray(item)) {
-			deliverKeys(this, item);
-			return;
-		}
-		if (item.kind === "mouse") {
-			deliverMouseReport(this, item);
-			return;
-		}
-		deliverPaste(this, item.text);
+export function dispatchInput(
+	input: Input,
+	item: WireKey[] | WireMouse | WirePaste,
+): void {
+	// Pseudo-state and the selection move with no mutation record.
+	invalidate(input.framebuffer);
+	if (Array.isArray(item)) {
+		deliverKeys(input, item);
+		return;
+	}
+	if (item.kind === "mouse") {
+		deliverMouseReport(input, item);
+		return;
 	}
+	deliverPaste(input, item.text);
+}
 
-	/**
-	 * One hit-test at the last reported position, at the start of the frame.
-	 */
-	resolvePendingHover(): void {
-		const pending = this.pendingHover;
-		if (pending === null) {
-			return;
-		}
-		this.pendingHover = null;
-		const {x, y, shiftKey, altKey, ctrlKey} = pending;
-		processPendingPointerCapture(this);
-		const buttons = getPointerState(this.document).buttons;
-		const target =
-			getPointerState(this.document).active ??
-			(elementAtDocumentPoint(this.document, x, y, null) || this.document.body);
-		const previous = this.hoverElement;
-		const init = {
-			button: 0,
-			buttons,
-			...getClientPoint(this, x, y),
-			...getScreenPoint(this, x, y),
-			shiftKey,
-			altKey,
-			ctrlKey,
+/**
+ * One hit-test at the last reported position, at the start of the frame.
+ */
+export function resolvePendingHover(input: Input): void {
+	const pending = input.pendingHover;
+	if (pending === null) {
+		return;
+	}
+	input.pendingHover = null;
+	const {x, y, shiftKey, altKey, ctrlKey} = pending;
+	processPendingPointerCapture(input);
+	const buttons = getPointerState(input.document).buttons;
+	const target =
+		getPointerState(input.document).active ??
+		(elementAtDocumentPoint(input.document, x, y, null) || input.document.body);
+	const previous = input.hoverElement;
+	const init = {
+		button: 0,
+		buttons,
+		...getClientPoint(input, x, y),
+		...getScreenPoint(input, x, y),
+		shiftKey,
+		altKey,
+		ctrlKey,
+	};
+	if (target !== previous) {
+		input.hoverElement = target;
+		setHoveredElement(input.document, target);
+		handleHoverChange(input.cascade, previous, target);
+		const getChain = (element: Element | null): Element[] => {
+			const chain: Element[] = [];
+			for (
+				let node: Element | null = element; node; node = flatParentElement(node)
+			) {
+				chain.push(node);
+			}
+			return chain;
 		};
-		if (target !== previous) {
-			this.hoverElement = target;
-			setHoveredElement(this.document, target);
-			handleHoverChange(this.cascade, previous, target);
-			const getChain = (element: Element | null): Element[] => {
-				const chain: Element[] = [];
-				for (
-					let node: Element | null = element;
-					node;
-					node = flatParentElement(node)
-				) {
-					chain.push(node);
-				}
-				return chain;
+		const previousChain = getChain(previous);
+		const targetChain = getChain(target);
+		const previousSet = new Set(previousChain);
+		const targetSet = new Set(targetChain);
+		const leaving = previousChain.filter((node) => !targetSet.has(node));
+		const entering = targetChain.filter((node) => !previousSet.has(node));
+		// Pointer Events' order, then UI Events' compatibility mouse
+		// events in the same order: out, leave (exited element up), over,
+		// enter (outermost entered ancestor down), then the move.
+		for (const kind of ["pointer", "mouse"] as const) {
+			const fire = (type: string, node: Element, extra: object): void => {
+				dispatchMouseLike(input, kind, `${kind}${type}`, node, {
+					...init,
+					...extra,
+				});
 			};
-			const previousChain = getChain(previous);
-			const targetChain = getChain(target);
-			const previousSet = new Set(previousChain);
-			const targetSet = new Set(targetChain);
-			const leaving = previousChain.filter((node) => !targetSet.has(node));
-			const entering = targetChain.filter((node) => !previousSet.has(node));
-			// Pointer Events' order, then UI Events' compatibility mouse
-			// events in the same order: out, leave (exited element up), over,
-			// enter (outermost entered ancestor down), then the move.
-			for (const kind of ["pointer", "mouse"] as const) {
-				const fire = (type: string, node: Element, extra: object): void => {
-					dispatchMouseLike(this, kind, `${kind}${type}`, node, {
-						...init,
-						...extra,
-					});
-				};
-				if (previous !== null) {
-					fire("out", previous, {
-						bubbles: true,
-						cancelable: true,
-						composed: true,
-						relatedTarget: target,
-					});
-					for (const node of leaving) {
-						fire("leave", node, {relatedTarget: target});
-					}
-				}
-				fire("over", target, {
+			if (previous !== null) {
+				fire("out", previous, {
 					bubbles: true,
 					cancelable: true,
 					composed: true,
-					relatedTarget: previous,
+					relatedTarget: target,
 				});
-				for (let i = entering.length - 1; i >= 0; i--) {
-					fire("enter", entering[i], {relatedTarget: previous});
+				for (const node of leaving) {
+					fire("leave", node, {relatedTarget: target});
 				}
 			}
-		}
-		if (!pending.quiet) {
-			const last = this.lastMouse;
-			const moveInit = {
-				...init,
-				...getMovement(this, x, y, last),
+			fire("over", target, {
 				bubbles: true,
 				cancelable: true,
 				composed: true,
-			};
-			dispatchMouseLike(this, "pointer", "pointermove", target, {
-				...moveInit,
-				button: -1,
+				relatedTarget: previous,
 			});
-			dispatchMouseLike(this, "mouse", "mousemove", target, moveInit);
-			this.lastMouse = {x, y};
+			for (let i = entering.length - 1; i >= 0; i--) {
+				fire("enter", entering[i], {relatedTarget: previous});
+			}
 		}
 	}
+	if (!pending.quiet) {
+		const last = input.lastMouse;
+		const moveInit = {
+			...init,
+			...getMovement(input, x, y, last),
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+		};
+		dispatchMouseLike(input, "pointer", "pointermove", target, {
+			...moveInit,
+			button: -1,
+		});
+		dispatchMouseLike(input, "mouse", "mousemove", target, moveInit);
+		input.lastMouse = {x, y};
+	}
 }
 
 // Every pointer event the mouse fires carries the same pointer. A
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index b0bf0522..b95c7906 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -51,7 +51,12 @@ import {
 	createStyle,
 	type Edge,
 	type FlexDirection,
+	getChildIndex,
+	getComputedGridTracks,
+	getComputedHeight,
+	getComputedWidth,
 	type Gutter,
+	insertChild,
 	isContainingBlock,
 	type Justify,
 	LayoutNode,
@@ -1049,10 +1054,10 @@ function computePaintExtents(
 		extents.set(node, extent);
 	}
 	let highest = top;
-	let lowest = top + node.getComputedHeight();
+	let lowest = top + getComputedHeight(node);
 	let unstacked = 0;
-	let right = node.getComputedWidth();
-	let bottom = node.getComputedHeight();
+	let right = getComputedWidth(node);
+	let bottom = getComputedHeight(node);
 	const lines = node.style.clipsOverflow || node.measure === null
 		? undefined
 		: getMeasuredLines(layout, node);
@@ -1920,7 +1925,7 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 			}
 			if (containerFlex.children[index] !== layoutNode) {
 				layoutNode.parent?.removeChild(layoutNode);
-				containerFlex.insertChild(layoutNode, index);
+				insertChild(containerFlex, layoutNode, index);
 			}
 			index++;
 			syncRunMembers(layout, entry);
@@ -1945,7 +1950,7 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 			// the position is decided here, with the whole list available.
 			if (containerFlex.children[index] !== layoutNode) {
 				containerFlex.removeChild(layoutNode);
-				containerFlex.insertChild(layoutNode, index);
+				insertChild(containerFlex, layoutNode, index);
 			}
 			index++;
 		}
@@ -2156,7 +2161,8 @@ function addNode(
 					currentParent.removeChild(existingLayoutNode);
 				}
 				// Appended. The container's box list decides the order.
-				parentLayoutNode.insertChild(
+				insertChild(
+					parentLayoutNode,
 					existingLayoutNode,
 					parentLayoutNode.children.length,
 				);
@@ -2323,7 +2329,7 @@ function addTextNode(
 		measureInlineRun(layout, own, width, widthSpace, placing);
 	layout.measureNodes.add(layoutNode);
 
-	parentLayoutNode.insertChild(layoutNode, parentLayoutNode.children.length);
+	insertChild(parentLayoutNode, layoutNode, parentLayoutNode.children.length);
 }
 
 // Sees THROUGH an inline wrapping block-level content (CSS2 §9.2.1.1).
@@ -2607,12 +2613,12 @@ function placeChild(
 	index: number,
 ): void {
 	if (child.parent === parent) {
-		if (parent.getChildIndex(child) === index) {
+		if (getChildIndex(parent, child) === index) {
 			return;
 		}
 		parent.removeChild(child);
 	}
-	parent.insertChild(child, index);
+	insertChild(parent, child, index);
 }
 
 function trackNode(
@@ -3612,8 +3618,8 @@ function collectLeaves(
 						contentHeightMode === "definite" ? contentHeight : Number.NaN,
 					);
 					computePaintExtents(layout, independentFormattingContext, 0);
-					finalContentWidth = independentFormattingContext.getComputedWidth();
-					finalContentHeight = independentFormattingContext.getComputedHeight();
+					finalContentWidth = getComputedWidth(independentFormattingContext);
+					finalContentHeight = getComputedHeight(independentFormattingContext);
 				} else {
 					const contentStart = flatFirstRenderableChild(element);
 					if (contentStart) {
@@ -5031,7 +5037,7 @@ function getStaticPosition(
 			top:
 				offsetTop +
 				previousNode.result.top +
-				previousNode.getComputedHeight() +
+				getComputedHeight(previousNode) +
 				previousNode.result.margin.bottom,
 		};
 	}
@@ -5463,7 +5469,7 @@ export class Layout {
 		if (!layoutNode) {
 			return null;
 		}
-		return layoutNode.getComputedGridTracks(rows)?.sizes ?? null;
+		return getComputedGridTracks(layoutNode, rows)?.sizes ?? null;
 	}
 
 	// The root box's height extended to cover top-layer boxes, which
@@ -5780,8 +5786,8 @@ export class Layout {
 		return new this.domRect(
 			x,
 			y,
-			layoutNode.getComputedWidth(),
-			layoutNode.getComputedHeight(),
+			getComputedWidth(layoutNode),
+			getComputedHeight(layoutNode),
 		);
 	}
 
@@ -7704,10 +7710,9 @@ function measureScrollExtent(
 			bottom = Math.max(bottom, child.result.top + reach.overflowBottom);
 		}
 	}
-	const clientWidth =
-		layoutNode.getComputedWidth() - border.left - border.right;
+	const clientWidth = getComputedWidth(layoutNode) - border.left - border.right;
 	const clientHeight =
-		layoutNode.getComputedHeight() - border.top - border.bottom;
+		getComputedHeight(layoutNode) - border.top - border.bottom;
 	return {
 		width: right === null
 			? null
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index ed56a9f8..c84c5228 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -543,15 +543,6 @@ export class LayoutNode {
 		this.invalidate();
 	}
 
-	insertChild(child: LayoutNode, index: number): void {
-		child.parent = this;
-		this.children.splice(index, 0, child);
-		if (child.outOfFlowCount !== 0) {
-			countOutOfFlow(this, child.outOfFlowCount);
-		}
-		invalidateAncestors(this);
-	}
-
 	removeChild(child: LayoutNode): void {
 		const index = this.children.indexOf(child);
 		if (index !== -1) {
@@ -564,38 +555,11 @@ export class LayoutNode {
 		}
 	}
 
-	// Searches from the tail. Callers mostly ask about the child they just
-	// appended.
-	getChildIndex(child: LayoutNode): number {
-		return this.children.lastIndexOf(child);
-	}
-
 	invalidate(): void {
 		this.stale = true;
 		invalidateAncestors(this);
 	}
 
-	getComputedGridTracks(
-		rows: boolean,
-	): {sizes: number[]; offset: number} | null {
-		const sizes = rows ? this.result.gridRows : this.result.gridColumns;
-		if (!sizes) {
-			return null;
-		}
-		return {
-			sizes,
-			offset: rows ? this.result.gridRowOffset : this.result.gridColumnOffset,
-		};
-	}
-
-	getComputedWidth(): number {
-		return !Number.isNaN(this.result.width) ? this.result.width : 0;
-	}
-
-	getComputedHeight(): number {
-		return !Number.isNaN(this.result.height) ? this.result.height : 0;
-	}
-
 	performLayout(ownerWidth: number, ownerHeight: number): void {
 		const width = resolveValue(this.style.width, ownerWidth);
 		const height = resolveValue(this.style.height, ownerHeight);
@@ -636,6 +600,54 @@ export class LayoutNode {
 	}
 }
 
+export function insertChild(
+	layoutNode: LayoutNode,
+	child: LayoutNode,
+	index: number,
+): void {
+	child.parent = layoutNode;
+	layoutNode.children.splice(index, 0, child);
+	if (child.outOfFlowCount !== 0) {
+		countOutOfFlow(layoutNode, child.outOfFlowCount);
+	}
+	invalidateAncestors(layoutNode);
+}
+
+// Searches from the tail. Callers mostly ask about the child they just
+// appended.
+export function getChildIndex(
+	layoutNode: LayoutNode,
+	child: LayoutNode,
+): number {
+	return layoutNode.children.lastIndexOf(child);
+}
+
+export function getComputedGridTracks(
+	layoutNode: LayoutNode,
+	rows: boolean,
+): {sizes: number[]; offset: number} | null {
+	const sizes = rows
+		? layoutNode.result.gridRows
+		: layoutNode.result.gridColumns;
+	if (!sizes) {
+		return null;
+	}
+	return {
+		sizes,
+		offset: rows
+			? layoutNode.result.gridRowOffset
+			: layoutNode.result.gridColumnOffset,
+	};
+}
+
+export function getComputedWidth(layoutNode: LayoutNode): number {
+	return !Number.isNaN(layoutNode.result.width) ? layoutNode.result.width : 0;
+}
+
+export function getComputedHeight(layoutNode: LayoutNode): number {
+	return !Number.isNaN(layoutNode.result.height) ? layoutNode.result.height : 0;
+}
+
 // The values and edge records nodes share. Most boxes have one of a few
 // margins, paddings, insets, borders and gaps, nearly all zero or unset,
 // and a node's style is never written once the node holds it. So a
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index c69bbc56..28d4ade1 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -41,9 +41,14 @@ import {getEditingCaretPoint} from "./editing.ts";
 import {
 	type CellContext,
 	type CellStyle,
+	drawBox,
+	drawDecoration,
+	drawRect,
+	drawText,
 	type Framebuffer,
 	insetShiftPays,
 	type LineStyle,
+	setCaret,
 } from "./framebuffer.ts";
 import {
 	type Gradient,
@@ -76,7 +81,11 @@ import {
 	scrolledAncestorRows,
 	snapToClusters,
 } from "./layout.ts";
-import type {LayoutNode} from "./layoutsolver.ts";
+import {
+	getComputedHeight,
+	getComputedWidth,
+	type LayoutNode,
+} from "./layoutsolver.ts";
 import {
 	getMathAlignOffset,
 	isBlankCell,
@@ -626,7 +635,7 @@ function renderBackdrop(element: Element, ctx: CellContext): void {
 		return;
 	}
 	// The viewport in document coordinates.
-	ctx.drawRect(0, -ctx.viewportOffset, ctx.cols, ctx.rows, fill);
+	drawRect(ctx, 0, -ctx.viewportOffset, ctx.cols, ctx.rows, fill);
 }
 
 // CSS layer order: the root's box, negative-z contexts, in-flow
@@ -738,8 +747,8 @@ function paintBlock(
 	const rect: Rect = {
 		left: origin.x,
 		top: origin.y,
-		width: node.getComputedWidth(),
-		height: node.getComputedHeight(),
+		width: getComputedWidth(node),
+		height: getComputedHeight(node),
 	};
 	paintBox(painter, style, [rect], rect, ctx);
 	if (style.visible) {
@@ -940,7 +949,7 @@ function paintOverflowMarkers(
 			continue;
 		}
 		if (markers.left !== "" && span.left < clip.left) {
-			ctx.drawText(markers.left, clip.left, row, style.cell);
+			drawText(ctx, markers.left, clip.left, row, style.cell);
 		}
 		if (
 			markers.right !== "" &&
@@ -948,7 +957,7 @@ function paintOverflowMarkers(
 			Number.isFinite(clip.right)
 		) {
 			const width = ctx.measureText(markers.right).width;
-			ctx.drawText(markers.right, clip.right - width, row, style.cell);
+			drawText(ctx, markers.right, clip.right - width, row, style.cell);
 		}
 	}
 }
@@ -1047,7 +1056,8 @@ function paintBox(
 	}
 	if (style.fill !== null) {
 		for (const fragment of fragments) {
-			ctx.drawRect(
+			drawRect(
+				ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top),
 				Math.round(fragment.width),
@@ -1071,7 +1081,8 @@ function paintBox(
 		}
 	}
 	if (style.border !== null) {
-		ctx.drawBox(
+		drawBox(
+			ctx,
 			Math.round(rect.left),
 			Math.round(rect.top),
 			Math.round(rect.width),
@@ -1100,7 +1111,7 @@ function paintOutline(
 		const ring =
 			(line: LineStyle["style"] | undefined): LineStyle | undefined =>
 				line && {style: line, color};
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(rect.left),
 			Math.round(rect.top),
 			Math.round(rect.width),
@@ -1118,13 +1129,13 @@ function paintOutline(
 		);
 	} else {
 		for (const fragment of fragments) {
-			ctx.drawDecoration(
+			drawDecoration(ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top),
 				Math.round(fragment.width),
 				{overline: true, fg: color},
 			);
-			ctx.drawDecoration(
+			drawDecoration(ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top + fragment.height) - 1,
 				Math.round(fragment.width),
@@ -1189,7 +1200,7 @@ function setCaretAt(
 	const lift = painter.layout.isInFixedSpace(element)
 		? painter.framebuffer.scrollTop
 		: 0;
-	ctx.setCaret(x, y + lift);
+	setCaret(ctx, x, y + lift);
 }
 
 // A run's lines, from the box that broke them. The origin is the run's
@@ -1304,7 +1315,7 @@ function paintInlineBorder(
 	const first = fragments[0];
 	const last = fragments[fragments.length - 1];
 	if (style.border.left) {
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(first.left),
 			Math.round(first.top),
 			1,
@@ -1313,7 +1324,7 @@ function paintInlineBorder(
 		);
 	}
 	if (style.border.right) {
-		ctx.drawBox(
+		drawBox(ctx,
 			Math.round(last.left + last.width) - 1,
 			Math.round(last.top),
 			1,
@@ -1605,7 +1616,8 @@ function paintText(
 			continue;
 		}
 		painted = true;
-		ctx.drawText(
+		drawText(
+			ctx,
 			applyTextTransform(text, style.textTransform),
 			Math.round(fragment.rect.left),
 			Math.round(fragment.rect.top),
@@ -1666,7 +1678,7 @@ function renderOutsideMarker(
 	if (markerX < 0) {
 		return;
 	}
-	ctx.drawText(markerContent, markerX, Math.round(rect.top), markerTextStyle);
+	drawText(ctx, markerContent, markerX, Math.round(rect.top), markerTextStyle);
 }
 
 // A marker's text style, by the object its element's style keeps until it
@@ -1770,7 +1782,7 @@ function renderMath(
 		for (const cell of box.cells[row]) {
 			const style = getMathCellStyle(painter, cell, selections);
 			if (!isBlankCell(cell) || style !== cell.style) {
-				ctx.drawText(cell.text, x, top + row, style ?? undefined);
+				drawText(ctx, cell.text, x, top + row, style ?? undefined);
 			}
 			x += cell.width;
 		}
@@ -2144,7 +2156,8 @@ function renderTextHighlights(
 			continue;
 		}
 		for (const run of painter.layout.getTextSpans(textNode, from, to)) {
-			ctx.drawText(
+			drawText(
+				ctx,
 				applyTextTransform(run.text, textTransform),
 				run.rect.x,
 				run.rect.y,
diff --git a/src/internal/replaced.ts b/src/internal/replaced.ts
index dbd58ff7..ee54096c 100644
--- a/src/internal/replaced.ts
+++ b/src/internal/replaced.ts
@@ -26,6 +26,10 @@ import {
 	CellContext,
 	CellGrid,
 	type CellStyle,
+	cloneGrid,
+	drawBox,
+	drawGrid,
+	drawText,
 	settleBorders,
 } from "./framebuffer.ts";
 import {
@@ -458,7 +462,7 @@ function getBitmapCells(
 				under,
 			);
 			if (half !== null) {
-				cells.drawText(half.char, col, row, half.style);
+				drawText(cells, half.char, col, row, half.style);
 			}
 		}
 	}
@@ -478,7 +482,7 @@ function getSettledGrid(
 	if (cached?.version === content.version) {
 		return cached.grid;
 	}
-	const grid = source.clone();
+	const grid = cloneGrid(source);
 	settleBorders(grid);
 	settledGrids.set(source, {version: content.version, grid});
 	return grid;
@@ -545,7 +549,8 @@ export function renderReplaced(
 		if (content.kind === "text") {
 			drawPlaceholder(content.text, left, top, cols, rows, ctx, style);
 		} else if (content.kind === "grid") {
-			ctx.drawGrid(
+			drawGrid(
+				ctx,
 				getSettledGrid(content, content.fit(cols, rows)),
 				left,
 				top,
@@ -554,7 +559,8 @@ export function renderReplaced(
 		} else if (cols * rows * 2 <= MAX_IMAGE_PIXELS) {
 			// Past the limit the pixels a box samples are more than an image
 			// may hold, and like a canvas past it, the box shows nothing.
-			ctx.drawGrid(
+			drawGrid(
+				ctx,
 				getBitmapCells(element, content, cols, rows, under),
 				left,
 				top,
@@ -593,17 +599,17 @@ function drawPlaceholder(
 	style: CellStyle,
 ): void {
 	if (cols < 3 || rows < 3) {
-		ctx.drawText(fitText(text, cols), left, top, style);
+		drawText(ctx, fitText(text, cols), left, top, style);
 		return;
 	}
 	const side = {style: "solid" as const, color: style.fg};
-	ctx.drawBox(left, top, cols, rows, {
+	drawBox(ctx, left, top, cols, rows, {
 		top: side,
 		right: side,
 		bottom: side,
 		left: side,
 	});
-	ctx.drawText(fitText(text, cols - 2), left + 1, top + 1, style);
+	drawText(ctx, fitText(text, cols - 2), left + 1, top + 1, style);
 }
 
 // The text cut to `width` columns, with an ellipsis where it was cut.
@@ -674,7 +680,7 @@ function paintTextRuns(
 			continue;
 		}
 		const {r, g, b} = run.color;
-		ctx.drawText(run.text, left + col, top + row, {
+		drawText(ctx, run.text, left + col, top + row, {
 			fg: CSSValues.toCellColor(
 				(Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b),
 			),
diff --git a/tests/ansi-fixtures.ts b/tests/ansi-fixtures.ts
index a4a95f76..7712eb56 100644
--- a/tests/ansi-fixtures.ts
+++ b/tests/ansi-fixtures.ts
@@ -8,13 +8,18 @@
  */
 import type {ColorDepth} from "../src/internal/exchange.ts";
 import {
+	type CellContext,
 	type CellStyle,
+	drawBox,
+	drawDecoration,
+	drawRect,
+	drawText,
 	Framebuffer,
 	repaintAll,
 	replaced,
+	setCaret,
 	wrappedRowsAbovePark,
 } from "../src/internal/framebuffer.ts";
-import type {CellContext} from "../src/internal/framebuffer.ts";
 import {renderFrame, renderStatic} from "./test-utils.js";
 
 export interface Scenario {
@@ -63,8 +68,8 @@ function attributeSweep(colorDepth: ColorDepth): string {
 	);
 	return renderFrame(framebuffer, {offset: 0}, (ctx) => {
 		EVERY_ATTRIBUTE.forEach(([label, style], row) => {
-			ctx.drawText(label.padEnd(12), 0, row, style);
-			ctx.drawText("Sample", 14, row, style);
+			drawText(ctx, label.padEnd(12), 0, row, style);
+			drawText(ctx, "Sample", 14, row, style);
 		});
 	});
 }
@@ -81,20 +86,20 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 40, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("AB", 0, 0, {bold: true, underline: true, fg: 0xff0000});
-				ctx.drawText("CD", 2, 0, {underline: true, fg: 0xff0000});
-				ctx.drawText("EF", 4, 0, {
+				drawText(ctx, "AB", 0, 0, {bold: true, underline: true, fg: 0xff0000});
+				drawText(ctx, "CD", 2, 0, {underline: true, fg: 0xff0000});
+				drawText(ctx, "EF", 4, 0, {
 					underline: true,
 					underlineStyle: "double",
 					fg: 0xff0000,
 				});
-				ctx.drawText("GH", 6, 0, {underline: true, fg: 0xff0000});
-				ctx.drawText("IJ", 8, 0, {fg: 0xff0000});
-				ctx.drawText("KL", 10, 0, {});
-				ctx.drawText("MN", 12, 0, {inverse: true, blink: true, dim: true});
-				ctx.drawText("OP", 14, 0, {strikethrough: true, overline: true});
-				ctx.drawText("QR", 16, 0, {italic: true, bg: 0x008000});
-				ctx.drawText("ST", 18, 0);
+				drawText(ctx, "GH", 6, 0, {underline: true, fg: 0xff0000});
+				drawText(ctx, "IJ", 8, 0, {fg: 0xff0000});
+				drawText(ctx, "KL", 10, 0, {});
+				drawText(ctx, "MN", 12, 0, {inverse: true, blink: true, dim: true});
+				drawText(ctx, "OP", 14, 0, {strikethrough: true, overline: true});
+				drawText(ctx, "QR", 16, 0, {italic: true, bg: 0x008000});
+				drawText(ctx, "ST", 18, 0);
 			});
 		},
 	},
@@ -103,16 +108,16 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(8, 30, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("CJK 日本語 end", 0, 0);
-				ctx.drawText("emoji 👍🏽 end", 0, 1);
-				ctx.drawText("zwj 👨‍👩‍👧‍👦 end", 0, 2);
-				ctx.drawText("flag 🇯🇵 end", 0, 3);
-				ctx.drawText("combining éxá end", 0, 4);
-				ctx.drawText("styled 日本", 0, 5, {fg: 0xff0000, bold: true});
+				drawText(ctx, "CJK 日本語 end", 0, 0);
+				drawText(ctx, "emoji 👍🏽 end", 0, 1);
+				drawText(ctx, "zwj 👨‍👩‍👧‍👦 end", 0, 2);
+				drawText(ctx, "flag 🇯🇵 end", 0, 3);
+				drawText(ctx, "combining éxá end", 0, 4);
+				drawText(ctx, "styled 日本", 0, 5, {fg: 0xff0000, bold: true});
 				// A wide glyph at the very last usable column, and one that does
 				// not fit at all.
-				ctx.drawText("日", 28, 6);
-				ctx.drawText("日", 29, 7);
+				drawText(ctx, "日", 28, 6);
+				drawText(ctx, "日", 29, 7);
 			});
 		},
 	},
@@ -124,18 +129,18 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 20, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("ab日本cd", 0, 0);
-				ctx.drawText("日本日本", 0, 1);
+				drawText(ctx, "ab日本cd", 0, 0);
+				drawText(ctx, "日本日本", 0, 1);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("abxycd", 0, 0);
-				ctx.drawText("日xy日本", 0, 1);
+				drawText(ctx, "abxycd", 0, 0);
+				drawText(ctx, "日xy日本", 0, 1);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("ab日本cd", 0, 0);
-				ctx.drawText("日本日本", 0, 1);
+				drawText(ctx, "ab日本cd", 0, 0);
+				drawText(ctx, "日本日本", 0, 1);
 			});
 			return out;
 		},
@@ -145,38 +150,38 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(9, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 6, 3, {
+				drawBox(ctx, 0, 0, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(5, 0, 6, 3, {
+				drawBox(ctx, 5, 0, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(0, 2, 6, 3, {
+				drawBox(ctx, 0, 2, 6, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(5, 2, 6, 3, {
+				drawBox(ctx, 5, 2, 6, 3, {
 					top: {style: "double"},
 					right: {style: "double"},
 					bottom: {style: "double"},
 					left: {style: "double"},
 				});
-				ctx.drawBox(12, 0, 8, 5, {
+				drawBox(ctx, 12, 0, 8, 5, {
 					top: {style: "solid", color: 0x00ff00},
 					right: {style: "solid", color: 0x0000ff},
 					bottom: {style: "solid", color: 0xffff00},
 					left: {style: "solid", color: 0xff00ff},
 				});
-				ctx.drawBox(0, 5, 10, 4, {left: {style: "solid"}});
-				ctx.drawBox(12, 5, 10, 4, {
+				drawBox(ctx, 0, 5, 10, 4, {left: {style: "solid"}});
+				drawBox(ctx, 12, 5, 10, 4, {
 					top: {style: "dashed"},
 					right: {style: "dotted"},
 					bottom: {style: "groove"},
@@ -184,8 +189,8 @@ export const scenarios: Scenario[] = [
 					topLeft: "round",
 					bottomLeft: "round",
 				});
-				ctx.drawText("A1", 1, 1);
-				ctx.drawText("B2", 6, 3);
+				drawText(ctx, "A1", 1, 1);
+				drawText(ctx, "B2", 6, 3);
 			});
 		},
 	},
@@ -194,12 +199,12 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 20, 2, 0x202020);
-				ctx.drawText("selected text", 1, 0);
-				ctx.drawRect(1, 0, 8, 1, "inverse");
-				ctx.drawRect(0, 3, 10, 1, "default");
-				ctx.drawRect(0, 4, 10, 1, null);
-				ctx.drawText("under", 0, 5, {fg: 0x00ff00});
+				drawRect(ctx, 0, 0, 20, 2, 0x202020);
+				drawText(ctx, "selected text", 1, 0);
+				drawRect(ctx, 1, 0, 8, 1, "inverse");
+				drawRect(ctx, 0, 3, 10, 1, "default");
+				drawRect(ctx, 0, 4, 10, 1, null);
+				drawText(ctx, "under", 0, 5, {fg: 0x00ff00});
 			});
 		},
 	},
@@ -212,14 +217,14 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(5, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 12, 1, 0x004000);
-				ctx.drawText("over", 2, 0, {fg: 0xffff00, bold: true});
-				ctx.drawRect(0, 1, 12, 1, 0x400000);
-				ctx.drawText("own", 2, 1, {bg: 0x000040});
-				ctx.drawText("\u0301abc", 0, 2);
-				ctx.drawText("a\u0301bc", 0, 3);
+				drawRect(ctx, 0, 0, 12, 1, 0x004000);
+				drawText(ctx, "over", 2, 0, {fg: 0xffff00, bold: true});
+				drawRect(ctx, 0, 1, 12, 1, 0x400000);
+				drawText(ctx, "own", 2, 1, {bg: 0x000040});
+				drawText(ctx, "\u0301abc", 0, 2);
+				drawText(ctx, "a\u0301bc", 0, 3);
 				// Inheritance reads the cell under the write, not the style run.
-				ctx.drawText("\u0301x", 0, 4, {italic: true});
+				drawText(ctx, "\u0301x", 0, 4, {italic: true});
 			});
 		},
 	},
@@ -231,12 +236,12 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(6, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				ctx.clipRect = {left: 4, top: -Infinity, right: 12, bottom: Infinity};
-				ctx.drawText("horizontally bounded", 0, 0);
+				drawText(ctx, "horizontally bounded", 0, 0);
 				ctx.clipRect = {left: -Infinity, top: 2, right: Infinity, bottom: 4};
-				ctx.drawText("dropped by the row clip", 0, 1);
-				ctx.drawText("kept by the row clip", 0, 2);
+				drawText(ctx, "dropped by the row clip", 0, 1);
+				drawText(ctx, "kept by the row clip", 0, 2);
 				ctx.clipRect = null;
-				ctx.drawText("tail", 0, 5);
+				drawText(ctx, "tail", 0, 5);
 			});
 		},
 	},
@@ -247,21 +252,21 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(4, 20, "rgb");
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("a short line", 0, 0);
-				ctx.drawText("日本語 wide and long", 0, 1);
-				ctx.drawText("x", 0, 2);
-				ctx.drawText("last", 0, 3);
+				drawText(ctx, "a short line", 0, 0);
+				drawText(ctx, "日本語 wide and long", 0, 1);
+				drawText(ctx, "x", 0, 2);
+				drawText(ctx, "last", 0, 3);
 			});
 			const before = [20, 10, 7, 5].map((cols) =>
 				wrappedRowsAbovePark(framebuffer, cols),
 			);
 			// A caret park moves the measurement point.
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("a short line", 0, 0);
-				ctx.drawText("日本語 wide and long", 0, 1);
-				ctx.drawText("x", 0, 2);
-				ctx.drawText("last", 0, 3);
-				ctx.setCaret(3, 1);
+				drawText(ctx, "a short line", 0, 0);
+				drawText(ctx, "日本語 wide and long", 0, 1);
+				drawText(ctx, "x", 0, 2);
+				drawText(ctx, "last", 0, 3);
+				setCaret(ctx, 3, 1);
 			});
 			const after = [20, 10, 7, 5].map((cols) =>
 				wrappedRowsAbovePark(framebuffer, cols),
@@ -274,10 +279,14 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(5, 20, "rgb");
 			return renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("boxed", 0, 1, {fg: 0xff0000, bold: true});
-				ctx.drawDecoration(0, 1, 12, {underline: true, fg: 0x5fafff});
-				ctx.drawText("over", 0, 3, {italic: true});
-				ctx.drawDecoration(0, 3, 12, {overline: true, fg: 0x5fafff, dim: true});
+				drawText(ctx, "boxed", 0, 1, {fg: 0xff0000, bold: true});
+				drawDecoration(ctx, 0, 1, 12, {underline: true, fg: 0x5fafff});
+				drawText(ctx, "over", 0, 3, {italic: true});
+				drawDecoration(ctx, 0, 3, 12, {
+					overline: true,
+					fg: 0x5fafff,
+					dim: true,
+				});
 			});
 		},
 	},
@@ -287,14 +296,15 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(6, 24, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(`row ${row} content`, 0, row);
+					drawText(ctx, `row ${row} content`, 0, row);
 				}
 			});
 			out += "|";
 			// One cell changes.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(
+					drawText(
+						ctx,
 						row === 3 ? "row X content" : `row ${row} content`,
 						0,
 						row,
@@ -305,7 +315,8 @@ export const scenarios: Scenario[] = [
 			// Nothing changes.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				for (let row = 0; row < 6; row++) {
-					ctx.drawText(
+					drawText(
+						ctx,
 						row === 3 ? "row X content" : `row ${row} content`,
 						0,
 						row,
@@ -315,7 +326,7 @@ export const scenarios: Scenario[] = [
 			out += "|";
 			// Content shrinks, leaving stale rows to clear.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("row 0 content", 0, 0);
+				drawText(ctx, "row 0 content", 0, 0);
 			});
 			return out;
 		},
@@ -326,7 +337,7 @@ export const scenarios: Scenario[] = [
 			const framebuffer = new Framebuffer(10, 24, "rgb");
 			const paint = (top: number) => (ctx: CellContext) => {
 				for (let row = 0; row < 10; row++) {
-					ctx.drawText(`line ${top + row}`.padEnd(12), 0, row, {
+					drawText(ctx, `line ${top + row}`.padEnd(12), 0, row, {
 						fg: (top + row) % 2 === 0 ? 0x00ff00 : undefined,
 					});
 				}
@@ -367,19 +378,19 @@ export const scenarios: Scenario[] = [
 				{offset: 0, cursorRow: 0, regionRows: 9},
 				(ctx) => {
 					for (let row = 0; row < 9; row++) {
-						ctx.drawText(`L${row}`, 0, row);
+						drawText(ctx, `L${row}`, 0, row);
 					}
 				},
 			);
 			out += "|";
 			replaced(framebuffer, 2);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("after reset", 0, 0);
+				drawText(ctx, "after reset", 0, 0);
 			});
 			out += "|";
 			repaintAll(framebuffer);
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("after clear", 0, 0);
+				drawText(ctx, "after clear", 0, 0);
 			});
 			return out;
 		},
@@ -389,18 +400,18 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 20, "rgb");
 			let out = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value", 0, 0);
-				ctx.setCaret(5, 0);
+				drawText(ctx, "value", 0, 0);
+				setCaret(ctx, 5, 0);
 			});
 			out += "|";
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value!", 0, 0);
-				ctx.setCaret(6, 0);
+				drawText(ctx, "value!", 0, 0);
+				setCaret(ctx, 6, 0);
 			});
 			out += "|";
 			// Caret goes away: the frame still emits, to re-park the cursor.
 			out += renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("value!", 0, 0);
+				drawText(ctx, "value!", 0, 0);
 			});
 			return out;
 		},
@@ -410,19 +421,19 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(8, 24, "rgb");
 			return renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("visible row", 0, 0);
+				drawText(ctx, "visible row", 0, 0);
 				ctx.clipRect = {left: 2, top: 1, right: 10, bottom: 3};
-				ctx.drawText("clipped horizontally", 0, 1);
-				ctx.drawText("also clipped", 0, 2);
-				ctx.drawText("outside the clip", 0, 3);
-				ctx.drawBox(0, 1, 14, 3, {
+				drawText(ctx, "clipped horizontally", 0, 1);
+				drawText(ctx, "also clipped", 0, 2);
+				drawText(ctx, "outside the clip", 0, 3);
+				drawBox(ctx, 0, 1, 14, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
 				ctx.clipRect = null;
-				ctx.drawText("unclipped again", 0, 4);
+				drawText(ctx, "unclipped again", 0, 4);
 			});
 		},
 	},
@@ -431,21 +442,21 @@ export const scenarios: Scenario[] = [
 		run: (): string => {
 			const framebuffer = new Framebuffer(6, 30, "rgb");
 			let out = renderStatic(framebuffer, {rows: 5}, (ctx) => {
-				ctx.drawText("plain", 0, 0);
-				ctx.drawText("styled", 0, 1, {fg: 0xff0000, bold: true});
-				ctx.drawText("日本語 wide", 0, 2);
-				ctx.drawBox(0, 3, 8, 2, {
+				drawText(ctx, "plain", 0, 0);
+				drawText(ctx, "styled", 0, 1, {fg: 0xff0000, bold: true});
+				drawText(ctx, "日本語 wide", 0, 2);
+				drawBox(ctx, 0, 3, 8, 2, {
 					top: {style: "solid", color: 0x00ff00},
 					right: {style: "solid", color: 0x00ff00},
 					bottom: {style: "solid", color: 0x00ff00},
 					left: {style: "solid", color: 0x00ff00},
 				});
-				ctx.drawText("👍 tail", 10, 3);
+				drawText(ctx, "👍 tail", 10, 3);
 			});
 			out += "|";
 			out += renderStatic(framebuffer, {rows: 2, lineEnding: "\r\n"}, (ctx) => {
-				ctx.drawText("crlf", 0, 0);
-				ctx.drawText("lines", 0, 1);
+				drawText(ctx, "crlf", 0, 0);
+				drawText(ctx, "lines", 0, 1);
 			});
 			return out;
 		},
diff --git a/tests/ansi.test.ts b/tests/ansi.test.ts
index ff5cfcde..544b5d6b 100644
--- a/tests/ansi.test.ts
+++ b/tests/ansi.test.ts
@@ -3,6 +3,10 @@ import {describe, expect, test} from "@b9g/libuild/test";
 import {
 	beginFrame,
 	type CellContext,
+	drawBox,
+	drawLine,
+	drawRect,
+	drawText,
 	Framebuffer,
 	type LineStyle,
 	repaintAll,
@@ -16,10 +20,10 @@ describe("cells through the pen", () => {
 		const family = "\u{1f468}\u200d\u{1f469}\u200d\u{1f467}";
 		const framebuffer = new Framebuffer(1, 8);
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText(family, 0, 0);
-			ctx.drawText("é", 2, 0);
-			ctx.drawText("\u{1f1ef}\u{1f1f5}", 3, 0);
-			ctx.drawText("日", 5, 0);
+			drawText(ctx, family, 0, 0);
+			drawText(ctx, "é", 2, 0);
+			drawText(ctx, "\u{1f1ef}\u{1f1f5}", 3, 0);
+			drawText(ctx, "日", 5, 0);
 		});
 
 		expect(output).toContain(family);
@@ -35,9 +39,9 @@ describe("cells through the pen", () => {
 		const family = "\u{1f468}\u200d\u{1f469}\u200d\u{1f467}";
 		const framebuffer = new Framebuffer(1, 20);
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("M\u200c\u200ba\u200cr\u034fk", 0, 0);
-			ctx.drawText("e\u200dt", 5, 0);
-			ctx.drawText(family, 8, 0);
+			drawText(ctx, "M\u200c\u200ba\u200cr\u034fk", 0, 0);
+			drawText(ctx, "e\u200dt", 5, 0);
+			drawText(ctx, family, 8, 0);
 		});
 
 		expect(stripControlCodes(output)).toContain("Mark");
@@ -67,7 +71,7 @@ describe("Framebuffer", () => {
 
 			// Test basic drawing functionality
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("X", 0, 0);
+				drawText(ctx, "X", 0, 0);
 			});
 
 			expect(output).toContain("X");
@@ -77,9 +81,9 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10, "ansi");
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("X", 0, 0, {fg: 0xcd0000});
-				ctx.drawText("Y", 1, 0, {fg: 0xff0000});
-				ctx.drawText("Z", 2, 0, {bg: 0x7f7f7f});
+				drawText(ctx, "X", 0, 0, {fg: 0xcd0000});
+				drawText(ctx, "Y", 1, 0, {fg: 0xff0000});
+				drawText(ctx, "Z", 2, 0, {bg: 0x7f7f7f});
 			});
 
 			expect(output).toContain("\x1b[31mX");
@@ -93,7 +97,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 1, 2);
+				drawText(ctx, "Hello", 1, 2);
 			});
 
 			expect(output).toContain("Hello");
@@ -103,7 +107,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawRect(0, 0, 3, 2, 0xff0000);
+				drawRect(ctx, 0, 0, 3, 2, 0xff0000);
 			});
 
 			// Should contain background color ANSI codes
@@ -114,7 +118,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Test", 0, 0);
+				drawText(ctx, "Test", 0, 0);
 			});
 
 			// Should contain cursor positioning for offset
@@ -127,7 +131,7 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Test", 0, 0);
+				drawText(ctx, "Test", 0, 0);
 			});
 
 			// Should hide cursor and enable sync mode. The cursor stays hidden
@@ -142,14 +146,14 @@ describe("Framebuffer", () => {
 
 			// First frame
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("First", 0, 0);
+				drawText(ctx, "First", 0, 0);
 			});
 
 			repaintAll(framebuffer);
 
 			// Second frame should render everything (no diff)
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Second", 0, 0);
+				drawText(ctx, "Second", 0, 0);
 			});
 
 			expect(output).toContain("Second");
@@ -165,11 +169,11 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(10, 40);
 
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Initial", 0, 0);
+				drawText(ctx, "Initial", 0, 0);
 			});
 
 			const output = renderFrame(framebuffer, {offset: 3}, (ctx) => {
-				ctx.drawText("Scrolled", 0, 0);
+				drawText(ctx, "Scrolled", 0, 0);
 			});
 
 			expect(output).not.toContain("\x1b[3S");
@@ -181,11 +185,11 @@ describe("Framebuffer", () => {
 			const framebuffer = new Framebuffer(10, 40);
 
 			renderFrame(framebuffer, {offset: 3}, (ctx) => {
-				ctx.drawText("Initial", 0, 0);
+				drawText(ctx, "Initial", 0, 0);
 			});
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Scrolled", 0, 0);
+				drawText(ctx, "Scrolled", 0, 0);
 			});
 
 			expect(output).not.toContain("\x1b[3T");
@@ -198,12 +202,12 @@ describe("Framebuffer", () => {
 
 			// Frame 1
 			renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Frame1", 0, 0);
+				drawText(ctx, "Frame1", 0, 0);
 			});
 
 			// Frame 2 with same offset
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawText("Frame2", 0, 1);
+				drawText(ctx, "Frame2", 0, 1);
 			});
 
 			expect(output).not.toContain("S");
@@ -227,14 +231,14 @@ describe("Framebuffer", () => {
 
 			// First frame
 			renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 0, 0);
-				ctx.drawText("World", 1, 0);
+				drawText(ctx, "Hello", 0, 0);
+				drawText(ctx, "World", 1, 0);
 			});
 
 			// Second frame - only change second line
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawText("Hello", 0, 0); // Same
-				ctx.drawText("Test", 1, 0); // Changed
+				drawText(ctx, "Hello", 0, 0); // Same
+				drawText(ctx, "Test", 1, 0); // Changed
 			});
 
 			// Should contain new content but not duplicate unchanged content
@@ -267,7 +271,7 @@ describe("glyphs where lines meet", () => {
 
 	test("two lines turning in a cell make its corner", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawBox(0, 0, 3, 3, {
+			drawBox(ctx, 0, 0, 3, 3, {
 				top: solid,
 				right: solid,
 				bottom: solid,
@@ -280,18 +284,18 @@ describe("glyphs where lines meet", () => {
 
 	test("a line ending on another's run makes the tee", () => {
 		const output = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(0, 0, 0, 3, solid); // a wall
-			ctx.drawLine(0, 1, 4, 1, solid); // a rule leaving it rightward
+			drawLine(ctx, 0, 0, 0, 3, solid); // a wall
+			drawLine(ctx, 0, 1, 4, 1, solid); // a rule leaving it rightward
 		});
 		expect(output).toContain("├───");
 		const inverted = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(4, 0, 4, 3, solid);
-			ctx.drawLine(0, 1, 5, 1, solid);
+			drawLine(ctx, 4, 0, 4, 3, solid);
+			drawLine(ctx, 0, 1, 5, 1, solid);
 		});
 		expect(inverted).toContain("───┤");
 		const down = glyphs(3, 8, (ctx) => {
-			ctx.drawLine(0, 0, 5, 0, solid);
-			ctx.drawLine(2, 0, 2, 3, solid);
+			drawLine(ctx, 0, 0, 5, 0, solid);
+			drawLine(ctx, 2, 0, 2, 3, solid);
 		});
 		expect(down).toContain("─┬─");
 		expect(down).not.toContain("┼");
@@ -299,16 +303,16 @@ describe("glyphs where lines meet", () => {
 
 	test("two lines crossing make the cross", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 1, 5, 1, solid);
-			ctx.drawLine(2, 0, 2, 3, solid);
+			drawLine(ctx, 0, 1, 5, 1, solid);
+			drawLine(ctx, 2, 0, 2, 3, solid);
 		});
 		expect(output).toContain("─┼─");
 	});
 
 	test("a line is its line, and its ends still draw", () => {
 		const output = glyphs(2, 6, (ctx) => {
-			ctx.drawLine(0, 0, 2, 0, solid);
-			ctx.drawLine(4, 0, 4, 2, solid);
+			drawLine(ctx, 0, 0, 2, 0, solid);
+			drawLine(ctx, 4, 0, 4, 2, solid);
 		});
 		expect(output).toContain("──");
 		expect(output).toContain("│");
@@ -316,8 +320,8 @@ describe("glyphs where lines meet", () => {
 
 	test("the style is the line's", () => {
 		const output = glyphs(2, 8, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "double"});
-			ctx.drawLine(4, 0, 7, 0, {style: "dashed"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "double"});
+			drawLine(ctx, 4, 0, 7, 0, {style: "dashed"});
 		});
 		expect(output).toContain("═");
 		expect(output).toContain("╌");
@@ -325,23 +329,23 @@ describe("glyphs where lines meet", () => {
 
 	test("a round cap bends the corner, not the run", () => {
 		const output = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "solid", startCap: "round"});
-			ctx.drawLine(0, 0, 0, 3, {style: "solid", startCap: "round"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "solid", startCap: "round"});
+			drawLine(ctx, 0, 0, 0, 3, {style: "solid", startCap: "round"});
 		});
 		expect(output).toContain("╭──");
 
 		// The dashes are the border style's; only the turn bends.
 		const dashed = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 0, 3, 0, {style: "dashed", endCap: "round"});
-			ctx.drawLine(2, 0, 2, 3, {style: "dashed", startCap: "round"});
+			drawLine(ctx, 0, 0, 3, 0, {style: "dashed", endCap: "round"});
+			drawLine(ctx, 2, 0, 2, 3, {style: "dashed", startCap: "round"});
 		});
 		expect(dashed).toContain("╮");
 
 		// Unicode draws no rounded double corner, so the radius cannot
 		// reach one.
 		const double = glyphs(3, 6, (ctx) => {
-			ctx.drawLine(0, 2, 3, 2, {style: "double", startCap: "round"});
-			ctx.drawLine(0, 0, 0, 3, {style: "double", endCap: "round"});
+			drawLine(ctx, 0, 2, 3, 2, {style: "double", startCap: "round"});
+			drawLine(ctx, 0, 0, 0, 3, {style: "double", endCap: "round"});
 		});
 		expect(double).toContain("╚══");
 	});
@@ -353,7 +357,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -371,7 +375,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
@@ -390,14 +394,14 @@ describe("Border Drawing", () => {
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				// Draw two overlapping rectangles to create border intersections
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
 
-				ctx.drawBox(2, 0, 4, 3, {
+				drawBox(ctx, 2, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -419,13 +423,13 @@ describe("Border Drawing", () => {
 			// page's verticals, which take the connecting stub: ├ and ┤, as a
 			// browser's touching one-pixel lines would draw.
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 10, 5, {
+				drawBox(ctx, 0, 0, 10, 5, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(1, 2, 8, 1, {top: {style: "solid"}});
+				drawBox(ctx, 1, 2, 8, 1, {top: {style: "solid"}});
 			});
 
 			expect(output).toContain("├────────┤");
@@ -438,13 +442,13 @@ describe("Border Drawing", () => {
 			// parallel strokes, which meet nothing head-on. No junction forms
 			// -- the seam stays ┐┌, the way two browser boxes stay two boxes.
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(0, 0, 4, 3, {
+				drawBox(ctx, 0, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
 					left: {style: "solid"},
 				});
-				ctx.drawBox(4, 0, 4, 3, {
+				drawBox(ctx, 4, 0, 4, 3, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -461,7 +465,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 2}, (ctx) => {
-				ctx.drawBox(0, 0, 3, 2, {
+				drawBox(ctx, 0, 0, 3, 2, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -478,7 +482,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "double"},
 					right: {style: "double"},
 					bottom: {style: "double"},
@@ -496,7 +500,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {});
+				drawBox(ctx, 1, 1, 4, 3, {});
 			});
 
 			// Should not contain any border patterns
@@ -507,7 +511,7 @@ describe("Border Drawing", () => {
 			const framebuffer = new Framebuffer(5, 10);
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-				ctx.drawBox(1, 1, 4, 3, {
+				drawBox(ctx, 1, 1, 4, 3, {
 					top: {style: "solid", color: 0xff0000},
 					right: {style: "solid", color: 0xff0000},
 					bottom: {style: "solid", color: 0xff0000},
@@ -525,7 +529,7 @@ describe("Border Drawing", () => {
 
 			const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 				// Draw border that extends beyond viewport
-				ctx.drawBox(0, 0, 10, 10, {
+				drawBox(ctx, 0, 0, 10, 10, {
 					top: {style: "solid"},
 					right: {style: "solid"},
 					bottom: {style: "solid"},
@@ -546,15 +550,15 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(4, 8);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 0, 6, 4, {
+			drawBox(ctx, 1, 0, 6, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 			// Fill inside to ensure proper spacing
-			ctx.drawText("    ", 2, 1);
-			ctx.drawText("    ", 2, 2);
+			drawText(ctx, "    ", 2, 1);
+			drawText(ctx, "    ", 2, 2);
 		});
 
 		// Strip control codes but keep ANSI colors for testing
@@ -570,7 +574,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw border
-			ctx.drawBox(1, 1, 6, 3, {
+			drawBox(ctx, 1, 1, 6, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -578,7 +582,7 @@ describe("Border Integration", () => {
 			});
 
 			// Add text inside border
-			ctx.drawText("Hi", 2, 2);
+			drawText(ctx, "Hi", 2, 2);
 		});
 
 		expect(output).toContain("┌────┐"); // Complete top border
@@ -591,10 +595,10 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Fill background
-			ctx.drawRect(1, 1, 4, 3, 0x00ff00);
+			drawRect(ctx, 1, 1, 4, 3, 0x00ff00);
 
 			// Draw border on top
-			ctx.drawBox(1, 1, 4, 3, {
+			drawBox(ctx, 1, 1, 4, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -610,7 +614,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 7);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 5, 4, {
+			drawBox(ctx, 0, 0, 5, 4, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -629,7 +633,7 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(5, 8);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 6, 4, {
+			drawBox(ctx, 0, 0, 6, 4, {
 				top: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
@@ -649,9 +653,9 @@ describe("Border Integration", () => {
 		const framebuffer = new Framebuffer(3, 10);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Hello", 0, 0);
-			ctx.drawText("World", 0, 1);
-			ctx.drawText("Test", 0, 2);
+			drawText(ctx, "Hello", 0, 0);
+			drawText(ctx, "World", 0, 1);
+			drawText(ctx, "Test", 0, 2);
 		});
 
 		// Strip control codes but keep ANSI colors for testing
@@ -673,7 +677,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// First box
-			ctx.drawBox(0, 0, 5, 4, {
+			drawBox(ctx, 0, 0, 5, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -681,7 +685,7 @@ describe("Border Integration", () => {
 			});
 
 			// Second box overlapping
-			ctx.drawBox(2, 2, 5, 4, {
+			drawBox(ctx, 2, 2, 5, 4, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -708,7 +712,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw a simple box that fits in viewport
-			ctx.drawBox(1, 1, 3, 3, {
+			drawBox(ctx, 1, 1, 3, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -732,18 +736,18 @@ describe("Border Integration", () => {
 
 		// First render to establish baseline
 		renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Line 1", 0, 0);
-			ctx.drawText("Line 2", 0, 1);
-			ctx.drawText("Line 3", 0, 2);
-			ctx.drawText("Line 4", 0, 3);
+			drawText(ctx, "Line 1", 0, 0);
+			drawText(ctx, "Line 2", 0, 1);
+			drawText(ctx, "Line 3", 0, 2);
+			drawText(ctx, "Line 4", 0, 3);
 		});
 
 		// Second render with minimal changes
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawText("Line 1", 0, 0);
-			ctx.drawText("Line TWO", 0, 1); // Changed
-			ctx.drawText("Line 3", 0, 2);
-			ctx.drawText("Line 4", 0, 3);
+			drawText(ctx, "Line 1", 0, 0);
+			drawText(ctx, "Line TWO", 0, 1); // Changed
+			drawText(ctx, "Line 3", 0, 2);
+			drawText(ctx, "Line 4", 0, 3);
 		});
 
 		// The framebuffer optimizes by only updating changed content
@@ -762,16 +766,16 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Draw box
-			ctx.drawBox(0, 0, 8, 5, {
+			drawBox(ctx, 0, 0, 8, 5, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 			// Add text inside
-			ctx.drawText(" TEST ", 1, 1);
-			ctx.drawText(" BOX  ", 1, 2);
-			ctx.drawText(" HERE ", 1, 3);
+			drawText(ctx, " TEST ", 1, 1);
+			drawText(ctx, " BOX  ", 1, 2);
+			drawText(ctx, " HERE ", 1, 3);
 		});
 
 		// Check that we have a complete box with text
@@ -793,7 +797,7 @@ describe("Border Integration", () => {
 			// This should create proper junctions where borders meet
 
 			// Cell (0,0) - top-left
-			ctx.drawBox(0, 0, 5, 3, {
+			drawBox(ctx, 0, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -801,7 +805,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (0,1) - top-right
-			ctx.drawBox(4, 0, 5, 3, {
+			drawBox(ctx, 4, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -809,7 +813,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (1,0) - bottom-left
-			ctx.drawBox(0, 2, 5, 3, {
+			drawBox(ctx, 0, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -817,7 +821,7 @@ describe("Border Integration", () => {
 			});
 
 			// Cell (1,1) - bottom-right
-			ctx.drawBox(4, 2, 5, 3, {
+			drawBox(ctx, 4, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -825,10 +829,10 @@ describe("Border Integration", () => {
 			});
 
 			// Add cell content
-			ctx.drawText("A1", 1, 1);
-			ctx.drawText("B1", 5, 1);
-			ctx.drawText("A2", 1, 3);
-			ctx.drawText("B2", 5, 3);
+			drawText(ctx, "A1", 1, 1);
+			drawText(ctx, "B1", 5, 1);
+			drawText(ctx, "A2", 1, 3);
+			drawText(ctx, "B2", 5, 3);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -850,7 +854,7 @@ describe("Border Integration", () => {
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Test border merging with different styles
 			// Left cell with solid borders
-			ctx.drawBox(0, 0, 6, 3, {
+			drawBox(ctx, 0, 0, 6, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -858,7 +862,7 @@ describe("Border Integration", () => {
 			});
 
 			// Right cell with double borders (should merge with solid)
-			ctx.drawBox(5, 0, 6, 3, {
+			drawBox(ctx, 5, 0, 6, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -866,8 +870,8 @@ describe("Border Integration", () => {
 			});
 
 			// Add content to differentiate the cells
-			ctx.drawText("Sol", 1, 1);
-			ctx.drawText("Dbl", 6, 1);
+			drawText(ctx, "Sol", 1, 1);
+			drawText(ctx, "Dbl", 6, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -889,21 +893,21 @@ describe("Border Integration", () => {
 			// For collapsed borders, cells share borders at their edges
 
 			// Header row cells (row 0-2)
-			ctx.drawBox(0, 0, 5, 3, {
+			drawBox(ctx, 0, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(4, 0, 5, 3, {
+			drawBox(ctx, 4, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(8, 0, 5, 3, {
+			drawBox(ctx, 8, 0, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -911,21 +915,21 @@ describe("Border Integration", () => {
 			});
 
 			// Data row cells (row 2-4, sharing top border with header cells)
-			ctx.drawBox(0, 2, 5, 3, {
+			drawBox(ctx, 0, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(4, 2, 5, 3, {
+			drawBox(ctx, 4, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(8, 2, 5, 3, {
+			drawBox(ctx, 8, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -933,12 +937,12 @@ describe("Border Integration", () => {
 			});
 
 			// Cell content - placed inside the cells (max 3 chars per cell)
-			ctx.drawText("Nam", 1, 1);
-			ctx.drawText("Age", 5, 1);
-			ctx.drawText("Cty", 9, 1);
-			ctx.drawText("Jon", 1, 3);
-			ctx.drawText("25", 5, 3);
-			ctx.drawText("NYC", 9, 3);
+			drawText(ctx, "Nam", 1, 1);
+			drawText(ctx, "Age", 5, 1);
+			drawText(ctx, "Cty", 9, 1);
+			drawText(ctx, "Jon", 1, 3);
+			drawText(ctx, "25", 5, 3);
+			drawText(ctx, "NYC", 9, 3);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -954,7 +958,7 @@ describe("Border Integration", () => {
 		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 1, 4, 2, {
+			drawBox(ctx, 1, 1, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -974,13 +978,13 @@ describe("Border Integration", () => {
 		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(1, 1, 6, 3, {
+			drawBox(ctx, 1, 1, 6, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
 				left: {style: "double"},
 			});
-			ctx.drawText("Test", 2, 2);
+			drawText(ctx, "Test", 2, 2);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -996,8 +1000,8 @@ describe("Border Integration", () => {
 		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 5, 3, {top: {style: "solid"}, left: {style: "solid"}});
-			ctx.drawText("Part", 1, 1);
+			drawBox(ctx, 0, 0, 5, 3, {top: {style: "solid"}, left: {style: "solid"}});
+			drawText(ctx, "Part", 1, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1017,8 +1021,8 @@ describe("Border Integration", () => {
 		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawBox(0, 0, 6, 4, {left: {style: "solid"}});
-			ctx.drawText("Quote", 2, 1);
+			drawBox(ctx, 0, 0, 6, 4, {left: {style: "solid"}});
+			drawText(ctx, "Quote", 2, 1);
 		});
 
 		// includes, not startsWith: the reset frame's erase sequence survives
@@ -1034,14 +1038,14 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Top row - 2 cells
-			ctx.drawBox(0, 0, 4, 2, {
+			drawBox(ctx, 0, 0, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawBox(3, 0, 4, 2, {
+			drawBox(ctx, 3, 0, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1049,7 +1053,7 @@ describe("Border Integration", () => {
 			});
 
 			// Bottom left cell only
-			ctx.drawBox(0, 1, 4, 2, {
+			drawBox(ctx, 0, 1, 4, 2, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1073,7 +1077,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Solid border cell
-			ctx.drawBox(0, 0, 3, 3, {
+			drawBox(ctx, 0, 0, 3, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
@@ -1081,7 +1085,7 @@ describe("Border Integration", () => {
 			});
 
 			// Double border cell
-			ctx.drawBox(2, 0, 3, 3, {
+			drawBox(ctx, 2, 0, 3, 3, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -1089,16 +1093,16 @@ describe("Border Integration", () => {
 			});
 
 			// Heavy border cell
-			ctx.drawBox(4, 0, 3, 3, {
+			drawBox(ctx, 4, 0, 3, 3, {
 				top: {style: "groove"},
 				right: {style: "groove"},
 				bottom: {style: "groove"},
 				left: {style: "groove"},
 			});
 
-			ctx.drawText("S", 1, 1);
-			ctx.drawText("D", 3, 1);
-			ctx.drawText("H", 5, 1);
+			drawText(ctx, "S", 1, 1);
+			drawText(ctx, "D", 3, 1);
+			drawText(ctx, "H", 5, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1115,7 +1119,7 @@ describe("Border Integration", () => {
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
 			// Outer border
-			ctx.drawBox(0, 0, 9, 7, {
+			drawBox(ctx, 0, 0, 9, 7, {
 				top: {style: "double"},
 				right: {style: "double"},
 				bottom: {style: "double"},
@@ -1123,16 +1127,16 @@ describe("Border Integration", () => {
 			});
 
 			// Inner border
-			ctx.drawBox(2, 2, 5, 3, {
+			drawBox(ctx, 2, 2, 5, 3, {
 				top: {style: "solid"},
 				right: {style: "solid"},
 				bottom: {style: "solid"},
 				left: {style: "solid"},
 			});
 
-			ctx.drawText("Out", 1, 1);
-			ctx.drawText("In", 3, 3);
-			ctx.drawText("Out", 5, 5); // Moved left by 2 to avoid overlap
+			drawText(ctx, "Out", 1, 1);
+			drawText(ctx, "In", 3, 3);
+			drawText(ctx, "Out", 5, 5); // Moved left by 2 to avoid overlap
 		});
 
 		const cleanOutput = stripControlCodes(output);
@@ -1156,14 +1160,14 @@ describe("Border Integration", () => {
 					const x = col * 3;
 					const y = row * 2;
 
-					ctx.drawBox(x, y, 4, 3, {
+					drawBox(ctx, x, y, 4, 3, {
 						top: {style: "solid"},
 						right: {style: "solid"},
 						bottom: {style: "solid"},
 						left: {style: "solid"},
 					});
 
-					ctx.drawText(`${row + 1}${col + 1}`, x + 1, y + 1);
+					drawText(ctx, `${row + 1}${col + 1}`, x + 1, y + 1);
 				}
 			}
 		});
@@ -1182,15 +1186,15 @@ describe("Border Integration", () => {
 		repaintAll(framebuffer);
 
 		const output = renderFrame(framebuffer, {offset: 0}, (ctx) => {
-			ctx.drawRect(1, 0, 5, 3, 0x00ff00);
-			ctx.drawBox(1, 0, 5, 3, {
+			drawRect(ctx, 1, 0, 5, 3, 0x00ff00);
+			drawBox(ctx, 1, 0, 5, 3, {
 				top: {style: "solid", color: 0xff0000},
 				right: {style: "solid", color: 0xff0000},
 				bottom: {style: "solid", color: 0xff0000},
 				left: {style: "solid", color: 0xff0000},
 			});
 
-			ctx.drawText("Col", 2, 1);
+			drawText(ctx, "Col", 2, 1);
 		});
 
 		const cleanOutput = stripControlCodes(output);
diff --git a/tests/flex.test.ts b/tests/flex.test.ts
index b2a582d9..3ab0417d 100644
--- a/tests/flex.test.ts
+++ b/tests/flex.test.ts
@@ -1,6 +1,12 @@
 import {describe, expect, test} from "@b9g/libuild/test";
 
-import {LayoutNode, toValue} from "../src/internal/layoutsolver.ts";
+import {
+	getComputedHeight,
+	getComputedWidth,
+	insertChild,
+	LayoutNode,
+	toValue,
+} from "../src/internal/layoutsolver.ts";
 
 /**
  * Spec tests for the layout engine, driven directly rather than through the
@@ -25,7 +31,7 @@ function node(): LayoutNode {
 
 function box(parent: LayoutNode, index = parent.children.length): LayoutNode {
 	const child = node();
-	parent.insertChild(child, index);
+	insertChild(parent, child, index);
 	return child;
 }
 
@@ -38,8 +44,8 @@ function rect(n: LayoutNode): {
 	return {
 		left: n.result.left,
 		top: n.result.top,
-		width: n.getComputedWidth(),
-		height: n.getComputedHeight(),
+		width: getComputedWidth(n),
+		height: getComputedHeight(n),
 	};
 }
 
diff --git a/tests/line-clearing.test.ts b/tests/line-clearing.test.ts
index 643ce0cc..afd17b1f 100644
--- a/tests/line-clearing.test.ts
+++ b/tests/line-clearing.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {Framebuffer, replaced} from "../src/internal/framebuffer.ts";
+import {drawText, Framebuffer, replaced} from "../src/internal/framebuffer.ts";
 import {MockProcess, nextFrame, renderFrame} from "./test-utils.js";
 
 test("line clearing removes terminal artifacts from previous commands", async () => {
@@ -144,7 +144,7 @@ test("a screen reset clears stale rows without a screen-qualifying erase", async
 			{offset: 0, cursorRow: 0, regionRows: 5},
 			(ctx) => {
 				for (let i = 0; i < 5; i++) {
-					ctx.drawText(`stale row ${i}`, 0, i);
+					drawText(ctx, `stale row ${i}`, 0, i);
 				}
 			},
 		),
@@ -158,8 +158,8 @@ test("a screen reset clears stale rows without a screen-qualifying erase", async
 		framebuffer,
 		{offset: 0, cursorRow: 0, regionRows: 3},
 		(ctx) => {
-			ctx.drawText("fresh top", 0, 0);
-			ctx.drawText("fresh mid", 0, 2);
+			drawText(ctx, "fresh top", 0, 0);
+			drawText(ctx, "fresh mid", 0, 2);
 		},
 	);
 	expect(out).not.toContain("\x1b[2J");
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 70944b95..87f18458 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -16,6 +16,7 @@ import {framePainted} from "../src/internal/dom.ts";
 import type {ColorDepth} from "../src/internal/exchange.ts";
 import {
 	beginFrame,
+	drawText,
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
@@ -378,7 +379,7 @@ export class MockProcess extends EventEmitter implements ProcessLike {
 				// color modes carry over, so defaults stay the terminal's own.
 				const hasExplicitFg = cell.getFgColorMode() !== 0;
 				const hasExplicitBg = cell.getBgColorMode() !== 0;
-				context.drawText(chars, outputCol, row, {
+				drawText(context, chars, outputCol, row, {
 					fg: hasExplicitFg ? cell.getFgColor() : undefined,
 					bg: hasExplicitBg ? cell.getBgColor() : undefined,
 					bold: !!cell.isBold(),
diff --git a/tests/wide-cluster.test.ts b/tests/wide-cluster.test.ts
index cd6f2458..f43082e0 100644
--- a/tests/wide-cluster.test.ts
+++ b/tests/wide-cluster.test.ts
@@ -3,6 +3,7 @@ import {expect, test} from "@b9g/libuild/test";
 import {TermDOM} from "../src/index.ts";
 import {
 	beginFrame,
+	drawText,
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
@@ -11,9 +12,9 @@ import {MockProcess, nextFrame, stripControlCodes} from "./test-utils.js";
 test("a cell written inside a wide cluster's span is dropped, not emitted", () => {
 	const framebuffer = new Framebuffer(2, 12, "rgb");
 	const ctx = beginFrame(framebuffer, {offset: 0});
-	ctx.drawText("काा", 2, 0);
-	ctx.drawText("ab", 3, 0);
-	ctx.drawText("cd", 6, 0);
+	drawText(ctx, "काा", 2, 0);
+	drawText(ctx, "ab", 3, 0);
+	drawText(ctx, "cd", 6, 0);
 	const frame = stripControlCodes(endFrame(framebuffer));
 	expect(frame).toContain("काा");
 	expect(frame).toContain("cd");
@@ -40,12 +41,12 @@ test("text that replaces wide characters on a fill rewrites every column", () =>
 	const framebuffer = new Framebuffer(1, 20, "rgb");
 	const white = {bg: 0x1000000 | 0xffffff, fg: 0x1000000};
 	let ctx = beginFrame(framebuffer, {offset: 0});
-	ctx.drawText(" ".repeat(20), 0, 0, white);
-	ctx.drawText("日本語のテキストです", 0, 0, white);
+	drawText(ctx, " ".repeat(20), 0, 0, white);
+	drawText(ctx, "日本語のテキストです", 0, 0, white);
 	endFrame(framebuffer);
 	ctx = beginFrame(framebuffer, {offset: 0});
-	ctx.drawText(" ".repeat(20), 0, 0, white);
-	ctx.drawText("a", 0, 0, white);
+	drawText(ctx, " ".repeat(20), 0, 0, white);
+	drawText(ctx, "a", 0, 0, white);
 	const update = endFrame(framebuffer);
 	expect(update).not.toMatch(/\x1b\[\d*C/);
 	expect(update.replace(/\x1b(?:\[[?\d;]*[A-Za-z]|[78])|\r/g, "")).toBe(
diff --git a/tests/width-measurement.test.ts b/tests/width-measurement.test.ts
index da303b8a..281f1e4f 100644
--- a/tests/width-measurement.test.ts
+++ b/tests/width-measurement.test.ts
@@ -17,6 +17,7 @@ import {TermDOM} from "../src/index.ts";
 import type {Exchange} from "../src/internal/exchange.ts";
 import {
 	beginFrame,
+	drawText,
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
@@ -138,7 +139,7 @@ function emit(
 	framebuffer.measurer = measurer;
 	const context = beginFrame(framebuffer, {offset: 0});
 	for (const [index, cluster] of cells) {
-		context.drawText(cluster, index % cols, Math.floor(index / cols));
+		drawText(context, cluster, index % cols, Math.floor(index / cols));
 	}
 	return endFrame(framebuffer);
 }
diff --git a/tests/zero-width.test.ts b/tests/zero-width.test.ts
index 59486a6c..22f0dbe8 100644
--- a/tests/zero-width.test.ts
+++ b/tests/zero-width.test.ts
@@ -5,7 +5,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {Framebuffer} from "../src/internal/framebuffer.ts";
+import {drawText, Framebuffer} from "../src/internal/framebuffer.ts";
 import {renderStatic} from "./test-utils.js";
 
 test("a zero-width cluster takes no cell and the line still ends", () => {
@@ -14,7 +14,7 @@ test("a zero-width cluster takes no cell and the line still ends", () => {
 		framebuffer,
 		{rows: 1, lineEnding: "\n"},
 		(ctx) => {
-			ctx.drawText("a­b​c", 0, 0);
+			drawText(ctx, "a­b​c", 0, 0);
 		},
 	);
 	expect(output.replace(/\x1b\[[0-9;]*m/g, "")).toBe("abc\n");

From 9588af513645c08bfefcf878f3bf0c566950b89b Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:18:13 -0400
Subject: [PATCH 31/99] Move the node tree's plain reads out of dom.ts into
 tree.ts

nodeTypeOf, localNameOf, attributeOf, the parent and sibling links, the
namespace and node type constants and the rest read a node's slots and
nothing else. In tree.ts, which loads no other part of the engine, the
selector matcher, MathML, editing and the cascade can read a tree
without importing the DOM: cssselectors.ts's imports from dom.ts fall
from 51 to 32, mathml.ts's from 7 to 1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts        |  24 ++--
 src/internal/cssselectors.ts |  34 +++---
 src/internal/dom.ts          | 224 ++++++-----------------------------
 src/internal/editing.ts      |   5 +-
 src/internal/input.ts        |  12 +-
 src/internal/inspector.ts    |   2 +-
 src/internal/layout.ts       |   4 +-
 src/internal/mathml.ts       |   8 +-
 src/internal/painter.ts      |   3 +-
 src/internal/tree.ts         | 198 +++++++++++++++++++++++++++++++
 10 files changed, 279 insertions(+), 235 deletions(-)
 create mode 100644 src/internal/tree.ts

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index aa2d2bd8..721426ad 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -17,9 +17,7 @@ import * as CSSTree from "./csstree.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
 	appendChildOf,
-	attributeOf,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
 	type Document as DOMDocument,
 	type Element as DOMElement,
@@ -30,7 +28,6 @@ import {
 	flushLayout,
 	flushStyle,
 	getAddedNodes,
-	getAttributeList,
 	getCellPixels,
 	getCellSizeSetting,
 	getClassTokens,
@@ -41,19 +38,11 @@ import {
 	getRemovedNodes,
 	getShadowRoot,
 	getTopLayer,
-	hasAttributeOf,
-	HTML_NAMESPACE,
 	isButtonInput,
 	isConnectedNode,
 	isDocumentElement,
 	isShadowRoot,
 	isUAShadowTree,
-	localNameOf,
-	MATHML_NAMESPACE,
-	namespaceOf,
-	nextInTree,
-	nodeTypeOf,
-	ownerDocumentOf,
 	pseudoElement,
 	pseudoElementCount,
 	releaseRemovedNodes,
@@ -83,6 +72,19 @@ import {
 } from "./slots.ts";
 import {getStringWidth, splitOnASCIIWhitespace} from "./text.ts";
 import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
+import {
+	attributeOf,
+	containsOf,
+	getAttributeList,
+	hasAttributeOf,
+	HTML_NAMESPACE,
+	localNameOf,
+	MATHML_NAMESPACE,
+	namespaceOf,
+	nextInTree,
+	nodeTypeOf,
+	ownerDocumentOf,
+} from "./tree.ts";
 import {
 	UA_CONTROL_STYLES,
 	UA_DOCUMENT_STYLES,
diff --git a/src/internal/cssselectors.ts b/src/internal/cssselectors.ts
index f839f97d..a6cf859b 100644
--- a/src/internal/cssselectors.ts
+++ b/src/internal/cssselectors.ts
@@ -2,34 +2,23 @@ import bidiFactory from "bidi-js";
 
 import * as CSSTree from "./csstree.ts";
 import {
-	attributeOf,
 	type Element,
-	getAttributeList,
-	getElementChildren,
-	getFirstChildNode,
 	getHeadingLevel,
 	getMeterLevel,
-	getNextSiblingNode,
 	getOpenAssignedSlot,
-	getParentNode,
 	getPartNames,
-	getPreviousSiblingNode,
 	getRangeMatch,
-	getRoot,
 	getShadowHost,
 	getUserValidityMatch,
 	getValidityMatch,
-	hasAttributeOf,
 	hasCustomState,
 	hasFocus,
 	hasFocusWithin,
-	HTML_NAMESPACE,
 	isActive,
 	isActuallyDisabled,
 	isCheckedControl,
 	isDefaultControl,
 	isDefinedElement,
-	isElement,
 	isFocusVisible,
 	isFormAssociatedCustom,
 	isFullscreenElement,
@@ -43,19 +32,32 @@ import {
 	isPlaceholderShown,
 	isShowingPopover,
 	isTargetElement,
+	Node,
+	READONLY_INPUT_TYPES,
+	REQUIRED_INPUT_TYPES,
+} from "./dom.ts";
+import {splitOnASCIIWhitespace, toASCIILowercase} from "./text.ts";
+import {
+	attributeOf,
+	getAttributeList,
+	getElementChildren,
+	getFirstChildNode,
+	getNextSiblingNode,
+	getParentNode,
+	getPreviousSiblingNode,
+	getRoot,
+	hasAttributeOf,
+	HTML_NAMESPACE,
+	isElement,
 	localNameOf,
 	namespaceOf,
 	nextInTree,
-	Node,
 	nodeTypeOf,
 	parentElement,
-	READONLY_INPUT_TYPES,
-	REQUIRED_INPUT_TYPES,
 	SVG_NAMESPACE,
 	XLINK_NAMESPACE,
 	XML_NAMESPACE,
-} from "./dom.ts";
-import {splitOnASCIIWhitespace, toASCIILowercase} from "./text.ts";
+} from "./tree.ts";
 
 // CSS Selectors: the language, and the matcher a selector compiles to.
 // css-tree parses the selector. It is checked against the pseudo-classes
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 9c8a3718..95fb919c 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -121,6 +121,41 @@ import {
 	trimASCIIWhitespace,
 } from "./text.ts";
 import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
+import {
+	ATTRIBUTE_NODE,
+	attributeOf,
+	CDATA_SECTION_NODE,
+	COMMENT_NODE,
+	containsOf,
+	DOCUMENT_FRAGMENT_NODE,
+	DOCUMENT_NODE,
+	DOCUMENT_TYPE_NODE,
+	ELEMENT_NODE,
+	ENTITY_NODE,
+	ENTITY_REFERENCE_NODE,
+	getAttributeByName,
+	getElementChildren,
+	getRoot,
+	hasAttributeOf,
+	HTML_NAMESPACE,
+	isElement,
+	isHTMLDocument,
+	isInclusiveAncestor,
+	localNameOf,
+	MATHML_NAMESPACE,
+	namespaceOf,
+	nextInTree,
+	nextSlotsInTree,
+	nodeTypeOf,
+	NOTATION_NODE,
+	ownerDocumentOf,
+	PROCESSING_INSTRUCTION_NODE,
+	SVG_NAMESPACE,
+	TEXT_NODE,
+	XLINK_NAMESPACE,
+	XML_NAMESPACE,
+	XMLNS_NAMESPACE,
+} from "./tree.ts";
 import {
 	type Constructor,
 	installInterfaces,
@@ -128,13 +163,6 @@ import {
 	windowMember,
 } from "./webidl.ts";
 
-export const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
-export const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
-export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-export const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
-export const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
-const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
-
 // Safe to call more than once, and synchronous: the shadow tree exists
 // when this returns. A control that was removed and re-inserted keeps its
 // tree and only updates the state it missed.
@@ -154,19 +182,6 @@ const UA_SHADOW_HOSTS = new Set([
 	"TEXTAREA",
 ]);
 
-const ELEMENT_NODE = 1;
-const ATTRIBUTE_NODE = 2;
-const TEXT_NODE = 3;
-const CDATA_SECTION_NODE = 4;
-const ENTITY_REFERENCE_NODE = 5;
-const ENTITY_NODE = 6;
-const PROCESSING_INSTRUCTION_NODE = 7;
-const COMMENT_NODE = 8;
-const DOCUMENT_NODE = 9;
-const DOCUMENT_TYPE_NODE = 10;
-const DOCUMENT_FRAGMENT_NODE = 11;
-const NOTATION_NODE = 12;
-
 // Walks the child links directly instead of running a selector query.
 // This runs on every insertion, so ordinary markup should cost no more
 // than one tag comparison per element.
@@ -6484,21 +6499,6 @@ Object.defineProperty(Node.prototype, Symbol.toStringTag, {
 	configurable: true,
 });
 
-export function getRoot(node: Node): Node {
-	return _(node).treeRoot;
-}
-
-function isInclusiveAncestor(ancestor: Node, node: Node): boolean {
-	let current: Node | null = node;
-	while (current !== null) {
-		if (current === ancestor) {
-			return true;
-		}
-		current = objectOf(_(current).parent);
-	}
-	return false;
-}
-
 function isHostIncludingInclusiveAncestor(ancestor: Node, node: Node): boolean {
 	let root = node;
 	for (
@@ -6577,57 +6577,6 @@ function *shadowIncludingInclusiveDescendantSlots(
 	}
 }
 
-/** The next node in tree order, or null once the walk leaves the root. */
-export function nextInTree(node: Node, root: Node): Node | null {
-	const nodeSlots = slotsOf(node);
-	if (nodeSlots.firstChild !== null) {
-		return rememberObject(nodeSlots.firstChild);
-	}
-	// The root is compared, not looked up, so a walk that calls this for
-	// every node keeps the node it is on in the lookup cache.
-	let current: Slots<Node> | null = nodeSlots;
-	while (current !== null && objectOf(current) !== root) {
-		if (current.next !== null) {
-			return rememberObject(current.next);
-		}
-		current = current.parent;
-	}
-	return null;
-}
-
-function nextSlotsInTree(
-	node: Slots<Node>,
-	root: Slots<Node>,
-): Slots<Node> | null {
-	if (node.firstChild !== null) {
-		return node.firstChild;
-	}
-	let current: Slots<Node> | null = node;
-	while (current !== null && current !== root) {
-		if (current.next !== null) {
-			return current.next;
-		}
-		current = current.parent;
-	}
-	return null;
-}
-
-export function getParentNode(node: Node): Node | null {
-	return objectOf(_(node).parent);
-}
-
-export function getFirstChildNode(node: Node): Node | null {
-	return objectOf(_(node).firstChild);
-}
-
-export function getNextSiblingNode(node: Node): Node | null {
-	return objectOf(_(node).next);
-}
-
-export function getPreviousSiblingNode(node: Node): Node | null {
-	return objectOf(_(node).previous);
-}
-
 function *inclusiveDescendants(node: Node): Generator<Node> {
 	const root = slotsOf(node);
 	let current: Slots<Node> | null = root;
@@ -8677,19 +8626,6 @@ function getCollectionCache(node: Node): Map<string, HTMLCollection> {
 	return cache;
 }
 
-export function getElementChildren(parent: Node): Element[] {
-	const elements: Element[] = [];
-	for (let nodeSlots = _(parent).firstChild;
-		nodeSlots !== null;
-		nodeSlots = nodeSlots.next) {
-		const node = objectOf(nodeSlots);
-		if (nodeTypeOf(node) === ELEMENT_NODE) {
-			elements.push(node as Element);
-		}
-	}
-	return elements;
-}
-
 // A name belongs to the first member in tree order that carries it,
 // which depends on the whole list. So a collection splices members in and
 // out only when no name is affected.
@@ -8840,16 +8776,6 @@ function createTagNameNSCollection(
 	return collection;
 }
 
-/**
- * An element's attributes, as their slots, for engine code that reads
- * them. `attributes` would build a live NamedNodeMap to hand out.
- */
-export function getAttributeList(
-	element: globalThis.Element,
-): readonly AttributeSlots[] {
-	return _(element as Element).attributeList;
-}
-
 // The one set every element without classes shares.
 const NO_CLASS_TOKENS: ReadonlySet<string> = new Set();
 
@@ -9915,26 +9841,6 @@ function queueAttributeMutationRecord(
 	);
 }
 
-function getAttributeByName(
-	element: Element,
-	qualifiedName: string,
-): Attr | null {
-	let name = qualifiedName;
-	const elementSlots = _(element);
-	if (
-		elementSlots.namespace === HTML_NAMESPACE &&
-		isHTMLDocument(elementSlots.document)
-	) {
-		name = toASCIILowercase(name);
-	}
-	for (const attribute of elementSlots.attributeList) {
-		if (attribute._qualifiedName === name) {
-			return objectOf(attribute);
-		}
-	}
-	return null;
-}
-
 function getAttributeByNamespace(
 	element: Element,
 	namespace: string | null,
@@ -26751,10 +26657,6 @@ export function isDocumentElement(node: globalThis.Node): boolean {
 		slots.nodeType === ELEMENT_NODE;
 }
 
-function isHTMLDocument(document: Document): boolean {
-	return _(document).extra.type === "html";
-}
-
 export interface DocumentExtra extends NodeExtra {
 	// What an attached document renders through, set by attachDocument. A
 	// headless document has none and behaves as a document with no browsing
@@ -39081,26 +38983,6 @@ export function createWindow(
 	return buildWindow(document);
 }
 
-export function isElement(node: Node): node is Element {
-	return _(node).nodeType === ELEMENT_NODE;
-}
-
-/** The node's nodeType, read without going through the page's binding. */
-export function nodeTypeOf(node: globalThis.Node): number {
-	return _(node as Node).nodeType;
-}
-
-/** The node's ownerDocument, read without going through its binding. */
-export function ownerDocumentOf(node: globalThis.Node): Document | null {
-	const document = _(node as Node).document;
-	return document === (node as unknown) ? null : document;
-}
-
-/** The element's localName, read without going through its binding. */
-export function localNameOf(element: globalThis.Element): string {
-	return _(element as Element).localName;
-}
-
 /** Node's appendChild, for the engine's own calls. */
 export function appendChildOf<T extends globalThis.Node>(
 	parent: globalThis.Node,
@@ -39137,15 +39019,6 @@ function removeChildOf<T extends globalThis.Node>(
 	) as unknown as T;
 }
 
-/** Node's contains, for the engine's own calls. */
-export function containsOf(
-	node: globalThis.Node,
-	other: globalThis.Node | null | undefined,
-): boolean {
-	return other != null &&
-		isInclusiveAncestor(node as unknown as Node, other as unknown as Node);
-}
-
 /** Element's setAttribute, for the engine's own calls. */
 export function setAttributeOf(
 	element: globalThis.Element,
@@ -39213,33 +39086,6 @@ function toggleAttributeOf(
 	return true;
 }
 
-/** The element's attribute's value, read without going through its binding. */
-export function attributeOf(
-	element: globalThis.Element,
-	qualifiedName: string,
-): string | null {
-	const attribute = getAttributeByName(element as Element, qualifiedName);
-	return attribute === null ? null : _(attribute).extra.value;
-}
-
-/** Whether the element has the attribute, without going through its binding. */
-export function hasAttributeOf(
-	element: globalThis.Element,
-	qualifiedName: string,
-): boolean {
-	return getAttributeByName(element as Element, qualifiedName) !== null;
-}
-
-/** The element's namespaceURI, read without going through its binding. */
-export function namespaceOf(element: globalThis.Element): string | null {
-	return _(element as Element).namespace;
-}
-
-export function parentElement(node: Node): Element | null {
-	const parent = objectOf(_(node).parent);
-	return parent !== null && isElement(parent) ? parent : null;
-}
-
 // Type-only exports of every class, so the lib.dom drift check can map
 // each one to the platform interface it implements.
 export type {
diff --git a/src/internal/editing.ts b/src/internal/editing.ts
index ed758ed8..3bf19190 100644
--- a/src/internal/editing.ts
+++ b/src/internal/editing.ts
@@ -11,16 +11,13 @@ import {getWhiteSpace} from "./cssom.ts";
 import {
 	appendChildOf,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
 	getFocusedElement,
 	insertBeforeOf,
-	localNameOf,
-	nodeTypeOf,
-	ownerDocumentOf,
 	revealEditingCaret,
 } from "./dom.ts";
 import {getNextGraphemeBoundary, getPreviousGraphemeBoundary} from "./text.ts";
+import {containsOf, localNameOf, nodeTypeOf, ownerDocumentOf} from "./tree.ts";
 
 /** A caret or selection endpoint. */
 interface EditingPoint {
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 7913c743..743667d5 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -7,10 +7,8 @@ import {
 	pxFromCells,
 } from "./cssom.ts";
 import {
-	attributeOf,
 	commitRangeThumb,
 	constructInternal,
-	containsOf,
 	dispatchAsUserAgent,
 	elementAtDocumentPoint,
 	flatParentElement,
@@ -26,17 +24,14 @@ import {
 	getTextControlValueText,
 	getUnitBounds,
 	handleCloseRequest,
-	hasAttributeOf,
 	HTMLInputElement,
 	HTMLLabelElement,
 	HTMLTextAreaElement,
 	lightDismissPress,
 	lightDismissRelease,
-	localNameOf,
 	lockDataTransfer,
 	MOUSE_POINTER_ID,
 	moveRangeThumb,
-	nodeTypeOf,
 	placeTextControlCaret,
 	requestRender,
 	runControlDefaultAction,
@@ -56,6 +51,13 @@ import {getEditingHost, requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
 import {type Framebuffer, invalidate, repaintAll} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
+import {
+	attributeOf,
+	containsOf,
+	hasAttributeOf,
+	localNameOf,
+	nodeTypeOf,
+} from "./tree.ts";
 
 // The keys a terminal names, with the legacy keyCode plenty of code
 // still reads. Also the list of names that are physical key identities.
diff --git a/src/internal/inspector.ts b/src/internal/inspector.ts
index b6eb8473..401ea630 100644
--- a/src/internal/inspector.ts
+++ b/src/internal/inspector.ts
@@ -8,9 +8,9 @@ import {
 	Element,
 	type Node,
 	NodeList,
-	nodeTypeOf,
 	Text,
 } from "./dom.ts";
+import {nodeTypeOf} from "./tree.ts";
 
 const colors = {
 	attr: "\x1b[36m",
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index b95c7906..1928ded7 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -23,7 +23,6 @@ import {
 } from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
-	attributeOf,
 	DOMRectList,
 	flatChildren,
 	flatDescendants,
@@ -39,8 +38,6 @@ import {
 	isInFlatTree,
 	isModalDialog,
 	isShadowIncludingAncestor,
-	localNameOf,
-	nodeTypeOf,
 	pseudoElementCount,
 	renderedTopLayer,
 	type Window,
@@ -92,6 +89,7 @@ import {
 	toVisualOrder,
 	writeClusterWidths,
 } from "./text.ts";
+import {attributeOf, localNameOf, nodeTypeOf} from "./tree.ts";
 
 type Position = "static" | "relative" | "absolute" | "fixed" | "sticky";
 
diff --git a/src/internal/mathml.ts b/src/internal/mathml.ts
index a75acc10..3ac07f60 100644
--- a/src/internal/mathml.ts
+++ b/src/internal/mathml.ts
@@ -7,17 +7,17 @@
 
 import {getCellSize, getComputedValue, resolveLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
+import {getDocumentExchange} from "./dom.ts";
+import type {CellStyle} from "./framebuffer.ts";
+import {getStringWidth, graphemeSegmenter} from "./text.ts";
 import {
 	attributeOf,
 	containsOf,
-	getDocumentExchange,
 	localNameOf,
 	MATHML_NAMESPACE,
 	namespaceOf,
 	nodeTypeOf,
-} from "./dom.ts";
-import type {CellStyle} from "./framebuffer.ts";
-import {getStringWidth, graphemeSegmenter} from "./text.ts";
+} from "./tree.ts";
 
 // ---------------------------------------------------------------------
 // The operator dictionary
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 28d4ade1..853c9e5a 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -17,7 +17,6 @@ import {
 } from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
-	containsOf,
 	flatParentElement,
 	flowContent,
 	getCanvasTextRuns,
@@ -32,7 +31,6 @@ import {
 	getTopLayer,
 	hasPaintedHighlights,
 	HTMLElement,
-	nodeTypeOf,
 	renderedTopLayer,
 	takesTextCursor,
 	type Window,
@@ -94,6 +92,7 @@ import {
 } from "./mathml.ts";
 import {isReplacedBox, renderReplaced} from "./replaced.ts";
 import {getStringWidth} from "./text.ts";
+import {containsOf, nodeTypeOf} from "./tree.ts";
 
 // Edges, not origin and size. An unclipped axis is +-Infinity, and an
 // edge computed from an infinite origin and size is NaN.
diff --git a/src/internal/tree.ts b/src/internal/tree.ts
new file mode 100644
index 00000000..4b6faf68
--- /dev/null
+++ b/src/internal/tree.ts
@@ -0,0 +1,198 @@
+/**
+ * The node tree as the engine reads it: node types, namespaces, the links
+ * between nodes and an element's attributes, read straight from their
+ * slots. Nothing here builds or changes a tree, so every module that walks
+ * one can import it without importing the DOM.
+ */
+import type {Attr, AttributeSlots, Document, Element, Node} from "./dom.ts";
+import {_, objectOf, rememberObject, type Slots, slotsOf} from "./slots.ts";
+import {toASCIILowercase} from "./text.ts";
+
+export const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+export const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
+export const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+export const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
+export const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+export const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+
+export const ELEMENT_NODE = 1;
+export const ATTRIBUTE_NODE = 2;
+export const TEXT_NODE = 3;
+export const CDATA_SECTION_NODE = 4;
+export const ENTITY_REFERENCE_NODE = 5;
+export const ENTITY_NODE = 6;
+export const PROCESSING_INSTRUCTION_NODE = 7;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_NODE = 9;
+export const DOCUMENT_TYPE_NODE = 10;
+export const DOCUMENT_FRAGMENT_NODE = 11;
+export const NOTATION_NODE = 12;
+
+export function getRoot(node: Node): Node {
+	return _(node).treeRoot;
+}
+
+export function isInclusiveAncestor(ancestor: Node, node: Node): boolean {
+	let current: Node | null = node;
+	while (current !== null) {
+		if (current === ancestor) {
+			return true;
+		}
+		current = objectOf(_(current).parent);
+	}
+	return false;
+}
+
+/** The next node in tree order, or null once the walk leaves the root. */
+export function nextInTree(node: Node, root: Node): Node | null {
+	const nodeSlots = slotsOf(node);
+	if (nodeSlots.firstChild !== null) {
+		return rememberObject(nodeSlots.firstChild);
+	}
+	// The root is compared, not looked up, so a walk that calls this for
+	// every node keeps the node it is on in the lookup cache.
+	let current: Slots<Node> | null = nodeSlots;
+	while (current !== null && objectOf(current) !== root) {
+		if (current.next !== null) {
+			return rememberObject(current.next);
+		}
+		current = current.parent;
+	}
+	return null;
+}
+
+export function nextSlotsInTree(
+	node: Slots<Node>,
+	root: Slots<Node>,
+): Slots<Node> | null {
+	if (node.firstChild !== null) {
+		return node.firstChild;
+	}
+	let current: Slots<Node> | null = node;
+	while (current !== null && current !== root) {
+		if (current.next !== null) {
+			return current.next;
+		}
+		current = current.parent;
+	}
+	return null;
+}
+
+export function getParentNode(node: Node): Node | null {
+	return objectOf(_(node).parent);
+}
+
+export function getFirstChildNode(node: Node): Node | null {
+	return objectOf(_(node).firstChild);
+}
+
+export function getNextSiblingNode(node: Node): Node | null {
+	return objectOf(_(node).next);
+}
+
+export function getPreviousSiblingNode(node: Node): Node | null {
+	return objectOf(_(node).previous);
+}
+
+export function getElementChildren(parent: Node): Element[] {
+	const elements: Element[] = [];
+	for (let nodeSlots = _(parent).firstChild;
+		nodeSlots !== null;
+		nodeSlots = nodeSlots.next) {
+		const node = objectOf(nodeSlots);
+		if (nodeTypeOf(node) === ELEMENT_NODE) {
+			elements.push(node as Element);
+		}
+	}
+	return elements;
+}
+
+/**
+ * An element's attributes, as their slots, for engine code that reads
+ * them. `attributes` would build a live NamedNodeMap to hand out.
+ */
+export function getAttributeList(
+	element: globalThis.Element,
+): readonly AttributeSlots[] {
+	return _(element as Element).attributeList;
+}
+
+export function getAttributeByName(
+	element: Element,
+	qualifiedName: string,
+): Attr | null {
+	let name = qualifiedName;
+	const elementSlots = _(element);
+	if (
+		elementSlots.namespace === HTML_NAMESPACE &&
+		isHTMLDocument(elementSlots.document)
+	) {
+		name = toASCIILowercase(name);
+	}
+	for (const attribute of elementSlots.attributeList) {
+		if (attribute._qualifiedName === name) {
+			return objectOf(attribute);
+		}
+	}
+	return null;
+}
+
+export function isHTMLDocument(document: Document): boolean {
+	return _(document).extra.type === "html";
+}
+
+export function isElement(node: Node): node is Element {
+	return _(node).nodeType === ELEMENT_NODE;
+}
+
+/** The node's nodeType, read without going through the page's binding. */
+export function nodeTypeOf(node: globalThis.Node): number {
+	return _(node as Node).nodeType;
+}
+
+/** The node's ownerDocument, read without going through its binding. */
+export function ownerDocumentOf(node: globalThis.Node): Document | null {
+	const document = _(node as Node).document;
+	return document === (node as unknown) ? null : document;
+}
+
+/** The element's localName, read without going through its binding. */
+export function localNameOf(element: globalThis.Element): string {
+	return _(element as Element).localName;
+}
+
+/** Node's contains, for the engine's own calls. */
+export function containsOf(
+	node: globalThis.Node,
+	other: globalThis.Node | null | undefined,
+): boolean {
+	return other != null &&
+		isInclusiveAncestor(node as unknown as Node, other as unknown as Node);
+}
+
+/** The element's attribute's value, read without going through its binding. */
+export function attributeOf(
+	element: globalThis.Element,
+	qualifiedName: string,
+): string | null {
+	const attribute = getAttributeByName(element as Element, qualifiedName);
+	return attribute === null ? null : _(attribute).extra.value;
+}
+
+/** Whether the element has the attribute, without going through its binding. */
+export function hasAttributeOf(
+	element: globalThis.Element,
+	qualifiedName: string,
+): boolean {
+	return getAttributeByName(element as Element, qualifiedName) !== null;
+}
+
+/** The element's namespaceURI, read without going through its binding. */
+export function namespaceOf(element: globalThis.Element): string | null {
+	return _(element as Element).namespace;
+}
+
+export function parentElement(node: Node): Element | null {
+	const parent = objectOf(_(node).parent);
+	return parent !== null && isElement(parent) ? parent : null;
+}

From 364368ca11cff00369f112bc7a78099314dd81f0 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:23:53 -0400
Subject: [PATCH 32/99] Take editing.ts and images.ts out of the DOM's import
 cycle

dom.ts imported editing.ts for getEditingHost, which reads only public
DOM properties and now lives in dom.ts, and to install editing's
listeners, which TermDOM does after attaching the document. images.ts
imported dom.ts for a DOMException that is the runtime's own. editing.ts
had its own copies of two node type constants. The attached-document
reads move to tree.ts beside the tree reads.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts            |  2 ++
 src/internal/cssom.ts   |  2 +-
 src/internal/dom.ts     | 59 +++++++++++++++++++++++------------------
 src/internal/editing.ts | 53 ++++++++++--------------------------
 src/internal/images.ts  |  1 -
 src/internal/input.ts   |  3 ++-
 src/internal/mathml.ts  |  2 +-
 src/internal/tree.ts    | 25 +++++++++++++++++
 8 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index f2067430..a6097c69 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,6 +44,7 @@ import {
 	takeScrollShift,
 	type Window,
 } from "./internal/dom.ts";
+import {installEditing} from "./internal/editing.ts";
 import {
 	abandonColorDepthQuery,
 	abandonColorSchemeQuery,
@@ -601,6 +602,7 @@ export class TermDOM extends EventTarget {
 				reportUncaught(this, error);
 			},
 		});
+		installEditing(exchange);
 		// The document had no size until it was attached, so an @media rule
 		// in the markup was read against a zero-width viewport. Attaching is
 		// a resize, and flips @media results the same way.
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 721426ad..f1909b6a 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -31,7 +31,6 @@ import {
 	getCellPixels,
 	getCellSizeSetting,
 	getClassTokens,
-	getDocumentExchange,
 	getHighlightRegistry,
 	getPseudoHost,
 	getPseudoName,
@@ -76,6 +75,7 @@ import {
 	attributeOf,
 	containsOf,
 	getAttributeList,
+	getDocumentExchange,
 	hasAttributeOf,
 	HTML_NAMESPACE,
 	localNameOf,
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 95fb919c..cf1b4a84 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -56,7 +56,6 @@ import {
 	SelectorError,
 } from "./cssselectors.ts";
 import * as CSSValues from "./cssvalues.ts";
-import {getEditingHost, installEditing} from "./editing.ts";
 import type {Exchange} from "./exchange.ts";
 import {
 	CellContext,
@@ -122,6 +121,7 @@ import {
 } from "./text.ts";
 import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
 import {
+	type AttachedDocument,
 	ATTRIBUTE_NODE,
 	attributeOf,
 	CDATA_SECTION_NODE,
@@ -133,6 +133,7 @@ import {
 	ELEMENT_NODE,
 	ENTITY_NODE,
 	ENTITY_REFERENCE_NODE,
+	getAttachedDocument,
 	getAttributeByName,
 	getElementChildren,
 	getRoot,
@@ -5741,17 +5742,6 @@ function innerInvoke(
 	return found;
 }
 
-/** The terminal behind a document, while it is attached to one. */
-export function getDocumentExchange(
-	document: globalThis.Document | null,
-): Exchange | null {
-	if (document === null) {
-		return null;
-	}
-	const attached = getAttachedDocument(document as unknown as Document);
-	return attached === undefined ? null : _(attached).extra.exchange;
-}
-
 function getSessionExchange(target: EventTarget): EventTarget | null {
 	const document = getEventTargetDocument(target);
 	if (document === null) {
@@ -35763,7 +35753,6 @@ export function attachDocument(
 	for (const type of ["input", "select", "change", "selectionchange"]) {
 		exchange.addEventListener(type, onTextControlEditEvent);
 	}
-	installEditing(exchange);
 	// One watcher per document, the engine displaying it.
 	getHoverCount(attached).onChange = () => render();
 	// The document owns the observer. Mutations fan out to the cascade, the
@@ -36221,19 +36210,6 @@ export function hoverListenerCount(document: globalThis.Document): number {
 	return hoverListenerCounters.get(document as Document)?.count ?? 0;
 }
 
-// A document that has been adopted. It renders, and knows what it
-// renders through.
-type AttachedDocument = Document;
-
-function getAttachedDocument(
-	node: globalThis.Node,
-): AttachedDocument | undefined {
-	const document = _(node as Node).document;
-	return _(document).extra.exchange !== undefined
-		? (document as AttachedDocument)
-		: undefined;
-}
-
 /** The images and canvas options of the TermDOM drawing the node's document. */
 export function getGraphicsSettings(
 	node: globalThis.Node,
@@ -39226,3 +39202,34 @@ export type {
 	DOMStringList,
 	Location,
 };
+
+/**
+ * The element a caret in `node` edits: the nearest ancestor-or-self whose
+ * contenteditable state is true, or the body of a designMode document.
+ */
+export function getEditingHost(
+	node: globalThis.Node | null,
+): globalThis.HTMLElement | null {
+	if (node === null) {
+		return null;
+	}
+	for (
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement; element !== null; element = element.parentElement
+	) {
+		const state = (element as globalThis.HTMLElement).contentEditable;
+		if (state === "true" || state === "plaintext-only") {
+			return element as globalThis.HTMLElement;
+		}
+		if (state === "false") {
+			return null;
+		}
+	}
+	const document = ownerDocumentOf(node);
+	const body = document === null ? null : document.body;
+	if (document === null || body === null || document.designMode !== "on") {
+		return null;
+	}
+	return containsOf(body, node) ? body : null;
+}
diff --git a/src/internal/editing.ts b/src/internal/editing.ts
index 3bf19190..4140a8b1 100644
--- a/src/internal/editing.ts
+++ b/src/internal/editing.ts
@@ -12,12 +12,19 @@ import {
 	appendChildOf,
 	constructInternal,
 	dispatchAsUserAgent,
+	getEditingHost,
 	getFocusedElement,
 	insertBeforeOf,
 	revealEditingCaret,
 } from "./dom.ts";
 import {getNextGraphemeBoundary, getPreviousGraphemeBoundary} from "./text.ts";
-import {containsOf, localNameOf, nodeTypeOf, ownerDocumentOf} from "./tree.ts";
+import {
+	containsOf,
+	ELEMENT_NODE,
+	localNameOf,
+	nodeTypeOf,
+	TEXT_NODE,
+} from "./tree.ts";
 
 /** A caret or selection endpoint. */
 interface EditingPoint {
@@ -30,9 +37,6 @@ interface Motion {
 	forward: boolean;
 }
 
-const ELEMENT_NODE = 1;
-const TEXT_NODE = 3;
-
 const SPACE = " ";
 const NBSP = "\u00a0";
 
@@ -122,37 +126,6 @@ const ARROW_MOTIONS: Record<string, Motion> = {
 	End: {granularity: "lineboundary", forward: true},
 };
 
-/**
- * The element a caret in `node` edits: the nearest ancestor-or-self whose
- * contenteditable state is true, or the body of a designMode document.
- */
-export function getEditingHost(
-	node: globalThis.Node | null,
-): globalThis.HTMLElement | null {
-	if (node === null) {
-		return null;
-	}
-	for (
-		let element = asElement(node) ?? node.parentElement;
-		element !== null;
-		element = element.parentElement
-	) {
-		const state = (element as globalThis.HTMLElement).contentEditable;
-		if (state === "true" || state === "plaintext-only") {
-			return element as globalThis.HTMLElement;
-		}
-		if (state === "false") {
-			return null;
-		}
-	}
-	const document = ownerDocumentOf(node);
-	const body = document === null ? null : document.body;
-	if (document === null || body === null || document.designMode !== "on") {
-		return null;
-	}
-	return containsOf(body, node) ? body : null;
-}
-
 /**
  * Where the terminal cursor goes: the document selection's focus, when a
  * focused editing host holds it.
@@ -396,7 +369,9 @@ function getUneditableIsland(
 ): globalThis.Element | null {
 	let island: globalThis.Element | null = null;
 	for (
-		let element = asElement(node) ?? node.parentElement;
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement;
 		element !== null && element !== host;
 		element = element.parentElement
 	) {
@@ -1001,9 +976,9 @@ function getBlockContainer(
 	node: globalThis.Node,
 ): globalThis.Element {
 	for (
-		let element = asElement(node) ?? node.parentElement;
-		element !== null;
-		element = element.parentElement
+		let element = nodeTypeOf(node) === ELEMENT_NODE
+			? node as globalThis.Element
+			: node.parentElement; element !== null; element = element.parentElement
 	) {
 		if (element === host || BLOCK_TAGS.has(localNameOf(element))) {
 			return element;
diff --git a/src/internal/images.ts b/src/internal/images.ts
index 6a746138..fc5fd0c2 100644
--- a/src/internal/images.ts
+++ b/src/internal/images.ts
@@ -12,7 +12,6 @@
  * and the canvas and the painter read it back through the registry at
  * the bottom.
  */
-import {DOMException} from "./dom.ts";
 import type {CellGrid} from "./framebuffer.ts";
 import {clearTimeout, setTimeout} from "./timers.ts";
 
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 743667d5..2e8a37f7 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -15,6 +15,7 @@ import {
 	flushLayout,
 	type FocusStartingPoint,
 	getActiveElement,
+	getEditingHost,
 	getFocusedElement,
 	getKeyboardActivation,
 	getPointerState,
@@ -47,7 +48,7 @@ import {
 	topmostModalDialog,
 	type Window,
 } from "./dom.ts";
-import {getEditingHost, requestEditingInsert} from "./editing.ts";
+import {requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
 import {type Framebuffer, invalidate, repaintAll} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
diff --git a/src/internal/mathml.ts b/src/internal/mathml.ts
index 3ac07f60..eace17e2 100644
--- a/src/internal/mathml.ts
+++ b/src/internal/mathml.ts
@@ -7,12 +7,12 @@
 
 import {getCellSize, getComputedValue, resolveLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
-import {getDocumentExchange} from "./dom.ts";
 import type {CellStyle} from "./framebuffer.ts";
 import {getStringWidth, graphemeSegmenter} from "./text.ts";
 import {
 	attributeOf,
 	containsOf,
+	getDocumentExchange,
 	localNameOf,
 	MATHML_NAMESPACE,
 	namespaceOf,
diff --git a/src/internal/tree.ts b/src/internal/tree.ts
index 4b6faf68..8316f3ec 100644
--- a/src/internal/tree.ts
+++ b/src/internal/tree.ts
@@ -5,6 +5,7 @@
  * one can import it without importing the DOM.
  */
 import type {Attr, AttributeSlots, Document, Element, Node} from "./dom.ts";
+import type {Exchange} from "./exchange.ts";
 import {_, objectOf, rememberObject, type Slots, slotsOf} from "./slots.ts";
 import {toASCIILowercase} from "./text.ts";
 
@@ -196,3 +197,27 @@ export function parentElement(node: Node): Element | null {
 	const parent = objectOf(_(node).parent);
 	return parent !== null && isElement(parent) ? parent : null;
 }
+
+/** The terminal behind a document, while it is attached to one. */
+export function getDocumentExchange(
+	document: globalThis.Document | null,
+): Exchange | null {
+	if (document === null) {
+		return null;
+	}
+	const attached = getAttachedDocument(document as unknown as Document);
+	return attached === undefined ? null : _(attached).extra.exchange;
+}
+
+// A document that has been adopted. It renders, and knows what it
+// renders through.
+export type AttachedDocument = Document;
+
+export function getAttachedDocument(
+	node: globalThis.Node,
+): AttachedDocument | undefined {
+	const document = _(node as Node).document;
+	return _(document).extra.exchange !== undefined
+		? (document as AttachedDocument)
+		: undefined;
+}

From e7463bc2072aeb671056dd6dc08607c4ab31d1c4 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:25:22 -0400
Subject: [PATCH 33/99] Take resources.ts out of the DOM's import cycle

dom.ts imported resources.ts to stamp an image request's destination and
to hand it a <meta> policy. The destination stamp lives in dom.ts, and
dom.ts keeps each <meta> policy's text, which resources.ts parses when a
load is checked, once per text. resources.ts takes DOMException from the
runtime.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts       | 43 +++++++++++++++++++++++++----
 src/internal/resources.ts | 58 ++++++++++++++-------------------------
 2 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index cf1b4a84..fe53dc25 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -85,11 +85,7 @@ import {
 } from "./images.ts";
 import type {Layout} from "./layout.ts";
 import {linearizeMath} from "./mathml.ts";
-import {
-	addDocumentPolicy,
-	type ResourceLoader,
-	setRequestDestination,
-} from "./resources.ts";
+import type {ResourceLoader} from "./resources.ts";
 import {
 	_,
 	_maybe,
@@ -39233,3 +39229,40 @@ export function getEditingHost(
 	}
 	return containsOf(body, node) ? body : null;
 }
+
+// The policies a page stated for itself with <meta> in its head.
+const metaPolicyTexts = new WeakMap<object, string[]>();
+
+/**
+ * A `<meta http-equiv="Content-Security-Policy">` inserted as a child of
+ * a head (HTML §4.2.5.3): its policy holds for the document from then on,
+ * whatever later becomes of the element.
+ */
+function addDocumentPolicy(document: object, content: string): void {
+	const texts = metaPolicyTexts.get(document);
+	if (texts === undefined) {
+		metaPolicyTexts.set(document, [content]);
+	} else {
+		texts.push(content);
+	}
+}
+
+/** The policy texts the document's <meta> elements stated, in order. */
+export function getMetaPolicyTexts(document: object): readonly string[] {
+	return metaPolicyTexts.get(document) ?? [];
+}
+
+/**
+ * Gives a request its Fetch destination, such as "image", which a
+ * runtime's Request leaves empty.
+ */
+export function setRequestDestination(
+	request: Request,
+	destination: RequestDestination,
+): void {
+	Object.defineProperty(request, "destination", {
+		value: destination,
+		enumerable: true,
+		configurable: true,
+	});
+}
diff --git a/src/internal/resources.ts b/src/internal/resources.ts
index 2e4369ac..7db7544c 100644
--- a/src/internal/resources.ts
+++ b/src/internal/resources.ts
@@ -7,7 +7,12 @@
  * Each redirect is checked against the policy again and followed on the
  * network. Only a document that is itself a file: URL loads file: URLs.
  */
-import {createFetchEvent, DOMException, getFetchResponse} from "./dom.ts";
+import {
+	createFetchEvent,
+	getFetchResponse,
+	getMetaPolicyTexts,
+	setRequestDestination,
+} from "./dom.ts";
 import {splitOnASCIIWhitespace} from "./text.ts";
 
 // A load goes to the global fetch, so a program that replaces it to mock
@@ -32,21 +37,6 @@ function networkFetch(request: Request): Promise<Response> {
 
 export {ExtendableEvent, FetchEvent, type FetchEventInit} from "./dom.ts";
 
-/**
- * Gives a request its Fetch destination, such as "image", which a
- * runtime's Request leaves empty.
- */
-export function setRequestDestination(
-	request: Request,
-	destination: RequestDestination,
-): void {
-	Object.defineProperty(request, "destination", {
-		value: destination,
-		enumerable: true,
-		configurable: true,
-	});
-}
-
 /** What a load knows of what asked for it. */
 interface RequestContext {
 	// The element that asked, where a policy violation is reported.
@@ -325,30 +315,22 @@ function whileNotAborted<T>(
 	});
 }
 
-// The policies a page stated for itself with <meta> in its head.
-const documentPolicies = new WeakMap<object, ContentSecurityPolicy[]>();
-
-/**
- * A `<meta http-equiv="Content-Security-Policy">` inserted as a child of
- * a head (HTML §4.2.5.3): its policy holds for the document from then on,
- * whatever later becomes of the element. A meta policy cannot report,
- * frame or sandbox, so those directives are dropped.
- */
-export function addDocumentPolicy(document: object, content: string): void {
-	const policy = parseContentSecurityPolicy(content);
-	for (const directive of ["report-uri", "frame-ancestors", "sandbox"]) {
-		policy.directives.delete(directive);
-	}
-	const policies = documentPolicies.get(document);
-	if (policies === undefined) {
-		documentPolicies.set(document, [policy]);
-	} else {
-		policies.push(policy);
-	}
-}
+const metaPolicies = new Map<string, ContentSecurityPolicy>();
 
+// The policies a page stated for itself with <meta> in its head. A meta
+// policy cannot report, frame or sandbox, so those directives are dropped.
 function getDocumentPolicies(document: object): ContentSecurityPolicy[] {
-	return documentPolicies.get(document) ?? [];
+	return getMetaPolicyTexts(document).map((content) => {
+		let policy = metaPolicies.get(content);
+		if (policy === undefined) {
+			policy = parseContentSecurityPolicy(content);
+			for (const directive of ["report-uri", "frame-ancestors", "sandbox"]) {
+				policy.directives.delete(directive);
+			}
+			metaPolicies.set(content, policy);
+		}
+		return policy;
+	});
 }
 
 // ---------------------------------------------------------------------------

From 44bfbb079941e99bd857142e1eef37e6ca0974af Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:29:09 -0400
Subject: [PATCH 34/99] Take the selector matcher, cssvalues, the framebuffer
 and canvas out of the DOM's import cycle

The matcher imported dom.ts for the 31 element states it asks about:
focus, hover, a control's validity, a heading's level and the rest. dom.ts
hands them over through setElementStates as it finishes loading, and the
matcher reads them from that record, so cssselectors.ts loads before the
DOM, and cssvalues.ts, which imports it, and the framebuffer and canvas,
which import cssvalues.ts, leave the cycle with it. What remains in it is
dom.ts, cssom.ts and mathml.ts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssselectors.ts | 227 ++++++++++++++++++++---------------
 src/internal/dom.ts          |  35 ++++++
 tests/import-order.test.ts   |   9 +-
 3 files changed, 169 insertions(+), 102 deletions(-)

diff --git a/src/internal/cssselectors.ts b/src/internal/cssselectors.ts
index a6cf859b..16bbbadd 100644
--- a/src/internal/cssselectors.ts
+++ b/src/internal/cssselectors.ts
@@ -1,44 +1,14 @@
 import bidiFactory from "bidi-js";
 
 import * as CSSTree from "./csstree.ts";
-import {
-	type Element,
-	getHeadingLevel,
-	getMeterLevel,
-	getOpenAssignedSlot,
-	getPartNames,
-	getRangeMatch,
-	getShadowHost,
-	getUserValidityMatch,
-	getValidityMatch,
-	hasCustomState,
-	hasFocus,
-	hasFocusWithin,
-	isActive,
-	isActuallyDisabled,
-	isCheckedControl,
-	isDefaultControl,
-	isDefinedElement,
-	isFocusVisible,
-	isFormAssociatedCustom,
-	isFullscreenElement,
-	isHovered,
-	isHTMLNode,
-	isIndeterminateControl,
-	isInQuirksMode,
-	isMeterValue,
-	isModalDialog,
-	isOpenElement,
-	isPlaceholderShown,
-	isShowingPopover,
-	isTargetElement,
-	Node,
-	READONLY_INPUT_TYPES,
-	REQUIRED_INPUT_TYPES,
-} from "./dom.ts";
+import type * as DOM from "./dom.ts";
+import type {Element, Node} from "./dom.ts";
 import {splitOnASCIIWhitespace, toASCIILowercase} from "./text.ts";
 import {
 	attributeOf,
+	CDATA_SECTION_NODE,
+	DOCUMENT_NODE,
+	ELEMENT_NODE,
 	getAttributeList,
 	getElementChildren,
 	getFirstChildNode,
@@ -55,10 +25,57 @@ import {
 	nodeTypeOf,
 	parentElement,
 	SVG_NAMESPACE,
+	TEXT_NODE,
 	XLINK_NAMESPACE,
 	XML_NAMESPACE,
 } from "./tree.ts";
 
+/**
+ * What the matcher asks the DOM about an element's state: focus, hover,
+ * a form control's validity and the rest, which only dom.ts can answer.
+ * dom.ts hands them over as it loads, so this module never imports it.
+ */
+type ElementStates = Pick<
+	typeof DOM,
+	"getHeadingLevel" |
+	"getMeterLevel" |
+	"getOpenAssignedSlot" |
+	"getPartNames" |
+	"getRangeMatch" |
+	"getShadowHost" |
+	"getUserValidityMatch" |
+	"getValidityMatch" |
+	"hasCustomState" |
+	"hasFocus" |
+	"hasFocusWithin" |
+	"isActive" |
+	"isActuallyDisabled" |
+	"isCheckedControl" |
+	"isDefaultControl" |
+	"isDefinedElement" |
+	"isFocusVisible" |
+	"isFormAssociatedCustom" |
+	"isFullscreenElement" |
+	"isHovered" |
+	"isHTMLNode" |
+	"isIndeterminateControl" |
+	"isInQuirksMode" |
+	"isMeterValue" |
+	"isModalDialog" |
+	"isOpenElement" |
+	"isPlaceholderShown" |
+	"isShowingPopover" |
+	"isTargetElement" |
+	"READONLY_INPUT_TYPES" |
+	"REQUIRED_INPUT_TYPES"
+>;
+
+let states: ElementStates;
+
+export function setElementStates(given: ElementStates): void {
+	states = given;
+}
+
 // CSS Selectors: the language, and the matcher a selector compiles to.
 // css-tree parses the selector. It is checked against the pseudo-classes
 // and pseudo-elements this engine knows and compiled into one closure per
@@ -710,7 +727,7 @@ function compileSimple(
 				if (value === null) {
 					return false;
 				}
-				return isInQuirksMode(element)
+				return states.isInQuirksMode(element)
 					? toASCIILowercase(value) === folded
 					: value === id;
 			});
@@ -727,7 +744,7 @@ function compileSimple(
 				if (value === null) {
 					return false;
 				}
-				if (!isInQuirksMode(element)) {
+				if (!states.isInQuirksMode(element)) {
 					return hasToken(value, name);
 				}
 				for (const token of splitOnASCIIWhitespace(value)) {
@@ -814,7 +831,7 @@ function compileType(name: string, compiling: Compiling): Predicate {
 	const {namespace, local} = qualifiedName(name, compiling.namespaces, false);
 	const folded = local === null ? null : toASCIILowercase(local);
 	return (element) => {
-		if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+		if (nodeTypeOf(element) !== ELEMENT_NODE) {
 			return false;
 		}
 		const elementNamespace = namespaceOf(element);
@@ -830,7 +847,7 @@ function compileType(name: string, compiling: Compiling): Predicate {
 		}
 		return (
 			elementNamespace === HTML_NAMESPACE &&
-			isHTMLNode(element) &&
+			states.isHTMLNode(element) &&
 			toASCIILowercase(elementLocal) === folded
 		);
 	};
@@ -911,7 +928,8 @@ function compileAttribute(
 	// Read the attribute the way HTML reads a name. An HTML element in an
 	// HTML document lowercases its attribute names.
 	const read = (element: Element): string | null => {
-		const fold = namespaceOf(element) === HTML_NAMESPACE && isHTMLNode(element);
+		const fold =
+			namespaceOf(element) === HTML_NAMESPACE && states.isHTMLNode(element);
 		const attributes = getAttributeList(element);
 		for (let index = 0; index < attributes.length; index++) {
 			const attribute = attributes[index];
@@ -951,7 +969,7 @@ function compileAttribute(
 			flags === "i" ||
 			(flags === "" &&
 				namespaceOf(element) === HTML_NAMESPACE &&
-				isHTMLNode(element) &&
+				states.isHTMLNode(element) &&
 				CASE_INSENSITIVE_ATTRIBUTES.has(folded));
 		const subject = insensitive ? toASCIILowercase(value) : value;
 		const target = insensitive ? foldedWanted : wanted;
@@ -1041,7 +1059,7 @@ function compilePseudoClass(
 			const context = name === "host-context";
 			compound.tests.push((element, state) => {
 				const shadow = state.shadow;
-				if (shadow === null || getShadowHost(shadow) !== element) {
+				if (shadow === null || states.getShadowHost(shadow) !== element) {
 					return false;
 				}
 				if (inner === null) {
@@ -1074,7 +1092,7 @@ function compilePseudoClass(
 		case "root":
 			compound.tests.push((element) => {
 				const parent = getParentNode(element);
-				return parent !== null && nodeTypeOf(parent) === Node.DOCUMENT_NODE;
+				return parent !== null && nodeTypeOf(parent) === DOCUMENT_NODE;
 			});
 			return;
 		case "empty":
@@ -1126,19 +1144,21 @@ function compilePseudoClass(
 			// Bare, any heading. With arguments, a heading at one of the
 			// listed levels (selectors-5 §7.4).
 			if (args.length === 0) {
-				compound.tests.push((element) => getHeadingLevel(element) !== null);
+				compound.tests.push(
+					(element) => states.getHeadingLevel(element) !== null,
+				);
 				return;
 			}
 			const levels = getIntegerArguments(args, "heading");
 			compound.tests.push((element) => {
-				const level = getHeadingLevel(element);
+				const level = states.getHeadingLevel(element);
 				return level !== null && levels.includes(level);
 			});
 			return;
 		}
 		case "state": {
 			const wanted = getIdentifierArgument(args, "state");
-			compound.tests.push((element) => hasCustomState(element, wanted));
+			compound.tests.push((element) => states.hasCustomState(element, wanted));
 			return;
 		}
 		case "link":
@@ -1151,107 +1171,117 @@ function compilePseudoClass(
 			compound.tests.push(matchNothing);
 			return;
 		case "target":
-			compound.tests.push((element) => isTargetElement(element));
+			compound.tests.push((element) => states.isTargetElement(element));
 			return;
 		case "hover":
-			compound.tests.push((element) => isHovered(element));
+			compound.tests.push((element) => states.isHovered(element));
 			return;
 		case "active":
 			// Between a mouse press and its release, which a terminal's mouse
 			// reporting sends apart.
-			compound.tests.push((element) => isActive(element));
+			compound.tests.push((element) => states.isActive(element));
 			return;
 		case "focus":
-			compound.tests.push((element) => hasFocus(element));
+			compound.tests.push((element) => states.hasFocus(element));
 			return;
 		case "focus-visible":
-			compound.tests.push((element) => isFocusVisible(element));
+			compound.tests.push((element) => states.isFocusVisible(element));
 			return;
 		case "focus-within":
-			compound.tests.push((element) => hasFocusWithin(element));
+			compound.tests.push((element) => states.hasFocusWithin(element));
 			return;
 		case "modal":
 			// A dialog shown modally, or an element in fullscreen.
 			compound.tests.push(
-				(element) => isModalDialog(element) || isFullscreenElement(element),
+				(element) => states.isModalDialog(element) ||
+					states.isFullscreenElement(element),
 			);
 			return;
 		case "popover-open":
-			compound.tests.push((element) => isShowingPopover(element));
+			compound.tests.push((element) => states.isShowingPopover(element));
 			return;
 		case "fullscreen":
-			compound.tests.push((element) => isFullscreenElement(element));
+			compound.tests.push((element) => states.isFullscreenElement(element));
 			return;
 		case "defined":
-			compound.tests.push((element) => isDefinedElement(element));
+			compound.tests.push((element) => states.isDefinedElement(element));
 			return;
 		case "open":
-			compound.tests.push((element) => isOpenElement(element));
+			compound.tests.push((element) => states.isOpenElement(element));
 			return;
 		case "closed":
 			compound.tests.push(
-				(element) => canOpen(element) && !isOpenElement(element),
+				(element) => canOpen(element) && !states.isOpenElement(element),
 			);
 			return;
 		case "checked":
-			compound.tests.push((element) => isCheckedControl(element));
+			compound.tests.push((element) => states.isCheckedControl(element));
 			return;
 		case "indeterminate":
-			compound.tests.push((element) => isIndeterminateControl(element));
+			compound.tests.push((element) => states.isIndeterminateControl(element));
 			return;
 		case "low-value":
-			compound.tests.push((element) => isMeterValue(element, "low"));
+			compound.tests.push((element) => states.isMeterValue(element, "low"));
 			return;
 		case "high-value":
-			compound.tests.push((element) => isMeterValue(element, "high"));
+			compound.tests.push((element) => states.isMeterValue(element, "high"));
 			return;
 		case "optimal-value":
 		case "-moz-meter-optimum":
-			compound.tests.push((element) => getMeterLevel(element) === "optimum");
+			compound.tests.push(
+				(element) => states.getMeterLevel(element) === "optimum",
+			);
 			return;
 		case "-moz-meter-sub-optimum":
-			compound.tests.push((element) => getMeterLevel(element) === "suboptimum");
+			compound.tests.push(
+				(element) => states.getMeterLevel(element) === "suboptimum",
+			);
 			return;
 		case "-moz-meter-sub-sub-optimum":
 			compound.tests.push(
-				(element) => getMeterLevel(element) === "even-less-good",
+				(element) => states.getMeterLevel(element) === "even-less-good",
 			);
 			return;
 		case "placeholder-shown":
-			compound.tests.push((element) => isPlaceholderShown(element));
+			compound.tests.push((element) => states.isPlaceholderShown(element));
 			return;
 		case "default":
-			compound.tests.push((element) => isDefaultControl(element));
+			compound.tests.push((element) => states.isDefaultControl(element));
 			return;
 		case "disabled":
-			compound.tests.push(isActuallyDisabled);
+			compound.tests.push(states.isActuallyDisabled);
 			return;
 		case "enabled":
 			compound.tests.push(
-				(element) => isDisableable(element) && !isActuallyDisabled(element),
+				(element) => isDisableable(element) &&
+					!states.isActuallyDisabled(element),
 			);
 			return;
 		case "valid":
-			compound.tests.push((element) => getValidityMatch(element) === "valid");
+			compound.tests.push(
+				(element) => states.getValidityMatch(element) === "valid",
+			);
 			return;
 		case "invalid":
-			compound.tests.push((element) => getValidityMatch(element) === "invalid");
+			compound.tests.push(
+				(element) => states.getValidityMatch(element) === "invalid",
+			);
 			return;
 		case "user-valid":
 			compound.tests.push(
-				(element) => getUserValidityMatch(element) === "valid",
+				(element) => states.getUserValidityMatch(element) === "valid",
 			);
 			return;
 		case "user-invalid":
 			compound.tests.push(
-				(element) => getUserValidityMatch(element) === "invalid",
+				(element) => states.getUserValidityMatch(element) === "invalid",
 			);
 			return;
 		case "in-range":
-			compound.tests.push((element) => getRangeMatch(element) === "in");
+			compound.tests.push((element) => states.getRangeMatch(element) === "in");
 			return;
 		case "out-of-range":
-			compound.tests.push((element) => getRangeMatch(element) === "out");
+			compound.tests.push((element) => states.getRangeMatch(element) === "out");
 			return;
 		case "required":
 			compound.tests.push((element) =>
@@ -1424,10 +1454,10 @@ function compilePseudoElement(
 		// before `::slotted()` describes the slot it landed in.
 		compound.originTests = compound.tests;
 		compound.tests = [];
-		compound.origin = (element) => getOpenAssignedSlot(element);
+		compound.origin = (element) => states.getOpenAssignedSlot(element);
 		compound.tests.push(
 			(element, state) =>
-				getOpenAssignedSlot(element) !== null &&
+				states.getOpenAssignedSlot(element) !== null &&
 				inner.some((complex) => matchComplex(complex, element, state, false)),
 		);
 		return;
@@ -1442,9 +1472,9 @@ function compilePseudoElement(
 		// `::part()` describes the host whose tree the part lives in.
 		compound.originTests = compound.tests;
 		compound.tests = [];
-		compound.origin = (element) => getShadowHost(getRoot(element));
+		compound.origin = (element) => states.getShadowHost(getRoot(element));
 		compound.tests.push((element) => {
-			const names = getPartNames(element);
+			const names = states.getPartNames(element);
 			return wanted.every((name) => names.includes(name));
 		});
 		return;
@@ -1481,7 +1511,7 @@ function compileNth(
 	const fromEnd = name === "nth-last-child" || name === "nth-last-of-type";
 	const ofType = name === "nth-of-type" || name === "nth-last-of-type";
 	return (element, state) => {
-		if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+		if (nodeTypeOf(element) !== ELEMENT_NODE) {
 			return false;
 		}
 		// The plain forms read the element's place in a list built once per
@@ -1596,7 +1626,8 @@ const DISABLEABLE = new Set([
 function isDisableable(element: Element): boolean {
 	return (
 		(namespaceOf(element) === HTML_NAMESPACE &&
-			DISABLEABLE.has(localNameOf(element))) || isFormAssociatedCustom(element)
+			DISABLEABLE.has(localNameOf(element))) ||
+		states.isFormAssociatedCustom(element)
 	);
 }
 
@@ -1612,7 +1643,9 @@ function isRequirable(element: Element): boolean {
 		return false;
 	}
 	// The type property, which an unknown type reads as text.
-	return REQUIRED_INPUT_TYPES.has((element as unknown as {type: string}).type);
+	return states.REQUIRED_INPUT_TYPES.has(
+		(element as unknown as {type: string}).type,
+	);
 }
 
 // `:read-write`: a text control the user can type into, or anything an
@@ -1624,10 +1657,10 @@ function isMutable(element: Element): boolean {
 			const type = name === "input"
 				? (element as unknown as {type: string}).type
 				: "text";
-			if (READONLY_INPUT_TYPES.has(type)) {
+			if (states.READONLY_INPUT_TYPES.has(type)) {
 				return (
 					attributeOf(element, "readonly") === null &&
-					!isActuallyDisabled(element)
+					!states.isActuallyDisabled(element)
 				);
 			}
 		}
@@ -1672,12 +1705,12 @@ function isEmpty(element: Element): boolean {
 		child !== null;
 		child = getNextSiblingNode(child)
 	) {
-		if (nodeTypeOf(child) === Node.ELEMENT_NODE) {
+		if (nodeTypeOf(child) === ELEMENT_NODE) {
 			return false;
 		}
 		if (
-			(nodeTypeOf(child) === Node.TEXT_NODE ||
-				nodeTypeOf(child) === Node.CDATA_SECTION_NODE) &&
+			(nodeTypeOf(child) === TEXT_NODE ||
+				nodeTypeOf(child) === CDATA_SECTION_NODE) &&
 				(child.nodeValue ?? "") !== ""
 		) {
 			return false;
@@ -1731,7 +1764,7 @@ function getLanguageParent(node: Element): Element | null {
 	if (parent === null) {
 		return null;
 	}
-	return isElement(parent) ? parent : getShadowHost(parent);
+	return isElement(parent) ? parent : states.getShadowHost(parent);
 }
 
 // The nearest lang attribute, climbing out of a shadow tree into its host
@@ -1806,7 +1839,7 @@ const AUTO_INPUT_TYPES = new Set([
 function compileDir(args: CSSTree.SelectorNode[]): Predicate {
 	const wanted = toASCIILowercase(getIdentifierArgument(args, "dir"));
 	return (element) =>
-		nodeTypeOf(element) === Node.ELEMENT_NODE &&
+		nodeTypeOf(element) === ELEMENT_NODE &&
 		getDirectionality(element) === wanted;
 }
 
@@ -1834,7 +1867,7 @@ export function getDirectionality(element: Element): "ltr" | "rtl" {
 
 // Includes `bdi`'s default.
 function getDeclaredDirection(element: Element): "ltr" | "rtl" | "auto" | null {
-	if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+	if (nodeTypeOf(element) !== ELEMENT_NODE) {
 		return null;
 	}
 	const html = namespaceOf(element) === HTML_NAMESPACE;
@@ -1875,8 +1908,8 @@ function getTextUnder(element: Element, all: boolean): string {
 		child = getNextSiblingNode(child)
 	) {
 		if (
-			nodeTypeOf(child) === Node.TEXT_NODE ||
-			nodeTypeOf(child) === Node.CDATA_SECTION_NODE
+			nodeTypeOf(child) === TEXT_NODE ||
+			nodeTypeOf(child) === CDATA_SECTION_NODE
 		) {
 			text += child.nodeValue ?? "";
 			continue;
@@ -1933,7 +1966,7 @@ function matchFrom(
 	if (featureless && !compound.host) {
 		return false;
 	}
-	if (nodeTypeOf(element) !== Node.ELEMENT_NODE) {
+	if (nodeTypeOf(element) !== ELEMENT_NODE) {
 		return false;
 	}
 	for (const test of compound.tests) {
@@ -2007,7 +2040,7 @@ function getParentStep(
 	element: Element,
 	state: MatchState,
 ): {element: Element; featureless: boolean} | null {
-	if (state.shadow !== null && getShadowHost(state.shadow) === element) {
+	if (state.shadow !== null && states.getShadowHost(state.shadow) === element) {
 		return null;
 	}
 	const parent = getParentNode(element);
@@ -2021,7 +2054,7 @@ function getParentStep(
 	// the host is featureless. Only `:host` and its two functional forms can
 	// match it.
 	if (state.shadow !== null && parent === state.shadow) {
-		const host = getShadowHost(parent);
+		const host = states.getShadowHost(parent);
 		return host === null ? null : {element: host, featureless: true};
 	}
 	return null;
@@ -2040,7 +2073,7 @@ function hasMatch(
 	// Asked of the host from inside its shadow tree, :has() searches that
 	// tree, and the answer is not the one a light-tree rule would get.
 	const hostOfShadow =
-		state.shadow !== null && getShadowHost(state.shadow) === element;
+		state.shadow !== null && states.getShadowHost(state.shadow) === element;
 	const store = cacheable && !hostOfShadow ? state.hasResults : null;
 	let answers = store?.get(element);
 	const known = answers?.get(inner);
@@ -2068,7 +2101,7 @@ function findHasMatch(
 	// to.
 	const inside: MatchState = {...state, anchor: element};
 	const hostOfShadow =
-		state.shadow !== null && getShadowHost(state.shadow) === element;
+		state.shadow !== null && states.getShadowHost(state.shadow) === element;
 	for (const complex of inner) {
 		const selects = (node: Element): boolean =>
 			matchComplex(complex, node, inside, false);
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index fe53dc25..7e46e3d9 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -54,6 +54,7 @@ import {
 	selectAll,
 	selectFirst,
 	SelectorError,
+	setElementStates,
 } from "./cssselectors.ts";
 import * as CSSValues from "./cssvalues.ts";
 import type {Exchange} from "./exchange.ts";
@@ -39266,3 +39267,37 @@ export function setRequestDestination(
 		configurable: true,
 	});
 }
+
+setElementStates({
+	getHeadingLevel,
+	getMeterLevel,
+	getOpenAssignedSlot,
+	getPartNames,
+	getRangeMatch,
+	getShadowHost,
+	getUserValidityMatch,
+	getValidityMatch,
+	hasCustomState,
+	hasFocus,
+	hasFocusWithin,
+	isActive,
+	isActuallyDisabled,
+	isCheckedControl,
+	isDefaultControl,
+	isDefinedElement,
+	isFocusVisible,
+	isFormAssociatedCustom,
+	isFullscreenElement,
+	isHovered,
+	isHTMLNode,
+	isIndeterminateControl,
+	isInQuirksMode,
+	isMeterValue,
+	isModalDialog,
+	isOpenElement,
+	isPlaceholderShown,
+	isShowingPopover,
+	isTargetElement,
+	READONLY_INPUT_TYPES,
+	REQUIRED_INPUT_TYPES,
+});
diff --git a/tests/import-order.test.ts b/tests/import-order.test.ts
index 980b5cab..4682bd1b 100644
--- a/tests/import-order.test.ts
+++ b/tests/import-order.test.ts
@@ -1,12 +1,11 @@
 /**
- * cssvalues, cssselectors, dom and cssom form an import cycle, so whichever
- * of them an application reaches first is evaluated before the others'
- * tables exist. A module-level constant that calls across the cycle throws
+ * An application can reach cssvalues before anything else of the engine,
+ * and a module-level constant that needs a module not yet evaluated throws
  * a TDZ ReferenceError for that first importer and nobody else, which is
  * why the entry point never saw it.
  *
- * The import is the whole test: nothing else here reaches the cycle, so
- * cssvalues is the module that evaluates it.
+ * The import is the whole test: nothing else here is imported, so
+ * cssvalues is the first module evaluated.
  */
 import {expect, test} from "@b9g/libuild/test";
 

From 332e2264bfbf72e16c98395a9b41cbf377c71035 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:30:04 -0400
Subject: [PATCH 35/99] Take mathml.ts out of the DOM's import cycle

innerText asked mathml.ts for a formula's one-line text, and mathml.ts
reads the cascade, which reads the DOM. innerText already holds the
layout, which loads mathml.ts from above the DOM, and asks it instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts    | 3 +--
 src/internal/layout.ts | 7 +++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 7e46e3d9..9e7466e1 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -85,7 +85,6 @@ import {
 	resolveImageURL,
 } from "./images.ts";
 import type {Layout} from "./layout.ts";
-import {linearizeMath} from "./mathml.ts";
 import type {ResourceLoader} from "./resources.ts";
 import {
 	_,
@@ -11433,7 +11432,7 @@ function collectRenderedText(
 		localNameOf(element) === "math" &&
 		namespaceOf(element) === MATHML_NAMESPACE
 	) {
-		items.push(linearizeMath(element as unknown as globalThis.Element));
+		items.push(layout.getMathText(element));
 	} else {
 		for (
 			let childSlots = _(element).firstChild;
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 1928ded7..2321a0fb 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -72,6 +72,7 @@ import {
 	getMathCellRects,
 	isMathRoot,
 	layoutMath,
+	linearizeMath,
 	type MathBox,
 } from "./mathml.ts";
 import {
@@ -5868,6 +5869,12 @@ export class Layout {
 	// reads it: white space processed, case transformed, and a preserved
 	// newline between two lines kept. A soft wrap is no break, and the
 	// space it swallowed is a space again.
+	// The one-line text of a <math> element, for innerText. The DOM asks
+	// here rather than importing the MathML layout, which reads the DOM.
+	getMathText(element: Element): string {
+		return linearizeMath(element);
+	}
+
 	getRenderedText(textNode: Text): string {
 		const data = textNode.data;
 		const whiteSpace = getWhiteSpace(textNode);

From bafc4e93797a73da8e74886e6d00693a63210c2a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:37:35 -0400
Subject: [PATCH 36/99] Move the cell size and its unit conversions out of
 cssom.ts into units.ts

What a cell measures in CSS pixels, and the conversions between the two,
read only the attached document's settings. In units.ts, above tree.ts,
the DOM converts lengths without importing the cascade.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts             | 20 ++++++------
 src/internal/cssom.ts    | 69 +---------------------------------------
 src/internal/dom.ts      | 30 ++++-------------
 src/internal/input.ts    |  2 +-
 src/internal/layout.ts   |  4 +--
 src/internal/mathml.ts   |  3 +-
 src/internal/painter.ts  |  2 +-
 src/internal/replaced.ts |  9 ++----
 src/internal/tree.ts     | 28 +++++++++++++++-
 src/internal/units.ts    | 68 +++++++++++++++++++++++++++++++++++++++
 10 files changed, 119 insertions(+), 116 deletions(-)
 create mode 100644 src/internal/units.ts

diff --git a/src/index.ts b/src/index.ts
index a6097c69..32c47243 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +1,7 @@
 import "./internal/inspector.ts";
 
 import type {CanvasCellGridContext} from "./internal/canvas.ts";
-import {
-	Cascade,
-	type CellSize,
-	type CellSizeSetting,
-	dispose,
-	getCellSize,
-	hoverRulesExist,
-	UNIT_CELL,
-} from "./internal/cssom.ts";
+import {Cascade, dispose, hoverRulesExist} from "./internal/cssom.ts";
 import {
 	applyMutations,
 	attachDocument,
@@ -26,7 +18,6 @@ import {
 	type EventTargetSlots,
 	flushLayout,
 	flushObservers,
-	getCellSizeSetting,
 	getGraphicsSettings,
 	getProcessTimers,
 	type GraphicsSetting,
@@ -115,9 +106,16 @@ import {
 } from "./internal/resources.ts";
 import {_, type internals, moveLateMembers} from "./internal/slots.ts";
 import {queueMicrotask, setTimeout} from "./internal/timers.ts";
+import {getCellSizeSetting} from "./internal/tree.ts";
+import {
+	type CellSize,
+	type CellSizeSetting,
+	getCellSize,
+	UNIT_CELL,
+} from "./internal/units.ts";
 
 export type {CanvasCellGridContext} from "./internal/canvas.ts";
-export type {CellSize} from "./internal/cssom.ts";
+export type {CellSize} from "./internal/units.ts";
 export {transportFromProcess, transportFromSSH} from "./internal/exchange.ts";
 export {
 	ExtendableEvent,
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index f1909b6a..ff4c61b0 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -28,8 +28,6 @@ import {
 	flushLayout,
 	flushStyle,
 	getAddedNodes,
-	getCellPixels,
-	getCellSizeSetting,
 	getClassTokens,
 	getHighlightRegistry,
 	getPseudoHost,
@@ -85,6 +83,7 @@ import {
 	nodeTypeOf,
 	ownerDocumentOf,
 } from "./tree.ts";
+import {cellsFromPx, getCellSize, pxFromCells, UNIT_CELL} from "./units.ts";
 import {
 	UA_CONTROL_STYLES,
 	UA_DOCUMENT_STYLES,
@@ -92,72 +91,6 @@ import {
 } from "./useragent.ts";
 import {windowMember} from "./webidl.ts";
 
-// What one terminal cell measures in CSS pixels, per document. Layout
-// counts cells; everything a page writes or reads counts CSS pixels. At
-// the default unit size the two are the same number.
-
-export interface CellSize {
-	width: number;
-	height: number;
-}
-
-export const UNIT_CELL: Readonly<CellSize> = {width: 1, height: 1};
-
-/**
- * How the page's lengths map to cells: one CSS pixel a cell, the
- * terminal's pixels once it reports them, or a size the program gives.
- */
-export type CellSizeSetting = "unit" | "auto" | Readonly<CellSize>;
-
-export function getCellSize(node: Node | null | undefined): Readonly<CellSize> {
-	const setting = node ? getCellSizeSetting(node) : undefined;
-	if (setting === undefined || setting === "unit") {
-		return UNIT_CELL;
-	}
-	return setting === "auto" ? getCellPixels(node!)! : setting;
-}
-
-/**
- * The cell an image's pixels divide by. An image's pixels are CSS
- * pixels, so this is the page's cell. Under the unit cell that would be
- * a cell per pixel, so the screen's cell stands in. A document no TermDOM
- * draws has no screen, and draws no image.
- */
-export function getImageCellSize(
-	node: Node | null | undefined,
-): Readonly<CellSize> {
-	const page = getCellSize(node);
-	if (page !== UNIT_CELL) {
-		return page;
-	}
-	return (node && getCellPixels(node)) ?? page;
-}
-
-/**
- * CSS pixels along one axis as cells, fractions kept. Layout rounds the
- * edges of the boxes it places, not each length, so lengths that add up
- * still add up.
- */
-function cellsFromPx(
-	px: number,
-	vertical: boolean,
-	node: Node | null | undefined,
-): number {
-	const cell = getCellSize(node);
-	const size = vertical ? cell.height : cell.width;
-	return px / size;
-}
-
-/** Cells along one axis as CSS pixels. */
-export function pxFromCells(
-	cells: number,
-	vertical: boolean,
-	node: Node | null | undefined,
-): number {
-	const cell = getCellSize(node);
-	return cells * (vertical ? cell.height : cell.width);
-}
-
 // Per-element defaults that are STATE, not stylesheet: the fullscreen
 // element's viewport block, a select sized to its widest option label so
 // the text control never jumps, the size attribute driving an input's width.
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 9e7466e1..ebb0267c 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -27,13 +27,10 @@ import {
 import {
 	adoptStyleSheets,
 	type Cascade,
-	type CellSizeSetting,
 	CSSOM_INTERFACES,
 	getAdoptedStyleSheets,
 	getBoxModel,
-	getCellSize,
 	getComputedValue,
-	getImageCellSize,
 	getInlineStyle,
 	getStyleSheets,
 	getWhiteSpace,
@@ -41,11 +38,9 @@ import {
 	handleMutations,
 	handleStateChange,
 	mediaQueryMatches,
-	pxFromCells,
 	styleAttributeChanged,
 	styleElementSheet,
 	styleShadowAttached,
-	UNIT_CELL,
 } from "./cssom.ts";
 import {
 	closestSelector,
@@ -153,6 +148,13 @@ import {
 	XML_NAMESPACE,
 	XMLNS_NAMESPACE,
 } from "./tree.ts";
+import {
+	type CellSizeSetting,
+	getCellSize,
+	getImageCellSize,
+	pxFromCells,
+	UNIT_CELL,
+} from "./units.ts";
 import {
 	type Constructor,
 	installInterfaces,
@@ -36216,24 +36218,6 @@ export function getGraphicsSettings(
 		: {images: _(attached).extra.images, canvas: _(attached).extra.canvas};
 }
 
-/** The cellSize option of the TermDOM drawing the node's document. */
-export function getCellSizeSetting(
-	node: globalThis.Node,
-): CellSizeSetting | undefined {
-	return _maybe(getAttachedDocument(node))?.extra.cellSize;
-}
-
-/**
- * One cell in the terminal's pixels, as the framebuffer drawing the
- * node's document has it, or null for a document no TermDOM draws.
- */
-export function getCellPixels(
-	node: globalThis.Node,
-): Readonly<{width: number; height: number}> | null {
-	return _maybe(getAttachedDocument(node))?.extra.framebuffer.cellPixels ??
-		null;
-}
-
 /** OSC 52 carries text and only text. */
 const CLIPBOARD_TEXT_TYPE = "text/plain";
 
diff --git a/src/internal/input.ts b/src/internal/input.ts
index 2e8a37f7..d239bf7b 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -4,7 +4,6 @@ import {
 	handleActiveChange,
 	handleFocusChange,
 	handleHoverChange,
-	pxFromCells,
 } from "./cssom.ts";
 import {
 	commitRangeThumb,
@@ -59,6 +58,7 @@ import {
 	localNameOf,
 	nodeTypeOf,
 } from "./tree.ts";
+import {pxFromCells} from "./units.ts";
 
 // The keys a terminal names, with the legacy keyCode plenty of code
 // still reads. Also the list of names that are physical key identities.
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 2321a0fb..11fc7bda 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6,7 +6,6 @@ import {
 	getCellBlockMargin,
 	getCellBlockSize,
 	getCellPadding,
-	getCellSize,
 	getComputedValue,
 	getDeclaredDisplay,
 	getWhiteSpace as getElementWhiteSpace,
@@ -14,11 +13,9 @@ import {
 	getTabSize,
 	getUsedOverflow,
 	hasLayoutOrPaintContainment,
-	pxFromCells,
 	toCellBorder,
 	toCellLength,
 	toWholeCells,
-	UNIT_CELL,
 	usedValuesChanged,
 } from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
@@ -91,6 +88,7 @@ import {
 	writeClusterWidths,
 } from "./text.ts";
 import {attributeOf, localNameOf, nodeTypeOf} from "./tree.ts";
+import {getCellSize, pxFromCells, UNIT_CELL} from "./units.ts";
 
 type Position = "static" | "relative" | "absolute" | "fixed" | "sticky";
 
diff --git a/src/internal/mathml.ts b/src/internal/mathml.ts
index eace17e2..cf8c21a9 100644
--- a/src/internal/mathml.ts
+++ b/src/internal/mathml.ts
@@ -5,7 +5,7 @@
  * the block and inline engines place, and what the painter blits.
  */
 
-import {getCellSize, getComputedValue, resolveLength} from "./cssom.ts";
+import {getComputedValue, resolveLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import type {CellStyle} from "./framebuffer.ts";
 import {getStringWidth, graphemeSegmenter} from "./text.ts";
@@ -18,6 +18,7 @@ import {
 	namespaceOf,
 	nodeTypeOf,
 } from "./tree.ts";
+import {getCellSize} from "./units.ts";
 
 // ---------------------------------------------------------------------
 // The operator dictionary
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 853c9e5a..dd42a6f1 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -4,7 +4,6 @@ import {
 	establishesFixedContainingBlock,
 	getBoxModel,
 	getCellBorderWidths,
-	getCellSize,
 	getComputedValue,
 	getDeclaredDisplay,
 	getMarkerContent,
@@ -93,6 +92,7 @@ import {
 import {isReplacedBox, renderReplaced} from "./replaced.ts";
 import {getStringWidth} from "./text.ts";
 import {containsOf, nodeTypeOf} from "./tree.ts";
+import {getCellSize} from "./units.ts";
 
 // Edges, not origin and size. An unclipped axis is +-Infinity, and an
 // edge computed from an infinite origin and size is NaN.
diff --git a/src/internal/replaced.ts b/src/internal/replaced.ts
index ee54096c..504784ff 100644
--- a/src/internal/replaced.ts
+++ b/src/internal/replaced.ts
@@ -14,13 +14,7 @@
  * are cells.
  */
 import {type CanvasTextRun, halfBlockCell} from "./canvas.ts";
-import {
-	getBoxModel,
-	getCellSize,
-	getComputedValue,
-	getImageCellSize,
-	toCellLength,
-} from "./cssom.ts";
+import {getBoxModel, getComputedValue, toCellLength} from "./cssom.ts";
 import * as CSSValues from "./cssvalues.ts";
 import {
 	CellContext,
@@ -43,6 +37,7 @@ import {
 	sampleBitmap,
 } from "./images.ts";
 import {getStringWidth} from "./text.ts";
+import {getCellSize, getImageCellSize} from "./units.ts";
 
 /**
  * Whether the element lays out as a replaced element. An image that is
diff --git a/src/internal/tree.ts b/src/internal/tree.ts
index 8316f3ec..31235529 100644
--- a/src/internal/tree.ts
+++ b/src/internal/tree.ts
@@ -6,8 +6,16 @@
  */
 import type {Attr, AttributeSlots, Document, Element, Node} from "./dom.ts";
 import type {Exchange} from "./exchange.ts";
-import {_, objectOf, rememberObject, type Slots, slotsOf} from "./slots.ts";
+import {
+	_,
+	_maybe,
+	objectOf,
+	rememberObject,
+	type Slots,
+	slotsOf,
+} from "./slots.ts";
 import {toASCIILowercase} from "./text.ts";
+import type {CellSizeSetting} from "./units.ts";
 
 export const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
 export const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
@@ -221,3 +229,21 @@ export function getAttachedDocument(
 		? (document as AttachedDocument)
 		: undefined;
 }
+
+/** The cellSize option of the TermDOM drawing the node's document. */
+export function getCellSizeSetting(
+	node: globalThis.Node,
+): CellSizeSetting | undefined {
+	return _maybe(getAttachedDocument(node))?.extra.cellSize;
+}
+
+/**
+ * One cell in the terminal's pixels, as the framebuffer drawing the
+ * node's document has it, or null for a document no TermDOM draws.
+ */
+export function getCellPixels(
+	node: globalThis.Node,
+): Readonly<{width: number; height: number}> | null {
+	return _maybe(getAttachedDocument(node))?.extra.framebuffer.cellPixels ??
+		null;
+}
diff --git a/src/internal/units.ts b/src/internal/units.ts
new file mode 100644
index 00000000..2ab7ae70
--- /dev/null
+++ b/src/internal/units.ts
@@ -0,0 +1,68 @@
+/**
+ * What one terminal cell measures in CSS pixels, per document. Layout
+ * counts cells; everything a page writes or reads counts CSS pixels. At
+ * the default unit size the two are the same number.
+ */
+import {getCellPixels, getCellSizeSetting} from "./tree.ts";
+
+export interface CellSize {
+	width: number;
+	height: number;
+}
+
+export const UNIT_CELL: Readonly<CellSize> = {width: 1, height: 1};
+
+/**
+ * How the page's lengths map to cells: one CSS pixel a cell, the
+ * terminal's pixels once it reports them, or a size the program gives.
+ */
+export type CellSizeSetting = "unit" | "auto" | Readonly<CellSize>;
+
+export function getCellSize(node: Node | null | undefined): Readonly<CellSize> {
+	const setting = node ? getCellSizeSetting(node) : undefined;
+	if (setting === undefined || setting === "unit") {
+		return UNIT_CELL;
+	}
+	return setting === "auto" ? getCellPixels(node!)! : setting;
+}
+
+/**
+ * The cell an image's pixels divide by. An image's pixels are CSS
+ * pixels, so this is the page's cell. Under the unit cell that would be
+ * a cell per pixel, so the screen's cell stands in. A document no TermDOM
+ * draws has no screen, and draws no image.
+ */
+export function getImageCellSize(
+	node: Node | null | undefined,
+): Readonly<CellSize> {
+	const page = getCellSize(node);
+	if (page !== UNIT_CELL) {
+		return page;
+	}
+	return (node && getCellPixels(node)) ?? page;
+}
+
+/**
+ * CSS pixels along one axis as cells, fractions kept. Layout rounds the
+ * edges of the boxes it places, not each length, so lengths that add up
+ * still add up.
+ */
+export function cellsFromPx(
+	px: number,
+	vertical: boolean,
+	node: Node | null | undefined,
+): number {
+	const cell = getCellSize(node);
+	const size = vertical ? cell.height : cell.width;
+	return px / size;
+}
+
+/** Cells along one axis as CSS pixels. */
+export function pxFromCells(
+	cells: number,
+	vertical: boolean,
+	node: Node | null | undefined,
+): number {
+	const cell = getCellSize(node);
+	return cells * (vertical ? cell.height : cell.width);
+}

From 39897325a0637867f0e97dfc16f5d79affcbf21c Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 19:49:34 -0400
Subject: [PATCH 37/99] Break the last import cycle, between dom.ts and
 cssom.ts, and test that none comes back

dom.ts reaches the CSSOM and the cascade through setStyleHooks, which
cssom.ts calls as it loads: the style objects it hands out (el.style,
styleSheets, adoptedStyleSheets, a <style>'s sheet), the computed values
it reads, and the changes it reports. cssom.ts imports dom.ts freely and
sits above it. Putting a window together needs the DOM's, the CSSOM's
and the canvas's interfaces at once, so createWindow and what it uses
move to window.ts, above all three.

No module of the engine now imports, at run time, one that imports it
back. A test reads every module's imports and fails on any cycle.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/generate-dom-idl.ts         |   2 +-
 src/index.ts                        |   2 +-
 src/internal/cssom.ts               |  18 ++
 src/internal/dom.ts                 | 350 +++++++---------------------
 src/internal/window.ts              | 220 +++++++++++++++++
 tests/constraint-validation.test.ts |   2 +-
 tests/dom-dispatch.test.ts          |   3 +-
 tests/dom-misc.test.ts              |   3 +-
 tests/dom.test.ts                   |   2 +-
 tests/exchange-events.test.ts       |   2 +-
 tests/form-associated.test.ts       |   2 +-
 tests/formdata.test.ts              |   2 +-
 tests/import-graph.test.ts          |  78 +++++++
 tests/inspector.test.ts             |   3 +-
 tests/mathml.test.ts                |   2 +-
 tests/selection-modify.test.ts      |   2 +-
 tests/selectors.test.ts             |   2 +-
 tests/serialization.test.ts         |   3 +-
 tests/shadow-dom.test.ts            |   2 +-
 tests/window-named-access.test.ts   |   2 +-
 20 files changed, 425 insertions(+), 277 deletions(-)
 create mode 100644 src/internal/window.ts
 create mode 100644 tests/import-graph.test.ts

diff --git a/scripts/generate-dom-idl.ts b/scripts/generate-dom-idl.ts
index 3d83d0f0..bbf271c8 100644
--- a/scripts/generate-dom-idl.ts
+++ b/scripts/generate-dom-idl.ts
@@ -18,7 +18,7 @@ import {fileURLToPath} from "node:url";
 
 import {parse} from "webidl2";
 
-import {getWindowInterfaceNames} from "../src/internal/dom.ts";
+import {getWindowInterfaceNames} from "../src/internal/window.ts";
 
 const require = createRequire(import.meta.url);
 const idlDir = dirname(require.resolve("@webref/idl/package.json"));
diff --git a/src/index.ts b/src/index.ts
index 32c47243..fa8fa78a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,7 +9,6 @@ import {
 	clearHighlights,
 	clearWindowTimers,
 	constructInternal,
-	createWindow,
 	disconnectObservers,
 	dispatchAsUserAgent,
 	DOMException,
@@ -113,6 +112,7 @@ import {
 	getCellSize,
 	UNIT_CELL,
 } from "./internal/units.ts";
+import {createWindow} from "./internal/window.ts";
 
 export type {CanvasCellGridContext} from "./internal/canvas.ts";
 export type {CellSize} from "./internal/units.ts";
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index ff4c61b0..6e35f048 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -45,6 +45,7 @@ import {
 	releaseRemovedNodes,
 	reobserveShadowRoot,
 	setAttributeOf,
+	setStyleHooks,
 	styleElementCount,
 	TransitionEvent,
 	type Window,
@@ -10479,3 +10480,20 @@ export function styleShadowAttached(root: ShadowRoot): void {
 		.get((root.host as Element).ownerDocument as object)
 		?.registerShadowRoot(root);
 }
+
+setStyleHooks({
+	adoptStyleSheets,
+	getAdoptedStyleSheets,
+	getBoxModel,
+	getComputedValue,
+	getInlineStyle,
+	getStyleSheets,
+	getWhiteSpace,
+	handleFocusChange,
+	handleMutations,
+	handleStateChange,
+	mediaQueryMatches,
+	styleAttributeChanged,
+	styleElementSheet,
+	styleShadowAttached,
+});
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index ebb0267c..756ef4e3 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -10,8 +10,6 @@ import {
 } from "../generated/htmlidl.ts";
 import {
 	CanvasCellGridContext,
-	CanvasGradient,
-	CanvasPattern,
 	CanvasRenderingContext2D,
 	clearCanvasText,
 	createCellGridContext,
@@ -20,28 +18,11 @@ import {
 	getCanvasText,
 	ImageBitmap,
 	ImageData,
-	Path2D,
 	registerDrawable,
 	resetContextState,
 } from "./canvas.ts";
-import {
-	adoptStyleSheets,
-	type Cascade,
-	CSSOM_INTERFACES,
-	getAdoptedStyleSheets,
-	getBoxModel,
-	getComputedValue,
-	getInlineStyle,
-	getStyleSheets,
-	getWhiteSpace,
-	handleFocusChange,
-	handleMutations,
-	handleStateChange,
-	mediaQueryMatches,
-	styleAttributeChanged,
-	styleElementSheet,
-	styleShadowAttached,
-} from "./cssom.ts";
+import type * as CSSOM from "./cssom.ts";
+import type {Cascade} from "./cssom.ts";
 import {
 	closestSelector,
 	getDirectionality,
@@ -93,7 +74,6 @@ import {
 	isSealed,
 	objectOf,
 	ownerOf,
-	prepareClasses,
 	rememberObject,
 	seal,
 	type Slots,
@@ -155,12 +135,36 @@ import {
 	pxFromCells,
 	UNIT_CELL,
 } from "./units.ts";
-import {
-	type Constructor,
-	installInterfaces,
-	interfaceNameOf,
-	windowMember,
-} from "./webidl.ts";
+import {interfaceNameOf} from "./webidl.ts";
+
+/**
+ * What the DOM asks of the CSSOM and the cascade: the style objects it
+ * hands out, the computed values it reads, and the changes it reports.
+ * cssom.ts gives them as it loads, so this module never imports it.
+ */
+type StyleHooks = Pick<
+	typeof CSSOM,
+	"adoptStyleSheets" |
+	"getAdoptedStyleSheets" |
+	"getBoxModel" |
+	"getComputedValue" |
+	"getInlineStyle" |
+	"getStyleSheets" |
+	"getWhiteSpace" |
+	"handleFocusChange" |
+	"handleMutations" |
+	"handleStateChange" |
+	"mediaQueryMatches" |
+	"styleAttributeChanged" |
+	"styleElementSheet" |
+	"styleShadowAttached"
+>;
+
+let cssom: StyleHooks;
+
+export function setStyleHooks(given: StyleHooks): void {
+	cssom = given;
+}
 
 // Safe to call more than once, and synchronous: the shadow tree exists
 // when this returns. A control that was removed and re-inserted keeps its
@@ -5816,7 +5820,10 @@ function callListener(
 // reporting mode" has it, rather than firing another without end.
 const reportingWindows = new WeakSet<object>();
 
-function reportError(error: unknown, document: Document | null = null): void {
+export function reportError(
+	error: unknown,
+	document: Document | null = null,
+): void {
 	const view = document === null ? null : _(document).extra.defaultView;
 	if (view !== null && !reportingWindows.has(view)) {
 		const event = constructInternal(() =>
@@ -7296,7 +7303,7 @@ function removeNode(node: Node, suppressObservers = false): void {
 					: nodeTypeOf(parent) === ELEMENT_NODE ? (parent as Element) : null;
 				const attached = getAttachedDocument(document);
 				if (left !== null && attached !== undefined) {
-					handleFocusChange(_(attached).extra.cascade, left);
+					cssom.handleFocusChange(_(attached).extra.cascade, left);
 				}
 				break;
 			}
@@ -9723,7 +9730,7 @@ function setExistingAttributeValue(attribute: Attr, value: string): void {
 // them. An element's own steps read the element, and they must see the
 // tree the rest of the world will see.
 function notifyAttributeChange(element: Element, localName: string): void {
-	styleAttributeChanged(element, localName);
+	cssom.styleAttributeChanged(element, localName);
 }
 
 function changeAttribute(attribute: Attr, value: string): void {
@@ -11391,7 +11398,7 @@ function getInnerText(element: Element): string {
 
 function isElementRendered(layout: Layout, element: Element): boolean {
 	return (
-		getComputedValue(element, "display") === "contents" ||
+		cssom.getComputedValue(element, "display") === "contents" ||
 		layout.getRects(element).length > 0
 	);
 }
@@ -11404,7 +11411,8 @@ function collectRenderedText(
 	if (nodeTypeOf(node) === TEXT_NODE) {
 		const parent = node.parentElement as Element | null;
 		if (
-			parent === null || getComputedValue(parent, "visibility") === "visible"
+			parent === null ||
+			cssom.getComputedValue(parent, "visibility") === "visible"
 		) {
 			items.push(layout.getRenderedText(node as unknown as globalThis.Text));
 		}
@@ -11414,13 +11422,13 @@ function collectRenderedText(
 		return;
 	}
 	const element = node as Element;
-	const display = getComputedValue(element, "display");
+	const display = cssom.getComputedValue(element, "display");
 	if (display === "none") {
 		return;
 	}
 	const shown =
 		isElementRendered(layout, element) &&
-		getComputedValue(element, "visibility") === "visible";
+		cssom.getComputedValue(element, "visibility") === "visible";
 	const around = !shown
 		? 0
 		: localNameOf(element) === "p" && namespaceOf(element) === HTML_NAMESPACE
@@ -11476,7 +11484,7 @@ function hasLaterSibling(element: Element, display: string): boolean {
 		next !== null;
 		next = next.nextElementSibling as Element | null
 	) {
-		if (getComputedValue(next, "display") === display) {
+		if (cssom.getComputedValue(next, "display") === display) {
 			return true;
 		}
 	}
@@ -11717,11 +11725,11 @@ export class HTMLElement extends Element {
 	}
 
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	// Inherited. An element that sets no mode takes its parent's, and the
@@ -12081,7 +12089,7 @@ export class HTMLElement extends Element {
 		if (attached === undefined) {
 			return;
 		}
-		handleFocusChange(_(attached).extra.cascade, this, null);
+		cssom.handleFocusChange(_(attached).extra.cascade, this, null);
 		invalidate(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 		dispatchAsUserAgent(
@@ -12242,7 +12250,7 @@ function runFocusingSteps(element: HTMLElement): void {
 	// :focus rules match live and a focus move is not a mutation, so both
 	// elements' resolved styles are stale whether or not a listener changes
 	// anything.
-	handleFocusChange(_(attached).extra.cascade, previous, element);
+	cssom.handleFocusChange(_(attached).extra.cascade, previous, element);
 	invalidate(_(attached).extra.framebuffer);
 	void _(attached).extra.render();
 	// An edit the user made in the control focus is leaving is committed
@@ -12465,14 +12473,14 @@ Object.defineProperties(HTMLElement.prototype, {
 	// The border widths, which only the cascade decides.
 	clientLeft: {
 		get(this: HTMLElement): number {
-			return pxFromCells(getBoxModel(this).borderLeftWidth, false, this);
+			return pxFromCells(cssom.getBoxModel(this).borderLeftWidth, false, this);
 		},
 		configurable: true,
 		enumerable: true,
 	},
 	clientTop: {
 		get(this: HTMLElement): number {
-			return pxFromCells(getBoxModel(this).borderTopWidth, true, this);
+			return pxFromCells(cssom.getBoxModel(this).borderTopWidth, true, this);
 		},
 		configurable: true,
 		enumerable: true,
@@ -12788,11 +12796,11 @@ export class SVGElement extends Element {
 	declare blur: globalThis.SVGElement["blur"];
 	declare focus: globalThis.SVGElement["focus"];
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	override get className(): any {
@@ -12975,11 +12983,11 @@ class MathMLElement extends Element {
 	declare blur: globalThis.MathMLElement["blur"];
 	declare focus: globalThis.MathMLElement["focus"];
 	get style(): globalThis.CSSStyleDeclaration {
-		return getInlineStyle(this);
+		return cssom.getInlineStyle(this);
 	}
 
 	set style(value: unknown) {
-		getInlineStyle(this).cssText = value == null ? "" : `${value}`;
+		cssom.getInlineStyle(this).cssText = value == null ? "" : `${value}`;
 	}
 
 	get attributeStyleMap(): globalThis.StylePropertyMap {
@@ -13830,7 +13838,7 @@ function getConstructorDefinition(
 // shared by every window in the realm, but the names defined for them
 // are not, so two windows in one process, such as two terminal sessions,
 // each define their own elements.
-function createWindowRegistry(): CustomElementRegistry {
+export function createWindowRegistry(): CustomElementRegistry {
 	return constructInternal(() => new CustomElementRegistry());
 }
 
@@ -14053,15 +14061,15 @@ export class ShadowRoot
 	}
 
 	get styleSheets(): globalThis.StyleSheetList {
-		return getStyleSheets(this);
+		return cssom.getStyleSheets(this);
 	}
 
 	get adoptedStyleSheets(): globalThis.CSSStyleSheet[] {
-		return getAdoptedStyleSheets(this);
+		return cssom.getAdoptedStyleSheets(this);
 	}
 
 	set adoptedStyleSheets(value: globalThis.CSSStyleSheet[]) {
-		adoptStyleSheets(this, value);
+		cssom.adoptStyleSheets(this, value);
 	}
 
 	// Retargeted into this tree: the shadow-including ancestor of the
@@ -14333,7 +14341,7 @@ function attachShadowRoot(
 	shadowSlots.extra.serializable = serializable;
 	shadowSlots.registry = registry;
 	elementSlots.shadowRoot = shadow;
-	styleShadowAttached(shadow);
+	cssom.styleShadowAttached(shadow);
 }
 
 // The same ShadowRoot an author's attachShadow builds, so slot
@@ -15649,7 +15657,7 @@ class HTMLCanvasElement extends HTMLElement {
 				cellPixels: () => getImageCellSize(this as unknown as Node),
 				drawsPixels: () => _maybe(getAttachedDocument(this))?.extra.canvas !==
 					"none",
-				color: () => getComputedValue(this, "color"),
+				color: () => cssom.getComputedValue(this, "color"),
 				direction: () => getCanvasDirection(this),
 			});
 		} else {
@@ -17821,11 +17829,11 @@ interface HTMLImageElementSlots extends HTMLElementSlots {
 	_ensureUAShadowTree: Step<HTMLImageElement["_ensureUAShadowTree"]>;
 }
 
-interface HTMLImageElement {
+export interface HTMLImageElement {
 	readonly [internals]: HTMLImageElementSlots;
 }
 
-class HTMLImageElement extends HTMLElement {
+export class HTMLImageElement extends HTMLElement {
 	declare alt: globalThis.HTMLImageElement["alt"];
 	declare referrerPolicy: globalThis.HTMLImageElement["referrerPolicy"];
 	declare name: globalThis.HTMLImageElement["name"];
@@ -18038,7 +18046,7 @@ class HTMLImageElement extends HTMLElement {
 
 declareExtraSlots(HTMLImageElement);
 
-function toImageDimension(value: number): number {
+export function toImageDimension(value: number): number {
 	const number = Math.trunc(Number(value));
 	return Number.isFinite(number) && number >= 0 && number <= 0x7fffffff
 		? number
@@ -20295,7 +20303,7 @@ function getGaugeGlyphs(host: Element, glyph: string): string {
 
 // What a canvas context's "inherit" direction resolves to.
 function getCanvasDirection(canvas: Element): "ltr" | "rtl" {
-	return getComputedValue(canvas, "direction") === "rtl" ? "rtl" : "ltr";
+	return cssom.getComputedValue(canvas, "direction") === "rtl" ? "rtl" : "ltr";
 }
 
 // A full-width track holding a bar whose width is the fraction filled.
@@ -21869,7 +21877,7 @@ export class HTMLStyleElement extends HTMLElement {
 
 	/** Null outside a tree. */
 	get sheet(): CSSStyleSheet | null {
-		return styleElementSheet(this);
+		return cssom.styleElementSheet(this);
 	}
 
 	get disabled(): boolean {
@@ -23178,7 +23186,7 @@ function stateChanged(element: Element, states: readonly string[]): void {
 	if (attached === undefined) {
 		return;
 	}
-	handleStateChange(_(attached).extra.cascade, element, states);
+	cssom.handleStateChange(_(attached).extra.cascade, element, states);
 	invalidate(_(attached).extra.framebuffer);
 	queueMicrotask(() => {
 		void _(attached).extra.render();
@@ -25706,7 +25714,7 @@ export function *flatDescendants(
 // The flow is the flat tree seen through style: a `display: contents`
 // element is not a box, so the flow passes through it to its children.
 function isDisplayContents(node: globalThis.Node): boolean {
-	return getComputedValue(node as Element, "display") === "contents";
+	return cssom.getComputedValue(node as Element, "display") === "contents";
 }
 
 /**
@@ -27411,15 +27419,15 @@ export class Document extends Node implements globalThis.Document {
 	}
 
 	get styleSheets(): globalThis.StyleSheetList {
-		return getStyleSheets(this);
+		return cssom.getStyleSheets(this);
 	}
 
 	get adoptedStyleSheets(): globalThis.CSSStyleSheet[] {
-		return getAdoptedStyleSheets(this);
+		return cssom.getAdoptedStyleSheets(this);
 	}
 
 	set adoptedStyleSheets(value: globalThis.CSSStyleSheet[]) {
-		adoptStyleSheets(this, value);
+		cssom.adoptStyleSheets(this, value);
 	}
 
 	/** Parses declarative shadow roots too. */
@@ -31792,7 +31800,7 @@ function getBlockOf(node: Node): Element | null {
 		ancestor !== null;
 		ancestor = ancestor.parentElement as Element | null
 	) {
-		const display = getComputedValue(ancestor, "display");
+		const display = cssom.getComputedValue(ancestor, "display");
 		if (!display.startsWith("inline") && display !== "contents") {
 			return ancestor;
 		}
@@ -32153,7 +32161,9 @@ export function selectUnits(
 			return true;
 		}
 		const parent = flatParentElement(part.node);
-		const whiteSpace = parent === null ? "" : getWhiteSpace(parent as Element);
+		const whiteSpace = parent === null
+			? ""
+			: cssom.getWhiteSpace(parent as Element);
 		return /^(pre|pre-wrap|pre-line|break-spaces)$/.test(whiteSpace);
 	};
 	const [anchorStart, anchorEnd] = getUnitBounds(run.text, from, unit, isBreak);
@@ -34362,7 +34372,7 @@ function attachDeclarativeShadowRoot(template: HTMLTemplateElement): boolean {
 // the caller is making a window's or a frame's document. A document an
 // author builds carries none until a registry claims it, as one with no
 // browsing context does.
-function parseHTMLDocument(
+export function parseHTMLDocument(
 	html: string,
 	url = "about:blank",
 	allowDeclarativeShadowRoots = true,
@@ -35099,7 +35109,10 @@ declareSealedRoot(DOMParser);
 // A well-formed document becomes the tree it describes. Anything else
 // becomes the spec's error document, whose root is a parsererror element
 // holding the failure.
-function parseXMLDocument(source: string, contentType: string): Document {
+export function parseXMLDocument(
+	source: string,
+	contentType: string,
+): Document {
 	const document = new XMLDocument();
 	const documentSlots = _(document);
 	documentSlots.extra.type = "xml";
@@ -35597,7 +35610,7 @@ class MediaQueryList extends EventTarget {
 		const attached = getAttachedDocument(_(this).mediaQueryDocument);
 		return (
 			attached !== undefined &&
-			mediaQueryMatches(_(attached).extra.cascade, this.media)
+			cssom.mediaQueryMatches(_(attached).extra.cascade, this.media)
 		);
 	}
 
@@ -35980,7 +35993,7 @@ export function revealPendingCaret(document: globalThis.Document): void {
 	}
 	// Widened to the text control's edge when the caret is on its first or
 	// last row, so the border shows instead of a cropped box.
-	const boxModel = getBoxModel(element);
+	const boxModel = cssom.getBoxModel(element);
 	let revealTop = caretY;
 	let revealBottom = caretY + 1;
 	if (caretY <= Math.round(rect.top) + (boxModel.borderTopWidth || 0)) {
@@ -36055,7 +36068,7 @@ function handleMutationRecords(
 			ensureUAShadowTrees(added);
 		}
 	}
-	handleMutations(_(attached).extra.cascade, relevant);
+	cssom.handleMutations(_(attached).extra.cascade, relevant);
 	_(attached).extra.layout.handleMutations(relevant);
 	focusAutofocusedNodes(relevant);
 	dropUnfocusableFocus(document);
@@ -36111,7 +36124,7 @@ function dropUnfocusableFocus(document: Document): void {
 	) {
 		if (
 			hasAttributeOf(node, "inert") ||
-			getComputedValue(node as Element, "display") === "none"
+			cssom.getComputedValue(node as Element, "display") === "none"
 		) {
 			(active as globalThis.HTMLElement).blur();
 			return;
@@ -38404,7 +38417,7 @@ Object.defineProperty(HTMLFormElement.prototype, Symbol.iterator, {
 
 // The one place an interface joins the window. A class not listed here
 // is not visible to script, whatever this module exports.
-const platform = {
+export const platform = {
 	AbortController,
 	AbortSignal,
 	AbstractRange,
@@ -38575,7 +38588,7 @@ const platform = {
 // The runtime's own, as the module found them. installGlobals() puts the
 // window's in their place, and the window's call these.
 // Bound, since a browser's throws when called on anything but its global.
-const runtime = {
+export const runtime = {
 	setTimeout,
 	clearTimeout,
 	setInterval: globalThis.setInterval.bind(globalThis),
@@ -38593,7 +38606,7 @@ const runtime = {
  * A platform object is refused, unless it is one HTML can serialize, and
  * that is copied.
  */
-function cloneStructured(value: unknown, context: string): any {
+export function cloneStructured(value: unknown, context: string): any {
 	return containsPlatformObject(value, new Set(), context)
 		? cloneWithPlatformObjects(value, new Map(), context)
 		: runtime.structuredClone(value);
@@ -38704,11 +38717,11 @@ function cloneWithPlatformObjects(
 	return copy;
 }
 
-const windowTimers = new WeakMap<
+export const windowTimers = new WeakMap<
 	object,
 	Map<number, ReturnType<typeof setTimeout>>
 >();
-const processTimers = new WeakMap<object, Record<string, unknown>>();
+export const processTimers = new WeakMap<object, Record<string, unknown>>();
 
 /**
  * The window's setTimeout and setInterval as installGlobals() puts them
@@ -38737,136 +38750,9 @@ export function clearWindowTimers(window: Window): void {
 	idle?.clear();
 }
 
-// A window starts with its interfaces and the timers any script expects
-// to find. The display fills in the rest (sizing, scrolling, animation
-// frames, the clipboard) as it mounts the document.
-function buildWindow(document: Document): Window {
-	const window = new Window(document) as unknown as Record<string, unknown>;
-	// HTML reports an exception a timer or a microtask lets escape, as it
-	// does a listener's, and the page goes on. The runtime's own would end
-	// the process.
-	const guard = (handler: unknown, args: unknown[]): unknown =>
-		typeof handler !== "function"
-			? handler
-			: () => {
-				try {
-					(handler as (...args: unknown[]) => void)(...args);
-				} catch (error) {
-					reportError(error, document);
-				}
-			};
-	// The page's outstanding timers, which stop with the window, by the
-	// number HTML hands the page for each: the runtime's own handle is the
-	// runtime's object.
-	const timers = new Map<number, ReturnType<typeof setTimeout>>();
-	windowTimers.set(window, timers);
-	let lastTimerId = 0;
-	const clearTimer = (id: unknown) => {
-		const key = Number(id);
-		const handle = timers.get(key);
-		if (handle !== undefined) {
-			timers.delete(key);
-			runtime.clearTimeout(handle);
-		}
-	};
-	processTimers.set(window, {
-		setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) =>
-			runtime.setTimeout(guard(handler, args) as () => void, timeout),
-		setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) =>
-			runtime.setInterval(guard(handler, args) as () => void, timeout),
-	});
-	Object.assign(
-		window,
-		getWindowClasses(),
-		Object.fromEntries(getInterfaceObjects()),
-		{
-		// The platform's DOMException, which is the one the DOM and the CSSOM
-		// throw. A caller's `instanceof DOMException` has to match the class
-		// the engine builds its errors from.
-			DOMException,
-			setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) => {
-				const guarded = guard(handler, args);
-				const id = ++lastTimerId;
-				timers.set(
-					id,
-					runtime.setTimeout(
-						(typeof guarded === "function"
-							? () => {
-								timers.delete(id);
-								(guarded as () => void)();
-							}
-							: guarded) as () => void,
-						timeout,
-					),
-				);
-				return id;
-			},
-			clearTimeout: clearTimer,
-			setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) => {
-				const id = ++lastTimerId;
-				timers.set(
-					id,
-					runtime.setInterval(guard(handler, args) as () => void, timeout),
-				);
-				return id;
-			},
-			clearInterval: clearTimer,
-			queueMicrotask: (callback: unknown) => {
-				if (typeof callback !== "function") {
-					throw new TypeError("queueMicrotask needs a function");
-				}
-				runtime.queueMicrotask(guard(callback, []) as () => void);
-			},
-			atob: runtime.atob,
-			btoa: runtime.btoa,
-			fetch: runtime.fetch,
-			structuredClone: (
-				value: unknown,
-				options: StructuredSerializeOptions = {},
-			) =>
-				(options.transfer ?? []).length > 0
-					? runtime.structuredClone(value, options)
-					: cloneStructured(value, "execute 'structuredClone' on 'Window'"),
-		});
-	// HTML's legacy factory: new Image(width, height) is an <img> in this
-	// window's document.
-	const Image = function Image(this: unknown, width?: number, height?: number) {
-		if (new.target === undefined) {
-			throw new TypeError("Image is a constructor");
-		}
-		const image = document.createElement("img");
-		if (width !== undefined) {
-			setAttributeOf(image, "width", String(toImageDimension(width)));
-		}
-		if (height !== undefined) {
-			setAttributeOf(image, "height", String(toImageDimension(height)));
-		}
-		return image;
-	} as unknown as typeof HTMLImageElement;
-	Object.defineProperty(Image, "prototype", {
-		value: HTMLImageElement.prototype,
-	});
-	window.Image = Image;
-	window.window = window;
-	window.self = window;
-	for (const name of Object.keys(window)) {
-		const value = window[name];
-		if (typeof value === "function" && /^[a-z]/.test(name)) {
-			window[name] = windowMember(
-				window,
-				name,
-				value as (...args: never[]) => unknown,
-			);
-		}
-	}
-	prepareClasses(Object.values(getWindowClasses()));
-	startPendingImages(document as unknown as globalThis.Document);
-	return window as unknown as Window;
-}
-
 // Images the parser built before their document had a window wait for
 // one, and start here, once it does.
-function startPendingImages(
+export function startPendingImages(
 	root: globalThis.Document | globalThis.ShadowRoot,
 ): void {
 	for (const element of root.querySelectorAll("*")) {
@@ -38882,63 +38768,6 @@ function startPendingImages(
 	}
 }
 
-// The classes a window exposes by name. Read when a window is made rather
-// than in the module's interface table: canvas.ts is part of the import
-// cycle through cssvalues, and a table built at module load would read
-// its classes before they exist when canvas.ts is the first module
-// imported.
-let windowClasses: Readonly<Record<string, Constructor>> | null = null;
-
-function getWindowClasses(): Readonly<Record<string, Constructor>> {
-	windowClasses ??= {
-		...platform,
-		...CSSOM_INTERFACES,
-		CanvasGradient,
-		CanvasPattern,
-		CanvasRenderingContext2D,
-		ImageBitmap,
-		ImageData,
-		Path2D,
-	} as unknown as Record<string, Constructor>;
-	return windowClasses;
-}
-
-/** The names of the interfaces a window exposes. */
-export function getWindowInterfaceNames(): string[] {
-	return Object.keys(getWindowClasses());
-}
-
-// The window's interface objects, laid out before the first document is
-// made, so that every platform object has its unforgeable members.
-function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
-	return installInterfaces(getWindowClasses());
-}
-
-/**
- * Parse a document from markup and display it in a window of its own. An
- * XML content type parses as XML, which is what a frame whose src names a
- * .xml, .xhtml or .svg file holds.
- */
-export function createWindow(
-	source: string,
-	url?: string,
-	contentType = "text/html",
-): Window {
-	getInterfaceObjects();
-	if (contentType === "text/html") {
-		return buildWindow(
-			parseHTMLDocument(source, url, true, createWindowRegistry()),
-		);
-	}
-	const document = parseXMLDocument(source, contentType);
-	const documentSlots = _(document);
-	documentSlots.registry = createWindowRegistry();
-	if (url !== undefined) {
-		documentSlots.extra.documentURL = url;
-	}
-	return buildWindow(document);
-}
-
 /** Node's appendChild, for the engine's own calls. */
 export function appendChildOf<T extends globalThis.Node>(
 	parent: globalThis.Node,
@@ -39121,7 +38950,6 @@ export type {
 	HTMLHRElement,
 	HTMLHtmlElement,
 	HTMLIFrameElement,
-	HTMLImageElement,
 	HTMLLegendElement,
 	HTMLLIElement,
 	HTMLMapElement,
diff --git a/src/internal/window.ts b/src/internal/window.ts
new file mode 100644
index 00000000..8336b1a0
--- /dev/null
+++ b/src/internal/window.ts
@@ -0,0 +1,220 @@
+/**
+ * A window: the document's interfaces put together on one object, the
+ * DOM's, the CSSOM's and the canvas's, with the timers and the rest a
+ * script expects to find. It is built above all of them, so none of them
+ * has to import another to be on it.
+ */
+import {
+	CanvasGradient,
+	CanvasPattern,
+	CanvasRenderingContext2D,
+	ImageBitmap,
+	ImageData,
+	Path2D,
+} from "./canvas.ts";
+import {CSSOM_INTERFACES} from "./cssom.ts";
+import {
+	cloneStructured,
+	createWindowRegistry,
+	type Document,
+	DOMException,
+	HTMLImageElement,
+	parseHTMLDocument,
+	parseXMLDocument,
+	platform,
+	processTimers,
+	reportError,
+	runtime,
+	setAttributeOf,
+	startPendingImages,
+	toImageDimension,
+	Window,
+	windowTimers,
+} from "./dom.ts";
+import {_, prepareClasses} from "./slots.ts";
+import type {setTimeout} from "./timers.ts";
+import {type Constructor, installInterfaces, windowMember} from "./webidl.ts";
+
+// A window starts with its interfaces and the timers any script expects
+// to find. The display fills in the rest (sizing, scrolling, animation
+// frames, the clipboard) as it mounts the document.
+export function buildWindow(document: Document): Window {
+	const window = new Window(document) as unknown as Record<string, unknown>;
+	// HTML reports an exception a timer or a microtask lets escape, as it
+	// does a listener's, and the page goes on. The runtime's own would end
+	// the process.
+	const guard = (handler: unknown, args: unknown[]): unknown =>
+		typeof handler !== "function"
+			? handler
+			: () => {
+				try {
+					(handler as (...args: unknown[]) => void)(...args);
+				} catch (error) {
+					reportError(error, document);
+				}
+			};
+	// The page's outstanding timers, which stop with the window, by the
+	// number HTML hands the page for each: the runtime's own handle is the
+	// runtime's object.
+	const timers = new Map<number, ReturnType<typeof setTimeout>>();
+	windowTimers.set(window, timers);
+	let lastTimerId = 0;
+	const clearTimer = (id: unknown) => {
+		const key = Number(id);
+		const handle = timers.get(key);
+		if (handle !== undefined) {
+			timers.delete(key);
+			runtime.clearTimeout(handle);
+		}
+	};
+	processTimers.set(window, {
+		setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) =>
+			runtime.setTimeout(guard(handler, args) as () => void, timeout),
+		setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) =>
+			runtime.setInterval(guard(handler, args) as () => void, timeout),
+	});
+	Object.assign(
+		window,
+		getWindowClasses(),
+		Object.fromEntries(getInterfaceObjects()),
+		{
+		// The platform's DOMException, which is the one the DOM and the CSSOM
+		// throw. A caller's `instanceof DOMException` has to match the class
+		// the engine builds its errors from.
+			DOMException,
+			setTimeout: (handler: unknown, timeout?: number, ...args: unknown[]) => {
+				const guarded = guard(handler, args);
+				const id = ++lastTimerId;
+				timers.set(
+					id,
+					runtime.setTimeout(
+						(typeof guarded === "function"
+							? () => {
+								timers.delete(id);
+								(guarded as () => void)();
+							}
+							: guarded) as () => void,
+						timeout,
+					),
+				);
+				return id;
+			},
+			clearTimeout: clearTimer,
+			setInterval: (handler: unknown, timeout?: number, ...args: unknown[]) => {
+				const id = ++lastTimerId;
+				timers.set(
+					id,
+					runtime.setInterval(guard(handler, args) as () => void, timeout),
+				);
+				return id;
+			},
+			clearInterval: clearTimer,
+			queueMicrotask: (callback: unknown) => {
+				if (typeof callback !== "function") {
+					throw new TypeError("queueMicrotask needs a function");
+				}
+				runtime.queueMicrotask(guard(callback, []) as () => void);
+			},
+			atob: runtime.atob,
+			btoa: runtime.btoa,
+			fetch: runtime.fetch,
+			structuredClone: (
+				value: unknown,
+				options: StructuredSerializeOptions = {},
+			) =>
+				(options.transfer ?? []).length > 0
+					? runtime.structuredClone(value, options)
+					: cloneStructured(value, "execute 'structuredClone' on 'Window'"),
+		});
+	// HTML's legacy factory: new Image(width, height) is an <img> in this
+	// window's document.
+	const Image = function Image(this: unknown, width?: number, height?: number) {
+		if (new.target === undefined) {
+			throw new TypeError("Image is a constructor");
+		}
+		const image = document.createElement("img");
+		if (width !== undefined) {
+			setAttributeOf(image, "width", String(toImageDimension(width)));
+		}
+		if (height !== undefined) {
+			setAttributeOf(image, "height", String(toImageDimension(height)));
+		}
+		return image;
+	} as unknown as typeof HTMLImageElement;
+	Object.defineProperty(Image, "prototype", {
+		value: HTMLImageElement.prototype,
+	});
+	window.Image = Image;
+	window.window = window;
+	window.self = window;
+	for (const name of Object.keys(window)) {
+		const value = window[name];
+		if (typeof value === "function" && /^[a-z]/.test(name)) {
+			window[name] = windowMember(
+				window,
+				name,
+				value as (...args: never[]) => unknown,
+			);
+		}
+	}
+	prepareClasses(Object.values(getWindowClasses()));
+	startPendingImages(document as unknown as globalThis.Document);
+	return window as unknown as Window;
+}
+
+// The classes a window exposes by name. Read when a window is made rather
+// than in the module's interface table: canvas.ts is part of the import
+// cycle through cssvalues, and a table built at module load would read
+// its classes before they exist when canvas.ts is the first module
+// imported.
+let windowClasses: Readonly<Record<string, Constructor>> | null = null;
+
+export function getWindowClasses(): Readonly<Record<string, Constructor>> {
+	windowClasses ??= {
+		...platform,
+		...CSSOM_INTERFACES,
+		CanvasGradient,
+		CanvasPattern,
+		CanvasRenderingContext2D,
+		ImageBitmap,
+		ImageData,
+		Path2D,
+	} as unknown as Record<string, Constructor>;
+	return windowClasses;
+}
+
+/** The names of the interfaces a window exposes. */
+export function getWindowInterfaceNames(): string[] {
+	return Object.keys(getWindowClasses());
+}
+
+// The window's interface objects, laid out before the first document is
+// made, so that every platform object has its unforgeable members.
+export function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
+	return installInterfaces(getWindowClasses());
+}
+
+/**
+ * Parse a document from markup and display it in a window of its own. An
+ * XML content type parses as XML, which is what a frame whose src names a
+ * .xml, .xhtml or .svg file holds.
+ */
+export function createWindow(
+	source: string,
+	url?: string,
+	contentType = "text/html",
+): Window {
+	getInterfaceObjects();
+	if (contentType === "text/html") {
+		return buildWindow(
+			parseHTMLDocument(source, url, true, createWindowRegistry()),
+		);
+	}
+	const document = parseXMLDocument(source, contentType);
+	const documentSlots = _(document);
+	documentSlots.registry = createWindowRegistry();
+	if (url !== undefined) {
+		documentSlots.extra.documentURL = url;
+	}
+	return buildWindow(document);
+}
diff --git a/tests/constraint-validation.test.ts b/tests/constraint-validation.test.ts
index d7401577..951817a7 100644
--- a/tests/constraint-validation.test.ts
+++ b/tests/constraint-validation.test.ts
@@ -4,7 +4,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function input(markup: string): HTMLInputElement {
 	const window =
diff --git a/tests/dom-dispatch.test.ts b/tests/dom-dispatch.test.ts
index b8129e81..e7a02614 100644
--- a/tests/dom-dispatch.test.ts
+++ b/tests/dom-dispatch.test.ts
@@ -10,7 +10,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document} from "../src/internal/dom.ts";
+import type {Document} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The interfaces script sees are a window's, so the events the tests
 // dispatch are built with a window's constructors.
diff --git a/tests/dom-misc.test.ts b/tests/dom-misc.test.ts
index 74158bf3..742d8f5e 100644
--- a/tests/dom-misc.test.ts
+++ b/tests/dom-misc.test.ts
@@ -5,7 +5,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document, HTMLElement} from "../src/internal/dom.ts";
+import {type Document, HTMLElement} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The realm the tests reach constructors through: a window of this DOM
 // exposes them, as the platform does.
diff --git a/tests/dom.test.ts b/tests/dom.test.ts
index abb7d173..198c8146 100644
--- a/tests/dom.test.ts
+++ b/tests/dom.test.ts
@@ -10,7 +10,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {
-	createWindow,
 	type Document,
 	CustomEvent as DOMCustomEvent,
 	Event as DOMEvent,
@@ -20,6 +19,7 @@ import {
 	Text,
 	Window,
 } from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The door a test document comes through. The parser is the one that hands
 // a document the realm's custom element registry, as it does the engine's.
diff --git a/tests/exchange-events.test.ts b/tests/exchange-events.test.ts
index 27784aa1..93f62fbb 100644
--- a/tests/exchange-events.test.ts
+++ b/tests/exchange-events.test.ts
@@ -1,7 +1,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame, until} from "./test-utils";
 
 function filler(rows: number): string {
diff --git a/tests/form-associated.test.ts b/tests/form-associated.test.ts
index 08b5c6d8..cae7490a 100644
--- a/tests/form-associated.test.ts
+++ b/tests/form-associated.test.ts
@@ -1,6 +1,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 test("a form-associated custom element is disabled by its attribute or a fieldset, and says so", () => {
 	const window = createWindow("<!DOCTYPE html><body></body>");
diff --git a/tests/formdata.test.ts b/tests/formdata.test.ts
index 68f4cb37..b8941ec2 100644
--- a/tests/formdata.test.ts
+++ b/tests/formdata.test.ts
@@ -1,6 +1,6 @@
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 test("a FormData holds its entries in order and reads them back by name", () => {
 	const window = createWindow("<!DOCTYPE html><body></body>");
diff --git a/tests/import-graph.test.ts b/tests/import-graph.test.ts
new file mode 100644
index 00000000..3ff065ed
--- /dev/null
+++ b/tests/import-graph.test.ts
@@ -0,0 +1,78 @@
+/**
+ * No module of the engine imports, at run time, a module that imports it
+ * back. A cycle decides which module finishes loading first by whoever
+ * the application reaches first, and a class that extends one from the
+ * other side of a cycle is undefined when its module runs. Type-only
+ * imports erase, so they may point anywhere.
+ */
+import {readdirSync, readFileSync} from "node:fs";
+import {dirname, join, normalize} from "node:path";
+import {fileURLToPath} from "node:url";
+
+import {expect, test} from "@b9g/libuild/test";
+
+const src = join(dirname(fileURLToPath(import.meta.url)), "..", "src");
+
+function modules(directory: string): string[] {
+	return readdirSync(directory, {withFileTypes: true}).flatMap((entry) => {
+		const path = join(directory, entry.name);
+		if (entry.isDirectory()) {
+			return modules(path);
+		}
+		return path.endsWith(".ts") ? [path] : [];
+	});
+}
+
+function runtimeImports(file: string): string[] {
+	const text = readFileSync(file, "utf8");
+	const found: string[] = [];
+	const statements =
+		/^(?:import|export)\s+(type\s+)?([^;]*?)\s+from\s+"(\.[^"]+)";/gms;
+	for (const [, typeOnly, clause, specifier] of text.matchAll(statements)) {
+		if (typeOnly) {
+			continue;
+		}
+		const named = clause.match(/\{([^}]*)\}/);
+		const rest = clause.replace(/\{[^}]*\}/, "").replace(/,/g, "").trim();
+		if (named && rest === "") {
+			const members = named[1].split(",").map((member) => member.trim())
+				.filter(Boolean);
+			if (members.every((member) => member.startsWith("type "))) {
+				continue;
+			}
+		}
+		found.push(normalize(join(dirname(file), specifier)));
+	}
+	return found;
+}
+
+test("no module of the engine imports one that imports it back", () => {
+	const graph = new Map(
+		modules(src).map((file) => [file, runtimeImports(file)]),
+	);
+	const cycles: string[] = [];
+	const state = new Map<string, "visiting" | "done">();
+	const stack: string[] = [];
+	const visit = (file: string): void => {
+		state.set(file, "visiting");
+		stack.push(file);
+		for (const next of graph.get(file) ?? []) {
+			if (state.get(next) === "visiting") {
+				const loop = stack.slice(stack.indexOf(next)).concat(next);
+				cycles.push(
+					loop.map((path) => path.slice(src.length + 1)).join(" -> "),
+				);
+			} else if (!state.has(next) && graph.has(next)) {
+				visit(next);
+			}
+		}
+		stack.pop();
+		state.set(file, "done");
+	};
+	for (const file of graph.keys()) {
+		if (!state.has(file)) {
+			visit(file);
+		}
+	}
+	expect(cycles).toEqual([]);
+});
diff --git a/tests/inspector.test.ts b/tests/inspector.test.ts
index 65b9be7d..ad5c0491 100644
--- a/tests/inspector.test.ts
+++ b/tests/inspector.test.ts
@@ -4,7 +4,8 @@ import {inspect} from "node:util";
 
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Element} from "../src/internal/dom.ts";
+import type {Element} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function asElement(value: unknown): Element {
 	return value as Element;
diff --git a/tests/mathml.test.ts b/tests/mathml.test.ts
index 47e3f03e..9b1e2e6b 100644
--- a/tests/mathml.test.ts
+++ b/tests/mathml.test.ts
@@ -5,7 +5,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {
 	captureRawOutput,
 	inputDispatched,
diff --git a/tests/selection-modify.test.ts b/tests/selection-modify.test.ts
index 97519715..44925ae0 100644
--- a/tests/selection-modify.test.ts
+++ b/tests/selection-modify.test.ts
@@ -8,7 +8,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame} from "./test-utils.js";
 
 // The door a test document comes through: a document of this DOM, in the
diff --git a/tests/selectors.test.ts b/tests/selectors.test.ts
index d71f290a..7bd716f6 100644
--- a/tests/selectors.test.ts
+++ b/tests/selectors.test.ts
@@ -12,7 +12,6 @@ import {expect, test} from "@b9g/libuild/test";
 import {TermDOM} from "../src/index.ts";
 import {parseSelectorList} from "../src/internal/cssselectors.ts";
 import {
-	createWindow,
 	type Document,
 	DOMException,
 	type Element,
@@ -20,6 +19,7 @@ import {
 	setDocumentFocusVisible,
 	setHoveredElement,
 } from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {MockProcess, nextFrame} from "./test-utils.js";
 
 function tree(html: string, url = "about:blank"): Document {
diff --git a/tests/serialization.test.ts b/tests/serialization.test.ts
index 99beb1f6..5e84754f 100644
--- a/tests/serialization.test.ts
+++ b/tests/serialization.test.ts
@@ -10,7 +10,8 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow, type Document} from "../src/internal/dom.ts";
+import type {Document} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 // The door a test document comes through. The parser is the one that hands
 // a document the realm's custom element registry, as it does the engine's.
diff --git a/tests/shadow-dom.test.ts b/tests/shadow-dom.test.ts
index 7f22bc3b..546f3aa5 100644
--- a/tests/shadow-dom.test.ts
+++ b/tests/shadow-dom.test.ts
@@ -11,7 +11,7 @@
 import {expect, test} from "@b9g/libuild/test";
 
 import {TermDOM} from "../src/index.ts";
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 import {
 	findCollector,
 	inputDispatched,
diff --git a/tests/window-named-access.test.ts b/tests/window-named-access.test.ts
index e6511bd1..8abfce87 100644
--- a/tests/window-named-access.test.ts
+++ b/tests/window-named-access.test.ts
@@ -5,7 +5,7 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {createWindow} from "../src/internal/dom.ts";
+import {createWindow} from "../src/internal/window.ts";
 
 function open(html: string): {window: any; document: any} {
 	const window = createWindow(html) as any;

From cec12977602cdfa2fa5ac4c78b6e146e591d6e78 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 20:55:58 -0400
Subject: [PATCH 38/99] Draw a key's frame without sleeping first, and measure
 key-to-frame latency under load

The render loop waited for a zero-delay timer after the task that asked
for a frame, and on another before drawing even when no frame was due.
Each puts the process to sleep in the operating system, and waking takes
longer the busier the machine is. Both now run as a task the runtime
starts at once, and a timer is kept only for a frame that comes sooner
than the frame interval allows.

A new scenario types into an input at a person's pace and times each
key until its frame reaches the terminal, on an idle machine and with
one and two processes spinning on every core. The median halves in all
three: 5.3 ms to 2.3 idle, 4.8 to 1.9 with every core busy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/scenarios/latency.ts | 73 ++++++++++++++++++++++++++++++++++++++
 src/index.ts               | 17 ++++++---
 2 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 bench/scenarios/latency.ts

diff --git a/bench/scenarios/latency.ts b/bench/scenarios/latency.ts
new file mode 100644
index 00000000..6d0aef10
--- /dev/null
+++ b/bench/scenarios/latency.ts
@@ -0,0 +1,73 @@
+import {spawn} from "node:child_process";
+import {availableParallelism} from "node:os";
+
+import {mount, nextFrame, report} from "../harness.ts";
+
+function describe(label: string, times: number[]): void {
+	report(label, times);
+	const sorted = [...times].sort((a, b) => a - b);
+	const at = (q: number): string =>
+		sorted[Math.floor(sorted.length * q)].toFixed(1);
+	console.error(
+		`${label}: p50 ${at(0.5)} p90 ${at(0.9)} p99 ${at(0.99)} max ${sorted.at(-1)!.toFixed(1)}`,
+	);
+}
+
+// Elapsed time from a key reaching the program to its frame reaching the
+// terminal, typed at a person's pace, first on an idle machine and then
+// with a process spinning on every core.
+const {proc, dom} = await mount();
+dom.document.body.innerHTML = "<input id=field>";
+const field = dom.document.getElementById("field");
+field.focus();
+await nextFrame(dom);
+
+let wrote: (() => void) | null = null;
+proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+	wrote?.();
+	const callback = typeof enc === "function" ? enc : cb;
+	if (typeof callback === "function") {
+		(callback as () => void)();
+	}
+	return true;
+};
+
+async function type(keys: number): Promise<number[]> {
+	const times: number[] = [];
+	for (let i = 0; i < keys; i++) {
+		await new Promise((resolve) => setTimeout(resolve, 40));
+		const painted = new Promise<void>((resolve) => {
+			wrote = resolve;
+		});
+		const start = performance.now();
+		proc.stdin.simulateResponse(String.fromCharCode(97 + (i % 26)));
+		await painted;
+		times.push(performance.now() - start);
+		wrote = null;
+		if (field.value.length > 60) {
+			field.value = "";
+			await nextFrame(dom);
+		}
+	}
+	return times;
+}
+
+await type(20);
+describe("latency: key to frame, idle", await type(100));
+
+for (const [label, perCore] of [
+	["every core busy", 1],
+	["two spinners a core", 2],
+] as const) {
+	const spinners = Array.from({length: availableParallelism() * perCore}, () =>
+		spawn(process.execPath, ["-e", "for (;;) {}"], {stdio: "ignore"}));
+	await new Promise((resolve) => setTimeout(resolve, 300));
+	try {
+		describe(`latency: key to frame, ${label}`, await type(100));
+	} finally {
+		for (const spinner of spinners) {
+			spinner.kill();
+		}
+	}
+}
+dom.dispose();
diff --git a/src/index.ts b/src/index.ts
index fa8fa78a..fedb937d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -104,7 +104,7 @@ import {
 	setWindowFetch,
 } from "./internal/resources.ts";
 import {_, type internals, moveLateMembers} from "./internal/slots.ts";
-import {queueMicrotask, setTimeout} from "./internal/timers.ts";
+import {queueMicrotask, queueTask, setTimeout} from "./internal/timers.ts";
 import {getCellSizeSetting} from "./internal/tree.ts";
 import {
 	type CellSize,
@@ -1319,8 +1319,11 @@ async function render(termDOM: TermDOM): Promise<void> {
 		try {
 			// After the task that asked, and every microtask it queued, as a
 			// browser renders: an edit and whatever answers it in its own
-			// microtasks are one frame, not a frame of the half-done edit.
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			// microtasks are one frame, not a frame of the half-done edit. A
+			// task the runtime runs at once, not a timer, which sleeps the
+			// process and, on a loaded machine, waits for the scheduler to
+			// give it the processor back.
+			await new Promise<void>((resolve) => queueTask(resolve));
 			do {
 				termDOMSlots.renderQueued = false;
 				if (termDOMSlots.lifecycle === "attaching") {
@@ -1349,7 +1352,13 @@ async function render(termDOM: TermDOM): Promise<void> {
 				// microtasks alone, and input and timers would never get a turn.
 				const wait =
 					termDOMSlots.lastFrameAt + FRAME_INTERVAL_MS - performance.now();
-				await new Promise((resolve) => setTimeout(resolve, Math.max(0, wait)));
+				await new Promise<void>((resolve) => {
+					if (wait > 0) {
+						setTimeout(resolve, wait);
+					} else {
+						queueTask(resolve);
+					}
+				});
 				if (!isAttached(termDOM) || termDOMSlots.suspended) {
 					break;
 				}

From 90390034f10d1ee067ae8af965bc9765cba7b81c Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:16:29 -0400
Subject: [PATCH 39/99] Run the CodeMirror example at the terminal's own cell
 size, and drop its workarounds

At one CSS pixel a cell, CodeMirror's pixel sizes went wrong in several
ways: its paddings and line height had to be restated in cells, its
vertical moves probed half a pixel and had to be replaced, and its
viewport, which renders a thousand pixels past what is visible, rendered
a thousand rows. With cellSize: "auto" a pixel is a pixel again, so the
theme keeps only its colors, the arrow keys are CodeMirror's own, and a
large file renders the lines around the view rather than hundreds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/codemirror.ts | 48 ++++++------------------------------------
 1 file changed, 6 insertions(+), 42 deletions(-)

diff --git a/examples/codemirror.ts b/examples/codemirror.ts
index 723fe8c1..65fcf9c1 100644
--- a/examples/codemirror.ts
+++ b/examples/codemirror.ts
@@ -8,14 +8,14 @@
 // CodeMirror edits the document through the DOM: it renders lines into a
 // contenteditable element, listens for beforeinput and watches the tree
 // with a MutationObserver, and reads the selection back through
-// getSelection(). Nothing here is adapted for the terminal except the
-// theme, which turns its pixel paddings into cells.
+// getSelection(). The terminal reports how many pixels a cell measures,
+// so CodeMirror's pixel sizes and its viewport culling work as they do in
+// a browser. Nothing here is adapted for the terminal but the colors.
 import {readFileSync} from "node:fs";
 
 import {installGlobals, TermDOM} from "@b9g/termdom";
-import type {EditorView as View} from "@codemirror/view";
 
-const term = new TermDOM();
+const term = new TermDOM({cellSize: "auto"});
 term.attach();
 const {document} = term;
 
@@ -30,7 +30,7 @@ const {javascript} = await import("@codemirror/lang-javascript");
 const {defaultHighlightStyle, syntaxHighlighting} = await import(
   "@codemirror/language",
 );
-const {EditorSelection, EditorState} = await import("@codemirror/state");
+const {EditorState} = await import("@codemirror/state");
 const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
 
 document.head.innerHTML = `
@@ -51,18 +51,11 @@ const theme = EditorView.theme(
     // The focused editor edits text, so it shows the terminal cursor, not
     // the dotted outline the base theme draws around the wrapper.
     "&.cm-focused": {outline: "none"},
-    ".cm-scroller": {lineHeight: "1"},
-    ".cm-content": {padding: "0", caretColor: "white"},
-    ".cm-line": {padding: "0 1ch"},
+    ".cm-content": {caretColor: "white"},
     ".cm-gutters": {
       backgroundColor: "#101418",
       color: "#606060",
       borderRight: "1px solid #303030",
-      minWidth: "4ch",
-    },
-    ".cm-lineNumbers .cm-gutterElement": {
-      padding: "0 1ch 0 0",
-      minWidth: "3ch",
     },
     ".cm-activeLine": {backgroundColor: "#1a2028"},
     ".cm-activeLineGutter": {backgroundColor: "#1a2028"},
@@ -70,34 +63,6 @@ const theme = EditorView.theme(
   {dark: true},
 );
 
-// CodeMirror's own line moves probe half a text height at a time, and a
-// line here is one cell tall, so half of it rounds to nothing. These
-// probe half a cell past the line's edge, which is the next row.
-function moveLine(forward: boolean, extend: boolean): (view: View) => boolean {
-  return (view: View): boolean => {
-    const {selection} = view.state;
-    const ranges = selection.ranges.map((range) => {
-      const moved = view.moveVertically(
-        range,
-        forward,
-        view.defaultLineHeight / 2,
-      );
-      return extend ? EditorSelection.range(range.anchor, moved.head) : moved;
-    });
-    view.dispatch({
-      selection: EditorSelection.create(ranges, selection.mainIndex),
-      scrollIntoView: true,
-      userEvent: "select",
-    });
-    return true;
-  };
-}
-
-const lineKeys = keymap.of([
-  {key: "ArrowUp", run: moveLine(false, false), shift: moveLine(false, true)},
-  {key: "ArrowDown", run: moveLine(true, false), shift: moveLine(true, true)},
-]);
-
 const sample = [
   "function greet(name) {",
   "  const hour = new Date().getHours();",
@@ -119,7 +84,6 @@ const view = new EditorView({
       EditorState.tabSize.of(2),
       lineNumbers(),
       history(),
-      lineKeys,
       keymap.of([...defaultKeymap, ...historyKeymap]),
       javascript(),
       syntaxHighlighting(defaultHighlightStyle),

From 6845f0e841efa8e7944939d27843b522569fb76a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:19:20 -0400
Subject: [PATCH 40/99] Give the CodeMirror example's lines and line numbers a
 cell of padding

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/codemirror.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/examples/codemirror.ts b/examples/codemirror.ts
index 65fcf9c1..257f7384 100644
--- a/examples/codemirror.ts
+++ b/examples/codemirror.ts
@@ -52,6 +52,7 @@ const theme = EditorView.theme(
     // the dotted outline the base theme draws around the wrapper.
     "&.cm-focused": {outline: "none"},
     ".cm-content": {caretColor: "white"},
+    ".cm-line": {padding: "0 1ch"},
     ".cm-gutters": {
       backgroundColor: "#101418",
       color: "#606060",
@@ -59,6 +60,7 @@ const theme = EditorView.theme(
     },
     ".cm-activeLine": {backgroundColor: "#1a2028"},
     ".cm-activeLineGutter": {backgroundColor: "#1a2028"},
+    ".cm-lineNumbers .cm-gutterElement": {padding: "0 1ch"},
   },
   {dark: true},
 );

From 1ac82fb17d746df4180ff9acdc3cf8fe0d96a1b2 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:37:23 -0400
Subject: [PATCH 41/99] Skip rounding and paint extents for subtrees no layout
 touched

A node that was not laid out since its last rounding, under the same
origin, keeps the children it rounded, and their paint extents stand.
Laying out a node marks every box above it, since a table lays out its
cells without laying out the rows between.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts       | 12 +++++++++++-
 src/internal/layoutsolver.ts | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 11fc7bda..1cbc28b2 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1005,6 +1005,8 @@ interface Styling {
 const stylings = new WeakMap<LayoutNode, Styling>();
 
 interface Extent {
+	// The box's own top, in absolute document rows.
+	origin: number;
 	// The rows the subtree can paint, in absolute document rows. Absolutely
 	// positioned children push it outside the box.
 	top: number;
@@ -1029,17 +1031,23 @@ interface Extent {
 
 // Written after every solve, and read by the painter's row culling for
 // every child, so the records are kept and rewritten rather than remade.
+// A subtree roundToGrid left alone keeps its record while its top holds.
 const extents = new WeakMap<LayoutNode, Extent>();
 
 function computePaintExtents(
 	layout: Layout,
 	node: LayoutNode,
 	originTop: number,
+	settled = false,
 ): Extent {
 	const top = originTop + node.result.top;
 	let extent = extents.get(node);
+	if (settled && extent !== undefined && extent.origin === top) {
+		return extent;
+	}
 	if (extent === undefined) {
 		extent = {
+			origin: top,
 			top,
 			bottom: top,
 			unstackedChildren: 0,
@@ -1079,7 +1087,8 @@ function computePaintExtents(
 		}
 	}
 	for (const child of node.children) {
-		const childExtent = computePaintExtents(layout, child, top);
+		const childExtent =
+			computePaintExtents(layout, child, top, settled || node.settled);
 		if (clips && scrollBottom !== null && child.style.displayType !== "none") {
 			if (scrollRight !== null) {
 				scrollRight =
@@ -1117,6 +1126,7 @@ function computePaintExtents(
 			bottom = Math.max(bottom, child.result.top + childExtent.overflowBottom);
 		}
 	}
+	extent.origin = top;
 	extent.top = highest;
 	extent.bottom = lowest;
 	extent.unstackedChildren = unstacked;
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index c84c5228..c33dd5ae 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -488,6 +488,13 @@ export class LayoutNode {
 	// width it is given, and rounds both edges as a block does.
 	measuresText: boolean;
 
+	// The unrounded origin roundToGrid last gave the children, NaN once the
+	// node is laid out again. Their rounded results stand while it holds.
+	gridLeft: number;
+	gridTop: number;
+	// Whether the last roundToGrid left the children as they were.
+	settled: boolean;
+
 	constructor() {
 		this.children = [];
 		this.parent = null;
@@ -501,6 +508,9 @@ export class LayoutNode {
 		this.owner = null;
 		this.measuresText = true;
 		this.outOfFlowCount = 0;
+		this.gridLeft = NaN;
+		this.gridTop = NaN;
+		this.settled = false;
 		this.currentStyle = createStyle();
 		this.result = createResult();
 	}
@@ -3377,6 +3387,7 @@ function layoutTable(
 	const gridTop = topPaddingBorder + captionHeight;
 
 	for (const group of groups) {
+		group.gridLeft = NaN;
 		group.result.left = leftPaddingBorder;
 		group.result.width = contentWidth;
 		group.result.top = gridTop;
@@ -3391,6 +3402,7 @@ function layoutTable(
 		if (row.node === null) {
 			return;
 		}
+		row.node.gridLeft = NaN;
 		row.node.result.left = rowLeft(row);
 		row.node.result.top = rowTop(row, index);
 		row.node.result.width = contentWidth;
@@ -5806,6 +5818,15 @@ function layoutNode(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
+	// A container may lay out a descendant without laying out the boxes
+	// between, as a table does its cells, so every box above it rounds again.
+	for (
+		let above = node.parent;
+		above !== null && !Number.isNaN(above.gridLeft);
+		above = above.parent
+	) {
+		above.gridLeft = NaN;
+	}
 	// css-sizing-4 §5: the open axis follows a settled (`definite`) one
 	// through the ratio. With both settled the ratio yields. Margins come
 	// off the settled request and back onto the derived one. min/max on the
@@ -5985,6 +6006,7 @@ function layoutNodeImpl(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
+	node.gridLeft = NaN;
 	node.result.padding.left = getPadding(node, "left", ownerWidth);
 	node.result.padding.top = getPadding(node, "top", ownerWidth);
 	node.result.padding.right = getPadding(node, "right", ownerWidth);
@@ -6129,7 +6151,8 @@ function getPadding(node: LayoutNode, edge: Edge, ownerWidth: number): number {
 // position is the difference of two rounded edges too, so text inside a
 // fractional padding starts where a marker beside it ends. A leaf that
 // measures text ceils its trailing edge so the text never gets less room
-// than it measured.
+// than it measured. A node not laid out since, under the same origin,
+// keeps the children it rounded before.
 function roundToGrid(
 	node: LayoutNode,
 	absoluteLeft: number,
@@ -6157,6 +6180,12 @@ function roundToGrid(
 	node.result.height =
 		roundValue(absBottom, isText, false) - roundValue(absTop, isText, false);
 
+	node.settled = absLeft === node.gridLeft && absTop === node.gridTop;
+	if (node.settled) {
+		return;
+	}
+	node.gridLeft = absLeft;
+	node.gridTop = absTop;
 	for (const child of node.children) {
 		roundToGrid(child, absLeft, absTop);
 	}

From 9874dfe596f792d68fcf82330cbd4fe65386092f Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:37:23 -0400
Subject: [PATCH 42/99] Run the editor benchmark at the terminal's own cell
 size, as the example does

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/harness.ts          | 3 ++-
 bench/scenarios/editor.ts | 6 +-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/bench/harness.ts b/bench/harness.ts
index cf9e1c93..f8e20df1 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -25,9 +25,10 @@ export function readBenchFile(path: string): string {
 export async function mount(
 	cols = 100,
 	rows = 40,
+	options: object = {},
 ): Promise<{proc: any; dom: any}> {
 	const proc = new MockProcess({cols, rows});
-	const dom = new TermDOM({transport: proc.transport});
+	const dom = new TermDOM({...options, transport: proc.transport});
 	dom.attach();
 	await nextFrame(dom);
 	return {proc, dom};
diff --git a/bench/scenarios/editor.ts b/bench/scenarios/editor.ts
index 02039066..d529a24c 100644
--- a/bench/scenarios/editor.ts
+++ b/bench/scenarios/editor.ts
@@ -6,7 +6,7 @@ import {
 	silence,
 } from "../harness.ts";
 
-const {proc, dom} = await mount();
+const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
 installGlobals(dom);
 const {EditorState} = await import("@codemirror/state");
 const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
@@ -39,10 +39,6 @@ const view = new EditorView({
 			javascript({typescript: true}),
 			syntaxHighlighting(defaultHighlightStyle),
 			keymap.of([...defaultKeymap, ...historyKeymap]),
-			EditorView.theme({
-				".cm-scroller": {lineHeight: "1"},
-				".cm-content": {padding: "0"},
-			}),
 		],
 	}),
 	parent: document.getElementById("editor"),

From 8dbedcc834e615bac7523ffec0d07d53338e0d3a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:52:30 -0400
Subject: [PATCH 43/99] Lay the root out as a block, and time CodeMirror keys
 under load

The initial block was a flex column, so html was a flex item whose
automatic minimum size took a min-content pass over the whole page on
every layout. A block sizes html the same way without it.

The latency helpers move into the harness, and a new scenario times
CodeMirror from key to frame idle and with every core busy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/editor.ts                   | 53 +++++++++++++++++++++++
 bench/harness.ts                  | 70 +++++++++++++++++++++++++++++++
 bench/scenarios/editor-latency.ts | 23 ++++++++++
 bench/scenarios/editor.ts         | 50 ++--------------------
 bench/scenarios/latency.ts        | 57 ++-----------------------
 src/internal/layout.ts            |  3 +-
 6 files changed, 154 insertions(+), 102 deletions(-)
 create mode 100644 bench/editor.ts
 create mode 100644 bench/scenarios/editor-latency.ts

diff --git a/bench/editor.ts b/bench/editor.ts
new file mode 100644
index 00000000..b538941e
--- /dev/null
+++ b/bench/editor.ts
@@ -0,0 +1,53 @@
+/**
+ * CodeMirror as the example runs it, on a 400-line file, with the cursor
+ * near the top.
+ */
+import {installGlobals, mount, nextFrame} from "./harness.ts";
+
+export async function mountEditor(): Promise<{
+	proc: any;
+	dom: any;
+	view: any;
+}> {
+	const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
+	installGlobals(dom);
+	const {EditorState} = await import("@codemirror/state");
+	const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
+	const {defaultKeymap, history, historyKeymap} = await import(
+		"@codemirror/commands",
+	);
+	const {javascript} = await import("@codemirror/lang-javascript");
+	const {defaultHighlightStyle, syntaxHighlighting} = await import(
+		"@codemirror/language",
+	);
+
+	const {document} = dom;
+	document.body.innerHTML = "<h1>Editor</h1><div id=editor></div>";
+	const doc = Array.from(
+		{length: 100},
+		(_, i) =>
+			[
+				`function step${i}(value: number, rect: {x: number; y: number}): number {`,
+				`\tconst scaled = value * ${i + 1} + rect.x; // step ${i}`,
+				"\treturn Math.max(scaled, rect.y);",
+				"}",
+			].join("\n"),
+	).join("\n");
+	const view = new EditorView({
+		state: EditorState.create({
+			doc,
+			extensions: [
+				lineNumbers(),
+				history(),
+				javascript({typescript: true}),
+				syntaxHighlighting(defaultHighlightStyle),
+				keymap.of([...defaultKeymap, ...historyKeymap]),
+			],
+		}),
+		parent: document.getElementById("editor"),
+	});
+	view.focus();
+	view.dispatch({selection: {anchor: doc.indexOf("\n", 200)}});
+	await nextFrame(dom);
+	return {proc, dom, view};
+}
diff --git a/bench/harness.ts b/bench/harness.ts
index f8e20df1..780457d9 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -3,7 +3,9 @@
  * by its first argument, so the runner can point the same scenario at two
  * checkouts, and prints one JSON line per measurement.
  */
+import {spawn} from "node:child_process";
 import {readFileSync} from "node:fs";
+import {availableParallelism} from "node:os";
 
 export const root = process.argv[2];
 
@@ -77,3 +79,71 @@ export async function measure(
 	}
 	report(label, times);
 }
+
+/**
+ * Reports wall times as a measurement, and prints their percentiles, which
+ * a median alone hides, to stderr.
+ */
+export function describeLatency(label: string, times: number[]): void {
+	report(label, times);
+	const sorted = [...times].sort((a, b) => a - b);
+	const at = (q: number): string =>
+		sorted[Math.floor(sorted.length * q)].toFixed(1);
+	console.error(
+		`${label}: p50 ${at(0.5)} p90 ${at(0.9)} p99 ${at(0.99)} max ${sorted.at(-1)!.toFixed(1)}`,
+	);
+}
+
+/**
+ * Times each key from reaching the program to its frame reaching the
+ * terminal, typed at a person's pace.
+ */
+export function keyLatency(
+	proc: any,
+): (key: string) => Promise<number> {
+	let wrote: (() => void) | null = null;
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+		wrote?.();
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+	return async (key) => {
+		await new Promise((resolve) => setTimeout(resolve, 40));
+		const painted = new Promise<void>((resolve) => {
+			wrote = resolve;
+		});
+		const start = performance.now();
+		proc.stdin.simulateResponse(key);
+		await painted;
+		wrote = null;
+		return performance.now() - start;
+	};
+}
+
+/** Runs the work with an idle machine, every core busy, and two spinners a core. */
+export async function underLoad(
+	label: string,
+	work: () => Promise<number[]>,
+): Promise<void> {
+	describeLatency(`${label}, idle`, await work());
+	for (const [load, perCore] of [
+		["every core busy", 1],
+		["two spinners a core", 2],
+	] as const) {
+		const spinners = Array.from(
+			{length: availableParallelism() * perCore},
+			() => spawn(process.execPath, ["-e", "for (;;) {}"], {stdio: "ignore"}),
+		);
+		await new Promise((resolve) => setTimeout(resolve, 300));
+		try {
+			describeLatency(`${label}, ${load}`, await work());
+		} finally {
+			for (const spinner of spinners) {
+				spinner.kill();
+			}
+		}
+	}
+}
diff --git a/bench/scenarios/editor-latency.ts b/bench/scenarios/editor-latency.ts
new file mode 100644
index 00000000..5596b8da
--- /dev/null
+++ b/bench/scenarios/editor-latency.ts
@@ -0,0 +1,23 @@
+import {mountEditor} from "../editor.ts";
+import {keyLatency, underLoad} from "../harness.ts";
+
+const {proc, dom} = await mountEditor();
+const press = keyLatency(proc);
+const text = "const value = compute(element, rect);";
+let typed = 0;
+
+async function type(keys: number): Promise<number[]> {
+	const times: number[] = [];
+	for (let i = 0; i < keys; i++) {
+		const key = typed % text.length === text.length - 1
+			? "\r"
+			: text[typed % text.length];
+		times.push(await press(key));
+		typed++;
+	}
+	return times;
+}
+
+await type(20);
+await underLoad("codemirror: key to frame", () => type(100));
+dom.dispose();
diff --git a/bench/scenarios/editor.ts b/bench/scenarios/editor.ts
index d529a24c..2fe0a9c8 100644
--- a/bench/scenarios/editor.ts
+++ b/bench/scenarios/editor.ts
@@ -1,51 +1,7 @@
-import {
-	installGlobals,
-	measure,
-	mount,
-	nextFrame,
-	silence,
-} from "../harness.ts";
+import {mountEditor} from "../editor.ts";
+import {measure, nextFrame, silence} from "../harness.ts";
 
-const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
-installGlobals(dom);
-const {EditorState} = await import("@codemirror/state");
-const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
-const {defaultKeymap, history, historyKeymap} = await import(
-	"@codemirror/commands",
-);
-const {javascript} = await import("@codemirror/lang-javascript");
-const {defaultHighlightStyle, syntaxHighlighting} = await import(
-	"@codemirror/language",
-);
-
-const {document} = dom;
-document.body.innerHTML = "<h1>Editor</h1><div id=editor></div>";
-const doc = Array.from(
-	{length: 100},
-	(_, i) =>
-		[
-			`function step${i}(value: number, rect: {x: number; y: number}): number {`,
-			`\tconst scaled = value * ${i + 1} + rect.x; // step ${i}`,
-			"\treturn Math.max(scaled, rect.y);",
-			"}",
-		].join("\n"),
-).join("\n");
-const view = new EditorView({
-	state: EditorState.create({
-		doc,
-		extensions: [
-			lineNumbers(),
-			history(),
-			javascript({typescript: true}),
-			syntaxHighlighting(defaultHighlightStyle),
-			keymap.of([...defaultKeymap, ...historyKeymap]),
-		],
-	}),
-	parent: document.getElementById("editor"),
-});
-view.focus();
-view.dispatch({selection: {anchor: doc.indexOf("\n", 200)}});
-await nextFrame(dom);
+const {proc, dom, view} = await mountEditor();
 silence(proc);
 
 async function press(data: string): Promise<void> {
diff --git a/bench/scenarios/latency.ts b/bench/scenarios/latency.ts
index 6d0aef10..45bb9df5 100644
--- a/bench/scenarios/latency.ts
+++ b/bench/scenarios/latency.ts
@@ -1,49 +1,16 @@
-import {spawn} from "node:child_process";
-import {availableParallelism} from "node:os";
+import {keyLatency, mount, nextFrame, underLoad} from "../harness.ts";
 
-import {mount, nextFrame, report} from "../harness.ts";
-
-function describe(label: string, times: number[]): void {
-	report(label, times);
-	const sorted = [...times].sort((a, b) => a - b);
-	const at = (q: number): string =>
-		sorted[Math.floor(sorted.length * q)].toFixed(1);
-	console.error(
-		`${label}: p50 ${at(0.5)} p90 ${at(0.9)} p99 ${at(0.99)} max ${sorted.at(-1)!.toFixed(1)}`,
-	);
-}
-
-// Elapsed time from a key reaching the program to its frame reaching the
-// terminal, typed at a person's pace, first on an idle machine and then
-// with a process spinning on every core.
 const {proc, dom} = await mount();
 dom.document.body.innerHTML = "<input id=field>";
 const field = dom.document.getElementById("field");
 field.focus();
 await nextFrame(dom);
-
-let wrote: (() => void) | null = null;
-proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
-	wrote?.();
-	const callback = typeof enc === "function" ? enc : cb;
-	if (typeof callback === "function") {
-		(callback as () => void)();
-	}
-	return true;
-};
+const press = keyLatency(proc);
 
 async function type(keys: number): Promise<number[]> {
 	const times: number[] = [];
 	for (let i = 0; i < keys; i++) {
-		await new Promise((resolve) => setTimeout(resolve, 40));
-		const painted = new Promise<void>((resolve) => {
-			wrote = resolve;
-		});
-		const start = performance.now();
-		proc.stdin.simulateResponse(String.fromCharCode(97 + (i % 26)));
-		await painted;
-		times.push(performance.now() - start);
-		wrote = null;
+		times.push(await press(String.fromCharCode(97 + (i % 26))));
 		if (field.value.length > 60) {
 			field.value = "";
 			await nextFrame(dom);
@@ -53,21 +20,5 @@ async function type(keys: number): Promise<number[]> {
 }
 
 await type(20);
-describe("latency: key to frame, idle", await type(100));
-
-for (const [label, perCore] of [
-	["every core busy", 1],
-	["two spinners a core", 2],
-] as const) {
-	const spinners = Array.from({length: availableParallelism() * perCore}, () =>
-		spawn(process.execPath, ["-e", "for (;;) {}"], {stdio: "ignore"}));
-	await new Promise((resolve) => setTimeout(resolve, 300));
-	try {
-		describe(`latency: key to frame, ${label}`, await type(100));
-	} finally {
-		for (const spinner of spinners) {
-			spinner.kill();
-		}
-	}
-}
+await underLoad("latency: key to frame", () => type(100));
 dom.dispose();
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 1cbc28b2..2dc0473a 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -5327,8 +5327,7 @@ export class Layout {
 		this.measureNodes = new Set<LayoutNode>();
 
 		const root = new LayoutNode();
-		root.style.flexDirection = "column";
-		root.style.alignItems = "stretch";
+		root.style.displayType = "block";
 		root.style.width = toValue(width);
 		root.style.height = toValue(height);
 		this.initialBlock = root;

From 6050a7bdf867450ed3e1e4b1c711a25434751004 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 21:55:56 -0400
Subject: [PATCH 44/99] Spare geometry reads the scroll clamp and the math
 search when nothing calls for them

A flush after no solve leaves every offset in range, since every scroll
clamps what it stores. A page that never laid out a <math> has no
element inside one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts    | 12 ++++++++++--
 src/internal/layout.ts | 21 +++++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 756ef4e3..2b49b8b5 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -36211,12 +36211,20 @@ export function flushLayout(node: globalThis.Node): boolean {
 	const had = flushStyle(node);
 	const attached = getAttachedDocument(node);
 	if (attached !== undefined) {
-		_(attached).extra.layout.performLayout();
-		clampScrollOffsets(attached);
+		const layout = _(attached).extra.layout;
+		layout.performLayout();
+		if (clampedSolves.get(layout) !== layout.solves) {
+			clampedSolves.set(layout, layout.solves);
+			clampScrollOffsets(attached);
+		}
 	}
 	return had;
 }
 
+// Offsets only leave their range when layout changes, since every scroll
+// clamps what it stores, so a flush after no solve has nothing to clamp.
+const clampedSolves = new WeakMap<object, number>();
+
 export function hoverListenerCount(document: globalThis.Document): number {
 	return hoverListenerCounters.get(document as Document)?.count ?? 0;
 }
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 2dc0473a..dd1ca1e3 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3257,7 +3257,10 @@ function measureInlineRun(
 }
 
 // The <math> element a node is inside, itself included.
-function getEnclosingMath(node: Node): Element | null {
+function getEnclosingMath(layout: Layout, node: Node): Element | null {
+	if (!layout.laidOutMath) {
+		return null;
+	}
 	for (
 		let element: Element | null = nodeTypeOf(node) === node.ELEMENT_NODE
 			? (node as Element)
@@ -3275,6 +3278,7 @@ function getEnclosingMath(node: Node): Element | null {
 function measureMath(layout: Layout, element: Element): MathBox {
 	const box = layoutMath(element, !isInlineDisplay(getUsedDisplay(element)));
 	layout.mathBoxes.set(element, box);
+	layout.laidOutMath = true;
 	return box;
 }
 
@@ -5272,6 +5276,9 @@ export class Layout {
 	// Each <math> element's last laid-out box. Written by whichever
 	// measurement placed the element and read back by the painter.
 	mathBoxes: WeakMap<Element, MathBox>;
+	// Whether any <math> was ever laid out, so a page without one never
+	// searches an element's ancestors for it.
+	laidOutMath: boolean;
 
 	// The reverse of Box.layoutNode, and the registry the sweeps that must
 	// reach every box (resize, pruning, disposal) walk. Strong, because
@@ -5300,16 +5307,21 @@ export class Layout {
 	// Counts layout passes, so a node styled in this pass is not styled
 	// again when a container re-adds it.
 	pass: number;
+	// Counts the passes that solved the tree, so a reader can tell whether
+	// geometry changed since it last looked.
+	solves: number;
 
 	constructor(window: Window, width: number, height: number) {
 		this.geometryMoved = false;
 		this.pass = 0;
+		this.solves = 0;
 		this.positionedElements = new Set<Element>();
 		this.terminalReordersText = false;
 		this.rectTextIndices =
 			new WeakMap<object, Map<Node, TextFragmentEntry[]>>();
 		this.boxes = new WeakMap<Node, Box>();
 		this.mathBoxes = new WeakMap<Element, MathBox>();
+		this.laidOutMath = false;
 		this.derivedContainers = new WeakSet<Element>();
 		this.anonymousBoxes = new Map<LayoutNode, Box>();
 		this.dirtyRunContainers = new Set<Element>();
@@ -5454,6 +5466,7 @@ export class Layout {
 		const root = this.initialBlock;
 		root.performLayout(root.style.width.value, root.style.height.value);
 		computePaintExtents(this, root, 0);
+		this.solves++;
 	}
 
 	dispose(): void {
@@ -5726,7 +5739,7 @@ export class Layout {
 		}
 
 		// An element inside <math> covers the cells that render its text.
-		const math = getEnclosingMath(element);
+		const math = getEnclosingMath(this, element);
 		if (math !== null && math !== element) {
 			const rects = getMathNodeRects(this, math, element);
 			return rects.length === 0 ? null : unionRects(this, rects);
@@ -5798,7 +5811,7 @@ export class Layout {
 	}
 
 	getRects(node: Node): DOMRect[] {
-		const math = getEnclosingMath(node);
+		const math = getEnclosingMath(this, node);
 		if (math !== null && math !== node) {
 			return getMathNodeRects(this, math, node);
 		}
@@ -5987,7 +6000,7 @@ export class Layout {
 		clampToNearestLine = false,
 	): {node: Text; offset: number} | null {
 		// Math has no text runs. Its cells know what text they render.
-		const math = getEnclosingMath(root);
+		const math = getEnclosingMath(this, root);
 		if (math !== null) {
 			const origin = getMathOrigin(this, math);
 			return origin === null

From 279f88996fa54cfbc7c42bd2fad28aca7f75b094 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 22:03:53 -0400
Subject: [PATCH 45/99] Keep the non-breaking spaces a run opens and closes on
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The trim at a run's edges matched \s, which takes in U+00A0, so a
paragraph holding only &nbsp; laid out zero lines tall. Only collapsible
spaces go (css-text-3 §4.1.1). Outlook writes every blank line that way,
and the email snapshots gain their spacer rows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                        |   4 +-
 .../__snapshots__/email-fixtures.test.ts.snap | 178 ++++++++++--------
 tests/whitespace.test.ts                      |  19 ++
 3 files changed, 119 insertions(+), 82 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index dd1ca1e3..872dbc33 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -4102,8 +4102,8 @@ function processWhitespace(
 
 		// Never the newline a <br> contributes. That is a forced break, and
 		// trimming it dropped the blank line `<br>text` opens with.
-		const leading = text.match(/^[^\S\n]*/)?.[0].length || 0;
-		const trailing = text.match(/[^\S\n]*$/)?.[0].length || 0;
+		const leading = text.match(/^[ \t\r\f]*/)?.[0].length || 0;
+		const trailing = text.match(/[ \t\r\f]*$/)?.[0].length || 0;
 		const trimStart = Math.min(leading, guardStart);
 		const trimmedEnd = Math.max(text.length - trailing, guardEnd);
 
diff --git a/tests/__snapshots__/email-fixtures.test.ts.snap b/tests/__snapshots__/email-fixtures.test.ts.snap
index 6d15a599..a42aaa12 100644
--- a/tests/__snapshots__/email-fixtures.test.ts.snap
+++ b/tests/__snapshots__/email-fixtures.test.ts.snap
@@ -40,7 +40,7 @@ exports[`email fixture: calendar-rtl.html 1`] = `
 6: 61-90 #1a73e8`;
 
 exports[`email fixture: card-percent-cell.html 1`] = `
-           xxxxxxxxx xxxxxxx xx xxxx                     xxxxxxxx xx xxxx xxxxxx xxxxxxxx
+           xxxxxxxxx xxxxxxx xx xxxx                     xxxxxxxx xx xxxx xxxxxx xxxxxxxx
 
 
 
@@ -55,6 +55,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 
 
 
+
            xxxxxx xx xxx xxxxxx xx xxxxxxxxx xxxx xxxxxxxxxx
 
            xxx xx xxxx xxx xxxxx xxxx xxxxx xx xxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxx xxxx
@@ -246,9 +247,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 36: 7-93 #ffffff
 36: 93-100 #f5f5f5
 37: 0-7 #f5f5f5
-37: 7-12 #ffffff
-37: 12-88 #1b16b2
-37: 88-93 #ffffff
+37: 7-93 #ffffff
 37: 93-100 #f5f5f5
 38: 0-7 #f5f5f5
 38: 7-12 #ffffff
@@ -276,7 +275,9 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 42: 88-93 #ffffff
 42: 93-100 #f5f5f5
 43: 0-7 #f5f5f5
-43: 7-93 #ffffff
+43: 7-12 #ffffff
+43: 12-88 #1b16b2
+43: 88-93 #ffffff
 43: 93-100 #f5f5f5
 44: 0-7 #f5f5f5
 44: 7-93 #ffffff
@@ -284,9 +285,9 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 45: 0-7 #f5f5f5
 45: 7-93 #ffffff
 45: 93-100 #f5f5f5
-46: 0-1 #f5f5f5
-46: 1-99 #303345
-46: 99-100 #f5f5f5
+46: 0-7 #f5f5f5
+46: 7-93 #ffffff
+46: 93-100 #f5f5f5
 47: 0-1 #f5f5f5
 47: 1-99 #303345
 47: 99-100 #f5f5f5
@@ -445,7 +446,10 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 98: 99-100 #f5f5f5
 99: 0-1 #f5f5f5
 99: 1-99 #303345
-99: 99-100 #f5f5f5`;
+99: 99-100 #f5f5f5
+100: 0-1 #f5f5f5
+100: 1-99 #303345
+100: 99-100 #f5f5f5`;
 
 exports[`email fixture: ghost-article.html 1`] = `
 
@@ -495,6 +499,7 @@ exports[`email fixture: ghost-article.html 1`] = `
 
 
 
+
                                     xxxxxxx xx xxxxxxxx xxxxxxxx
 
                    xxxxxx x xxxx xxxxxx xx xx xxxxxx xx xxx xxxxxx xx xxx xxxxxxx
@@ -617,13 +622,13 @@ exports[`email fixture: ghost-article.html 1`] = `
 51: 0-100 #faf9f5
 52: 0-100 #faf9f5
 53: 0-100 #faf9f5
-54: 0-44 #faf9f5
-54: 44-57 #191a16
-54: 57-100 #faf9f5
+54: 0-100 #faf9f5
 55: 0-44 #faf9f5
 55: 44-57 #191a16
 55: 57-100 #faf9f5
-56: 0-100 #faf9f5
+56: 0-44 #faf9f5
+56: 44-57 #191a16
+56: 57-100 #faf9f5
 57: 0-100 #faf9f5
 58: 0-100 #faf9f5
 59: 0-100 #faf9f5
@@ -683,7 +688,8 @@ exports[`email fixture: ghost-article.html 1`] = `
 113: 0-100 #faf9f5
 114: 0-100 #faf9f5
 115: 0-100 #faf9f5
-116: 0-100 #faf9f5`;
+116: 0-100 #faf9f5
+117: 0-100 #faf9f5`;
 
 exports[`email fixture: inline-block-button.html 1`] = `
 
@@ -709,6 +715,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
 
 
                                        XXXXXXXXXX XXX XXXXXXX
@@ -733,7 +740,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
                                                  ╭──────────────────────╮
                                                  │                      │
-                               GET TICKETS       │     WATCH ONLINE     │
+                               GET TICKETS       │     WATCH ONLINE     │
                                                  │                      │
                                                  ╰──────────────────────╯
 
@@ -809,6 +816,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
                                        xxxxxxx xxxxxx xx xxxx
 
                 xxxxx xxx xxx xx xxxx xxxx xxxx xxxxxxxxx xxx xxxxxxx xxxxx xxxxxxx
@@ -842,6 +850,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 
 
 
+
                                      XXXXX XXXX XX XX XXX XXXXX
 
                                        xxx xxxxxx xxxxxxxxxx
@@ -904,7 +913,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 4: 7-93 #ffffff
 4: 93-100 #e7e9ed
 5: 0-7 #e7e9ed
-5: 7-93 #1c2127
+5: 7-93 #ab2914
 5: 93-100 #e7e9ed
 6: 0-7 #e7e9ed
 6: 7-93 #1c2127
@@ -985,7 +994,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 31: 7-93 #1c2127
 31: 93-100 #e7e9ed
 32: 0-7 #e7e9ed
-32: 7-93 #ffffff
+32: 7-93 #1c2127
 32: 93-100 #e7e9ed
 33: 0-7 #e7e9ed
 33: 7-93 #ffffff
@@ -1015,9 +1024,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 41: 7-93 #ffffff
 41: 93-100 #e7e9ed
 42: 0-7 #e7e9ed
-42: 7-20 #ffffff
-42: 20-80 #600820
-42: 80-93 #ffffff
+42: 7-93 #ffffff
 42: 93-100 #e7e9ed
 43: 0-7 #e7e9ed
 43: 7-20 #ffffff
@@ -1030,12 +1037,12 @@ exports[`email fixture: inline-block-button.html 1`] = `
 44: 80-93 #ffffff
 44: 93-100 #e7e9ed
 45: 0-7 #e7e9ed
-45: 7-93 #ffffff
+45: 7-20 #ffffff
+45: 20-80 #600820
+45: 80-93 #ffffff
 45: 93-100 #e7e9ed
 46: 0-7 #e7e9ed
-46: 7-26 #ffffff
-46: 26-47 #600820
-46: 47-93 #ffffff
+46: 7-93 #ffffff
 46: 93-100 #e7e9ed
 47: 0-7 #e7e9ed
 47: 7-26 #ffffff
@@ -1058,7 +1065,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 50: 47-93 #ffffff
 50: 93-100 #e7e9ed
 51: 0-7 #e7e9ed
-51: 7-93 #ffffff
+51: 7-26 #ffffff
+51: 26-47 #600820
+51: 47-93 #ffffff
 51: 93-100 #e7e9ed
 52: 0-7 #e7e9ed
 52: 7-93 #ffffff
@@ -1073,7 +1082,7 @@ exports[`email fixture: inline-block-button.html 1`] = `
 55: 7-93 #ffffff
 55: 93-100 #e7e9ed
 56: 0-7 #e7e9ed
-56: 7-93 #1c2127
+56: 7-93 #ffffff
 56: 93-100 #e7e9ed
 57: 0-7 #e7e9ed
 57: 7-93 #1c2127
@@ -1102,7 +1111,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 65: 0-7 #e7e9ed
 65: 7-93 #1c2127
 65: 93-100 #e7e9ed
-66: 0-100 #e7e9ed
+66: 0-7 #e7e9ed
+66: 7-93 #1c2127
+66: 93-100 #e7e9ed
 67: 0-100 #e7e9ed
 68: 0-100 #e7e9ed
 69: 0-100 #e7e9ed
@@ -1158,11 +1169,9 @@ exports[`email fixture: inline-block-button.html 1`] = `
 119: 0-100 #e7e9ed
 120: 0-100 #e7e9ed
 121: 0-100 #e7e9ed
-122: 0-7 #e7e9ed
-122: 7-93 #f6e3dd
-122: 93-100 #e7e9ed
+122: 0-100 #e7e9ed
 123: 0-7 #e7e9ed
-123: 7-93 #f6e3dd
+123: 7-93 #ab2914
 123: 93-100 #e7e9ed
 124: 0-7 #e7e9ed
 124: 7-93 #f6e3dd
@@ -1186,14 +1195,10 @@ exports[`email fixture: inline-block-button.html 1`] = `
 130: 7-93 #f6e3dd
 130: 93-100 #e7e9ed
 131: 0-7 #e7e9ed
-131: 7-19 #f6e3dd
-131: 19-81 #ffffff
-131: 81-93 #f6e3dd
+131: 7-93 #f6e3dd
 131: 93-100 #e7e9ed
 132: 0-7 #e7e9ed
-132: 7-19 #f6e3dd
-132: 19-81 #ffffff
-132: 81-93 #f6e3dd
+132: 7-93 #f6e3dd
 132: 93-100 #e7e9ed
 133: 0-7 #e7e9ed
 133: 7-19 #f6e3dd
@@ -1222,16 +1227,12 @@ exports[`email fixture: inline-block-button.html 1`] = `
 137: 93-100 #e7e9ed
 138: 0-7 #e7e9ed
 138: 7-19 #f6e3dd
-138: 19-44 #ffffff
-138: 44-57 #1c2127
-138: 57-81 #ffffff
+138: 19-81 #ffffff
 138: 81-93 #f6e3dd
 138: 93-100 #e7e9ed
 139: 0-7 #e7e9ed
 139: 7-19 #f6e3dd
-139: 19-44 #ffffff
-139: 44-57 #1c2127
-139: 57-81 #ffffff
+139: 19-81 #ffffff
 139: 81-93 #f6e3dd
 139: 93-100 #e7e9ed
 140: 0-7 #e7e9ed
@@ -1243,12 +1244,16 @@ exports[`email fixture: inline-block-button.html 1`] = `
 140: 93-100 #e7e9ed
 141: 0-7 #e7e9ed
 141: 7-19 #f6e3dd
-141: 19-81 #ffffff
+141: 19-44 #ffffff
+141: 44-57 #1c2127
+141: 57-81 #ffffff
 141: 81-93 #f6e3dd
 141: 93-100 #e7e9ed
 142: 0-7 #e7e9ed
 142: 7-19 #f6e3dd
-142: 19-81 #ffffff
+142: 19-44 #ffffff
+142: 44-57 #1c2127
+142: 57-81 #ffffff
 142: 81-93 #f6e3dd
 142: 93-100 #e7e9ed
 143: 0-7 #e7e9ed
@@ -1267,20 +1272,20 @@ exports[`email fixture: inline-block-button.html 1`] = `
 145: 81-93 #f6e3dd
 145: 93-100 #e7e9ed
 146: 0-7 #e7e9ed
-146: 7-93 #f6e3dd
+146: 7-19 #f6e3dd
+146: 19-81 #ffffff
+146: 81-93 #f6e3dd
 146: 93-100 #e7e9ed
 147: 0-7 #e7e9ed
-147: 7-93 #f6e3dd
+147: 7-19 #f6e3dd
+147: 19-81 #ffffff
+147: 81-93 #f6e3dd
 147: 93-100 #e7e9ed
 148: 0-7 #e7e9ed
-148: 7-39 #f6e3dd
-148: 39-60 #600820
-148: 60-93 #f6e3dd
+148: 7-93 #f6e3dd
 148: 93-100 #e7e9ed
 149: 0-7 #e7e9ed
-149: 7-39 #f6e3dd
-149: 39-60 #600820
-149: 60-93 #f6e3dd
+149: 7-93 #f6e3dd
 149: 93-100 #e7e9ed
 150: 0-7 #e7e9ed
 150: 7-39 #f6e3dd
@@ -1288,10 +1293,14 @@ exports[`email fixture: inline-block-button.html 1`] = `
 150: 60-93 #f6e3dd
 150: 93-100 #e7e9ed
 151: 0-7 #e7e9ed
-151: 7-93 #f6e3dd
+151: 7-39 #f6e3dd
+151: 39-60 #600820
+151: 60-93 #f6e3dd
 151: 93-100 #e7e9ed
 152: 0-7 #e7e9ed
-152: 7-93 #f6e3dd
+152: 7-39 #f6e3dd
+152: 39-60 #600820
+152: 60-93 #f6e3dd
 152: 93-100 #e7e9ed
 153: 0-7 #e7e9ed
 153: 7-93 #f6e3dd
@@ -1300,13 +1309,13 @@ exports[`email fixture: inline-block-button.html 1`] = `
 154: 7-93 #f6e3dd
 154: 93-100 #e7e9ed
 155: 0-7 #e7e9ed
-155: 7-93 #ffffff
+155: 7-93 #f6e3dd
 155: 93-100 #e7e9ed
 156: 0-7 #e7e9ed
-156: 7-93 #ffffff
+156: 7-93 #f6e3dd
 156: 93-100 #e7e9ed
 157: 0-7 #e7e9ed
-157: 7-93 #ffffff
+157: 7-93 #ab2914
 157: 93-100 #e7e9ed
 158: 0-7 #e7e9ed
 158: 7-93 #ffffff
@@ -1348,28 +1357,28 @@ exports[`email fixture: inline-block-button.html 1`] = `
 170: 7-93 #ffffff
 170: 93-100 #e7e9ed
 171: 0-7 #e7e9ed
-171: 7-37 #ffffff
-171: 37-62 #600820
-171: 62-93 #ffffff
+171: 7-93 #ffffff
 171: 93-100 #e7e9ed
 172: 0-7 #e7e9ed
-172: 7-37 #ffffff
-172: 37-62 #600820
-172: 62-93 #ffffff
+172: 7-93 #ffffff
 172: 93-100 #e7e9ed
 173: 0-7 #e7e9ed
-173: 7-37 #ffffff
-173: 37-62 #600820
-173: 62-93 #ffffff
+173: 7-93 #ffffff
 173: 93-100 #e7e9ed
 174: 0-7 #e7e9ed
-174: 7-93 #ffffff
+174: 7-37 #ffffff
+174: 37-62 #600820
+174: 62-93 #ffffff
 174: 93-100 #e7e9ed
 175: 0-7 #e7e9ed
-175: 7-93 #ffffff
+175: 7-37 #ffffff
+175: 37-62 #600820
+175: 62-93 #ffffff
 175: 93-100 #e7e9ed
 176: 0-7 #e7e9ed
-176: 7-93 #ffffff
+176: 7-37 #ffffff
+176: 37-62 #600820
+176: 62-93 #ffffff
 176: 93-100 #e7e9ed
 177: 0-7 #e7e9ed
 177: 7-93 #ffffff
@@ -1381,13 +1390,13 @@ exports[`email fixture: inline-block-button.html 1`] = `
 179: 7-93 #ffffff
 179: 93-100 #e7e9ed
 180: 0-7 #e7e9ed
-180: 7-93 #1c2127
+180: 7-93 #ffffff
 180: 93-100 #e7e9ed
 181: 0-7 #e7e9ed
-181: 7-93 #1c2127
+181: 7-93 #ffffff
 181: 93-100 #e7e9ed
 182: 0-7 #e7e9ed
-182: 7-93 #1c2127
+182: 7-93 #ffffff
 182: 93-100 #e7e9ed
 183: 0-7 #e7e9ed
 183: 7-93 #1c2127
@@ -1428,17 +1437,26 @@ exports[`email fixture: inline-block-button.html 1`] = `
 195: 0-7 #e7e9ed
 195: 7-93 #1c2127
 195: 93-100 #e7e9ed
-196: 0-100 #e7e9ed
-197: 0-100 #e7e9ed
-198: 0-100 #e7e9ed
+196: 0-7 #e7e9ed
+196: 7-93 #1c2127
+196: 93-100 #e7e9ed
+197: 0-7 #e7e9ed
+197: 7-93 #1c2127
+197: 93-100 #e7e9ed
+198: 0-7 #e7e9ed
+198: 7-93 #1c2127
+198: 93-100 #e7e9ed
 199: 0-100 #e7e9ed
 200: 0-100 #e7e9ed
 201: 0-100 #e7e9ed
 202: 0-100 #e7e9ed
 203: 0-100 #e7e9ed
-204: 0-100 #ffffff
-205: 0-100 #ffffff
-206: 0-100 #ffffff`;
+204: 0-100 #e7e9ed
+205: 0-100 #e7e9ed
+206: 0-100 #e7e9ed
+207: 0-100 #ffffff
+208: 0-100 #ffffff
+209: 0-100 #ffffff`;
 
 exports[`email fixture: inline-code.html 1`] = `
 
@@ -2194,7 +2212,7 @@ exports[`email fixture: notes-digest-row.html 1`] = `
                  │            xxxx xxxx xxxxx xxx xxxxxxxxx xxxxxx xx xxxxxx      │
                  │            xxxx x xxxxxxx xxxx xx xxxxxxx x xxxxxxx xxx        │
                  │            xxxxxxxxxxx xxx xxxxx xxx xxxx xxxx xxxxxx xxxx     │
-                 │            xx xxx xx xxxxxxx xxxxxxxxxx xxx xxx xxxx xxxxx     │
+                 │            xx xxx xx xxxxxxx xxxxxxxxxx xxx xxx xxxx xxxxx     │
                  │            xxxxx xx xxx xxxxxxx xxxxxxxx xx xxxxx xx xx        │
                  │            xxxxxx xxxxx xx xxxxx xxx xxxxxxxxx xxxxx           │
                  │            xxxxxxxx xxxxxxxxxx xxxx xxxxx xxxxxx xxxx xxx      │
diff --git a/tests/whitespace.test.ts b/tests/whitespace.test.ts
index f673296a..87131abf 100644
--- a/tests/whitespace.test.ts
+++ b/tests/whitespace.test.ts
@@ -792,3 +792,22 @@ test("a nowrap span keeps itself whole and lets the paragraph wrap", () => {
 		.toEqual(["affirmed the suit against", "Jack Poulson was without merit."]);
 	dom.dispose();
 });
+
+// U+00A0 is not collapsible white space (css-text-3 §4.1.1), so a line
+// holding only one is not empty. Outlook writes every blank line as
+// <p class=MsoNormal><o:p>&nbsp;</o:p></p>.
+test("a paragraph holding only a non-breaking space is one line tall", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	const paragraph = (inner: string) => `<p style="margin: 0">${inner}</p>`;
+	for (const inner of ["&nbsp;", "<span>&nbsp;</span>", "<o:p>&nbsp;</o:p>", " &nbsp; "]) {
+		dom.document.body.innerHTML =
+			paragraph("a") + paragraph(inner) + paragraph("b");
+		await nextFrame(dom);
+		expect(
+			[...dom.document.querySelectorAll("p")]
+				.map((p) => p.getBoundingClientRect().height),
+		).toEqual([1, 1, 1]);
+	}
+	dom.dispose();
+});

From c1be4f71ed456bc9ae7ca2279c156dbaad0a112a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 22:50:38 -0400
Subject: [PATCH 46/99] Give solitaire's height breakpoints a unit

Media Queries 4 makes a unitless length unknown, so (min-height: 32)
never matched and the grand tier never showed, and (max-height: 19)
never hid the hint on a short screen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/solitaire.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/solitaire.ts b/examples/solitaire.ts
index 99c1f1b2..d6a5e5c1 100644
--- a/examples/solitaire.ts
+++ b/examples/solitaire.ts
@@ -528,9 +528,9 @@ function sheet(): string {
 
   ${css(TIERS.compact)}
   @media (min-width: ${ROOMY_MIN_WIDTH}ch) { ${css(TIERS.roomy)} }
-  @media (min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}) { ${css(TIERS.grand)} }
+  @media (min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}px) { ${css(TIERS.grand)} }
   /* A short terminal spends its rows on the cards. */
-  @media (max-height: ${HINT_MIN_HEIGHT - 1}) { .hint { display: none; } }
+  @media (max-height: ${HINT_MIN_HEIGHT - 1}px) { .hint { display: none; } }
 `;
 }
 
@@ -1360,7 +1360,7 @@ function *App(this: Context) {
   // re-renders the faces to the size the CSS just snapped to.
   const roomy = term.window.matchMedia(`(min-width: ${ROOMY_MIN_WIDTH}ch)`);
   const grand = term.window.matchMedia(
-    `(min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT})`,
+    `(min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}px)`,
   );
   const retier = () => this.refresh();
   roomy.addEventListener("change", retier);

From 2d44d69164e43593a989be1bc91ab31bae108df4 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 22:51:43 -0400
Subject: [PATCH 47/99] Repaint only the rows a frame changed

A frame starts from the last one and repaints the bands of rows that
changed, when nothing scrolled or resized. Layout reports the boxes
that moved as it writes paint extents: one that paints a box of its
own by its old and new rows, a run by its lines when they differ, and a
box that lost a child by its old rows. A restyle reports the element's
rows when its paint style changed, and a selection move the rows of
both ends, old and new. Whatever names no rows repaints whole.

Every test's partial frames are checked against a whole repaint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/harness.ts             |   6 +
 src/index.ts                 |  20 +++
 src/internal/cssom.ts        |  26 ++-
 src/internal/dom.ts          |   9 +-
 src/internal/framebuffer.ts  | 118 ++++++++++++-
 src/internal/input.ts        |   7 +-
 src/internal/layout.ts       | 330 ++++++++++++++++++++++++++++++++++-
 src/internal/layoutsolver.ts |   5 +
 src/internal/painter.ts      | 125 +++++++++++--
 tests/test-utils.ts          |   5 +
 10 files changed, 616 insertions(+), 35 deletions(-)

diff --git a/bench/harness.ts b/bench/harness.ts
index 780457d9..a325976e 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -14,6 +14,12 @@ export const benchRoot = new URL("..", import.meta.url).pathname;
 
 const index = await import(`${root}/src/index.ts`);
 const utils = await import(`${root}/tests/test-utils.ts`);
+const painter = await import(`${root}/src/internal/painter.ts`);
+// The test utilities check every partial frame against a whole one, which
+// is not what a user's frame costs.
+if (painter.partialFrameCheck !== undefined) {
+	painter.partialFrameCheck.enabled = false;
+}
 
 export const TermDOM = index.TermDOM;
 export const installGlobals = index.installGlobals;
diff --git a/src/index.ts b/src/index.ts
index fedb937d..f31264d0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -87,10 +87,14 @@ import {
 	framePainted,
 	invalidateTextMeasurement,
 	Layout,
+	takeDamageBands,
 } from "./internal/layout.ts";
 import {
+	checkPartialFrame,
 	paint,
 	Painter,
+	paintsAsBefore,
+	partialFrameCheck,
 	resolveDocumentScrollBand,
 	resolveScrollShift,
 } from "./internal/painter.ts";
@@ -1655,14 +1659,30 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 			));
 	// Read after the clamp, which adds to the journal.
 	const clamped = termDOMSlots.framebuffer.journal;
+	const damage = takeDamageBands(
+		termDOMSlots.layout,
+		-termDOMSlots.framebuffer.scrollTop,
+		(element, key) => paintsAsBefore(termDOMSlots.painter, element, key),
+	);
 	const context = beginFrame(termDOMSlots.framebuffer, {
 		offset: -termDOMSlots.framebuffer.scrollTop,
 		cursorRow: top,
 		regionRows: top + regionHeight,
 		delta: shift ? shift.delta : fullscreen ? 0 : clamped.frameScroll,
 		shift: shift ?? undefined,
+		// A box scrolled moves rows no box reports.
+		bands: termDOMSlots.framebuffer.wholeDamage || journalled !== null
+			? undefined
+			: damage,
 	});
 	paint(termDOMSlots.painter, context);
+	if (context.partial && partialFrameCheck.enabled) {
+		checkPartialFrame(
+			termDOMSlots.painter,
+			context,
+			termDOMSlots.framebuffer.prevFrame?.caret ?? null,
+		);
+	}
 	const ansi = endFrame(termDOMSlots.framebuffer);
 	framePainted(termDOMSlots.layout);
 
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 6e35f048..c31b0e1f 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -8288,10 +8288,29 @@ function invalidateElement(cascade: Cascade, element: Element): void {
 	}
 	cascade.computedStyleCache.delete(element);
 	cascade.hasResults = null;
-	cascade.pseudoElementStyleCache.delete(element);
+	const hadPseudoStyles = cascade.pseudoElementStyleCache.delete(element);
 	// A style change can flip display: contents, which moves the node's
-	// flat-tree BOX parent, so every box enumeration is stale.
-	cascade.layout.invalidateFrame();
+	// flat-tree BOX parent, so every box enumeration is stale. A change
+	// layout sees repaints what it moves. The element's own rows repaint
+	// for one it does not.
+	cascade.layout.invalidateFrame(false);
+	recordRestyle(cascade, element, dropped, hadPseudoStyles);
+}
+
+// The style an element painted under, kept until the next frame compares
+// it with the new one. A pseudo-element's style is not compared.
+function recordRestyle(
+	cascade: Cascade,
+	element: Element,
+	dropped: Slots<ComputedStyleDeclaration> | undefined,
+	hadPseudoStyles: boolean,
+): void {
+	if (!cascade.layout.restyledForPaint.has(element)) {
+		cascade.layout.restyledForPaint.set(
+			element,
+			dropped && !hadPseudoStyles ? dropped.styleVersion : null,
+		);
+	}
 }
 
 // A child that came or went can change what the element's other
@@ -8470,6 +8489,7 @@ function invalidateElementCaches(
 	// A computed style an author still holds is the one this cache handed
 	// out, so it is told the cascade changed rather than merely dropped.
 	const dropped = cascade.computedStyleCache.get(element);
+	recordRestyle(cascade, element, dropped, cascade.pseudoElementStyleCache.has(element));
 	if (dropped) {
 		cascade.currentDeclarations.delete(dropped);
 		storeTransitionFallback(cascade, element, "", dropped.resolved);
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 2b49b8b5..05c86ee1 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -40,6 +40,7 @@ import {
 	drawGrid,
 	type Framebuffer,
 	invalidate,
+	requestFrame,
 	scrollTo,
 } from "./framebuffer.ts";
 import {
@@ -31089,7 +31090,8 @@ function scheduleSelectionChange(document: Document): void {
 	// below. That guard drops the second move in a task but not its paint.
 	const attached = getAttachedDocument(document);
 	if (attached !== undefined) {
-		invalidate(_(attached).extra.framebuffer);
+		_(attached).extra.layout.selectionMoved = true;
+		requestFrame(_(attached).extra.framebuffer);
 		void _(attached).extra.render();
 	}
 	const documentSlots = _(document);
@@ -36031,8 +36033,9 @@ function handleMutationRecords(
 		return;
 	}
 	// Any observed mutation can move a node in the flat tree. Drop the
-	// memoized composition links before anything reads through them.
-	_(attached).extra.layout.invalidateFrame();
+	// memoized composition links before anything reads through them. What
+	// the mutation changes on screen, layout finds as the boxes it moves.
+	_(attached).extra.layout.invalidateFrame(false);
 	// Attribute records whose value did not actually change are dropped
 	// before any handler sees them. Frameworks (and this repo's own
 	// examples) reassign className/style with identical values on every
diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 0e871488..2b286e00 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -977,7 +977,9 @@ export function readCell(
 	};
 }
 
-function joinTouchingBorders(grid: CellGrid): void {
+// Returns the borders as painted, before joining, which a frame painted
+// over this one starts from.
+function joinTouchingBorders(grid: CellGrid): Uint32Array {
 	const {rows, cols, border} = grid;
 	const painted = border.slice();
 	// Which neighbour to look at for each edge of a cell, and which of that
@@ -1024,6 +1026,7 @@ function joinTouchingBorders(grid: CellGrid): void {
 			border[index] = joined;
 		}
 	}
+	return painted;
 }
 
 function getGridLine(grid: CellGrid, row: number, writer: FrameWriter): string {
@@ -1126,6 +1129,15 @@ export class CellContext {
 	// The terminal's own background as packed RGB, where it has said, for
 	// a translucent color painted where nothing else is.
 	backdrop: number | null;
+	// The buffer rows a frame repaints, [top, bottom) for each band. Rows
+	// outside them keep what the last frame painted. One band of every row
+	// for a full frame.
+	bands: Array<[number, number]>;
+	// The band being painted. Writes outside it are dropped.
+	bandTop: number;
+	bandBottom: number;
+	// Whether the frame started from the last one.
+	partial: boolean;
 
 	constructor(
 		grid: CellGrid,
@@ -1136,6 +1148,10 @@ export class CellContext {
 		this.caret = null;
 		this.clipRect = null;
 		this.backdrop = null;
+		this.bands = [[0, rows]];
+		this.bandTop = 0;
+		this.bandBottom = rows;
+		this.partial = false;
 		this.grid = grid;
 		this.rows = rows;
 		this.cols = cols;
@@ -1154,6 +1170,23 @@ export class CellContext {
 	}
 }
 
+/**
+ * The caret a frame shows: the one it painted, or, on a row a frame that
+ * repainted some rows left alone, the one the last frame showed.
+ */
+export function keptCaret(
+	context: CellContext,
+	previous: {col: number; row: number} | null,
+): {col: number; row: number} | null {
+	if (!context.partial || context.caret !== null || previous === null) {
+		return context.caret;
+	}
+	const row = previous.row + context.viewportOffset;
+	return context.bands.some(([top, end]) => row >= top && row < end)
+		? null
+		: previous;
+}
+
 export function setCaret(context: CellContext, x: number, y: number): void {
 	context.caret = {col: x, row: y};
 }
@@ -1188,11 +1221,11 @@ export function drawRect(
 		const bg = background === "default" ? 0 : background & COLOR_MASK;
 		const clip = context.clipRect;
 		const offset = context.viewportOffset;
-		const top = Math.max(y, clip?.top ?? y, -offset);
+		const top = Math.max(y, clip?.top ?? y, context.bandTop - offset);
 		const bottom = Math.min(
 			y + height,
 			clip?.bottom ?? y + height,
-			context.rows - offset,
+			context.bandBottom - offset,
 		);
 		const left = Math.max(x, clip?.left ?? x, 0);
 		const right = Math.min(x + width, clip?.right ?? x + width, context.cols);
@@ -1508,8 +1541,8 @@ function getGuardedWriteIndex(
 ): number {
 	const terminalRow = row + context.viewportOffset;
 	if (
-		terminalRow < 0 ||
-		terminalRow >= context.rows ||
+		terminalRow < context.bandTop ||
+		terminalRow >= context.bandBottom ||
 		col < 0 ||
 		col >= context.cols
 	) {
@@ -1978,6 +2011,10 @@ const GUESSED_CELL_PIXELS: Readonly<{width: number; height: number}> = {
 
 export class Framebuffer {
 	prev: CellGrid | null;
+	// The previous frame's borders before they were joined, and where it
+	// was painted from, so a frame that repaints some rows starts from it.
+	prevBorders: Uint32Array | null;
+	prevFrame: {offset: number; cursorRow: number | undefined; caret: {col: number; row: number} | null} | null;
 	// The dropped grid, reused by the next frame of the same size.
 	spare: CellGrid | null;
 	diff: CellGrid | null;
@@ -2006,11 +2043,16 @@ export class Framebuffer {
 	writer: FrameWriter;
 	frameScroll: number;
 	dirty: boolean;
+	// Whether the next frame repaints every row, because something changed
+	// that names no rows of its own.
+	wholeDamage: boolean;
 
 	constructor(rows: number, cols: number, colorDepth: ColorDepth = "rgb") {
 		this.probesWaiting = false;
 		this.exchange = null;
 		this.prev = null;
+		this.prevBorders = null;
+		this.prevFrame = null;
 		this.spare = null;
 		this.diff = null;
 		this.pendingEnd = null;
@@ -2029,6 +2071,7 @@ export class Framebuffer {
 		this.cellSize = {...GUESSED_CELL_PIXELS};
 		this.frameScroll = 0;
 		this.dirty = true;
+		this.wholeDamage = true;
 		this.writer = new FrameWriter(colorDepth);
 	}
 
@@ -2145,6 +2188,12 @@ export function adoptCellPixels(
 
 export function invalidate(framebuffer: Framebuffer): void {
 	framebuffer.dirty = true;
+	framebuffer.wholeDamage = true;
+}
+
+/** A frame is wanted, and whoever asks names the rows it changed. */
+export function requestFrame(framebuffer: Framebuffer): void {
+	framebuffer.dirty = true;
 }
 
 /**
@@ -2244,6 +2293,8 @@ export function repaintAll(framebuffer: Framebuffer): void {
 	// leaves the scrollback alone) and reprints.
 	framebuffer.spare = framebuffer.prev;
 	framebuffer.prev = null;
+	framebuffer.prevBorders = null;
+	framebuffer.prevFrame = null;
 	framebuffer.prevContentHeight = 0;
 	framebuffer.needsFullClear = true;
 	framebuffer.renderedLines.clear();
@@ -2251,7 +2302,7 @@ export function repaintAll(framebuffer: Framebuffer): void {
 
 export function beginFrame(
 	framebuffer: Framebuffer,
-	{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift}: {
+	{offset, cursorRow: cursorPosition, regionRows, delta = 0, shift, bands}: {
 
 		/** Rows the document scroll has scrolled, negative downward. */
 		offset: number;
@@ -2275,6 +2326,13 @@ export function beginFrame(
 	 * whole region, which is the rows a document scroll spans.
 	 */
 		shift?: {top: number; end: number};
+
+		/**
+	 * The buffer rows that changed, `[top, end)` each. The frame starts
+	 * from the last one and repaints only these, when nothing moved the
+	 * rest. Absent, every row repaints.
+	 */
+		bands?: Array<[number, number]>;
 	},
 ): CellContext {
 	const frameRows = Math.max(
@@ -2353,8 +2411,44 @@ export function beginFrame(
 		scrollPrefix = writer.resetScrollRegion().take();
 	}
 
+	const prevFrame = framebuffer.prevFrame;
+	const prevBorders = framebuffer.prevBorders;
+	const partial =
+		bands !== undefined &&
+		framebuffer.prev !== null &&
+		prevBorders !== null &&
+		prevFrame !== null &&
+		!scrolling &&
+		delta === 0 &&
+		!overflowing &&
+		framebuffer.prev.rows === frameRows &&
+		framebuffer.prev.cols === cols &&
+		prevFrame.offset === offset &&
+		prevFrame.cursorRow === cursorPosition &&
+		!framebuffer.needsScreenReset &&
+		!framebuffer.needsFullClear &&
+		!framebuffer.probesWaiting;
+
 	const context = new CellContext(next, frameRows, cols, offset);
 	context.backdrop = framebuffer.exchange?.terminalBackground ?? null;
+	if (partial) {
+		context.partial = true;
+		const prev = framebuffer.prev!;
+		next.cluster.set(prev.cluster);
+		next.fg.set(prev.fg);
+		next.bg.set(prev.bg);
+		next.attrs.set(prev.attrs);
+		next.border.set(prevBorders);
+		context.bands = [];
+		for (const [top, end] of bands) {
+			const from = Math.max(0, top);
+			const to = Math.min(frameRows, end);
+			if (from < to) {
+				clearRange(next, from * cols, to * cols);
+				context.bands.push([from, to]);
+			}
+		}
+	}
 	framebuffer.pendingEnd = (): string => {
 		const measurer =
 			framebuffer.exchange !== null &&
@@ -2364,7 +2458,7 @@ export function beginFrame(
 		// The frame is complete. Join the borders whose strokes touch, so
 		// the diff below sees a junction appear even when only its
 		// neighbour changed.
-		joinTouchingBorders(next);
+		const painted = joinTouchingBorders(next);
 
 		// Build the diff. A frame taller than the terminal is a growth
 		// frame. The rows below the fold have never been on screen, so
@@ -2541,6 +2635,7 @@ export function beginFrame(
 		// when no cell changed. A blurred input leaves no visual diff, but
 		// the real cursor is sitting visible at the stale caret until a
 		// frame re-parks it.
+		context.caret = keptCaret(context, prevFrame?.caret ?? null);
 		const caret = context.caret;
 		const caretBufferRow = caret === null ? null : caret.row + offset;
 		const caretVisible =
@@ -2657,9 +2752,17 @@ export function beginFrame(
 		if (overflowing) {
 			framebuffer.prev = bottomRows(next, framebuffer.rowCount);
 			framebuffer.spare = next;
+			framebuffer.prevBorders = null;
+			framebuffer.prevFrame = null;
 		} else {
 			framebuffer.prev = next;
 			framebuffer.spare = retired;
+			framebuffer.prevBorders = painted;
+			framebuffer.prevFrame = {
+				offset,
+				cursorRow: cursorPosition,
+				caret: context.caret,
+			};
 		}
 		framebuffer.prevContentHeight = contentHeight;
 
@@ -2729,6 +2832,7 @@ export function endFrame(framebuffer: Framebuffer): string {
 	const ansi = end();
 	framebuffer.frameScroll = 0;
 	framebuffer.dirty = false;
+	framebuffer.wholeDamage = false;
 	return ansi;
 }
 
diff --git a/src/internal/input.ts b/src/internal/input.ts
index d239bf7b..cf55644e 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -49,7 +49,7 @@ import {
 } from "./dom.ts";
 import {requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
-import {type Framebuffer, invalidate, repaintAll} from "./framebuffer.ts";
+import {type Framebuffer, requestFrame, repaintAll} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
 import {
 	attributeOf,
@@ -454,8 +454,9 @@ export function dispatchInput(
 	input: Input,
 	item: WireKey[] | WireMouse | WirePaste,
 ): void {
-	// Pseudo-state and the selection move with no mutation record.
-	invalidate(input.framebuffer);
+	// Pseudo-state and the selection move with no mutation record. Each
+	// names the rows it changes.
+	requestFrame(input.framebuffer);
 	if (Array.isArray(item)) {
 		deliverKeys(input, item);
 		return;
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 872dbc33..73d978a5 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1005,8 +1005,12 @@ interface Styling {
 const stylings = new WeakMap<LayoutNode, Styling>();
 
 interface Extent {
-	// The box's own top, in absolute document rows.
+	// The box's own top, in absolute document rows, and its left edge and
+	// size, which a repaint compares to find what moved.
 	origin: number;
+	left: number;
+	width: number;
+	height: number;
 	// The rows the subtree can paint, in absolute document rows. Absolutely
 	// positioned children push it outside the box.
 	top: number;
@@ -1037,17 +1041,47 @@ const extents = new WeakMap<LayoutNode, Extent>();
 function computePaintExtents(
 	layout: Layout,
 	node: LayoutNode,
+	originLeft: number,
 	originTop: number,
 	settled = false,
+	fixed = false,
 ): Extent {
 	const top = originTop + node.result.top;
+	const left = originLeft + node.result.left;
 	let extent = extents.get(node);
 	if (settled && extent !== undefined && extent.origin === top) {
 		return extent;
 	}
+	fixed ||= node.style.positionType === "fixed";
+	let moved = false;
+	if (layout.collecting) {
+		const lines = node.measure === null ? undefined : getMeasuredLines(layout, node);
+		const shifted = extent === undefined ||
+			extent.origin !== top ||
+			extent.left !== left;
+		const resized = extent !== undefined &&
+			(extent.width !== getComputedWidth(node) ||
+				extent.height !== getComputedHeight(node));
+		moved = node.lostChild ||
+			((shifted || resized) && paintsOwnBox(layout, node)) ||
+			(node.measure !== null &&
+				(shifted ||
+					(!settled && !node.settled &&
+						!isSameLines(node, lineRecords.get(node), lines))));
+		if (lines !== undefined) {
+			lineRecords.set(node, lines);
+		}
+	}
+	node.lostChild = false;
+	if (moved && layout.collecting && extent !== undefined) {
+		addDamage(layout, node, extent.top, extent.bottom, fixed);
+	}
 	if (extent === undefined) {
 		extent = {
 			origin: top,
+			left: 0,
+			width: 0,
+			height: 0,
 			top,
 			bottom: top,
 			unstackedChildren: 0,
@@ -1087,8 +1121,14 @@ function computePaintExtents(
 		}
 	}
 	for (const child of node.children) {
-		const childExtent =
-			computePaintExtents(layout, child, top, settled || node.settled);
+		const childExtent = computePaintExtents(
+			layout,
+			child,
+			left,
+			top,
+			settled || node.settled,
+			fixed,
+		);
 		if (clips && scrollBottom !== null && child.style.displayType !== "none") {
 			if (scrollRight !== null) {
 				scrollRight =
@@ -1127,8 +1167,14 @@ function computePaintExtents(
 		}
 	}
 	extent.origin = top;
+	extent.left = left;
+	extent.width = getComputedWidth(node);
+	extent.height = getComputedHeight(node);
 	extent.top = highest;
 	extent.bottom = lowest;
+	if (moved && layout.collecting) {
+		addDamage(layout, node, highest, lowest, fixed);
+	}
 	extent.unstackedChildren = unstacked;
 	extent.overflowRight = right;
 	extent.overflowBottom = bottom;
@@ -3628,7 +3674,7 @@ function collectLeaves(
 							: Number.NaN,
 						contentHeightMode === "definite" ? contentHeight : Number.NaN,
 					);
-					computePaintExtents(layout, independentFormattingContext, 0);
+					computePaintExtents(layout, independentFormattingContext, 0, 0);
 					finalContentWidth = getComputedWidth(independentFormattingContext);
 					finalContentHeight = getComputedHeight(independentFormattingContext);
 				} else {
@@ -5310,11 +5356,31 @@ export class Layout {
 	// Counts the passes that solved the tree, so a reader can tell whether
 	// geometry changed since it last looked.
 	solves: number;
+	// The rows the next frame repaints, [top, bottom, fixed] in document
+	// rows, or in viewport rows for a box in fixed space. Every row
+	// repaints when wholeDamage is set. collecting is set while the paint
+	// extents of the document, not of a box's own formatting context, are
+	// written, which is when moved boxes add their rows.
+	damage: Array<[number, number, boolean]>;
+	wholeDamage: boolean;
+	collecting: boolean;
+	// Elements whose style changed with no layout change, and whether the
+	// selection moved. Their rows are found once layout is current.
+	restyledForPaint: Map<Element, object | null>;
+	selectionMoved: boolean;
+	// The rows the selection covered at the last frame, from its ends.
+	selectionRows: [number, number] | null;
 
 	constructor(window: Window, width: number, height: number) {
 		this.geometryMoved = false;
 		this.pass = 0;
 		this.solves = 0;
+		this.damage = [];
+		this.wholeDamage = true;
+		this.collecting = false;
+		this.restyledForPaint = new Map();
+		this.selectionMoved = false;
+		this.selectionRows = null;
 		this.positionedElements = new Set<Element>();
 		this.terminalReordersText = false;
 		this.rectTextIndices =
@@ -5465,7 +5531,9 @@ export class Layout {
 		// viewport units against it.
 		const root = this.initialBlock;
 		root.performLayout(root.style.width.value, root.style.height.value);
-		computePaintExtents(this, root, 0);
+		this.collecting = !this.wholeDamage;
+		computePaintExtents(this, root, 0, 0);
+		this.collecting = false;
 		this.solves++;
 	}
 
@@ -6102,13 +6170,16 @@ export class Layout {
 	// The observer drain calls this once per mutation batch. The cascade calls
 	// it for style changes no record describes. Every entry that moves geometry
 	// announces it here, and the pass itself moves nothing unannounced.
-	invalidateFrame(): void {
+	invalidateFrame(whole = true): void {
 		const document = this.rootElement.ownerDocument;
 		if (document === null) {
 			return;
 		}
 		usedValuesChanged(document);
 		this.geometryMoved = true;
+		if (whole) {
+			this.wholeDamage = true;
+		}
 	}
 
 	// A node re-enumerates its whole subtree, because run membership may
@@ -6190,6 +6261,253 @@ export function invalidateTextMeasurement(layout: Layout): void {
 
 export function framePainted(layout: Layout): void {
 	layout.geometryMoved = false;
+	layout.damage = [];
+	layout.wholeDamage = false;
+	layout.restyledForPaint.clear();
+	layout.selectionMoved = false;
+}
+
+function addDamage(
+	layout: Layout,
+	node: LayoutNode,
+	top: number,
+	bottom: number,
+	fixed: boolean,
+): void {
+	if (bottom <= top) {
+		return;
+	}
+	if (layout.damage.length >= MAX_DAMAGE) {
+		layout.wholeDamage = true;
+		layout.damage = [];
+		return;
+	}
+	const shift = getScrollShift(layout, node).y;
+	layout.damage.push([top + shift, bottom + shift, fixed]);
+}
+
+// The lines a measured box painted at the last paint extents, to tell a
+// box laid out again into the same lines from one whose text changed.
+const lineRecords = new WeakMap<LayoutNode, BreakResult>();
+
+function isSameLines(
+	node: LayoutNode,
+	a: BreakResult | undefined,
+	b: BreakResult | undefined,
+): boolean {
+	if (a === b) {
+		return true;
+	}
+	if (
+		a === undefined ||
+		b === undefined ||
+		a.lines.length !== b.lines.length ||
+		(a.containerWidth !== b.containerWidth && !isStartAligned(node))
+	) {
+		return false;
+	}
+	for (let index = 0; index < a.lines.length; index++) {
+		const x = a.lines[index];
+		const y = b.lines[index];
+		if (
+			x.y !== y.y ||
+			x.width !== y.width ||
+			x.height !== y.height ||
+			x.segments.length !== y.segments.length
+		) {
+			return false;
+		}
+		for (let at = 0; at < x.segments.length; at++) {
+			const p = x.segments[at];
+			const q = y.segments[at];
+			if (
+				!isSameLeaf(p.leaf, q.leaf) ||
+				p.x !== q.x ||
+				p.width !== q.width ||
+				p.processedText !== q.processedText ||
+				p.dataStart !== q.dataStart ||
+				p.dataEnd !== q.dataEnd ||
+				p.visualBase !== q.visualBase
+			) {
+				return false;
+			}
+		}
+	}
+	return true;
+}
+
+// Leaves are made again whenever a run breaks. An inline-block lays its
+// content out apart, so a line holding one never counts as the same.
+function isSameLeaf(a: Leaf, b: Leaf): boolean {
+	if (a.type !== b.type || a.node !== b.node || a.type === "inline-block") {
+		return false;
+	}
+	if (a.type === "edge") {
+		const edge = b as EdgeLeaf;
+		return a.side === edge.side && a.margin === edge.margin &&
+			a.border === edge.border && a.padding === edge.padding;
+	}
+	return true;
+}
+
+// Whether a box's lines start at its left edge whatever width they broke
+// against, so that width alone moves none of them.
+function isStartAligned(node: LayoutNode): boolean {
+	const owner = node.owner as Node | null;
+	const element = owner === null
+		? null
+		: nodeTypeOf(owner) === owner.ELEMENT_NODE
+		? (owner as Element)
+		: flatParentElement(owner);
+	if (element === null || getComputedValue(element, "direction") === "rtl") {
+		return false;
+	}
+	const align = CSSValues.getLineAlignment(
+		getComputedValue(element, "text-align"),
+	);
+	return align !== "center" && align !== "right" && align !== "end" &&
+		!getComputedValue(element, "text-indent").includes("%");
+}
+
+// Whether a box draws anything of its own that its size or place decides:
+// a fill, a border, an outline, a marker, a clip. One that draws nothing
+// changes no cell by moving, and what it holds reports its own moves.
+function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
+	const owner = node.owner as Node | null;
+	// A run paints its lines from its origin, whatever its size.
+	if (owner === null || getRun(layout, node) !== null) {
+		return false;
+	}
+	if (nodeTypeOf(owner) !== owner.ELEMENT_NODE) {
+		return false;
+	}
+	const element = owner as Element;
+	const style = node.style;
+	if (
+		style.clipsOverflow ||
+		style.border.top !== 0 ||
+		style.border.right !== 0 ||
+		style.border.bottom !== 0 ||
+		style.border.left !== 0 ||
+		(style.displayType !== "block" &&
+			style.displayType !== "flex" &&
+			style.displayType !== "grid") ||
+		isReplacedBox(element) ||
+		isMathRoot(element) ||
+		layout.getBox(element)?.fragments
+	) {
+		return true;
+	}
+	const fill = getComputedValue(element, "background-color");
+	return !(fill === "transparent" || fill === "rgba(0, 0, 0, 0)") ||
+		getComputedValue(element, "background-image") !== "none" ||
+		getComputedValue(element, "outline-style") !== "none" ||
+		getComputedValue(element, "box-shadow") !== "none" ||
+		getComputedValue(element, "display") === "list-item";
+}
+
+// Past this many moved boxes a frame repaints whole, which is cheaper
+// than merging them, and bounds what a document never painted keeps.
+const MAX_DAMAGE = 64;
+
+function isInFixedBox(node: LayoutNode): boolean {
+	for (let at: LayoutNode | null = node; at !== null; at = at.parent) {
+		if (at.style.positionType === "fixed") {
+			return true;
+		}
+	}
+	return false;
+}
+
+// The rows from the first end of the selection to the last, or null
+// when an end has no caret position to measure.
+function getSelectionRows(layout: Layout): [number, number] | null {
+	const selection = layout.window.document.getSelection();
+	if (selection === null || selection.rangeCount === 0) {
+		return null;
+	}
+	let top = Infinity;
+	let bottom = -Infinity;
+	for (let index = 0; index < selection.rangeCount; index++) {
+		const range = selection.getRangeAt(index);
+		for (const [node, offset] of [
+			[range.startContainer, range.startOffset],
+			[range.endContainer, range.endOffset],
+		] as const) {
+			const rect = layout.getCaretRect(node, offset);
+			if (rect === null) {
+				return null;
+			}
+			top = Math.min(top, Math.floor(rect.y));
+			bottom = Math.max(bottom, Math.ceil(rect.y + Math.max(rect.height, 1)));
+		}
+	}
+	return [top, bottom];
+}
+
+/**
+ * The buffer rows the next frame must repaint, merged into bands, or
+ * undefined when every row must. offset turns document rows into buffer
+ * rows, as the frame's viewport offset does.
+ */
+export function takeDamageBands(
+	layout: Layout,
+	offset: number,
+	paintsAsBefore: (element: Element, key: object) => boolean,
+): Array<[number, number]> | undefined {
+	const selectionRows = getSelectionRows(layout);
+	const previousSelection = layout.selectionRows;
+	layout.selectionRows = selectionRows;
+	if (layout.wholeDamage) {
+		return undefined;
+	}
+	const rows: Array<[number, number]> = [];
+	const add = (top: number, bottom: number, fixed: boolean): void => {
+		rows.push(fixed ? [top, bottom] : [top + offset, bottom + offset]);
+	};
+	for (const [top, bottom, fixed] of layout.damage) {
+		add(top, bottom, fixed);
+	}
+	for (const [element, key] of layout.restyledForPaint) {
+		if (!element.isConnected || (key !== null && paintsAsBefore(element, key))) {
+			continue;
+		}
+		let box: Element | null = element;
+		while (box !== null && !layout.nodeMap.has(box)) {
+			box = flatParentElement(box);
+		}
+		const node = box === null ? undefined : layout.nodeMap.get(box);
+		const extent = node === undefined ? undefined : extents.get(node);
+		if (node === undefined || extent === undefined) {
+			return undefined;
+		}
+		const shift = getScrollShift(layout, node).y;
+		add(extent.top + shift, extent.bottom + shift, isInFixedBox(node));
+	}
+	if (layout.selectionMoved) {
+		if (selectionRows === null || previousSelection === null) {
+			return undefined;
+		}
+		for (const [top, bottom] of [previousSelection, selectionRows]) {
+			add(top, bottom, false);
+			add(top, bottom, true);
+		}
+	}
+	// A row beside a change can change too: a border there joins the
+	// changed one, and an outline reaches past its box.
+	rows.sort((a, b) => a[0] - b[0]);
+	const bands: Array<[number, number]> = [];
+	for (const [top, bottom] of rows) {
+		const from = top - 1;
+		const to = bottom + 1;
+		const last = bands.at(-1);
+		if (last !== undefined && from <= last[1]) {
+			last[1] = Math.max(last[1], to);
+		} else {
+			bands.push([from, to]);
+		}
+	}
+	return bands;
 }
 
 // Membership gates. A positioned inline run member owns no box of its
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index c33dd5ae..77325fd4 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -494,6 +494,9 @@ export class LayoutNode {
 	gridTop: number;
 	// Whether the last roundToGrid left the children as they were.
 	settled: boolean;
+	// Whether a child left since the last paint extents, whose rows then
+	// show nothing it painted.
+	lostChild: boolean;
 
 	constructor() {
 		this.children = [];
@@ -511,6 +514,7 @@ export class LayoutNode {
 		this.gridLeft = NaN;
 		this.gridTop = NaN;
 		this.settled = false;
+		this.lostChild = false;
 		this.currentStyle = createStyle();
 		this.result = createResult();
 	}
@@ -558,6 +562,7 @@ export class LayoutNode {
 		if (index !== -1) {
 			this.children.splice(index, 1);
 			child.parent = null;
+			this.lostChild = true;
 			if (child.outOfFlowCount !== 0) {
 				countOutOfFlow(this, -child.outOfFlowCount);
 			}
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index dd42a6f1..3444cf60 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -36,7 +36,8 @@ import {
 } from "./dom.ts";
 import {getEditingCaretPoint} from "./editing.ts";
 import {
-	type CellContext,
+	CellContext,
+	CellGrid,
 	type CellStyle,
 	drawBox,
 	drawDecoration,
@@ -44,6 +45,7 @@ import {
 	drawText,
 	type Framebuffer,
 	insetShiftPays,
+	keptCaret,
 	type LineStyle,
 	setCaret,
 } from "./framebuffer.ts";
@@ -201,6 +203,9 @@ interface PaintStyle {
 	shiftY: number;
 	contentInsetX: number;
 	contentInsetY: number;
+	// What else the painter reads from the element's style, so two paint
+	// styles that match paint alike.
+	others: string;
 }
 
 interface BorderPaint {
@@ -214,6 +219,38 @@ interface BorderPaint {
 	bottomLeft?: "round";
 }
 
+const PAINTED_ELSEWHERE = [
+	"z-index",
+	"position",
+	"text-overflow",
+	"list-style-type",
+	"list-style-position",
+	"list-style-image",
+	"outline-offset",
+	"caret-color",
+	"direction",
+	"text-align",
+	"text-indent",
+];
+
+/**
+ * Whether the element paints as it did under the style key it had, so a
+ * restyle that changed nothing it draws repaints no rows. False when the
+ * old style was never painted to compare.
+ */
+export function paintsAsBefore(
+	painter: Painter,
+	element: Element,
+	key: object,
+): boolean {
+	const before = paintStyles.get(key);
+	if (before === undefined || painter.cascade.getStyleKey(element) === null) {
+		return false;
+	}
+	return JSON.stringify(before) ===
+		JSON.stringify(getPaintStyle(painter, element));
+}
+
 function readPaintStyle(element: Element): PaintStyle {
 	const color = getComputedValue(element, "color");
 	const backgroundColor = getComputedValue(element, "background-color");
@@ -323,6 +360,9 @@ function readPaintStyle(element: Element): PaintStyle {
 	const gradient = getGradient(element);
 	const model = getBoxModel(element);
 	return {
+		others: PAINTED_ELSEWHERE.map((property) =>
+			getComputedValue(element, property)
+		).join("\0"),
 		// Whole cells, as layout rounds the content edge.
 		contentInsetX: Math.round(model.paddingLeft + model.borderLeftWidth),
 		contentInsetY: Math.round(model.paddingTop + model.borderTopWidth),
@@ -574,8 +614,6 @@ export function resolveDocumentScrollBand(
 }
 
 export function paint(painter: Painter, ctx: CellContext): void {
-	painter.renderedOutsideMarkers = new WeakSet<Element>();
-	painter.scrolledRows = 0;
 	painter.highlightedText = collectHighlightedText(painter.document);
 	painter.paintedText.clear();
 	painter.highlightStyles = new Map();
@@ -589,13 +627,74 @@ export function paint(painter: Painter, ctx: CellContext): void {
 	const fromRoot =
 		document.documentElement !== null &&
 		(bodyDisplay === "contents" || bodyDisplay.startsWith("inline"));
-	renderStackingContext(
-		painter,
-		(fromRoot ? document.documentElement : document.body) as Element,
-		ctx,
-		layers,
-	);
+	const root = (fromRoot ? document.documentElement : document.body) as Element;
 	const rendered = renderedTopLayer(painter.document) as unknown as Element[];
+	for (const [top, bottom] of ctx.bands) {
+		ctx.bandTop = top;
+		ctx.bandBottom = bottom;
+		paintBand(painter, ctx, root, rendered, layers);
+	}
+}
+
+/**
+ * Checks a frame that repainted only some rows against one painted
+ * whole, for tests. Set, a frame that differs throws, naming the cells.
+ */
+export const partialFrameCheck = {enabled: false};
+
+export function checkPartialFrame(
+	painter: Painter,
+	ctx: CellContext,
+	previousCaret: {col: number; row: number} | null,
+): void {
+	const whole = new CellContext(
+		new CellGrid(ctx.rows, ctx.cols),
+		ctx.rows,
+		ctx.cols,
+		ctx.viewportOffset,
+	);
+	whole.backdrop = ctx.backdrop;
+	paint(painter, whole);
+	const differences: string[] = [];
+	const a = ctx.grid;
+	const b = whole.grid;
+	for (let index = 0; index < a.cluster.length; index++) {
+		if (
+			a.cluster[index] !== b.cluster[index] ||
+			a.fg[index] !== b.fg[index] ||
+			a.bg[index] !== b.bg[index] ||
+			a.attrs[index] !== b.attrs[index] ||
+			a.border[index] !== b.border[index]
+		) {
+			differences.push(
+				`row ${Math.floor(index / ctx.cols)} col ${index % ctx.cols}`,
+			);
+		}
+	}
+	const caret = keptCaret(ctx, previousCaret);
+	if (JSON.stringify(caret) !== JSON.stringify(whole.caret)) {
+		differences.push(
+			`caret ${JSON.stringify(caret)}, whole ${JSON.stringify(whole.caret)}`,
+		);
+	}
+	if (differences.length > 0) {
+		throw new Error(
+			`A frame repainting rows ${JSON.stringify(ctx.bands)} differs from ` +
+				`a whole one at ${differences.slice(0, 8).join(", ")}`,
+		);
+	}
+}
+
+function paintBand(
+	painter: Painter,
+	ctx: CellContext,
+	root: Element,
+	rendered: Element[],
+	layers: Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}>,
+): void {
+	painter.renderedOutsideMarkers = new WeakSet<Element>();
+	painter.scrolledRows = 0;
+	renderStackingContext(painter, root, ctx, layers);
 	for (const element of rendered) {
 		const previousClip = ctx.clipRect;
 		ctx.clipRect = null;
@@ -718,8 +817,8 @@ function isOutsideViewport(
 	if (extent === undefined) {
 		return false;
 	}
-	const top = -ctx.viewportOffset + painter.scrolledRows;
-	const bottom = top + ctx.rows;
+	const top = -ctx.viewportOffset + painter.scrolledRows + ctx.bandTop;
+	const bottom = top + ctx.bandBottom - ctx.bandTop;
 	if (extent.bottom > top && extent.top < bottom) {
 		return false;
 	}
@@ -1006,8 +1105,8 @@ function visibleChildren(
 ): LayoutNode[] {
 	const layout = painter.layout;
 	const children = node.children;
-	const top = -ctx.viewportOffset + painter.scrolledRows;
-	const bottom = top + ctx.rows;
+	const top = -ctx.viewportOffset + painter.scrolledRows + ctx.bandTop;
+	const bottom = top + ctx.bandBottom - ctx.bandTop;
 	const extent = paintExtent(node);
 	const owner = node.owner as Node | null;
 	if (
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 87f18458..118635f2 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -20,8 +20,13 @@ import {
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
+import {partialFrameCheck} from "../src/internal/painter.ts";
 import {getStringWidth} from "../src/internal/text.ts";
 
+// A frame that repaints only the rows that changed must match one painted
+// whole, and every test's frames are held to that.
+partialFrameCheck.enabled = true;
+
 const {Terminal} = xtermPkg;
 type Terminal = InstanceType<typeof Terminal>;
 

From 17f90515ba934ffa3651d8d2c679005a461b50a2 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 22:55:59 -0400
Subject: [PATCH 48/99] Find the children on some rows by binary search
 whenever they are in row order

The search held for block containers only, so a flex column such as
CodeMirror's gutter had every child looked at each frame. A box's
paint extents now record whether its children never move up, which is
what the search needs, in any layout.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts  | 13 +++++++++++++
 src/internal/painter.ts |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 73d978a5..3cc3cc79 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1019,6 +1019,9 @@ interface Extent {
 	// ones, and display:none ones, whose result.top is never updated. The
 	// children are sorted by extent top only when this is 0.
 	unstackedChildren: number;
+	// Whether the children's extents never move up, top or bottom, in
+	// document order, so a binary search can find the ones on some rows.
+	rowOrdered: boolean;
 	// Where the box and its scrollable overflow reach, from the box's own
 	// origin: its border box, and past it the lines it measures and the
 	// boxes it holds, unless it clips them (css-overflow-3 §2.2). A fixed
@@ -1085,6 +1088,7 @@ function computePaintExtents(
 			top,
 			bottom: top,
 			unstackedChildren: 0,
+			rowOrdered: true,
 			overflowRight: 0,
 			overflowBottom: 0,
 			scrollRight: null,
@@ -1120,6 +1124,9 @@ function computePaintExtents(
 				node.style.border.top + node.result.padding.top + own.totalHeight;
 		}
 	}
+	let rowOrdered = true;
+	let previousTop = -Infinity;
+	let previousBottom = -Infinity;
 	for (const child of node.children) {
 		const childExtent = computePaintExtents(
 			layout,
@@ -1129,6 +1136,11 @@ function computePaintExtents(
 			settled || node.settled,
 			fixed,
 		);
+		if (childExtent.top < previousTop || childExtent.bottom < previousBottom) {
+			rowOrdered = false;
+		}
+		previousTop = childExtent.top;
+		previousBottom = childExtent.bottom;
 		if (clips && scrollBottom !== null && child.style.displayType !== "none") {
 			if (scrollRight !== null) {
 				scrollRight =
@@ -1176,6 +1188,7 @@ function computePaintExtents(
 		addDamage(layout, node, highest, lowest, fixed);
 	}
 	extent.unstackedChildren = unstacked;
+	extent.rowOrdered = rowOrdered;
 	extent.overflowRight = right;
 	extent.overflowBottom = bottom;
 	extent.scrollRight = clips ? scrollRight : null;
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 3444cf60..4652990f 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1112,8 +1112,8 @@ function visibleChildren(
 	if (
 		extent === undefined ||
 		extent.unstackedChildren !== 0 ||
+		!extent.rowOrdered ||
 		node.measure !== null ||
-		node.style.displayType !== "block" ||
 		(owner !== null &&
 			nodeTypeOf(owner) === owner.ELEMENT_NODE &&
 			layout.getBox(owner as Element)?.holdsFragments === true)

From 88fae707eb38e110f9d0f73aebe880d4b15df172 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 22:55:59 -0400
Subject: [PATCH 49/99] Wait for every event a chunk holds in the mouse tests'
 send helper

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/mouse.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/mouse.test.ts b/tests/mouse.test.ts
index 0d38e8b7..4e6c3e94 100644
--- a/tests/mouse.test.ts
+++ b/tests/mouse.test.ts
@@ -13,15 +13,15 @@ const ENABLE = "\x1b[?1002h\x1b[?1006h";
 const DISABLE = "\x1b[?1006l\x1b[?1002l";
 
 /** Feed bytes as the terminal would, and wait for the read side to see them. */
-function send(proc: MockProcess, data: string): Promise<void> {
+async function send(proc: MockProcess, data: string): Promise<void> {
 	(proc.stdin as unknown as {emit(e: string, d: Buffer): void}).emit(
 		"data",
 		Buffer.from(data),
 	);
+	await inputDispatched();
 	// The frame the input asks for starts in the next task, and writes in
 	// the one after.
-	return new Promise((resolve) =>
-		setTimeout(() => setTimeout(resolve, 0), 0));
+	await new Promise((resolve) => setTimeout(() => setTimeout(resolve, 0), 0));
 }
 
 function makeDocumentModeApp(lines = 30): {

From 7c8c8d2d8ca1517b9ba504f61b4bc0d35eb50261 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:05:44 -0400
Subject: [PATCH 50/99] Satisfy the linter: wrap long lines, sort an import,
 declare before use

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/editor.ts             |  6 +----
 bench/harness.ts            |  4 +---
 src/internal/cssom.ts       |  7 +++++-
 src/internal/dom.ts         |  8 +++----
 src/internal/framebuffer.ts |  7 +++++-
 src/internal/input.ts       |  2 +-
 src/internal/layout.ts      | 48 ++++++++++++++++++++++---------------
 src/internal/painter.ts     |  2 +-
 tests/whitespace.test.ts    |  7 +++++-
 9 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/bench/editor.ts b/bench/editor.ts
index b538941e..042a89c3 100644
--- a/bench/editor.ts
+++ b/bench/editor.ts
@@ -4,11 +4,7 @@
  */
 import {installGlobals, mount, nextFrame} from "./harness.ts";
 
-export async function mountEditor(): Promise<{
-	proc: any;
-	dom: any;
-	view: any;
-}> {
+export async function mountEditor(): Promise<{proc: any; dom: any; view: any}> {
 	const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
 	installGlobals(dom);
 	const {EditorState} = await import("@codemirror/state");
diff --git a/bench/harness.ts b/bench/harness.ts
index a325976e..9564e67b 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -104,9 +104,7 @@ export function describeLatency(label: string, times: number[]): void {
  * Times each key from reaching the program to its frame reaching the
  * terminal, typed at a person's pace.
  */
-export function keyLatency(
-	proc: any,
-): (key: string) => Promise<number> {
+export function keyLatency(proc: any): (key: string) => Promise<number> {
 	let wrote: (() => void) | null = null;
 	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
 		wrote?.();
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index c31b0e1f..3d770b67 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -8489,7 +8489,12 @@ function invalidateElementCaches(
 	// A computed style an author still holds is the one this cache handed
 	// out, so it is told the cascade changed rather than merely dropped.
 	const dropped = cascade.computedStyleCache.get(element);
-	recordRestyle(cascade, element, dropped, cascade.pseudoElementStyleCache.has(element));
+	recordRestyle(
+		cascade,
+		element,
+		dropped,
+		cascade.pseudoElementStyleCache.has(element),
+	);
 	if (dropped) {
 		cascade.currentDeclarations.delete(dropped);
 		storeTransitionFallback(cascade, element, "", dropped.resolved);
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 05c86ee1..cf22dbb1 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -36203,6 +36203,10 @@ export function revealPendingEditingCaret(document: globalThis.Document): void {
 	attachedSlots.extra.layout.revealCaret(node as Node, selection!.focusOffset);
 }
 
+// Offsets only leave their range when layout changes, since every scroll
+// clamps what it stores, so a flush after no solve has nothing to clamp.
+const clampedSolves = new WeakMap<object, number>();
+
 /**
  * Synchronously settle what a geometry read must see: pending mutations
  * delivered and layout brought up to date. A geometry read needs fresh
@@ -36224,10 +36228,6 @@ export function flushLayout(node: globalThis.Node): boolean {
 	return had;
 }
 
-// Offsets only leave their range when layout changes, since every scroll
-// clamps what it stores, so a flush after no solve has nothing to clamp.
-const clampedSolves = new WeakMap<object, number>();
-
 export function hoverListenerCount(document: globalThis.Document): number {
 	return hoverListenerCounters.get(document as Document)?.count ?? 0;
 }
diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 2b286e00..9e68bca2 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -2014,7 +2014,12 @@ export class Framebuffer {
 	// The previous frame's borders before they were joined, and where it
 	// was painted from, so a frame that repaints some rows starts from it.
 	prevBorders: Uint32Array | null;
-	prevFrame: {offset: number; cursorRow: number | undefined; caret: {col: number; row: number} | null} | null;
+	prevFrame: {
+		offset: number;
+		cursorRow: number | undefined;
+		caret: {col: number; row: number} | null;
+	} | null;
+
 	// The dropped grid, reused by the next frame of the same size.
 	spare: CellGrid | null;
 	diff: CellGrid | null;
diff --git a/src/internal/input.ts b/src/internal/input.ts
index cf55644e..927b5bae 100644
--- a/src/internal/input.ts
+++ b/src/internal/input.ts
@@ -49,7 +49,7 @@ import {
 } from "./dom.ts";
 import {requestEditingInsert} from "./editing.ts";
 import type {WireKey, WireMouse, WirePaste} from "./exchange.ts";
-import {type Framebuffer, requestFrame, repaintAll} from "./framebuffer.ts";
+import {type Framebuffer, repaintAll, requestFrame} from "./framebuffer.ts";
 import type {Layout} from "./layout.ts";
 import {
 	attributeOf,
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 3cc3cc79..82a05e0c 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1041,6 +1041,10 @@ interface Extent {
 // A subtree roundToGrid left alone keeps its record while its top holds.
 const extents = new WeakMap<LayoutNode, Extent>();
 
+// The lines a measured box painted at the last paint extents, to tell a
+// box laid out again into the same lines from one whose text changed.
+const lineRecords = new WeakMap<LayoutNode, BreakResult>();
+
 function computePaintExtents(
 	layout: Layout,
 	node: LayoutNode,
@@ -1058,18 +1062,22 @@ function computePaintExtents(
 	fixed ||= node.style.positionType === "fixed";
 	let moved = false;
 	if (layout.collecting) {
-		const lines = node.measure === null ? undefined : getMeasuredLines(layout, node);
-		const shifted = extent === undefined ||
-			extent.origin !== top ||
-			extent.left !== left;
-		const resized = extent !== undefined &&
+		const lines = node.measure === null
+			? undefined
+			: getMeasuredLines(layout, node);
+		const shifted =
+			extent === undefined || extent.origin !== top || extent.left !== left;
+		const resized =
+			extent !== undefined &&
 			(extent.width !== getComputedWidth(node) ||
 				extent.height !== getComputedHeight(node));
-		moved = node.lostChild ||
+		moved =
+			node.lostChild ||
 			((shifted || resized) && paintsOwnBox(layout, node)) ||
 			(node.measure !== null &&
 				(shifted ||
-					(!settled && !node.settled &&
+					(!settled &&
+						!node.settled &&
 						!isSameLines(node, lineRecords.get(node), lines))));
 		if (lines !== undefined) {
 			lineRecords.set(node, lines);
@@ -6280,6 +6288,10 @@ export function framePainted(layout: Layout): void {
 	layout.selectionMoved = false;
 }
 
+// Past this many moved boxes a frame repaints whole, which is cheaper
+// than merging them, and bounds what a document never painted keeps.
+const MAX_DAMAGE = 64;
+
 function addDamage(
 	layout: Layout,
 	node: LayoutNode,
@@ -6299,10 +6311,6 @@ function addDamage(
 	layout.damage.push([top + shift, bottom + shift, fixed]);
 }
 
-// The lines a measured box painted at the last paint extents, to tell a
-// box laid out again into the same lines from one whose text changed.
-const lineRecords = new WeakMap<LayoutNode, BreakResult>();
-
 function isSameLines(
 	node: LayoutNode,
 	a: BreakResult | undefined,
@@ -6357,8 +6365,10 @@ function isSameLeaf(a: Leaf, b: Leaf): boolean {
 	}
 	if (a.type === "edge") {
 		const edge = b as EdgeLeaf;
-		return a.side === edge.side && a.margin === edge.margin &&
-			a.border === edge.border && a.padding === edge.padding;
+		return a.side === edge.side &&
+			a.margin === edge.margin &&
+			a.border === edge.border &&
+			a.padding === edge.padding;
 	}
 	return true;
 }
@@ -6378,7 +6388,9 @@ function isStartAligned(node: LayoutNode): boolean {
 	const align = CSSValues.getLineAlignment(
 		getComputedValue(element, "text-align"),
 	);
-	return align !== "center" && align !== "right" && align !== "end" &&
+	return align !== "center" &&
+		align !== "right" &&
+		align !== "end" &&
 		!getComputedValue(element, "text-indent").includes("%");
 }
 
@@ -6419,10 +6431,6 @@ function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
 		getComputedValue(element, "display") === "list-item";
 }
 
-// Past this many moved boxes a frame repaints whole, which is cheaper
-// than merging them, and bounds what a document never painted keeps.
-const MAX_DAMAGE = 64;
-
 function isInFixedBox(node: LayoutNode): boolean {
 	for (let at: LayoutNode | null = node; at !== null; at = at.parent) {
 		if (at.style.positionType === "fixed") {
@@ -6482,7 +6490,9 @@ export function takeDamageBands(
 		add(top, bottom, fixed);
 	}
 	for (const [element, key] of layout.restyledForPaint) {
-		if (!element.isConnected || (key !== null && paintsAsBefore(element, key))) {
+		if (
+			!element.isConnected || (key !== null && paintsAsBefore(element, key))
+		) {
 			continue;
 		}
 		let box: Element | null = element;
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 4652990f..aa90f82c 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -361,7 +361,7 @@ function readPaintStyle(element: Element): PaintStyle {
 	const model = getBoxModel(element);
 	return {
 		others: PAINTED_ELSEWHERE.map((property) =>
-			getComputedValue(element, property)
+			getComputedValue(element, property),
 		).join("\0"),
 		// Whole cells, as layout rounds the content edge.
 		contentInsetX: Math.round(model.paddingLeft + model.borderLeftWidth),
diff --git a/tests/whitespace.test.ts b/tests/whitespace.test.ts
index 87131abf..786a564e 100644
--- a/tests/whitespace.test.ts
+++ b/tests/whitespace.test.ts
@@ -800,7 +800,12 @@ test("a paragraph holding only a non-breaking space is one line tall", async ()
 	const terminal = new MockProcess({cols: 40, rows: 12});
 	const dom = new TermDOM({transport: terminal.transport});
 	const paragraph = (inner: string) => `<p style="margin: 0">${inner}</p>`;
-	for (const inner of ["&nbsp;", "<span>&nbsp;</span>", "<o:p>&nbsp;</o:p>", " &nbsp; "]) {
+	for (const inner of [
+		"&nbsp;",
+		"<span>&nbsp;</span>",
+		"<o:p>&nbsp;</o:p>",
+		" &nbsp; ",
+	]) {
 		dom.document.body.innerHTML =
 			paragraph("a") + paragraph(inner) + paragraph("b");
 		await nextFrame(dom);

From 2936eb1079ff89a7e6d34c7406129e2c1e407e6f Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:22:29 -0400
Subject: [PATCH 51/99] Break text to the whole columns its box is drawn across

The breaker let a line fit its width rounded, but a box's edges snap
to cells from where they fall: 30.5 cells starting at a half cell is
drawn across 30 columns, and a line of 31 crossed the border. A
measure now gets the edge its box was last placed at and breaks to the
columns that edge and its width span. Text placed at an edge it was
not measured at breaks again where it landed, which a box at a whole
cell never needs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                        | 26 +++---
 src/internal/layoutsolver.ts                  | 92 ++++++++++++++++++-
 .../__snapshots__/email-fixtures.test.ts.snap | 14 +--
 tests/cell-size.test.ts                       | 32 +++++++
 4 files changed, 143 insertions(+), 21 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 82a05e0c..ea393230 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -49,6 +49,7 @@ import {
 	getComputedGridTracks,
 	getComputedHeight,
 	getComputedWidth,
+	getDrawnColumns,
 	type Gutter,
 	insertChild,
 	isContainingBlock,
@@ -1989,8 +1990,8 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 				if (styledFrom) {
 					styleLayoutNode(styledFrom, layoutNode, layout.positionedElements);
 				}
-				layoutNode.measure = (width, widthSpace, placing) =>
-					measureInlineRun(layout, entry, width, widthSpace, placing);
+				layoutNode.measure = (width, widthSpace, placing, left) =>
+					measureInlineRun(layout, entry, width, widthSpace, placing, left);
 				layout.measureNodes.add(layoutNode);
 				layout.anonymousBoxes.set(layoutNode, entry);
 				layoutNode.owner = entry.head;
@@ -2315,8 +2316,8 @@ function addElementNode(
 		return;
 	} else if (asRun) {
 		const box = getPrincipalBox(layout, element);
-		layoutNode.measure = (width, widthSpace, placing) =>
-			measureInlineRun(layout, box, width, widthSpace, placing);
+		layoutNode.measure = (width, widthSpace, placing, left) =>
+			measureInlineRun(layout, box, width, widthSpace, placing, left);
 		layout.measureNodes.add(layoutNode);
 
 		if (layoutNode && parentLayoutNode) {
@@ -2399,8 +2400,8 @@ function addTextNode(
 	}
 
 	const own = getPrincipalBox(layout, text);
-	layoutNode.measure = (width, widthSpace, placing) =>
-		measureInlineRun(layout, own, width, widthSpace, placing);
+	layoutNode.measure = (width, widthSpace, placing, left) =>
+		measureInlineRun(layout, own, width, widthSpace, placing, left);
 	layout.measureNodes.add(layoutNode);
 
 	insertChild(parentLayoutNode, layoutNode, parentLayoutNode.children.length);
@@ -3301,8 +3302,9 @@ function measureInlineRun(
 	width: number,
 	widthSpace: AvailableSpace,
 	placing: boolean,
+	left: number,
 ): Size {
-	const breakResult = breakNodes(layout, box, width, widthSpace);
+	const breakResult = breakNodes(layout, box, width, widthSpace, left);
 	if (Number.isFinite(width)) {
 		breakResult.containerWidth = width;
 	}
@@ -3869,6 +3871,7 @@ function breakNodes(
 	source: Box,
 	width: number,
 	widthSpace: AvailableSpace,
+	left = NaN,
 ): BreakResult {
 	// An `indefinite` request is indefinite (NaN), so percentages in
 	// the content cannot resolve. Any definite request, an `shrink-to-fit` 0
@@ -3897,12 +3900,13 @@ function breakNodes(
 
 	// A width of 0 is a real constraint, the min-content probe. Treated as
 	// unlimited it returned max-content, making min-content zero
-	// everywhere. A line fits a width when both round to the same cells,
-	// since its pieces are drawn at whole columns: a fraction of a margin
-	// does not wrap the word after it.
+	// everywhere. A line fits the whole columns its box is drawn across,
+	// since its pieces are drawn at whole columns too: a fraction of a
+	// margin does not wrap the word after it, and a box 30.5 cells wide
+	// drawn across 30 columns does not take a line of 31.
 	const maxWidth = widthSpace === "indefinite"
 		? Number.MAX_SAFE_INTEGER
-		: width > 0 ? Math.round(width) + 0.4999 : width;
+		: width > 0 ? getDrawnColumns(left, width) + 0.4999 : width;
 
 	const processedContent = processWhitespace(layout, leafNodes);
 	// `pre` suppresses wrapping as `nowrap` does. Treating it as wrappable
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 77325fd4..c16edc1d 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -77,10 +77,14 @@ export interface Size {
 // `placing` is true for the measurement that places the box and
 // false for the sizing probes before it. Only the placing one may keep
 // its line breaks.
+// left is the absolute left edge of the content box, unrounded, as the
+// box was last placed, so text can break against the whole columns it is
+// drawn across. NaN before the box is first placed.
 type Measure = (
 	width: number,
 	widthSpace: AvailableSpace,
 	placing: boolean,
+	left: number,
 ) => Size;
 
 // The origin of CSS 2 §10.3.7's hypothetical box, in the containing
@@ -494,6 +498,13 @@ export class LayoutNode {
 	gridTop: number;
 	// Whether the last roundToGrid left the children as they were.
 	settled: boolean;
+	// The box's left edge as its parent last placed it, and that edge
+	// summed down from the root, both unrounded. The text in a box breaks
+	// against the columns these say it is drawn across, and measuredLeft is
+	// the edge it last broke against.
+	rawLeft: number;
+	rawAbsoluteLeft: number;
+	measuredLeft: number;
 	// Whether a child left since the last paint extents, whose rows then
 	// show nothing it painted.
 	lostChild: boolean;
@@ -514,6 +525,9 @@ export class LayoutNode {
 		this.gridLeft = NaN;
 		this.gridTop = NaN;
 		this.settled = false;
+		this.rawLeft = 0;
+		this.rawAbsoluteLeft = NaN;
+		this.measuredLeft = NaN;
 		this.lostChild = false;
 		this.currentStyle = createStyle();
 		this.result = createResult();
@@ -610,7 +624,28 @@ export class LayoutNode {
 			true,
 		);
 
-		roundToGrid(this, 0, 0);
+		// Text measured at an edge it did not land on breaks again where it
+		// landed. A box placed at a whole cell, as most are, never does.
+		for (let pass = 0; pass < 3; pass++) {
+			const misplaced: LayoutNode[] = [];
+			roundToGrid(this, 0, 0, 0, true, misplaced);
+			if (misplaced.length === 0 || pass === 2) {
+				break;
+			}
+			for (const node of misplaced) {
+				node.invalidate();
+			}
+			layoutNode(
+				this,
+				availableWidth,
+				availableHeight,
+				widthSpace,
+				!Number.isNaN(availableHeight) ? "definite" : "indefinite",
+				ownerWidth,
+				ownerHeight,
+				true,
+			);
+		}
 		this.stale = false;
 	}
 }
@@ -1153,7 +1188,13 @@ function layoutMeasuredContent(
 		return;
 	}
 
-	const measured = node.measure!(innerWidth, widthSpace, placing);
+	node.measuredLeft = node.rawAbsoluteLeft;
+	const measured = node.measure!(
+		innerWidth,
+		widthSpace,
+		placing,
+		node.rawAbsoluteLeft + node.style.border.left + node.result.padding.left,
+	);
 
 	const width = widthSpace === "definite"
 		? availableWidth - marginRow
@@ -6162,8 +6203,22 @@ function roundToGrid(
 	node: LayoutNode,
 	absoluteLeft: number,
 	absoluteTop: number,
+	rawAbsoluteLeft: number,
+	placedByParent: boolean,
+	misplaced: LayoutNode[],
 ): void {
 	const nodeLeft = node.result.left;
+	if (placedByParent) {
+		node.rawLeft = nodeLeft;
+	}
+	node.rawAbsoluteLeft = rawAbsoluteLeft + node.rawLeft;
+	if (
+		node.measure !== null &&
+		node.measuresText &&
+		!isSameFraction(node.measuredLeft, node.rawAbsoluteLeft)
+	) {
+		misplaced.push(node);
+	}
 	const nodeTop = node.result.top;
 	const nodeWidth = !Number.isNaN(node.result.width) ? node.result.width : 0;
 	const nodeHeight = !Number.isNaN(node.result.height) ? node.result.height : 0;
@@ -6185,6 +6240,7 @@ function roundToGrid(
 	node.result.height =
 		roundValue(absBottom, isText, false) - roundValue(absTop, isText, false);
 
+	const laidOut = Number.isNaN(node.gridLeft);
 	node.settled = absLeft === node.gridLeft && absTop === node.gridTop;
 	if (node.settled) {
 		return;
@@ -6192,8 +6248,38 @@ function roundToGrid(
 	node.gridLeft = absLeft;
 	node.gridTop = absTop;
 	for (const child of node.children) {
-		roundToGrid(child, absLeft, absTop);
+		roundToGrid(
+			child,
+			absLeft,
+			absTop,
+			node.rawAbsoluteLeft,
+			laidOut,
+			misplaced,
+		);
+	}
+}
+
+// Whether two edges fall at the same place within a cell, which is all
+// that decides how many columns a width starting there is drawn across.
+// An edge not yet known breaks as one at a whole cell.
+function isSameFraction(a: number, b: number): boolean {
+	const fraction = (value: number) =>
+		Number.isNaN(value) ? 0 : value - Math.floor(value);
+	const difference = Math.abs(fraction(a) - fraction(b));
+	return difference < 0.0001 || difference > 0.9999;
+}
+
+/**
+ * How many columns a width starting at an unrounded edge is drawn
+ * across, as roundToGrid snaps a box's edges to the nearest cell. An edge
+ * not yet known is taken to be at a whole cell.
+ */
+export function getDrawnColumns(left: number, width: number): number {
+	if (Number.isNaN(left)) {
+		return roundValue(width, false, false);
 	}
+	return roundValue(left + width, false, false) -
+		roundValue(left, false, false);
 }
 
 function roundValue(
diff --git a/tests/__snapshots__/email-fixtures.test.ts.snap b/tests/__snapshots__/email-fixtures.test.ts.snap
index a42aaa12..34484c8c 100644
--- a/tests/__snapshots__/email-fixtures.test.ts.snap
+++ b/tests/__snapshots__/email-fixtures.test.ts.snap
@@ -2538,11 +2538,11 @@ exports[`email fixture: post-buttons-mention.html 1`] = `
            xxx xxxxxxxx xxxx xxxx xxx xxxxxxxx xxx xxxxxxxxxxxxxxxx xx xxxxx xxxxxxxxx xx
            xxxxx xxxxxxxxx xx xxx xxxxx xxxxxxxxxx xxx xxxxxxxx xx xxxxxx xx xxx xxxxxxxx
            xx xxxxxxxxx xx xxxxxxx xx xxxxx xxxx xxx xxxx xx xxxxxxxxxx xx xx xxxxx xxxxx
-           xxxxxx xxxxx xxxxxxxxxx xxxx xxxxxxxxxx xxxx xxxx xxxx xxxxx xxx xxxxx xxxxxxxx
-           xxxx xxxxxxxx xxxxxxxx xxxx x xxxxxxxxxxx xx xxxx xxxxx xxxxxxxx xx xxxxx xxx
-           xxxxxxxxx xx xxxx xxxxxxx xxxxxxx xxxx xxxxx xxxxxxx xx xxxx xxxx xxx xxxx
-           xxxxxxxxxx xxxx xx xxxx xxxxx xxx xxxxx xxx xxxx xxxxxx xxx xxxxxx xxx xxxxxxxx
-           xx xxxxxxxxxx xxxx xx xxx xxxxxxxxxxx
+           xxxxxx xxxxx xxxxxxxxxx xxxx xxxxxxxxxx xxxx xxxx xxxx xxxxx xxx xxxxx
+           xxxxxxxx xxxx xxxxxxxx xxxxxxxx xxxx x xxxxxxxxxxx xx xxxx xxxxx xxxxxxxx xx
+           xxxxx xxx xxxxxxxxx xx xxxx xxxxxxx xxxxxxx xxxx xxxxx xxxxxxx xx xxxx xxxx
+           xxx xxxx xxxxxxxxxx xxxx xx xxxx xxxxx xxx xxxxx xxx xxxx xxxxxx xxx xxxxxx
+           xxx xxxxxxxx xx xxxxxxxxxx xxxx xx xxx xxxxxxxxxxx
 
            xx xxxx xx xxxxxxx xxx xxxxxxxx xx xxxxx xxxx xxxxx xx xxxxxxxxx xxxxxx
            xxxxxxxxx xxx xxxx xxxxxxxxxxx xxxxxxxxxx xxx xxxxxxx xxxxxxxx xxxxx xx
@@ -2558,8 +2558,8 @@ exports[`email fixture: post-buttons-mention.html 1`] = `
                 xxxxxxx xxx xxxxxxxxxxx xx x xxxxxxxxxxx xxxxx xxxxxxx xxx xxxxxxx
                 xxxxxxxx xxxxxxx xxxxx xxxxxxxxxx xxx xxxxxxxx xxxxxxxxxx xxxxxxx
                 xxxxxxx xxxxx xx xxxxxxx xxxxxxxxx xxxxxx xx xxxxxx xxx xxxxxxxxx
-                xxxxxxx xxx xxxxxxxxxx xxx xxxx xxxxx xxxxxxxxxxx xx xxxxxxxx xxxxxxx
-                xx xxxxx xxxxx
+                xxxxxxx xxx xxxxxxxxxx xxx xxxx xxxxx xxxxxxxxxxx xx xxxxxxxx
+                xxxxxxx xx xxxxx xxxxx
 
 
                                              xxxxx xxxx
diff --git a/tests/cell-size.test.ts b/tests/cell-size.test.ts
index 3ed937ce..37b63180 100644
--- a/tests/cell-size.test.ts
+++ b/tests/cell-size.test.ts
@@ -661,3 +661,35 @@ test("an overflow: hidden box at a fractional column keeps its child's left bord
 	]);
 	dom.dispose();
 });
+
+// A box whose edges fall at half cells is drawn across the whole columns
+// its rounded edges span, and its text breaks to those, not to its width
+// rounded. Under an 8px margin at 16px cells, a 30.5 cell box is drawn
+// 30 columns wide, and a line of 31 crossed its border.
+test("text breaks to the columns a box at a half cell is drawn across", () => {
+	for (const [margin, lines] of [
+		[
+			"8px",
+			["│Lecture on the Connexion of   │", "│the Physical Sciences at the  │"],
+		],
+		[
+			"0",
+			[
+				"│Lecture on the Connexion of the│",
+				"│Physical Sciences at the hall  │",
+			],
+		],
+	] as const) {
+		const {dom} = make({width: 16, height: 32}, 100, 40);
+		dom.document.body.style.margin = "0";
+		dom.document.body.innerHTML =
+			`<div style="margin: ${margin}">` +
+			"<div style=\"width: 520px; border: 1px solid\"><div>Lecture on the " +
+			"Connexion of the Physical Sciences at the hall</div></div></div>";
+		expect(
+			dom.renderANSI().replace(/\x1b\[[0-9;]*m/g, "").split("\n").slice(1, 3)
+				.map((line) => line.trim()),
+		).toEqual([...lines]);
+		dom.dispose();
+	}
+});

From c935af4cc51317b6a800f6d26390394c93e96ccf Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:31:20 -0400
Subject: [PATCH 52/99] Keep one computed-style view per element, so a restyle
 defines no indices again

A view was made for each declaration, and an element restyled gets a new
one, so every getComputedStyle after a restyle defined some four hundred
index accessors. The view now belongs to the element and pseudo-element
and reads through to whichever declaration is current.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 3d770b67..3f7dab72 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -1114,21 +1114,32 @@ for (const property of CSS_PROPERTIES) {
 	}
 }
 
-const pageViews = new WeakMap<CSSStyleDeclaration, CSSStyleProperties>();
+const pageViews = new WeakMap<Element, Map<string, CSSStyleProperties>>();
 
 // The engine resolves a computed style through classes of its own, which
 // a page must not find in a prototype chain. What a page gets is a plain
-// CSSStyleProperties that reads through to the engine's, one per
-// declaration, so asking again returns the same object.
-function getPageView(source: CSSStyleDeclaration): CSSStyleProperties {
-	let view = pageViews.get(source);
+// CSSStyleProperties that reads through to the engine's, one per element
+// and pseudo-element, so asking again returns the same object. A restyle
+// gives the element a new declaration, and the view reads through to it,
+// keeping the indices it already defined.
+function getPageView(
+	source: CSSStyleDeclaration,
+	element: Element,
+	pseudoElement: string,
+): CSSStyleProperties {
+	let views = pageViews.get(element);
+	if (views === undefined) {
+		views = new Map();
+		pageViews.set(element, views);
+	}
+	let view = views.get(pseudoElement);
 	if (view === undefined) {
 		view = Object.create(CSSStyleProperties.prototype) as CSSStyleProperties;
 		seal(view, CSSStyleProperties, CSSStyleDeclaration);
-		_(view).viewOf = source;
 		_(view).indexed = 0;
-		pageViews.set(source, view);
+		views.set(pseudoElement, view);
 	}
+	_(view).viewOf = source;
 	syncViewIndices(view);
 	return view;
 }
@@ -6345,6 +6356,8 @@ export class Cascade {
 				getPageView(
 					getResolvedStyle(this, element, pseudoElt) as unknown as
 						CSSStyleDeclaration,
+					element,
+					pseudoElt ?? "",
 				) as unknown as globalThis.CSSStyleDeclaration,
 		) as typeof window.getComputedStyle;
 

From 2ca1c35ac83134d59f30aaf6c6bbae7ddb328316 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:41:02 -0400
Subject: [PATCH 53/99] Lay text out again where it landed only when its lines
 would change there

A text box measured before it was placed broke as if at a whole cell,
and landing at a fraction laid it out again. Every new cell of a table
at fractional columns took a second solve. The measure now says which
columns it broke to, whether it wrapped and how wide its lines are, and
another edge lays the box out again only when its lines no longer fit
or it wrapped. Damage collection also stops once the frame repaints
whole.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts       |  6 ++++
 src/internal/layoutsolver.ts | 55 +++++++++++++++++++++++-------------
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index ea393230..26cb0476 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3322,6 +3322,11 @@ function measureInlineRun(
 			? Math.max(breakResult.maxLineWidth, width)
 			: breakResult.maxLineWidth,
 		height: breakResult.totalHeight,
+		columns: widthSpace !== "indefinite" && width > 0
+			? getDrawnColumns(left, width)
+			: undefined,
+		wrapped: breakResult.wrapped === true,
+		lineColumns: Math.round(breakResult.maxLineWidth),
 	};
 }
 
@@ -6308,6 +6313,7 @@ function addDamage(
 	}
 	if (layout.damage.length >= MAX_DAMAGE) {
 		layout.wholeDamage = true;
+		layout.collecting = false;
 		layout.damage = [];
 		return;
 	}
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index c16edc1d..40ddad42 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -72,6 +72,13 @@ export type Sizing = "none" | "min-content" | "max-content" | "fit-content";
 export interface Size {
 	width: number;
 	height: number;
+	// For text: the whole columns its lines broke to, whether one ended
+	// where nothing forced it to, and how many columns the widest takes.
+	// Another place for the box matters only to text these say it would
+	// break differently.
+	columns?: number;
+	wrapped?: boolean;
+	lineColumns?: number;
 }
 
 // `placing` is true for the measurement that places the box and
@@ -500,11 +507,14 @@ export class LayoutNode {
 	settled: boolean;
 	// The box's left edge as its parent last placed it, and that edge
 	// summed down from the root, both unrounded. The text in a box breaks
-	// against the columns these say it is drawn across, and measuredLeft is
-	// the edge it last broke against.
+	// against the columns these say it is drawn across.
 	rawLeft: number;
 	rawAbsoluteLeft: number;
-	measuredLeft: number;
+	// What the last measure broke the box's text to: the width it was
+	// given, and the Size fields that say whether another edge would break
+	// it differently.
+	measuredWidth: number;
+	measured: Size | null;
 	// Whether a child left since the last paint extents, whose rows then
 	// show nothing it painted.
 	lostChild: boolean;
@@ -527,7 +537,8 @@ export class LayoutNode {
 		this.settled = false;
 		this.rawLeft = 0;
 		this.rawAbsoluteLeft = NaN;
-		this.measuredLeft = NaN;
+		this.measuredWidth = NaN;
+		this.measured = null;
 		this.lostChild = false;
 		this.currentStyle = createStyle();
 		this.result = createResult();
@@ -1188,13 +1199,14 @@ function layoutMeasuredContent(
 		return;
 	}
 
-	node.measuredLeft = node.rawAbsoluteLeft;
 	const measured = node.measure!(
 		innerWidth,
 		widthSpace,
 		placing,
-		node.rawAbsoluteLeft + node.style.border.left + node.result.padding.left,
+		getContentLeft(node),
 	);
+	node.measuredWidth = innerWidth;
+	node.measured = measured;
 
 	const width = widthSpace === "definite"
 		? availableWidth - marginRow
@@ -6212,11 +6224,7 @@ function roundToGrid(
 		node.rawLeft = nodeLeft;
 	}
 	node.rawAbsoluteLeft = rawAbsoluteLeft + node.rawLeft;
-	if (
-		node.measure !== null &&
-		node.measuresText &&
-		!isSameFraction(node.measuredLeft, node.rawAbsoluteLeft)
-	) {
+	if (node.measure !== null && breaksElsewhere(node)) {
 		misplaced.push(node);
 	}
 	const nodeTop = node.result.top;
@@ -6259,14 +6267,23 @@ function roundToGrid(
 	}
 }
 
-// Whether two edges fall at the same place within a cell, which is all
-// that decides how many columns a width starting there is drawn across.
-// An edge not yet known breaks as one at a whole cell.
-function isSameFraction(a: number, b: number): boolean {
-	const fraction = (value: number) =>
-		Number.isNaN(value) ? 0 : value - Math.floor(value);
-	const difference = Math.abs(fraction(a) - fraction(b));
-	return difference < 0.0001 || difference > 0.9999;
+function getContentLeft(node: LayoutNode): number {
+	return node.rawAbsoluteLeft +
+		node.style.border.left +
+		node.result.padding.left;
+}
+
+// Whether text measured before its box landed where it did would break
+// into other lines there: its lines no longer fit the columns it is drawn
+// across, or it wrapped and may fit more of them.
+function breaksElsewhere(node: LayoutNode): boolean {
+	const measured = node.measured;
+	if (measured === null || measured.columns === undefined) {
+		return false;
+	}
+	const columns = getDrawnColumns(getContentLeft(node), node.measuredWidth);
+	return columns !== measured.columns &&
+		(measured.wrapped === true || measured.lineColumns! > columns);
 }
 
 /**

From 16bfb059966784619491cd79f84b2988bdea87fe Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:45:22 -0400
Subject: [PATCH 54/99] Make a client rect in one DOMRect, and find fixed space
 from the boxes

A rect went through two DOMRects on its way out, read back through
their accessors, and asked every ancestor's computed position whether
it was fixed. The values are now converted once into the rect returned,
and fixed space is read from the boxes' position types, falling back to
the elements only past an inline-block's own boxes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts    | 21 +++++++++++----------
 src/internal/layout.ts | 24 +++++++++++++++++++++---
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index cf22dbb1..7016cdb3 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -11298,17 +11298,18 @@ function toViewportRect(
 	element: Element | null,
 ): globalThis.DOMRect {
 	const attachedSlots = _(attached);
+	const {x, y, width, height} = _(rect as unknown as DOMRect).rectValues;
 	const scrolled =
-		element !== null &&
-		attachedSlots.extra.layout.isInFixedSpace(element)
-			? rect
-			: new DOMRect(
-				rect.x,
-				rect.y - attachedSlots.extra.framebuffer.scrollTop,
-				rect.width,
-				rect.height,
-			);
-	return toPixelRect(attached as unknown as Node, scrolled);
+		element !== null && attachedSlots.extra.layout.isInFixedSpace(element)
+			? 0
+			: attachedSlots.extra.framebuffer.scrollTop;
+	const cell = getCellSize(attached as unknown as globalThis.Node);
+	return new DOMRect(
+		x * cell.width,
+		(y - scrolled) * cell.height,
+		width * cell.width,
+		height * cell.height,
+	);
 }
 
 // Cells to the CSS pixels every geometry API reports in.
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 26cb0476..83cc3bd2 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6255,10 +6255,28 @@ export class Layout {
 
 	// A chain reaching a fixed box puts the geometry in viewport space
 	// rather than document space.
+	// Read from the boxes, whose position type is a field, rather than
+	// from every ancestor's computed style. A box laid out in an
+	// inline-block's own context has no parent past it, and the elements
+	// answer from there.
 	isInFixedSpace(element: Element): boolean {
-		for (
-			let el: Element | null = element; el; el = flatParentElement(el)
-		) {
+		let box: Element | null = element;
+		while (box !== null && !this.nodeMap.has(box)) {
+			box = flatParentElement(box);
+		}
+		let node = box === null ? undefined : this.nodeMap.get(box);
+		for (; node !== undefined; node = node.parent ?? undefined) {
+			if (node.style.positionType === "fixed") {
+				return true;
+			}
+			if (node.parent === null && node !== this.initialBlock) {
+				break;
+			}
+		}
+		if (node === undefined) {
+			return false;
+		}
+		for (let el: Element | null = element; el; el = flatParentElement(el)) {
 			if (getPosition(el) === "fixed") {
 				return true;
 			}

From 78aa4316e6acb51c765146439412a22be3039e5c Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:46:36 -0400
Subject: [PATCH 55/99] Wrap a line the linter found too long

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/dom.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 7016cdb3..873ea9ba 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -11300,7 +11300,8 @@ function toViewportRect(
 	const attachedSlots = _(attached);
 	const {x, y, width, height} = _(rect as unknown as DOMRect).rectValues;
 	const scrolled =
-		element !== null && attachedSlots.extra.layout.isInFixedSpace(element)
+		element !== null &&
+		attachedSlots.extra.layout.isInFixedSpace(element)
 			? 0
 			: attachedSlots.extra.framebuffer.scrollTop;
 	const cell = getCellSize(attached as unknown as globalThis.Node);

From 62e994869a39b2ec762835341b8dde1b9b270402 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Wed, 14 Oct 2026 23:50:00 -0400
Subject: [PATCH 56/99] Join borders and diff only the rows a partial frame
 changed

The rows a frame left alone are the last frame's, so they keep its
joined borders and need no comparing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/framebuffer.ts | 50 +++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/internal/framebuffer.ts b/src/internal/framebuffer.ts
index 9e68bca2..12ccd3ad 100644
--- a/src/internal/framebuffer.ts
+++ b/src/internal/framebuffer.ts
@@ -978,10 +978,22 @@ export function readCell(
 }
 
 // Returns the borders as painted, before joining, which a frame painted
-// over this one starts from.
-function joinTouchingBorders(grid: CellGrid): Uint32Array {
+// over this one starts from. Given the rows a frame repainted and the
+// borders the last frame joined, only those rows and their neighbours
+// join again, and the rest keep what the last frame joined.
+function joinTouchingBorders(
+	grid: CellGrid,
+	ranges: Array<[number, number]> = [[0, grid.rows]],
+	joinedBefore: Uint32Array | null = null,
+): Uint32Array {
 	const {rows, cols, border} = grid;
 	const painted = border.slice();
+	if (joinedBefore !== null) {
+		border.set(joinedBefore);
+		for (const [from, to] of ranges) {
+			border.set(painted.subarray(from * cols, to * cols), from * cols);
+		}
+	}
 	// Which neighbour to look at for each edge of a cell, and which of that
 	// neighbour's edges would run into this one.
 	const REACHES: Array<{mask: number; step: number; from: number}> = [
@@ -991,7 +1003,14 @@ function joinTouchingBorders(grid: CellGrid): Uint32Array {
 		{mask: BORDER_MASK.Right, step: 1, from: BORDER_MASK.Left},
 	];
 
-	for (let row = 0; row < rows; row++) {
+	for (const [from, to] of ranges) {
+		for (let row = from; row < to; row++) {
+			joinRow(row);
+		}
+	}
+	return painted;
+
+	function joinRow(row: number): void {
 		for (let col = 0; col < cols; col++) {
 			const index = row * cols + col;
 			const own = painted[index];
@@ -1026,7 +1045,6 @@ function joinTouchingBorders(grid: CellGrid): Uint32Array {
 			border[index] = joined;
 		}
 	}
-	return painted;
 }
 
 function getGridLine(grid: CellGrid, row: number, writer: FrameWriter): string {
@@ -2463,7 +2481,26 @@ export function beginFrame(
 		// The frame is complete. Join the borders whose strokes touch, so
 		// the diff below sees a junction appear even when only its
 		// neighbour changed.
-		const painted = joinTouchingBorders(next);
+		// A frame painted over the last one changed only its bands, and the
+		// rows beside them where borders join.
+		const changedRows = partial
+			? context.bands.map(([top, end]): [number, number] => [
+				Math.max(0, top - 1),
+				Math.min(frameRows, end + 1),
+			])
+			: undefined;
+		const painted = joinTouchingBorders(
+			next,
+			changedRows,
+			partial ? framebuffer.prev!.border : null,
+		);
+		let unchangedRows: Uint8Array | null = null;
+		if (changedRows !== undefined) {
+			unchangedRows = new Uint8Array(frameRows).fill(1);
+			for (const [from, to] of changedRows) {
+				unchangedRows.fill(0, from, to);
+			}
+		}
 
 		// Build the diff. A frame taller than the terminal is a growth
 		// frame. The rows below the fold have never been on screen, so
@@ -2488,6 +2525,9 @@ export function beginFrame(
 			const aligned = prevCols === cols;
 
 			for (let row = 0; row < framebuffer.rowCount; row++) {
+				if (unchangedRows !== null && unchangedRows[row] === 1) {
+					continue;
+				}
 				const nextRow = row * cols;
 				const prevRow = row * prevCols;
 				const rowInPrev = row < prevRows;

From 65d696a9818d8f1b0e9d906e060154056be909a4 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 00:09:09 -0400
Subject: [PATCH 57/99] Keep the root's margins in, repaint rows for paint-only
 restyles, and test partial repaints

The initial block became a block, and the root element's top margin
escaped it to nothing. It is a formatting context of its own now.

A class or state change that only repaints, and a transition frame,
asked for a whole repaint though each restyled element names its rows.
A list attribute that renumbers markers, and a counter change that
renumbers what follows, still repaint whole.

tests/partial-repaint.test.ts makes one change after a first frame and
holds the frame to the partial-frame check and to the terminal's own
screen against a repaint from scratch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts           |  25 ++-
 src/internal/layout.ts          |  17 +-
 src/internal/painter.ts         |  24 ++-
 tests/margin-collapsing.test.ts |  14 ++
 tests/partial-repaint.test.ts   | 342 ++++++++++++++++++++++++++++++++
 5 files changed, 408 insertions(+), 14 deletions(-)
 create mode 100644 tests/partial-repaint.test.ts

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 3f7dab72..dd80f464 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6576,6 +6576,14 @@ export function handleMutations(
 			) {
 				continue;
 			}
+			// A list's numbering reads these, and renumbers markers that
+			// belong to other elements than the one changed.
+			if (
+				LIST_NUMBERING_ATTRIBUTES.has(mutation.attributeName!) &&
+				(localNameOf(element) === "ol" || localNameOf(element) === "li")
+			) {
+				cascade.layout.invalidateFrame();
+			}
 			// A change to keys whose rules declare only paint properties
 			// leaves every box where it was. The styles are dropped so the
 			// next read resolves them, and layout is not told.
@@ -6627,8 +6635,9 @@ export function handleMutations(
 				invalidateElementCaches(cascade, element, notifyLayout);
 				attachPseudoElementsToElement(cascade, element);
 			}
+			// Each element restyled names its rows for the frame.
 			if (!notifyLayout) {
-				cascade.layout.invalidateFrame();
+				cascade.layout.invalidateFrame(false);
 			}
 			// `.on ~ .light` matches a FOLLOWING sibling whose cached
 			// styles know nothing of this change.
@@ -6730,8 +6739,9 @@ export function handleStateChange(
 	}
 	invalidateForState(cascade, element, states);
 	// No mutation record describes the change, so the frame that decides
-	// whether anything needs painting is notified here.
-	cascade.layout.invalidateFrame();
+	// whether anything needs painting is notified here. The elements
+	// restyled name their rows.
+	cascade.layout.invalidateFrame(false);
 }
 
 // The same staleness a focus move leaves, scoped to the symmetric
@@ -8213,7 +8223,7 @@ function tickTransitions(cascade: Cascade): void {
 		}
 		invalidateElementCaches(cascade, element);
 	}
-	cascade.layout.invalidateFrame();
+	cascade.layout.invalidateFrame(false);
 	flushTransitionEvents(cascade);
 	// A window no engine set up has no requestAnimationFrame, and its reads
 	// interpolate on their own.
@@ -8525,6 +8535,13 @@ function invalidateElementCaches(
 	cascade.counterScopes.delete(element);
 }
 
+const LIST_NUMBERING_ATTRIBUTES = new Set([
+	"start",
+	"value",
+	"reversed",
+	"type",
+]);
+
 // Properties the painter reads and layout never does. A rule declaring
 // only these moves nothing when it starts or stops matching.
 const PAINT_ONLY_PROPERTIES = new Set([
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 83cc3bd2..c78d6a1b 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -5434,8 +5434,12 @@ export class Layout {
 		this.touched = new Set<Node>();
 		this.measureNodes = new Set<LayoutNode>();
 
+		// The initial containing block is a formatting context of its own, so
+		// the root element's margins stay inside it rather than escaping to
+		// nothing.
 		const root = new LayoutNode();
 		root.style.displayType = "block";
+		root.style.blockFormattingContext = true;
 		root.style.width = toValue(width);
 		root.style.height = toValue(height);
 		this.initialBlock = root;
@@ -6502,7 +6506,7 @@ function getSelectionRows(layout: Layout): [number, number] | null {
 export function takeDamageBands(
 	layout: Layout,
 	offset: number,
-	paintsAsBefore: (element: Element, key: object) => boolean,
+	paintsAsBefore: (element: Element, key: object) => boolean | "whole",
 ): Array<[number, number]> | undefined {
 	const selectionRows = getSelectionRows(layout);
 	const previousSelection = layout.selectionRows;
@@ -6518,9 +6522,14 @@ export function takeDamageBands(
 		add(top, bottom, fixed);
 	}
 	for (const [element, key] of layout.restyledForPaint) {
-		if (
-			!element.isConnected || (key !== null && paintsAsBefore(element, key))
-		) {
+		if (!element.isConnected) {
+			continue;
+		}
+		const same = key === null ? false : paintsAsBefore(element, key);
+		if (same === "whole") {
+			return undefined;
+		}
+		if (same) {
 			continue;
 		}
 		let box: Element | null = element;
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index aa90f82c..1c478edb 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -206,6 +206,9 @@ interface PaintStyle {
 	// What else the painter reads from the element's style, so two paint
 	// styles that match paint alike.
 	others: string;
+	// The counters the element sets, which number markers and content
+	// after it, not its own cells.
+	counters: string;
 }
 
 interface BorderPaint {
@@ -236,19 +239,23 @@ const PAINTED_ELSEWHERE = [
 /**
  * Whether the element paints as it did under the style key it had, so a
  * restyle that changed nothing it draws repaints no rows. False when the
- * old style was never painted to compare.
+ * old style was never painted to compare, and "whole" when its counters
+ * changed, which renumber what comes after it.
  */
 export function paintsAsBefore(
 	painter: Painter,
 	element: Element,
 	key: object,
-): boolean {
+): boolean | "whole" {
 	const before = paintStyles.get(key);
 	if (before === undefined || painter.cascade.getStyleKey(element) === null) {
 		return false;
 	}
-	return JSON.stringify(before) ===
-		JSON.stringify(getPaintStyle(painter, element));
+	const after = getPaintStyle(painter, element);
+	if (before.counters !== after.counters) {
+		return "whole";
+	}
+	return JSON.stringify(before) === JSON.stringify(after);
 }
 
 function readPaintStyle(element: Element): PaintStyle {
@@ -363,6 +370,9 @@ function readPaintStyle(element: Element): PaintStyle {
 		others: PAINTED_ELSEWHERE.map((property) =>
 			getComputedValue(element, property),
 		).join("\0"),
+		counters: ["counter-reset", "counter-increment", "counter-set"]
+			.map((property) => getComputedValue(element, property))
+			.join("\0"),
 		// Whole cells, as layout rounds the content edge.
 		contentInsetX: Math.round(model.paddingLeft + model.borderLeftWidth),
 		contentInsetY: Math.round(model.paddingTop + model.borderTopWidth),
@@ -638,15 +648,17 @@ export function paint(painter: Painter, ctx: CellContext): void {
 
 /**
  * Checks a frame that repainted only some rows against one painted
- * whole, for tests. Set, a frame that differs throws, naming the cells.
+ * whole, for tests. Set, a frame that differs throws, naming the cells,
+ * and checked counts the frames compared.
  */
-export const partialFrameCheck = {enabled: false};
+export const partialFrameCheck = {enabled: false, checked: 0};
 
 export function checkPartialFrame(
 	painter: Painter,
 	ctx: CellContext,
 	previousCaret: {col: number; row: number} | null,
 ): void {
+	partialFrameCheck.checked++;
 	const whole = new CellContext(
 		new CellGrid(ctx.rows, ctx.cols),
 		ctx.rows,
diff --git a/tests/margin-collapsing.test.ts b/tests/margin-collapsing.test.ts
index 708e5ac7..d7c4832a 100644
--- a/tests/margin-collapsing.test.ts
+++ b/tests/margin-collapsing.test.ts
@@ -251,3 +251,17 @@ test("a trailing self-collapsing child pushes the gap outside its parent", async
 	expect(after.top - wrap.bottom).toBe(2);
 	dom.dispose();
 });
+
+// The root element's margins collapse with nothing (css2 §8.3.1): not its
+// children's, and not out of the initial containing block, which has
+// nowhere to put them.
+test("the root element's margins stay its own", async () => {
+	const {dom} = await layout(
+		"<p id=\"p\" style=\"margin: 0\">x</p>",
+		"<style>html { margin-top: 2px } body { margin: 3px 0 0 }</style>",
+	);
+	const html = getRect(dom, dom.document.documentElement);
+	const p = getRect(dom, dom.document.getElementById("p")!);
+	expect([html.top, p.top]).toEqual([2, 5]);
+	dom.dispose();
+});
diff --git a/tests/partial-repaint.test.ts b/tests/partial-repaint.test.ts
new file mode 100644
index 00000000..9ad8440d
--- /dev/null
+++ b/tests/partial-repaint.test.ts
@@ -0,0 +1,342 @@
+/**
+ * A frame repaints only the rows that changed, and every way a page can
+ * change has to name its rows. Each test makes one change after a first
+ * frame and holds the result to two oracles: the partial-frame check,
+ * which paints the frame whole beside it, and the terminal itself, whose
+ * screen must not change when the page is then repainted from scratch.
+ * The tests also count the frames the check compared, so a change that
+ * repaints whole cannot pass for one that repaints rows.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {invalidate, repaintAll} from "../src/internal/framebuffer.ts";
+import {partialFrameCheck} from "../src/internal/painter.ts";
+import {_} from "../src/internal/slots.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+async function repaint(
+	html: string,
+	change: (document: any, window: any) => void | Promise<void>,
+	{head = "", cols = 40, rows = 12} = {},
+): Promise<{partial: number; terminal: MockProcess; dom: TermDOM}> {
+	const terminal = new MockProcess({cols, rows});
+	const dom = new TermDOM({transport: terminal.transport});
+	if (head) {
+		dom.document.head.innerHTML = head;
+	}
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	await nextFrame(dom);
+	const before = partialFrameCheck.checked;
+	await change(dom.document, dom.window);
+	await nextFrame(dom);
+	const partial = partialFrameCheck.checked - before;
+
+	const shown = terminal.getScreenContents();
+	const slots = _(dom as any) as any;
+	repaintAll(slots.framebuffer);
+	invalidate(slots.framebuffer);
+	await nextFrame(dom);
+	expect(shown).toBe(terminal.getScreenContents());
+	return {partial, terminal, dom};
+}
+
+const lines = (count: number, prefix = "line") =>
+	Array.from({length: count}, (_, i) => `<p>${prefix} ${i}</p>`).join("");
+
+test("a z-index swap repaints the boxes it reorders", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) +
+			"<div id=a style=\"position: absolute; top: 5px; left: 2px; " +
+			"z-index: 1; background: red\">aaaa</div>" +
+			"<div id=b style=\"position: absolute; top: 5px; left: 4px; " +
+			"z-index: 2; background: blue\">bbbb</div>",
+		(document) => {
+			document.getElementById("a").style.zIndex = "3";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("visibility hides a word in place", async () => {
+	const {partial, dom} = await repaint(
+		lines(4) + "<p>keep <span id=s>this</span> word</p>",
+		(document) => {
+			document.getElementById("s").style.visibility = "hidden";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an outline drawn outside its box repaints the rows it reaches", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<div id=d style=\"margin: 2px 4px\">boxed</div>" + lines(3),
+		(document) => {
+			const d = document.getElementById("d");
+			d.style.outline = "1px solid";
+			d.style.outlineOffset = "1px";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an inherited color reaches every descendant's rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<div id=d><p>one <b>two</b></p><p>three</p></div>",
+		(document) => {
+			document.getElementById("d").style.color = "rgb(0, 128, 0)";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a custom property on the root recolors text deep below it", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<div><p><span class=c>deep</span></p></div>",
+		(document) => {
+			document.documentElement.style.setProperty("--c", "rgb(255, 0, 0)");
+		},
+		{
+			head: "<style>:root { --c: rgb(0, 0, 255) } .c { color: var(--c) }</style>",
+		},
+	);
+	dom.dispose();
+});
+
+test("an ordered list renumbers below an item taken out", async () => {
+	const {dom} = await repaint(
+		"<ol>" +
+		Array.from({length: 5}, (_, i) => `<li id=i${i}>item</li>`).join("") +
+		"</ol>",
+		(document) => {
+			document.getElementById("i1").remove();
+		},
+	);
+	dom.dispose();
+});
+
+test("an ordered list renumbers when its start changes", async () => {
+	const {dom} = await repaint(
+		"<ol id=o><li>a</li><li>b</li><li>c</li></ol>",
+		(document) => {
+			document.getElementById("o").setAttribute("start", "7");
+		},
+	);
+	dom.dispose();
+});
+
+test("generated content follows the attribute it reads", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p data-n=\"1\">count</p>",
+		(document) => {
+			document.getElementById("p").setAttribute("data-n", "2");
+		},
+		{head: "<style>#p::before { content: attr(data-n) \" \" }</style>"},
+	);
+	dom.dispose();
+});
+
+test("text edited to the same length repaints its row", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<p id=p>abcdef</p>" + lines(3),
+		(document) => {
+			document.getElementById("p").firstChild.data = "uvwxyz";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an input's value set by property repaints the field", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<input id=i value=old>",
+		(document) => {
+			document.getElementById("i").value = "new value";
+		},
+	);
+	dom.dispose();
+});
+
+test("the last child leaving a box of fixed height clears its rows", async () => {
+	const {partial, dom} = await repaint(
+		"<div style=\"height: 6px\"><p>first</p><p id=last>last</p></div>" +
+			lines(2),
+		(document) => {
+			document.getElementById("last").remove();
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a plain box hidden with display: none clears its text", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<div id=d><p>gone</p><p>soon</p></div>" + lines(2),
+		(document) => {
+			document.getElementById("d").style.display = "none";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a border removed beside another unjoins their corners", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) +
+			"<div style=\"display: flex\"><div id=a style=\"border: 1px solid\">" +
+			"a</div><div style=\"border: 1px solid\">b</div></div>" +
+		lines(2),
+		(document) => {
+			document.getElementById("a").style.border = "none";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a selection made from script highlights, then collapses", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p>select these words</p>" + lines(2),
+		async (document, window) => {
+			const range = document.createRange();
+			range.setStart(document.getElementById("p").firstChild, 7);
+			range.setEnd(document.getElementById("p").firstChild, 12);
+			window.getSelection().addRange(range);
+		},
+	);
+	dom.dispose();
+});
+
+test("a highlight registered and removed repaints its text", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<p id=p>highlight me</p>",
+		(document, window) => {
+			const range = document.createRange();
+			range.selectNodeContents(document.getElementById("p"));
+			window.CSS.highlights.set("mark", new window.Highlight(range));
+		},
+		{head: "<style>::highlight(mark) { background-color: yellow }</style>"},
+	);
+	dom.dispose();
+});
+
+test("a canvas drawn on repaints its cells", async () => {
+	const {dom} = await repaint(
+		lines(2) + "<canvas id=c width=80 height=48></canvas>",
+		(document) => {
+			const ctx = document.getElementById("c").getContext("2d");
+			ctx.fillStyle = "red";
+			ctx.fillRect(0, 0, 40, 24);
+		},
+	);
+	dom.dispose();
+});
+
+test("a table cell's background repaints the cell", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<table><tr><td id=c>a</td><td>b</td></tr></table>",
+		(document) => {
+			document.getElementById("c").style.background = "blue";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("an inline-block's text changes inside its line", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) +
+		"<p>before <span id=s style=\"display: inline-block; " +
+			"border: 1px solid\">box</span> after</p>",
+		(document) => {
+			document.getElementById("s").firstChild.data = "bix";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("text-align moves a block's lines without moving the block", async () => {
+	const {partial, dom} = await repaint(
+		lines(2) + "<p id=p>centered later</p>" + lines(2),
+		(document) => {
+			document.getElementById("p").style.textAlign = "center";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a class that bolds a word repaints its row", async () => {
+	const {partial, dom} = await repaint(
+		lines(3) + "<p>one <span id=s>two</span> three</p>",
+		(document) => {
+			document.getElementById("s").className = "b";
+		},
+		{head: "<style>.b { font-weight: bold }</style>"},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a fixed bar changes while the document is scrolled", async () => {
+	const {dom} = await repaint(
+		"<div id=bar style=\"position: fixed; top: 0; left: 0; " +
+			"background: navy\">bar one</div>" +
+		lines(40),
+		async (document, window) => {
+			window.scrollTo(0, 10);
+			await nextFrame({window, document});
+			document.getElementById("bar").firstChild.data = "bar two";
+		},
+	);
+	dom.dispose();
+});
+
+test("a sticky header in a scrolled box keeps its place", async () => {
+	const {dom} = await repaint(
+		"<div id=s style=\"height: 6px; overflow: auto\">" +
+			"<div style=\"position: sticky; top: 0; background: navy\">head</div>" +
+			lines(20) +
+		"</div>",
+		(document) => {
+			document.getElementById("s").scrollTop = 4;
+		},
+	);
+	dom.dispose();
+});
+
+test("a transition repaints each of its frames", async () => {
+	const {dom} = await repaint(
+		lines(2) +
+		"<p id=p style=\"transition: color 50ms linear; " +
+			"color: rgb(0, 0, 0)\">fading</p>",
+		async (document, window) => {
+			document.getElementById("p").style.color = "rgb(255, 255, 255)";
+			for (let i = 0; i < 4; i++) {
+				await nextFrame({window, document});
+			}
+		},
+	);
+	dom.dispose();
+});
+
+test("a counter set on one element renumbers the ones after it", async () => {
+	const {dom} = await repaint(
+		"<div id=a class=n>a</div><div class=n>b</div><div class=n>c</div>",
+		(document) => {
+			document.getElementById("a").style.counterIncrement = "n 5";
+		},
+		{
+			head:
+				"<style>body { counter-reset: n } .n { counter-increment: n } " +
+				".n::before { content: counter(n) \" \" }</style>",
+		},
+	);
+	dom.dispose();
+});

From 3b74a765b1590ded3693bd7da6de2e54ea890b19 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 00:10:50 -0400
Subject: [PATCH 58/99] Declare the list numbering attributes before their use

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index dd80f464..5d1f31bb 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6444,6 +6444,13 @@ export class Cascade {
 	}
 }
 
+const LIST_NUMBERING_ATTRIBUTES = new Set([
+	"start",
+	"value",
+	"reversed",
+	"type",
+]);
+
 export function handleMutations(
 	cascade: Cascade,
 	mutations: MutationRecord[],
@@ -8535,13 +8542,6 @@ function invalidateElementCaches(
 	cascade.counterScopes.delete(element);
 }
 
-const LIST_NUMBERING_ATTRIBUTES = new Set([
-	"start",
-	"value",
-	"reversed",
-	"type",
-]);
-
 // Properties the painter reads and layout never does. A rule declaring
 // only these moves nothing when it starts or stops matching.
 const PAINT_ONLY_PROPERTIES = new Set([

From 3324db10fda0c9ef0a8d62020ddd04d0a8f4b9ca Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 00:36:33 -0400
Subject: [PATCH 59/99] Round the grid from layout's own values, renumber
 counters a change moves, and fuzz against fresh renders

roundToGrid rounded in place, so a box not laid out again held rounded
values, and rounding those from another fraction of a cell, after
something above it moved by one, was not rounding the true ones: a grid
cell came out a row taller than the same page drawn fresh. The solver
now keeps each box's place and size as layout wrote them and rounds
from those.

A counter an element changes renumbers the generated content of others,
which nothing restyled. The cascade notes the elements whose content
reads a counter, and a change to what an element counts, or a removed
counting element, restyles them.

tests/incremental.test.ts applies seeded random changes to a page of
flex, grid, tables, lists, counters, borders and inline-blocks, and
after each compares every rect and the screen with a fresh render of a
copy of the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts        |  84 ++++++++++++++
 src/internal/layoutsolver.ts |  85 +++++++++-----
 tests/incremental.test.ts    | 219 +++++++++++++++++++++++++++++++++++
 tests/style-caches.test.ts   |  20 ++++
 4 files changed, 377 insertions(+), 31 deletions(-)
 create mode 100644 tests/incremental.test.ts

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 5d1f31bb..4b915de4 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6200,6 +6200,13 @@ export class Cascade {
 	pseudoRulesByType: Map<string, ParsedCSSRule[]>;
 	counterRulesExist: boolean;
 	listItemRulesExist: boolean;
+	// The elements whose generated content reads a counter, and the
+	// counters each element declared when its scope was built. A counter
+	// one element changes renumbers the content of others, which nothing
+	// restyles, so a change sets countersStale and those elements restyle.
+	counterUsers: Set<Element>;
+	counterDeclarations: WeakMap<Element, string>;
+	countersStale: boolean;
 
 	// Whether any rule is scoped, which is what adds proximity to the sort.
 	scopedRulesExist: boolean;
@@ -6318,6 +6325,9 @@ export class Cascade {
 		this.pseudoRulesByType = new Map<string, ParsedCSSRule[]>();
 		this.counterRulesExist = false;
 		this.listItemRulesExist = false;
+		this.counterUsers = new Set();
+		this.counterDeclarations = new WeakMap();
+		this.countersStale = false;
 		this.scopedRulesExist = false;
 		this.hasRulesExist = false;
 		this.hasAnchors = new Set();
@@ -6561,6 +6571,9 @@ export function handleMutations(
 						shouldSyncStylesheets = true;
 					}
 					removedElements = true;
+					if (cascade.counterUsers.size > 0 && !cascade.countersStale) {
+						cascade.countersStale = declaresCounters(cascade, element);
+					}
 				}
 			}
 			// A child that came or went changes what `li + li`,
@@ -6701,6 +6714,7 @@ export function handleMutations(
 		}
 		releaseRemovedNodes(cascade.document);
 	}
+	refreshCounters(cascade);
 	if (shouldSyncStylesheets) {
 		cascade.syncStylesheets();
 	}
@@ -6745,6 +6759,7 @@ export function handleStateChange(
 		return;
 	}
 	invalidateForState(cascade, element, states);
+	refreshCounters(cascade);
 	// No mutation record describes the change, so the frame that decides
 	// whether anything needs painting is notified here. The elements
 	// restyled name their rows.
@@ -7155,6 +7170,7 @@ function resolveCounterFunction(
 	return content.replace(
 		/counter\s*\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/g,
 		(_match, counterName, style) => {
+			cascade.counterUsers.add(element);
 			const trimmedName = counterName.trim();
 			const trimmedStyle = style?.trim() || "decimal";
 			return CSSValues.formatCounterValue(
@@ -7633,6 +7649,68 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 
 // The parent's scope is read, never built. Building it recursively up a
 // deep tree is what this avoids.
+function getCounterDeclaration(
+	reset: string | null | undefined,
+	increment: string | null | undefined,
+): string {
+	return `${reset || "none"}|${increment || "none"}`;
+}
+
+// Whether an element restyled now declares other counters than its scope
+// was built from. Asked only of a document whose generated content reads
+// a counter, since answering resolves the element's new style.
+function noteCounterChange(cascade: Cascade, element: Element): void {
+	if (cascade.counterUsers.size === 0 || cascade.countersStale) {
+		return;
+	}
+	const before =
+		cascade.counterDeclarations.get(element) ??
+		getCounterDeclaration(null, null);
+	const slots = _(cascade.declarationFor(element));
+	const after = getCounterDeclaration(
+		slots._computedValue("counter-reset"),
+		slots._computedValue("counter-increment"),
+	);
+	if (before !== after) {
+		cascade.countersStale = true;
+	}
+}
+
+// Whether a removed subtree declared a counter, which renumbers what
+// came after it.
+function declaresCounters(cascade: Cascade, root: Element): boolean {
+	const none = getCounterDeclaration(null, null);
+	for (
+		let element: Element | null = root;
+		element !== null;
+		element = nextElementUnder(element, root)
+	) {
+		const declared = cascade.counterDeclarations.get(element);
+		if (declared !== undefined && declared !== none) {
+			return true;
+		}
+	}
+	return false;
+}
+
+// Every counter is counted again, and the content that reads one is made
+// again from the new counts.
+function refreshCounters(cascade: Cascade): void {
+	if (!cascade.countersStale) {
+		return;
+	}
+	cascade.countersStale = false;
+	cascade.counterScopes = new WeakMap();
+	const users = [...cascade.counterUsers];
+	cascade.counterUsers.clear();
+	for (const element of users) {
+		if (element.isConnected) {
+			invalidateElementCaches(cascade, element);
+			attachPseudoElementsToElement(cascade, element);
+		}
+	}
+}
+
 // Built on first read, not on invalidation: a counter's value depends
 // on the element's ancestors, and for a list item on the items before
 // it, so the parent is built first and a dropped scope comes back when
@@ -7679,6 +7757,10 @@ function initializeCounters(cascade: Cascade, element: Element): void {
 		parent: parentScope,
 	};
 	cascade.counterScopes.set(element, scope);
+	cascade.counterDeclarations.set(
+		element,
+		getCounterDeclaration(counterReset, counterIncrement),
+	);
 
 	if (counterReset && counterReset !== "none") {
 		CSSValues.parseCounterReset(scope, counterReset);
@@ -8230,6 +8312,7 @@ function tickTransitions(cascade: Cascade): void {
 		}
 		invalidateElementCaches(cascade, element);
 	}
+	refreshCounters(cascade);
 	cascade.layout.invalidateFrame(false);
 	flushTransitionEvents(cascade);
 	// A window no engine set up has no requestAnimationFrame, and its reads
@@ -8540,6 +8623,7 @@ function invalidateElementCaches(
 	}
 	cascade.pseudoElementStyleCache.delete(element);
 	cascade.counterScopes.delete(element);
+	noteCounterChange(cascade, element);
 }
 
 // Properties the painter reads and layout never does. A rule declaring
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 40ddad42..cceb735c 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -505,11 +505,26 @@ export class LayoutNode {
 	gridTop: number;
 	// Whether the last roundToGrid left the children as they were.
 	settled: boolean;
-	// The box's left edge as its parent last placed it, and that edge
-	// summed down from the root, both unrounded. The text in a box breaks
-	// against the columns these say it is drawn across.
+	// The box's place and size as layout last wrote them, before
+	// roundToGrid rounded them in result. A box not laid out again keeps
+	// rounded values in result, and rounding those again from another
+	// fraction of a cell is not rounding the true ones, so the grid is
+	// always rounded from these. rawAbsoluteLeft sums the left edges down
+	// from the root, and the text in a box breaks against the columns it
+	// says the box is drawn across.
 	rawLeft: number;
+	rawTop: number;
+	rawWidth: number;
+	rawHeight: number;
 	rawAbsoluteLeft: number;
+	// Whether result holds values layout wrote since the last rounding: a
+	// size, once layoutNode has answered for the box, and the children's
+	// places, once the box has laid them out. An ancestor that lays a box
+	// out past its parent, as a containing block does an absolute box,
+	// places it directly.
+	sized: boolean;
+	childrenPlaced: boolean;
+	placedDirectly: boolean;
 	// What the last measure broke the box's text to: the width it was
 	// given, and the Size fields that say whether another edge would break
 	// it differently.
@@ -536,7 +551,13 @@ export class LayoutNode {
 		this.gridTop = NaN;
 		this.settled = false;
 		this.rawLeft = 0;
+		this.rawTop = 0;
+		this.rawWidth = 0;
+		this.rawHeight = 0;
 		this.rawAbsoluteLeft = NaN;
+		this.sized = false;
+		this.childrenPlaced = false;
+		this.placedDirectly = false;
 		this.measuredWidth = NaN;
 		this.measured = null;
 		this.lostChild = false;
@@ -639,7 +660,7 @@ export class LayoutNode {
 		// landed. A box placed at a whole cell, as most are, never does.
 		for (let pass = 0; pass < 3; pass++) {
 			const misplaced: LayoutNode[] = [];
-			roundToGrid(this, 0, 0, 0, true, misplaced);
+			roundToGrid(this, 0, 0, true, misplaced);
 			if (misplaced.length === 0 || pass === 2) {
 				break;
 			}
@@ -2394,6 +2415,7 @@ function layoutAbsoluteChild(
 	area: {left: number; top: number; width: number; height: number} |
 		null = null,
 ): void {
+	child.placedDirectly = true;
 	const parentWidth = node.result.width;
 	const parentHeight = node.result.height;
 
@@ -3446,6 +3468,8 @@ function layoutTable(
 
 	for (const group of groups) {
 		group.gridLeft = NaN;
+		group.sized = true;
+		group.childrenPlaced = true;
 		group.result.left = leftPaddingBorder;
 		group.result.width = contentWidth;
 		group.result.top = gridTop;
@@ -3461,6 +3485,8 @@ function layoutTable(
 			return;
 		}
 		row.node.gridLeft = NaN;
+		row.node.sized = true;
+		row.node.childrenPlaced = true;
 		row.node.result.left = rowLeft(row);
 		row.node.result.top = rowTop(row, index);
 		row.node.result.width = contentWidth;
@@ -5876,6 +5902,7 @@ function layoutNode(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
+	node.sized = true;
 	// A container may lay out a descendant without laying out the boxes
 	// between, as a table does its cells, so every box above it rounds again.
 	for (
@@ -6065,6 +6092,7 @@ function layoutNodeImpl(
 	placing: boolean,
 ): void {
 	node.gridLeft = NaN;
+	node.childrenPlaced = true;
 	node.result.padding.left = getPadding(node, "left", ownerWidth);
 	node.result.padding.top = getPadding(node, "top", ownerWidth);
 	node.result.padding.right = getPadding(node, "right", ownerWidth);
@@ -6213,42 +6241,44 @@ function getPadding(node: LayoutNode, edge: Edge, ownerWidth: number): number {
 // keeps the children it rounded before.
 function roundToGrid(
 	node: LayoutNode,
-	absoluteLeft: number,
-	absoluteTop: number,
-	rawAbsoluteLeft: number,
+	rawParentLeft: number,
+	rawParentTop: number,
 	placedByParent: boolean,
 	misplaced: LayoutNode[],
 ): void {
-	const nodeLeft = node.result.left;
-	if (placedByParent) {
-		node.rawLeft = nodeLeft;
-	}
-	node.rawAbsoluteLeft = rawAbsoluteLeft + node.rawLeft;
+	if (placedByParent || node.placedDirectly) {
+		node.rawLeft = node.result.left;
+		node.rawTop = node.result.top;
+		node.placedDirectly = false;
+	}
+	if (node.sized) {
+		node.rawWidth = !Number.isNaN(node.result.width) ? node.result.width : 0;
+		node.rawHeight = !Number.isNaN(node.result.height) ? node.result.height : 0;
+		node.sized = false;
+	}
+	const absLeft = rawParentLeft + node.rawLeft;
+	const absTop = rawParentTop + node.rawTop;
+	node.rawAbsoluteLeft = absLeft;
 	if (node.measure !== null && breaksElsewhere(node)) {
 		misplaced.push(node);
 	}
-	const nodeTop = node.result.top;
-	const nodeWidth = !Number.isNaN(node.result.width) ? node.result.width : 0;
-	const nodeHeight = !Number.isNaN(node.result.height) ? node.result.height : 0;
-
-	const absLeft = absoluteLeft + nodeLeft;
-	const absTop = absoluteTop + nodeTop;
-	const absRight = absLeft + nodeWidth;
-	const absBottom = absTop + nodeHeight;
+	const absRight = absLeft + node.rawWidth;
+	const absBottom = absTop + node.rawHeight;
 
 	const isText = node.measure !== null && node.measuresText;
 
 	node.result.left =
-		roundValue(absLeft, false, false) - roundValue(absoluteLeft, false, false);
+		roundValue(absLeft, false, false) - roundValue(rawParentLeft, false, false);
 	node.result.top =
-		roundValue(absTop, false, false) - roundValue(absoluteTop, false, false);
+		roundValue(absTop, false, false) - roundValue(rawParentTop, false, false);
 
 	node.result.width =
 		roundValue(absRight, isText, false) - roundValue(absLeft, isText, false);
 	node.result.height =
 		roundValue(absBottom, isText, false) - roundValue(absTop, isText, false);
 
-	const laidOut = Number.isNaN(node.gridLeft);
+	const childrenPlaced = node.childrenPlaced;
+	node.childrenPlaced = false;
 	node.settled = absLeft === node.gridLeft && absTop === node.gridTop;
 	if (node.settled) {
 		return;
@@ -6256,14 +6286,7 @@ function roundToGrid(
 	node.gridLeft = absLeft;
 	node.gridTop = absTop;
 	for (const child of node.children) {
-		roundToGrid(
-			child,
-			absLeft,
-			absTop,
-			node.rawAbsoluteLeft,
-			laidOut,
-			misplaced,
-		);
+		roundToGrid(child, absLeft, absTop, childrenPlaced, misplaced);
 	}
 }
 
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
new file mode 100644
index 00000000..5e0c5c81
--- /dev/null
+++ b/tests/incremental.test.ts
@@ -0,0 +1,219 @@
+/**
+ * Whatever a page went through, what it shows must be what the same
+ * page shows freshly rendered. Every cache layout, style and paint keep
+ * across frames is a way for the first to drift from the second: a box
+ * not laid out again, rows not repainted, a style or a measure read from
+ * before a change. Each run applies seeded random changes to a page
+ * built from the features those caches cover, and after every change
+ * compares the screen and every element's rect with a fresh render of
+ * the page's markup. Cells are 7 by 15 pixels, so lengths in pixels
+ * fall on fractions of a cell.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+const COLS = 60;
+const ROWS = 30;
+const CELL = {width: 7, height: 15};
+
+const HEAD = `<style>
+	.row { display: flex; gap: 1ch }
+	.col { display: flex; flex-direction: column }
+	.grid { display: grid; grid-template-columns: 1fr 2fr }
+	.box { border: 1px solid; padding: 0 3px }
+	.bg { background-color: rgb(20, 40, 60) }
+	.b { font-weight: bold }
+	.hide { display: none }
+	.wide { width: 60% }
+	.m { margin-left: 10px }
+	.abs { position: absolute; top: 20px; right: 3px }
+	.ib { display: inline-block; border: 1px solid }
+	.center { text-align: center }
+	.n { counter-increment: n }
+	.n::before { content: counter(n) ". " }
+</style>`;
+
+const BODY = `<div id=root style="counter-reset: n">
+	<p id=p0>Some text <span id=s0>span</span> and more words here</p>
+	<div id=f class=row><div id=f0 class=box>one</div><div id=f1>two words</div><div id=f2 class=bg>three</div></div>
+	<div id=g class=grid><div id=g0>cell a</div><div id=g1>cell b has longer text that may wrap</div></div>
+	<ol id=l><li id=l0>first</li><li id=l1 class=n>second</li><li id=l2>third</li></ol>
+	<table id=t><tr><td id=t0 class=box>x</td><td id=t1>y y</td></tr></table>
+	<p id=p1>inline <span id=ib class=ib>block</span> tail of the line</p>
+	<div id=c class=col><div id=c0>above</div><div id=c1 class=n>below</div></div>
+</div>`;
+
+const CLASSES = [
+	"row",
+	"col",
+	"grid",
+	"box",
+	"bg",
+	"b",
+	"hide",
+	"wide",
+	"m",
+	"abs",
+	"ib",
+	"center",
+	"n",
+];
+
+const STYLES: Array<[string, (pick: Random) => string]> = [
+	["margin-left", (r) => `${r.int(25)}px`],
+	["margin-top", (r) => `${r.int(40)}px`],
+	["padding-top", (r) => `${r.int(30)}px`],
+	["width", (r) => `${10 + r.int(90)}%`],
+	["width", (r) => `${20 + r.int(300)}px`],
+	["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
+	["background-color", (r) => r.pick(["transparent", "rgb(90, 0, 0)"])],
+	[
+		"display",
+		(r) => r.pick(["block", "none", "flex", "inline-block", "inline"]),
+	],
+	["order", (r) => String(r.int(3))],
+	["flex-direction", (r) => r.pick(["row", "column", "row-reverse"])],
+	["text-align", (r) => r.pick(["left", "center", "right"])],
+	["position", (r) => r.pick(["static", "relative", "absolute"])],
+	["top", (r) => `${r.int(30)}px`],
+	["visibility", (r) => r.pick(["visible", "hidden"])],
+	["border", (r) => r.pick(["none", "1px solid", "1px double"])],
+	["z-index", (r) => String(r.int(3))],
+	["outline", (r) => r.pick(["none", "1px solid"])],
+];
+
+const WORDS = ["alpha", "be", "gamma delta", "e", "zeta eta theta", "iota"];
+
+class Random {
+	state: number;
+	constructor(seed: number) {
+		this.state = seed;
+	}
+
+	next(): number {
+		this.state = (this.state + 0x6d2b79f5) | 0;
+		let t = this.state;
+		t = Math.imul(t ^ (t >>> 15), t | 1);
+		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	}
+
+	int(max: number): number {
+		return Math.floor(this.next() * (max + 1));
+	}
+
+	pick<T>(items: readonly T[]): T {
+		return items[Math.floor(this.next() * items.length)];
+	}
+}
+
+function mount(): {dom: TermDOM; terminal: MockProcess} {
+	const terminal = new MockProcess({cols: COLS, rows: ROWS});
+	const dom = new TermDOM({transport: terminal.transport, cellSize: CELL});
+	return {dom, terminal};
+}
+
+// A change to a random element of the page, described for the report.
+function change(document: any, random: Random): string {
+	const root = document.getElementById("root");
+	const elements = [...root.querySelectorAll("*")];
+	const element: any = elements.length > 0 ? random.pick(elements) : root;
+	const name = element.id || element.localName;
+	switch (random.int(5)) {
+		case 0: {
+			const token = random.pick(CLASSES);
+			element.classList.toggle(token);
+			return `toggle .${token} on ${name}`;
+		}
+		case 1:
+		case 2: {
+			const [property, value] = random.pick(STYLES);
+			const chosen = value(random);
+			element.style.setProperty(property, chosen);
+			return `${name}.style.${property} = ${chosen}`;
+		}
+		case 3: {
+			const text = [...element.childNodes].find((node: any) =>
+				node.nodeType === 3 && node.data.trim() !== "",
+			);
+			const words = random.pick(WORDS);
+			if (text !== undefined) {
+				(text as any).data = words;
+				return `${name} text = ${words}`;
+			}
+			element.append(words);
+			return `${name} append text ${words}`;
+		}
+		case 4: {
+			const added = document.createElement(
+				random.pick(["p", "span", "div", "li", "b"]),
+			);
+			added.id = `x${random.int(9999)}`;
+			added.textContent = random.pick(WORDS);
+			const parent: any = random.pick([root, ...elements]);
+			const children = [...parent.childNodes];
+			parent.insertBefore(added, children[random.int(children.length)] ?? null);
+			return `insert ${added.localName}#${added.id} into ${parent.id || parent.localName}`;
+		}
+		default: {
+			if (element === root) {
+				return "nothing";
+			}
+			element.remove();
+			return `remove ${name}`;
+		}
+	}
+}
+
+function rects(document: any): string[] {
+	return [...document.querySelectorAll("*")].map((element: any) => {
+		const r = element.getBoundingClientRect();
+		return `${element.localName}#${element.id} ${r.x},${r.y} ${r.width}x${r.height}`;
+	});
+}
+
+// A copy of the page's nodes, not its markup, which the parser would
+// rearrange where the changes put an element it would not.
+async function fresh(page: any): Promise<{screen: string; rects: string[]}> {
+	const {dom, terminal} = mount();
+	dom.document.documentElement.replaceChildren(
+		...[...page.documentElement.childNodes].map((node: any) =>
+			dom.document.importNode(node, true),
+		),
+	);
+	await nextFrame(dom);
+	const result = {
+		screen: terminal.getScreenContents(),
+		rects: rects(dom.document),
+	};
+	dom.dispose();
+	return result;
+}
+
+async function run(seed: number, steps: number): Promise<void> {
+	const random = new Random(seed);
+	const {dom, terminal} = mount();
+	dom.document.head.innerHTML = HEAD;
+	dom.document.body.innerHTML = BODY;
+	await nextFrame(dom);
+	const log: string[] = [];
+	for (let step = 0; step < steps; step++) {
+		log.push(change(dom.document, random));
+		await nextFrame(dom);
+		const expected = await fresh(dom.document);
+		const where = `seed ${seed} after:\n  ${log.join("\n  ")}`;
+		expect(`${where}\n${rects(dom.document).join("\n")}`)
+			.toBe(`${where}\n${expected.rects.join("\n")}`);
+		expect(`${where}\n${terminal.getScreenContents()}`)
+			.toBe(`${where}\n${expected.screen}`);
+	}
+	dom.dispose();
+}
+
+for (let seed = 1; seed <= 24; seed++) {
+	test(`seeded changes render as a fresh page does: seed ${seed}`, async () => {
+		await run(seed, 12);
+	});
+}
diff --git a/tests/style-caches.test.ts b/tests/style-caches.test.ts
index a90b2908..0ca4e363 100644
--- a/tests/style-caches.test.ts
+++ b/tests/style-caches.test.ts
@@ -186,3 +186,23 @@ test("only a details element's first summary is its marker", async () => {
 	expect([display("new"), display("old")]).toEqual(["list-item", "block"]);
 	dom.dispose();
 });
+
+test("generated content renumbers when an enclosing element's counter changes", async () => {
+	const {dom, document} = await mount(
+		"<style>body { counter-reset: n } .n { counter-increment: n } " +
+			"#c::before { content: counter(n) \". \" }</style>" +
+			"<div id=a><div id=b class=n><div id=c class=n>c</div></div></div>",
+	);
+	const text = () => dom.renderANSI().replace(/\x1b\[[0-9;]*m/g, "");
+	expect(text()).toContain("2. c");
+	document.getElementById("a").className = "n";
+	await nextFrame(dom);
+	expect(text()).toContain("3. c");
+	document.getElementById("b").style.counterIncrement = "n 5";
+	await nextFrame(dom);
+	expect(text()).toContain("7. c");
+	document.getElementById("a").className = "";
+	await nextFrame(dom);
+	expect(text()).toContain("6. c");
+	dom.dispose();
+});

From 2fbe3462c0ee46faf8eeedb09a94cec88a9b918a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 00:54:44 -0400
Subject: [PATCH 60/99] Repaint a restyle inside an inline-block on the rows
 the inline-block is on

An inline-block lays its content out in a context of its own, whose
rows count from the inline-block's top. A restyled element there
repainted those rows of the document. Its rows are now found from the
inline-block that holds the context, out through any that hold it.

The fuzz test keeps the seeds that found this and the rounding bug,
run as long as they ran then.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts    | 21 ++++++++++++++++++++-
 tests/incremental.test.ts | 10 ++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index c78d6a1b..dc635f69 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6463,6 +6463,14 @@ function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
 		getComputedValue(element, "display") === "list-item";
 }
 
+function isInDocumentTree(layout: Layout, node: LayoutNode): boolean {
+	let root = node;
+	while (root.parent !== null) {
+		root = root.parent;
+	}
+	return root === layout.initialBlock;
+}
+
 function isInFixedBox(node: LayoutNode): boolean {
 	for (let at: LayoutNode | null = node; at !== null; at = at.parent) {
 		if (at.style.positionType === "fixed") {
@@ -6536,7 +6544,18 @@ export function takeDamageBands(
 		while (box !== null && !layout.nodeMap.has(box)) {
 			box = flatParentElement(box);
 		}
-		const node = box === null ? undefined : layout.nodeMap.get(box);
+		let node = box === null ? undefined : layout.nodeMap.get(box);
+		// A box an inline-block lays out in its own context has rows counted
+		// from that context. The inline-block's own rows hold them.
+		while (
+			box !== null && node !== undefined && !isInDocumentTree(layout, node)
+		) {
+			box = getEnclosingIndependentFormattingContext(
+				layout,
+				getBoxParentElement(box),
+			);
+			node = box === null ? undefined : layout.nodeMap.get(box);
+		}
 		const extent = node === undefined ? undefined : extents.get(node);
 		if (node === undefined || extent === undefined) {
 			return undefined;
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 5e0c5c81..709bb34d 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -217,3 +217,13 @@ for (let seed = 1; seed <= 24; seed++) {
 		await run(seed, 12);
 	});
 }
+
+// Seeds that once found a bug, run as long as they did then: a grid cell
+// rounded again from rounded values (1012, 1066, 1093), and restyles
+// inside an inline-block repainting rows counted from its own top (1020,
+// 1193, 1200, 1260).
+for (const seed of [1012, 1020, 1066, 1093, 1193, 1200, 1260]) {
+	test(`seeded changes render as a fresh page does: seed ${seed}`, async () => {
+		await run(seed, 25);
+	});
+}

From 8365ac0863a321d9145ba9a3613e7c71937cb4eb Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 01:17:07 -0400
Subject: [PATCH 61/99] Keep positioned table parts and inline-block contents
 current through changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Found by the fuzz test, each a page that drew differently than the same
page rendered fresh:

- A positioned cell still counted as one of its row's cells, and a
  positioned child of a table was zeroed, subtree and all, by the table
  that does not lay it out. A positioned table part is a block now, as
  css2 §9.7 has it, and a table lays out the absolute boxes it contains.
- A box that starts or stops being positioned re-derives the absolute
  boxes below it, whose containing block it became or stopped being.
- A change inside an inline-block's own formatting context, a restyle or
  a box added there, left the inline-block measuring its old size. The
  context's root tells its box, whose node and measure are invalidated,
  and a context still stale after a solve is laid out again.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts       | 78 +++++++++++++++++++++++++++++++++++-
 src/internal/layoutsolver.ts | 39 ++++++++++++++++--
 2 files changed, 112 insertions(+), 5 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index dc635f69..e4026768 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -188,6 +188,15 @@ const TABLE_DISPLAYS = new Set<string>([
 	"table-caption",
 ]);
 
+const BLOCKIFIED_TABLE_PARTS = new Set<Display>([
+	"table-header-group",
+	"table-footer-group",
+	"table-row-group",
+	"table-caption",
+	"table-row",
+	"table-cell",
+]);
+
 // display has two axes (css-display-3 §2), and blockification (§2.7) changes
 // only the OUTER one. An absolutely positioned inline-grid sits on rows of its
 // own and is still a grid inside. So the outer question (is this box on a line)
@@ -1492,7 +1501,13 @@ function styleLayoutNodeProperties(
 		}
 	}
 
-	if (display === "none") {
+	// An absolutely positioned part of a table is a block (css2 §9.7). It
+	// leaves the table, and lays out as any positioned box does.
+	const outOfFlow =
+		getPosition(element) === "absolute" || getPosition(element) === "fixed";
+	if (outOfFlow && BLOCKIFIED_TABLE_PARTS.has(display)) {
+		style.displayType = "block";
+	} else if (display === "none") {
 		style.displayType = "none";
 	} else if (display === "grid" || display === "inline-grid") {
 		style.displayType = "grid";
@@ -2462,6 +2477,11 @@ function syncIndependentFormattingContext(
 	if (!root) {
 		root = new LayoutNode();
 		box.independentFormattingContext = root;
+		// A change inside, a restyle no run records, leaves the box's
+		// measure answering with the old size unless the box hears of it.
+		root.onStale = () => {
+			layout.staleHosts.add(element);
+		};
 	}
 	// The root IS the box's formatting context, so it gets the display and
 	// the grid container properties. The element's own node is the run's.
@@ -5397,6 +5417,9 @@ export class Layout {
 	// Elements whose style changed with no layout change, and whether the
 	// selection moved. Their rows are found once layout is current.
 	restyledForPaint: Map<Element, object | null>;
+	// Boxes whose own formatting context went stale, so that their measure,
+	// which lays it out, is answered again.
+	staleHosts: Set<Element>;
 	selectionMoved: boolean;
 	// The rows the selection covered at the last frame, from its ends.
 	selectionRows: [number, number] | null;
@@ -5409,6 +5432,7 @@ export class Layout {
 		this.wholeDamage = true;
 		this.collecting = false;
 		this.restyledForPaint = new Map();
+		this.staleHosts = new Set();
 		this.selectionMoved = false;
 		this.selectionRows = null;
 		this.positionedElements = new Set<Element>();
@@ -5483,6 +5507,7 @@ export class Layout {
 		// The cascade has finished for this frame, so the boxes it unsettled
 		// can be resolved against the current styles.
 		applyRestyles(this);
+		flushStaleHosts(this);
 		// Every mutation path dirties the tree on its way in, so a clean tree
 		// cannot be hiding a disconnection, and even the pruning sweep below is
 		// not worth paying.
@@ -5553,6 +5578,10 @@ export class Layout {
 			}
 		}
 
+		// The boxes added above may have joined a box's own formatting
+		// context.
+		flushStaleHosts(this);
+
 		// A clean root means the previous layout is still exact. Recomputing
 		// would be a full-tree relayout per frame for an animation repainting
 		// one span.
@@ -5565,6 +5594,26 @@ export class Layout {
 		// viewport units against it.
 		const root = this.initialBlock;
 		root.performLayout(root.style.width.value, root.style.height.value);
+		// A context that went stale while the solve ran and was not laid out
+		// after, as one whose box's measure was already answered, is laid out
+		// now. One its own measure rebuilt is laid out already.
+		for (let pass = 0; pass < 2 && this.staleHosts.size > 0; pass++) {
+			const hosts = [...this.staleHosts];
+			this.staleHosts.clear();
+			let again = false;
+			for (const host of hosts) {
+				const context = this.boxes.get(host)?.independentFormattingContext;
+				if (host.isConnected && context?.stale) {
+					invalidateHost(this, host);
+					again = true;
+				}
+			}
+			if (!again) {
+				break;
+			}
+			root.performLayout(root.style.width.value, root.style.height.value);
+		}
+		this.staleHosts.clear();
 		this.collecting = !this.wholeDamage;
 		computePaintExtents(this, root, 0, 0);
 		this.collecting = false;
@@ -6463,6 +6512,25 @@ function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
 		getComputedValue(element, "display") === "list-item";
 }
 
+// A box whose own formatting context went stale lays it out again in its
+// measure, which is what is invalidated.
+function flushStaleHosts(layout: Layout): void {
+	for (const host of layout.staleHosts) {
+		invalidateHost(layout, host);
+	}
+	layout.staleHosts.clear();
+}
+
+// The box's own node when it has one, a block in a flex or grid
+// container, and the run that measures it when it sits on a line.
+function invalidateHost(layout: Layout, host: Element): void {
+	if (!host.isConnected) {
+		return;
+	}
+	layout.nodeMap.get(host)?.invalidate();
+	invalidateEnclosingMeasure(layout, host);
+}
+
 function isInDocumentTree(layout: Layout, node: LayoutNode): boolean {
 	let root = node;
 	while (root.parent !== null) {
@@ -7014,6 +7082,14 @@ function applyRestyles(layout: Layout): void {
 				pseudoElementCount(element) === 0
 					? probeLayoutStyle(element)
 					: null;
+			// A box that starts or stops being positioned starts or stops
+			// containing its absolute descendants.
+			if (
+				probe !== null &&
+				probe.style.positionType !== layoutNode!.style.positionType
+			) {
+				invalidateOutOfFlowDescendants(layout, element);
+			}
 			if (probe !== null) {
 				// A restyle that left every property layout reads as it was (a
 				// color, a decoration) changes no box and no measurement, and
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index cceb735c..3a369550 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -533,6 +533,9 @@ export class LayoutNode {
 	// Whether a child left since the last paint extents, whose rows then
 	// show nothing it painted.
 	lostChild: boolean;
+	// Called when the tree this node roots goes stale. The root of a box's
+	// own formatting context tells the box, whose measure lays it out.
+	onStale: (() => void) | null;
 
 	constructor() {
 		this.children = [];
@@ -561,6 +564,7 @@ export class LayoutNode {
 		this.measuredWidth = NaN;
 		this.measured = null;
 		this.lostChild = false;
+		this.onStale = null;
 		this.currentStyle = createStyle();
 		this.result = createResult();
 	}
@@ -938,9 +942,15 @@ function countOutOfFlow(start: LayoutNode, change: number): void {
 }
 
 function invalidateAncestors(start: LayoutNode): void {
-	for (let node: LayoutNode | null = start; node; node = node.parent) {
+	let node = start;
+	for (;;) {
 		node.stale = true;
+		if (node.parent === null) {
+			break;
+		}
+		node = node.parent;
 	}
+	node.onStale?.();
 }
 
 function resolveFlexGrow(node: LayoutNode): number {
@@ -2640,6 +2650,14 @@ interface TableRow {
 
 // Visual order: header groups first and footer groups last, wherever they
 // were written.
+// A positioned box hangs from its containing block wherever it sits in
+// the tree, and takes no cell of the table it is in.
+function getInFlowCells(row: LayoutNode): LayoutNode[] {
+	return row.children.some((cell) => isOutOfFlowType(cell.style.positionType))
+		? row.children.filter((cell) => !isOutOfFlowType(cell.style.positionType))
+		: row.children;
+}
+
 function collectTableRows(table: LayoutNode): {
 	rows: TableRow[];
 	captions: LayoutNode[];
@@ -2675,9 +2693,12 @@ function collectTableRows(table: LayoutNode): {
 		groups.push(group);
 		anonymous = null;
 		for (const child of group.children) {
+			if (isOutOfFlowType(child.style.positionType)) {
+				continue;
+			}
 			if (child.style.displayType === "table-row") {
 				anonymous = null;
-				into.push({node: child, group, cells: child.children});
+				into.push({node: child, group, cells: getInFlowCells(child)});
 			} else {
 				collectStray(child, group, into);
 			}
@@ -2690,7 +2711,11 @@ function collectTableRows(table: LayoutNode): {
 			child.style.displayType === "none" ||
 			isOutOfFlowType(child.style.positionType)
 		) {
-			zeroLayout(child);
+			// A positioned child is its containing block's to lay out, and
+			// zeroing it here would wipe what that layout placed.
+			if (!isOutOfFlowType(child.style.positionType)) {
+				zeroLayout(child);
+			}
 			continue;
 		}
 
@@ -2718,7 +2743,7 @@ function collectTableRows(table: LayoutNode): {
 				collectGroup(child, body);
 				break;
 			case "table-row":
-				body.push({node: child, group: null, cells: child.children});
+				body.push({node: child, group: null, cells: getInFlowCells(child)});
 				break;
 			default:
 				collectStray(child, null, body);
@@ -3528,6 +3553,12 @@ function layoutTable(
 		cell.node.result.left = left + columnStart(cell.column);
 		cell.node.result.top = top;
 	}
+
+	// A positioned table or part of one contains the absolute boxes in it,
+	// as any positioned box does.
+	for (const child of getOutOfFlowDescendants(node, false)) {
+		layoutAbsoluteChild(node, child, ownerWidth, ownerHeight);
+	}
 }
 
 // css-grid-2 §12.2.

From c037f493220f1aaab460b164eb517b35d6cbc8b0 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 01:31:56 -0400
Subject: [PATCH 62/99] Measure an inline-block again when its width or height
 changes, and pin the fuzz finds

An inline-block's size is read by its measure, not its style record, so
a width set on one alone looked to the restyle like no change at all.
Width and height join the properties the measure key compares.

Each bug the fuzz test found has a case of its own that applies the
fewest changes that showed it, and the seeds that found them run on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts    |  5 ++-
 tests/incremental.test.ts | 85 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index e4026768..c659ce34 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1284,8 +1284,11 @@ function sizeReplacedBox(
 }
 
 // What the run measurer reads beyond the style record: the properties
-// that decide where text breaks and how wide it is.
+// that decide where text breaks and how wide it is, and the size of an
+// inline-block, which its measure reads rather than its record.
 const MEASURE_PROPERTIES = [
+	"width",
+	"height",
 	"white-space",
 	"direction",
 	"word-break",
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 709bb34d..fe63695b 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -219,11 +219,88 @@ for (let seed = 1; seed <= 24; seed++) {
 }
 
 // Seeds that once found a bug, run as long as they did then: a grid cell
-// rounded again from rounded values (1012, 1066, 1093), and restyles
-// inside an inline-block repainting rows counted from its own top (1020,
-// 1193, 1200, 1260).
-for (const seed of [1012, 1020, 1066, 1093, 1193, 1200, 1260]) {
+// rounded again from rounded values (1012, 1066, 1093), restyles inside
+// an inline-block repainting rows counted from its own top (1020, 1193,
+// 1200, 1260), and an inline-block's width its measure did not hear of
+// (1481), and a positioned row group zeroed by its table when stray
+// content joined it (1140).
+for (const seed of [1012, 1020, 1066, 1093, 1140, 1193, 1200, 1260, 1481]) {
 	test(`seeded changes render as a fresh page does: seed ${seed}`, async () => {
 		await run(seed, 25);
 	});
 }
+
+// Each change, applied a frame apart, against the page drawn fresh after
+// each one.
+async function replay(
+	html: string,
+	changes: Array<(document: any) => void>,
+): Promise<void> {
+	const {dom, terminal} = mount();
+	dom.document.head.innerHTML = HEAD;
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	for (const [index, apply] of changes.entries()) {
+		apply(dom.document);
+		await nextFrame(dom);
+		const expected = await fresh(dom.document);
+		expect(`after change ${index}\n${rects(dom.document).join("\n")}`)
+			.toBe(`after change ${index}\n${expected.rects.join("\n")}`);
+		expect(`after change ${index}\n${terminal.getScreenContents()}`)
+			.toBe(`after change ${index}\n${expected.screen}`);
+	}
+	dom.dispose();
+}
+
+test("a cell taken out of flow leaves its table", async () => {
+	await replay(
+		"<table id=t><tr><td id=a class=box>x</td><td>y y</td></tr></table>",
+		[(document) => document.getElementById("a").style.position = "absolute"],
+	);
+});
+
+test("a positioned row group keeps its positioned cells laid out", async () => {
+	await replay(
+		"<table id=t><tbody id=g><tr><td id=a>x</td><td id=b>y y</td></tr>" +
+			"</tbody></table>",
+		[
+			(document) => document.getElementById("b").classList.add("abs"),
+			(document) => document.getElementById("g").classList.add("abs"),
+			(document) => document.getElementById("t").append("stray"),
+		],
+	);
+});
+
+test("an inline-block grows with a child made wider", async () => {
+	await replay(
+		"<div id=f class=row><div id=a class=box>one</div><div>two</div></div>",
+		[
+			(document) => document.getElementById("f").classList.add("ib"),
+			(document) => document.getElementById("a").style.width = "87px",
+		],
+	);
+});
+
+test("an inline-block lays out a block put inside its inline content", async () => {
+	await replay("<div class=col><div id=c>above</div></div>", [
+		(document) => {
+			const span = document.createElement("span");
+			span.id = "s";
+			span.textContent = "gamma delta";
+			document.getElementById("c").prepend(span);
+		},
+		(document) => document.getElementById("c").classList.add("ib"),
+		(document) => {
+			const p = document.createElement("p");
+			p.textContent = "e";
+			document.getElementById("s").append(p);
+		},
+	]);
+});
+
+test("a flex item made an inline-block takes the width it is given", async () => {
+	await replay("<div class=row><div>one</div><div id=a>two words</div></div>", [
+		(document) => document.getElementById("a").classList.add("ib"),
+		(document) => document.getElementById("a").style.width = "23%",
+	]);
+});

From 35b01a76a48927cb0b828f8c8630ce7a27f4b061 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 02:03:59 -0400
Subject: [PATCH 63/99] Apply a sheet added inside a subtree, show a textarea's
 new text, and fuzz a second page

A <style> inside an added element, as in an added <head>, never asked
the cascade to read the sheets. Something else happened to read them,
except when the page held a form control.

A textarea nobody has edited shows its text children, but nothing
redrew it when they changed, and its default value took in the text of
child elements too, which the HTML child text content does not.

The fuzz test's pages and changes move to tests/fuzz-pages.ts, where a
failing seed can be replayed outside the runner. A second page covers
scrollers, display: contents, grid placement, generated content from an
attribute, ellipsis, form controls, a fixed bar, pre text, direction,
and rules added to and taken from the sheet.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts     |  10 +
 src/internal/dom.ts       |  14 +-
 tests/fuzz-pages.ts       | 424 ++++++++++++++++++++++++++++++++++++++
 tests/incremental.test.ts | 243 ++++------------------
 tests/stylesheet.test.ts  |  18 ++
 5 files changed, 500 insertions(+), 209 deletions(-)
 create mode 100644 tests/fuzz-pages.ts

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 4b915de4..c858ea69 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6554,6 +6554,16 @@ export function handleMutations(
 							}
 						}
 						for (const each of elements) {
+							// A sheet brought in inside what was added, a <style>
+							// in an added <head>, is synced as one added alone.
+							if (each !== element && isStyleElement(each)) {
+								const styleRoot = each.getRootNode();
+								if (isShadowRoot(styleRoot)) {
+									rootsToSync.add(styleRoot);
+								} else {
+									shouldSyncStylesheets = true;
+								}
+							}
 							invalidateElementCaches(cascade, each);
 							if (connected) {
 								attachPseudoElementsToElement(cascade, each);
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 873ea9ba..693fca83 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -22618,7 +22618,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 	}
 
 	get defaultValue(): string {
-		return getDescendantText(this);
+		return getChildText(this);
 	}
 
 	set defaultValue(value: string) {
@@ -22703,7 +22703,7 @@ export class HTMLTextAreaElement extends HTMLElement {
 		const slots = this as unknown as Slots<HTMLTextAreaElement>;
 		return slots.extra.dirty
 			? slots.extra.value
-			: normalizeNewlines(getDescendantText(ownerOf(slots)));
+			: normalizeNewlines(getChildText(ownerOf(slots) as Element));
 	}
 
 	get _uaValueText(): globalThis.Text | null {
@@ -36073,6 +36073,16 @@ function handleMutationRecords(
 			ensureUAShadowTrees(added);
 		}
 	}
+	// A textarea nobody has edited shows its default value, which is its
+	// text children, so a change to them changes what it shows.
+	for (const record of relevant) {
+		const textarea = record.type === "childList"
+			? record.target
+			: record.type === "characterData" ? record.target.parentNode : null;
+		if (textarea instanceof HTMLTextAreaElement && !_(textarea).extra.dirty) {
+			syncUAShadowTree(textarea);
+		}
+	}
 	cssom.handleMutations(_(attached).extra.cascade, relevant);
 	_(attached).extra.layout.handleMutations(relevant);
 	focusAutofocusedNodes(relevant);
diff --git a/tests/fuzz-pages.ts b/tests/fuzz-pages.ts
new file mode 100644
index 00000000..6c034fab
--- /dev/null
+++ b/tests/fuzz-pages.ts
@@ -0,0 +1,424 @@
+/**
+ * Pages and changes for tests/incremental.test.ts, kept apart so a
+ * failing seed can be replayed and shrunk outside the test runner. A
+ * change is chosen as an action naming its target by id, so the same
+ * actions replay on a fresh page.
+ */
+import {TermDOM} from "../src/index.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+export const COLS = 60;
+export const ROWS = 30;
+// Cells 7 by 15 pixels put pixel lengths on fractions of a cell.
+export const CELL = {width: 7, height: 15};
+
+export interface Page {
+	name: string;
+	head: string;
+	body: string;
+	classes: string[];
+	styles: Array<[string, (random: Random) => string]>;
+	attributes: Array<[string, (random: Random) => string]>;
+	// Rules a change can add to or take from the page's own sheet.
+	rules: string[];
+}
+
+const LAYOUT: Page = {
+	name: "layout",
+	head: `<style id=sheet>
+	.row { display: flex; gap: 1ch }
+	.col { display: flex; flex-direction: column }
+	.grid { display: grid; grid-template-columns: 1fr 2fr }
+	.box { border: 1px solid; padding: 0 3px }
+	.bg { background-color: rgb(20, 40, 60) }
+	.b { font-weight: bold }
+	.hide { display: none }
+	.wide { width: 60% }
+	.m { margin-left: 10px }
+	.abs { position: absolute; top: 20px; right: 3px }
+	.ib { display: inline-block; border: 1px solid }
+	.center { text-align: center }
+	.n { counter-increment: n }
+	.n::before { content: counter(n) ". " }
+</style>`,
+	body: `<div id=root style="counter-reset: n">
+	<p id=p0>Some text <span id=s0>span</span> and more words here</p>
+	<div id=f class=row><div id=f0 class=box>one</div><div id=f1>two words</div><div id=f2 class=bg>three</div></div>
+	<div id=g class=grid><div id=g0>cell a</div><div id=g1>cell b has longer text that may wrap</div></div>
+	<ol id=l><li id=l0>first</li><li id=l1 class=n>second</li><li id=l2>third</li></ol>
+	<table id=t><tr><td id=t0 class=box>x</td><td id=t1>y y</td></tr></table>
+	<p id=p1>inline <span id=ib class=ib>block</span> tail of the line</p>
+	<div id=c class=col><div id=c0>above</div><div id=c1 class=n>below</div></div>
+</div>`,
+	classes: [
+		"row",
+		"col",
+		"grid",
+		"box",
+		"bg",
+		"b",
+		"hide",
+		"wide",
+		"m",
+		"abs",
+		"ib",
+		"center",
+		"n",
+	],
+	styles: [
+		["margin-left", (r) => `${r.int(25)}px`],
+		["margin-top", (r) => `${r.int(40)}px`],
+		["padding-top", (r) => `${r.int(30)}px`],
+		["width", (r) => `${10 + r.int(90)}%`],
+		["width", (r) => `${20 + r.int(300)}px`],
+		["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
+		["background-color", (r) => r.pick(["transparent", "rgb(90, 0, 0)"])],
+		[
+			"display",
+			(r) => r.pick(["block", "none", "flex", "inline-block", "inline"]),
+		],
+		["order", (r) => String(r.int(3))],
+		["flex-direction", (r) => r.pick(["row", "column", "row-reverse"])],
+		["text-align", (r) => r.pick(["left", "center", "right"])],
+		["position", (r) => r.pick(["static", "relative", "absolute"])],
+		["top", (r) => `${r.int(30)}px`],
+		["visibility", (r) => r.pick(["visible", "hidden"])],
+		["border", (r) => r.pick(["none", "1px solid", "1px double"])],
+		["z-index", (r) => String(r.int(3))],
+		["outline", (r) => r.pick(["none", "1px solid"])],
+	],
+	attributes: [],
+	rules: [],
+};
+
+const FLOW: Page = {
+	name: "flow",
+	head: `<style id=sheet>
+	.scroll { overflow: auto; height: 60px }
+	.clip { overflow: hidden; height: 30px }
+	.contents { display: contents }
+	.sticky { position: sticky; top: 0; background-color: rgb(0, 0, 90) }
+	.fixed { position: fixed; bottom: 0; left: 0 }
+	.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px }
+	.grid3 { display: grid; grid-template-columns: repeat(3, 1fr) }
+	.span2 { grid-column: span 2 }
+	.before::before { content: "[" attr(data-x) "] " }
+	.upper { text-transform: uppercase }
+	.rtl { direction: rtl }
+	.indent { text-indent: 2ch }
+	.nowrap { white-space: nowrap }
+	.pre { white-space: pre }
+	.box { border: 1px solid }
+</style>`,
+	body: `<div id=root>
+	<div id=s class=scroll><p id=s0 class=sticky>sticky head</p><p id=s1>one</p><p id=s2>two</p><p id=s3>three</p><p id=s4>four</p></div>
+	<div id=e class=ell>a long line of text that the box cuts with an ellipsis</div>
+	<div id=k class=contents><span id=k0>contents child</span><p id=k1>block in contents</p></div>
+	<div id=gr class=grid3><div id=g0>a</div><div id=g1 class=span2>b</div><div id=g2>c</div><div id=g3 class=box>d</div></div>
+	<p id=bf class=before data-x=1>before text</p>
+	<input id=in value="field text">
+	<textarea id=ta>area text</textarea>
+	<div id=fx class=fixed>fixed bar</div>
+	<pre id=pr>pre  formatted
+   text</pre>
+</div>`,
+	classes: [
+		"scroll",
+		"clip",
+		"contents",
+		"sticky",
+		"fixed",
+		"ell",
+		"grid3",
+		"span2",
+		"before",
+		"upper",
+		"rtl",
+		"indent",
+		"nowrap",
+		"pre",
+		"box",
+	],
+	styles: [
+		["height", (r) => `${15 + r.int(90)}px`],
+		["width", (r) => `${30 + r.int(70)}%`],
+		["overflow", (r) => r.pick(["visible", "hidden", "auto"])],
+		["white-space", (r) => r.pick(["normal", "nowrap", "pre", "pre-wrap"])],
+		["direction", (r) => r.pick(["ltr", "rtl"])],
+		["text-transform", (r) => r.pick(["none", "uppercase"])],
+		["grid-column", (r) => r.pick(["auto", "span 2", "1 / 3", "3"])],
+		["display", (r) => r.pick(["block", "contents", "none", "grid", "inline"])],
+		["margin-top", (r) => `${r.int(40)}px`],
+		["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
+		["position", (r) => r.pick(["static", "sticky", "fixed"])],
+		["text-indent", (r) => `${r.int(5)}ch`],
+	],
+	attributes: [
+		["data-x", (r) => String(r.int(99))],
+		["value", (r) => r.pick(["", "new value", "a much longer field value"])],
+		["rows", (r) => String(1 + r.int(4))],
+	],
+	rules: [
+		".rule-a { color: rgb(200, 0, 0) }",
+		"p { margin: 1px 0 }",
+		".before::before { content: \"<\" attr(data-x) \"> \" }",
+	],
+};
+
+export const PAGES = [LAYOUT, FLOW];
+
+export const WORDS = [
+	"alpha",
+	"be",
+	"gamma delta",
+	"e",
+	"zeta eta theta",
+	"iota",
+];
+
+export class Random {
+	state: number;
+	constructor(seed: number) {
+		this.state = seed;
+	}
+
+	next(): number {
+		this.state = (this.state + 0x6d2b79f5) | 0;
+		let t = this.state;
+		t = Math.imul(t ^ (t >>> 15), t | 1);
+		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	}
+
+	int(max: number): number {
+		return Math.floor(this.next() * (max + 1));
+	}
+
+	pick<T>(items: readonly T[]): T {
+		return items[Math.floor(this.next() * items.length)];
+	}
+}
+
+export type Action =
+	{kind: "class"; id: string; token: string} |
+	{kind: "style"; id: string; property: string; value: string} |
+	{kind: "attribute"; id: string; name: string; value: string} |
+	{kind: "text"; id: string; words: string} |
+	{
+		kind: "insert";
+		parent: string;
+		tag: string;
+		id: string;
+		words: string;
+		before: number;
+	} |
+	{kind: "remove"; id: string} |
+	{kind: "rule"; rule: string};
+
+export function mount(): {dom: TermDOM; terminal: MockProcess} {
+	const terminal = new MockProcess({cols: COLS, rows: ROWS});
+	const dom = new TermDOM({transport: terminal.transport, cellSize: CELL});
+	return {dom, terminal};
+}
+
+// Every element under the root gets an id, so an action can name it.
+export function setUp(document: any, page: Page): void {
+	document.head.innerHTML = page.head;
+	document.body.innerHTML = page.body;
+	let count = 0;
+	for (const element of document.getElementById("root").querySelectorAll("*")) {
+		if (!element.id) {
+			element.id = `k${count++}`;
+		}
+	}
+}
+
+export function choose(
+	document: any,
+	page: Page,
+	random: Random,
+): Action | null {
+	const root = document.getElementById("root");
+	const elements = [...root.querySelectorAll("*")];
+	const element: any = elements.length > 0 ? random.pick(elements) : root;
+	switch (random.int(page.attributes.length > 0 ? 7 : 5)) {
+		case 0:
+			return {kind: "class", id: element.id, token: random.pick(page.classes)};
+		case 1:
+		case 2: {
+			const [property, value] = random.pick(page.styles);
+			return {kind: "style", id: element.id, property, value: value(random)};
+		}
+		case 3:
+			return {kind: "text", id: element.id, words: random.pick(WORDS)};
+		case 4: {
+			const tag = random.pick(["p", "span", "div", "li", "b"]);
+			const id = `x${random.int(9999)}`;
+			const words = random.pick(WORDS);
+			const parent: any = random.pick([root, ...elements]);
+			const before = random.int(parent.childNodes.length);
+			return {kind: "insert", parent: parent.id, tag, id, words, before};
+		}
+		case 5:
+			return element === root ? null : {kind: "remove", id: element.id};
+		case 6: {
+			const [name, value] = random.pick(page.attributes);
+			return {kind: "attribute", id: element.id, name, value: value(random)};
+		}
+		default:
+			return page.rules.length > 0
+				? {kind: "rule", rule: random.pick(page.rules)}
+				: null;
+	}
+}
+
+export function apply(document: any, action: Action): void {
+	switch (action.kind) {
+		case "class":
+			document.getElementById(action.id)?.classList.toggle(action.token);
+			return;
+		case "style":
+			document.getElementById(action.id)?.style
+				.setProperty(action.property, action.value);
+			return;
+		case "attribute":
+			document
+				.getElementById(action.id)
+				?.setAttribute(action.name, action.value);
+			return;
+		case "text": {
+			const element = document.getElementById(action.id);
+			if (!element) {
+				return;
+			}
+			const text = [...element.childNodes].find((node: any) =>
+				node.nodeType === 3 && node.data.trim() !== "",
+			);
+			if (text) {
+				(text as any).data = action.words;
+			} else {
+				element.append(action.words);
+			}
+			return;
+		}
+		case "insert": {
+			const parent = document.getElementById(action.parent);
+			if (!parent || document.getElementById(action.id)) {
+				return;
+			}
+			const added = document.createElement(action.tag);
+			added.id = action.id;
+			added.textContent = action.words;
+			parent.insertBefore(added, parent.childNodes[action.before] ?? null);
+			return;
+		}
+		case "remove":
+			document.getElementById(action.id)?.remove();
+			return;
+		case "rule": {
+			// A rule present is taken out, and one absent is added.
+			const sheet = document.getElementById("sheet");
+			const text: string = sheet.textContent;
+			sheet.textContent = text.includes(action.rule)
+				? text.replace(action.rule, "")
+				: `${text}\n${action.rule}`;
+			return;
+		}
+	}
+}
+
+export function record(
+	page: Page,
+	seed: number,
+	steps: number,
+): Promise<Action[]> {
+	return (async () => {
+		const random = new Random(seed);
+		const {dom} = mount();
+		setUp(dom.document, page);
+		await nextFrame(dom);
+		const actions: Action[] = [];
+		for (let step = 0; step < steps; step++) {
+			const action = choose(dom.document, page, random);
+			if (action) {
+				actions.push(action);
+				apply(dom.document, action);
+			}
+		}
+		dom.dispose();
+		return actions;
+	})();
+}
+
+export function rects(document: any): string[] {
+	return [...document.querySelectorAll("*")].map((element: any) => {
+		const r = element.getBoundingClientRect();
+		return `${element.localName}#${element.id} ${r.x},${r.y} ${r.width}x${r.height}`;
+	});
+}
+
+// A copy of the page's nodes, not its markup, which the parser would
+// rearrange where the changes put an element it would not.
+export async function fresh(
+	page: any,
+): Promise<{screen: string; rects: string[]}> {
+	const {dom, terminal} = mount();
+	dom.document.documentElement.replaceChildren(
+		...[...page.documentElement.childNodes].map((node: any) =>
+			dom.document.importNode(node, true),
+		),
+	);
+	await nextFrame(dom);
+	const result = {
+		screen: terminal.getScreenContents(),
+		rects: rects(dom.document),
+	};
+	dom.dispose();
+	return result;
+}
+
+/**
+ * Where the page, changed a frame at a time, first stops matching the
+ * same page rendered fresh: the actions up to that point and what
+ * differs, or null when it never does.
+ */
+export async function firstMismatch(
+	page: Page,
+	actions: Action[],
+): Promise<string | null> {
+	const {dom, terminal} = mount();
+	setUp(dom.document, page);
+	await nextFrame(dom);
+	for (let index = 0; index < actions.length; index++) {
+		apply(dom.document, actions[index]);
+		await nextFrame(dom);
+		const expected = await fresh(dom.document);
+		const got = rects(dom.document);
+		const screen = terminal.getScreenContents();
+		const differences: string[] = [];
+		for (let i = 0; i < Math.max(got.length, expected.rects.length); i++) {
+			if (got[i] !== expected.rects[i]) {
+				differences.push(`rect ${got[i]}, fresh ${expected.rects[i]}`);
+			}
+		}
+		const rows = screen.split("\n");
+		const freshRows = expected.screen.split("\n");
+		for (let i = 0; i < rows.length; i++) {
+			if (rows[i] !== freshRows[i]) {
+				differences.push(
+					`row ${i} ${JSON.stringify(rows[i])}, fresh ${
+						JSON.stringify(freshRows[i])
+					}`,
+				);
+			}
+		}
+		if (differences.length > 0) {
+			dom.dispose();
+			return `${page.name} after ${
+				JSON.stringify(actions.slice(0, index + 1))
+			}\n${differences.slice(0, 12).join("\n")}`;
+		}
+	}
+	dom.dispose();
+	return null;
+}
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index fe63695b..5e4f44c4 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -11,222 +11,39 @@
  */
 import {expect, test} from "@b9g/libuild/test";
 
-import {TermDOM} from "../src/index.ts";
-import {MockProcess, nextFrame} from "./test-utils.ts";
-
-const COLS = 60;
-const ROWS = 30;
-const CELL = {width: 7, height: 15};
-
-const HEAD = `<style>
-	.row { display: flex; gap: 1ch }
-	.col { display: flex; flex-direction: column }
-	.grid { display: grid; grid-template-columns: 1fr 2fr }
-	.box { border: 1px solid; padding: 0 3px }
-	.bg { background-color: rgb(20, 40, 60) }
-	.b { font-weight: bold }
-	.hide { display: none }
-	.wide { width: 60% }
-	.m { margin-left: 10px }
-	.abs { position: absolute; top: 20px; right: 3px }
-	.ib { display: inline-block; border: 1px solid }
-	.center { text-align: center }
-	.n { counter-increment: n }
-	.n::before { content: counter(n) ". " }
-</style>`;
-
-const BODY = `<div id=root style="counter-reset: n">
-	<p id=p0>Some text <span id=s0>span</span> and more words here</p>
-	<div id=f class=row><div id=f0 class=box>one</div><div id=f1>two words</div><div id=f2 class=bg>three</div></div>
-	<div id=g class=grid><div id=g0>cell a</div><div id=g1>cell b has longer text that may wrap</div></div>
-	<ol id=l><li id=l0>first</li><li id=l1 class=n>second</li><li id=l2>third</li></ol>
-	<table id=t><tr><td id=t0 class=box>x</td><td id=t1>y y</td></tr></table>
-	<p id=p1>inline <span id=ib class=ib>block</span> tail of the line</p>
-	<div id=c class=col><div id=c0>above</div><div id=c1 class=n>below</div></div>
-</div>`;
-
-const CLASSES = [
-	"row",
-	"col",
-	"grid",
-	"box",
-	"bg",
-	"b",
-	"hide",
-	"wide",
-	"m",
-	"abs",
-	"ib",
-	"center",
-	"n",
-];
-
-const STYLES: Array<[string, (pick: Random) => string]> = [
-	["margin-left", (r) => `${r.int(25)}px`],
-	["margin-top", (r) => `${r.int(40)}px`],
-	["padding-top", (r) => `${r.int(30)}px`],
-	["width", (r) => `${10 + r.int(90)}%`],
-	["width", (r) => `${20 + r.int(300)}px`],
-	["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
-	["background-color", (r) => r.pick(["transparent", "rgb(90, 0, 0)"])],
-	[
-		"display",
-		(r) => r.pick(["block", "none", "flex", "inline-block", "inline"]),
-	],
-	["order", (r) => String(r.int(3))],
-	["flex-direction", (r) => r.pick(["row", "column", "row-reverse"])],
-	["text-align", (r) => r.pick(["left", "center", "right"])],
-	["position", (r) => r.pick(["static", "relative", "absolute"])],
-	["top", (r) => `${r.int(30)}px`],
-	["visibility", (r) => r.pick(["visible", "hidden"])],
-	["border", (r) => r.pick(["none", "1px solid", "1px double"])],
-	["z-index", (r) => String(r.int(3))],
-	["outline", (r) => r.pick(["none", "1px solid"])],
-];
-
-const WORDS = ["alpha", "be", "gamma delta", "e", "zeta eta theta", "iota"];
-
-class Random {
-	state: number;
-	constructor(seed: number) {
-		this.state = seed;
-	}
-
-	next(): number {
-		this.state = (this.state + 0x6d2b79f5) | 0;
-		let t = this.state;
-		t = Math.imul(t ^ (t >>> 15), t | 1);
-		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-	}
-
-	int(max: number): number {
-		return Math.floor(this.next() * (max + 1));
-	}
-
-	pick<T>(items: readonly T[]): T {
-		return items[Math.floor(this.next() * items.length)];
-	}
-}
-
-function mount(): {dom: TermDOM; terminal: MockProcess} {
-	const terminal = new MockProcess({cols: COLS, rows: ROWS});
-	const dom = new TermDOM({transport: terminal.transport, cellSize: CELL});
-	return {dom, terminal};
-}
-
-// A change to a random element of the page, described for the report.
-function change(document: any, random: Random): string {
-	const root = document.getElementById("root");
-	const elements = [...root.querySelectorAll("*")];
-	const element: any = elements.length > 0 ? random.pick(elements) : root;
-	const name = element.id || element.localName;
-	switch (random.int(5)) {
-		case 0: {
-			const token = random.pick(CLASSES);
-			element.classList.toggle(token);
-			return `toggle .${token} on ${name}`;
-		}
-		case 1:
-		case 2: {
-			const [property, value] = random.pick(STYLES);
-			const chosen = value(random);
-			element.style.setProperty(property, chosen);
-			return `${name}.style.${property} = ${chosen}`;
-		}
-		case 3: {
-			const text = [...element.childNodes].find((node: any) =>
-				node.nodeType === 3 && node.data.trim() !== "",
+import {
+	firstMismatch,
+	fresh,
+	mount,
+	PAGES,
+	record,
+	rects,
+} from "./fuzz-pages.ts";
+import {nextFrame} from "./test-utils.ts";
+
+const [LAYOUT] = PAGES;
+
+for (const page of PAGES) {
+	for (let seed = 1; seed <= 24; seed++) {
+		test(`seeded changes to the ${page.name} page render as a fresh page does: seed ${seed}`, async () => {
+			expect(await firstMismatch(page, await record(page, seed, 12))).toBe(
+				null,
 			);
-			const words = random.pick(WORDS);
-			if (text !== undefined) {
-				(text as any).data = words;
-				return `${name} text = ${words}`;
-			}
-			element.append(words);
-			return `${name} append text ${words}`;
-		}
-		case 4: {
-			const added = document.createElement(
-				random.pick(["p", "span", "div", "li", "b"]),
-			);
-			added.id = `x${random.int(9999)}`;
-			added.textContent = random.pick(WORDS);
-			const parent: any = random.pick([root, ...elements]);
-			const children = [...parent.childNodes];
-			parent.insertBefore(added, children[random.int(children.length)] ?? null);
-			return `insert ${added.localName}#${added.id} into ${parent.id || parent.localName}`;
-		}
-		default: {
-			if (element === root) {
-				return "nothing";
-			}
-			element.remove();
-			return `remove ${name}`;
-		}
+		});
 	}
 }
 
-function rects(document: any): string[] {
-	return [...document.querySelectorAll("*")].map((element: any) => {
-		const r = element.getBoundingClientRect();
-		return `${element.localName}#${element.id} ${r.x},${r.y} ${r.width}x${r.height}`;
-	});
-}
-
-// A copy of the page's nodes, not its markup, which the parser would
-// rearrange where the changes put an element it would not.
-async function fresh(page: any): Promise<{screen: string; rects: string[]}> {
-	const {dom, terminal} = mount();
-	dom.document.documentElement.replaceChildren(
-		...[...page.documentElement.childNodes].map((node: any) =>
-			dom.document.importNode(node, true),
-		),
-	);
-	await nextFrame(dom);
-	const result = {
-		screen: terminal.getScreenContents(),
-		rects: rects(dom.document),
-	};
-	dom.dispose();
-	return result;
-}
-
-async function run(seed: number, steps: number): Promise<void> {
-	const random = new Random(seed);
-	const {dom, terminal} = mount();
-	dom.document.head.innerHTML = HEAD;
-	dom.document.body.innerHTML = BODY;
-	await nextFrame(dom);
-	const log: string[] = [];
-	for (let step = 0; step < steps; step++) {
-		log.push(change(dom.document, random));
-		await nextFrame(dom);
-		const expected = await fresh(dom.document);
-		const where = `seed ${seed} after:\n  ${log.join("\n  ")}`;
-		expect(`${where}\n${rects(dom.document).join("\n")}`)
-			.toBe(`${where}\n${expected.rects.join("\n")}`);
-		expect(`${where}\n${terminal.getScreenContents()}`)
-			.toBe(`${where}\n${expected.screen}`);
-	}
-	dom.dispose();
-}
-
-for (let seed = 1; seed <= 24; seed++) {
-	test(`seeded changes render as a fresh page does: seed ${seed}`, async () => {
-		await run(seed, 12);
-	});
-}
-
 // Seeds that once found a bug, run as long as they did then: a grid cell
 // rounded again from rounded values (1012, 1066, 1093), restyles inside
 // an inline-block repainting rows counted from its own top (1020, 1193,
-// 1200, 1260), and an inline-block's width its measure did not hear of
+// 1200, 1260), an inline-block's width its measure did not hear of
 // (1481), and a positioned row group zeroed by its table when stray
 // content joined it (1140).
 for (const seed of [1012, 1020, 1066, 1093, 1140, 1193, 1200, 1260, 1481]) {
-	test(`seeded changes render as a fresh page does: seed ${seed}`, async () => {
-		await run(seed, 25);
+	test(`seeded changes to the layout page render as a fresh page does: seed ${seed}`, async () => {
+		expect(await firstMismatch(LAYOUT, await record(LAYOUT, seed, 25))).toBe(
+			null,
+		);
 	});
 }
 
@@ -237,7 +54,7 @@ async function replay(
 	changes: Array<(document: any) => void>,
 ): Promise<void> {
 	const {dom, terminal} = mount();
-	dom.document.head.innerHTML = HEAD;
+	dom.document.head.innerHTML = LAYOUT.head;
 	dom.document.body.innerHTML = html;
 	await nextFrame(dom);
 	for (const [index, apply] of changes.entries()) {
@@ -304,3 +121,15 @@ test("a flex item made an inline-block takes the width it is given", async () =>
 		(document) => document.getElementById("a").style.width = "23%",
 	]);
 });
+
+test("an untouched textarea shows the text children it is given", async () => {
+	await replay("<textarea id=a>area text</textarea>", [
+		(document) => document.getElementById("a").firstChild.data = "alpha",
+		(document) => document.getElementById("a").append(" beta"),
+		(document) => {
+			const span = document.createElement("span");
+			span.textContent = "not its text";
+			document.getElementById("a").prepend(span);
+		},
+	]);
+});
diff --git a/tests/stylesheet.test.ts b/tests/stylesheet.test.ts
index 372fb288..762f077c 100644
--- a/tests/stylesheet.test.ts
+++ b/tests/stylesheet.test.ts
@@ -651,3 +651,21 @@ test("a :has() that reads only down the tree restyles a changed item's ancestors
 		.toBe("rgb(255, 0, 0)");
 	termdom.dispose();
 });
+
+// A sheet can come in inside what is added, a <style> in an added head,
+// and is synced as one added alone. An input beside it once settled the
+// styles before the sheet was read.
+test("a style element inside an added subtree applies its rules", async () => {
+	const terminal = new MockProcess({cols: 40, rows: 10});
+	const dom = new TermDOM({transport: terminal.transport});
+	await nextFrame(dom);
+	const head = dom.document.createElement("head");
+	head.innerHTML = "<style>.w { width: 10px }</style>";
+	const body = dom.document.createElement("body");
+	body.innerHTML = "<div id=d class=w>x</div><input value=v>";
+	dom.document.documentElement.replaceChildren(head, body);
+	await nextFrame(dom);
+	expect(dom.document.getElementById("d")!.getBoundingClientRect().width)
+		.toBe(10);
+	dom.dispose();
+});

From 9f80997d60f93b95f0516b2408a1dfbcb2347aba Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 02:05:48 -0400
Subject: [PATCH 64/99] Type the fuzz pages' value makers

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/fuzz-pages.ts | 97 ++++++++++++++++++++++++++++++---------------
 1 file changed, 65 insertions(+), 32 deletions(-)

diff --git a/tests/fuzz-pages.ts b/tests/fuzz-pages.ts
index 6c034fab..9db4c0cc 100644
--- a/tests/fuzz-pages.ts
+++ b/tests/fuzz-pages.ts
@@ -66,26 +66,42 @@ const LAYOUT: Page = {
 		"n",
 	],
 	styles: [
-		["margin-left", (r) => `${r.int(25)}px`],
-		["margin-top", (r) => `${r.int(40)}px`],
-		["padding-top", (r) => `${r.int(30)}px`],
-		["width", (r) => `${10 + r.int(90)}%`],
-		["width", (r) => `${20 + r.int(300)}px`],
-		["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
-		["background-color", (r) => r.pick(["transparent", "rgb(90, 0, 0)"])],
+		["margin-left", (r: Random): string => `${r.int(25)}px`],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		["padding-top", (r: Random): string => `${r.int(30)}px`],
+		["width", (r: Random): string => `${10 + r.int(90)}%`],
+		["width", (r: Random): string => `${20 + r.int(300)}px`],
+		[
+			"color",
+			(r: Random): string => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`,
+		],
+		[
+			"background-color",
+			(r: Random): string => r.pick(["transparent", "rgb(90, 0, 0)"]),
+		],
 		[
 			"display",
-			(r) => r.pick(["block", "none", "flex", "inline-block", "inline"]),
+			(r: Random): string =>
+				r.pick(["block", "none", "flex", "inline-block", "inline"]),
+		],
+		["order", (r: Random): string => String(r.int(3))],
+		[
+			"flex-direction",
+			(r: Random): string => r.pick(["row", "column", "row-reverse"]),
 		],
-		["order", (r) => String(r.int(3))],
-		["flex-direction", (r) => r.pick(["row", "column", "row-reverse"])],
-		["text-align", (r) => r.pick(["left", "center", "right"])],
-		["position", (r) => r.pick(["static", "relative", "absolute"])],
-		["top", (r) => `${r.int(30)}px`],
-		["visibility", (r) => r.pick(["visible", "hidden"])],
-		["border", (r) => r.pick(["none", "1px solid", "1px double"])],
-		["z-index", (r) => String(r.int(3))],
-		["outline", (r) => r.pick(["none", "1px solid"])],
+		["text-align", (r: Random): string => r.pick(["left", "center", "right"])],
+		[
+			"position",
+			(r: Random): string => r.pick(["static", "relative", "absolute"]),
+		],
+		["top", (r: Random): string => `${r.int(30)}px`],
+		["visibility", (r: Random): string => r.pick(["visible", "hidden"])],
+		[
+			"border",
+			(r: Random): string => r.pick(["none", "1px solid", "1px double"]),
+		],
+		["z-index", (r: Random): string => String(r.int(3))],
+		["outline", (r: Random): string => r.pick(["none", "1px solid"])],
 	],
 	attributes: [],
 	rules: [],
@@ -140,23 +156,40 @@ const FLOW: Page = {
 		"box",
 	],
 	styles: [
-		["height", (r) => `${15 + r.int(90)}px`],
-		["width", (r) => `${30 + r.int(70)}%`],
-		["overflow", (r) => r.pick(["visible", "hidden", "auto"])],
-		["white-space", (r) => r.pick(["normal", "nowrap", "pre", "pre-wrap"])],
-		["direction", (r) => r.pick(["ltr", "rtl"])],
-		["text-transform", (r) => r.pick(["none", "uppercase"])],
-		["grid-column", (r) => r.pick(["auto", "span 2", "1 / 3", "3"])],
-		["display", (r) => r.pick(["block", "contents", "none", "grid", "inline"])],
-		["margin-top", (r) => `${r.int(40)}px`],
-		["color", (r) => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`],
-		["position", (r) => r.pick(["static", "sticky", "fixed"])],
-		["text-indent", (r) => `${r.int(5)}ch`],
+		["height", (r: Random): string => `${15 + r.int(90)}px`],
+		["width", (r: Random): string => `${30 + r.int(70)}%`],
+		["overflow", (r: Random): string => r.pick(["visible", "hidden", "auto"])],
+		[
+			"white-space",
+			(r: Random): string => r.pick(["normal", "nowrap", "pre", "pre-wrap"]),
+		],
+		["direction", (r: Random): string => r.pick(["ltr", "rtl"])],
+		["text-transform", (r: Random): string => r.pick(["none", "uppercase"])],
+		[
+			"grid-column",
+			(r: Random): string => r.pick(["auto", "span 2", "1 / 3", "3"]),
+		],
+		[
+			"display",
+			(r: Random): string =>
+				r.pick(["block", "contents", "none", "grid", "inline"]),
+		],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		[
+			"color",
+			(r: Random): string => `rgb(${r.int(255)}, ${r.int(255)}, ${r.int(255)})`,
+		],
+		["position", (r: Random): string => r.pick(["static", "sticky", "fixed"])],
+		["text-indent", (r: Random): string => `${r.int(5)}ch`],
 	],
 	attributes: [
-		["data-x", (r) => String(r.int(99))],
-		["value", (r) => r.pick(["", "new value", "a much longer field value"])],
-		["rows", (r) => String(1 + r.int(4))],
+		["data-x", (r: Random): string => String(r.int(99))],
+		[
+			"value",
+			(r: Random): string =>
+				r.pick(["", "new value", "a much longer field value"]),
+		],
+		["rows", (r: Random): string => String(1 + r.int(4))],
 	],
 	rules: [
 		".rule-a { color: rgb(200, 0, 0) }",

From 3873c7596f07873f45d75ca64e49c65853e678e8 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 02:16:54 -0400
Subject: [PATCH 65/99] Lay out a positioned row's absolute boxes, and place
 absolute boxes from raw offsets

A table lays its rows and groups out itself, so an absolute box whose
containing block is a positioned row or group was never laid out.

An absolute box's place in its parent subtracts the boxes between, read
from results that a solve that left them alone had rounded, so it landed
a row off when something above moved by a fraction. The raw places are
read instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layoutsolver.ts | 26 +++++++++++++++++++++-----
 tests/incremental.test.ts    | 26 +++++++++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 3a369550..312b7ac2 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -2594,8 +2594,8 @@ function layoutAbsoluteChild(
 			between !== null && between !== node;
 			between = between.parent
 		) {
-			offsetLeft += between.result.left;
-			offsetTop += between.result.top;
+			offsetLeft += getRawOffset(between, "left");
+			offsetTop += getRawOffset(between, "top");
 		}
 		child.result.left -= offsetLeft;
 		child.result.top -= offsetTop;
@@ -3555,9 +3555,15 @@ function layoutTable(
 	}
 
 	// A positioned table or part of one contains the absolute boxes in it,
-	// as any positioned box does.
-	for (const child of getOutOfFlowDescendants(node, false)) {
-		layoutAbsoluteChild(node, child, ownerWidth, ownerHeight);
+	// as any positioned box does. The table lays its groups and rows out
+	// itself, so it lays out theirs too.
+	for (const part of [node, ...groups, ...rows.map((row) => row.node)]) {
+		if (part === null || (part !== node && !isContainingBlock(part.style))) {
+			continue;
+		}
+		for (const child of getOutOfFlowDescendants(part, false)) {
+			layoutAbsoluteChild(part, child, ownerWidth, ownerHeight);
+		}
 	}
 }
 
@@ -6321,6 +6327,16 @@ function roundToGrid(
 	}
 }
 
+// A box's place in its parent as layout last wrote it: the place in
+// result when something placed it in this solve, and otherwise the one
+// kept from before result was rounded.
+function getRawOffset(node: LayoutNode, edge: "left" | "top"): number {
+	if (node.placedDirectly || node.parent?.childrenPlaced) {
+		return edge === "left" ? node.result.left : node.result.top;
+	}
+	return edge === "left" ? node.rawLeft : node.rawTop;
+}
+
 function getContentLeft(node: LayoutNode): number {
 	return node.rawAbsoluteLeft +
 		node.style.border.left +
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 5e4f44c4..a50cd987 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -37,9 +37,22 @@ for (const page of PAGES) {
 // rounded again from rounded values (1012, 1066, 1093), restyles inside
 // an inline-block repainting rows counted from its own top (1020, 1193,
 // 1200, 1260), an inline-block's width its measure did not hear of
-// (1481), and a positioned row group zeroed by its table when stray
-// content joined it (1140).
-for (const seed of [1012, 1020, 1066, 1093, 1140, 1193, 1200, 1260, 1481]) {
+// (1481), a positioned row group zeroed by its table when stray content
+// joined it (1140), a positioned row's absolute cell (1941), and an
+// absolute row placed from rounded offsets (2029).
+for (const seed of [
+	1012,
+	1020,
+	1066,
+	1093,
+	1140,
+	1193,
+	1200,
+	1260,
+	1481,
+	1941,
+	2029,
+]) {
 	test(`seeded changes to the layout page render as a fresh page does: seed ${seed}`, async () => {
 		expect(await firstMismatch(LAYOUT, await record(LAYOUT, seed, 25))).toBe(
 			null,
@@ -133,3 +146,10 @@ test("an untouched textarea shows the text children it is given", async () => {
 		},
 	]);
 });
+
+test("a row made a containing block lays out its positioned cell", async () => {
+	await replay("<table><tr id=r><td>x</td><td id=b>y y</td></tr></table>", [
+		(document) => document.getElementById("b").classList.add("abs"),
+		(document) => document.getElementById("r").style.position = "relative",
+	]);
+});

From 314a18a2c877500e7eef3004cac053ecf8239116 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 03:07:26 -0400
Subject: [PATCH 66/99] Hold every frame's layout to a solve from nothing, and
 measure again by what a measure read

Every test now checks each frame: each box must be where a solve that
forgot every cache would put it. A frame equal to such a solve, changed
by a frame whose invalidation is sound, is equal again, so a missing
invalidation is caught at the frame it happened, wherever any test
reaches it.

The check found that a measure's key was a list of the properties it
was thought to read, and missed line-height. A measure now records the
style values it reads, and a restyle measures again each box that would
read something differently. The key covers what the measure reads by
construction. A box registers as a reader only after its measure has
returned and while the layout still measures it, and leaves with its
reads.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/harness.ts             |   4 +
 src/index.ts                 |   5 +
 src/internal/cssom.ts        |  79 ++++++++++++-
 src/internal/layout.ts       | 210 ++++++++++++++++++++++++++++++++---
 src/internal/layoutsolver.ts |  19 +++-
 tests/test-utils.ts          |   4 +
 6 files changed, 305 insertions(+), 16 deletions(-)

diff --git a/bench/harness.ts b/bench/harness.ts
index 9564e67b..7bd19166 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -20,6 +20,10 @@ const painter = await import(`${root}/src/internal/painter.ts`);
 if (painter.partialFrameCheck !== undefined) {
 	painter.partialFrameCheck.enabled = false;
 }
+const layout = await import(`${root}/src/internal/layout.ts`);
+if (layout.layoutCheck !== undefined) {
+	layout.layoutCheck.enabled = false;
+}
 
 export const TermDOM = index.TermDOM;
 export const installGlobals = index.installGlobals;
diff --git a/src/index.ts b/src/index.ts
index f31264d0..6017f7ca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -84,9 +84,11 @@ import {
 } from "./internal/images.ts";
 import {Input, resolvePendingHover} from "./internal/input.ts";
 import {
+	checkLayoutFromScratch,
 	framePainted,
 	invalidateTextMeasurement,
 	Layout,
+	layoutCheck,
 	takeDamageBands,
 } from "./internal/layout.ts";
 import {
@@ -1600,6 +1602,9 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	runFocusFixup(termDOM.document);
 
 	termDOMSlots.layout.performLayout();
+	if (layoutCheck.enabled) {
+		checkLayoutFromScratch(termDOMSlots.layout);
+	}
 	clampScrollOffsets(termDOM.document);
 
 	revealPendingCaret(termDOM.document);
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index c858ea69..14b7660c 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -342,17 +342,48 @@ const boxModels = new WeakMap<object, CSSValues.BoxModel>();
  * An element's margins, borders and padding, in cells. The same object
  * until the element's style changes, so a caller copies it to change it.
  */
+/**
+ * Called with every style value read while set: the element, what was
+ * read, and the value. A computation that caches its result records what
+ * it read, and is invalidated when any of it reads differently.
+ */
+type StyleReadRecorder = (
+	element: Element,
+	read: string,
+	value: string,
+) => void;
+
+let readRecorder: StyleReadRecorder | null = null;
+
+// A box model is recorded as one read, not the values it is made of, and
+// by the record it is: the same until the element's style changes.
+const BOX_MODEL_READ = "box-model";
+const boxModelIds = new WeakMap<CSSValues.BoxModel, string>();
+let nextBoxModelId = 0;
+
+function getBoxModelId(model: CSSValues.BoxModel): string {
+	let id = boxModelIds.get(model);
+	if (id === undefined) {
+		id = String(nextBoxModelId++);
+		boxModelIds.set(model, id);
+	}
+	return id;
+}
+
 export function getBoxModel(element: Element): CSSValues.BoxModel {
 	const document = ownerDocumentOf(element);
 	const cascade = document ? documentCascades.get(document) : undefined;
 	const key = cascade?.getStyleKey(element) ?? null;
 	let model = key === null ? undefined : boxModels.get(key);
 	if (model === undefined) {
-		model = readBoxModel(element);
+		// Recorded as one read, cached or not, rather than as the values
+		// that make it up.
+		model = recordStyleReads(() => {}, () => readBoxModel(element));
 		if (key !== null) {
 			boxModels.set(key, model);
 		}
 	}
+	readRecorder?.(element, BOX_MODEL_READ, getBoxModelId(model));
 	return model;
 }
 
@@ -3853,6 +3884,44 @@ export function getComputedValue(
 	element: Element,
 	property: string,
 	pseudoElement = "",
+): string {
+	const value = readComputedValue(element, property, pseudoElement);
+	readRecorder?.(
+		element,
+		pseudoElement === "" ? property : `${pseudoElement}|${property}`,
+		value,
+	);
+	return value;
+}
+
+export function recordStyleReads<T>(
+	recorder: StyleReadRecorder,
+	compute: () => T,
+): T {
+	const outer = readRecorder;
+	readRecorder = recorder;
+	try {
+		return compute();
+	} finally {
+		readRecorder = outer;
+	}
+}
+
+/** What a recorded read reads now. */
+export function readStyleAgain(element: Element, read: string): string {
+	if (read === BOX_MODEL_READ) {
+		return getBoxModelId(getBoxModel(element));
+	}
+	const bar = read.indexOf("|");
+	return bar === -1
+		? readComputedValue(element, read, "")
+		: readComputedValue(element, read.slice(bar + 1), read.slice(0, bar));
+}
+
+function readComputedValue(
+	element: Element,
+	property: string,
+	pseudoElement: string,
 ): string {
 	// A pseudo-element node's style is its host's declaration for the
 	// pseudo-element it fills. It matches no selector of its own.
@@ -8428,6 +8497,14 @@ function recordRestyle(
 	dropped: Slots<ComputedStyleDeclaration> | undefined,
 	hadPseudoStyles: boolean,
 ): void {
+	cascade.layout.restyledSinceLayout.add(element);
+	// Past this many, the next frame repaints whole rather than compare
+	// them, and a document that never paints keeps no more.
+	if (cascade.layout.restyledForPaint.size >= 256) {
+		cascade.layout.restyledForPaint.clear();
+		cascade.layout.invalidateFrame();
+		return;
+	}
 	if (!cascade.layout.restyledForPaint.has(element)) {
 		cascade.layout.restyledForPaint.set(
 			element,
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index c659ce34..cca67eed 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -13,6 +13,8 @@ import {
 	getTabSize,
 	getUsedOverflow,
 	hasLayoutOrPaintContainment,
+	readStyleAgain,
+	recordStyleReads,
 	toCellBorder,
 	toCellLength,
 	toWholeCells,
@@ -45,6 +47,7 @@ import {
 	createStyle,
 	type Edge,
 	type FlexDirection,
+	forgetLayout,
 	getChildIndex,
 	getComputedGridTracks,
 	getComputedHeight,
@@ -55,6 +58,7 @@ import {
 	isContainingBlock,
 	type Justify,
 	LayoutNode,
+	type Measure,
 	type PositionType,
 	resolveValue,
 	shareStyleEdges,
@@ -1284,11 +1288,8 @@ function sizeReplacedBox(
 }
 
 // What the run measurer reads beyond the style record: the properties
-// that decide where text breaks and how wide it is, and the size of an
-// inline-block, which its measure reads rather than its record.
+// that decide where text breaks and how wide it is.
 const MEASURE_PROPERTIES = [
-	"width",
-	"height",
 	"white-space",
 	"direction",
 	"word-break",
@@ -1854,6 +1855,7 @@ function dropLayoutNode(layout: Layout, node: Node): void {
 		layoutNode.removeChild(layoutNode.children[0]);
 	}
 	layout.measureNodes.delete(layoutNode);
+	forgetReads(layoutNode);
 	untrackNode(layout, node);
 }
 
@@ -1883,6 +1885,7 @@ function dropAnonymousBox(layout: Layout, box: Box): void {
 	}
 	layoutNode.parent?.removeChild(layoutNode);
 	layout.measureNodes.delete(layoutNode);
+	forgetReads(layoutNode);
 	layout.anonymousBoxes.delete(layoutNode);
 	layoutNode.owner = null;
 }
@@ -2008,8 +2011,12 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 				if (styledFrom) {
 					styleLayoutNode(styledFrom, layoutNode, layout.positionedElements);
 				}
-				layoutNode.measure = (width, widthSpace, placing, left) =>
-					measureInlineRun(layout, entry, width, widthSpace, placing, left);
+				layoutNode.measure = recordReads(
+					layout,
+					layoutNode,
+					(width, widthSpace, placing, left) =>
+						measureInlineRun(layout, entry, width, widthSpace, placing, left),
+				);
 				layout.measureNodes.add(layoutNode);
 				layout.anonymousBoxes.set(layoutNode, entry);
 				layoutNode.owner = entry.head;
@@ -2205,6 +2212,7 @@ function addNode(
 		if (stale && stale.parent === parentLayoutNode) {
 			parentLayoutNode.removeChild(stale);
 			layout.measureNodes.delete(stale);
+			forgetReads(stale);
 			untrackNode(layout, node);
 		}
 		return;
@@ -2315,18 +2323,19 @@ function addElementNode(
 		return;
 	} else if (isReplacedBox(element)) {
 		layoutNode.measuresText = false;
-		layoutNode.measure = (width, widthSpace) =>
-			measureReplaced(element, width, widthSpace);
+		layoutNode.measure = recordReads(layout, layoutNode, (width, widthSpace) =>
+			measureReplaced(element, width, widthSpace),
+		);
 		layout.measureNodes.add(layoutNode);
 		if (parentLayoutNode) {
 			placeChild(parentLayoutNode, layoutNode, flexIndex);
 		}
 		return;
 	} else if (isMathRoot(element)) {
-		layoutNode.measure = () => {
+		layoutNode.measure = recordReads(layout, layoutNode, () => {
 			const box = measureMath(layout, element);
 			return {width: box.width, height: box.height};
-		};
+		});
 		layout.measureNodes.add(layoutNode);
 		if (parentLayoutNode) {
 			placeChild(parentLayoutNode, layoutNode, flexIndex);
@@ -2334,8 +2343,12 @@ function addElementNode(
 		return;
 	} else if (asRun) {
 		const box = getPrincipalBox(layout, element);
-		layoutNode.measure = (width, widthSpace, placing, left) =>
-			measureInlineRun(layout, box, width, widthSpace, placing, left);
+		layoutNode.measure = recordReads(
+			layout,
+			layoutNode,
+			(width, widthSpace, placing, left) =>
+				measureInlineRun(layout, box, width, widthSpace, placing, left),
+		);
 		layout.measureNodes.add(layoutNode);
 
 		if (layoutNode && parentLayoutNode) {
@@ -2418,8 +2431,12 @@ function addTextNode(
 	}
 
 	const own = getPrincipalBox(layout, text);
-	layoutNode.measure = (width, widthSpace, placing, left) =>
-		measureInlineRun(layout, own, width, widthSpace, placing, left);
+	layoutNode.measure = recordReads(
+		layout,
+		layoutNode,
+		(width, widthSpace, placing, left) =>
+			measureInlineRun(layout, own, width, widthSpace, placing, left),
+	);
 	layout.measureNodes.add(layoutNode);
 
 	insertChild(parentLayoutNode, layoutNode, parentLayoutNode.children.length);
@@ -2732,6 +2749,7 @@ function untrackNode(layout: Layout, domNode: Node): void {
 	const layoutNode = layout.nodeMap.get(domNode);
 	if (layoutNode) {
 		layoutNode.owner = null;
+		forgetReads(layoutNode);
 	}
 	// The lines are the product of the layout node that is being removed,
 	// and would describe a box that no longer exists.
@@ -2894,6 +2912,7 @@ function invalidateNode(layout: Layout, node: Node): void {
 
 			if (!node.isConnected) {
 				layout.measureNodes.delete(layoutNode);
+				forgetReads(layoutNode);
 				untrackNode(layout, node);
 			} else {
 				// Kept for performLayout's re-add sweep, but restyled. A
@@ -5420,6 +5439,9 @@ export class Layout {
 	// Elements whose style changed with no layout change, and whether the
 	// selection moved. Their rows are found once layout is current.
 	restyledForPaint: Map<Element, object | null>;
+	// Every element restyled since the last layout, for the measures that
+	// read it.
+	restyledSinceLayout: Set<Element>;
 	// Boxes whose own formatting context went stale, so that their measure,
 	// which lays it out, is answered again.
 	staleHosts: Set<Element>;
@@ -5435,6 +5457,7 @@ export class Layout {
 		this.wholeDamage = true;
 		this.collecting = false;
 		this.restyledForPaint = new Map();
+		this.restyledSinceLayout = new Set();
 		this.staleHosts = new Set();
 		this.selectionMoved = false;
 		this.selectionRows = null;
@@ -6515,6 +6538,78 @@ function paintsOwnBox(layout: Layout, node: LayoutNode): boolean {
 		getComputedValue(element, "display") === "list-item";
 }
 
+/**
+ * Checks each frame's layout against a solve from nothing, for tests:
+ * every box where a solve that forgot every cache would place it. Run at
+ * every frame, not every solve, since a change that wrongly asks for no
+ * solve leaves the last one standing. Set, a box placed elsewhere throws,
+ * naming the boxes.
+ */
+export const layoutCheck = {enabled: false, checked: 0};
+
+// Every box of the document's tree and of the formatting contexts boxes
+// in it lay out for themselves.
+function forEachLayoutNode(
+	layout: Layout,
+	visit: (node: LayoutNode) => void,
+): void {
+	const walk = (node: LayoutNode): void => {
+		visit(node);
+		for (const child of node.children) {
+			walk(child);
+		}
+		const owner = node.owner as Node | null;
+		if (owner !== null && nodeTypeOf(owner) === owner.ELEMENT_NODE) {
+			const context = layout.boxes.get(owner as Element)
+				?.independentFormattingContext;
+			if (context) {
+				walk(context);
+			}
+		}
+	};
+	walk(layout.initialBlock);
+}
+
+function describeLayoutNode(node: LayoutNode): string {
+	const owner = node.owner as {
+		id?: string;
+		localName?: string;
+		nodeName?: string;
+	} | null;
+	const name = owner === null
+		? "anonymous"
+		: owner.id ? `#${owner.id}` : (owner.localName ?? owner.nodeName ?? "?");
+	const {left, top, width, height} = node.result;
+	return `${name} ${left},${top} ${width}x${height}`;
+}
+
+export function checkLayoutFromScratch(layout: Layout): void {
+	layoutCheck.checked++;
+	const before = new Map<LayoutNode, string>();
+	forEachLayoutNode(layout, (node) => {
+		before.set(node, describeLayoutNode(node));
+		forgetLayout(node);
+	});
+	const root = layout.initialBlock;
+	root.performLayout(root.style.width.value, root.style.height.value);
+	computePaintExtents(layout, root, 0, 0);
+	const differences: string[] = [];
+	forEachLayoutNode(layout, (node) => {
+		const was = before.get(node);
+		const now = describeLayoutNode(node);
+		if (was !== now) {
+			differences.push(`${was ?? "(new)"} -> ${now}`);
+		}
+	});
+	if (differences.length > 0) {
+		throw new Error(
+			`A solve differs from one from nothing at ${
+				differences.slice(0, 8).join(", ")
+			}`,
+		);
+	}
+}
+
 // A box whose own formatting context went stale lays it out again in its
 // measure, which is what is invalidated.
 function flushStaleHosts(layout: Layout): void {
@@ -7051,6 +7146,7 @@ function pruneDisconnectedNodes(layout: Layout): void {
 		}
 
 		layout.measureNodes.delete(layoutNode);
+		forgetReads(layoutNode);
 		untrackNode(layout, node);
 		layout.invalidatedNodes.delete(node);
 	}
@@ -7061,7 +7157,93 @@ function pruneDisconnectedNodes(layout: Layout): void {
 // now generates is derived where every box is derived.
 // Measures are dropped after every restyle has dropped its enumerations,
 // as handleMutations does with records.
+// The style values each box's measure last read, by the element read,
+// and the boxes that read each element. A measure's result is a function
+// of what it read, so it stands until one of those reads differently.
+const measureReads =
+	new WeakMap<LayoutNode, Map<Element, Map<string, string>>>();
+const measureReaders = new WeakMap<Element, Set<LayoutNode>>();
+
+// The readers are registered once the measure has returned, and only
+// while the layout still measures the box: a measure can drop its own box
+// on the way, and a reader dropped would be held by every element it read.
+function recordReads(
+	layout: Layout,
+	node: LayoutNode,
+	measure: Measure,
+): Measure {
+	return (width, widthSpace, placing, left) => {
+		const reads = new Map<Element, Map<string, string>>();
+		// Reads come in runs on one element.
+		let lastElement: Element | null = null;
+		let lastReads: Map<string, string> | undefined;
+		const size = recordStyleReads((element, read, value) => {
+			if (element !== lastElement) {
+				lastElement = element;
+				lastReads = reads.get(element);
+				if (lastReads === undefined) {
+					lastReads = new Map();
+					reads.set(element, lastReads);
+				}
+			}
+			lastReads!.set(read, value);
+		}, () => measure(width, widthSpace, placing, left));
+		forgetReads(node);
+		if (layout.measureNodes.has(node)) {
+			for (const element of reads.keys()) {
+				let readers = measureReaders.get(element);
+				if (readers === undefined) {
+					readers = new Set();
+					measureReaders.set(element, readers);
+				}
+				readers.add(node);
+			}
+			measureReads.set(node, reads);
+		}
+		return size;
+	};
+}
+
+// A box that leaves takes its reads with it, so no element it read keeps
+// it.
+function forgetReads(node: LayoutNode): void {
+	for (const element of measureReads.get(node)?.keys() ?? []) {
+		measureReaders.get(element)?.delete(node);
+	}
+	measureReads.delete(node);
+}
+
+// Every measure that read the element and would read it differently now
+// measures again.
+function invalidateMeasureReaders(element: Element): void {
+	const readers = measureReaders.get(element);
+	if (readers === undefined) {
+		return;
+	}
+	for (const node of readers) {
+		const reads = measureReads.get(node)?.get(element);
+		if (reads === undefined) {
+			readers.delete(node);
+			continue;
+		}
+		for (const [read, value] of reads) {
+			if (readStyleAgain(element, read) !== value) {
+				node.invalidate();
+				break;
+			}
+		}
+	}
+}
+
 function applyRestyles(layout: Layout): void {
+	// What a measure read is checked first, whatever the restyle changed,
+	// a property the cascade calls paint-only included.
+	for (const element of layout.restyledSinceLayout) {
+		if (flatIsConnected(element)) {
+			invalidateMeasureReaders(element);
+		}
+	}
+	layout.restyledSinceLayout.clear();
 	const measured = new Set<Element>();
 	while (layout.restyled.size > 0) {
 		const restyled = [...layout.restyled];
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 312b7ac2..a95b0238 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -87,7 +87,7 @@ export interface Size {
 // left is the absolute left edge of the content box, unrounded, as the
 // box was last placed, so text can break against the whole columns it is
 // drawn across. NaN before the box is first placed.
-type Measure = (
+export type Measure = (
 	width: number,
 	widthSpace: AvailableSpace,
 	placing: boolean,
@@ -686,6 +686,23 @@ export class LayoutNode {
 	}
 }
 
+/**
+ * Forgets what the node remembers between solves: its cached results,
+ * the places it was rounded and measured at. A solve after this is a
+ * solve from nothing.
+ */
+export function forgetLayout(node: LayoutNode): void {
+	node.stale = true;
+	node.cachedLayout = null;
+	node.cachedSizes = null;
+	node.gridLeft = NaN;
+	node.gridTop = NaN;
+	node.settled = false;
+	node.rawAbsoluteLeft = NaN;
+	node.measuredWidth = NaN;
+	node.measured = null;
+}
+
 export function insertChild(
 	layoutNode: LayoutNode,
 	child: LayoutNode,
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 118635f2..4182ea8d 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -20,12 +20,16 @@ import {
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
+import {layoutCheck} from "../src/internal/layout.ts";
 import {partialFrameCheck} from "../src/internal/painter.ts";
 import {getStringWidth} from "../src/internal/text.ts";
 
 // A frame that repaints only the rows that changed must match one painted
 // whole, and every test's frames are held to that.
 partialFrameCheck.enabled = true;
+// And every solve must place each box where a solve that forgot every
+// cache would.
+layoutCheck.enabled = true;
 
 const {Terminal} = xtermPkg;
 type Terminal = InstanceType<typeof Terminal>;

From 5d71c365005fe41cd0e2b78cfe2f6ede378f0900 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 03:12:38 -0400
Subject: [PATCH 67/99] Check each frame's layout against boxes derived again
 from nothing

The check now derives every box again, styles it again and solves with
nothing remembered, and compares every element's rect, so a stale box
tree, run or style record is caught as a stale solve is. The frame's own
damage stands, so the check repaints nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 60 ++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index cca67eed..1ceae261 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6570,41 +6570,45 @@ function forEachLayoutNode(
 	walk(layout.initialBlock);
 }
 
-function describeLayoutNode(node: LayoutNode): string {
-	const owner = node.owner as {
-		id?: string;
-		localName?: string;
-		nodeName?: string;
-	} | null;
-	const name = owner === null
-		? "anonymous"
-		: owner.id ? `#${owner.id}` : (owner.localName ?? owner.nodeName ?? "?");
-	const {left, top, width, height} = node.result;
-	return `${name} ${left},${top} ${width}x${height}`;
-}
-
 export function checkLayoutFromScratch(layout: Layout): void {
 	layoutCheck.checked++;
-	const before = new Map<LayoutNode, string>();
-	forEachLayoutNode(layout, (node) => {
-		before.set(node, describeLayoutNode(node));
-		forgetLayout(node);
+	const document = layout.window.document;
+	const elements = [...document.querySelectorAll("*")] as Element[];
+	const describe = (): string[] => elements.map((element) => {
+		const rect = layout.getRect(element);
+		return rect === null
+			? "none"
+			: `${rect.x},${rect.y} ${rect.width}x${rect.height}`;
 	});
-	const root = layout.initialBlock;
-	root.performLayout(root.style.width.value, root.style.height.value);
-	computePaintExtents(layout, root, 0, 0);
+	const before = describe();
+	// The frame's own damage stands: the check repaints nothing.
+	const damage = [...layout.damage];
+	const wholeDamage = layout.wholeDamage;
+	const geometryMoved = layout.geometryMoved;
+	// Every box derived again and styled again, then solved with nothing
+	// remembered.
+	layout.invalidate();
+	forEachLayoutNode(layout, forgetLayout);
+	layout.performLayout();
+	layout.damage = damage;
+	layout.wholeDamage = wholeDamage;
+	layout.geometryMoved = geometryMoved;
+	const after = describe();
 	const differences: string[] = [];
-	forEachLayoutNode(layout, (node) => {
-		const was = before.get(node);
-		const now = describeLayoutNode(node);
-		if (was !== now) {
-			differences.push(`${was ?? "(new)"} -> ${now}`);
+	for (let index = 0; index < elements.length; index++) {
+		if (before[index] !== after[index]) {
+			const element = elements[index];
+			differences.push(
+				`${element.localName}${element.id ? `#${element.id}` : ""} ${
+					before[index]
+				}, from nothing ${after[index]}`,
+			);
 		}
-	});
+	}
 	if (differences.length > 0) {
 		throw new Error(
-			`A solve differs from one from nothing at ${
-				differences.slice(0, 8).join(", ")
+			`A layout differs from one from nothing at ${
+				differences.slice(0, 8).join("; ")
 			}`,
 		);
 	}

From 9c1d4899765b8476c42cfc536742350d5f639280 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 03:21:36 -0400
Subject: [PATCH 68/99] Check each frame's styles against styles resolved from
 nothing

Every value an element's cached style has served must be what the
cascade resolves with every cache dropped, shared tables included.
The caches are put back after, so the check observes and changes
nothing a page or a test could see.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bench/harness.ts      |  4 +++
 src/index.ts          | 11 +++++++-
 src/internal/cssom.ts | 66 +++++++++++++++++++++++++++++++++++++++++++
 tests/test-utils.ts   |  4 +++
 4 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/bench/harness.ts b/bench/harness.ts
index 7bd19166..23c27ee3 100644
--- a/bench/harness.ts
+++ b/bench/harness.ts
@@ -20,6 +20,10 @@ const painter = await import(`${root}/src/internal/painter.ts`);
 if (painter.partialFrameCheck !== undefined) {
 	painter.partialFrameCheck.enabled = false;
 }
+const cssom = await import(`${root}/src/internal/cssom.ts`);
+if (cssom.styleCheck !== undefined) {
+	cssom.styleCheck.enabled = false;
+}
 const layout = await import(`${root}/src/internal/layout.ts`);
 if (layout.layoutCheck !== undefined) {
 	layout.layoutCheck.enabled = false;
diff --git a/src/index.ts b/src/index.ts
index 6017f7ca..9618efca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,13 @@
 import "./internal/inspector.ts";
 
 import type {CanvasCellGridContext} from "./internal/canvas.ts";
-import {Cascade, dispose, hoverRulesExist} from "./internal/cssom.ts";
+import {
+	Cascade,
+	checkStylesFromScratch,
+	dispose,
+	hoverRulesExist,
+	styleCheck,
+} from "./internal/cssom.ts";
 import {
 	applyMutations,
 	attachDocument,
@@ -1601,6 +1607,9 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	applyMutations(termDOM.document);
 	runFocusFixup(termDOM.document);
 
+	if (styleCheck.enabled) {
+		checkStylesFromScratch(termDOMSlots.cascade);
+	}
 	termDOMSlots.layout.performLayout();
 	if (layoutCheck.enabled) {
 		checkLayoutFromScratch(termDOMSlots.layout);
diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 14b7660c..69085ef1 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -7378,6 +7378,72 @@ function flushCascadeStyle(cascade: Cascade): void {
 	}
 }
 
+/**
+ * Checks each frame's styles against styles resolved from nothing, for
+ * tests: every value an element's cached style has served must be what
+ * the cascade resolves with every cache dropped. Set, a value served
+ * otherwise throws, naming it.
+ */
+export const styleCheck = {enabled: false, checked: 0};
+
+export function checkStylesFromScratch(cascade: Cascade): void {
+	styleCheck.checked++;
+	const elements: Element[] =
+		[...cascade.document.querySelectorAll("*")] as Element[];
+	for (const root of cascade.shadowRoots) {
+		elements.push(...root.querySelectorAll("*") as unknown as Element[]);
+	}
+	const before = new Map<Element, Map<string, string>>();
+	for (const element of elements) {
+		const slots = cascade.computedStyleCache.get(element);
+		// A transition's values move with time, and resolving again would
+		// restart it.
+		if (slots === undefined || cascade.activeTransitions.has(element)) {
+			continue;
+		}
+		const values = new Map<string, string>();
+		for (const property of [...slots.resolved.keys()]) {
+			values.set(property, getComputedValue(element, property));
+		}
+		before.set(element, values);
+	}
+	// The caches are put back after, so the check observes and changes
+	// nothing a page could see.
+	const kept = {
+		currentDeclarations: cascade.currentDeclarations,
+		usedValues: cascade.usedValues,
+		computedStyleCache: cascade.computedStyleCache,
+		hasResults: cascade.hasResults,
+		pseudoElementStyleCache: cascade.pseudoElementStyleCache,
+		counterScopes: cascade.counterScopes,
+		sharedRoot: cascade.sharedRoot,
+	};
+	dropCache(cascade);
+	cascade.sharedRoot = new Map();
+	const differences: string[] = [];
+	for (const [element, values] of before) {
+		for (const [property, value] of values) {
+			const now = getComputedValue(element, property);
+			if (now !== value) {
+				differences.push(
+					`${element.localName}${element.id ? `#${element.id}` : ""} ` +
+						`${property} ${JSON.stringify(value)}, from nothing ${
+							JSON.stringify(now)
+						}`,
+				);
+			}
+		}
+	}
+	Object.assign(cascade, kept);
+	if (differences.length > 0) {
+		throw new Error(
+			`A style differs from one from nothing at ${
+				differences.slice(0, 8).join("; ")
+			}`,
+		);
+	}
+}
+
 function dropCache(cascade: Cascade): void {
 	// Every computed style ever handed out re-resolves on its next read.
 	cascade.currentDeclarations = new WeakSet<object>();
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 4182ea8d..91bc79ea 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -20,6 +20,7 @@ import {
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
+import {styleCheck} from "../src/internal/cssom.ts";
 import {layoutCheck} from "../src/internal/layout.ts";
 import {partialFrameCheck} from "../src/internal/painter.ts";
 import {getStringWidth} from "../src/internal/text.ts";
@@ -30,6 +31,9 @@ partialFrameCheck.enabled = true;
 // And every solve must place each box where a solve that forgot every
 // cache would.
 layoutCheck.enabled = true;
+// And every style value served must be what the cascade resolves with
+// every cache dropped.
+styleCheck.enabled = true;
 
 const {Terminal} = xtermPkg;
 type Terminal = InstanceType<typeof Terminal>;

From 2772671187c7389d0046330dc90a06d772954f5c Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 03:22:37 -0400
Subject: [PATCH 69/99] Sort the test utilities' imports

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/test-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 91bc79ea..509ea939 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -12,6 +12,7 @@ import {
 	type TerminalTransport,
 	transportFromProcess,
 } from "../src/index.ts";
+import {styleCheck} from "../src/internal/cssom.ts";
 import {framePainted} from "../src/internal/dom.ts";
 import type {ColorDepth} from "../src/internal/exchange.ts";
 import {
@@ -20,7 +21,6 @@ import {
 	endFrame,
 	Framebuffer,
 } from "../src/internal/framebuffer.ts";
-import {styleCheck} from "../src/internal/cssom.ts";
 import {layoutCheck} from "../src/internal/layout.ts";
 import {partialFrameCheck} from "../src/internal/painter.ts";
 import {getStringWidth} from "../src/internal/text.ts";

From 61b305fbd5777e4c04997d227f641f030cdd4c5d Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 03:35:51 -0400
Subject: [PATCH 70/99] Keep the grid in a record of its own, so layout never
 reads a rounded value

roundToGrid rounded layout's results in place, and everything layout
read afterwards might be a value it wrote or one rounded from it. The
solver tracked which with flags, and three bugs came from a read that
got the other kind. Rounding now writes a separate grid record that
paint, rects and extents read, and layout reads only the results it
writes. The flags and the raw copies go. A static position, worked out
while the solve runs, reads layout's own results.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts       |  59 ++++++++++---------
 src/internal/layoutsolver.ts | 108 ++++++++++-------------------------
 src/internal/painter.ts      |   4 +-
 tests/flex.test.ts           |   4 +-
 4 files changed, 66 insertions(+), 109 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 1ceae261..ba9de56f 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1067,8 +1067,8 @@ function computePaintExtents(
 	settled = false,
 	fixed = false,
 ): Extent {
-	const top = originTop + node.result.top;
-	const left = originLeft + node.result.left;
+	const top = originTop + node.grid.top;
+	const left = originLeft + node.grid.left;
 	let extent = extents.get(node);
 	if (settled && extent !== undefined && extent.origin === top) {
 		return extent;
@@ -1171,12 +1171,12 @@ function computePaintExtents(
 						? null
 						: Math.max(
 							scrollRight,
-							child.result.left + childExtent.overflowRight,
+							child.grid.left + childExtent.overflowRight,
 						);
 			}
 			scrollBottom = Math.max(
 				scrollBottom,
-				child.result.top + childExtent.overflowBottom,
+				child.grid.top + childExtent.overflowBottom,
 			);
 		}
 		if (
@@ -1196,8 +1196,8 @@ function computePaintExtents(
 			child.style.displayType !== "none" &&
 			child.style.positionType !== "fixed"
 		) {
-			right = Math.max(right, child.result.left + childExtent.overflowRight);
-			bottom = Math.max(bottom, child.result.top + childExtent.overflowBottom);
+			right = Math.max(right, child.grid.left + childExtent.overflowRight);
+			bottom = Math.max(bottom, child.grid.top + childExtent.overflowBottom);
 		}
 	}
 	extent.origin = top;
@@ -4769,8 +4769,8 @@ function getStickyShift(
 	let y = 0;
 	let scroller: LayoutNode | null = null;
 	for (let current = node; current.parent !== null; current = current.parent) {
-		x += current.result.left;
-		y += current.result.top;
+		x += current.grid.left;
+		y += current.grid.top;
 		if (current !== node && current.style.positionType === "sticky") {
 			const shift = getStickyShift(layout, current);
 			x += shift.x;
@@ -4789,7 +4789,7 @@ function getStickyShift(
 		// scrollY is CSS pixels: a whole number of rows, each a cell tall.
 		const window = layout.window;
 		portTop = window.scrollY / getCellSize(window.document).height;
-		portWidth = layout.initialBlock.result.width;
+		portWidth = layout.initialBlock.grid.width;
 		portHeight = layout.initialBlock.style.height.value;
 	} else {
 		const element = scroller.owner as Element;
@@ -4797,26 +4797,26 @@ function getStickyShift(
 		portLeft = (box.borderLeftWidth || 0) + getScrollOffset(element, "left");
 		portTop = (box.borderTopWidth || 0) + getScrollOffset(element, "top");
 		portWidth =
-			scroller.result.width -
+			scroller.grid.width -
 			(box.borderLeftWidth || 0) -
 			(box.borderRightWidth || 0);
 		portHeight =
-			scroller.result.height -
+			scroller.grid.height -
 			(box.borderTopWidth || 0) -
 			(box.borderBottomWidth || 0);
 	}
 	// The box the sticky one flows in bounds the shift: its content box,
 	// or everything it scrolls when it is the scroller itself.
-	const parentX = x - node.result.left;
-	const parentY = y - node.result.top;
+	const parentX = x - node.grid.left;
+	const parentY = y - node.grid.top;
 	const owner = parent.owner as Node | undefined;
 	const edges = owner && nodeTypeOf(owner) === owner.ELEMENT_NODE
 		? getBoxModel(owner as Element)
 		: null;
 	let left = parentX + (edges?.borderLeftWidth || 0);
 	let top = parentY + (edges?.borderTopWidth || 0);
-	let right = parentX + parent.result.width - (edges?.borderRightWidth || 0);
-	let bottom = parentY + parent.result.height - (edges?.borderBottomWidth || 0);
+	let right = parentX + parent.grid.width - (edges?.borderRightWidth || 0);
+	let bottom = parentY + parent.grid.height - (edges?.borderBottomWidth || 0);
 	const scrolled = parent === scroller
 		? layout.getScrollExtent(owner as Element)
 		: null;
@@ -4832,7 +4832,7 @@ function getStickyShift(
 	return {
 		x: stickyShiftAlong(
 			x,
-			node.result.width,
+			node.grid.width,
 			portLeft,
 			portWidth,
 			left,
@@ -4842,7 +4842,7 @@ function getStickyShift(
 		),
 		y: stickyShiftAlong(
 			y,
-			node.result.height,
+			node.grid.height,
 			portTop,
 			portHeight,
 			top,
@@ -4932,10 +4932,12 @@ function getScrollShift(
 
 // Document-space geometry: the layout position under what scrolling has
 // done to it. Applied in this one function so paint, getRect,
-// hit-testing and Range geometry all inherit it at once.
+// hit-testing and Range geometry all inherit it at once. In whole cells,
+// or, for a solve still running, as layout writes it.
 function getAbsolutePosition(
 	layout: Layout,
 	layoutNode: LayoutNode,
+	solving = false,
 ): {x: number; y: number} {
 	let x = 0;
 	let y = 0;
@@ -4944,8 +4946,9 @@ function getAbsolutePosition(
 		current;
 		current = current.parent
 	) {
-		x += current.result.left;
-		y += current.result.top;
+		const place = solving ? current.result : current.grid;
+		x += place.left;
+		y += place.top;
 	}
 	const shift = getScrollShift(layout, layoutNode);
 	return {x: x + shift.x, y: y + shift.y};
@@ -5111,8 +5114,8 @@ function getStaticPosition(
 		return null;
 	}
 
-	const origin = getAbsolutePosition(layout, containerNode);
-	const containingOrigin = getAbsolutePosition(layout, containingBlock);
+	const origin = getAbsolutePosition(layout, containerNode, true);
+	const containingOrigin = getAbsolutePosition(layout, containingBlock, true);
 	const offsetLeft = origin.x - containingOrigin.x;
 	const offsetTop = origin.y - containingOrigin.y;
 	const contentLeft =
@@ -5140,7 +5143,7 @@ function getStaticPosition(
 	if (entry?.kind === "anonymous") {
 		const runNode = entry.layoutNode;
 		if (runNode) {
-			const runOrigin = getAbsolutePosition(layout, runNode);
+			const runOrigin = getAbsolutePosition(layout, runNode, true);
 			const cursor = getInlineCursorBefore(entry, element);
 			return {
 				left: runOrigin.x - containingOrigin.x + cursor.x,
@@ -5166,7 +5169,9 @@ function getStaticPosition(
 			top:
 				offsetTop +
 				previousNode.result.top +
-				getComputedHeight(previousNode) +
+				(!Number.isNaN(previousNode.result.height)
+					? previousNode.result.height
+					: 0) +
 				previousNode.result.margin.bottom,
 		};
 	}
@@ -8346,7 +8351,7 @@ function getDocumentContentHeight(engine: Layout): number {
 function getDocumentOverflowBottom(engine: Layout): number {
 	const root = engine.nodeMap.get(engine.rootElement);
 	const extent = root ? extents.get(root) : undefined;
-	return extent ? Math.ceil(root!.result.top + extent.overflowBottom) : 0;
+	return extent ? Math.ceil(root!.grid.top + extent.overflowBottom) : 0;
 }
 
 function measureScrollExtent(
@@ -8392,9 +8397,9 @@ function measureScrollExtent(
 					child.measure !== null &&
 						getMeasuredLines(layout, child) === undefined
 						? null
-						: Math.max(right, child.result.left + reach.overflowRight);
+						: Math.max(right, child.grid.left + reach.overflowRight);
 			}
-			bottom = Math.max(bottom, child.result.top + reach.overflowBottom);
+			bottom = Math.max(bottom, child.grid.top + reach.overflowBottom);
 		}
 	}
 	const clientWidth = getComputedWidth(layoutNode) - border.left - border.right;
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index a95b0238..155f026f 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -505,26 +505,14 @@ export class LayoutNode {
 	gridTop: number;
 	// Whether the last roundToGrid left the children as they were.
 	settled: boolean;
-	// The box's place and size as layout last wrote them, before
-	// roundToGrid rounded them in result. A box not laid out again keeps
-	// rounded values in result, and rounding those again from another
-	// fraction of a cell is not rounding the true ones, so the grid is
-	// always rounded from these. rawAbsoluteLeft sums the left edges down
-	// from the root, and the text in a box breaks against the columns it
-	// says the box is drawn across.
-	rawLeft: number;
-	rawTop: number;
-	rawWidth: number;
-	rawHeight: number;
+	// The box's place in its parent and its size in whole cells, which
+	// roundToGrid writes from result and nothing else does. Layout reads
+	// only result, which only layout writes, so no value it reads was ever
+	// rounded. rawAbsoluteLeft sums result's left edges down from the root:
+	// the text in a box breaks against the columns it says the box is drawn
+	// across.
+	grid: {left: number; top: number; width: number; height: number};
 	rawAbsoluteLeft: number;
-	// Whether result holds values layout wrote since the last rounding: a
-	// size, once layoutNode has answered for the box, and the children's
-	// places, once the box has laid them out. An ancestor that lays a box
-	// out past its parent, as a containing block does an absolute box,
-	// places it directly.
-	sized: boolean;
-	childrenPlaced: boolean;
-	placedDirectly: boolean;
 	// What the last measure broke the box's text to: the width it was
 	// given, and the Size fields that say whether another edge would break
 	// it differently.
@@ -553,14 +541,8 @@ export class LayoutNode {
 		this.gridLeft = NaN;
 		this.gridTop = NaN;
 		this.settled = false;
-		this.rawLeft = 0;
-		this.rawTop = 0;
-		this.rawWidth = 0;
-		this.rawHeight = 0;
+		this.grid = {left: 0, top: 0, width: 0, height: 0};
 		this.rawAbsoluteLeft = NaN;
-		this.sized = false;
-		this.childrenPlaced = false;
-		this.placedDirectly = false;
 		this.measuredWidth = NaN;
 		this.measured = null;
 		this.lostChild = false;
@@ -664,7 +646,7 @@ export class LayoutNode {
 		// landed. A box placed at a whole cell, as most are, never does.
 		for (let pass = 0; pass < 3; pass++) {
 			const misplaced: LayoutNode[] = [];
-			roundToGrid(this, 0, 0, true, misplaced);
+			roundToGrid(this, 0, 0, misplaced);
 			if (misplaced.length === 0 || pass === 2) {
 				break;
 			}
@@ -744,11 +726,11 @@ export function getComputedGridTracks(
 }
 
 export function getComputedWidth(layoutNode: LayoutNode): number {
-	return !Number.isNaN(layoutNode.result.width) ? layoutNode.result.width : 0;
+	return layoutNode.grid.width;
 }
 
 export function getComputedHeight(layoutNode: LayoutNode): number {
-	return !Number.isNaN(layoutNode.result.height) ? layoutNode.result.height : 0;
+	return layoutNode.grid.height;
 }
 
 // The values and edge records nodes share. Most boxes have one of a few
@@ -2442,7 +2424,6 @@ function layoutAbsoluteChild(
 	area: {left: number; top: number; width: number; height: number} |
 		null = null,
 ): void {
-	child.placedDirectly = true;
 	const parentWidth = node.result.width;
 	const parentHeight = node.result.height;
 
@@ -2611,8 +2592,8 @@ function layoutAbsoluteChild(
 			between !== null && between !== node;
 			between = between.parent
 		) {
-			offsetLeft += getRawOffset(between, "left");
-			offsetTop += getRawOffset(between, "top");
+			offsetLeft += between.result.left;
+			offsetTop += between.result.top;
 		}
 		child.result.left -= offsetLeft;
 		child.result.top -= offsetTop;
@@ -3510,8 +3491,6 @@ function layoutTable(
 
 	for (const group of groups) {
 		group.gridLeft = NaN;
-		group.sized = true;
-		group.childrenPlaced = true;
 		group.result.left = leftPaddingBorder;
 		group.result.width = contentWidth;
 		group.result.top = gridTop;
@@ -3527,8 +3506,6 @@ function layoutTable(
 			return;
 		}
 		row.node.gridLeft = NaN;
-		row.node.sized = true;
-		row.node.childrenPlaced = true;
 		row.node.result.left = rowLeft(row);
 		row.node.result.top = rowTop(row, index);
 		row.node.result.width = contentWidth;
@@ -5956,7 +5933,6 @@ function layoutNode(
 	ownerHeight: number,
 	placing: boolean,
 ): void {
-	node.sized = true;
 	// A container may lay out a descendant without laying out the boxes
 	// between, as a table does its cells, so every box above it rounds again.
 	for (
@@ -6146,7 +6122,6 @@ function layoutNodeImpl(
 	placing: boolean,
 ): void {
 	node.gridLeft = NaN;
-	node.childrenPlaced = true;
 	node.result.padding.left = getPadding(node, "left", ownerWidth);
 	node.result.padding.top = getPadding(node, "top", ownerWidth);
 	node.result.padding.right = getPadding(node, "right", ownerWidth);
@@ -6295,44 +6270,31 @@ function getPadding(node: LayoutNode, edge: Edge, ownerWidth: number): number {
 // keeps the children it rounded before.
 function roundToGrid(
 	node: LayoutNode,
-	rawParentLeft: number,
-	rawParentTop: number,
-	placedByParent: boolean,
+	parentLeft: number,
+	parentTop: number,
 	misplaced: LayoutNode[],
 ): void {
-	if (placedByParent || node.placedDirectly) {
-		node.rawLeft = node.result.left;
-		node.rawTop = node.result.top;
-		node.placedDirectly = false;
-	}
-	if (node.sized) {
-		node.rawWidth = !Number.isNaN(node.result.width) ? node.result.width : 0;
-		node.rawHeight = !Number.isNaN(node.result.height) ? node.result.height : 0;
-		node.sized = false;
-	}
-	const absLeft = rawParentLeft + node.rawLeft;
-	const absTop = rawParentTop + node.rawTop;
+	const absLeft = parentLeft + node.result.left;
+	const absTop = parentTop + node.result.top;
 	node.rawAbsoluteLeft = absLeft;
 	if (node.measure !== null && breaksElsewhere(node)) {
 		misplaced.push(node);
 	}
-	const absRight = absLeft + node.rawWidth;
-	const absBottom = absTop + node.rawHeight;
-
+	const width = !Number.isNaN(node.result.width) ? node.result.width : 0;
+	const height = !Number.isNaN(node.result.height) ? node.result.height : 0;
 	const isText = node.measure !== null && node.measuresText;
 
-	node.result.left =
-		roundValue(absLeft, false, false) - roundValue(rawParentLeft, false, false);
-	node.result.top =
-		roundValue(absTop, false, false) - roundValue(rawParentTop, false, false);
-
-	node.result.width =
-		roundValue(absRight, isText, false) - roundValue(absLeft, isText, false);
-	node.result.height =
-		roundValue(absBottom, isText, false) - roundValue(absTop, isText, false);
+	node.grid.left =
+		roundValue(absLeft, false, false) - roundValue(parentLeft, false, false);
+	node.grid.top =
+		roundValue(absTop, false, false) - roundValue(parentTop, false, false);
+	node.grid.width =
+		roundValue(absLeft + width, isText, false) -
+		roundValue(absLeft, isText, false);
+	node.grid.height =
+		roundValue(absTop + height, isText, false) -
+		roundValue(absTop, isText, false);
 
-	const childrenPlaced = node.childrenPlaced;
-	node.childrenPlaced = false;
 	node.settled = absLeft === node.gridLeft && absTop === node.gridTop;
 	if (node.settled) {
 		return;
@@ -6340,18 +6302,8 @@ function roundToGrid(
 	node.gridLeft = absLeft;
 	node.gridTop = absTop;
 	for (const child of node.children) {
-		roundToGrid(child, absLeft, absTop, childrenPlaced, misplaced);
-	}
-}
-
-// A box's place in its parent as layout last wrote it: the place in
-// result when something placed it in this solve, and otherwise the one
-// kept from before result was rounded.
-function getRawOffset(node: LayoutNode, edge: "left" | "top"): number {
-	if (node.placedDirectly || node.parent?.childrenPlaced) {
-		return edge === "left" ? node.result.left : node.result.top;
+		roundToGrid(child, absLeft, absTop, misplaced);
 	}
-	return edge === "left" ? node.rawLeft : node.rawTop;
 }
 
 function getContentLeft(node: LayoutNode): number {
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 1c478edb..74828332 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1094,8 +1094,8 @@ function paintNodes(
 			continue;
 		}
 		const childOrigin = {
-			x: origin.x + child.result.left,
-			y: origin.y + child.result.top,
+			x: origin.x + child.grid.left,
+			y: origin.y + child.grid.top,
 		};
 		const run = getRun(layout, child);
 		if (run !== null) {
diff --git a/tests/flex.test.ts b/tests/flex.test.ts
index 3ab0417d..825be7f0 100644
--- a/tests/flex.test.ts
+++ b/tests/flex.test.ts
@@ -42,8 +42,8 @@ function rect(n: LayoutNode): {
 	height: number;
 } {
 	return {
-		left: n.result.left,
-		top: n.result.top,
+		left: n.grid.left,
+		top: n.grid.top,
 		width: getComputedWidth(n),
 		height: getComputedHeight(n),
 	};

From a9b8d1acf785c660885395a5a18a222a0ece9d17 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 04:10:37 -0400
Subject: [PATCH 71/99] Keep form controls, shadow children and sticky boxes
 current

An input shows its value again when its value or type attribute
changes. A class change restyles a host's shadow children, since the
flat tree is what a box's children come from. A solve still running
places a box without sticky shifts, which only the finished layout
knows. And while a sticky box is shown, or was, a solve repaints the
whole frame, because its shift moves rows its rect does not.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts     | 17 +++++++++++++++--
 src/internal/dom.ts       |  3 +++
 src/internal/layout.ts    | 34 ++++++++++++++++++++++++++++------
 tests/incremental.test.ts | 12 +++++++++++-
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 69085ef1..28630dbf 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -24,6 +24,7 @@ import {
 	type Node as DOMNode,
 	dropPseudoElement,
 	ensurePseudoElement,
+	flatChildren,
 	flatParentElement,
 	flushLayout,
 	flushStyle,
@@ -73,6 +74,7 @@ import {clearTimeout, queueMicrotask, setTimeout} from "./timers.ts";
 import {
 	attributeOf,
 	containsOf,
+	ELEMENT_NODE,
 	getAttributeList,
 	getDocumentExchange,
 	hasAttributeOf,
@@ -6703,8 +6705,10 @@ export function handleMutations(
 				invalidateElementCaches(cascade, element, notifyLayout);
 				attachPseudoElementsToElement(cascade, element);
 				if (subjects.length > 0) {
-					for (const descendant of element.querySelectorAll("*")) {
-						const parent = descendant.parentElement;
+					// The flat tree, where a box's children are: a host's are
+					// its shadow tree's, a form control's included.
+					for (const descendant of flatDescendants(element)) {
+						const parent = flatParentElement(descendant);
 						if (
 							subjects.some(
 								(anchor) =>
@@ -7260,6 +7264,15 @@ function resolveCounterFunction(
 	);
 }
 
+function *flatDescendants(element: Element): Generator<Element> {
+	for (const child of flatChildren(element)) {
+		if (nodeTypeOf(child) === ELEMENT_NODE) {
+			yield child as Element;
+			yield *flatDescendants(child as Element);
+		}
+	}
+}
+
 function reachesSiblings(
 	cascade: Cascade,
 	element: Element,
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 693fca83..018a5e09 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -18997,6 +18997,8 @@ export class HTMLInputElement extends HTMLElement {
 		const slots = this;
 		if (localName === "value" && !slots.extra.dirtyValue) {
 			slots.extra.value = sanitizeInputValue(ownerOf(this), value ?? "");
+			// What the control shows is its value, which just changed.
+			syncUAShadowTree(ownerOf(this));
 		} else if (localName === "checked" && !slots.extra.dirtyChecked) {
 			setCheckedness(ownerOf(this), value !== null);
 		} else if (
@@ -19005,6 +19007,7 @@ export class HTMLInputElement extends HTMLElement {
 				(localName === "min" || localName === "max"))
 		) {
 			slots.extra.value = sanitizeInputValue(ownerOf(this), slots.extra.value);
+			syncUAShadowTree(ownerOf(this));
 		}
 	}
 
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index ba9de56f..167a86ef 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -4887,17 +4887,20 @@ function stickyShiftAlong(
 // in-flow box is contained by its parent, so every ancestor is in the
 // chain. An absolute box is contained by the nearest positioned or
 // containing ancestor, so the scrollers below that leave it alone. A
-// fixed box is contained by the viewport, so none of them move it.
+// fixed box is contained by the viewport, so none of them move it. A
+// sticky shift comes from the finished layout, so a solve still running
+// goes without it.
 function getScrollShift(
 	layout: Layout,
 	layoutNode: LayoutNode,
+	solving: boolean,
 ): {x: number; y: number} {
 	let x = 0;
 	let y = 0;
 	let current: LayoutNode | null = layoutNode;
 	while (current !== null) {
 		const type: PositionType = current.style.positionType;
-		if (type === "sticky") {
+		if (type === "sticky" && !solving) {
 			const shift = getStickyShift(layout, current);
 			x += shift.x;
 			y += shift.y;
@@ -4950,7 +4953,7 @@ function getAbsolutePosition(
 		x += place.left;
 		y += place.top;
 	}
-	const shift = getScrollShift(layout, layoutNode);
+	const shift = getScrollShift(layout, layoutNode, solving);
 	return {x: x + shift.x, y: y + shift.y};
 }
 
@@ -5451,6 +5454,10 @@ export class Layout {
 	// which lays it out, is answered again.
 	staleHosts: Set<Element>;
 	selectionMoved: boolean;
+	// Whether the last solve found a sticky box. Its shift moves its rows
+	// with no change to its rect, so while one is shown, or was, a solve
+	// repaints whole.
+	shiftedSticky: boolean;
 	// The rows the selection covered at the last frame, from its ends.
 	selectionRows: [number, number] | null;
 
@@ -5465,6 +5472,7 @@ export class Layout {
 		this.restyledSinceLayout = new Set();
 		this.staleHosts = new Set();
 		this.selectionMoved = false;
+		this.shiftedSticky = false;
 		this.selectionRows = null;
 		this.positionedElements = new Set<Element>();
 		this.terminalReordersText = false;
@@ -5645,6 +5653,11 @@ export class Layout {
 			root.performLayout(root.style.width.value, root.style.height.value);
 		}
 		this.staleHosts.clear();
+		const sticky = hasStickyBox(this);
+		if (sticky || this.shiftedSticky) {
+			this.wholeDamage = true;
+		}
+		this.shiftedSticky = sticky;
 		this.collecting = !this.wholeDamage;
 		computePaintExtents(this, root, 0, 0);
 		this.collecting = false;
@@ -6391,6 +6404,15 @@ export function invalidateTextMeasurement(layout: Layout): void {
 	}
 }
 
+function hasStickyBox(layout: Layout): boolean {
+	for (const element of layout.positionedElements) {
+		if (layout.nodeMap.get(element)?.style.positionType === "sticky") {
+			return true;
+		}
+	}
+	return false;
+}
+
 export function framePainted(layout: Layout): void {
 	layout.geometryMoved = false;
 	layout.damage = [];
@@ -6419,7 +6441,7 @@ function addDamage(
 		layout.damage = [];
 		return;
 	}
-	const shift = getScrollShift(layout, node).y;
+	const shift = getScrollShift(layout, node, false).y;
 	layout.damage.push([top + shift, bottom + shift, fixed]);
 }
 
@@ -6735,7 +6757,7 @@ export function takeDamageBands(
 		if (node === undefined || extent === undefined) {
 			return undefined;
 		}
-		const shift = getScrollShift(layout, node).y;
+		const shift = getScrollShift(layout, node, false).y;
 		add(extent.top + shift, extent.bottom + shift, isInFixedBox(node));
 	}
 	if (layout.selectionMoved) {
@@ -6898,7 +6920,7 @@ function getMathNodeRects(
 export function scrolledAncestorRows(layout: Layout, element: Element): number {
 	const layoutNode =
 		layout.nodeMap.get(element) ?? runLayoutNode(layout, element);
-	return layoutNode ? -getScrollShift(layout, layoutNode).y : 0;
+	return layoutNode ? -getScrollShift(layout, layoutNode, false).y : 0;
 }
 
 // The text lets a caller repaint the run in the selection style.
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index a50cd987..4e9f651b 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -21,7 +21,7 @@ import {
 } from "./fuzz-pages.ts";
 import {nextFrame} from "./test-utils.ts";
 
-const [LAYOUT] = PAGES;
+const [LAYOUT, FLOW] = PAGES;
 
 for (const page of PAGES) {
 	for (let seed = 1; seed <= 24; seed++) {
@@ -60,6 +60,16 @@ for (const seed of [
 	});
 }
 
+// The same for the flow page: an input's shown value its attributes set
+// (3006), a class restyling a form control's shadow children (3003), a
+// sticky box asked for its shift in the middle of a solve (3130), and a
+// sticky shift moving rows its rect did not (3134, 3262).
+for (const seed of [3003, 3006, 3130, 3134, 3262]) {
+	test(`seeded changes to the flow page render as a fresh page does: seed ${seed}`, async () => {
+		expect(await firstMismatch(FLOW, await record(FLOW, seed, 25))).toBe(null);
+	});
+}
+
 // Each change, applied a frame apart, against the page drawn fresh after
 // each one.
 async function replay(

From 0047e3c02a013e20c4f4ead620d47c614a657d1e Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 08:20:00 -0400
Subject: [PATCH 72/99] Damage what a box painted, not only where its rect was

A frame repaints the rows a box painted before and the rows it paints
now. Two things moved those rows without the damage pass seeing it. A
box whose style changed as it moved was judged by its new style alone,
so a background it lost left its old rows unrepainted. And a sticky
box's shift moves its rows with no change to its rect, so each solve
now compares every sticky box's rows, shift included, with the last.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts        | 89 ++++++++++++++++++++++++++++-------
 tests/partial-repaint.test.ts | 30 ++++++++++++
 2 files changed, 103 insertions(+), 16 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 167a86ef..e0f5b765 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1087,7 +1087,9 @@ function computePaintExtents(
 				extent.height !== getComputedHeight(node));
 		moved =
 			node.lostChild ||
-			((shifted || resized) && paintsOwnBox(layout, node)) ||
+			((shifted || resized) &&
+				(layout.restyledForPaint.has(node.owner as Element) ||
+					paintsOwnBox(layout, node))) ||
 			(node.measure !== null &&
 				(shifted ||
 					(!settled &&
@@ -5454,10 +5456,10 @@ export class Layout {
 	// which lays it out, is answered again.
 	staleHosts: Set<Element>;
 	selectionMoved: boolean;
-	// Whether the last solve found a sticky box. Its shift moves its rows
-	// with no change to its rect, so while one is shown, or was, a solve
-	// repaints whole.
-	shiftedSticky: boolean;
+	// The rows each sticky box painted at the last solve, shift included.
+	// A shift moves a box's rows with no change to its rect, and only a
+	// solve or a scroll changes one, so a solve compares them.
+	stickyRows: Map<LayoutNode, [number, number, boolean]>;
 	// The rows the selection covered at the last frame, from its ends.
 	selectionRows: [number, number] | null;
 
@@ -5472,7 +5474,7 @@ export class Layout {
 		this.restyledSinceLayout = new Set();
 		this.staleHosts = new Set();
 		this.selectionMoved = false;
-		this.shiftedSticky = false;
+		this.stickyRows = new Map();
 		this.selectionRows = null;
 		this.positionedElements = new Set<Element>();
 		this.terminalReordersText = false;
@@ -5653,13 +5655,9 @@ export class Layout {
 			root.performLayout(root.style.width.value, root.style.height.value);
 		}
 		this.staleHosts.clear();
-		const sticky = hasStickyBox(this);
-		if (sticky || this.shiftedSticky) {
-			this.wholeDamage = true;
-		}
-		this.shiftedSticky = sticky;
 		this.collecting = !this.wholeDamage;
 		computePaintExtents(this, root, 0, 0);
+		damageShiftedStickyBoxes(this);
 		this.collecting = false;
 		this.solves++;
 	}
@@ -6404,9 +6402,59 @@ export function invalidateTextMeasurement(layout: Layout): void {
 	}
 }
 
-function hasStickyBox(layout: Layout): boolean {
+// A sticky box's extent holds its descendants', so its rows before and
+// after cover everything its shift moved.
+function damageShiftedStickyBoxes(layout: Layout): void {
+	const before = layout.stickyRows;
+	const after = new Map<LayoutNode, [number, number, boolean]>();
 	for (const element of layout.positionedElements) {
-		if (layout.nodeMap.get(element)?.style.positionType === "sticky") {
+		const node = layout.nodeMap.get(element);
+		const extent = node && extents.get(node);
+		if (
+			node?.style.positionType !== "sticky" ||
+			extent === undefined ||
+			!isInLayoutTree(layout, node)
+		) {
+			continue;
+		}
+		const shift = getScrollShift(layout, node, false).y;
+		const rows: [number, number, boolean] = [
+			extent.top + shift,
+			extent.bottom + shift,
+			isInFixedSpace(node),
+		];
+		after.set(node, rows);
+		const old = before.get(node);
+		if (old === undefined || old[0] !== rows[0] || old[1] !== rows[1]) {
+			pushDamage(layout, ...rows);
+			if (old !== undefined) {
+				pushDamage(layout, ...old);
+			}
+		}
+		before.delete(node);
+	}
+	for (const old of before.values()) {
+		pushDamage(layout, ...old);
+	}
+	layout.stickyRows = after;
+}
+
+function isInLayoutTree(layout: Layout, node: LayoutNode): boolean {
+	let current: LayoutNode | null = node;
+	while (current.parent !== null) {
+		if (current.style.displayType === "none") {
+			return false;
+		}
+		current = current.parent;
+	}
+	return current === layout.initialBlock;
+}
+
+function isInFixedSpace(node: LayoutNode): boolean {
+	for (let current: LayoutNode | null = node;
+		current;
+		current = current.parent) {
+		if (current.style.positionType === "fixed") {
 			return true;
 		}
 	}
@@ -6432,7 +6480,17 @@ function addDamage(
 	bottom: number,
 	fixed: boolean,
 ): void {
-	if (bottom <= top) {
+	const shift = getScrollShift(layout, node, false).y;
+	pushDamage(layout, top + shift, bottom + shift, fixed);
+}
+
+function pushDamage(
+	layout: Layout,
+	top: number,
+	bottom: number,
+	fixed: boolean,
+): void {
+	if (!layout.collecting || bottom <= top) {
 		return;
 	}
 	if (layout.damage.length >= MAX_DAMAGE) {
@@ -6441,8 +6499,7 @@ function addDamage(
 		layout.damage = [];
 		return;
 	}
-	const shift = getScrollShift(layout, node, false).y;
-	layout.damage.push([top + shift, bottom + shift, fixed]);
+	layout.damage.push([top, bottom, fixed]);
 }
 
 function isSameLines(
diff --git a/tests/partial-repaint.test.ts b/tests/partial-repaint.test.ts
index 9ad8440d..c3dc678b 100644
--- a/tests/partial-repaint.test.ts
+++ b/tests/partial-repaint.test.ts
@@ -340,3 +340,33 @@ test("a counter set on one element renumbers the ones after it", async () => {
 	);
 	dom.dispose();
 });
+
+test("a sticky header moves when the box it sticks in shrinks", async () => {
+	const {partial, dom} = await repaint(
+		"<div style=\"display: flex; flex-direction: column; height: 20px; " +
+			"gap: 3px\"><div style=\"flex: 1\"><div style=\"position: sticky; " +
+			"top: 0; background: navy\">head</div></div><div id=q>q</div></div>" +
+			"<div style=\"height: 40px\"></div>",
+		async (document, window) => {
+			window.scrollTo(0, 6);
+			await nextFrame({window, document});
+			document.getElementById("q").innerHTML = "q<br>".repeat(12);
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
+
+test("a box that stops painting as it moves clears its old rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(6) +
+			"<div id=bar class=tall style=\"position: fixed; bottom: 0; " +
+			"left: 0\">bar</div>",
+		(document) => {
+			document.getElementById("bar").classList.remove("tall");
+		},
+		{head: "<style>.tall { top: 0; background: navy }</style>"},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});

From f24759a6e9b6b2be16cededa9019dd04bbea42c1 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 09:38:14 -0400
Subject: [PATCH 73/99] Count counters in tree order, and retire boxes along
 the enumeration

Counters follow css-lists-3: an element inherits its parent's and its
previous sibling's counters at the values the element before it left,
then applies counter-reset, counter-increment and counter-set. An
element's counters begin with every ancestor's, so inheriting is
cutting the list of the element before to the length of the previous
sibling's or the parent's. An element that changes no counter is
transparent: inserting or removing one renumbers nothing, so the
counts are dropped only when an element's counter inputs change or a
subtree holding one comes or goes.

A derivation retires the boxes of elements it walks through, and now
walks into every inline box, as the enumeration does. Asking whether
an inline was broken around a block read the state after the change,
so a block that dissolved inside an inline kept its old box.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts     | 414 +++++++++++++++++++++++---------------
 src/internal/cssvalues.ts |  29 ---
 src/internal/layout.ts    |  12 +-
 tests/counters.test.ts    | 135 +++++++++++++
 tests/incremental.test.ts |   6 +
 5 files changed, 401 insertions(+), 195 deletions(-)
 create mode 100644 tests/counters.test.ts

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index 28630dbf..e56af47b 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6276,8 +6276,13 @@ export class Cascade {
 	// one element changes renumbers the content of others, which nothing
 	// restyles, so a change sets countersStale and those elements restyle.
 	counterUsers: Set<Element>;
-	counterDeclarations: WeakMap<Element, string>;
 	countersStale: boolean;
+	// Each element's counters, the inputs they were counted from, the
+	// elements that generate no box, and whether any were counted.
+	counterSets: WeakMap<Element, readonly CounterEntry[]>;
+	counterKeys: WeakMap<Element, string>;
+	counterHidden: WeakSet<Element>;
+	countersCounted: boolean;
 
 	// Whether any rule is scoped, which is what adds proximity to the sort.
 	scopedRulesExist: boolean;
@@ -6302,8 +6307,6 @@ export class Cascade {
 	// apply with no MutationObserver attached.
 	parsedStyleSheetCount: number;
 
-	counterScopes: WeakMap<Element, CSSValues.CounterScope>;
-
 	// The transition gate is STICKY. It opens the first time anything
 	// declares a transition and never closes, so a document with none pays
 	// two checks per style change event. Snapshots live in a WeakMap. Only
@@ -6397,8 +6400,11 @@ export class Cascade {
 		this.counterRulesExist = false;
 		this.listItemRulesExist = false;
 		this.counterUsers = new Set();
-		this.counterDeclarations = new WeakMap();
 		this.countersStale = false;
+		this.counterSets = new WeakMap();
+		this.counterKeys = new WeakMap();
+		this.counterHidden = new WeakSet();
+		this.countersCounted = false;
 		this.scopedRulesExist = false;
 		this.hasRulesExist = false;
 		this.hasAnchors = new Set();
@@ -6406,7 +6412,6 @@ export class Cascade {
 		this.hasStates = new Set();
 		this.hoverRulesDeclared = false;
 		this.parsedStyleSheetCount = -1;
-		this.counterScopes = new WeakMap<Element, CSSValues.CounterScope>();
 		this.flushing = false;
 		this.usedValues = new WeakMap();
 		this.hasResults = null;
@@ -6652,7 +6657,7 @@ export function handleMutations(
 						shouldSyncStylesheets = true;
 					}
 					removedElements = true;
-					if (cascade.counterUsers.size > 0 && !cascade.countersStale) {
+					if (cascade.countersCounted && !cascade.countersStale) {
 						cascade.countersStale = declaresCounters(cascade, element);
 					}
 				}
@@ -6683,6 +6688,7 @@ export function handleMutations(
 				LIST_NUMBERING_ATTRIBUTES.has(mutation.attributeName!) &&
 				(localNameOf(element) === "ol" || localNameOf(element) === "li")
 			) {
+				noteCounterChange(cascade, element);
 				cascade.layout.invalidateFrame();
 			}
 			// A change to keys whose rules declare only paint properties
@@ -6982,7 +6988,7 @@ export function dispose(cascade: Cascade): void {
 	cascade.computedStyleCache = new WeakMap();
 	cascade.hasResults = null;
 	cascade.pseudoElementStyleCache = new WeakMap();
-	cascade.counterScopes = new WeakMap();
+	forgetCounters(cascade);
 	if (cascade.transitionTimer !== null) {
 		clearTimeout(cascade.transitionTimer);
 		cascade.transitionTimer = null;
@@ -7248,17 +7254,16 @@ function resolveCounterFunction(
 	element: Element,
 	content: string,
 ): string {
-	initializeCounters(cascade, element);
-	const scope = cascade.counterScopes.get(element);
 	return content.replace(
 		/counter\s*\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/g,
 		(_match, counterName, style) => {
 			cascade.counterUsers.add(element);
-			const trimmedName = counterName.trim();
-			const trimmedStyle = style?.trim() || "decimal";
+			const name = counterName.trim();
+			const counters = getCounterSet(cascade, element);
+			const index = findInnermost(counters, name);
 			return CSSValues.formatCounterValue(
-				CSSValues.getCounterValueInScope(scope, trimmedName),
-				trimmedStyle,
+				index === -1 ? 0 : counters[index].value,
+				style?.trim() || "decimal",
 			);
 		},
 	);
@@ -7428,7 +7433,10 @@ export function checkStylesFromScratch(cascade: Cascade): void {
 		computedStyleCache: cascade.computedStyleCache,
 		hasResults: cascade.hasResults,
 		pseudoElementStyleCache: cascade.pseudoElementStyleCache,
-		counterScopes: cascade.counterScopes,
+		counterSets: cascade.counterSets,
+		counterKeys: cascade.counterKeys,
+		counterHidden: cascade.counterHidden,
+		countersCounted: cascade.countersCounted,
 		sharedRoot: cascade.sharedRoot,
 	};
 	dropCache(cascade);
@@ -7464,7 +7472,7 @@ function dropCache(cascade: Cascade): void {
 	cascade.computedStyleCache = new WeakMap();
 	cascade.hasResults = null;
 	cascade.pseudoElementStyleCache = new WeakMap();
-	cascade.counterScopes = new WeakMap();
+	forgetCounters(cascade);
 }
 
 // The box a child's or a pseudo-element's percentage resolves against,
@@ -7805,46 +7813,67 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 }
 
-// The parent's scope is read, never built. Building it recursively up a
-// deep tree is what this avoids.
-function getCounterDeclaration(
-	reset: string | null | undefined,
-	increment: string | null | undefined,
-): string {
-	return `${reset || "none"}|${increment || "none"}`;
+// What an element's counters are computed from, or null for an element
+// that changes none of them. Such an element passes on what it inherits,
+// so adding or removing it leaves every other element's counters as
+// they were.
+function getCounterKey(cascade: Cascade, element: Element): string | null {
+	const slots = _(cascade.declarationFor(element));
+	const parts: string[] = [];
+	if (slots._computedValue("display") === "none") {
+		parts.push("hidden");
+	}
+	if (
+		cascade.counterRulesExist ||
+		(attributeOf(element, "style") ?? "").includes("counter")
+	) {
+		for (const property of [
+			"counter-reset",
+			"counter-increment",
+			"counter-set",
+		]) {
+			const value = slots._computedValue(property);
+			if (value && value !== "none") {
+				parts.push(`${property}:${value}`);
+			}
+		}
+	}
+	const tag = element.tagName;
+	if (tag === "OL" || tag === "UL") {
+		parts.push(
+			`${tag}:${attributeOf(element, "start")}:` +
+				`${hasAttributeOf(element, "reversed")}`,
+		);
+		if (hasAttributeOf(element, "reversed")) {
+			parts.push(`items:${getListItems(element).length}`);
+		}
+	} else if (tag === "LI") {
+		parts.push(`LI:${attributeOf(element, "value")}`);
+	}
+	return parts.length === 0 ? null : parts.join("|");
 }
 
-// Whether an element restyled now declares other counters than its scope
-// was built from. Asked only of a document whose generated content reads
-// a counter, since answering resolves the element's new style.
+// Whether an element restyled now computes its counters from other
+// inputs than they were counted with.
 function noteCounterChange(cascade: Cascade, element: Element): void {
-	if (cascade.counterUsers.size === 0 || cascade.countersStale) {
+	if (!cascade.countersCounted || cascade.countersStale) {
 		return;
 	}
-	const before =
-		cascade.counterDeclarations.get(element) ??
-		getCounterDeclaration(null, null);
-	const slots = _(cascade.declarationFor(element));
-	const after = getCounterDeclaration(
-		slots._computedValue("counter-reset"),
-		slots._computedValue("counter-increment"),
-	);
-	if (before !== after) {
+	const before = cascade.counterKeys.get(element) ?? null;
+	if (before !== getCounterKey(cascade, element)) {
 		cascade.countersStale = true;
 	}
 }
 
-// Whether a removed subtree declared a counter, which renumbers what
-// came after it.
+// Whether a removed subtree held an element that changed a counter,
+// which renumbers what came after it.
 function declaresCounters(cascade: Cascade, root: Element): boolean {
-	const none = getCounterDeclaration(null, null);
 	for (
 		let element: Element | null = root;
 		element !== null;
 		element = nextElementUnder(element, root)
 	) {
-		const declared = cascade.counterDeclarations.get(element);
-		if (declared !== undefined && declared !== none) {
+		if (cascade.counterKeys.has(element)) {
 			return true;
 		}
 	}
@@ -7857,8 +7886,7 @@ function refreshCounters(cascade: Cascade): void {
 	if (!cascade.countersStale) {
 		return;
 	}
-	cascade.countersStale = false;
-	cascade.counterScopes = new WeakMap();
+	forgetCounters(cascade);
 	const users = [...cascade.counterUsers];
 	cascade.counterUsers.clear();
 	for (const element of users) {
@@ -7869,144 +7897,210 @@ function refreshCounters(cascade: Cascade): void {
 	}
 }
 
-// Built on first read, not on invalidation: a counter's value depends
-// on the element's ancestors, and for a list item on the items before
-// it, so the parent is built first and a dropped scope comes back when
-// something next asks.
-function initializeCounters(cascade: Cascade, element: Element): void {
-	if (cascade.counterScopes.has(element)) {
-		return;
-	}
-	if (element.parentElement) {
-		initializeCounters(cascade, element.parentElement);
-	}
+function forgetCounters(cascade: Cascade): void {
+	cascade.countersStale = false;
+	cascade.countersCounted = false;
+	cascade.counterSets = new WeakMap();
+	cascade.counterKeys = new WeakMap();
+	cascade.counterHidden = new WeakSet();
+}
 
-	// With no counter rules anywhere, only lists carry counters. But an
-	// element under a scope-holding parent still joins, so a chain like ol >
-	// li > div > ol keeps its inheritance path unbroken.
-	const tag = element.tagName;
-	if (
-		!cascade.counterRulesExist &&
-		tag !== "OL" &&
-		tag !== "UL" &&
-		tag !== "LI" &&
-		!(
-			element.parentElement && cascade.counterScopes.has(element.parentElement)
-		) &&
-		!(attributeOf(element, "style") ?? "").includes("counter")
-	) {
-		return;
+/**
+ * The counters in scope at an element, innermost last (css-lists-3
+ * §4.4). An element inherits the counters of its parent and of its
+ * previous sibling, at the values of the element before it in tree
+ * order, then applies its own counter-reset, counter-increment and
+ * counter-set, in that order.
+ *
+ * By induction on tree order, an element's counters begin with its
+ * parent's, and so with those of every ancestor: an element starts from
+ * its parent's and appends, and only ever removes a counter one of its
+ * siblings made. The element before E in tree order is E's previous
+ * sibling, or one of that sibling's descendants, or E's parent, so its
+ * counters begin with the ones E inherits, at the values E inherits
+ * them with. Inheriting is cutting that list to the length of the
+ * previous sibling's, or the parent's.
+ */
+function getCounterSet(
+	cascade: Cascade,
+	element: Element,
+): readonly CounterEntry[] {
+	const counted = cascade.counterSets.get(element);
+	if (counted !== undefined) {
+		return counted;
+	}
+	// The elements a set is built from come first in tree order, so they
+	// are counted first, from a stack rather than by recursion, since a
+	// long list asks through every item before.
+	const stack = [element];
+	while (stack.length > 0) {
+		const each = stack.at(-1)!;
+		if (cascade.counterSets.has(each)) {
+			stack.pop();
+			continue;
+		}
+		const parent = each.parentElement;
+		const sibling = each.previousElementSibling;
+		const before = getElementBefore(each);
+		const missing = [parent, sibling, before].filter(
+			(source): source is Element =>
+				source !== null && !cascade.counterSets.has(source),
+		);
+		if (missing.length > 0) {
+			stack.push(...missing);
+			continue;
+		}
+		stack.pop();
+		countElement(cascade, each, parent, sibling, before);
 	}
+	return cascade.counterSets.get(element)!;
+}
 
-	const computedStyle = cascade.declarationFor(element);
-	const computedStyleSlots = _(computedStyle);
-	const counterReset = computedStyleSlots._computedValue("counter-reset");
-	const counterIncrement =
-		computedStyleSlots._computedValue("counter-increment");
-
-	const parentElement = element.parentElement;
-	const parentScope = parentElement
-		? cascade.counterScopes.get(parentElement)
-		: undefined;
-
-	const scope: CSSValues.CounterScope = {
-		element,
-		counters: {},
-		parent: parentScope,
-	};
-	cascade.counterScopes.set(element, scope);
-	cascade.counterDeclarations.set(
-		element,
-		getCounterDeclaration(counterReset, counterIncrement),
-	);
-
-	if (counterReset && counterReset !== "none") {
-		CSSValues.parseCounterReset(scope, counterReset);
-	}
+interface CounterEntry {
+	name: string;
+	origin: Element;
+	value: number;
+}
 
-	if (element.tagName === "OL" || element.tagName === "UL") {
-		const startValue = element.tagName === "OL"
-			? parseInt(attributeOf(element, "start") || "1", 10)
-			: 0;
-		// start - 1, so the first increment gives start.
-		scope.counters["list-item"] = startValue - 1;
-	}
+const NO_COUNTERS: readonly CounterEntry[] = [];
 
-	if (counterIncrement && counterIncrement !== "none") {
-		parseCounterIncrement(cascade, scope, counterIncrement);
+function getElementBefore(element: Element): Element | null {
+	let before = element.previousElementSibling;
+	if (before === null) {
+		return element.parentElement;
 	}
-
-	if (element.tagName === "LI") {
-		incrementCounter(cascade, scope, "list-item", 1);
+	while (before.lastElementChild !== null) {
+		before = before.lastElementChild;
 	}
+	return before;
 }
 
-function parseCounterIncrement(
+function countElement(
 	cascade: Cascade,
-	scope: CSSValues.CounterScope,
-	counterIncrement: string,
+	element: Element,
+	parent: Element | null,
+	sibling: Element | null,
+	before: Element | null,
 ): void {
-	for (const [name, increment] of CSSValues.getCounterPairs(
-		counterIncrement,
-		1,
-	)) {
-		incrementCounter(cascade, scope, name, increment);
-	}
+	cascade.countersCounted = true;
+	const inherits = sibling ?? parent;
+	const length = inherits === null
+		? 0
+		: cascade.counterSets.get(inherits)!.length;
+	const preceding = before === null
+		? NO_COUNTERS
+		: cascade.counterSets.get(before)!;
+	const inherited = preceding.length === length
+		? preceding
+		: preceding.slice(0, length);
+	const key = getCounterKey(cascade, element);
+	const hidden =
+		(parent !== null && cascade.counterHidden.has(parent)) ||
+		(key !== null && key.startsWith("hidden"));
+	if (key !== null) {
+		cascade.counterKeys.set(element, key);
+	}
+	if (hidden) {
+		cascade.counterHidden.add(element);
+	}
+	cascade.counterSets.set(
+		element,
+		key === null || hidden
+			? inherited
+			: applyCounters(cascade, element, inherited),
+	);
 }
 
-function incrementCounter(
+// An element's own counter-reset, counter-increment and counter-set,
+// with the list-item counter HTML's lists keep: a list resets it, an
+// item steps it, and an item's value sets it.
+function applyCounters(
 	cascade: Cascade,
-	scope: CSSValues.CounterScope,
-	counterName: string,
-	increment: number,
-): void {
-	// A list item counts from the item before it, not from its scope.
-	// Siblings share one list, and each scope only ever holds its own
-	// element's value.
-	if (counterName === "list-item" && scope.element.tagName === "LI") {
-		const currentValue = getListItemCounterValue(cascade, scope.element);
-		scope.counters[counterName] = currentValue + increment;
-	} else {
-		const currentValue = CSSValues.getCounterValueInScope(
-			scope.parent,
-			counterName,
+	element: Element,
+	inherited: readonly CounterEntry[],
+): readonly CounterEntry[] {
+	const counters = [...inherited];
+	const slots = _(cascade.declarationFor(element));
+	const declared = (property: string, fallback: number) => {
+		const value = slots._computedValue(property);
+		return value && value !== "none"
+			? CSSValues.getCounterPairs(value, fallback)
+			: [];
+	};
+	const resets = declared("counter-reset", 0);
+	const increments = declared("counter-increment", 1);
+	const sets = declared("counter-set", 0);
+	const names = (pairs: Array<[string, number]>) => pairs.map(([name]) => name);
+	const tag = element.tagName;
+	if ((tag === "OL" || tag === "UL") && !names(resets).includes("list-item")) {
+		resets.push(["list-item", getListStart(element)]);
+	}
+	if (tag === "LI") {
+		const list = element.parentElement;
+		if (!names(increments).includes("list-item")) {
+			increments.push([
+				"list-item",
+				list?.tagName === "OL" && hasAttributeOf(list, "reversed") ? -1 : 1,
+			]);
+		}
+		const value = parseInt(attributeOf(element, "value") ?? "", 10);
+		if (Number.isFinite(value) && !names(sets).includes("list-item")) {
+			sets.push(["list-item", value]);
+		}
+	}
+	const instantiate = (name: string, value: number): number => {
+		const index = counters.findIndex((counter) =>
+			counter.name === name &&
+			(counter.origin === element ||
+				counter.origin.parentNode === element.parentNode),
 		);
-		scope.counters[counterName] = currentValue + increment;
+		if (index !== -1) {
+			counters.splice(index, 1);
+		}
+		counters.push({name, origin: element, value});
+		return counters.length - 1;
+	};
+	const innermost = (name: string): number => {
+		const index = findInnermost(counters, name);
+		return index === -1 ? instantiate(name, 0) : index;
+	};
+	for (const [name, value] of resets) {
+		instantiate(name, value);
 	}
+	for (const [name, step] of increments) {
+		const index = innermost(name);
+		counters[index] = {...counters[index], value: counters[index].value + step};
+	}
+	for (const [name, value] of sets) {
+		const index = innermost(name);
+		counters[index] = {...counters[index], value};
+	}
+	return counters;
 }
 
-// The list's start value plus the items before this one. Siblings
-// share one counter, and each scope holds only its own element's value.
-function getListItemCounterValue(cascade: Cascade, element: Element): number {
-	let parent = element.parentElement;
-	while (parent && parent.tagName !== "OL" && parent.tagName !== "UL") {
-		parent = parent.parentElement;
+function findInnermost(
+	counters: readonly CounterEntry[],
+	name: string,
+): number {
+	for (let index = counters.length - 1; index >= 0; index--) {
+		if (counters[index].name === name) {
+			return index;
+		}
 	}
+	return -1;
+}
 
-	if (!parent) {
+// One before the first item's number, so the first step gives it.
+function getListStart(list: Element): number {
+	if (list.tagName !== "OL") {
 		return 0;
 	}
-
-	// Items initialize in document order, so the nearest earlier item that
-	// has a scope already holds the count up to itself. Counting from the
-	// list's start for every item made a long list quadratic.
-	let uncounted = 0;
-	for (
-		let previous = element.previousElementSibling;
-		previous !== null;
-		previous = previous.previousElementSibling
-	) {
-		if (previous.tagName !== "LI") {
-			continue;
-		}
-		const scope = cascade.counterScopes.get(previous as Element);
-		if (scope !== undefined && "list-item" in scope.counters) {
-			return scope.counters["list-item"] + uncounted;
-		}
-		uncounted++;
+	const reversed = hasAttributeOf(list, "reversed");
+	const start = parseInt(attributeOf(list, "start") ?? "", 10);
+	if (reversed) {
+		return (Number.isFinite(start) ? start : getListItems(list).length) + 1;
 	}
-	const parentScope = cascade.counterScopes.get(parent);
-	return (parentScope?.counters["list-item"] ?? 0) + uncounted;
+	return (Number.isFinite(start) ? start : 1) - 1;
 }
 
 function getUsedValues(
@@ -8788,7 +8882,7 @@ function invalidateElementCaches(
 		}
 	}
 	cascade.pseudoElementStyleCache.delete(element);
-	cascade.counterScopes.delete(element);
+	cascade.counterSets.delete(element);
 	noteCounterChange(cascade, element);
 }
 
@@ -9955,6 +10049,7 @@ function parseSelector(
 	if (
 		declarations["counter-reset"] ||
 		declarations["counter-increment"] ||
+		declarations["counter-set"] ||
 		declarations["content"]?.includes("counter")
 	) {
 		cascade.counterRulesExist = true;
@@ -10609,9 +10704,6 @@ function attachPseudoElementToElementForType(
 		return;
 	}
 
-	// counter() in a content value reads these, so they must exist first.
-	initializeCounters(cascade, element);
-
 	if (pseudoType === "::marker") {
 		const computedStyle = cascade.declarationFor(element);
 		const display = _(computedStyle)._computedValue("display");
diff --git a/src/internal/cssvalues.ts b/src/internal/cssvalues.ts
index 1d3ea277..c7dcc2e3 100644
--- a/src/internal/cssvalues.ts
+++ b/src/internal/cssvalues.ts
@@ -5772,12 +5772,6 @@ function cubicBezierEasing(
 	};
 }
 
-export interface CounterScope {
-	element: Element;
-	counters: {[counterName: string]: number};
-	parent?: CounterScope;
-}
-
 // Each identifier opens a pair. A counter written without a number
 // takes `fallback`: 0 for a reset, 1 for an increment.
 export function getCounterPairs(
@@ -5802,29 +5796,6 @@ export function getCounterPairs(
 	return pairs;
 }
 
-export function parseCounterReset(
-	scope: CounterScope,
-	counterReset: string,
-): void {
-	for (const [name, value] of getCounterPairs(counterReset, 0)) {
-		scope.counters[name] = value;
-	}
-}
-
-export function getCounterValueInScope(
-	scope: CounterScope | undefined,
-	counterName: string,
-): number {
-	let currentScope = scope;
-	while (currentScope) {
-		if (counterName in currentScope.counters) {
-			return currentScope.counters[counterName];
-		}
-		currentScope = currentScope.parent;
-	}
-	return 0;
-}
-
 // A bullet style names a glyph and ignores the value. Everything else is
 // the ordinal a list marker of the same style would show.
 export function formatCounterValue(value: number, style: string): string {
diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index e0f5b765..02f499b2 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2617,10 +2617,12 @@ function dropRunContent(layout: Layout, element: Element): void {
 	}
 }
 
-// Retire the boxes of elements the enumeration saw THROUGH (dissolved,
-// or broken around a block). Neither generates a box, and one left in
-// place is laid out from a shape the container no longer has. Only
-// those elements are descended into.
+// Retire the boxes of elements the enumeration saw THROUGH: dissolved
+// ones, and inline boxes, which a block inside breaks. A dissolved one
+// generates no box, and one left in place is laid out from a shape the
+// container no longer has. The walk descends where the enumeration
+// does, into every inline box, since one that held a block before this
+// derivation may hold none now.
 function dropSteppedOver(layout: Layout, parent: Element): void {
 	for (const child of flatChildren(parent)) {
 		if (nodeTypeOf(child) !== child.ELEMENT_NODE) {
@@ -2628,7 +2630,7 @@ function dropSteppedOver(layout: Layout, parent: Element): void {
 		}
 		const element = child as Element;
 		const dissolves = isDisplayContents(element);
-		if (!dissolves && !layout.boxes.get(element)?.broken) {
+		if (!dissolves && !isInlineBox(element)) {
 			continue;
 		}
 		// addNode drops the box of a box-less element.
diff --git a/tests/counters.test.ts b/tests/counters.test.ts
new file mode 100644
index 00000000..f3b7dd78
--- /dev/null
+++ b/tests/counters.test.ts
@@ -0,0 +1,135 @@
+/**
+ * Counters as css-lists-3 §4.4 counts them: an element inherits the
+ * counters of its parent and of its previous sibling, at the values the
+ * element before it in tree order left them, then applies its own
+ * counter-reset, counter-increment and counter-set. The expected text is
+ * what a browser shows for the same page.
+ */
+import {expect, test} from "@b9g/libuild/test";
+
+import {TermDOM} from "../src/index.ts";
+import {MockProcess, nextFrame} from "./test-utils.ts";
+
+async function render(
+	css: string,
+	html: string,
+	change?: (document: any) => void,
+): Promise<string[]> {
+	const terminal = new MockProcess({cols: 30, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.head.innerHTML = `<style>${css}</style>`;
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	if (change) {
+		change(dom.document);
+		await nextFrame(dom);
+	}
+	const lines = terminal.getScreenContents()
+		.split("\n")
+		.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd())
+		.filter((line) => line !== "");
+	dom.dispose();
+	return lines;
+}
+
+const NUMBERED =
+	"body { counter-reset: n } .n { counter-increment: n } " +
+	".n::before { content: counter(n) \". \" }";
+
+test("siblings count on from one another", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div class=n>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a counter takes its value from the element just before", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div><div class=n>a</div><div class=n>b</div></div>" +
+				"<div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a reset reaches the siblings after it", async () => {
+	expect(
+		await render(
+			NUMBERED + " .r { counter-reset: n 10 }",
+			"<div class=n>a</div><div class=r>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "11. c"]);
+});
+
+test("a counter made inside a sibling stays inside it", async () => {
+	expect(
+		await render(
+			".r { counter-reset: m 5 } .m::before { content: counter(m) \" \" }",
+			"<div><div class=r>a</div></div><div class=m>b</div>",
+		),
+	).toEqual(["a", "0 b"]);
+});
+
+test("counter-set sets the value the next step counts from", async () => {
+	expect(
+		await render(
+			NUMBERED + " .s { counter-set: n 7 }",
+			"<div class=n>a</div><div class=s>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "8. c"]);
+});
+
+test("a box not shown does not count", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div class=n style=\"display: none\">b</div>" +
+				"<div class=n>c</div>",
+		),
+	).toEqual(["1. a", "2. c"]);
+});
+
+test("a counter declared later renumbers what follows it", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=b>b</div><div class=n>c</div>",
+			(document) => document.getElementById("b").classList.add("n"),
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a box shown again counts again", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=b class=n style=\"display: none\">b</div>" +
+				"<div class=n>c</div>",
+			(document) => document.getElementById("b").style.display = "block",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a parent hidden and shown again counts its children again", async () => {
+	expect(
+		await render(
+			NUMBERED,
+			"<div class=n>a</div><div id=p style=\"display: none\">" +
+				"<div class=n>b</div></div><div class=n>c</div>",
+			(document) => document.getElementById("p").style.display = "block",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a list item's value sets the list-item counter", async () => {
+	expect(
+		await render(
+			"li::marker { content: counter(list-item) \") \" } " +
+				"ol { list-style-position: inside; padding: 0 }",
+			"<ol start=4><li>a</li><li value=9>b</li><li>c</li></ol>",
+		),
+	).toEqual(["4) a", "9) b", "10) c"]);
+});
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 4e9f651b..32af4e91 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -163,3 +163,9 @@ test("a row made a containing block lays out its positioned cell", async () => {
 		(document) => document.getElementById("r").style.position = "relative",
 	]);
 });
+
+test("a block in an inline that dissolves leaves no box behind", async () => {
+	await replay("<div><span>inline<p id=p>block</p></span></div>", [
+		(document) => document.getElementById("p").style.display = "contents",
+	]);
+});

From f54050997945440c316201b60cebe30df7b57020 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 11:32:38 -0400
Subject: [PATCH 74/99] Wrap stray table parts in anonymous tables, and key
 sizes by what they read
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Table parts a container that is no table holds share an anonymous
table, one per unbroken sequence (CSS2 §17.2.1), with a layout node of
its own that the parts hang from, so cells outside a row sit side by
side and stray rows share columns. White space in a table, a row group
or a row is no box, so any run left there is content, which the table
puts in an anonymous cell. A row group spans its own rows.

A size measured with no width was reused for a request of the width it
came out at, which holds for text but not for content with a
percentage, which an unbounded probe takes as auto. A node whose
content resolves a percentage against the width it is offered now
reuses a size only for the request it answered.

An outline of a box with no height drew on the row above, which no
extent covered, so a frame repainting that row skipped it. The layout
check also asserts the tree's shape: every child names its parent, no
node is held twice or hangs out of reach, and only an element that
generates a box has one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                        | 278 +++++++++++++++++-
 src/internal/layoutsolver.ts                  |  61 +++-
 src/internal/painter.ts                       |  17 +-
 .../__snapshots__/email-fixtures.test.ts.snap |  18 +-
 tests/incremental.test.ts                     |   8 +-
 tests/partial-repaint.test.ts                 |  12 +
 tests/tables.test.ts                          |  53 ++++
 7 files changed, 418 insertions(+), 29 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 02f499b2..e7f935ec 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -606,13 +606,16 @@ function shouldCollapseWhitespaceTextNode(textNode: Text): boolean {
 
 // css-flexbox-1 §4: an anonymous item of collapsible white space is not
 // rendered, or multi-line markup's indentation eats gap and
-// justify-content space.
-function isSuppressedFlexWhitespace(text: Text): boolean {
+// justify-content space. Nor is one in a table, a row group or a row
+// (CSS2 §17.2.1, rule 1), so any run left there has content, which an
+// anonymous cell holds.
+function isSuppressedWhitespace(text: Text): boolean {
 	const parent = boxParentElement(text);
 	if (!parent) {
 		return false;
 	}
-	if (!hasItemChildren(getLayoutDisplay(parent))) {
+	const display = getLayoutDisplay(parent);
+	if (!hasItemChildren(display) && !isTableInternal(display)) {
 		return false;
 	}
 	if (isSpacePreserving(getElementWhiteSpace(parent))) {
@@ -1647,8 +1650,10 @@ function styleNode(
 
 // `node` is a DOM node's principal box. `anonymous` is one contiguous
 // run of inline-level flow children of a block container (CSS2
-// §9.2.1.1), belonging to no DOM node at all.
-type BoxKind = "node" | "anonymous";
+// §9.2.1.1), belonging to no DOM node at all. `table` is the anonymous
+// table around table parts a container that is no table holds (CSS2
+// §17.2.1).
+type BoxKind = "node" | "anonymous" | "table";
 
 // A box either is LAID OUT (it has a layout node the solver sized) or
 // is a run MEMBER whose geometry lives in the break result of the run
@@ -1673,6 +1678,10 @@ export class Box {
 	// Null until a derivation has run, which is not the same as none.
 	children: Box[] | null;
 	heads: Map<Node, Box> | null;
+	// The anonymous table each of a container's children falls in, for
+	// those that fall in one. The children stay in the container's list,
+	// in order, and their layout nodes hang from the table's.
+	tables: Map<Box, Box> | null;
 
 	// An inline broken around a block-level box lays out none of its own
 	// content. The fragments and the block between them are the container's
@@ -1705,6 +1714,7 @@ export class Box {
 		this.members = [];
 		this.children = null;
 		this.heads = null;
+		this.tables = null;
 		this.broken = false;
 		this.holdsFragments = false;
 		this.layoutNode = null;
@@ -1777,7 +1787,7 @@ function getContainerBox(layout: Layout, container: Element): Box {
 			}
 		} else if (nodeTypeOf(child) !== child.TEXT_NODE) {
 			continue;
-		} else if (isSuppressedFlexWhitespace(child as Text)) {
+		} else if (isSuppressedWhitespace(child as Text)) {
 			continue;
 		}
 		if (run === null) {
@@ -1807,6 +1817,7 @@ function getContainerBox(layout: Layout, container: Element): Box {
 	for (let i = runCount; i < previous.length; i++) {
 		dropAnonymousBox(layout, previous[i]);
 	}
+	box.tables = wrapStrayTableParts(container, box, children);
 
 	// The walk flattens a dissolved element and never names it, so a box
 	// it held under an earlier display would outlive the change. A display:
@@ -1819,6 +1830,99 @@ function getContainerBox(layout: Layout, container: Element): Box {
 	return box;
 }
 
+const TABLE_PARTS = new Set<Display>([
+	"table-row",
+	"table-row-group",
+	"table-header-group",
+	"table-footer-group",
+	"table-cell",
+	"table-caption",
+	"table-column",
+	"table-column-group",
+]);
+
+// Consecutive table parts in a container that is no table, row group
+// or row share one anonymous table, with the white space and the boxless
+// elements between them (CSS2 §17.2.1, rule 3). The table's own layout
+// wraps a cell or stray content in the anonymous row and cell around it.
+// Matched by ordinal, as runs are.
+function wrapStrayTableParts(
+	container: Element,
+	box: Box,
+	children: Box[],
+): Map<Box, Box> | null {
+	const previous = box.tables === null ? [] : [...new Set(box.tables.values())];
+	const display = getLayoutDisplay(container);
+	let tables: Map<Box, Box> | null = null;
+	let count = 0;
+	if (!hasItemChildren(display) && !isTableInternal(display)) {
+		let table: Box | null = null;
+		let between: Box[] = [];
+		for (const child of children) {
+			if (child.kind === "node" && isTablePart(child.node!)) {
+				if (table === null) {
+					table = previous[count] ?? new Box("table", null, box);
+					count++;
+				}
+				tables ??= new Map();
+				for (const each of [...between, child]) {
+					tables.set(each, table);
+				}
+				between = [];
+			} else if (table !== null && isPassedOver(container, child)) {
+				between.push(child);
+			} else {
+				table = null;
+				between = [];
+			}
+		}
+	}
+	for (let i = count; i < previous.length; i++) {
+		dropTableBox(previous[i]);
+	}
+	return tables;
+}
+
+function isTablePart(node: Node): boolean {
+	return nodeTypeOf(node) === node.ELEMENT_NODE &&
+		!isOutOfFlow(node) &&
+		TABLE_PARTS.has(getUsedDisplay(node as Element));
+}
+
+function isTableInternal(display: Display): boolean {
+	return display === "table" ||
+		display === "table-row" ||
+		display === "table-row-group" ||
+		display === "table-header-group" ||
+		display === "table-footer-group";
+}
+
+// What stays inside an anonymous table between two of its parts: white
+// space, which renders nothing there, and elements that take no place.
+function isPassedOver(container: Element, child: Box): boolean {
+	if (child.kind === "anonymous") {
+		return !isSpacePreserving(getElementWhiteSpace(container)) &&
+			child.members.every((member) =>
+				nodeTypeOf(member) === member.TEXT_NODE &&
+				COLLAPSIBLE_ONLY.test((member as Text).data),
+			);
+	}
+	const node = child.node;
+	return node !== null &&
+		nodeTypeOf(node) === node.ELEMENT_NODE &&
+		(getLayoutDisplay(node as Element) === "none" || isOutOfFlow(node));
+}
+
+// The parts go back under the container, or another table, when it next
+// places them.
+function dropTableBox(box: Box): void {
+	const wrapper = box.layoutNode;
+	if (wrapper !== null) {
+		wrapper.parent?.removeChild(wrapper);
+		box.layoutNode = null;
+	}
+}
+
 function getPrincipalBox(
 	layout: Layout,
 	node: Node,
@@ -1937,7 +2041,7 @@ function getBoxEntry(layout: Layout, node: Node): Box | null {
 }
 
 function getOwnLayoutNode(layout: Layout, box: Box): LayoutNode | null {
-	if (box.kind === "anonymous") {
+	if (box.kind !== "node") {
 		return box.layoutNode;
 	}
 	return box.node === null ? null : (layout.nodeMap.get(box.node) ?? null);
@@ -1987,9 +2091,45 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 		return;
 	}
 
-	const children = getContainerBox(layout, container).children!;
+	const containerBox = getContainerBox(layout, container);
+	const children = containerBox.children!;
 	let index = 0;
+	let table: Box | null = null;
+	let partIndex = 0;
 	for (const entry of children) {
+		const wrapping = containerBox.tables?.get(entry) ?? null;
+		if (wrapping !== table) {
+			if (table !== null) {
+				dropUnplacedParts(table.layoutNode!, partIndex);
+			}
+			table = wrapping;
+			partIndex = 0;
+			if (table !== null) {
+				placeTableBox(containerFlex, table, index);
+				index++;
+			}
+		}
+		if (table !== null) {
+			const wrapper = table.layoutNode!;
+			if (entry.kind === "anonymous") {
+				dropAnonymousBox(layout, entry);
+				continue;
+			}
+			const node = entry.node!;
+			const kept = layout.nodeMap.get(node);
+			if (kept?.parent !== wrapper || isTouched(layout, node)) {
+				addNode(layout, node, wrapper, null);
+			}
+			const layoutNode = layout.nodeMap.get(node);
+			if (!isOutOfFlow(node) && layoutNode?.parent === wrapper) {
+				if (wrapper.children[partIndex] !== layoutNode) {
+					wrapper.removeChild(layoutNode);
+					insertChild(wrapper, layoutNode, partIndex);
+				}
+				partIndex++;
+			}
+			continue;
+		}
 		if (entry.kind === "anonymous") {
 			let layoutNode = entry.layoutNode;
 			// A flex or grid item measured as a run is that item's box. In a
@@ -2058,6 +2198,10 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 		}
 	}
 
+	if (table !== null) {
+		dropUnplacedParts(table.layoutNode!, partIndex);
+	}
+
 	// Children the box list does not name, left past its end by the
 	// reordering above. A node that moved under a display:none ancestor is
 	// never re-placed, and a container that kept it would go on laying it
@@ -2072,6 +2216,36 @@ function syncContainerRuns(layout: Layout, container: Element): void {
 	}
 }
 
+function placeTableBox(
+	containerFlex: LayoutNode,
+	table: Box,
+	index: number,
+): void {
+	let wrapper = table.layoutNode;
+	if (!wrapper) {
+		wrapper = new LayoutNode();
+		const style = createStyle();
+		style.displayType = "table";
+		wrapper.style = style;
+		table.layoutNode = wrapper;
+	}
+	if (containerFlex.children[index] !== wrapper) {
+		wrapper.parent?.removeChild(wrapper);
+		insertChild(containerFlex, wrapper, index);
+	}
+}
+
+function dropUnplacedParts(wrapper: LayoutNode, count: number): void {
+	for (let i = wrapper.children.length - 1; i >= count; i--) {
+		const child = wrapper.children[i];
+		const node = child.owner as Node | undefined;
+		if (node && isOutOfFlow(node)) {
+			continue;
+		}
+		wrapper.removeChild(child);
+	}
+}
+
 // One run measures the members as a single unit, so no box under them
 // is laid out. This is also the only path that finds an out-of-flow box
 // written among them.
@@ -2415,7 +2589,7 @@ function addTextNode(
 		return;
 	}
 
-	if (isSuppressedFlexWhitespace(text)) {
+	if (isSuppressedWhitespace(text)) {
 		return;
 	}
 
@@ -2582,6 +2756,10 @@ function dropContainerBoxes(layout: Layout, element: Element): void {
 				dropAnonymousBox(layout, child);
 			}
 		}
+		for (const table of new Set(box.tables?.values())) {
+			dropTableBox(table);
+		}
+		box.tables = null;
 		box.children = null;
 		box.heads = null;
 	}
@@ -3342,6 +3520,11 @@ function getPrefixWidths(
 // Only the placing measurement's lines become the box's. A probe's are
 // a result about a box nothing was laid out in, and painting them
 // rendered a stretched item at its narrowest.
+// Set while a run is measured when its content holds a percentage that
+// resolves against the width the run is given, whether or not this
+// request gave one.
+let resolvedPercentage = false;
+
 function measureInlineRun(
 	layout: Layout,
 	box: Box,
@@ -3350,7 +3533,11 @@ function measureInlineRun(
 	placing: boolean,
 	left: number,
 ): Size {
+	const outer = resolvedPercentage;
+	resolvedPercentage = false;
 	const breakResult = breakNodes(layout, box, width, widthSpace, left);
+	const widthDependent = resolvedPercentage;
+	resolvedPercentage = outer || widthDependent;
 	if (Number.isFinite(width)) {
 		breakResult.containerWidth = width;
 	}
@@ -3373,6 +3560,7 @@ function measureInlineRun(
 			: undefined,
 		wrapped: breakResult.wrapped === true,
 		lineColumns: Math.round(breakResult.maxLineWidth),
+		widthDependent,
 	};
 }
 
@@ -3590,6 +3778,9 @@ function collectLeaves(
 					const widthValue = CSSValues.parseUnitValue(
 						getComputedValue(element, "width"),
 					);
+					if (widthValue !== null && typeof widthValue === "object") {
+						resolvedPercentage = true;
+					}
 					if (
 						widthValue !== null &&
 						typeof widthValue === "object" &&
@@ -3700,6 +3891,9 @@ function collectLeaves(
 					element,
 				);
 				let maxWidthCap: number | undefined;
+				if (maxWidthValue && typeof maxWidthValue === "object") {
+					resolvedPercentage = true;
+				}
 				if (typeof maxWidthValue === "number") {
 					maxWidthCap = maxWidthValue;
 				} else if (
@@ -6656,8 +6850,74 @@ function forEachLayoutNode(
 	walk(layout.initialBlock);
 }
 
+// The tree is one: every child names the node that holds it, no node is
+// held twice, and every node that hangs from another is reachable from
+// the root, so no box is laid out where nothing paints it. A box belongs
+// to a connected element that generates one.
+function checkTreeShape(layout: Layout): string[] {
+	const problems: string[] = [];
+	const seen = new Set<LayoutNode>();
+	const name = (node: LayoutNode): string => {
+		const owner = node.owner as Node | null;
+		return owner === null
+			? "anonymous"
+			: nodeTypeOf(owner) === owner.ELEMENT_NODE
+			? (owner as Element).localName +
+				((owner as Element).id ? `#${(owner as Element).id}` : "")
+			: "#text";
+	};
+	const visit = (node: LayoutNode): void => {
+		if (seen.has(node)) {
+			problems.push(`${name(node)} held twice`);
+		}
+		seen.add(node);
+		for (const child of node.children) {
+			if (child.parent !== node) {
+				problems.push(`${name(child)} names another parent`);
+			}
+			visit(child);
+		}
+	};
+	// The root, and the formatting context of every box that lays its own
+	// content out, which a run measures and no parent holds.
+	visit(layout.initialBlock);
+	const document = layout.rootElement.ownerDocument!;
+	for (const each of flatDescendants(document.documentElement!)) {
+		if (nodeTypeOf(each) !== each.ELEMENT_NODE) {
+			continue;
+		}
+		const context = layout.boxes.get(each as Element)
+			?.independentFormattingContext;
+		if (context && !seen.has(context)) {
+			visit(context);
+		}
+	}
+	for (const [domNode, node] of layout.nodeMap) {
+		if (node.parent !== null && !seen.has(node)) {
+			problems.push(`${name(node)} hangs where the root cannot reach`);
+		}
+		if (
+			seen.has(node) &&
+			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&
+			isDisplayContents(domNode as Element)
+		) {
+			problems.push(`${name(node)} has a box and generates none`);
+		}
+		if (seen.has(node) && !flatIsConnected(domNode)) {
+			problems.push(`${name(node)} has a box and is not in the document`);
+		}
+	}
+	return problems;
+}
+
 export function checkLayoutFromScratch(layout: Layout): void {
 	layoutCheck.checked++;
+	const shape = checkTreeShape(layout);
+	if (shape.length > 0) {
+		throw new Error(
+			`The layout tree is malformed: ${shape.slice(0, 8).join("; ")}`,
+		);
+	}
 	const document = layout.window.document;
 	const elements = [...document.querySelectorAll("*")] as Element[];
 	const describe = (): string[] => elements.map((element) => {
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 155f026f..28b9667f 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -79,6 +79,9 @@ export interface Size {
 	columns?: number;
 	wrapped?: boolean;
 	lineColumns?: number;
+	// Whether the content resolved a percentage against the width given,
+	// so that measured at another request it would not be the same.
+	widthDependent?: boolean;
 }
 
 // `placing` is true for the measurement that places the box and
@@ -480,6 +483,12 @@ export class LayoutNode {
 	cachedSizes: Array<CachedSize | null> | null;
 	cachedLayout: CachedSize | null;
 
+	// Whether the subtree's size depends on the width it is offered other
+	// than through where its lines break: a percentage that resolves
+	// against it, or that an unbounded probe takes as auto. Such a size is
+	// reused only for the request it answered.
+	widthDependent: boolean;
+
 	// A baseline-aligned table cell's content moves down this far, to its
 	// row's baseline. Set by the table before the cell is placed.
 	cellBaselineShift: number;
@@ -533,6 +542,7 @@ export class LayoutNode {
 		this.staticPositionFn = null;
 		this.stale = true;
 		this.cachedSizes = null;
+		this.widthDependent = false;
 		this.cachedLayout = null;
 		this.cellBaselineShift = 0;
 		this.owner = null;
@@ -2826,12 +2836,12 @@ function stackAnonymousCell(
 	return height + below;
 }
 
-// An element only. The white space between a row's cells is a run of
-// text the row holds too, and it renders nothing (css-tables-3 §3.3).
+// An element, or a run of text. The white space between a row's cells
+// never reaches a table as a run (css-tables-3 §3.3).
 function isAnonymousCellContent(node: LayoutNode): boolean {
 	const type = node.style.displayType;
 	const owner = node.owner as {nodeType?: number} | null;
-	return owner?.nodeType === 1 &&
+	return (owner?.nodeType === 1 || owner?.nodeType === 3) &&
 		type !== "none" &&
 		!type.startsWith("table") &&
 		!isOutOfFlowType(node.style.positionType);
@@ -3489,17 +3499,34 @@ function layoutTable(
 	// its group.
 	const gridTop = topPaddingBorder + captionHeight;
 
+	// A group spans its own rows, which are consecutive, and a row in one
+	// is placed from the group's top.
+	const firstRows = new Map<LayoutNode, number>();
+	const lastRows = new Map<LayoutNode, number>();
+	rows.forEach((row, index) => {
+		if (row.group !== null) {
+			if (!firstRows.has(row.group)) {
+				firstRows.set(row.group, index);
+			}
+			lastRows.set(row.group, index);
+		}
+	});
 	for (const group of groups) {
+		const first = firstRows.get(group);
 		group.gridLeft = NaN;
 		group.result.left = leftPaddingBorder;
 		group.result.width = contentWidth;
-		group.result.top = gridTop;
-		group.result.height = gridHeight;
+		group.result.top = gridTop + (first === undefined ? 0 : rowStart(first));
+		group.result.height = first === undefined
+			? 0
+			: spanHeight(first, lastRows.get(group)! - first + 1);
 	}
 
 	const rowLeft = (row: TableRow) => row.group ? 0 : leftPaddingBorder;
 	const rowTop = (row: TableRow, index: number) =>
-		row.group ? rowStart(index) : gridTop + rowStart(index);
+		row.group
+			? rowStart(index) - rowStart(firstRows.get(row.group)!)
+			: gridTop + rowStart(index);
 
 	rows.forEach((row, index) => {
 		if (row.node === null) {
@@ -6000,13 +6027,16 @@ function layoutNode(
 							isSameConstraint(cached.ownerHeight, ownerHeight))) &&
 					cached.width >= 0 &&
 					cached.height >= 0 &&
-					isCachedSizeValid(
-						cached.widthSpace,
-						cached.availableWidth - marginRow,
-						cached.width,
-						widthSpace,
-						availableWidth - marginRow,
-					) &&
+					(node.widthDependent
+						? cached.widthSpace === widthSpace &&
+							isSameConstraint(cached.availableWidth, availableWidth)
+						: isCachedSizeValid(
+							cached.widthSpace,
+							cached.availableWidth - marginRow,
+							cached.width,
+							widthSpace,
+							availableWidth - marginRow,
+						)) &&
 					isCachedSizeValid(
 						cached.heightSpace,
 						cached.availableHeight - marginColumn,
@@ -6045,6 +6075,11 @@ function layoutNode(
 	);
 
 	node.ownerFree = isOwnerFree(node);
+	node.widthDependent = node.measure !== null
+		? node.measured?.widthDependent === true
+		: node.children.some((child) =>
+			child.widthDependent || usesPercent(child.style),
+		);
 	// An entry already in the slot is written over rather than replaced. A
 	// node laid out every frame would otherwise leave one behind each time.
 	const write = (entry: CachedSize | null): CachedSize => {
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 74828332..f63604e8 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -1090,13 +1090,15 @@ function paintNodes(
 	const layout = painter.layout;
 	for (const child of visibleChildren(painter, ctx, node)) {
 		const owner = child.owner as Node | null;
-		if (owner === null) {
-			continue;
-		}
 		const childOrigin = {
 			x: origin.x + child.grid.left,
 			y: origin.y + child.grid.top,
 		};
+		// An anonymous table paints nothing of its own, only its parts.
+		if (owner === null) {
+			paintNodes(painter, child, childOrigin, ctx);
+			continue;
+		}
 		const run = getRun(layout, child);
 		if (run !== null) {
 			paintRun(painter, run, childOrigin, ctx);
@@ -1212,7 +1214,11 @@ function paintOutline(
 	ctx: CellContext,
 	fragments: readonly Rect[] = [rect],
 ): void {
-	if (!style.visible || style.outlineColor === null) {
+	// A box paints only the rows it covers, which is what its extent
+	// says, so one with no height has no row to ring.
+	if (
+		!style.visible || style.outlineColor === null || Math.round(rect.height) < 1
+	) {
 		return;
 	}
 	const color = style.outlineColor;
@@ -1239,6 +1245,9 @@ function paintOutline(
 		);
 	} else {
 		for (const fragment of fragments) {
+			if (Math.round(fragment.height) < 1) {
+				continue;
+			}
 			drawDecoration(ctx,
 				Math.round(fragment.left),
 				Math.round(fragment.top),
diff --git a/tests/__snapshots__/email-fixtures.test.ts.snap b/tests/__snapshots__/email-fixtures.test.ts.snap
index 34484c8c..c0ea5a19 100644
--- a/tests/__snapshots__/email-fixtures.test.ts.snap
+++ b/tests/__snapshots__/email-fixtures.test.ts.snap
@@ -516,6 +516,14 @@ exports[`email fixture: ghost-article.html 1`] = `
 
 
 
+
+                            xxxx xxxx xxxx                xxxx xxxx xxxx
+
+
+
+                                               xxxxx
+
+
        ──────────────────────────────────────────────────────────────────────────────────────
 
 
@@ -689,7 +697,15 @@ exports[`email fixture: ghost-article.html 1`] = `
 114: 0-100 #faf9f5
 115: 0-100 #faf9f5
 116: 0-100 #faf9f5
-117: 0-100 #faf9f5`;
+117: 0-100 #faf9f5
+118: 0-100 #faf9f5
+119: 0-100 #faf9f5
+120: 0-100 #faf9f5
+121: 0-100 #faf9f5
+122: 0-100 #faf9f5
+123: 0-100 #faf9f5
+124: 0-100 #faf9f5
+125: 0-100 #faf9f5`;
 
 exports[`email fixture: inline-block-button.html 1`] = `
 
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 32af4e91..48068844 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -38,8 +38,10 @@ for (const page of PAGES) {
 // an inline-block repainting rows counted from its own top (1020, 1193,
 // 1200, 1260), an inline-block's width its measure did not hear of
 // (1481), a positioned row group zeroed by its table when stray content
-// joined it (1140), a positioned row's absolute cell (1941), and an
-// absolute row placed from rounded offsets (2029).
+// joined it (1140), a positioned row's absolute cell (1941), an
+// absolute row placed from rounded offsets (2029), and a row made an
+// inline-block whose percentage width a cached size did not hear of
+// (1637, 2045).
 for (const seed of [
 	1012,
 	1020,
@@ -50,8 +52,10 @@ for (const seed of [
 	1200,
 	1260,
 	1481,
+	1637,
 	1941,
 	2029,
+	2045,
 ]) {
 	test(`seeded changes to the layout page render as a fresh page does: seed ${seed}`, async () => {
 		expect(await firstMismatch(LAYOUT, await record(LAYOUT, seed, 25))).toBe(
diff --git a/tests/partial-repaint.test.ts b/tests/partial-repaint.test.ts
index c3dc678b..f70d8ba4 100644
--- a/tests/partial-repaint.test.ts
+++ b/tests/partial-repaint.test.ts
@@ -370,3 +370,15 @@ test("a box that stops painting as it moves clears its old rows", async () => {
 	expect(partial).toBeGreaterThan(0);
 	dom.dispose();
 });
+
+test("an outlined box with no height paints no row", async () => {
+	const {partial, dom} = await repaint(
+		"<div>one</div><div id=p>text</div><div>between</div>" +
+			"<div style=\"outline: 1px solid\"></div><div>after</div>",
+		(document) => {
+			document.getElementById("p").textContent = "changed";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});
diff --git a/tests/tables.test.ts b/tests/tables.test.ts
index 373c9a96..65cbcd06 100644
--- a/tests/tables.test.ts
+++ b/tests/tables.test.ts
@@ -838,3 +838,56 @@ test("table-layout:fixed does nothing to a table whose width is auto", async ()
 	expect(box("table").width).toBeLessThan(10);
 	dom.dispose();
 });
+
+// CSS 2.1 §17.2.1, rule 3: table parts a block holds are wrapped in an
+// anonymous table, one for each unbroken sequence, so cells sit side by
+// side and stray rows share their columns.
+test("cells in a block share an anonymous table", async () => {
+	const {box, rows, dom} = await render(
+		"<div><div id=a style=\"display: table-cell\">a</div>" +
+			"<div id=b style=\"display: table-cell\">bb</div></div><p>after</p>",
+	);
+	expect(box("#a").top).toBe(box("#b").top);
+	expect(box("#b").left).toBe(box("#a").left + box("#a").width);
+	expect(rows[0]).toBe("abb");
+	dom.dispose();
+});
+
+test("rows in a block share the columns of one anonymous table", async () => {
+	const row = (a: string, b: string, id: string) =>
+		`<div style="display: table-row"><div style="display: table-cell">${a}` +
+		`</div><div id=${id} style="display: table-cell">${b}</div></div>`;
+	const {box, dom} = await render(
+		"<div>" +
+		row("a", "x", "first") +
+		"\n  " +
+		row("cccc", "y", "second") +
+			"</div>",
+	);
+	expect(box("#first").left).toBe(box("#second").left);
+	dom.dispose();
+});
+
+test("text a script puts in a table gets a row of its own", async () => {
+	const {box, dom, document} =
+		await render("<table id=t><tbody id=g><tr><td>x</td></tr></tbody></table>");
+	document.getElementById("t")!.append("loose");
+	await nextFrame(dom);
+	const group = box("#g");
+	expect(box("#t").height).toBe(group.height + 1);
+	expect(dom.document.body.textContent).toContain("loose");
+	dom.dispose();
+});
+
+test("a row group spans its own rows", async () => {
+	const {box, dom} = await render(
+		"<table><thead id=h><tr><td>h</td></tr></thead>" +
+			"<tbody id=b><tr><td>one</td></tr><tr><td>two</td></tr></tbody></table>",
+	);
+	expect(box("#h").height).toBe(box("tr", 0).height);
+	expect(box("#b").top).toBe(box("tr", 1).top);
+	expect(box("#b").height).toBe(
+		box("tr", 2).top + box("tr", 2).height - box("tr", 1).top,
+	);
+	dom.dispose();
+});

From b3789682e4ad3a98ed6b4f5e968ec22d79fe3d19 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 12:25:22 -0400
Subject: [PATCH 75/99] Keep test-only code out of the build

The from-scratch style, layout and partial-frame checks run in the
frame loop behind import.meta.litest, which libuild 0.2.27 defines in
every test bundle and the build replaces with undefined, so the checks
and the functions only they call are dropped from dist.

setDecodeTimeout and getWindowInterfaceNames existed only for a test
and a script. The tests wait out the real timeout, or pass an expired
deadline to decodeImageForPage, and the script reads the names off
getInterfaceObjects.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bun.lock                    | 62 +++++++++++++++++++++++++++++++++++--
 package.json                |  2 +-
 scripts/generate-dom-idl.ts |  4 +--
 src/index.ts                |  7 +++--
 src/internal/images.ts      |  7 +----
 src/internal/window.ts      |  5 ---
 tests/images.test.ts        | 22 ++++---------
 tsconfig.json               |  2 +-
 8 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/bun.lock b/bun.lock
index 09da77fa..75da0cb4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -14,7 +14,7 @@
       "devDependencies": {
         "@b9g/crank": "^0.7.12",
         "@b9g/eslint-config": "^0.1.10",
-        "@b9g/libuild": "^0.2.26",
+        "@b9g/libuild": "^0.2.27",
         "@codemirror/commands": "^6.11.1",
         "@codemirror/lang-javascript": "^6.2.5",
         "@codemirror/language": "^6.12.4",
@@ -61,7 +61,7 @@
 
     "@b9g/eslint-config": ["@b9g/eslint-config@0.1.10", "", { "peerDependencies": { "@eslint/js": ">=9", "@stylistic/eslint-plugin": ">=3", "@typescript-eslint/eslint-plugin": ">=8", "@typescript-eslint/parser": ">=8", "eslint": ">=9", "eslint-plugin-acrocase": ">=0.0.1", "eslint-plugin-crank": ">=0.2.2", "eslint-plugin-esfold": ">=0.1.2" } }, "sha512-5uVBZvX+K4XoGilegJ5/tEH4Mzg5gf+/XdOF6I3QJxTX/5iOoyTuMChIKWHPI3oxBAHzbLHYxFeHoNrp7q2gRQ=="],
 
-    "@b9g/libuild": ["@b9g/libuild@0.2.26", "", { "dependencies": { "@b9g/async-context": "^0.2.1", "commander": "^15.0.0", "esbuild": "^0.28.1", "expect": "^30.4.1", "glob": "^13.0.6", "pretty-format": "^30.4.1" }, "peerDependencies": { "playwright": "^1.40.0", "typescript": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["playwright", "typescript"], "bin": { "libuild": "cli.js" } }, "sha512-8eZT6nJ+PL5ILlowL64kBntd+PPrH7DpTJHyWazhL6ik9kQwmQpQFJgVtcu27G4FE0BPqtlSYyJMbLPNVE1KlA=="],
+    "@b9g/libuild": ["@b9g/libuild@0.2.27", "", { "dependencies": { "@b9g/async-context": "^0.2.1", "c8": "^12.0.0", "commander": "^15.0.0", "esbuild": "^0.28.1", "expect": "^30.4.1", "glob": "^13.0.6", "pretty-format": "^30.4.1" }, "peerDependencies": { "playwright": "^1.40.0", "typescript": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["playwright", "typescript"], "bin": { "libuild": "cli.js" } }, "sha512-WpPtO642xQ1GKx8nrbOM0e2s2eCJ2vP5lLJMMxOEgahSxwkuJ321v3sWrf5TCv5Dl6Kig0VH46LybkSCDcnGHQ=="],
 
     "@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
 
@@ -73,6 +73,8 @@
 
     "@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
+    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@1.0.2", "", {}, "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA=="],
+
     "@cacheable/memory": ["@cacheable/memory@2.2.0", "", { "dependencies": { "@cacheable/utils": "^2.5.0", "@keyv/bigmap": "^1.3.1", "hookified": "^1.15.1", "keyv": "^5.6.0" } }, "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ=="],
 
     "@cacheable/utils": ["@cacheable/utils@2.5.0", "", { "dependencies": { "hashery": "^1.5.1", "keyv": "^5.6.0" } }, "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA=="],
@@ -171,6 +173,8 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
 
+    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.6", "", {}, "sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw=="],
+
     "@jest/diff-sequences": ["@jest/diff-sequences@30.5.0", "", {}, "sha512-OsqBjHXCn8cadasoAZBP6nWYvMsRhpMzGXTpxJ5aO04NlbdhIz+FVe3q49l0AwVhsz/cEmIpBes6gAFl1/dWQg=="],
 
     "@jest/expect-utils": ["@jest/expect-utils@30.5.2", "", { "dependencies": { "@jest/get-type": "30.5.0" } }, "sha512-d/HOLSrJUlBIl6n3LzOa7cjW3xdePm5H5gQw2lixZ/0h157l9sw3mLblzFqnPcTbhDzhRQdBOX3A3KcG73nm5Q=="],
@@ -297,6 +301,8 @@
 
     "ajv": ["ajv@6.15.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw=="],
 
+    "ansi-regex": ["ansi-regex@6.4.0", "", {}, "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw=="],
+
     "ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "arabic-persian-reshaper": ["arabic-persian-reshaper@1.0.1", "", {}, "sha512-VYBjkhz6o4W1Xt4mD2LAReljJpLSw5CUZMqSBDIQRvFgUSlTKEYghapgBWvkeMWF4W+KF3Fm+/z8EywJU4PBeg=="],
@@ -319,12 +325,16 @@
 
     "buildcheck": ["buildcheck@0.0.7", "", {}, "sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA=="],
 
+    "c8": ["c8@12.0.0", "", { "dependencies": { "@bcoe/v8-coverage": "^1.0.1", "@istanbuljs/schema": "^0.1.3", "find-up": "^5.0.0", "foreground-child": "^3.1.1", "istanbul-lib-coverage": "^3.2.0", "istanbul-lib-report": "^3.0.1", "istanbul-reports": "^3.1.6", "test-exclude": "^8.0.0", "v8-to-istanbul": "^9.0.0", "yargs": "^18.0.0", "yargs-parser": "^21.1.1" }, "peerDependencies": { "monocart-coverage-reports": "^2" }, "optionalPeers": ["monocart-coverage-reports"], "bin": { "c8": "bin/c8.js" } }, "sha512-4zpJvrd1nKWutnnKC2pXkFmb6iM1l+ffN//o1CzlTNwW7GSOs9a1xrLqkC48nU8oEkjmPZLPiwMsIaOvoF4Pqg=="],
+
     "cacheable": ["cacheable@2.5.0", "", { "dependencies": { "@cacheable/memory": "^2.2.0", "@cacheable/utils": "^2.5.0", "hookified": "^1.15.0", "keyv": "^5.6.0", "qified": "^0.10.1" } }, "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
 
+    "cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "^7.2.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
+
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "codemirror": ["codemirror@6.0.2", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw=="],
@@ -335,6 +345,8 @@
 
     "commander": ["commander@15.0.0", "", {}, "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg=="],
 
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
     "cpu-features": ["cpu-features@0.0.10", "", { "dependencies": { "buildcheck": "~0.0.6", "nan": "^2.19.0" } }, "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA=="],
 
     "crelt": ["crelt@1.0.7", "", {}, "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA=="],
@@ -351,10 +363,14 @@
 
     "devalue": ["devalue@5.9.4", "", {}, "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg=="],
 
+    "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
+
     "entities": ["entities@8.1.0", "", {}, "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA=="],
 
     "esbuild": ["esbuild@0.28.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.28.2", "@esbuild/android-arm": "0.28.2", "@esbuild/android-arm64": "0.28.2", "@esbuild/android-x64": "0.28.2", "@esbuild/darwin-arm64": "0.28.2", "@esbuild/darwin-x64": "0.28.2", "@esbuild/freebsd-arm64": "0.28.2", "@esbuild/freebsd-x64": "0.28.2", "@esbuild/linux-arm": "0.28.2", "@esbuild/linux-arm64": "0.28.2", "@esbuild/linux-ia32": "0.28.2", "@esbuild/linux-loong64": "0.28.2", "@esbuild/linux-mips64el": "0.28.2", "@esbuild/linux-ppc64": "0.28.2", "@esbuild/linux-riscv64": "0.28.2", "@esbuild/linux-s390x": "0.28.2", "@esbuild/linux-x64": "0.28.2", "@esbuild/netbsd-arm64": "0.28.2", "@esbuild/netbsd-x64": "0.28.2", "@esbuild/openbsd-arm64": "0.28.2", "@esbuild/openbsd-x64": "0.28.2", "@esbuild/openharmony-arm64": "0.28.2", "@esbuild/sunos-x64": "0.28.2", "@esbuild/win32-arm64": "0.28.2", "@esbuild/win32-ia32": "0.28.2", "@esbuild/win32-x64": "0.28.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA=="],
 
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
     "eslint": ["eslint@10.11.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.3", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "11.1.5 || >11.1.6 <12", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-P7a6UEEqb9G95MYAtqkmsTbVXIYyzIfl6NGOIJk162PaahFxFyeGcrlXYFSiagECg4sEm8IseJdZBKR3rx6MsQ=="],
@@ -405,6 +421,12 @@
 
     "flatted": ["flatted@3.4.4", "", {}, "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q=="],
 
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
+
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
+    "get-east-asian-width": ["get-east-asian-width@1.7.0", "", {}, "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q=="],
+
     "glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
 
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
@@ -419,6 +441,8 @@
 
     "htm": ["htm@3.1.1", "", {}, "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ=="],
 
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
     "ignore": ["ignore@7.0.10", "", {}, "sha512-HpbUakT7xp5miBUywCHf36ZEuAJNklBJDDsGpUIjMzOSmM8ELSfA9Sa/QDPeNeqeoN31u+UTCkL4klCOVvRm4Q=="],
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
@@ -431,6 +455,12 @@
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
+
+    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
+
+    "istanbul-reports": ["istanbul-reports@3.2.0", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA=="],
+
     "jest-diff": ["jest-diff@30.5.2", "", { "dependencies": { "@jest/diff-sequences": "30.5.0", "@jest/get-type": "30.5.0", "chalk": "^4.1.2", "pretty-format": "30.5.1" } }, "sha512-rBtHnI6BWTiWj3lM7fOLVfChx7R9B0u9VV3PRHawKs79x6ZjW1QoSrKenaigNGWlvhtoi2BqvDbABDie+Os3xQ=="],
 
     "jest-matcher-utils": ["jest-matcher-utils@30.5.2", "", { "dependencies": { "@jest/get-type": "30.5.0", "chalk": "^4.1.2", "jest-diff": "30.5.2", "pretty-format": "30.5.1" } }, "sha512-lFkB365PTIHOhPzwrb9T6gvlDnPpOZ7/c3ewOKKB7bzztqjVrtlyRL2MkyfJXpyY2u2SKw001JKrTx14fBUFcQ=="],
@@ -465,6 +495,8 @@
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
+    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
+
     "marked": ["marked@18.0.14", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A=="],
 
     "marked-highlight": ["marked-highlight@2.2.4", "", { "peerDependencies": { "marked": ">=4 <19" } }, "sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ=="],
@@ -533,6 +565,8 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
     "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -541,12 +575,18 @@
 
     "stack-utils": ["stack-utils@2.0.6", "", { "dependencies": { "escape-string-regexp": "^2.0.0" } }, "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ=="],
 
+    "string-width": ["string-width@8.3.0", "", { "dependencies": { "get-east-asian-width": "^1.5.0", "strip-ansi": "^7.1.2" } }, "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
     "style-mod": ["style-mod@4.1.4", "", {}, "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw=="],
 
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "svelte": ["svelte@5.57.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA=="],
 
+    "test-exclude": ["test-exclude@8.0.0", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^13.0.6", "minimatch": "^10.2.2" } }, "sha512-ZOffsNrXYggvU1mDGHk54I96r26P8SyMjO5slMKSc7+IWmtB/MQKnEC2fP51imB3/pT6YK5cT5E8f+Dd9KdyOQ=="],
+
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
 
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
@@ -565,6 +605,8 @@
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
+    "v8-to-istanbul": ["v8-to-istanbul@9.3.0", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", "@types/istanbul-lib-coverage": "^2.0.1", "convert-source-map": "^2.0.0" } }, "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA=="],
+
     "vue": ["vue@3.5.43", "", { "dependencies": { "@vue/compiler-dom": "3.5.43", "@vue/compiler-sfc": "3.5.43", "@vue/runtime-dom": "3.5.43", "@vue/server-renderer": "3.5.43", "@vue/shared": "3.5.43" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-o5qZoksdnjIKvW1srZ3ab7pcDNYAerBjRe54D0LBLfRdCYFrSgBHVXokMas35czQc0//lmx4/tuY4ZNQ+Rf2Ng=="],
 
     "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
@@ -575,6 +617,14 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
+    "wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],
+
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yargs": ["yargs@18.2.0", "", { "dependencies": { "cliui": "^9.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "string-width": "^8.2.1", "y18n": "^5.0.5", "yargs-parser": "^22.0.0" } }, "sha512-9OpKOLeaoNFecEp7P6iYbzze/5CqWoH7N3SMs/6y1XF4nMvFMspEGZzJ6uFi9MmQwXhyzqYoSEKO3tvA3Z/o2w=="],
+
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
@@ -589,6 +639,8 @@
 
     "chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
+    "cliui/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
     "css-tree/mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
 
     "eslint/eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
@@ -601,6 +653,12 @@
 
     "stack-utils/escape-string-regexp": ["escape-string-regexp@2.0.0", "", {}, "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="],
 
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
+    "yargs/yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
+
     "@types/ssh2/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
   }
 }
diff --git a/package.json b/package.json
index e53fc8f9..024bce45 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@b9g/crank": "^0.7.12",
     "@b9g/eslint-config": "^0.1.10",
-    "@b9g/libuild": "^0.2.26",
+    "@b9g/libuild": "^0.2.27",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/language": "^6.12.4",
diff --git a/scripts/generate-dom-idl.ts b/scripts/generate-dom-idl.ts
index bbf271c8..d8eb03d6 100644
--- a/scripts/generate-dom-idl.ts
+++ b/scripts/generate-dom-idl.ts
@@ -18,7 +18,7 @@ import {fileURLToPath} from "node:url";
 
 import {parse} from "webidl2";
 
-import {getWindowInterfaceNames} from "../src/internal/window.ts";
+import {getInterfaceObjects} from "../src/internal/window.ts";
 
 const require = createRequire(import.meta.url);
 const idlDir = dirname(require.resolve("@webref/idl/package.json"));
@@ -311,7 +311,7 @@ for (const definition of definitions) {
 	}
 }
 
-const windowInterfaces = new Set(getWindowInterfaceNames());
+const windowInterfaces = new Set(getInterfaceObjects().keys());
 const exposed = new Set(
 	definitions
 		.filter(
diff --git a/src/index.ts b/src/index.ts
index 9618efca..3760c57e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1607,11 +1607,12 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	applyMutations(termDOM.document);
 	runFocusFixup(termDOM.document);
 
-	if (styleCheck.enabled) {
+	// The checks run under test only, and the build strips them.
+	if (import.meta.litest && styleCheck.enabled) {
 		checkStylesFromScratch(termDOMSlots.cascade);
 	}
 	termDOMSlots.layout.performLayout();
-	if (layoutCheck.enabled) {
+	if (import.meta.litest && layoutCheck.enabled) {
 		checkLayoutFromScratch(termDOMSlots.layout);
 	}
 	clampScrollOffsets(termDOM.document);
@@ -1690,7 +1691,7 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 			: damage,
 	});
 	paint(termDOMSlots.painter, context);
-	if (context.partial && partialFrameCheck.enabled) {
+	if (import.meta.litest && context.partial && partialFrameCheck.enabled) {
 		checkPartialFrame(
 			termDOMSlots.painter,
 			context,
diff --git a/src/internal/images.ts b/src/internal/images.ts
index fc5fd0c2..529f4d3d 100644
--- a/src/internal/images.ts
+++ b/src/internal/images.ts
@@ -2171,7 +2171,7 @@ export async function readImageResponse(
  * which ends the decode with it, or the decode here stops at its next
  * yield, and the image fails.
  */
-let decodeTimeout = 10_000;
+const decodeTimeout = 10_000;
 // A worker with nothing to do is ended, so it keeps the runtime alive for
 // a second at most.
 const WORKER_IDLE_MS = 1_000;
@@ -2229,11 +2229,6 @@ export function setDecodeWorkerURL(url: URL | null): void {
 	}
 }
 
-/** How long a decode may take before it is stopped. */
-export function setDecodeTimeout(ms: number): void {
-	decodeTimeout = ms;
-}
-
 /**
  * Decode on a worker thread, where the runtime has one, so a large image
  * does not stall the page. Where no worker starts, the decode runs here,
diff --git a/src/internal/window.ts b/src/internal/window.ts
index 8336b1a0..128a18e6 100644
--- a/src/internal/window.ts
+++ b/src/internal/window.ts
@@ -183,11 +183,6 @@ export function getWindowClasses(): Readonly<Record<string, Constructor>> {
 	return windowClasses;
 }
 
-/** The names of the interfaces a window exposes. */
-export function getWindowInterfaceNames(): string[] {
-	return Object.keys(getWindowClasses());
-}
-
 // The window's interface objects, laid out before the first document is
 // made, so that every platform object has its unforgeable members.
 export function getInterfaceObjects(): ReadonlyMap<string, Constructor> {
diff --git a/tests/images.test.ts b/tests/images.test.ts
index 6429ccbd..c9f12547 100644
--- a/tests/images.test.ts
+++ b/tests/images.test.ts
@@ -13,6 +13,7 @@ import {expect, test} from "@b9g/libuild/test";
 import {
 	type Bitmap,
 	decodeImage,
+	decodeImageForPage,
 	decodeImageOffThread,
 	encodePNG,
 	keepAtMost,
@@ -23,7 +24,6 @@ import {
 	resolveImageURL,
 	retainDecoder,
 	sampleBitmap,
-	setDecodeTimeout,
 	setDecodeWorkerURL,
 	sniffImageType,
 } from "../src/internal/images.ts";
@@ -495,7 +495,6 @@ withWorker(
 	"an image past its time fails alone, and the images behind it decode",
 	async () => {
 		try {
-			setDecodeTimeout(1000);
 			setDecodeWorkerURL(
 				fakeWorker(`if (data.bytes.byteLength !== 1) ${ANSWER};`),
 			);
@@ -506,12 +505,11 @@ withWorker(
 					decodeImageOffThread(bytesOf("png-rgb.png")),
 				]),
 			).toEqual([
-				"The image took more than 1000 ms to decode",
+				"The image took more than 10000 ms to decode",
 				"1 wide",
 				"1 wide",
 			]);
 		} finally {
-			setDecodeTimeout(10_000);
 			setDecodeWorkerURL(null);
 		}
 	},
@@ -521,7 +519,6 @@ withWorker(
 	"a decode aborted while it waits is dropped, and the line moves on",
 	async () => {
 		try {
-			setDecodeTimeout(1000);
 			setDecodeWorkerURL(
 				fakeWorker(`if (data.bytes.byteLength !== 1) ${ANSWER};`),
 			);
@@ -541,7 +538,7 @@ withWorker(
 			];
 			abort.abort(new Error("The source changed"));
 			expect(await outcomes(decodes)).toEqual([
-				"The image took more than 1000 ms to decode",
+				"The image took more than 10000 ms to decode",
 				"The source changed",
 				"1 wide",
 			]);
@@ -550,7 +547,6 @@ withWorker(
 				decodeImageOffThread(bytesOf("png-rgb.png"), abort.signal),
 			).rejects.toThrow("The source changed");
 		} finally {
-			setDecodeTimeout(10_000);
 			setDecodeWorkerURL(null);
 		}
 	},
@@ -627,15 +623,9 @@ test("a decode on this thread stops past its time", async () => {
 		data[i] = (i * 2654435761) >>> 24;
 	}
 	const png = encodePNG({width, height: width, data});
-	try {
-		setDecodeTimeout(0);
-		await expect(decodeImageOffThread(png)).rejects.toThrow("too long");
-		setDecodeTimeout(10_000);
-		const bitmap = await decodeImageOffThread(png);
-		expect(bitmap.naturalWidth ?? bitmap.width).toBe(width);
-	} finally {
-		setDecodeTimeout(10_000);
-	}
+	await expect(decodeImageForPage(png, Date.now())).rejects.toThrow("too long");
+	const bitmap = await decodeImageOffThread(png);
+	expect(bitmap.naturalWidth ?? bitmap.width).toBe(width);
 });
 
 test("an image past MAX_KEPT_PIXELS is kept averaged down, with its natural size", () => {
diff --git a/tsconfig.json b/tsconfig.json
index 05bd3319..9dd4e8d2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,7 @@
     "noUnusedParameters": true,
     "noImplicitOverride": true
   },
-  "include": ["src", "tests", "fuzz", "examples", "scripts", "bench"],
+  "include": ["src", "tests", "fuzz", "examples", "scripts", "bench", "node_modules/@b9g/libuild/litest.d.ts"],
 	// The drift ledger instantiates every class against lib.dom, which is
 	// twenty seconds and a gigabyte the ordinary typecheck does not need.
 	// scripts/lib-dom-drift.ts checks it in a program of its own.

From 79fee0325a57f97a79dad9d0c507c083cfe062bc Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 12:32:21 -0400
Subject: [PATCH 76/99] Read the window's interface names from its classes in
 the IDL generator

getInterfaceObjects keeps only the interfaces the generated IDL already
names, which is the file the generator writes, so the names came out
short and the freshness check failed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/generate-dom-idl.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/generate-dom-idl.ts b/scripts/generate-dom-idl.ts
index d8eb03d6..a0841225 100644
--- a/scripts/generate-dom-idl.ts
+++ b/scripts/generate-dom-idl.ts
@@ -18,7 +18,7 @@ import {fileURLToPath} from "node:url";
 
 import {parse} from "webidl2";
 
-import {getInterfaceObjects} from "../src/internal/window.ts";
+import {getWindowClasses} from "../src/internal/window.ts";
 
 const require = createRequire(import.meta.url);
 const idlDir = dirname(require.resolve("@webref/idl/package.json"));
@@ -311,7 +311,7 @@ for (const definition of definitions) {
 	}
 }
 
-const windowInterfaces = new Set(getInterfaceObjects().keys());
+const windowInterfaces = new Set(Object.keys(getWindowClasses()));
 const exposed = new Set(
 	definitions
 		.filter(

From eed37fe3f8c158ee472205cb3ecc616c2d2bd340 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 12:37:25 -0400
Subject: [PATCH 77/99] Place an absolute box after an anonymous table, and
 keep percentage widths exact

A table part takes its place in the anonymous table around it, so an
absolute box after one starts below the table rather than above it.

An inline-block's percentage width was rounded to whole cells as it
resolved, so three at a third each asked for more cells than the line
had. Layout keeps the exact width and the grid rounds it, as it does
every other.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                          |  8 ++++++--
 tests/__snapshots__/email-fixtures.test.ts.snap |  4 ++--
 tests/tables.test.ts                            | 11 +++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index e7f935ec..64ba6099 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3789,7 +3789,7 @@ function collectLeaves(
 					) {
 						boxModel.width = Math.max(
 							0,
-							Math.round((widthValue.percentage / 100) * availableWidth),
+							(widthValue.percentage / 100) * availableWidth,
 						);
 					}
 				}
@@ -5357,7 +5357,11 @@ function getStaticPosition(
 	const index = children.indexOf(entry ?? getPrincipalBox(layout, element));
 	for (let i = index - 1; i >= 0; i--) {
 		const previous = children[i];
-		const previousNode = getOwnLayoutNode(layout, previous);
+		// A table part takes its place in the anonymous table around it.
+		const previousNode = getOwnLayoutNode(
+			layout,
+			box.tables?.get(previous) ?? previous,
+		);
 		if (
 			!previousNode ||
 			previousNode.parent !== containerNode ||
diff --git a/tests/__snapshots__/email-fixtures.test.ts.snap b/tests/__snapshots__/email-fixtures.test.ts.snap
index c0ea5a19..7bb4385c 100644
--- a/tests/__snapshots__/email-fixtures.test.ts.snap
+++ b/tests/__snapshots__/email-fixtures.test.ts.snap
@@ -79,7 +79,7 @@ exports[`email fixture: card-percent-cell.html 1`] = `
 
             ╭──────────────────────────────────────────────────────────────────────────╮
             │                                                                          │
-            │                          xxxxxx xx xxxxxxxxxx xx                         │
+            │                         xxxxxx xx xxxxxxxxxx xx                          │
             │                                                                          │
             │                                                                          │
             ╰──────────────────────────────────────────────────────────────────────────╯
@@ -521,7 +521,7 @@ exports[`email fixture: ghost-article.html 1`] = `
 
 
 
-                                               xxxxx
+                                                xxxxx
 
 
        ──────────────────────────────────────────────────────────────────────────────────────
diff --git a/tests/tables.test.ts b/tests/tables.test.ts
index 65cbcd06..ed0880a1 100644
--- a/tests/tables.test.ts
+++ b/tests/tables.test.ts
@@ -891,3 +891,14 @@ test("a row group spans its own rows", async () => {
 	);
 	dom.dispose();
 });
+
+test("an absolute box after an anonymous table starts below it", async () => {
+	const {box, dom} = await render(
+		"<div style=\"position: relative\">" +
+			"<div id=a style=\"display: table-cell\">a</div>" +
+			"<div style=\"display: table-cell\">bb</div>" +
+			"<span id=abs style=\"position: absolute\">X</span></div>",
+	);
+	expect(box("#abs").top).toBe(box("#a").top + box("#a").height);
+	dom.dispose();
+});

From 8de3bb7a1298217acebb2263f96be25268812639 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 12:44:11 -0400
Subject: [PATCH 78/99] Count ::before and ::after as their element's first and
 last child, and read counters()

A pseudo-element's counter-reset, counter-increment and counter-set
were ignored, so the common h2::before { counter-increment: section }
numbered every heading 0. An element's counters are now counted where
its subtree starts, after its ::before, which its first child takes,
and where it ends, after its ::after, which its next sibling takes its
values from.

counters() joins every counter of the name in scope. Both functions are
read as a content value's tokens, so a string that spells counter() is
only text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts     | 471 ++++++++++++++++++++++++++------------
 src/internal/cssvalues.ts |  11 +-
 tests/counters.test.ts    |  40 ++++
 3 files changed, 375 insertions(+), 147 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index e56af47b..f3677293 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6277,11 +6277,11 @@ export class Cascade {
 	// restyles, so a change sets countersStale and those elements restyle.
 	counterUsers: Set<Element>;
 	countersStale: boolean;
-	// Each element's counters, the inputs they were counted from, the
-	// elements that generate no box, and whether any were counted.
-	counterSets: WeakMap<Element, readonly CounterEntry[]>;
+	// Each element's counters where its subtree starts and where it ends,
+	// the inputs they were counted from, and whether any were counted.
+	counterSets: WeakMap<Element, CounterStart>;
+	counterEnds: WeakMap<Element, CounterEnd>;
 	counterKeys: WeakMap<Element, string>;
-	counterHidden: WeakSet<Element>;
 	countersCounted: boolean;
 
 	// Whether any rule is scoped, which is what adds proximity to the sort.
@@ -6402,8 +6402,8 @@ export class Cascade {
 		this.counterUsers = new Set();
 		this.countersStale = false;
 		this.counterSets = new WeakMap();
+		this.counterEnds = new WeakMap();
 		this.counterKeys = new WeakMap();
-		this.counterHidden = new WeakSet();
 		this.countersCounted = false;
 		this.scopedRulesExist = false;
 		this.hasRulesExist = false;
@@ -6976,11 +6976,7 @@ export function getMarkerContent(
 		return null;
 	}
 
-	let textContent = CSSValues.unquoteContent(content);
-
-	textContent = resolveCounterFunction(cascade, hostElement, textContent);
-
-	return textContent;
+	return evaluateContent(cascade, hostElement, "::marker", content);
 }
 
 // The document is being torn down.
@@ -7247,26 +7243,63 @@ function restyleAll(cascade: Cascade): void {
 	}
 }
 
-// Replace each counter(name[, style]) with the number it stands at
-// here.
-function resolveCounterFunction(
+// A content value's text: its strings, and what counter() and counters()
+// stand for where the pseudo-element is.
+function evaluateContent(
 	cascade: Cascade,
 	element: Element,
+	pseudoType: string,
 	content: string,
 ): string {
-	return content.replace(
-		/counter\s*\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/g,
-		(_match, counterName, style) => {
-			cascade.counterUsers.add(element);
-			const name = counterName.trim();
-			const counters = getCounterSet(cascade, element);
-			const index = findInnermost(counters, name);
-			return CSSValues.formatCounterValue(
-				index === -1 ? 0 : counters[index].value,
-				style?.trim() || "decimal",
-			);
-		},
-	);
+	return CSSValues.unquoteContent(content, (name, args) => {
+		if (name !== "counter" && name !== "counters") {
+			return null;
+		}
+		cascade.counterUsers.add(element);
+		const [counterName, ...rest] = splitArguments(args);
+		const counters = getCounters(cascade, element, pseudoType);
+		const values = counters
+			.filter((counter) => counter.name === counterName)
+			.map((counter) => counter.value);
+		if (values.length === 0) {
+			values.push(0);
+		}
+		if (name === "counter") {
+			return CSSValues.formatCounterValue(values.at(-1)!, rest[0] || "decimal");
+		}
+		const separator = CSSValues.unquoteContent(rest[0] ?? "\"\"");
+		return values
+			.map((value) => CSSValues.formatCounterValue(value, rest[1] || "decimal"))
+			.join(separator);
+	});
+}
+
+// Commas outside a string part a function's arguments.
+function splitArguments(args: string): string[] {
+	const parts: string[] = [];
+	let current = "";
+	let quote: string | null = null;
+	for (let index = 0; index < args.length; index++) {
+		const char = args[index];
+		if (quote !== null) {
+			current += char;
+			if (char === "\\") {
+				current += args[++index] ?? "";
+			} else if (char === quote) {
+				quote = null;
+			}
+		} else if (char === "\"" || char === "'") {
+			quote = char;
+			current += char;
+		} else if (char === ",") {
+			parts.push(current.trim());
+			current = "";
+		} else {
+			current += char;
+		}
+	}
+	parts.push(current.trim());
+	return parts;
 }
 
 function *flatDescendants(element: Element): Generator<Element> {
@@ -7434,8 +7467,8 @@ export function checkStylesFromScratch(cascade: Cascade): void {
 		hasResults: cascade.hasResults,
 		pseudoElementStyleCache: cascade.pseudoElementStyleCache,
 		counterSets: cascade.counterSets,
+		counterEnds: cascade.counterEnds,
 		counterKeys: cascade.counterKeys,
-		counterHidden: cascade.counterHidden,
 		countersCounted: cascade.countersCounted,
 		sharedRoot: cascade.sharedRoot,
 	};
@@ -7813,10 +7846,12 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 }
 
-// What an element's counters are computed from, or null for an element
-// that changes none of them. Such an element passes on what it inherits,
-// so adding or removing it leaves every other element's counters as
-// they were.
+const COUNTING_PSEUDO_ELEMENTS = ["::before", "::after"] as const;
+
+// What an element's counters are computed from, its ::before's and
+// ::after's included, or null for an element that changes none of them.
+// Such an element passes on what it inherits, so adding or removing it
+// leaves every other element's counters as they were.
 function getCounterKey(cascade: Cascade, element: Element): string | null {
 	const slots = _(cascade.declarationFor(element));
 	const parts: string[] = [];
@@ -7827,15 +7862,17 @@ function getCounterKey(cascade: Cascade, element: Element): string | null {
 		cascade.counterRulesExist ||
 		(attributeOf(element, "style") ?? "").includes("counter")
 	) {
-		for (const property of [
-			"counter-reset",
-			"counter-increment",
-			"counter-set",
-		]) {
-			const value = slots._computedValue(property);
-			if (value && value !== "none") {
-				parts.push(`${property}:${value}`);
-			}
+		const own = describeCounterEffects(
+			getElementCounterEffects(cascade, element),
+		);
+		if (own !== "") {
+			parts.push(own);
+		}
+	}
+	for (const type of COUNTING_PSEUDO_ELEMENTS) {
+		const effects = getPseudoCounterEffects(cascade, element, type);
+		if (effects !== null) {
+			parts.push(`${type}${describeCounterEffects(effects)}`);
 		}
 	}
 	const tag = element.tagName;
@@ -7901,177 +7938,322 @@ function forgetCounters(cascade: Cascade): void {
 	cascade.countersStale = false;
 	cascade.countersCounted = false;
 	cascade.counterSets = new WeakMap();
+	cascade.counterEnds = new WeakMap();
 	cascade.counterKeys = new WeakMap();
-	cascade.counterHidden = new WeakSet();
 }
 
+interface CounterEntry {
+	name: string;
+	// The box that made the counter, and the node holding it, whose other
+	// children are its siblings. A pseudo-element is held by its host.
+	origin: object;
+	holder: Node | null;
+	value: number;
+}
+
+// The counters an element's own properties leave, those its ::before
+// leaves, which its first child starts from, and whether it shows.
+interface CounterStart {
+	own: readonly CounterEntry[];
+	inner: readonly CounterEntry[];
+	hidden: boolean;
+}
+
+// What its ::after reads, if it has one, and what the subtree leaves,
+// ::after included, which the next sibling takes its values from.
+interface CounterEnd {
+	after: readonly CounterEntry[] | null;
+	end: readonly CounterEntry[];
+}
+
+interface CounterEffects {
+	resets: Array<[string, number]>;
+	increments: Array<[string, number]>;
+	sets: Array<[string, number]>;
+}
+
+const NO_EFFECTS: CounterEffects = {resets: [], increments: [], sets: []};
+
+const NO_COUNTERS: readonly CounterEntry[] = [];
+
 /**
- * The counters in scope at an element, innermost last (css-lists-3
- * §4.4). An element inherits the counters of its parent and of its
- * previous sibling, at the values of the element before it in tree
- * order, then applies its own counter-reset, counter-increment and
- * counter-set, in that order.
+ * The counters in scope where an element's content reads them, innermost
+ * last (css-lists-3 §4.4): the element's own for its ::marker, after its
+ * ::before for its ::before, and after its last child for its ::after.
+ * A box inherits the counters of its parent and of its previous sibling,
+ * at the values the box before it in tree order left, then applies its
+ * own counter-reset, counter-increment and counter-set. ::before is its
+ * host's first child and ::after its last.
  *
- * By induction on tree order, an element's counters begin with its
- * parent's, and so with those of every ancestor: an element starts from
- * its parent's and appends, and only ever removes a counter one of its
- * siblings made. The element before E in tree order is E's previous
- * sibling, or one of that sibling's descendants, or E's parent, so its
- * counters begin with the ones E inherits, at the values E inherits
- * them with. Inheriting is cutting that list to the length of the
- * previous sibling's, or the parent's.
+ * By induction on tree order, a box's counters begin with its parent's,
+ * and so with those of every ancestor: it starts from its parent's and
+ * appends, and only ever removes a counter one of its siblings made. The
+ * box before B in tree order is B's previous sibling, or one of that
+ * sibling's descendants, or B's parent, so its counters begin with the
+ * ones B inherits, at the values B inherits them with. Inheriting is
+ * cutting that list to the length of the previous sibling's, or the
+ * parent's.
  */
-function getCounterSet(
+function getCounters(
 	cascade: Cascade,
 	element: Element,
+	pseudoType: string | null,
 ): readonly CounterEntry[] {
-	const counted = cascade.counterSets.get(element);
-	if (counted !== undefined) {
-		return counted;
-	}
-	// The elements a set is built from come first in tree order, so they
-	// are counted first, from a stack rather than by recursion, since a
-	// long list asks through every item before.
-	const stack = [element];
+	if (pseudoType === "::after") {
+		countCounters(cascade, element, "end");
+		return cascade.counterEnds.get(element)!.after ?? NO_COUNTERS;
+	}
+	countCounters(cascade, element, "start");
+	const start = cascade.counterSets.get(element)!;
+	return pseudoType === "::before" ? start.inner : start.own;
+}
+
+// What each count is made from comes first in tree order, so it is
+// counted first, from a stack rather than by recursion, since a long
+// list asks through every item before.
+function countCounters(
+	cascade: Cascade,
+	element: Element,
+	part: "start" | "end",
+): void {
+	const isCounted = ([each, which]: [Element, "start" | "end"]) =>
+		which === "start"
+			? cascade.counterSets.has(each)
+			: cascade.counterEnds.has(each);
+	const stack: Array<[Element, "start" | "end"]> = [[element, part]];
 	while (stack.length > 0) {
-		const each = stack.at(-1)!;
-		if (cascade.counterSets.has(each)) {
+		const top = stack.at(-1)!;
+		if (isCounted(top)) {
 			stack.pop();
 			continue;
 		}
-		const parent = each.parentElement;
-		const sibling = each.previousElementSibling;
-		const before = getElementBefore(each);
-		const missing = [parent, sibling, before].filter(
-			(source): source is Element =>
-				source !== null && !cascade.counterSets.has(source),
-		);
+		const [each, which] = top;
+		const needs: Array<[Element, "start" | "end"]> = [];
+		if (which === "start") {
+			const sibling = each.previousElementSibling;
+			if (sibling !== null) {
+				needs.push([sibling, "start"], [sibling, "end"]);
+			} else if (each.parentElement !== null) {
+				needs.push([each.parentElement, "start"]);
+			}
+		} else {
+			needs.push([each, "start"]);
+			const last = each.lastElementChild;
+			if (last !== null) {
+				needs.push([last, "start"], [last, "end"]);
+			}
+		}
+		const missing = needs.filter((need) => !isCounted(need));
 		if (missing.length > 0) {
 			stack.push(...missing);
 			continue;
 		}
 		stack.pop();
-		countElement(cascade, each, parent, sibling, before);
+		if (which === "start") {
+			countStart(cascade, each);
+		} else {
+			countEnd(cascade, each);
+		}
 	}
-	return cascade.counterSets.get(element)!;
-}
-
-interface CounterEntry {
-	name: string;
-	origin: Element;
-	value: number;
 }
 
-const NO_COUNTERS: readonly CounterEntry[] = [];
-
-function getElementBefore(element: Element): Element | null {
-	let before = element.previousElementSibling;
-	if (before === null) {
-		return element.parentElement;
-	}
-	while (before.lastElementChild !== null) {
-		before = before.lastElementChild;
-	}
-	return before;
+function inherit(
+	base: readonly CounterEntry[],
+	preceding: readonly CounterEntry[],
+): readonly CounterEntry[] {
+	return preceding.length === base.length
+		? preceding
+		: preceding.slice(0, base.length);
 }
 
-function countElement(
-	cascade: Cascade,
-	element: Element,
-	parent: Element | null,
-	sibling: Element | null,
-	before: Element | null,
-): void {
+function countStart(cascade: Cascade, element: Element): void {
 	cascade.countersCounted = true;
-	const inherits = sibling ?? parent;
-	const length = inherits === null
-		? 0
-		: cascade.counterSets.get(inherits)!.length;
-	const preceding = before === null
-		? NO_COUNTERS
-		: cascade.counterSets.get(before)!;
-	const inherited = preceding.length === length
-		? preceding
-		: preceding.slice(0, length);
+	const sibling = element.previousElementSibling;
+	const parent = element.parentElement;
+	const parentStart = parent === null ? null : cascade.counterSets.get(parent)!;
+	const inherited = sibling !== null
+		? inherit(
+			cascade.counterSets.get(sibling)!.own,
+			cascade.counterEnds.get(sibling)!.end,
+		)
+		: parentStart?.inner ?? NO_COUNTERS;
 	const key = getCounterKey(cascade, element);
-	const hidden =
-		(parent !== null && cascade.counterHidden.has(parent)) ||
-		(key !== null && key.startsWith("hidden"));
 	if (key !== null) {
 		cascade.counterKeys.set(element, key);
 	}
-	if (hidden) {
-		cascade.counterHidden.add(element);
+	const hidden =
+		parentStart?.hidden === true || (key !== null && key.startsWith("hidden"));
+	if (key === null || hidden) {
+		cascade.counterSets.set(element, {
+			own: inherited,
+			inner: inherited,
+			hidden,
+		});
+		return;
 	}
-	cascade.counterSets.set(
+	const own = applyCounters(
+		getElementCounterEffects(cascade, element),
+		inherited,
 		element,
-		key === null || hidden
-			? inherited
-			: applyCounters(cascade, element, inherited),
+		element.parentNode,
 	);
+	const before = getPseudoCounterEffects(cascade, element, "::before");
+	cascade.counterSets.set(element, {
+		own,
+		inner: before === null ? own : applyCounters(before, own, {}, element),
+		hidden,
+	});
+}
+
+function countEnd(cascade: Cascade, element: Element): void {
+	const start = cascade.counterSets.get(element)!;
+	const last = element.lastElementChild;
+	const base = last === null ? start.inner : cascade.counterSets.get(last)!.own;
+	const preceding = last === null
+		? start.inner
+		: cascade.counterEnds.get(last)!.end;
+	const after =
+		start.hidden ||
+			!hasGeneratedContent(cascade, element, "::after")
+			? null
+			: applyCounters(
+				getPseudoCounterEffects(cascade, element, "::after") ?? NO_EFFECTS,
+				inherit(base, preceding),
+				{},
+				element,
+			);
+	cascade.counterEnds.set(element, {after, end: after ?? preceding});
+}
+
+function describeCounterEffects(effects: CounterEffects): string {
+	const describe = (pairs: Array<[string, number]>) =>
+		pairs.map(([name, value]) => `${name} ${value}`).join(" ");
+	return effects.resets.length === 0 &&
+			effects.increments.length === 0 &&
+			effects.sets.length === 0
+		? ""
+		: `reset:${describe(effects.resets)};increment:${
+			describe(effects.increments)
+		};set:${describe(effects.sets)}`;
+}
+
+function readCounterEffects(
+	read: (property: string) => string | undefined,
+): CounterEffects {
+	const declared = (property: string, fallback: number) => {
+		const value = read(property);
+		return value && value !== "none"
+			? CSSValues.getCounterPairs(value, fallback)
+			: [];
+	};
+	return {
+		resets: declared("counter-reset", 0),
+		increments: declared("counter-increment", 1),
+		sets: declared("counter-set", 0),
+	};
 }
 
 // An element's own counter-reset, counter-increment and counter-set,
 // with the list-item counter HTML's lists keep: a list resets it, an
 // item steps it, and an item's value sets it.
-function applyCounters(
+function getElementCounterEffects(
 	cascade: Cascade,
 	element: Element,
-	inherited: readonly CounterEntry[],
-): readonly CounterEntry[] {
-	const counters = [...inherited];
+): CounterEffects {
 	const slots = _(cascade.declarationFor(element));
-	const declared = (property: string, fallback: number) => {
-		const value = slots._computedValue(property);
-		return value && value !== "none"
-			? CSSValues.getCounterPairs(value, fallback)
-			: [];
-	};
-	const resets = declared("counter-reset", 0);
-	const increments = declared("counter-increment", 1);
-	const sets = declared("counter-set", 0);
+	const effects = readCounterEffects((property) =>
+		slots._computedValue(property) ?? undefined,
+	);
 	const names = (pairs: Array<[string, number]>) => pairs.map(([name]) => name);
 	const tag = element.tagName;
-	if ((tag === "OL" || tag === "UL") && !names(resets).includes("list-item")) {
-		resets.push(["list-item", getListStart(element)]);
+	if (
+		(tag === "OL" || tag === "UL") &&
+		!names(effects.resets).includes("list-item")
+	) {
+		effects.resets.push(["list-item", getListStart(element)]);
 	}
 	if (tag === "LI") {
 		const list = element.parentElement;
-		if (!names(increments).includes("list-item")) {
-			increments.push([
+		if (!names(effects.increments).includes("list-item")) {
+			effects.increments.push([
 				"list-item",
 				list?.tagName === "OL" && hasAttributeOf(list, "reversed") ? -1 : 1,
 			]);
 		}
 		const value = parseInt(attributeOf(element, "value") ?? "", 10);
-		if (Number.isFinite(value) && !names(sets).includes("list-item")) {
-			sets.push(["list-item", value]);
+		if (Number.isFinite(value) && !names(effects.sets).includes("list-item")) {
+			effects.sets.push(["list-item", value]);
 		}
 	}
+	return effects;
+}
+
+// A pseudo-element's counter properties, when it generates a box and
+// sets any: a ::before or ::after with no content is no box.
+function getPseudoCounterEffects(
+	cascade: Cascade,
+	element: Element,
+	type: string,
+): CounterEffects | null {
+	if (
+		!cascade.counterRulesExist || !hasGeneratedContent(cascade, element, type)
+	) {
+		return null;
+	}
+	const style = computePseudoElementStyle(cascade, element, type);
+	const effects = readCounterEffects((property) => style[property]);
+	return describeCounterEffects(effects) === "" ? null : effects;
+}
+
+function hasGeneratedContent(
+	cascade: Cascade,
+	element: Element,
+	type: string,
+): boolean {
+	if (!(cascade.pseudoRulesByType.get(type)?.length)) {
+		return false;
+	}
+	const style = computePseudoElementStyle(cascade, element, type);
+	const content = style.content;
+	return content !== undefined &&
+		content !== "none" &&
+		content !== "normal" &&
+		style.display !== "none";
+}
+
+// A reset makes a counter, in place of one of the same name a sibling
+// made. A step or a set reaches the innermost of the name, made here at
+// zero if there is none.
+function applyCounters(
+	effects: CounterEffects,
+	inherited: readonly CounterEntry[],
+	origin: object,
+	holder: Node | null,
+): readonly CounterEntry[] {
+	const counters = [...inherited];
 	const instantiate = (name: string, value: number): number => {
 		const index = counters.findIndex((counter) =>
 			counter.name === name &&
-			(counter.origin === element ||
-				counter.origin.parentNode === element.parentNode),
+			(counter.origin === origin || counter.holder === holder),
 		);
 		if (index !== -1) {
 			counters.splice(index, 1);
 		}
-		counters.push({name, origin: element, value});
+		counters.push({name, origin, holder, value});
 		return counters.length - 1;
 	};
 	const innermost = (name: string): number => {
 		const index = findInnermost(counters, name);
 		return index === -1 ? instantiate(name, 0) : index;
 	};
-	for (const [name, value] of resets) {
+	for (const [name, value] of effects.resets) {
 		instantiate(name, value);
 	}
-	for (const [name, step] of increments) {
+	for (const [name, step] of effects.increments) {
 		const index = innermost(name);
 		counters[index] = {...counters[index], value: counters[index].value + step};
 	}
-	for (const [name, value] of sets) {
+	for (const [name, value] of effects.sets) {
 		const index = innermost(name);
 		counters[index] = {...counters[index], value};
 	}
@@ -8883,6 +9065,7 @@ function invalidateElementCaches(
 	}
 	cascade.pseudoElementStyleCache.delete(element);
 	cascade.counterSets.delete(element);
+	cascade.counterEnds.delete(element);
 	noteCounterChange(cascade, element);
 }
 
@@ -10568,9 +10751,7 @@ function getPseudoContent(
 		return null;
 	}
 
-	const textContent = CSSValues.unquoteContent(content);
-
-	return resolveCounterFunction(cascade, hostElement, textContent);
+	return evaluateContent(cascade, hostElement, pseudoType, content);
 }
 
 function attachPseudoElements(cascade: Cascade): void {
diff --git a/src/internal/cssvalues.ts b/src/internal/cssvalues.ts
index c7dcc2e3..513fa83b 100644
--- a/src/internal/cssvalues.ts
+++ b/src/internal/cssvalues.ts
@@ -2446,7 +2446,12 @@ export function withMarkerSeparator(marker: string): string {
 // A content value is a SEQUENCE of components (strings and functions).
 // Stripping quotes only when the whole value was one quoted string left
 // `"` in the rendered marker.
-export function unquoteContent(content: string): string {
+// A function's text goes through `evaluate`, which answers what it stands
+// for, or null to keep it as written.
+export function unquoteContent(
+	content: string,
+	evaluate?: (name: string, args: string) => string | null,
+): string {
 	let out = "";
 	let index = 0;
 
@@ -2481,7 +2486,9 @@ export function unquoteContent(content: string): string {
 					break;
 				}
 			}
-			out += content.slice(index, end);
+			const token = content.slice(index, end);
+			const call = /^([\w-]+)\(([\s\S]*)\)$/.exec(token);
+			out += (call && evaluate?.(call[1].toLowerCase(), call[2])) ?? token;
 			index = end;
 		}
 	}
diff --git a/tests/counters.test.ts b/tests/counters.test.ts
index f3b7dd78..06c679f2 100644
--- a/tests/counters.test.ts
+++ b/tests/counters.test.ts
@@ -133,3 +133,43 @@ test("a list item's value sets the list-item counter", async () => {
 		),
 	).toEqual(["4) a", "9) b", "10) c"]);
 });
+
+test("a ::before counts, as its element's first child", async () => {
+	expect(
+		await render(
+			"body { counter-reset: section } " +
+				"h2::before { counter-increment: section; " +
+				"content: counter(section) \". \" } h2 { margin: 0 }",
+			"<h2>a</h2><h2>b</h2><h2>c</h2>",
+		),
+	).toEqual(["1. a", "2. b", "3. c"]);
+});
+
+test("a ::after counts, as its element's last child", async () => {
+	expect(
+		await render(
+			NUMBERED + " .a::after { counter-increment: n 10; content: \"\" }",
+			"<div class=n>a</div><div class=a>b</div><div class=n>c</div>",
+		),
+	).toEqual(["1. a", "b", "12. c"]);
+});
+
+test("counters() joins every counter of the name in scope", async () => {
+	expect(
+		await render(
+			"ol { counter-reset: item; list-style: none; padding: 0 } " +
+				"li { counter-increment: item } " +
+				"li::before { content: counters(item, \".\") \" \" }",
+			"<ol><li>a<ol><li>b</li><li>c</li></ol></li><li>d</li></ol>",
+		),
+	).toEqual(["1 a", "1.1 b", "1.2 c", "2 d"]);
+});
+
+test("a string that spells counter() is only text", async () => {
+	expect(
+		await render(
+			NUMBERED + " .s::before { content: \"counter(n) \" }",
+			"<div class=s>a</div>",
+		),
+	).toEqual(["counter(n) a"]);
+});

From 6e6cf2899d72acf6f589a7ccc6dff6e564db2157 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 12:50:04 -0400
Subject: [PATCH 79/99] Lay out display: inline-table as a table that sits on a
 line

inline-table was not a display layout knew, so it laid out as a block.
It is now an atomic inline whose own formatting context is a table,
as an inline-grid's is a grid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 33 +++++++++++++++++++++++----------
 tests/tables.test.ts   | 14 ++++++++++++++
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 64ba6099..b8ef3cdc 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -144,6 +144,7 @@ export type Display =
 	"inline-block" |
 	"inline-flex" |
 	"inline-grid" |
+	"inline-table" |
 	"flex" |
 	"grid" |
 	"list-item" |
@@ -166,6 +167,7 @@ const DISPLAYS = new Set<string>([
 	"inline-block",
 	"inline-flex",
 	"inline-grid",
+	"inline-table",
 	"flex",
 	"grid",
 	"list-item",
@@ -229,9 +231,19 @@ function getLayoutDisplay(element: Element): Display {
 	return DISPLAYS.has(value) ? (value as Display) : "block";
 }
 
+function applyTableContainer(style: Style, element: Element): void {
+	style.displayType = "table";
+	style.borderCollapse =
+		getComputedValue(element, "border-collapse") === "collapse";
+	style.tableLayoutFixed =
+		getComputedValue(element, "table-layout") === "fixed";
+}
+
 // A box that sits on a line whole, measured as one opaque unit.
 export function isAtomicInline(display: Display): boolean {
-	return display === "inline-block" || display === "inline-grid";
+	return display === "inline-block" ||
+		display === "inline-grid" ||
+		display === "inline-table";
 }
 
 // About a display value. For a node, ask isInlineLevel.
@@ -1523,12 +1535,8 @@ function styleLayoutNodeProperties(
 		applyGridContainer(style, element);
 	} else if (display === "flex") {
 		style.displayType = "flex";
-	} else if (display === "table") {
-		style.displayType = "table";
-		style.borderCollapse =
-			getComputedValue(element, "border-collapse") === "collapse";
-		style.tableLayoutFixed =
-			getComputedValue(element, "table-layout") === "fixed";
+	} else if (display === "table" || display === "inline-table") {
+		applyTableContainer(style, element);
 	} else if (display === "table-header-group") {
 		style.displayType = "table-header-group";
 	} else if (display === "table-footer-group") {
@@ -1891,6 +1899,7 @@ function isTablePart(node: Node): boolean {
 
 function isTableInternal(display: Display): boolean {
 	return display === "table" ||
+		display === "inline-table" ||
 		display === "table-row" ||
 		display === "table-row-group" ||
 		display === "table-header-group" ||
@@ -2656,14 +2665,15 @@ function syncIndependentFormattingContext(
 ): void {
 	const box = getPrincipalBox(layout, element);
 	const display = getLayoutDisplay(element);
-	// An inline-grid always lays its own content out, because a line cannot
-	// contain a grid piecemeal. An inline-block does so only once it holds a
+	// An inline-grid or inline-table always lays its own content out,
+	// because a line cannot contain a grid or a table piecemeal. An inline-block does so only once it holds a
 	// block-level box. Never a plain inline: it is broken instead, and
 	// taking its content here would steal back the container's boxes.
 	const grid = display === "inline-grid";
+	const table = display === "inline-table";
 	if (
 		!establishesIndependentFormattingContext(element) ||
-		(!grid && !hasBlockLevelBox(element))
+		(!grid && !table && !hasBlockLevelBox(element))
 	) {
 		dropIndependentFormattingContext(box);
 		return;
@@ -2684,6 +2694,9 @@ function syncIndependentFormattingContext(
 	const style = createStyle();
 	style.blockFormattingContext = true;
 	style.displayType = grid ? "grid" : "block";
+	if (table) {
+		applyTableContainer(style, element);
+	}
 	if (grid) {
 		applyGridContainer(style, element);
 		const gaps: Array<[string, Gutter]> = [
diff --git a/tests/tables.test.ts b/tests/tables.test.ts
index ed0880a1..6e8142ac 100644
--- a/tests/tables.test.ts
+++ b/tests/tables.test.ts
@@ -902,3 +902,17 @@ test("an absolute box after an anonymous table starts below it", async () => {
 	expect(box("#abs").top).toBe(box("#a").top + box("#a").height);
 	dom.dispose();
 });
+
+test("an inline-table sits on the line with the text around it", async () => {
+	const {box, dom} = await render(
+		"<p>before <span id=t style=\"display: inline-table\">" +
+			"<span style=\"display: table-row\">" +
+			"<span id=a style=\"display: table-cell\">a</span>" +
+			"<span id=b style=\"display: table-cell\">bb</span></span></span>" +
+			" after</p>",
+	);
+	expect(box("#t").top).toBe(box("p").top);
+	expect(box("#t").left).toBe("before ".length);
+	expect(box("#b").left).toBe(box("#a").left + box("#a").width);
+	dom.dispose();
+});

From f30525c468ba051835a2e7f6985f171a377d7bff Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:04:35 -0400
Subject: [PATCH 80/99] Count the band from an inline-block's root when its
 positioned boxes paint

A box an inline-block lays out has its extents counted from the
inline-block's own root. Painted through its stacking layer, such a
box was culled against the band counted in document rows, so a
positioned cell in a table made an inline-block went unpainted when the
frame's rows were not its root-relative ones. The band is now counted
from the root there, as it is when the inline-block paints its content.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts    |  2 +-
 src/internal/painter.ts   | 31 ++++++++++++++++++++++++++++++-
 tests/incremental.test.ts | 18 ++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index b8ef3cdc..864f5089 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -6996,7 +6996,7 @@ function invalidateHost(layout: Layout, host: Element): void {
 	invalidateEnclosingMeasure(layout, host);
 }
 
-function isInDocumentTree(layout: Layout, node: LayoutNode): boolean {
+export function isInDocumentTree(layout: Layout, node: LayoutNode): boolean {
 	let root = node;
 	while (root.parent !== null) {
 		root = root.parent;
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index f63604e8..cd11ff08 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -72,6 +72,7 @@ import {
 	hoistedToLayer,
 	type InlineBlockLeaf,
 	isAtomicInline,
+	isInDocumentTree,
 	isPositioned,
 	isStackingContext,
 	type Layout,
@@ -816,7 +817,35 @@ function paintEntry(
 	if (rect === null) {
 		return;
 	}
-	paintBlock(painter, element, node, {x: rect.x, y: rect.y}, ctx, afterOwnBox);
+	// A box an inline-block lays out has its extents counted from that
+	// box's own root, so the band is counted from there too, as it is when
+	// the inline-block paints its content.
+	const extent = paintExtent(node);
+	if (extent === undefined || isInDocumentTree(layout, node)) {
+		paintBlock(
+			painter,
+			element,
+			node,
+			{x: rect.x, y: rect.y},
+			ctx,
+			afterOwnBox,
+		);
+		return;
+	}
+	const scrolled = painter.scrolledRows;
+	painter.scrolledRows = extent.origin - Math.round(rect.y);
+	try {
+		paintBlock(
+			painter,
+			element,
+			node,
+			{x: rect.x, y: rect.y},
+			ctx,
+			afterOwnBox,
+		);
+	} finally {
+		painter.scrolledRows = scrolled;
+	}
 }
 
 function isOutsideViewport(
diff --git a/tests/incremental.test.ts b/tests/incremental.test.ts
index 48068844..3a891234 100644
--- a/tests/incremental.test.ts
+++ b/tests/incremental.test.ts
@@ -173,3 +173,21 @@ test("a block in an inline that dissolves leaves no box behind", async () => {
 		(document) => document.getElementById("p").style.display = "contents",
 	]);
 });
+
+test("a positioned cell in an inline-block paints on the rows it is on", async () => {
+	await replay(
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>" +
+			"<div>6</div><div>7</div><div>8</div><table id=t><tbody id=g><tr><td class=box>x</td>" +
+			"<td id=b>y y</td></tr></tbody></table>",
+		[
+			(document) => document.getElementById("t").style.display = "inline-block",
+			(document) => document.getElementById("b").style.position = "relative",
+			(document) => {
+				const block = document.createElement("div");
+				block.textContent = "e";
+				document.getElementById("b").prepend(block);
+			},
+			(document) => document.getElementById("g").style.marginTop = "24px",
+		],
+	);
+});

From 190d0a595ff1406864a002ff36d7386c3486a095 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:11:15 -0400
Subject: [PATCH 81/99] Hit-test boxes an inline-block lays out by their rects,
 not by extents in another frame

A box an inline-block lays out has its extents counted from the
inline-block's own root. Hit-testing compared the pointer's document
row with them, to rule a box out and to search a list's children, so
a pointer over such a list landed on the list rather than the child.
Both shortcuts now apply only to boxes counted in document rows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                  | 10 +++++++++-
 tests/element-from-point-shadow.test.ts | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 864f5089..efcc800c 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -5271,9 +5271,14 @@ function hitTestInFlow(
 			) {
 				return null;
 			}
+			// Extents an inline-block's own root counts are in its rows, not
+			// the document's, so a box laid out there is not ruled out by one.
 			const node = getLayoutNode(layout, element);
 			const extent = node === null ? undefined : paintExtent(node);
-			if (extent === undefined || y < extent.top || y >= extent.bottom) {
+			if (
+				(extent === undefined || y < extent.top || y >= extent.bottom) &&
+				(node === null || isInDocumentTree(layout, node))
+			) {
 				return null;
 			}
 		}
@@ -7145,6 +7150,9 @@ function getVisibleChildren(
 		// A measure-function leaf never decomposes into layout children, so
 		// empty children[] means "not decomposed," not "nothing to paint."
 		layoutNode.measure !== null ||
+		// Its children's extents are counted from an inline-block's own
+		// root, not in the rows asked about.
+		!isInDocumentTree(layout, layoutNode) ||
 		extents.get(layoutNode)?.unstackedChildren !== 0 ||
 		layoutNode.style.displayType !== "block" ||
 		// Cheap proxy for "every DOM child has exactly one children[]
diff --git a/tests/element-from-point-shadow.test.ts b/tests/element-from-point-shadow.test.ts
index 6434b8ed..1fd000ec 100644
--- a/tests/element-from-point-shadow.test.ts
+++ b/tests/element-from-point-shadow.test.ts
@@ -27,3 +27,18 @@ test("elementFromPoint retargets against the tree it is asked from", async () =>
 	]);
 	dom.dispose();
 });
+
+test("elementFromPoint finds a box an inline-block lays out low on the page", async () => {
+	const dom = new TermDOM({
+		transport: new MockProcess({cols: 40, rows: 12}).transport,
+	});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>" +
+		"<span style=\"display: inline-block\"><div id=list>" +
+		"<div id=a>first</div><div id=b>second</div></div></span>";
+	await nextFrame(dom);
+	expect(document.elementFromPoint(1, 6)!.id).toBe("a");
+	expect(document.elementFromPoint(1, 7)!.id).toBe("b");
+	dom.dispose();
+});

From e0be5577e149ab5f2cf0120853e2dde807f68410 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:23:41 -0400
Subject: [PATCH 82/99] Let a line's extent cover what its inline-blocks paint

An inline-block paints its content, which can reach past its own box
and the line it sits on, and the line's extent left that out. A box is
ruled out of a hit test only by an extent that covers it, so content
overflowing an inline-block could not be hit. The line's extent now
reaches as far as each inline-block's content does, and a box measured
on a line is ruled out by the line's extent, or by none.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                  | 50 ++++++++++++++++++++++---
 tests/element-from-point-shadow.test.ts | 16 ++++++++
 tests/partial-repaint.test.ts           | 15 ++++++++
 3 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index efcc800c..361ff500 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1148,6 +1148,14 @@ function computePaintExtents(
 			right,
 			node.style.border.left + node.result.padding.left + lines.maxLineWidth,
 		);
+		// An inline-block on a line paints its content, which can reach past
+		// its own box and the line.
+		const contentTop = top + node.style.border.top + node.result.padding.top;
+		for (const [reach, overflow] of getInlineBlockReaches(layout, lines)) {
+			highest = Math.min(highest, contentTop + reach);
+			lowest = Math.max(lowest, contentTop + overflow);
+			bottom = Math.max(bottom, contentTop - top + overflow);
+		}
 	}
 	const clips = node.style.clipsOverflow;
 	let scrollRight: number | null = 0;
@@ -1235,6 +1243,32 @@ function computePaintExtents(
 	return extent;
 }
 
+// The rows each inline-block on these lines paints, from the top of the
+// lines: its content box's, reaching as far as what it lays out does.
+function *getInlineBlockReaches(
+	layout: Layout,
+	lines: BreakResult,
+	from = 0,
+): Generator<[number, number]> {
+	for (const line of lines.lines) {
+		for (const {leaf} of line.segments) {
+			if (leaf.type !== "inline-block") {
+				continue;
+			}
+			const top =
+				from + line.y + leaf.boxModel.borderTopWidth + leaf.boxModel.paddingTop;
+			const context = layout.boxes.get(leaf.node)?.independentFormattingContext;
+			const extent = context ? extents.get(context) : undefined;
+			if (extent !== undefined) {
+				yield [top + extent.top, top + extent.bottom];
+			} else if (leaf.breakResult !== undefined) {
+				yield [top, top + leaf.breakResult.totalHeight];
+				yield *getInlineBlockReaches(layout, leaf.breakResult, top);
+			}
+		}
+	}
+}
+
 function styleLayoutNode(
 	element: Element,
 	layoutNode: LayoutNode,
@@ -5271,13 +5305,17 @@ function hitTestInFlow(
 			) {
 				return null;
 			}
-			// Extents an inline-block's own root counts are in its rows, not
-			// the document's, so a box laid out there is not ruled out by one.
-			const node = getLayoutNode(layout, element);
-			const extent = node === null ? undefined : paintExtent(node);
+			// A box measured on a line is covered by the line's extent. One an
+			// inline-block's own root counts is in that root's rows, not the
+			// document's, so it rules nothing out, and nor does no extent.
+			const node =
+				getLayoutNode(layout, element) ?? getBox(layout, element)?.layoutNode;
+			const extent = node ? paintExtent(node) : undefined;
 			if (
-				(extent === undefined || y < extent.top || y >= extent.bottom) &&
-				(node === null || isInDocumentTree(layout, node))
+				node &&
+				extent !== undefined &&
+				isInDocumentTree(layout, node) &&
+				(y < extent.top || y >= extent.bottom)
 			) {
 				return null;
 			}
diff --git a/tests/element-from-point-shadow.test.ts b/tests/element-from-point-shadow.test.ts
index 1fd000ec..954586de 100644
--- a/tests/element-from-point-shadow.test.ts
+++ b/tests/element-from-point-shadow.test.ts
@@ -42,3 +42,19 @@ test("elementFromPoint finds a box an inline-block lays out low on the page", as
 	expect(document.elementFromPoint(1, 7)!.id).toBe("b");
 	dom.dispose();
 });
+
+test("elementFromPoint finds content that overflows an inline-block", async () => {
+	const dom = new TermDOM({
+		transport: new MockProcess({cols: 40, rows: 12}).transport,
+	});
+	const {document} = dom;
+	document.body.innerHTML =
+		"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>" +
+		"<span style=\"display: inline-block\"><div style=\"height: 1px\">" +
+		"<div id=a>first</div><div id=b>second</div><div id=c>third</div>" +
+		"</div></span>";
+	await nextFrame(dom);
+	expect(document.elementFromPoint(1, 7)!.id).toBe("b");
+	expect(document.elementFromPoint(1, 8)!.id).toBe("c");
+	dom.dispose();
+});
diff --git a/tests/partial-repaint.test.ts b/tests/partial-repaint.test.ts
index f70d8ba4..e898a797 100644
--- a/tests/partial-repaint.test.ts
+++ b/tests/partial-repaint.test.ts
@@ -382,3 +382,18 @@ test("an outlined box with no height paints no row", async () => {
 	expect(partial).toBeGreaterThan(0);
 	dom.dispose();
 });
+
+test("a change in what overflows an inline-block repaints its rows", async () => {
+	const {partial, dom} = await repaint(
+		lines(6) +
+		"<span style=\"display: inline-block\">" +
+			"<div style=\"height: 1px\"><div>first</div><div>second</div>" +
+			"<div id=c>third</div></div></span>" +
+		lines(3, "after"),
+		(document) => {
+			document.getElementById("c").textContent = "changed";
+		},
+	);
+	expect(partial).toBeGreaterThan(0);
+	dom.dispose();
+});

From f8b4c93776ecc2580b3d6d0169839875d372eb87 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:38:03 -0400
Subject: [PATCH 83/99] Record the frame an extent's rows are counted in, and
 read extents only in it

An extent's rows count from the document's root or from the root an
inline-block lays its content out under. Readers compared them with
rows of the document wherever they came from, and three fixes each put
a check in front of one reader. The extent now records its frame, and
paintExtent answers only a caller counting in that frame: the painter,
which knows the frame it is painting, and hit-testing and damage,
which count in the document's. An extent of another frame reads as
none, which every reader already takes to mean "do not cull".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts  | 70 ++++++++++++++++++++++-----------------
 src/internal/painter.ts | 72 ++++++++++++++++++++++++-----------------
 2 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 361ff500..431c4854 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1034,13 +1034,16 @@ interface Styling {
 const stylings = new WeakMap<LayoutNode, Styling>();
 
 interface Extent {
-	// The box's own top, in absolute document rows, and its left edge and
-	// size, which a repaint compares to find what moved.
+	// The root its rows are counted from: the document's, or the one an
+	// inline-block lays its own content out under, whose rows start at 0.
+	frame: LayoutNode;
+	// The box's own top, in absolute rows of its frame, and its left edge
+	// and size, which a repaint compares to find what moved.
 	origin: number;
 	left: number;
 	width: number;
 	height: number;
-	// The rows the subtree can paint, in absolute document rows. Absolutely
+	// The rows the subtree can paint, in rows of its frame. Absolutely
 	// positioned children push it outside the box.
 	top: number;
 	bottom: number;
@@ -1081,11 +1084,17 @@ function computePaintExtents(
 	originTop: number,
 	settled = false,
 	fixed = false,
+	frame = node,
 ): Extent {
 	const top = originTop + node.grid.top;
 	const left = originLeft + node.grid.left;
 	let extent = extents.get(node);
-	if (settled && extent !== undefined && extent.origin === top) {
+	if (
+		settled &&
+		extent !== undefined &&
+		extent.origin === top &&
+		extent.frame === frame
+	) {
 		return extent;
 	}
 	fixed ||= node.style.positionType === "fixed";
@@ -1120,6 +1129,7 @@ function computePaintExtents(
 	}
 	if (extent === undefined) {
 		extent = {
+			frame,
 			origin: top,
 			left: 0,
 			width: 0,
@@ -1182,6 +1192,7 @@ function computePaintExtents(
 			top,
 			settled || node.settled,
 			fixed,
+			frame,
 		);
 		if (childExtent.top < previousTop || childExtent.bottom < previousBottom) {
 			rowOrdered = false;
@@ -1225,6 +1236,7 @@ function computePaintExtents(
 			bottom = Math.max(bottom, child.grid.top + childExtent.overflowBottom);
 		}
 	}
+	extent.frame = frame;
 	extent.origin = top;
 	extent.left = left;
 	extent.width = getComputedWidth(node);
@@ -5305,18 +5317,12 @@ function hitTestInFlow(
 			) {
 				return null;
 			}
-			// A box measured on a line is covered by the line's extent. One an
-			// inline-block's own root counts is in that root's rows, not the
-			// document's, so it rules nothing out, and nor does no extent.
+			// A box measured on a line is covered by the line's extent. With no
+			// extent counted in document rows, nothing is ruled out.
 			const node =
 				getLayoutNode(layout, element) ?? getBox(layout, element)?.layoutNode;
-			const extent = node ? paintExtent(node) : undefined;
-			if (
-				node &&
-				extent !== undefined &&
-				isInDocumentTree(layout, node) &&
-				(y < extent.top || y >= extent.bottom)
-			) {
+			const extent = node ? paintExtent(node, layout.initialBlock) : undefined;
+			if (extent !== undefined && (y < extent.top || y >= extent.bottom)) {
 				return null;
 			}
 		}
@@ -7039,14 +7045,6 @@ function invalidateHost(layout: Layout, host: Element): void {
 	invalidateEnclosingMeasure(layout, host);
 }
 
-export function isInDocumentTree(layout: Layout, node: LayoutNode): boolean {
-	let root = node;
-	while (root.parent !== null) {
-		root = root.parent;
-	}
-	return root === layout.initialBlock;
-}
-
 function isInFixedBox(node: LayoutNode): boolean {
 	for (let at: LayoutNode | null = node; at !== null; at = at.parent) {
 		if (at.style.positionType === "fixed") {
@@ -7124,7 +7122,9 @@ export function takeDamageBands(
 		// A box an inline-block lays out in its own context has rows counted
 		// from that context. The inline-block's own rows hold them.
 		while (
-			box !== null && node !== undefined && !isInDocumentTree(layout, node)
+			box !== null &&
+			node !== undefined &&
+			getExtentFrame(node) !== layout.initialBlock
 		) {
 			box = getEnclosingIndependentFormattingContext(
 				layout,
@@ -7132,7 +7132,9 @@ export function takeDamageBands(
 			);
 			node = box === null ? undefined : layout.nodeMap.get(box);
 		}
-		const extent = node === undefined ? undefined : extents.get(node);
+		const extent = node === undefined
+			? undefined
+			: paintExtent(node, layout.initialBlock);
 		if (node === undefined || extent === undefined) {
 			return undefined;
 		}
@@ -7188,10 +7190,7 @@ function getVisibleChildren(
 		// A measure-function leaf never decomposes into layout children, so
 		// empty children[] means "not decomposed," not "nothing to paint."
 		layoutNode.measure !== null ||
-		// Its children's extents are counted from an inline-block's own
-		// root, not in the rows asked about.
-		!isInDocumentTree(layout, layoutNode) ||
-		extents.get(layoutNode)?.unstackedChildren !== 0 ||
+		paintExtent(layoutNode, layout.initialBlock)?.unstackedChildren !== 0 ||
 		layoutNode.style.displayType !== "block" ||
 		// Cheap proxy for "every DOM child has exactly one children[]
 		// entry". A run member owns no layout node, and a pseudo-element is a
@@ -7478,8 +7477,19 @@ export function getLayoutNode(
 }
 
 /** The rows a node's subtree can paint, in document rows. */
-export function paintExtent(node: LayoutNode): Extent | undefined {
-	return extents.get(node);
+// The extent, when its rows are counted in the frame the caller counts
+// in. Rows of another frame mean nothing there, so there is none.
+export function paintExtent(
+	node: LayoutNode,
+	frame: LayoutNode,
+): Extent | undefined {
+	const extent = extents.get(node);
+	return extent?.frame === frame ? extent : undefined;
+}
+
+// The root a node's extent counts from, once it has one.
+export function getExtentFrame(node: LayoutNode): LayoutNode | undefined {
+	return extents.get(node)?.frame;
 }
 
 /**
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index cd11ff08..9f005521 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -63,6 +63,7 @@ import {
 	type Display,
 	fullWidthFixedRows,
 	getAtomicHeight,
+	getExtentFrame,
 	getLayoutNode,
 	getLineAlignOffset,
 	getLineIndent,
@@ -72,7 +73,6 @@ import {
 	hoistedToLayer,
 	type InlineBlockLeaf,
 	isAtomicInline,
-	isInDocumentTree,
 	isPositioned,
 	isStackingContext,
 	type Layout,
@@ -500,8 +500,11 @@ export class Painter {
 	topLayer: Set<Element>;
 	// Each list marker paints at most once per frame.
 	renderedOutsideMarkers: WeakSet<Element>;
-	// Paint extents are cached in unscrolled rows. A scrolled subtree
-	// paints this many rows higher, so culling shifts the viewport instead.
+	// Paint extents are cached in unscrolled rows of a frame: the
+	// document's, or an inline-block's own root's. The band is culled
+	// against them in the frame being painted, which a scrolled subtree
+	// paints this many rows higher than it counts.
+	frame: LayoutNode;
 	scrolledRows: number;
 	highlightedText: Map<Text, HighlightRun[]>;
 	highlightStyles: Map<Element, Map<string, HighlightPaint | null>>;
@@ -516,6 +519,7 @@ export class Painter {
 		framebuffer: Framebuffer,
 	) {
 		this.renderedOutsideMarkers = new WeakSet<Element>();
+		this.frame = layout.initialBlock;
 		this.scrolledRows = 0;
 		this.highlightedText = new Map();
 		this.highlightStyles = new Map();
@@ -706,6 +710,7 @@ function paintBand(
 	layers: Map<Element, {neg: Element[]; zero: Element[]; pos: Element[]}>,
 ): void {
 	painter.renderedOutsideMarkers = new WeakSet<Element>();
+	painter.frame = painter.layout.initialBlock;
 	painter.scrolledRows = 0;
 	renderStackingContext(painter, root, ctx, layers);
 	for (const element of rendered) {
@@ -817,11 +822,7 @@ function paintEntry(
 	if (rect === null) {
 		return;
 	}
-	// A box an inline-block lays out has its extents counted from that
-	// box's own root, so the band is counted from there too, as it is when
-	// the inline-block paints its content.
-	const extent = paintExtent(node);
-	if (extent === undefined || isInDocumentTree(layout, node)) {
+	const paint = () =>
 		paintBlock(
 			painter,
 			element,
@@ -830,21 +831,36 @@ function paintEntry(
 			ctx,
 			afterOwnBox,
 		);
+	// A box an inline-block lays out has its extents counted from that
+	// box's own root, so the band is counted from there too, as it is when
+	// the inline-block paints its content.
+	const frame = getExtentFrame(node);
+	const extent = frame === undefined ? undefined : paintExtent(node, frame);
+	if (
+		frame === undefined || extent === undefined || frame === layout.initialBlock
+	) {
+		paint();
 		return;
 	}
-	const scrolled = painter.scrolledRows;
-	painter.scrolledRows = extent.origin - Math.round(rect.y);
+	paintInFrame(painter, frame, extent.origin - Math.round(rect.y), paint);
+}
+
+// Paint with the band counted in another frame's rows.
+function paintInFrame(
+	painter: Painter,
+	frame: LayoutNode,
+	scrolledRows: number,
+	paint: () => void,
+): void {
+	const previousFrame = painter.frame;
+	const previousScrolled = painter.scrolledRows;
+	painter.frame = frame;
+	painter.scrolledRows = scrolledRows;
 	try {
-		paintBlock(
-			painter,
-			element,
-			node,
-			{x: rect.x, y: rect.y},
-			ctx,
-			afterOwnBox,
-		);
+		paint();
 	} finally {
-		painter.scrolledRows = scrolled;
+		painter.frame = previousFrame;
+		painter.scrolledRows = previousScrolled;
 	}
 }
 
@@ -854,7 +870,7 @@ function isOutsideViewport(
 	node: LayoutNode,
 	element: Element | null,
 ): boolean {
-	const extent = paintExtent(node);
+	const extent = paintExtent(node, painter.frame);
 	if (extent === undefined) {
 		return false;
 	}
@@ -984,18 +1000,14 @@ function paintContent(
 			// The box lays its content out from 0, so what the viewport shows
 			// of it is counted from where it paints, not from the document.
 			const top = origin.y + style.contentInsetY;
-			const scrolled = painter.scrolledRows;
-			painter.scrolledRows = -top;
-			try {
+			paintInFrame(painter, context, -top, () =>
 				paintNodes(
 					painter,
 					context,
 					{x: origin.x + style.contentInsetX, y: top},
 					ctx,
-				);
-			} finally {
-				painter.scrolledRows = scrolled;
-			}
+				),
+			);
 		} else {
 			paintLayoutChildren(origin);
 		}
@@ -1150,7 +1162,7 @@ function visibleChildren(
 	const children = node.children;
 	const top = -ctx.viewportOffset + painter.scrolledRows + ctx.bandTop;
 	const bottom = top + ctx.bandBottom - ctx.bandTop;
-	const extent = paintExtent(node);
+	const extent = paintExtent(node, painter.frame);
 	const owner = node.owner as Node | null;
 	if (
 		extent === undefined ||
@@ -1167,7 +1179,7 @@ function visibleChildren(
 	let hi = children.length;
 	while (lo < hi) {
 		const mid = (lo + hi) >>> 1;
-		const childExtent = paintExtent(children[mid]);
+		const childExtent = paintExtent(children[mid], painter.frame);
 		if (childExtent !== undefined && childExtent.bottom <= top) {
 			lo = mid + 1;
 		} else {
@@ -1176,7 +1188,7 @@ function visibleChildren(
 	}
 	const visible: LayoutNode[] = [];
 	for (let i = lo; i < children.length; i++) {
-		const childExtent = paintExtent(children[i]);
+		const childExtent = paintExtent(children[i], painter.frame);
 		if (childExtent !== undefined && childExtent.top >= bottom) {
 			break;
 		}

From 48f194b96be317a25765d0583d73df0d07b20af6 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:43:47 -0400
Subject: [PATCH 84/99] Tell a run's width-dependence from its content's
 styles, not from where percentages resolve

A run's measured size is reused only for the request it answered when
its content's size depends on the width it is given. That was flagged
where an inline-block resolved a percentage width or max-width, and a
replaced box resolving its own percentage width was never flagged. An
atomic inline with a percentage in any horizontal sizing property now
marks the run as it is collected, however it is later resolved, and so
does a percentage text-indent on the container.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 50 +++++++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 431c4854..605b971c 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3576,14 +3576,13 @@ function getPrefixWidths(
 	return widths;
 }
 
+// Set while a run is measured when its content's size depends on the
+// width the run is given other than through where its lines break.
+let readsLineWidth = false;
+
 // Only the placing measurement's lines become the box's. A probe's are
 // a result about a box nothing was laid out in, and painting them
 // rendered a stretched item at its narrowest.
-// Set while a run is measured when its content holds a percentage that
-// resolves against the width the run is given, whether or not this
-// request gave one.
-let resolvedPercentage = false;
-
 function measureInlineRun(
 	layout: Layout,
 	box: Box,
@@ -3592,11 +3591,11 @@ function measureInlineRun(
 	placing: boolean,
 	left: number,
 ): Size {
-	const outer = resolvedPercentage;
-	resolvedPercentage = false;
+	const outer = readsLineWidth;
+	readsLineWidth = hasPercentage(box.container, ["text-indent"]);
 	const breakResult = breakNodes(layout, box, width, widthSpace, left);
-	const widthDependent = resolvedPercentage;
-	resolvedPercentage = outer || widthDependent;
+	const widthDependent = readsLineWidth;
+	readsLineWidth = outer || widthDependent;
 	if (Number.isFinite(width)) {
 		breakResult.containerWidth = width;
 	}
@@ -3727,6 +3726,25 @@ function collectLeafNodes(
 	return leafNodes;
 }
 
+const ATOMIC_WIDTH_PROPERTIES = [
+	"width",
+	"min-width",
+	"max-width",
+	"margin-left",
+	"margin-right",
+	"padding-left",
+	"padding-right",
+];
+
+function hasPercentage(
+	element: Element,
+	properties: readonly string[],
+): boolean {
+	return properties.some((property) =>
+		getComputedValue(element, property).includes("%"),
+	);
+}
+
 function collectLeaves(
 	layout: Layout,
 	root: Node,
@@ -3772,6 +3790,14 @@ function collectLeaves(
 		} else if (nodeTypeOf(node) === node.ELEMENT_NODE) {
 			const element = node as Element;
 			const display = getLayoutDisplay(element);
+			// A box sized whole on the line takes a percentage of the line's
+			// width however it is sized, and with no width takes it as auto.
+			if (
+				isAtomicInline(display) &&
+				hasPercentage(element, ATOMIC_WIDTH_PROPERTIES)
+			) {
+				readsLineWidth = true;
+			}
 
 			if (getLayoutDisplay(element) === "none" || isOutOfFlow(element)) {
 				// Neither occupies run space nor interrupts the run. Before the
@@ -3837,9 +3863,6 @@ function collectLeaves(
 					const widthValue = CSSValues.parseUnitValue(
 						getComputedValue(element, "width"),
 					);
-					if (widthValue !== null && typeof widthValue === "object") {
-						resolvedPercentage = true;
-					}
 					if (
 						widthValue !== null &&
 						typeof widthValue === "object" &&
@@ -3950,9 +3973,6 @@ function collectLeaves(
 					element,
 				);
 				let maxWidthCap: number | undefined;
-				if (maxWidthValue && typeof maxWidthValue === "object") {
-					resolvedPercentage = true;
-				}
 				if (typeof maxWidthValue === "number") {
 					maxWidthCap = maxWidthValue;
 				} else if (

From a147f347a914c78dc414e164b31c98b4b81f4189 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:49:46 -0400
Subject: [PATCH 85/99] Make a counter key from the inputs counting applies

The key that says when to count again and the counting itself each read
an element's counter properties, in two places that could disagree: the
key read them only where counter rules exist, and counting always. Both
now take one record of what the element, its ::before and its ::after
reset, step and set, and whether it shows, and the key is made from it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts | 97 ++++++++++++++++++++++---------------------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index f3677293..f41a3e35 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -7846,46 +7846,44 @@ function attachPseudoElementsToDocument(cascade: Cascade): void {
 	}
 }
 
-const COUNTING_PSEUDO_ELEMENTS = ["::before", "::after"] as const;
+// Everything an element's counters are computed from: whether it shows,
+// and what it, its ::before and its ::after reset, step and set. The key
+// that says when to count again is made from these, and counting applies
+// them, so the two cannot disagree.
+interface CounterInputs {
+	hidden: boolean;
+	own: CounterEffects;
+	before: CounterEffects | null;
+	after: CounterEffects | null;
+}
 
-// What an element's counters are computed from, its ::before's and
-// ::after's included, or null for an element that changes none of them.
-// Such an element passes on what it inherits, so adding or removing it
-// leaves every other element's counters as they were.
-function getCounterKey(cascade: Cascade, element: Element): string | null {
-	const slots = _(cascade.declarationFor(element));
+function readCounterInputs(cascade: Cascade, element: Element): CounterInputs {
+	return {
+		hidden:
+			_(cascade.declarationFor(element))._computedValue("display") === "none",
+		own: getElementCounterEffects(cascade, element),
+		before: getPseudoCounterEffects(cascade, element, "::before"),
+		after: getPseudoCounterEffects(cascade, element, "::after"),
+	};
+}
+
+// Null for an element that changes no counter. Such an element passes on
+// what it inherits, so adding or removing it leaves every other
+// element's counters as they were.
+function getCounterKey(inputs: CounterInputs): string | null {
 	const parts: string[] = [];
-	if (slots._computedValue("display") === "none") {
+	if (inputs.hidden) {
 		parts.push("hidden");
 	}
-	if (
-		cascade.counterRulesExist ||
-		(attributeOf(element, "style") ?? "").includes("counter")
-	) {
-		const own = describeCounterEffects(
-			getElementCounterEffects(cascade, element),
-		);
-		if (own !== "") {
-			parts.push(own);
-		}
+	const own = describeCounterEffects(inputs.own);
+	if (own !== "") {
+		parts.push(own);
 	}
-	for (const type of COUNTING_PSEUDO_ELEMENTS) {
-		const effects = getPseudoCounterEffects(cascade, element, type);
-		if (effects !== null) {
-			parts.push(`${type}${describeCounterEffects(effects)}`);
-		}
+	if (inputs.before !== null) {
+		parts.push(`::before ${describeCounterEffects(inputs.before)}`);
 	}
-	const tag = element.tagName;
-	if (tag === "OL" || tag === "UL") {
-		parts.push(
-			`${tag}:${attributeOf(element, "start")}:` +
-				`${hasAttributeOf(element, "reversed")}`,
-		);
-		if (hasAttributeOf(element, "reversed")) {
-			parts.push(`items:${getListItems(element).length}`);
-		}
-	} else if (tag === "LI") {
-		parts.push(`LI:${attributeOf(element, "value")}`);
+	if (inputs.after !== null) {
+		parts.push(`::after ${describeCounterEffects(inputs.after)}`);
 	}
 	return parts.length === 0 ? null : parts.join("|");
 }
@@ -7897,7 +7895,7 @@ function noteCounterChange(cascade: Cascade, element: Element): void {
 		return;
 	}
 	const before = cascade.counterKeys.get(element) ?? null;
-	if (before !== getCounterKey(cascade, element)) {
+	if (before !== getCounterKey(readCounterInputs(cascade, element))) {
 		cascade.countersStale = true;
 	}
 }
@@ -7957,6 +7955,8 @@ interface CounterStart {
 	own: readonly CounterEntry[];
 	inner: readonly CounterEntry[];
 	hidden: boolean;
+	// What its ::after resets, steps and sets, counted where it ends.
+	after: CounterEffects | null;
 }
 
 // What its ::after reads, if it has one, and what the subtree leaves,
@@ -8077,31 +8077,29 @@ function countStart(cascade: Cascade, element: Element): void {
 			cascade.counterEnds.get(sibling)!.end,
 		)
 		: parentStart?.inner ?? NO_COUNTERS;
-	const key = getCounterKey(cascade, element);
+	const inputs = readCounterInputs(cascade, element);
+	const key = getCounterKey(inputs);
 	if (key !== null) {
 		cascade.counterKeys.set(element, key);
 	}
-	const hidden =
-		parentStart?.hidden === true || (key !== null && key.startsWith("hidden"));
+	const hidden = parentStart?.hidden === true || inputs.hidden;
 	if (key === null || hidden) {
 		cascade.counterSets.set(element, {
 			own: inherited,
 			inner: inherited,
 			hidden,
+			after: null,
 		});
 		return;
 	}
-	const own = applyCounters(
-		getElementCounterEffects(cascade, element),
-		inherited,
-		element,
-		element.parentNode,
-	);
-	const before = getPseudoCounterEffects(cascade, element, "::before");
+	const own = applyCounters(inputs.own, inherited, element, element.parentNode);
 	cascade.counterSets.set(element, {
 		own,
-		inner: before === null ? own : applyCounters(before, own, {}, element),
+		inner: inputs.before === null
+			? own
+			: applyCounters(inputs.before, own, {}, element),
 		hidden,
+		after: inputs.after,
 	});
 }
 
@@ -8117,7 +8115,7 @@ function countEnd(cascade: Cascade, element: Element): void {
 			!hasGeneratedContent(cascade, element, "::after")
 			? null
 			: applyCounters(
-				getPseudoCounterEffects(cascade, element, "::after") ?? NO_EFFECTS,
+				start.after ?? NO_EFFECTS,
 				inherit(base, preceding),
 				{},
 				element,
@@ -8161,8 +8159,11 @@ function getElementCounterEffects(
 	element: Element,
 ): CounterEffects {
 	const slots = _(cascade.declarationFor(element));
+	const declares =
+		cascade.counterRulesExist ||
+		(attributeOf(element, "style") ?? "").includes("counter");
 	const effects = readCounterEffects((property) =>
-		slots._computedValue(property) ?? undefined,
+		declares ? (slots._computedValue(property) ?? undefined) : undefined,
 	);
 	const names = (pairs: Array<[string, number]>) => pairs.map(([name]) => name);
 	const tag = element.tagName;

From 4c8760d0abfe7dff95f5c59abf2f24dc0b8fc193 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 13:50:33 -0400
Subject: [PATCH 86/99] Wrap a comment to the line length

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 605b971c..871a9815 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2712,9 +2712,10 @@ function syncIndependentFormattingContext(
 	const box = getPrincipalBox(layout, element);
 	const display = getLayoutDisplay(element);
 	// An inline-grid or inline-table always lays its own content out,
-	// because a line cannot contain a grid or a table piecemeal. An inline-block does so only once it holds a
-	// block-level box. Never a plain inline: it is broken instead, and
-	// taking its content here would steal back the container's boxes.
+	// because a line cannot contain a grid or a table piecemeal. An
+	// inline-block does so only once it holds a block-level box. Never a
+	// plain inline: it is broken instead, and taking its content here would
+	// steal back the container's boxes.
 	const grid = display === "inline-grid";
 	const table = display === "inline-table";
 	if (

From 7fe483f9db87352d775cf9c53e9a37aabe02527a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:02:15 -0400
Subject: [PATCH 87/99] Draw every form control from its state each frame, and
 check none went unredrawn

A form control's shadow tree is a function of its state, redrawn at
each of some fifty places that change the state, and a place that
forgot left the control showing the old state. A frame now brings every
connected control's tree up to its state before it applies mutations,
so a forgotten place cannot reach the screen. Under test, a control the
frame would change first throws, so a forgotten place is still found,
as it matters to a read before the frame: a canceled click put a
checkbox's checkedness back without redrawing it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/index.ts        |  7 ++++++
 src/internal/dom.ts | 54 +++++++++++++++++++++++++++++++++++++++++++++
 tests/test-utils.ts |  4 +++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 3760c57e..8bfb9cef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,10 +11,12 @@ import {
 import {
 	applyMutations,
 	attachDocument,
+	checkFormControls,
 	clampScrollOffsets,
 	clearHighlights,
 	clearWindowTimers,
 	constructInternal,
+	controlCheck,
 	disconnectObservers,
 	dispatchAsUserAgent,
 	DOMException,
@@ -36,6 +38,7 @@ import {
 	runFrameCallbacks,
 	runScrollSteps,
 	setDocumentVisible,
+	syncFormControls,
 	syncMediaQueries,
 	takeScrollShift,
 	type Window,
@@ -1604,6 +1607,10 @@ async function renderInteractive(termDOM: TermDOM): Promise<void> {
 	// First, so a hover listener's mutations join the records taken below.
 	resolvePendingHover(termDOMSlots.input);
 
+	if (import.meta.litest && controlCheck.enabled) {
+		checkFormControls(termDOM.document);
+	}
+	syncFormControls(termDOM.document);
 	applyMutations(termDOM.document);
 	runFocusFixup(termDOM.document);
 
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 018a5e09..6e3529c9 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -19197,6 +19197,7 @@ function legacyCanceledActivationBehavior(input: HTMLInputElement): void {
 	if (input.type === "checkbox") {
 		inputSlots.extra.indeterminate = inputSlots.extra.previouslyIndeterminate;
 		inputSlots.extra.checked = inputSlots.extra.previouslyChecked;
+		syncUAShadowTree(input);
 		return;
 	}
 	if (input.type !== "radio") {
@@ -19205,8 +19206,10 @@ function legacyCanceledActivationBehavior(input: HTMLInputElement): void {
 	const previous = inputSlots.extra.previousRadio;
 	inputSlots.extra.previousRadio = null;
 	inputSlots.extra.checked = false;
+	syncUAShadowTree(input);
 	if (previous !== null && getRadioGroup(input).includes(previous)) {
 		_(previous).extra.checked = true;
+		syncUAShadowTree(previous);
 	}
 }
 
@@ -36168,6 +36171,57 @@ export function applyMutations(document: globalThis.Document): boolean {
 	return true;
 }
 
+/**
+ * Bring every connected form control's shadow tree up to its state. A
+ * control's tree is a function of its state, and each change of state
+ * redraws it as it lands. This is what keeps a frame right when one did
+ * not.
+ */
+export function syncFormControls(document: globalThis.Document): void {
+	const attached = getAttachedDocument(document);
+	if (attached === undefined) {
+		return;
+	}
+	for (const root of _(attached).extra.cascade.shadowRoots) {
+		if (isUAShadowTree(root) && root.host.isConnected) {
+			syncUAShadowTree(root.host as unknown as Element);
+		}
+	}
+}
+
+/**
+ * Checks, for tests, that every form control's shadow tree already shows
+ * its state when a frame starts, so no change of state went without
+ * redrawing it. Set, a control the frame's sync would change throws,
+ * naming it.
+ */
+export const controlCheck = {enabled: false, checked: 0};
+
+export function checkFormControls(document: globalThis.Document): void {
+	controlCheck.checked++;
+	const attached = getAttachedDocument(document);
+	if (attached === undefined) {
+		return;
+	}
+	const stale: string[] = [];
+	for (const root of _(attached).extra.cascade.shadowRoots) {
+		if (!isUAShadowTree(root) || !root.host.isConnected) {
+			continue;
+		}
+		const before = root.innerHTML;
+		syncUAShadowTree(root.host as unknown as Element);
+		if (root.innerHTML !== before) {
+			const host = root.host;
+			stale.push(`${host.localName}${host.id ? `#${host.id}` : ""}`);
+		}
+	}
+	if (stale.length > 0) {
+		throw new Error(
+			`A form control did not show its state: ${stale.slice(0, 8).join(", ")}`,
+		);
+	}
+}
+
 /**
  * Synchronously settle what a style read must see: pending mutations
  * delivered, so the cascade has dropped what they made stale. Layout is
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
index 509ea939..55059188 100644
--- a/tests/test-utils.ts
+++ b/tests/test-utils.ts
@@ -13,7 +13,7 @@ import {
 	transportFromProcess,
 } from "../src/index.ts";
 import {styleCheck} from "../src/internal/cssom.ts";
-import {framePainted} from "../src/internal/dom.ts";
+import {controlCheck, framePainted} from "../src/internal/dom.ts";
 import type {ColorDepth} from "../src/internal/exchange.ts";
 import {
 	beginFrame,
@@ -34,6 +34,8 @@ layoutCheck.enabled = true;
 // And every style value served must be what the cascade resolves with
 // every cache dropped.
 styleCheck.enabled = true;
+// And every form control must show its state before a frame redraws it.
+controlCheck.enabled = true;
 
 const {Terminal} = xtermPkg;
 type Terminal = InstanceType<typeof Terminal>;

From 3981ebd8cd31fc2e420563012b423c0a6cd264b3 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:15:34 -0400
Subject: [PATCH 88/99] Stick a box an inline-block lays out to the scroller
 around the inline-block

A sticky box's shift walked its layout parents to the scroller it holds
against, and the walk ends at an inline-block's own root, so a sticky
box inside one held against the viewport with its position counted
from that root. The walk now goes on from the inline-block, reading it
and the scroller where they are drawn, and the frame's repaint compares
each sticky box's shift too, repainting the inline-block's rows, which
cover any shift inside it.

A third fuzz page holds what boxes that lay out their own content hold:
a sticky box against a scroller's bottom in an inline-block, content past
an inline-block's height, an inline-table, ::before counters and cells
with no table.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts        | 156 ++++++++++++++++++++++++++++------
 tests/fuzz-pages.ts           |  72 +++++++++++++++-
 tests/sticky-position.test.ts |  20 +++++
 3 files changed, 219 insertions(+), 29 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 871a9815..315a525a 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2701,6 +2701,10 @@ function flowChildren(
 	return into;
 }
 
+// The box each independent formatting context's root lays content out
+// for, which places the root's rows on a line of its own frame.
+const contextHosts = new WeakMap<LayoutNode, Element>();
+
 // An inline-block is measured as ONE unit by its run, and a run ends at
 // a block-level box, so block content inside it is laid out by the box's
 // own measurement. Only the run that placed the box knows its content
@@ -2730,6 +2734,7 @@ function syncIndependentFormattingContext(
 	if (!root) {
 		root = new LayoutNode();
 		box.independentFormattingContext = root;
+		contextHosts.set(root, element);
 		// A change inside, a restyle no run records, leaves the box's
 		// measure answering with the old size unless the box hears of it.
 		root.onStale = () => {
@@ -5046,7 +5051,8 @@ function getStickyShift(
 	let x = 0;
 	let y = 0;
 	let scroller: LayoutNode | null = null;
-	for (let current = node; current.parent !== null; current = current.parent) {
+	let current = node;
+	for (; current.parent !== null; current = current.parent) {
 		x += current.grid.left;
 		y += current.grid.top;
 		if (current !== node && current.style.positionType === "sticky") {
@@ -5059,11 +5065,56 @@ function getStickyShift(
 			break;
 		}
 	}
+	// Past an inline-block's own root the walk goes on from the
+	// inline-block, which places the root's rows in its own frame. Both it
+	// and the scroller are read where they are drawn, and the scroller's
+	// own offset undone, so the position counts as the scroller's do.
+	let crossedScroller: Element | null = null;
+	let crossedRect: DOMRect | null = null;
+	if (scroller === null && current !== layout.initialBlock) {
+		const host = contextHosts.get(current);
+		const hostRect = host === undefined ? null : layout.getRect(host);
+		if (host === undefined || hostRect === null) {
+			return {x: 0, y: 0};
+		}
+		const hostBox = getBoxModel(host);
+		x += hostRect.x + hostBox.borderLeftWidth + hostBox.paddingLeft;
+		y += hostRect.y + hostBox.borderTopWidth + hostBox.paddingTop;
+		for (
+			let outer = flatParentElement(host);
+			outer !== null;
+			outer = flatParentElement(outer)
+		) {
+			if (isScrollContainer(outer) && !isRootBox(layout, outer)) {
+				crossedRect = layout.getRect(outer);
+				crossedScroller = crossedRect === null ? null : outer;
+				break;
+			}
+		}
+		if (crossedScroller !== null) {
+			x += getScrollOffset(crossedScroller, "left") - crossedRect!.x;
+			y += getScrollOffset(crossedScroller, "top") - crossedRect!.y;
+		}
+	}
 	let portLeft = 0;
 	let portTop: number;
 	let portWidth: number;
 	let portHeight: number;
-	if (scroller === null) {
+	if (crossedScroller !== null) {
+		const box = getBoxModel(crossedScroller);
+		portLeft =
+			(box.borderLeftWidth || 0) + getScrollOffset(crossedScroller, "left");
+		portTop =
+			(box.borderTopWidth || 0) + getScrollOffset(crossedScroller, "top");
+		portWidth =
+			crossedRect!.width -
+			(box.borderLeftWidth || 0) -
+			(box.borderRightWidth || 0);
+		portHeight =
+			crossedRect!.height -
+			(box.borderTopWidth || 0) -
+			(box.borderBottomWidth || 0);
+	} else if (scroller === null) {
 		// scrollY is CSS pixels: a whole number of rows, each a cell tall.
 		const window = layout.window;
 		portTop = window.scrollY / getCellSize(window.document).height;
@@ -5742,7 +5793,7 @@ export class Layout {
 	// The rows each sticky box painted at the last solve, shift included.
 	// A shift moves a box's rows with no change to its rect, and only a
 	// solve or a scroll changes one, so a solve compares them.
-	stickyRows: Map<LayoutNode, [number, number, boolean]>;
+	stickyRows: Map<LayoutNode, StickyRows>;
 	// The rows the selection covered at the last frame, from its ends.
 	selectionRows: [number, number] | null;
 
@@ -6686,51 +6737,100 @@ export function invalidateTextMeasurement(layout: Layout): void {
 }
 
 // A sticky box's extent holds its descendants', so its rows before and
-// after cover everything its shift moved.
+// after cover everything its shift moved. One an inline-block lays out
+// moves only within the box it flows in, inside the inline-block, so the
+// inline-block's rows cover it.
 function damageShiftedStickyBoxes(layout: Layout): void {
 	const before = layout.stickyRows;
-	const after = new Map<LayoutNode, [number, number, boolean]>();
+	const after = new Map<LayoutNode, StickyRows>();
 	for (const element of layout.positionedElements) {
 		const node = layout.nodeMap.get(element);
-		const extent = node && extents.get(node);
-		if (
-			node?.style.positionType !== "sticky" ||
-			extent === undefined ||
-			!isInLayoutTree(layout, node)
-		) {
+		if (node?.style.positionType !== "sticky") {
+			continue;
+		}
+		const rows = getStickyRows(layout, node);
+		if (rows === "unknown") {
+			layout.wholeDamage = true;
+			layout.collecting = false;
+			continue;
+		}
+		if (rows === null) {
 			continue;
 		}
-		const shift = getScrollShift(layout, node, false).y;
-		const rows: [number, number, boolean] = [
-			extent.top + shift,
-			extent.bottom + shift,
-			isInFixedSpace(node),
-		];
 		after.set(node, rows);
 		const old = before.get(node);
-		if (old === undefined || old[0] !== rows[0] || old[1] !== rows[1]) {
-			pushDamage(layout, ...rows);
+		if (
+			old === undefined ||
+			old.top !== rows.top ||
+			old.bottom !== rows.bottom ||
+			old.shift !== rows.shift
+		) {
+			pushDamage(layout, rows.top, rows.bottom, rows.fixed);
 			if (old !== undefined) {
-				pushDamage(layout, ...old);
+				pushDamage(layout, old.top, old.bottom, old.fixed);
 			}
 		}
 		before.delete(node);
 	}
 	for (const old of before.values()) {
-		pushDamage(layout, ...old);
+		pushDamage(layout, old.top, old.bottom, old.fixed);
 	}
 	layout.stickyRows = after;
 }
 
-function isInLayoutTree(layout: Layout, node: LayoutNode): boolean {
-	let current: LayoutNode | null = node;
-	while (current.parent !== null) {
-		if (current.style.displayType === "none") {
-			return false;
+interface StickyRows {
+	top: number;
+	bottom: number;
+	fixed: boolean;
+	shift: number;
+}
+
+// The document rows a sticky box paints on, and its shift. Null for one
+// that shows nowhere, and "unknown" for one whose rows no extent in the
+// document's rows covers.
+function getStickyRows(
+	layout: Layout,
+	node: LayoutNode,
+): StickyRows | null | "unknown" {
+	let root: LayoutNode = node;
+	for (; root.parent !== null; root = root.parent) {
+		if (root.style.displayType === "none") {
+			return null;
+		}
+	}
+	const shift = getStickyShift(layout, node).y;
+	if (root === layout.initialBlock) {
+		const extent = paintExtent(node, layout.initialBlock);
+		if (extent === undefined) {
+			return null;
 		}
-		current = current.parent;
+		const moved = getScrollShift(layout, node, false).y;
+		return {
+			top: extent.top + moved,
+			bottom: extent.bottom + moved,
+			fixed: isInFixedSpace(node),
+			shift,
+		};
 	}
-	return current === layout.initialBlock;
+	const host = contextHosts.get(root);
+	if (host === undefined || !host.isConnected) {
+		return null;
+	}
+	const hostNode =
+		getLayoutNode(layout, host) ?? getBox(layout, host)?.layoutNode;
+	const extent = hostNode
+		? paintExtent(hostNode, layout.initialBlock)
+		: undefined;
+	if (!hostNode || extent === undefined) {
+		return "unknown";
+	}
+	const moved = getScrollShift(layout, hostNode, false).y;
+	return {
+		top: extent.top + moved,
+		bottom: extent.bottom + moved,
+		fixed: isInFixedSpace(hostNode),
+		shift,
+	};
 }
 
 function isInFixedSpace(node: LayoutNode): boolean {
diff --git a/tests/fuzz-pages.ts b/tests/fuzz-pages.ts
index 9db4c0cc..54a5116e 100644
--- a/tests/fuzz-pages.ts
+++ b/tests/fuzz-pages.ts
@@ -198,7 +198,77 @@ const FLOW: Page = {
 	],
 };
 
-export const PAGES = [LAYOUT, FLOW];
+// What boxes that lay out their own content hold: a sticky box in an
+// inline-block in a scroller, held against the scroller's bottom with no
+// scrolling, content past an inline-block's own height, an inline-table,
+// counters ::before steps, and cells with no table around them.
+const CONTEXTS: Page = {
+	name: "contexts",
+	head: `<style id=sheet>
+	.ib { display: inline-block }
+	.scroll { overflow: auto; height: 60px }
+	.stick { position: sticky; bottom: 0; background-color: rgb(0, 0, 90) }
+	.rel { position: relative; top: 5px }
+	.abs { position: absolute; right: 0 }
+	.short { height: 15px }
+	.it { display: inline-table }
+	.row { display: table-row }
+	.cell { display: table-cell }
+	.n::before { counter-increment: n; content: counter(n) ". " }
+	.box { border: 1px solid }
+</style>`,
+	body: `<div id=root style="counter-reset: n">
+	<div id=s class=scroll><span id=ib class=ib><div id=b0>head text</div><div id=st class=stick>stuck foot</div><div id=b1>one</div><div id=b2>two</div><div id=b3>three</div><div id=b4>four</div><div id=b5>five</div></span></div>
+	<p id=p0>before <span id=ib2 class=ib><div id=o class=short><div id=o0>first</div><div id=o1>second</div></div></span> after</p>
+	<p id=p1>table <span id=it class=it><span id=r0 class=row><span id=c0 class=cell>a</span><span id=c1 class=cell>bb</span></span></span> tail</p>
+	<div id=h0 class=n>heading</div><div id=h1 class=n>heading</div>
+	<div id=cells><div id=d0 class=cell>x</div><div id=d1 class=cell>yy</div></div>
+</div>`,
+	classes: [
+		"ib",
+		"scroll",
+		"stick",
+		"rel",
+		"abs",
+		"short",
+		"it",
+		"row",
+		"cell",
+		"n",
+		"box",
+	],
+	styles: [
+		["height", (r: Random): string => `${15 + r.int(90)}px`],
+		["width", (r: Random): string => `${20 + r.int(80)}%`],
+		[
+			"display",
+			(r: Random): string =>
+				r.pick([
+					"block",
+					"inline-block",
+					"inline-table",
+					"table-cell",
+					"table-row",
+					"none",
+				]),
+		],
+		[
+			"position",
+			(r: Random): string =>
+				r.pick(["static", "relative", "sticky", "absolute"]),
+		],
+		["bottom", (r: Random): string => `${r.int(30)}px`],
+		["margin-top", (r: Random): string => `${r.int(40)}px`],
+		["overflow", (r: Random): string => r.pick(["visible", "hidden", "auto"])],
+	],
+	attributes: [],
+	rules: [
+		".n::before { content: counter(n) \" \" }",
+		".ib { border: 1px solid }",
+	],
+};
+
+export const PAGES = [LAYOUT, FLOW, CONTEXTS];
 
 export const WORDS = [
 	"alpha",
diff --git a/tests/sticky-position.test.ts b/tests/sticky-position.test.ts
index 2240bda2..27b2ff2e 100644
--- a/tests/sticky-position.test.ts
+++ b/tests/sticky-position.test.ts
@@ -161,3 +161,23 @@ test("an absolute box ignores a scroller outside its containing block", async ()
 	expect(dom.document.elementFromPoint(1, 2)).toBe(tag);
 	dom.dispose();
 });
+
+test("a sticky heading an inline-block lays out holds the scroller around it", async () => {
+	const terminal = new MockProcess({cols: 30, rows: 8});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML =
+		"<div>top</div><div id=\"pane\" style=\"height:4px;overflow-y:auto\">" +
+		"<span style=\"display:inline-block\">" +
+		makeSections(5) +
+		"</span></div>";
+	await nextFrame(dom);
+	dom.document.getElementById("pane")!.scrollTop = 2;
+	await nextFrame(dom);
+	const rows = terminal.getVisibleText().split("\n");
+	expect(rows[1]).toContain("Heading 0");
+	expect(rows[2]).toContain("s0 row 2");
+	expect(dom.document.getElementById("h0")!.getBoundingClientRect().top).toBe(
+		1,
+	);
+	dom.dispose();
+});

From a06b5df8ea3e836186da6443e0f341c0e6d83b61 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:15:34 -0400
Subject: [PATCH 89/99] Inherit counters through the flat tree

Counters were counted along the light tree, so a shadow tree's content
and a slot's assigned nodes did not take the counters around their host
or slot. Counting now walks flat-tree parents and siblings, a removed
subtree is searched through its shadow trees for counters it changed,
and a slot taking other nodes or a host taking a shadow root counts
again.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/cssom.ts  | 99 +++++++++++++++++++++++++++++++++++-------
 src/internal/dom.ts    |  4 ++
 tests/counters.test.ts | 23 ++++++++++
 3 files changed, 110 insertions(+), 16 deletions(-)

diff --git a/src/internal/cssom.ts b/src/internal/cssom.ts
index f41a3e35..0cf22ce7 100644
--- a/src/internal/cssom.ts
+++ b/src/internal/cssom.ts
@@ -6457,11 +6457,17 @@ export class Cascade {
 			return;
 		}
 		this.shadowRoots.add(root);
+		noteFlatTreeChange(this);
 		// Incrementally. Rebuilding every sheet per UA shadow tree upgrade made
 		// a document of n UA shadow trees reparse everything n times.
 		syncShadowRoot(this, root);
 	}
 
+	// A slot took other nodes, which now inherit through it.
+	slotsChanged(): void {
+		noteFlatTreeChange(this);
+	}
+
 	// A root filled with its content after it registered, as a declarative
 	// shadow root is, has sheets its registration did not see.
 	syncShadowRoot(root: ShadowRoot): void {
@@ -7903,11 +7909,10 @@ function noteCounterChange(cascade: Cascade, element: Element): void {
 // Whether a removed subtree held an element that changed a counter,
 // which renumbers what came after it.
 function declaresCounters(cascade: Cascade, root: Element): boolean {
-	for (
-		let element: Element | null = root;
-		element !== null;
-		element = nextElementUnder(element, root)
-	) {
+	if (cascade.counterKeys.has(root)) {
+		return true;
+	}
+	for (const element of flatDescendants(root)) {
 		if (cascade.counterKeys.has(element)) {
 			return true;
 		}
@@ -7915,6 +7920,17 @@ function declaresCounters(cascade: Cascade, root: Element): boolean {
 	return false;
 }
 
+/**
+ * Elements moved in the flat tree with no change of their own, as a slot
+ * takes other nodes or a host takes a shadow root, inherit their counters
+ * from elsewhere, so the counts are made again.
+ */
+function noteFlatTreeChange(cascade: Cascade): void {
+	if (cascade.countersCounted) {
+		cascade.countersStale = true;
+	}
+}
+
 // Every counter is counted again, and the content that reads one is made
 // again from the new counts.
 function refreshCounters(cascade: Cascade): void {
@@ -8016,6 +8032,7 @@ function countCounters(
 	element: Element,
 	part: "start" | "end",
 ): void {
+	const tree = createFlatElementTree();
 	const isCounted = ([each, which]: [Element, "start" | "end"]) =>
 		which === "start"
 			? cascade.counterSets.has(each)
@@ -8030,15 +8047,16 @@ function countCounters(
 		const [each, which] = top;
 		const needs: Array<[Element, "start" | "end"]> = [];
 		if (which === "start") {
-			const sibling = each.previousElementSibling;
+			const sibling = tree.previousOf(each);
+			const parent = tree.parentOf(each);
 			if (sibling !== null) {
 				needs.push([sibling, "start"], [sibling, "end"]);
-			} else if (each.parentElement !== null) {
-				needs.push([each.parentElement, "start"]);
+			} else if (parent !== null) {
+				needs.push([parent, "start"]);
 			}
 		} else {
 			needs.push([each, "start"]);
-			const last = each.lastElementChild;
+			const last = tree.lastOf(each);
 			if (last !== null) {
 				needs.push([last, "start"], [last, "end"]);
 			}
@@ -8050,13 +8068,54 @@ function countCounters(
 		}
 		stack.pop();
 		if (which === "start") {
-			countStart(cascade, each);
+			countStart(cascade, each, tree);
 		} else {
-			countEnd(cascade, each);
+			countEnd(cascade, each, tree);
 		}
 	}
 }
 
+// The flat tree's elements, which counters are inherited through, as a
+// shadow tree's content is its host's and a slot's assigned nodes are
+// its own. Each parent's children are listed once a count.
+interface FlatElementTree {
+	parentOf(element: Element): Element | null;
+	previousOf(element: Element): Element | null;
+	lastOf(element: Element): Element | null;
+}
+
+function createFlatElementTree(): FlatElementTree {
+	const children = new Map<Element, Element[]>();
+	const indices = new Map<Element, number>();
+	const childrenOf = (parent: Element): Element[] => {
+		let list = children.get(parent);
+		if (list === undefined) {
+			list = [];
+			for (const child of flatChildren(parent)) {
+				if (nodeTypeOf(child) === ELEMENT_NODE) {
+					indices.set(child as Element, list.length);
+					list.push(child as Element);
+				}
+			}
+			children.set(parent, list);
+		}
+		return list;
+	};
+	return {
+		parentOf: (element) => flatParentElement(element) as Element | null,
+		previousOf: (element) => {
+			const parent = flatParentElement(element) as Element | null;
+			if (parent === null) {
+				return null;
+			}
+			const list = childrenOf(parent);
+			const index = indices.get(element) ?? -1;
+			return index > 0 ? list[index - 1] : null;
+		},
+		lastOf: (element) => childrenOf(element).at(-1) ?? null,
+	};
+}
+
 function inherit(
 	base: readonly CounterEntry[],
 	preceding: readonly CounterEntry[],
@@ -8066,10 +8125,14 @@ function inherit(
 		: preceding.slice(0, base.length);
 }
 
-function countStart(cascade: Cascade, element: Element): void {
+function countStart(
+	cascade: Cascade,
+	element: Element,
+	tree: FlatElementTree,
+): void {
 	cascade.countersCounted = true;
-	const sibling = element.previousElementSibling;
-	const parent = element.parentElement;
+	const sibling = tree.previousOf(element);
+	const parent = tree.parentOf(element);
 	const parentStart = parent === null ? null : cascade.counterSets.get(parent)!;
 	const inherited = sibling !== null
 		? inherit(
@@ -8103,9 +8166,13 @@ function countStart(cascade: Cascade, element: Element): void {
 	});
 }
 
-function countEnd(cascade: Cascade, element: Element): void {
+function countEnd(
+	cascade: Cascade,
+	element: Element,
+	tree: FlatElementTree,
+): void {
 	const start = cascade.counterSets.get(element)!;
-	const last = element.lastElementChild;
+	const last = tree.lastOf(element);
 	const base = last === null ? start.inner : cascade.counterSets.get(last)!.own;
 	const preceding = last === null
 		? start.inner
diff --git a/src/internal/dom.ts b/src/internal/dom.ts
index 6e3529c9..ff1c8ff2 100644
--- a/src/internal/dom.ts
+++ b/src/internal/dom.ts
@@ -14496,6 +14496,10 @@ function assignSlottables(slot: HTMLSlotElement): void {
 		slottables.every((node, index) => node === assigned[index]);
 	if (!identical) {
 		signalASlotChange(slot);
+		const attached = getAttachedDocument(slot);
+		if (attached !== undefined) {
+			_(attached).extra.cascade.slotsChanged();
+		}
 	}
 	for (const previous of assigned) {
 		if (_(previous).assignedSlot === slot && !slottables.includes(previous)) {
diff --git a/tests/counters.test.ts b/tests/counters.test.ts
index 06c679f2..c70b3f4c 100644
--- a/tests/counters.test.ts
+++ b/tests/counters.test.ts
@@ -173,3 +173,26 @@ test("a string that spells counter() is only text", async () => {
 		),
 	).toEqual(["counter(n) a"]);
 });
+
+test("a counter passes through a shadow tree and a slot", async () => {
+	const terminal = new MockProcess({cols: 30, rows: 12});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.head.innerHTML = `<style>${NUMBERED}</style>`;
+	dom.document.body.innerHTML =
+		"<div class=n>a</div><div id=host><div class=n slot=s>b</div></div>" +
+		"<div class=n>c</div>";
+	const root =
+		dom.document.getElementById("host")!.attachShadow({mode: "open"});
+	root.innerHTML =
+		"<style>.n { counter-increment: n } " +
+		".n::before { content: counter(n) \". \" }</style>" +
+		"<div class=n>inner</div><slot name=s></slot>";
+	await nextFrame(dom);
+	await nextFrame(dom);
+	const lines = terminal.getScreenContents()
+		.split("\n")
+		.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trimEnd())
+		.filter((line) => line !== "");
+	expect(lines).toEqual(["1. a", "2. inner", "3. b", "4. c"]);
+	dom.dispose();
+});

From a33b993bf6ed683d4d512827ce61f8f78c411a3d Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:26:12 -0400
Subject: [PATCH 90/99] Style an inline-block's own root from its element as it
 is now, and wrap any non-cell in a row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An inline-block's own root takes its display from the element, a table
for an inline-table and a block for an inline-block, but it was styled
only when the root was made, so an inline-table made an inline-block
went on laying its content out as a table. The root is now styled
wherever its element is, and a run syncs each member's root as it
syncs the member.

A row wraps whatever in it is no cell in an anonymous cell (CSS2
§17.2.1), a row or a group included, which the cell then lays out as a
table of its own. A row held in a row was taken for a cell.

A node's kept sizes are dropped when it moves under another parent, or
its parent's display changes, since what it was sized as depends on
what holds it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts       | 55 ++++++++++++++++++++++--------------
 src/internal/layoutsolver.ts | 20 +++++++++++--
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 315a525a..221d611d 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1689,6 +1689,10 @@ function styleNode(
 ): void {
 	const wasHidden = layoutNode.style.displayType === "none";
 	styleLayoutNode(element, layoutNode, layout.positionedElements, layout.pass);
+	const context = layout.boxes.get(element)?.independentFormattingContext;
+	if (context) {
+		styleContextRoot(element, context);
+	}
 	// Turning on display:none makes the whole subtree box-less, and every
 	// path that restyles a box passes through here.
 	if (!wasHidden && layoutNode.style.displayType === "none") {
@@ -2314,6 +2318,9 @@ function syncRunMembers(layout: Layout, run: Box): void {
 			addNode(layout, element, null);
 			continue;
 		}
+		// Whether it lays its content out under a root of its own, and as
+		// what, follows its display as it is now.
+		syncIndependentFormattingContext(layout, element);
 		if (!layout.boxes.get(element)?.independentFormattingContext) {
 			dropLayoutNode(layout, element);
 		}
@@ -2741,15 +2748,36 @@ function syncIndependentFormattingContext(
 			layout.staleHosts.add(element);
 		};
 	}
-	// The root IS the box's formatting context, so it gets the display and
-	// the grid container properties. The element's own node is the run's.
+	styleContextRoot(element, root);
+
+	for (const child of flowContent(element)) {
+		if (
+			nodeTypeOf(child) === child.ELEMENT_NODE ||
+			nodeTypeOf(child) === child.TEXT_NODE
+		) {
+			addNode(layout, child, root);
+		}
+	}
+
+	// The measure laying this root out may be running right now. Its boxes
+	// have to be in it before that measure returns.
+	if (layout.dirtyRunContainers.has(element)) {
+		syncContainerRuns(layout, element);
+	}
+}
+
+// The root IS the box's formatting context, so it gets the display and
+// the grid or table container properties, from the element as it is now.
+// The element's own node is the run's.
+function styleContextRoot(element: Element, root: LayoutNode): void {
+	const display = getLayoutDisplay(element);
 	const style = createStyle();
 	style.blockFormattingContext = true;
-	style.displayType = grid ? "grid" : "block";
-	if (table) {
+	style.displayType = "block";
+	if (display === "inline-table") {
 		applyTableContainer(style, element);
-	}
-	if (grid) {
+	} else if (display === "inline-grid") {
+		style.displayType = "grid";
 		applyGridContainer(style, element);
 		const gaps: Array<[string, Gutter]> = [
 			["row-gap", "row"],
@@ -2766,21 +2794,6 @@ function syncIndependentFormattingContext(
 	}
 	root.style = style;
 	root.invalidate();
-
-	for (const child of flowContent(element)) {
-		if (
-			nodeTypeOf(child) === child.ELEMENT_NODE ||
-			nodeTypeOf(child) === child.TEXT_NODE
-		) {
-			addNode(layout, child, root);
-		}
-	}
-
-	// The measure laying this root out may be running right now. Its boxes
-	// have to be in it before that measure returns.
-	if (layout.dirtyRunContainers.has(element)) {
-		syncContainerRuns(layout, element);
-	}
 }
 
 function dropIndependentFormattingContext(box: Box): void {
diff --git a/src/internal/layoutsolver.ts b/src/internal/layoutsolver.ts
index 28b9667f..491f2b89 100644
--- a/src/internal/layoutsolver.ts
+++ b/src/internal/layoutsolver.ts
@@ -567,14 +567,24 @@ export class LayoutNode {
 		return this.currentStyle;
 	}
 
+	// A child's size depends on what its parent lays it out as, a row in
+	// a table or a box in a block, so another display drops what the
+	// children kept.
 	set style(style: Style) {
 		const change =
 			Number(isOutOfFlowType(style.positionType)) -
 			Number(isOutOfFlowType(this.currentStyle.positionType));
+		const relaid = style.displayType !== this.currentStyle.displayType;
 		this.currentStyle = style;
 		if (change !== 0) {
 			countOutOfFlow(this, change);
 		}
+		if (relaid) {
+			for (const child of this.children) {
+				child.stale = true;
+			}
+			this.invalidate();
+		}
 	}
 
 	get holdsOutOfFlow(): boolean {
@@ -695,12 +705,14 @@ export function forgetLayout(node: LayoutNode): void {
 	node.measured = null;
 }
 
+// What a node kept was for the parent it was laid out under.
 export function insertChild(
 	layoutNode: LayoutNode,
 	child: LayoutNode,
 	index: number,
 ): void {
 	child.parent = layoutNode;
+	child.stale = true;
 	layoutNode.children.splice(index, 0, child);
 	if (child.outOfFlowCount !== 0) {
 		countOutOfFlow(layoutNode, child.outOfFlowCount);
@@ -2836,14 +2848,16 @@ function stackAnonymousCell(
 	return height + below;
 }
 
-// An element, or a run of text. The white space between a row's cells
-// never reaches a table as a run (css-tables-3 §3.3).
+// Anything in a row but a cell: an element, a run of text, and a row,
+// a group or a table, which the anonymous cell then holds in a table of
+// its own (CSS2 §17.2.1). The white space between a row's cells never
+// reaches a table as a run (css-tables-3 §3.3).
 function isAnonymousCellContent(node: LayoutNode): boolean {
 	const type = node.style.displayType;
 	const owner = node.owner as {nodeType?: number} | null;
 	return (owner?.nodeType === 1 || owner?.nodeType === 3) &&
 		type !== "none" &&
-		!type.startsWith("table") &&
+		type !== "table-cell" &&
 		!isOutOfFlowType(node.style.positionType);
 }
 

From aa516cb59260765d29c4677cc5d76a92e88b96af Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:35:45 -0400
Subject: [PATCH 91/99] Drop an element's own root when a restyle leaves it
 laying out none

Whether an element lays its content out under a root of its own follows
its display, but the root was dropped only when its node was made
again. A node kept through a change, as one moved into an anonymous
table is, kept the root, and its content went on being placed under a
root nothing laid out. A restyle that changes the kind of box now syncs
the root.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 221d611d..5d375ee0 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -7877,6 +7877,10 @@ function applyRestyles(layout: Layout): void {
 			measured.add(element);
 			touchChildren(layout, element);
 			invalidateChildDerivation(layout, element);
+			// Whether it lays its content out under a root of its own follows
+			// its display, and a node kept through the change keeps no root it
+			// no longer has.
+			syncIndependentFormattingContext(layout, element);
 			if (layout.boxes.get(element)?.children) {
 				invalidateContainerBoxes(layout, element);
 				// An element that becomes a flex container, or stops being one,

From 572ffdbe55166c3820b0511015733d8c29a5220b Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:40:40 -0400
Subject: [PATCH 92/99] Give no static position where the box's line and its
 containing block count from different roots

A static position is the in-flow position less the containing block's,
and the two were subtracted though one counted from an inline-block's
own root and the other from the document's. An absolute box in an
inline-table placed against a positioned ancestor outside it took a
position from rows that meant nothing there, as a fresh render, which
reached it before the root was laid out, did not.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 5d375ee0..dac3d43d 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2940,6 +2940,14 @@ function isHiddenByAncestor(node: Node): boolean {
 	return false;
 }
 
+function getLayoutRoot(node: LayoutNode): LayoutNode {
+	let root = node;
+	while (root.parent !== null) {
+		root = root.parent;
+	}
+	return root;
+}
+
 // Coordinates under an independent formatting context start at the box that owns
 // it: the ancestor whose root the node was actually laid out under, not the
 // nearest one. An out-of-flow descendant hangs from its containing block
@@ -5462,6 +5470,12 @@ function getStaticPosition(
 		return null;
 	}
 
+	// Positions count from the root of the tree a node is in, the
+	// document's or an inline-block's own, and one from another root says
+	// nothing about where this box would be.
+	if (getLayoutRoot(containerNode) !== getLayoutRoot(containingBlock)) {
+		return null;
+	}
 	const origin = getAbsolutePosition(layout, containerNode, true);
 	const containingOrigin = getAbsolutePosition(layout, containingBlock, true);
 	const offsetLeft = origin.x - containingOrigin.x;

From 8f0b8583e5374c44baeee5cac969d4230084c786 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:47:40 -0400
Subject: [PATCH 93/99] Style a run member's kept node as the element is now

An atomic inline that lays its content out under a root of its own
keeps its node while it sits on a line, and the node kept the style it
had when made. A restyle compares the element with that style to tell
whether its box changed kind, so an inline-table made a block again,
compared with the block it was made as, left the line that measured it
in place. A run now styles each member's kept node as it syncs it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index dac3d43d..ef9b1841 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2321,8 +2321,13 @@ function syncRunMembers(layout: Layout, run: Box): void {
 		// Whether it lays its content out under a root of its own, and as
 		// what, follows its display as it is now.
 		syncIndependentFormattingContext(layout, element);
+		const kept = layout.nodeMap.get(element);
 		if (!layout.boxes.get(element)?.independentFormattingContext) {
 			dropLayoutNode(layout, element);
+		} else if (kept) {
+			// A node kept is styled as the element is now, or the next restyle
+			// compares against a display it no longer has.
+			styleNode(layout, element, kept);
 		}
 		dropRunContent(layout, element);
 	}

From efd76be06c9242fff9ce5465a8072f090cd3466a Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 14:58:47 -0400
Subject: [PATCH 94/99] Keep no node for an element its line measures, and
 check that every node is held

A member of a run is measured by the run and has no box of its own, but
one that lays its content out under a root of its own kept the node it
had before it joined the line. Its rect and its paint read that node, a
block's, so a sticky footer made an inline-table painted the width of
the line. A run now drops every member's node, as a fresh render never
makes one, and the layout check fails on a node no box holds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index ef9b1841..c58eaeb1 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2321,14 +2321,10 @@ function syncRunMembers(layout: Layout, run: Box): void {
 		// Whether it lays its content out under a root of its own, and as
 		// what, follows its display as it is now.
 		syncIndependentFormattingContext(layout, element);
-		const kept = layout.nodeMap.get(element);
-		if (!layout.boxes.get(element)?.independentFormattingContext) {
-			dropLayoutNode(layout, element);
-		} else if (kept) {
-			// A node kept is styled as the element is now, or the next restyle
-			// compares against a display it no longer has.
-			styleNode(layout, element, kept);
-		}
+		// A member is measured by its run, and has no box of its own for a
+		// node to describe. One left from an earlier shape answers for where
+		// the element was.
+		dropLayoutNode(layout, element);
 		dropRunContent(layout, element);
 	}
 }
@@ -7115,6 +7111,9 @@ function checkTreeShape(layout: Layout): string[] {
 		if (node.parent !== null && !seen.has(node)) {
 			problems.push(`${name(node)} hangs where the root cannot reach`);
 		}
+		if (node.parent === null && !seen.has(node) && flatIsConnected(domNode)) {
+			problems.push(`${name(node)} is held by no box`);
+		}
 		if (
 			seen.has(node) &&
 			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&

From 801b8f45577bfd94c44de6b2f0b7a4bd732bc49f Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 15:05:31 -0400
Subject: [PATCH 95/99] Place an element's out-of-flow boxes again when its own
 root comes or goes, and check they reach their containing blocks

An out-of-flow box hangs where its containing block can be reached
from its parent, which was checked only as it was placed. An element
that took a root of its own moved what it holds under that root,
taking an absolute box with it out of its containing block's reach, so
the box was laid out against a parent that was not its containing
block. Making or dropping a root now places its out-of-flow boxes
again, and the layout check fails on one out of its containing block's
reach.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index c58eaeb1..b8c32e5e 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2734,7 +2734,10 @@ function syncIndependentFormattingContext(
 		!establishesIndependentFormattingContext(element) ||
 		(!grid && !table && !hasBlockLevelBox(element))
 	) {
-		dropIndependentFormattingContext(box);
+		if (box.independentFormattingContext) {
+			dropIndependentFormattingContext(box);
+			invalidateOutOfFlowDescendants(layout, element);
+		}
 		return;
 	}
 
@@ -2743,6 +2746,9 @@ function syncIndependentFormattingContext(
 		root = new LayoutNode();
 		box.independentFormattingContext = root;
 		contextHosts.set(root, element);
+		// What it holds moves under another root, so an out-of-flow box among
+		// it may no longer reach its containing block from where it hangs.
+		invalidateOutOfFlowDescendants(layout, element);
 		// A change inside, a restyle no run records, leaves the box's
 		// measure answering with the old size unless the box hears of it.
 		root.onStale = () => {
@@ -7114,6 +7120,25 @@ function checkTreeShape(layout: Layout): string[] {
 		if (node.parent === null && !seen.has(node) && flatIsConnected(domNode)) {
 			problems.push(`${name(node)} is held by no box`);
 		}
+		if (
+			seen.has(node) &&
+			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&
+			isOutOfFlow(domNode) &&
+			getPosition(domNode as Element) !== "fixed"
+		) {
+			const containingBlock = getContainingBlockLayoutNode(
+				layout,
+				domNode as Element,
+			);
+			if (
+				containingBlock !== null &&
+				!isReachableFrom(node.parent, containingBlock)
+			) {
+				problems.push(
+					`${name(node)} hangs out of its containing block's reach`,
+				);
+			}
+		}
 		if (
 			seen.has(node) &&
 			nodeTypeOf(domNode) === domNode.ELEMENT_NODE &&

From b9a251fa149dd92c92699a8495873a1f8ba0f929 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 15:10:55 -0400
Subject: [PATCH 96/99] Give a root of its own only to a box a run measures

An atomic inline lays its content out under a root of its own that its
run's measure lays out. One taken out of flow is measured by no run, and
a root made for it took its content from its own node and was laid out
by nothing, so an absolute inline-table showed nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index b8c32e5e..0eecb05e 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -2730,8 +2730,11 @@ function syncIndependentFormattingContext(
 	// steal back the container's boxes.
 	const grid = display === "inline-grid";
 	const table = display === "inline-table";
+	// Only a run's measure lays the root out, so a box no run measures, as
+	// an out-of-flow one, lays its content out on its own node.
 	if (
 		!establishesIndependentFormattingContext(element) ||
+		!isMeasuredAsRun(element) ||
 		(!grid && !table && !hasBlockLevelBox(element))
 	) {
 		if (box.independentFormattingContext) {

From 00eb584b20eaf1fea808d35bd5160383203699be Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 15:35:02 -0400
Subject: [PATCH 97/99] Read a run's indent from its element when the run has
 no container

A box measured as a run of its own, as a text node's is, has no parent
box, and the run's measure asked that missing parent for its text-indent.
The block the lines are indented in is the run's container, or the
box's own element.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 0eecb05e..085f8af3 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -3629,7 +3629,14 @@ function measureInlineRun(
 	left: number,
 ): Size {
 	const outer = readsLineWidth;
-	readsLineWidth = hasPercentage(box.container, ["text-indent"]);
+	// The block the lines are indented in: the run's container, or for a
+	// box measured as a run of its own, the box's element.
+	const block = box.parent !== null
+		? box.container
+		: box.node !== null && nodeTypeOf(box.node) === box.node.ELEMENT_NODE
+		? (box.node as Element)
+		: box.node === null ? null : flatParentElement(box.node);
+	readsLineWidth = block !== null && hasPercentage(block, ["text-indent"]);
 	const breakResult = breakNodes(layout, box, width, widthSpace, left);
 	const widthDependent = readsLineWidth;
 	readsLineWidth = outer || widthDependent;

From 64ed6996efbd108e3672ee9be7ef7e4139ca53bd Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 16:03:58 -0400
Subject: [PATCH 98/99] Align atomic inlines on the baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An inline-block, inline-table, inline-grid or image sat at the top of
its line, which it filled, and the text beside it sat on the line's top
row. Each now sits with its baseline on the line's (css2 §10.8.1): an
inline-block's last line, an inline-table's, inline-grid's or
inline-flex's first, and the bottom edge of an image or of a box that
clips. vertical-align: top, middle and bottom place one against the
line instead. A line is as tall as what reaches furthest above the
baseline and below it, and its text sits on the baseline's row; a line
of text alone is placed as it was.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts                        | 216 +++++++++++++-----
 src/internal/painter.ts                       |  16 +-
 tests/__snapshots__/inline-block.test.ts.snap |   4 +-
 tests/img.test.ts                             |   4 +-
 tests/inline-block.test.ts                    |  54 +++++
 tests/layout-invalidation.test.ts             |   3 +-
 tests/user-select.test.ts                     |   4 +-
 7 files changed, 233 insertions(+), 68 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 085f8af3..705c29b1 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -1263,12 +1263,17 @@ function *getInlineBlockReaches(
 	from = 0,
 ): Generator<[number, number]> {
 	for (const line of lines.lines) {
-		for (const {leaf} of line.segments) {
+		for (const segment of line.segments) {
+			const leaf = segment.leaf;
 			if (leaf.type !== "inline-block") {
 				continue;
 			}
 			const top =
-				from + line.y + leaf.boxModel.borderTopWidth + leaf.boxModel.paddingTop;
+				from +
+				line.y +
+				segment.dy +
+				leaf.boxModel.borderTopWidth +
+				leaf.boxModel.paddingTop;
 			const context = layout.boxes.get(leaf.node)?.independentFormattingContext;
 			const extent = context ? extents.get(context) : undefined;
 			if (extent !== undefined) {
@@ -3477,11 +3482,19 @@ interface LineResult {
 			// The direction the characters were reordered into. Null in logical
 			// order (no bidi on the line, or a terminal that reorders for itself).
 			visualBase: "ltr" | "rtl" | null;
+
+			// An atomic inline's top below the line's, and its height, as
+			// vertical-align puts it on the line. Zero for anything else.
+			dy: number;
+			height: number;
 		}
 	>;
 	y: number;
 	width: number;
 	height: number;
+	// The row the line's text sits on, below the line's top: its baseline,
+	// which an atomic inline taller above it pushes down.
+	textTop: number;
 }
 
 export interface BreakResult {
@@ -4796,21 +4809,7 @@ function buildLines(
 		}
 
 		if (lineNodes.length > 0) {
-			// Whole rows: a line is drawn on rows.
-			const lineHeight = Math.round(
-				Math.max(
-					...lineNodes.map((n) =>
-						n.leaf.type === "inline-block"
-							? n.leaf.contentHeight +
-						n.leaf.boxModel.paddingTop +
-						n.leaf.boxModel.paddingBottom +
-						n.leaf.boxModel.borderTopWidth +
-						n.leaf.boxModel.borderBottomWidth
-							: 1,
-					),
-					1,
-				),
-			);
+			const {lineHeight, textTop} = placeOnLine(layout, lineNodes);
 
 			// css2 §10.8.1: a line is as tall as the line-height of its block
 			// and of the text on it, with the leading split above and below.
@@ -4842,6 +4841,7 @@ function buildLines(
 				y: currentY + Math.floor(leading / 2),
 				height: lineHeight,
 				width: bestBreakWidth,
+				textTop,
 			});
 
 			currentY += lineHeight + leading;
@@ -4858,6 +4858,126 @@ function buildLines(
 	return {lines, wrapped, height: currentY};
 }
 
+// css2 §10.8: each box on a line is placed by its vertical-align, text on
+// the line's baseline and an atomic inline with its baseline on it, and
+// the line is as tall as what reaches furthest above the baseline and
+// below it. In whole rows: text is a row, with the baseline its bottom.
+function placeOnLine(
+	layout: Layout,
+	segments: LineResult["segments"],
+): {lineHeight: number; textTop: number} {
+	let above = 1;
+	let below = 0;
+	const atomics: Array<{
+		segment: LineResult["segments"][number];
+		height: number;
+		baseline: number;
+		align: string;
+	}> = [];
+	for (const segment of segments) {
+		if (segment.leaf.type !== "inline-block") {
+			continue;
+		}
+		const leaf = segment.leaf;
+		const height = Math.round(
+			leaf.contentHeight +
+				leaf.boxModel.paddingTop +
+				leaf.boxModel.paddingBottom +
+				leaf.boxModel.borderTopWidth +
+				leaf.boxModel.borderBottomWidth,
+		);
+		const align = getComputedValue(leaf.node, "vertical-align");
+		const baseline = getAtomicBaseline(layout, leaf, height);
+		atomics.push({segment, height, baseline, align});
+		if (align !== "top" && align !== "bottom" && align !== "middle") {
+			above = Math.max(above, baseline);
+			below = Math.max(below, height - baseline);
+		}
+	}
+	let lineHeight = above + below;
+	for (const {height} of atomics) {
+		lineHeight = Math.max(lineHeight, height);
+	}
+	for (const {segment, height, baseline, align} of atomics) {
+		segment.height = height;
+		segment.dy = align === "top"
+			? 0
+			: align === "bottom"
+			? lineHeight - height
+			: align === "middle"
+			? Math.floor((lineHeight - height) / 2)
+			: above - baseline;
+	}
+	return {lineHeight, textTop: above - 1};
+}
+
+// The rows from an atomic inline's top through the row its baseline is
+// the bottom of (css2 §10.8.1): an inline-table's, an inline-grid's or an
+// inline-flex's first line, an inline-block's last when it shows its
+// content past its edges, and otherwise, a replaced box's included, its
+// bottom edge.
+function getAtomicBaseline(
+	layout: Layout,
+	leaf: InlineBlockLeaf,
+	height: number,
+): number {
+	const element = leaf.node;
+	const display = getLayoutDisplay(element);
+	const first =
+		display === "inline-table" ||
+		display === "inline-grid" ||
+		display === "inline-flex";
+	if (
+		isReplacedBox(element) ||
+		(!first &&
+			(getComputedValue(element, "overflow-x") !== "visible" ||
+				getComputedValue(element, "overflow-y") !== "visible"))
+	) {
+		return height;
+	}
+	const inset = leaf.boxModel.borderTopWidth + leaf.boxModel.paddingTop;
+	const context = layout.boxes.get(element)?.independentFormattingContext;
+	const line = context
+		? getLineInTree(layout, context, first)
+		: leaf.breakResult === undefined || leaf.breakResult.lines.length === 0
+		? null
+		: first ? leaf.breakResult.lines[0].y : leaf.breakResult.lines.at(-1)!.y;
+	return line === null
+		? height
+		: Math.min(height, Math.max(1, Math.round(inset + line + 1)));
+}
+
+// The top of the first or last line laid out in a tree, from its root's
+// top, depth first through the boxes in flow.
+function getLineInTree(
+	layout: Layout,
+	node: LayoutNode,
+	first: boolean,
+): number | null {
+	const children = first ? node.children : [...node.children].reverse();
+	for (const child of children) {
+		if (
+			child.style.displayType === "none" ||
+			child.style.positionType === "absolute" ||
+			child.style.positionType === "fixed"
+		) {
+			continue;
+		}
+		const lines = child.measure === null
+			? undefined
+			: getMeasuredLines(layout, child);
+		const line = lines !== undefined && lines.lines.length > 0
+			? (first ? lines.lines[0] : lines.lines.at(-1)!).y +
+				child.style.border.top +
+				child.result.padding.top
+			: getLineInTree(layout, child, first);
+		if (line !== null) {
+			return child.grid.top + line;
+		}
+	}
+	return null;
+}
+
 // The rows a line-height asks for: as many as it is times the text's font
 // size, rounded down, and at least one. A terminal draws every glyph one row
 // tall whatever its size, so the ratio is what carries the spacing the
@@ -5587,7 +5707,7 @@ function getInlineCursorBefore(
 					(segment.leaf.type === "inline-block"
 						? segment.leaf.boxModel.marginRight
 						: 0),
-				y: line.y,
+				y: line.y + line.textTop,
 			};
 		}
 	}
@@ -5644,6 +5764,8 @@ function getNodesInRange(
 					dataStart,
 					dataEnd,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "inline-block") {
 				// The placeholder advances by the margin box, so the line fits it
@@ -5669,6 +5791,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "edge") {
 				width = getEdgeWidth(item.leafNode);
@@ -5682,6 +5806,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			} else if (item.leafNode.type === "br") {
 				nodes.push({
@@ -5694,6 +5820,8 @@ function getNodesInRange(
 					dataStart: 0,
 					dataEnd: 0,
 					visualBase: null,
+					dy: 0,
+					height: 0,
 				});
 			}
 
@@ -8195,6 +8323,7 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 			hop.segment.leaf.boxModel.borderLeftWidth;
 		originY +=
 			hop.line.y +
+			hop.segment.dy +
 			hop.segment.leaf.boxModel.paddingTop +
 			hop.segment.leaf.boxModel.borderTopWidth;
 		if (hop.segment.leaf.breakResult) {
@@ -8214,11 +8343,7 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 	// a box heads in a block is not its box.
 	const ownLayoutNode = descended ? undefined : runLayoutNode(layout, element);
 	const anonymous = ownLayoutNode && layout.anonymousBoxes.get(ownLayoutNode);
-	const height = getAtomicHeight(
-		element,
-		target.segment.leaf,
-		target.line.height,
-	);
+	const height = target.segment.height;
 	if (ownLayoutNode && (!anonymous || anonymous.styledFrom === element)) {
 		const {x, y} = getDocumentPosition(layout, element, ownLayoutNode);
 		return new layout.domRect(x, y, target.segment.width, height);
@@ -8227,36 +8352,12 @@ function getInlineBlockRect(layout: Layout, element: Element): DOMRect | null {
 		originX +
 		getLineStart(alignContainer, breakResult, target.line) +
 			target.segment.x,
-		originY + target.line.y,
+		originY + target.line.y + target.segment.dy,
 		target.segment.width,
 		height,
 	);
 }
 
-/**
- * An atomic inline's height on its line. An inline-block fills the line,
- * as this engine lays lines out, but an image or a canvas is as tall as
- * its own content, so a taller neighbor does not stretch its pixels.
- */
-export function getAtomicHeight(
-	element: Element,
-	leaf: InlineBlockLeaf,
-	lineHeight: number,
-): number {
-	if (!isReplacedBox(element)) {
-		return lineHeight;
-	}
-	const box = leaf.boxModel;
-	return Math.min(
-		lineHeight,
-		leaf.contentHeight +
-		box.paddingTop +
-		box.paddingBottom +
-			box.borderTopWidth +
-		box.borderBottomWidth,
-	);
-}
-
 function rangeTextNodes(layout: Layout, range: Range): Text[] {
 	const root = range.commonAncestorContainer;
 	if (nodeTypeOf(root) === root.TEXT_NODE) {
@@ -8660,9 +8761,14 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 											visualBase: nestedSegment.visualBase,
 											rect: new layout.domRect(
 												containerX + segment.x + paddingLeft + nestedSegment.x,
-												containerY + line.y + paddingTop + nestedLine.y,
+												containerY +
+													line.y +
+													segment.dy +
+													paddingTop +
+													nestedLine.y +
+													nestedLine.textTop,
 												nestedSegment.width,
-												nestedLine.height,
+												nestedLine.height - nestedLine.textTop,
 											),
 										});
 									} else if (
@@ -8696,10 +8802,13 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 															innerSegment.x,
 															containerY +
 															line.y +
+															segment.dy +
 															paddingTop +
 															nestedLine.y +
+															nestedSegment.dy +
 															nestedPaddingTop +
-															innerLine.y,
+															innerLine.y +
+															innerLine.textTop,
 															innerSegment.width,
 															innerLine.height,
 														),
@@ -8791,6 +8900,7 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 							segment.leaf.boxModel.borderLeftWidth;
 						accumulatedOffsetY +=
 							line.y +
+							segment.dy +
 							segment.leaf.boxModel.paddingTop +
 							segment.leaf.boxModel.borderTopWidth;
 						if (segment.leaf.breakResult) {
@@ -8924,9 +9034,9 @@ function getRectTexts(layout: Layout, node: Node): RectText[] {
 
 		const rect = new layout.domRect(
 			containerX + minX + alignOffset + indent,
-			containerY + line.y,
+			containerY + line.y + line.textTop,
 			maxX - minX,
-			line.height,
+			line.height - line.textTop,
 		);
 		rectTexts.push({
 			rect,
diff --git a/src/internal/painter.ts b/src/internal/painter.ts
index 9f005521..0c51ab75 100644
--- a/src/internal/painter.ts
+++ b/src/internal/painter.ts
@@ -62,7 +62,6 @@ import {
 	collectStackingLayers,
 	type Display,
 	fullWidthFixedRows,
-	getAtomicHeight,
 	getExtentFrame,
 	getLayoutNode,
 	getLineAlignOffset,
@@ -1426,8 +1425,7 @@ function paintMember(
 	const element = node as Element;
 	const leaf = run.leaves.get(element);
 	if (leaf !== undefined) {
-		const height = getAtomicHeight(element, leaf.leaf, leaf.rect.height);
-		paintAtomic(painter, element, leaf.leaf, {...leaf.rect, height}, ctx);
+		paintAtomic(painter, element, leaf.leaf, leaf.rect, ctx);
 		return;
 	}
 	if (hoistedToLayer(painter.layout, element)) {
@@ -1647,9 +1645,9 @@ function resolveRun(
 				const shift = getShift(leaf.node);
 				const rect = {
 					left: lineX + segment.x + shift.x,
-					top: lineY + shift.y,
+					top: lineY + segment.dy + shift.y,
 					width: segment.width,
-					height: line.height,
+					height: segment.height,
 				};
 				run.leaves.set(leaf.node, {rect, leaf});
 				coverAncestors(boxLines, leaf.node, container, lineY, rect);
@@ -1659,9 +1657,9 @@ function resolveRun(
 				const shift = getShift(leaf.node);
 				const rect = {
 					left: lineX + segment.x + shift.x,
-					top: lineY + shift.y,
+					top: lineY + line.textTop + shift.y,
 					width: segment.width,
-					height: line.height,
+					height: line.height - line.textTop,
 				};
 				coverAncestors(boxLines, leaf.node, container, lineY, rect);
 				const margin = Math.max(0, leaf.margin);
@@ -1676,9 +1674,9 @@ function resolveRun(
 			const shift = getShift(textNode);
 			const rect = {
 				left: span.left + shift.x,
-				top: lineY + shift.y,
+				top: lineY + line.textTop + shift.y,
 				width: span.right - span.left,
-				height: line.height,
+				height: line.height - line.textTop,
 			};
 			let fragments = run.texts.get(textNode);
 			if (fragments === undefined) {
diff --git a/tests/__snapshots__/inline-block.test.ts.snap b/tests/__snapshots__/inline-block.test.ts.snap
index 7438ff69..dfca17d0 100644
--- a/tests/__snapshots__/inline-block.test.ts.snap
+++ b/tests/__snapshots__/inline-block.test.ts.snap
@@ -73,8 +73,8 @@ exports[`inline-block with explicit width 1`] = `   [38;2;255;25
 `;
 
 exports[`inline-block with height 1`] = `TallNormal                              
-                                        
-                                        
+                                        
+                                        
                                         
                                         
                                         
diff --git a/tests/img.test.ts b/tests/img.test.ts
index b997715d..f6151ac0 100644
--- a/tests/img.test.ts
+++ b/tests/img.test.ts
@@ -270,7 +270,9 @@ test("an image sits on a line with the text around it", async () => {
 	await nextFrame(dom);
 	// A frame drawn while it loaded showed its wider loading box, whose
 	// last cell was erased.
-	expect(rowText(terminal, 0).trimEnd()).toBe("before ▄▄ after");
+	// Its bottom edge is its baseline, which the text sits on.
+	expect(rowText(terminal, 0).trimEnd()).toBe("       ▄▄");
+	expect(rowText(terminal, 1).trimEnd()).toBe("before ▄▄ after");
 	// The image's computed display stays inline, as in a browser.
 	expect(
 		dom.window.getComputedStyle(document.querySelector("img")!).display,
diff --git a/tests/inline-block.test.ts b/tests/inline-block.test.ts
index 3894040a..6a5891c1 100644
--- a/tests/inline-block.test.ts
+++ b/tests/inline-block.test.ts
@@ -574,3 +574,57 @@ test("whitespace between columns takes no room at font-size 0", () => {
 	}
 	dom.dispose();
 });
+
+// css2 §10.8.1: an atomic inline sits with its baseline on the line's, so
+// the text beside it lines up with its last line of text, an
+// inline-table's first, or the bottom edge of a box that clips.
+async function lineRows(html: string): Promise<string[]> {
+	const terminal = new MockProcess({cols: 30, rows: 6});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.document.body.innerHTML = html;
+	await nextFrame(dom);
+	const rows = terminal.getPlainText()
+		.split("\n")
+		.map((line) => line.replace(/\s+$/, ""))
+		.filter((line) => line !== "");
+	dom.dispose();
+	return rows;
+}
+
+test("text beside an inline-block sits on its last line", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block\"><div>one</div>" +
+				"<div>two</div></span> after",
+		),
+	).toEqual(["       one", "before two after"]);
+});
+
+test("vertical-align: top puts an inline-block's top on the line's", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block; vertical-align: top\">" +
+				"<div>one</div><div>two</div></span> after",
+		),
+	).toEqual(["before one after", "       two"]);
+});
+
+test("text beside an inline-table sits on its first row", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-table\">" +
+				"<span style=\"display: table-row\"><span style=\"display: table-cell\">" +
+				"one</span></span><span style=\"display: table-row\">" +
+				"<span style=\"display: table-cell\">two</span></span></span> after",
+		),
+	).toEqual(["before one after", "       two"]);
+});
+
+test("text beside an inline-block that clips sits on its bottom edge", async () => {
+	expect(
+		await lineRows(
+			"before <span style=\"display: inline-block; overflow: hidden\">" +
+				"<div>one</div><div>two</div><div>three</div></span> after",
+		),
+	).toEqual(["       one", "       two", "before three after"]);
+});
diff --git a/tests/layout-invalidation.test.ts b/tests/layout-invalidation.test.ts
index a5413681..b0580a37 100644
--- a/tests/layout-invalidation.test.ts
+++ b/tests/layout-invalidation.test.ts
@@ -509,7 +509,8 @@ test("a block arriving under a box that measures as a unit rebuilds it", async (
 	const host = document.getElementById("s")!;
 	host.insertBefore(block, host.firstChild);
 	await nextFrame(dom);
-	expect(lines().slice(0, 2)).toEqual(["NB", "A"]);
+	// The inline-block's baseline is its last line, which the text sits on.
+	expect(lines().slice(0, 2)).toEqual(["N", "AB"]);
 
 	dom.dispose();
 });
diff --git a/tests/user-select.test.ts b/tests/user-select.test.ts
index 87aff0b2..20b8395c 100644
--- a/tests/user-select.test.ts
+++ b/tests/user-select.test.ts
@@ -118,8 +118,8 @@ test("toString is the rendered text, not the range's DOM text", async () => {
 	await nextFrame(dom);
 
 	await type(terminal, press(1, 1));
-	await type(terminal, drag(39, 5));
-	await type(terminal, release(39, 5));
+	await type(terminal, drag(39, 6));
+	await type(terminal, release(39, 6));
 	await nextFrame(dom);
 	const text = dom.window.getSelection()!.toString();
 	expect(text).toContain("sum");

From a571df56b6ee3d71040655ff5f622456e4d08466 Mon Sep 17 00:00:00 2001
From: Brian Kim <briankimpossible@gmail.com>
Date: Thu, 15 Oct 2026 16:50:28 -0400
Subject: [PATCH 99/99] Put an empty textarea's caret inside its border in a
 flex row

An inline-block flex item's measure counts its cross-axis border and
padding in its size, so its layout node holds none on those edges. The
content rect read the node's edges as the box's, so a focused, empty
textarea in a flex row parked its caret on its top border. Which edges
are masked is now one function, which the masking and the content rect
both read.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/internal/layout.ts | 51 +++++++++++++++++++++++++++---------------
 tests/textarea.test.ts | 24 ++++++++++++++++++++
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/internal/layout.ts b/src/internal/layout.ts
index 705c29b1..c5ab2dde 100644
--- a/src/internal/layout.ts
+++ b/src/internal/layout.ts
@@ -231,6 +231,24 @@ function getLayoutDisplay(element: Element): Display {
 	return DISPLAYS.has(value) ? (value as Display) : "block";
 }
 
+// An inline-block flex item's measure returns a border-box size, so its
+// layout node must not add padding and border again on the cross axis (a
+// bordered textarea in a flex row came out too tall). The main axis is
+// masked by flex sizing. The node then holds none on those edges, though
+// the box has them.
+function getMaskedEdges(element: Element): readonly Edge[] {
+	if (getLayoutDisplay(element) !== "inline-block" || !hasFlexParent(element)) {
+		return [];
+	}
+	const direction = getComputedValue(
+		boxParentElement(element)!,
+		"flex-direction",
+	);
+	return direction === "column" || direction === "column-reverse"
+		? ["left", "right"]
+		: ["top", "bottom"];
+}
+
 function applyTableContainer(style: Style, element: Element): void {
 	style.displayType = "table";
 	style.borderCollapse =
@@ -1490,24 +1508,9 @@ function styleLayoutNodeProperties(
 		applyLegacyAlignment(style, element, display, parentIsFlex);
 	}
 
-	// An inline-block flex item's measure returns a border-box size, so
-	// the layout node must not add padding+border again on the cross axis (a
-	// bordered textarea in a flex row came out too tall). The main axis is
-	// masked by flex sizing.
-	if (display === "inline-block" && hasFlexParent(element)) {
-		const direction = getComputedValue(
-			boxParentElement(element)!,
-			"flex-direction",
-		);
-		const crossEdges: readonly Edge[] =
-			direction === "column" ||
-			direction === "column-reverse"
-				? ["left", "right"]
-				: ["top", "bottom"];
-		for (const edge of crossEdges) {
-			style.padding[edge] = toValue(0);
-			style.border[edge] = 0;
-		}
+	for (const edge of getMaskedEdges(element)) {
+		style.padding[edge] = toValue(0);
+		style.border[edge] = 0;
 	}
 
 	// Item properties are consulted only inside a flex or grid container,
@@ -6238,6 +6241,18 @@ export class Layout {
 			top = border.top + padding.top;
 			right = border.right + padding.right;
 			bottom = border.bottom + padding.bottom;
+			// Edges its measure counts in its size are not on its node.
+			const masked = getMaskedEdges(element);
+			if (masked.length > 0) {
+				const box = getBoxModel(element);
+				if (masked.includes("top")) {
+					top = (box.borderTopWidth || 0) + (box.paddingTop || 0);
+					bottom = (box.borderBottomWidth || 0) + (box.paddingBottom || 0);
+				} else {
+					left = (box.borderLeftWidth || 0) + (box.paddingLeft || 0);
+					right = (box.borderRightWidth || 0) + (box.paddingRight || 0);
+				}
+			}
 		} else {
 			const box = getBoxModel(element);
 			left = (box.borderLeftWidth || 0) + (box.paddingLeft || 0);
diff --git a/tests/textarea.test.ts b/tests/textarea.test.ts
index 645d13cb..76650a1a 100644
--- a/tests/textarea.test.ts
+++ b/tests/textarea.test.ts
@@ -162,6 +162,30 @@ test("the caret parks at the content origin of an empty textarea", async () => {
 	dom.dispose();
 });
 
+// In a flex row the textarea's measure counts its border in its height,
+// and its layout node holds no border on that axis. Its content box is
+// still inside the border.
+test("the caret parks inside the border of an empty textarea in a flex row", async () => {
+	const terminal = new MockProcess({rows: 8, cols: 40});
+	const dom = new TermDOM({transport: terminal.transport});
+	dom.attach();
+	await new Promise((r) => setTimeout(r, 0));
+	const {document} = dom;
+	document.body.innerHTML =
+		"<style>body { margin: 0; }</style><div>line one</div>" +
+		"<div style=\"display: flex\"><div>Body</div><textarea rows=\"2\">" +
+		"</textarea></div>";
+	document.querySelector("textarea")!.focus();
+	await nextFrame(dom);
+	await nextFrame(dom);
+
+	// Border row 1, content row 2; "Body", border and padding, column 6.
+	const buffer = (terminal as any).terminal.buffer.active;
+	expect(buffer.cursorY).toBe(2);
+	expect(buffer.cursorX).toBe(6);
+	dom.dispose();
+});
+
 test("the caret parks at the multiline position; arrows move between lines", async () => {
 	const terminal = new MockProcess({rows: 8, cols: 40});
 	const dom = new TermDOM({transport: terminal.transport});