gesso-framework 0.6.19 → 0.6.21

package/dist/index.js

@@ -4,7 +4,7 @@ import { a as Each, i as show, n as getComponentMetadata, o as each, r as Show,
 import { c as findUnplainPath, d as describeChannel, l as requirePlainData, t as AGENT_PORT, u as channelSchema } from "./remote-BoB8zh7z.js";
 import { n as serveApplicationAgent } from "./app-Yig59Ygf.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, defineModifier, describeOverrides, diffSemantics, dragSessionFor, dropIndexShifts, easings, fade, formatExplanation, insetsEqual, isComponentLikeElement, isImeKey, 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";
+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, UiFrame, 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, fade, formatExplanation, insetsEqual, isComponentLikeElement, isImeKey, 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.
@@ -1370,6 +1370,23 @@ function isInputMessage(message) {
 	return INPUT_MESSAGE_TYPES.has(message.type);
 }
 /**
+* The inputs a person makes one at a time, whose frame is drawn as soon
+* as they are routed (`GessoRuntime.answerInput`). Pointer moves and the
+* wheel come in streams, and wait for the refresh that coalesces them.
+*/
+const DISCRETE_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"pointerDown",
+	"pointerUp",
+	"keyDown",
+	"beforeInput",
+	"compositionUpdate",
+	"compositionEnd",
+	"paste"
+]);
+function isDiscreteInputMessage(message) {
+	return DISCRETE_INPUT_TYPES.has(message.type);
+}
+/**
 * Milliseconds since the Unix epoch, at `performance.now()`'s
 * resolution.
 *
@@ -1809,6 +1826,9 @@ var ShellService = class {
 	/** Clipboard writes asked for and not yet answered, by the id sent with each. */
 	copies = /* @__PURE__ */ new Map();
 	nextCopyId = 1;
+	/** Clipboard reads asked for and not yet answered, by the id sent with each. */
+	reads = /* @__PURE__ */ new Map();
+	nextReadId = 1;
 	/** File requests asked for and not yet answered, by the id sent with each. */
 	files = /* @__PURE__ */ new Map();
 	nextFileId = 1;
@@ -1968,6 +1988,37 @@ var ShellService = class {
 		this.copies.delete(id);
 		resolve(copied);
 	}
