@nice-code/state 0.8.0 → 0.10.0

package/build/devtools/browser/index.js

@@ -1,1494 +1,2471 @@
-// src/devtools/core/StateDevtoolsCore.ts
-class StateDevtoolsCore {
-  _stores = new Map;
-  _changes = [];
-  _listeners = new Set;
-  _maxChanges;
-  _paused = false;
-  _cuidCounter = 0;
-  _sourceOverride = null;
-  constructor(options = {}) {
-    this._maxChanges = options.maxChanges ?? 250;
-  }
-  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();
-  }
-  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;
-    }
-  }
-  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);
-  }
-  clear() {
-    this._changes = [];
-    for (const reg of this._stores.values()) {
-      reg.changeCount = 0;
-      reg.lastChangeTime = undefined;
-    }
-    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);
-  }
-}
-// src/devtools/browser/NiceStateDevtools.tsx
-import {
-  DevtoolsLauncher,
-  FollowLatestToggles,
-  getDevtoolsDockCoordinator,
-  getDockSide,
-  PanelHeader,
-  ResizeHandle,
-  SegmentedControl as SegmentedControl2,
-  SplitHandle
-} from "nice-devtools-shared";
-import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState2 } from "react";
-
-// src/devtools/core/devtools_colors.ts
-import {
-  DEVTOOL_COLOR_SEMANTIC_ERROR,
-  DEVTOOL_COLOR_SEMANTIC_METADATA,
-  DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-  DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-  DEVTOOL_COLOR_SEMANTIC_WARNING,
-  DEVTOOL_COLOR_TEXT_EMPHASIS,
-  DEVTOOL_COLOR_TEXT_FAINT,
-  DEVTOOL_COLOR_TEXT_MUTED,
-  DEVTOOL_COLOR_TEXT_SECONDARY,
-  DEVTOOL_DETAIL_BASE_BACKGROUND,
-  DEVTOOL_DETAIL_HEADER_BACKGROUND,
-  DEVTOOL_ERROR_BACKGROUND,
-  DEVTOOL_JSON_KEY,
-  DEVTOOL_JSON_KEYWORD,
-  DEVTOOL_JSON_NUMBER,
-  DEVTOOL_JSON_PUNCTUATION,
-  DEVTOOL_JSON_STRING,
-  DEVTOOL_LIST_BASE_BACKGROUND,
-  DEVTOOL_LIST_SELECTED_BACKGROUND,
-  DEVTOOL_PANEL_BORDER,
-  DEVTOOL_PANEL_DIVIDER_BORDER,
-  DEVTOOL_SECTION_BACKGROUND,
-  DEVTOOL_SECTION_STRING_BACKGROUND,
-  DEVTOOL_TOOLTIP_BACKGROUND,
-  DEVTOOL_TOOLTIP_BORDER,
-  DEVTOOL_TOOLTIP_TITLE_BACKGROUND,
-  DEVTOOL_TOOLTIP_TITLE_BOTTOM_BORDER,
-  MONO_FONT,
-  SANS_FONT
-} from "nice-devtools-shared";
-var DEVTOOL_EDITOR_BACKGROUND = "#08101f";
-
-// src/devtools/browser/components/ChangeDetailPanel.tsx
-import { SegmentedControl } from "nice-devtools-shared";
-
-// src/devtools/browser/components/JsonView.tsx
-import { JsonView, renderColoredJson } from "nice-devtools-shared";
-
-// src/devtools/browser/components/utils.ts
-import { safeStringify } from "nice-devtools-shared";
-import { formatRelativeAge, formatTimestamp, safeStringify as safeStringify2 } from "nice-devtools-shared";
-var SOURCE_LABEL = {
-  update: "UPDATE",
-  replace: "REPLACE",
-  "devtools-edit": "EDIT",
-  "devtools-revert": "REVERT"
+import { createRequire } from "node:module";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+//#endregion
+//#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__ */ jsx("span", {
+				style: { color: DEVTOOL_JSON_KEY },
+				children: str
+			}, i++));
+			nodes.push(/* @__PURE__ */ jsx("span", {
+				style: { color: DEVTOOL_JSON_PUNCTUATION },
+				children: colon
+			}, i++));
+		} else nodes.push(/* @__PURE__ */ jsx("span", {
+			style: { color: DEVTOOL_JSON_STRING },
+			children: str
+		}, i++));
+		else if (num != null) nodes.push(/* @__PURE__ */ jsx("span", {
+			style: { color: DEVTOOL_JSON_NUMBER },
+			children: num
+		}, i++));
+		else if (kw != null) nodes.push(/* @__PURE__ */ jsx("span", {
+			style: { color: DEVTOOL_JSON_KEYWORD },
+			children: kw
+		}, i++));
+		else if (punct != null) nodes.push(/* @__PURE__ */ 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__ */ 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 = useRef(null);
+	const selectedKeyRef = useRef(selectedKey);
+	selectedKeyRef.current = selectedKey;
+	const captureAnchor = 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 = useRef(selectedKey);
+	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__ */ jsx("div", {
+		style: {
+			color,
+			fontSize: "0.85em",
+			marginBottom: "3px",
+			textTransform: "uppercase",
+			letterSpacing: "0.05em",
+			fontWeight: 500,
+			textAlign: "left"
+		},
+		children: label
+	});
+}
+//#endregion
+//#region ../../node_modules/.bun/react-dom@19.2.7+e14d3f224186685e/node_modules/react-dom/cjs/react-dom.production.js
+/**
+* @license React
+* react-dom.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_dom_production = /* @__PURE__ */ __commonJSMin(((exports) => {
+	__require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+}));
+(/* @__PURE__ */ __commonJSMin(((exports, module) => {
+	function checkDCE() {
+		if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") return;
+		try {
+			__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+		} catch (err) {
+			console.error(err);
+		}
+	}
+	checkDCE();
+	module.exports = require_react_dom_production();
+})))();
+//#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__ */ 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__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "8px",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
+					fontWeight: "bold",
+					fontSize: "11px",
+					whiteSpace: "nowrap"
+				},
+				children: title
+			}), openOthers?.map((item) => /* @__PURE__ */ 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__ */ jsx("span", { children: item.icon }),
+					/* @__PURE__ */ jsx("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ jsx("span", {
+						style: { color: "#38BDF8" },
+						children: item.badge
+					})
+				]
+			}, item.id))]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				gap: "10px",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "stretch"
+					},
+					children: [children, hasActionsRow && /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: "10px",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "3px"
+						},
+						children: [onTogglePause != null && /* @__PURE__ */ jsx("button", {
+							onClick: onTogglePause,
+							title: paused ? "Resume recording" : "Pause recording",
+							style: chromeButtonStyle(paused ? "#38BDF8" : "#64748b"),
+							children: paused ? "▶ resume" : "⏸ pause"
+						}), onClear != null && /* @__PURE__ */ jsx("button", {
+							onClick: onClear,
+							style: chromeButtonStyle("#64748b"),
+							children: "clear"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(PositionPicker, {
+					position,
+					onChange: onPositionChange
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: onClose,
+					style: {
+						...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
+						fontSize: "16px",
+						lineHeight: "1"
+					},
+					children: "×"
+				})
+			]
+		})]
+	});
+}
+function PositionPicker({ position, onChange }) {
+	return /* @__PURE__ */ 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__ */ jsx("div", { style: {
+				width: "9px",
+				height: "9px"
+			} }, key);
+			const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
+			return /* @__PURE__ */ jsx("div", {
+				title: pos,
+				onClick: () => onChange(pos),
+				style: {
+					width: "9px",
+					height: "9px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer"
+				},
+				children: /* @__PURE__ */ 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__ */ 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] = 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__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
+		style: {
+			position: "fixed",
+			bottom: "16px",
+			right: "16px",
+			zIndex: 2147483647,
+			display: "flex",
+			fontFamily: MONO_FONT,
+			fontSize: "12px"
+		},
+		children: /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { children: item.icon }),
+					/* @__PURE__ */ jsx("span", { children: item.label }),
+					item.badge != null && /* @__PURE__ */ 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__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			flexShrink: 0,
+			paddingBottom: "3px",
+			background: DEVTOOL_SECTION_BACKGROUND,
+			borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
+		},
+		children: [/* @__PURE__ */ 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__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				paddingLeft: "12px",
+				marginTop: "-4px"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				style: {
+					color: DEVTOOL_COLOR_TEXT_MUTED,
+					fontFamily: SANS_FONT,
+					fontSize: "10px",
+					lineHeight: 1
+				},
+				children: "└"
+			}), /* @__PURE__ */ 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__ */ 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__ */ 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 = useRef(null);
+	const [isHovering, setIsHovering] = useState(false);
+	const hoveringRef = useRef(false);
+	hoveringRef.current = isHovering;
+	const hoverBaselineCountRef = useRef(0);
+	const pendingCount = isHovering ? Math.max(0, items.length - hoverBaselineCountRef.current) : 0;
+	const hasPendingActivity = isHovering && pendingCount > 0;
+	const getItemKeyRef = useRef(getItemKey);
+	getItemKeyRef.current = getItemKey;
+	const itemKeys = useMemo(() => items.map((item, i) => getItemKeyRef.current(item, i)), [items]);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => estimateSize,
+		overscan,
+		getItemKey: (index) => itemKeys[index]
+	});
+	const onScroll = useListScrollAnchor({
+		containerRef,
+		virtualizer,
+		itemKeys,
+		selectedKey,
+		hoveringRef
+	});
+	const prevSelectedRef = useRef(selectedKey);
+	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__ */ jsx(Fragment, { children: empty });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		style,
+		onScroll,
+		onMouseEnter: () => {
+			hoverBaselineCountRef.current = items.length;
+			setIsHovering(true);
+		},
+		onMouseLeave: () => setIsHovering(false),
+		children: [
+			hasPendingActivity && /* @__PURE__ */ jsx(PendingIndicator, { count: pendingCount }),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "relative",
+					width: "100%",
+					height: virtualizer.getTotalSize()
+				},
+				children: virtualizer.getVirtualItems().map((vItem) => /* @__PURE__ */ 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__ */ jsx("div", {
+		style: {
+			position: "sticky",
+			top: 0,
+			height: 0,
+			zIndex: 5,
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ 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"
 };
-var SOURCE_COLOR = {
-  update: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-  replace: DEVTOOL_COLOR_SEMANTIC_METADATA,
-  "devtools-edit": DEVTOOL_COLOR_SEMANTIC_WARNING,
-  "devtools-revert": DEVTOOL_COLOR_SEMANTIC_WARNING
+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(".");
+	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;
+	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)";
+	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)}`;
+	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;
+	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;
+	const out = [];
+	walkDiff([], before, after, out);
+	return out;
 }
 function isPlainObjectOrArray(value) {
-  return value != null && typeof value === "object";
+	return value != null && typeof value === "object";
 }
 function walkDiff(path, before, after, out) {
-  if (Object.is(before, after))
-    return;
-  const bothContainers = isPlainObjectOrArray(before) && isPlainObjectOrArray(after);
-  const sameShape = bothContainers && Array.isArray(before) === Array.isArray(after);
-  if (sameShape) {
-    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 });
+	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(".");
+	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(`
-`);
-  const b = afterText.split(`
-`);
-  const n = a.length;
-  const m = b.length;
-  const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
-  for (let i2 = n - 1;i2 >= 0; i2--) {
-    for (let j2 = m - 1;j2 >= 0; j2--) {
-      lcs[i2][j2] = a[i2] === b[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 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;
+	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;
+	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;
+	const lines = [];
+	emitChangedNode(lines, 0, null, before, after, side, latestFirst);
+	return lines;
 }
 function keyPrefix(keyLabel) {
-  return keyLabel != null ? `${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) {
-  const bothContainers = isPlainObjectOrArray(before) && isPlainObjectOrArray(after);
-  const sameShape = bothContainers && Array.isArray(before) === Array.isArray(after);
-  if (sameShape) {
-    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();
-  }
+	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 ? "]" : "}" });
+	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 b2 = before;
-    const a2 = after;
-    const len = Math.max(b2.length, a2.length);
-    const out = [];
-    for (let i = 0;i < len; i++) {
-      const inB = i < b2.length;
-      const inA = i < a2.length;
-      if (inB && inA) {
-        const kind = Object.is(b2[i], a2[i]) ? "unchanged" : "changed";
-        out.push({ keyLabel: null, kind, before: b2[i], after: a2[i] });
-      } else if (inB) {
-        out.push({ keyLabel: null, kind: "removed", before: b2[i], after: undefined });
-      } else {
-        out.push({ keyLabel: null, kind: "added", before: undefined, after: a2[i] });
-      }
-    }
-    return out;
-  }
-  const b = before;
-  const a = after;
-  const keys = [...new Set([...Object.keys(b), ...Object.keys(a)])];
-  return keys.map((key) => {
-    const keyLabel = JSON.stringify(key);
-    const inB = key in b;
-    const inA = key in a;
-    if (inB && inA) {
-      const kind = Object.is(b[key], a[key]) ? "unchanged" : "changed";
-      return { keyLabel, kind, before: b[key], after: a[key] };
-    }
-    if (inB)
-      return { keyLabel, kind: "removed", before: b[key], after: undefined };
-    return { keyLabel, kind: "added", before: undefined, after: a[key] };
-  });
+	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) {
-  const noun = isArray ? count === 1 ? "item" : "items" : count === 1 ? "property" : "properties";
-  return `… ${count} unchanged ${noun}`;
+	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);
-  const raw = safeStringify(value, 2).split(`
-`);
-  raw.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 });
-  });
+	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";
+	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);
+	if (typeof value === "string") return `"${value.length > 24 ? `${value.slice(0, 24)}…` : value}"`;
+	return String(value);
 }
