@mintplayer/ng-bootstrap 21.22.0 → 21.23.0

package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs

@@ -0,0 +1,3819 @@
+import { unsafeCSS, LitElement, html } from 'lit';
+import { DEFAULT_OPTIONS, dateService, timelineService, getContrastColor, resourceService, isResourceGroup, isResource, generateEventId } from '@mintplayer/ng-bootstrap/web-components/scheduler-core';
+
+/**
+ * Create initial scheduler state
+ */
+function createInitialState(options = {}) {
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    return {
+        view: mergedOptions.initialView,
+        date: mergedOptions.initialDate,
+        events: [],
+        resources: [],
+        options: mergedOptions,
+        selectedEvent: null,
+        hoveredEvent: null,
+        hoveredSlot: null,
+        dragState: null,
+        previewEvent: null,
+        collapsedGroups: new Set(),
+        isMouseDown: false,
+        isLoading: false,
+    };
+}
+/**
+ * State manager for the scheduler
+ */
+class SchedulerStateManager {
+    constructor(initialOptions = {}) {
+        this.listeners = new Set();
+        this.state = createInitialState(initialOptions);
+    }
+    /**
+     * Get current state
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Update state with partial update or updater function
+     */
+    setState(update) {
+        const partialUpdate = typeof update === 'function' ? update(this.state) : update;
+        this.state = { ...this.state, ...partialUpdate };
+        this.notifyListeners();
+    }
+    /**
+     * Subscribe to state changes
+     */
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    /**
+     * Notify all listeners of state change
+     */
+    notifyListeners() {
+        for (const listener of this.listeners) {
+            listener(this.state);
+        }
+    }
+    // Convenience methods for common state updates
+    /**
+     * Set the current view
+     */
+    setView(view) {
+        this.setState({ view });
+    }
+    /**
+     * Set the current date
+     */
+    setDate(date) {
+        this.setState({ date });
+    }
+    /**
+     * Set events
+     */
+    setEvents(events) {
+        this.setState({ events });
+    }
+    /**
+     * Add an event
+     */
+    addEvent(event) {
+        this.setState((state) => ({
+            events: [...state.events, event],
+        }));
+    }
+    /**
+     * Update an event
+     */
+    updateEvent(event) {
+        this.setState((state) => ({
+            events: state.events.map((e) => (e.id === event.id ? event : e)),
+        }));
+    }
+    /**
+     * Remove an event
+     */
+    removeEvent(eventId) {
+        this.setState((state) => ({
+            events: state.events.filter((e) => e.id !== eventId),
+        }));
+    }
+    /**
+     * Set resources
+     */
+    setResources(resources) {
+        this.setState({ resources });
+    }
+    /**
+     * Toggle resource group collapse
+     */
+    toggleGroupCollapse(groupId) {
+        this.setState((state) => {
+            const newCollapsed = new Set(state.collapsedGroups);
+            if (newCollapsed.has(groupId)) {
+                newCollapsed.delete(groupId);
+            }
+            else {
+                newCollapsed.add(groupId);
+            }
+            return { collapsedGroups: newCollapsed };
+        });
+    }
+    /**
+     * Set selected event
+     */
+    setSelectedEvent(event) {
+        this.setState({ selectedEvent: event });
+    }
+    /**
+     * Set hovered event
+     */
+    setHoveredEvent(event) {
+        this.setState({ hoveredEvent: event });
+    }
+    /**
+     * Set hovered slot
+     */
+    setHoveredSlot(slot) {
+        this.setState({ hoveredSlot: slot });
+    }
+    /**
+     * Start a drag operation
+     */
+    startDrag(dragState) {
+        this.setState({
+            dragState,
+            previewEvent: dragState.preview,
+            isMouseDown: true,
+        });
+    }
+    /**
+     * Update drag operation
+     */
+    updateDrag(currentSlot, preview) {
+        this.setState((state) => ({
+            dragState: state.dragState
+                ? { ...state.dragState, currentSlot, preview }
+                : null,
+            previewEvent: preview,
+        }));
+    }
+    /**
+     * End drag operation
+     */
+    endDrag() {
+        this.setState({
+            dragState: null,
+            previewEvent: null,
+            isMouseDown: false,
+        });
+    }
+    /**
+     * Set mouse down state
+     */
+    setMouseDown(isMouseDown) {
+        this.setState({ isMouseDown });
+    }
+    /**
+     * Set loading state
+     */
+    setLoading(isLoading) {
+        this.setState({ isLoading });
+    }
+    /**
+     * Update options
+     */
+    setOptions(options) {
+        this.setState((state) => ({
+            options: { ...state.options, ...options },
+        }));
+    }
+    /**
+     * Navigate to next period
+     */
+    next() {
+        this.setState((state) => {
+            const newDate = new Date(state.date);
+            switch (state.view) {
+                case 'year':
+                    newDate.setFullYear(newDate.getFullYear() + 1);
+                    break;
+                case 'month':
+                    newDate.setMonth(newDate.getMonth() + 1);
+                    break;
+                case 'week':
+                case 'timeline':
+                    newDate.setDate(newDate.getDate() + 7);
+                    break;
+                case 'day':
+                    newDate.setDate(newDate.getDate() + 1);
+                    break;
+            }
+            return { date: newDate };
+        });
+    }
+    /**
+     * Navigate to previous period
+     */
+    prev() {
+        this.setState((state) => {
+            const newDate = new Date(state.date);
+            switch (state.view) {
+                case 'year':
+                    newDate.setFullYear(newDate.getFullYear() - 1);
+                    break;
+                case 'month':
+                    newDate.setMonth(newDate.getMonth() - 1);
+                    break;
+                case 'week':
+                case 'timeline':
+                    newDate.setDate(newDate.getDate() - 7);
+                    break;
+                case 'day':
+                    newDate.setDate(newDate.getDate() - 1);
+                    break;
+            }
+            return { date: newDate };
+        });
+    }
+    /**
+     * Navigate to today
+     */
+    today() {
+        this.setState({ date: new Date() });
+    }
+    /**
+     * Navigate to a specific date
+     */
+    gotoDate(date) {
+        this.setState({ date });
+    }
+}
+
+/**
+ * Base class for scheduler views
+ */
+class BaseView {
+    constructor(container, state) {
+        this.container = container;
+        this.state = state;
+    }
+    /**
+     * Update the now indicator position (called every minute)
+     * Default implementation does nothing - override in views that have a now indicator
+     */
+    updateNowIndicator() {
+        // Default: do nothing
+    }
+    /**
+     * Get the view's root element
+     */
+    getElement() {
+        return this.container;
+    }
+    /**
+     * Helper to create an element with classes
+     */
+    createElement(tag, ...classes) {
+        const el = document.createElement(tag);
+        if (classes.length > 0) {
+            el.classList.add(...classes);
+        }
+        return el;
+    }
+    /**
+     * Helper to set data attributes
+     */
+    setData(element, data) {
+        for (const [key, value] of Object.entries(data)) {
+            element.dataset[key] = String(value);
+        }
+    }
+    /**
+     * Helper to clear container
+     */
+    clearContainer() {
+        this.container.innerHTML = '';
+    }
+}
+
+/**
+ * Year view renderer
+ */
+class YearView extends BaseView {
+    render() {
+        this.clearContainer();
+        this.container.classList.add('scheduler-year-view');
+        const { date, options } = this.state;
+        const months = dateService.getYearMonths(date);
+        const grid = this.createElement('div', 'scheduler-year-grid');
+        for (const month of months) {
+            const monthEl = this.createMonthCard(month);
+            grid.appendChild(monthEl);
+        }
+        this.container.appendChild(grid);
+    }
+    createMonthCard(month) {
+        const { events, options } = this.state;
+        const card = this.createElement('div', 'scheduler-year-month');
+        // Month header
+        const header = this.createElement('div', 'scheduler-year-month-header');
+        header.textContent = dateService.getMonthName(month, options.locale);
+        this.setData(header, { month: month.toISOString() });
+        card.appendChild(header);
+        // Mini calendar
+        const miniMonth = this.createElement('div', 'scheduler-mini-month');
+        // Day headers
+        const weeks = dateService.getMonthWeeks(month, options.firstDayOfWeek);
+        const firstWeek = weeks[0];
+        for (const day of firstWeek) {
+            const dayHeader = this.createElement('div', 'scheduler-mini-day', 'header');
+            dayHeader.textContent = dateService.getDayName(day, options.locale, 'narrow');
+            dayHeader.style.fontWeight = '600';
+            dayHeader.style.color = '#666';
+            miniMonth.appendChild(dayHeader);
+        }
+        // Days
+        const monthStart = dateService.getMonthStart(month);
+        const monthEnd = dateService.getMonthEnd(month);
+        const monthEvents = timelineService.filterByRange(events, monthStart, monthEnd);
+        // Create a set of dates that have events
+        const datesWithEvents = new Set();
+        for (const event of monthEvents) {
+            const current = new Date(event.start);
+            current.setHours(0, 0, 0, 0);
+            while (current <= event.end) {
+                datesWithEvents.add(current.toISOString().split('T')[0]);
+                current.setDate(current.getDate() + 1);
+            }
+        }
+        for (const week of weeks) {
+            for (const day of week) {
+                const dayEl = this.createElement('div', 'scheduler-mini-day');
+                dayEl.textContent = String(day.getDate());
+                this.setData(dayEl, { date: day.toISOString() });
+                if (!dateService.isSameMonth(day, month)) {
+                    dayEl.classList.add('other-month');
+                }
+                if (dateService.isToday(day)) {
+                    dayEl.classList.add('today');
+                }
+                const dateKey = day.toISOString().split('T')[0];
+                if (datesWithEvents.has(dateKey)) {
+                    dayEl.classList.add('has-events');
+                }
+                miniMonth.appendChild(dayEl);
+            }
+        }
+        card.appendChild(miniMonth);
+        return card;
+    }
+    update(state) {
+        this.state = state;
+        // Year view is mostly static, re-render fully
+        this.render();
+    }
+    destroy() {
+        this.clearContainer();
+    }
+}
+
+/**
+ * Month view renderer
+ */
+class MonthView extends BaseView {
+    constructor() {
+        super(...arguments);
+        this.dayCells = new Map();
+    }
+    render() {
+        this.clearContainer();
+        this.container.classList.add('scheduler-month-view');
+        const { date, options } = this.state;
+        const weeks = dateService.getMonthWeeks(date, options.firstDayOfWeek);
+        // Create day-of-week headers
+        const headers = this.createElement('div', 'scheduler-day-headers');
+        const firstWeek = weeks[0];
+        for (const day of firstWeek) {
+            const header = this.createElement('div', 'scheduler-day-header');
+            header.textContent = dateService.getDayName(day, options.locale);
+            headers.appendChild(header);
+        }
+        this.container.appendChild(headers);
+        // Create month grid
+        const grid = this.createElement('div', 'scheduler-month-grid');
+        for (const week of weeks) {
+            for (const day of week) {
+                const cell = this.createDayCell(day);
+                grid.appendChild(cell);
+            }
+        }
+        this.container.appendChild(grid);
+        // Render events
+        this.renderEvents();
+    }
+    createDayCell(day) {
+        const { date } = this.state;
+        const cell = this.createElement('div', 'scheduler-month-day');
+        if (!dateService.isSameMonth(day, date)) {
+            cell.classList.add('other-month');
+        }
+        if (dateService.isToday(day)) {
+            cell.classList.add('today');
+        }
+        // Day number
+        const dayNumber = this.createElement('div', 'day-number');
+        dayNumber.textContent = String(day.getDate());
+        cell.appendChild(dayNumber);
+        // Events container
+        const eventsContainer = this.createElement('div', 'month-events');
+        cell.appendChild(eventsContainer);
+        // Store reference
+        const key = day.toISOString().split('T')[0];
+        this.dayCells.set(key, cell);
+        this.setData(cell, { date: key });
+        return cell;
+    }
+    renderEvents() {
+        const { date, events, options } = this.state;
+        const monthStart = dateService.getMonthStart(date);
+        const monthEnd = dateService.getMonthEnd(date);
+        // Get weeks for full view range
+        const weeks = dateService.getMonthWeeks(date, options.firstDayOfWeek);
+        const viewStart = weeks[0][0];
+        const viewEnd = weeks[weeks.length - 1][6];
+        viewEnd.setHours(23, 59, 59, 999);
+        // Filter events for the view range
+        const viewEvents = timelineService.filterByRange(events, viewStart, viewEnd);
+        // Group events by day
+        const eventsByDay = new Map();
+        for (const event of viewEvents) {
+            const eventStart = new Date(event.start);
+            const eventEnd = new Date(event.end);
+            // Iterate through each day the event spans
+            const current = new Date(eventStart);
+            current.setHours(0, 0, 0, 0);
+            while (current <= eventEnd) {
+                const key = current.toISOString().split('T')[0];
+                if (!eventsByDay.has(key)) {
+                    eventsByDay.set(key, []);
+                }
+                eventsByDay.get(key).push(event);
+                current.setDate(current.getDate() + 1);
+            }
+        }
+        // Render events in each day cell
+        const maxEventsPerDay = typeof options.dayMaxEvents === 'number'
+            ? options.dayMaxEvents
+            : 3;
+        for (const [key, dayEvents] of eventsByDay) {
+            const cell = this.dayCells.get(key);
+            if (!cell)
+                continue;
+            const eventsContainer = cell.querySelector('.month-events');
+            if (!eventsContainer)
+                continue;
+            // Clear existing events
+            eventsContainer.innerHTML = '';
+            const visibleEvents = dayEvents.slice(0, maxEventsPerDay);
+            const hiddenCount = dayEvents.length - visibleEvents.length;
+            for (const event of visibleEvents) {
+                const eventEl = this.createElement('div', 'scheduler-month-event');
+                eventEl.textContent = event.title;
+                eventEl.style.backgroundColor = event.color ?? '#3788d8';
+                eventEl.style.color = event.textColor ?? getContrastColor(event.color ?? '#3788d8');
+                this.setData(eventEl, { eventId: event.id });
+                eventsContainer.appendChild(eventEl);
+            }
+            if (hiddenCount > 0) {
+                const moreLink = this.createElement('div', 'scheduler-more-link');
+                moreLink.textContent = `+${hiddenCount} more`;
+                this.setData(moreLink, { date: key });
+                eventsContainer.appendChild(moreLink);
+            }
+        }
+    }
+    update(state) {
+        const dateChanged = this.state.date.getMonth() !== state.date.getMonth() ||
+            this.state.date.getFullYear() !== state.date.getFullYear();
+        const optionsChanged = this.optionsRequireRerender(this.state.options, state.options);
+        this.state = state;
+        // If month or relevant options changed, we need to re-render the entire view
+        if (dateChanged || optionsChanged) {
+            this.render();
+            return;
+        }
+        this.renderEvents();
+    }
+    optionsRequireRerender(oldOpts, newOpts) {
+        return oldOpts.firstDayOfWeek !== newOpts.firstDayOfWeek ||
+            oldOpts.dayMaxEvents !== newOpts.dayMaxEvents ||
+            oldOpts.locale !== newOpts.locale;
+    }
+    destroy() {
+        this.dayCells.clear();
+        this.clearContainer();
+    }
+}
+
+/**
+ * Week view renderer
+ */
+class WeekView extends BaseView {
+    constructor() {
+        super(...arguments);
+        this.dayColumns = [];
+        this.eventElements = new Map();
+        this.slotElements = new Map();
+    }
+    render() {
+        this.clearContainer();
+        this.container.classList.add('scheduler-week-view');
+        const { date, options } = this.state;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        // Create day headers
+        const headers = this.createElement('div', 'scheduler-day-headers');
+        // Add time gutter space
+        const gutterSpace = this.createElement('div', 'scheduler-time-gutter-space');
+        gutterSpace.style.width = 'var(--scheduler-time-gutter-width)';
+        headers.appendChild(gutterSpace);
+        for (const day of days) {
+            const header = this.createElement('div', 'scheduler-day-header');
+            if (dateService.isToday(day)) {
+                header.classList.add('today');
+            }
+            const dayName = this.createElement('div', 'day-name');
+            dayName.textContent = dateService.getDayName(day, options.locale);
+            const dayNumber = this.createElement('div', 'day-number');
+            dayNumber.textContent = String(day.getDate());
+            header.appendChild(dayName);
+            header.appendChild(dayNumber);
+            headers.appendChild(header);
+        }
+        this.container.appendChild(headers);
+        // Create time grid
+        const timeGrid = this.createElement('div', 'scheduler-time-grid');
+        // Time gutter
+        const timeGutter = this.createElement('div', 'scheduler-time-gutter');
+        const slots = dateService.getTimeSlots(days[0], options.slotDuration, options.slotMinTime, options.slotMaxTime);
+        for (const slot of slots) {
+            const label = this.createElement('div', 'scheduler-time-slot-label');
+            label.textContent = dateService.formatTime(slot.start, options.timeFormat);
+            timeGutter.appendChild(label);
+        }
+        timeGrid.appendChild(timeGutter);
+        // Days container
+        const daysContainer = this.createElement('div', 'scheduler-days-container');
+        this.dayColumns = [];
+        for (let dayIndex = 0; dayIndex < days.length; dayIndex++) {
+            const day = days[dayIndex];
+            const dayColumn = this.createElement('div', 'scheduler-day-column');
+            this.setData(dayColumn, { dayIndex });
+            // Create time slots
+            for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
+                const slotTemplate = slots[slotIndex];
+                const slotStart = new Date(day);
+                slotStart.setHours(slotTemplate.start.getHours(), slotTemplate.start.getMinutes(), 0, 0);
+                const slotEnd = new Date(day);
+                slotEnd.setHours(slotTemplate.end.getHours(), slotTemplate.end.getMinutes(), 0, 0);
+                const slotEl = this.createElement('div', 'scheduler-time-slot');
+                this.setData(slotEl, {
+                    dayIndex,
+                    slotIndex,
+                    start: slotStart.toISOString(),
+                    end: slotEnd.toISOString(),
+                });
+                const key = `${dayIndex}-${slotIndex}`;
+                this.slotElements.set(key, slotEl);
+                dayColumn.appendChild(slotEl);
+            }
+            // Events container for this day
+            const eventsContainer = this.createElement('div', 'scheduler-events-container');
+            dayColumn.appendChild(eventsContainer);
+            this.dayColumns.push(dayColumn);
+            daysContainer.appendChild(dayColumn);
+        }
+        timeGrid.appendChild(daysContainer);
+        this.container.appendChild(timeGrid);
+        // Render events
+        this.renderEvents();
+        // Render now indicator
+        this.renderNowIndicator(days, slots);
+    }
+    update(state) {
+        const dateChanged = this.state.date.getTime() !== state.date.getTime();
+        const optionsChanged = this.optionsRequireRerender(this.state.options, state.options);
+        const selectionChanged = this.state.selectedEvent?.id !== state.selectedEvent?.id;
+        this.state = state;
+        // If date or relevant options changed, we need to re-render the entire view
+        if (dateChanged || optionsChanged) {
+            this.render();
+            return;
+        }
+        // Update greyed slots based on drag state
+        this.updateGreyedSlots();
+        // Re-render events if selection changed or needed
+        if (selectionChanged) {
+            this.renderEvents();
+        }
+        else {
+            this.renderEvents();
+        }
+        // Render preview event
+        this.renderPreviewEvent();
+    }
+    optionsRequireRerender(oldOpts, newOpts) {
+        return oldOpts.slotDuration !== newOpts.slotDuration ||
+            oldOpts.timeFormat !== newOpts.timeFormat ||
+            oldOpts.firstDayOfWeek !== newOpts.firstDayOfWeek ||
+            oldOpts.slotMinTime !== newOpts.slotMinTime ||
+            oldOpts.slotMaxTime !== newOpts.slotMaxTime ||
+            oldOpts.locale !== newOpts.locale;
+    }
+    renderEvents() {
+        const { date, events, options } = this.state;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        const weekStart = days[0];
+        const weekEnd = new Date(days[6]);
+        weekEnd.setHours(23, 59, 59, 999);
+        // Filter events for this week
+        const weekEvents = timelineService.filterByRange(events, weekStart, weekEnd);
+        // Split events into parts and get timeline
+        const allParts = [];
+        for (const event of weekEvents) {
+            const { parts } = timelineService.splitInParts(event);
+            allParts.push(...parts);
+        }
+        // Filter parts for this week
+        const weekParts = timelineService.filterPartsByRange(allParts, weekStart, weekEnd);
+        // Get timelened parts with track info
+        const timelinedParts = timelineService.getTimelinedParts(weekParts);
+        // Clear existing events
+        this.eventElements.forEach((el) => el.remove());
+        this.eventElements.clear();
+        // Render each event part
+        for (const { part, trackIndex, totalTracks, colspan } of timelinedParts) {
+            if (!part.event)
+                continue;
+            const dayIndex = days.findIndex((d) => dateService.isSameDay(d, part.start));
+            if (dayIndex === -1)
+                continue;
+            const dayColumn = this.dayColumns[dayIndex];
+            const eventsContainer = dayColumn.querySelector('.scheduler-events-container');
+            if (!eventsContainer)
+                continue;
+            const eventEl = this.createEventElement(part, trackIndex, totalTracks, colspan, options.slotDuration ?? 1800);
+            eventsContainer.appendChild(eventEl);
+            this.eventElements.set(part.id, eventEl);
+        }
+    }
+    createEventElement(part, trackIndex, totalTracks, colspan, slotDuration) {
+        const event = part.event;
+        const eventEl = this.createElement('div', 'scheduler-event');
+        // Mark as selected if this is the selected event
+        if (this.state.selectedEvent?.id === event.id) {
+            eventEl.classList.add('selected');
+        }
+        // Calculate position
+        const dayStart = new Date(part.start);
+        dayStart.setHours(0, 0, 0, 0);
+        const startMinutes = (part.start.getTime() - dayStart.getTime()) / (1000 * 60);
+        const endMinutes = (part.end.getTime() - dayStart.getTime()) / (1000 * 60);
+        const durationMinutes = endMinutes - startMinutes;
+        const slotMinutes = slotDuration / 60;
+        const top = (startMinutes / slotMinutes) * 40; // 40px per slot
+        const height = Math.max((durationMinutes / slotMinutes) * 40, 20);
+        // Calculate width based on tracks and colspan
+        // colspan allows events to span multiple columns when there's no blocking event
+        const leftPercent = (trackIndex / totalTracks) * 100;
+        const widthPercent = (colspan / totalTracks) * 100;
+        eventEl.style.top = `${top}px`;
+        eventEl.style.height = `${height}px`;
+        eventEl.style.left = `${leftPercent}%`;
+        eventEl.style.width = `calc(${widthPercent}% - 2px)`;
+        eventEl.style.backgroundColor = event.color ?? '#3788d8';
+        eventEl.style.color = event.textColor ?? getContrastColor(event.color ?? '#3788d8');
+        this.setData(eventEl, { eventId: event.id });
+        // Title
+        const title = this.createElement('div', 'event-title');
+        title.textContent = event.title;
+        eventEl.appendChild(title);
+        // Time
+        const timeEl = this.createElement('div', 'event-time');
+        timeEl.textContent = `${dateService.formatTime(part.start, this.state.options.timeFormat)} - ${dateService.formatTime(part.end, this.state.options.timeFormat)}`;
+        eventEl.appendChild(timeEl);
+        // Resize handles
+        if (event.resizable !== false) {
+            if (part.isStart) {
+                const topHandle = this.createElement('div', 'resize-handle', 'top');
+                this.setData(topHandle, { handle: 'start' });
+                eventEl.appendChild(topHandle);
+            }
+            if (part.isEnd) {
+                const bottomHandle = this.createElement('div', 'resize-handle', 'bottom');
+                this.setData(bottomHandle, { handle: 'end' });
+                eventEl.appendChild(bottomHandle);
+            }
+        }
+        return eventEl;
+    }
+    renderPreviewEvent() {
+        // Remove existing preview
+        const existingPreview = this.container.querySelector('.scheduler-event.preview');
+        if (existingPreview) {
+            existingPreview.remove();
+        }
+        const { previewEvent, options, date } = this.state;
+        if (!previewEvent)
+            return;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        const dayIndex = days.findIndex((d) => dateService.isSameDay(d, previewEvent.start));
+        if (dayIndex === -1)
+            return;
+        const dayColumn = this.dayColumns[dayIndex];
+        const eventsContainer = dayColumn?.querySelector('.scheduler-events-container');
+        if (!eventsContainer)
+            return;
+        const previewEl = this.createElement('div', 'scheduler-event', 'preview');
+        const dayStart = new Date(previewEvent.start);
+        dayStart.setHours(0, 0, 0, 0);
+        const startMinutes = (previewEvent.start.getTime() - dayStart.getTime()) / (1000 * 60);
+        const endMinutes = (previewEvent.end.getTime() - dayStart.getTime()) / (1000 * 60);
+        const durationMinutes = endMinutes - startMinutes;
+        const slotMinutes = (options.slotDuration ?? 1800) / 60;
+        const top = (startMinutes / slotMinutes) * 40;
+        const height = Math.max((durationMinutes / slotMinutes) * 40, 20);
+        previewEl.style.top = `${top}px`;
+        previewEl.style.height = `${height}px`;
+        previewEl.style.left = '0';
+        previewEl.style.width = '100%';
+        eventsContainer.appendChild(previewEl);
+    }
+    updateGreyedSlots() {
+        const { dragState, previewEvent, options, date } = this.state;
+        // Clear all greyed slots
+        this.slotElements.forEach((el) => el.classList.remove('greyed'));
+        if (!dragState || !previewEvent)
+            return;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        const slots = dateService.getTimeSlots(days[0], options.slotDuration, options.slotMinTime, options.slotMaxTime);
+        // Find affected slots
+        for (let dayIndex = 0; dayIndex < days.length; dayIndex++) {
+            const day = days[dayIndex];
+            if (!dateService.isSameDay(day, previewEvent.start) &&
+                !dateService.isSameDay(day, previewEvent.end)) {
+                continue;
+            }
+            for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
+                const slotTemplate = slots[slotIndex];
+                const slotStart = new Date(day);
+                slotStart.setHours(slotTemplate.start.getHours(), slotTemplate.start.getMinutes(), 0, 0);
+                const slotEnd = new Date(day);
+                slotEnd.setHours(slotTemplate.end.getHours(), slotTemplate.end.getMinutes(), 0, 0);
+                // Check if slot overlaps with preview event
+                if (slotStart < previewEvent.end && slotEnd > previewEvent.start) {
+                    const key = `${dayIndex}-${slotIndex}`;
+                    const slotEl = this.slotElements.get(key);
+                    if (slotEl) {
+                        slotEl.classList.add('greyed');
+                    }
+                }
+            }
+        }
+    }
+    renderNowIndicator(days, slots) {
+        if (!this.state.options.nowIndicator)
+            return;
+        const now = new Date();
+        const todayIndex = days.findIndex((d) => dateService.isSameDay(d, now));
+        if (todayIndex === -1)
+            return;
+        const dayColumn = this.dayColumns[todayIndex];
+        if (!dayColumn)
+            return;
+        // Calculate position
+        const dayStart = new Date(now);
+        dayStart.setHours(0, 0, 0, 0);
+        const minutesFromMidnight = (now.getTime() - dayStart.getTime()) / (1000 * 60);
+        const slotMinutes = (this.state.options.slotDuration ?? 1800) / 60;
+        const top = (minutesFromMidnight / slotMinutes) * 40;
+        const indicator = this.createElement('div', 'scheduler-now-indicator');
+        indicator.style.top = `${top}px`;
+        dayColumn.appendChild(indicator);
+    }
+    updateNowIndicator() {
+        if (!this.state.options.nowIndicator)
+            return;
+        const { date, options } = this.state;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        const now = new Date();
+        const todayIndex = days.findIndex((d) => dateService.isSameDay(d, now));
+        if (todayIndex === -1)
+            return;
+        const dayColumn = this.dayColumns[todayIndex];
+        if (!dayColumn)
+            return;
+        // Find existing indicator
+        const existingIndicator = dayColumn.querySelector('.scheduler-now-indicator');
+        // Calculate new position
+        const dayStart = new Date(now);
+        dayStart.setHours(0, 0, 0, 0);
+        const minutesFromMidnight = (now.getTime() - dayStart.getTime()) / (1000 * 60);
+        const slotMinutes = (options.slotDuration ?? 1800) / 60;
+        const top = (minutesFromMidnight / slotMinutes) * 40;
+        if (existingIndicator) {
+            // Update position of existing indicator
+            existingIndicator.style.top = `${top}px`;
+        }
+        else {
+            // Create new indicator if it doesn't exist
+            const indicator = this.createElement('div', 'scheduler-now-indicator');
+            indicator.style.top = `${top}px`;
+            dayColumn.appendChild(indicator);
+        }
+    }
+    destroy() {
+        this.eventElements.clear();
+        this.slotElements.clear();
+        this.dayColumns = [];
+        this.clearContainer();
+    }
+}
+
+/**
+ * Day view renderer
+ */
+class DayView extends BaseView {
+    constructor() {
+        super(...arguments);
+        this.eventsContainer = null;
+        this.slotElements = new Map();
+        this.dayColumn = null;
+    }
+    render() {
+        this.clearContainer();
+        this.container.classList.add('scheduler-day-view');
+        const { date, options } = this.state;
+        // Day header
+        const header = this.createElement('div', 'scheduler-day-headers');
+        // Time gutter space
+        const gutterSpace = this.createElement('div', 'scheduler-time-gutter-space');
+        gutterSpace.style.width = 'var(--scheduler-time-gutter-width)';
+        header.appendChild(gutterSpace);
+        const dayHeader = this.createElement('div', 'scheduler-day-header');
+        if (dateService.isToday(date)) {
+            dayHeader.classList.add('today');
+        }
+        const dayName = this.createElement('div', 'day-name');
+        dayName.textContent = dateService.getDayName(date, options.locale);
+        const dayNumber = this.createElement('div', 'day-number');
+        dayNumber.textContent = String(date.getDate());
+        const monthYear = this.createElement('div', 'month-year');
+        monthYear.textContent = dateService.formatDate(date, options.locale, {
+            month: 'long',
+            year: 'numeric',
+        });
+        monthYear.style.fontSize = '12px';
+        monthYear.style.color = '#666';
+        dayHeader.appendChild(dayName);
+        dayHeader.appendChild(dayNumber);
+        dayHeader.appendChild(monthYear);
+        header.appendChild(dayHeader);
+        this.container.appendChild(header);
+        // Time grid
+        const timeGrid = this.createElement('div', 'scheduler-time-grid');
+        // Time gutter
+        const timeGutter = this.createElement('div', 'scheduler-time-gutter');
+        const slots = dateService.getTimeSlots(date, options.slotDuration, options.slotMinTime, options.slotMaxTime);
+        for (const slot of slots) {
+            const label = this.createElement('div', 'scheduler-time-slot-label');
+            label.textContent = dateService.formatTime(slot.start, options.timeFormat);
+            timeGutter.appendChild(label);
+        }
+        timeGrid.appendChild(timeGutter);
+        // Day column
+        const daysContainer = this.createElement('div', 'scheduler-days-container');
+        this.dayColumn = this.createElement('div', 'scheduler-day-column');
+        const dayColumn = this.dayColumn;
+        // Create time slots
+        for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
+            const slot = slots[slotIndex];
+            const slotEl = this.createElement('div', 'scheduler-time-slot');
+            this.setData(slotEl, {
+                slotIndex,
+                start: slot.start.toISOString(),
+                end: slot.end.toISOString(),
+            });
+            this.slotElements.set(slotIndex, slotEl);
+            dayColumn.appendChild(slotEl);
+        }
+        // Events container
+        this.eventsContainer = this.createElement('div', 'scheduler-events-container');
+        dayColumn.appendChild(this.eventsContainer);
+        daysContainer.appendChild(dayColumn);
+        timeGrid.appendChild(daysContainer);
+        this.container.appendChild(timeGrid);
+        // Render events
+        this.renderEvents();
+        // Render now indicator
+        if (dateService.isToday(date) && options.nowIndicator) {
+            this.renderNowIndicator(dayColumn);
+        }
+    }
+    renderEvents() {
+        if (!this.eventsContainer)
+            return;
+        this.eventsContainer.innerHTML = '';
+        const { date, events, options } = this.state;
+        const dayStart = new Date(date);
+        dayStart.setHours(0, 0, 0, 0);
+        const dayEnd = new Date(date);
+        dayEnd.setHours(23, 59, 59, 999);
+        // Filter events for this day
+        const dayEvents = timelineService.filterByRange(events, dayStart, dayEnd);
+        // Split events into parts
+        const allParts = [];
+        for (const event of dayEvents) {
+            const { parts } = timelineService.splitInParts(event);
+            const dayParts = timelineService.filterPartsByRange(parts, dayStart, dayEnd);
+            allParts.push(...dayParts);
+        }
+        // Get timelened parts with track info
+        const timelinedParts = timelineService.getTimelinedParts(allParts);
+        // Render each event part
+        for (const { part, trackIndex, totalTracks, colspan } of timelinedParts) {
+            if (!part.event)
+                continue;
+            const eventEl = this.createEventElement(part, trackIndex, totalTracks, colspan, options.slotDuration ?? 1800);
+            this.eventsContainer.appendChild(eventEl);
+        }
+    }
+    createEventElement(part, trackIndex, totalTracks, colspan, slotDuration) {
+        const event = part.event;
+        const eventEl = this.createElement('div', 'scheduler-event');
+        // Mark as selected if this is the selected event
+        if (this.state.selectedEvent?.id === event.id) {
+            eventEl.classList.add('selected');
+        }
+        // Calculate position
+        const dayStart = new Date(part.start);
+        dayStart.setHours(0, 0, 0, 0);
+        const startMinutes = (part.start.getTime() - dayStart.getTime()) / (1000 * 60);
+        const endMinutes = (part.end.getTime() - dayStart.getTime()) / (1000 * 60);
+        const durationMinutes = endMinutes - startMinutes;
+        const slotMinutes = slotDuration / 60;
+        const top = (startMinutes / slotMinutes) * 40;
+        const height = Math.max((durationMinutes / slotMinutes) * 40, 20);
+        // Calculate width based on tracks and colspan
+        // colspan allows events to span multiple columns when there's no blocking event
+        const leftPercent = (trackIndex / totalTracks) * 100;
+        const widthPercent = (colspan / totalTracks) * 100;
+        eventEl.style.top = `${top}px`;
+        eventEl.style.height = `${height}px`;
+        eventEl.style.left = `${leftPercent}%`;
+        eventEl.style.width = `calc(${widthPercent}% - 2px)`;
+        eventEl.style.backgroundColor = event.color ?? '#3788d8';
+        eventEl.style.color = event.textColor ?? getContrastColor(event.color ?? '#3788d8');
+        this.setData(eventEl, { eventId: event.id });
+        // Title
+        const title = this.createElement('div', 'event-title');
+        title.textContent = event.title;
+        eventEl.appendChild(title);
+        // Time
+        const timeEl = this.createElement('div', 'event-time');
+        timeEl.textContent = `${dateService.formatTime(part.start, this.state.options.timeFormat)} - ${dateService.formatTime(part.end, this.state.options.timeFormat)}`;
+        eventEl.appendChild(timeEl);
+        // Resize handles
+        if (event.resizable !== false) {
+            if (part.isStart) {
+                const topHandle = this.createElement('div', 'resize-handle', 'top');
+                this.setData(topHandle, { handle: 'start' });
+                eventEl.appendChild(topHandle);
+            }
+            if (part.isEnd) {
+                const bottomHandle = this.createElement('div', 'resize-handle', 'bottom');
+                this.setData(bottomHandle, { handle: 'end' });
+                eventEl.appendChild(bottomHandle);
+            }
+        }
+        return eventEl;
+    }
+    renderNowIndicator(dayColumn) {
+        const now = new Date();
+        const dayStart = new Date(now);
+        dayStart.setHours(0, 0, 0, 0);
+        const minutesFromMidnight = (now.getTime() - dayStart.getTime()) / (1000 * 60);
+        const slotMinutes = (this.state.options.slotDuration ?? 1800) / 60;
+        const top = (minutesFromMidnight / slotMinutes) * 40;
+        const indicator = this.createElement('div', 'scheduler-now-indicator');
+        indicator.style.top = `${top}px`;
+        dayColumn.appendChild(indicator);
+    }
+    updateNowIndicator() {
+        if (!this.dayColumn)
+            return;
+        if (!this.state.options.nowIndicator)
+            return;
+        if (!dateService.isToday(this.state.date))
+            return;
+        // Find existing indicator
+        const existingIndicator = this.dayColumn.querySelector('.scheduler-now-indicator');
+        // Calculate new position
+        const now = new Date();
+        const dayStart = new Date(now);
+        dayStart.setHours(0, 0, 0, 0);
+        const minutesFromMidnight = (now.getTime() - dayStart.getTime()) / (1000 * 60);
+        const slotMinutes = (this.state.options.slotDuration ?? 1800) / 60;
+        const top = (minutesFromMidnight / slotMinutes) * 40;
+        if (existingIndicator) {
+            // Update position of existing indicator
+            existingIndicator.style.top = `${top}px`;
+        }
+        else {
+            // Create new indicator if it doesn't exist
+            this.renderNowIndicator(this.dayColumn);
+        }
+    }
+    update(state) {
+        const dateChanged = this.state.date.getTime() !== state.date.getTime();
+        const optionsChanged = this.optionsRequireRerender(this.state.options, state.options);
+        this.state = state;
+        // If date or relevant options changed, we need to re-render the entire view
+        if (dateChanged || optionsChanged) {
+            this.render();
+            return;
+        }
+        // Update greyed slots
+        this.updateGreyedSlots();
+        // Re-render events
+        this.renderEvents();
+        // Render preview event
+        this.renderPreviewEvent();
+    }
+    optionsRequireRerender(oldOpts, newOpts) {
+        return oldOpts.slotDuration !== newOpts.slotDuration ||
+            oldOpts.timeFormat !== newOpts.timeFormat ||
+            oldOpts.slotMinTime !== newOpts.slotMinTime ||
+            oldOpts.slotMaxTime !== newOpts.slotMaxTime ||
+            oldOpts.locale !== newOpts.locale;
+    }
+    updateGreyedSlots() {
+        const { dragState, previewEvent, options, date } = this.state;
+        // Clear all greyed slots
+        this.slotElements.forEach((el) => el.classList.remove('greyed'));
+        if (!dragState || !previewEvent)
+            return;
+        if (!dateService.isSameDay(date, previewEvent.start))
+            return;
+        const slots = dateService.getTimeSlots(date, options.slotDuration, options.slotMinTime, options.slotMaxTime);
+        for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
+            const slot = slots[slotIndex];
+            // Check if slot overlaps with preview event
+            if (slot.start < previewEvent.end && slot.end > previewEvent.start) {
+                const slotEl = this.slotElements.get(slotIndex);
+                if (slotEl) {
+                    slotEl.classList.add('greyed');
+                }
+            }
+        }
+    }
+    renderPreviewEvent() {
+        if (!this.eventsContainer)
+            return;
+        // Remove existing preview
+        const existingPreview = this.eventsContainer.querySelector('.scheduler-event.preview');
+        if (existingPreview) {
+            existingPreview.remove();
+        }
+        const { previewEvent, options, date } = this.state;
+        if (!previewEvent)
+            return;
+        if (!dateService.isSameDay(date, previewEvent.start))
+            return;
+        const previewEl = this.createElement('div', 'scheduler-event', 'preview');
+        const dayStart = new Date(previewEvent.start);
+        dayStart.setHours(0, 0, 0, 0);
+        const startMinutes = (previewEvent.start.getTime() - dayStart.getTime()) / (1000 * 60);
+        const endMinutes = (previewEvent.end.getTime() - dayStart.getTime()) / (1000 * 60);
+        const durationMinutes = endMinutes - startMinutes;
+        const slotMinutes = (options.slotDuration ?? 1800) / 60;
+        const top = (startMinutes / slotMinutes) * 40;
+        const height = Math.max((durationMinutes / slotMinutes) * 40, 20);
+        previewEl.style.top = `${top}px`;
+        previewEl.style.height = `${height}px`;
+        previewEl.style.left = '0';
+        previewEl.style.width = '100%';
+        this.eventsContainer.appendChild(previewEl);
+    }
+    destroy() {
+        this.eventsContainer = null;
+        this.dayColumn = null;
+        this.slotElements.clear();
+        this.clearContainer();
+    }
+}
+
+/**
+ * Timeline view renderer
+ */
+class TimelineView extends BaseView {
+    constructor() {
+        super(...arguments);
+        this.rowElements = new Map();
+        this.slotWidth = 50;
+    }
+    render() {
+        this.clearContainer();
+        this.container.classList.add('scheduler-timeline-view');
+        const { date, options, resources, collapsedGroups } = this.state;
+        const days = dateService.getWeekDays(date, options.firstDayOfWeek);
+        // Create timeline structure
+        const timeline = this.createElement('div', 'scheduler-timeline');
+        // Header
+        const header = this.createElement('div', 'scheduler-timeline-header');
+        // Resource column header
+        const resourceHeader = this.createElement('div', 'scheduler-resource-header');
+        resourceHeader.textContent = 'Resources';
+        header.appendChild(resourceHeader);
+        // Time slots header
+        const slotsHeader = this.createElement('div', 'scheduler-timeline-slots-header');
+        for (const day of days) {
+            const slots = dateService.getTimeSlots(day, options.slotDuration, options.slotMinTime, options.slotMaxTime);
+            // Day header spanning multiple slots
+            const daySlots = slots.length;
+            const dayHeader = this.createElement('div', 'scheduler-timeline-slot-header');
+            dayHeader.style.width = `${daySlots * this.slotWidth}px`;
+            dayHeader.textContent = dateService.formatDateWithWeekday(day, options.locale);
+            dayHeader.style.borderBottom = '1px solid var(--scheduler-border-color)';
+            slotsHeader.appendChild(dayHeader);
+        }
+        header.appendChild(slotsHeader);
+        timeline.appendChild(header);
+        // Time labels row
+        const timeLabelRow = this.createElement('div', 'scheduler-timeline-header');
+        const emptyCell = this.createElement('div', 'scheduler-resource-header');
+        emptyCell.style.borderBottom = '1px solid var(--scheduler-border-color)';
+        timeLabelRow.appendChild(emptyCell);
+        const timeLabelsContainer = this.createElement('div', 'scheduler-timeline-slots-header');
+        for (const day of days) {
+            const slots = dateService.getTimeSlots(day, options.slotDuration, options.slotMinTime, options.slotMaxTime);
+            for (const slot of slots) {
+                const slotHeader = this.createElement('div', 'scheduler-timeline-slot-header');
+                slotHeader.style.width = `${this.slotWidth}px`;
+                slotHeader.textContent = dateService.formatTime(slot.start, options.timeFormat);
+                slotHeader.style.fontSize = '10px';
+                timeLabelsContainer.appendChild(slotHeader);
+            }
+        }
+        timeLabelRow.appendChild(timeLabelsContainer);
+        timeline.appendChild(timeLabelRow);
+        // Body
+        const body = this.createElement('div', 'scheduler-timeline-body');
+        // Flatten resources
+        const flattened = resourceService.flatten(resources, collapsedGroups);
+        for (const flat of flattened) {
+            if (!flat.visible)
+                continue;
+            const row = this.createResourceRow(flat, days);
+            body.appendChild(row);
+        }
+        timeline.appendChild(body);
+        this.container.appendChild(timeline);
+        // Render events
+        this.renderEvents(days);
+    }
+    createResourceRow(flat, days) {
+        const { options } = this.state;
+        const row = this.createElement('div', 'scheduler-timeline-row');
+        if (isResourceGroup(flat.item)) {
+            row.classList.add('group');
+        }
+        // Resource cell
+        const resourceCell = this.createElement('div', 'scheduler-resource-cell');
+        resourceCell.style.paddingLeft = `${8 + flat.depth * 16}px`;
+        if (isResourceGroup(flat.item)) {
+            const toggle = this.createElement('span', 'expand-toggle');
+            toggle.textContent = this.state.collapsedGroups.has(flat.item.id) ? '▶' : '▼';
+            this.setData(toggle, { groupId: flat.item.id });
+            resourceCell.appendChild(toggle);
+        }
+        const title = this.createElement('span');
+        title.textContent = flat.item.title;
+        resourceCell.appendChild(title);
+        row.appendChild(resourceCell);
+        // Slots container
+        const slotsContainer = this.createElement('div', 'scheduler-timeline-slots');
+        for (const day of days) {
+            const slots = dateService.getTimeSlots(day, options.slotDuration, options.slotMinTime, options.slotMaxTime);
+            for (const slot of slots) {
+                const slotEl = this.createElement('div', 'scheduler-timeline-slot');
+                slotEl.style.width = `${this.slotWidth}px`;
+                this.setData(slotEl, {
+                    resourceId: flat.item.id,
+                    start: slot.start.toISOString(),
+                    end: slot.end.toISOString(),
+                });
+                slotsContainer.appendChild(slotEl);
+            }
+        }
+        // Events container for this row
+        if (isResource(flat.item)) {
+            const eventsContainer = this.createElement('div', 'scheduler-timeline-events');
+            slotsContainer.appendChild(eventsContainer);
+        }
+        row.appendChild(slotsContainer);
+        this.rowElements.set(flat.item.id, row);
+        return row;
+    }
+    renderEvents(days) {
+        const { events, resources, options, collapsedGroups } = this.state;
+        const weekStart = days[0];
+        const weekEnd = new Date(days[6]);
+        weekEnd.setHours(23, 59, 59, 999);
+        // Get total slots per day
+        const slotsPerDay = dateService.getTimeSlots(days[0], options.slotDuration, options.slotMinTime, options.slotMaxTime).length;
+        const totalSlots = slotsPerDay * 7;
+        const totalWidth = totalSlots * this.slotWidth;
+        // Get all resources
+        const allResources = resourceService.getAllResources(resources);
+        for (const resource of allResources) {
+            const row = this.rowElements.get(resource.id);
+            if (!row)
+                continue;
+            const eventsContainer = row.querySelector('.scheduler-timeline-events');
+            if (!eventsContainer)
+                continue;
+            // Clear existing events
+            eventsContainer.innerHTML = '';
+            // Get events for this resource
+            const resourceEvents = (resource.events ?? []).filter((e) => e.start < weekEnd && e.end > weekStart);
+            // Create event parts for layout (don't split into daily parts for timeline view)
+            // For timeline view, treat each event as a single entity for layout purposes
+            const allParts = resourceEvents.map((event) => ({
+                id: event.id,
+                event: event,
+                start: event.start,
+                end: event.end,
+                isStart: true,
+                isEnd: true,
+                dayIndex: 0,
+                totalDays: 1,
+            }));
+            // Get timelened parts with track info (uses colspan algorithm)
+            const timelinedParts = timelineService.getTimelinedParts(allParts);
+            // Render each event part
+            for (const { part, trackIndex, totalTracks, colspan } of timelinedParts) {
+                if (!part.event)
+                    continue;
+                const eventEl = this.createEventElement(part.event, trackIndex, totalTracks, colspan, weekStart, totalWidth, options.slotDuration ?? 1800);
+                eventsContainer.appendChild(eventEl);
+            }
+        }
+    }
+    createEventElement(event, trackIndex, totalTracks, colspan, viewStart, totalWidth, slotDuration) {
+        const eventEl = this.createElement('div', 'scheduler-timeline-event');
+        // Mark as selected if this is the selected event
+        if (this.state.selectedEvent?.id === event.id) {
+            eventEl.classList.add('selected');
+        }
+        // Clamp event to view bounds
+        const eventStart = Math.max(event.start.getTime(), viewStart.getTime());
+        const viewEndTime = viewStart.getTime() + 7 * 24 * 60 * 60 * 1000;
+        const eventEnd = Math.min(event.end.getTime(), viewEndTime);
+        // Calculate position
+        const startOffset = eventStart - viewStart.getTime();
+        const duration = eventEnd - eventStart;
+        const viewDuration = viewEndTime - viewStart.getTime();
+        const left = (startOffset / viewDuration) * totalWidth;
+        const width = Math.max((duration / viewDuration) * totalWidth, 20);
+        // Calculate vertical position based on track and colspan
+        // colspan allows events to span multiple tracks when there's no blocking event
+        const top = (trackIndex / totalTracks) * 100;
+        const heightPercent = (colspan / totalTracks) * 100;
+        eventEl.style.left = `${left}px`;
+        eventEl.style.width = `${width}px`;
+        eventEl.style.top = `${top}%`;
+        eventEl.style.height = `${heightPercent}%`;
+        eventEl.style.backgroundColor = event.color ?? '#3788d8';
+        eventEl.style.color = event.textColor ?? getContrastColor(event.color ?? '#3788d8');
+        this.setData(eventEl, { eventId: event.id });
+        eventEl.textContent = event.title;
+        return eventEl;
+    }
+    update(state) {
+        const dateChanged = this.state.date.getTime() !== state.date.getTime();
+        const optionsChanged = this.optionsRequireRerender(this.state.options, state.options);
+        this.state = state;
+        // If date or relevant options changed, we need to re-render the entire view
+        if (dateChanged || optionsChanged) {
+            this.render();
+            return;
+        }
+        // Update greyed slots
+        this.updateGreyedSlots();
+        // Re-render events
+        const days = dateService.getWeekDays(state.date, state.options.firstDayOfWeek);
+        this.renderEvents(days);
+    }
+    optionsRequireRerender(oldOpts, newOpts) {
+        return oldOpts.slotDuration !== newOpts.slotDuration ||
+            oldOpts.timeFormat !== newOpts.timeFormat ||
+            oldOpts.firstDayOfWeek !== newOpts.firstDayOfWeek ||
+            oldOpts.slotMinTime !== newOpts.slotMinTime ||
+            oldOpts.slotMaxTime !== newOpts.slotMaxTime ||
+            oldOpts.locale !== newOpts.locale;
+    }
+    updateGreyedSlots() {
+        const { dragState, previewEvent } = this.state;
+        // Clear all greyed slots
+        const allSlots = this.container.querySelectorAll('.scheduler-timeline-slot');
+        allSlots.forEach((slot) => slot.classList.remove('greyed'));
+        if (!dragState || !previewEvent)
+            return;
+        // Grey out slots that overlap with the preview
+        allSlots.forEach((slot) => {
+            const slotStart = new Date(slot.dataset['start'] ?? '');
+            const slotEnd = new Date(slot.dataset['end'] ?? '');
+            if (slotStart < previewEvent.end && slotEnd > previewEvent.start) {
+                slot.classList.add('greyed');
+            }
+        });
+    }
+    destroy() {
+        this.rowElements.clear();
+        this.clearContainer();
+    }
+}
+
+// AUTO-GENERATED — do not edit by hand.
+// Source: scheduler.styles.scss
+// Regenerate with the codegen-wc Nx target.
+const schedulerStyles = unsafeCSS(`:host {
+  display: block;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
+  font-size: 14px;
+  --scheduler-border-color: #ddd;
+  --scheduler-header-bg: #f8f9fa;
+  --scheduler-today-bg: #fff3cd;
+  --scheduler-slot-height: 40px;
+  --scheduler-time-gutter-width: 80px;
+  --scheduler-event-border-radius: 4px;
+  --scheduler-now-indicator-color: #dc3545;
+  --scheduler-preview-bg: rgba(0, 123, 255, 0.3);
+  --scheduler-greyed-slot-bg: rgba(0, 0, 0, 0.1);
+  --scheduler-column-min-width: 120px;
+  --scheduler-touch-hold-duration: 500ms;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.scheduler-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid var(--scheduler-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+}
+
+/* Header */
+.scheduler-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--scheduler-header-bg);
+  border-bottom: 1px solid var(--scheduler-border-color);
+  flex-shrink: 0;
+}
+
+.scheduler-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scheduler-nav button {
+  padding: 6px 12px;
+  border: 1px solid var(--scheduler-border-color);
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.scheduler-nav button:hover {
+  background: #e9ecef;
+}
+
+.scheduler-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.scheduler-view-switcher {
+  display: flex;
+  gap: 4px;
+}
+
+.scheduler-view-switcher button {
+  padding: 6px 12px;
+  border: 1px solid var(--scheduler-border-color);
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.scheduler-view-switcher button:hover {
+  background: #e9ecef;
+}
+
+.scheduler-view-switcher button.active {
+  background: #0d6efd;
+  color: #fff;
+  border-color: #0d6efd;
+}
+
+/* Main content area */
+.scheduler-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.scheduler-sidebar {
+  width: var(--scheduler-time-gutter-width);
+  flex-shrink: 0;
+  border-right: 1px solid var(--scheduler-border-color);
+  background: var(--scheduler-header-bg);
+}
+
+.scheduler-content {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+/* Week/Day View Grid */
+.scheduler-grid {
+  display: grid;
+  min-width: 100%;
+}
+
+.scheduler-day-headers {
+  display: flex;
+  border-bottom: 1px solid var(--scheduler-border-color);
+  background: var(--scheduler-header-bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  min-width: fit-content;
+}
+
+.scheduler-day-header {
+  flex: 1 0 var(--scheduler-column-min-width);
+  min-width: var(--scheduler-column-min-width);
+  text-align: center;
+  padding: 8px 4px;
+  border-right: 1px solid var(--scheduler-border-color);
+  font-weight: 500;
+}
+
+.scheduler-day-header:last-child {
+  border-right: none;
+}
+
+.scheduler-day-header.today {
+  background: var(--scheduler-today-bg);
+}
+
+.scheduler-day-header .day-name {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+}
+
+.scheduler-day-header .day-number {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 2px;
+}
+
+.scheduler-time-grid {
+  display: flex;
+  position: relative;
+  min-width: fit-content;
+}
+
+.scheduler-time-gutter {
+  width: var(--scheduler-time-gutter-width);
+  flex-shrink: 0;
+  border-right: 1px solid var(--scheduler-border-color);
+  background: var(--scheduler-header-bg);
+}
+
+.scheduler-time-slot-label {
+  height: var(--scheduler-slot-height);
+  padding: 0 8px;
+  font-size: 12px;
+  color: #666;
+  text-align: right;
+  position: relative;
+  top: -8px;
+  white-space: nowrap;
+}
+
+.scheduler-days-container {
+  display: flex;
+  flex: 1;
+  position: relative;
+  min-width: fit-content;
+}
+
+.scheduler-day-column {
+  flex: 1 0 var(--scheduler-column-min-width);
+  min-width: var(--scheduler-column-min-width);
+  position: relative;
+  border-right: 1px solid var(--scheduler-border-color);
+}
+
+.scheduler-day-column:last-child {
+  border-right: none;
+}
+
+.scheduler-time-slot {
+  height: var(--scheduler-slot-height);
+  border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.scheduler-time-slot:nth-child(2n) {
+  border-bottom-color: var(--scheduler-border-color);
+}
+
+.scheduler-time-slot.greyed {
+  background: var(--scheduler-greyed-slot-bg);
+}
+
+/* Events */
+.scheduler-events-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.scheduler-event {
+  position: absolute;
+  border-radius: var(--scheduler-event-border-radius);
+  padding: 2px 4px;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  pointer-events: auto;
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+}
+
+/* Prevent browser from handling touch gestures on events (enables drag) */
+.scheduler-event:not(.preview) {
+  touch-action: none;
+  -ms-touch-action: none;
+}
+
+.scheduler-event:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.scheduler-event.selected {
+  box-shadow: 0 0 0 3px #212529;
+}
+
+.scheduler-event .event-title {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.scheduler-event .event-time {
+  font-size: 11px;
+  opacity: 0.8;
+}
+
+.scheduler-event.preview {
+  background: var(--scheduler-preview-bg);
+  border: 2px dashed #0d6efd;
+  pointer-events: none;
+}
+
+/* Resize handles */
+.scheduler-event .resize-handle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.scheduler-event .resize-handle.top {
+  top: 0;
+}
+
+.scheduler-event .resize-handle.bottom {
+  bottom: 0;
+}
+
+/* Now indicator */
+.scheduler-now-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--scheduler-now-indicator-color);
+  z-index: 5;
+  pointer-events: none;
+}
+
+.scheduler-now-indicator::before {
+  content: "";
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--scheduler-now-indicator-color);
+}
+
+/* Month View */
+.scheduler-month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: minmax(100px, 1fr);
+  height: 100%;
+}
+
+.scheduler-month-day {
+  border-right: 1px solid var(--scheduler-border-color);
+  border-bottom: 1px solid var(--scheduler-border-color);
+  padding: 4px;
+  overflow: hidden;
+}
+
+.scheduler-month-day:nth-child(7n) {
+  border-right: none;
+}
+
+.scheduler-month-day.other-month {
+  background: #f8f9fa;
+  color: #adb5bd;
+}
+
+.scheduler-month-day.today {
+  background: var(--scheduler-today-bg);
+}
+
+.scheduler-month-day .day-number {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.scheduler-month-day .month-events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.scheduler-month-event {
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.scheduler-more-link {
+  font-size: 11px;
+  color: #0d6efd;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+/* Year View */
+.scheduler-year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 16px;
+}
+
+.scheduler-year-month {
+  border: 1px solid var(--scheduler-border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.scheduler-year-month-header {
+  padding: 8px;
+  background: var(--scheduler-header-bg);
+  font-weight: 600;
+  text-align: center;
+  cursor: pointer;
+}
+
+.scheduler-year-month-header:hover {
+  background: #e9ecef;
+}
+
+.scheduler-mini-month {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  padding: 4px;
+}
+
+.scheduler-mini-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.scheduler-mini-day:hover {
+  background: #e9ecef;
+}
+
+.scheduler-mini-day.has-events {
+  font-weight: 600;
+}
+
+.scheduler-mini-day.has-events::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #0d6efd;
+}
+
+.scheduler-mini-day.today {
+  background: var(--scheduler-today-bg);
+}
+
+.scheduler-mini-day.other-month {
+  color: #adb5bd;
+}
+
+/* Timeline View */
+.scheduler-timeline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scheduler-timeline-header {
+  display: flex;
+  border-bottom: 1px solid var(--scheduler-border-color);
+  background: var(--scheduler-header-bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.scheduler-resource-header {
+  width: 200px;
+  flex-shrink: 0;
+  padding: 8px;
+  border-right: 1px solid var(--scheduler-border-color);
+  font-weight: 600;
+}
+
+.scheduler-timeline-slots-header {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.scheduler-timeline-slot-header {
+  flex-shrink: 0;
+  padding: 8px;
+  text-align: center;
+  border-right: 1px solid var(--scheduler-border-color);
+  font-size: 12px;
+}
+
+.scheduler-timeline-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+}
+
+.scheduler-timeline-row {
+  display: flex;
+  border-bottom: 1px solid var(--scheduler-border-color);
+  min-height: 40px;
+}
+
+.scheduler-timeline-row.group {
+  background: var(--scheduler-header-bg);
+  font-weight: 600;
+}
+
+.scheduler-resource-cell {
+  width: 200px;
+  flex-shrink: 0;
+  padding: 8px;
+  border-right: 1px solid var(--scheduler-border-color);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scheduler-resource-cell .expand-toggle {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scheduler-timeline-slots {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+
+.scheduler-timeline-slot {
+  flex-shrink: 0;
+  border-right: 1px solid #eee;
+  height: 100%;
+}
+
+.scheduler-timeline-slot.greyed {
+  background: var(--scheduler-greyed-slot-bg);
+}
+
+.scheduler-timeline-events {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.scheduler-timeline-event {
+  position: absolute;
+  height: calc(100% - 4px);
+  top: 2px;
+  border-radius: var(--scheduler-event-border-radius);
+  padding: 2px 6px;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.scheduler-timeline-event.selected {
+  box-shadow: 0 0 0 3px #212529;
+}
+
+/* Loading state */
+.scheduler-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #666;
+}
+
+/* Empty state */
+.scheduler-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #666;
+  font-style: italic;
+}
+
+/* Touch drag mode indicator */
+.scheduler-container.touch-drag-mode {
+  cursor: grabbing;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  -ms-touch-action: none;
+}
+
+.scheduler-container.touch-drag-mode .scheduler-content {
+  overflow: hidden;
+  touch-action: none;
+  -ms-touch-action: none;
+}
+
+.scheduler-event.touch-hold-pending {
+  animation: touch-hold-pulse 0.5s ease-in-out;
+  touch-action: none;
+  -ms-touch-action: none;
+}
+
+.scheduler-event.touch-hold-active {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  touch-action: none;
+  -ms-touch-action: none;
+}
+
+.scheduler-time-slot.touch-hold-pending,
+.scheduler-timeline-slot.touch-hold-pending {
+  animation: touch-hold-pulse 0.5s ease-in-out;
+}
+
+.scheduler-time-slot.touch-hold-active,
+.scheduler-timeline-slot.touch-hold-active {
+  background: var(--scheduler-preview-bg);
+}
+
+@keyframes touch-hold-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* Pan mode styling */
+.scheduler-content.pan-mode {
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* Scroll blocking during drag operations */
+.scheduler-content.scroll-blocked {
+  overflow: hidden !important;
+  touch-action: none !important;
+}
+
+/* Scrollbar styling */
+.scheduler-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scheduler-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.scheduler-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.scheduler-content::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}`);
+
+/**
+ * Default drag configuration.
+ */
+const DEFAULT_DRAG_CONFIG = {
+    dragThreshold: 5,
+    minDurationMs: 30 * 60 * 1000, // 30 minutes
+};
+
+/**
+ * Calculates preview positions for drag operations.
+ * Handles create, move, and resize operations.
+ */
+class DragPreviewCalculator {
+    constructor(config = {}) {
+        this.config = { ...DEFAULT_DRAG_CONFIG, ...config };
+    }
+    /**
+     * Calculate the preview event position based on drag state.
+     *
+     * @param type - The type of drag operation
+     * @param startSlot - The slot where the drag started
+     * @param currentSlot - The current slot under the pointer
+     * @param originalEvent - The original event being moved/resized (null for create)
+     * @returns The preview event with new start/end, or null if invalid
+     */
+    calculatePreview(type, startSlot, currentSlot, originalEvent) {
+        switch (type) {
+            case 'create':
+                return this.calculateCreatePreview(startSlot, currentSlot);
+            case 'move':
+                return originalEvent
+                    ? this.calculateMovePreview(startSlot, currentSlot, originalEvent)
+                    : null;
+            case 'resize-start':
+                return originalEvent
+                    ? this.calculateResizeStartPreview(currentSlot, originalEvent)
+                    : null;
+            case 'resize-end':
+                return originalEvent
+                    ? this.calculateResizeEndPreview(currentSlot, originalEvent)
+                    : null;
+            default:
+                return null;
+        }
+    }
+    /**
+     * Calculate preview for creating a new event.
+     * Extends selection from start slot to current slot.
+     */
+    calculateCreatePreview(startSlot, currentSlot) {
+        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 };
+    }
+    /**
+     * Calculate preview for moving an existing event.
+     * Preserves event duration, applies offset from drag start.
+     */
+    calculateMovePreview(startSlot, currentSlot, originalEvent) {
+        // Calculate how much the pointer has moved in time
+        const offsetMs = currentSlot.start.getTime() - startSlot.start.getTime();
+        // Preserve the original event duration
+        const duration = originalEvent.end.getTime() - originalEvent.start.getTime();
+        // Apply offset to original event position
+        const newStart = new Date(originalEvent.start.getTime() + offsetMs);
+        const newEnd = new Date(newStart.getTime() + duration);
+        return { start: newStart, end: newEnd };
+    }
+    /**
+     * Calculate preview for resizing event start.
+     * Moves start time while keeping end fixed.
+     * Enforces minimum duration.
+     */
+    calculateResizeStartPreview(currentSlot, originalEvent) {
+        // Calculate maximum allowed start time (end - min duration)
+        const maxStart = originalEvent.end.getTime() - this.config.minDurationMs;
+        // New start is the earlier of: current slot start, or max allowed start
+        const newStart = new Date(Math.min(currentSlot.start.getTime(), maxStart));
+        return { start: newStart, end: originalEvent.end };
+    }
+    /**
+     * Calculate preview for resizing event end.
+     * Moves end time while keeping start fixed.
+     * Enforces minimum duration.
+     */
+    calculateResizeEndPreview(currentSlot, originalEvent) {
+        // Calculate minimum allowed end time (start + min duration)
+        const minEnd = originalEvent.start.getTime() + this.config.minDurationMs;
+        // New end is the later of: current slot end, or min allowed end
+        const newEnd = new Date(Math.max(currentSlot.end.getTime(), minEnd));
+        return { start: originalEvent.start, end: newEnd };
+    }
+}
+
+/**
+ * Create a normalized pointer event from a mouse event.
+ */
+function normalizeMouseEvent(event) {
+    return {
+        pointerId: 0,
+        pointerType: 'mouse',
+        clientX: event.clientX,
+        clientY: event.clientY,
+        originalEvent: event,
+        target: event.target,
+        isPrimary: true,
+    };
+}
+/**
+ * Create a normalized pointer event from a touch event.
+ * Returns the first touch, or null if no touches.
+ */
+function normalizeTouchEvent(event) {
+    const touch = event.touches[0] || event.changedTouches[0];
+    if (!touch)
+        return null;
+    return {
+        pointerId: touch.identifier,
+        pointerType: 'touch',
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+        originalEvent: event,
+        target: touch.target,
+        isPrimary: touch.identifier === 0,
+    };
+}
+/**
+ * Calculate distance between two positions.
+ */
+function getPointerDistance(pos1, pos2) {
+    const dx = pos2.x - pos1.x;
+    const dy = pos2.y - pos1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * Explicit state machine for drag operations.
+ *
+ * States:
+ * - idle: No drag operation in progress
+ * - pending: Pointer is down, waiting for movement to exceed threshold
+ * - active: Drag is in progress, preview is being updated
+ * - completing: Drag just finished, result is available
+ *
+ * Transitions:
+ * - idle + POINTER_DOWN (on valid target) → pending
+ * - pending + POINTER_MOVE (threshold exceeded) → active
+ * - pending + POINTER_UP → idle (treated as click)
+ * - pending + CANCEL → idle
+ * - active + POINTER_MOVE → active (update preview)
+ * - active + POINTER_UP → completing
+ * - active + CANCEL → idle
+ * - completing → idle (after result is consumed)
+ */
+class DragStateMachine {
+    constructor(config = {}) {
+        this.state = { phase: 'idle' };
+        this.config = { ...DEFAULT_DRAG_CONFIG, ...config };
+        this.previewCalculator = new DragPreviewCalculator(this.config);
+    }
+    /**
+     * Get current state (read-only).
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Get the current phase.
+     */
+    getPhase() {
+        return this.state.phase;
+    }
+    /**
+     * Check if drag is currently active.
+     */
+    isActive() {
+        return this.state.phase === 'active';
+    }
+    /**
+     * Check if drag is pending (waiting for threshold).
+     */
+    isPending() {
+        return this.state.phase === 'pending';
+    }
+    /**
+     * Check if in any drag-related state (pending or active).
+     */
+    isDragging() {
+        return this.state.phase === 'pending' || this.state.phase === 'active';
+    }
+    /**
+     * Get the preview event if in active state.
+     */
+    getPreview() {
+        return this.state.phase === 'active' ? this.state.preview : null;
+    }
+    /**
+     * Get the completion result if in completing state.
+     */
+    getCompletionResult() {
+        return this.state.phase === 'completing' ? this.state.result : null;
+    }
+    /**
+     * Process an event and transition to new state.
+     * Returns true if state changed.
+     */
+    send(event) {
+        const previousPhase = this.state.phase;
+        this.state = this.transition(event);
+        return this.state.phase !== previousPhase;
+    }
+    /**
+     * Reset to idle state.
+     */
+    reset() {
+        this.state = { phase: 'idle' };
+    }
+    /**
+     * Consume the completion result and return to idle.
+     * Call this after handling a completed drag.
+     */
+    consumeResult() {
+        if (this.state.phase === 'completing') {
+            const result = this.state.result;
+            this.state = { phase: 'idle' };
+            return result;
+        }
+        return null;
+    }
+    /**
+     * Pure transition function.
+     * Given current state and event, returns new state.
+     */
+    transition(event) {
+        switch (this.state.phase) {
+            case 'idle':
+                return this.transitionFromIdle(event);
+            case 'pending':
+                return this.transitionFromPending(event);
+            case 'active':
+                return this.transitionFromActive(event);
+            case 'completing':
+                return this.transitionFromCompleting(event);
+            default:
+                return this.state;
+        }
+    }
+    /**
+     * Transitions from idle state.
+     */
+    transitionFromIdle(event) {
+        if (event.type !== 'POINTER_DOWN') {
+            return this.state;
+        }
+        const { target, position, slot, slotElement, immediate } = event;
+        // Determine operation type from target
+        const operationType = this.getOperationType(target);
+        if (!operationType) {
+            return this.state;
+        }
+        // Get the event being dragged (if any)
+        const schedulerEvent = target.event ?? null;
+        // Check if this event is draggable
+        if (schedulerEvent && schedulerEvent.draggable === false) {
+            return this.state;
+        }
+        // For touch-initiated drags, skip pending and go directly to active
+        if (immediate) {
+            // For move operations without a slot, create one from the event's times
+            let startSlot = slot;
+            if (!startSlot && schedulerEvent && operationType === 'move') {
+                startSlot = {
+                    start: schedulerEvent.start,
+                    end: schedulerEvent.end,
+                };
+            }
+            if (startSlot) {
+                const preview = this.previewCalculator.calculatePreview(operationType, startSlot, startSlot, schedulerEvent);
+                if (preview) {
+                    return {
+                        phase: 'active',
+                        operationType,
+                        event: schedulerEvent,
+                        startSlot,
+                        currentSlot: startSlot,
+                        preview,
+                        originalEvent: schedulerEvent ?? undefined,
+                    };
+                }
+            }
+        }
+        return {
+            phase: 'pending',
+            operationType,
+            event: schedulerEvent,
+            startPosition: position,
+            startSlot: slot,
+            slotElement,
+        };
+    }
+    /**
+     * Transitions from pending state.
+     */
+    transitionFromPending(event) {
+        if (this.state.phase !== 'pending')
+            return this.state;
+        switch (event.type) {
+            case 'POINTER_MOVE': {
+                const distance = getPointerDistance(this.state.startPosition, event.position);
+                if (distance < this.config.dragThreshold) {
+                    // Not enough movement, stay in pending
+                    return this.state;
+                }
+                // Threshold exceeded - activate drag
+                return this.activateDrag(event.slot);
+            }
+            case 'POINTER_UP': {
+                // Released before threshold - treat as click
+                return {
+                    phase: 'completing',
+                    result: {
+                        type: this.state.operationType,
+                        preview: this.getInitialPreview(),
+                        event: this.state.event,
+                        originalEvent: this.state.event ?? undefined,
+                        wasClick: true,
+                    },
+                };
+            }
+            case 'CANCEL':
+                return { phase: 'idle' };
+            default:
+                return this.state;
+        }
+    }
+    /**
+     * Transitions from active state.
+     */
+    transitionFromActive(event) {
+        if (this.state.phase !== 'active')
+            return this.state;
+        switch (event.type) {
+            case 'POINTER_MOVE': {
+                if (!event.slot) {
+                    // No valid slot under pointer, keep current state
+                    return this.state;
+                }
+                // Calculate new preview
+                const preview = this.previewCalculator.calculatePreview(this.state.operationType, this.state.startSlot, event.slot, this.state.originalEvent ?? null);
+                if (!preview) {
+                    return this.state;
+                }
+                return {
+                    ...this.state,
+                    currentSlot: event.slot,
+                    preview,
+                };
+            }
+            case 'POINTER_UP': {
+                return {
+                    phase: 'completing',
+                    result: {
+                        type: this.state.operationType,
+                        preview: this.state.preview,
+                        event: this.state.event,
+                        originalEvent: this.state.originalEvent,
+                        wasClick: false,
+                    },
+                };
+            }
+            case 'CANCEL':
+                return { phase: 'idle' };
+            default:
+                return this.state;
+        }
+    }
+    /**
+     * Transitions from completing state.
+     */
+    transitionFromCompleting(event) {
+        // Any event from completing goes to idle
+        // (The result should be consumed via consumeResult first)
+        if (event.type === 'CANCEL' || event.type === 'POINTER_DOWN') {
+            return { phase: 'idle' };
+        }
+        return this.state;
+    }
+    /**
+     * Activate drag from pending state.
+     */
+    activateDrag(currentSlot) {
+        if (this.state.phase !== 'pending') {
+            return this.state;
+        }
+        const startSlot = this.state.startSlot ?? currentSlot;
+        if (!startSlot) {
+            return { phase: 'idle' };
+        }
+        const slot = currentSlot ?? startSlot;
+        // Calculate initial preview
+        const preview = this.previewCalculator.calculatePreview(this.state.operationType, startSlot, slot, this.state.event);
+        if (!preview) {
+            return { phase: 'idle' };
+        }
+        return {
+            phase: 'active',
+            operationType: this.state.operationType,
+            event: this.state.event,
+            startSlot,
+            currentSlot: slot,
+            preview,
+            originalEvent: this.state.event ?? undefined,
+        };
+    }
+    /**
+     * Get operation type from pointer target.
+     */
+    getOperationType(target) {
+        switch (target.type) {
+            case 'resize-handle':
+                return target.resizeHandle === 'start' ? 'resize-start' : 'resize-end';
+            case 'event':
+                return 'move';
+            case 'slot':
+                return 'create';
+            default:
+                return null;
+        }
+    }
+    /**
+     * Get initial preview for a pending drag (used for click detection).
+     */
+    getInitialPreview() {
+        if (this.state.phase !== 'pending') {
+            return { start: new Date(), end: new Date() };
+        }
+        if (this.state.event) {
+            return {
+                start: this.state.event.start,
+                end: this.state.event.end,
+            };
+        }
+        if (this.state.startSlot) {
+            return {
+                start: this.state.startSlot.start,
+                end: this.state.startSlot.end,
+            };
+        }
+        return { start: new Date(), end: new Date() };
+    }
+}
+
+/**
+ * Coordinates drag operations between the state machine and scheduler state.
+ * Handles RAF scheduling for smooth drag updates.
+ */
+class DragManager {
+    constructor(stateManager, config = {}) {
+        // RAF scheduling for smooth updates
+        this.pendingUpdate = null;
+        this.latestPointer = null;
+        this.getSlotAtPosition = null;
+        this.stateManager = stateManager;
+        this.config = { ...DEFAULT_DRAG_CONFIG, ...config };
+        this.stateMachine = new DragStateMachine(this.config);
+    }
+    /**
+     * Set the function used to get a slot at a position.
+     * This must be set before handling pointer events.
+     */
+    setSlotResolver(resolver) {
+        this.getSlotAtPosition = resolver;
+    }
+    /**
+     * Handle pointer down - may start pending drag.
+     * @param immediate If true, skip pending state (for touch-initiated drags)
+     */
+    handlePointerDown(pointer, target, immediate = false) {
+        const slot = this.getSlotAtPosition?.(pointer.clientX, pointer.clientY) ?? null;
+        this.stateMachine.send({
+            type: 'POINTER_DOWN',
+            target,
+            position: { x: pointer.clientX, y: pointer.clientY },
+            slot,
+            slotElement: target.slotElement,
+            immediate,
+        });
+        // If we started a drag, update state manager
+        if (this.stateMachine.isActive()) {
+            this.syncToStateManager();
+        }
+    }
+    /**
+     * Handle pointer move - may activate drag or update preview.
+     */
+    handlePointerMove(pointer) {
+        if (!this.stateMachine.isDragging()) {
+            return;
+        }
+        // Store latest pointer for RAF callback
+        this.latestPointer = pointer;
+        // Schedule update if not already pending
+        if (this.pendingUpdate === null) {
+            this.pendingUpdate = requestAnimationFrame(() => {
+                this.processPendingMove();
+            });
+        }
+    }
+    /**
+     * Handle pointer up - finalize or cancel drag.
+     * Returns the completion result if a drag was completed.
+     */
+    handlePointerUp(pointer) {
+        // Cancel any pending RAF
+        this.cancelPendingUpdate();
+        this.stateMachine.send({
+            type: 'POINTER_UP',
+            position: { x: pointer.clientX, y: pointer.clientY },
+        });
+        // Get and consume the result
+        const result = this.stateMachine.consumeResult();
+        // Clear state manager drag state
+        this.stateManager.endDrag();
+        return result;
+    }
+    /**
+     * Cancel any in-progress drag operation.
+     */
+    cancel() {
+        this.cancelPendingUpdate();
+        this.stateMachine.send({ type: 'CANCEL' });
+        this.stateManager.endDrag();
+    }
+    /**
+     * Check if a drag operation is in progress.
+     */
+    isActive() {
+        return this.stateMachine.isActive();
+    }
+    /**
+     * Check if waiting for drag threshold.
+     */
+    isPending() {
+        return this.stateMachine.isPending();
+    }
+    /**
+     * Check if in any drag-related state.
+     */
+    isDragging() {
+        return this.stateMachine.isDragging();
+    }
+    /**
+     * Get the current drag phase.
+     */
+    getPhase() {
+        return this.stateMachine.getPhase();
+    }
+    /**
+     * Reset the drag manager state.
+     */
+    reset() {
+        this.cancelPendingUpdate();
+        this.stateMachine.reset();
+    }
+    /**
+     * Clean up resources.
+     */
+    destroy() {
+        this.cancelPendingUpdate();
+        this.latestPointer = null;
+        this.getSlotAtPosition = null;
+    }
+    /**
+     * Create a new event from a completed create drag.
+     */
+    createEventFromResult(result) {
+        return {
+            id: generateEventId(),
+            title: 'New Event',
+            start: result.preview.start,
+            end: result.preview.end,
+            color: '#3788d8',
+        };
+    }
+    /**
+     * Update an event from a completed move/resize drag.
+     */
+    updateEventFromResult(result, event) {
+        return {
+            ...event,
+            start: result.preview.start,
+            end: result.preview.end,
+        };
+    }
+    /**
+     * Process pending pointer move using RAF.
+     */
+    processPendingMove() {
+        this.pendingUpdate = null;
+        const pointer = this.latestPointer;
+        this.latestPointer = null;
+        if (!pointer || !this.stateMachine.isDragging()) {
+            return;
+        }
+        const slot = this.getSlotAtPosition?.(pointer.clientX, pointer.clientY) ?? null;
+        const stateChanged = this.stateMachine.send({
+            type: 'POINTER_MOVE',
+            position: { x: pointer.clientX, y: pointer.clientY },
+            slot,
+        });
+        // Sync to state manager if state changed
+        if (stateChanged || this.stateMachine.isActive()) {
+            this.syncToStateManager();
+        }
+    }
+    /**
+     * Sync state machine state to scheduler state manager.
+     */
+    syncToStateManager() {
+        const machineState = this.stateMachine.getState();
+        if (machineState.phase === 'active') {
+            // Update or start drag in state manager
+            const currentState = this.stateManager.getState();
+            if (currentState.dragState) {
+                // Update existing drag
+                this.stateManager.updateDrag(machineState.currentSlot, machineState.preview);
+            }
+            else {
+                // Start new drag
+                this.stateManager.startDrag({
+                    type: machineState.operationType,
+                    event: machineState.event,
+                    startSlot: machineState.startSlot,
+                    currentSlot: machineState.currentSlot,
+                    preview: machineState.preview,
+                    originalEvent: machineState.originalEvent,
+                });
+            }
+        }
+    }
+    /**
+     * Cancel any pending RAF update.
+     */
+    cancelPendingUpdate() {
+        if (this.pendingUpdate !== null) {
+            cancelAnimationFrame(this.pendingUpdate);
+            this.pendingUpdate = null;
+        }
+        this.latestPointer = null;
+    }
+}
+
+const DEFAULT_TOUCH_HOLD_DURATION = 600;
+const DEFAULT_TOUCH_MOVE_THRESHOLD = 10;
+const DEFAULT_MOUSE_PAN_TIMEOUT = 600;
+/**
+ * Unified input handler for mouse and touch events.
+ * Normalizes events and handles touch-specific behaviors (hold-to-drag).
+ */
+class InputHandler {
+    constructor(config, callbacks) {
+        // Touch-specific state
+        this.touchHoldTimer = null;
+        this.touchStartPosition = null;
+        this.isTouchDragMode = false;
+        this.touchHoldTarget = null;
+        this.touchHoldPointer = null;
+        // Pan mode state (for panning when touch/mouse starts on event and moves quickly)
+        this.isPanMode = false;
+        this.panStartPosition = null;
+        this.panStartScroll = null;
+        this.panStartedOnEvent = false;
+        // Mouse pan state (for panning when mousedown on event and move within timeout)
+        this.mousePanTimer = null;
+        this.mouseStartPosition = null;
+        this.isMousePanCandidate = false;
+        // Scroll blocking state (saved styles for restoration)
+        this.savedBodyStyles = null;
+        this.config = config;
+        this.callbacks = callbacks;
+        // Bind 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.boundHandleTouchStart = this.handleTouchStart.bind(this);
+        this.boundHandleTouchMove = this.handleTouchMove.bind(this);
+        this.boundHandleTouchEnd = this.handleTouchEnd.bind(this);
+        this.boundHandleTouchCancel = this.handleTouchCancel.bind(this);
+    }
+    /**
+     * Attach all event listeners.
+     */
+    attach() {
+        const root = this.config.shadowRoot;
+        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);
+        root.addEventListener('touchstart', this.boundHandleTouchStart, {
+            passive: false,
+        });
+        root.addEventListener('touchmove', this.boundHandleTouchMove, {
+            passive: false,
+        });
+        root.addEventListener('touchend', this.boundHandleTouchEnd);
+        root.addEventListener('touchcancel', this.boundHandleTouchCancel);
+    }
+    /**
+     * Detach all event listeners.
+     */
+    detach() {
+        const root = this.config.shadowRoot;
+        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);
+        root.removeEventListener('touchstart', this.boundHandleTouchStart);
+        root.removeEventListener('touchmove', this.boundHandleTouchMove);
+        root.removeEventListener('touchend', this.boundHandleTouchEnd);
+        root.removeEventListener('touchcancel', this.boundHandleTouchCancel);
+        this.cancelTouchHold();
+        this.cleanupMousePanState();
+        this.exitPanMode();
+        this.removeScrollBlock();
+    }
+    /**
+     * Check if in touch drag mode.
+     */
+    isInTouchDragMode() {
+        return this.isTouchDragMode;
+    }
+    /**
+     * Analyze pointer target to determine what was clicked.
+     */
+    analyzeTarget(element) {
+        // Check for resize handle first
+        const resizeHandle = element.closest('.resize-handle');
+        if (resizeHandle) {
+            const eventEl = resizeHandle.closest('.scheduler-event');
+            const eventId = eventEl?.dataset['eventId'];
+            const event = eventId ? this.config.getEventById(eventId) : null;
+            if (event) {
+                return {
+                    type: 'resize-handle',
+                    event,
+                    resizeHandle: resizeHandle.dataset['handle'],
+                };
+            }
+        }
+        // Check for event
+        const eventEl = element.closest('.scheduler-event:not(.preview)');
+        if (eventEl) {
+            const eventId = eventEl.dataset['eventId'];
+            const event = eventId ? this.config.getEventById(eventId) : null;
+            if (event) {
+                return { type: 'event', event };
+            }
+        }
+        // Check for slot
+        const slotEl = element.closest('.scheduler-time-slot, .scheduler-timeline-slot');
+        if (slotEl) {
+            return { type: 'slot', slotElement: slotEl };
+        }
+        return { type: 'none' };
+    }
+    // Mouse event handlers
+    handleMouseDown(e) {
+        if (!this.config.isEditable())
+            return;
+        const pointer = normalizeMouseEvent(e);
+        const target = this.analyzeTarget(pointer.target);
+        // Only handle drag-initiating targets
+        if (target.type === 'none')
+            return;
+        // Check if selectable for slots
+        if (target.type === 'slot' && !this.config.isSelectable())
+            return;
+        e.preventDefault();
+        // For events/resize handles, set up mouse pan candidate (can pan if moved quickly)
+        if (target.type === 'event' || target.type === 'resize-handle') {
+            this.mouseStartPosition = { x: pointer.clientX, y: pointer.clientY };
+            this.isMousePanCandidate = true;
+            // Start timer - after this time, regular drag behavior takes over
+            this.mousePanTimer = setTimeout(() => {
+                // Timer expired without entering pan mode, so this is a drag operation
+                this.isMousePanCandidate = false;
+                this.mousePanTimer = null;
+            }, DEFAULT_MOUSE_PAN_TIMEOUT);
+        }
+        this.callbacks.onPointerDown(pointer, target);
+    }
+    handleMouseMove(e) {
+        const pointer = normalizeMouseEvent(e);
+        // If in pan mode, continue panning
+        if (this.isPanMode) {
+            e.preventDefault();
+            this.performPan(pointer.clientX, pointer.clientY);
+            return;
+        }
+        // Check if we should enter pan mode (mouse on event + moved > threshold within timeout)
+        if (this.isMousePanCandidate && this.mouseStartPosition) {
+            const threshold = this.config.touchMoveThreshold ?? DEFAULT_TOUCH_MOVE_THRESHOLD;
+            const distance = getPointerDistance(this.mouseStartPosition, {
+                x: pointer.clientX,
+                y: pointer.clientY,
+            });
+            if (distance > threshold) {
+                // Cancel the pan timer
+                if (this.mousePanTimer) {
+                    clearTimeout(this.mousePanTimer);
+                    this.mousePanTimer = null;
+                }
+                this.isMousePanCandidate = false;
+                // Enter pan mode
+                this.enterPanMode(pointer.clientX, pointer.clientY);
+                e.preventDefault();
+                return;
+            }
+        }
+        this.callbacks.onPointerMove(pointer);
+    }
+    handleMouseUp(e) {
+        const pointer = normalizeMouseEvent(e);
+        // If in pan mode, exit it
+        if (this.isPanMode) {
+            this.exitPanMode();
+            this.cleanupMousePanState();
+            return;
+        }
+        // Clean up mouse pan candidate state
+        this.cleanupMousePanState();
+        this.callbacks.onPointerUp(pointer);
+    }
+    cleanupMousePanState() {
+        if (this.mousePanTimer) {
+            clearTimeout(this.mousePanTimer);
+            this.mousePanTimer = null;
+        }
+        this.mouseStartPosition = null;
+        this.isMousePanCandidate = false;
+    }
+    handleClick(e) {
+        const pointer = normalizeMouseEvent(e);
+        const target = this.analyzeTarget(pointer.target);
+        // Skip event clicks - handled by drag manager
+        if (target.type === 'event' || target.type === 'resize-handle') {
+            return;
+        }
+        this.callbacks.onClick(pointer, target);
+    }
+    handleDblClick(e) {
+        const pointer = normalizeMouseEvent(e);
+        const target = this.analyzeTarget(pointer.target);
+        this.callbacks.onDoubleClick(pointer, target);
+    }
+    // Touch event handlers
+    handleTouchStart(e) {
+        if (!this.config.isEditable())
+            return;
+        // Only handle single touch
+        if (e.touches.length !== 1) {
+            this.cancelTouchHold();
+            return;
+        }
+        const pointer = normalizeTouchEvent(e);
+        if (!pointer)
+            return;
+        const target = this.analyzeTarget(pointer.target);
+        // Only handle drag-initiating targets
+        if (target.type === 'none')
+            return;
+        if (target.type === 'slot' && !this.config.isSelectable())
+            return;
+        this.touchStartPosition = { x: pointer.clientX, y: pointer.clientY };
+        this.touchHoldTarget = pointer.target;
+        this.touchHoldPointer = pointer;
+        // Track if touch started on an event (for pan support)
+        this.panStartedOnEvent = target.type === 'event' || target.type === 'resize-handle';
+        // Add element-level listeners IMMEDIATELY for ALL drag-initiating touches
+        // CRITICAL: Use e.target (the actual touched element) not pointer.target
+        // In shadow DOM, touch.target and e.target can differ due to event retargeting.
+        // Only the listener on e.target will continue to receive events after DOM replacement
+        // (e.g., when Lit re-renders and replaces the element due to visual feedback classes).
+        const self = this;
+        const touchedElement = e.target;
+        // Add listener directly to the touched element - this is the ONLY listener
+        // that will work after the element is replaced during re-render
+        touchedElement.addEventListener('touchmove', function (evt) {
+            self.handleTouchMove(evt);
+        }, { passive: false });
+        touchedElement.addEventListener('touchend', function (evt) {
+            self.handleTouchEnd(evt);
+        });
+        touchedElement.addEventListener('touchcancel', function (evt) {
+            self.handleTouchCancel(evt);
+        });
+        // Add visual feedback
+        this.addTouchFeedback(pointer.target, 'pending');
+        // Start hold timer
+        const holdDuration = this.config.touchHoldDuration ?? DEFAULT_TOUCH_HOLD_DURATION;
+        this.touchHoldTimer = setTimeout(() => {
+            this.activateTouchDragMode(pointer, target);
+        }, holdDuration);
+    }
+    handleTouchMove(e) {
+        if (e.touches.length !== 1) {
+            this.cancelTouchHold();
+            this.exitPanMode();
+            return;
+        }
+        const pointer = normalizeTouchEvent(e);
+        if (!pointer)
+            return;
+        // If in pan mode, continue panning
+        if (this.isPanMode) {
+            e.preventDefault();
+            this.performPan(pointer.clientX, pointer.clientY);
+            return;
+        }
+        // If we have a pending touch hold, check if user moved too much
+        if (this.touchHoldTimer && this.touchStartPosition) {
+            const threshold = this.config.touchMoveThreshold ?? DEFAULT_TOUCH_MOVE_THRESHOLD;
+            const distance = getPointerDistance(this.touchStartPosition, {
+                x: pointer.clientX,
+                y: pointer.clientY,
+            });
+            if (distance > threshold) {
+                // User moved too much during hold period
+                this.cancelTouchHold();
+                // If touch started on an event, enter pan mode instead of allowing native scroll
+                if (this.panStartedOnEvent) {
+                    this.enterPanMode(pointer.clientX, pointer.clientY);
+                    e.preventDefault();
+                }
+                // Otherwise, allow native scroll (no preventDefault)
+                return;
+            }
+            // Still waiting for hold - prevent scroll while waiting
+            // This is critical: we must prevent the browser from starting scroll
+            // intervention during the hold period, otherwise it will take over
+            // and subsequent touchmove events become non-cancelable
+            e.preventDefault();
+            return;
+        }
+        // If in touch drag mode, handle the drag
+        if (this.isTouchDragMode) {
+            e.preventDefault();
+            this.callbacks.onPointerMove(pointer);
+        }
+    }
+    handleTouchEnd(e) {
+        const pointer = normalizeTouchEvent(e);
+        // If in pan mode, exit it
+        if (this.isPanMode) {
+            this.exitPanMode();
+            return;
+        }
+        // If we had a pending hold that never activated, treat as tap
+        if (this.touchHoldTimer) {
+            this.cancelTouchHold();
+            if (pointer && this.touchHoldTarget) {
+                const target = this.analyzeTarget(this.touchHoldTarget);
+                this.callbacks.onClick(pointer, target);
+            }
+            this.touchHoldTarget = null;
+            this.touchHoldPointer = null;
+            return;
+        }
+        // If in touch drag mode, finalize
+        if (this.isTouchDragMode && pointer) {
+            this.callbacks.onPointerUp(pointer);
+            this.exitTouchDragMode();
+        }
+    }
+    handleTouchCancel(_e) {
+        this.cancelTouchHold();
+        this.exitPanMode();
+        if (this.isTouchDragMode) {
+            // Notify pointer up to cancel the drag
+            if (this.touchStartPosition) {
+                this.callbacks.onPointerUp({
+                    pointerId: 0,
+                    pointerType: 'touch',
+                    clientX: this.touchStartPosition.x,
+                    clientY: this.touchStartPosition.y,
+                    originalEvent: _e,
+                    target: this.touchHoldTarget ?? document.body,
+                    isPrimary: true,
+                });
+            }
+            this.exitTouchDragMode();
+        }
+    }
+    // Touch helpers
+    activateTouchDragMode(pointer, target) {
+        this.touchHoldTimer = null;
+        this.touchStartPosition = null; // Clear so touchmove doesn't think we're still pending
+        // Trigger haptic feedback
+        this.triggerHapticFeedback();
+        // Enter touch drag mode
+        this.isTouchDragMode = true;
+        // Document listeners were already added in handleTouchStart for event touches
+        // For slot touches, add them now
+        if (!this.touchHoldTarget?.closest('.scheduler-event')) {
+            document.addEventListener('touchmove', this.boundHandleTouchMove, { passive: false });
+            document.addEventListener('touchend', this.boundHandleTouchEnd);
+            document.addEventListener('touchcancel', this.boundHandleTouchCancel);
+        }
+        // Update visual feedback
+        if (this.touchHoldTarget) {
+            this.removeTouchFeedback(this.touchHoldTarget, 'pending');
+            this.addTouchFeedback(this.touchHoldTarget, 'active');
+        }
+        // Add container class
+        const container = this.config.shadowRoot.querySelector('.scheduler-container');
+        container?.classList.add('touch-drag-mode');
+        // Apply scroll blocking to document body and scheduler-content
+        this.applyScrollBlock();
+        // Notify callback
+        this.callbacks.onTouchDragActivated?.();
+        // Start the drag immediately (skip pending threshold for touch)
+        this.callbacks.onPointerDown(pointer, target, true);
+    }
+    cancelTouchHold() {
+        if (this.touchHoldTimer) {
+            clearTimeout(this.touchHoldTimer);
+            this.touchHoldTimer = null;
+        }
+        // Remove document listeners that were added in handleTouchStart
+        document.removeEventListener('touchmove', this.boundHandleTouchMove);
+        document.removeEventListener('touchend', this.boundHandleTouchEnd);
+        document.removeEventListener('touchcancel', this.boundHandleTouchCancel);
+        // Remove pending visual feedback
+        if (this.touchHoldTarget) {
+            this.removeTouchFeedback(this.touchHoldTarget, 'pending');
+            this.removeTouchFeedback(this.touchHoldTarget, 'active');
+        }
+        // Note: Don't reset touchStartPosition here as it may be needed for pan mode
+        // Also don't reset panStartedOnEvent - it's needed after cancelTouchHold
+    }
+    exitTouchDragMode() {
+        this.isTouchDragMode = false;
+        this.touchStartPosition = null;
+        this.touchHoldTarget = null;
+        this.touchHoldPointer = null;
+        // Remove document-level listeners added during drag mode
+        document.removeEventListener('touchmove', this.boundHandleTouchMove);
+        document.removeEventListener('touchend', this.boundHandleTouchEnd);
+        document.removeEventListener('touchcancel', this.boundHandleTouchCancel);
+        // Remove container class
+        const container = this.config.shadowRoot.querySelector('.scheduler-container');
+        container?.classList.remove('touch-drag-mode');
+        // Remove scroll blocking
+        this.removeScrollBlock();
+        // Remove all feedback classes
+        this.config.shadowRoot
+            .querySelectorAll('.touch-hold-active, .touch-hold-pending')
+            .forEach((el) => {
+            el.classList.remove('touch-hold-active', 'touch-hold-pending');
+        });
+        // Notify callback
+        this.callbacks.onTouchDragDeactivated?.();
+    }
+    addTouchFeedback(element, type) {
+        const targetEl = element.closest('.scheduler-event, .scheduler-time-slot, .scheduler-timeline-slot');
+        targetEl?.classList.add(`touch-hold-${type}`);
+    }
+    removeTouchFeedback(element, type) {
+        const targetEl = element.closest('.scheduler-event, .scheduler-time-slot, .scheduler-timeline-slot');
+        targetEl?.classList.remove(`touch-hold-${type}`);
+    }
+    triggerHapticFeedback() {
+        // Vibration API removed - can cause issues on some devices
+    }
+    // Pan helpers
+    enterPanMode(clientX, clientY) {
+        const container = this.callbacks.getScrollContainer?.();
+        if (!container)
+            return;
+        this.isPanMode = true;
+        this.panStartPosition = { x: clientX, y: clientY };
+        this.panStartScroll = { left: container.scrollLeft, top: container.scrollTop };
+        // Add visual feedback for pan mode
+        container.classList.add('pan-mode');
+        // Remove hold feedback if any
+        if (this.touchHoldTarget) {
+            this.removeTouchFeedback(this.touchHoldTarget, 'pending');
+            this.removeTouchFeedback(this.touchHoldTarget, 'active');
+        }
+    }
+    exitPanMode() {
+        if (!this.isPanMode)
+            return;
+        this.isPanMode = false;
+        this.panStartPosition = null;
+        this.panStartScroll = null;
+        this.panStartedOnEvent = false;
+        this.touchStartPosition = null;
+        this.touchHoldTarget = null;
+        // Remove visual feedback
+        const container = this.callbacks.getScrollContainer?.();
+        container?.classList.remove('pan-mode');
+    }
+    performPan(clientX, clientY) {
+        if (!this.isPanMode || !this.panStartPosition || !this.panStartScroll)
+            return;
+        const container = this.callbacks.getScrollContainer?.();
+        if (!container)
+            return;
+        // Calculate delta from start position
+        const deltaX = this.panStartPosition.x - clientX;
+        const deltaY = this.panStartPosition.y - clientY;
+        // Apply scroll
+        container.scrollLeft = this.panStartScroll.left + deltaX;
+        container.scrollTop = this.panStartScroll.top + deltaY;
+    }
+    // Scroll blocking helpers
+    applyScrollBlock() {
+        // Save current body styles for restoration
+        this.savedBodyStyles = {
+            overflow: document.body.style.overflow,
+            touchAction: document.body.style.touchAction,
+        };
+        // Block scrolling on document body
+        document.body.style.overflow = 'hidden';
+        document.body.style.touchAction = 'none';
+        // Block scrolling on scheduler-content
+        const scrollContainer = this.callbacks.getScrollContainer?.();
+        if (scrollContainer) {
+            scrollContainer.classList.add('scroll-blocked');
+        }
+    }
+    removeScrollBlock() {
+        // Restore body styles
+        if (this.savedBodyStyles) {
+            document.body.style.overflow = this.savedBodyStyles.overflow;
+            document.body.style.touchAction = this.savedBodyStyles.touchAction;
+            this.savedBodyStyles = null;
+        }
+        // Remove scroll blocking from scheduler-content
+        const scrollContainer = this.callbacks.getScrollContainer?.();
+        if (scrollContainer) {
+            scrollContainer.classList.remove('scroll-blocked');
+        }
+    }
+}
+
+/**
+ * Handles dispatching custom events from the scheduler.
+ * Centralizes event emission logic for consistency.
+ */
+class SchedulerEventEmitter {
+    constructor(host) {
+        this.host = host;
+    }
+    /**
+     * Emit a scheduler custom event.
+     * The event will bubble up through the DOM.
+     */
+    emit(event) {
+        const { type, ...detail } = event;
+        this.host.dispatchEvent(new CustomEvent(type, {
+            detail,
+            bubbles: true,
+        }));
+    }
+    /**
+     * Emit an event-click event.
+     */
+    emitEventClick(event, originalEvent) {
+        this.emit({ type: 'event-click', event, originalEvent });
+    }
+    /**
+     * Emit an event-dblclick event.
+     */
+    emitEventDblClick(event, originalEvent) {
+        this.emit({ type: 'event-dblclick', event, originalEvent });
+    }
+    /**
+     * Emit an event-create event.
+     */
+    emitEventCreate(event, originalEvent) {
+        this.emit({ type: 'event-create', event, originalEvent });
+    }
+    /**
+     * Emit an event-update event.
+     */
+    emitEventUpdate(event, oldEvent, originalEvent) {
+        this.emit({ type: 'event-update', event, oldEvent, originalEvent });
+    }
+    /**
+     * Emit an event-delete event.
+     */
+    emitEventDelete(event) {
+        this.emit({ type: 'event-delete', event });
+    }
+    /**
+     * Emit a date-click event.
+     */
+    emitDateClick(date, originalEvent) {
+        this.emit({ type: 'date-click', date, originalEvent });
+    }
+    /**
+     * Emit a view-change event.
+     */
+    emitViewChange(view, date) {
+        this.emit({ type: 'view-change', view, date });
+    }
+    /**
+     * Emit a selection-change event.
+     */
+    emitSelectionChange(selectedEvent) {
+        this.emit({ type: 'selection-change', selectedEvent });
+    }
+}
+
+/**
+ * MpScheduler Web 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
+ */
+class MpScheduler extends LitElement {
+    static { this.styles = [schedulerStyles]; }
+    static get observedAttributes() {
+        return [
+            ...(super.observedAttributes ?? []),
+            'view',
+            'date',
+            'locale',
+            'first-day-of-week',
+            'slot-duration',
+            'time-format',
+            'editable',
+            'selectable',
+        ];
+    }
+    constructor() {
+        super();
+        this.currentView = null;
+        this.currentViewType = null;
+        this.contentContainer = null;
+        this.inputHandler = null;
+        // Track previous state for change detection
+        this.previousView = null;
+        this.previousDate = null;
+        this.previousSelectedEventId = null;
+        // RAF scheduling for drag updates
+        this.pendingDragUpdate = null;
+        this.latestDragState = null;
+        // Now indicator update timer
+        this.nowIndicatorTimer = null;
+        this.stateManager = new SchedulerStateManager();
+        this.eventEmitter = new SchedulerEventEmitter(this);
+        // Initialize drag manager (input handler is deferred to firstUpdated()
+        // because it needs the shadow root, which Lit creates after construction).
+        this.dragManager = new DragManager(this.stateManager);
+        this.dragManager.setSlotResolver((x, y) => this.getSlotAtPosition(x, y));
+        // Bind keyboard handler
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        // Subscribe to state changes
+        this.stateManager.subscribe((state) => this.onStateChange(state));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.inputHandler) {
+            this.inputHandler.attach();
+        }
+        this.addEventListener('keydown', this.boundHandleKeyDown);
+        // Start now indicator update timer (every minute)
+        this.startNowIndicatorTimer();
+    }
+    disconnectedCallback() {
+        this.inputHandler?.detach();
+        this.removeEventListener('keydown', this.boundHandleKeyDown);
+        this.currentView?.destroy();
+        this.dragManager.destroy();
+        // Stop now indicator timer
+        this.stopNowIndicatorTimer();
+        // Cancel any pending RAF
+        if (this.pendingDragUpdate !== null) {
+            cancelAnimationFrame(this.pendingDragUpdate);
+            this.pendingDragUpdate = null;
+        }
+        this.latestDragState = null;
+        super.disconnectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'view':
+                if (newValue && ['year', 'month', 'week', 'day', 'timeline'].includes(newValue)) {
+                    this.stateManager.setView(newValue);
+                }
+                break;
+            case 'date':
+                if (newValue) {
+                    this.stateManager.setDate(new Date(newValue));
+                }
+                break;
+            case 'locale':
+                if (newValue) {
+                    this.stateManager.setOptions({ locale: newValue });
+                }
+                break;
+            case 'first-day-of-week':
+                if (newValue) {
+                    const day = parseInt(newValue, 10);
+                    if (day >= 0 && day <= 6) {
+                        this.stateManager.setOptions({
+                            firstDayOfWeek: day,
+                        });
+                    }
+                }
+                break;
+            case 'slot-duration':
+                if (newValue) {
+                    this.stateManager.setOptions({ slotDuration: parseInt(newValue, 10) });
+                }
+                break;
+            case 'time-format':
+                if (newValue && (newValue === '12h' || newValue === '24h')) {
+                    this.stateManager.setOptions({ timeFormat: newValue });
+                }
+                break;
+            case 'editable':
+                this.stateManager.setOptions({ editable: newValue !== 'false' });
+                break;
+            case 'selectable':
+                this.stateManager.setOptions({ selectable: newValue !== 'false' });
+                break;
+        }
+    }
+    // ============================================
+    // Public API
+    // ============================================
+    get view() {
+        return this.stateManager.getState().view;
+    }
+    set view(value) {
+        this.stateManager.setView(value);
+    }
+    get date() {
+        return this.stateManager.getState().date;
+    }
+    set date(value) {
+        this.stateManager.setDate(value);
+    }
+    get events() {
+        return this.stateManager.getState().events;
+    }
+    set events(value) {
+        this.stateManager.setEvents(value);
+    }
+    get resources() {
+        return this.stateManager.getState().resources;
+    }
+    set resources(value) {
+        this.stateManager.setResources(value);
+    }
+    get options() {
+        return this.stateManager.getState().options;
+    }
+    set options(value) {
+        this.stateManager.setOptions(value);
+    }
+    get selectedEvent() {
+        return this.stateManager.getState().selectedEvent;
+    }
+    set selectedEvent(value) {
+        this.stateManager.setSelectedEvent(value);
+    }
+    get selectedRange() {
+        const state = this.stateManager.getState();
+        if (state.previewEvent) {
+            return { start: state.previewEvent.start, end: state.previewEvent.end };
+        }
+        return null;
+    }
+    next() {
+        this.stateManager.next();
+    }
+    prev() {
+        this.stateManager.prev();
+    }
+    today() {
+        this.stateManager.today();
+    }
+    gotoDate(date) {
+        this.stateManager.gotoDate(date);
+    }
+    changeView(view) {
+        this.stateManager.setView(view);
+    }
+    addEvent(event) {
+        this.stateManager.addEvent(event);
+    }
+    updateEvent(event) {
+        this.stateManager.updateEvent(event);
+    }
+    removeEvent(eventId) {
+        this.stateManager.removeEvent(eventId);
+    }
+    getEventById(eventId) {
+        return this.events.find((e) => e.id === eventId) ?? null;
+    }
+    refetchEvents() {
+        this.currentView?.update(this.stateManager.getState());
+    }
+    // ============================================
+    // Rendering
+    // ============================================
+    render() {
+        return html `
+      <div class="scheduler-container">
+        <header class="scheduler-header"></header>
+        <div class="scheduler-content"></div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        const headerEl = this.shadowRoot.querySelector('.scheduler-header');
+        this.contentContainer = this.shadowRoot.querySelector('.scheduler-content');
+        this.populateHeader(headerEl);
+        // Construct InputHandler now that shadowRoot is available, then attach.
+        this.inputHandler = new InputHandler({
+            shadowRoot: this.shadowRoot,
+            getEventById: (id) => this.getEventById(id),
+            isEditable: () => this.stateManager.getState().options.editable ?? true,
+            isSelectable: () => this.stateManager.getState().options.selectable ?? 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),
+            getScrollContainer: () => this.contentContainer,
+        });
+        this.inputHandler.attach();
+        this.renderView();
+    }
+    populateHeader(header) {
+        // Navigation
+        const nav = document.createElement('nav');
+        nav.className = 'scheduler-nav';
+        const prevBtn = document.createElement('button');
+        prevBtn.textContent = '‹';
+        prevBtn.title = 'Previous';
+        prevBtn.addEventListener('click', () => this.prev());
+        const nextBtn = document.createElement('button');
+        nextBtn.textContent = '›';
+        nextBtn.title = 'Next';
+        nextBtn.addEventListener('click', () => this.next());
+        const todayBtn = document.createElement('button');
+        todayBtn.textContent = 'Today';
+        todayBtn.addEventListener('click', () => this.today());
+        nav.appendChild(prevBtn);
+        nav.appendChild(nextBtn);
+        nav.appendChild(todayBtn);
+        // Title
+        const title = document.createElement('div');
+        title.className = 'scheduler-title';
+        this.updateTitle(title);
+        // View switcher
+        const viewSwitcher = document.createElement('div');
+        viewSwitcher.className = 'scheduler-view-switcher';
+        const views = [
+            { key: 'year', label: 'Year' },
+            { key: 'month', label: 'Month' },
+            { key: 'week', label: 'Week' },
+            { key: 'day', label: 'Day' },
+            { key: 'timeline', label: 'Timeline' },
+        ];
+        for (const { key, label } of views) {
+            const btn = document.createElement('button');
+            btn.textContent = label;
+            btn.dataset['view'] = key;
+            if (key === this.view) {
+                btn.classList.add('active');
+            }
+            btn.addEventListener('click', () => this.changeView(key));
+            viewSwitcher.appendChild(btn);
+        }
+        header.appendChild(nav);
+        header.appendChild(title);
+        header.appendChild(viewSwitcher);
+    }
+    updateTitle(titleEl) {
+        const title = titleEl ?? this.shadowRoot.querySelector('.scheduler-title');
+        if (!title)
+            return;
+        const state = this.stateManager.getState();
+        const { date, view, options } = state;
+        let titleText = '';
+        switch (view) {
+            case 'year':
+                titleText = date.getFullYear().toString();
+                break;
+            case 'month':
+                titleText = dateService.formatDate(date, options.locale, {
+                    month: 'long',
+                    year: 'numeric',
+                });
+                break;
+            case 'week':
+            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',
+                })}`;
+                break;
+            }
+            case 'day':
+                titleText = dateService.formatDate(date, options.locale, {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                });
+                break;
+        }
+        title.textContent = titleText;
+    }
+    renderView() {
+        if (!this.contentContainer)
+            return;
+        this.currentView?.destroy();
+        const state = this.stateManager.getState();
+        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;
+        }
+        this.currentView?.render();
+    }
+    // ============================================
+    // State Change Handling
+    // ============================================
+    onStateChange(state) {
+        this.detectAndEmitChanges(state);
+        this.updateUI(state);
+    }
+    detectAndEmitChanges(state) {
+        const viewChanged = this.previousView !== null && this.previousView !== state.view;
+        const dateChanged = this.previousDate !== null &&
+            this.previousDate.getTime() !== state.date.getTime();
+        const selectedEventId = state.selectedEvent?.id ?? null;
+        const selectionChanged = this.previousSelectedEventId !== null &&
+            this.previousSelectedEventId !== selectedEventId;
+        if (viewChanged || dateChanged) {
+            this.eventEmitter.emitViewChange(state.view, state.date);
+        }
+        if (selectionChanged) {
+            this.eventEmitter.emitSelectionChange(state.selectedEvent);
+        }
+        this.previousView = state.view;
+        this.previousDate = new Date(state.date);
+        this.previousSelectedEventId = selectedEventId;
+    }
+    updateUI(state) {
+        this.updateTitle();
+        // Update view switcher active state
+        const buttons = this.shadowRoot.querySelectorAll('.scheduler-view-switcher button');
+        buttons.forEach((btn) => {
+            const btnEl = btn;
+            btnEl.classList.toggle('active', btnEl.dataset['view'] === state.view);
+        });
+        // Update or re-render view
+        if (this.currentView) {
+            if (this.currentViewType !== state.view) {
+                this.renderView();
+            }
+            else if (state.dragState || state.previewEvent) {
+                this.scheduleDragUpdate(state);
+            }
+            else {
+                this.currentView.update(state);
+            }
+        }
+    }
+    scheduleDragUpdate(state) {
+        this.latestDragState = state;
+        if (this.pendingDragUpdate !== null) {
+            return;
+        }
+        this.pendingDragUpdate = requestAnimationFrame(() => {
+            this.pendingDragUpdate = null;
+            const stateToApply = this.latestDragState;
+            this.latestDragState = null;
+            if (stateToApply && this.currentView) {
+                this.currentView.update(stateToApply);
+            }
+        });
+    }
+    // ============================================
+    // Input Handling (Callbacks from InputHandler)
+    // ============================================
+    handlePointerDown(pointer, target, immediate) {
+        this.dragManager.handlePointerDown(pointer, target, immediate);
+    }
+    handlePointerMove(pointer) {
+        this.dragManager.handlePointerMove(pointer);
+    }
+    handlePointerUp(pointer) {
+        const result = this.dragManager.handlePointerUp(pointer);
+        if (result) {
+            this.handleDragComplete(result, pointer.originalEvent);
+        }
+    }
+    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;
+        }
+        // Handle actual drag completion
+        switch (result.type) {
+            case 'create': {
+                const newEvent = {
+                    id: generateEventId(),
+                    title: 'New Event',
+                    start: result.preview.start,
+                    end: result.preview.end,
+                    color: '#3788d8',
+                };
+                this.stateManager.addEvent(newEvent);
+                this.eventEmitter.emitEventCreate(newEvent, originalEvent);
+                break;
+            }
+            case 'move':
+            case 'resize-start':
+            case 'resize-end': {
+                if (result.event && result.originalEvent) {
+                    const updatedEvent = {
+                        ...result.event,
+                        start: result.preview.start,
+                        end: result.preview.end,
+                    };
+                    this.stateManager.updateEvent(updatedEvent);
+                    this.eventEmitter.emitEventUpdate(updatedEvent, result.originalEvent, originalEvent);
+                }
+                break;
+            }
+        }
+    }
+    handleClick(pointer, target) {
+        const targetEl = pointer.target;
+        // Group toggle
+        const toggle = targetEl.closest('.expand-toggle');
+        if (toggle) {
+            const groupId = toggle.dataset['groupId'];
+            if (groupId) {
+                this.stateManager.toggleGroupCollapse(groupId);
+                this.renderView();
+                return;
+            }
+        }
+        // Date click
+        const dayEl = targetEl.closest('[data-date]');
+        if (dayEl) {
+            const dateStr = dayEl.dataset['date'];
+            if (dateStr) {
+                this.eventEmitter.emitDateClick(new Date(dateStr), pointer.originalEvent);
+            }
+        }
+        // Month click in year view
+        const monthHeader = targetEl.closest('.scheduler-year-month-header');
+        if (monthHeader) {
+            const monthStr = monthHeader.dataset['month'];
+            if (monthStr) {
+                this.stateManager.setDate(new Date(monthStr));
+                this.stateManager.setView('month');
+            }
+        }
+        // More link click
+        const moreLink = targetEl.closest('.scheduler-more-link');
+        if (moreLink) {
+            const dateStr = moreLink.dataset['date'];
+            if (dateStr) {
+                this.stateManager.setDate(new Date(dateStr));
+                this.stateManager.setView('day');
+            }
+        }
+    }
+    handleDoubleClick(pointer, target) {
+        if (target.type === 'event' && target.event) {
+            this.eventEmitter.emitEventDblClick(target.event, pointer.originalEvent);
+        }
+    }
+    handleKeyDown(e) {
+        const state = this.stateManager.getState();
+        switch (e.key) {
+            case 'ArrowLeft':
+                this.prev();
+                e.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.next();
+                e.preventDefault();
+                break;
+            case 't':
+            case 'T':
+                this.today();
+                e.preventDefault();
+                break;
+            case 'y':
+            case 'Y':
+                this.changeView('year');
+                e.preventDefault();
+                break;
+            case 'm':
+            case 'M':
+                this.changeView('month');
+                e.preventDefault();
+                break;
+            case 'w':
+            case 'W':
+                this.changeView('week');
+                e.preventDefault();
+                break;
+            case 'd':
+            case 'D':
+                this.changeView('day');
+                e.preventDefault();
+                break;
+            case 'Delete':
+            case 'Backspace':
+                if (state.selectedEvent) {
+                    this.eventEmitter.emitEventDelete(state.selectedEvent);
+                }
+                break;
+            case 'Escape':
+                if (this.dragManager.isDragging()) {
+                    this.dragManager.cancel();
+                }
+                break;
+        }
+    }
+    // ============================================
+    // Now Indicator Timer
+    // ============================================
+    startNowIndicatorTimer() {
+        // Update every minute (60000ms)
+        this.nowIndicatorTimer = setInterval(() => {
+            this.currentView?.updateNowIndicator();
+        }, 60000);
+    }
+    stopNowIndicatorTimer() {
+        if (this.nowIndicatorTimer !== null) {
+            clearInterval(this.nowIndicatorTimer);
+            this.nowIndicatorTimer = null;
+        }
+    }
+    // ============================================
+    // Slot Resolution
+    // ============================================
+    getSlotAtPosition(clientX, clientY) {
+        const elements = this.shadowRoot.elementsFromPoint(clientX, clientY);
+        const slotEl = elements.find((el) => el.matches('.scheduler-time-slot, .scheduler-timeline-slot'));
+        return slotEl ? this.getSlotFromElement(slotEl) : null;
+    }
+    getSlotFromElement(el) {
+        const startStr = el.dataset['start'];
+        const endStr = el.dataset['end'];
+        if (!startStr || !endStr)
+            return null;
+        return {
+            start: new Date(startStr),
+            end: new Date(endStr),
+        };
+    }
+}
+// Register the custom element
+if (typeof customElements !== 'undefined' && !customElements.get('mp-scheduler')) {
+    customElements.define('mp-scheduler', MpScheduler);
+}
+
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseView, DayView, MonthView, MpScheduler, SchedulerStateManager, TimelineView, WeekView, YearView, createInitialState, schedulerStyles };
+//# sourceMappingURL=mintplayer-ng-bootstrap-web-components-scheduler.mjs.map