@buoy-gg/events 2.1.10 → 2.1.13

package/lib/module/components/UnifiedEventDetail.js

@@ -23,7 +23,9 @@ function tryLoadOptionalDetailComponents() {
     StorageEventDetailContent: null,
     ReduxActionDetailContent: null,
     NetworkEventDetailView: null,
-    RenderDetailView: null
+    RenderDetailView: null,
+    ZustandStateDetailContent: null,
+    JotaiAtomDetailContent: null
   };
 
   // Try to load storage detail component
@@ -61,6 +63,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;
 }
 
@@ -107,6 +127,14 @@ const SOURCE_CONFIG = {
     label: "Route",
     color: "#06B6D4"
   },
+  zustand: {
+    label: "Zustand",
+    color: "#764ABC"
+  },
+  jotai: {
+    label: "Jotai",
+    color: "#14B8A6"
+  },
   render: {
     label: "Render",
     color: "#F472B6"
@@ -225,6 +253,42 @@ export const UnifiedEventDetail = /*#__PURE__*/memo(function UnifiedEventDetail(
     });
   }
 
+  // For Zustand events, use the shared ZustandStateDetailContent if available
+  if (event.source === "zustand" && optionalComponents.ZustandStateDetailContent) {
+    const {
+      ZustandStateDetailContent
+    } = optionalComponents;
+    const zustandChange = event.originalEvent;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_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__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_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 {
@@ -305,7 +369,9 @@ export const UnifiedEventDetail = /*#__PURE__*/memo(function UnifiedEventDetail(
           children: /*#__PURE__*/_jsx(DataViewer, {
             data: getEventData(),
             title: "",
-            showTypeFilter: false
+            showTypeFilter: true,
+            rawMode: true,
+            initialExpanded: true
           })
         })]
       })]

package/lib/module/components/UnifiedEventItem.js

@@ -22,7 +22,9 @@ function tryLoadOptionalComponents() {
     getValueType: null,
     ReduxActionItem: null,
     NetworkEventItemCompact: null,
-    RouteEventItemCompact: null
+    RouteEventItemCompact: null,
+    ZustandStateChangeItem: null,
+    JotaiAtomChangeItem: null
   };
 
   // Try to load storage components
@@ -61,6 +63,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;
 }
 
@@ -107,6 +127,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
@@ -178,6 +206,8 @@ const SOURCE_BADGE_LABELS = {
   "react-query-query": "QUERY",
   "react-query-mutation": "MUTATION",
   route: "ROUTE",
+  zustand: "ZUSTAND",
+  jotai: "JOTAI",
   render: "RENDER"
 };
 
@@ -289,6 +319,34 @@ export const UnifiedEventItem = /*#__PURE__*/memo(function UnifiedEventItem({
     });
   }
 
