@buoy-gg/events 2.1.10 → 2.1.13

package/src/components/UnifiedEventDetail.tsx

@@ -48,6 +48,20 @@ interface OptionalDetailComponents {
   RenderDetailView: ComponentType<{
     render: unknown;
   }> | null;
+  ZustandStateDetailContent: ComponentType<{
+    change: unknown;
+    changes: unknown[];
+    selectedIndex: number;
+    onIndexChange: (index: number) => void;
+    disableInternalFooter?: boolean;
+  }> | null;
+  JotaiAtomDetailContent: ComponentType<{
+    change: unknown;
+    changes: unknown[];
+    selectedIndex: number;
+    onIndexChange: (index: number) => void;
+    disableInternalFooter?: boolean;
+  }> | null;
 }
 
 function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
@@ -56,6 +70,8 @@ function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
     ReduxActionDetailContent: null,
     NetworkEventDetailView: null,
     RenderDetailView: null,
+    ZustandStateDetailContent: null,
+    JotaiAtomDetailContent: null,
   };
 
   // Try to load storage detail component
@@ -94,6 +110,24 @@ function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
     // 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;
 }
 
@@ -116,6 +150,8 @@ const SOURCE_CONFIG: Record<EventSource, { label: string; color: string }> = {
   "react-query-query": { label: "Query", color: "#EC4899" },
   "react-query-mutation": { label: "Mutation", color: "#F97316" },
   route: { label: "Route", color: "#06B6D4" },
+  zustand: { label: "Zustand", color: "#764ABC" },
+  jotai: { label: "Jotai", color: "#14B8A6" },
   render: { label: "Render", color: "#F472B6" },
 };
 
