@buoy-gg/react-query 7.0.41 → 7.0.43

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

@@ -1,119 +1 @@
-"use strict";
-
-import { View, Text, ScrollView, StyleSheet } from "react-native";
-import { displayValue, night, monoFont } from "@buoy-gg/shared-ui";
-import MutationDetailsChips from "./MutationDetailsChips";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Displays high-level mutation metadata such as status, retries, and timestamps.
- */
-export default function MutationDetails({
-  selectedMutation
-}) {
-  if (selectedMutation === undefined) {
-    return null;
-  }
-  const submittedAt = new Date(selectedMutation.state.submittedAt).toLocaleTimeString();
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.minWidth,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.headerText,
-      children: "Mutation Details"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [/*#__PURE__*/_jsx(ScrollView, {
-        "sentry-label": "ignore devtools mutation details scroll",
-        horizontal: true,
-        style: styles.flex1,
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-rq-mutation-detail-key",
-          style: styles.flexWrap,
-          children: `${selectedMutation.options.mutationKey ? displayValue(selectedMutation.options.mutationKey, true) : "No mutationKey found"}`
-        })
-      }), /*#__PURE__*/_jsx(MutationDetailsChips, {
-        status: selectedMutation.state.status,
-        testID: "buoy-rq-mutation-detail-status"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.labelText,
-        children: "Submitted At:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.valueText,
-        children: submittedAt
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  minWidth: {
-    minWidth: 200,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.accent + "4D",
-    overflow: "hidden",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  headerText: {
-    backgroundColor: night.color.accent + "15",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontWeight: "600",
-    fontSize: 12,
-    color: night.color.accent,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.accent + "33",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.separator
-  },
-  flex1: {
-    flex: 1,
-    marginRight: 8
-  },
-  flexWrap: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    lineHeight: 18,
-    flexShrink: 1,
-    backgroundColor: night.color.accent + "15",
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: night.color.accent + "4D"
-  },
-  labelText: {
-    fontSize: 10,
-    color: night.color.textSecondary,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: monoFont
-  },
-  valueText: {
-    fontSize: 12,
-    color: night.color.text,
-    fontWeight: "500",
-    fontVariant: ["tabular-nums"],
-    fontFamily: monoFont
-  }
-});
+"use strict";import{View as a,Text as i,ScrollView as s,StyleSheet as c}from"react-native";import{displayValue as u,night as t,monoFont as l}from"@buoy-gg/shared-ui";import f from"./MutationDetailsChips";import{jsx as e,jsxs as n}from"react/jsx-runtime";export default function h({selectedMutation:r}){if(r===void 0){return null}const d=new Date(r.state.submittedAt).toLocaleTimeString();return n(a,{style:o.minWidth,children:[e(i,{style:o.headerText,children:"Mutation Details"}),n(a,{style:o.row,children:[e(s,{"sentry-label":"ignore devtools mutation details scroll",horizontal:true,style:o.flex1,children:e(i,{testID:"buoy-rq-mutation-detail-key",style:o.flexWrap,children:`${r.options.mutationKey?u(r.options.mutationKey,true):"No mutationKey found"}`})}),e(f,{status:r.state.status,testID:"buoy-rq-mutation-detail-status"})]}),n(a,{style:o.row,children:[e(i,{style:o.labelText,children:"Submitted At:"}),e(i,{style:o.valueText,children:d})]})]})}const o=c.create({minWidth:{minWidth:200,backgroundColor:t.color.surface,borderRadius:6,borderWidth:1,borderColor:t.color.accent+"4D",overflow:"hidden",shadowColor:t.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},headerText:{backgroundColor:t.color.accent+"15",paddingHorizontal:12,paddingVertical:10,fontWeight:"600",fontSize:12,color:t.color.accent,borderBottomWidth:1,borderBottomColor:t.color.accent+"33",letterSpacing:.5,textTransform:"uppercase",fontFamily:l},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:t.color.separator},flex1:{flex:1,marginRight:8},flexWrap:{fontSize:12,color:t.color.text,fontFamily:l,lineHeight:18,flexShrink:1,backgroundColor:t.color.accent+"15",paddingHorizontal:8,paddingVertical:4,borderRadius:4,borderWidth:1,borderColor:t.color.accent+"4D"},labelText:{fontSize:10,color:t.color.textSecondary,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:l},valueText:{fontSize:12,color:t.color.text,fontWeight:"500",fontVariant:["tabular-nums"],fontFamily:l}});

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

