@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,397 +1,404 @@
 // Event system types
 export interface MediaPlayerEvent {
-  type: string
-  timestamp: number
-  target?: string
-  detail?: any
-  bubbles?: boolean
-  cancelable?: boolean
-  defaultPrevented?: boolean
+	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
+	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
+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 }
+	// 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
-  }
+	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
@@ -399,44 +406,43 @@ 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()
-  }
+	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()
+	}
 }
-