-
-// src/devtools/browser/components/DiffView.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ADDED_BG = "rgba(163, 230, 53, 0.08)";
-var REMOVED_BG = "rgba(255, 92, 92, 0.08)";
-var INLINE_MAX = 40;
-function DiffView({
-  before,
-  after,
-  latestFirst = false
-}) {
-  const entries = computeDiff(before, after);
-  if (entries.length === 0) {
-    return /* @__PURE__ */ 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."
-    });
-  }
-  const roots = [...buildTree(entries).children.values()].map(collapseChains);
-  return /* @__PURE__ */ jsx("div", {
-    style: { display: "flex", flexDirection: "column", gap: "6px" },
-    children: roots.map((node) => /* @__PURE__ */ jsx(DiffNode, {
-      node,
-      latestFirst
-    }, node.key))
-  });
+//#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__ */ 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__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		children: [...buildTree(entries).children.values()].map(collapseChains).map((node) => /* @__PURE__ */ 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: 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: new Map };
-        node.children.set(key, child);
-      }
-      node = child;
-    }
-    node.entry = entry;
-  }
-  return root;
+	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 = 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;
+	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__ */ jsx(DiffLeaf, {
-      label: node.key,
-      entry: node.entry,
-      latestFirst
-    });
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "10px", fontWeight: 600 },
-        children: node.key
-      }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(InlineValue, {
-    sign: "−",
-    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-    background: REMOVED_BG,
-    value: entry.before
-  });
-  const added = showAdded && /* @__PURE__ */ jsx(InlineValue, {
-    sign: "+",
-    color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-    background: ADDED_BG,
-    value: entry.after
-  });
-  const removedLine = showRemoved && /* @__PURE__ */ jsx(DiffLine, {
-    sign: "−",
-    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-    background: REMOVED_BG,
-    value: entry.before
-  });
-  const addedLine = showAdded && /* @__PURE__ */ jsx(DiffLine, {
-    sign: "+",
-    color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-    background: ADDED_BG,
-    value: entry.after
-  });
-  if (isInlineLeaf(entry)) {
-    return /* @__PURE__ */ jsxs("div", {
-      style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "6px" },
-      children: [
-        /* @__PURE__ */ jsxs("span", {
-          style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "11px" },
-          children: [
-            label,
-            ":"
-          ]
-        }),
-        latestFirst ? added : removed,
-        entry.kind === "changed" && /* @__PURE__ */ jsx("span", {
-          style: { color: DEVTOOL_COLOR_TEXT_MUTED },
-          children: latestFirst ? "←" : "→"
-        }),
-        latestFirst ? removed : added
-      ]
-    });
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    style: {
-      borderRadius: "4px",
-      overflow: "hidden",
-      border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
-    },
-    children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx("span", {
-        style: { color, fontWeight: 700, userSelect: "none" },
-        children: sign
-      }),
-      /* @__PURE__ */ jsx("span", {
-        children: renderColoredJson(compactStringify(value))
-      })
-    ]
-  });
-}
-function DiffLine({
-  sign,
-  color,
-  background,
-  value
-}) {
-  return /* @__PURE__ */ jsxs("div", {
-    style: { display: "flex", gap: "6px", padding: "3px 8px", background },
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        style: { color, fontWeight: 700, flexShrink: 0, userSelect: "none" },
-        children: sign
-      }),
-      /* @__PURE__ */ jsx("span", {
-        style: {
-          flex: 1,
-          minWidth: 0,
-          fontFamily: MONO_FONT,
-          fontSize: "11px",
-          lineHeight: 1.5,
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word"
-        },
-        children: renderColoredJson(safeStringify2(value, 2))
-      })
-    ]
-  });
+	if (node.entry != null && node.children.size === 0) return /* @__PURE__ */ jsx(DiffLeaf, {
+		label: node.key,
+		entry: node.entry,
+		latestFirst
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			color: DEVTOOL_JSON_KEY,
+			fontFamily: MONO_FONT,
+			fontSize: "10px",
+			fontWeight: 600
+		},
+		children: node.key
+	}), /* @__PURE__ */ 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__ */ 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__ */ jsx(InlineValue, {
+		sign: "−",
+		color: "#FF5C5C",
+		background: REMOVED_BG$1,
+		value: entry.before
+	});
+	const added = showAdded && /* @__PURE__ */ jsx(InlineValue, {
+		sign: "+",
+		color: "#A3E635",
+		background: ADDED_BG$1,
+		value: entry.after
+	});
+	const removedLine = showRemoved && /* @__PURE__ */ jsx(DiffLine, {
+		sign: "−",
+		color: "#FF5C5C",
+		background: REMOVED_BG$1,
+		value: entry.before
+	});
+	const addedLine = showAdded && /* @__PURE__ */ jsx(DiffLine, {
+		sign: "+",
+		color: "#A3E635",
+		background: ADDED_BG$1,
+		value: entry.after
+	});
+	if (isInlineLeaf(entry)) return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "baseline",
+			gap: "6px"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					color: DEVTOOL_JSON_KEY,
+					fontFamily: MONO_FONT,
+					fontSize: "11px"
+				},
+				children: [label, ":"]
+			}),
+			latestFirst ? added : removed,
+			entry.kind === "changed" && /* @__PURE__ */ jsx("span", {
+				style: { color: "#64748b" },
+				children: latestFirst ? "←" : "→"
+			}),
+			latestFirst ? removed : added
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: "4px",
+			overflow: "hidden",
+			border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
+		},
+		children: [
+			/* @__PURE__ */ 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__ */ 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__ */ jsx("span", {
+			style: {
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ jsx("span", { children: renderColoredJson(compactStringify(value)) })]
+	});
+}
+function DiffLine({ sign, color, background, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: "6px",
+			padding: "3px 8px",
+			background
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				color,
+				fontWeight: 700,
+				flexShrink: 0,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ 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(`
-`));
+	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 === undefined)
-    return "undefined";
-  try {
-    return JSON.stringify(value) ?? "undefined";
-  } catch {
-    return String(value);
-  }
+	if (value === void 0) return "undefined";
+	try {
+		return JSON.stringify(value) ?? "undefined";
+	} catch {
+		return String(value);
+	}
 }
