@nice-code/state 0.10.0 → 0.12.0

package/build/devtools/browser/index.cjs

@@ -0,0 +1,2792 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+//#region src/devtools/core/StateDevtoolsCore.ts
+/**
+* Framework-agnostic collector for nice-state stores.
+*
+* Register any {@link Store} and the core hooks its patch + update streams,
+* pairing the two so each committed mutation becomes a single
+* {@link IDevtoolsStateChange} with patches and full before/after snapshots.
+* The browser panel ({@link NiceStateDevtools}) renders whatever this exposes.
+*
+* Registering a store attaches a patch listener, which makes Immer compute
+* patches for that store's updates — a negligible dev-time cost. Keep this out
+* of production bundles (the panel is dev-gated, but the core is not).
+*/
+var StateDevtoolsCore = class {
+	_stores = /* @__PURE__ */ new Map();
+	_changes = [];
+	_listeners = /* @__PURE__ */ new Set();
+	_maxChanges;
+	_paused = false;
+	_cuidCounter = 0;
+	_sourceOverride = null;
+	constructor(options = {}) {
+		this._maxChanges = options.maxChanges ?? 250;
+	}
+	/**
+	* Start observing a store under a human-readable label. Returns an
+	* unregister function. If the label collides with an existing store, a numeric
+	* suffix is appended to keep ids unique.
+	*/
+	registerStore(label, store) {
+		const id = this._uniqueId(label);
+		let lastSnapshot = store.getRawState();
+		let pendingPatches = [];
+		let pendingInverse = [];
+		const unsubPatches = store.listenToPatches((patches, inverse) => {
+			for (const p of patches) pendingPatches.push(p);
+			for (const p of inverse) pendingInverse.push(p);
+		});
+		const unsubUpdate = store.subscribe(() => {
+			const snapshot = store.getRawState();
+			const patches = pendingPatches;
+			const inverse = pendingInverse;
+			pendingPatches = [];
+			pendingInverse = [];
+			const reg = this._stores.get(id);
+			if (reg != null) reg.currentState = snapshot;
+			const source = this._sourceOverride ?? (patches.length > 0 ? "update" : "replace");
+			const prevSnapshot = lastSnapshot;
+			lastSnapshot = snapshot;
+			if (this._paused) {
+				this._notify();
+				return;
+			}
+			this._recordChange(id, {
+				cuid: `chg_${++this._cuidCounter}`,
+				storeId: id,
+				storeLabel: label,
+				timestamp: Date.now(),
+				patches,
+				inversePatches: inverse,
+				prevSnapshot,
+				snapshot,
+				source
+			});
+		});
+		this._stores.set(id, {
+			id,
+			label,
+			store,
+			currentState: lastSnapshot,
+			changeCount: 0,
+			unsubscribe: () => {
+				unsubPatches();
+				unsubUpdate();
+			}
+		});
+		this._notify();
+		return () => this.unregisterStore(id);
+	}
+	unregisterStore(id) {
+		const reg = this._stores.get(id);
+		if (reg == null) return;
+		reg.unsubscribe();
+		this._stores.delete(id);
+		this._changes = this._changes.filter((c) => c.storeId !== id);
+		this._notify();
+	}
+	/**
+	* Replace a registered store's state wholesale — the primary "edit directly
+	* for testing" entry point. The resulting change is tagged `devtools-edit`.
+	*/
+	applyEdit(storeId, newState) {
+		const reg = this._stores.get(storeId);
+		if (reg == null) return;
+		this._sourceOverride = "devtools-edit";
+		try {
+			reg.store.replace(newState);
+		} finally {
+			this._sourceOverride = null;
+		}
+	}
+	/**
+	* Undo a change by applying its inverse patches. Cleanest for the most recent
+	* change of a store; older reverts may not apply if later changes touched the
+	* same paths. The resulting change is tagged `devtools-revert`.
+	*/
+	revertChange(change) {
+		const reg = this._stores.get(change.storeId);
+		if (reg == null || change.inversePatches.length === 0) return;
+		this._sourceOverride = "devtools-revert";
+		try {
+			reg.store.applyPatches(change.inversePatches);
+		} finally {
+			this._sourceOverride = null;
+		}
+	}
+	setPaused(paused) {
+		if (this._paused === paused) return;
+		this._paused = paused;
+		this._notify();
+	}
+	togglePaused() {
+		this.setPaused(!this._paused);
+	}
+	/** Drop the recorded timeline; registered stores and their state remain. */
+	clear() {
+		this._changes = [];
+		for (const reg of this._stores.values()) {
+			reg.changeCount = 0;
+			reg.lastChangeTime = void 0;
+		}
+		this._notify();
+	}
+	getSnapshot() {
+		return this._buildSnapshot();
+	}
+	subscribe(listener) {
+		this._listeners.add(listener);
+		listener(this._buildSnapshot());
+		return () => {
+			this._listeners.delete(listener);
+		};
+	}
+	_recordChange(id, change) {
+		const reg = this._stores.get(id);
+		if (reg != null) {
+			reg.changeCount += 1;
+			reg.lastChangeTime = change.timestamp;
+		}
+		this._changes = [change, ...this._changes];
+		if (this._changes.length > this._maxChanges) this._changes.length = this._maxChanges;
+		this._notify();
+	}
+	_uniqueId(label) {
+		if (!this._stores.has(label)) return label;
+		let n = 2;
+		while (this._stores.has(`${label} (${n})`)) n += 1;
+		return `${label} (${n})`;
+	}
+	_buildSnapshot() {
+		const stores = [];
+		for (const reg of this._stores.values()) stores.push({
+			id: reg.id,
+			label: reg.label,
+			currentState: reg.currentState,
+			changeCount: reg.changeCount,
+			lastChangeTime: reg.lastChangeTime
+		});
+		return {
+			stores,
+			changes: this._changes,
+			paused: this._paused
+		};
+	}
+	_notify() {
+		const snapshot = this._buildSnapshot();
+		for (const listener of this._listeners) listener(snapshot);
+	}
+};
+//#endregion
+//#region ../nice-devtools-shared/src/colors.ts
+const DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
+const DEVTOOL_COLOR_SEMANTIC_SUCCESS = "#A3E635";
+const DEVTOOL_COLOR_SEMANTIC_SYSTEM = "#38BDF8";
+const DEVTOOL_COLOR_SEMANTIC_WARNING = "#FB923C";
+const DEVTOOL_COLOR_SEMANTIC_METADATA = "#A1A1AA";
+const DEVTOOL_COLOR_TEXT_EMPHASIS = "#f1f5f9";
+const DEVTOOL_COLOR_TEXT_SECONDARY = "#cbd5e1";
+const DEVTOOL_COLOR_TEXT_MUTED = "#64748b";
+const DEVTOOL_COLOR_TEXT_FAINT = "#334155";
+const DEVTOOL_LIST_BASE_BACKGROUND = "#0f172a";
+const DEVTOOL_LIST_SELECTED_BACKGROUND = "#1d2942";
+const DEVTOOL_DETAIL_BASE_BACKGROUND = "#0d1729";
+const DEVTOOL_DETAIL_HEADER_BACKGROUND = "#131f35";
+const DEVTOOL_SECTION_BACKGROUND = "#1e293b";
+const DEVTOOL_SECTION_STRING_BACKGROUND = "#0d131f";
+const DEVTOOL_PANEL_BORDER = "#1e293b";
+const DEVTOOL_PANEL_DIVIDER_BORDER = "#1d3352";
+const DEVTOOL_TOOLTIP_BACKGROUND = "#0c1526";
+const DEVTOOL_JSON_KEY = "#a5b4fc";
+const DEVTOOL_JSON_STRING = "#fbbf24";
+const DEVTOOL_JSON_NUMBER = "#34d399";
+const DEVTOOL_JSON_KEYWORD = "#a78bfa";
+const DEVTOOL_JSON_PUNCTUATION = "#475569";
+const MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
+const SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
+//#endregion
+//#region ../nice-devtools-shared/src/format.ts
+/** Pretty-print any value to JSON, degrading gracefully for cyclic / non-JSON values. */
+function safeStringify(value, indent = 2) {
+	if (value === void 0) return "undefined";
+	if (value === null) return "null";
+	try {
+		return JSON.stringify(value, null, indent);
+	} catch {
+		return String(value);
+	}
+}
+/** Wall-clock time of day, e.g. `14:03:09`. */
+function formatTimestamp(ms) {
+	return new Date(ms).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hour12: false
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/json.tsx
+const JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
+/** Tokenize a JSON string into coloured <span> nodes for inline rendering. */
+function renderColoredJson(text) {
+	const nodes = [];
+	let last = 0;
+	let i = 0;
+	JSON_TOKEN_RE.lastIndex = 0;
+	for (let m = JSON_TOKEN_RE.exec(text); m !== null; m = JSON_TOKEN_RE.exec(text)) {
+		if (m.index > last) nodes.push(text.slice(last, m.index));
+		const [, str, colon, num, kw, punct] = m;
+		if (str != null) if (colon != null) {
+			nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: DEVTOOL_JSON_KEY },
+				children: str
+			}, i++));
+			nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: DEVTOOL_JSON_PUNCTUATION },
+				children: colon
+			}, i++));
+		} else nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_STRING },
+			children: str
+		}, i++));
+		else if (num != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_NUMBER },
+			children: num
+		}, i++));
+		else if (kw != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_KEYWORD },
+			children: kw
+		}, i++));
+		else if (punct != null) nodes.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: DEVTOOL_JSON_PUNCTUATION },
+			children: punct
+		}, i++));
+		last = JSON_TOKEN_RE.lastIndex;
+	}
+	if (last < text.length) nodes.push(text.slice(last));
+	return nodes;
+}
+/** A pre-formatted, syntax-highlighted JSON block. */
+function JsonView({ value, indent = 2, style }) {
+	const text = safeStringify(value, indent);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		style: {
+			margin: 0,
+			padding: "8px 10px",
+			borderRadius: "4px",
+			fontSize: "11px",
+			lineHeight: 1.5,
+			fontFamily: MONO_FONT,
+			background: DEVTOOL_SECTION_STRING_BACKGROUND,
+			overflowX: "auto",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-word",
+			...style
+		},
+		children: renderColoredJson(text)
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/dock.ts
+const GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
+const VERSION = 4;
+function createCoordinator() {
+	const panels = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	function toRef(panel) {
+		return {
+			id: panel.id,
+			label: panel.label,
+			icon: panel.icon,
+			badge: panel.badge,
+			onOpen: panel.onOpen
+		};
+	}
+	function applyBodyMargins() {
+		if (typeof document === "undefined") return;
+		const margins = {
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0
+		};
+		for (const panel of panels.values()) if (panel.open) margins[panel.side] += panel.size;
+		for (const side of [
+			"top",
+			"bottom",
+			"left",
+			"right"
+		]) if (margins[side] > 0) document.body.style.setProperty(`margin-${side}`, `${margins[side]}px`);
+		else document.body.style.removeProperty(`margin-${side}`);
+	}
+	function notify() {
+		applyBodyMargins();
+		for (const listener of listeners) listener();
+	}
+	return {
+		version: VERSION,
+		register(panel) {
+			panels.set(panel.id, { ...panel });
+			notify();
+			return () => {
+				panels.delete(panel.id);
+				notify();
+			};
+		},
+		update(id, next) {
+			const existing = panels.get(id);
+			if (existing == null) return;
+			if (existing.side === next.side && existing.size === next.size && existing.open === next.open && existing.badge === next.badge) return;
+			panels.set(id, {
+				...existing,
+				...next
+			});
+			notify();
+		},
+		getView(id) {
+			const list = [...panels.values()];
+			const anyOpen = list.some((p) => p.open);
+			const firstId = list.length > 0 ? list[0].id : null;
+			let dockOffset = 0;
+			let stacked = false;
+			const self = panels.get(id);
+			if (self != null && self.open) {
+				let seenSelf = false;
+				for (const panel of list) {
+					if (panel.id === id) {
+						seenSelf = true;
+						continue;
+					}
+					if (panel.open && panel.side === self.side) {
+						stacked = true;
+						if (!seenSelf) dockOffset += panel.size;
+					}
+				}
+			}
+			return {
+				dockOffset,
+				stacked,
+				anyOpen,
+				isPrimary: id === firstId,
+				devtools: list.map(toRef),
+				otherClosed: list.filter((p) => !p.open && p.id !== id).map(toRef)
+			};
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/**
+* Returns the page-wide dock coordinator, installing it on `window` the first
+* time it is requested. On the server (no `window`) a throwaway instance is
+* returned so callers can use it unconditionally.
+*/
+function getDevtoolsDockCoordinator() {
+	if (typeof window === "undefined") return createCoordinator();
+	const host = window;
+	const existing = host[GLOBAL_KEY];
+	if (existing != null && existing.version === VERSION) return existing;
+	const created = createCoordinator();
+	host[GLOBAL_KEY] = created;
+	return created;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/list.ts
+/**
+* Pin a virtualized list's viewport to a stable anchor row across list
+* mutations. Both devtools timelines are newest-first, so new entries (and
+* merges) prepend at the top; without this they shove whatever the user is
+* looking at downward. The anchor is the selected row when one is visible,
+* otherwise the first visible row, so "the thing I selected / am reading" stays
+* put at the same screen position. Returns an `onScroll` handler that must be
+* wired to the scroll container.
+*
+* `hoveringRef` is optional. When provided, the hook keeps the viewport still
+* even across selection changes while the cursor is over the list — the caller
+* is expected to suppress its own scroll-into-view in that case and let this
+* hold the view rock-still (nice-action's pause-on-hover behaviour). When
+* omitted, a selection change yields to the caller's scroll-into-view effect.
+*/
+function useListScrollAnchor({ containerRef, virtualizer, itemKeys, selectedKey, hoveringRef }) {
+	const anchorRef = (0, react.useRef)(null);
+	const selectedKeyRef = (0, react.useRef)(selectedKey);
+	selectedKeyRef.current = selectedKey;
+	const captureAnchor = (0, react.useCallback)(() => {
+		const el = containerRef.current;
+		if (el == null) return;
+		const items = virtualizer.getVirtualItems();
+		if (items.length === 0) {
+			anchorRef.current = null;
+			return;
+		}
+		const scrollTop = el.scrollTop;
+		const sel = selectedKeyRef.current;
+		const chosen = (sel != null ? items.find((vi) => String(vi.key) === sel) : void 0) ?? items.find((vi) => vi.end > scrollTop) ?? items[0];
+		anchorRef.current = {
+			key: String(chosen.key),
+			delta: chosen.start - scrollTop
+		};
+	}, [containerRef, virtualizer]);
+	const prevSelectedRef = (0, react.useRef)(selectedKey);
+	(0, react.useLayoutEffect)(() => {
+		const selectionChanged = prevSelectedRef.current !== selectedKey;
+		prevSelectedRef.current = selectedKey;
+		if (selectionChanged && !(hoveringRef?.current ?? false)) return;
+		const anchor = anchorRef.current;
+		if (anchor == null) return;
+		const index = itemKeys.indexOf(anchor.key);
+		if (index < 0) return;
+		const offset = virtualizer.getOffsetForIndex(index, "start")?.[0];
+		if (offset == null) return;
+		const target = Math.max(0, offset - anchor.delta);
+		const current = virtualizer.scrollOffset ?? 0;
+		if (Math.abs(target - current) > 1) virtualizer.scrollToOffset(target);
+	}, [
+		itemKeys,
+		selectedKey,
+		virtualizer,
+		hoveringRef
+	]);
+	return captureAnchor;
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/SectionLabel.tsx
+/** Small uppercase heading used above a detail/section block. */
+function SectionLabel({ label, color = DEVTOOL_COLOR_SEMANTIC_SYSTEM }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			color,
+			fontSize: "0.85em",
+			marginBottom: "3px",
+			textTransform: "uppercase",
+			letterSpacing: "0.05em",
+			fontWeight: 500,
+			textAlign: "left"
+		},
+		children: label
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/PanelChrome.tsx
+const DOCKED_SIZE_MIN = 140;
+const POSITION_GRID = [
+	{
+		key: "tl",
+		pos: null
+	},
+	{
+		key: "tc",
+		pos: "dock-top"
+	},
+	{
+		key: "tr",
+		pos: null
+	},
+	{
+		key: "ml",
+		pos: "dock-left"
+	},
+	{
+		key: "mc",
+		pos: null
+	},
+	{
+		key: "mr",
+		pos: "dock-right"
+	},
+	{
+		key: "bl",
+		pos: null
+	},
+	{
+		key: "bc",
+		pos: "dock-bottom"
+	},
+	{
+		key: "br",
+		pos: null
+	}
+];
+function getDockSide(pos) {
+	switch (pos) {
+		case "dock-top": return "top";
+		case "dock-left": return "left";
+		case "dock-right": return "right";
+		default: return "bottom";
+	}
+}
+function chromeButtonStyle(color) {
+	return {
+		background: "none",
+		border: "none",
+		color,
+		cursor: "pointer",
+		fontSize: "11px",
+		padding: 0,
+		fontFamily: SANS_FONT,
+		whiteSpace: "nowrap"
+	};
+}
+/**
+* The panel's top chrome: a brand/title on the left (plus pills to open any other
+* closed devtools), and the panel controls on the right. The controls column
+* holds any caller-provided `children` (e.g. a mode switch) above a row of the
+* pause/clear actions, then the dock-position picker and the close button.
+*
+* `onTogglePause` is optional — when omitted no pause control is shown (the
+* nice-action timeline has nothing to pause), keeping a single header component
+* consistent across both devtools suites.
+*/
+function PanelHeader({ title, position, onPositionChange, onClose, onClear, paused, onTogglePause, openOthers, children }) {
+	const hasActionsRow = onTogglePause != null || onClear != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: "6px 11px",
+			gap: "10px",
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+					fontWeight: "bold",
+					fontSize: "11px",
+					whiteSpace: "nowrap"
+				},
+				children: title
+			}), openOthers?.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: item.onOpen,
+				title: `Open ${item.label} devtools`,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "4px",
+					background: DEVTOOL_LIST_BASE_BACKGROUND,
+					border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+					borderRadius: "999px",
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					cursor: "pointer",
+					fontSize: "10px",
+					padding: "1px 7px 1px 6px",
+					fontFamily: SANS_FONT,
+					whiteSpace: "nowrap"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.icon }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: "#38BDF8" },
+						children: item.badge
+					})
+				]
+			}, item.id))]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				gap: "10px",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "stretch"
+					},
+					children: [children, hasActionsRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							gap: "10px",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "3px"
+						},
+						children: [onTogglePause != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: onTogglePause,
+							title: paused ? "Resume recording" : "Pause recording",
+							style: chromeButtonStyle(paused ? "#38BDF8" : "#64748b"),
+							children: paused ? "▶ resume" : "⏸ pause"
+						}), onClear != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: onClear,
+							style: chromeButtonStyle("#64748b"),
+							children: "clear"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PositionPicker, {
+					position,
+					onChange: onPositionChange
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					onClick: onClose,
+					style: {
+						...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+						fontSize: "16px",
+						lineHeight: "1"
+					},
+					children: "×"
+				})
+			]
+		})]
+	});
+}
+function PositionPicker({ position, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		title: "Move / dock panel",
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, 9px)",
+			gap: "2px",
+			padding: "2px"
+		},
+		children: POSITION_GRID.map(({ key, pos }) => {
+			if (pos == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+				width: "9px",
+				height: "9px"
+			} }, key);
+			const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				title: pos,
+				onClick: () => onChange(pos),
+				style: {
+					width: "9px",
+					height: "9px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+					width: isTopBottom ? "9px" : "3px",
+					height: isTopBottom ? "3px" : "9px",
+					borderRadius: "1px",
+					background: pos === position ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
+				} })
+			}, key);
+		})
+	});
+}
+function ResizeHandle({ dockSide, dockedSize, onChange }) {
+	const isHoriz = dockSide === "left" || dockSide === "right";
+	const onMouseDown = (e) => {
+		e.preventDefault();
+		const startCoord = isHoriz ? e.clientX : e.clientY;
+		const startSize = dockedSize;
+		const maxSize = isHoriz ? window.innerWidth * .85 : window.innerHeight * .85;
+		const sign = dockSide === "bottom" || dockSide === "right" ? -1 : 1;
+		const onMove = (me) => {
+			const delta = (isHoriz ? me.clientX : me.clientY) - startCoord;
+			onChange(Math.max(DOCKED_SIZE_MIN, Math.min(maxSize, startSize + sign * delta)));
+		};
+		const onUp = () => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+		};
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseDown,
+		style: {
+			position: "absolute",
+			zIndex: 10,
+			background: "transparent",
+			...dockSide === "bottom" ? {
+				top: 0,
+				left: 0,
+				right: 0,
+				height: "5px",
+				cursor: "ns-resize"
+			} : dockSide === "top" ? {
+				bottom: 0,
+				left: 0,
+				right: 0,
+				height: "5px",
+				cursor: "ns-resize"
+			} : dockSide === "right" ? {
+				top: 0,
+				bottom: 0,
+				left: 0,
+				width: "5px",
+				cursor: "ew-resize"
+			} : {
+				top: 0,
+				bottom: 0,
+				right: 0,
+				width: "5px",
+				cursor: "ew-resize"
+			}
+		}
+	});
+}
+const SPLIT_RATIO_MIN = .15;
+const SPLIT_RATIO_MAX = .85;
+/**
+* Draggable divider between the list and the detail pane. `horizontal` refers to
+* the split axis: a row layout (dock top/bottom) splits horizontally and drags
+* left/right; a column layout (dock left/right) splits vertically. The reported
+* ratio is the fraction of the container the *detail* pane should occupy.
+*/
+function SplitHandle({ horizontal, onRatioChange }) {
+	const [hovered, setHovered] = (0, react.useState)(false);
+	const onMouseDown = (e) => {
+		e.preventDefault();
+		const container = e.currentTarget.parentElement;
+		if (container == null) return;
+		const onMove = (me) => {
+			const rect = container.getBoundingClientRect();
+			const ratio = horizontal ? (rect.right - me.clientX) / rect.width : (rect.bottom - me.clientY) / rect.height;
+			onRatioChange(Math.max(SPLIT_RATIO_MIN, Math.min(SPLIT_RATIO_MAX, ratio)));
+		};
+		const onUp = () => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+		};
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseDown,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			flex: "0 0 5px",
+			alignSelf: "stretch",
+			cursor: horizontal ? "ew-resize" : "ns-resize",
+			background: hovered ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
+			opacity: hovered ? .6 : 1,
+			zIndex: 5
+		}
+	});
+}
+/** A compact segmented toggle (e.g. the nice-state Timeline / State switch). */
+function SegmentedControl({ options, value, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+			borderRadius: "5px",
+			overflow: "hidden"
+		},
+		children: options.map((opt) => {
+			const active = opt.value === value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: () => onChange(opt.value),
+				style: {
+					background: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
+					color: active ? "#0f172a" : DEVTOOL_COLOR_TEXT_MUTED,
+					border: "none",
+					cursor: "pointer",
+					fontSize: "10px",
+					fontWeight: active ? 700 : 500,
+					padding: "3px 9px",
+					fontFamily: SANS_FONT
+				},
+				children: opt.label
+			}, opt.value);
+		})
+	});
+}
+/**
+* The combined, page-wide launcher shown while every devtool is collapsed — one
+* grouped pill with a segment per registered devtool, so the buttons never
+* overlap or hide behind each other. Rendered by the coordinator's "primary"
+* devtool only.
+*/
+function DevtoolsLauncher({ items }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "fixed",
+			bottom: "16px",
+			right: "16px",
+			zIndex: 2147483647,
+			display: "flex",
+			fontFamily: MONO_FONT,
+			fontSize: "12px"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				background: DEVTOOL_SECTION_BACKGROUND,
+				border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
+				borderRadius: "6px",
+				overflow: "hidden",
+				boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
+			},
+			children: items.map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: item.onOpen,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "5px",
+					background: "transparent",
+					color: DEVTOOL_COLOR_TEXT_SECONDARY,
+					border: "none",
+					borderLeft: i > 0 ? `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}` : "none",
+					cursor: "pointer",
+					padding: "6px 11px",
+					fontFamily: MONO_FONT,
+					fontSize: "12px",
+					lineHeight: "1.5"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.icon }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: { color: "#38BDF8" },
+						children: item.badge
+					})
+				]
+			}, item.id))
+		})
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/FollowLatestToggles.tsx
+/**
+* The "Follow latest" toggle pair shown above a devtools timeline list, with its
+* indented "clicking latest re-follows" sub-option. `noun` is the thing the
+* timeline tracks ("action" in nice-action, "change" in nice-state) and is woven
+* into the explanatory tooltips so both suites read naturally from one component.
+*/
+function FollowLatestToggles({ noun, stayOnLatest, onStayOnLatestChange, followLatestOnSelect, onFollowLatestOnSelectChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			paddingBottom: "3px",
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleLabel, {
+			title: `Auto-select the most recent ${noun} so the detail pane keeps showing the latest as new ${noun}s land`,
+			checked: stayOnLatest,
+			onChange: onStayOnLatestChange,
+			children: "Follow latest"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				paddingLeft: "12px",
+				marginTop: "-4px"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				style: {
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontFamily: SANS_FONT,
+					fontSize: "10px",
+					lineHeight: 1
+				},
+				children: "└"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleLabel, {
+				title: `When you click the latest ${noun}, turn 'Follow latest' back on so the view resumes tracking new ${noun}s. Turn this off to pin exactly to the ${noun} you click instead.`,
+				checked: followLatestOnSelect,
+				onChange: onFollowLatestOnSelectChange,
+				children: "clicking latest re-follows"
+			})]
+		})]
+	});
+}
+function ToggleLabel({ checked, onChange, title, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		title,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px",
+			padding: "5px 10px",
+			cursor: "pointer",
+			userSelect: "none",
+			color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "10px",
+			fontFamily: SANS_FONT
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "checkbox",
+			checked,
+			onChange: (e) => onChange(e.target.checked),
+			style: {
+				accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+				cursor: "pointer",
+				margin: 0
+			}
+		}), children]
+	});
+}
+//#endregion
+//#region ../nice-devtools-shared/src/components/VirtualList.tsx
+/**
+* The shared, virtualized timeline list used by both the nice-action and
+* nice-state devtools. It owns everything about *how the list behaves* — windowed
+* rendering, viewport anchoring across prepends, scroll-the-selection-into-view,
+* and pause-on-hover with a "N new" catch-up hint — while each devtool supplies
+* its own `renderItem` for the row content (which stays unique per devtool).
+*
+* Behaviour notes:
+*   • The list is assumed newest-first: new rows prepend at the top. While the
+*     cursor is over the list the viewport is held perfectly still (so reading
+*     isn't disrupted); fresh rows still render above and a sticky "↑ N new"
+*     badge hints they're there. Move the cursor away and normal follow resumes.
+*   • `selectedKey` is the stable item key of the selected row (NOT necessarily a
+*     sub-selection inside it). When it changes the row is scrolled into view —
+*     unless the cursor is hovering, in which case the view is left untouched.
+*/
+function DevtoolsVirtualList({ items, getItemKey, renderItem, selectedKey, estimateSize, overscan = 8, rowStyle, empty, footer, style }) {
+	const containerRef = (0, react.useRef)(null);
+	const [isHovering, setIsHovering] = (0, react.useState)(false);
+	const hoveringRef = (0, react.useRef)(false);
+	hoveringRef.current = isHovering;
+	const hoverBaselineCountRef = (0, react.useRef)(0);
+	const pendingCount = isHovering ? Math.max(0, items.length - hoverBaselineCountRef.current) : 0;
+	const hasPendingActivity = isHovering && pendingCount > 0;
+	const getItemKeyRef = (0, react.useRef)(getItemKey);
+	getItemKeyRef.current = getItemKey;
+	const itemKeys = (0, react.useMemo)(() => items.map((item, i) => getItemKeyRef.current(item, i)), [items]);
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: items.length,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => estimateSize,
+		overscan,
+		getItemKey: (index) => itemKeys[index]
+	});
+	const onScroll = useListScrollAnchor({
+		containerRef,
+		virtualizer,
+		itemKeys,
+		selectedKey,
+		hoveringRef
+	});
+	const prevSelectedRef = (0, react.useRef)(selectedKey);
+	(0, react.useEffect)(() => {
+		if (selectedKey === prevSelectedRef.current) return;
+		prevSelectedRef.current = selectedKey;
+		if (selectedKey == null) return;
+		if (hoveringRef.current) return;
+		const index = itemKeys.indexOf(selectedKey);
+		if (index >= 0) virtualizer.scrollToIndex(index, { align: "auto" });
+	}, [
+		selectedKey,
+		itemKeys,
+		virtualizer
+	]);
+	if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: empty });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		style,
+		onScroll,
+		onMouseEnter: () => {
+			hoverBaselineCountRef.current = items.length;
+			setIsHovering(true);
+		},
+		onMouseLeave: () => setIsHovering(false),
+		children: [
+			hasPendingActivity && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PendingIndicator, { count: pendingCount }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					position: "relative",
+					width: "100%",
+					height: virtualizer.getTotalSize()
+				},
+				children: virtualizer.getVirtualItems().map((vItem) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-index": vItem.index,
+					ref: virtualizer.measureElement,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						transform: `translateY(${vItem.start}px)`,
+						...rowStyle
+					},
+					children: renderItem(items[vItem.index], vItem.index)
+				}, vItem.key))
+			}),
+			footer
+		]
+	});
+}
+/**
+* A sticky, zero-height overlay floating over the rows without taking layout space. Shown only once
+* new items have arrived while hovering, hinting they're above (newest-first) so the user can scroll
+* up without the view having jumped there.
+*/
+function PendingIndicator({ count }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			position: "sticky",
+			top: 0,
+			height: 0,
+			zIndex: 5,
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				position: "absolute",
+				top: "6px",
+				right: "10px",
+				display: "flex",
+				alignItems: "center",
+				gap: "5px",
+				padding: "2px 7px",
+				borderRadius: "10px",
+				fontSize: "10px",
+				fontFamily: SANS_FONT,
+				color: DEVTOOL_COLOR_SEMANTIC_WARNING,
+				background: DEVTOOL_TOOLTIP_BACKGROUND,
+				border: `1px solid ${DEVTOOL_COLOR_SEMANTIC_WARNING}55`,
+				boxShadow: "0 2px 8px rgba(0,0,0,0.5)",
+				whiteSpace: "nowrap"
+			},
+			children: [
+				"↑ ",
+				count,
+				" new"
+			]
+		})
+	});
+}
+//#endregion
+//#region src/devtools/core/devtools_colors.ts
+const DEVTOOL_EDITOR_BACKGROUND = "#08101f";
+//#endregion
+//#region src/devtools/browser/components/utils.ts
+const SOURCE_LABEL = {
+	update: "UPDATE",
+	replace: "REPLACE",
+	"devtools-edit": "EDIT",
+	"devtools-revert": "REVERT"
+};
+const SOURCE_COLOR = {
+	update: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+	replace: DEVTOOL_COLOR_SEMANTIC_METADATA,
+	"devtools-edit": DEVTOOL_COLOR_SEMANTIC_WARNING,
+	"devtools-revert": DEVTOOL_COLOR_SEMANTIC_WARNING
+};
+/** Render an Immer patch path (`["todos", 0, "done"]`) as `todos.0.done`. */
+function patchPathToString(path) {
+	if (path.length === 0) return "(root)";
+	return path.map((seg) => String(seg)).join(".");
+}
+/**
+* A terse, single-line summary of what a change touched, for the timeline row.
+* Prefers a `path: prev → next` form for single scalar replaces, otherwise lists
+* the distinct top-level paths affected.
+*/
+function summarizeChange(change) {
+	const { patches } = change;
+	if (patches.length === 0) return change.source === "replace" || change.source === "devtools-edit" ? "whole state replaced" : "no patches";
+	if (patches.length === 1) {
+		const p = patches[0];
+		const path = patchPathToString(p.path);
+		if (p.op === "replace" && isScalar(p.value)) return `${path} → ${formatScalar(p.value)}`;
+		if (p.op === "add") return `+ ${path}`;
+		if (p.op === "remove") return `− ${path}`;
+		return path;
+	}
+	const paths = patches.map((p) => topLevel(p.path)).filter((s) => s.length > 0);
+	const unique = [...new Set(paths)];
+	const shown = unique.slice(0, 3).join(", ");
+	return unique.length > 3 ? `${shown} +${unique.length - 3}` : shown;
+}
+function topLevel(path) {
+	return path.length > 0 ? String(path[0]) : "(root)";
+}
+/**
+* Structural identity of a change by its *resulting* state: same store, same
+* snapshot. The feature collapses updates that "didn't change the state from the
+* previous update", so we compare the committed state itself rather than the
+* mutation that produced it. Keying on patches would miss the no-op cases this is
+* meant to catch — a fresh object reference with identical content, or a
+* same-value write from a different source (e.g. a devtools edit followed by an
+* app update). Those carry patches yet leave the state untouched, so they belong
+* in the run that already reached this state regardless of source.
+*/
+function changeGroupKey(change) {
+	return `${change.storeId}|${safeStringify(change.snapshot, 0)}`;
+}
+/** Collapse consecutive structurally-equal changes (list is newest-first). */
+function groupChanges(changes) {
+	const groups = [];
+	let lastKey = null;
+	for (const change of changes) {
+		const key = changeGroupKey(change);
+		const last = groups[groups.length - 1];
+		if (last != null && key === lastKey) {
+			last.count++;
+			last.oldest = change;
+		} else groups.push({
+			representative: change,
+			oldest: change,
+			count: 1
+		});
+		lastKey = key;
+	}
+	return groups;
+}
+/**
+* Structural diff between two snapshots, flattened to the individual leaf/branch
+* paths that actually changed — the data behind the test-framework-style "Diff"
+* view. Unchanged branches are skipped entirely (Immer's structural sharing
+* means equal branches keep their reference, so this stays cheap).
+*/
+function computeDiff(before, after) {
+	const out = [];
+	walkDiff([], before, after, out);
+	return out;
+}
+function isPlainObjectOrArray(value) {
+	return value != null && typeof value === "object";
+}
+function walkDiff(path, before, after, out) {
+	if (Object.is(before, after)) return;
+	if (isPlainObjectOrArray(before) && isPlainObjectOrArray(after) && Array.isArray(before) === Array.isArray(after)) {
+		const b = before;
+		const a = after;
+		const keys = new Set([...Object.keys(b), ...Object.keys(a)]);
+		for (const key of keys) {
+			const inB = key in b;
+			const inA = key in a;
+			const next = [...path, key];
+			if (inB && !inA) out.push({
+				path: formatDiffPath(next),
+				segments: next,
+				kind: "removed",
+				before: b[key]
+			});
+			else if (!inB && inA) out.push({
+				path: formatDiffPath(next),
+				segments: next,
+				kind: "added",
+				after: a[key]
+			});
+			else walkDiff(next, b[key], a[key], out);
+		}
+		return;
+	}
+	out.push({
+		path: formatDiffPath(path),
+		segments: [...path],
+		kind: "changed",
+		before,
+		after
+	});
+}
+function formatDiffPath(path) {
+	return path.length === 0 ? "(root)" : path.map((seg) => String(seg)).join(".");
+}
+/**
+* Classic LCS line diff between two blocks of text — the data behind the unified
+* git-style "Diff View" and the per-line highlighting in the Before / After
+* panels. Snapshots rendered as pretty JSON stay small, so the O(n·m) table is
+* comfortably cheap.
+*/
+function computeLineDiff(beforeText, afterText) {
+	const a = beforeText.split("\n");
+	const b = afterText.split("\n");
+	const n = a.length;
+	const m = b.length;
+	const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+	for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+	const ops = [];
+	let i = 0;
+	let j = 0;
+	while (i < n && j < m) if (a[i] === b[j]) {
+		ops.push({
+			kind: "common",
+			text: a[i]
+		});
+		i++;
+		j++;
+	} else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+		ops.push({
+			kind: "removed",
+			text: a[i]
+		});
+		i++;
+	} else {
+		ops.push({
+			kind: "added",
+			text: b[j]
+		});
+		j++;
+	}
+	while (i < n) ops.push({
+		kind: "removed",
+		text: a[i++]
+	});
+	while (j < m) ops.push({
+		kind: "added",
+		text: b[j++]
+	});
+	return ops;
+}
+/**
+* Reorder each contiguous changed hunk so additions sit above removals when
+* `latestFirst` is set (the new state on top). Common lines anchor the hunks in
+* place; only the −/+ lines within a run are regrouped, so the surrounding
+* context never moves. With `latestFirst` off the ops are returned untouched.
+*/
+function orderLineDiffOps(ops, latestFirst) {
+	if (!latestFirst) return ops;
+	const out = [];
+	let i = 0;
+	while (i < ops.length) {
+		if (ops[i].kind === "common") {
+			out.push(ops[i]);
+			i++;
+			continue;
+		}
+		const added = [];
+		const removed = [];
+		while (i < ops.length && ops[i].kind !== "common") {
+			(ops[i].kind === "added" ? added : removed).push(ops[i]);
+			i++;
+		}
+		out.push(...added, ...removed);
+	}
+	return out;
+}
+/**
+* A structure-aware "address" diff: the JSON tree pruned down to just the
+* branches that actually changed. Parents of a change keep their brackets so the
+* path stays legible, and each run of untouched siblings collapses into a single
+* `… N unchanged …` placeholder (which, for arrays, naturally reports the counts
+* before and after a change). `side` picks which document we're rebuilding —
+* `"unified"` shows removed (−) and added (+) together, while `"before"` /
+* `"after"` show only the lines that belong to that one snapshot.
+*/
+function computeCompressedDiff(before, after, side, latestFirst = false) {
+	const lines = [];
+	emitChangedNode(lines, 0, null, before, after, side, latestFirst);
+	return lines;
+}
+function keyPrefix(keyLabel) {
+	return keyLabel != null ? `${keyLabel}: ` : "";
+}
+/** Emit a node already known to differ between the two sides. */
+function emitChangedNode(lines, depth, keyLabel, before, after, side, latestFirst) {
+	if (isPlainObjectOrArray(before) && isPlainObjectOrArray(after) && Array.isArray(before) === Array.isArray(after)) {
+		emitContainer(lines, depth, keyLabel, before, after, side, latestFirst);
+		return;
+	}
+	const removed = () => pushValueLines(lines, depth, keyLabel, before, "−", "removed");
+	const added = () => pushValueLines(lines, depth, keyLabel, after, "+", "added");
+	if (side === "before") removed();
+	else if (side === "after") added();
+	else if (latestFirst) {
+		added();
+		removed();
+	} else {
+		removed();
+		added();
+	}
+}
+function emitContainer(lines, depth, keyLabel, before, after, side, latestFirst) {
+	const isArray = Array.isArray(before);
+	lines.push({
+		depth,
+		sign: " ",
+		tone: "common",
+		text: `${keyPrefix(keyLabel)}${isArray ? "[" : "{"}`
+	});
+	let unchanged = 0;
+	const flush = () => {
+		if (unchanged > 0) {
+			lines.push({
+				depth: depth + 1,
+				sign: " ",
+				tone: "placeholder",
+				text: placeholderText(unchanged, isArray)
+			});
+			unchanged = 0;
+		}
+	};
+	for (const child of childEntries(before, after, isArray)) {
+		if (child.kind === "added" && side === "before") continue;
+		if (child.kind === "removed" && side === "after") continue;
+		if (child.kind === "unchanged") {
+			unchanged++;
+			continue;
+		}
+		flush();
+		if (child.kind === "changed") emitChangedNode(lines, depth + 1, child.keyLabel, child.before, child.after, side, latestFirst);
+		else if (child.kind === "added") pushValueLines(lines, depth + 1, child.keyLabel, child.after, "+", "added");
+		else pushValueLines(lines, depth + 1, child.keyLabel, child.before, "−", "removed");
+	}
+	flush();
+	lines.push({
+		depth,
+		sign: " ",
+		tone: "common",
+		text: isArray ? "]" : "}"
+	});
+}
+/** Classify each direct child as unchanged / changed / added / removed. */
+function childEntries(before, after, isArray) {
+	if (isArray) {
+		const b = before;
+		const a = after;
+		const len = Math.max(b.length, a.length);
+		const out = [];
+		for (let i = 0; i < len; i++) {
+			const inB = i < b.length;
+			const inA = i < a.length;
+			if (inB && inA) {
+				const kind = Object.is(b[i], a[i]) ? "unchanged" : "changed";
+				out.push({
+					keyLabel: null,
+					kind,
+					before: b[i],
+					after: a[i]
+				});
+			} else if (inB) out.push({
+				keyLabel: null,
+				kind: "removed",
+				before: b[i],
+				after: void 0
+			});
+			else out.push({
+				keyLabel: null,
+				kind: "added",
+				before: void 0,
+				after: a[i]
+			});
+		}
+		return out;
+	}
+	const b = before;
+	const a = after;
+	return [...new Set([...Object.keys(b), ...Object.keys(a)])].map((key) => {
+		const keyLabel = JSON.stringify(key);
+		const inB = key in b;
+		const inA = key in a;
+		if (inB && inA) return {
+			keyLabel,
+			kind: Object.is(b[key], a[key]) ? "unchanged" : "changed",
+			before: b[key],
+			after: a[key]
+		};
+		if (inB) return {
+			keyLabel,
+			kind: "removed",
+			before: b[key],
+			after: void 0
+		};
+		return {
+			keyLabel,
+			kind: "added",
+			before: void 0,
+			after: a[key]
+		};
+	});
+}
+function placeholderText(count, isArray) {
+	return `… ${count} unchanged ${isArray ? count === 1 ? "item" : "items" : count === 1 ? "property" : "properties"}`;
+}
+/**
+* Render a value as pretty JSON and append it as one tone'd block, re-basing the
+* stringifier's own 2-space indentation onto `baseDepth` and prefixing the key
+* (if any) onto the first line.
+*/
+function pushValueLines(lines, baseDepth, keyLabel, value, sign, tone) {
+	const prefix = keyPrefix(keyLabel);
+	safeStringify(value, 2).split("\n").forEach((line, idx) => {
+		const leading = /^ */.exec(line)[0].length;
+		const content = line.slice(leading);
+		const text = idx === 0 ? `${prefix}${content}` : content;
+		lines.push({
+			depth: baseDepth + leading / 2,
+			sign,
+			tone,
+			text
+		});
+	});
+}
+function isScalar(value) {
+	return value == null || typeof value !== "object";
+}
+function formatScalar(value) {
+	if (typeof value === "string") return `"${value.length > 24 ? `${value.slice(0, 24)}…` : value}"`;
+	return String(value);
+}
+//#endregion
+//#region src/devtools/browser/components/DiffView.tsx
+const ADDED_BG$1 = "rgba(163, 230, 53, 0.08)";
+const REMOVED_BG$1 = "rgba(255, 92, 92, 0.08)";
+const INLINE_MAX = 40;
+/**
+* Test-framework-style diff: only the paths that changed. Changed paths are
+* grouped into a hierarchy by their shared parents — `countHistory.0` and
+* `countHistory.1` nest under a single `countHistory` node, each shown by its
+* direct key only. Single-child chains collapse to a dotted path (`a.b.c`) so
+* lone deep changes stay on one line. Short values render inline with the key
+* (`count: 0 → 1`); long ones keep the removed/added line block.
+*/
+function DiffView({ before, after, latestFirst = false }) {
+	const entries = computeDiff(before, after);
+	if (entries.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			padding: "10px",
+			borderRadius: "4px",
+			background: DEVTOOL_SECTION_STRING_BACKGROUND,
+			color: DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "11px",
+			fontStyle: "italic"
+		},
+		children: "No differences — before and after are structurally equal."
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		children: [...buildTree(entries).children.values()].map(collapseChains).map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffNode, {
+			node,
+			latestFirst
+		}, node.key))
+	});
+}
+/** Group flat diff entries into a tree keyed by their path segments. */
+function buildTree(entries) {
+	const root = {
+		key: "",
+		children: /* @__PURE__ */ new Map()
+	};
+	for (const entry of entries) {
+		const segments = entry.segments.length > 0 ? entry.segments : ["(root)"];
+		let node = root;
+		for (const seg of segments) {
+			const key = String(seg);
+			let child = node.children.get(key);
+			if (child == null) {
+				child = {
+					key,
+					children: /* @__PURE__ */ new Map()
+				};
+				node.children.set(key, child);
+			}
+			node = child;
+		}
+		node.entry = entry;
+	}
+	return root;
+}
+/**
+* Collapse single-child chains into one dotted key so a lone deep change reads
+* as `a.b.c` rather than three nested headers; branches with siblings keep their
+* hierarchy.
+*/
+function collapseChains(node) {
+	const children = /* @__PURE__ */ new Map();
+	for (const child of node.children.values()) {
+		const collapsed = collapseChains(child);
+		children.set(collapsed.key, collapsed);
+	}
+	let current = {
+		key: node.key,
+		children,
+		entry: node.entry
+	};
+	while (current.entry == null && current.children.size === 1) {
+		const only = [...current.children.values()][0];
+		current = {
+			key: `${current.key}.${only.key}`,
+			children: only.children,
+			entry: only.entry
+		};
+	}
+	return current;
+}
+function DiffNode({ node, latestFirst }) {
+	if (node.entry != null && node.children.size === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffLeaf, {
+		label: node.key,
+		entry: node.entry,
+		latestFirst
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			color: DEVTOOL_JSON_KEY,
+			fontFamily: MONO_FONT,
+			fontSize: "10px",
+			fontWeight: 600
+		},
+		children: node.key
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			marginTop: "4px",
+			marginLeft: "5px",
+			paddingLeft: "8px",
+			borderLeft: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`,
+			display: "flex",
+			flexDirection: "column",
+			gap: "5px"
+		},
+		children: [...node.children.values()].map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffNode, {
+			node: child,
+			latestFirst
+		}, child.key))
+	})] });
+}
+function DiffLeaf({ label, entry, latestFirst }) {
+	const showRemoved = entry.kind === "removed" || entry.kind === "changed";
+	const showAdded = entry.kind === "added" || entry.kind === "changed";
+	const removed = showRemoved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineValue, {
+		sign: "−",
+		color: "#FF5C5C",
+		background: REMOVED_BG$1,
+		value: entry.before
+	});
+	const added = showAdded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineValue, {
+		sign: "+",
+		color: "#A3E635",
+		background: ADDED_BG$1,
+		value: entry.after
+	});
+	const removedLine = showRemoved && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffLine, {
+		sign: "−",
+		color: "#FF5C5C",
+		background: REMOVED_BG$1,
+		value: entry.before
+	});
+	const addedLine = showAdded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffLine, {
+		sign: "+",
+		color: "#A3E635",
+		background: ADDED_BG$1,
+		value: entry.after
+	});
+	if (isInlineLeaf(entry)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "baseline",
+			gap: "6px"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				style: {
+					color: DEVTOOL_JSON_KEY,
+					fontFamily: MONO_FONT,
+					fontSize: "11px"
+				},
+				children: [label, ":"]
+			}),
+			latestFirst ? added : removed,
+			entry.kind === "changed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: "#64748b" },
+				children: latestFirst ? "←" : "→"
+			}),
+			latestFirst ? removed : added
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			borderRadius: "4px",
+			overflow: "hidden",
+			border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					padding: "3px 8px",
+					background: DEVTOOL_SECTION_STRING_BACKGROUND,
+					color: DEVTOOL_JSON_KEY,
+					fontFamily: MONO_FONT,
+					fontSize: "10px"
+				},
+				children: label
+			}),
+			latestFirst ? addedLine : removedLine,
+			latestFirst ? removedLine : addedLine
+		]
+	});
+}
+function InlineValue({ sign, color, background, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "baseline",
+			gap: "4px",
+			padding: "1px 6px",
+			borderRadius: "3px",
+			background,
+			fontFamily: MONO_FONT,
+			fontSize: "11px",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-word"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: renderColoredJson(compactStringify(value)) })]
+	});
+}
+function DiffLine({ sign, color, background, value }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			gap: "6px",
+			padding: "3px 8px",
+			background
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color,
+				fontWeight: 700,
+				flexShrink: 0,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				flex: 1,
+				minWidth: 0,
+				fontFamily: MONO_FONT,
+				fontSize: "11px",
+				lineHeight: 1.5,
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word"
+			},
+			children: renderColoredJson(safeStringify(value, 2))
+		})]
+	});
+}
+/** A leaf renders inline when every side it shows is short and single-line. */
+function isInlineLeaf(entry) {
+	const sides = [];
+	if (entry.kind !== "added") sides.push(compactStringify(entry.before));
+	if (entry.kind !== "removed") sides.push(compactStringify(entry.after));
+	return sides.every((s) => s.length <= INLINE_MAX && !s.includes("\n"));
+}
+/** Single-line JSON for inline rendering (`undefined` has no JSON form). */
+function compactStringify(value) {
+	if (value === void 0) return "undefined";
+	try {
+		return JSON.stringify(value) ?? "undefined";
+	} catch {
+		return String(value);
+	}
+}
+//#endregion
+//#region src/devtools/browser/components/JsonDiffView.tsx
+const ADDED_BG = "rgba(163, 230, 53, 0.13)";
+const REMOVED_BG = "rgba(255, 92, 92, 0.13)";
+const SURFACE_STYLE = {
+	margin: 0,
+	padding: "8px 0",
+	borderRadius: "4px",
+	fontSize: "11px",
+	lineHeight: 1.5,
+	fontFamily: MONO_FONT,
+	background: DEVTOOL_SECTION_STRING_BACKGROUND,
+	overflowX: "auto"
+};
+function emptyNotice(text) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			padding: "10px",
+			borderRadius: "4px",
+			background: DEVTOOL_SECTION_STRING_BACKGROUND,
+			color: DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "11px",
+			fontStyle: "italic"
+		},
+		children: text
+	});
+}
+/**
+* A single rendered diff line: a fixed sign gutter (`+` / `−` / blank) followed
+* by the syntax-coloured JSON text, all on a highlighted background.
+*/
+function Line({ sign, color, background, text }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			background,
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				width: "12px",
+				flexShrink: 0,
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: renderColoredJson(text)
+		})]
+	});
+}
+/**
+* Unified, git-style diff of the entire state snapshot. Both sides are rendered
+* as pretty JSON and line-diffed, so unchanged structure stays visible for
+* context while removed lines (red, `−`) and added lines (green, `+`) call out
+* exactly which sections of the whole state moved.
+*/
+function JsonDiffView({ before, after, compress = false, latestFirst = false }) {
+	if (compress) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompressedDiffView, {
+		before,
+		after,
+		side: "unified",
+		latestFirst
+	});
+	const ops = orderLineDiffOps(computeLineDiff(safeStringify(before, 2), safeStringify(after, 2)), latestFirst);
+	if (!ops.some((op) => op.kind !== "common")) return emptyNotice("No differences — before and after are structurally equal.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		style: SURFACE_STYLE,
+		children: ops.map((op, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {
+			sign: op.kind === "removed" ? "−" : op.kind === "added" ? "+" : " ",
+			color: op.kind === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+			background: op.kind === "removed" ? REMOVED_BG : op.kind === "added" ? ADDED_BG : "transparent",
+			text: op.text
+		}, i))
+	});
+}
+/**
+* The structure-aware "address" view: the JSON tree pruned to just the changed
+* branches, with runs of untouched siblings collapsed into `… N unchanged …`
+* placeholders. Shared by all three diff tabs via `side`.
+*/
+function CompressedDiffView({ before, after, side, latestFirst = false }) {
+	const lines = computeCompressedDiff(before, after, side, latestFirst);
+	if (!lines.some((line) => line.tone === "added" || line.tone === "removed")) return emptyNotice("No differences — before and after are structurally equal.");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		style: SURFACE_STYLE,
+		children: lines.map((line, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompressedLine, { line }, i))
+	});
+}
+function CompressedLine({ line }) {
+	const indent = "  ".repeat(line.depth);
+	if (line.tone === "placeholder") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+			width: "12px",
+			flexShrink: 0
+		} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			style: {
+				flex: 1,
+				minWidth: 0,
+				color: DEVTOOL_COLOR_TEXT_MUTED,
+				fontStyle: "italic"
+			},
+			children: [indent, line.text]
+		})]
+	});
+	const background = line.tone === "removed" ? REMOVED_BG : line.tone === "added" ? ADDED_BG : "transparent";
+	const color = line.tone === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			background,
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				width: "12px",
+				flexShrink: 0,
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: line.sign
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: renderColoredJson(`${indent}${line.text}`)
+		})]
+	});
+}
+/**
+* The full JSON of one snapshot with the lines that differ from the other side
+* highlighted in place — red behind removed lines on the "before" side, green
+* behind added lines on the "after" side. Lines common to both render plainly so
+* the highlight reads as "here is what changed within the whole state".
+*/
+function HighlightedJsonView({ before, after, side, compress = false }) {
+	if (compress) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompressedDiffView, {
+		before,
+		after,
+		side
+	});
+	const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
+	const dropKind = side === "before" ? "added" : "removed";
+	const highlightKind = side === "before" ? "removed" : "added";
+	const background = side === "before" ? REMOVED_BG : ADDED_BG;
+	const color = side === "before" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		style: SURFACE_STYLE,
+		children: ops.filter((op) => op.kind !== dropKind).map((op, i) => {
+			const changed = op.kind === highlightKind;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Line, {
+				sign: changed ? side === "before" ? "−" : "+" : " ",
+				color,
+				background: changed ? background : "transparent",
+				text: op.text
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/ChangeDetailPanel.tsx
+function ChangeDetailPanel({ change, onRevert, view, onViewChange, compress, onCompressChange, latestFirst, onLatestFirstChange }) {
+	const canRevert = change.inversePatches.length > 0;
+	const showCompressToggle = view !== "props";
+	const showOrderToggle = view === "props" || view === "diff";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			minHeight: 0,
+			background: DEVTOOL_DETAIL_BASE_BACKGROUND
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					padding: "8px 12px",
+					background: DEVTOOL_DETAIL_HEADER_BACKGROUND,
+					borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_EMPHASIS,
+							fontWeight: 600,
+							fontFamily: MONO_FONT,
+							fontSize: "12px",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: change.storeLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							padding: "1px 7px",
+							borderRadius: "999px",
+							background: SOURCE_COLOR[change.source],
+							color: "#0f172a",
+							fontSize: "8px",
+							fontWeight: 700,
+							letterSpacing: "0.08em",
+							fontFamily: SANS_FONT
+						},
+						children: SOURCE_LABEL[change.source]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_MUTED,
+							fontSize: "10px",
+							fontFamily: MONO_FONT
+						},
+						children: formatTimestamp(change.timestamp)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: () => onRevert(change),
+						disabled: !canRevert,
+						title: canRevert ? "Apply this change's inverse patches to undo it" : "No inverse patches available to revert",
+						style: {
+							background: "transparent",
+							border: `1px solid ${canRevert ? DEVTOOL_COLOR_SEMANTIC_WARNING : DEVTOOL_SECTION_BACKGROUND}`,
+							color: canRevert ? DEVTOOL_COLOR_SEMANTIC_WARNING : DEVTOOL_COLOR_TEXT_MUTED,
+							borderRadius: "4px",
+							cursor: canRevert ? "pointer" : "not-allowed",
+							fontSize: "10px",
+							padding: "2px 8px",
+							fontFamily: SANS_FONT,
+							flexShrink: 0
+						},
+						children: "⟲ revert"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					padding: "6px 12px",
+					borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControl, {
+					options: [
+						{
+							value: "props",
+							label: "Diff Props"
+						},
+						{
+							value: "diff",
+							label: "Diff View"
+						},
+						{
+							value: "before",
+							label: "Before"
+						},
+						{
+							value: "after",
+							label: "After"
+						}
+					],
+					value: view,
+					onChange: onViewChange
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					minHeight: 0,
+					padding: "10px 12px"
+				},
+				children: [
+					(showCompressToggle || showOrderToggle) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							alignItems: "center",
+							gap: "14px",
+							marginBottom: "8px"
+						},
+						children: [showCompressToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleCheckbox, {
+							checked: compress,
+							onChange: onCompressChange,
+							label: "Compress to changed paths only",
+							title: "Collapse unchanged branches, showing only the address of what changed"
+						}), showOrderToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleCheckbox, {
+							checked: latestFirst,
+							onChange: onLatestFirstChange,
+							label: "Latest (+) change first",
+							title: "Show the new value (+) above the previous value (−); off shows previous first"
+						})]
+					}),
+					view === "props" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiffView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						latestFirst
+					}),
+					view === "diff" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonDiffView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						compress,
+						latestFirst
+					}),
+					view === "before" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedJsonView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						side: "before",
+						compress
+					}),
+					view === "after" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedJsonView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						side: "after",
+						compress
+					})
+				]
+			})
+		]
+	});
+}
+function ToggleCheckbox({ checked, onChange, label, title }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px",
+			color: DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "10px",
+			fontFamily: SANS_FONT,
+			cursor: "pointer",
+			userSelect: "none"
+		},
+		title,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "checkbox",
+			checked,
+			onChange: (e) => onChange(e.target.checked),
+			style: {
+				cursor: "pointer",
+				margin: 0
+			}
+		}), label]
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/ChangeList.tsx
+const getGroupKey = (group) => group.oldest.cuid;
+function ChangeList({ groups, selectedCuid, onSelect, showStore, style }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevtoolsVirtualList, {
+		items: groups,
+		getItemKey: getGroupKey,
+		selectedKey: selectedCuid,
+		estimateSize: 44,
+		overscan: 12,
+		style,
+		empty: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				padding: "24px",
+				textAlign: "center",
+				color: DEVTOOL_COLOR_TEXT_MUTED,
+				fontSize: "11px",
+				...style
+			},
+			children: "No changes recorded yet. Mutate a store to see it here."
+		}),
+		renderItem: (group) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChangeRow, {
+			change: group.representative,
+			count: group.count,
+			selected: group.oldest.cuid === selectedCuid,
+			onClick: () => onSelect(group.oldest.cuid),
+			showStore
+		})
+	});
+}
+function ChangeRow({ change, count, selected, onClick, showStore }) {
+	const sourceColor = SOURCE_COLOR[change.source];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onClick,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "3px",
+			padding: "6px 10px",
+			cursor: "pointer",
+			borderBottom: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`,
+			borderLeft: `2px solid ${selected ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent"}`,
+			background: selected ? DEVTOOL_LIST_SELECTED_BACKGROUND : DEVTOOL_LIST_BASE_BACKGROUND
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "6px"
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						color: DEVTOOL_COLOR_TEXT_MUTED,
+						fontSize: "10px",
+						fontFamily: MONO_FONT,
+						flexShrink: 0
+					},
+					children: formatTimestamp(change.timestamp)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+					color: sourceColor,
+					children: SOURCE_LABEL[change.source]
+				}),
+				count > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					title: `${count} consecutive identical updates`,
+					style: {
+						flexShrink: 0,
+						padding: "0 5px",
+						borderRadius: "999px",
+						background: "#1e293b",
+						color: "#cbd5e1",
+						fontSize: "9px",
+						fontWeight: 700,
+						fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace"
+					},
+					children: ["×", count]
+				}),
+				showStore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: {
+						color: "#38BDF8",
+						fontSize: "10px",
+						fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: change.storeLabel
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
+				change.patches.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						color: "#334155",
+						fontSize: "10px",
+						flexShrink: 0
+					},
+					children: [
+						change.patches.length,
+						" patch",
+						change.patches.length === 1 ? "" : "es"
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				color: DEVTOOL_COLOR_TEXT_SECONDARY,
+				fontSize: "11px",
+				fontFamily: MONO_FONT,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: summarizeChange(change)
+		})]
+	});
+}
+function Badge({ color, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		style: {
+			flexShrink: 0,
+			padding: "1px 6px",
+			borderRadius: "999px",
+			background: color,
+			color: "#0f172a",
+			fontSize: "8px",
+			fontWeight: 700,
+			letterSpacing: "0.08em",
+			fontFamily: SANS_FONT
+		},
+		children
+	});
+}
+//#endregion
+//#region src/devtools/browser/components/StateInspector.tsx
+/**
+* Live current-state view (top half) plus a direct JSON editor (bottom half) for
+* one store — a fixed 50/50 split so the editor is usable without manual
+* resizing. Editing is the "trigger edits directly for testing" capability: the
+* draft is parsed and handed to {@link StateDevtoolsCore.applyEdit}, which
+* replaces the store state.
+*
+* The draft is seeded from the live state only while it is clean — once the user
+* types, incoming external updates no longer clobber their edit (a "reload"
+* button re-syncs on demand).
+*/
+function StateInspector({ store, onApply }) {
+	const liveText = safeStringify(store.currentState, 2);
+	const [draft, setDraft] = (0, react.useState)(liveText);
+	const [dirty, setDirty] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setDraft(liveText);
+		setDirty(false);
+		setError(null);
+	}, [store.id]);
+	(0, react.useEffect)(() => {
+		if (!dirty) setDraft(liveText);
+	}, [liveText]);
+	const onEdit = (value) => {
+		setDraft(value);
+		setDirty(true);
+		setError(null);
+	};
+	const reload = () => {
+		setDraft(liveText);
+		setDirty(false);
+		setError(null);
+	};
+	const apply = () => {
+		let parsed;
+		try {
+			parsed = JSON.parse(draft);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Invalid JSON");
+			return;
+		}
+		onApply(store.id, parsed);
+		setDirty(false);
+		setError(null);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			minHeight: 0,
+			background: DEVTOOL_DETAIL_BASE_BACKGROUND
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				padding: "10px 12px 8px"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, { label: "Current state" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					flex: 1,
+					minHeight: 0,
+					overflow: "auto"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(JsonView, {
+					value: store.currentState,
+					style: { minHeight: "100%" }
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				padding: "8px 12px 10px",
+				borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						marginBottom: "3px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionLabel, {
+						label: "Edit & apply",
+						color: DEVTOOL_COLOR_SEMANTIC_WARNING
+					}), dirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: reload,
+						style: linkButtonStyle("#64748b"),
+						children: "reload from store"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					value: draft,
+					spellCheck: false,
+					onChange: (e) => onEdit(e.target.value),
+					style: {
+						flex: 1,
+						minHeight: 0,
+						width: "100%",
+						resize: "none",
+						boxSizing: "border-box",
+						background: DEVTOOL_EDITOR_BACKGROUND,
+						color: DEVTOOL_COLOR_TEXT_SECONDARY,
+						border: `1px solid ${error != null ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_SECTION_BACKGROUND}`,
+						borderRadius: "4px",
+						padding: "8px 10px",
+						fontFamily: MONO_FONT,
+						fontSize: "11px",
+						lineHeight: 1.5
+					}
+				}),
+				error != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						marginTop: "6px",
+						padding: "6px 8px",
+						borderRadius: "4px",
+						background: "#1e0a0a",
+						color: "#FF5C5C",
+						fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+						fontSize: "10px",
+						flexShrink: 0
+					},
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						display: "flex",
+						gap: "8px",
+						marginTop: "8px",
+						flexShrink: 0
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						onClick: apply,
+						disabled: !dirty,
+						style: {
+							background: dirty ? DEVTOOL_COLOR_SEMANTIC_SUCCESS : DEVTOOL_SECTION_BACKGROUND,
+							color: dirty ? "#0f172a" : DEVTOOL_COLOR_TEXT_MUTED,
+							border: "none",
+							borderRadius: "4px",
+							cursor: dirty ? "pointer" : "not-allowed",
+							fontSize: "11px",
+							fontWeight: 600,
+							padding: "5px 14px",
+							fontFamily: SANS_FONT
+						},
+						children: "Apply to store"
+					})
+				})
+			]
+		})]
+	});
+}
+function linkButtonStyle(color) {
+	return {
+		background: "none",
+		border: "none",
+		color,
+		cursor: "pointer",
+		fontSize: "10px",
+		padding: 0,
+		fontFamily: SANS_FONT
+	};
+}
+//#endregion
+//#region src/devtools/browser/components/StoreTabs.tsx
+/**
+* Horizontal store filter. `null` selection means "all stores". When
+* `includeAll` is false (the State inspector needs a concrete store) the All
+* pill is omitted.
+*/
+function StoreTabs({ stores, selectedStoreId, onSelect, includeAll = true }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			gap: "6px",
+			padding: "6px 10px",
+			overflowX: "auto",
+			background: DEVTOOL_LIST_BASE_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_SECTION_BACKGROUND}`,
+			flexWrap: "wrap",
+			flexShrink: 0
+		},
+		children: [
+			includeAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+				active: selectedStoreId == null,
+				onClick: () => onSelect(null),
+				label: "all"
+			}),
+			stores.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					color: "#64748b",
+					fontSize: "11px",
+					padding: "2px 0"
+				},
+				children: "no stores registered"
+			}),
+			stores.map((store) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+				active: selectedStoreId === store.id,
+				onClick: () => onSelect(store.id),
+				label: store.label,
+				count: store.changeCount
+			}, store.id))
+		]
+	});
+}
+function Pill({ active, onClick, label, count }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		onClick,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "5px",
+			background: active ? DEVTOOL_SECTION_BACKGROUND : "transparent",
+			color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED,
+			border: `1px solid ${active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT}`,
+			borderRadius: "5px",
+			cursor: "pointer",
+			fontSize: "11px",
+			fontFamily: MONO_FONT,
+			padding: "2px 8px",
+			whiteSpace: "nowrap",
+			flexShrink: 0
+		},
+		children: [label, count != null && count > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				color: active ? "#38BDF8" : "#334155",
+				fontSize: "10px"
+			},
+			children: count
+		})]
+	});
+}
+//#endregion
+//#region src/devtools/browser/NiceStateDevtools.tsx
+if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
+	const style = document.createElement("style");
+	style.id = "__nice-state-devtools-styles";
+	style.textContent = `
+    @keyframes __nice-state-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+    #__nice-state-devtools-panel ::-webkit-scrollbar { width: 4px; height: 4px; }
+    #__nice-state-devtools-panel ::-webkit-scrollbar-track { background: transparent; }
+    #__nice-state-devtools-panel ::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
+    #__nice-state-devtools-panel ::-webkit-scrollbar-thumb:hover { background: #475569; }
+    #__nice-state-devtools-panel ::-webkit-scrollbar-corner { background: transparent; }
+    /* Shield the panel's native form controls from the host app's global element
+       styles (e.g. a bare \`input {}\`/\`button {}\` rule). \`all: revert\` drops them
+       to the UA baseline the panel is authored against; the panel's own inline
+       styles still win, so its look is unchanged across any host. */
+    #__nice-state-devtools-panel input,
+    #__nice-state-devtools-panel button,
+    #__nice-state-devtools-panel select,
+    #__nice-state-devtools-panel textarea { all: revert; font-family: inherit; }
+  `;
+	document.head?.appendChild(style);
+}
+const PREFS_KEY = "__nice-state-devtools-prefs";
+const DOCKED_HEIGHT_DEFAULT = 340;
+const DOCKED_WIDTH_DEFAULT = 330;
+const DETAIL_RATIO_DEFAULT = .5;
+const DOCK_POSITIONS = [
+	"dock-bottom",
+	"dock-top",
+	"dock-left",
+	"dock-right"
+];
+function isDockPosition(value) {
+	return typeof value === "string" && DOCK_POSITIONS.includes(value);
+}
+function readPrefs(defaultPosition, initialOpen) {
+	const fallback = {
+		position: defaultPosition,
+		isOpen: initialOpen,
+		dockedHeight: DOCKED_HEIGHT_DEFAULT,
+		dockedWidth: DOCKED_WIDTH_DEFAULT,
+		detailRatio: DETAIL_RATIO_DEFAULT,
+		stayOnLatest: true,
+		followLatestOnSelect: true,
+		compressDiff: true,
+		detailView: "props",
+		diffLatestFirst: true
+	};
+	try {
+		if (typeof localStorage === "undefined") return fallback;
+		const stored = localStorage.getItem(PREFS_KEY);
+		const merged = stored != null ? {
+			...fallback,
+			...JSON.parse(stored)
+		} : fallback;
+		if (!isDockPosition(merged.position)) merged.position = defaultPosition;
+		return merged;
+	} catch {
+		return fallback;
+	}
+}
+function writePrefs(prefs) {
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch {
+		return;
+	}
+}
+const EMPTY_SNAPSHOT = {
+	stores: [],
+	changes: [],
+	paused: false
+};
+function NiceStateDevtools({ forceEnable, ...props }) {
+	if (!forceEnable && true) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NiceStateDevtools_Panel, { ...props });
+}
+function NiceStateDevtools_Panel({ core, position: defaultPosition = "dock-right", initialOpen = false }) {
+	const [prefs, setPrefsRaw] = (0, react.useState)(() => readPrefs(defaultPosition, initialOpen));
+	const [snapshot, setSnapshot] = (0, react.useState)(EMPTY_SNAPSHOT);
+	const [mode, setMode] = (0, react.useState)("timeline");
+	const [storeFilter, setStoreFilter] = (0, react.useState)(null);
+	const [selectedChangeCuid, setSelectedChangeCuid] = (0, react.useState)(null);
+	(0, react.useEffect)(() => core.subscribe(setSnapshot), [core]);
+	const setPrefs = (update) => {
+		setPrefsRaw((prev) => ({
+			...prev,
+			...update
+		}));
+	};
+	(0, react.useEffect)(() => {
+		const timer = setTimeout(() => writePrefs(prefs), 250);
+		return () => clearTimeout(timer);
+	}, [prefs]);
+	const { stores, changes, paused } = snapshot;
+	const { position, isOpen, dockedHeight, dockedWidth, detailRatio, stayOnLatest, followLatestOnSelect, compressDiff, detailView, diffLatestFirst } = prefs;
+	const dockSide = getDockSide(position);
+	const isHorizDock = dockSide === "top" || dockSide === "bottom";
+	const dockedSize = isHorizDock ? dockedHeight : dockedWidth;
+	const filteredChanges = (0, react.useMemo)(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
+	const groups = (0, react.useMemo)(() => groupChanges(filteredChanges), [filteredChanges]);
+	const selectedChange = (0, react.useMemo)(() => {
+		if (selectedChangeCuid == null) return null;
+		const group = groups.find((g) => g.oldest.cuid === selectedChangeCuid);
+		if (group == null) return changes.find((c) => c.cuid === selectedChangeCuid) ?? null;
+		if (group.count > 1) return {
+			...group.representative,
+			prevSnapshot: group.oldest.prevSnapshot,
+			inversePatches: group.oldest.inversePatches
+		};
+		return group.representative;
+	}, [
+		selectedChangeCuid,
+		groups,
+		changes
+	]);
+	const latestCuid = groups.length > 0 ? groups[0].oldest.cuid : null;
+	(0, react.useEffect)(() => {
+		if (stayOnLatest && latestCuid != null) setSelectedChangeCuid(latestCuid);
+	}, [stayOnLatest, latestCuid]);
+	const activeStore = stores.find((s) => s.id === storeFilter) ?? (stores.length > 0 ? stores[0] : null);
+	const dock = (0, react.useMemo)(() => getDevtoolsDockCoordinator(), []);
+	const panelId = (0, react.useId)();
+	const [, bumpView] = (0, react.useReducer)((n) => n + 1, 0);
+	const badge = changes.length > 0 ? String(changes.length) : void 0;
+	(0, react.useEffect)(() => {
+		const unregister = dock.register({
+			id: panelId,
+			label: "state",
+			icon: "🧩",
+			side: dockSide,
+			size: dockedSize,
+			open: isOpen,
+			badge,
+			onOpen: () => setPrefs({ isOpen: true })
+		});
+		const unsubscribe = dock.subscribe(bumpView);
+		return () => {
+			unregister();
+			unsubscribe();
+		};
+	}, [dock, panelId]);
+	(0, react.useEffect)(() => {
+		dock.update(panelId, {
+			side: dockSide,
+			size: dockedSize,
+			open: isOpen,
+			badge
+		});
+	}, [
+		dock,
+		panelId,
+		dockSide,
+		dockedSize,
+		isOpen,
+		badge
+	]);
+	const view = dock.getView(panelId);
+	const baseStyle = {
+		position: "fixed",
+		zIndex: 2147483646,
+		fontFamily: "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace",
+		fontSize: "12px"
+	};
+	if (!isOpen) {
+		if (view.isPrimary && !view.anyOpen) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevtoolsLauncher, { items: view.devtools });
+		return null;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id: "__nice-state-devtools-panel",
+		style: {
+			...baseStyle,
+			background: DEVTOOL_LIST_BASE_BACKGROUND,
+			border: `1px solid ${DEVTOOL_PANEL_BORDER}`,
+			color: DEVTOOL_COLOR_TEXT_SECONDARY,
+			display: "flex",
+			flexDirection: "column",
+			boxShadow: "0 -4px 24px rgba(0,0,0,0.4)",
+			overflow: "hidden",
+			...dockSide === "bottom" ? {
+				bottom: view.dockOffset,
+				left: 0,
+				right: 0,
+				height: `${dockedSize}px`,
+				borderRadius: view.stacked ? "0" : "8px 8px 0 0"
+			} : dockSide === "top" ? {
+				top: view.dockOffset,
+				left: 0,
+				right: 0,
+				height: `${dockedSize}px`,
+				borderRadius: view.stacked ? "0" : "0 0 8px 8px"
+			} : dockSide === "left" ? {
+				top: 0,
+				left: view.dockOffset,
+				bottom: 0,
+				width: `${dockedSize}px`,
+				borderRadius: view.stacked ? "0" : "0 8px 8px 0"
+			} : {
+				top: 0,
+				right: view.dockOffset,
+				bottom: 0,
+				width: `${dockedSize}px`,
+				borderRadius: view.stacked ? "0" : "8px 0 0 8px"
+			}
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizeHandle, {
+				dockSide,
+				dockedSize,
+				onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelHeader, {
+				title: "🧩 state",
+				position,
+				onPositionChange: (p) => setPrefs({ position: p }),
+				onClose: () => setPrefs({ isOpen: false }),
+				onClear: changes.length > 0 ? () => {
+					core.clear();
+					setSelectedChangeCuid(null);
+				} : void 0,
+				paused,
+				onTogglePause: () => core.togglePaused(),
+				openOthers: view.otherClosed,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControl, {
+					options: [{
+						value: "timeline",
+						label: "Timeline"
+					}, {
+						value: "state",
+						label: "State"
+					}],
+					value: mode,
+					onChange: setMode
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StoreTabs, {
+				stores,
+				selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
+				onSelect: setStoreFilter,
+				includeAll: mode === "timeline"
+			}),
+			mode === "state" ? activeStore != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateInspector, {
+				store: activeStore,
+				onApply: (id, next) => core.applyEdit(id, next)
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyMessage, { children: "No stores registered. Call core.registerStore(...)." }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					flexDirection: isHorizDock ? "row" : "column",
+					overflow: "hidden",
+					minHeight: 0
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						flexGrow: selectedChange != null ? 1 - detailRatio : 1,
+						flexShrink: 1,
+						flexBasis: 0,
+						minWidth: 0,
+						minHeight: 0,
+						display: "flex",
+						flexDirection: "column",
+						overflow: "hidden"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowLatestToggles, {
+						noun: "change",
+						stayOnLatest,
+						onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
+						followLatestOnSelect,
+						onFollowLatestOnSelectChange: (next) => {
+							if (next && latestCuid != null && selectedChangeCuid === latestCuid && !stayOnLatest) setPrefs({
+								followLatestOnSelect: next,
+								stayOnLatest: true
+							});
+							else setPrefs({ followLatestOnSelect: next });
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							flex: 1,
+							minHeight: 0,
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChangeList, {
+							style: {
+								flex: 1,
+								minHeight: 0,
+								overflowY: "auto"
+							},
+							groups,
+							selectedCuid: selectedChangeCuid,
+							onSelect: (cuid) => {
+								const next = selectedChangeCuid === cuid ? null : cuid;
+								if (next != null && next === latestCuid && followLatestOnSelect) {
+									if (!stayOnLatest) setPrefs({ stayOnLatest: true });
+								} else if (stayOnLatest) setPrefs({ stayOnLatest: false });
+								setSelectedChangeCuid(next);
+							},
+							showStore: storeFilter == null
+						})
+					})]
+				}), selectedChange != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SplitHandle, {
+					horizontal: isHorizDock,
+					onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						flexGrow: detailRatio,
+						flexShrink: 1,
+						flexBasis: 0,
+						minWidth: 0,
+						minHeight: 0,
+						display: "flex",
+						flexDirection: "column",
+						overflow: "hidden",
+						...isHorizDock ? {
+							borderLeft: `1px solid #1d3352`,
+							boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
+						} : {
+							borderTop: `1px solid #1d3352`,
+							boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
+						}
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChangeDetailPanel, {
+						change: selectedChange,
+						onRevert: (c) => core.revertChange(c),
+						view: detailView,
+						onViewChange: (v) => setPrefs({ detailView: v }),
+						compress: compressDiff,
+						onCompressChange: (v) => setPrefs({ compressDiff: v }),
+						latestFirst: diffLatestFirst,
+						onLatestFirstChange: (v) => setPrefs({ diffLatestFirst: v })
+					})
+				})] })]
+			})
+		]
+	});
+}
+function EmptyMessage({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "24px",
+			textAlign: "center",
+			color: DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "11px"
+		},
+		children
+	});
+}
+//#endregion
+exports.NiceStateDevtools = NiceStateDevtools;
+exports.StateDevtoolsCore = StateDevtoolsCore;
+
+//# sourceMappingURL=index.cjs.map