+	/**
+	* The text on the system clipboard, for a Paste chosen from a menu
+	* rather than typed: a key's paste comes with its text, a menu's has
+	* to ask. Null when there is none to give: the browser refused (it
+	* wants a secure context, a focused document, and in some browsers
+	* the person's say-so, which it asks for itself), or no shell is
+	* installed. It never rejects.
+	*/
+	readText() {
+		const handler = this.handler;
+		if (handler === void 0 || handler === null) return Promise.resolve(null);
+		const id = this.nextReadId++;
+		const settled = new Promise((resolve) => {
+			this.reads.set(id, resolve);
+		});
+		handler({
+			type: "clipboardRead",
+			id
+		});
+		return settled;
+	}
+	/**
+	* Called by the runtime with what a clipboard read found. Not for
+	* applications. An unknown id is ignored, on `settlePopup`'s terms.
+	*/
+	settleClipboardRead(id, text) {
+		const resolve = this.reads.get(id);
+		if (resolve === void 0) return;
+		this.reads.delete(id);
+		resolve(text);
+	}
 	/** Opens a URL in the user's browser, in a new tab or window. */
 	openUrl(url) {
 		this.handler?.({
@@ -2884,11 +2935,27 @@ const KEY_INPUT_TYPES = /* @__PURE__ */ new Set([
 *
 * Nothing here reads the textarea's content as truth except the
 * composition string, which is the one thing only the browser knows.
+*
+* A secret field (`EditingState.secret`) is edited through an
+* `<input type="password">` in the textarea's place, made the first
+* time one takes focus. Only a password input makes the browser and the
+* OS treat what is typed as a password: macOS turns on secure input, so
+* no other application can read the keys; nothing autocorrects, learns
+* or spell-checks it; a screen reader calls it a secure text field and
+* does not echo the characters. Every listener the textarea has, the
+* input has too. Its value is the state's text, which for a secret
+* field is already the mask, so the value reaches no element.
 */
 var EditingProxy = class {
 	canvas;
 	sink;
 	textarea;
+	/** The password input, once a secret field has had focus. */
+	password = null;
+	/** Whichever of the two the focused editable is edited through. */
+	field;
+	/** What `describe` was last given, so a swap of element carries it across. */
+	described = [null];
 	doc;
 	view;
 	state = null;
@@ -2904,14 +2971,24 @@ var EditingProxy = class {
 		this.view = this.doc.defaultView;
 		const textarea = this.doc.createElement("textarea");
 		this.textarea = textarea;
-		textarea.setAttribute("aria-hidden", "true");
-		textarea.setAttribute("autocomplete", "off");
-		textarea.setAttribute("autocorrect", "off");
-		textarea.setAttribute("autocapitalize", "off");
-		textarea.setAttribute("spellcheck", "false");
+		this.field = textarea;
 		textarea.setAttribute("wrap", "off");
-		textarea.tabIndex = -1;
-		Object.assign(textarea.style, {
+		const detachTextarea = this.prepare(textarea);
+		const detachWindow = this.listenWindow();
+		this.detach = () => {
+			detachTextarea();
+			detachWindow();
+		};
+	}
+	/** Hides an element, puts it over the canvas and listens to it. */
+	prepare(field) {
+		field.setAttribute("aria-hidden", "true");
+		field.setAttribute("autocomplete", "off");
+		field.setAttribute("autocorrect", "off");
+		field.setAttribute("autocapitalize", "off");
+		field.setAttribute("spellcheck", "false");
+		field.tabIndex = -1;
+		Object.assign(field.style, {
 			position: "fixed",
 			left: "0px",
 			top: "0px",
@@ -2928,16 +3005,62 @@ var EditingProxy = class {
 			pointerEvents: "none",
 			zIndex: "2147483647"
 		});
-		this.doc.body.appendChild(textarea);
-		this.detach = this.listen();
+		this.doc.body.appendChild(field);
+		return this.listen(field);
+	}
+	/** The password input, made the first time a secret field needs it. */
+	passwordField() {
+		if (this.password === null) {
+			const input = this.doc.createElement("input");
+			input.setAttribute("type", "password");
+			const detach = this.prepare(input);
+			input.setAttribute("data-1p-ignore", "");
+			input.setAttribute("data-lpignore", "true");
+			this.password = input;
+			const previous = this.detach;
+			this.detach = () => {
+				previous();
+				detach();
+			};
+		}
+		return this.password;
+	}
+	/** Whether an element is one this proxy edits through. */
+	owns(element) {
+		return element !== null && (element === this.textarea || element === this.password);
+	}
+	/**
+	* Moves editing to the other element: the focused editable became, or
+	* stopped being, a secret one. Focus follows if the old element had
+	* it; the blur that causes is ours, not the person leaving the field.
+	*/
+	swapTo(next) {
+		const previous = this.field;
+		const hadFocus = this.doc.activeElement === previous;
+		this.field = next;
+		this.composing = false;
+		this.write(previous, null);
+		this.write(next, ...this.described);
+		if (previous === this.password) previous.value = "";
+		if (hadFocus) {
+			this.refocusing = true;
+			try {
+				next.focus({ preventScroll: true });
+			} finally {
+				this.refocusing = false;
+			}
+		}
 	}
 	/** True while an editable in the runtime has focus. */
 	get active() {
 		return this.state !== null;
 	}
-	/** The hidden element, for tests. */
+	/**
+	* The hidden element editing goes through: the textarea, or the
+	* password input while a secret field has focus. For tests.
+	*/
 	get element() {
-		return this.textarea;
+		return this.field;
 	}
 	/**
 	* The runtime's editing state changed. Null means no editable has
@@ -2950,19 +3073,22 @@ var EditingProxy = class {
 		this.state = state;
 		if (state === null) {
 			if (wasActive) {
-				if (this.doc.activeElement === this.textarea) {
-					this.textarea.blur();
+				if (this.doc.activeElement === this.field) {
+					this.field.blur();
 					this.canvas.focus({ preventScroll: true });
 				}
+				if (this.password !== null) this.password.value = "";
 			}
 			return;
 		}
+		const wanted = state.secret === true ? this.passwordField() : this.textarea;
+		if (wanted !== this.field) this.swapTo(wanted);
 		this.position(state);
 		this.mirror(state);
-		this.textarea.setAttribute("enterkeyhint", state.multiline ? "enter" : "done");
-		if (!wasActive || this.doc.activeElement !== this.textarea) {
+		this.field.setAttribute("enterkeyhint", state.multiline ? "enter" : "done");
+		if (!wasActive || this.doc.activeElement !== this.field) {
 			const active = this.doc.activeElement;
-			if (active === null || active === this.doc.body || active === this.canvas || active === this.textarea) this.textarea.focus({ preventScroll: true });
+			if (active === null || active === this.doc.body || active === this.canvas || this.owns(active)) this.field.focus({ preventScroll: true });
 		}
 	}
 	/**
@@ -2977,8 +3103,8 @@ var EditingProxy = class {
 	* IME with nothing to compose into.
 	*/
 	focus() {
-		if (this.disposed || this.state === null || this.doc.activeElement === this.textarea) return;
-		this.textarea.focus({ preventScroll: true });
+		if (this.disposed || this.state === null || this.doc.activeElement === this.field) return;
+		this.field.focus({ preventScroll: true });
 	}
 	/**
 	* Re-takes DOM focus from inside a user gesture, so a phone opens its
@@ -3010,15 +3136,15 @@ var EditingProxy = class {
 	*/
 	raiseKeyboard() {
 		if (this.disposed || this.state === null) return;
-		const textarea = this.textarea;
-		if (this.doc.activeElement !== textarea) {
-			textarea.focus({ preventScroll: true });
+		const field = this.field;
+		if (this.doc.activeElement !== field) {
+			field.focus({ preventScroll: true });
 			return;
 		}
 		this.refocusing = true;
 		try {
-			textarea.blur();
-			textarea.focus({ preventScroll: true });
+			field.blur();
+			field.focus({ preventScroll: true });
 		} finally {
 			this.refocusing = false;
 		}
@@ -3034,10 +3160,21 @@ var EditingProxy = class {
 	* the person is really typing into. That the two cannot disagree is
 	* the reason the field's semantics live here rather than on a second
 	* element beside it.
+	*
+	* Nothing of the record's value is written: the element's own value
+	* is the field's text (a secret field's mask), and that is what a
+	* screen reader reads.
 	*/
 	describe(record, activeDescendant, controls) {
 		if (this.disposed) return;
-		const textarea = this.textarea;
+		this.described = [
+			record,
+			activeDescendant,
+			controls
+		];
+		this.write(this.field, record, activeDescendant, controls);
+	}
+	write(textarea, record, activeDescendant, controls) {
 		if (record === null) {
 			textarea.setAttribute("aria-hidden", "true");
 			for (const attribute of [
@@ -3075,6 +3212,7 @@ var EditingProxy = class {
 		this.detach();
 		this.state = null;
 		this.textarea.remove();
+		this.password?.remove();
 	}
 	/** Puts the element where the caret is, so the IME window opens there. */
 	position(state) {
@@ -3082,7 +3220,7 @@ var EditingProxy = class {
 		const height = Math.max(1, state.caret.height);
 		const left = rect.left + Math.min(Math.max(0, state.caret.x), Math.max(0, rect.width - 1));
 		const top = rect.top + Math.min(Math.max(0, state.caret.y), Math.max(0, rect.height - height));
-		const style = this.textarea.style;
+		const style = this.field.style;
 		style.left = `${left}px`;
 		style.top = `${top}px`;
 		style.height = `${height}px`;
@@ -3092,15 +3230,15 @@ var EditingProxy = class {
 	/** Mirrors the runtime's text and selection, except while the IME owns the element. */
 	mirror(state) {
 		if (this.composing) return;
-		const textarea = this.textarea;
+		const textarea = this.field;
 		if (textarea.value !== state.text) textarea.value = state.text;
 		const direction = state.selectionDirection ?? "forward";
 		if (textarea.selectionStart !== state.selectionStart || textarea.selectionEnd !== state.selectionEnd || state.selectionEnd > state.selectionStart && textarea.selectionDirection !== direction) try {
 			textarea.setSelectionRange(state.selectionStart, state.selectionEnd, direction);
 		} catch {}
 	}
-	listen() {
-		const textarea = this.textarea;
+	/** Listens to one of the two elements; each has the same listeners. */
+	listen(textarea) {
 		const onBeforeInput = (event) => {
 			const input = event;
 			const type = input.inputType;
@@ -3127,42 +3265,19 @@ var EditingProxy = class {
 			this.sink.compositionEnd(text);
 			if (this.state !== null) this.mirror(this.state);
 		};
-		const onPaste = (event) => {
-			const clipboard = event.clipboardData;
-			event.preventDefault();
-			const text = clipboard?.getData("text/plain") ?? "";
-			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.
-		*
-		* When no editable has focus this proxy blurs and hands focus back
-		* to the canvas, so the browser fires `paste` there — and the
-		* listener above, which is on the textarea, never hears it. The
-		* text was dropped before it reached the application at all, which
-		* is half of why a grid could not be pasted into; the other half
-		* was `UiEditingController.paste` having nowhere to send it.
-		*
-		* The two listeners cannot both fire for one paste: the event goes
-		* to whichever element has focus, and only one of them ever does.
-		*/
-		const onCanvasPaste = (event) => {
-			if (this.doc.activeElement === textarea) return;
-			onPaste(event);
-		};
 		const onCopy = (event) => {
 			const clipboard = event.clipboardData;
 			const state = this.state;
 			if (clipboard === null || state === null) return;
 			event.preventDefault();
+			if (state.secret === true) return;
 			clipboard.setData("text/plain", state.clipboard ?? 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;
 			onCopy(event);
-			if (state !== null && (state.clipboard !== void 0 ? state.clipboard.length > 0 : state.selectionEnd > state.selectionStart)) this.sink.beforeInput("deleteByCut", null);
+			if (state !== null && state.secret !== true && (state.clipboard !== void 0 ? state.clipboard.length > 0 : state.selectionEnd > state.selectionStart)) this.sink.beforeInput("deleteByCut", null);
 		};
 		const onKeyDown = (event) => {
 			this.sink.keyDown?.(event);
@@ -3173,45 +3288,83 @@ var EditingProxy = class {
 		const onBlur = (event) => {
 			if (this.refocusing) return;
 			const related = event.relatedTarget;
-			if (this.state !== null && this.doc.hasFocus() && related !== this.canvas) this.sink.blur();
-		};
-		const onReposition = () => {
-			if (this.state !== null) this.position(this.state);
+			if (this.state !== null && this.doc.hasFocus() && related !== this.canvas && !this.owns(related)) this.sink.blur();
 		};
 		textarea.addEventListener("beforeinput", onBeforeInput);
 		textarea.addEventListener("compositionstart", onCompositionStart);
 		textarea.addEventListener("input", onInput);
 		textarea.addEventListener("compositionend", onCompositionEnd);
-		textarea.addEventListener("paste", onPaste);
+		textarea.addEventListener("paste", this.onPaste);
 		textarea.addEventListener("copy", onCopy);
 		textarea.addEventListener("cut", onCut);
 		textarea.addEventListener("keydown", onKeyDown);
-		this.canvas.addEventListener("paste", onCanvasPaste);
 		textarea.addEventListener("keyup", onKeyUp);
 		textarea.addEventListener("blur", onBlur);
-		this.view?.addEventListener("scroll", onReposition, {
-			capture: true,
-			passive: true
-		});
-		this.view?.addEventListener("resize", onReposition);
 		return () => {
 			textarea.removeEventListener("beforeinput", onBeforeInput);
 			textarea.removeEventListener("compositionstart", onCompositionStart);
 			textarea.removeEventListener("input", onInput);
 			textarea.removeEventListener("compositionend", onCompositionEnd);
-			textarea.removeEventListener("paste", onPaste);
+			textarea.removeEventListener("paste", this.onPaste);
 			textarea.removeEventListener("copy", onCopy);
 			textarea.removeEventListener("cut", onCut);
 			textarea.removeEventListener("keydown", onKeyDown);
-			this.canvas.removeEventListener("paste", onCanvasPaste);
 			textarea.removeEventListener("keyup", onKeyUp);
 			textarea.removeEventListener("blur", onBlur);
+		};
+	}
+	onPaste = (event) => {
+		const clipboard = event.clipboardData;
+		event.preventDefault();
+		const text = clipboard?.getData("text/plain") ?? "";
+		const html = clipboard?.getData("text/html") ?? "";
+		if (text.length > 0 || html.length > 0) this.sink.paste(text, html.length > 0 ? html : null);
+	};
+	listenWindow() {
+		/**
+		* A paste aimed at the canvas rather than at the field.
+		*
+		* When no editable has focus this proxy blurs and hands focus back
+		* to the canvas, so the browser fires `paste` there — and the
+		* listener on the field's element never hears it. The
+		* text was dropped before it reached the application at all, which
+		* is half of why a grid could not be pasted into; the other half
+		* was `UiEditingController.paste` having nowhere to send it.
+		*
+		* The two listeners cannot both fire for one paste: the event goes
+		* to whichever element has focus, and only one of them ever does.
+		*/
+		const onCanvasPaste = (event) => {
+			if (this.owns(this.doc.activeElement)) return;
+			this.onPaste(event);
+		};
+		const onReposition = () => {
+			if (this.state !== null) this.position(this.state);
+		};
+		this.view?.addEventListener("scroll", onReposition, {
+			capture: true,
+			passive: true
+		});
+		this.view?.addEventListener("resize", onReposition);
+		this.canvas.addEventListener("paste", onCanvasPaste);
+		return () => {
+			this.canvas.removeEventListener("paste", onCanvasPaste);
 			this.view?.removeEventListener("scroll", onReposition, { capture: true });
 			this.view?.removeEventListener("resize", onReposition);
 		};
 	}
 };
 /**
+* Reads the system clipboard's text from the main thread; null where
+* the browser has no async clipboard or refuses (no secure context, no
+* focus, or the person said no to its prompt). It never rejects.
+*/
+function readClipboard() {
+	const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+	if (clipboard === void 0 || typeof clipboard.readText !== "function") return Promise.resolve(null);
+	return clipboard.readText().then((text) => text, () => null);
+}
+/**
 * 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
@@ -4341,6 +4494,8 @@ function watchPixelRatio(onChange, view = globalThis.window) {
 }
 //#endregion
 //#region src/app/worker/WorkerApp.ts
+/** Refreshes timed to tell the worker the display's interval. */
+const DISPLAY_SAMPLES = 12;
 /**
 * Main-thread half of a worker-hosted Gesso application.
 *
@@ -4831,6 +4986,29 @@ var WorkerApp = class {
 		};
 		this.frameHandle = requestAnimationFrame(step);
 	}
+	/**
+	* Measures the display's interval on this thread's refreshes and tells
+	* the worker, whose own may keep no display's time; see
+	* `displayInterval` in the protocol. A dozen refreshes, once, at start.
+	*/
+	measureDisplay() {
+		if (typeof requestAnimationFrame !== "function") return;
+		const times = [];
+		const step = (time) => {
+			times.push(time);
+			if (times.length < DISPLAY_SAMPLES) {
+				requestAnimationFrame(step);
+				return;
+			}
+			const gaps = times.slice(1).map((value, index) => value - times[index]).sort((a, b) => a - b);
+			this.post({
+				type: "displayInterval",
+				ms: gaps[Math.floor(gaps.length / 2)],
+				origin: performance.timeOrigin
+			});
+		};
+		requestAnimationFrame(step);
+	}
 	dispose() {
 		this.disconnectWebMcp?.();
 		this.disconnectWebMcp = null;
@@ -4905,6 +5083,8 @@ var WorkerApp = class {
 				layoutPasses: message.layoutPasses,
 				at: message.at,
 				inputLatencyMs: message.inputLatencyMs,
+				time: message.time,
+				wheelScroll: message.wheelScroll,
 				phases: message.phases,
 				renderer: message.renderer,
 				gpu: message.gpu
@@ -4917,6 +5097,7 @@ var WorkerApp = class {
 		}
 		if (message.type === "ready") {
 			this.ready = true;
+			this.measureDisplay();
 			return;
 		}
 		if (message.type === "frameLoop") {
@@ -4956,6 +5137,14 @@ var WorkerApp = class {
 			}));
 			return;
 		}
+		if (message.type === "clipboardRead") {
+			readClipboard().then((text) => this.post({
+				type: "clipboardReadResult",
+				id: message.id,
+				text
+			}));
+			return;
+		}
 		if (message.type === "openUrl") {
 			openUrlWith(this.options.onOpenUrl, message.url);
 			return;
@@ -6559,10 +6748,13 @@ var FocusService = class {
 	}
 	/**
 	* Ends the innermost trap and returns focus to whatever held it when
-	* the trap was taken — the button that opened the dialog.
+	* the trap was taken — the button that opened the dialog. Given the
+	* node trapped in, only that trap ends, and nothing when it ended
+	* already: a trap's subtree removed releases it, and a release after
+	* that would otherwise end the trap under it.
 	*/
-	releaseTrap() {
-		this.run((manager) => manager.popScope());
+	releaseTrap(scope) {
+		this.run((manager) => manager.popScope(scope));
 	}
 	run(action) {
 		const manager = this.manager;
@@ -7365,6 +7557,12 @@ const MAX_ROOT_COMPONENT_DEPTH = 32;
 */
 /** How many shell requests are held for a listener that has not attached, before the rest are dropped. */
 const HELD_SHELL_REQUESTS = 256;
+/** The longest last frame after which an input's frame is still drawn early: half a 60 Hz refresh. See `GessoRuntime.answerInput`. */
+const EARLY_FRAME_MAX_MS = 8;
+/** The least time between two early frames: about half a refresh at 60 Hz. See `GessoRuntime.answerInput`. */
+const EARLY_FRAME_GAP_MS = 8;
+/** How long after a discrete input a channel's patch counts as its answer, and is drawn early. See `GessoRuntime.answerInput`. */
+const ANSWER_WINDOW_MS = 500;
 var GessoRuntime = class {
 	services;
 	channels;
@@ -7410,6 +7608,16 @@ var GessoRuntime = class {
 	constraints;
 	pixelRatio;
 	lastFrameMs = 0;
+	/** The timer that draws an input's frame early; see `answerInput`. */
+	earlyFrame = null;
+	/** When the last early frame was drawn, on this thread's clock. */
+	lastEarlyFrame = -Infinity;
+	/** When the last discrete input was routed; see `answerInput`. */
+	lastDiscreteInput = -Infinity;
+	/** The display time the frame being drawn is for; see `FrameMetrics.time`. */
+	frameTime = null;
+	/** When the frame's first phase began, before its changes were collected; see `FrameMetrics.durationMs`. */
+	frameBegan = null;
 	frameListener = null;
 	rendererErrorListener = null;
 	frameErrorListener = null;
@@ -7757,7 +7965,10 @@ var GessoRuntime = class {
 	*/
 	deferPatchesFrom(sources) {
 		this.replicas = sources;
-		for (const source of sources) source.deferPatches(() => this.scheduler.notifyDirty());
+		for (const source of sources) source.deferPatches(() => {
+			this.scheduler.notifyDirty();
+			if (now() - this.lastDiscreteInput < ANSWER_WINDOW_MS) this.drawEarly();
+		});
 	}
 	/** Starts the frame scheduler. */
 	start() {
@@ -7932,6 +8143,51 @@ var GessoRuntime = class {
 		this.inputLatency.mark(at, this.scheduler.framePending);
 	}
 	/**
+	* Draws the frame a discrete input armed (a key, a character typed, a
+	* paste, a press) as soon as the input has been routed, rather than at
+	* the next refresh.
+	*
+	* Waiting for the refresh is what typing cost. With keys at random
+	* points in the frame, a key waited half a refresh on average and
+	* nearly a whole one at worst before its frame began, so keystroke to
+	* frame was p50 12.5 ms and p95 20.7 ms for about 5 ms of work:
+	* a quarter of all keys over a frame at 60 Hz. A frame drawn in its
+	* own task is committed when the task ends, and shown at the next
+	* refresh the compositor has not yet taken, which is never later than
+	* the frame the refresh would have drawn.
+	*
+	* It runs in a task of its own, a zero timer, not in the input's: a
+	* key arrives as `keyDown` and then `beforeInput`, two messages posted
+	* together, and one frame for both is the point. Continuous input
+	* (pointer moves, the wheel) is left to the refresh, which already
+	* coalesces it. Two guards keep it from costing more than it saves:
+	* nothing early while the last frame took more than half a refresh,
+	* when a second frame in the same refresh would take time the next
+	* one needs; and no early frame within `EARLY_FRAME_GAP_MS` of the
+	* last, so a burst of keys is still one frame per refresh or so.
+	*
+	* The answer to an input often comes later, from another thread: quick
+	* open's results, a completion list. A channel's patch that arrives
+	* within `ANSWER_WINDOW_MS` of a discrete input is drawn early the same
+	* way (see `deferPatchesFrom`), so the answer does not wait for a
+	* refresh either.
+	*/
+	answerInput() {
+		this.lastDiscreteInput = now();
+		this.drawEarly();
+	}
+	/** Draws the pending frame in a task of its own, if the guards in `answerInput` allow. */
+	drawEarly() {
+		if (!this.started || !this.visible || this.earlyFrame !== null || !this.scheduler.framePending) return;
+		if (this.lastFrameMs > EARLY_FRAME_MAX_MS || now() - this.lastEarlyFrame < EARLY_FRAME_GAP_MS) return;
+		this.earlyFrame = setTimeout(() => {
+			this.earlyFrame = null;
+			if (!this.started || !this.scheduler.framePending) return;
+			this.lastEarlyFrame = now();
+			this.scheduler.flush(now());
+		}, 0);
+	}
+	/**
 	* Turns the layout inspector on or off. While on, every frame paints
 	* the hovered node's boxes and the measure heatmap over the scene, and
 	* the inspect listener receives the hovered node's explanation.
@@ -8344,6 +8600,10 @@ var GessoRuntime = class {
 	settleClipboard(id, copied) {
 		this.services.get(ShellService).settleClipboard(id, copied);
 	}
+	/** Reports what a clipboard read found, settling the promise `ShellService.readText` returned. */
+	settleClipboardRead(id, text) {
+		this.services.get(ShellService).settleClipboardRead(id, text);
+	}
 	/**
 	* Reports what the shell found in `localStorage`, settling the
 	* promise `ShellService.requestStorage` returned.
@@ -8653,6 +8913,10 @@ var GessoRuntime = class {
 		if (node === void 0 || !this.focusManager.focus(node)) this.focusManager.blur();
 	}
 	dispose() {
+		if (this.earlyFrame !== null) {
+			clearTimeout(this.earlyFrame);
+			this.earlyFrame = null;
+		}
 		if (this.scrollbarTimer !== null) {
 			clearTimeout(this.scrollbarTimer);
 			this.scrollbarTimer = null;
@@ -9492,6 +9756,15 @@ var GessoRuntime = class {
 			}
 		};
 	}
+	/** Where the container the wheel last scrolled is; see `FrameMetrics.wheelScroll`. */
+	wheelScroll() {
+		const node = this.input.wheel.lastScrolled;
+		const record = node === null ? void 0 : this.engine.recordFor(node);
+		return record === void 0 ? null : {
+			x: record.scrollX,
+			y: record.scrollY
+		};
+	}
 	/**
 	* Work that must happen before the frame's dirty set is snapshotted.
 	*
@@ -9511,7 +9784,9 @@ var GessoRuntime = class {
 	* silently did nothing, so a theme change never reached descendants.
 	*/
 	runPreCollectPhases(time) {
+		this.frameBegan = now();
 		this.phaseTimings = emptyPhaseTimings();
+		this.frameTime = time;
 		this.phaseTimings.ticks = this.timePhase(() => this.visible && this.animations.isRunning, () => this.animations.advance(time));
 		this.scheduleAnimationTick(time);
 		this.phaseTimings.patches = this.timePhase(() => this.replicas.some((replica) => replica.hasPendingPatches), () => {
@@ -9749,10 +10024,10 @@ var GessoRuntime = class {
 		if (this.renderer.backend === "webgpu" && this.renderer.isLost) this.recoverWebGPU(this.renderer);
 		const overlay = this.inspector.hasOverlay ? this.inspector.overlay(started) : null;
 		this.gpuTimings = null;
-		const changes = this.graph.getDirtyNodes().isEmpty() ? {
-			frame,
+		const changes = {
+			frame: withPending(frame, this.graph.getDirtyNodes()),
 			geometryVersion: this.engine.geometryVersion
-		} : void 0;
+		};
 		this.phaseTimings.render = this.timePhase(() => this.renderer.isReady, () => this.renderer.render(root, {
 			layout: this.engine,
 			text: this.textMeasurer,
@@ -9766,7 +10041,8 @@ var GessoRuntime = class {
 		}
 		this.sendDevtoolsUpdates(frame);
 		const finished = now();
-		const elapsed = finished - started;
+		const elapsed = finished - (this.frameBegan ?? started);
+		this.frameBegan = null;
 		this.lastFrameMs = elapsed;
 		this.scheduleScrollbarFade(finished);
 		this.scheduleCaretBlink(finished);
@@ -9781,6 +10057,8 @@ var GessoRuntime = class {
 			layoutPasses: settled.passes,
 			at: finished,
 			inputLatencyMs: this.inputLatency.take(epochAt(finished)),
+			time: this.frameTime,
+			wheelScroll: this.wheelScroll(),
 			phases: this.phaseTimings,
 			renderer: this.rendererState,
 			gpu: this.gpuTimings
@@ -10117,6 +10395,13 @@ function watchContextRestored(canvas, restored) {
 	target.addEventListener("contextrestored", restored);
 	return () => target.removeEventListener?.("contextrestored", restored);
 }
+/** A frame's changes and those made since it was collected, together. */
+function withPending(frame, pending) {
+	if (pending.isEmpty()) return frame;
+	const merged = new Map(frame.entries());
+	for (const node of pending.values()) merged.set(node, (merged.get(node) ?? DirtyFlags.None) | node.dirtyFlags);
+	return new UiFrame(frame.id, frame.time, merged);
+}
 //#endregion
 //#region src/app/GessoApp.ts
 /**
@@ -10518,6 +10803,11 @@ var GessoApp = class {
 			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);
+			else if (request.type === "clipboardRead") this.runtime.settleClipboardRead(request.id, null);
+			return;
+		}
+		if (request.type === "clipboardRead") {
+			readClipboard().then((text) => this.runtime.settleClipboardRead(request.id, text));
 			return;
 		}
 		if (request.type === "clipboard") {
@@ -11732,6 +12022,9 @@ var RenderWorkerApp = class {
 			case "clipboardResult":
 				runtime.settleClipboard(message.id, message.copied);
 				break;
+			case "clipboardReadResult":
+				runtime.settleClipboardRead(message.id, message.text);
+				break;
 			case "storageResult":
 				runtime.settleStorage(message.id, message.result);
 				break;
@@ -11741,10 +12034,14 @@ var RenderWorkerApp = class {
 			case "tick":
 				this.clock?.tick(message.time);
 				break;
+			case "displayInterval":
+				this.clock?.displayInterval(message.ms, message.origin);
+				break;
 			case "fullscreenChanged":
 				runtime.setFullscreen(message.active);
 				return;
 			case "visibility":
+				this.clock?.setHidden(!message.visible);
 				runtime.setVisible(message.visible);
 				break;
 			case "inspector":
@@ -11773,7 +12070,10 @@ var RenderWorkerApp = class {
 				this.channels = void 0;
 				this.runtime = void 0;
 		}
-		if (this.runtime !== void 0 && isInputMessage(message)) this.runtime.noteInput(message.at);
+		if (this.runtime !== void 0 && isInputMessage(message)) {
+			this.runtime.noteInput(message.at);
+			if (isDiscreteInputMessage(message)) this.runtime.answerInput();
+		}
 	}
 	/**
 	* Swaps the `APPLICATION_WORKER` placeholder for the shell's port.
@@ -11878,6 +12178,10 @@ var RenderWorkerApp = class {
 				id: request.id,
 				text: request.text
 			});
+			else if (request.type === "clipboardRead") this.host.postMessage({
+				type: "clipboardRead",
+				id: request.id
+			});
 			else if (request.type === "openUrl") this.host.postMessage({
 				type: "openUrl",
 				url: request.url
@@ -11969,6 +12273,8 @@ var RenderWorkerApp = class {
 				layoutPasses: metrics.layoutPasses,
 				at: metrics.at,
 				inputLatencyMs: metrics.inputLatencyMs,
+				time: metrics.time,
+				wheelScroll: metrics.wheelScroll,
 				phases: metrics.phases,
 				renderer: metrics.renderer,
 				gpu: metrics.gpu