@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,907 +1 @@
-"use strict";
-
-// @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"
- * />
- */
-
-import React, { useMemo, useState, useEffect, useRef } from "react";
-import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
-import { gameUIColors, night } from "@buoy-gg/shared-ui";
-import { isAbsent } from "../lineDiff.js";
-import { monoFont } from "../../ui/fonts.js";
-// ============================================
-// TYPES & INTERFACES
-// ============================================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================
-// THEMES
-// ============================================
-
-const darkTheme = {
-  // Night chrome; the diff DATA colors below stay on the shared diff palette.
-  background: night.color.bg,
-  text: night.color.textSecondary,
-  // "unchanged" stays dimmed vs the diff tints
-  // Line backgrounds - exact from gameUIColors
-  addedBg: gameUIColors.diff.addedBackground,
-  removedBg: gameUIColors.diff.removedBackground,
-  changedBg: gameUIColors.diff.modifiedBackground,
-  // Text colors - exact from gameUIColors
-  addedText: gameUIColors.diff.addedText,
-  removedText: gameUIColors.diff.removedText,
-  changedText: gameUIColors.diff.modifiedText,
-  // Word highlights - darker backgrounds for text
-  addedWordBg: gameUIColors.diff.addedWordHighlight,
-  removedWordBg: gameUIColors.diff.removedWordHighlight,
-  // UI elements
-  arrowText: gameUIColors.diff.modifiedText,
-  keyText: gameUIColors.diff.modifiedText,
-  expandIcon: night.color.textTertiary,
-  bracketText: night.color.textSecondary,
-  nullText: gameUIColors.diff.modifiedText,
-  undefinedText: gameUIColors.diff.modifiedText,
-  stringText: night.color.textSecondary,
-  numberText: night.color.textSecondary,
-  booleanText: 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 (isAbsent(oldValue)) oldValue = undefined;
-  if (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") {
-    // 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
-// ============================================
-
-export default 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] = 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 = 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 = useMemo(() => diffTree.map(node => `${node.path.join(".")}:${node.type}`).join("|"), [diffTree]);
-  const hasMountedRef = useRef(false);
-  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: gameUIColors.diff.markerAddedBackground,
-            color: gameUIColors.diff.addedText
-          };
-        case "removed":
-          return {
-            backgroundColor: gameUIColors.diff.markerRemovedBackground,
-            color: gameUIColors.diff.removedText
-          };
-        case "changed":
-          return {
-            backgroundColor: gameUIColors.diff.markerModifiedBackground,
-            color: gameUIColors.diff.modifiedText
-          };
-        default:
-          return {
-            backgroundColor: "transparent",
-            color: gameUIColors.diff.markerText
-          };
-      }
-    };
-    return /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        activeOpacity: hasChildren ? 0.7 : 1,
-        onPress: hasChildren ? () => toggleExpanded(node.path) : undefined,
-        style: [styles.row, getNodeStyle()],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.lineNumber,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.lineNumberText, {
-              color: gameUIColors.diff.lineNumberText
-            }],
-            children: String(currentLine).padStart(2, " ")
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.marker, getMarkerStyle()],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.markerText, {
-              color: getMarkerStyle().color
-            }],
-            children: getMarker()
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.content, {
-            paddingLeft: indent
-          }],
-          children: [hasChildren && /*#__PURE__*/_jsx(View, {
-            style: styles.expandIconContainer,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.expandIcon, {
-                color: theme.expandIcon
-              }],
-              children: isExpanded ? "−" : "+"
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.key, {
-              color: theme.keyText
-            }],
-            children: node.key
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.colon, {
-              color: theme.expandIcon
-            }],
-            children: ":"
-          }), node.type === "changed" && !hasChildren && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(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__*/_jsx(Text, {
-              style: [styles.arrow, {
-                color: theme.arrowText,
-                paddingHorizontal: 4
-              }],
-              children: " => "
-            }), /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(Text, {
-            style: [styles.value, {
-              color: theme.text
-            }],
-            children: stringifyValue(node.oldValue)
-          }), hasChildren && !isExpanded && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [node.type === "changed" && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(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__*/_jsx(Text, {
-                style: [styles.arrow, {
-                  color: theme.arrowText,
-                  paddingHorizontal: 4
-                }],
-                children: " => "
-              }), /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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 = 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 ? ScrollView : View;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [scrollEnabled ? styles.container : styles.containerInline, {
-      backgroundColor: theme.background
-    }],
-    children: [hasChanges && /*#__PURE__*/_jsx(View, {
-      style: [styles.header, {
-        backgroundColor: theme.background
-      }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryContainer,
-        children: [stats.added > 0 && /*#__PURE__*/_jsxs(View, {
-          style: [styles.summaryItem, styles.summaryAdded],
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryIcon, {
-              color: theme.addedText
-            }],
-            children: "+"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryCount, {
-              color: theme.addedText
-            }],
-            children: stats.added
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryLabel, {
-              color: theme.addedText
-            }],
-            children: "new"
-          })]
-        }), stats.removed > 0 && /*#__PURE__*/_jsxs(View, {
-          style: [styles.summaryItem, styles.summaryRemoved],
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryIcon, {
-              color: theme.removedText
-            }],
-            children: "\u2212"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryCount, {
-              color: theme.removedText
-            }],
-            children: stats.removed
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryLabel, {
-              color: theme.removedText
-            }],
-            children: "gone"
-          })]
-        }), stats.changed > 0 && /*#__PURE__*/_jsxs(View, {
-          style: [styles.summaryItem, styles.summaryChanged],
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryIcon, {
-              color: theme.changedText
-            }],
-            children: "\u2248"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryCount, {
-              color: theme.changedText
-            }],
-            children: stats.changed
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.summaryLabel, {
-              color: theme.changedText
-            }],
-            children: "modified"
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(RowsContainer, {
-      style: scrollEnabled ? styles.scrollView : undefined,
-      showsVerticalScrollIndicator: false,
-      children: diffTree.length === 0 ? /*#__PURE__*/_jsxs(View, {
-        style: styles.emptyState,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.emptyIcon, {
-            color: theme.text
-          }],
-          children: "\u2261"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.emptyTitle, {
-            color: theme.text
-          }],
-          children: "No changes detected"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.emptySubtitle, {
-            color: theme.expandIcon
-          }],
-          children: "The data is identical"
-        })]
-      }) : /*#__PURE__*/_jsx(View, {
-        children: (() => {
-          globalLineNumber = 0; // Reset counter before rendering
-          return diffTree.map(node => renderDiffNode(node, 0));
-        })()
-      })
-    })]
-  });
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    borderRadius: 8,
-    overflow: "hidden"
-  },
-  containerInline: {
-    borderRadius: 8,
-    overflow: "hidden"
-  },
-  header: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: 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: gameUIColors.diff.addedBackground
-  },
-  summaryRemoved: {
-    backgroundColor: gameUIColors.diff.removedBackground
-  },
-  summaryChanged: {
-    backgroundColor: gameUIColors.diff.modifiedBackground
-  },
-  summaryIcon: {
-    fontSize: 14,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  summaryCount: {
-    fontSize: 13,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  summaryLabel: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    opacity: 0.9
-  },
-  scrollView: {
-    flex: 1
-  },
-  row: {
-    minHeight: 26,
-    justifyContent: "center",
-    flexDirection: "row",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "rgba(128, 128, 128, 0.04)"
-  },
-  lineNumber: {
-    width: 32,
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    backgroundColor: gameUIColors.diff.lineNumberBackground,
-    justifyContent: "center",
-    borderRightWidth: 1,
-    borderRightColor: gameUIColors.diff.lineNumberBorder
-  },
-  lineNumberText: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    textAlign: "right"
-  },
-  marker: {
-    width: 20,
-    paddingHorizontal: 2,
-    paddingVertical: 4,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  markerText: {
-    fontSize: 12,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  content: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 4
-  },
-  expandIconContainer: {
-    width: 16,
-    height: 16,
-    borderRadius: 3,
-    backgroundColor: gameUIColors.diff.lineNumberBorder,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 6
-  },
-  expandIcon: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  colon: {
-    fontSize: 12,
-    fontFamily: monoFont,
-    marginHorizontal: 4
-  },
-  key: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    fontWeight: "500",
-    opacity: 0.9
-  },
-  value: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    maxWidth: "80%"
-  },
-  arrow: {
-    fontSize: 12,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  badge: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    fontWeight: "600",
-    marginLeft: 8
-  },
-  emptyState: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 60
-  },
-  emptyIcon: {
-    fontSize: 48,
-    fontFamily: monoFont,
-    opacity: 0.2,
-    marginBottom: 12
-  },
-  emptyTitle: {
-    fontSize: 14,
-    fontFamily: monoFont,
-    fontWeight: "600",
-    marginBottom: 4
-  },
-  emptySubtitle: {
-    fontSize: 12,
-    fontFamily: monoFont,
-    opacity: 0.6
-  }
-});
+"use strict";import ee,{useMemo as V,useState as _,useEffect as J,useRef as q}from"react";import{View as b,Text as a,ScrollView as U,StyleSheet as $,TouchableOpacity as G}from"react-native";import{gameUIColors as l,night as R}from"@buoy-gg/shared-ui";import{isAbsent as L}from"../lineDiff.js";import{monoFont as k}from"../../ui/fonts.js";import{jsx as o,Fragment as H,jsxs as T}from"react/jsx-runtime";const Q={background:R.color.bg,text:R.color.textSecondary,addedBg:l.diff.addedBackground,removedBg:l.diff.removedBackground,changedBg:l.diff.modifiedBackground,addedText:l.diff.addedText,removedText:l.diff.removedText,changedText:l.diff.modifiedText,addedWordBg:l.diff.addedWordHighlight,removedWordBg:l.diff.removedWordHighlight,arrowText:l.diff.modifiedText,keyText:l.diff.modifiedText,expandIcon:R.color.textTertiary,bracketText:R.color.textSecondary,nullText:l.diff.modifiedText,undefinedText:l.diff.modifiedText,stringText:R.color.textSecondary,numberText:R.color.textSecondary,booleanText:l.diff.modifiedText};const X={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 m(e){return e!==null&&typeof e==="object"&&!Array.isArray(e)}function D(e,d){if(e===d)return true;if(e===null||d===null)return false;if(e===void 0||d===void 0)return false;if(typeof e!==typeof d)return false;if(typeof e==="object"){if(Array.isArray(e)&&Array.isArray(d)){if(e.length!==d.length)return false;return e.every((c,f)=>D(c,d[f]))}if(m(e)&&m(d)){const c=Object.keys(e);const f=Object.keys(d);if(c.length!==f.length)return false;return c.every(I=>D(e[I],d[I]))}}return false}function S(e,d,c=[]){const f=[];if(L(e))e=void 0;if(L(d))d=void 0;if(!m(e)&&!m(d)&&!Array.isArray(e)&&!Array.isArray(d)){if(!D(e,d)){return[{key:c.length>0?c[c.length-1]:"root",path:c,type:e===void 0?"added":d===void 0?"removed":"changed",oldValue:e,newValue:d}]}return[{key:c.length>0?c[c.length-1]:"root",path:c,type:"unchanged",oldValue:e,newValue:d}]}if(Array.isArray(e)||Array.isArray(d)){const h=Array.isArray(e)?e:[];const p=Array.isArray(d)?d:[];const s=Math.max(h.length,p.length);for(let i=0;i<s;i++){const y=[...c,`[${i}]`];const u=i<h.length?h[i]:void 0;const g=i<p.length?p[i]:void 0;if(u===void 0){const z=Array.isArray(g)||m(g);f.push({key:`[${i}]`,path:y,type:"added",newValue:g,...z?{children:S(Array.isArray(g)?[]:{},g,y),expanded:false}:{}})}else if(g===void 0){const z=Array.isArray(u)||m(u);f.push({key:`[${i}]`,path:y,type:"removed",oldValue:u,...z?{children:S(u,Array.isArray(u)?[]:{},y),expanded:false}:{}})}else if(!D(u,g)){if(m(u)||m(g)||Array.isArray(u)||Array.isArray(g)){f.push({key:`[${i}]`,path:y,type:"changed",oldValue:u,newValue:g,children:S(u,g,y),expanded:false})}else{f.push({key:`[${i}]`,path:y,type:"changed",oldValue:u,newValue:g})}}else{const z=Array.isArray(u)||m(u);f.push({key:`[${i}]`,path:y,type:"unchanged",oldValue:u,newValue:g,...z?{children:S(u,g,y),expanded:false}:{}})}}return f}const I=m(e)?e:{};const F=m(d)?d:{};const r=new Set([...Object.keys(I),...Object.keys(F)]);for(const h of r){const p=[...c,h];const s=I[h];const i=F[h];if(!(h in I)){const y=Array.isArray(i)||m(i);f.push({key:h,path:p,type:"added",newValue:i,...y?{children:S(Array.isArray(i)?[]:{},i,p),expanded:false}:{}})}else if(!(h in F)){const y=Array.isArray(s)||m(s);f.push({key:h,path:p,type:"removed",oldValue:s,...y?{children:S(s,Array.isArray(s)?[]:{},p),expanded:false}:{}})}else if(!D(s,i)){if(m(s)||m(i)||Array.isArray(s)||Array.isArray(i)){f.push({key:h,path:p,type:"changed",oldValue:s,newValue:i,children:S(s,i,p),expanded:false})}else{f.push({key:h,path:p,type:"changed",oldValue:s,newValue:i})}}else{const y=Array.isArray(s)||m(s);f.push({key:h,path:p,type:"unchanged",oldValue:s,newValue:i,...y?{children:S(s,i,p),expanded:false}:{}})}}return f}function w(e,d=true){if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e==="string"){if(d&&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(d){const c=e.length;return c===0?"[ ]":`[ ${c} item${c!==1?"s":""} ]`}return JSON.stringify(e,null,2)}if(m(e)){if(d){const c=Object.keys(e).length;return c===0?"{ }":`{ ${c} key${c!==1?"s":""} }`}return JSON.stringify(e,null,2)}return String(e)}export default function Y({oldValue:e,newValue:d,theme:c="dark",expandAll:f=false,showUnchanged:I=true,scrollEnabled:F=true}){const r=c==="dark"?Q:X;const[h,p]=_(()=>{const n=new Set;const x=S(e,d);x.forEach(C=>{if(C.children&&C.children.length>0){n.add(C.path.join("."))}});return n});const s=V(()=>{const n=S(e,d);return n},[e,d]);const i=V(()=>s.map(n=>`${n.path.join(".")}:${n.type}`).join("|"),[s]);const y=q(false);J(()=>{if(!y.current){y.current=true;return}const n=new Set;s.forEach(x=>{if(x.children&&x.children.length>0){n.add(x.path.join("."))}});p(n)},[i]);const u=n=>{const x=n.join(".");p(C=>{const B=new Set(C);if(B.has(x)){B.delete(x)}else{B.add(x)}return B})};let g=0;const z=(n,x=0)=>{if(!I&&n.type==="unchanged"){return null}g++;const C=g;const B=x*20;const j=f||h.has(n.path.join("."));const A=n.children&&n.children.length>0;const W=()=>{switch(n.type){case"added":return{backgroundColor:r.addedBg};case"removed":return{backgroundColor:r.removedBg};case"changed":return{backgroundColor:r.changedBg};default:return{backgroundColor:"transparent"}}};const P=()=>{switch(n.type){case"added":return"+";case"removed":return"\u2212";case"changed":return"\u2248";default:return" "}};const N=()=>{switch(n.type){case"added":return{backgroundColor:l.diff.markerAddedBackground,color:l.diff.addedText};case"removed":return{backgroundColor:l.diff.markerRemovedBackground,color:l.diff.removedText};case"changed":return{backgroundColor:l.diff.markerModifiedBackground,color:l.diff.modifiedText};default:return{backgroundColor:"transparent",color:l.diff.markerText}}};return T(b,{children:[T(G,{activeOpacity:A?.7:1,onPress:A?()=>u(n.path):void 0,style:[t.row,W()],children:[o(b,{style:t.lineNumber,children:o(a,{style:[t.lineNumberText,{color:l.diff.lineNumberText}],children:String(C).padStart(2," ")})}),o(b,{style:[t.marker,N()],children:o(a,{style:[t.markerText,{color:N().color}],children:P()})}),T(b,{style:[t.content,{paddingLeft:B}],children:[A&&o(b,{style:t.expandIconContainer,children:o(a,{style:[t.expandIcon,{color:r.expandIcon}],children:j?"\u2212":"+"})}),o(a,{style:[t.key,{color:r.keyText}],children:n.key}),o(a,{style:[t.colon,{color:r.expandIcon}],children:":"}),n.type==="changed"&&!A&&T(H,{children:[o(a,{style:[t.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:w(n.oldValue)}),o(a,{style:[t.arrow,{color:r.arrowText,paddingHorizontal:4}],children:" => "}),o(a,{style:[t.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:w(n.newValue)})]}),n.type==="added"&&!A&&o(a,{style:[t.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:w(n.newValue)}),n.type==="removed"&&!A&&o(a,{style:[t.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:w(n.oldValue)}),n.type==="unchanged"&&!A&&o(a,{style:[t.value,{color:r.text}],children:w(n.oldValue)}),A&&!j&&T(H,{children:[n.type==="changed"&&T(H,{children:[o(a,{style:[t.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:w(n.oldValue,true)}),o(a,{style:[t.arrow,{color:r.arrowText,paddingHorizontal:4}],children:" => "}),o(a,{style:[t.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:w(n.newValue,true)})]}),n.type==="added"&&o(a,{style:[t.value,{color:r.addedText,backgroundColor:r.addedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3}],children:w(n.newValue,true)}),n.type==="removed"&&o(a,{style:[t.value,{color:r.removedText,backgroundColor:r.removedWordBg,paddingHorizontal:3,paddingVertical:2,borderRadius:3,textDecorationLine:"line-through",textDecorationColor:r.removedText}],children:w(n.oldValue,true)})]})]})]}),A&&j&&o(b,{children:n.children.map(K=>z(K,x+1))})]},n.path.join("."))};const O=n=>{let x=0,C=0,B=0;const j=A=>{for(const W of A){if(W.type==="added")x++;else if(W.type==="removed")C++;else if(W.type==="changed")B++;if(W.children){j(W.children)}}};j(n);return{added:x,removed:C,changed:B}};const v=V(()=>O(s),[s]);const E=v.added>0||v.removed>0||v.changed>0;const M=F?U:b;return T(b,{style:[F?t.container:t.containerInline,{backgroundColor:r.background}],children:[E&&o(b,{style:[t.header,{backgroundColor:r.background}],children:T(b,{style:t.summaryContainer,children:[v.added>0&&T(b,{style:[t.summaryItem,t.summaryAdded],children:[o(a,{style:[t.summaryIcon,{color:r.addedText}],children:"+"}),o(a,{style:[t.summaryCount,{color:r.addedText}],children:v.added}),o(a,{style:[t.summaryLabel,{color:r.addedText}],children:"new"})]}),v.removed>0&&T(b,{style:[t.summaryItem,t.summaryRemoved],children:[o(a,{style:[t.summaryIcon,{color:r.removedText}],children:"\u2212"}),o(a,{style:[t.summaryCount,{color:r.removedText}],children:v.removed}),o(a,{style:[t.summaryLabel,{color:r.removedText}],children:"gone"})]}),v.changed>0&&T(b,{style:[t.summaryItem,t.summaryChanged],children:[o(a,{style:[t.summaryIcon,{color:r.changedText}],children:"\u2248"}),o(a,{style:[t.summaryCount,{color:r.changedText}],children:v.changed}),o(a,{style:[t.summaryLabel,{color:r.changedText}],children:"modified"})]})]})}),o(M,{style:F?t.scrollView:void 0,showsVerticalScrollIndicator:false,children:s.length===0?T(b,{style:t.emptyState,children:[o(a,{style:[t.emptyIcon,{color:r.text}],children:"\u2261"}),o(a,{style:[t.emptyTitle,{color:r.text}],children:"No changes detected"}),o(a,{style:[t.emptySubtitle,{color:r.expandIcon}],children:"The data is identical"})]}):o(b,{children:(()=>{g=0;return s.map(n=>z(n,0))})()})})]})}const t=$.create({container:{flex:1,borderRadius:8,overflow:"hidden"},containerInline:{borderRadius:8,overflow:"hidden"},header:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:l.diff.lineNumberBorder},summaryContainer:{flexDirection:"row",gap:16,alignItems:"center"},summaryItem:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:12},summaryAdded:{backgroundColor:l.diff.addedBackground},summaryRemoved:{backgroundColor:l.diff.removedBackground},summaryChanged:{backgroundColor:l.diff.modifiedBackground},summaryIcon:{fontSize:14,fontWeight:"700",fontFamily:k},summaryCount:{fontSize:13,fontWeight:"600",fontFamily:k},summaryLabel:{fontSize:11,fontFamily:k,opacity:.9},scrollView:{flex:1},row:{minHeight:26,justifyContent:"center",flexDirection:"row",borderBottomWidth:$.hairlineWidth,borderBottomColor:"rgba(128, 128, 128, 0.04)"},lineNumber:{width:32,paddingHorizontal:6,paddingVertical:4,backgroundColor:l.diff.lineNumberBackground,justifyContent:"center",borderRightWidth:1,borderRightColor:l.diff.lineNumberBorder},lineNumberText:{fontSize:11,fontFamily:k,textAlign:"right"},marker:{width:20,paddingHorizontal:2,paddingVertical:4,justifyContent:"center",alignItems:"center"},markerText:{fontSize:12,fontFamily:k,fontWeight:"600"},content:{flex:1,flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:4},expandIconContainer:{width:16,height:16,borderRadius:3,backgroundColor:l.diff.lineNumberBorder,alignItems:"center",justifyContent:"center",marginRight:6},expandIcon:{fontSize:11,fontFamily:k,fontWeight:"600"},colon:{fontSize:12,fontFamily:k,marginHorizontal:4},key:{fontSize:11,fontFamily:k,fontWeight:"500",opacity:.9},value:{fontSize:11,fontFamily:k,maxWidth:"80%"},arrow:{fontSize:12,fontFamily:k,fontWeight:"600"},badge:{fontSize:11,fontFamily:k,fontWeight:"600",marginLeft:8},emptyState:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:60},emptyIcon:{fontSize:48,fontFamily:k,opacity:.2,marginBottom:12},emptyTitle:{fontSize:14,fontFamily:k,fontWeight:"600",marginBottom:4},emptySubtitle:{fontSize:12,fontFamily:k,opacity:.6}});