@buoy-gg/network 1.7.7 → 2.1.1

package/lib/commonjs/index.js

@@ -3,32 +3,102 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  networkToolPreset: true,
-  createNetworkTool: true
-};
+Object.defineProperty(exports, "NetworkEventDetailView", {
+  enumerable: true,
+  get: function () {
+    return _NetworkEventDetailView.NetworkEventDetailView;
+  }
+});
+Object.defineProperty(exports, "NetworkEventItemCompact", {
+  enumerable: true,
+  get: function () {
+    return _NetworkEventItemCompact.NetworkEventItemCompact;
+  }
+});
+Object.defineProperty(exports, "NetworkModal", {
+  enumerable: true,
+  get: function () {
+    return _NetworkModal.NetworkModal;
+  }
+});
+Object.defineProperty(exports, "TickProvider", {
+  enumerable: true,
+  get: function () {
+    return _useTickEveryMinute.TickProvider;
+  }
+});
+Object.defineProperty(exports, "addNetworkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.addNetworkListener;
+  }
+});
 Object.defineProperty(exports, "createNetworkTool", {
   enumerable: true,
   get: function () {
     return _preset.createNetworkTool;
   }
 });
+Object.defineProperty(exports, "formatBytes", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatBytes;
+  }
+});
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatDuration;
+  }
+});
+Object.defineProperty(exports, "formatHttpStatus", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatHttpStatus;
+  }
+});
+Object.defineProperty(exports, "networkEventStore", {
+  enumerable: true,
+  get: function () {
+    return _networkEventStore.networkEventStore;
+  }
+});
+Object.defineProperty(exports, "networkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.networkListener;
+  }
+});
 Object.defineProperty(exports, "networkToolPreset", {
   enumerable: true,
   get: function () {
     return _preset.networkToolPreset;
   }
 });
+Object.defineProperty(exports, "removeAllNetworkListeners", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.removeAllNetworkListeners;
+  }
+});
+Object.defineProperty(exports, "useNetworkEvents", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkEvents.useNetworkEvents;
+  }
+});
+Object.defineProperty(exports, "useTickEveryMinute", {
+  enumerable: true,
+  get: function () {
+    return _useTickEveryMinute.useTickEveryMinute;
+  }
+});
 var _preset = require("./preset");
-var _network = require("./network");
-Object.keys(_network).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _network[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _network[key];
-    }
-  });
-});
+var _NetworkModal = require("./network/components/NetworkModal");
+var _NetworkEventDetailView = require("./network/components/NetworkEventDetailView");
+var _NetworkEventItemCompact = require("./network/components/NetworkEventItemCompact");
+var _useNetworkEvents = require("./network/hooks/useNetworkEvents");
+var _useTickEveryMinute = require("./network/hooks/useTickEveryMinute");
+var _formatting = require("./network/utils/formatting");
+var _networkEventStore = require("./network/utils/networkEventStore");
+var _networkListener = require("./network/utils/networkListener");

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

@@ -613,11 +613,10 @@ function NetworkCopySettingsView({
         style: styles.statusLabel,
         children: statusLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-        value: generateCopyText(),
-        disabled: !isPro
+        value: generateCopyText()
       })]
     });