@@ -236,6 +272,42 @@ export const UnifiedEventDetail = 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 (
+      <View style={styles.container}>
+        <ZustandStateDetailContent
+          change={zustandChange}
+          changes={[zustandChange]}
+          selectedIndex={0}
+          onIndexChange={() => {}}
+          disableInternalFooter={true}
+        />
+      </View>
+    );
+  }
+
+  // For Jotai events, use the shared JotaiAtomDetailContent if available
+  if (event.source === "jotai" && optionalComponents.JotaiAtomDetailContent) {
+    const { JotaiAtomDetailContent } = optionalComponents;
+    const jotaiChange = event.originalEvent;
+
+    return (
+      <View style={styles.container}>
+        <JotaiAtomDetailContent
+          change={jotaiChange}
+          changes={[jotaiChange]}
+          selectedIndex={0}
+          onIndexChange={() => {}}
+          disableInternalFooter={true}
+        />
+      </View>
+    );
+  }
+
   // For render events, use the RenderDetailView if available
   if (event.source === "render" && optionalComponents.RenderDetailView) {
     const { RenderDetailView } = optionalComponents;
@@ -307,7 +379,13 @@ export const UnifiedEventDetail = memo(function UnifiedEventDetail({
         <View style={styles.dataSection}>
           <Text style={styles.sectionLabel}>Event Data</Text>
           <View style={styles.dataContainer}>
-            <DataViewer data={getEventData()} title="" showTypeFilter={false} />
+            <DataViewer
+              data={getEventData()}
+              title=""
+              showTypeFilter={true}
+              rawMode={true}
+              initialExpanded={true}
+            />
           </View>
         </View>
       </ScrollView>

package/src/components/UnifiedEventItem.tsx

@@ -43,6 +43,14 @@ interface OptionalComponents {
     onPress: () => void;
     onNavigate?: (pathname: string) => void;
   }> | null;
+  ZustandStateChangeItem: ComponentType<{
+    change: unknown;
+    onPress: (change: unknown) => void;
+  }> | null;
+  JotaiAtomChangeItem: ComponentType<{
+    change: unknown;
+    onPress: (change: unknown) => void;
+  }> | null;
 }
 
 function tryLoadOptionalComponents(): OptionalComponents {
@@ -52,6 +60,8 @@ function tryLoadOptionalComponents(): OptionalComponents {
     ReduxActionItem: null,
     NetworkEventItemCompact: null,
     RouteEventItemCompact: null,
+    ZustandStateChangeItem: null,
+    JotaiAtomChangeItem: null,
   };
 
   // Try to load storage components
@@ -91,6 +101,24 @@ function tryLoadOptionalComponents(): OptionalComponents {
     // 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;
 }
 
@@ -140,6 +168,14 @@ const SOURCE_CONFIG: Record<
     label: "Route",
     color: "#06B6D4", // Cyan
   },
+  zustand: {
+    label: "Zustand",
+    color: "#764ABC", // Purple
+  },
+  jotai: {
+    label: "Jotai",
+    color: "#14B8A6", // Teal
+  },
   render: {
     label: "Render",
     color: "#F472B6", // Pink
@@ -220,6 +256,8 @@ const SOURCE_BADGE_LABELS: Record<EventSource, string> = {
   "react-query-query": "QUERY",
   "react-query-mutation": "MUTATION",
   route: "ROUTE",
+  zustand: "ZUSTAND",
+  jotai: "JOTAI",
   render: "RENDER",
 };
 
@@ -342,6 +380,34 @@ export const UnifiedEventItem = memo(function UnifiedEventItem({
     );
   }
 
+  // For Zustand events, try to use the shared ZustandStateChangeItem component
+  if (event.source === "zustand" && optionalComponents.ZustandStateChangeItem) {
+    const { ZustandStateChangeItem } = optionalComponents;
+
+    return (
+      <SourceBadgeWrapper source={event.source}>
+        <ZustandStateChangeItem
+          change={event.originalEvent}
+          onPress={() => onPress()}
+        />
+      </SourceBadgeWrapper>
+    );
+  }
+
+  // For Jotai events, try to use the shared JotaiAtomChangeItem component
+  if (event.source === "jotai" && optionalComponents.JotaiAtomChangeItem) {
+    const { JotaiAtomChangeItem } = optionalComponents;
+
+    return (
+      <SourceBadgeWrapper source={event.source}>
+        <JotaiAtomChangeItem
+          change={event.originalEvent}
+          onPress={() => onPress()}
+        />
+      </SourceBadgeWrapper>
+    );
+  }
+
   // Fallback: Use CompactRow for all events when specific components aren't available
   const customBadge =
     correlationLabel && correlationColor ? (

package/src/hooks/useUnifiedEvents.ts

@@ -15,12 +15,16 @@ import {
   subscribeToNetwork,
   subscribeToReactQuery,
   subscribeToRoutes,
+  subscribeToZustand,
+  subscribeToJotai,
   subscribeToRender,
   unsubscribeFromStorage,
   unsubscribeFromRedux,
   unsubscribeFromNetwork,
   unsubscribeFromReactQuery,
   unsubscribeFromRoutes,
+  unsubscribeFromZustand,
+  unsubscribeFromJotai,
   unsubscribeFromRender,
   unsubscribeAll,
   getSourceCounts,
@@ -82,6 +86,8 @@ const ALL_DISPLAY_SOURCES: EventSource[] = [
   "react-query-query",
   "react-query-mutation",
   "route",
+  "zustand",
+  "jotai",
   "render",
 ];
 
@@ -106,6 +112,8 @@ const SOURCE_TO_EVENT_SOURCES: Record<EventSource, EventSource[]> = {
   "react-query-query": ["react-query", "react-query-query"],
   "react-query-mutation": ["react-query-mutation"],
   route: ["route"],
+  zustand: ["zustand"],
+  jotai: ["jotai"],
   render: ["render"],
 };
 
@@ -121,6 +129,8 @@ const EVENT_SOURCE_TO_DISCOVERY_ID: Record<EventSource, string> = {
   "react-query-query": "react-query",
   "react-query-mutation": "react-query",
   route: "route-events",
+  zustand: "zustand",
+  jotai: "jotai",
   render: "render",
 };
 
@@ -231,6 +241,8 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
           subscribeToReactQuery();
         }
         if (sourcesToEnable.has("route")) subscribeToRoutes();
+        if (sourcesToEnable.has("zustand")) subscribeToZustand();
+        if (sourcesToEnable.has("jotai")) subscribeToJotai();
         if (sourcesToEnable.has("render")) subscribeToRender();
       }
 
@@ -314,6 +326,8 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
       "react-query-query": "react-query",
       "react-query-mutation": "react-query",
       route: "route-events",
+      zustand: "zustand",
+      jotai: "jotai",
       render: "render",
     };
 
@@ -370,6 +384,12 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
           case "route":
             unsubscribeFromRoutes();
             break;
+          case "zustand":
+            unsubscribeFromZustand();
+            break;
+          case "jotai":
+            unsubscribeFromJotai();
+            break;
           case "render":
             unsubscribeFromRender();
             break;
@@ -395,6 +415,12 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
             case "route":
               subscribeToRoutes();
               break;
+            case "zustand":
+              subscribeToZustand();
+              break;
+            case "jotai":
+              subscribeToJotai();
+              break;
             case "render":
               subscribeToRender();
               break;
@@ -423,6 +449,8 @@ export function useUnifiedEvents(): UseUnifiedEventsResult {
       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/src/stores/unifiedEventStore.ts

@@ -195,6 +195,44 @@ class UnifiedEventStore {
     this.activeSources.delete("route");
   }
 
+  /**
+   * Subscribe to Zustand state changes (if @buoy-gg/zustand is installed)
+   */
+  subscribeToZustand(): void {
+    const { sources } = getCachedDiscovery();
+    const zustandSource = sources.find((s) => s.id === "zustand");
+    if (zustandSource) {
+      this.subscribeToSource(zustandSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from Zustand state changes
+   */
+  unsubscribeFromZustand(): void {
+    this.unsubscribeFromSource("zustand");
+    this.activeSources.delete("zustand");
+  }
+
+  /**
+   * Subscribe to Jotai atom changes (if @buoy-gg/jotai is installed)
+   */
+  subscribeToJotai(): void {
+    const { sources } = getCachedDiscovery();
+    const jotaiSource = sources.find((s) => s.id === "jotai");
+    if (jotaiSource) {
+      this.subscribeToSource(jotaiSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from Jotai atom changes
+   */
+  unsubscribeFromJotai(): void {
+    this.unsubscribeFromSource("jotai");
+    this.activeSources.delete("jotai");
+  }
+
   /**
    * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
    */
@@ -283,6 +321,8 @@ class UnifiedEventStore {
       "react-query-query": 0,
       "react-query-mutation": 0,
       route: 0,
+      zustand: 0,
+      jotai: 0,
       render: 0,
     };
 
@@ -366,6 +406,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:
@@ -386,6 +430,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"),
     };
   }
@@ -423,6 +469,14 @@ 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 = () =>

package/src/types/index.ts

@@ -16,7 +16,9 @@ export type EventSource =
   | "react-query-query"
   | "react-query-mutation"
   | "route"
-  | "render";
+  | "render"
+  | "zustand"
+  | "jotai";
 
 /**
  * Event status for visual indicators

package/src/utils/autoDiscoverEventSources.ts

@@ -596,6 +596,167 @@ function transformRouteEvent(event: unknown): UnifiedEvent {
   };
 }
 
+// ============================================================================
+// Zustand Event Source Discovery
+// ============================================================================
+
+function tryLoadZustandSource(): DiscoveredEventSource | null {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const { zustandStateStore } = require("@buoy-gg/zustand");
+
+    let lastChangeId: string | null = null;
+
+    return {
+      id: "zustand",
+      name: "Zustand",
+      eventSources: ["zustand"],
+      available: true,
+      subscribe: (onEvent) => {
+        return zustandStateStore.subscribe((changes: unknown[]) => {
+          if (changes.length > 0) {
+            const latestChange = changes[0] as { id: string };
+            if (latestChange.id !== lastChangeId) {
+              lastChangeId = latestChange.id;
+              const unifiedEvent = transformZustandChange(latestChange);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+function transformZustandChange(change: unknown): UnifiedEvent {
+  const c = change as {
+    id: string;
+    storeName: string;
+    timestamp: number;
+    hasStateChange?: boolean;
+    category?: "setState" | "replace";
+    changedKeys?: string[];
+    changedKeysCount?: number;
+    diffSummary?: string;
+    partialPreview?: string;
+    duration?: number;
+    isSlowUpdate?: boolean;
+  };
+
+  // Get status
+  let status: "success" | "error" | "pending" | "neutral" = "neutral";
+  if (c.isSlowUpdate) {
+    status = "pending"; // Yellow for slow updates
+  } else if (c.hasStateChange) {
+    status = "success";
+  }
+
+  // Get subtitle
+  const parts: string[] = [];
+  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(): DiscoveredEventSource | null {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const { jotaiStateStore } = require("@buoy-gg/jotai");
+
+    let lastChangeId: string | null = null;
+
+    return {
+      id: "jotai",
+      name: "Jotai",
+      eventSources: ["jotai"],
+      available: true,
+      subscribe: (onEvent) => {
+        return jotaiStateStore.subscribe((changes: unknown[]) => {
+          if (changes.length > 0) {
+            const latestChange = changes[0] as { id: string };
+            if (latestChange.id !== lastChangeId) {
+              lastChangeId = latestChange.id;
+              const unifiedEvent = transformJotaiChange(latestChange);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+function transformJotaiChange(change: unknown): UnifiedEvent {
+  const c = change as {
+    id: string;
+    atomLabel: string;
+    timestamp: number;
+    hasValueChange?: boolean;
+    category?: "write" | "read";
+    changedKeys?: string[];
+    changedKeysCount?: number;
+    diffSummary?: string;
+    valuePreview?: string;
+  };
+
+  // Get status
+  let status: "success" | "error" | "pending" | "neutral" = "neutral";
+  if (c.category === "write" && c.hasValueChange) {
+    status = "success";
+  } else if (c.category === "read") {
+    status = "neutral";
+  }
+
+  // Get subtitle
+  const parts: string[] = [];
+  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)
 // ============================================================================
@@ -776,6 +937,8 @@ export function autoDiscoverEventSources(): DiscoveryResult {
     tryLoadNetworkSource,
     tryLoadReactQuerySource,
     tryLoadRouteEventsSource,
+    tryLoadZustandSource,
+    tryLoadJotaiSource,
     tryLoadHighlightUpdatesSource,
   ];
 
@@ -808,6 +971,8 @@ export function getSourceDisplayConfig(source: EventSource): {
     "react-query-query": { label: "Query", color: "#EC4899", icon: "sync-outline" },
     "react-query-mutation": { label: "Mutation", color: "#F97316", icon: "flash-outline" },
     route: { label: "Route", 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", icon: "layers-outline" },
   };
 

package/src/utils/eventExportFormatter.ts

@@ -53,6 +53,8 @@ const SOURCE_LABELS: Record<EventSource, string> = {
   "react-query-query": "Query",
   "react-query-mutation": "Mutation",
   route: "Route",
+  zustand: "Zustand",
+  jotai: "Jotai",
   render: "Render",
 };