@buoy-gg/network 2.1.2 → 2.1.4-beta.0

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 { useState, useEffect, useCallback, useMemo, useRef } 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,54 +59,39 @@ export function useNetworkEvents(options = {}) {
   } = options;
   const [events, setEvents] = useState([]);
   const [filter, setFilter] = useState({});
-  const [isEnabled, setIsEnabled] = useState(false);
+  const [isCapturing, setIsCapturing] = useState(true);
+  const unsubscribeRef = useRef(null);
 
-  // Subscribe to event store changes
+  // Subscribe/unsubscribe to event store based on isCapturing state.
+  // Each subscriber is independent — pausing this hook's subscription
+  // does not affect other subscribers (e.g. the events tool).
   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);
+    if (isCapturing) {
+      unsubscribeRef.current = networkEventStore.subscribeToEvents(setEvents);
     }
-
-    // Load initial events
-    setEvents(networkEventStore.getEvents());
     return () => {
-      unsubscribeStore();
-      unsubscribeListener();
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
     };
-  }, []);
+  }, [isCapturing]);
 
-  // Clear all events
+  // Clear all events (also update local state in case we're paused/unsubscribed)
   const clearEvents = useCallback(() => {
     networkEventStore.clearEvents();
+    setEvents([]);
   }, []);
 
-  // Toggle interception
-  const toggleInterception = useCallback(() => {
-    if (isEnabled) {
-      stopNetworkListener();
-      setIsEnabled(false);
-    } else {
-      startNetworkListener();
-      setIsEnabled(true);
-    }
-  }, [isEnabled]);
+  // Pause: unsubscribe this hook from the store (other subscribers unaffected)
+  const pauseCapturing = useCallback(() => {
+    setIsCapturing(false);
+  }, []);
+
+  // Resume: resubscribe this hook to the store
+  const resumeCapturing = useCallback(() => {
+    setIsCapturing(true);
+  }, []);
 
   // Memoize search text processing to avoid repeated toLowerCase calls
   // Performance: Expensive string operations repeated for every event on every filter
@@ -300,8 +285,12 @@ export function useNetworkEvents(options = {}) {
     filter,
     setFilter,
     clearEvents,
-    isEnabled,
-    toggleInterception,
+    /** Whether this hook is subscribed and receiving network events */
+    isCapturing,
+    /** Unsubscribe this hook from the network store (other subscribers unaffected) */
+    pauseCapturing,
+    /** Resubscribe this hook to the network store */
+    resumeCapturing,
     hosts,
     methods,
     /** Whether there are locked events due to free tier limit */
@@ -311,6 +300,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 = {
@@ -104,16 +169,13 @@ class NetworkEventStore {
           updatedEvent.error = event.error.message;
           updatedEvent.status = updatedEvent.status || 0;
         }
-        this.events[index] = updatedEvent;
+        this.events = this.events.map((e, i) => i === index ? updatedEvent : e);
         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;AA0iCD;;;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,12 @@ export declare function useNetworkEvents(options?: {
     filter: NetworkFilter;
     setFilter: import("react").Dispatch<import("react").SetStateAction<NetworkFilter>>;
     clearEvents: () => void;
-    isEnabled: boolean;
-    toggleInterception: () => void;
+    /** Whether this hook is subscribed and receiving network events */
+    isCapturing: boolean;
+    /** Unsubscribe this hook from the network store (other subscribers unaffected) */
+    pauseCapturing: () => void;
+    /** Resubscribe this hook to the network store */
+    resumeCapturing: () => void;
     hosts: string[];
     methods: string[];
     /** Whether there are locked events due to free tier limit */
@@ -68,5 +73,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;IAqQ9D,yEAAyE;;IAEzE,8CAA8C;;;;;;IAM9C,mEAAmE;;IAEnE,kFAAkF;;IAElF,iDAAiD;;;;IAIjD,6DAA6D;;IAE7D,qDAAqD;;IAErD,kDAAkD;6BA7FR,MAAM;IA+FhD,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"}