@buoy-gg/storage 2.1.1 → 2.1.3

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

@@ -11,7 +11,6 @@ var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _StorageBrowserMode = require("./StorageBrowserMode");
 var _clearAllStorage = require("../utils/clearAllStorage");
-var _AsyncStorageListener = require("../utils/AsyncStorageListener");
 var _useStorageEvents = require("../hooks/useStorageEvents");
 var _StorageEventDetailContent = require("./StorageEventDetailContent");
 var _StorageFilterViewV = require("./StorageFilterViewV2");
@@ -44,17 +43,19 @@ function StorageModalWithTabs({
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const hasLoadedStorageFilters = (0, _react.useRef)(false);
 
+  // Local state to control subscription (true = subscribed, false = unsubscribed)
+  const [isListeningEnabled, setIsListeningEnabled] = (0, _react.useState)(true);
+
   // 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,
-    startCapturing,
-    stopCapturing
+    isCapturing
   } = (0, _useStorageEvents.useStorageEvents)({
-    autoStart: false
-  }); // Don't auto-start, we manage it
-  const [isListening, setIsListening] = (0, _react.useState)(false);
+    enabled: isListeningEnabled
+  });
   const [selectedConversationKey, setSelectedConversationKey] = (0, _react.useState)(null);
   const [selectedEventIndex, setSelectedEventIndex] = (0, _react.useState)(0);
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
@@ -67,10 +68,8 @@ function StorageModalWithTabs({
   const hasLoadedTabState = (0, _react.useRef)(false);
   const hasLoadedMonitoringState = (0, _react.useRef)(false);
 
-  // Sync isListening state with hook's isCapturing
-  (0, _react.useEffect)(() => {
-    setIsListening(isCapturing);
-  }, [isCapturing]);
+  // isListening = enabled and capturing (has subscribers)
+  const isListening = isListeningEnabled && isCapturing;
   const handleModeChange = (0, _react.useCallback)(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -102,9 +101,7 @@ function StorageModalWithTabs({
         const storedMonitoring = await _asyncStorage.default.getItem(_sharedUi.devToolsStorageKeys.storage.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
-          if (shouldMonitor && !isCapturing) {
-            await startCapturing();
-          }
+          setIsListeningEnabled(shouldMonitor);
         }
         hasLoadedMonitoringState.current = true;
       } catch (error) {
@@ -112,7 +109,7 @@ function StorageModalWithTabs({
       }
     };
     loadMonitoringState();
-  }, [visible, isCapturing, startCapturing]);
+  }, [visible]);
 
   // Note: Conversations will appear when storage events are triggered
   // Click on any conversation to see the unified view with toggle cards
@@ -181,14 +178,10 @@ function StorageModalWithTabs({
   // Event listener setup - now handled by useStorageEvents hook
   // The hook subscribes to the centralized storageEventStore
 
-  const handleToggleListening = (0, _react.useCallback)(async () => {
-    if (isListening) {
-      stopCapturing();
-      (0, _AsyncStorageListener.stopListening)(); // Also stop the underlying AsyncStorage listener
-    } else {
-      await startCapturing();
-    }
-  }, [isListening, startCapturing, stopCapturing]);
+  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);
@@ -577,16 +570,10 @@ function StorageModalWithTabs({
                 size: 14,
                 color: ignoredPatterns.size > 0 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-              onPress: handleToggleListening,
-              style: [styles.iconButton, isListening && styles.activeButton],
-              children: isListening ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
-                size: 14,
-                color: _sharedUi.macOSColors.semantic.success
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Play, {
-                size: 14,
-                color: _sharedUi.macOSColors.semantic.success
-              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+              isEnabled: isListening,
+              onToggle: handleToggleListening,
+              accessibilityLabel: "Toggle storage event monitoring"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
               onPress: handleClearEvents,
               style: styles.iconButton,
@@ -623,9 +610,6 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  activeButton: {
-    backgroundColor: _sharedUi.macOSColors.semantic.successBackground
-  },
   activeFilterButton: {
     backgroundColor: _sharedUi.macOSColors.semantic.infoBackground
   },

package/lib/commonjs/storage/hooks/useStorageEvents.js

@@ -10,7 +10,8 @@ var _storageEventStore = require("../stores/storageEventStore");
  * useStorageEvents Hook
  *
  * React hook for subscribing to storage events from the centralized store.
- * Provides a clean interface for components to receive storage events.
+ * Uses self-managing Subscribable pattern - the storage listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  *
  * @example
  * ```typescript
@@ -36,14 +37,21 @@ function useStorageEvents(options = {}) {
   const {
     storageType = "all",
     maxEvents = 500,
-    autoStart = true
+    enabled = true
   } = options;
   const [events, setEvents] = (0, _react.useState)([]);
-  const [isCapturing, setIsCapturing] = (0, _react.useState)(_storageEventStore.storageEventStore.capturing);
+  // Track capturing state locally so it updates reactively with the subscription
+  const [isCapturing, setIsCapturing] = (0, _react.useState)(enabled);
 
-  // Subscribe to store changes
+  // Subscribe to store - this automatically starts/stops the storage listener
+  // based on subscriber count (Subscribable pattern from TanStack Query)
+  // Only subscribe when enabled is true
   (0, _react.useEffect)(() => {
-    const unsubscribe = _storageEventStore.storageEventStore.subscribe(allEvents => {
+    if (!enabled) {
+      setIsCapturing(false);
+      return;
+    }
+    const unsubscribe = _storageEventStore.storageEventStore.subscribeToEvents(allEvents => {
       // Filter by storage type if specified
       let filtered = allEvents;
       if (storageType !== "all") {
@@ -55,44 +63,22 @@ function useStorageEvents(options = {}) {
         filtered = filtered.slice(0, maxEvents);
       }
       setEvents(filtered);
-      setIsCapturing(_storageEventStore.storageEventStore.capturing);
     });
+
+    // Mark as capturing after successful subscription
+    setIsCapturing(true);
     return () => {
       unsubscribe();
+      // Note: Don't set isCapturing=false here because we might be
+      // re-subscribing due to dependency change, not actually stopping
     };
-  }, [storageType, maxEvents]);
-
-  // Auto-start capturing on mount
-  (0, _react.useEffect)(() => {
-    if (autoStart && !_storageEventStore.storageEventStore.capturing) {
-      _storageEventStore.storageEventStore.startCapturing();
-      setIsCapturing(true);
-    }
-  }, [autoStart]);
+  }, [storageType, maxEvents, enabled]);
   const clearEvents = (0, _react.useCallback)(() => {
     _storageEventStore.storageEventStore.clearEvents();
   }, []);
-  const startCapturing = (0, _react.useCallback)(async () => {
-    await _storageEventStore.storageEventStore.startCapturing();
-    setIsCapturing(true);
-  }, []);
-  const stopCapturing = (0, _react.useCallback)(() => {
-    _storageEventStore.storageEventStore.stopCapturing();
-    setIsCapturing(false);
-  }, []);
-  const pauseCapturing = (0, _react.useCallback)(() => {
-    _storageEventStore.storageEventStore.pauseCapture();
-  }, []);
-  const resumeCapturing = (0, _react.useCallback)(() => {
-    _storageEventStore.storageEventStore.resumeCapture();
-  }, []);
   return {
     events,
     clearEvents,
-    isCapturing,
-    startCapturing,
-    stopCapturing,
-    pauseCapturing,
-    resumeCapturing
+    isCapturing
   };
 }

package/lib/commonjs/storage/index.js

@@ -25,10 +25,6 @@ var _exportNames = {
   MMKVInstanceSelector: true,
   MMKVInstanceInfoPanel: true,
   storageEventStore: true,
-  startStorageCapture: true,
-  stopStorageCapture: true,
-  pauseStorageCapture: true,
-  resumeStorageCapture: true,
   subscribeToStorageEvents: true,
   onStorageEvent: true,
   getStorageEvents: true,
@@ -137,30 +133,6 @@ Object.defineProperty(exports, "onStorageEvent", {
     return _storageEventStore.onStorageEvent;
   }
 });
-Object.defineProperty(exports, "pauseStorageCapture", {
-  enumerable: true,
-  get: function () {
-    return _storageEventStore.pauseStorageCapture;
-  }
-});
-Object.defineProperty(exports, "resumeStorageCapture", {
-  enumerable: true,
-  get: function () {
-    return _storageEventStore.resumeStorageCapture;
-  }
-});
-Object.defineProperty(exports, "startStorageCapture", {
-  enumerable: true,
-  get: function () {
-    return _storageEventStore.startStorageCapture;
-  }
-});
-Object.defineProperty(exports, "stopStorageCapture", {
-  enumerable: true,
-  get: function () {
-    return _storageEventStore.stopStorageCapture;
-  }
-});
 Object.defineProperty(exports, "storageEventStore", {
   enumerable: true,
   get: function () {

package/lib/commonjs/storage/stores/storageEventStore.js

@@ -3,29 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.subscribeToStorageEvents = exports.storageEventStore = exports.stopStorageCapture = exports.startStorageCapture = exports.resumeStorageCapture = exports.pauseStorageCapture = exports.onStorageEvent = exports.isStorageCapturing = exports.getStorageEvents = exports.clearStorageEvents = void 0;
+exports.subscribeToStorageEvents = exports.storageEventStore = exports.onStorageEvent = exports.isStorageCapturing = exports.getStorageEvents = exports.clearStorageEvents = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _AsyncStorageListener = require("../utils/AsyncStorageListener");
 var _MMKVListener = require("../utils/MMKVListener");
 /**
  * Storage Event Store
  *
  * Centralized store that aggregates storage events from AsyncStorage and MMKV
- * into a single event stream. This provides a single source of truth for all
- * storage operations, eliminating duplicate subscriptions across components.
+ * into a single event stream. Uses BaseEventStore pattern - the storage listener
+ * automatically starts when the first subscriber joins and stops when the last
+ * subscriber leaves.
  *
  * @example
  * ```typescript
  * import { storageEventStore } from '@buoy-gg/storage';
  *
- * // Subscribe to storage events
- * const unsubscribe = storageEventStore.subscribe((events) => {
+ * // Subscribe to storage events - automatically starts capturing!
+ * const unsubscribe = storageEventStore.subscribeToEvents((events) => {
  *   console.log('Storage events:', events);
  * });
  *
- * // Start capturing (must be called once)
- * await storageEventStore.startCapturing();
- *
- * // Later, clean up
+ * // Later, clean up - automatically stops if no other subscribers
  * unsubscribe();
  * ```
  */
@@ -35,65 +34,60 @@ var _MMKVListener = require("../utils/MMKVListener");
  */
 
 /**
- * Listener callback type for storage events
+ * Listener callback type for storage events array
  */
 
 /**
  * Listener callback for individual new events
  */
 
-const MAX_EVENTS = 500;
-class StorageEventStore {
-  events = [];
-  listeners = new Set();
-  eventCallbacks = new Set();
-  isCapturing = false;
-
-  // Unsubscribe functions
+class StorageEventStore extends _sharedUi.BaseEventStore {
+  // Unsubscribe functions for raw listeners
   asyncStorageUnsubscribe = null;
   mmkvUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "storage",
+      maxEvents: 500
+    });
+  }
 
   /**
    * Start capturing storage events from both AsyncStorage and MMKV
    */
   async startCapturing() {
-    if (this.isCapturing) {
-      return;
-    }
-
     // Start AsyncStorage listening if not already active
     if (!(0, _AsyncStorageListener.isListening)()) {
       await (0, _AsyncStorageListener.startListening)();
     }
 
     // Subscribe to AsyncStorage events
-    this.asyncStorageUnsubscribe = (0, _AsyncStorageListener.addListener)(event => {
-      const storageEvent = {
-        ...event,
-        storageType: "async"
-      };
-      this.addEvent(storageEvent);
-    });
+    if (!this.asyncStorageUnsubscribe) {
+      this.asyncStorageUnsubscribe = (0, _AsyncStorageListener.addListener)(event => {
+        const storageEvent = {
+          ...event,
+          storageType: "async"
+        };
+        this.addEvent(storageEvent);
+      });
+    }
 
     // Subscribe to MMKV events
-    this.mmkvUnsubscribe = (0, _MMKVListener.addMMKVListener)(event => {
-      const storageEvent = {
-        ...event,
-        storageType: "mmkv"
-      };
-      this.addEvent(storageEvent);
-    });
-    this.isCapturing = true;
+    if (!this.mmkvUnsubscribe) {
+      this.mmkvUnsubscribe = (0, _MMKVListener.addMMKVListener)(event => {
+        const storageEvent = {
+          ...event,
+          storageType: "mmkv"
+        };
+        this.addEvent(storageEvent);
+      });
+    }
   }
 
   /**
    * Stop capturing storage events
    */
   stopCapturing() {
-    if (!this.isCapturing) {
-      return;
-    }
-
     // Unsubscribe from AsyncStorage
     if (this.asyncStorageUnsubscribe) {
       this.asyncStorageUnsubscribe();
@@ -105,88 +99,13 @@ class StorageEventStore {
       this.mmkvUnsubscribe();
       this.mmkvUnsubscribe = null;
     }
-    this.isCapturing = false;
-  }
-
-  /**
-   * Pause event capture (used during time-travel operations)
-   */
-  pauseCapture() {
-    (0, _AsyncStorageListener.pauseCapture)();
-    // MMKV listener doesn't have pause, but it's less common for time-travel
-  }
-
-  /**
-   * Resume event capture after pausing
-   */
-  resumeCapture() {
-    (0, _AsyncStorageListener.resumeCapture)();
-  }
-
-  /**
-   * Add an event to the store
-   */
-  addEvent(event) {
-    // Add to beginning (newest first)
-    this.events = [event, ...this.events].slice(0, MAX_EVENTS);
-
-    // Notify event callbacks (for individual events)
-    this.eventCallbacks.forEach(callback => {
-      try {
-        callback(event);
-      } catch {
-        // Ignore callback errors
-      }
-    });
-
-    // Notify listeners (for full event list)
-    this.notifyListeners();
   }
 
   /**
-   * Subscribe to all storage events (receives full event array on each change)
+   * Check if currently capturing events (has subscribers)
    */
-  subscribe(listener) {
-    this.listeners.add(listener);
-
-    // Immediately call with current events
-    listener(this.events);
-
-    // Return unsubscribe function
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Subscribe to new events only (receives individual events as they occur)
-   */
-  onEvent(callback) {
-    this.eventCallbacks.add(callback);
-    return () => {
-      this.eventCallbacks.delete(callback);
-    };
-  }
-
-  /**
-   * Notify all listeners of changes
-   */
-  notifyListeners() {
-    const events = this.events;
-    this.listeners.forEach(listener => {
-      try {
-        listener(events);
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Get all events
-   */
-  getEvents() {
-    return this.events;
+  isCapturing() {
+    return this.asyncStorageUnsubscribe !== null || this.mmkvUnsubscribe !== null;
   }
 
   /**
@@ -195,43 +114,13 @@ class StorageEventStore {
   getEventsByType(storageType) {
     return this.events.filter(event => event.storageType === storageType);
   }
-
-  /**
-   * Get event count
-   */
-  getEventCount() {
-    return this.events.length;
-  }
-
-  /**
-   * Clear all events
-   */
-  clearEvents() {
-    this.events = [];
-    this.notifyListeners();
-  }
-
-  /**
-   * Check if currently capturing events
-   */
-  get capturing() {
-    return this.isCapturing;
-  }
 }
 
 // Singleton instance
 const storageEventStore = exports.storageEventStore = new StorageEventStore();
 
 // Convenience exports
-const startStorageCapture = () => storageEventStore.startCapturing();
-exports.startStorageCapture = startStorageCapture;
-const stopStorageCapture = () => storageEventStore.stopCapturing();
-exports.stopStorageCapture = stopStorageCapture;
-const pauseStorageCapture = () => storageEventStore.pauseCapture();
-exports.pauseStorageCapture = pauseStorageCapture;
-const resumeStorageCapture = () => storageEventStore.resumeCapture();
-exports.resumeStorageCapture = resumeStorageCapture;
-const subscribeToStorageEvents = listener => storageEventStore.subscribe(listener);
+const subscribeToStorageEvents = listener => storageEventStore.subscribeToEvents(listener);
 exports.subscribeToStorageEvents = subscribeToStorageEvents;
 const onStorageEvent = callback => storageEventStore.onEvent(callback);
 exports.onStorageEvent = onStorageEvent;
@@ -239,5 +128,5 @@ const getStorageEvents = () => storageEventStore.getEvents();
 exports.getStorageEvents = getStorageEvents;
 const clearStorageEvents = () => storageEventStore.clearEvents();
 exports.clearStorageEvents = clearStorageEvents;
-const isStorageCapturing = () => storageEventStore.capturing;
+const isStorageCapturing = () => storageEventStore.isCapturing();
 exports.isStorageCapturing = isStorageCapturing;

package/lib/module/index.js

@@ -65,7 +65,6 @@ export { storageEventStore } from "./storage/stores/storageEventStore";
 // NOT EXPORTED (Internal capture controls)
 // =============================================================================
 // The following are intentionally NOT exported to prevent bypassing:
-// - startStorageCapture, stopStorageCapture, pauseStorageCapture, resumeStorageCapture
 // - subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents
 // - isStorageCapturing
 // - startListening, stopListening, addListener, removeAllListeners (AsyncStorage)

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

@@ -3,11 +3,10 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Pause, Play, Trash2, Filter, Search, SearchBar } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Trash2, Filter, Search, SearchBar, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
 import { ProFeatureBanner } from "@buoy-gg/shared-ui";
-import { stopListening } from "../utils/AsyncStorageListener";
 import { useStorageEvents } from "../hooks/useStorageEvents";
 import { StorageEventDetailContent, StorageEventDetailFooter } from "./StorageEventDetailContent";
 import { StorageFilterViewV2 } from "./StorageFilterViewV2";
@@ -40,17 +39,19 @@ export function StorageModalWithTabs({
   const [isSearchActive, setIsSearchActive] = useState(false);
   const hasLoadedStorageFilters = useRef(false);
 
+  // Local state to control subscription (true = subscribed, false = unsubscribed)
+  const [isListeningEnabled, setIsListeningEnabled] = useState(true);
+
   // 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,
-    startCapturing,
-    stopCapturing
+    isCapturing
   } = useStorageEvents({
-    autoStart: false
-  }); // Don't auto-start, we manage it
-  const [isListening, setIsListening] = useState(false);
+    enabled: isListeningEnabled
+  });
   const [selectedConversationKey, setSelectedConversationKey] = useState(null);
   const [selectedEventIndex, setSelectedEventIndex] = useState(0);
   const [showFilters, setShowFilters] = useState(false);
@@ -63,10 +64,8 @@ export function StorageModalWithTabs({
   const hasLoadedTabState = useRef(false);
   const hasLoadedMonitoringState = useRef(false);
 
-  // Sync isListening state with hook's isCapturing
-  useEffect(() => {
-    setIsListening(isCapturing);
-  }, [isCapturing]);
+  // isListening = enabled and capturing (has subscribers)
+  const isListening = isListeningEnabled && isCapturing;
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -98,9 +97,7 @@ export function StorageModalWithTabs({
         const storedMonitoring = await AsyncStorage.getItem(devToolsStorageKeys.storage.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
-          if (shouldMonitor && !isCapturing) {
-            await startCapturing();
-          }
+          setIsListeningEnabled(shouldMonitor);
         }
         hasLoadedMonitoringState.current = true;
       } catch (error) {
@@ -108,7 +105,7 @@ export function StorageModalWithTabs({
       }
     };
     loadMonitoringState();
-  }, [visible, isCapturing, startCapturing]);
+  }, [visible]);
 
   // Note: Conversations will appear when storage events are triggered
   // Click on any conversation to see the unified view with toggle cards
@@ -177,14 +174,10 @@ export function StorageModalWithTabs({
   // Event listener setup - now handled by useStorageEvents hook
   // The hook subscribes to the centralized storageEventStore
 
-  const handleToggleListening = useCallback(async () => {
-    if (isListening) {
-      stopCapturing();
-      stopListening(); // Also stop the underlying AsyncStorage listener
-    } else {
-      await startCapturing();
-    }
-  }, [isListening, startCapturing, stopCapturing]);
+  const handleToggleListening = useCallback(() => {
+    // Toggle subscription - this actually subscribes/unsubscribes from the store
+    setIsListeningEnabled(prev => !prev);
+  }, []);
   const handleClearEvents = useCallback(() => {
     clearStorageEvents();
     setSelectedConversationKey(null);
@@ -573,16 +566,10 @@ export function StorageModalWithTabs({
                 size: 14,
                 color: ignoredPatterns.size > 0 ? macOSColors.semantic.debug : macOSColors.text.secondary
               })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: handleToggleListening,
-              style: [styles.iconButton, isListening && styles.activeButton],
-              children: isListening ? /*#__PURE__*/_jsx(Pause, {
-                size: 14,
-                color: macOSColors.semantic.success
-              }) : /*#__PURE__*/_jsx(Play, {
-                size: 14,
-                color: macOSColors.semantic.success
-              })
+            }), /*#__PURE__*/_jsx(PowerToggleButton, {
+              isEnabled: isListening,
+              onToggle: handleToggleListening,
+              accessibilityLabel: "Toggle storage event monitoring"
             }), /*#__PURE__*/_jsx(TouchableOpacity, {
               onPress: handleClearEvents,
               style: styles.iconButton,
@@ -619,9 +606,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  activeButton: {
-    backgroundColor: macOSColors.semantic.successBackground
-  },
   activeFilterButton: {
     backgroundColor: macOSColors.semantic.infoBackground
   },

package/lib/module/storage/hooks/useStorageEvents.js

@@ -4,7 +4,8 @@
  * useStorageEvents Hook
  *
  * React hook for subscribing to storage events from the centralized store.
- * Provides a clean interface for components to receive storage events.
+ * Uses self-managing Subscribable pattern - the storage listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  *
  * @example
  * ```typescript
@@ -33,14 +34,21 @@ export function useStorageEvents(options = {}) {
   const {
     storageType = "all",
     maxEvents = 500,
-    autoStart = true
+    enabled = true
   } = options;
   const [events, setEvents] = useState([]);
-  const [isCapturing, setIsCapturing] = useState(storageEventStore.capturing);
+  // Track capturing state locally so it updates reactively with the subscription
+  const [isCapturing, setIsCapturing] = useState(enabled);
 
-  // Subscribe to store changes
+  // Subscribe to store - this automatically starts/stops the storage listener
+  // based on subscriber count (Subscribable pattern from TanStack Query)
+  // Only subscribe when enabled is true
   useEffect(() => {
-    const unsubscribe = storageEventStore.subscribe(allEvents => {
+    if (!enabled) {
+      setIsCapturing(false);
+      return;
+    }
+    const unsubscribe = storageEventStore.subscribeToEvents(allEvents => {
       // Filter by storage type if specified
       let filtered = allEvents;
       if (storageType !== "all") {
@@ -52,44 +60,22 @@ export function useStorageEvents(options = {}) {
         filtered = filtered.slice(0, maxEvents);
       }
       setEvents(filtered);
-      setIsCapturing(storageEventStore.capturing);
     });
+
+    // Mark as capturing after successful subscription
+    setIsCapturing(true);
     return () => {
       unsubscribe();
+      // Note: Don't set isCapturing=false here because we might be
+      // re-subscribing due to dependency change, not actually stopping
     };
-  }, [storageType, maxEvents]);
-
-  // Auto-start capturing on mount
-  useEffect(() => {
-    if (autoStart && !storageEventStore.capturing) {
-      storageEventStore.startCapturing();
-      setIsCapturing(true);
-    }
-  }, [autoStart]);
+  }, [storageType, maxEvents, enabled]);
   const clearEvents = useCallback(() => {
     storageEventStore.clearEvents();
   }, []);
-  const startCapturing = useCallback(async () => {
-    await storageEventStore.startCapturing();
-    setIsCapturing(true);
-  }, []);
-  const stopCapturing = useCallback(() => {
-    storageEventStore.stopCapturing();
-    setIsCapturing(false);
-  }, []);
-  const pauseCapturing = useCallback(() => {
-    storageEventStore.pauseCapture();
-  }, []);
-  const resumeCapturing = useCallback(() => {
-    storageEventStore.resumeCapture();
-  }, []);
   return {
     events,
     clearEvents,
-    isCapturing,
-    startCapturing,
-    stopCapturing,
-    pauseCapturing,
-    resumeCapturing
+    isCapturing
   };
 }

package/lib/module/storage/index.js

@@ -28,4 +28,4 @@ export * from "./types";
 export * from "./utils";
 
 // Storage Event Store
-export { storageEventStore, startStorageCapture, stopStorageCapture, pauseStorageCapture, resumeStorageCapture, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing } from "./stores/storageEventStore";
+export { storageEventStore, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing } from "./stores/storageEventStore";

package/lib/module/storage/stores/storageEventStore.js

@@ -4,27 +4,26 @@
  * Storage Event Store
  *
  * Centralized store that aggregates storage events from AsyncStorage and MMKV
- * into a single event stream. This provides a single source of truth for all
- * storage operations, eliminating duplicate subscriptions across components.
+ * into a single event stream. Uses BaseEventStore pattern - the storage listener
+ * automatically starts when the first subscriber joins and stops when the last
+ * subscriber leaves.
  *
  * @example
  * ```typescript
  * import { storageEventStore } from '@buoy-gg/storage';
  *
- * // Subscribe to storage events
- * const unsubscribe = storageEventStore.subscribe((events) => {
+ * // Subscribe to storage events - automatically starts capturing!
+ * const unsubscribe = storageEventStore.subscribeToEvents((events) => {
  *   console.log('Storage events:', events);
  * });
  *
- * // Start capturing (must be called once)
- * await storageEventStore.startCapturing();
- *
- * // Later, clean up
+ * // Later, clean up - automatically stops if no other subscribers
  * unsubscribe();
  * ```
  */
 
-import { startListening as startAsyncStorageListening, addListener as addAsyncStorageListener, isListening as isAsyncStorageListening, pauseCapture as pauseAsyncStorageCapture, resumeCapture as resumeAsyncStorageCapture } from "../utils/AsyncStorageListener";
+import { BaseEventStore } from "@buoy-gg/shared-ui";
+import { startListening as startAsyncStorageListening, addListener as addAsyncStorageListener, isListening as isAsyncStorageListening } from "../utils/AsyncStorageListener";
 import { addMMKVListener } from "../utils/MMKVListener";
 
 /**
@@ -32,65 +31,60 @@ import { addMMKVListener } from "../utils/MMKVListener";
  */
 
 /**
- * Listener callback type for storage events
+ * Listener callback type for storage events array
  */
 
 /**
  * Listener callback for individual new events
  */
 
-const MAX_EVENTS = 500;
-class StorageEventStore {
-  events = [];
-  listeners = new Set();
-  eventCallbacks = new Set();
-  isCapturing = false;
-
-  // Unsubscribe functions
+class StorageEventStore extends BaseEventStore {
+  // Unsubscribe functions for raw listeners
   asyncStorageUnsubscribe = null;
   mmkvUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "storage",
+      maxEvents: 500
+    });
+  }
 
   /**
    * Start capturing storage events from both AsyncStorage and MMKV
    */
   async startCapturing() {
-    if (this.isCapturing) {
-      return;
-    }
-
     // Start AsyncStorage listening if not already active
     if (!isAsyncStorageListening()) {
       await startAsyncStorageListening();
     }
 
     // Subscribe to AsyncStorage events
-    this.asyncStorageUnsubscribe = addAsyncStorageListener(event => {
-      const storageEvent = {
-        ...event,
-        storageType: "async"
-      };
-      this.addEvent(storageEvent);
-    });
+    if (!this.asyncStorageUnsubscribe) {
+      this.asyncStorageUnsubscribe = addAsyncStorageListener(event => {
+        const storageEvent = {
+          ...event,
+          storageType: "async"
+        };
+        this.addEvent(storageEvent);
+      });
+    }
 
     // Subscribe to MMKV events
-    this.mmkvUnsubscribe = addMMKVListener(event => {
-      const storageEvent = {
-        ...event,
-        storageType: "mmkv"
-      };
-      this.addEvent(storageEvent);
-    });
-    this.isCapturing = true;
+    if (!this.mmkvUnsubscribe) {
+      this.mmkvUnsubscribe = addMMKVListener(event => {
+        const storageEvent = {
+          ...event,
+          storageType: "mmkv"
+        };
+        this.addEvent(storageEvent);
+      });
+    }
   }
 
   /**
    * Stop capturing storage events
    */
   stopCapturing() {
-    if (!this.isCapturing) {
-      return;
-    }
-
     // Unsubscribe from AsyncStorage
     if (this.asyncStorageUnsubscribe) {
       this.asyncStorageUnsubscribe();
@@ -102,88 +96,13 @@ class StorageEventStore {
       this.mmkvUnsubscribe();
       this.mmkvUnsubscribe = null;
     }
-    this.isCapturing = false;
-  }
-
-  /**
-   * Pause event capture (used during time-travel operations)
-   */
-  pauseCapture() {
-    pauseAsyncStorageCapture();
-    // MMKV listener doesn't have pause, but it's less common for time-travel
-  }
-
-  /**
-   * Resume event capture after pausing
-   */
-  resumeCapture() {
-    resumeAsyncStorageCapture();
-  }
-
-  /**
-   * Add an event to the store
-   */
-  addEvent(event) {
-    // Add to beginning (newest first)
-    this.events = [event, ...this.events].slice(0, MAX_EVENTS);
-
-    // Notify event callbacks (for individual events)
-    this.eventCallbacks.forEach(callback => {
-      try {
-        callback(event);
-      } catch {
-        // Ignore callback errors
-      }
-    });
-
-    // Notify listeners (for full event list)
-    this.notifyListeners();
   }
 
   /**
-   * Subscribe to all storage events (receives full event array on each change)
+   * Check if currently capturing events (has subscribers)
    */
-  subscribe(listener) {
-    this.listeners.add(listener);
-
-    // Immediately call with current events
-    listener(this.events);
-
-    // Return unsubscribe function
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Subscribe to new events only (receives individual events as they occur)
-   */
-  onEvent(callback) {
-    this.eventCallbacks.add(callback);
-    return () => {
-      this.eventCallbacks.delete(callback);
-    };
-  }
-
-  /**
-   * Notify all listeners of changes
-   */
-  notifyListeners() {
-    const events = this.events;
-    this.listeners.forEach(listener => {
-      try {
-        listener(events);
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Get all events
-   */
-  getEvents() {
-    return this.events;
+  isCapturing() {
+    return this.asyncStorageUnsubscribe !== null || this.mmkvUnsubscribe !== null;
   }
 
   /**
@@ -192,40 +111,14 @@ class StorageEventStore {
   getEventsByType(storageType) {
     return this.events.filter(event => event.storageType === storageType);
   }
-
-  /**
-   * Get event count
-   */
-  getEventCount() {
-    return this.events.length;
-  }
-
-  /**
-   * Clear all events
-   */
-  clearEvents() {
-    this.events = [];
-    this.notifyListeners();
-  }
-
-  /**
-   * Check if currently capturing events
-   */
-  get capturing() {
-    return this.isCapturing;
-  }
 }
 
 // Singleton instance
 export const storageEventStore = new StorageEventStore();
 
 // Convenience exports
-export const startStorageCapture = () => storageEventStore.startCapturing();
-export const stopStorageCapture = () => storageEventStore.stopCapturing();
-export const pauseStorageCapture = () => storageEventStore.pauseCapture();
-export const resumeStorageCapture = () => storageEventStore.resumeCapture();
-export const subscribeToStorageEvents = listener => storageEventStore.subscribe(listener);
+export const subscribeToStorageEvents = listener => storageEventStore.subscribeToEvents(listener);
 export const onStorageEvent = callback => storageEventStore.onEvent(callback);
 export const getStorageEvents = () => storageEventStore.getEvents();
 export const clearStorageEvents = () => storageEventStore.clearEvents();
-export const isStorageCapturing = () => storageEventStore.capturing;
+export const isStorageCapturing = () => storageEventStore.isCapturing();

package/lib/typescript/storage/components/StorageModalWithTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorageModalWithTabs.d.ts","sourceRoot":"","sources":["../../../../src/storage/components/StorageModalWithTabs.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA0B9C,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC5C;AAqBD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,mBAAwB,GACzB,EAAE,yBAAyB,sCA6sB3B"}
+{"version":3,"file":"StorageModalWithTabs.d.ts","sourceRoot":"","sources":["../../../../src/storage/components/StorageModalWithTabs.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAuB9C,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC5C;AAqBD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,mBAAwB,GACzB,EAAE,yBAAyB,sCA+rB3B"}

package/lib/typescript/storage/hooks/useStorageEvents.d.ts

@@ -2,7 +2,8 @@
  * useStorageEvents Hook
  *
  * React hook for subscribing to storage events from the centralized store.
- * Provides a clean interface for components to receive storage events.
+ * Uses self-managing Subscribable pattern - the storage listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  *
  * @example
  * ```typescript
@@ -28,24 +29,16 @@ export interface UseStorageEventsOptions {
     storageType?: "async" | "mmkv" | "all";
     /** Maximum number of events to keep in state */
     maxEvents?: number;
-    /** Auto-start capturing on mount (default: true) */
-    autoStart?: boolean;
+    /** Whether to subscribe to events (default: true). Set to false to unsubscribe. */
+    enabled?: boolean;
 }
 export interface UseStorageEventsResult {
     /** All storage events (newest first) */
     events: StorageEvent[];
     /** Clear all events */
     clearEvents: () => void;
-    /** Whether events are being captured */
+    /** Whether events are being captured (has subscribers) */
     isCapturing: boolean;
-    /** Start capturing events */
-    startCapturing: () => Promise<void>;
-    /** Stop capturing events */
-    stopCapturing: () => void;
-    /** Pause capturing (for time-travel) */
-    pauseCapturing: () => void;
-    /** Resume capturing after pause */
-    resumeCapturing: () => void;
 }
 export declare function useStorageEvents(options?: UseStorageEventsOptions): UseStorageEventsResult;
 //# sourceMappingURL=useStorageEvents.d.ts.map

package/lib/typescript/storage/hooks/useStorageEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStorageEvents.d.ts","sourceRoot":"","sources":["../../../../src/storage/hooks/useStorageEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IACvC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uBAAuB;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,4BAA4B;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,wCAAwC;IACxC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAoExB"}
+{"version":3,"file":"useStorageEvents.d.ts","sourceRoot":"","sources":["../../../../src/storage/hooks/useStorageEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AAGrC,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IACvC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,uBAAuB;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0DAA0D;IAC1D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAkDxB"}

package/lib/typescript/storage/index.d.ts

@@ -15,5 +15,5 @@ export { MMKVInstanceSelector } from "./components/MMKVInstanceSelector";
 export { MMKVInstanceInfoPanel } from "./components/MMKVInstanceInfoPanel";
 export * from "./types";
 export * from "./utils";
-export { storageEventStore, startStorageCapture, stopStorageCapture, pauseStorageCapture, resumeStorageCapture, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing, type StorageEvent, type StorageEventListener, type StorageEventCallback, } from "./stores/storageEventStore";
+export { storageEventStore, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing, type StorageEvent, type StorageEventListener, type StorageEventCallback, } from "./stores/storageEventStore";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/storage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/storage/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjI,OAAO,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,KAAK,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvH,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/storage/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjI,OAAO,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACpG,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,KAAK,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvH,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,4BAA4B,CAAC"}

package/lib/typescript/storage/stores/storageEventStore.d.ts

@@ -2,25 +2,24 @@
  * Storage Event Store
  *
  * Centralized store that aggregates storage events from AsyncStorage and MMKV
- * into a single event stream. This provides a single source of truth for all
- * storage operations, eliminating duplicate subscriptions across components.
+ * into a single event stream. Uses BaseEventStore pattern - the storage listener
+ * automatically starts when the first subscriber joins and stops when the last
+ * subscriber leaves.
  *
  * @example
  * ```typescript
  * import { storageEventStore } from '@buoy-gg/storage';
  *
- * // Subscribe to storage events
- * const unsubscribe = storageEventStore.subscribe((events) => {
+ * // Subscribe to storage events - automatically starts capturing!
+ * const unsubscribe = storageEventStore.subscribeToEvents((events) => {
  *   console.log('Storage events:', events);
  * });
  *
- * // Start capturing (must be called once)
- * await storageEventStore.startCapturing();
- *
- * // Later, clean up
+ * // Later, clean up - automatically stops if no other subscribers
  * unsubscribe();
  * ```
  */
+import { BaseEventStore } from "@buoy-gg/shared-ui";
 import { type AsyncStorageEvent } from "../utils/AsyncStorageListener";
 import { type MMKVEvent } from "../utils/MMKVListener";
 /**
@@ -32,78 +31,35 @@ export type StorageEvent = (AsyncStorageEvent & {
     storageType: "mmkv";
 });
 /**
- * Listener callback type for storage events
+ * Listener callback type for storage events array
  */
 export type StorageEventListener = (events: StorageEvent[]) => void;
 /**
  * Listener callback for individual new events
  */
 export type StorageEventCallback = (event: StorageEvent) => void;
-declare class StorageEventStore {
-    private events;
-    private listeners;
-    private eventCallbacks;
-    private isCapturing;
+declare class StorageEventStore extends BaseEventStore<StorageEvent> {
     private asyncStorageUnsubscribe;
     private mmkvUnsubscribe;
+    constructor();
     /**
      * Start capturing storage events from both AsyncStorage and MMKV
      */
-    startCapturing(): Promise<void>;
+    protected startCapturing(): Promise<void>;
     /**
      * Stop capturing storage events
      */
-    stopCapturing(): void;
-    /**
-     * Pause event capture (used during time-travel operations)
-     */
-    pauseCapture(): void;
-    /**
-     * Resume event capture after pausing
-     */
-    resumeCapture(): void;
+    protected stopCapturing(): void;
     /**
-     * Add an event to the store
+     * Check if currently capturing events (has subscribers)
      */
-    private addEvent;
-    /**
-     * Subscribe to all storage events (receives full event array on each change)
-     */
-    subscribe(listener: StorageEventListener): () => void;
-    /**
-     * Subscribe to new events only (receives individual events as they occur)
-     */
-    onEvent(callback: StorageEventCallback): () => void;
-    /**
-     * Notify all listeners of changes
-     */
-    private notifyListeners;
-    /**
-     * Get all events
-     */
-    getEvents(): StorageEvent[];
+    isCapturing(): boolean;
     /**
      * Get events filtered by storage type
      */
     getEventsByType(storageType: "async" | "mmkv"): StorageEvent[];
-    /**
-     * Get event count
-     */
-    getEventCount(): number;
-    /**
-     * Clear all events
-     */
-    clearEvents(): void;
-    /**
-     * Check if currently capturing events
-     */
-    get capturing(): boolean;
 }
 export declare const storageEventStore: StorageEventStore;
-export declare const startStorageCapture: () => Promise<void>;
-export declare const stopStorageCapture: () => void;
-export declare const pauseStorageCapture: () => void;
-export declare const resumeStorageCapture: () => void;
 export declare const subscribeToStorageEvents: (listener: StorageEventListener) => () => void;
 export declare const onStorageEvent: (callback: StorageEventCallback) => () => void;
 export declare const getStorageEvents: () => StorageEvent[];

package/lib/typescript/storage/stores/storageEventStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storageEventStore.d.ts","sourceRoot":"","sources":["../../../../src/storage/stores/storageEventStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAOL,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,CAAC,iBAAiB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC,GAC9C,CAAC,SAAS,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAIjE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,SAAS,CAAwC;IACzD,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,uBAAuB,CAA6B;IAC5D,OAAO,CAAC,eAAe,CAA6B;IAEpD;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IA2BrC;;OAEG;IACH,aAAa,IAAI,IAAI;IAoBrB;;OAEG;IACH,YAAY,IAAI,IAAI;IAKpB;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAiBhB;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,oBAAoB,GAAG,MAAM,IAAI;IAYrD;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,oBAAoB,GAAG,MAAM,IAAI;IAQnD;;OAEG;IACH,OAAO,CAAC,eAAe;IAWvB;;OAEG;IACH,SAAS,IAAI,YAAY,EAAE;IAI3B;;OAEG;IACH,eAAe,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,EAAE;IAI9D;;OAEG;IACH,aAAa,IAAI,MAAM;IAIvB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;CACF;AAGD,eAAO,MAAM,iBAAiB,mBAA0B,CAAC;AAGzD,eAAO,MAAM,mBAAmB,qBAA2C,CAAC;AAC5E,eAAO,MAAM,kBAAkB,YAA0C,CAAC;AAC1E,eAAO,MAAM,mBAAmB,YAAyC,CAAC;AAC1E,eAAO,MAAM,oBAAoB,YAA0C,CAAC;AAC5E,eAAO,MAAM,wBAAwB,GAAI,UAAU,oBAAoB,WAlFpB,IAmFZ,CAAC;AACxC,eAAO,MAAM,cAAc,GAAI,UAAU,oBAAoB,WArEZ,IAsEZ,CAAC;AACtC,eAAO,MAAM,gBAAgB,sBAAsC,CAAC;AACpE,eAAO,MAAM,kBAAkB,YAAwC,CAAC;AACxE,eAAO,MAAM,kBAAkB,eAAoC,CAAC"}
+{"version":3,"file":"storageEventStore.d.ts","sourceRoot":"","sources":["../../../../src/storage/stores/storageEventStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEL,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,CAAC,iBAAiB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC,GAC9C,CAAC,SAAS,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAEjE,cAAM,iBAAkB,SAAQ,cAAc,CAAC,YAAY,CAAC;IAE1D,OAAO,CAAC,uBAAuB,CAA6B;IAC5D,OAAO,CAAC,eAAe,CAA6B;;IASpD;;OAEG;cACa,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAyB/C;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAc/B;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,eAAe,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,EAAE;CAG/D;AAGD,eAAO,MAAM,iBAAiB,mBAA0B,CAAC;AAGzD,eAAO,MAAM,wBAAwB,GAAI,UAAU,oBAAoB,eACxB,CAAC;AAChD,eAAO,MAAM,cAAc,GAAI,UAAU,oBAAoB,eACxB,CAAC;AACtC,eAAO,MAAM,gBAAgB,sBAAsC,CAAC;AACpE,eAAO,MAAM,kBAAkB,YAAwC,CAAC;AACxE,eAAO,MAAM,kBAAkB,eAAwC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/storage",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "storage package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "2.1.1",
-    "@buoy-gg/shared-ui": "2.1.1"
+    "@buoy-gg/shared-ui": "2.1.3",
+    "@buoy-gg/floating-tools-core": "2.1.3"
   },
   "peerDependencies": {
     "@buoy-gg/license": "*",
@@ -40,7 +40,7 @@
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "2.1.1"
+    "@buoy-gg/license": "2.1.3"
   },
   "react-native-builder-bob": {
     "source": "src",