@buoy-gg/shared-ui 7.0.41 → 7.0.42

package/lib/module/dataViewer/LiveExplorer.js

@@ -1,937 +1 @@
-"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";
-import { monoFont } from "../ui/fonts.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;
-
-  // Two sibling buttons: on web each renders a real <button>, and a delete
-  // button inside the toggle button is invalid HTML (its press would also
-  // flip the toggle).
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.toggleRow,
-    children: [/*#__PURE__*/_jsx(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"
-      })
-    }) : null]
-  });
-}
-// 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: monoFont
-  },
-  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: monoFont,
-    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: monoFont,
-    opacity: 0.7
-  },
-  pageRangeText: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  flexRowGapItemsCenter: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingLeft: 2
-  },
-  singleEntryContainer: {
-    marginLeft: 2,
-    marginTop: 2,
-    paddingLeft: 8,
-    borderLeftWidth: 1.5,
-    borderLeftColor: 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: monoFont
-  },
-  textString: {
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  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: monoFont,
-    letterSpacing: 0.4,
-    opacity: 0.8
-  },
-  nebulaInputWrapper: {
-    flex: 1,
-    width: "100%",
-    position: "relative"
-  },
-  displayValueText: {
-    flex: 1,
-    color: night.color.text,
-    fontWeight: "400",
-    fontFamily: monoFont,
-    fontSize: 12,
-    paddingVertical: 6,
-    paddingHorizontal: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.textTertiary + "66",
-    minHeight: 34
-  },
-  toggleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  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: monoFont
-  },
-  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: monoFont,
-    letterSpacing: 0.4,
-    minWidth: 60,
-    flexShrink: 0
-  },
-  booleanToggleWrapper: {
-    flex: 1
-  }
-});
+"use strict";import{useState as z,useMemo as P,useCallback as S,useRef as T,useEffect as J,memo as j}from"react";import{Text as y,TouchableOpacity as I,View as u,StyleSheet as ce}from"react-native";import{displayValue as de}from"../utils/displayValue.js";import{night as e}from"../ui/night/nightTheme.js";import{CopyButton as se}from"../ui/components/CopyButton.js";import{ChevronRight as ge,ChevronDown as ue,Trash as ee}from"../icons/index.js";import{CyberpunkInput as he}from"./CyberpunkInput.js";import{updateNestedDataByPath as pe,deleteNestedDataByPath as fe}from"./nestedPath.js";import{monoFont as b}from"../ui/fonts.js";import{jsx as l,jsxs as h,Fragment as $}from"react/jsx-runtime";const O=100;const W={top:8,bottom:8,left:8,right:8};const te=12;const be=["DATA","STATE","VALUE","QUERY","QUERYKEY","TYPES","STATS","OPTIONS","OBSERVERS"];const me=r=>r.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"");function ye(r){return r.length===0?"buoy-live-explorer-root":`buoy-live-explorer-${r.map(me).filter(Boolean).join("-")}`}const xe=(r,n=O)=>{if(n<1||r.length===0)return[];const t=[];for(let i=0;i<r.length;i+=n){t.push(r.slice(i,i+n))}return t};const U=j(({expanded:r,isFocused:n=false,isMain:t=false})=>{return l(u,{style:[o.expanderIcon,t&&o.expanderIconMain,r?o.expanded:o.collapsed],children:r?l(ue,{size:t?14:te,color:n?e.color.accent:t?e.color.text:e.color.textSecondary,strokeWidth:2.5}):l(ge,{size:t?14:te,color:n?e.color.accent:t?e.color.text:e.color.textSecondary,strokeWidth:2.5})})});U.displayName="Expander";const oe=j(({value:r,isFocused:n=false})=>{return l(se,{value:r,isFocused:n,buttonStyle:n?{...o.buttonStyle,...o.buttonStyleFocused}:o.buttonStyle})});oe.displayName="CopyButton";const Y=j(({dataPath:r,writer:n,testID:t,isFocused:i=false})=>{const s=S(()=>{n?.remove?.(r)},[n,r]);if(!n?.remove)return null;return l(I,{"sentry-label":"ignore devtools explorer delete button",testID:`${t}-delete`,accessibilityRole:"button",onPress:s,style:[o.deleteButton,i&&o.deleteButtonFocused],accessibilityLabel:"Delete item",hitSlop:W,activeOpacity:.7,children:l(ee,{size:14,strokeWidth:2,color:i?e.color.danger:e.color.danger+"CC"})})});Y.displayName="DeleteItemButton";const re=j(({dataPath:r,writer:n,testID:t,isFocused:i=false})=>{const s=S(()=>{n?.update(r,[])},[n,r]);if(!n)return null;return l(I,{"sentry-label":"ignore devtools explorer clear button",testID:`${t}-clear`,style:[o.clearButton,i&&o.clearButtonFocused],accessibilityRole:"button",accessibilityLabel:"Remove all items","aria-label":"Remove all items",onPress:s,hitSlop:W,activeOpacity:.7,children:l(y,{style:[o.clearButtonText,{color:i?e.color.warning:e.color.warning+"CC"}],children:"[]"})})});re.displayName="ClearArrayButton";function Ce({dataPath:r,writer:n,testID:t,value:i,removable:s}){const H=S(()=>{if(!n)return;const R=typeof i==="boolean"?i:false;n.update(r,!R)},[n,r,i]);const M=S(()=>{n?.remove?.(r)},[n,r]);if(!n)return null;const D=i?o.toggleBadgeTrue:o.toggleBadgeFalse;const B=i?o.toggleTextTrue:o.toggleTextFalse;return h(u,{style:o.toggleRow,children:[l(I,{"sentry-label":"ignore devtools explorer toggle button",testID:`${t}-toggle`,accessibilityRole:"button",accessibilityLabel:`${r[r.length-1]??"value"}, ${i?"true":"false"}`,style:o.modernToggleButton,onPress:H,hitSlop:W,activeOpacity:.8,children:l(u,{style:[o.toggleBadge,D],children:l(y,{style:[o.toggleBadgeText,B],children:i?"TRUE":"FALSE"})})}),s&&n.remove?l(I,{"sentry-label":"ignore devtools explorer delete button in toggle",testID:`${t}-delete`,accessibilityRole:"button",onPress:M,style:o.deleteButtonInToggle,accessibilityLabel:"Delete item",hitSlop:W,activeOpacity:.7,children:l(ee,{size:14,strokeWidth:2,color:e.color.danger+"CC"})}):null]})}export function LiveExplorer({editable:r,label:n,value:t,defaultExpanded:i,writer:s,dataPath:H,itemsDeletable:M,dataVersion:D=0,testIDForPath:B=ye,debounceMs:R=0}){const[w,Z]=z(false);const[G,A]=z("");J(()=>{if(t!==null&&t!==void 0&&(typeof t==="string"||typeof t==="number")){const c=t.toString();A(c)}},[t,n,D]);const k=P(()=>{return be.includes(n.toUpperCase())},[n]);const[_,ne]=z((i||[]).includes(n));const le=()=>ne(c=>!c);const[K,ae]=z([]);const x=P(()=>{if(t===null||t===void 0||typeof t!=="object"){return[]}if(Array.isArray(t)){const a=t.length>1e3?t.slice(0,1e3):t;return a.map((d,f)=>({label:f.toString(),value:d}))}if(t instanceof Map){const a=Array.from(t.entries()).slice(0,1e3);return a.map(([d,f])=>({label:d.toString(),value:f}))}if(t instanceof Set){const a=Array.from(t).slice(0,1e3);return a.map((d,f)=>({label:f.toString(),value:d}))}const c=Object.entries(t).slice(0,1e3);return c.map(([a,d])=>({label:a,value:d}))},[t]);const g=P(()=>{if(Array.isArray(t))return"array";if(t===null||typeof t!=="object")return typeof t;if(t instanceof Map||t instanceof Set)return"Iterable";return"object"},[t]);const E=P(()=>{return xe(x,O)},[x]);const p=H??[];const C=B(p);const v=r===true&&M===true&&s?.remove!=null&&(s.canRemove?.(p)??true);const L=T(s);const N=T(p);const Q=T(g);L.current=s;N.current=p;Q.current=g;const V=T(null);const m=T(null);const F=S(()=>{if(m.current){clearTimeout(m.current);m.current=null}const c=V.current;V.current=null;if(c)L.current?.update(c.path,c.value)},[]);J(()=>()=>F(),[F]);const X=T(R);X.current=R;const ie=S((c,a)=>{A(a);if(!L.current)return;if(c&&isNaN(Number(a)))return;const d=Q.current==="number"?Number(a):a;const f=X.current;if(f>0){V.current={path:N.current,value:d};if(m.current)clearTimeout(m.current);m.current=setTimeout(F,f)}else{L.current.update(N.current,d)}},[F,A]);const q=S(c=>{const a=Number(G)||0;const d=a+c;A(String(d));V.current=null;if(m.current){clearTimeout(m.current);m.current=null}L.current?.update(N.current,d)},[G]);return l(u,{style:o.minWidthWrapper,children:h(u,{style:o.fullWidthMarginRight,children:[E.length>0&&h($,{children:[h(u,{style:[o.flexRowItemsCenterGap,k&&o.flexRowItemsCenterGapMain],children:[h(I,{"sentry-label":"ignore devtools explorer expander button",style:o.expanderButton,testID:C,accessibilityRole:"button",accessibilityLabel:`${n}, ${x.length} ${x.length===1?"item":"items"}`,accessibilityState:{expanded:_},onPress:le,hitSlop:W,activeOpacity:.6,children:[l(U,{expanded:_,isFocused:w,isMain:k}),l(y,{style:[o.labelText,w&&o.labelTextFocused,k&&o.labelTextMain],children:n}),l(y,{style:o.textGray500,children:`${String(g).toLowerCase()==="iterable"?"(Iterable) ":""}${x.length} ${x.length>1?`items`:`item`}`})]}),r&&h(u,{style:o.flexRowGapItemsCenter,children:[l(oe,{value:t,isFocused:w}),v&&l(Y,{writer:s,dataPath:p,testID:C,isFocused:w}),g==="array"&&s!==void 0&&l(re,{writer:s,dataPath:p,testID:C,isFocused:w})]})]}),_&&h($,{children:[E.length===1&&l(u,{style:[o.singleEntryContainer,k&&o.singleEntryContainerMain],children:x.map((c,a)=>l(LiveExplorer,{defaultExpanded:i,label:c.label,value:c.value,editable:r,dataPath:[...p,c.label],writer:s,itemsDeletable:g==="array"||g==="Iterable"||g==="object",dataVersion:D,testIDForPath:B,debounceMs:R},c.label+a))}),E.length>1&&l(u,{style:o.multiEntryContainer,children:E.map((c,a)=>l(u,{children:h(u,{style:o.relativeOutlineNone,children:[h(I,{"sentry-label":"ignore devtools explorer page toggle",onPress:()=>ae(d=>d.includes(a)?d.filter(f=>f!==a):[...d,a]),style:o.pageExpanderButton,hitSlop:W,children:[l(U,{expanded:K.includes(a)}),h(y,{style:o.pageRangeText,children:["[",a*O,"...",a*O+O-1,"]"]})]}),K.includes(a)&&l(u,{style:o.entriesContainer,children:c.map(d=>l(LiveExplorer,{defaultExpanded:i,label:d.label,value:d.value,editable:r,dataPath:[...p,d.label],writer:s,dataVersion:D,testIDForPath:B,debounceMs:R},d.label))})]})},a))})]})]}),E.length===0&&h(u,{style:o.flexRowGapFullWidth,children:[r&&s!==void 0&&(g==="string"||g==="number"||g==="boolean")?h($,{children:[r&&s&&(g==="string"||g==="number")&&l(u,{style:o.nebulaInputWrapper,children:l(he,{label:n,testID:`${C}-input`,accessibilityLabel:`${n}, editable value`,style:[g==="number"?o.textNumber:o.textString],keyboardType:g==="number"?"numeric":"default",value:G,onChangeText:c=>ie(g==="number",c),onFocus:()=>Z(true),onBlur:()=>{F();Z(false)},showNumberControls:g==="number",onIncrement:()=>q(1),onDecrement:()=>q(-1),showDeleteButton:v,onDelete:()=>{s?.remove?.(p)}})}),g==="boolean"&&h(u,{style:o.booleanRowContainer,children:[l(y,{style:o.booleanLabel,children:n}),l(u,{style:o.booleanToggleWrapper,children:l(Ce,{writer:s,dataPath:p,testID:C,value:t,removable:v})})]})]}):h($,{children:[l(y,{style:o.text344054,children:n}),l(y,{testID:`${C}-value`,style:o.displayValueText,children:de(t)})]}),r&&v&&g!=="string"&&g!=="number"&&g!=="boolean"&&l(Y,{writer:s,dataPath:p,testID:C,isFocused:w})]})]})})}export function makeRootWriter(r){return{update:(n,t)=>{r.setRoot(pe(r.getRoot(),n,t))},remove:n=>{r.setRoot(fe(r.getRoot(),n))},canRemove:r.canRemove}}const o=ce.create({buttonStyle:{backgroundColor:e.color.surface+"E6",borderWidth:1,borderColor:e.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:.2,shadowRadius:2},buttonStyleFocused:{borderColor:e.color.accent+"CC",backgroundColor:e.color.accent+"26",shadowColor:e.color.accent,shadowOpacity:.3,shadowRadius:4},deleteButton:{backgroundColor:e.color.danger+"1A",borderColor:e.color.danger+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",shadowColor:e.color.danger,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},deleteButtonFocused:{borderColor:e.color.danger+"CC",backgroundColor:e.color.danger+"33",shadowOpacity:.3,shadowRadius:5},deleteButtonInToggle:{backgroundColor:e.color.danger+"1A",borderColor:e.color.danger+"4D",borderWidth:1,borderRadius:6,padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,shadowColor:e.color.danger,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButton:{backgroundColor:e.color.warning+"1A",borderWidth:1,borderColor:e.color.warning+"4D",borderRadius:6,flexDirection:"row",padding:0,alignItems:"center",justifyContent:"center",width:28,height:28,position:"relative",zIndex:10,shadowColor:e.color.warning,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3},clearButtonFocused:{borderColor:e.color.warning+"CC",backgroundColor:e.color.warning+"33",shadowOpacity:.3,shadowRadius:5},clearButtonText:{fontSize:12,fontWeight:"700",fontFamily:b},expanderIcon:{width:18,height:18,alignItems:"center",justifyContent:"center",marginRight:1,backgroundColor:e.color.textSecondary+"14",borderRadius:3},expanderIconMain:{backgroundColor:e.color.textSecondary+"1A",width:20,height:20,borderRadius:4,borderWidth:.5,borderColor:e.color.textSecondary+"33"},expanded:{transform:[{rotate:"0deg"}]},collapsed:{transform:[{rotate:"0deg"}]},minWidthWrapper:{minWidth:180,fontSize:11,flexDirection:"row",flexWrap:"wrap",width:"100%",marginVertical:.5},fullWidthMarginRight:{position:"relative",width:"100%",marginRight:1},flexRowItemsCenterGap:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3,paddingHorizontal:6,marginVertical:1,borderRadius:4,backgroundColor:e.color.surface+"66",borderWidth:.5,borderColor:e.color.textSecondary+"1A"},flexRowItemsCenterGapMain:{backgroundColor:e.color.surface+"E6",borderLeftWidth:2.5,borderLeftColor:e.color.textSecondary+"80",borderColor:e.color.textSecondary+"26",paddingVertical:5,paddingHorizontal:8,marginBottom:3,borderWidth:1,shadowColor:"#000",shadowOffset:{width:0,height:0},shadowOpacity:.08,shadowRadius:3},expanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:"transparent",paddingVertical:1,paddingHorizontal:2,gap:6,borderWidth:0,minHeight:24,flex:1},labelText:{color:e.color.textSecondary,fontSize:10,fontWeight:"600",marginRight:4,fontFamily:b,letterSpacing:.4},labelTextFocused:{color:e.color.text},labelTextMain:{color:e.color.text,fontSize:11,fontWeight:"700",letterSpacing:.6},textGray500:{color:e.color.textTertiary,fontSize:10,fontWeight:"400",fontFamily:b,opacity:.7},pageRangeText:{color:e.color.textSecondary,fontSize:10,fontWeight:"600",fontFamily:b},flexRowGapItemsCenter:{flexDirection:"row",alignItems:"center",gap:4,paddingLeft:2},singleEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:e.color.textSecondary+"40"},singleEntryContainerMain:{borderLeftColor:e.color.textSecondary+"4D",marginLeft:4,paddingLeft:10},multiEntryContainer:{marginLeft:2,marginTop:2,paddingLeft:8,borderLeftWidth:1.5,borderLeftColor:e.color.textSecondary+"40"},relativeOutlineNone:{position:"relative"},pageExpanderButton:{flexDirection:"row",alignItems:"center",backgroundColor:e.color.surface+"66",paddingVertical:3,paddingHorizontal:6,gap:6,borderRadius:4,borderWidth:.5,borderColor:e.color.textSecondary+"1A",marginBottom:2,minHeight:24},entriesContainer:{marginLeft:2,paddingLeft:8,marginTop:2,borderLeftWidth:1.5,borderLeftColor:e.color.textSecondary+"40"},textNumber:{color:e.color.text,fontWeight:"600",fontFamily:b},textString:{color:e.color.text,fontFamily:b},flexRowGapFullWidth:{flexDirection:"row",width:"100%",alignItems:"center",marginVertical:1,gap:6,paddingHorizontal:4,paddingVertical:2,borderRadius:3},text344054:{color:e.color.textSecondary,fontWeight:"600",fontSize:9,minWidth:50,fontFamily:b,letterSpacing:.4,opacity:.8},nebulaInputWrapper:{flex:1,width:"100%",position:"relative"},displayValueText:{flex:1,color:e.color.text,fontWeight:"400",fontFamily:b,fontSize:12,paddingVertical:6,paddingHorizontal:10,borderRadius:6,borderWidth:1,borderColor:e.color.textTertiary+"66",minHeight:34},toggleRow:{flexDirection:"row",alignItems:"center",gap:6},modernToggleButton:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:6,borderWidth:1,borderColor:e.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:.8,fontFamily:b},toggleBadgeTrue:{backgroundColor:e.color.accent+"1A",borderColor:e.color.accent+"4D"},toggleBadgeFalse:{backgroundColor:e.color.textTertiary+"1A",borderColor:e.color.textTertiary+"4D"},toggleTextTrue:{color:e.color.accent,fontWeight:"600"},toggleTextFalse:{color:e.color.textSecondary,fontWeight:"500"},booleanRowContainer:{flexDirection:"row",alignItems:"center",width:"100%",gap:8,paddingVertical:2},booleanLabel:{color:e.color.textSecondary,fontSize:10,fontWeight:"600",fontFamily:b,letterSpacing:.4,minWidth:60,flexShrink:0},booleanToggleWrapper:{flex:1}});