gesso-core 0.3.0 → 0.4.1

package/dist/{CanvasSurface-ifHkg0-g.js → CanvasSurface-CaNWsAlm.js}

@@ -188,6 +188,16 @@ let UiEventType = /* @__PURE__ */ function(UiEventType) {
 	*/
 	UiEventType["Paste"] = "paste";
 	UiEventType["Click"] = "click";
+	/**
+	* A second Click on the same node, soon enough after the first and
+	* close enough to it.
+	*
+	* Dispatched after that second Click rather than instead of it, as
+	* the DOM's `dblclick` is: a listener that answers a click has
+	* already answered both by the time this arrives, which is what lets
+	* a double click on a cell select it and then do more.
+	*/
+	UiEventType["DoubleClick"] = "doubleclick";
 	UiEventType["LongPress"] = "longpress";
 	UiEventType["DragStart"] = "dragstart";
 	UiEventType["DragMove"] = "dragmove";
@@ -3937,6 +3947,20 @@ const UiProperties = {
 		inherited: false,
 		affects: L
 	}),
+	/**
+	* A point to be placed beside, as though it were an anchor of no
+	* size: where a context menu was asked for. Relative to the
+	* containing block, like `top` and `left`, and with `placement` the
+	* same flip and clamp an anchored node gets — so a menu opened near
+	* the bottom edge opens upward instead of off the screen. Ignored
+	* when `anchor` is set.
+	*/
+	anchorPoint: defineProperty({
+		name: "anchorPoint",
+		defaultValue: void 0,
+		inherited: false,
+		affects: L
+	}),
 	/** Gap between an anchored node and its anchor. */
 	anchorOffset: defineProperty({
 		name: "anchorOffset",
@@ -4512,6 +4536,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.
 	*/
@@ -9435,6 +9465,15 @@ var UiPointerController = class {
 	onHoverChange;
 	editing;
 	selection;
+	now;
+	/**
+	* The last Click, for telling whether the next one makes a pair.
+	*
+	* Only a Click counts, not a press: a press that became a drag, or
+	* was cancelled, is not half of a double click, and a release that
+	* followed one would otherwise be read as the second half of it.
+	*/
+	lastClick = null;
 	hoverNode = null;
 	downTarget = null;
 	downX = 0;
@@ -9461,6 +9500,7 @@ var UiPointerController = class {
 		this.onHoverChange = options.onHoverChange ?? null;
 		this.editing = options.editing;
 		this.selection = options.selection;
+		this.now = options.now ?? defaultClock$2;
 	}
 	/** The node currently under the pointer, or null over empty space. */
 	/** Where the pointer was last seen, in canvas space; null before it has been. */
@@ -9597,12 +9637,39 @@ var UiPointerController = class {
 			if (dx <= slop && dy <= slop) {
 				const click = new UiPointerEvent("click", x, y, buttons, modifiers, pointer);
 				this.dispatcher.dispatch(click, target);
-			}
-		}
+				this.countClick(target, x, y, buttons, modifiers, pointer);
+			} else this.lastClick = null;
+		} else this.lastClick = null;
 		this.releaseHover(x, y, modifiers, pointer);
 		return event;
 	}
 	/**
+	* Pairs this Click with the one before it, and dispatches a
+	* DoubleClick when they make a pair.
+	*
+	* A pair is two Clicks on the same node within `MULTI_CLICK_MS` and
+	* `MULTI_CLICK_SLOP` of each other — the window the editing and
+	* selection controllers already use for a word, so a double click
+	* means the same thing on a label as it does in a field. The pair is
+	* spent once it has fired: a third Click starts the next pair rather
+	* than making a second DoubleClick out of the second and third.
+	*/
+	countClick(target, x, y, buttons, modifiers, pointer) {
+		const now = this.now();
+		const last = this.lastClick;
+		if (!(last !== null && last.node === target && now - last.at <= MULTI_CLICK_MS$1 && Math.abs(last.x - x) <= MULTI_CLICK_SLOP$1 && Math.abs(last.y - y) <= MULTI_CLICK_SLOP$1)) {
+			this.lastClick = {
+				node: target,
+				x,
+				y,
+				at: now
+			};
+			return;
+		}
+		this.lastClick = null;
+		this.dispatcher.dispatch(new UiPointerEvent("doubleclick", x, y, buttons, modifiers, pointer), target);
+	}
+	/**
 	* Aborts the active press: dispatches PointerCancel to the pressed
 	* node and clears press state so no Click is synthesized.
 	*/
