gesso-core 0.4.0 → 0.4.2

package/dist/{CanvasSurface-BR7hECHm.js → CanvasSurface-BMOmE_dD.js}

@@ -4519,6 +4519,41 @@ const UiProperties = {
 		affects: T
 	}),
 	/**
+	* Another node whose scroll offset this scroll container takes, on
+	* the axes `scrollWithAxis` names: a line-number gutter beside an
+	* editable's text, a spreadsheet's row header beside its grid.
+	*
+	* Taken in the same layout pass that settles the other node's
+	* offset, so the two are painted in step on every frame, whatever
+	* scrolled the other one — a wheel, a scrollbar, the caret, a clamp
+	* after text was deleted. Binding `scrollY` to what `scrollPosition`
+	* reports cannot do that: the report arrives after the frame is laid
+	* out, and the follower is a frame behind.
+	*
+	* The follower's own `scrollX`/`scrollY` are ignored on a followed
+	* axis, it shows no scrollbars, and a wheel over it scrolls the node
+	* it follows. The other node may be any scroll container or an
+	* editable, which scrolls its own text; the offset is clamped to the
+	* follower's own range, so give it content as tall as the text.
+	*
+	* The follower may be `overflow: 'hidden'`, which is otherwise never
+	* scrolled: following makes it scrolled, and nothing but the leader
+	* moves it.
+	*/
+	scrollWith: defineProperty({
+		name: "scrollWith",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 36
+	}),
+	/** Which axes `scrollWith` follows: 'both' (default), 'x' or 'y'. */
+	scrollWithAxis: defineProperty({
+		name: "scrollWithAxis",
+		defaultValue: void 0,
+		inherited: false,
+		affects: T
+	}),
+	/**
 	* What happens to a wheel delta this node cannot use.
 	*
 	* Named after the CSS property it means the same thing as.
@@ -4536,6 +4571,12 @@ const UiProperties = {
 	* wants the default, or the article stops scrolling whenever the
 	* cursor crosses the canvas.
 	*
+	* Unlike the CSS property it is honoured on any node, not only a
+	* scroll container. An app's root is rarely one, and neither is a
+	* canvas that pans and zooms on the wheel itself — which wants
+	* `'contain'` so a ctrl-wheel, or a trackpad pinch, zooms the canvas
+	* and not the page around it.
+	*
 	* Like `scrollBehavior`, this is read by the input layer and
 	* affects nothing laid out or painted.
 	*/
@@ -8635,6 +8676,30 @@ const SCROLLBAR_MIN_THUMB = 24;
 /** Distance from the end edge within which the pointer reveals the bar. */
 const SCROLLBAR_HOVER_ZONE = 16;
 /**
+* The node a `scrollWith` container follows, or null for one that
+* scrolls on its own. A follower has no scrollbar of its own, and what
+* would scroll it scrolls this instead.
+*/
+function scrollLeaderOf(node) {
+	const leader = node.properties.get("scrollWith");
+	return leader !== void 0 && leader !== null && leader !== node ? leader : null;
+}
+/**
+* The furthest a record's content can be scrolled along an axis.
+*
+* The one answer the layout engine's clamp, the scrollbars and the
+* scroll sinks all read, so a wheel stops exactly where the caret
+* would. A field may go one caret width past its text, so that a
+* caret at the very end is inside the box and not on the clipped
+* edge; a field wide enough for its text gets no allowance, or the
+* line would shift by a pixel the moment the caret reached the end.
+*/
+function scrollRange(rec, axis) {
+	const overflow = axis === "y" ? rec.contentHeight - rec.height : rec.contentWidth - rec.width;
+	if (!(overflow > 0)) return 0;
+	return rec.scrollsText ? overflow + 1 : overflow;
+}
+/**
 * The scrollbars a scroll container shows: one per axis whose content
 * overflows. Renderers draw exactly these rectangles and the hit
 * tester grabs them, so what is seen is what is dragged.
@@ -8655,7 +8720,7 @@ function thumbFor(rec, axis) {
 	const track = viewport - 4;
 	const length = Math.min(track, Math.max(24, track * viewport / content));
 	const travel = Math.max(0, track - length);
-	const maxScroll = content - viewport;
+	const maxScroll = scrollRange(rec, axis);
 	const offset = axis === "y" ? rec.scrollY : rec.scrollX;
 	const along = 2 + (maxScroll > 0 ? travel * offset / maxScroll : 0);
 	return {
@@ -8975,7 +9040,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 && this.hitScrollbar(node, rec, px, py)) return true;
+			if ((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;
@@ -9050,8 +9115,7 @@ var UiHitTester = class {
 			}
 		}
 		if (bar === null) return false;
-		const visible = rec.scrollbarVisibleUntil > (typeof performance !== "undefined" ? performance.now() : Date.now());
-		if (!onThumb && !visible && !this.zoneOnly) return false;
+		if (!(rec.scrollbarVisibleUntil > (typeof performance !== "undefined" ? performance.now() : Date.now())) && !this.zoneOnly && (!onThumb || !rec.scrollable)) return false;
 		this.recordHit(node, rec, px, py);
 		this.result.scrollbar = {
 			axis,
@@ -9967,6 +10031,15 @@ function hasScrollRoom(offset, max, delta) {
 	return delta > 0 ? offset < max - SCROLL_EPSILON : offset > SCROLL_EPSILON;
 }
 /** Whether this node keeps overscroll rather than chaining it outwards. */
+/**
+* Whether a node keeps the wheel deltas nothing below it used.
+*
+* Honoured on any node, where CSS's `overscroll-behavior` applies only
+* to scroll containers. The property is how an app says "no wheel over
+* me reaches the page", and the nodes that most need to say it — an
+* app's root, a canvas that pans and zooms on the wheel itself — are
+* the ones that are not scroll containers.
+*/
 function containsOverscroll(node) {
 	return node !== null && node.getProperty("overscrollBehavior") === "contain";
 }
