@buoy-gg/network 7.0.40 → 7.0.42

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

@@ -1,1133 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
-import { CopyButton as SharedCopyButton } from "../DataViewer.web";
-import { updateNestedDataByPath } from "./updateNestedDataByPath";
-import { deleteNestedDataByPath } from "./deleteNestedDataByPath";
-import { useResponseEditor } from "./editorContext";
-
-// Stable constants to prevent re-renders — native Explorer, verbatim.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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__*/_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__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m9 18 6-6-6-6"
-  })
-});
-const ChevronDown = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m6 9 6 6 6-6"
-  })
-});
-const ChevronUp = p => /*#__PURE__*/_jsx(Svg, {
-  ...p,
-  children: /*#__PURE__*/_jsx("path", {
-    d: "m18 15-6-6-6 6"
-  })
-});
-const Trash = p => /*#__PURE__*/_jsxs(Svg, {
-  ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M3 6h18"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-  }), /*#__PURE__*/_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__*/memo(({
-  expanded,
-  isFocused = false,
-  isMain = false
-}) => {
-  const color = isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary;
-  const Chevron = expanded ? ChevronDown : ChevronRight;
-  return /*#__PURE__*/_jsx("span", {
-    style: {
-      ...styles.expanderIcon,
-      ...(isMain ? styles.expanderIconMain : null)
-    },
-    children: /*#__PURE__*/_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__*/memo(({
-  value,
-  isFocused = false
-}) => {
-  return /*#__PURE__*/_jsx(SharedCopyButton, {
-    value: value,
-    size: 14,
-    buttonStyle: isFocused ? {
-      ...styles.buttonStyle,
-      ...styles.buttonStyleFocused
-    } : styles.buttonStyle
-  });
-});
-CopyButton.displayName = "CopyButton";
-
-// Memoized DeleteItemButton component — native, verbatim behavior.
-const DeleteItemButton = /*#__PURE__*/memo(({
-  dataPath,
-  isFocused = false
-}) => {
-  const editor = useResponseEditor();
-  const handleDelete = useCallback(() => {
-    if (!editor) return;
-    editor.onChange(deleteNestedDataByPath(editor.root, dataPath));
-  }, [editor, dataPath]);
-  if (!editor) return null;
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    onClick: handleDelete,
-    style: {
-      ...styles.deleteButton,
-      ...(isFocused ? styles.deleteButtonFocused : null)
-    },
-    "aria-label": "Delete item",
-    children: /*#__PURE__*/_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__*/memo(({
-  dataPath,
-  isFocused = false
-}) => {
-  const editor = useResponseEditor();
-  const handleClear = useCallback(() => {
-    if (!editor) return;
-    editor.onChange(updateNestedDataByPath(editor.root, dataPath, []));
-  }, [editor, dataPath]);
-  if (!editor) return null;
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    style: {
-      ...styles.clearButton,
-      ...(isFocused ? styles.clearButtonFocused : null)
-    },
-    "aria-label": "Remove all items",
-    onClick: handleClear,
-    children: /*#__PURE__*/_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 = useResponseEditor();
-  const handleClick = useCallback(() => {
-    if (!editor) return;
-    const currentValue = typeof value === "boolean" ? value : false;
-    editor.onChange(updateNestedDataByPath(editor.root, dataPath, !currentValue));
-  }, [editor, dataPath, value]);
-  const handleDelete = useCallback(() => {
-    if (!editor) return;
-    editor.onChange(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__*/_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__*/_jsx("span", {
-      style: {
-        ...styles.toggleBadge,
-        ...badgeStyle
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.toggleBadgeText,
-          ...textStyle
-        },
-        children: value ? "TRUE" : "FALSE"
-      })
-    }), itemsDeletable && /*#__PURE__*/_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__*/_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] = useState(false);
-  const cornerStyle = corner => ({
-    ...styles.cornerAccent,
-    ...corner,
-    ...(isFocused ? styles.cornerAccentFocused : null)
-  });
-  return /*#__PURE__*/_jsx("div", {
-    style: styles.cyberContainer,
-    children: /*#__PURE__*/_jsxs("div", {
-      style: styles.cyberRow,
-      children: [label ? /*#__PURE__*/_jsx("span", {
-        style: {
-          ...styles.cyberLabel,
-          ...(isFocused ? styles.cyberLabelFocused : null)
-        },
-        children: label.toUpperCase()
-      }) : null, /*#__PURE__*/_jsxs("div", {
-        style: {
-          ...styles.cyberInputContainer,
-          opacity: isFocused ? 1 : 0.6,
-          borderColor: isFocused ? buoyColors.primary : buoyColors.textMuted + "4D"
-        },
-        children: [/*#__PURE__*/_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__*/_jsxs("span", {
-          style: styles.numberControls,
-          children: [/*#__PURE__*/_jsx("button", {
-            type: "button",
-            style: {
-              ...styles.controlButton,
-              ...(isFocused ? styles.controlButtonFocused : null)
-            },
-            onClick: onIncrement,
-            "aria-label": "Increment value",
-            children: /*#__PURE__*/_jsx(ChevronUp, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          }), /*#__PURE__*/_jsx("button", {
-            type: "button",
-            style: {
-              ...styles.controlButton,
-              ...(isFocused ? styles.controlButtonFocused : null)
-            },
-            onClick: onDecrement,
-            "aria-label": "Decrement value",
-            children: /*#__PURE__*/_jsx(ChevronDown, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          })]
-        }), showDeleteButton && /*#__PURE__*/_jsx("button", {
-          type: "button",
-          style: {
-            ...styles.cyberDeleteButton,
-            ...(isFocused ? styles.cyberDeleteButtonFocused : null)
-          },
-          onClick: onDelete,
-          "aria-label": "Delete item",
-          children: /*#__PURE__*/_jsx(Trash, {
-            size: 14,
-            strokeWidth: 2,
-            color: isFocused ? buoyColors.error : buoyColors.error + "CC"
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          style: cornerStyle({
-            top: -1,
-            left: 5
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          style: cornerStyle({
-            top: -1,
-            right: 5
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          style: cornerStyle({
-            bottom: -1,
-            left: 5
-          })
-        }), /*#__PURE__*/_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.
- */
-export default function Explorer({
-  editable,
-  label,
-  value,
-  defaultExpanded,
-  dataPath,
-  itemsDeletable,
-  dataVersion = 0
-}) {
-  const editor = useResponseEditor();
-  const [isRowFocused, setIsRowFocused] = useState(false);
-
-  // Local state for input value to handle typing properly
-  const [localInputValue, setLocalInputValue] = 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.
-  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 = 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] = useState((defaultExpanded || []).includes(label));
-  const toggleExpanded = () => setIsExpanded(old => !old);
-  const [expandedPages, setExpandedPages] = useState([]);
-
-  // Optimized subEntries computation — native, verbatim (1000-entry cap).
-  const subEntries = 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 = 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 = useMemo(() => {
-    return chunkArray(subEntries, CHUNK_SIZE);
-  }, [subEntries]);
-  const currentDataPath = dataPath ?? [];
-
-  // Optimize handleChange using refs to avoid dependency arrays — native.
-  const editorRef = useRef(editor);
-  const dataPathRef = useRef(currentDataPath);
-  const valueTypeRef = useRef(valueType);
-  editorRef.current = editor;
-  dataPathRef.current = currentDataPath;
-  valueTypeRef.current = valueType;
-  const handleChange = 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(updateNestedDataByPath(current.root, dataPathRef.current, updatedValue));
-  }, [setLocalInputValue]);
-  return /*#__PURE__*/_jsx("div", {
-    style: styles.minWidthWrapper,
-    children: /*#__PURE__*/_jsxs("div", {
-      style: styles.fullWidthMarginRight,
-      children: [subEntryPages.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs("div", {
-          style: {
-            ...styles.flexRowItemsCenterGap,
-            ...(isMainSection ? styles.flexRowItemsCenterGapMain : null)
-          },
-          children: [/*#__PURE__*/_jsxs("button", {
-            type: "button",
-            style: styles.expanderButton,
-            onClick: toggleExpanded,
-            "aria-expanded": isExpanded,
-            children: [/*#__PURE__*/_jsx(Expander, {
-              expanded: isExpanded,
-              isFocused: isRowFocused,
-              isMain: isMainSection
-            }), /*#__PURE__*/_jsx("span", {
-              style: {
-                ...styles.labelText,
-                ...(isRowFocused ? styles.labelTextFocused : null),
-                ...(isMainSection ? styles.labelTextMain : null)
-              },
-              children: label
-            }), /*#__PURE__*/_jsx("span", {
-              style: styles.textGray500,
-              children: `${String(valueType).toLowerCase() === "iterable" ? "(Iterable) " : ""}${subEntries.length} ${subEntries.length > 1 ? `items` : `item`}`
-            })]
-          }), editable && /*#__PURE__*/_jsxs("span", {
-            style: styles.flexRowGapItemsCenter,
-            children: [/*#__PURE__*/_jsx(CopyButton, {
-              value: value,
-              isFocused: isRowFocused
-            }), itemsDeletable && editor !== null && /*#__PURE__*/_jsx(DeleteItemButton, {
-              dataPath: currentDataPath,
-              isFocused: isRowFocused
-            }), valueType === "array" && editor !== null && /*#__PURE__*/_jsx(ClearArrayButton, {
-              dataPath: currentDataPath,
-              isFocused: isRowFocused
-            })]
-          })]
-        }), isExpanded && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [subEntryPages.length === 1 && /*#__PURE__*/_jsx("div", {
-            style: {
-              ...styles.singleEntryContainer,
-              ...(isMainSection ? styles.singleEntryContainerMain : null)
-            },
-            children: subEntries.map((entry, index) => /*#__PURE__*/_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__*/_jsx("div", {
-            style: styles.multiEntryContainer,
-            children: subEntryPages.map((entries, index) => /*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsxs("div", {
-                style: styles.relativeOutlineNone,
-                children: [/*#__PURE__*/_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__*/_jsx(Expander, {
-                    expanded: expandedPages.includes(index)
-                  }), /*#__PURE__*/_jsxs("span", {
-                    style: styles.pageRangeText,
-                    children: ["[", index * CHUNK_SIZE, "...", index * CHUNK_SIZE + CHUNK_SIZE - 1, "]"]
-                  })]
-                }), expandedPages.includes(index) && /*#__PURE__*/_jsx("div", {
-                  style: styles.entriesContainer,
-                  children: entries.map(entry => /*#__PURE__*/_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__*/_jsxs("div", {
-        style: styles.flexRowGapFullWidth,
-        children: [editable && editor !== null && (valueType === "string" || valueType === "number" || valueType === "boolean") ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [editable && editor && (valueType === "string" || valueType === "number") && /*#__PURE__*/_jsx("div", {
-            style: styles.nebulaInputWrapper,
-            children: /*#__PURE__*/_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(deleteNestedDataByPath(editor.root, currentDataPath));
-              }
-            })
-          }), valueType === "boolean" && /*#__PURE__*/_jsxs("div", {
-            style: styles.booleanRowContainer,
-            children: [/*#__PURE__*/_jsx("span", {
-              style: styles.booleanLabel,
-              children: label
-            }), /*#__PURE__*/_jsx("div", {
-              style: styles.booleanToggleWrapper,
-              children: /*#__PURE__*/_jsx(ToggleValueButton, {
-                dataPath: currentDataPath,
-                value: value,
-                itemsDeletable: itemsDeletable
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("span", {
-            style: styles.text344054,
-            children: label
-          }), /*#__PURE__*/_jsx("span", {
-            style: styles.displayValueText,
-            children: displayValue(value)
-          })]
-        }), editable && itemsDeletable && editor !== null && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/_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";import{useState as F,useMemo as M,useCallback as W,useRef as j,useEffect as X,memo as E}from"react";import{CopyButton as q}from"../DataViewer.web";import{updateNestedDataByPath as v}from"./updateNestedDataByPath";import{deleteNestedDataByPath as P}from"./deleteNestedDataByPath";import{useResponseEditor as z}from"./editorContext";import{jsx as n,jsxs as p,Fragment as A}from"react/jsx-runtime";const D=100;const ee=12;const e={card:"#1A1A1A",text:"#E0E0E0",textSecondary:"#A0A0A0",textMuted:"#888888",primary:"#20C997",warning:"#FFA94D",error:"#EF4444"};function $({size:r=14,color:i="currentColor",strokeWidth:o=2,children:l}){return n("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",stroke:i,strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0,display:"block"},children:l})}const te=r=>n($,{...r,children:n("path",{d:"m9 18 6-6-6-6"})});const K=r=>n($,{...r,children:n("path",{d:"m6 9 6 6 6-6"})});const ne=r=>n($,{...r,children:n("path",{d:"m18 15-6-6-6 6"})});const G=r=>p($,{...r,children:[n("path",{d:"M3 6h18"}),n("path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}),n("path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"})]});function oe(r){if(r===void 0)return"undefined";if(typeof r==="bigint")return`${r}n`;if(typeof r==="function")return String(r).slice(0,50);if(typeof r==="symbol")return String(r);try{return JSON.stringify(r)??String(r)}catch{return String(r)}}const re=(r,i=D)=>{if(i<1||r.length===0)return[];const o=[];for(let l=0;l<r.length;l+=i){o.push(r.slice(l,l+i))}return o};const V=E(({expanded:r,isFocused:i=false,isMain:o=false})=>{const l=i?e.primary:o?e.text:e.textSecondary;const y=r?K:te;return n("span",{style:{...t.expanderIcon,...o?t.expanderIconMain:null},children:n(y,{size:o?14:ee,color:l,strokeWidth:2.5})})});V.displayName="Expander";const Q=E(({value:r,isFocused:i=false})=>{return n(q,{value:r,size:14,buttonStyle:i?{...t.buttonStyle,...t.buttonStyleFocused}:t.buttonStyle})});Q.displayName="CopyButton";const H=E(({dataPath:r,isFocused:i=false})=>{const o=z();const l=W(()=>{if(!o)return;o.onChange(P(o.root,r))},[o,r]);if(!o)return null;return n("button",{type:"button",onClick:l,style:{...t.deleteButton,...i?t.deleteButtonFocused:null},"aria-label":"Delete item",children:n(G,{size:14,strokeWidth:2,color:i?e.error:e.error+"CC"})})});H.displayName="DeleteItemButton";const Z=E(({dataPath:r,isFocused:i=false})=>{const o=z();const l=W(()=>{if(!o)return;o.onChange(v(o.root,r,[]))},[o,r]);if(!o)return null;return n("button",{type:"button",style:{...t.clearButton,...i?t.clearButtonFocused:null},"aria-label":"Remove all items",onClick:l,children:n("span",{style:{...t.clearButtonText,color:i?e.warning:e.warning+"CC"},children:"[]"})})});Z.displayName="ClearArrayButton";function ie({dataPath:r,value:i,itemsDeletable:o}){const l=z();const y=W(()=>{if(!l)return;const u=typeof i==="boolean"?i:false;l.onChange(v(l.root,r,!u))},[l,r,i]);const h=W(()=>{if(!l)return;l.onChange(P(l.root,r))},[l,r]);if(!l)return null;const m=i?t.toggleBadgeTrue:t.toggleBadgeFalse;const x=i?t.toggleTextTrue:t.toggleTextFalse;return p("div",{role:"button",tabIndex:0,style:t.modernToggleButton,onClick:y,onKeyDown:u=>{if(u.key==="Enter"||u.key===" ")y()},"aria-label":i?"Set to false":"Set to true",children:[n("span",{style:{...t.toggleBadge,...m},children:n("span",{style:{...t.toggleBadgeText,...x},children:i?"TRUE":"FALSE"})}),o&&n("button",{type:"button",onClick:u=>{u.stopPropagation();h()},style:t.deleteButtonInToggle,"aria-label":"Delete item",children:n(G,{size:14,strokeWidth:2,color:e.error+"CC"})})]})}function le({label:r,value:i,isNumber:o,onChangeText:l,onFocus:y,onBlur:h,showNumberControls:m=false,onIncrement:x,onDecrement:u,showDeleteButton:T=false,onDelete:w,"aria-label":I}){const[g,C]=F(false);const S=k=>({...t.cornerAccent,...k,...g?t.cornerAccentFocused:null});return n("div",{style:t.cyberContainer,children:p("div",{style:t.cyberRow,children:[r?n("span",{style:{...t.cyberLabel,...g?t.cyberLabelFocused:null},children:r.toUpperCase()}):null,p("div",{style:{...t.cyberInputContainer,opacity:g?1:.6,borderColor:g?e.primary:e.textMuted+"4D"},children:[n("input",{value:i,onChange:k=>l(k.target.value),onFocus:()=>{C(true);y?.()},onBlur:()=>{C(false);h?.()},inputMode:o?"decimal":void 0,autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:false,"aria-label":I??"Data input field for editing values",style:{...t.cyberInput,...o?t.textNumber:t.textString}}),m&&p("span",{style:t.numberControls,children:[n("button",{type:"button",style:{...t.controlButton,...g?t.controlButtonFocused:null},onClick:x,"aria-label":"Increment value",children:n(ne,{size:14,strokeWidth:2.5,color:g?e.primary:e.textMuted})}),n("button",{type:"button",style:{...t.controlButton,...g?t.controlButtonFocused:null},onClick:u,"aria-label":"Decrement value",children:n(K,{size:14,strokeWidth:2.5,color:g?e.primary:e.textMuted})})]}),T&&n("button",{type:"button",style:{...t.cyberDeleteButton,...g?t.cyberDeleteButtonFocused:null},onClick:w,"aria-label":"Delete item",children:n(G,{size:14,strokeWidth:2,color:g?e.error:e.error+"CC"})}),n("span",{style:S({top:-1,left:5})}),n("span",{style:S({top:-1,right:5})}),n("span",{style:S({bottom:-1,left:5})}),n("span",{style:S({bottom:-1,right:5})})]})]})})}export default function O({editable:r,label:i,value:o,defaultExpanded:l,dataPath:y,itemsDeletable:h,dataVersion:m=0}){const x=z();const[u,T]=F(false);const[w,I]=F("");X(()=>{if(o!==null&&o!==void 0&&(typeof o==="string"||typeof o==="number")){const d=o.toString();I(d)}},[o,i,m]);const g=M(()=>{const d=i.toUpperCase();return["DATA","QUERY","QUERYKEY","TYPES","STATS","OPTIONS","OBSERVERS"].includes(d)},[i]);const[C,S]=F((l||[]).includes(i));const k=()=>S(d=>!d);const[L,J]=F([]);const B=M(()=>{if(o===null||o===void 0||typeof o!=="object"){return[]}if(Array.isArray(o)){const a=o.length>1e3?o.slice(0,1e3):o;return a.map((s,f)=>({label:f.toString(),value:s}))}if(o instanceof Map){const a=Array.from(o.entries()).slice(0,1e3);return a.map(([s,f])=>({label:String(s),value:f}))}if(o instanceof Set){const a=Array.from(o).slice(0,1e3);return a.map((s,f)=>({label:f.toString(),value:s}))}const d=Object.entries(o).slice(0,1e3);return d.map(([a,s])=>({label:a,value:s}))},[o]);const c=M(()=>{if(Array.isArray(o))return"array";if(o===null||typeof o!=="object")return typeof o;if(o instanceof Map||o instanceof Set)return"Iterable";return"object"},[o]);const R=M(()=>{return re(B,D)},[B]);const b=y??[];const U=j(x);const _=j(b);const Y=j(c);U.current=x;_.current=b;Y.current=c;const N=W((d,a)=>{I(a);const s=U.current;if(!s)return;if(d&&isNaN(Number(a)))return;const f=Y.current==="number"?Number(a):a;s.onChange(v(s.root,_.current,f))},[I]);return n("div",{style:t.minWidthWrapper,children:p("div",{style:t.fullWidthMarginRight,children:[R.length>0&&p(A,{children:[p("div",{style:{...t.flexRowItemsCenterGap,...g?t.flexRowItemsCenterGapMain:null},children:[p("button",{type:"button",style:t.expanderButton,onClick:k,"aria-expanded":C,children:[n(V,{expanded:C,isFocused:u,isMain:g}),n("span",{style:{...t.labelText,...u?t.labelTextFocused:null,...g?t.labelTextMain:null},children:i}),n("span",{style:t.textGray500,children:`${String(c).toLowerCase()==="iterable"?"(Iterable) ":""}${B.length} ${B.length>1?`items`:`item`}`})]}),r&&p("span",{style:t.flexRowGapItemsCenter,children:[n(Q,{value:o,isFocused:u}),h&&x!==null&&n(H,{dataPath:b,isFocused:u}),c==="array"&&x!==null&&n(Z,{dataPath:b,isFocused:u})]})]}),C&&p(A,{children:[R.length===1&&n("div",{style:{...t.singleEntryContainer,...g?t.singleEntryContainerMain:null},children:B.map((d,a)=>n(O,{defaultExpanded:l,label:d.label,value:d.value,editable:r,dataPath:[...b,d.label],itemsDeletable:c==="array"||c==="Iterable"||c==="object",dataVersion:m},d.label+a))}),R.length>1&&n("div",{style:t.multiEntryContainer,children:R.map((d,a)=>n("div",{children:p("div",{style:t.relativeOutlineNone,children:[p("button",{type:"button",onClick:()=>J(s=>s.includes(a)?s.filter(f=>f!==a):[...s,a]),style:t.pageExpanderButton,"aria-expanded":L.includes(a),children:[n(V,{expanded:L.includes(a)}),p("span",{style:t.pageRangeText,children:["[",a*D,"...",a*D+D-1,"]"]})]}),L.includes(a)&&n("div",{style:t.entriesContainer,children:d.map(s=>n(O,{defaultExpanded:l,label:s.label,value:s.value,editable:r,dataPath:[...b,s.label],dataVersion:m},s.label))})]})},a))})]})]}),R.length===0&&p("div",{style:t.flexRowGapFullWidth,children:[r&&x!==null&&(c==="string"||c==="number"||c==="boolean")?p(A,{children:[r&&x&&(c==="string"||c==="number")&&n("div",{style:t.nebulaInputWrapper,children:n(le,{label:i,value:w,isNumber:c==="number",onChangeText:d=>N(c==="number",d),onFocus:()=>T(true),onBlur:()=>T(false),showNumberControls:c==="number",onIncrement:()=>{const d=Number(w)||0;N(true,String(d+1))},onDecrement:()=>{const d=Number(w)||0;N(true,String(d-1))},showDeleteButton:h,onDelete:()=>{x.onChange(P(x.root,b))}})}),c==="boolean"&&p("div",{style:t.booleanRowContainer,children:[n("span",{style:t.booleanLabel,children:i}),n("div",{style:t.booleanToggleWrapper,children:n(ie,{dataPath:b,value:o,itemsDeletable:h})})]})]}):p(A,{children:[n("span",{style:t.text344054,children:i}),n("span",{style:t.displayValueText,children:oe(o)})]}),r&&h&&x!==null&&c!=="string"&&c!=="number"&&c!=="boolean"&&n(H,{dataPath:b,isFocused:u})]})]})})}const t={buttonStyle:{backgroundColor:e.card+"E6",border:`1px solid ${e.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 ${e.primary}CC`,backgroundColor:e.primary+"26"},deleteButton:{backgroundColor:e.error+"1A",border:`1px solid ${e.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 ${e.error}CC`,backgroundColor:e.error+"33"},deleteButtonInToggle:{backgroundColor:e.error+"1A",border:`1px solid ${e.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:e.warning+"1A",border:`1px solid ${e.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 ${e.warning}CC`,backgroundColor:e.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:e.textSecondary+"14",borderRadius:3,boxSizing:"border-box",flexShrink:0},expanderIconMain:{backgroundColor:e.textSecondary+"1A",width:20,height:20,borderRadius:4,border:`0.5px solid ${e.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:e.card+"66",border:`0.5px solid ${e.textSecondary}1A`,boxSizing:"border-box"},flexRowItemsCenterGapMain:{backgroundColor:e.card+"E6",border:`1px solid ${e.textSecondary}26`,borderLeft:`2.5px solid ${e.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:e.textSecondary,fontSize:10,fontWeight:600,marginRight:4,fontFamily:"ui-monospace, Menlo, monospace",letterSpacing:.4},labelTextFocused:{color:e.text},labelTextMain:{color:e.text,fontSize:11,fontWeight:700,letterSpacing:.6},textGray500:{color:e.textMuted,fontSize:10,fontWeight:400,fontFamily:"ui-monospace, Menlo, monospace",opacity:.7},pageRangeText:{color:e.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 ${e.textSecondary}40`},singleEntryContainerMain:{borderLeft:`1.5px solid ${e.textSecondary}4D`,marginLeft:4,paddingLeft:10},multiEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeft:`1.5px solid ${e.textSecondary}40`},relativeOutlineNone:{position:"relative"},pageExpanderButton:{display:"flex",flexDirection:"row",alignItems:"center",backgroundColor:e.card+"66",padding:"3px 6px",gap:6,borderRadius:4,border:`0.5px solid ${e.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 ${e.textSecondary}40`},textNumber:{color:e.text,fontWeight:600,fontFamily:"ui-monospace, Menlo, monospace"},textString:{color:e.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:e.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:e.text,fontWeight:400,fontFamily:"ui-monospace, Menlo, monospace",fontSize:12,padding:"6px 10px",borderRadius:6,border:`1px solid ${e.textMuted}66`,minHeight:34,boxSizing:"border-box",overflowWrap:"anywhere"},modernToggleButton:{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:6,border:`1px solid ${e.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:e.primary+"1A",border:`1px solid ${e.primary}4D`},toggleBadgeFalse:{backgroundColor:e.textMuted+"1A",border:`1px solid ${e.textMuted}4D`},toggleTextTrue:{color:e.primary,fontWeight:600},toggleTextFalse:{color:e.textSecondary,fontWeight:500},booleanRowContainer:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",gap:8,padding:"2px 0"},booleanLabel:{color:e.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:e.textMuted,letterSpacing:.5,minWidth:60,flexShrink:0},cyberLabelFocused:{color:e.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 ${e.textMuted}33`,display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:"none",cursor:"pointer",padding:0,margin:0},controlButtonFocused:{border:`1px solid ${e.primary}CC`},cyberDeleteButton:{width:28,height:28,borderRadius:6,border:`1px solid ${e.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 ${e.error}CC`},cornerAccent:{position:"absolute",width:6,height:1.2,backgroundColor:e.textMuted+"CC",zIndex:0},cornerAccentFocused:{backgroundColor:e.primary}};