@buoy-gg/react-query 7.0.40 → 7.0.42

package/lib/module/preset.js

@@ -1,239 +1 @@
-"use strict";
-
-/**
- * Pre-configured React Query devtools for FloatingDevTools
- *
- * This preset provides a zero-config way to add React Query inspection to your dev tools.
- * Just import and add it to your apps array!
- *
- * @example
- * ```tsx
- * import { reactQueryToolPreset } from '@buoy-gg/react-query';
- *
- * const installedApps = [
- *   reactQueryToolPreset, // That's it!
- *   // ...other tools
- * ];
- * ```
- */
-
-import { QueryIcon } from "@buoy-gg/floating-tools-core";
-import { Wifi } from "@buoy-gg/shared-ui";
-import { ReactQueryDevToolsModal } from "./react-query/components/ReactQueryDevToolsModal";
-import { onlineManager } from "@tanstack/react-query";
-import { devToolsStorageKeys, persistentStorage } from "@buoy-gg/shared-ui";
-
-// Empty component for toggle-only mode
-const EmptyComponent = () => null;
-
-// Save WiFi state to storage
-const saveWifiState = async enabled => {
-  try {
-    await persistentStorage.setItem(devToolsStorageKeys.settings.wifiEnabled(), enabled.toString());
-  } catch (error) {
-    // Failed to save WiFi state
-  }
-};
-
-/**
- * Restore the persisted WiFi state into onlineManager on app load.
- *
- * The toggle is rendered as a `toggle-only` tool whose state lives in
- * `onlineManager`, not in a mounted React component. The `useWifiState` hook
- * only restores when its component (the modal) mounts, so without this the
- * persisted offline state is lost on reload and defaults back to online.
- * Running this at module load ensures the saved state is applied eagerly.
- */
-const restoreWifiState = async () => {
-  try {
-    const savedState = await persistentStorage.getItem(devToolsStorageKeys.settings.wifiEnabled());
-    if (savedState !== null) {
-      onlineManager.setOnline(savedState === "true");
-    }
-  } catch (error) {
-    // Failed to restore WiFi state
-  }
-};
-
-// Eagerly restore persisted WiFi state on import so offline mode survives reloads.
-restoreWifiState();
-import { useState, useEffect } from "react";
-
-/**
- * WiFi icon component - uses hooks to subscribe to onlineManager changes.
- *
- * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
- * This component MUST use useState and useEffect hooks to subscribe to onlineManager.
- * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
- * which allows hooks to work properly.
- *
- * If you remove the hooks or change this to read onlineManager.isOnline() directly,
- * the icon color will NOT update when the WiFi toggle is pressed.
- *
- * See: FloatingMenu.tsx (renders as <IconComponent />)
- * See: DialIcon.tsx (renders as <icon.iconComponent />)
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function WifiIcon({
-  size
-}) {
-  const [isOnline, setIsOnline] = useState(() => onlineManager.isOnline());
-  useEffect(() => {
-    const unsubscribe = onlineManager.subscribe(online => {
-      setIsOnline(online);
-    });
-    return unsubscribe;
-  }, []);
-  const color = isOnline ? "#10B981" : "#DC2626";
-  return /*#__PURE__*/_jsx(Wifi, {
-    size: size,
-    color: color
-  });
-}
-
-/**
- * Pre-configured React Query devtools for FloatingDevTools.
- * Includes:
- * - Query browser and inspector
- * - Mutation tracking
- * - Cache inspection
- * - Query invalidation
- * - Performance monitoring
- */
-export const reactQueryToolPreset = {
-  id: "query",
-  name: "QUERY",
-  description: "React Query inspector",
-  slot: "both",
-  icon: ({
-    size
-  }) => /*#__PURE__*/_jsx(QueryIcon, {
-    size: size
-  }),
-  component: ReactQueryDevToolsModal,
-  props: {
-    enableSharedModalDimensions: false
-  }
-};
-
-/**
- * Create a custom React Query devtools configuration.
- * Use this if you want to override default settings.
- *
- * @example
- * ```tsx
- * import { createReactQueryTool } from '@buoy-gg/react-query';
- *
- * const myQueryTool = createReactQueryTool({
- *   name: "TANSTACK",
- *   colorPreset: "purple",
- *   enableSharedModalDimensions: true,
- * });
- * ```
- */
-export function createReactQueryTool(options) {
-  return {
-    id: options?.id || "query",
-    name: options?.name || "QUERY",
-    description: options?.description || "React Query inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(QueryIcon, {
-      size: size
-    }),
-    component: ReactQueryDevToolsModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
-
-/**
- * Pre-configured WiFi toggle tool for FloatingDevTools.
- * Allows toggling React Query's online state to simulate offline scenarios.
- * Simple toggle - no modal needed!
- *
- * @example
- * ```tsx
- * import { wifiTogglePreset } from '@buoy-gg/react-query';
- *
- * const installedApps = [
- *   wifiTogglePreset, // That's it!
- *   // ...other tools
- * ];
- * ```
- */
-export const wifiTogglePreset = {
-  id: "query-wifi-toggle",
-  name: "WIFI",
-  description: "Toggle React Query online/offline state",
-  slot: "row",
-  icon: WifiIcon,
-  component: EmptyComponent,
-  props: {},
-  launchMode: "toggle-only",
-  onPress: () => {
-    const newState = !onlineManager.isOnline();
-    onlineManager.setOnline(newState);
-    saveWifiState(newState);
-  }
-};
-
-/**
- * Create a custom WiFi toggle tool configuration.
- * Use this if you want to override default settings.
- *
- * @example
- * ```tsx
- * import { createWifiToggleTool } from '@buoy-gg/react-query';
- *
- * const myWifiTool = createWifiToggleTool({
- *   name: "OFFLINE",
- *   onColor: "#10B981",
- *   offColor: "#DC2626",
- * });
- * ```
- */
-export function createWifiToggleTool(options) {
-  const onColor = options?.onColor || "#10B981";
-  const offColor = options?.offColor || "#DC2626";
-
-  /**
-   * Custom WiFi icon component with hooks - rendered as JSX component.
-   *
-   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
-   * This component MUST use useState and useEffect hooks to subscribe to onlineManager.
-   * See the comment on WifiIcon above for full explanation.
-   */
-  const CustomWifiIcon = ({
-    size
-  }) => {
-    const [isOnline, setIsOnline] = useState(() => onlineManager.isOnline());
-    useEffect(() => {
-      const unsubscribe = onlineManager.subscribe(online => {
-        setIsOnline(online);
-      });
-      return unsubscribe;
-    }, []);
-    return /*#__PURE__*/_jsx(Wifi, {
-      size: size,
-      color: isOnline ? onColor : offColor
-    });
-  };
-  return {
-    id: options?.id || "query-wifi-toggle",
-    name: options?.name || "WIFI",
-    description: options?.description || "Toggle React Query online/offline state",
-    slot: "row",
-    icon: CustomWifiIcon,
-    component: EmptyComponent,
-    props: {},
-    launchMode: "toggle-only",
-    onPress: () => {
-      const newState = !onlineManager.isOnline();
-      onlineManager.setOnline(newState);
-      saveWifiState(newState);
-    }
-  };
-}
+"use strict";import{QueryIcon as l}from"@buoy-gg/floating-tools-core";import{Wifi as a}from"@buoy-gg/shared-ui";import{ReactQueryDevToolsModal as u}from"./react-query/components/ReactQueryDevToolsModal";import{onlineManager as o}from"@tanstack/react-query";import{devToolsStorageKeys as f,persistentStorage as m}from"@buoy-gg/shared-ui";const d=()=>null;const p=async e=>{try{await m.setItem(f.settings.wifiEnabled(),e.toString())}catch(n){}};const I=async()=>{try{const e=await m.getItem(f.settings.wifiEnabled());if(e!==null){o.setOnline(e==="true")}}catch(e){}};I();import{useState as g,useEffect as y}from"react";import{jsx as i}from"react/jsx-runtime";function O({size:e}){const[n,r]=g(()=>o.isOnline());y(()=>{const t=o.subscribe(c=>{r(c)});return t},[]);const s=n?"#10B981":"#DC2626";return i(a,{size:e,color:s})}export const reactQueryToolPreset={id:"query",name:"QUERY",description:"React Query inspector",slot:"both",icon:({size:e})=>i(l,{size:e}),component:u,props:{enableSharedModalDimensions:false}};export function createReactQueryTool(e){return{id:e?.id||"query",name:e?.name||"QUERY",description:e?.description||"React Query inspector",slot:"both",icon:({size:n})=>i(l,{size:n}),component:u,props:{enableSharedModalDimensions:e?.enableSharedModalDimensions!==void 0?e.enableSharedModalDimensions:false}}}export const wifiTogglePreset={id:"query-wifi-toggle",name:"WIFI",description:"Toggle React Query online/offline state",slot:"row",icon:O,component:d,props:{},launchMode:"toggle-only",onPress:()=>{const e=!o.isOnline();o.setOnline(e);p(e)}};export function createWifiToggleTool(e){const n=e?.onColor||"#10B981";const r=e?.offColor||"#DC2626";const s=({size:t})=>{const[c,b]=g(()=>o.isOnline());y(()=>{const S=o.subscribe(w=>{b(w)});return S},[]);return i(a,{size:t,color:c?n:r})};return{id:e?.id||"query-wifi-toggle",name:e?.name||"WIFI",description:e?.description||"Toggle React Query online/offline state",slot:"row",icon:s,component:d,props:{},launchMode:"toggle-only",onPress:()=>{const t=!o.isOnline();o.setOnline(t);p(t)}}}

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