@@ -9754,6 +9821,12 @@ var UiPointerController = class {
 function isSecondaryButton(buttons) {
 	return buttons === 2;
 }
+/** How long, and how far, a second Click may be from the first and still pair with it. */
+const MULTI_CLICK_MS$1 = 500;
+const MULTI_CLICK_SLOP$1 = 4;
+function defaultClock$2() {
+	return typeof performance !== "undefined" ? performance.now() : Date.now();
+}
 //#endregion
 //#region src/input/UiKeyboardController.ts
 /**
@@ -9808,13 +9881,19 @@ var UiKeyboardController = class {
 		this.find = options.find;
 		this.activation = options.activation;
 	}
-	keyDown(key, modifiers = noKeyModifiers()) {
+	/**
+	* `textFollows` says whether the shell will send the key's text on its
+	* own, as a `beforeinput`. False — a key that reached the canvas while
+	* an editable held the focus — has the key inserted here, whatever the
+	* text source; absent leaves it to the editing controller's setting.
+	*/
+	keyDown(key, modifiers = noKeyModifiers(), textFollows) {
 		if (!MODIFIER_KEYS.has(key)) this.focusManager.noteInput("keyboard");
 		const event = new UiKeyboardEvent("keydown", key, modifiers);
 		const focused = this.focusManager.focusedNode;
 		const target = focused ?? this.root();
 		this.dispatcher.dispatch(event, target);
-		if (!event.defaultPrevented && focused !== null && this.editing !== void 0 && this.editing.handleKey(focused, key, modifiers)) {
+		if (!event.defaultPrevented && focused !== null && this.editing !== void 0 && this.editing.handleKey(focused, key, modifiers, textFollows === false ? true : void 0)) {
 			event.preventDefault();
 			return event;
 		}
@@ -9894,6 +9973,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";
 }
@@ -10026,16 +10114,16 @@ 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 state = isScrollContainer(node) ? this.scrollSink.containerState(node) : 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,
@@ -10074,9 +10162,14 @@ 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 state = isScrollContainer(node) ? this.scrollSink.containerState(node) : 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) {
@@ -10089,7 +10182,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);
@@ -10353,6 +10461,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`,
@@ -10432,6 +10545,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);
@@ -10486,8 +10600,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);
 	}
@@ -10808,9 +10924,10 @@ var UiEditingController = class {
 	* when the key was an editing command, so the caller can mark the
 	* event handled.
 	*/
-	handleKey(node, key, modifiers) {
+	/** `textFromKeys` overrides the controller's own setting for this one key; see `UiKeyboardController.keyDown`. */
+	handleKey(node, key, modifiers, textFromKeys = this.textFromKeys) {
 		if (!isEditableNode(node)) return false;
-		const command = commandForKey(key, modifiers, this.platform, this.textFromKeys);
+		const command = commandForKey(key, modifiers, this.platform, textFromKeys);
 		if (command === null) return false;
 		return this.execute(node, command);
 	}
@@ -12712,7 +12829,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.
@@ -12727,7 +12844,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,
@@ -12766,7 +12883,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)}`);
@@ -12776,29 +12893,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,
@@ -12816,8 +12933,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)}`);
@@ -12837,10 +12954,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";
 }
@@ -12858,7 +12975,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) {
@@ -13270,6 +13387,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;
@@ -15183,6 +15317,7 @@ var LayoutEngine = class {
 			};
 			this.resolveLayoutProps(child, cRec);
 			const anchor = child.properties.get("anchor");
+			const point = child.properties.get("anchorPoint");
 			if (anchor !== void 0 && anchor !== null) {
 				this.anchoredNodes.add(child);
 				this.trackAnchor(child, anchor);
@@ -15191,6 +15326,12 @@ var LayoutEngine = class {
 					this.placeAnchored(child, cRec, anchorRec, anchor, block);
 					return;
 				}
+			} else if (point !== void 0 && point !== null) {
+				this.anchoredNodes.delete(child);
+				this.trackAnchor(child, null);
+				this.measure(child, new Constraints(0, Math.max(0, block.width), 0, Math.max(0, block.height)));
+				this.placeBeside(child, cRec, block.x + point.x, block.y + point.y, 0, 0, block);
+				return;
 			} else {
 				this.anchoredNodes.delete(child);
 				this.trackAnchor(child, null);
@@ -15199,9 +15340,11 @@ var LayoutEngine = class {
 			const marginV = cRec.marginTop + cRec.marginBottom;
 			const availableWidth = Math.max(0, block.width - (cRec.left ?? 0) - (cRec.right ?? 0) - marginH);
 			const availableHeight = Math.max(0, block.height - (cRec.top ?? 0) - (cRec.bottom ?? 0) - marginV);
-			const tightWidth = cRec.left !== void 0 && cRec.right !== void 0 && this.lengthProp(child, "width", block.width) === void 0;
-			const tightHeight = cRec.top !== void 0 && cRec.bottom !== void 0 && this.lengthProp(child, "height", block.height) === void 0;
-			this.measure(child, new Constraints(tightWidth ? availableWidth : 0, availableWidth, tightHeight ? availableHeight : 0, availableHeight));
+			const explicitWidth = this.lengthProp(child, "width", block.width) !== void 0;
+			const explicitHeight = this.lengthProp(child, "height", block.height) !== void 0;
+			const tightWidth = cRec.left !== void 0 && cRec.right !== void 0 && !explicitWidth;
+			const tightHeight = cRec.top !== void 0 && cRec.bottom !== void 0 && !explicitHeight;
+			this.measure(child, new Constraints(tightWidth ? availableWidth : 0, explicitWidth ? Infinity : availableWidth, tightHeight ? availableHeight : 0, explicitHeight ? Infinity : availableHeight));
 			const width = cRec.measuredWidth;
 			const height = cRec.measuredHeight;
 			let x;
@@ -15229,18 +15372,25 @@ var LayoutEngine = class {
 	*/
 	placeAnchored(child, cRec, anchorRec, anchor, block) {
 		this.measure(child, new Constraints(0, Math.max(0, block.width), 0, Math.max(0, block.height)));
-		const width = cRec.measuredWidth;
-		const height = cRec.measuredHeight;
-		const gap = this.numberProp(child, "anchorOffset") ?? 0;
-		const { side, align } = this.parsePlacement(child.properties.get("placement"));
 		const scrollAnchor = this.scrollOffsetOf(anchor);
 		const scrollChild = this.scrollOffsetOf(child);
 		const stickyAnchor = this.stickyOffsetOf(anchor);
 		const stickyChild = this.stickyOffsetOf(child);
 		const ax = anchorRec.x + stickyAnchor.x - scrollAnchor.x + scrollChild.x - stickyChild.x;
 		const ay = anchorRec.y + stickyAnchor.y - scrollAnchor.y + scrollChild.y - stickyChild.y;
-		const aw = anchorRec.width;
-		const ah = anchorRec.height;
+		this.placeBeside(child, cRec, ax, ay, anchorRec.width, anchorRec.height, block);
+	}
+	/**
+	* Places a measured node beside a box — an anchor's, or a point's of
+	* no size — flipping to the opposite side when the named one would
+	* overflow the block and the other has more room, and clamping along
+	* the side to stay inside it.
+	*/
+	placeBeside(child, cRec, ax, ay, aw, ah, block) {
+		const width = cRec.measuredWidth;
+		const height = cRec.measuredHeight;
+		const gap = this.numberProp(child, "anchorOffset") ?? 0;
+		const { side, align } = this.parsePlacement(child.properties.get("placement"));
 		const vertical = side === "top" || side === "bottom";
 		let resolvedSide = side;
 		if (vertical) {
@@ -17395,6 +17545,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
@@ -17414,7 +17572,8 @@ var PaintPictureCache = class {
 	stats = {
 		recorded: 0,
 		rasterized: 0,
-		resolved: 0
+		resolved: 0,
+		direct: 0
 	};
 	constructor(createCanvas = offscreenPaintCanvas) {
 		this.createCanvas = createCanvas;
@@ -17427,6 +17586,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
@@ -17438,39 +17598,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.
@@ -17517,6 +17745,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 {
@@ -17579,6 +17837,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.
@@ -17611,6 +18173,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;
@@ -17664,8 +18229,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;
@@ -17679,10 +18268,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();
@@ -17694,9 +18285,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
@@ -17747,13 +18341,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,6 +18448,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
@@ -17889,9 +18486,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
@@ -18016,6 +18611,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) {
@@ -18041,6 +18637,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;
@@ -18069,6 +18760,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]) {
@@ -18212,4 +18904,4 @@ function createCanvasSurface(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 };
 
-//# sourceMappingURL=CanvasSurface-ifHkg0-g.js.map
+//# sourceMappingURL=CanvasSurface-CaNWsAlm.js.map