gesso-devtools 0.1.0

package/dist/index.js

@@ -0,0 +1,3014 @@
+import { UI_FRAME_PHASES, applyPatch, formatAge, isChannelClientMessage, isChannelHostMessage, markInstant, markNow, measureSpan, performanceMarksEnabled, portHandle } from "gesso-framework";
+//#region src/codeFrame.ts
+/**
+* Cuts `context` lines either side of a position out of a source file.
+*
+* This is the part of an overlay that a stack trace cannot replace: a
+* file and a line number send a person to their editor, while the line
+* itself is often the whole answer — a `.length` on something that is
+* undefined reads as the bug the moment it is on screen.
+*
+* Tabs are expanded to two spaces so the caret column below the line
+* lands where the character does. Nothing else is transformed; the text
+* reaches the DOM as text, never as markup.
+*/
+function codeFrame(source, line, column, context = 2) {
+	const lines = source.split("\n");
+	if (line < 1 || line > lines.length) return null;
+	const first = Math.max(1, line - context);
+	const last = Math.min(lines.length, line + context);
+	const out = [];
+	for (let number = first; number <= last; number++) out.push({
+		number,
+		text: expandTabs(lines[number - 1]),
+		target: number === line
+	});
+	return {
+		lines: out,
+		column: expandedColumn(lines[line - 1], column)
+	};
+}
+const TAB_WIDTH = 2;
+function expandTabs(text) {
+	return text.replace(/\t/g, " ".repeat(TAB_WIDTH));
+}
+/** Where a column lands once the tabs before it have been expanded. */
+function expandedColumn(text, column) {
+	let expanded = 1;
+	for (let i = 0; i < Math.min(column - 1, text.length); i++) expanded += text[i] === "	" ? TAB_WIDTH : 1;
+	return expanded;
+}
+//#endregion
+//#region src/sourceMap.ts
+const BASE64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+/** Character code → 6-bit value, with -1 for anything not base64. */
+const BASE64_VALUE = (() => {
+	const table = (/* @__PURE__ */ new Int8Array(128)).fill(-1);
+	for (let i = 0; i < 64; i++) table[BASE64.charCodeAt(i)] = i;
+	return table;
+})();
+/**
+* Decodes the `mappings` string into one array of segments per
+* generated line.
+*
+* Segments carrying only a generated column — a run of output with no
+* original position, which is what a bundler emits for code it
+* synthesised — are dropped rather than kept with nulls. A lookup that
+* lands in one should fall back to the nearest earlier real mapping,
+* and dropping them is how that happens without a second case.
+*/
+function decodeMappings(mappings) {
+	const lines = [];
+	let line = [];
+	let sourceIndex = 0;
+	let sourceLine = 0;
+	let sourceColumn = 0;
+	let generatedColumn = 0;
+	const fields = [];
+	let index = 0;
+	while (index < mappings.length) {
+		const char = mappings[index];
+		if (char === ";") {
+			lines.push(line);
+			line = [];
+			generatedColumn = 0;
+			index++;
+			continue;
+		}
+		if (char === ",") {
+			index++;
+			continue;
+		}
+		fields.length = 0;
+		while (index < mappings.length && mappings[index] !== "," && mappings[index] !== ";") {
+			let value = 0;
+			let shift = 1;
+			let digit;
+			do {
+				const code = mappings.charCodeAt(index);
+				digit = code < 128 ? BASE64_VALUE[code] : -1;
+				if (digit < 0) return lines;
+				index++;
+				value += (digit & 31) * shift;
+				shift *= 32;
+			} while ((digit & 32) !== 0);
+			fields.push(value % 2 === 1 ? -Math.floor(value / 2) : Math.floor(value / 2));
+		}
+		generatedColumn += fields[0];
+		if (fields.length >= 4) {
+			sourceIndex += fields[1];
+			sourceLine += fields[2];
+			sourceColumn += fields[3];
+			line.push([
+				generatedColumn,
+				sourceIndex,
+				sourceLine,
+				sourceColumn
+			]);
+		}
+	}
+	lines.push(line);
+	return lines;
+}
+/**
+* A decoded map, answering "which line of which source is this?".
+*
+* Decoding is done once in the constructor because a page that shows
+* one error usually shows several from the same file, and each of them
+* asks about a handful of positions.
+*/
+var SourceMapConsumer = class {
+	lines;
+	sources;
+	contents;
+	constructor(map) {
+		this.lines = decodeMappings(map.mappings);
+		const root = map.sourceRoot ?? "";
+		this.sources = map.sources.map((source) => joinSourceRoot(root, source ?? "<unknown>"));
+		this.contents = map.sourcesContent ?? [];
+	}
+	/**
+	* Maps a generated position — 1-based line and column, as every
+	* engine writes them in a stack — back to an original one.
+	*
+	* Returns the last mapping at or before the column, which is the
+	* definition of a source map's coverage: a mapping holds until the
+	* next one starts. Null when the line has no mappings at all.
+	*/
+	lookup(line, column) {
+		const segments = this.lines[line - 1];
+		if (segments === void 0 || segments.length === 0) return null;
+		const target = column - 1;
+		let low = 0;
+		let high = segments.length - 1;
+		let found = -1;
+		while (low <= high) {
+			const middle = low + high >> 1;
+			if (segments[middle][0] <= target) {
+				found = middle;
+				low = middle + 1;
+			} else high = middle - 1;
+		}
+		const segment = segments[found === -1 ? 0 : found];
+		const source = this.sources[segment[1]];
+		if (source === void 0) return null;
+		return {
+			source,
+			line: segment[2] + 1,
+			column: segment[3] + 1,
+			content: this.contents[segment[1]] ?? null
+		};
+	}
+	/** The original text of a source, when the map inlined it. */
+	contentFor(source) {
+		const index = this.sources.indexOf(source);
+		if (index === -1) return null;
+		return this.contents[index] ?? null;
+	}
+};
+/**
+* The `sourceMappingURL` a script declares, or null.
+*
+* The last one wins, and the search is a `lastIndexOf` over the whole
+* text rather than a regex over the tail: an inlined map is a single
+* comment megabytes long, so "near the end" is not where its opening
+* is.
+*/
+function parseSourceMappingUrl(script) {
+	const start = script.lastIndexOf("//# sourceMappingURL=");
+	if (start === -1) return null;
+	const from = start + 21;
+	const end = script.indexOf("\n", from);
+	const url = (end === -1 ? script.slice(from) : script.slice(from, end)).trim();
+	return url === "" ? null : url;
+}
+/** Reads a `data:` URL's payload, base64 or percent-encoded. */
+function decodeDataUrl(url) {
+	const comma = url.indexOf(",");
+	if (comma === -1) return null;
+	const meta = url.slice(0, comma);
+	const payload = url.slice(comma + 1);
+	if (!meta.includes(";base64")) return decodeURIComponent(payload);
+	const binary = atob(payload);
+	const bytes = new Uint8Array(binary.length);
+	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+	return new TextDecoder().decode(bytes);
+}
+/** Applies `sourceRoot`, which is a prefix and not a URL join. */
+function joinSourceRoot(root, source) {
+	if (root === "" || /^[a-z]+:\/\//i.test(source)) return source;
+	return root.endsWith("/") ? `${root}${source}` : `${root}/${source}`;
+}
+/**
+* Fetches and caches the map for each script a stack mentions.
+*
+* Every method resolves rather than rejects: this runs while
+* something has already gone wrong, and an overlay that throws while
+* explaining a throw is worse than an overlay showing a raw stack.
+* A script with no map, a map that 404s and a map that is not JSON all
+* come back as null, and the caller shows what the engine gave it.
+*/
+var SourceMapStore = class {
+	cache = /* @__PURE__ */ new Map();
+	load;
+	constructor(load = defaultLoad) {
+		this.load = load;
+	}
+	/** The consumer for a script URL, fetched at most once per store. */
+	consumerFor(scriptUrl) {
+		const cached = this.cache.get(scriptUrl);
+		if (cached !== void 0) return cached;
+		const pending = this.resolve(scriptUrl).catch(() => null);
+		this.cache.set(scriptUrl, pending);
+		return pending;
+	}
+	/**
+	* Where a position in a script was written, following the chain of
+	* maps as far as it goes.
+	*
+	* One lookup is not enough, and the reason took a browser to find. A
+	* frame inside `gesso-framework` names Vite's optimised dependency
+	* bundle; that bundle's map points at the package's own
+	* `dist/index.js`, because the optimiser does not chain to the map
+	* the package ships; and it is the package's map that knows about
+	* `src/app/worker/RenderWorkerApp.ts`. Stopping after one step gave
+	* a frame in a bundled file with a five-figure line number, which is
+	* exactly the thing shipping the maps was meant to prevent.
+	*
+	* So each answer is resolved against the map that gave it and asked
+	* again, until a source has no map of its own — which is the source
+	* somebody wrote. `depth` is a guard against a map that names
+	* itself; four is more levels than any real toolchain stacks.
+	*/
+	async originalFor(scriptUrl, line, column, depth = 4) {
+		let url = scriptUrl;
+		let position = null;
+		for (let step = 0; step < depth; step++) {
+			const next = (await this.consumerFor(url))?.lookup(line, column) ?? null;
+			if (next === null) return position;
+			const resolved = absolute(next.source, url);
+			position = {
+				...next,
+				source: resolved
+			};
+			if (resolved === url) return position;
+			url = resolved;
+			line = next.line;
+			column = next.column;
+		}
+		return position;
+	}
+	async resolve(scriptUrl) {
+		const mapUrl = parseSourceMappingUrl(await this.load(scriptUrl));
+		if (mapUrl === null) return null;
+		const json = mapUrl.startsWith("data:") ? decodeDataUrl(mapUrl) : await this.load(new URL(mapUrl, scriptUrl).toString());
+		if (json === null) return null;
+		const map = JSON.parse(json);
+		if (typeof map.mappings !== "string" || !Array.isArray(map.sources)) return null;
+		return new SourceMapConsumer(map);
+	}
+};
+/**
+* A source name resolved against the script whose map named it.
+*
+* A map's `sources` are relative to the map, and the map is beside the
+* script often enough that the script is the right base. When it is
+* not a URL at all — a webpack `webpack://` name, an absolute path —
+* `new URL` throws and the name is kept as it was, which still reads
+* correctly and simply ends the chain.
+*/
+function absolute(source, base) {
+	try {
+		return new URL(source, base).toString();
+	} catch {
+		return source;
+	}
+}
+async function defaultLoad(url) {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+	return response.text();
+}
+//#endregion
+//#region src/stackTrace.ts
+/**
+* `at fn (url:line:col)`, `at url:line:col`, and the `fn@url:line:col`
+* that Firefox and Safari write.
+*
+* Three engines write three formats and there is no standard, so this
+* is deliberately loose: anything ending in `:digits:digits` is a
+* location, and whatever came before it is a name. A line that does
+* not match is kept as `raw` and shown unparsed rather than dropped —
+* a `[native code]` or `eval` frame is still evidence.
+*/
+const CHROME_FRAME = /^\s*at\s+(?:(?<fn>.*?)\s+\()?(?<url>.+?):(?<line>\d+):(?<column>\d+)\)?\s*$/;
+const MOZILLA_FRAME = /^(?<fn>[^@]*)@(?<url>.+?):(?<line>\d+):(?<column>\d+)\s*$/;
+/**
+* Splits a stack string into frames, dropping the message lines an
+* engine puts above them.
+*
+* The message is dropped rather than parsed because the caller already
+* has it: `onError` reports the message and the stack separately, and
+* a V8 stack repeats the message in its first line.
+*/
+function parseStack(stack) {
+	const frames = [];
+	for (const raw of stack.split("\n")) {
+		const line = raw.trimEnd();
+		if (line.trim() === "") continue;
+		const match = CHROME_FRAME.exec(line) ?? MOZILLA_FRAME.exec(line);
+		if (match?.groups === void 0) {
+			if (frames.length > 0) frames.push({
+				raw: line.trim(),
+				fn: null,
+				location: null,
+				original: null
+			});
+			continue;
+		}
+		const { fn, url, line: lineNumber, column } = match.groups;
+		const name = fn === void 0 ? "" : fn.trim();
+		frames.push({
+			raw: line.trim(),
+			fn: name === "" || name === "Object.<anonymous>" ? null : name,
+			location: {
+				url,
+				line: Number(lineNumber),
+				column: Number(column)
+			},
+			original: null
+		});
+	}
+	return frames;
+}
+/**
+* Fills in `original` for every frame whose script has a source map.
+*
+* Maps are fetched once per script and the frames of one stack usually
+* name two or three scripts, so this is a couple of requests. It never
+* rejects: a frame that cannot be mapped keeps its compiled location,
+* which is what the console would have shown anyway.
+*
+* `originalFor` rather than one `lookup`, because a frame inside a
+* published package is two maps deep: the bundler's map of the
+* dependency bundle, then the package's own. See its comment.
+*/
+async function mapStack(frames, store) {
+	return Promise.all(frames.map(async (frame) => {
+		if (frame.location === null) return frame;
+		const original = await store.originalFor(frame.location.url, frame.location.line, frame.location.column);
+		return original === null ? frame : {
+			...frame,
+			original
+		};
+	}));
+}
+/**
+* The first frame worth putting a code frame under.
+*
+* Frames inside the framework are skipped while any application frame
+* remains, because an error thrown from a component surfaces through
+* several layers of runtime and the runtime is almost never where the
+* bug is. If every frame is a framework frame, the first one wins —
+* the framework is then genuinely the answer.
+*/
+function primaryFrame(frames) {
+	const located = frames.filter((frame) => frame.location !== null);
+	if (located.length === 0) return null;
+	return located.find((frame) => {
+		const path = frame.original?.source ?? frame.location?.url ?? "";
+		return !/(^|\/)(node_modules|packages\/(core|framework|components))\//.test(path);
+	}) ?? located[0];
+}
+/**
+* A path short enough to read in a header: same-origin prefix and
+* query string removed, `node_modules` collapsed to the package.
+*
+* The query matters more than it looks. A dev server rewrites imports
+* with cache-busting parameters — `/src/App.tsx?t=1724965201` — and a
+* stack full of those is unreadable for a reason that has nothing to
+* do with the error.
+*/
+function shortenPath(url, origin) {
+	let path = url;
+	if (origin !== void 0 && path.startsWith(origin)) path = path.slice(origin.length);
+	const query = path.indexOf("?");
+	if (query !== -1) path = path.slice(0, query);
+	const modules = path.lastIndexOf("/node_modules/");
+	if (modules !== -1) path = path.slice(modules + 14);
+	return path.replace(/^\/@fs/, "").replace(/^\.\//, "");
+}
+/** `path:line:column` for a frame, mapped when it could be. */
+function formatFrame(frame, origin) {
+	if (frame.original !== null) return `${shortenPath(frame.original.source, origin)}:${frame.original.line}:${frame.original.column}`;
+	if (frame.location !== null) return `${shortenPath(frame.location.url, origin)}:${frame.location.line}:${frame.location.column}`;
+	return frame.raw;
+}
+//#endregion
+//#region src/ErrorOverlay.ts
+/** What each origin is called, and the sentence under the message. */
+const ORIGINS = {
+	uncaught: {
+		label: "render worker",
+		note: "Nothing caught this, so it ran outside any message from the shell: module scope, a callback the shell did not drive, or a frame the clock paced itself. If it was a frame, its work was already taken off the dirty set, so what you see may be stale."
+	},
+	message: {
+		label: "render worker",
+		note: "Thrown while the runtime was handling a message from the shell. A frame usually arrives that way, so this is most often a frame that did not finish, and what you see may be stale. Where it was an input or a resize instead, that one message was dropped."
+	},
+	renderer: {
+		label: "renderer",
+		note: "The backend refused to draw. Layout and state are unaffected; the surface is not being updated."
+	},
+	listener: {
+		label: "event listener",
+		note: "The dispatcher caught this, so the event still reached the rest of the tree and the application is running. What did not happen is whatever this handler was for."
+	},
+	channel: {
+		label: "channel",
+		note: "A channel’s worker or its patch stream threw. The view is intact; the data behind it has stopped arriving."
+	},
+	window: {
+		label: "main thread",
+		note: ""
+	}
+};
+/**
+* The error overlay: what a worker threw, drawn over the app that was
+* running when it threw.
+*
+* A canvas UI has no equivalent of a page that stops rendering. When a
+* render worker throws, the last good frame stays on screen — pixels
+* that look exactly like a working application — and the only witness
+* is a console message on a thread the developer has to know to
+* select. `WorkerApp` already forwards those errors to `onError`;
+* this is that callback, with the stack put back through the source
+* maps and the offending line quoted.
+*
+* It is a development tool and it makes a development tool's trade:
+* it fetches source maps, keeps every distinct error of the session,
+* and covers the application it is reporting on.
+*/
+var ErrorOverlay = class {
+	host;
+	/**
+	* The document the host belongs to, rather than the global one.
+	*
+	* The same rule `SemanticsMirror` follows: everything this class
+	* builds hangs off the element it was handed, so it works in a
+	* second window and can be driven by a fake document in a spec —
+	* which is the only way to test it in a suite that runs in Node.
+	*/
+	doc;
+	view;
+	container;
+	root;
+	panel;
+	maps;
+	echo;
+	entries = [];
+	restoreHostPosition;
+	shown = -1;
+	disposed = false;
+	detachWindow = null;
+	constructor(host, options = {}) {
+		this.host = host;
+		this.doc = host.ownerDocument;
+		this.view = this.doc.defaultView;
+		this.maps = options.sourceMaps ?? new SourceMapStore();
+		this.echo = options.echoToConsole !== false;
+		const position = this.view?.getComputedStyle(host).position ?? "static";
+		this.restoreHostPosition = position === "static" ? host.style.position : null;
+		if (position === "static") host.style.position = "relative";
+		this.container = this.doc.createElement("div");
+		this.container.style.display = "none";
+		this.root = this.container.attachShadow({ mode: "open" });
+		const style = this.doc.createElement("style");
+		style.textContent = STYLES$4;
+		this.panel = this.doc.createElement("div");
+		this.panel.className = "panel";
+		this.panel.tabIndex = -1;
+		this.panel.setAttribute("role", "alert");
+		const scrim = this.doc.createElement("div");
+		scrim.className = "scrim";
+		scrim.appendChild(this.panel);
+		this.root.append(style, scrim);
+		host.appendChild(this.container);
+	}
+	/** How many distinct errors have been reported. */
+	get count() {
+		return this.entries.length;
+	}
+	/** True while the overlay is covering the app. */
+	get visible() {
+		return this.container.style.display !== "none";
+	}
+	/**
+	* Reports an error, in the shape `WorkerApp`'s `onError` hands it
+	* over, so the whole wiring is `onError: overlay.report`.
+	*
+	* Bound as a field rather than a method for exactly that: it is
+	* passed as a callback far more often than it is called.
+	*/
+	report = (message, stack, origin = "window") => {
+		if (this.disposed) return;
+		if (this.echo) console.error(`[gesso: ${origin}] ${message}`, stack ?? "");
+		const existing = this.entries.find((entry) => entry.message === message && entry.stack === stack);
+		if (existing !== void 0) {
+			existing.repeats++;
+			if (this.visible && this.entries[this.shown] === existing) this.render();
+			return;
+		}
+		const entry = {
+			message,
+			stack,
+			origin,
+			repeats: 1,
+			frames: stack === void 0 ? [] : parseStack(stack),
+			mapped: false,
+			code: null
+		};
+		this.entries.push(entry);
+		this.shown = this.entries.length - 1;
+		this.show();
+		this.resolveSources(entry);
+	};
+	/** Reports a thrown value, which is usually but not always an Error. */
+	reportError = (error, origin = "window") => {
+		if (error instanceof Error) {
+			this.report(error.message, error.stack, origin);
+			return;
+		}
+		this.report(String(error), void 0, origin);
+	};
+	/**
+	* Catches what this thread throws, too.
+	*
+	* The single-thread configuration runs components here, and even in
+	* the worker configuration the shell around the app can throw. Returns
+	* a function that stops listening; `dispose` calls it as well.
+	*/
+	captureWindowErrors(target = this.view) {
+		if (target === null) return () => {};
+		const onError = (event) => {
+			this.reportError(event.error ?? event.message, "window");
+		};
+		const onRejection = (event) => {
+			this.reportError(event.reason, "window");
+		};
+		target.addEventListener("error", onError);
+		target.addEventListener("unhandledrejection", onRejection);
+		const detach = () => {
+			target.removeEventListener("error", onError);
+			target.removeEventListener("unhandledrejection", onRejection);
+			this.detachWindow = null;
+		};
+		this.detachWindow = detach;
+		return detach;
+	}
+	/** Hides the overlay. The errors are kept and can be shown again. */
+	hide() {
+		this.container.style.display = "none";
+		this.doc.removeEventListener("keydown", this.handleKeyDown, true);
+	}
+	/** Hides the overlay and forgets every error it was holding. */
+	clear() {
+		this.entries.length = 0;
+		this.shown = -1;
+		this.hide();
+	}
+	dispose() {
+		this.disposed = true;
+		this.detachWindow?.();
+		this.doc.removeEventListener("keydown", this.handleKeyDown, true);
+		this.container.remove();
+		if (this.restoreHostPosition !== null) this.host.style.position = this.restoreHostPosition;
+	}
+	show() {
+		this.container.style.display = "block";
+		this.render();
+		this.doc.addEventListener("keydown", this.handleKeyDown, true);
+		this.panel.focus();
+	}
+	handleKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.hide();
+		}
+	};
+	/**
+	* Maps the entry's stack and quotes the line it points at.
+	*
+	* Deliberately after the first paint: the raw stack is on screen
+	* within a frame of the error, and the mapped one replaces it when
+	* the network answers. A developer looking at an error should never
+	* be waiting on a fetch to see it.
+	*/
+	async resolveSources(entry) {
+		if (entry.frames.length === 0) return;
+		entry.frames = await mapStack(entry.frames, this.maps);
+		entry.mapped = true;
+		const frame = primaryFrame(entry.frames);
+		const content = frame?.original?.content ?? null;
+		if (frame?.original != null && content !== null) entry.code = codeFrame(content, frame.original.line, frame.original.column);
+		if (!this.disposed && this.visible && this.entries[this.shown] === entry) this.render();
+	}
+	/** `element`, bound to this overlay's document. */
+	el = (tag, options = {}) => element(this.doc, tag, options);
+	/** A header button, bound to this overlay's document. */
+	button = (label, title, onClick) => button(this.doc, label, title, onClick);
+	render() {
+		const entry = this.entries[this.shown];
+		if (entry === void 0) return;
+		const origin = ORIGINS[entry.origin];
+		this.panel.replaceChildren();
+		const header = this.el("header");
+		header.append(this.el("span", {
+			className: "badge",
+			text: origin.label
+		}));
+		if (entry.repeats > 1) header.append(this.el("span", {
+			className: "repeats",
+			text: `×${entry.repeats}`
+		}));
+		const spacer = this.el("span", { className: "spacer" });
+		header.append(spacer);
+		if (this.entries.length > 1) header.append(this.button("‹", "Previous error", () => this.step(-1)), this.el("span", {
+			className: "count",
+			text: `${this.shown + 1} / ${this.entries.length}`
+		}), this.button("›", "Next error", () => this.step(1)));
+		header.append(this.button("Copy", "Copy this error to the clipboard", () => this.copy(entry)), this.button("✕", "Dismiss", () => this.hide()));
+		this.panel.append(header, this.el("h1", { text: entry.message }));
+		if (origin.note !== "") this.panel.append(this.el("p", {
+			className: "note",
+			text: origin.note
+		}));
+		if (entry.code !== null) this.panel.append(renderCodeFrame(this.doc, entry.code));
+		if (entry.frames.length > 0) {
+			const list = this.el("ol", { className: "stack" });
+			for (const frame of entry.frames) {
+				const item = this.el("li");
+				if (frame.location === null) item.append(this.el("span", {
+					className: "raw",
+					text: frame.raw
+				}));
+				else item.append(this.el("span", {
+					className: "fn",
+					text: frame.fn ?? "(anonymous)"
+				}), this.el("span", {
+					className: "at",
+					text: formatFrame(frame, this.view?.location.origin)
+				}));
+				list.append(item);
+			}
+			this.panel.append(list);
+		} else if (entry.stack !== void 0) this.panel.append(this.el("pre", {
+			className: "stack raw",
+			text: entry.stack
+		}));
+		const footer = this.el("footer");
+		footer.append(this.el("span", { text: entry.mapped || entry.frames.length === 0 ? "Escape dismisses this." : "Resolving source maps…" }));
+		this.panel.append(footer);
+	}
+	step(delta) {
+		const next = this.shown + delta;
+		if (next < 0 || next >= this.entries.length) return;
+		this.shown = next;
+		this.render();
+		this.resolveSources(this.entries[next]);
+	}
+	copy(entry) {
+		const frames = entry.frames.map((frame) => frame.location === null ? frame.raw : `  at ${frame.fn ?? "(anonymous)"} (${formatFrame(frame)})`);
+		const text = [entry.message, ...frames].join("\n");
+		this.view?.navigator.clipboard?.writeText(text).catch(() => {});
+	}
+};
+/**
+* Mounts an error overlay over an application's host element.
+*
+*   const overlay = mountErrorOverlay(host);
+*   createApp({ renderWorker, onError: overlay.report });
+*   overlay.captureWindowErrors();
+*/
+function mountErrorOverlay(host, options = {}) {
+	return new ErrorOverlay(host, options);
+}
+function renderCodeFrame(doc, frame) {
+	const el = (tag, options = {}) => element(doc, tag, options);
+	const width = String(frame.lines[frame.lines.length - 1].number).length;
+	const block = el("pre", { className: "code" });
+	for (const line of frame.lines) {
+		const row = el("div", { className: line.target ? "line target" : "line" });
+		row.append(el("span", {
+			className: "gutter",
+			text: String(line.number).padStart(width, " ")
+		}), el("span", {
+			className: "text",
+			text: line.text
+		}));
+		block.append(row);
+		if (line.target) {
+			const caret = el("div", { className: "line caret" });
+			caret.append(el("span", {
+				className: "gutter",
+				text: " ".repeat(width)
+			}), el("span", {
+				className: "text",
+				text: `${" ".repeat(Math.max(0, frame.column - 1))}^`
+			}));
+			block.append(caret);
+		}
+	}
+	return block;
+}
+function element(doc, tag, options = {}) {
+	const node = doc.createElement(tag);
+	if (options.className !== void 0) node.className = options.className;
+	if (options.text !== void 0) node.textContent = options.text;
+	return node;
+}
+function button(doc, label, title, onClick) {
+	const node = element(doc, "button", { text: label });
+	node.type = "button";
+	node.title = title;
+	node.setAttribute("aria-label", title);
+	node.addEventListener("click", onClick);
+	return node;
+}
+/**
+* The overlay's own styles, inside its shadow root.
+*
+* Shadow rather than a stylesheet in the page: an overlay that
+* inherited the application's CSS would be unreadable in exactly the
+* applications whose CSS is broken, and one that leaked its own rules
+* would be a development tool changing the thing being developed.
+*
+* Dark and monospace whatever the page is, because this is a tool
+* rather than a part of the app, and it should never be mistaken for
+* one.
+*/
+const STYLES$4 = `
+:host { all: initial; }
+.scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  box-sizing: border-box;
+  background: rgba(12, 12, 16, 0.72);
+  backdrop-filter: blur(2px);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #e6e6ea;
+  overflow: auto;
+}
+.panel {
+  width: min(860px, 100%);
+  max-height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 16px 18px 12px;
+  border: 1px solid #7f1d1d;
+  border-radius: 8px;
+  background: #17171c;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
+  outline: none;
+}
+header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.spacer { flex: 1; }
+.badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #7f1d1d;
+  color: #fee2e2;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+}
+.repeats { color: #fca5a5; }
+.count { color: #9a9aa5; }
+button {
+  font: inherit;
+  color: #cfcfd6;
+  background: #24242c;
+  border: 1px solid #34343e;
+  border-radius: 5px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+button:hover { background: #2e2e38; color: #fff; }
+button:focus-visible { outline: 2px solid #f87171; outline-offset: 1px; }
+h1 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fca5a5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.note { margin: 0 0 12px; color: #9a9aa5; max-width: 68ch; }
+.code {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  background: #101015;
+  border: 1px solid #26262f;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.code .line { white-space: pre; }
+.code .gutter { color: #55555f; margin-right: 12px; user-select: none; }
+.code .target { background: rgba(127, 29, 29, 0.35); }
+.code .caret .text { color: #f87171; }
+ol.stack { margin: 0; padding: 0; list-style: none; }
+ol.stack li { display: flex; gap: 10px; padding: 1px 0; }
+ol.stack .fn { color: #d4d4dc; flex: 0 0 auto; }
+ol.stack .at { color: #8b8b96; word-break: break-all; }
+ol.stack .raw { color: #6f6f7a; }
+pre.stack { margin: 0; white-space: pre-wrap; color: #8b8b96; }
+footer { margin-top: 12px; color: #6f6f7a; }
+`;
+//#endregion
+//#region src/ActionLog.ts
+function createActionLog(options = {}) {
+	return new Recorder(options.limit ?? 200);
+}
+function now() {
+	return typeof performance === "undefined" ? Date.now() : performance.now();
+}
+/**
+* Sends each new entry as it is recorded, and returns a function that
+* stops.
+*
+* `subscribe` says only that something changed, so the sequence number
+* is what tells a new entry from the ones already sent; a `clear`
+* resets it, and a bounded log retiring old entries does not. Both
+* routes to a panel need exactly this: the hook, for a log in the
+* page, and the render worker tap, for one on the other side of a
+* thread.
+*/
+function forwardNewEntries(log, send) {
+	let lastSeq = -1;
+	const flush = () => {
+		const entries = log.entries;
+		if (entries.length === 0) {
+			lastSeq = -1;
+			return;
+		}
+		for (const entry of entries) if (entry.seq > lastSeq) {
+			lastSeq = entry.seq;
+			send(entry);
+		}
+	};
+	flush();
+	return log.subscribe(flush);
+}
+/**
+* One channel with the recorder in the middle of it.
+*
+* It holds two states rather than one. `live` follows every patch that
+* arrives, whether or not the view was allowed to see it, so going
+* live is a single set per key instead of a backlog to drain. `base`
+* is the state as of the oldest entry still on the timeline, which is
+* what keeps a bounded log able to reconstruct exactly.
+*/
+var TappedChannel = class {
+	name;
+	toProvider;
+	toReplica;
+	recorder;
+	base = /* @__PURE__ */ new Map();
+	live = /* @__PURE__ */ new Map();
+	open = true;
+	constructor(name, initial, toProvider, toReplica, recorder) {
+		this.name = name;
+		this.toProvider = toProvider;
+		this.toReplica = toReplica;
+		this.recorder = recorder;
+		for (const [key, value] of Object.entries(initial)) {
+			this.base.set(key, value);
+			this.live.set(key, value);
+		}
+	}
+	/** The replica's end: commands out, and the sync that starts it all. */
+	fromReplica(data) {
+		if (this.open && isChannelClientMessage(data) && data.type === "channel:command") {
+			markInstant(`command ${this.name}.${data.command}`, data.payload);
+			this.recorder.record({
+				kind: "command",
+				channel: this.name,
+				command: data.command,
+				payload: data.payload
+			});
+		}
+		this.toProvider(data);
+	}
+	/** The owning thread's end: patches and errors. */
+	fromProvider(data) {
+		if (this.open && isChannelHostMessage(data)) {
+			if (data.type === "channel:patch") {
+				for (const patch of data.patches) this.live.set(patch.projection, applyPatch(this.live.get(patch.projection), patch));
+				markInstant(`patch ${this.name}`, projectionsOf(data.patches));
+				this.recorder.record({
+					kind: "patch",
+					channel: this.name,
+					patches: data.patches,
+					keys: projectionsOf(data.patches)
+				});
+				if (this.recorder.pinnedTo !== null) return;
+			} else this.recorder.record({
+				kind: "error",
+				channel: this.name,
+				message: data.message
+			});
+		}
+		this.toReplica(data);
+	}
+	/** Folds a dropped entry's patches into the reconstruction base. */
+	absorb(patches) {
+		for (const patch of patches) this.base.set(patch.projection, applyPatch(this.base.get(patch.projection), patch));
+	}
+	/** Puts a whole state on the wire, exactly as a resync is answered. */
+	show(state) {
+		const patches = [];
+		for (const [projection, value] of state) patches.push({
+			op: "set",
+			projection,
+			path: [],
+			value
+		});
+		if (patches.length > 0) this.toReplica({
+			type: "channel:patch",
+			patches
+		});
+	}
+	close() {
+		this.open = false;
+	}
+};
+function projectionsOf(patches) {
+	const keys = [];
+	for (const patch of patches) if (!keys.includes(patch.projection)) keys.push(patch.projection);
+	return keys;
+}
+var Recorder = class {
+	limit;
+	tapped = [];
+	log = [];
+	listeners = /* @__PURE__ */ new Set();
+	seq = 0;
+	pinned = null;
+	/** The input being dispatched, if one is, and the label it was opened with. */
+	openLabel = null;
+	openCause = null;
+	causeId = 0;
+	/** Commands awaiting their patches, by channel. */
+	awaiting = /* @__PURE__ */ new Map();
+	/**
+	* The cause shared by everything recorded since the last frame
+	* entry: undefined when nothing has been, null when two causes have.
+	*/
+	frameCause = void 0;
+	recordedSinceFrame = false;
+	constructor(limit) {
+		this.limit = limit;
+	}
+	get entries() {
+		return this.log;
+	}
+	get channels() {
+		return this.tapped.map((channel) => channel.name);
+	}
+	get pinnedTo() {
+		return this.pinned;
+	}
+	tap(handle, tokens) {
+		const initials = new Map(tokens.map((token) => [token.name, token.initial]));
+		return {
+			open: (key) => {
+				const real = handle.open(key);
+				const relay = new MessageChannel();
+				const channel = new TappedChannel(key, initials.get(key) ?? {}, (message) => real.postMessage(message), (message) => relay.port2.postMessage(message), this);
+				real.onmessage = (event) => channel.fromProvider(event.data);
+				relay.port2.onmessage = (event) => channel.fromReplica(event.data);
+				this.tapped.push(channel);
+				return relay.port1;
+			},
+			get spawned() {
+				return handle.spawned;
+			},
+			terminate: () => {
+				handle.terminate();
+			}
+		};
+	}
+	tapPort(port, token) {
+		let listener = null;
+		const channel = new TappedChannel(token.name, token.initial, (message) => port.postMessage(message), (message) => listener?.({ data: message }), this);
+		port.onmessage = (event) => channel.fromProvider(event.data);
+		this.tapped.push(channel);
+		return {
+			postMessage(message) {
+				channel.fromReplica(message);
+			},
+			get onmessage() {
+				return listener;
+			},
+			set onmessage(next) {
+				listener = next;
+			}
+		};
+	}
+	cause(label) {
+		const previousLabel = this.openLabel;
+		const previousCause = this.openCause;
+		this.openLabel = label;
+		this.openCause = null;
+		let closed = false;
+		return () => {
+			if (closed) return;
+			closed = true;
+			this.openLabel = previousLabel;
+			this.openCause = previousCause;
+		};
+	}
+	frame(id) {
+		if (!this.recordedSinceFrame) return;
+		this.recordedSinceFrame = false;
+		const cause = this.frameCause ?? void 0;
+		this.frameCause = void 0;
+		for (const [channel, pending] of this.awaiting) if (pending.claimed) this.awaiting.delete(channel);
+		this.append({
+			kind: "frame",
+			frame: id,
+			...cause === void 0 ? {} : { cause }
+		});
+	}
+	record(entry) {
+		const cause = this.causeFor(entry);
+		this.append(cause === void 0 ? entry : {
+			...entry,
+			cause
+		});
+	}
+	/**
+	* Which cause an entry belongs to.
+	*
+	* A command belongs to the input being dispatched, which is known
+	* rather than guessed. A patch belongs to the command it answers,
+	* which is not: the barrier carries no request id, so what stands
+	* for one is "the last command on this channel that nothing has
+	* answered yet". It is right whenever a channel is answering one
+	* thing at a time, which is what a channel driven by a person does,
+	* and it is wrong for a channel that also emits on its own between
+	* the command and its answer. The panel says `via` rather than
+	* `from` for that reason.
+	*/
+	causeFor(entry) {
+		if (entry.kind === "command") {
+			if (this.openLabel === null) {
+				this.awaiting.delete(entry.channel);
+				return;
+			}
+			this.openCause ??= {
+				id: ++this.causeId,
+				label: this.openLabel
+			};
+			this.awaiting.set(entry.channel, {
+				cause: this.openCause,
+				claimed: false
+			});
+			return this.openCause;
+		}
+		const pending = this.awaiting.get(entry.channel);
+		const cause = this.openCause ?? pending?.cause;
+		if (cause !== void 0 && pending?.cause === cause) pending.claimed = true;
+		return cause;
+	}
+	append(entry) {
+		const complete = {
+			...entry,
+			seq: this.seq++,
+			at: now()
+		};
+		if (complete.kind !== "frame") {
+			this.recordedSinceFrame = true;
+			const cause = complete.cause;
+			if (cause !== void 0) this.frameCause = this.frameCause === void 0 || this.frameCause === cause ? cause : null;
+		}
+		this.log.push(complete);
+		while (this.log.length > this.limit) this.drop();
+		this.notify();
+	}
+	jumpTo(seq) {
+		this.pinned = seq;
+		for (const channel of this.tapped) channel.show(seq === null ? channel.live : this.stateAt(channel, seq));
+		this.notify();
+	}
+	clear() {
+		this.jumpTo(null);
+		while (this.log.length > 0) this.drop();
+		this.awaiting.clear();
+		this.frameCause = void 0;
+		this.recordedSinceFrame = false;
+		this.notify();
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
+	dispose() {
+		this.jumpTo(null);
+		for (const channel of this.tapped) channel.close();
+		this.tapped.length = 0;
+		this.log.length = 0;
+		this.pinned = null;
+		this.awaiting.clear();
+		this.openLabel = null;
+		this.openCause = null;
+		this.frameCause = void 0;
+		this.recordedSinceFrame = false;
+		this.listeners.clear();
+	}
+	/** Retires the oldest entry, leaving the reconstruction exact. */
+	drop() {
+		const dropped = this.log.shift();
+		if (dropped?.kind !== "patch") return;
+		for (const channel of this.tapped) if (channel.name === dropped.channel) channel.absorb(dropped.patches);
+	}
+	stateAt(channel, seq) {
+		const state = new Map(channel.base);
+		for (const entry of this.log) {
+			if (entry.seq > seq) break;
+			if (entry.kind !== "patch" || entry.channel !== channel.name) continue;
+			for (const patch of entry.patches) state.set(patch.projection, applyPatch(state.get(patch.projection), patch));
+		}
+		return state;
+	}
+	notify() {
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
+//#region src/ActionLogPanel.ts
+/** Longest a payload or a value is printed before it is cut. */
+const VALUE_CHARS = 60;
+function mountActionLogPanel(host, log, options = {}) {
+	const doc = host.ownerDocument;
+	const view = doc.defaultView;
+	const position = view?.getComputedStyle(host).position ?? "static";
+	const restore = position === "static" ? host.style.position : null;
+	if (position === "static") host.style.position = "relative";
+	const container = doc.createElement("div");
+	const root = container.attachShadow({ mode: "open" });
+	const style = doc.createElement("style");
+	style.textContent = STYLES$3;
+	const panel = doc.createElement("div");
+	panel.className = `panel ${options.corner ?? "bottom-right"}`;
+	panel.hidden = true;
+	const header = doc.createElement("header");
+	const title = doc.createElement("span");
+	title.className = "title";
+	title.textContent = "actions";
+	const state = doc.createElement("span");
+	state.className = "state";
+	const live = doc.createElement("button");
+	live.type = "button";
+	live.textContent = "Live";
+	live.addEventListener("click", () => log.jumpTo(null));
+	const clear = doc.createElement("button");
+	clear.type = "button";
+	clear.textContent = "Clear";
+	clear.addEventListener("click", () => log.clear());
+	header.append(title, state, live, clear);
+	const list = doc.createElement("ol");
+	list.className = "entries";
+	const note = doc.createElement("p");
+	note.className = "note";
+	panel.append(header, list, note);
+	root.append(style, panel);
+	host.appendChild(container);
+	let visible = false;
+	let scheduled = 0;
+	const render = () => {
+		const entries = log.entries;
+		const pinned = log.pinnedTo;
+		const following = list.scrollHeight - list.scrollTop - list.clientHeight < 4;
+		state.textContent = pinned === null ? "live" : `step ${pinned}`;
+		state.className = pinned === null ? "state" : "state pinned";
+		live.disabled = pinned === null;
+		list.textContent = "";
+		const origin = entries[0]?.at ?? 0;
+		for (const entry of entries) list.append(row(doc, entry, origin, pinned, (seq) => log.jumpTo(seq)));
+		if (entries.length === 0) note.textContent = "Nothing has crossed a tapped channel yet.";
+		else if (pinned === null) note.textContent = "Click a step to put the view back to what it showed then.";
+		else note.textContent = "The view is showing an earlier step. The application worker is not rewound: it is still running, its patches are being recorded and held, and Live catches the view up to it.";
+		if (following) list.scrollTop = list.scrollHeight;
+	};
+	const schedule = () => {
+		if (!visible || scheduled !== 0) return;
+		const draw = () => {
+			scheduled = 0;
+			render();
+		};
+		scheduled = view === null ? setTimeout(draw, 16) : view.requestAnimationFrame(draw);
+	};
+	const unsubscribe = log.subscribe(schedule);
+	return {
+		setVisible(next) {
+			visible = next;
+			panel.hidden = !next;
+			if (next) render();
+		},
+		get visible() {
+			return visible;
+		},
+		dispose() {
+			unsubscribe();
+			container.remove();
+			if (restore !== null) host.style.position = restore;
+		}
+	};
+}
+/**
+* One step.
+*
+* The direction glyph is the first thing on the line because it is the
+* first thing anyone wants: `↑` is a command the view sent, `↓` is
+* what came back. A log that printed both the same way would need to
+* be read to be understood, and this one is meant to be skimmed.
+*/
+function row(doc, entry, origin, pinned, jump) {
+	const item = doc.createElement("li");
+	item.className = `entry ${entry.kind}${entry.seq === pinned ? " at" : ""}`;
+	item.tabIndex = 0;
+	item.setAttribute("role", "button");
+	const time = doc.createElement("span");
+	time.className = "time";
+	time.textContent = formatOffset(entry.at - origin);
+	const arrow = doc.createElement("span");
+	arrow.className = "arrow";
+	arrow.textContent = actionGlyph(entry);
+	const text = doc.createElement("span");
+	text.className = "text";
+	text.textContent = describeActionEntry(entry);
+	item.append(time, arrow, text);
+	if (entry.cause !== void 0) {
+		const cause = doc.createElement("span");
+		cause.className = "cause";
+		cause.textContent = `#${entry.cause.id}`;
+		cause.title = entry.cause.label;
+		item.append(cause);
+	}
+	const activate = () => jump(entry.seq);
+	item.addEventListener("click", activate);
+	item.addEventListener("keydown", (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			activate();
+		}
+	});
+	return item;
+}
+/**
+* The direction, as one glyph: up for what the view sent, down for
+* what came back, a square for the frame that drew it.
+*/
+function actionGlyph(entry) {
+	switch (entry.kind) {
+		case "command": return "↑";
+		case "patch": return "↓";
+		case "frame": return "▣";
+		case "error": return "!";
+	}
+}
+/** One entry as a line: the command and its payload, the patched keys, the frame, or the error. */
+function describeActionEntry(entry) {
+	switch (entry.kind) {
+		case "command": return `${entry.channel}.${entry.command}(${entry.payload === void 0 ? "" : print(entry.payload)})`;
+		case "patch": return `${entry.channel} ${entry.keys.join(", ")}`;
+		case "frame": return `frame ${entry.frame}`;
+		case "error": return `${entry.channel} ${entry.message}`;
+	}
+}
+function print(value) {
+	let text;
+	try {
+		text = JSON.stringify(value) ?? String(value);
+	} catch {
+		text = String(value);
+	}
+	return text.length > VALUE_CHARS ? `${text.slice(0, 59)}…` : text;
+}
+function formatOffset(ms) {
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	return `${(ms / 1e3).toFixed(1)}s`;
+}
+const STYLES$3 = `
+:host { all: initial; }
+.panel {
+  position: absolute;
+  z-index: 2147482000;
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  max-height: 60%;
+  margin: 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(13, 17, 23, 0.94);
+  color: #e6edf3;
+  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.panel[hidden] { display: none; }
+.top-left { top: 0; left: 0; }
+.top-right { top: 0; right: 0; }
+.bottom-left { bottom: 0; left: 0; }
+.bottom-right { bottom: 0; right: 0; }
+header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.title {
+  flex: 1;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #8b949e;
+}
+.state { color: #56d364; }
+.state.pinned { color: #e3b341; }
+button {
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: #21262d;
+  color: #e6edf3;
+  font: inherit;
+}
+button:hover:not(:disabled) { background: #30363d; color: #fff; }
+button:disabled { cursor: default; opacity: 0.45; }
+.entries {
+  flex: 1;
+  overflow: auto;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+}
+.entry {
+  display: flex;
+  gap: 6px;
+  padding: 1px 10px;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.entry:hover { background: rgba(110, 118, 129, 0.25); }
+.entry:focus-visible { outline: 1px solid #79c0ff; outline-offset: -1px; }
+.entry.at { background: rgba(227, 179, 65, 0.22); }
+.time { width: 44px; flex: none; text-align: right; color: #6e7681; }
+.arrow { width: 8px; flex: none; }
+.command .arrow { color: #d2a8ff; }
+.patch .arrow { color: #79c0ff; }
+.frame .arrow { color: #7ee787; }
+.frame .text { color: #8b949e; }
+.error .arrow { color: #ff7b72; }
+.error .text { color: #ff7b72; }
+.text { flex: 1; }
+.cause { flex: none; color: #ffa657; }
+.note {
+  margin: 0;
+  padding: 6px 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: #8b949e;
+}
+`;
+//#endregion
+//#region src/RenderWorkerTap.ts
+function tapRenderWorker(log, options = {}) {
+	const host = options.host ?? globalThis;
+	const previousOnMessage = host.onmessage;
+	const originalPostMessage = host.postMessage;
+	const previousPostMessage = originalPostMessage.bind(host);
+	let application;
+	let disposed = false;
+	host.onmessage = (event) => {
+		const message = event.data;
+		if (message?.type === "init" && message.appPort !== void 0) application = portHandle(message.appPort);
+		const label = inputLabel(message);
+		if (label === null) {
+			previousOnMessage?.(event);
+			return;
+		}
+		const close = log.cause(label);
+		const measuring = performanceMarksEnabled();
+		const started = measuring ? markNow() : 0;
+		try {
+			previousOnMessage?.(event);
+		} finally {
+			close();
+			if (measuring) measureSpan(`input ${label}`, started, markNow());
+		}
+	};
+	host.postMessage = (message, transfer) => {
+		if (message?.type === "frame" && typeof message.frame === "number") log.frame(message.frame);
+		if (transfer === void 0) {
+			previousPostMessage(message);
+			return;
+		}
+		previousPostMessage(message, transfer);
+	};
+	const stopForwarding = options.forward === false ? () => {} : forwardNewEntries(log, (entry) => {
+		previousPostMessage({
+			type: "devtools",
+			event: {
+				kind: "action",
+				entry
+			}
+		});
+	});
+	return {
+		applicationWorker(tokens) {
+			return {
+				open(key) {
+					if (application === void 0) throw new Error(`Channel '${key}' was opened before the shell sent its application worker port. tapRenderWorker must be called before renderRoot handles \`init\`, and the shell must have been given an appLogicWorker.`);
+					const real = application.open(key);
+					const token = tokens.find((candidate) => candidate.name === key);
+					if (token === void 0) return real;
+					return log.tapPort(real, token);
+				},
+				get spawned() {
+					return application !== void 0;
+				},
+				terminate() {}
+			};
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			stopForwarding();
+			host.onmessage = previousOnMessage;
+			host.postMessage = originalPostMessage;
+		}
+	};
+}
+/**
+* What to call the cause an input starts, or null for a message that
+* is not an input.
+*
+* Position is in the label because two presses in different places are
+* two different causes to the person who made them, and the ids alone
+* do not say which was which.
+*/
+function inputLabel(message) {
+	switch (message?.type) {
+		case "pointerDown":
+		case "pointerUp":
+		case "pointerMove": return `${message.type} (${Math.round(message.x)}, ${Math.round(message.y)})`;
+		case "pointerCancel": return "pointerCancel";
+		case "wheel": return `wheel (${Math.round(message.deltaX)}, ${Math.round(message.deltaY)})`;
+		case "keyDown": return `keyDown ${message.key}`;
+		case "keyUp": return `keyUp ${message.key}`;
+		case "beforeInput": return `beforeInput ${message.inputType}`;
+		case "paste": return "paste";
+		case "semanticsAction": return `semantics ${message.action.action}`;
+		default: return null;
+	}
+}
+//#endregion
+//#region src/NodePicker.ts
+/** The events a pick has to swallow for the application not to see it. */
+const SWALLOWED = [
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"mouseup",
+	"click"
+];
+function createNodePicker(options) {
+	let listener = null;
+	let armed = false;
+	let attached = false;
+	const swallow = (event) => {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		if (event.type !== "pointerup") return;
+		const id = options.hovered();
+		if (id !== null) listener?.(id);
+	};
+	const attach = () => {
+		if (attached) return;
+		attached = true;
+		for (const type of SWALLOWED) options.host.addEventListener(type, swallow, true);
+	};
+	const detach = () => {
+		if (!attached) return;
+		attached = false;
+		for (const type of SWALLOWED) options.host.removeEventListener(type, swallow, true);
+	};
+	return {
+		setEnabled(enabled) {
+			armed = enabled;
+			if (enabled) attach();
+			else detach();
+		},
+		get enabled() {
+			return armed;
+		},
+		onPick(next) {
+			listener = next;
+		},
+		dispose() {
+			detach();
+			listener = null;
+			armed = false;
+		}
+	};
+}
+//#endregion
+//#region src/NodeReportView.ts
+/**
+* A `UiNodeReport` as DOM: the node inspector's body, shared with the
+* devtools panel so a node read in a corner of the canvas and a node
+* picked from a tree are described in the same words.
+*/
+function renderNodeReport(doc, report, options = {}) {
+	const out = [heading(doc, `${report.type} ${report.id}`), line(doc, "box", `${round(report.box.width)} × ${round(report.box.height)} at (${round(report.box.x)}, ${round(report.box.y)})`)];
+	if (report.owners.length > 0) out.push(line(doc, "rendered by", report.owners.map((owner) => owner.name).join(" inside ")));
+	if (report.modifiers.length > 0) out.push(line(doc, "modifiers", report.modifiers.join(", ")));
+	if (report.listens.length > 0) out.push(line(doc, "listens", report.listens.join(", ")));
+	if (report.beneath.length > 0) out.push(line(doc, "beneath", report.beneath.map((under) => {
+		const owner = under.owner === void 0 ? "" : ` (${under.owner})`;
+		const listens = under.listens.length === 0 ? "" : ` · ${under.listens.join(", ")}`;
+		return `${under.type}${owner}${listens}`;
+	}).join("; ")));
+	if (report.semantics !== void 0) {
+		const parts = [
+			report.semantics.role,
+			report.semantics.label === void 0 ? void 0 : `"${report.semantics.label}"`,
+			report.semantics.value,
+			report.semantics.states?.join(", ")
+		].filter((part) => part !== void 0 && part !== "");
+		if (parts.length > 0) out.push(line(doc, "semantics", parts.join(" · ")));
+	}
+	if (report.props.length > 0) out.push(section(doc, "props"), propList(doc, report.props, options));
+	if (report.environment.length > 0) {
+		const list = doc.createElement("dl");
+		list.className = "rows";
+		for (const entry of report.environment) {
+			const term = doc.createElement("dt");
+			term.textContent = entry.key;
+			term.className = entry.provided ? "provided" : "";
+			const value = doc.createElement("dd");
+			value.textContent = entry.value;
+			if (entry.provided) value.append(note(doc, "provided here"));
+			list.append(term, value);
+		}
+		out.push(section(doc, "environment"), list);
+	}
+	const explanation = doc.createElement("pre");
+	explanation.className = "explanation";
+	explanation.textContent = report.explanation;
+	out.push(section(doc, "layout"), explanation);
+	return out;
+}
+function heading(doc, text) {
+	const element = doc.createElement("h1");
+	element.textContent = text;
+	return element;
+}
+function section(doc, text) {
+	const element = doc.createElement("h2");
+	element.textContent = text;
+	return element;
+}
+function line(doc, label, value) {
+	const element = doc.createElement("p");
+	const name = doc.createElement("span");
+	name.className = "label";
+	name.textContent = `${label} `;
+	element.append(name, doc.createTextNode(value));
+	return element;
+}
+function note(doc, text) {
+	const element = doc.createElement("span");
+	element.className = "note";
+	element.textContent = ` ${text}`;
+	return element;
+}
+/**
+* The props, with the ones a modifier or a binding is driving marked.
+*
+* The mark is the point of the list. A declared value and a value a
+* modifier wrote over it look identical on the node, and the second is
+* the one that surprises people: B1's cascade is invisible until
+* something says which of the two is on screen.
+*/
+function propList(doc, props, options) {
+	const list = doc.createElement("dl");
+	list.className = "rows";
+	for (const prop of props) {
+		const term = doc.createElement("dt");
+		term.textContent = prop.name;
+		term.className = prop.origin;
+		const value = doc.createElement("dd");
+		value.textContent = prop.value;
+		if (prop.source !== void 0) value.append(note(doc, prop.source));
+		if (prop.stream !== void 0) {
+			const stream = doc.createElement("span");
+			stream.className = "stream";
+			const emittedAt = prop.stream.emittedAt;
+			const age = emittedAt === null ? "no value yet" : `${formatAge(Math.max(0, Date.now() - emittedAt))} ago`;
+			stream.textContent = `${`${prop.stream.emissions}×`} · ${age}${prop.stream.connected ? "" : " · disconnected"}`;
+			stream.title = `${prop.stream.source} last emitted ${prop.stream.value}`;
+			value.append(stream);
+		}
+		if (options.onEditProp !== void 0) makeEditable(doc, value, prop, options.onEditProp);
+		list.append(term, value);
+	}
+	return list;
+}
+/**
+* Turns a prop's value into a field on a click, and writes it back on
+* Enter.
+*
+* Typed rather than stepped, because the values are of every kind a
+* property can hold and a spinner would only serve the numbers. The
+* text is read as JSON when it parses and as a plain string when it
+* does not, so `12`, `"#ff0000"`, `#ff0000` and `[8, 4]` all mean what
+* they look like. Empty removes the property.
+*
+* Escape and blur both cancel: this writes into a running application,
+* and a value committed by looking away is not what anyone meant.
+*/
+function makeEditable(doc, cell, prop, commit) {
+	cell.classList.add("editable");
+	cell.title = "Click to edit";
+	cell.addEventListener("click", () => {
+		if (cell.querySelector("input") !== null) return;
+		const field = doc.createElement("input");
+		field.type = "text";
+		field.className = "edit";
+		field.value = prop.value;
+		cell.textContent = "";
+		cell.append(field);
+		field.focus();
+		field.select();
+		const cancel = () => {
+			cell.textContent = prop.value;
+		};
+		field.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				cancel();
+				return;
+			}
+			if (event.key !== "Enter") return;
+			const text = field.value.trim();
+			commit(prop.name, text === "" ? null : parseValue(text));
+		});
+		field.addEventListener("blur", cancel);
+	});
+}
+/** JSON where it parses, the text itself where it does not. */
+function parseValue(text) {
+	try {
+		return JSON.parse(text);
+	} catch {
+		return text;
+	}
+}
+function round(value) {
+	return Number.isInteger(value) ? String(value) : value.toFixed(2);
+}
+/**
+* The rules the report's elements use, for any stylesheet that shows one.
+*
+* Colours are the devtools panel's custom properties with the dark
+* palette as fallback, so the corner inspector, which defines none of
+* them, is unchanged, and the panel recolours the same report by
+* defining them.
+*/
+const NODE_REPORT_STYLES = `
+h1 { margin: 0 0 6px; font-size: 12px; color: var(--gd-accent, #79c0ff); overflow-wrap: anywhere; }
+h2 {
+  margin: 10px 0 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--gd-muted, #8b949e);
+}
+p { margin: 0 0 2px; }
+.label { color: var(--gd-muted, #8b949e); }
+.rows { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin: 0; }
+dt { color: var(--gd-muted, #8b949e); overflow-wrap: anywhere; }
+dt.modifier { color: var(--gd-purple, #d2a8ff); }
+dt.binding { color: var(--gd-green, #7ee787); }
+dt.provided { color: var(--gd-orange, #ffa657); }
+dd { margin: 0; overflow-wrap: anywhere; }
+dd.editable { cursor: pointer; border-radius: 3px; }
+dd.editable:hover { background: var(--gd-bg-hover, #21262d); }
+.edit {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--gd-accent, #79c0ff);
+  border-radius: 3px;
+  padding: 0 3px;
+  background: var(--gd-bg, #0d1117);
+  color: var(--gd-text, #e6edf3);
+  font: inherit;
+}
+.note { color: var(--gd-faint, #6e7681); }
+.stream { display: block; color: var(--gd-green, #7ee787); }
+.explanation { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--gd-text-strong, #c9d1d9); }
+`;
+//#endregion
+//#region src/PanelProtocol.ts
+/**
+* Two ports joined in memory, delivering synchronously.
+*
+* For a panel mounted in the page it inspects, and for specs: the
+* hook and the panel are exercised end to end with nothing between
+* them but a function call.
+*/
+function createDirectPorts() {
+	const toPanel = /* @__PURE__ */ new Set();
+	const toPage = /* @__PURE__ */ new Set();
+	let open = true;
+	return {
+		page: {
+			post(message) {
+				if (open) for (const listener of Array.from(toPanel)) listener(message);
+			},
+			onMessage(listener) {
+				toPage.add(listener);
+				return () => toPage.delete(listener);
+			},
+			close() {
+				open = false;
+				toPage.clear();
+			}
+		},
+		panel: {
+			post(message) {
+				if (open) for (const listener of Array.from(toPage)) listener(message);
+			},
+			onMessage(listener) {
+				toPanel.add(listener);
+				return () => toPanel.delete(listener);
+			},
+			close() {
+				open = false;
+				toPanel.clear();
+			}
+		}
+	};
+}
+const ENVELOPE_SOURCE = "gesso-devtools";
+function isEnvelope(value, to) {
+	const envelope = value;
+	return typeof envelope === "object" && envelope !== null && envelope.source === "gesso-devtools" && envelope.to === to && "message" in envelope;
+}
+/**
+* The page's end of a conversation over its own window.
+*
+* A content script shares the page's window but not its JavaScript, so
+* `window.postMessage` to the page's own origin is the one channel
+* they have. Messages are posted to that origin rather than to `*`,
+* and the page hears only envelopes addressed to it, so its own posts
+* come straight back through the same listener and are dropped.
+*/
+function windowPagePort(win) {
+	return windowPort(win, "page", "panel");
+}
+/** The other end, for whatever sits in the page beside it (an extension's content script). */
+function windowPanelPort(win) {
+	return windowPort(win, "panel", "page");
+}
+function windowPort(win, me, them) {
+	const listeners = /* @__PURE__ */ new Set();
+	const origin = win.location?.origin;
+	const target = origin === void 0 || origin === "null" || origin === "" ? "*" : origin;
+	const handle = (event) => {
+		if (!isEnvelope(event.data, me)) return;
+		const message = event.data.message;
+		for (const listener of Array.from(listeners)) listener(message);
+	};
+	win.addEventListener("message", handle);
+	let open = true;
+	return {
+		post(message) {
+			if (open) {
+				const envelope = {
+					source: ENVELOPE_SOURCE,
+					to: them,
+					message
+				};
+				win.postMessage(envelope, target);
+			}
+		},
+		onMessage(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		close() {
+			open = false;
+			listeners.clear();
+			win.removeEventListener("message", handle);
+		}
+	};
+}
+//#endregion
+//#region src/DevtoolsHook.ts
+/** The property the hook is kept under. */
+const HOOK_PROPERTY = "__GESSO_DEVTOOLS__";
+/**
+* The page's hook, created on first use.
+*
+* With a window, the hook is stored on it and the `postMessage`
+* transport is attached once; without one (`null`), a fresh hook with
+* no transport, for specs and for a panel in the same page.
+*/
+function getDevtoolsHook(win = defaultWindow()) {
+	if (win === null) return createHook();
+	const existing = win[HOOK_PROPERTY];
+	if (existing !== void 0) return existing;
+	const hook = createHook();
+	win[HOOK_PROPERTY] = hook;
+	hook.attach(windowPagePort(win));
+	return hook;
+}
+/**
+* Connects an application to the page's devtools hook, so a panel can
+* find it. Returns a function that disconnects it; call it when the
+* application is disposed.
+*/
+function connectDevtools(app, options = {}) {
+	const { window: win, ...rest } = options;
+	return getDevtoolsHook(win).register(app, rest);
+}
+function createHook() {
+	const registered = /* @__PURE__ */ new Map();
+	const ports = /* @__PURE__ */ new Set();
+	let nextId = 1;
+	const infos = () => [...registered.values()].map((entry) => entry.info);
+	const broadcast = (message) => {
+		for (const port of Array.from(ports)) port.post(message);
+	};
+	const handle = (message, from) => {
+		if (message.type === "hello") {
+			from.post({
+				type: "apps",
+				apps: infos()
+			});
+			return;
+		}
+		if (message.type === "pick") {
+			registered.get(message.app)?.picker?.setEnabled(message.enabled);
+			return;
+		}
+		registered.get(message.app)?.app.devtools(message.request);
+	};
+	return {
+		get apps() {
+			return infos();
+		},
+		register(app, options = {}) {
+			const id = `app-${nextId++}`;
+			const info = {
+				id,
+				name: options.name ?? defaultName()
+			};
+			app.onDevtools((event) => broadcast({
+				type: "event",
+				app: id,
+				event
+			}));
+			const stopActions = forwardActions(options.actions, (entry) => broadcast({
+				type: "action",
+				app: id,
+				entry
+			}));
+			const picker = options.picker;
+			picker?.onPick((picked) => broadcast({
+				type: "picked",
+				app: id,
+				id: picked
+			}));
+			const release = () => {
+				app.onDevtools(null);
+				stopActions();
+				picker?.onPick(null);
+				picker?.setEnabled(false);
+			};
+			registered.set(id, {
+				info,
+				app,
+				picker,
+				release
+			});
+			broadcast({
+				type: "apps",
+				apps: infos()
+			});
+			return () => {
+				const entry = registered.get(id);
+				if (entry === void 0) return;
+				registered.delete(id);
+				entry.release();
+				broadcast({
+					type: "apps",
+					apps: infos()
+				});
+			};
+		},
+		attach(port) {
+			ports.add(port);
+			const stop = port.onMessage((message) => handle(message, port));
+			return () => {
+				stop();
+				ports.delete(port);
+			};
+		}
+	};
+}
+/** Sends each new action log entry as it is recorded, when there is a log to read. */
+function forwardActions(log, send) {
+	return log === void 0 ? () => {} : forwardNewEntries(log, send);
+}
+function defaultWindow() {
+	return typeof window === "undefined" ? null : window;
+}
+function defaultName() {
+	if (typeof document !== "undefined" && document.title !== "") return document.title;
+	return "app";
+}
+//#endregion
+//#region src/FrameProfiler.ts
+/**
+* A colour per phase.
+*
+* Ordered as the phases run, and deliberately not a gradient: the
+* question a strip answers is "which phase is that", so the bands have
+* to be told apart at four pixels wide.
+*/
+const PHASE_COLORS = {
+	ticks: "#d2a8ff",
+	patches: "#79c0ff",
+	environment: "#56d364",
+	virtualize: "#e3b341",
+	layout: "#f0883e",
+	semantics: "#ff7b72",
+	render: "#a5d6ff"
+};
+/** Above this, a frame missed a 60 Hz deadline. */
+const BUDGET_MS = 16.7;
+function mountFrameProfiler(host, options = {}) {
+	const doc = host.ownerDocument;
+	const view = doc.defaultView;
+	const capacity = options.history ?? 180;
+	const redrawMs = options.redrawMs ?? 250;
+	const docked = options.layout === "docked";
+	const position = docked ? "relative" : view?.getComputedStyle(host).position ?? "static";
+	const restore = position === "static" ? host.style.position : null;
+	if (position === "static") host.style.position = "relative";
+	const container = doc.createElement("div");
+	const root = container.attachShadow({ mode: "open" });
+	const style = doc.createElement("style");
+	style.textContent = STYLES$2;
+	const panel = doc.createElement("div");
+	panel.className = docked ? "panel docked" : `panel ${options.corner ?? "top-right"}`;
+	panel.hidden = true;
+	const readout = doc.createElement("div");
+	readout.className = "readout";
+	const strip = doc.createElement("canvas");
+	strip.className = "strip";
+	strip.width = capacity * 2;
+	strip.height = 96;
+	const legend = doc.createElement("div");
+	legend.className = "legend";
+	panel.append(readout, strip, legend);
+	root.append(style, panel);
+	host.appendChild(container);
+	const samples = [];
+	let previousAt = null;
+	let visible = false;
+	let timer = null;
+	const draw = () => {
+		const ctx = strip.getContext("2d");
+		if (ctx === null || samples.length === 0) return;
+		const width = strip.width;
+		const height = strip.height;
+		ctx.clearRect(0, 0, width, height);
+		const peak = Math.max(BUDGET_MS, ...samples.map((sample) => sample.total));
+		const barWidth = width / capacity;
+		samples.forEach((sample, index) => {
+			const x = index * barWidth;
+			let y = height;
+			for (const phase of UI_FRAME_PHASES) {
+				const ms = sample.phases[phase];
+				if (ms <= 0) continue;
+				const bar = ms / peak * height;
+				ctx.fillStyle = PHASE_COLORS[phase];
+				ctx.fillRect(x, y - bar, Math.max(1, barWidth - .5), bar);
+				y -= bar;
+			}
+		});
+		const budgetY = height - BUDGET_MS / peak * height;
+		ctx.strokeStyle = view?.getComputedStyle(panel).getPropertyValue("--gd-budget").trim() || "rgba(255, 255, 255, 0.35)";
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(0, budgetY + .5);
+		ctx.lineTo(width, budgetY + .5);
+		ctx.stroke();
+		const totals = summarize(samples);
+		readout.textContent = "";
+		readout.append(stat(doc, "fps", totals.fps.toFixed(0)), stat(doc, "frame", `${totals.meanTotal.toFixed(2)} ms`), stat(doc, "worst", `${totals.worstTotal.toFixed(1)} ms`), stat(doc, "gap", `${totals.worstGap.toFixed(0)} ms`), stat(doc, "input", totals.worstInput === null ? "—" : `${totals.worstInput.toFixed(0)} ms`), stat(doc, "peak", `${peak.toFixed(1)} ms`));
+		legend.textContent = "";
+		for (const phase of UI_FRAME_PHASES) {
+			const worst = totals.worstPhase[phase];
+			if (worst <= 0) continue;
+			const entry = doc.createElement("span");
+			entry.className = "entry";
+			const swatch = doc.createElement("i");
+			swatch.style.background = PHASE_COLORS[phase];
+			entry.append(swatch, doc.createTextNode(`${phase} ${worst.toFixed(2)}`));
+			legend.append(entry);
+		}
+	};
+	return {
+		report(metrics) {
+			const gap = previousAt === null ? 0 : metrics.at - previousAt;
+			previousAt = metrics.at;
+			samples.push({
+				phases: metrics.phases,
+				total: metrics.durationMs,
+				gap,
+				input: metrics.inputLatencyMs
+			});
+			if (samples.length > capacity) samples.splice(0, samples.length - capacity);
+		},
+		get visible() {
+			return visible;
+		},
+		setVisible(next) {
+			if (visible === next) return;
+			visible = next;
+			panel.hidden = !next;
+			if (next) {
+				draw();
+				timer = setInterval(draw, redrawMs);
+			} else if (timer !== null) {
+				clearInterval(timer);
+				timer = null;
+			}
+		},
+		dispose() {
+			if (timer !== null) clearInterval(timer);
+			container.remove();
+			if (restore !== null) host.style.position = restore;
+		}
+	};
+}
+/**
+* The window's numbers.
+*
+* Peak rather than mean for the phases, for the reason the playground's
+* status line already gives: patches and environment run on a small
+* minority of frames, so a mean would report them as idle on exactly
+* the frames where they were the cost.
+*/
+function summarize(samples) {
+	const worstPhase = {
+		ticks: 0,
+		patches: 0,
+		environment: 0,
+		virtualize: 0,
+		layout: 0,
+		semantics: 0,
+		render: 0
+	};
+	let totalSum = 0;
+	let worstTotal = 0;
+	let worstGap = 0;
+	let worstInput = null;
+	let gapSum = 0;
+	let gaps = 0;
+	for (const sample of samples) {
+		totalSum += sample.total;
+		worstTotal = Math.max(worstTotal, sample.total);
+		if (sample.gap > 0) {
+			worstGap = Math.max(worstGap, sample.gap);
+			gapSum += sample.gap;
+			gaps++;
+		}
+		if (sample.input !== null) worstInput = Math.max(worstInput ?? 0, sample.input);
+		for (const phase of UI_FRAME_PHASES) worstPhase[phase] = Math.max(worstPhase[phase], sample.phases[phase]);
+	}
+	return {
+		fps: gaps === 0 ? 0 : 1e3 / (gapSum / gaps),
+		meanTotal: samples.length === 0 ? 0 : totalSum / samples.length,
+		worstTotal,
+		worstGap,
+		worstInput,
+		worstPhase
+	};
+}
+function stat(doc, label, value) {
+	const element = doc.createElement("span");
+	element.className = "stat";
+	const name = doc.createElement("i");
+	name.textContent = label;
+	element.append(name, doc.createTextNode(value));
+	return element;
+}
+const STYLES$2 = `
+:host { all: initial; }
+.panel {
+  position: absolute;
+  z-index: 2147482000;
+  width: 300px;
+  pointer-events: none;
+  margin: 12px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(13, 17, 23, 0.94);
+  color: #e6edf3;
+  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.panel[hidden] { display: none; }
+.panel.docked { position: static; width: auto; margin: 0; pointer-events: auto; border: none; background: transparent; color: var(--gd-text, #e6edf3); }
+.panel.docked .stat i, .panel.docked .legend { color: var(--gd-muted, #8b949e); }
+.panel.docked .strip { height: 96px; }
+.top-left { top: 0; left: 0; }
+.top-right { top: 0; right: 0; }
+.bottom-left { bottom: 0; left: 0; }
+.bottom-right { bottom: 0; right: 0; }
+.strip { display: block; width: 100%; height: 48px; margin: 6px 0; }
+.readout { display: flex; flex-wrap: wrap; gap: 2px 10px; }
+.stat i { color: #8b949e; font-style: normal; margin-right: 4px; }
+.legend { display: flex; flex-wrap: wrap; gap: 2px 8px; color: #8b949e; }
+.entry { display: inline-flex; align-items: center; gap: 3px; }
+.entry i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
+`;
+//#endregion
+//#region src/TreeRows.ts
+/** The rows of the tree with `expanded` nodes unfolded, in document order. */
+function treeRows(root, expanded) {
+	const rows = [];
+	const visit = (node, depth, owner) => {
+		const own = node.component ?? owner;
+		const expandable = node.children.length > 0;
+		const isExpanded = expandable && expanded.has(node.id);
+		rows.push({
+			node,
+			depth,
+			expandable,
+			expanded: isExpanded,
+			...own === void 0 ? {} : { owner: own }
+		});
+		if (isExpanded) for (const child of node.children) visit(child, depth + 1, own);
+	};
+	visit(root, 0, void 0);
+	return rows;
+}
+/** The ids of every node with children down to `depth` levels, for a first unfolding. */
+function idsToDepth(root, depth) {
+	const ids = [];
+	const visit = (node, level) => {
+		if (level >= depth || node.children.length === 0) return;
+		ids.push(node.id);
+		for (const child of node.children) visit(child, level + 1);
+	};
+	visit(root, 0);
+	return ids;
+}
+/** The ids of the ancestors of `id`, root first, or null when the tree has no such node. */
+function pathTo(root, id) {
+	const path = [];
+	const visit = (node) => {
+		if (node.id === id) return true;
+		path.push(node.id);
+		for (const child of node.children) if (visit(child)) return true;
+		path.pop();
+		return false;
+	};
+	return visit(root) ? path : null;
+}
+/** One row's label, as the tree prints it. */
+function rowLabel(row) {
+	const { node } = row;
+	const parts = [node.type];
+	if (node.component !== void 0) parts.push(`<${node.component}>`);
+	if (node.text !== void 0) parts.push(`"${node.text}"`);
+	return parts.join(" ");
+}
+//#endregion
+//#region src/DevtoolsPanel.ts
+const TABS = [
+	{
+		id: "tree",
+		label: "Tree"
+	},
+	{
+		id: "streams",
+		label: "Streams"
+	},
+	{
+		id: "console",
+		label: "Console"
+	},
+	{
+		id: "frames",
+		label: "Frames"
+	},
+	{
+		id: "actions",
+		label: "Actions"
+	}
+];
+function mountDevtoolsPanel(host, port, options = {}) {
+	const doc = host.ownerDocument;
+	const openDepth = options.openDepth ?? 4;
+	const consoleLimit = options.consoleLimit ?? 500;
+	const actionLimit = options.actionLimit ?? 300;
+	const container = doc.createElement("div");
+	container.className = "gesso-devtools";
+	const applyTheme = (theme) => {
+		if (theme === "auto") delete container.dataset["theme"];
+		else container.dataset["theme"] = theme;
+	};
+	applyTheme(options.theme ?? "auto");
+	const root = container.attachShadow({ mode: "open" });
+	const style = doc.createElement("style");
+	style.textContent = STYLES$1;
+	root.append(style);
+	host.appendChild(container);
+	const toolbar = el(doc, "div", "toolbar");
+	const picker = doc.createElement("select");
+	picker.className = "picker";
+	picker.hidden = true;
+	const tabs = el(doc, "div", "tabs");
+	const tabButtons = /* @__PURE__ */ new Map();
+	for (const tab of TABS) {
+		const button = doc.createElement("button");
+		button.type = "button";
+		button.textContent = tab.label;
+		button.addEventListener("click", () => showTab(tab.id));
+		tabButtons.set(tab.id, button);
+		tabs.append(button);
+	}
+	const inspectToggle = doc.createElement("label");
+	inspectToggle.className = "toggle";
+	const inspectBox = doc.createElement("input");
+	inspectBox.type = "checkbox";
+	inspectToggle.append(inspectBox, doc.createTextNode(" Inspect layout"));
+	const pickToggle = doc.createElement("label");
+	pickToggle.className = "toggle";
+	const pickBox = doc.createElement("input");
+	pickBox.type = "checkbox";
+	pickToggle.append(pickBox, doc.createTextNode(" Pick"));
+	pickToggle.title = "Click a node on the canvas to select it here. The click does not reach the application.";
+	const marksToggle = doc.createElement("label");
+	marksToggle.className = "toggle";
+	const marksBox = doc.createElement("input");
+	marksBox.type = "checkbox";
+	marksToggle.append(marksBox, doc.createTextNode(" Marks"));
+	marksToggle.title = "Name the frame phases and the channel traffic for the browser's own profiler, so a performance recording shows what Gesso was doing. Off by default: a frame nobody is profiling pays nothing.";
+	const status = el(doc, "span", "status");
+	toolbar.append(picker, tabs, inspectToggle, pickToggle, marksToggle, status);
+	root.append(toolbar);
+	const views = el(doc, "div", "views");
+	const treeView = el(doc, "div", "view tree-view");
+	const treePane = el(doc, "div", "tree");
+	const reportPane = el(doc, "div", "report");
+	treeView.append(treePane, reportPane);
+	const consoleView = el(doc, "div", "view console-view");
+	const consoleList = el(doc, "ol", "log");
+	const consoleBar = el(doc, "div", "bar");
+	const clearConsole = doc.createElement("button");
+	clearConsole.type = "button";
+	clearConsole.textContent = "Clear";
+	consoleBar.append(clearConsole);
+	consoleView.append(consoleBar, consoleList);
+	const framesView = el(doc, "div", "view frames-view");
+	const actionsView = el(doc, "div", "view actions-view");
+	const actionsList = el(doc, "ol", "log");
+	actionsView.append(actionsList);
+	const streamsView = el(doc, "div", "view streams-view");
+	const streamsBar = el(doc, "div", "bar");
+	const streamsTotal = el(doc, "span", "total");
+	const resetStreams = doc.createElement("button");
+	resetStreams.type = "button";
+	resetStreams.textContent = "Mark";
+	resetStreams.title = "Take the counts as they are now, so what follows reads as a change from here.";
+	streamsBar.append(streamsTotal, resetStreams);
+	const streamsList = el(doc, "div", "streams");
+	streamsView.append(streamsBar, streamsList);
+	views.append(treeView, streamsView, consoleView, framesView, actionsView);
+	root.append(views);
+	const viewFor = {
+		tree: treeView,
+		streams: streamsView,
+		console: consoleView,
+		frames: framesView,
+		actions: actionsView
+	};
+	let apps = [];
+	let current = null;
+	let tab = "tree";
+	let snapshot = null;
+	const expanded = /* @__PURE__ */ new Set();
+	let openedOnce = false;
+	let selectedId = null;
+	let hoveredOnCanvas = null;
+	let highlighted = null;
+	let report = null;
+	const consoleEntries = [];
+	const actionEntries = [];
+	let actionOrigin = null;
+	let profiler = null;
+	/**
+	* Counts as of the last "Mark", by component anchor.
+	*
+	* A leak is not a number, it is a number that climbs: forty
+	* subscriptions under a list is either right or wrong depending on
+	* the list, and forty more after navigating away and back is wrong
+	* whatever the list. So the view shows the count and the change
+	* since a moment the person chose.
+	*/
+	let streamBaseline = /* @__PURE__ */ new Map();
+	let baselineTotal = null;
+	const request = (message) => {
+		if (current !== null) port.post({
+			type: "request",
+			app: current.id,
+			request: message
+		});
+	};
+	const subscribe = () => {
+		request({
+			kind: "console",
+			enabled: true
+		});
+		request({
+			kind: "watchTree",
+			enabled: true
+		});
+		request({
+			kind: "watchFrames",
+			enabled: tab === "frames"
+		});
+		request({
+			kind: "inspector",
+			enabled: inspectBox.checked
+		});
+	};
+	const unsubscribe = () => {
+		request({
+			kind: "console",
+			enabled: false
+		});
+		request({
+			kind: "watchTree",
+			enabled: false
+		});
+		request({
+			kind: "watchFrames",
+			enabled: false
+		});
+		request({
+			kind: "inspector",
+			enabled: false
+		});
+		request({
+			kind: "select",
+			id: null
+		});
+		request({
+			kind: "highlight",
+			id: null
+		});
+		request({
+			kind: "marks",
+			enabled: false
+		});
+		if (current !== null && pickBox.checked) port.post({
+			type: "pick",
+			app: current.id,
+			enabled: false
+		});
+	};
+	const setStatus = (text) => {
+		status.textContent = text;
+	};
+	const showApp = (info) => {
+		if (current?.id === info?.id) return;
+		if (current !== null) unsubscribe();
+		current = info;
+		snapshot = null;
+		expanded.clear();
+		openedOnce = false;
+		selectedId = null;
+		highlighted = null;
+		hoveredOnCanvas = null;
+		report = null;
+		consoleEntries.length = 0;
+		actionEntries.length = 0;
+		actionOrigin = null;
+		streamBaseline = /* @__PURE__ */ new Map();
+		baselineTotal = null;
+		renderTree();
+		renderReport();
+		renderConsole();
+		renderActions();
+		renderStreams();
+		if (info === null) {
+			setStatus("No Gesso application connected. Call connectDevtools(app) in the page.");
+			return;
+		}
+		setStatus("");
+		picker.value = info.id;
+		subscribe();
+	};
+	const showTab = (next) => {
+		tab = next;
+		for (const [id, button] of tabButtons) button.className = id === next ? "active" : "";
+		for (const [id, view] of Object.entries(viewFor)) view.hidden = id !== next;
+		request({
+			kind: "watchFrames",
+			enabled: next === "frames"
+		});
+		if (next === "frames") {
+			profiler ??= mountFrameProfiler(framesView, { layout: "docked" });
+			profiler.setVisible(true);
+		} else profiler?.setVisible(false);
+	};
+	const renderTree = () => {
+		treePane.textContent = "";
+		if (snapshot === null) return;
+		if (!openedOnce) {
+			openedOnce = true;
+			for (const id of idsToDepth(snapshot.root, openDepth)) expanded.add(id);
+		}
+		const rows = treeRows(snapshot.root, expanded);
+		for (const row of rows) {
+			const line = el(doc, "div", "row");
+			if (row.node.id === selectedId) line.classList.add("selected");
+			if (row.node.id === hoveredOnCanvas) line.classList.add("hovered");
+			line.style.paddingLeft = `${8 + row.depth * 12}px`;
+			line.dataset["id"] = row.node.id;
+			const disclosure = el(doc, "span", "disclosure");
+			disclosure.textContent = row.expandable ? row.expanded ? "▾" : "▸" : "";
+			disclosure.addEventListener("click", (event) => {
+				event.stopPropagation();
+				if (expanded.has(row.node.id)) expanded.delete(row.node.id);
+				else expanded.add(row.node.id);
+				renderTree();
+			});
+			const type = el(doc, "span", "type");
+			type.textContent = row.node.type;
+			line.append(disclosure, type);
+			if (row.node.component !== void 0) {
+				const component = el(doc, "span", "component");
+				component.textContent = `<${row.node.component}>`;
+				line.append(component);
+			}
+			if (row.node.text !== void 0) {
+				const text = el(doc, "span", "text");
+				text.textContent = `"${row.node.text}"`;
+				line.append(text);
+			}
+			const id = el(doc, "span", "id");
+			id.textContent = row.node.id;
+			line.append(id);
+			line.title = rowLabel(row) + (row.owner === void 0 ? "" : ` · rendered by ${row.owner}`);
+			line.addEventListener("mouseenter", () => setHighlight(row.node.id));
+			line.addEventListener("click", () => select(row.node.id));
+			treePane.append(line);
+		}
+		const count = el(doc, "div", "count");
+		count.textContent = `${snapshot.nodes} nodes`;
+		treePane.append(count);
+	};
+	treePane.addEventListener("mouseleave", () => setHighlight(null));
+	const setHighlight = (id) => {
+		if (highlighted === id) return;
+		highlighted = id;
+		request({
+			kind: "highlight",
+			id
+		});
+	};
+	const select = (id) => {
+		selectedId = id;
+		request({
+			kind: "select",
+			id
+		});
+		if (id === null) {
+			report = null;
+			renderReport();
+		}
+		renderTree();
+	};
+	const reveal = (id) => {
+		if (snapshot === null) return;
+		const path = pathTo(snapshot.root, id);
+		if (path === null) return;
+		for (const ancestor of path) expanded.add(ancestor);
+		renderTree();
+		[...treePane.children].find((child) => child.dataset["id"] === id)?.scrollIntoView?.({ block: "nearest" });
+	};
+	/**
+	* Live subscriptions per component, from the tree.
+	*
+	* Aggregated here rather than reported per component by the runtime,
+	* because the tree already says which component a node belongs to
+	* and already arrives whenever the count changes. Nodes above every
+	* component anchor are the runtime's own and are listed under the
+	* root.
+	*/
+	const componentStreams = () => {
+		if (snapshot === null) return [];
+		const totals = /* @__PURE__ */ new Map();
+		const visit = (node, owner) => {
+			const here = node.component === void 0 ? owner : totals.get(node.id) ?? {
+				name: node.component,
+				anchorId: node.id,
+				count: 0
+			};
+			if (node.component !== void 0) totals.set(node.id, here);
+			here.count += node.subscriptions ?? 0;
+			for (const child of node.children) visit(child, here);
+		};
+		const root = {
+			name: "(root)",
+			anchorId: snapshot.root.id,
+			count: 0
+		};
+		totals.set(snapshot.root.id, root);
+		visit(snapshot.root, root);
+		return [...totals.values()].sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
+	};
+	const renderStreams = () => {
+		streamsList.textContent = "";
+		if (snapshot === null) {
+			streamsTotal.textContent = "Waiting for a tree.";
+			return;
+		}
+		const change = baselineTotal === null ? "" : ` (${signed(snapshot.subscriptions - baselineTotal)} since the mark)`;
+		streamsTotal.textContent = `${snapshot.subscriptions} live subscriptions in the graph${change}`;
+		const rows = componentStreams();
+		if (rows.length === 0) {
+			const empty = el(doc, "p", "empty");
+			empty.textContent = "Nothing is subscribed.";
+			streamsList.append(empty);
+			return;
+		}
+		const largest = rows[0]?.count ?? 0;
+		for (const entry of rows) {
+			const row = el(doc, "div", "stream-row");
+			const name = el(doc, "span", "component");
+			name.textContent = entry.name;
+			const bar = el(doc, "span", "bar-track");
+			const fill = el(doc, "span", "bar-fill");
+			fill.style.width = `${largest === 0 ? 0 : Math.round(entry.count / largest * 100)}%`;
+			bar.append(fill);
+			const count = el(doc, "span", "count");
+			const before = streamBaseline.get(entry.anchorId);
+			const delta = before === void 0 || before === entry.count ? "" : ` ${signed(entry.count - before)}`;
+			count.textContent = `${entry.count}${delta}`;
+			if (delta !== "") count.classList.add("changed");
+			row.append(name, bar, count);
+			row.title = entry.anchorId;
+			row.addEventListener("mouseenter", () => setHighlight(entry.anchorId));
+			row.addEventListener("click", () => {
+				showTab("tree");
+				reveal(entry.anchorId);
+				select(entry.anchorId);
+			});
+			streamsList.append(row);
+		}
+	};
+	streamsList.addEventListener("mouseleave", () => setHighlight(null));
+	resetStreams.addEventListener("click", () => {
+		streamBaseline = new Map(componentStreams().map((entry) => [entry.anchorId, entry.count]));
+		baselineTotal = snapshot?.subscriptions ?? null;
+		renderStreams();
+	});
+	const renderReport = () => {
+		reportPane.textContent = "";
+		if (report === null) {
+			const empty = el(doc, "p", "empty");
+			empty.textContent = selectedId === null ? "Select a node in the tree to read its report." : "The selected node has left the tree.";
+			reportPane.append(empty);
+			return;
+		}
+		const id = report.id;
+		reportPane.append(...renderNodeReport(doc, report, { onEditProp: (name, value) => request({
+			kind: "setProp",
+			id,
+			name,
+			value
+		}) }));
+	};
+	const renderConsole = () => {
+		consoleList.textContent = "";
+		for (const entry of consoleEntries) {
+			const item = doc.createElement("li");
+			if ("error" in entry) {
+				item.className = "entry error";
+				item.append(badge(doc, "render"), badge(doc, entry.source, "source"), doc.createTextNode(entry.message));
+				if (entry.stack !== void 0) {
+					const stack = doc.createElement("pre");
+					stack.textContent = entry.stack;
+					item.append(stack);
+				}
+			} else {
+				item.className = `entry ${entry.level}`;
+				item.append(badge(doc, entry.thread), doc.createTextNode(entry.args.join(" ")));
+			}
+			consoleList.append(item);
+		}
+		consoleList.scrollTop = consoleList.scrollHeight;
+	};
+	clearConsole.addEventListener("click", () => {
+		consoleEntries.length = 0;
+		renderConsole();
+	});
+	const renderActions = () => {
+		actionsList.textContent = "";
+		if (actionEntries.length === 0) {
+			const empty = el(doc, "li", "empty");
+			empty.textContent = "No store actions. Pass an ActionLog to connectDevtools to see commands and patches here.";
+			actionsList.append(empty);
+			return;
+		}
+		for (const entry of actionEntries) {
+			const item = doc.createElement("li");
+			item.className = `entry ${entry.kind}`;
+			const time = el(doc, "span", "time");
+			time.textContent = `+${((entry.at - (actionOrigin ?? entry.at)) / 1e3).toFixed(2)}s`;
+			item.append(time, badge(doc, entry.kind), doc.createTextNode(describeActionEntry(entry)));
+			if (entry.cause !== void 0) {
+				const cause = el(doc, "span", "cause");
+				cause.textContent = ` #${entry.cause.id} ${entry.cause.label}`;
+				item.append(cause);
+			}
+			actionsList.append(item);
+		}
+		actionsList.scrollTop = actionsList.scrollHeight;
+	};
+	const onEvent = (event) => {
+		switch (event.kind) {
+			case "tree":
+				snapshot = event.tree;
+				renderTree();
+				renderStreams();
+				break;
+			case "action":
+				pushAction(event.entry);
+				break;
+			case "report":
+				if (event.id === selectedId) {
+					report = event.report;
+					if (report === null) selectedId = null;
+					renderReport();
+					renderTree();
+				}
+				break;
+			case "hover":
+				hoveredOnCanvas = event.report?.id ?? null;
+				if (hoveredOnCanvas !== null) reveal(hoveredOnCanvas);
+				else renderTree();
+				break;
+			case "console":
+				consoleEntries.push(event.entry);
+				if (consoleEntries.length > consoleLimit) consoleEntries.splice(0, consoleEntries.length - consoleLimit);
+				renderConsole();
+				break;
+			case "error":
+				consoleEntries.push({
+					error: true,
+					message: event.message,
+					source: event.source,
+					at: Date.now(),
+					...event.stack === void 0 ? {} : { stack: event.stack }
+				});
+				renderConsole();
+				break;
+			case "frame": profiler?.report(event.metrics);
+		}
+	};
+	const onMessage = (message) => {
+		if (message.type === "apps") {
+			apps = message.apps;
+			picker.textContent = "";
+			for (const info of apps) {
+				const option = doc.createElement("option");
+				option.value = info.id;
+				option.textContent = info.name;
+				picker.append(option);
+			}
+			picker.hidden = apps.length < 2;
+			const still = apps.find((info) => info.id === current?.id);
+			showApp(still ?? apps[0] ?? null);
+			return;
+		}
+		if (message.app !== current?.id) return;
+		if (message.type === "event") {
+			onEvent(message.event);
+			return;
+		}
+		if (message.type === "picked") {
+			showTab("tree");
+			reveal(message.id);
+			select(message.id);
+			return;
+		}
+		pushAction(message.entry);
+	};
+	/** One action log entry, from either route: the page's log or the render worker's. */
+	const pushAction = (entry) => {
+		actionOrigin ??= entry.at;
+		actionEntries.push(entry);
+		if (actionEntries.length > actionLimit) actionEntries.splice(0, actionEntries.length - actionLimit);
+		renderActions();
+	};
+	picker.addEventListener("change", () => {
+		const info = apps.find((candidate) => candidate.id === picker.value);
+		if (info !== void 0) showApp(info);
+	});
+	inspectBox.addEventListener("change", () => request({
+		kind: "inspector",
+		enabled: inspectBox.checked
+	}));
+	pickBox.addEventListener("change", () => {
+		if (current === null) return;
+		port.post({
+			type: "pick",
+			app: current.id,
+			enabled: pickBox.checked
+		});
+		request({
+			kind: "inspector",
+			enabled: pickBox.checked || inspectBox.checked
+		});
+	});
+	marksBox.addEventListener("change", () => request({
+		kind: "marks",
+		enabled: marksBox.checked
+	}));
+	const stop = port.onMessage(onMessage);
+	showTab("tree");
+	showApp(null);
+	port.post({ type: "hello" });
+	return {
+		get app() {
+			return current;
+		},
+		show(appId) {
+			const info = apps.find((candidate) => candidate.id === appId);
+			if (info !== void 0) showApp(info);
+		},
+		setTheme: applyTheme,
+		dispose() {
+			if (current !== null) unsubscribe();
+			stop();
+			profiler?.dispose();
+			container.remove();
+		}
+	};
+}
+function el(doc, tag, className) {
+	const element = doc.createElement(tag);
+	element.className = className;
+	return element;
+}
+/** A change with its sign, so a rise reads as one at a glance. */
+function signed(delta) {
+	return delta > 0 ? `+${delta}` : String(delta);
+}
+function badge(doc, text, extra = "") {
+	const element = el(doc, "span", `badge ${text} ${extra}`.trim());
+	element.textContent = text;
+	return element;
+}
+/**
+* The two palettes, as custom properties on the shadow host.
+*
+* Light is the default set and dark overrides it, twice: once for a
+* host that asked for dark, and once for a viewer who prefers it when
+* the host did not say. The report view and the docked profiler read
+* the same properties with the dark values as fallbacks, so the
+* in-page corner tools, which define none of them, look as they did.
+*/
+const DARK_TOKENS = `
+  --gd-bg: #0d1117;
+  --gd-bg-raised: #161b22;
+  --gd-bg-hover: #21262d;
+  --gd-border: #30363d;
+  --gd-text: #e6edf3;
+  --gd-text-strong: #c9d1d9;
+  --gd-muted: #8b949e;
+  --gd-faint: #6e7681;
+  --gd-fainter: #484f58;
+  --gd-accent: #79c0ff;
+  --gd-info: #a5d6ff;
+  --gd-purple: #d2a8ff;
+  --gd-green: #7ee787;
+  --gd-orange: #ffa657;
+  --gd-red: #ff7b72;
+  --gd-yellow: #e3b341;
+  --gd-row-hovered: #1f2a3a;
+  --gd-row-selected: #1f3b5c;
+  --gd-budget: rgba(255, 255, 255, 0.35);
+`;
+const STYLES$1 = `
+:host { all: initial; display: block; height: 100%; 
+  --gd-bg: #ffffff;
+  --gd-bg-raised: #f1f3f4;
+  --gd-bg-hover: #e8eaed;
+  --gd-border: #dadce0;
+  --gd-text: #202124;
+  --gd-text-strong: #3c4043;
+  --gd-muted: #5f6368;
+  --gd-faint: #80868b;
+  --gd-fainter: #9aa0a6;
+  --gd-accent: #1a73e8;
+  --gd-info: #185abc;
+  --gd-purple: #8430ce;
+  --gd-green: #188038;
+  --gd-orange: #b06000;
+  --gd-red: #c5221f;
+  --gd-yellow: #a05f00;
+  --gd-row-hovered: #e8f0fe;
+  --gd-row-selected: #d2e3fc;
+  --gd-budget: rgba(0, 0, 0, 0.35);
+ }
+:host([data-theme="dark"]) { ${DARK_TOKENS} }
+@media (prefers-color-scheme: dark) {
+  :host(:not([data-theme="light"])) { ${DARK_TOKENS} }
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--gd-border);
+  background: var(--gd-bg-raised);
+  color: var(--gd-text);
+  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.tabs { display: flex; gap: 2px; }
+.tabs button, .bar button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 8px;
+  background: transparent;
+  color: var(--gd-muted);
+  font: inherit;
+  cursor: pointer;
+}
+.tabs button:hover, .bar button:hover { color: var(--gd-text); background: var(--gd-bg-hover); }
+.tabs button.active { color: var(--gd-text); border-color: var(--gd-border); background: var(--gd-bg); }
+.picker { font: inherit; background: var(--gd-bg); color: var(--gd-text); border: 1px solid var(--gd-border); border-radius: 4px; }
+.toggle { display: inline-flex; align-items: center; gap: 2px; color: var(--gd-muted); cursor: pointer; }
+.status { margin-left: auto; color: var(--gd-muted); }
+.views { height: calc(100% - 30px); background: var(--gd-bg); color: var(--gd-text); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.view { height: 100%; }
+.view[hidden] { display: none; }
+.tree-view { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1fr); }
+.tree { overflow: auto; border-right: 1px solid var(--gd-border); padding: 4px 0; }
+.row { display: flex; gap: 6px; white-space: nowrap; padding: 1px 8px; cursor: pointer; }
+.row:hover { background: var(--gd-bg-raised); }
+.row.hovered { background: var(--gd-row-hovered); }
+.row.selected { background: var(--gd-row-selected); }
+.disclosure { width: 10px; color: var(--gd-muted); }
+.type { color: var(--gd-accent); }
+.component { color: var(--gd-purple); }
+.text { color: var(--gd-info); overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
+.id { color: var(--gd-fainter); }
+.count { padding: 4px 8px; color: var(--gd-faint); }
+.report { overflow: auto; padding: 8px 12px; }
+.empty { color: var(--gd-muted); margin: 0; padding: 4px 8px; }
+.console-view { display: flex; flex-direction: column; }
+.bar { padding: 4px 8px; border-bottom: 1px solid var(--gd-border); }
+.log { flex: 1; margin: 0; padding: 4px 0; list-style: none; overflow: auto; }
+.entry { padding: 1px 8px; border-bottom: 1px solid var(--gd-bg-raised); white-space: pre-wrap; overflow-wrap: anywhere; }
+.entry.warn { color: var(--gd-yellow); }
+.entry.error { color: var(--gd-red); }
+.entry.debug, .entry.info { color: var(--gd-muted); }
+.entry pre { margin: 2px 0 0 0; color: var(--gd-muted); white-space: pre-wrap; }
+.badge {
+  display: inline-block;
+  min-width: 36px;
+  margin-right: 6px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: var(--gd-bg-hover);
+  color: var(--gd-muted);
+  font-size: 10px;
+  text-align: center;
+}
+.badge.app { color: var(--gd-green); }
+.badge.render { color: var(--gd-accent); }
+.badge.command { color: var(--gd-purple); }
+.badge.patch { color: var(--gd-accent); }
+.badge.frame { color: var(--gd-green); }
+.badge.source { color: var(--gd-orange); }
+.time { color: var(--gd-faint); margin-right: 6px; }
+.cause { color: var(--gd-orange); }
+.entry.frame { color: var(--gd-muted); }
+.frames-view { padding: 8px; }
+/* Column, so the list inside scrolls itself rather than overflowing
+   the pane: without it the log grew past the bottom of the panel and
+   the newest entries could not be reached. */
+.actions-view { display: flex; flex-direction: column; }
+.streams-view { display: flex; flex-direction: column; }
+.streams-view .bar { display: flex; align-items: center; gap: 8px; }
+.streams-view .total { flex: 1; color: var(--gd-muted); }
+.streams { flex: 1; overflow: auto; padding: 4px 0; }
+.stream-row { display: flex; align-items: center; gap: 8px; padding: 1px 8px; cursor: pointer; }
+.stream-row:hover { background: var(--gd-bg-raised); }
+.stream-row .component { color: var(--gd-purple); white-space: nowrap; }
+.bar-track { flex: 1; height: 6px; border-radius: 3px; background: var(--gd-bg-raised); overflow: hidden; }
+.bar-fill { display: block; height: 100%; background: var(--gd-accent); }
+.stream-row .count { width: 76px; text-align: right; color: var(--gd-muted); white-space: nowrap; }
+.stream-row .count.changed { color: var(--gd-orange); }
+${NODE_REPORT_STYLES}
+`;
+//#endregion
+//#region src/NodeInspector.ts
+function mountNodeInspector(host, options = {}) {
+	const doc = host.ownerDocument;
+	const position = doc.defaultView?.getComputedStyle(host).position ?? "static";
+	const restore = position === "static" ? host.style.position : null;
+	if (position === "static") host.style.position = "relative";
+	const container = doc.createElement("div");
+	const root = container.attachShadow({ mode: "open" });
+	const style = doc.createElement("style");
+	style.textContent = STYLES;
+	const panel = doc.createElement("div");
+	panel.className = `panel ${options.corner ?? "bottom-left"}`;
+	panel.hidden = true;
+	root.append(style, panel);
+	host.appendChild(container);
+	const render = (report) => {
+		panel.textContent = "";
+		panel.append(...renderNodeReport(doc, report));
+	};
+	return {
+		set(report) {
+			if (report === null) {
+				panel.hidden = true;
+				panel.textContent = "";
+				return;
+			}
+			render(report);
+			panel.hidden = false;
+		},
+		dispose() {
+			container.remove();
+			if (restore !== null) host.style.position = restore;
+		}
+	};
+}
+const STYLES = `
+:host { all: initial; }
+.panel {
+  position: absolute;
+  z-index: 2147482000;
+  max-width: 380px;
+  max-height: 70%;
+  overflow: auto;
+  /* The person is hovering the canvas underneath: the panel showing
+     what is under the pointer must never be what is under the pointer. */
+  pointer-events: none;
+  margin: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(13, 17, 23, 0.94);
+  color: #e6edf3;
+  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.panel[hidden] { display: none; }
+.top-left { top: 0; left: 0; }
+.top-right { top: 0; right: 0; }
+.bottom-left { bottom: 0; left: 0; }
+.bottom-right { bottom: 0; right: 0; }
+${NODE_REPORT_STYLES}
+`;
+//#endregion
+export { ENVELOPE_SOURCE, ErrorOverlay, HOOK_PROPERTY, NODE_REPORT_STYLES, SourceMapConsumer, SourceMapStore, actionGlyph, codeFrame, connectDevtools, createActionLog, createDirectPorts, createNodePicker, decodeMappings, describeActionEntry, formatFrame, forwardNewEntries, getDevtoolsHook, idsToDepth, inputLabel, isEnvelope, mapStack, mountActionLogPanel, mountDevtoolsPanel, mountErrorOverlay, mountFrameProfiler, mountNodeInspector, parseSourceMappingUrl, parseStack, pathTo, primaryFrame, renderNodeReport, rowLabel, shortenPath, summarize, tapRenderWorker, treeRows, windowPagePort, windowPanelPort };
+
+//# sourceMappingURL=index.js.map