@nice-code/state 0.4.4 → 0.4.6

package/build/devtools/browser/index.js

@@ -161,7 +161,7 @@ class StateDevtoolsCore {
   }
 }
 // src/devtools/browser/NiceStateDevtools.tsx
-import { useEffect as useEffect2, useId, useMemo, useReducer, useState as useState4 } from "react";
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useReducer, useState as useState3 } from "react";
 
 // src/devtools/core/devtools_colors.ts
 var DEVTOOL_COLOR_SEMANTIC_ERROR = "#FF5C5C";
@@ -191,9 +191,6 @@ var DEVTOOL_JSON_PUNCTUATION = "#475569";
 var MONO_FONT = "ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace";
 var SANS_FONT = "ui-sans-serif, system-ui, sans-serif";
 
-// src/devtools/browser/components/ChangeDetailPanel.tsx
-import { useState as useState2 } from "react";
-
 // src/devtools/browser/components/utils.ts
 function safeStringify(value, indent = 2) {
   if (value === undefined)
@@ -327,6 +324,143 @@ function computeLineDiff(beforeText, afterText) {
     ops.push({ kind: "added", text: b[j++] });
   return ops;
 }
+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;
+}
+function computeCompressedDiff(before, after, side, latestFirst = false) {
+  const lines = [];
+  emitChangedNode(lines, 0, null, before, after, side, latestFirst);
+  return lines;
+}
+function keyPrefix(keyLabel) {
+  return keyLabel != null ? `${keyLabel}: ` : "";
+}
+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();
+  }
+}
+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 ? "]" : "}" });
+}
+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] };
+  });
+}
+function placeholderText(count, isArray) {
+  const noun = isArray ? count === 1 ? "item" : "items" : count === 1 ? "property" : "properties";
+  return `… ${count} unchanged ${noun}`;
+}
+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 });
+  });
+}
 function isScalar(value) {
   return value == null || typeof value !== "object";
 }
@@ -415,7 +549,11 @@ 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 }) {
+function DiffView({
+  before,
+  after,
+  latestFirst = false
+}) {
   const entries = computeDiff(before, after);
   if (entries.length === 0) {
     return /* @__PURE__ */ jsxDEV2("div", {
@@ -434,7 +572,8 @@ function DiffView({ before, after }) {
   return /* @__PURE__ */ jsxDEV2("div", {
     style: { display: "flex", flexDirection: "column", gap: "6px" },
     children: roots.map((node) => /* @__PURE__ */ jsxDEV2(DiffNode, {
-      node
+      node,
+      latestFirst
     }, node.key, false, undefined, this))
   }, undefined, false, undefined, this);
 }
@@ -469,11 +608,12 @@ function collapseChains(node) {
   }
   return current;
 }
-function DiffNode({ node }) {
+function DiffNode({ node, latestFirst }) {
   if (node.entry != null && node.children.size === 0) {
     return /* @__PURE__ */ jsxDEV2(DiffLeaf, {
       label: node.key,
-      entry: node.entry
+      entry: node.entry,
+      latestFirst
     }, undefined, false, undefined, this);
   }
   return /* @__PURE__ */ jsxDEV2("div", {
@@ -493,15 +633,44 @@ function DiffNode({ node }) {
           gap: "5px"
         },
         children: [...node.children.values()].map((child) => /* @__PURE__ */ jsxDEV2(DiffNode, {
-          node: child
+          node: child,
+          latestFirst
         }, child.key, false, undefined, this))
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function DiffLeaf({ label, entry }) {
+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__ */ jsxDEV2(InlineValue, {
+    sign: "−",
+    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    background: REMOVED_BG,
+    value: entry.before
+  }, undefined, false, undefined, this);
+  const added = showAdded && /* @__PURE__ */ jsxDEV2(InlineValue, {
+    sign: "+",
+    color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+    background: ADDED_BG,
+    value: entry.after
+  }, undefined, false, undefined, this);
+  const removedLine = showRemoved && /* @__PURE__ */ jsxDEV2(DiffLine, {
+    sign: "−",
+    color: DEVTOOL_COLOR_SEMANTIC_ERROR,
+    background: REMOVED_BG,
+    value: entry.before
+  }, undefined, false, undefined, this);
+  const addedLine = showAdded && /* @__PURE__ */ jsxDEV2(DiffLine, {
+    sign: "+",
+    color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
+    background: ADDED_BG,
+    value: entry.after
+  }, undefined, false, undefined, this);
   if (isInlineLeaf(entry)) {
     return /* @__PURE__ */ jsxDEV2("div", {
       style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "6px" },
@@ -513,22 +682,12 @@ function DiffLeaf({ label, entry }) {
             ":"
           ]
         }, undefined, true, undefined, this),
-        showRemoved && /* @__PURE__ */ jsxDEV2(InlineValue, {
-          sign: "−",
-          color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-          background: REMOVED_BG,
-          value: entry.before
-        }, undefined, false, undefined, this),
+        latestFirst ? added : removed,
         entry.kind === "changed" && /* @__PURE__ */ jsxDEV2("span", {
           style: { color: DEVTOOL_COLOR_TEXT_MUTED },
-          children: "→"
+          children: latestFirst ? "←" : "→"
         }, undefined, false, undefined, this),
-        showAdded && /* @__PURE__ */ jsxDEV2(InlineValue, {
-          sign: "+",
-          color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-          background: ADDED_BG,
-          value: entry.after
-        }, undefined, false, undefined, this)
+        latestFirst ? removed : added
       ]
     }, undefined, true, undefined, this);
   }
@@ -549,18 +708,8 @@ function DiffLeaf({ label, entry }) {
         },
         children: label
       }, undefined, false, undefined, this),
-      showRemoved && /* @__PURE__ */ jsxDEV2(DiffLine, {
-        sign: "−",
-        color: DEVTOOL_COLOR_SEMANTIC_ERROR,
-        background: REMOVED_BG,
-        value: entry.before
-      }, undefined, false, undefined, this),
-      showAdded && /* @__PURE__ */ jsxDEV2(DiffLine, {
-        sign: "+",
-        color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
-        background: ADDED_BG,
-        value: entry.after
-      }, undefined, false, undefined, this)
+      latestFirst ? addedLine : removedLine,
+      latestFirst ? removedLine : addedLine
     ]
   }, undefined, true, undefined, this);
 }
