@buoy-gg/network 2.1.2 → 2.1.3

package/lib/commonjs/network/components/NetworkModal.js

@@ -49,8 +49,7 @@ function NetworkModalInner({
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    isCapturing,
     hasLockedEvents,
     lockedEventCount,
     isEventLocked,
@@ -58,6 +57,14 @@ function NetworkModalInner({
   } = (0, _useNetworkEvents.useNetworkEvents)({
     isPro
   });
+
+  // Local UI state for display toggle (doesn't affect global event capture)
+  // This allows events tool to continue receiving events while this UI is "paused"
+  const [isDisplayPaused, setIsDisplayPaused] = (0, _react.useState)(false);
+  const isEnabled = isCapturing && !isDisplayPaused;
+  const toggleInterception = (0, _react.useCallback)(() => {
+    setIsDisplayPaused(prev => !prev);
+  }, []);
   const handleModeChange = (0, _react.useCallback)(_mode => {
     // Mode changes handled by JsModal
   }, []);

package/lib/commonjs/network/hooks/useNetworkEvents.js

@@ -7,11 +7,12 @@ exports.FREE_TIER_REQUEST_LIMIT = void 0;
 exports.useNetworkEvents = useNetworkEvents;
 var _react = require("react");
 var _networkEventStore = require("../utils/networkEventStore");
-var _networkListener = require("../utils/networkListener");
 var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
 /**
  * Hook for accessing network events and controls
- * Uses Reactotron-style listener pattern
+ *
+ * Uses self-managing Subscribable pattern - the network listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  */
 
 /** Free tier limit for network requests */
@@ -19,13 +20,15 @@ const FREE_TIER_REQUEST_LIMIT = exports.FREE_TIER_REQUEST_LIMIT = 25;
 
 /**
  * Custom hook for accessing network events and controls
- * 
+ *
  * This hook provides a complete interface for network monitoring, including
- * event filtering, statistics calculation, and interception control. It uses
- * the Reactotron-style listener pattern for network event handling.
- * 
+ * event filtering, statistics calculation, and interception control.
+ *
+ * The network listener automatically starts when this hook mounts and stops
+ * when all components using it unmount (Subscribable pattern from TanStack Query).
+ *
  * @returns Object containing filtered events, statistics, controls, and utilities
- * 
+ *
  * @example
  * ```typescript
  * function NetworkMonitor() {
@@ -35,22 +38,19 @@ const FREE_TIER_REQUEST_LIMIT = exports.FREE_TIER_REQUEST_LIMIT = 25;
  *     filter,
  *     setFilter,
  *     clearEvents,
- *     toggleInterception,
- *     isEnabled
+ *     isCapturing
  *   } = useNetworkEvents();
- * 
+ *
  *   return (
  *     <div>
  *       <p>Total requests: {stats.totalRequests}</p>
  *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
- *       <button onClick={toggleInterception}>
- *         {isEnabled ? 'Stop' : 'Start'} Monitoring
- *       </button>
+ *       <p>Capturing: {isCapturing ? 'Yes' : 'No'}</p>
  *     </div>
  *   );
  * }
  * ```
- * 
+ *
  * @performance Uses memoization for expensive filtering and statistics calculations
  * @performance Optimizes string operations and array processing for large datasets
  * @performance Includes Set-based lookups for O(1) filter matching
@@ -63,36 +63,17 @@ function useNetworkEvents(options = {}) {
   } = options;
   const [events, setEvents] = (0, _react.useState)([]);
   const [filter, setFilter] = (0, _react.useState)({});
-  const [isEnabled, setIsEnabled] = (0, _react.useState)(false);
 
-  // Subscribe to event store changes
+  // Subscribe to event store - this automatically starts/stops the network listener
+  // based on subscriber count (Subscribable pattern from TanStack Query)
   (0, _react.useEffect)(() => {
-    // Subscribe to store changes
-    const unsubscribeStore = _networkEventStore.networkEventStore.subscribe(setEvents);
-
-    // Add listener to network events
-    const unsubscribeListener = (0, _networkListener.addNetworkListener)(event => {
-      // Only log in development and for non-ignored URLs
-      if (__DEV__ && !event.request.url.includes("symbolicate") && !event.request.url.includes(":8081")) {
-        // Network event processed: [event.type] [method] [url] - available for debugging if needed
-      }
-      _networkEventStore.networkEventStore.processNetworkEvent(event);
-    });
-
-    // Check if already listening
-    setIsEnabled((0, _networkListener.networkListener)().isActive);
-
-    // Start listening if not already
-    if (!(0, _networkListener.networkListener)().isActive) {
-      (0, _networkListener.startNetworkListener)();
-      setIsEnabled(true);
-    }
-
-    // Load initial events
-    setEvents(_networkEventStore.networkEventStore.getEvents());
+    // subscribeToEvents handles everything:
+    // - Starts network listener when first subscriber joins
+    // - Stops network listener when last subscriber leaves
+    // - Immediately provides current events
+    const unsubscribe = _networkEventStore.networkEventStore.subscribeToEvents(setEvents);
     return () => {
-      unsubscribeStore();
-      unsubscribeListener();
+      unsubscribe();
     };
   }, []);
 
@@ -101,16 +82,8 @@ function useNetworkEvents(options = {}) {
     _networkEventStore.networkEventStore.clearEvents();
   }, []);
 
-  // Toggle interception
-  const toggleInterception = (0, _react.useCallback)(() => {
-    if (isEnabled) {
-      (0, _networkListener.stopNetworkListener)();
-      setIsEnabled(false);
-    } else {
-      (0, _networkListener.startNetworkListener)();
-      setIsEnabled(true);
-    }
-  }, [isEnabled]);
+  // Check if the store is currently capturing (has subscribers)
+  const isCapturing = _networkEventStore.networkEventStore.isCapturing();
 
   // Memoize search text processing to avoid repeated toLowerCase calls
   // Performance: Expensive string operations repeated for every event on every filter
@@ -304,8 +277,8 @@ function useNetworkEvents(options = {}) {
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    /** Whether the store has subscribers (listener is running) */
+    isCapturing,
     hosts,
     methods,
     /** Whether there are locked events due to free tier limit */
@@ -315,6 +288,8 @@ function useNetworkEvents(options = {}) {
     /** Check if a specific event is locked (by ID) */
     isEventLocked,
     /** Free tier request limit */
-    requestLimit: FREE_TIER_REQUEST_LIMIT
+    requestLimit: FREE_TIER_REQUEST_LIMIT,
+    /** Get subscriber counts for debugging */
+    getSubscriberCounts: () => _networkEventStore.networkEventStore.getSubscriberCounts()
   };
 }

package/lib/commonjs/network/utils/networkEventStore.js

@@ -4,18 +4,91 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.networkEventStore = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _extractOperationName = require("./extractOperationName");
+var _networkListener = require("./networkListener");
 /**
- * Network event store for managing captured network requests
- * Works with the Reactotron-style network listener
+ * Network Event Store
+ *
+ * Store for managing captured network requests. Uses BaseEventStore pattern -
+ * the network listener automatically starts when the first subscriber joins
+ * and stops when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { networkEventStore } from '@buoy-gg/network';
+ *
+ * // Subscribe to network events - automatically starts capturing!
+ * const unsubscribe = networkEventStore.subscribeToEvents((events) => {
+ *   console.log('Network events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
  */
 
-class NetworkEventStore {
-  events = [];
+/**
+ * Callback type for individual event notifications
+ */
+
+/**
+ * Callback type for full events array notifications
+ */
+
+class NetworkEventStore extends _sharedUi.BaseEventStore {
   pendingRequests = new Map();
-  listeners = new Set();
-  maxEvents = 500; // Configurable max events to prevent memory issues
-  recentRequests = new Map(); // Track recent requests to detect duplicates
+  recentRequests = new Map();
+  rawListenerUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "network",
+      maxEvents: 500
+    });
+  }
+
+  /**
+   * Start capturing network events
+   */
+  startCapturing() {
+    const listener = (0, _networkListener.networkListener)();
+
+    // Start the network interceptor if not already active
+    if (!listener.isActive) {
+      listener.startListening();
+    }
+
+    // Add our listener to push raw events into the store
+    if (!this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe = (0, _networkListener.addNetworkListener)(event => {
+        this.processNetworkEvent(event);
+      });
+    }
+  }
+
+  /**
+   * Stop capturing network events
+   */
+  stopCapturing() {
+    // Remove our raw listener
+    if (this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe();
+      this.rawListenerUnsubscribe = null;
+    }
+
+    // If no other listeners exist, stop the network interceptor
+    const listener = (0, _networkListener.networkListener)();
+    if (listener.listenerCount === 0) {
+      listener.stopListening();
+    }
+  }
+
+  /**
+   * Check if the store is actively capturing network events
+   */
+  isCapturing() {
+    return this.rawListenerUnsubscribe !== null;
+  }
 
   /**
    * Process a network listener event
@@ -32,13 +105,13 @@ class NetworkEventStore {
 
       // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
       if (lastRequestTime && now - lastRequestTime < 50) {
-        return; // Skip duplicate
+        return;
       }
       this.recentRequests.set(requestKey, now);
 
       // Clean up old entries to prevent memory leak
       if (this.recentRequests.size > 100) {
-        const cutoff = now - 5000; // Remove entries older than 5 seconds
+        const cutoff = now - 5000;
         for (const [key, time] of this.recentRequests.entries()) {
           if (time < cutoff) {
             this.recentRequests.delete(key);
@@ -46,7 +119,6 @@ class NetworkEventStore {
         }
       }
 
-      // Create new network event for request
       // Build full URL with query params if present
       const queryString = request.params ? `?${new URLSearchParams(request.params).toString()}` : "";
       const fullUrl = `${request.url}${queryString}`;
@@ -54,12 +126,10 @@ class NetworkEventStore {
       // Extract GraphQL operation name and variables for searchability
       let operationName;
       let graphqlVariables;
-      if (request.client === 'graphql') {
+      if (request.client === "graphql") {
         const extracted = (0, _extractOperationName.extractOperationName)(request.data);
         operationName = extracted || undefined;
-
-        // Extract variables from GraphQL request
-        if (request.data && typeof request.data === 'object' && 'variables' in request.data && request.data.variables && typeof request.data.variables === 'object') {
+        if (request.data && typeof request.data === "object" && "variables" in request.data && request.data.variables && typeof request.data.variables === "object") {
           graphqlVariables = request.data.variables;
         }
       }
@@ -67,7 +137,6 @@ class NetworkEventStore {
         id: request.id,
         method: request.method,
         url: fullUrl,
-        // Store FULL URL with query params
         host: this.extractHost(request.url),
         path: this.extractPath(request.url),
         query: queryString,
@@ -78,18 +147,13 @@ class NetworkEventStore {
         responseHeaders: {},
         requestClient: request.client,
         operationName,
-        // GraphQL operation name for search/filter
-        graphqlVariables // GraphQL variables for display and search
+        graphqlVariables
       };
-
-      // Store as pending
       this.pendingRequests.set(request.id, networkEvent);
-
-      // Add to events list
       this.events = [networkEvent, ...this.events].slice(0, this.maxEvents);
-      this.notifyListeners();
+      this.notify(networkEvent);
+      this.notifyArrayListeners();
     } else if (event.type === "response" || event.type === "error") {
-      // Find and update the pending request
       const index = this.events.findIndex(e => e.id === request.id);
       if (index !== -1) {
         const updatedEvent = {
@@ -110,14 +174,11 @@ class NetworkEventStore {
         }
         this.events[index] = updatedEvent;
         this.pendingRequests.delete(request.id);
-        this.notifyListeners();
+        this.notify(updatedEvent);
+        this.notifyArrayListeners();
       }
     }
   }
-
-  /**
-   * Extract host from URL
-   */
   extractHost(url) {
     try {
       const urlObj = new URL(url);
@@ -127,10 +188,6 @@ class NetworkEventStore {
       return "";
     }
   }
-
-  /**
-   * Extract path from URL
-   */
   extractPath(url) {
     try {
       const urlObj = new URL(url);
@@ -140,10 +197,6 @@ class NetworkEventStore {
       return url;
     }
   }
-
-  /**
-   * Get size of data
-   */
   getDataSize(data) {
     if (!data) return 0;
     if (typeof data === "string") return data.length;
@@ -153,63 +206,38 @@ class NetworkEventStore {
       return 0;
     }
   }
-
-  /**
-   * Get all events
-   */
-  getEvents() {
-    return [...this.events];
-  }
-
-  /**
-   * Get event by ID
-   */
   getEventById(id) {
     return this.events.find(e => e.id === id);
   }
 
   /**
-   * Clear all events
+   * Override clearEvents to also clear pending requests
    */
   clearEvents() {
-    this.events = [];
+    super.clearEvents();
     this.pendingRequests.clear();
     this.recentRequests.clear();
-    this.notifyListeners();
-  }
-
-  /**
-   * Subscribe to event changes
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
   }
 
   /**
-   * Notify all listeners of changes
+   * Subscribe to individual events with optional replay of existing events
    */
-  notifyListeners() {
-    const events = this.getEvents();
-    this.listeners.forEach(listener => listener(events));
-  }
+  onEvent(callback, replayExisting = true) {
+    const unsubscribe = this.subscribe(callback);
 
-  /**
-   * Set maximum number of events to store
-   */
-  setMaxEvents(max) {
-    this.maxEvents = max;
-    if (this.events.length > max) {
-      this.events = this.events.slice(0, max);
-      this.notifyListeners();
+    // Replay existing events if requested
+    if (replayExisting && this.events.length > 0) {
+      const existingEvents = [...this.events].reverse();
+      for (const event of existingEvents) {
+        try {
+          callback(event);
+        } catch {
+          // Ignore callback errors
+        }
+      }
     }
+    return unsubscribe;
   }
-
-  /**
-   * Get statistics about network events
-   */
   getStats() {
     const total = this.events.length;
     const successful = this.events.filter(e => e.status && e.status >= 200 && e.status < 300).length;
@@ -229,10 +257,6 @@ class NetworkEventStore {
       averageDuration: Math.round(avgDuration)
     };
   }
-
-  /**
-   * Filter events by criteria
-   */
   filterEvents(filter) {
     let filtered = [...this.events];
     if (filter.method) {
@@ -263,7 +287,7 @@ class NetworkEventStore {
 }
 
 /**
- * Singleton store that aggregates captured network traffic. Components and hooks consume this
- * store to render histories, derive stats, and subscribe to real-time updates.
+ * Singleton store that aggregates captured network traffic.
+ * Automatically starts/stops capturing based on subscriber count.
  */
 const networkEventStore = exports.networkEventStore = new NetworkEventStore();

package/lib/module/network/components/NetworkModal.js

@@ -45,8 +45,7 @@ function NetworkModalInner({
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    isCapturing,
     hasLockedEvents,
     lockedEventCount,
     isEventLocked,
@@ -54,6 +53,14 @@ function NetworkModalInner({
   } = useNetworkEvents({
     isPro
   });
+
+  // Local UI state for display toggle (doesn't affect global event capture)
+  // This allows events tool to continue receiving events while this UI is "paused"
+  const [isDisplayPaused, setIsDisplayPaused] = useState(false);
+  const isEnabled = isCapturing && !isDisplayPaused;
+  const toggleInterception = useCallback(() => {
+    setIsDisplayPaused(prev => !prev);
+  }, []);
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);

package/lib/module/network/hooks/useNetworkEvents.js

@@ -2,12 +2,13 @@
 
 /**
  * Hook for accessing network events and controls
- * Uses Reactotron-style listener pattern
+ *
+ * Uses self-managing Subscribable pattern - the network listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  */
 
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { networkEventStore } from "../utils/networkEventStore";
-import { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener } from "../utils/networkListener";
 import { searchGraphQLVariables } from "../utils/formatGraphQLVariables";
 
 /** Free tier limit for network requests */
@@ -15,13 +16,15 @@ export const FREE_TIER_REQUEST_LIMIT = 25;
 
 /**
  * Custom hook for accessing network events and controls
- * 
+ *
  * This hook provides a complete interface for network monitoring, including
- * event filtering, statistics calculation, and interception control. It uses
- * the Reactotron-style listener pattern for network event handling.
- * 
+ * event filtering, statistics calculation, and interception control.
+ *
+ * The network listener automatically starts when this hook mounts and stops
+ * when all components using it unmount (Subscribable pattern from TanStack Query).
+ *
  * @returns Object containing filtered events, statistics, controls, and utilities
- * 
+ *
  * @example
  * ```typescript
  * function NetworkMonitor() {
@@ -31,22 +34,19 @@ export const FREE_TIER_REQUEST_LIMIT = 25;
  *     filter,
  *     setFilter,
  *     clearEvents,
- *     toggleInterception,
- *     isEnabled
+ *     isCapturing
  *   } = useNetworkEvents();
- * 
+ *
  *   return (
  *     <div>
  *       <p>Total requests: {stats.totalRequests}</p>
  *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
- *       <button onClick={toggleInterception}>
- *         {isEnabled ? 'Stop' : 'Start'} Monitoring
- *       </button>
+ *       <p>Capturing: {isCapturing ? 'Yes' : 'No'}</p>
  *     </div>
  *   );
  * }
  * ```
- * 
+ *
  * @performance Uses memoization for expensive filtering and statistics calculations
  * @performance Optimizes string operations and array processing for large datasets
  * @performance Includes Set-based lookups for O(1) filter matching
@@ -59,36 +59,17 @@ export function useNetworkEvents(options = {}) {
   } = options;
   const [events, setEvents] = useState([]);
   const [filter, setFilter] = useState({});
-  const [isEnabled, setIsEnabled] = useState(false);
 
-  // Subscribe to event store changes
+  // Subscribe to event store - this automatically starts/stops the network listener
+  // based on subscriber count (Subscribable pattern from TanStack Query)
   useEffect(() => {
-    // Subscribe to store changes
-    const unsubscribeStore = networkEventStore.subscribe(setEvents);
-
-    // Add listener to network events
-    const unsubscribeListener = addNetworkListener(event => {
-      // Only log in development and for non-ignored URLs
-      if (__DEV__ && !event.request.url.includes("symbolicate") && !event.request.url.includes(":8081")) {
-        // Network event processed: [event.type] [method] [url] - available for debugging if needed
-      }
-      networkEventStore.processNetworkEvent(event);
-    });
-
-    // Check if already listening
-    setIsEnabled(networkListener().isActive);
-
-    // Start listening if not already
-    if (!networkListener().isActive) {
-      startNetworkListener();
-      setIsEnabled(true);
-    }
-
-    // Load initial events
-    setEvents(networkEventStore.getEvents());
+    // subscribeToEvents handles everything:
+    // - Starts network listener when first subscriber joins
+    // - Stops network listener when last subscriber leaves
+    // - Immediately provides current events
+    const unsubscribe = networkEventStore.subscribeToEvents(setEvents);
     return () => {
-      unsubscribeStore();
-      unsubscribeListener();
+      unsubscribe();
     };
   }, []);
 
@@ -97,16 +78,8 @@ export function useNetworkEvents(options = {}) {
     networkEventStore.clearEvents();
   }, []);
 
-  // Toggle interception
-  const toggleInterception = useCallback(() => {
-    if (isEnabled) {
-      stopNetworkListener();
-      setIsEnabled(false);
-    } else {
-      startNetworkListener();
-      setIsEnabled(true);
-    }
-  }, [isEnabled]);
+  // Check if the store is currently capturing (has subscribers)
+  const isCapturing = networkEventStore.isCapturing();
 
   // Memoize search text processing to avoid repeated toLowerCase calls
   // Performance: Expensive string operations repeated for every event on every filter
@@ -300,8 +273,8 @@ export function useNetworkEvents(options = {}) {
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    /** Whether the store has subscribers (listener is running) */
+    isCapturing,
     hosts,
     methods,
     /** Whether there are locked events due to free tier limit */
@@ -311,6 +284,8 @@ export function useNetworkEvents(options = {}) {
     /** Check if a specific event is locked (by ID) */
     isEventLocked,
     /** Free tier request limit */
-    requestLimit: FREE_TIER_REQUEST_LIMIT
+    requestLimit: FREE_TIER_REQUEST_LIMIT,
+    /** Get subscriber counts for debugging */
+    getSubscriberCounts: () => networkEventStore.getSubscriberCounts()
   };
 }

package/lib/module/network/utils/networkEventStore.js

@@ -1,17 +1,91 @@
 "use strict";
 
 /**
- * Network event store for managing captured network requests
- * Works with the Reactotron-style network listener
+ * Network Event Store
+ *
+ * Store for managing captured network requests. Uses BaseEventStore pattern -
+ * the network listener automatically starts when the first subscriber joins
+ * and stops when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { networkEventStore } from '@buoy-gg/network';
+ *
+ * // Subscribe to network events - automatically starts capturing!
+ * const unsubscribe = networkEventStore.subscribeToEvents((events) => {
+ *   console.log('Network events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
  */
 
+import { BaseEventStore } from "@buoy-gg/shared-ui";
 import { extractOperationName } from "./extractOperationName";
-class NetworkEventStore {
-  events = [];
+import { networkListener, addNetworkListener } from "./networkListener";
+
+/**
+ * Callback type for individual event notifications
+ */
+
+/**
+ * Callback type for full events array notifications
+ */
+
+class NetworkEventStore extends BaseEventStore {
   pendingRequests = new Map();
-  listeners = new Set();
-  maxEvents = 500; // Configurable max events to prevent memory issues
-  recentRequests = new Map(); // Track recent requests to detect duplicates
+  recentRequests = new Map();
+  rawListenerUnsubscribe = null;
+  constructor() {
+    super({
+      storeName: "network",
+      maxEvents: 500
+    });
+  }
+
+  /**
+   * Start capturing network events
+   */
+  startCapturing() {
+    const listener = networkListener();
+
+    // Start the network interceptor if not already active
+    if (!listener.isActive) {
+      listener.startListening();
+    }
+
+    // Add our listener to push raw events into the store
+    if (!this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe = addNetworkListener(event => {
+        this.processNetworkEvent(event);
+      });
+    }
+  }
+
+  /**
+   * Stop capturing network events
+   */
+  stopCapturing() {
+    // Remove our raw listener
+    if (this.rawListenerUnsubscribe) {
+      this.rawListenerUnsubscribe();
+      this.rawListenerUnsubscribe = null;
+    }
+
+    // If no other listeners exist, stop the network interceptor
+    const listener = networkListener();
+    if (listener.listenerCount === 0) {
+      listener.stopListening();
+    }
+  }
+
+  /**
+   * Check if the store is actively capturing network events
+   */
+  isCapturing() {
+    return this.rawListenerUnsubscribe !== null;
+  }
 
   /**
    * Process a network listener event
@@ -28,13 +102,13 @@ class NetworkEventStore {
 
       // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
       if (lastRequestTime && now - lastRequestTime < 50) {
-        return; // Skip duplicate
+        return;
       }
       this.recentRequests.set(requestKey, now);
 
       // Clean up old entries to prevent memory leak
       if (this.recentRequests.size > 100) {
-        const cutoff = now - 5000; // Remove entries older than 5 seconds
+        const cutoff = now - 5000;
         for (const [key, time] of this.recentRequests.entries()) {
           if (time < cutoff) {
             this.recentRequests.delete(key);
@@ -42,7 +116,6 @@ class NetworkEventStore {
         }
       }
 
-      // Create new network event for request
       // Build full URL with query params if present
       const queryString = request.params ? `?${new URLSearchParams(request.params).toString()}` : "";
       const fullUrl = `${request.url}${queryString}`;
@@ -50,12 +123,10 @@ class NetworkEventStore {
       // Extract GraphQL operation name and variables for searchability
       let operationName;
       let graphqlVariables;
-      if (request.client === 'graphql') {
+      if (request.client === "graphql") {
         const extracted = extractOperationName(request.data);
         operationName = extracted || undefined;
-
-        // Extract variables from GraphQL request
-        if (request.data && typeof request.data === 'object' && 'variables' in request.data && request.data.variables && typeof request.data.variables === 'object') {
+        if (request.data && typeof request.data === "object" && "variables" in request.data && request.data.variables && typeof request.data.variables === "object") {
           graphqlVariables = request.data.variables;
         }
       }
@@ -63,7 +134,6 @@ class NetworkEventStore {
         id: request.id,
         method: request.method,
         url: fullUrl,
-        // Store FULL URL with query params
         host: this.extractHost(request.url),
         path: this.extractPath(request.url),
         query: queryString,
@@ -74,18 +144,13 @@ class NetworkEventStore {
         responseHeaders: {},
         requestClient: request.client,
         operationName,
-        // GraphQL operation name for search/filter
-        graphqlVariables // GraphQL variables for display and search
+        graphqlVariables
       };
-
-      // Store as pending
       this.pendingRequests.set(request.id, networkEvent);
-
-      // Add to events list
       this.events = [networkEvent, ...this.events].slice(0, this.maxEvents);
-      this.notifyListeners();
+      this.notify(networkEvent);
+      this.notifyArrayListeners();
     } else if (event.type === "response" || event.type === "error") {
-      // Find and update the pending request
       const index = this.events.findIndex(e => e.id === request.id);
       if (index !== -1) {
         const updatedEvent = {
@@ -106,14 +171,11 @@ class NetworkEventStore {
         }
         this.events[index] = updatedEvent;
         this.pendingRequests.delete(request.id);
-        this.notifyListeners();
+        this.notify(updatedEvent);
+        this.notifyArrayListeners();
       }
     }
   }
-
-  /**
-   * Extract host from URL
-   */
   extractHost(url) {
     try {
       const urlObj = new URL(url);
@@ -123,10 +185,6 @@ class NetworkEventStore {
       return "";
     }
   }
-
-  /**
-   * Extract path from URL
-   */
   extractPath(url) {
     try {
       const urlObj = new URL(url);
@@ -136,10 +194,6 @@ class NetworkEventStore {
       return url;
     }
   }
-
-  /**
-   * Get size of data
-   */
   getDataSize(data) {
     if (!data) return 0;
     if (typeof data === "string") return data.length;
@@ -149,63 +203,38 @@ class NetworkEventStore {
       return 0;
     }
   }
-
-  /**
-   * Get all events
-   */
-  getEvents() {
-    return [...this.events];
-  }
-
-  /**
-   * Get event by ID
-   */
   getEventById(id) {
     return this.events.find(e => e.id === id);
   }
 
   /**
-   * Clear all events
+   * Override clearEvents to also clear pending requests
    */
   clearEvents() {
-    this.events = [];
+    super.clearEvents();
     this.pendingRequests.clear();
     this.recentRequests.clear();
-    this.notifyListeners();
   }
 
   /**
-   * Subscribe to event changes
+   * Subscribe to individual events with optional replay of existing events
    */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Notify all listeners of changes
-   */
-  notifyListeners() {
-    const events = this.getEvents();
-    this.listeners.forEach(listener => listener(events));
-  }
+  onEvent(callback, replayExisting = true) {
+    const unsubscribe = this.subscribe(callback);
 
-  /**
-   * Set maximum number of events to store
-   */
-  setMaxEvents(max) {
-    this.maxEvents = max;
-    if (this.events.length > max) {
-      this.events = this.events.slice(0, max);
-      this.notifyListeners();
+    // Replay existing events if requested
+    if (replayExisting && this.events.length > 0) {
+      const existingEvents = [...this.events].reverse();
+      for (const event of existingEvents) {
+        try {
+          callback(event);
+        } catch {
+          // Ignore callback errors
+        }
+      }
     }
+    return unsubscribe;
   }
-
-  /**
-   * Get statistics about network events
-   */
   getStats() {
     const total = this.events.length;
     const successful = this.events.filter(e => e.status && e.status >= 200 && e.status < 300).length;
@@ -225,10 +254,6 @@ class NetworkEventStore {
       averageDuration: Math.round(avgDuration)
     };
   }
-
-  /**
-   * Filter events by criteria
-   */
   filterEvents(filter) {
     let filtered = [...this.events];
     if (filter.method) {
@@ -259,7 +284,7 @@ class NetworkEventStore {
 }
 
 /**
- * Singleton store that aggregates captured network traffic. Components and hooks consume this
- * store to render histories, derive stats, and subscribe to real-time updates.
+ * Singleton store that aggregates captured network traffic.
+ * Automatically starts/stops capturing based on subscriber count.
  */
 export const networkEventStore = new NetworkEventStore();

package/lib/typescript/network/components/NetworkModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AA4CA,UAAU,iBAAiB;IACzB,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;AA2gCD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}
+{"version":3,"file":"NetworkModal.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkModal.tsx"],"names":[],"mappings":"AA4CA,UAAU,iBAAiB;IACzB,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;AAkhCD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}

package/lib/typescript/network/hooks/useNetworkEvents.d.ts

@@ -1,6 +1,8 @@
 /**
  * Hook for accessing network events and controls
- * Uses Reactotron-style listener pattern
+ *
+ * Uses self-managing Subscribable pattern - the network listener automatically
+ * starts when this hook mounts and stops when all subscribers unmount.
  */
 import type { NetworkEvent, NetworkStats, NetworkFilter } from "../types";
 /** Free tier limit for network requests */
@@ -9,8 +11,10 @@ export declare const FREE_TIER_REQUEST_LIMIT = 25;
  * Custom hook for accessing network events and controls
  *
  * This hook provides a complete interface for network monitoring, including
- * event filtering, statistics calculation, and interception control. It uses
- * the Reactotron-style listener pattern for network event handling.
+ * event filtering, statistics calculation, and interception control.
+ *
+ * The network listener automatically starts when this hook mounts and stops
+ * when all components using it unmount (Subscribable pattern from TanStack Query).
  *
  * @returns Object containing filtered events, statistics, controls, and utilities
  *
@@ -23,17 +27,14 @@ export declare const FREE_TIER_REQUEST_LIMIT = 25;
  *     filter,
  *     setFilter,
  *     clearEvents,
- *     toggleInterception,
- *     isEnabled
+ *     isCapturing
  *   } = useNetworkEvents();
  *
  *   return (
  *     <div>
  *       <p>Total requests: {stats.totalRequests}</p>
  *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
- *       <button onClick={toggleInterception}>
- *         {isEnabled ? 'Stop' : 'Start'} Monitoring
- *       </button>
+ *       <p>Capturing: {isCapturing ? 'Yes' : 'No'}</p>
  *     </div>
  *   );
  * }
@@ -56,8 +57,8 @@ export declare function useNetworkEvents(options?: {
     filter: NetworkFilter;
     setFilter: import("react").Dispatch<import("react").SetStateAction<NetworkFilter>>;
     clearEvents: () => void;
-    isEnabled: boolean;
-    toggleInterception: () => void;
+    /** Whether the store has subscribers (listener is running) */
+    isCapturing: boolean;
     hosts: string[];
     methods: string[];
     /** Whether there are locked events due to free tier limit */
@@ -68,5 +69,11 @@ export declare function useNetworkEvents(options?: {
     isEventLocked: (eventId: string) => boolean;
     /** Free tier request limit */
     requestLimit: number;
+    /** Get subscriber counts for debugging */
+    getSubscriberCounts: () => {
+        eventCallbacks: number;
+        arrayListeners: number;
+        total: number;
+    };
 };
 //# sourceMappingURL=useNetworkEvents.d.ts.map

package/lib/typescript/network/hooks/useNetworkEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNetworkEvents.d.ts","sourceRoot":"","sources":["../../../../src/network/hooks/useNetworkEvents.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAUH,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG1E,2CAA2C;AAC3C,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO;IAuR9D,yEAAyE;;IAEzE,8CAA8C;;;;;;;;;;IAU9C,6DAA6D;;IAE7D,qDAAqD;;IAErD,kDAAkD;6BAzFR,MAAM;IA2FhD,8BAA8B;;EAGjC"}
+{"version":3,"file":"useNetworkEvents.d.ts","sourceRoot":"","sources":["../../../../src/network/hooks/useNetworkEvents.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG1E,2CAA2C;AAC3C,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO;IAwP9D,yEAAyE;;IAEzE,8CAA8C;;;;;;IAM9C,8DAA8D;;;;IAI9D,6DAA6D;;IAE7D,qDAAqD;;IAErD,kDAAkD;6BAzFR,MAAM;IA2FhD,8BAA8B;;IAE9B,0CAA0C;;;;;;EAG7C"}

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

@@ -7,7 +7,7 @@ export { NetworkEventItemCompact } from "./components/NetworkEventItemCompact";
 export { useNetworkEvents } from "./hooks/useNetworkEvents";
 export { TickProvider, useTickEveryMinute } from "./hooks/useTickEveryMinute";
 export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, getNetworkListenerCount, } from "./utils/networkListener";
-export { networkEventStore } from "./utils/networkEventStore";
+export { networkEventStore, type NetworkEventCallback } from "./utils/networkEventStore";
 export { formatBytes, formatDuration, formatHttpStatus, } from "./utils/formatting";
 export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkEventStatus, NetworkInsight, } from "./types";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/network/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,yBAAyB,EACzB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/network/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,yBAAyB,EACzB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,GACf,MAAM,SAAS,CAAC"}

package/lib/typescript/network/utils/networkEventStore.d.ts

@@ -1,58 +1,67 @@
 /**
- * Network event store for managing captured network requests
- * Works with the Reactotron-style network listener
+ * Network Event Store
+ *
+ * Store for managing captured network requests. Uses BaseEventStore pattern -
+ * the network listener automatically starts when the first subscriber joins
+ * and stops when the last subscriber leaves.
+ *
+ * @example
+ * ```typescript
+ * import { networkEventStore } from '@buoy-gg/network';
+ *
+ * // Subscribe to network events - automatically starts capturing!
+ * const unsubscribe = networkEventStore.subscribeToEvents((events) => {
+ *   console.log('Network events:', events);
+ * });
+ *
+ * // Later, clean up - automatically stops if no other subscribers
+ * unsubscribe();
+ * ```
  */
+import { BaseEventStore } from "@buoy-gg/shared-ui";
 import type { NetworkEvent } from "../types";
 import type { NetworkingEvent } from "./networkListener";
-declare class NetworkEventStore {
-    private events;
+/**
+ * Callback type for individual event notifications
+ */
+export type NetworkEventCallback = (event: NetworkEvent) => void;
+/**
+ * Callback type for full events array notifications
+ */
+export type NetworkEventsArrayCallback = (events: NetworkEvent[]) => void;
+declare class NetworkEventStore extends BaseEventStore<NetworkEvent> {
     private pendingRequests;
-    private listeners;
-    private maxEvents;
     private recentRequests;
+    private rawListenerUnsubscribe;
+    constructor();
     /**
-     * Process a network listener event
+     * Start capturing network events
      */
-    processNetworkEvent(event: NetworkingEvent): void;
+    protected startCapturing(): void;
     /**
-     * Extract host from URL
+     * Stop capturing network events
      */
-    private extractHost;
+    protected stopCapturing(): void;
     /**
-     * Extract path from URL
+     * Check if the store is actively capturing network events
      */
-    private extractPath;
+    isCapturing(): boolean;
     /**
-     * Get size of data
+     * Process a network listener event
      */
+    processNetworkEvent(event: NetworkingEvent): void;
+    private extractHost;
+    private extractPath;
     private getDataSize;
-    /**
-     * Get all events
-     */
-    getEvents(): NetworkEvent[];
-    /**
-     * Get event by ID
-     */
     getEventById(id: string): NetworkEvent | undefined;
     /**
-     * Clear all events
+     * Override clearEvents to also clear pending requests
      */
     clearEvents(): void;
     /**
-     * Subscribe to event changes
-     */
-    subscribe(listener: (events: NetworkEvent[]) => void): () => void;
-    /**
-     * Notify all listeners of changes
-     */
-    private notifyListeners;
-    /**
-     * Set maximum number of events to store
-     */
-    setMaxEvents(max: number): void;
-    /**
-     * Get statistics about network events
+     * Subscribe to individual events with optional replay of existing events
      */
+    onEvent(callback: NetworkEventCallback, replayExisting?: boolean): () => void;
     getStats(): {
         totalRequests: number;
         successfulRequests: number;
@@ -62,9 +71,6 @@ declare class NetworkEventStore {
         totalDataReceived: number;
         averageDuration: number;
     };
-    /**
-     * Filter events by criteria
-     */
     filterEvents(filter: {
         method?: string;
         status?: "success" | "error" | "pending";
@@ -73,8 +79,8 @@ declare class NetworkEventStore {
     }): NetworkEvent[];
 }
 /**
- * Singleton store that aggregates captured network traffic. Components and hooks consume this
- * store to render histories, derive stats, and subscribe to real-time updates.
+ * Singleton store that aggregates captured network traffic.
+ * Automatically starts/stops capturing based on subscriber count.
  */
 export declare const networkEventStore: NetworkEventStore;
 export {};

package/lib/typescript/network/utils/networkEventStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"networkEventStore.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/networkEventStore.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,eAAe,CAAwC;IAC/D,OAAO,CAAC,SAAS,CAAoD;IACrE,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,cAAc,CAAkC;IAExD;;OAEG;IACH,mBAAmB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IA0GjD;;OAEG;IACH,OAAO,CAAC,WAAW;IAUnB;;OAEG;IACH,OAAO,CAAC,WAAW;IAUnB;;OAEG;IACH,OAAO,CAAC,WAAW;IAUnB;;OAEG;IACH,SAAS,IAAI,YAAY,EAAE;IAI3B;;OAEG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAIlD;;OAEG;IACH,WAAW,IAAI,IAAI;IAOnB;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,GAAG,MAAM,IAAI;IAOjE;;OAEG;IACH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAQ/B;;OAEG;IACH,QAAQ;;;;;;;;;IAuCR;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;QACzC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,YAAY,EAAE;CAyCnB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAA0B,CAAC"}
+{"version":3,"file":"networkEventStore.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/networkEventStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOzD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,0BAA0B,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;AAE1E,cAAM,iBAAkB,SAAQ,cAAc,CAAC,YAAY,CAAC;IAC1D,OAAO,CAAC,eAAe,CAAwC;IAC/D,OAAO,CAAC,cAAc,CAAkC;IACxD,OAAO,CAAC,sBAAsB,CAA6B;;IAS3D;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAgBhC;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAc/B;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,mBAAmB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAsGjD,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAUnB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAIlD;;OAEG;IACH,WAAW,IAAI,IAAI;IAMnB;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,oBAAoB,EAAE,cAAc,UAAO,GAAG,MAAM,IAAI;IAkB1E,QAAQ;;;;;;;;;IAuCR,YAAY,CAAC,MAAM,EAAE;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;QACzC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,YAAY,EAAE;CAyCnB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/network",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "network package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "2.1.2"
+    "@buoy-gg/shared-ui": "2.1.3"
   },
   "peerDependencies": {
     "react": "*",