gesso-framework 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { $ as InternalState, 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 structurallyEqual, 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 output, b as portHandle, c as classifyStorageError, d as storageReadValue, et as internalState, f as pick, g as APPLICATION_WORKER, h as serveChannels, i as OpfsStorage, it as isOutputTarget, j as ProvidedChannel, k as formatStream, l as storageErrorMessage, m as serve, n as persisted, nt as input, o as UndoStack, ot as outputTargetOf, p as pickKeys, q as resource, r as IndexedDbStorage, rt as into, s as MemoryStorage, st as withBodyOf, t as PersistedState, tt as InputCell, u as storageReadFailure, v as isPortErrorMessage, w as isConsoleEntryMessage, x as servePorts, y as isPortHandshake, z as isChannelHostMessage } from "./persisted-Ddb51avc.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 { BehaviorSubject, EMPTY, 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, 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, UiVirtualWindow, UiWheelController, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_WINDOW_PROP, WebGPURenderer, buildSemanticsTree, bumpFontStack, capturePointer, createCanvasSurface, createTween, createWebGPUSurface, defaultMotion, describeOverrides, diffSemantics, easings, formatExplanation, insetsEqual, isComponentLikeElement, isObservable, isWebGPUAvailable, linear, linkOf, markInstant, markNow, measure, measureSpan, motion, noInsets, observeViewportInsets, percent, performanceMarksEnabled, pointerDeviceOf, prepareInputSurface, propertyEffects, registerFontStack, resolveCursor, scrollbarThumb, 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, UiVirtualWindow, UiWheelController, VIRTUAL_INDEX_PROP, VIRTUAL_LEAD_PROP, VIRTUAL_WINDOW_PROP, WebGPURenderer, buildSemanticsSubtree, buildSemanticsTree, bumpFontStack, capturePointer, createCanvasSurface, createTween, createWebGPUSurface, defaultMotion, describeOverrides, diffSemantics, easings, formatExplanation, insetsEqual, isComponentLikeElement, isObservable, isWebGPUAvailable, linear, linkOf, markInstant, markNow, measure, measureSpan, motion, noInsets, observeViewportInsets, percent, performanceMarksEnabled, pointerDeviceOf, prepareInputSurface, propertyEffects, recordsEqual, registerFontStack, resolveCursor, scrollbarThumb, semanticsInertAbove, setPerformanceMarks, setPerformanceMarks as setPerformanceMarks$1, textRunOfRecordId, themeTokens, touchActionFor, wheelDeltaYOf } from "gesso-core";
 //#region src/Component.ts
 /**
 * Base class for all Gesso framework components.
@@ -1057,6 +1057,7 @@ var ShellService = class {
 	handler = null;
 	scheme = internalState("light");
 	insets = internalState(noInsets);
+	isFullscreen = internalState(false);
 	/** Popups asked for and not yet answered, by the id sent with each. */
 	popups = /* @__PURE__ */ new Map();
 	nextPopupId = 1;
