@buoy-gg/react-query 7.0.32 → 7.0.34

package/lib/commonjs/react-query/components/query-browser/StorageStatusCount.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 _storageQueryUtils = require("../../utils/storageQueryUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,21 +23,13 @@ const StorageStatusCount = ({
   onStorageTypesChange,
   counts
 }) => {
-  // Scroll state management like QueryStatusCount
-  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 handleStorageTypeToggle = (storageType, event) => {
-    if (event) {
-      // Calculate distance moved during touch (like QueryStatusCount)
-      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 (onStorageTypesChange) {
       const newStorageTypes = new Set(activeStorageTypes);
       if (newStorageTypes.has(storageType)) {
@@ -49,58 +40,22 @@ const StorageStatusCount = ({
       onStorageTypesChange(newStorageTypes);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.storageStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools storage 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: allStorageTypes.map(storageType => {
-        const count = counts?.[storageType] ?? 0;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-          label: (0, _storageQueryUtils.getStorageTypeLabel)(storageType),
-          color: (0, _storageQueryUtils.getStorageTypeColor)(storageType),
-          count: count // Show actual storage query counts
-          ,
-          isActive: activeStorageTypes.has(storageType),
-          onPress: event => handleStorageTypeToggle(storageType, event),
-          onTouchStart: handleTouchStart,
-          showLabel: true
-        }, storageType);
-      })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools storage status count scroll",
+    children: allStorageTypes.map(storageType => {
+      const count = counts?.[storageType] ?? 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+        label: (0, _storageQueryUtils.getStorageTypeLabel)(storageType),
+        color: (0, _storageQueryUtils.getStorageTypeColor)(storageType),
+        count: count // Show actual storage query counts
+        ,
+        isActive: activeStorageTypes.has(storageType),
+        onPress: event => handleStorageTypeToggle(storageType, event),
+        onTouchStart: handleTouchStart,
+        showLabel: true
+      }, storageType);
     })
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  storageStatusContainer: {
-    // 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 = StorageStatusCount;

package/lib/commonjs/react-query/stores/reactQueryEventStore.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.subscribeToReactQueryEvents = exports.setQueryClient = exports.reactQueryEventStore = exports.isReactQueryConnected = exports.getReactQueryEvents = exports.disconnectQueryClient = exports.clearReactQueryEvents = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _storageQueryUtils = require("../utils/storageQueryUtils");
 /**
  * React Query Event Store
@@ -29,13 +30,15 @@ let eventIdCounter = 0;
 function generateEventId() {
   return `rq-${Date.now()}-${++eventIdCounter}`;
 }
-class ReactQueryEventStore {
-  events = [];
-  listeners = new Set();
+class ReactQueryEventStore extends _sharedUi.ChangeLog {
   queryClient = null;
   queryUnsubscribe = null;
   mutationUnsubscribe = null;
-  maxEvents = 200;
+  constructor() {
+    super({
+      max: 200
+    });
+  }
 
   // Track fetch start times for duration calculation
   fetchStartTimes = new Map();
@@ -246,43 +249,31 @@ class ReactQueryEventStore {
    * Add an event to the store
    */
   addEvent(event) {
-    this.events = [event, ...this.events].slice(0, this.maxEvents);
-    this.notifyListeners();
+    this.record(event);
   }
 
   /**
    * Get all events
    */
   getEvents() {
-    return this.events;
+    return this.items;
   }
 
   /**
    * Subscribe to event changes
    */
   subscribe(listener) {
-    this.listeners.add(listener);
+    const unsubscribe = super.subscribe(listener);
     // Immediately call with current events
-    listener(this.events);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  /**
-   * Notify all listeners
-   */
-  notifyListeners() {
-    const events = this.events;
-    this.listeners.forEach(listener => listener(events));
+    listener(this.items);
+    return unsubscribe;
   }
 
   /**
    * Clear all events
    */
   clearEvents() {
-    this.events = [];
-    this.notifyListeners();
+    this.clear();
   }
 
   /**

package/lib/commonjs/react-query/sync/snapshotProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createQuerySnapshotProvider = createQuerySnapshotProvider;
 exports.registerQuerySnapshotProvider = registerQuerySnapshotProvider;
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _dehydrate = require("./dehydrate");
 /**
  * Time Machine snapshot provider for React Query.
@@ -54,7 +53,6 @@ function queryLabel(queryKey, queryHash) {
     return queryHash;
   }
 }
-const ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
 
 /**
  * A query `error` (and `fetchFailureReason`) usually holds the live
@@ -156,31 +154,15 @@ function createQuerySnapshotProvider(queryClient) {
     },
     async restore(data, options) {
       const snapshot = data;
-      const excludedSet = new Set(options?.excludeKeys ?? []);
-      const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
-      const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
-      let excludedHits = 0;
-      const result = {
-        ok: true,
-        applied: 0,
-        skipped: [],
-        warnings: []
-      };
+      const scope = (0, _sharedUi.createRestoreScope)(options);
+      const result = (0, _sharedUi.emptyRestoreResult)();
       if (!snapshot?.queries) {
-        return {
-          ok: false,
-          applied: 0,
-          skipped: [],
-          warnings: ["empty query snapshot"]
-        };
+        return (0, _sharedUi.failedRestore)("empty query snapshot");
       }
       const cache = queryClient.getQueryCache();
       const snapHashes = new Set(snapshot.queries.map(q => q.queryHash));
       for (const snap of snapshot.queries) {
-        if (!touch(snap.queryHash)) {
-          excludedHits += 1;
-          continue;
-        }
+        if (!scope.allows(snap.queryHash)) continue;
         // Snapshots taken before the raw-capture fix hold a wire placeholder
         // instead of the data. Writing that into the cache hands the app an
         // object with none of its fields — leave the live query alone and say
@@ -221,10 +203,7 @@ function createQuerySnapshotProvider(queryClient) {
       // Cache entries the snapshot doesn't know about get removed; a mounted
       // observer will rebuild + refetch its query on next interaction.
       for (const query of cache.getAll().slice()) {
-        if (!touch(query.queryHash)) {
-          excludedHits += 1;
-          continue;
-        }
+        if (!scope.allows(query.queryHash)) continue;
         if (!snapHashes.has(query.queryHash)) {
           try {
             cache.remove(query);
@@ -242,9 +221,8 @@ function createQuerySnapshotProvider(queryClient) {
         queryClient.getMutationCache().clear();
         result.warnings.push(`mutation cache cleared (${mutationCount} mutation(s))`);
       }
-      if (excludedHits > 0) {
-        result.warnings.push(`${excludedHits} quer(y/ies) excluded by you`);
-      }
+      const excludedWarning = scope.excludedWarning("quer(y/ies)");
+      if (excludedWarning) result.warnings.push(excludedWarning);
       return result;
     },
     /** Per-query restore preview. `base` omitted = compare against live cache. */
@@ -270,39 +248,16 @@ function createQuerySnapshotProvider(queryClient) {
           continue;
         }
         const baseQ = baseByHash.get(q.queryHash);
-        if (!baseQ) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "added",
-            newValue: comparableQuery(q)
-          });
-          continue;
-        }
-        const oldVal = comparableQuery(baseQ);
-        const newVal = comparableQuery(q);
-        if ((0, _dataViewer.boundedDeepEqual)(oldVal, newVal)) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "unchanged"
-          });
-        } else if ((0, _dataViewer.jsonLikelyLargerThan)(oldVal, ITEM_RENDER_BYTE_LIMIT) || (0, _dataViewer.jsonLikelyLargerThan)(newVal, ITEM_RENDER_BYTE_LIMIT)) {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "too-large",
-            reason: "query data too large to render a diff — restore still applies it"
-          });
-        } else {
-          items.push({
-            key: q.queryHash,
-            label,
-            verdict: "changed",
-            oldValue: oldVal,
-            newValue: newVal
-          });
-        }
+        items.push((0, _sharedUi.classifyPreviewItem)({
+          key: q.queryHash,
+          label,
+          oldValue: baseQ ? comparableQuery(baseQ) : undefined,
+          newValue: comparableQuery(q),
+          inOld: baseQ !== undefined,
+          inNew: true
+        }, {
+          tooLargeReason: "query data too large to render a diff — restore still applies it"
+        }));
       }
       for (const q of baseQueries) {
         if (!targetByHash.has(q.queryHash)) {

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

@@ -1,5 +1,6 @@
 "use strict";
 
+import { resolveListEmptyState } from "@buoy-gg/shared-ui";
 import { View, StyleSheet } from "react-native";
 import { useMemo } from "react";
 import { QueryBrowser } from "./query-browser/index";
@@ -58,7 +59,22 @@ export 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: 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/module/react-query/components/modals/MutationBrowserFooter.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { ToolFooter, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import MutationStatusCount from "../query-browser/MutationStatusCount";
 import { useMemo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,13 +28,12 @@ export function MutationBrowserFooter({
   const paddingBottom = useMemo(() => {
     return !isFloatingMode ? insets.bottom : 0;
   }, [isFloatingMode, insets.bottom]);
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(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__*/_jsx(View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(MutationStatusCount, {
@@ -47,19 +46,8 @@ export function MutationBrowserFooter({
 }
 const styles = StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: 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/module/react-query/components/modals/QueryBrowserFooter.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { ToolFooter, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import QueryStatusCount from "../query-browser/QueryStatusCount";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -24,12 +24,11 @@ export function QueryBrowserFooter({
   const insets = useSafeAreaInsets({
     minBottom: 16
   });
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.filterFooter, {
-      paddingBottom: !isFloatingMode ? insets.bottom : 0
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+  return /*#__PURE__*/_jsx(ToolFooter, {
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: !isFloatingMode ? insets.bottom : 0,
+    style: styles.filterFooter,
     children: /*#__PURE__*/_jsx(View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(QueryStatusCount, {
@@ -42,19 +41,8 @@ export function QueryBrowserFooter({
 }
 const styles = StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: 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/module/react-query/components/modals/ReactQueryModalHeader.js

@@ -1,8 +1,8 @@
 "use strict";
 
-import { ModalHeader, TabSelector, Search, X, Filter, Trash, night } from "@buoy-gg/shared-ui";
+import { ModalHeader, TabSelector, Search, Filter, Trash, night } from "@buoy-gg/shared-ui";
 import { useState, useRef, useEffect } from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { WifiToggle } from "../WifiToggle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -23,6 +23,12 @@ export function ReactQueryModalHeader({
   showWifiToggle = false
 }) {
   const [isSearchActive, setIsSearchActive] = 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 = useRef(false);
   const searchInputRef = useRef(null);
 
   // Auto-focus search input when search becomes active
@@ -80,42 +86,29 @@ export function ReactQueryModalHeader({
     children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
       title: "",
       noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-        style: styles.headerSearchContainer,
-        testID: "buoy-rq-search-field",
-        children: [/*#__PURE__*/_jsx(Search, {
-          size: 14,
-          color: night.color.textSecondary
-        }), /*#__PURE__*/_jsx(TextInput, {
-          ref: searchInputRef,
-          testID: "buoy-rq-search",
-          style: styles.headerSearchInput,
-          placeholder: "Search query keys...",
-          placeholderTextColor: 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__*/_jsx(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__*/_jsx(X, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        }) : null]
+      children: isSearchActive ? /*#__PURE__*/_jsx(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__*/_jsxs(View, {
         style: styles.tabRow,
         children: [/*#__PURE__*/_jsx(View, {
@@ -184,29 +177,6 @@ const styles = StyleSheet.create({
   tabSelectorWrap: {
     flex: 1
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    gap: 6,
-    marginHorizontal: 12,
-    marginVertical: 8
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    fontFamily: "monospace",
-    padding: 0,
-    margin: 0,
-    minHeight: 18
-  },
-  headerSearchClear: {
-    padding: 2
-  },
   headerActionButton: {
     padding: 6,
     borderRadius: 4