@buoy-gg/storage 2.1.14 → 2.1.16

package/lib/commonjs/storage/components/DiffViewer/modes/ThemedSplitView.js

@@ -9,185 +9,91 @@ var _reactNative = require("react-native");
 var _lineDiff = require("../../../utils/lineDiff");
 var _DiffSummary = require("../components/DiffSummary");
 var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_OPTIONS = {
+  hideLineNumbers: false,
+  disableWordDiff: false,
+  showDiffOnly: false,
+  compareMethod: "words",
+  contextLines: 3,
+  lineOffset: 0
+};
 function ThemedSplitView({
   oldValue,
   newValue,
   theme,
-  options = {
-    hideLineNumbers: false,
-    disableWordDiff: false,
-    showDiffOnly: false,
-    compareMethod: "words",
-    contextLines: 3,
-    lineOffset: 0
-  },
+  options = DEFAULT_OPTIONS,
   showThemeName = false
 }) {
-  // Compute line-by-line diff with options
-  const diffComputeOptions = {
+  const dynamicStyles = (0, _react.useMemo)(() => createDynamicStyles(theme), [theme]);
+  const diffComputeOptions = (0, _react.useMemo)(() => ({
     compareMethod: options.compareMethod,
     disableWordDiff: options.disableWordDiff,
     showDiffOnly: options.showDiffOnly,
     contextLines: options.contextLines
-  };
-  const lineDiffs = (0, _lineDiff.computeLineDiff)(oldValue, newValue, diffComputeOptions);
+  }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
+  const lineDiffs = (0, _react.useMemo)(() => (0, _lineDiff.computeLineDiff)(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
 
-  // Create dynamic styles based on theme
-  const dynamicStyles = createDynamicStyles(theme);
+  // One pass for the summary instead of three .filter() calls per render.
+  const summary = (0, _react.useMemo)(() => {
+    let added = 0;
+    let removed = 0;
+    let modified = 0;
+    for (const d of lineDiffs) {
+      if (d.type === _lineDiff.DiffType.ADDED) added++;else if (d.type === _lineDiff.DiffType.REMOVED) removed++;else if (d.type === _lineDiff.DiffType.MODIFIED) modified++;
+    }
+    return {
+      added,
+      removed,
+      modified
+    };
+  }, [lineDiffs]);
 
-  // Render word diff content
-  const renderWordDiff = wordDiffs => {
-    return wordDiffs.map((word, idx) => {
-      let backgroundColor = "transparent";
-      if (word.type === _lineDiff.DiffType.ADDED) {
-        backgroundColor = theme.addedWordHighlight;
-      } else if (word.type === _lineDiff.DiffType.REMOVED) {
-        backgroundColor = theme.removedWordHighlight;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [dynamicStyles.wordDiff, {
-          backgroundColor
-        }],
-        children: word.value
-      }, idx);
-    });
-  };
+  // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
+  // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
+  // the rest into a tappable header.
+  const [expandedFolds, setExpandedFolds] = (0, _react.useState)(() => new Set());
 
-  // Get colors for diff type
-  const getDiffColors = (type, isModified = false) => {
-    if (isModified) {
-      return {
-        background: theme.modifiedBackground,
-        text: theme.modifiedText,
-        markerBg: theme.markerModifiedBackground
-      };
+  // Reset fold expansion when the user actually switches comparisons. Parent
+  // memoizes oldValue/newValue, so this only fires on a real change — not on
+  // every re-render. First run is a no-op (initial state is already empty).
+  const hasMountedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
     }
-    switch (type) {
-      case _lineDiff.DiffType.ADDED:
-        return {
-          background: theme.addedBackground,
-          text: theme.addedText,
-          markerBg: theme.markerAddedBackground
-        };
-      case _lineDiff.DiffType.REMOVED:
-        return {
-          background: theme.removedBackground,
-          text: theme.removedText,
-          markerBg: theme.markerRemovedBackground
-        };
-      case _lineDiff.DiffType.DEFAULT:
-        return {
-          background: theme.unchangedBackground,
-          text: theme.unchangedText,
-          markerBg: "transparent"
-        };
-      default:
-        return {
-          background: theme.unchangedBackground,
-          text: theme.unchangedText,
-          markerBg: "transparent"
-        };
-    }
-  };
-
-  // Render a single line side (left or right)
-  const renderLineSide = (lineNumber, content, type, marker, isEmpty = false) => {
-    if (isEmpty) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [dynamicStyles.gutter, dynamicStyles.emptyGutter],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: dynamicStyles.lineNumber,
-            children: " "
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [dynamicStyles.marker, dynamicStyles.emptyMarker],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: dynamicStyles.markerText,
-            children: " "
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [dynamicStyles.contentCell, dynamicStyles.emptyContent],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: dynamicStyles.content,
-            children: " "
-          })
-        })]
+    setExpandedFolds(new Set());
+  }, [oldValue, newValue]);
+  const items = (0, _react.useMemo)(() => buildSplitItems(lineDiffs, expandedFolds), [lineDiffs, expandedFolds]);
+  const toggleFold = (0, _react.useCallback)(foldId => {
+    setExpandedFolds(prev => {
+      const next = new Set(prev);
+      if (next.has(foldId)) next.delete(foldId);else next.add(foldId);
+      return next;
+    });
+  }, []);
+  const keyExtractor = (0, _react.useCallback)(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    if (item.kind === "fold") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FoldHeader, {
+        foldId: item.foldId,
+        count: item.count,
+        expanded: item.expanded,
+        theme: theme,
+        styles: dynamicStyles,
+        onToggle: toggleFold
       });
     }