-  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText, isPro]);
+  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText]);
 
   // Render preview content only
   const renderPreviewContent = (0, _react.useCallback)(() => {

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

@@ -180,6 +180,13 @@ function NetworkEventDetailView({
   } = (0, _sharedUi.useFeatureGate)();
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
 
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
+
   // Generate full request details for copying
   const getFullRequestDetails = () => {
     const requestDetails = {

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

@@ -147,18 +147,20 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
     hour12: true
   });
   const relativeTime = (0, _sharedUi.formatRelativeTime)(event.timestamp, tick);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ListItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.DevToolsCard, {
     onPress: () => onPress(event),
-    style: [styles.container, {
+    style: styles.cardWrapper,
+    contentStyle: [styles.container, {
       borderLeftColor: statusColor
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.leftSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MethodBadge, {
-        method: event.method,
-        size: "small"
+      style: styles.topRightContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
+        event: event,
+        isPending: isPending,
+        statusColor: statusColor
       }), event.requestClient && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.clientBadge, {
+        style: [styles.topRightBadge, {
           backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : "rgba(147, 51, 234, 0.15)"
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -167,6 +169,12 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient
         })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.leftSection,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MethodBadge, {
+        method: event.method,
+        size: "small"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SizeIndicators, {
         requestSize: event.requestSize,
         responseSize: event.responseSize
@@ -180,50 +188,51 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.rightSection,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.rightTopRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIndicator, {
-          event: event,
-          isPending: isPending,
-          statusColor: statusColor
-        }), event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.durationText,
-          children: (0, _formatting.formatDuration)(event.duration)
-        }) : null, contentType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TypeBadge, {
-          type: contentType,
-          size: "small"
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.rightBottomRow,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ListItem.Metadata, {
-          children: [timeString, " (", relativeTime, ")"]
-        })
+      children: [contentType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TypeBadge, {
+        type: contentType,
+        size: "small"
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+        size: 14,
+        color: _sharedUi.macOSColors.text.muted
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-      size: 14,
-      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.bottomRightContainer,
+      children: event.duration ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.bottomRightText,
+        children: [(0, _formatting.formatDuration)(event.duration), "  ", relativeTime]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.bottomRightText,
+        children: relativeTime
+      })
     })]
   });
 });
 const styles = _reactNative.StyleSheet.create({
+  cardWrapper: {
+    marginHorizontal: 8
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-    paddingLeft: 8,
-    marginBottom: 4,
-    marginHorizontal: 12,
-    minHeight: 44,
     borderLeftWidth: 3,
     borderLeftColor: "transparent"
   },
   leftSection: {
     marginRight: 8,
-    alignItems: "flex-start",
-    paddingTop: 2
+    alignItems: "flex-start"
+  },
+  topRightContainer: {
+    position: "absolute",
+    top: 1,
+    right: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  topRightBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4
   },
   middleSection: {
     flex: 1,
@@ -237,20 +246,19 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   rightSection: {
-    alignItems: "flex-end",
-    justifyContent: "center",
-    marginRight: 4
-  },
-  rightTopRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    marginBottom: 2
+    gap: 6
   },
-  rightBottomRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace"
   },
   statusBadge: {
     paddingHorizontal: 4,
@@ -308,12 +316,6 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.macOSColors.text.secondary,
     fontFamily: "monospace"
   },
-  clientBadge: {
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 3,
-    marginTop: 4
-  },
   clientText: {
     fontSize: 8,
     fontWeight: "700",

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

@@ -72,19 +72,22 @@ function NetworkModalInner({
   const flatListRef = (0, _react.useRef)(null);
   const hasLoadedFilters = (0, _react.useRef)(false);
   const hasLoadedCopySettings = (0, _react.useRef)(false);
-  const {
-    getItem: safeGetItem,
-    setItem: safeSetItem
-  } = (0, _sharedUi.useSafeAsyncStorage)();
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
 
+  // Auto-close upgrade modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
+
   // Load persisted filters on mount
   (0, _react.useEffect)(() => {
     if (!visible || hasLoadedFilters.current) return;
     const loadFilters = async () => {
       try {
         // Load ignored patterns (using domains key for now)
-        const storedPatterns = await safeGetItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains());
+        const storedPatterns = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains());
         if (storedPatterns) {
           const patterns = JSON.parse(storedPatterns);
           setIgnoredPatterns(new Set(patterns));
@@ -96,7 +99,7 @@ function NetworkModalInner({
       }
     };
     loadFilters();
-  }, [visible, safeGetItem]);
+  }, [visible]);
 
   // Save filters when they change
   (0, _react.useEffect)(() => {
@@ -106,20 +109,20 @@ function NetworkModalInner({
       try {
         // Save ignored patterns
         const patterns = Array.from(ignoredPatterns);
-        await safeSetItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(patterns));
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(patterns));
       } catch (_error) {
         // Silently fail - filters will remain in memory
       }
     };
     saveFilters();
-  }, [ignoredPatterns, safeSetItem]);
+  }, [ignoredPatterns]);
 
   // Load persisted copy settings on mount
   (0, _react.useEffect)(() => {
     if (!visible || hasLoadedCopySettings.current) return;
     const loadCopySettings = async () => {
       try {
-        const stored = await safeGetItem(_sharedUi.devToolsStorageKeys.network.copyOptions());
+        const stored = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.network.copyOptions());
         if (stored) {
           const settings = JSON.parse(stored);
           setCopySettings(settings);
@@ -131,7 +134,7 @@ function NetworkModalInner({
       }
     };
     loadCopySettings();
-  }, [visible, safeGetItem]);
+  }, [visible]);
 
   // Save copy settings when they change
   (0, _react.useEffect)(() => {
@@ -139,13 +142,13 @@ function NetworkModalInner({
 
     const saveCopySettings = async () => {
       try {
-        await safeSetItem(_sharedUi.devToolsStorageKeys.network.copyOptions(), JSON.stringify(copySettings));
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.network.copyOptions(), JSON.stringify(copySettings));
       } catch (_error) {
         // Silently fail - settings will remain in memory
       }
     };
     saveCopySettings();
-  }, [copySettings, safeSetItem]);
+  }, [copySettings]);
 
   // Simple handlers - no useCallback needed per rule2
   const handleEventPress = event => {

package/lib/commonjs/network/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "NetworkModal", {
     return _NetworkModal.NetworkModal;
   }
 });
