@buoy-gg/events 2.1.1 → 2.1.3

package/lib/typescript/components/UnifiedEventFilters.d.ts

@@ -4,6 +4,9 @@
  * Filter bar showing toggleable badges for each available event source.
  * Badges are sorted: enabled first, disabled last.
  * Toggling a badge enables/disables event listening for that source.
+ *
+ * Badge layout (inspired by React Query DevTools):
+ * [subscriber_count] • Label [event_count]
  */
 import type { EventSource, SourceInfo } from "../types";
 interface UnifiedEventFiltersProps {

package/lib/typescript/hooks/useUnifiedEvents.d.ts

@@ -25,6 +25,8 @@ export interface UseUnifiedEventsResult {
     hiddenEventsCount: number;
     /** Whether user is on Pro plan */
     isPro: boolean;
+    /** Total number of subscribers across all event stores (for debugging) */
+    totalSubscriberCount: number;
 }
 export declare function useUnifiedEvents(): UseUnifiedEventsResult;
 //# sourceMappingURL=useUnifiedEvents.d.ts.map

package/lib/typescript/index.d.ts

@@ -22,7 +22,7 @@ export { UnifiedEventDetail } from "./components/UnifiedEventDetail";
 export { ReactQueryEventDetail } from "./components/ReactQueryEventDetail";
 export { EventsCopySettingsView } from "./components/EventsCopySettingsView";
 export { findRelatedEvents, hasRelatedEvents, getRelatedEventsCount, buildCorrelationCountMap, getCorrelationGroup, getCorrelationLabel, getCorrelationColor, } from "./utils/correlationUtils";
-export { generateExport, generateMarkdownExport, generateJsonExport, generatePlaintextExport, estimateExportSize, getExportSummary, filterEvents, } from "./utils/eventExportFormatter";
+export { generateExport, generateMarkdownExport, generateJsonExport, generatePlaintextExport, generateMermaidExport, estimateExportSize, getExportSummary, filterEvents, } from "./utils/eventExportFormatter";
 export type { ExportSummary } from "./utils/eventExportFormatter";
 export { loadCopySettings, saveCopySettings, clearCopySettings, } from "./utils/copySettingsStorage";
 //# sourceMappingURL=index.d.ts.map

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

@@ -7,7 +7,7 @@
  * Uses auto-discovery to find installed tool packages - no hard dependencies required!
  */
 import type { UnifiedEvent, UnifiedEventListener, EventSource } from "../types";
-import { type DiscoveredEventSource } from "../utils/autoDiscoverEventSources";
+import { type DiscoveredEventSource, type AggregatedSubscriberCounts } from "../utils/autoDiscoverEventSources";
 declare class UnifiedEventStore {
     private events;
     private listeners;
@@ -74,6 +74,14 @@ declare class UnifiedEventStore {
      * Unsubscribe from route events
      */
     unsubscribeFromRoutes(): void;
+    /**
+     * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
+     */
+    subscribeToRender(): void;
+    /**
+     * Unsubscribe from render events
+     */
+    unsubscribeFromRender(): void;
     /**
      * Add an event to the store
      */
@@ -118,6 +126,11 @@ declare class UnifiedEventStore {
      * Get subscription status for all sources
      */
     getSubscriptionStatus(): Record<EventSource, boolean>;
+    /**
+     * Get subscriber counts from all underlying event stores.
+     * Useful for debugging the event system.
+     */
+    getSubscriberCounts(): AggregatedSubscriberCounts;
 }
 export declare const unifiedEventStore: UnifiedEventStore;
 export declare const subscribeToStorage: () => Promise<void>;
@@ -130,6 +143,8 @@ export declare const subscribeToReactQuery: () => void;
 export declare const unsubscribeFromReactQuery: () => void;
 export declare const subscribeToRoutes: () => void;
 export declare const unsubscribeFromRoutes: () => void;
+export declare const subscribeToRender: () => void;
+export declare const unsubscribeFromRender: () => void;
 export declare const getEvents: (enabledSources?: Set<EventSource>) => UnifiedEvent[];
 export declare const getActiveSources: () => EventSource[];
 export declare const getSourceCounts: () => Record<EventSource, number>;
@@ -142,5 +157,6 @@ export declare const unsubscribeAll: () => void;
 export declare const getDiscoveredSources: () => DiscoveredEventSource[];
 export declare const getAvailableEventSources: () => Set<EventSource>;
 export declare const subscribeToAll: () => Promise<void>;
-export {};
+export declare const getSubscriberCounts: () => AggregatedSubscriberCounts;
+export type { AggregatedSubscriberCounts } from "../utils/autoDiscoverEventSources";
 //# sourceMappingURL=unifiedEventStore.d.ts.map

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

@@ -19,7 +19,7 @@ export interface EventsCopySettings {
     includeTotalDuration: boolean;
     includeEventData: boolean;
     dataSizeThreshold: 1 | 5 | 10 | 50 | -1;
-    format: "markdown" | "json" | "plaintext";
+    format: "markdown" | "json" | "plaintext" | "mermaid";
     filterMode: "all" | "errors" | "success" | "pending";
     filterSources: EventSource[];
     /** Compact mode - single line per event, no JSON blocks */
@@ -162,6 +162,30 @@ export declare const COPY_PRESETS: {
         readonly showStorageDiff: false;
         readonly stripVerboseFields: true;
     };
+    /**
+     * Mermaid Diagram - Visual sequence diagram for flow visualization
+     */
+    readonly mermaid: {
+        readonly timestampFormat: "relative";
+        readonly includeSource: true;
+        readonly includeStatus: true;
+        readonly includeTitle: true;
+        readonly includeSubtitle: false;
+        readonly includeCorrelation: true;
+        readonly includeDuration: true;
+        readonly includeSummaryHeader: false;
+        readonly includeTotalDuration: false;
+        readonly includeEventData: false;
+        readonly dataSizeThreshold: 1;
+        readonly format: "mermaid";
+        readonly filterMode: "all";
+        readonly filterSources: readonly [];
+        readonly compactMode: false;
+        readonly smartJsonParsing: true;
+        readonly reduxChangedOnly: true;
+        readonly showStorageDiff: true;
+        readonly stripVerboseFields: true;
+    };
 };
 export type CopyPresetName = keyof typeof COPY_PRESETS;
 /**

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";
+export type EventSource = "storage-async" | "storage-mmkv" | "redux" | "network" | "react-query" | "react-query-query" | "react-query-mutation" | "route" | "render";
 /**
  * Event status for visual indicators
  */
@@ -61,6 +61,8 @@ export interface SourceInfo {
     count: number;
     /** Whether this source is currently enabled (listening and showing events) */
     enabled?: boolean;
+    /** Number of subscribers to this source's event store (for debugging) */
+    subscriberCount?: number;
 }
 /**
  * Event listener callback

package/lib/typescript/utils/autoDiscoverEventSources.d.ts

@@ -71,4 +71,21 @@ export declare function getCachedDiscovery(): DiscoveryResult;
  * Clear the discovery cache (useful for testing or hot reload).
  */
 export declare function clearDiscoveryCache(): void;
+export interface SourceSubscriberCounts {
+    sourceId: string;
+    counts: {
+        eventCallbacks: number;
+        arrayListeners: number;
+        total: number;
+    };
+}
+export interface AggregatedSubscriberCounts {
+    sources: SourceSubscriberCounts[];
+    totalSubscribers: number;
+}
+/**
+ * Get subscriber counts from all discovered event stores.
+ * Useful for debugging and monitoring the event system.
+ */
+export declare function getAggregatedSubscriberCounts(): AggregatedSubscriberCounts;
 //# sourceMappingURL=autoDiscoverEventSources.d.ts.map

package/lib/typescript/utils/badgeSelectionStorage.d.ts

@@ -18,4 +18,13 @@ export declare function loadEnabledSources(): Promise<EventSource[] | null>;
  * Clear the saved enabled sources
  */
 export declare function clearEnabledSources(): Promise<void>;
+/**
+ * Save the capturing state to persistent storage
+ */
+export declare function saveCapturingState(isCapturing: boolean): Promise<void>;
+/**
+ * Load the capturing state from persistent storage
+ * Returns null if no saved state exists (defaults to true on first load)
+ */
+export declare function loadCapturingState(): Promise<boolean | null>;
 //# sourceMappingURL=badgeSelectionStorage.d.ts.map

package/lib/typescript/utils/eventExportFormatter.d.ts

@@ -42,6 +42,10 @@ export declare function generateJsonExport(events: UnifiedEvent[], settings: Eve
  * Generate plaintext export
  */
 export declare function generatePlaintextExport(events: UnifiedEvent[], settings: EventsCopySettings): string;
+/**
+ * Generate Mermaid sequence diagram export
+ */
+export declare function generateMermaidExport(events: UnifiedEvent[], settings: EventsCopySettings): string;
 /**
  * Generate export based on settings format
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/events",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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.1",
-    "@buoy-gg/shared-ui": "2.1.1"
+    "@buoy-gg/floating-tools-core": "2.1.3",
+    "@buoy-gg/shared-ui": "2.1.3"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/EventsCopySettingsView.tsx

@@ -21,6 +21,7 @@ import {
   ChevronDown,
   ChevronUp,
   XCircle,
+  GitBranch,
   ToolbarCopyButton,
   useFeatureGate,
   ProFeatureBanner,
@@ -310,11 +311,18 @@ export function EventsCopySettingsView({
             showTypeFilter={false}
           />
         ) : (
-          <ScrollView style={styles.previewScroll} nestedScrollEnabled>
-            <Text style={styles.previewText} selectable={isPro}>
-              {exportText}
-            </Text>
-          </ScrollView>
+          <View>
+            {settings.format === "mermaid" && (
+              <Text style={styles.mermaidHint}>
+                💡 Paste into mermaid.live to visualize
+              </Text>
+            )}
+            <ScrollView style={styles.previewScroll} nestedScrollEnabled>
+              <Text style={styles.previewText} selectable={isPro}>
+                {exportText}
+              </Text>
+            </ScrollView>
+          </View>
         )}
       </View>
     );
@@ -399,6 +407,15 @@ export function EventsCopySettingsView({
               isActive: activePreset === "minimal",
               description: PRESET_METADATA.minimal.description,
             },
+            {
+              id: "preset::mermaid",
+              label: PRESET_METADATA.mermaid.label,
+              icon: GitBranch,
+              color: PRESET_METADATA.mermaid.color,
+              value: "mermaid",
+              isActive: activePreset === "mermaid",
+              description: PRESET_METADATA.mermaid.description,
+            },
             {
               id: "preset::custom",
               label: "Custom",
@@ -498,6 +515,15 @@ export function EventsCopySettingsView({
               value: "plaintext",
               isActive: settings.format === "plaintext",
             },
+            {
+              id: "format::mermaid",
+              label: "Diagram",
+              icon: GitBranch,
+              color: "#A855F7",
+              value: "mermaid",
+              isActive: settings.format === "mermaid",
+              description: "Mermaid sequence diagram",
+            },
           ],
         },
 
@@ -723,6 +749,16 @@ const styles = StyleSheet.create({
     color: macOSColors.text.primary,
     lineHeight: 18,
   },
+  mermaidHint: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    marginBottom: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    backgroundColor: "#A855F7" + "15",
+    borderRadius: 6,
+    overflow: "hidden",
+  },
   statusLabel: {
     fontSize: 11,
     fontWeight: "600",

package/src/components/EventsModal.tsx

@@ -13,11 +13,11 @@ import {
   ModalHeader,
   buoyColors,
   Trash2,
-  Power,
   Copy,
   devToolsStorageKeys,
   ToolbarCopyButton,
   UpgradeModal,
+  PowerToggleButton,
 } from "@buoy-gg/shared-ui";
 import type { ModalMode } from "@buoy-gg/shared-ui";
 import { useUnifiedEvents } from "../hooks/useUnifiedEvents";
@@ -180,22 +180,11 @@ export function EventsModal({
             />
           </TouchableOpacity>
 
-          <TouchableOpacity
-            onPress={toggleCapturing}
-            style={[
-              styles.headerActionButton,
-              isCapturing ? styles.startButton : styles.stopButton,
-            ]}
-          >
-            <Power
-              size={14}
-              color={
-                isCapturing
-                  ? buoyColors.success
-                  : buoyColors.error
-              }
-            />
-          </TouchableOpacity>
+          <PowerToggleButton
+            isEnabled={isCapturing}
+            onToggle={toggleCapturing}
+            accessibilityLabel="Toggle event capture"
+          />
 
           <TouchableOpacity
             onPress={clearEvents}

package/src/components/UnifiedEventDetail.tsx

@@ -45,6 +45,9 @@ interface OptionalDetailComponents {
   NetworkEventDetailView: ComponentType<{
     event: unknown;
   }> | null;
+  RenderDetailView: ComponentType<{
+    render: unknown;
+  }> | null;
 }
 
 function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
@@ -52,6 +55,7 @@ function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
     StorageEventDetailContent: null,
     ReduxActionDetailContent: null,
     NetworkEventDetailView: null,
+    RenderDetailView: null,
   };
 
   // Try to load storage detail component
@@ -81,6 +85,15 @@ function tryLoadOptionalDetailComponents(): OptionalDetailComponents {
     // Optional dependency not installed
   }
 
+  // Try to load render detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const highlightUpdates = require("@buoy-gg/highlight-updates");
+    components.RenderDetailView = highlightUpdates.RenderDetailView;
+  } catch {
+    // Optional dependency not installed
+  }
+
   return components;
 }
 
@@ -103,6 +116,7 @@ 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" },
+  render: { label: "Render", color: "#F472B6" },
 };
 
 /**
@@ -222,6 +236,20 @@ export const UnifiedEventDetail = memo(function UnifiedEventDetail({
     );
   }
 
+  // For render events, use the RenderDetailView if available
+  if (event.source === "render" && optionalComponents.RenderDetailView) {
+    const { RenderDetailView } = optionalComponents;
+    const renderData = event.originalEvent as { render: unknown };
+
+    return (
+      <View style={styles.container}>
+        <ScrollView style={styles.content}>
+          <RenderDetailView render={renderData.render} />
+        </ScrollView>
+      </View>
+    );
+  }
+
   // Route events expand in-place in the list, so they shouldn't reach this detail view
   // If they do somehow, fall through to the generic view
 

package/src/components/UnifiedEventFilters.tsx

@@ -4,6 +4,9 @@
  * Filter bar showing toggleable badges for each available event source.
  * Badges are sorted: enabled first, disabled last.
  * Toggling a badge enables/disables event listening for that source.
+ *
+ * Badge layout (inspired by React Query DevTools):
+ * [subscriber_count] • Label [event_count]
  */
 
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
@@ -44,6 +47,9 @@ export const UnifiedEventFilters = memo(function UnifiedEventFilters({
       >
         {availableSources.map((source) => {
           const isEnabled = source.enabled !== false;
+          const subscriberCount = source.subscriberCount;
+          const hasSubscriberTracking = subscriberCount !== undefined;
+          const eventCount = source.count || 0;
 
           return (
             <TouchableOpacity
@@ -52,46 +58,99 @@ export const UnifiedEventFilters = memo(function UnifiedEventFilters({
                 styles.badge,
                 isEnabled
                   ? {
-                      backgroundColor: source.color + "20",
-                      borderColor: source.color + "60",
+                      backgroundColor: buoyColors.card,
+                      borderColor: source.color + "50",
                     }
                   : styles.badgeDisabled,
               ]}
               onPress={() => onToggleSource(source.source)}
               activeOpacity={0.7}
             >
+              {/* Subscriber count on left - only show if tracking is available */}
+              {hasSubscriberTracking && (
+                <View
+                  style={[
+                    styles.countBadge,
+                    {
+                      backgroundColor: isEnabled
+                        ? subscriberCount > 0
+                          ? source.color + "25"
+                          : buoyColors.textMuted + "20"
+                        : buoyColors.textMuted + "15",
+                    },
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.countText,
+                      {
+                        color: isEnabled
+                          ? subscriberCount > 0
+                            ? source.color
+                            : buoyColors.textMuted
+                          : buoyColors.textMuted + "60",
+                      },
+                    ]}
+                  >
+                    {subscriberCount}
+                  </Text>
+                </View>
+              )}
+
+              {/* Dot indicator */}
               <View
                 style={[
                   styles.dot,
                   {
                     backgroundColor: isEnabled
                       ? source.color
-                      : buoyColors.textMuted + "60",
+                      : buoyColors.textMuted + "40",
                   },
                 ]}
               />
+
+              {/* Label */}
               <Text
                 style={[
                   styles.badgeLabel,
                   {
-                    color: isEnabled ? source.color : buoyColors.textMuted + "80",
+                    color: isEnabled
+                      ? buoyColors.text
+                      : buoyColors.textMuted + "70",
                   },
                 ]}
               >
                 {source.label}
               </Text>
-              {isEnabled && source.count > 0 && (
+
+              {/* Event count on right */}
+              <View
+                style={[
+                  styles.countBadge,
+                  {
+                    backgroundColor: isEnabled
+                      ? eventCount > 0
+                        ? source.color + "20"
+                        : buoyColors.textMuted + "15"
+                      : buoyColors.textMuted + "10",
+                  },
+                ]}
+              >
                 <Text
                   style={[
-                    styles.badgeCount,
+                    styles.countText,
                     {
-                      color: source.color,
+                      color: isEnabled
+                        ? eventCount > 0
+                          ? source.color
+                          : buoyColors.textMuted + "80"
+                        : buoyColors.textMuted + "50",
                     },
                   ]}
                 >
-                  {source.count}
+                  {eventCount}
                 </Text>
-              )}
+              </View>
             </TouchableOpacity>
           );
         })}
@@ -122,30 +181,38 @@ const styles = StyleSheet.create({
   badge: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 16,
+    paddingVertical: 5,
+    paddingHorizontal: 6,
+    borderRadius: 20,
     borderWidth: 1,
     gap: 6,
   },
   badgeDisabled: {
     backgroundColor: buoyColors.card,
     borderColor: buoyColors.border,
-    opacity: 0.6,
+    opacity: 0.5,
   },
   dot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
+    width: 7,
+    height: 7,
+    borderRadius: 4,
   },
   badgeLabel: {
     fontSize: 12,
-    fontWeight: "600",
-  },
-  badgeCount: {
-    fontSize: 11,
     fontWeight: "500",
-    opacity: 0.8,
+  },
+  countBadge: {
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 5,
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"],
   },
   filterInfo: {
     marginTop: 6,

package/src/components/UnifiedEventItem.tsx

@@ -140,6 +140,10 @@ const SOURCE_CONFIG: Record<
     label: "Route",
     color: "#06B6D4", // Cyan
   },
+  render: {
+    label: "Render",
+    color: "#F472B6", // Pink
+  },
 };
 
 /**
@@ -216,6 +220,7 @@ const SOURCE_BADGE_LABELS: Record<EventSource, string> = {
   "react-query-query": "QUERY",
   "react-query-mutation": "MUTATION",
   route: "ROUTE",
+  render: "RENDER",
 };
 
 /**