@buoy-gg/network 7.0.12 → 7.0.14

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

@@ -0,0 +1,972 @@
+"use strict";
+
+import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
+import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
+import { displayValue, buoyColors } 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: "monospace"
+  },
+  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: "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: "monospace",
+    opacity: 0.7
+  },
+  pageRangeText: {
+    color: buoyColors.textSecondary,
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  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: "monospace"
+  },
+  textString: {
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  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: "monospace",
+    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: "monospace",
+    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: "monospace",
+    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: "monospace"
+  },
+  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: "monospace",
+    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: "monospace"
+  },
+  // 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: "monospace",
+    letterSpacing: 0.4,
+    minWidth: 60,
+    flexShrink: 0
+  },
+  booleanToggleWrapper: {
+    flex: 1
+  }
+});