@buoy-gg/network 7.0.41 → 7.0.42

package/lib/commonjs/network/components/response-editor/Explorer.web.js

@@ -1,1136 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Explorer;
-var _react = require("react");
-var _DataViewer = require("../DataViewer.web");
-var _updateNestedDataByPath = require("./updateNestedDataByPath");
-var _deleteNestedDataByPath = require("./deleteNestedDataByPath");
-var _editorContext = require("./editorContext");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Explorer.web — DOM twin of response-editor/Explorer.tsx (the response-body
- * tree: preview and editor as ONE surface, ported from the React Query tool's
- * Explorer). Same recursion, same chunked pages (CHUNK_SIZE 100), same
- * local-input-state race guard, and the same landing spot for edits: the
- * `onChange` from `ResponseEditorContext`.
- *
- * REUSED, not forked (all platform-free):
- *  - `updateNestedDataByPath` / `deleteNestedDataByPath` — the pure tree ops.
- *  - `editorContext` (`ResponseEditorContext` / `useResponseEditor`) — the
- *    root-document + onChange seam.
- *  - `CopyButton` — the DOM twin already ported in DataViewer.web (F3), the
- *    same way native Explorer reuses shared-ui's CopyButton.
- *
- * NOTE on DataViewer.web: native Explorer and native VirtualizedDataExplorer
- * are SEPARATE trees (different lineage — this one is the React Query port,
- * the viewer is the flat-row virtualized explorer) sharing only the copy
- * button and `displayValue`. The web twins mirror that exact relationship:
- * this file recurses like native Explorer, and shares DataViewer.web's
- * CopyButton rather than its flatten pipeline.
- *
- * shared-ui RN chrome is replicated as DOM with provenance (web consumers
- * resolve `@buoy-gg/shared-ui` to a minimal shim):
- *  - `buoyColors` — inlined verbatim subset from
- *    shared/src/ui/gameUI/constants/gameUIColors.ts.
- *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
- *  - `CyberpunkInput` — inlined DOM twin below, values from
- *    shared/src/dataViewer/CyberpunkInput.tsx.
- *
- * Intentional deviations (all logged):
- *  - CyberpunkInput's RN `Animated` glitch loops (flicker overlay, x/y jitter,
- *    scale pulse) are not ported — focus still swaps the border/label/corner
- *    accents to the primary color, which is the state the animation decorates.
- *  - `displayValue`'s minimal-SuperJSON serialization → JSON.stringify (same
- *    deviation DataViewer.web logs; identical output for JSON payloads).
- *  - `hitSlop` has no DOM equivalent — buttons keep their natural hit areas.
- *
- * @platform React DOM Web
- */
-
-// Stable constants to prevent re-renders — native Explorer, verbatim.
-const CHUNK_SIZE = 100;
-const EXPANDER_SIZE = 12;
-
-// =============================
-// Native palette (provenance)
-// =============================
-
-/** buoyColors subset — shared/src/ui/gameUI/constants/gameUIColors.ts, verbatim. */
-const buoyColors = {
-  card: "#1A1A1A",
-  text: "#E0E0E0",
-  textSecondary: "#A0A0A0",
-  textMuted: "#888888",
-  primary: "#20C997",
-  warning: "#FFA94D",
-  error: "#EF4444"
-};
-
-// =============================
-// Inline lucide icons (shared-ui icons are lucide re-exports)
-// =============================
-
-function Svg({
-  size = 14,
-  color = "currentColor",
-  strokeWidth = 2,
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    style: {
-      flexShrink: 0,
-      display: "block"
-    },
-    children: children
-  });
-}
-const ChevronRight = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-const ChevronDown = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m6 9 6 6 6-6"
-  })
-});
-const ChevronUp = p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
-  ...p,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m18 15-6-6-6 6"
-  })
-});
-const Trash = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
-  ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-  })]
-});
-
-/** displayValue twin — JSON.stringify-based, see the deviations log. */
-function displayValue(value) {
-  if (value === undefined) return "undefined";
-  if (typeof value === "bigint") return `${value}n`;
-  if (typeof value === "function") return String(value).slice(0, 50);
-  if (typeof value === "symbol") return String(value);
-  try {
-    return JSON.stringify(value) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-
-// Optimized chunking function moved to module scope — native, verbatim.
-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 — native styles.expanderIcon(+Main).
-const Expander = /*#__PURE__*/(0, _react.memo)(({
-  expanded,
-  isFocused = false,
-  isMain = false
-}) => {
-  const color = isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary;
-  const Chevron = expanded ? ChevronDown : ChevronRight;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    style: {
-      ...styles.expanderIcon,
-      ...(isMain ? styles.expanderIconMain : null)
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: color,
-      strokeWidth: 2.5
-    })
-  });
-});
-Expander.displayName = "Expander";
-
-// Local wrapper for the shared CopyButton — same backward-compat shim as
-// native (28×28 card-fill box; focused = primary ring + tint).
-const CopyButton = /*#__PURE__*/(0, _react.memo)(({
-  value,
-  isFocused = false
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataViewer.CopyButton, {
-    value: value,
-    size: 14,
-    buttonStyle: isFocused ? {
-      ...styles.buttonStyle,
-      ...styles.buttonStyleFocused
-    } : styles.buttonStyle
-  });
-});
-CopyButton.displayName = "CopyButton";
-
-// Memoized DeleteItemButton component — native, verbatim behavior.
-const DeleteItemButton = /*#__PURE__*/(0, _react.memo)(({
-  dataPath,
-  isFocused = false
-}) => {
-  const editor = (0, _editorContext.useResponseEditor)();
-  const handleDelete = (0, _react.useCallback)(() => {
-    if (!editor) return;
-    editor.onChange((0, _deleteNestedDataByPath.deleteNestedDataByPath)(editor.root, dataPath));
-  }, [editor, dataPath]);
-  if (!editor) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    onClick: handleDelete,
-    style: {
-      ...styles.deleteButton,
-      ...(isFocused ? styles.deleteButtonFocused : null)
-    },
-    "aria-label": "Delete item",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trash, {
-      size: 14,
-      strokeWidth: 2,
-      color: isFocused ? buoyColors.error : buoyColors.error + "CC"
-    })
-  });
-});
-DeleteItemButton.displayName = "DeleteItemButton";
-
-// Memoized ClearArrayButton component — native, verbatim behavior.
-const ClearArrayButton = /*#__PURE__*/(0, _react.memo)(({
-  dataPath,
-  isFocused = false
-}) => {
-  const editor = (0, _editorContext.useResponseEditor)();
-  const handleClear = (0, _react.useCallback)(() => {
-    if (!editor) return;
-    editor.onChange((0, _updateNestedDataByPath.updateNestedDataByPath)(editor.root, dataPath, []));
-  }, [editor, dataPath]);
-  if (!editor) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    style: {
-      ...styles.clearButton,
-      ...(isFocused ? styles.clearButtonFocused : null)
-    },
-    "aria-label": "Remove all items",
-    onClick: handleClear,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        ...styles.clearButtonText,
-        color: isFocused ? buoyColors.warning : buoyColors.warning + "CC"
-      },
-      children: "[]"
-    })
-  });
-});
-ClearArrayButton.displayName = "ClearArrayButton";
-
-// ToggleValueButton — not memoized (same reasoning as native: the parent
-// passes a fresh dataPath array each render, which defeats memo anyway).
-function ToggleValueButton({
-  dataPath,
-  value,
-  itemsDeletable
-}) {
-  const editor = (0, _editorContext.useResponseEditor)();
-  const handleClick = (0, _react.useCallback)(() => {
-    if (!editor) return;
-    const currentValue = typeof value === "boolean" ? value : false;
-    editor.onChange((0, _updateNestedDataByPath.updateNestedDataByPath)(editor.root, dataPath, !currentValue));
-  }, [editor, dataPath, value]);
-  const handleDelete = (0, _react.useCallback)(() => {
-    if (!editor) return;
-    editor.onChange((0, _deleteNestedDataByPath.deleteNestedDataByPath)(editor.root, dataPath));
-  }, [editor, dataPath]);
-  if (!editor) return null;
-
-  // Pre-compute styles based on value state — native, verbatim.
-  const badgeStyle = value ? styles.toggleBadgeTrue : styles.toggleBadgeFalse;
-  const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    role: "button",
-    tabIndex: 0,
-    style: styles.modernToggleButton,
-    onClick: handleClick,
-    onKeyDown: e => {
-      if (e.key === "Enter" || e.key === " ") handleClick();
-    },
-    "aria-label": value ? "Set to false" : "Set to true",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        ...styles.toggleBadge,
-        ...badgeStyle
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.toggleBadgeText,
-          ...textStyle
-        },
-        children: value ? "TRUE" : "FALSE"
-      })
-    }), itemsDeletable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      onClick: e => {
-        // The delete button nests inside the toggle's press target on
-        // native too; stop the toggle from also firing.
-        e.stopPropagation();
-        handleDelete();
-      },
-      style: styles.deleteButtonInToggle,
-      "aria-label": "Delete item",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trash, {
-        size: 14,
-        strokeWidth: 2,
-        color: buoyColors.error + "CC"
-      })
-    })]
-  });
-}
-
-// =============================
-// CyberpunkInput twin (shared/src/dataViewer/CyberpunkInput.tsx)
-// =============================
-
-/**
- * The inline value input: uppercase mono label, bordered field, optional
- * number steppers and delete button, corner accents. Focus swaps everything to
- * the primary color — the RN glitch animation is not ported (see the
- * deviations log).
- */
-function CyberpunkInputWeb({
-  label,
-  value,
-  isNumber,
-  onChangeText,
-  onFocus,
-  onBlur,
-  showNumberControls = false,
-  onIncrement,
-  onDecrement,
-  showDeleteButton = false,
-  onDelete,
-  "aria-label": ariaLabel
-}) {
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const cornerStyle = corner => ({
-    ...styles.cornerAccent,
-    ...corner,
-    ...(isFocused ? styles.cornerAccentFocused : null)
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.cyberContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.cyberRow,
-      children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        style: {
-          ...styles.cyberLabel,
-          ...(isFocused ? styles.cyberLabelFocused : null)
-        },
-        children: label.toUpperCase()
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: {
-          ...styles.cyberInputContainer,
-          opacity: isFocused ? 1 : 0.6,
-          borderColor: isFocused ? buoyColors.primary : buoyColors.textMuted + "4D"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          value: value,
-          onChange: e => onChangeText(e.target.value),
-          onFocus: () => {
-            setIsFocused(true);
-            onFocus?.();
-          },
-          onBlur: () => {
-            setIsFocused(false);
-            onBlur?.();
-          },
-          inputMode: isNumber ? "decimal" : undefined,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "none",
-          spellCheck: false,
-          "aria-label": ariaLabel ?? "Data input field for editing values",
-          style: {
-            ...styles.cyberInput,
-            ...(isNumber ? styles.textNumber : styles.textString)
-          }
-        }), showNumberControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          style: styles.numberControls,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            style: {
-              ...styles.controlButton,
-              ...(isFocused ? styles.controlButtonFocused : null)
-            },
-            onClick: onIncrement,
-            "aria-label": "Increment value",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronUp, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            style: {
-              ...styles.controlButton,
-              ...(isFocused ? styles.controlButtonFocused : null)
-            },
-            onClick: onDecrement,
-            "aria-label": "Decrement value",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronDown, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          })]
-        }), showDeleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          style: {
-            ...styles.cyberDeleteButton,
-            ...(isFocused ? styles.cyberDeleteButtonFocused : null)
-          },
-          onClick: onDelete,
-          "aria-label": "Delete item",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trash, {
-            size: 14,
-            strokeWidth: 2,
-            color: isFocused ? buoyColors.error : buoyColors.error + "CC"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: cornerStyle({
-            top: -1,
-            left: 5
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: cornerStyle({
-            top: -1,
-            right: 5
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: cornerStyle({
-            bottom: -1,
-            left: 5
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          style: cornerStyle({
-            bottom: -1,
-            right: 5
-          })
-        })]
-      })]
-    })
-  });
-}
-/**
- * Recursive data explorer — the editable JSON tree. Same prop contract,
- * derivation order and edit semantics as the native file.
- */
-function Explorer({
-  editable,
-  label,
-  value,
-  defaultExpanded,
-  dataPath,
-  itemsDeletable,
-  dataVersion = 0
-}) {
-  const editor = (0, _editorContext.useResponseEditor)();
-  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 (type "5101" → store updates → effect fires while the prop is
-  // still 5100 → syncs back to 5100). Only sync when EXTERNAL changes happen
-  // (value, label, dataVersion) — carried over from native unchanged.
-  (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 — native, verbatim.
-  const isMainSection = (0, _react.useMemo)(() => {
-    const upperLabel = label.toUpperCase();
-    return ["DATA", "QUERY", "QUERYKEY", "TYPES", "STATS", "OPTIONS", "OBSERVERS"].includes(upperLabel);
-  }, [label]);
-
-  // Explorer's section is expanded or collapsed
-  const [isExpanded, setIsExpanded] = (0, _react.useState)((defaultExpanded || []).includes(label));
-  const toggleExpanded = () => setIsExpanded(old => !old);
-  const [expandedPages, setExpandedPages] = (0, _react.useState)([]);
-
-  // Optimized subEntries computation — native, verbatim (1000-entry cap).
-  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: String(key),
-        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 — native, verbatim.
-  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]);
-  const subEntryPages = (0, _react.useMemo)(() => {
-    return chunkArray(subEntries, CHUNK_SIZE);
-  }, [subEntries]);
-  const currentDataPath = dataPath ?? [];
-
-  // Optimize handleChange using refs to avoid dependency arrays — native.
-  const editorRef = (0, _react.useRef)(editor);
-  const dataPathRef = (0, _react.useRef)(currentDataPath);
-  const valueTypeRef = (0, _react.useRef)(valueType);
-  editorRef.current = editor;
-  dataPathRef.current = currentDataPath;
-  valueTypeRef.current = valueType;
-  const handleChange = (0, _react.useCallback)((isNumber, newValue) => {
-    // Update local state immediately for responsive typing
-    setLocalInputValue(newValue);
-    const current = editorRef.current;
-    if (!current) return;
-    if (isNumber && isNaN(Number(newValue))) return;
-    const updatedValue = valueTypeRef.current === "number" ? Number(newValue) : newValue;
-    current.onChange((0, _updateNestedDataByPath.updateNestedDataByPath)(current.root, dataPathRef.current, updatedValue));
-  }, [setLocalInputValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: styles.minWidthWrapper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: styles.fullWidthMarginRight,
-      children: [subEntryPages.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          style: {
-            ...styles.flexRowItemsCenterGap,
-            ...(isMainSection ? styles.flexRowItemsCenterGapMain : null)
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-            type: "button",
-            style: styles.expanderButton,
-            onClick: toggleExpanded,
-            "aria-expanded": isExpanded,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-              expanded: isExpanded,
-              isFocused: isRowFocused,
-              isMain: isMainSection
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: {
-                ...styles.labelText,
-                ...(isRowFocused ? styles.labelTextFocused : null),
-                ...(isMainSection ? styles.labelTextMain : null)
-              },
-              children: label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.textGray500,
-              children: `${String(valueType).toLowerCase() === "iterable" ? "(Iterable) " : ""}${subEntries.length} ${subEntries.length > 1 ? `items` : `item`}`
-            })]
-          }), editable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            style: styles.flexRowGapItemsCenter,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
-              value: value,
-              isFocused: isRowFocused
-            }), itemsDeletable && editor !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(DeleteItemButton, {
-              dataPath: currentDataPath,
-              isFocused: isRowFocused
-            }), valueType === "array" && editor !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearArrayButton, {
-              dataPath: currentDataPath,
-              isFocused: isRowFocused
-            })]
-          })]
-        }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [subEntryPages.length === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              ...styles.singleEntryContainer,
-              ...(isMainSection ? styles.singleEntryContainerMain : null)
-            },
-            children: subEntries.map((entry, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Explorer, {
-              defaultExpanded: defaultExpanded,
-              label: entry.label,
-              value: entry.value,
-              editable: editable,
-              dataPath: [...currentDataPath, entry.label],
-              itemsDeletable: valueType === "array" || valueType === "Iterable" || valueType === "object",
-              dataVersion: dataVersion
-            }, entry.label + index))
-          }), subEntryPages.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.multiEntryContainer,
-            children: subEntryPages.map((entries, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                style: styles.relativeOutlineNone,
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-                  type: "button",
-                  onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index]),
-                  style: styles.pageExpanderButton,
-                  "aria-expanded": expandedPages.includes(index),
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
-                    expanded: expandedPages.includes(index)
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    style: styles.pageRangeText,
-                    children: ["[", index * CHUNK_SIZE, "...", index * CHUNK_SIZE + CHUNK_SIZE - 1, "]"]
-                  })]
-                }), expandedPages.includes(index) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  style: styles.entriesContainer,
-                  children: entries.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsx)(Explorer, {
-                    defaultExpanded: defaultExpanded,
-                    label: entry.label,
-                    value: entry.value,
-                    editable: editable,
-                    dataPath: [...currentDataPath, entry.label],
-                    dataVersion: dataVersion
-                  }, entry.label))
-                })]
-              })
-            }, index))
-          })]
-        })]
-      }), subEntryPages.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.flexRowGapFullWidth,
-        children: [editable && editor !== null && (valueType === "string" || valueType === "number" || valueType === "boolean") ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [editable && editor && (valueType === "string" || valueType === "number") && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.nebulaInputWrapper,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CyberpunkInputWeb, {
-              label: label,
-              value: localInputValue,
-              isNumber: valueType === "number",
-              onChangeText: newValue => handleChange(valueType === "number", newValue),
-              onFocus: () => setIsRowFocused(true),
-              onBlur: () => setIsRowFocused(false),
-              showNumberControls: valueType === "number",
-              onIncrement: () => {
-                const currentNum = Number(localInputValue) || 0;
-                handleChange(true, String(currentNum + 1));
-              },
-              onDecrement: () => {
-                const currentNum = Number(localInputValue) || 0;
-                handleChange(true, String(currentNum - 1));
-              },
-              showDeleteButton: itemsDeletable,
-              onDelete: () => {
-                editor.onChange((0, _deleteNestedDataByPath.deleteNestedDataByPath)(editor.root, currentDataPath));
-              }
-            })
-          }), valueType === "boolean" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            style: styles.booleanRowContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              style: styles.booleanLabel,
-              children: label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              style: styles.booleanToggleWrapper,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleValueButton, {
-                dataPath: currentDataPath,
-                value: value,
-                itemsDeletable: itemsDeletable
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.text344054,
-            children: label
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            style: styles.displayValueText,
-            children: displayValue(value)
-          })]
-        }), editable && itemsDeletable && editor !== null && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/(0, _jsxRuntime.jsx)(DeleteItemButton, {
-          dataPath: currentDataPath,
-          isFocused: isRowFocused
-        })]
-      })]
-    })
-  });
-}
-
-// Values mirror the native StyleSheet blocks 1:1 (Explorer.tsx +
-// CyberpunkInput.tsx).
-const styles = {
-  buttonStyle: {
-    backgroundColor: buoyColors.card + "E6",
-    border: `1px solid ${buoyColors.textSecondary}33`,
-    borderRadius: 6,
-    display: "inline-flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    boxSizing: "border-box",
-    position: "relative",
-    padding: 0
-  },
-  buttonStyleFocused: {
-    border: `1px solid ${buoyColors.primary}CC`,
-    backgroundColor: buoyColors.primary + "26"
-  },
-  deleteButton: {
-    backgroundColor: buoyColors.error + "1A",
-    border: `1px solid ${buoyColors.error}4D`,
-    borderRadius: 6,
-    padding: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    boxSizing: "border-box",
-    position: "relative",
-    cursor: "pointer",
-    margin: 0,
-    flexShrink: 0
-  },
-  deleteButtonFocused: {
-    border: `1px solid ${buoyColors.error}CC`,
-    backgroundColor: buoyColors.error + "33"
-  },
-  deleteButtonInToggle: {
-    backgroundColor: buoyColors.error + "1A",
-    border: `1px solid ${buoyColors.error}4D`,
-    borderRadius: 6,
-    padding: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    boxSizing: "border-box",
-    cursor: "pointer",
-    margin: 0
-  },
-  clearButton: {
-    backgroundColor: buoyColors.warning + "1A",
-    border: `1px solid ${buoyColors.warning}4D`,
-    borderRadius: 6,
-    display: "inline-flex",
-    flexDirection: "row",
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    boxSizing: "border-box",
-    position: "relative",
-    zIndex: 10,
-    cursor: "pointer",
-    margin: 0,
-    flexShrink: 0
-  },
-  clearButtonFocused: {
-    border: `1px solid ${buoyColors.warning}CC`,
-    backgroundColor: buoyColors.warning + "33"
-  },
-  clearButtonText: {
-    fontSize: 12,
-    fontWeight: 700,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  expanderIcon: {
-    width: 18,
-    height: 18,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 1,
-    backgroundColor: buoyColors.textSecondary + "14",
-    borderRadius: 3,
-    boxSizing: "border-box",
-    flexShrink: 0
-  },
-  expanderIconMain: {
-    backgroundColor: buoyColors.textSecondary + "1A",
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    border: `0.5px solid ${buoyColors.textSecondary}33`
-  },
-  minWidthWrapper: {
-    minWidth: 180,
-    fontSize: 11,
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    margin: "0.5px 0"
-  },
-  fullWidthMarginRight: {
-    position: "relative",
-    width: "100%",
-    marginRight: 1
-  },
-  flexRowItemsCenterGap: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "3px 6px",
-    margin: "1px 0",
-    borderRadius: 4,
-    backgroundColor: buoyColors.card + "66",
-    border: `0.5px solid ${buoyColors.textSecondary}1A`,
-    boxSizing: "border-box"
-  },
-  flexRowItemsCenterGapMain: {
-    backgroundColor: buoyColors.card + "E6",
-    border: `1px solid ${buoyColors.textSecondary}26`,
-    borderLeft: `2.5px solid ${buoyColors.textSecondary}80`,
-    padding: "5px 8px",
-    marginBottom: 3
-  },
-  expanderButton: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    padding: "1px 2px",
-    gap: 6,
-    border: "none",
-    minHeight: 24,
-    flex: 1,
-    minWidth: 0,
-    cursor: "pointer",
-    margin: 0,
-    textAlign: "left",
-    font: "inherit"
-  },
-  labelText: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: 600,
-    marginRight: 4,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.4
-  },
-  labelTextFocused: {
-    color: buoyColors.text
-  },
-  labelTextMain: {
-    color: buoyColors.text,
-    fontSize: 11,
-    fontWeight: 700,
-    letterSpacing: 0.6
-  },
-  textGray500: {
-    color: buoyColors.textMuted,
-    fontSize: 10,
-    fontWeight: 400,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    opacity: 0.7
-  },
-  pageRangeText: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: 600,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  flexRowGapItemsCenter: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 2
-  },
-  singleEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeft: `1.5px solid ${buoyColors.textSecondary}40`
-  },
-  singleEntryContainerMain: {
-    borderLeft: `1.5px solid ${buoyColors.textSecondary}4D`,
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  multiEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeft: `1.5px solid ${buoyColors.textSecondary}40`
-  },
-  relativeOutlineNone: {
-    position: "relative"
-  },
-  pageExpanderButton: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.card + "66",
-    padding: "3px 6px",
-    gap: 6,
-    borderRadius: 4,
-    border: `0.5px solid ${buoyColors.textSecondary}1A`,
-    marginBottom: 2,
-    minHeight: 24,
-    cursor: "pointer",
-    margin: "0 0 2px 0",
-    width: "100%",
-    boxSizing: "border-box",
-    textAlign: "left",
-    font: "inherit"
-  },
-  entriesContainer: {
-    marginLeft: 2,
-    paddingLeft: 8,
-    marginTop: 2,
-    borderLeft: `1.5px solid ${buoyColors.textSecondary}40`
-  },
-  textNumber: {
-    color: buoyColors.text,
-    fontWeight: 600,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  textString: {
-    color: buoyColors.text,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  flexRowGapFullWidth: {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    alignItems: "center",
-    margin: "1px 0",
-    gap: 6,
-    padding: "2px 4px",
-    borderRadius: 3,
-    boxSizing: "border-box"
-  },
-  text344054: {
-    color: buoyColors.textSecondary,
-    fontWeight: 600,
-    fontSize: 9,
-    minWidth: 50,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.4,
-    opacity: 0.8,
-    flexShrink: 0
-  },
-  nebulaInputWrapper: {
-    flex: 1,
-    width: "100%",
-    position: "relative",
-    minWidth: 0
-  },
-  displayValueText: {
-    flex: 1,
-    minWidth: 0,
-    color: buoyColors.text,
-    fontWeight: 400,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    fontSize: 12,
-    padding: "6px 10px",
-    borderRadius: 6,
-    border: `1px solid ${buoyColors.textMuted}66`,
-    minHeight: 34,
-    boxSizing: "border-box",
-    overflowWrap: "anywhere"
-  },
-  modernToggleButton: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 6,
-    border: `1px solid ${buoyColors.textMuted}99`,
-    padding: "6px 8px",
-    margin: "2px 0",
-    minHeight: 34,
-    gap: 8,
-    boxSizing: "border-box",
-    cursor: "pointer"
-  },
-  toggleBadge: {
-    marginLeft: 6,
-    padding: "3px 6px",
-    borderRadius: 4,
-    display: "inline-flex"
-  },
-  toggleBadgeText: {
-    fontSize: 9,
-    fontWeight: 700,
-    textTransform: "uppercase",
-    letterSpacing: 0.8,
-    fontFamily: "ui-monospace, Menlo, monospace"
-  },
-  toggleBadgeTrue: {
-    backgroundColor: buoyColors.primary + "1A",
-    border: `1px solid ${buoyColors.primary}4D`
-  },
-  toggleBadgeFalse: {
-    backgroundColor: buoyColors.textMuted + "1A",
-    border: `1px solid ${buoyColors.textMuted}4D`
-  },
-  toggleTextTrue: {
-    color: buoyColors.primary,
-    fontWeight: 600
-  },
-  toggleTextFalse: {
-    color: buoyColors.textSecondary,
-    fontWeight: 500
-  },
-  booleanRowContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    gap: 8,
-    padding: "2px 0"
-  },
-  booleanLabel: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: 600,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    letterSpacing: 0.4,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  booleanToggleWrapper: {
-    flex: 1,
-    minWidth: 0
-  },
-  // CyberpunkInput.tsx styles, verbatim.
-  cyberContainer: {
-    width: "100%",
-    margin: "3px 0"
-  },
-  cyberRow: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  cyberLabel: {
-    fontSize: 10,
-    fontWeight: 600,
-    fontFamily: "ui-monospace, Menlo, monospace",
-    color: buoyColors.textMuted,
-    letterSpacing: 0.5,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  cyberLabelFocused: {
-    color: buoyColors.primary
-  },
-  cyberInputContainer: {
-    flex: 1,
-    minWidth: 0,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderRadius: 6,
-    position: "relative",
-    minHeight: 34,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    boxSizing: "border-box"
-  },
-  cyberInput: {
-    flex: 1,
-    minWidth: 0,
-    padding: "6px 10px",
-    fontSize: 12,
-    backgroundColor: "transparent",
-    zIndex: 1,
-    border: "none",
-    outline: "none"
-  },
-  numberControls: {
-    display: "inline-flex",
-    flexDirection: "row",
-    gap: 2,
-    paddingRight: 4,
-    zIndex: 2
-  },
-  controlButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    border: `1px solid ${buoyColors.textMuted}33`,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxSizing: "border-box",
-    background: "none",
-    cursor: "pointer",
-    padding: 0,
-    margin: 0
-  },
-  controlButtonFocused: {
-    border: `1px solid ${buoyColors.primary}CC`
-  },
-  cyberDeleteButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    border: `1px solid ${buoyColors.error}4D`,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxSizing: "border-box",
-    background: "none",
-    cursor: "pointer",
-    padding: 0,
-    marginRight: 4,
-    zIndex: 2
-  },
-  cyberDeleteButtonFocused: {
-    border: `1px solid ${buoyColors.error}CC`
-  },
-  cornerAccent: {
-    position: "absolute",
-    width: 6,
-    height: 1.2,
-    backgroundColor: buoyColors.textMuted + "CC",
-    zIndex: 0
-  },
-  cornerAccentFocused: {
-    backgroundColor: buoyColors.primary
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=Explorer;var _react=require("react");var _DataViewer=require("../DataViewer.web");var _updateNestedDataByPath=require("./updateNestedDataByPath");var _deleteNestedDataByPath=require("./deleteNestedDataByPath");var _editorContext=require("./editorContext");var _jsxRuntime=require("react/jsx-runtime");const CHUNK_SIZE=100;const EXPANDER_SIZE=12;const buoyColors={card:"#1A1A1A",text:"#E0E0E0",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997",warning:"#FFA94D",error:"#EF4444"};function Svg({size:t=14,color:n="currentColor",strokeWidth:e=2,children:r}){return(0,_jsxRuntime.jsx)("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:n,strokeWidth:e,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:r})}const ChevronRight=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m9 18 6-6-6-6"})});const ChevronDown=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m6 9 6 6 6-6"})});const ChevronUp=t=>(0,_jsxRuntime.jsx)(Svg,{...t,children:(0,_jsxRuntime.jsx)("path",{d:"m18 15-6-6-6 6"})});const Trash=t=>(0,_jsxRuntime.jsxs)(Svg,{...t,children:[(0,_jsxRuntime.jsx)("path",{d:"M3 6h18"}),(0,_jsxRuntime.jsx)("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),(0,_jsxRuntime.jsx)("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"})]});function displayValue(t){if(t===void 0)return"undefined";if(typeof t==="bigint")return`${t}n`;if(typeof t==="function")return String(t).slice(0,50);if(typeof t==="symbol")return String(t);try{return JSON.stringify(t)??String(t)}catch{return String(t)}}const chunkArray=(t,n=CHUNK_SIZE)=>{if(n<1||t.length===0)return[];const e=[];for(let r=0;r<t.length;r+=n){e.push(t.slice(r,r+n))}return e};const Expander=(0,_react.memo)(({expanded:t,isFocused:n=false,isMain:e=false})=>{const r=n?buoyColors.primary:e?buoyColors.text:buoyColors.textSecondary;const x=t?ChevronDown:ChevronRight;return(0,_jsxRuntime.jsx)("span",{style:{...styles.expanderIcon,...e?styles.expanderIconMain:null},children:(0,_jsxRuntime.jsx)(x,{size:e?14:EXPANDER_SIZE,color:r,strokeWidth:2.5})})});Expander.displayName="Expander";const CopyButton=(0,_react.memo)(({value:t,isFocused:n=false})=>{return(0,_jsxRuntime.jsx)(_DataViewer.CopyButton,{value:t,size:14,buttonStyle:n?{...styles.buttonStyle,...styles.buttonStyleFocused}:styles.buttonStyle})});CopyButton.displayName="CopyButton";const DeleteItemButton=(0,_react.memo)(({dataPath:t,isFocused:n=false})=>{const e=(0,_editorContext.useResponseEditor)();const r=(0,_react.useCallback)(()=>{if(!e)return;e.onChange((0,_deleteNestedDataByPath.deleteNestedDataByPath)(e.root,t))},[e,t]);if(!e)return null;return(0,_jsxRuntime.jsx)("button",{type:"button",onClick:r,style:{...styles.deleteButton,...n?styles.deleteButtonFocused:null},"aria-label":"Delete item",children:(0,_jsxRuntime.jsx)(Trash,{size:14,strokeWidth:2,color:n?buoyColors.error:buoyColors.error+"CC"})})});DeleteItemButton.displayName="DeleteItemButton";const ClearArrayButton=(0,_react.memo)(({dataPath:t,isFocused:n=false})=>{const e=(0,_editorContext.useResponseEditor)();const r=(0,_react.useCallback)(()=>{if(!e)return;e.onChange((0,_updateNestedDataByPath.updateNestedDataByPath)(e.root,t,[]))},[e,t]);if(!e)return null;return(0,_jsxRuntime.jsx)("button",{type:"button",style:{...styles.clearButton,...n?styles.clearButtonFocused:null},"aria-label":"Remove all items",onClick:r,children:(0,_jsxRuntime.jsx)("span",{style:{...styles.clearButtonText,color:n?buoyColors.warning:buoyColors.warning+"CC"},children:"[]"})})});ClearArrayButton.displayName="ClearArrayButton";function ToggleValueButton({dataPath:t,value:n,itemsDeletable:e}){const r=(0,_editorContext.useResponseEditor)();const x=(0,_react.useCallback)(()=>{if(!r)return;const s=typeof n==="boolean"?n:false;r.onChange((0,_updateNestedDataByPath.updateNestedDataByPath)(r.root,t,!s))},[r,t,n]);const g=(0,_react.useCallback)(()=>{if(!r)return;r.onChange((0,_deleteNestedDataByPath.deleteNestedDataByPath)(r.root,t))},[r,t]);if(!r)return null;const b=n?styles.toggleBadgeTrue:styles.toggleBadgeFalse;const c=n?styles.toggleTextTrue:styles.toggleTextFalse;return(0,_jsxRuntime.jsxs)("div",{role:"button",tabIndex:0,style:styles.modernToggleButton,onClick:x,onKeyDown:s=>{if(s.key==="Enter"||s.key===" ")x()},"aria-label":n?"Set to false":"Set to true",children:[(0,_jsxRuntime.jsx)("span",{style:{...styles.toggleBadge,...b},children:(0,_jsxRuntime.jsx)("span",{style:{...styles.toggleBadgeText,...c},children:n?"TRUE":"FALSE"})}),e&&(0,_jsxRuntime.jsx)("button",{type:"button",onClick:s=>{s.stopPropagation();g()},style:styles.deleteButtonInToggle,"aria-label":"Delete item",children:(0,_jsxRuntime.jsx)(Trash,{size:14,strokeWidth:2,color:buoyColors.error+"CC"})})]})}function CyberpunkInputWeb({label:t,value:n,isNumber:e,onChangeText:r,onFocus:x,onBlur:g,showNumberControls:b=false,onIncrement:c,onDecrement:s,showDeleteButton:w=false,onDelete:h,"aria-label":m}){const[d,f]=(0,_react.useState)(false);const y=C=>({...styles.cornerAccent,...C,...d?styles.cornerAccentFocused:null});return(0,_jsxRuntime.jsx)("div",{style:styles.cyberContainer,children:(0,_jsxRuntime.jsxs)("div",{style:styles.cyberRow,children:[t?(0,_jsxRuntime.jsx)("span",{style:{...styles.cyberLabel,...d?styles.cyberLabelFocused:null},children:t.toUpperCase()}):null,(0,_jsxRuntime.jsxs)("div",{style:{...styles.cyberInputContainer,opacity:d?1:.6,borderColor:d?buoyColors.primary:buoyColors.textMuted+"4D"},children:[(0,_jsxRuntime.jsx)("input",{value:n,onChange:C=>r(C.target.value),onFocus:()=>{f(true);x?.()},onBlur:()=>{f(false);g?.()},inputMode:e?"decimal":void 0,autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:false,"aria-label":m??"Data input field for editing values",style:{...styles.cyberInput,...e?styles.textNumber:styles.textString}}),b&&(0,_jsxRuntime.jsxs)("span",{style:styles.numberControls,children:[(0,_jsxRuntime.jsx)("button",{type:"button",style:{...styles.controlButton,...d?styles.controlButtonFocused:null},onClick:c,"aria-label":"Increment value",children:(0,_jsxRuntime.jsx)(ChevronUp,{size:14,strokeWidth:2.5,color:d?buoyColors.primary:buoyColors.textMuted})}),(0,_jsxRuntime.jsx)("button",{type:"button",style:{...styles.controlButton,...d?styles.controlButtonFocused:null},onClick:s,"aria-label":"Decrement value",children:(0,_jsxRuntime.jsx)(ChevronDown,{size:14,strokeWidth:2.5,color:d?buoyColors.primary:buoyColors.textMuted})})]}),w&&(0,_jsxRuntime.jsx)("button",{type:"button",style:{...styles.cyberDeleteButton,...d?styles.cyberDeleteButtonFocused:null},onClick:h,"aria-label":"Delete item",children:(0,_jsxRuntime.jsx)(Trash,{size:14,strokeWidth:2,color:d?buoyColors.error:buoyColors.error+"CC"})}),(0,_jsxRuntime.jsx)("span",{style:y({top:-1,left:5})}),(0,_jsxRuntime.jsx)("span",{style:y({top:-1,right:5})}),(0,_jsxRuntime.jsx)("span",{style:y({bottom:-1,left:5})}),(0,_jsxRuntime.jsx)("span",{style:y({bottom:-1,right:5})})]})]})})}function Explorer({editable:t,label:n,value:e,defaultExpanded:r,dataPath:x,itemsDeletable:g,dataVersion:b=0}){const c=(0,_editorContext.useResponseEditor)();const[s,w]=(0,_react.useState)(false);const[h,m]=(0,_react.useState)("");(0,_react.useEffect)(()=>{if(e!==null&&e!==void 0&&(typeof e==="string"||typeof e==="number")){const i=e.toString();m(i)}},[e,n,b]);const d=(0,_react.useMemo)(()=>{const i=n.toUpperCase();return["DATA","QUERY","QUERYKEY","TYPES","STATS","OPTIONS","OBSERVERS"].includes(i)},[n]);const[f,y]=(0,_react.useState)((r||[]).includes(n));const C=()=>y(i=>!i);const[B,F]=(0,_react.useState)([]);const S=(0,_react.useMemo)(()=>{if(e===null||e===void 0||typeof e!=="object"){return[]}if(Array.isArray(e)){const o=e.length>1e3?e.slice(0,1e3):e;return o.map((l,p)=>({label:p.toString(),value:l}))}if(e instanceof Map){const o=Array.from(e.entries()).slice(0,1e3);return o.map(([l,p])=>({label:String(l),value:p}))}if(e instanceof Set){const o=Array.from(e).slice(0,1e3);return o.map((l,p)=>({label:p.toString(),value:l}))}const i=Object.entries(e).slice(0,1e3);return i.map(([o,l])=>({label:o,value:l}))},[e]);const a=(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 j=(0,_react.useMemo)(()=>{return chunkArray(S,CHUNK_SIZE)},[S]);const u=x??[];const R=(0,_react.useRef)(c);const I=(0,_react.useRef)(u);const D=(0,_react.useRef)(a);R.current=c;I.current=u;D.current=a;const k=(0,_react.useCallback)((i,o)=>{m(o);const l=R.current;if(!l)return;if(i&&isNaN(Number(o)))return;const p=D.current==="number"?Number(o):o;l.onChange((0,_updateNestedDataByPath.updateNestedDataByPath)(l.root,I.current,p))},[m]);return(0,_jsxRuntime.jsx)("div",{style:styles.minWidthWrapper,children:(0,_jsxRuntime.jsxs)("div",{style:styles.fullWidthMarginRight,children:[j.length>0&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)("div",{style:{...styles.flexRowItemsCenterGap,...d?styles.flexRowItemsCenterGapMain:null},children:[(0,_jsxRuntime.jsxs)("button",{type:"button",style:styles.expanderButton,onClick:C,"aria-expanded":f,children:[(0,_jsxRuntime.jsx)(Expander,{expanded:f,isFocused:s,isMain:d}),(0,_jsxRuntime.jsx)("span",{style:{...styles.labelText,...s?styles.labelTextFocused:null,...d?styles.labelTextMain:null},children:n}),(0,_jsxRuntime.jsx)("span",{style:styles.textGray500,children:`${String(a).toLowerCase()==="iterable"?"(Iterable) ":""}${S.length} ${S.length>1?`items`:`item`}`})]}),t&&(0,_jsxRuntime.jsxs)("span",{style:styles.flexRowGapItemsCenter,children:[(0,_jsxRuntime.jsx)(CopyButton,{value:e,isFocused:s}),g&&c!==null&&(0,_jsxRuntime.jsx)(DeleteItemButton,{dataPath:u,isFocused:s}),a==="array"&&c!==null&&(0,_jsxRuntime.jsx)(ClearArrayButton,{dataPath:u,isFocused:s})]})]}),f&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[j.length===1&&(0,_jsxRuntime.jsx)("div",{style:{...styles.singleEntryContainer,...d?styles.singleEntryContainerMain:null},children:S.map((i,o)=>(0,_jsxRuntime.jsx)(Explorer,{defaultExpanded:r,label:i.label,value:i.value,editable:t,dataPath:[...u,i.label],itemsDeletable:a==="array"||a==="Iterable"||a==="object",dataVersion:b},i.label+o))}),j.length>1&&(0,_jsxRuntime.jsx)("div",{style:styles.multiEntryContainer,children:j.map((i,o)=>(0,_jsxRuntime.jsx)("div",{children:(0,_jsxRuntime.jsxs)("div",{style:styles.relativeOutlineNone,children:[(0,_jsxRuntime.jsxs)("button",{type:"button",onClick:()=>F(l=>l.includes(o)?l.filter(p=>p!==o):[...l,o]),style:styles.pageExpanderButton,"aria-expanded":B.includes(o),children:[(0,_jsxRuntime.jsx)(Expander,{expanded:B.includes(o)}),(0,_jsxRuntime.jsxs)("span",{style:styles.pageRangeText,children:["[",o*CHUNK_SIZE,"...",o*CHUNK_SIZE+CHUNK_SIZE-1,"]"]})]}),B.includes(o)&&(0,_jsxRuntime.jsx)("div",{style:styles.entriesContainer,children:i.map(l=>(0,_jsxRuntime.jsx)(Explorer,{defaultExpanded:r,label:l.label,value:l.value,editable:t,dataPath:[...u,l.label],dataVersion:b},l.label))})]})},o))})]})]}),j.length===0&&(0,_jsxRuntime.jsxs)("div",{style:styles.flexRowGapFullWidth,children:[t&&c!==null&&(a==="string"||a==="number"||a==="boolean")?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t&&c&&(a==="string"||a==="number")&&(0,_jsxRuntime.jsx)("div",{style:styles.nebulaInputWrapper,children:(0,_jsxRuntime.jsx)(CyberpunkInputWeb,{label:n,value:h,isNumber:a==="number",onChangeText:i=>k(a==="number",i),onFocus:()=>w(true),onBlur:()=>w(false),showNumberControls:a==="number",onIncrement:()=>{const i=Number(h)||0;k(true,String(i+1))},onDecrement:()=>{const i=Number(h)||0;k(true,String(i-1))},showDeleteButton:g,onDelete:()=>{c.onChange((0,_deleteNestedDataByPath.deleteNestedDataByPath)(c.root,u))}})}),a==="boolean"&&(0,_jsxRuntime.jsxs)("div",{style:styles.booleanRowContainer,children:[(0,_jsxRuntime.jsx)("span",{style:styles.booleanLabel,children:n}),(0,_jsxRuntime.jsx)("div",{style:styles.booleanToggleWrapper,children:(0,_jsxRuntime.jsx)(ToggleValueButton,{dataPath:u,value:e,itemsDeletable:g})})]})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)("span",{style:styles.text344054,children:n}),(0,_jsxRuntime.jsx)("span",{style:styles.displayValueText,children:displayValue(e)})]}),t&&g&&c!==null&&a!=="string"&&a!=="number"&&a!=="boolean"&&(0,_jsxRuntime.jsx)(DeleteItemButton,{dataPath:u,isFocused:s})]})]})})}const styles={buttonStyle:{backgroundColor:buoyColors.card+"E6",border:`1px solid ${buoyColors.textSecondary}33`,borderRadius:6,display:"inline-flex",flexDirection:"row",alignItems:"center",justifyContent:"center",width:28,height:28,boxSizing:"border-box",position:"relative",padding:0},buttonStyleFocused:{border:`1px solid ${buoyColors.primary}CC`,backgroundColor:buoyColors.primary+"26"},deleteButton:{backgroundColor:buoyColors.error+"1A",border:`1px solid ${buoyColors.error}4D`,borderRadius:6,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,boxSizing:"border-box",position:"relative",cursor:"pointer",margin:0,flexShrink:0},deleteButtonFocused:{border:`1px solid ${buoyColors.error}CC`,backgroundColor:buoyColors.error+"33"},deleteButtonInToggle:{backgroundColor:buoyColors.error+"1A",border:`1px solid ${buoyColors.error}4D`,borderRadius:6,padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,boxSizing:"border-box",cursor:"pointer",margin:0},clearButton:{backgroundColor:buoyColors.warning+"1A",border:`1px solid ${buoyColors.warning}4D`,borderRadius:6,display:"inline-flex",flexDirection:"row",padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,boxSizing:"border-box",position:"relative",zIndex:10,cursor:"pointer",margin:0,flexShrink:0},clearButtonFocused:{border:`1px solid ${buoyColors.warning}CC`,backgroundColor:buoyColors.warning+"33"},clearButtonText:{fontSize:12,fontWeight:700,fontFamily:"ui-monospace, Menlo, monospace"},expanderIcon:{width:18,height:18,display:"inline-flex",alignItems:"center",justifyContent:"center",marginRight:1,backgroundColor:buoyColors.textSecondary+"14",borderRadius:3,boxSizing:"border-box",flexShrink:0},expanderIconMain:{backgroundColor:buoyColors.textSecondary+"1A",width:20,height:20,borderRadius:4,border:`0.5px solid ${buoyColors.textSecondary}33`},minWidthWrapper:{minWidth:180,fontSize:11,display:"flex",flexDirection:"row",flexWrap:"wrap",width:"100%",margin:"0.5px 0"},fullWidthMarginRight:{position:"relative",width:"100%",marginRight:1},flexRowItemsCenterGap:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"3px 6px",margin:"1px 0",borderRadius:4,backgroundColor:buoyColors.card+"66",border:`0.5px solid ${buoyColors.textSecondary}1A`,boxSizing:"border-box"},flexRowItemsCenterGapMain:{backgroundColor:buoyColors.card+"E6",border:`1px solid ${buoyColors.textSecondary}26`,borderLeft:`2.5px solid ${buoyColors.textSecondary}80`,padding:"5px 8px",marginBottom:3},expanderButton:{display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:"transparent",padding:"1px 2px",gap:6,border:"none",minHeight:24,flex:1,minWidth:0,cursor:"pointer",margin:0,textAlign:"left",font:"inherit"},labelText:{color:buoyColors.textSecondary,fontSize:10,fontWeight:600,marginRight:4,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.4},labelTextFocused:{color:buoyColors.text},labelTextMain:{color:buoyColors.text,fontSize:11,fontWeight:700,letterSpacing:.6},textGray500:{color:buoyColors.textMuted,fontSize:10,fontWeight:400,fontFamily:"ui-monospace, Menlo, monospace",opacity:.7},pageRangeText:{color:buoyColors.textSecondary,fontSize:10,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace"},flexRowGapItemsCenter:{display:"flex",flexDirection:"row",alignItems:"center",gap:4,paddingLeft:2},singleEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeft:`1.5px solid ${buoyColors.textSecondary}40`},singleEntryContainerMain:{borderLeft:`1.5px solid ${buoyColors.textSecondary}4D`,marginLeft:4,paddingLeft:10},multiEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeft:`1.5px solid ${buoyColors.textSecondary}40`},relativeOutlineNone:{position:"relative"},pageExpanderButton:{display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:buoyColors.card+"66",padding:"3px 6px",gap:6,borderRadius:4,border:`0.5px solid ${buoyColors.textSecondary}1A`,marginBottom:2,minHeight:24,cursor:"pointer",margin:"0 0 2px 0",width:"100%",boxSizing:"border-box",textAlign:"left",font:"inherit"},entriesContainer:{marginLeft:2,paddingLeft:8,marginTop:2,borderLeft:`1.5px solid ${buoyColors.textSecondary}40`},textNumber:{color:buoyColors.text,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace"},textString:{color:buoyColors.text,fontFamily:"ui-monospace, Menlo, monospace"},flexRowGapFullWidth:{display:"flex",flexDirection:"row",width:"100%",alignItems:"center",margin:"1px 0",gap:6,padding:"2px 4px",borderRadius:3,boxSizing:"border-box"},text344054:{color:buoyColors.textSecondary,fontWeight:600,fontSize:9,minWidth:50,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.4,opacity:.8,flexShrink:0},nebulaInputWrapper:{flex:1,width:"100%",position:"relative",minWidth:0},displayValueText:{flex:1,minWidth:0,color:buoyColors.text,fontWeight:400,fontFamily:"ui-monospace, Menlo, monospace",fontSize:12,padding:"6px 10px",borderRadius:6,border:`1px solid ${buoyColors.textMuted}66`,minHeight:34,boxSizing:"border-box",overflowWrap:"anywhere"},modernToggleButton:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:6,border:`1px solid ${buoyColors.textMuted}99`,padding:"6px 8px",margin:"2px 0",minHeight:34,gap:8,boxSizing:"border-box",cursor:"pointer"},toggleBadge:{marginLeft:6,padding:"3px 6px",borderRadius:4,display:"inline-flex"},toggleBadgeText:{fontSize:9,fontWeight:700,textTransform:"uppercase",letterSpacing:.8,fontFamily:"ui-monospace, Menlo, monospace"},toggleBadgeTrue:{backgroundColor:buoyColors.primary+"1A",border:`1px solid ${buoyColors.primary}4D`},toggleBadgeFalse:{backgroundColor:buoyColors.textMuted+"1A",border:`1px solid ${buoyColors.textMuted}4D`},toggleTextTrue:{color:buoyColors.primary,fontWeight:600},toggleTextFalse:{color:buoyColors.textSecondary,fontWeight:500},booleanRowContainer:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",gap:8,padding:"2px 0"},booleanLabel:{color:buoyColors.textSecondary,fontSize:10,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.4,minWidth:60,flexShrink:0},booleanToggleWrapper:{flex:1,minWidth:0},cyberContainer:{width:"100%",margin:"3px 0"},cyberRow:{display:"flex",flexDirection:"row",alignItems:"center",gap:8},cyberLabel:{fontSize:10,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace",color:buoyColors.textMuted,letterSpacing:.5,minWidth:60,flexShrink:0},cyberLabelFocused:{color:buoyColors.primary},cyberInputContainer:{flex:1,minWidth:0,borderWidth:1,borderStyle:"solid",borderRadius:6,position:"relative",minHeight:34,display:"flex",flexDirection:"row",alignItems:"center",boxSizing:"border-box"},cyberInput:{flex:1,minWidth:0,padding:"6px 10px",fontSize:12,backgroundColor:"transparent",zIndex:1,border:"none",outline:"none"},numberControls:{display:"inline-flex",flexDirection:"row",gap:2,paddingRight:4,zIndex:2},controlButton:{width:28,height:28,borderRadius:6,border:`1px solid ${buoyColors.textMuted}33`,display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:"none",cursor:"pointer",padding:0,margin:0},controlButtonFocused:{border:`1px solid ${buoyColors.primary}CC`},cyberDeleteButton:{width:28,height:28,borderRadius:6,border:`1px solid ${buoyColors.error}4D`,display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:"none",cursor:"pointer",padding:0,marginRight:4,zIndex:2},cyberDeleteButtonFocused:{border:`1px solid ${buoyColors.error}CC`},cornerAccent:{position:"absolute",width:6,height:1.2,backgroundColor:buoyColors.textMuted+"CC",zIndex:0},cornerAccentFocused:{backgroundColor:buoyColors.primary}};