-    const colors = getDiffColors(type);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [dynamicStyles.gutter, {
-          backgroundColor: theme.lineNumberBackground
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: dynamicStyles.lineNumber,
-          children: lineNumber || " "
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [dynamicStyles.marker, {
-          backgroundColor: colors.markerBg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [dynamicStyles.markerText, {
-            color: theme.markerText
-          }],
-          children: marker
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [dynamicStyles.contentCell, {
-          backgroundColor: colors.background
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [dynamicStyles.content, {
-            color: colors.text
-          }],
-          children: Array.isArray(content) ? renderWordDiff(content) : content || " "
-        })
-      })]
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffRow, {
+      diff: item.diff,
+      showSeparator: false,
+      theme: theme,
+      options: options,
+      styles: dynamicStyles
     });
-  };
-
-  // Check if we should show a separator (gap in line numbers)
-  const shouldShowSeparator = (idx, diffs) => {
-    if (!options.showDiffOnly || idx === 0) return false;
-    const prevDiff = diffs[idx - 1];
-    const currDiff = diffs[idx];
-
-    // Check for gap in line numbers
-    const leftGap = currDiff.leftLineNumber && prevDiff.leftLineNumber && currDiff.leftLineNumber - prevDiff.leftLineNumber > 1;
-    const rightGap = currDiff.rightLineNumber && prevDiff.rightLineNumber && currDiff.rightLineNumber - prevDiff.rightLineNumber > 1;
-    return leftGap || rightGap;
-  };
-
-  // Render a complete row with both left and right sides
-  const renderDiffRow = (diff, idx, diffs) => {
-    const isRemoved = diff.type === _lineDiff.DiffType.REMOVED;
-    const isAdded = diff.type === _lineDiff.DiffType.ADDED;
-    const isModified = diff.type === _lineDiff.DiffType.MODIFIED;
-    const isDefault = diff.type === _lineDiff.DiffType.DEFAULT;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [shouldShowSeparator(idx, diffs) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dynamicStyles.separator,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: dynamicStyles.separatorText,
-          children: "\u2022 \u2022 \u2022"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: dynamicStyles.row,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: dynamicStyles.leftSide,
-          children: isRemoved || isModified || isDefault ? renderLineSide(diff.leftLineNumber, diff.leftContent, isModified ? _lineDiff.DiffType.REMOVED : diff.type, isRemoved || isModified ? "-" : " ") : renderLineSide(undefined, undefined, _lineDiff.DiffType.DEFAULT, " ", true)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: dynamicStyles.centerDivider
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: dynamicStyles.rightSide,
-          children: isAdded || isModified || isDefault ? renderLineSide(diff.rightLineNumber, diff.rightContent, isModified ? _lineDiff.DiffType.ADDED : diff.type, isAdded || isModified ? "+" : " ") : renderLineSide(undefined, undefined, _lineDiff.DiffType.DEFAULT, " ", true)
-        })]
-      })]
-    }, idx);
-  };
+  }, [theme, options, dynamicStyles, toggleFold]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [dynamicStyles.container, theme.glowColor && {
       shadowColor: theme.glowColor,
@@ -225,24 +131,276 @@ function ThemedSplitView({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffSummary.DiffSummary, {
-      added: lineDiffs.filter(d => d.type === _lineDiff.DiffType.ADDED).length,
-      removed: lineDiffs.filter(d => d.type === _lineDiff.DiffType.REMOVED).length,
-      modified: lineDiffs.filter(d => d.type === _lineDiff.DiffType.MODIFIED).length,
+      added: summary.added,
+      removed: summary.removed,
+      modified: summary.modified,
       theme: theme
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    }), lineDiffs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: dynamicStyles.emptyState,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: dynamicStyles.emptyText,
+        children: options.showDiffOnly ? "No differences found" : "No content to display"
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
       style: dynamicStyles.scrollView,
-      showsVerticalScrollIndicator: false,
       contentContainerStyle: dynamicStyles.scrollContent,
-      children: lineDiffs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dynamicStyles.emptyState,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: dynamicStyles.emptyText,
-          children: options.showDiffOnly ? "No differences found" : "No content to display"
+      data: items,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      showsVerticalScrollIndicator: false,
+      initialNumToRender: 20,
+      maxToRenderPerBatch: 20,
+      windowSize: 7,
+      removeClippedSubviews: true
+    })]
+  });
+}
+
+// Number of context lines kept visible on either side of every change.
+const CONTEXT_LINES = 3;
+// Don't bother folding tiny gaps — toggling them is more friction than scroll.
+const MIN_FOLD_SIZE = 4;
+function buildSplitItems(lineDiffs, expandedFolds) {
+  const n = lineDiffs.length;
+  if (n === 0) return [];
+
+  // Mark every line that should always be visible: any change, plus
+  // CONTEXT_LINES on either side of it.
+  const visible = new Array(n).fill(false);
+  for (let i = 0; i < n; i++) {
+    if (lineDiffs[i].type !== _lineDiff.DiffType.DEFAULT) {
+      const start = Math.max(0, i - CONTEXT_LINES);
+      const end = Math.min(n - 1, i + CONTEXT_LINES);
+      for (let k = start; k <= end; k++) visible[k] = true;
+    }
+  }
+  const items = [];
+  let foldId = 0;
+  let i = 0;
+  while (i < n) {
+    if (visible[i]) {
+      items.push({
+        kind: "row",
+        diff: lineDiffs[i],
+        diffIndex: i
+      });
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < n && !visible[j]) j++;
+    const runLength = j - i;
+    if (runLength < MIN_FOLD_SIZE) {
+      for (let k = i; k < j; k++) {
+        items.push({
+          kind: "row",
+          diff: lineDiffs[k],
+          diffIndex: k
+        });
+      }
+    } else {
+      const id = foldId++;
+      const expanded = expandedFolds.has(id);
+      items.push({
+        kind: "fold",
+        foldId: id,
+        count: runLength,
+        expanded
+      });
+      if (expanded) {
+        for (let k = i; k < j; k++) {
+          items.push({
+            kind: "row",
+            diff: lineDiffs[k],
+            diffIndex: k
+          });
+        }
+      }
+    }
+    i = j;
+  }
+  return items;
+}
+const FoldHeader = /*#__PURE__*/(0, _react.memo)(function FoldHeader({
+  foldId,
+  count,
+  expanded,
+  theme,
+  styles,
+  onToggle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    style: [styles.foldHeader, {
+      backgroundColor: theme.separatorBackground
+    }],
+    onPress: () => onToggle(foldId),
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.foldHeaderText, {
+        color: theme.separatorText
+      }],
+      children: expanded ? `▼  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to hide` : `▶  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to expand`
+    })
+  });
+});
+const DiffRow = /*#__PURE__*/(0, _react.memo)(function DiffRow({
+  diff,
+  showSeparator,
+  theme,
+  options,
+  styles
+}) {
+  const isRemoved = diff.type === _lineDiff.DiffType.REMOVED;
+  const isAdded = diff.type === _lineDiff.DiffType.ADDED;
+  const isModified = diff.type === _lineDiff.DiffType.MODIFIED;
+  const isDefault = diff.type === _lineDiff.DiffType.DEFAULT;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [showSeparator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.separator,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.separatorText,
+        children: "\u2022 \u2022 \u2022"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.leftSide,
+        children: isRemoved || isModified || isDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LineSide, {
+          lineNumber: diff.leftLineNumber,
+          content: diff.leftContent,
+          type: isModified ? _lineDiff.DiffType.REMOVED : diff.type,
+          marker: isRemoved || isModified ? "-" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyLineSide, {
+          options: options,
+          styles: styles
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.centerDivider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.rightSide,
+        children: isAdded || isModified || isDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LineSide, {
+          lineNumber: diff.rightLineNumber,
+          content: diff.rightContent,
+          type: isModified ? _lineDiff.DiffType.ADDED : diff.type,
+          marker: isAdded || isModified ? "+" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyLineSide, {
+          options: options,
+          styles: styles
         })
-      }) : lineDiffs.map((diff, idx) => renderDiffRow(diff, idx, lineDiffs))
+      })]
+    })]
+  });
+});
+function LineSide({
+  lineNumber,
+  content,
+  type,
+  marker,
+  theme,
+  options,
+  styles
+}) {
+  const colors = getDiffColors(type, theme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.gutter, {
+        backgroundColor: theme.lineNumberBackground
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.lineNumber,
+        children: lineNumber || " "
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.marker, {
+        backgroundColor: colors.markerBg
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.markerText, {
+          color: theme.markerText
+        }],
+        children: marker
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.contentCell, {
+        backgroundColor: colors.background
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.content, {
+          color: colors.text
+        }],
+        children: Array.isArray(content) ? content.map((word, idx) => {
+          let backgroundColor = "transparent";
+          if (word.type === _lineDiff.DiffType.ADDED) {
+            backgroundColor = theme.addedWordHighlight;
+          } else if (word.type === _lineDiff.DiffType.REMOVED) {
+            backgroundColor = theme.removedWordHighlight;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.wordDiff, {
+              backgroundColor
+            }],
+            children: word.value
+          }, idx);
+        }) : content || " "
+      })
     })]
   });
 }
