nuxt-ui-elements-pro 0.1.5 → 0.1.7

package/dist/runtime/components/EventCalendar.vue

@@ -1,650 +1,273 @@
 <script>
-import theme from "#build/ui-elements-pro/event-calendar";
-import { toCalendarDate } from "@internationalized/date";
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { Primitive } from "reka-ui";
+import { computed, provide, ref, useSlots, watch } from "vue";
+import { asCalendarDate } from "#std/date";
 import { tv } from "../utils/tv";
-import { hasTimeComponent, layoutTimedEvents } from "../utils/event-calendar";
+import { useEventCalendar } from "../composables/useEventCalendar";
 import { useEventCalendarDragDrop } from "../composables/useEventCalendarDragDrop";
-import {
-  today,
-  startOf,
-  add,
-  subtract,
-  format,
-  isSameMonth,
-  isToday as checkIsToday,
-  isWeekend as checkIsWeekend,
-  asCalendarDate,
-  asCalendarDateTime,
-  getLocalTimeZone,
-  getWeekStartLocale
-} from "#std/date";
+import { useEventCalendarKeyboard } from "../composables/useEventCalendarKeyboard";
+import { useEventCalendarResize } from "../composables/useEventCalendarResize";
+import { useEventCalendarSelect } from "../composables/useEventCalendarSelect";
+import { eventCalendarContextKey } from "../composables/useEventCalendarContext";
+import EventCalendarHeader from "./event-calendar/EventCalendarHeader.vue";
+import EventCalendarMonthView from "./event-calendar/EventCalendarMonthView.vue";
+import EventCalendarTimeGrid from "./event-calendar/EventCalendarTimeGrid.vue";
+import EventCalendarListView from "./event-calendar/EventCalendarListView.vue";
+import theme from "#build/ui-elements-pro/event-calendar";
 </script>
 
 <script setup>