-
-// src/devtools/browser/components/JsonDiffView.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ADDED_BG2 = "rgba(163, 230, 53, 0.13)";
-var REMOVED_BG2 = "rgba(255, 92, 92, 0.13)";
-var SURFACE_STYLE = {
-  margin: 0,
-  padding: "8px 0",
-  borderRadius: "4px",
-  fontSize: "11px",
-  lineHeight: 1.5,
-  fontFamily: MONO_FONT,
-  background: DEVTOOL_SECTION_STRING_BACKGROUND,
-  overflowX: "auto"
+//#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__ */ jsx2("div", {
-    style: {
-      padding: "10px",
-      borderRadius: "4px",
-      background: DEVTOOL_SECTION_STRING_BACKGROUND,
-      color: DEVTOOL_COLOR_TEXT_MUTED,
-      fontSize: "11px",
-      fontStyle: "italic"
-    },
-    children: text
-  });
+	return /* @__PURE__ */ 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__ */ jsxs2("div", {
-    style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
-    children: [
-      /* @__PURE__ */ jsx2("span", {
-        style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
-        children: sign
-      }),
-      /* @__PURE__ */ jsx2("span", {
-        style: { flex: 1, minWidth: 0 },
-        children: renderColoredJson(text)
-      })
-    ]
-  });
-}
-function JsonDiffView({
-  before,
-  after,
-  compress = false,
-  latestFirst = false
-}) {
-  if (compress) {
-    return /* @__PURE__ */ jsx2(CompressedDiffView, {
-      before,
-      after,
-      side: "unified",
-      latestFirst
-    });
-  }
-  const ops = orderLineDiffOps(computeLineDiff(safeStringify2(before, 2), safeStringify2(after, 2)), latestFirst);
-  if (!ops.some((op) => op.kind !== "common")) {
-    return emptyNotice("No differences — before and after are structurally equal.");
-  }
-  return /* @__PURE__ */ jsx2("pre", {
-    style: SURFACE_STYLE,
-    children: ops.map((op, i) => /* @__PURE__ */ jsx2(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_BG2 : op.kind === "added" ? ADDED_BG2 : "transparent",
-      text: op.text
-    }, i))
-  });
-}
-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__ */ jsx2("pre", {
-    style: SURFACE_STYLE,
-    children: lines.map((line, i) => /* @__PURE__ */ jsx2(CompressedLine, {
-      line
-    }, i))
-  });
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			background,
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				width: "12px",
+				flexShrink: 0,
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: sign
+		}), /* @__PURE__ */ 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__ */ 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__ */ jsx("pre", {
+		style: SURFACE_STYLE,
+		children: ops.map((op, i) => /* @__PURE__ */ 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__ */ jsx("pre", {
+		style: SURFACE_STYLE,
+		children: lines.map((line, i) => /* @__PURE__ */ jsx(CompressedLine, { line }, i))
+	});
 }
 function CompressedLine({ line }) {
-  const indent = "  ".repeat(line.depth);
-  if (line.tone === "placeholder") {
-    return /* @__PURE__ */ jsxs2("div", {
-      style: { display: "flex", padding: "0 10px", whiteSpace: "pre" },
-      children: [
-        /* @__PURE__ */ jsx2("span", {
-          style: { width: "12px", flexShrink: 0 }
-        }),
-        /* @__PURE__ */ jsxs2("span", {
-          style: { flex: 1, minWidth: 0, color: DEVTOOL_COLOR_TEXT_MUTED, fontStyle: "italic" },
-          children: [
-            indent,
-            line.text
-          ]
-        })
-      ]
-    });
-  }
-  const background = line.tone === "removed" ? REMOVED_BG2 : line.tone === "added" ? ADDED_BG2 : "transparent";
-  const color = line.tone === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
-  return /* @__PURE__ */ jsxs2("div", {
-    style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
-    children: [
-      /* @__PURE__ */ jsx2("span", {
-        style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
-        children: line.sign
-      }),
-      /* @__PURE__ */ jsx2("span", {
-        style: { flex: 1, minWidth: 0 },
-        children: renderColoredJson(`${indent}${line.text}`)
-      })
-    ]
-  });
-}
-function HighlightedJsonView({
-  before,
-  after,
-  side,
-  compress = false
-}) {
-  if (compress)
-    return /* @__PURE__ */ jsx2(CompressedDiffView, {
-      before,
-      after,
-      side
-    });
-  const ops = computeLineDiff(safeStringify2(before, 2), safeStringify2(after, 2));
-  const dropKind = side === "before" ? "added" : "removed";
-  const highlightKind = side === "before" ? "removed" : "added";
-  const background = side === "before" ? REMOVED_BG2 : ADDED_BG2;
-  const color = side === "before" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
-  const visible = ops.filter((op) => op.kind !== dropKind);
-  return /* @__PURE__ */ jsx2("pre", {
-    style: SURFACE_STYLE,
-    children: visible.map((op, i) => {
-      const changed = op.kind === highlightKind;
-      return /* @__PURE__ */ jsx2(Line, {
-        sign: changed ? side === "before" ? "−" : "+" : " ",
-        color,
-        background: changed ? background : "transparent",
-        text: op.text
-      }, i);
-    })
-  });
+	const indent = "  ".repeat(line.depth);
+	if (line.tone === "placeholder") return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ jsx("span", { style: {
+			width: "12px",
+			flexShrink: 0
+		} }), /* @__PURE__ */ 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__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			background,
+			padding: "0 10px",
+			whiteSpace: "pre"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				width: "12px",
+				flexShrink: 0,
+				color,
+				fontWeight: 700,
+				userSelect: "none"
+			},
+			children: line.sign
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: renderColoredJson(`${indent}${line.text}`)
+		})]
+	});
 }
