Adds EventId type for robust event ID handling

Introduces type-safe EventId with centralized normalization logic for clone and standard event IDs

Refactors event ID management across multiple components to use consistent ID transformation methods
Improves type safety and reduces potential ID-related bugs in drag-and-drop and event rendering

src/elements/SwpEventElement.ts

@@ -4,6 +4,7 @@ import { Configuration } from '../configurations/CalendarConfig';
 import { TimeFormatter } from '../utils/TimeFormatter';
 import { PositionUtils } from '../utils/PositionUtils';
 import { DateService } from '../utils/DateService';
+import { EventId } from '../types/EventId';
 
 /**
  * Base class for event elements
@@ -172,7 +173,7 @@ export class SwpEventElement extends BaseSwpEventElement {
     const clone = this.cloneNode(true) as SwpEventElement;
 
     // Apply "clone-" prefix to ID
-    clone.dataset.eventId = `clone-${this.eventId}`;
+    clone.dataset.eventId = EventId.toCloneId(this.eventId as EventId);
 
     // Disable pointer events on clone so it doesn't interfere with hover detection
     clone.style.pointerEvents = 'none';
@@ -343,7 +344,7 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
     const clone = this.cloneNode(true) as SwpAllDayEventElement;
 
     // Apply "clone-" prefix to ID
-    clone.dataset.eventId = `clone-${this.eventId}`;
+    clone.dataset.eventId = EventId.toCloneId(this.eventId as EventId);
 
     // Disable pointer events on clone so it doesn't interfere with hover detection
     clone.style.pointerEvents = 'none';

src/managers/AllDayManager.ts

@@ -22,6 +22,7 @@ import { IDragOffset, IMousePosition } from '../types/DragDropTypes';
 import { CoreEvents } from '../constants/CoreEvents';
 import { EventManager } from './EventManager';
 import { DateService } from '../utils/DateService';
+import { EventId } from '../types/EventId';
 
 /**
  * AllDayManager - Handles all-day row height animations and management
@@ -500,7 +501,7 @@ export class AllDayManager {
     if (!dragEndEvent.draggedClone || !dragEndEvent.finalPosition.column) return;
 
     const clone = dragEndEvent.draggedClone as SwpAllDayEventElement;
-    const eventId = clone.eventId.replace('clone-', '');
+    const eventId = EventId.from(clone.eventId);
     const columnIdentifier = dragEndEvent.finalPosition.column.identifier;
 
     // Determine target date based on mode
@@ -568,7 +569,7 @@ export class AllDayManager {
     if (!dragEndEvent.draggedClone || !dragEndEvent.finalPosition.column) return;
 
     const clone = dragEndEvent.draggedClone as SwpAllDayEventElement;
-    const eventId = clone.eventId.replace('clone-', '');
+    const eventId = EventId.from(clone.eventId);
     const columnIdentifier = dragEndEvent.finalPosition.column.identifier;
 
     // Determine target date based on mode

src/renderers/EventRenderer.ts

@@ -10,6 +10,7 @@ import { IDragColumnChangeEventPayload, IDragMoveEventPayload, IDragStartEventPa
 import { DateService } from '../utils/DateService';
 import { EventStackManager } from '../managers/EventStackManager';
 import { EventLayoutCoordinator, IGridGroupLayout, IStackedEventLayout } from '../managers/EventLayoutCoordinator';
+import { EventId } from '../types/EventId';
 
 /**
  * Interface for event rendering strategies
@@ -165,22 +166,14 @@ export class DateEventRenderer implements IEventRenderer {
    * Handle drag end event
    */
   public handleDragEnd(originalElement: HTMLElement, draggedClone: HTMLElement, finalColumn: IColumnBounds, finalY: number): void {
-    if (!draggedClone || !originalElement) {
-      console.warn('Missing draggedClone or originalElement');
-      return;
-    }
-
+  
     // Only fade out and remove if it's a swp-event (not swp-allday-event)
     // AllDayManager handles removal of swp-allday-event elements
     if (originalElement.tagName === 'SWP-EVENT') {
       this.fadeOutAndRemove(originalElement);
     }
 
-    // Remove clone prefix and normalize clone to be a regular event
-    const cloneId = draggedClone.dataset.eventId;
-    if (cloneId && cloneId.startsWith('clone-')) {
-      draggedClone.dataset.eventId = cloneId.replace('clone-', '');
-    }
+    draggedClone.dataset.eventId = EventId.from(draggedClone.dataset.eventId!);
 
     // Fully normalize the clone to be a regular event
     draggedClone.classList.remove('dragging');
@@ -192,7 +185,7 @@ export class DateEventRenderer implements IEventRenderer {
 
 
     // Clean up any remaining day event clones
-    const dayEventClone = document.querySelector(`swp-event[data-event-id="clone-${cloneId}"]`);
+    const dayEventClone = document.querySelector(`swp-event[data-event-id="${draggedClone.dataset.eventId}"]`);
     if (dayEventClone) {
       dayEventClone.remove();
     }

src/types/EventId.ts

@@ -0,0 +1,31 @@
+/**
+ * Branded type for Event IDs
+ * Ensures type-safety and centralizes ID normalization logic
+ */
+export type EventId = string & { readonly __brand: 'EventId' };
+
+/**
+ * EventId utility functions
+ */
+export const EventId = {
+  /**
+   * Create EventId from string, normalizing clone- prefix
+   */
+  from(id: string): EventId {
+    return id.replace('clone-', '') as EventId;
+  },
+
+  /**
+   * Check if raw ID is a clone
+   */
+  isClone(id: string): boolean {
+    return id.startsWith('clone-');
+  },
+
+  /**
+   * Create clone ID string from EventId
+   */
+  toCloneId(id: EventId): string {
+    return `clone-${id}`;
+  }
+};