gesso-framework 0.5.0 → 0.6.0

package/dist/index.js

@@ -3,7 +3,7 @@ import { a as Each, i as show, n as getComponentMetadata, o as each, r as Show,
 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, 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";
+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, 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.
@@ -587,15 +587,28 @@ var ChannelReplica = class {
 	get send() {
 		return this.commandProxy;
 	}
-	viewProxy = new Proxy({}, { get: (_target, property) => {
-		if (typeof property !== "string") return;
-		const cell = this.cells.get(property);
-		if (cell === void 0) {
-			const names = [...this.cells.keys()].sort().join(", ");
-			throw new Error(`'${property}' is not a view key on channel '${this.token.name}'. Declared keys: ${names.length > 0 ? names : "(none)"}.`);
+	viewProxy = new Proxy({}, {
+		get: (_target, property) => {
+			if (typeof property !== "string") return;
+			const cell = this.cells.get(property);
+			if (cell === void 0) {
+				const names = [...this.cells.keys()].sort().join(", ");
+				throw new Error(`'${property}' is not a view key on channel '${this.token.name}'. Declared keys: ${names.length > 0 ? names : "(none)"}.`);
+			}
+			return cell;
+		},
+		has: (_target, property) => typeof property === "string" && this.cells.has(property),
+		ownKeys: () => [...this.cells.keys()],
+		getOwnPropertyDescriptor: (_target, property) => {
+			const cell = typeof property === "string" ? this.cells.get(property) : void 0;
+			return cell === void 0 ? void 0 : {
+				value: cell,
+				enumerable: true,
+				configurable: true,
+				writable: false
+			};
 		}
-		return cell;
-	} });
+	});
 	createCommandProxy() {
 		return new Proxy({}, { get: (_target, property) => {
 			if (typeof property !== "string") return;
@@ -841,19 +854,28 @@ let OverlayLayer = class OverlayLayer extends Component {
 	renderEntries(entries) {
 		const elements = [];
 		for (const entry of entries) {
-			if (entry.dismissOnOutsidePress) elements.push(Box({
-				key: `${entry.id}\0backdrop`,
-				position: "absolute",
-				inset: 0,
-				zIndex: entry.zIndex,
-				onPointerDown: () => this.overlays.close(entry.id),
-				onWheel: () => this.overlays.close(entry.id)
-			}));
+			if (entry.dismissOnOutsidePress === true || entry.modal === true) {
+				const dismiss = entry.dismissOnOutsidePress === true;
+				const environment = entry.environment ?? entry.anchor ?? null;
+				elements.push(Box({
+					key: `${entry.id}\0backdrop`,
+					position: "absolute",
+					inset: 0,
+					zIndex: entry.zIndex,
+					...inheritedFrom(environment),
+					modifiers: followEnvironment(environment),
+					...dismiss ? {
+						onPointerDown: () => this.overlays.close(entry.id),
+						onWheel: () => this.overlays.close(entry.id)
+					} : {}
+				}, ...entry.scrim ?? entry.modal === true ? [scrim()] : []));
+			}
 			elements.push(Box({
 				key: entry.id,
 				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,
@@ -862,7 +884,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;
@@ -871,6 +894,28 @@ let OverlayLayer = class OverlayLayer extends Component {
 __decorate([Inject(OverlayService)], OverlayLayer.prototype, "overlays", void 0);
 OverlayLayer = __decorate([Define("gesso-overlay-layer")], OverlayLayer);
 /**
+* The dim over the page, inside the backdrop rather than on it.
+*
+* A node at opacity 0 takes no presses, so a backdrop fading in would
+* let a press through to the page on the frame it opens. The fade is
+* this child's; the backdrop under it is solid to input from the start,
+* and the child takes none of its own. It comes in at the pace a
+* `Dialog` does, and under reduced motion it is simply there.
+*/
+function scrim() {
+	return Box({
+		position: "absolute",
+		inset: 0,
+		hitTestable: false,
+		backgroundColor: "scrim",
+		modifiers: [motion({
+			initial: fade,
+			duration: "slow",
+			easing: "decelerate"
+		})]
+	});
+}
+/**
 * `center` as the layout engine takes it.
 *
 * Both edges of the axis are pinned, which stretches the entry's box
@@ -905,11 +950,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,9 +958,33 @@ function inheritedFrom(node) {
 	return {
 		theme: environment.get(UiEnvironmentKeys.theme),
 		textStyle: environment.get(UiEnvironmentKeys.textStyle),
+		color: environment.get(UiEnvironmentKeys.color),
 		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("color", host.environment(UiEnvironmentKeys.color, 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) {
@@ -1884,6 +1949,38 @@ var ShellService = class {
 		});
 	}
 	/**
+	* Replaces the page with `url`, leaving the application.
+	*
+	* Not the router's `navigate`, which moves between screens *inside*
+	* the app and keeps it running: this unloads the page, and whatever
+	* the app held in memory goes with it. It is for the places a page
+	* has to be handed to somebody else's server and wait to be sent
+	* back — an OAuth sign-in that goes to `/api/auth/login`, is
+	* redirected to an identity provider and returns with a session, or
+	* a sign-out at `/api/auth/logout` that clears a cookie only the
+	* server can clear. It is also where a sign-in falls back to when
+	* `openPopup` reports the popup blocked.
+	*
+	* A request rather than a call because `window.location` belongs to
+	* the main thread and a render worker cannot reach it. A relative
+	* url resolves against the page, so `/api/auth/login` means the
+	* app's own server. The shell refuses anything that is not http,
+	* https or the page's own scheme — a `javascript:` url, above all,
+	* which would run in the page rather than go anywhere — so a url
+	* built from data cannot be turned into script.
+	*
+	* Nothing comes back, and there is nothing to wait for: if the
+	* redirect happens, the code that would have read the answer is
+	* gone. Leaving the page is not cancellable from here either, so a
+	* component with unsaved work should settle it before asking.
+	*/
+	redirect(url) {
+		this.handler?.({
+			type: "redirect",
+			url
+		});
+	}
+	/**
 	* Whether the application's surface is filling the screen.
 	*
 	* Read rather than assumed: the person can leave fullscreen with
@@ -1925,8 +2022,8 @@ var ShellService = class {
 	* The answer is a promise, the one place in the framework where a
 	* shell request has a reply, because there is nothing useful an
 	* application can do with a popup it cannot see the fate of. A sign-in
-	* flow that is blocked falls back to a full-page redirect, and it can
-	* only choose that if it is told.
+	* flow that is blocked falls back to a full-page redirect — `redirect`,
+	* below — and it can only choose that if it is told.
 	*
 	* Two browser rules shape the contract and both were measured in
 	* Chrome before this existed:
@@ -2463,6 +2560,89 @@ function browserFilesHost(view) {
 	};
 }
 //#endregion
+//#region src/app/shellRedirect.ts
+/**
+* The shell's half of `ShellService.redirect`: the page is replaced
+* with a url a component asked for.
+*
+* Both hosts answer the request — `WorkerApp` when it arrives as a
+* message, `GessoApp` when the runtime hands it over on the same
+* thread — and both go through here, so the one rule that matters is
+* written once.
+*
+* That rule is the scheme. `location.assign('javascript:…')` does not
+* go anywhere; it runs the script in the page, with everything the
+* page can reach. A component builds the url it redirects to, often
+* from data — a `returnTo` from the address bar, a link from the
+* server — and a shell that assigned whatever it was given would make
+* every such url a way to run script. So a url is resolved against
+* the page first, the way the browser would resolve it, and only an
+* http or https result, or one in the page's own scheme, is followed.
+* The page's own scheme is there for a page that is not served over
+* http at all — an Electrobun window loads from `views://` — where a
+* relative url resolves to that scheme and is no less the app's own.
+*/
+/** Schemes a redirect may always go to, whatever the page was served from. */
+const WEB_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:"]);
+/**
+* Schemes refused even when the page itself has one of them.
+*
+* A page served from `data:` or `blob:` is unusual but real — a
+* preview, a sandboxed frame — and "the page's own scheme" must not
+* then admit a `data:` url built from data, which is script by
+* another name.
+*/
+const REFUSED_SCHEMES = /* @__PURE__ */ new Set([
+	"javascript:",
+	"data:",
+	"blob:",
+	"about:"
+]);
+/**
+* The absolute url `url` names, resolved against `base` (the page's
+* address), or null when it is not one a redirect may follow.
+*
+* Null as well for a url that does not parse, or a base that does
+* not: a redirect nobody can resolve is refused rather than guessed.
+*/
+function redirectTarget(url, base) {
+	let page;
+	let target;
+	try {
+		page = new URL(base);
+		target = new URL(url, page);
+	} catch {
+		return null;
+	}
+	if (WEB_SCHEMES.has(target.protocol)) return target.href;
+	if (target.protocol === page.protocol && !REFUSED_SCHEMES.has(target.protocol)) return target.href;
+	return null;
+}
+/**
+* Follows a redirect, or refuses it, and says which.
+*
+* The url is checked before the handler is called as well as before
+* the default: a desktop host's `onRedirect` navigates a webview, and
+* a `javascript:` url is no safer there. The handler is given the
+* resolved, absolute url, so it never has to know what page the
+* request came from.
+*
+* A refusal is a warning on the console and nothing else. There is no
+* one to report it to — the request carries no answer — and throwing
+* on the main thread would take down a message handler over a url
+* that was simply ignored.
+*/
+function redirectWith(handler, url, location) {
+	const target = redirectTarget(url, location.href);
+	if (target === null) {
+		console.warn(`[gesso] ShellService.redirect refused ${JSON.stringify(url)}: only an http, https or relative url can replace the page.`);
+		return false;
+	}
+	if (handler !== void 0) handler(target);
+	else location.assign(target);
+	return true;
+}
+//#endregion
 //#region src/app/EditingProxy.ts
 /** Composition-owned input types: the composition events carry these. */
 const COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
@@ -2667,7 +2847,7 @@ var EditingProxy = class {
 	* the reason the field's semantics live here rather than on a second
 	* element beside it.
 	*/
-	describe(record, activeDescendant) {
+	describe(record, activeDescendant, controls) {
 		if (this.disposed) return;
 		const textarea = this.textarea;
 		if (record === null) {
@@ -2681,7 +2861,9 @@ var EditingProxy = class {
 				"aria-readonly",
 				"aria-disabled",
 				"aria-expanded",
-				"aria-activedescendant"
+				"aria-activedescendant",
+				"aria-controls",
+				"aria-autocomplete"
 			]) textarea.removeAttribute(attribute);
 			return;
 		}
@@ -2696,6 +2878,8 @@ var EditingProxy = class {
 		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;
@@ -2935,7 +3119,9 @@ const RECORD_ATTRIBUTES = [
 	"aria-modal",
 	"aria-multiselectable",
 	"aria-current",
-	"aria-activedescendant"
+	"aria-activedescendant",
+	"aria-controls",
+	"aria-autocomplete"
 ];
 let mirrors = 0;
 /**
@@ -3098,10 +3284,11 @@ var SemanticsMirror = class {
 		if (existing?.box !== void 0) this.position(existing);
 		if (record.id === this.focusedId) this.describeEditing(this.editing?.active === true ? record : null);
 	}
-	/** Hands the proxy the focused editable's record, with its active descendant's DOM id. */
+	/** 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;
-		this.editing?.describe(record, active === void 0 ? void 0 : this.idPrefix + active);
+		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");
@@ -3148,6 +3335,8 @@ var SemanticsMirror = class {
 		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.
@@ -4359,6 +4548,10 @@ var WorkerApp = class {
 			openUrlWith(this.options.onOpenUrl, message.url);
 			return;
 		}
+		if (message.type === "redirect") {
+			redirectWith(this.options.onRedirect, message.url, window.location);
+			return;
+		}
 		if (message.type === "fullscreen") {
 			if (this.canvas !== void 0) setElementFullscreen(this.canvas, message.enter);
 			return;
@@ -5551,8 +5744,8 @@ var RouterService = class {
 		const settled = match?.url ?? normalize$1(url);
 		if (options.replace === true) this.history?.replace(settled);
 		else if (options.push) this.history?.push(settled);
-		this.url.value = settled;
 		this.match.value = match;
+		this.url.value = settled;
 	}
 	/** First declared route whose pattern describes this url wins. */
 	resolve(url) {
@@ -5770,14 +5963,19 @@ 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
@@ -6989,7 +7187,7 @@ var GessoRuntime = class {
 				onChange: (node, listener) => this.environmentNotifier.add(node, listener)
 			},
 			layout: {
-				box: (node) => this.engine.recordFor(node) === void 0 ? null : this.engine.visibleBox(node),
+				box: (node) => this.engine.recordFor(node) === void 0 ? null : this.engine.screenBox(node),
 				flowBox: (node) => this.engine.recordFor(node) === void 0 ? null : this.engine.worldBox(node),
 				scroll: (node) => {
 					const record = this.engine.recordFor(node);
@@ -8067,6 +8265,7 @@ var GessoRuntime = class {
 		const editing = new UiEditingController({
 			recordFor: (node) => this.engine.recordFor(node),
 			visibleBox: (node) => this.engine.visibleBox(node),
+			screenBox: (node, part) => this.engine.screenBox(node, part),
 			toLocal: (node, x, y) => hitTester.toLocal(node, x, y),
 			measurer: this.textMeasurer,
 			markDirty: (node, flags) => this.graph.markDirty(node, flags),
@@ -8076,6 +8275,7 @@ var GessoRuntime = class {
 		const selection = new UiSelectionController({
 			recordFor: (node) => this.engine.recordFor(node),
 			visibleBox: (node) => this.engine.visibleBox(node),
+			screenBox: (node) => this.engine.screenBox(node),
 			measurer: this.textMeasurer,
 			markDirty: (node, flags) => this.graph.markDirty(node, flags),
 			root: () => this.layoutRoot(),
@@ -8124,7 +8324,7 @@ var GessoRuntime = class {
 				selection,
 				find,
 				activation: { clickAt: (node) => {
-					const box = this.engine.visibleBox(node);
+					const box = this.engine.screenBox(node);
 					return {
 						x: box.x + box.width / 2,
 						y: box.y + box.height / 2
@@ -8266,7 +8466,7 @@ var GessoRuntime = class {
 			return;
 		}
 		this.focusManager.focus(node);
-		const box = this.engine.visibleBox(node);
+		const box = this.engine.screenBox(node);
 		this.dispatcher.dispatch(new UiPointerEvent(UiEventType.Click, box.x + box.width / 2, box.y + box.height / 2, 1), node);
 	}
 	/**
@@ -8639,7 +8839,9 @@ var GessoRuntime = class {
 	* 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.
+	* A node it passes over is one this skipped before anyway. Below a
+	* `transform` the walk asks `screenBox` instead, which carries the
+	* box through it.
 	*/
 	collectSemanticsBoxes() {
 		const changed = [];
@@ -8660,14 +8862,25 @@ var GessoRuntime = class {
 			const stack = [[
 				root,
 				0,
-				0
+				0,
+				false
 			]];
 			while (stack.length > 0) {
-				const [node, dx, dy] = stack.pop();
+				const [node, dx, dy, inherited] = stack.pop();
 				const rec = this.engine.recordFor(node);
 				let childX = dx;
 				let childY = dy;
-				if (rec !== void 0) {
+				const own = node.properties.get("transform");
+				const transformed = inherited || typeof own === "object" && own !== null;
+				if (rec !== void 0 && inherited) {
+					if (this.semantics.has(node.id)) {
+						const box = this.engine.screenBox(node);
+						if (node === focused) {
+							focusedSeen = true;
+							offer(node.id, box);
+						} else if (this.onScreen(box)) offer(node.id, box);
+					}
+				} else if (rec !== void 0) {
 					const x = dx + rec.stickyOffsetX;
 					const y = dy + rec.stickyOffsetY;
 					if (!rec.boundsUnbounded && node !== focused && !this.onScreen({
@@ -8694,12 +8907,13 @@ var GessoRuntime = class {
 				for (let child = node.lastChild; child !== null; child = child.previousSibling) stack.push([
 					child,
 					childX,
-					childY
+					childY,
+					transformed
 				]);
 			}
 		}
 		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.engine.recordFor(focused) !== void 0) offer(focused.id, this.engine.screenBox(focused));
 		}
 		if (this.semanticsBoxes.size > this.semantics.size) {
 			for (const id of this.semanticsBoxes.keys()) if (!this.semantics.has(id)) this.semanticsBoxes.delete(id);
@@ -8965,7 +9179,7 @@ var GessoRuntime = class {
 		const read = (node) => {
 			const record = this.engine.recordFor(node);
 			return {
-				box: this.engine.visibleBox(node),
+				box: this.engine.screenBox(node),
 				scrollX: record?.scrollX ?? 0,
 				scrollY: record?.scrollY ?? 0
 			};
@@ -9811,6 +10025,10 @@ var GessoApp = class {
 			this.runtime.settlePopup(request.id, opened);
 			return;
 		}
+		if (request.type === "redirect") {
+			if (view !== null) redirectWith(void 0, request.url, view.location);
+			return;
+		}
 		view?.open(request.url, "_blank", "noopener,noreferrer");
 	}
 	observeResize() {
@@ -11119,6 +11337,10 @@ var RenderWorkerApp = class {
 				type: "openUrl",
 				url: request.url
 			});
+			else if (request.type === "redirect") this.host.postMessage({
+				type: "redirect",
+				url: request.url
+			});
 			else if (request.type === "fullscreen") this.host.postMessage({
 				type: "fullscreen",
 				enter: request.enter