Improves all-day event drag and drop

Enhances the drag and drop experience for all-day events by expanding the header to display the all-day row when dragging an event over it.

Introduces constants for all-day event layout.

src/renderers/EventRenderer.ts

@@ -1,6 +1,7 @@
 // Event rendering strategy interface and implementations
 
 import { CalendarEvent } from '../types/CalendarTypes';
+import { ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
 import { CalendarConfig } from '../core/CalendarConfig';
 import { DateCalculator } from '../utils/DateCalculator';
 
@@ -181,12 +182,8 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     });
     
     // Calculate and set the all-day row height based on max stack
-    // Each event is 22px height + 2px gap
-    const eventHeight = 22;
-    const gap = 2;
-    const padding = 4; // Container padding (2px top + 2px bottom)
     const calculatedHeight = maxStackHeight > 0 
-      ? (maxStackHeight * eventHeight) + ((maxStackHeight - 1) * gap) + padding
+      ? (maxStackHeight * ALL_DAY_CONSTANTS.EVENT_HEIGHT) + ((maxStackHeight - 1) * ALL_DAY_CONSTANTS.EVENT_GAP) + ALL_DAY_CONSTANTS.CONTAINER_PADDING
       : 0; // No height if no events
     
     // Set CSS variable for row height

src/renderers/GridRenderer.ts

@@ -3,6 +3,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes';
 import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
 import { HeaderRenderContext } from './HeaderRenderer';
 import { ColumnRenderContext } from './ColumnRenderer';
+import { eventBus } from '../core/EventBus';
 /**
  * GridRenderer - Handles DOM rendering for the calendar grid
  * Separated from GridManager to follow Single Responsibility Principle
@@ -133,6 +134,14 @@ export class GridRenderer {
     };
 
     headerRenderer.render(calendarHeader, context);
+    
+    // Add mouseover listeners on day headers for drag detection
+    const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
+    dayHeaders.forEach(dayHeader => {
+      dayHeader.addEventListener('mouseover', () => {
+        eventBus.emit('header:mouseover', { dayHeader, headerRenderer });
+      });
+    });
   }
 
   /**

src/renderers/HeaderRenderer.ts

@@ -1,6 +1,6 @@
 // Header rendering strategy interface and implementations
 
-import { CalendarConfig } from '../core/CalendarConfig';
+import { CalendarConfig, ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
 import { ResourceCalendarData } from '../types/CalendarTypes';
 import { DateCalculator } from '../utils/DateCalculator';
 
@@ -9,6 +9,71 @@ import { DateCalculator } from '../utils/DateCalculator';
  */
 export interface HeaderRenderer {
   render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
+  addToAllDay(dayHeader: HTMLElement): void;
+}
+
+/**
+ * Base class with shared addToAllDay implementation
+ */
+export abstract class BaseHeaderRenderer implements HeaderRenderer {
+  abstract render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
+
+  /**
+   * Expand header to show all-day row
+   */
+  addToAllDay(dayHeader: HTMLElement): void {
+    const root = document.documentElement;
+    const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
+    
+    if (currentHeight === 0) {
+      // Find the calendar header element to animate
+      const calendarHeader = dayHeader.closest('swp-calendar-header') as HTMLElement;
+      if (calendarHeader) {
+        this.animateHeaderExpansion(calendarHeader);
+      }
+      console.log('BaseHeaderRenderer: Header expanded for all-day row');
+    }
+  }
+
+  private animateHeaderExpansion(calendarHeader: HTMLElement): void {
+    const root = document.documentElement;
+    const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height') || '80');
+    const targetHeight = currentHeaderHeight + ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
+    
+    // Find header spacer
+    const headerSpacer = document.querySelector('swp-header-spacer') as HTMLElement;
+    
+    // Animate both header and spacer simultaneously
+    const animations = [
+      calendarHeader.animate([
+        { height: `${currentHeaderHeight}px` },
+        { height: `${targetHeight}px` }
+      ], {
+        duration: 300,
+        easing: 'ease-out',
+        fill: 'forwards'
+      })
+    ];
+    
+    if (headerSpacer) {
+      animations.push(
+        headerSpacer.animate([
+          { height: `${currentHeaderHeight}px` },
+          { height: `${targetHeight}px` }
+        ], {
+          duration: 300,
+          easing: 'ease-out',
+          fill: 'forwards'
+        })
+      );
+    }
+    
+    // Wait for all animations to finish
+    Promise.all(animations.map(anim => anim.finished)).then(() => {
+      // Set the CSS variable after animation
+      root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
+    });
+  }
 }
 
 /**
@@ -23,7 +88,7 @@ export interface HeaderRenderContext {
 /**
  * Date-based header renderer (original functionality)
  */
-export class DateHeaderRenderer implements HeaderRenderer {
+export class DateHeaderRenderer extends BaseHeaderRenderer {
   private dateCalculator!: DateCalculator;
 
   render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
@@ -53,14 +118,12 @@ export class DateHeaderRenderer implements HeaderRenderer {
       calendarHeader.appendChild(header);
     });
   }
-
-
 }
 
 /**
  * Resource-based header renderer
  */
-export class ResourceHeaderRenderer implements HeaderRenderer {
+export class ResourceHeaderRenderer extends BaseHeaderRenderer {
   render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
     const { resourceData } = context;