@buoy-gg/react-query 7.0.30 → 7.0.32

package/lib/module/react-query/components/query-browser/Explorer.js

@@ -1,203 +1,31 @@
 "use strict";
 
-import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
+/**
+ * React Query's data explorer — now a thin wrapper over shared-ui's
+ * {@link LiveExplorer}, which is this component's own implementation hoisted
+ * so every tool (react-query, zustand, storage, whatever comes next) edits
+ * data through ONE live editor.
+ *
+ * Everything RQ-specific stays here and only here:
+ * - the WRITER: edits go through `queryClient.setQueryData` against the
+ *   active query (deletes via `deleteItem`, which forces a fresh reference so
+ *   observers re-render);
+ * - the HANDLE scheme: `explorerTestID` keeps every existing
+ *   `buoy-rq-explorer-*` testID exactly as the Detox suite knows them;
+ * - the cadence: `debounceMs: 0` — a cache write is free and unlogged, so RQ
+ *   keeps its original per-keystroke behavior.
+ */
+
+import { useMemo } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { updateNestedDataByPath } from "../../utils/updateNestedDataByPath";
-import { displayValue, night } from "@buoy-gg/shared-ui";
 import deleteItem from "../../utils/actions/deleteItem";
 import { explorerTestID } from "../../utils/testIDs";
