@buoy-gg/network 7.0.33 → 7.0.35

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

@@ -546,62 +546,16 @@ function NetworkCopySettingsView({
   const generatePreviewContent = (0, _react.useCallback)(() => {
     const dataSource = hasLiveData ? events : [mockRequestData];
     const requestCount = dataSource.length;
-
-    // Collapsed state - show summary with expand button
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === 'danger' ? _sharedUi.macOSColors.semantic.error : sizeWarningLevel === 'warning' ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.text.secondary;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
-              size: 16,
-              color: _sharedUi.macOSColors.semantic.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                style: styles.expandButtonSubtitle,
-                children: [requestCount, " request", requestCount !== 1 ? 's' : '', " \u2022 ~", formatBytes(estimatedSize)]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
-              size: 16,
-              color: _sharedUi.macOSColors.text.muted
-            })]
-          })
-        }), sizeWarningLevel !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.sizeWarning, sizeWarningLevel === 'danger' && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.sizeWarningText, {
-              color: warningColor
-            }],
-            children: sizeWarningLevel === 'danger' ? 'Very large payload - may cause performance issues' : 'Large payload - preview may be slow'
-          })]
-        })]
-      });
-    }
-
-    // Expanded state - show collapse button + actual content
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
-          size: 14,
-          color: _sharedUi.macOSColors.text.secondary
-        })]
-      }), generateExpandedPreviewContent()]
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${requestCount} request${requestCount !== 1 ? "s" : ""} • ~${formatBytes(estimatedSize)}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload - preview may be slow",
+        danger: "Very large payload - may cause performance issues"
+      },
+      renderBody: generateExpandedPreviewContent
     });
   }, [settings, hasLiveData, events, mockRequestData, isPreviewExpanded, estimatedSize, sizeWarningLevel, generateExpandedPreviewContent]);
 
