@buoy-gg/react-query 1.7.2

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

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MutationsList;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _MutationButton = _interopRequireDefault(require("./MutationButton"));
+var _MutationInformation = _interopRequireDefault(require("./MutationInformation"));
+var _useAllMutations = _interopRequireDefault(require("../../hooks/useAllMutations"));
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Virtualized list of mutations with filtering and selection support for the mutation browser.
+ */
+function MutationsList({
+  selectedMutation,
+  setSelectedMutation,
+  activeFilter,
+  hideInfoPanel = false,
+  contentContainerStyle,
+  searchText = ""
+}) {
+  const {
+    mutations: allmutations
+  } = (0, _useAllMutations.default)();
+
+  // Helper function to get mutation status for filtering
+  const getMutationStatus = mutation => {
+    if (mutation.state.isPaused) return "paused";
+    const status = mutation.state.status;
+    return status; // 'idle', 'pending', 'success', 'error'
+  };
+
+  // Filter mutations based on active filter and search text
+  const filteredMutations = (0, _react.useMemo)(() => {
+    let filtered = allmutations;
+
+    // Apply status filter
+    if (activeFilter) {
+      filtered = filtered.filter(mutation => {
+        const status = getMutationStatus(mutation);
+        return status === activeFilter;
+      });
+    }
+
+    // Apply search filter on mutation keys
+    if (searchText) {
+      const searchLower = searchText.toLowerCase();
+      filtered = filtered.filter(mutation => {
+        const mutationKey = mutation.options.mutationKey;
+        if (!mutationKey) return false;
+        const keys = Array.isArray(mutationKey) ? mutationKey : [mutationKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return keyString.includes(searchLower);
+      });
+    }
+    return filtered;
+  }, [allmutations, activeFilter, searchText]);
+
+  // Height management for resizable mutation information panel
+  const screenHeight = _reactNative.Dimensions.get("window").height;
+  const defaultInfoHeight = screenHeight * 0.4; // 40% of screen height
+  const minInfoHeight = 150;
+  const maxInfoHeight = screenHeight * 0.7; // 70% of screen height
+
+  const infoHeightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultInfoHeight)).current;
+  const [, setCurrentInfoHeight] = (0, _react.useState)(defaultInfoHeight);
+  const currentInfoHeightRef = (0, _react.useRef)(defaultInfoHeight);
+
+  // Pan responder for dragging the mutation information panel
+  const infoPanResponder = (0, _react.useRef)(_reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: (evt, gestureState) => {
+      return Math.abs(gestureState.dy) > Math.abs(gestureState.dx) && Math.abs(gestureState.dy) > 10;
+    },
+    onPanResponderGrant: () => {
+      infoHeightAnim.stopAnimation(value => {
+        setCurrentInfoHeight(value);
+        currentInfoHeightRef.current = value;
+        infoHeightAnim.setValue(value);
+      });
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Use the ref value which is always current
+      const newHeight = currentInfoHeightRef.current - gestureState.dy;
+      const clampedHeight = Math.max(minInfoHeight, Math.min(maxInfoHeight, newHeight));
+      infoHeightAnim.setValue(clampedHeight);
+    },
+    onPanResponderRelease: (evt, gestureState) => {
+      const finalHeight = Math.max(minInfoHeight, Math.min(maxInfoHeight, currentInfoHeightRef.current - gestureState.dy));
+      setCurrentInfoHeight(finalHeight);
+      currentInfoHeightRef.current = finalHeight;
+      _reactNative.Animated.timing(infoHeightAnim, {
+        toValue: finalHeight,
+        duration: 200,
+        useNativeDriver: false
+      }).start(() => {
+        // Ensure the animated value and state are perfectly synced after animation
+        infoHeightAnim.setValue(finalHeight);
+        setCurrentInfoHeight(finalHeight);
+        currentInfoHeightRef.current = finalHeight;
+      });
+    }
+  })).current;
+
+  // Optimize FlatList performance - memoize renderItem to prevent re-renders
+  const renderMutation = (0, _react.useCallback)(({
+    item
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationButton.default, {
+    selected: selectedMutation,
+    setSelectedMutation: setSelectedMutation,
+    mutation: item
+  }), [selectedMutation, setSelectedMutation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [filteredMutations.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.listWrapper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        "sentry-label": "ignore devtools mutations list",
+        data: filteredMutations,
+        renderItem: renderMutation,
+        keyExtractor: (item, index) => `${item.mutationId}-${item.state.submittedAt}-${item.state.status}-${index}`,
+        showsVerticalScrollIndicator: true,
+        removeClippedSubviews: true,
+        contentContainerStyle: contentContainerStyle || styles.listContent,
+        initialNumToRender: 10,
+        maxToRenderPerBatch: 10,
+        windowSize: 10,
+        scrollEnabled: false
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.emptyContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyText,
+        children: activeFilter ? `No ${activeFilter} mutations found` : "No mutations found"
+      })
+    }), selectedMutation && !hideInfoPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [styles.mutationInfo, {
+        height: infoHeightAnim
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dragHandle,
+        ...infoPanResponder.panHandlers,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.dragIndicator
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.mutationInfoContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationInformation.default, {
+          selectedMutation: selectedMutation
+        })
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  listWrapper: {
+    flex: 1
+  },
+  listContent: {
+    backgroundColor: _sharedUi.buoyColors.base,
+    paddingHorizontal: 8,
+    paddingTop: 8
+  },
+  mutationInfo: {
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  dragHandle: {
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.border
+  },
+  dragIndicator: {
+    width: 40,
+    height: 4,
+    backgroundColor: _sharedUi.buoyColors.border,
+    borderRadius: 2
+  },
+  mutationInfoContent: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32,
+    backgroundColor: _sharedUi.buoyColors.card,
+    margin: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  emptyText: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  }
+});

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Small toggle used in the query browser to mock offline/online behavior.
+ */
+const NetworkToggleButton = ({
+  isOffline,
+  onToggle
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    "sentry-label": "ignore devtools network toggle button",
+    style: [styles.button, isOffline && styles.offlineButton],
+    onPress: onToggle,
+    activeOpacity: 0.7,
+    accessibilityLabel: isOffline ? "Unset offline mocking behavior" : "Mock offline behavior",
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: isOffline
+    },
+    children: isOffline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
+      size: 16,
+      color: _sharedUi.buoyColors.error,
+      strokeWidth: 2
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
+      size: 16,
+      color: _sharedUi.buoyColors.success,
+      strokeWidth: 2
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: "rgba(16, 185, 129, 0.1)",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(16, 185, 129, 0.2)"
+  },
+  offlineButton: {
+    backgroundColor: "rgba(239, 68, 68, 0.1)",
+    borderColor: "rgba(239, 68, 68, 0.2)"
+  }
+});
+var _default = exports.default = NetworkToggleButton;

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

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryActions;
+var _reactQuery = require("@tanstack/react-query");
+var _ActionButton = _interopRequireDefault(require("./ActionButton"));
+var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
+var _triggerLoading = _interopRequireDefault(require("../../utils/actions/triggerLoading"));
+var _refetch = _interopRequireDefault(require("../../utils/actions/refetch"));
+var _reset = _interopRequireDefault(require("../../utils/actions/reset"));
+var _remove = _interopRequireDefault(require("../../utils/actions/remove"));
+var _invalidate = _interopRequireDefault(require("../../utils/actions/invalidate"));
+var _triggerError = _interopRequireDefault(require("../../utils/actions/triggerError"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Action panel rendered in query detail views providing mutation simulation and removal controls.
+ */
+function QueryActions({
+  query,
+  setSelectedQuery
+}) {
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  if (query === undefined) {
+    return null;
+  }
+  const queryStatus = query.state.status;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.headerText,
+      children: "Actions"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.buttonsContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query refetch action",
+        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
+        onClick: () => {
+          (0, _refetch.default)({
+            query
+          });
+        },
+        bgColorClass: "btnRefetch",
+        text: "Refetch",
+        _textColorClass: "btnRefetch"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query invalidate action",
+        disabled: queryStatus === "pending",
+        onClick: () => {
+          (0, _invalidate.default)({
+            query,
+            queryClient
+          });
+        },
+        bgColorClass: "btnInvalidate",
+        text: "Invalidate",
+        _textColorClass: "btnInvalidate"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query reset action",
+        disabled: queryStatus === "pending",
+        onClick: () => {
+          (0, _reset.default)({
+            queryClient,
+            query
+          });
+        },
+        bgColorClass: "btnReset",
+        text: "Reset",
+        _textColorClass: "btnReset"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query remove action",
+        disabled: (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching",
+        onClick: () => {
+          (0, _remove.default)({
+            queryClient,
+            query
+          });
+          setSelectedQuery(undefined);
+        },
+        bgColorClass: "btnRemove",
+        text: "Remove",
+        _textColorClass: "btnRemove"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query trigger loading action",
+        disabled: false,
+        onClick: () => {
+          (0, _triggerLoading.default)({
+            query
+          });
+        },
+        bgColorClass: "btnTriggerLoading",
+        text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading",
+        _textColorClass: "btnTriggerLoading"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
+        "sentry-label": "ignore devtools query trigger error action",
+        disabled: queryStatus === "pending",
+        onClick: () => {
+          (0, _triggerError.default)({
+            query,
+            queryClient
+          });
+        },
+        bgColorClass: "btnTriggerLoadiError",
+        text: queryStatus === "error" ? "Restore Error" : "Trigger Error",
+        _textColorClass: "btnTriggerLoadiError"
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 16,
+    gap: 12
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    marginBottom: 8,
+    textAlign: "left",
+    fontFamily: "monospace",
+    letterSpacing: 1,
+    textTransform: "uppercase"
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  }
+});

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

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryBrowser;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _QueryRow = _interopRequireDefault(require("./QueryRow"));
+var _useAllQueries = _interopRequireDefault(require("../../hooks/useAllQueries"));
+var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Scrollable list view of cached queries with filtering support and selection handling.
+ */
+function QueryBrowser({
+  selectedQuery,
+  onQuerySelect,
+  activeFilter,
+  emptyStateMessage,
+  contentContainerStyle,
+  queries: externalQueries,
+  searchText = "",
+  ignoredPatterns = new Set(),
+  includedPatterns = new Set()
+}) {
+  // Holds all queries using the working hook, or use external queries if provided
+  const internalQueries = (0, _useAllQueries.default)();
+  const allQueries = externalQueries ?? internalQueries;
+
+  // Filter queries based on active filter, search text, and ignored patterns
+  const filteredQueries = (0, _react.useMemo)(() => {
+    let filtered = allQueries;
+
+    // Apply status filter
+    if (activeFilter) {
+      filtered = filtered.filter(query => {
+        const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
+        return status === activeFilter;
+      });
+    }
+
+    // Apply search filter on query keys
+    if (searchText) {
+      const searchLower = searchText.toLowerCase();
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return false;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return keyString.includes(searchLower);
+      });
+    }
+
+    // Apply included patterns filter (show ONLY queries matching any pattern)
+    // This acts as a whitelist - if any include patterns exist, query must match at least one
+    if (includedPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return false;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+
+        // Return true if query matches ANY included pattern
+        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter (hide queries matching any pattern)
+    if (ignoredPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return true;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+
+        // Return true if NO patterns match (i.e., keep the query)
+        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Sort by most recently updated (dataUpdatedAt descending)
+    filtered.sort((a, b) => {
+      const aTime = a.state.dataUpdatedAt || 0;
+      const bTime = b.state.dataUpdatedAt || 0;
+      return bTime - aTime; // Most recent first
+    });
+    return filtered;
+  }, [allQueries, activeFilter, searchText, includedPatterns, ignoredPatterns]);
+
+  // Function to handle query selection with stable comparison
+  const handleQuerySelect = (0, _react.useCallback)(query => {
+    // Compare queries by their queryKey and queryHash for stable selection
+    const isCurrentlySelected = selectedQuery?.queryHash === query.queryHash;
+    if (isCurrentlySelected) {
+      onQuerySelect(undefined); // Deselect
+      return;
+    }
+    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,
+        children: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    style: styles.listWrapper,
+    contentContainerStyle: contentContainerStyle || styles.listContent,
+    showsVerticalScrollIndicator: true,
+    children: filteredQueries.map(query => /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryRow.default, {
+      query: query,
+      isSelected: selectedQuery?.queryHash === query.queryHash,
+      onSelect: handleQuerySelect
+    }, `${query.queryHash}-${query.state.dataUpdatedAt}-${query.state.fetchStatus}`))
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  listWrapper: {
+    flexGrow: 1
+  },
+  listContent: {
+    paddingBottom: 16,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 32,
+    backgroundColor: _sharedUi.buoyColors.card,
+    margin: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border
+  },
+  emptyText: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 14,
+    textAlign: "center",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  }
+});

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryDetails;
+var _QueryDetailsChip = _interopRequireDefault(require("./QueryDetailsChip"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Renders the primary metadata summary for a selected query, including fetch status and timings.
+ */
+function QueryDetails({
+  query
+}) {
+  if (query === undefined) {
+    return null;
+  }
+  // Convert the timestamp to a Date object and format it
+  const lastUpdated = new Date(query.state.dataUpdatedAt).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.minWidth,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.headerText,
+      children: "Query Details"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        "sentry-label": "ignore devtools query details scroll",
+        horizontal: true,
+        style: styles.flexOne,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.queryKeyText,
+          children: (0, _sharedUi.displayValue)(query.queryKey, true)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDetailsChip.default, {
+        query: query
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.labelText,
+        children: "Observers:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.valueText,
+        children: `${query.getObserversCount()}`
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.labelText,
+        children: "Last Updated:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.valueText,
+        children: `${lastUpdated}`
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  minWidth: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  headerText: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.buoyColors.primary,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.primary + "33",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.textMuted + "66"
+  },
+  flexOne: {
+    flex: 1,
+    marginRight: 8
+  },
+  queryKeyText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    lineHeight: 18,
+    flexShrink: 1,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D"
+  },
+  labelText: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  valueText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontWeight: "500",
+    fontVariant: ["tabular-nums"],
+    fontFamily: "monospace"
+  }
+});