-const {
-  events = [],
-  view = "month",
-  locale = "en-US",
-  weekStartsOn = 0,
-  editable = true,
-  color = "primary",
-  monthOptions: monthOpts,
-  weekOptions: weekOpts,
-  dayOptions: dayOpts,
-  ui: propUi,
-  ...props
-} = defineProps({
+const props = defineProps({
+  as: { type: null, required: false },
   events: { type: Array, required: false },
   modelValue: { type: null, required: false },
   view: { type: String, required: false },
+  views: { type: Array, required: false },
   locale: { type: String, required: false },
   weekStartsOn: { type: Number, required: false },
-  editable: { type: Boolean, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false },
+  selectable: { type: Boolean, required: false, default: true },
   color: { type: null, required: false },
+  headerTitle: { type: [String, Function], required: false },
   monthOptions: { type: Object, required: false },
   weekOptions: { type: Object, required: false },
   dayOptions: { type: Object, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "update:view", "dateClick", "eventClick", "eventDrop"]);
+const emit = defineEmits(["update:modelValue", "update:view", "dateClick", "eventClick", "eventDrop", "eventResize", "eventResizeStart", "eventResizeEnd", "select"]);
 defineSlots();
-const monthConfig = computed(() => ({
-  maxEvents: monthOpts?.maxEvents ?? 3,
-  fixedWeeks: monthOpts?.fixedWeeks ?? true
-}));
-const weekConfig = computed(() => ({
-  startHour: weekOpts?.startHour ?? 7,
-  endHour: weekOpts?.endHour ?? 22,
-  slotDuration: weekOpts?.slotDuration ?? 30
-}));
-const dayConfig = computed(() => ({
-  startHour: dayOpts?.startHour ?? 7,
-  endHour: dayOpts?.endHour ?? 22,
-  slotDuration: dayOpts?.slotDuration ?? 30
-}));
+const slots = useSlots();
+const ALL_VIEWS = ["month", "week", "day", "list"];
+const internalView = ref(props.view ?? "month");
+watch(() => props.view, (v) => {
+  if (v !== void 0) internalView.value = v;
+});
+function updateView(v) {
+  internalView.value = v;
+  emit("update:view", v);
+}
 const ui = computed(
   () => tv({
     extend: tv(theme)
   })({
-    color
+    color: props.color ?? "primary"
   })
 );
-const displayDate = computed(() => {
-  if (props.modelValue) {
-    return asCalendarDate(props.modelValue);
-  }
-  return today();
-});
-const weekLocale = computed(() => getWeekStartLocale(weekStartsOn));
-function goToPrev() {
-  let target;
-  if (view === "month") {
-    target = startOf(subtract(displayDate.value, 1, "month"), "month");
-  } else if (view === "week") {
-    target = asCalendarDate(subtract(displayDate.value, 1, "week"));
-  } else {
-    target = asCalendarDate(subtract(displayDate.value, 1, "day"));
-  }
-  emit("update:modelValue", target);
-}
-function goToNext() {
-  let target;
-  if (view === "month") {
-    target = startOf(add(displayDate.value, 1, "month"), "month");
-  } else if (view === "week") {
-    target = asCalendarDate(add(displayDate.value, 1, "week"));
-  } else {
-    target = asCalendarDate(add(displayDate.value, 1, "day"));
-  }
-  emit("update:modelValue", target);
-}
-function goToToday() {
-  emit("update:modelValue", today());
-}
-function setView(v) {
-  emit("update:view", v);
-}
-const headerTitle = computed(() => {
-  if (view === "month") {
-    return format(displayDate.value, "MMMM YYYY", locale);
-  }
-  if (view === "week") {
-    const weekStart = startOf(displayDate.value, "week", weekLocale.value);
-    const weekEnd = asCalendarDate(add(weekStart, 6, "day"));
-    if (weekStart.month === weekEnd.month) {
-      return `${format(weekStart, "MMM D", locale)} \u2013 ${format(weekEnd, "D, YYYY", locale)}`;
-    }
-    return `${format(weekStart, "MMM D", locale)} \u2013 ${format(weekEnd, "MMM D, YYYY", locale)}`;
-  }
-  return format(displayDate.value, "dddd, MMMM D, YYYY", locale);
+const calendar = useEventCalendar({
+  events: () => props.events ?? [],
+  modelValue: () => props.modelValue,
+  view: () => internalView.value,
+  locale: () => props.locale ?? "en-US",
+  weekStartsOn: () => props.weekStartsOn ?? 0,
+  monthOptions: () => props.monthOptions,
+  weekOptions: () => props.weekOptions,
+  dayOptions: () => props.dayOptions,
+  onUpdateModelValue: (date) => emit("update:modelValue", date),
+  onUpdateView: updateView
 });
-function parseDateInput(input) {
-  if (typeof input === "object" && "calendar" in input) {
-    return input;
-  }
-  if (input instanceof Date) {
-    const iso = input.toISOString();
-    if (iso.endsWith("T00:00:00.000Z")) {
-      return asCalendarDate(input);
-    }
-    return asCalendarDateTime(input);
-  }
-  if (typeof input === "string") {
-    if (input.includes("T") || input.includes(" ")) {
-      try {
-        return asCalendarDateTime(input);
-      } catch {
-        return asCalendarDate(input);
-      }
-    }
-    return asCalendarDate(input);
-  }
-  return today();
-}
-const normalizedEvents = computed(() => {
-  return events.map((event) => {
-    const start = parseDateInput(event.start);
-    const end = event.end ? parseDateInput(event.end) : start;
-    const allDay = event.allDay ?? !hasTimeComponent(start);
-    return {
-      id: event.id,
-      title: event.title,
-      start,
-      end,
-      color: event.color ?? "primary",
-      allDay,
-      draggable: event.draggable ?? true,
-      original: event
-    };
-  });
-});
-const eventsByDate = computed(() => {
-  const map = /* @__PURE__ */ new Map();
-  for (const event of normalizedEvents.value) {
-    const startDate = toCalendarDate(event.start);
-    const endDate = toCalendarDate(event.end);
-    let current = startDate;
-    while (current.compare(endDate) <= 0) {
-      const key = current.toString();
-      const existing = map.get(key) ?? [];
-      existing.push(event);
-      map.set(key, existing);
-      current = asCalendarDate(add(current, 1, "day"));
-    }
-  }
-  return map;
-});
-function getEventsForDate(date) {
-  return eventsByDate.value.get(date.toString()) ?? [];
-}
-const weekdayLabels = computed(() => {
-  const labels = [];
-  const refSunday = asCalendarDate("2025-01-05");
-  for (let i = 0; i < 7; i++) {
-    const day = asCalendarDate(add(refSunday, i + weekStartsOn, "day"));
-    labels.push(format(day, "ddd", locale));
-  }
-  return labels;
-});
-const monthWeeks = computed(() => {
-  const monthStart = startOf(displayDate.value, "month");
-  const gridStart = startOf(monthStart, "week", weekLocale.value);
-  const rowCount = monthConfig.value.fixedWeeks ? 6 : 5;
-  const result = [];
-  let current = gridStart;
-  for (let week = 0; week < rowCount; week++) {
-    const days = [];
-    for (let day = 0; day < 7; day++) {
-      const date = asCalendarDate(current);
-      days.push({
-        date,
-        isCurrentMonth: isSameMonth(date, monthStart),
-        isToday: checkIsToday(date, getLocalTimeZone()),
-        isWeekend: checkIsWeekend(date, weekLocale.value),
-        events: getEventsForDate(date)
-      });
-      current = asCalendarDate(add(current, 1, "day"));
-    }
-    result.push({ days });
-  }
-  return result;
-});
-const weekDays = computed(() => {
-  const weekStart = startOf(displayDate.value, "week", weekLocale.value);
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    const date = asCalendarDate(add(weekStart, i, "day"));
-    days.push({
-      date,
-      isCurrentMonth: true,
-      isToday: checkIsToday(date, getLocalTimeZone()),
-      isWeekend: checkIsWeekend(date, weekLocale.value),
-      events: getEventsForDate(date)
-    });
-  }
-  return days;
+const dragDrop = useEventCalendarDragDrop({
+  editable: () => props.editable ?? true,
+  normalizedEvents: calendar.normalizedEvents,
+  onEventDrop: (payload) => emit("eventDrop", payload)
 });
-const dayViewDate = computed(() => {
-  const date = asCalendarDate(displayDate.value);
-  return {
-    date,
-    isCurrentMonth: true,
-    isToday: checkIsToday(date, getLocalTimeZone()),
-    isWeekend: checkIsWeekend(date, weekLocale.value),
-    events: getEventsForDate(date)
-  };
+const resize = useEventCalendarResize({
+  editable: () => props.editable ?? true,
+  normalizedEvents: calendar.normalizedEvents,
+  gridConfig: () => {
+    const v = internalView.value;
+    return v === "day" ? calendar.dayConfig.value : calendar.weekConfig.value;
+  },
+  slotHeight: calendar.SLOT_HEIGHT,
+  onEventResize: (payload) => emit("eventResize", payload),
+  onResizeStart: (payload) => emit("eventResizeStart", payload),
+  onResizeEnd: (payload) => emit("eventResizeEnd", payload)
 });
-function generateTimeSlots(startHour, endHour, slotDuration) {
-  const slots = [];
-  const totalMinutes = (endHour - startHour) * 60;
-  for (let m = 0; m < totalMinutes; m += slotDuration) {
-    const hour = startHour + Math.floor(m / 60);
-    const minute = m % 60;
-    const h12 = hour % 12 || 12;
-    const ampm = hour >= 12 ? "pm" : "am";
-    const label = minute === 0 ? `${h12}${ampm}` : "";
-    slots.push({ hour, minute, label });
-  }
-  return slots;
-}
-const weekTimeSlots = computed(
-  () => generateTimeSlots(weekConfig.value.startHour, weekConfig.value.endHour, weekConfig.value.slotDuration)
-);
-const dayTimeSlots = computed(
-  () => generateTimeSlots(dayConfig.value.startHour, dayConfig.value.endHour, dayConfig.value.slotDuration)
-);
-const SLOT_HEIGHT = 48;
-const timeGridDays = computed(() => {
-  if (view !== "week" && view !== "day") return [];
-  const days = view === "week" ? weekDays.value : [dayViewDate.value];
-  const config = view === "week" ? weekConfig.value : dayConfig.value;
-  return days.map((day) => ({
-    ...day,
-    dateKey: day.date.toString(),
-    allDayEvents: day.events.filter((e) => e.allDay || !hasTimeComponent(e.start)),
-    timedEvents: layoutTimedEvents(getEventsForDate(day.date), config, SLOT_HEIGHT)
-  }));
+const keyboard = useEventCalendarKeyboard({
+  displayDate: calendar.displayDate,
+  view: () => internalView.value,
+  locale: () => props.locale ?? "en-US",
+  weekStartsOn: () => props.weekStartsOn ?? 0,
+  goToPrev: calendar.goToPrev,
+  goToNext: calendar.goToNext,
+  onUpdateModelValue: (date) => emit("update:modelValue", date),
+  onDateSelect: (date) => emit("dateClick", date)
 });
-const timeGridSlots = computed(() => {
-  if (view === "week") return weekTimeSlots.value;
-  if (view === "day") return dayTimeSlots.value;
-  return [];
+const selection = useEventCalendarSelect({
+  selectable: () => props.selectable ?? true,
+  view: () => internalView.value,
+  slotDuration: () => {
+    const v = internalView.value;
+    return v === "day" ? props.dayOptions?.slotDuration ?? 30 : props.weekOptions?.slotDuration ?? 30;
+  },
+  startHour: () => {
+    const v = internalView.value;
+    return v === "day" ? props.dayOptions?.startHour ?? 7 : props.weekOptions?.startHour ?? 7;
+  },
+  endHour: () => {
+    const v = internalView.value;
+    return v === "day" ? props.dayOptions?.endHour ?? 22 : props.weekOptions?.endHour ?? 22;
+  },
+  onSelect: (payload) => emit("select", payload)
 });
-function formatTime(d) {
-  if (!hasTimeComponent(d)) return "";
-  const dt = d;
-  const h12 = dt.hour % 12 || 12;
-  const ampm = dt.hour >= 12 ? "pm" : "am";
-  const min = dt.minute > 0 ? `:${String(dt.minute).padStart(2, "0")}` : "";
-  return `${h12}${min}${ampm}`;
-}
-function getEventStyle(event, bgOpacity = 10) {
-  const c = event.color;
-  const cssVar = c === "neutral" ? "var(--ui-bg-inverted)" : `var(--ui-${c})`;
-  return {
-    "--event-color": cssVar,
-    backgroundColor: `color-mix(in oklch, ${cssVar} ${bgOpacity}%, transparent)`
-  };
-}
-function isEventStart(event, date) {
-  const startDate = toCalendarDate(event.start);
-  return date.compare(startDate) === 0;
-}
 function handleDateClick(day) {
+  if (selection.preventNextClick.value) {
+    selection.preventNextClick.value = false;
+    return;
+  }
+  keyboard.focusedDate.value = day.date;
   emit("dateClick", day.date);
 }
 function handleEventClick(event, e) {
   e.stopPropagation();
   emit("eventClick", event.original);
 }
-const expandedDay = ref(null);
-function openExpandDay(dateKey, e) {
-  e.stopPropagation();
-  expandedDay.value = dateKey;
-}
-function closeExpandDay() {
-  expandedDay.value = null;
-}
-function isExpanded(dateKey) {
-  return expandedDay.value === dateKey;
-}
-onMounted(() => {
-  document.addEventListener("click", closeExpandDay);
-});
-onBeforeUnmount(() => {
-  document.removeEventListener("click", closeExpandDay);
+const resolvedHeaderTitle = computed(() => {
+  if (typeof props.headerTitle === "string") return props.headerTitle;
+  if (typeof props.headerTitle === "function") {
+    return props.headerTitle(calendar.displayDate.value, internalView.value);
+  }
+  return calendar.headerTitle.value;
 });
-const {
-  draggedEventId,
-  dropTargetKey,
-  dragSnapSlot,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragLeave,
-  onTimeGridDragOver,
-  onSlotDragOver,
-  onDropMonthCell,
-  onDropTimeGrid
-} = useEventCalendarDragDrop({
-  editable: () => editable,
-  normalizedEvents,
-  onEventDrop: (payload) => emit("eventDrop", payload)
+const resolvedViews = computed(() => props.views ?? ALL_VIEWS);
+const ctx = {
+  displayDate: calendar.displayDate,
+  view: computed(() => internalView.value),
+  locale: computed(() => props.locale ?? "en-US"),
+  weekStartsOn: computed(() => props.weekStartsOn ?? 0),
+  editable: computed(() => props.editable ?? true),
+  loading: computed(() => props.loading ?? false),
+  color: computed(() => props.color ?? "primary"),
+  views: resolvedViews,
+  monthConfig: calendar.monthConfig,
+  weekConfig: calendar.weekConfig,
+  dayConfig: calendar.dayConfig,
+  monthWeeks: calendar.monthWeeks,
+  monthWeekLayouts: calendar.monthWeekLayouts,
+  weekdayLabels: calendar.weekdayLabels,
+  weekDays: calendar.weekDays,
+  dayViewDate: calendar.dayViewDate,
+  listDays: calendar.listDays,
+  timeGridDays: calendar.timeGridDays,
+  allDayLayout: calendar.allDayLayout,
+  timeGridSlots: calendar.timeGridSlots,
+  headerTitle: resolvedHeaderTitle,
+  formatTime: calendar.formatTime,
+  formatTimeRange: calendar.formatTimeRange,
+  getEventStyle: calendar.getEventStyle,
+  isEventStart: calendar.isEventStart,
+  goToPrev: calendar.goToPrev,
+  goToNext: calendar.goToNext,
+  goToToday: calendar.goToToday,
+  setView: calendar.setView,
+  handleDateClick,
+  handleEventClick,
+  ui,
+  propUi: computed(() => props.ui),
+  ...dragDrop,
+  ...resize,
+  ...keyboard,
+  // Selection
+  selectable: computed(() => props.selectable ?? true),
+  ...selection,
+  SLOT_HEIGHT: calendar.SLOT_HEIGHT
+};
+provide(eventCalendarContextKey, ctx);
+function setDate(date) {
+  emit("update:modelValue", asCalendarDate(date));
+}
+defineExpose({
+  next: ctx.goToNext,
+  prev: ctx.goToPrev,
+  today: ctx.goToToday,
+  setView: ctx.setView,
+  setDate,
+  view: ctx.view,
+  date: ctx.displayDate
 });
 </script>
 
 <template>
-  <div data-slot="root" :class="ui.root({ class: propUi?.root })">
-    <!-- Header -->
-    <slot
-      name="header"
-      :title="headerTitle"
-      :prev="goToPrev"
-      :next="goToNext"
-      :today="goToToday"
-      :current-date="displayDate"
-      :view="view"
-      :set-view="setView">
-      <div data-slot="header" :class="ui.header({ class: propUi?.header })">
-        <span data-slot="headerTitle" :class="ui.headerTitle({ class: propUi?.headerTitle })">
-          {{ headerTitle }}
-        </span>
-
-        <div data-slot="headerActions" :class="ui.headerActions({ class: propUi?.headerActions })">
-          <!-- View switcher -->
-          <div data-slot="viewSwitcher" :class="ui.viewSwitcher({ class: propUi?.viewSwitcher })">
-            <UButton
-              v-for="v in ['month', 'week', 'day']"
-              :key="v"
-              :label="v"
-              size="xs"
-              :color="view === v ? color : 'neutral'"
-              :variant="view === v ? 'subtle' : 'ghost'"
-              class="capitalize"
-              @click="setView(v)" />
-          </div>
-
-          <UButton icon="i-lucide-chevron-left" color="neutral" variant="ghost" size="xs" square @click="goToPrev" />
-          <UButton label="Today" color="neutral" variant="ghost" size="xs" @click="goToToday" />
-          <UButton icon="i-lucide-chevron-right" color="neutral" variant="ghost" size="xs" square @click="goToNext" />
-        </div>
-      </div>
-    </slot>
-
-    <!-- ── Month View ──────────────────────────────────────────────── -->
-    <template v-if="view === 'month'">
-      <!-- Weekday headers -->
-      <div data-slot="weekdayRow" :class="ui.weekdayRow({ class: propUi?.weekdayRow })">
-        <div
-          v-for="(day, index) in weekdayLabels"
-          :key="day"
-          data-slot="weekdayCell"
-          :class="ui.weekdayCell({ class: propUi?.weekdayCell })">
-          <slot name="day-header" :day="day" :index="index">
-            {{ day }}
-          </slot>
-        </div>
-      </div>
+  <Primitive :as="props.as ?? 'div'" data-slot="root" :class="ui.root({ class: props.ui?.root })">
+    <!-- Compound mode: user provides #default and owns rendering -->
+    <slot v-if="slots.default" v-bind="ctx" />
 
-      <!-- Month grid -->
-      <div data-slot="monthBody" :class="ui.monthBody({ class: propUi?.monthBody })">
-        <template v-for="week in monthWeeks" :key="week.days[0].date.toString()">
-          <div
-            v-for="day in week.days"
-            :key="day.date.toString()"
-            data-slot="dayCell"
-            :class="[
-  ui.dayCell({ class: propUi?.dayCell }),
-  !day.isCurrentMonth && ui.dayCellOutside({ class: propUi?.dayCellOutside }),
-  dropTargetKey === `month-${day.date.toString()}` && ui.dropTarget({ class: propUi?.dropTarget }),
-  isExpanded(day.date.toString()) && 'relative z-10'
-]"
-            @click="handleDateClick(day)"
-            @dragover="onDragOver(`month-${day.date.toString()}`, $event)"
-            @dragleave="onDragLeave"
-            @drop="onDropMonthCell(day.date, $event)">
-            <slot name="day" :day="day">
-              <!-- Day number -->
-              <div
-                data-slot="dayNumber"
-                :class="[
-  !day.isToday && ui.dayNumber({ class: propUi?.dayNumber }),
-  day.isToday && ui.dayNumberToday({ class: propUi?.dayNumberToday }),
-  !day.isCurrentMonth && !day.isToday && ui.dayNumberOutside({ class: propUi?.dayNumberOutside })
-]">
-                {{ day.date.day }}
-              </div>
-
-              <!-- Event chips -->
-              <div data-slot="eventList" :class="ui.eventList({ class: propUi?.eventList })">
-                <template v-for="(event, idx) in day.events" :key="event.id">
-                  <div
-                    v-if="idx < monthConfig.maxEvents"
-                    data-slot="eventChip"
-                    :draggable="editable && event.draggable && isEventStart(event, day.date)"
-                    :class="[ui.eventChip({ class: propUi?.eventChip }), !isEventStart(event, day.date) && 'border-l-0!']"
-                    :style="getEventStyle(event)"
-                    @click="handleEventClick(event, $event)"
-                    @dragstart="onDragStart(event, $event)"
-                    @dragend="onDragEnd">
-                    <slot name="event" :event="event.original" :view="view">
-                      <template v-if="isEventStart(event, day.date)">
-                        <span v-if="!event.allDay" data-slot="eventTime" :class="ui.eventTime({ class: propUi?.eventTime })">{{
-                          formatTime(event.start)
-                        }}</span>
-                        {{ event.title }}
-                      </template>
-                      <span v-else class="opacity-0">{{ event.title }}</span>
-                    </slot>
-                  </div>
-                </template>
-
-                <!-- "+N more" trigger -->
-                <div
-                  v-if="day.events.length > monthConfig.maxEvents"
-                  data-slot="moreEvents"
-                  :class="ui.moreEvents({ class: propUi?.moreEvents })"
-                  @click="openExpandDay(day.date.toString(), $event)">
-                  <slot
-                    name="more-events"
-                    :events="day.events.slice(monthConfig.maxEvents).map((e) => e.original)"
-                    :count="day.events.length - monthConfig.maxEvents"
-                    :day="day">
-                    +{{ day.events.length - monthConfig.maxEvents }} more
-                  </slot>
-                </div>
-              </div>
-
-              <!-- Expanded overlay with ALL events -->
-              <div
-                v-if="isExpanded(day.date.toString()) && day.events.length > monthConfig.maxEvents"
-                data-slot="expandedOverlay"
-                :class="ui.expandedOverlay({ class: propUi?.expandedOverlay })"
-                @click.stop>
-                <div
-                  data-slot="dayNumber"
-                  :class="[
-  !day.isToday && ui.dayNumber({ class: propUi?.dayNumber }),
-  day.isToday && ui.dayNumberToday({ class: propUi?.dayNumberToday })
-]">
-                  {{ day.date.day }}
-                </div>
-                <div data-slot="eventList" :class="ui.eventList({ class: propUi?.eventList })">
-                  <div
-                    v-for="event in day.events"
-                    :key="`expanded-${event.id}`"
-                    data-slot="eventChip"
-                    :draggable="editable && event.draggable"
-                    :class="ui.eventChip({ class: propUi?.eventChip })"
-                    :style="getEventStyle(event)"
-                    @click="handleEventClick(event, $event)"
-                    @dragstart="onDragStart(event, $event)"
-                    @dragend="onDragEnd">
-                    <slot name="event" :event="event.original" :view="view">
-                      <span v-if="!event.allDay" data-slot="eventTime" :class="ui.eventTime({ class: propUi?.eventTime })">{{
-                        formatTime(event.start)
-                      }}</span
-                      >{{ event.title }}
-                    </slot>
-                  </div>
-                </div>
-              </div>
-            </slot>
-          </div>
+    <!-- Auto mode: render header + active view with slot forwarding -->
+    <template v-else>
+      <!-- Header -->
+      <slot
+        v-if="slots.header"
+        name="header"
+        :title="resolvedHeaderTitle"
+        :prev="ctx.goToPrev"
+        :next="ctx.goToNext"
+        :today="ctx.goToToday"
+        :current-date="ctx.displayDate.value"
+        :view="ctx.view.value"
+        :set-view="ctx.setView"
+        :views="resolvedViews" />
+      <EventCalendarHeader v-else>
+        <template v-if="slots['header-title']" #title="titleProps">
+          <slot name="header-title" v-bind="titleProps" />
         </template>
-      </div>
-    </template>
-
-    <!-- ── Week / Day View (unified) ───────────────────────────────── -->
-    <template v-else-if="view === 'week' || view === 'day'">
-      <!-- Column headers -->
-      <div data-slot="columnHeaders" :class="ui.columnHeaders({ class: propUi?.columnHeaders })">
-        <div data-slot="timeGutterSpacer" :class="ui.timeGutterSpacer({ class: propUi?.timeGutterSpacer })" />
-        <div
-          v-for="day in timeGridDays"
-          :key="day.dateKey"
-          data-slot="dayColumnHeader"
-          :class="ui.dayColumnHeader({ class: propUi?.dayColumnHeader })">
-          <div :class="ui.dayColumnHeaderLabel({ class: propUi?.dayColumnHeaderLabel })">
-            {{ format(day.date, timeGridDays.length === 1 ? "dddd" : "ddd", locale) }}
-          </div>
-          <div
-            :class="[
-  day.isToday ? ui.dayColumnHeaderToday({ class: propUi?.dayColumnHeaderToday }) : ui.dayColumnHeaderNumber({ class: propUi?.dayColumnHeaderNumber })
-]">
-            {{ day.date.day }}
-          </div>
-        </div>
-      </div>
-
-      <!-- All-day events row -->
-      <div data-slot="allDayRow" :class="ui.allDayRow({ class: propUi?.allDayRow })">
-        <div data-slot="allDayLabel" :class="ui.allDayLabel({ class: propUi?.allDayLabel })">all-day</div>
-        <div
-          v-for="day in timeGridDays"
-          :key="`allday-${day.dateKey}`"
-          data-slot="allDayCell"
-          :class="[
-  'overflow-auto',
-  ui.allDayCell({ class: propUi?.allDayCell }),
-  dropTargetKey === `allday-${day.dateKey}` && ui.dropTarget({ class: propUi?.dropTarget })
-]"
-          @dragover="onDragOver(`allday-${day.dateKey}`, $event)"
-          @dragleave="onDragLeave"
-          @drop="onDropMonthCell(day.date, $event)">
-          <!-- Day view exposes the all-day slot; week view renders chips directly -->
-          <template v-if="timeGridDays.length === 1">
-            <slot name="all-day" :events="day.allDayEvents.map((e) => e.original)" :date="day.date">
-              <div
-                v-for="event in day.allDayEvents"
-                :key="event.id"
-                :draggable="editable && event.draggable"
-                :class="[ui.eventChip({ class: propUi?.eventChip }), 'w-full']"
-                :style="getEventStyle(event)"
-                @click="handleEventClick(event, $event)"
-                @dragstart="onDragStart(event, $event)"
-                @dragend="onDragEnd">
-                <slot name="event" :event="event.original" :view="view">
-                  {{ event.title }}
-                </slot>
-              </div>
-            </slot>
-          </template>
-          <template v-else>
-            <div
-              v-for="event in day.allDayEvents"
-              :key="event.id"
-              :draggable="editable && event.draggable && isEventStart(event, day.date)"
-              :class="[ui.eventChip({ class: propUi?.eventChip }), 'w-full', !isEventStart(event, day.date) && 'border-l-0!']"
-              :style="getEventStyle(event)"
-              @click="handleEventClick(event, $event)"
-              @dragstart="onDragStart(event, $event)"
-              @dragend="onDragEnd">
-              <slot name="event" :event="event.original" :view="view">
-                <template v-if="isEventStart(event, day.date)">
-                  {{ event.title }}
-                </template>
-                <span v-else class="opacity-0">{{ event.title }}</span>
-              </slot>
-            </div>
-          </template>
-        </div>
-      </div>
+        <template v-if="slots['header-nav']" #nav="navProps">
+          <slot name="header-nav" v-bind="navProps" />
+        </template>
+        <template v-if="slots['header-view-switcher']" #view-switcher="vsProps">
+          <slot name="header-view-switcher" v-bind="vsProps" />
+        </template>
+      </EventCalendarHeader>
 
-      <!-- Time grid -->
-      <div data-slot="timeGrid" :class="ui.timeGrid({ class: propUi?.timeGrid })">
-        <!-- Time gutter -->
-        <div data-slot="timeGutter" :class="ui.timeGutter({ class: propUi?.timeGutter })">
-          <div
-            v-for="slot in timeGridSlots"
-            :key="`gutter-${slot.hour}-${slot.minute}`"
-            data-slot="timeGutterSlot"
-            :class="ui.timeGutterSlot({ class: propUi?.timeGutterSlot })"
-            :style="{ height: `${SLOT_HEIGHT}px` }">
-            <div v-if="slot.label" data-slot="timeLabel" :class="ui.timeLabel({ class: propUi?.timeLabel })">
-              <slot name="time-label" :hour="slot.hour" :label="slot.label">
-                {{ slot.label }}
-              </slot>
-            </div>
-          </div>
-        </div>
+      <!-- Month view -->
+      <EventCalendarMonthView v-if="ctx.view.value === 'month'">
+        <template v-if="slots.event" #event="eventProps">
+          <slot name="event" v-bind="eventProps" />
+        </template>
+        <template v-if="slots['day-header']" #day-header="dayHeaderProps">
+          <slot name="day-header" v-bind="dayHeaderProps" />
+        </template>
+        <template v-if="slots.day" #day="dayProps">
+          <slot name="day" v-bind="dayProps" />
+        </template>
+        <template v-if="slots['more-events']" #more-events="moreProps">
+          <slot name="more-events" v-bind="moreProps" />
+        </template>
+        <template v-if="slots.loading" #loading>
+          <slot name="loading" />
+        </template>
+        <template v-if="slots.empty" #empty>
+          <slot name="empty" />
+        </template>
+      </EventCalendarMonthView>
 
-        <!-- Day columns -->
-        <div
-          v-for="day in timeGridDays"
-          :key="`col-${day.dateKey}`"
-          data-slot="dayColumn"
-          :class="ui.dayColumn({ class: propUi?.dayColumn })"
-          @dragover="onTimeGridDragOver(`time-${day.dateKey}`, $event)"
-          @dragleave="onDragLeave"
-          @drop="onDropTimeGrid(day.date, $event)">
-          <!-- Time slot rows (grid lines + drag targets) -->
-          <div
-            v-for="slot in timeGridSlots"
-            :key="`row-${slot.hour}-${slot.minute}`"
-            data-slot="timeSlotRow"
-            :class="[
-  ui.timeSlotRow({ class: propUi?.timeSlotRow }),
-  dragSnapSlot === `time-${day.dateKey}-${slot.hour}-${slot.minute}` && ui.dragSnapSlot({ class: propUi?.dragSnapSlot })
-]"
-            :style="{ height: `${SLOT_HEIGHT}px` }"
-            @click="handleDateClick(day)"
-            @dragover="onSlotDragOver(`time-${day.dateKey}-${slot.hour}-${slot.minute}`, $event)" />
+      <!-- Week/Day time grid view -->
+      <EventCalendarTimeGrid v-else-if="ctx.view.value === 'week' || ctx.view.value === 'day'">
+        <template v-if="slots.event" #event="eventProps">
+          <slot name="event" v-bind="eventProps" />
+        </template>
+        <template v-if="slots['time-label']" #time-label="timeLabelProps">
+          <slot name="time-label" v-bind="timeLabelProps" />
+        </template>
+        <template v-if="slots['all-day']" #all-day="allDayProps">
+          <slot name="all-day" v-bind="allDayProps" />
+        </template>
+        <template v-if="slots.loading" #loading>
+          <slot name="loading" />
+        </template>
+        <template v-if="slots.empty" #empty>
+          <slot name="empty" />
+        </template>
+      </EventCalendarTimeGrid>
 
-          <!-- Timed events (absolutely positioned) -->
-          <div
-            v-for="event in day.timedEvents"
-            :key="`ev-${event.id}`"
-            data-slot="timeEvent"
-            :draggable="editable && event.draggable"
-            :class="[
-  ui.timeEvent({ class: propUi?.timeEvent }),
-  draggedEventId != null && draggedEventId !== event.id && 'pointer-events-none'
-]"
-            :style="{
-  ...getEventStyle(event, 15),
-  top: `${event.topPx}px`,
-  height: `${event.heightPx}px`,
-  minHeight: '20px',
-  left: `calc(${event.column / event.totalColumns * 100}% + 2px)`,
-  width: `calc(${1 / event.totalColumns * 100}% - 4px)`
-}"
-            @click="handleEventClick(event, $event)"
-            @dragstart="onDragStart(event, $event)"
-            @dragend="onDragEnd">
-            <slot name="event" :event="event.original" :view="view">
-              <div data-slot="timeEventTitle" :class="ui.timeEventTitle({ class: propUi?.timeEventTitle })">
-                {{ event.title }}
-              </div>
-              <div data-slot="timeEventTime" :class="ui.timeEventTime({ class: propUi?.timeEventTime })">
-                {{ formatTime(event.start) }}
-                <template v-if="timeGridDays.length === 1"> – {{ formatTime(event.end) }}</template>
-              </div>
-            </slot>
-          </div>
-        </div>
-      </div>
+      <!-- List view -->
+      <EventCalendarListView v-else-if="ctx.view.value === 'list'">
+        <template v-if="slots.event" #event="eventProps">
+          <slot name="event" v-bind="eventProps" />
+        </template>
+        <template v-if="slots['date-header']" #date-header="dateHeaderProps">
+          <slot name="date-header" v-bind="dateHeaderProps" />
+        </template>
+      </EventCalendarListView>
     </template>
-  </div>
+  </Primitive>
 </template>