-
-// src/devtools/browser/components/ChangeDetailPanel.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-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__ */ jsxs3("div", {
-    style: {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      minHeight: 0,
-      background: DEVTOOL_DETAIL_BASE_BACKGROUND
-    },
-    children: [
-      /* @__PURE__ */ jsxs3("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__ */ jsx3("span", {
-            style: {
-              color: DEVTOOL_COLOR_TEXT_EMPHASIS,
-              fontWeight: 600,
-              fontFamily: MONO_FONT,
-              fontSize: "12px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            },
-            children: change.storeLabel
-          }),
-          /* @__PURE__ */ jsx3("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__ */ jsx3("span", {
-            style: { flex: 1 }
-          }),
-          /* @__PURE__ */ jsx3("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: MONO_FONT },
-            children: formatTimestamp(change.timestamp)
-          }),
-          /* @__PURE__ */ jsx3("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__ */ jsx3("div", {
-        style: {
-          padding: "6px 12px",
-          borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
-          flexShrink: 0
-        },
-        children: /* @__PURE__ */ jsx3(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__ */ jsxs3("div", {
-        style: {
-          flex: 1,
-          overflowY: "auto",
-          minHeight: 0,
-          padding: "10px 12px"
-        },
-        children: [
-          (showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxs3("div", {
-            style: {
-              display: "flex",
-              flexWrap: "wrap",
-              alignItems: "center",
-              gap: "14px",
-              marginBottom: "8px"
-            },
-            children: [
-              showCompressToggle && /* @__PURE__ */ jsx3(ToggleCheckbox, {
-                checked: compress,
-                onChange: onCompressChange,
-                label: "Compress to changed paths only",
-                title: "Collapse unchanged branches, showing only the address of what changed"
-              }),
-              showOrderToggle && /* @__PURE__ */ jsx3(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__ */ jsx3(DiffView, {
-            before: change.prevSnapshot,
-            after: change.snapshot,
-            latestFirst
-          }),
-          view === "diff" && /* @__PURE__ */ jsx3(JsonDiffView, {
-            before: change.prevSnapshot,
-            after: change.snapshot,
-            compress,
-            latestFirst
-          }),
-          view === "before" && /* @__PURE__ */ jsx3(HighlightedJsonView, {
-            before: change.prevSnapshot,
-            after: change.snapshot,
-            side: "before",
-            compress
-          }),
-          view === "after" && /* @__PURE__ */ jsx3(HighlightedJsonView, {
-            before: change.prevSnapshot,
-            after: change.snapshot,
-            side: "after",
-            compress
-          })
-        ]
-      })
-    ]
-  });
-}
-function ToggleCheckbox({
-  checked,
-  onChange,
-  label,
-  title
-}) {
-  return /* @__PURE__ */ jsxs3("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__ */ jsx3("input", {
-        type: "checkbox",
-        checked,
-        onChange: (e) => onChange(e.target.checked),
-        style: { cursor: "pointer", margin: 0 }
-      }),
-      label
-    ]
-  });
+/**
+* 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__ */ 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__ */ jsx("pre", {
+		style: SURFACE_STYLE,
+		children: ops.filter((op) => op.kind !== dropKind).map((op, i) => {
+			const changed = op.kind === highlightKind;
+			return /* @__PURE__ */ jsx(Line, {
+				sign: changed ? side === "before" ? "−" : "+" : " ",
+				color,
+				background: changed ? background : "transparent",
+				text: op.text
+			}, i);
+		})
+	});
 }
