Implements custom scroll and event logging

Adds custom scroll management for the calendar week view, replacing native scrollbars with a custom handle.

Introduces categorized event logging with console grouping and styling, enhancing debug output. It also allows configuring logging for specific event categories.

src/core/EventBus.ts

@@ -9,6 +9,17 @@ export class EventBus implements IEventBus {
   private eventLog: EventLogEntry[] = [];
   private debug: boolean = false;
   private listeners: Set<ListenerEntry> = new Set();
+  
+  // Log configuration for different categories
+  private logConfig: { [key: string]: boolean } = {
+    calendar: true,
+    grid: true,
+    event: true,
+    scroll: true,
+    navigation: true,
+    view: true,
+    default: true
+  };
 
   /**
    * Subscribe to an event via DOM addEventListener
@@ -55,9 +66,9 @@ export class EventBus implements IEventBus {
       cancelable: true
     });
 
-    // Log event
+    // Log event with grouping
     if (this.debug) {
-      console.log(`📢 Event: ${eventType}`, detail);
+      this.logEventWithGrouping(eventType, detail);
     }
 
     this.eventLog.push({
@@ -70,6 +81,77 @@ export class EventBus implements IEventBus {
     return !document.dispatchEvent(event);
   }
 
+  /**
+   * Log event with console grouping
+   */
+  private logEventWithGrouping(eventType: string, detail: any): void {
+    // Extract category from event type (e.g., 'calendar:datechanged' → 'calendar')
+    const category = this.extractCategory(eventType);
+    
+    // Only log if category is enabled
+    if (!this.logConfig[category]) {
+      return;
+    }
+
+    // Get category emoji and color
+    const { emoji, color } = this.getCategoryStyle(category);
+    
+    // Use collapsed group to reduce visual noise
+    console.groupCollapsed(`%c${emoji} ${category.toUpperCase()}`, `color: ${color}; font-weight: bold`);
+    console.log(`Event: ${eventType}`, detail);
+    console.groupEnd();
+  }
+
+  /**
+   * Extract category from event type
+   */
+  private extractCategory(eventType: string): string {
+    if (eventType.includes(':')) {
+      return eventType.split(':')[0];
+    }
+    
+    // Fallback: try to detect category from event name patterns
+    const lowerType = eventType.toLowerCase();
+    if (lowerType.includes('grid') || lowerType.includes('rendered')) return 'grid';
+    if (lowerType.includes('event') || lowerType.includes('sync')) return 'event';
+    if (lowerType.includes('scroll')) return 'scroll';
+    if (lowerType.includes('nav') || lowerType.includes('date')) return 'navigation';
+    if (lowerType.includes('view')) return 'view';
+    
+    return 'default';
+  }
+
+  /**
+   * Get styling for different categories
+   */
+  private getCategoryStyle(category: string): { emoji: string; color: string } {
+    const styles: { [key: string]: { emoji: string; color: string } } = {
+      calendar: { emoji: '🗓️', color: '#2196F3' },
+      grid: { emoji: '📊', color: '#4CAF50' },
+      event: { emoji: '📅', color: '#FF9800' },
+      scroll: { emoji: '📜', color: '#9C27B0' },
+      navigation: { emoji: '🧭', color: '#F44336' },
+      view: { emoji: '👁️', color: '#00BCD4' },
+      default: { emoji: '📢', color: '#607D8B' }
+    };
+    
+    return styles[category] || styles.default;
+  }
+
+  /**
+   * Configure logging for specific categories
+   */
+  setLogConfig(config: { [key: string]: boolean }): void {
+    this.logConfig = { ...this.logConfig, ...config };
+  }
+
+  /**
+   * Get current log configuration
+   */
+  getLogConfig(): { [key: string]: boolean } {
+    return { ...this.logConfig };
+  }
+
   /**
    * Get event history
    */