@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -1,1265 +1 @@
-"use strict";
-
-import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
-import { Text, TouchableOpacity, View, StyleSheet, FlatList } from "react-native";
-import { displayValue } from "../utils/displayValue.js";
-import { gameUIColors } from "../ui/gameUI/index.js";
-import { night } from "../ui/night/nightTheme.js";
-import { CopyButton } from "../ui/components/CopyButton.js";
-import { ChevronRight } from "../icons/index.js";
-import { IndentGuidesOverlay } from "./IndentGuidesOverlay.js";
-import { monoFont } from "../ui/fonts.js";
-// Stable constants to prevent re-renders [[memory:4875251]]
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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) => 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", gameUIColors.dataTypes.string], ["number", gameUIColors.dataTypes.number], ["bigint", gameUIColors.optional],
-// Purple for bigint (distinct from number)
-["boolean", gameUIColors.dataTypes.boolean], ["null", gameUIColors.dataTypes.null], ["undefined", gameUIColors.dataTypes.undefined], ["function", gameUIColors.dataTypes.function], ["symbol", gameUIColors.critical],
-// Pink for symbols (distinct from function)
-["date", gameUIColors.critical],
-// Pink for dates
-["error", gameUIColors.error],
-// Red for errors
-["array", gameUIColors.dataTypes.array], ["object", gameUIColors.dataTypes.object], ["map", gameUIColors.info],
-// Cyan for maps (distinct from object/array)
-["set", gameUIColors.success],
-// Green for sets (distinct from map/array/object)
-["circular", gameUIColors.warning] // Yellow for circular references
-]);
-
-// Pre-computed stable styles with React Query-inspired design
-const STABLE_STYLES = 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: night.color.bg,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: 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: gameUIColors.primary,
-    // text-white
-    fontSize: 14,
-    fontWeight: "500" // font-medium
-  },
-  description: {
-    color: gameUIColors.secondary,
-    // text-gray-400
-    fontSize: 12,
-    marginTop: 2
-  },
-  typeLegend: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    marginTop: 8,
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: 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: 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: gameUIColors.primary + "0A" // slightly more visible on press
-  },
-  itemSelected: {
-    backgroundColor: 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: gameUIColors.primary,
-    // text-white
-    fontSize: 12,
-    fontWeight: "500",
-    // font-medium
-    fontFamily: monoFont,
-    marginRight: 8,
-    flexShrink: 1
-  },
-  labelTextTruncated: {
-    color: gameUIColors.primary,
-    // text-white
-    fontSize: 12,
-    fontWeight: "500",
-    // font-medium
-    fontFamily: monoFont,
-    flexShrink: 1
-  },
-  valueText: {
-    fontSize: 12,
-    fontFamily: monoFont,
-    flex: 1,
-    color: gameUIColors.primaryLight // text-gray-300
-  },
-  loadingContainer: {
-    padding: 16,
-    alignItems: "center"
-  },
-  loadingText: {
-    color: gameUIColors.secondary,
-    // text-gray-400
-    fontSize: 12
-  },
-  noDataContainer: {
-    padding: 16,
-    alignItems: "center"
-  },
-  noDataText: {
-    color: 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 displayValue(value);
-  }
-};
-
-// Optimized type color lookup using cache [[memory:4875251]]
-const getTypeColor = valueType => {
-  return TYPE_COLOR_CACHE.get(valueType) || gameUIColors.dataTypes.array;
-};
-
-// Memoized components for performance
-const ExpanderComponent = ({
-  expanded,
-  onPress
-}) => {
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore devtools data explorer expander",
-    style: STABLE_STYLES.expanderContainer,
-    onPress: onPress,
-    hitSlop: HIT_SLOP_10,
-    children: /*#__PURE__*/_jsx(View, {
-      style: STABLE_STYLES.expanderIcon,
-      children: /*#__PURE__*/_jsx(ChevronRight, {
-        size: 12,
-        color: gameUIColors.secondary,
-        strokeWidth: 2,
-        style: {
-          transform: [{
-            rotate: expanded ? "90deg" : "0deg"
-          }]
-        }
-      })
-    })
-  });
-};
-ExpanderComponent.displayName = "Expander";
-const Expander = /*#__PURE__*/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__*/_jsx(View, {
-    style: STABLE_STYLES.typeLegend,
-    children: uniqueTypes.map(type => {
-      const color = getTypeColor(type);
-      return /*#__PURE__*/_jsxs(View, {
-        style: [STABLE_STYLES.typeBadge, {
-          backgroundColor: `${color}10`,
-          borderColor: `${color}30`
-        }],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [STABLE_STYLES.typeColor, {
-            backgroundColor: color
-          }]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: STABLE_STYLES.typeName,
-          children: type
-        })]
-      }, type);
-    })
-  });
-};
-TypeLegendComponent.displayName = "TypeLegend";
-const TypeLegend = /*#__PURE__*/memo(TypeLegendComponent);
-
-// Optimized data flattening with chunked processing to prevent UI blocking [[memory:4875251]]
-const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) => {
-  const [flatData, setFlatData] = useState([]);
-  const flatDataMapRef = useRef(new Map());
-
-  // Initialize with root expanded and optionally first level
-  const getInitialExpanded = 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] = useState(() => getInitialExpanded());
-  const [isProcessing, setIsProcessing] = useState(false);
-
-  // Debug logging - commented out for less noise
-  // Store circular cache outside of re-renders to prevent reset
-  const circularCacheRef = useRef(new WeakSet());
-  const processingRef = 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 = useRef(0);
-  const dataVersionRef = useRef(0);
-  const lastActionRef = useRef(undefined);
-
-  // Stable flattenData function that doesn't depend on expandedItems
-  const flattenDataStable = 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)
-  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 = 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 = 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 = 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 = 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] = useState(false);
-  const [showFullKey, setShowFullKey] = useState(false);
-  const canEdit = selectable === true;
-  const lastPressRef = 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__*/_jsxs(View, {
-    style: [STABLE_STYLES.itemContainer, indentStyle],
-    children: [/*#__PURE__*/_jsxs(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__*/_jsx(Expander, {
-        expanded: item.isExpanded,
-        onPress: handleExpanderPress
-      }) : /*#__PURE__*/_jsx(View, {
-        style: STABLE_STYLES.expanderContainer
-      }), /*#__PURE__*/_jsxs(View, {
-        style: STABLE_STYLES.labelContainer,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: STABLE_STYLES.labelText,
-          numberOfLines: 1,
-          children: [item.key, ":"]
-        }), isInlineEditing && inlineEditor ? inlineEditor : item.isExpandable ? /*#__PURE__*/_jsxs(Text, {
-          style: [STABLE_STYLES.valueText, {
-            color: gameUIColors.secondary
-          }],
-          numberOfLines: 1,
-          children: [item.valueType, " (", item.childCount, " ", item.childCount === 1 ? "item" : "items", ")"]
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [STABLE_STYLES.valueText, {
-            color
-          }],
-          numberOfLines: 1,
-          children: formatValue(item.value, item.valueType)
-        })]
-      })]
-    }), item.value !== undefined ? /*#__PURE__*/_jsx(CopyButton, {
-      value: item.value,
-      size: 14,
-      buttonStyle: {
-        marginLeft: 8,
-        marginRight: 8
-      }
-    }) : null]
-  });
-};
-VirtualizedItemComponent.displayName = "VirtualizedItem";
-const VirtualizedItem = /*#__PURE__*/memo(VirtualizedItemComponent);
-
-// Main virtualized data explorer component
-
-export 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] = useState(rawMode); // Auto-expand in raw mode
-  const {
-    flatData,
-    isProcessing,
-    toggleExpanded,
-    revealPath
-  } = useDataFlattening(data, maxDepth, initialExpanded);
-
-  // Track visible range for overlay rendering
-  const listRef = useRef(null);
-  const [visibleRange, setVisibleRange] = useState({
-    start: 0,
-    end: Math.min(flatData.length - 1, Math.max(0, Math.ceil(400 / ITEM_HEIGHT) - 1))
-  });
-  const viewabilityConfigRef = useRef({
-    itemVisiblePercentThreshold: 1
-  });
-  const onViewableItemsChanged = 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;
-  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 = 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] = useState(null);
-  const selectedItem = 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.
-  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 = 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 = useRef(selectPathKey);
-  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 = useCallback(item => {
-    setSelectedId(item.id);
-    onRequestInlineEdit?.(selectionOf(item));
-  }, [onRequestInlineEdit]);
-  const renderItem = ({
-    item,
-    index
-  }) => /*#__PURE__*/_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__*/_jsx(View, {
-        style: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          padding: 20
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: STABLE_STYLES.noDataText,
-          children: "No data available"
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        minHeight: isProcessing ? 40 : flatData.length * ITEM_HEIGHT
-      },
-      children: isProcessing ? /*#__PURE__*/_jsx(View, {
-        style: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: STABLE_STYLES.loadingText,
-          children: ["Processing data... (raw mode, isProcessing=", String(isProcessing), ")"]
-        })
-      }) : /*#__PURE__*/_jsxs(View, {
-        style: {
-          position: "relative",
-          height: flatData.length * ITEM_HEIGHT
-        },
-        children: [/*#__PURE__*/_jsx(IndentGuidesOverlay, {
-          items: flatData,
-          visibleRange: {
-            start: 0,
-            end: Math.max(0, flatData.length - 1)
-          },
-          itemHeight: ITEM_HEIGHT,
-          indentWidth: INDENT_WIDTH,
-          activeDepth: activeDepth
-        }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-      style: STABLE_STYLES.container,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: STABLE_STYLES.header,
-        children: /*#__PURE__*/_jsx(View, {
-          style: STABLE_STYLES.headerRow,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: {
-              flex: 1
-            },
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: STABLE_STYLES.title,
-              children: title
-            }), description && /*#__PURE__*/_jsx(Text, {
-              style: STABLE_STYLES.description,
-              children: description
-            })]
-          })
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: STABLE_STYLES.noDataContainer,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: STABLE_STYLES.noDataText,
-          children: "No data available"
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: STABLE_STYLES.container,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: STABLE_STYLES.header,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: STABLE_STYLES.headerRow,
-        children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-          "sentry-label": "ignore devtools data explorer header toggle",
-          onPress: toggleMainExpanded,
-          hitSlop: HIT_SLOP_10,
-          style: STABLE_STYLES.headerTouchable,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: {
-              flex: 1
-            },
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: STABLE_STYLES.title,
-              children: title
-            }), description && /*#__PURE__*/_jsx(Text, {
-              style: STABLE_STYLES.description,
-              children: description
-            })]
-          }), /*#__PURE__*/_jsx(View, {
-            style: STABLE_STYLES.expanderMargin,
-            children: /*#__PURE__*/_jsx(Expander, {
-              expanded: isExpanded,
-              onPress: toggleMainExpanded
-            })
-          })]
-        })
-      }), isExpanded && visibleTypes.length > 0 && !rawMode && /*#__PURE__*/_jsx(TypeLegend, {
-        visibleTypes: visibleTypes
-      })]
-    }), isExpanded && /*#__PURE__*/_jsx(_Fragment, {
-      children: isProcessing ? /*#__PURE__*/_jsx(View, {
-        style: STABLE_STYLES.loadingContainer,
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: STABLE_STYLES.loadingText,
-          children: ["Processing data... (isProcessing=", String(isProcessing), ")"]
-        })
-      }) : /*#__PURE__*/_jsxs(View, {
-        style: {
-          height: flatData.length * ITEM_HEIGHT,
-          position: "relative"
-        },
-        children: [/*#__PURE__*/_jsx(IndentGuidesOverlay, {
-          items: flatData,
-          visibleRange: visibleRange,
-          itemHeight: ITEM_HEIGHT,
-          indentWidth: INDENT_WIDTH,
-          activeDepth: activeDepth
-        }), /*#__PURE__*/_jsx(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
-        })]
-      })
-    })]
-  });
-};
+"use strict";import{useState as $,useMemo as re,useCallback as U,useRef as _,useEffect as te,memo as oe}from"react";import{Text as P,TouchableOpacity as ie,View as u,StyleSheet as ue,FlatList as pe}from"react-native";import{displayValue as Me}from"../utils/displayValue.js";import{gameUIColors as a}from"../ui/gameUI/index.js";import{night as ye}from"../ui/night/nightTheme.js";import{CopyButton as De}from"../ui/components/CopyButton.js";import{ChevronRight as Re}from"../icons/index.js";import{IndentGuidesOverlay as he}from"./IndentGuidesOverlay.js";import{monoFont as se}from"../ui/fonts.js";import{jsx as i,jsxs as T,Fragment as je}from"react/jsx-runtime";const ge={top:10,bottom:10,left:10,right:10};const z=24;const ke=24;const ee=50;const ne=15;const Pe=500;const Ze=30;const Le=300;const ae=16;const me=Array.from({length:ne+1},(e,l)=>ue.create({container:{marginLeft:l*ae}}).container);const Ae=new Map([["string",a.dataTypes.string],["number",a.dataTypes.number],["bigint",a.optional],["boolean",a.dataTypes.boolean],["null",a.dataTypes.null],["undefined",a.dataTypes.undefined],["function",a.dataTypes.function],["symbol",a.critical],["date",a.critical],["error",a.error],["array",a.dataTypes.array],["object",a.dataTypes.object],["map",a.info],["set",a.success],["circular",a.warning]]);const o=ue.create({container:{backgroundColor:ye.color.bg,borderRadius:8,borderWidth:1,borderColor:ye.color.border},header:{flexDirection:"column",paddingHorizontal:16,paddingVertical:12},headerRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},title:{color:a.primary,fontSize:14,fontWeight:"500"},description:{color:a.secondary,fontSize:12,marginTop:2},typeLegend:{flexDirection:"row",flexWrap:"wrap",gap:6,marginTop:8,paddingTop:8,borderTopWidth:1,borderTopColor:a.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:a.secondary},itemContainer:{minHeight:z,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:a.primary+"0A"},itemSelected:{backgroundColor:a.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:a.primary,fontSize:12,fontWeight:"500",fontFamily:se,marginRight:8,flexShrink:1},labelTextTruncated:{color:a.primary,fontSize:12,fontWeight:"500",fontFamily:se,flexShrink:1},valueText:{fontSize:12,fontFamily:se,flex:1,color:a.primaryLight},loadingContainer:{padding:16,alignItems:"center"},loadingText:{color:a.secondary,fontSize:12},noDataContainer:{padding:16,alignItems:"center"},noDataText:{color:a.secondary,fontSize:12},listContent:{paddingBottom:8},headerTouchable:{flex:1,flexDirection:"row",alignItems:"center"},expanderMargin:{marginLeft:8}});function le(e){return{path:e.path.slice(1),value:e.value,label:e.key}}function ce(e,l,d=0){if(d>=l)return d;let h=d+1;if(Array.isArray(e)){for(const w of e){if(h>=l)return h;h=ce(w,l,h)}}else if(e!==null&&typeof e==="object"){for(const w of Object.values(e)){if(h>=l)return h;h=ce(w,l,h)}}return h}const _e=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 Ve=(e,l)=>{if(e===null)return 0;switch(l){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 He=(e,l)=>{if(e===null)return"null";if(e===void 0)return"undefined";switch(l){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 Me(e)}};const be=e=>{return Ae.get(e)||a.dataTypes.array};const xe=({expanded:e,onPress:l})=>{return i(ie,{"sentry-label":"ignore devtools data explorer expander",style:o.expanderContainer,onPress:l,hitSlop:ge,children:i(u,{style:o.expanderIcon,children:i(Re,{size:12,color:a.secondary,strokeWidth:2,style:{transform:[{rotate:e?"90deg":"0deg"}]}})})})};xe.displayName="Expander";const Te=oe(xe);const Se=({visibleTypes:e})=>{const l=Array.from(new Set(e)).slice(0,8);return i(u,{style:o.typeLegend,children:l.map(d=>{const h=be(d);return T(u,{style:[o.typeBadge,{backgroundColor:`${h}10`,borderColor:`${h}30`}],children:[i(u,{style:[o.typeColor,{backgroundColor:h}]}),i(P,{style:o.typeName,children:d})]},d)})})};Se.displayName="TypeLegend";const ze=oe(Se);const Oe=(e,l=10,d=false)=>{const[h,w]=$([]);const V=_(new Map);const Q=U(()=>{const t=new Set(["root"]);if(d&&e&&typeof e==="object"){if(Array.isArray(e)){e.forEach((m,s)=>{t.add(`root.${s}`)})}else{Object.keys(e).forEach(m=>{t.add(`root.${m}`)})}}return t},[d,e]);const[L,O]=$(()=>Q());const[B,A]=$(false);const I=_(new WeakSet);const j=_(false);const N=_(0);const W=_(0);const c=_(void 0);const C=U((t,m,s,g="root",n=0,M,x=[],S=0,k=1,E=[])=>{if(n>Math.min(l,ne))return[];const p=[...x,g];const f=p.join(".");const b=_e(t);const F=["object","array","map","set"].includes(b)&&t!==null;const J=F?Ve(t,b):0;const H=Math.min(J,Pe);if(t&&typeof t==="object"){if(s.has(t)){return[{id:f,key:g,value:"[Circular Reference]",valueType:"circular",depth:n,isExpandable:false,isExpanded:false,parentId:M,hasChildren:false,childCount:0,path:p,type:"circular",isLastChild:S===k-1,parentHasMoreSiblings:[...E],siblingIndex:S,totalSiblings:k}]}s.add(t)}const r={id:f,key:g,value:t,valueType:b,depth:n,isExpandable:F,isExpanded:m.has(f),parentId:M,hasChildren:H>0,childCount:H,path:p,type:F?"expandable":b,isLastChild:S===k-1,parentHasMoreSiblings:[...E],siblingIndex:S,totalSiblings:k};const y=[r];if(F&&m.has(f)&&n<Math.min(l,ne)){try{let D=[];switch(b){case"array":D=Array.isArray(t)?t.map((R,G)=>[G.toString(),R]):[];break;case"object":D=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":D=t instanceof Map?Array.from(t.entries()).map(([R,G])=>[String(R),G]):[];break;case"set":D=t instanceof Set?Array.from(t.values()).map((R,G)=>[G.toString(),R]):[];break}const v=D.slice(0,H);const Ce=v.length;const de=[...E];if(n>0){de[n-1]=!r.isLastChild}for(let R=0;R<v.length;R+=ee){const G=v.slice(R,R+ee);let fe=R;for(const[we,Ie]of G){y.push(...C(Ie,m,s,we,n+1,f,p,fe,Ce,de));fe++}if(R>0&&R%(ee*2)===0){break}}}catch(D){console.error(D)}}return y},[l]);te(()=>{if(c.current&&(c.current.type==="expand"||c.current.type==="collapse")){if(B){A(false);j.current=false}c.current=void 0;return}if(j.current){return}let t;const m=++N.current;const s=()=>N.current===m;j.current=true;A(true);const g=async()=>{t=setTimeout(()=>{if(j.current&&s()){A(false);j.current=false}},5e3);await new Promise(n=>setTimeout(()=>n(),10));if(!s()){return}try{I.current=new WeakSet;W.current=Date.now();const n=C(e,L,I.current,"root",0,void 0,[],0,1,[]);const M=new Map;n.forEach((x,S)=>{M.set(x.id,{item:x,index:S})});V.current=M;if(t)clearTimeout(t);if(s()){w(n);A(false);j.current=false}}catch(n){console.error(n);if(t)clearTimeout(t);if(s()){w([]);V.current=new Map;A(false);j.current=false}}};g();return()=>{j.current=false;if(t)clearTimeout(t)}},[e,L,C,l]);const Y=U((t,m)=>{A(false);j.current=false;w(s=>{const g=V.current.get(t);if(!g){return s}const{item:n,index:M}=g;if(m&&n.isExpandable&&n.hasChildren){const x=[...s];const S=new WeakSet;if(n.value&&typeof n.value==="object"){S.add(n.value)}const k=[];try{let f=[];const b=n.valueType;switch(b){case"array":f=Array.isArray(n.value)?n.value.map((r,y)=>[y.toString(),r]):[];break;case"object":f=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":f=n.value instanceof Map?Array.from(n.value.entries()).map(([r,y])=>[String(r),y]):[];break;case"set":f=n.value instanceof Set?Array.from(n.value.values()).map((r,y)=>[y.toString(),r]):[];break}const F=f.length;const J=n.parentHasMoreSiblings||[];const H=[...J];if(n.depth>0){H[n.depth-1]=!n.isLastChild}f.forEach(([r,y],D)=>{const v=C(y,new Set,S,r,n.depth+1,t,n.path,D,F,H);k.push(...v)})}catch(f){console.error(f)}const E=k;if(E.length>0){}x[M]={...n,isExpanded:true};x.splice(M+1,0,...E);const p=new Map;x.forEach((f,b)=>{p.set(f.id,{item:f,index:b})});V.current=p;return x}else if(!m){const x=new Set;const S=(p,f)=>{s.forEach(b=>{if(b.parentId===p||b.id.startsWith(p+".")&&b.depth>f){x.add(b.id);if(b.hasChildren){S(b.id,b.depth)}}})};S(t,n.depth);const k=s.map(p=>{if(p.id===t){return{...p,isExpanded:false}}return p}).filter(p=>!x.has(p.id));const E=new Map;k.forEach((p,f)=>{E.set(p.id,{item:p,index:f})});V.current=E;return k}return s})},[C]);const X=U(t=>{O(m=>{const s=new Set(m);const g=!s.has(t);if(g){s.add(t)}else{s.delete(t)}c.current={type:g?"expand":"collapse",itemId:t};Y(t,g);return s})},[Y]);const K=ce(e,ee,0)<ee;const q=re(()=>{if(!K)return null;return C(e,L,new WeakSet,"root",0,void 0,[],0,1,[])},[K,e,L,C]);const Z=U(t=>{if(t.length===0)return;O(m=>{if(t.every(g=>m.has(g)))return m;const s=new Set(m);for(const g of t)s.add(g);return s})},[]);return{flatData:q??h,isProcessing:q?false:B,toggleExpanded:X,revealPath:Z}};const Ee=({item:e,onToggleExpanded:l,index:d,onSelect:h,isSelected:w,selectable:V,onRequestInlineEdit:Q,isInlineEditing:L,inlineEditor:O,testIDPrefix:B})=>{const[A,I]=$(false);const[j,N]=$(false);const W=V===true;const c=_(0);const C=e.path.slice(1);const Y=me[Math.min(e.depth,ne)]||me[0];const X=be(e.valueType);const K=false;const q=()=>{if(W){const s=Date.now();const g=s-c.current<Le;c.current=s;if(g&&!e.isExpandable&&Q){Q(e);return}h(e);return}if(e.isExpandable){l(e.id)}h(e)};const Z=()=>{if(e.isExpandable){l(e.id)}h(e)};const t=()=>{};const m=e.key;return T(u,{style:[o.itemContainer,Y],children:[T(ie,{"sentry-label":"ignore devtools data explorer item",testID:`${B}-${e.id}`,accessibilityLabel:`${e.key}: ${e.valueType}`,style:[o.itemTouchable,A&&o.itemTouchablePressed,W&&w&&o.itemSelected,K&&{minHeight:ke,paddingVertical:2}],onPress:q,onPressIn:()=>I(true),onPressOut:()=>I(false),activeOpacity:e.isExpandable||W?.7:1,disabled:!e.isExpandable&&!W,children:[e.isExpandable?i(Te,{expanded:e.isExpanded,onPress:Z}):i(u,{style:o.expanderContainer}),T(u,{style:o.labelContainer,children:[T(P,{style:o.labelText,numberOfLines:1,children:[e.key,":"]}),L&&O?O:e.isExpandable?T(P,{style:[o.valueText,{color:a.secondary}],numberOfLines:1,children:[e.valueType," (",e.childCount," ",e.childCount===1?"item":"items",")"]}):i(P,{style:[o.valueText,{color:X}],numberOfLines:1,children:He(e.value,e.valueType)})]})]}),e.value!==void 0?i(De,{value:e.value,size:14,buttonStyle:{marginLeft:8,marginRight:8}}):null]})};Ee.displayName="VirtualizedItem";const Ne=oe(Ee);export const VirtualizedDataExplorer=({title:e,description:l,data:d,maxDepth:h=10,rawMode:w=false,initialExpanded:V=false,disableCopy:Q=false,onSelectionChange:L,onRequestInlineEdit:O,inlineEditPath:B,renderInlineEditor:A,selectPath:I,testIDPrefix:j="buoy-tree-row"})=>{const[N,W]=$(w);const{flatData:c,isProcessing:C,toggleExpanded:Y,revealPath:X}=Oe(d,h,V);const K=_(null);const[q,Z]=$({start:0,end:Math.min(c.length-1,Math.max(0,Math.ceil(400/z)-1))});const t=_({itemVisiblePercentThreshold:1});const m=_(({viewableItems:r})=>{const y=r.map(D=>D.index).filter(D=>typeof D==="number");if(y.length){Z({start:Math.min(...y),end:Math.max(...y)})}}).current;te(()=>{Z({start:0,end:Math.min(c.length-1,Math.max(0,Math.ceil(400/z)-1))})},[c.length]);const s=re(()=>{const r=new Set;for(const y of c){r.add(y.valueType);if(r.size>=8)break}return Array.from(r)},[c]);const g=()=>{W(!N)};const[n,M]=$(null);const x=re(()=>n==null?void 0:c.find(r=>r.id===n),[c,n]);const S=x?.depth;te(()=>{if(!L)return;L(x?le(x):null)},[x,L]);const k=U(r=>{M(y=>y===r.id?null:r.id)},[]);const E=I===void 0?void 0:I===null?"\0null":I.join(".");const p=_(E);te(()=>{if(E===p.current)return;p.current=E;if(E===void 0)return;if(I==null){M(null);return}const r=["root"];for(const y of I.slice(0,-1)){r.push(`${r[r.length-1]}.${y}`)}X(r);M(["root",...I].join("."))},[E,I,X]);const f=U(r=>{M(r.id);O?.(le(r))},[O]);const b=({item:r,index:y})=>i(Ne,{item:r,index:y,onToggleExpanded:Y,onSelect:k,isSelected:x?.id===r.id,selectable:L!=null,onRequestInlineEdit:f,isInlineEditing:B!=null&&B.join(".")===r.path.slice(1).join("."),inlineEditor:A?A(le(r)):null,testIDPrefix:j});const F=z;const J=r=>r.id;const H=d!==null&&d!==void 0&&(typeof d==="string"?d.length>0:typeof d==="number"||typeof d==="boolean"?true:Array.isArray(d)?d.length>0:typeof d==="object"?Object.keys(d).length>0:false);if(w){if(!H){return i(u,{style:{flex:1,justifyContent:"center",alignItems:"center",padding:20},children:i(P,{style:o.noDataText,children:"No data available"})})}return i(u,{style:{minHeight:C?40:c.length*z},children:C?i(u,{style:{flex:1,justifyContent:"center",alignItems:"center"},children:T(P,{style:o.loadingText,children:["Processing data... (raw mode, isProcessing=",String(C),")"]})}):T(u,{style:{position:"relative",height:c.length*z},children:[i(he,{items:c,visibleRange:{start:0,end:Math.max(0,c.length-1)},itemHeight:z,indentWidth:ae,activeDepth:S}),i(pe,{ref:K,"sentry-label":"ignore devtools data explorer list",data:c,renderItem:b,keyExtractor:J,showsVerticalScrollIndicator:true,contentContainerStyle:o.listContent,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false})]})})}if(!H){return T(u,{style:o.container,children:[i(u,{style:o.header,children:i(u,{style:o.headerRow,children:T(u,{style:{flex:1},children:[i(P,{style:o.title,children:e}),l&&i(P,{style:o.description,children:l})]})})}),i(u,{style:o.noDataContainer,children:i(P,{style:o.noDataText,children:"No data available"})})]})}return T(u,{style:o.container,children:[T(u,{style:o.header,children:[i(u,{style:o.headerRow,children:T(ie,{"sentry-label":"ignore devtools data explorer header toggle",onPress:g,hitSlop:ge,style:o.headerTouchable,children:[T(u,{style:{flex:1},children:[i(P,{style:o.title,children:e}),l&&i(P,{style:o.description,children:l})]}),i(u,{style:o.expanderMargin,children:i(Te,{expanded:N,onPress:g})})]})}),N&&s.length>0&&!w&&i(ze,{visibleTypes:s})]}),N&&i(je,{children:C?i(u,{style:o.loadingContainer,children:T(P,{style:o.loadingText,children:["Processing data... (isProcessing=",String(C),")"]})}):T(u,{style:{height:c.length*z,position:"relative"},children:[i(he,{items:c,visibleRange:q,itemHeight:z,indentWidth:ae,activeDepth:S}),i(pe,{ref:K,"sentry-label":"ignore devtools data explorer collapsed list",data:c,renderItem:b,keyExtractor:J,showsVerticalScrollIndicator:true,contentContainerStyle:o.listContent,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,onViewableItemsChanged:m,viewabilityConfig:t.current})]})})]})};