@@ -1156,6 +1157,35 @@ var ShellService = class {
 		});
 	}
 	/**
+	* Whether the application's surface is filling the screen.
+	*
+	* Read rather than assumed: the person can leave fullscreen with
+	* Escape, which no request here hears about, and a button that
+	* tracked its own last press would then point the wrong way. The
+	* shell reports the real state and this follows it.
+	*/
+	fullscreen = this.isFullscreen;
+	/**
+	* Asks the shell to fill the screen, or to stop.
+	*
+	* A request rather than a call, for the reason the clipboard is one:
+	* the Fullscreen API is the document's, and the thread this runs on
+	* may not have a document. It can also be refused outright, because
+	* browsers only grant it during a gesture, which is why nothing here
+	* returns a promise pretending otherwise. Watch `fullscreen` for what
+	* actually happened.
+	*/
+	requestFullscreen(enter) {
+		this.handler?.({
+			type: "fullscreen",
+			enter
+		});
+	}
+	/** Called by the runtime when the shell reports the state. Not for applications. */
+	applyFullscreen(active) {
+		if (this.isFullscreen.value !== active) this.isFullscreen.value = active;
+	}
+	/**
 	* Opens a sized window and answers whether the browser allowed it.
 	*
 	* Separate from `openUrl` because the two differ in three ways that
@@ -3065,6 +3095,12 @@ var GessoRuntime = class {
 	replicas = [];
 	phaseTimings = emptyPhaseTimings();
 	started = false;
+	/**
+	* Whether the engine holds a laid-out tree, so `resize` knows which
+	* path it is on. Set by the first resize and by the first frame that
+	* lays out, whichever comes first; see `resize`.
+	*/
+	laidOutOnce = false;
 	constructor(options) {
 		this.services = options.services ?? new ServiceRegistry();
 		this.channels = options.channels ?? new ChannelRegistry();
@@ -3150,6 +3186,12 @@ var GessoRuntime = class {
 						y: record.scrollY
 					};
 				},
+				viewport: () => ({
+					x: 0,
+					y: 0,
+					width: this.width,
+					height: this.height
+				}),
 				onLayout: (node, listener) => this.layoutNotifier.add(node, listener)
 			},
 			animations: this.animations,
@@ -3323,8 +3365,12 @@ var GessoRuntime = class {
 		this.renderer.resize(width, height, dpr);
 		this.constraints = Constraints.loose(width, height);
 		if (this.root === void 0) return;
-		this.engine.layout(this.root, this.constraints);
-		this.graph.markDirty(this.root, DirtyFlags.Paint);
+		if (this.laidOutOnce) this.graph.markDirty(this.root, DirtyFlags.Layout | DirtyFlags.Paint);
+		else {
+			this.laidOutOnce = true;
+			this.engine.layout(this.root, this.constraints);
+			this.graph.markDirty(this.root, DirtyFlags.Paint);
+		}
 		if (this.started) this.scheduler.flush(now());
 	}
 	/**
@@ -3614,6 +3660,17 @@ var GessoRuntime = class {
 	* `AnimationDriver.setHidden` for why an entrance frozen at its
 	* first value is a hole in the page rather than a paused animation.
 	*/