+Object.defineProperty(exports, "TickProvider", {
+  enumerable: true,
+  get: function () {
+    return _useTickEveryMinute.TickProvider;
+  }
+});
 Object.defineProperty(exports, "addNetworkListener", {
   enumerable: true,
   get: function () {
@@ -93,10 +99,17 @@ Object.defineProperty(exports, "useNetworkEvents", {
     return _useNetworkEvents.useNetworkEvents;
   }
 });
+Object.defineProperty(exports, "useTickEveryMinute", {
+  enumerable: true,
+  get: function () {
+    return _useTickEveryMinute.useTickEveryMinute;
+  }
+});
 var _NetworkModal = require("./components/NetworkModal");
 var _NetworkEventDetailView = require("./components/NetworkEventDetailView");
 var _NetworkEventItemCompact = require("./components/NetworkEventItemCompact");
 var _useNetworkEvents = require("./hooks/useNetworkEvents");
+var _useTickEveryMinute = require("./hooks/useTickEveryMinute");
 var _networkListener = require("./utils/networkListener");
 var _networkEventStore = require("./utils/networkEventStore");
 var _formatting = require("./utils/formatting");

package/lib/module/index.js

@@ -1,7 +1,48 @@
 "use strict";
 
-// Export preset configuration (easiest way to add to FloatingDevTools!)
+/**
+ * @buoy-gg/network
+ *
+ * Network monitoring tool for React Native DevTools.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ * Internal utilities (listeners, stores) are not exported to prevent
+ * bypassing the tool's intended usage patterns.
+ */
+
+// =============================================================================
+// PRESET (Primary entry point for users)
+// =============================================================================
 export { networkToolPreset, createNetworkTool } from "./preset";
 
-// Export all network utilities and components
-export * from "./network";
+// =============================================================================
+// COMPONENTS (For custom UI implementations)
+// =============================================================================
+export { NetworkModal } from "./network/components/NetworkModal";
+export { NetworkEventDetailView } from "./network/components/NetworkEventDetailView";
+export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCompact";
+
+// =============================================================================
+// HOOKS (For consuming network data in custom components)
+// =============================================================================
+export { useNetworkEvents } from "./network/hooks/useNetworkEvents";
+export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
+
+// =============================================================================
+// UTILITIES (Formatting helpers)
+// =============================================================================
+export { formatBytes, formatDuration, formatHttpStatus } from "./network/utils/formatting";
+
+// =============================================================================
+// TYPES (For TypeScript users)
+// =============================================================================
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// These are re-exported for cross-package communication within the monorepo.
+// External users should NOT rely on these - they may change without notice.
+// =============================================================================
+/** @internal */
+export { networkEventStore } from "./network/utils/networkEventStore";
+/** @internal */
+export { networkListener, addNetworkListener, removeAllNetworkListeners } from "./network/utils/networkListener";

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

@@ -608,11 +608,10 @@ export function NetworkCopySettingsView({
         style: styles.statusLabel,
         children: statusLabel
       }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
-        value: generateCopyText(),
-        disabled: !isPro
+        value: generateCopyText()
       })]
     });
