@buoy-gg/jotai 7.0.41 → 7.0.43

package/lib/commonjs/jotai/components/JotaiModal.js

@@ -1,743 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JotaiModal = JotaiModal;
-exports.JotaiToolView = JotaiToolView;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _license = require("@buoy-gg/license");
-var _useJotaiAtomChanges = require("../hooks/useJotaiAtomChanges");
-var _JotaiAtomChangeItem = require("./JotaiAtomChangeItem");
-var _JotaiAtomDetailContent = require("./JotaiAtomDetailContent");
-var _JotaiAtomBrowser = require("./JotaiAtomBrowser");
-var _JotaiAtomValueDetailContent = require("./JotaiAtomValueDetailContent");
-var _JotaiEventFilterView = require("./JotaiEventFilterView");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Main Jotai DevTools modal
- *
- * Two tabs mirroring the Zustand DevTools pattern:
- * - Atoms tab: Browse all registered atoms and their current value
- * - Events tab: Live atom change monitoring with diffs
- */
-
-/**
- * The change log's "nothing here". Everything but the nouns is the shared
- * precedence — see `ToolEmptyState` in shared-ui for why it lives there.
- */
-function EventsEmptyState({
-  isEnabled,
-  searchText,
-  totalChanges
-}) {
-  const content = (0, _sharedUi.resolveListEmptyState)({
-    subject: "changes",
-    search: searchText,
-    total: totalChanges,
-    capturing: isEnabled,
-    waiting: {
-      otto: "waiting",
-      title: "No atom changes",
-      message: "Atom changes will appear here as values update."
-    },
-    paused: {
-      title: "No atom changes",
-      message: "Enable capture to start recording atom changes"
-    }
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-    ...content,
-    testID: `${_testIDs.JOTAI_TEST_ID}-empty`
-  });
-}
-function JotaiModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false,
-  initialTab,
-  initialSelectedChangeId,
-  initialDetailView,
-  onChangeSelect,
-  onAtomExpand
-}) {
-  const isPro = (0, _license.useIsPro)();
-  const changeLimit = (0, _sharedUi.useLimit)("jotai.changes");
-  const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)(initialTab ?? "atoms");
-  const [selectedHistoryAtom, setSelectedHistoryAtom] = (0, _react.useState)(null);
-  // The atom whose DETAIL SCREEN (live editor) is open — tapping a card in
-  // the atoms tab navigates here, mirroring ZustandModal's selectedStoreName.
-  const [selectedAtomLabel, setSelectedAtomLabel] = (0, _react.useState)(null);
-  const [showFilters, setShowFilters] = (0, _react.useState)(false);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
-  const {
-    atomChanges,
-    filteredChanges,
-    stats,
-    filter,
-    setFilter,
-    atoms,
-    clearChanges,
-    isEnabled,
-    toggleCapture
-  } = (0, _useJotaiAtomChanges.useJotaiAtomChanges)();
-
-  // Apply ignored patterns on top of filteredChanges
-  const displayedChanges = (0, _react.useMemo)(() => {
-    if (ignoredPatterns.size === 0) return filteredChanges;
-    return filteredChanges.filter(c => !Array.from(ignoredPatterns).some(p => c.atomLabel.toLowerCase().includes(p.toLowerCase())));
-  }, [filteredChanges, ignoredPatterns]);
-
-  // Apply ignored patterns to atoms list
-  const displayedAtoms = (0, _react.useMemo)(() => {
-    if (ignoredPatterns.size === 0) return atoms;
-    return atoms.filter(a => !Array.from(ignoredPatterns).some(p => a.label.toLowerCase().includes(p.toLowerCase())));
-  }, [atoms, ignoredPatterns]);
-
-  // Pro is Infinity here, so slice() returns everything and the locked count
-  // floors at 0 — no tier branching needed at the call site.
-  /**
-   * How many changes this atom has captured, before the search — the
-   * denominator the scoped empty state needs so "clear the search" is only
-   * offered when clearing it would actually show something.
-   */
-  const scopedTotalForAtom = (0, _react.useMemo)(() => {
-    if (!selectedHistoryAtom) return 0;
-    return atomChanges.filter(c => c.atomLabel === selectedHistoryAtom).length;
-  }, [atomChanges, selectedHistoryAtom]);
-  const visibleChanges = (0, _react.useMemo)(() => displayedChanges.slice(0, changeLimit), [displayedChanges, changeLimit]);
-  const lockedChangeCount = (0, _react.useMemo)(() => Math.max(0, displayedChanges.length - changeLimit), [displayedChanges.length, changeLimit]);
-  const hasLockedChanges = lockedChangeCount > 0;
-
-  // When viewing a single atom's history, scope the list
-  const activeChanges = (0, _react.useMemo)(() => {
-    if (selectedHistoryAtom) {
-      return visibleChanges.filter(c => c.atomLabel === selectedHistoryAtom);
-    }
-    return visibleChanges;
-  }, [visibleChanges, selectedHistoryAtom]);
-  const [selectedChangeId, setSelectedChangeId] = (0, _react.useState)(null);
-  const selectedChangeIndex = (0, _react.useMemo)(() => {
-    if (selectedChangeId === null) return null;
-    const idx = activeChanges.findIndex(c => c.id === selectedChangeId);
-    return idx >= 0 ? idx : null;
-  }, [selectedChangeId, activeChanges]);
-  const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
-
-  // Notify the host on selection (keyed by change id so re-renders with the
-  // same selection don't re-fire; remote mirrors fetch atom values here).
-  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!onChangeSelect) return;
-    const id = selectedChange?.id ?? null;
-    if (id === null || id === lastNotifiedSelectionRef.current) return;
-    lastNotifiedSelectionRef.current = id;
-    onChangeSelect(selectedChange);
-  }, [selectedChange, onChangeSelect]);
-
-  // Deep link into a change's detail (see initialSelectedChangeId). Applied
-  // at most once per id, so the list re-rendering — or the user pressing Back
-  // — never re-opens it.
-  const appliedInitialSelectionRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!initialSelectedChangeId) return;
-    if (appliedInitialSelectionRef.current === initialSelectedChangeId) return;
-    const exists = activeChanges.some(c => c.id === initialSelectedChangeId);
-    if (!exists) return;
-    appliedInitialSelectionRef.current = initialSelectedChangeId;
-    setSelectedChangeId(initialSelectedChangeId);
-  }, [initialSelectedChangeId, activeChanges]);
-
-  // Search state
-  const [searchText, setSearchText] = (0, _react.useState)("");
-  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
-  const searchInputRef = (0, _react.useRef)(null);
-  const flatListRef = (0, _react.useRef)(null);
-  const handleModeChange = (0, _react.useCallback)(_mode => {}, []);
-  const handleSearch = text => {
-    setSearchText(text);
-    if (activeTab === "events") {
-      setFilter(prev => ({
-        ...prev,
-        searchText: text
-      }));
-    }
-  };
-
-  /** Drop the query AND put the header back. The X, and only the X. */
-  const closeSearch = (0, _react.useCallback)(() => {
-    setSearchText("");
-    setFilter(prev => ({
-      ...prev,
-      searchText: ""
-    }));
-    setIsSearchActive(false);
-  }, [setFilter]);
-  const handleChangePress = (0, _react.useCallback)(change => {
-    setSelectedChangeId(change.id);
-  }, []);
-  const handleUpgradePress = (0, _react.useCallback)(() => {
-    setShowProModal(true);
-  }, []);
-  const handleBack = (0, _react.useCallback)(() => {
-    setSelectedChangeId(null);
-  }, []);
-  const handleIndexChange = (0, _react.useCallback)(newIndex => {
-    const change = activeChanges[newIndex];
-    if (change) setSelectedChangeId(change.id);
-  }, [activeChanges]);
-  const handleViewHistory = (0, _react.useCallback)(atomLabel => {
-    setSelectedHistoryAtom(atomLabel);
-    setSelectedChangeId(null);
-  }, []);
-  const handleBackFromHistory = (0, _react.useCallback)(() => {
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-  }, []);
-  const handleOpenAtom = (0, _react.useCallback)(label => {
-    setSelectedAtomLabel(label);
-    // The desktop mirror hydrates an atom's full value on demand — this is
-    // the moment it becomes needed (was fired on card-expand before the
-    // detail screen replaced expansion).
-    onAtomExpand?.(label);
-  }, [onAtomExpand]);
-  const handleBackFromAtom = (0, _react.useCallback)(() => {
-    setSelectedAtomLabel(null);
-  }, []);
-  const getAtomsSnapshot = (0, _react.useCallback)(() => {
-    return displayedAtoms.reduce((acc, atom) => {
-      try {
-        const value = atom.getValue();
-        acc[atom.label] = (0, _sharedUi.truncatePayload)(value);
-      } catch {
-        acc[atom.label] = null;
-      }
-      return acc;
-    }, {});
-  }, [displayedAtoms]);
-  const getEventsSnapshot = (0, _react.useCallback)(() => {
-    return displayedChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: (0, _sharedUi.truncatePayload)(change.prevValue),
-      nextValue: (0, _sharedUi.truncatePayload)(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [displayedChanges]);
-  const getHistorySnapshot = (0, _react.useCallback)(() => {
-    return activeChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: (0, _sharedUi.truncatePayload)(change.prevValue),
-      nextValue: (0, _sharedUi.truncatePayload)(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [activeChanges]);
-  const handleTogglePattern = (0, _react.useCallback)(pattern => {
-    setIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) next.delete(pattern);else next.add(pattern);
-      return next;
-    });
-  }, []);
-  const handleAddPattern = (0, _react.useCallback)(pattern => {
-    setIgnoredPatterns(prev => new Set([...prev, pattern]));
-  }, []);
-  const handleTabChange = (0, _react.useCallback)(tab => {
-    setActiveTab(tab);
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-    setShowFilters(false);
-    if (searchText) {
-      setSearchText("");
-      setFilter(prev => ({
-        ...prev,
-        searchText: ""
-      }));
-    }
-    setIsSearchActive(false);
-  }, [searchText, setFilter]);
-  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
-
-  // Built for the whole list rather than per row: the ordinal a row carries is
-  // a fact about the list around it. See ../utils/testIDs.ts for why an atom
-  // label alone cannot address a change row — and why the ordinal is counted
-  // per atom when one write can move several.
-  const rowTestIDs = (0, _react.useMemo)(() => (0, _testIDs.buildChangeRowTestIDs)(activeChanges), [activeChanges]);
-  const renderItem = (0, _react.useCallback)(({
-    item
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomChangeItem.JotaiAtomChangeItem, {
-    change: item,
-    onPress: handleChangePress,
-    testID: rowTestIDs.get(item.id)
-  }), [handleChangePress, rowTestIDs]);
-
-  // ---- Header ----
-
-  const hasActiveFilters = ignoredPatterns.size > 0;
-  const renderHeaderContent = () => {
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: () => setShowFilters(false)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: "Filters",
-          centered: true,
-          testID: `${_testIDs.JOTAI_TEST_ID}-filters-title`
-        })]
-      });
-    }
-    if (selectedChange) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: handleBack
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: `${selectedChange.atomLabel}/${selectedChange.category}`,
-          centered: true,
-          testID: `${_testIDs.JOTAI_TEST_ID}-detail-title`
-        })]
-      });
-    }
-    if (selectedHistoryAtom) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: handleBackFromHistory
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: `${selectedHistoryAtom} History`,
-          centered: true,
-          testID: `${_testIDs.JOTAI_TEST_ID}-history-title`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-            value: getHistorySnapshot,
-            disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${_testIDs.JOTAI_TEST_ID}-copy`
-          })
-        })]
-      });
-    }
-
-    // Atom detail header — the live editor screen. AFTER history: history is
-    // reached FROM the detail screen and stacks over it, so when both are set
-    // history owns the header, and its back lands you back on the detail.
-    if (selectedAtomLabel) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: handleBackFromAtom
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: selectedAtomLabel,
-          centered: true,
-          testID: `${_testIDs.JOTAI_TEST_ID}-atom-detail-title`
-        })]
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-        onBack: onBack
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-        title: "",
-        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
-          value: searchText,
-          onChangeText: handleSearch,
-          onCancel: closeSearch,
-          placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-          accessibilityLabel: "Search Jotai atoms and events",
-          iconSize: 14,
-          testID: `${_testIDs.JOTAI_TEST_ID}-search-field`,
-          containerTestID: `${_testIDs.JOTAI_TEST_ID}-search`,
-          clearTestID: `${_testIDs.JOTAI_TEST_ID}-search-clear`
-          // Stay open while the query is still narrowing the list: the
-          // header would otherwise go back to its TABS — whose counts are
-          // of the WHOLE capture — above a filtered list, with nothing to
-          // explain the gap.
-          ,
-          onBlur: () => {
-            if (searchText.length === 0) setIsSearchActive(false);
-          }
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-          tabs: [{
-            key: "atoms",
-            label: `Atoms${displayedAtoms.length > 0 ? ` (${displayedAtoms.length})` : ""}`
-          }, {
-            key: "events",
-            label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
-          }],
-          activeTab: activeTab,
-          onTabChange: handleTabChange,
-          testIDPrefix: `${_testIDs.JOTAI_TEST_ID}-tab`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          style: styles.headerActionButton,
-          testID: `${_testIDs.JOTAI_TEST_ID}-search-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => setShowFilters(true),
-          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
-          testID: `${_testIDs.JOTAI_TEST_ID}-filters-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Filters",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-            size: 14,
-            color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
-          })
-        }), activeTab === "atoms" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-          value: getAtomsSnapshot,
-          disabled: displayedAtoms.length === 0,
-          buttonStyle: styles.headerActionButton,
-          testID: `${_testIDs.JOTAI_TEST_ID}-copy`
-        }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-            value: getEventsSnapshot,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${_testIDs.JOTAI_TEST_ID}-copy`
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-            isEnabled: isEnabled,
-            onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Jotai atom capture",
-            testID: `${_testIDs.JOTAI_TEST_ID}-power`
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
-            onPress: clearChanges,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${_testIDs.JOTAI_TEST_ID}-clear`
-          })]
-        })]
-      })]
-    });
-  };
-
-  // ---- Content ----
-
-  const renderContent = () => {
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiEventFilterView.JotaiEventFilterView, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        atoms: atoms
-      });
-    }
-    if (selectedChange && selectedChangeIndex !== null) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailContent, {
-        change: selectedChange,
-        changes: activeChanges,
-        selectedIndex: selectedChangeIndex,
-        onIndexChange: handleIndexChange,
-        disableInternalFooter: true,
-        initialView: initialDetailView
-      });
-    }
-    if (selectedHistoryAtom) {
-      return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-        testID: `${_testIDs.JOTAI_TEST_ID}-history-list`,
-        data: activeChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ..._sharedUi.EVENT_LIST_PRESET
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-        testID: `${_testIDs.JOTAI_TEST_ID}-history-empty`,
-        ...(0, _sharedUi.resolveListEmptyState)({
-          subject: "changes",
-          search: searchText,
-          // Scoped to one atom, so the count is this atom's, not the log's.
-          total: searchText.trim() ? scopedTotalForAtom : 0,
-          capturing: isEnabled,
-          waiting: {
-            otto: "waiting",
-            title: "No history yet",
-            message: `Changes for ${selectedHistoryAtom} will appear here.`
-          },
-          paused: {
-            title: "No history yet",
-            message: `Capture is off, so nothing is being recorded for ${selectedHistoryAtom}.`
-          }
-        })
-      });
-    }
-
-    // Atom detail — live editor + details + read-only tree. After history in
-    // this chain for the same reason as the header: history stacks OVER the
-    // detail screen it was opened from.
-    if (selectedAtomLabel) {
-      const selectedAtom = atoms.find(a => a.label === selectedAtomLabel) ?? null;
-      return selectedAtom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomValueDetailContent.JotaiAtomValueDetailContent, {
-        atom: selectedAtom,
-        onViewHistory: handleViewHistory
-      }) :
-      /*#__PURE__*/
-      // The atom fell out of the registry mid-look (a remote mirror
-      // rebuilding, a dev reload). Say so rather than rendering nothing.
-      (0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-        testID: `${_testIDs.JOTAI_TEST_ID}-atom-detail-gone`
-        // ghost = "stale or detached: an unmounted component, an old
-        // snapshot" — exactly what the atom you are looking at has become.
-        ,
-        otto: "ghost",
-        title: "Atom no longer registered",
-        message: `${selectedAtomLabel} is not in the registry any more.`
-      });
-    }
-    if (activeTab === "atoms") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser, {
-        atoms: displayedAtoms,
-        searchQuery: searchText,
-        onOpenAtom: handleOpenAtom
-      });
-    }
-
-    // Events tab
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.disabledBanner,
-        testID: `${_testIDs.JOTAI_TEST_ID}-banner-disabled`,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
-          size: 14,
-          color: _sharedUi.night.color.warning
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.disabledText,
-          children: "Atom capture is disabled"
-        })]
-      }), hasLockedChanges && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.lockedBanner,
-        onPress: handleUpgradePress,
-        activeOpacity: 0.8,
-        testID: `${_testIDs.JOTAI_TEST_ID}-locked`,
-        accessibilityRole: "button",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.lockedText,
-          testID: `${_testIDs.JOTAI_TEST_ID}-locked-text`,
-          children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.upgradeBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.upgradeBadgeText,
-            children: "UPGRADE"
-          })
-        })]
-      }), visibleChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-        ref: flatListRef,
-        testID: `${_testIDs.JOTAI_TEST_ID}-list`,
-        data: visibleChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ..._sharedUi.EVENT_LIST_PRESET
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
-        isEnabled: isEnabled,
-        searchText: searchText,
-        totalChanges: stats.totalChanges
-      })]
-    });
-  };
-  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-jotai-modal";
-  if (!visible) return null;
-  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailFooter, {
-    change: selectedChange,
-    changes: activeChanges,
-    selectedIndex: selectedChangeIndex,
-    onIndexChange: handleIndexChange
-  }) : null;
-  const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
-
-  // The change lists own their scrolling so FlatList virtualization works
-  // (see ZustandModal — same pattern, same tool-bench evidence).
-  //
-  // The ATOM BROWSER owns its scrolling too, which is not just symmetry. Its
-  // root is a `flex: 1` ScrollView, and a `flex: 1` box inside JsModal's
-  // wrapper (`contentContainerStyle: { flexGrow: 1 }`) resolves against the
-  // CONTENT rather than the viewport — so nested, the browser's scroller grows
-  // to the full height of its rows, never scrolls, and the wrapper scrolls
-  // instead. A person cannot tell the difference; automation can, because the
-  // scroller Detox is handed reports a frame taller than the sheet and every
-  // scroll start point it computes lands in the clipped part ("view is not
-  // scrollable at the given start point"). Owning the scroll gives the browser
-  // a bounded height and one scroller with a handle on it.
-  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryAtom != null || activeTab === "events" || activeTab === "atoms");
-  const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: renderContent()
-  });
-  const upgradeModal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
-    visible: showProModal,
-    onClose: () => setShowProModal(false),
-    featureName: "Full Atom History"
-  });
-
-  // The ONLY difference between the phone and the desktop dashboard is which
-  // shell the header, body and footer go in. Everything above this is shared.
-  if (inline) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.inlineHeader,
-          ..._sharedUi.windowDragProps,
-          children: renderHeaderContent()
-        }), body, footerNode]
-      }), upgradeModal]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
-      visible: visible,
-      onClose: onClose,
-      onMinimize: onMinimize,
-      persistenceKey: persistenceKey,
-      header: {
-        showToggleButton: true,
-        customContent: renderHeaderContent()
-      },
-      onModeChange: handleModeChange,
-      enablePersistence: true,
-      initialMode: "bottomSheet",
-      enableGlitchEffects: true,
-      disableScrollWrapper: listOwnsScroll,
-      styles: {},
-      footer: footerNode,
-      footerHeight: footerHeight,
-      children: body
-    }), upgradeModal]
-  });
-}
-
-/**
- * The same Jotai tool as `JotaiModal`, rendered INLINE for hosts that
- * place tools in a panel rather than a modal. Exists so there is exactly one
- * implementation — the desktop dashboard used to ship its own copy of this
- * component's header, list and detail router.
- */
-function JotaiToolView(props = {}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so the desktop workbench's hoisted sky (one field spanning
-    // sidebar + panel) shows through — the shell paints its base beneath it.
-    backgroundColor: "transparent"
-  },
-  inlineHeader: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonActive: {
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderColor: _sharedUi.night.color.accentBorderStrong
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.night.color.warningSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.warning + "20"
-  },
-  disabledText: {
-    color: _sharedUi.night.color.warning,
-    fontSize: 11,
-    flex: 1
-  },
-  listContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
-  },
-  lockedBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorder
-  },
-  lockedText: {
-    color: _sharedUi.night.color.accent,
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
-  upgradeBadge: {
-    backgroundColor: _sharedUi.night.color.accent,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  upgradeBadgeText: {
-    // Ink on a filled accent surface — the night accent takes dark ink.
-    color: _sharedUi.night.color.onAccent,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JotaiModal=JotaiModal;exports.JotaiToolView=JotaiToolView;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _license=require("@buoy-gg/license");var _useJotaiAtomChanges=require("../hooks/useJotaiAtomChanges");var _JotaiAtomChangeItem=require("./JotaiAtomChangeItem");var _JotaiAtomDetailContent=require("./JotaiAtomDetailContent");var _JotaiAtomBrowser=require("./JotaiAtomBrowser");var _JotaiAtomValueDetailContent=require("./JotaiAtomValueDetailContent");var _JotaiEventFilterView=require("./JotaiEventFilterView");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function EventsEmptyState({isEnabled:u,searchText:S,totalChanges:y}){const A=(0,_sharedUi.resolveListEmptyState)({subject:"changes",search:S,total:y,capturing:u,waiting:{otto:"waiting",title:"No atom changes",message:"Atom changes will appear here as values update."},paused:{title:"No atom changes",message:"Enable capture to start recording atom changes"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...A,testID:`${_testIDs.JOTAI_TEST_ID}-empty`})}function JotaiModal({visible:u,onClose:S,onBack:y,onMinimize:A,enableSharedModalDimensions:Q=false,inline:X=false,initialTab:Y,initialSelectedChangeId:h,initialDetailView:Z,onChangeSelect:j,onAtomExpand:B}){const ve=(0,_license.useIsPro)();const I=(0,_sharedUi.useLimit)("jotai.changes");const[ee,M]=(0,_react.useState)(false);const[s,te]=(0,_react.useState)(Y??"atoms");const[a,_]=(0,_react.useState)(null);const[T,H]=(0,_react.useState)(null);const[D,v]=(0,_react.useState)(false);const[l,V]=(0,_react.useState)(new Set);const{atomChanges:P,filteredChanges:E,stats:oe,filter:Ee,setFilter:b,atoms:x,clearChanges:ae,isEnabled:C,toggleCapture:ne}=(0,_useJotaiAtomChanges.useJotaiAtomChanges)();const r=(0,_react.useMemo)(()=>{if(l.size===0)return E;return E.filter(e=>!Array.from(l).some(t=>e.atomLabel.toLowerCase().includes(t.toLowerCase())))},[E,l]);const g=(0,_react.useMemo)(()=>{if(l.size===0)return x;return x.filter(e=>!Array.from(l).some(t=>e.label.toLowerCase().includes(t.toLowerCase())))},[x,l]);const re=(0,_react.useMemo)(()=>{if(!a)return 0;return P.filter(e=>e.atomLabel===a).length},[P,a]);const f=(0,_react.useMemo)(()=>r.slice(0,I),[r,I]);const w=(0,_react.useMemo)(()=>Math.max(0,r.length-I),[r.length,I]);const se=w>0;const o=(0,_react.useMemo)(()=>{if(a){return f.filter(e=>e.atomLabel===a)}return f},[f,a]);const[k,c]=(0,_react.useState)(null);const d=(0,_react.useMemo)(()=>{if(k===null)return null;const e=o.findIndex(t=>t.id===k);return e>=0?e:null},[k,o]);const n=d!==null?o[d]:null;const $=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{if(!j)return;const e=n?.id??null;if(e===null||e===$.current)return;$.current=e;j(n)},[n,j]);const O=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{if(!h)return;if(O.current===h)return;const e=o.some(t=>t.id===h);if(!e)return;O.current=h;c(h)},[h,o]);const[i,J]=(0,_react.useState)("");const[le,p]=(0,_react.useState)(false);const we=(0,_react.useRef)(null);const ie=(0,_react.useRef)(null);const ce=(0,_react.useCallback)(e=>{},[]);const de=e=>{J(e);if(s==="events"){b(t=>({...t,searchText:e}))}};const ue=(0,_react.useCallback)(()=>{J("");b(e=>({...e,searchText:""}));p(false)},[b]);const L=(0,_react.useCallback)(e=>{c(e.id)},[]);const he=(0,_react.useCallback)(()=>{M(true)},[]);const ge=(0,_react.useCallback)(()=>{c(null)},[]);const R=(0,_react.useCallback)(e=>{const t=o[e];if(t)c(t.id)},[o]);const me=(0,_react.useCallback)(e=>{_(e);c(null)},[]);const Te=(0,_react.useCallback)(()=>{_(null);c(null)},[]);const be=(0,_react.useCallback)(e=>{H(e);B?.(e)},[B]);const xe=(0,_react.useCallback)(()=>{H(null)},[]);const fe=(0,_react.useCallback)(()=>{return g.reduce((e,t)=>{try{const m=t.getValue();e[t.label]=(0,_sharedUi.truncatePayload)(m)}catch{e[t.label]=null}return e},{})},[g]);const ye=(0,_react.useCallback)(()=>{return r.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:(0,_sharedUi.truncatePayload)(e.prevValue),nextValue:(0,_sharedUi.truncatePayload)(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys}))},[r]);const Ie=(0,_react.useCallback)(()=>{return o.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:(0,_sharedUi.truncatePayload)(e.prevValue),nextValue:(0,_sharedUi.truncatePayload)(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys}))},[o]);const Ce=(0,_react.useCallback)(e=>{V(t=>{const m=new Set(t);if(m.has(e))m.delete(e);else m.add(e);return m})},[]);const pe=(0,_react.useCallback)(e=>{V(t=>new Set([...t,e]))},[]);const Se=(0,_react.useCallback)(e=>{te(e);_(null);c(null);v(false);if(i){J("");b(t=>({...t,searchText:""}))}p(false)},[i,b]);const F=(0,_react.useCallback)(e=>e.id,[]);const z=(0,_react.useMemo)(()=>(0,_testIDs.buildChangeRowTestIDs)(o),[o]);const N=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_JotaiAtomChangeItem.JotaiAtomChangeItem,{change:e,onPress:L,testID:z.get(e.id)}),[L,z]);const q=l.size>0;const W=()=>{if(D){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>v(false)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters",centered:true,testID:`${_testIDs.JOTAI_TEST_ID}-filters-title`})]})}if(n){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:ge}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${n.atomLabel}/${n.category}`,centered:true,testID:`${_testIDs.JOTAI_TEST_ID}-detail-title`})]})}if(a){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:Te}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${a} History`,centered:true,testID:`${_testIDs.JOTAI_TEST_ID}-history-title`}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:Ie,disabled:o.length===0,buttonStyle:styles.headerActionButton,testID:`${_testIDs.JOTAI_TEST_ID}-copy`})})]})}if(T){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:xe}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:T,centered:true,testID:`${_testIDs.JOTAI_TEST_ID}-atom-detail-title`})]})}return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[y&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:y}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:le?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:i,onChangeText:de,onCancel:ue,placeholder:s==="atoms"?"Search atoms...":"Search events...",accessibilityLabel:"Search Jotai atoms and events",iconSize:14,testID:`${_testIDs.JOTAI_TEST_ID}-search-field`,containerTestID:`${_testIDs.JOTAI_TEST_ID}-search`,clearTestID:`${_testIDs.JOTAI_TEST_ID}-search-clear`,onBlur:()=>{if(i.length===0)p(false)}}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"atoms",label:`Atoms${g.length>0?` (${g.length})`:""}`},{key:"events",label:`Events${r.length>0?` (${r.length})`:""}`}],activeTab:s,onTabChange:Se,testIDPrefix:`${_testIDs.JOTAI_TEST_ID}-tab`})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>p(true),style:styles.headerActionButton,testID:`${_testIDs.JOTAI_TEST_ID}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search",children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>v(true),style:[styles.headerActionButton,q&&styles.headerActionButtonActive],testID:`${_testIDs.JOTAI_TEST_ID}-filters-open`,accessibilityRole:"button",accessibilityLabel:"Filters",children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:q?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),s==="atoms"&&(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:fe,disabled:g.length===0,buttonStyle:styles.headerActionButton,testID:`${_testIDs.JOTAI_TEST_ID}-copy`}),s==="events"&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:ye,disabled:r.length===0,buttonStyle:styles.headerActionButton,testID:`${_testIDs.JOTAI_TEST_ID}-copy`}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:C,onToggle:ne,accessibilityLabel:"Toggle Jotai atom capture",testID:`${_testIDs.JOTAI_TEST_ID}-power`}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarClearButton,{onPress:ae,disabled:r.length===0,buttonStyle:styles.headerActionButton,testID:`${_testIDs.JOTAI_TEST_ID}-clear`})]})]})]})};const Ae=()=>{if(D){return(0,_jsxRuntime.jsx)(_JotaiEventFilterView.JotaiEventFilterView,{ignoredPatterns:l,onTogglePattern:Ce,onAddPattern:pe,atoms:x})}if(n&&d!==null){return(0,_jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailContent,{change:n,changes:o,selectedIndex:d,onIndexChange:R,disableInternalFooter:true,initialView:Z})}if(a){return o.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:`${_testIDs.JOTAI_TEST_ID}-history-list`,data:o,renderItem:N,keyExtractor:F,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:true,..._sharedUi.EVENT_LIST_PRESET}):(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.JOTAI_TEST_ID}-history-empty`,...(0,_sharedUi.resolveListEmptyState)({subject:"changes",search:i,total:i.trim()?re:0,capturing:C,waiting:{otto:"waiting",title:"No history yet",message:`Changes for ${a} will appear here.`},paused:{title:"No history yet",message:`Capture is off, so nothing is being recorded for ${a}.`}})})}if(T){const e=x.find(t=>t.label===T)??null;return e?(0,_jsxRuntime.jsx)(_JotaiAtomValueDetailContent.JotaiAtomValueDetailContent,{atom:e,onViewHistory:me}):(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.JOTAI_TEST_ID}-atom-detail-gone`,otto:"ghost",title:"Atom no longer registered",message:`${T} is not in the registry any more.`})}if(s==="atoms"){return(0,_jsxRuntime.jsx)(_JotaiAtomBrowser.JotaiAtomBrowser,{atoms:g,searchQuery:i,onOpenAtom:be})}return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!C&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,testID:`${_testIDs.JOTAI_TEST_ID}-banner-disabled`,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Atom capture is disabled"})]}),se&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:he,activeOpacity:.8,testID:`${_testIDs.JOTAI_TEST_ID}-locked`,accessibilityRole:"button",children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,testID:`${_testIDs.JOTAI_TEST_ID}-locked-text`,children:[w," older"," ",w===1?"change":"changes"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),f.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:ie,testID:`${_testIDs.JOTAI_TEST_ID}-list`,data:f,renderItem:N,keyExtractor:F,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:true,..._sharedUi.EVENT_LIST_PRESET}):(0,_jsxRuntime.jsx)(EventsEmptyState,{isEnabled:C,searchText:i,totalChanges:oe.totalChanges})]})};const je=Q?_sharedUi.devToolsStorageKeys.modal.root():"buoy-jotai-modal";if(!u)return null;const K=n&&d!==null?(0,_jsxRuntime.jsx)(_JotaiAtomDetailContent.JotaiAtomDetailFooter,{change:n,changes:o,selectedIndex:d,onIndexChange:R}):null;const _e=n&&o.length>1?68:0;const De=!D&&!(n&&d!==null)&&(a!=null||s==="events"||s==="atoms");const U=(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:Ae()});const G=(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:ee,onClose:()=>M(false),featureName:"Full Atom History"});if(X){return(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:W()}),U,K]}),G]})}return(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:u,onClose:S,onMinimize:A,persistenceKey:je,header:{showToggleButton:true,customContent:W()},onModeChange:ce,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:De,styles:{},footer:K,footerHeight:_e,children:U}),G]})}function JotaiToolView(u={}){return(0,_jsxRuntime.jsx)(JotaiModal,{...u,inline:true,visible:true,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonActive:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"20"},disabledText:{color:_sharedUi.night.color.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.night.color.text,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.accentBorder},lockedText:{color:_sharedUi.night.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:_sharedUi.night.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});