@buoy-gg/react-query 7.0.32 → 7.0.34

package/lib/commonjs/react-query/components/QueryBrowserMode.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QueryBrowserMode = QueryBrowserMode;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _reactNative = require("react-native");
 var _react = require("react");
 var _index = require("./query-browser/index");
@@ -63,7 +64,22 @@ function QueryBrowserMode({
       searchText: searchText,
       ignoredPatterns: ignoredPatterns,
       includedPatterns: includedPatterns,
-      emptyStateMessage: searchText ? `No queries found matching "${searchText}"` : activeFilter ? `No ${activeFilter} queries found` : hasIncludeFilters ? `No queries match your "include only" filters. ${includedPatterns.size} pattern(s) active.` : hasExcludeFilters ? `No queries match the current filters. ${ignoredPatterns.size} pattern(s) excluded.` : "No React Query queries are currently active.\n\nTo see queries here:\n• Make API calls using useQuery\n• Ensure queries are within QueryClientProvider\n• Check console for debugging info",
+      emptyState: (0, _sharedUi.resolveListEmptyState)({
+        subject: "queries",
+        verb: "active",
+        search: searchText,
+        total: allQueries.length,
+        // Include/exclude patterns and the status filter are all "your
+        // filters hid it", but each names the control that undoes it.
+        blocked: activeFilter ? `No ${activeFilter} queries. Pick another status to see the rest.` : hasIncludeFilters ? `No queries match your "include only" filters. ${includedPatterns.size} pattern(s) active.` : hasExcludeFilters ? `No queries match the current filters. ${ignoredPatterns.size} pattern(s) excluded.` : undefined,
+        waiting: {
+          // scanning = the cache was inspected and came back empty; this is
+          // a setup problem, not a stream that has not started.
+          otto: "scanning",
+          title: "No queries found",
+          message: "No React Query queries are currently active.\n\nTo see queries here:\n• Make API calls using useQuery\n• Ensure queries are within QueryClientProvider\n• Check console for debugging info"
+        }
+      }),
       contentContainerStyle: styles.queryListContent
     })]
   });

package/lib/commonjs/react-query/components/modals/MutationBrowserFooter.js

