@buoy-gg/route-events 7.0.33 → 7.0.34

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -25,6 +25,23 @@ const CommonActions = (0, _safeReactNavigation.getCommonActions)();
 
 // Free tier limit for route events
 
+/** Persistence recipes: the tab is stored as its bare name, the flag as "true"/"false". */
+const TAB_PERSISTENCE = {
+  // Every tab the selector offers, including "stack": the save side has
+  // always written it, so leaving it off this list meant the Stack tab
+  // was persisted and then silently discarded on the next launch.
+  parse: raw => raw === "routes" || raw === "events" || raw === "stack" ? raw : undefined,
+  serialize: tab => tab
+};
+const BOOLEAN_PERSISTENCE = {
+  parse: raw => raw === "true",
+  serialize: value => value.toString()
+};
+const STRING_SET_PERSISTENCE = {
+  parse: raw => new Set(JSON.parse(raw)),
+  serialize: set => JSON.stringify(Array.from(set))
+};
+
 /**
  * Find the path from root navigation state to a screen by name.
  * Returns array of route names from root to the target, or null if not found.
@@ -85,7 +102,7 @@ function RouteEventsModalWithTabs({
   const router = (0, _sharedUi.useSafeRouter)();
   const containerRef = (0, _safeReactNavigation.useSafeNavigationContainerRef)();
   const hasExpoRouter = (0, _sharedUi.isExpoRouterAvailable)();
-  const [activeTab, setActiveTab] = (0, _react.useState)("events");
+  const [activeTab, setActiveTab] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(), "events", TAB_PERSISTENCE);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
   // Serialized stack reported up by NavigationStack so the copy button can live
   // in the shared navbar.
@@ -107,7 +124,7 @@ function RouteEventsModalWithTabs({
   // See the RouteTracker component export for easy setup.
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = (0, _react.useState)(true);
+  const [isListeningEnabled, setIsListeningEnabled] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring(), true, BOOLEAN_PERSISTENCE);
 
   // Event Listener state - using centralized store via hook
   // Pass enabled option to control subscription
@@ -127,11 +144,8 @@ function RouteEventsModalWithTabs({
   const [selectedEvent, setSelectedEvent] = (0, _react.useState)(null);
   const [selectedVisitNumber, setSelectedVisitNumber] = (0, _react.useState)(1);
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set(["/_sitemap", "/api", "/__dev"]));
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(), new Set(["/_sitemap", "/api", "/__dev"]), STRING_SET_PERSISTENCE);
   const lastEventRef = (0, _react.useRef)(null);
-  const hasLoadedFilters = (0, _react.useRef)(false);
-  const hasLoadedTabState = (0, _react.useRef)(false);
-  const hasLoadedMonitoringState = (0, _react.useRef)(false);
   const handleModeChange = (0, _react.useCallback)(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -183,103 +197,6 @@ function RouteEventsModalWithTabs({
     }
   }, [router, containerRef, hasExpoRouter, remote, isPro]);
 
-  // Load persisted tab state on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedTabState.current) return;
-    const loadTabState = async () => {
-      try {
-        const storedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.activeTab());
-        // Every tab the selector offers, including "stack": the save side has
-        // always written it, so leaving it off this list meant the Stack tab
-        // was persisted and then silently discarded on the next launch —
-        // you came back to Events having chosen otherwise.
-        if (storedTab === "routes" || storedTab === "events" || storedTab === "stack") {
-          setActiveTab(storedTab);
-        }
-        hasLoadedTabState.current = true;
-      } catch (error) {
-        // Failed to load tab state
-      }
-    };
-    loadTabState();
-  }, [visible]);
-
-  // Load persisted monitoring state on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedMonitoringState.current) return;
-    const loadMonitoringState = async () => {
-      try {
-        const storedMonitoring = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring());
-        if (storedMonitoring !== null) {
-          const shouldMonitor = storedMonitoring === "true";
-          setIsListeningEnabled(shouldMonitor);
-        }
-        hasLoadedMonitoringState.current = true;
-      } catch (error) {
-        // Failed to load monitoring state
-      }
-    };
-    loadMonitoringState();
-  }, [visible]);
-
-  // Save tab state when it changes
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedTabState.current) return;
-    const saveTabState = async () => {
-      try {
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(), activeTab);
-      } catch (error) {
-        // Failed to save tab state
-      }
-    };
-    saveTabState();
-  }, [activeTab]);
-
-  // Save monitoring state when it changes
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedMonitoringState.current) return;
-    const saveMonitoringState = async () => {
-      try {
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
-      } catch (error) {
-        // Failed to save monitoring state
-      }
-    };
-    saveMonitoringState();
-  }, [isListening]);
-
-  // Load persisted filters on mount
-  (0, _react.useEffect)(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedFilters = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters());
-        if (storedFilters) {
-          const filters = JSON.parse(storedFilters);
-          setIgnoredPatterns(new Set(filters));
-        }
-        hasLoadedFilters.current = true;
-      } catch (error) {
-        // Failed to load filters
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  (0, _react.useEffect)(() => {
-    if (!hasLoadedFilters.current) return;
-    const saveFilters = async () => {
-      try {
-        const filters = Array.from(ignoredPatterns);
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
-      } catch (error) {
-        // Failed to save filters
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
   // Event listener is now managed by useRouteEvents hook
 
   const handleToggleListening = (0, _react.useCallback)(() => {

package/lib/commonjs/components/RouteEventsTimeline.js

@@ -73,17 +73,8 @@ function RouteEventsTimeline({
         onPress: handleItemPress,
         onNavigate: onNavigate
       }),
-      showsVerticalScrollIndicator: true
-      // Clipped cells fail Detox's hittability check even when they are on
-      // screen, so the e2e bundle keeps every mounted row targetable. The
-      // env var is inlined at bundle time; guarded so a non-inlining bundler
-      // keeps production behaviour.
-      ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      showsVerticalScrollIndicator: true,
+      ..._sharedUi.EVENT_LIST_PRESET
     })
   );
 }

package/lib/commonjs/hooks/useRouteEvents.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRouteEvents = useRouteEvents;
-var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _routeEventStore = require("../stores/routeEventStore");
 /**
  * useRouteEvents Hook
@@ -39,50 +39,19 @@ function useRouteEvents(options = {}) {
     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;
-    }
-
-    // Frame-coalesced (see network's useNetworkEventList): navigation
-    // bursts land as one commit per frame instead of one per emission.
-    let rafId = null;
-    let pending = null;
-    const unsubscribe = _routeEventStore.routeEventStore.subscribeToEvents(allEvents => {
-      pending = allEvents;
-      if (rafId != null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        if (!pending) return;
-        const latest = pending;
-        pending = null;
-        setEvents(latest.length > maxEvents ? latest.slice(0, maxEvents) : latest);
-      });
-    });
-
-    // Mark as listening after successful subscription
-    setIsListening(true);
-    return () => {
-      unsubscribe();
-      if (rafId != null) cancelAnimationFrame(rafId);
-      // 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();
-  }, []);
+  // Subscribing auto-starts the route observer (Subscribable pattern), and
+  // the shared hook frame-coalesces navigation bursts into one commit.
+  const {
+    events,
+    clearEvents,
+    isActive
+  } = (0, _sharedUi.useEventStoreEvents)(_routeEventStore.routeEventStore, {
+    maxEvents,
+    enabled
+  });
   return {
     events,
     clearEvents,
-    isListening
+    isListening: isActive
   };
 }

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRouteEventsTool = createRouteEventsTool;
-exports.routeEventsToolPreset = void 0;
+exports.routeEventsToolPreset = exports.createRouteEventsTool = void 0;
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _RouteEventsModalWithTabs = require("./components/RouteEventsModalWithTabs");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured route events tool for FloatingDevTools
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Navigation stack visualization
  * - Automatic route tracking (no setup needed)
  */