-
-// src/devtools/browser/components/ChangeList.tsx
-import { DevtoolsVirtualList } from "nice-devtools-shared";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var getGroupKey = (group) => group.oldest.cuid;
-function ChangeList({
-  groups,
-  selectedCuid,
-  onSelect,
-  showStore,
-  style
-}) {
-  return /* @__PURE__ */ jsx4(DevtoolsVirtualList, {
-    items: groups,
-    getItemKey: getGroupKey,
-    selectedKey: selectedCuid,
-    estimateSize: 44,
-    overscan: 12,
-    style,
-    empty: /* @__PURE__ */ jsx4("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__ */ jsx4(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__ */ jsxs4("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__ */ jsxs4("div", {
-        style: { display: "flex", alignItems: "center", gap: "6px" },
-        children: [
-          /* @__PURE__ */ jsx4("span", {
-            style: {
-              color: DEVTOOL_COLOR_TEXT_MUTED,
-              fontSize: "10px",
-              fontFamily: MONO_FONT,
-              flexShrink: 0
-            },
-            children: formatTimestamp(change.timestamp)
-          }),
-          /* @__PURE__ */ jsx4(Badge, {
-            color: sourceColor,
-            children: SOURCE_LABEL[change.source]
-          }),
-          count > 1 && /* @__PURE__ */ jsxs4("span", {
-            title: `${count} consecutive identical updates`,
-            style: {
-              flexShrink: 0,
-              padding: "0 5px",
-              borderRadius: "999px",
-              background: DEVTOOL_SECTION_BACKGROUND,
-              color: DEVTOOL_COLOR_TEXT_SECONDARY,
-              fontSize: "9px",
-              fontWeight: 700,
-              fontFamily: MONO_FONT
-            },
-            children: [
-              "×",
-              count
-            ]
-          }),
-          showStore && /* @__PURE__ */ jsx4("span", {
-            style: {
-              color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
-              fontSize: "10px",
-              fontFamily: MONO_FONT,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            },
-            children: change.storeLabel
-          }),
-          /* @__PURE__ */ jsx4("span", {
-            style: { flex: 1 }
-          }),
-          change.patches.length > 0 && /* @__PURE__ */ jsxs4("span", {
-            style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0 },
-            children: [
-              change.patches.length,
-              " patch",
-              change.patches.length === 1 ? "" : "es"
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx4("div", {
-        style: {
-          color: DEVTOOL_COLOR_TEXT_SECONDARY,
-          fontSize: "11px",
-          fontFamily: MONO_FONT,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: summarizeChange(change)
-      })
-    ]
-  });
+//#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__ */ jsxs("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			minHeight: 0,
+			background: DEVTOOL_DETAIL_BASE_BACKGROUND
+		},
+		children: [
+			/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { style: { flex: 1 } }),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							color: DEVTOOL_COLOR_TEXT_MUTED,
+							fontSize: "10px",
+							fontFamily: MONO_FONT
+						},
+						children: formatTimestamp(change.timestamp)
+					}),
+					/* @__PURE__ */ 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__ */ jsx("div", {
+				style: {
+					padding: "6px 12px",
+					borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ 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__ */ jsxs("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					minHeight: 0,
+					padding: "10px 12px"
+				},
+				children: [
+					(showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							alignItems: "center",
+							gap: "14px",
+							marginBottom: "8px"
+						},
+						children: [showCompressToggle && /* @__PURE__ */ 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__ */ 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__ */ jsx(DiffView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						latestFirst
+					}),
+					view === "diff" && /* @__PURE__ */ jsx(JsonDiffView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						compress,
+						latestFirst
+					}),
+					view === "before" && /* @__PURE__ */ jsx(HighlightedJsonView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						side: "before",
+						compress
+					}),
+					view === "after" && /* @__PURE__ */ jsx(HighlightedJsonView, {
+						before: change.prevSnapshot,
+						after: change.snapshot,
+						side: "after",
+						compress
+					})
+				]
+			})
+		]
+	});
+}
+function ToggleCheckbox({ checked, onChange, label, title }) {
+	return /* @__PURE__ */ 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__ */ 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__ */ jsx(DevtoolsVirtualList, {
+		items: groups,
+		getItemKey: getGroupKey,
+		selectedKey: selectedCuid,
+		estimateSize: 44,
+		overscan: 12,
+		style,
+		empty: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: "6px"
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						color: DEVTOOL_COLOR_TEXT_MUTED,
+						fontSize: "10px",
+						fontFamily: MONO_FONT,
+						flexShrink: 0
+					},
+					children: formatTimestamp(change.timestamp)
+				}),
+				/* @__PURE__ */ jsx(Badge, {
+					color: sourceColor,
+					children: SOURCE_LABEL[change.source]
+				}),
+				count > 1 && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { style: { flex: 1 } }),
+				change.patches.length > 0 && /* @__PURE__ */ jsxs("span", {
+					style: {
+						color: "#334155",
+						fontSize: "10px",
+						flexShrink: 0
+					},
+					children: [
+						change.patches.length,
+						" patch",
+						change.patches.length === 1 ? "" : "es"
+					]
+				})
+			]
+		}), /* @__PURE__ */ 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__ */ jsx4("span", {
-    style: {
-      flexShrink: 0,
-      padding: "1px 6px",
-      borderRadius: "999px",
-      background: color,
-      color: "#0f172a",
-      fontSize: "8px",
-      fontWeight: 700,
-      letterSpacing: "0.08em",
-      fontFamily: SANS_FONT
-    },
-    children
-  });
+	return /* @__PURE__ */ 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
+	});
 }