@@ -10099,16 +10172,17 @@ var UiWheelController = class {
 		let left = false;
 		let right = false;
 		for (let node = target; node !== null; node = node.parent) {
-			if (!isScrollContainer(node)) continue;
-			const state = this.scrollSink.containerState(node);
-			if (state === void 0) continue;
-			left ||= hasScrollRoom(state.scrollX, state.maxScrollX, -1);
-			right ||= hasScrollRoom(state.scrollX, state.maxScrollX, 1);
-			up ||= hasScrollRoom(state.scrollY, state.maxScrollY, -1);
-			down ||= hasScrollRoom(state.scrollY, state.maxScrollY, 1);
+			const scrolled = scrollLeaderOf(node) ?? node;
+			const state = takesWheel(node) ? this.scrollSink.containerState(scrolled) : void 0;
+			if (state !== void 0) {
+				left ||= hasScrollRoom(state.scrollX, state.maxScrollX, -1);
+				right ||= hasScrollRoom(state.scrollX, state.maxScrollX, 1);
+				up ||= hasScrollRoom(state.scrollY, state.maxScrollY, -1);
+				down ||= hasScrollRoom(state.scrollY, state.maxScrollY, 1);
+			}
 			if (containsOverscroll(node)) return EVERYTHING_SCROLLABLE;
 		}
-		if (containsOverscroll(rootOf(target))) return EVERYTHING_SCROLLABLE;
+		if (this.appContainsOverscroll(target)) return EVERYTHING_SCROLLABLE;
 		return {
 			up,
 			down,
@@ -10147,13 +10221,19 @@ var UiWheelController = class {
 	*/
 	scrollChain(target, event, deltaX, deltaY, deltaMode, wheelDeltaY) {
 		for (let node = target; node !== null; node = node.parent) {
-			if (!isScrollContainer(node)) continue;
-			const state = this.scrollSink.containerState(node);
-			if (state === void 0) continue;
+			const scrolled = scrollLeaderOf(node) ?? node;
+			const state = takesWheel(node) ? this.scrollSink.containerState(scrolled) : void 0;
+			if (state === void 0) {
+				if (containsOverscroll(node)) {
+					event.markConsumed();
+					return;
+				}
+				continue;
+			}
 			const takesX = deltaX !== 0 && hasScrollRoom(state.scrollX, state.maxScrollX, deltaX);
 			const takesY = deltaY !== 0 && hasScrollRoom(state.scrollY, state.maxScrollY, deltaY);
 			if (takesX || takesY) {
-				this.applyDelta(node, state, takesX ? deltaX : 0, takesY ? deltaY : 0, deltaMode, behaviorFor(node, deltaMode, wheelDeltaY));
+				this.applyDelta(scrolled, state, takesX ? deltaX : 0, takesY ? deltaY : 0, deltaMode, behaviorFor(scrolled, deltaMode, wheelDeltaY));
 				event.markConsumed();
 				return;
 			}
@@ -10162,7 +10242,22 @@ var UiWheelController = class {
 				return;
 			}
 		}
-		if (containsOverscroll(rootOf(target))) event.markConsumed();
+		if (this.appContainsOverscroll(target)) event.markConsumed();
+	}
+	/**
+	* Whether the application's root asked to keep every wheel.
+	*
+	* Asked of `rootNode` first, because in a mounted app the tree's
+	* topmost node is not the application's: the runtime wraps the app
+	* in a stack beside its overlay layer, and `contain` set on the app's
+	* own root — which is where the property's documentation says to set
+	* it — was on a node `rootOf` never reached. A node in the overlay
+	* layer is not under the app's root either, so the chain walk alone
+	* would miss it too. `rootOf` is kept for a host that passes no
+	* root, where the topmost node is the only root there is.
+	*/
+	appContainsOverscroll(target) {
+		return containsOverscroll(this.rootNode?.() ?? null) || containsOverscroll(rootOf(target));
 	}
 	applyDelta(container, state, deltaX, deltaY, deltaMode, behavior) {
 		this.scrollSink.scrollBy(container, deltaX === 0 ? 0 : this.toPixels(deltaX, deltaMode, state.viewportWidth), deltaY === 0 ? 0 : this.toPixels(deltaY, deltaMode, state.viewportHeight), behavior);
@@ -10193,6 +10288,17 @@ function behaviorFor(container, deltaMode, wheelDeltaY) {
 	if (container.getProperty("scrollBehavior") === "instant") return "instant";
 	return isNotchedWheel(deltaMode, wheelDeltaY) ? "smooth" : "instant";
 }
+/**
+* Whether the wheel scrolls this node: a scroll container, an
+* editable, which scrolls its own text, or a `scrollWith` follower,
+* whose wheel goes to the node it follows.
+*
+* Only the wheel. A finger on a field places a caret or selects, and a
+* scrollbar drag is found by hit test, so neither asks this.
+*/
+function takesWheel(node) {
+	return isScrollContainer(node) || node.type === "editable-text" || scrollLeaderOf(node) !== null;
+}
 /** A ScrollView, or any node with overflow 'scroll' or 'auto'. */
 function isScrollContainer(node) {
 	if (node.type === "scroll-view") return true;
@@ -10426,6 +10532,11 @@ const VELOCITY_SAMPLES = 8;
 * long press raises nothing: it has a secondary button, and the
 * pointer controller dispatches the event from that instead.
 *
+* A mouse long press does not cost the Click either, unless its
+* LongPress was `preventDefault()`ed or it went on to a Drag: a button
+* held down a moment before letting go is a slow click, and dropping
+* it made toolbar buttons seem to ignore a deliberate press.
+*
 * ## Two contacts
 *
 * Every contact the controller sees is fed to a `UiPinchRecognizer`,
@@ -10505,6 +10616,7 @@ var UiGestureRecognizer = class {
 			return;
 		}
 		if (this.state === "longPressed") {
+			if (!this.claimedPress && Math.hypot(event.x - this.startX, event.y - this.startY) <= this.pressSlop()) return;
 			this.state = "dragging";
 			this.claimedPress = true;
 			this.dispatch("dragstart", target, this.startX, this.startY, event);
@@ -10559,8 +10671,10 @@ var UiGestureRecognizer = class {
 			this.timer = null;
 			if (this.state !== "pressing") return;
 			this.state = "longPressed";
-			this.claimedPress = true;
+			const mouse = down.pointer.kind === "mouse";
+			this.claimedPress = !mouse;
 			const held = this.dispatch("longpress", target, this.startX, this.startY, down);
+			if (mouse && held.defaultPrevented) this.claimedPress = true;
 			if (this.contextMenuOnLongPress && down.pointer.kind !== "mouse" && !held.defaultPrevented) this.dispatcher.dispatch(new UiPointerEvent("contextmenu", this.startX, this.startY, down.buttons, down.modifiers, down.pointer), target);
 		}, this.longPressDelay);
 	}
@@ -12356,6 +12470,23 @@ var LayoutRecord = class {
 	clips = false;
 	scrollable = false;
 	/**
+	* An editable, which scrolls its own text inside its box.
+	*
+	* Not `scrollable`: it has no children to translate and its offset
+	* follows the caret, so every path that treats a scroll container's
+	* content as children leaves it alone. What it shares with one is
+	* the offset and its clamp — see `scrollRange` — and, when it is
+	* multiline, the overlay scrollbars.
+	*/
+	scrollsText = false;
+	/**
+	* A multiline editable, which shows the overlay scrollbars a scroll
+	* container does over its own text. A single-line field scrolls
+	* sideways too, but a bar under one line of text reads as part of
+	* the control rather than a hint that there is more of it.
+	*/
+	textScrollbars = false;
+	/**
 	* A scroll container that reads right to left, so its overlay
 	* scrollbar hangs on the left edge and the band that reveals it is
 	* on the left too.
@@ -12621,6 +12752,8 @@ var LayoutRecord = class {
 		this.liftBoundary = false;
 		this.clips = false;
 		this.scrollable = false;
+		this.scrollsText = false;
+		this.textScrollbars = false;
 		this.mirrored = false;
 		this.sticky = false;
 		this.stickyOffsetX = 0;
@@ -12786,7 +12919,7 @@ function accumulatedOffsetTo(node, records, out) {
 }
 //#endregion
 //#region src/layout/LayoutExplanation.ts
-const EPSILON = 1e-6;
+const EPSILON$1 = 1e-6;
 /**
 * Turns the facts about one axis into the rule that decided it and the
 * sentences that say so.
@@ -12801,7 +12934,7 @@ function buildAxisExplanation(f) {
 	if (f.customParent !== void 0 && !f.isRoot) {
 		decidedBy = "custom";
 		reasons.push(`the '${f.customParent}' layout on ${f.parentLabel} measured it at ${px(f.measured)}`);
-		if (Math.abs(f.final - f.measured) > EPSILON) reasons.push(`and placed it at ${px(f.final)}`);
+		if (Math.abs(f.final - f.measured) > EPSILON$1) reasons.push(`and placed it at ${px(f.final)}`);
 		return {
 			axis: f.axis,
 			content: f.content,
@@ -12840,7 +12973,7 @@ function buildAxisExplanation(f) {
 			const to = f.effectiveMin > f.parentMin ? f.ownMin : f.ownMax;
 			reasons.push(`clamped by its own ${clamp} ${px(to ?? f.effectiveMin)} → ${px(f.effectiveMin)}`);
 		}
-		if (f.content > f.effectiveMin + EPSILON) reasons.push(`its content would need ${px(f.content)}; the extra ${px(f.content - f.effectiveMin)} ${f.clipsContent ? "is clipped" : "overflows"}`);
+		if (f.content > f.effectiveMin + EPSILON$1) reasons.push(`its content would need ${px(f.content)}; the extra ${px(f.content - f.effectiveMin)} ${f.clipsContent ? "is clipped" : "overflows"}`);
 	} else if (f.explicit !== void 0) {
 		decidedBy = "explicit";
 		reasons.push(`${f.axis}: ${describeLength(f.explicitRaw)} (explicit) → ${px(f.explicit)}`);
@@ -12850,29 +12983,29 @@ function buildAxisExplanation(f) {
 			const to = f.effectiveMin > f.explicit ? f.ownMin : f.ownMax;
 			reasons.push(`clamped by ${clamp} ${px(to ?? f.effectiveMin)} → ${px(f.effectiveMin)}`);
 		}
-		if (isFinite(f.parentMax) && f.effectiveMin > f.parentMax + EPSILON) reasons.push(`wider than the ${px(f.parentMax)} available: it overflows ${f.parentLabel}`);
+		if (isFinite(f.parentMax) && f.effectiveMin > f.parentMax + EPSILON$1) reasons.push(`wider than the ${px(f.parentMax)} available: it overflows ${f.parentLabel}`);
 	} else {
 		reasons.push(contentReason(f));
 		if (f.flex !== void 0 && !f.flex.scroller) reasons.push(unflexedReason(f.flex));
-		if (f.aspectRatio !== void 0 && Math.abs(f.content - f.measured) > EPSILON) {
+		if (f.aspectRatio !== void 0 && Math.abs(f.content - f.measured) > EPSILON$1) {
 			decidedBy = "aspect-ratio";
 			reasons.push(`aspectRatio ${formatNumber(f.aspectRatio)} derives it from the other axis → ${px(f.measured)}`);
 		}
-		if (f.content < f.effectiveMin - EPSILON) {
-			if (f.ownMin !== void 0 && f.ownMin >= f.effectiveMin - EPSILON) {
+		if (f.content < f.effectiveMin - EPSILON$1) {
+			if (f.ownMin !== void 0 && f.ownMin >= f.effectiveMin - EPSILON$1) {
 				decidedBy = "min";
 				reasons.push(`raised to ${minProp} ${px(f.ownMin)}`);
 			} else {
 				decidedBy = "min";
 				reasons.push(`raised to the minimum ${f.parentLabel} asked for: ${px(f.parentMin)}`);
 			}
-		} else if (f.ownMax !== void 0 && f.content > f.ownMax + EPSILON && f.measured <= f.ownMax + EPSILON) {
+		} else if (f.ownMax !== void 0 && f.content > f.ownMax + EPSILON$1 && f.measured <= f.ownMax + EPSILON$1) {
 			decidedBy = "max";
 			reasons.push(`capped by ${maxProp} ${px(f.ownMax)}`);
 		}
-		if (isFinite(f.parentMax) && f.measured > f.parentMax + EPSILON) reasons.push(`the ${px(f.parentMax)} available was only a bound, not a size: the extra ${px(f.measured - f.parentMax)} ${f.clipsContent ? "is clipped" : "overflows"} ${f.parentLabel}`);
+		if (isFinite(f.parentMax) && f.measured > f.parentMax + EPSILON$1) reasons.push(`the ${px(f.parentMax)} available was only a bound, not a size: the extra ${px(f.measured - f.parentMax)} ${f.clipsContent ? "is clipped" : "overflows"} ${f.parentLabel}`);
 	}
-	if (Math.abs(f.final - f.measured) > EPSILON) reasons.push(`placed at ${px(f.final)} by ${f.parentLabel} (measured ${px(f.measured)})`);
+	if (Math.abs(f.final - f.measured) > EPSILON$1) reasons.push(`placed at ${px(f.final)} by ${f.parentLabel} (measured ${px(f.measured)})`);
 	return {
 		axis: f.axis,
 		content: f.content,
@@ -12890,8 +13023,8 @@ function buildAxisExplanation(f) {
 function flexReasons(f, flex, reasons) {
 	const px = formatNumber;
 	const final = f.parentMin;
-	const grew = final > flex.base + EPSILON;
-	const shrank = final < flex.base - EPSILON;
+	const grew = final > flex.base + EPSILON$1;
+	const shrank = final < flex.base - EPSILON$1;
 	if (!grew && !shrank) {
 		if (f.explicit !== void 0) {
 			reasons.push(`${f.axis}: ${describeLength(f.explicitRaw)} (explicit) → ${px(f.explicit)}`);
@@ -12911,10 +13044,10 @@ function flexReasons(f, flex, reasons) {
 	reasons.push(`flex item of ${flex.containerLabel}: base ${px(flex.base)} from ${baseSource}`);
 	if (grew) {
 		reasons.push(`grew to ${px(final)} (flexGrow ${px(flex.grow)} takes a share of the free space)`);
-		if (Math.abs(final - flex.max) < EPSILON && isFinite(flex.max)) reasons.push(`stopped at ${f.axis === "width" ? "maxWidth" : "maxHeight"} ${px(flex.max)}`);
+		if (Math.abs(final - flex.max) < EPSILON$1 && isFinite(flex.max)) reasons.push(`stopped at ${f.axis === "width" ? "maxWidth" : "maxHeight"} ${px(flex.max)}`);
 	} else {
 		reasons.push(`shrank to ${px(final)} (flexShrink ${px(flex.shrink)}: the items' base sizes exceed the content box of ${flex.containerLabel}, so they give up space)`);
-		if (Math.abs(final - flex.min) < EPSILON) reasons.push(minimumReason(f, flex));
+		if (Math.abs(final - flex.min) < EPSILON$1) reasons.push(minimumReason(f, flex));
 	}
 	return "flex";
 }
@@ -12932,7 +13065,7 @@ function minimumReason(f, flex) {
 	if (!flex.minAuto) return `stopped at ${minProp} ${px(flex.min)}`;
 	if (flex.min === 0 && f.clipsContent) return `its automatic minimum is 0: a scroll container or clipped text has none, so it may shrink to nothing`;
 	if (flex.min === 0 && f.contentMin === 0) return `its automatic minimum is 0: the content has no minimum ${f.axis}`;
-	if (f.explicit !== void 0 && Math.abs(flex.min - f.explicit) < EPSILON) return `stopped at its automatic minimum ${px(flex.min)}, its explicit ${f.axis} (set ${minProp}: 0 to allow smaller)`;
+	if (f.explicit !== void 0 && Math.abs(flex.min - f.explicit) < EPSILON$1) return `stopped at its automatic minimum ${px(flex.min)}, its explicit ${f.axis} (set ${minProp}: 0 to allow smaller)`;
 	return `stopped at its automatic minimum ${px(flex.min)} (the content's min-content ${f.axis}; set ${minProp}: 0 to allow smaller)`;
 }
 function contentReason(f) {
@@ -13344,6 +13477,23 @@ var LayoutEngine = class {
 		}
 		return this.records.get(node);
 	}
+	/**
+	* A number that changes whenever a box may have moved: every box
+	* written, every pass that did any work, every sticky shift and every
+	* node newly given a transform. It is the counter subtree bounds are
+	* kept honest by, read out for a renderer.
+	*
+	* What it deliberately does not count is a scroll offset on its own.
+	* A scroll container's descendants keep their pre-scroll records, so
+	* a frame that only scrolled leaves this alone, and that is what lets
+	* Canvas2D tell a frame that scrolled a list from one that moved it.
+	* The answer is conservative the other way: a pass that did work and
+	* moved nothing still counts, because proving it moved nothing would
+	* cost the walk the counter exists to avoid.
+	*/
+	get geometryVersion() {
+		return this.layoutVersion;
+	}
 	/** The node the last `layout` / `layoutForFrame` started from, if any. */
 	get root() {
 		return this.layoutRoot;
@@ -14032,6 +14182,11 @@ var LayoutEngine = class {
 	scrollContainers() {
 		return this.scrollNodes;
 	}
+	/** Everything that can show a scrollbar: scroll containers, then fields. */
+	*scrollbarNodes() {
+		yield* this.scrollNodes;
+		yield* this.textScrollNodes;
+	}
 	/**
 	* When the next scrollbar changes appearance (starts fading or
 	* disappears), or undefined when none is showing. Lets a host schedule
@@ -14039,9 +14194,9 @@ var LayoutEngine = class {
 	*/
 	nextScrollbarChange(now) {
 		let next;
-		for (const node of this.scrollNodes) {
+		for (const node of this.scrollbarNodes()) {
 			const rec = this.records.get(node);
-			if (rec === void 0 || !rec.scrollable || rec.scrollbarVisibleUntil <= now) continue;
+			if (rec === void 0 || !(rec.scrollable || rec.textScrollbars) || rec.scrollbarVisibleUntil <= now) continue;
 			if (rec.contentWidth <= rec.width && rec.contentHeight <= rec.height) continue;
 			const fadeStart = rec.scrollbarVisibleUntil - 350;
 			const candidate = now < fadeStart ? fadeStart : now + 16;
@@ -15823,38 +15978,52 @@ var LayoutEngine = class {
 		}
 	}
 	applyScroll() {
-		for (const node of this.scrollNodes) this.applyScrollOffset(node, false);
+		let followers;
+		for (const node of this.scrollNodes) {
+			if (scrollLeaderOf(node) !== null) {
+				(followers ??= []).push(node);
+				continue;
+			}
+			this.applyScrollOffset(node, false);
+		}
 		for (const node of this.textScrollNodes) this.applyScrollOffset(node, true);
+		if (followers !== void 0) for (const node of followers) this.applyFollowedScroll(node, scrollLeaderOf(node));
 		this.applySticky();
 	}
 	/**
+	* A `scrollWith` container's offset: the leader's, on the axes it
+	* follows, clamped to the follower's own range. No scrollbar shows
+	* for it, since what is being scrolled is the leader.
+	*/
+	applyFollowedScroll(node, leader) {
+		const rec = this.record(node);
+		const source = this.records.get(leader);
+		const axis = node.properties.get("scrollWithAxis") ?? "both";
+		const followsX = axis !== "y";
+		const followsY = axis !== "x";
+		const rawX = followsX ? source?.scrollX ?? 0 : this.numberProp(node, "scrollX") ?? 0;
+		const rawY = followsY ? source?.scrollY ?? 0 : this.numberProp(node, "scrollY") ?? 0;
+		rec.scrollX = this.clamp(rawX, 0, scrollRange(rec, "x"));
+		rec.scrollY = this.clamp(rawY, 0, scrollRange(rec, "y"));
+		rec.transformDirty = false;
+	}
+	/**
 	* Brings a record's scroll offset up to date with its `scrollX` and
-	* `scrollY` properties, clamped to what there is to scroll. This runs
-	* every pass, so an offset written against a larger content — a field
-	* whose text has since been deleted, a list that lost rows — comes
-	* back into range on its own.
-	*
-	* A field that scrolls may go one caret width further than its text,
-	* so that a caret at the very end is inside the box and not on its
-	* edge, where the clip would take it. A field wide enough for its
-	* text does not: the allowance would shift the line by a pixel the
-	* moment the caret reached the end.
+	* `scrollY` properties, clamped to what there is to scroll (see
+	* `scrollRange`). This runs every pass, so an offset written against
+	* a larger content — a field whose text has since been deleted, a
+	* list that lost rows — comes back into range on its own.
 	*/
 	applyScrollOffset(node, field) {
 		const rec = this.record(node);
 		const rawX = this.numberProp(node, "scrollX") ?? 0;
 		const rawY = this.numberProp(node, "scrollY") ?? 0;
-		const caret = field ? 1 : 0;
-		const overflowX = rec.contentWidth - rec.width;
-		const overflowY = rec.contentHeight - rec.height;
-		const maxX = overflowX > 0 ? overflowX + caret : 0;
-		const maxY = overflowY > 0 ? overflowY + caret : 0;
-		const scrollX = this.clamp(rawX, 0, maxX);
-		const scrollY = this.clamp(rawY, 0, maxY);
+		const scrollX = this.clamp(rawX, 0, scrollRange(rec, "x"));
+		const scrollY = this.clamp(rawY, 0, scrollRange(rec, "y"));
 		if (scrollX !== rec.scrollX || scrollY !== rec.scrollY) {
 			rec.scrollX = scrollX;
 			rec.scrollY = scrollY;
-			if (!field) rec.scrollbarVisibleUntil = this.now() + SCROLLBAR_LINGER_MS;
+			if (!field || rec.textScrollbars) rec.scrollbarVisibleUntil = this.now() + SCROLLBAR_LINGER_MS;
 		}
 		rec.transformDirty = false;
 	}
@@ -16066,8 +16235,10 @@ var LayoutEngine = class {
 		rec.sticky = position === "sticky";
 		rec.positioned = rec.absolute || rec.sticky || position === "relative";
 		const overflow = props.get("overflow");
-		rec.scrollable = node.type === "scroll-view" || overflow === "scroll" || overflow === "auto";
-		rec.mirrored = rec.scrollable && this.startEdge(node) === "right";
+		rec.scrollable = node.type === "scroll-view" || overflow === "scroll" || overflow === "auto" || overflow === "hidden" && scrollLeaderOf(node) !== null;
+		rec.scrollsText = node.type === "editable-text";
+		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";
 		const insetH = this.lengthProp(node, "inset", base.width);
 		const insetV = this.lengthProp(node, "inset", base.height);
@@ -17485,6 +17656,14 @@ const MAX_PICTURE_SIDE = 8192;
 * is what remains: that both place the same picture in the same box,
 * at the same point in paint order, under the same clip and opacity.
 *
+* **A picture that changes every frame is the exception**, on Canvas2D:
+* `draw` replays its new recording straight onto the frame and makes a
+* bitmap only on the first frame its inputs hold still. The parity
+* claim is kept where it is made — both backends draw the same bitmap of
+* a settled picture, and a changing one is the same recording through
+* the same `PaintTarget` — and a canvas whose layers move every frame
+* stops paying for a bitmap per layer per frame that nobody draws twice.
+*
 * **The cost follows the change.** A frame that draws a painted node
 * whose inputs, box, scale and theme are unchanged makes no recording
 * and no bitmap; it draws the one already here. The key holds the
@@ -17504,7 +17683,8 @@ var PaintPictureCache = class {
 	stats = {
 		recorded: 0,
 		rasterized: 0,
-		resolved: 0
+		resolved: 0,
+		direct: 0
 	};
 	constructor(createCanvas = offscreenPaintCanvas) {
 		this.createCanvas = createCanvas;
@@ -17517,6 +17697,7 @@ var PaintPictureCache = class {
 		this.stats.recorded = 0;
 		this.stats.rasterized = 0;
 		this.stats.resolved = 0;
+		this.stats.direct = 0;
 	}
 	/**
 	* The node's picture at this box and device scale, made if the
@@ -17528,39 +17709,107 @@ var PaintPictureCache = class {
 	*/
 	pictureFor(node, rec, scale) {
 		this.stats.resolved++;
-		const paint = node.properties.get("paint");
-		const path = node.properties.get("path");
-		if (paint === void 0 && path === void 0) return;
-		if (!(rec.width > 0) || !(rec.height > 0)) return;
-		const clipPath = node.properties.get("clipPath");
-		const blur = node.properties.get("blur");
+		const key = keyFor(node, rec, scale);
+		if (key === null) return;
 		const slot = this.slots.get(node);
-		if (slot !== void 0 && slot.picture !== null && slot.width === rec.width && slot.height === rec.height && slot.scale === scale && slot.environment === node.environment && slot.clipPath === clipPath && slot.blur === blur && paintValuesEqual(slot.paint, paint) && pathValuesEqual(slot.path, path)) return slot.picture;
-		const box = {
-			width: rec.width,
-			height: rec.height,
-			paddingTop: rec.paddingTop,
-			paddingRight: rec.paddingRight,
-			paddingBottom: rec.paddingBottom,
-			paddingLeft: rec.paddingLeft,
-			scale
-		};
-		const recording = this.record(paint, path, clipPath, blur, box);
-		const picture = this.rasterize(node, recording, box);
-		slot?.picture?.close?.();
-		this.slots.set(node, {
-			picture,
+		if (slot !== void 0 && matches(slot, key)) return this.pictureOf(node, slot, key.box) ?? void 0;
+		const recording = this.record(key.paint, key.path, key.clipPath, key.blur, key.box);
+		const next = this.remember(node, slot, key, recording);
+		return this.pictureOf(node, next, key.box) ?? void 0;
+	}
+	/**
+	* Draws a node's picture onto a Canvas2D frame, making a bitmap only
+	* when one will be drawn more than once.
+	*
+	* `pictureFor` rasterises every new recording into a bitmap, which
+	* pays for itself when the picture is drawn again — a chart that
+	* changed once and is panned for a minute. It does not when the
+	* picture changes every frame: the bitmap is drawn once and thrown
+	* away, and the frame has paid for a canvas cleared, a separate
+	* flush, and a composite of every pixel of it. gessologic's canvas
+	* redraws a layer of live wires per tile per frame, and in software
+	* rendering `transferToImageBitmap` alone was a quarter of the render
+	* worker's time.
+	*
+	* So a recording made because the painter's inputs changed is
+	* replayed straight onto the frame's context, clipped to the node's
+	* box, and no bitmap is made. Once it has held still for
+	* `SETTLE_FRAMES` frames it makes the bitmap and draws that from there
+	* on, exactly as `pictureFor` would. A picture that changes every
+	* frame, or nearly every frame, is never rasterised; one that settles
+	* is rasterised once, a few frames late.
+	* A picture seen for the first time, or at a new size, is rasterised
+	* at once, because it most likely holds still.
+	*
+	* Canvas2D only. WebGPU has no path pipeline to replay onto, which is
+	* the reason the cache exists (see the class comment), and asks
+	* `pictureFor`. The two backends then differ only in when the pixels
+	* of a changing picture are made, not in which: both come from the
+	* same recording through the same `PaintTarget`.
+	*/
+	draw(node, rec, scale, ctx) {
+		this.stats.resolved++;
+		const key = keyFor(node, rec, scale);
+		if (key === null) return;
+		const slot = this.slots.get(node);
+		if (slot !== void 0 && matches(slot, key)) {
+			if (!slot.rasterized && slot.settling > 0) {
+				slot.settling--;
+				this.replay(node, slot.recording, rec, ctx);
+				return;
+			}
+			const picture = this.pictureOf(node, slot, key.box);
+			if (picture !== null) ctx.drawImage(picture, rec.x, rec.y, rec.width, rec.height);
+			return;
+		}
+		const recording = this.record(key.paint, key.path, key.clipPath, key.blur, key.box);
+		const next = this.remember(node, slot, key, recording);
+		if (recording.ops.length === 0) return;
+		if (slot === void 0 || !contentChanged(slot, key)) {
+			const picture = this.pictureOf(node, next, key.box);
+			if (picture !== null) ctx.drawImage(picture, rec.x, rec.y, rec.width, rec.height);
+			return;
+		}
+		next.settling = 3;
+		this.replay(node, recording, rec, ctx);
+	}
+	/** A recording drawn straight onto the frame, clipped to the box its bitmap would fill. */
+	replay(node, recording, rec, ctx) {
+		this.stats.direct++;
+		ctx.save();
+		ctx.translate(rec.x, rec.y);
+		ctx.beginPath();
+		ctx.rect(0, 0, rec.width, rec.height);
+		ctx.clip();
+		replayPaint(recording, new PaintTarget(ctx, resolverFor(node)));
+		ctx.restore();
+	}
+	/** A slot's bitmap, made now if it has not been. */
+	pictureOf(node, slot, box) {
+		if (!slot.rasterized) {
+			slot.picture = this.rasterize(node, slot.recording, box);
+			slot.rasterized = true;
+		}
+		return slot.picture;
+	}
+	remember(node, previous, key, recording) {
+		previous?.picture?.close?.();
+		const slot = {
+			picture: null,
+			rasterized: false,
+			settling: 0,
 			recording,
-			paint,
-			path,
-			clipPath,
-			blur,
+			paint: key.paint,
+			path: key.path,
+			clipPath: key.clipPath,
+			blur: key.blur,
 			environment: node.environment,
-			width: rec.width,
-			height: rec.height,
-			scale
-		});
-		return picture ?? void 0;
+			width: key.box.width,
+			height: key.box.height,
+			scale: key.box.scale
+		};
+		this.slots.set(node, slot);
+		return slot;
 	}
 	/**
 	* The recording a node's picture was made from.
@@ -17607,6 +17856,36 @@ var PaintPictureCache = class {
 * make it possible for them not to.
 */
 const paintPictures = new PaintPictureCache();
+/** The key for a node's picture, or null when it paints nothing or its box has no area. */
+function keyFor(node, rec, scale) {
+	const paint = node.properties.get("paint");
+	const path = node.properties.get("path");
+	if (paint === void 0 && path === void 0) return null;
+	if (!(rec.width > 0) || !(rec.height > 0)) return null;
+	return {
+		paint,
+		path,
+		clipPath: node.properties.get("clipPath"),
+		blur: node.properties.get("blur"),
+		environment: node.environment,
+		box: {
+			width: rec.width,
+			height: rec.height,
+			paddingTop: rec.paddingTop,
+			paddingRight: rec.paddingRight,
+			paddingBottom: rec.paddingBottom,
+			paddingLeft: rec.paddingLeft,
+			scale
+		}
+	};
+}
+/** Whether what the painter draws changed, as against where or at what size it is drawn. */
+function contentChanged(slot, key) {
+	return slot.clipPath !== key.clipPath || slot.blur !== key.blur || !paintValuesEqual(slot.paint, key.paint) || !pathValuesEqual(slot.path, key.path);
+}
+function matches(slot, key) {
+	return slot.width === key.box.width && slot.height === key.box.height && slot.scale === key.box.scale && slot.environment === key.environment && slot.clipPath === key.clipPath && slot.blur === key.blur && paintValuesEqual(slot.paint, key.paint) && pathValuesEqual(slot.path, key.path);
+}
 /** A painter's colour values, against the node's own theme. */
 function resolverFor(node) {
 	return {
@@ -17669,6 +17948,310 @@ function offscreenPaintCanvas(width, height) {
 	};
 }
 //#endregion
+//#region src/rendering/canvas2d/ScrollLayers.ts
+/**
+* An `OffscreenCanvas` where there is one. Where there is not, no
+* layer is made and every frame is drawn directly, which is the
+* behaviour a host without one had anyway.
+*/
+function offscreenLayerCanvas(width, height) {
+	if (typeof OffscreenCanvas !== "function") return null;
+	return new OffscreenCanvas(width, height);
+}
+/**
+* How far from a whole device pixel a translation may be and still be
+* treated as whole. Floating point makes a scroll of ten pixels come
+* out as 9.999999999998 often enough that exact equality would refuse
+* nearly every pan; a thousandth of a pixel is invisible, and the
+* layer's offset is kept pixel-true (see `shift`) so the error never
+* accumulates past it.
+*/
+const EPSILON = .001;
+/**
+* The most layers held at once. Each costs two canvases the size of its
+* viewport; a screen with more scroll containers scrolling at once than
+* this is not one a layer per container would help.
+*/
+const MAX_LAYERS = 4;
+var ScrollLayerCache = class {
+	createCanvas;
+	settleFrames;
+	layers = /* @__PURE__ */ new Map();
+	/**
+	* Containers whose last layer drew something that changes without
+	* telling anyone — a caret, a fading scrollbar, a video. Building
+	* another on the next scroll would only throw it away again, so none
+	* is built until something in or above the subtree is dirtied, which
+	* 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();
+	/**
+	* Between `beginFrame` and `endFrame`. Still true at the next
+	* `beginFrame` means the last frame threw part way through, perhaps
+	* inside a layer's walk, and whatever the layers hold is suspect.
+	*/
+	open = false;
+	stats = {
+		built: 0,
+		composited: 0,
+		shifted: 0,
+		dropped: 0
+	};
+	constructor(createCanvas, settleFrames = 3) {
+		this.createCanvas = createCanvas;
+		this.settleFrames = settleFrames;
+	}
+	/** Whether layers may be used on this frame; false until `beginFrame` says so. */
+	get active() {
+		return this.frame !== null;
+	}
+	resetStats() {
+		this.stats.built = 0;
+		this.stats.composited = 0;
+		this.stats.shifted = 0;
+		this.stats.dropped = 0;
+	}
+	/**
+	* 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.
+	*/
+	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) {
+			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, 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;
+			}
+		}
+	}
+	/** Drops the layers the frame did not composite: their container was culled, removed, or drawn directly. */
+	endFrame() {
+		this.open = false;
+		for (const [node, layer] of this.layers) if (!layer.used) this.drop(node);
+		else layer.used = false;
+	}
+	get(node) {
+		return this.layers.get(node);
+	}
+	/**
+	* 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.
+	*/
+	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)) {
+			this.streaks.delete(node);
+			return false;
+		}
+		if ((frame.dirtyFlagsFor(node) & 32) === 0) return false;
+		const streak = (this.streaks.get(node) ?? 0) + 1;
+		if (streak < this.settleFrames) {
+			this.streaks.set(node, streak);
+			return false;
+		}
+		this.streaks.delete(node);
+		return true;
+	}
+	/** A new layer for the placement, or null where no canvas could be had. */
+	create(node, placement, rec) {
+		const front = this.createCanvas(placement.width, placement.height);
+		const back = front === null ? null : this.createCanvas(placement.width, placement.height);
+		const frontContext = front?.getContext("2d");
+		const backContext = back?.getContext("2d");
+		if (front === null || back === null || !frontContext || !backContext) return null;
+		const layer = {
+			front,
+			frontContext,
+			back,
+			backContext,
+			width: placement.width,
+			height: placement.height,
+			offsetX: placement.offsetX,
+			offsetY: placement.offsetY,
+			dpr: this.dpr,
+			scrollX: rec.scrollX,
+			scrollY: rec.scrollY,
+			used: true
+		};
+		this.layers.set(node, layer);
+		this.stats.built++;
+		return layer;
+	}
+	/**
+	* Whether a layer's pixels would land where this frame's direct draw
+	* would put them: the same size, the same fraction of a pixel.
+	*/
+	fits(layer, placement) {
+		return !contextLost(layer.frontContext) && !contextLost(layer.backContext) && layer.width === placement.width && layer.height === placement.height && layer.dpr === this.dpr && Math.abs(layer.offsetX - placement.offsetX) < EPSILON && Math.abs(layer.offsetY - placement.offsetY) < EPSILON;
+	}
+	/**
+	* Moves the layer's pixels to follow the record's scroll offset, and
+	* returns the strips that came into view and need painting — none
+	* when it did not scroll, the whole layer when it scrolled further
+	* than it is wide. Null when the scroll was not a whole number of
+	* 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 dx = Math.round(exactX);
+		const dy = Math.round(exactY);
+		if (Math.abs(exactX - dx) > EPSILON || Math.abs(exactY - dy) > EPSILON) return null;
+		if (dx === 0 && dy === 0) return [];
+		layer.scrollX -= dx / layer.dpr;
+		layer.scrollY -= dy / layer.dpr;
+		const { width, height } = layer;
+		if (Math.abs(dx) >= width || Math.abs(dy) >= height) {
+			clearLayer(layer.frontContext, width, height);
+			return [{
+				x: 0,
+				y: 0,
+				width,
+				height
+			}];
+		}
+		const back = layer.backContext;
+		clearLayer(back, width, height);
+		back.drawImage(layer.front, dx, dy, width, height);
+		[layer.front, layer.back] = [layer.back, layer.front];
+		[layer.frontContext, layer.backContext] = [layer.backContext, layer.frontContext];
+		this.stats.shifted++;
+		const strips = [];
+		if (dx !== 0) strips.push({
+			x: dx > 0 ? 0 : width + dx,
+			y: 0,
+			width: Math.abs(dx),
+			height
+		});
+		if (dy !== 0) strips.push({
+			x: dx > 0 ? dx : 0,
+			y: dy > 0 ? 0 : height + dy,
+			width: width - Math.abs(dx),
+			height: Math.abs(dy)
+		});
+		return strips;
+	}
+	/** Stops building layers for a container until its subtree is next dirtied. */
+	refuse(node) {
+		this.drop(node);
+		this.refused.add(node);
+	}
+	drop(node) {
+		const layer = this.layers.get(node);
+		if (layer === void 0) return;
+		this.layers.delete(node);
+		this.stats.dropped++;
+		layer.front.width = 0;
+		layer.back.width = 0;
+	}
+	dropAll() {
+		for (const node of this.layers.keys()) this.drop(node);
+		this.refused.clear();
+	}
+	forget(node) {
+		this.drop(node);
+		this.refused.delete(node);
+	}
+};
+/** Whether an ancestor was dirtied by more than its own scroll: inherited paint reaches the subtree without saying so. */
+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;
+	}
+	return false;
+}
+/**
+* Where a scroll container's viewport lands in device pixels, or null
+* when a layer could not reproduce the direct draw exactly: no
+* transform to read, a rotation, skew or scale above the container, an
+* opacity in force, or a viewport too large to be worth two copies.
+*
+* The layer covers the whole pixels the viewport touches. Its content
+* is drawn with the same fractional translation the frame has, so a
+* node lands in the layer at the same fraction of a pixel it would
+* have on the frame, and the layer is then copied onto whole pixels
+* with no resampling at all.
+*/
+function placeLayer(ctx, rec, dpr, surfaceWidth, surfaceHeight) {
+	const m = ctx.getTransform?.();
+	if (m === void 0 || ctx.globalAlpha !== 1) return null;
+	if (Math.abs(m.b) > EPSILON || Math.abs(m.c) > EPSILON || m.a !== dpr || m.d !== dpr) return null;
+	const left = dpr * rec.x + m.e;
+	const top = dpr * rec.y + m.f;
+	const x = Math.floor(left + EPSILON);
+	const y = Math.floor(top + EPSILON);
+	const width = Math.ceil(left + dpr * rec.width - EPSILON) - x;
+	const height = Math.ceil(top + dpr * rec.height - EPSILON) - y;
+	if (width <= 0 || height <= 0 || width * height > surfaceWidth * surfaceHeight) return null;
+	return {
+		x,
+		y,
+		width,
+		height,
+		offsetX: m.e - x,
+		offsetY: m.f - y
+	};
+}
+/**
+* Whether the browser threw a layer's backing store away — a GPU reset
+* takes 2D canvases with it — which would leave a layer that composites
+* as nothing. Optional on the context, as on older engines.
+*/
+function contextLost(ctx) {
+	return ctx.isContextLost?.() === true;
+}
+function clearLayer(ctx, width, height) {
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.clearRect(0, 0, width, height);
+}
+//#endregion
 //#region src/rendering/canvas2d/Canvas2DRenderer.ts
 /**
 * Canvas2D rendering backend.
@@ -17701,6 +18284,9 @@ function offscreenPaintCanvas(width, height) {
 * The frame strategy is a full clear + full traversal. Off-screen
 * subtrees are culled (while no ancestor transform is active) so
 * scrolling large lists only issues draws for the visible window.
+* The one exception is a scroll container's content on a frame that
+* only scrolled it, which is copied from the last frame's pixels and
+* has only the strip that came into view drawn (`ScrollLayers.ts`).
 */
 var Canvas2DRenderer = class {
 	options;
@@ -17754,8 +18340,32 @@ var Canvas2DRenderer = class {
 	* Drained after the walk; see `render`.
 	*/
 	liftedPass = [];
+	/** Scroll containers' content held as pixels; see `ScrollLayers.ts`. */
+	layers;
+	/**
+	* How deep inside a layer's walk the traversal is. A layer is drawn
+	* onto the frame, never onto another layer: an inner container that
+	* scrolls dirties the outer one's subtree anyway, so a layer inside
+	* a layer would be rebuilt every frame the inner one was useful.
+	*/
+	layerDepth = 0;
+	/**
+	* Bumped whenever something is drawn whose pixels change without the
+	* frame's changes saying so — a caret, a scrollbar still fading, a
+	* video frame. A layer's walk compares it before and after, and does
+	* not keep what it drew if it moved.
+	*/
+	volatileDraws = 0;
 	constructor(options) {
 		this.options = options;
+		this.layers = new ScrollLayerCache(options.createLayerCanvas ?? offscreenLayerCanvas, options.scrollLayerSettleFrames);
+	}
+	/** What the scroll layers did since the last reset. For budget specs. */
+	get scrollLayerStats() {
+		return this.layers.stats;
+	}
+	resetScrollLayerStats() {
+		this.layers.resetStats();
 	}
 	get surface() {
 		return this.options.surface;
@@ -17769,10 +18379,12 @@ var Canvas2DRenderer = class {
 	}
 	resize(width, height, dpr) {
 		this.surface.setLogicalSize(width, height, dpr);
+		this.layers.dropAll();
 	}
 	dispose() {
 		this.disposed = true;
 		this.scaledImages.dispose();
+		this.layers.dropAll();
 	}
 	render(root, context) {
 		const ctx = this.surface.getContext2D();
@@ -17784,9 +18396,12 @@ var Canvas2DRenderer = class {
 		this.cullHeight = this.surface.logicalHeight;
 		this.liftedPass.length = 0;
 		this.paintOwner = null;
+		this.layerDepth = 0;
+		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();
 	}
 	/**
 	* Folds a node's style into the shared scratch and records that it
@@ -17837,13 +18452,15 @@ var Canvas2DRenderer = class {
 			ctx.clip();
 			this.pushCull(rec);
 		}
-		if (rec.scrollable) {
-			ctx.save();
-			ctx.translate(-rec.scrollX, -rec.scrollY);
-		}
 		const liftedBefore = this.liftedPass.length;
-		this.renderChildren(node, context, ctx, cull && !paint.hasTransform && !sticky);
-		if (rec.scrollable) ctx.restore();
+		if (!rec.scrollable || !this.renderScrolledThroughLayer(node, rec, context, ctx)) {
+			if (rec.scrollable) {
+				ctx.save();
+				ctx.translate(-rec.scrollX, -rec.scrollY);
+			}
+			this.renderChildren(node, context, ctx, cull && !paint.hasTransform && !sticky);
+			if (rec.scrollable) ctx.restore();
+		}
 		if (rec.clips) this.popCull();
 		if (hasText) {
 			if (this.paintOwner !== node) this.resolvePaint(node);
@@ -17852,7 +18469,7 @@ var Canvas2DRenderer = class {
 		if (rec.liftBoundary && this.liftedPass.length > liftedBefore) this.renderLifted(context, ctx, liftedBefore, node);
 		if (rec.clips) ctx.restore();
 		if (decorations !== null && hasDecorationPhase(decorations, true)) this.paintDecorations(ctx, node, rec, this.paintOwner === node ? this.paint : this.resolvePaint(node), decorations, true);
-		if (rec.scrollable) this.paintScrollbars(ctx, rec, context.now ?? performance.now());
+		if (rec.scrollable || rec.textScrollbars) this.paintScrollbars(ctx, rec, context.now ?? performance.now());
 		while (saves > 0) {
 			ctx.restore();
 			saves--;
@@ -17942,6 +18559,7 @@ var Canvas2DRenderer = class {
 		const video = paint.video;
 		const source = video?.frame ?? paint.image;
 		if (source === void 0 || source === null) return;
+		if (video !== void 0) this.volatileDraws++;
 		const size = video === void 0 ? {
 			width: paint.image.width,
 			height: paint.image.height
@@ -17979,9 +18597,7 @@ var Canvas2DRenderer = class {
 	* story for a painted node.
 	*/
 	paintPicture(ctx, node, rec) {
-		const picture = paintPictures.pictureFor(node, rec, this.surface.dpr);
-		if (picture === void 0) return;
-		ctx.drawImage(picture, rec.x, rec.y, rec.width, rec.height);
+		paintPictures.draw(node, rec, this.surface.dpr, ctx);
 	}
 	/**
 	* The image to draw for a destination `width` x `height` in the
@@ -18106,6 +18722,7 @@ var Canvas2DRenderer = class {
 	*/
 	paintEditable(ctx, paint, context) {
 		const model = paint.editor;
+		if (model.focused) this.volatileDraws++;
 		const layout = new EditableLayout(model, this.contentBox, paint, context.text);
 		fillTextRects(ctx, textRunBackgrounds(layout.lines, paint));
 		if (model.focused && !model.collapsed) {
@@ -18131,6 +18748,101 @@ var Canvas2DRenderer = class {
 			ctx.fillRect(Math.round(caret.x), caret.y, 1, caret.height);
 		}
 	}
+	/**
+	* Draws a scroll container's children through its layer, and returns
+	* whether it did. False means the caller draws them directly, as it
+	* always used to; that is the answer to every doubt below.
+	*
+	* Called where the direct path would translate by the scroll offset,
+	* so the container's clip is open and its background and border are
+	* already drawn. The layer is copied onto the frame under that clip,
+	* which is how a rounded viewport stays rounded.
+	*/
+	renderScrolledThroughLayer(node, rec, context, ctx) {
+		const layers = this.layers;
+		if (!layers.active || this.layerDepth > 0) return false;
+		const dpr = this.surface.dpr;
+		const width = this.surface.physicalWidth;
+		const height = this.surface.physicalHeight;
+		const placement = rec.clips && node.type !== "editable-text" && node.firstChild !== null ? placeLayer(ctx, rec, dpr, width, height) : null;
+		let layer = layers.get(node);
+		if (placement === null) {
+			layers.drop(node);
+			return false;
+		}
+		if (layer !== void 0 && !layers.fits(layer, placement)) {
+			layers.drop(node);
+			layer = void 0;
+		}
+		const volatileBefore = this.volatileDraws;
+		const liftedBefore = this.liftedPass.length;
+		if (layer === void 0) {
+			if (!layers.wants(node)) return false;
+			const created = layers.create(node, placement, rec);
+			if (created === null) return false;
+			layer = created;
+			this.paintLayer(layer, null, node, rec, context);
+		} else {
+			const strips = layers.shift(layer, rec);
+			if (strips === null) {
+				layers.drop(node);
+				return false;
+			}
+			for (const strip of strips) this.paintLayer(layer, strip, node, rec, context);
+		}
+		layer.used = true;
+		layers.stats.composited++;
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.drawImage(layer.front, placement.x, placement.y, layer.width, layer.height);
+		ctx.restore();
+		if (this.volatileDraws !== volatileBefore || this.liftedPass.length !== liftedBefore) layers.refuse(node);
+		return true;
+	}
+	/**
+	* Draws the container's children into its layer: the whole of it
+	* when `strip` is null, otherwise only the strip a scroll exposed.
+	*
+	* A strip is clipped, not culled. The walk visits exactly the nodes a
+	* direct draw of the viewport would, and the clip keeps their pixels
+	* inside the strip; culling to the strip instead would miss a shadow,
+	* a focus ring or overflowing text reaching into it from a node whose
+	* box does not, and leave a seam where a direct draw has none. What a
+	* 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) {
+		const lctx = layer.frontContext;
+		lctx.save();
+		if (strip !== null) {
+			lctx.setTransform(1, 0, 0, 1, 0, 0);
+			lctx.beginPath();
+			lctx.rect(strip.x, strip.y, strip.width, strip.height);
+			lctx.clip();
+		}
+		const dpr = layer.dpr;
+		lctx.setTransform(dpr, 0, 0, dpr, layer.offsetX, layer.offsetY);
+		lctx.translate(-layer.scrollX, -layer.scrollY);
+		const savedCullX = this.cullX;
+		const savedCullY = this.cullY;
+		const savedCullWidth = this.cullWidth;
+		const savedCullHeight = this.cullHeight;
+		this.cullX = rec.x + layer.scrollX;
+		this.cullY = rec.y + layer.scrollY;
+		this.cullWidth = rec.width;
+		this.cullHeight = rec.height;
+		this.layerDepth++;
+		try {
+			this.renderChildren(node, context, lctx, true);
+		} finally {
+			this.layerDepth--;
+			this.cullX = savedCullX;
+			this.cullY = savedCullY;
+			this.cullWidth = savedCullWidth;
+			this.cullHeight = savedCullHeight;
+			lctx.restore();
+		}
+	}
 	applyTransform(ctx, rec, paint) {
 		const transform = paint.transform;
 		const originX = rec.x + transform.x;
@@ -18159,6 +18871,7 @@ var Canvas2DRenderer = class {
 	paintScrollbars(ctx, rec, now) {
 		const remaining = rec.scrollbarVisibleUntil - now;
 		if (remaining <= 0) return;
+		this.volatileDraws++;
 		ctx.fillStyle = `rgba(128,128,128,${(Math.min(1, remaining / 350) * .55).toFixed(3)})`;
 		const { vertical, horizontal } = scrollbarThumbs(rec);
 		for (const bar of [vertical, horizontal]) {
@@ -18300,6 +19013,6 @@ function createCanvasSurface(host) {
 	return new CanvasSurface(host);
 }
 //#endregion
-export { prepareInputSurface as $, UiBinding as $a, defaultTextStyle as $i, EditableTextModel as $n, minmax as $r, DEFAULT_FONT_WEIGHT as $t, accumulatedOffsetTo as A, UiVisualState as Aa, themeExtension as Ai, setLinkHover as An, validateStates as Ar, proportionalFontMetrics as At, parseFlexDirection as B, UiInputEvent as Ba, spacingEqual as Bi, nextCaretToggle as Bn, transformsEqual as Br, layoutTextLines as Bt, describeLength as C, UiNode as Ca, lightTheme as Ci, isNodeTabStop as Cn, UI_ROLES as Cr, selectionRectsIn as Ct, formatNumber as D, resetOverrideWarnings as Da, defineThemeExtension as Di, linkHoverOf as Dn, normalizeStates as Dr, spannedRunsFor as Dt, formatExplanation as E, overrideSources as Ea, withDensity as Ei, hasTextLinks as En, isUiSemanticState as Er, ParagraphTextMeasurer as Et, constraintsEqual as F, MOUSE_POINTER as Fa, raiseContrast as Fi, editorFor as Fn, pathValuesEqual as Fr, applyCanvasTextStyle as Ft, MainAxisAlignment as G, UiSelectionChangeEvent as Ga, boxShadowArraysEqual as Gi, caretRectFor as Gn, radialGradient as Gr, textRunBackgrounds as Gt, sizeGridTracks as H, UiPasteEvent as Ha, defaultShadows as Hi, resolveColorValue as Hn, gradientPaint as Hr, runFontString as Ht, tightenConstraints as I, UiBeforeInputEvent as Ia, relativeLuminance as Ii, editorOf as In, UiTransforms as Ir, buildFontString as It, parseMainAxisAlignment as J, UiWheelEvent as Ja, isShapeName as Ji, lineLimit as Jn, fr as Jr, clearFontStacks as Jt, parseAlignContent as K, UiTextChangeEvent as Ka, boxShadowsEqual as Ki, lineIndexAtY as Kn, validateGradient as Kr, textRunDecorations as Kt, MAX_MEASURES_PER_CHILD as L, UiEventType as La, densityFactors as Li, isEditableNode as Ln, parseTransform as Lr, createCanvasTextStyle as Lt, LayoutRecord as M, hasVisualState as Ma, withThemeExtension as Mi, CARET_WIDTH as Mn, validateSubgrid as Mr, detectEditingPlatform as Mt, Constraints as N, visualState as Na, contrastRatio as Ni, EDITOR_PROP as Nn, inputsEqual as Nr, isPrintable as Nt, labelNode as O, writeDeclaredProperty as Oa, hasThemeExtension as Oi, linkOf as On, statesEqual as Or, ELLIPSIS as Ot, clampSize as P, visualStatesEqual as Pa, highContrastColors as Pi, caretVisibleAt as Pn, paintValuesEqual as Pr, EditableLayout as Pt, pointerDeviceOf as Q, DirtyFlags as Qa, typographyEqual as Qi, selectionRects as Qn, isPercentLength as Qr, DEFAULT_FONT_SIZE as Qt, isLayoutProtocol as R, UiFocusEvent as Ra, defaultSpacing as Ri, isMultiline as Rn, transform as Rr, drawText as Rt, SCROLLBAR_LINGER_MS as S, UiEnvironment as Sa, darkTheme as Si, isNodeSelectable as Sn, UiProperties as Sr, paragraphGeometryFrom as St, formatConstraints as T, clearOverrideProperty as Ta, withContrast as Ti, clearLinkHover as Tn, isUiRole as Tr, CharacterCountTextMeasurer as Tt, AlignContent as U, UiPinchEvent as Ua, shadowsEqual as Ui, isVideoSurface as Un, gradientsEqual as Ur, spanOf as Ut, placeGridItems as V, UiKeyboardEvent as Va, spacingSteps as Vi, syncEditorValue as Vn, MAX_GRADIENT_STOPS as Vr, runCanvasStyleInto as Vt, CrossAxisAlignment as W, UiPointerEvent as Wa, boxShadow as Wi, videoFrameSize as Wn, linearGradient as Wr, textMeasureRequest as Wt, UiPlatformAdapter as X, wheelDeltaYOf as Xa, defaultTypography as Xi, offsetAtX as Xn, isFrLength as Xr, registerFontStack as Xt, CanvasPlatformSurface as Y, noKeyModifiers as Ya, shapesEqual as Yi, offsetAtPoint as Yn, isAutoLength as Yr, fontStackFor as Yt, capturePointer as Z, UiNodeType as Za, isTypographyRole as Zi, offsetForVerticalMove as Zn, isMinMaxTrack as Zr, DEFAULT_FONT_FAMILY as Zt, LABEL_PADDING_X as _, parseColor as _a, observeViewportInsets as _i, selectionRangeOf as _n, inheritedPropertyFlags as _r, scrollbarZoneAt as _t, PaintPictureCache as a, textContentOf as aa, borderRadiusCorners as ai, normalizeTextAlign as an, previousGraphemeStart as ar, UiWheelController as at, LayoutEngine as b, createEnvironmentKey as ba, containerBands as bi, isNodeHitTestable as bn, propertyIsInherited as br, offsetAtPointIn as bt, EMPTY_RECORDING as c, colorsEqualPalette as ca, borderRadiusValuesEqual as ci, DEFAULT_LINE_HEIGHT_FACTOR as cn, resolveBoolean as cr, UiPointerController as ct, tracePathData as d, UiBasicColors as da, defineProperty as di, matchRangesOf as dn, resolvePropertyByName as dr, SCROLLBAR_HOVER_ZONE as dt, editableSpansOf as ea, percent as ei, DEFAULT_TEXT_COLOR as en, graphemeBoundaries as er, touchActionFor as et, ScaledImageCache as f, colorToHex as fa, propertyValuesEqual as fi, setMatchRanges as fn, resolveString as fr, SCROLLBAR_INSET as ft, paintsAfterChildren as g, normalizeColor as ga, noInsets as gi, selectableTextOf as gn, getPropertyNames as gr, scrollbarThumbs as gt, hasDecorationPhase as h, colorsEqual as ha, insetsEqual as hi, selectableTextNodes as hn, findPropertyDefinition as hr, scrollbarThumb as ht, traceRoundedRect as i, spannedTextOf as ia, borderRadius as ii, isPaintVisible as in, nextWordEnd as ir, UiPinchRecognizer as it, contentOffset as j, defaultVisualState as ja, themeExtensionsEqual as ji, CARET_BLINK_MS as jn, UI_SUBGRID_AXES as jr, commandForKey as jt, withOverrideSource as k, writeOverrideProperty as ka, noThemeExtensions as ki, linkRunAtPointIn as kn, validateRole as kr, layoutParagraph as kt, PaintRecorder as l, darkColors as la, normalizeBorderRadius as li, TEXT_MATCHES_PROP as ln, resolveNumber as lr, UiFocusManager as lt, decorationRect as m, colorValuesEqual as ma, UiInsetRegistry as mi, clearSelectionRange as mn, closestPropertyName as mr, SCROLLBAR_THICKNESS as mt, createCanvasSurface as n, resolvedSpansOf as na, resolveLength as ni, computeObjectFitRect as nn, lineStartAt as nr, UiTouchScroller as nt, paintPictures as o, textSpansEqual as oa, borderRadiusEqual as oi, normalizeVerticalAlign as on, previousWordStart as or, isScrollContainer as ot, decorationColor as p, colorToRgba as pa, UiEnvironmentKeys as pi, TEXT_SELECTION_PROP as pn, UiGraph as pr, SCROLLBAR_MIN_THUMB as pt, parseCrossAxisAlignment as q, UiWheelDeltaMode as qa, defaultShapes as qi, lineIndexForOffset as qn, auto as qr, bumpFontStack as qt, Canvas2DRenderer as r, spanAtOffset as ra, UiBorderRadiuses as ri, createPaintState as rn, nextGraphemeEnd as rr, UiGestureRecognizer as rt, PaintTarget as s, textStylesEqual as sa, borderRadiusIsZero as si, resolvePaintState as sn, wordRangeAt as sr, UiKeyboardController as st, CanvasSurface as t, flattenTextSpans as ta, repeat as ti, colorToCss as tn, lineEndAt as tr, UiEditingController as tt, replayPaint as u, lightColors as ua, uniformBorderRadius as ui, clearMatchRanges as un, resolveProperty as ur, UiHitTester as ut, drawOverlayShapes as v, rgb8 as va, UiContainerSizeSource as vi, setSelectionRange as vn, inheritedPropertyNames as vr, UiInputDispatcher as vt, describeOverrides as w, DirtyNodeSet as wa, themesEqual as wi, resolveCursor as wn, UI_SEMANTIC_STATES as wr, wordRangeIn as wt, SCROLLBAR_FADE_MS as x, findEnvironmentKey as xa, unknownContainerSize as xi, isNodeInert as xn, propertyValuesEqualByName as xr, paragraphGeometry as xt, labelOrigin as y, rgba as ya, bandOf as yi, isNodeFocusable as yn, propertyEffects as yr, hasDrawnText as yt, FlexDirection as z, UiGestureEvent as za, scaleSpacing as zi, isReadOnly as zn, transformIsIdentity as zr, fillTextRects as zt };
+export { prepareInputSurface as $, UiNodeType as $a, isTypographyRole as $i, offsetForVerticalMove as $n, isMinMaxTrack as $r, DEFAULT_FONT_FAMILY as $t, accumulatedOffsetTo as A, writeDeclaredProperty as Aa, hasThemeExtension as Ai, linkOf as An, statesEqual as Ar, ELLIPSIS as At, parseFlexDirection as B, UiFocusEvent as Ba, defaultSpacing as Bi, isMultiline as Bn, transform as Br, drawText as Bt, describeLength as C, findEnvironmentKey as Ca, unknownContainerSize as Ci, isNodeInert as Cn, propertyValuesEqualByName as Cr, paragraphGeometry as Ct, formatNumber as D, clearOverrideProperty as Da, withContrast as Di, clearLinkHover as Dn, isUiRole as Dr, CharacterCountTextMeasurer as Dt, formatExplanation as E, DirtyNodeSet as Ea, themesEqual as Ei, resolveCursor as En, UI_SEMANTIC_STATES as Er, wordRangeIn as Et, constraintsEqual as F, visualState as Fa, contrastRatio as Fi, EDITOR_PROP as Fn, inputsEqual as Fr, isPrintable as Ft, MainAxisAlignment as G, UiPinchEvent as Ga, shadowsEqual as Gi, isVideoSurface as Gn, gradientsEqual as Gr, spanOf as Gt, sizeGridTracks as H, UiInputEvent as Ha, spacingEqual as Hi, nextCaretToggle as Hn, transformsEqual as Hr, layoutTextLines as Ht, tightenConstraints as I, visualStatesEqual as Ia, highContrastColors as Ii, caretVisibleAt as In, paintValuesEqual as Ir, EditableLayout as It, parseMainAxisAlignment as J, UiTextChangeEvent as Ja, boxShadowsEqual as Ji, lineIndexAtY as Jn, validateGradient as Jr, textRunDecorations as Jt, parseAlignContent as K, UiPointerEvent as Ka, boxShadow as Ki, videoFrameSize as Kn, linearGradient as Kr, textMeasureRequest as Kt, MAX_MEASURES_PER_CHILD as L, MOUSE_POINTER as La, raiseContrast as Li, editorFor as Ln, pathValuesEqual as Lr, applyCanvasTextStyle as Lt, LayoutRecord as M, UiVisualState as Ma, themeExtension as Mi, setLinkHover as Mn, validateStates as Mr, proportionalFontMetrics as Mt, Constraints as N, defaultVisualState as Na, themeExtensionsEqual as Ni, CARET_BLINK_MS as Nn, UI_SUBGRID_AXES as Nr, commandForKey as Nt, labelNode as O, overrideSources as Oa, withDensity as Oi, hasTextLinks as On, isUiSemanticState as Or, ParagraphTextMeasurer as Ot, clampSize as P, hasVisualState as Pa, withThemeExtension as Pi, CARET_WIDTH as Pn, validateSubgrid as Pr, detectEditingPlatform as Pt, pointerDeviceOf as Q, wheelDeltaYOf as Qa, defaultTypography as Qi, offsetAtX as Qn, isFrLength as Qr, registerFontStack as Qt, isLayoutProtocol as R, UiBeforeInputEvent as Ra, relativeLuminance as Ri, editorOf as Rn, UiTransforms as Rr, buildFontString as Rt, SCROLLBAR_LINGER_MS as S, createEnvironmentKey as Sa, containerBands as Si, isNodeHitTestable as Sn, propertyIsInherited as Sr, offsetAtPointIn as St, formatConstraints as T, UiNode as Ta, lightTheme as Ti, isNodeTabStop as Tn, UI_ROLES as Tr, selectionRectsIn as Tt, AlignContent as U, UiKeyboardEvent as Ua, spacingSteps as Ui, syncEditorValue as Un, MAX_GRADIENT_STOPS as Ur, runCanvasStyleInto as Ut, placeGridItems as V, UiGestureEvent as Va, scaleSpacing as Vi, isReadOnly as Vn, transformIsIdentity as Vr, fillTextRects as Vt, CrossAxisAlignment as W, UiPasteEvent as Wa, defaultShadows as Wi, resolveColorValue as Wn, gradientPaint as Wr, runFontString as Wt, UiPlatformAdapter as X, UiWheelEvent as Xa, isShapeName as Xi, lineLimit as Xn, fr as Xr, clearFontStacks as Xt, CanvasPlatformSurface as Y, UiWheelDeltaMode as Ya, defaultShapes as Yi, lineIndexForOffset as Yn, auto as Yr, bumpFontStack as Yt, capturePointer as Z, noKeyModifiers as Za, shapesEqual as Zi, offsetAtPoint as Zn, isAutoLength as Zr, fontStackFor as Zt, LABEL_PADDING_X as _, colorsEqual as _a, insetsEqual as _i, selectableTextNodes as _n, findPropertyDefinition as _r, scrollbarThumb as _t, PaintPictureCache as a, spanAtOffset as aa, UiBorderRadiuses as ai, createPaintState as an, nextGraphemeEnd as ar, UiWheelController as at, LayoutEngine as b, rgb8 as ba, UiContainerSizeSource as bi, setSelectionRange as bn, inheritedPropertyNames as br, UiInputDispatcher as bt, EMPTY_RECORDING as c, textSpansEqual as ca, borderRadiusEqual as ci, normalizeVerticalAlign as cn, previousWordStart as cr, UiPointerController as ct, tracePathData as d, darkColors as da, normalizeBorderRadius as di, TEXT_MATCHES_PROP as dn, resolveNumber as dr, SCROLLBAR_HOVER_ZONE as dt, typographyEqual as ea, isPercentLength as ei, DEFAULT_FONT_SIZE as en, DirtyFlags as eo, selectionRects as er, touchActionFor as et, ScaledImageCache as f, lightColors as fa, uniformBorderRadius as fi, clearMatchRanges as fn, resolveProperty as fr, SCROLLBAR_INSET as ft, paintsAfterChildren as g, colorValuesEqual as ga, UiInsetRegistry as gi, clearSelectionRange as gn, closestPropertyName as gr, scrollRange as gt, hasDecorationPhase as h, colorToRgba as ha, UiEnvironmentKeys as hi, TEXT_SELECTION_PROP as hn, UiGraph as hr, scrollLeaderOf as ht, traceRoundedRect as i, resolvedSpansOf as ia, resolveLength as ii, computeObjectFitRect as in, lineStartAt as ir, UiPinchRecognizer as it, contentOffset as j, writeOverrideProperty as ja, noThemeExtensions as ji, linkRunAtPointIn as jn, validateRole as jr, layoutParagraph as jt, withOverrideSource as k, resetOverrideWarnings as ka, defineThemeExtension as ki, linkHoverOf as kn, normalizeStates as kr, spannedRunsFor as kt, PaintRecorder as l, textStylesEqual as la, borderRadiusIsZero as li, resolvePaintState as ln, wordRangeAt as lr, UiFocusManager as lt, decorationRect as m, colorToHex as ma, propertyValuesEqual as mi, setMatchRanges as mn, resolveString as mr, SCROLLBAR_THICKNESS as mt, createCanvasSurface as n, editableSpansOf as na, percent as ni, DEFAULT_TEXT_COLOR as nn, graphemeBoundaries as nr, UiTouchScroller as nt, paintPictures as o, spannedTextOf as oa, borderRadius as oi, isPaintVisible as on, nextWordEnd as or, isScrollContainer as ot, decorationColor as p, UiBasicColors as pa, defineProperty as pi, matchRangesOf as pn, resolvePropertyByName as pr, SCROLLBAR_MIN_THUMB as pt, parseCrossAxisAlignment as q, UiSelectionChangeEvent as qa, boxShadowArraysEqual as qi, caretRectFor as qn, radialGradient as qr, textRunBackgrounds as qt, Canvas2DRenderer as r, flattenTextSpans as ra, repeat as ri, colorToCss as rn, lineEndAt as rr, UiGestureRecognizer as rt, PaintTarget as s, textContentOf as sa, borderRadiusCorners as si, normalizeTextAlign as sn, previousGraphemeStart as sr, UiKeyboardController as st, CanvasSurface as t, defaultTextStyle as ta, minmax as ti, DEFAULT_FONT_WEIGHT as tn, UiBinding as to, EditableTextModel as tr, UiEditingController as tt, replayPaint as u, colorsEqualPalette as ua, borderRadiusValuesEqual as ui, DEFAULT_LINE_HEIGHT_FACTOR as un, resolveBoolean as ur, UiHitTester as ut, drawOverlayShapes as v, normalizeColor as va, noInsets as vi, selectableTextOf as vn, getPropertyNames as vr, scrollbarThumbs as vt, describeOverrides as w, UiEnvironment as wa, darkTheme as wi, isNodeSelectable as wn, UiProperties as wr, paragraphGeometryFrom as wt, SCROLLBAR_FADE_MS as x, rgba as xa, bandOf as xi, isNodeFocusable as xn, propertyEffects as xr, hasDrawnText as xt, labelOrigin as y, parseColor as ya, observeViewportInsets as yi, selectionRangeOf as yn, inheritedPropertyFlags as yr, scrollbarZoneAt as yt, FlexDirection as z, UiEventType as za, densityFactors as zi, isEditableNode as zn, parseTransform as zr, createCanvasTextStyle as zt };
 
-//# sourceMappingURL=CanvasSurface-BR7hECHm.js.map
+//# sourceMappingURL=CanvasSurface-BMOmE_dD.js.map