@buoy-gg/jotai 7.0.41 → 7.0.43

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

@@ -1,738 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, night, Search, Filter, Power, ToolEmptyState, resolveListEmptyState, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { useJotaiAtomChanges } from "../hooks/useJotaiAtomChanges";
-import { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
-import { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./JotaiAtomDetailContent";
-import { JotaiAtomBrowser } from "./JotaiAtomBrowser";
-import { JotaiAtomValueDetailContent } from "./JotaiAtomValueDetailContent";
-import { JotaiEventFilterView } from "./JotaiEventFilterView";
-import { JOTAI_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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 = 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__*/_jsx(ToolEmptyState, {
-    ...content,
-    testID: `${JOTAI_TEST_ID}-empty`
-  });
-}
-export function JotaiModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false,
-  initialTab,
-  initialSelectedChangeId,
-  initialDetailView,
-  onChangeSelect,
-  onAtomExpand
-}) {
-  const isPro = useIsPro();
-  const changeLimit = useLimit("jotai.changes");
-  const [showProModal, setShowProModal] = useState(false);
-  const [activeTab, setActiveTab] = useState(initialTab ?? "atoms");
-  const [selectedHistoryAtom, setSelectedHistoryAtom] = 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] = useState(null);
-  const [showFilters, setShowFilters] = useState(false);
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
-  const {
-    atomChanges,
-    filteredChanges,
-    stats,
-    filter,
-    setFilter,
-    atoms,
-    clearChanges,
-    isEnabled,
-    toggleCapture
-  } = useJotaiAtomChanges();
-
-  // Apply ignored patterns on top of filteredChanges
-  const displayedChanges = 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 = 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 = useMemo(() => {
-    if (!selectedHistoryAtom) return 0;
-    return atomChanges.filter(c => c.atomLabel === selectedHistoryAtom).length;
-  }, [atomChanges, selectedHistoryAtom]);
-  const visibleChanges = useMemo(() => displayedChanges.slice(0, changeLimit), [displayedChanges, changeLimit]);
-  const lockedChangeCount = 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 = useMemo(() => {
-    if (selectedHistoryAtom) {
-      return visibleChanges.filter(c => c.atomLabel === selectedHistoryAtom);
-    }
-    return visibleChanges;
-  }, [visibleChanges, selectedHistoryAtom]);
-  const [selectedChangeId, setSelectedChangeId] = useState(null);
-  const selectedChangeIndex = 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 = useRef(null);
-  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 = useRef(null);
-  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] = useState("");
-  const [isSearchActive, setIsSearchActive] = useState(false);
-  const searchInputRef = useRef(null);
-  const flatListRef = useRef(null);
-  const handleModeChange = 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 = useCallback(() => {
-    setSearchText("");
-    setFilter(prev => ({
-      ...prev,
-      searchText: ""
-    }));
-    setIsSearchActive(false);
-  }, [setFilter]);
-  const handleChangePress = useCallback(change => {
-    setSelectedChangeId(change.id);
-  }, []);
-  const handleUpgradePress = useCallback(() => {
-    setShowProModal(true);
-  }, []);
-  const handleBack = useCallback(() => {
-    setSelectedChangeId(null);
-  }, []);
-  const handleIndexChange = useCallback(newIndex => {
-    const change = activeChanges[newIndex];
-    if (change) setSelectedChangeId(change.id);
-  }, [activeChanges]);
-  const handleViewHistory = useCallback(atomLabel => {
-    setSelectedHistoryAtom(atomLabel);
-    setSelectedChangeId(null);
-  }, []);
-  const handleBackFromHistory = useCallback(() => {
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-  }, []);
-  const handleOpenAtom = 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 = useCallback(() => {
-    setSelectedAtomLabel(null);
-  }, []);
-  const getAtomsSnapshot = useCallback(() => {
-    return displayedAtoms.reduce((acc, atom) => {
-      try {
-        const value = atom.getValue();
-        acc[atom.label] = truncatePayload(value);
-      } catch {
-        acc[atom.label] = null;
-      }
-      return acc;
-    }, {});
-  }, [displayedAtoms]);
-  const getEventsSnapshot = useCallback(() => {
-    return displayedChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: truncatePayload(change.prevValue),
-      nextValue: truncatePayload(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [displayedChanges]);
-  const getHistorySnapshot = useCallback(() => {
-    return activeChanges.map(change => ({
-      id: change.id,
-      atomLabel: change.atomLabel,
-      timestamp: change.timestamp,
-      prevValue: truncatePayload(change.prevValue),
-      nextValue: truncatePayload(change.nextValue),
-      hasValueChange: change.hasValueChange,
-      changedKeys: change.changedKeys
-    }));
-  }, [activeChanges]);
-  const handleTogglePattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) next.delete(pattern);else next.add(pattern);
-      return next;
-    });
-  }, []);
-  const handleAddPattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => new Set([...prev, pattern]));
-  }, []);
-  const handleTabChange = useCallback(tab => {
-    setActiveTab(tab);
-    setSelectedHistoryAtom(null);
-    setSelectedChangeId(null);
-    setShowFilters(false);
-    if (searchText) {
-      setSearchText("");
-      setFilter(prev => ({
-        ...prev,
-        searchText: ""
-      }));
-    }
-    setIsSearchActive(false);
-  }, [searchText, setFilter]);
-  const keyExtractor = 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 = useMemo(() => buildChangeRowTestIDs(activeChanges), [activeChanges]);
-  const renderItem = useCallback(({
-    item
-  }) => /*#__PURE__*/_jsx(JotaiAtomChangeItem, {
-    change: item,
-    onPress: handleChangePress,
-    testID: rowTestIDs.get(item.id)
-  }), [handleChangePress, rowTestIDs]);
-
-  // ---- Header ----
-
-  const hasActiveFilters = ignoredPatterns.size > 0;
-  const renderHeaderContent = () => {
-    if (showFilters) {
-      return /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: () => setShowFilters(false)
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: "Filters",
-          centered: true,
-          testID: `${JOTAI_TEST_ID}-filters-title`
-        })]
-      });
-    }
-    if (selectedChange) {
-      return /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBack
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: `${selectedChange.atomLabel}/${selectedChange.category}`,
-          centered: true,
-          testID: `${JOTAI_TEST_ID}-detail-title`
-        })]
-      });
-    }
-    if (selectedHistoryAtom) {
-      return /*#__PURE__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBackFromHistory
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: `${selectedHistoryAtom} History`,
-          centered: true,
-          testID: `${JOTAI_TEST_ID}-history-title`
-        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-          children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
-            value: getHistorySnapshot,
-            disabled: activeChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${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__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: handleBackFromAtom
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: selectedAtomLabel,
-          centered: true,
-          testID: `${JOTAI_TEST_ID}-atom-detail-title`
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsxs(ModalHeader, {
-      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-        onBack: onBack
-      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
-          value: searchText,
-          onChangeText: handleSearch,
-          onCancel: closeSearch,
-          placeholder: activeTab === "atoms" ? "Search atoms..." : "Search events...",
-          accessibilityLabel: "Search Jotai atoms and events",
-          iconSize: 14,
-          testID: `${JOTAI_TEST_ID}-search-field`,
-          containerTestID: `${JOTAI_TEST_ID}-search`,
-          clearTestID: `${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__*/_jsx(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: `${JOTAI_TEST_ID}-tab`
-        })
-      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          style: styles.headerActionButton,
-          testID: `${JOTAI_TEST_ID}-search-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Search",
-          children: /*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setShowFilters(true),
-          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
-          testID: `${JOTAI_TEST_ID}-filters-open`,
-          accessibilityRole: "button",
-          accessibilityLabel: "Filters",
-          children: /*#__PURE__*/_jsx(Filter, {
-            size: 14,
-            color: hasActiveFilters ? night.color.accent : night.color.textSecondary
-          })
-        }), activeTab === "atoms" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
-          value: getAtomsSnapshot,
-          disabled: displayedAtoms.length === 0,
-          buttonStyle: styles.headerActionButton,
-          testID: `${JOTAI_TEST_ID}-copy`
-        }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-            value: getEventsSnapshot,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${JOTAI_TEST_ID}-copy`
-          }), /*#__PURE__*/_jsx(PowerToggleButton, {
-            isEnabled: isEnabled,
-            onToggle: toggleCapture,
-            accessibilityLabel: "Toggle Jotai atom capture",
-            testID: `${JOTAI_TEST_ID}-power`
-          }), /*#__PURE__*/_jsx(ToolbarClearButton, {
-            onPress: clearChanges,
-            disabled: displayedChanges.length === 0,
-            buttonStyle: styles.headerActionButton,
-            testID: `${JOTAI_TEST_ID}-clear`
-          })]
-        })]
-      })]
-    });
-  };
-
-  // ---- Content ----
-
-  const renderContent = () => {
-    if (showFilters) {
-      return /*#__PURE__*/_jsx(JotaiEventFilterView, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        atoms: atoms
-      });
-    }
-    if (selectedChange && selectedChangeIndex !== null) {
-      return /*#__PURE__*/_jsx(JotaiAtomDetailContent, {
-        change: selectedChange,
-        changes: activeChanges,
-        selectedIndex: selectedChangeIndex,
-        onIndexChange: handleIndexChange,
-        disableInternalFooter: true,
-        initialView: initialDetailView
-      });
-    }
-    if (selectedHistoryAtom) {
-      return activeChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
-        testID: `${JOTAI_TEST_ID}-history-list`,
-        data: activeChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ...EVENT_LIST_PRESET
-      }) : /*#__PURE__*/_jsx(ToolEmptyState, {
-        testID: `${JOTAI_TEST_ID}-history-empty`,
-        ...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__*/_jsx(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.
-      _jsx(ToolEmptyState, {
-        testID: `${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__*/_jsx(JotaiAtomBrowser, {
-        atoms: displayedAtoms,
-        searchQuery: searchText,
-        onOpenAtom: handleOpenAtom
-      });
-    }
-
-    // Events tab
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [!isEnabled && /*#__PURE__*/_jsxs(View, {
-        style: styles.disabledBanner,
-        testID: `${JOTAI_TEST_ID}-banner-disabled`,
-        children: [/*#__PURE__*/_jsx(Power, {
-          size: 14,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.disabledText,
-          children: "Atom capture is disabled"
-        })]
-      }), hasLockedChanges && /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.lockedBanner,
-        onPress: handleUpgradePress,
-        activeOpacity: 0.8,
-        testID: `${JOTAI_TEST_ID}-locked`,
-        accessibilityRole: "button",
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: styles.lockedText,
-          testID: `${JOTAI_TEST_ID}-locked-text`,
-          children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.upgradeBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.upgradeBadgeText,
-            children: "UPGRADE"
-          })
-        })]
-      }), visibleChanges.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
-        ref: flatListRef,
-        testID: `${JOTAI_TEST_ID}-list`,
-        data: visibleChanges,
-        renderItem: renderItem,
-        keyExtractor: keyExtractor,
-        contentContainerStyle: styles.listContent,
-        showsVerticalScrollIndicator: true,
-        ...EVENT_LIST_PRESET
-      }) : /*#__PURE__*/_jsx(EventsEmptyState, {
-        isEnabled: isEnabled,
-        searchText: searchText,
-        totalChanges: stats.totalChanges
-      })]
-    });
-  };
-  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : "buoy-jotai-modal";
-  if (!visible) return null;
-  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/_jsx(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__*/_jsx(View, {
-    style: styles.container,
-    children: renderContent()
-  });
-  const upgradeModal = /*#__PURE__*/_jsx(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__*/_jsxs(TickProvider, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.inlineHeader,
-          ...windowDragProps,
-          children: renderHeaderContent()
-        }), body, footerNode]
-      }), upgradeModal]
-    });
-  }
-  return /*#__PURE__*/_jsxs(TickProvider, {
-    children: [/*#__PURE__*/_jsx(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.
- */
-export function JotaiToolView(props = {}) {
-  return /*#__PURE__*/_jsx(JotaiModal, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = 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: 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: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  disabledBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.warningSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.warning + "20"
-  },
-  disabledText: {
-    color: night.color.warning,
-    fontSize: 11,
-    flex: 1
-  },
-  listContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 18
-  },
-  lockedBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: 10,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.accentSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.accentBorder
-  },
-  lockedText: {
-    color: night.color.accent,
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
-  upgradeBadge: {
-    backgroundColor: night.color.accent,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  upgradeBadgeText: {
-    // Ink on a filled accent surface — the night accent takes dark ink.
-    color: night.color.onAccent,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  }
-});
+"use strict";import{useState as g,useMemo as p,useRef as E,useCallback as r,useEffect as he}from"react";import{View as D,Text as K,StyleSheet as qe,FlatList as ge,TouchableOpacity as O}from"react-native";import{JsModal as Xe,ModalHeader as a,TabSelector as Ye,macOSColors as Ze,night as l,Search as et,Filter as tt,Power as ot,ToolEmptyState as U,resolveListEmptyState as me,devToolsStorageKeys as nt,ProUpgradeModal as rt,PowerToggleButton as at,ToolbarCopyButton as G,ToolbarClearButton as lt,truncatePayload as $,TickProvider as fe,useLimit as st,windowDragProps as it,EVENT_LIST_PRESET as be}from"@buoy-gg/shared-ui";import{useIsPro as ct}from"@buoy-gg/license";import{useJotaiAtomChanges as dt}from"../hooks/useJotaiAtomChanges";import{JotaiAtomChangeItem as ut}from"./JotaiAtomChangeItem";import{JotaiAtomDetailContent as ht,JotaiAtomDetailFooter as gt}from"./JotaiAtomDetailContent";import{JotaiAtomBrowser as mt}from"./JotaiAtomBrowser";import{JotaiAtomValueDetailContent as ft}from"./JotaiAtomValueDetailContent";import{JotaiEventFilterView as bt}from"./JotaiEventFilterView";import{JOTAI_TEST_ID as n,buildChangeRowTestIDs as pt}from"../utils/testIDs";import{jsx as t,jsxs as c,Fragment as pe}from"react/jsx-runtime";function yt({isEnabled:S,searchText:H,totalChanges:k}){const z=me({subject:"changes",search:H,total:k,capturing:S,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 t(U,{...z,testID:`${n}-empty`})}export function JotaiModal({visible:S,onClose:H,onBack:k,onMinimize:z,enableSharedModalDimensions:ye=false,inline:Ce=false,initialTab:Se,initialSelectedChangeId:T,initialDetailView:Te,onChangeSelect:F,onAtomExpand:Q}){const Ct=ct();const P=st("jotai.changes");const[xe,q]=g(false);const[m,Ie]=g(Se??"atoms");const[d,R]=g(null);const[A,X]=g(null);const[J,M]=g(false);const[f,Y]=g(new Set);const{atomChanges:Z,filteredChanges:N,stats:Ae,filter:St,setFilter:w,atoms:v,clearChanges:we,isEnabled:V,toggleCapture:ve}=dt();const h=p(()=>{if(f.size===0)return N;return N.filter(e=>!Array.from(f).some(o=>e.atomLabel.toLowerCase().includes(o.toLowerCase())))},[N,f]);const x=p(()=>{if(f.size===0)return v;return v.filter(e=>!Array.from(f).some(o=>e.label.toLowerCase().includes(o.toLowerCase())))},[v,f]);const Be=p(()=>{if(!d)return 0;return Z.filter(e=>e.atomLabel===d).length},[Z,d]);const B=p(()=>h.slice(0,P),[h,P]);const j=p(()=>Math.max(0,h.length-P),[h.length,P]);const De=j>0;const i=p(()=>{if(d){return B.filter(e=>e.atomLabel===d)}return B},[B,d]);const[W,y]=g(null);const C=p(()=>{if(W===null)return null;const e=i.findIndex(o=>o.id===W);return e>=0?e:null},[W,i]);const u=C!==null?i[C]:null;const ee=E(null);he(()=>{if(!F)return;const e=u?.id??null;if(e===null||e===ee.current)return;ee.current=e;F(u)},[u,F]);const te=E(null);he(()=>{if(!T)return;if(te.current===T)return;const e=i.some(o=>o.id===T);if(!e)return;te.current=T;y(T)},[T,i]);const[b,_]=g("");const[$e,L]=g(false);const Tt=E(null);const ke=E(null);const Pe=r(e=>{},[]);const Ve=e=>{_(e);if(m==="events"){w(o=>({...o,searchText:e}))}};const Le=r(()=>{_("");w(e=>({...e,searchText:""}));L(false)},[w]);const oe=r(e=>{y(e.id)},[]);const Ee=r(()=>{q(true)},[]);const He=r(()=>{y(null)},[]);const ne=r(e=>{const o=i[e];if(o)y(o.id)},[i]);const ze=r(e=>{R(e);y(null)},[]);const Fe=r(()=>{R(null);y(null)},[]);const Re=r(e=>{X(e);Q?.(e)},[Q]);const Je=r(()=>{X(null)},[]);const Me=r(()=>{return x.reduce((e,o)=>{try{const I=o.getValue();e[o.label]=$(I)}catch{e[o.label]=null}return e},{})},[x]);const Ne=r(()=>{return h.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:$(e.prevValue),nextValue:$(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys}))},[h]);const je=r(()=>{return i.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:$(e.prevValue),nextValue:$(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys}))},[i]);const We=r(e=>{Y(o=>{const I=new Set(o);if(I.has(e))I.delete(e);else I.add(e);return I})},[]);const _e=r(e=>{Y(o=>new Set([...o,e]))},[]);const Ke=r(e=>{Ie(e);R(null);y(null);M(false);if(b){_("");w(o=>({...o,searchText:""}))}L(false)},[b,w]);const re=r(e=>e.id,[]);const ae=p(()=>pt(i),[i]);const le=r(({item:e})=>t(ut,{change:e,onPress:oe,testID:ae.get(e.id)}),[oe,ae]);const se=f.size>0;const ie=()=>{if(J){return c(a,{children:[t(a.Navigation,{onBack:()=>M(false)}),t(a.Content,{title:"Filters",centered:true,testID:`${n}-filters-title`})]})}if(u){return c(a,{children:[t(a.Navigation,{onBack:He}),t(a.Content,{title:`${u.atomLabel}/${u.category}`,centered:true,testID:`${n}-detail-title`})]})}if(d){return c(a,{children:[t(a.Navigation,{onBack:Fe}),t(a.Content,{title:`${d} History`,centered:true,testID:`${n}-history-title`}),t(a.Actions,{children:t(G,{value:je,disabled:i.length===0,buttonStyle:s.headerActionButton,testID:`${n}-copy`})})]})}if(A){return c(a,{children:[t(a.Navigation,{onBack:Je}),t(a.Content,{title:A,centered:true,testID:`${n}-atom-detail-title`})]})}return c(a,{children:[k&&t(a.Navigation,{onBack:k}),t(a.Content,{title:"",children:$e?t(a.Search,{value:b,onChangeText:Ve,onCancel:Le,placeholder:m==="atoms"?"Search atoms...":"Search events...",accessibilityLabel:"Search Jotai atoms and events",iconSize:14,testID:`${n}-search-field`,containerTestID:`${n}-search`,clearTestID:`${n}-search-clear`,onBlur:()=>{if(b.length===0)L(false)}}):t(Ye,{tabs:[{key:"atoms",label:`Atoms${x.length>0?` (${x.length})`:""}`},{key:"events",label:`Events${h.length>0?` (${h.length})`:""}`}],activeTab:m,onTabChange:Ke,testIDPrefix:`${n}-tab`})}),c(a.Actions,{children:[t(O,{onPress:()=>L(true),style:s.headerActionButton,testID:`${n}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search",children:t(et,{size:14,color:l.color.textSecondary})}),t(O,{onPress:()=>M(true),style:[s.headerActionButton,se&&s.headerActionButtonActive],testID:`${n}-filters-open`,accessibilityRole:"button",accessibilityLabel:"Filters",children:t(tt,{size:14,color:se?l.color.accent:l.color.textSecondary})}),m==="atoms"&&t(G,{value:Me,disabled:x.length===0,buttonStyle:s.headerActionButton,testID:`${n}-copy`}),m==="events"&&c(pe,{children:[t(G,{value:Ne,disabled:h.length===0,buttonStyle:s.headerActionButton,testID:`${n}-copy`}),t(at,{isEnabled:V,onToggle:ve,accessibilityLabel:"Toggle Jotai atom capture",testID:`${n}-power`}),t(lt,{onPress:we,disabled:h.length===0,buttonStyle:s.headerActionButton,testID:`${n}-clear`})]})]})]})};const Oe=()=>{if(J){return t(bt,{ignoredPatterns:f,onTogglePattern:We,onAddPattern:_e,atoms:v})}if(u&&C!==null){return t(ht,{change:u,changes:i,selectedIndex:C,onIndexChange:ne,disableInternalFooter:true,initialView:Te})}if(d){return i.length>0?t(ge,{testID:`${n}-history-list`,data:i,renderItem:le,keyExtractor:re,contentContainerStyle:s.listContent,showsVerticalScrollIndicator:true,...be}):t(U,{testID:`${n}-history-empty`,...me({subject:"changes",search:b,total:b.trim()?Be:0,capturing:V,waiting:{otto:"waiting",title:"No history yet",message:`Changes for ${d} will appear here.`},paused:{title:"No history yet",message:`Capture is off, so nothing is being recorded for ${d}.`}})})}if(A){const e=v.find(o=>o.label===A)??null;return e?t(ft,{atom:e,onViewHistory:ze}):t(U,{testID:`${n}-atom-detail-gone`,otto:"ghost",title:"Atom no longer registered",message:`${A} is not in the registry any more.`})}if(m==="atoms"){return t(mt,{atoms:x,searchQuery:b,onOpenAtom:Re})}return c(pe,{children:[!V&&c(D,{style:s.disabledBanner,testID:`${n}-banner-disabled`,children:[t(ot,{size:14,color:l.color.warning}),t(K,{style:s.disabledText,children:"Atom capture is disabled"})]}),De&&c(O,{style:s.lockedBanner,onPress:Ee,activeOpacity:.8,testID:`${n}-locked`,accessibilityRole:"button",children:[c(K,{style:s.lockedText,testID:`${n}-locked-text`,children:[j," older"," ",j===1?"change":"changes"," locked"]}),t(D,{style:s.upgradeBadge,children:t(K,{style:s.upgradeBadgeText,children:"UPGRADE"})})]}),B.length>0?t(ge,{ref:ke,testID:`${n}-list`,data:B,renderItem:le,keyExtractor:re,contentContainerStyle:s.listContent,showsVerticalScrollIndicator:true,...be}):t(yt,{isEnabled:V,searchText:b,totalChanges:Ae.totalChanges})]})};const Ue=ye?nt.modal.root():"buoy-jotai-modal";if(!S)return null;const ce=u&&C!==null?t(gt,{change:u,changes:i,selectedIndex:C,onIndexChange:ne}):null;const Ge=u&&i.length>1?68:0;const Qe=!J&&!(u&&C!==null)&&(d!=null||m==="events"||m==="atoms");const de=t(D,{style:s.container,children:Oe()});const ue=t(rt,{visible:xe,onClose:()=>q(false),featureName:"Full Atom History"});if(Ce){return c(fe,{children:[c(D,{style:s.inlineRoot,children:[t(D,{style:s.inlineHeader,...it,children:ie()}),de,ce]}),ue]})}return c(fe,{children:[t(Xe,{visible:S,onClose:H,onMinimize:z,persistenceKey:Ue,header:{showToggleButton:true,customContent:ie()},onModeChange:Pe,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:Qe,styles:{},footer:ce,footerHeight:Ge,children:de}),ue]})}export function JotaiToolView(S={}){return t(JotaiModal,{...S,inline:true,visible:true,onClose:()=>{}})}const s=qe.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:Ze.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:l.color.buttonSurface,borderWidth:1,borderColor:l.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonActive:{backgroundColor:l.color.accentSoft,borderColor:l.color.accentBorderStrong},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:l.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:l.color.warning+"20"},disabledText:{color:l.color.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:l.color.text,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:l.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:l.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:l.color.accentBorder},lockedText:{color:l.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:l.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:l.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});