-
-// src/devtools/browser/components/StateInspector.tsx
-import { useEffect, useState } from "react";
-
-// src/devtools/browser/components/SectionLabel.tsx
-import { SectionLabel } from "nice-devtools-shared";
-
-// src/devtools/browser/components/StateInspector.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function StateInspector({
-  store,
-  onApply
-}) {
-  const liveText = safeStringify2(store.currentState, 2);
-  const [draft, setDraft] = useState(liveText);
-  const [dirty, setDirty] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    setDraft(liveText);
-    setDirty(false);
-    setError(null);
-  }, [store.id]);
-  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__ */ jsxs5("div", {
-    style: {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden",
-      minHeight: 0,
-      background: DEVTOOL_DETAIL_BASE_BACKGROUND
-    },
-    children: [
-      /* @__PURE__ */ jsxs5("div", {
-        style: {
-          flex: 1,
-          minHeight: 0,
-          display: "flex",
-          flexDirection: "column",
-          padding: "10px 12px 8px"
-        },
-        children: [
-          /* @__PURE__ */ jsx5(SectionLabel, {
-            label: "Current state"
-          }),
-          /* @__PURE__ */ jsx5("div", {
-            style: { flex: 1, minHeight: 0, overflow: "auto" },
-            children: /* @__PURE__ */ jsx5(JsonView, {
-              value: store.currentState,
-              style: { minHeight: "100%" }
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs5("div", {
-        style: {
-          flex: 1,
-          minHeight: 0,
-          display: "flex",
-          flexDirection: "column",
-          padding: "8px 12px 10px",
-          borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
-        },
-        children: [
-          /* @__PURE__ */ jsxs5("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginBottom: "3px"
-            },
-            children: [
-              /* @__PURE__ */ jsx5(SectionLabel, {
-                label: "Edit & apply",
-                color: DEVTOOL_COLOR_SEMANTIC_WARNING
-              }),
-              dirty && /* @__PURE__ */ jsx5("button", {
-                onClick: reload,
-                style: linkButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
-                children: "reload from store"
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx5("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__ */ jsx5("div", {
-            style: {
-              marginTop: "6px",
-              padding: "6px 8px",
-              borderRadius: "4px",
-              background: DEVTOOL_ERROR_BACKGROUND,
-              color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-              fontFamily: MONO_FONT,
-              fontSize: "10px",
-              flexShrink: 0
-            },
-            children: error
-          }),
-          /* @__PURE__ */ jsx5("div", {
-            style: { display: "flex", gap: "8px", marginTop: "8px", flexShrink: 0 },
-            children: /* @__PURE__ */ jsx5("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"
-            })
-          })
-        ]
-      })
-    ]
-  });
+//#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] = useState(liveText);
+	const [dirty, setDirty] = useState(false);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		setDraft(liveText);
+		setDirty(false);
+		setError(null);
+	}, [store.id]);
+	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__ */ jsxs("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			minHeight: 0,
+			background: DEVTOOL_DETAIL_BASE_BACKGROUND
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				padding: "10px 12px 8px"
+			},
+			children: [/* @__PURE__ */ jsx(SectionLabel, { label: "Current state" }), /* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					minHeight: 0,
+					overflow: "auto"
+				},
+				children: /* @__PURE__ */ jsx(JsonView, {
+					value: store.currentState,
+					style: { minHeight: "100%" }
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				padding: "8px 12px 10px",
+				borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						marginBottom: "3px"
+					},
+					children: [/* @__PURE__ */ jsx(SectionLabel, {
+						label: "Edit & apply",
+						color: DEVTOOL_COLOR_SEMANTIC_WARNING
+					}), dirty && /* @__PURE__ */ jsx("button", {
+						onClick: reload,
+						style: linkButtonStyle("#64748b"),
+						children: "reload from store"
+					})]
+				}),
+				/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+					style: {
+						display: "flex",
+						gap: "8px",
+						marginTop: "8px",
+						flexShrink: 0
+					},
+					children: /* @__PURE__ */ 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
-  };
+	return {
+		background: "none",
+		border: "none",
+		color,
+		cursor: "pointer",
+		fontSize: "10px",
+		padding: 0,
+		fontFamily: SANS_FONT
+	};
 }
-
-// src/devtools/browser/components/StoreTabs.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function StoreTabs({
-  stores,
-  selectedStoreId,
-  onSelect,
-  includeAll = true
-}) {
-  return /* @__PURE__ */ jsxs6("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__ */ jsx6(Pill, {
-        active: selectedStoreId == null,
-        onClick: () => onSelect(null),
-        label: "all"
-      }),
-      stores.length === 0 && /* @__PURE__ */ jsx6("span", {
-        style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "11px", padding: "2px 0" },
-        children: "no stores registered"
-      }),
-      stores.map((store) => /* @__PURE__ */ jsx6(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__ */ jsxs6("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__ */ jsx6("span", {
-        style: {
-          color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT,
-          fontSize: "10px"
-        },
-        children: count
-      })
-    ]
-  });
+//#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__ */ 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__ */ jsx(Pill, {
+				active: selectedStoreId == null,
+				onClick: () => onSelect(null),
+				label: "all"
+			}),
+			stores.length === 0 && /* @__PURE__ */ jsx("span", {
+				style: {
+					color: "#64748b",
+					fontSize: "11px",
+					padding: "2px 0"
+				},
+				children: "no stores registered"
+			}),
+			stores.map((store) => /* @__PURE__ */ jsx(Pill, {
+				active: selectedStoreId === store.id,
+				onClick: () => onSelect(store.id),
+				label: store.label,
+				count: store.changeCount
+			}, store.id))
+		]
+	});
 }
