@buoy-gg/events 2.1.10 → 2.1.13

package/lib/commonjs/components/EventsCopySettingsView.js

@@ -266,7 +266,9 @@ function EventsCopySettingsView({
       }), settings.format === "json" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
         data: JSON.parse(exportText),
         title: "",
-        showTypeFilter: false
+        showTypeFilter: true,
+        rawMode: true,
+        initialExpanded: true
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         children: [settings.format === "mermaid" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.mermaidHint,

package/lib/commonjs/components/ReactQueryEventDetail.js

@@ -184,7 +184,8 @@ const ReactQueryEventDetail = exports.ReactQueryEventDetail = /*#__PURE__*/(0, _
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
             data: reactQueryEvent.mutationVariables,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -203,7 +204,8 @@ const ReactQueryEventDetail = exports.ReactQueryEventDetail = /*#__PURE__*/(0, _
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
             data: isQuery ? reactQueryEvent.queryData : reactQueryEvent.mutationData,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -220,7 +222,8 @@ const ReactQueryEventDetail = exports.ReactQueryEventDetail = /*#__PURE__*/(0, _
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             title: "",
             data: isQuery ? reactQueryEvent.queryError : reactQueryEvent.mutationError,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -238,6 +241,7 @@ const ReactQueryEventDetail = exports.ReactQueryEventDetail = /*#__PURE__*/(0, _
             title: "",
             data: reactQueryEvent,
             showTypeFilter: true,
+            rawMode: true,
             initialExpanded: false
           })
         })]

package/lib/commonjs/components/UnifiedEventDetail.js

@@ -27,7 +27,9 @@ function tryLoadOptionalDetailComponents() {
     StorageEventDetailContent: null,
     ReduxActionDetailContent: null,
     NetworkEventDetailView: null,
-    RenderDetailView: null
+    RenderDetailView: null,
+    ZustandStateDetailContent: null,
+    JotaiAtomDetailContent: null
   };
 
   // Try to load storage detail component
@@ -65,6 +67,24 @@ function tryLoadOptionalDetailComponents() {
   } catch {
     // Optional dependency not installed
   }
+
+  // Try to load zustand detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const zustand = require("@buoy-gg/zustand");
+    components.ZustandStateDetailContent = zustand.ZustandStateDetailContent;
+  } catch {
+    // Optional dependency not installed
+  }
+
+  // Try to load jotai detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const jotai = require("@buoy-gg/jotai");
+    components.JotaiAtomDetailContent = jotai.JotaiAtomDetailContent;
+  } catch {
+    // Optional dependency not installed
+  }
   return components;
 }
 
@@ -111,6 +131,14 @@ const SOURCE_CONFIG = {
     label: "Route",
     color: "#06B6D4"
   },
+  zustand: {
+    label: "Zustand",
+    color: "#764ABC"
+  },
+  jotai: {
+    label: "Jotai",
+    color: "#14B8A6"
+  },
   render: {
     label: "Render",
     color: "#F472B6"
@@ -229,6 +257,42 @@ const UnifiedEventDetail = exports.UnifiedEventDetail = /*#__PURE__*/(0, _react.
     });
   }
 
+  // For Zustand events, use the shared ZustandStateDetailContent if available
+  if (event.source === "zustand" && optionalComponents.ZustandStateDetailContent) {
+    const {
+      ZustandStateDetailContent
+    } = optionalComponents;
+    const zustandChange = event.originalEvent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandStateDetailContent, {
+        change: zustandChange,
+        changes: [zustandChange],
+        selectedIndex: 0,
+        onIndexChange: () => {},
+        disableInternalFooter: true
+      })
+    });
+  }
+
+  // For Jotai events, use the shared JotaiAtomDetailContent if available
+  if (event.source === "jotai" && optionalComponents.JotaiAtomDetailContent) {
+    const {
+      JotaiAtomDetailContent
+    } = optionalComponents;
+    const jotaiChange = event.originalEvent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiAtomDetailContent, {
+        change: jotaiChange,
+        changes: [jotaiChange],
+        selectedIndex: 0,
+        onIndexChange: () => {},
+        disableInternalFooter: true
+      })
+    });
+  }
+
   // For render events, use the RenderDetailView if available
   if (event.source === "render" && optionalComponents.RenderDetailView) {
     const {
@@ -309,7 +373,9 @@ const UnifiedEventDetail = exports.UnifiedEventDetail = /*#__PURE__*/(0, _react.
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
             data: getEventData(),
             title: "",
-            showTypeFilter: false
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true
           })
         })]
       })]