@@ -683,8 +832,21 @@ function Line({ sign, color, background, text }) {
     ]
   }, undefined, true, undefined, this);
 }
-function JsonDiffView({ before, after }) {
-  const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
+function JsonDiffView({
+  before,
+  after,
+  compress = false,
+  latestFirst = false
+}) {
+  if (compress) {
+    return /* @__PURE__ */ jsxDEV3(CompressedDiffView, {
+      before,
+      after,
+      side: "unified",
+      latestFirst
+    }, undefined, false, undefined, this);
+  }
+  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.");
   }
@@ -698,11 +860,70 @@ function JsonDiffView({ before, after }) {
     }, i, false, undefined, this))
   }, undefined, false, undefined, this);
 }
+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__ */ jsxDEV3("pre", {
+    style: SURFACE_STYLE,
+    children: lines.map((line, i) => /* @__PURE__ */ jsxDEV3(CompressedLine, {
+      line
+    }, i, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function CompressedLine({ line }) {
+  const indent = "  ".repeat(line.depth);
+  if (line.tone === "placeholder") {
+    return /* @__PURE__ */ jsxDEV3("div", {
+      style: { display: "flex", padding: "0 10px", whiteSpace: "pre" },
+      children: [
+        /* @__PURE__ */ jsxDEV3("span", {
+          style: { width: "12px", flexShrink: 0 }
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3("span", {
+          style: { flex: 1, minWidth: 0, color: DEVTOOL_COLOR_TEXT_MUTED, fontStyle: "italic" },
+          children: [
+            indent,
+            line.text
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  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__ */ 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: line.sign
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("span", {
+        style: { flex: 1, minWidth: 0 },
+        children: renderColoredJson(`${indent}${line.text}`)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 function HighlightedJsonView({
   before,
   after,
-  side
+  side,
+  compress = false
 }) {
+  if (compress)
+    return /* @__PURE__ */ jsxDEV3(CompressedDiffView, {
+      before,
+      after,
+      side
+    }, undefined, false, undefined, this);
   const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
   const dropKind = side === "before" ? "added" : "removed";
   const highlightKind = side === "before" ? "removed" : "added";
@@ -1055,10 +1276,17 @@ function DevtoolsLauncher({ items }) {
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
 function ChangeDetailPanel({
   change,
-  onRevert
+  onRevert,
+  view,
+  onViewChange,
+  compress,
+  onCompressChange,
+  latestFirst,
+  onLatestFirstChange
 }) {
-  const [view, setView] = useState2("props");
   const canRevert = change.inversePatches.length > 0;
+  const showCompressToggle = view !== "props";
+  const showOrderToggle = view === "props" || view === "diff";
   return /* @__PURE__ */ jsxDEV5("div", {
     style: {
       flex: 1,
@@ -1139,13 +1367,13 @@ function ChangeDetailPanel({
         },
         children: /* @__PURE__ */ jsxDEV5(SegmentedControl, {
           options: [
-            { value: "props", label: "Diff Props" },
             { value: "diff", label: "Diff View" },
+            { value: "props", label: "Diff Props" },
             { value: "before", label: "Before" },
             { value: "after", label: "After" }
           ],
           value: view,
-          onChange: setView
+          onChange: onViewChange
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV5("div", {
@@ -1156,32 +1384,110 @@ function ChangeDetailPanel({
           padding: "10px 12px"
         },
         children: [
-          view === "props" && /* @__PURE__ */ jsxDEV5(DiffView, {
+          (showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxDEV5("div", {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: "14px",
+              marginBottom: "8px"
+            },
+            children: [
+              showCompressToggle && /* @__PURE__ */ jsxDEV5(ToggleCheckbox, {
+                checked: compress,
+                onChange: onCompressChange,
+                label: "Compress to changed paths only",
+                title: "Collapse unchanged branches, showing only the address of what changed"
+              }, undefined, false, undefined, this),
+              showOrderToggle && /* @__PURE__ */ jsxDEV5(ToggleCheckbox, {
+                checked: latestFirst,
+                onChange: onLatestFirstChange,
+                label: "Latest (+) change first",
+                title: "Show the new value (+) above the previous value (−); off shows previous first"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          view === "diff" && /* @__PURE__ */ jsxDEV5(JsonDiffView, {
             before: change.prevSnapshot,
-            after: change.snapshot
+            after: change.snapshot,
+            compress,
+            latestFirst
           }, undefined, false, undefined, this),
-          view === "diff" && /* @__PURE__ */ jsxDEV5(JsonDiffView, {
+          view === "props" && /* @__PURE__ */ jsxDEV5(DiffView, {
             before: change.prevSnapshot,
-            after: change.snapshot
+            after: change.snapshot,
+            latestFirst
           }, undefined, false, undefined, this),
           view === "before" && /* @__PURE__ */ jsxDEV5(HighlightedJsonView, {
             before: change.prevSnapshot,
             after: change.snapshot,
-            side: "before"
+            side: "before",
+            compress
           }, undefined, false, undefined, this),
           view === "after" && /* @__PURE__ */ jsxDEV5(HighlightedJsonView, {
             before: change.prevSnapshot,
             after: change.snapshot,
-            side: "after"
+            side: "after",
+            compress
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
+function ToggleCheckbox({
+  checked,
+  onChange,
+  label,
+  title
+}) {
+  return /* @__PURE__ */ jsxDEV5("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__ */ jsxDEV5("input", {
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked),
+        style: { cursor: "pointer", margin: 0 }
+      }, undefined, false, undefined, this),
+      label
+    ]
+  }, undefined, true, undefined, this);
+}
 
 // src/devtools/browser/components/ChangeList.tsx
+import { useMemo } from "react";
 import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function changeGroupKey(change) {
+  const shape = change.patches.length > 0 ? safeStringify(change.patches, 0) : safeStringify(change.snapshot, 0);
+  return `${change.storeId}|${change.source}|${shape}`;
+}
+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.oldestCuid = change.cuid;
+    } else {
+      groups.push({ representative: change, oldestCuid: change.cuid, count: 1 });
+    }
+    lastKey = key;
+  }
+  return groups;
+}
 function ChangeList({
   changes,
   selectedCuid,
@@ -1189,6 +1495,7 @@ function ChangeList({
   showStore,
   style
 }) {
+  const groups = useMemo(() => groupChanges(changes), [changes]);
   if (changes.length === 0) {
     return /* @__PURE__ */ jsxDEV6("div", {
       style: {
@@ -1203,16 +1510,18 @@ function ChangeList({
   }
   return /* @__PURE__ */ jsxDEV6("div", {
     style,
-    children: changes.map((change) => /* @__PURE__ */ jsxDEV6(ChangeRow, {
-      change,
-      selected: change.cuid === selectedCuid,
-      onClick: () => onSelect(change.cuid),
+    children: groups.map((group) => /* @__PURE__ */ jsxDEV6(ChangeRow, {
+      change: group.representative,
+      count: group.count,
+      selected: group.representative.cuid === selectedCuid,
+      onClick: () => onSelect(group.representative.cuid),
       showStore
-    }, change.cuid, false, undefined, this))
+    }, group.oldestCuid, false, undefined, this))
   }, undefined, false, undefined, this);
 }
 function ChangeRow({
   change,
+  count,
   selected,
   onClick,
   showStore
@@ -1247,6 +1556,23 @@ function ChangeRow({
             color: sourceColor,
             children: SOURCE_LABEL[change.source]
           }, undefined, false, undefined, this),
+          count > 1 && /* @__PURE__ */ jsxDEV6("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
+            ]
+          }, undefined, true, undefined, this),
           showStore && /* @__PURE__ */ jsxDEV6("span", {
             style: {
               color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
@@ -1303,7 +1629,7 @@ function Badge({ color, children }) {
 }
 
 // src/devtools/browser/components/StateInspector.tsx
-import { useEffect, useState as useState3 } from "react";
+import { useEffect, useState as useState2 } from "react";
 
 // src/devtools/browser/components/SectionLabel.tsx
 import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
@@ -1332,9 +1658,9 @@ function StateInspector({
   onApply
 }) {
   const liveText = safeStringify(store.currentState, 2);
-  const [draft, setDraft] = useState3(liveText);
-  const [dirty, setDirty] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [draft, setDraft] = useState2(liveText);
+  const [dirty, setDirty] = useState2(false);
+  const [error, setError] = useState2(null);
   useEffect(() => {
     setDraft(liveText);
     setDirty(false);
@@ -1708,7 +2034,10 @@ function readPrefs(defaultPosition, initialOpen) {
     dockedHeight: DOCKED_HEIGHT_DEFAULT,
     dockedWidth: DOCKED_WIDTH_DEFAULT,
     detailRatio: DETAIL_RATIO_DEFAULT,
-    stayOnLatest: false
+    stayOnLatest: true,
+    compressDiff: true,
+    detailView: "diff",
+    diffLatestFirst: true
   };
   try {
     if (typeof localStorage === "undefined")
@@ -1741,11 +2070,11 @@ function NiceStateDevtools_Panel({
   position: defaultPosition = "dock-bottom",
   initialOpen = false
 }) {
-  const [prefs, setPrefsRaw] = useState4(() => readPrefs(defaultPosition, initialOpen));
-  const [snapshot, setSnapshot] = useState4(EMPTY_SNAPSHOT);
-  const [mode, setMode] = useState4("timeline");
-  const [storeFilter, setStoreFilter] = useState4(null);
-  const [selectedChangeCuid, setSelectedChangeCuid] = useState4(null);
+  const [prefs, setPrefsRaw] = useState3(() => readPrefs(defaultPosition, initialOpen));
+  const [snapshot, setSnapshot] = useState3(EMPTY_SNAPSHOT);
+  const [mode, setMode] = useState3("timeline");
+  const [storeFilter, setStoreFilter] = useState3(null);
+  const [selectedChangeCuid, setSelectedChangeCuid] = useState3(null);
   useEffect2(() => core.subscribe(setSnapshot), [core]);
   const setPrefs = (update) => {
     setPrefsRaw((prev) => ({ ...prev, ...update }));
@@ -1755,11 +2084,21 @@ function NiceStateDevtools_Panel({
     return () => clearTimeout(timer);
   }, [prefs]);
   const { stores, changes, paused } = snapshot;
-  const { position, isOpen, dockedHeight, dockedWidth, detailRatio, stayOnLatest } = prefs;
+  const {
+    position,
+    isOpen,
+    dockedHeight,
+    dockedWidth,
+    detailRatio,
+    stayOnLatest,
+    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 filteredChanges = useMemo2(() => 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(() => {
@@ -1767,7 +2106,7 @@ function NiceStateDevtools_Panel({
       setSelectedChangeCuid(latestCuid);
   }, [stayOnLatest, latestCuid]);
   const activeStore = stores.find((s) => s.id === storeFilter) ?? (stores.length > 0 ? stores[0] : null);
-  const dock = useMemo(() => getDevtoolsDockCoordinator(), []);
+  const dock = useMemo2(() => getDevtoolsDockCoordinator(), []);
   const panelId = useId();
   const [, bumpView] = useReducer((n) => n + 1, 0);
   const badge = changes.length > 0 ? String(changes.length) : undefined;
@@ -1947,7 +2286,13 @@ function NiceStateDevtools_Panel({
                 },
                 children: /* @__PURE__ */ jsxDEV10(ChangeDetailPanel, {
                   change: selectedChange,
-                  onRevert: (c) => core.revertChange(c)
+                  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 })
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]

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

@@ -1,5 +1,12 @@
 import type { IDevtoolsStateChange } from "../../core/StateDevtools.types";
-export declare function ChangeDetailPanel({ change, onRevert, }: {
+export type TChangeView = "diff" | "props" | "before" | "after";
+export declare function ChangeDetailPanel({ change, onRevert, view, onViewChange, compress, onCompressChange, latestFirst, onLatestFirstChange, }: {
     change: IDevtoolsStateChange;
     onRevert: (change: IDevtoolsStateChange) => void;
+    view: TChangeView;
+    onViewChange: (view: TChangeView) => void;
+    compress: boolean;
+    onCompressChange: (compress: boolean) => void;
+    latestFirst: boolean;
+    onLatestFirstChange: (latestFirst: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import { type CSSProperties } from "react";
 import type { IDevtoolsStateChange } from "../../core/StateDevtools.types";
 export declare function ChangeList({ changes, selectedCuid, onSelect, showStore, style, }: {
     changes: IDevtoolsStateChange[];

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

@@ -6,7 +6,8 @@
  * 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 }: {
+export declare function DiffView({ before, after, latestFirst, }: {
     before: unknown;
     after: unknown;
+    latestFirst?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -4,9 +4,11 @@
  * 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 }: {
+export declare function JsonDiffView({ before, after, compress, latestFirst, }: {
     before: unknown;
     after: unknown;
+    compress?: boolean;
+    latestFirst?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * The full JSON of one snapshot with the lines that differ from the other side
@@ -14,8 +16,9 @@ export declare function JsonDiffView({ before, after }: {
  * 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, }: {
+export declare function HighlightedJsonView({ before, after, side, compress, }: {
     before: unknown;
     after: unknown;
     side: "before" | "after";
+    compress?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -40,3 +40,32 @@ export interface ILineDiffOp {
  * comfortably cheap.
  */
 export declare function computeLineDiff(beforeText: string, afterText: string): ILineDiffOp[];
+/**
+ * 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.
+ */
+export declare function orderLineDiffOps(ops: ILineDiffOp[], latestFirst: boolean): ILineDiffOp[];
+export type TCompressedTone = "common" | "added" | "removed" | "placeholder";
+/** Which document a compressed diff is being rendered for. */
+export type TDiffSide = "unified" | "before" | "after";
+export interface ICompressedLine {
+    /** Nesting depth — the renderer turns this into leading indentation. */
+    depth: number;
+    /** Gutter glyph: `+` added, `−` removed, or a space for structure/placeholder. */
+    sign: string;
+    tone: TCompressedTone;
+    /** The line's JSON (or placeholder) text, without indentation. */
+    text: string;
+}
+/**
+ * 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.
+ */
+export declare function computeCompressedDiff(before: unknown, after: unknown, side: TDiffSide, latestFirst?: boolean): ICompressedLine[];

package/package.json

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