+  // For Zustand events, try to use the shared ZustandStateChangeItem component
+  if (event.source === "zustand" && optionalComponents.ZustandStateChangeItem) {
+    const {
+      ZustandStateChangeItem
+    } = optionalComponents;
+    return /*#__PURE__*/_jsx(SourceBadgeWrapper, {
+      source: event.source,
+      children: /*#__PURE__*/_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__*/_jsx(SourceBadgeWrapper, {
+      source: event.source,
+      children: /*#__PURE__*/_jsx(JotaiAtomChangeItem, {
+        change: event.originalEvent,
+        onPress: () => onPress()
+      })
+    });
+  }
+
   // Fallback: Use CompactRow for all events when specific components aren't available
   const customBadge = correlationLabel && correlationColor ? /*#__PURE__*/_jsx(CorrelationBadge, {
     label: correlationLabel,

package/lib/module/hooks/useUnifiedEvents.js

@@ -9,7 +9,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useFeatureGate, subscribeToSubscriberCountChanges, isDevToolsStorageKey } from "@buoy-gg/shared-ui";
-import { subscribe, subscribeToStorage, subscribeToRedux, subscribeToNetwork, subscribeToReactQuery, subscribeToRoutes, subscribeToRender, unsubscribeFromStorage, unsubscribeFromRedux, unsubscribeFromNetwork, unsubscribeFromReactQuery, unsubscribeFromRoutes, unsubscribeFromRender, unsubscribeAll, getSourceCounts, clearEvents as clearStoreEvents, getAvailableEventSources, getSubscriberCounts } from "../stores/unifiedEventStore";
+import { subscribe, subscribeToStorage, subscribeToRedux, subscribeToNetwork, subscribeToReactQuery, subscribeToRoutes, subscribeToZustand, subscribeToJotai, subscribeToRender, unsubscribeFromStorage, unsubscribeFromRedux, unsubscribeFromNetwork, unsubscribeFromReactQuery, unsubscribeFromRoutes, unsubscribeFromZustand, unsubscribeFromJotai, unsubscribeFromRender, unsubscribeAll, getSourceCounts, clearEvents as clearStoreEvents, getAvailableEventSources, getSubscriberCounts } from "../stores/unifiedEventStore";
 import { saveEnabledSources, loadEnabledSources, saveCapturingState, loadCapturingState } from "../utils/badgeSelectionStorage";
 import { getSourceDisplayConfig } from "../utils/autoDiscoverEventSources";
 
@@ -51,7 +51,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.
@@ -72,6 +72,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"]
 };
 
@@ -87,6 +89,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"
 };
 export function useUnifiedEvents() {
@@ -166,6 +170,8 @@ export function useUnifiedEvents() {
           subscribeToReactQuery();
         }
         if (sourcesToEnable.has("route")) subscribeToRoutes();
+        if (sourcesToEnable.has("zustand")) subscribeToZustand();
+        if (sourcesToEnable.has("jotai")) subscribeToJotai();
         if (sourcesToEnable.has("render")) subscribeToRender();
       }
       isStateRestoredRef.current = true;
@@ -246,6 +252,8 @@ export 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 => {
@@ -296,6 +304,12 @@ export function useUnifiedEvents() {
           case "route":
             unsubscribeFromRoutes();
             break;
+          case "zustand":
+            unsubscribeFromZustand();
+            break;
+          case "jotai":
+            unsubscribeFromJotai();
+            break;
           case "render":
             unsubscribeFromRender();
             break;
@@ -321,6 +335,12 @@ export function useUnifiedEvents() {
             case "route":
               subscribeToRoutes();
               break;
+            case "zustand":
+              subscribeToZustand();
+              break;
+            case "jotai":
+              subscribeToJotai();
+              break;
             case "render":
               subscribeToRender();
               break;
@@ -345,6 +365,8 @@ export function useUnifiedEvents() {
       subscribeToReactQuery();
     }
     if (enabledSources.has("route")) subscribeToRoutes();
+    if (enabledSources.has("zustand")) subscribeToZustand();
+    if (enabledSources.has("jotai")) subscribeToJotai();
     if (enabledSources.has("render")) subscribeToRender();
     setIsCapturing(true);
   }, [enabledSources]);

package/lib/module/stores/unifiedEventStore.js

@@ -194,6 +194,48 @@ class UnifiedEventStore {
     this.activeSources.delete("route");
   }
 
+  /**
+   * Subscribe to Zustand state changes (if @buoy-gg/zustand is installed)
+   */
+  subscribeToZustand() {
+    const {
+      sources
+    } = 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
+    } = 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)
    */
@@ -279,6 +321,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) {
@@ -360,6 +404,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:
@@ -380,6 +428,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")
     };
   }
@@ -407,6 +457,10 @@ export const subscribeToReactQuery = () => unifiedEventStore.subscribeToReactQue
 export const unsubscribeFromReactQuery = () => unifiedEventStore.unsubscribeFromReactQuery();
 export const subscribeToRoutes = () => unifiedEventStore.subscribeToRoutes();
 export const unsubscribeFromRoutes = () => unifiedEventStore.unsubscribeFromRoutes();
+export const subscribeToZustand = () => unifiedEventStore.subscribeToZustand();
+export const unsubscribeFromZustand = () => unifiedEventStore.unsubscribeFromZustand();
+export const subscribeToJotai = () => unifiedEventStore.subscribeToJotai();
+export const unsubscribeFromJotai = () => unifiedEventStore.unsubscribeFromJotai();
 export const subscribeToRender = () => unifiedEventStore.subscribeToRender();
 export const unsubscribeFromRender = () => unifiedEventStore.unsubscribeFromRender();
 export const getEvents = enabledSources => unifiedEventStore.getEvents(enabledSources);

package/lib/module/utils/autoDiscoverEventSources.js