package/lib/commonjs/components/UnifiedEventItem.js

@@ -26,7 +26,9 @@ function tryLoadOptionalComponents() {
     getValueType: null,
     ReduxActionItem: null,
     NetworkEventItemCompact: null,
-    RouteEventItemCompact: null
+    RouteEventItemCompact: null,
+    ZustandStateChangeItem: null,
+    JotaiAtomChangeItem: null
   };
 
   // Try to load storage components
@@ -65,6 +67,24 @@ function tryLoadOptionalComponents() {
   } catch {
     // Optional dependency not installed
   }
+
+  // Try to load zustand components
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const zustand = require("@buoy-gg/zustand");
+    components.ZustandStateChangeItem = zustand.ZustandStateChangeItem;
+  } catch {
+    // Optional dependency not installed
+  }
+
+  // Try to load jotai components
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const jotai = require("@buoy-gg/jotai");
+    components.JotaiAtomChangeItem = jotai.JotaiAtomChangeItem;
+  } catch {
+    // Optional dependency not installed
+  }
   return components;
 }
 
@@ -111,6 +131,14 @@ const SOURCE_CONFIG = {
     label: "Route",
     color: "#06B6D4" // Cyan
   },
+  zustand: {
+    label: "Zustand",
+    color: "#764ABC" // Purple
+  },
+  jotai: {
+    label: "Jotai",
+    color: "#14B8A6" // Teal
+  },
   render: {
     label: "Render",
     color: "#F472B6" // Pink
@@ -182,6 +210,8 @@ const SOURCE_BADGE_LABELS = {
   "react-query-query": "QUERY",
   "react-query-mutation": "MUTATION",
   route: "ROUTE",
+  zustand: "ZUSTAND",
+  jotai: "JOTAI",
   render: "RENDER"
 };
 
@@ -293,6 +323,34 @@ const UnifiedEventItem = exports.UnifiedEventItem = /*#__PURE__*/(0, _react.memo
     });
   }
 
