@mintplayer/scheduler-wc 1.0.1 → 1.1.0

package/src/components/mp-scheduler.js

@@ -6,58 +6,67 @@ import { WeekView } from '../views/week-view';
 import { DayView } from '../views/day-view';
 import { TimelineView } from '../views/timeline-view';
 import { schedulerStyles } from '../styles/scheduler.styles';
+import { DragManager } from '../drag';
+import { InputHandler } from '../input';
+import { SchedulerEventEmitter } from '../events';
 /**
  * MpScheduler Web Component
  *
- * A fully-featured scheduler/calendar component
+ * A fully-featured scheduler/calendar component.
+ * Refactored for clarity with separated concerns:
+ * - DragManager: Handles all drag operations
+ * - InputHandler: Normalizes mouse/touch input
+ * - SchedulerEventEmitter: Dispatches custom events
  */
 export class MpScheduler extends HTMLElement {
     constructor() {
         super();
         this.currentView = null;
+        this.currentViewType = null;
         this.contentContainer = null;
         // Track previous state for change detection
         this.previousView = null;
         this.previousDate = null;
         this.previousSelectedEventId = null;
-        // Pending drag state (before actual drag starts)
-        this.pendingDrag = null;
-        this.DRAG_THRESHOLD = 5; // pixels before drag starts
-        // Touch state
-        this.touchHoldTimer = null;
-        this.touchStartPosition = null;
-        this.isTouchDragMode = false;
-        this.touchHoldTarget = null;
-        this.TOUCH_HOLD_DURATION = 500; // ms before touch drag activates
-        this.TOUCH_MOVE_THRESHOLD = 10; // pixels of movement before canceling hold
-        // RAF scheduling for drag updates (ensures browser can repaint during drag)
+        // RAF scheduling for drag updates
         this.pendingDragUpdate = null;
         this.latestDragState = null;
         this.shadow = this.attachShadow({ mode: 'open' });
         this.stateManager = new SchedulerStateManager();
-        // Bind event handlers
-        this.boundHandleMouseDown = this.handleMouseDown.bind(this);
-        this.boundHandleMouseMove = this.handleMouseMove.bind(this);
-        this.boundHandleMouseUp = this.handleMouseUp.bind(this);
-        this.boundHandleClick = this.handleClick.bind(this);
-        this.boundHandleDblClick = this.handleDblClick.bind(this);
+        this.eventEmitter = new SchedulerEventEmitter(this);
+        // Initialize drag manager
+        this.dragManager = new DragManager(this.stateManager);
+        this.dragManager.setSlotResolver((x, y) => this.getSlotAtPosition(x, y));
+        // Initialize input handler
+        this.inputHandler = new InputHandler({
+            shadowRoot: this.shadow,
+            getEventById: (id) => this.getEventById(id),
+            isEditable: () => { var _a; return (_a = this.stateManager.getState().options.editable) !== null && _a !== void 0 ? _a : true; },
+            isSelectable: () => { var _a; return (_a = this.stateManager.getState().options.selectable) !== null && _a !== void 0 ? _a : true; },
+        }, {
+            onPointerDown: (pointer, target, immediate) => this.handlePointerDown(pointer, target, immediate),
+            onPointerMove: (pointer) => this.handlePointerMove(pointer),
+            onPointerUp: (pointer) => this.handlePointerUp(pointer),
+            onClick: (pointer, target) => this.handleClick(pointer, target),
+            onDoubleClick: (pointer, target) => this.handleDoubleClick(pointer, target),
+        });
+        // Bind keyboard handler
         this.boundHandleKeyDown = this.handleKeyDown.bind(this);
-        this.boundHandleTouchStart = this.handleTouchStart.bind(this);
-        this.boundHandleTouchMove = this.handleTouchMove.bind(this);
-        this.boundHandleTouchEnd = this.handleTouchEnd.bind(this);
-        this.boundHandleTouchCancel = this.handleTouchCancel.bind(this);
         // Subscribe to state changes
         this.stateManager.subscribe((state) => this.onStateChange(state));
     }
     connectedCallback() {
         this.render();
-        this.attachEventListeners();
+        this.inputHandler.attach();
+        this.addEventListener('keydown', this.boundHandleKeyDown);
     }
     disconnectedCallback() {
         var _a;
-        this.detachEventListeners();
+        this.inputHandler.detach();
+        this.removeEventListener('keydown', this.boundHandleKeyDown);
         (_a = this.currentView) === null || _a === void 0 ? void 0 : _a.destroy();
-        // Cancel any pending RAF to prevent memory leaks
+        this.dragManager.destroy();
+        // Cancel any pending RAF
         if (this.pendingDragUpdate !== null) {
             cancelAnimationFrame(this.pendingDragUpdate);
             this.pendingDragUpdate = null;
@@ -87,7 +96,9 @@ export class MpScheduler extends HTMLElement {
                 if (newValue) {
                     const day = parseInt(newValue, 10);
                     if (day >= 0 && day <= 6) {
-                        this.stateManager.setOptions({ firstDayOfWeek: day });
+                        this.stateManager.setOptions({
+                            firstDayOfWeek: day,
+                        });
                     }
                 }
                 break;
@@ -109,7 +120,9 @@ export class MpScheduler extends HTMLElement {
                 break;
         }
     }
+    // ============================================
     // Public API
+    // ============================================
     get view() {
         return this.stateManager.getState().view;
     }
@@ -183,27 +196,23 @@ export class MpScheduler extends HTMLElement {
     }
     refetchEvents() {
         var _a;
-        // Trigger re-render
         (_a = this.currentView) === null || _a === void 0 ? void 0 : _a.update(this.stateManager.getState());
     }
-    // Private methods
+    // ============================================
+    // Rendering
+    // ============================================
     render() {
-        // Add styles
         const style = document.createElement('style');
         style.textContent = schedulerStyles;
         this.shadow.appendChild(style);
-        // Create container
         const container = document.createElement('div');
         container.className = 'scheduler-container';
-        // Header
         const header = this.createHeader();
         container.appendChild(header);
-        // Content
         this.contentContainer = document.createElement('div');
         this.contentContainer.className = 'scheduler-content';
         container.appendChild(this.contentContainer);
         this.shadow.appendChild(container);
-        // Initial view render
         this.renderView();
     }
     createHeader() {
@@ -276,7 +285,14 @@ export class MpScheduler extends HTMLElement {
             case 'timeline': {
                 const weekStart = dateService.getWeekStart(date, options.firstDayOfWeek);
                 const weekEnd = dateService.addDays(weekStart, 6);
-                titleText = `${dateService.formatDate(weekStart, options.locale, { month: 'short', day: 'numeric' })} - ${dateService.formatDate(weekEnd, options.locale, { month: 'short', day: 'numeric', year: 'numeric' })}`;
+                titleText = `${dateService.formatDate(weekStart, options.locale, {
+                    month: 'short',
+                    day: 'numeric',
+                })} - ${dateService.formatDate(weekEnd, options.locale, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                })}`;
                 break;
             }
             case 'day':
@@ -294,55 +310,58 @@ export class MpScheduler extends HTMLElement {
         var _a, _b;
         if (!this.contentContainer)
             return;
-        // Destroy previous view
         (_a = this.currentView) === null || _a === void 0 ? void 0 : _a.destroy();
         const state = this.stateManager.getState();
-        // Create new view
         switch (state.view) {
             case 'year':
                 this.currentView = new YearView(this.contentContainer, state);
+                this.currentViewType = 'year';
                 break;
             case 'month':
                 this.currentView = new MonthView(this.contentContainer, state);
+                this.currentViewType = 'month';
                 break;
             case 'week':
                 this.currentView = new WeekView(this.contentContainer, state);
+                this.currentViewType = 'week';
                 break;
             case 'day':
                 this.currentView = new DayView(this.contentContainer, state);
+                this.currentViewType = 'day';
                 break;
             case 'timeline':
                 this.currentView = new TimelineView(this.contentContainer, state);
+                this.currentViewType = 'timeline';
                 break;
         }
         (_b = this.currentView) === null || _b === void 0 ? void 0 : _b.render();
     }
+    // ============================================
+    // State Change Handling
+    // ============================================
     onStateChange(state) {
+        this.detectAndEmitChanges(state);
+        this.updateUI(state);
+    }
+    detectAndEmitChanges(state) {
         var _a, _b;
-        // Detect view/date changes and dispatch events
         const viewChanged = this.previousView !== null && this.previousView !== state.view;
-        const dateChanged = this.previousDate !== null && this.previousDate.getTime() !== state.date.getTime();
+        const dateChanged = this.previousDate !== null &&
+            this.previousDate.getTime() !== state.date.getTime();
         const selectedEventId = (_b = (_a = state.selectedEvent) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
-        const selectionChanged = this.previousSelectedEventId !== null && this.previousSelectedEventId !== selectedEventId;
-        // Dispatch view-change event if view or date changed (but not on initial render)
+        const selectionChanged = this.previousSelectedEventId !== null &&
+            this.previousSelectedEventId !== selectedEventId;
         if (viewChanged || dateChanged) {
-            this.dispatchEvent(new CustomEvent('view-change', {
-                detail: { view: state.view, date: state.date },
-                bubbles: true,
-            }));
+            this.eventEmitter.emitViewChange(state.view, state.date);
         }
-        // Dispatch selection-change event if selected event changed (but not on initial render)
         if (selectionChanged) {
-            this.dispatchEvent(new CustomEvent('selection-change', {
-                detail: { selectedEvent: state.selectedEvent },
-                bubbles: true,
-            }));
+            this.eventEmitter.emitSelectionChange(state.selectedEvent);
         }
-        // Update previous state tracking
         this.previousView = state.view;
         this.previousDate = new Date(state.date);
         this.previousSelectedEventId = selectedEventId;
-        // Update title
+    }
+    updateUI(state) {
         this.updateTitle();
         // Update view switcher active state
         const buttons = this.shadow.querySelectorAll('.scheduler-view-switcher button');
@@ -352,42 +371,24 @@ export class MpScheduler extends HTMLElement {
         });
         // Update or re-render view
         if (this.currentView) {
-            // Check if view type changed
-            const viewTypeChanged = this.viewTypeChanged(state.view);
-            if (viewTypeChanged) {
+            if (this.currentViewType !== state.view) {
                 this.renderView();
             }
+            else if (state.dragState || state.previewEvent) {
+                this.scheduleDragUpdate(state);
+            }
             else {
-                // During drag operations, use requestAnimationFrame to ensure the browser
-                // can repaint between updates. This fixes the issue where drag previews
-                // don't appear in production builds with zoneless Angular.
-                if (state.dragState || state.previewEvent) {
-                    this.scheduleDragUpdate(state);
-                }
-                else {
-                    // For non-drag updates, process synchronously for responsiveness
-                    this.currentView.update(state);
-                }
+                this.currentView.update(state);
             }
         }
     }
-    /**
-     * Schedule a drag-related view update using requestAnimationFrame.
-     * This ensures the browser has time to repaint between drag updates,
-     * which is necessary for drag previews to appear in production builds.
-     */
     scheduleDragUpdate(state) {
-        // Store the latest state
         this.latestDragState = state;
-        // If there's already a pending update, don't schedule another one
-        // The pending update will use the latest state when it executes
         if (this.pendingDragUpdate !== null) {
             return;
         }
-        // Schedule the update for the next animation frame
         this.pendingDragUpdate = requestAnimationFrame(() => {
             this.pendingDragUpdate = null;
-            // Use the latest state (in case multiple updates were batched)
             const stateToApply = this.latestDragState;
             this.latestDragState = null;
             if (stateToApply && this.currentView) {
@@ -395,180 +396,60 @@ export class MpScheduler extends HTMLElement {
             }
         });
     }
-    viewTypeChanged(newView) {
-        if (!this.currentView)
-            return true;
-        const viewClass = this.currentView.constructor.name.toLowerCase();
-        return !viewClass.includes(newView);
+    // ============================================
+    // Input Handling (Callbacks from InputHandler)
+    // ============================================
+    handlePointerDown(pointer, target, immediate) {
+        this.dragManager.handlePointerDown(pointer, target, immediate);
     }
-    attachEventListeners() {
-        const root = this.shadow;
-        root.addEventListener('mousedown', this.boundHandleMouseDown);
-        document.addEventListener('mousemove', this.boundHandleMouseMove);
-        document.addEventListener('mouseup', this.boundHandleMouseUp);
-        root.addEventListener('click', this.boundHandleClick);
-        root.addEventListener('dblclick', this.boundHandleDblClick);
-        this.addEventListener('keydown', this.boundHandleKeyDown);
-        // Touch events
-        root.addEventListener('touchstart', this.boundHandleTouchStart, { passive: false });
-        root.addEventListener('touchmove', this.boundHandleTouchMove, { passive: false });
-        root.addEventListener('touchend', this.boundHandleTouchEnd);
-        root.addEventListener('touchcancel', this.boundHandleTouchCancel);
+    handlePointerMove(pointer) {
+        this.dragManager.handlePointerMove(pointer);
     }
-    detachEventListeners() {
-        const root = this.shadow;
-        root.removeEventListener('mousedown', this.boundHandleMouseDown);
-        document.removeEventListener('mousemove', this.boundHandleMouseMove);
-        document.removeEventListener('mouseup', this.boundHandleMouseUp);
-        root.removeEventListener('click', this.boundHandleClick);
-        root.removeEventListener('dblclick', this.boundHandleDblClick);
-        this.removeEventListener('keydown', this.boundHandleKeyDown);
-        // Touch events
-        root.removeEventListener('touchstart', this.boundHandleTouchStart);
-        root.removeEventListener('touchmove', this.boundHandleTouchMove);
-        root.removeEventListener('touchend', this.boundHandleTouchEnd);
-        root.removeEventListener('touchcancel', this.boundHandleTouchCancel);
-        this.cancelTouchHold();
-    }
-    handleMouseDown(e) {
-        const state = this.stateManager.getState();
-        if (!state.options.editable)
-            return;
-        const target = e.target;
-        // Check for resize handle - start drag immediately (no click behavior)
-        const resizeHandle = target.closest('.resize-handle');
-        if (resizeHandle) {
-            const eventEl = resizeHandle.closest('.scheduler-event');
-            const eventId = eventEl === null || eventEl === void 0 ? void 0 : eventEl.dataset['eventId'];
-            const event = eventId ? this.getEventById(eventId) : null;
-            if (event) {
-                const handleType = resizeHandle.dataset['handle'];
-                this.pendingDrag = {
-                    type: ('resize-' + handleType),
-                    event,
-                    startX: e.clientX,
-                    startY: e.clientY,
-                };
-                e.preventDefault();
-                return;
-            }
-        }
-        // Check for event - set up pending drag (actual drag starts on mouse move)
-        const eventEl = target.closest('.scheduler-event:not(.preview)');
-        if (eventEl && !eventEl.classList.contains('preview')) {
-            const eventId = eventEl.dataset['eventId'];
-            const event = eventId ? this.getEventById(eventId) : null;
-            if (event && event.draggable !== false) {
-                this.pendingDrag = {
-                    type: 'move',
-                    event,
-                    startX: e.clientX,
-                    startY: e.clientY,
-                };
-                e.preventDefault();
-                return;
-            }
-        }
-        // Check for slot - set up pending drag for create
-        const slotEl = target.closest('.scheduler-time-slot, .scheduler-timeline-slot');
-        if (slotEl && state.options.selectable) {
-            this.pendingDrag = {
-                type: 'create',
-                event: null,
-                startX: e.clientX,
-                startY: e.clientY,
-                slotEl,
-            };
-            e.preventDefault();
+    handlePointerUp(pointer) {
+        const result = this.dragManager.handlePointerUp(pointer);
+        if (result) {
+            this.handleDragComplete(result, pointer.originalEvent);
         }
     }
-    handleMouseMove(e) {
-        // Check if we have a pending drag that should start
-        if (this.pendingDrag) {
-            const dx = e.clientX - this.pendingDrag.startX;
-            const dy = e.clientY - this.pendingDrag.startY;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance >= this.DRAG_THRESHOLD) {
-                // Start the actual drag
-                this.startDrag(this.pendingDrag.type, this.pendingDrag.event, e, this.pendingDrag.slotEl);
-                this.pendingDrag = null;
+    handleDragComplete(result, originalEvent) {
+        if (result.wasClick) {
+            // It was a click, not a drag
+            if (result.event) {
+                this.stateManager.setSelectedEvent(result.event);
+                this.eventEmitter.emitEventClick(result.event, originalEvent);
             }
             return;
         }
-        const state = this.stateManager.getState();
-        if (!state.dragState)
-            return;
-        const slot = this.getSlotAtPosition(e.clientX, e.clientY);
-        if (!slot)
-            return;
-        const preview = this.calculatePreview(state.dragState.type, state.dragState, slot);
-        if (preview) {
-            this.stateManager.updateDrag(slot, preview);
-        }
-    }
-    handleMouseUp(e) {
-        // If we had a pending drag that never started, it's a click
-        if (this.pendingDrag) {
-            const { type, event } = this.pendingDrag;
-            this.pendingDrag = null;
-            // If it was on an event, select it
-            if (type === 'move' && event) {
-                this.stateManager.setSelectedEvent(event);
-                this.dispatchEvent(new CustomEvent('event-click', {
-                    detail: { event, originalEvent: e },
-                    bubbles: true,
-                }));
-            }
-            return;
-        }
-        const state = this.stateManager.getState();
-        if (!state.dragState)
-            return;
-        const { type, event, preview } = state.dragState;
-        // Finalize the drag operation
-        if (preview) {
-            if (type === 'create') {
-                // Create new event
+        // Handle actual drag completion
+        switch (result.type) {
+            case 'create': {
                 const newEvent = {
                     id: generateEventId(),
                     title: 'New Event',
-                    start: preview.start,
-                    end: preview.end,
+                    start: result.preview.start,
+                    end: result.preview.end,
                     color: '#3788d8',
                 };
                 this.stateManager.addEvent(newEvent);
-                this.dispatchEvent(new CustomEvent('event-create', {
-                    detail: { event: newEvent, originalEvent: e },
-                    bubbles: true,
-                }));
-            }
-            else if (type === 'move' && event) {
-                // Move event
-                const oldEvent = Object.assign({}, event);
-                const updatedEvent = Object.assign(Object.assign({}, event), { start: preview.start, end: preview.end });
-                this.stateManager.updateEvent(updatedEvent);
-                this.dispatchEvent(new CustomEvent('event-update', {
-                    detail: { event: updatedEvent, oldEvent, originalEvent: e },
-                    bubbles: true,
-                }));
+                this.eventEmitter.emitEventCreate(newEvent, originalEvent);
+                break;
             }
-            else if ((type === 'resize-start' || type === 'resize-end') && event) {
-                // Resize event
-                const oldEvent = Object.assign({}, event);
-                const updatedEvent = Object.assign(Object.assign({}, event), { start: preview.start, end: preview.end });
-                this.stateManager.updateEvent(updatedEvent);
-                this.dispatchEvent(new CustomEvent('event-update', {
-                    detail: { event: updatedEvent, oldEvent, originalEvent: e },
-                    bubbles: true,
-                }));
+            case 'move':
+            case 'resize-start':
+            case 'resize-end': {
+                if (result.event && result.originalEvent) {
+                    const updatedEvent = Object.assign(Object.assign({}, result.event), { start: result.preview.start, end: result.preview.end });
+                    this.stateManager.updateEvent(updatedEvent);
+                    this.eventEmitter.emitEventUpdate(updatedEvent, result.originalEvent, originalEvent);
+                }
+                break;
             }
         }
-        this.stateManager.endDrag();
     }
-    handleClick(e) {
-        const target = e.target;
+    handleClick(pointer, target) {
+        const targetEl = pointer.target;
         // Group toggle
-        const toggle = target.closest('.expand-toggle');
+        const toggle = targetEl.closest('.expand-toggle');
         if (toggle) {
             const groupId = toggle.dataset['groupId'];
             if (groupId) {
@@ -577,25 +458,16 @@ export class MpScheduler extends HTMLElement {
                 return;
             }
         }
-        // Event clicks are handled in handleMouseUp (via pendingDrag)
-        // Skip event click handling here to avoid duplicates
-        const eventEl = target.closest('.scheduler-event');
-        if (eventEl) {
-            return;
-        }
         // Date click
-        const dayEl = target.closest('[data-date]');
+        const dayEl = targetEl.closest('[data-date]');
         if (dayEl) {
             const dateStr = dayEl.dataset['date'];
             if (dateStr) {
-                this.dispatchEvent(new CustomEvent('date-click', {
-                    detail: { date: new Date(dateStr), originalEvent: e },
-                    bubbles: true,
-                }));
+                this.eventEmitter.emitDateClick(new Date(dateStr), pointer.originalEvent);
             }
         }
         // Month click in year view
-        const monthHeader = target.closest('.scheduler-year-month-header');
+        const monthHeader = targetEl.closest('.scheduler-year-month-header');
         if (monthHeader) {
             const monthStr = monthHeader.dataset['month'];
             if (monthStr) {
@@ -604,7 +476,7 @@ export class MpScheduler extends HTMLElement {
             }
         }
         // More link click
-        const moreLink = target.closest('.scheduler-more-link');
+        const moreLink = targetEl.closest('.scheduler-more-link');
         if (moreLink) {
             const dateStr = moreLink.dataset['date'];
             if (dateStr) {
@@ -613,18 +485,9 @@ export class MpScheduler extends HTMLElement {
             }
         }
     }
-    handleDblClick(e) {
-        const target = e.target;
-        const eventEl = target.closest('.scheduler-event');
-        if (eventEl) {
-            const eventId = eventEl.dataset['eventId'];
-            const event = eventId ? this.getEventById(eventId) : null;
-            if (event) {
-                this.dispatchEvent(new CustomEvent('event-dblclick', {
-                    detail: { event, originalEvent: e },
-                    bubbles: true,
-                }));
-            }
+    handleDoubleClick(pointer, target) {
+        if (target.type === 'event' && target.event) {
+            this.eventEmitter.emitEventDblClick(target.event, pointer.originalEvent);
         }
     }
     handleKeyDown(e) {
@@ -666,84 +529,22 @@ export class MpScheduler extends HTMLElement {
             case 'Delete':
             case 'Backspace':
                 if (state.selectedEvent) {
-                    this.dispatchEvent(new CustomEvent('event-delete', {
-                        detail: { event: state.selectedEvent },
-                        bubbles: true,
-                    }));
+                    this.eventEmitter.emitEventDelete(state.selectedEvent);
                 }
                 break;
             case 'Escape':
-                if (state.dragState) {
-                    this.stateManager.endDrag();
+                if (this.dragManager.isDragging()) {
+                    this.dragManager.cancel();
                 }
                 break;
         }
     }
-    startDrag(type, event, mouseEvent, slotEl) {
-        const slot = slotEl
-            ? this.getSlotFromElement(slotEl)
-            : this.getSlotAtPosition(mouseEvent.clientX, mouseEvent.clientY);
-        if (!slot)
-            return;
-        let preview;
-        if (type === 'create') {
-            preview = {
-                start: slot.start,
-                end: slot.end,
-            };
-        }
-        else if (event) {
-            preview = {
-                start: event.start,
-                end: event.end,
-            };
-        }
-        else {
-            return;
-        }
-        this.stateManager.startDrag({
-            type,
-            event,
-            startSlot: slot,
-            currentSlot: slot,
-            preview,
-            originalEvent: event ? Object.assign({}, event) : undefined,
-            meta: type.startsWith('resize-')
-                ? { resizeHandle: type.replace('resize-', '') }
-                : undefined,
-        });
-    }
-    calculatePreview(type, dragState, currentSlot) {
-        const { startSlot, event, originalEvent } = dragState;
-        if (type === 'create') {
-            // Extend selection from start slot to current slot
-            const start = new Date(Math.min(startSlot.start.getTime(), currentSlot.start.getTime()));
-            const end = new Date(Math.max(startSlot.end.getTime(), currentSlot.end.getTime()));
-            return { start, end };
-        }
-        if (type === 'move' && originalEvent) {
-            // Calculate offset and apply to event
-            const offsetMs = currentSlot.start.getTime() - startSlot.start.getTime();
-            const duration = originalEvent.end.getTime() - originalEvent.start.getTime();
-            const newStart = new Date(originalEvent.start.getTime() + offsetMs);
-            const newEnd = new Date(newStart.getTime() + duration);
-            return { start: newStart, end: newEnd };
-        }
-        if (type === 'resize-start' && originalEvent) {
-            // Move start, keep end fixed
-            const newStart = new Date(Math.min(currentSlot.start.getTime(), originalEvent.end.getTime() - 1800000));
-            return { start: newStart, end: originalEvent.end };
-        }
-        if (type === 'resize-end' && originalEvent) {
-            // Move end, keep start fixed
-            const newEnd = new Date(Math.max(currentSlot.end.getTime(), originalEvent.start.getTime() + 1800000));
-            return { start: originalEvent.start, end: newEnd };
-        }
-        return null;
-    }
+    // ============================================
+    // Slot Resolution
+    // ============================================
     getSlotAtPosition(clientX, clientY) {
-        const slotEl = this.shadow.elementsFromPoint(clientX, clientY)
-            .find((el) => el.matches('.scheduler-time-slot, .scheduler-timeline-slot'));
+        const elements = this.shadow.elementsFromPoint(clientX, clientY);
+        const slotEl = elements.find((el) => el.matches('.scheduler-time-slot, .scheduler-timeline-slot'));
         return slotEl ? this.getSlotFromElement(slotEl) : null;
     }
     getSlotFromElement(el) {
@@ -756,256 +557,6 @@ export class MpScheduler extends HTMLElement {
             end: new Date(endStr),
         };
     }
-    // Touch event handlers
-    handleTouchStart(e) {
-        const state = this.stateManager.getState();
-        if (!state.options.editable)
-            return;
-        // Only handle single touch
-        if (e.touches.length !== 1) {
-            this.cancelTouchHold();
-            return;
-        }
-        const touch = e.touches[0];
-        const target = touch.target;
-        this.touchStartPosition = { x: touch.clientX, y: touch.clientY };
-        // Check if touching an event or slot that could be dragged
-        const eventEl = target.closest('.scheduler-event:not(.preview)');
-        const resizeHandle = target.closest('.resize-handle');
-        const slotEl = target.closest('.scheduler-time-slot, .scheduler-timeline-slot');
-        if (!eventEl && !slotEl) {
-            // Not touching a draggable element
-            return;
-        }
-        // Store the target for the hold callback
-        this.touchHoldTarget = eventEl || slotEl;
-        // Add visual feedback class
-        if (eventEl) {
-            eventEl.classList.add('touch-hold-pending');
-        }
-        else if (slotEl) {
-            slotEl.classList.add('touch-hold-pending');
-        }
-        // Start the hold timer
-        this.touchHoldTimer = setTimeout(() => {
-            this.activateTouchDragMode(touch, resizeHandle);
-        }, this.TOUCH_HOLD_DURATION);
-    }
-    activateTouchDragMode(touch, resizeHandle) {
-        const state = this.stateManager.getState();
-        const target = this.touchHoldTarget;
-        if (!target)
-            return;
-        // Trigger haptic feedback if available
-        this.triggerHapticFeedback();
-        // Enter touch drag mode
-        this.isTouchDragMode = true;
-        // Add visual feedback
-        const container = this.shadow.querySelector('.scheduler-container');
-        container === null || container === void 0 ? void 0 : container.classList.add('touch-drag-mode');
-        // Remove pending class, add active class
-        target.classList.remove('touch-hold-pending');
-        target.classList.add('touch-hold-active');
-        // Determine the drag type and start the drag
-        const eventEl = target.closest('.scheduler-event:not(.preview)');
-        if (resizeHandle) {
-            // Resize operation
-            const parentEventEl = resizeHandle.closest('.scheduler-event');
-            const eventId = parentEventEl === null || parentEventEl === void 0 ? void 0 : parentEventEl.dataset['eventId'];
-            const event = eventId ? this.getEventById(eventId) : null;
-            if (event) {
-                const handleType = resizeHandle.dataset['handle'];
-                this.startDragFromTouch(('resize-' + handleType), event, touch.clientX, touch.clientY);
-            }
-        }
-        else if (eventEl) {
-            // Move operation
-            const eventId = eventEl.dataset['eventId'];
-            const event = eventId ? this.getEventById(eventId) : null;
-            if (event && event.draggable !== false) {
-                this.startDragFromTouch('move', event, touch.clientX, touch.clientY);
-            }
-        }
-        else if (target.matches('.scheduler-time-slot, .scheduler-timeline-slot') && state.options.selectable) {
-            // Create operation
-            this.startDragFromTouch('create', null, touch.clientX, touch.clientY, target);
-        }
-    }
-    handleTouchMove(e) {
-        if (e.touches.length !== 1) {
-            this.cancelTouchHold();
-            return;
-        }
-        const touch = e.touches[0];
-        // If we have a pending touch hold, check if user moved too much
-        if (this.touchHoldTimer && this.touchStartPosition) {
-            const dx = touch.clientX - this.touchStartPosition.x;
-            const dy = touch.clientY - this.touchStartPosition.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance > this.TOUCH_MOVE_THRESHOLD) {
-                // User moved too much, cancel the hold and allow normal scrolling
-                this.cancelTouchHold();
-                return;
-            }
-            // Still waiting for hold, prevent default to avoid scroll during hold detection
-            // But only if we're close to the threshold
-            if (distance < this.TOUCH_MOVE_THRESHOLD / 2) {
-                // Don't prevent default yet to allow small movements
-            }
-            return;
-        }
-        // If in touch drag mode, handle the drag
-        if (this.isTouchDragMode) {
-            e.preventDefault(); // Prevent scrolling while dragging
-            const state = this.stateManager.getState();
-            if (!state.dragState)
-                return;
-            const slot = this.getSlotAtPosition(touch.clientX, touch.clientY);
-            if (!slot)
-                return;
-            const preview = this.calculatePreview(state.dragState.type, state.dragState, slot);
-            if (preview) {
-                this.stateManager.updateDrag(slot, preview);
-            }
-        }
-    }
-    handleTouchEnd(e) {
-        // If we had a pending hold that never activated, treat as a tap
-        if (this.touchHoldTimer) {
-            this.cancelTouchHold();
-            // Handle as a tap/click on the target
-            if (this.touchHoldTarget) {
-                const eventEl = this.touchHoldTarget.closest('.scheduler-event:not(.preview)');
-                if (eventEl) {
-                    const eventId = eventEl.dataset['eventId'];
-                    const event = eventId ? this.getEventById(eventId) : null;
-                    if (event) {
-                        this.stateManager.setSelectedEvent(event);
-                        this.dispatchEvent(new CustomEvent('event-click', {
-                            detail: { event, originalEvent: e },
-                            bubbles: true,
-                        }));
-                    }
-                }
-            }
-            this.touchHoldTarget = null;
-            return;
-        }
-        // If in touch drag mode, finalize the drag
-        if (this.isTouchDragMode) {
-            const state = this.stateManager.getState();
-            if (state.dragState) {
-                const { type, event, preview } = state.dragState;
-                if (preview) {
-                    if (type === 'create') {
-                        const newEvent = {
-                            id: generateEventId(),
-                            title: 'New Event',
-                            start: preview.start,
-                            end: preview.end,
-                            color: '#3788d8',
-                        };
-                        this.stateManager.addEvent(newEvent);
-                        this.dispatchEvent(new CustomEvent('event-create', {
-                            detail: { event: newEvent, originalEvent: e },
-                            bubbles: true,
-                        }));
-                    }
-                    else if (type === 'move' && event) {
-                        const oldEvent = Object.assign({}, event);
-                        const updatedEvent = Object.assign(Object.assign({}, event), { start: preview.start, end: preview.end });
-                        this.stateManager.updateEvent(updatedEvent);
-                        this.dispatchEvent(new CustomEvent('event-update', {
-                            detail: { event: updatedEvent, oldEvent, originalEvent: e },
-                            bubbles: true,
-                        }));
-                    }
-                    else if ((type === 'resize-start' || type === 'resize-end') && event) {
-                        const oldEvent = Object.assign({}, event);
-                        const updatedEvent = Object.assign(Object.assign({}, event), { start: preview.start, end: preview.end });
-                        this.stateManager.updateEvent(updatedEvent);
-                        this.dispatchEvent(new CustomEvent('event-update', {
-                            detail: { event: updatedEvent, oldEvent, originalEvent: e },
-                            bubbles: true,
-                        }));
-                    }
-                }
-                this.stateManager.endDrag();
-            }
-            this.exitTouchDragMode();
-        }
-    }
-    handleTouchCancel(_e) {
-        this.cancelTouchHold();
-        if (this.isTouchDragMode) {
-            this.stateManager.endDrag();
-            this.exitTouchDragMode();
-        }
-    }
-    cancelTouchHold() {
-        if (this.touchHoldTimer) {
-            clearTimeout(this.touchHoldTimer);
-            this.touchHoldTimer = null;
-        }
-        // Remove pending visual feedback
-        if (this.touchHoldTarget) {
-            this.touchHoldTarget.classList.remove('touch-hold-pending');
-            this.touchHoldTarget.classList.remove('touch-hold-active');
-        }
-        this.touchStartPosition = null;
-    }
-    exitTouchDragMode() {
-        this.isTouchDragMode = false;
-        this.touchStartPosition = null;
-        this.touchHoldTarget = null;
-        // Remove visual feedback
-        const container = this.shadow.querySelector('.scheduler-container');
-        container === null || container === void 0 ? void 0 : container.classList.remove('touch-drag-mode');
-        // Remove active classes from all elements
-        this.shadow.querySelectorAll('.touch-hold-active, .touch-hold-pending').forEach((el) => {
-            el.classList.remove('touch-hold-active', 'touch-hold-pending');
-        });
-    }
-    triggerHapticFeedback() {
-        // Use Vibration API if available
-        if ('vibrate' in navigator) {
-            navigator.vibrate(50); // Short vibration (50ms)
-        }
-    }
-    startDragFromTouch(type, event, clientX, clientY, slotEl) {
-        const slot = slotEl
-            ? this.getSlotFromElement(slotEl)
-            : this.getSlotAtPosition(clientX, clientY);
-        if (!slot)
-            return;
-        let preview;
-        if (type === 'create') {
-            preview = {
-                start: slot.start,
-                end: slot.end,
-            };
-        }
-        else if (event) {
-            preview = {
-                start: event.start,
-                end: event.end,
-            };
-        }
-        else {
-            return;
-        }
-        this.stateManager.startDrag({
-            type,
-            event,
-            startSlot: slot,
-            currentSlot: slot,
-            preview,
-            originalEvent: event ? Object.assign({}, event) : undefined,
-            meta: type.startsWith('resize-')
-                ? { resizeHandle: type.replace('resize-', '') }
-                : undefined,
-        });
-    }
 }
 MpScheduler.observedAttributes = [
     'view',