@@ -517,6 +517,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)
 // ============================================================================
@@ -671,7 +806,7 @@ export 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) {
@@ -731,6 +866,16 @@ export 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/module/utils/eventExportFormatter.js

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

package/lib/typescript/stores/unifiedEventStore.d.ts

@@ -74,6 +74,22 @@ declare class UnifiedEventStore {
      * Unsubscribe from route events
      */
     unsubscribeFromRoutes(): void;
+    /**
+     * Subscribe to Zustand state changes (if @buoy-gg/zustand is installed)
+     */
+    subscribeToZustand(): void;
+    /**
+     * Unsubscribe from Zustand state changes
+     */
+    unsubscribeFromZustand(): void;
+    /**
+     * Subscribe to Jotai atom changes (if @buoy-gg/jotai is installed)
+     */
+    subscribeToJotai(): void;
+    /**
+     * Unsubscribe from Jotai atom changes
+     */
+    unsubscribeFromJotai(): void;
     /**
      * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
      */
@@ -143,6 +159,10 @@ export declare const subscribeToReactQuery: () => void;
 export declare const unsubscribeFromReactQuery: () => void;
 export declare const subscribeToRoutes: () => void;
 export declare const unsubscribeFromRoutes: () => void;
+export declare const subscribeToZustand: () => void;
+export declare const unsubscribeFromZustand: () => void;
+export declare const subscribeToJotai: () => void;
+export declare const unsubscribeFromJotai: () => void;
 export declare const subscribeToRender: () => void;
 export declare const unsubscribeFromRender: () => void;
 export declare const getEvents: (enabledSources?: Set<EventSource>) => UnifiedEvent[];

package/lib/typescript/types/index.d.ts

@@ -6,7 +6,7 @@
 /**
  * Event source identifiers
  */
-export type EventSource = "storage-async" | "storage-mmkv" | "redux" | "network" | "react-query" | "react-query-query" | "react-query-mutation" | "route" | "render";
+export type EventSource = "storage-async" | "storage-mmkv" | "redux" | "network" | "react-query" | "react-query-query" | "react-query-mutation" | "route" | "render" | "zustand" | "jotai";
 /**
  * Event status for visual indicators
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/events",
-  "version": "2.1.10",
+  "version": "2.1.13",
   "description": "events package",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,8 +27,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "2.1.10",
-    "@buoy-gg/shared-ui": "2.1.10"
+    "@buoy-gg/floating-tools-core": "2.1.13",
+    "@buoy-gg/shared-ui": "2.1.13"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/EventsCopySettingsView.tsx

@@ -308,7 +308,9 @@ export function EventsCopySettingsView({
           <DataViewer
             data={JSON.parse(exportText)}
             title=""
-            showTypeFilter={false}
+            showTypeFilter={true}
+            rawMode={true}
+            initialExpanded={true}
           />
         ) : (
           <View>

package/src/components/ReactQueryEventDetail.tsx

@@ -184,7 +184,8 @@ export const ReactQueryEventDetail = memo(function ReactQueryEventDetail({
               <DataViewer
                 title=""
                 data={reactQueryEvent.mutationVariables}
-                showTypeFilter={false}
+                showTypeFilter={true}
+                rawMode={true}
                 initialExpanded={true}
               />
             </View>
@@ -203,7 +204,8 @@ export const ReactQueryEventDetail = memo(function ReactQueryEventDetail({
               <DataViewer
                 title=""
                 data={isQuery ? reactQueryEvent.queryData : reactQueryEvent.mutationData}
-                showTypeFilter={false}
+                showTypeFilter={true}
+                rawMode={true}
                 initialExpanded={true}
               />
             </View>
@@ -220,7 +222,8 @@ export const ReactQueryEventDetail = memo(function ReactQueryEventDetail({
               <DataViewer
                 title=""
                 data={isQuery ? reactQueryEvent.queryError : reactQueryEvent.mutationError}
-                showTypeFilter={false}
+                showTypeFilter={true}
+                rawMode={true}
                 initialExpanded={true}
               />
             </View>
@@ -237,6 +240,7 @@ export const ReactQueryEventDetail = memo(function ReactQueryEventDetail({
               title=""
               data={reactQueryEvent}
               showTypeFilter={true}
+              rawMode={true}
               initialExpanded={false}
             />
           </View>