-import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
-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";
-
-// 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 ? night.color.accent : isMain ? night.color.text : night.color.textSecondary,
-      strokeWidth: 2.5
-    }) : /*#__PURE__*/_jsx(ChevronRight, {
-      size: isMain ? 14 : EXPANDER_SIZE,
-      color: isFocused ? night.color.accent : isMain ? night.color.text : night.color.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,
-  activeQuery,
-  isFocused = false
-}) => {
-  const queryClient = useQueryClient();
-  const handleDelete = useCallback(() => {
-    if (!activeQuery) return;
-    deleteItem({
-      queryClient,
-      activeQuery: activeQuery,
-      dataPath: dataPath
-    });
-  }, [queryClient, activeQuery, dataPath]);
-  if (!activeQuery) return null;
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer delete button",
-    testID: `${explorerTestID(dataPath)}-delete`,
-    accessibilityRole: "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 ? night.color.danger : night.color.danger + "CC"
-    })
-  });
-});
-DeleteItemButton.displayName = "DeleteItemButton";
-// Memoized ClearArrayButton component [[memory:4875251]]
-const ClearArrayButton = /*#__PURE__*/memo(({
-  dataPath,
-  activeQuery,
-  isFocused = false
-}) => {
-  const queryClient = useQueryClient();
-  const handleClear = useCallback(() => {
-    if (!activeQuery) return;
-    const oldData = activeQuery.state.data;
-    const newData = updateNestedDataByPath(oldData, dataPath, []);
-    queryClient.setQueryData(activeQuery.queryKey, newData);
-  }, [queryClient, activeQuery, dataPath]);
-  if (!activeQuery) return null;
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore devtools explorer clear button",
-    testID: `${explorerTestID(dataPath)}-clear`,
-    style: [styles.clearButton, isFocused && styles.clearButtonFocused],
-    accessibilityRole: "button",
-    accessibilityLabel: "Remove all items",
-    "aria-label": "Remove all items",
-    onPress: handleClear,
-    hitSlop: HIT_SLOP_OPTIMIZED,
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.clearButtonText, {
-        color: isFocused ? night.color.warning : night.color.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,
-  activeQuery,
-  value,
-  itemsDeletable
-}) {
-  const queryClient = useQueryClient();
-  const handleClick = useCallback(() => {
-    if (!activeQuery) return;
-    const oldData = activeQuery.state.data;
-    const currentValue = typeof value === "boolean" ? value : false;
-    const newData = updateNestedDataByPath(oldData, dataPath, !currentValue);
-    queryClient.setQueryData(activeQuery.queryKey, newData);
-  }, [queryClient, activeQuery, dataPath, value]);
-  const handleDelete = useCallback(() => {
-    if (!activeQuery) return;
-    deleteItem({
-      queryClient,
-      activeQuery: activeQuery,
-      dataPath: dataPath
-    });
-  }, [queryClient, activeQuery, dataPath]);
-  if (!activeQuery) 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",
-    testID: `${explorerTestID(dataPath)}-toggle`,
-    accessibilityRole: "button",
-    accessibilityLabel: `${dataPath[dataPath.length - 1] ?? "value"}, ${value ? "true" : "false"}`,
-    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",
-      testID: `${explorerTestID(dataPath)}-delete`,
-      accessibilityRole: "button",
-      onPress: handleDelete,
-      style: styles.deleteButtonInToggle,
-      accessibilityLabel: "Delete item",
-      hitSlop: HIT_SLOP_OPTIMIZED,
-      activeOpacity: 0.7,
-      children: /*#__PURE__*/_jsx(Trash, {
-        size: 14,
-        strokeWidth: 2,
-        color: night.color.danger + "CC"
-      })
-    })]
-  });
-}
-// Optimized Explorer component following rule2 guidelines [[memory:4875251]]
+import { LiveExplorer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Recursive data explorer component used for both editable and read-only JSON trees inside the
- * React Query dev tools.
+ * Recursive data explorer component used for both editable and read-only JSON
+ * trees inside the React Query dev tools.
  */
 export default function Explorer({
   editable,
@@ -210,793 +38,33 @@ export default function Explorer({
   dataVersion = 0
 }) {
   const queryClient = useQueryClient();
-  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 activeQueryRef = useRef(activeQuery);
-  const dataPathRef = useRef(currentDataPath);
-  const valueTypeRef = useRef(valueType);
-  activeQueryRef.current = activeQuery;
-  dataPathRef.current = currentDataPath;
-  valueTypeRef.current = valueType;
-  const handleChange = useCallback((isNumber, newValue) => {
-    // Update local state immediately for responsive typing
-    setLocalInputValue(newValue);
-    if (!activeQueryRef.current) return;
-    const oldData = activeQueryRef.current.state.data;
-    if (isNumber && isNaN(Number(newValue))) return;
-    const updatedValue = valueTypeRef.current === "number" ? Number(newValue) : newValue;
-    const newData = updateNestedDataByPath(oldData, dataPathRef.current, updatedValue);
-    queryClient.setQueryData(activeQueryRef.current.queryKey, newData);
-  }, [queryClient, 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,
-            testID: explorerTestID(currentDataPath),
-            accessibilityRole: "button",
-            accessibilityLabel: `${label}, ${subEntries.length} ${subEntries.length === 1 ? "item" : "items"}`,
-            accessibilityState: {
-              expanded: isExpanded
-            },
-            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 && activeQuery !== undefined && /*#__PURE__*/_jsx(DeleteItemButton, {
-              activeQuery: activeQuery,
-              dataPath: currentDataPath,
-              isFocused: isRowFocused
-            }), valueType === "array" && activeQuery !== undefined && /*#__PURE__*/_jsx(ClearArrayButton, {
-              activeQuery: activeQuery,
-              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],
-              activeQuery: activeQuery,
-              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],
-                    activeQuery: activeQuery,
-                    dataVersion: dataVersion
-                  }, entry.label))
-                })]
-              })
-            }, index))
-          })]
-        })]
-      }), subEntryPages.length === 0 && /*#__PURE__*/_jsxs(View, {
-        style: styles.flexRowGapFullWidth,
-        children: [editable && activeQuery !== undefined && (valueType === "string" || valueType === "number" || valueType === "boolean") ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [editable && activeQuery && (valueType === "string" || valueType === "number") && /*#__PURE__*/_jsx(View, {
-            style: styles.nebulaInputWrapper,
-            children: /*#__PURE__*/_jsx(CyberpunkInput, {
-              label: label,
-              testID: `${explorerTestID(currentDataPath)}-input`,
-              accessibilityLabel: `${label}, editable value`,
-              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: () => {
-                deleteItem({
-                  queryClient,
-                  activeQuery,
-                  dataPath: 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, {
-                activeQuery: activeQuery,
-                dataPath: currentDataPath,
-                value: value,
-                itemsDeletable: itemsDeletable
-              })
-            })]
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.text344054,
-            children: label
-          }), /*#__PURE__*/_jsx(Text, {
-            testID: `${explorerTestID(currentDataPath)}-value`,
-            style: styles.displayValueText,
-            children: displayValue(value)
-          })]
-        }), editable && itemsDeletable && activeQuery !== undefined && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/_jsx(DeleteItemButton, {
-          activeQuery: activeQuery,
-          dataPath: currentDataPath,
-          isFocused: isRowFocused
-        })]
-      })]
-    })
+  const writer = useMemo(() => {
+    if (!activeQuery) return undefined;
+    return {
+      update: (path, next) => {
+        const oldData = activeQuery.state.data;
+        const newData = updateNestedDataByPath(oldData, path, next);
+        queryClient.setQueryData(activeQuery.queryKey, newData);
+      },
+      remove: path => {
+        deleteItem({
+          queryClient,
+          activeQuery,
+          dataPath: path
+        });
+      }
+    };
+  }, [queryClient, activeQuery]);
+  return /*#__PURE__*/_jsx(LiveExplorer, {
+    editable: editable,
+    label: label,
+    value: value,
+    defaultExpanded: defaultExpanded,
+    writer: writer,
+    dataPath: dataPath,
+    itemsDeletable: itemsDeletable,
+    dataVersion: dataVersion,
+    testIDForPath: explorerTestID,
+    debounceMs: 0
   });