@@ -1,64 +1 @@
-"use strict";
-
-import { Text, View, StyleSheet } from "react-native";
-import { buoyColors, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-const backgroundColors = {
-  success: buoyColors.success + "15",
-  error: buoyColors.error + "15",
-  pending: buoyColors.primary + "15",
-  idle: buoyColors.textMuted + "1A"
-};
-const borderColors = {
-  success: buoyColors.success + "33",
-  error: buoyColors.error + "33",
-  pending: buoyColors.primary + "33",
-  idle: buoyColors.textMuted + "33"
-};
-const textColors = {
-  success: buoyColors.success,
-  error: buoyColors.error,
-  pending: buoyColors.primary,
-  idle: buoyColors.textMuted
-};
-/**
- * Small status chip used in mutation detail views that adapts styling to the mutation status.
- */
-export default function QueryDetailsChip({
-  status,
-  testID
-}) {
-  const statusToColor = status;
-  const backgroundColor = backgroundColors[statusToColor];
-  const borderColor = borderColors[statusToColor];
-  const textColor = textColors[statusToColor];
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, {
-      backgroundColor,
-      borderColor
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      testID: testID,
-      style: [styles.text, {
-        color: textColor
-      }],
-      children: status
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderWidth: 1,
-    borderRadius: 6,
-    alignSelf: "flex-start"
-  },
-  text: {
-    fontSize: 11,
-    fontWeight: "600",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{Text as d,View as a,StyleSheet as u}from"react-native";import{buoyColors as r,monoFont as p}from"@buoy-gg/shared-ui";import{jsx as o}from"react/jsx-runtime";const x={success:r.success+"15",error:r.error+"15",pending:r.primary+"15",idle:r.textMuted+"1A"};const m={success:r.success+"33",error:r.error+"33",pending:r.primary+"33",idle:r.textMuted+"33"};const f={success:r.success,error:r.error,pending:r.primary,idle:r.textMuted};export default function g({status:t,testID:n}){const e=t;const c=x[e];const i=m[e];const l=f[e];return o(a,{style:[s.container,{backgroundColor:c,borderColor:i}],children:o(d,{testID:n,style:[s.text,{color:l}],children:t})})}const s=u.create({container:{paddingHorizontal:8,paddingVertical:4,borderWidth:1,borderRadius:6,alignSelf:"flex-start"},text:{fontSize:11,fontWeight:"600",textTransform:"uppercase",letterSpacing:.5,fontFamily:p}});

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

@@ -1,113 +1 @@
-"use strict";
-
-import DataExplorer from "./Explorer";
-import { ScrollView, Text, View, StyleSheet } from "react-native";
-import MutationDetails from "./MutationDetails";
-import { night, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Detailed information block for a selected mutation within the modal experience. */
-export default function MutationInformation({
-  selectedMutation
-}) {
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    "sentry-label": "ignore devtools mutation information scroll",
-    style: styles.flex1,
-    contentContainerStyle: styles.scrollContent,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.section,
-      children: /*#__PURE__*/_jsx(MutationDetails, {
-        selectedMutation: selectedMutation
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.textHeader,
-        children: "Variables Details"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.padding,
-        children: /*#__PURE__*/_jsx(DataExplorer, {
-          label: "Variables",
-          value: selectedMutation?.state.variables,
-          defaultExpanded: ["Variables"]
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.textHeader,
-        children: "Context Details"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.padding,
-        children: /*#__PURE__*/_jsx(DataExplorer, {
-          label: "Context",
-          value: selectedMutation?.state.context,
-          defaultExpanded: ["Context"]
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.textHeader,
-        children: "Data Explorer"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.padding,
-        children: /*#__PURE__*/_jsx(DataExplorer, {
-          label: "Data",
-          defaultExpanded: ["Data"],
-          value: selectedMutation?.state.data
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.textHeader,
-        children: "Mutations Explorer"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.padding,
-        children: /*#__PURE__*/_jsx(DataExplorer, {
-          label: "Mutation",
-          defaultExpanded: ["Mutation"],
-          value: selectedMutation
-        })
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  flex1: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  scrollContent: {
-    paddingBottom: 16,
-    paddingHorizontal: 8
-  },
-  section: {
-    marginBottom: 16
-  },
-  textHeader: {
-    textAlign: "left",
-    backgroundColor: night.color.accent + "15",
-    padding: 12,
-    fontSize: 12,
-    fontWeight: "700",
-    color: night.color.accent,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.accent + "33",
-    fontFamily: monoFont,
-    letterSpacing: 1,
-    textTransform: "uppercase"
-  },
-  padding: {
-    padding: 12,
-    backgroundColor: night.color.surface,
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderTopWidth: 0
-  }
-});
+"use strict";import n from"./Explorer";import{ScrollView as d,Text as i,View as o,StyleSheet as s}from"react-native";import c from"./MutationDetails";import{night as l,monoFont as p}from"@buoy-gg/shared-ui";import{jsx as e,jsxs as a}from"react/jsx-runtime";export default function x({selectedMutation:r}){return a(d,{"sentry-label":"ignore devtools mutation information scroll",style:t.flex1,contentContainerStyle:t.scrollContent,children:[e(o,{style:t.section,children:e(c,{selectedMutation:r})}),a(o,{style:t.section,children:[e(i,{style:t.textHeader,children:"Variables Details"}),e(o,{style:t.padding,children:e(n,{label:"Variables",value:r?.state.variables,defaultExpanded:["Variables"]})})]}),a(o,{style:t.section,children:[e(i,{style:t.textHeader,children:"Context Details"}),e(o,{style:t.padding,children:e(n,{label:"Context",value:r?.state.context,defaultExpanded:["Context"]})})]}),a(o,{style:t.section,children:[e(i,{style:t.textHeader,children:"Data Explorer"}),e(o,{style:t.padding,children:e(n,{label:"Data",defaultExpanded:["Data"],value:r?.state.data})})]}),a(o,{style:t.section,children:[e(i,{style:t.textHeader,children:"Mutations Explorer"}),e(o,{style:t.padding,children:e(n,{label:"Mutation",defaultExpanded:["Mutation"],value:r})})]})]})}const t=s.create({flex1:{flex:1,backgroundColor:"transparent"},scrollContent:{paddingBottom:16,paddingHorizontal:8},section:{marginBottom:16},textHeader:{textAlign:"left",backgroundColor:l.color.accent+"15",padding:12,fontSize:12,fontWeight:"700",color:l.color.accent,borderTopLeftRadius:8,borderTopRightRadius:8,borderBottomWidth:1,borderBottomColor:l.color.accent+"33",fontFamily:p,letterSpacing:1,textTransform:"uppercase"},padding:{padding:12,backgroundColor:l.color.surface,borderBottomLeftRadius:8,borderBottomRightRadius:8,borderWidth:1,borderColor:l.color.border,borderTopWidth:0}});

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

@@ -1,79 +1 @@
-"use strict";
-
-import { ChipStrip, useChipTap } from "@buoy-gg/shared-ui";
-import QueryStatus from "./QueryStatus";
-import { useMutationStatusCounts } from "../../hooks/useQueryStatusCounts";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Horizontal status filter bar tailored for mutations. Integrates scroll detection to avoid
- * accidental filter toggles while panning.
- */
-const MutationStatusCount = ({
-  activeFilter,
-  onFilterChange,
-  size = "default"
-}) => {
-  const {
-    pending,
-    success,
-    error,
-    paused
-  } = useMutationStatusCounts();
-  const {
-    scrollProps,
-    onTouchStart: handleTouchStart,
-    isTap
-  } = useChipTap();
-  const handleFilterClick = (filter, event) => {
-    if (!isTap(event)) return;
-    if (onFilterChange) {
-      onFilterChange(activeFilter === filter ? null : filter);
-    }
-  };
-  return /*#__PURE__*/_jsxs(ChipStrip, {
-    scrollProps: scrollProps,
-    sentryLabel: "ignore devtools mutation status count scroll",
-    children: [/*#__PURE__*/_jsx(QueryStatus, {
-      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__*/_jsx(QueryStatus, {
-      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__*/_jsx(QueryStatus, {
-      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__*/_jsx(QueryStatus, {
-      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
-    })]
-  });
-};
-export default MutationStatusCount;
+"use strict";import{ChipStrip as m,useChipTap as S}from"@buoy-gg/shared-ui";import u from"./QueryStatus";import{useMutationStatusCounts as P}from"../../hooks/useQueryStatusCounts";import{jsx as n,jsxs as T}from"react/jsx-runtime";const f=({activeFilter:o,onFilterChange:c,size:t="default"})=>{const{pending:a,success:l,error:i,paused:p}=P();const{scrollProps:d,onTouchStart:r,isTap:b}=S();const e=(s,h)=>{if(!b(h))return;if(c){c(o===s?null:s)}};return T(m,{scrollProps:d,sentryLabel:"ignore devtools mutation status count scroll",children:[n(u,{label:"Pending",color:"blue",count:a,isActive:o==="pending",onPress:s=>e("pending",s),onTouchStart:r,testID:"buoy-rq-mstatus-pending",showLabel:true,size:t}),n(u,{label:"Success",color:"green",count:l,isActive:o==="success",onPress:s=>e("success",s),onTouchStart:r,testID:"buoy-rq-mstatus-success",showLabel:true,size:t}),n(u,{label:"Error",color:"red",count:i,isActive:o==="error",onPress:s=>e("error",s),onTouchStart:r,testID:"buoy-rq-mstatus-error",showLabel:true,size:t}),n(u,{label:"Paused",color:"purple",count:p,isActive:o==="paused",onPress:s=>e("paused",s),onTouchStart:r,testID:"buoy-rq-mstatus-paused",showLabel:true,size:t})]})};export default f;

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

@@ -1,215 +1 @@
-"use strict";
-
-import { useState, useRef, useMemo, useCallback } from "react";
-import { View, StyleSheet, PanResponder, Animated, Dimensions, FlatList } from "react-native";
-import MutationButton from "./MutationButton";
-import MutationInformation from "./MutationInformation";
-import useAllMutations from "../../hooks/useAllMutations";
-import { night, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Virtualized list of mutations with filtering and selection support for the mutation browser.
- */
-export default function MutationsList({
-  selectedMutation,
-  setSelectedMutation,
-  activeFilter,
-  hideInfoPanel = false,
-  contentContainerStyle,
-  searchText = ""
-}) {
-  const {
-    mutations: allmutations
-  } = useAllMutations();
-
-  // 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 = 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 = 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 = useRef(new Animated.Value(defaultInfoHeight)).current;
-  const [, setCurrentInfoHeight] = useState(defaultInfoHeight);
-  const currentInfoHeightRef = useRef(defaultInfoHeight);
-
-  // Pan responder for dragging the mutation information panel
-  const infoPanResponder = useRef(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;
-      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 = useCallback(({
-    item
-  }) => /*#__PURE__*/_jsx(MutationButton, {
-    selected: selectedMutation,
-    setSelectedMutation: setSelectedMutation,
-    mutation: item
-  }), [selectedMutation, setSelectedMutation]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [filteredMutations.length > 0 ? /*#__PURE__*/_jsx(View, {
-      style: styles.listWrapper,
-      children: /*#__PURE__*/_jsx(FlatList, {
-        "sentry-label": "ignore devtools mutations list",
-        testID: "buoy-rq-mutation-list",
-        data: filteredMutations,
-        renderItem: renderMutation,
-        keyExtractor: (item, index) => `${item.mutationId}-${item.state.submittedAt}-${item.state.status}-${index}`,
-        inverted: true,
-        showsVerticalScrollIndicator: true
-        // See QueryBrowser: e2e bundles keep every cell mounted so Detox's
-        // hittability check doesn't reject an on-screen row as clipped.
-        ,
-        removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-        contentContainerStyle: contentContainerStyle || styles.listContent,
-        initialNumToRender: 10,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
-      })
-    }) : /*#__PURE__*/_jsx(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__*/_jsxs(Animated.View, {
-      style: [styles.mutationInfo, {
-        height: infoHeightAnim
-      }],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.dragHandle,
-        ...infoPanResponder.panHandlers,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.dragIndicator
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.mutationInfoContent,
-        children: /*#__PURE__*/_jsx(MutationInformation, {
-          selectedMutation: selectedMutation
-        })
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  listWrapper: {
-    flex: 1
-  },
-  listContent: {
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent",
-    paddingHorizontal: 8,
-    paddingTop: 8
-  },
-  mutationInfo: {
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  dragHandle: {
-    height: 20,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: night.color.surface,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border
-  },
-  dragIndicator: {
-    width: 40,
-    height: 4,
-    backgroundColor: night.color.placeholder,
-    borderRadius: 2
-  },
-  mutationInfoContent: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32,
-    backgroundColor: night.color.surface,
-    margin: 16,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  emptyText: {
-    color: night.color.textTertiary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: monoFont,
-    letterSpacing: 0.5
-  }
-});
+"use strict";import{useState as E,useRef as g,useMemo as L,useCallback as T}from"react";import{View as d,StyleSheet as v,PanResponder as B,Animated as y,Dimensions as W,FlatList as $}from"react-native";import D from"./MutationButton";import N from"./MutationInformation";import _ from"../../hooks/useAllMutations";import{night as r,ToolEmptyState as z,monoFont as q}from"@buoy-gg/shared-ui";import{jsx as n,jsxs as H}from"react/jsx-runtime";export default function K({selectedMutation:c,setSelectedMutation:b,activeFilter:s,hideInfoPanel:R=false,contentContainerStyle:S,searchText:m=""}){const{mutations:C}=_();const k=t=>{if(t.state.isPaused)return"paused";const e=t.state.status;return e};const I=L(()=>{let t=C;if(s){t=t.filter(e=>{const o=k(e);return o===s})}if(m){const e=m.toLowerCase();t=t.filter(o=>{const l=o.options.mutationKey;if(!l)return false;const V=Array.isArray(l)?l:[l];const j=V.filter(h=>h!=null).map(h=>String(h)).join(" ").toLowerCase();return j.includes(e)})}return t},[C,s,m]);const M=W.get("window").height;const f=M*.4;const x=150;const w=M*.7;const i=g(new y.Value(f)).current;const[,p]=E(f);const u=g(f);const P=g(B.create({onMoveShouldSetPanResponder:(t,e)=>{return Math.abs(e.dy)>Math.abs(e.dx)&&Math.abs(e.dy)>10},onPanResponderGrant:()=>{i.stopAnimation(t=>{p(t);u.current=t;i.setValue(t)})},onPanResponderMove:(t,e)=>{const o=u.current-e.dy;const l=Math.max(x,Math.min(w,o));i.setValue(l)},onPanResponderRelease:(t,e)=>{const o=Math.max(x,Math.min(w,u.current-e.dy));p(o);u.current=o;y.timing(i,{toValue:o,duration:200,useNativeDriver:false}).start(()=>{i.setValue(o);p(o);u.current=o})}})).current;const A=T(({item:t})=>n(D,{selected:c,setSelectedMutation:b,mutation:t}),[c,b]);return H(d,{style:a.container,children:[I.length>0?n(d,{style:a.listWrapper,children:n($,{"sentry-label":"ignore devtools mutations list",testID:"buoy-rq-mutation-list",data:I,renderItem:A,keyExtractor:(t,e)=>`${t.mutationId}-${t.state.submittedAt}-${t.state.status}-${e}`,inverted:true,showsVerticalScrollIndicator:true,removeClippedSubviews:!(typeof process!=="undefined"&&process.env?.EXPO_PUBLIC_E2E),contentContainerStyle:S||a.listContent,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false})}):n(z,{testID:"buoy-rq-mutations-empty",otto:s?"filtering":"scanning",title:"No mutations found",message:s?`No ${s} mutations. Pick another status to see the rest.`:"Mutations run through useMutation will appear here."}),c&&!R&&H(y.View,{style:[a.mutationInfo,{height:i}],children:[n(d,{style:a.dragHandle,...P.panHandlers,children:n(d,{style:a.dragIndicator})}),n(d,{style:a.mutationInfoContent,children:n(N,{selectedMutation:c})})]})]})}const a=v.create({container:{flex:1,backgroundColor:"transparent"},listWrapper:{flex:1},listContent:{backgroundColor:"transparent",paddingHorizontal:8,paddingTop:8},mutationInfo:{borderTopWidth:1,borderTopColor:r.color.border,backgroundColor:"transparent"},dragHandle:{height:20,justifyContent:"center",alignItems:"center",backgroundColor:r.color.surface,borderBottomWidth:1,borderBottomColor:r.color.border},dragIndicator:{width:40,height:4,backgroundColor:r.color.placeholder,borderRadius:2},mutationInfoContent:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,justifyContent:"center",alignItems:"center",padding:32,backgroundColor:r.color.surface,margin:16,borderRadius:8,borderWidth:1,borderColor:r.color.border},emptyText:{color:r.color.textTertiary,fontSize:14,textAlign:"center",fontFamily:q,letterSpacing:.5}});

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

@@ -1,50 +1 @@
-"use strict";
-
-import { TouchableOpacity, StyleSheet } from "react-native";
-import { Wifi, buoyColors } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Small toggle used in the query browser to mock offline/online behavior.
- */
-const NetworkToggleButton = ({
-  isOffline,
-  onToggle
-}) => {
-  return /*#__PURE__*/_jsx(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__*/_jsx(Wifi, {
-      size: 16,
-      color: buoyColors.error,
-      strokeWidth: 2
-    }) : /*#__PURE__*/_jsx(Wifi, {
-      size: 16,
-      color: buoyColors.success,
-      strokeWidth: 2
-    })
-  });
-};
-const styles = 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)"
-  }
-});
-export default NetworkToggleButton;
+"use strict";import{TouchableOpacity as c,StyleSheet as l}from"react-native";import{Wifi as e,buoyColors as r}from"@buoy-gg/shared-ui";import{jsx as t}from"react/jsx-runtime";const n=({isOffline:o,onToggle:s})=>{return t(c,{"sentry-label":"ignore devtools network toggle button",style:[i.button,o&&i.offlineButton],onPress:s,activeOpacity:.7,accessibilityLabel:o?"Unset offline mocking behavior":"Mock offline behavior",accessibilityRole:"button",accessibilityState:{selected:o},children:o?t(e,{size:16,color:r.error,strokeWidth:2}):t(e,{size:16,color:r.success,strokeWidth:2})})};const i=l.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)"}});export default n;