+  // For Zustand events, try to use the shared ZustandStateChangeItem component
+  if (event.source === "zustand" && optionalComponents.ZustandStateChangeItem) {
+    const {
+      ZustandStateChangeItem
+    } = optionalComponents;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SourceBadgeWrapper, {
+      source: event.source,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZustandStateChangeItem, {
+        change: event.originalEvent,
+        onPress: () => onPress()
+      })
+    });
+  }
+
+  // For Jotai events, try to use the shared JotaiAtomChangeItem component
+  if (event.source === "jotai" && optionalComponents.JotaiAtomChangeItem) {
+    const {
+      JotaiAtomChangeItem
+    } = optionalComponents;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SourceBadgeWrapper, {
+      source: event.source,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiAtomChangeItem, {
+        change: event.originalEvent,
+        onPress: () => onPress()
+      })
+    });
+  }
+
   // Fallback: Use CompactRow for all events when specific components aren't available
   const customBadge = correlationLabel && correlationColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CorrelationBadge, {
     label: correlationLabel,

package/lib/commonjs/hooks/useUnifiedEvents.js

@@ -54,7 +54,7 @@ function isBuoyInternalEvent(event) {
 /**
  * All possible sources for display
  */
-const ALL_DISPLAY_SOURCES = ["storage-async", "redux", "network", "react-query-query", "react-query-mutation", "route", "render"];
+const ALL_DISPLAY_SOURCES = ["storage-async", "redux", "network", "react-query-query", "react-query-mutation", "route", "zustand", "jotai", "render"];
 
 /**
  * Sources enabled by default on first load.
@@ -75,6 +75,8 @@ const SOURCE_TO_EVENT_SOURCES = {
   "react-query-query": ["react-query", "react-query-query"],
   "react-query-mutation": ["react-query-mutation"],
   route: ["route"],
+  zustand: ["zustand"],
+  jotai: ["jotai"],
   render: ["render"]
 };
 
@@ -90,6 +92,8 @@ const EVENT_SOURCE_TO_DISCOVERY_ID = {
   "react-query-query": "react-query",
   "react-query-mutation": "react-query",
   route: "route-events",
+  zustand: "zustand",
+  jotai: "jotai",
   render: "render"
 };
 function useUnifiedEvents() {
@@ -169,6 +173,8 @@ function useUnifiedEvents() {
           (0, _unifiedEventStore.subscribeToReactQuery)();
         }
         if (sourcesToEnable.has("route")) (0, _unifiedEventStore.subscribeToRoutes)();
+        if (sourcesToEnable.has("zustand")) (0, _unifiedEventStore.subscribeToZustand)();
+        if (sourcesToEnable.has("jotai")) (0, _unifiedEventStore.subscribeToJotai)();
         if (sourcesToEnable.has("render")) (0, _unifiedEventStore.subscribeToRender)();
       }
       isStateRestoredRef.current = true;
@@ -249,6 +255,8 @@ function useUnifiedEvents() {
       "react-query-query": "react-query",
       "react-query-mutation": "react-query",
       route: "route-events",
+      zustand: "zustand",
+      jotai: "jotai",
       render: "render"
     };
     const sources = availableDisplaySources.map(source => {
@@ -299,6 +307,12 @@ function useUnifiedEvents() {
           case "route":
             (0, _unifiedEventStore.unsubscribeFromRoutes)();
             break;
+          case "zustand":
+            (0, _unifiedEventStore.unsubscribeFromZustand)();
+            break;
+          case "jotai":
+            (0, _unifiedEventStore.unsubscribeFromJotai)();
+            break;
           case "render":
             (0, _unifiedEventStore.unsubscribeFromRender)();
             break;
@@ -324,6 +338,12 @@ function useUnifiedEvents() {
             case "route":
               (0, _unifiedEventStore.subscribeToRoutes)();
               break;
+            case "zustand":
+              (0, _unifiedEventStore.subscribeToZustand)();
+              break;
+            case "jotai":
+              (0, _unifiedEventStore.subscribeToJotai)();
+              break;
             case "render":
               (0, _unifiedEventStore.subscribeToRender)();
               break;
@@ -348,6 +368,8 @@ function useUnifiedEvents() {
       (0, _unifiedEventStore.subscribeToReactQuery)();
     }
     if (enabledSources.has("route")) (0, _unifiedEventStore.subscribeToRoutes)();
+    if (enabledSources.has("zustand")) (0, _unifiedEventStore.subscribeToZustand)();
+    if (enabledSources.has("jotai")) (0, _unifiedEventStore.subscribeToJotai)();
     if (enabledSources.has("render")) (0, _unifiedEventStore.subscribeToRender)();
     setIsCapturing(true);
   }, [enabledSources]);

package/lib/commonjs/stores/unifiedEventStore.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unsubscribeFromStorage = exports.unsubscribeFromRoutes = exports.unsubscribeFromRender = exports.unsubscribeFromRedux = exports.unsubscribeFromReactQuery = exports.unsubscribeFromNetwork = exports.unsubscribeAll = exports.unifiedEventStore = exports.subscribeToStorage = exports.subscribeToRoutes = exports.subscribeToRender = exports.subscribeToRedux = exports.subscribeToReactQuery = exports.subscribeToNetwork = exports.subscribeToAll = exports.subscribe = exports.isSourceSubscribed = exports.getSubscriptionStatus = exports.getSubscriberCounts = exports.getSourceCounts = exports.getEvents = exports.getEventCount = exports.getDiscoveredSources = exports.getAvailableEventSources = exports.getActiveSources = exports.clearEvents = void 0;
+exports.unsubscribeFromZustand = exports.unsubscribeFromStorage = exports.unsubscribeFromRoutes = exports.unsubscribeFromRender = exports.unsubscribeFromRedux = exports.unsubscribeFromReactQuery = exports.unsubscribeFromNetwork = exports.unsubscribeFromJotai = exports.unsubscribeAll = exports.unifiedEventStore = exports.subscribeToZustand = exports.subscribeToStorage = exports.subscribeToRoutes = exports.subscribeToRender = exports.subscribeToRedux = exports.subscribeToReactQuery = exports.subscribeToNetwork = exports.subscribeToJotai = exports.subscribeToAll = exports.subscribe = exports.isSourceSubscribed = exports.getSubscriptionStatus = exports.getSubscriberCounts = exports.getSourceCounts = exports.getEvents = exports.getEventCount = exports.getDiscoveredSources = exports.getAvailableEventSources = exports.getActiveSources = exports.clearEvents = void 0;
 var _autoDiscoverEventSources = require("../utils/autoDiscoverEventSources");
 /**
  * Unified Event Store
@@ -198,6 +198,48 @@ class UnifiedEventStore {
     this.activeSources.delete("route");
   }
 
+  /**
+   * Subscribe to Zustand state changes (if @buoy-gg/zustand is installed)
+   */
+  subscribeToZustand() {
+    const {
+      sources
+    } = (0, _autoDiscoverEventSources.getCachedDiscovery)();
+    const zustandSource = sources.find(s => s.id === "zustand");
+    if (zustandSource) {
+      this.subscribeToSource(zustandSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from Zustand state changes
+   */
+  unsubscribeFromZustand() {
+    this.unsubscribeFromSource("zustand");
+    this.activeSources.delete("zustand");
+  }
+
+  /**
+   * Subscribe to Jotai atom changes (if @buoy-gg/jotai is installed)
+   */
+  subscribeToJotai() {
+    const {
+      sources
+    } = (0, _autoDiscoverEventSources.getCachedDiscovery)();
+    const jotaiSource = sources.find(s => s.id === "jotai");
+    if (jotaiSource) {
+      this.subscribeToSource(jotaiSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from Jotai atom changes
+   */
+  unsubscribeFromJotai() {
+    this.unsubscribeFromSource("jotai");
+    this.activeSources.delete("jotai");
+  }
+
   /**
    * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
    */
@@ -283,6 +325,8 @@ class UnifiedEventStore {
       "react-query-query": 0,
       "react-query-mutation": 0,
       route: 0,
+      zustand: 0,
+      jotai: 0,
       render: 0
     };
     for (const event of this.events) {
@@ -364,6 +408,10 @@ class UnifiedEventStore {
         return this.sourceUnsubscribers.has("react-query");
       case "route":
         return this.sourceUnsubscribers.has("route-events");
+      case "zustand":
+        return this.sourceUnsubscribers.has("zustand");
+      case "jotai":
+        return this.sourceUnsubscribers.has("jotai");
       case "render":
         return this.sourceUnsubscribers.has("render");
       default:
@@ -384,6 +432,8 @@ class UnifiedEventStore {
       "react-query-query": this.sourceUnsubscribers.has("react-query"),
       "react-query-mutation": this.sourceUnsubscribers.has("react-query"),
       route: this.sourceUnsubscribers.has("route-events"),
+      zustand: this.sourceUnsubscribers.has("zustand"),
+      jotai: this.sourceUnsubscribers.has("jotai"),
       render: this.sourceUnsubscribers.has("render")
     };
   }
@@ -421,6 +471,14 @@ const subscribeToRoutes = () => unifiedEventStore.subscribeToRoutes();
 exports.subscribeToRoutes = subscribeToRoutes;
 const unsubscribeFromRoutes = () => unifiedEventStore.unsubscribeFromRoutes();
 exports.unsubscribeFromRoutes = unsubscribeFromRoutes;
+const subscribeToZustand = () => unifiedEventStore.subscribeToZustand();
+exports.subscribeToZustand = subscribeToZustand;
+const unsubscribeFromZustand = () => unifiedEventStore.unsubscribeFromZustand();
+exports.unsubscribeFromZustand = unsubscribeFromZustand;
+const subscribeToJotai = () => unifiedEventStore.subscribeToJotai();
+exports.subscribeToJotai = subscribeToJotai;
+const unsubscribeFromJotai = () => unifiedEventStore.unsubscribeFromJotai();
+exports.unsubscribeFromJotai = unsubscribeFromJotai;
 const subscribeToRender = () => unifiedEventStore.subscribeToRender();
 exports.subscribeToRender = subscribeToRender;
 const unsubscribeFromRender = () => unifiedEventStore.unsubscribeFromRender();

package/lib/commonjs/utils/autoDiscoverEventSources.js

@@ -525,6 +525,141 @@ function transformRouteEvent(event) {
   };
 }
 
+// ============================================================================
+// Zustand Event Source Discovery
+// ============================================================================
+
+function tryLoadZustandSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      zustandStateStore
+    } = require("@buoy-gg/zustand");
+    let lastChangeId = null;
+    return {
+      id: "zustand",
+      name: "Zustand",
+      eventSources: ["zustand"],
+      available: true,
+      subscribe: onEvent => {
+        return zustandStateStore.subscribe(changes => {
+          if (changes.length > 0) {
+            const latestChange = changes[0];
+            if (latestChange.id !== lastChangeId) {
+              lastChangeId = latestChange.id;
+              const unifiedEvent = transformZustandChange(latestChange);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformZustandChange(change) {
+  const c = change;
+
+  // Get status
+  let status = "neutral";
+  if (c.isSlowUpdate) {
+    status = "pending"; // Yellow for slow updates
+  } else if (c.hasStateChange) {
+    status = "success";
+  }
+
+  // Get subtitle
+  const parts = [];
+  if (c.changedKeys && c.changedKeys.length > 0) {
+    const keys = c.changedKeys.slice(0, 3).join(", ");
+    const more = c.changedKeys.length > 3 ? ` +${c.changedKeys.length - 3}` : "";
+    parts.push(`${keys}${more}`);
+  } else if (c.diffSummary) {
+    parts.push(c.diffSummary);
+  }
+  if (c.duration !== undefined) {
+    parts.push(`${c.duration.toFixed(1)}ms`);
+  }
+  if (c.category === "replace") {
+    parts.push("replace");
+  }
+  return {
+    id: generateEventId("zustand"),
+    source: "zustand",
+    timestamp: c.timestamp,
+    title: c.storeName,
+    subtitle: parts.join(" · ") || (c.hasStateChange ? "state changed" : "no change"),
+    status,
+    originalEvent: change
+  };
+}
+
+// ============================================================================
+// Jotai Event Source Discovery
+// ============================================================================
+
+function tryLoadJotaiSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      jotaiStateStore
+    } = require("@buoy-gg/jotai");
+    let lastChangeId = null;
+    return {
+      id: "jotai",
+      name: "Jotai",
+      eventSources: ["jotai"],
+      available: true,
+      subscribe: onEvent => {
+        return jotaiStateStore.subscribe(changes => {
+          if (changes.length > 0) {
+            const latestChange = changes[0];
+            if (latestChange.id !== lastChangeId) {
+              lastChangeId = latestChange.id;
+              const unifiedEvent = transformJotaiChange(latestChange);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformJotaiChange(change) {
+  const c = change;
+
+  // Get status
+  let status = "neutral";
+  if (c.category === "write" && c.hasValueChange) {
+    status = "success";
+  } else if (c.category === "read") {
+    status = "neutral";
+  }
+
+  // Get subtitle
+  const parts = [];
+  if (c.valuePreview) {
+    parts.push(c.valuePreview);
+  } else if (c.diffSummary) {
+    parts.push(c.diffSummary);
+  }
+  if (c.category) {
+    parts.push(c.category);
+  }
+  return {
+    id: generateEventId("jotai"),
+    source: "jotai",
+    timestamp: c.timestamp,
+    title: c.atomLabel,
+    subtitle: parts.join(" · ") || (c.hasValueChange ? "value changed" : "no change"),
+    status,
+    originalEvent: change
+  };
+}
+
 // ============================================================================
 // Render Events Source Discovery (Highlight Updates)
 // ============================================================================
@@ -679,7 +814,7 @@ function autoDiscoverEventSources() {
   const availableEventSources = new Set();
 
   // Try to load each source
-  const loaders = [tryLoadStorageSource, tryLoadReduxSource, tryLoadNetworkSource, tryLoadReactQuerySource, tryLoadRouteEventsSource, tryLoadHighlightUpdatesSource];
+  const loaders = [tryLoadStorageSource, tryLoadReduxSource, tryLoadNetworkSource, tryLoadReactQuerySource, tryLoadRouteEventsSource, tryLoadZustandSource, tryLoadJotaiSource, tryLoadHighlightUpdatesSource];
   for (const loader of loaders) {
     const source = loader();
     if (source && source.available) {
@@ -739,6 +874,16 @@ function getSourceDisplayConfig(source) {
       color: "#06B6D4",
       icon: "navigate-outline"
     },
+    zustand: {
+      label: "Zustand",
+      color: "#764ABC",
+      icon: "cube-outline"
+    },
+    jotai: {
+      label: "Jotai",
+      color: "#14B8A6",
+      icon: "ellipse-outline"
+    },
     render: {
       label: "Render",
       color: "#F472B6",

package/lib/commonjs/utils/eventExportFormatter.js

@@ -57,6 +57,8 @@ const SOURCE_LABELS = {
   "react-query-query": "Query",
   "react-query-mutation": "Mutation",
   route: "Route",
+  zustand: "Zustand",
+  jotai: "Jotai",
   render: "Render"
 };
 

package/lib/module/components/EventsCopySettingsView.js

@@ -262,7 +262,9 @@ export function EventsCopySettingsView({
       }), settings.format === "json" ? /*#__PURE__*/_jsx(DataViewer, {
         data: JSON.parse(exportText),
         title: "",
-        showTypeFilter: false
+        showTypeFilter: true,
+        rawMode: true,
+        initialExpanded: true
       }) : /*#__PURE__*/_jsxs(View, {
         children: [settings.format === "mermaid" && /*#__PURE__*/_jsx(Text, {
           style: styles.mermaidHint,

package/lib/module/components/ReactQueryEventDetail.js

@@ -180,7 +180,8 @@ export const ReactQueryEventDetail = /*#__PURE__*/memo(function ReactQueryEventD
           children: /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: reactQueryEvent.mutationVariables,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -199,7 +200,8 @@ export const ReactQueryEventDetail = /*#__PURE__*/memo(function ReactQueryEventD
           children: /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: isQuery ? reactQueryEvent.queryData : reactQueryEvent.mutationData,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -216,7 +218,8 @@ export const ReactQueryEventDetail = /*#__PURE__*/memo(function ReactQueryEventD
           children: /*#__PURE__*/_jsx(DataViewer, {
             title: "",
             data: isQuery ? reactQueryEvent.queryError : reactQueryEvent.mutationError,
-            showTypeFilter: false,
+            showTypeFilter: true,
+            rawMode: true,
             initialExpanded: true
           })
         })]
@@ -234,6 +237,7 @@ export const ReactQueryEventDetail = /*#__PURE__*/memo(function ReactQueryEventD
             title: "",
             data: reactQueryEvent,
             showTypeFilter: true,
+            rawMode: true,
             initialExpanded: false
           })
         })]