gesso-framework 0.4.2 → 0.5.1

package/dist/index.js

@@ -1,7 +1,9 @@
-import { $ as structurallyEqual, A as printPropValue, B as channel, C as captureConsole, D as formatNodePath, E as formatAge, F as applyPatch, G as mutate, H as viewKeys, I as applyPatches, J as select, K as Resource, L as diffProjection, M as provide, N as findUnplainPath, O as formatNodeReport, P as requirePlainData, Q as equalityOf, R as isChannelClientMessage, S as workerHandle, T as describeStream, U as debounced, V as defineChannel, W as throttled, X as computed, Y as ComputedCell, Z as derive, _ as isHubMessage, a as undoable, at as isOutputTarget, b as portHandle, c as classifyStorageError, ct as trackRead, d as storageReadValue, et as InternalState, f as pick, g as APPLICATION_WORKER, h as serveChannels, i as OpfsStorage, it as into, j as ProvidedChannel, k as formatStream, l as storageErrorMessage, lt as withBodyOf, m as serve, n as persisted, nt as InputCell, o as UndoStack, ot as output, p as pickKeys, q as resource, r as IndexedDbStorage, rt as input, s as MemoryStorage, st as outputTargetOf, t as PersistedState, tt as internalState, u as storageReadFailure, v as isPortErrorMessage, w as isConsoleEntryMessage, x as servePorts, y as isPortHandshake, z as isChannelHostMessage } from "./persisted-CsTPnjkc.js";
+import { $ as structurallyEqual, A as printPropValue, B as channel, C as captureConsole, D as formatNodePath, E as formatAge, F as applyPatch, G as mutate, H as viewKeys, I as applyPatches, J as select, K as Resource, L as diffProjection, M as provide, N as findUnplainPath, O as formatNodeReport, P as requirePlainData, Q as equalityOf, R as isChannelClientMessage, S as workerHandle, T as describeStream, U as debounced, V as defineChannel, W as throttled, X as computed, Y as ComputedCell, Z as derive, _ as isHubMessage, a as undoable, at as isOutputTarget, b as portHandle, c as classifyStorageError, ct as trackRead, d as storageReadValue, et as InternalState, f as pick, g as APPLICATION_WORKER, h as serveChannels, i as OpfsStorage, it as into, j as ProvidedChannel, k as formatStream, l as storageErrorMessage, lt as withBodyOf, m as serve, n as persisted, nt as InputCell, o as UndoStack, ot as output, p as pickKeys, q as resource, r as IndexedDbStorage, rt as input, s as MemoryStorage, st as outputTargetOf, t as PersistedState, tt as internalState, u as storageReadFailure, v as isPortErrorMessage, w as isConsoleEntryMessage, x as servePorts, y as isPortHandshake, z as isChannelHostMessage } from "./persisted-pix1fS1D.js";
 import { a as Each, i as show, n as getComponentMetadata, o as each, r as Show, t as createComponent } from "./createComponent-3n1ZSql8.js";
+import { c as channelSchema, l as describeChannel, t as AGENT_PORT } from "./remote-xxij8zXe.js";
+import { n as serveApplicationAgent } from "./app-BvlIO1G9.js";
 import { BehaviorSubject, EMPTY, Observable, Subject, Subscription, distinctUntilChanged, map } from "rxjs";
-import { AnimationDriver, Box, Canvas2DRenderer, CanvasPlatformSurface, CanvasTextMeasurer, Constraints, DefaultImageResolver, DefaultVideoResolver, DirtyFlags, EnvironmentNotifier, FocusNotifier, IconRasterizer, LayoutEngine, LayoutInspector, LayoutNotifier, MARK_PREFIX, Stack, TEXT_RUN_ID_SEPARATOR, UI_ROLES, UI_SEMANTIC_STATES, UiAnimationFrameClock, UiEditingController, UiEnvironmentKeys, UiEventType, UiFindController, UiFocusManager, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInsetRegistry, UiKeyboardController, UiNodeType, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiScheduler, UiSelectionController, UiSharedElements, UiSpring, UiTimerFrameClock, UiTouchScroller, UiVirtualSheet, UiVirtualWindow, UiWheelController, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPURenderer, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, capturePointer, createCanvasSurface, createTween, createWebGPUSurface, defaultMotion, describeOverrides, diffSemantics, dragSessionFor, easings, formatExplanation, insetsEqual, isComponentLikeElement, isObservable, isWebGPUAvailable, linear, linkOf, markInstant, markNow, measure, measureSpan, motion, noInsets, observeViewportInsets, percent, performanceMarksEnabled, pointerDeviceOf, prepareInputSurface, propertyEffects, recordsEqual, registerFontStack, resolveCursor, scrollRange, scrollbarThumb, semanticsInertAbove, setPerformanceMarks, setPerformanceMarks as setPerformanceMarks$1, textRunOfRecordId, themeTokens, touchActionFor, wheelDeltaYOf } from "gesso-core";
+import { AnimationDriver, Box, Canvas2DRenderer, CanvasPlatformSurface, CanvasTextMeasurer, Constraints, DefaultImageResolver, DefaultVideoResolver, DirtyFlags, EnvironmentNotifier, FocusNotifier, IconRasterizer, LayoutEngine, LayoutInspector, LayoutNotifier, MARK_PREFIX, Stack, TEXT_RUN_ID_SEPARATOR, UI_ROLES, UI_SEMANTIC_STATES, UiAnimationFrameClock, UiEditingController, UiEnvironmentKeys, UiEventType, UiFindController, UiFocusManager, UiGestureRecognizer, UiGraph, UiGraphBuilder, UiHitTester, UiHostFrameClock, UiInputDispatcher, UiInsetRegistry, UiKeyboardController, UiNodeType, UiPlatformAdapter, UiPointerController, UiPointerEvent, UiScheduler, UiSelectionController, UiSharedElements, UiSpring, UiTimerFrameClock, UiTouchScroller, UiVirtualSheet, UiVirtualWindow, UiWheelController, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_SHEET_PROP, VIRTUAL_WINDOW_PROP, WebGPURenderer, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, capturePointer, createCanvasSurface, createTween, createWebGPUSurface, defaultMotion, defineModifier, describeOverrides, diffSemantics, dragSessionFor, dropIndexShifts, easings, formatExplanation, insetsEqual, isComponentLikeElement, isObservable, isWebGPUAvailable, linear, linkOf, markInstant, markNow, measure, measureSpan, motion, noInsets, observeViewportInsets, percent, performanceMarksEnabled, pointerDeviceOf, prepareInputSurface, propertyEffects, recordsEqual, registerFontStack, resolveCursor, rewalkSemantics, scrollRange, scrollbarThumb, semanticsInertAbove, semanticsMemory, setPerformanceMarks, setPerformanceMarks as setPerformanceMarks$1, textRunOfRecordId, themeTokens, touchActionFor, wheelDeltaYOf } from "gesso-core";
 //#region src/Component.ts
 /**
 * Base class for all Gesso framework components.
@@ -759,6 +761,7 @@ function createChannelRegistry(registrations, onError) {
 	}
 	return {
 		registry,
+		workers: handles,
 		dispose: () => {
 			for (const channel of local) channel.dispose();
 			local.length = 0;
@@ -851,6 +854,7 @@ let OverlayLayer = class OverlayLayer extends Component {
 				position: "absolute",
 				anchor: entry.anchor ?? void 0,
 				anchorPoint: entry.anchor == null ? entry.point : void 0,
+				anchorRect: entry.anchor == null ? void 0 : entry.anchorRect,
 				placement: entry.placement,
 				anchorOffset: entry.offset,
 				top: entry.top,
@@ -859,7 +863,8 @@ let OverlayLayer = class OverlayLayer extends Component {
 				left: entry.left,
 				zIndex: entry.zIndex,
 				...centering(entry),
-				...inheritedFrom(entry.environment ?? entry.anchor ?? null)
+				...inheritedFrom(entry.environment ?? entry.anchor ?? null),
+				modifiers: followEnvironment(entry.environment ?? entry.anchor ?? null)
 			}, entry.content));
 		}
 		return elements;
@@ -902,11 +907,7 @@ function centering(entry) {
 }
 /**
 * The scoped values an entry's content should keep, re-provided on the
-* box that holds it.
-*
-* Read once, when the entry opens. An overlay that outlives a theme
-* change re-opens; nothing here watches, because an entry's content is
-* built once too.
+* box that holds it, as they are when the entry opens.
 */
 function inheritedFrom(node) {
 	const environment = node?.environment;
@@ -917,6 +918,28 @@ function inheritedFrom(node) {
 		contentColor: environment.get(UiEnvironmentKeys.contentColor)
 	};
 }
+/**
+* The same values again whenever they change where the entry was
+* declared, for as long as it is open.
+*
+* Reading them once let a dialog open while the page went dark (the
+* system's setting changed, or the theme a person chose arrived from
+* another worker a moment after they opened it) stay light over a dark
+* page until it was closed.
+*/
+const followEnvironmentKind = defineModifier({
+	name: "overlayEnvironment",
+	attach(host, from) {
+		host.onEnvironment(() => {
+			host.set("theme", host.environment(UiEnvironmentKeys.theme, from));
+			host.set("textStyle", host.environment(UiEnvironmentKeys.textStyle, from));
+			host.set("contentColor", host.environment(UiEnvironmentKeys.contentColor, from));
+		}, from);
+	}
+});
+function followEnvironment(node) {
+	return node === null ? [] : [followEnvironmentKind(node)];
+}
 //#endregion
 //#region src/ComponentElement.ts
 function isComponentElement(value) {
@@ -1143,12 +1166,12 @@ var ComponentHost = class {
 			return;
 		}
 		if (isObservable(provided)) {
-			const subscription = provided.subscribe((value) => cell.next(value));
+			const subscription = provided.subscribe((value) => pushInput(cell, value));
 			this.inputSubscriptions.set(inputName, subscription);
 			this.subscriptions.add(subscription);
 			return;
 		}
-		cell.next(provided);
+		pushInput(cell, provided);
 	}
 	validateInputs() {
 		const metadata = getComponentMetadata(this.element.component);
@@ -1173,6 +1196,27 @@ var ComponentHost = class {
 		}
 	}
 };
+/**
+* Hands an input cell a value from its parent, unless it already holds
+* that very value.
+*
+* A parent that re-renders hands every child its props again, and a
+* prop that is an Observable built in the parent's render is a new
+* source each time, which re-subscribes and replays the current value.
+* Pushed through regardless, that replay re-ran every binding derived
+* from the input. In the issue tracker's editor, inserting one block
+* re-rendered the list of 2,868, each replay rebuilt its block's text
+* runs as a new array, and every editable on the page was re-measured:
+* 12,912 nodes for one Enter. Values that cross into a component are
+* treated as immutable everywhere else in the framework (bindings hold
+* on to them, patches share structure), so the same reference is the
+* same value and there is nothing to tell the child.
+*/
+function pushInput(cell, value) {
+	const current = cell.getValue();
+	if (current !== void 0 && Object.is(current, value)) return;
+	cell.next(value);
+}
 //#endregion
 //#region src/ComponentHostResolver.ts
 /**
@@ -1704,6 +1748,7 @@ function filesDuringDrag(event) {
 var ShellService = class {
 	handler = null;
 	scheme = internalState("light");
+	contrastState = internalState("standard");
 	insets = internalState(noInsets);
 	isFullscreen = internalState(false);
 	/** Popups asked for and not yet answered, by the id sent with each. */
