@weasel-js/devtools 0.0.0-stage → 1.11.1

package/dist/index.js

@@ -0,0 +1,2006 @@
+import { DEVTOOLS_PROTOCOL, createInPageTransports, installDevtoolsHook } from "@weasel-js/core/devtools-protocol";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Tab, TabList, TabPanel, Tabs } from "@weasel-js/ui/components/Tabs";
+import { useLatest, useVisibleRaf } from "@weasel-js/react";
+import { Select } from "@weasel-js/ui/components/Select";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@weasel-js/ui/components/Button";
+import { Switch } from "@weasel-js/ui/components/Switch";
+import { ToggleBar } from "@weasel-js/ui/components/ToggleBar";
+import { DataGrid } from "@weasel-js/ui/components/DataGrid";
+import { FallthroughDiagram } from "@weasel-js/ui/components/FallthroughDiagram";
+import { Powerline } from "@weasel-js/ui/components/Powerline";
+import { DetailList, DetailRow } from "@weasel-js/ui/components/DetailList";
+import { Disclosure } from "@weasel-js/ui/components/Disclosure";
+import { Badge } from "@weasel-js/ui/components/Badge";
+import { Code } from "@weasel-js/ui/components/Code";
+import { Input } from "@weasel-js/ui/components/Input";
+import { Tree } from "@weasel-js/ui/components/Tree";
+import { GestureRoute } from "@weasel-js/ui/components/GestureRoute";
+import { DEBUG_FEATURES } from "@weasel-js/core";
+//#region src/client.ts
+/**
+* The panel's side of the devtools protocol, free of any framework: the
+* handshake, request ids and their replies, the roots the page reports, and
+* its change notices. The views, the extension and tests all drive this.
+*/
+/** A connection over `transport`, sending nothing until it is opened. It is connected once the page says `sup`. */
+function createDevtoolsClient(transport) {
+	let state = {
+		status: "closed",
+		kitVersion: null,
+		roots: [],
+		error: null
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	const changeListeners = /* @__PURE__ */ new Set();
+	const pending = /* @__PURE__ */ new Map();
+	let nextId = 1;
+	const set = (patch) => {
+		state = {
+			...state,
+			...patch
+		};
+		for (const l of [...listeners]) l();
+	};
+	const receive = (m) => {
+		if (state.status === "closed") return;
+		switch (m.type) {
+			case "sup":
+				set({
+					status: "connected",
+					kitVersion: m.kitVersion,
+					roots: m.roots,
+					error: null
+				});
+				return;
+			case "root-added":
+				set({ roots: [...state.roots.filter((r) => r.id !== m.root.id), m.root] });
+				return;
+			case "root-removed":
+				set({ roots: state.roots.filter((r) => r.id !== m.rootId) });
+				return;
+			case "changed": {
+				const areas = Object.keys(m.areas);
+				for (const l of [...changeListeners]) l(m.rootId, areas);
+				return;
+			}
+			case "result":
+				pending.get(m.requestId)?.resolve(m.result);
+				pending.delete(m.requestId);
+				return;
+			case "error":
+				if (m.requestId === null) {
+					set({
+						status: "error",
+						error: m.message
+					});
+					return;
+				}
+				pending.get(m.requestId)?.reject(new Error(m.message));
+				pending.delete(m.requestId);
+				return;
+		}
+	};
+	let off = null;
+	return {
+		state: () => state,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		onChanged(listener) {
+			changeListeners.add(listener);
+			return () => {
+				changeListeners.delete(listener);
+			};
+		},
+		request(rootId, body) {
+			if (state.status === "closed") return Promise.reject(/* @__PURE__ */ new Error("the devtools connection is closed"));
+			const requestId = nextId++;
+			return new Promise((resolve, reject) => {
+				pending.set(requestId, {
+					resolve,
+					reject
+				});
+				transport.send({
+					...body,
+					protocol: DEVTOOLS_PROTOCOL,
+					requestId,
+					rootId
+				});
+			});
+		},
+		open() {
+			if (off) return;
+			off = transport.onMessage(receive);
+			set({
+				status: "connecting",
+				error: null
+			});
+			transport.send({
+				type: "yo",
+				protocol: DEVTOOLS_PROTOCOL
+			});
+		},
+		close() {
+			if (!off) return;
+			transport.send({
+				type: "bye",
+				protocol: DEVTOOLS_PROTOCOL
+			});
+			off();
+			off = null;
+			set({ status: "closed" });
+			const err = /* @__PURE__ */ new Error("the devtools connection is closed");
+			for (const p of pending.values()) p.reject(err);
+			pending.clear();
+		}
+	};
+}
+/** {@link createDevtoolsClient}, opened: it says `yo` at once. */
+function connectDevtools(transport) {
+	const client = createDevtoolsClient(transport);
+	client.open();
+	return client;
+}
+//#endregion
+//#region src/trace.ts
+/** Follow `rootId`'s dispatch trace through `client`, from the oldest record the canvas still holds. */
+function followTrace(client, rootId) {
+	let cursor = 0;
+	let coordCursor = null;
+	let last = Promise.resolve();
+	const readOnce = async () => {
+		const slice = await client.request(rootId, {
+			type: "get-trace",
+			cursor,
+			...coordCursor !== null ? { coordCursor } : {}
+		});
+		cursor = slice.cursor;
+		const out = {
+			entries: slice.entries,
+			live: slice.live
+		};
+		if (slice.coords && coordCursor !== null) {
+			coordCursor = slice.coords.cursor;
+			out.coords = slice.coords.entries;
+		}
+		return out;
+	};
+	return {
+		read() {
+			const next = last.then(readOnce, readOnce);
+			last = next.catch(() => void 0);
+			return next;
+		},
+		setCoords(on) {
+			if (on && coordCursor === null) coordCursor = 0;
+			else if (!on) coordCursor = null;
+		}
+	};
+}
+//#endregion
+//#region src/history.ts
+/** Follow `rootId`'s history steps through `client`, from the oldest step the canvas still holds. */
+function followHistory(client, rootId) {
+	let cursor = 0;
+	let checkpoints = false;
+	let last = Promise.resolve();
+	const readOnce = async () => {
+		const slice = await client.request(rootId, {
+			type: "get-history",
+			cursor,
+			...checkpoints ? { checkpoints } : {}
+		});
+		cursor = slice.cursor;
+		return slice;
+	};
+	return {
+		read() {
+			const next = last.then(readOnce, readOnce);
+			last = next.catch(() => void 0);
+			return next;
+		},
+		setCheckpoints(on) {
+			checkpoints = on;
+		}
+	};
+}
+//#endregion
+//#region src/hooks.ts
+/** The React side of a connection: the client a panel holds, the data it reads per root, and its polls. */
+/** A connection over `transport` for as long as the component is mounted: `yo` on mount, `bye` on unmount. */
+function useDevtoolsClient(transport) {
+	const client = useMemo(() => createDevtoolsClient(transport), [transport]);
+	useEffect(() => {
+		client.open();
+		return () => client.close();
+	}, [client]);
+	return {
+		client,
+		state: useSyncExternalStore(client.subscribe, client.state)
+	};
+}
+/**
+* `read`'s answer about `rootId`, asked again whenever a `changed` notice for
+* that root names one of `areas`, or a dependency in `deps` changes.
+*/
+function useRootQuery(client, rootId, areas, read, deps = []) {
+	const [data, setData] = useState(void 0);
+	const [error, setError] = useState(null);
+	const [version, setVersion] = useState(0);
+	const readRef = useLatest(read);
+	const areaKey = areas.join(",");
+	useEffect(() => client.onChanged((id, changed) => {
+		if (id === rootId && changed.some((a) => areaKey.split(",").includes(a))) setVersion((v) => v + 1);
+	}), [
+		client,
+		rootId,
+		areaKey
+	]);
+	useEffect(() => {
+		let live = true;
+		readRef.current().then((result) => {
+			if (live) {
+				setData(result);
+				setError(null);
+			}
+		}, (err) => {
+			if (live) setError(err.message);
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		client,
+		rootId,
+		version,
+		readRef,
+		...deps
+	]);
+	return {
+		data,
+		error,
+		refresh: useRef(() => setVersion((v) => v + 1)).current
+	};
+}
+/** Call `tick` every `ms` while `enabled` and the page is visible, and once at the start. */
+function usePoll(tick, ms, enabled) {
+	const tickRef = useLatest(tick);
+	const last = useRef(-Infinity);
+	const loop = useVisibleRaf((time, l) => {
+		if (time - last.current >= ms) {
+			last.current = time;
+			tickRef.current();
+		}
+		l.request();
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		last.current = -Infinity;
+		loop.request();
+		return () => loop.cancel();
+	}, [enabled, loop]);
+}
+var DevtoolsPanel_module_default = {
+	panel: "_panel_485101",
+	bar: "_bar_485101",
+	picker: "_picker_485101",
+	dimension: "_dimension_485101",
+	status: "_status_485101",
+	tabs: "_tabs_485101",
+	tabList: "_tabList_485101",
+	tabPanel: "_tabPanel_485101",
+	empty: "_empty_485101"
+};
+//#endregion
+//#region src/RootPicker.tsx
+/** Which canvas the panel reads, each named by its label and dimension. */
+function RootPicker({ roots, value, onChange }) {
+	return /* @__PURE__ */ jsx(Select, {
+		className: DevtoolsPanel_module_default.picker,
+		"aria-label": "Canvas",
+		width: "fit",
+		placeholder: "No canvas",
+		isDisabled: roots.length === 0,
+		selectedKey: value,
+		onSelectionChange: onChange,
+		options: roots.map((r) => ({
+			value: r.id,
+			textValue: `${r.label} ${r.dimension}`,
+			label: /* @__PURE__ */ jsxs(Fragment, { children: [
+				r.label,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: DevtoolsPanel_module_default.dimension,
+					children: r.dimension
+				})
+			] })
+		}))
+	});
+}
+//#endregion
+//#region src/views/formatAge.ts
+/** How long ago something happened, in the shortest unit that reads well: `840ms`, `12.3s`, `4m07s`. */
+function formatAge(ms) {
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	const sec = ms / 1e3;
+	if (sec < 60) return `${sec.toFixed(1)}s`;
+	return `${Math.floor(sec / 60)}m${String(Math.floor(sec % 60)).padStart(2, "0")}s`;
+}
+var TraceTable_module_default = {
+	table: "_table_e7e309",
+	age: "_age_e7e309 _numeric_25fd0b",
+	count: "_count_e7e309 _numeric_25fd0b",
+	unhandled: "_unhandled_e7e309",
+	mode: "_mode_e7e309",
+	modeDetail: "_modeDetail_e7e309",
+	live: "_live_e7e309",
+	detail: "_detail_e7e309",
+	heading: "_heading_e7e309"
+};
+//#endregion
+//#region src/views/CoordTable.tsx
+/** Wide enough for a coordinate in the tens of thousands, sign included, at one decimal. */
+var fixed = (n, digits = 1) => n.toFixed(digits).padStart(8, " ");
+var pair = (x, y) => `${fixed(x)} ${fixed(y)}`;
+function CoordTable({ entries, now }) {
+	const rows = entries.slice(-100).map((entry, i) => ({
+		id: `${entry.ts}-${i}`,
+		entry
+	})).reverse();
+	const columns = [
+		{
+			id: "age",
+			header: "Age",
+			sortable: false,
+			className: TraceTable_module_default.age,
+			render: ({ entry }) => formatAge(Math.max(0, now - entry.ts))
+		},
+		{
+			id: "client",
+			header: "Client",
+			sortable: false,
+			className: TraceTable_module_default.count,
+			render: ({ entry }) => pair(entry.clientX, entry.clientY)
+		},
+		{
+			id: "world",
+			header: "World",
+			sortable: false,
+			className: TraceTable_module_default.count,
+			render: ({ entry }) => pair(entry.world.x, entry.world.y)
+		},
+		{
+			id: "scale",
+			header: "Scale",
+			sortable: false,
+			className: TraceTable_module_default.count,
+			render: ({ entry }) => entry.view ? fixed(entry.view.scaleX, 3) : "fallback"
+		}
+	];
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Coord records",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: TraceTable_module_default.heading,
+			children: "Coords"
+		}), /* @__PURE__ */ jsx(DataGrid, {
+			className: TraceTable_module_default.table,
+			rows,
+			columns,
+			empty: "No conversions recorded yet."
+		})]
+	});
+}
+//#endregion
+//#region src/views/DecisionPath.tsx
+function inputText(record) {
+	const { eventKind, key } = record.input;
+	return key === void 0 ? eventKind : `${eventKind} ${key === " " ? "Space" : key}`;
+}
+function DecisionPath({ record }) {
+	const winner = record.ranked.find((r) => r.walk.kind === "fired" || r.walk.kind === "would-fire");
+	const segments = [{
+		text: inputText(record),
+		status: "info",
+		endCap: "chevron"
+	}];
+	if (winner) segments.push({
+		text: winner.candidate.ownerId ?? "action",
+		status: "muted",
+		endCap: "chevron"
+	}, {
+		text: winner.candidate.actionId,
+		status: "accent",
+		endCap: "chevron"
+	});
+	else segments.push({
+		text: `${record.ranked.length} ranked, none fired`,
+		status: "muted",
+		endCap: "chevron"
+	});
+	segments.push(record.outcome === "handled" ? {
+		text: record.predicted ? "would handle" : "handled",
+		status: "success"
+	} : {
+		text: "unhandled",
+		status: "danger"
+	});
+	return /* @__PURE__ */ jsx(Powerline, {
+		segments,
+		size: "sm",
+		variant: "subtle",
+		"aria-label": "Decision path"
+	});
+}
+//#endregion
+//#region src/views/TraceTable.tsx
+/** The trace as rows, newest first under the live prediction; a dispatch row opens to the path it took and every stage behind it. */
+var LIVE_ID = "live";
+/** Ids from each entry's timestamp, numbering entries that share one. */
+function withTsIds(entries) {
+	const seen = /* @__PURE__ */ new Map();
+	return entries.map((entry) => {
+		const n = seen.get(entry.ts) ?? 0;
+		seen.set(entry.ts, n + 1);
+		return {
+			id: n === 0 ? String(entry.ts) : `${entry.ts}#${n}`,
+			entry
+		};
+	});
+}
+function renderEvent(entry) {
+	if (entry.kind === "mode") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("code", { children: entry.mode }), entry.detail ? /* @__PURE__ */ jsxs("span", {
+		className: TraceTable_module_default.modeDetail,
+		children: [
+			" (",
+			entry.detail,
+			")"
+		]
+	}) : null] });
+	const { key } = entry.input;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.input.eventKind, key !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("code", { children: key === " " ? "Space" : key })] }) : null] });
+}
+function renderOutcome(entry) {
+	if (entry.kind === "mode") return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("code", { children: entry.from ?? "∅" }),
+		" → ",
+		/* @__PURE__ */ jsx("code", { children: entry.to ?? "∅" })
+	] });
+	if (entry.outcome === "unhandled") return "unhandled";
+	return entry.fired ? /* @__PURE__ */ jsx("code", { children: entry.fired }) : "handled";
+}
+function TraceTable({ entries, live, now, showHandled, showUnhandled, empty }) {
+	const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const rows = withTsIds(entries).filter(({ entry: e }) => e.kind === "mode" || e.outcome === "handled" ? showHandled : showUnhandled).slice(-100).reverse();
+	if (live) rows.unshift({
+		id: LIVE_ID,
+		entry: live
+	});
+	const columns = [
+		{
+			id: "age",
+			header: "Age",
+			sortable: false,
+			className: TraceTable_module_default.age,
+			render: ({ id, entry }) => id === LIVE_ID ? "live" : formatAge(Math.max(0, now - entry.ts))
+		},
+		{
+			id: "event",
+			header: "Event",
+			sortable: false,
+			render: ({ entry }) => renderEvent(entry)
+		},
+		{
+			id: "outcome",
+			header: "Outcome",
+			sortable: false,
+			render: ({ entry }) => renderOutcome(entry)
+		},
+		{
+			id: "matched",
+			header: "Matched",
+			sortable: false,
+			className: TraceTable_module_default.count,
+			render: ({ entry }) => entry.kind === "mode" ? "—" : entry.matched.length
+		}
+	];
+	return /* @__PURE__ */ jsx(DataGrid, {
+		className: TraceTable_module_default.table,
+		rows,
+		columns,
+		empty,
+		rowClassName: ({ id, entry }) => id === LIVE_ID ? TraceTable_module_default.live : entry.kind === "mode" ? TraceTable_module_default.mode : entry.outcome === "unhandled" ? TraceTable_module_default.unhandled : void 0,
+		rowExpandable: ({ entry }) => entry.kind === "dispatch",
+		expandedIds: expanded,
+		onExpandedChange: setExpanded,
+		onRowClick: ({ id, entry }) => {
+			if (entry.kind !== "dispatch") return;
+			setExpanded((cur) => cur.has(id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id]));
+		},
+		renderDetail: ({ entry }) => entry.kind === "dispatch" ? /* @__PURE__ */ jsxs("div", {
+			className: TraceTable_module_default.detail,
+			children: [/* @__PURE__ */ jsx(DecisionPath, { record: entry }), /* @__PURE__ */ jsx(FallthroughDiagram, { record: entry })]
+		}) : null
+	});
+}
+var DispatchView_module_default = {
+	dispatch: "_dispatch_fdab1f",
+	toolbar: "_toolbar_fdab1f",
+	count: "_count_fdab1f _numeric_25fd0b",
+	body: "_body_fdab1f"
+};
+//#endregion
+//#region src/views/DispatchView.tsx
+/**
+* The Dispatch tab: the root's trace of resolved inputs and mode switches,
+* what a press at the pointer would do now, and, behind a toggle, the
+* `clientToWorld` conversions. Read through cursors, so each read carries only
+* what is new; polled while open, because the live prediction moves with the
+* pointer and no notice reports that.
+*/
+var POLL_MS$1 = 250;
+function DispatchView({ client, rootId }) {
+	const follower = useMemo(() => followTrace(client, rootId), [client, rootId]);
+	const [entries, setEntries] = useState([]);
+	const [coords, setCoords] = useState([]);
+	const [live, setLive] = useState(null);
+	const [now, setNow] = useState(() => Date.now());
+	const [shown, setShown] = useState(["handled"]);
+	const [showCoords, setShowCoords] = useState(false);
+	const read = () => {
+		follower.read().then((slice) => {
+			if (slice.entries.length) setEntries((prev) => [...prev, ...slice.entries].slice(-200));
+			if (slice.coords?.length) setCoords((prev) => [...prev, ...slice.coords].slice(-200));
+			setLive(slice.live);
+			setNow(Date.now());
+		}, () => {});
+	};
+	useEffect(() => client.onChanged((id, areas) => {
+		if (id === rootId && areas.includes("trace")) read();
+	}));
+	usePoll(read, POLL_MS$1, true);
+	const toggleCoords = (on) => {
+		follower.setCoords(on);
+		setShowCoords(on);
+		if (!on) setCoords([]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: DispatchView_module_default.dispatch,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: DispatchView_module_default.toolbar,
+			children: [
+				/* @__PURE__ */ jsx(ToggleBar, {
+					mode: "multiple",
+					variant: "minimal",
+					size: "sm",
+					ariaLabel: "Outcome filters",
+					items: [{
+						value: "handled",
+						label: "handled",
+						tooltip: "Show handled inputs and mode switches"
+					}, {
+						value: "unhandled",
+						label: "unhandled",
+						tooltip: "Show inputs nothing handled"
+					}],
+					value: shown,
+					onChange: (next) => setShown(next)
+				}),
+				/* @__PURE__ */ jsx(Switch, {
+					isSelected: showCoords,
+					onChange: toggleCoords,
+					children: "coords"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					disabled: entries.length === 0,
+					onClick: () => setEntries([]),
+					children: "Clear"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: DispatchView_module_default.count,
+					children: [
+						entries.length,
+						" ",
+						entries.length === 1 ? "record" : "records"
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: DispatchView_module_default.body,
+			children: [/* @__PURE__ */ jsx(TraceTable, {
+				entries,
+				live,
+				now,
+				showHandled: shown.includes("handled"),
+				showUnhandled: shown.includes("unhandled"),
+				empty: entries.length > 0 ? "Every record is hidden by the filters above." : "No input yet. Use the canvas to fill the trace."
+			}), showCoords && /* @__PURE__ */ jsx(CoordTable, {
+				entries: coords,
+				now
+			})]
+		})]
+	});
+}
+var ValueView_module_default = {
+	value: "_value_3839e5",
+	row: "_row_3839e5",
+	children: "_children_3839e5",
+	key: "_key_3839e5",
+	muted: "_muted_3839e5",
+	keyword: "_keyword_3839e5",
+	number: "_number_3839e5 _numeric_25fd0b",
+	string: "_string_3839e5",
+	fn: "_fn_3839e5",
+	tag: "_tag_3839e5"
+};
+//#endregion
+//#region src/views/ValueView.tsx
+/** A serialized value as a reader expects to see it: tagged maps, sets and typed arrays named, functions and cycles marked. */
+var isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+/** The children a container lists, or null for a value shown on one line. */
+function entriesOf(v) {
+	if (Array.isArray(v)) return v.map((x, i) => [String(i), x]);
+	if (!isObj(v)) return null;
+	if (v.$type === "Map" || v.$type === "Set") return (Array.isArray(v.entries) ? v.entries : []).map((x, i) => [String(i), x]);
+	if (typeof v.$type === "string") return null;
+	return Object.entries(v).filter(([k]) => k !== "$class");
+}
+/** What a container is called on its own row: `Array(3)`, `Map(2)`, `Path {…}`. */
+function summaryOf(v) {
+	if (Array.isArray(v)) return `Array(${v.length})`;
+	if (!isObj(v)) return "";
+	if (v.$type === "Map" || v.$type === "Set") return `${v.$type}(${String(v.size)})`;
+	const name = typeof v.$class === "string" ? v.$class : "";
+	return Object.keys(v).length === 0 ? `${name}{}` : `${name ? `${name} ` : ""}{…}`;
+}
+function Scalar({ value }) {
+	if (value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: ValueView_module_default.muted,
+		children: "undefined"
+	});
+	if (value === null) return /* @__PURE__ */ jsx("span", {
+		className: ValueView_module_default.keyword,
+		children: "null"
+	});
+	if (typeof value === "number") return /* @__PURE__ */ jsx("span", {
+		className: ValueView_module_default.number,
+		children: value
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx("span", {
+		className: ValueView_module_default.keyword,
+		children: String(value)
+	});
+	if (typeof value === "string") {
+		if (value.startsWith("ƒ ")) return /* @__PURE__ */ jsx("span", {
+			className: ValueView_module_default.fn,
+			children: value
+		});
+		if (value === "[cycle]" || value === "…" || value.startsWith("… ")) return /* @__PURE__ */ jsx("span", {
+			className: ValueView_module_default.muted,
+			children: value
+		});
+		return /* @__PURE__ */ jsx("span", {
+			className: ValueView_module_default.string,
+			children: JSON.stringify(value)
+		});
+	}
+	if (isObj(value) && value.$type === "Date") return /* @__PURE__ */ jsxs("span", {
+		className: ValueView_module_default.tag,
+		children: ["Date ", String(value.value)]
+	});
+	if (isObj(value) && typeof value.$type === "string") return /* @__PURE__ */ jsxs("span", {
+		className: ValueView_module_default.tag,
+		children: [
+			value.$type,
+			"(",
+			String(value.length),
+			")"
+		]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: ValueView_module_default.muted,
+		children: summaryOf(value)
+	});
+}
+function Entry({ name, value, depth }) {
+	const entries = entriesOf(value);
+	const [open, setOpen] = useState(depth < 2);
+	if (!entries || entries.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: ValueView_module_default.row,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: ValueView_module_default.key,
+			children: name
+		}), /* @__PURE__ */ jsx(Scalar, { value })]
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: ValueView_module_default.row,
+		children: [
+			/* @__PURE__ */ jsx(Disclosure, {
+				open,
+				onToggle: () => setOpen((o) => !o),
+				label: `${String(name)} ${summaryOf(value)}`,
+				size: 11
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: ValueView_module_default.key,
+				children: name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: ValueView_module_default.muted,
+				children: summaryOf(value)
+			})
+		]
+	}), open && /* @__PURE__ */ jsx("div", {
+		className: ValueView_module_default.children,
+		children: entries.map(([k, v]) => /* @__PURE__ */ jsx(Entry, {
+			name: k,
+			value: v,
+			depth: depth + 1
+		}, k))
+	})] });
+}
+/** `value` as nested rows, its containers folding; the top level lists its entries directly. */
+function ValueView({ value, label }) {
+	const entries = entriesOf(value);
+	return /* @__PURE__ */ jsx("div", {
+		className: ValueView_module_default.value,
+		role: "group",
+		"aria-label": label,
+		children: entries && entries.length > 0 ? entries.map(([k, v]) => /* @__PURE__ */ jsx(Entry, {
+			name: k,
+			value: v,
+			depth: 1
+		}, k)) : /* @__PURE__ */ jsx(Scalar, { value })
+	});
+}
+var FrameView_module_default = {
+	frame: "_frame_ae00c9",
+	figure: "_figure_ae00c9 _numeric_25fd0b",
+	layers: "_layers_ae00c9",
+	note: "_note_ae00c9"
+};
+//#endregion
+//#region src/views/FrameView.tsx
+/**
+* The Frame tab: what the last paint cost, overall and per render layer. The
+* canvas measures only while its `fps` overlay is on and announces nothing, so
+* this polls, and only while the tab is open and the overlay on.
+*/
+var POLL_MS = 500;
+var isFrameStats = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && typeof v.paintMs === "number" && Array.isArray(v.layers);
+var ms = (n) => n.toFixed(2).padStart(7, " ");
+var COLUMNS = [
+	{
+		id: "id",
+		header: "Layer",
+		sortable: false,
+		render: (r) => r.id
+	},
+	{
+		id: "calls",
+		header: "Draw calls",
+		sortable: false,
+		className: FrameView_module_default.figure,
+		render: (r) => r.drawCalls
+	},
+	{
+		id: "ms",
+		header: "CPU ms",
+		sortable: false,
+		className: FrameView_module_default.figure,
+		render: (r) => ms(r.ms)
+	}
+];
+function FrameView({ client, rootId }) {
+	const state = useRootQuery(client, rootId, [], () => client.request(rootId, { type: "get-state" }));
+	const fps = state.data?.overlays.fps === true;
+	const [frame, setFrame] = useState(null);
+	usePoll(() => {
+		client.request(rootId, { type: "get-frame" }).then(setFrame, () => {});
+	}, POLL_MS, fps);
+	const setFps = (on) => {
+		client.request(rootId, {
+			type: "set-overlays",
+			overlays: { fps: on }
+		}).then(state.refresh, state.refresh);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: FrameView_module_default.frame,
+		children: [/* @__PURE__ */ jsx(Switch, {
+			isSelected: fps,
+			onChange: setFps,
+			isDisabled: !state.data,
+			children: "fps overlay"
+		}), !fps ? /* @__PURE__ */ jsx("p", {
+			className: FrameView_module_default.note,
+			children: "The canvas measures its paints only while the fps overlay is on."
+		}) : isFrameStats(frame) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DetailList, {
+			layout: "inline",
+			values: "figures",
+			children: [/* @__PURE__ */ jsx(DetailRow, {
+				label: "CPU ms",
+				children: ms(frame.paintMs)
+			}), /* @__PURE__ */ jsx(DetailRow, {
+				label: "Draw calls",
+				children: frame.drawCalls
+			})]
+		}), /* @__PURE__ */ jsx(DataGrid, {
+			className: FrameView_module_default.layers,
+			rows: frame.layers.map((l) => ({ ...l })),
+			columns: COLUMNS,
+			empty: "No layers painted."
+		})] }) : frame === null ? /* @__PURE__ */ jsx("p", {
+			className: FrameView_module_default.note,
+			children: "No paint measured yet."
+		}) : /* @__PURE__ */ jsx(ValueView, {
+			value: frame,
+			label: "Frame"
+		})]
+	});
+}
+var HistoryView_module_default = {
+	history: "_history_739ab5",
+	toolbar: "_toolbar_739ab5",
+	position: "_position_739ab5 _numeric_25fd0b",
+	body: "_body_739ab5",
+	heading: "_heading_739ab5",
+	stack: "_stack_739ab5",
+	applied: "_applied_739ab5",
+	redoable: "_redoable_739ab5",
+	table: "_table_739ab5",
+	age: "_age_739ab5 _numeric_25fd0b",
+	figure: "_figure_739ab5 _numeric_25fd0b",
+	entries: "_entries_739ab5",
+	entry: "_entry_739ab5",
+	entryTitle: "_entryTitle_739ab5",
+	ops: "_ops_739ab5",
+	op: "_op_739ab5",
+	targets: "_targets_739ab5",
+	note: "_note_739ab5"
+};
+//#endregion
+//#region src/views/HistoryTable.tsx
+/** History steps as rows, newest first; a row opens to the entries it touched and each entry's ops. */
+var opCount = (step) => step.entries.reduce((n, e) => n + e.opCount, 0);
+function StepDetail({ step }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: HistoryView_module_default.entries,
+		children: step.entries.map((entry) => /* @__PURE__ */ jsxs("section", {
+			className: HistoryView_module_default.entry,
+			"aria-label": `Entry ${entry.label || entry.id}`,
+			children: [/* @__PURE__ */ jsxs("h4", {
+				className: HistoryView_module_default.entryTitle,
+				children: [entry.label || /* @__PURE__ */ jsx("span", {
+					className: HistoryView_module_default.note,
+					children: "unlabeled"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: HistoryView_module_default.figure,
+					children: [
+						entry.opCount,
+						" ",
+						entry.opCount === 1 ? "op" : "ops"
+					]
+				})]
+			}), /* @__PURE__ */ jsx("ul", {
+				className: HistoryView_module_default.ops,
+				children: entry.ops.map((op, i) => /* @__PURE__ */ jsxs("li", {
+					className: HistoryView_module_default.op,
+					children: [
+						/* @__PURE__ */ jsx(Code, {
+							size: "sm",
+							children: op.kind
+						}),
+						op.targets.length > 0 && /* @__PURE__ */ jsx("span", {
+							className: HistoryView_module_default.targets,
+							children: op.targets.join(", ")
+						}),
+						/* @__PURE__ */ jsx(ValueView, {
+							value: op.summary,
+							label: `${op.kind} arguments`
+						})
+					]
+				}, i))
+			})]
+		}, entry.id))
+	});
+}
+function HistoryTable({ steps, now }) {
+	const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const rows = steps.map((step, i) => ({
+		id: `${step.ts}-${i}`,
+		step
+	})).slice(-100).reverse();
+	const columns = [
+		{
+			id: "age",
+			header: "Age",
+			sortable: false,
+			className: HistoryView_module_default.age,
+			render: ({ step }) => formatAge(Math.max(0, now - step.ts))
+		},
+		{
+			id: "step",
+			header: "Step",
+			sortable: false,
+			render: ({ step }) => step.step
+		},
+		{
+			id: "entries",
+			header: "Entries",
+			sortable: false,
+			render: ({ step }) => step.entries.map((e) => e.label || `#${e.id}`).join(", ") || "—"
+		},
+		{
+			id: "ops",
+			header: "Ops",
+			sortable: false,
+			className: HistoryView_module_default.figure,
+			render: ({ step }) => opCount(step)
+		},
+		{
+			id: "position",
+			header: "Position",
+			sortable: false,
+			className: HistoryView_module_default.figure,
+			render: ({ step }) => `${step.position.index} / ${step.position.total}`
+		}
+	];
+	return /* @__PURE__ */ jsx(DataGrid, {
+		className: HistoryView_module_default.table,
+		rows,
+		columns,
+		empty: "No history steps yet. Edit the scene to fill the log.",
+		rowExpandable: ({ step }) => step.entries.length > 0,
+		expandedIds: expanded,
+		onExpandedChange: setExpanded,
+		onRowClick: ({ id }) => setExpanded((cur) => cur.has(id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id])),
+		renderDetail: ({ step }) => /* @__PURE__ */ jsx(StepDetail, { step })
+	});
+}
+//#endregion
+//#region src/views/HistoryView.tsx
+/**
+* The History tab: each step the scene's history took, newest first, read
+* through its cursor whenever a notice reports one; where the history stands;
+* and, on request, every entry on its stacks.
+*/
+function HistoryView({ client, rootId }) {
+	const follower = useMemo(() => followHistory(client, rootId), [client, rootId]);
+	const [steps, setSteps] = useState([]);
+	const [position, setPosition] = useState(null);
+	const [checkpoints, setCheckpoints] = useState(null);
+	const [showStack, setShowStack] = useState(false);
+	const [error, setError] = useState(null);
+	const [now, setNow] = useState(() => Date.now());
+	useEffect(() => {
+		let live = true;
+		const read = () => {
+			follower.read().then((slice) => {
+				if (!live) return;
+				if (slice.entries.length) setSteps((prev) => [...prev, ...slice.entries].slice(-200));
+				setPosition(slice.position);
+				setCheckpoints(slice.checkpoints ?? null);
+				setNow(Date.now());
+				setError(null);
+			}, (err) => {
+				if (live) setError(err.message);
+			});
+		};
+		read();
+		const off = client.onChanged((id, areas) => {
+			if (id === rootId && areas.includes("history")) read();
+		});
+		return () => {
+			live = false;
+			off();
+		};
+	}, [
+		client,
+		rootId,
+		follower,
+		showStack
+	]);
+	const toggleStack = (on) => {
+		follower.setCheckpoints(on);
+		setShowStack(on);
+	};
+	if (error) return /* @__PURE__ */ jsx("p", {
+		className: HistoryView_module_default.note,
+		children: error
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: HistoryView_module_default.history,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: HistoryView_module_default.toolbar,
+			children: [
+				/* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					variant: "subtle",
+					status: position?.canUndo ? "accent" : "muted",
+					children: position?.canUndo ? "can undo" : "nothing to undo"
+				}),
+				/* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					variant: "subtle",
+					status: position?.canRedo ? "accent" : "muted",
+					children: position?.canRedo ? "can redo" : "nothing to redo"
+				}),
+				/* @__PURE__ */ jsx(Switch, {
+					isSelected: showStack,
+					onChange: toggleStack,
+					children: "checkpoints"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					disabled: steps.length === 0,
+					onClick: () => setSteps([]),
+					children: "Clear"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: HistoryView_module_default.position,
+					role: "status",
+					"aria-label": "Position",
+					title: "entries applied / entries in all",
+					children: position ? `${position.index} / ${position.total}` : ""
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: HistoryView_module_default.body,
+			children: [showStack && checkpoints && /* @__PURE__ */ jsxs("section", {
+				"aria-label": "Checkpoint stack",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: HistoryView_module_default.heading,
+					children: "Checkpoints"
+				}), checkpoints.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: HistoryView_module_default.note,
+					children: "The stacks are empty."
+				}) : /* @__PURE__ */ jsx("ol", {
+					className: HistoryView_module_default.stack,
+					"aria-label": "Checkpoints",
+					children: checkpoints.map((c, i) => /* @__PURE__ */ jsx("li", {
+						className: position && i < position.index ? HistoryView_module_default.applied : HistoryView_module_default.redoable,
+						children: c.label || c.id
+					}, c.id))
+				})]
+			}), /* @__PURE__ */ jsx(HistoryTable, {
+				steps,
+				now
+			})]
+		})]
+	});
+}
+var RegistryView_module_default = {
+	split: "_split_9c8486",
+	listPane: "_listPane_9c8486",
+	detailPane: "_detailPane_9c8486",
+	count: "_count_9c8486 _numeric_25fd0b",
+	facts: "_facts_9c8486",
+	detail: "_detail_9c8486",
+	section: "_section_9c8486",
+	title: "_title_9c8486",
+	heading: "_heading_9c8486",
+	codes: "_codes_9c8486",
+	bindings: "_bindings_9c8486",
+	binding: "_binding_9c8486",
+	routes: "_routes_9c8486",
+	arrow: "_arrow_9c8486",
+	kinds: "_kinds_9c8486",
+	note: "_note_9c8486"
+};
+//#endregion
+//#region src/views/Bindings.tsx
+var hasOpts = (b) => typeof b.opts === "object" && b.opts !== null && Object.keys(b.opts).length > 0;
+function Bindings({ bindings }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: RegistryView_module_default.section,
+		"aria-label": "Bindings",
+		children: [/* @__PURE__ */ jsxs("h3", {
+			className: RegistryView_module_default.heading,
+			children: ["Bindings ", /* @__PURE__ */ jsx("span", {
+				className: RegistryView_module_default.count,
+				children: bindings.length
+			})]
+		}), bindings.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: RegistryView_module_default.note,
+			children: "None."
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: RegistryView_module_default.bindings,
+			children: bindings.map((b, i) => /* @__PURE__ */ jsxs("li", {
+				className: RegistryView_module_default.binding,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: RegistryView_module_default.routes,
+						children: b.routes.length > 0 ? b.routes.map((r) => /* @__PURE__ */ jsx(GestureRoute, {
+							route: r,
+							size: "sm"
+						}, r)) : /* @__PURE__ */ jsx(ValueView, {
+							value: b.spec,
+							label: "Spec"
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: RegistryView_module_default.arrow,
+						"aria-hidden": true,
+						children: "→"
+					}),
+					/* @__PURE__ */ jsx(Code, {
+						size: "sm",
+						children: b.actionId
+					}),
+					hasOpts(b) && /* @__PURE__ */ jsx(ValueView, {
+						value: b.opts,
+						label: `Options for ${b.actionId}`
+					})
+				]
+			}, i))
+		})]
+	});
+}
+//#endregion
+//#region src/views/RegistryEntryDetail.tsx
+var yesNo$1 = (v) => v ? "yes" : "no";
+var codes = (ids) => ids.length ? /* @__PURE__ */ jsx("span", {
+	className: RegistryView_module_default.codes,
+	children: ids.map((id) => /* @__PURE__ */ jsx(Code, {
+		size: "sm",
+		children: id
+	}, id))
+}) : null;
+function ToolDetail({ tool }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: RegistryView_module_default.detail,
+		"aria-label": `Tool ${tool.id}`,
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: RegistryView_module_default.title,
+				children: /* @__PURE__ */ jsx(Code, {
+					size: "sm",
+					children: tool.id
+				})
+			}),
+			/* @__PURE__ */ jsxs(DetailList, {
+				layout: "inline",
+				children: [
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Slot",
+						children: tool.slot
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Label",
+						children: tool.label
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Group",
+						children: tool.group
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Icon",
+						children: tool.icon
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Shortcut",
+						children: tool.shortcut
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Hotkey",
+						children: tool.hotkey
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Hidden",
+						children: yesNo$1(tool.hidden)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Overlay",
+						children: yesNo$1(tool.hasOverlay)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Actions",
+						children: codes(tool.actions)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Deps",
+						children: codes(tool.deps)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Bindings, { bindings: tool.bindings }),
+			/* @__PURE__ */ jsx("h3", {
+				className: RegistryView_module_default.heading,
+				children: "Cursor"
+			}),
+			/* @__PURE__ */ jsx(ValueView, {
+				value: tool.cursor,
+				label: "Cursor"
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: RegistryView_module_default.heading,
+				children: "Eligibility"
+			}),
+			/* @__PURE__ */ jsx(ValueView, {
+				value: tool.eligibility,
+				label: "Eligibility"
+			})
+		]
+	});
+}
+function ActionDetail({ action }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: RegistryView_module_default.detail,
+		"aria-label": `Action ${action.id}`,
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: RegistryView_module_default.title,
+				children: /* @__PURE__ */ jsx(Code, {
+					size: "sm",
+					children: action.id
+				})
+			}),
+			/* @__PURE__ */ jsxs(DetailList, {
+				layout: "inline",
+				children: [
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Label",
+						children: action.label
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Enabled",
+						status: action.enabled === true ? "success" : "warn",
+						children: action.enabled === true ? "yes" : action.enabled
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Active",
+						children: action.active === null ? "no pressed state" : yesNo$1(action.active)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Scope",
+						children: action.scope
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Invoker",
+						children: action.invoker
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Group",
+						children: action.group
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Tags",
+						children: codes(action.tags)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Shortcut",
+						children: action.shortcut
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Requires",
+						children: codes(action.requires)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Preview",
+						children: yesNo$1(action.hasPreview)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Variants",
+						children: codes(action.variants.map((v) => v.key))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Bindings, { bindings: action.bindings }),
+			/* @__PURE__ */ jsx("h3", {
+				className: RegistryView_module_default.heading,
+				children: "Eligible"
+			}),
+			action.eligible === null ? /* @__PURE__ */ jsx("p", {
+				className: RegistryView_module_default.note,
+				children: "Always."
+			}) : /* @__PURE__ */ jsx(ValueView, {
+				value: action.eligible,
+				label: "Eligible"
+			})
+		]
+	});
+}
+function DepDetail({ dep, users }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: RegistryView_module_default.detail,
+		"aria-label": `Dep ${dep.name}`,
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: RegistryView_module_default.title,
+			children: /* @__PURE__ */ jsx(Code, {
+				size: "sm",
+				children: dep.name
+			})
+		}), /* @__PURE__ */ jsxs(DetailList, {
+			layout: "inline",
+			children: [
+				/* @__PURE__ */ jsx(DetailRow, {
+					label: "Scope",
+					children: dep.depth === 0 ? "this canvas" : `${dep.depth} above`
+				}),
+				/* @__PURE__ */ jsx(DetailRow, {
+					label: "Stacked",
+					children: dep.stacked
+				}),
+				/* @__PURE__ */ jsx(DetailRow, {
+					label: "Required by",
+					children: codes(users)
+				})
+			]
+		})]
+	});
+}
+function RegistryEntryDetail({ registry, pick }) {
+	if (pick.category === "tools") {
+		const tool = registry.tools.find((t) => t.id === pick.id);
+		if (tool) return /* @__PURE__ */ jsx(ToolDetail, { tool });
+	} else if (pick.category === "actions") {
+		const action = registry.actions.find((a) => a.id === pick.id);
+		if (action) return /* @__PURE__ */ jsx(ActionDetail, { action });
+	} else {
+		const dep = registry.deps.find((d) => d.name === pick.id);
+		const users = registry.actions.filter((a) => a.requires.includes(pick.id)).map((a) => a.id);
+		if (dep) return /* @__PURE__ */ jsx(DepDetail, {
+			dep,
+			users
+		});
+	}
+	return /* @__PURE__ */ jsxs("p", {
+		className: RegistryView_module_default.note,
+		children: [pick.id, " is no longer registered."]
+	});
+}
+//#endregion
+//#region src/views/RegistryView.tsx
+/**
+* The Registry tab: what the canvas has registered, filtered by name, beside
+* the entry picked. Re-read when the registry changes, and on selection and
+* scene changes too, since an action's `enabled` and `active` move with them
+* and no notice reports that.
+*/
+var CATEGORIES = [
+	"tools",
+	"actions",
+	"deps"
+];
+var TITLES = {
+	tools: "Tools",
+	actions: "Actions",
+	deps: "Deps"
+};
+function rowsOf(reg, category) {
+	switch (category) {
+		case "tools": return reg.tools.map((t) => ({
+			id: t.id,
+			facts: t.slot
+		}));
+		case "actions": return reg.actions.map((a) => ({
+			id: a.id,
+			facts: [
+				a.scope,
+				a.enabled === true ? "" : "disabled",
+				a.active ? "active" : ""
+			].filter(Boolean).join(" ")
+		}));
+		case "deps": return reg.deps.map((d) => ({
+			id: d.name,
+			facts: d.depth === 0 ? "" : `+${d.depth}`
+		}));
+	}
+}
+function nodesOf(reg, filter) {
+	const q = filter.trim().toLowerCase();
+	return CATEGORIES.map((category) => {
+		const rows = rowsOf(reg, category).filter((r) => !q || r.id.toLowerCase().includes(q));
+		return {
+			id: `cat:${category}`,
+			label: TITLES[category],
+			trailing: /* @__PURE__ */ jsx("span", {
+				className: RegistryView_module_default.count,
+				children: rows.length
+			}),
+			children: rows.map((r) => ({
+				id: `${category}:${r.id}`,
+				textValue: r.id,
+				label: r.id,
+				...r.facts ? { trailing: /* @__PURE__ */ jsx("span", {
+					className: RegistryView_module_default.facts,
+					children: r.facts
+				}) } : {}
+			}))
+		};
+	});
+}
+function parsePick(key) {
+	if (!key || key.startsWith("cat:")) return null;
+	const at = key.indexOf(":");
+	return {
+		category: key.slice(0, at),
+		id: key.slice(at + 1)
+	};
+}
+function RegistryView({ client, rootId }) {
+	const registry = useRootQuery(client, rootId, [
+		"registry",
+		"selection",
+		"scene"
+	], () => client.request(rootId, { type: "get-registry" }));
+	const [filter, setFilter] = useState("");
+	const [picked, setPicked] = useState(null);
+	const [expanded, setExpanded] = useState(() => new Set(CATEGORIES.map((c) => `cat:${c}`)));
+	if (registry.error) return /* @__PURE__ */ jsx("p", {
+		className: RegistryView_module_default.note,
+		children: registry.error
+	});
+	const reg = registry.data;
+	if (!reg) return /* @__PURE__ */ jsx("p", {
+		className: RegistryView_module_default.note,
+		children: "Loading…"
+	});
+	const pick = parsePick(picked);
+	return /* @__PURE__ */ jsxs("div", {
+		className: RegistryView_module_default.split,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: RegistryView_module_default.listPane,
+			"data-pane": "list",
+			children: [/* @__PURE__ */ jsx(Input, {
+				"aria-label": "Filter",
+				placeholder: "Filter by name",
+				value: filter,
+				onChange: setFilter
+			}), /* @__PURE__ */ jsx(Tree, {
+				"aria-label": "Registry entries",
+				nodes: nodesOf(reg, filter),
+				expandedIds: expanded,
+				onExpandedChange: setExpanded,
+				selectionMode: "single",
+				selectedIds: picked ? [picked] : [],
+				onSelectionChange: (ids) => setPicked(ids.values().next().value ?? null)
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: RegistryView_module_default.detailPane,
+			"data-pane": "detail",
+			children: [pick ? /* @__PURE__ */ jsx(RegistryEntryDetail, {
+				registry: reg,
+				pick
+			}) : /* @__PURE__ */ jsx("p", {
+				className: RegistryView_module_default.note,
+				children: "Pick an entry to see its bindings."
+			}), reg.routingKinds.length > 0 && /* @__PURE__ */ jsxs("p", {
+				className: RegistryView_module_default.kinds,
+				children: ["Routing kinds: ", reg.routingKinds.join(", ")]
+			})]
+		})]
+	});
+}
+var SceneView_module_default = {
+	split: "_split_9a17db",
+	treePane: "_treePane_9a17db",
+	detailPane: "_detailPane_9a17db",
+	facts: "_facts_9a17db",
+	kind: "_kind_9a17db",
+	layer: "_layer_9a17db",
+	count: "_count_9a17db _numeric_25fd0b",
+	flag: "_flag_9a17db",
+	detail: "_detail_9a17db",
+	detailHead: "_detailHead_9a17db",
+	heading: "_heading_9a17db",
+	note: "_note_9a17db"
+};
+//#endregion
+//#region src/views/NodeDetail.tsx
+var yesNo = (v) => v ? "yes" : "no";
+function NodeDetail({ client, rootId, nodeId, onPick }) {
+	const node = useRootQuery(client, rootId, ["scene"], () => client.request(rootId, {
+		type: "get-node",
+		nodeId
+	}));
+	if (node.error) return /* @__PURE__ */ jsx("p", {
+		className: SceneView_module_default.note,
+		children: node.error
+	});
+	const d = node.data;
+	if (!d) return /* @__PURE__ */ jsx("p", {
+		className: SceneView_module_default.note,
+		children: "Loading…"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: SceneView_module_default.detail,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: SceneView_module_default.detailHead,
+				children: [/* @__PURE__ */ jsx(Code, {
+					size: "sm",
+					children: d.id
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "secondary",
+					onClick: () => {
+						client.request(rootId, {
+							type: "select",
+							ids: [d.id]
+						}).catch(() => {});
+					},
+					children: "Select on canvas"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(DetailList, {
+				layout: "inline",
+				children: [
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Kind",
+						children: d.kind
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Layer",
+						children: d.layer
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Parent",
+						children: d.parent && /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "link",
+							onClick: () => onPick(d.parent),
+							ariaLabel: `Show parent ${d.parent}`,
+							children: d.parent
+						})
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Children",
+						children: d.childCount
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Hidden",
+						children: yesNo(d.hidden)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Locked",
+						children: yesNo(d.locked)
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Pickable",
+						children: yesNo(d.pickable)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: SceneView_module_default.heading,
+				children: "Pose"
+			}),
+			/* @__PURE__ */ jsx(ValueView, {
+				value: d.pose,
+				label: "Pose"
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: SceneView_module_default.heading,
+				children: "Data"
+			}),
+			/* @__PURE__ */ jsx(ValueView, {
+				value: d.data,
+				label: "Data"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/views/useSceneTree.ts
+/** A root's scene tree, loaded a level at a time as branches open, and reloaded where it is open when the scene changes. */
+/** The key the top level is held under. */
+var TOP = "";
+function useSceneTree(client, rootId) {
+	const [levels, setLevels] = useState(/* @__PURE__ */ new Map());
+	const [expanded, setExpandedState] = useState(/* @__PURE__ */ new Set());
+	const [error, setError] = useState(null);
+	const expandedRef = useLatest(expanded);
+	const alive = useRef(true);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const load = useCallback((parent) => {
+		const body = parent === TOP ? { type: "get-children" } : {
+			type: "get-children",
+			nodeId: parent
+		};
+		client.request(rootId, body).then((rows) => {
+			if (!alive.current) return;
+			setLevels((prev) => new Map(prev).set(parent, rows));
+			if (parent === TOP) setError(null);
+		}, (err) => {
+			if (!alive.current) return;
+			if (parent === TOP) setError(err.message);
+			setLevels((prev) => {
+				const next = new Map(prev);
+				next.delete(parent);
+				return next;
+			});
+		});
+	}, [client, rootId]);
+	useEffect(() => {
+		load(TOP);
+		return client.onChanged((id, areas) => {
+			if (id !== rootId || !areas.includes("scene")) return;
+			load(TOP);
+			for (const open of expandedRef.current) load(open);
+		});
+	}, [
+		client,
+		rootId,
+		load,
+		expandedRef
+	]);
+	return {
+		levels,
+		expanded,
+		setExpanded: useCallback((ids) => {
+			for (const id of ids) if (!expandedRef.current.has(id)) load(id);
+			setExpandedState(ids);
+		}, [load, expandedRef]),
+		error
+	};
+}
+//#endregion
+//#region src/views/SceneView.tsx
+/** The Scene tab: a root's node tree beside the node picked in it. */
+function flags$1(row) {
+	return [
+		row.hidden && "hidden",
+		row.locked && "locked",
+		!row.pickable && "unpickable"
+	].filter((f) => typeof f === "string");
+}
+function RowFacts({ row }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: SceneView_module_default.facts,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: SceneView_module_default.kind,
+				children: row.kind
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: SceneView_module_default.layer,
+				children: row.layer
+			}),
+			row.kind === "container" && /* @__PURE__ */ jsx("span", {
+				className: SceneView_module_default.count,
+				children: row.childCount
+			}),
+			flags$1(row).map((f) => /* @__PURE__ */ jsx("span", {
+				className: SceneView_module_default.flag,
+				children: f
+			}, f))
+		]
+	});
+}
+function toNodes(levels, parent) {
+	return (levels.get(parent) ?? []).map((row) => ({
+		id: row.id,
+		textValue: row.id,
+		label: /* @__PURE__ */ jsx("span", {
+			"data-node-id": row.id,
+			children: row.id
+		}),
+		trailing: /* @__PURE__ */ jsx(RowFacts, { row }),
+		muted: row.hidden,
+		...row.kind === "container" && row.childCount > 0 ? { children: toNodes(levels, row.id) } : {}
+	}));
+}
+function SceneView({ client, rootId }) {
+	const tree = useSceneTree(client, rootId);
+	const [selected, setSelected] = useState(null);
+	const hovered = useRef(null);
+	const highlight = (id) => {
+		if (hovered.current === id) return;
+		hovered.current = id;
+		client.request(rootId, {
+			type: "highlight",
+			ids: id ? [id] : []
+		}).catch(() => {});
+	};
+	const onPointerOver = (e) => {
+		const row = e.target.closest("[role=\"treeitem\"]");
+		highlight(row?.querySelector("[data-node-id]")?.getAttribute("data-node-id") ?? null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: SceneView_module_default.split,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: SceneView_module_default.treePane,
+			"data-pane": "tree",
+			onPointerOver,
+			onPointerLeave: () => highlight(null),
+			children: /* @__PURE__ */ jsx(Tree, {
+				"aria-label": "Scene nodes",
+				nodes: toNodes(tree.levels, ""),
+				empty: /* @__PURE__ */ jsx("p", {
+					className: SceneView_module_default.note,
+					children: tree.error ?? "The scene is empty."
+				}),
+				expandedIds: tree.expanded,
+				onExpandedChange: tree.setExpanded,
+				selectionMode: "single",
+				selectedIds: selected ? [selected] : [],
+				onSelectionChange: (ids) => setSelected(ids.values().next().value ?? null)
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: SceneView_module_default.detailPane,
+			"data-pane": "detail",
+			children: selected ? /* @__PURE__ */ jsx(NodeDetail, {
+				client,
+				rootId,
+				nodeId: selected,
+				onPick: setSelected
+			}, selected) : /* @__PURE__ */ jsx("p", {
+				className: SceneView_module_default.note,
+				children: "Pick a node to see its pose and data."
+			})
+		})]
+	});
+}
+var StateView_module_default = {
+	state: "_state_5edec5",
+	section: "_section_5edec5",
+	heading: "_heading_5edec5",
+	count: "_count_5edec5 _numeric_25fd0b",
+	ids: "_ids_5edec5",
+	flags: "_flags_5edec5",
+	probe: "_probe_5edec5",
+	note: "_note_5edec5"
+};
+//#endregion
+//#region src/views/StateView.tsx
+/** The tool picker's value for "no tool": a select key cannot be null. */
+var NO_TOOL = "\0none";
+function StateView({ client, rootId }) {
+	const state = useRootQuery(client, rootId, [
+		"selection",
+		"view",
+		"tool"
+	], () => client.request(rootId, { type: "get-state" }));
+	if (state.error) return /* @__PURE__ */ jsx("p", {
+		className: StateView_module_default.note,
+		children: state.error
+	});
+	const st = state.data;
+	if (!st) return /* @__PURE__ */ jsx("p", {
+		className: StateView_module_default.note,
+		children: "Loading…"
+	});
+	const steer = (p) => {
+		p.then(state.refresh, state.refresh);
+	};
+	const probes = Object.entries(st.probes);
+	return /* @__PURE__ */ jsxs("div", {
+		className: StateView_module_default.state,
+		children: [
+			/* @__PURE__ */ jsxs("section", {
+				className: StateView_module_default.section,
+				"aria-label": "Selection",
+				children: [/* @__PURE__ */ jsxs("h3", {
+					className: StateView_module_default.heading,
+					children: ["Selection ", /* @__PURE__ */ jsx("span", {
+						className: StateView_module_default.count,
+						children: st.selection.length
+					})]
+				}), st.selection.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: StateView_module_default.note,
+					children: "Nothing selected."
+				}) : /* @__PURE__ */ jsx("div", {
+					className: StateView_module_default.ids,
+					children: st.selection.map((id) => /* @__PURE__ */ jsx(Code, {
+						size: "sm",
+						children: id
+					}, id))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: StateView_module_default.section,
+				"aria-label": "Tool",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: StateView_module_default.heading,
+					children: "Tool"
+				}), /* @__PURE__ */ jsx(Select, {
+					"aria-label": "Active tool",
+					width: "fit",
+					selectedKey: st.activeTool ?? NO_TOOL,
+					onSelectionChange: (key) => {
+						steer(client.request(rootId, {
+							type: "set-tool",
+							toolId: key === NO_TOOL ? null : key
+						}));
+					},
+					options: [{
+						value: NO_TOOL,
+						label: "none"
+					}, ...st.tools.map((t) => ({
+						value: t,
+						label: t
+					}))]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: StateView_module_default.section,
+				"aria-label": "Overlays",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: StateView_module_default.heading,
+					children: "Overlays"
+				}), /* @__PURE__ */ jsx("div", {
+					className: StateView_module_default.flags,
+					children: DEBUG_FEATURES.map((flag) => /* @__PURE__ */ jsx(Switch, {
+						isSelected: st.overlays[flag] === true,
+						onChange: (on) => steer(client.request(rootId, {
+							type: "set-overlays",
+							overlays: { [flag]: on }
+						})),
+						children: flag
+					}, flag))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: StateView_module_default.section,
+				"aria-label": "View",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: StateView_module_default.heading,
+					children: "View"
+				}), /* @__PURE__ */ jsx(ValueView, {
+					value: st.view,
+					label: "View"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: StateView_module_default.section,
+				"aria-label": "Probes",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: StateView_module_default.heading,
+					children: "Probes"
+				}), probes.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: StateView_module_default.note,
+					children: "No probes registered."
+				}) : probes.map(([name, value]) => /* @__PURE__ */ jsxs("div", {
+					className: StateView_module_default.probe,
+					children: [/* @__PURE__ */ jsx(Code, {
+						size: "sm",
+						children: name
+					}), /* @__PURE__ */ jsx(ValueView, {
+						value,
+						label: name
+					})]
+				}, name))]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/tabs.ts
+var DEVTOOLS_TABS = [
+	{
+		id: "scene",
+		label: "Scene",
+		View: SceneView
+	},
+	{
+		id: "state",
+		label: "State",
+		View: StateView
+	},
+	{
+		id: "registry",
+		label: "Registry",
+		View: RegistryView
+	},
+	{
+		id: "dispatch",
+		label: "Dispatch",
+		View: DispatchView
+	},
+	{
+		id: "history",
+		label: "History",
+		View: HistoryView
+	},
+	{
+		id: "frame",
+		label: "Frame",
+		View: FrameView
+	}
+];
+//#endregion
+//#region src/DevtoolsPanel.tsx
+/**
+* Reads and steers the canvases of the page `transport` reaches: pick a canvas,
+* then walk its scene, read its state, follow its dispatch trace, or watch its
+* frame stats. It fills its container; give that a size.
+*/
+function DevtoolsPanel({ transport, tabs, defaultTab, className }) {
+	const { client, state } = useDevtoolsClient(transport);
+	const shown = tabs ? DEVTOOLS_TABS.filter((t) => tabs.includes(t.id)) : DEVTOOLS_TABS;
+	const [tab, setTab] = useState(defaultTab ?? shown[0]?.id ?? "scene");
+	const [picked, setPicked] = useState(null);
+	const rootId = state.roots.some((r) => r.id === picked) ? picked : state.roots[0]?.id ?? null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: [DevtoolsPanel_module_default.panel, className].filter(Boolean).join(" "),
+		"aria-label": "Devtools",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: DevtoolsPanel_module_default.bar,
+			children: [/* @__PURE__ */ jsx(RootPicker, {
+				roots: state.roots,
+				value: rootId,
+				onChange: setPicked
+			}), /* @__PURE__ */ jsx("span", {
+				className: DevtoolsPanel_module_default.status,
+				children: statusText(state.status, state.kitVersion, state.error)
+			})]
+		}), rootId && shown.length === 1 ? /* @__PURE__ */ jsx("div", {
+			className: DevtoolsPanel_module_default.tabPanel,
+			children: renderView(shown[0].View, client, rootId)
+		}) : rootId ? /* @__PURE__ */ jsxs(Tabs, {
+			className: DevtoolsPanel_module_default.tabs,
+			selectedKey: tab,
+			onSelectionChange: (k) => setTab(k),
+			children: [/* @__PURE__ */ jsx(TabList, {
+				"aria-label": "Devtools areas",
+				className: DevtoolsPanel_module_default.tabList,
+				children: shown.map((t) => /* @__PURE__ */ jsx(Tab, {
+					id: t.id,
+					children: t.label
+				}, t.id))
+			}), shown.map(({ id, View }) => /* @__PURE__ */ jsx(TabPanel, {
+				id,
+				className: DevtoolsPanel_module_default.tabPanel,
+				children: renderView(View, client, rootId)
+			}, id))]
+		}) : /* @__PURE__ */ jsx("p", {
+			className: DevtoolsPanel_module_default.empty,
+			children: state.status === "connected" ? "No canvas on this page." : "Connecting…"
+		})]
+	});
+}
+/** A view keyed by its root, so picking another canvas starts it fresh. */
+function renderView(View, client, rootId) {
+	return /* @__PURE__ */ jsx(View, {
+		client,
+		rootId
+	}, rootId);
+}
+function statusText(status, kitVersion, error) {
+	if (status === "error") return error ?? "error";
+	if (status === "connected") return `weasel ${kitVersion ?? ""}`;
+	return status;
+}
+//#endregion
+//#region src/inPageTransport.ts
+/**
+* A panel's end of a connection to this page's own hook. Each `yo` opens a
+* fresh session and each `bye` ends it, the way a `yo` posted to the window
+* does, so a panel that unmounts and mounts again reconnects. Installs the
+* hook when the page has none.
+*/
+function createInPagePanelTransport(hook = installDevtoolsHook()) {
+	const { page, panel } = createInPageTransports();
+	let close = null;
+	return {
+		send(message) {
+			if (message.type === "yo" && hook) {
+				close?.();
+				close = hook.connect(page);
+			}
+			panel.send(message);
+			if (message.type === "bye") {
+				close?.();
+				close = null;
+			}
+		},
+		onMessage: (listener) => panel.onMessage(listener)
+	};
+}
+//#endregion
+export { DevtoolsPanel, connectDevtools, createDevtoolsClient, createInPagePanelTransport, followHistory, followTrace };
+
+//# sourceMappingURL=index.js.map