-  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText, isPro]);
+  }, [hasLiveData, lastEventTimestamp, tick, generateCopyText]);
 
   // Render preview content only
   const renderPreviewContent = useCallback(() => {

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
 import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
@@ -177,6 +177,13 @@ export function NetworkEventDetailView({
   } = useFeatureGate();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
 
+  // Auto-close upgrade modal when user becomes Pro
+  useEffect(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
+
   // Generate full request details for copying
   const getFullRequestDetails = () => {
     const requestDetails = {

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

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { ChevronRight, Upload, Download, Clock, AlertCircle, ListItem, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
@@ -144,18 +144,20 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
     hour12: true
   });
   const relativeTime = formatRelativeTime(event.timestamp, tick);
-  return /*#__PURE__*/_jsxs(ListItem, {
+  return /*#__PURE__*/_jsxs(DevToolsCard, {
     onPress: () => onPress(event),
-    style: [styles.container, {
+    style: styles.cardWrapper,
+    contentStyle: [styles.container, {
       borderLeftColor: statusColor
     }],
     children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.leftSection,
-      children: [/*#__PURE__*/_jsx(MethodBadge, {
-        method: event.method,
-        size: "small"
+      style: styles.topRightContainer,
+      children: [/*#__PURE__*/_jsx(StatusIndicator, {
+        event: event,
+        isPending: isPending,
+        statusColor: statusColor
       }), event.requestClient && /*#__PURE__*/_jsx(View, {
-        style: [styles.clientBadge, {
+        style: [styles.topRightBadge, {
           backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : "rgba(147, 51, 234, 0.15)"
         }],
         children: /*#__PURE__*/_jsx(Text, {
@@ -164,6 +166,12 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient
         })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.leftSection,
+      children: [/*#__PURE__*/_jsx(MethodBadge, {
+        method: event.method,
+        size: "small"
       }), /*#__PURE__*/_jsx(SizeIndicators, {
         requestSize: event.requestSize,
         responseSize: event.responseSize
@@ -177,50 +185,51 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(({
       })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.rightSection,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.rightTopRow,
-        children: [/*#__PURE__*/_jsx(StatusIndicator, {
-          event: event,
-          isPending: isPending,
-          statusColor: statusColor
-        }), event.duration ? /*#__PURE__*/_jsx(Text, {
-          style: styles.durationText,
-          children: formatDuration(event.duration)
-        }) : null, contentType ? /*#__PURE__*/_jsx(TypeBadge, {
-          type: contentType,
-          size: "small"
-        }) : null]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.rightBottomRow,
-        children: /*#__PURE__*/_jsxs(ListItem.Metadata, {
-          children: [timeString, " (", relativeTime, ")"]
-        })
+      children: [contentType ? /*#__PURE__*/_jsx(TypeBadge, {
+        type: contentType,
+        size: "small"
+      }) : null, /*#__PURE__*/_jsx(ChevronRight, {
+        size: 14,
+        color: macOSColors.text.muted
       })]
-    }), /*#__PURE__*/_jsx(ChevronRight, {
-      size: 14,
-      color: macOSColors.text.muted
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.bottomRightContainer,
+      children: event.duration ? /*#__PURE__*/_jsxs(Text, {
+        style: styles.bottomRightText,
+        children: [formatDuration(event.duration), "  ", relativeTime]
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: styles.bottomRightText,
+        children: relativeTime
+      })
     })]
   });
 });
 const styles = StyleSheet.create({
+  cardWrapper: {
+    marginHorizontal: 8
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-    paddingLeft: 8,
-    marginBottom: 4,
-    marginHorizontal: 12,
-    minHeight: 44,
     borderLeftWidth: 3,
     borderLeftColor: "transparent"
   },
   leftSection: {
     marginRight: 8,
-    alignItems: "flex-start",
-    paddingTop: 2
+    alignItems: "flex-start"
+  },
+  topRightContainer: {
+    position: "absolute",
+    top: 1,
+    right: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  topRightBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4
   },
   middleSection: {
     flex: 1,
@@ -234,20 +243,19 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   rightSection: {
-    alignItems: "flex-end",
-    justifyContent: "center",
-    marginRight: 4
-  },
-  rightTopRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    marginBottom: 2
+    gap: 6
   },
-  rightBottomRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace"
   },
   statusBadge: {
     paddingHorizontal: 4,
@@ -305,12 +313,6 @@ const styles = StyleSheet.create({
     color: macOSColors.text.secondary,
     fontFamily: "monospace"
   },
-  clientBadge: {
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    borderRadius: 3,
-    marginTop: 4
-  },
   clientText: {
     fontSize: 8,
     fontWeight: "700",

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

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, TextInput, FlatList } from "react-native";
-import { Globe, Trash2, Power, Search, Filter, CheckCircle, XCircle, Clock, X, Copy, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, useSafeAsyncStorage, CopyButton, TabSelector, useFeatureGate, UpgradeModal, ProBadge, Zap } from "@buoy-gg/shared-ui";
+import { Globe, Trash2, Power, Search, Filter, CheckCircle, XCircle, Clock, X, Copy, JsModal, ModalHeader, devToolsStorageKeys, macOSColors, persistentStorage, CopyButton, TabSelector, useFeatureGate, UpgradeModal, ProBadge, Zap } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkFilterViewV3 } from "./NetworkFilterViewV3";
 import { TickProvider } from "../hooks/useTickEveryMinute";
@@ -68,19 +68,22 @@ function NetworkModalInner({
   const flatListRef = useRef(null);
   const hasLoadedFilters = useRef(false);
   const hasLoadedCopySettings = useRef(false);
-  const {
-    getItem: safeGetItem,
-    setItem: safeSetItem
-  } = useSafeAsyncStorage();
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
 
+  // Auto-close upgrade modal when user becomes Pro
+  useEffect(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
+
   // Load persisted filters on mount
   useEffect(() => {
     if (!visible || hasLoadedFilters.current) return;
     const loadFilters = async () => {
       try {
         // Load ignored patterns (using domains key for now)
-        const storedPatterns = await safeGetItem(devToolsStorageKeys.network.ignoredDomains());
+        const storedPatterns = await persistentStorage.getItem(devToolsStorageKeys.network.ignoredDomains());
         if (storedPatterns) {
           const patterns = JSON.parse(storedPatterns);
           setIgnoredPatterns(new Set(patterns));
@@ -92,7 +95,7 @@ function NetworkModalInner({
       }
     };
     loadFilters();
-  }, [visible, safeGetItem]);
+  }, [visible]);
 
   // Save filters when they change
   useEffect(() => {
@@ -102,20 +105,20 @@ function NetworkModalInner({
       try {
         // Save ignored patterns
         const patterns = Array.from(ignoredPatterns);
-        await safeSetItem(devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(patterns));
+        await persistentStorage.setItem(devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(patterns));
       } catch (_error) {
         // Silently fail - filters will remain in memory
       }
     };
     saveFilters();
-  }, [ignoredPatterns, safeSetItem]);
+  }, [ignoredPatterns]);
 
   // Load persisted copy settings on mount
   useEffect(() => {
     if (!visible || hasLoadedCopySettings.current) return;
     const loadCopySettings = async () => {
       try {
-        const stored = await safeGetItem(devToolsStorageKeys.network.copyOptions());
+        const stored = await persistentStorage.getItem(devToolsStorageKeys.network.copyOptions());
         if (stored) {
           const settings = JSON.parse(stored);
           setCopySettings(settings);
@@ -127,7 +130,7 @@ function NetworkModalInner({
       }
     };
     loadCopySettings();
-  }, [visible, safeGetItem]);
+  }, [visible]);
 
   // Save copy settings when they change
   useEffect(() => {
@@ -135,13 +138,13 @@ function NetworkModalInner({
 
     const saveCopySettings = async () => {
       try {
-        await safeSetItem(devToolsStorageKeys.network.copyOptions(), JSON.stringify(copySettings));
+        await persistentStorage.setItem(devToolsStorageKeys.network.copyOptions(), JSON.stringify(copySettings));
       } catch (_error) {
         // Silently fail - settings will remain in memory
       }
     };
     saveCopySettings();
-  }, [copySettings, safeSetItem]);
+  }, [copySettings]);
 
   // Simple handlers - no useCallback needed per rule2
   const handleEventPress = event => {

package/lib/module/network/index.js

@@ -11,6 +11,7 @@ export { NetworkEventItemCompact } from "./components/NetworkEventItemCompact";
 
 // Hooks
 export { useNetworkEvents } from "./hooks/useNetworkEvents";
+export { TickProvider, useTickEveryMinute } from "./hooks/useTickEveryMinute";
 
 // Utils
 export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, getNetworkListenerCount } from "./utils/networkListener";

package/lib/typescript/index.d.ts

@@ -1,3 +1,22 @@
+/**
+ * @buoy-gg/network
+ *
+ * Network monitoring tool for React Native DevTools.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ * Internal utilities (listeners, stores) are not exported to prevent
+ * bypassing the tool's intended usage patterns.
+ */
 export { networkToolPreset, createNetworkTool } from "./preset";
-export * from "./network";
+export { NetworkModal } from "./network/components/NetworkModal";
+export { NetworkEventDetailView } from "./network/components/NetworkEventDetailView";
+export { NetworkEventItemCompact } from "./network/components/NetworkEventItemCompact";
+export { useNetworkEvents } from "./network/hooks/useNetworkEvents";
+export { TickProvider, useTickEveryMinute } from "./network/hooks/useTickEveryMinute";
+export { formatBytes, formatDuration, formatHttpStatus, } from "./network/utils/formatting";
+export type { NetworkEvent, NetworkStats, NetworkFilter, NetworkEventStatus, NetworkInsight, } from "./network/types";
+/** @internal */
+export { networkEventStore } from "./network/utils/networkEventStore";
+/** @internal */
+export { networkListener, addNetworkListener, removeAllNetworkListeners, } from "./network/utils/networkListener";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGhE,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKhE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAKvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKtF,OAAO,EACL,WAAW,EACX,cAAc,EACd,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAKpC,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,cAAc,GACf,MAAM,iBAAiB,CAAC;AAOzB,gBAAgB;AAChB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,gBAAgB;AAChB,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC"}

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

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

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

@@ -1 +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"}
+{"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,oEAiInC,CAAC"}

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":"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"}
+{"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;AAuhCD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}

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

@@ -5,6 +5,7 @@ export { NetworkModal } from "./components/NetworkModal";
 export { NetworkEventDetailView } from "./components/NetworkEventDetailView";
 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 { formatBytes, formatDuration, formatHttpStatus, } from "./utils/formatting";

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;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"}
+{"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"}

package/package.json

@@ -1,19 +1,32 @@
 {
   "name": "@buoy-gg/network",
-  "version": "1.7.7",
+  "version": "2.1.1",
   "description": "network package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "lib/module/index.js",
   "source": "src/index.tsx",
+  "exports": {
+    ".": {
+      "react-native": "./lib/module/index.js",
+      "import": {
+        "default": "./lib/module/index.js",
+        "types": "./lib/typescript/index.d.ts"
+      },
+      "require": {
+        "default": "./lib/commonjs/index.js",
+        "types": "./lib/typescript/index.d.ts"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/react-query": "1.7.7",
-    "@buoy-gg/shared-ui": "1.7.7"
+    "@buoy-gg/shared-ui": "2.1.1"
   },
   "peerDependencies": {
     "react": "*",