@@ -1,311 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { useQueryClient } from "@tanstack/react-query";
-import { useSafeAreaInsets, night, monoFont } from "@buoy-gg/shared-ui";
-import Explorer from "./query-browser/Explorer";
-import QueryDetails from "./query-browser/QueryDetails";
-import ActionButton from "./query-browser/ActionButton";
-import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
-import { useActionButtons } from "../hooks/useActionButtons";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Primary data editing surface displayed inside the React Query modal. Couples the editable
- * explorer, read-only insight panels, and action footer for the selected query.
- */
-export function DataEditorMode({
-  selectedQuery,
-  isFloatingMode,
-  disableInternalFooter = false,
-  queryVersion
-}) {
-  const insets = useSafeAreaInsets({
-    minBottom: 16
-  });
-  const queryClient = useQueryClient();
-  const actionButtons = useActionButtons(selectedQuery, queryClient, queryVersion);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
-      testID: "buoy-rq-detail-scroll",
-      accessibilityLabel: "Data editor mode",
-      accessibilityHint: "View data editor mode",
-      "sentry-label": "ignore data editor mode",
-      style: styles.explorerScrollContainer,
-      contentContainerStyle: [styles.explorerScrollContent, !disableInternalFooter && {
-        paddingBottom: 72
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.section,
-        children: [/*#__PURE__*/_jsx(DataExplorer, {
-          visible: !!selectedQuery.state.data,
-          selectedQuery: selectedQuery,
-          queryVersion: queryVersion
-        }), /*#__PURE__*/_jsx(DataEmptyState, {
-          visible: !selectedQuery.state.data,
-          selectedQuery: selectedQuery
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsx(QueryDetails, {
-          query: selectedQuery
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.section,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.queryExplorerContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            testID: "buoy-rq-query-explorer-header",
-            style: styles.queryExplorerHeader,
-            children: "Query Explorer"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.queryExplorerContent,
-            children: /*#__PURE__*/_jsx(DataViewer, {
-              title: "",
-              data: selectedQuery,
-              maxDepth: 10,
-              rawMode: true,
-              showTypeFilter: true,
-              initialExpanded: false
-            })
-          })]
-        })
-      })]
-    }), !disableInternalFooter && /*#__PURE__*/_jsx(View, {
-      style: [styles.actionFooter, {
-        paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
-      }],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.actionsRow,
-        children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          testID: `buoy-rq-action-${action.variant}`,
-          onClick: action.onPress,
-          text: action.label,
-          variant: action.variant,
-          disabled: action.disabled
-        }, index))
-      })
-    })]
-  });
-}
-
-// External footer component for sticky modal footer usage
-/**
- * Standalone footer variant that can be composed into sticky modal layouts while reusing the
- * standard action button arrangement.
- */
-export function DataEditorActionsFooter({
-  selectedQuery,
-  isFloatingMode,
-  queryVersion
-}) {
-  const insets = useSafeAreaInsets({
-    minBottom: 16
-  });
-  const queryClient = useQueryClient();
-  const actionButtons = useActionButtons(selectedQuery, queryClient, queryVersion);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.actionFooter, {
-      paddingBottom: isFloatingMode ? 0 : insets.bottom + 8
-    }],
-    children: /*#__PURE__*/_jsx(View, {
-      style: styles.actionsRow,
-      children: actionButtons.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-        testID: `buoy-rq-action-${action.variant}`,
-        onClick: action.onPress,
-        text: action.label,
-        variant: action.variant,
-        disabled: action.disabled
-      }, index))
-    })
-  });
-}
-function DataExplorer({
-  visible,
-  selectedQuery,
-  queryVersion = 0
-}) {
-  if (!visible) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.dataContainer,
-    children: [/*#__PURE__*/_jsx(Text, {
-      testID: "buoy-rq-data-header",
-      style: styles.dataHeader,
-      children: "Data Editor"
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.dataContent,
-      children: /*#__PURE__*/_jsx(Explorer, {
-        editable: true,
-        label: "Data",
-        value: selectedQuery.state.data,
-        defaultExpanded: ["Data"],
-        activeQuery: selectedQuery,
-        dataVersion: queryVersion
-      })
-    })]
-  });
-}
-function DataEmptyState({
-  visible,
-  selectedQuery
-}) {
-  if (!visible) return null;
-  const getEmptyStateContent = () => {
-    // Check if query is disabled first
-    if (selectedQuery.isDisabled()) {
-      return {
-        title: "Query Disabled",
-        description: "This query is disabled and won't automatically fetch. Enable the query or manually trigger a fetch to load data."
-      };
-    }
-    if (selectedQuery.state.status === "pending" || getQueryStatusLabel(selectedQuery) === "fetching") {
-      return {
-        title: selectedQuery.state.status === "pending" ? "Loading..." : "Refetching...",
-        description: "Please wait while the query is being executed."
-      };
-    }
-    if (selectedQuery.state.status === "error") {
-      return {
-        title: "Query Error",
-        description: selectedQuery.state.error?.message || "An error occurred while fetching data."
-      };
-    }
-    return {
-      title: "No Data Available",
-      description: "This query has no data to edit. Try refetching the query first."
-    };
-  };
-  const {
-    title,
-    description
-  } = getEmptyStateContent();
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
-    children: [/*#__PURE__*/_jsx(Text, {
-      testID: "buoy-rq-detail-empty-title",
-      style: styles.emptyTitle,
-      children: title
-    }), /*#__PURE__*/_jsx(Text, {
-      testID: "buoy-rq-detail-empty-description",
-      style: styles.emptyDescription,
-      children: description
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  // Explorer section
-  explorerScrollContainer: {
-    flex: 1
-  },
-  explorerScrollContent: {
-    paddingBottom: 16,
-    paddingHorizontal: 8,
-    flexGrow: 1
-  },
-  // Section layout matching QueryInformation
-  section: {
-    marginBottom: 16
-  },
-  // Empty states matching main dev tools
-  emptyState: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 18,
-    fontWeight: "600",
-    marginBottom: 8,
-    textAlign: "center"
-  },
-  emptyDescription: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    textAlign: "center",
-    lineHeight: 20,
-    maxWidth: 280
-  },
-  // Action footer - compact single row layout
-  actionFooter: {
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    paddingTop: 8,
-    paddingHorizontal: 12,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent",
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  actionsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  // Query Explorer styled container matching QueryDetails
-  queryExplorerContainer: {
-    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
-  },
-  queryExplorerHeader: {
-    backgroundColor: night.color.accent + "1A",
-    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
-  },
-  queryExplorerContent: {
-    padding: 8
-  },
-  // Data section with teal accent - editable/success theme
-  dataContainer: {
-    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,
-    marginTop: 8
-  },
-  dataHeader: {
-    backgroundColor: night.color.accent + "1A",
-    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
-  },
-  dataContent: {
-    padding: 8
-  }
-});
+"use strict";import{View as a,Text as m,StyleSheet as C,ScrollView as w}from"react-native";import{useQueryClient as h}from"@tanstack/react-query";import{useSafeAreaInsets as y,night as o,monoFont as f}from"@buoy-gg/shared-ui";import D from"./query-browser/Explorer";import q from"./query-browser/QueryDetails";import g from"./query-browser/ActionButton";import{getQueryStatusLabel as S}from"../utils/getQueryStatusLabel";import{useActionButtons as b}from"../hooks/useActionButtons";import{DataViewer as B}from"@buoy-gg/shared-ui/dataViewer";import{jsx as t,jsxs as c,Fragment as E}from"react/jsx-runtime";export function DataEditorMode({selectedQuery:r,isFloatingMode:i,disableInternalFooter:n=false,queryVersion:s}){const p=y({minBottom:16});const u=h();const l=b(r,u,s);return c(E,{children:[c(w,{testID:"buoy-rq-detail-scroll",accessibilityLabel:"Data editor mode",accessibilityHint:"View data editor mode","sentry-label":"ignore data editor mode",style:e.explorerScrollContainer,contentContainerStyle:[e.explorerScrollContent,!n&&{paddingBottom:72}],children:[c(a,{style:e.section,children:[t(v,{visible:!!r.state.data,selectedQuery:r,queryVersion:s}),t(T,{visible:!r.state.data,selectedQuery:r})]}),t(a,{style:e.section,children:t(q,{query:r})}),t(a,{style:e.section,children:c(a,{style:e.queryExplorerContainer,children:[t(m,{testID:"buoy-rq-query-explorer-header",style:e.queryExplorerHeader,children:"Query Explorer"}),t(a,{style:e.queryExplorerContent,children:t(B,{title:"",data:r,maxDepth:10,rawMode:true,showTypeFilter:true,initialExpanded:false})})]})})]}),!n&&t(a,{style:[e.actionFooter,{paddingBottom:i?0:p.bottom+8}],children:t(a,{style:e.actionsRow,children:l.map((d,x)=>t(g,{testID:`buoy-rq-action-${d.variant}`,onClick:d.onPress,text:d.label,variant:d.variant,disabled:d.disabled},x))})})]})}export function DataEditorActionsFooter({selectedQuery:r,isFloatingMode:i,queryVersion:n}){const s=y({minBottom:16});const p=h();const u=b(r,p,n);return t(a,{style:[e.actionFooter,{paddingBottom:i?0:s.bottom+8}],children:t(a,{style:e.actionsRow,children:u.map((l,d)=>t(g,{testID:`buoy-rq-action-${l.variant}`,onClick:l.onPress,text:l.label,variant:l.variant,disabled:l.disabled},d))})})}function v({visible:r,selectedQuery:i,queryVersion:n=0}){if(!r)return null;return c(a,{style:e.dataContainer,children:[t(m,{testID:"buoy-rq-data-header",style:e.dataHeader,children:"Data Editor"}),t(a,{style:e.dataContent,children:t(D,{editable:true,label:"Data",value:i.state.data,defaultExpanded:["Data"],activeQuery:i,dataVersion:n})})]})}function T({visible:r,selectedQuery:i}){if(!r)return null;const n=()=>{if(i.isDisabled()){return{title:"Query Disabled",description:"This query is disabled and won't automatically fetch. Enable the query or manually trigger a fetch to load data."}}if(i.state.status==="pending"||S(i)==="fetching"){return{title:i.state.status==="pending"?"Loading...":"Refetching...",description:"Please wait while the query is being executed."}}if(i.state.status==="error"){return{title:"Query Error",description:i.state.error?.message||"An error occurred while fetching data."}}return{title:"No Data Available",description:"This query has no data to edit. Try refetching the query first."}};const{title:s,description:p}=n();return c(a,{style:e.emptyState,children:[t(m,{testID:"buoy-rq-detail-empty-title",style:e.emptyTitle,children:s}),t(m,{testID:"buoy-rq-detail-empty-description",style:e.emptyDescription,children:p})]})}const e=C.create({explorerScrollContainer:{flex:1},explorerScrollContent:{paddingBottom:16,paddingHorizontal:8,flexGrow:1},section:{marginBottom:16},emptyState:{flex:1,justifyContent:"center",alignItems:"center",padding:32},emptyTitle:{color:o.color.text,fontSize:18,fontWeight:"600",marginBottom:8,textAlign:"center"},emptyDescription:{color:o.color.textSecondary,fontSize:14,textAlign:"center",lineHeight:20,maxWidth:280},actionFooter:{borderTopWidth:1,borderTopColor:o.color.border,paddingTop:8,paddingHorizontal:12,backgroundColor:"transparent",borderBottomLeftRadius:14,borderBottomRightRadius:14},actionsRow:{flexDirection:"row",alignItems:"center",gap:8},queryExplorerContainer:{minWidth:200,backgroundColor:o.color.surface,borderRadius:6,borderWidth:1,borderColor:o.color.accent+"4D",overflow:"hidden",shadowColor:o.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},queryExplorerHeader:{backgroundColor:o.color.accent+"1A",paddingHorizontal:12,paddingVertical:10,fontWeight:"600",fontSize:12,color:o.color.accent,borderBottomWidth:1,borderBottomColor:o.color.accent+"33",letterSpacing:.5,textTransform:"uppercase",fontFamily:f},queryExplorerContent:{padding:8},dataContainer:{minWidth:200,backgroundColor:o.color.surface,borderRadius:6,borderWidth:1,borderColor:o.color.accent+"4D",overflow:"hidden",shadowColor:o.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6,marginTop:8},dataHeader:{backgroundColor:o.color.accent+"1A",paddingHorizontal:12,paddingVertical:10,fontWeight:"600",fontSize:12,color:o.color.accent,borderBottomWidth:1,borderBottomColor:o.color.accent+"33",letterSpacing:.5,textTransform:"uppercase",fontFamily:f},dataContent:{padding:8}});

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

@@ -1,51 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { night, monoFont } from "@buoy-gg/shared-ui";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-/**
- * Compact badge showing filter status (e.g., "Showing 5 of 12")
- * Displayed below the header when filters are active
- */
-export function FilterStatusBadge({
-  totalCount,
-  filteredCount,
-  onPress
-}) {
-  // Don't show if no filtering is happening
-  if (filteredCount === totalCount) {
-    return null;
-  }
-  const content = /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs(Text, {
-      testID: "buoy-rq-filter-badge",
-      style: styles.text,
-      children: ["Showing ", filteredCount, " of ", totalCount]
-    })
-  });
-  if (onPress) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      testID: "buoy-rq-filter-badge-button",
-      accessibilityRole: "button",
-      accessibilityLabel: `Showing ${filteredCount} of ${totalCount}, open filters`,
-      onPress: onPress,
-      activeOpacity: 0.7,
-      children: content
-    });
-  }
-  return content;
-}
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 2
-  },
-  text: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{View as s,Text as c,StyleSheet as l,TouchableOpacity as a}from"react-native";import{night as f,monoFont as y}from"@buoy-gg/shared-ui";import{jsxs as b,jsx as n}from"react/jsx-runtime";export function FilterStatusBadge({totalCount:t,filteredCount:e,onPress:i}){if(e===t){return null}const r=n(s,{style:o.container,children:b(c,{testID:"buoy-rq-filter-badge",style:o.text,children:["Showing ",e," of ",t]})});if(i){return n(a,{testID:"buoy-rq-filter-badge-button",accessibilityRole:"button",accessibilityLabel:`Showing ${e} of ${t}, open filters`,onPress:i,activeOpacity:.7,children:r})}return r}const o=l.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:2},text:{fontSize:9,color:f.color.textTertiary,fontFamily:y}});

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