@@ -33,13 +33,12 @@ function MutationBrowserFooter({
   const paddingBottom = (0, _react.useMemo)(() => {
     return !isFloatingMode ? insets.bottom : 0;
   }, [isFloatingMode, insets.bottom]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolFooter, {
     // Force re-render with key change
-    style: [styles.filterFooter, {
-      paddingBottom
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: paddingBottom,
+    style: styles.filterFooter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationStatusCount.default, {
@@ -52,19 +51,8 @@ function MutationBrowserFooter({
 }
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.night.color.border,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    // Transparent so the night sheet's star field shows through.
-    // Night glass bar — matches the shared EventStepperFooter backing.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  dockedFooter: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    paddingTop: 8,
+    paddingHorizontal: 0
   },
   filterContainer: {
     minHeight: 32,

package/lib/commonjs/react-query/components/modals/QueryBrowserFooter.js

@@ -29,12 +29,11 @@ function QueryBrowserFooter({
   const insets = (0, _sharedUi.useSafeAreaInsets)({
     minBottom: 16
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.filterFooter, {
-      paddingBottom: !isFloatingMode ? insets.bottom : 0
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolFooter, {
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: !isFloatingMode ? insets.bottom : 0,
+    style: styles.filterFooter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatusCount.default, {
@@ -47,19 +46,8 @@ function QueryBrowserFooter({
 }
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.night.color.border,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    // Transparent so the night sheet's star field shows through.
-    // Night glass bar — matches the shared EventStepperFooter backing.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  dockedFooter: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    paddingTop: 8,
+    paddingHorizontal: 0
   },
   filterContainer: {
     minHeight: 32,

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -27,6 +27,12 @@ function ReactQueryModalHeader({
   showWifiToggle = false
 }) {
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  // True while the header's clear ✕ is being pressed. With a mouse, pressing
+  // the ✕ blurs the input FIRST, and the blur handler closes search — which
+  // unmounts the ✕ before its own press can fire, so the query was never
+  // cleared (desktop). Press-in lands before the blur, so the blur handler can
+  // tell this dismissal apart from a click elsewhere.
+  const clearPressRef = (0, _react.useRef)(false);
   const searchInputRef = (0, _react.useRef)(null);
 
   // Auto-focus search input when search becomes active
@@ -84,42 +90,29 @@ function ReactQueryModalHeader({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
       title: "",
       noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.headerSearchContainer,
-        testID: "buoy-rq-search-field",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          ref: searchInputRef,
-          testID: "buoy-rq-search",
-          style: styles.headerSearchInput,
-          placeholder: "Search query keys...",
-          placeholderTextColor: _sharedUi.night.color.textTertiary,
-          value: searchText,
-          onChangeText: handleSearch,
-          onSubmitEditing: () => setIsSearchActive(false),
-          onBlur: () => setIsSearchActive(false),
-          "sentry-label": "ignore react query search header",
-          accessibilityLabel: "Search queries and mutations",
-          autoCapitalize: "none",
-          autoCorrect: false,
-          returnKeyType: "search"
-        }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: () => {
-            handleSearch("");
-            setIsSearchActive(false);
-          },
-          "sentry-label": "ignore clear search header",
-          testID: "buoy-rq-search-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear search",
-          style: styles.headerSearchClear,
-          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 query keys...",
+        accessibilityLabel: "Search queries and mutations",
+        iconSize: 14
+        // These handles predate the shared field and are the reverse of
+        // its convention (container = "-field", input = bare); kept as-is
+        // so the e2e suite keeps its targets.
+        ,
+        testID: "buoy-rq-search",
+        containerTestID: "buoy-rq-search-field",
+        clearTestID: "buoy-rq-search-clear",
+        inputProps: {
+          "sentry-label": "ignore react query search header"
+        }
       }) : showWifiToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.tabRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -188,29 +181,6 @@ const styles = _reactNative.StyleSheet.create({
   tabSelectorWrap: {
     flex: 1
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    gap: 6,
-    marginHorizontal: 12,
-    marginVertical: 8
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    fontFamily: "monospace",
-    padding: 0,
-    margin: 0,
-    minHeight: 18
-  },
-  headerSearchClear: {
-    padding: 2
-  },
   headerActionButton: {
     padding: 6,
     borderRadius: 4

package/lib/commonjs/react-query/components/query-browser/MutationStatusCount.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _useQueryStatusCounts = require("../../hooks/useQueryStatusCounts");
-var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -25,96 +24,61 @@ const MutationStatusCount = ({
     error,
     paused
   } = (0, _useQueryStatusCounts.useMutationStatusCounts)();
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
-  const touchStartX = (0, _react.useRef)(0);
-  const touchStartY = (0, _react.useRef)(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = (0, _sharedUi.useChipTap)();
   const handleFilterClick = (filter, event) => {
-    if (event) {
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return;
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       onFilterChange(activeFilter === filter ? null : filter);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.mutationStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools mutation status count scroll",
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      onScrollBeginDrag: () => setIsScrolling(true),
-      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
-      onMomentumScrollBegin: () => setIsScrolling(true),
-      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Pending",
-        color: "blue",
-        count: pending,
-        isActive: activeFilter === "pending",
-        onPress: event => handleFilterClick("pending", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-pending",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Success",
-        color: "green",
-        count: success,
-        isActive: activeFilter === "success",
-        onPress: event => handleFilterClick("success", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-success",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Error",
-        color: "red",
-        count: error,
-        isActive: activeFilter === "error",
-        onPress: event => handleFilterClick("error", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-error",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-paused",
-        showLabel: true,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools mutation status count scroll",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Pending",
+      color: "blue",
+      count: pending,
+      isActive: activeFilter === "pending",
+      onPress: event => handleFilterClick("pending", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-pending",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Success",
+      color: "green",
+      count: success,
+      isActive: activeFilter === "success",
+      onPress: event => handleFilterClick("success", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-success",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Error",
+      color: "red",
+      count: error,
+      isActive: activeFilter === "error",
+      onPress: event => handleFilterClick("error", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-error",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-paused",
+      showLabel: true,
+      size: size
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  mutationStatusContainer: {
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    flexGrow: 1
-  }
-});
 var _default = exports.default = MutationStatusCount;

package/lib/commonjs/react-query/components/query-browser/MutationsList.js

@@ -135,13 +135,11 @@ function MutationsList({
         windowSize: 10,
         scrollEnabled: false
       })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.emptyContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyText,
-        testID: "buoy-rq-mutations-empty",
-        children: activeFilter ? `No ${activeFilter} mutations found` : "No mutations found"
-      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+      testID: "buoy-rq-mutations-empty",
+      otto: activeFilter ? "filtering" : "scanning",
+      title: "No mutations found",
+      message: activeFilter ? `No ${activeFilter} mutations. Pick another status to see the rest.` : "Mutations run through useMutation will appear here."
     }), selectedMutation && !hideInfoPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
       style: [styles.mutationInfo, {
         height: infoHeightAnim

package/lib/commonjs/react-query/components/query-browser/QueryBrowser.js

@@ -20,6 +20,7 @@ function QueryBrowser({
   onQuerySelect,
   activeFilter,
   emptyStateMessage,
+  emptyState,
   contentContainerStyle,
   queries: externalQueries,
   searchText = "",
@@ -98,12 +99,12 @@ function QueryBrowser({
     onQuerySelect(query);
   }, [selectedQuery?.queryHash, onQuerySelect]);
   if (filteredQueries.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.emptyContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.emptyText,
-        testID: "buoy-rq-empty",
-        children: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+      testID: "buoy-rq-empty",
+      ...(emptyState ?? {
+        otto: "empty",
+        title: "No queries found",
+        message: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
       })
     });
   }
@@ -130,17 +131,8 @@ function QueryBrowser({
         isSelected: selectedQuery?.queryHash === query.queryHash,
         onSelect: handleQuerySelect
       }),
-      showsVerticalScrollIndicator: true
-      // Clipped cells fail Detox's hittability check even when they are on
-      // screen, so e2e bundles (Metro with EXPO_PUBLIC_E2E=1) turn clipping
-      // off. Inlined at bundle time; a non-inlining bundler keeps prod
-      // behavior.
-      ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      showsVerticalScrollIndicator: true,
+      ..._sharedUi.EVENT_LIST_PRESET
     })
   );
 }

package/lib/commonjs/react-query/components/query-browser/QueryStatusCount.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _useQueryStatusCounts = _interopRequireDefault(require("../../hooks/useQueryStatusCounts"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,122 +24,77 @@ const QueryStatusCount = ({
     paused,
     inactive
   } = (0, _useQueryStatusCounts.default)();
-
-  // Scroll state management like ChipTabs
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
-  const touchStartX = (0, _react.useRef)(0);
-  const touchStartY = (0, _react.useRef)(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = (0, _sharedUi.useChipTap)();
   const handleFilterClick = (filter, event) => {
-    if (event) {
-      // Calculate distance moved during touch (like ChipTabs)
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-
-      // If touch moved more than 5px in any direction, it's a swipe, not a tap
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return; // Don't trigger filter change
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       // Toggle filter: if already active, clear it; otherwise set it
       onFilterChange(activeFilter === filter ? null : filter);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.queryStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools query status count scroll",
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      onScrollBeginDrag: () => setIsScrolling(true),
-      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
-      onMomentumScrollBegin: () => setIsScrolling(true),
-      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Fresh",
-        color: "green",
-        count: fresh,
-        isActive: activeFilter === "fresh",
-        onPress: event => handleFilterClick("fresh", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fresh",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Loading",
-        color: "blue",
-        count: fetching,
-        isActive: activeFilter === "fetching",
-        onPress: event => handleFilterClick("fetching", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fetching",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-paused",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Stale",
-        color: "yellow",
-        count: stale,
-        isActive: activeFilter === "stale",
-        onPress: event => handleFilterClick("stale", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-stale",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Idle",
-        color: "gray",
-        count: inactive,
-        isActive: activeFilter === "inactive",
-        onPress: event => handleFilterClick("inactive", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-inactive",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools query status count scroll",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Fresh",
+      color: "green",
+      count: fresh,
+      isActive: activeFilter === "fresh",
+      onPress: event => handleFilterClick("fresh", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fresh",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Loading",
+      color: "blue",
+      count: fetching,
+      isActive: activeFilter === "fetching",
+      onPress: event => handleFilterClick("fetching", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fetching",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-paused",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Stale",
+      color: "yellow",
+      count: stale,
+      isActive: activeFilter === "stale",
+      onPress: event => handleFilterClick("stale", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-stale",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Idle",
+      color: "gray",
+      count: inactive,
+      isActive: activeFilter === "inactive",
+      onPress: event => handleFilterClick("inactive", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-inactive",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  queryStatusContainer: {
-    // Container for ScrollView - take full width
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    // ScrollView itself styles
-    flex: 1
-  },
-  scrollContent: {
-    // ScrollView content styles
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    // Spacing between chips
-    paddingHorizontal: 4,
-    // Small padding on ends
-    paddingVertical: 4,
-    flexGrow: 1 // Allow content to grow to fill available space
-  }
-});
 var _default = exports.default = QueryStatusCount;