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/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;