@buoy-gg/storage 7.0.41 → 7.0.43

package/lib/commonjs/storage/components/StorageModalWithTabs.js

@@ -1,954 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FREE_TIER_EVENT_LIMIT = void 0;
-exports.StorageModalWithTabs = StorageModalWithTabs;
-exports.StorageToolView = StorageToolView;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _StorageBrowserMode = require("./StorageBrowserMode");
-var _StorageTypeFilterBar = require("./StorageTypeFilterBar");
-var _clearAllStorage = require("../utils/clearAllStorage");
-var _useStorageEvents = require("../hooks/useStorageEvents");
-var _StorageEventDetailContent = require("./StorageEventDetailContent");
-var _StorageEventFilterView = require("./StorageEventFilterView");
-var _StorageEventCard = require("./StorageEventCard");
-var _license = require("@buoy-gg/license");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Note: StorageEvent type is now imported from useStorageEvents hook
-// which handles both AsyncStorage and MMKV events via the centralized store
-
-/**
- * @deprecated Read the live limit with `useLimit("storage.events")` — this only
- * reports the FREE tier's value and is blind to the anonymous tier. Kept
- * because it is part of the package's public exports.
- */
-const FREE_TIER_EVENT_LIMIT = exports.FREE_TIER_EVENT_LIMIT = _sharedUi.TIER_LIMITS["storage.events"].free;
-/**
- * Persistence recipes. These keys were always written straight to
- * AsyncStorage (not the FileSystem-first persistentStorage), so they keep
- * that backend — a user's saved tab, filters and pins survive the upgrade.
- */
-const ASYNC_STORAGE_BACKEND = {
-  getItem: key => _asyncStorage.default.getItem(key),
-  setItem: (key, value) => _asyncStorage.default.setItem(key, value)
-};
-const TAB_PERSISTENCE = {
-  storage: ASYNC_STORAGE_BACKEND,
-  // Stored as the bare tab name, not JSON.
-  parse: raw => raw === "browser" || raw === "events" ? raw : undefined,
-  serialize: tab => tab
-};
-const BOOLEAN_PERSISTENCE = {
-  storage: ASYNC_STORAGE_BACKEND,
-  // Stored as "true" / "false".
-  parse: raw => raw === "true",
-  serialize: value => value.toString()
-};
-const STRING_SET_PERSISTENCE = {
-  storage: ASYNC_STORAGE_BACKEND,
-  parse: raw => new Set(JSON.parse(raw)),
-  serialize: set => JSON.stringify(Array.from(set))
-};
-const IGNORED_PATTERNS_PERSISTENCE = {
-  ...STRING_SET_PERSISTENCE,
-  parse: raw => {
-    const filters = JSON.parse(raw);
-    // Always ensure @react_buoy is included to hide dev tool keys
-    if (!filters.includes("@react_buoy")) filters.push("@react_buoy");
-    return new Set(filters);
-  }
-};
-function StorageModalWithTabs({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  requiredStorageKeys = [],
-  inline = false,
-  onTabChange,
-  onRefresh,
-  onEventSelect
-}) {
-  const isPro = (0, _license.useIsPro)();
-  const eventLimit = (0, _sharedUi.useLimit)("storage.events");
-  const [activeTab, setActiveTab] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.activeTab(), "browser", TAB_PERSISTENCE);
-  (0, _react.useEffect)(() => {
-    onTabChange?.(activeTab);
-  }, [activeTab, onTabChange]);
-
-  // Storage Browser state
-  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
-  /**
-   * The key whose detail screen (live editor + info) is open. Lives at the
-   * MODAL level because the modal's header becomes back + the key's name
-   * while it's open — the React Query interaction, same as the Zustand tool.
-   */
-  const [detailKey, setDetailKey] = (0, _react.useState)(null);
-  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
-
-  // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.isMonitoring(), true, BOOLEAN_PERSISTENCE);
-
-  // Event Listener state - using centralized store via hook
-  // Pass enabled option to control subscription - this allows events tool to
-  // continue receiving events while storage UI has toggled off
-  const {
-    events,
-    clearEvents: clearStorageEvents,
-    isCapturing
-  } = (0, _useStorageEvents.useStorageEvents)({
-    enabled: isListeningEnabled
-  });
-  const [selectedConversationKey, setSelectedConversationKey] = (0, _react.useState)(null);
-  const [selectedHistoryKey, setSelectedHistoryKey] = (0, _react.useState)(null);
-  const [selectedHistoryEventIndex, setSelectedHistoryEventIndex] = (0, _react.useState)(null);
-  const [selectedEventIndex, setSelectedEventIndex] = (0, _react.useState)(0);
-  const [showFilters, setShowFilters] = (0, _react.useState)(false);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.eventFilters(),
-  // Auto-hide dev tool keys by default
-  new Set(["@react_buoy", "@RNAsyncStorage", "redux-persist", "persist:"]), IGNORED_PATTERNS_PERSISTENCE);
-  /**
-   * Which backend both tabs are looking at.
-   *
-   * Owned here rather than inside the browser because the Keys and Events tabs
-   * answer questions about the same three backends — filter the key list to
-   * Keychain, switch to Events to see what wrote to it, and the filter should
-   * still be Keychain.
-   *
-   * Distinct from `enabledStorageTypes` below: that's the persisted "capture
-   * this backend at all" setting from the Filters view. This is a view filter,
-   * and it never hides data the other one already dropped.
-   */
-  const [storageTypeFilter, setStorageTypeFilter] = (0, _react.useState)("all");
-  const [enabledStorageTypes, setEnabledStorageTypes] = (0, _react.useState)(new Set(['async', 'mmkv', 'secure']) // All enabled by default
-  );
-  const [pinnedKeys, setPinnedKeys] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.pinnedKeys(), new Set(), STRING_SET_PERSISTENCE);
-  const lastEventRef = (0, _react.useRef)(null);
-
-  // isListening = enabled and capturing (has subscribers)
-  const isListening = isListeningEnabled && isCapturing;
-
-  // Track the modal's presentation mode so the stepper footer only reserves
-  // safe-area bottom padding while docked as a bottom sheet. In floating mode
-  // the footer isn't pinned to the screen edge, so that inset is dead space.
-  const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
-  const handleModeChange = (0, _react.useCallback)(mode => {
-    setModalMode(mode);
-  }, []);
-
-  // Timer removed - using useTickEveryMinute hook instead
-
-  // Event listener setup - now handled by useStorageEvents hook
-  // The hook subscribes to the centralized storageEventStore
-
-  const handleToggleListening = (0, _react.useCallback)(() => {
-    // Toggle subscription - this actually subscribes/unsubscribes from the store
-    setIsListeningEnabled(prev => !prev);
-  }, []);
-  const handleClearEvents = (0, _react.useCallback)(() => {
-    clearStorageEvents();
-    setSelectedConversationKey(null);
-    setSelectedEventIndex(0);
-  }, [clearStorageEvents]);
-  const handleViewHistoryFromBrowser = (0, _react.useCallback)(key => {
-    setSelectedHistoryKey(key);
-    setSelectedHistoryEventIndex(null);
-  }, []);
-  const handleBackFromHistory = (0, _react.useCallback)(() => {
-    setSelectedHistoryKey(null);
-    setSelectedHistoryEventIndex(null);
-  }, []);
-  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 handleTogglePin = (0, _react.useCallback)(key => {
-    setPinnedKeys(prev => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  }, []);
-  const handleToggleFilters = (0, _react.useCallback)(() => {
-    setShowFilters(!showFilters);
-  }, [showFilters]);
-  const handleToggleStorageType = (0, _react.useCallback)(type => {
-    setEnabledStorageTypes(prev => {
-      const next = new Set(prev);
-      if (next.has(type)) {
-        next.delete(type);
-      } else {
-        next.add(type);
-      }
-      return next;
-    });
-  }, []);
-
-  // Storage Browser handlers
-  const storageDataRef = (0, _react.useRef)([]);
-  const getStorageSnapshot = (0, _react.useCallback)(() => {
-    const keys = storageDataRef.current;
-    return {
-      timestamp: new Date().toISOString(),
-      totalKeys: keys.length,
-      asyncStorage: keys.filter(k => k.storageType === 'async').reduce((acc, k) => {
-        acc[k.key] = (0, _sharedUi.truncatePayload)(k.value);
-        return acc;
-      }, {}),
-      mmkv: keys.filter(k => k.storageType === 'mmkv').reduce((acc, k) => {
-        const id = k.instanceId || 'default';
-        if (!acc[id]) acc[id] = {};
-        acc[id][k.key] = (0, _sharedUi.truncatePayload)(k.value);
-        return acc;
-      }, {}),
-      secure: keys.filter(k => k.storageType === 'secure').reduce((acc, k) => {
-        acc[k.key] = (0, _sharedUi.truncatePayload)(k.value);
-        return acc;
-      }, {})
-    };
-  }, []);
-  const handlePurgeStorage = (0, _react.useCallback)(async () => {
-    _reactNative.Alert.alert("Clear Storage", "Choose what to clear:", [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Clear App Storage",
-      onPress: async () => {
-        try {
-          await (0, _clearAllStorage.clearAllAppStorage)();
-          // Refresh will be handled by GameUIStorageBrowser
-        } catch (error) {
-          _reactNative.Alert.alert("Error", "Failed to clear app storage");
-        }
-      }
-    }, {
-      text: "Clear All (Including Dev Tools)",
-      style: "destructive",
-      onPress: async () => {
-        try {
-          await (0, _clearAllStorage.clearAllStorageIncludingDevTools)();
-          // Refresh will be handled by GameUIStorageBrowser
-        } catch (error) {
-          _reactNative.Alert.alert("Error", "Failed to clear all storage");
-        }
-      }
-    }]);
-  }, []);
-  const getValueType = value => {
-    const parsed = (0, _sharedUi.parseValue)(value);
-    if (parsed === null) return "null";
-    if (parsed === undefined) return "undefined";
-    if (Array.isArray(parsed)) return "array";
-    if (typeof parsed === "boolean") return "boolean";
-    if (typeof parsed === "number") return "number";
-    if (typeof parsed === "string") return "string";
-    if (typeof parsed === "object") return "object";
-    return "undefined";
-  };
-
-  // Get all unique keys from events AND from AsyncStorage for filter view
-  const [allStorageKeys, setAllStorageKeys] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
-    const fetchAllKeys = async () => {
-      try {
-        const keys = await _asyncStorage.default.getAllKeys();
-        setAllStorageKeys([...keys].sort());
-      } catch (error) {
-        // Failed to fetch keys
-      }
-    };
-
-    // Fetch all keys for both tabs when visible
-    if (visible) {
-      fetchAllKeys();
-    }
-  }, [visible]);
-  const allEventKeys = (0, _react.useMemo)(() => {
-    // Combine storage keys with event keys for comprehensive filter view
-    const keys = new Set(allStorageKeys);
-    events.forEach(event => {
-      if (event.data?.key) {
-        keys.add(event.data.key);
-      }
-    });
-    return Array.from(keys).sort();
-  }, [events, allStorageKeys]);
-
-  // Group events by key and create conversations
-  const conversations = (0, _react.useMemo)(() => {
-    const keyMap = new Map();
-    events.forEach(event => {
-      if (!event.data?.key) return;
-      const key = event.data.key;
-
-      // Filter by enabled storage types
-      if (!enabledStorageTypes.has(event.storageType)) return;
-
-      // Filter out keys that match ignored patterns
-      const shouldIgnore = Array.from(ignoredPatterns).some(pattern => key.includes(pattern));
-      if (shouldIgnore) return;
-      const existing = keyMap.get(key);
-      if (!existing) {
-        keyMap.set(key, {
-          key,
-          lastEvent: event,
-          events: [event],
-          totalOperations: 1,
-          currentValue: event.data.value,
-          valueType: getValueType(event.data.value),
-          storageTypes: new Set([event.storageType])
-        });
-      } else {
-        existing.events.push(event);
-        existing.totalOperations++;
-        existing.storageTypes.add(event.storageType);
-
-        // Update last event if this one is newer
-        if (event.timestamp > existing.lastEvent.timestamp) {
-          existing.lastEvent = event;
-          existing.currentValue = event.data.value;
-          existing.valueType = getValueType(event.data.value);
-        }
-      }
-    });
-
-    // Convert to array and sort by last updated
-    return Array.from(keyMap.values()).sort((a, b) => b.lastEvent.timestamp.getTime() - a.lastEvent.timestamp.getTime());
-  }, [events, ignoredPatterns, enabledStorageTypes]);
-
-  // Get the live selected conversation from the current conversations array
-  const selectedConversation = (0, _react.useMemo)(() => {
-    if (!selectedConversationKey) return null;
-    return conversations.find(c => c.key === selectedConversationKey) || null;
-  }, [selectedConversationKey, conversations]);
-
-  // Event count per key for storage browser badges
-  const eventCountByKey = (0, _react.useMemo)(() => {
-    const counts = {};
-    conversations.forEach(conv => {
-      counts[conv.key] = conv.totalOperations;
-    });
-    return counts;
-  }, [conversations]);
-
-  /**
-   * When each key was last written, for the wide table's "Last write" column.
-   * Derived from the recorded event stream, NOT from the key read: a storage
-   * read has no timestamp of its own, so a key we never witnessed being written
-   * has no honest answer here and is simply absent.
-   */
-  const lastWriteByKey = (0, _react.useMemo)(() => {
-    const at = {};
-    conversations.forEach(conv => {
-      at[conv.key] = conv.lastEvent.timestamp.getTime();
-    });
-    return at;
-  }, [conversations]);
-
-  // Selected history conversation (from browser tab "view history")
-  const selectedHistoryConversation = (0, _react.useMemo)(() => {
-    if (!selectedHistoryKey) return null;
-    return conversations.find(c => c.key === selectedHistoryKey) || null;
-  }, [selectedHistoryKey, conversations]);
-
-  // Wire-form snapshots omit oversized values. Tell a remote host which
-  // event(s) are on screen so it can fetch them — selected + previous, because
-  // the detail pane diffs those two.
-  (0, _react.useEffect)(() => {
-    if (!onEventSelect) return;
-    const conversation = selectedConversation ? selectedConversation : selectedHistoryEventIndex !== null ? selectedHistoryConversation : null;
-    const index = selectedConversation ? selectedEventIndex : selectedHistoryEventIndex;
-    if (!conversation || index == null) return;
-    const sorted = [...conversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-    const selected = sorted[index];
-    const previous = sorted[index - 1];
-    if (selected) onEventSelect(selected);
-    if (previous) onEventSelect(previous);
-  }, [onEventSelect, selectedConversation, selectedEventIndex, selectedHistoryConversation, selectedHistoryEventIndex]);
-
-  /**
-   * Events passing everything EXCEPT the backend pills.
-   *
-   * Split out so the pills can show what each one would reveal. Counting the
-   * already-filtered list would zero out the three types you didn't pick, which
-   * tells you nothing about where to look next.
-   */
-  const eventsBeforeTypeFilter = (0, _react.useMemo)(() => {
-    return events.filter(event => {
-      if (!event.data?.key) return false;
-      if (!enabledStorageTypes.has(event.storageType)) return false;
-      const key = event.data.key;
-      return !Array.from(ignoredPatterns).some(p => key.includes(p));
-    });
-  }, [events, ignoredPatterns, enabledStorageTypes]);
-  const eventTypeCounts = (0, _react.useMemo)(() => (0, _StorageTypeFilterBar.countByStorageType)(eventsBeforeTypeFilter), [eventsBeforeTypeFilter]);
-
-  // Filtered raw events for the events tab (chronological stream, newest-first)
-  const filteredEvents = (0, _react.useMemo)(() => {
-    if (storageTypeFilter === "all") return eventsBeforeTypeFilter;
-    return eventsBeforeTypeFilter.filter(event => event.storageType === storageTypeFilter);
-  }, [eventsBeforeTypeFilter, storageTypeFilter]);
-  const getEventsSnapshot = (0, _react.useCallback)(() => {
-    return filteredEvents.map(event => ({
-      key: event.data?.key,
-      action: event.action,
-      value: (0, _sharedUi.truncatePayload)(event.data?.value),
-      storageType: event.storageType,
-      timestamp: event.timestamp.toISOString()
-    }));
-  }, [filteredEvents]);
-
-  // Pro is Infinity here, so slice() returns everything and the locked count
-  // floors at 0 — no tier branching needed at the call site.
-  const visibleEvents = (0, _react.useMemo)(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
-  const lockedEventCount = (0, _react.useMemo)(() => Math.max(0, filteredEvents.length - eventLimit), [filteredEvents.length, eventLimit]);
-
-  // FlatList optimization constants
-  const END_REACHED_THRESHOLD = 0.8;
-
-  // keyExtractor for raw event FlatList
-  const eventKeyExtractor = (0, _react.useCallback)(item => item.id, []);
-
-  // When a raw event card is pressed, open that key's conversation detail at the matching event
-  const handleRawEventPress = (0, _react.useCallback)(item => {
-    const conv = conversations.find(c => c.key === item.data?.key);
-    if (!conv) return;
-    const sortedEvents = [...conv.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-    const eventIndex = sortedEvents.findIndex(e => e.timestamp.getTime() === item.timestamp.getTime());
-    setSelectedConversationKey(conv.key);
-    setSelectedEventIndex(eventIndex >= 0 ? eventIndex : 0);
-  }, [conversations]);
-
-  // Render a single raw event card
-  const renderEventItem = (0, _react.useCallback)(({
-    item
-  }) => {
-    const cardData = {
-      key: item.data?.key || "",
-      lastAction: item.action,
-      totalOperations: 1,
-      lastEventTimestamp: item.timestamp,
-      storageTypes: new Set([item.storageType]),
-      valueType: getValueType(item.data?.value)
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
-      data: cardData,
-      onPress: () => handleRawEventPress(item),
-      testID: `buoy-storage-event-${item.id}`
-    });
-  }, [handleRawEventPress]);
-  if (!visible) return null;
-  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.storage.modal();
-  const renderContent = () => {
-    // Filters overlay — applies to both tabs
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventFilterView.StorageEventFilterView, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        availableKeys: allEventKeys,
-        enabledStorageTypes: enabledStorageTypes,
-        onToggleStorageType: handleToggleStorageType
-      });
-    }
-    if (activeTab === "browser") {
-      // History flow for a specific key (from "view history" in browser tab)
-      if (selectedHistoryKey && selectedHistoryConversation) {
-        // Level 2: detail view for a specific event
-        if (selectedHistoryEventIndex !== null) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.contentWrapper,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailContent, {
-              conversation: selectedHistoryConversation,
-              selectedEventIndex: selectedHistoryEventIndex,
-              onEventIndexChange: setSelectedHistoryEventIndex,
-              disableInternalFooter: true
-            })
-          });
-        }
-
-        // Level 1: event list for this key (newest-first)
-        const ascSortedEvents = [...selectedHistoryConversation.events].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-        const newestFirstEvents = [...ascSortedEvents].reverse();
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-          testID: "buoy-storage-history-list",
-          style: styles.flexFill,
-          data: newestFirstEvents,
-          keyExtractor: item => item.id,
-          renderItem: ({
-            item
-          }) => {
-            const ascIdx = ascSortedEvents.findIndex(e => e.timestamp.getTime() === item.timestamp.getTime());
-            const cardData = {
-              key: item.data?.key || "",
-              lastAction: item.action,
-              totalOperations: 1,
-              lastEventTimestamp: item.timestamp,
-              storageTypes: new Set([item.storageType]),
-              valueType: getValueType(item.data?.value)
-            };
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventCard.StorageEventCard, {
-              data: cardData,
-              onPress: () => setSelectedHistoryEventIndex(ascIdx >= 0 ? ascIdx : 0),
-              testID: `buoy-storage-history-event-${item.id}`
-            });
-          },
-          contentContainerStyle: styles.listContent,
-          ItemSeparatorComponent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.separator
-          }),
-          initialNumToRender: 20
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageBrowserMode.StorageBrowserMode, {
-        requiredStorageKeys: requiredStorageKeys,
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        searchQuery: searchQuery,
-        storageDataRef: storageDataRef,
-        eventCountByKey: eventCountByKey,
-        lastWriteByKey: lastWriteByKey,
-        onViewHistory: handleViewHistoryFromBrowser,
-        enabledStorageTypes: enabledStorageTypes,
-        pinnedKeys: pinnedKeys,
-        onTogglePin: handleTogglePin
-        // Only a docked sheet sits on the screen's bottom edge; a floating
-        // window's own bottom is well above the home indicator.
-        ,
-        applySafeAreaInset: modalMode === "bottomSheet",
-        storageTypeFilter: storageTypeFilter,
-        onStorageTypeFilterChange: setStorageTypeFilter,
-        detailKey: detailKey,
-        onOpenKey: setDetailKey,
-        onCloseDetail: () => setDetailKey(null)
-      });
-    }
-
-    // Events tab content
-    if (selectedConversation) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.contentWrapper,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailContent, {
-          conversation: selectedConversation,
-          selectedEventIndex: selectedEventIndex,
-          onEventIndexChange: setSelectedEventIndex,
-          disableInternalFooter: true
-        })
-      });
-    }
-
-    // The pills render ABOVE the empty state as well as the list. Filtering to
-    // a backend that happens to have no events would otherwise hide the only
-    // control that undoes it, leaving the tab looking permanently broken.
-    const eventTypeFilterBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.eventFilterBar,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageTypeFilterBar.StorageTypeFilterBar, {
-        active: storageTypeFilter,
-        onChange: setStorageTypeFilter,
-        counts: eventTypeCounts
-      })
-    });
-    if (filteredEvents.length === 0) {
-      const filtered = storageTypeFilter !== "all";
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.flexFill,
-        children: [eventTypeFilterBar, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-          testID: "buoy-storage-events-empty"
-          // Three literal causes, no search on this tab — so it renders
-          // through the shared shell without the shared resolver. The
-          // backend pills need their own sentence naming the pill that
-          // undoes them, which the generic "Filtered Out" would drop.
-          ,
-          ...(!isListening ? {
-            otto: "paused",
-            title: "Event listener is paused",
-            message: "Press play to start monitoring"
-          } : filtered ? {
-            otto: "filtering",
-            title: `No ${storageTypeFilter} events`,
-            message: "Other backends have events — pick All Types to see them"
-          } : {
-            otto: "listening",
-            title: "No storage events yet",
-            message: "Storage operations will appear here"
-          })
-        })]
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.flexFill,
-      children: [eventTypeFilterBar, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-        testID: "buoy-storage-events-list",
-        style: styles.flexFill,
-        data: visibleEvents,
-        renderItem: renderEventItem,
-        keyExtractor: eventKeyExtractor,
-        onEndReachedThreshold: END_REACHED_THRESHOLD,
-        contentContainerStyle: styles.listContent,
-        ListFooterComponent: lockedEventCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.lockedBannerContainer,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProFeatureBanner, {
-            featureName: `${lockedEventCount} event${lockedEventCount > 1 ? 's' : ''} locked`,
-            description: "Upgrade to Pro to unlock full event history"
-          })
-        }) : null,
-        initialNumToRender: 10,
-        maxToRenderPerBatch: 10,
-        windowSize: 10
-      })]
-    });
-  };
-
-  // The stepper renders nothing for a single-event conversation
-  // (EventStepperFooter bails at totalItems <= 1), but an element is truthy
-  // either way — so `footerHeight={footerNode ? 68 : 0}` below used to reserve
-  // 68px for a footer that drew nothing, leaving a dead band under the content.
-  // Gate the node on the event count so the reserve matches what's painted.
-  const footerNode = selectedConversation && selectedConversation.events.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter, {
-    conversation: selectedConversation,
-    selectedEventIndex: selectedEventIndex,
-    onEventIndexChange: setSelectedEventIndex,
-    applySafeAreaInset: modalMode === "bottomSheet"
-  }) : selectedHistoryConversation && selectedHistoryEventIndex !== null && selectedHistoryConversation.events.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter, {
-    conversation: selectedHistoryConversation,
-    selectedEventIndex: selectedHistoryEventIndex,
-    onEventIndexChange: setSelectedHistoryEventIndex,
-    applySafeAreaInset: modalMode === "bottomSheet"
-  }) : null;
-
-  // Determine the appropriate back handler based on current view state
-  const currentBackHandler = showFilters ? () => setShowFilters(false) : selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : selectedHistoryKey ? handleBackFromHistory : selectedConversation ? () => {
-    setSelectedConversationKey(null);
-    setSelectedEventIndex(0);
-  } : onBack;
-  const headerContent = showFilters ? /*#__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"
-    })]
-  }) : selectedHistoryKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : handleBackFromHistory
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: `${selectedHistoryKey} History`,
-      centered: true
-    })]
-  }) : selectedConversation ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: () => {
-        setSelectedConversationKey(null);
-        setSelectedEventIndex(0);
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: selectedConversation.key
-    })]
-  }) : detailKey ?
-  /*#__PURE__*/
-  // The key detail screen — back + the key's name, the React Query
-  // interaction. AFTER history in this chain: history is reached FROM
-  // the detail and stacks over it, so its back returns here.
-  (0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: () => setDetailKey(null)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: detailKey.key,
-      centered: true,
-      testID: "buoy-storage-detail-title"
-    })]
-  }) : /*#__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.SearchBar, {
-        value: searchQuery,
-        onChange: setSearchQuery,
-        onClear: () => {
-          setSearchQuery("");
-          setIsSearchActive(false);
-        },
-        placeholder: "Search storage keys...",
-        testID: "buoy-storage-search",
-        autoFocus: true,
-        onSubmitEditing: () => setIsSearchActive(false),
-        returnKeyType: "search",
-        containerStyle: styles.headerSearchContainer
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-        tabs: [{
-          key: "browser",
-          label: "Storage"
-        }, {
-          key: "events",
-          label: `Events${filteredEvents.length > 0 ? ` (${filteredEvents.length})` : ""}`
-        }],
-        activeTab: activeTab,
-        testIDPrefix: "buoy-storage-tab",
-        onTabChange: tab => {
-          setActiveTab(tab);
-          setSelectedHistoryKey(null);
-          setSelectedHistoryEventIndex(null);
-          setSelectedConversationKey(null);
-          setSelectedEventIndex(0);
-          setDetailKey(null);
-        }
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-      children: [onRefresh && !isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: onRefresh,
-        style: styles.iconButton,
-        testID: "buoy-storage-refresh",
-        accessibilityLabel: "Refresh storage",
-        accessibilityRole: "button",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: handleToggleFilters,
-        testID: "buoy-storage-filters",
-        accessibilityLabel: "Storage filters",
-        accessibilityRole: "button",
-        style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-          size: 14,
-          color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
-        })
-      }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          testID: "buoy-storage-search-open",
-          accessibilityLabel: "Open search",
-          accessibilityRole: "button",
-          style: styles.iconButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-          value: getStorageSnapshot,
-          disabled: storageDataRef.current.length === 0,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-storage-copy"
-        })]
-      }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-          value: getEventsSnapshot,
-          disabled: filteredEvents.length === 0,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-storage-events-copy"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-          isEnabled: isListening,
-          onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle storage event monitoring",
-          testID: "buoy-storage-power"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
-          onPress: handleClearEvents,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-storage-clear-events"
-        })]
-      })]
-    })]
-  });
-
-  // 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.jsx)(_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: headerContent
-        }), renderContent(), footerNode]
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
-      visible: visible,
-      onClose: onClose,
-      onBack: currentBackHandler,
-      onMinimize: onMinimize,
-      persistenceKey: persistenceKey,
-      header: {
-        showToggleButton: true,
-        customContent: headerContent
-      },
-      onModeChange: handleModeChange,
-      enablePersistence: true,
-      initialMode: "bottomSheet",
-      enableGlitchEffects: true,
-      styles: {},
-      footer: footerNode,
-      footerHeight: footerNode ? 68 : 0,
-      disableScrollWrapper: true,
-      children: renderContent()
-    })
-  });
-}
-
-/**
- * The same storage tool as `StorageModalWithTabs`, 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, tabs and screen router.
- */
-function StorageToolView(props = {}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StorageModalWithTabs, {
-    ...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"
-  },
-  headerSearchContainer: {
-    flex: 1
-  },
-  flexFill: {
-    flex: 1
-  },
-  // Night chrome — the header is glass over the star field, so the action
-  // chips sit on the Everlights dark-glass fill.
-  iconButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  activeFilterButton: {
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderColor: _sharedUi.night.color.accentBorderStrong
-  },
-  separator: {
-    height: 8
-  },
-  listContent: {
-    paddingVertical: 6
-  },
-  lockedBannerContainer: {
-    marginTop: 8,
-    marginHorizontal: 16
-  },
-  /** Gutter matching the event cards below it, so the pills line up with them. */
-  eventFilterBar: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 4
-  },
-  emptyState: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 16,
-    fontWeight: "600",
-    marginTop: 16,
-    marginBottom: 8,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  emptySubtitle: {
-    color: _sharedUi.night.color.textSecondary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: _sharedUi.monoFont
-  },
-  eventNavigation: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 8
-  },
-  navButton: {
-    padding: 4,
-    borderRadius: 4
-  },
-  navButtonDisabled: {
-    opacity: 0.3
-  },
-  eventCounter: {
-    color: _sharedUi.night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: _sharedUi.monoFont,
-    paddingHorizontal: 8
-  },
-  headerTopRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 12
-  },
-  keyNameContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    height: 28
-  },
-  keyNameText: {
-    flex: 1,
-    fontSize: 13,
-    fontWeight: "600",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.5
-  },
-  contentWrapper: {
-    flex: 1
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.FREE_TIER_EVENT_LIMIT=void 0;exports.StorageModalWithTabs=StorageModalWithTabs;exports.StorageToolView=StorageToolView;var _react=require("react");var _reactNative=require("react-native");var _asyncStorage=_interopRequireDefault(require("@react-native-async-storage/async-storage"));var _sharedUi=require("@buoy-gg/shared-ui");var _StorageBrowserMode=require("./StorageBrowserMode");var _StorageTypeFilterBar=require("./StorageTypeFilterBar");var _clearAllStorage=require("../utils/clearAllStorage");var _useStorageEvents=require("../hooks/useStorageEvents");var _StorageEventDetailContent=require("./StorageEventDetailContent");var _StorageEventFilterView=require("./StorageEventFilterView");var _StorageEventCard=require("./StorageEventCard");var _license=require("@buoy-gg/license");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(o){return o&&o.__esModule?o:{default:o}}const FREE_TIER_EVENT_LIMIT=exports.FREE_TIER_EVENT_LIMIT=_sharedUi.TIER_LIMITS["storage.events"].free;const ASYNC_STORAGE_BACKEND={getItem:o=>_asyncStorage.default.getItem(o),setItem:(o,p)=>_asyncStorage.default.setItem(o,p)};const TAB_PERSISTENCE={storage:ASYNC_STORAGE_BACKEND,parse:o=>o==="browser"||o==="events"?o:void 0,serialize:o=>o};const BOOLEAN_PERSISTENCE={storage:ASYNC_STORAGE_BACKEND,parse:o=>o==="true",serialize:o=>o.toString()};const STRING_SET_PERSISTENCE={storage:ASYNC_STORAGE_BACKEND,parse:o=>new Set(JSON.parse(o)),serialize:o=>JSON.stringify(Array.from(o))};const IGNORED_PATTERNS_PERSISTENCE={...STRING_SET_PERSISTENCE,parse:o=>{const p=JSON.parse(o);if(!p.includes("@react_buoy"))p.push("@react_buoy");return new Set(p)}};function StorageModalWithTabs({visible:o,onClose:p,onBack:F,onMinimize:oe,enableSharedModalDimensions:ne=false,requiredStorageKeys:ae=[],inline:se=false,onTabChange:O,onRefresh:z,onEventSelect:C}){const De=(0,_license.useIsPro)();const I=(0,_sharedUi.useLimit)("storage.events");const[m,le]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.activeTab(),"browser",TAB_PERSISTENCE);(0,_react.useEffect)(()=>{O?.(m)},[m,O]);const[L,q]=(0,_react.useState)("");const[B,k]=(0,_react.useState)(null);const[M,P]=(0,_react.useState)(false);const[W,ie]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.isMonitoring(),true,BOOLEAN_PERSISTENCE);const{events:T,clearEvents:$,isCapturing:ce}=(0,_useStorageEvents.useStorageEvents)({enabled:W});const[A,b]=(0,_react.useState)(null);const[S,D]=(0,_react.useState)(null);const[c,d]=(0,_react.useState)(null);const[j,h]=(0,_react.useState)(0);const[x,_]=(0,_react.useState)(false);const[u,G]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.eventFilters(),new Set(["@react_buoy","@RNAsyncStorage","redux-persist","persist:"]),IGNORED_PATTERNS_PERSISTENCE);const[f,J]=(0,_react.useState)("all");const[g,de]=(0,_react.useState)(new Set(["async","mmkv","secure"]));const[ue,ge]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.storage.pinnedKeys(),new Set,STRING_SET_PERSISTENCE);const _e=(0,_react.useRef)(null);const Q=W&&ce;const[R,ye]=(0,_react.useState)("bottomSheet");const pe=(0,_react.useCallback)(e=>{ye(e)},[]);const Se=(0,_react.useCallback)(()=>{ie(e=>!e)},[]);const he=(0,_react.useCallback)(()=>{$();b(null);h(0)},[$]);const fe=(0,_react.useCallback)(e=>{D(e);d(null)},[]);const U=(0,_react.useCallback)(()=>{D(null);d(null)},[]);const Y=(0,_react.useCallback)(e=>{G(t=>{const r=new Set(t);if(r.has(e)){r.delete(e)}else{r.add(e)}return r})},[]);const X=(0,_react.useCallback)(e=>{G(t=>new Set([...t,e]))},[]);const ve=(0,_react.useCallback)(e=>{ge(t=>{const r=new Set(t);if(r.has(e)){r.delete(e)}else{r.add(e)}return r})},[]);const me=(0,_react.useCallback)(()=>{_(!x)},[x]);const Te=(0,_react.useCallback)(e=>{de(t=>{const r=new Set(t);if(r.has(e)){r.delete(e)}else{r.add(e)}return r})},[]);const H=(0,_react.useRef)([]);const be=(0,_react.useCallback)(()=>{const e=H.current;return{timestamp:new Date().toISOString(),totalKeys:e.length,asyncStorage:e.filter(t=>t.storageType==="async").reduce((t,r)=>{t[r.key]=(0,_sharedUi.truncatePayload)(r.value);return t},{}),mmkv:e.filter(t=>t.storageType==="mmkv").reduce((t,r)=>{const n=r.instanceId||"default";if(!t[n])t[n]={};t[n][r.key]=(0,_sharedUi.truncatePayload)(r.value);return t},{}),secure:e.filter(t=>t.storageType==="secure").reduce((t,r)=>{t[r.key]=(0,_sharedUi.truncatePayload)(r.value);return t},{})}},[]);const Re=(0,_react.useCallback)(async()=>{_reactNative.Alert.alert("Clear Storage","Choose what to clear:",[{text:"Cancel",style:"cancel"},{text:"Clear App Storage",onPress:async()=>{try{await(0,_clearAllStorage.clearAllAppStorage)()}catch(e){_reactNative.Alert.alert("Error","Failed to clear app storage")}}},{text:"Clear All (Including Dev Tools)",style:"destructive",onPress:async()=>{try{await(0,_clearAllStorage.clearAllStorageIncludingDevTools)()}catch(e){_reactNative.Alert.alert("Error","Failed to clear all storage")}}}])},[]);const w=e=>{const t=(0,_sharedUi.parseValue)(e);if(t===null)return"null";if(t===void 0)return"undefined";if(Array.isArray(t))return"array";if(typeof t==="boolean")return"boolean";if(typeof t==="number")return"number";if(typeof t==="string")return"string";if(typeof t==="object")return"object";return"undefined"};const[Z,xe]=(0,_react.useState)([]);(0,_react.useEffect)(()=>{const e=async()=>{try{const t=await _asyncStorage.default.getAllKeys();xe([...t].sort())}catch(t){}};if(o){e()}},[o]);const Ee=(0,_react.useMemo)(()=>{const e=new Set(Z);T.forEach(t=>{if(t.data?.key){e.add(t.data.key)}});return Array.from(e).sort()},[T,Z]);const l=(0,_react.useMemo)(()=>{const e=new Map;T.forEach(t=>{if(!t.data?.key)return;const r=t.data.key;if(!g.has(t.storageType))return;const n=Array.from(u).some(v=>r.includes(v));if(n)return;const a=e.get(r);if(!a){e.set(r,{key:r,lastEvent:t,events:[t],totalOperations:1,currentValue:t.data.value,valueType:w(t.data.value),storageTypes:new Set([t.storageType])})}else{a.events.push(t);a.totalOperations++;a.storageTypes.add(t.storageType);if(t.timestamp>a.lastEvent.timestamp){a.lastEvent=t;a.currentValue=t.data.value;a.valueType=w(t.data.value)}}});return Array.from(e.values()).sort((t,r)=>r.lastEvent.timestamp.getTime()-t.lastEvent.timestamp.getTime())},[T,u,g]);const s=(0,_react.useMemo)(()=>{if(!A)return null;return l.find(e=>e.key===A)||null},[A,l]);const Ce=(0,_react.useMemo)(()=>{const e={};l.forEach(t=>{e[t.key]=t.totalOperations});return e},[l]);const Ie=(0,_react.useMemo)(()=>{const e={};l.forEach(t=>{e[t.key]=t.lastEvent.timestamp.getTime()});return e},[l]);const y=(0,_react.useMemo)(()=>{if(!S)return null;return l.find(e=>e.key===S)||null},[S,l]);(0,_react.useEffect)(()=>{if(!C)return;const e=s?s:c!==null?y:null;const t=s?j:c;if(!e||t==null)return;const r=[...e.events].sort((v,V)=>v.timestamp.getTime()-V.timestamp.getTime());const n=r[t];const a=r[t-1];if(n)C(n);if(a)C(a)},[C,s,j,y,c]);const E=(0,_react.useMemo)(()=>{return T.filter(e=>{if(!e.data?.key)return false;if(!g.has(e.storageType))return false;const t=e.data.key;return!Array.from(u).some(r=>t.includes(r))})},[T,u,g]);const ke=(0,_react.useMemo)(()=>(0,_StorageTypeFilterBar.countByStorageType)(E),[E]);const i=(0,_react.useMemo)(()=>{if(f==="all")return E;return E.filter(e=>e.storageType===f)},[E,f]);const je=(0,_react.useCallback)(()=>{return i.map(e=>({key:e.data?.key,action:e.action,value:(0,_sharedUi.truncatePayload)(e.data?.value),storageType:e.storageType,timestamp:e.timestamp.toISOString()}))},[i]);const we=(0,_react.useMemo)(()=>i.slice(0,I),[i,I]);const K=(0,_react.useMemo)(()=>Math.max(0,i.length-I),[i.length,I]);const Fe=.8;const Be=(0,_react.useCallback)(e=>e.id,[]);const ee=(0,_react.useCallback)(e=>{const t=l.find(a=>a.key===e.data?.key);if(!t)return;const r=[...t.events].sort((a,v)=>a.timestamp.getTime()-v.timestamp.getTime());const n=r.findIndex(a=>a.timestamp.getTime()===e.timestamp.getTime());b(t.key);h(n>=0?n:0)},[l]);const Me=(0,_react.useCallback)(({item:e})=>{const t={key:e.data?.key||"",lastAction:e.action,totalOperations:1,lastEventTimestamp:e.timestamp,storageTypes:new Set([e.storageType]),valueType:w(e.data?.value)};return(0,_jsxRuntime.jsx)(_StorageEventCard.StorageEventCard,{data:t,onPress:()=>ee(e),testID:`buoy-storage-event-${e.id}`})},[ee]);if(!o)return null;const Pe=ne?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.storage.modal();const te=()=>{if(x){return(0,_jsxRuntime.jsx)(_StorageEventFilterView.StorageEventFilterView,{ignoredPatterns:u,onTogglePattern:Y,onAddPattern:X,availableKeys:Ee,enabledStorageTypes:g,onToggleStorageType:Te})}if(m==="browser"){if(S&&y){if(c!==null){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.contentWrapper,children:(0,_jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailContent,{conversation:y,selectedEventIndex:c,onEventIndexChange:d,disableInternalFooter:true})})}const t=[...y.events].sort((n,a)=>n.timestamp.getTime()-a.timestamp.getTime());const r=[...t].reverse();return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:"buoy-storage-history-list",style:styles.flexFill,data:r,keyExtractor:n=>n.id,renderItem:({item:n})=>{const a=t.findIndex(V=>V.timestamp.getTime()===n.timestamp.getTime());const v={key:n.data?.key||"",lastAction:n.action,totalOperations:1,lastEventTimestamp:n.timestamp,storageTypes:new Set([n.storageType]),valueType:w(n.data?.value)};return(0,_jsxRuntime.jsx)(_StorageEventCard.StorageEventCard,{data:v,onPress:()=>d(a>=0?a:0),testID:`buoy-storage-history-event-${n.id}`})},contentContainerStyle:styles.listContent,ItemSeparatorComponent:()=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.separator}),initialNumToRender:20})}return(0,_jsxRuntime.jsx)(_StorageBrowserMode.StorageBrowserMode,{requiredStorageKeys:ae,ignoredPatterns:u,onTogglePattern:Y,onAddPattern:X,searchQuery:L,storageDataRef:H,eventCountByKey:Ce,lastWriteByKey:Ie,onViewHistory:fe,enabledStorageTypes:g,pinnedKeys:ue,onTogglePin:ve,applySafeAreaInset:R==="bottomSheet",storageTypeFilter:f,onStorageTypeFilterChange:J,detailKey:B,onOpenKey:k,onCloseDetail:()=>k(null)})}if(s){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.contentWrapper,children:(0,_jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailContent,{conversation:s,selectedEventIndex:j,onEventIndexChange:h,disableInternalFooter:true})})}const e=(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.eventFilterBar,children:(0,_jsxRuntime.jsx)(_StorageTypeFilterBar.StorageTypeFilterBar,{active:f,onChange:J,counts:ke})});if(i.length===0){const t=f!=="all";return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.flexFill,children:[e,(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-storage-events-empty",...!Q?{otto:"paused",title:"Event listener is paused",message:"Press play to start monitoring"}:t?{otto:"filtering",title:`No ${f} events`,message:"Other backends have events \u2014 pick All Types to see them"}:{otto:"listening",title:"No storage events yet",message:"Storage operations will appear here"}})]})}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.flexFill,children:[e,(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:"buoy-storage-events-list",style:styles.flexFill,data:we,renderItem:Me,keyExtractor:Be,onEndReachedThreshold:Fe,contentContainerStyle:styles.listContent,ListFooterComponent:K>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.lockedBannerContainer,children:(0,_jsxRuntime.jsx)(_sharedUi.ProFeatureBanner,{featureName:`${K} event${K>1?"s":""} locked`,description:"Upgrade to Pro to unlock full event history"})}):null,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10})]})};const N=s&&s.events.length>1?(0,_jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter,{conversation:s,selectedEventIndex:j,onEventIndexChange:h,applySafeAreaInset:R==="bottomSheet"}):y&&c!==null&&y.events.length>1?(0,_jsxRuntime.jsx)(_StorageEventDetailContent.StorageEventDetailFooter,{conversation:y,selectedEventIndex:c,onEventIndexChange:d,applySafeAreaInset:R==="bottomSheet"}):null;const Ae=x?()=>_(false):c!==null?()=>d(null):S?U:s?()=>{b(null);h(0)}:F;const re=x?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>_(false)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters"})]}):S?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:c!==null?()=>d(null):U}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${S} History`,centered:true})]}):s?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>{b(null);h(0)}}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:s.key})]}):B?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>k(null)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:B.key,centered:true,testID:"buoy-storage-detail-title"})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[F&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:F}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:M?(0,_jsxRuntime.jsx)(_sharedUi.SearchBar,{value:L,onChange:q,onClear:()=>{q("");P(false)},placeholder:"Search storage keys...",testID:"buoy-storage-search",autoFocus:true,onSubmitEditing:()=>P(false),returnKeyType:"search",containerStyle:styles.headerSearchContainer}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"browser",label:"Storage"},{key:"events",label:`Events${i.length>0?` (${i.length})`:""}`}],activeTab:m,testIDPrefix:"buoy-storage-tab",onTabChange:e=>{le(e);D(null);d(null);b(null);h(0);k(null)}})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[z&&!M?(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:z,style:styles.iconButton,testID:"buoy-storage-refresh",accessibilityLabel:"Refresh storage",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_sharedUi.RefreshCw,{size:14,color:_sharedUi.night.color.textSecondary})}):null,(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:me,testID:"buoy-storage-filters",accessibilityLabel:"Storage filters",accessibilityRole:"button",style:[styles.iconButton,(u.size>0||g.size<3)&&styles.activeFilterButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:u.size>0||g.size<3?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),m==="browser"&&!M&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>P(true),testID:"buoy-storage-search-open",accessibilityLabel:"Open search",accessibilityRole:"button",style:styles.iconButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:be,disabled:H.current.length===0,buttonStyle:styles.iconButton,testID:"buoy-storage-copy"})]}),m==="events"&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:je,disabled:i.length===0,buttonStyle:styles.iconButton,testID:"buoy-storage-events-copy"}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:Q,onToggle:Se,accessibilityLabel:"Toggle storage event monitoring",testID:"buoy-storage-power"}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarClearButton,{onPress:he,buttonStyle:styles.iconButton,testID:"buoy-storage-clear-events"})]})]})]});if(se){return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:re}),te(),N]})})}return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:o,onClose:p,onBack:Ae,onMinimize:oe,persistenceKey:Pe,header:{showToggleButton:true,customContent:re},onModeChange:pe,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,styles:{},footer:N,footerHeight:N?68:0,disableScrollWrapper:true,children:te()})})}function StorageToolView(o={}){return(0,_jsxRuntime.jsx)(StorageModalWithTabs,{...o,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"},headerSearchContainer:{flex:1},flexFill:{flex:1},iconButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},activeFilterButton:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},separator:{height:8},listContent:{paddingVertical:6},lockedBannerContainer:{marginTop:8,marginHorizontal:16},eventFilterBar:{paddingHorizontal:12,paddingTop:8,paddingBottom:4},emptyState:{flex:1,justifyContent:"center",alignItems:"center",padding:32},emptyTitle:{color:_sharedUi.night.color.text,fontSize:16,fontWeight:"600",marginTop:16,marginBottom:8,fontFamily:_sharedUi.monoFont,letterSpacing:.5,textTransform:"uppercase"},emptySubtitle:{color:_sharedUi.night.color.textSecondary,fontSize:14,textAlign:"center",fontFamily:_sharedUi.monoFont},eventNavigation:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:8},navButton:{padding:4,borderRadius:4},navButtonDisabled:{opacity:.3},eventCounter:{color:_sharedUi.night.color.text,fontSize:12,fontWeight:"600",fontFamily:_sharedUi.monoFont,paddingHorizontal:8},headerTopRow:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:12},keyNameContainer:{flex:1,flexDirection:"row",alignItems:"center",gap:6,backgroundColor:_sharedUi.night.color.surfaceElevated,paddingHorizontal:10,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.border,height:28},keyNameText:{flex:1,fontSize:13,fontWeight:"600",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont,letterSpacing:.5},contentWrapper:{flex:1}});