@buoy-gg/storage 7.0.41 → 7.0.43

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

@@ -1,949 +1 @@
-"use strict";
-
-import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, ToolEmptyState, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS, windowDragProps, usePersistedState, monoFont } from "@buoy-gg/shared-ui";
-import { StorageBrowserMode } from "./StorageBrowserMode";
-import { StorageTypeFilterBar, countByStorageType } from "./StorageTypeFilterBar";
-import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
-import { ProFeatureBanner } from "@buoy-gg/shared-ui";
-import { useStorageEvents } from "../hooks/useStorageEvents";
-import { StorageEventDetailContent, StorageEventDetailFooter } from "./StorageEventDetailContent";
-import { StorageEventFilterView } from "./StorageEventFilterView";
-import { StorageEventCard } from "./StorageEventCard";
-// Note: StorageEvent type is now imported from useStorageEvents hook
-// which handles both AsyncStorage and MMKV events via the centralized store
-
-import { useIsPro } from "@buoy-gg/license";
-
-/**
- * @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.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const FREE_TIER_EVENT_LIMIT = 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.getItem(key),
-  setItem: (key, value) => AsyncStorage.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);
-  }
-};
-export function StorageModalWithTabs({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  requiredStorageKeys = [],
-  inline = false,
-  onTabChange,
-  onRefresh,
-  onEventSelect
-}) {
-  const isPro = useIsPro();
-  const eventLimit = useLimit("storage.events");
-  const [activeTab, setActiveTab] = usePersistedState(devToolsStorageKeys.storage.activeTab(), "browser", TAB_PERSISTENCE);
-  useEffect(() => {
-    onTabChange?.(activeTab);
-  }, [activeTab, onTabChange]);
-
-  // Storage Browser state
-  const [searchQuery, setSearchQuery] = 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] = useState(null);
-  const [isSearchActive, setIsSearchActive] = useState(false);
-
-  // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = usePersistedState(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
-  } = useStorageEvents({
-    enabled: isListeningEnabled
-  });
-  const [selectedConversationKey, setSelectedConversationKey] = useState(null);
-  const [selectedHistoryKey, setSelectedHistoryKey] = useState(null);
-  const [selectedHistoryEventIndex, setSelectedHistoryEventIndex] = useState(null);
-  const [selectedEventIndex, setSelectedEventIndex] = useState(0);
-  const [showFilters, setShowFilters] = useState(false);
-  const [ignoredPatterns, setIgnoredPatterns] = usePersistedState(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] = useState("all");
-  const [enabledStorageTypes, setEnabledStorageTypes] = useState(new Set(['async', 'mmkv', 'secure']) // All enabled by default
-  );
-  const [pinnedKeys, setPinnedKeys] = usePersistedState(devToolsStorageKeys.storage.pinnedKeys(), new Set(), STRING_SET_PERSISTENCE);
-  const lastEventRef = 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] = useState("bottomSheet");
-  const handleModeChange = 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 = useCallback(() => {
-    // Toggle subscription - this actually subscribes/unsubscribes from the store
-    setIsListeningEnabled(prev => !prev);
-  }, []);
-  const handleClearEvents = useCallback(() => {
-    clearStorageEvents();
-    setSelectedConversationKey(null);
-    setSelectedEventIndex(0);
-  }, [clearStorageEvents]);
-  const handleViewHistoryFromBrowser = useCallback(key => {
-    setSelectedHistoryKey(key);
-    setSelectedHistoryEventIndex(null);
-  }, []);
-  const handleBackFromHistory = useCallback(() => {
-    setSelectedHistoryKey(null);
-    setSelectedHistoryEventIndex(null);
-  }, []);
-  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 handleTogglePin = useCallback(key => {
-    setPinnedKeys(prev => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  }, []);
-  const handleToggleFilters = useCallback(() => {
-    setShowFilters(!showFilters);
-  }, [showFilters]);
-  const handleToggleStorageType = 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 = useRef([]);
-  const getStorageSnapshot = 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] = 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] = truncatePayload(k.value);
-        return acc;
-      }, {}),
-      secure: keys.filter(k => k.storageType === 'secure').reduce((acc, k) => {
-        acc[k.key] = truncatePayload(k.value);
-        return acc;
-      }, {})
-    };
-  }, []);
-  const handlePurgeStorage = useCallback(async () => {
-    Alert.alert("Clear Storage", "Choose what to clear:", [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Clear App Storage",
-      onPress: async () => {
-        try {
-          await clearAllAppStorage();
-          // Refresh will be handled by GameUIStorageBrowser
-        } catch (error) {
-          Alert.alert("Error", "Failed to clear app storage");
-        }
-      }
-    }, {
-      text: "Clear All (Including Dev Tools)",
-      style: "destructive",
-      onPress: async () => {
-        try {
-          await clearAllStorageIncludingDevTools();
-          // Refresh will be handled by GameUIStorageBrowser
-        } catch (error) {
-          Alert.alert("Error", "Failed to clear all storage");
-        }
-      }
-    }]);
-  }, []);
-  const getValueType = value => {
-    const parsed = 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] = useState([]);
-  useEffect(() => {
-    const fetchAllKeys = async () => {
-      try {
-        const keys = await AsyncStorage.getAllKeys();
-        setAllStorageKeys([...keys].sort());
-      } catch (error) {
-        // Failed to fetch keys
-      }
-    };
-
-    // Fetch all keys for both tabs when visible
-    if (visible) {
-      fetchAllKeys();
-    }
-  }, [visible]);
-  const allEventKeys = 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 = 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 = 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 = 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 = 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 = 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.
-  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 = 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 = useMemo(() => countByStorageType(eventsBeforeTypeFilter), [eventsBeforeTypeFilter]);
-
-  // Filtered raw events for the events tab (chronological stream, newest-first)
-  const filteredEvents = useMemo(() => {
-    if (storageTypeFilter === "all") return eventsBeforeTypeFilter;
-    return eventsBeforeTypeFilter.filter(event => event.storageType === storageTypeFilter);
-  }, [eventsBeforeTypeFilter, storageTypeFilter]);
-  const getEventsSnapshot = useCallback(() => {
-    return filteredEvents.map(event => ({
-      key: event.data?.key,
-      action: event.action,
-      value: 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 = useMemo(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
-  const lockedEventCount = 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 = useCallback(item => item.id, []);
-
-  // When a raw event card is pressed, open that key's conversation detail at the matching event
-  const handleRawEventPress = 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 = 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__*/_jsx(StorageEventCard, {
-      data: cardData,
-      onPress: () => handleRawEventPress(item),
-      testID: `buoy-storage-event-${item.id}`
-    });
-  }, [handleRawEventPress]);
-  if (!visible) return null;
-  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.storage.modal();
-  const renderContent = () => {
-    // Filters overlay — applies to both tabs
-    if (showFilters) {
-      return /*#__PURE__*/_jsx(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__*/_jsx(View, {
-            style: styles.contentWrapper,
-            children: /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(StorageEventCard, {
-              data: cardData,
-              onPress: () => setSelectedHistoryEventIndex(ascIdx >= 0 ? ascIdx : 0),
-              testID: `buoy-storage-history-event-${item.id}`
-            });
-          },
-          contentContainerStyle: styles.listContent,
-          ItemSeparatorComponent: () => /*#__PURE__*/_jsx(View, {
-            style: styles.separator
-          }),
-          initialNumToRender: 20
-        });
-      }
-      return /*#__PURE__*/_jsx(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__*/_jsx(View, {
-        style: styles.contentWrapper,
-        children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
-      style: styles.eventFilterBar,
-      children: /*#__PURE__*/_jsx(StorageTypeFilterBar, {
-        active: storageTypeFilter,
-        onChange: setStorageTypeFilter,
-        counts: eventTypeCounts
-      })
-    });
-    if (filteredEvents.length === 0) {
-      const filtered = storageTypeFilter !== "all";
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.flexFill,
-        children: [eventTypeFilterBar, /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-      style: styles.flexFill,
-      children: [eventTypeFilterBar, /*#__PURE__*/_jsx(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__*/_jsx(View, {
-          style: styles.lockedBannerContainer,
-          children: /*#__PURE__*/_jsx(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__*/_jsx(StorageEventDetailFooter, {
-    conversation: selectedConversation,
-    selectedEventIndex: selectedEventIndex,
-    onEventIndexChange: setSelectedEventIndex,
-    applySafeAreaInset: modalMode === "bottomSheet"
-  }) : selectedHistoryConversation && selectedHistoryEventIndex !== null && selectedHistoryConversation.events.length > 1 ? /*#__PURE__*/_jsx(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__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: () => setShowFilters(false)
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "Filters"
-    })]
-  }) : selectedHistoryKey ? /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: selectedHistoryEventIndex !== null ? () => setSelectedHistoryEventIndex(null) : handleBackFromHistory
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: `${selectedHistoryKey} History`,
-      centered: true
-    })]
-  }) : selectedConversation ? /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: () => {
-        setSelectedConversationKey(null);
-        setSelectedEventIndex(0);
-      }
-    }), /*#__PURE__*/_jsx(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.
-  _jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: () => setDetailKey(null)
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: detailKey.key,
-      centered: true,
-      testID: "buoy-storage-detail-title"
-    })]
-  }) : /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      children: isSearchActive ? /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(ModalHeader.Actions, {
-      children: [onRefresh && !isSearchActive ? /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onRefresh,
-        style: styles.iconButton,
-        testID: "buoy-storage-refresh",
-        accessibilityLabel: "Refresh storage",
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(RefreshCw, {
-          size: 14,
-          color: night.color.textSecondary
-        })
-      }) : null, /*#__PURE__*/_jsx(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__*/_jsx(Filter, {
-          size: 14,
-          color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? night.color.accent : night.color.textSecondary
-        })
-      }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => setIsSearchActive(true),
-          testID: "buoy-storage-search-open",
-          accessibilityLabel: "Open search",
-          accessibilityRole: "button",
-          style: styles.iconButton,
-          children: /*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
-          value: getStorageSnapshot,
-          disabled: storageDataRef.current.length === 0,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-storage-copy"
-        })]
-      }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-          value: getEventsSnapshot,
-          disabled: filteredEvents.length === 0,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-storage-events-copy"
-        }), /*#__PURE__*/_jsx(PowerToggleButton, {
-          isEnabled: isListening,
-          onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle storage event monitoring",
-          testID: "buoy-storage-power"
-        }), /*#__PURE__*/_jsx(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__*/_jsx(TickProvider, {
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.inlineHeader,
-          ...windowDragProps,
-          children: headerContent
-        }), renderContent(), footerNode]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(TickProvider, {
-    children: /*#__PURE__*/_jsx(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.
- */
-export function StorageToolView(props = {}) {
-  return /*#__PURE__*/_jsx(StorageModalWithTabs, {
-    ...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"
-  },
-  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: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  activeFilterButton: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: 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: night.color.text,
-    fontSize: 16,
-    fontWeight: "600",
-    marginTop: 16,
-    marginBottom: 8,
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  emptySubtitle: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: monoFont
-  },
-  eventNavigation: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 8
-  },
-  navButton: {
-    padding: 4,
-    borderRadius: 4
-  },
-  navButtonDisabled: {
-    opacity: 0.3
-  },
-  eventCounter: {
-    color: night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    paddingHorizontal: 8
-  },
-  headerTopRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 12
-  },
-  keyNameContainer: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: night.color.surfaceElevated,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    height: 28
-  },
-  keyNameText: {
-    flex: 1,
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.accent,
-    fontFamily: monoFont,
-    letterSpacing: 0.5
-  },
-  contentWrapper: {
-    flex: 1
-  }
-});
+"use strict";import{useState as g,useCallback as i,useEffect as ee,useRef as be,useMemo as y}from"react";import{View as S,TouchableOpacity as te,StyleSheet as lt,FlatList as Ee,Alert as ne}from"react-native";import oe from"@react-native-async-storage/async-storage";import{JsModal as it,ModalHeader as c,TabSelector as ct,parseValue as dt,devToolsStorageKeys as P,macOSColors as ut,night as d,ToolEmptyState as gt,Filter as yt,RefreshCw as pt,Search as mt,SearchBar as ft,PowerToggleButton as ht,ToolbarCopyButton as Ce,ToolbarClearButton as St,truncatePayload as _,TickProvider as Ie,useLimit as vt,TIER_LIMITS as Tt,windowDragProps as bt,usePersistedState as M,monoFont as L}from"@buoy-gg/shared-ui";import{StorageBrowserMode as Et}from"./StorageBrowserMode";import{StorageTypeFilterBar as Ct,countByStorageType as It}from"./StorageTypeFilterBar";import{clearAllAppStorage as xt,clearAllStorageIncludingDevTools as kt}from"../utils/clearAllStorage";import{ProFeatureBanner as wt}from"@buoy-gg/shared-ui";import{useStorageEvents as Bt}from"../hooks/useStorageEvents";import{StorageEventDetailContent as xe,StorageEventDetailFooter as ke}from"./StorageEventDetailContent";import{StorageEventFilterView as Ft}from"./StorageEventFilterView";import{StorageEventCard as we}from"./StorageEventCard";import{useIsPro as Pt}from"@buoy-gg/license";import{jsx as n,jsxs as p,Fragment as Be}from"react/jsx-runtime";export const FREE_TIER_EVENT_LIMIT=Tt["storage.events"].free;const re={getItem:r=>oe.getItem(r),setItem:(r,C)=>oe.setItem(r,C)};const At={storage:re,parse:r=>r==="browser"||r==="events"?r:void 0,serialize:r=>r};const Dt={storage:re,parse:r=>r==="true",serialize:r=>r.toString()};const Fe={storage:re,parse:r=>new Set(JSON.parse(r)),serialize:r=>JSON.stringify(Array.from(r))};const Rt={...Fe,parse:r=>{const C=JSON.parse(r);if(!C.includes("@react_buoy"))C.push("@react_buoy");return new Set(C)}};export function StorageModalWithTabs({visible:r,onClose:C,onBack:V,onMinimize:Pe,enableSharedModalDimensions:Ae=false,requiredStorageKeys:De=[],inline:Re=false,onTabChange:ae,onRefresh:se,onEventSelect:K}){const Kt=Pt();const N=vt("storage.events");const[B,Ke]=M(P.storage.activeTab(),"browser",At);ee(()=>{ae?.(B)},[B,ae]);const[le,ie]=g("");const[W,H]=g(null);const[j,$]=g(false);const[ce,Ne]=M(P.storage.isMonitoring(),true,Dt);const{events:F,clearEvents:de,isCapturing:He}=Bt({enabled:ce});const[G,A]=g(null);const[I,J]=g(null);const[h,v]=g(null);const[z,x]=g(0);const[D,Q]=g(false);const[T,ue]=M(P.storage.eventFilters(),new Set(["@react_buoy","@RNAsyncStorage","redux-persist","persist:"]),Rt);const[k,ge]=g("all");const[b,ze]=g(new Set(["async","mmkv","secure"]));const[Oe,_e]=M(P.storage.pinnedKeys(),new Set,Fe);const Nt=be(null);const ye=ce&&He;const[q,Me]=g("bottomSheet");const Le=i(e=>{Me(e)},[]);const Ve=i(()=>{Ne(e=>!e)},[]);const We=i(()=>{de();A(null);x(0)},[de]);const je=i(e=>{J(e);v(null)},[]);const pe=i(()=>{J(null);v(null)},[]);const me=i(e=>{ue(t=>{const o=new Set(t);if(o.has(e)){o.delete(e)}else{o.add(e)}return o})},[]);const fe=i(e=>{ue(t=>new Set([...t,e]))},[]);const $e=i(e=>{_e(t=>{const o=new Set(t);if(o.has(e)){o.delete(e)}else{o.add(e)}return o})},[]);const Ge=i(()=>{Q(!D)},[D]);const Je=i(e=>{ze(t=>{const o=new Set(t);if(o.has(e)){o.delete(e)}else{o.add(e)}return o})},[]);const U=be([]);const Qe=i(()=>{const e=U.current;return{timestamp:new Date().toISOString(),totalKeys:e.length,asyncStorage:e.filter(t=>t.storageType==="async").reduce((t,o)=>{t[o.key]=_(o.value);return t},{}),mmkv:e.filter(t=>t.storageType==="mmkv").reduce((t,o)=>{const a=o.instanceId||"default";if(!t[a])t[a]={};t[a][o.key]=_(o.value);return t},{}),secure:e.filter(t=>t.storageType==="secure").reduce((t,o)=>{t[o.key]=_(o.value);return t},{})}},[]);const Ht=i(async()=>{ne.alert("Clear Storage","Choose what to clear:",[{text:"Cancel",style:"cancel"},{text:"Clear App Storage",onPress:async()=>{try{await xt()}catch(e){ne.alert("Error","Failed to clear app storage")}}},{text:"Clear All (Including Dev Tools)",style:"destructive",onPress:async()=>{try{await kt()}catch(e){ne.alert("Error","Failed to clear all storage")}}}])},[]);const O=e=>{const t=dt(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[he,qe]=g([]);ee(()=>{const e=async()=>{try{const t=await oe.getAllKeys();qe([...t].sort())}catch(t){}};if(r){e()}},[r]);const Ue=y(()=>{const e=new Set(he);F.forEach(t=>{if(t.data?.key){e.add(t.data.key)}});return Array.from(e).sort()},[F,he]);const m=y(()=>{const e=new Map;F.forEach(t=>{if(!t.data?.key)return;const o=t.data.key;if(!b.has(t.storageType))return;const a=Array.from(T).some(w=>o.includes(w));if(a)return;const s=e.get(o);if(!s){e.set(o,{key:o,lastEvent:t,events:[t],totalOperations:1,currentValue:t.data.value,valueType:O(t.data.value),storageTypes:new Set([t.storageType])})}else{s.events.push(t);s.totalOperations++;s.storageTypes.add(t.storageType);if(t.timestamp>s.lastEvent.timestamp){s.lastEvent=t;s.currentValue=t.data.value;s.valueType=O(t.data.value)}}});return Array.from(e.values()).sort((t,o)=>o.lastEvent.timestamp.getTime()-t.lastEvent.timestamp.getTime())},[F,T,b]);const u=y(()=>{if(!G)return null;return m.find(e=>e.key===G)||null},[G,m]);const Ye=y(()=>{const e={};m.forEach(t=>{e[t.key]=t.totalOperations});return e},[m]);const Xe=y(()=>{const e={};m.forEach(t=>{e[t.key]=t.lastEvent.timestamp.getTime()});return e},[m]);const E=y(()=>{if(!I)return null;return m.find(e=>e.key===I)||null},[I,m]);ee(()=>{if(!K)return;const e=u?u:h!==null?E:null;const t=u?z:h;if(!e||t==null)return;const o=[...e.events].sort((w,Z)=>w.timestamp.getTime()-Z.timestamp.getTime());const a=o[t];const s=o[t-1];if(a)K(a);if(s)K(s)},[K,u,z,E,h]);const R=y(()=>{return F.filter(e=>{if(!e.data?.key)return false;if(!b.has(e.storageType))return false;const t=e.data.key;return!Array.from(T).some(o=>t.includes(o))})},[F,T,b]);const Ze=y(()=>It(R),[R]);const f=y(()=>{if(k==="all")return R;return R.filter(e=>e.storageType===k)},[R,k]);const et=i(()=>{return f.map(e=>({key:e.data?.key,action:e.action,value:_(e.data?.value),storageType:e.storageType,timestamp:e.timestamp.toISOString()}))},[f]);const tt=y(()=>f.slice(0,N),[f,N]);const Y=y(()=>Math.max(0,f.length-N),[f.length,N]);const nt=.8;const ot=i(e=>e.id,[]);const Se=i(e=>{const t=m.find(s=>s.key===e.data?.key);if(!t)return;const o=[...t.events].sort((s,w)=>s.timestamp.getTime()-w.timestamp.getTime());const a=o.findIndex(s=>s.timestamp.getTime()===e.timestamp.getTime());A(t.key);x(a>=0?a:0)},[m]);const rt=i(({item:e})=>{const t={key:e.data?.key||"",lastAction:e.action,totalOperations:1,lastEventTimestamp:e.timestamp,storageTypes:new Set([e.storageType]),valueType:O(e.data?.value)};return n(we,{data:t,onPress:()=>Se(e),testID:`buoy-storage-event-${e.id}`})},[Se]);if(!r)return null;const at=Ae?P.modal.root():P.storage.modal();const ve=()=>{if(D){return n(Ft,{ignoredPatterns:T,onTogglePattern:me,onAddPattern:fe,availableKeys:Ue,enabledStorageTypes:b,onToggleStorageType:Je})}if(B==="browser"){if(I&&E){if(h!==null){return n(S,{style:l.contentWrapper,children:n(xe,{conversation:E,selectedEventIndex:h,onEventIndexChange:v,disableInternalFooter:true})})}const t=[...E.events].sort((a,s)=>a.timestamp.getTime()-s.timestamp.getTime());const o=[...t].reverse();return n(Ee,{testID:"buoy-storage-history-list",style:l.flexFill,data:o,keyExtractor:a=>a.id,renderItem:({item:a})=>{const s=t.findIndex(Z=>Z.timestamp.getTime()===a.timestamp.getTime());const w={key:a.data?.key||"",lastAction:a.action,totalOperations:1,lastEventTimestamp:a.timestamp,storageTypes:new Set([a.storageType]),valueType:O(a.data?.value)};return n(we,{data:w,onPress:()=>v(s>=0?s:0),testID:`buoy-storage-history-event-${a.id}`})},contentContainerStyle:l.listContent,ItemSeparatorComponent:()=>n(S,{style:l.separator}),initialNumToRender:20})}return n(Et,{requiredStorageKeys:De,ignoredPatterns:T,onTogglePattern:me,onAddPattern:fe,searchQuery:le,storageDataRef:U,eventCountByKey:Ye,lastWriteByKey:Xe,onViewHistory:je,enabledStorageTypes:b,pinnedKeys:Oe,onTogglePin:$e,applySafeAreaInset:q==="bottomSheet",storageTypeFilter:k,onStorageTypeFilterChange:ge,detailKey:W,onOpenKey:H,onCloseDetail:()=>H(null)})}if(u){return n(S,{style:l.contentWrapper,children:n(xe,{conversation:u,selectedEventIndex:z,onEventIndexChange:x,disableInternalFooter:true})})}const e=n(S,{style:l.eventFilterBar,children:n(Ct,{active:k,onChange:ge,counts:Ze})});if(f.length===0){const t=k!=="all";return p(S,{style:l.flexFill,children:[e,n(gt,{testID:"buoy-storage-events-empty",...!ye?{otto:"paused",title:"Event listener is paused",message:"Press play to start monitoring"}:t?{otto:"filtering",title:`No ${k} 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 p(S,{style:l.flexFill,children:[e,n(Ee,{testID:"buoy-storage-events-list",style:l.flexFill,data:tt,renderItem:rt,keyExtractor:ot,onEndReachedThreshold:nt,contentContainerStyle:l.listContent,ListFooterComponent:Y>0?n(S,{style:l.lockedBannerContainer,children:n(wt,{featureName:`${Y} event${Y>1?"s":""} locked`,description:"Upgrade to Pro to unlock full event history"})}):null,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10})]})};const X=u&&u.events.length>1?n(ke,{conversation:u,selectedEventIndex:z,onEventIndexChange:x,applySafeAreaInset:q==="bottomSheet"}):E&&h!==null&&E.events.length>1?n(ke,{conversation:E,selectedEventIndex:h,onEventIndexChange:v,applySafeAreaInset:q==="bottomSheet"}):null;const st=D?()=>Q(false):h!==null?()=>v(null):I?pe:u?()=>{A(null);x(0)}:V;const Te=D?p(c,{children:[n(c.Navigation,{onBack:()=>Q(false)}),n(c.Content,{title:"Filters"})]}):I?p(c,{children:[n(c.Navigation,{onBack:h!==null?()=>v(null):pe}),n(c.Content,{title:`${I} History`,centered:true})]}):u?p(c,{children:[n(c.Navigation,{onBack:()=>{A(null);x(0)}}),n(c.Content,{title:u.key})]}):W?p(c,{children:[n(c.Navigation,{onBack:()=>H(null)}),n(c.Content,{title:W.key,centered:true,testID:"buoy-storage-detail-title"})]}):p(c,{children:[V&&n(c.Navigation,{onBack:V}),n(c.Content,{title:"",children:j?n(ft,{value:le,onChange:ie,onClear:()=>{ie("");$(false)},placeholder:"Search storage keys...",testID:"buoy-storage-search",autoFocus:true,onSubmitEditing:()=>$(false),returnKeyType:"search",containerStyle:l.headerSearchContainer}):n(ct,{tabs:[{key:"browser",label:"Storage"},{key:"events",label:`Events${f.length>0?` (${f.length})`:""}`}],activeTab:B,testIDPrefix:"buoy-storage-tab",onTabChange:e=>{Ke(e);J(null);v(null);A(null);x(0);H(null)}})}),p(c.Actions,{children:[se&&!j?n(te,{onPress:se,style:l.iconButton,testID:"buoy-storage-refresh",accessibilityLabel:"Refresh storage",accessibilityRole:"button",children:n(pt,{size:14,color:d.color.textSecondary})}):null,n(te,{onPress:Ge,testID:"buoy-storage-filters",accessibilityLabel:"Storage filters",accessibilityRole:"button",style:[l.iconButton,(T.size>0||b.size<3)&&l.activeFilterButton],children:n(yt,{size:14,color:T.size>0||b.size<3?d.color.accent:d.color.textSecondary})}),B==="browser"&&!j&&p(Be,{children:[n(te,{onPress:()=>$(true),testID:"buoy-storage-search-open",accessibilityLabel:"Open search",accessibilityRole:"button",style:l.iconButton,children:n(mt,{size:14,color:d.color.textSecondary})}),n(Ce,{value:Qe,disabled:U.current.length===0,buttonStyle:l.iconButton,testID:"buoy-storage-copy"})]}),B==="events"&&p(Be,{children:[n(Ce,{value:et,disabled:f.length===0,buttonStyle:l.iconButton,testID:"buoy-storage-events-copy"}),n(ht,{isEnabled:ye,onToggle:Ve,accessibilityLabel:"Toggle storage event monitoring",testID:"buoy-storage-power"}),n(St,{onPress:We,buttonStyle:l.iconButton,testID:"buoy-storage-clear-events"})]})]})]});if(Re){return n(Ie,{children:p(S,{style:l.inlineRoot,children:[n(S,{style:l.inlineHeader,...bt,children:Te}),ve(),X]})})}return n(Ie,{children:n(it,{visible:r,onClose:C,onBack:st,onMinimize:Pe,persistenceKey:at,header:{showToggleButton:true,customContent:Te},onModeChange:Le,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,styles:{},footer:X,footerHeight:X?68:0,disableScrollWrapper:true,children:ve()})})}export function StorageToolView(r={}){return n(StorageModalWithTabs,{...r,inline:true,visible:true,onClose:()=>{}})}const l=lt.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:ut.border.default,backgroundColor:"transparent"},headerSearchContainer:{flex:1},flexFill:{flex:1},iconButton:{width:32,height:32,borderRadius:8,backgroundColor:d.color.buttonSurface,borderWidth:1,borderColor:d.color.border,alignItems:"center",justifyContent:"center"},activeFilterButton:{backgroundColor:d.color.accentSoft,borderColor:d.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:d.color.text,fontSize:16,fontWeight:"600",marginTop:16,marginBottom:8,fontFamily:L,letterSpacing:.5,textTransform:"uppercase"},emptySubtitle:{color:d.color.textSecondary,fontSize:14,textAlign:"center",fontFamily:L},eventNavigation:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:8},navButton:{padding:4,borderRadius:4},navButtonDisabled:{opacity:.3},eventCounter:{color:d.color.text,fontSize:12,fontWeight:"600",fontFamily:L,paddingHorizontal:8},headerTopRow:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:12},keyNameContainer:{flex:1,flexDirection:"row",alignItems:"center",gap:6,backgroundColor:d.color.surfaceElevated,paddingHorizontal:10,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:d.color.border,height:28},keyNameText:{flex:1,fontSize:13,fontWeight:"600",color:d.color.accent,fontFamily:L,letterSpacing:.5},contentWrapper:{flex:1}});