@@ -1712,6 +1757,9 @@ var ShellService = class {
 	/** Storage requests asked for and not yet answered, by the id sent with each. */
 	stores = /* @__PURE__ */ new Map();
 	nextStorageId = 1;
+	/** Clipboard writes asked for and not yet answered, by the id sent with each. */
+	copies = /* @__PURE__ */ new Map();
+	nextCopyId = 1;
 	/** File requests asked for and not yet answered, by the id sent with each. */
 	files = /* @__PURE__ */ new Map();
 	nextFileId = 1;
@@ -1744,6 +1792,18 @@ var ShellService = class {
 	* read it beside a channel's view; its setter stays private here.
 	*/
 	colorScheme = this.scheme;
+	/**
+	* The contrast the platform is asking for: `high` when the person has
+	* turned up contrast or turned on a contrast theme, `standard`
+	* otherwise. Reported by the shell like `colorScheme`, and as with it,
+	* what it means is the application's: `withContrast(theme, contrast)`
+	* is the theme that answers it.
+	*
+	*   const theme = combineLatest([shell.colorScheme, shell.contrast]).pipe(
+	*     map(([scheme, contrast]) => withContrast(scheme === 'dark' ? darkTheme : lightTheme, contrast))
+	*   );
+	*/
+	contrast = this.contrastState;
 	/** The current appearance, for code that needs it without subscribing. */
 	get currentColorScheme() {
 		return this.scheme.value;
@@ -1783,6 +1843,10 @@ var ShellService = class {
 	applyColorScheme(scheme) {
 		if (this.scheme.value !== scheme) this.scheme.value = scheme;
 	}
+	/** Called by the runtime when the shell reports the contrast; not for applications. */
+	applyContrast(contrast) {
+		if (this.contrastState.value !== contrast) this.contrastState.value = contrast;
+	}
 	/**
 	* Called by the runtime when the shell reports the platform's insets.
 	*
@@ -1793,12 +1857,44 @@ var ShellService = class {
 	applyViewportInsets(insets) {
 		if (!insetsEqual(this.insets.value, insets)) this.insets.value = insets;
 	}
-	/** Puts text on the system clipboard. */
+	/**
+	* Puts text on the system clipboard, and answers whether it got there.
+	*
+	* Most callers ignore the answer, and may: the text is on its way the
+	* moment this returns. It is for an application that tells the person
+	* what happened, a "Copied" toast after a menu command, say, which
+	* would be a lie on the occasions the browser refused. It does refuse:
+	* the clipboard wants a focused document, and some browsers a fresh
+	* gesture, and a key pressed in a render worker reaches the window's
+	* clipboard a message later than it reached the canvas.
+	*
+	* With no shell installed the answer is false, as `openPopup`'s is,
+	* rather than a promise that never settles.
+	*/
 	copyText(text) {
-		this.handler?.({
+		const handler = this.handler;
+		if (handler === void 0 || handler === null) return Promise.resolve(false);
+		const id = this.nextCopyId++;
+		const settled = new Promise((resolve) => {
+			this.copies.set(id, resolve);
+		});
+		handler({
 			type: "clipboard",
+			id,
 			text
 		});
+		return settled;
+	}
+	/**
+	* Called by the runtime when the shell reports whether a clipboard
+	* write landed. Not for applications. An unknown id is ignored, on
+	* `settlePopup`'s terms.
+	*/
+	settleClipboard(id, copied) {
+		const resolve = this.copies.get(id);
+		if (resolve === void 0) return;
+		this.copies.delete(id);
+		resolve(copied);
 	}
 	/** Opens a URL in the user's browser, in a new tab or window. */
 	openUrl(url) {
@@ -2591,7 +2687,7 @@ var EditingProxy = class {
 	* the reason the field's semantics live here rather than on a second
 	* element beside it.
 	*/
-	describe(record) {
+	describe(record, activeDescendant, controls) {
 		if (this.disposed) return;
 		const textarea = this.textarea;
 		if (record === null) {
@@ -2603,7 +2699,11 @@ var EditingProxy = class {
 				"aria-required",
 				"aria-invalid",
 				"aria-readonly",
-				"aria-disabled"
+				"aria-disabled",
+				"aria-expanded",
+				"aria-activedescendant",
+				"aria-controls",
+				"aria-autocomplete"
 			]) textarea.removeAttribute(attribute);
 			return;
 		}
@@ -2616,6 +2716,10 @@ var EditingProxy = class {
 		setOrClear(textarea, "aria-invalid", states.has("invalid") ? "true" : void 0);
 		setOrClear(textarea, "aria-readonly", states.has("readonly") ? "true" : void 0);
 		setOrClear(textarea, "aria-disabled", record.disabled === true ? "true" : void 0);
+		setOrClear(textarea, "aria-expanded", states.has("expanded") ? "true" : states.has("collapsed") ? "false" : void 0);
+		setOrClear(textarea, "aria-activedescendant", activeDescendant);
+		setOrClear(textarea, "aria-controls", controls);
+		setOrClear(textarea, "aria-autocomplete", record.autocomplete);
 	}
 	dispose() {
 		if (this.disposed) return;
@@ -2678,7 +2782,8 @@ var EditingProxy = class {
 			const clipboard = event.clipboardData;
 			event.preventDefault();
 			const text = clipboard?.getData("text/plain") ?? "";
-			if (text.length > 0) this.sink.paste(text);
+			const html = clipboard?.getData("text/html") ?? "";
+			if (text.length > 0 || html.length > 0) this.sink.paste(text, html.length > 0 ? html : null);
 		};
 		/**
 		* A paste aimed at the canvas rather than at the field.
@@ -2703,6 +2808,7 @@ var EditingProxy = class {
 			if (clipboard === null || state === null) return;
 			event.preventDefault();
 			clipboard.setData("text/plain", state.text.slice(state.selectionStart, state.selectionEnd));
+			if (state.html !== void 0) clipboard.setData("text/html", state.html);
 		};
 		const onCut = (event) => {
 			const state = this.state;
@@ -2757,17 +2863,15 @@ var EditingProxy = class {
 	}
 };
 /**
-* Writes text to the system clipboard from the main thread. The async
-* API needs a secure context and, in some browsers, a recent user
-* gesture; the `execCommand` fallback covers the rest.
+* Writes text to the system clipboard from the main thread, and answers
+* whether it got there. The async API needs a secure context and, in
+* some browsers, a recent user gesture; the `execCommand` fallback
+* covers the rest. False means both refused. It never rejects.
 */
 function writeClipboard(text, doc = document) {
 	const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
-	if (clipboard !== void 0 && typeof clipboard.writeText === "function") {
-		clipboard.writeText(text).catch(() => copyWithExecCommand(text, doc));
-		return;
-	}
-	copyWithExecCommand(text, doc);
+	if (clipboard !== void 0 && typeof clipboard.writeText === "function") return clipboard.writeText(text).then(() => true, () => copyWithExecCommand(text, doc));
+	return Promise.resolve(copyWithExecCommand(text, doc));
 }
 function copyWithExecCommand(text, doc) {
 	const previous = doc.activeElement;
@@ -2778,7 +2882,9 @@ function copyWithExecCommand(text, doc) {
 	doc.body.appendChild(scratch);
 	scratch.select();
 	try {
-		doc.execCommand("copy");
+		return doc.execCommand("copy");
+	} catch {
+		return false;
 	} finally {
 		scratch.remove();
 		previous?.focus?.({ preventScroll: true });
@@ -2802,7 +2908,9 @@ const STATE_ATTRIBUTES = {
 	invalid: ["aria-invalid", "true"],
 	required: ["aria-required", "true"],
 	readonly: ["aria-readonly", "true"],
-	modal: ["aria-modal", "true"]
+	modal: ["aria-modal", "true"],
+	multiselectable: ["aria-multiselectable", "true"],
+	current: ["aria-current", "true"]
 };
 /**
 * Roles whose checked state is required rather than optional.
@@ -2848,8 +2956,14 @@ const RECORD_ATTRIBUTES = [
 	"aria-invalid",
 	"aria-required",
 	"aria-readonly",
-	"aria-modal"
+	"aria-modal",
+	"aria-multiselectable",
+	"aria-current",
+	"aria-activedescendant",
+	"aria-controls",
+	"aria-autocomplete"
 ];
+let mirrors = 0;
 /**
 * Roles whose accessible name comes from what the element contains
 * rather than from an `aria-label`, plus prose, which has no role at
@@ -2915,6 +3029,12 @@ var SemanticsMirror = class {
 	applying = false;
 	focusedId = null;
 	disposed = false;
+	/**
+	* Prefixes every element's DOM id, which `aria-activedescendant`
+	* refers to. Per mirror, because two apps on one page have nodes with
+	* the same ids.
+	*/
+	idPrefix = `gesso-${mirrors++}-`;
 	constructor(canvas, sink, editing = null) {
 		this.canvas = canvas;
 		this.sink = sink;
@@ -2930,7 +3050,7 @@ var SemanticsMirror = class {
 			width: "0px",
 			height: "0px",
 			pointerEvents: "none",
-			overflow: "hidden",
+			overflow: "clip",
 			margin: "0",
 			padding: "0",
 			border: "0",
@@ -2997,11 +3117,18 @@ var SemanticsMirror = class {
 				record
 			});
 			this.ids.set(element, record.id);
+			element.id = this.idPrefix + record.id;
 		} else existing.record = record;
 		this.describe(element, record);
 		this.place(element, record);
 		if (existing?.box !== void 0) this.position(existing);
-		if (record.id === this.focusedId) this.editing?.describe(this.editing.active ? record : null);
+		if (record.id === this.focusedId) this.describeEditing(this.editing?.active === true ? record : null);
+	}
+	/** Hands the proxy the focused editable's record, with the DOM ids of its active descendant and what it controls. */
+	describeEditing(record) {
+		const active = record?.activeDescendant;
+		const controls = record?.controls;
+		this.editing?.describe(record, active === void 0 ? void 0 : this.idPrefix + active, controls === void 0 ? void 0 : this.idPrefix + controls);
 	}
 	createElement() {
 		const element = this.doc.createElement("div");
@@ -3016,7 +3143,7 @@ var SemanticsMirror = class {
 			padding: "0",
 			border: "0",
 			outline: "none",
-			overflow: "hidden",
+			overflow: "clip",
 			pointerEvents: "none",
 			color: "transparent"
 		});
@@ -3047,6 +3174,9 @@ var SemanticsMirror = class {
 		setNumber(element, "aria-setsize", record.setSize);
 		setNumber(element, "aria-level", record.level);
 		if (record.valueText !== void 0) element.setAttribute("aria-valuetext", record.valueText);
+		if (record.activeDescendant !== void 0) element.setAttribute("aria-activedescendant", this.idPrefix + record.activeDescendant);
+		if (record.controls !== void 0) element.setAttribute("aria-controls", this.idPrefix + record.controls);
+		if (record.autocomplete !== void 0) element.setAttribute("aria-autocomplete", record.autocomplete);
 	}
 	/**
 	* Puts an element under its parent, at the index the record gives.
@@ -3146,7 +3276,7 @@ var SemanticsMirror = class {
 		this.focusedId = id;
 		const entry = id === null ? void 0 : this.entries.get(id);
 		if (this.editing !== null && this.editing.active) {
-			this.editing.describe(entry?.record ?? null);
+			this.describeEditing(entry?.record ?? null);
 			this.applying = true;
 			try {
 				this.editing.focus();
@@ -3155,7 +3285,7 @@ var SemanticsMirror = class {
 			}
 			return;
 		}
-		this.editing?.describe(null);
+		this.describeEditing(null);
 		this.applying = true;
 		try {
 			if (entry !== void 0) entry.element.focus({ preventScroll: true });
@@ -3184,9 +3314,10 @@ var SemanticsMirror = class {
 		const onKeyUp = (event) => this.sink.keyUp?.(event);
 		const onPaste = (event) => {
 			const text = event.clipboardData?.getData("text/plain") ?? "";
-			if (text.length === 0) return;
+			const html = event.clipboardData?.getData("text/html") ?? "";
+			if (text.length === 0 && html.length === 0) return;
 			event.preventDefault();
-			this.sink.paste?.(text);
+			this.sink.paste?.(text, html.length > 0 ? html : null);
 		};
 		this.container.addEventListener("click", onClick);
 		this.container.addEventListener("focusin", onFocusIn);
@@ -3402,6 +3533,49 @@ function observeColorScheme(onChange) {
 	return observeMediaQuery("(prefers-color-scheme: dark)", (dark) => onChange(dark ? "dark" : "light"));
 }
 //#endregion
+//#region src/app/contrast.ts
+/**
+* Watches the platform's contrast preference.
+*
+* `high` when the person has asked for more contrast
+* (`prefers-contrast: more`, macOS's Increase contrast and its
+* counterparts) or forced colours are on (Windows' contrast themes). A
+* canvas gets no forced colours from the browser, which only repaints
+* the DOM, so the application has to hear about it and draw its own:
+* `withContrast(theme, contrast)` is the theme that does.
+*
+* Shell-side, reported once at once and again on change, for the reason
+* `observeColorScheme` gives.
+*/
+function observeContrast(onChange) {
+	let more = false;
+	let forced = false;
+	let last = null;
+	let ready = false;
+	const report = () => {
+		if (!ready) return;
+		const contrast = more || forced ? "high" : "standard";
+		if (contrast !== last) {
+			last = contrast;
+			onChange(contrast);
+		}
+	};
+	const stopMore = observeMediaQuery("(prefers-contrast: more)", (matches) => {
+		more = matches;
+		report();
+	});
+	const stopForced = observeMediaQuery("(forced-colors: active)", (matches) => {
+		forced = matches;
+		report();
+	});
+	ready = true;
+	report();
+	return () => {
+		stopMore();
+		stopForced();
+	};
+}
+//#endregion
 //#region src/app/reducedMotion.ts
 /**
 * Watches the platform's reduced-motion preference.
@@ -3807,6 +3981,15 @@ var WorkerApp = class {
 	get appLogic() {
 		return this.appLogicWorker === void 0 ? void 0 : portHandle(this.appLogicWorker);
 	}
+	/**
+	* Opens a port to whatever the render worker serves under `key`, or
+	* returns undefined before `mount` has started it. The development
+	* agent bridge asks for `gesso:agent` this way; nothing else in the
+	* shell talks to the render worker except through its protocol.
+	*/
+	openRenderPort(key) {
+		return this.renderWorker === void 0 ? void 0 : portHandle(this.renderWorker).open(key);
+	}
 	mount(host) {
 		const element = resolveHost(host);
 		this.host = element;
@@ -3889,9 +4072,10 @@ var WorkerApp = class {
 				type: "compositionEnd",
 				text
 			}),
-			paste: (text) => this.post({
+			paste: (text, html) => this.post({
 				type: "paste",
-				text
+				text,
+				...html === null ? {} : { html }
 			}),
 			blur: () => this.post({ type: "blur" }),
 			keyDown: (event) => this.forwardKeyDown(event, true),
@@ -3904,13 +4088,21 @@ var WorkerApp = class {
 			}),
 			keyDown: (event) => this.forwardKeyDown(event),
 			keyUp: (event) => this.forwardKeyUp(event),
-			paste: (text) => this.post({
+			paste: (text, html) => this.post({
 				type: "paste",
-				text
+				text,
+				...html === null ? {} : { html }
 			})
 		}, this.proxy);
+		const webmcp = this.options.webmcp;
+		if (webmcp !== void 0 && webmcp !== false) import("./webmcp-CJVFvAHe.js").then((n) => n.a).then((agent) => agent.connectWebMcp(this, webmcp === true ? {} : webmcp)).then((disconnect) => {
+			if (this.renderWorker === worker) this.disconnectWebMcp = disconnect;
+			else disconnect();
+		}, (error) => console.warn("[gesso] WebMCP could not register the channels:", error));
 		return () => this.dispose();
 	}
+	/** Removes the WebMCP tools `webmcp` registered, if it did. */
+	disconnectWebMcp = null;
 	/**
 	* An error the browser raised *at the worker object*, which is not
 	* the same thing as the worker reporting one.
@@ -4075,6 +4267,8 @@ var WorkerApp = class {
 		this.frameHandle = requestAnimationFrame(step);
 	}
 	dispose() {
+		this.disconnectWebMcp?.();
+		this.disconnectWebMcp = null;
 		this.ready = false;
 		this.setFrameLoop(false);
 		this.detachColorScheme?.();
@@ -4136,6 +4330,7 @@ var WorkerApp = class {
 				nodes: message.nodes,
 				measured: message.measured,
 				relayoutRoots: message.relayoutRoots,
+				layoutPasses: message.layoutPasses,
 				at: message.at,
 				inputLatencyMs: message.inputLatencyMs,
 				phases: message.phases,
@@ -4182,7 +4377,11 @@ var WorkerApp = class {
 			return;
 		}
 		if (message.type === "clipboard") {
-			writeClipboard(message.text);
+			writeClipboard(message.text).then((copied) => this.post({
+				type: "clipboardResult",
+				id: message.id,
+				copied
+			}));
 			return;
 		}
 		if (message.type === "openUrl") {
@@ -4522,6 +4721,10 @@ var WorkerApp = class {
 				reduced
 			});
 		});
+		const detachContrast = observeContrast((contrast) => this.post({
+			type: "contrast",
+			contrast
+		}));
 		const onPointerMove = (event) => {
 			const { x, y } = toLocal(event.clientX, event.clientY);
 			const move = {
@@ -4606,6 +4809,21 @@ var WorkerApp = class {
 		canvas.addEventListener("wheel", onWheel, { passive: false });
 		canvas.addEventListener("keydown", onKeyDown);
 		canvas.addEventListener("keyup", onKeyUp);
+		const aimedAtPage = (target) => target === null || target === document || target === document.body || target === document.documentElement;
+		const onPageKeyDown = (event) => {
+			if (aimedAtPage(event.target)) {
+				canvas.focus({ preventScroll: true });
+				this.forwardKeyDown(event);
+			}
+		};
+		const onPageKeyUp = (event) => {
+			if (aimedAtPage(event.target)) this.forwardKeyUp(event);
+		};
+		const pageKeys = this.options.pageKeys === true;
+		if (pageKeys) {
+			document.addEventListener("keydown", onPageKeyDown);
+			document.addEventListener("keyup", onPageKeyUp);
+		}
 		window.addEventListener("scroll", onCanvasMayHaveMoved, {
 			capture: true,
 			passive: true
@@ -4613,6 +4831,7 @@ var WorkerApp = class {
 		window.addEventListener("resize", onCanvasMayHaveMoved);
 		return () => {
 			detachReducedMotion();
+			detachContrast();
 			detachFullscreen();
 			detachFileDrop();
 			canvas.removeEventListener("mousedown", onMouseDown);
@@ -4624,6 +4843,10 @@ var WorkerApp = class {
 			canvas.removeEventListener("wheel", onWheel);
 			canvas.removeEventListener("keydown", onKeyDown);
 			canvas.removeEventListener("keyup", onKeyUp);
+			if (pageKeys) {
+				document.removeEventListener("keydown", onPageKeyDown);
+				document.removeEventListener("keyup", onPageKeyUp);
+			}
 			window.removeEventListener("scroll", onCanvasMayHaveMoved, { capture: true });
 			window.removeEventListener("resize", onCanvasMayHaveMoved);
 			this.dropPendingMove();
@@ -5097,10 +5320,19 @@ function parseUrl(url) {
 }
 /** Joins a path and a query back into the url the history stores. */
 function formatUrl(path, query = {}) {
-	const pairs = Object.entries(query).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+	const pairs = Object.entries(query).map(([key, value]) => `${encodeQueryPart(key)}=${encodeQueryPart(value)}`);
 	const normalized = `/${pathSegments(path).join("/")}`;
 	return pairs.length === 0 ? normalized : `${normalized}?${pairs.join("&")}`;
 }
+/**
+* Encodes a query key or value, leaving the characters a query may hold
+* as they are (`,` `:` `@` `/`), so a list of values reads as one:
+* `status=todo,done`, not `status=todo%2Cdone`. What would change how
+* the query parses (`&`, `=`, `+`, `#`) is still encoded.
+*/
+function encodeQueryPart(text) {
+	return encodeURIComponent(text).replace(/%2C/gi, ",").replace(/%3A/gi, ":").replace(/%40/gi, "@").replace(/%2F/gi, "/");
+}
 function splitOnce(text, separator) {
 	const index = text.indexOf(separator);
 	return index === -1 ? [text, ""] : [text.slice(0, index), text.slice(index + separator.length)];
@@ -5208,7 +5440,7 @@ var RouterService = class {
 	*/
 	params(route) {
 		const match = this.match.value;
-		if (match === null || !match.chain.includes(route)) return null;
+		if (match === null || !inChain(match.chain, route)) return null;
 		return match.params;
 	}
 	/** The same, as a cell, for binding a screen's title or fields. */
@@ -5300,7 +5532,7 @@ var RouterService = class {
 	isActive(route) {
 		return computed(() => {
 			const match = this.match.value;
-			return match !== null && match.chain.includes(route);
+			return match !== null && inChain(match.chain, route);
 		});
 	}
 	/**
@@ -5431,6 +5663,23 @@ function sameParams(a, b) {
 	const keys = Object.keys(left);
 	return keys.length === Object.keys(right).length && keys.every((key) => left[key] === right[key]);
 }
+/**
+* Whether a route is in a matched chain: the same object, or a route
+* declared with the same path.
+*
+* Identity alone was the original test, and it is right for a table
+* loaded once. It fails silently under a dev server's hot replacement:
+* a route table that imports its screens, with screens that import the
+* table to read their params, is an import cycle, and after a hot edit
+* Vite can serve the two sides as `routes.tsx` and `routes.tsx?t=…`.
+* The table then loads twice, the router holds one copy's route objects
+* and the screens hold the other's, and every `params(route)` answers
+* null, so a team page quietly showed the default team. Matching is by
+* path already, so two routes with one path are one route to the url.
+*/
+function inChain(chain, route) {
+	return chain.some((link) => link === route || link.path === route.path);
+}
 //#endregion
 //#region src/app/FindService.ts
 /**
@@ -5550,14 +5799,61 @@ var EditingService = class {
 	* scroll already applied: a popup placed under the caret adds the
 	* node's position on screen and nothing else.
 	*
+	* `offset` asks about a caret at another character than the one the
+	* caret is at: the start of the word being completed, so its list
+	* stays put as the word grows. With an overlay's `anchorRect` and the
+	* field as its anchor, the list follows the field from then on.
+	*
 	* Null when the node is not an editable, when it has not been laid
 	* out yet, or before the runtime has wired the controller — all
 	* three of which are "ask again next frame" rather than errors, and
 	* all three of which happen during the frame a field first appears.
 	*/
-	caretRectOf(node) {
+	caretRectOf(node, offset) {
 		if (node === null || this.controller === null) return null;
-		return this.controller.caretRectOf(node);
+		return this.controller.caretRectOf(node, offset);
+	}
+	/**
+	* Selects from `anchor` to `focus` and focuses the field the focus is
+	* in: within one field, or across the fields of an editing group (see
+	* `UiEditingGroup`). What an editor does after a command over a
+	* selection (making it bold, say) to leave it selected, since its
+	* fields can only select their own text.
+	*
+	* False when the two ends aren't editables of one group, or before
+	* the runtime has wired the controller.
+	*/
+	select(anchor, focus) {
+		return this.controller?.select(anchor, focus) ?? false;
+	}
+};
+//#endregion
+//#region src/app/ScrollService.ts
+/**
+* Scrolling a node into view, for a component that moves a highlight
+* rather than focus.
+*
+* Focus moved from the keyboard already brings its node into view. A
+* highlight doesn't move focus: a combobox's arrows walk its list while
+* the caret stays in the field, and a grid's cursor can do the same.
+* The list has to follow the highlight all the same, and only the
+* runtime knows where the scroll containers above a node are and how
+* far each has to move. This is the asking.
+*/
+var ScrollService = class {
+	scroller = null;
+	/** Installed by the runtime; without one nothing scrolls. */
+	setScroller(scroller) {
+		this.scroller = scroller;
+	}
+	/**
+	* Scrolls every container above `node` just enough that it's inside
+	* the container's viewport, `padding` pixels from the nearest edge.
+	* Nothing moves when it's visible already. Before the node has been
+	* laid out there is nowhere to scroll it to, and nothing happens.
+	*/
+	scrollIntoView(node, padding = 8) {
+		this.scroller?.(node, padding);
 	}
 };
 //#endregion
@@ -5586,6 +5882,14 @@ var FocusService = class {
 	focused = internalState(null);
 	/** Whether focus is confined to a subtree by an open trap. */
 	trapped = internalState(false);
+	/**
+	* Whether the focus held is focus the keyboard can see: reached by Tab
+	* or an arrow key, or by code with no pointer since, rather than by a
+	* press. CSS's `:focus-visible`, for something other than a ring that
+	* should answer the keyboard and not the click that happened to focus
+	* the same control: a tooltip, say.
+	*/
+	focusVisible = internalState(false);
 	manager = null;
 	detach = null;
 	/** Actions taken before the runtime installed a manager, in order. */
@@ -5601,6 +5905,7 @@ var FocusService = class {
 		}
 		const focusChange = manager.onFocusChange((node) => {
 			this.focused.value = node;
+			this.focusVisible.value = manager.focusVisible;
 		});
 		const scopeChange = manager.onScopeChange(() => {
 			this.trapped.value = manager.trapped;
@@ -5614,9 +5919,15 @@ var FocusService = class {
 		for (const action of pending) action(manager);
 		this.sync(manager);
 	}
-	/** Gives the node keyboard focus. Non-focusable nodes are ignored. */
-	focus(node) {
-		this.run((manager) => manager.focus(node));
+	/**
+	* Gives the node keyboard focus. Non-focusable nodes are ignored.
+	*
+	* The node is scrolled into view, unless `options.preventScroll` asks
+	* for the page to stay where it is, as `element.focus({ preventScroll:
+	* true })` does in a browser.
+	*/
+	focus(node, options) {
+		this.run((manager) => manager.focus(node, "program", options));
 	}
 	/** Drops focus without moving it anywhere. */
 	blur() {
@@ -5656,6 +5967,7 @@ var FocusService = class {
 	}
 	sync(manager) {
 		this.focused.value = manager.focusedNode;
+		this.focusVisible.value = manager.focusVisible;
 		this.trapped.value = manager.trapped;
 	}
 };
@@ -6570,7 +6882,20 @@ var GessoRuntime = class {
 	sharedElements = new UiSharedElements();
 	focusNotifier = new FocusNotifier();
 	environmentNotifier = new EnvironmentNotifier();
+	/**
+	* The semantics tree: every record by id, and each record's children
+	* in order.
+	*
+	* A record's own `index` is only kept current for the records that
+	* are sent; the order is `semanticsChildren`. Renumbering every
+	* record after an insertion cost a pass over the whole tree on every
+	* structural change, for indices nothing would read until a record
+	* was next sent or the tree was asked for (`semanticsTree`).
+	*/
 	semantics = /* @__PURE__ */ new Map();
+	semanticsChildren = /* @__PURE__ */ new Map();
+	/** The tree in document order with every index current, built when asked for. */
+	semanticsOrdered = null;
 	semanticsListener = null;
 	/**
 	* The box last reported for each mirrored node, so a frame that
@@ -6578,6 +6903,8 @@ var GessoRuntime = class {
 	* them. Only populated while a listener is attached.
 	*/
 	semanticsBoxes = /* @__PURE__ */ new Map();
+	/** What each semantics walk leaves for the next; see `SemanticsMemory`. */
+	semanticsMemory = semanticsMemory();
 	lastFocusedId = null;
 	/**
 	* Where the caret was when `reload` replaced the tree, put back on
@@ -6591,6 +6918,14 @@ var GessoRuntime = class {
 	focusAfterReload = null;
 	/** Whether `focusAfterReload` is waiting to be applied. */
 	restoringFocus = false;
+	/**
+	* Reveals asked for while the layout listeners run, kept until the
+	* frame's boxes have settled; null outside `settleLayout`, where a
+	* reveal is applied at once.
+	*/
+	deferredReveals = null;
+	/** Whether a frame has run out of layout passes and been warned about; see `MAX_LAYOUT_PASSES`. */
+	warnedLayoutPasses = false;
 	/** A frame changed semantics while nothing was listening; see `semanticsTree`. */
 	semanticsStale = false;
 	lastEditingState = null;
@@ -6678,8 +7013,8 @@ var GessoRuntime = class {
 			focus: {
 				isFocused: (node) => this.focusNotifier.isFocused(node),
 				isFocusVisible: (node) => this.focusNotifier.isFocusVisible(node),
-				focus: (node) => {
-					this.focusManager.focus(node);
+				focus: (node, options) => {
+					this.focusManager.focus(node, "program", options);
 				},
 				onFocusChange: (node, listener) => this.focusNotifier.add(node, listener)
 			},
@@ -6719,6 +7054,7 @@ var GessoRuntime = class {
 		if (!this.services.has(FindService)) this.services.register(FindService);
 		if (!this.services.has(FocusService)) this.services.register(FocusService);
 		if (!this.services.has(EditingService)) this.services.register(EditingService);
+		if (!this.services.has(ScrollService)) this.services.register(ScrollService);
 		if (!this.services.has(FrameService)) this.services.register(FrameService);
 		if (!this.services.has(MediaService)) this.services.register(MediaService);
 		if (!this.services.has(FontService)) this.services.register(FontService);
@@ -6793,8 +7129,9 @@ var GessoRuntime = class {
 		this.input = this.createInput();
 		this.services.get(FocusService).setManager(this.input.focus);
 		this.services.get(EditingService).setController(this.input.editing);
-		this.input.focus.onFocusChange((node, source) => {
-			if (node !== null && source !== "pointer") this.scrollIntoView(node);
+		this.services.get(ScrollService).setScroller((node, padding) => this.scrollIntoView(node, padding));
+		this.input.focus.onFocusChange((node, source, options) => {
+			if (node !== null && source !== "pointer" && options.preventScroll !== true) this.scrollIntoView(node);
 		});
 		if (options.width !== void 0 && options.height !== void 0) this.resize(options.width, options.height, this.pixelRatio);
 	}
@@ -7278,6 +7615,10 @@ var GessoRuntime = class {
 	setColorScheme(scheme) {
 		this.services.get(ShellService).applyColorScheme(scheme);
 	}
+	/** The contrast the platform asks for, passed straight to `ShellService`; see `ShellService.contrast`. */
+	setContrast(contrast) {
+		this.services.get(ShellService).applyContrast(contrast);
+	}
 	/**
 	* The platform's own insets, as the shell reports them: the safe area
 	* under a notch or a home indicator and the strip a soft keyboard
@@ -7342,6 +7683,13 @@ var GessoRuntime = class {
 		this.services.get(ShellService).settlePopup(id, opened);
 	}
 	/**
+	* Reports whether a clipboard write landed, settling the promise
+	* `ShellService.copyText` returned.
+	*/
+	settleClipboard(id, copied) {
+		this.services.get(ShellService).settleClipboard(id, copied);
+	}
+	/**
 	* Reports what the shell found in `localStorage`, settling the
 	* promise `ShellService.requestStorage` returned.
 	*
@@ -7562,8 +7910,20 @@ var GessoRuntime = class {
 	* Scrolls every scroll container above `node` just enough that the
 	* node is inside its viewport, `padding` pixels from the nearest edge.
 	* Nothing moves when it is already visible.
+	*
+	* Asked for from a layout listener — `autoFocus` taking focus is the
+	* usual one — it waits until the frame's layout has settled, so it
+	* reveals where the node ends up rather than where the first pass
+	* put it (see `settleLayout`).
 	*/
 	scrollIntoView(node, padding = 8) {
+		if (this.deferredReveals !== null) {
+			this.deferredReveals.push({
+				node,
+				padding
+			});
+			return;
+		}
 		for (const adjustment of this.engine.revealAdjustments(node, padding)) {
 			this.smoothScroller.stop(adjustment.container);
 			adjustment.container.setProperty("scrollX", adjustment.scrollX);
@@ -7792,7 +8152,7 @@ var GessoRuntime = class {
 				editing,
 				selection
 			}),
-			wheel: new UiWheelController(hitTester, this.dispatcher, scrollSink, () => this.appRoot ?? root),
+			wheel: new UiWheelController(hitTester, this.dispatcher, scrollSink, () => this.appRoot ?? root, void 0, { pace: true }),
 			keyboard: new UiKeyboardController(this.dispatcher, focus, () => this.appRoot ?? this.layoutRoot(), {
 				editing,
 				selection,
@@ -7824,7 +8184,7 @@ var GessoRuntime = class {
 		if (listener !== null) this.semanticsTree();
 		if (listener === null || this.semantics.size === 0) return;
 		listener({
-			patches: [...this.semantics.values()].map((node) => ({
+			patches: [...this.orderedSemantics().values()].map((node) => ({
 				op: "add",
 				node
 			})),
@@ -7833,6 +8193,14 @@ var GessoRuntime = class {
 		});
 	}
 	/**
+	* The id of the node that holds focus, or null. The same id the
+	* semantics tree keys its records by, so a reader of the tree can
+	* say which control a key press would reach.
+	*/
+	focusedNodeId() {
+		return this.focusManager.focusedNode?.id ?? null;
+	}
+	/**
 	* The semantics tree as of the last frame that changed it.
 	*
 	* Rebuilt here when no mirror was listening and a frame marked it
@@ -7841,10 +8209,59 @@ var GessoRuntime = class {
 	*/
 	semanticsTree() {
 		if (this.semanticsStale) {
-			this.semantics = buildSemanticsTree(this.layoutRoot());
+			this.storeSemantics(buildSemanticsTree(this.layoutRoot(), this.semanticsMemory));
 			this.semanticsStale = false;
 		}
-		return this.semantics;
+		return this.orderedSemantics();
+	}
+	/** Replaces the tree with one built in full, which is in document order. */
+	storeSemantics(tree) {
+		this.semantics = tree;
+		this.semanticsOrdered = tree;
+		this.semanticsChildren = /* @__PURE__ */ new Map();
+		for (const record of tree.values()) {
+			let list = this.semanticsChildren.get(record.parent);
+			if (list === void 0) this.semanticsChildren.set(record.parent, list = []);
+			list.push(record.id);
+		}
+	}
+	/**
+	* The tree in document order, every index current: a walk down
+	* `semanticsChildren`, done when someone asks rather than per frame.
+	* Records whose index had gone out of date are brought up to date in
+	* the store as well.
+	*/
+	orderedSemantics() {
+		if (this.semanticsOrdered !== null) return this.semanticsOrdered;
+		const ordered = /* @__PURE__ */ new Map();
+		const stack = [];
+		const push = (parent) => {
+			const list = this.semanticsChildren.get(parent) ?? [];
+			const indices = semanticIndices(list);
+			for (let i = list.length - 1; i >= 0; i--) stack.push([list[i], indices[i]]);
+		};
+		push(null);
+		while (stack.length > 0) {
+			const [id, index] = stack.pop();
+			let record = this.semantics.get(id);
+			if (record.index !== index) {
+				record = {
+					...record,
+					index
+				};
+				this.semantics.set(id, record);
+			}
+			ordered.set(id, record);
+			push(id);
+		}
+		this.semanticsOrdered = ordered;
+		return ordered;
+	}
+	/** A record's index among its siblings now, which its own `index` may not say. */
+	semanticsIndexOf(record) {
+		const list = this.semanticsChildren.get(record.parent) ?? [];
+		const at = list.indexOf(record.id);
+		return at < 0 ? record.index : semanticIndices(list)[at];
 	}
 	/**
 	* Something an assistive technology did to a mirrored element,
@@ -7925,7 +8342,7 @@ var GessoRuntime = class {
 		const listener = this.semanticsListener;
 		if (rebuild) {
 			if (listener === null) this.semanticsStale = true;
-			else patches = this.rescopeSemantics(frame) ?? this.rebuildSemantics();
+			else patches = this.rescopeSemantics(frame) ?? this.restructureSemantics(frame) ?? this.rebuildSemantics();
 		}
 		if (listener === null) return;
 		const boxes = moved || patches.length > 0 ? this.collectSemanticsBoxes() : EMPTY_BOXES;
@@ -7944,9 +8361,10 @@ var GessoRuntime = class {
 	}
 	/** Walks the whole tree and diffs it against the last one. */
 	rebuildSemantics() {
-		const next = buildSemanticsTree(this.layoutRoot());
-		const patches = diffSemantics(this.semantics, next);
-		this.semantics = next;
+		const previous = this.orderedSemantics();
+		const next = buildSemanticsTree(this.layoutRoot(), this.semanticsMemory);
+		const patches = dropIndexShifts(previous, next, diffSemantics(previous, next));
+		this.storeSemantics(next);
 		this.semanticsStale = false;
 		return patches;
 	}
@@ -8002,7 +8420,7 @@ var GessoRuntime = class {
 		const updates = [];
 		for (const owner of owners) {
 			const previous = this.semantics.get(owner.id);
-			const subtree = buildSemanticsSubtree(owner, previous.parent, previous.index, semanticsInertAbove(owner));
+			const subtree = buildSemanticsSubtree(owner, previous.parent, this.semanticsIndexOf(previous), semanticsInertAbove(owner), this.semanticsMemory);
 			if (subtree === null) return null;
 			let covered = 0;
 			for (const id of this.semanticIdsUnder(owner)) {
@@ -8010,13 +8428,18 @@ var GessoRuntime = class {
 				if (next === void 0) return null;
 				covered++;
 				const before = this.semantics.get(id);
-				if (!recordsEqual(before, next)) updates.push(next);
+				if (!recordsEqual({
+					...before,
+					index: next.index
+				}, next)) updates.push(next);
+				else if (before.index !== next.index) this.semantics.set(id, next);
 			}
 			if (covered !== subtree.size) return null;
 		}
 		const patches = [];
 		for (const record of updates) {
 			this.semantics.set(record.id, record);
+			this.semanticsOrdered?.set(record.id, record);
 			patches.push({
 				op: "update",
 				node: record
@@ -8025,6 +8448,163 @@ var GessoRuntime = class {
 		return patches;
 	}
 	/**
+	* The patches for a frame that changed the shape of the tree, without
+	* walking all of it, or null when the whole tree has to be rebuilt.
+	*
+	* Any frame that added or removed a child used to rebuild the tree
+	* from the root, describing every node again. In a 5,000-line editor
+	* that was 11 ms of every Enter, for one new paragraph. Now the walk
+	* starts at the nearest record above each change, as
+	* `rescopeSemantics` does for a change of meaning, and inside it a
+	* subtree nothing touched keeps its records: renumbered if its
+	* siblings moved, never described again (see
+	* `rebuildSemanticsSubtree`). What is described is the path down to
+	* each change, whatever is new, and everything under a node whose
+	* own meaning changed.
+	*
+	* The result is spliced into `this.semantics` in place, since the map
+	* is in document order and a record's subtree is a contiguous run of
+	* it, so adds still arrive in document order. Removals come first.
+	*/
+	restructureSemantics(frame) {
+		if (this.semantics.size === 0 || this.semanticsStale) return null;
+		const dirty = [];
+		/** Nodes whose own meaning may have changed: everything under them is described afresh. */
+		const meaning = /* @__PURE__ */ new Set();
+		let structural = false;
+		for (const [node, flags] of frame.entries()) {
+			const children = (flags & DirtyFlags.Children) !== 0;
+			const semantics = (flags & DirtyFlags.Semantics) !== 0;
+			if (!children && !semantics) continue;
+			if (!this.attached(node)) continue;
+			structural ||= children;
+			dirty.push(node);
+			if (semantics) meaning.add(node);
+		}
+		if (!structural) return null;
+		const owners = /* @__PURE__ */ new Set();
+		for (const node of dirty) {
+			const owner = this.semanticsOwnerOf(node);
+			if (owner === null) return null;
+			owners.add(owner);
+		}
+		for (const owner of owners) for (let above = owner.parent; above !== null; above = above.parent) if (owners.has(above)) {
+			owners.delete(owner);
+			break;
+		}
+		if (owners.size > SCOPED_SEMANTICS_OWNERS) return null;
+		const path = /* @__PURE__ */ new Set();
+		for (const node of dirty) for (let current = node; current !== null && !path.has(current); current = current.parent) {
+			path.add(current);
+			if (owners.has(current)) break;
+		}
+		const fresh = /* @__PURE__ */ new Map();
+		const underChangedMeaning = (node) => {
+			const known = fresh.get(node);
+			if (known !== void 0) return known;
+			const answer = meaning.has(node) || !owners.has(node) && node.parent !== null && underChangedMeaning(node.parent);
+			fresh.set(node, answer);
+			return answer;
+		};
+		const unchanged = (node) => !path.has(node) && (meaning.size === 0 || !underChangedMeaning(node));
+		const positions = /* @__PURE__ */ new Map();
+		const reuse = {
+			previous: this.semantics,
+			childrenOf: (parent) => this.semanticsChildren.get(parent) ?? [],
+			positionOf: (parent, id) => {
+				let index = positions.get(parent);
+				if (index === void 0) {
+					index = new Map((this.semanticsChildren.get(parent) ?? []).map((child, i) => [child, i]));
+					positions.set(parent, index);
+				}
+				return index.get(id) ?? -1;
+			},
+			memory: this.semanticsMemory,
+			unchanged
+		};
+		const walks = [];
+		for (const owner of owners) {
+			const before = this.semantics.get(owner.id);
+			if (before === void 0) return null;
+			const walked = rewalkSemantics(owner, before.parent, this.semanticsIndexOf(before), semanticsInertAbove(owner), reuse);
+			if (walked === null) return null;
+			walks.push(walked);
+		}
+		const present = /* @__PURE__ */ new Set();
+		for (const walked of walks) for (const list of walked.children.values()) for (const id of list) present.add(id);
+		const removals = [];
+		const remove = (id) => {
+			removals.push({
+				op: "remove",
+				id
+			});
+			for (const child of this.semanticsChildren.get(id) ?? []) remove(child);
+			this.semanticsChildren.delete(id);
+			this.semantics.delete(id);
+		};
+		const formerly = /* @__PURE__ */ new Map();
+		for (const walked of walks) for (const parent of walked.children.keys()) formerly.set(parent, this.semanticsChildren.get(parent) ?? []);
+		for (const list of formerly.values()) for (const id of list) if (!present.has(id) && this.semantics.has(id)) remove(id);
+		const reordered = /* @__PURE__ */ new Set();
+		for (const walked of walks) for (const [parent, list] of walked.children) {
+			const old = formerly.get(parent) ?? [];
+			if (old.length === 0) continue;
+			const was = new Map(old.map((id, i) => [id, i]));
+			let last = -1;
+			for (const id of list) {
+				const at = was.get(id);
+				if (at === void 0) continue;
+				if (at < last) {
+					reordered.add(parent);
+					break;
+				}
+				last = at;
+			}
+		}
+		const changes = [];
+		for (const walked of walks) {
+			for (const { id, parent, index } of walked.placed) {
+				const record = walked.records.get(id);
+				const before = this.semantics.get(id);
+				if (record !== void 0) {
+					if (before === void 0) changes.push({
+						op: "add",
+						node: record
+					});
+					else if (before.parent !== record.parent || reordered.has(parent) || !recordsEqual({
+						...before,
+						index: record.index
+					}, record)) changes.push({
+						op: "update",
+						node: record
+					});
+					this.semantics.set(id, record);
+				} else if (before === void 0) return null;
+				else if (before.parent !== parent || reordered.has(parent)) {
+					const moved = {
+						...before,
+						parent,
+						index
+					};
+					changes.push({
+						op: "update",
+						node: moved
+					});
+					this.semantics.set(id, moved);
+				}
+			}
+			for (const [parent, list] of walked.children) this.semanticsChildren.set(parent, list);
+		}
+		this.semanticsOrdered = null;
+		return [...removals, ...changes];
+	}
+	/** Whether a node is still in the tree being laid out. */
+	attached(node) {
+		const root = this.layoutRoot();
+		for (let current = node; current !== null; current = current.parent) if (current === root) return true;
+		return false;
+	}
+	/**
 	* The nearest node at or above `node` that holds a semantics record,
 	* or null when nothing above it does.
 	*/
@@ -8085,22 +8665,75 @@ var GessoRuntime = class {
 	*
 	* Ids that have left the tree are dropped here rather than tracked,
 	* since a removal patch has already told the mirror about them.
+	*
+	* **Found by walking what is on screen, not by checking everything.**
+	* Bounding what was sent still computed every node's box to find out
+	* whether it was on screen: a 5,000-line document has three thousand
+	* fields, and the sweep cost 4 to 24 ms of every keystroke. The walk
+	* goes down from the root carrying the scroll and sticky offsets that
+	* `visibleBox` adds up per node, and passes over any subtree whose
+	* bounds (the hit tester's, see `subtreeBoundsFor`) are off screen.
+	* A node it passes over is one this skipped before anyway.
 	*/
 	collectSemanticsBoxes() {
 		const changed = [];
-		const focused = this.focusManager.focusedNode?.id;
-		for (const id of this.semantics.keys()) {
-			const node = this.graph.getNode(id);
-			if (node === void 0 || this.engine.recordFor(node) === void 0) continue;
-			const box = this.engine.visibleBox(node);
+		const focused = this.focusManager.focusedNode;
+		let focusedSeen = false;
+		const offer = (id, box) => {
 			const last = this.semanticsBoxes.get(id);
-			if (last !== void 0 && boxesEqual(last, box)) continue;
-			if (id !== focused && !this.onScreen(box)) continue;
+			if (last !== void 0 && boxesEqual(last, box)) return;
 			this.semanticsBoxes.set(id, box);
 			changed.push({
 				id,
 				box
 			});
+		};
+		const root = this.root;
+		if (root !== void 0) {
+			this.engine.subtreeBoundsFor(root);
+			const stack = [[
+				root,
+				0,
+				0
+			]];
+			while (stack.length > 0) {
+				const [node, dx, dy] = stack.pop();
+				const rec = this.engine.recordFor(node);
+				let childX = dx;
+				let childY = dy;
+				if (rec !== void 0) {
+					const x = dx + rec.stickyOffsetX;
+					const y = dy + rec.stickyOffsetY;
+					if (!rec.boundsUnbounded && node !== focused && !this.onScreen({
+						x: rec.boundsMinX + x,
+						y: rec.boundsMinY + y,
+						width: rec.boundsMaxX - rec.boundsMinX,
+						height: rec.boundsMaxY - rec.boundsMinY
+					})) continue;
+					if (this.semantics.has(node.id)) {
+						const box = {
+							x: rec.x + x,
+							y: rec.y + y,
+							width: rec.width,
+							height: rec.height
+						};
+						if (node === focused) {
+							focusedSeen = true;
+							offer(node.id, box);
+						} else if (this.onScreen(box)) offer(node.id, box);
+					}
+					childX = x - (rec.scrollable ? rec.scrollX : 0);
+					childY = y - (rec.scrollable ? rec.scrollY : 0);
+				}
+				for (let child = node.lastChild; child !== null; child = child.previousSibling) stack.push([
+					child,
+					childX,
+					childY
+				]);
+			}
+		}
+		if (focused !== null && focused !== void 0 && !focusedSeen && this.semantics.has(focused.id)) {
+			if (this.engine.recordFor(focused) !== void 0) offer(focused.id, this.engine.visibleBox(focused));
 		}
 		if (this.semanticsBoxes.size > this.semantics.size) {
 			for (const id of this.semanticsBoxes.keys()) if (!this.semantics.has(id)) this.semanticsBoxes.delete(id);
@@ -8143,13 +8776,18 @@ var GessoRuntime = class {
 	* every pass, so writing the raw offset here is enough.
 	*/
 	createScrollSink() {
+		const going = (node, record, axis) => {
+			const written = node.getProperty(axis === "x" ? "scrollX" : "scrollY");
+			const offset = typeof written === "number" ? written : axis === "x" ? record.scrollX : record.scrollY;
+			return Math.min(Math.max(offset, 0), scrollRange(record, axis));
+		};
 		return {
 			containerState: (node) => {
 				const record = this.engine.recordFor(node);
 				if (record === void 0) return;
 				return {
-					scrollX: record.scrollX,
-					scrollY: record.scrollY,
+					scrollX: going(node, record, "x"),
+					scrollY: going(node, record, "y"),
 					maxScrollX: scrollRange(record, "x"),
 					maxScrollY: scrollRange(record, "y"),
 					horizontal: node.getProperty("direction") === "row" || node.type === UiNodeType.Row,
@@ -8161,13 +8799,13 @@ var GessoRuntime = class {
 				const record = this.engine.recordFor(node);
 				if (record === void 0) return;
 				if (behavior === "smooth") {
-					if (dx !== 0) this.smoothScroller.scrollBy(node, "scrollX", dx, record.scrollX);
-					if (dy !== 0) this.smoothScroller.scrollBy(node, "scrollY", dy, record.scrollY);
+					if (dx !== 0) this.smoothScroller.scrollBy(node, "scrollX", dx, going(node, record, "x"));
+					if (dy !== 0) this.smoothScroller.scrollBy(node, "scrollY", dy, going(node, record, "y"));
 					return;
 				}
 				this.smoothScroller.stop(node);
-				if (dx !== 0) node.setProperty("scrollX", record.scrollX + dx);
-				if (dy !== 0) node.setProperty("scrollY", record.scrollY + dy);
+				if (dx !== 0) node.setProperty("scrollX", going(node, record, "x") + dx);
+				if (dy !== 0) node.setProperty("scrollY", going(node, record, "y") + dy);
 				this.graph.markDirty(node, DirtyFlags.Transform);
 			},
 			scrollContainers: () => this.engine.scrollContainers(),
@@ -8207,6 +8845,7 @@ var GessoRuntime = class {
 			for (const replica of this.replicas) replica.flush();
 		});
 		this.phaseTimings.environment = this.timePhase(() => this.graph.hasEnvironmentDirty(), () => this.graph.processEnvironmentDirty());
+		if (this.input.wheel.advance(time)) this.scheduler.wake();
 		this.phaseTimings.virtualize = this.timePhase(() => this.hasVirtualWindows(), () => this.updateVirtualWindows());
 	}
 	hasVirtualWindows() {
@@ -8306,29 +8945,131 @@ var GessoRuntime = class {
 		if (rec === void 0) return 0;
 		return column ? rec.measuredHeight + rec.marginTop + rec.marginBottom : rec.measuredWidth + rec.marginLeft + rec.marginRight;
 	}
-	handleFrame(frame) {
-		const root = this.root;
-		if (root === void 0) return;
-		const started = now();
-		this.focusManager.settleScope();
-		const laidOut = frameNeedsLayout(frame);
-		this.phaseTimings.layout = this.timePhase(() => laidOut, () => this.engine.layoutForFrame(frame, this.constraints, root));
-		if (laidOut) {
-			this.laidOutOnce = true;
-			this.inspector.recordLayout(started);
-		}
-		if (!this.layoutNotifier.isEmpty()) this.layoutNotifier.notify((node) => {
+	/**
+	* Tells the layout listeners what moved, and lays out again for as
+	* long as what they do in answer needs it, so the frame paints the
+	* layout they settle on rather than the one they were told about.
+	*
+	* The browser's answer to the same problem. A `ResizeObserver`
+	* callback runs after layout and before paint, and when it changes
+	* layout the browser lays out again before it paints rather than
+	* showing the stale boxes for a frame. The listeners here are
+	* `breakpoint`, `sizeContainer` (and so `Responsive`),
+	* `scrollPosition`, `autoFocus` and anything else on `host.onLayout`.
+	* Before this a page whose breakpoint gave it wide padding was
+	* painted with its narrow padding on the frame it appeared, and
+	* jumped 16 px on the next.
+	*
+	* A pass after the first lays out only what the listeners dirtied,
+	* the same incremental pass any frame runs, and then tells only the
+	* listeners whose boxes it changed. A frame whose listeners wrote
+	* nothing that lays out, which is almost every frame, runs no second
+	* pass: it pays one look at the dirty set.
+	*
+	* **Bounded.** Listeners that keep moving each other's boxes would
+	* otherwise never let the frame paint. ResizeObserver bounds its loop
+	* by tree depth; this one is bounded by count, `MAX_LAYOUT_PASSES` in
+	* all, which is easier to reason about and more than a real chain
+	* needs (a breakpoint inside a `Responsive` inside a `Responsive` is
+	* four passes). Past it the frame paints what it has, the rest waits
+	* for the next frame as it always used to, and a warning says so
+	* once, as the browser's "ResizeObserver loop completed with
+	* undelivered notifications" does.
+	*
+	* **Reveals wait for the end.** `autoFocus` takes focus from a layout
+	* listener, on its node's first layout, and focus reveals the node:
+	* revealed from the first pass's boxes, it scrolled to where the node
+	* was before a breakpoint moved it. A reveal asked for while the
+	* listeners run is applied once they are quiet, from final boxes, and
+	* its scroll laid out like any other write. So is the focus a hot
+	* reload restores, after the listeners rather than before because
+	* `autoFocus` is one of them and the restore has to be the last word:
+	* every node in a subtree a reload replaced has its first layout on
+	* this frame.
+	*/
+	settleLayout(frame, root, laidOut) {
+		const stats = this.engine.stats;
+		const settled = {
+			frame,
+			passes: laidOut ? 1 : 0,
+			measured: laidOut ? stats.measured : 0,
+			relayoutRoots: laidOut && !stats.fullLayout ? stats.relayoutRoots : 0
+		};
+		let fromRoot = laidOut && stats.fullLayout;
+		const read = (node) => {
 			const record = this.engine.recordFor(node);
 			return {
 				box: this.engine.visibleBox(node),
 				scrollX: record?.scrollX ?? 0,
 				scrollY: record?.scrollY ?? 0
 			};
-		});
+		};
+		this.deferredReveals = [];
+		try {
+			for (;;) {
+				if (!this.layoutNotifier.isEmpty()) this.layoutNotifier.notify(read);
+				if (!this.layoutPending()) {
+					this.finishSettling(settled.passes > 0);
+					if (!this.layoutPending()) break;
+				}
+				if (settled.passes >= MAX_LAYOUT_PASSES) {
+					this.warnLayoutPasses();
+					this.finishSettling(true);
+					break;
+				}
+				this.phaseTimings.environment += this.timePhase(() => this.graph.hasEnvironmentDirty(), () => this.graph.processEnvironmentDirty());
+				const more = this.scheduler.recollect(frame);
+				settled.frame = settled.frame.merged(more);
+				this.phaseTimings.layout += this.timePhase(() => true, () => this.engine.layoutForFrame(more, this.constraints, root));
+				settled.passes++;
+				settled.measured += stats.measured;
+				settled.relayoutRoots += stats.fullLayout ? 0 : stats.relayoutRoots;
+				fromRoot ||= stats.fullLayout;
+			}
+		} finally {
+			this.deferredReveals = null;
+		}
+		if (fromRoot) settled.relayoutRoots = 0;
+		return settled;
+	}
+	/**
+	* Whether something written since the frame was collected has to be
+	* laid out before the frame paints: the same flags that make a frame
+	* lay out, or an inherited value still to be handed down.
+	*/
+	layoutPending() {
+		return this.graph.hasEnvironmentDirty() || this.graph.getDirtyNodes().anyFlags(LAYOUT_DIRT);
+	}
+	/** Applies what waits for settled boxes: a reload's focus, then the reveals asked for. */
+	finishSettling(laidOut) {
+		const reveals = this.deferredReveals ?? [];
+		this.deferredReveals = null;
 		if (this.restoringFocus && laidOut) {
 			this.restoringFocus = false;
 			this.restoreFocusAfterReload();
 		}
+		for (const { node, padding } of reveals) if (this.engine.recordFor(node) !== void 0) this.scrollIntoView(node, padding);
+		this.deferredReveals = [];
+	}
+	warnLayoutPasses() {
+		if (this.warnedLayoutPasses) return;
+		this.warnedLayoutPasses = true;
+		console.warn(`Gesso: a frame laid out ${MAX_LAYOUT_PASSES} times and its layout listeners were still changing it, so it was painted unsettled and the rest left for the next frame. Something on \`host.onLayout\` (a breakpoint, a sizeContainer, a Responsive, a modifier of your own) is writing a property that changes the box it is listening to, back and forth. Shown once.`);
+	}
+	handleFrame(collected) {
+		const root = this.root;
+		if (root === void 0) return;
+		const started = now();
+		this.focusManager.settleScope();
+		const firstPass = frameNeedsLayout(collected);
+		this.phaseTimings.layout = this.timePhase(() => firstPass, () => this.engine.layoutForFrame(collected, this.constraints, root));
+		const settled = this.settleLayout(collected, root, firstPass);
+		const frame = settled.frame;
+		const laidOut = settled.passes > 0;
+		if (laidOut) {
+			this.laidOutOnce = true;
+			this.inspector.recordLayout(started);
+		}
 		this.sendEditingState();
 		const rebuildSemantics = frameNeedsSemantics(frame);
 		this.phaseTimings.semantics = this.timePhase(() => rebuildSemantics || this.semanticsListener !== null && (laidOut || this.focusManager.focusedNode?.id !== this.lastFocusedId), () => this.updateSemantics(frame, rebuildSemantics, laidOut));
@@ -8362,8 +9103,9 @@ var GessoRuntime = class {
 			frame: frame.id,
 			durationMs: elapsed,
 			nodes: frame.size,
-			measured: this.engine.stats.measured,
-			relayoutRoots: this.engine.stats.fullLayout ? 0 : this.engine.stats.relayoutRoots,
+			measured: settled.measured,
+			relayoutRoots: settled.relayoutRoots,
+			layoutPasses: settled.passes,
 			at: finished,
 			inputLatencyMs: this.inputLatency.take(epochAt(finished)),
 			phases: this.phaseTimings,
@@ -8589,7 +9331,7 @@ function timeOrigin() {
 }
 function editingStatesEqual(a, b) {
 	if (a === null || b === null) return a === b;
-	return a.text === b.text && a.selectionStart === b.selectionStart && a.selectionEnd === b.selectionEnd && a.multiline === b.multiline && a.composing === b.composing && a.caret.x === b.caret.x && a.caret.y === b.caret.y && a.caret.width === b.caret.width && a.caret.height === b.caret.height;
+	return a.text === b.text && a.selectionStart === b.selectionStart && a.selectionEnd === b.selectionEnd && a.multiline === b.multiline && a.composing === b.composing && a.html === b.html && a.caret.x === b.caret.x && a.caret.y === b.caret.y && a.caret.width === b.caret.width && a.caret.height === b.caret.height;
 }
 /** A canvas for the text measurer when the draw canvas is not a 2D one. */
 function createMeasureCanvas() {
@@ -8609,6 +9351,14 @@ function emptyGpuTimings() {
 		encode: 0
 	};
 }
+/**
+* The most layout passes one frame runs before it paints; see
+* `settleLayout`. One for the frame and up to seven more for what its
+* layout listeners change.
+*/
+const MAX_LAYOUT_PASSES = 8;
+/** Dirt that makes a frame lay out; `frameNeedsLayout` asks the same of a collected frame. */
+const LAYOUT_DIRT = DirtyFlags.Layout | DirtyFlags.Children | DirtyFlags.SubtreeLayout | DirtyFlags.Transform;
 function emptyPhaseTimings() {
 	return {
 		ticks: 0,
@@ -8628,7 +9378,7 @@ function emptyPhaseTimings() {
 * spending an immeasurable amount of time deciding to do nothing.
 */
 function frameNeedsLayout(frame) {
-	return frame.anyFlags(DirtyFlags.Layout | DirtyFlags.Children | DirtyFlags.SubtreeLayout | DirtyFlags.Transform);
+	return frame.anyFlags(LAYOUT_DIRT);
 }
 /**
 * Semantics follow the properties that carry them and the shape of the
@@ -8648,6 +9398,18 @@ function frameNeedsLayout(frame) {
 */
 const SCOPED_SEMANTICS_OWNERS = 32;
 /**
+* The index each id in a parent's list of children has. A paragraph's
+* text runs are numbered among themselves and its other children among
+* themselves, as `buildSemanticsTree` numbers them.
+*/
+function semanticIndices(list) {
+	const out = [];
+	let runs = 0;
+	let others = 0;
+	for (const id of list) out.push(id.includes(TEXT_RUN_ID_SEPARATOR) ? runs++ : others++);
+	return out;
+}
+/**
 * How far outside the canvas a mirrored box is still worth reporting.
 *
 * One screenful of slack, so a fling that covers a lot of ground in
@@ -8689,6 +9451,14 @@ function frameNeedsSemantics(frame) {
 */
 var GessoApp = class {
 	runtime;
+	/**
+	* The clock the runtime was given, its callback, and whether a frame
+	* is waiting on it: what `uiHost().flush` needs to run that frame now,
+	* since a background tab gets no animation frames to run it.
+	*/
+	clock;
+	frameCallback;
+	framePending = false;
 	canvas;
 	host;
 	inputEnabled;
@@ -8709,6 +9479,7 @@ var GessoApp = class {
 	detachFullscreen = null;
 	fullscreen = false;
 	detachReducedMotion = null;
+	detachContrast = null;
 	/** Stops watching `prefers-color-scheme`; null while overridden. */
 	detachColorScheme = null;
 	/** Stops watching `visualViewport` for the safe area and the keyboard. */
@@ -8731,7 +9502,24 @@ var GessoApp = class {
 			routes: options.routes,
 			media: options.media,
 			fonts: options.fonts,
-			clock: options.clock ?? ((callback) => new UiAnimationFrameClock(callback)),
+			clock: (callback) => {
+				const clock = (options.clock ?? ((onFrame) => new UiAnimationFrameClock(onFrame)))((time) => {
+					this.framePending = false;
+					callback(time);
+				});
+				this.clock = clock;
+				this.frameCallback = callback;
+				return {
+					requestFrame: () => {
+						this.framePending = true;
+						clock.requestFrame();
+					},
+					cancelFrame: () => {
+						this.framePending = false;
+						clock.cancelFrame();
+					}
+				};
+			},
 			dpr: devicePixelRatio()
 		});
 		const input = this.runtime.input;
@@ -8741,6 +9529,30 @@ var GessoApp = class {
 			keyboardController: input.keyboard
 		});
 	}
+	/**
+	* The running app, as the agent's screen tools need it: its semantics
+	* tree and focus, the mirror's actions, keys, and a way to run a
+	* pending frame now. See `uiSurface` in `gesso-framework/agent`.
+	*/
+	uiHost() {
+		const runtime = this.runtime;
+		return {
+			semanticsTree: () => runtime.semanticsTree(),
+			focusedNodeId: () => runtime.focusedNodeId(),
+			applySemanticsAction: (action) => runtime.applySemanticsAction(action),
+			key: (key, modifiers) => {
+				runtime.input.keyboard.keyDown(key, modifiers);
+				runtime.input.keyboard.keyUp(key, modifiers);
+			},
+			flush: () => {
+				if (this.framePending && this.clock !== void 0 && this.frameCallback !== void 0) {
+					this.framePending = false;
+					this.clock.cancelFrame();
+					this.frameCallback(performance.now());
+				}
+			}
+		};
+	}
 	/** The runtime services a component in this app can inject. */
 	get services() {
 		return this.runtime.services;
@@ -8877,6 +9689,8 @@ var GessoApp = class {
 		this.detachFullscreen = null;
 		this.detachReducedMotion?.();
 		this.detachReducedMotion = null;
+		this.detachContrast?.();
+		this.detachContrast = null;
 		this.detachColorScheme?.();
 		this.detachColorScheme = null;
 		this.detachViewportInsets?.();
@@ -8901,7 +9715,7 @@ var GessoApp = class {
 			compositionStart: () => editing.compositionStart(),
 			compositionUpdate: (text, caret) => editing.compositionUpdate(text, caret),
 			compositionEnd: (text) => editing.compositionEnd(text),
-			paste: (text) => editing.paste(text),
+			paste: (text, html) => editing.paste(text, html),
 			blur: () => this.runtime.input.focus.blur()
 		});
 		this.runtime.setTextInputSource("proxy");
@@ -8934,6 +9748,7 @@ var GessoApp = class {
 			this.runtime.setFullscreen(isDocumentFullscreen(canvas));
 		}
 		this.detachReducedMotion = observeReducedMotion((reduced) => this.runtime.setReducedMotion(reduced));
+		this.detachContrast = observeContrast((contrast) => this.runtime.setContrast(contrast));
 		this.setColorScheme(this.colorSchemePreference);
 	}
 	/**
@@ -8949,7 +9764,7 @@ var GessoApp = class {
 		if (!this.accessibilityEnabled) return;
 		const mirror = new SemanticsMirror(canvas, {
 			action: (action) => this.runtime.applySemanticsAction(action),
-			paste: (text) => this.runtime.input.editing.paste(text)
+			paste: (text, html) => this.runtime.input.editing.paste(text, html)
 		}, this.proxy);
 		this.mirror = mirror;
 		this.runtime.onSemantics((update) => mirror.apply(update));
@@ -8994,10 +9809,11 @@ var GessoApp = class {
 			if (request.type === "popup") this.runtime.settlePopup(request.id, false);
 			else if (request.type === "storage") this.runtime.settleStorage(request.id, shellStorageDenied());
 			else if (request.type === "file") this.runtime.settleFile(request.id, shellFilesUnsupported("There is no document to reach files through."));
+			else if (request.type === "clipboard") this.runtime.settleClipboard(request.id, false);
 			return;
 		}
 		if (request.type === "clipboard") {
-			writeClipboard(request.text, this.canvas.ownerDocument);
+			writeClipboard(request.text, this.canvas.ownerDocument).then((copied) => this.runtime.settleClipboard(request.id, copied));
 			return;
 		}
 		if (request.type === "fullscreen") {
@@ -9070,6 +9886,10 @@ var GessoAppBuilder = class {
 	mediaOptions;
 	fontDeclarations;
 	app;
+	/** The mounted app's channel registry, for the workers an agent port asks. */
+	channelHandle;
+	webmcpChoice = false;
+	disconnectWebMcp = null;
 	colorSchemePreference = "auto";
 	constructor(root) {
 		this.root = root;
@@ -9260,13 +10080,61 @@ var GessoAppBuilder = class {
 		if (this.errorListener !== void 0) app.onError(this.errorListener);
 		if (this.devtoolsListener !== null) app.onDevtools(this.devtoolsListener);
 		this.app = app;
+		this.channelHandle = channels;
 		app.mount();
+		this.connectWebMcp(app);
 		return () => {
+			this.disconnectWebMcp?.();
+			this.disconnectWebMcp = null;
 			this.app = void 0;
+			this.channelHandle = void 0;
 			app.dispose();
 			channels.dispose();
 		};
 	}
+	/**
+	* Offer the app's channels and screen to an AI agent in the browser,
+	* through WebMCP (default false). The single-thread form of
+	* `createApp({ webmcp })`: registered once `mountSync` has run,
+	* removed when the app is unmounted. Call before `mountSync`.
+	*/
+	useWebMcp(choice = true) {
+		this.webmcpChoice = choice;
+		return this;
+	}
+	/**
+	* Opens a port to what this app serves under `key`, or returns
+	* undefined before `mountSync`.
+	*
+	* The same question `WorkerApp.openRenderPort` answers, asked of the
+	* page instead of a render worker, because in this configuration the
+	* page is the thread that draws. It serves one thing, `gesso:agent`:
+	* the channels fed here, the workers behind them, and the screen.
+	* The agent code is loaded the first time one is opened.
+	*/
+	openRenderPort(key) {
+		const app = this.app;
+		if (app === void 0 || key !== "gesso:agent") return;
+		const pair = new MessageChannel();
+		const registrations = this.channelRegistrations;
+		import("./app-BvlIO1G9.js").then((n) => n.t).then((agent) => agent.serveApplicationAgent(pair.port2, {
+			channels: () => registrations.filter((registration) => registration.source !== void 0).map((registration) => ({
+				token: registration.token,
+				source: registration.source
+			})),
+			workers: () => this.channelHandle?.workers ?? [],
+			ui: () => this.app === app ? app.uiHost() : void 0
+		}));
+		return pair.port1;
+	}
+	connectWebMcp(app) {
+		const choice = this.webmcpChoice;
+		if (choice === false) return;
+		import("./webmcp-CJVFvAHe.js").then((n) => n.a).then((agent) => agent.connectWebMcp(this, choice === true ? {} : choice)).then((disconnect) => {
+			if (this.app === app) this.disconnectWebMcp = disconnect;
+			else disconnect();
+		}, (error) => console.warn("[gesso] WebMCP could not register the channels:", error));
+	}
 };
 function requireElement(selector) {
 	const element = document.querySelector(selector);
@@ -9818,6 +10686,11 @@ var RenderWorkerApp = class {
 		this.root = typeof root === "function" ? createComponent(root) : root;
 		this.host = host;
 		this.host.onmessage = (event) => this.receive(event.data);
+		servePorts((key, port) => {
+			if (key !== "gesso:agent") return false;
+			this.serveAgent(port);
+			return true;
+		}, () => [AGENT_PORT], host);
 		this.host.addEventListener("error", (event) => {
 			const error = event.error;
 			this.reportUncaught(error ?? event.message ?? "Unknown error", error === void 0 ? locationOf(event) : void 0);
@@ -9995,6 +10868,41 @@ var RenderWorkerApp = class {
 	* console is the worker global's, and this class is what owns the
 	* global.
 	*/
+	/**
+	* Answers an agent port with every channel this application can
+	* reach: the ones fed from this thread, and whatever each worker
+	* behind them serves, asked over a port of its own. Imported rather
+	* than loaded on demand: a worker built as an IIFE, which is Vite's
+	* default, cannot split off a chunk, and a dynamic import here failed
+	* every such build. Nothing runs until an agent asks.
+	*/
+	serveAgent(port) {
+		serveApplicationAgent(port, {
+			channels: () => this.channelRegistrations.filter((registration) => registration.source !== void 0).map((registration) => ({
+				token: registration.token,
+				source: registration.source
+			})),
+			workers: () => {
+				const workers = new Set(this.channels?.workers ?? []);
+				if (this.appLogicWorker !== void 0) workers.add(this.appLogicWorker);
+				return workers;
+			},
+			ui: () => {
+				const runtime = this.runtime;
+				if (runtime === void 0) return;
+				return {
+					semanticsTree: () => runtime.semanticsTree(),
+					focusedNodeId: () => runtime.focusedNodeId(),
+					applySemanticsAction: (action) => runtime.applySemanticsAction(action),
+					key: (key, modifiers) => {
+						runtime.input.keyboard.keyDown(key, modifiers);
+						runtime.input.keyboard.keyUp(key, modifiers);
+					},
+					flush: () => this.clock?.tick(performance.now())
+				};
+			}
+		});
+	}
 	setConsoleForwarding(enabled) {
 		this.restoreConsole?.();
 		this.restoreConsole = null;
@@ -10048,7 +10956,7 @@ var RenderWorkerApp = class {
 				runtime.input.pointer.pointerCancel(message.pointer);
 				break;
 			case "wheel":
-				runtime.input.wheel.wheel(message.x, message.y, message.deltaX, message.deltaY, message.modifiers, message.deltaMode, message.wheelDeltaY);
+				runtime.input.wheel.wheel(message.x, message.y, message.deltaX, message.deltaY, message.modifiers, message.deltaMode, message.wheelDeltaY, message.at === void 0 ? void 0 : message.at - performance.timeOrigin);
 				break;
 			case "keyDown":
 				runtime.input.keyboard.keyDown(message.key, message.modifiers, message.textFollows);
@@ -10069,7 +10977,7 @@ var RenderWorkerApp = class {
 				runtime.input.editing.compositionEnd(message.text);
 				break;
 			case "paste":
-				runtime.input.editing.paste(message.text);
+				runtime.input.editing.paste(message.text, message.html ?? null);
 				break;
 			case "blur":
 				runtime.input.focus.blur();
@@ -10080,6 +10988,9 @@ var RenderWorkerApp = class {
 			case "colorScheme":
 				runtime.setColorScheme(message.scheme);
 				break;
+			case "contrast":
+				runtime.setContrast(message.contrast);
+				break;
 			case "viewportInsets":
 				runtime.setViewportInsets(message.insets);
 				break;
@@ -10089,6 +11000,9 @@ var RenderWorkerApp = class {
 			case "popupResult":
 				runtime.settlePopup(message.id, message.opened);
 				break;
+			case "clipboardResult":
+				runtime.settleClipboard(message.id, message.copied);
+				break;
 			case "storageResult":
 				runtime.settleStorage(message.id, message.result);
 				break;
@@ -10232,6 +11146,7 @@ var RenderWorkerApp = class {
 		this.runtime.onShellRequest((request) => {
 			if (request.type === "clipboard") this.host.postMessage({
 				type: "clipboard",
+				id: request.id,
 				text: request.text
 			});
 			else if (request.type === "openUrl") this.host.postMessage({
@@ -10310,6 +11225,7 @@ var RenderWorkerApp = class {
 				nodes: metrics.nodes,
 				measured: metrics.measured,
 				relayoutRoots: metrics.relayoutRoots,
+				layoutPasses: metrics.layoutPasses,
 				at: metrics.at,
 				inputLatencyMs: metrics.inputLatencyMs,
 				phases: metrics.phases,
@@ -10329,6 +11245,6 @@ function locationOf(event) {
 	return `${event.filename}:${line}:${column}`;
 }
 //#endregion
-export { APPLICATION_WORKER, AnimationService, AudioService, AudioSink, BoundsCell, Channel, ChannelRegistry, ChannelReplica, Component, ComponentHost, ComponentHostResolver, ComputedCell, Define, Each, EditingProxy, EditingService, FanCell, FanOut, FindService, FocusService, FontService, FrameService, GessoApp, GessoAppBuilder, GessoRuntime, IndexedDbStorage, Inject, Input, InputCell, InternalState, MARK_PREFIX, MediaService, MemoryStorage, OpfsStorage, Output, OverlayLayer, OverlayService, PersistedState, Presence, ProvidedChannel, RenderWorkerApp, Resource, RouteState, RouterOutlet, RouterService, SemanticsMirror, ServiceRegistry, ShellService, ShellStorage, Show, TextService, ThemeTokenCell, UI_FRAME_PHASES, UI_ROLES, UI_SEMANTIC_STATES, UndoStack, WorkerApp, applyPatch, applyPatches, audioClock, bind, bounds, buildPath, channel, classifyStorageError, computed, controlled, createApp, createChannelRegistry, createComponent, createShellHistory, createSyncApp, debounced, defineChannel, derive, describeStream, diffProjection, each, fanOut, findUnplainPath, formatAge, formatNodePath, formatNodeReport, formatStream, formatUrl, input, internalState, into, isChannelClientMessage, isChannelHostMessage, isClassComponent, isComponentElement, isHubMessage, isOutputTarget, isPortErrorMessage, isPortHandshake, markInstant, markNow, measureSpan, mutate, observeColorScheme, observeMediaQuery, observeReducedMotion, output, parseUrl, performShellStorage, performanceMarksEnabled, persisted, pick, pickKeys, portHandle, printPropValue, provide, registerUndoShortcuts, renderRoot, requirePlainData, resource, route, select, serve, serveChannels, servePorts, setPerformanceMarks, shellStorageDenied, show, storageErrorMessage, storageReadFailure, storageReadValue, structurallyEqual, themeTokenCell, throttled, to, treeText, undoable, viewKeys, workerHandle, writeClipboard };
+export { APPLICATION_WORKER, AnimationService, AudioService, AudioSink, BoundsCell, Channel, ChannelRegistry, ChannelReplica, Component, ComponentHost, ComponentHostResolver, ComputedCell, Define, Each, EditingProxy, EditingService, FanCell, FanOut, FindService, FocusService, FontService, FrameService, GessoApp, GessoAppBuilder, GessoRuntime, IndexedDbStorage, Inject, Input, InputCell, InternalState, MARK_PREFIX, MediaService, MemoryStorage, OpfsStorage, Output, OverlayLayer, OverlayService, PersistedState, Presence, ProvidedChannel, RenderWorkerApp, Resource, RouteState, RouterOutlet, RouterService, ScrollService, SemanticsMirror, ServiceRegistry, ShellService, ShellStorage, Show, TextService, ThemeTokenCell, UI_FRAME_PHASES, UI_ROLES, UI_SEMANTIC_STATES, UndoStack, WorkerApp, applyPatch, applyPatches, audioClock, bind, bounds, buildPath, channel, channelSchema, classifyStorageError, computed, controlled, createApp, createChannelRegistry, createComponent, createShellHistory, createSyncApp, debounced, defineChannel, derive, describeChannel, describeStream, diffProjection, each, fanOut, findUnplainPath, formatAge, formatNodePath, formatNodeReport, formatStream, formatUrl, input, internalState, into, isChannelClientMessage, isChannelHostMessage, isClassComponent, isComponentElement, isHubMessage, isOutputTarget, isPortErrorMessage, isPortHandshake, markInstant, markNow, measureSpan, mutate, observeColorScheme, observeMediaQuery, observeReducedMotion, output, parseUrl, performShellStorage, performanceMarksEnabled, persisted, pick, pickKeys, portHandle, printPropValue, provide, registerUndoShortcuts, renderRoot, requirePlainData, resource, route, select, serve, serveChannels, servePorts, setPerformanceMarks, shellStorageDenied, show, storageErrorMessage, storageReadFailure, storageReadValue, structurallyEqual, themeTokenCell, throttled, to, treeText, undoable, viewKeys, workerHandle, writeClipboard };
 
 //# sourceMappingURL=index.js.map