gesso-core 0.6.18 → 0.6.20

package/dist/{CanvasSurface-BSvtTgJZ.js → CanvasSurface-VUJRrcXl.js}

@@ -804,6 +804,10 @@ var DirtyNodeSet = class {
 	isEmpty() {
 		return this.nodes.size === 0;
 	}
+	/** The nodes in the set, without draining it. Not to be changed while walked. */
+	values() {
+		return this.nodes.values();
+	}
 	/**
 	* Whether any node in the set carries one of `flags`, without
 	* draining it.
@@ -3919,6 +3923,19 @@ const UiProperties = {
 		inherited: false,
 		affects: 6
 	}),
+	/**
+	* Whether a scroll container shows its overlay scrollbars: \`'auto'\`
+	* (the default) while scrolling, \`'none'\` never, and then they cannot
+	* be grabbed either. For a container scrolled by something else, as a
+	* picture is moved inside a window onto it, where a bar would claim
+	* the person could scroll it.
+	*/
+	scrollbars: defineProperty({
+		name: "scrollbars",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 6
+	}),
 	inset: defineProperty({
 		name: "inset",
 		defaultValue: void 0,
@@ -5161,6 +5178,36 @@ var UiGraph = class {
 		this.nodeRemovedListener?.(node);
 		for (let i = removed.length - 1; i > 0; i--) this.detachNode(removed[i]);
 	}
+	/**
+	* Moves a child before \`reference\` among its own siblings, or to the
+	* end when that is null. Its parent is unchanged, and so is everything
+	* it inherits, so its subtree is not visited: a lazy list recycling its
+	* rows moves one from end to end on every frame of a scroll, and
+	* re-inheriting walked the whole row each time.
+	*/
+	moveWithin(child, reference) {
+		const parent = child.parent;
+		if (parent === null) throw new Error(`Node '${child.id}' has no parent to move within.`);
+		if (reference !== null && reference.parent !== parent) throw new Error(`Reference node '${reference.id}' is not a sibling of '${child.id}'.`);
+		if (child === reference || child.nextSibling === reference) return;
+		this.detachNode(child);
+		parent.childOrderVersion++;
+		child.parent = parent;
+		if (reference === null) {
+			const last = parent.lastChild;
+			child.previousSibling = last;
+			if (last !== null) last.nextSibling = child;
+			else parent.firstChild = child;
+			parent.lastChild = child;
+			return;
+		}
+		const previous = reference.previousSibling;
+		if (previous !== null) previous.nextSibling = child;
+		else parent.firstChild = child;
+		child.previousSibling = previous;
+		child.nextSibling = reference;
+		reference.previousSibling = child;
+	}
 	detachNode(node) {
 		const parent = node.parent;
 		if (!parent) return;
@@ -7707,9 +7754,14 @@ function linkRunAtPointIn(geometry, x, y) {
 *                    testing. This is the same shape as the CSS
 *                    `inert` attribute: a disabled Button stays
 *                    inert even when it wraps Text children.
-*   pointerEvents  — 'none' makes the node AND its subtree skipped
-*                    by hit testing (CSS-like). Use it to block a
-*                    whole region.
+*   pointerEvents  — inherited, as in CSS: 'none' makes the node and
+*                    its subtree skipped by hit testing, except where
+*                    a descendant sets 'auto', which takes presses
+*                    again. An overlay that lets presses through to
+*                    what is under it, with popups on it that take
+*                    them, is 'none' with 'auto' on each popup.
+*                    'none' on the node itself also keeps it from
+*                    focus and keyboard, as before.
 *   hitTestable    — false skips only the node itself; children are
 *                    still tested. Use it for decorative containers
 *                    that must not swallow clicks.
@@ -7721,13 +7773,29 @@ function linkRunAtPointIn(geometry, x, y) {
 */
 /** The node and its whole subtree are excluded from pointer input. */
 function isNodeInert(node) {
-	if (node.properties.get("disabled") === true) return true;
 	if (node.properties.get("pointerEvents") === "none") return true;
+	return isSubtreeInert(node);
+}
+/**
+* Disabled or hidden: the node and everything under it, with no way
+* back for a descendant. `pointerEvents: 'none'` is not this, since a
+* descendant can set 'auto'; the hit tester follows that itself.
+*/
+function isSubtreeInert(node) {
+	if (node.properties.get("disabled") === true) return true;
 	if (node.properties.get("visible") === false) return true;
 	const opacity = node.properties.get("opacity");
 	if (typeof opacity === "number" && Number.isFinite(opacity) && opacity <= 0) return true;
 	return false;
 }
+/** `pointerEvents` as CSS inherits it: the nearest value set from the node up, 'auto' when none is. */
+function pointerEventsOf(node) {
+	for (let current = node; current !== null; current = current.parent) {
+		const value = current.properties.get("pointerEvents");
+		if (value === "auto" || value === "none") return value;
+	}
+	return "auto";
+}
 /** The node itself cannot be the target of a hit, but children can. */
 function isNodeHitTestable(node) {
 	return node.properties.get("hitTestable") !== false;
@@ -9358,6 +9426,7 @@ function scrollbarThumb(rec, axis) {
 	return thumbFor(rec, axis);
 }
 function thumbFor(rec, axis) {
+	if (rec.hidesScrollbars) return null;
 	const viewport = axis === "y" ? rec.height : rec.width;
 	const content = axis === "y" ? rec.contentHeight : rec.contentWidth;
 	if (!(content > viewport) || viewport <= 0) return null;
@@ -9473,6 +9542,13 @@ var UiHitTester = class {
 	liftedScratch = [];
 	/** True while testing inside a lifted subtree, so it is not skipped again. */
 	inLifted = false;
+	/**
+	* `pointerEvents` as the node being tested has it, inherited: true
+	* under a 'none' that nothing nearer has set back to 'auto'. Such a
+	* node is passed over, but its children are still tested, since one
+	* of them may say 'auto'.
+	*/
+	pointerNone = false;
 	constructor(layout, root) {
 		this.layout = layout;
 		this.root = root;
@@ -9507,7 +9583,9 @@ var UiHitTester = class {
 		const out = [];
 		this.forEachLifted(x, y, (node, px, py) => {
 			this.inLifted = true;
+			this.pointerNone = pointerEventsOf(node.parent) === "none";
 			this.collectNode(node, px, py, out);
+			this.pointerNone = false;
 			this.inLifted = false;
 			return false;
 		});
@@ -9515,7 +9593,16 @@ var UiHitTester = class {
 		return out;
 	}
 	collectNode(node, x, y, out) {
-		if (isNodeInert(node)) return;
+		if (isSubtreeInert(node)) return;
+		const outer = this.pointerNone;
+		this.pointerNone = this.inheritsNone(node, outer);
+		try {
+			this.collectOwn(node, x, y, out);
+		} finally {
+			this.pointerNone = outer;
+		}
+	}
+	collectOwn(node, x, y, out) {
 		const rec = this.layout.recordFor(node);
 		if (rec === void 0 || !this.invertPoint(node, rec, x, y)) return;
 		if (rec.lifted && !this.inLifted) return;
@@ -9526,7 +9613,7 @@ var UiHitTester = class {
 		const shiftX = rec.clips && rec.scrollable ? rec.scrollX : 0;
 		const shiftY = rec.clips && rec.scrollable ? rec.scrollY : 0;
 		this.collectChildren(node, px + shiftX, py + shiftY, out);
-		if (inside && isNodeHitTestable(node)) out.push(node);
+		if (inside && this.targetable(node)) out.push(node);
 	}
 	collectChildren(parent, x, y, out) {
 		const order = this.layout.recordFor(parent)?.paintOrder;
@@ -9609,7 +9696,9 @@ var UiHitTester = class {
 	hitTestLifted(x, y) {
 		return this.forEachLifted(x, y, (node, px, py) => {
 			this.inLifted = true;
+			this.pointerNone = pointerEventsOf(node.parent) === "none";
 			const hit = this.hitTestNode(node, px, py);
+			this.pointerNone = false;
 			this.inLifted = false;
 			return hit;
 		});
@@ -9675,7 +9764,25 @@ var UiHitTester = class {
 		this.point.y = py;
 	}
 	hitTestNode(node, x, y) {
-		if (isNodeInert(node)) return false;
+		if (isSubtreeInert(node)) return false;
+		const outer = this.pointerNone;
+		this.pointerNone = this.inheritsNone(node, outer);
+		try {
+			return this.hitTestOwn(node, x, y);
+		} finally {
+			this.pointerNone = outer;
+		}
+	}
+	/** Whether a node is under a 'none': its own value, else its parent's. */
+	inheritsNone(node, parentNone) {
+		const own = node.properties.get("pointerEvents");
+		return own === "none" ? true : own === "auto" ? false : parentNone;
+	}
+	/** Whether a press may land on the node itself. */
+	targetable(node) {
+		return !this.pointerNone && isNodeHitTestable(node);
+	}
+	hitTestOwn(node, x, y) {
 		const rec = this.layout.recordFor(node);
 		if (rec === void 0) return false;
 		if (rec.lifted && !this.inLifted) return false;
@@ -9684,7 +9791,7 @@ var UiHitTester = class {
 		const py = this.point.y - rec.stickyOffsetY;
 		if (rec.clips) {
 			if (px < rec.x || px >= rec.x + rec.width || py < rec.y || py >= rec.y + rec.height) return false;
-			if ((rec.scrollable || rec.textScrollbars) && scrollLeaderOf(node) === null && this.hitScrollbar(node, rec, px, py)) return true;
+			if (!this.pointerNone && (rec.scrollable || rec.textScrollbars) && scrollLeaderOf(node) === null && this.hitScrollbar(node, rec, px, py)) return true;
 			if (this.zoneOnly) {
 				const shiftX = rec.scrollX;
 				const shiftY = rec.scrollY;
@@ -9693,10 +9800,10 @@ var UiHitTester = class {
 			const shiftX = rec.scrollable ? rec.scrollX : 0;
 			const shiftY = rec.scrollable ? rec.scrollY : 0;
 			if (this.hitTestChildren(node, px + shiftX, py + shiftY)) return true;
-			return isNodeHitTestable(node) && this.recordHit(node, rec, px, py);
+			return this.targetable(node) && this.recordHit(node, rec, px, py);
 		}
 		if (this.hitTestChildren(node, px, py)) return true;
-		if (this.zoneOnly || !isNodeHitTestable(node)) return false;
+		if (this.zoneOnly || !this.targetable(node)) return false;
 		if (px < rec.x || px >= rec.x + rec.width || py < rec.y || py >= rec.y + rec.height) return false;
 		return this.recordHit(node, rec, px, py);
 	}
@@ -10871,6 +10978,11 @@ var UiWheelController = class {
 	* wheel of a burst land correctly even though the first could not.
 	*/
 	lastWheelTarget = null;
+	/**
+	* The container the wheel last scrolled, for a frame's report of where
+	* scrolling put it. Null until the wheel has scrolled something.
+	*/
+	lastScrolled = null;
 	wheel(x, y, deltaX, deltaY, modifiers = noKeyModifiers(), deltaMode = 0, wheelDeltaY, at) {
 		const target = this.hitTester.hitTest(x, y)?.node ?? null;
 		this.lastWheelTarget = target;
@@ -11023,7 +11135,8 @@ var UiWheelController = class {
 					dirX: 0,
 					dirY: 0,
 					quiet: 0,
-					fresh: false
+					fresh: false,
+					fitted: false
 				};
 				this.pacing.set(container, paced);
 			}
@@ -11039,9 +11152,11 @@ var UiWheelController = class {
 			});
 			while (paced.samples.length > 2 && paced.samples[0].t < this.eventTime - VELOCITY_WINDOW_MS) paced.samples.shift();
 			this.scrollSink.scrollBy(container, 0, 0, "instant");
+			this.lastScrolled = container;
 			return;
 		}
 		this.scrollSink.scrollBy(container, dx, dy, behavior);
+		this.lastScrolled = container;
 	}
 	/**
 	* A container's state as a step should judge it: during a paced gesture,
@@ -11069,16 +11184,15 @@ var UiWheelController = class {
 	* comes a varying time after the last step: applied as they arrive, a
 	* steady flick moves the page by uneven amounts, which reads as
 	* judder. Evening that out by waiting for steps puts the page behind
-	* the hand. So this does what a browser does for its own scrolling:
-	* it puts the page where the input will have reached when the frame is
-	* shown, the steps so far plus their velocity times the time since the
-	* last one, never more than a frame and a half ahead. Steps come out
-	* even, and nothing trails.
+	* the hand. So this does what a browser does for its own scrolling: it
+	* resamples the steps at the frame's time, reading a line fitted through
+	* the last `VELOCITY_WINDOW_MS` of them. Frames come out even, and
+	* nothing trails.
 	*
-	* A gesture's first step, with no velocity yet, goes as it is. Once the
-	* steps stop, the prediction is withdrawn and the page settles exactly
-	* where they add up to; a trackpad's momentum slows to nothing first,
-	* so there is next to nothing to withdraw.
+	* A gesture's first step, with no line yet, goes as it is. Once the
+	* steps stop, the page eases over a few frames to exactly where they add
+	* up to; a trackpad's momentum slows to nothing first, so there is next
+	* to nothing to take up.
 	*
 	* True while a gesture is still being paced, so the host keeps frames
 	* coming until it has settled.
@@ -11098,14 +11212,38 @@ var UiWheelController = class {
 			let y = paced.totalY;
 			const samples = paced.samples;
 			const last = samples[samples.length - 1];
-			let first = last;
-			for (let k = samples.length - 2; k >= 0 && last !== void 0 && samples[k].t >= last.t - RECENT_MS; k--) first = samples[k];
+			const first = samples[0];
 			const since = time === void 0 || last === void 0 ? -1 : time - last.t;
-			if (last !== void 0 && first !== void 0 && since >= -1 && since < STALE_MS && last.t - first.t >= 2) {
-				const span = last.t - first.t;
-				const ahead = Math.min(Math.max(since, 0) + this.frameInterval, this.frameInterval * MAX_AHEAD_FRAMES);
-				x += (last.x - first.x) / span * ahead;
-				y += (last.y - first.y) / span * ahead;
+			const at = time === void 0 ? void 0 : time - RESAMPLE_MS;
+			if (at !== void 0 && last !== void 0 && first !== void 0 && since >= -1 && at - last.t < STALE_MS && samples.length >= MIN_FIT_STEPS && last.t - first.t >= 2) {
+				let meanT = 0;
+				let meanX = 0;
+				let meanY = 0;
+				for (const sample of samples) {
+					meanT += sample.t;
+					meanX += sample.x;
+					meanY += sample.y;
+				}
+				meanT /= samples.length;
+				meanX /= samples.length;
+				meanY /= samples.length;
+				let varT = 0;
+				let covX = 0;
+				let covY = 0;
+				for (const sample of samples) {
+					const dt = sample.t - meanT;
+					varT += dt * dt;
+					covX += dt * (sample.x - meanX);
+					covY += dt * (sample.y - meanY);
+				}
+				x = meanX + covX / varT * (at - meanT);
+				y = meanY + covY / varT * (at - meanT);
+				paced.fitted = true;
+			} else if (paced.fitted) {
+				const drawnX = paced.lastX - paced.baseX;
+				const drawnY = paced.lastY - paced.baseY;
+				x = Math.abs(x - drawnX) < SETTLED_PX ? x : drawnX + (x - drawnX) * SETTLE_RATE;
+				y = Math.abs(y - drawnY) < SETTLED_PX ? y : drawnY + (y - drawnY) * SETTLE_RATE;
 			}
 			const state = this.scrollSink.containerState(container);
 			if (state === void 0) {
@@ -11131,7 +11269,7 @@ var UiWheelController = class {
 			if (dx !== 0 || dy !== 0) this.scrollSink.scrollBy(container, dx, dy, "instant");
 			paced.lastX = toX;
 			paced.lastY = toY;
-			if (toX === Math.min(Math.max(paced.baseX + paced.totalX, 0), state.maxScrollX) && toY === Math.min(Math.max(paced.baseY + paced.totalY, 0), state.maxScrollY) && paced.quiet >= QUIET_FRAMES) this.pacing.delete(container);
+			if (toX === Math.min(Math.max(paced.baseX + paced.totalX, 0), state.maxScrollX) && toY === Math.min(Math.max(paced.baseY + paced.totalY, 0), state.maxScrollY) && paced.quiet >= QUIET_FRAMES && (since < 0 || since >= STALE_MS)) this.pacing.delete(container);
 		}
 		return this.pacing.size > 0;
 	}
@@ -11185,18 +11323,29 @@ function isScrollContainer(node) {
 * hand from a trackpad to a mouse.
 */
 const PRECISE_MEMORY_MS = 400;
-/** How far back the velocity is read: a few of a trackpad's steps. */
-const VELOCITY_WINDOW_MS = 40;
-/** How long after the last step its velocity is still trusted. */
-const STALE_MS = 40;
 /**
-* The furthest ahead a frame predicts, in frames: a frame's lead, for the
-* frame it takes to be shown, plus the time since the last step, which is
-* what evens out where each frame falls between steps.
+* How far back the steps are fitted: five or six of a trackpad's. Less, and
+* the line follows each step's rounding; more, and it lags a flick that is
+* speeding up or slowing down. Measured on a real flick on a Mac, 48 ms left
+* a sixth of the frame-to-frame variation of the last-few-steps velocity,
+* with no frame standing still and the page no further behind the hand.
 */
-const MAX_AHEAD_FRAMES = 1.5;
-/** How far back the velocity is read for a prediction. */
-const RECENT_MS = 20;
+const VELOCITY_WINDOW_MS = 48;
+/** How long after the last step its line is still trusted. */
+const STALE_MS = 40;
+/**
+* How long before the frame the line is read. Each millisecond is one more
+* of lag and less of a guess: measured on recorded flicks, 12 left the
+* worst frames a third as uneven as reading at the frame, and the page
+* about 11 ms behind the hand, against 15 for steps applied as they come.
+*/
+const RESAMPLE_MS = 12;
+/** Steps a line is fitted through: two are a line through their rounding. */
+const MIN_FIT_STEPS = 3;
+/** How much of the way to where the steps add up to a frame goes once they stop. */
+const SETTLE_RATE = .35;
+/** Close enough to where the steps add up to, to go the rest at once. */
+const SETTLED_PX = .25;
 /** The display's interval before one has been measured. */
 const DEFAULT_FRAME_MS = 1e3 / 60;
 /** Quiet frames, once settled, after which a gesture is over. */
@@ -13926,6 +14075,8 @@ var LayoutRecord = class {
 	* multiline, the overlay scrollbars.
 	*/
 	scrollsText = false;
+	/** A scroll container set to show no scrollbars (\`scrollbars: 'none'\`). */
+	hidesScrollbars = false;
 	/**
 	* A multiline editable, which shows the overlay scrollbars a scroll
 	* container does over its own text. A single-line field scrolls
@@ -14188,6 +14339,7 @@ var LayoutRecord = class {
 		this.paintReachBottom = 0;
 		this.scrollable = false;
 		this.scrollsText = false;
+		this.hidesScrollbars = false;
 		this.textScrollbars = false;
 		this.mirrored = false;
 		this.sticky = false;
@@ -18207,6 +18359,7 @@ var LayoutEngine = class {
 		const overflow = props.get("overflow");
 		rec.scrollable = node.type === "scroll-view" || overflow === "scroll" || overflow === "auto" || overflow === "hidden" && scrollLeaderOf(node) !== null;
 		rec.scrollsText = node.type === "editable-text";
+		rec.hidesScrollbars = props.get("scrollbars") === "none";
 		rec.textScrollbars = rec.scrollsText && props.get("multiline") === true;
 		rec.mirrored = (rec.scrollable || rec.textScrollbars) && this.startEdge(node) === "right";
 		rec.clips = rec.scrollable || overflow === "hidden" || node.type === "editable-text";
@@ -20382,15 +20535,10 @@ var ScrollLayerCache = class {
 	* is how every one of those ends.
 	*/
 	refused = /* @__PURE__ */ new Set();
-	geometryVersion = NaN;
 	dpr = 0;
 	surfaceWidth = 0;
 	surfaceHeight = 0;
 	frame = null;
-	/** Whether this frame changed nothing a layer could not absorb: no layout, children, content or environment. */
-	calm = false;
-	/** Nodes this frame dirtied, and every ancestor of each, less a container that only scrolled. */
-	disturbed = /* @__PURE__ */ new Set();
 	/** Consecutive frames each container without a layer has scrolled quietly. See `SCROLL_LAYER_SETTLE_FRAMES`. */
 	streaks = /* @__PURE__ */ new WeakMap();
 	/**
@@ -20422,46 +20570,26 @@ var ScrollLayerCache = class {
 	/**
 	* Settles which layers this frame's changes leave standing, before
 	* anything is drawn. Every rule here drops; none keeps. A frame the
-	* caller could not vouch for drops them all.
+	* caller could not vouch for drops them all. What changed inside a
+	* container is not settled here but drawn over: see \`damage\`.
 	*/
 	beginFrame(changes, dpr, surfaceWidth, surfaceHeight) {
 		const interrupted = this.open;
 		this.open = true;
-		this.disturbed.clear();
-		this.calm = changes !== void 0;
-		for (const [node, flags] of changes?.frame.entries() ?? []) {
-			if ((flags & -355) !== 0) {
-				this.calm = false;
-				break;
-			}
-			for (let current = (flags & 32) !== 0 ? node.parent : node; current !== null; current = current.parent) this.disturbed.add(current);
-		}
-		if (interrupted || changes === void 0 || dpr !== this.dpr || surfaceWidth !== this.surfaceWidth || surfaceHeight !== this.surfaceHeight || changes.geometryVersion !== this.geometryVersion) {
+		if (interrupted || changes === void 0 || dpr !== this.dpr || surfaceWidth !== this.surfaceWidth || surfaceHeight !== this.surfaceHeight) {
 			this.dropAll();
 			this.dpr = dpr;
 			this.surfaceWidth = surfaceWidth;
 			this.surfaceHeight = surfaceHeight;
-			this.geometryVersion = changes?.geometryVersion ?? NaN;
 			this.frame = changes?.frame ?? null;
 			return;
 		}
 		const frame = changes.frame;
 		this.frame = frame;
-		if (this.layers.size === 0 && this.refused.size === 0) return;
+		for (const node of this.layers.keys()) if (dirtyAbove(frame, node)) this.forget(node);
 		for (const [node, flags] of frame.entries()) {
-			if ((flags & -355) !== 0) {
-				this.dropAll();
-				return;
-			}
-			const scrolledOnly = flags === 32;
-			for (let current = scrolledOnly ? node.parent : node; current !== null; current = current.parent) this.forget(current);
-		}
-		for (const node of [...this.layers.keys(), ...this.refused]) for (let ancestor = node.parent; ancestor !== null; ancestor = ancestor.parent) {
-			const flags = frame.dirtyFlagsFor(ancestor);
-			if (flags !== 0 && flags !== 32) {
-				this.forget(node);
-				break;
-			}
+			if (flags === 32) continue;
+			for (const refused of this.refused) if (node === refused || contains(node, refused) || contains(refused, node)) this.refused.delete(refused);
 		}
 	}
 	/** Drops the layers the frame did not composite: their container was culled, removed, or drawn directly. */
@@ -20475,14 +20603,16 @@ var ScrollLayerCache = class {
 	}
 	/**
 	* Whether a container with no layer should get one now: it has
-	* scrolled on the last few frames running with nothing else in or
-	* above it changing, which is the evidence a layer would be kept, and
-	* it has not just shown it holds something a layer cannot.
+	* scrolled on the last few frames running with nothing above it
+	* changing, which is the evidence a layer would be kept, and it has
+	* not just shown it holds something a layer cannot. What changes
+	* inside it is absorbed item by item (see \`damage\`), so a lazy list
+	* mounting rows as it scrolls keeps its layer.
 	*/
 	wants(node) {
 		const frame = this.frame;
 		if (frame === null || this.layers.size >= MAX_LAYERS || this.refused.has(node)) return false;
-		if (!this.calm || this.disturbed.has(node) || dirtyAbove(frame, node)) {
+		if (dirtyAbove(frame, node)) {
 			this.streaks.delete(node);
 			return false;
 		}
@@ -20512,9 +20642,10 @@ var ScrollLayerCache = class {
 			offsetX: placement.offsetX,
 			offsetY: placement.offsetY,
 			dpr: this.dpr,
-			scrollX: rec.scrollX,
-			scrollY: rec.scrollY,
-			used: true
+			scrollX: snapScroll(rec.scrollX, this.dpr),
+			scrollY: snapScroll(rec.scrollY, this.dpr),
+			used: true,
+			items: /* @__PURE__ */ new Map()
 		};
 		this.layers.set(node, layer);
 		this.stats.built++;
@@ -20535,8 +20666,8 @@ var ScrollLayerCache = class {
 	* device pixels, which a copy cannot follow without resampling.
 	*/
 	shift(layer, rec) {
-		const exactX = (layer.scrollX - rec.scrollX) * layer.dpr;
-		const exactY = (layer.scrollY - rec.scrollY) * layer.dpr;
+		const exactX = (layer.scrollX - snapScroll(rec.scrollX, layer.dpr)) * layer.dpr;
+		const exactY = (layer.scrollY - snapScroll(rec.scrollY, layer.dpr)) * layer.dpr;
 		const dx = Math.round(exactX);
 		const dy = Math.round(exactY);
 		if (Math.abs(exactX - dx) > EPSILON || Math.abs(exactY - dy) > EPSILON) return null;
@@ -20574,6 +20705,79 @@ var ScrollLayerCache = class {
 		});
 		return strips;
 	}
+	/**
+	* The parts of a layer this frame's changes inside the container left
+	* wrong, in the layer's pixels, or \`'all'\` when that is most of it.
+	* Called after \`shift\`, so the layer's offset is the frame's.
+	*
+	* Judged item by item, an item being one of the container's children
+	* (through any fragments): a lazy list's row, say. An item added,
+	* removed or moved is wrong where it was and where it is; an item with
+	* anything changed inside it is wrong where it is. Whatever none of
+	* that touches is right already, which in a lazy list scrolling is
+	* everything on screen: the rows it mounts and unmounts are in its
+	* overscan, and the spacers that stand for the rest only grow and
+	* shrink off the top and bottom.
+	*/
+	damage(layer, container, layout) {
+		const frame = this.frame;
+		if (frame === null) return "all";
+		const boxes = [];
+		for (const [node, flags] of frame.entries()) {
+			if (node === container) {
+				if ((flags & 128) !== 0) return "all";
+				continue;
+			}
+			const item = itemHolding(container, node);
+			if (item === null) continue;
+			const was = layer.items.get(item);
+			const now = boxOf(layout, item);
+			if (was !== void 0) boxes.push(was);
+			if (now !== void 0 && (was === void 0 || !sameBox(was, now))) boxes.push(now);
+		}
+		const seen = /* @__PURE__ */ new Set();
+		for (const item of itemsOf(container)) {
+			seen.add(item);
+			const now = boxOf(layout, item);
+			const was = layer.items.get(item);
+			if (now === void 0) continue;
+			if (was === void 0) boxes.push(now);
+			else if (!sameBox(was, now)) boxes.push(was, now);
+		}
+		for (const [item, was] of layer.items) if (!seen.has(item)) boxes.push(was);
+		const rects = [];
+		let area = 0;
+		for (const box of boxes) {
+			const rect = this.toLayer(layer, box);
+			if (rect !== null && !rects.some((other) => sameBox(other, rect))) {
+				rects.push(rect);
+				area += rect.width * rect.height;
+			}
+		}
+		return area > layer.width * layer.height * MOSTLY ? "all" : rects;
+	}
+	/** Notes where the container's items are, for the next frame's \`damage\`. */
+	remember(layer, container, layout) {
+		layer.items.clear();
+		for (const item of itemsOf(container)) {
+			const box = boxOf(layout, item);
+			if (box !== void 0) layer.items.set(item, box);
+		}
+	}
+	/** An item's box in the layer's pixels, widened for what paints past it, or null off the layer. */
+	toLayer(layer, box) {
+		const dpr = layer.dpr;
+		const left = Math.max(0, Math.floor(layer.offsetX + dpr * (box.x - layer.scrollX - 8)));
+		const top = Math.max(0, Math.floor(layer.offsetY + dpr * (box.y - layer.scrollY - 8)));
+		const right = Math.min(layer.width, Math.ceil(layer.offsetX + dpr * (box.x + box.width - layer.scrollX + 8)));
+		const bottom = Math.min(layer.height, Math.ceil(layer.offsetY + dpr * (box.y + box.height - layer.scrollY + 8)));
+		return right > left && bottom > top ? {
+			x: left,
+			y: top,
+			width: right - left,
+			height: bottom - top
+		} : null;
+	}
 	/** Stops building layers for a container until its subtree is next dirtied. */
 	refuse(node) {
 		this.drop(node);
@@ -20596,14 +20800,63 @@ var ScrollLayerCache = class {
 		this.refused.delete(node);
 	}
 };
-/** Whether an ancestor was dirtied by more than its own scroll: inherited paint reaches the subtree without saying so. */
+/**
+* Whether an ancestor's properties or environment changed. An inherited
+* value set on an ancestor marks every descendant that reads it as well
+* (the graph re-provides it), so what it changes inside the container
+* is damage like any other; this keeps the old caution for the rest.
+* An ancestor marked for paint alone is the runtime asking for a frame
+* (a scrollbar fading, an inspector outline), which nothing inside the
+* container hears; one laid out again either leaves the container where
+* it was or moves it, which \`fits\` hears about; one whose children
+* changed has changed nothing inside this one. The last two happen on
+* every frame a lazy list mounts a row, since a layout need is marked
+* all the way up.
+*/
 function dirtyAbove(frame, node) {
-	for (let ancestor = node.parent; ancestor !== null; ancestor = ancestor.parent) {
-		const flags = frame.dirtyFlagsFor(ancestor);
-		if (flags !== 0 && flags !== 32) return true;
-	}
+	for (let ancestor = node.parent; ancestor !== null; ancestor = ancestor.parent) if ((frame.dirtyFlagsFor(ancestor) & INHERITED) !== 0) return true;
+	return false;
+}
+/** What an ancestor's dirt can say about how its descendants look. */
+const INHERITED = 192;
+/** Whether \`ancestor\` is above \`node\` in the tree. */
+function contains(ancestor, node) {
+	for (let current = node.parent; current !== null; current = current.parent) if (current === ancestor) return true;
 	return false;
 }
+/** A container's items: its children, and the children of any fragment among them, in order. */
+function itemsOf(container) {
+	const items = [];
+	const visit = (parent) => {
+		for (let child = parent.firstChild; child !== null; child = child.nextSibling) if (child.type === "fragment") visit(child);
+		else items.push(child);
+	};
+	visit(container);
+	return items;
+}
+/** The item of a container that holds a node, the node itself if it is one, or null outside the container or above its items. */
+function itemHolding(container, node) {
+	let item = null;
+	for (let current = node; current !== null; current = current.parent) {
+		if (current === container) return item;
+		if (current.type !== "fragment") item = current;
+	}
+	return null;
+}
+function sameBox(a, b) {
+	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function boxOf(layout, node) {
+	const rec = layout.recordFor(node);
+	return rec === void 0 ? void 0 : {
+		x: rec.x,
+		y: rec.y,
+		width: rec.width,
+		height: rec.height
+	};
+}
+/** Damage over this share of a layer repaints all of it in one walk. */
+const MOSTLY = .5;
 /**
 * Where a scroll container's viewport lands in device pixels, or null
 * when a layer could not reproduce the direct draw exactly: no
@@ -20649,6 +20902,273 @@ function clearLayer(ctx, width, height) {
 	ctx.clearRect(0, 0, width, height);
 }
 //#endregion
+//#region src/rendering/canvas2d/TextRasterCache.ts
+/**
+* Text kept as pixels, so a frame that only moved it copies it rather
+* than drawing its glyphs again.
+*
+* **Why.** Drawing glyphs is most of what a frame of text costs:
+* profiled while flicking through a file in Easel, `fillText` was 1,064
+* of the renderer's 1,985 ms. A scroll moves every line on screen and
+* changes none of them, so every one of those glyphs was drawn again
+* only to land a few pixels from where it was. In WKWebView a frame of
+* that cost 4 to 7 ms, which is more than a 165 Hz refresh holds.
+*
+* **What is kept.** What `drawText` draws for one node, drawn once into
+* a canvas of its own at the device scale and fraction of a pixel it
+* lands on, and copied onto the frame from then on. The copy lands on
+* whole device pixels, so the pixels are the ones a direct draw at that
+* fraction would have made, and a scroll, which moves by whole device
+* pixels, keeps the fraction.
+*
+* **When it is drawn again.** When anything `drawText` reads changes:
+* the text, its runs, its font, its colour, its box, the scale, or the
+* fraction of a pixel it sits at. Each is compared every frame, which is
+* a few comparisons; a run list or a colour that has not changed is the
+* same object it was.
+*
+* **What it is not for.** Text that changes on most frames (a clock, a
+* counter, an animated colour) would be drawn twice a frame, into the
+* cache and out of it. A node redrawn on most of its recent frames is
+* drawn directly instead, until it has been still for a while.
+*/
+var TextRasterCache = class {
+	createCanvas;
+	entries = /* @__PURE__ */ new Map();
+	frame = 0;
+	pixels = 0;
+	/** Draws served from the cache and drawn into it, since the last reset. For budget specs. */
+	stats = {
+		copied: 0,
+		drawn: 0,
+		direct: 0
+	};
+	constructor(createCanvas) {
+		this.createCanvas = createCanvas;
+	}
+	beginFrame() {
+		this.frame++;
+	}
+	/** Lets go of text not drawn lately: removed, scrolled far away, or hidden. */
+	endFrame() {
+		for (const [node, entry] of this.entries) if (this.frame - entry.used > IDLE_FRAMES) this.drop(node, entry);
+	}
+	dropAll() {
+		for (const [node, entry] of this.entries) this.drop(node, entry);
+	}
+	resetStats() {
+		this.stats.copied = 0;
+		this.stats.drawn = 0;
+		this.stats.direct = 0;
+	}
+	/**
+	* Draws a node's text from the cache, drawing it into the cache first
+	* when what it holds is out of date. False when the text should be
+	* drawn directly: a context that cannot say where it draws, one that
+	* rotates or skews, text too large to keep, or text that changes too
+	* often to be worth keeping.
+	*/
+	draw(ctx, node, box, paint, measurer) {
+		const m = ctx.getTransform?.();
+		if (m === void 0 || m.b !== 0 || m.c !== 0 || !(m.a > 0) || !(m.d > 0)) return false;
+		let entry = this.entries.get(node);
+		if (entry !== void 0 && entry.directUntil > this.frame) {
+			entry.used = this.frame;
+			this.stats.direct++;
+			return false;
+		}
+		let extent = entry !== void 0 && entry.drawnFrom(paint, box, m.a, m.d) ? entry.extent : null;
+		if (extent === null) {
+			extent = inkExtent(box, paint, measurer);
+			if (extent === null) return false;
+		}
+		const left = m.a * (box.x + extent.left) + m.e;
+		const top = m.d * (box.y + extent.top) + m.f;
+		const x = Math.floor(left);
+		const y = Math.floor(top);
+		const width = Math.ceil(m.a * (extent.right - extent.left) + (left - x)) + 1;
+		const height = Math.ceil(m.d * (extent.bottom - extent.top) + (top - y)) + 1;
+		if (width * height > MAX_ENTRY_PIXELS) return false;
+		const offsetX = m.e - x;
+		const offsetY = m.f - y;
+		let raster = entry ?? null;
+		if (raster === null || !raster.holds(paint, box, m.a, m.d, offsetX, offsetY, width, height)) {
+			raster = this.redraw(node, entry, paint, box, measurer, m.a, m.d, offsetX, offsetY, width, height, extent);
+			if (raster === null) return false;
+		}
+		raster.used = this.frame;
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.drawImage(raster.canvas, x, y, raster.canvasWidth, raster.canvasHeight);
+		ctx.restore();
+		this.stats.copied++;
+		return true;
+	}
+	redraw(node, previous, paint, box, measurer, scaleX, scaleY, offsetX, offsetY, width, height, extent) {
+		let entry = previous;
+		if (entry !== void 0) {
+			entry.churn = this.frame - entry.drawnAt <= CHURN_FRAMES ? entry.churn + 1 : 0;
+			if (entry.churn >= CHURN_LIMIT) {
+				entry.churn = 0;
+				entry.directUntil = this.frame + DIRECT_FRAMES;
+				entry.used = this.frame;
+				this.stats.direct++;
+				return null;
+			}
+		}
+		if (entry === void 0 || entry.canvasWidth < width || entry.canvasHeight < height) {
+			const canvasWidth = Math.max(width, entry?.canvasWidth ?? 0);
+			const canvasHeight = Math.max(height, entry?.canvasHeight ?? 0);
+			const canvas = this.createCanvas(canvasWidth, canvasHeight);
+			const context = canvas?.getContext("2d");
+			if (canvas === null || !context) return null;
+			this.make(canvasWidth * canvasHeight);
+			if (entry !== void 0) {
+				this.pixels -= entry.canvasWidth * entry.canvasHeight;
+				entry.canvas = canvas;
+				entry.context = context;
+				entry.canvasWidth = canvasWidth;
+				entry.canvasHeight = canvasHeight;
+			} else {
+				entry = new TextRaster(canvas, context, canvasWidth, canvasHeight);
+				this.entries.set(node, entry);
+			}
+			this.pixels += canvasWidth * canvasHeight;
+		}
+		const context = entry.context;
+		context.setTransform(1, 0, 0, 1, 0, 0);
+		context.clearRect(0, 0, entry.canvasWidth, entry.canvasHeight);
+		context.setTransform(scaleX, 0, 0, scaleY, offsetX, offsetY);
+		context.globalAlpha = 1;
+		drawText(context, box, paint, measurer);
+		entry.remember(paint, box, scaleX, scaleY, offsetX, offsetY, width, height);
+		entry.extent = extent;
+		entry.drawnAt = this.frame;
+		this.stats.drawn++;
+		return entry;
+	}
+	/** Makes room for `needed` more pixels, letting go of what was drawn least recently. */
+	make(needed) {
+		if (this.pixels + needed <= MAX_PIXELS) return;
+		const byAge = [...this.entries].sort((a, b) => a[1].used - b[1].used);
+		for (const [node, entry] of byAge) {
+			if (this.pixels + needed <= MAX_PIXELS || entry.used === this.frame) break;
+			this.drop(node, entry);
+		}
+	}
+	drop(node, entry) {
+		this.entries.delete(node);
+		this.pixels -= entry.canvasWidth * entry.canvasHeight;
+		entry.canvas.width = 0;
+		entry.canvas.height = 0;
+	}
+};
+/** One node's text as pixels, and what it was drawn from. */
+var TextRaster = class {
+	canvas;
+	context;
+	canvasWidth;
+	canvasHeight;
+	used = 0;
+	drawnAt = 0;
+	churn = 0;
+	directUntil = 0;
+	/** Where the ink reaches, from the box's corner, in layout pixels. */
+	extent = null;
+	text;
+	spans;
+	font = "";
+	color = "";
+	style = "";
+	linkHover = 0;
+	boxWidth = 0;
+	boxHeight = 0;
+	scaleX = 0;
+	scaleY = 0;
+	offsetX = 0;
+	offsetY = 0;
+	width = 0;
+	height = 0;
+	constructor(canvas, context, canvasWidth, canvasHeight) {
+		this.canvas = canvas;
+		this.context = context;
+		this.canvasWidth = canvasWidth;
+		this.canvasHeight = canvasHeight;
+	}
+	holds(paint, box, scaleX, scaleY, offsetX, offsetY, width, height) {
+		return this.drawnFrom(paint, box, scaleX, scaleY) && Math.abs(this.offsetX - offsetX) < SAME_PLACE && Math.abs(this.offsetY - offsetY) < SAME_PLACE && this.width === width && this.height === height;
+	}
+	/** Whether the pixels are of this text, in this style, at this size and scale, wherever they are. */
+	drawnFrom(paint, box, scaleX, scaleY) {
+		return this.text === paint.text && this.spans === paint.spans && this.linkHover === paint.linkHover && this.boxWidth === box.width && this.boxHeight === box.height && this.scaleX === scaleX && this.scaleY === scaleY && this.font === fontOf(paint) && this.color === colorToCss(paint.textColor) && this.style === styleOf(paint);
+	}
+	remember(paint, box, scaleX, scaleY, offsetX, offsetY, width, height) {
+		this.text = paint.text;
+		this.spans = paint.spans;
+		this.linkHover = paint.linkHover;
+		this.boxWidth = box.width;
+		this.boxHeight = box.height;
+		this.scaleX = scaleX;
+		this.scaleY = scaleY;
+		this.offsetX = offsetX;
+		this.offsetY = offsetY;
+		this.width = width;
+		this.height = height;
+		this.font = fontOf(paint);
+		this.color = colorToCss(paint.textColor);
+		this.style = styleOf(paint);
+	}
+};
+/**
+* The lines' extent, and a margin for what glyphs reach past their line
+* box (an italic's lean, a descender below a tight line height, an
+* underline). Null for text that draws nothing.
+*/
+function inkExtent(box, paint, measurer) {
+	const placements = layoutTextLines(box, paint, measurer);
+	if (placements.length === 0) return null;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const line of placements) {
+		left = Math.min(left, line.x);
+		top = Math.min(top, line.y);
+		right = Math.max(right, line.x + line.width);
+		bottom = Math.max(bottom, line.y + line.height);
+	}
+	const margin = Math.ceil(paint.fontSize * INK_MARGIN) + 2;
+	return {
+		left: left - box.x - margin,
+		top: top - box.y - margin,
+		right: right - box.x + margin,
+		bottom: bottom - box.y + margin
+	};
+}
+function fontOf(paint) {
+	return `${paint.fontStyle} ${paint.fontVariant} ${paint.fontWeight} ${paint.fontStretch} ${paint.fontSize}/${paint.lineHeight} ${paint.fontFamily}`;
+}
+/** Everything else `drawText` reads that places or decorates the glyphs. */
+function styleOf(paint) {
+	return `${paint.letterSpacing}|${paint.fontKerning}|${paint.textDecoration}|${paint.textAlign}|${paint.verticalAlign}|${paint.textWrap}|${paint.maxLines}|${paint.textOverflow}|${paint.rtl}`;
+}
+/** How far past its line box, as a share of the font size, a glyph's ink may reach. */
+const INK_MARGIN = .5;
+/** Within this much of a device pixel, text is at the same place. */
+const SAME_PLACE = 1 / 256;
+/** The largest single piece of text kept: a few screens of a long paragraph. */
+const MAX_ENTRY_PIXELS = 4e6;
+/** Everything kept, at most: about 128 MB. */
+const MAX_PIXELS = 32e6;
+/** Frames text is kept for without being drawn: about two seconds at 60 Hz. */
+const IDLE_FRAMES = 120;
+/** Drawn again within this many frames of the last time counts toward churn. */
+const CHURN_FRAMES = 2;
+/** Times in a row text may churn before it is drawn directly. */
+const CHURN_LIMIT = 3;
+/** Frames churning text is drawn directly for before the cache tries it again. */
+const DIRECT_FRAMES = 60;
+//#endregion
 //#region src/rendering/canvas2d/Canvas2DRenderer.ts
 /**
 * Canvas2D rendering backend.
@@ -20760,6 +21280,13 @@ var Canvas2DRenderer = class {
 	constructor(options) {
 		this.options = options;
 		this.layers = new ScrollLayerCache(options.createLayerCanvas ?? offscreenLayerCanvas, options.scrollLayerSettleFrames);
+		this.textCache = options.textCache === false ? null : new TextRasterCache(options.createLayerCanvas ?? offscreenLayerCanvas);
+	}
+	/** Text kept as pixels; see `TextRasterCache.ts`. */
+	textCache;
+	/** What the text cache did since the last reset, or null with it off. For budget specs. */
+	get textCacheStats() {
+		return this.textCache?.stats ?? null;
 	}
 	/** What the scroll layers did since the last reset. For budget specs. */
 	get scrollLayerStats() {
@@ -20785,11 +21312,13 @@ var Canvas2DRenderer = class {
 	/** A restored scroll layer reads as healthy and holds nothing. */
 	surfaceRestored() {
 		this.layers.dropAll();
+		this.textCache?.dropAll();
 	}
 	dispose() {
 		this.disposed = true;
 		this.scaledImages.dispose();
 		this.layers.dropAll();
+		this.textCache?.dropAll();
 	}
 	render(root, context) {
 		const raw = this.surface.getContext2D();
@@ -20803,11 +21332,13 @@ var Canvas2DRenderer = class {
 		this.liftedPass.length = 0;
 		this.paintOwner = null;
 		this.layerDepth = 0;
+		this.textCache?.beginFrame();
 		this.layers.beginFrame(this.options.scrollLayers === false ? void 0 : context.changes, this.surface.dpr, this.surface.physicalWidth, this.surface.physicalHeight);
 		this.renderNode(root, context, ctx, true, false);
 		this.renderLifted(context, ctx);
 		if (context.overlay !== void 0 && context.overlay.length > 0) drawOverlayShapes(ctx, context.overlay);
 		this.layers.endFrame();
+		this.textCache?.endFrame();
 	}
 	/**
 	* Folds a node's style into the shared scratch and records that it
@@ -20872,7 +21403,7 @@ var Canvas2DRenderer = class {
 		if (rec.clips) this.popCull();
 		if (hasText) {
 			if (this.paintOwner !== node) this.resolvePaint(node);
-			this.paintContent(ctx, rec, this.paint, context);
+			this.paintContent(ctx, node, rec, this.paint, context);
 		}
 		if (rec.liftBoundary && this.liftedPass.length > liftedBefore) this.renderLifted(context, ctx, liftedBefore, node);
 		if (rec.clips) ctx.restore();
@@ -21146,7 +21677,7 @@ var Canvas2DRenderer = class {
 			} else ctx.strokeRect(x, y, width, height);
 		}
 	}
-	paintContent(ctx, rec, paint, context) {
+	paintContent(ctx, node, rec, paint, context) {
 		if (paint.text !== void 0) {
 			this.contentBox.x = rec.x + rec.paddingLeft - rec.scrollX;
 			this.contentBox.y = rec.y + rec.paddingTop - rec.scrollY;
@@ -21160,6 +21691,7 @@ var Canvas2DRenderer = class {
 				this.paintHighlightedText(ctx, paint, context);
 				return;
 			}
+			if (this.textCache?.draw(ctx, node, this.contentBox, paint, context.text) === true) return;
 			drawText(ctx, this.contentBox, paint, context.text);
 		}
 	}
@@ -21261,8 +21793,21 @@ var Canvas2DRenderer = class {
 				layers.drop(node);
 				return false;
 			}
-			for (const strip of strips) this.paintLayer(layer, strip, node, rec, context);
+			const damage = layers.damage(layer, node, context.layout);
+			const wrong = damage === "all" ? [{
+				x: 0,
+				y: 0,
+				width: layer.width,
+				height: layer.height
+			}] : damage;
+			if (wrong.length > 0) {
+				const front = layer.frontContext;
+				front.setTransform(1, 0, 0, 1, 0, 0);
+				for (const rect of wrong) front.clearRect(rect.x, rect.y, rect.width, rect.height);
+			}
+			if (strips.length > 0 || wrong.length > 0) this.paintLayer(layer, [...strips, ...wrong], node, rec, context);
 		}
+		layers.remember(layer, node, context.layout);
 		layer.used = true;
 		layers.stats.composited++;
 		ctx.save();
@@ -21284,13 +21829,13 @@ var Canvas2DRenderer = class {
 	* strip saves is raster, which is the cost it exists for; the walk
 	* costs what a direct draw's walk would.
 	*/
-	paintLayer(layer, strip, node, rec, context) {
+	paintLayer(layer, strips, node, rec, context) {
 		const lctx = new PreciseContext(layer.frontContext);
 		lctx.save();
-		if (strip !== null) {
+		if (strips !== null) {
 			lctx.setTransform(1, 0, 0, 1, 0, 0);
 			lctx.beginPath();
-			lctx.rect(strip.x, strip.y, strip.width, strip.height);
+			for (const strip of strips) lctx.rect(strip.x, strip.y, strip.width, strip.height);
 			lctx.clip();
 		}
 		const dpr = layer.dpr;
@@ -21304,6 +21849,26 @@ var Canvas2DRenderer = class {
 		this.cullY = rec.y + layer.scrollY;
 		this.cullWidth = rec.width;
 		this.cullHeight = rec.height;
+		if (strips !== null && strips.length > 0) {
+			let left = Infinity;
+			let top = Infinity;
+			let right = -Infinity;
+			let bottom = -Infinity;
+			for (const strip of strips) {
+				left = Math.min(left, strip.x);
+				top = Math.min(top, strip.y);
+				right = Math.max(right, strip.x + strip.width);
+				bottom = Math.max(bottom, strip.y + strip.height);
+			}
+			const x0 = Math.max(this.cullX, (left - layer.offsetX) / dpr + layer.scrollX - 8);
+			const y0 = Math.max(this.cullY, (top - layer.offsetY) / dpr + layer.scrollY - 8);
+			const x1 = Math.min(this.cullX + this.cullWidth, (right - layer.offsetX) / dpr + layer.scrollX + 8);
+			const y1 = Math.min(this.cullY + this.cullHeight, (bottom - layer.offsetY) / dpr + layer.scrollY + 8);
+			this.cullX = x0;
+			this.cullY = y0;
+			this.cullWidth = Math.max(0, x1 - x0);
+			this.cullHeight = Math.max(0, y1 - y0);
+		}
 		this.layerDepth++;
 		try {
 			this.renderChildren(node, context, lctx, true);
@@ -21512,6 +22077,6 @@ function createCanvasSurface(host) {
 	return new CanvasSurface(host);
 }
 //#endregion
-export { isImeKey as $, UiCompositionEvent as $a, defaultShadows as $i, proportionalFontMetrics as $n, gradientPaint as $r, registerFontStack as $t, withOverrideSource as A, colorValuesEqual as Aa, bandOf as Ai, linkHoverOf as An, propertyIsInherited as Ar, adjacentField as At, FlexDirection as B, DirtyNodeSet as Ba, noThemeExtensions as Bi, isEditableNode as Bn, validateRole as Br, createCanvasTextStyle as Bt, SCROLLBAR_LINGER_MS as C, textStylesEqual as Ca, propertyValuesEqual as Ci, isNodeInert as Cn, resolveString as Cr, hasDrawnText as Ct, formatExplanation as D, UiBasicColors as Da, noInsets as Di, resolveCursor as Dn, inheritedPropertyFlags as Dr, selectionRectsIn as Dt, formatConstraints as E, lightColors as Ea, insetsEqual as Ei, isPressable as En, getPropertyNames as Er, paragraphGeometryFrom as Et, clampSize as F, rgba as Fa, themesEqual as Fi, CARET_WIDTH as Fn, UI_SEMANTIC_STATES as Fr, detectEditingPlatform as Ft, CrossAxisAlignment as G, writeOverrideProperty as Ga, highContrastColors as Gi, resolveColorValue as Gn, paintValuesEqual as Gr, runFontString as Gt, placeGridItems as H, overrideSources as Ha, themeExtensionsEqual as Hi, isReadOnly as Hn, UI_SUBGRID_AXES as Hr, fillTextRects as Ht, constraintsEqual as I, createEnvironmentKey as Ia, withContrast as Ii, EDITOR_PROP as In, isUiRole as Ir, isPrintable as It, parseCrossAxisAlignment as J, hasVisualState as Ja, densityFactors as Ji, CharacterCountTextMeasurer as Jn, parseTransform as Jr, textRunBackgrounds as Jt, MainAxisAlignment as K, UiVisualState as Ka, raiseContrast as Ki, isVideoSurface as Kn, pathValuesEqual as Kr, spanOf as Kt, tightenConstraints as L, findEnvironmentKey as La, withDensity as Li, caretVisibleAt as Ln, isUiSemanticState as Lr, EditableLayout as Lt, contentOffset as M, normalizeColor as Ma, unknownContainerSize as Mi, linkRunAtPointIn as Mn, propertyValuesEqualByName as Mr, edgeField as Mt, LayoutRecord as N, parseColor as Na, darkTheme as Ni, setLinkHover as Nn, UiProperties as Nr, editingGroupOf as Nt, formatNumber as O, colorToHex as Oa, observeViewportInsets as Oi, clearLinkHover as On, inheritedPropertyNames as Or, wordRangeIn as Ot, Constraints as P, rgb8 as Pa, lightTheme as Pi, CARET_BLINK_MS as Pn, UI_ROLES as Pr, commandForKey as Pt, capturePointer as Q, UiBeforeInputEvent as Qa, spacingSteps as Qi, layoutParagraph as Qn, MAX_GRADIENT_STOPS as Qr, fontStackFor as Qt, MAX_MEASURES_PER_CHILD as R, UiEnvironment as Ra, defineThemeExtension as Ri, editorFor as Rn, normalizeStates as Rr, applyCanvasTextStyle as Rt, SCROLLBAR_FADE_MS as S, textSpansEqual as Sa, defineProperty as Si, isNodeHitTestable as Sn, resolvePropertyByName as Sr, UiInputDispatcher as St, describeOverrides as T, darkColors as Ta, UiInsetRegistry as Ti, isNodeTabStop as Tn, findPropertyDefinition as Tr, paragraphGeometry as Tt, sizeGridTracks as U, resetOverrideWarnings as Ua, withThemeExtension as Ui, nextCaretToggle as Un, validateSubgrid as Ur, layoutTextLines as Ut, parseFlexDirection as V, clearOverrideProperty as Va, themeExtension as Vi, isMultiline as Vn, validateStates as Vr, drawText as Vt, AlignContent as W, writeDeclaredProperty as Wa, contrastRatio as Wi, syncEditorValue as Wn, inputsEqual as Wr, runCanvasStyleInto as Wt, CanvasPlatformSurface as X, visualStatesEqual as Xa, scaleSpacing as Xi, spannedRunsFor as Xn, transformIsIdentity as Xr, bumpFontStack as Xt, parseMainAxisAlignment as Y, visualState as Ya, defaultSpacing as Yi, ParagraphTextMeasurer as Yn, transform as Yr, textRunDecorations as Yt, UiPlatformAdapter as Z, MOUSE_POINTER as Za, spacingEqual as Zi, ELLIPSIS as Zn, transformsEqual as Zr, clearFontStacks as Zt, LABEL_PADDING_X as _, resolvedSpansOf as _a, borderRadiusEqual as _i, selectableTextNodes as _n, UiGraph as _r, scrollLeaderOf as _t, PaintPictureCache as a, boxShadowReach as aa, fr as ai, computeObjectFitRect as an, UiPasteEvent as ao, offsetAtX as ar, UiGestureRecognizer as at, snapScroll as b, spansDifferOnlyInPaint as ba, normalizeBorderRadius as bi, setSelectionRange as bn, resolveNumber as br, scrollbarThumbs as bt, EMPTY_RECORDING as c, isShapeName as ca, isMinMaxTrack as ci, normalizeTextAlign as cn, UiSelectionChangeEvent as co, EditableTextModel as cr, isScrollContainer as ct, tracePathData as d, isTypographyRole as da, percent as di, TEXT_MATCHES_PROP as dn, UiWheelEvent as do, lineStartAt as dr, UiFocusManager as dt, shadowsEqual as ea, gradientsEqual as ei, DEFAULT_FONT_FAMILY as en, UiEventType as eo, caretRectFor as er, pointerDeviceOf as et, ScaledImageCache as f, typographyEqual as fa, repeat as fi, clearMatchRanges as fn, noKeyModifiers as fo, nextGraphemeEnd as fr, UiHitTester as ft, paintsAfterChildren as g, hiddenRangesOf as ga, borderRadiusCorners as gi, clearSelectionRange as gn, UiBinding as go, wordRangeAt as gr, SCROLLBAR_THICKNESS as gt, hasDecorationPhase as h, flattenTextSpans as ha, borderRadius as hi, TEXT_SELECTION_PROP as hn, DirtyFlags as ho, previousWordStart as hr, SCROLLBAR_MIN_THUMB as ht, traceRoundedRect as i, boxShadowRadius as ia, auto as ii, colorToCss as in, UiKeyboardEvent as io, offsetAtPoint as ir, UiTouchScroller as it, accumulatedOffsetTo as j, colorsEqual as ja, containerBands as ji, linkOf as jn, propertyNarrowers as jr, comparePositions as jt, labelNode as k, colorToRgba as ka, UiContainerSizeSource as ki, hasTextLinks as kn, propertyEffects as kr, textInputOf as kt, PaintRecorder as l, shapesEqual as la, isPercentLength as li, normalizeVerticalAlign as ln, UiTextChangeEvent as lo, graphemeBoundaries as lr, UiKeyboardController as lt, decorationRect as m, editableSpansOf as ma, UiBorderRadiuses as mi, setMatchRanges as mn, UiNodeType as mo, previousGraphemeStart as mr, SCROLLBAR_INSET as mt, createCanvasSurface as n, boxShadow as na, radialGradient as ni, DEFAULT_FONT_WEIGHT as nn, UiGestureEvent as no, lineIndexForOffset as nr, touchActionFor as nt, paintPictures as o, boxShadowsEqual as oa, isAutoLength as oi, createPaintState as on, UiPinchEvent as oo, offsetForVerticalMove as or, UiPinchRecognizer as ot, decorationColor as p, defaultTextStyle as pa, resolveLength as pi, matchRangesOf as pn, wheelDeltaYOf as po, nextWordEnd as pr, SCROLLBAR_HOVER_ZONE as pt, parseAlignContent as q, defaultVisualState as qa, relativeLuminance as qi, videoFrameSize as qn, UiTransforms as qr, textMeasureRequest as qt, Canvas2DRenderer as r, boxShadowArraysEqual as ra, validateGradient as ri, DEFAULT_TEXT_COLOR as rn, UiInputEvent as ro, lineLimit as rr, UiEditingController as rt, PaintTarget as s, defaultShapes as sa, isFrLength as si, isPaintVisible as sn, UiPointerEvent as so, selectionRects as sr, UiWheelController as st, CanvasSurface as t, BOX_SHADOW_BLUR_REACH as ta, linearGradient as ti, DEFAULT_FONT_SIZE as tn, UiFocusEvent as to, lineIndexAtY as tr, prepareInputSurface as tt, replayPaint as u, defaultTypography as ua, minmax as ui, resolvePaintState as un, UiWheelDeltaMode as uo, lineEndAt as ur, UiPointerController as ut, drawOverlayShapes as v, spanAtOffset as va, borderRadiusIsZero as vi, selectableTextOf as vn, DEFAULT_LINE_HEIGHT_FACTOR as vr, scrollRange as vt, describeLength as w, colorsEqualPalette as wa, UiEnvironmentKeys as wi, isNodeSelectable as wn, closestPropertyName as wr, offsetAtPointIn as wt, LayoutEngine as x, textContentOf as xa, uniformBorderRadius as xi, isNodeFocusable as xn, resolveProperty as xr, scrollbarZoneAt as xt, labelOrigin as y, spannedTextOf as ya, borderRadiusValuesEqual as yi, selectionRangeOf as yn, resolveBoolean as yr, scrollbarThumb as yt, isLayoutProtocol as z, UiNode as za, hasThemeExtension as zi, editorOf as zn, statesEqual as zr, buildFontString as zt };
+export { isImeKey as $, MOUSE_POINTER as $a, spacingEqual as $i, ELLIPSIS as $n, transformsEqual as $r, registerFontStack as $t, withOverrideSource as A, colorToHex as Aa, observeViewportInsets as Ai, clearLinkHover as An, inheritedPropertyNames as Ar, adjacentField as At, FlexDirection as B, UiEnvironment as Ba, defineThemeExtension as Bi, editorFor as Bn, normalizeStates as Br, createCanvasTextStyle as Bt, SCROLLBAR_LINGER_MS as C, textContentOf as Ca, uniformBorderRadius as Ci, isNodeInert as Cn, resolveProperty as Cr, hasDrawnText as Ct, formatExplanation as D, darkColors as Da, UiInsetRegistry as Di, isSubtreeInert as Dn, findPropertyDefinition as Dr, selectionRectsIn as Dt, formatConstraints as E, colorsEqualPalette as Ea, UiEnvironmentKeys as Ei, isPressable as En, closestPropertyName as Er, paragraphGeometryFrom as Et, clampSize as F, parseColor as Fa, darkTheme as Fi, setLinkHover as Fn, UiProperties as Fr, detectEditingPlatform as Ft, CrossAxisAlignment as G, resetOverrideWarnings as Ga, withThemeExtension as Gi, nextCaretToggle as Gn, validateSubgrid as Gr, runFontString as Gt, placeGridItems as H, DirtyNodeSet as Ha, noThemeExtensions as Hi, isEditableNode as Hn, validateRole as Hr, fillTextRects as Ht, constraintsEqual as I, rgb8 as Ia, lightTheme as Ii, CARET_BLINK_MS as In, UI_ROLES as Ir, isPrintable as It, parseCrossAxisAlignment as J, UiVisualState as Ja, raiseContrast as Ji, isVideoSurface as Jn, pathValuesEqual as Jr, textRunBackgrounds as Jt, MainAxisAlignment as K, writeDeclaredProperty as Ka, contrastRatio as Ki, syncEditorValue as Kn, inputsEqual as Kr, spanOf as Kt, tightenConstraints as L, rgba as La, themesEqual as Li, CARET_WIDTH as Ln, UI_SEMANTIC_STATES as Lr, EditableLayout as Lt, contentOffset as M, colorValuesEqual as Ma, bandOf as Mi, linkHoverOf as Mn, propertyIsInherited as Mr, edgeField as Mt, LayoutRecord as N, colorsEqual as Na, containerBands as Ni, linkOf as Nn, propertyNarrowers as Nr, editingGroupOf as Nt, formatNumber as O, lightColors as Oa, insetsEqual as Oi, pointerEventsOf as On, getPropertyNames as Or, wordRangeIn as Ot, Constraints as P, normalizeColor as Pa, unknownContainerSize as Pi, linkRunAtPointIn as Pn, propertyValuesEqualByName as Pr, commandForKey as Pt, capturePointer as Q, visualStatesEqual as Qa, scaleSpacing as Qi, spannedRunsFor as Qn, transformIsIdentity as Qr, fontStackFor as Qt, MAX_MEASURES_PER_CHILD as R, createEnvironmentKey as Ra, withContrast as Ri, EDITOR_PROP as Rn, isUiRole as Rr, applyCanvasTextStyle as Rt, SCROLLBAR_FADE_MS as S, spansDifferOnlyInPaint as Sa, normalizeBorderRadius as Si, isNodeHitTestable as Sn, resolveNumber as Sr, UiInputDispatcher as St, describeOverrides as T, textStylesEqual as Ta, propertyValuesEqual as Ti, isNodeTabStop as Tn, resolveString as Tr, paragraphGeometry as Tt, sizeGridTracks as U, clearOverrideProperty as Ua, themeExtension as Ui, isMultiline as Un, validateStates as Ur, layoutTextLines as Ut, parseFlexDirection as V, UiNode as Va, hasThemeExtension as Vi, editorOf as Vn, statesEqual as Vr, drawText as Vt, AlignContent as W, overrideSources as Wa, themeExtensionsEqual as Wi, isReadOnly as Wn, UI_SUBGRID_AXES as Wr, runCanvasStyleInto as Wt, CanvasPlatformSurface as X, hasVisualState as Xa, densityFactors as Xi, CharacterCountTextMeasurer as Xn, parseTransform as Xr, bumpFontStack as Xt, parseMainAxisAlignment as Y, defaultVisualState as Ya, relativeLuminance as Yi, videoFrameSize as Yn, UiTransforms as Yr, textRunDecorations as Yt, UiPlatformAdapter as Z, visualState as Za, defaultSpacing as Zi, ParagraphTextMeasurer as Zn, transform as Zr, clearFontStacks as Zt, LABEL_PADDING_X as _, flattenTextSpans as _a, borderRadius as _i, selectableTextNodes as _n, DirtyFlags as _o, previousWordStart as _r, scrollLeaderOf as _t, PaintPictureCache as a, boxShadowArraysEqual as aa, validateGradient as ai, computeObjectFitRect as an, UiInputEvent as ao, lineLimit as ar, UiGestureRecognizer as at, snapScroll as b, spanAtOffset as ba, borderRadiusIsZero as bi, setSelectionRange as bn, DEFAULT_LINE_HEIGHT_FACTOR as br, scrollbarThumbs as bt, EMPTY_RECORDING as c, boxShadowsEqual as ca, isAutoLength as ci, normalizeTextAlign as cn, UiPinchEvent as co, offsetForVerticalMove as cr, isScrollContainer as ct, tracePathData as d, shapesEqual as da, isPercentLength as di, TEXT_MATCHES_PROP as dn, UiTextChangeEvent as do, graphemeBoundaries as dr, UiFocusManager as dt, spacingSteps as ea, MAX_GRADIENT_STOPS as ei, DEFAULT_FONT_FAMILY as en, UiBeforeInputEvent as eo, layoutParagraph as er, pointerDeviceOf as et, ScaledImageCache as f, defaultTypography as fa, minmax as fi, clearMatchRanges as fn, UiWheelDeltaMode as fo, lineEndAt as fr, UiHitTester as ft, paintsAfterChildren as g, editableSpansOf as ga, UiBorderRadiuses as gi, clearSelectionRange as gn, UiNodeType as go, previousGraphemeStart as gr, SCROLLBAR_THICKNESS as gt, hasDecorationPhase as h, defaultTextStyle as ha, resolveLength as hi, TEXT_SELECTION_PROP as hn, wheelDeltaYOf as ho, nextWordEnd as hr, SCROLLBAR_MIN_THUMB as ht, traceRoundedRect as i, boxShadow as ia, radialGradient as ii, colorToCss as in, UiGestureEvent as io, lineIndexForOffset as ir, UiTouchScroller as it, accumulatedOffsetTo as j, colorToRgba as ja, UiContainerSizeSource as ji, hasTextLinks as jn, propertyEffects as jr, comparePositions as jt, labelNode as k, UiBasicColors as ka, noInsets as ki, resolveCursor as kn, inheritedPropertyFlags as kr, textInputOf as kt, PaintRecorder as l, defaultShapes as la, isFrLength as li, normalizeVerticalAlign as ln, UiPointerEvent as lo, selectionRects as lr, UiKeyboardController as lt, decorationRect as m, typographyEqual as ma, repeat as mi, setMatchRanges as mn, noKeyModifiers as mo, nextGraphemeEnd as mr, SCROLLBAR_INSET as mt, createCanvasSurface as n, shadowsEqual as na, gradientsEqual as ni, DEFAULT_FONT_WEIGHT as nn, UiEventType as no, caretRectFor as nr, touchActionFor as nt, paintPictures as o, boxShadowRadius as oa, auto as oi, createPaintState as on, UiKeyboardEvent as oo, offsetAtPoint as or, UiPinchRecognizer as ot, decorationColor as p, isTypographyRole as pa, percent as pi, matchRangesOf as pn, UiWheelEvent as po, lineStartAt as pr, SCROLLBAR_HOVER_ZONE as pt, parseAlignContent as q, writeOverrideProperty as qa, highContrastColors as qi, resolveColorValue as qn, paintValuesEqual as qr, textMeasureRequest as qt, Canvas2DRenderer as r, BOX_SHADOW_BLUR_REACH as ra, linearGradient as ri, DEFAULT_TEXT_COLOR as rn, UiFocusEvent as ro, lineIndexAtY as rr, UiEditingController as rt, PaintTarget as s, boxShadowReach as sa, fr as si, isPaintVisible as sn, UiPasteEvent as so, offsetAtX as sr, UiWheelController as st, CanvasSurface as t, defaultShadows as ta, gradientPaint as ti, DEFAULT_FONT_SIZE as tn, UiCompositionEvent as to, proportionalFontMetrics as tr, prepareInputSurface as tt, replayPaint as u, isShapeName as ua, isMinMaxTrack as ui, resolvePaintState as un, UiSelectionChangeEvent as uo, EditableTextModel as ur, UiPointerController as ut, drawOverlayShapes as v, hiddenRangesOf as va, borderRadiusCorners as vi, selectableTextOf as vn, UiBinding as vo, wordRangeAt as vr, scrollRange as vt, describeLength as w, textSpansEqual as wa, defineProperty as wi, isNodeSelectable as wn, resolvePropertyByName as wr, offsetAtPointIn as wt, LayoutEngine as x, spannedTextOf as xa, borderRadiusValuesEqual as xi, isNodeFocusable as xn, resolveBoolean as xr, scrollbarZoneAt as xt, labelOrigin as y, resolvedSpansOf as ya, borderRadiusEqual as yi, selectionRangeOf as yn, UiGraph as yr, scrollbarThumb as yt, isLayoutProtocol as z, findEnvironmentKey as za, withDensity as zi, caretVisibleAt as zn, isUiSemanticState as zr, buildFontString as zt };
 
-//# sourceMappingURL=CanvasSurface-BSvtTgJZ.js.map
+//# sourceMappingURL=CanvasSurface-VUJRrcXl.js.map