+function EmptyLineSide({
+  options,
+  styles
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.gutter, styles.emptyGutter],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.lineNumber,
+        children: " "
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.marker, styles.emptyMarker],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.markerText,
+        children: " "
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.contentCell, styles.emptyContent],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.content,
+        children: " "
+      })
+    })]
+  });
+}
+function getDiffColors(type, theme) {
+  switch (type) {
+    case _lineDiff.DiffType.ADDED:
+      return {
+        background: theme.addedBackground,
+        text: theme.addedText,
+        markerBg: theme.markerAddedBackground
+      };
+    case _lineDiff.DiffType.REMOVED:
+      return {
+        background: theme.removedBackground,
+        text: theme.removedText,
+        markerBg: theme.markerRemovedBackground
+      };
+    case _lineDiff.DiffType.DEFAULT:
+    default:
+      return {
+        background: theme.unchangedBackground,
+        text: theme.unchangedText,
+        markerBg: "transparent"
+      };
+  }
+}
 
 // Create dynamic styles based on theme
 function createDynamicStyles(theme) {
@@ -404,6 +562,20 @@ function createDynamicStyles(theme) {
       fontFamily: "monospace",
       letterSpacing: 2
     },
+    foldHeader: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: theme.borderColor
+    },
+    foldHeaderText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
     emptyState: {
       padding: 40,
       alignItems: "center",

package/lib/commonjs/storage/components/StorageEventDetailContent.js

@@ -67,6 +67,15 @@ function formatTimeWithMs(date) {
   const ms = String(date.getMilliseconds()).padStart(3, "0");
   return `${h}:${m}:${s}.${ms}`;
 }
+const SPLIT_VIEW_OPTIONS = {
+  hideLineNumbers: false,
+  disableWordDiff: false,
+  showDiffOnly: false,
+  compareMethod: "words",
+  contextLines: 3,
+  lineOffset: 0
+};
+const SPLIT_VIEW_DIFFERENCES = [];
 function StorageEventDetailContent({
   conversation,
   selectedEventIndex = 0,
@@ -263,38 +272,30 @@ function StorageEventDetailContent({
     });
   }, [valueToShow, action, actionColor, valueType]);
 
+  // Memoized so the diff viewers don't see new oldValue/newValue refs on every
+  // re-render. parseValue runs JSON.parse, which would otherwise produce fresh
+  // object identities every time and force expensive recomputations downstream
+  // (line diff, tree diff, expansion-state effects, etc.).
+  const previousValue = (0, _react.useMemo)(() => (0, _sharedUi.parseValue)(leftEvent?.data?.value ?? null), [leftEvent]);
+  const currentValue = (0, _react.useMemo)(() => (0, _sharedUi.parseValue)(rightEvent?.data?.value), [rightEvent]);
+
   // Render diff content
   const renderDiffContent = (0, _react.useCallback)(() => {
-    const previousValue = (0, _sharedUi.parseValue)(leftEvent?.data?.value ?? null);
-    const currentValue = (0, _sharedUi.parseValue)(rightEvent?.data?.value);
     if (diffMode === "split") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: {
-          flex: 1
-        },
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemedSplitView.ThemedSplitView, {
-          oldValue: previousValue,
-          newValue: currentValue,
-          differences: [],
-          theme: _diffThemes.diffThemes.devToolsDefault,
-          options: {
-            hideLineNumbers: false,
-            disableWordDiff: false,
-            showDiffOnly: false,
-            compareMethod: "words",
-            contextLines: 3,
-            lineOffset: 0
-          },
-          showThemeName: false
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemedSplitView.ThemedSplitView, {
+        oldValue: previousValue,
+        newValue: currentValue,
+        differences: SPLIT_VIEW_DIFFERENCES,
+        theme: _diffThemes.diffThemes.devToolsDefault,
+        options: SPLIT_VIEW_OPTIONS,
+        showThemeName: false
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeDiffViewer.TreeDiffViewer, {
       oldValue: previousValue,
       newValue: currentValue
     });
-  }, [leftEvent, rightEvent, diffMode]);
+  }, [previousValue, currentValue, diffMode]);
 
   // Footer navigation handlers
   const handleFooterPrevious = (0, _react.useCallback)(() => {