@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/dataViewer/tree/TreeDiffViewer.js

@@ -0,0 +1,887 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TreeDiffViewer;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// @ts-nocheck
+/**
+ * Tree Diff Viewer Component
+ *
+ * A React Native diff viewer that displays changes in a hierarchical tree structure
+ * Shows added (+), removed (−), and changed (≈) items with visual indicators
+ *
+ * Usage:
+ * <TreeDiffViewer
+ *   oldValue={oldObject}
+ *   newValue={newObject}
+ *   theme="dark" // or "light"
+ * />
+ */
+
+// ============================================
+// TYPES & INTERFACES
+// ============================================
+
+// ============================================
+// THEMES
+// ============================================
+
+const darkTheme = {
+  background: _sharedUi.gameUIColors.diff.lineNumberBackground,
+  // Exact from gameUIColors
+  text: _sharedUi.gameUIColors.diff.unchangedText,
+  // Exact from gameUIColors
+  // Line backgrounds - exact from gameUIColors
+  addedBg: _sharedUi.gameUIColors.diff.addedBackground,
+  removedBg: _sharedUi.gameUIColors.diff.removedBackground,
+  changedBg: _sharedUi.gameUIColors.diff.modifiedBackground,
+  // Text colors - exact from gameUIColors
+  addedText: _sharedUi.gameUIColors.diff.addedText,
+  removedText: _sharedUi.gameUIColors.diff.removedText,
+  changedText: _sharedUi.gameUIColors.diff.modifiedText,
+  // Word highlights - darker backgrounds for text
+  addedWordBg: _sharedUi.gameUIColors.diff.addedWordHighlight,
+  removedWordBg: _sharedUi.gameUIColors.diff.removedWordHighlight,
+  // UI elements
+  arrowText: _sharedUi.gameUIColors.diff.modifiedText,
+  keyText: _sharedUi.gameUIColors.diff.modifiedText,
+  expandIcon: _sharedUi.gameUIColors.diff.lineNumberText,
+  bracketText: _sharedUi.gameUIColors.diff.unchangedText,
+  nullText: _sharedUi.gameUIColors.diff.modifiedText,
+  undefinedText: _sharedUi.gameUIColors.diff.modifiedText,
+  stringText: _sharedUi.gameUIColors.diff.unchangedText,
+  numberText: _sharedUi.gameUIColors.diff.unchangedText,
+  booleanText: _sharedUi.gameUIColors.diff.modifiedText
+};
+const lightTheme = {
+  background: "#ffffff",
+  text: "#333333",
+  addedBg: "rgba(40, 167, 69, 0.1)",
+  addedText: "#28A745",
+  removedBg: "rgba(220, 53, 69, 0.1)",
+  removedText: "#DC3545",
+  changedBg: "rgba(255, 193, 7, 0.1)",
+  changedText: "#FFC107",
+  arrowText: "#007BFF",
+  keyText: "#0451A5",
+  expandIcon: "#6A737D",
+  bracketText: "#6A737D",
+  nullText: "#0000FF",
+  undefinedText: "#0000FF",
+  stringText: "#A31515",
+  numberText: "#098658",
+  booleanText: "#0000FF"
+};
+
+// ============================================
+// DIFF COMPUTATION
+// ============================================
+
+// Removed unused getType function
+
+function isObject(obj) {
+  return obj !== null && typeof obj === "object" && !Array.isArray(obj);
+}
+function isEqual(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  if (a === undefined || b === undefined) return false;
+  if (typeof a !== typeof b) return false;
+  if (typeof a === "object") {
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      return a.every((val, idx) => isEqual(val, b[idx]));
+    }
+    if (isObject(a) && isObject(b)) {
+      const aKeys = Object.keys(a);
+      const bKeys = Object.keys(b);
+      if (aKeys.length !== bKeys.length) return false;
+      return aKeys.every(key => isEqual(a[key], b[key]));
+    }
+  }
+  return false;
+}
+function computeDiff(oldValue, newValue, path = []) {
+  const result = [];
+
+  // Handle primitives and null/undefined
+  if (!isObject(oldValue) && !isObject(newValue) && !Array.isArray(oldValue) && !Array.isArray(newValue)) {
+    if (!isEqual(oldValue, newValue)) {
+      return [{
+        key: path.length > 0 ? path[path.length - 1] : "root",
+        path,
+        type: oldValue === undefined ? "added" : newValue === undefined ? "removed" : "changed",
+        oldValue,
+        newValue
+      }];
+    }
+    return [{
+      key: path.length > 0 ? path[path.length - 1] : "root",
+      path,
+      type: "unchanged",
+      oldValue,
+      newValue
+    }];
+  }
+
+  // Handle arrays
+  if (Array.isArray(oldValue) || Array.isArray(newValue)) {
+    const oldArray = Array.isArray(oldValue) ? oldValue : [];
+    const newArray = Array.isArray(newValue) ? newValue : [];
+    const maxLength = Math.max(oldArray.length, newArray.length);
+    for (let i = 0; i < maxLength; i++) {
+      const itemPath = [...path, `[${i}]`];
+      const oldItem = i < oldArray.length ? oldArray[i] : undefined;
+      const newItem = i < newArray.length ? newArray[i] : undefined;
+      if (oldItem === undefined) {
+        // Added array item: if complex, include children so it can expand
+        const isComplex = Array.isArray(newItem) || isObject(newItem);
+        result.push({
+          key: `[${i}]`,
+          path: itemPath,
+          type: "added",
+          newValue: newItem,
+          ...(isComplex ? {
+            children: computeDiff(Array.isArray(newItem) ? [] : {}, newItem, itemPath),
+            expanded: false
+          } : {})
+        });
+      } else if (newItem === undefined) {
+        // Removed array item: if complex, include children so it can expand
+        const isComplex = Array.isArray(oldItem) || isObject(oldItem);
+        result.push({
+          key: `[${i}]`,
+          path: itemPath,
+          type: "removed",
+          oldValue: oldItem,
+          ...(isComplex ? {
+            children: computeDiff(oldItem, Array.isArray(oldItem) ? [] : {}, itemPath),
+            expanded: false
+          } : {})
+        });
+      } else if (!isEqual(oldItem, newItem)) {
+        if (isObject(oldItem) || isObject(newItem) || Array.isArray(oldItem) || Array.isArray(newItem)) {
+          result.push({
+            key: `[${i}]`,
+            path: itemPath,
+            type: "changed",
+            oldValue: oldItem,
+            newValue: newItem,
+            children: computeDiff(oldItem, newItem, itemPath),
+            expanded: false
+          });
+        } else {
+          result.push({
+            key: `[${i}]`,
+            path: itemPath,
+            type: "changed",
+            oldValue: oldItem,
+            newValue: newItem
+          });
+        }
+      } else {
+        const isComplex = Array.isArray(oldItem) || isObject(oldItem);
+        result.push({
+          key: `[${i}]`,
+          path: itemPath,
+          type: "unchanged",
+          oldValue: oldItem,
+          newValue: newItem,
+          ...(isComplex ? {
+            children: computeDiff(oldItem, newItem, itemPath),
+            expanded: false
+          } : {})
+        });
+      }
+    }
+    return result;
+  }
+
+  // Handle objects
+  const oldObj = isObject(oldValue) ? oldValue : {};
+  const newObj = isObject(newValue) ? newValue : {};
+  const allKeys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
+  for (const key of allKeys) {
+    const keyPath = [...path, key];
+    const oldVal = oldObj[key];
+    const newVal = newObj[key];
+    if (!(key in oldObj)) {
+      // Added key: if complex, include children so it can expand
+      const isComplex = Array.isArray(newVal) || isObject(newVal);
+      result.push({
+        key,
+        path: keyPath,
+        type: "added",
+        newValue: newVal,
+        ...(isComplex ? {
+          children: computeDiff(Array.isArray(newVal) ? [] : {}, newVal, keyPath),
+          expanded: false
+        } : {})
+      });
+    } else if (!(key in newObj)) {
+      // Removed key: if complex, include children so it can expand
+      const isComplex = Array.isArray(oldVal) || isObject(oldVal);
+      result.push({
+        key,
+        path: keyPath,
+        type: "removed",
+        oldValue: oldVal,
+        ...(isComplex ? {
+          children: computeDiff(oldVal, Array.isArray(oldVal) ? [] : {}, keyPath),
+          expanded: false
+        } : {})
+      });
+    } else if (!isEqual(oldVal, newVal)) {
+      if (isObject(oldVal) || isObject(newVal) || Array.isArray(oldVal) || Array.isArray(newVal)) {
+        result.push({
+          key,
+          path: keyPath,
+          type: "changed",
+          oldValue: oldVal,
+          newValue: newVal,
+          children: computeDiff(oldVal, newVal, keyPath),
+          expanded: false
+        });
+      } else {
+        result.push({
+          key,
+          path: keyPath,
+          type: "changed",
+          oldValue: oldVal,
+          newValue: newVal
+        });
+      }
+    } else {
+      const isComplex = Array.isArray(oldVal) || isObject(oldVal);
+      result.push({
+        key,
+        path: keyPath,
+        type: "unchanged",
+        oldValue: oldVal,
+        newValue: newVal,
+        ...(isComplex ? {
+          children: computeDiff(oldVal, newVal, keyPath),
+          expanded: false
+        } : {})
+      });
+    }
+  }
+  return result;
+}
+
+// ============================================
+// VALUE RENDERING
+// ============================================
+
+function stringifyValue(value, compact = true) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "string") {
+    // Truncate long strings for better readability
+    if (compact && value.length > 30) {
+      return `"${value.substring(0, 27)}..."`;
+    }
+    return `"${value}"`;
+  }
+  if (typeof value === "number") {
+    // Format large numbers with commas for readability
+    return value.toLocaleString();
+  }
+  if (typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    if (compact) {
+      const count = value.length;
+      return count === 0 ? "[ ]" : `[ ${count} item${count !== 1 ? "s" : ""} ]`;
+    }
+    return JSON.stringify(value, null, 2);
+  }
+  if (isObject(value)) {
+    if (compact) {
+      const keys = Object.keys(value).length;
+      return keys === 0 ? "{ }" : `{ ${keys} key${keys !== 1 ? "s" : ""} }`;
+    }
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value);
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+function TreeDiffViewer({
+  oldValue,
+  newValue,
+  theme: themeName = "dark",
+  expandAll = false,
+  showUnchanged = true
+}) {
+  const theme = themeName === "dark" ? darkTheme : lightTheme;
+
+  // Initialize with first-level items expanded
+  const [expandedPaths, setExpandedPaths] = (0, _react.useState)(() => {
+    const initialExpanded = new Set();
+    // Auto-expand first level items
+    const rootDiff = computeDiff(oldValue, newValue);
+    rootDiff.forEach(node => {
+      if (node.children && node.children.length > 0) {
+        initialExpanded.add(node.path.join("."));
+      }
+    });
+    return initialExpanded;
+  });
+  const diffTree = (0, _react.useMemo)(() => {
+    const rootDiff = computeDiff(oldValue, newValue);
+    return rootDiff;
+  }, [oldValue, newValue]);
+
+  // Auto-expand all first-level nodes whenever the compared values change
+  (0, _react.useEffect)(() => {
+    const initial = new Set();
+    diffTree.forEach(node => {
+      if (node.children && node.children.length > 0) {
+        initial.add(node.path.join("."));
+      }
+    });
+    setExpandedPaths(initial);
+  }, [diffTree]);
+  const toggleExpanded = path => {
+    const pathStr = path.join(".");
+    setExpandedPaths(prev => {
+      const next = new Set(prev);
+      if (next.has(pathStr)) {
+        next.delete(pathStr);
+      } else {
+        next.add(pathStr);
+      }
+      return next;
+    });
+  };
+
+  // Track line numbers globally for the entire tree
+  let globalLineNumber = 0;
+  const renderDiffNode = (node, depth = 0) => {
+    if (!showUnchanged && node.type === "unchanged") {
+      return null;
+    }
+    globalLineNumber++;
+    const currentLine = globalLineNumber;
+    const indent = depth * 20;
+    const isExpanded = expandAll || expandedPaths.has(node.path.join("."));
+    const hasChildren = node.children && node.children.length > 0;
+
+    // Row background matches DEFAULT viewer behavior
+    const getNodeStyle = () => {
+      switch (node.type) {
+        case "added":
+          return {
+            backgroundColor: theme.addedBg
+          };
+        case "removed":
+          return {
+            backgroundColor: theme.removedBg
+          };
+        case "changed":
+          return {
+            backgroundColor: theme.changedBg
+          };
+        default:
+          return {
+            backgroundColor: "transparent"
+          };
+      }
+    };
+
+    // Removed unused getTextColor function
+
+    // Get the marker (+, -, ~) for the diff type
+    const getMarker = () => {
+      switch (node.type) {
+        case "added":
+          return "+";
+        case "removed":
+          return "−";
+        // Use proper minus sign
+        case "changed":
+          return "≈";
+        // Use proper approximation sign
+        default:
+          return " ";
+      }
+    };
+
+    // Get marker colors
+    const getMarkerStyle = () => {
+      switch (node.type) {
+        case "added":
+          return {
+            backgroundColor: _sharedUi.gameUIColors.diff.markerAddedBackground,
+            color: _sharedUi.gameUIColors.diff.addedText
+          };
+        case "removed":
+          return {
+            backgroundColor: _sharedUi.gameUIColors.diff.markerRemovedBackground,
+            color: _sharedUi.gameUIColors.diff.removedText
+          };
+        case "changed":
+          return {
+            backgroundColor: _sharedUi.gameUIColors.diff.markerModifiedBackground,
+            color: _sharedUi.gameUIColors.diff.modifiedText
+          };
+        default:
+          return {
+            backgroundColor: "transparent",
+            color: _sharedUi.gameUIColors.diff.markerText
+          };
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        activeOpacity: hasChildren ? 0.7 : 1,
+        onPress: hasChildren ? () => toggleExpanded(node.path) : undefined,
+        style: [styles.row, getNodeStyle()],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.lineNumber,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.lineNumberText, {
+              color: _sharedUi.gameUIColors.diff.lineNumberText
+            }],
+            children: String(currentLine).padStart(2, " ")
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.marker, getMarkerStyle()],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.markerText, {
+              color: getMarkerStyle().color
+            }],
+            children: getMarker()
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.content, {
+            paddingLeft: indent
+          }],
+          children: [hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.expandIconContainer,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.expandIcon, {
+                color: theme.expandIcon
+              }],
+              children: isExpanded ? "−" : "+"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.key, {
+              color: theme.keyText
+            }],
+            children: node.key
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.colon, {
+              color: theme.expandIcon
+            }],
+            children: ":"
+          }), node.type === "changed" && !hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.value, {
+                color: theme.removedText,
+                backgroundColor: theme.removedWordBg,
+                // Use word highlight for stronger effect
+                paddingHorizontal: 3,
+                paddingVertical: 2,
+                borderRadius: 3,
+                textDecorationLine: "line-through",
+                textDecorationColor: theme.removedText
+              }],
+              children: stringifyValue(node.oldValue)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.arrow, {
+                color: theme.arrowText,
+                paddingHorizontal: 4
+              }],
+              children: " => "
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.value, {
+                color: theme.addedText,
+                backgroundColor: theme.addedWordBg,
+                // Use word highlight for stronger effect
+                paddingHorizontal: 3,
+                paddingVertical: 2,
+                borderRadius: 3
+              }],
+              children: stringifyValue(node.newValue)
+            })]
+          }), node.type === "added" && !hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.value, {
+              color: theme.addedText,
+              backgroundColor: theme.addedWordBg,
+              // Use word highlight for stronger effect
+              paddingHorizontal: 3,
+              paddingVertical: 2,
+              borderRadius: 3
+            }],
+            children: stringifyValue(node.newValue)
+          }), node.type === "removed" && !hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.value, {
+              color: theme.removedText,
+              backgroundColor: theme.removedWordBg,
+              // Use word highlight for stronger effect
+              paddingHorizontal: 3,
+              paddingVertical: 2,
+              borderRadius: 3,
+              textDecorationLine: "line-through",
+              textDecorationColor: theme.removedText
+            }],
+            children: stringifyValue(node.oldValue)
+          }), node.type === "unchanged" && !hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.value, {
+              color: theme.text
+            }],
+            children: stringifyValue(node.oldValue)
+          }), hasChildren && !isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [node.type === "changed" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.value, {
+                  color: theme.removedText,
+                  backgroundColor: theme.removedWordBg,
+                  // Use word highlight for stronger effect
+                  paddingHorizontal: 3,
+                  paddingVertical: 2,
+                  borderRadius: 3,
+                  textDecorationLine: "line-through",
+                  textDecorationColor: theme.removedText
+                }],
+                children: stringifyValue(node.oldValue, true)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.arrow, {
+                  color: theme.arrowText,
+                  paddingHorizontal: 4
+                }],
+                children: " => "
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.value, {
+                  color: theme.addedText,
+                  backgroundColor: theme.addedWordBg,
+                  // Use word highlight for stronger effect
+                  paddingHorizontal: 3,
+                  paddingVertical: 2,
+                  borderRadius: 3
+                }],
+                children: stringifyValue(node.newValue, true)
+              })]
+            }), node.type === "added" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.value, {
+                color: theme.addedText,
+                backgroundColor: theme.addedWordBg,
+                // Use word highlight for stronger effect
+                paddingHorizontal: 3,
+                paddingVertical: 2,
+                borderRadius: 3
+              }],
+              children: stringifyValue(node.newValue, true)
+            }), node.type === "removed" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.value, {
+                color: theme.removedText,
+                backgroundColor: theme.removedWordBg,
+                // Use word highlight for stronger effect
+                paddingHorizontal: 3,
+                paddingVertical: 2,
+                borderRadius: 3,
+                textDecorationLine: "line-through",
+                textDecorationColor: theme.removedText
+              }],
+              children: stringifyValue(node.oldValue, true)
+            })]
+          })]
+        })]
+      }), hasChildren && isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: node.children.map(child => renderDiffNode(child, depth + 1))
+      })]
+    }, node.path.join("."));
+  };
+  const countChanges = nodes => {
+    let added = 0,
+      removed = 0,
+      changed = 0;
+    const count = nodeList => {
+      for (const node of nodeList) {
+        if (node.type === "added") added++;else if (node.type === "removed") removed++;else if (node.type === "changed") changed++;
+        if (node.children) {
+          count(node.children);
+        }
+      }
+    };
+    count(nodes);
+    return {
+      added,
+      removed,
+      changed
+    };
+  };
+  const stats = (0, _react.useMemo)(() => countChanges(diffTree), [diffTree]);
+
+  // Show header only if there are changes
+  const hasChanges = stats.added > 0 || stats.removed > 0 || stats.changed > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: theme.background
+    }],
+    children: [hasChanges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.header, {
+        backgroundColor: theme.background
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.summaryContainer,
+        children: [stats.added > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.summaryItem, styles.summaryAdded],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryIcon, {
+              color: theme.addedText
+            }],
+            children: "+"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryCount, {
+              color: theme.addedText
+            }],
+            children: stats.added
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryLabel, {
+              color: theme.addedText
+            }],
+            children: "new"
+          })]
+        }), stats.removed > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.summaryItem, styles.summaryRemoved],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryIcon, {
+              color: theme.removedText
+            }],
+            children: "\u2212"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryCount, {
+              color: theme.removedText
+            }],
+            children: stats.removed
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryLabel, {
+              color: theme.removedText
+            }],
+            children: "gone"
+          })]
+        }), stats.changed > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.summaryItem, styles.summaryChanged],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryIcon, {
+              color: theme.changedText
+            }],
+            children: "\u2248"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryCount, {
+              color: theme.changedText
+            }],
+            children: stats.changed
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.summaryLabel, {
+              color: theme.changedText
+            }],
+            children: "modified"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.scrollView,
+      showsVerticalScrollIndicator: false,
+      children: diffTree.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.emptyIcon, {
+            color: theme.text
+          }],
+          children: "\u2261"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.emptyTitle, {
+            color: theme.text
+          }],
+          children: "No changes detected"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.emptySubtitle, {
+            color: theme.expandIcon
+          }],
+          children: "The data is identical"
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: (() => {
+          globalLineNumber = 0; // Reset counter before rendering
+          return diffTree.map(node => renderDiffNode(node, 0));
+        })()
+      })
+    })]
+  });
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  header: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.gameUIColors.diff.lineNumberBorder
+  },
+  summaryContainer: {
+    flexDirection: "row",
+    gap: 16,
+    alignItems: "center"
+  },
+  summaryItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12
+  },
+  summaryAdded: {
+    backgroundColor: _sharedUi.gameUIColors.diff.addedBackground
+  },
+  summaryRemoved: {
+    backgroundColor: _sharedUi.gameUIColors.diff.removedBackground
+  },
+  summaryChanged: {
+    backgroundColor: _sharedUi.gameUIColors.diff.modifiedBackground
+  },
+  summaryIcon: {
+    fontSize: 14,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  summaryCount: {
+    fontSize: 13,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  summaryLabel: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    opacity: 0.9
+  },
+  scrollView: {
+    flex: 1
+  },
+  row: {
+    minHeight: 26,
+    justifyContent: "center",
+    flexDirection: "row",
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(255, 255, 255, 0.02)"
+  },
+  lineNumber: {
+    width: 32,
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    backgroundColor: _sharedUi.gameUIColors.diff.lineNumberBackground,
+    justifyContent: "center",
+    borderRightWidth: 1,
+    borderRightColor: _sharedUi.gameUIColors.diff.lineNumberBorder
+  },
+  lineNumberText: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    textAlign: "right"
+  },
+  marker: {
+    width: 20,
+    paddingHorizontal: 2,
+    paddingVertical: 4,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  markerText: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 4
+  },
+  expandIconContainer: {
+    width: 16,
+    height: 16,
+    borderRadius: 3,
+    backgroundColor: _sharedUi.gameUIColors.diff.lineNumberBorder,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 6
+  },
+  expandIcon: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  colon: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginHorizontal: 4
+  },
+  key: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "500",
+    opacity: 0.9
+  },
+  value: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    maxWidth: "80%"
+  },
+  arrow: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  badge: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    marginLeft: 8
+  },
+  emptyState: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 60
+  },
+  emptyIcon: {
+    fontSize: 48,
+    fontFamily: "monospace",
+    opacity: 0.2,
+    marginBottom: 12
+  },
+  emptyTitle: {
+    fontSize: 14,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    marginBottom: 4
+  },
+  emptySubtitle: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    opacity: 0.6
+  }
+});