@nice-code/state 0.4.3 → 0.4.5

package/build/devtools/browser/index.js

@@ -278,20 +278,55 @@ function walkDiff(path, before, after, out) {
       const inA = key in a;
       const next = [...path, key];
       if (inB && !inA) {
-        out.push({ path: formatDiffPath(next), kind: "removed", before: b[key] });
+        out.push({ path: formatDiffPath(next), segments: next, kind: "removed", before: b[key] });
       } else if (!inB && inA) {
-        out.push({ path: formatDiffPath(next), kind: "added", after: a[key] });
+        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), kind: "changed", before, after });
+  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(".");
 }
+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;
+}
 function isScalar(value) {
   return value == null || typeof value !== "object";
 }
@@ -379,6 +414,7 @@ function JsonView({
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-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 }) {
   const entries = computeDiff(before, after);
   if (entries.length === 0) {
@@ -394,16 +430,108 @@ function DiffView({ before, after }) {
       children: "No differences — before and after are structurally equal."
     }, undefined, false, undefined, this);
   }
+  const roots = [...buildTree(entries).children.values()].map(collapseChains);
   return /* @__PURE__ */ jsxDEV2("div", {
     style: { display: "flex", flexDirection: "column", gap: "6px" },
-    children: entries.map((entry) => /* @__PURE__ */ jsxDEV2(DiffRow, {
-      entry
-    }, `${entry.kind}:${entry.path}`, false, undefined, this))
+    children: roots.map((node) => /* @__PURE__ */ jsxDEV2(DiffNode, {
+      node
+    }, node.key, false, undefined, this))
   }, undefined, false, undefined, this);
 }
