Refactors header drag interaction to eliminate ghost columns

Updates the `HeaderManager` to utilize `mouseenter` and `mouseleave` events on the calendar header for improved performance and accuracy.
Calculates the target date based on the mouse's X-coordinate within the header.

Removes the need for 'ghost columns' by simplifying the logic. This significantly reduces complexity.
The `AllDayEventRenderer` is modified to reflect this change, omitting ghost column creation.

Updates `DragDropManager` to accommodate the new interaction model.
Various console logs are added for debugging purposes.

src/managers/HeaderManager.ts

@@ -41,70 +41,137 @@ export class HeaderManager {
   }
 
   /**
-   * Setup header drag event listeners
+   * Setup header drag event listeners - REFACTORED to use mouseenter
    */
   public setupHeaderDragListeners(): void {
     const calendarHeader = this.getCalendarHeader();
     if (!calendarHeader) return;
 
-    // Throttle for better performance
-    let lastEmitTime = 0;
-    const throttleDelay = 16; // ~60fps
+    console.log('🎯 HeaderManager: Setting up drag listeners with mouseenter');
 
+    // Track last processed date to avoid duplicates
+    let lastProcessedDate: string | null = null;
+    let lastProcessedTime = 0;
+
+    // Use mouseenter instead of mouseover to avoid continuous firing
     this.headerEventListener = (event: Event) => {
-      const now = Date.now();
-      if (now - lastEmitTime < throttleDelay) {
-        return; // Throttle events for better performance
-      }
-      lastEmitTime = now;
-
       const target = event.target as HTMLElement;
       
-      // Optimized element detection - handle day headers and all-day columns
-      const dayHeader = target.closest('swp-day-header');
-      const allDayColumn = target.closest('swp-allday-column');
+      console.log('🖱️ HeaderManager: mouseenter detected on:', target.tagName, target.className);
       
-      if (dayHeader || allDayColumn) {
-        const hoveredElement = (dayHeader || allDayColumn) as HTMLElement;
-        const targetDate = hoveredElement.dataset.date;
+      // Check if we're entering the all-day container OR the header area where container should be
+      let allDayContainer = target.closest('swp-allday-container');
+      
+      // If no container exists, check if we're in the header and should create one via AllDayManager
+      if (!allDayContainer && target.closest('swp-calendar-header')) {
+        console.log('📍 HeaderManager: In header area but no all-day container exists, requesting creation...');
         
-        // Get header renderer for coordination
-        const calendarType = calendarConfig.getCalendarMode();
-        const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
+        // Emit event to AllDayManager to create container
+        eventBus.emit('allday:ensure-container');
         
-        eventBus.emit('header:mouseover', {
-          element: hoveredElement,
-          targetDate,
-          headerRenderer
-        });
+        // Try to find it again after creation
+        allDayContainer = target.closest('swp-calendar-header')?.querySelector('swp-allday-container') as HTMLElement;
+      }
+      
+      if (allDayContainer) {
+        // SMART CHECK: Only calculate target date if there's an active drag operation
+        const isDragActive = document.querySelector('.dragging') !== null;
+        
+        if (!isDragActive) {
+          console.log('⏭️ HeaderManager: No active drag operation, skipping target date calculation');
+          return;
+        }
+        
+        console.log('📍 HeaderManager: Active drag detected, calculating target date...');
+        
+        // Calculate target date from mouse X coordinate
+        const targetDate = this.calculateTargetDateFromMouseX(event as MouseEvent);
+        
+        console.log('🎯 HeaderManager: Calculated target date:', targetDate);
+        
+        if (targetDate) {
+          const calendarType = calendarConfig.getCalendarMode();
+          const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
+          
+          console.log('✅ HeaderManager: Emitting header:mouseover with targetDate:', targetDate);
+          
+          eventBus.emit('header:mouseover', {
+            element: allDayContainer,
+            targetDate,
+            headerRenderer
+          });
+        } else {
+          console.log('❌ HeaderManager: Could not calculate target date from mouse position');
+        }
       }
     };
 
     // Header mouseleave listener
     this.headerMouseLeaveListener = (event: Event) => {
+      console.log('🚪 HeaderManager: mouseleave detected');
       eventBus.emit('header:mouseleave', {
         element: event.target as HTMLElement
       });
     };
 
-    // Add event listeners
-    calendarHeader.addEventListener('mouseover', this.headerEventListener);
+    // Use mouseenter with capture to catch events early
+    calendarHeader.addEventListener('mouseenter', this.headerEventListener, true);
     calendarHeader.addEventListener('mouseleave', this.headerMouseLeaveListener);
+    
+    console.log('✅ HeaderManager: Event listeners attached (mouseenter + mouseleave)');
   }
 
   /**
-   * Remove event listeners from header
+   * Calculate target date from mouse X coordinate
+   */
+  private calculateTargetDateFromMouseX(event: MouseEvent): string | null {
+    const dayHeaders = document.querySelectorAll('swp-day-header');
+    const mouseX = event.clientX;
+    
+    console.log('🧮 HeaderManager: Calculating target date from mouseX:', mouseX);
+    console.log('📊 HeaderManager: Found', dayHeaders.length, 'day headers');
+    
+    for (const header of dayHeaders) {
+      const headerElement = header as HTMLElement;
+      const rect = headerElement.getBoundingClientRect();
+      const headerDate = headerElement.dataset.date;
+      
+      console.log('📏 HeaderManager: Checking header', headerDate, 'bounds:', {
+        left: rect.left,
+        right: rect.right,
+        mouseX: mouseX,
+        isWithin: mouseX >= rect.left && mouseX <= rect.right
+      });
+      
+      // Check if mouse X is within this header's bounds
+      if (mouseX >= rect.left && mouseX <= rect.right) {
+        console.log('🎯 HeaderManager: Found matching header for date:', headerDate);
+        return headerDate || null;
+      }
+    }
+    
+    console.log('❌ HeaderManager: No matching header found for mouseX:', mouseX);
+    return null;
+  }
+
+  /**
+   * Remove event listeners from header - UPDATED for mouseenter
    */
   private removeEventListeners(): void {
     const calendarHeader = this.getCalendarHeader();
     if (!calendarHeader) return;
 
+    console.log('🧹 HeaderManager: Removing event listeners');
+
     if (this.headerEventListener) {
-      calendarHeader.removeEventListener('mouseover', this.headerEventListener);
+      // Remove mouseenter listener with capture flag
+      calendarHeader.removeEventListener('mouseenter', this.headerEventListener, true);
+      console.log('✅ HeaderManager: Removed mouseenter listener');
     }
     
     if (this.headerMouseLeaveListener) {
       calendarHeader.removeEventListener('mouseleave', this.headerMouseLeaveListener);
+      console.log('✅ HeaderManager: Removed mouseleave listener');
     }
   }
 
@@ -186,6 +253,7 @@ export class HeaderManager {
     return calendarHeader;
   }
 
+
   /**
    * Clear cached header reference
    */