@@ -1,47 +1 @@
-"use strict";
-
-import { View, StyleSheet } from "react-native";
-import MutationsList from "./query-browser/MutationsList";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Layout wrapper that renders the mutation list alongside selection handling glue logic used by
- * the React Query modal.
- */
-export function MutationBrowserMode({
-  selectedMutation,
-  onMutationSelect,
-  activeFilter,
-  searchText = ""
-}) {
-  // Convert function to Dispatch compatible format
-  const handleMutationSelect = action => {
-    if (typeof action === "function") {
-      onMutationSelect(action(selectedMutation));
-    } else {
-      onMutationSelect(action);
-    }
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.mutationListContainer,
-    children: /*#__PURE__*/_jsx(MutationsList, {
-      selectedMutation: selectedMutation,
-      setSelectedMutation: handleMutationSelect,
-      activeFilter: activeFilter,
-      searchText: searchText,
-      hideInfoPanel: true,
-      contentContainerStyle: styles.mutationListContent
-    })
-  });
-}
-const styles = StyleSheet.create({
-  mutationListContainer: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  mutationListContent: {
-    padding: 8,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  }
-});
+"use strict";import{View as u,StyleSheet as l}from"react-native";import c from"./query-browser/MutationsList";import{jsx as o}from"react/jsx-runtime";export function MutationBrowserMode({selectedMutation:e,onMutationSelect:n,activeFilter:i,searchText:s=""}){const a=t=>{if(typeof t==="function"){n(t(e))}else{n(t)}};return o(u,{style:r.mutationListContainer,children:o(c,{selectedMutation:e,setSelectedMutation:a,activeFilter:i,searchText:s,hideInfoPanel:true,contentContainerStyle:r.mutationListContent})})}const r=l.create({mutationListContainer:{flex:1,backgroundColor:"transparent"},mutationListContent:{padding:8,backgroundColor:"transparent"}});