-const routeEventsToolPreset = exports.routeEventsToolPreset = {
+const routeEventsToolPreset = exports.routeEventsToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "route-events",
   name: "ROUTES",
   description: "Route tracking & navigation inspector",
@@ -47,7 +47,7 @@ const routeEventsToolPreset = exports.routeEventsToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom route events tool configuration.
@@ -64,20 +64,6 @@ const routeEventsToolPreset = exports.routeEventsToolPreset = {
  * });
  * ```
  */
-function createRouteEventsTool(options) {
-  return {
-    id: options?.id || "route-events",
-    name: options?.name || "ROUTES",
-    description: options?.description || "Route tracking & navigation inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
-      size: size
-    }),
-    component: _RouteEventsModalWithTabs.RouteEventsModalWithTabs,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createRouteEventsTool = exports.createRouteEventsTool = (0, _sharedUi.createToolFactory)(routeEventsToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -8,8 +8,8 @@ import { getCommonActions, useSafeNavigationContainerRef } from "../utils/safeRe
 // (useSafeNavigationContainerRef then yields undefined, so the dispatch
 // paths below never execute).
 const CommonActions = getCommonActions();
-import { useSafeRouter, isExpoRouterAvailable, windowDragProps, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, night, TickProvider, useLimit } from "@buoy-gg/shared-ui";
+import { useSafeRouter, isExpoRouterAvailable, windowDragProps, ToolEmptyState, resolveListEmptyState, usePersistedState } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Trash2, Filter, SearchBar, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, night, TickProvider, useLimit } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // Free tier limit for route events
@@ -22,6 +22,23 @@ import { ReactNavigationRoutes } from "./ReactNavigationRoutes";
 import { NavigationStack } from "./NavigationStack";
 import { RouteEventsTimeline } from "./RouteEventsTimeline";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Persistence recipes: the tab is stored as its bare name, the flag as "true"/"false". */
+const TAB_PERSISTENCE = {
+  // Every tab the selector offers, including "stack": the save side has
+  // always written it, so leaving it off this list meant the Stack tab
+  // was persisted and then silently discarded on the next launch.
+  parse: raw => raw === "routes" || raw === "events" || raw === "stack" ? raw : undefined,
+  serialize: tab => tab
+};
+const BOOLEAN_PERSISTENCE = {
+  parse: raw => raw === "true",
+  serialize: value => value.toString()
+};
+const STRING_SET_PERSISTENCE = {
+  parse: raw => new Set(JSON.parse(raw)),
+  serialize: set => JSON.stringify(Array.from(set))
+};
+
 /**
  * Find the path from root navigation state to a screen by name.
  * Returns array of route names from root to the target, or null if not found.
@@ -82,7 +99,7 @@ export function RouteEventsModalWithTabs({
   const router = useSafeRouter();
   const containerRef = useSafeNavigationContainerRef();
   const hasExpoRouter = isExpoRouterAvailable();
-  const [activeTab, setActiveTab] = useState("events");
+  const [activeTab, setActiveTab] = usePersistedState(devToolsStorageKeys.routeEvents.activeTab(), "events", TAB_PERSISTENCE);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   // Serialized stack reported up by NavigationStack so the copy button can live
   // in the shared navbar.
@@ -104,7 +121,7 @@ export function RouteEventsModalWithTabs({
   // See the RouteTracker component export for easy setup.
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = useState(true);
+  const [isListeningEnabled, setIsListeningEnabled] = usePersistedState(devToolsStorageKeys.routeEvents.isMonitoring(), true, BOOLEAN_PERSISTENCE);
 
   // Event Listener state - using centralized store via hook
   // Pass enabled option to control subscription
@@ -124,11 +141,8 @@ export function RouteEventsModalWithTabs({
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [selectedVisitNumber, setSelectedVisitNumber] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["/_sitemap", "/api", "/__dev"]));
+  const [ignoredPatterns, setIgnoredPatterns] = usePersistedState(devToolsStorageKeys.routeEvents.eventFilters(), new Set(["/_sitemap", "/api", "/__dev"]), STRING_SET_PERSISTENCE);
   const lastEventRef = useRef(null);
-  const hasLoadedFilters = useRef(false);
-  const hasLoadedTabState = useRef(false);
-  const hasLoadedMonitoringState = useRef(false);
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -180,103 +194,6 @@ export function RouteEventsModalWithTabs({
     }
   }, [router, containerRef, hasExpoRouter, remote, isPro]);
 
-  // Load persisted tab state on mount
-  useEffect(() => {
-    if (!visible || hasLoadedTabState.current) return;
-    const loadTabState = async () => {
-      try {
-        const storedTab = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.activeTab());
-        // Every tab the selector offers, including "stack": the save side has
-        // always written it, so leaving it off this list meant the Stack tab
-        // was persisted and then silently discarded on the next launch —
-        // you came back to Events having chosen otherwise.
-        if (storedTab === "routes" || storedTab === "events" || storedTab === "stack") {
-          setActiveTab(storedTab);
-        }
-        hasLoadedTabState.current = true;
-      } catch (error) {
-        // Failed to load tab state
-      }
-    };
-    loadTabState();
-  }, [visible]);
-
-  // Load persisted monitoring state on mount
-  useEffect(() => {
-    if (!visible || hasLoadedMonitoringState.current) return;
-    const loadMonitoringState = async () => {
-      try {
-        const storedMonitoring = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.isMonitoring());
-        if (storedMonitoring !== null) {
-          const shouldMonitor = storedMonitoring === "true";
-          setIsListeningEnabled(shouldMonitor);
-        }
-        hasLoadedMonitoringState.current = true;
-      } catch (error) {
-        // Failed to load monitoring state
-      }
-    };
-    loadMonitoringState();
-  }, [visible]);
-
-  // Save tab state when it changes
-  useEffect(() => {
-    if (!hasLoadedTabState.current) return;
-    const saveTabState = async () => {
-      try {
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.activeTab(), activeTab);
-      } catch (error) {
-        // Failed to save tab state
-      }
-    };
-    saveTabState();
-  }, [activeTab]);
-
-  // Save monitoring state when it changes
-  useEffect(() => {
-    if (!hasLoadedMonitoringState.current) return;
-    const saveMonitoringState = async () => {
-      try {
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
-      } catch (error) {
-        // Failed to save monitoring state
-      }
-    };
-    saveMonitoringState();
-  }, [isListening]);
-
-  // Load persisted filters on mount
-  useEffect(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedFilters = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.eventFilters());
-        if (storedFilters) {
-          const filters = JSON.parse(storedFilters);
-          setIgnoredPatterns(new Set(filters));
-        }
-        hasLoadedFilters.current = true;
-      } catch (error) {
-        // Failed to load filters
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  useEffect(() => {
-    if (!hasLoadedFilters.current) return;
-    const saveFilters = async () => {
-      try {
-        const filters = Array.from(ignoredPatterns);
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
-      } catch (error) {
-        // Failed to save filters
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
   // Event listener is now managed by useRouteEvents hook
 
   const handleToggleListening = useCallback(() => {

package/lib/module/components/RouteEventsTimeline.js

@@ -12,7 +12,7 @@
 
 import { useCallback } from "react";
 import { View, Text, FlatList, StyleSheet } from "react-native";
-import { Navigation, night } from "@buoy-gg/shared-ui";
+import { Navigation, night, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { RouteEventItemCompact } from "./RouteEventItemCompact";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function RouteEventsTimeline({
@@ -69,17 +69,8 @@ export function RouteEventsTimeline({
         onPress: handleItemPress,
         onNavigate: onNavigate
       }),
-      showsVerticalScrollIndicator: true
-      // Clipped cells fail Detox's hittability check even when they are on
-      // screen, so the e2e bundle keeps every mounted row targetable. The
-      // env var is inlined at bundle time; guarded so a non-inlining bundler
-      // keeps production behaviour.
-      ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      showsVerticalScrollIndicator: true,
+      ...EVENT_LIST_PRESET
     })
   );
 }

package/lib/module/hooks/useRouteEvents.js

@@ -26,7 +26,7 @@
  * ```
  */
 