-
-// src/devtools/browser/NiceStateDevtools.tsx
-import { jsx as jsx7, jsxs as jsxs7, Fragment } from "react/jsx-runtime";
+function Pill({ active, onClick, label, count }) {
+	return /* @__PURE__ */ 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__ */ 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 = `
+	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; }
@@ -1507,342 +2484,338 @@ if (typeof document !== "undefined" && !document.getElementById("__nice-state-de
     #__nice-state-devtools-panel select,
     #__nice-state-devtools-panel textarea { all: revert; font-family: inherit; }
   `;
-  document.head?.appendChild(style);
+	document.head?.appendChild(style);
 }
-var PREFS_KEY = "__nice-state-devtools-prefs";
-var DOCKED_HEIGHT_DEFAULT = 340;
-var DOCKED_WIDTH_DEFAULT = 330;
-var DETAIL_RATIO_DEFAULT = 0.5;
-var DOCK_POSITIONS = ["dock-bottom", "dock-top", "dock-left", "dock-right"];
+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);
+	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;
-  }
+	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;
-  }
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch {
+		return;
+	}
 }
-var EMPTY_SNAPSHOT = { stores: [], changes: [], paused: false };
+const EMPTY_SNAPSHOT = {
+	stores: [],
+	changes: [],
+	paused: false
+};
 function NiceStateDevtools({ forceEnable, ...props }) {
-  if (!forceEnable && process["env"]["NODE_ENV"] !== "development") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx7(NiceStateDevtools_Panel, {
-    ...props
-  });
-}
-function NiceStateDevtools_Panel({
-  core,
-  position: defaultPosition = "dock-right",
-  initialOpen = false
-}) {
-  const [prefs, setPrefsRaw] = useState2(() => readPrefs(defaultPosition, initialOpen));
-  const [snapshot, setSnapshot] = useState2(EMPTY_SNAPSHOT);
-  const [mode, setMode] = useState2("timeline");
-  const [storeFilter, setStoreFilter] = useState2(null);
-  const [selectedChangeCuid, setSelectedChangeCuid] = useState2(null);
-  useEffect2(() => core.subscribe(setSnapshot), [core]);
-  const setPrefs = (update) => {
-    setPrefsRaw((prev) => ({ ...prev, ...update }));
-  };
-  useEffect2(() => {
-    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 = useMemo(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
-  const groups = useMemo(() => groupChanges(filteredChanges), [filteredChanges]);
-  const selectedChange = 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;
-  useEffect2(() => {
-    if (stayOnLatest && latestCuid != null)
-      setSelectedChangeCuid(latestCuid);
-  }, [stayOnLatest, latestCuid]);
-  const activeStore = stores.find((s) => s.id === storeFilter) ?? (stores.length > 0 ? stores[0] : null);
-  const dock = useMemo(() => getDevtoolsDockCoordinator(), []);
-  const panelId = useId();
-  const [, bumpView] = useReducer((n) => n + 1, 0);
-  const badge = changes.length > 0 ? String(changes.length) : undefined;
-  useEffect2(() => {
-    const unregister = dock.register({
-      id: panelId,
-      label: "state",
-      icon: "\uD83E\uDDE9",
-      side: dockSide,
-      size: dockedSize,
-      open: isOpen,
-      badge,
-      onOpen: () => setPrefs({ isOpen: true })
-    });
-    const unsubscribe = dock.subscribe(bumpView);
-    return () => {
-      unregister();
-      unsubscribe();
-    };
-  }, [dock, panelId]);
-  useEffect2(() => {
-    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__ */ jsx7(DevtoolsLauncher, {
-        items: view.devtools
-      });
-    }
-    return null;
-  }
-  const panelStyle = {
-    ...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"
-    }
-  };
-  return /* @__PURE__ */ jsxs7("div", {
-    id: "__nice-state-devtools-panel",
-    style: panelStyle,
-    children: [
-      /* @__PURE__ */ jsx7(ResizeHandle, {
-        dockSide,
-        dockedSize,
-        onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
-      }),
-      /* @__PURE__ */ jsx7(PanelHeader, {
-        title: "\uD83E\uDDE9 state",
-        position,
-        onPositionChange: (p) => setPrefs({ position: p }),
-        onClose: () => setPrefs({ isOpen: false }),
-        onClear: changes.length > 0 ? () => {
-          core.clear();
-          setSelectedChangeCuid(null);
-        } : undefined,
-        paused,
-        onTogglePause: () => core.togglePaused(),
-        openOthers: view.otherClosed,
-        children: /* @__PURE__ */ jsx7(SegmentedControl2, {
-          options: [
-            { value: "timeline", label: "Timeline" },
-            { value: "state", label: "State" }
-          ],
-          value: mode,
-          onChange: setMode
-        })
-      }),
-      /* @__PURE__ */ jsx7(StoreTabs, {
-        stores,
-        selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
-        onSelect: setStoreFilter,
-        includeAll: mode === "timeline"
-      }),
-      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsx7(StateInspector, {
-        store: activeStore,
-        onApply: (id, next) => core.applyEdit(id, next)
-      }) : /* @__PURE__ */ jsx7(EmptyMessage, {
-        children: "No stores registered. Call core.registerStore(...)."
-      }) : /* @__PURE__ */ jsxs7("div", {
-        style: {
-          flex: 1,
-          display: "flex",
-          flexDirection: isHorizDock ? "row" : "column",
-          overflow: "hidden",
-          minHeight: 0
-        },
-        children: [
-          /* @__PURE__ */ jsxs7("div", {
-            style: {
-              flexGrow: selectedChange != null ? 1 - detailRatio : 1,
-              flexShrink: 1,
-              flexBasis: 0,
-              minWidth: 0,
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden"
-            },
-            children: [
-              /* @__PURE__ */ jsx7(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__ */ jsx7("div", {
-                style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" },
-                children: /* @__PURE__ */ jsx7(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__ */ jsxs7(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx7(SplitHandle, {
-                horizontal: isHorizDock,
-                onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
-              }),
-              /* @__PURE__ */ jsx7("div", {
-                style: {
-                  flexGrow: detailRatio,
-                  flexShrink: 1,
-                  flexBasis: 0,
-                  minWidth: 0,
-                  minHeight: 0,
-                  display: "flex",
-                  flexDirection: "column",
-                  overflow: "hidden",
-                  ...isHorizDock ? {
-                    borderLeft: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
-                    boxShadow: "inset 18px 0 36px -14px rgba(0,0,0,0.8)"
-                  } : {
-                    borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`,
-                    boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
-                  }
-                },
-                children: /* @__PURE__ */ jsx7(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 })
-                })
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
+	if (!forceEnable && true) return null;
+	return /* @__PURE__ */ jsx(NiceStateDevtools_Panel, { ...props });
+}
+function NiceStateDevtools_Panel({ core, position: defaultPosition = "dock-right", initialOpen = false }) {
+	const [prefs, setPrefsRaw] = useState(() => readPrefs(defaultPosition, initialOpen));
+	const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
+	const [mode, setMode] = useState("timeline");
+	const [storeFilter, setStoreFilter] = useState(null);
+	const [selectedChangeCuid, setSelectedChangeCuid] = useState(null);
+	useEffect(() => core.subscribe(setSnapshot), [core]);
+	const setPrefs = (update) => {
+		setPrefsRaw((prev) => ({
+			...prev,
+			...update
+		}));
+	};
+	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 = useMemo(() => storeFilter == null ? changes : changes.filter((c) => c.storeId === storeFilter), [changes, storeFilter]);
+	const groups = useMemo(() => groupChanges(filteredChanges), [filteredChanges]);
+	const selectedChange = 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;
+	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 = useMemo(() => getDevtoolsDockCoordinator(), []);
+	const panelId = useId();
+	const [, bumpView] = useReducer((n) => n + 1, 0);
+	const badge = changes.length > 0 ? String(changes.length) : void 0;
+	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]);
+	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__ */ jsx(DevtoolsLauncher, { items: view.devtools });
+		return null;
+	}
+	return /* @__PURE__ */ 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__ */ jsx(ResizeHandle, {
+				dockSide,
+				dockedSize,
+				onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
+			}),
+			/* @__PURE__ */ 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__ */ jsx(SegmentedControl, {
+					options: [{
+						value: "timeline",
+						label: "Timeline"
+					}, {
+						value: "state",
+						label: "State"
+					}],
+					value: mode,
+					onChange: setMode
+				})
+			}),
+			/* @__PURE__ */ jsx(StoreTabs, {
+				stores,
+				selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
+				onSelect: setStoreFilter,
+				includeAll: mode === "timeline"
+			}),
+			mode === "state" ? activeStore != null ? /* @__PURE__ */ jsx(StateInspector, {
+				store: activeStore,
+				onApply: (id, next) => core.applyEdit(id, next)
+			}) : /* @__PURE__ */ jsx(EmptyMessage, { children: "No stores registered. Call core.registerStore(...)." }) : /* @__PURE__ */ jsxs("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					flexDirection: isHorizDock ? "row" : "column",
+					overflow: "hidden",
+					minHeight: 0
+				},
+				children: [/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
+						style: {
+							flex: 1,
+							minHeight: 0,
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SplitHandle, {
+					horizontal: isHorizDock,
+					onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
+				}), /* @__PURE__ */ 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__ */ 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__ */ jsx7("div", {
-    style: {
-      flex: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "24px",
-      textAlign: "center",
-      color: DEVTOOL_COLOR_TEXT_MUTED,
-      fontSize: "11px"
-    },
-    children
-  });
-}
-export {
-  StateDevtoolsCore,
-  NiceStateDevtools
-};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			flex: 1,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "24px",
+			textAlign: "center",
+			color: DEVTOOL_COLOR_TEXT_MUTED,
+			fontSize: "11px"
+		},
+		children
+	});
+}
+//#endregion
+export { NiceStateDevtools, StateDevtoolsCore };
+
+//# sourceMappingURL=index.js.map