gesso-core 0.2.1 → 0.3.0

package/dist/{CanvasSurface-5dU-U3qQ.js → CanvasSurface-ifHkg0-g.js}

@@ -161,6 +161,32 @@ let UiEventType = /* @__PURE__ */ function(UiEventType) {
 	UiEventType["BeforeInput"] = "beforeinput";
 	/** An editable's text changed. */
 	UiEventType["Input"] = "input";
+	/**
+	* An editable's selection moved, whether or not its text changed.
+	*
+	* Separate from `Input` because the caret moves without the text on
+	* every arrow key, every click into the text and every
+	* select-all — and something has to be able to follow it. A formula
+	* editor that colours the bracket beside the caret has no other way
+	* to know it moved.
+	*
+	* Fires *after* `Input` when a change did both, so a listener that
+	* reads the text sees the new one. It is skipped entirely when the
+	* selection did not actually move, so holding a key that is already
+	* at the end of the text is silent.
+	*/
+	UiEventType["SelectionChange"] = "selectionchange";
+	/**
+	* Text arrived from the system clipboard with nothing editable
+	* focused.
+	*
+	* A paste with a caret in it belongs to the text and never reaches
+	* here. This is the other case: a surface that owns a selection of
+	* its own — a grid with a rectangle of cells picked out — and is the
+	* only thing that knows what a block of text means to it.
+	* `preventDefault()` says it was taken.
+	*/
+	UiEventType["Paste"] = "paste";
 	UiEventType["Click"] = "click";
 	UiEventType["LongPress"] = "longpress";
 	UiEventType["DragStart"] = "dragstart";
@@ -406,6 +432,21 @@ var UiBeforeInputEvent = class extends UiInputEvent {
 * An editable node's text changed: the new value and the selection
 * after the change. Bubbles, so a form can watch all its fields.
 */
+/**
+* Text from the system clipboard, offered to whatever holds focus.
+*
+* Carries the text rather than a clipboard handle, because a render
+* worker has neither a clipboard nor a window: the shell reads it and
+* sends it across, which is the same path `ShellService.copyText`
+* takes in the other direction.
+*/
+var UiPasteEvent = class extends UiInputEvent {
+	text;
+	constructor(text) {
+		super("paste");
+		this.text = text;
+	}
+};
 var UiTextChangeEvent = class extends UiInputEvent {
 	value;
 	selectionStart;
@@ -418,6 +459,36 @@ var UiTextChangeEvent = class extends UiInputEvent {
 	}
 };
 /**
+* An editable's selection moved.
+*
+* Carries the text as well as the offsets, because every use of this
+* is "what is under the caret" and the answer needs both — and
+* reading the text back off the model afterwards is a second source
+* of truth that can disagree by a frame.
+*
+* `start` and `end` are ordered; `anchor` and `focus` are where the
+* selection was begun and where the caret now is, which is the pair
+* that says which way it was dragged.
+*/
+var UiSelectionChangeEvent = class extends UiInputEvent {
+	value;
+	start;
+	end;
+	anchor;
+	focus;
+	constructor(value, start, end, anchor, focus) {
+		super("selectionchange");
+		this.value = value;
+		this.start = start;
+		this.end = end;
+		this.anchor = anchor;
+		this.focus = focus;
+	}
+	get collapsed() {
+		return this.start === this.end;
+	}
+};
+/**
 * Wheel scroll input event.
 *
 * `deltaX`/`deltaY` are the scroll deltas in canvas pixels produced
@@ -1615,6 +1686,27 @@ function textContentOf(node) {
 function resolvedSpansOf(node) {
 	return spannedTextOf(node)?.spans ?? EMPTY_SPANS;
 }
+/**
+* The runs an *editable* node styles its own text with.
+*
+* An editable's paragraph is the user's, held by its model rather
+* than by a property — so unlike a `Text`, its runs do not supply the
+* text, they only describe it. `spans` on an editable is presentation
+* over a string somebody is typing.
+*
+* Which is why this checks. Every offset the editor works in — the
+* caret, the selection, the hit test that turns a click into a text
+* position — is an offset into the model's string. Runs describing a
+* *different* string would put the glyphs somewhere the caret does
+* not agree with, and the field would look subtly, unfixably wrong.
+* When they disagree the text is drawn unstyled, which is a frame of
+* plain colour rather than a frame of nonsense, and corrects itself
+* as soon as the application catches up.
+*/
+function editableSpansOf(node, text) {
+	const spanned = spannedTextOf(node);
+	return spanned !== void 0 && spanned.text === text ? spanned.spans : EMPTY_SPANS;
+}
 /** The span covering an offset, or undefined where no run does. */
 function spanAtOffset(spans, offset) {
 	for (const span of spans) if (offset >= span.start && offset < span.end) return span;
@@ -4223,6 +4315,12 @@ const UiProperties = {
 		inherited: false,
 		affects: 64
 	}),
+	tabStop: defineProperty({
+		name: "tabStop",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 64
+	}),
 	disabled: defineProperty({
 		name: "disabled",
 		defaultValue: void 0,
@@ -4451,6 +4549,13 @@ const UiProperties = {
 		inherited: false,
 		affects: 64
 	}),
+	/** Set by LazySheet on the scroll container: its UiVirtualSheet. */
+	virtualSheet: defineProperty({
+		name: "virtualSheet",
+		defaultValue: void 0,
+		inherited: false,
+		affects: 64
+	}),
 	theme: defineProperty({
 		name: "theme",
 		defaultValue: void 0,
@@ -5547,6 +5652,21 @@ var EditableTextModel = class {
 	blinkOrigin = 0;
 	/** The last `value` the host synchronised in; see `UiEditable`. */
 	syncedValue = void 0;
+	/**
+	* The selection the last `selectionchange` reported.
+	*
+	* Kept on the model rather than worked out at each call site,
+	* because the caret is moved from a dozen places — arrows, clicks,
+	* select-all, an edit that replaces a range — and every one of them
+	* would otherwise have to remember to compare. Storing what was
+	* last said makes the comparison the notifier's job and the answer
+	* the same wherever the move came from.
+	*
+	* `NaN` to begin with, so the first report always fires: a fresh
+	* model at offset zero has genuinely not told anyone yet.
+	*/
+	notifiedAnchor = NaN;
+	notifiedFocus = NaN;
 	constructor(text = "") {
 		this.textValue = text;
 	}
@@ -6310,6 +6430,26 @@ function isNodeFocusable(node) {
 	return node.type === "button" || node.type === "editable-text";
 }
 /**
+* Whether Tab should stop here.
+*
+* Every tab stop is focusable and not every focusable node is a tab
+* stop, which is the distinction `tabindex="-1"` draws in the DOM and
+* the one this engine was missing. `focusable` answers "may this node
+* hold focus at all", and that is the wrong question for a container:
+* a dialog's body must be able to *take* the keyboard, so that opening
+* a dialog whose content is a sentence does not hand it to nothing, and
+* must not be a place Tab *lands*, or every dialog gains a stop that
+* announces nothing and does nothing.
+*
+* So `tabStop: false` means focusable, reachable by a press and by
+* `focus()`, and skipped by the cycle. It says nothing on a node that
+* is not focusable in the first place, because there is no order to be
+* out of.
+*/
+function isNodeTabStop(node) {
+	return isNodeFocusable(node) && node.properties.get("tabStop") !== false;
+}
+/**
 * Whether the user may select this node's text with the pointer.
 *
 * `selectable` inherits down the tree the way CSS `user-select` does:
@@ -6655,7 +6795,7 @@ function resolvePaintState(node, out) {
 	}
 	out.rtl = resolveProperty(node, UiProperties.textDirection) === "rtl";
 	resolveFontInto(node, out);
-	out.spans = out.editor === void 0 ? resolvePaintSpans(node) : void 0;
+	out.spans = resolvePaintSpans(node, out.editor === void 0 ? resolvedSpansOf(node) : editableSpansOf(node, out.text ?? ""));
 	out.linkHover = out.spans === void 0 ? -1 : linkHoverOf(node);
 	out.textDecoration = resolveProperty(node, UiProperties.textDecoration);
 	out.textColor = resolveColor(node, UiProperties.color) ?? UiBasicColors.black;
@@ -6718,8 +6858,7 @@ function resetTextStyle(out) {
 * anything having to notice.
 */
 const paintSpans = /* @__PURE__ */ new WeakMap();
-function resolvePaintSpans(node) {
-	const spans = resolvedSpansOf(node);
+function resolvePaintSpans(node, spans) {
 	if (spans.length === 0) return;
 	const theme = node.environment !== null ? node.environment.get(UiEnvironmentKeys.theme) : void 0;
 	const cached = paintSpans.get(spans);
@@ -7422,6 +7561,122 @@ var EditableLayout = class {
 	}
 };
 //#endregion
+//#region src/editing/EditingKeymap.ts
+/**
+* The platform the runtime is on, decided once. Available in a worker
+* too, since `navigator.userAgent` is; tests set it explicitly.
+*/
+function detectEditingPlatform() {
+	const agent = typeof navigator !== "undefined" ? navigator.userAgent : "";
+	return /Mac|iPhone|iPad|iPod/.test(agent) ? "mac" : "other";
+}
+/**
+* Maps a key press to an editing command, following the host's
+* conventions:
+*
+*   Mac    — Option steps by word, Command jumps to line and document
+*            ends, Command+Backspace deletes to the line start.
+*   Others — Control steps by word, Home/End and Control+Home/End are
+*            the line and document ends.
+*
+* Shift extends every move. Enter is a newline (the controller drops
+* it in a single-line field). A printable key becomes `insert` only
+* when `textFromKeys` is set: a host with an editing proxy delivers
+* text through `beforeinput` instead, where the IME and dead keys
+* have already been resolved.
+*/
+function commandForKey(key, modifiers, platform, textFromKeys) {
+	const mac = platform === "mac";
+	const primary = mac ? modifiers.meta : modifiers.ctrl;
+	const word = mac ? modifiers.alt : modifiers.ctrl;
+	const extend = modifiers.shift;
+	switch (key) {
+		case "ArrowLeft":
+		case "ArrowRight": {
+			const direction = key === "ArrowLeft" ? -1 : 1;
+			if (mac && modifiers.meta) return {
+				kind: "move",
+				unit: "line",
+				direction,
+				extend
+			};
+			return {
+				kind: "move",
+				unit: word ? "word" : "grapheme",
+				direction,
+				extend
+			};
+		}
+		case "ArrowUp":
+		case "ArrowDown": {
+			const direction = key === "ArrowUp" ? -1 : 1;
+			if (mac && modifiers.meta) return {
+				kind: "move",
+				unit: "document",
+				direction,
+				extend
+			};
+			return {
+				kind: "move",
+				unit: "vertical",
+				direction,
+				extend
+			};
+		}
+		case "Home": return {
+			kind: "move",
+			unit: modifiers.ctrl ? "document" : "line",
+			direction: -1,
+			extend
+		};
+		case "End": return {
+			kind: "move",
+			unit: modifiers.ctrl ? "document" : "line",
+			direction: 1,
+			extend
+		};
+		case "Backspace":
+			if (mac && modifiers.meta) return {
+				kind: "delete",
+				unit: "line",
+				direction: -1
+			};
+			return {
+				kind: "delete",
+				unit: word ? "word" : "grapheme",
+				direction: -1
+			};
+		case "Delete": return {
+			kind: "delete",
+			unit: word ? "word" : "grapheme",
+			direction: 1
+		};
+		case "Enter": return primary ? null : { kind: "newline" };
+	}
+	if (primary && !modifiers.alt) {
+		switch (key.toLowerCase()) {
+			case "a": return { kind: "selectAll" };
+			case "z": return modifiers.shift ? { kind: "redo" } : { kind: "undo" };
+			case "y": return mac ? null : { kind: "redo" };
+		}
+		return null;
+	}
+	if (textFromKeys && isPrintable(key) && !modifiers.ctrl && !modifiers.meta) return {
+		kind: "insert",
+		text: key
+	};
+	return null;
+}
+/** A key value that is the character it types: one grapheme, not a name like 'Shift'. */
+function isPrintable(key) {
+	if (key.length === 1) return true;
+	if (key.length === 2) {
+		const code = key.charCodeAt(0);
+		return code >= 55296 && code <= 56319;
+	}
+	return false;
+}
+//#endregion
 //#region src/layout/LineBreaks.ts
 function segmentParagraph(paragraph, wrap) {
 	const length = paragraph.length;
@@ -8410,6 +8665,31 @@ function scrollbarZoneAt(rec, x, y) {
 	if (rec.contentWidth > rec.width && y >= rec.y + rec.height - 16) return "x";
 	return null;
 }
+/**
+* The rectangle a press grabs a thumb by.
+*
+* The painted thumb is six pixels thick. Six pixels at the very edge
+* of a window is a hard thing to hit, and missing it is not a near
+* miss — the press lands on the track instead and pages a whole
+* screenful, which reads as the bar refusing to be dragged. So the
+* grab target is the thumb's length by the whole band that reveals it:
+* as easy to catch as it is to summon, which is what an overlay
+* scrollbar is expected to be. What is drawn is unchanged.
+*/
+function scrollbarGrabBox(rec, bar) {
+	if (bar.axis === "y") return {
+		x: rec.mirrored ? rec.x : rec.x + rec.width - 16,
+		y: bar.thumb.y,
+		width: 16,
+		height: bar.thumb.height
+	};
+	return {
+		x: bar.thumb.x,
+		y: rec.y + rec.height - 16,
+		width: bar.thumb.width,
+		height: 16
+	};
+}
 function pointInBox(box, x, y) {
 	return x >= box.x && x < box.x + box.width && y >= box.y && y < box.y + box.height;
 }
@@ -8731,11 +9011,21 @@ var UiHitTester = class {
 	* only while the bar is showing (or when asked for the band alone).
 	*/
 	hitScrollbar(node, rec, px, py) {
-		const axis = scrollbarZoneAt(rec, px, py);
-		if (axis === null) return false;
-		const bar = scrollbarThumb(rec, axis);
+		const zone = scrollbarZoneAt(rec, px, py);
+		if (zone === null) return false;
+		let axis = zone;
+		let bar = scrollbarThumb(rec, axis);
+		let onThumb = bar !== null && pointInBox(scrollbarGrabBox(rec, bar), px, py);
+		if (!onThumb) {
+			const other = axis === "y" ? "x" : "y";
+			const otherBar = scrollbarThumb(rec, other);
+			if (otherBar !== null && pointInBox(scrollbarGrabBox(rec, otherBar), px, py)) {
+				axis = other;
+				bar = otherBar;
+				onThumb = true;
+			}
+		}
 		if (bar === null) return false;
-		const onThumb = pointInBox(bar.thumb, px, py);
 		const visible = rec.scrollbarVisibleUntil > (typeof performance !== "undefined" ? performance.now() : Date.now());
 		if (!onThumb && !visible && !this.zoneOnly) return false;
 		this.recordHit(node, rec, px, py);
@@ -8992,10 +9282,24 @@ var UiFocusManager = class {
 	* this again once the frame's tree is built, which is when a dialog
 	* gets its caret. Idempotent: with focus already inside the scope,
 	* or no scope at all, it does nothing.
+	*
+	* **The scope root is the fallback, and it is the whole reason
+	* `tabStop` exists.** A scope with no tab stop inside it used to
+	* blur, which hands the keyboard to nothing: a `Dialog` whose body
+	* is a sentence and a button could not be dismissed with Escape,
+	* because Escape had nowhere to be delivered. Falling back to the
+	* root fixes that only if the root can hold focus without becoming a
+	* stop of its own, or every dialog grows a tab stop that announces
+	* nothing. `focusable: true, tabStop: false` on the body is exactly
+	* that pair, and the fallback is what makes it worth setting.
+	*
+	* Blurring is still what happens when the root cannot hold focus
+	* either, because a scope that has genuinely nothing to focus is
+	* better admitted than faked.
 	*/
 	settleScope() {
 		if (this.scopes.length === 0 || this.focused !== null && this.withinScope(this.focused)) return;
-		if (!this.focusNext()) this.blur();
+		if (!this.focusNext() && !this.focus(this.scopeRoot)) this.blur();
 	}
 	/**
 	* Ends the innermost scope and hands focus back to whatever held it
@@ -9043,11 +9347,18 @@ var UiFocusManager = class {
 		const next = focusables[(index + delta + focusables.length) % focusables.length];
 		return this.focus(next, "keyboard");
 	}
-	/** Focusable nodes in document order (parent before children). */
+	/**
+	* The tab stops in document order (parent before children).
+	*
+	* Tab stops and not every focusable node: a container with
+	* `tabStop: false` can hold focus and is not a place the cycle
+	* stops, which is what lets a dialog body be the keyboard's home of
+	* last resort without becoming a stop of its own.
+	*/
 	collectFocusable() {
 		const result = [];
 		const visit = (node) => {
-			if (isNodeFocusable(node)) result.push(node);
+			if (isNodeTabStop(node)) result.push(node);
 			for (let child = node.firstChild; child !== null; child = child.nextSibling) visit(child);
 		};
 		visit(this.scopeRoot);
@@ -9579,7 +9890,7 @@ const EVERYTHING_SCROLLABLE = Object.freeze({
 */
 const SCROLL_EPSILON = .5;
 /** Whether an offset can still move in the direction `delta` points. */
-function hasRoom(offset, max, delta) {
+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. */
@@ -9718,13 +10029,10 @@ var UiWheelController = class {
 			if (!isScrollContainer(node)) continue;
 			const state = this.scrollSink.containerState(node);
 			if (state === void 0) continue;
-			if (state.horizontal) {
-				left ||= hasRoom(state.scrollX, state.maxScrollX, -1);
-				right ||= hasRoom(state.scrollX, state.maxScrollX, 1);
-			} else {
-				up ||= hasRoom(state.scrollY, state.maxScrollY, -1);
-				down ||= hasRoom(state.scrollY, state.maxScrollY, 1);
-			}
+			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;
@@ -9751,7 +10059,7 @@ var UiWheelController = class {
 		for (const node of this.scrollSink.scrollContainers?.() ?? []) {
 			const state = this.scrollSink.containerState(node);
 			if (state === void 0) continue;
-			if (state.horizontal ? state.maxScrollX > SCROLL_EPSILON : state.maxScrollY > SCROLL_EPSILON) return true;
+			if (state.maxScrollX > SCROLL_EPSILON || state.maxScrollY > SCROLL_EPSILON) return true;
 		}
 		return false;
 	}
@@ -9769,11 +10077,10 @@ var UiWheelController = class {
 			if (!isScrollContainer(node)) continue;
 			const state = this.scrollSink.containerState(node);
 			if (state === void 0) continue;
-			const delta = state.horizontal ? deltaX : deltaY;
-			const offset = state.horizontal ? state.scrollX : state.scrollY;
-			const max = state.horizontal ? state.maxScrollX : state.maxScrollY;
-			if (delta !== 0 && hasRoom(offset, max, delta)) {
-				this.applyDelta(node, state, deltaX, deltaY, deltaMode, behaviorFor(node, deltaMode, wheelDeltaY));
+			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));
 				event.markConsumed();
 				return;
 			}
@@ -9785,8 +10092,7 @@ var UiWheelController = class {
 		if (containsOverscroll(rootOf(target))) event.markConsumed();
 	}
 	applyDelta(container, state, deltaX, deltaY, deltaMode, behavior) {
-		if (state.horizontal) this.scrollSink.scrollBy(container, this.toPixels(deltaX, deltaMode, state.viewportWidth), 0, behavior);
-		else this.scrollSink.scrollBy(container, 0, this.toPixels(deltaY, deltaMode, state.viewportHeight), behavior);
+		this.scrollSink.scrollBy(container, deltaX === 0 ? 0 : this.toPixels(deltaX, deltaMode, state.viewportWidth), deltaY === 0 ? 0 : this.toPixels(deltaY, deltaMode, state.viewportHeight), behavior);
 	}
 	/**
 	* A wheel delta in whatever unit it arrived in, as pixels.
@@ -10349,9 +10655,8 @@ var UiTouchScroller = class {
 		this.sample(event.x, event.y);
 		const resolved = this.resolve(event.target, dx, dy);
 		if (resolved === null) return;
-		const { node, state } = resolved;
-		if (state.horizontal) this.scrollSink.scrollBy(node, dx, 0);
-		else this.scrollSink.scrollBy(node, 0, dy);
+		const { node, takesX, takesY } = resolved;
+		this.scrollSink.scrollBy(node, takesX ? dx : 0, takesY ? dy : 0);
 		this.scrollSink.revealScrollbars?.(node);
 	}
 	panEnd(event) {
@@ -10364,12 +10669,11 @@ var UiTouchScroller = class {
 		if (velocity === null) return;
 		const resolved = this.resolve(event.target, velocity.x, velocity.y);
 		if (resolved === null) return;
-		const { node, state } = resolved;
-		const speed = state.horizontal ? velocity.x : velocity.y;
-		if (Math.abs(speed) < this.flingVelocity) return;
-		const distance = speed * this.momentum;
-		if (state.horizontal) this.scrollSink.scrollBy(node, distance, 0, "smooth");
-		else this.scrollSink.scrollBy(node, 0, distance, "smooth");
+		const { node, takesX, takesY } = resolved;
+		const flingX = takesX && Math.abs(velocity.x) >= this.flingVelocity ? velocity.x * this.momentum : 0;
+		const flingY = takesY && Math.abs(velocity.y) >= this.flingVelocity ? velocity.y * this.momentum : 0;
+		if (flingX === 0 && flingY === 0) return;
+		this.scrollSink.scrollBy(node, flingX, flingY, "smooth");
 	}
 	sample(x, y) {
 		const t = this.now();
@@ -10396,7 +10700,7 @@ var UiTouchScroller = class {
 		};
 	}
 	/**
-	* The container that should take this movement.
+	* The container that should take this movement, and which of its axes.
 	*
 	* The nearest scroll container that can still move in the direction
 	* asked for, walking outward. A container already at its end is
@@ -10404,6 +10708,18 @@ var UiTouchScroller = class {
 	* that has hit its bottom keep scrolling the page it sits in. When
 	* nothing can move, the innermost container is returned so the
 	* gesture still belongs somewhere.
+	*
+	* **Each axis is asked for separately**, because a container may
+	* scroll on both, and this used to pick one from the container's
+	* flex direction and drop the other on the floor. A spreadsheet is
+	* the case that found it on the wheel in 38e70a3: one `ScrollView`
+	* whose content overflows in both directions, classified as vertical,
+	* so a sideways drag moved nothing at all. This is the same fix on
+	* the same shared state, so the two input paths cannot disagree about
+	* which container takes a gesture.
+	*
+	* A container that overflows on one axis only is unaffected: the axis
+	* it does not scroll has no room, so it is not taken.
 	*/
 	resolve(target, dx, dy) {
 		let innermost = null;
@@ -10411,16 +10727,19 @@ var UiTouchScroller = class {
 			if (!isScrollContainer(node)) continue;
 			const state = this.scrollSink.containerState(node);
 			if (state === void 0) continue;
+			const takesX = dx !== 0 && hasScrollRoom(state.scrollX, state.maxScrollX, dx);
+			const takesY = dy !== 0 && hasScrollRoom(state.scrollY, state.maxScrollY, dy);
 			innermost ??= {
 				node,
-				state
+				state,
+				takesX: false,
+				takesY: false
 			};
-			const delta = state.horizontal ? dx : dy;
-			const offset = state.horizontal ? state.scrollX : state.scrollY;
-			const max = state.horizontal ? state.maxScrollX : state.maxScrollY;
-			if (delta < 0 && offset > 0 || delta > 0 && offset < max) return {
+			if (takesX || takesY) return {
 				node,
-				state
+				state,
+				takesX,
+				takesY
 			};
 		}
 		return innermost;
@@ -10430,6 +10749,504 @@ function defaultClock() {
 	return typeof performance !== "undefined" ? performance.now() : Date.now();
 }
 //#endregion
+//#region src/input/UiEditingController.ts
+/** How long two presses may be apart and still count as a double click. */
+const MULTI_CLICK_MS = 500;
+const MULTI_CLICK_SLOP = 4;
+/** Room kept around the caret when scrolling it into view. */
+const CARET_REVEAL_PADDING = 4;
+/**
+* Editing behaviour for EditableText nodes.
+*
+* The keyboard and pointer controllers call in here as their default
+* behaviour for an editable target — after the app's listeners have
+* run and only when none of them called preventDefault() — and the
+* host feeds it the shell's text input: `beforeinput` edits,
+* composition, paste. The model on the node is the single source of
+* truth; this class turns intents into model changes, marks the node
+* dirty so layout and paint follow, reports the change through an
+* `input` event, and keeps the caret in view.
+*
+* Text arrives one of two ways. A shell with an editing proxy sends
+* `beforeinput`, where the browser has already resolved the IME, dead
+* keys and the keyboard layout; then printable key presses are not
+* text and `textFromKeys` is off. Without a proxy — tests, a bare
+* runtime — printable keys become insertions.
+*/
+var UiEditingController = class {
+	host;
+	dispatcher;
+	focus;
+	/** Insert printable key presses as text; off when a shell delivers text through beforeinput. */
+	textFromKeys = true;
+	platform;
+	paint = createPaintState();
+	focusedEditable = null;
+	visible = true;
+	/** x the current run of vertical moves keeps returning to. */
+	verticalGoalX = void 0;
+	dragging = null;
+	lastPress = null;
+	compositionOpen = false;
+	constructor(host, dispatcher, focus, options = {}) {
+		this.host = host;
+		this.dispatcher = dispatcher;
+		this.focus = focus;
+		this.platform = options.platform ?? detectEditingPlatform();
+		this.focus.onFocusChange((node) => this.handleFocusChange(node));
+	}
+	/** The editable that holds focus, or null. */
+	get focused() {
+		return this.focusedEditable;
+	}
+	/** Whether the pointer controller should hand presses on the node to this controller. */
+	isEditable(node) {
+		return isEditableNode(node);
+	}
+	/**
+	* Default keyboard behaviour for the focused editable. Returns true
+	* when the key was an editing command, so the caller can mark the
+	* event handled.
+	*/
+	handleKey(node, key, modifiers) {
+		if (!isEditableNode(node)) return false;
+		const command = commandForKey(key, modifiers, this.platform, this.textFromKeys);
+		if (command === null) return false;
+		return this.execute(node, command);
+	}
+	execute(node, command) {
+		const model = editorFor(node);
+		const readOnly = isReadOnly(node);
+		switch (command.kind) {
+			case "move":
+				this.move(node, model, command.unit, command.direction, command.extend);
+				return true;
+			case "delete":
+				if (readOnly) return true;
+				return this.applyEdit(node, model, deleteInputType(command.unit, command.direction), null, () => {
+					if (command.direction < 0) model.deleteBackward(command.unit);
+					else model.deleteForward(command.unit);
+				});
+			case "newline":
+				if (!isMultiline(node)) return false;
+				if (readOnly) return true;
+				return this.applyEdit(node, model, "insertLineBreak", "\n", () => model.insertText("\n"));
+			case "insert":
+				if (readOnly) return true;
+				return this.applyEdit(node, model, "insertText", command.text, () => model.insertText(command.text));
+			case "selectAll":
+				model.selectAll();
+				this.afterSelectionChange(node, model);
+				return true;
+			case "undo":
+				if (readOnly) return true;
+				this.history(node, model, "historyUndo", () => model.undo());
+				return true;
+			case "redo":
+				if (readOnly) return true;
+				this.history(node, model, "historyRedo", () => model.redo());
+				return true;
+		}
+	}
+	move(node, model, unit, direction, extend) {
+		if (unit === "vertical") {
+			const target = this.layoutOf(node).verticalMove(model.focus, direction, this.verticalGoalX);
+			if (target === null) {
+				model.moveTo(direction < 0 ? 0 : model.text.length, extend);
+				this.verticalGoalX = void 0;
+			} else {
+				model.moveTo(target.offset, extend);
+				this.verticalGoalX = target.x;
+			}
+			this.afterSelectionChange(node, model, true);
+			return;
+		}
+		if (unit === "line") {
+			const layout = this.layoutOf(node);
+			const caret = layout.caretRect(model.focus);
+			const line = layout.lines[caret.line];
+			const hard = direction < 0 ? lineStartAt(model.text, model.focus) : lineEndAt(model.text, model.focus);
+			const visual = direction < 0 ? line.start : line.end;
+			model.moveTo(direction < 0 ? Math.max(hard, visual) : Math.min(hard, visual), extend);
+			this.afterSelectionChange(node, model);
+			return;
+		}
+		model.move(unit, direction, extend);
+		this.afterSelectionChange(node, model);
+	}
+	/**
+	* A `beforeinput` from the shell's editing proxy, in the DOM's
+	* vocabulary. Returns true when it was applied to the focused
+	* editable. Composition types are not handled here: the composition
+	* methods carry them, and an engine that fires both must not insert
+	* twice.
+	*/
+	beforeInput(inputType, data) {
+		const node = this.focusedEditable;
+		if (node === null) return false;
+		const model = editorFor(node);
+		const readOnly = isReadOnly(node);
+		switch (inputType) {
+			case "insertText":
+			case "insertReplacementText":
+			case "insertFromDrop":
+			case "insertFromYank":
+				if (data === null || data.length === 0) return false;
+				return readOnly || this.insert(node, model, inputType, data);
+			case "insertFromPaste": return readOnly || data !== null && this.insert(node, model, inputType, data);
+			case "insertLineBreak":
+			case "insertParagraph":
+				if (!isMultiline(node)) return false;
+				return readOnly || this.applyEdit(node, model, inputType, "\n", () => model.insertText("\n"));
+			case "deleteContentBackward":
+			case "deleteWordBackward":
+			case "deleteSoftLineBackward":
+			case "deleteHardLineBackward":
+			case "deleteContentForward":
+			case "deleteWordForward":
+			case "deleteSoftLineForward":
+			case "deleteHardLineForward":
+			case "deleteContent":
+			case "deleteByCut":
+			case "deleteByDrag": {
+				if (readOnly) return true;
+				const unit = /Word/.test(inputType) ? "word" : /Line/.test(inputType) ? "line" : "grapheme";
+				const forward = /Forward/.test(inputType);
+				return this.applyEdit(node, model, inputType, null, () => {
+					if (inputType === "deleteContent" || inputType === "deleteByCut" || inputType === "deleteByDrag") model.replaceRange(model.start, model.end, "");
+					else if (forward) model.deleteForward(unit);
+					else model.deleteBackward(unit);
+				});
+			}
+			case "historyUndo": return readOnly || this.history(node, model, inputType, () => model.undo());
+			case "historyRedo": return readOnly || this.history(node, model, inputType, () => model.redo());
+			default: return false;
+		}
+	}
+	/** Inserts text at the selection of the focused editable, as typing would. */
+	insertText(text) {
+		const node = this.focusedEditable;
+		if (node === null || isReadOnly(node)) return false;
+		return this.insert(node, editorFor(node), "insertText", text);
+	}
+	/**
+	* Replaces the focused editable's whole text, as an assistive
+	* technology's "set value" does.
+	*
+	* `insertReplacementText` is the DOM's own input type for this, so an
+	* `onBeforeInput` that vets edits sees the same vocabulary it sees
+	* for typing, and an app that rejects the edit rejects this one too.
+	* Selecting everything first is what makes it one undo step and one
+	* `onInput` rather than a delete and an insert.
+	*/
+	replaceText(text) {
+		const node = this.focusedEditable;
+		if (node === null || isReadOnly(node)) return false;
+		const model = editorFor(node);
+		model.selectAll();
+		return this.insert(node, model, "insertReplacementText", text);
+	}
+	/**
+	* Pastes text: newlines are kept in a multiline field and become
+	* spaces in a single-line one.
+	*
+	* With nothing editable focused the text is offered to whatever is,
+	* as a `Paste` event, instead of being dropped. That is the case a
+	* grid needs: it owns a rectangle of cells, a block of tab-separated
+	* text means something to it that it means to nothing else, and
+	* before this there was no way for it to hear about one at all.
+	*/
+	paste(text) {
+		const node = this.focusedEditable;
+		if (node === null || isReadOnly(node)) return this.offerPaste(text);
+		return this.insert(node, editorFor(node), "insertFromPaste", text);
+	}
+	offerPaste(text) {
+		const target = this.focus.focusedNode;
+		if (target === null) return false;
+		const event = new UiPasteEvent(text);
+		this.dispatcher.dispatch(event, target);
+		return event.defaultPrevented;
+	}
+	insert(node, model, inputType, text) {
+		const data = isMultiline(node) ? text : text.replace(/\r\n|\r|\n/g, " ");
+		return this.applyEdit(node, model, inputType, data, () => model.insertText(data));
+	}
+	compositionStart() {
+		const node = this.focusedEditable;
+		if (node === null || isReadOnly(node)) return;
+		const model = editorFor(node);
+		model.beginComposition();
+		this.compositionOpen = true;
+		this.afterTextChange(node, model, false);
+	}
+	/** The composition text so far and the caret within it. */
+	compositionUpdate(text, caret = text.length) {
+		const node = this.focusedEditable;
+		if (node === null || isReadOnly(node)) return;
+		const model = editorFor(node);
+		model.updateComposition(text, caret);
+		this.compositionOpen = true;
+		this.afterTextChange(node, model, false);
+	}
+	/** The IME committed `text` (possibly empty: the composition was cancelled). */
+	compositionEnd(text) {
+		const node = this.focusedEditable;
+		this.compositionOpen = false;
+		if (node === null || isReadOnly(node)) return;
+		const model = editorFor(node);
+		const data = isMultiline(node) ? text : text.replace(/\r\n|\r|\n/g, " ");
+		const before = model.text;
+		model.commitComposition(data);
+		this.afterTextChange(node, model, before !== model.text);
+	}
+	/**
+	* A press on an editable places the caret (Shift extends the
+	* selection to it); a second press within the double-click window
+	* selects the word, a third the line. Dragging afterwards extends the
+	* selection from the anchor.
+	*/
+	pointerDown(node, x, y, modifiers) {
+		if (!isEditableNode(node)) return;
+		const model = editorFor(node);
+		const layout = this.layoutOf(node);
+		const local = this.host.toLocal(node, x, y);
+		const offset = layout.offsetAt(local.x, local.y);
+		const now = this.host.now();
+		const last = this.lastPress;
+		const count = !modifiers.shift && last !== null && last.node === node && now - last.at <= MULTI_CLICK_MS && Math.abs(last.x - x) <= MULTI_CLICK_SLOP && Math.abs(last.y - y) <= MULTI_CLICK_SLOP ? last.count + 1 : 1;
+		this.lastPress = {
+			node,
+			x,
+			y,
+			at: now,
+			count
+		};
+		this.dragging = node;
+		if (modifiers.shift) model.moveTo(offset, true);
+		else if (count === 2) {
+			const word = wordRangeAt(model.text, offset);
+			model.select(word.start, word.end);
+		} else if (count >= 3) model.select(lineStartAt(model.text, offset), lineEndAt(model.text, offset));
+		else model.select(offset);
+		model.breakUndoGroup();
+		this.afterSelectionChange(node, model);
+	}
+	pointerMove(node, x, y) {
+		if (this.dragging !== node) return;
+		const model = editorFor(node);
+		const layout = this.layoutOf(node);
+		const local = this.host.toLocal(node, x, y);
+		const offset = layout.offsetAt(local.x, local.y);
+		if (offset !== model.focus) {
+			model.moveTo(offset, true);
+			this.afterSelectionChange(node, model);
+		}
+	}
+	pointerUp() {
+		this.dragging = null;
+	}
+	/** The focused editable's state for the shell to mirror, or null. */
+	state() {
+		const node = this.focusedEditable;
+		if (node === null || this.host.recordFor(node) === void 0) return null;
+		const model = editorFor(node);
+		const caret = this.layoutOf(node).caretRect();
+		const visible = this.host.visibleBox(node);
+		return {
+			text: model.text,
+			selectionStart: model.start,
+			selectionEnd: model.end,
+			caret: {
+				x: visible.x + caret.x,
+				y: visible.y + caret.y,
+				width: 1,
+				height: caret.height
+			},
+			multiline: isMultiline(node),
+			composing: model.composing
+		};
+	}
+	/**
+	* When the focused caret next toggles, or undefined when nothing
+	* blinks: no focused editable, a composition in progress (the caret
+	* holds), or a hidden page.
+	*/
+	nextCaretChange(now) {
+		const node = this.focusedEditable;
+		if (node === null || !this.visible) return;
+		const model = editorFor(node);
+		if (model.composing || !model.collapsed) return;
+		return nextCaretToggle(model, now);
+	}
+	/**
+	* The page was hidden or shown. A hidden page stops the blink so a
+	* background tab schedules no frames; showing it restarts the caret.
+	*/
+	setVisible(visible) {
+		if (this.visible === visible) return;
+		this.visible = visible;
+		const node = this.focusedEditable;
+		if (node !== null) {
+			editorFor(node).blinkOrigin = this.host.now();
+			this.host.markDirty(node, 2);
+		}
+	}
+	/** Whether the caret may be drawn at all (the page is visible). */
+	get caretEnabled() {
+		return this.visible;
+	}
+	handleFocusChange(node) {
+		const previous = this.focusedEditable;
+		const next = node !== null && isEditableNode(node) ? node : null;
+		if (previous === next) return;
+		if (previous !== null) {
+			const model = editorFor(previous);
+			if (model.composing) model.commitComposition(model.text.slice(model.composition.start, model.composition.end));
+			model.focused = false;
+			this.host.markDirty(previous, 2);
+		}
+		this.focusedEditable = next;
+		this.compositionOpen = false;
+		this.verticalGoalX = void 0;
+		if (next !== null) {
+			const model = editorFor(next);
+			model.focused = true;
+			model.blinkOrigin = this.host.now();
+			this.host.markDirty(next, 2);
+		}
+	}
+	/**
+	* Runs an edit unless a `beforeinput` listener cancels it, then
+	* reports it. Returns true when the input was consumed either way.
+	*/
+	applyEdit(node, model, inputType, data, run) {
+		const before = new UiBeforeInputEvent(inputType, data);
+		this.dispatcher.dispatch(before, node);
+		if (before.defaultPrevented) return true;
+		const text = model.text;
+		run();
+		this.afterTextChange(node, model, text !== model.text);
+		return true;
+	}
+	history(node, model, inputType, run) {
+		const before = new UiBeforeInputEvent(inputType, null);
+		this.dispatcher.dispatch(before, node);
+		if (before.defaultPrevented) return true;
+		const text = model.text;
+		run();
+		this.afterTextChange(node, model, text !== model.text);
+		return true;
+	}
+	afterTextChange(node, model, changed) {
+		this.verticalGoalX = void 0;
+		model.blinkOrigin = this.host.now();
+		this.host.markDirty(node, changed || this.compositionOpen ? 5 : 2);
+		if (changed) this.dispatcher.dispatch(new UiTextChangeEvent(model.text, model.start, model.end), node);
+		this.notifySelection(node, model);
+		this.revealCaret(node);
+	}
+	/**
+	* Reports the selection, if it has actually moved since last time.
+	*
+	* The guard is what keeps this quiet: holding a right arrow against
+	* the end of the text moves nothing and must say nothing, and a
+	* listener that recomputed decoration on every key would otherwise
+	* do it forever for no reason.
+	*
+	* `hasListeners` already makes an unheard dispatch free, so the
+	* cost when nobody is listening is the two comparisons here.
+	*/
+	notifySelection(node, model) {
+		if (model.anchor === model.notifiedAnchor && model.focus === model.notifiedFocus) return;
+		model.notifiedAnchor = model.anchor;
+		model.notifiedFocus = model.focus;
+		this.dispatcher.dispatch(new UiSelectionChangeEvent(model.text, model.start, model.end, model.anchor, model.focus), node);
+	}
+	afterSelectionChange(node, model, keepGoal = false) {
+		if (!keepGoal) this.verticalGoalX = void 0;
+		model.blinkOrigin = this.host.now();
+		this.host.markDirty(node, 2);
+		this.notifySelection(node, model);
+		this.revealCaret(node);
+	}
+	/**
+	* Asks the host to scroll the caret into view, when the node has been
+	* laid out: the field's own text first, then any scroll container
+	* around it.
+	*
+	* `layoutOf` places the text where it is seen, so the caret comes
+	* back with the field's own scroll already taken off; the reveal is
+	* asked for in the node's unscrolled coordinates, which is where the
+	* offset it wants is measured from.
+	*/
+	revealCaret(node) {
+		const rec = this.host.recordFor(node);
+		if (rec === void 0) return;
+		const caret = this.layoutOf(node).caretRect();
+		this.host.reveal(node, {
+			x: caret.x + rec.scrollX - CARET_REVEAL_PADDING,
+			y: caret.y + rec.scrollY - CARET_REVEAL_PADDING,
+			width: 9,
+			height: caret.height + 8
+		});
+	}
+	/**
+	* The node's text laid out in node-local coordinates: the content box
+	* starts at the padding and is shifted by the field's own scroll, as
+	* it is for the renderers in the parent's space. Points from the
+	* pointer and the caret box the shell is given are both in that same
+	* seen space, so neither has to know the offset. Before the first
+	* layout the record is empty and the lines fall at the origin, which
+	* is still a valid place for a caret.
+	*/
+	/**
+	* Where the caret is inside a field, in the field's own coordinates.
+	*
+	* Relative to the node's border-box origin, with the field's own
+	* scroll already applied — so a popup placed under the caret adds
+	* the node's position on screen and nothing else.
+	*
+	* Public because an application cannot work this out. The geometry
+	* needs the paragraph as it was *laid out*, which means the
+	* measurer, the resolved paint and the layout record, and an
+	* application that re-measured the text to find the caret would be
+	* a second measurer that must never disagree with this one. Asking
+	* is the only version that stays right.
+	*
+	* Null when the node is not an editable, or has not been laid out.
+	*/
+	caretRectOf(node) {
+		if (!isEditableNode(node) || this.host.recordFor(node) === void 0) return null;
+		return this.layoutOf(node).caretRect();
+	}
+	layoutOf(node) {
+		const rec = this.host.recordFor(node);
+		const state = resolvePaintState(node, this.paint);
+		const box = rec === void 0 ? {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		} : {
+			x: rec.paddingLeft - rec.scrollX,
+			y: rec.paddingTop - rec.scrollY,
+			width: Math.max(0, rec.width - rec.paddingLeft - rec.paddingRight),
+			height: Math.max(0, rec.height - rec.paddingTop - rec.paddingBottom)
+		};
+		return new EditableLayout(state.editor, box, state, this.host.measurer);
+	}
+};
+function deleteInputType(unit, direction) {
+	const side = direction < 0 ? "Backward" : "Forward";
+	switch (unit) {
+		case "word": return `deleteWord${side}`;
+		case "line":
+		case "document": return `deleteSoftLine${side}`;
+		default: return `deleteContent${side}`;
+	}
+}
+//#endregion
 //#region src/input/UiPlatformAdapter.ts
 /**
 * Bridges platform/browser input events to the framework input
@@ -12157,8 +12974,6 @@ const SCROLLBAR_FADE_MS = 350;
 * The limit is what stops a cycle of anchors from spinning.
 */
 const ANCHOR_CHAIN_LIMIT = 4;
-/** An editable's text is the user's; runs are a property of a `Text` node. */
-const EMPTY_TEXT_SPANS = [];
 /**
 * Whether a node names any of the four logical horizontal insets, and
 * so needs its writing direction resolved before its box is worked
@@ -13561,7 +14376,7 @@ var LayoutEngine = class {
 				contentMain = Math.max(contentMain, this.lineOuterMain(line, config.gapMain, "final"));
 			} else {
 				for (const item of line.items) item.finalMain = item.hypotheticalMain;
-				contentMain = Math.max(contentMain, lineTotal);
+				contentMain = Math.max(contentMain, this.lineMaxContentMain(line, config.gapMain));
 			}
 		}
 		if (mainDefinite) contentMain = Math.max(mainMax, contentMain);
@@ -13668,6 +14483,7 @@ var LayoutEngine = class {
 				child,
 				rec: cRec,
 				baseMain,
+				maxContentMain: measuredMain,
 				hypotheticalMain: this.clamp(baseMain, minMain, maxMain),
 				finalMain: baseMain,
 				cross: row ? cRec.measuredHeight : cRec.measuredWidth,
@@ -13776,6 +14592,33 @@ var LayoutEngine = class {
 		});
 		return lines;
 	}
+	/**
+	* A line's main size when the container shrink-wraps it.
+	*
+	* The sum of the hypothetical sizes would be the answer if an item
+	* never grew — but `flex: 1` is `flex-basis: 0`, and an item that
+	* starts flexing from zero asks for nothing while its content still
+	* wants the width of its text. A container wrapped around that sum
+	* comes out too narrow; the item's text then wraps inside a box that
+	* was measured as though it had not, and the container is left
+	* shorter than the children it draws — a menu whose last rows fall
+	* out of its own panel.
+	*
+	* So an item that can grow contributes whichever is larger, the size
+	* its basis gives it or the size its content asks for. Chrome ignores
+	* the basis entirely here and browsers disagree with each other about
+	* it; the larger of the two is the reading that keeps `flex-basis`
+	* counting for something, which is what `basis/sizes-container`
+	* already records this engine as doing.
+	*/
+	lineMaxContentMain(line, gap) {
+		let total = gap * (line.items.length - 1);
+		for (const item of line.items) {
+			const wanted = item.grow > 0 ? this.clamp(item.maxContentMain, item.minMain, item.maxMain) : 0;
+			total += Math.max(item.hypotheticalMain, wanted) + item.marginMainStart + item.marginMainEnd;
+		}
+		return total;
+	}
 	lineOuterMain(line, gap, size) {
 		let total = gap * (line.items.length - 1);
 		for (const item of line.items) total += (size === "final" ? item.finalMain : item.hypotheticalMain) + item.marginMainStart + item.marginMainEnd;
@@ -14104,8 +14947,9 @@ var LayoutEngine = class {
 		const paddingV = rec.paddingTop + rec.paddingBottom;
 		const editable = node.type === "editable-text";
 		if (node.type === "text" || node.type === "button" || editable) {
-			const spans = editable ? EMPTY_TEXT_SPANS : resolvedSpansOf(node);
-			const text = editable ? editorFor(node).text : spans.length > 0 ? textContentOf(node) : String(node.properties.get("text") ?? "");
+			const typed = editable ? editorFor(node).text : "";
+			const spans = editable ? editableSpansOf(node, typed) : resolvedSpansOf(node);
+			const text = editable ? typed : spans.length > 0 ? textContentOf(node) : String(node.properties.get("text") ?? "");
 			const placeholderProp = node.properties.get("placeholder");
 			const placeholder = editable && text.length === 0 && typeof placeholderProp === "string" ? placeholderProp : void 0;
 			const font = resolveFont(node);
@@ -14847,6 +15691,7 @@ var LayoutEngine = class {
 	*/
 	markLayoutDirty(node, selfCanBound = false) {
 		let current = node;
+		let bounded = false;
 		for (;;) {
 			const rec = this.records.get(current);
 			if (rec !== void 0) {
@@ -14854,12 +15699,35 @@ var LayoutEngine = class {
 				rec.placeDirty = true;
 			}
 			if (current === this.layoutRoot || current.parent === null) {
-				this.relayoutRoots.add(this.layoutRoot ?? current);
+				if (!bounded) this.relayoutRoots.add(this.layoutRoot ?? current);
 				return;
 			}
-			if (rec?.relayoutBoundary && !rec.positioned && (current !== node || selfCanBound)) {
+			if (!bounded && rec?.relayoutBoundary && !rec.positioned && (current !== node || selfCanBound)) {
 				this.relayoutRoots.add(current);
-				return;
+				/**
+				* The boundary is where the *relayout* starts, and the walk
+				* carries on past it marking ancestors.
+				*
+				* Stopping here as well is sound only while the pass really
+				* does start at this boundary. It does not always: another
+				* node dirtied in the same frame can drag the layout root
+				* into `relayoutRoots`, and then the pass is a `fullLayout`
+				* that measures from the root — down through ancestors this
+				* walk left clean, every one of which short-circuits on its
+				* own measure memo and never reaches the node that changed.
+				*
+				* Found with a bar switched into the chrome by choosing a
+				* menu item: the menu's own teardown put the root in the set,
+				* the frame did a full layout, and `measure` was never called
+				* on the column that had gained a child. It drew at zero
+				* height, with every spec passing — a spec asks what a node's
+				* properties are, and they were all correct.
+				*
+				* Marking to the root costs a walk of the depth and two
+				* booleans a node, against a memo that is otherwise believed
+				* when it should not be.
+				*/
+				bounded = true;
 			}
 			current = current.parent;
 		}
@@ -15239,10 +16107,26 @@ var LayoutEngine = class {
 	*/
 	assignBox(node, x, y, width, height) {
 		const rec = this.record(node);
-		if (rec.positioned && !rec.absolute && node !== this.layoutRoot) {
+		if (rec.positioned && !rec.absolute && !rec.sticky && node !== this.layoutRoot) {
 			x += rec.left ?? (rec.right !== void 0 ? -rec.right : 0);
 			y += rec.top ?? (rec.bottom !== void 0 ? -rec.bottom : 0);
 		}
+		/**
+		* A **sticky** node is not offset by its insets, and that is the
+		* difference between the two.
+		*
+		* `top: 0` on a sticky header is a threshold — "do not let me go
+		* above the top of the scrollport" — and not a displacement, which
+		* is what CSS means by it and what `resolveStickyOffset` below
+		* assumes when it computes `viewLeft + rec.left - rec.x`. Offset
+		* here *and* used as a threshold there, an inset is applied twice
+		* and the two errors cancel only when it is zero.
+		*
+		* Which is why nothing noticed: every sticky node in the framework
+		* and its examples sticks at zero. The first one that did not — a
+		* spreadsheet's second frozen column, which sticks at the width of
+		* the gutter — was drawn one gutter too far to the right.
+		*/
 		if (rec.x !== x || rec.y !== y || rec.width !== width || rec.height !== height) {
 			rec.x = x;
 			rec.y = y;
@@ -15482,12 +16366,37 @@ function drawOverlayShapes(ctx, shapes) {
 */
 function decorationRect(shape, rec, nodeRadius) {
 	const outset = shape.outset ?? 0;
+	const horizontal = axis(rec.x, rec.width, shape.x, shape.width, shape.right, outset);
+	const vertical = axis(rec.y, rec.height, shape.y, shape.height, shape.bottom, outset);
+	const radius = Math.max(0, shape.radius ?? nodeRadius + outset);
 	return {
-		x: rec.x + (shape.x ?? 0) - outset,
-		y: rec.y + (shape.y ?? 0) - outset,
-		width: Math.max(0, (shape.width ?? rec.width) + 2 * outset),
-		height: Math.max(0, (shape.height ?? rec.height) + 2 * outset),
-		radius: Math.max(0, shape.radius ?? nodeRadius + outset)
+		x: horizontal.start,
+		y: vertical.start,
+		width: horizontal.size,
+		height: vertical.size,
+		radius
+	};
+}
+/**
+* One axis of the placement, from any two of near, size and far.
+*
+* The outset applies after the three are reconciled, growing the
+* rectangle by it on both sides, so it means the same thing however
+* the rectangle was described.
+*/
+function axis(origin, extent, near, size, far, outset) {
+	let start;
+	let length;
+	if (near === void 0 && size !== void 0 && far !== void 0) {
+		length = size;
+		start = extent - far - size;
+	} else {
+		start = near ?? 0;
+		length = size ?? extent - start - (far ?? 0);
+	}
+	return {
+		start: origin + start - outset,
+		size: Math.max(0, length + 2 * outset)
 	};
 }
 /**
@@ -17108,12 +18017,16 @@ var Canvas2DRenderer = class {
 	paintEditable(ctx, paint, context) {
 		const model = paint.editor;
 		const layout = new EditableLayout(model, this.contentBox, paint, context.text);
+		fillTextRects(ctx, textRunBackgrounds(layout.lines, paint));
 		if (model.focused && !model.collapsed) {
 			ctx.fillStyle = colorToCss(paint.selectionColor);
 			for (const box of layout.selectionBoxes()) ctx.fillRect(box.x, box.y, box.width, box.height);
 		}
 		if (layout.placeholderLines.length > 0) drawTextLines(ctx, layout.placeholderLines, buildFontString(paint), colorToCss(paint.placeholderColor), paint.letterSpacing, paint.rtl);
-		else drawTextLines(ctx, layout.lines, buildFontString(paint), colorToCss(paint.textColor), paint.letterSpacing, paint.rtl);
+		else {
+			drawTextLines(ctx, layout.lines, buildFontString(paint), colorToCss(paint.textColor), paint.letterSpacing, paint.rtl, paint);
+			fillTextRects(ctx, textRunDecorations(layout.lines, paint));
+		}
 		if (model.composing) {
 			ctx.fillStyle = colorToCss(paint.textColor);
 			for (const box of layout.compositionBoxes()) {
@@ -17297,6 +18210,6 @@ function createCanvasSurface(host) {
 	return new CanvasSurface(host);
 }
 //#endregion
-export { prepareInputSurface as $, textContentOf as $i, nextWordEnd as $n, borderRadius as $r, createPaintState as $t, accumulatedOffsetTo as A, UiBeforeInputEvent as Aa, raiseContrast as Ai, editorFor as An, pathValuesEqual as Ar, EditableLayout as At, parseFlexDirection as B, UiWheelEvent as Ba, boxShadowArraysEqual as Bi, caretRectFor as Bn, radialGradient as Br, textMeasureRequest as Bt, describeLength as C, writeOverrideProperty as Ca, hasThemeExtension as Ci, linkOf as Cn, statesEqual as Cr, wordRangeIn as Ct, formatNumber as D, visualState as Da, withThemeExtension as Di, CARET_WIDTH as Dn, validateSubgrid as Dr, ELLIPSIS as Dt, formatExplanation as E, hasVisualState as Ea, themeExtensionsEqual as Ei, CARET_BLINK_MS as En, UI_SUBGRID_AXES as Er, spannedRunsFor as Et, constraintsEqual as F, UiKeyboardEvent as Fa, spacingEqual as Fi, nextCaretToggle as Fn, transformsEqual as Fr, fillTextRects as Ft, MainAxisAlignment as G, UiBinding as Ga, defaultTypography as Gi, offsetAtX as Gn, isFrLength as Gr, fontStackFor as Gt, sizeGridTracks as H, wheelDeltaYOf as Ha, defaultShapes as Hi, lineIndexForOffset as Hn, auto as Hr, textRunDecorations as Ht, tightenConstraints as I, UiPinchEvent as Ia, spacingSteps as Ii, syncEditorValue as In, MAX_GRADIENT_STOPS as Ir, layoutTextLines as It, parseMainAxisAlignment as J, defaultTextStyle as Ji, EditableTextModel as Jn, minmax as Jr, DEFAULT_FONT_SIZE as Jt, parseAlignContent as K, isTypographyRole as Ki, offsetForVerticalMove as Kn, isMinMaxTrack as Kr, registerFontStack as Kt, MAX_MEASURES_PER_CHILD as L, UiPointerEvent as La, defaultShadows as Li, resolveColorValue as Ln, gradientPaint as Lr, runCanvasStyleInto as Lt, LayoutRecord as M, UiFocusEvent as Ma, densityFactors as Mi, isEditableNode as Mn, parseTransform as Mr, buildFontString as Mt, Constraints as N, UiGestureEvent as Na, defaultSpacing as Ni, isMultiline as Nn, transform as Nr, createCanvasTextStyle as Nt, labelNode as O, visualStatesEqual as Oa, contrastRatio as Oi, EDITOR_PROP as On, inputsEqual as Or, layoutParagraph as Ot, clampSize as P, UiInputEvent as Pa, scaleSpacing as Pi, isReadOnly as Pn, transformIsIdentity as Pr, drawText as Pt, pointerDeviceOf as Q, spannedTextOf as Qi, nextGraphemeEnd as Qn, UiBorderRadiuses as Qr, computeObjectFitRect as Qt, isLayoutProtocol as R, UiTextChangeEvent as Ra, shadowsEqual as Ri, isVideoSurface as Rn, gradientsEqual as Rr, runFontString as Rt, SCROLLBAR_LINGER_MS as S, writeDeclaredProperty as Sa, defineThemeExtension as Si, linkHoverOf as Sn, normalizeStates as Sr, selectionRectsIn as St, formatConstraints as T, defaultVisualState as Ta, themeExtension as Ti, setLinkHover as Tn, validateStates as Tr, ParagraphTextMeasurer as Tt, AlignContent as U, UiNodeType as Ua, isShapeName as Ui, lineLimit as Un, fr as Ur, bumpFontStack as Ut, placeGridItems as V, noKeyModifiers as Va, boxShadowsEqual as Vi, lineIndexAtY as Vn, validateGradient as Vr, textRunBackgrounds as Vt, CrossAxisAlignment as W, DirtyFlags as Wa, shapesEqual as Wi, offsetAtPoint as Wn, isAutoLength as Wr, clearFontStacks as Wt, UiPlatformAdapter as X, resolvedSpansOf as Xi, lineEndAt as Xn, repeat as Xr, DEFAULT_TEXT_COLOR as Xt, CanvasPlatformSurface as Y, flattenTextSpans as Yi, graphemeBoundaries as Yn, percent as Yr, DEFAULT_FONT_WEIGHT as Yt, capturePointer as Z, spanAtOffset as Zi, lineStartAt as Zn, resolveLength as Zr, colorToCss as Zt, LABEL_PADDING_X as _, UiNode as _a, darkTheme as _i, isNodeInert as _n, UiProperties as _r, UiInputDispatcher as _t, PaintPictureCache as a, UiBasicColors as aa, uniformBorderRadius as ai, TEXT_MATCHES_PROP as an, resolveProperty as ar, isScrollContainer as at, LayoutEngine as b, overrideSources as ba, withContrast as bi, clearLinkHover as bn, isUiRole as br, paragraphGeometry as bt, EMPTY_RECORDING as c, colorValuesEqual as ca, UiEnvironmentKeys as ci, setMatchRanges as cn, UiGraph as cr, UiFocusManager as ct, tracePathData as d, parseColor as da, noInsets as di, selectableTextNodes as dn, getPropertyNames as dr, SCROLLBAR_INSET as dt, textSpansEqual as ea, borderRadiusCorners as ei, isPaintVisible as en, previousGraphemeStart as er, touchActionFor as et, ScaledImageCache as f, rgb8 as fa, observeViewportInsets as fi, selectableTextOf as fn, inheritedPropertyFlags as fr, SCROLLBAR_MIN_THUMB as ft, paintsAfterChildren as g, UiEnvironment as ga, unknownContainerSize as gi, isNodeHitTestable as gn, propertyValuesEqualByName as gr, scrollbarZoneAt as gt, hasDecorationPhase as h, findEnvironmentKey as ha, containerBands as hi, isNodeFocusable as hn, propertyIsInherited as hr, scrollbarThumbs as ht, traceRoundedRect as i, lightColors as ia, normalizeBorderRadius as ii, DEFAULT_LINE_HEIGHT_FACTOR as in, resolveNumber as ir, UiWheelController as it, contentOffset as j, UiEventType as ja, relativeLuminance as ji, editorOf as jn, UiTransforms as jr, applyCanvasTextStyle as jt, withOverrideSource as k, MOUSE_POINTER as ka, highContrastColors as ki, caretVisibleAt as kn, paintValuesEqual as kr, proportionalFontMetrics as kt, PaintRecorder as l, colorsEqual as la, UiInsetRegistry as li, TEXT_SELECTION_PROP as ln, closestPropertyName as lr, UiHitTester as lt, decorationRect as m, createEnvironmentKey as ma, bandOf as mi, setSelectionRange as mn, propertyEffects as mr, scrollbarThumb as mt, createCanvasSurface as n, colorsEqualPalette as na, borderRadiusIsZero as ni, normalizeVerticalAlign as nn, wordRangeAt as nr, UiGestureRecognizer as nt, paintPictures as o, colorToHex as oa, defineProperty as oi, clearMatchRanges as on, resolvePropertyByName as or, UiKeyboardController as ot, decorationColor as p, rgba as pa, UiContainerSizeSource as pi, selectionRangeOf as pn, inheritedPropertyNames as pr, SCROLLBAR_THICKNESS as pt, parseCrossAxisAlignment as q, typographyEqual as qi, selectionRects as qn, isPercentLength as qr, DEFAULT_FONT_FAMILY as qt, Canvas2DRenderer as r, darkColors as ra, borderRadiusValuesEqual as ri, resolvePaintState as rn, resolveBoolean as rr, UiPinchRecognizer as rt, PaintTarget as s, colorToRgba as sa, propertyValuesEqual as si, matchRangesOf as sn, resolveString as sr, UiPointerController as st, CanvasSurface as t, textStylesEqual as ta, borderRadiusEqual as ti, normalizeTextAlign as tn, previousWordStart as tr, UiTouchScroller as tt, replayPaint as u, normalizeColor as ua, insetsEqual as ui, clearSelectionRange as un, findPropertyDefinition as ur, SCROLLBAR_HOVER_ZONE as ut, drawOverlayShapes as v, DirtyNodeSet as va, lightTheme as vi, isNodeSelectable as vn, UI_ROLES as vr, hasDrawnText as vt, describeOverrides as w, UiVisualState as wa, noThemeExtensions as wi, linkRunAtPointIn as wn, validateRole as wr, CharacterCountTextMeasurer as wt, SCROLLBAR_FADE_MS as x, resetOverrideWarnings as xa, withDensity as xi, hasTextLinks as xn, isUiSemanticState as xr, paragraphGeometryFrom as xt, labelOrigin as y, clearOverrideProperty as ya, themesEqual as yi, resolveCursor as yn, UI_SEMANTIC_STATES as yr, offsetAtPointIn as yt, FlexDirection as z, UiWheelDeltaMode as za, boxShadow as zi, videoFrameSize as zn, linearGradient as zr, spanOf as zt };
+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-5dU-U3qQ.js.map
+//# sourceMappingURL=CanvasSurface-ifHkg0-g.js.map