-import { useState, useEffect, useCallback } from "react";
+import { useEventStoreEvents } from "@buoy-gg/shared-ui";
 import { routeEventStore } from "../stores/routeEventStore";
 
 // Re-export RouteChangeEvent for convenience
@@ -36,50 +36,19 @@ export function useRouteEvents(options = {}) {
     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;
-    }
-
-    // Frame-coalesced (see network's useNetworkEventList): navigation
-    // bursts land as one commit per frame instead of one per emission.
-    let rafId = null;
-    let pending = null;
-    const unsubscribe = routeEventStore.subscribeToEvents(allEvents => {
-      pending = allEvents;
-      if (rafId != null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        if (!pending) return;
-        const latest = pending;
-        pending = null;
-        setEvents(latest.length > maxEvents ? latest.slice(0, maxEvents) : latest);
-      });
-    });
-
-    // Mark as listening after successful subscription
-    setIsListening(true);
-    return () => {
-      unsubscribe();
-      if (rafId != null) cancelAnimationFrame(rafId);
-      // 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();
-  }, []);
+  // Subscribing auto-starts the route observer (Subscribable pattern), and
+  // the shared hook frame-coalesces navigation bursts into one commit.
+  const {
+    events,
+    clearEvents,
+    isActive
+  } = useEventStoreEvents(routeEventStore, {
+    maxEvents,
+    enabled
+  });
   return {
     events,
     clearEvents,
-    isListening
+    isListening: isActive
   };
 }