@@ -772,13 +726,13 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 300
   },
   markdownText: {
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontSize: 11,
     color: _sharedUi.macOSColors.text.primary,
     lineHeight: 18
   },
   plaintextText: {
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontSize: 11,
     color: _sharedUi.macOSColors.text.primary,
     lineHeight: 18
@@ -790,71 +744,6 @@ const styles = _reactNative.StyleSheet.create({
     marginRight: 8
   },
   // Collapsible preview styles
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: _sharedUi.macOSColors.text.primary
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: _sharedUi.macOSColors.text.secondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: _sharedUi.macOSColors.text.secondary
-  },
-  sizeWarning: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.semantic.warning + '30'
-  },
-  sizeWarningDanger: {
-    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
-    borderColor: _sharedUi.macOSColors.semantic.error + '30'
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: '500',
-    flex: 1
-  },
   // Gated container styles for free users
   gatedContainer: {
     flex: 1,

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

@@ -870,12 +870,12 @@ const styles = _reactNative.StyleSheet.create({
   urlPath: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   urlQueryString: {
     color: _sharedUi.night.color.info,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Query Parameters - Collapsible section
   queryParamsCollapsible: {
@@ -952,7 +952,7 @@ const styles = _reactNative.StyleSheet.create({
   sizeValue: {
     color: _sharedUi.night.color.info,
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "600"
   },
   /* ---- Timing phases ---- */
@@ -997,7 +997,7 @@ const styles = _reactNative.StyleSheet.create({
     width: 72,
     textAlign: "right",
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     color: _sharedUi.night.color.text
   },
   // Collapsible section styles
@@ -1033,7 +1033,7 @@ const styles = _reactNative.StyleSheet.create({
   collapsibleCount: {
     color: _sharedUi.night.color.textTertiary,
     fontSize: 11.5,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   collapsibleContent: {
     padding: 12
@@ -1107,7 +1107,7 @@ const styles = _reactNative.StyleSheet.create({
   filterOptionValue: {
     color: _sharedUi.night.color.text,
     fontSize: 13,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   filterToggle: {
     paddingHorizontal: 10,

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

@@ -319,7 +319,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     color: _sharedUi.night.color.text,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   rightSection: {
     flexDirection: "row",
@@ -334,7 +334,7 @@ const styles = _reactNative.StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   statusBadge: {
     paddingHorizontal: 4,
@@ -390,7 +390,7 @@ const styles = _reactNative.StyleSheet.create({
   sizeText: {
     fontSize: 8,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   clientText: {
     fontSize: 8,

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

@@ -388,7 +388,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   modeBadgeText: {
     fontSize: 9,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "700",
     letterSpacing: 0.5
   },
@@ -402,7 +402,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.3
   },
   modeToggleGroup: {
@@ -428,7 +428,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.3
   },
   modeToggleButtonTextActive: {

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

@@ -331,7 +331,7 @@ const styles = _reactNative.StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   headerActionButton: {
     width: 32,
@@ -370,6 +370,6 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -282,10 +282,8 @@ function NetworkListScreen({
       showsVerticalScrollIndicator: true
       // Clipped cells falsely fail Detox's hittability check (known
       // RN+Detox issue), so e2e bundles (Metro started with
-      // EXPO_PUBLIC_E2E=1) turn clipping off. Inlined at bundle time;
-      // guarded so a non-inlining bundler keeps the prod behavior.
+      // EXPO_PUBLIC_E2E=1) turn clipping off — see EVENT_LIST_PRESET.
       ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
       onEndReachedThreshold: 0.8
       // The list OWNS scrolling (NetworkModal passes
       // disableScrollWrapper while this screen is visible) so FlatList
@@ -294,18 +292,14 @@ function NetworkListScreen({
       // rows: at the store's 500-event cap that measured 17 JS FPS /
       // 133% CPU / 1.4GB vs ~53 JS FPS / 52% / 360MB virtualized
       // (buoy-optimize batch 2026-07-06, batch-1783396983529-6l7w).
-      // Window/batch values are the batch's "tuned" winner.
+      // Window/batch values are the batch's "tuned" winner (EVENT_LIST_PRESET).
       ,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      ..._sharedUi.EVENT_LIST_PRESET,
       // Saving a request from the detail view changes a row's glyph
       // without changing `data`. VirtualizedList is a PureComponent, so
       // the Set has to be declared as a re-render marker rather than
       // relying on `renderItem` getting a fresh identity.
-      ,
       extraData: savedLiveIds,
       "sentry-label": "ignore network events list",
       ListFooterComponent: renderListFooter
@@ -377,7 +371,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   pinnedClear: {
     paddingHorizontal: 6,

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

@@ -452,53 +452,24 @@ function NetworkModalInner({
         onBack: onBack
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.headerSearchContainer,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            ref: searchInputRef,
-            style: styles.headerSearchInput,
-            placeholder: "Search URL, method, operation, error...",
-            placeholderTextColor: _sharedUi.night.color.placeholder,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => setIsSearchActive(false),
-            onBlur: () => {
-              if (!clearPressRef.current) setIsSearchActive(false);
-            },
-            "sentry-label": "ignore network search header",
-            accessibilityLabel: "Search network requests",
-            testID: "buoy-network-search-input",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity
-          // react-native-web delays press-in ~50ms by default (native
-          // fires it immediately), which would put it AFTER the blur.
-          , {
-            delayPressIn: 0,
-            onPressIn: () => {
-              clearPressRef.current = true;
-            },
-            onPressOut: () => {
-              clearPressRef.current = false;
-            },
-            onPress: () => {
-              handleSearch("");
-              setIsSearchActive(false);
-            },
-            "sentry-label": "ignore clear search header",
-            style: styles.headerSearchClear,
-            accessibilityRole: "button",
-            accessibilityLabel: "Clear search",
-            testID: "buoy-network-search-clear",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 14,
-              color: _sharedUi.night.color.textSecondary
-            })
-          }) : null]
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: () => {
+            handleSearch("");
+            setIsSearchActive(false);
+          },
+          onDismiss: () => setIsSearchActive(false),
+          dismissOnBlur: true,
+          clearOnlyWhenText: true,
+          placeholder: "Search URL, method, operation, error...",
+          accessibilityLabel: "Search network requests",
+          iconSize: 14,
+          testID: "buoy-network-search-input",
+          clearTestID: "buoy-network-search-clear",
+          inputProps: {
+            "sentry-label": "ignore network search header"
+          }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderBadges, {
           activeStatus: filter.status,
           onToggleStatus: toggleStatusFilter,
@@ -743,27 +714,6 @@ const styles = _reactNative.StyleSheet.create({
   },
   // Night chrome — the header is glass over the star field, so the search
   // field and action chips sit on the Everlights dark-glass fill.
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: _sharedUi.night.radius.row,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   menuCopyRow: {
     paddingHorizontal: 6
   },

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

@@ -681,7 +681,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     color: _sharedUi.macOSColors.text.primary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     minHeight: 40
   },
   bodyInput: {

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

@@ -493,7 +493,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     color: _sharedUi.macOSColors.text.primary,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   urlTextOff: {
     color: _sharedUi.macOSColors.text.muted

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

@@ -154,11 +154,8 @@ function NetworkSavedScreen({
       keyExtractor: keyExtractor,
       contentContainerStyle: styles.listContent,
       showsVerticalScrollIndicator: true,
-      removeClippedSubviews: true,
       scrollEnabled: true,
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
+      ..._sharedUi.EVENT_LIST_PRESET,
       extraData: pinnedLiveIds,
       "sentry-label": "ignore saved requests list",
       ListFooterComponent: renderListFooter
@@ -184,7 +181,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   toolbarButton: {
     width: 26,

package/lib/commonjs/network/components/response-editor/Explorer.js

@@ -540,7 +540,7 @@ const styles = _reactNative.StyleSheet.create({
   clearButtonText: {
     fontSize: 12,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   expanderIcon: {
     width: 18,
@@ -627,7 +627,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.4
   },
   labelTextFocused: {
@@ -643,14 +643,14 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.buoyColors.textMuted,
     fontSize: 10,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     opacity: 0.7
   },
   pageRangeText: {
     color: _sharedUi.buoyColors.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   flexRowGapItemsCenter: {
     flexDirection: "row",
@@ -708,11 +708,11 @@ const styles = _reactNative.StyleSheet.create({
   textNumber: {
     color: _sharedUi.buoyColors.text,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   textString: {
     color: _sharedUi.buoyColors.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   flexRowGapFullWidth: {
     flexDirection: "row",
@@ -729,7 +729,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.4,
     opacity: 0.8
   },
@@ -783,7 +783,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     color: _sharedUi.buoyColors.text,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontSize: 12,
     paddingVertical: 6,
     paddingHorizontal: 10,
@@ -839,7 +839,7 @@ const styles = _reactNative.StyleSheet.create({
   readOnlyValue: {
     color: _sharedUi.buoyColors.text,
     fontSize: 13,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
@@ -865,7 +865,7 @@ const styles = _reactNative.StyleSheet.create({
     marginLeft: 8,
     color: _sharedUi.buoyColors.warning,
     fontWeight: "500",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   modernToggleButton: {
     flexDirection: "row",
@@ -904,7 +904,7 @@ const styles = _reactNative.StyleSheet.create({
     color: "#E5E7EB",
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.3
   },
   toggleStatus: {
@@ -923,7 +923,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "700",
     textTransform: "uppercase",
     letterSpacing: 0.8,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Pre-computed toggle icon styles to avoid inline objects [[memory:4875251]]
   toggleIconTrue: {
@@ -962,7 +962,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.buoyColors.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.4,
     minWidth: 60,
     flexShrink: 0

package/lib/commonjs/preset.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createNetworkTool = createNetworkTool;
-exports.networkToolPreset = void 0;
+exports.networkToolPreset = exports.createNetworkTool = void 0;
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _NetworkModal = require("./network/components/NetworkModal");
 var _overrideRulesStore = require("./network/overrides/overrideRulesStore");
@@ -66,7 +65,7 @@ if (isReactNativeRuntime && typeof __DEV__ !== "undefined" && __DEV__) {
  * - Filter by status, method, URL
  * - Timing information
  */
-const networkToolPreset = exports.networkToolPreset = {
+const networkToolPreset = exports.networkToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "network",
   name: "NET",
   description: "Network request logger",
@@ -80,7 +79,7 @@ const networkToolPreset = exports.networkToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom network monitoring tool configuration.
@@ -97,20 +96,6 @@ const networkToolPreset = exports.networkToolPreset = {
  * });
  * ```
  */
-function createNetworkTool(options) {
-  return {
-    id: options?.id || "network",
-    name: options?.name || "NET",
-    description: options?.description || "Network request logger",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NetworkIcon, {
-      size: size
-    }),
-    component: _NetworkModal.NetworkModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createNetworkTool = exports.createNetworkTool = (0, _sharedUi.createToolFactory)(networkToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));