@buoy-gg/shared-ui 7.0.41 → 7.0.42

package/lib/commonjs/dataViewer/LiveExplorer.js

@@ -1,943 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LiveExplorer = LiveExplorer;
-exports.makeRootWriter = makeRootWriter;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _displayValue = require("../utils/displayValue.js");
-var _nightTheme = require("../ui/night/nightTheme.js");
-var _CopyButton = require("../ui/components/CopyButton.js");
-var _index = require("../icons/index.js");
-var _CyberpunkInput = require("./CyberpunkInput.js");
-var _nestedPath = require("./nestedPath.js");
-var _fonts = require("../ui/fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * The LIVE data editor — a recursive JSON tree whose leaves are inputs.
- *
- * Hoisted from @buoy-gg/react-query's `query-browser/Explorer.tsx` (the Data
- * Editor that tool has always shipped) so every tool edits data through ONE
- * implementation: react-query wraps it with a setQueryData writer, zustand
- * with a merge-only setState writer, storage with a whole-key writer. There
- * is no draft and no Save: each change writes through immediately (or on a
- * short debounce — see below) and the app reacts while you type.
- *
- * What a leaf renders as is the ORIGINAL value's type, which is also what
- * keeps edits type-safe without asking anything: strings and numbers get an
- * inline input (numbers with +/- steppers and a numeric keyboard), booleans a
- * one-tap TRUE/FALSE toggle, container members a delete ✕, arrays a clear-[]
- * button. Structural edits this tree can't express (add key, rename) belong
- * to the host's Raw escape hatch, not here.
- *
- * The one knob the RQ original doesn't use: `debounceMs`. A cache write is
- * free and unlogged, so RQ writes per keystroke (`debounceMs: 0`). Zustand
- * and storage writes are RECORDED — events timeline, per-store change counts,
- * the free tier's change cap — and storage's hit disk, so those hosts pass
- * ~300ms: the input echoes instantly, the write lands one beat after you stop
- * typing (flushed on blur/unmount), and "granola" is one recorded change
- * instead of seven. Discrete gestures — toggle, stepper, delete, clear —
- * always write immediately.
- */
-
-/**
- * How the explorer writes into whatever owns the data. The tree never mutates
- * anything itself — every edit is handed to the host through this.
- */
-
-// Stable constants to prevent re-renders [[memory:4875251]]
-const CHUNK_SIZE = 100;
-const HIT_SLOP_OPTIMIZED = {
-  top: 8,
-  bottom: 8,
-  left: 8,
-  right: 8
-};
-const EXPANDER_SIZE = 12;
-
-/** Section labels drawn with the heavier "main section" treatment. */
-const MAIN_SECTION_LABELS = ["DATA", "STATE", "VALUE", "QUERY", "QUERYKEY", "TYPES", "STATS", "OPTIONS", "OBSERVERS"];
-const slugPart = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-
-/** Default handle scheme; hosts pass their own to keep an existing namespace. */
-function defaultTestIDForPath(dataPath) {
-  return dataPath.length === 0 ? "buoy-live-explorer-root" : `buoy-live-explorer-${dataPath.map(slugPart).filter(Boolean).join("-")}`;
-}
-
-// Optimized chunking function moved to module scope [[memory:4875251]]
-const chunkArray = (array, size = CHUNK_SIZE) => {
-  if (size < 1 || array.length === 0) return [];
-  const result = [];
-  for (let i = 0; i < array.length; i += size) {
-    result.push(array.slice(i, i + size));
-  }
-  return result;
-};
-
-// Memoized Expander component for performance [[memory:4875251]]
-const Expander = /*#__PURE__*/(0, _react.memo)(({
-  expanded,
-  isFocused = false,
-  isMain = false
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.expanderIcon, isMain && styles.expanderIconMain, expanded ? styles.expanded : styles.collapsed],
-    children: expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? _nightTheme.night.color.accent : isMain ? _nightTheme.night.color.text : _nightTheme.night.color.textSecondary,
-      strokeWidth: 2.5
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? _nightTheme.night.color.accent : isMain ? _nightTheme.night.color.text : _nightTheme.night.color.textSecondary,
-      strokeWidth: 2.5
-    })
-  });
-});
-Expander.displayName = "Expander";
-const CopyButton = /*#__PURE__*/(0, _react.memo)(({
-  value,
-  isFocused = false
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-    value: value,
-    isFocused: isFocused,
-    buttonStyle: isFocused ? {
-      ...styles.buttonStyle,
-      ...styles.buttonStyleFocused
-    } : styles.buttonStyle
-  });
-});
-CopyButton.displayName = "CopyButton";
-
-// Memoized DeleteItemButton component [[memory:4875251]]
-const DeleteItemButton = /*#__PURE__*/(0, _react.memo)(({
-  dataPath,
-  writer,
-  testID,
-  isFocused = false
-}) => {
-  const handleDelete = (0, _react.useCallback)(() => {
-    writer?.remove?.(dataPath);
-  }, [writer, dataPath]);
-  if (!writer?.remove) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer delete button",
-    testID: `${testID}-delete`,
-    accessibilityRole: "button",
-    onPress: handleDelete,
-    style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
-    accessibilityLabel: "Delete item",
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Trash, {
-      size: 14,
-      strokeWidth: 2,
-      color: isFocused ? _nightTheme.night.color.danger : _nightTheme.night.color.danger + "CC"
-    })
-  });
-});
-DeleteItemButton.displayName = "DeleteItemButton";
-
-// Memoized ClearArrayButton component [[memory:4875251]]
-const ClearArrayButton = /*#__PURE__*/(0, _react.memo)(({
-  dataPath,
-  writer,
-  testID,
-  isFocused = false
-}) => {
-  const handleClear = (0, _react.useCallback)(() => {
-    writer?.update(dataPath, []);
-  }, [writer, dataPath]);
-  if (!writer) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer clear button",
-    testID: `${testID}-clear`,
-    style: [styles.clearButton, isFocused && styles.clearButtonFocused],
-    accessibilityRole: "button",
-    accessibilityLabel: "Remove all items",
-    "aria-label": "Remove all items",
-    onPress: handleClear,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.clearButtonText, {
-        color: isFocused ? _nightTheme.night.color.warning : _nightTheme.night.color.warning + "CC"
-      }],
-      children: "[]"
-    })
-  });
-});
-ClearArrayButton.displayName = "ClearArrayButton";
-
-// ToggleValueButton - not memoized because parent passes new dataPath array
-// each render which defeats memo anyway, and we need reliable re-renders when
-// value changes
-function ToggleValueButton({
-  dataPath,
-  writer,
-  testID,
-  value,
-  removable
-}) {
-  const handleClick = (0, _react.useCallback)(() => {
-    if (!writer) return;
-    const currentValue = typeof value === "boolean" ? value : false;
-    writer.update(dataPath, !currentValue);
-  }, [writer, dataPath, value]);
-  const handleDelete = (0, _react.useCallback)(() => {
-    writer?.remove?.(dataPath);
-  }, [writer, dataPath]);
-  if (!writer) return null;
-
-  // Pre-compute styles based on value state
-  const badgeStyle = value ? styles.toggleBadgeTrue : styles.toggleBadgeFalse;
-  const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
-
-  // Two sibling buttons: on web each renders a real <button>, and a delete
-  // button inside the toggle button is invalid HTML (its press would also
-  // flip the toggle).
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.toggleRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      "sentry-label": "ignore devtools explorer toggle button",
-      testID: `${testID}-toggle`,
-      accessibilityRole: "button",
-      accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
-      style: styles.modernToggleButton,
-      onPress: handleClick,
-      hitSlop: HIT_SLOP_OPTIMIZED,
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.toggleBadge, badgeStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.toggleBadgeText, textStyle],
-          children: value ? "TRUE" : "FALSE"
-        })
-      })
-    }), removable && writer.remove ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      "sentry-label": "ignore devtools explorer delete button in toggle",
-      testID: `${testID}-delete`,
-      accessibilityRole: "button",
-      onPress: handleDelete,
-      style: styles.deleteButtonInToggle,
-      accessibilityLabel: "Delete item",
-      hitSlop: HIT_SLOP_OPTIMIZED,
-      activeOpacity: 0.7,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Trash, {
-        size: 14,
-        strokeWidth: 2,
-        color: _nightTheme.night.color.danger + "CC"
-      })
-    }) : null]
-  });
-}
-// Optimized Explorer component following rule2 guidelines [[memory:4875251]]
-/**
- * Recursive live data explorer — see the module docstring. Used for both
- * editable and read-only JSON trees.
- */
-function LiveExplorer({
-  editable,
-  label,
-  value,
-  defaultExpanded,
-  writer,
-  dataPath,
-  itemsDeletable,
-  dataVersion = 0,
-  testIDForPath = defaultTestIDForPath,
-  debounceMs = 0
-}) {
-  const [isRowFocused, setIsRowFocused] = (0, _react.useState)(false);
-
-  // Local state for input value to handle typing properly
-  const [localInputValue, setLocalInputValue] = (0, _react.useState)("");
-
-  // Sync local state with prop value
-  // ⚠️ CRITICAL: Do NOT add localInputValue to the dependency array!
-  // Adding localInputValue causes a race condition where user edits get reverted:
-  // 1. User types "5101" → setLocalInputValue("5101")
-  // 2. The owner updates
-  // 3. useEffect fires because localInputValue changed
-  // 4. At this moment, value prop is still old (5100)
-  // 5. Syncs back to 5100, reverting user's change ❌
-  // Only sync when EXTERNAL changes happen (value, label, dataVersion)
-  (0, _react.useEffect)(() => {
-    if (value !== null && value !== undefined && (typeof value === "string" || typeof value === "number")) {
-      const newValue = value.toString();
-      setLocalInputValue(newValue);
-    }
-  }, [value, label, dataVersion]); // ⚠️ DO NOT add localInputValue here!
-
-  // Determine if this is a main section
-  const isMainSection = (0, _react.useMemo)(() => {
-    return MAIN_SECTION_LABELS.includes(label.toUpperCase());
-  }, [label]);
-
-  // Explorer's section is expanded or collapsed
-  const [isExpanded, setIsExpanded] = (0, _react.useState)((defaultExpanded || []).includes(label));
-  // Remove unnecessary useCallback - simple state setter [[memory:4875251]]
-  const toggleExpanded = () => setIsExpanded(old => !old);
-  const [expandedPages, setExpandedPages] = (0, _react.useState)([]);
-
-  // Optimized subEntries computation with early returns [[memory:4875251]]
-  const subEntries = (0, _react.useMemo)(() => {
-    if (value === null || value === undefined || typeof value !== "object") {
-      return [];
-    }
-    if (Array.isArray(value)) {
-      const limitedValue = value.length > 1000 ? value.slice(0, 1000) : value;
-      return limitedValue.map((d, i) => ({
-        label: i.toString(),
-        value: d
-      }));
-    }
-    if (value instanceof Map) {
-      const entries = Array.from(value.entries()).slice(0, 1000);
-      return entries.map(([key, val]) => ({
-        label: key.toString(),
-        value: val
-      }));
-    }
-    if (value instanceof Set) {
-      const entries = Array.from(value).slice(0, 1000);
-      return entries.map((val, i) => ({
-        label: i.toString(),
-        value: val
-      }));
-    }
-    const entries = Object.entries(value).slice(0, 1000);
-    return entries.map(([key, val]) => ({
-      label: key,
-      value: val
-    }));
-  }, [value]);
-
-  // Optimized valueType computation with early returns [[memory:4875251]]
-  const valueType = (0, _react.useMemo)(() => {
-    if (Array.isArray(value)) return "array";
-    if (value === null || typeof value !== "object") return typeof value;
-    if (value instanceof Map || value instanceof Set) return "Iterable";
-    return "object";
-  }, [value]);
-
-  // Optimized chunking with stable chunk size [[memory:4875251]]
-  const subEntryPages = (0, _react.useMemo)(() => {
-    return chunkArray(subEntries, CHUNK_SIZE);
-  }, [subEntries]);
-  const currentDataPath = dataPath ?? [];
-  const nodeTestID = testIDForPath(currentDataPath);
-
-  /**
-   * Whether THIS node may be removed: the parent said its members are
-   * deletable, the writer can delete at all, and the writer doesn't veto this
-   * path (zustand's top-level keys).
-   */
-  const removalAllowed = editable === true && itemsDeletable === true && writer?.remove != null && (writer.canRemove?.(currentDataPath) ?? true);
-
-  // Optimize handleChange using refs to avoid dependency arrays [[memory:4875251]]
-  const writerRef = (0, _react.useRef)(writer);
-  const dataPathRef = (0, _react.useRef)(currentDataPath);
-  const valueTypeRef = (0, _react.useRef)(valueType);
-  writerRef.current = writer;
-  dataPathRef.current = currentDataPath;
-  valueTypeRef.current = valueType;
-
-  /**
-   * Debounced-commit machinery for TYPED input. The pending edit is flushed
-   * by the timer, by blur, and by unmount — whichever comes first — so a
-   * half-typed value can't be lost, only briefly deferred.
-   */
-  const pendingRef = (0, _react.useRef)(null);
-  const timerRef = (0, _react.useRef)(null);
-  const flushPending = (0, _react.useCallback)(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    const pending = pendingRef.current;
-    pendingRef.current = null;
-    if (pending) writerRef.current?.update(pending.path, pending.value);
-  }, []);
-  (0, _react.useEffect)(() => () => flushPending(), [flushPending]);
-  const debounceMsRef = (0, _react.useRef)(debounceMs);
-  debounceMsRef.current = debounceMs;
-  const handleChange = (0, _react.useCallback)((isNumber, newValue) => {
-    // Update local state immediately for responsive typing
-    setLocalInputValue(newValue);
-    if (!writerRef.current) return;
-    if (isNumber && isNaN(Number(newValue))) return;
-    const updatedValue = valueTypeRef.current === "number" ? Number(newValue) : newValue;
-    const ms = debounceMsRef.current;
-    if (ms > 0) {
-      pendingRef.current = {
-        path: dataPathRef.current,
-        value: updatedValue
-      };
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(flushPending, ms);
-    } else {
-      writerRef.current.update(dataPathRef.current, updatedValue);
-    }
-  }, [flushPending, setLocalInputValue]);
-
-  /** Steppers are a decision, not typing — commit immediately. */
-  const stepNumber = (0, _react.useCallback)(delta => {
-    const currentNum = Number(localInputValue) || 0;
-    const next = currentNum + delta;
-    setLocalInputValue(String(next));
-    pendingRef.current = null;
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    writerRef.current?.update(dataPathRef.current, next);
-  }, [localInputValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.minWidthWrapper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.fullWidthMarginRight,
-      children: [subEntryPages.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.flexRowItemsCenterGap, isMainSection && styles.flexRowItemsCenterGapMain],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            "sentry-label": "ignore devtools explorer expander button",
-            style: styles.expanderButton,
-            testID: nodeTestID,
-            accessibilityRole: "button",
-            accessibilityLabel: `${label}, ${subEntries.length} ${subEntries.length === 1 ? "item" : "items"}`,
-            accessibilityState: {
-              expanded: isExpanded
-            },
-            onPress: toggleExpanded,
-            hitSlop: HIT_SLOP_OPTIMIZED,
-            activeOpacity: 0.6,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-              expanded: isExpanded,
-              isFocused: isRowFocused,
-              isMain: isMainSection
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.labelText, isRowFocused && styles.labelTextFocused, isMainSection && styles.labelTextMain],
-              children: label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.textGray500,
-              children: `${String(valueType).toLowerCase() === "iterable" ? "(Iterable) " : ""}${subEntries.length} ${subEntries.length > 1 ? `items` : `item`}`
-            })]
-          }), editable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.flexRowGapItemsCenter,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
-              value: value,
-              isFocused: isRowFocused
-            }), removalAllowed && /*#__PURE__*/(0, _jsxRuntime.jsx)(DeleteItemButton, {
-              writer: writer,
-              dataPath: currentDataPath,
-              testID: nodeTestID,
-              isFocused: isRowFocused
-            }), valueType === "array" && writer !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearArrayButton, {
-              writer: writer,
-              dataPath: currentDataPath,
-              testID: nodeTestID,
-              isFocused: isRowFocused
-            })]
-          })]
-        }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [subEntryPages.length === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.singleEntryContainer, isMainSection && styles.singleEntryContainerMain],
-            children: subEntries.map((entry, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveExplorer, {
-              defaultExpanded: defaultExpanded,
-              label: entry.label,
-              value: entry.value,
-              editable: editable,
-              dataPath: [...currentDataPath, entry.label],
-              writer: writer,
-              itemsDeletable: valueType === "array" || valueType === "Iterable" || valueType === "object",
-              dataVersion: dataVersion,
-              testIDForPath: testIDForPath,
-              debounceMs: debounceMs
-            }, entry.label + index))
-          }), subEntryPages.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.multiEntryContainer,
-            children: subEntryPages.map((entries, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: styles.relativeOutlineNone,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-                  "sentry-label": "ignore devtools explorer page toggle",
-                  onPress: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index]),
-                  style: styles.pageExpanderButton,
-                  hitSlop: HIT_SLOP_OPTIMIZED,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-                    expanded: expandedPages.includes(index)
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: styles.pageRangeText,
-                    children: ["[", index * CHUNK_SIZE, "...", index * CHUNK_SIZE + CHUNK_SIZE - 1, "]"]
-                  })]
-                }), expandedPages.includes(index) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                  style: styles.entriesContainer,
-                  children: entries.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveExplorer, {
-                    defaultExpanded: defaultExpanded,
-                    label: entry.label,
-                    value: entry.value,
-                    editable: editable,
-                    dataPath: [...currentDataPath, entry.label],
-                    writer: writer,
-                    dataVersion: dataVersion,
-                    testIDForPath: testIDForPath,
-                    debounceMs: debounceMs
-                  }, entry.label))
-                })]
-              })
-            }, index))
-          })]
-        })]
-      }), subEntryPages.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.flexRowGapFullWidth,
-        children: [editable && writer !== undefined && (valueType === "string" || valueType === "number" || valueType === "boolean") ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [editable && writer && (valueType === "string" || valueType === "number") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.nebulaInputWrapper,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CyberpunkInput.CyberpunkInput, {
-              label: label,
-              testID: `${nodeTestID}-input`,
-              accessibilityLabel: `${label}, editable value`,
-              style: [valueType === "number" ? styles.textNumber : styles.textString],
-              keyboardType: valueType === "number" ? "numeric" : "default",
-              value: localInputValue,
-              onChangeText: newValue => handleChange(valueType === "number", newValue),
-              onFocus: () => setIsRowFocused(true),
-              onBlur: () => {
-                // The pending debounced edit rides along with focus
-                // leaving the field — nothing typed is ever dropped.
-                flushPending();
-                setIsRowFocused(false);
-              },
-              showNumberControls: valueType === "number",
-              onIncrement: () => stepNumber(1),
-              onDecrement: () => stepNumber(-1),
-              showDeleteButton: removalAllowed,
-              onDelete: () => {
-                writer?.remove?.(currentDataPath);
-              }
-            })
-          }), valueType === "boolean" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.booleanRowContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.booleanLabel,
-              children: label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.booleanToggleWrapper,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleValueButton, {
-                writer: writer,
-                dataPath: currentDataPath,
-                testID: nodeTestID,
-                value: value,
-                removable: removalAllowed
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.text344054,
-            children: label
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            testID: `${nodeTestID}-value`,
-            style: styles.displayValueText,
-            children: (0, _displayValue.displayValue)(value)
-          })]
-        }), editable && removalAllowed && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/(0, _jsxRuntime.jsx)(DeleteItemButton, {
-          writer: writer,
-          dataPath: currentDataPath,
-          testID: nodeTestID,
-          isFocused: isRowFocused
-        })]
-      })]
-    })
-  });
-}
-
-/** A writer for plain local data — host supplies get/set of the whole root. */
-function makeRootWriter(options) {
-  return {
-    update: (path, value) => {
-      options.setRoot((0, _nestedPath.updateNestedDataByPath)(options.getRoot(), path, value));
-    },
-    remove: path => {
-      options.setRoot((0, _nestedPath.deleteNestedDataByPath)(options.getRoot(), path));
-    },
-    canRemove: options.canRemove
-  };
-}
-const styles = _reactNative.StyleSheet.create({
-  buttonStyle: {
-    backgroundColor: _nightTheme.night.color.surface + "E6",
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.textSecondary + "33",
-    borderRadius: 6,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2
-  },
-  buttonStyleFocused: {
-    borderColor: _nightTheme.night.color.accent + "CC",
-    backgroundColor: _nightTheme.night.color.accent + "26",
-    shadowColor: _nightTheme.night.color.accent,
-    shadowOpacity: 0.3,
-    shadowRadius: 4
-  },
-  deleteButton: {
-    backgroundColor: _nightTheme.night.color.danger + "1A",
-    borderColor: _nightTheme.night.color.danger + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    shadowColor: _nightTheme.night.color.danger,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  deleteButtonFocused: {
-    borderColor: _nightTheme.night.color.danger + "CC",
-    backgroundColor: _nightTheme.night.color.danger + "33",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  deleteButtonInToggle: {
-    backgroundColor: _nightTheme.night.color.danger + "1A",
-    borderColor: _nightTheme.night.color.danger + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    shadowColor: _nightTheme.night.color.danger,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButton: {
-    backgroundColor: _nightTheme.night.color.warning + "1A",
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.warning + "4D",
-    borderRadius: 6,
-    flexDirection: "row",
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    zIndex: 10,
-    shadowColor: _nightTheme.night.color.warning,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButtonFocused: {
-    borderColor: _nightTheme.night.color.warning + "CC",
-    backgroundColor: _nightTheme.night.color.warning + "33",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  clearButtonText: {
-    fontSize: 12,
-    fontWeight: "700",
-    fontFamily: _fonts.monoFont
-  },
-  expanderIcon: {
-    width: 18,
-    height: 18,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 1,
-    backgroundColor: _nightTheme.night.color.textSecondary + "14",
-    borderRadius: 3
-  },
-  expanderIconMain: {
-    backgroundColor: _nightTheme.night.color.textSecondary + "1A",
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: _nightTheme.night.color.textSecondary + "33"
-  },
-  expanded: {
-    transform: [{
-      rotate: "0deg"
-    }]
-  },
-  collapsed: {
-    transform: [{
-      rotate: "0deg"
-    }]
-  },
-  minWidthWrapper: {
-    minWidth: 180,
-    fontSize: 11,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    marginVertical: 0.5
-  },
-  fullWidthMarginRight: {
-    position: "relative",
-    width: "100%",
-    marginRight: 1
-  },
-  flexRowItemsCenterGap: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    marginVertical: 1,
-    borderRadius: 4,
-    backgroundColor: _nightTheme.night.color.surface + "66",
-    borderWidth: 0.5,
-    borderColor: _nightTheme.night.color.textSecondary + "1A"
-  },
-  flexRowItemsCenterGapMain: {
-    backgroundColor: _nightTheme.night.color.surface + "E6",
-    borderLeftWidth: 2.5,
-    borderLeftColor: _nightTheme.night.color.textSecondary + "80",
-    borderColor: _nightTheme.night.color.textSecondary + "26",
-    paddingVertical: 5,
-    paddingHorizontal: 8,
-    marginBottom: 3,
-    borderWidth: 1,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 3
-  },
-  expanderButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    paddingVertical: 1,
-    paddingHorizontal: 2,
-    gap: 6,
-    borderWidth: 0,
-    minHeight: 24,
-    flex: 1
-  },
-  labelText: {
-    color: _nightTheme.night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    marginRight: 4,
-    fontFamily: _fonts.monoFont,
-    letterSpacing: 0.4
-  },
-  labelTextFocused: {
-    color: _nightTheme.night.color.text
-  },
-  labelTextMain: {
-    color: _nightTheme.night.color.text,
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.6
-  },
-  textGray500: {
-    color: _nightTheme.night.color.textTertiary,
-    fontSize: 10,
-    fontWeight: "400",
-    fontFamily: _fonts.monoFont,
-    opacity: 0.7
-  },
-  pageRangeText: {
-    color: _nightTheme.night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: _fonts.monoFont
-  },
-  flexRowGapItemsCenter: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 2
-  },
-  singleEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: _nightTheme.night.color.textSecondary + "40"
-  },
-  singleEntryContainerMain: {
-    borderLeftColor: _nightTheme.night.color.textSecondary + "4D",
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  multiEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: _nightTheme.night.color.textSecondary + "40"
-  },
-  relativeOutlineNone: {
-    position: "relative"
-  },
-  pageExpanderButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _nightTheme.night.color.surface + "66",
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    gap: 6,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: _nightTheme.night.color.textSecondary + "1A",
-    marginBottom: 2,
-    minHeight: 24
-  },
-  entriesContainer: {
-    marginLeft: 2,
-    paddingLeft: 8,
-    marginTop: 2,
-    borderLeftWidth: 1.5,
-    borderLeftColor: _nightTheme.night.color.textSecondary + "40"
-  },
-  textNumber: {
-    color: _nightTheme.night.color.text,
-    fontWeight: "600",
-    fontFamily: _fonts.monoFont
-  },
-  textString: {
-    color: _nightTheme.night.color.text,
-    fontFamily: _fonts.monoFont
-  },
-  flexRowGapFullWidth: {
-    flexDirection: "row",
-    width: "100%",
-    alignItems: "center",
-    marginVertical: 1,
-    gap: 6,
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 3
-  },
-  text344054: {
-    color: _nightTheme.night.color.textSecondary,
-    fontWeight: "600",
-    fontSize: 9,
-    minWidth: 50,
-    fontFamily: _fonts.monoFont,
-    letterSpacing: 0.4,
-    opacity: 0.8
-  },
-  nebulaInputWrapper: {
-    flex: 1,
-    width: "100%",
-    position: "relative"
-  },
-  displayValueText: {
-    flex: 1,
-    color: _nightTheme.night.color.text,
-    fontWeight: "400",
-    fontFamily: _fonts.monoFont,
-    fontSize: 12,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.textTertiary + "66",
-    minHeight: 34
-  },
-  toggleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  modernToggleButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.textTertiary + "99",
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginVertical: 2,
-    minHeight: 34,
-    gap: 8
-  },
-  toggleBadge: {
-    marginLeft: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 4,
-    borderWidth: 1
-  },
-  toggleBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    textTransform: "uppercase",
-    letterSpacing: 0.8,
-    fontFamily: _fonts.monoFont
-  },
-  toggleBadgeTrue: {
-    backgroundColor: _nightTheme.night.color.accent + "1A",
-    borderColor: _nightTheme.night.color.accent + "4D"
-  },
-  toggleBadgeFalse: {
-    backgroundColor: _nightTheme.night.color.textTertiary + "1A",
-    borderColor: _nightTheme.night.color.textTertiary + "4D"
-  },
-  toggleTextTrue: {
-    color: _nightTheme.night.color.accent,
-    fontWeight: "600"
-  },
-  toggleTextFalse: {
-    color: _nightTheme.night.color.textSecondary,
-    fontWeight: "500"
-  },
-  booleanRowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    gap: 8,
-    paddingVertical: 2
-  },
-  booleanLabel: {
-    color: _nightTheme.night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: _fonts.monoFont,
-    letterSpacing: 0.4,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  booleanToggleWrapper: {
-    flex: 1
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.LiveExplorer=LiveExplorer;exports.makeRootWriter=makeRootWriter;var _react=require("react");var _reactNative=require("react-native");var _displayValue=require("../utils/displayValue.js");var _nightTheme=require("../ui/night/nightTheme.js");var _CopyButton=require("../ui/components/CopyButton.js");var _index=require("../icons/index.js");var _CyberpunkInput=require("./CyberpunkInput.js");var _nestedPath=require("./nestedPath.js");var _fonts=require("../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");const CHUNK_SIZE=100;const HIT_SLOP_OPTIMIZED={top:8,bottom:8,left:8,right:8};const EXPANDER_SIZE=12;const MAIN_SECTION_LABELS=["DATA","STATE","VALUE","QUERY","QUERYKEY","TYPES","STATS","OPTIONS","OBSERVERS"];const slugPart=t=>t.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");function defaultTestIDForPath(t){return t.length===0?"buoy-live-explorer-root":`buoy-live-explorer-${t.map(slugPart).filter(Boolean).join("-")}`}const chunkArray=(t,o=CHUNK_SIZE)=>{if(o<1||t.length===0)return[];const e=[];for(let n=0;n<t.length;n+=o){e.push(t.slice(n,n+o))}return e};const Expander=(0,_react.memo)(({expanded:t,isFocused:o=false,isMain:e=false})=>{return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.expanderIcon,e&&styles.expanderIconMain,t?styles.expanded:styles.collapsed],children:t?(0,_jsxRuntime.jsx)(_index.ChevronDown,{size:e?14:EXPANDER_SIZE,color:o?_nightTheme.night.color.accent:e?_nightTheme.night.color.text:_nightTheme.night.color.textSecondary,strokeWidth:2.5}):(0,_jsxRuntime.jsx)(_index.ChevronRight,{size:e?14:EXPANDER_SIZE,color:o?_nightTheme.night.color.accent:e?_nightTheme.night.color.text:_nightTheme.night.color.textSecondary,strokeWidth:2.5})})});Expander.displayName="Expander";const CopyButton=(0,_react.memo)(({value:t,isFocused:o=false})=>{return(0,_jsxRuntime.jsx)(_CopyButton.CopyButton,{value:t,isFocused:o,buttonStyle:o?{...styles.buttonStyle,...styles.buttonStyleFocused}:styles.buttonStyle})});CopyButton.displayName="CopyButton";const DeleteItemButton=(0,_react.memo)(({dataPath:t,writer:o,testID:e,isFocused:n=false})=>{const a=(0,_react.useCallback)(()=>{o?.remove?.(t)},[o,t]);if(!o?.remove)return null;return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer delete button",testID:`${e}-delete`,accessibilityRole:"button",onPress:a,style:[styles.deleteButton,n&&styles.deleteButtonFocused],accessibilityLabel:"Delete item",hitSlop:HIT_SLOP_OPTIMIZED,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_index.Trash,{size:14,strokeWidth:2,color:n?_nightTheme.night.color.danger:_nightTheme.night.color.danger+"CC"})})});DeleteItemButton.displayName="DeleteItemButton";const ClearArrayButton=(0,_react.memo)(({dataPath:t,writer:o,testID:e,isFocused:n=false})=>{const a=(0,_react.useCallback)(()=>{o?.update(t,[])},[o,t]);if(!o)return null;return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer clear button",testID:`${e}-clear`,style:[styles.clearButton,n&&styles.clearButtonFocused],accessibilityRole:"button",accessibilityLabel:"Remove all items","aria-label":"Remove all items",onPress:a,hitSlop:HIT_SLOP_OPTIMIZED,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.clearButtonText,{color:n?_nightTheme.night.color.warning:_nightTheme.night.color.warning+"CC"}],children:"[]"})})});ClearArrayButton.displayName="ClearArrayButton";function ToggleValueButton({dataPath:t,writer:o,testID:e,value:n,removable:a}){const I=(0,_react.useCallback)(()=>{if(!o)return;const p=typeof n==="boolean"?n:false;o.update(t,!p)},[o,t,n]);const W=(0,_react.useCallback)(()=>{o?.remove?.(t)},[o,t]);if(!o)return null;const f=n?styles.toggleBadgeTrue:styles.toggleBadgeFalse;const x=n?styles.toggleTextTrue:styles.toggleTextFalse;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.toggleRow,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer toggle button",testID:`${e}-toggle`,accessibilityRole:"button",accessibilityLabel:`${t[t.length-1]??"value"}, ${n?"true":"false"}`,style:styles.modernToggleButton,onPress:I,hitSlop:HIT_SLOP_OPTIMIZED,activeOpacity:.8,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.toggleBadge,f],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.toggleBadgeText,x],children:n?"TRUE":"FALSE"})})}),a&&o.remove?(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer delete button in toggle",testID:`${e}-delete`,accessibilityRole:"button",onPress:W,style:styles.deleteButtonInToggle,accessibilityLabel:"Delete item",hitSlop:HIT_SLOP_OPTIMIZED,activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_index.Trash,{size:14,strokeWidth:2,color:_nightTheme.night.color.danger+"CC"})}):null]})}function LiveExplorer({editable:t,label:o,value:e,defaultExpanded:n,writer:a,dataPath:I,itemsDeletable:W,dataVersion:f=0,testIDForPath:x=defaultTestIDForPath,debounceMs:p=0}){const[b,F]=(0,_react.useState)(false);const[D,w]=(0,_react.useState)("");(0,_react.useEffect)(()=>{if(e!==null&&e!==void 0&&(typeof e==="string"||typeof e==="number")){const i=e.toString();w(i)}},[e,o,f]);const S=(0,_react.useMemo)(()=>{return MAIN_SECTION_LABELS.includes(o.toUpperCase())},[o]);const[B,k]=(0,_react.useState)((n||[]).includes(o));const O=()=>k(i=>!i);const[V,A]=(0,_react.useState)([]);const u=(0,_react.useMemo)(()=>{if(e===null||e===void 0||typeof e!=="object"){return[]}if(Array.isArray(e)){const r=e.length>1e3?e.slice(0,1e3):e;return r.map((l,d)=>({label:d.toString(),value:l}))}if(e instanceof Map){const r=Array.from(e.entries()).slice(0,1e3);return r.map(([l,d])=>({label:l.toString(),value:d}))}if(e instanceof Set){const r=Array.from(e).slice(0,1e3);return r.map((l,d)=>({label:d.toString(),value:l}))}const i=Object.entries(e).slice(0,1e3);return i.map(([r,l])=>({label:r,value:l}))},[e]);const s=(0,_react.useMemo)(()=>{if(Array.isArray(e))return"array";if(e===null||typeof e!=="object")return typeof e;if(e instanceof Map||e instanceof Set)return"Iterable";return"object"},[e]);const y=(0,_react.useMemo)(()=>{return chunkArray(u,CHUNK_SIZE)},[u]);const c=I??[];const h=x(c);const R=t===true&&W===true&&a?.remove!=null&&(a.canRemove?.(c)??true);const m=(0,_react.useRef)(a);const T=(0,_react.useRef)(c);const E=(0,_react.useRef)(s);m.current=a;T.current=c;E.current=s;const j=(0,_react.useRef)(null);const g=(0,_react.useRef)(null);const C=(0,_react.useCallback)(()=>{if(g.current){clearTimeout(g.current);g.current=null}const i=j.current;j.current=null;if(i)m.current?.update(i.path,i.value)},[]);(0,_react.useEffect)(()=>()=>C(),[C]);const v=(0,_react.useRef)(p);v.current=p;const N=(0,_react.useCallback)((i,r)=>{w(r);if(!m.current)return;if(i&&isNaN(Number(r)))return;const l=E.current==="number"?Number(r):r;const d=v.current;if(d>0){j.current={path:T.current,value:l};if(g.current)clearTimeout(g.current);g.current=setTimeout(C,d)}else{m.current.update(T.current,l)}},[C,w]);const L=(0,_react.useCallback)(i=>{const r=Number(D)||0;const l=r+i;w(String(l));j.current=null;if(g.current){clearTimeout(g.current);g.current=null}m.current?.update(T.current,l)},[D]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.minWidthWrapper,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.fullWidthMarginRight,children:[y.length>0&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.flexRowItemsCenterGap,S&&styles.flexRowItemsCenterGapMain],children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer expander button",style:styles.expanderButton,testID:h,accessibilityRole:"button",accessibilityLabel:`${o}, ${u.length} ${u.length===1?"item":"items"}`,accessibilityState:{expanded:B},onPress:O,hitSlop:HIT_SLOP_OPTIMIZED,activeOpacity:.6,children:[(0,_jsxRuntime.jsx)(Expander,{expanded:B,isFocused:b,isMain:S}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.labelText,b&&styles.labelTextFocused,S&&styles.labelTextMain],children:o}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.textGray500,children:`${String(s).toLowerCase()==="iterable"?"(Iterable) ":""}${u.length} ${u.length>1?`items`:`item`}`})]}),t&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.flexRowGapItemsCenter,children:[(0,_jsxRuntime.jsx)(CopyButton,{value:e,isFocused:b}),R&&(0,_jsxRuntime.jsx)(DeleteItemButton,{writer:a,dataPath:c,testID:h,isFocused:b}),s==="array"&&a!==void 0&&(0,_jsxRuntime.jsx)(ClearArrayButton,{writer:a,dataPath:c,testID:h,isFocused:b})]})]}),B&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[y.length===1&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.singleEntryContainer,S&&styles.singleEntryContainerMain],children:u.map((i,r)=>(0,_jsxRuntime.jsx)(LiveExplorer,{defaultExpanded:n,label:i.label,value:i.value,editable:t,dataPath:[...c,i.label],writer:a,itemsDeletable:s==="array"||s==="Iterable"||s==="object",dataVersion:f,testIDForPath:x,debounceMs:p},i.label+r))}),y.length>1&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.multiEntryContainer,children:y.map((i,r)=>(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.relativeOutlineNone,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools explorer page toggle",onPress:()=>A(l=>l.includes(r)?l.filter(d=>d!==r):[...l,r]),style:styles.pageExpanderButton,hitSlop:HIT_SLOP_OPTIMIZED,children:[(0,_jsxRuntime.jsx)(Expander,{expanded:V.includes(r)}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.pageRangeText,children:["[",r*CHUNK_SIZE,"...",r*CHUNK_SIZE+CHUNK_SIZE-1,"]"]})]}),V.includes(r)&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.entriesContainer,children:i.map(l=>(0,_jsxRuntime.jsx)(LiveExplorer,{defaultExpanded:n,label:l.label,value:l.value,editable:t,dataPath:[...c,l.label],writer:a,dataVersion:f,testIDForPath:x,debounceMs:p},l.label))})]})},r))})]})]}),y.length===0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.flexRowGapFullWidth,children:[t&&a!==void 0&&(s==="string"||s==="number"||s==="boolean")?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t&&a&&(s==="string"||s==="number")&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nebulaInputWrapper,children:(0,_jsxRuntime.jsx)(_CyberpunkInput.CyberpunkInput,{label:o,testID:`${h}-input`,accessibilityLabel:`${o}, editable value`,style:[s==="number"?styles.textNumber:styles.textString],keyboardType:s==="number"?"numeric":"default",value:D,onChangeText:i=>N(s==="number",i),onFocus:()=>F(true),onBlur:()=>{C();F(false)},showNumberControls:s==="number",onIncrement:()=>L(1),onDecrement:()=>L(-1),showDeleteButton:R,onDelete:()=>{a?.remove?.(c)}})}),s==="boolean"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.booleanRowContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.booleanLabel,children:o}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.booleanToggleWrapper,children:(0,_jsxRuntime.jsx)(ToggleValueButton,{writer:a,dataPath:c,testID:h,value:e,removable:R})})]})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.text344054,children:o}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${h}-value`,style:styles.displayValueText,children:(0,_displayValue.displayValue)(e)})]}),t&&R&&s!=="string"&&s!=="number"&&s!=="boolean"&&(0,_jsxRuntime.jsx)(DeleteItemButton,{writer:a,dataPath:c,testID:h,isFocused:b})]})]})})}function makeRootWriter(t){return{update:(o,e)=>{t.setRoot((0,_nestedPath.updateNestedDataByPath)(t.getRoot(),o,e))},remove:o=>{t.setRoot((0,_nestedPath.deleteNestedDataByPath)(t.getRoot(),o))},canRemove:t.canRemove}}const styles=_reactNative.StyleSheet.create({buttonStyle:{backgroundColor:_nightTheme.night.color.surface+"E6",borderWidth:1,borderColor:_nightTheme.night.color.textSecondary+"33",borderRadius:6,flexDirection:"row",alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2},buttonStyleFocused:{borderColor:_nightTheme.night.color.accent+"CC",backgroundColor:_nightTheme.night.color.accent+"26",shadowColor:_nightTheme.night.color.accent,shadowOpacity:.3,shadowRadius:4},deleteButton:{backgroundColor:_nightTheme.night.color.danger+"1A",borderColor:_nightTheme.night.color.danger+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",shadowColor:_nightTheme.night.color.danger,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},deleteButtonFocused:{borderColor:_nightTheme.night.color.danger+"CC",backgroundColor:_nightTheme.night.color.danger+"33",shadowOpacity:.3,shadowRadius:5},deleteButtonInToggle:{backgroundColor:_nightTheme.night.color.danger+"1A",borderColor:_nightTheme.night.color.danger+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,shadowColor:_nightTheme.night.color.danger,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButton:{backgroundColor:_nightTheme.night.color.warning+"1A",borderWidth:1,borderColor:_nightTheme.night.color.warning+"4D",borderRadius:6,flexDirection:"row",padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",zIndex:10,shadowColor:_nightTheme.night.color.warning,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButtonFocused:{borderColor:_nightTheme.night.color.warning+"CC",backgroundColor:_nightTheme.night.color.warning+"33",shadowOpacity:.3,shadowRadius:5},clearButtonText:{fontSize:12,fontWeight:"700",fontFamily:_fonts.monoFont},expanderIcon:{width:18,height:18,alignItems:"center",justifyContent:"center",marginRight:1,backgroundColor:_nightTheme.night.color.textSecondary+"14",borderRadius:3},expanderIconMain:{backgroundColor:_nightTheme.night.color.textSecondary+"1A",width:20,height:20,borderRadius:4,borderWidth:.5,borderColor:_nightTheme.night.color.textSecondary+"33"},expanded:{transform:[{rotate:"0deg"}]},collapsed:{transform:[{rotate:"0deg"}]},minWidthWrapper:{minWidth:180,fontSize:11,flexDirection:"row",flexWrap:"wrap",width:"100%",marginVertical:.5},fullWidthMarginRight:{position:"relative",width:"100%",marginRight:1},flexRowItemsCenterGap:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3,paddingHorizontal:6,marginVertical:1,borderRadius:4,backgroundColor:_nightTheme.night.color.surface+"66",borderWidth:.5,borderColor:_nightTheme.night.color.textSecondary+"1A"},flexRowItemsCenterGapMain:{backgroundColor:_nightTheme.night.color.surface+"E6",borderLeftWidth:2.5,borderLeftColor:_nightTheme.night.color.textSecondary+"80",borderColor:_nightTheme.night.color.textSecondary+"26",paddingVertical:5,paddingHorizontal:8,marginBottom:3,borderWidth:1,shadowColor:"#000",shadowOffset:{width:0,height:0},shadowOpacity:.08,shadowRadius:3},expanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:"transparent",paddingVertical:1,paddingHorizontal:2,gap:6,borderWidth:0,minHeight:24,flex:1},labelText:{color:_nightTheme.night.color.textSecondary,fontSize:10,fontWeight:"600",marginRight:4,fontFamily:_fonts.monoFont,letterSpacing:.4},labelTextFocused:{color:_nightTheme.night.color.text},labelTextMain:{color:_nightTheme.night.color.text,fontSize:11,fontWeight:"700",letterSpacing:.6},textGray500:{color:_nightTheme.night.color.textTertiary,fontSize:10,fontWeight:"400",fontFamily:_fonts.monoFont,opacity:.7},pageRangeText:{color:_nightTheme.night.color.textSecondary,fontSize:10,fontWeight:"600",fontFamily:_fonts.monoFont},flexRowGapItemsCenter:{flexDirection:"row",alignItems:"center",gap:4,paddingLeft:2},singleEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:_nightTheme.night.color.textSecondary+"40"},singleEntryContainerMain:{borderLeftColor:_nightTheme.night.color.textSecondary+"4D",marginLeft:4,paddingLeft:10},multiEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:_nightTheme.night.color.textSecondary+"40"},relativeOutlineNone:{position:"relative"},pageExpanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:_nightTheme.night.color.surface+"66",paddingVertical:3,paddingHorizontal:6,gap:6,borderRadius:4,borderWidth:.5,borderColor:_nightTheme.night.color.textSecondary+"1A",marginBottom:2,minHeight:24},entriesContainer:{marginLeft:2,paddingLeft:8,marginTop:2,borderLeftWidth:1.5,borderLeftColor:_nightTheme.night.color.textSecondary+"40"},textNumber:{color:_nightTheme.night.color.text,fontWeight:"600",fontFamily:_fonts.monoFont},textString:{color:_nightTheme.night.color.text,fontFamily:_fonts.monoFont},flexRowGapFullWidth:{flexDirection:"row",width:"100%",alignItems:"center",marginVertical:1,gap:6,paddingHorizontal:4,paddingVertical:2,borderRadius:3},text344054:{color:_nightTheme.night.color.textSecondary,fontWeight:"600",fontSize:9,minWidth:50,fontFamily:_fonts.monoFont,letterSpacing:.4,opacity:.8},nebulaInputWrapper:{flex:1,width:"100%",position:"relative"},displayValueText:{flex:1,color:_nightTheme.night.color.text,fontWeight:"400",fontFamily:_fonts.monoFont,fontSize:12,paddingVertical:6,paddingHorizontal:10,borderRadius:6,borderWidth:1,borderColor:_nightTheme.night.color.textTertiary+"66",minHeight:34},toggleRow:{flexDirection:"row",alignItems:"center",gap:6},modernToggleButton:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:6,borderWidth:1,borderColor:_nightTheme.night.color.textTertiary+"99",paddingHorizontal:8,paddingVertical:6,marginVertical:2,minHeight:34,gap:8},toggleBadge:{marginLeft:6,paddingHorizontal:6,paddingVertical:3,borderRadius:4,borderWidth:1},toggleBadgeText:{fontSize:9,fontWeight:"700",textTransform:"uppercase",letterSpacing:.8,fontFamily:_fonts.monoFont},toggleBadgeTrue:{backgroundColor:_nightTheme.night.color.accent+"1A",borderColor:_nightTheme.night.color.accent+"4D"},toggleBadgeFalse:{backgroundColor:_nightTheme.night.color.textTertiary+"1A",borderColor:_nightTheme.night.color.textTertiary+"4D"},toggleTextTrue:{color:_nightTheme.night.color.accent,fontWeight:"600"},toggleTextFalse:{color:_nightTheme.night.color.textSecondary,fontWeight:"500"},booleanRowContainer:{flexDirection:"row",alignItems:"center",width:"100%",gap:8,paddingVertical:2},booleanLabel:{color:_nightTheme.night.color.textSecondary,fontSize:10,fontWeight:"600",fontFamily:_fonts.monoFont,letterSpacing:.4,minWidth:60,flexShrink:0},booleanToggleWrapper:{flex:1}});