@buoy-gg/network 7.0.41 → 7.0.42

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

@@ -1,972 +1 @@
-"use strict";
-
-import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
-import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
-import { displayValue, buoyColors, monoFont } from "@buoy-gg/shared-ui";
-import { CopyButton as SharedCopyButton } from "@buoy-gg/shared-ui";
-import { ChevronRight, ChevronDown, Trash } from "@buoy-gg/shared-ui";
-import { CyberpunkInput } from "@buoy-gg/shared-ui/dataViewer";
-import { updateNestedDataByPath } from "./updateNestedDataByPath";
-import { deleteNestedDataByPath } from "./deleteNestedDataByPath";
-import { useResponseEditor } from "./editorContext";
-
-/**
- * The response-body tree: preview and editor as ONE surface.
- *
- * A 1:1 port of the React Query tool's `Explorer` — deliberately, because that
- * is the interaction that already works: there is no read mode and no edit
- * mode, no button that swaps one for the other. A string renders AS its input,
- * a boolean AS its toggle, and typing into what you are reading is the edit.
- *
- * The only thing changed from the original is where an edit LANDS. There it was
- * `queryClient.setQueryData(activeQuery.queryKey, …)`; here it's the `onChange`
- * from `ResponseEditorContext`, which turns the rebuilt body into an override
- * rule. Everything else — the chunked pages, the focus handling, the
- * local-input-state race note below — is carried over unchanged so the two
- * trees behave identically.
- */
-
-// Stable constants to prevent re-renders [[memory:4875251]]
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const CHUNK_SIZE = 100;
-const HIT_SLOP_OPTIMIZED = {
-  top: 8,
-  bottom: 8,
-  left: 8,
-  right: 8
-};
-const EXPANDER_SIZE = 12;
-
-// Optimized chunking function moved to module scope [[memory:4875251]]
-const chunkArray = (array, size = CHUNK_SIZE) => {
-  if (size < 1 || array.length === 0) return [];
-  const result = [];
-  for (let i = 0; i < array.length; i += size) {
-    result.push(array.slice(i, i + size));
-  }
-  return result;
-};
-// Memoized Expander component for performance [[memory:4875251]]
-const Expander = /*#__PURE__*/memo(({
-  expanded,
-  isFocused = false,
-  isMain = false
-}) => {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.expanderIcon, isMain && styles.expanderIconMain, expanded ? styles.expanded : styles.collapsed],
-    children: expanded ? /*#__PURE__*/_jsx(ChevronDown, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary,
-      strokeWidth: 2.5
-    }) : /*#__PURE__*/_jsx(ChevronRight, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? buoyColors.primary : isMain ? buoyColors.text : buoyColors.textSecondary,
-      strokeWidth: 2.5
-    })
-  });
-});
-Expander.displayName = "Expander";
-// Local wrapper for the shared CopyButton to maintain backward compatibility
-const CopyButton = /*#__PURE__*/memo(({
-  value,
-  isFocused = false
-}) => {
-  return /*#__PURE__*/_jsx(SharedCopyButton, {
-    value: value,
-    isFocused: isFocused,
-    buttonStyle: isFocused ? {
-      ...styles.buttonStyle,
-      ...styles.buttonStyleFocused
-    } : styles.buttonStyle
-  });
-});
-CopyButton.displayName = "CopyButton";
-
-// Memoized DeleteItemButton component [[memory:4875251]]
-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(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer delete button",
-    onPress: handleDelete,
-    style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
-    accessibilityLabel: "Delete item",
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Trash, {
-      size: 14,
-      strokeWidth: 2,
-      color: isFocused ? buoyColors.error : buoyColors.error + "CC"
-    })
-  });
-});
-DeleteItemButton.displayName = "DeleteItemButton";
-// Memoized ClearArrayButton component [[memory:4875251]]
-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(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer clear button",
-    style: [styles.clearButton, isFocused && styles.clearButtonFocused],
-    "aria-label": "Remove all items",
-    onPress: handleClear,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.clearButtonText, {
-        color: isFocused ? buoyColors.warning : buoyColors.warning + "CC"
-      }],
-      children: "[]"
-    })
-  });
-});
-ClearArrayButton.displayName = "ClearArrayButton";
-// ToggleValueButton - not memoized because parent Explorer passes new dataPath array each render
-// which defeats memo anyway, and we need reliable re-renders when value changes
-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
-  const badgeStyle = value ? styles.toggleBadgeTrue : styles.toggleBadgeFalse;
-  const textStyle = value ? styles.toggleTextTrue : styles.toggleTextFalse;
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer toggle button",
-    style: styles.modernToggleButton,
-    onPress: handleClick,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.8,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.toggleBadge, badgeStyle],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.toggleBadgeText, textStyle],
-        children: value ? "TRUE" : "FALSE"
-      })
-    }), itemsDeletable && /*#__PURE__*/_jsx(TouchableOpacity, {
-      "sentry-label": "ignore devtools explorer delete button in toggle",
-      onPress: handleDelete,
-      style: styles.deleteButtonInToggle,
-      accessibilityLabel: "Delete item",
-      hitSlop: HIT_SLOP_OPTIMIZED,
-      activeOpacity: 0.7,
-      children: /*#__PURE__*/_jsx(Trash, {
-        size: 14,
-        strokeWidth: 2,
-        color: buoyColors.error + "CC"
-      })
-    })]
-  });
-}
-// Optimized Explorer component following rule2 guidelines [[memory:4875251]]
-/**
- * Recursive data explorer component used for both editable and read-only JSON trees inside the
- * React Query dev tools.
- */
-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:
-  // 1. User types "5101" → setLocalInputValue("5101")
-  // 2. Cache updates
-  // 3. useEffect fires because localInputValue changed
-  // 4. At this moment, value prop is still old (5100)
-  // 5. Syncs back to 5100, reverting user's change ❌
-  // Only sync when EXTERNAL changes happen (value, label, dataVersion)
-  useEffect(() => {
-    if (value !== null && value !== undefined && (typeof value === "string" || typeof value === "number")) {
-      const newValue = value.toString();
-      setLocalInputValue(newValue);
-    }
-  }, [value, label, dataVersion]); // ⚠️ DO NOT add localInputValue here!
-
-  // Determine if this is a main section
-  const isMainSection = 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));
-  // Remove unnecessary useCallback - simple state setter [[memory:4875251]]
-  const toggleExpanded = () => setIsExpanded(old => !old);
-  const [expandedPages, setExpandedPages] = useState([]);
-
-  // Optimized subEntries computation with early returns and limited processing [[memory:4875251]]
-  const subEntries = useMemo(() => {
-    // Early return for primitive values to avoid unnecessary computation
-    if (value === null || value === undefined || typeof value !== "object") {
-      return [];
-    }
-    if (Array.isArray(value)) {
-      // Limit array processing for performance [[memory:4875251]]
-      const limitedValue = value.length > 1000 ? value.slice(0, 1000) : value;
-      return limitedValue.map((d, i) => ({
-        label: i.toString(),
-        value: d
-      }));
-    }
-    if (value instanceof Map) {
-      // Limit Map entries for performance
-      const entries = Array.from(value.entries()).slice(0, 1000);
-      return entries.map(([key, val]) => ({
-        label: key.toString(),
-        value: val
-      }));
-    }
-    if (value instanceof Set) {
-      // Limit Set entries for performance
-      const entries = Array.from(value).slice(0, 1000);
-      return entries.map((val, i) => ({
-        label: i.toString(),
-        value: val
-      }));
-    }
-
-    // Handle regular objects with key limiting
-    const entries = Object.entries(value).slice(0, 1000);
-    return entries.map(([key, val]) => ({
-      label: key,
-      value: val
-    }));
-  }, [value]);
-
-  // Optimized valueType computation with early returns [[memory:4875251]]
-  const valueType = useMemo(() => {
-    if (Array.isArray(value)) return "array";
-    if (value === null || typeof value !== "object") return typeof value;
-    if (value instanceof Map || value instanceof Set) return "Iterable";
-    return "object";
-  }, [value]);
-
-  // Optimized chunking with stable chunk size [[memory:4875251]]
-  const subEntryPages = useMemo(() => {
-    return chunkArray(subEntries, CHUNK_SIZE);
-  }, [subEntries]);
-  const currentDataPath = dataPath ?? [];
-
-  // Optimize handleChange using refs to avoid dependency arrays [[memory:4875251]]
-  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(View, {
-    style: styles.minWidthWrapper,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.fullWidthMarginRight,
-      children: [subEntryPages.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.flexRowItemsCenterGap, isMainSection && styles.flexRowItemsCenterGapMain],
-          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-            "sentry-label": "ignore devtools explorer expander button",
-            style: styles.expanderButton,
-            onPress: toggleExpanded,
-            hitSlop: HIT_SLOP_OPTIMIZED,
-            activeOpacity: 0.6,
-            children: [/*#__PURE__*/_jsx(Expander, {
-              expanded: isExpanded,
-              isFocused: isRowFocused,
-              isMain: isMainSection
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.labelText, isRowFocused && styles.labelTextFocused, isMainSection && styles.labelTextMain],
-              children: label
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.textGray500,
-              children: `${String(valueType).toLowerCase() === "iterable" ? "(Iterable) " : ""}${subEntries.length} ${subEntries.length > 1 ? `items` : `item`}`
-            })]
-          }), editable && /*#__PURE__*/_jsxs(View, {
-            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(View, {
-            style: [styles.singleEntryContainer, isMainSection && styles.singleEntryContainerMain],
-            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(View, {
-            style: styles.multiEntryContainer,
-            children: subEntryPages.map((entries, index) => /*#__PURE__*/_jsx(View, {
-              children: /*#__PURE__*/_jsxs(View, {
-                style: styles.relativeOutlineNone,
-                children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-                  "sentry-label": "ignore devtools explorer page toggle",
-                  onPress: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index]),
-                  style: styles.pageExpanderButton,
-                  hitSlop: HIT_SLOP_OPTIMIZED,
-                  children: [/*#__PURE__*/_jsx(Expander, {
-                    expanded: expandedPages.includes(index)
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.pageRangeText,
-                    children: ["[", index * CHUNK_SIZE, "...", index * CHUNK_SIZE + CHUNK_SIZE - 1, "]"]
-                  })]
-                }), expandedPages.includes(index) && /*#__PURE__*/_jsx(View, {
-                  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(View, {
-        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(View, {
-            style: styles.nebulaInputWrapper,
-            children: /*#__PURE__*/_jsx(CyberpunkInput, {
-              label: label,
-              accessibilityLabel: "Data input field for editing values",
-              style: [valueType === "number" ? styles.textNumber : styles.textString],
-              keyboardType: valueType === "number" ? "numeric" : "default",
-              value: localInputValue,
-              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(View, {
-            style: styles.booleanRowContainer,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.booleanLabel,
-              children: label
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.booleanToggleWrapper,
-              children: /*#__PURE__*/_jsx(ToggleValueButton, {
-                dataPath: currentDataPath,
-                value: value,
-                itemsDeletable: itemsDeletable
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.text344054,
-            children: label
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.displayValueText,
-            children: displayValue(value)
-          })]
-        }), editable && itemsDeletable && editor !== null && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/_jsx(DeleteItemButton, {
-          dataPath: currentDataPath,
-          isFocused: isRowFocused
-        })]
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  buttonStyle: {
-    backgroundColor: buoyColors.card + "E6",
-    borderWidth: 1,
-    borderColor: buoyColors.textSecondary + "33",
-    borderRadius: 6,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2
-  },
-  buttonStyleFocused: {
-    borderColor: buoyColors.primary + "CC",
-    backgroundColor: buoyColors.primary + "26",
-    shadowColor: buoyColors.primary,
-    shadowOpacity: 0.3,
-    shadowRadius: 4
-  },
-  deleteButton: {
-    backgroundColor: buoyColors.error + "1A",
-    borderColor: buoyColors.error + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    shadowColor: buoyColors.error,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  deleteButtonFocused: {
-    borderColor: buoyColors.error + "CC",
-    backgroundColor: buoyColors.error + "33",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  deleteButtonInToggle: {
-    backgroundColor: buoyColors.error + "1A",
-    borderColor: buoyColors.error + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    shadowColor: buoyColors.error,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButton: {
-    backgroundColor: buoyColors.warning + "1A",
-    borderWidth: 1,
-    borderColor: buoyColors.warning + "4D",
-    borderRadius: 6,
-    flexDirection: "row",
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    zIndex: 10,
-    shadowColor: buoyColors.warning,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButtonFocused: {
-    borderColor: buoyColors.warning + "CC",
-    backgroundColor: buoyColors.warning + "33",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  clearButtonText: {
-    fontSize: 12,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  expanderIcon: {
-    width: 18,
-    height: 18,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 1,
-    backgroundColor: buoyColors.textSecondary + "14",
-    borderRadius: 3
-  },
-  expanderIconMain: {
-    backgroundColor: buoyColors.textSecondary + "1A",
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "33"
-  },
-  expanded: {
-    transform: [{
-      rotate: "0deg"
-    }]
-  },
-  collapsed: {
-    transform: [{
-      rotate: "0deg"
-    }]
-  },
-  minWidthWrapper: {
-    minWidth: 180,
-    fontSize: 11,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    marginVertical: 0.5
-  },
-  fullWidthMarginRight: {
-    position: "relative",
-    width: "100%",
-    marginRight: 1
-  },
-  flexRowItemsCenterGap: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    marginVertical: 1,
-    borderRadius: 4,
-    backgroundColor: buoyColors.card + "66",
-    borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "1A"
-  },
-  flexRowItemsCenterGapMain: {
-    backgroundColor: buoyColors.card + "E6",
-    borderLeftWidth: 2.5,
-    borderLeftColor: buoyColors.textSecondary + "80",
-    borderColor: buoyColors.textSecondary + "26",
-    paddingVertical: 5,
-    paddingHorizontal: 8,
-    marginBottom: 3,
-    borderWidth: 1,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 3
-  },
-  expanderButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    paddingVertical: 1,
-    paddingHorizontal: 2,
-    gap: 6,
-    borderWidth: 0,
-    minHeight: 24,
-    flex: 1
-  },
-  labelText: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    marginRight: 4,
-    fontFamily: monoFont,
-    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: monoFont,
-    opacity: 0.7
-  },
-  pageRangeText: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  flexRowGapItemsCenter: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 2
-  },
-  singleEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
-  },
-  singleEntryContainerMain: {
-    borderLeftColor: buoyColors.textSecondary + "4D",
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  multiEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
-  },
-  multiEntryContainerMain: {
-    borderLeftColor: buoyColors.textSecondary + "4D",
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  relativeOutlineNone: {
-    position: "relative"
-  },
-  pageExpanderButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: buoyColors.card + "66",
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    gap: 6,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: buoyColors.textSecondary + "1A",
-    marginBottom: 2,
-    minHeight: 24
-  },
-  entriesContainer: {
-    marginLeft: 2,
-    paddingLeft: 8,
-    marginTop: 2,
-    borderLeftWidth: 1.5,
-    borderLeftColor: buoyColors.textSecondary + "40"
-  },
-  textNumber: {
-    color: buoyColors.text,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  textString: {
-    color: buoyColors.text,
-    fontFamily: monoFont
-  },
-  flexRowGapFullWidth: {
-    flexDirection: "row",
-    width: "100%",
-    alignItems: "center",
-    marginVertical: 1,
-    gap: 6,
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 3
-  },
-  text344054: {
-    color: buoyColors.textSecondary,
-    fontWeight: "600",
-    fontSize: 9,
-    minWidth: 50,
-    fontFamily: monoFont,
-    letterSpacing: 0.4,
-    opacity: 0.8
-  },
-  numberInputButtons: {
-    position: "absolute",
-    right: 8,
-    top: "50%",
-    transform: [{
-      translateY: -18
-    }],
-    flexDirection: "row",
-    gap: 4,
-    zIndex: 10
-  },
-  touchableButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 6,
-    backgroundColor: buoyColors.card + "E6",
-    borderWidth: 1,
-    borderColor: buoyColors.textSecondary + "33",
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 2,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2
-  },
-  touchableButtonFocused: {
-    borderColor: buoyColors.primary + "CC",
-    backgroundColor: buoyColors.primary + "26",
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  nebulaInputWrapper: {
-    flex: 1,
-    width: "100%",
-    position: "relative"
-  },
-  displayValueText: {
-    flex: 1,
-    color: buoyColors.text,
-    fontWeight: "400",
-    fontFamily: monoFont,
-    fontSize: 12,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.textMuted + "66",
-    minHeight: 34
-  },
-  // New redesigned styles (kept for future use)
-  dataRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    minHeight: 44,
-    gap: 12
-  },
-  dataLabel: {
-    color: buoyColors.textSecondary,
-    fontSize: 13,
-    fontWeight: "500",
-    minWidth: 80,
-    flexShrink: 0
-  },
-  dataValueContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  inputWithActions: {
-    flex: 1,
-    position: "relative"
-  },
-  numberControls: {
-    position: "absolute",
-    right: 8,
-    top: "50%",
-    transform: [{
-      translateY: -16
-    }],
-    flexDirection: "column",
-    gap: 2
-  },
-  numberButton: {
-    width: 32,
-    height: 16,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 1,
-    borderColor: buoyColors.primary + "0F"
-  },
-  readOnlyValue: {
-    color: buoyColors.text,
-    fontSize: 13,
-    fontFamily: monoFont,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.textMuted + "33",
-    flex: 1
-  },
-  actionButtons: {
-    flexDirection: "row",
-    gap: 6,
-    paddingLeft: 8
-  },
-  booleanContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.textMuted + "4D",
-    flex: 1
-  },
-  booleanText: {
-    marginLeft: 8,
-    color: buoyColors.warning,
-    fontWeight: "500",
-    fontFamily: monoFont
-  },
-  modernToggleButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.textMuted + "99",
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginVertical: 2,
-    minHeight: 34,
-    gap: 8
-  },
-  toggleIconContainer: {
-    marginRight: 6
-  },
-  toggleIcon: {
-    padding: 8,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 32,
-    height: 32
-  },
-  toggleIconSmall: {
-    width: 8,
-    height: 8,
-    borderRadius: 4
-  },
-  toggleContent: {
-    flex: 1,
-    minWidth: 0
-  },
-  toggleLabel: {
-    color: "#E5E7EB",
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    letterSpacing: 0.3
-  },
-  toggleStatus: {
-    color: "#9CA3AF",
-    fontSize: 11
-  },
-  toggleBadge: {
-    marginLeft: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 4,
-    borderWidth: 1
-  },
-  toggleBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    textTransform: "uppercase",
-    letterSpacing: 0.8,
-    fontFamily: monoFont
-  },
-  // Pre-computed toggle icon styles to avoid inline objects [[memory:4875251]]
-  toggleIconTrue: {
-    backgroundColor: buoyColors.primary
-  },
-  toggleIconFalse: {
-    backgroundColor: buoyColors.textMuted
-  },
-  // Pre-computed toggle badge styles [[memory:4875251]]
-  toggleBadgeTrue: {
-    backgroundColor: buoyColors.primary + "1A",
-    borderColor: buoyColors.primary + "4D"
-  },
-  toggleBadgeFalse: {
-    backgroundColor: buoyColors.textMuted + "1A",
-    borderColor: buoyColors.textMuted + "4D"
-  },
-  // Pre-computed toggle text styles [[memory:4875251]]
-  toggleTextTrue: {
-    color: buoyColors.primary,
-    fontWeight: "600"
-  },
-  toggleTextFalse: {
-    color: buoyColors.textSecondary,
-    fontWeight: "500"
-  },
-  // Boolean row container styles
-  booleanRowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    gap: 8,
-    paddingVertical: 2
-  },
-  booleanLabel: {
-    color: buoyColors.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    letterSpacing: 0.4,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  booleanToggleWrapper: {
-    flex: 1
-  }
-});
+"use strict";import{useState as D,useMemo as F,useCallback as I,useRef as N,useEffect as re,memo as E}from"react";import{Text as y,TouchableOpacity as C,View as g,StyleSheet as oe}from"react-native";import{displayValue as ne,buoyColors as e,monoFont as h}from"@buoy-gg/shared-ui";import{CopyButton as ie}from"@buoy-gg/shared-ui";import{ChevronRight as ae,ChevronDown as le,Trash as K}from"@buoy-gg/shared-ui";import{CyberpunkInput as de}from"@buoy-gg/shared-ui/dataViewer";import{updateNestedDataByPath as M}from"./updateNestedDataByPath";import{deleteNestedDataByPath as j}from"./deleteNestedDataByPath";import{useResponseEditor as L}from"./editorContext";import{jsx as o,jsxs as u,Fragment as O}from"react/jsx-runtime";const T=100;const w={top:8,bottom:8,left:8,right:8};const Q=12;const se=(i,n=T)=>{if(n<1||i.length===0)return[];const t=[];for(let l=0;l<i.length;l+=n){t.push(i.slice(l,l+n))}return t};const P=E(({expanded:i,isFocused:n=false,isMain:t=false})=>{return o(g,{style:[r.expanderIcon,t&&r.expanderIconMain,i?r.expanded:r.collapsed],children:i?o(le,{size:t?14:Q,color:n?e.primary:t?e.text:e.textSecondary,strokeWidth:2.5}):o(ae,{size:t?14:Q,color:n?e.primary:t?e.text:e.textSecondary,strokeWidth:2.5})})});P.displayName="Expander";const X=E(({value:i,isFocused:n=false})=>{return o(ie,{value:i,isFocused:n,buttonStyle:n?{...r.buttonStyle,...r.buttonStyleFocused}:r.buttonStyle})});X.displayName="CopyButton";const H=E(({dataPath:i,isFocused:n=false})=>{const t=L();const l=I(()=>{if(!t)return;t.onChange(j(t.root,i))},[t,i]);if(!t)return null;return o(C,{"sentry-label":"ignore devtools explorer delete button",onPress:l,style:[r.deleteButton,n&&r.deleteButtonFocused],accessibilityLabel:"Delete item",hitSlop:w,activeOpacity:.7,children:o(K,{size:14,strokeWidth:2,color:n?e.error:e.error+"CC"})})});H.displayName="DeleteItemButton";const q=E(({dataPath:i,isFocused:n=false})=>{const t=L();const l=I(()=>{if(!t)return;t.onChange(M(t.root,i,[]))},[t,i]);if(!t)return null;return o(C,{"sentry-label":"ignore devtools explorer clear button",style:[r.clearButton,n&&r.clearButtonFocused],"aria-label":"Remove all items",onPress:l,hitSlop:w,activeOpacity:.7,children:o(y,{style:[r.clearButtonText,{color:n?e.warning:e.warning+"CC"}],children:"[]"})})});q.displayName="ClearArrayButton";function ce({dataPath:i,value:n,itemsDeletable:t}){const l=L();const k=I(()=>{if(!l)return;const m=typeof n==="boolean"?n:false;l.onChange(M(l.root,i,!m))},[l,i,n]);const x=I(()=>{if(!l)return;l.onChange(j(l.root,i))},[l,i]);if(!l)return null;const S=n?r.toggleBadgeTrue:r.toggleBadgeFalse;const p=n?r.toggleTextTrue:r.toggleTextFalse;return u(C,{"sentry-label":"ignore devtools explorer toggle button",style:r.modernToggleButton,onPress:k,hitSlop:w,activeOpacity:.8,children:[o(g,{style:[r.toggleBadge,S],children:o(y,{style:[r.toggleBadgeText,p],children:n?"TRUE":"FALSE"})}),t&&o(C,{"sentry-label":"ignore devtools explorer delete button in toggle",onPress:x,style:r.deleteButtonInToggle,accessibilityLabel:"Delete item",hitSlop:w,activeOpacity:.7,children:o(K,{size:14,strokeWidth:2,color:e.error+"CC"})})]})}export default function G({editable:i,label:n,value:t,defaultExpanded:l,dataPath:k,itemsDeletable:x,dataVersion:S=0}){const p=L();const[m,_]=D(false);const[z,V]=D("");re(()=>{if(t!==null&&t!==void 0&&(typeof t==="string"||typeof t==="number")){const d=t.toString();V(d)}},[t,n,S]);const B=F(()=>{const d=n.toUpperCase();return["DATA","QUERY","QUERYKEY","TYPES","STATS","OPTIONS","OBSERVERS"].includes(d)},[n]);const[v,J]=D((l||[]).includes(n));const ee=()=>J(d=>!d);const[Y,te]=D([]);const R=F(()=>{if(t===null||t===void 0||typeof t!=="object"){return[]}if(Array.isArray(t)){const a=t.length>1e3?t.slice(0,1e3):t;return a.map((c,b)=>({label:b.toString(),value:c}))}if(t instanceof Map){const a=Array.from(t.entries()).slice(0,1e3);return a.map(([c,b])=>({label:c.toString(),value:b}))}if(t instanceof Set){const a=Array.from(t).slice(0,1e3);return a.map((c,b)=>({label:b.toString(),value:c}))}const d=Object.entries(t).slice(0,1e3);return d.map(([a,c])=>({label:a,value:c}))},[t]);const s=F(()=>{if(Array.isArray(t))return"array";if(t===null||typeof t!=="object")return typeof t;if(t instanceof Map||t instanceof Set)return"Iterable";return"object"},[t]);const W=F(()=>{return se(R,T)},[R]);const f=k??[];const U=N(p);const Z=N(f);const $=N(s);U.current=p;Z.current=f;$.current=s;const A=I((d,a)=>{V(a);const c=U.current;if(!c)return;if(d&&isNaN(Number(a)))return;const b=$.current==="number"?Number(a):a;c.onChange(M(c.root,Z.current,b))},[V]);return o(g,{style:r.minWidthWrapper,children:u(g,{style:r.fullWidthMarginRight,children:[W.length>0&&u(O,{children:[u(g,{style:[r.flexRowItemsCenterGap,B&&r.flexRowItemsCenterGapMain],children:[u(C,{"sentry-label":"ignore devtools explorer expander button",style:r.expanderButton,onPress:ee,hitSlop:w,activeOpacity:.6,children:[o(P,{expanded:v,isFocused:m,isMain:B}),o(y,{style:[r.labelText,m&&r.labelTextFocused,B&&r.labelTextMain],children:n}),o(y,{style:r.textGray500,children:`${String(s).toLowerCase()==="iterable"?"(Iterable) ":""}${R.length} ${R.length>1?`items`:`item`}`})]}),i&&u(g,{style:r.flexRowGapItemsCenter,children:[o(X,{value:t,isFocused:m}),x&&p!==null&&o(H,{dataPath:f,isFocused:m}),s==="array"&&p!==null&&o(q,{dataPath:f,isFocused:m})]})]}),v&&u(O,{children:[W.length===1&&o(g,{style:[r.singleEntryContainer,B&&r.singleEntryContainerMain],children:R.map((d,a)=>o(G,{defaultExpanded:l,label:d.label,value:d.value,editable:i,dataPath:[...f,d.label],itemsDeletable:s==="array"||s==="Iterable"||s==="object",dataVersion:S},d.label+a))}),W.length>1&&o(g,{style:r.multiEntryContainer,children:W.map((d,a)=>o(g,{children:u(g,{style:r.relativeOutlineNone,children:[u(C,{"sentry-label":"ignore devtools explorer page toggle",onPress:()=>te(c=>c.includes(a)?c.filter(b=>b!==a):[...c,a]),style:r.pageExpanderButton,hitSlop:w,children:[o(P,{expanded:Y.includes(a)}),u(y,{style:r.pageRangeText,children:["[",a*T,"...",a*T+T-1,"]"]})]}),Y.includes(a)&&o(g,{style:r.entriesContainer,children:d.map(c=>o(G,{defaultExpanded:l,label:c.label,value:c.value,editable:i,dataPath:[...f,c.label],dataVersion:S},c.label))})]})},a))})]})]}),W.length===0&&u(g,{style:r.flexRowGapFullWidth,children:[i&&p!==null&&(s==="string"||s==="number"||s==="boolean")?u(O,{children:[i&&p&&(s==="string"||s==="number")&&o(g,{style:r.nebulaInputWrapper,children:o(de,{label:n,accessibilityLabel:"Data input field for editing values",style:[s==="number"?r.textNumber:r.textString],keyboardType:s==="number"?"numeric":"default",value:z,onChangeText:d=>A(s==="number",d),onFocus:()=>_(true),onBlur:()=>_(false),showNumberControls:s==="number",onIncrement:()=>{const d=Number(z)||0;A(true,String(d+1))},onDecrement:()=>{const d=Number(z)||0;A(true,String(d-1))},showDeleteButton:x,onDelete:()=>{p.onChange(j(p.root,f))}})}),s==="boolean"&&u(g,{style:r.booleanRowContainer,children:[o(y,{style:r.booleanLabel,children:n}),o(g,{style:r.booleanToggleWrapper,children:o(ce,{dataPath:f,value:t,itemsDeletable:x})})]})]}):u(O,{children:[o(y,{style:r.text344054,children:n}),o(y,{style:r.displayValueText,children:ne(t)})]}),i&&x&&p!==null&&s!=="string"&&s!=="number"&&s!=="boolean"&&o(H,{dataPath:f,isFocused:m})]})]})})}const r=oe.create({buttonStyle:{backgroundColor:e.card+"E6",borderWidth:1,borderColor:e.textSecondary+"33",borderRadius:6,flexDirection:"row",alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2},buttonStyleFocused:{borderColor:e.primary+"CC",backgroundColor:e.primary+"26",shadowColor:e.primary,shadowOpacity:.3,shadowRadius:4},deleteButton:{backgroundColor:e.error+"1A",borderColor:e.error+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",shadowColor:e.error,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},deleteButtonFocused:{borderColor:e.error+"CC",backgroundColor:e.error+"33",shadowOpacity:.3,shadowRadius:5},deleteButtonInToggle:{backgroundColor:e.error+"1A",borderColor:e.error+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,shadowColor:e.error,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButton:{backgroundColor:e.warning+"1A",borderWidth:1,borderColor:e.warning+"4D",borderRadius:6,flexDirection:"row",padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",zIndex:10,shadowColor:e.warning,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButtonFocused:{borderColor:e.warning+"CC",backgroundColor:e.warning+"33",shadowOpacity:.3,shadowRadius:5},clearButtonText:{fontSize:12,fontWeight:"700",fontFamily:h},expanderIcon:{width:18,height:18,alignItems:"center",justifyContent:"center",marginRight:1,backgroundColor:e.textSecondary+"14",borderRadius:3},expanderIconMain:{backgroundColor:e.textSecondary+"1A",width:20,height:20,borderRadius:4,borderWidth:.5,borderColor:e.textSecondary+"33"},expanded:{transform:[{rotate:"0deg"}]},collapsed:{transform:[{rotate:"0deg"}]},minWidthWrapper:{minWidth:180,fontSize:11,flexDirection:"row",flexWrap:"wrap",width:"100%",marginVertical:.5},fullWidthMarginRight:{position:"relative",width:"100%",marginRight:1},flexRowItemsCenterGap:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3,paddingHorizontal:6,marginVertical:1,borderRadius:4,backgroundColor:e.card+"66",borderWidth:.5,borderColor:e.textSecondary+"1A"},flexRowItemsCenterGapMain:{backgroundColor:e.card+"E6",borderLeftWidth:2.5,borderLeftColor:e.textSecondary+"80",borderColor:e.textSecondary+"26",paddingVertical:5,paddingHorizontal:8,marginBottom:3,borderWidth:1,shadowColor:"#000",shadowOffset:{width:0,height:0},shadowOpacity:.08,shadowRadius:3},expanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:"transparent",paddingVertical:1,paddingHorizontal:2,gap:6,borderWidth:0,minHeight:24,flex:1},labelText:{color:e.textSecondary,fontSize:10,fontWeight:"600",marginRight:4,fontFamily:h,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:h,opacity:.7},pageRangeText:{color:e.textSecondary,fontSize:10,fontWeight:"600",fontFamily:h},flexRowGapItemsCenter:{flexDirection:"row",alignItems:"center",gap:4,paddingLeft:2},singleEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:e.textSecondary+"40"},singleEntryContainerMain:{borderLeftColor:e.textSecondary+"4D",marginLeft:4,paddingLeft:10},multiEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:e.textSecondary+"40"},multiEntryContainerMain:{borderLeftColor:e.textSecondary+"4D",marginLeft:4,paddingLeft:10},relativeOutlineNone:{position:"relative"},pageExpanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:e.card+"66",paddingVertical:3,paddingHorizontal:6,gap:6,borderRadius:4,borderWidth:.5,borderColor:e.textSecondary+"1A",marginBottom:2,minHeight:24},entriesContainer:{marginLeft:2,paddingLeft:8,marginTop:2,borderLeftWidth:1.5,borderLeftColor:e.textSecondary+"40"},textNumber:{color:e.text,fontWeight:"600",fontFamily:h},textString:{color:e.text,fontFamily:h},flexRowGapFullWidth:{flexDirection:"row",width:"100%",alignItems:"center",marginVertical:1,gap:6,paddingHorizontal:4,paddingVertical:2,borderRadius:3},text344054:{color:e.textSecondary,fontWeight:"600",fontSize:9,minWidth:50,fontFamily:h,letterSpacing:.4,opacity:.8},numberInputButtons:{position:"absolute",right:8,top:"50%",transform:[{translateY:-18}],flexDirection:"row",gap:4,zIndex:10},touchableButton:{width:32,height:32,borderRadius:6,backgroundColor:e.card+"E6",borderWidth:1,borderColor:e.textSecondary+"33",alignItems:"center",justifyContent:"center",marginLeft:2,shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2},touchableButtonFocused:{borderColor:e.primary+"CC",backgroundColor:e.primary+"26",shadowColor:e.primary,shadowOffset:{width:0,height:0},shadowOpacity:.3,shadowRadius:4,elevation:3},nebulaInputWrapper:{flex:1,width:"100%",position:"relative"},displayValueText:{flex:1,color:e.text,fontWeight:"400",fontFamily:h,fontSize:12,paddingVertical:6,paddingHorizontal:10,borderRadius:6,borderWidth:1,borderColor:e.textMuted+"66",minHeight:34},dataRow:{flexDirection:"row",alignItems:"center",paddingVertical:4,paddingHorizontal:8,minHeight:44,gap:12},dataLabel:{color:e.textSecondary,fontSize:13,fontWeight:"500",minWidth:80,flexShrink:0},dataValueContainer:{flex:1,flexDirection:"row",alignItems:"center"},inputWithActions:{flex:1,position:"relative"},numberControls:{position:"absolute",right:8,top:"50%",transform:[{translateY:-16}],flexDirection:"column",gap:2},numberButton:{width:32,height:16,borderRadius:4,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.primary+"0F"},readOnlyValue:{color:e.text,fontSize:13,fontFamily:h,paddingVertical:8,paddingHorizontal:12,borderRadius:6,borderWidth:1,borderColor:e.textMuted+"33",flex:1},actionButtons:{flexDirection:"row",gap:6,paddingLeft:8},booleanContainer:{flexDirection:"row",alignItems:"center",padding:8,borderRadius:6,borderWidth:1,borderColor:e.textMuted+"4D",flex:1},booleanText:{marginLeft:8,color:e.warning,fontWeight:"500",fontFamily:h},modernToggleButton:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:6,borderWidth:1,borderColor:e.textMuted+"99",paddingHorizontal:8,paddingVertical:6,marginVertical:2,minHeight:34,gap:8},toggleIconContainer:{marginRight:6},toggleIcon:{padding:8,borderRadius:8,alignItems:"center",justifyContent:"center",width:32,height:32},toggleIconSmall:{width:8,height:8,borderRadius:4},toggleContent:{flex:1,minWidth:0},toggleLabel:{color:"#E5E7EB",fontSize:11,fontWeight:"600",fontFamily:h,letterSpacing:.3},toggleStatus:{color:"#9CA3AF",fontSize:11},toggleBadge:{marginLeft:6,paddingHorizontal:6,paddingVertical:3,borderRadius:4,borderWidth:1},toggleBadgeText:{fontSize:9,fontWeight:"700",textTransform:"uppercase",letterSpacing:.8,fontFamily:h},toggleIconTrue:{backgroundColor:e.primary},toggleIconFalse:{backgroundColor:e.textMuted},toggleBadgeTrue:{backgroundColor:e.primary+"1A",borderColor:e.primary+"4D"},toggleBadgeFalse:{backgroundColor:e.textMuted+"1A",borderColor:e.textMuted+"4D"},toggleTextTrue:{color:e.primary,fontWeight:"600"},toggleTextFalse:{color:e.textSecondary,fontWeight:"500"},booleanRowContainer:{flexDirection:"row",alignItems:"center",width:"100%",gap:8,paddingVertical:2},booleanLabel:{color:e.textSecondary,fontSize:10,fontWeight:"600",fontFamily:h,letterSpacing:.4,minWidth:60,flexShrink:0},booleanToggleWrapper:{flex:1}});