-}
-const styles = StyleSheet.create({
-  buttonStyle: {
-    backgroundColor: night.color.surface + "E6",
-    borderWidth: 1,
-    borderColor: night.color.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: night.color.accent + "CC",
-    backgroundColor: night.color.accent + "26",
-    shadowColor: night.color.accent,
-    shadowOpacity: 0.3,
-    shadowRadius: 4
-  },
-  deleteButton: {
-    backgroundColor: night.color.danger + "1A",
-    borderColor: night.color.danger + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    shadowColor: night.color.danger,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  deleteButtonFocused: {
-    borderColor: night.color.danger + "CC",
-    backgroundColor: night.color.danger + "33",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  deleteButtonInToggle: {
-    backgroundColor: night.color.danger + "1A",
-    borderColor: night.color.danger + "4D",
-    borderWidth: 1,
-    borderRadius: 6,
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    shadowColor: night.color.danger,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButton: {
-    backgroundColor: night.color.warning + "1A",
-    borderWidth: 1,
-    borderColor: night.color.warning + "4D",
-    borderRadius: 6,
-    flexDirection: "row",
-    padding: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 28,
-    height: 28,
-    position: "relative",
-    zIndex: 10,
-    shadowColor: night.color.warning,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3
-  },
-  clearButtonFocused: {
-    borderColor: night.color.warning + "CC",
-    backgroundColor: night.color.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: night.color.textSecondary + "14",
-    borderRadius: 3
-  },
-  expanderIconMain: {
-    backgroundColor: night.color.textSecondary + "1A",
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: night.color.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: night.color.surface + "66",
-    borderWidth: 0.5,
-    borderColor: night.color.textSecondary + "1A"
-  },
-  flexRowItemsCenterGapMain: {
-    backgroundColor: night.color.surface + "E6",
-    borderLeftWidth: 2.5,
-    borderLeftColor: night.color.textSecondary + "80",
-    borderColor: night.color.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: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    marginRight: 4,
-    fontFamily: "monospace",
-    letterSpacing: 0.4
-  },
-  labelTextFocused: {
-    color: night.color.text
-  },
-  labelTextMain: {
-    color: night.color.text,
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.6
-  },
-  textGray500: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontWeight: "400",
-    fontFamily: "monospace",
-    opacity: 0.7
-  },
-  pageRangeText: {
-    color: night.color.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: night.color.textSecondary + "40"
-  },
-  singleEntryContainerMain: {
-    borderLeftColor: night.color.textSecondary + "4D",
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  multiEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: night.color.textSecondary + "40"
-  },
-  multiEntryContainerMain: {
-    borderLeftColor: night.color.textSecondary + "4D",
-    marginLeft: 4,
-    paddingLeft: 10
-  },
-  relativeOutlineNone: {
-    position: "relative"
-  },
-  pageExpanderButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surface + "66",
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    gap: 6,
-    borderRadius: 4,
-    borderWidth: 0.5,
-    borderColor: night.color.textSecondary + "1A",
-    marginBottom: 2,
-    minHeight: 24
-  },
-  entriesContainer: {
-    marginLeft: 2,
-    paddingLeft: 8,
-    marginTop: 2,
-    borderLeftWidth: 1.5,
-    borderLeftColor: night.color.textSecondary + "40"
-  },
-  textNumber: {
-    color: night.color.text,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  textString: {
-    color: night.color.text,
-    fontFamily: "monospace"
-  },
-  flexRowGapFullWidth: {
-    flexDirection: "row",
-    width: "100%",
-    alignItems: "center",
-    marginVertical: 1,
-    gap: 6,
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 3
-  },
-  text344054: {
-    color: night.color.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: night.color.surface + "E6",
-    borderWidth: 1,
-    borderColor: night.color.textSecondary + "33",
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 2,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2
-  },
-  touchableButtonFocused: {
-    borderColor: night.color.accent + "CC",
-    backgroundColor: night.color.accent + "26",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  nebulaInputWrapper: {
-    flex: 1,
-    width: "100%",
-    position: "relative"
-  },
-  displayValueText: {
-    flex: 1,
-    color: night.color.text,
-    fontWeight: "400",
-    fontFamily: "monospace",
-    fontSize: 12,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.textTertiary + "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: night.color.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: night.color.accent + "0F"
-  },
-  readOnlyValue: {
-    color: night.color.text,
-    fontSize: 13,
-    fontFamily: "monospace",
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.textTertiary + "33",
-    flex: 1
-  },
-  actionButtons: {
-    flexDirection: "row",
-    gap: 6,
-    paddingLeft: 8
-  },
-  booleanContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.textTertiary + "4D",
-    flex: 1
-  },
-  booleanText: {
-    marginLeft: 8,
-    color: night.color.warning,
-    fontWeight: "500",
-    fontFamily: "monospace"
-  },
-  modernToggleButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.textTertiary + "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: night.color.accent
-  },
-  toggleIconFalse: {
-    backgroundColor: night.color.textTertiary
-  },
-  // Pre-computed toggle badge styles [[memory:4875251]]
-  toggleBadgeTrue: {
-    backgroundColor: night.color.accent + "1A",
-    borderColor: night.color.accent + "4D"
-  },
-  toggleBadgeFalse: {
-    backgroundColor: night.color.textTertiary + "1A",
-    borderColor: night.color.textTertiary + "4D"
-  },
-  // Pre-computed toggle text styles [[memory:4875251]]
-  toggleTextTrue: {
-    color: night.color.accent,
-    fontWeight: "600"
-  },
-  toggleTextFalse: {
-    color: night.color.textSecondary,
-    fontWeight: "500"
-  },
-  // Boolean row container styles
-  booleanRowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    gap: 8,
-    paddingVertical: 2
-  },
-  booleanLabel: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace",
-    letterSpacing: 0.4,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  booleanToggleWrapper: {
-    flex: 1
-  }
-});
+}