@buoy-gg/network 7.0.15 → 7.0.16

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

@@ -0,0 +1,1136 @@
+"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
+  }
+};