@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -1,1270 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VirtualizedDataExplorer = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _displayValue = require("../utils/displayValue.js");
-var _index = require("../ui/gameUI/index.js");
-var _nightTheme = require("../ui/night/nightTheme.js");
-var _CopyButton = require("../ui/components/CopyButton.js");
-var _index2 = require("../icons/index.js");
-var _IndentGuidesOverlay = require("./IndentGuidesOverlay.js");
-var _fonts = require("../ui/fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-// Stable constants to prevent re-renders [[memory:4875251]]
-const HIT_SLOP_10 = {
-  top: 10,
-  bottom: 10,
-  left: 10,
-  right: 10
-};
-const ITEM_HEIGHT = 24; // Fixed height per row for crisp guides
-const LONG_ITEM_HEIGHT = 24; // Keep uniform height to match VS Code tree
-const CHUNK_SIZE = 50; // Process data in chunks to avoid blocking UI
-const MAX_DEPTH_LIMIT = 15; // Prevent excessive nesting
-const MAX_ITEMS_PER_LEVEL = 500; // Limit items to prevent memory issues
-const LONG_KEY_THRESHOLD = 30; // Keys longer than this use vertical layout
-/** Two presses inside this window count as a double-tap (RN has no dblclick). */
-const DOUBLE_TAP_MS = 300;
-
-// Pre-computed indent styles (VS Code-style width)
-const INDENT_WIDTH = 16;
-const INDENT_STYLES = Array.from({
-  length: MAX_DEPTH_LIMIT + 1
-}, (_, depth) => _reactNative.StyleSheet.create({
-  container: {
-    marginLeft: depth * INDENT_WIDTH
-  }
-}).container);
-
-// Enhanced type color cache using centralized theme colors [[memory:4875251]]
-const TYPE_COLOR_CACHE = new Map([["string", _index.gameUIColors.dataTypes.string], ["number", _index.gameUIColors.dataTypes.number], ["bigint", _index.gameUIColors.optional],
-// Purple for bigint (distinct from number)
-["boolean", _index.gameUIColors.dataTypes.boolean], ["null", _index.gameUIColors.dataTypes.null], ["undefined", _index.gameUIColors.dataTypes.undefined], ["function", _index.gameUIColors.dataTypes.function], ["symbol", _index.gameUIColors.critical],
-// Pink for symbols (distinct from function)
-["date", _index.gameUIColors.critical],
-// Pink for dates
-["error", _index.gameUIColors.error],
-// Red for errors
-["array", _index.gameUIColors.dataTypes.array], ["object", _index.gameUIColors.dataTypes.object], ["map", _index.gameUIColors.info],
-// Cyan for maps (distinct from object/array)
-["set", _index.gameUIColors.success],
-// Green for sets (distinct from map/array/object)
-["circular", _index.gameUIColors.warning] // Yellow for circular references
-]);
-
-// Pre-computed stable styles with React Query-inspired design
-const STABLE_STYLES = _reactNative.StyleSheet.create({
-  container: {
-    // Night inset panel: darker than the card it sits in, hairline border —
-    // the old white-wash fill (primary+"08") read as a grey slab on the
-    // night surfaces. Global on purpose: every tool is moving to night.
-    backgroundColor: _nightTheme.night.color.bg,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border
-  },
-  header: {
-    flexDirection: "column",
-    paddingHorizontal: 16,
-    // Increased padding like dev tools
-    paddingVertical: 12
-  },
-  headerRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 6
-  },
-  title: {
-    color: _index.gameUIColors.primary,
-    // text-white
-    fontSize: 14,
-    fontWeight: "500" // font-medium
-  },
-  description: {
-    color: _index.gameUIColors.secondary,
-    // text-gray-400
-    fontSize: 12,
-    marginTop: 2
-  },
-  typeLegend: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    marginTop: 8,
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: _index.gameUIColors.primary + "14" // border-white/[0.08]
-  },
-  typeBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    borderWidth: 1
-  },
-  typeColor: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 4
-  },
-  typeName: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: _index.gameUIColors.secondary // text-gray-400
-  },
-  itemContainer: {
-    minHeight: ITEM_HEIGHT,
-    backgroundColor: "transparent",
-    position: "relative",
-    flexDirection: "row",
-    alignItems: "flex-start" // Align items to top for better alignment with expand arrows
-  },
-  itemTouchable: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "flex-start",
-    // Changed from center to align expand arrow with first line of text
-    paddingLeft: 0,
-    // Remove padding to align with tree lines
-    paddingRight: 16,
-    paddingVertical: 2,
-    // Further reduced for even tighter spacing
-    minHeight: 24 // Match ITEM_HEIGHT for consistency
-  },
-  itemTouchablePressed: {
-    backgroundColor: _index.gameUIColors.primary + "0A" // slightly more visible on press
-  },
-  itemSelected: {
-    backgroundColor: _index.gameUIColors.primary + "14" // selected row highlight (subtle)
-  },
-  expanderContainer: {
-    width: 16,
-    // Reduced to minimize space
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 4 // Align with text baseline
-  },
-  expanderIcon: {
-    width: 12,
-    height: 12
-  },
-  labelContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "flex-start",
-    paddingLeft: 2
-  },
-  labelContainerVertical: {
-    flex: 1,
-    flexDirection: "column",
-    paddingLeft: 2,
-    // Reduced padding for tighter alignment
-    paddingVertical: 2
-  },
-  labelContainerVerticalRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 2
-  },
-  labelText: {
-    color: _index.gameUIColors.primary,
-    // text-white
-    fontSize: 12,
-    fontWeight: "500",
-    // font-medium
-    fontFamily: _fonts.monoFont,
-    marginRight: 8,
-    flexShrink: 1
-  },
-  labelTextTruncated: {
-    color: _index.gameUIColors.primary,
-    // text-white
-    fontSize: 12,
-    fontWeight: "500",
-    // font-medium
-    fontFamily: _fonts.monoFont,
-    flexShrink: 1
-  },
-  valueText: {
-    fontSize: 12,
-    fontFamily: _fonts.monoFont,
-    flex: 1,
-    color: _index.gameUIColors.primaryLight // text-gray-300
-  },
-  loadingContainer: {
-    padding: 16,
-    alignItems: "center"
-  },
-  loadingText: {
-    color: _index.gameUIColors.secondary,
-    // text-gray-400
-    fontSize: 12
-  },
-  noDataContainer: {
-    padding: 16,
-    alignItems: "center"
-  },
-  noDataText: {
-    color: _index.gameUIColors.secondary,
-    // text-gray-400
-    fontSize: 12
-  },
-  listContent: {
-    paddingBottom: 8
-  },
-  headerTouchable: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  expanderMargin: {
-    marginLeft: 8
-  }
-});
-
-/**
- * A tree row as the HOST sees it.
- *
- * `item.path` is addressed for the TREE, which is seeded with a synthetic
- * "root" node wrapping the caller's data — so the top row is `["root"]` and its
- * first child `["root", "0"]`. Ops address the DATA, where those are `[]` and
- * `["0"]`. Dropping the first segment is what reconciles the two, and doing it
- * in ONE place is what keeps selection, inline editing and ops all agreeing.
- */
-function selectionOf(item) {
-  return {
-    path: item.path.slice(1),
-    value: item.value,
-    label: item.key
-  };
-}
-
-// Type definitions for flattened data structure
-
-/**
- * Node count, capped at `limit`.
- *
- * Deliberately short-circuits: this runs on every render to decide which
- * flattening path to take, so it must cost O(limit), never O(document).
- */
-function countNodesUpTo(value, limit, seen = 0) {
-  if (seen >= limit) return seen;
-  let n = seen + 1;
-  if (Array.isArray(value)) {
-    for (const child of value) {
-      if (n >= limit) return n;
-      n = countNodesUpTo(child, limit, n);
-    }
-  } else if (value !== null && typeof value === "object") {
-    for (const child of Object.values(value)) {
-      if (n >= limit) return n;
-      n = countNodesUpTo(child, limit, n);
-    }
-  }
-  return n;
-}
-
-// Enhanced type detection optimized for performance
-const getValueType = value => {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  if (value instanceof Date) return "date";
-  if (value instanceof Error) return "error";
-  if (value instanceof Map) return "map";
-  if (value instanceof Set) return "set";
-  if (value instanceof RegExp) return "regexp";
-  if (typeof value === "function") return "function";
-  if (typeof value === "symbol") return "symbol";
-  if (typeof value === "bigint") return "bigint";
-  if (typeof value === "object") return "object";
-  return typeof value;
-};
-
-// Get value count for collections
-const getValueCount = (value, valueType) => {
-  if (value === null) return 0;
-  switch (valueType) {
-    case "array":
-      return Array.isArray(value) ? value.length : 0;
-    case "object":
-      return typeof value === "object" && !(value instanceof Date) && !(value instanceof Error) && !(value instanceof RegExp) && !(value instanceof Map) && !(value instanceof Set) ? Object.keys(value).length : 0;
-    case "map":
-      return value instanceof Map ? value.size : 0;
-    case "set":
-      return value instanceof Set ? value.size : 0;
-    default:
-      return 0;
-  }
-};
-
-// Format value for display
-const formatValue = (value, valueType) => {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  switch (valueType) {
-    case "string":
-      return `"${String(value)}"`;
-    case "boolean":
-      return value === true ? "true" : "false";
-    case "function":
-      return typeof value === "function" ? value.toString().slice(0, 50) + "..." : "undefined";
-    case "symbol":
-      return typeof value === "symbol" ? String(value) : "undefined";
-    case "date":
-      return value instanceof Date ? value.toISOString() : "undefined";
-    case "regexp":
-      return value instanceof RegExp ? value.toString() : "undefined";
-    case "bigint":
-      return typeof value === "bigint" ? value.toString() + "n" : "undefined";
-    case "error":
-      return value instanceof Error ? `${value.name}: ${value.message}` : "undefined";
-    default:
-      return (0, _displayValue.displayValue)(value);
-  }
-};
-
-// Optimized type color lookup using cache [[memory:4875251]]
-const getTypeColor = valueType => {
-  return TYPE_COLOR_CACHE.get(valueType) || _index.gameUIColors.dataTypes.array;
-};
-
-// Memoized components for performance
-const ExpanderComponent = ({
-  expanded,
-  onPress
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools data explorer expander",
-    style: STABLE_STYLES.expanderContainer,
-    onPress: onPress,
-    hitSlop: HIT_SLOP_10,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: STABLE_STYLES.expanderIcon,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ChevronRight, {
-        size: 12,
-        color: _index.gameUIColors.secondary,
-        strokeWidth: 2,
-        style: {
-          transform: [{
-            rotate: expanded ? "90deg" : "0deg"
-          }]
-        }
-      })
-    })
-  });
-};
-ExpanderComponent.displayName = "Expander";
-const Expander = /*#__PURE__*/(0, _react.memo)(ExpanderComponent);
-
-// Type legend component to replace inline type indicators
-const TypeLegendComponent = ({
-  visibleTypes
-}) => {
-  const uniqueTypes = Array.from(new Set(visibleTypes)).slice(0, 8); // Limit to 8 most common types
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: STABLE_STYLES.typeLegend,
-    children: uniqueTypes.map(type => {
-      const color = getTypeColor(type);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [STABLE_STYLES.typeBadge, {
-          backgroundColor: `${color}10`,
-          borderColor: `${color}30`
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [STABLE_STYLES.typeColor, {
-            backgroundColor: color
-          }]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: STABLE_STYLES.typeName,
-          children: type
-        })]
-      }, type);
-    })
-  });
-};
-TypeLegendComponent.displayName = "TypeLegend";
-const TypeLegend = /*#__PURE__*/(0, _react.memo)(TypeLegendComponent);
-
-// Optimized data flattening with chunked processing to prevent UI blocking [[memory:4875251]]
-const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) => {
-  const [flatData, setFlatData] = (0, _react.useState)([]);
-  const flatDataMapRef = (0, _react.useRef)(new Map());
-
-  // Initialize with root expanded and optionally first level
-  const getInitialExpanded = (0, _react.useCallback)(() => {
-    const initial = new Set(["root"]);
-    if (autoExpandFirstLevel && data && typeof data === "object") {
-      if (Array.isArray(data)) {
-        data.forEach((_, index) => {
-          initial.add(`root.${index}`);
-        });
-      } else {
-        Object.keys(data).forEach(key => {
-          initial.add(`root.${key}`);
-        });
-      }
-    }
-    return initial;
-  }, [autoExpandFirstLevel, data]);
-  const [expandedItems, setExpandedItems] = (0, _react.useState)(() => getInitialExpanded());
-  const [isProcessing, setIsProcessing] = (0, _react.useState)(false);
-
-  // Debug logging - commented out for less noise
-  // Store circular cache outside of re-renders to prevent reset
-  const circularCacheRef = (0, _react.useRef)(new WeakSet());
-  const processingRef = (0, _react.useRef)(false);
-  /**
-   * Monotonic token identifying the newest flatten run.
-   *
-   * WHY: a cancelled run used to `return` without clearing `isProcessing`, so
-   * whenever renders arrived faster than the 10ms debounce + flatten, every run
-   * was superseded before it finished and the spinner never came down — the
-   * viewer sat on "Processing data…" forever. Now each run checks it is still
-   * the current one, and the run that ends up last ALWAYS resolves the flag.
-   */
-  const runIdRef = (0, _react.useRef)(0);
-  const dataVersionRef = (0, _react.useRef)(0);
-  const lastActionRef = (0, _react.useRef)(undefined);
-
-  // Stable flattenData function that doesn't depend on expandedItems
-  const flattenDataStable = (0, _react.useCallback)((value, expandedSet, circularCache, key = "root", depth = 0, parentId, path = [], siblingIndex = 0, totalSiblings = 1, parentHasMoreSiblings = []) => {
-    // Early termination for performance [[memory:4875251]]
-    if (depth > Math.min(maxDepth, MAX_DEPTH_LIMIT)) return [];
-    const currentPath = [...path, key];
-    const id = currentPath.join(".");
-    const valueType = getValueType(value);
-    const isExpandable = ["object", "array", "map", "set"].includes(valueType) && value !== null;
-    const rawChildCount = isExpandable ? getValueCount(value, valueType) : 0;
-    // Limit child count to prevent performance issues [[memory:4875251]]
-    const childCount = Math.min(rawChildCount, MAX_ITEMS_PER_LEVEL);
-
-    // Check for circular references
-    if (value && typeof value === "object") {
-      if (circularCache.has(value)) {
-        return [{
-          id,
-          key,
-          value: "[Circular Reference]",
-          valueType: "circular",
-          depth,
-          isExpandable: false,
-          isExpanded: false,
-          parentId,
-          hasChildren: false,
-          childCount: 0,
-          path: currentPath,
-          type: "circular",
-          isLastChild: siblingIndex === totalSiblings - 1,
-          parentHasMoreSiblings: [...parentHasMoreSiblings],
-          siblingIndex,
-          totalSiblings
-        }];
-      }
-      circularCache.add(value);
-    }
-    const currentItem = {
-      id,
-      key,
-      value,
-      valueType,
-      depth,
-      isExpandable,
-      isExpanded: expandedSet.has(id),
-      parentId,
-      hasChildren: childCount > 0,
-      childCount,
-      path: currentPath,
-      type: isExpandable ? "expandable" : valueType,
-      isLastChild: siblingIndex === totalSiblings - 1,
-      parentHasMoreSiblings: [...parentHasMoreSiblings],
-      siblingIndex,
-      totalSiblings
-    };
-    const result = [currentItem];
-
-    // Only add children if expanded and not too deep [[memory:4875251]]
-    if (isExpandable && expandedSet.has(id) && depth < Math.min(maxDepth, MAX_DEPTH_LIMIT)) {
-      try {
-        let entries = [];
-        switch (valueType) {
-          case "array":
-            entries = Array.isArray(value) ? value.map((item, index) => [index.toString(), item]) : [];
-            break;
-          case "object":
-            entries = typeof value === "object" && value !== null && !(value instanceof Date) && !(value instanceof Error) && !(value instanceof RegExp) && !(value instanceof Map) && !(value instanceof Set) ? Object.entries(value) : [];
-            break;
-          case "map":
-            entries = value instanceof Map ? Array.from(value.entries()).map(([k, v]) => [String(k), v]) : [];
-            break;
-          case "set":
-            entries = value instanceof Set ? Array.from(value.values()).map((v, index) => [index.toString(), v]) : [];
-            break;
-        }
-
-        // Aggressively limit children for performance [[memory:4875251]]
-        const limitedEntries = entries.slice(0, childCount);
-        const totalChildCount = limitedEntries.length;
-
-        // Update parent's sibling tracking for children
-        const newParentHasMoreSiblings = [...parentHasMoreSiblings];
-        if (depth > 0) {
-          // Current item has more siblings if it's not the last child
-          newParentHasMoreSiblings[depth - 1] = !currentItem.isLastChild;
-        }
-
-        // Process children in smaller batches to avoid blocking
-        for (let i = 0; i < limitedEntries.length; i += CHUNK_SIZE) {
-          const chunk = limitedEntries.slice(i, i + CHUNK_SIZE);
-          let chunkIndex = i;
-          for (const [childKey, childValue] of chunk) {
-            result.push(...flattenDataStable(childValue, expandedSet, circularCache, childKey, depth + 1, id, currentPath, chunkIndex, totalChildCount, newParentHasMoreSiblings));
-            chunkIndex++;
-          }
-
-          // Yield to main thread periodically for large datasets
-          if (i > 0 && i % (CHUNK_SIZE * 2) === 0) {
-            break; // Let InteractionManager handle the rest
-          }
-        }
-      } catch (error) {
-        console.error(error);
-        // Skip malformed data
-      }
-    }
-    return result;
-  }, [maxDepth] // Only depend on maxDepth, not expandedItems
-  );
-
-  // Only process full data when data changes (not on expand/collapse)
-  (0, _react.useEffect)(() => {
-    // Skip if this was just an expand/collapse action
-    if (lastActionRef.current && (lastActionRef.current.type === "expand" || lastActionRef.current.type === "collapse")) {
-      // Make sure processing flag is cleared for incremental updates
-      if (isProcessing) {
-        setIsProcessing(false);
-        processingRef.current = false;
-      }
-      lastActionRef.current = undefined;
-      return;
-    }
-
-    // Prevent concurrent processing
-    if (processingRef.current) {
-      return;
-    }
-    let timeoutId;
-    const runId = ++runIdRef.current;
-    /** True while this run is still the newest one scheduled. */
-    const isCurrent = () => runIdRef.current === runId;
-    processingRef.current = true;
-    setIsProcessing(true);
-    const processData = async () => {
-      // Failsafe timeout to prevent stuck processing
-      timeoutId = setTimeout(() => {
-        if (processingRef.current && isCurrent()) {
-          setIsProcessing(false);
-          processingRef.current = false;
-        }
-      }, 5000);
-      // Small delay to debounce rapid changes
-      // Small delay to batch rapid changes
-      await new Promise(resolve => setTimeout(() => resolve(), 10));
-
-      // Superseded by a newer run — that run now owns `isProcessing`, so leave
-      // the flag alone and let it resolve.
-      if (!isCurrent()) {
-        return;
-      }
-      try {
-        // Initialize circular cache for new data
-        circularCacheRef.current = new WeakSet();
-        dataVersionRef.current = Date.now();
-        const newFlatData = flattenDataStable(data, expandedItems, circularCacheRef.current, "root", 0, undefined, [], 0, 1, []);
-
-        // Build the map for incremental updates
-        const newMap = new Map();
-        newFlatData.forEach((item, index) => {
-          newMap.set(item.id, {
-            item,
-            index
-          });
-        });
-        flatDataMapRef.current = newMap;
-        if (timeoutId) clearTimeout(timeoutId);
-        if (isCurrent()) {
-          setFlatData(newFlatData);
-          setIsProcessing(false);
-          processingRef.current = false;
-        }
-      } catch (error) {
-        console.error(error);
-        // Reset to empty data on error
-        if (timeoutId) clearTimeout(timeoutId);
-        if (isCurrent()) {
-          setFlatData([]);
-          flatDataMapRef.current = new Map();
-          setIsProcessing(false);
-          processingRef.current = false;
-        }
-      }
-    };
-    processData();
-    return () => {
-      processingRef.current = false;
-      if (timeoutId) clearTimeout(timeoutId);
-    };
-  }, [data, expandedItems, flattenDataStable, maxDepth]);
-
-  // Incremental update function for expand/collapse
-  const updateFlatDataIncremental = (0, _react.useCallback)((itemId, isExpanding) => {
-    // Clear processing flag since we're doing incremental update
-    setIsProcessing(false);
-    processingRef.current = false;
-    setFlatData(prevFlatData => {
-      const itemEntry = flatDataMapRef.current.get(itemId);
-      if (!itemEntry) {
-        return prevFlatData;
-      }
-      const {
-        item,
-        index
-      } = itemEntry;
-      if (isExpanding && item.isExpandable && item.hasChildren) {
-        // Expand: insert children after the item
-        const newItems = [...prevFlatData];
-
-        // Create a new circular cache for this subtree
-        const subCircularCache = new WeakSet();
-        if (item.value && typeof item.value === "object") {
-          subCircularCache.add(item.value);
-        }
-
-        // We need to get the actual children, not re-process the parent
-        // So we process each child entry individually
-        const childrenItems = [];
-        try {
-          let entries = [];
-          const valueType = item.valueType;
-          switch (valueType) {
-            case "array":
-              entries = Array.isArray(item.value) ? item.value.map((childValue, index) => [index.toString(), childValue]) : [];
-              break;
-            case "object":
-              entries = typeof item.value === "object" && item.value !== null && !(item.value instanceof Date) && !(item.value instanceof Error) && !(item.value instanceof RegExp) && !(item.value instanceof Map) && !(item.value instanceof Set) ? Object.entries(item.value) : [];
-              break;
-            case "map":
-              entries = item.value instanceof Map ? Array.from(item.value.entries()).map(([k, v]) => [String(k), v]) : [];
-              break;
-            case "set":
-              entries = item.value instanceof Set ? Array.from(item.value.values()).map((v, index) => [index.toString(), v]) : [];
-              break;
-          }
-
-          // Process each child with sibling tracking
-          const totalEntries = entries.length;
-          const parentHasMoreSiblings = item.parentHasMoreSiblings || [];
-          const newParentHasMoreSiblings = [...parentHasMoreSiblings];
-          if (item.depth > 0) {
-            newParentHasMoreSiblings[item.depth - 1] = !item.isLastChild;
-          }
-          entries.forEach(([childKey, childValue], index) => {
-            const childItems = flattenDataStable(childValue, new Set(),
-            // Children start collapsed
-            subCircularCache, childKey, item.depth + 1, itemId, item.path, index, totalEntries, newParentHasMoreSiblings);
-            childrenItems.push(...childItems);
-          });
-        } catch (error) {
-          console.error(error);
-        }
-        const childrenToInsert = childrenItems;
-        if (childrenToInsert.length > 0) {
-          // Children are ready to insert
-        }
-
-        // Update the parent item to show it's expanded
-        newItems[index] = {
-          ...item,
-          isExpanded: true
-        };
-
-        // Insert children after the parent
-        newItems.splice(index + 1, 0, ...childrenToInsert);
-
-        // Rebuild the map
-        const newMap = new Map();
-        newItems.forEach((item, index) => {
-          newMap.set(item.id, {
-            item,
-            index
-          });
-        });
-        flatDataMapRef.current = newMap;
-        return newItems;
-      } else if (!isExpanding) {
-        // Collapse: remove all descendants
-        const itemsToRemove = new Set();
-        const findDescendants = (parentId, depth) => {
-          prevFlatData.forEach(child => {
-            if (child.parentId === parentId || child.id.startsWith(parentId + ".") && child.depth > depth) {
-              itemsToRemove.add(child.id);
-              if (child.hasChildren) {
-                findDescendants(child.id, child.depth);
-              }
-            }
-          });
-        };
-        findDescendants(itemId, item.depth);
-
-        // Filter out descendants and update the parent
-        const newItems = prevFlatData.map(it => {
-          if (it.id === itemId) {
-            return {
-              ...it,
-              isExpanded: false
-            };
-          }
-          return it;
-        }).filter(it => !itemsToRemove.has(it.id));
-
-        // Rebuild the map
-        const newMap = new Map();
-        newItems.forEach((item, index) => {
-          newMap.set(item.id, {
-            item,
-            index
-          });
-        });
-        flatDataMapRef.current = newMap;
-        return newItems;
-      }
-      return prevFlatData;
-    });
-  }, [flattenDataStable]);
-  const toggleExpanded = (0, _react.useCallback)(itemId => {
-    setExpandedItems(prev => {
-      const newSet = new Set(prev);
-      const isExpanding = !newSet.has(itemId);
-      if (isExpanding) {
-        newSet.add(itemId);
-      } else {
-        newSet.delete(itemId);
-      }
-
-      // Store the action for the effect to use
-      lastActionRef.current = {
-        type: isExpanding ? "expand" : "collapse",
-        itemId
-      };
-
-      // Perform incremental update
-      updateFlatDataIncremental(itemId, isExpanding);
-      return newSet;
-    });
-  }, [updateFlatDataIncremental]);
-
-  /**
-   * Small documents flatten SYNCHRONOUSLY, during render.
-   *
-   * The chunked effect above exists so a 500-node payload can't block a frame,
-   * and it pays for that with an async, multi-commit rebuild every time `data`
-   * changes identity. Editing is immutable, so that's every single op — which
-   * made a three-item array rebuild itself in stages on every tap, visibly, for
-   * machinery it never needed. Below the chunk threshold the entire flatten is
-   * cheaper than one of those commits, so derive it inline and let React
-   * reconcile the rows normally. The chunked path is untouched above that size.
-   */
-  const isSmallDocument = countNodesUpTo(data, CHUNK_SIZE, 0) < CHUNK_SIZE;
-  const syncFlatData = (0, _react.useMemo)(() => {
-    if (!isSmallDocument) return null;
-    return flattenDataStable(data, expandedItems, new WeakSet(), "root", 0, undefined, [], 0, 1, []);
-  }, [isSmallDocument, data, expandedItems, flattenDataStable]);
-
-  /**
-   * Expand a set of ancestor ids so a node deeper in the tree becomes visible.
-   *
-   * Needed because a host can relocate the selection to a node the user never
-   * expanded their way to — append into a collapsed array and the new entry is
-   * selected but off-tree, which reads as "nothing happened". Unlike
-   * `toggleExpanded` this doesn't patch `flatData` incrementally; the full
-   * flatten effect already re-runs on `expandedItems`, and a reveal is rare
-   * enough that the extra pass isn't worth a second incremental code path.
-   */
-  const revealPath = (0, _react.useCallback)(ancestorIds => {
-    if (ancestorIds.length === 0) return;
-    setExpandedItems(prev => {
-      if (ancestorIds.every(id => prev.has(id))) return prev;
-      const next = new Set(prev);
-      for (const id of ancestorIds) next.add(id);
-      return next;
-    });
-  }, []);
-  return {
-    flatData: syncFlatData ?? flatData,
-    // A synchronous list is never "processing" — the spinner would flash on
-    // every keystroke otherwise.
-    isProcessing: syncFlatData ? false : isProcessing,
-    toggleExpanded,
-    revealPath
-  };
-};
-
-// Optimized virtualized item renderer with full-row clickability [[memory:4875251]]
-const VirtualizedItemComponent = ({
-  item,
-  onToggleExpanded,
-  index,
-  onSelect,
-  isSelected,
-  selectable,
-  onRequestInlineEdit,
-  isInlineEditing,
-  inlineEditor,
-  testIDPrefix
-}) => {
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  const [showFullKey, setShowFullKey] = (0, _react.useState)(false);
-  const canEdit = selectable === true;
-  const lastPressRef = (0, _react.useRef)(0);
-
-  /**
-   * `item.path` is addressed for the TREE, which is seeded with a synthetic
-   * "root" node wrapping the caller's data — so the top row is `["root"]` and
-   * its first child `["root", "0"]`. Ops address the DATA, where those are `[]`
-   * and `["0"]`. Dropping the first segment is what reconciles the two.
-   *
-   * Worth stating plainly because getting it wrong fails silently: `applyJsonOp`
-   * treats an unresolvable path as a no-op, so every button would simply have
-   * done nothing rather than erroring.
-   */
-  const dataPath = item.path.slice(1);
-
-  // Use pre-computed styles to avoid inline calculations [[memory:4875251]]
-  const indentStyle = INDENT_STYLES[Math.min(item.depth, MAX_DEPTH_LIMIT)] || INDENT_STYLES[0];
-  const color = getTypeColor(item.valueType);
-
-  // Uniform row layout: single-line like VS Code tree
-  const isLongKey = false;
-
-  // Use inline handler since component is already memoized [[memory:4875251]]
-
-  /**
-   * Row body. In editable mode this SELECTS only — pressing a container to see
-   * its actions would otherwise collapse the very subtree you're editing, and
-   * the expander already exists to do the toggling (the same split every tree
-   * view makes). Read-only mode keeps the original toggle-on-row-press.
-   */
-  const handlePress = () => {
-    if (canEdit) {
-      // Double-tap opens the inline editor, matching the mockup's
-      // double-click. Detected by hand because RN has no dblclick: two presses
-      // inside DOUBLE_TAP_MS on an already-selected scalar row.
-      const now = Date.now();
-      const isDouble = now - lastPressRef.current < DOUBLE_TAP_MS;
-      lastPressRef.current = now;
-      if (isDouble && !item.isExpandable && onRequestInlineEdit) {
-        onRequestInlineEdit(item);
-        return;
-      }
-      onSelect(item);
-      return;
-    }
-    if (item.isExpandable) {
-      onToggleExpanded(item.id);
-    }
-    onSelect(item);
-  };
-
-  /** The chevron always toggles, in both modes. */
-  const handleExpanderPress = () => {
-    if (item.isExpandable) {
-      onToggleExpanded(item.id);
-    }
-    onSelect(item);
-  };
-  const handleKeyPress = () => {};
-
-  // Always show full key for better identification
-  const displayKey = item.key;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [STABLE_STYLES.itemContainer, indentStyle],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-      "sentry-label": "ignore devtools data explorer item"
-      // `item.id` is the dotted path from the root ("root.settings.theme"),
-      // so this handle addresses a NODE rather than a list position — stable
-      // across expand/collapse and across re-renders.
-      ,
-      testID: `${testIDPrefix}-${item.id}`,
-      accessibilityLabel: `${item.key}: ${item.valueType}`,
-      style: [STABLE_STYLES.itemTouchable, isPressed && STABLE_STYLES.itemTouchablePressed,
-      // The selected wash exists for the action-bar/edit flow. In a plain
-      // read-only viewer every expand/collapse tap ALSO selects, which
-      // left a permanent grey strip on the last-tapped row (the collapsed
-      // root, usually) — so the wash only paints when selection means
-      // something. selectedId still tracks either way: the indent-guide
-      // depth highlight uses it.
-      canEdit && isSelected && STABLE_STYLES.itemSelected, isLongKey && {
-        minHeight: LONG_ITEM_HEIGHT,
-        paddingVertical: 2
-      }],
-      onPress: handlePress,
-      onPressIn: () => setIsPressed(true),
-      onPressOut: () => setIsPressed(false),
-      activeOpacity: item.isExpandable || canEdit ? 0.7 : 1
-      // A leaf row has nothing to expand, so it was left unpressable. In
-      // editable mode the press IS the selection that reveals this row's
-      // actions, so scalars — the ones you most want to edit — have to be
-      // pressable too.
-      ,
-      disabled: !item.isExpandable && !canEdit,
-      children: [item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-        expanded: item.isExpanded,
-        onPress: handleExpanderPress
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: STABLE_STYLES.expanderContainer
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: STABLE_STYLES.labelContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: STABLE_STYLES.labelText,
-          numberOfLines: 1,
-          children: [item.key, ":"]
-        }), isInlineEditing && inlineEditor ? inlineEditor : item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [STABLE_STYLES.valueText, {
-            color: _index.gameUIColors.secondary
-          }],
-          numberOfLines: 1,
-          children: [item.valueType, " (", item.childCount, " ", item.childCount === 1 ? "item" : "items", ")"]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [STABLE_STYLES.valueText, {
-            color
-          }],
-          numberOfLines: 1,
-          children: formatValue(item.value, item.valueType)
-        })]
-      })]
-    }), item.value !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-      value: item.value,
-      size: 14,
-      buttonStyle: {
-        marginLeft: 8,
-        marginRight: 8
-      }
-    }) : null]
-  });
-};
-VirtualizedItemComponent.displayName = "VirtualizedItem";
-const VirtualizedItem = /*#__PURE__*/(0, _react.memo)(VirtualizedItemComponent);
-
-// Main virtualized data explorer component
-
-const VirtualizedDataExplorer = ({
-  title,
-  description,
-  data,
-  maxDepth = 10,
-  rawMode = false,
-  initialExpanded = false,
-  // disableCopy is accepted for API compatibility but CopyButton handles Pro gating internally
-  disableCopy: _disableCopy = false,
-  onSelectionChange,
-  onRequestInlineEdit,
-  inlineEditPath,
-  renderInlineEditor,
-  selectPath,
-  testIDPrefix = "buoy-tree-row"
-}) => {
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(rawMode); // Auto-expand in raw mode
-  const {
-    flatData,
-    isProcessing,
-    toggleExpanded,
-    revealPath
-  } = useDataFlattening(data, maxDepth, initialExpanded);
-
-  // Track visible range for overlay rendering
-  const listRef = (0, _react.useRef)(null);
-  const [visibleRange, setVisibleRange] = (0, _react.useState)({
-    start: 0,
-    end: Math.min(flatData.length - 1, Math.max(0, Math.ceil(400 / ITEM_HEIGHT) - 1))
-  });
-  const viewabilityConfigRef = (0, _react.useRef)({
-    itemVisiblePercentThreshold: 1
-  });
-  const onViewableItemsChanged = (0, _react.useRef)(({
-    viewableItems
-  }) => {
-    const idx = viewableItems.map(v => v.index).filter(n => typeof n === "number");
-    if (idx.length) {
-      setVisibleRange({
-        start: Math.min(...idx),
-        end: Math.max(...idx)
-      });
-    }
-  }).current;
-  (0, _react.useEffect)(() => {
-    // When data changes, reset the presumed visible window
-    setVisibleRange({
-      start: 0,
-      end: Math.min(flatData.length - 1, Math.max(0, Math.ceil(400 / ITEM_HEIGHT) - 1))
-    });
-  }, [flatData.length]);
-
-  // Calculate visible types for the legend with single pass deduplication
-  // Performance: Avoiding array.map() + Array.from(new Set()), using single loop for unique types
-  const visibleTypes = (0, _react.useMemo)(() => {
-    const typeSet = new Set();
-    for (const item of flatData) {
-      typeSet.add(item.valueType);
-      // Early exit if we have enough types for the legend (max 8 as per TypeLegend component)
-      if (typeSet.size >= 8) break;
-    }
-    return Array.from(typeSet);
-  }, [flatData]);
-
-  // Remove unnecessary useCallback - not passed to memoized components [[memory:4875251]]
-  const toggleMainExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  // Stable renderItem using module-scope function [[memory:4875251]]
-  /**
-   * Selection is tracked by the row's stable id (its path), NOT its index.
-   *
-   * An edit reshapes the list — removing item 1 slides everything up — so an
-   * index-based selection would silently start pointing at a different node
-   * and the action bar would operate on the wrong one. An id survives that, and
-   * resolves to nothing when the node it named is gone.
-   */
-  const [selectedId, setSelectedId] = (0, _react.useState)(null);
-  const selectedItem = (0, _react.useMemo)(() => selectedId == null ? undefined : flatData.find(it => it.id === selectedId), [flatData, selectedId]);
-  const activeDepth = selectedItem?.depth;
-
-  // Report the selection outward, re-emitting after each data change so the
-  // action bar is looking at the CURRENT value of the node it has selected.
-  (0, _react.useEffect)(() => {
-    if (!onSelectionChange) return;
-    onSelectionChange(selectedItem ? selectionOf(selectedItem) : null);
-  }, [selectedItem, onSelectionChange]);
-
-  /** Tapping the selected row again clears it, so the bar can be dismissed. */
-  const handleSelect = (0, _react.useCallback)(item => {
-    setSelectedId(prev => prev === item.id ? null : item.id);
-  }, []);
-
-  // Re-sync when the host relocates the selection. Keyed on the joined path so
-  // an unchanged array identity (a fresh render) doesn't clobber a user's tap.
-  const selectPathKey = selectPath === undefined ? undefined : selectPath === null ? "\u0000null" : selectPath.join(".");
-  const lastSelectPathKey = (0, _react.useRef)(selectPathKey);
-  (0, _react.useEffect)(() => {
-    if (selectPathKey === lastSelectPathKey.current) return;
-    lastSelectPathKey.current = selectPathKey;
-    if (selectPathKey === undefined) return;
-    if (selectPath == null) {
-      setSelectedId(null);
-      return;
-    }
-    // Reveal it first — a selection the user can't see reads as a no-op.
-    const ancestors = ["root"];
-    for (const segment of selectPath.slice(0, -1)) {
-      ancestors.push(`${ancestors[ancestors.length - 1]}.${segment}`);
-    }
-    revealPath(ancestors);
-    setSelectedId(["root", ...selectPath].join("."));
-  }, [selectPathKey, selectPath, revealPath]);
-  const handleRequestInlineEdit = (0, _react.useCallback)(item => {
-    setSelectedId(item.id);
-    onRequestInlineEdit?.(selectionOf(item));
-  }, [onRequestInlineEdit]);
-  const renderItem = ({
-    item,
-    index
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualizedItem, {
-    item: item,
-    index: index,
-    onToggleExpanded: toggleExpanded,
-    onSelect: handleSelect,
-    isSelected: selectedItem?.id === item.id,
-    selectable: onSelectionChange != null,
-    onRequestInlineEdit: handleRequestInlineEdit,
-    isInlineEditing: inlineEditPath != null && inlineEditPath.join(".") === item.path.slice(1).join("."),
-    inlineEditor: renderInlineEditor ? renderInlineEditor(selectionOf(item)) : null,
-    testIDPrefix: testIDPrefix
-  });
-
-  // Uniform row height for crisp guide geometry
-  const averageItemSize = ITEM_HEIGHT;
-
-  // Simple keyExtractor without useCallback [[memory:4875251]]
-  const keyExtractor = item => item.id;
-  const hasData = data !== null && data !== undefined && (typeof data === "string" ? data.length > 0 : typeof data === "number" || typeof data === "boolean" ? true : Array.isArray(data) ? data.length > 0 : typeof data === "object" ? Object.keys(data).length > 0 : false);
-
-  // Raw mode: render data directly without header/container
-  if (rawMode) {
-    if (!hasData) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          padding: 20
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: STABLE_STYLES.noDataText,
-          children: "No data available"
-        })
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        minHeight: isProcessing ? 40 : flatData.length * ITEM_HEIGHT
-      },
-      children: isProcessing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: STABLE_STYLES.loadingText,
-          children: ["Processing data... (raw mode, isProcessing=", String(isProcessing), ")"]
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          position: "relative",
-          height: flatData.length * ITEM_HEIGHT
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IndentGuidesOverlay.IndentGuidesOverlay, {
-          items: flatData,
-          visibleRange: {
-            start: 0,
-            end: Math.max(0, flatData.length - 1)
-          },
-          itemHeight: ITEM_HEIGHT,
-          indentWidth: INDENT_WIDTH,
-          activeDepth: activeDepth
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-          ref: listRef,
-          "sentry-label": "ignore devtools data explorer list",
-          data: flatData,
-          renderItem: renderItem,
-          keyExtractor: keyExtractor,
-          showsVerticalScrollIndicator: true,
-          contentContainerStyle: STABLE_STYLES.listContent,
-          initialNumToRender: 15,
-          maxToRenderPerBatch: 10,
-          windowSize: 10,
-          scrollEnabled: false
-        })]
-      })
-    });
-  }
-
-  // Standard mode: render with header and container
-  if (!hasData) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: STABLE_STYLES.container,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: STABLE_STYLES.header,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: STABLE_STYLES.headerRow,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flex: 1
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: STABLE_STYLES.title,
-              children: title
-            }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: STABLE_STYLES.description,
-              children: description
-            })]
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: STABLE_STYLES.noDataContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: STABLE_STYLES.noDataText,
-          children: "No data available"
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: STABLE_STYLES.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: STABLE_STYLES.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: STABLE_STYLES.headerRow,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          "sentry-label": "ignore devtools data explorer header toggle",
-          onPress: toggleMainExpanded,
-          hitSlop: HIT_SLOP_10,
-          style: STABLE_STYLES.headerTouchable,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flex: 1
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: STABLE_STYLES.title,
-              children: title
-            }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: STABLE_STYLES.description,
-              children: description
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: STABLE_STYLES.expanderMargin,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-              expanded: isExpanded,
-              onPress: toggleMainExpanded
-            })
-          })]
-        })
-      }), isExpanded && visibleTypes.length > 0 && !rawMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(TypeLegend, {
-        visibleTypes: visibleTypes
-      })]
-    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: isProcessing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: STABLE_STYLES.loadingContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: STABLE_STYLES.loadingText,
-          children: ["Processing data... (isProcessing=", String(isProcessing), ")"]
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: {
-          height: flatData.length * ITEM_HEIGHT,
-          position: "relative"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IndentGuidesOverlay.IndentGuidesOverlay, {
-          items: flatData,
-          visibleRange: visibleRange,
-          itemHeight: ITEM_HEIGHT,
-          indentWidth: INDENT_WIDTH,
-          activeDepth: activeDepth
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-          ref: listRef,
-          "sentry-label": "ignore devtools data explorer collapsed list",
-          data: flatData,
-          renderItem: renderItem,
-          keyExtractor: keyExtractor,
-          showsVerticalScrollIndicator: true,
-          contentContainerStyle: STABLE_STYLES.listContent,
-          initialNumToRender: 15,
-          maxToRenderPerBatch: 10,
-          windowSize: 10,
-          scrollEnabled: false,
-          onViewableItemsChanged: onViewableItemsChanged,
-          viewabilityConfig: viewabilityConfigRef.current
-        })]
-      })
-    })]
-  });
-};
-exports.VirtualizedDataExplorer = VirtualizedDataExplorer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.VirtualizedDataExplorer=void 0;var _react=require("react");var _reactNative=require("react-native");var _displayValue=require("../utils/displayValue.js");var _index=require("../ui/gameUI/index.js");var _nightTheme=require("../ui/night/nightTheme.js");var _CopyButton=require("../ui/components/CopyButton.js");var _index2=require("../icons/index.js");var _IndentGuidesOverlay=require("./IndentGuidesOverlay.js");var _fonts=require("../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");const HIT_SLOP_10={top:10,bottom:10,left:10,right:10};const ITEM_HEIGHT=24;const LONG_ITEM_HEIGHT=24;const CHUNK_SIZE=50;const MAX_DEPTH_LIMIT=15;const MAX_ITEMS_PER_LEVEL=500;const LONG_KEY_THRESHOLD=30;const DOUBLE_TAP_MS=300;const INDENT_WIDTH=16;const INDENT_STYLES=Array.from({length:MAX_DEPTH_LIMIT+1},(e,o)=>_reactNative.StyleSheet.create({container:{marginLeft:o*INDENT_WIDTH}}).container);const TYPE_COLOR_CACHE=new Map([["string",_index.gameUIColors.dataTypes.string],["number",_index.gameUIColors.dataTypes.number],["bigint",_index.gameUIColors.optional],["boolean",_index.gameUIColors.dataTypes.boolean],["null",_index.gameUIColors.dataTypes.null],["undefined",_index.gameUIColors.dataTypes.undefined],["function",_index.gameUIColors.dataTypes.function],["symbol",_index.gameUIColors.critical],["date",_index.gameUIColors.critical],["error",_index.gameUIColors.error],["array",_index.gameUIColors.dataTypes.array],["object",_index.gameUIColors.dataTypes.object],["map",_index.gameUIColors.info],["set",_index.gameUIColors.success],["circular",_index.gameUIColors.warning]]);const STABLE_STYLES=_reactNative.StyleSheet.create({container:{backgroundColor:_nightTheme.night.color.bg,borderRadius:8,borderWidth:1,borderColor:_nightTheme.night.color.border},header:{flexDirection:"column",paddingHorizontal:16,paddingVertical:12},headerRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},title:{color:_index.gameUIColors.primary,fontSize:14,fontWeight:"500"},description:{color:_index.gameUIColors.secondary,fontSize:12,marginTop:2},typeLegend:{flexDirection:"row",flexWrap:"wrap",gap:6,marginTop:8,paddingTop:8,borderTopWidth:1,borderTopColor:_index.gameUIColors.primary+"14"},typeBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},typeColor:{width:8,height:8,borderRadius:4,marginRight:4},typeName:{fontSize:10,fontWeight:"500",color:_index.gameUIColors.secondary},itemContainer:{minHeight:ITEM_HEIGHT,backgroundColor:"transparent",position:"relative",flexDirection:"row",alignItems:"flex-start"},itemTouchable:{flex:1,flexDirection:"row",alignItems:"flex-start",paddingLeft:0,paddingRight:16,paddingVertical:2,minHeight:24},itemTouchablePressed:{backgroundColor:_index.gameUIColors.primary+"0A"},itemSelected:{backgroundColor:_index.gameUIColors.primary+"14"},expanderContainer:{width:16,alignItems:"center",justifyContent:"center",marginTop:4},expanderIcon:{width:12,height:12},labelContainer:{flex:1,flexDirection:"row",alignItems:"flex-start",paddingLeft:2},labelContainerVertical:{flex:1,flexDirection:"column",paddingLeft:2,paddingVertical:2},labelContainerVerticalRow:{flexDirection:"row",alignItems:"center",marginBottom:2},labelText:{color:_index.gameUIColors.primary,fontSize:12,fontWeight:"500",fontFamily:_fonts.monoFont,marginRight:8,flexShrink:1},labelTextTruncated:{color:_index.gameUIColors.primary,fontSize:12,fontWeight:"500",fontFamily:_fonts.monoFont,flexShrink:1},valueText:{fontSize:12,fontFamily:_fonts.monoFont,flex:1,color:_index.gameUIColors.primaryLight},loadingContainer:{padding:16,alignItems:"center"},loadingText:{color:_index.gameUIColors.secondary,fontSize:12},noDataContainer:{padding:16,alignItems:"center"},noDataText:{color:_index.gameUIColors.secondary,fontSize:12},listContent:{paddingBottom:8},headerTouchable:{flex:1,flexDirection:"row",alignItems:"center"},expanderMargin:{marginLeft:8}});function selectionOf(e){return{path:e.path.slice(1),value:e.value,label:e.key}}function countNodesUpTo(e,o,i=0){if(i>=o)return i;let f=i+1;if(Array.isArray(e)){for(const b of e){if(f>=o)return f;f=countNodesUpTo(b,o,f)}}else if(e!==null&&typeof e==="object"){for(const b of Object.values(e)){if(f>=o)return f;f=countNodesUpTo(b,o,f)}}return f}const getValueType=e=>{if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";if(e instanceof Date)return"date";if(e instanceof Error)return"error";if(e instanceof Map)return"map";if(e instanceof Set)return"set";if(e instanceof RegExp)return"regexp";if(typeof e==="function")return"function";if(typeof e==="symbol")return"symbol";if(typeof e==="bigint")return"bigint";if(typeof e==="object")return"object";return typeof e};const getValueCount=(e,o)=>{if(e===null)return 0;switch(o){case"array":return Array.isArray(e)?e.length:0;case"object":return typeof e==="object"&&!(e instanceof Date)&&!(e instanceof Error)&&!(e instanceof RegExp)&&!(e instanceof Map)&&!(e instanceof Set)?Object.keys(e).length:0;case"map":return e instanceof Map?e.size:0;case"set":return e instanceof Set?e.size:0;default:return 0}};const formatValue=(e,o)=>{if(e===null)return"null";if(e===void 0)return"undefined";switch(o){case"string":return`"${String(e)}"`;case"boolean":return e===true?"true":"false";case"function":return typeof e==="function"?e.toString().slice(0,50)+"...":"undefined";case"symbol":return typeof e==="symbol"?String(e):"undefined";case"date":return e instanceof Date?e.toISOString():"undefined";case"regexp":return e instanceof RegExp?e.toString():"undefined";case"bigint":return typeof e==="bigint"?e.toString()+"n":"undefined";case"error":return e instanceof Error?`${e.name}: ${e.message}`:"undefined";default:return(0,_displayValue.displayValue)(e)}};const getTypeColor=e=>{return TYPE_COLOR_CACHE.get(e)||_index.gameUIColors.dataTypes.array};const ExpanderComponent=({expanded:e,onPress:o})=>{return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools data explorer expander",style:STABLE_STYLES.expanderContainer,onPress:o,hitSlop:HIT_SLOP_10,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.expanderIcon,children:(0,_jsxRuntime.jsx)(_index2.ChevronRight,{size:12,color:_index.gameUIColors.secondary,strokeWidth:2,style:{transform:[{rotate:e?"90deg":"0deg"}]}})})})};ExpanderComponent.displayName="Expander";const Expander=(0,_react.memo)(ExpanderComponent);const TypeLegendComponent=({visibleTypes:e})=>{const o=Array.from(new Set(e)).slice(0,8);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.typeLegend,children:o.map(i=>{const f=getTypeColor(i);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[STABLE_STYLES.typeBadge,{backgroundColor:`${f}10`,borderColor:`${f}30`}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[STABLE_STYLES.typeColor,{backgroundColor:f}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.typeName,children:i})]},i)})})};TypeLegendComponent.displayName="TypeLegend";const TypeLegend=(0,_react.memo)(TypeLegendComponent);const useDataFlattening=(e,o=10,i=false)=>{const[f,b]=(0,_react.useState)([]);const V=(0,_react.useRef)(new Map);const $=(0,_react.useCallback)(()=>{const t=new Set(["root"]);if(i&&e&&typeof e==="object"){if(Array.isArray(e)){e.forEach((p,s)=>{t.add(`root.${s}`)})}else{Object.keys(e).forEach(p=>{t.add(`root.${p}`)})}}return t},[i,e]);const[E,D]=(0,_react.useState)(()=>$());const[_,R]=(0,_react.useState)(false);const C=(0,_react.useRef)(new WeakSet);const I=(0,_react.useRef)(false);const k=(0,_react.useRef)(0);const P=(0,_react.useRef)(0);const a=(0,_react.useRef)(void 0);const m=(0,_react.useCallback)((t,p,s,u="root",n=0,T,g=[],h=0,S=1,x=[])=>{if(n>Math.min(o,MAX_DEPTH_LIMIT))return[];const c=[...g,u];const l=c.join(".");const y=getValueType(t);const U=["object","array","map","set"].includes(y)&&t!==null;const W=U?getValueCount(t,y):0;const M=Math.min(W,MAX_ITEMS_PER_LEVEL);if(t&&typeof t==="object"){if(s.has(t)){return[{id:l,key:u,value:"[Circular Reference]",valueType:"circular",depth:n,isExpandable:false,isExpanded:false,parentId:T,hasChildren:false,childCount:0,path:c,type:"circular",isLastChild:h===S-1,parentHasMoreSiblings:[...x],siblingIndex:h,totalSiblings:S}]}s.add(t)}const r={id:l,key:u,value:t,valueType:y,depth:n,isExpandable:U,isExpanded:p.has(l),parentId:T,hasChildren:M>0,childCount:M,path:c,type:U?"expandable":y,isLastChild:h===S-1,parentHasMoreSiblings:[...x],siblingIndex:h,totalSiblings:S};const d=[r];if(U&&p.has(l)&&n<Math.min(o,MAX_DEPTH_LIMIT)){try{let j=[];switch(y){case"array":j=Array.isArray(t)?t.map((w,A)=>[A.toString(),w]):[];break;case"object":j=typeof t==="object"&&t!==null&&!(t instanceof Date)&&!(t instanceof Error)&&!(t instanceof RegExp)&&!(t instanceof Map)&&!(t instanceof Set)?Object.entries(t):[];break;case"map":j=t instanceof Map?Array.from(t.entries()).map(([w,A])=>[String(w),A]):[];break;case"set":j=t instanceof Set?Array.from(t.values()).map((w,A)=>[A.toString(),w]):[];break}const B=j.slice(0,M);const v=B.length;const q=[...x];if(n>0){q[n-1]=!r.isLastChild}for(let w=0;w<B.length;w+=CHUNK_SIZE){const A=B.slice(w,w+CHUNK_SIZE);let F=w;for(const[K,G]of A){d.push(...m(G,p,s,K,n+1,l,c,F,v,q));F++}if(w>0&&w%(CHUNK_SIZE*2)===0){break}}}catch(j){console.error(j)}}return d},[o]);(0,_react.useEffect)(()=>{if(a.current&&(a.current.type==="expand"||a.current.type==="collapse")){if(_){R(false);I.current=false}a.current=void 0;return}if(I.current){return}let t;const p=++k.current;const s=()=>k.current===p;I.current=true;R(true);const u=async()=>{t=setTimeout(()=>{if(I.current&&s()){R(false);I.current=false}},5e3);await new Promise(n=>setTimeout(()=>n(),10));if(!s()){return}try{C.current=new WeakSet;P.current=Date.now();const n=m(e,E,C.current,"root",0,void 0,[],0,1,[]);const T=new Map;n.forEach((g,h)=>{T.set(g.id,{item:g,index:h})});V.current=T;if(t)clearTimeout(t);if(s()){b(n);R(false);I.current=false}}catch(n){console.error(n);if(t)clearTimeout(t);if(s()){b([]);V.current=new Map;R(false);I.current=false}}};u();return()=>{I.current=false;if(t)clearTimeout(t)}},[e,E,m,o]);const O=(0,_react.useCallback)((t,p)=>{R(false);I.current=false;b(s=>{const u=V.current.get(t);if(!u){return s}const{item:n,index:T}=u;if(p&&n.isExpandable&&n.hasChildren){const g=[...s];const h=new WeakSet;if(n.value&&typeof n.value==="object"){h.add(n.value)}const S=[];try{let l=[];const y=n.valueType;switch(y){case"array":l=Array.isArray(n.value)?n.value.map((r,d)=>[d.toString(),r]):[];break;case"object":l=typeof n.value==="object"&&n.value!==null&&!(n.value instanceof Date)&&!(n.value instanceof Error)&&!(n.value instanceof RegExp)&&!(n.value instanceof Map)&&!(n.value instanceof Set)?Object.entries(n.value):[];break;case"map":l=n.value instanceof Map?Array.from(n.value.entries()).map(([r,d])=>[String(r),d]):[];break;case"set":l=n.value instanceof Set?Array.from(n.value.values()).map((r,d)=>[d.toString(),r]):[];break}const U=l.length;const W=n.parentHasMoreSiblings||[];const M=[...W];if(n.depth>0){M[n.depth-1]=!n.isLastChild}l.forEach(([r,d],j)=>{const B=m(d,new Set,h,r,n.depth+1,t,n.path,j,U,M);S.push(...B)})}catch(l){console.error(l)}const x=S;if(x.length>0){}g[T]={...n,isExpanded:true};g.splice(T+1,0,...x);const c=new Map;g.forEach((l,y)=>{c.set(l.id,{item:l,index:y})});V.current=c;return g}else if(!p){const g=new Set;const h=(c,l)=>{s.forEach(y=>{if(y.parentId===c||y.id.startsWith(c+".")&&y.depth>l){g.add(y.id);if(y.hasChildren){h(y.id,y.depth)}}})};h(t,n.depth);const S=s.map(c=>{if(c.id===t){return{...c,isExpanded:false}}return c}).filter(c=>!g.has(c.id));const x=new Map;S.forEach((c,l)=>{x.set(c.id,{item:c,index:l})});V.current=x;return S}return s})},[m]);const z=(0,_react.useCallback)(t=>{D(p=>{const s=new Set(p);const u=!s.has(t);if(u){s.add(t)}else{s.delete(t)}a.current={type:u?"expand":"collapse",itemId:t};O(t,u);return s})},[O]);const L=countNodesUpTo(e,CHUNK_SIZE,0)<CHUNK_SIZE;const H=(0,_react.useMemo)(()=>{if(!L)return null;return m(e,E,new WeakSet,"root",0,void 0,[],0,1,[])},[L,e,E,m]);const N=(0,_react.useCallback)(t=>{if(t.length===0)return;D(p=>{if(t.every(u=>p.has(u)))return p;const s=new Set(p);for(const u of t)s.add(u);return s})},[]);return{flatData:H??f,isProcessing:H?false:_,toggleExpanded:z,revealPath:N}};const VirtualizedItemComponent=({item:e,onToggleExpanded:o,index:i,onSelect:f,isSelected:b,selectable:V,onRequestInlineEdit:$,isInlineEditing:E,inlineEditor:D,testIDPrefix:_})=>{const[R,C]=(0,_react.useState)(false);const[I,k]=(0,_react.useState)(false);const P=V===true;const a=(0,_react.useRef)(0);const m=e.path.slice(1);const O=INDENT_STYLES[Math.min(e.depth,MAX_DEPTH_LIMIT)]||INDENT_STYLES[0];const z=getTypeColor(e.valueType);const L=false;const H=()=>{if(P){const s=Date.now();const u=s-a.current<DOUBLE_TAP_MS;a.current=s;if(u&&!e.isExpandable&&$){$(e);return}f(e);return}if(e.isExpandable){o(e.id)}f(e)};const N=()=>{if(e.isExpandable){o(e.id)}f(e)};const t=()=>{};const p=e.key;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[STABLE_STYLES.itemContainer,O],children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools data explorer item",testID:`${_}-${e.id}`,accessibilityLabel:`${e.key}: ${e.valueType}`,style:[STABLE_STYLES.itemTouchable,R&&STABLE_STYLES.itemTouchablePressed,P&&b&&STABLE_STYLES.itemSelected,L&&{minHeight:LONG_ITEM_HEIGHT,paddingVertical:2}],onPress:H,onPressIn:()=>C(true),onPressOut:()=>C(false),activeOpacity:e.isExpandable||P?.7:1,disabled:!e.isExpandable&&!P,children:[e.isExpandable?(0,_jsxRuntime.jsx)(Expander,{expanded:e.isExpanded,onPress:N}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.expanderContainer}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:STABLE_STYLES.labelContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:STABLE_STYLES.labelText,numberOfLines:1,children:[e.key,":"]}),E&&D?D:e.isExpandable?(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[STABLE_STYLES.valueText,{color:_index.gameUIColors.secondary}],numberOfLines:1,children:[e.valueType," (",e.childCount," ",e.childCount===1?"item":"items",")"]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[STABLE_STYLES.valueText,{color:z}],numberOfLines:1,children:formatValue(e.value,e.valueType)})]})]}),e.value!==void 0?(0,_jsxRuntime.jsx)(_CopyButton.CopyButton,{value:e.value,size:14,buttonStyle:{marginLeft:8,marginRight:8}}):null]})};VirtualizedItemComponent.displayName="VirtualizedItem";const VirtualizedItem=(0,_react.memo)(VirtualizedItemComponent);const VirtualizedDataExplorer=({title:e,description:o,data:i,maxDepth:f=10,rawMode:b=false,initialExpanded:V=false,disableCopy:$=false,onSelectionChange:E,onRequestInlineEdit:D,inlineEditPath:_,renderInlineEditor:R,selectPath:C,testIDPrefix:I="buoy-tree-row"})=>{const[k,P]=(0,_react.useState)(b);const{flatData:a,isProcessing:m,toggleExpanded:O,revealPath:z}=useDataFlattening(i,f,V);const L=(0,_react.useRef)(null);const[H,N]=(0,_react.useState)({start:0,end:Math.min(a.length-1,Math.max(0,Math.ceil(400/ITEM_HEIGHT)-1))});const t=(0,_react.useRef)({itemVisiblePercentThreshold:1});const p=(0,_react.useRef)(({viewableItems:r})=>{const d=r.map(j=>j.index).filter(j=>typeof j==="number");if(d.length){N({start:Math.min(...d),end:Math.max(...d)})}}).current;(0,_react.useEffect)(()=>{N({start:0,end:Math.min(a.length-1,Math.max(0,Math.ceil(400/ITEM_HEIGHT)-1))})},[a.length]);const s=(0,_react.useMemo)(()=>{const r=new Set;for(const d of a){r.add(d.valueType);if(r.size>=8)break}return Array.from(r)},[a]);const u=()=>{P(!k)};const[n,T]=(0,_react.useState)(null);const g=(0,_react.useMemo)(()=>n==null?void 0:a.find(r=>r.id===n),[a,n]);const h=g?.depth;(0,_react.useEffect)(()=>{if(!E)return;E(g?selectionOf(g):null)},[g,E]);const S=(0,_react.useCallback)(r=>{T(d=>d===r.id?null:r.id)},[]);const x=C===void 0?void 0:C===null?"\0null":C.join(".");const c=(0,_react.useRef)(x);(0,_react.useEffect)(()=>{if(x===c.current)return;c.current=x;if(x===void 0)return;if(C==null){T(null);return}const r=["root"];for(const d of C.slice(0,-1)){r.push(`${r[r.length-1]}.${d}`)}z(r);T(["root",...C].join("."))},[x,C,z]);const l=(0,_react.useCallback)(r=>{T(r.id);D?.(selectionOf(r))},[D]);const y=({item:r,index:d})=>(0,_jsxRuntime.jsx)(VirtualizedItem,{item:r,index:d,onToggleExpanded:O,onSelect:S,isSelected:g?.id===r.id,selectable:E!=null,onRequestInlineEdit:l,isInlineEditing:_!=null&&_.join(".")===r.path.slice(1).join("."),inlineEditor:R?R(selectionOf(r)):null,testIDPrefix:I});const U=ITEM_HEIGHT;const W=r=>r.id;const M=i!==null&&i!==void 0&&(typeof i==="string"?i.length>0:typeof i==="number"||typeof i==="boolean"?true:Array.isArray(i)?i.length>0:typeof i==="object"?Object.keys(i).length>0:false);if(b){if(!M){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flex:1,justifyContent:"center",alignItems:"center",padding:20},children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.noDataText,children:"No data available"})})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{minHeight:m?40:a.length*ITEM_HEIGHT},children:m?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flex:1,justifyContent:"center",alignItems:"center"},children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:STABLE_STYLES.loadingText,children:["Processing data... (raw mode, isProcessing=",String(m),")"]})}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"relative",height:a.length*ITEM_HEIGHT},children:[(0,_jsxRuntime.jsx)(_IndentGuidesOverlay.IndentGuidesOverlay,{items:a,visibleRange:{start:0,end:Math.max(0,a.length-1)},itemHeight:ITEM_HEIGHT,indentWidth:INDENT_WIDTH,activeDepth:h}),(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:L,"sentry-label":"ignore devtools data explorer list",data:a,renderItem:y,keyExtractor:W,showsVerticalScrollIndicator:true,contentContainerStyle:STABLE_STYLES.listContent,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false})]})})}if(!M){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:STABLE_STYLES.container,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.header,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.headerRow,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.title,children:e}),o&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.description,children:o})]})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.noDataContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.noDataText,children:"No data available"})})]})}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:STABLE_STYLES.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:STABLE_STYLES.header,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.headerRow,children:(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools data explorer header toggle",onPress:u,hitSlop:HIT_SLOP_10,style:STABLE_STYLES.headerTouchable,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.title,children:e}),o&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:STABLE_STYLES.description,children:o})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.expanderMargin,children:(0,_jsxRuntime.jsx)(Expander,{expanded:k,onPress:u})})]})}),k&&s.length>0&&!b&&(0,_jsxRuntime.jsx)(TypeLegend,{visibleTypes:s})]}),k&&(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:m?(0,_jsxRuntime.jsx)(_reactNative.View,{style:STABLE_STYLES.loadingContainer,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:STABLE_STYLES.loadingText,children:["Processing data... (isProcessing=",String(m),")"]})}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{height:a.length*ITEM_HEIGHT,position:"relative"},children:[(0,_jsxRuntime.jsx)(_IndentGuidesOverlay.IndentGuidesOverlay,{items:a,visibleRange:H,itemHeight:ITEM_HEIGHT,indentWidth:INDENT_WIDTH,activeDepth:h}),(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:L,"sentry-label":"ignore devtools data explorer collapsed list",data:a,renderItem:y,keyExtractor:W,showsVerticalScrollIndicator:true,contentContainerStyle:STABLE_STYLES.listContent,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,onViewableItemsChanged:p,viewabilityConfig:t.current})]})})]})};exports.VirtualizedDataExplorer=VirtualizedDataExplorer;