@buoy-gg/route-events 2.1.2 → 2.1.3

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -9,7 +9,7 @@ var _reactNative = require("react-native");
 var _expoRouter = require("expo-router");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
-var _RouteObserver = require("../RouteObserver");
+var _useRouteEvents = require("../hooks/useRouteEvents");
 var _RouteFilterViewV = require("./RouteFilterViewV2");
 var _RoutesSitemap = require("./RoutesSitemap");
 var _NavigationStack = require("./NavigationStack");
@@ -22,8 +22,7 @@ function RouteEventsModalWithTabs({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false,
-  routeObserver = _RouteObserver.routeObserver
+  enableSharedModalDimensions = false
 }) {
   const router = (0, _expoRouter.useRouter)();
   const [activeTab, setActiveTab] = (0, _react.useState)("events");
@@ -43,9 +42,21 @@ function RouteEventsModalWithTabs({
   // The useRouteObserver hook uses expo-router hooks that only work inside Stack/Tabs/Slot.
   // See the RouteTracker component export for easy setup.
 
-  // Event Listener state
-  const [events, setEvents] = (0, _react.useState)([]);
-  const [isListening, setIsListening] = (0, _react.useState)(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
+  const {
+    events,
+    clearEvents: clearRouteEvents,
+    isListening: isStoreListening
+  } = (0, _useRouteEvents.useRouteEvents)({
+    enabled: isListeningEnabled
+  });
+
+  // isListening = enabled and store is listening
+  const isListening = isListeningEnabled && isStoreListening;
   const [showFilters, setShowFilters] = (0, _react.useState)(false);
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
   const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["/_sitemap", "/api", "/__dev"]));
@@ -89,7 +100,7 @@ function RouteEventsModalWithTabs({
         const storedMonitoring = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
-          setIsListening(shouldMonitor);
+          setIsListeningEnabled(shouldMonitor);
         }
         hasLoadedMonitoringState.current = true;
       } catch (error) {
@@ -157,24 +168,11 @@ function RouteEventsModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
-  // Event listener setup - keeps capturing even when minimized
-  (0, _react.useEffect)(() => {
-    if (!isListening) return;
+  // Event listener is now managed by useRouteEvents hook
 
-    // Set up event listener
-    const unsubscribe = routeObserver.addListener(event => {
-      lastEventRef.current = event;
-      setEvents(prev => {
-        const updated = [event, ...prev];
-        return updated.slice(0, 500);
-      });
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [isListening, routeObserver]);
   const handleToggleListening = (0, _react.useCallback)(() => {
-    setIsListening(prev => !prev);
+    // Toggle subscription - this actually subscribes/unsubscribes from the store
+    setIsListeningEnabled(prev => !prev);
   }, []);
   const handleClearEvents = (0, _react.useCallback)(() => {
     if (events.length === 0) return;
@@ -184,15 +182,8 @@ function RouteEventsModalWithTabs({
       setShowUpgradeModal(true);
       return;
     }
-    _reactNative.Alert.alert("Clear Events", `Clear ${events.length} event${events.length !== 1 ? "s" : ""}?`, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Clear",
-      style: "destructive",
-      onPress: () => setEvents([])
-    }]);
-  }, [events.length, isPro]);
+    clearRouteEvents();
+  }, [events.length, isPro, clearRouteEvents]);
   const handleTogglePattern = (0, _react.useCallback)(pattern => {
     setIgnoredPatterns(prev => {
       const next = new Set(prev);
@@ -425,16 +416,10 @@ function RouteEventsModalWithTabs({
                 size: 14,
                 color: ignoredPatterns.size > 0 ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
               })
-            }), /*#__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.buoyColors.success
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Play, {
-                size: 14,
-                color: _sharedUi.buoyColors.success
-              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+              isEnabled: isListening,
+              onToggle: handleToggleListening,
+              accessibilityLabel: "Toggle route event monitoring"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
               onPress: handleClearEvents,
               style: styles.iconButton,
@@ -467,9 +452,6 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 6,
     backgroundColor: _sharedUi.buoyColors.input
   },
-  activeButton: {
-    backgroundColor: _sharedUi.buoyColors.success + "1A"
-  },
   activeFilterButton: {
     backgroundColor: _sharedUi.buoyColors.primary + "1A"
   },

package/lib/commonjs/hooks/useRouteEvents.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRouteEvents = useRouteEvents;
+var _react = require("react");
+var _routeEventStore = require("../stores/routeEventStore");
+/**
+ * useRouteEvents Hook
+ *
+ * React hook for subscribing to route events from the centralized store.
+ * Uses self-managing Subscribable pattern - the store automatically
+ * subscribes to routeObserver when this hook mounts and unsubscribes
+ * when all subscribers unmount.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { events, clearEvents, isListening } = useRouteEvents();
+ *
+ *   return (
+ *     <View>
+ *       {events.map((event) => (
+ *         <Text key={event.timestamp.toString()}>
+ *           {event.pathname}
+ *         </Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+
+// Re-export RouteChangeEvent for convenience
+
+function useRouteEvents(options = {}) {
+  const {
+    maxEvents = 500,
+    enabled = true
+  } = options;
+  const [events, setEvents] = (0, _react.useState)([]);
+  // Track listening state locally so it updates reactively with the subscription
+  const [isListening, setIsListening] = (0, _react.useState)(enabled);
+
+  // Subscribe to store - this automatically starts/stops listening
+  // based on subscriber count (Subscribable pattern from TanStack Query)
+  // Only subscribe when enabled is true
+  (0, _react.useEffect)(() => {
+    if (!enabled) {
+      setIsListening(false);
+      return;
+    }
+    const unsubscribe = _routeEventStore.routeEventStore.subscribeToEvents(allEvents => {
+      // Limit events
+      if (allEvents.length > maxEvents) {
+        setEvents(allEvents.slice(0, maxEvents));
+      } else {
+        setEvents(allEvents);
+      }
+    });
+
+    // Mark as listening after successful subscription
+    setIsListening(true);
+    return () => {
+      unsubscribe();
+      // Note: Don't set isListening=false here because we might be
+      // re-subscribing due to dependency change, not actually stopping
+    };
+  }, [maxEvents, enabled]);
+  const clearEvents = (0, _react.useCallback)(() => {
+    _routeEventStore.routeEventStore.clearEvents();
+  }, []);
+  return {
+    events,
+    clearEvents,
+    isListening
+  };
+}

package/lib/commonjs/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "createRouteEventsTool", {
     return _preset.createRouteEventsTool;
   }
 });
+Object.defineProperty(exports, "routeEventStore", {
+  enumerable: true,
+  get: function () {
+    return _routeEventStore.routeEventStore;
+  }
+});
 Object.defineProperty(exports, "routeEventsToolPreset", {
   enumerable: true,
   get: function () {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "useRoute", {
     return _useRouteSitemap.useRoute;
   }
 });
+Object.defineProperty(exports, "useRouteEvents", {
+  enumerable: true,
+  get: function () {
+    return _useRouteEvents.useRouteEvents;
+  }
+});
 Object.defineProperty(exports, "useRouteObserver", {
   enumerable: true,
   get: function () {
@@ -107,7 +119,9 @@ var _NavigationStack = require("./components/NavigationStack");
 var _RouteEventItemCompact = require("./components/RouteEventItemCompact");
 var _RouteEventExpandedContent = require("./components/RouteEventExpandedContent");
 var _useRouteObserver = require("./useRouteObserver");
+var _useRouteEvents = require("./hooks/useRouteEvents");
 var _useRouteSitemap = require("./useRouteSitemap");
 var _useNavigationStack = require("./useNavigationStack");
 var _RouteParser = require("./RouteParser");
-var _RouteObserver = require("./RouteObserver");
+var _RouteObserver = require("./RouteObserver");
+var _routeEventStore = require("./stores/routeEventStore");

package/lib/commonjs/stores/routeEventStore.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeToRouteEvents = exports.routeEventStore = exports.onRouteEvent = exports.isRouteListening = exports.getRouteEvents = exports.clearRouteEvents = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _RouteObserver = require("../RouteObserver");
+/**
+ * Route Event Store
+ *
+ * Centralized store that aggregates route change events from the RouteObserver.
+ * Uses BaseEventStore pattern - the store automatically subscribes to routeObserver
+ * when the first subscriber joins and unsubscribes when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { routeEventStore } from '@buoy-gg/route-events';
+ *
+ * // Subscribe to route events - automatically starts listening!
+ * const unsubscribe = routeEventStore.subscribeToEvents((events) => {
+ *   console.log('Route events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
+ */
+
+// Re-export types for convenience
+
+/**
+ * Listener callback type for route events array
+ */
+
+/**
+ * Listener callback for individual new events
+ */
+
+class RouteEventStore extends _sharedUi.BaseEventStore {
+  // Unsubscribe function for routeObserver
+  routeObserverUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "route-events",
+      maxEvents: 500
+    });
+  }
+
+  /**
+   * Start listening to route changes from routeObserver
+   */
+  startCapturing() {
+    if (!this.routeObserverUnsubscribe) {
+      this.routeObserverUnsubscribe = _RouteObserver.routeObserver.addListener(event => {
+        this.addEvent(event);
+      });
+    }
+  }
+
+  /**
+   * Stop listening to route changes
+   */
+  stopCapturing() {
+    if (this.routeObserverUnsubscribe) {
+      this.routeObserverUnsubscribe();
+      this.routeObserverUnsubscribe = null;
+    }
+  }
+
+  /**
+   * Check if currently listening (has subscribers)
+   */
+  isCapturing() {
+    return this.routeObserverUnsubscribe !== null;
+  }
+
+  // Alias for backwards compatibility
+  isListening() {
+    return this.isCapturing();
+  }
+}
+
+// Singleton instance
+const routeEventStore = exports.routeEventStore = new RouteEventStore();
+
+// Convenience exports
+const subscribeToRouteEvents = listener => routeEventStore.subscribeToEvents(listener);
+exports.subscribeToRouteEvents = subscribeToRouteEvents;
+const onRouteEvent = callback => routeEventStore.onEvent(callback);
+exports.onRouteEvent = onRouteEvent;
+const getRouteEvents = () => routeEventStore.getEvents();
+exports.getRouteEvents = getRouteEvents;
+const clearRouteEvents = () => routeEventStore.clearEvents();
+exports.clearRouteEvents = clearRouteEvents;
+const isRouteListening = () => routeEventStore.isListening();
+exports.isRouteListening = isRouteListening;

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -3,12 +3,12 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, Alert } from "react-native";
 import { useRouter } from "expo-router";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Pause, Play, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // Free tier limit for route events
 const FREE_TIER_EVENT_LIMIT = 3;
-import { routeObserver as defaultRouteObserver } from "../RouteObserver";
+import { useRouteEvents } from "../hooks/useRouteEvents";
 import { RouteFilterViewV2 } from "./RouteFilterViewV2";
 import { RoutesSitemap } from "./RoutesSitemap";
 import { NavigationStack } from "./NavigationStack";
@@ -19,8 +19,7 @@ export function RouteEventsModalWithTabs({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false,
-  routeObserver = defaultRouteObserver
+  enableSharedModalDimensions = false
 }) {
   const router = useRouter();
   const [activeTab, setActiveTab] = useState("events");
@@ -40,9 +39,21 @@ export function RouteEventsModalWithTabs({
   // The useRouteObserver hook uses expo-router hooks that only work inside Stack/Tabs/Slot.
   // See the RouteTracker component export for easy setup.
 
-  // Event Listener state
-  const [events, setEvents] = useState([]);
-  const [isListening, setIsListening] = useState(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
+  const {
+    events,
+    clearEvents: clearRouteEvents,
+    isListening: isStoreListening
+  } = useRouteEvents({
+    enabled: isListeningEnabled
+  });
+
+  // isListening = enabled and store is listening
+  const isListening = isListeningEnabled && isStoreListening;
   const [showFilters, setShowFilters] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["/_sitemap", "/api", "/__dev"]));
@@ -86,7 +97,7 @@ export function RouteEventsModalWithTabs({
         const storedMonitoring = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
-          setIsListening(shouldMonitor);
+          setIsListeningEnabled(shouldMonitor);
         }
         hasLoadedMonitoringState.current = true;
       } catch (error) {
@@ -154,24 +165,11 @@ export function RouteEventsModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
-  // Event listener setup - keeps capturing even when minimized
-  useEffect(() => {
-    if (!isListening) return;
+  // Event listener is now managed by useRouteEvents hook
 
-    // Set up event listener
-    const unsubscribe = routeObserver.addListener(event => {
-      lastEventRef.current = event;
-      setEvents(prev => {
-        const updated = [event, ...prev];
-        return updated.slice(0, 500);
-      });
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [isListening, routeObserver]);
   const handleToggleListening = useCallback(() => {
-    setIsListening(prev => !prev);
+    // Toggle subscription - this actually subscribes/unsubscribes from the store
+    setIsListeningEnabled(prev => !prev);
   }, []);
   const handleClearEvents = useCallback(() => {
     if (events.length === 0) return;
@@ -181,15 +179,8 @@ export function RouteEventsModalWithTabs({
       setShowUpgradeModal(true);
       return;
     }
-    Alert.alert("Clear Events", `Clear ${events.length} event${events.length !== 1 ? "s" : ""}?`, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Clear",
-      style: "destructive",
-      onPress: () => setEvents([])
-    }]);
-  }, [events.length, isPro]);
+    clearRouteEvents();
+  }, [events.length, isPro, clearRouteEvents]);
   const handleTogglePattern = useCallback(pattern => {
     setIgnoredPatterns(prev => {
       const next = new Set(prev);
@@ -422,16 +413,10 @@ export function RouteEventsModalWithTabs({
                 size: 14,
                 color: ignoredPatterns.size > 0 ? buoyColors.primary : buoyColors.textSecondary
               })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: handleToggleListening,
-              style: [styles.iconButton, isListening && styles.activeButton],
-              children: isListening ? /*#__PURE__*/_jsx(Pause, {
-                size: 14,
-                color: buoyColors.success
-              }) : /*#__PURE__*/_jsx(Play, {
-                size: 14,
-                color: buoyColors.success
-              })
+            }), /*#__PURE__*/_jsx(PowerToggleButton, {
+              isEnabled: isListening,
+              onToggle: handleToggleListening,
+              accessibilityLabel: "Toggle route event monitoring"
             }), /*#__PURE__*/_jsx(TouchableOpacity, {
               onPress: handleClearEvents,
               style: styles.iconButton,
@@ -464,9 +449,6 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     backgroundColor: buoyColors.input
   },
-  activeButton: {
-    backgroundColor: buoyColors.success + "1A"
-  },
   activeFilterButton: {
     backgroundColor: buoyColors.primary + "1A"
   },

package/lib/module/hooks/useRouteEvents.js

@@ -0,0 +1,76 @@
+"use strict";
+
+/**
+ * useRouteEvents Hook
+ *
+ * React hook for subscribing to route events from the centralized store.
+ * Uses self-managing Subscribable pattern - the store automatically
+ * subscribes to routeObserver when this hook mounts and unsubscribes
+ * when all subscribers unmount.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { events, clearEvents, isListening } = useRouteEvents();
+ *
+ *   return (
+ *     <View>
+ *       {events.map((event) => (
+ *         <Text key={event.timestamp.toString()}>
+ *           {event.pathname}
+ *         </Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { routeEventStore } from "../stores/routeEventStore";
+
+// Re-export RouteChangeEvent for convenience
+
+export function useRouteEvents(options = {}) {
+  const {
+    maxEvents = 500,
+    enabled = true
+  } = options;
+  const [events, setEvents] = useState([]);
+  // Track listening state locally so it updates reactively with the subscription
+  const [isListening, setIsListening] = useState(enabled);
+
+  // Subscribe to store - this automatically starts/stops listening
+  // based on subscriber count (Subscribable pattern from TanStack Query)
+  // Only subscribe when enabled is true
+  useEffect(() => {
+    if (!enabled) {
+      setIsListening(false);
+      return;
+    }
+    const unsubscribe = routeEventStore.subscribeToEvents(allEvents => {
+      // Limit events
+      if (allEvents.length > maxEvents) {
+        setEvents(allEvents.slice(0, maxEvents));
+      } else {
+        setEvents(allEvents);
+      }
+    });
+
+    // Mark as listening after successful subscription
+    setIsListening(true);
+    return () => {
+      unsubscribe();
+      // Note: Don't set isListening=false here because we might be
+      // re-subscribing due to dependency change, not actually stopping
+    };
+  }, [maxEvents, enabled]);
+  const clearEvents = useCallback(() => {
+    routeEventStore.clearEvents();
+  }, []);
+  return {
+    events,
+    clearEvents,
+    isListening
+  };
+}

package/lib/module/index.js

@@ -34,6 +34,7 @@ export { RouteEventExpandedContent } from "./components/RouteEventExpandedConten
 // HOOKS (For consuming route data)
 // =============================================================================
 export { useRouteObserver } from "./useRouteObserver";
+export { useRouteEvents } from "./hooks/useRouteEvents";
 export { useRouteSitemap, useRoute, useParentRoutes } from "./useRouteSitemap";
 export { useNavigationStack } from "./useNavigationStack";
 
@@ -51,4 +52,6 @@ export { RouteObserver } from "./RouteObserver";
 // INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
 // =============================================================================
 /** @internal - Singleton instance for cross-package communication */
-export { routeObserver } from "./RouteObserver";
+export { routeObserver } from "./RouteObserver";
+/** @internal - Event store for centralized route event management */
+export { routeEventStore } from "./stores/routeEventStore";

package/lib/module/stores/routeEventStore.js

@@ -0,0 +1,89 @@
+"use strict";
+
+/**
+ * Route Event Store
+ *
+ * Centralized store that aggregates route change events from the RouteObserver.
+ * Uses BaseEventStore pattern - the store automatically subscribes to routeObserver
+ * when the first subscriber joins and unsubscribes when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { routeEventStore } from '@buoy-gg/route-events';
+ *
+ * // Subscribe to route events - automatically starts listening!
+ * const unsubscribe = routeEventStore.subscribeToEvents((events) => {
+ *   console.log('Route events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
+ */
+
+import { BaseEventStore } from "@buoy-gg/shared-ui";
+import { routeObserver } from "../RouteObserver";
+
+// Re-export types for convenience
+
+/**
+ * Listener callback type for route events array
+ */
+
+/**
+ * Listener callback for individual new events
+ */
+
+class RouteEventStore extends BaseEventStore {
+  // Unsubscribe function for routeObserver
+  routeObserverUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "route-events",
+      maxEvents: 500
+    });
+  }
+
+  /**
+   * Start listening to route changes from routeObserver
+   */
+  startCapturing() {
+    if (!this.routeObserverUnsubscribe) {
+      this.routeObserverUnsubscribe = routeObserver.addListener(event => {
+        this.addEvent(event);
+      });
+    }
+  }
+
+  /**
+   * Stop listening to route changes
+   */
+  stopCapturing() {
+    if (this.routeObserverUnsubscribe) {
+      this.routeObserverUnsubscribe();
+      this.routeObserverUnsubscribe = null;
+    }
+  }
+
+  /**
+   * Check if currently listening (has subscribers)
+   */
+  isCapturing() {
+    return this.routeObserverUnsubscribe !== null;
+  }
+
+  // Alias for backwards compatibility
+  isListening() {
+    return this.isCapturing();
+  }
+}
+
+// Singleton instance
+export const routeEventStore = new RouteEventStore();
+
+// Convenience exports
+export const subscribeToRouteEvents = listener => routeEventStore.subscribeToEvents(listener);
+export const onRouteEvent = callback => routeEventStore.onEvent(callback);
+export const getRouteEvents = () => routeEventStore.getEvents();
+export const clearRouteEvents = () => routeEventStore.clearEvents();
+export const isRouteListening = () => routeEventStore.isListening();

package/lib/typescript/components/RouteEventsModalWithTabs.d.ts

@@ -1,15 +1,9 @@
-import { routeObserver as defaultRouteObserver } from "../RouteObserver";
 export interface RouteEventsModalWithTabsProps {
     visible: boolean;
     onClose: () => void;
     onBack?: () => void;
     onMinimize?: (modalState: any) => void;
     enableSharedModalDimensions?: boolean;
-    /**
-     * Optional route observer instance. If not provided, uses the default singleton.
-     * Route tracking will start automatically when the modal is opened.
-     */
-    routeObserver?: typeof defaultRouteObserver;
 }
-export declare function RouteEventsModalWithTabs({ visible, onClose, onBack, onMinimize, enableSharedModalDimensions, routeObserver, }: RouteEventsModalWithTabsProps): import("react").JSX.Element | null;
+export declare function RouteEventsModalWithTabs({ visible, onClose, onBack, onMinimize, enableSharedModalDimensions, }: RouteEventsModalWithTabsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=RouteEventsModalWithTabs.d.ts.map

package/lib/typescript/components/RouteEventsModalWithTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAmCA,OAAO,EACL,aAAa,IAAI,oBAAoB,EAEtC,MAAM,kBAAkB,CAAC;AAU1B,MAAM,WAAW,6BAA6B;IAC5C,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;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,oBAAoB,CAAC;CAC7C;AAID,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,aAAoC,GACrC,EAAE,6BAA6B,sCA4hB/B"}
+{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AA8CA,MAAM,WAAW,6BAA6B;IAC5C,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;CACvC;AAID,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,6BAA6B,sCAigB/B"}

package/lib/typescript/hooks/useRouteEvents.d.ts

@@ -0,0 +1,43 @@
+/**
+ * useRouteEvents Hook
+ *
+ * React hook for subscribing to route events from the centralized store.
+ * Uses self-managing Subscribable pattern - the store automatically
+ * subscribes to routeObserver when this hook mounts and unsubscribes
+ * when all subscribers unmount.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { events, clearEvents, isListening } = useRouteEvents();
+ *
+ *   return (
+ *     <View>
+ *       {events.map((event) => (
+ *         <Text key={event.timestamp.toString()}>
+ *           {event.pathname}
+ *         </Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+import { type RouteChangeEvent } from "../stores/routeEventStore";
+export type { RouteChangeEvent } from "../stores/routeEventStore";
+export interface UseRouteEventsOptions {
+    /** Maximum number of events to keep in state */
+    maxEvents?: number;
+    /** Whether to subscribe to events (default: true). Set to false to unsubscribe. */
+    enabled?: boolean;
+}
+export interface UseRouteEventsResult {
+    /** All route events (newest first) */
+    events: RouteChangeEvent[];
+    /** Clear all events */
+    clearEvents: () => void;
+    /** Whether events are being listened to (has subscribers) */
+    isListening: boolean;
+}
+export declare function useRouteEvents(options?: UseRouteEventsOptions): UseRouteEventsResult;
+//# sourceMappingURL=useRouteEvents.d.ts.map

package/lib/typescript/hooks/useRouteEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouteEvents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRouteEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAGH,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uBAAuB;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6DAA6D;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA4CtB"}

package/lib/typescript/index.d.ts

@@ -19,6 +19,8 @@ export type { RouteEventItemCompactProps } from "./components/RouteEventItemComp
 export { RouteEventExpandedContent } from "./components/RouteEventExpandedContent";
 export type { RouteEventExpandedContentProps } from "./components/RouteEventExpandedContent";
 export { useRouteObserver } from "./useRouteObserver";
+export { useRouteEvents } from "./hooks/useRouteEvents";
+export type { UseRouteEventsOptions, UseRouteEventsResult, } from "./hooks/useRouteEvents";
 export { useRouteSitemap, useRoute, useParentRoutes } from "./useRouteSitemap";
 export type { UseRouteSitemapOptions, UseRouteSitemapResult, } from "./useRouteSitemap";
 export { useNavigationStack } from "./useNavigationStack";
@@ -29,4 +31,7 @@ export { RouteParser } from "./RouteParser";
 export { RouteObserver } from "./RouteObserver";
 /** @internal - Singleton instance for cross-package communication */
 export { routeObserver } from "./RouteObserver";
+/** @internal - Event store for centralized route event management */
+export { routeEventStore } from "./stores/routeEventStore";
+export type { RouteEventListener, RouteEventCallback, } from "./stores/routeEventStore";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAK7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAK9B,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAK7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAK9B,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,qEAAqE;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}

package/lib/typescript/stores/routeEventStore.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Route Event Store
+ *
+ * Centralized store that aggregates route change events from the RouteObserver.
+ * Uses BaseEventStore pattern - the store automatically subscribes to routeObserver
+ * when the first subscriber joins and unsubscribes when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { routeEventStore } from '@buoy-gg/route-events';
+ *
+ * // Subscribe to route events - automatically starts listening!
+ * const unsubscribe = routeEventStore.subscribeToEvents((events) => {
+ *   console.log('Route events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
+ */
+import { BaseEventStore } from "@buoy-gg/shared-ui";
+import { type RouteChangeEvent } from "../RouteObserver";
+export type { RouteChangeEvent } from "../RouteObserver";
+/**
+ * Listener callback type for route events array
+ */
+export type RouteEventListener = (events: RouteChangeEvent[]) => void;
+/**
+ * Listener callback for individual new events
+ */
+export type RouteEventCallback = (event: RouteChangeEvent) => void;
+declare class RouteEventStore extends BaseEventStore<RouteChangeEvent> {
+    private routeObserverUnsubscribe;
+    constructor();
+    /**
+     * Start listening to route changes from routeObserver
+     */
+    protected startCapturing(): void;
+    /**
+     * Stop listening to route changes
+     */
+    protected stopCapturing(): void;
+    /**
+     * Check if currently listening (has subscribers)
+     */
+    isCapturing(): boolean;
+    isListening(): boolean;
+}
+export declare const routeEventStore: RouteEventStore;
+export declare const subscribeToRouteEvents: (listener: RouteEventListener) => () => void;
+export declare const onRouteEvent: (callback: RouteEventCallback) => () => void;
+export declare const getRouteEvents: () => RouteChangeEvent[];
+export declare const clearRouteEvents: () => void;
+export declare const isRouteListening: () => boolean;
+//# sourceMappingURL=routeEventStore.d.ts.map

package/lib/typescript/stores/routeEventStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routeEventStore.d.ts","sourceRoot":"","sources":["../../../src/stores/routeEventStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAiB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGxE,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAEnE,cAAM,eAAgB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAE5D,OAAO,CAAC,wBAAwB,CAA6B;;IAS7D;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAQhC;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAO/B;;OAEG;IACH,WAAW,IAAI,OAAO;IAKtB,WAAW,IAAI,OAAO;CAGvB;AAGD,eAAO,MAAM,eAAe,iBAAwB,CAAC;AAGrD,eAAO,MAAM,sBAAsB,GAAI,UAAU,kBAAkB,eACtB,CAAC;AAC9C,eAAO,MAAM,YAAY,GAAI,UAAU,kBAAkB,eACtB,CAAC;AACpC,eAAO,MAAM,cAAc,0BAAoC,CAAC;AAChE,eAAO,MAAM,gBAAgB,YAAsC,CAAC;AACpE,eAAO,MAAM,gBAAgB,eAAsC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/route-events",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "route-events 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.2",
-    "@buoy-gg/shared-ui": "2.1.2"
+    "@buoy-gg/floating-tools-core": "2.1.3",
+    "@buoy-gg/shared-ui": "2.1.3"
   },
   "peerDependencies": {
     "@buoy-gg/license": "*",
@@ -49,7 +49,7 @@
     "@types/react-native": "^0.73.0",
     "expo-router": "~5.0.7",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "2.1.2"
+    "@buoy-gg/license": "2.1.3"
   },
   "react-native-builder-bob": {
     "source": "src",