-function DiffRow({ entry }) {
+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;
+}
+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;
+}
+function DiffNode({ node }) {
+  if (node.entry != null && node.children.size === 0) {
+    return /* @__PURE__ */ jsxDEV2(DiffLeaf, {
+      label: node.key,
+      entry: node.entry
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "10px", fontWeight: 600 },
+        children: node.key
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2(DiffNode, {
+          node: child
+        }, child.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DiffLeaf({ label, entry }) {
   const showRemoved = entry.kind === "removed" || entry.kind === "changed";
   const showAdded = entry.kind === "added" || entry.kind === "changed";
+  if (isInlineLeaf(entry)) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "6px" },
+      children: [
+        /* @__PURE__ */ jsxDEV2("span", {
+          style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "11px" },
+          children: [
+            label,
+            ":"
+          ]
+        }, undefined, true, undefined, this),
+        showRemoved && /* @__PURE__ */ jsxDEV2(InlineValue, {
+          sign: "−",
+          color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+          background: REMOVED_BG,
+          value: entry.before
+        }, undefined, false, undefined, this),
+        entry.kind === "changed" && /* @__PURE__ */ jsxDEV2("span", {
+          style: { color: DEVTOOL_COLOR_TEXT_MUTED },
+          children: "→"
+        }, undefined, false, undefined, this),
+        showAdded && /* @__PURE__ */ jsxDEV2(InlineValue, {
+          sign: "+",
+          color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+          background: ADDED_BG,
+          value: entry.after
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
   return /* @__PURE__ */ jsxDEV2("div", {
     style: {
       borderRadius: "4px",
@@ -415,11 +543,11 @@ function DiffRow({ entry }) {
         style: {
           padding: "3px 8px",
           background: DEVTOOL_SECTION_STRING_BACKGROUND,
-          color: DEVTOOL_COLOR_TEXT_SECONDARY,
+          color: DEVTOOL_JSON_KEY,
           fontFamily: MONO_FONT,
           fontSize: "10px"
         },
-        children: entry.path
+        children: label
       }, undefined, false, undefined, this),
       showRemoved && /* @__PURE__ */ jsxDEV2(DiffLine, {
         sign: "−",
@@ -436,6 +564,36 @@ function DiffRow({ entry }) {
     ]
   }, undefined, true, undefined, this);
 }
+function InlineValue({
+  sign,
+  color,
+  background,
+  value
+}) {
+  return /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("span", {
+        style: { color, fontWeight: 700, userSelect: "none" },
+        children: sign
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        children: renderColoredJson(compactStringify(value))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 function DiffLine({
   sign,
   color,
@@ -464,12 +622,112 @@ function DiffLine({
     ]
   }, undefined, true, undefined, this);
 }
+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(`
+`));
+}
+function compactStringify(value) {
+  if (value === undefined)
+    return "undefined";
+  try {
+    return JSON.stringify(value) ?? "undefined";
+  } catch {
+    return String(value);
+  }
+}
+
+// src/devtools/browser/components/JsonDiffView.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-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"
+};
+function emptyNotice(text) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      padding: "10px",
+      borderRadius: "4px",
+      background: DEVTOOL_SECTION_STRING_BACKGROUND,
+      color: DEVTOOL_COLOR_TEXT_MUTED,
+      fontSize: "11px",
+      fontStyle: "italic"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+}
+function Line({ sign, color, background, text }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
+    children: [
+      /* @__PURE__ */ jsxDEV3("span", {
+        style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
+        children: sign
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("span", {
+        style: { flex: 1, minWidth: 0 },
+        children: renderColoredJson(text)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function JsonDiffView({ before, after }) {
+  const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
+  if (!ops.some((op) => op.kind !== "common")) {
+    return emptyNotice("No differences — before and after are structurally equal.");
+  }
+  return /* @__PURE__ */ jsxDEV3("pre", {
+    style: SURFACE_STYLE,
+    children: ops.map((op, i) => /* @__PURE__ */ jsxDEV3(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, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function HighlightedJsonView({
+  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_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__ */ jsxDEV3("pre", {
+    style: SURFACE_STYLE,
+    children: visible.map((op, i) => {
+      const changed = op.kind === highlightKind;
+      return /* @__PURE__ */ jsxDEV3(Line, {
+        sign: changed ? side === "before" ? "−" : "+" : " ",
+        color,
+        background: changed ? background : "transparent",
+        text: op.text
+      }, i, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
 
 // src/devtools/browser/components/PanelChrome.tsx
 import {
   useState
 } from "react";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
 var DOCKED_SIZE_MIN = 160;
 var POSITION_GRID = [
   { key: "tl", pos: null },
@@ -504,7 +762,7 @@ function PanelHeader({
   openOthers,
   children
 }) {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -516,10 +774,10 @@ function PanelHeader({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
         children: [
-          /* @__PURE__ */ jsxDEV3("span", {
+          /* @__PURE__ */ jsxDEV4("span", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontWeight: "bold",
@@ -528,7 +786,7 @@ function PanelHeader({
             },
             children: "\uD83E\uDDE9 state"
           }, undefined, false, undefined, this),
-          openOthers?.map((item) => /* @__PURE__ */ jsxDEV3("button", {
+          openOthers?.map((item) => /* @__PURE__ */ jsxDEV4("button", {
             onClick: item.onOpen,
             title: `Open ${item.label} devtools`,
             style: {
@@ -546,13 +804,13 @@ function PanelHeader({
               whiteSpace: "nowrap"
             },
             children: [
-              /* @__PURE__ */ jsxDEV3("span", {
+              /* @__PURE__ */ jsxDEV4("span", {
                 children: item.icon
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("span", {
+              /* @__PURE__ */ jsxDEV4("span", {
                 children: item.label
               }, undefined, false, undefined, this),
-              item.badge != null && /* @__PURE__ */ jsxDEV3("span", {
+              item.badge != null && /* @__PURE__ */ jsxDEV4("span", {
                 style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
                 children: item.badge
               }, undefined, false, undefined, this)
@@ -560,26 +818,26 @@ function PanelHeader({
           }, item.id, true, undefined, this))
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV3("div", {
+      /* @__PURE__ */ jsxDEV4("div", {
         style: { display: "flex", gap: "10px", alignItems: "center" },
         children: [
           children,
-          /* @__PURE__ */ jsxDEV3("button", {
+          /* @__PURE__ */ jsxDEV4("button", {
             onClick: onTogglePause,
             title: paused ? "Resume recording" : "Pause recording",
             style: chromeButtonStyle(paused ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED),
             children: paused ? "▶ resume" : "⏸ pause"
           }, undefined, false, undefined, this),
-          onClear != null && /* @__PURE__ */ jsxDEV3("button", {
+          onClear != null && /* @__PURE__ */ jsxDEV4("button", {
             onClick: onClear,
             style: chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
             children: "clear"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3(PositionPicker, {
+          /* @__PURE__ */ jsxDEV4(PositionPicker, {
             position,
             onChange: onPositionChange
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("button", {
+          /* @__PURE__ */ jsxDEV4("button", {
             onClick: onClose,
             style: {
               ...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
@@ -609,17 +867,17 @@ function PositionPicker({
   position,
   onChange
 }) {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("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__ */ jsxDEV3("div", {
+        return /* @__PURE__ */ jsxDEV4("div", {
           style: { width: "9px", height: "9px" }
         }, key, false, undefined, this);
       const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
       const isActive = pos === position;
-      return /* @__PURE__ */ jsxDEV3("div", {
+      return /* @__PURE__ */ jsxDEV4("div", {
         title: pos,
         onClick: () => onChange(pos),
         style: {
@@ -630,7 +888,7 @@ function PositionPicker({
           justifyContent: "center",
           cursor: "pointer"
         },
-        children: /* @__PURE__ */ jsxDEV3("div", {
+        children: /* @__PURE__ */ jsxDEV4("div", {
           style: {
             width: isTopBottom ? "9px" : "3px",
             height: isTopBottom ? "3px" : "9px",
@@ -666,7 +924,7 @@ function ResizeHandle({
     window.addEventListener("mouseup", onUp);
   };
   const edgeStyle = 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" };
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     onMouseDown,
     style: { position: "absolute", zIndex: 10, background: "transparent", ...edgeStyle }
   }, undefined, false, undefined, this);
@@ -695,7 +953,7 @@ function SplitHandle({
     window.addEventListener("mousemove", onMove);
     window.addEventListener("mouseup", onUp);
   };
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     onMouseDown,
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false),
@@ -714,7 +972,7 @@ function SegmentedControl({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     style: {
       display: "flex",
       border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
@@ -723,7 +981,7 @@ function SegmentedControl({
     },
     children: options.map((opt) => {
       const active = opt.value === value;
-      return /* @__PURE__ */ jsxDEV3("button", {
+      return /* @__PURE__ */ jsxDEV4("button", {
         onClick: () => onChange(opt.value),
         style: {
           background: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
@@ -741,7 +999,7 @@ function SegmentedControl({
   }, undefined, false, undefined, this);
 }
 function DevtoolsLauncher({ items }) {
-  return /* @__PURE__ */ jsxDEV3("div", {
+  return /* @__PURE__ */ jsxDEV4("div", {
     style: {
       position: "fixed",
       bottom: "16px",
@@ -751,7 +1009,7 @@ function DevtoolsLauncher({ items }) {
       fontFamily: MONO_FONT,
       fontSize: "12px"
     },
-    children: /* @__PURE__ */ jsxDEV3("div", {
+    children: /* @__PURE__ */ jsxDEV4("div", {
       style: {
         display: "flex",
         background: DEVTOOL_SECTION_BACKGROUND,
@@ -760,7 +1018,7 @@ function DevtoolsLauncher({ items }) {
         overflow: "hidden",
         boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
       },
-      children: items.map((item, i) => /* @__PURE__ */ jsxDEV3("button", {
+      children: items.map((item, i) => /* @__PURE__ */ jsxDEV4("button", {
         onClick: item.onOpen,
         style: {
           display: "flex",
@@ -777,13 +1035,13 @@ function DevtoolsLauncher({ items }) {
           lineHeight: "1.5"
         },
         children: [
-          /* @__PURE__ */ jsxDEV3("span", {
+          /* @__PURE__ */ jsxDEV4("span", {
             children: item.icon
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV3("span", {
+          /* @__PURE__ */ jsxDEV4("span", {
             children: item.label
           }, undefined, false, undefined, this),
-          item.badge != null && /* @__PURE__ */ jsxDEV3("span", {
+          item.badge != null && /* @__PURE__ */ jsxDEV4("span", {
             style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
             children: item.badge
           }, undefined, false, undefined, this)
@@ -794,14 +1052,14 @@ function DevtoolsLauncher({ items }) {
 }
 
 // src/devtools/browser/components/ChangeDetailPanel.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 function ChangeDetailPanel({
   change,
   onRevert
 }) {
-  const [view, setView] = useState2("diff");
+  const [view, setView] = useState2("props");
   const canRevert = change.inversePatches.length > 0;
-  return /* @__PURE__ */ jsxDEV4("div", {
+  return /* @__PURE__ */ jsxDEV5("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -811,7 +1069,7 @@ function ChangeDetailPanel({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV5("div", {
         style: {
           padding: "8px 12px",
           background: DEVTOOL_DETAIL_HEADER_BACKGROUND,
@@ -822,7 +1080,7 @@ function ChangeDetailPanel({
           flexShrink: 0
         },
         children: [
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV5("span", {
             style: {
               color: DEVTOOL_COLOR_TEXT_EMPHASIS,
               fontWeight: 600,
@@ -834,7 +1092,7 @@ function ChangeDetailPanel({
             },
             children: change.storeLabel
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV5("span", {
             style: {
               padding: "1px 7px",
               borderRadius: "999px",
@@ -847,14 +1105,14 @@ function ChangeDetailPanel({
             },
             children: SOURCE_LABEL[change.source]
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV5("span", {
             style: { flex: 1 }
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("span", {
+          /* @__PURE__ */ jsxDEV5("span", {
             style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: MONO_FONT },
             children: formatTimestamp(change.timestamp)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("button", {
+          /* @__PURE__ */ jsxDEV5("button", {
             onClick: () => onRevert(change),
             disabled: !canRevert,
             title: canRevert ? "Apply this change's inverse patches to undo it" : "No inverse patches available to revert",
@@ -873,14 +1131,15 @@ function ChangeDetailPanel({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV5("div", {
         style: {
           padding: "6px 12px",
           borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
           flexShrink: 0
         },
-        children: /* @__PURE__ */ jsxDEV4(SegmentedControl, {
+        children: /* @__PURE__ */ jsxDEV5(SegmentedControl, {
           options: [
+            { value: "props", label: "Diff Props" },
             { value: "diff", label: "Diff View" },
             { value: "before", label: "Before" },
             { value: "after", label: "After" }
@@ -889,7 +1148,7 @@ function ChangeDetailPanel({
           onChange: setView
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("div", {
+      /* @__PURE__ */ jsxDEV5("div", {
         style: {
           flex: 1,
           overflowY: "auto",
@@ -897,15 +1156,23 @@ function ChangeDetailPanel({
           padding: "10px 12px"
         },
         children: [
-          view === "diff" && /* @__PURE__ */ jsxDEV4(DiffView, {
+          view === "props" && /* @__PURE__ */ jsxDEV5(DiffView, {
             before: change.prevSnapshot,
             after: change.snapshot
           }, undefined, false, undefined, this),
-          view === "before" && /* @__PURE__ */ jsxDEV4(JsonView, {
-            value: change.prevSnapshot
+          view === "diff" && /* @__PURE__ */ jsxDEV5(JsonDiffView, {
+            before: change.prevSnapshot,
+            after: change.snapshot
+          }, undefined, false, undefined, this),
+          view === "before" && /* @__PURE__ */ jsxDEV5(HighlightedJsonView, {
+            before: change.prevSnapshot,
+            after: change.snapshot,
+            side: "before"
           }, undefined, false, undefined, this),
-          view === "after" && /* @__PURE__ */ jsxDEV4(JsonView, {
-            value: change.snapshot
+          view === "after" && /* @__PURE__ */ jsxDEV5(HighlightedJsonView, {
+            before: change.prevSnapshot,
+            after: change.snapshot,
+            side: "after"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -914,7 +1181,7 @@ function ChangeDetailPanel({
 }
 
 // src/devtools/browser/components/ChangeList.tsx
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 function ChangeList({
   changes,
   selectedCuid,
@@ -923,7 +1190,7 @@ function ChangeList({
   style
 }) {
   if (changes.length === 0) {
-    return /* @__PURE__ */ jsxDEV5("div", {
+    return /* @__PURE__ */ jsxDEV6("div", {
       style: {
         padding: "24px",
         textAlign: "center",
@@ -934,9 +1201,9 @@ function ChangeList({
       children: "No changes recorded yet. Mutate a store to see it here."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     style,
-    children: changes.map((change) => /* @__PURE__ */ jsxDEV5(ChangeRow, {
+    children: changes.map((change) => /* @__PURE__ */ jsxDEV6(ChangeRow, {
       change,
       selected: change.cuid === selectedCuid,
       onClick: () => onSelect(change.cuid),
@@ -951,7 +1218,7 @@ function ChangeRow({
   showStore
 }) {
   const sourceColor = SOURCE_COLOR[change.source];
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     onClick,
     style: {
       display: "flex",
@@ -964,10 +1231,10 @@ function ChangeRow({
       background: selected ? DEVTOOL_LIST_SELECTED_BACKGROUND : DEVTOOL_LIST_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         style: { display: "flex", alignItems: "center", gap: "6px" },
         children: [
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV6("span", {
             style: {
               color: DEVTOOL_COLOR_TEXT_MUTED,
               fontSize: "10px",
@@ -976,11 +1243,11 @@ function ChangeRow({
             },
             children: formatTimestamp(change.timestamp)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(Badge, {
+          /* @__PURE__ */ jsxDEV6(Badge, {
             color: sourceColor,
             children: SOURCE_LABEL[change.source]
           }, undefined, false, undefined, this),
-          showStore && /* @__PURE__ */ jsxDEV5("span", {
+          showStore && /* @__PURE__ */ jsxDEV6("span", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
               fontSize: "10px",
@@ -991,10 +1258,10 @@ function ChangeRow({
             },
             children: change.storeLabel
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5("span", {
+          /* @__PURE__ */ jsxDEV6("span", {
             style: { flex: 1 }
           }, undefined, false, undefined, this),
-          change.patches.length > 0 && /* @__PURE__ */ jsxDEV5("span", {
+          change.patches.length > 0 && /* @__PURE__ */ jsxDEV6("span", {
             style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0 },
             children: [
               change.patches.length,
@@ -1004,7 +1271,7 @@ function ChangeRow({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         style: {
           color: DEVTOOL_COLOR_TEXT_SECONDARY,
           fontSize: "11px",
@@ -1019,7 +1286,7 @@ function ChangeRow({
   }, undefined, true, undefined, this);
 }
 function Badge({ color, children }) {
-  return /* @__PURE__ */ jsxDEV5("span", {
+  return /* @__PURE__ */ jsxDEV6("span", {
     style: {
       flexShrink: 0,
       padding: "1px 6px",
@@ -1039,12 +1306,12 @@ function Badge({ color, children }) {
 import { useEffect, useState as useState3 } from "react";
 
 // src/devtools/browser/components/SectionLabel.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
 function SectionLabel({
   label,
   color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
 }) {
-  return /* @__PURE__ */ jsxDEV6("div", {
+  return /* @__PURE__ */ jsxDEV7("div", {
     style: {
       color,
       fontSize: "0.85em",
@@ -1059,7 +1326,7 @@ function SectionLabel({
 }
 
 // src/devtools/browser/components/StateInspector.tsx
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
 function StateInspector({
   store,
   onApply
@@ -1099,7 +1366,7 @@ function StateInspector({
     setDirty(false);
     setError(null);
   };
-  return /* @__PURE__ */ jsxDEV7("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     style: {
       flex: 1,
       display: "flex",
@@ -1109,7 +1376,7 @@ function StateInspector({
       background: DEVTOOL_DETAIL_BASE_BACKGROUND
     },
     children: [
-      /* @__PURE__ */ jsxDEV7("div", {
+      /* @__PURE__ */ jsxDEV8("div", {
         style: {
           flex: 1,
           minHeight: 0,
@@ -1118,19 +1385,19 @@ function StateInspector({
           padding: "10px 12px 8px"
         },
         children: [
-          /* @__PURE__ */ jsxDEV7(SectionLabel, {
+          /* @__PURE__ */ jsxDEV8(SectionLabel, {
             label: "Current state"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("div", {
+          /* @__PURE__ */ jsxDEV8("div", {
             style: { flex: 1, minHeight: 0, overflow: "auto" },
-            children: /* @__PURE__ */ jsxDEV7(JsonView, {
+            children: /* @__PURE__ */ jsxDEV8(JsonView, {
               value: store.currentState,
               style: { minHeight: "100%" }
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV7("div", {
+      /* @__PURE__ */ jsxDEV8("div", {
         style: {
           flex: 1,
           minHeight: 0,
@@ -1140,7 +1407,7 @@ function StateInspector({
           borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
         },
         children: [
-          /* @__PURE__ */ jsxDEV7("div", {
+          /* @__PURE__ */ jsxDEV8("div", {
             style: {
               display: "flex",
               alignItems: "center",
@@ -1148,18 +1415,18 @@ function StateInspector({
               marginBottom: "3px"
             },
             children: [
-              /* @__PURE__ */ jsxDEV7(SectionLabel, {
+              /* @__PURE__ */ jsxDEV8(SectionLabel, {
                 label: "Edit & apply",
                 color: DEVTOOL_COLOR_SEMANTIC_WARNING
               }, undefined, false, undefined, this),
-              dirty && /* @__PURE__ */ jsxDEV7("button", {
+              dirty && /* @__PURE__ */ jsxDEV8("button", {
                 onClick: reload,
                 style: linkButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
                 children: "reload from store"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV7("textarea", {
+          /* @__PURE__ */ jsxDEV8("textarea", {
             value: draft,
             spellCheck: false,
             onChange: (e) => onEdit(e.target.value),
@@ -1179,7 +1446,7 @@ function StateInspector({
               lineHeight: 1.5
             }
           }, undefined, false, undefined, this),
-          error != null && /* @__PURE__ */ jsxDEV7("div", {
+          error != null && /* @__PURE__ */ jsxDEV8("div", {
             style: {
               marginTop: "6px",
               padding: "6px 8px",
@@ -1192,9 +1459,9 @@ function StateInspector({
             },
             children: error
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV7("div", {
+          /* @__PURE__ */ jsxDEV8("div", {
             style: { display: "flex", gap: "8px", marginTop: "8px", flexShrink: 0 },
-            children: /* @__PURE__ */ jsxDEV7("button", {
+            children: /* @__PURE__ */ jsxDEV8("button", {
               onClick: apply,
               disabled: !dirty,
               style: {
@@ -1229,14 +1496,14 @@ function linkButtonStyle(color) {
 }
 
 // src/devtools/browser/components/StoreTabs.tsx
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
 function StoreTabs({
   stores,
   selectedStoreId,
   onSelect,
   includeAll = true
 }) {
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     style: {
       display: "flex",
       gap: "6px",
@@ -1247,16 +1514,16 @@ function StoreTabs({
       flexShrink: 0
     },
     children: [
-      includeAll && /* @__PURE__ */ jsxDEV8(Pill, {
+      includeAll && /* @__PURE__ */ jsxDEV9(Pill, {
         active: selectedStoreId == null,
         onClick: () => onSelect(null),
         label: "all"
       }, undefined, false, undefined, this),
-      stores.length === 0 && /* @__PURE__ */ jsxDEV8("span", {
+      stores.length === 0 && /* @__PURE__ */ jsxDEV9("span", {
         style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "11px", padding: "2px 0" },
         children: "no stores registered"
       }, undefined, false, undefined, this),
-      stores.map((store) => /* @__PURE__ */ jsxDEV8(Pill, {
+      stores.map((store) => /* @__PURE__ */ jsxDEV9(Pill, {
         active: selectedStoreId === store.id,
         onClick: () => onSelect(store.id),
         label: store.label,
@@ -1271,7 +1538,7 @@ function Pill({
   label,
   count
 }) {
-  return /* @__PURE__ */ jsxDEV8("button", {
+  return /* @__PURE__ */ jsxDEV9("button", {
     onClick,
     style: {
       display: "flex",
@@ -1290,7 +1557,7 @@ function Pill({
     },
     children: [
       label,
-      count != null && count > 0 && /* @__PURE__ */ jsxDEV8("span", {
+      count != null && count > 0 && /* @__PURE__ */ jsxDEV9("span", {
         style: {
           color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT,
           fontSize: "10px"
@@ -1303,7 +1570,7 @@ function Pill({
 
 // src/devtools/browser/devtools_dock.ts
 var GLOBAL_KEY = "__NICE_DEVTOOLS_DOCK__";
-var VERSION = 2;
+var VERSION = 4;
 function createCoordinator() {
   const panels = new Map;
   const listeners = new Set;
@@ -1363,17 +1630,25 @@ function createCoordinator() {
       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)
-            break;
-          if (panel.open && panel.side === self.side)
-            dockOffset += panel.size;
+          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),
@@ -1401,7 +1676,7 @@ function getDevtoolsDockCoordinator() {
 }
 
 // src/devtools/browser/NiceStateDevtools.tsx
-import { jsxDEV as jsxDEV9, Fragment } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10, Fragment } from "react/jsx-dev-runtime";
 if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
   const style = document.createElement("style");
   style.id = "__nice-state-devtools-styles";
@@ -1432,7 +1707,8 @@ function readPrefs(defaultPosition, initialOpen) {
     isOpen: initialOpen,
     dockedHeight: DOCKED_HEIGHT_DEFAULT,
     dockedWidth: DOCKED_WIDTH_DEFAULT,
-    detailRatio: DETAIL_RATIO_DEFAULT
+    detailRatio: DETAIL_RATIO_DEFAULT,
+    stayOnLatest: false
   };
   try {
     if (typeof localStorage === "undefined")
@@ -1456,7 +1732,7 @@ function writePrefs(prefs) {
 var EMPTY_SNAPSHOT = { stores: [], changes: [], paused: false };
 function NiceStateDevtools(props) {
   if (false) {}
-  return /* @__PURE__ */ jsxDEV9(NiceStateDevtools_Panel, {
+  return /* @__PURE__ */ jsxDEV10(NiceStateDevtools_Panel, {
     ...props
   }, undefined, false, undefined, this);
 }
@@ -1479,12 +1755,17 @@ function NiceStateDevtools_Panel({
     return () => clearTimeout(timer);
   }, [prefs]);
   const { stores, changes, paused } = snapshot;
-  const { position, isOpen, dockedHeight, dockedWidth, detailRatio } = prefs;
+  const { position, isOpen, dockedHeight, dockedWidth, detailRatio, stayOnLatest } = 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 selectedChange = selectedChangeCuid != null ? changes.find((c) => c.cuid === selectedChangeCuid) ?? null : null;
+  const latestCuid = filteredChanges.length > 0 ? filteredChanges[0].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();
@@ -1519,7 +1800,7 @@ function NiceStateDevtools_Panel({
   };
   if (!isOpen) {
     if (view.isPrimary && !view.anyOpen) {
-      return /* @__PURE__ */ jsxDEV9(DevtoolsLauncher, {
+      return /* @__PURE__ */ jsxDEV10(DevtoolsLauncher, {
         items: view.devtools
       }, undefined, false, undefined, this);
     }
@@ -1539,37 +1820,37 @@ function NiceStateDevtools_Panel({
       left: 0,
       right: 0,
       height: `${dockedSize}px`,
-      borderRadius: "8px 8px 0 0"
+      borderRadius: view.stacked ? "0" : "8px 8px 0 0"
     } : dockSide === "top" ? {
       top: view.dockOffset,
       left: 0,
       right: 0,
       height: `${dockedSize}px`,
-      borderRadius: "0 0 8px 8px"
+      borderRadius: view.stacked ? "0" : "0 0 8px 8px"
     } : dockSide === "left" ? {
       top: 0,
       left: view.dockOffset,
       bottom: 0,
       width: `${dockedSize}px`,
-      borderRadius: "0 8px 8px 0"
+      borderRadius: view.stacked ? "0" : "0 8px 8px 0"
     } : {
       top: 0,
       right: view.dockOffset,
       bottom: 0,
       width: `${dockedSize}px`,
-      borderRadius: "8px 0 0 8px"
+      borderRadius: view.stacked ? "0" : "8px 0 0 8px"
     }
   };
-  return /* @__PURE__ */ jsxDEV9("div", {
+  return /* @__PURE__ */ jsxDEV10("div", {
     id: "__nice-state-devtools-panel",
     style: panelStyle,
     children: [
-      /* @__PURE__ */ jsxDEV9(ResizeHandle, {
+      /* @__PURE__ */ jsxDEV10(ResizeHandle, {
         dockSide,
         dockedSize,
         onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(PanelHeader, {
+      /* @__PURE__ */ jsxDEV10(PanelHeader, {
         position,
         onPositionChange: (p) => setPrefs({ position: p }),
         onClose: () => setPrefs({ isOpen: false }),
@@ -1580,7 +1861,7 @@ function NiceStateDevtools_Panel({
         paused,
         onTogglePause: () => core.togglePaused(),
         openOthers: view.otherClosed,
-        children: /* @__PURE__ */ jsxDEV9(SegmentedControl, {
+        children: /* @__PURE__ */ jsxDEV10(SegmentedControl, {
           options: [
             { value: "timeline", label: "Timeline" },
             { value: "state", label: "State" }
@@ -1589,18 +1870,18 @@ function NiceStateDevtools_Panel({
           onChange: setMode
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(StoreTabs, {
+      /* @__PURE__ */ jsxDEV10(StoreTabs, {
         stores,
         selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
         onSelect: setStoreFilter,
         includeAll: mode === "timeline"
       }, undefined, false, undefined, this),
-      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsxDEV9(StateInspector, {
+      mode === "state" ? activeStore != null ? /* @__PURE__ */ jsxDEV10(StateInspector, {
         store: activeStore,
         onApply: (id, next) => core.applyEdit(id, next)
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9(EmptyMessage, {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV10(EmptyMessage, {
         children: "No stores registered. Call core.registerStore(...)."
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV10("div", {
         style: {
           flex: 1,
           display: "flex",
@@ -1609,29 +1890,44 @@ function NiceStateDevtools_Panel({
           minHeight: 0
         },
         children: [
-          /* @__PURE__ */ jsxDEV9("div", {
+          /* @__PURE__ */ jsxDEV10("div", {
             style: {
               flexGrow: selectedChange != null ? 1 - detailRatio : 1,
               flexShrink: 1,
               flexBasis: 0,
               minWidth: 0,
               minHeight: 0,
-              overflowY: "auto"
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsxDEV9(ChangeList, {
-              changes: filteredChanges,
-              selectedCuid: selectedChangeCuid,
-              onSelect: (cuid) => setSelectedChangeCuid((prev) => prev === cuid ? null : cuid),
-              showStore: storeFilter == null
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          selectedChange != null && /* @__PURE__ */ jsxDEV9(Fragment, {
             children: [
-              /* @__PURE__ */ jsxDEV9(SplitHandle, {
+              /* @__PURE__ */ jsxDEV10(StayOnLatestToggle, {
+                checked: stayOnLatest,
+                onChange: (next) => setPrefs({ stayOnLatest: next })
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("div", {
+                style: { flex: 1, minHeight: 0, overflowY: "auto" },
+                children: /* @__PURE__ */ jsxDEV10(ChangeList, {
+                  changes: filteredChanges,
+                  selectedCuid: selectedChangeCuid,
+                  onSelect: (cuid) => {
+                    if (stayOnLatest)
+                      setPrefs({ stayOnLatest: false });
+                    setSelectedChangeCuid((prev) => prev === cuid ? null : cuid);
+                  },
+                  showStore: storeFilter == null
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          selectedChange != null && /* @__PURE__ */ jsxDEV10(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV10(SplitHandle, {
                 horizontal: isHorizDock,
                 onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV9("div", {
+              /* @__PURE__ */ jsxDEV10("div", {
                 style: {
                   flexGrow: detailRatio,
                   flexShrink: 1,
@@ -1649,10 +1945,10 @@ function NiceStateDevtools_Panel({
                     boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
                   }
                 },
-                children: /* @__PURE__ */ jsxDEV9(ChangeDetailPanel, {
+                children: /* @__PURE__ */ jsxDEV10(ChangeDetailPanel, {
                   change: selectedChange,
                   onRevert: (c) => core.revertChange(c)
-                }, selectedChange.cuid, false, undefined, this)
+                }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
@@ -1661,8 +1957,39 @@ function NiceStateDevtools_Panel({
     ]
   }, undefined, true, undefined, this);
 }
+function StayOnLatestToggle({
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxDEV10("label", {
+    title: "Always select the most recent change so the detail pane follows it",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      padding: "5px 10px",
+      flexShrink: 0,
+      cursor: "pointer",
+      userSelect: "none",
+      background: DEVTOOL_SECTION_BACKGROUND,
+      borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
+      color: checked ? DEVTOOL_COLOR_TEXT_SECONDARY : DEVTOOL_COLOR_TEXT_MUTED,
+      fontSize: "10px",
+      fontFamily: SANS_FONT
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV10("input", {
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked),
+        style: { accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM, cursor: "pointer", margin: 0 }
+      }, undefined, false, undefined, this),
+      "stay on latest"
+    ]
+  }, undefined, true, undefined, this);
+}
 function EmptyMessage({ children }) {
-  return /* @__PURE__ */ jsxDEV9("div", {
+  return /* @__PURE__ */ jsxDEV10("div", {
     style: {
       flex: 1,
       display: "flex",

package/build/types/devtools/browser/components/DiffView.d.ts

@@ -1,7 +1,10 @@
 /**
- * Test-framework-style diff: only the paths that changed, with removed values in
- * error red on a `−` line and added values in success green on a `+` line. A
- * `changed` entry renders both lines so old → new reads top-to-bottom.
+ * 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.
  */
 export declare function DiffView({ before, after }: {
     before: unknown;

package/build/types/devtools/browser/components/JsonDiffView.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+export declare function JsonDiffView({ before, after }: {
+    before: unknown;
+    after: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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".
+ */
+export declare function HighlightedJsonView({ before, after, side, }: {
+    before: unknown;
+    after: unknown;
+    side: "before" | "after";
+}): import("react/jsx-runtime").JSX.Element;

package/build/types/devtools/browser/components/utils.d.ts

@@ -16,6 +16,7 @@ export declare function summarizeChange(change: IDevtoolsStateChange): string;
 export type TDiffKind = "added" | "removed" | "changed";
 export interface IDiffEntry {
     path: string;
+    segments: (string | number)[];
     kind: TDiffKind;
     before?: unknown;
     after?: unknown;
@@ -27,3 +28,15 @@ export interface IDiffEntry {
  * means equal branches keep their reference, so this stays cheap).
  */
 export declare function computeDiff(before: unknown, after: unknown): IDiffEntry[];
+export type TLineDiffKind = "common" | "removed" | "added";
+export interface ILineDiffOp {
+    kind: TLineDiffKind;
+    text: string;
+}
+/**
+ * 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.
+ */
+export declare function computeLineDiff(beforeText: string, afterText: string): ILineDiffOp[];

package/build/types/devtools/browser/devtools_dock.d.ts

@@ -23,6 +23,13 @@ export interface IDockDevtoolInput extends IDockDevtoolSync {
 export interface IDockView {
     /** Offset (px) from the docked edge — stacks open panels on the same side. */
     dockOffset: number;
+    /**
+     * True when this panel shares its dock side with another open panel (stacked
+     * either nearer or further from the edge). Stacked panels square off all their
+     * corners so they sit flush as one continuous block — only a panel alone on
+     * its side keeps its rounded, page-facing corners.
+     */
+    stacked: boolean;
     /** Is any devtool on the page currently open? */
     anyOpen: boolean;
     /** First-registered devtool — the one that renders the combined launcher. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/state",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "private": false,
   "type": "module",
   "exports": {