@buoy-gg/network 1.7.2

package/lib/module/preset.js

@@ -0,0 +1,79 @@
+"use strict";
+
+/**
+ * Pre-configured network monitoring tool for FloatingDevTools
+ *
+ * This preset provides a zero-config way to add network request monitoring to your dev tools.
+ * Just import and add it to your apps array!
+ *
+ * @example
+ * ```tsx
+ * import { networkToolPreset } from '@buoy-gg/network';
+ *
+ * const installedApps = [
+ *   networkToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+import { NetworkIcon } from "@buoy-gg/shared-ui";
+import { NetworkModal } from "./network/components/NetworkModal";
+
+/**
+ * Pre-configured network monitoring tool for FloatingDevTools.
+ * Includes:
+ * - Live network request monitoring
+ * - Request/response inspection
+ * - Filter by status, method, URL
+ * - Timing information
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const networkToolPreset = {
+  id: "network",
+  name: "NET",
+  description: "Network request logger",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/_jsx(NetworkIcon, {
+    size: size
+  }),
+  component: NetworkModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom network monitoring tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createNetworkTool } from '@buoy-gg/network';
+ *
+ * const myNetworkTool = createNetworkTool({
+ *   name: "REQUESTS",
+ *   iconColor: "#9945FF", // Purple color
+ *   enableSharedModalDimensions: true,
+ * });
+ * ```
+ */
+export function createNetworkTool(options) {
+  return {
+    id: options?.id || "network",
+    name: options?.name || "NET",
+    description: options?.description || "Network request logger",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/_jsx(NetworkIcon, {
+      size: size
+    }),
+    component: NetworkModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}

package/lib/typescript/index.d.ts

@@ -0,0 +1,3 @@
+export { networkToolPreset, createNetworkTool } from "./preset";
+export * from "./network";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGhE,cAAc,WAAW,CAAC"}

package/lib/typescript/network/components/NetworkCopySettingsView.d.ts

@@ -0,0 +1,26 @@
+import type { NetworkEvent } from "../types";
+export interface CopySettings {
+    includeMethod: boolean;
+    includeStatus: boolean;
+    includeDuration: boolean;
+    includeTimestamp: boolean;
+    includeClient: boolean;
+    includeSizes: boolean;
+    includeErrors: boolean;
+    includeRequestHeaders: boolean;
+    includeResponseHeaders: boolean;
+    includeRequestBody: boolean;
+    includeResponseBody: boolean;
+    bodySizeThreshold: 10 | 50 | 100 | -1;
+    format: "markdown" | "json" | "plaintext";
+    filterMode: "all" | "failed" | "success";
+}
+export declare const DEFAULT_COPY_SETTINGS: CopySettings;
+interface NetworkCopySettingsViewProps {
+    settings: CopySettings;
+    onSettingsChange: (settings: CopySettings) => void;
+    events?: NetworkEvent[];
+}
+export declare function NetworkCopySettingsView({ settings, onSettingsChange, events, }: NetworkCopySettingsViewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkCopySettingsView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkCopySettingsView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkCopySettingsView.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,YAAY;IAE3B,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAGvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,OAAO,CAAC;IAGhC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;IAGtC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IAG1C,UAAU,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,qBAAqB,EAAE,YAenC,CAAC;AAsEF,UAAU,4BAA4B;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;CACzB;AAwBD,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,gBAAgB,EAChB,MAAW,GACZ,EAAE,4BAA4B,+BAssB9B"}

package/lib/typescript/network/components/NetworkEventDetailView.d.ts

@@ -0,0 +1,13 @@
+import type { NetworkEvent } from "../types";
+interface NetworkEventDetailViewProps {
+    event: NetworkEvent;
+    ignoredPatterns?: Set<string>;
+    onTogglePattern?: (pattern: string) => void;
+}
+/**
+ * Detailed inspector rendering request/response metadata for a single network event. Designed to
+ * mimic Sentry’s layout with collapsible sections, diff views, and quick copy affordances.
+ */
+export declare function NetworkEventDetailView({ event, ignoredPatterns, onTogglePattern, }: NetworkEventDetailViewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkEventDetailView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkEventDetailView.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventDetailView.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAU7C,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmKD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,eAA2B,EAC3B,eAA0B,GAC3B,EAAE,2BAA2B,+BA2Y7B"}

package/lib/typescript/network/components/NetworkEventItemCompact.d.ts

@@ -0,0 +1,12 @@
+import type { NetworkEvent } from "../types";
+interface NetworkEventItemCompactProps {
+    event: NetworkEvent;
+    onPress: (event: NetworkEvent) => void;
+}
+/**
+ * Compact list-row representation of a network event. Optimized for large lists with memoization
+ * and periodic refresh via `useTickEveryMinute` to keep relative timestamps accurate.
+ */
+export declare const NetworkEventItemCompact: import("react").NamedExoticComponent<NetworkEventItemCompactProps>;
+export {};
+//# sourceMappingURL=NetworkEventItemCompact.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkEventItemCompact.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkEventItemCompact.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAM7C,UAAU,4BAA4B;IACpC,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACxC;AA8FD;;;GAGG;AACH,eAAO,MAAM,uBAAuB,oEAoInC,CAAC"}

package/lib/typescript/network/components/NetworkFilterViewV3.d.ts

@@ -0,0 +1,22 @@
+import type { NetworkEvent } from "../types";
+interface NetworkFilter {
+    status?: "all" | "success" | "error" | "pending";
+    method?: string[];
+    contentType?: string[];
+    searchText?: string;
+}
+interface NetworkFilterViewV3Props {
+    events: NetworkEvent[];
+    filter: NetworkFilter;
+    onFilterChange: (filter: NetworkFilter) => void;
+    ignoredPatterns?: Set<string>;
+    onTogglePattern?: (pattern: string) => void;
+    onAddPattern?: (pattern: string) => void;
+}
+/**
+ * Control panel for filtering captured network events by status, method, host, and content type.
+ * Provides quick toggles, stats, and ignored-pattern management reminiscent of desktop tooling.
+ */
+export declare function NetworkFilterViewV3({ events, filter, onFilterChange, ignoredPatterns, onTogglePattern, onAddPattern, }: NetworkFilterViewV3Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkFilterViewV3.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkFilterViewV3.d.ts","sourceRoot":"","sources":["../../../../src/network/components/NetworkFilterViewV3.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AA8DD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAA2B,EAC3B,eAA0B,EAC1B,YAAuB,GACxB,EAAE,wBAAwB,+BAsQ1B"}

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

@@ -0,0 +1,14 @@
+interface NetworkModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onBack?: () => void;
+    onMinimize?: (modalState: any) => void;
+    enableSharedModalDimensions?: boolean;
+}
+/**
+ * High-level modal surface that wraps the network monitoring experience with shared timing
+ * context. Automatically injects the `TickProvider` so timestamps refresh while the modal is open.
+ */
+export declare function NetworkModal(props: NetworkModalProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NetworkModal.d.ts.map

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

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

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

@@ -0,0 +1,72 @@
+/**
+ * Hook for accessing network events and controls
+ * Uses Reactotron-style listener pattern
+ */
+import type { NetworkEvent, NetworkStats, NetworkFilter } from "../types";
+/** Free tier limit for network requests */
+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.
+ *
+ * @returns Object containing filtered events, statistics, controls, and utilities
+ *
+ * @example
+ * ```typescript
+ * function NetworkMonitor() {
+ *   const {
+ *     events,
+ *     stats,
+ *     filter,
+ *     setFilter,
+ *     clearEvents,
+ *     toggleInterception,
+ *     isEnabled
+ *   } = 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>
+ *     </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
+ *
+ * @param options.isPro - Whether user has Pro access (unlimited events). Defaults to false (limited to FREE_TIER_REQUEST_LIMIT)
+ */
+export declare function useNetworkEvents(options?: {
+    isPro?: boolean;
+}): {
+    /** Filtered events (all shown, but some may be locked for free users) */
+    events: NetworkEvent[];
+    /** All events before filtering (for stats) */
+    allEvents: NetworkEvent[];
+    stats: NetworkStats;
+    filter: NetworkFilter;
+    setFilter: import("react").Dispatch<import("react").SetStateAction<NetworkFilter>>;
+    clearEvents: () => void;
+    isEnabled: boolean;
+    toggleInterception: () => void;
+    hosts: string[];
+    methods: string[];
+    /** Whether there are locked events due to free tier limit */
+    hasLockedEvents: boolean;
+    /** Number of events locked due to free tier limit */
+    lockedEventCount: number;
+    /** Check if a specific event is locked (by ID) */
+    isEventLocked: (eventId: string) => boolean;
+    /** Free tier request limit */
+    requestLimit: number;
+};
+//# sourceMappingURL=useNetworkEvents.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface TickProviderProps {
+    children: ReactNode;
+    intervalMs?: number;
+}
+export declare function TickProvider({ children, intervalMs, }: TickProviderProps): import("react").JSX.Element;
+export declare function useTickEveryMinute(): number;
+export {};
+//# sourceMappingURL=useTickEveryMinute.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTickEveryMinute.d.ts","sourceRoot":"","sources":["../../../../src/network/hooks/useTickEveryMinute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,UAAmB,GACpB,EAAE,iBAAiB,+BAcnB;AAED,wBAAgB,kBAAkB,WAKjC"}

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

@@ -0,0 +1,12 @@
+/**
+ * Network monitoring section for React Native dev tools
+ */
+export { NetworkModal } from "./components/NetworkModal";
+export { NetworkEventDetailView } from "./components/NetworkEventDetailView";
+export { NetworkEventItemCompact } from "./components/NetworkEventItemCompact";
+export { useNetworkEvents } from "./hooks/useNetworkEvents";
+export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, getNetworkListenerCount, } from "./utils/networkListener";
+export { networkEventStore } 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

@@ -0,0 +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;AAG5D,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"}

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

@@ -0,0 +1,88 @@
+/**
+ * Network monitoring types for React Native dev tools
+ */
+/**
+ * Canonical shape for network activity captured by the dev tools interceptor.
+ */
+export interface NetworkEvent {
+    id: string;
+    method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS" | string;
+    url: string;
+    status?: number;
+    statusText?: string;
+    requestHeaders: Record<string, string>;
+    responseHeaders: Record<string, string>;
+    requestData?: unknown;
+    responseData?: unknown;
+    responseSize?: number;
+    requestSize?: number;
+    timestamp: number;
+    duration?: number;
+    error?: string;
+    host?: string;
+    path?: string;
+    query?: string;
+    responseType?: string;
+    cached?: boolean;
+    requestClient?: "fetch" | "axios" | "graphql" | "grpc-web";
+    /**
+     * GraphQL operation name extracted from request data.
+     *
+     * For GraphQL requests, this contains the operation name (e.g., "GetUser", "CreatePost")
+     * extracted from either the operationName field or parsed from the query string.
+     * This enables searching and filtering GraphQL operations by name rather than just URL.
+     *
+     * @example
+     * // For a GraphQL query like: query GetUser { user { id name } }
+     * // operationName will be: "GetUser"
+     */
+    operationName?: string;
+    /**
+     * GraphQL variables object for the operation.
+     *
+     * Contains the input parameters passed to the GraphQL query/mutation.
+     * Used to differentiate between multiple requests with the same operation name.
+     * Displayed with arrow notation matching React Query pattern: "GetPokemon › Sandshrew"
+     *
+     * @example
+     * // For query GetPokemon($id: String!) with variables { id: "Sandshrew" }
+     * // graphqlVariables will be: { id: "Sandshrew" }
+     * // Display: "GetPokemon › Sandshrew"
+     */
+    graphqlVariables?: Record<string, unknown>;
+}
+/**
+ * Aggregated counts derived from the currently loaded set of network events.
+ */
+export interface NetworkStats {
+    totalRequests: number;
+    successfulRequests: number;
+    failedRequests: number;
+    pendingRequests: number;
+    totalDataSent: number;
+    totalDataReceived: number;
+    averageDuration: number;
+}
+/**
+ * Criteria used when filtering network events in the UI.
+ */
+export interface NetworkFilter {
+    method?: string[];
+    status?: "success" | "error" | "pending" | "all";
+    contentType?: string[];
+    searchText?: string;
+    host?: string;
+}
+/** Human readable status classifications derived from request/response metadata. */
+export type NetworkEventStatus = "pending" | "success" | "error" | "timeout";
+/**
+ * Insight surfaces highlight notable traffic patterns or issues for the current session.
+ */
+export interface NetworkInsight {
+    type: "performance" | "error" | "security" | "optimization";
+    severity: "low" | "medium" | "high";
+    message: string;
+    details?: string;
+    eventId: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/network/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EACF,KAAK,GACL,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC5D,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB"}

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

@@ -0,0 +1,41 @@
+/**
+ * Extract GraphQL operation name from request data
+ *
+ * This utility extracts the operation name from GraphQL requests to enable
+ * searching and filtering by operation name rather than just URL paths.
+ *
+ * For GraphQL, all requests typically go to the same endpoint (e.g., /graphql),
+ * making URL-based search ineffective. This function extracts the actual
+ * operation name (e.g., "GetUser", "CreatePost") from the request payload.
+ *
+ * Extraction Methods (tried in order):
+ * 1. Direct operationName field in request data
+ * 2. Parse from query string using regex pattern
+ *
+ * @param requestData - The request data object (typically GraphQL query payload)
+ * @returns Operation name string or null if not found
+ *
+ * @example
+ * // Method 1: Explicit operationName field
+ * const data1 = {
+ *   operationName: "GetUser",
+ *   query: "query GetUser { user { id name } }"
+ * };
+ * extractOperationName(data1); // Returns "GetUser"
+ *
+ * @example
+ * // Method 2: Parse from query string
+ * const data2 = {
+ *   query: "mutation CreatePost { createPost(title: \"Hello\") { id } }"
+ * };
+ * extractOperationName(data2); // Returns "CreatePost"
+ *
+ * @example
+ * // No operation name (anonymous query)
+ * const data3 = {
+ *   query: "{ user { id name } }"
+ * };
+ * extractOperationName(data3); // Returns null
+ */
+export declare function extractOperationName(requestData: unknown): string | null;
+//# sourceMappingURL=extractOperationName.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"extractOperationName.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/extractOperationName.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAmCxE"}

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

@@ -0,0 +1,79 @@
+/**
+ * Format GraphQL variables for display using arrow notation
+ *
+ * Mimics React Query key display format to provide visual consistency:
+ * - React Query: ["pokemon", "Sandshrew"] → "pokemon › Sandshrew"
+ * - GraphQL: GetPokemon(id: "Sandshrew") → "GetPokemon › Sandshrew"
+ *
+ * Extracts only the values from variables (not keys) and formats them
+ * for clean, compact display in the network request list.
+ */
+/**
+ * Extract variable values from GraphQL variables object
+ *
+ * Returns an array of formatted values for display with arrow notation.
+ *
+ * @param variables - GraphQL variables object
+ * @param maxValues - Maximum number of values to show (default: 3)
+ * @returns Array of formatted variable values
+ *
+ * @example
+ * formatGraphQLVariables({ id: "pikachu" })
+ * // Returns: ["pikachu"]
+ *
+ * @example
+ * formatGraphQLVariables({ userId: 123, includeProfile: true })
+ * // Returns: ["123", "true"]
+ *
+ * @example
+ * formatGraphQLVariables({ filter: { status: "active" }, limit: 10 })
+ * // Returns: ["active", "10"]
+ */
+export declare function formatGraphQLVariables(variables: Record<string, unknown> | undefined, maxValues?: number): string[] | null;
+/**
+ * Combine operation name with variables using arrow notation
+ *
+ * Matches React Query display pattern: "pokemon › Sandshrew"
+ * This provides visual consistency across all dev tools.
+ *
+ * @param operationName - GraphQL operation name (e.g., "GetPokemon")
+ * @param variables - GraphQL variables object
+ * @returns Formatted string with arrow notation
+ *
+ * @example
+ * formatGraphQLDisplay("GetPokemon", { id: "Sandshrew" })
+ * // Returns: "GetPokemon › Sandshrew"
+ *
+ * @example
+ * formatGraphQLDisplay("GetUser", { userId: 123, includeProfile: true })
+ * // Returns: "GetUser › 123 › true"
+ *
+ * @example
+ * formatGraphQLDisplay("GetPosts", { status: "published", limit: 10, offset: 0 })
+ * // Returns: "GetPosts › published › 10 › 0" (first 3 values by default)
+ *
+ * @example
+ * formatGraphQLDisplay("GetCurrentUser", {})
+ * // Returns: "GetCurrentUser" (no variables)
+ */
+export declare function formatGraphQLDisplay(operationName: string, variables?: Record<string, unknown>): string;
+/**
+ * Search GraphQL variables for a given text
+ *
+ * Recursively searches through all variable values to find matches.
+ * Used for filtering GraphQL requests by variable content.
+ *
+ * @param variables - GraphQL variables object
+ * @param searchText - Text to search for (already lowercased)
+ * @returns true if search text found in any variable value
+ *
+ * @example
+ * searchGraphQLVariables({ id: "pikachu" }, "pika")
+ * // Returns: true
+ *
+ * @example
+ * searchGraphQLVariables({ userId: 123, name: "John" }, "123")
+ * // Returns: true
+ */
+export declare function searchGraphQLVariables(variables: Record<string, unknown> | undefined, searchText: string): boolean;
+//# sourceMappingURL=formatGraphQLVariables.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formatGraphQLVariables.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/formatGraphQLVariables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA8DH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC9C,SAAS,GAAE,MAAU,GACpB,MAAM,EAAE,GAAG,IAAI,CAqBjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,MAAM,EACrB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClC,MAAM,CAUR;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC9C,UAAU,EAAE,MAAM,GACjB,OAAO,CAaT"}

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

@@ -0,0 +1,6 @@
+/**
+ * Formatting utilities for network events
+ * Re-exports shared utilities to maintain backward compatibility
+ */
+export { formatBytes, formatDuration, formatHttpStatus, getMethodColor, } from "@buoy-gg/shared-ui";
+//# sourceMappingURL=formatting.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../src/network/utils/formatting.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,cAAc,GACf,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,81 @@
+/**
+ * Network event store for managing captured network requests
+ * Works with the Reactotron-style network listener
+ */
+import type { NetworkEvent } from "../types";
+import type { NetworkingEvent } from "./networkListener";
+declare class NetworkEventStore {
+    private events;
+    private pendingRequests;
+    private listeners;
+    private maxEvents;
+    private recentRequests;
+    /**
+     * Process a network listener event
+     */
+    processNetworkEvent(event: NetworkingEvent): void;
+    /**
+     * Extract host from URL
+     */
+    private extractHost;
+    /**
+     * Extract path from URL
+     */
+    private extractPath;
+    /**
+     * Get size of data
+     */
+    private getDataSize;
+    /**
+     * Get all events
+     */
+    getEvents(): NetworkEvent[];
+    /**
+     * Get event by ID
+     */
+    getEventById(id: string): NetworkEvent | undefined;
+    /**
+     * Clear all events
+     */
+    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
+     */
+    getStats(): {
+        totalRequests: number;
+        successfulRequests: number;
+        failedRequests: number;
+        pendingRequests: number;
+        totalDataSent: number;
+        totalDataReceived: number;
+        averageDuration: number;
+    };
+    /**
+     * Filter events by criteria
+     */
+    filterEvents(filter: {
+        method?: string;
+        status?: "success" | "error" | "pending";
+        searchText?: string;
+        host?: string;
+    }): 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.
+ */
+export declare const networkEventStore: NetworkEventStore;
+export {};
+//# sourceMappingURL=networkEventStore.d.ts.map

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

@@ -0,0 +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"}