@buoy-gg/shared-ui 7.0.30 → 7.0.32

package/lib/module/dataViewer/LiveExplorer.js

@@ -0,0 +1,925 @@
+"use strict";
+
+/**
+ * The LIVE data editor — a recursive JSON tree whose leaves are inputs.
+ *
+ * Hoisted from @buoy-gg/react-query's `query-browser/Explorer.tsx` (the Data
+ * Editor that tool has always shipped) so every tool edits data through ONE
+ * implementation: react-query wraps it with a setQueryData writer, zustand
+ * with a merge-only setState writer, storage with a whole-key writer. There
+ * is no draft and no Save: each change writes through immediately (or on a
+ * short debounce — see below) and the app reacts while you type.
+ *
+ * What a leaf renders as is the ORIGINAL value's type, which is also what
+ * keeps edits type-safe without asking anything: strings and numbers get an
+ * inline input (numbers with +/- steppers and a numeric keyboard), booleans a
+ * one-tap TRUE/FALSE toggle, container members a delete ✕, arrays a clear-[]
+ * button. Structural edits this tree can't express (add key, rename) belong
+ * to the host's Raw escape hatch, not here.
+ *
+ * The one knob the RQ original doesn't use: `debounceMs`. A cache write is
+ * free and unlogged, so RQ writes per keystroke (`debounceMs: 0`). Zustand
+ * and storage writes are RECORDED — events timeline, per-store change counts,
+ * the free tier's change cap — and storage's hit disk, so those hosts pass
+ * ~300ms: the input echoes instantly, the write lands one beat after you stop
+ * typing (flushed on blur/unmount), and "granola" is one recorded change
+ * instead of seven. Discrete gestures — toggle, stepper, delete, clear —
+ * always write immediately.
+ */
+
+import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
+import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
+import { displayValue } from "../utils/displayValue.js";
+import { night } from "../ui/night/nightTheme.js";
+import { CopyButton as SharedCopyButton } from "../ui/components/CopyButton.js";
+import { ChevronRight, ChevronDown, Trash } from "../icons/index.js";
+import { CyberpunkInput } from "./CyberpunkInput.js";
+import { updateNestedDataByPath, deleteNestedDataByPath } from "./nestedPath.js";
+
+/**
+ * How the explorer writes into whatever owns the data. The tree never mutates
+ * anything itself — every edit is handed to the host through this.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Stable constants to prevent re-renders [[memory:4875251]]
+const CHUNK_SIZE = 100;
+const HIT_SLOP_OPTIMIZED = {
+  top: 8,
+  bottom: 8,
+  left: 8,
+  right: 8
+};
+const EXPANDER_SIZE = 12;
+
+/** Section labels drawn with the heavier "main section" treatment. */
+const MAIN_SECTION_LABELS = ["DATA", "STATE", "VALUE", "QUERY", "QUERYKEY", "TYPES", "STATS", "OPTIONS", "OBSERVERS"];
+const slugPart = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+
+/** Default handle scheme; hosts pass their own to keep an existing namespace. */
+function defaultTestIDForPath(dataPath) {
+  return dataPath.length === 0 ? "buoy-live-explorer-root" : `buoy-live-explorer-${dataPath.map(slugPart).filter(Boolean).join("-")}`;
+}
+
+// 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";
+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,
+  writer,
+  testID,
+  isFocused = false
+}) => {
+  const handleDelete = useCallback(() => {
+    writer?.remove?.(dataPath);
+  }, [writer, dataPath]);
+  if (!writer?.remove) return null;
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    "sentry-label": "ignore devtools explorer delete button",
+    testID: `${testID}-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,
+  writer,
+  testID,
+  isFocused = false
+}) => {
+  const handleClear = useCallback(() => {
+    writer?.update(dataPath, []);
+  }, [writer, dataPath]);
+  if (!writer) return null;
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    "sentry-label": "ignore devtools explorer clear button",
+    testID: `${testID}-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 passes new dataPath array
+// each render which defeats memo anyway, and we need reliable re-renders when
+// value changes
+function ToggleValueButton({
+  dataPath,
+  writer,
+  testID,
+  value,
+  removable
+}) {
+  const handleClick = useCallback(() => {
+    if (!writer) return;
+    const currentValue = typeof value === "boolean" ? value : false;
+    writer.update(dataPath, !currentValue);
+  }, [writer, dataPath, value]);
+  const handleDelete = useCallback(() => {
+    writer?.remove?.(dataPath);
+  }, [writer, dataPath]);
+  if (!writer) 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: `${testID}-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"
+      })
+    }), removable && writer.remove && /*#__PURE__*/_jsx(TouchableOpacity, {
+      "sentry-label": "ignore devtools explorer delete button in toggle",
+      testID: `${testID}-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]]
+/**
+ * Recursive live data explorer — see the module docstring. Used for both
+ * editable and read-only JSON trees.
+ */
+export function LiveExplorer({
+  editable,
+  label,
+  value,
+  defaultExpanded,
+  writer,
+  dataPath,
+  itemsDeletable,
+  dataVersion = 0,
+  testIDForPath = defaultTestIDForPath,
+  debounceMs = 0
+}) {
+  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. The owner 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(() => {
+    return MAIN_SECTION_LABELS.includes(label.toUpperCase());
+  }, [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 [[memory:4875251]]
+  const subEntries = useMemo(() => {
+    if (value === null || value === undefined || typeof value !== "object") {
+      return [];
+    }
+    if (Array.isArray(value)) {
+      const limitedValue = value.length > 1000 ? value.slice(0, 1000) : value;
+      return limitedValue.map((d, i) => ({
+        label: i.toString(),
+        value: d
+      }));
+    }
+    if (value instanceof Map) {
+      const entries = Array.from(value.entries()).slice(0, 1000);
+      return entries.map(([key, val]) => ({
+        label: key.toString(),
+        value: val
+      }));
+    }
+    if (value instanceof Set) {
+      const entries = Array.from(value).slice(0, 1000);
+      return entries.map((val, i) => ({
+        label: i.toString(),
+        value: val
+      }));
+    }
+    const entries = Object.entries(value).slice(0, 1000);
+    return entries.map(([key, val]) => ({
+      label: key,
+      value: val
+    }));
+  }, [value]);
+
+  // Optimized valueType computation 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 ?? [];
+  const nodeTestID = testIDForPath(currentDataPath);
+
+  /**
+   * Whether THIS node may be removed: the parent said its members are
+   * deletable, the writer can delete at all, and the writer doesn't veto this
+   * path (zustand's top-level keys).
+   */
+  const removalAllowed = editable === true && itemsDeletable === true && writer?.remove != null && (writer.canRemove?.(currentDataPath) ?? true);
+
+  // Optimize handleChange using refs to avoid dependency arrays [[memory:4875251]]
+  const writerRef = useRef(writer);
+  const dataPathRef = useRef(currentDataPath);
+  const valueTypeRef = useRef(valueType);
+  writerRef.current = writer;
+  dataPathRef.current = currentDataPath;
+  valueTypeRef.current = valueType;
+
+  /**
+   * Debounced-commit machinery for TYPED input. The pending edit is flushed
+   * by the timer, by blur, and by unmount — whichever comes first — so a
+   * half-typed value can't be lost, only briefly deferred.
+   */
+  const pendingRef = useRef(null);
+  const timerRef = useRef(null);
+  const flushPending = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    const pending = pendingRef.current;
+    pendingRef.current = null;
+    if (pending) writerRef.current?.update(pending.path, pending.value);
+  }, []);
+  useEffect(() => () => flushPending(), [flushPending]);
+  const debounceMsRef = useRef(debounceMs);
+  debounceMsRef.current = debounceMs;
+  const handleChange = useCallback((isNumber, newValue) => {
+    // Update local state immediately for responsive typing
+    setLocalInputValue(newValue);
+    if (!writerRef.current) return;
+    if (isNumber && isNaN(Number(newValue))) return;
+    const updatedValue = valueTypeRef.current === "number" ? Number(newValue) : newValue;
+    const ms = debounceMsRef.current;
+    if (ms > 0) {
+      pendingRef.current = {
+        path: dataPathRef.current,
+        value: updatedValue
+      };
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(flushPending, ms);
+    } else {
+      writerRef.current.update(dataPathRef.current, updatedValue);
+    }
+  }, [flushPending, setLocalInputValue]);
+
+  /** Steppers are a decision, not typing — commit immediately. */
+  const stepNumber = useCallback(delta => {
+    const currentNum = Number(localInputValue) || 0;
+    const next = currentNum + delta;
+    setLocalInputValue(String(next));
+    pendingRef.current = null;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    writerRef.current?.update(dataPathRef.current, next);
+  }, [localInputValue]);
+  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: nodeTestID,
+            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
+            }), removalAllowed && /*#__PURE__*/_jsx(DeleteItemButton, {
+              writer: writer,
+              dataPath: currentDataPath,
+              testID: nodeTestID,
+              isFocused: isRowFocused
+            }), valueType === "array" && writer !== undefined && /*#__PURE__*/_jsx(ClearArrayButton, {
+              writer: writer,
+              dataPath: currentDataPath,
+              testID: nodeTestID,
+              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(LiveExplorer, {
+              defaultExpanded: defaultExpanded,
+              label: entry.label,
+              value: entry.value,
+              editable: editable,
+              dataPath: [...currentDataPath, entry.label],
+              writer: writer,
+              itemsDeletable: valueType === "array" || valueType === "Iterable" || valueType === "object",
+              dataVersion: dataVersion,
+              testIDForPath: testIDForPath,
+              debounceMs: debounceMs
+            }, 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(LiveExplorer, {
+                    defaultExpanded: defaultExpanded,
+                    label: entry.label,
+                    value: entry.value,
+                    editable: editable,
+                    dataPath: [...currentDataPath, entry.label],
+                    writer: writer,
+                    dataVersion: dataVersion,
+                    testIDForPath: testIDForPath,
+                    debounceMs: debounceMs
+                  }, entry.label))
+                })]
+              })
+            }, index))
+          })]
+        })]
+      }), subEntryPages.length === 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.flexRowGapFullWidth,
+        children: [editable && writer !== undefined && (valueType === "string" || valueType === "number" || valueType === "boolean") ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [editable && writer && (valueType === "string" || valueType === "number") && /*#__PURE__*/_jsx(View, {
+            style: styles.nebulaInputWrapper,
+            children: /*#__PURE__*/_jsx(CyberpunkInput, {
+              label: label,
+              testID: `${nodeTestID}-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: () => {
+                // The pending debounced edit rides along with focus
+                // leaving the field — nothing typed is ever dropped.
+                flushPending();
+                setIsRowFocused(false);
+              },
+              showNumberControls: valueType === "number",
+              onIncrement: () => stepNumber(1),
+              onDecrement: () => stepNumber(-1),
+              showDeleteButton: removalAllowed,
+              onDelete: () => {
+                writer?.remove?.(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, {
+                writer: writer,
+                dataPath: currentDataPath,
+                testID: nodeTestID,
+                value: value,
+                removable: removalAllowed
+              })
+            })]
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.text344054,
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            testID: `${nodeTestID}-value`,
+            style: styles.displayValueText,
+            children: displayValue(value)
+          })]
+        }), editable && removalAllowed && valueType !== "string" && valueType !== "number" && valueType !== "boolean" && /*#__PURE__*/_jsx(DeleteItemButton, {
+          writer: writer,
+          dataPath: currentDataPath,
+          testID: nodeTestID,
+          isFocused: isRowFocused
+        })]
+      })]
+    })
+  });
+}
+
+/** A writer for plain local data — host supplies get/set of the whole root. */
+export function makeRootWriter(options) {
+  return {
+    update: (path, value) => {
+      options.setRoot(updateNestedDataByPath(options.getRoot(), path, value));
+    },
+    remove: path => {
+      options.setRoot(deleteNestedDataByPath(options.getRoot(), path));
+    },
+    canRemove: options.canRemove
+  };
+}
+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"
+  },
+  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
+  },
+  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
+  },
+  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
+  },
+  toggleBadge: {
+    marginLeft: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    borderWidth: 1
+  },
+  toggleBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 0.8,
+    fontFamily: "monospace"
+  },
+  toggleBadgeTrue: {
+    backgroundColor: night.color.accent + "1A",
+    borderColor: night.color.accent + "4D"
+  },
+  toggleBadgeFalse: {
+    backgroundColor: night.color.textTertiary + "1A",
+    borderColor: night.color.textTertiary + "4D"
+  },
+  toggleTextTrue: {
+    color: night.color.accent,
+    fontWeight: "600"
+  },
+  toggleTextFalse: {
+    color: night.color.textSecondary,
+    fontWeight: "500"
+  },
+  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
+  }
+});