@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,915 +1 @@
-"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 _lineDiff = require("../lineDiff.js");
-var _fonts = require("../../ui/fonts.js");
-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 = {
-  // Night chrome; the diff DATA colors below stay on the shared diff palette.
-  background: _sharedUi.night.color.bg,
-  text: _sharedUi.night.color.textSecondary,
-  // "unchanged" stays dimmed vs the diff tints
-  // 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.night.color.textTertiary,
-  bracketText: _sharedUi.night.color.textSecondary,
-  nullText: _sharedUi.gameUIColors.diff.modifiedText,
-  undefinedText: _sharedUi.gameUIColors.diff.modifiedText,
-  stringText: _sharedUi.night.color.textSecondary,
-  numberText: _sharedUi.night.color.textSecondary,
-  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 = [];
-
-  // A side marked absent never existed, so it contributes nothing and the other
-  // side reads as purely added (or removed). Only the root can be absent.
-  if ((0, _lineDiff.isAbsent)(oldValue)) oldValue = undefined;
-  if ((0, _lineDiff.isAbsent)(newValue)) newValue = undefined;
-
-  // 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") {
-    // The exact value. toLocaleString() added separators (1019 read as
-    // "1,019", like a string) and rounded to three decimals, so a diff could
-    // show a change that looked like nothing, or hide one that was real.
-    return String(value);
-  }
-  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,
-  scrollEnabled = 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]);
-
-  // Key the auto-expand effect off a structural signature, not diffTree itself.
-  // Parents commonly pass freshly-parsed values (JSON.parse) on every render,
-  // so diffTree would change identity without changing meaning — and reset the
-  // user's expansion state on every unrelated re-render.
-  const comparisonSignature = (0, _react.useMemo)(() => diffTree.map(node => `${node.path.join(".")}:${node.type}`).join("|"), [diffTree]);
-  const hasMountedRef = (0, _react.useRef)(false);
-  (0, _react.useEffect)(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    const initial = new Set();
-    diffTree.forEach(node => {
-      if (node.children && node.children.length > 0) {
-        initial.add(node.path.join("."));
-      }
-    });
-    setExpandedPaths(initial);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comparisonSignature]);
-  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;
-
-  // Inline mode must not claim `flex: 1`, or it would stretch to the pane and
-  // clip the rows an ancestor ScrollView is supposed to reveal.
-  const RowsContainer = scrollEnabled ? _reactNative.ScrollView : _reactNative.View;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [scrollEnabled ? styles.container : styles.containerInline, {
-      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)(RowsContainer, {
-      style: scrollEnabled ? styles.scrollView : undefined,
-      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"
-  },
-  containerInline: {
-    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: _fonts.monoFont
-  },
-  summaryCount: {
-    fontSize: 13,
-    fontWeight: "600",
-    fontFamily: _fonts.monoFont
-  },
-  summaryLabel: {
-    fontSize: 11,
-    fontFamily: _fonts.monoFont,
-    opacity: 0.9
-  },
-  scrollView: {
-    flex: 1
-  },
-  row: {
-    minHeight: 26,
-    justifyContent: "center",
-    flexDirection: "row",
-    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: "rgba(128, 128, 128, 0.04)"
-  },
-  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: _fonts.monoFont,
-    textAlign: "right"
-  },
-  marker: {
-    width: 20,
-    paddingHorizontal: 2,
-    paddingVertical: 4,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  markerText: {
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    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: _fonts.monoFont,
-    fontWeight: "600"
-  },
-  colon: {
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    marginHorizontal: 4
-  },
-  key: {
-    fontSize: 11,
-    fontFamily: _fonts.monoFont,
-    fontWeight: "500",
-    opacity: 0.9
-  },
-  value: {
-    fontSize: 11,
-    fontFamily: _fonts.monoFont,
-    maxWidth: "80%"
-  },
-  arrow: {
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    fontWeight: "600"
-  },
-  badge: {
-    fontSize: 11,
-    fontFamily: _fonts.monoFont,
-    fontWeight: "600",
-    marginLeft: 8
-  },
-  emptyState: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 60
-  },
-  emptyIcon: {
-    fontSize: 48,
-    fontFamily: _fonts.monoFont,
-    opacity: 0.2,
-    marginBottom: 12
-  },
-  emptyTitle: {
-    fontSize: 14,
-    fontFamily: _fonts.monoFont,
-    fontWeight: "600",
-    marginBottom: 4
-  },
-  emptySubtitle: {
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    opacity: 0.6
-  }
-});
+"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 _lineDiff=require("../lineDiff.js");var _fonts=require("../../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,o){if("function"==typeof WeakMap)var i=new WeakMap,c=new WeakMap;return(_interopRequireWildcard=function(a,h){if(!h&&a&&a.__esModule)return a;var r,s,l={__proto__:null,default:a};if(null===a||"object"!=typeof a&&"function"!=typeof a)return l;if(r=h?c:i){if(r.has(a))return r.get(a);r.set(a,l)}for(const n in a)"default"!==n&&{}.hasOwnProperty.call(a,n)&&((s=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(a,n))&&(s.get||s.set)?r(l,n,s):l[n]=a[n]);return l})(e,o)}const darkTheme={background:_sharedUi.night.color.bg,text:_sharedUi.night.color.textSecondary,addedBg:_sharedUi.gameUIColors.diff.addedBackground,removedBg:_sharedUi.gameUIColors.diff.removedBackground,changedBg:_sharedUi.gameUIColors.diff.modifiedBackground,addedText:_sharedUi.gameUIColors.diff.addedText,removedText:_sharedUi.gameUIColors.diff.removedText,changedText:_sharedUi.gameUIColors.diff.modifiedText,addedWordBg:_sharedUi.gameUIColors.diff.addedWordHighlight,removedWordBg:_sharedUi.gameUIColors.diff.removedWordHighlight,arrowText:_sharedUi.gameUIColors.diff.modifiedText,keyText:_sharedUi.gameUIColors.diff.modifiedText,expandIcon:_sharedUi.night.color.textTertiary,bracketText:_sharedUi.night.color.textSecondary,nullText:_sharedUi.gameUIColors.diff.modifiedText,undefinedText:_sharedUi.gameUIColors.diff.modifiedText,stringText:_sharedUi.night.color.textSecondary,numberText:_sharedUi.night.color.textSecondary,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"};function isObject(e){return e!==null&&typeof e==="object"&&!Array.isArray(e)}function isEqual(e,o){if(e===o)return true;if(e===null||o===null)return false;if(e===void 0||o===void 0)return false;if(typeof e!==typeof o)return false;if(typeof e==="object"){if(Array.isArray(e)&&Array.isArray(o)){if(e.length!==o.length)return false;return e.every((i,c)=>isEqual(i,o[c]))}if(isObject(e)&&isObject(o)){const i=Object.keys(e);const c=Object.keys(o);if(i.length!==c.length)return false;return i.every(a=>isEqual(e[a],o[a]))}}return false}function computeDiff(e,o,i=[]){const c=[];if((0,_lineDiff.isAbsent)(e))e=void 0;if((0,_lineDiff.isAbsent)(o))o=void 0;if(!isObject(e)&&!isObject(o)&&!Array.isArray(e)&&!Array.isArray(o)){if(!isEqual(e,o)){return[{key:i.length>0?i[i.length-1]:"root",path:i,type:e===void 0?"added":o===void 0?"removed":"changed",oldValue:e,newValue:o}]}return[{key:i.length>0?i[i.length-1]:"root",path:i,type:"unchanged",oldValue:e,newValue:o}]}if(Array.isArray(e)||Array.isArray(o)){const s=Array.isArray(e)?e:[];const l=Array.isArray(o)?o:[];const n=Math.max(s.length,l.length);for(let d=0;d<n;d++){const f=[...i,`[${d}]`];const u=d<s.length?s[d]:void 0;const g=d<l.length?l[d]:void 0;if(u===void 0){const C=Array.isArray(g)||isObject(g);c.push({key:`[${d}]`,path:f,type:"added",newValue:g,...C?{children:computeDiff(Array.isArray(g)?[]:{},g,f),expanded:false}:{}})}else if(g===void 0){const C=Array.isArray(u)||isObject(u);c.push({key:`[${d}]`,path:f,type:"removed",oldValue:u,...C?{children:computeDiff(u,Array.isArray(u)?[]:{},f),expanded:false}:{}})}else if(!isEqual(u,g)){if(isObject(u)||isObject(g)||Array.isArray(u)||Array.isArray(g)){c.push({key:`[${d}]`,path:f,type:"changed",oldValue:u,newValue:g,children:computeDiff(u,g,f),expanded:false})}else{c.push({key:`[${d}]`,path:f,type:"changed",oldValue:u,newValue:g})}}else{const C=Array.isArray(u)||isObject(u);c.push({key:`[${d}]`,path:f,type:"unchanged",oldValue:u,newValue:g,...C?{children:computeDiff(u,g,f),expanded:false}:{}})}}return c}const a=isObject(e)?e:{};const h=isObject(o)?o:{};const r=new Set([...Object.keys(a),...Object.keys(h)]);for(const s of r){const l=[...i,s];const n=a[s];const d=h[s];if(!(s in a)){const f=Array.isArray(d)||isObject(d);c.push({key:s,path:l,type:"added",newValue:d,...f?{children:computeDiff(Array.isArray(d)?[]:{},d,l),expanded:false}:{}})}else if(!(s in h)){const f=Array.isArray(n)||isObject(n);c.push({key:s,path:l,type:"removed",oldValue:n,...f?{children:computeDiff(n,Array.isArray(n)?[]:{},l),expanded:false}:{}})}else if(!isEqual(n,d)){if(isObject(n)||isObject(d)||Array.isArray(n)||Array.isArray(d)){c.push({key:s,path:l,type:"changed",oldValue:n,newValue:d,children:computeDiff(n,d,l),expanded:false})}else{c.push({key:s,path:l,type:"changed",oldValue:n,newValue:d})}}else{const f=Array.isArray(n)||isObject(n);c.push({key:s,path:l,type:"unchanged",oldValue:n,newValue:d,...f?{children:computeDiff(n,d,l),expanded:false}:{}})}}return c}function stringifyValue(e,o=true){if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e==="string"){if(o&&e.length>30){return`"${e.substring(0,27)}..."`}return`"${e}"`}if(typeof e==="number"){return String(e)}if(typeof e==="boolean"){return String(e)}if(Array.isArray(e)){if(o){const i=e.length;return i===0?"[ ]":`[ ${i} item${i!==1?"s":""} ]`}return JSON.stringify(e,null,2)}if(isObject(e)){if(o){const i=Object.keys(e).length;return i===0?"{ }":`{ ${i} key${i!==1?"s":""} }`}return JSON.stringify(e,null,2)}return String(e)}function TreeDiffViewer({oldValue:e,newValue:o,theme:i="dark",expandAll:c=false,showUnchanged:a=true,scrollEnabled:h=true}){const r=i==="dark"?darkTheme:lightTheme;const[s,l]=(0,_react.useState)(()=>{const t=new Set;const m=computeDiff(e,o);m.forEach(x=>{if(x.children&&x.children.length>0){t.add(x.path.join("."))}});return t});const n=(0,_react.useMemo)(()=>{const t=computeDiff(e,o);return t},[e,o]);const d=(0,_react.useMemo)(()=>n.map(t=>`${t.path.join(".")}:${t.type}`).join("|"),[n]);const f=(0,_react.useRef)(false);(0,_react.useEffect)(()=>{if(!f.current){f.current=true;return}const t=new Set;n.forEach(m=>{if(m.children&&m.children.length>0){t.add(m.path.join("."))}});l(t)},[d]);const u=t=>{const m=t.join(".");l(x=>{const T=new Set(x);if(T.has(m)){T.delete(m)}else{T.add(m)}return T})};let g=0;const C=(t,m=0)=>{if(!a&&t.type==="unchanged"){return null}g++;const x=g;const T=m*20;const k=c||s.has(t.path.join("."));const y=t.children&&t.children.length>0;const b=()=>{switch(t.type){case"added":return{backgroundColor:r.addedBg};case"removed":return{backgroundColor:r.removedBg};case"changed":return{backgroundColor:r.changedBg};default:return{backgroundColor:"transparent"}}};const v=()=>{switch(t.type){case"added":return"+";case"removed":return"\u2212";case"changed":return"\u2248";default:return" "}};const j=()=>{switch(t.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(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{activeOpacity:y?.7:1,onPress:y?()=>u(t.path):void 0,style:[styles.row,b()],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.lineNumber,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.lineNumberText,{color:_sharedUi.gameUIColors.diff.lineNumberText}],children:String(x).padStart(2," ")})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.marker,j()],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.markerText,{color:j().color}],children:v()})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.content,{paddingLeft:T}],children:[y&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.expandIconContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.expandIcon,{color:r.expandIcon}],children:k?"\u2212":"+"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.key,{color:r.keyText}],children:t.key}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.colon,{color:r.expandIcon}],children:":"}),t.type==="changed"&&!y&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:stringifyValue(t.oldValue)}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.arrow,{color:r.arrowText,paddingHorizontal:4}],children:" => "}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:stringifyValue(t.newValue)})]}),t.type==="added"&&!y&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:stringifyValue(t.newValue)}),t.type==="removed"&&!y&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:stringifyValue(t.oldValue)}),t.type==="unchanged"&&!y&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.text}],children:stringifyValue(t.oldValue)}),y&&!k&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t.type==="changed"&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:stringifyValue(t.oldValue,true)}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.arrow,{color:r.arrowText,paddingHorizontal:4}],children:" => "}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:stringifyValue(t.newValue,true)})]}),t.type==="added"&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:stringifyValue(t.newValue,true)}),t.type==="removed"&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:stringifyValue(t.oldValue,true)})]})]})]}),y&&k&&(0,_jsxRuntime.jsx)(_reactNative.View,{children:t.children.map(S=>C(S,m+1))})]},t.path.join("."))};const A=t=>{let m=0,x=0,T=0;const k=y=>{for(const b of y){if(b.type==="added")m++;else if(b.type==="removed")x++;else if(b.type==="changed")T++;if(b.children){k(b.children)}}};k(t);return{added:m,removed:x,changed:T}};const p=(0,_react.useMemo)(()=>A(n),[n]);const I=p.added>0||p.removed>0||p.changed>0;const w=h?_reactNative.ScrollView:_reactNative.View;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[h?styles.container:styles.containerInline,{backgroundColor:r.background}],children:[I&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.header,{backgroundColor:r.background}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.summaryContainer,children:[p.added>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.summaryItem,styles.summaryAdded],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryIcon,{color:r.addedText}],children:"+"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryCount,{color:r.addedText}],children:p.added}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryLabel,{color:r.addedText}],children:"new"})]}),p.removed>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.summaryItem,styles.summaryRemoved],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryIcon,{color:r.removedText}],children:"\u2212"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryCount,{color:r.removedText}],children:p.removed}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryLabel,{color:r.removedText}],children:"gone"})]}),p.changed>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.summaryItem,styles.summaryChanged],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryIcon,{color:r.changedText}],children:"\u2248"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryCount,{color:r.changedText}],children:p.changed}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.summaryLabel,{color:r.changedText}],children:"modified"})]})]})}),(0,_jsxRuntime.jsx)(w,{style:h?styles.scrollView:void 0,showsVerticalScrollIndicator:false,children:n.length===0?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.emptyIcon,{color:r.text}],children:"\u2261"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.emptyTitle,{color:r.text}],children:"No changes detected"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.emptySubtitle,{color:r.expandIcon}],children:"The data is identical"})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{children:(()=>{g=0;return n.map(t=>C(t,0))})()})})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,borderRadius:8,overflow:"hidden"},containerInline:{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:_fonts.monoFont},summaryCount:{fontSize:13,fontWeight:"600",fontFamily:_fonts.monoFont},summaryLabel:{fontSize:11,fontFamily:_fonts.monoFont,opacity:.9},scrollView:{flex:1},row:{minHeight:26,justifyContent:"center",flexDirection:"row",borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:"rgba(128, 128, 128, 0.04)"},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:_fonts.monoFont,textAlign:"right"},marker:{width:20,paddingHorizontal:2,paddingVertical:4,justifyContent:"center",alignItems:"center"},markerText:{fontSize:12,fontFamily:_fonts.monoFont,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:_fonts.monoFont,fontWeight:"600"},colon:{fontSize:12,fontFamily:_fonts.monoFont,marginHorizontal:4},key:{fontSize:11,fontFamily:_fonts.monoFont,fontWeight:"500",opacity:.9},value:{fontSize:11,fontFamily:_fonts.monoFont,maxWidth:"80%"},arrow:{fontSize:12,fontFamily:_fonts.monoFont,fontWeight:"600"},badge:{fontSize:11,fontFamily:_fonts.monoFont,fontWeight:"600",marginLeft:8},emptyState:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:60},emptyIcon:{fontSize:48,fontFamily:_fonts.monoFont,opacity:.2,marginBottom:12},emptyTitle:{fontSize:14,fontFamily:_fonts.monoFont,fontWeight:"600",marginBottom:4},emptySubtitle:{fontSize:12,fontFamily:_fonts.monoFont,opacity:.6}});