@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/core/events/event-system.ts

@@ -0,0 +1,442 @@
+// Event system types
+export interface MediaPlayerEvent {
+  type: string
+  timestamp: number
+  target?: string
+  detail?: any
+  bubbles?: boolean
+  cancelable?: boolean
+  defaultPrevented?: boolean
+}
+
+export type EventHandler<T = any> = (event: MediaPlayerEvent & { detail: T }) => void
+export type EventUnsubscriber = () => void
+
+export interface EventOptions {
+  once?: boolean
+  passive?: boolean
+  priority?: 'high' | 'normal' | 'low'
+  filter?: (event: MediaPlayerEvent) => boolean
+}
+
+// Event categories for organization
+export type EventCategory = 
+  | 'media'      // Media playback events
+  | 'user'       // User interaction events  
+  | 'system'     // System/internal events
+  | 'plugin'     // Plugin events
+  | 'error'      // Error events
+  | 'performance' // Performance events
+
+// Standard media events
+export interface MediaEvents {
+  // Playback events
+  'media:loadstart': { src: string }
+  'media:loadeddata': { duration: number }
+  'media:canplay': {}
+  'media:canplaythrough': {}
+  'media:play': { currentTime: number }
+  'media:pause': { currentTime: number }
+  'media:ended': { duration: number }
+  'media:seeking': { currentTime: number, targetTime: number }
+  'media:seeked': { currentTime: number, previousTime: number }
+  'media:timeupdate': { currentTime: number, duration: number }
+  'media:durationchange': { duration: number }
+  'media:volumechange': { volume: number, muted: boolean }
+  'media:ratechange': { playbackRate: number }
+  
+  // Loading events
+  'media:loadedmetadata': { src: string }
+  'media:progress': { buffered: TimeRanges }
+  'media:suspend': {}
+  'media:abort': {}
+  'media:error': { error: Error }
+  'media:stalled': {}
+  'media:waiting': {}
+  
+  // User interaction events  
+  'user:click': { x: number, y: number, element: string }
+  'user:hover': { element: string }
+  'user:focus': { element: string }
+  'user:keyboard': { key: string, code: string, altKey: boolean, ctrlKey: boolean, shiftKey: boolean }
+  'user:gesture': { type: string, data: any }
+  
+  // System events
+  'system:ready': {}
+  'system:resize': { width: number, height: number }
+  'system:fullscreen': { isFullscreen: boolean }
+  'system:pip': { isPictureInPicture: boolean }
+  'system:visibility': { isVisible: boolean }
+  
+  // Plugin events
+  'plugin:loaded': { name: string }
+  'plugin:enabled': { name: string }
+  'plugin:disabled': { name: string }
+  'plugin:error': { name: string, error: Error }
+  
+  // Performance events
+  'performance:fps': { fps: number }
+  'performance:memory': { used: number, total: number }
+  'performance:load': { loadTime: number }
+}
+
+// Event bus implementation
+export class EventBus {
+  private listeners = new Map<string, Array<{
+    handler: EventHandler
+    options: EventOptions
+    id: string
+  }>>()
+  
+  private eventQueue: MediaPlayerEvent[] = []
+  private isProcessing = false
+  private middlewares: Array<(event: MediaPlayerEvent) => MediaPlayerEvent | null> = []
+  private eventHistory: MediaPlayerEvent[] = []
+  private maxHistorySize = 1000
+
+  // Subscribe to events
+  on<K extends keyof MediaEvents>(
+    type: K,
+    handler: EventHandler<MediaEvents[K]>,
+    options: EventOptions = {}
+  ): EventUnsubscriber {
+    return this.addEventListener(type, handler as EventHandler, options)
+  }
+
+  // Subscribe to events (one-time)
+  once<K extends keyof MediaEvents>(
+    type: K,
+    handler: EventHandler<MediaEvents[K]>,
+    options: EventOptions = {}
+  ): EventUnsubscriber {
+    return this.addEventListener(type, handler as EventHandler, { ...options, once: true })
+  }
+
+  // Subscribe to events with wildcard support
+  addEventListener(
+    type: string,
+    handler: EventHandler,
+    options: EventOptions = {}
+  ): EventUnsubscriber {
+    const id = this.generateId()
+    const listener = { handler, options, id }
+
+    if (!this.listeners.has(type)) {
+      this.listeners.set(type, [])
+    }
+
+    const listeners = this.listeners.get(type)!
+    
+    // Insert based on priority
+    const priority = options.priority || 'normal'
+    const priorityValue = { high: 2, normal: 1, low: 0 }[priority]
+    
+    let insertIndex = listeners.length
+    for (let i = 0; i < listeners.length; i++) {
+      const listener = listeners[i]
+      if (!listener) continue
+      const listenerPriority = listener.options.priority || 'normal'
+      if (priorityValue > { high: 2, normal: 1, low: 0 }[listenerPriority]) {
+        insertIndex = i
+        break
+      }
+    }
+    
+    listeners.splice(insertIndex, 0, listener)
+
+    // Return unsubscriber
+    return () => {
+      const index = listeners.findIndex(l => l.id === id)
+      if (index !== -1) {
+        listeners.splice(index, 1)
+      }
+      if (listeners.length === 0) {
+        this.listeners.delete(type)
+      }
+    }
+  }
+
+  // Remove event listener
+  removeEventListener(type: string, handler?: EventHandler): void {
+    const listeners = this.listeners.get(type)
+    if (!listeners) return
+
+    if (handler) {
+      const index = listeners.findIndex(l => l.handler === handler)
+      if (index !== -1) {
+        listeners.splice(index, 1)
+      }
+    } else {
+      this.listeners.delete(type)
+    }
+
+    if (listeners && listeners.length === 0) {
+      this.listeners.delete(type)
+    }
+  }
+
+  // Emit events
+  emit<K extends keyof MediaEvents>(
+    type: K,
+    detail?: MediaEvents[K],
+    options?: Partial<MediaPlayerEvent>
+  ): boolean {
+    const event: MediaPlayerEvent = {
+      type,
+      timestamp: Date.now(),
+      detail,
+      bubbles: true,
+      cancelable: true,
+      defaultPrevented: false,
+      ...options
+    }
+
+    return this.dispatchEvent(event)
+  }
+
+  // Dispatch event
+  dispatchEvent(event: MediaPlayerEvent): boolean {
+    // Apply middlewares
+    let processedEvent: MediaPlayerEvent | null = event
+    for (const middleware of this.middlewares) {
+      processedEvent = middleware(processedEvent)
+      if (!processedEvent) {
+        return false // Event was cancelled by middleware
+      }
+    }
+
+    // Add to history
+    this.addToHistory(processedEvent)
+
+    // Queue event for processing
+    this.eventQueue.push(processedEvent)
+    
+    if (!this.isProcessing) {
+      this.processEventQueue()
+    }
+
+    return !processedEvent.defaultPrevented
+  }
+
+  // Process event queue with React 19 concurrent scheduling
+  private processEventQueue(): void {
+    if (this.isProcessing) return
+
+    this.isProcessing = true
+
+    // Use scheduler for non-blocking event processing
+    const schedule = (typeof window !== 'undefined' && 'scheduler' in window)
+      ? (window as any).scheduler.postTask
+      : (cb: () => void) => setTimeout(cb, 0)
+
+    const processNext = () => {
+      if (this.eventQueue.length === 0) {
+        this.isProcessing = false
+        return
+      }
+
+      const batchSize = Math.min(this.eventQueue.length, 5) // Process max 5 events per frame
+      const events = this.eventQueue.splice(0, batchSize)
+
+      // Process events in parallel using Promise.all
+      Promise.all(events.map(event => this.processEvent(event).catch(console.error)))
+        .then(() => {
+          // Schedule next batch in next frame
+          schedule(processNext)
+        })
+        .catch(() => {
+          this.isProcessing = false
+        })
+    }
+
+    schedule(processNext)
+  }
+
+  // Process individual event
+  private async processEvent(event: MediaPlayerEvent): Promise<void> {
+    const { type } = event
+
+    // Get exact matches
+    const exactListeners = this.listeners.get(type) || []
+    
+    // Get wildcard matches
+    const wildcardListeners: typeof exactListeners = []
+    for (const [pattern, listeners] of this.listeners.entries()) {
+      if (pattern.includes('*') && this.matchPattern(type, pattern)) {
+        wildcardListeners.push(...listeners)
+      }
+    }
+
+    // Combine and sort by priority
+    const allListeners = [...exactListeners, ...wildcardListeners]
+      .sort((a, b) => {
+        const priorityA = { high: 2, normal: 1, low: 0 }[a.options.priority || 'normal']
+        const priorityB = { high: 2, normal: 1, low: 0 }[b.options.priority || 'normal']
+        return priorityB - priorityA
+      })
+
+    // Execute listeners
+    const listenersToRemove: string[] = []
+
+    for (const listener of allListeners) {
+      // Apply filter if present
+      if (listener.options.filter && !listener.options.filter(event)) {
+        continue
+      }
+
+      try {
+        // Execute handler
+        await Promise.resolve(listener.handler(event as any))
+
+        // Mark for removal if once
+        if (listener.options.once) {
+          listenersToRemove.push(listener.id)
+        }
+
+        // Stop propagation if event was cancelled
+        if (event.defaultPrevented && !event.bubbles) {
+          break
+        }
+      } catch (error) {
+        console.error(`Error in event handler for ${type}:`, error)
+        
+        // Log error instead
+        console.error(`Event handler error for ${type}:`, error)
+      }
+    }
+
+    // Remove one-time listeners
+    for (const id of listenersToRemove) {
+      for (const [eventType, listeners] of this.listeners.entries()) {
+        const index = listeners.findIndex(l => l.id === id)
+        if (index !== -1) {
+          listeners.splice(index, 1)
+          if (listeners.length === 0) {
+            this.listeners.delete(eventType)
+          }
+          break
+        }
+      }
+    }
+  }
+
+  // Add middleware
+  use(middleware: (event: MediaPlayerEvent) => MediaPlayerEvent | null): () => void {
+    this.middlewares.push(middleware)
+    return () => {
+      const index = this.middlewares.indexOf(middleware)
+      if (index !== -1) {
+        this.middlewares.splice(index, 1)
+      }
+    }
+  }
+
+  // Event history management
+  private addToHistory(event: MediaPlayerEvent): void {
+    this.eventHistory.push(event)
+    if (this.eventHistory.length > this.maxHistorySize) {
+      this.eventHistory.shift()
+    }
+  }
+
+  // Get event history
+  getHistory(filter?: (event: MediaPlayerEvent) => boolean): MediaPlayerEvent[] {
+    return filter ? this.eventHistory.filter(filter) : [...this.eventHistory]
+  }
+
+  // Clear event history
+  clearHistory(): void {
+    this.eventHistory = []
+  }
+
+  // Pattern matching for wildcards
+  private matchPattern(eventType: string, pattern: string): boolean {
+    const regex = new RegExp(
+      '^' + pattern.replace(/\*/g, '.*').replace(/\?/g, '.') + '$'
+    )
+    return regex.test(eventType)
+  }
+
+  // Generate unique ID
+  private generateId(): string {
+    return `event_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  // Get listener count
+  getListenerCount(type?: string): number {
+    if (type) {
+      return this.listeners.get(type)?.length || 0
+    }
+    return Array.from(this.listeners.values()).reduce((sum, listeners) => sum + listeners.length, 0)
+  }
+
+  // Get all event types
+  getEventTypes(): string[] {
+    return Array.from(this.listeners.keys())
+  }
+
+  // Clear all listeners
+  removeAllListeners(type?: string): void {
+    if (type) {
+      this.listeners.delete(type)
+    } else {
+      this.listeners.clear()
+    }
+  }
+
+  // Destroy event bus
+  destroy(): void {
+    this.listeners.clear()
+    this.eventQueue = []
+    this.middlewares = []
+    this.eventHistory = []
+    this.isProcessing = false
+  }
+}
+
+// Default event bus instance
+export const defaultEventBus = new EventBus()
+
+// Event delegation helper
+export class EventDelegator {
+  private eventBus: EventBus
+  private element: HTMLElement
+  private delegatedEvents = new Set<string>()
+
+  constructor(eventBus: EventBus, element: HTMLElement) {
+    this.eventBus = eventBus
+    this.element = element
+  }
+
+  // Delegate DOM events to event bus
+  delegate(domEvent: string, mediaEvent?: string): void {
+    if (this.delegatedEvents.has(domEvent)) return
+
+    const handler = (e: Event) => {
+      this.eventBus.emit(mediaEvent || `dom:${domEvent}` as any, {
+        originalEvent: e,
+        target: (e.target as HTMLElement)?.tagName.toLowerCase(),
+        currentTarget: (e.currentTarget as HTMLElement)?.tagName.toLowerCase()
+      })
+    }
+
+    this.element.addEventListener(domEvent, handler, { passive: true })
+    this.delegatedEvents.add(domEvent)
+  }
+
+  // Setup common delegations
+  setupCommonDelegations(): void {
+    this.delegate('click', 'user:click')
+    this.delegate('mouseenter', 'user:hover')
+    this.delegate('mouseleave', 'user:hover')
+    this.delegate('focus', 'user:focus')
+    this.delegate('blur', 'user:focus')
+    this.delegate('keydown', 'user:keyboard')
+    this.delegate('keyup', 'user:keyboard')
+  }
+
+  destroy(): void {
+    this.delegatedEvents.clear()
+  }
+}
+

package/dist/src/core/events/hooks.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { EventBus, type EventHandler, type EventUnsubscriber, type EventOptions, type MediaEvents } from './event-system';
+export declare function useEventBus(eventBus?: EventBus): EventBus;
+export declare function useEventListener<K extends keyof MediaEvents>(eventBus: EventBus, type: K, handler: EventHandler<MediaEvents[K]>, options?: EventOptions, deps?: React.DependencyList): void;
+export declare function useEventEmitter(eventBus: EventBus): <K extends keyof MediaEvents>(type: K, detail?: MediaEvents[K], options?: Partial<MediaEvents[K]>) => boolean;
+export declare function useEventOnce<K extends keyof MediaEvents>(eventBus: EventBus, type: K, handler: EventHandler<MediaEvents[K]>, deps?: React.DependencyList): void;
+export declare function useEventHandlers(eventBus: EventBus): {
+    on: <K extends keyof MediaEvents>(type: K, handler: EventHandler<MediaEvents[K]>, options?: EventOptions) => EventUnsubscriber;
+    removeAll: () => void;
+};
+export declare function useEventHistory(eventBus: EventBus, filter?: (event: any) => boolean, maxSize?: number): {
+    history: any[];
+    clearHistory: () => void;
+};
+export declare function useEventMetrics(eventBus: EventBus): {
+    getMetrics: () => {
+        [k: string]: {
+            count: number;
+            lastTimestamp: number;
+            frequency: number;
+        };
+    };
+    resetMetrics: () => void;
+};
+export declare function useEventDebugger(eventBus: EventBus, options?: {
+    logEvents?: boolean;
+    logMetrics?: boolean;
+    filterEventTypes?: string[];
+}): void;
+export declare function useConditionalEventListener<K extends keyof MediaEvents>(eventBus: EventBus, type: K, handler: EventHandler<MediaEvents[K]>, condition: boolean | (() => boolean), options?: EventOptions, deps?: React.DependencyList): void;
+export declare function useEventState<T>(eventBus: EventBus, initialValue: T, eventMapping: Record<string, (detail: any, currentValue: T) => T>): T;
+export declare function useEventEffect<K extends keyof MediaEvents>(eventBus: EventBus, type: K, effect: (detail: MediaEvents[K]) => void | (() => void), deps?: React.DependencyList): void;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/src/core/events/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAGzH,wBAAgB,WAAW,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAiBzD;AAGD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,WAAW,EAC1D,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACrC,OAAO,CAAC,EAAE,YAAY,EACtB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,IAAI,CAcN;AAGD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,IAC5B,CAAC,SAAS,MAAM,WAAW,QACvC,CAAC,WACE,WAAW,CAAC,CAAC,CAAC,YACb,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,aAIpC;AAGD,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,WAAW,EACtD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACrC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,IAAI,CAEN;AAGD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,QAAQ;SAGjB,CAAC,SAAS,MAAM,WAAW,QACnD,CAAC,WACE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,YAC3B,YAAY;;EAoBzB;AAGD,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,EAChC,OAAO,SAAM;;;EA2Bd;AAGD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ;;;mBAEvC,MAAM;2BACE,MAAM;uBACV,MAAM;;;;EAsCpB;AAGD,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,QAAQ,EAClB,OAAO,GAAE;IACP,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB,QAuCP;AAGD,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,WAAW,EACrE,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACrC,SAAS,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,EACpC,OAAO,CAAC,EAAE,YAAY,EACtB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,IAAI,CAWN;AAGD,wBAAgB,aAAa,CAAC,CAAC,EAC7B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,KAoBlE;AAGD,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,WAAW,EACxD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,EACvD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,IAAI,CA0BN"}

package/dist/src/core/events/hooks.js

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { EventBus } from './event-system';
+// Hook to use event bus with React
+export function useEventBus(eventBus) {
+    const eventBusRef = useRef(null);
+    if (!eventBusRef.current) {
+        eventBusRef.current = eventBus || new EventBus();
+    }
+    useEffect(() => {
+        const currentEventBus = eventBusRef.current;
+        return () => {
+            // Cleanup on unmount
+            currentEventBus.destroy();
+        };
+    }, []);
+    return eventBusRef.current;
+}
+// Hook to listen to events
+export function useEventListener(eventBus, type, handler, options, deps) {
+    const handlerRef = useRef(handler);
+    const optionsRef = useRef(options);
+    // Update refs when dependencies change
+    useEffect(() => {
+        handlerRef.current = handler;
+        optionsRef.current = options;
+    });
+    useEffect(() => {
+        const unsubscribe = eventBus.on(type, handlerRef.current, optionsRef.current);
+        return unsubscribe;
+    }, [eventBus, type, ...(deps || [])]);
+}
+// Hook to emit events
+export function useEventEmitter(eventBus) {
+    return useCallback((type, detail, options) => {
+        return eventBus.emit(type, detail, options);
+    }, [eventBus]);
+}
+// Hook for one-time event listeners
+export function useEventOnce(eventBus, type, handler, deps) {
+    useEventListener(eventBus, type, handler, { once: true }, deps);
+}
+// Hook to create event handlers with automatic cleanup
+export function useEventHandlers(eventBus) {
+    const handlersRef = useRef([]);
+    const addHandler = useCallback((type, handler, options) => {
+        const unsubscribe = eventBus.on(type, handler, options);
+        handlersRef.current.push(unsubscribe);
+        return unsubscribe;
+    }, [eventBus]);
+    const removeAllHandlers = useCallback(() => {
+        handlersRef.current.forEach(unsubscribe => unsubscribe());
+        handlersRef.current = [];
+    }, []);
+    useEffect(() => {
+        return removeAllHandlers;
+    }, [removeAllHandlers]);
+    return {
+        on: addHandler,
+        removeAll: removeAllHandlers
+    };
+}
+// Hook for event history
+export function useEventHistory(eventBus, filter, maxSize = 100) {
+    const historyRef = useRef([]);
+    useEffect(() => {
+        const unsubscribe = eventBus.addEventListener('*', (event) => {
+            if (!filter || filter(event)) {
+                historyRef.current.push(event);
+                // Limit history size
+                if (historyRef.current.length > maxSize) {
+                    historyRef.current.shift();
+                }
+            }
+        });
+        return unsubscribe;
+    }, [eventBus, filter, maxSize]);
+    const clearHistory = useCallback(() => {
+        historyRef.current = [];
+    }, []);
+    return {
+        history: historyRef.current,
+        clearHistory
+    };
+}
+// Hook for event metrics/analytics
+export function useEventMetrics(eventBus) {
+    const metricsRef = useRef(new Map());
+    useEffect(() => {
+        const updateMetrics = (event) => {
+            const existing = metricsRef.current.get(event.type) || {
+                count: 0,
+                lastTimestamp: 0,
+                frequency: 0
+            };
+            existing.count++;
+            if (existing.lastTimestamp > 0) {
+                const timeDiff = (event.timestamp - existing.lastTimestamp) / 1000; // seconds
+                existing.frequency = timeDiff > 0 ? 1 / timeDiff : 0;
+            }
+            existing.lastTimestamp = event.timestamp;
+            metricsRef.current.set(event.type, existing);
+        };
+        const unsubscribe = eventBus.addEventListener('*', updateMetrics);
+        return unsubscribe;
+    }, [eventBus]);
+    const getMetrics = useCallback(() => {
+        return Object.fromEntries(metricsRef.current.entries());
+    }, []);
+    const resetMetrics = useCallback(() => {
+        metricsRef.current.clear();
+    }, []);
+    return {
+        getMetrics,
+        resetMetrics
+    };
+}
+// Hook for event debugging
+export function useEventDebugger(eventBus, options = {}) {
+    const { logEvents = true, logMetrics = false, filterEventTypes } = options;
+    useEffect(() => {
+        if (!logEvents)
+            return;
+        const unsubscribe = eventBus.addEventListener('*', (event) => {
+            if (filterEventTypes && !filterEventTypes.includes(event.type)) {
+                return;
+            }
+            console.group(`🎯 Event: ${event.type}`);
+            console.log('Timestamp:', new Date(event.timestamp).toISOString());
+            console.log('Detail:', event.detail);
+            console.log('Bubbles:', event.bubbles);
+            console.log('Cancelable:', event.cancelable);
+            console.groupEnd();
+        });
+        return unsubscribe;
+    }, [eventBus, logEvents, filterEventTypes]);
+    useEffect(() => {
+        if (!logMetrics)
+            return;
+        const interval = setInterval(() => {
+            const listenerCount = eventBus.getListenerCount();
+            const eventTypes = eventBus.getEventTypes();
+            console.group('📊 Event Metrics');
+            console.log('Total Listeners:', listenerCount);
+            console.log('Event Types:', eventTypes.length);
+            console.log('Active Types:', eventTypes);
+            console.groupEnd();
+        }, 5000);
+        return () => clearInterval(interval);
+    }, [eventBus, logMetrics]);
+}
+// Hook for conditional event handling
+export function useConditionalEventListener(eventBus, type, handler, condition, options, deps) {
+    const shouldListen = useMemo(() => {
+        return typeof condition === 'function' ? condition() : condition;
+    }, [condition, ...(deps || [])]);
+    useEffect(() => {
+        if (!shouldListen)
+            return;
+        const unsubscribe = eventBus.on(type, handler, options);
+        return unsubscribe;
+    }, [eventBus, type, shouldListen, ...(deps || [])]);
+}
+// Hook for event state synchronization
+export function useEventState(eventBus, initialValue, eventMapping) {
+    const [state, setState] = useState(initialValue);
+    useEffect(() => {
+        const unsubscribers = [];
+        Object.entries(eventMapping).forEach(([eventType, updater]) => {
+            const unsubscribe = eventBus.addEventListener(eventType, (event) => {
+                setState(current => updater(event.detail, current));
+            });
+            unsubscribers.push(unsubscribe);
+        });
+        return () => {
+            unsubscribers.forEach(unsubscribe => unsubscribe());
+        };
+    }, [eventBus, eventMapping]);
+    return state;
+}
+// Hook for creating event-driven effects
+export function useEventEffect(eventBus, type, effect, deps) {
+    const cleanupRef = useRef(undefined);
+    useEventListener(eventBus, type, useCallback((event) => {
+        // Clean up previous effect
+        if (typeof cleanupRef.current === 'function') {
+            cleanupRef.current();
+        }
+        // Run new effect
+        cleanupRef.current = effect(event.detail);
+    }, deps || []), undefined, deps);
+    useEffect(() => {
+        return () => {
+            if (typeof cleanupRef.current === 'function') {
+                cleanupRef.current();
+            }
+        };
+    }, []);
+}