+	/**
+	* The shell says the surface entered or left fullscreen.
+	*
+	* Reported rather than inferred from the request that asked for it,
+	* because the person can leave with Escape and a browser can refuse
+	* to enter at all; a control that tracked its own last press would
+	* then point the wrong way.
+	*/
+	setFullscreen(active) {
+		this.services.get(ShellService).applyFullscreen(active);
+	}
 	setVisible(visible) {
 		this.input.editing.setVisible(visible);
 		if (visible === this.visible) return;
@@ -4284,17 +4341,12 @@ var GessoRuntime = class {
 	* to say. `UiSemanticsUpdate` explains why they travel together
 	* anyway.
 	*/
-	updateSemantics(rebuild, moved) {
+	updateSemantics(frame, rebuild, moved) {
 		let patches = EMPTY_PATCHES;
 		const listener = this.semanticsListener;
 		if (rebuild) {
 			if (listener === null) this.semanticsStale = true;
-			else {
-				const next = buildSemanticsTree(this.layoutRoot());
-				patches = diffSemantics(this.semantics, next);
-				this.semantics = next;
-				this.semanticsStale = false;
-			}
+			else patches = this.rescopeSemantics(frame) ?? this.rebuildSemantics();
 		}
 		if (listener === null) return;
 		const boxes = moved || patches.length > 0 ? this.collectSemanticsBoxes() : EMPTY_BOXES;
@@ -4311,23 +4363,160 @@ var GessoRuntime = class {
 			boxes
 		});
 	}
+	/** 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;
+		this.semanticsStale = false;
+		return patches;
+	}
+	/**
+	* The patches for a frame that changed what some nodes *mean*
+	* without changing which nodes there are — or null when that cannot
+	* be established cheaply, and the whole tree has to be walked.
+	*
+	* This is the common case and it used to cost the uncommon one. A
+	* bound label is `text`, `text` marks semantics dirty, and the phase
+	* answered every one of them by rebuilding the tree from the root
+	* and diffing two maps: on the benchmark list, 2 ms on any frame a
+	* clock ticked, next to 0.03 ms for the layout of the same change.
+	*
+	* So the walk is rooted at what actually changed. For each dirty
+	* node the nearest ancestor *carrying a record* is found — a
+	* `Button`'s label lives on the button, not on the `Text` inside it
+	* that a parent claimed — and only that node's subtree is walked.
+	* `buildSemanticsSubtree` explains why the owner has to be a record
+	* holder for the indices to come out the same.
+	*
+	* It gives up, and says so with null, whenever the *shape* of the
+	* tree could have moved:
+	*
+	*   - a frame that changed the tree's children, which is a structural
+	*     change by definition;
+	*   - a dirty node with no record-holding ancestor, whose records sit
+	*     at the top level and are numbered among everything else there;
+	*   - an owner that is no longer describable, whose children would
+	*     reattach further up;
+	*   - a subtree that gained or lost a record, because `this.semantics`
+	*     is insertion-ordered and the diff promises adds in document
+	*     order — splicing one into the middle of a Map cannot preserve
+	*     that, and a mirror appending a child before its parent is a
+	*     worse bug than a slow frame.
+	*
+	* Each of those falls back to the full rebuild, which is correct by
+	* construction. Nothing here decides what a record says; it only
+	* decides how much of the tree has to be asked.
+	*/
+	rescopeSemantics(frame) {
+		if (this.semantics.size === 0 || this.semanticsStale) return null;
+		const owners = /* @__PURE__ */ new Set();
+		for (const [node, flags] of frame.entries()) {
+			if ((flags & DirtyFlags.Children) !== 0) return null;
+			if ((flags & DirtyFlags.Semantics) === 0) continue;
+			const owner = this.semanticsOwnerOf(node);
+			if (owner === null) return null;
+			owners.add(owner);
+			if (owners.size > SCOPED_SEMANTICS_OWNERS) return null;
+		}
+		if (owners.size === 0) return null;
+		const updates = [];
+		for (const owner of owners) {
+			const previous = this.semantics.get(owner.id);
+			const subtree = buildSemanticsSubtree(owner, previous.parent, previous.index, semanticsInertAbove(owner));
+			if (subtree === null) return null;
+			let covered = 0;
+			for (const id of this.semanticIdsUnder(owner)) {
+				const next = subtree.get(id);
+				if (next === void 0) return null;
+				covered++;
+				const before = this.semantics.get(id);
+				if (!recordsEqual(before, next)) updates.push(next);
+			}
+			if (covered !== subtree.size) return null;
+		}
+		const patches = [];
+		for (const record of updates) {
+			this.semantics.set(record.id, record);
+			patches.push({
+				op: "update",
+				node: record
+			});
+		}
+		return patches;
+	}
 	/**
-	* The mirrored nodes whose box differs from the one last sent.
+	* The nearest node at or above `node` that holds a semantics record,
+	* or null when nothing above it does.
+	*/
+	semanticsOwnerOf(node) {
+		for (let current = node; current !== null; current = current.parent) if (this.semantics.has(current.id)) return current;
+		return null;
+	}
+	/**
+	* The ids in the current tree that belong to `node`'s subtree.
+	*
+	* Read off the graph rather than remembered, which is sound here
+	* precisely because the caller has established that no node's
+	* children changed this frame.
+	*
+	* A text run is not a node and has no id of its own: it borrows its
+	* paragraph's and adds its position, numbered from zero without
+	* gaps. So the runs of a node are found by counting up until one is
+	* missing, rather than by scanning every key for the prefix.
+	*/
+	semanticIdsUnder(node) {
+		const ids = [];
+		const stack = [node];
+		while (stack.length > 0) {
+			const current = stack.pop();
+			if (this.semantics.has(current.id)) {
+				ids.push(current.id);
+				for (let run = 0;; run++) {
+					const id = `${current.id}${TEXT_RUN_ID_SEPARATOR}${run}`;
+					if (!this.semantics.has(id)) break;
+					ids.push(id);
+				}
+			}
+			for (let child = current.firstChild; child !== null; child = child.nextSibling) stack.push(child);
+		}
+		return ids;
+	}
+	/**
+	* The mirrored nodes whose box differs from the one last sent, and
+	* which are on screen.
+	*
+	* This runs on every frame that laid out, and `frameNeedsLayout`
+	* counts a transform — so it runs on every scrolled frame, where
+	* every box beneath the scroll container has moved. Whatever it
+	* returns crosses to the shell and is written as four inline styles
+	* per element, on the main thread, before the next paint. That is
+	* the one per-frame cost this architecture puts back on the thread
+	* it exists to keep free, and it was proportional to the whole
+	* mounted tree.
+	*
+	* So it is bounded by the viewport instead. A node scrolled out of
+	* sight keeps the last box the mirror was told about; there is
+	* nothing on screen for it to be wrong about, and the sweep picks it
+	* up again on the frame it comes back, because the box it is
+	* compared against is still the stale one. The focused node is
+	* always included whether or not it is on screen: the focus ring is
+	* drawn from its rectangle, and focus moving to something off screen
+	* is answered by `scrollIntoView`, whose own frame reports it.
 	*
-	* Bounded by the semantics tree, which is bounded by the *mounted*
-	* nodes — so a 100k-row list costs the fifteen rows it has mounted,
-	* the same bound the semantics tree walk has.
 	* Ids that have left the tree are dropped here rather than tracked,
 	* since a removal patch has already told the mirror about them.
 	*/
 	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 last = this.semanticsBoxes.get(id);
 			if (last !== void 0 && boxesEqual(last, box)) continue;
+			if (id !== focused && !this.onScreen(box)) continue;
 			this.semanticsBoxes.set(id, box);
 			changed.push({
 				id,
@@ -4339,6 +4528,15 @@ var GessoRuntime = class {
 		}
 		return changed;
 	}
+	/**
+	* Whether a box in viewport coordinates overlaps the canvas at all.
+	*
+	* Generous by a margin, so that something a scroll is about to bring
+	* in has its rectangle before it arrives rather than one frame after.
+	*/
+	onScreen(box) {
+		return box.x < this.width + SEMANTICS_VIEWPORT_MARGIN && box.y < this.height + SEMANTICS_VIEWPORT_MARGIN && box.x + box.width > -SEMANTICS_VIEWPORT_MARGIN && box.y + box.height > -SEMANTICS_VIEWPORT_MARGIN;
+	}
 	/** Scrolls every scroll container above `node` so a node-local box is visible. */
 	revealBox(node, box) {
 		for (const adjustment of this.engine.revealAdjustments(node, 0, box)) {
@@ -4508,7 +4706,10 @@ var GessoRuntime = class {
 		this.focusManager.settleScope();
 		const laidOut = frameNeedsLayout(frame);
 		this.phaseTimings.layout = this.timePhase(() => laidOut, () => this.engine.layoutForFrame(frame, this.constraints, root));
-		if (laidOut) this.inspector.recordLayout(started);
+		if (laidOut) {
+			this.laidOutOnce = true;
+			this.inspector.recordLayout(started);
+		}
 		if (!this.layoutNotifier.isEmpty()) this.layoutNotifier.notify((node) => {
 			const record = this.engine.recordFor(node);
 			return {
@@ -4523,7 +4724,7 @@ var GessoRuntime = class {
 		}
 		this.sendEditingState();
 		const rebuildSemantics = frameNeedsSemantics(frame);
-		this.phaseTimings.semantics = this.timePhase(() => rebuildSemantics || this.semanticsListener !== null && (laidOut || this.focusManager.focusedNode?.id !== this.lastFocusedId), () => this.updateSemantics(rebuildSemantics, laidOut));
+		this.phaseTimings.semantics = this.timePhase(() => rebuildSemantics || this.semanticsListener !== null && (laidOut || this.focusManager.focusedNode?.id !== this.lastFocusedId), () => this.updateSemantics(frame, rebuildSemantics, laidOut));
 		if (this.renderer.backend === "webgpu" && this.renderer.isLost) this.fallBackToCanvas2D(this.renderer);
 		const overlay = this.inspector.hasOverlay ? this.inspector.overlay(started) : null;
 		this.gpuTimings = null;
@@ -4823,6 +5024,24 @@ function frameNeedsLayout(frame) {
 * a closed dialog leaves the tree.
 */
 /** Shared empties, so a frame that changed nothing allocates nothing. */
+/**
+* How many separate subtrees a scoped semantics update will walk
+* before it gives up and walks the whole tree once.
+*
+* A frame that re-meant a handful of nodes is the case this exists
+* for — a clock, a counter, a row whose label changed. A frame that
+* re-meant a hundred has almost certainly re-meant a shared ancestor's
+* worth of them, and the subtrees start to overlap, so one walk of
+* everything is both cheaper and simpler than many walks of parts.
+*/
+const SCOPED_SEMANTICS_OWNERS = 32;
+/**
+* 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
+* one frame still hands the mirror the rows it is about to show.
+*/
+const SEMANTICS_VIEWPORT_MARGIN = 400;
 const EMPTY_PATCHES = [];
 const EMPTY_BOXES = [];
 function boxesEqual(a, b) {
@@ -6117,6 +6336,113 @@ function observeReducedMotion(onChange) {
 	return observeMediaQuery("(prefers-reduced-motion: reduce)", onChange);
 }
 //#endregion
+//#region src/app/fullscreen.ts
+/**
+* Enters or leaves fullscreen on an element, across the prefixes that
+* are still out there.
+*
+* Deliberately fire-and-forget. `requestFullscreen` returns a promise
+* that rejects when the browser refuses -- it only grants fullscreen
+* during a gesture -- and there is nothing useful to do about that
+* here: whether it worked is reported back by the `fullscreenchange`
+* event, which is also the only thing that hears about the person
+* pressing Escape.
+*/
+function setElementFullscreen(element, enter) {
+	const document = documentOf(element);
+	if (document === null) return;
+	const anyDocument = document;
+	if (enter) {
+		const target = element;
+		try {
+			if (typeof target.requestFullscreen === "function") target.requestFullscreen().catch(() => {});
+			else target.webkitRequestFullscreen?.();
+		} catch {}
+		return;
+	}
+	try {
+		if (typeof document.exitFullscreen === "function") document.exitFullscreen().catch(() => {});
+		else anyDocument.webkitExitFullscreen?.();
+	} catch {}
+}
+/**
+* The document an element belongs to, or null where there is not one.
+*
+* A canvas double in a spec has no `ownerDocument`, and neither has an
+* `OffscreenCanvas`. Falling back to the ambient `document` covers the
+* first case where a real one exists, and answering null covers the
+* rest: fullscreen is a thing a page has, and somewhere without a page
+* should decline rather than throw.
+*/
+function documentOf(element) {
+	const owner = element.ownerDocument ?? null;
+	if (owner !== null && typeof owner.addEventListener === "function") return owner;
+	const ambient = typeof globalThis.document === "undefined" ? null : globalThis.document;
+	return ambient !== null && typeof ambient.addEventListener === "function" ? ambient : null;
+}
+/** Whether anything in the element's document is currently fullscreen. */
+function isDocumentFullscreen(element) {
+	const document = documentOf(element);
+	if (document === null) return false;
+	return (document.fullscreenElement ?? document.webkitFullscreenElement ?? null) !== null;
+}
+/** Calls back whenever the document enters or leaves fullscreen. */
+function observeFullscreen(element, onChange) {
+	const document = documentOf(element);
+	if (document === null) return () => {};
+	const report = () => onChange(isDocumentFullscreen(element));
+	document.addEventListener("fullscreenchange", report);
+	document.addEventListener("webkitfullscreenchange", report);
+	return () => {
+		document.removeEventListener("fullscreenchange", report);
+		document.removeEventListener("webkitfullscreenchange", report);
+	};
+}
+/**
+* The box an application should lay itself out in, given whether its
+* canvas is currently filling the screen.
+*
+* **A `ResizeObserver` on the host does not see this happen**, and
+* that is the whole reason this exists. The fullscreen API lifts the
+* *canvas* out of the page and stretches it to the screen; the host
+* around it keeps the size it always had, so the observer never fires,
+* the runtime keeps laying out at the old size, and the browser scales
+* the result up. The picture looks right, and every coordinate is
+* wrong by the ratio between the two: a press near the bottom of a
+* fullscreen clip lands somewhere near the middle of the layout.
+*
+* So the size is read from the canvas while it is fullscreen and from
+* the host when it is not. On the way *out* the canvas has not been
+* put back yet when the event fires, which is why the host is the
+* right answer there rather than simply always asking the canvas.
+*/
+function surfaceBox(canvas, host, active) {
+	const box = (active ? canvas : host).getBoundingClientRect();
+	return box.width > 0 && box.height > 0 ? {
+		width: box.width,
+		height: box.height
+	} : null;
+}
+/**
+* Runs a callback once the browser has actually applied the new
+* geometry.
+*
+* `fullscreenchange` fires *before* the new size is in the layout, so
+* reading a box from inside it gives the size the element had a moment
+* ago. Measured here: entering fullscreen reported the canvas as its
+* old preview size, the surface stayed that size, and the browser
+* stretched it to the screen, which is precisely the thing
+* `surfaceBox` exists to prevent. Two frames, because the first is the
+* one the change lands on.
+*/
+function afterLayout(run) {
+	if (typeof globalThis.requestAnimationFrame !== "function") {
+		run();
+		return;
+	}
+	globalThis.requestAnimationFrame(() => globalThis.requestAnimationFrame(run));
+}
+//#endregion
 //#region src/app/shellHistory.ts
 function createShellHistory(options = {}, host = typeof window === "undefined" ? void 0 : window) {
 	const mode = options.mode ?? (host === void 0 ? "memory" : "path");
@@ -6367,6 +6693,8 @@ var WorkerApp = class {
 	* what the cache costs.
 	*/
 	canvasOrigin = null;
+	/** Whether the canvas is filling the screen; see the resize observer. */
+	fullscreen = false;
 	/**
 	* The hover move being held for this frame, and the frame holding
 	* it. See `flushPendingMove`.
@@ -6758,6 +7086,10 @@ var WorkerApp = class {
 			openUrlWith(this.options.onOpenUrl, message.url);
 			return;
 		}
+		if (message.type === "fullscreen") {
+			if (this.canvas !== void 0) setElementFullscreen(this.canvas, message.enter);
+			return;
+		}
 		if (message.type === "popup") {
 			this.openPopup(message);
 			return;
@@ -6847,6 +7179,7 @@ var WorkerApp = class {
 			const entry = entries[0];
 			if (entry === void 0) return;
 			this.canvasOrigin = null;
+			if (this.fullscreen) return;
 			const { width, height } = entry.contentRect;
 			if (width > 0 && height > 0) this.requestResize({
 				width,
@@ -7050,6 +7383,26 @@ var WorkerApp = class {
 				visible: document.visibilityState !== "hidden"
 			});
 		};
+		const detachFullscreen = observeFullscreen(canvas, (active) => {
+			this.canvasOrigin = null;
+			this.fullscreen = active;
+			this.post({
+				type: "fullscreenChanged",
+				active
+			});
+			afterLayout(() => {
+				this.canvasOrigin = null;
+				const box = this.host === void 0 ? null : surfaceBox(canvas, this.host, active);
+				if (box !== null) this.requestResize({
+					...box,
+					dpr: window.devicePixelRatio || 1
+				});
+			});
+		});
+		this.post({
+			type: "fullscreenChanged",
+			active: isDocumentFullscreen(canvas)
+		});
 		onVisibilityChange();
 		const detachReducedMotion = observeReducedMotion((reduced) => {
 			this.post({
@@ -7147,6 +7500,7 @@ var WorkerApp = class {
 		window.addEventListener("resize", onCanvasMayHaveMoved);
 		return () => {
 			detachReducedMotion();
+			detachFullscreen();
 			canvas.removeEventListener("mousedown", onMouseDown);
 			document.removeEventListener("visibilitychange", onVisibilityChange);
 			canvas.removeEventListener("pointerdown", onPointerDown);
@@ -7258,6 +7612,8 @@ var GessoApp = class {
 	mirror = null;
 	history = null;
 	detachVisibility = null;
+	detachFullscreen = null;
+	fullscreen = false;
 	detachReducedMotion = null;
 	/** Stops watching `prefers-color-scheme`; null while overridden. */
 	detachColorScheme = null;
@@ -7421,6 +7777,8 @@ var GessoApp = class {
 		this.mirror = null;
 		this.detachVisibility?.();
 		this.detachVisibility = null;
+		this.detachFullscreen?.();
+		this.detachFullscreen = null;
 		this.detachReducedMotion?.();
 		this.detachReducedMotion = null;
 		this.detachColorScheme?.();
@@ -7462,6 +7820,15 @@ var GessoApp = class {
 			const onVisibility = () => this.runtime.setVisible(document.visibilityState !== "hidden");
 			document.addEventListener("visibilitychange", onVisibility);
 			this.detachVisibility = () => document.removeEventListener("visibilitychange", onVisibility);
+			this.detachFullscreen = observeFullscreen(canvas, (active) => {
+				this.fullscreen = active;
+				this.runtime.setFullscreen(active);
+				afterLayout(() => {
+					const box = surfaceBox(canvas, this.host, active);
+					if (box !== null) this.resize(box.width, box.height);
+				});
+			});
+			this.runtime.setFullscreen(isDocumentFullscreen(canvas));
 		}
 		this.detachReducedMotion = observeReducedMotion((reduced) => this.runtime.setReducedMotion(reduced));
 		this.setColorScheme(this.colorSchemePreference);
@@ -7526,6 +7893,10 @@ var GessoApp = class {
 			writeClipboard(request.text, this.canvas.ownerDocument);
 			return;
 		}
+		if (request.type === "fullscreen") {
+			setElementFullscreen(this.canvas, request.enter);
+			return;
+		}
 		const view = this.canvas.ownerDocument.defaultView;
 		if (request.type === "storage") {
 			this.runtime.settleStorage(request.id, performShellStorage(request, () => view?.localStorage));
@@ -7549,6 +7920,7 @@ var GessoApp = class {
 		this.resizeObserver = new ResizeObserver((entries) => {
 			const entry = entries[0];
 			if (entry === void 0) return;
+			if (this.fullscreen) return;
 			this.resize(entry.contentRect.width, entry.contentRect.height);
 		});
 		this.resizeObserver.observe(this.host);
@@ -7937,6 +8309,89 @@ var ShellStorage = class {
 	}
 };
 //#endregion
+//#region src/app/videoClock.ts
+/**
+* A clip's position, taken from the sound playing beside it.
+*
+* **This is the clock inversion, and it is worth being explicit about
+* why it exists.** Everywhere else in this framework the animation
+* driver owns time: a video is a pure function of a position and the
+* position comes from a tween, which is what lets a clip be scheduled,
+* paced and stopped by exactly the machinery every other animated
+* thing uses. That arrangement is correct right up until the clip has
+* sound, and then it is exactly backwards.
+*
+* The asymmetry is in what the two media can survive. Video drops
+* frames: an application that stalled for 50ms shows the picture it
+* should be showing now and throws away the ones it missed, and nobody
+* can tell. Audio cannot do either — a gap is audible, and resampling
+* to catch up changes the pitch — so the sound plays at its own rate
+* whatever else is happening, and anything that must agree with it has
+* to follow. Which means the picture follows the sound, and a tween
+* driving the picture independently would drift against it within
+* seconds. There is no arrangement in which both lead.
+*
+* **And the sound cannot be played here.** `AudioContext` does not
+* exist on a worker, which is where this framework decodes and draws.
+* So the sound is the shell's to play — `AudioService` already does
+* exactly that, reporting where it has got to about once a second and
+* extrapolating in between on the animation driver — and what crosses
+* the thread boundary is one number. That is the whole of this file:
+* `AudioService` is already the right shape, and this is the adapter
+* that lets `videoSource` read it.
+*
+* ```ts
+* // The same file, played twice: the shell for its sound, the worker
+* // for its pictures. A `<video>` element does this internally and
+* // calls it one thing.
+* audio.load('clip.mp4', { autoplay: false });
+* Video({ src: 'clip.mp4', clock: audioClock(audio, 'clip.mp4') });
+* ```
+*
+* `source` is checked on every read, and that check is not
+* decoration: `AudioService` is one playback for the whole
+* application, so a screen that starts a podcast while this clip is
+* still mounted would otherwise drive the picture from the podcast's
+* position. A clock whose source is no longer loaded reports that it
+* is not running and holds the position it last had, which shows a
+* still frame rather than a clip that has jumped somewhere absurd.
+*/
+function audioClock(audio, source) {
+	let held = 0;
+	let listeners = /* @__PURE__ */ new Set();
+	let wasRunning = false;
+	let subscription = null;
+	const mine = () => audio.state.value.src === source;
+	const running = () => mine() && audio.state.value.status === "playing";
+	const announce = () => {
+		const now = running();
+		if (now === wasRunning) return;
+		wasRunning = now;
+		for (const listener of listeners) listener();
+	};
+	return {
+		positionSeconds() {
+			if (!mine()) return held;
+			held = audio.state.value.position;
+			return held;
+		},
+		get running() {
+			return running();
+		},
+		onChange(listener) {
+			listeners.add(listener);
+			subscription ??= audio.state.subscribe(() => announce());
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size > 0) return;
+				subscription?.unsubscribe();
+				subscription = null;
+				listeners = /* @__PURE__ */ new Set();
+			};
+		}
+	};
+}
+//#endregion
 //#region src/Presence.ts
 const DEFAULT_EXIT_TIMEOUT_MS = 2e3;
 function Presence(inputs, ctx) {
@@ -8518,6 +8973,9 @@ var RenderWorkerApp = class {
 			case "tick":
 				this.clock?.tick(message.time);
 				break;
+			case "fullscreenChanged":
+				runtime.setFullscreen(message.active);
+				return;
 			case "visibility":
 				runtime.setVisible(message.visible);
 				break;
@@ -8652,6 +9110,10 @@ var RenderWorkerApp = class {
 				type: "openUrl",
 				url: request.url
 			});
+			else if (request.type === "fullscreen") this.host.postMessage({
+				type: "fullscreen",
+				enter: request.enter
+			});
 			else if (request.type === "popup") this.host.postMessage({
 				type: "popup",
 				id: request.id,
@@ -8715,6 +9177,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, 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, ThemeTokenCell, UI_FRAME_PHASES, UI_ROLES, UI_SEMANTIC_STATES, UndoStack, WorkerApp, applyPatch, applyPatches, bind, bounds, buildPath, channel, classifyStorageError, computed, controlled, createApp, createChannelRegistry, createComponent, createShellHistory, debounced, defineChannel, derive, describeStream, diffProjection, each, 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, 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, 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, debounced, defineChannel, derive, describeStream, diffProjection, each, 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