@buoy-gg/react-query 7.0.26 → 7.0.28

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

@@ -5,7 +5,6 @@ import { useMemo } from "react";
 import { QueryBrowser } from "./query-browser/index";
 import { FilterStatusBadge } from "./FilterStatusBadge";
 import useAllQueries from "../hooks/useAllQueries";
-import { buoyColors } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Wrapper around the query list experience used inside the modal view. */
 export function QueryBrowserMode({
@@ -67,11 +66,13 @@ export function QueryBrowserMode({
 const styles = StyleSheet.create({
   queryListContainer: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   queryListContent: {
     padding: 8,
-    backgroundColor: buoyColors.base,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent",
     flexGrow: 1
   }
 });

package/lib/module/react-query/components/modals/DataEditorModal.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { JsModal, devToolsStorageKeys, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { useGetQueryByQueryKeyWithVersion } from "../../hooks/useSelectedQuery";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
 import { DataEditorMode, DataEditorActionsFooter } from "../DataEditorMode";
@@ -27,6 +27,15 @@ export function DataEditorModal({
   const handleModeChange = useCallback(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. DataEditorActionsFooter pads its bottom with
+  // `insets.bottom + 8` when docked, so the reserve must grow by the same
+  // amount or the editor bottom hides behind the footer.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 72 : 80 + insets.bottom;
   const renderHeaderContent = () => /*#__PURE__*/_jsx(ReactQueryModalHeader, {
     selectedQuery: selectedQuery,
     activeTab: "queries",
@@ -55,7 +64,7 @@ export function DataEditorModal({
     enableGlitchEffects: true,
     styles: {},
     footer: footerNode,
-    footerHeight: 72,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/_jsx(DataEditorMode, {
       selectedQuery: selectedQuery,
       isFloatingMode: modalMode === "floating",

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
 import MutationStatusCount from "../query-browser/MutationStatusCount";
 import { useMemo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -48,10 +48,12 @@ export function MutationBrowserFooter({
 const styles = StyleSheet.create({
   filterFooter: {
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
+    borderTopColor: night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 0,
-    backgroundColor: buoyColors.base,
+    // 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
   },

package/lib/module/react-query/components/modals/MutationBrowserModal.js

@@ -5,7 +5,7 @@ import { useCallback, useState, useRef } from "react";
 import { useGetMutationById } from "../../hooks/useSelectedMutation";
 import { MutationBrowserMode } from "../MutationBrowserMode";
 import { MutationBrowserFooter } from "./MutationBrowserFooter";
-import { JsModal } from "@buoy-gg/shared-ui";
+import { JsModal, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
 import { View, Animated, PanResponder } from "react-native";
 import { SwipeIndicator } from "./SwipeIndicator";
@@ -56,6 +56,15 @@ export function MutationBrowserModal({
     setModalMode(mode);
   }, []);
 
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. MutationBrowserFooter grows by the safe-area inset
+  // when docked, so the reserve must track that or the list bottom hides
+  // behind the footer.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 56 : 48 + insets.bottom;
+
   // Create PanResponder for swipe navigation
   const panResponder = useRef(PanResponder.create({
     onStartShouldSetPanResponder: () => false,
@@ -126,7 +135,7 @@ export function MutationBrowserModal({
     enableGlitchEffects: true,
     styles: {},
     footer: footerNode,
-    footerHeight: 56,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/_jsx(View, {
       style: {
         flex: 1

package/lib/module/react-query/components/modals/MutationEditorModal.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { JsModal, useSafeAreaInsets, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 import { useGetMutationById } from "../../hooks/useSelectedMutation";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
-import { MutationEditorMode } from "../MutationEditorMode";
+import { MutationEditorMode, MutationEditorActionsFooter } from "../MutationEditorMode";
 import { useState, useCallback } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -24,6 +24,15 @@ export function MutationEditorModal({
   const handleModeChange = useCallback(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. MutationEditorActionsFooter pads its bottom with
+  // `insets.bottom + 8` when docked, so the reserve must grow by the same
+  // amount or the editor bottom hides behind the action bar.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 72 : 80 + insets.bottom;
   const renderHeaderContent = () => /*#__PURE__*/_jsx(ReactQueryModalHeader, {
     selectedMutation: selectedMutation,
     activeTab: "mutations",
@@ -32,6 +41,10 @@ export function MutationEditorModal({
   });
   const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : devToolsStorageKeys.reactQuery.mutationModal();
   if (!visible || !selectedMutation) return null;
+  const footerNode = /*#__PURE__*/_jsx(MutationEditorActionsFooter, {
+    selectedMutation: selectedMutation,
+    isFloatingMode: modalMode === "floating"
+  });
   return /*#__PURE__*/_jsx(JsModal, {
     visible: visible,
     onClose: onClose,
@@ -46,9 +59,12 @@ export function MutationEditorModal({
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
     styles: {},
+    footer: footerNode,
+    footerHeight: footerHeight,
     children: /*#__PURE__*/_jsx(MutationEditorMode, {
       selectedMutation: selectedMutation,
-      isFloatingMode: modalMode === "floating"
+      isFloatingMode: modalMode === "floating",
+      disableInternalFooter: true
     })
   });
 }

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, buoyColors } from "@buoy-gg/shared-ui";
+import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
 import QueryStatusCount from "../query-browser/QueryStatusCount";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -43,10 +43,12 @@ export function QueryBrowserFooter({
 const styles = StyleSheet.create({
   filterFooter: {
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
+    borderTopColor: night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 0,
-    backgroundColor: buoyColors.base,
+    // 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
   },

package/lib/module/react-query/components/modals/QueryBrowserModal.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useQueryClient } from "@tanstack/react-query";
-import { JsModal, ModalHeader, TabSelector } from "@buoy-gg/shared-ui";
+import { JsModal, useSafeAreaInsets, ModalHeader, TabSelector } from "@buoy-gg/shared-ui";
 import { useGetQueryByQueryKey } from "../../hooks/useSelectedQuery";
 import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
 import { QueryBrowserMode } from "../QueryBrowserMode";
@@ -9,7 +9,7 @@ import { QueryBrowserFooter } from "./QueryBrowserFooter";
 import { QueryFilterViewV3 } from "../QueryFilterViewV3";
 import { useState, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
-import { devToolsStorageKeys, persistentStorage, buoyColors } from "@buoy-gg/shared-ui";
+import { devToolsStorageKeys, persistentStorage } from "@buoy-gg/shared-ui";
 import useAllQueries from "../../hooks/useAllQueries";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -142,6 +142,15 @@ export function QueryBrowserModal({
   const handleModeChange = useCallback(mode => {
     setModalMode(mode);
   }, []);
+
+  // JsModal overlays the footer on the content and only reserves `footerHeight`
+  // of padding beneath it. QueryBrowserFooter grows by the safe-area inset when
+  // docked, so the reserve must track that or the list bottom hides behind the
+  // footer.
+  const insets = useSafeAreaInsets({
+    minBottom: 16
+  });
+  const footerHeight = modalMode === "floating" ? 56 : 48 + insets.bottom;
   if (!visible) return null;
   const renderHeaderContent = () => {
     // Filter view header with back button
@@ -202,7 +211,7 @@ export function QueryBrowserModal({
     disableScrollWrapper: !showFilterView,
     styles: {},
     footer: !showFilterView ? footerNode : undefined,
-    footerHeight: !showFilterView ? 56 : undefined,
+    footerHeight: !showFilterView ? footerHeight : undefined,
     children: /*#__PURE__*/_jsx(View, {
       style: styles.container,
       children: showFilterView ?
@@ -234,6 +243,7 @@ export function QueryBrowserModal({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   }
 });

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { ModalHeader, TabSelector, Search, X, Filter, Trash, buoyColors } from "@buoy-gg/shared-ui";
+import { ModalHeader, TabSelector, Search, X, Filter, Trash, night } from "@buoy-gg/shared-ui";
 import { useState, useRef, useEffect } from "react";
 import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { WifiToggle } from "../WifiToggle";
@@ -83,12 +83,12 @@ export function ReactQueryModalHeader({
         style: styles.headerSearchContainer,
         children: [/*#__PURE__*/_jsx(Search, {
           size: 14,
-          color: buoyColors.textSecondary
+          color: night.color.textSecondary
         }), /*#__PURE__*/_jsx(TextInput, {
           ref: searchInputRef,
           style: styles.headerSearchInput,
           placeholder: "Search query keys...",
-          placeholderTextColor: buoyColors.textMuted,
+          placeholderTextColor: night.color.textTertiary,
           value: searchText,
           onChangeText: handleSearch,
           onSubmitEditing: () => setIsSearchActive(false),
@@ -107,7 +107,7 @@ export function ReactQueryModalHeader({
           style: styles.headerSearchClear,
           children: /*#__PURE__*/_jsx(X, {
             size: 14,
-            color: buoyColors.textSecondary
+            color: night.color.textSecondary
           })
         }) : null]
       }) : showWifiToggle ? /*#__PURE__*/_jsxs(View, {
@@ -134,7 +134,7 @@ export function ReactQueryModalHeader({
         style: styles.headerActionButton,
         children: /*#__PURE__*/_jsx(Search, {
           size: 14,
-          color: buoyColors.textSecondary
+          color: night.color.textSecondary
         })
       }), onFilterPress && /*#__PURE__*/_jsx(TouchableOpacity, {
         "sentry-label": "ignore open filter",
@@ -142,7 +142,7 @@ export function ReactQueryModalHeader({
         style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
         children: /*#__PURE__*/_jsx(Filter, {
           size: 14,
-          color: hasActiveFilters ? buoyColors.primary : buoyColors.textSecondary
+          color: hasActiveFilters ? night.color.accent : night.color.textSecondary
         })
       }), onClearCache && /*#__PURE__*/_jsx(TouchableOpacity, {
         "sentry-label": "ignore clear cache",
@@ -151,7 +151,7 @@ export function ReactQueryModalHeader({
         accessibilityLabel: `Clear ${activeTab} cache`,
         children: /*#__PURE__*/_jsx(Trash, {
           size: 14,
-          color: buoyColors.warning
+          color: night.color.warning
         })
       })]
     })]
@@ -170,7 +170,7 @@ const styles = StyleSheet.create({
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     paddingHorizontal: 8,
     paddingVertical: 4,
@@ -180,7 +180,7 @@ const styles = StyleSheet.create({
   },
   headerSearchInput: {
     flex: 1,
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 13,
     fontFamily: "monospace",
     padding: 0,
@@ -195,9 +195,9 @@ const styles = StyleSheet.create({
     borderRadius: 4
   },
   activeFilterButton: {
-    backgroundColor: buoyColors.primary + "33"
+    backgroundColor: night.color.accentSoft
   },
   clearCacheButton: {
-    backgroundColor: buoyColors.warning + "20"
+    backgroundColor: night.color.warningSoft
   }
 });

package/lib/module/react-query/components/modals/SwipeIndicator.js

@@ -3,7 +3,7 @@
 import { View, StyleSheet, Animated } from "react-native";
 import { absoluteFill } from "@buoy-gg/shared-ui";
 import { useMemo } from "react";
-import { ChevronLeft, ChevronRight, buoyColors } from "@buoy-gg/shared-ui";
+import { ChevronLeft, ChevronRight, night } from "@buoy-gg/shared-ui";
 
 /**
  * Morphing swipe indicator – thin line ➜ pill ➜ circle with a pop-out cue at
@@ -129,7 +129,7 @@ export function SwipeIndicator({
         width: leftIndicatorWidth,
         height: INDICATOR_HEIGHT,
         borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: buoyColors.text + "E6",
+        backgroundColor: night.color.text + "E6",
         justifyContent: "center",
         alignItems: "center",
         opacity: leftIndicatorOpacity,
@@ -148,7 +148,7 @@ export function SwipeIndicator({
         },
         children: /*#__PURE__*/_jsx(ChevronLeft, {
           size: INDICATOR_HEIGHT * 0.6,
-          color: buoyColors.primary,
+          color: night.color.accent,
           strokeWidth: 3
         })
       })
@@ -157,7 +157,7 @@ export function SwipeIndicator({
         width: rightIndicatorWidth,
         height: INDICATOR_HEIGHT,
         borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: buoyColors.text + "E6",
+        backgroundColor: night.color.text + "E6",
         justifyContent: "center",
         alignItems: "center",
         opacity: rightIndicatorOpacity,
@@ -176,7 +176,7 @@ export function SwipeIndicator({
         },
         children: /*#__PURE__*/_jsx(ChevronRight, {
           size: INDICATOR_HEIGHT * 0.6,
-          color: buoyColors.primary,
+          color: night.color.accent,
           strokeWidth: 3
         })
       })

package/lib/module/react-query/components/query-browser/ActionButton.js

@@ -1,39 +1,39 @@
 "use strict";
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Clean, minimal color config matching React Query DevTools style
 const buttonConfigs = {
   refetch: {
-    dotColor: buoyColors.success,
-    textColor: buoyColors.text,
-    borderColor: buoyColors.border
+    dotColor: night.color.accent,
+    textColor: night.color.text,
+    borderColor: night.color.border
   },
   invalidate: {
-    dotColor: buoyColors.warning,
-    textColor: buoyColors.text,
-    borderColor: buoyColors.border
+    dotColor: night.color.warning,
+    textColor: night.color.text,
+    borderColor: night.color.border
   },
   reset: {
-    dotColor: buoyColors.textSecondary,
-    textColor: buoyColors.text,
-    borderColor: buoyColors.border
+    dotColor: night.color.textSecondary,
+    textColor: night.color.text,
+    borderColor: night.color.border
   },
   remove: {
-    dotColor: buoyColors.error,
-    textColor: buoyColors.error,
-    borderColor: buoyColors.error + "40"
+    dotColor: night.color.danger,
+    textColor: night.color.danger,
+    borderColor: night.color.danger + "40"
   },
   triggerLoading: {
-    dotColor: buoyColors.info,
-    textColor: buoyColors.info,
-    borderColor: buoyColors.info + "40"
+    dotColor: night.color.info,
+    textColor: night.color.info,
+    borderColor: night.color.info + "40"
   },
   triggerError: {
-    dotColor: buoyColors.error,
-    textColor: buoyColors.error,
-    borderColor: buoyColors.error + "40"
+    dotColor: night.color.danger,
+    textColor: night.color.danger,
+    borderColor: night.color.danger + "40"
   }
 };
 /** Clean, minimal action button matching React Query DevTools style. */
@@ -49,7 +49,7 @@ export default function ActionButton({
     disabled: disabled,
     onPress: onClick,
     style: [styles.button, {
-      borderColor: disabled ? buoyColors.border : config.borderColor,
+      borderColor: disabled ? night.color.border : config.borderColor,
       opacity: disabled ? 0.4 : 1
     }],
     activeOpacity: 0.7,
@@ -60,11 +60,11 @@ export default function ActionButton({
     },
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: disabled ? buoyColors.textMuted : config.dotColor
+        backgroundColor: disabled ? night.color.textTertiary : config.dotColor
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
-        color: disabled ? buoyColors.textMuted : config.textColor
+        color: disabled ? night.color.textTertiary : config.textColor
       }],
       children: text
     })]

package/lib/module/react-query/components/query-browser/ClearCacheButton.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { TouchableOpacity, StyleSheet } from "react-native";
-import { Trash, buoyColors } from "@buoy-gg/shared-ui";
+import { Trash, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Icon-only button for clearing either the query or mutation cache from the dev tools UI.
@@ -25,7 +25,7 @@ const ClearCacheButton = ({
     children: /*#__PURE__*/_jsx(Trash, {
       size: 16,
       strokeWidth: 2,
-      color: disabled ? buoyColors.textSecondary : buoyColors.warning
+      color: disabled ? night.color.textTertiary : night.color.warning
     })
   });
 };
@@ -34,16 +34,16 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: buoyColors.warning + "15",
+    backgroundColor: night.color.warningSoft,
     justifyContent: "center",
     alignItems: "center",
     borderWidth: 1,
-    borderColor: buoyColors.warning + "33"
+    borderColor: night.color.warning + "33"
   },
   disabledButton: {
     opacity: 0.5,
-    backgroundColor: buoyColors.textSecondary + "1A",
-    borderColor: buoyColors.textSecondary + "33"
+    backgroundColor: night.color.fill,
+    borderColor: night.color.border
   }
 });
 export default ClearCacheButton;