package/lib/module/preset.js

@@ -19,6 +19,7 @@
 
 import { RoutesIcon } from "@buoy-gg/floating-tools-core";
 import { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
+import { createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
 
 /**
  * Pre-configured route events tool for FloatingDevTools.
@@ -29,7 +30,7 @@ import { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs"
  * - Automatic route tracking (no setup needed)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const routeEventsToolPreset = {
+export const routeEventsToolPreset = defineToolPreset({
   id: "route-events",
   name: "ROUTES",
   description: "Route tracking & navigation inspector",
@@ -43,7 +44,7 @@ export const routeEventsToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom route events tool configuration.
@@ -60,20 +61,6 @@ export const routeEventsToolPreset = {
  * });
  * ```
  */
-export function createRouteEventsTool(options) {
-  return {
-    id: options?.id || "route-events",
-    name: options?.name || "ROUTES",
-    description: options?.description || "Route tracking & navigation inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(RoutesIcon, {
-      size: size
-    }),
-    component: RouteEventsModalWithTabs,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+export const createRouteEventsTool = createToolFactory(routeEventsToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

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

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,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;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YACR,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;YACrB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;YAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;SAC/B,CAAC;QACF,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;QAC3B;;;;WAIG;QACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;QAC7C;;;;;WAKG;QACH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5C,2EAA2E;QAC3E,aAAa,CAAC,EAAE,CACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,KACzB,IAAI,CAAC;KACX,CAAC;CACH;AA8CD,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,EACd,MAAM,GACP,EAAE,6BAA6B,sCA8tB/B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,GAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAKlF"}
+{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,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;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YACR,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;YACrB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;YAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;SAC/B,CAAC;QACF,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;QAC3B;;;;WAIG;QACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;QAC7C;;;;;WAKG;QACH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5C,2EAA2E;QAC3E,aAAa,CAAC,EAAE,CACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,KACzB,IAAI,CAAC;KACX,CAAC;CACH;AAgED,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,EACd,MAAM,GACP,EAAE,6BAA6B,sCAqmB/B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,GAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAKlF"}

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

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAaH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,UAAU,wBAAwB;IAChC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B;wEACoE;IACpE,WAAW,EAAE,GAAG,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACvE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,GACd,EAAE,wBAAwB,+BA8D1B"}
+{"version":3,"file":"RouteEventsTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAcH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,UAAU,wBAAwB;IAChC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B;wEACoE;IACpE,WAAW,EAAE,GAAG,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACvE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,GACd,EAAE,wBAAwB,+BAoD1B"}

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

@@ -1 +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,CAoDtB"}
+{"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,CAStB"}

package/lib/typescript/preset.d.ts

@@ -51,16 +51,10 @@ export declare const routeEventsToolPreset: {
  * });
  * ```
  */
-export declare function createRouteEventsTool(options?: {
-    /** Tool name (default: "ROUTES") */
-    name?: string;
-    /** Tool description */
-    description?: string;
-    /** Custom tool ID (default: "route-events") */
-    id?: string;
+export declare const createRouteEventsTool: (options?: ({
     /** Enable shared modal dimensions */
     enableSharedModalDimensions?: boolean;
-}): {
+} & import("@buoy-gg/shared-ui").ToolPresetOverrides) | undefined) => {
     id: string;
     name: string;
     description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAEjF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;;;;qBAKf;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAKlC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,CAAC,EAAE;IAC9C,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qCAAqC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;;;;;qBAOoB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;EASpC"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAGjF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB;;;;;qBAKf;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CAKjC,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB;IAG9B,qCAAqC;kCACP,OAAO;;;;;;qBA1BtB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;;;;CA8BlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/route-events",
-  "version": "7.0.33",
+  "version": "7.0.34",
   "description": "Navigation devtool for React Native — live stack, full sitemap, jump to any screen. Expo Router & React Navigation. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,11 +26,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "^7.0.33",
-    "@buoy-gg/shared-ui": "^7.0.33"
+    "@buoy-gg/shared-ui": "^7.0.34",
+    "@buoy-gg/floating-tools-core": "^7.0.34"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "7.0.33",
+    "@buoy-gg/license": "7.0.34",
     "@react-native-async-storage/async-storage": "^2.0.0 || ^3.1.0",
     "@react-navigation/native": "*",
     "expo-router": "*",
@@ -52,7 +52,7 @@
     "@types/react-native": "^0.73.0",
     "expo-router": "~5.0.7",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "^7.0.33"
+    "@buoy-gg/license": "^7.0.34"
   },
   "react-native-builder-bob": {
     "source": "src",