kalendly 0.1.7 → 0.2.1

package/dist/index.mjs

@@ -1,47 +1,21 @@
 var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/core/types.ts
+var init_types = __esm({
+  "src/core/types.ts"() {
+    "use strict";
+  }
+});
+
 // src/core/utils.ts
-var MONTHS = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-var MONTHS_FULL = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var DAYS = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday"
-];
 function normalizeDate(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
 }
@@ -178,14 +152,6 @@ function sortEventsByTime(events) {
     return a.startTime.localeCompare(b.startTime);
   });
 }
-var DEFAULT_CATEGORY_COLORS = {
-  work: "#3b82f6",
-  personal: "#8b5cf6",
-  meeting: "#10b981",
-  deadline: "#ef4444",
-  appointment: "#f59e0b",
-  other: "#6b7280"
-};
 function getDefaultEventColor(category, customColors) {
   const colorMap = customColors || DEFAULT_CATEGORY_COLORS;
   if (category && colorMap[category]) {
@@ -207,2059 +173,553 @@ function getCategoryColor(category, customColors) {
   const color = colorMap[category] || colorMap.other || "#fc8917";
   return isValidHexColor(color) ? color : "#fc8917";
 }
-
-// src/core/calendar-engine.ts
-var CalendarEngine = class {
-  constructor(config) {
-    this.listeners = /* @__PURE__ */ new Set();
-    this.config = config;
-    this.categoryColors = mergeCategoryColors(config.categoryColors);
-    const initialDate = config.initialDate || /* @__PURE__ */ new Date();
-    this.state = {
-      currentYear: initialDate.getFullYear(),
-      currentMonth: initialDate.getMonth(),
-      currentDate: initialDate.getDate(),
-      selectedDate: null,
-      selectedDayIndex: null,
-      tasks: []
+var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS;
+var init_utils = __esm({
+  "src/core/utils.ts"() {
+    "use strict";
+    MONTHS = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ];
+    MONTHS_FULL = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+    DAYS = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ];
+    DEFAULT_CATEGORY_COLORS = {
+      work: "#3b82f6",
+      personal: "#8b5cf6",
+      meeting: "#10b981",
+      deadline: "#ef4444",
+      appointment: "#f59e0b",
+      other: "#6b7280"
     };
   }
-  /**
-   * Subscribe to state changes
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-  /**
-   * Notify all listeners of state changes
-   */
-  notify() {
-    this.listeners.forEach((listener) => listener());
-  }
-  /**
-   * Get current state
-   */
-  getState() {
-    return { ...this.state };
-  }
-  /**
-   * Get view model with computed properties
-   */
-  getViewModel() {
-    const calendarDates = generateCalendarDates(
-      this.state.currentYear,
-      this.state.currentMonth,
-      this.config.events,
-      this.config.weekStartsOn
-    );
-    return {
-      ...this.state,
-      months: MONTHS,
-      days: DAYS,
-      years: generateYears(this.config.minYear, this.config.maxYear),
-      monthAndYearText: getMonthYearText(
-        this.state.currentYear,
-        this.state.currentMonth
-      ),
-      scheduleDay: this.state.selectedDate ? formatDateForDisplay(this.state.selectedDate) : "",
-      calendarDates,
-      popupPositionClass: getPopupPositionClass(this.state.selectedDayIndex)
-    };
-  }
-  /**
-   * Get actions object
-   */
-  getActions() {
-    return {
-      next: this.next.bind(this),
-      previous: this.previous.bind(this),
-      jump: this.jump.bind(this),
-      goToToday: this.goToToday.bind(this),
-      isCurrentMonth: this.isCurrentMonth.bind(this),
-      selectDate: this.selectDate.bind(this),
-      updateTasks: this.updateTasks.bind(this)
-    };
-  }
-  /**
-   * Navigate to next month
-   */
-  next() {
-    if (this.state.currentMonth === 11) {
-      this.state.currentMonth = 0;
-      this.state.currentYear++;
-    } else {
-      this.state.currentMonth++;
-    }
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Navigate to previous month
-   */
-  previous() {
-    if (this.state.currentMonth === 0) {
-      this.state.currentMonth = 11;
-      this.state.currentYear--;
-    } else {
-      this.state.currentMonth--;
-    }
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Jump to specific month and year
-   */
-  jump(year, month) {
-    this.state.currentYear = year;
-    this.state.currentMonth = month;
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Navigate to current month (today)
-   */
-  goToToday() {
-    const today = /* @__PURE__ */ new Date();
-    this.state.currentYear = today.getFullYear();
-    this.state.currentMonth = today.getMonth();
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Check if currently viewing today's month
-   */
-  isCurrentMonth() {
-    const today = /* @__PURE__ */ new Date();
-    return this.state.currentYear === today.getFullYear() && this.state.currentMonth === today.getMonth();
-  }
-  /**
-   * Select a specific date
-   */
-  selectDate(date, dayIndex) {
-    this.state.selectedDate = date;
-    this.state.selectedDayIndex = dayIndex ?? null;
-    this.state.currentDate = date.getDate();
-    this.state.currentMonth = date.getMonth();
-    this.state.currentYear = date.getFullYear();
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Update tasks for the currently selected date
-   */
-  updateTasks() {
-    if (!this.state.selectedDate) {
-      this.state.tasks = [];
-      return;
-    }
-    this.state.tasks = getEventsForDate(
-      this.config.events,
-      this.state.selectedDate
-    );
-  }
-  /**
-   * Update events configuration
-   */
-  updateEvents(events) {
-    this.config.events = events;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Handle date cell click
-   */
-  handleDateClick(date, dayIndex) {
-    this.selectDate(date, dayIndex);
-  }
-  /**
-   * Check if date has events
-   */
-  hasEventsForDate(date) {
-    return getEventsForDate(this.config.events, date).length > 0;
-  }
-  /**
-   * Get events for a specific date
-   */
-  getEventsForDate(date) {
-    return getEventsForDate(this.config.events, date);
-  }
-  /**
-   * Clear selected date
-   */
-  clearSelection() {
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.state.tasks = [];
-    this.notify();
-  }
-  /**
-   * Get category color (with custom colors support)
-   */
-  getCategoryColor(category) {
-    if (!category) return "#fc8917";
-    return getCategoryColor(category, this.categoryColors);
-  }
-  /**
-   * Update category colors dynamically
-   */
-  updateCategoryColors(colors) {
-    this.categoryColors = mergeCategoryColors(colors);
-    this.notify();
-  }
-  /**
-   * Get all category colors
-   */
-  getCategoryColors() {
-    return { ...this.categoryColors };
-  }
-  /**
-   * Register a new category with color
-   */
-  registerCategory(name2, color) {
-    this.categoryColors[name2] = color;
-    this.notify();
-  }
-  /**
-   * Destroy the engine and cleanup listeners
-   */
-  destroy() {
-    this.listeners.clear();
-  }
-};
-
-// src/react/index.tsx
-var react_exports = {};
-__export(react_exports, {
-  Calendar: () => Calendar,
-  CalendarEngine: () => CalendarEngine,
-  DAYS: () => DAYS,
-  DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-  DatePopup: () => DatePopup,
-  MONTHS: () => MONTHS,
-  MONTHS_FULL: () => MONTHS_FULL,
-  formatAttendees: () => formatAttendees,
-  formatDateForDisplay: () => formatDateForDisplay,
-  formatTimeRange: () => formatTimeRange,
-  generateCalendarDates: () => generateCalendarDates,
-  generateYears: () => generateYears,
-  getCategoryColor: () => getCategoryColor,
-  getCellClasses: () => getCellClasses,
-  getDefaultEventColor: () => getDefaultEventColor,
-  getEventsForDate: () => getEventsForDate,
-  getMonthYearText: () => getMonthYearText,
-  getPopupPositionClass: () => getPopupPositionClass,
-  hasEvents: () => hasEvents,
-  isSameDay: () => isSameDay,
-  isToday: () => isToday,
-  isValidHexColor: () => isValidHexColor,
-  mergeCategoryColors: () => mergeCategoryColors,
-  normalizeDate: () => normalizeDate,
-  sortEventsByTime: () => sortEventsByTime
 });
 
-// src/react/components/Calendar.tsx
-import {
-  useEffect,
-  useState,
-  useCallback,
-  useMemo,
-  useRef
-} from "react";
-
-// src/react/components/DatePopup.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var PriorityBadge = ({ priority }) => {
-  if (!priority) return null;
-  const priorityConfig = {
-    high: { label: "HIGH", className: "badge priority-high" },
-    medium: { label: "MEDIUM", className: "badge priority-medium" },
-    low: { label: "LOW", className: "badge priority-low" }
-  };
-  const config = priorityConfig[priority];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx("span", { className: config.className, children: config.label });
-};
-var StatusBadge = ({ status }) => {
-  if (!status || status === "scheduled") return null;
-  const statusConfig = {
-    completed: { label: "COMPLETED", className: "badge status-completed" },
-    cancelled: { label: "CANCELLED", className: "badge status-cancelled" },
-    tentative: { label: "TENTATIVE", className: "badge status-tentative" }
-  };
-  const config = statusConfig[status];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx("span", { className: config.className, children: config.label });
-};
-var CategoryBadge = ({ category }) => {
-  if (!category) return null;
-  const categoryConfig = {
-    work: { label: "WORK", className: "badge category-work" },
-    personal: { label: "PERSONAL", className: "badge category-personal" },
-    meeting: { label: "MEETING", className: "badge category-meeting" },
-    deadline: { label: "DEADLINE", className: "badge category-deadline" },
-    appointment: {
-      label: "APPOINTMENT",
-      className: "badge category-appointment"
-    },
-    other: { label: "OTHER", className: "badge category-other" }
-  };
-  const config = categoryConfig[category];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx("span", { className: config.className, children: config.label });
-};
-var DatePopup = ({
-  isVisible,
-  selectedDate,
-  events,
-  scheduleDay,
-  popupPositionClass,
-  onEventClick,
-  onClose,
-  renderEvent,
-  renderNoEvents
-}) => {
-  if (!isVisible || !selectedDate) return null;
-  const handleEventClick = (event) => {
-    onEventClick?.(event);
-  };
-  const showScrollHint = events.length > 3;
-  const defaultRenderEvent = (event) => {
-    const timeRange = formatTimeRange(event);
-    const attendeesList = formatAttendees(event.attendees);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `event-card${onEventClick ? " clickable" : ""}`,
-        onClick: () => handleEventClick(event),
-        style: {
-          borderLeftColor: event.color || void 0
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "event-header", children: [
-            /* @__PURE__ */ jsx("div", { className: "event-title", children: event.name }),
-            /* @__PURE__ */ jsxs("div", { className: "event-badges", children: [
-              /* @__PURE__ */ jsx(CategoryBadge, { category: event.category }),
-              /* @__PURE__ */ jsx(PriorityBadge, { priority: event.priority }),
-              /* @__PURE__ */ jsx(StatusBadge, { status: event.status })
-            ] })
-          ] }),
-          timeRange && /* @__PURE__ */ jsxs("div", { className: "event-time", children: [
-            /* @__PURE__ */ jsx("span", { className: "event-time-label", children: "Time:" }),
-            /* @__PURE__ */ jsx("span", { className: "event-time-value", children: timeRange })
-          ] }),
-          event.description && /* @__PURE__ */ jsx("div", { className: "event-description", children: event.description }),
-          event.location && /* @__PURE__ */ jsxs("div", { className: "event-time", children: [
-            /* @__PURE__ */ jsx("span", { className: "event-time-label", children: "Location:" }),
-            /* @__PURE__ */ jsx("span", { className: "event-time-value", children: event.location })
-          ] }),
-          attendeesList && /* @__PURE__ */ jsxs("div", { className: "event-time", children: [
-            /* @__PURE__ */ jsx("span", { className: "event-time-label", children: "Attendees:" }),
-            /* @__PURE__ */ jsx("span", { className: "event-time-value", children: attendeesList })
-          ] }),
-          event.organizer && /* @__PURE__ */ jsxs("div", { className: "event-time", children: [
-            /* @__PURE__ */ jsx("span", { className: "event-time-label", children: "Organizer:" }),
-            /* @__PURE__ */ jsx("span", { className: "event-time-value", children: event.organizer })
-          ] }),
-          event.notes && /* @__PURE__ */ jsxs("div", { className: "event-time", children: [
-            /* @__PURE__ */ jsx("span", { className: "event-time-label", children: "Notes:" }),
-            /* @__PURE__ */ jsx("span", { className: "event-time-value", children: event.notes })
-          ] }),
-          event.url && /* @__PURE__ */ jsx("div", { className: "event-time", children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: event.url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "event-link",
-              onClick: (e) => e.stopPropagation(),
-              children: "View Details \u2192"
-            }
-          ) }),
-          event.tags && event.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "event-tags", children: event.tags.map((tag, idx) => /* @__PURE__ */ jsx("span", { className: "event-tag", children: tag }, idx)) })
-        ]
-      },
-      event.id || event.name
-    );
-  };
-  const defaultRenderNoEvents = () => /* @__PURE__ */ jsx("div", { className: "no-events-message", children: "No events scheduled for this day." });
-  return /* @__PURE__ */ jsxs("div", { className: `date-popup ${popupPositionClass}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "popup-header", children: [
-      /* @__PURE__ */ jsx("h2", { children: scheduleDay }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "popup-close",
-          onClick: onClose,
-          "aria-label": "Close",
-          children: "\u2715"
-        }
-      )
-    ] }),
-    showScrollHint && /* @__PURE__ */ jsx("div", { className: "scroll-hint", children: "\u2193 Scroll to see more events \u2193" }),
-    /* @__PURE__ */ jsx("div", { className: "events-container", children: events.length > 0 ? events.map(
-      (event) => renderEvent ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `event-card${onEventClick ? " clickable" : ""}`,
-          onClick: () => handleEventClick(event),
-          children: renderEvent(event)
-        },
-        event.id || event.name
-      ) : defaultRenderEvent(event)
-    ) : renderNoEvents ? renderNoEvents() : defaultRenderNoEvents() })
-  ] });
-};
-
-// src/react/components/Calendar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Calendar = ({
-  events,
-  initialDate,
-  minYear,
-  maxYear,
-  weekStartsOn = 0,
-  useShortMonthNames = false,
-  onDateSelect,
-  onEventClick,
-  onMonthChange,
-  className = "",
-  style,
-  renderEvent,
-  renderNoEvents,
-  title,
-  theme
-}) => {
-  const engine = useMemo(
-    () => new CalendarEngine({
-      events,
-      initialDate,
-      minYear,
-      maxYear,
-      weekStartsOn
-    }),
-    [events, initialDate, minYear, maxYear, weekStartsOn]
-  );
-  const [, forceUpdate] = useState({});
-  const rerender = useCallback(() => forceUpdate({}), []);
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [yearInput, setYearInput] = useState("");
-  const [yearInputValid, setYearInputValid] = useState(true);
-  const pickerRef = useRef(null);
-  useEffect(() => {
-    const unsubscribe = engine.subscribe(rerender);
-    return unsubscribe;
-  }, [engine, rerender]);
-  useEffect(() => {
-    engine.updateEvents(events);
-  }, [engine, events]);
-  useEffect(() => {
-    return () => {
-      engine.destroy();
-    };
-  }, [engine]);
-  useEffect(() => {
-    if (theme) {
-      const root = document.documentElement;
-      if (theme.primary)
-        root.style.setProperty("--calendar-primary-color", theme.primary);
-      if (theme.secondary)
-        root.style.setProperty("--calendar-secondary-color", theme.secondary);
-      if (theme.tertiary)
-        root.style.setProperty("--calendar-tertiary-color", theme.tertiary);
-      if (theme.textColor)
-        root.style.setProperty("--calendar-text-color", theme.textColor);
-      if (theme.textLight)
-        root.style.setProperty("--calendar-text-light", theme.textLight);
-      if (theme.background)
-        root.style.setProperty("--calendar-background", theme.background);
-      if (theme.cellHover)
-        root.style.setProperty("--calendar-cell-hover", theme.cellHover);
-      if (theme.borderColor)
-        root.style.setProperty("--calendar-border-color", theme.borderColor);
-      if (theme.todayOutline)
-        root.style.setProperty("--calendar-today-outline", theme.todayOutline);
-      if (theme.selectedBg)
-        root.style.setProperty("--calendar-selected-bg", theme.selectedBg);
-      if (theme.eventIndicator)
-        root.style.setProperty(
-          "--calendar-event-indicator",
-          theme.eventIndicator
-        );
-    }
-  }, [theme]);
-  const viewModel = engine.getViewModel();
-  const actions = engine.getActions();
-  const { selectedDate, tasks } = viewModel;
-  const handleDateClick = (event) => {
-    const td = event.target.closest("td");
-    if (!td) return;
-    const tr = td.parentElement;
-    if (!tr) return;
-    const weekIndex = tr.rowIndex - 1;
-    const dayIndex = Array.from(tr.children).indexOf(td);
-    const calendarDate = viewModel.calendarDates[weekIndex]?.[dayIndex];
-    if (!calendarDate) return;
-    engine.handleDateClick(calendarDate.date, dayIndex);
-    onDateSelect?.(calendarDate.date);
-  };
-  const handleMonthChange = useCallback(() => {
-    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
-  }, [onMonthChange, viewModel.currentYear, viewModel.currentMonth]);
-  const handleNext = () => {
-    actions.next();
-    handleMonthChange();
-  };
-  const handlePrevious = () => {
-    actions.previous();
-    handleMonthChange();
-  };
-  const handleGoToToday = () => {
-    actions.goToToday();
-    setPickerOpen(false);
-    const today2 = /* @__PURE__ */ new Date();
-    onMonthChange?.(today2.getFullYear(), today2.getMonth());
-  };
-  const togglePicker = () => {
-    const newOpen = !pickerOpen;
-    setPickerOpen(newOpen);
-    if (newOpen) {
-      setYearInput(String(viewModel.currentYear));
-      setYearInputValid(true);
-    }
-  };
-  const today = /* @__PURE__ */ new Date();
-  const computedMinYear = minYear ?? today.getFullYear() - 30;
-  const computedMaxYear = maxYear ?? today.getFullYear() + 10;
-  const handleYearInputChange = (e) => {
-    const value = e.target.value;
-    if (value === "" || /^\d+$/.test(value)) {
-      setYearInput(value);
-      const year = parseInt(value, 10);
-      setYearInputValid(
-        value === "" || year >= computedMinYear && year <= computedMaxYear
-      );
-    }
-  };
-  const handleYearInputBlur = () => {
-    const year = parseInt(yearInput, 10);
-    if (isNaN(year) || year < computedMinYear || year > computedMaxYear) {
-      setYearInput(String(viewModel.currentYear));
-      setYearInputValid(true);
-    } else {
-      actions.jump(year, viewModel.currentMonth);
-      handleMonthChange();
-    }
-  };
-  const handleYearPrev = () => {
-    const newYear = viewModel.currentYear - 1;
-    if (newYear >= computedMinYear) {
-      actions.jump(newYear, viewModel.currentMonth);
-      setYearInput(String(newYear));
-      handleMonthChange();
-    }
-  };
-  const handleYearNext = () => {
-    const newYear = viewModel.currentYear + 1;
-    if (newYear <= computedMaxYear) {
-      actions.jump(newYear, viewModel.currentMonth);
-      setYearInput(String(newYear));
-      handleMonthChange();
-    }
-  };
-  const handleMonthSelect = (month) => {
-    actions.jump(viewModel.currentYear, month);
-    setPickerOpen(false);
-    handleMonthChange();
-  };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-        setPickerOpen(false);
+// src/core/calendar-engine.ts
+var CalendarEngine;
+var init_calendar_engine = __esm({
+  "src/core/calendar-engine.ts"() {
+    "use strict";
+    init_utils();
+    CalendarEngine = class {
+      constructor(config) {
+        this.listeners = /* @__PURE__ */ new Set();
+        this.config = config;
+        this.categoryColors = mergeCategoryColors(config.categoryColors);
+        const initialDate = config.initialDate || /* @__PURE__ */ new Date();
+        this.state = {
+          currentYear: initialDate.getFullYear(),
+          currentMonth: initialDate.getMonth(),
+          currentDate: initialDate.getDate(),
+          selectedDate: null,
+          selectedDayIndex: null,
+          tasks: []
+        };
       }
-    };
-    if (pickerOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [pickerOpen]);
-  return /* @__PURE__ */ jsxs2("div", { className: `kalendly-calendar ${className}`, style, children: [
-    title && /* @__PURE__ */ jsx2("div", { className: "page--title", children: /* @__PURE__ */ jsx2("h1", { children: title }) }),
-    /* @__PURE__ */ jsx2("div", { className: "calendar--content", children: /* @__PURE__ */ jsxs2("div", { className: "calendar--card", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "calendar--nav-header", children: [
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: "calendar--nav-arrow",
-            onClick: handlePrevious,
-            "aria-label": "Previous month",
-            children: "\u2039"
-          }
-        ),
-        /* @__PURE__ */ jsxs2("div", { className: "calendar--picker-container", ref: pickerRef, children: [
-          /* @__PURE__ */ jsxs2(
-            "button",
-            {
-              type: "button",
-              className: "calendar--picker-btn",
-              onClick: togglePicker,
-              ...{ "aria-expanded": pickerOpen },
-              "aria-haspopup": "true",
-              children: [
-                useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText,
-                /* @__PURE__ */ jsx2("span", { className: "calendar--picker-chevron", children: "\u25BE" })
-              ]
-            }
-          ),
-          pickerOpen && /* @__PURE__ */ jsxs2("div", { className: "calendar--picker-dropdown", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "calendar--picker-year-row", children: [
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  className: "calendar--picker-year-arrow",
-                  onClick: handleYearPrev,
-                  disabled: viewModel.currentYear <= computedMinYear,
-                  "aria-label": "Previous year",
-                  children: "\u2039"
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "text",
-                  className: `calendar--picker-year-input${!yearInputValid ? " invalid" : ""}`,
-                  value: yearInput,
-                  onChange: handleYearInputChange,
-                  onBlur: handleYearInputBlur,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") handleYearInputBlur();
-                  },
-                  "aria-label": "Year"
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  type: "button",
-                  className: "calendar--picker-year-arrow",
-                  onClick: handleYearNext,
-                  disabled: viewModel.currentYear >= computedMaxYear,
-                  "aria-label": "Next year",
-                  children: "\u203A"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "calendar--picker-months", children: (useShortMonthNames ? MONTHS : MONTHS_FULL).map(
-              (month, index) => {
-                const isSelected = index === viewModel.currentMonth;
-                const isCurrentMonth = index === today.getMonth() && viewModel.currentYear === today.getFullYear();
-                return /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: `calendar--picker-month${isSelected ? " selected" : ""}${isCurrentMonth ? " current-month" : ""}`,
-                    onClick: () => handleMonthSelect(index),
-                    children: month
-                  },
-                  month
-                );
-              }
-            ) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: "calendar--today-btn",
-            onClick: handleGoToToday,
-            disabled: actions.isCurrentMonth(),
-            children: "Today"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: "calendar--nav-arrow",
-            onClick: handleNext,
-            "aria-label": "Next month",
-            children: "\u203A"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("table", { className: "calendar--table calendar--table--bordered", children: [
-        /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: viewModel.days.map((day) => /* @__PURE__ */ jsx2("th", { children: day.slice(0, 3) }, day)) }) }),
-        /* @__PURE__ */ jsx2("tbody", { onClick: handleDateClick, children: viewModel.calendarDates.map((week, weekIndex) => /* @__PURE__ */ jsx2("tr", { children: week.map((calendarDate, dayIndex) => {
-          const cellClasses = getCellClasses(calendarDate);
-          return /* @__PURE__ */ jsx2(
-            "td",
-            {
-              className: cellClasses.join(" "),
-              children: calendarDate.date.getDate()
-            },
-            `${weekIndex}-${dayIndex}`
-          );
-        }) }, weekIndex)) })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        DatePopup,
-        {
-          isVisible: !!selectedDate,
-          selectedDate,
-          events: tasks,
-          scheduleDay: viewModel.scheduleDay,
-          popupPositionClass: viewModel.popupPositionClass,
-          onClose: () => engine.clearSelection(),
-          onEventClick,
-          renderEvent,
-          renderNoEvents
-        }
-      )
-    ] }) })
-  ] });
-};
-
-// src/react-native/index.tsx
-var react_native_exports = {};
-__export(react_native_exports, {
-  Calendar: () => Calendar2,
-  CalendarEngine: () => CalendarEngine,
-  DAYS: () => DAYS,
-  DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-  DatePopup: () => DatePopup2,
-  MONTHS: () => MONTHS,
-  MONTHS_FULL: () => MONTHS_FULL,
-  calendarStyles: () => calendarStyles,
-  formatAttendees: () => formatAttendees,
-  formatDateForDisplay: () => formatDateForDisplay,
-  formatTimeRange: () => formatTimeRange,
-  generateCalendarDates: () => generateCalendarDates,
-  generateYears: () => generateYears,
-  getCategoryColor: () => getCategoryColor,
-  getCellClasses: () => getCellClasses,
-  getDefaultEventColor: () => getDefaultEventColor,
-  getEventsForDate: () => getEventsForDate,
-  getMonthYearText: () => getMonthYearText,
-  getPopupPositionClass: () => getPopupPositionClass,
-  hasEvents: () => hasEvents,
-  isSameDay: () => isSameDay,
-  isToday: () => isToday,
-  isValidHexColor: () => isValidHexColor,
-  mergeCategoryColors: () => mergeCategoryColors,
-  normalizeDate: () => normalizeDate,
-  sortEventsByTime: () => sortEventsByTime
-});
-
-// src/react-native/components/Calendar.tsx
-import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import {
-  View as View2,
-  Text as Text2,
-  TouchableOpacity as TouchableOpacity2,
-  ScrollView as ScrollView2,
-  TextInput,
-  Modal as Modal2,
-  Pressable,
-  Dimensions,
-  StyleSheet as StyleSheet2
-} from "react-native";
-
-// src/react-native/components/DatePopup.tsx
-import {
-  Modal,
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  Linking,
-  useWindowDimensions
-} from "react-native";
-
-// src/styles/react-native-styles.ts
-import { StyleSheet } from "react-native";
-var defaultColors = {
-  primary: "#fc8917",
-  secondary: "#fca045",
-  tertiary: "#fdb873",
-  text: "#2c3e50",
-  border: "#dee2e6",
-  todayOutline: "#f7db04",
-  eventIndicator: "#1890ff",
-  background: "#fff",
-  white: "#ffffff",
-  scrollHint: "#fff3e0",
-  scrollHintText: "#f59e0b"
-};
-var getResponsiveStyles = (width, height, customColors) => {
-  const colors = { ...defaultColors, ...customColors };
-  const isTablet = width >= 768;
-  const isSmallPhone = width < 375;
-  const isPhone = width < 768;
-  const cellSize = (width - 60) / 7;
-  const popupWidth = isTablet ? 500 : isPhone ? width * 0.95 : width * 0.9;
-  const popupMaxWidth = isTablet ? 500 : isPhone ? width : 400;
-  const popupMaxHeight = isTablet ? height * 0.8 : height * 0.85;
-  const headerFontSize = isTablet ? 18 : isSmallPhone ? 15 : 16;
-  const eventTitleSize = isTablet ? 16 : isSmallPhone ? 14 : 15;
-  const eventDetailSize = isTablet ? 13 : isSmallPhone ? 11 : 12;
-  const badgeFontSize = isTablet ? 10 : isSmallPhone ? 9 : 9;
-  const eventCardPadding = isTablet ? 14 : isSmallPhone ? 10 : 12;
-  const containerPadding = isTablet ? 15 : isSmallPhone ? 10 : 12;
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: colors.background
-    },
-    titleContainer: {
-      paddingVertical: 20,
-      alignItems: "center"
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: "600",
-      color: colors.text
-    },
-    contentContainer: {
-      marginHorizontal: 20,
-      marginTop: 20
-    },
-    card: {
-      backgroundColor: colors.background,
-      borderRadius: 8,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 3.84,
-      elevation: 5,
-      overflow: "hidden"
-    },
-    cardHeader: {
-      backgroundColor: colors.tertiary,
-      paddingVertical: 15,
-      paddingHorizontal: 20,
-      borderBottomWidth: 1,
-      borderBottomColor: colors.border
-    },
-    cardHeaderText: {
-      fontSize: 18,
-      fontWeight: "500",
-      color: colors.text,
-      textAlign: "center"
-    },
-    table: {
-      backgroundColor: colors.background
-    },
-    tableHeader: {
-      flexDirection: "row",
-      backgroundColor: "rgba(252, 137, 23, 0.1)",
-      borderBottomWidth: 2,
-      borderBottomColor: colors.border
-    },
-    tableHeaderCell: {
-      flex: 1,
-      paddingVertical: 12,
-      borderRightWidth: 1,
-      borderRightColor: colors.border,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    tableHeaderText: {
-      fontSize: 14,
-      fontWeight: "600",
-      color: colors.text
-    },
-    tableRow: {
-      flexDirection: "row",
-      borderBottomWidth: 1,
-      borderBottomColor: colors.border
-    },
-    tableCell: {
-      flex: 1,
-      height: cellSize,
-      borderRightWidth: 1,
-      borderRightColor: colors.border,
-      alignItems: "center",
-      justifyContent: "center",
-      position: "relative"
-    },
-    tableCellText: {
-      fontSize: 16,
-      color: colors.text
-    },
-    cellToday: {
-      borderWidth: 2,
-      borderColor: colors.todayOutline
-    },
-    cellTodayText: {
-      fontWeight: "bold"
-    },
-    cellWithEvents: {
-      backgroundColor: "rgba(252, 160, 69, 0.3)"
-    },
-    eventIndicator: {
-      position: "absolute",
-      bottom: 2,
-      width: 4,
-      height: 4,
-      backgroundColor: colors.eventIndicator,
-      borderRadius: 2
-    },
-    navigationContainer: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      paddingHorizontal: 20,
-      paddingVertical: 20,
-      gap: 15
-    },
-    navigationButton: {
-      flex: 1,
-      backgroundColor: "transparent",
-      borderWidth: 1,
-      borderColor: colors.primary,
-      borderRadius: 6,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    navigationButtonText: {
-      color: colors.primary,
-      fontSize: 16,
-      fontWeight: "500"
-    },
-    navigationButtonPressed: {
-      backgroundColor: colors.primary
-    },
-    navigationButtonTextPressed: {
-      color: colors.white
-    },
-    jumpForm: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal: 20,
-      paddingBottom: 20,
-      gap: 10
-    },
-    jumpLabel: {
-      fontSize: 18,
-      fontWeight: "300",
-      color: colors.text
-    },
-    jumpSelect: {
-      borderWidth: 1,
-      borderColor: colors.border,
-      borderRadius: 6,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      backgroundColor: colors.background,
-      minWidth: 80
-    },
-    jumpSelectText: {
-      fontSize: 16,
-      color: colors.text,
-      textAlign: "center"
-    },
-    // RESPONSIVE POPUP STYLES
-    popupOverlay: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: 1e3
-    },
-    popup: {
-      backgroundColor: colors.white,
-      borderRadius: 8,
-      width: popupWidth,
-      maxWidth: popupMaxWidth,
-      maxHeight: popupMaxHeight,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 4
-      },
-      shadowOpacity: 0.3,
-      shadowRadius: 6,
-      elevation: 8,
-      overflow: "hidden"
-    },
-    popupHeader: {
-      backgroundColor: colors.primary,
-      paddingVertical: isTablet ? 15 : 12,
-      paddingHorizontal: isTablet ? 20 : 15,
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center"
-    },
-    popupHeaderText: {
-      fontSize: headerFontSize,
-      fontWeight: "600",
-      color: colors.white,
-      flex: 1
-    },
-    popupCloseButton: {
-      width: isTablet ? 32 : isSmallPhone ? 26 : 28,
-      height: isTablet ? 32 : isSmallPhone ? 26 : 28,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
-      borderRadius: 16,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    popupCloseText: {
-      color: colors.white,
-      fontSize: isTablet ? 20 : isSmallPhone ? 16 : 18,
-      fontWeight: "bold"
-    },
-    scrollHint: {
-      backgroundColor: colors.scrollHint,
-      paddingVertical: isTablet ? 10 : 8,
-      paddingHorizontal: containerPadding,
-      alignItems: "center"
-    },
-    scrollHintText: {
-      color: colors.scrollHintText,
-      fontSize: isTablet ? 13 : isSmallPhone ? 11 : 12,
-      fontWeight: "500"
-    },
-    eventsContainer: {
-      maxHeight: popupMaxHeight - 150
-    },
-    eventsList: {
-      padding: containerPadding,
-      gap: isTablet ? 12 : 10
-    },
-    eventCard: {
-      backgroundColor: colors.white,
-      borderRadius: 6,
-      padding: eventCardPadding,
-      borderLeftWidth: 4,
-      borderLeftColor: colors.primary,
-      borderWidth: 1,
-      borderColor: "#e5e7eb",
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 1
-      },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1
-    },
-    eventHeader: {
-      marginBottom: 10
-    },
-    eventTitle: {
-      fontSize: eventTitleSize,
-      color: "#1f2937",
-      fontWeight: "600",
-      marginBottom: 8
-    },
-    eventBadges: {
-      flexDirection: "row",
-      gap: 6,
-      flexWrap: "wrap"
-    },
-    badge: {
-      paddingHorizontal: isTablet ? 8 : 6,
-      paddingVertical: isTablet ? 3 : 2,
-      borderRadius: 10
-    },
-    badgeText: {
-      fontSize: badgeFontSize,
-      fontWeight: "600",
-      textTransform: "uppercase",
-      letterSpacing: 0.3
-    },
-    priorityBadgeHigh: {
-      backgroundColor: "#fee2e2"
-    },
-    priorityBadgeMedium: {
-      backgroundColor: "#fef3c7"
-    },
-    priorityBadgeLow: {
-      backgroundColor: "#dcfce7"
-    },
-    statusBadgeCompleted: {
-      backgroundColor: "#d1fae5"
-    },
-    statusBadgeCancelled: {
-      backgroundColor: "#fee2e2"
-    },
-    statusBadgeTentative: {
-      backgroundColor: "#e0e7ff"
-    },
-    categoryBadgeWork: {
-      backgroundColor: "#dbeafe"
-    },
-    categoryBadgePersonal: {
-      backgroundColor: "#fef3c7"
-    },
-    categoryBadgeMeeting: {
-      backgroundColor: "#d1fae5"
-    },
-    categoryBadgeDeadline: {
-      backgroundColor: "#fee2e2"
-    },
-    categoryBadgeAppointment: {
-      backgroundColor: "#fef3c7"
-    },
-    categoryBadgeOther: {
-      backgroundColor: "#f3f4f6"
-    },
-    eventTime: {
-      flexDirection: isSmallPhone ? "column" : "row",
-      gap: isSmallPhone ? 2 : 8,
-      marginBottom: 6
-    },
-    eventTimeLabel: {
-      fontSize: eventDetailSize,
-      fontWeight: "600",
-      color: "#6b7280",
-      minWidth: isSmallPhone ? void 0 : isTablet ? 80 : 70,
-      textAlign: "left"
-    },
-    eventTimeValue: {
-      fontSize: eventDetailSize,
-      color: "#374151",
-      flex: 1
-    },
-    eventDescription: {
-      color: "#4b5563",
-      fontSize: eventDetailSize,
-      lineHeight: isTablet ? 20 : 18,
-      marginTop: 10,
-      marginBottom: 10,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      backgroundColor: "#f9fafb",
-      borderLeftWidth: 2,
-      borderLeftColor: "#e5e7eb",
-      borderRadius: 4,
-      textAlign: "left"
-    },
-    eventUrlContainer: {
-      marginTop: 8
-    },
-    eventLink: {
-      color: "#2563eb",
-      fontSize: eventDetailSize,
-      fontWeight: "500"
-    },
-    eventTags: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: 6,
-      marginTop: 8
-    },
-    eventTag: {
-      paddingHorizontal: isTablet ? 10 : 8,
-      paddingVertical: isTablet ? 3 : 2,
-      backgroundColor: "#e0f2fe",
-      borderRadius: 12
-    },
-    eventTagText: {
-      fontSize: isTablet ? 11 : 10,
-      color: "#0369a1",
-      fontWeight: "500"
-    },
-    noEventsMessage: {
-      padding: containerPadding,
-      paddingVertical: isTablet ? 30 : 20,
-      alignItems: "center"
-    },
-    noEventsText: {
-      fontSize: isTablet ? 14 : 13,
-      color: "#6b7280",
-      textAlign: "center"
-    }
-  });
-};
-var calendarStyles = getResponsiveStyles(375, 667);
-
-// src/react-native/components/DatePopup.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var PriorityBadge2 = ({
-  priority,
-  styles
-}) => {
-  if (!priority) return null;
-  const priorityConfig = {
-    high: { label: "HIGH", style: styles.priorityBadgeHigh },
-    medium: { label: "MEDIUM", style: styles.priorityBadgeMedium },
-    low: { label: "LOW", style: styles.priorityBadgeLow }
-  };
-  const config = priorityConfig[priority];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx3(View, { style: [styles.badge, config.style], children: /* @__PURE__ */ jsx3(Text, { style: styles.badgeText, children: config.label }) });
-};
-var StatusBadge2 = ({
-  status,
-  styles
-}) => {
-  if (!status || status === "scheduled") return null;
-  const statusConfig = {
-    completed: { label: "COMPLETED", style: styles.statusBadgeCompleted },
-    cancelled: { label: "CANCELLED", style: styles.statusBadgeCancelled },
-    tentative: { label: "TENTATIVE", style: styles.statusBadgeTentative }
-  };
-  const config = statusConfig[status];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx3(View, { style: [styles.badge, config.style], children: /* @__PURE__ */ jsx3(Text, { style: styles.badgeText, children: config.label }) });
-};
-var CategoryBadge2 = ({
-  category,
-  styles
-}) => {
-  if (!category) return null;
-  const categoryConfig = {
-    work: { label: "WORK", style: styles.categoryBadgeWork },
-    personal: { label: "PERSONAL", style: styles.categoryBadgePersonal },
-    meeting: { label: "MEETING", style: styles.categoryBadgeMeeting },
-    deadline: { label: "DEADLINE", style: styles.categoryBadgeDeadline },
-    appointment: {
-      label: "APPOINTMENT",
-      style: styles.categoryBadgeAppointment
-    },
-    other: { label: "OTHER", style: styles.categoryBadgeOther }
-  };
-  const config = categoryConfig[category];
-  if (!config) return null;
-  return /* @__PURE__ */ jsx3(View, { style: [styles.badge, config.style], children: /* @__PURE__ */ jsx3(Text, { style: styles.badgeText, children: config.label }) });
-};
-var DatePopup2 = ({
-  visible,
-  selectedDate,
-  events,
-  scheduleDay,
-  onClose,
-  onEventClick,
-  renderEvent,
-  renderNoEvents,
-  showCloseButton = true
-}) => {
-  const { width, height } = useWindowDimensions();
-  const calendarStyles2 = getResponsiveStyles(width, height);
-  if (!selectedDate) return null;
-  const showScrollHint = events.length > 3;
-  const handleEventClick = (event) => {
-    onEventClick?.(event);
-  };
-  const defaultRenderEvent = (event) => {
-    const timeRange = formatTimeRange(event);
-    const attendeesList = formatAttendees(event.attendees);
-    const handleUrlPress = () => {
-      if (event.url) {
-        Linking.openURL(event.url).catch(
-          (err) => console.error("Failed to open URL:", err)
+      /**
+       * Subscribe to state changes
+       */
+      subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+      }
+      /**
+       * Notify all listeners of state changes
+       */
+      notify() {
+        this.listeners.forEach((listener) => listener());
+      }
+      /**
+       * Get current state
+       */
+      getState() {
+        return { ...this.state };
+      }
+      /**
+       * Get view model with computed properties
+       */
+      getViewModel() {
+        const calendarDates = generateCalendarDates(
+          this.state.currentYear,
+          this.state.currentMonth,
+          this.config.events,
+          this.config.weekStartsOn
         );
+        return {
+          ...this.state,
+          months: MONTHS,
+          days: DAYS,
+          years: generateYears(this.config.minYear, this.config.maxYear),
+          monthAndYearText: getMonthYearText(
+            this.state.currentYear,
+            this.state.currentMonth
+          ),
+          scheduleDay: this.state.selectedDate ? formatDateForDisplay(this.state.selectedDate) : "",
+          calendarDates,
+          popupPositionClass: getPopupPositionClass(this.state.selectedDayIndex)
+        };
       }
-    };
-    const eventContent = /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventHeader, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTitle, children: event.name }),
-        /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventBadges, children: [
-          /* @__PURE__ */ jsx3(CategoryBadge2, { category: event.category, styles: calendarStyles2 }),
-          /* @__PURE__ */ jsx3(PriorityBadge2, { priority: event.priority, styles: calendarStyles2 }),
-          /* @__PURE__ */ jsx3(StatusBadge2, { status: event.status, styles: calendarStyles2 })
-        ] })
-      ] }),
-      timeRange && /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventTime, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeLabel, children: "Time:" }),
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeValue, children: timeRange })
-      ] }),
-      event.description && /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventDescription, children: event.description }),
-      event.location && /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventTime, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeLabel, children: "Location:" }),
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeValue, children: event.location })
-      ] }),
-      attendeesList && /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventTime, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeLabel, children: "Attendees:" }),
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeValue, children: attendeesList })
-      ] }),
-      event.organizer && /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventTime, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeLabel, children: "Organizer:" }),
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeValue, children: event.organizer })
-      ] }),
-      event.notes && /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.eventTime, children: [
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeLabel, children: "Notes:" }),
-        /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTimeValue, children: event.notes })
-      ] }),
-      event.url && /* @__PURE__ */ jsx3(
-        TouchableOpacity,
-        {
-          onPress: handleUrlPress,
-          style: calendarStyles2.eventUrlContainer,
-          children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventLink, children: "View Details \u2192" })
+      /**
+       * Get actions object
+       */
+      getActions() {
+        return {
+          next: this.next.bind(this),
+          previous: this.previous.bind(this),
+          jump: this.jump.bind(this),
+          goToToday: this.goToToday.bind(this),
+          isCurrentMonth: this.isCurrentMonth.bind(this),
+          selectDate: this.selectDate.bind(this),
+          updateTasks: this.updateTasks.bind(this)
+        };
+      }
+      /**
+       * Navigate to next month
+       */
+      next() {
+        if (this.state.currentMonth === 11) {
+          this.state.currentMonth = 0;
+          this.state.currentYear++;
+        } else {
+          this.state.currentMonth++;
         }
-      ),
-      event.tags && event.tags.length > 0 && /* @__PURE__ */ jsx3(View, { style: calendarStyles2.eventTags, children: event.tags.map((tag, idx) => /* @__PURE__ */ jsx3(View, { style: calendarStyles2.eventTag, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.eventTagText, children: tag }) }, idx)) })
-    ] });
-    if (onEventClick) {
-      return /* @__PURE__ */ jsx3(
-        TouchableOpacity,
-        {
-          style: [
-            calendarStyles2.eventCard,
-            event.color && { borderLeftColor: event.color }
-          ],
-          onPress: () => handleEventClick(event),
-          activeOpacity: 0.7,
-          children: eventContent
-        },
-        event.id || event.name
-      );
-    }
-    return /* @__PURE__ */ jsx3(
-      View,
-      {
-        style: [
-          calendarStyles2.eventCard,
-          event.color && { borderLeftColor: event.color }
-        ],
-        children: eventContent
-      },
-      event.id || event.name
-    );
-  };
-  const defaultRenderNoEvents = () => /* @__PURE__ */ jsx3(View, { style: calendarStyles2.noEventsMessage, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.noEventsText, children: "No events scheduled for this day." }) });
-  return /* @__PURE__ */ jsx3(
-    Modal,
-    {
-      visible,
-      transparent: true,
-      animationType: "fade",
-      onRequestClose: onClose,
-      children: /* @__PURE__ */ jsx3(
-        TouchableOpacity,
-        {
-          style: calendarStyles2.popupOverlay,
-          activeOpacity: 1,
-          onPress: onClose,
-          children: /* @__PURE__ */ jsxs3(
-            TouchableOpacity,
-            {
-              style: calendarStyles2.popup,
-              activeOpacity: 1,
-              onPress: (e) => e.stopPropagation(),
-              children: [
-                /* @__PURE__ */ jsxs3(View, { style: calendarStyles2.popupHeader, children: [
-                  /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.popupHeaderText, children: scheduleDay }),
-                  showCloseButton && /* @__PURE__ */ jsx3(
-                    TouchableOpacity,
-                    {
-                      style: calendarStyles2.popupCloseButton,
-                      onPress: onClose,
-                      accessibilityLabel: "Close",
-                      children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.popupCloseText, children: "\u2715" })
-                    }
-                  )
-                ] }),
-                showScrollHint && /* @__PURE__ */ jsx3(View, { style: calendarStyles2.scrollHint, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles2.scrollHintText, children: "\u2193 Scroll to see more events \u2193" }) }),
-                /* @__PURE__ */ jsx3(
-                  ScrollView,
-                  {
-                    style: calendarStyles2.eventsContainer,
-                    showsVerticalScrollIndicator: true,
-                    children: events.length > 0 ? /* @__PURE__ */ jsx3(View, { style: calendarStyles2.eventsList, children: events.map(
-                      (event) => renderEvent ? renderEvent(event) : defaultRenderEvent(event)
-                    ) }) : renderNoEvents ? renderNoEvents() : defaultRenderNoEvents()
-                  }
-                )
-              ]
-            }
-          )
+        this.state.selectedDate = null;
+        this.state.selectedDayIndex = null;
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Navigate to previous month
+       */
+      previous() {
+        if (this.state.currentMonth === 0) {
+          this.state.currentMonth = 11;
+          this.state.currentYear--;
+        } else {
+          this.state.currentMonth--;
         }
-      )
-    }
-  );
-};
-
-// src/react-native/components/Calendar.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Calendar2 = ({
-  events,
-  initialDate,
-  minYear,
-  maxYear,
-  weekStartsOn = 0,
-  useShortMonthNames = false,
-  onDateSelect,
-  onEventClick,
-  onMonthChange,
-  style,
-  containerStyle,
-  headerStyle,
-  headerTextStyle,
-  cellStyle,
-  cellTextStyle,
-  renderEvent,
-  renderNoEvents,
-  title,
-  showCloseButton = true,
-  theme
-}) => {
-  const engine = useMemo2(
-    () => new CalendarEngine({
-      events,
-      initialDate,
-      minYear,
-      maxYear,
-      weekStartsOn
-    }),
-    [events, initialDate, minYear, maxYear, weekStartsOn]
-  );
-  const themeColors = useMemo2(() => {
-    if (!theme) return void 0;
-    return {
-      primary: theme.primary,
-      secondary: theme.secondary,
-      tertiary: theme.tertiary,
-      text: theme.textColor,
-      border: theme.borderColor,
-      todayOutline: theme.todayOutline,
-      eventIndicator: theme.eventIndicator,
-      background: theme.background
-    };
-  }, [theme]);
-  const calendarStyles2 = useMemo2(() => {
-    const { width, height } = Dimensions.get("window");
-    return getResponsiveStyles(width, height, themeColors);
-  }, [themeColors]);
-  const [, forceUpdate] = useState2({});
-  const rerender = useCallback2(() => forceUpdate({}), []);
-  const [pickerOpen, setPickerOpen] = useState2(false);
-  const [yearInput, setYearInput] = useState2("");
-  const [yearInputValid, setYearInputValid] = useState2(true);
-  const today = /* @__PURE__ */ new Date();
-  const todayMonth = today.getMonth();
-  const todayYear = today.getFullYear();
-  const computedMinYear = minYear ?? todayYear - 30;
-  const computedMaxYear = maxYear ?? todayYear + 10;
-  useEffect2(() => {
-    const unsubscribe = engine.subscribe(rerender);
-    return unsubscribe;
-  }, [engine, rerender]);
-  useEffect2(() => {
-    engine.updateEvents(events);
-  }, [engine, events]);
-  useEffect2(() => {
-    return () => {
-      engine.destroy();
-    };
-  }, [engine]);
-  const viewModel = engine.getViewModel();
-  const actions = engine.getActions();
-  const { selectedDate, tasks } = viewModel;
-  const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
-  const handleDatePress = (date, dayIndex) => {
-    engine.handleDateClick(date, dayIndex);
-    onDateSelect?.(date);
-  };
-  const handleNext = () => {
-    actions.next();
-    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
-  };
-  const handlePrevious = () => {
-    actions.previous();
-    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
-  };
-  const handleGoToToday = () => {
-    actions.goToToday();
-    setPickerOpen(false);
-    onMonthChange?.(todayYear, todayMonth);
-  };
-  const togglePicker = () => {
-    const newOpen = !pickerOpen;
-    setPickerOpen(newOpen);
-    if (newOpen) {
-      setYearInput(String(viewModel.currentYear));
-      setYearInputValid(true);
-    }
-  };
-  const handleYearInputChange = (value) => {
-    if (value === "" || /^\d+$/.test(value)) {
-      setYearInput(value);
-      const year = parseInt(value, 10);
-      setYearInputValid(
-        value === "" || year >= computedMinYear && year <= computedMaxYear
-      );
-    }
-  };
-  const handleYearInputSubmit = () => {
-    const year = parseInt(yearInput, 10);
-    if (isNaN(year) || year < computedMinYear || year > computedMaxYear) {
-      setYearInput(String(viewModel.currentYear));
-      setYearInputValid(true);
-    } else {
-      actions.jump(year, viewModel.currentMonth);
-      onMonthChange?.(year, viewModel.currentMonth);
-    }
-  };
-  const handleYearPrev = () => {
-    const newYear = viewModel.currentYear - 1;
-    if (newYear >= computedMinYear) {
-      actions.jump(newYear, viewModel.currentMonth);
-      setYearInput(String(newYear));
-      onMonthChange?.(newYear, viewModel.currentMonth);
-    }
-  };
-  const handleYearNext = () => {
-    const newYear = viewModel.currentYear + 1;
-    if (newYear <= computedMaxYear) {
-      actions.jump(newYear, viewModel.currentMonth);
-      setYearInput(String(newYear));
-      onMonthChange?.(newYear, viewModel.currentMonth);
-    }
-  };
-  const handleMonthSelect = (month) => {
-    actions.jump(viewModel.currentYear, month);
-    setPickerOpen(false);
-    onMonthChange?.(viewModel.currentYear, month);
-  };
-  const closePopup = () => {
-    engine.clearSelection();
-  };
-  return /* @__PURE__ */ jsxs4(ScrollView2, { style: [calendarStyles2.container, containerStyle], children: [
-    title && /* @__PURE__ */ jsx4(View2, { style: calendarStyles2.titleContainer, children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles2.title, children: title }) }),
-    /* @__PURE__ */ jsx4(View2, { style: [calendarStyles2.contentContainer, style], children: /* @__PURE__ */ jsxs4(View2, { style: calendarStyles2.card, children: [
-      /* @__PURE__ */ jsxs4(View2, { style: [pickerStyles.navHeader, headerStyle], children: [
-        /* @__PURE__ */ jsx4(
-          TouchableOpacity2,
-          {
-            style: pickerStyles.navArrow,
-            onPress: handlePrevious,
-            children: /* @__PURE__ */ jsx4(Text2, { style: pickerStyles.navArrowText, children: "\u2039" })
-          }
-        ),
-        /* @__PURE__ */ jsxs4(
-          TouchableOpacity2,
-          {
-            style: pickerStyles.pickerBtn,
-            onPress: togglePicker,
-            children: [
-              /* @__PURE__ */ jsx4(Text2, { style: [pickerStyles.pickerBtnText, headerTextStyle], children: useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText }),
-              /* @__PURE__ */ jsx4(Text2, { style: pickerStyles.chevron, children: "\u25BC" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          TouchableOpacity2,
-          {
-            style: [
-              pickerStyles.todayBtn,
-              isCurrentMonth && pickerStyles.todayBtnDisabled
-            ],
-            onPress: handleGoToToday,
-            disabled: isCurrentMonth,
-            children: /* @__PURE__ */ jsx4(
-              Text2,
-              {
-                style: [
-                  pickerStyles.todayBtnText,
-                  isCurrentMonth && pickerStyles.todayBtnTextDisabled
-                ],
-                children: "Today"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          TouchableOpacity2,
-          {
-            style: pickerStyles.navArrow,
-            onPress: handleNext,
-            children: /* @__PURE__ */ jsx4(Text2, { style: pickerStyles.navArrowText, children: "\u203A" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx4(
-        Modal2,
-        {
-          visible: pickerOpen,
-          transparent: true,
-          animationType: "fade",
-          onRequestClose: () => setPickerOpen(false),
-          children: /* @__PURE__ */ jsx4(
-            Pressable,
-            {
-              style: pickerStyles.modalOverlay,
-              onPress: () => setPickerOpen(false),
-              children: /* @__PURE__ */ jsxs4(
-                Pressable,
-                {
-                  style: pickerStyles.pickerDropdown,
-                  onPress: (e) => e.stopPropagation(),
-                  children: [
-                    /* @__PURE__ */ jsxs4(View2, { style: pickerStyles.yearRow, children: [
-                      /* @__PURE__ */ jsx4(
-                        TouchableOpacity2,
-                        {
-                          style: pickerStyles.yearArrow,
-                          onPress: handleYearPrev,
-                          disabled: viewModel.currentYear <= computedMinYear,
-                          children: /* @__PURE__ */ jsx4(
-                            Text2,
-                            {
-                              style: [
-                                pickerStyles.yearArrowText,
-                                viewModel.currentYear <= computedMinYear && pickerStyles.yearArrowDisabled
-                              ],
-                              children: "\u2039"
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4(
-                        TextInput,
-                        {
-                          style: [
-                            pickerStyles.yearInput,
-                            !yearInputValid && pickerStyles.yearInputInvalid
-                          ],
-                          value: yearInput,
-                          onChangeText: handleYearInputChange,
-                          onSubmitEditing: handleYearInputSubmit,
-                          onBlur: handleYearInputSubmit,
-                          keyboardType: "number-pad",
-                          maxLength: 4
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4(
-                        TouchableOpacity2,
-                        {
-                          style: pickerStyles.yearArrow,
-                          onPress: handleYearNext,
-                          disabled: viewModel.currentYear >= computedMaxYear,
-                          children: /* @__PURE__ */ jsx4(
-                            Text2,
-                            {
-                              style: [
-                                pickerStyles.yearArrowText,
-                                viewModel.currentYear >= computedMaxYear && pickerStyles.yearArrowDisabled
-                              ],
-                              children: "\u203A"
-                            }
-                          )
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx4(View2, { style: pickerStyles.monthGrid, children: (useShortMonthNames ? MONTHS : MONTHS_FULL).map(
-                      (month, index) => {
-                        const isSelected = index === viewModel.currentMonth;
-                        const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
-                        return /* @__PURE__ */ jsx4(
-                          TouchableOpacity2,
-                          {
-                            style: [
-                              pickerStyles.monthBtn,
-                              isSelected && pickerStyles.monthBtnSelected,
-                              isCurrent && pickerStyles.monthBtnCurrent
-                            ],
-                            onPress: () => handleMonthSelect(index),
-                            children: /* @__PURE__ */ jsx4(
-                              Text2,
-                              {
-                                style: [
-                                  pickerStyles.monthBtnText,
-                                  isSelected && pickerStyles.monthBtnTextSelected
-                                ],
-                                children: month
-                              }
-                            )
-                          },
-                          month
-                        );
-                      }
-                    ) })
-                  ]
-                }
-              )
-            }
-          )
+        this.state.selectedDate = null;
+        this.state.selectedDayIndex = null;
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Jump to specific month and year
+       */
+      jump(year, month) {
+        this.state.currentYear = year;
+        this.state.currentMonth = month;
+        this.state.selectedDate = null;
+        this.state.selectedDayIndex = null;
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Navigate to current month (today)
+       */
+      goToToday() {
+        const today = /* @__PURE__ */ new Date();
+        this.state.currentYear = today.getFullYear();
+        this.state.currentMonth = today.getMonth();
+        this.state.selectedDate = null;
+        this.state.selectedDayIndex = null;
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Check if currently viewing today's month
+       */
+      isCurrentMonth() {
+        const today = /* @__PURE__ */ new Date();
+        return this.state.currentYear === today.getFullYear() && this.state.currentMonth === today.getMonth();
+      }
+      /**
+       * Select a specific date
+       */
+      selectDate(date, dayIndex) {
+        this.state.selectedDate = date;
+        this.state.selectedDayIndex = dayIndex ?? null;
+        this.state.currentDate = date.getDate();
+        this.state.currentMonth = date.getMonth();
+        this.state.currentYear = date.getFullYear();
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Update tasks for the currently selected date
+       */
+      updateTasks() {
+        if (!this.state.selectedDate) {
+          this.state.tasks = [];
+          return;
         }
-      ),
-      /* @__PURE__ */ jsxs4(View2, { style: calendarStyles2.table, children: [
-        /* @__PURE__ */ jsx4(View2, { style: calendarStyles2.tableHeader, children: viewModel.days.map((day) => /* @__PURE__ */ jsx4(View2, { style: calendarStyles2.tableHeaderCell, children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles2.tableHeaderText, children: day.slice(0, 3) }) }, day)) }),
-        viewModel.calendarDates.map((week, weekIndex) => /* @__PURE__ */ jsx4(View2, { style: calendarStyles2.tableRow, children: week.map((calendarDate, dayIndex) => {
-          const cellClasses = getCellClasses(calendarDate);
-          const isToday2 = cellClasses.includes(
-            "schedule--current--exam"
-          );
-          const hasEvents2 = cellClasses.includes("has--event");
-          const isOtherMonth = cellClasses.includes("other-month");
-          return /* @__PURE__ */ jsxs4(
-            TouchableOpacity2,
-            {
-              style: [
-                calendarStyles2.tableCell,
-                cellStyle,
-                isToday2 && calendarStyles2.cellToday,
-                hasEvents2 && calendarStyles2.cellWithEvents,
-                isOtherMonth && pickerStyles.cellOtherMonth
-              ],
-              onPress: () => {
-                handleDatePress(calendarDate.date, dayIndex);
-              },
-              children: [
-                /* @__PURE__ */ jsx4(
-                  Text2,
-                  {
-                    style: [
-                      calendarStyles2.tableCellText,
-                      cellTextStyle,
-                      isToday2 && calendarStyles2.cellTodayText,
-                      isOtherMonth && pickerStyles.cellOtherMonthText
-                    ],
-                    children: calendarDate.date.getDate()
-                  }
-                ),
-                hasEvents2 && /* @__PURE__ */ jsx4(View2, { style: calendarStyles2.eventIndicator })
-              ]
-            },
-            `${weekIndex}-${dayIndex}`
-          );
-        }) }, weekIndex))
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx4(
-      DatePopup2,
-      {
-        visible: !!selectedDate,
-        selectedDate,
-        events: tasks,
-        scheduleDay: viewModel.scheduleDay,
-        onClose: closePopup,
-        onEventClick,
-        renderEvent,
-        renderNoEvents,
-        showCloseButton
+        this.state.tasks = getEventsForDate(
+          this.config.events,
+          this.state.selectedDate
+        );
       }
-    )
-  ] });
-};
-var pickerStyles = StyleSheet2.create({
-  navHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    backgroundColor: "#f8f9fa",
-    borderBottomWidth: 2,
-    borderBottomColor: "#dee2e6",
-    gap: 8
-  },
-  navArrow: {
-    width: 36,
-    height: 36,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: "#dee2e6",
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  navArrowText: {
-    fontSize: 20,
-    color: "#2c3e50"
-  },
-  pickerBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: "#dee2e6",
-    backgroundColor: "#fff",
-    gap: 8
-  },
-  pickerBtnText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#2c3e50"
-  },
-  chevron: {
-    fontSize: 10,
-    color: "#2c3e50"
-  },
-  todayBtn: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: "#dee2e6",
-    backgroundColor: "#fff"
-  },
-  todayBtnDisabled: {
-    opacity: 0.5
-  },
-  todayBtnText: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#2c3e50"
-  },
-  todayBtnTextDisabled: {
-    color: "#9ca3af"
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  pickerDropdown: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    minWidth: 280,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 20,
-    elevation: 10
-  },
-  yearRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 12,
-    marginBottom: 16,
-    paddingBottom: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#dee2e6"
-  },
-  yearArrow: {
-    width: 32,
-    height: 32,
-    borderRadius: 6,
-    backgroundColor: "#f3f4f6",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  yearArrowText: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#2c3e50"
-  },
-  yearArrowDisabled: {
-    opacity: 0.3
-  },
-  yearInput: {
-    width: 80,
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: "#dee2e6",
-    textAlign: "center",
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#2c3e50"
-  },
-  yearInputInvalid: {
-    borderColor: "#ef4444",
-    backgroundColor: "#fef2f2"
-  },
-  monthGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8
-  },
-  monthBtn: {
-    width: "30%",
-    paddingVertical: 10,
-    borderRadius: 6,
-    backgroundColor: "#f9fafb",
-    alignItems: "center"
-  },
-  monthBtnSelected: {
-    backgroundColor: "#fc8917"
-  },
-  monthBtnCurrent: {
-    borderWidth: 1,
-    borderColor: "#fc8917"
-  },
-  monthBtnText: {
-    fontSize: 14,
-    fontWeight: "500",
-    color: "#2c3e50"
-  },
-  monthBtnTextSelected: {
-    color: "#fff",
-    fontWeight: "600"
-  },
-  cellOtherMonth: {
-    backgroundColor: "#f9fafb"
-  },
-  cellOtherMonthText: {
-    color: "#9ca3af"
+      /**
+       * Update events configuration
+       */
+      updateEvents(events) {
+        this.config.events = events;
+        this.updateTasks();
+        this.notify();
+      }
+      /**
+       * Handle date cell click
+       */
+      handleDateClick(date, dayIndex) {
+        this.selectDate(date, dayIndex);
+      }
+      /**
+       * Check if date has events
+       */
+      hasEventsForDate(date) {
+        return getEventsForDate(this.config.events, date).length > 0;
+      }
+      /**
+       * Get events for a specific date
+       */
+      getEventsForDate(date) {
+        return getEventsForDate(this.config.events, date);
+      }
+      /**
+       * Clear selected date
+       */
+      clearSelection() {
+        this.state.selectedDate = null;
+        this.state.selectedDayIndex = null;
+        this.state.tasks = [];
+        this.notify();
+      }
+      /**
+       * Get category color (with custom colors support)
+       */
+      getCategoryColor(category) {
+        if (!category) return "#fc8917";
+        return getCategoryColor(category, this.categoryColors);
+      }
+      /**
+       * Update category colors dynamically
+       */
+      updateCategoryColors(colors) {
+        this.categoryColors = mergeCategoryColors(colors);
+        this.notify();
+      }
+      /**
+       * Get all category colors
+       */
+      getCategoryColors() {
+        return { ...this.categoryColors };
+      }
+      /**
+       * Register a new category with color
+       */
+      registerCategory(name, color) {
+        this.categoryColors[name] = color;
+        this.notify();
+      }
+      /**
+       * Destroy the engine and cleanup listeners
+       */
+      destroy() {
+        this.listeners.clear();
+      }
+    };
   }
 });
 
-// src/vanilla/index.ts
-var vanilla_exports = {};
-__export(vanilla_exports, {
-  CalendarEngine: () => CalendarEngine,
-  DAYS: () => DAYS,
-  DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-  MONTHS: () => MONTHS,
-  MONTHS_FULL: () => MONTHS_FULL,
-  VanillaCalendar: () => VanillaCalendar,
-  createCalendar: () => createCalendar,
-  formatAttendees: () => formatAttendees,
-  formatDateForDisplay: () => formatDateForDisplay,
-  formatTimeRange: () => formatTimeRange,
-  generateCalendarDates: () => generateCalendarDates,
-  generateYears: () => generateYears,
-  getCategoryColor: () => getCategoryColor,
-  getCellClasses: () => getCellClasses,
-  getDefaultEventColor: () => getDefaultEventColor,
-  getEventsForDate: () => getEventsForDate,
-  getMonthYearText: () => getMonthYearText,
-  getPopupPositionClass: () => getPopupPositionClass,
-  hasEvents: () => hasEvents,
-  isSameDay: () => isSameDay,
-  isToday: () => isToday,
-  isValidHexColor: () => isValidHexColor,
-  mergeCategoryColors: () => mergeCategoryColors,
-  normalizeDate: () => normalizeDate,
-  sortEventsByTime: () => sortEventsByTime
+// src/core/index.ts
+var init_core = __esm({
+  "src/core/index.ts"() {
+    "use strict";
+    init_types();
+    init_utils();
+    init_calendar_engine();
+    init_utils();
+  }
 });
 
-// src/vanilla/Calendar.ts
-var VanillaCalendar = class {
-  constructor(props) {
-    this.unsubscribe = null;
-    this.pickerOpen = false;
-    this.yearInput = "";
-    this.yearInputValid = true;
-    this.clickOutsideHandler = null;
-    this.delegatedClickHandler = null;
-    this.delegatedInputHandler = null;
-    this.delegatedBlurHandler = null;
-    this.delegatedKeydownHandler = null;
-    this.listenersAttached = false;
-    this.props = props;
-    if (typeof props.container === "string") {
-      const element = document.querySelector(props.container);
-      if (!element) {
-        throw new Error(`Container element "${props.container}" not found`);
-      }
-      this.container = element;
-    } else {
-      this.container = props.container;
-    }
-    this.engine = new CalendarEngine({
-      events: props.events,
-      initialDate: props.initialDate,
-      minYear: props.minYear,
-      maxYear: props.maxYear,
-      weekStartsOn: props.weekStartsOn
-    });
-    this.actions = this.engine.getActions();
-    this.applyTheme();
-    this.init();
-  }
-  applyTheme() {
-    if (this.props.theme) {
-      const root = document.documentElement;
-      const theme = this.props.theme;
-      if (theme.primary)
-        root.style.setProperty("--calendar-primary-color", theme.primary);
-      if (theme.secondary)
-        root.style.setProperty("--calendar-secondary-color", theme.secondary);
-      if (theme.tertiary)
-        root.style.setProperty("--calendar-tertiary-color", theme.tertiary);
-      if (theme.textColor)
-        root.style.setProperty("--calendar-text-color", theme.textColor);
-      if (theme.textLight)
-        root.style.setProperty("--calendar-text-light", theme.textLight);
-      if (theme.background)
-        root.style.setProperty("--calendar-background", theme.background);
-      if (theme.cellHover)
-        root.style.setProperty("--calendar-cell-hover", theme.cellHover);
-      if (theme.borderColor)
-        root.style.setProperty("--calendar-border-color", theme.borderColor);
-      if (theme.todayOutline)
-        root.style.setProperty("--calendar-today-outline", theme.todayOutline);
-      if (theme.selectedBg)
-        root.style.setProperty("--calendar-selected-bg", theme.selectedBg);
-      if (theme.eventIndicator)
-        root.style.setProperty(
-          "--calendar-event-indicator",
-          theme.eventIndicator
-        );
-    }
-  }
-  init() {
-    this.container.classList.add("kalendly-calendar");
-    if (this.props.className) {
-      this.container.classList.add(this.props.className);
-    }
-    this.unsubscribe = this.engine.subscribe(() => {
-      this.render();
-    });
-    this.render();
+// src/web-components/CalendarElement.ts
+var CalendarElement_exports = {};
+__export(CalendarElement_exports, {
+  CalendarElement: () => CalendarElement,
+  defineCalendarElement: () => defineCalendarElement
+});
+function defineCalendarElement(tagName = "kal-calendar") {
+  if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
+    customElements.define(tagName, CalendarElement);
   }
-  render() {
-    const viewModel = this.engine.getViewModel();
-    const defaultRenderEvent = (event) => {
-      const timeRange = formatTimeRange(event);
-      const attendeesList = formatAttendees(event.attendees);
-      let borderColor = event.color || "#3b82f6";
-      if (event.category) {
-        borderColor = this.engine.getCategoryColor(event.category);
+}
+var isSameDay2, CalendarElement;
+var init_CalendarElement = __esm({
+  "src/web-components/CalendarElement.ts"() {
+    "use strict";
+    init_core();
+    isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    CalendarElement = class extends HTMLElement {
+      constructor() {
+        super(...arguments);
+        this.engine = null;
+        this.unsubscribe = null;
+        this.actions = null;
+        this.pickerOpen = false;
+        this.yearInput = "";
+        this.yearInputValid = true;
+        this.listenersAttached = false;
+        this.clickOutsideHandler = null;
+        this.delegatedClickHandler = null;
+        this.delegatedInputHandler = null;
+        this.delegatedBlurHandler = null;
+        this.delegatedKeydownHandler = null;
+        // Rich property backing fields
+        this._events = [];
+        this._theme = null;
+        this._categoryColors = null;
+        this._renderEvent = null;
+        this._renderNoEvents = null;
+        // Selection state (availability mode — range)
+        this._rangeStart = null;
+        this._rangeEnd = null;
+        this._timeRangeDate = null;
+        this._timeRangeStart = null;
+        this._timeRangeEnd = null;
+        this._timeRangeComplete = false;
       }
-      const getCategoryLabel = (category) => {
-        const labels = {
-          work: "WORK",
-          personal: "PERSONAL",
-          meeting: "MEETING",
-          deadline: "DEADLINE",
-          appointment: "APPOINTMENT",
-          other: "OTHER"
-        };
-        return category ? labels[category] || category.toUpperCase() : "";
-      };
-      const getPriorityLabel = (priority) => {
-        const labels = {
-          high: "HIGH",
-          medium: "MEDIUM",
-          low: "LOW"
-        };
-        return priority ? labels[priority] || priority.toUpperCase() : "";
-      };
-      const getStatusLabel = (status) => {
-        const labels = {
-          completed: "COMPLETED",
-          cancelled: "CANCELLED",
-          tentative: "TENTATIVE",
-          scheduled: "SCHEDULED"
-        };
-        return status ? labels[status] || status.toUpperCase() : "";
-      };
-      return `
+      get events() {
+        return this._events;
+      }
+      set events(val) {
+        this._events = val;
+        if (this.engine) {
+          this.engine.updateEvents(val);
+        }
+      }
+      set theme(val) {
+        this._theme = val;
+        this.applyTheme();
+      }
+      set categoryColors(val) {
+        this._categoryColors = val;
+        if (this.engine) {
+          this.engine.updateCategoryColors(val);
+        }
+      }
+      set renderEvent(val) {
+        this._renderEvent = val;
+        if (this.engine) this.render();
+      }
+      set renderNoEvents(val) {
+        this._renderNoEvents = val;
+        if (this.engine) this.render();
+      }
+      get loading() {
+        return this.hasAttribute("loading");
+      }
+      set loading(val) {
+        if (val) this.setAttribute("loading", "");
+        else this.removeAttribute("loading");
+      }
+      connectedCallback() {
+        this.classList.add("kalendly-calendar");
+        this.initEngine();
+        this.render();
+      }
+      disconnectedCallback() {
+        this.cleanup();
+        this.classList.remove("kalendly-calendar");
+        this.innerHTML = "";
+      }
+      attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        if (name === "loading") {
+          this.render();
+          return;
+        }
+        if (name === "selectable" && newVal === null) {
+          this._rangeStart = null;
+          this._rangeEnd = null;
+          this._timeRangeDate = null;
+          this._timeRangeStart = null;
+          this._timeRangeEnd = null;
+          this._timeRangeComplete = false;
+        }
+        this.reinit();
+      }
+      get minYear() {
+        const val = this.getAttribute("min-year");
+        return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() - 30;
+      }
+      get maxYear() {
+        const val = this.getAttribute("max-year");
+        return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() + 10;
+      }
+      initEngine() {
+        const initialDateAttr = this.getAttribute("initial-date");
+        const initialDate = initialDateAttr ? new Date(initialDateAttr) : void 0;
+        const weekStartsOnAttr = this.getAttribute("week-starts-on");
+        const weekStartsOn = weekStartsOnAttr === "1" ? 1 : 0;
+        this.engine = new CalendarEngine({
+          events: this._events,
+          initialDate,
+          minYear: this.minYear,
+          maxYear: this.maxYear,
+          weekStartsOn,
+          categoryColors: this._categoryColors ?? void 0
+        });
+        this.actions = this.engine.getActions();
+        this.applyTheme();
+        this.unsubscribe = this.engine.subscribe(() => {
+          this.render();
+        });
+      }
+      reinit() {
+        if (!this.engine) return;
+        this.cleanup();
+        this.initEngine();
+        this.render();
+      }
+      cleanup() {
+        if (this.unsubscribe) {
+          this.unsubscribe();
+          this.unsubscribe = null;
+        }
+        if (this.delegatedClickHandler) {
+          this.removeEventListener("click", this.delegatedClickHandler);
+          this.delegatedClickHandler = null;
+        }
+        if (this.delegatedInputHandler) {
+          this.removeEventListener("input", this.delegatedInputHandler);
+          this.delegatedInputHandler = null;
+        }
+        if (this.delegatedBlurHandler) {
+          this.removeEventListener("blur", this.delegatedBlurHandler, true);
+          this.delegatedBlurHandler = null;
+        }
+        if (this.delegatedKeydownHandler) {
+          this.removeEventListener("keydown", this.delegatedKeydownHandler);
+          this.delegatedKeydownHandler = null;
+        }
+        if (this.clickOutsideHandler) {
+          document.removeEventListener("click", this.clickOutsideHandler);
+          this.clickOutsideHandler = null;
+        }
+        this.listenersAttached = false;
+        if (this.engine) {
+          this.engine.destroy();
+          this.engine = null;
+        }
+        this.actions = null;
+      }
+      applyTheme() {
+        if (!this._theme) return;
+        const root = document.documentElement;
+        const t = this._theme;
+        if (t.primary)
+          root.style.setProperty("--calendar-primary-color", t.primary);
+        if (t.secondary)
+          root.style.setProperty("--calendar-secondary-color", t.secondary);
+        if (t.tertiary)
+          root.style.setProperty("--calendar-tertiary-color", t.tertiary);
+        if (t.textColor)
+          root.style.setProperty("--calendar-text-color", t.textColor);
+        if (t.textLight)
+          root.style.setProperty("--calendar-text-light", t.textLight);
+        if (t.background)
+          root.style.setProperty("--calendar-background", t.background);
+        if (t.cellHover)
+          root.style.setProperty("--calendar-cell-hover", t.cellHover);
+        if (t.borderColor)
+          root.style.setProperty("--calendar-border-color", t.borderColor);
+        if (t.todayOutline)
+          root.style.setProperty("--calendar-today-outline", t.todayOutline);
+        if (t.selectedBg)
+          root.style.setProperty("--calendar-selected-bg", t.selectedBg);
+        if (t.eventIndicator)
+          root.style.setProperty("--calendar-event-indicator", t.eventIndicator);
+      }
+      render() {
+        if (!this.engine) return;
+        const viewModel = this.engine.getViewModel();
+        const useShortMonths = this.hasAttribute("use-short-month-names");
+        const title = this.getAttribute("title");
+        const minYear = this.minYear;
+        const maxYear = this.maxYear;
+        const availabilityMode = this.getAttribute("availability-mode");
+        const selectable = this.hasAttribute("selectable");
+        const isLoading = this.loading;
+        const today = /* @__PURE__ */ new Date();
+        const todayMonth = today.getMonth();
+        const todayYear = today.getFullYear();
+        const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
+        const showScrollHint = viewModel.tasks.length > 3;
+        const defaultRenderEvent = (event) => {
+          const timeRange = formatTimeRange(event);
+          const attendeesList = formatAttendees(event.attendees);
+          let borderColor = event.color || "#3b82f6";
+          if (event.category) {
+            borderColor = this.engine.getCategoryColor(event.category);
+          }
+          const getCategoryLabel = (category) => {
+            const labels = {
+              work: "WORK",
+              personal: "PERSONAL",
+              meeting: "MEETING",
+              deadline: "DEADLINE",
+              appointment: "APPOINTMENT",
+              other: "OTHER"
+            };
+            return category ? labels[category] || category.toUpperCase() : "";
+          };
+          const getPriorityLabel = (priority) => {
+            const labels = {
+              high: "HIGH",
+              medium: "MEDIUM",
+              low: "LOW"
+            };
+            return priority ? labels[priority] || priority.toUpperCase() : "";
+          };
+          const getStatusLabel = (status) => {
+            const labels = {
+              completed: "COMPLETED",
+              cancelled: "CANCELLED",
+              tentative: "TENTATIVE",
+              scheduled: "SCHEDULED"
+            };
+            return status ? labels[status] || status.toUpperCase() : "";
+          };
+          return `
         <div class="event-card" style="border-left-color: ${borderColor}">
           <div class="event-header">
             <div class="event-title">${event.name}</div>
@@ -2269,46 +729,46 @@ var VanillaCalendar = class {
               ${event.status && event.status !== "scheduled" ? `<span class="badge status-${event.status}">${getStatusLabel(event.status)}</span>` : ""}
             </div>
           </div>
-          
+
           ${timeRange ? `
           <div class="event-time">
             <span class="event-time-label">Time:</span>
             <span class="event-time-value">${timeRange}</span>
           </div>
           ` : ""}
-          
+
           ${event.description ? `
           <div class="event-description">${event.description}</div>
           ` : ""}
-          
+
           ${event.location ? `
           <div class="event-time">
             <span class="event-time-label">Location:</span>
             <span class="event-time-value">${event.location}</span>
           </div>
           ` : ""}
-          
+
           ${attendeesList ? `
           <div class="event-time">
             <span class="event-time-label">Attendees:</span>
             <span class="event-time-value">${attendeesList}</span>
           </div>
           ` : ""}
-          
+
           ${event.organizer ? `
           <div class="event-time">
             <span class="event-time-label">Organizer:</span>
             <span class="event-time-value">${event.organizer}</span>
           </div>
           ` : ""}
-          
+
           ${event.notes ? `
           <div class="event-time">
             <span class="event-time-label">Notes:</span>
             <span class="event-time-value">${event.notes}</span>
           </div>
           ` : ""}
-          
+
           ${event.url ? `
           <div class="event-time">
             <a href="${event.url}" target="_blank" rel="noopener noreferrer" class="event-link">
@@ -2316,7 +776,7 @@ var VanillaCalendar = class {
             </a>
           </div>
           ` : ""}
-          
+
           ${event.tags && event.tags.length > 0 ? `
           <div class="event-tags">
             ${event.tags.map((tag) => `<span class="event-tag">${tag}</span>`).join("")}
@@ -2324,27 +784,50 @@ var VanillaCalendar = class {
           ` : ""}
         </div>
       `;
-    };
-    const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
-    const renderEvent = this.props.renderEvent || defaultRenderEvent;
-    const renderNoEvents = this.props.renderNoEvents || defaultRenderNoEvents;
-    const showScrollHint = viewModel.tasks.length > 3;
-    const today = /* @__PURE__ */ new Date();
-    const todayMonth = today.getMonth();
-    const todayYear = today.getFullYear();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
-    const html = `
-      ${this.props.title ? `
-        <div class="page--title">
-          <h1>${this.props.title}</h1>
-        </div>
+        };
+        const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
+        const renderEvent = this._renderEvent || defaultRenderEvent;
+        const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
+        const renderTimeGrid = (events, date) => {
+          const isHourBooked = (hour) => events.some((event) => {
+            if (!event.startTime || !event.endTime) return true;
+            const [startH] = event.startTime.split(":").map(Number);
+            const [endH] = event.endTime.split(":").map(Number);
+            return hour >= startH && hour < endH;
+          });
+          const slots = Array.from({ length: 24 }, (_, hour) => {
+            const startTime = `${String(hour).padStart(2, "0")}:00`;
+            const endTime = `${String(hour + 1).padStart(2, "0")}:00`;
+            const booked = isHourBooked(hour);
+            const inTimeRange = !booked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+            const isRangeStart = inTimeRange && startTime === this._timeRangeStart;
+            const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
+            const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
+            const slotClasses = [
+              "time-grid__slot",
+              booked ? "time-grid__slot--booked" : "time-grid__slot--free",
+              isRangeStart ? "time-grid__slot--range-start" : "",
+              isRangeEnd ? "time-grid__slot--range-end" : "",
+              isInRange ? "time-grid__slot--in-range" : ""
+            ].filter(Boolean).join(" ");
+            const slotAttrs = !booked && selectable ? `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}"` : "";
+            return `
+          <div class="${slotClasses}" ${slotAttrs}>
+            <span class="time-grid__label">${startTime}</span>
+            <span class="time-grid__status">${booked ? "Booked" : "Available"}</span>
+          </div>`;
+          });
+          return `<div class="time-grid">${slots.join("")}</div>`;
+        };
+        const html = `
+      ${title ? `
+      <div class="page--title">
+        <h1>${title}</h1>
+      </div>
       ` : ""}
 
       <div class="calendar--content">
         <div class="calendar--card">
-          <!-- Navigation Header -->
           <div class="calendar--nav-header">
             <button type="button" class="calendar--nav-arrow" data-action="previous" aria-label="Previous month">
               &#8249;
@@ -2358,7 +841,7 @@ var VanillaCalendar = class {
                 aria-expanded="${this.pickerOpen ? "true" : "false"}"
                 aria-haspopup="true"
               >
-                ${this.props.useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
+                ${useShortMonths ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
                 <span class="calendar--picker-chevron">&#9662;</span>
               </button>
 
@@ -2389,10 +872,10 @@ var VanillaCalendar = class {
                   </div>
 
                   <div class="calendar--picker-months">
-                    ${(this.props.useShortMonthNames ? MONTHS : MONTHS_FULL).map((month, index) => {
-      const isSelected = index === viewModel.currentMonth;
-      const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
-      return `
+                    ${(useShortMonths ? MONTHS : MONTHS_FULL).map((month, index) => {
+          const isSelected = index === viewModel.currentMonth;
+          const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
+          return `
                         <button
                           type="button"
                           class="calendar--picker-month${isSelected ? " selected" : ""}${isCurrent ? " current-month" : ""}"
@@ -2400,7 +883,7 @@ var VanillaCalendar = class {
                           data-month="${index}"
                         >${month}</button>
                       `;
-    }).join("")}
+        }).join("")}
                   </div>
                 </div>
               ` : ""}
@@ -2425,30 +908,52 @@ var VanillaCalendar = class {
               </tr>
             </thead>
             <tbody data-calendar-body>
-              ${viewModel.calendarDates.map(
-      (week) => `
-                <tr>
-                  ${week.map((calendarDate, dayIndex) => {
-        const classes = getCellClasses(calendarDate);
-        const dateString = calendarDate.date.toISOString();
-        return `
-                      <td
-                        class="${classes.join(" ")}"
-                        data-date="${dateString}"
-                        data-day-index="${dayIndex}"
-                        data-clickable="true"
-                      >
-                        ${calendarDate.date.getDate()}
-                      </td>
-                    `;
-      }).join("")}
-                </tr>
-              `
-    ).join("")}
+              ${isLoading ? Array.from(
+          { length: 6 },
+          () => `<tr>${Array.from(
+            { length: 7 },
+            () => `<td class="calendar--skeleton" aria-hidden="true"></td>`
+          ).join("")}</tr>`
+        ).join("") : viewModel.calendarDates.map(
+          (week) => `
+                    <tr>
+                      ${week.map((calendarDate, dayIndex) => {
+            const classes = getCellClasses(calendarDate);
+            if (availabilityMode && calendarDate.isCurrentMonth) {
+              classes.push(
+                calendarDate.hasEvents ? "availability--booked" : "availability--free"
+              );
+            }
+            if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
+              const d = calendarDate.date;
+              if (this._rangeStart && isSameDay2(d, this._rangeStart))
+                classes.push("availability--range-start");
+              if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
+                classes.push("availability--range-end");
+              if (this._rangeStart && this._rangeEnd) {
+                if (d > this._rangeStart && d < this._rangeEnd)
+                  classes.push("availability--in-range");
+              }
+            }
+            const dateString = calendarDate.date.toISOString();
+            return `
+                          <td
+                            class="${classes.join(" ")}"
+                            data-date="${dateString}"
+                            data-day-index="${dayIndex}"
+                            data-clickable="true"
+                          >
+                            ${calendarDate.date.getDate()}
+                          </td>
+                        `;
+          }).join("")}
+                    </tr>
+                  `
+        ).join("")}
             </tbody>
           </table>
 
-          ${viewModel.selectedDate ? `
+          ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
             <div class="date-popup ${viewModel.popupPositionClass}">
               <div class="popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
@@ -2462,260 +967,330 @@ var VanillaCalendar = class {
               ` : ""}
 
               <div class="events-container">
-                ${viewModel.tasks.length > 0 ? `
-                  ${viewModel.tasks.map((event) => renderEvent(event)).join("")}
-                ` : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
         </div>
       </div>
     `;
-    this.container.innerHTML = html;
-    this.attachEventListeners();
-  }
-  attachEventListeners() {
-    if (this.listenersAttached) return;
-    this.listenersAttached = true;
-    const today = /* @__PURE__ */ new Date();
-    const todayYear = today.getFullYear();
-    const todayMonth = today.getMonth();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    this.delegatedClickHandler = (e) => {
-      const target = e.target;
-      const cell = target.closest('td[data-clickable="true"]');
-      if (cell && cell.dataset.date) {
-        e.stopPropagation();
-        const date = new Date(cell.dataset.date);
-        const dayIndex = parseInt(cell.dataset.dayIndex || "0");
-        this.engine.handleDateClick(date, dayIndex);
-        this.container.dispatchEvent(
-          new CustomEvent("dateSelect", { detail: { date, dayIndex } })
-        );
-        return;
+        this.innerHTML = html;
+        this.attachEventListeners();
       }
-      const actionEl = target.closest("[data-action]");
-      if (!actionEl) return;
-      const action = actionEl.dataset.action;
-      e.stopPropagation();
-      switch (action) {
-        case "previous":
-          this.actions.previous();
-          this.dispatchMonthChange();
-          break;
-        case "next":
-          this.actions.next();
-          this.dispatchMonthChange();
-          break;
-        case "today":
-          this.actions.goToToday();
-          this.pickerOpen = false;
-          this.container.dispatchEvent(
-            new CustomEvent("monthChange", {
-              detail: { year: todayYear, month: todayMonth }
-            })
-          );
-          break;
-        case "toggle-picker":
-          this.pickerOpen = !this.pickerOpen;
-          if (this.pickerOpen) {
-            this.yearInput = String(this.engine.getViewModel().currentYear);
-            this.yearInputValid = true;
+      attachEventListeners() {
+        if (this.listenersAttached) return;
+        this.listenersAttached = true;
+        const minYear = this.minYear;
+        const maxYear = this.maxYear;
+        this.delegatedClickHandler = (e) => {
+          const target = e.target;
+          const cell = target.closest('td[data-clickable="true"]');
+          if (cell && cell.dataset.date) {
+            e.stopPropagation();
+            const date = new Date(cell.dataset.date);
+            const dayIndex = parseInt(cell.dataset.dayIndex || "0");
+            const availMode = this.getAttribute("availability-mode");
+            const isSelectable = this.hasAttribute("selectable");
+            if (availMode === "day" && isSelectable) {
+              const isBooked = cell.classList.contains("availability--booked");
+              if (!isBooked) {
+                let startDate;
+                let endDate;
+                if (this._rangeEnd !== null) {
+                  this._rangeStart = date;
+                  this._rangeEnd = null;
+                  startDate = date;
+                  endDate = date;
+                } else if (this._rangeStart === null) {
+                  this._rangeStart = date;
+                  startDate = date;
+                  endDate = date;
+                } else {
+                  const [s, e2] = this._rangeStart <= date ? [this._rangeStart, date] : [date, this._rangeStart];
+                  const cursor = new Date(s);
+                  cursor.setDate(cursor.getDate() + 1);
+                  let blocked = false;
+                  while (cursor < e2) {
+                    if (this.engine.getEventsForDate(cursor).length > 0) {
+                      blocked = true;
+                      break;
+                    }
+                    cursor.setDate(cursor.getDate() + 1);
+                  }
+                  if (blocked) {
+                    this._rangeStart = date;
+                    this._rangeEnd = null;
+                  } else {
+                    this._rangeStart = s;
+                    this._rangeEnd = e2;
+                  }
+                  startDate = this._rangeStart;
+                  endDate = this._rangeEnd ?? this._rangeStart;
+                }
+                this.dispatchEvent(
+                  new CustomEvent("cal-availability-select", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { startDate, endDate }
+                  })
+                );
+              }
+            }
+            if (availMode === "time") {
+              this._timeRangeDate = null;
+              this._timeRangeStart = null;
+              this._timeRangeEnd = null;
+              this._timeRangeComplete = false;
+            }
+            this.engine.handleDateClick(date, dayIndex);
+            this.dispatchEvent(
+              new CustomEvent("cal-date-select", {
+                bubbles: true,
+                composed: true,
+                detail: { date, events: this.engine.getEventsForDate(date) }
+              })
+            );
+            return;
           }
-          this.render();
-          break;
-        case "year-prev": {
-          const vm = this.engine.getViewModel();
-          if (vm.currentYear > minYear) {
-            const newYear = vm.currentYear - 1;
-            this.yearInput = String(newYear);
-            this.updatePickerYear(newYear);
-            this.actions.jump(newYear, vm.currentMonth);
-            this.dispatchMonthChange();
+          const actionEl = target.closest("[data-action]");
+          if (!actionEl) return;
+          const action = actionEl.dataset.action;
+          e.stopPropagation();
+          switch (action) {
+            case "previous": {
+              const vm = this.engine.getViewModel();
+              const tMonth = vm.currentMonth === 0 ? 11 : vm.currentMonth - 1;
+              const tYear = vm.currentMonth === 0 ? vm.currentYear - 1 : vm.currentYear;
+              this.dispatchMonthChange(tYear, tMonth);
+              this.actions.previous();
+              break;
+            }
+            case "next": {
+              const vm = this.engine.getViewModel();
+              const tMonth = vm.currentMonth === 11 ? 0 : vm.currentMonth + 1;
+              const tYear = vm.currentMonth === 11 ? vm.currentYear + 1 : vm.currentYear;
+              this.dispatchMonthChange(tYear, tMonth);
+              this.actions.next();
+              break;
+            }
+            case "today": {
+              const t = /* @__PURE__ */ new Date();
+              this.dispatchMonthChange(t.getFullYear(), t.getMonth());
+              this.actions.goToToday();
+              this.pickerOpen = false;
+              break;
+            }
+            case "toggle-picker":
+              this.pickerOpen = !this.pickerOpen;
+              if (this.pickerOpen) {
+                this.yearInput = String(this.engine.getViewModel().currentYear);
+                this.yearInputValid = true;
+              }
+              this.render();
+              break;
+            case "year-prev": {
+              const vm = this.engine.getViewModel();
+              if (vm.currentYear > minYear) {
+                const newYear = vm.currentYear - 1;
+                this.yearInput = String(newYear);
+                this.updatePickerYear(newYear);
+                this.dispatchMonthChange(newYear, vm.currentMonth);
+                this.actions.jump(newYear, vm.currentMonth);
+              }
+              break;
+            }
+            case "year-next": {
+              const vm = this.engine.getViewModel();
+              if (vm.currentYear < maxYear) {
+                const newYear = vm.currentYear + 1;
+                this.yearInput = String(newYear);
+                this.updatePickerYear(newYear);
+                this.dispatchMonthChange(newYear, vm.currentMonth);
+                this.actions.jump(newYear, vm.currentMonth);
+              }
+              break;
+            }
+            case "select-month": {
+              const month = parseInt(actionEl.dataset.month || "0", 10);
+              const year = this.engine.getViewModel().currentYear;
+              this.dispatchMonthChange(year, month);
+              this.actions.jump(year, month);
+              this.pickerOpen = false;
+              break;
+            }
+            case "close-popup":
+              this._timeRangeDate = null;
+              this._timeRangeStart = null;
+              this._timeRangeEnd = null;
+              this._timeRangeComplete = false;
+              this.engine.clearSelection();
+              break;
+            case "select-slot": {
+              const slotStart = actionEl.dataset.startTime;
+              const slotEnd = actionEl.dataset.endTime;
+              const slotDate = new Date(actionEl.dataset.date);
+              if (this._timeRangeComplete) {
+                this._timeRangeDate = slotDate;
+                this._timeRangeStart = slotStart;
+                this._timeRangeEnd = slotEnd;
+                this._timeRangeComplete = false;
+              } else if (this._timeRangeStart === null) {
+                this._timeRangeDate = slotDate;
+                this._timeRangeStart = slotStart;
+                this._timeRangeEnd = slotEnd;
+              } else {
+                const newStart = slotStart < this._timeRangeStart ? slotStart : this._timeRangeStart;
+                const newEnd = slotEnd > this._timeRangeEnd ? slotEnd : this._timeRangeEnd;
+                this._timeRangeStart = newStart;
+                this._timeRangeEnd = newEnd;
+                this._timeRangeComplete = true;
+              }
+              this.render();
+              this.dispatchEvent(
+                new CustomEvent("cal-availability-select", {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    date: this._timeRangeDate,
+                    startTime: this._timeRangeStart,
+                    endTime: this._timeRangeEnd
+                  }
+                })
+              );
+              break;
+            }
           }
-          break;
-        }
-        case "year-next": {
+        };
+        this.delegatedInputHandler = (e) => {
+          const target = e.target;
+          if (!target.matches("[data-year-input]")) return;
+          const value = target.value;
+          if (value === "" || /^\d+$/.test(value)) {
+            this.yearInput = value;
+            const year = parseInt(value, 10);
+            this.yearInputValid = value === "" || year >= minYear && year <= maxYear;
+            target.classList.toggle("invalid", !this.yearInputValid);
+          }
+        };
+        this.delegatedBlurHandler = (e) => {
+          const target = e.target;
+          if (!target.matches("[data-year-input]")) return;
+          const year = parseInt(this.yearInput, 10);
           const vm = this.engine.getViewModel();
-          if (vm.currentYear < maxYear) {
-            const newYear = vm.currentYear + 1;
-            this.yearInput = String(newYear);
-            this.updatePickerYear(newYear);
-            this.actions.jump(newYear, vm.currentMonth);
-            this.dispatchMonthChange();
+          if (isNaN(year) || year < minYear || year > maxYear) {
+            this.yearInput = String(vm.currentYear);
+            this.yearInputValid = true;
+            target.value = this.yearInput;
+            target.classList.remove("invalid");
+          } else if (year !== vm.currentYear) {
+            this.dispatchMonthChange(year, vm.currentMonth);
+            this.actions.jump(year, vm.currentMonth);
           }
-          break;
-        }
-        case "select-month": {
-          const month = parseInt(actionEl.dataset.month || "0", 10);
-          this.actions.jump(this.engine.getViewModel().currentYear, month);
-          this.pickerOpen = false;
-          this.dispatchMonthChange();
-          break;
-        }
-        case "close-popup":
-          this.engine.clearSelection();
-          break;
+        };
+        this.delegatedKeydownHandler = (e) => {
+          const target = e.target;
+          if (!target.matches("[data-year-input]")) return;
+          if (e.key === "Enter") target.blur();
+        };
+        this.addEventListener("click", this.delegatedClickHandler);
+        this.addEventListener("input", this.delegatedInputHandler);
+        this.addEventListener("blur", this.delegatedBlurHandler, true);
+        this.addEventListener("keydown", this.delegatedKeydownHandler);
+        this.clickOutsideHandler = (e) => {
+          const target = e.target;
+          if (this.contains(target)) return;
+          if (this.pickerOpen) {
+            this.pickerOpen = false;
+            this.render();
+            return;
+          }
+          const popup = this.querySelector(".date-popup");
+          if (popup) {
+            this.engine.clearSelection();
+          }
+        };
+        document.addEventListener("click", this.clickOutsideHandler);
       }
-    };
-    this.delegatedInputHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      const value = target.value;
-      if (value === "" || /^\d+$/.test(value)) {
-        this.yearInput = value;
-        const year = parseInt(value, 10);
-        this.yearInputValid = value === "" || year >= minYear && year <= maxYear;
-        target.classList.toggle("invalid", !this.yearInputValid);
+      updatePickerYear(year) {
+        const input = this.querySelector("[data-year-input]");
+        if (input) input.value = String(year);
+        const prevBtn = this.querySelector(
+          '[data-action="year-prev"]'
+        );
+        const nextBtn = this.querySelector(
+          '[data-action="year-next"]'
+        );
+        if (prevBtn) prevBtn.disabled = year <= this.minYear;
+        if (nextBtn) nextBtn.disabled = year >= this.maxYear;
       }
-    };
-    this.delegatedBlurHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      const year = parseInt(this.yearInput, 10);
-      const vm = this.engine.getViewModel();
-      if (isNaN(year) || year < minYear || year > maxYear) {
-        this.yearInput = String(vm.currentYear);
-        this.yearInputValid = true;
-        target.value = this.yearInput;
-        target.classList.remove("invalid");
-      } else if (year !== vm.currentYear) {
-        this.actions.jump(year, vm.currentMonth);
-        this.dispatchMonthChange();
+      dispatchMonthChange(year, month) {
+        if (!this.engine) return;
+        const vm = this.engine.getViewModel();
+        this.dispatchEvent(
+          new CustomEvent("cal-month-change", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              year: year ?? vm.currentYear,
+              month: month ?? vm.currentMonth
+            }
+          })
+        );
       }
-    };
-    this.delegatedKeydownHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      if (e.key === "Enter") {
-        target.blur();
+      // Public API
+      updateEvents(events) {
+        this.events = events;
       }
-    };
-    this.container.addEventListener("click", this.delegatedClickHandler);
-    this.container.addEventListener("input", this.delegatedInputHandler);
-    this.container.addEventListener("blur", this.delegatedBlurHandler, true);
-    this.container.addEventListener("keydown", this.delegatedKeydownHandler);
-    this.clickOutsideHandler = (e) => {
-      const target = e.target;
-      if (this.container.contains(target)) return;
-      if (this.pickerOpen) {
-        this.pickerOpen = false;
-        this.render();
-        return;
+      updateTheme(theme) {
+        this.theme = theme;
       }
-      const popup = this.container.querySelector(".date-popup");
-      if (popup) {
-        this.engine.clearSelection();
+      getCurrentDate() {
+        return this.engine?.getViewModel().selectedDate ?? null;
+      }
+      goToDate(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        this.dispatchMonthChange(year, month);
+        this.actions?.jump(year, month);
+      }
+      getEngine() {
+        if (!this.engine)
+          throw new Error("CalendarElement is not connected to the DOM");
+        return this.engine;
       }
     };
-    document.addEventListener("click", this.clickOutsideHandler);
-  }
-  // Targeted update for picker year - avoids full DOM rebuild
-  updatePickerYear(year) {
-    const input = this.container.querySelector(
-      "[data-year-input]"
-    );
-    if (input) {
-      input.value = String(year);
-    }
-    const today = /* @__PURE__ */ new Date();
-    const todayYear = today.getFullYear();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    const prevBtn = this.container.querySelector(
-      '[data-action="year-prev"]'
-    );
-    const nextBtn = this.container.querySelector(
-      '[data-action="year-next"]'
-    );
-    if (prevBtn) prevBtn.disabled = year <= minYear;
-    if (nextBtn) nextBtn.disabled = year >= maxYear;
+    CalendarElement.observedAttributes = [
+      "initial-date",
+      "min-year",
+      "max-year",
+      "week-starts-on",
+      "title",
+      "use-short-month-names",
+      "availability-mode",
+      "selectable",
+      "loading"
+    ];
   }
-  dispatchMonthChange() {
-    const vm = this.engine.getViewModel();
-    this.container.dispatchEvent(
-      new CustomEvent("monthChange", {
-        detail: { year: vm.currentYear, month: vm.currentMonth }
-      })
-    );
-  }
-  updateEvents(events) {
-    this.engine.updateEvents(events);
-  }
-  updateTheme(theme) {
-    this.props.theme = theme;
-    this.applyTheme();
-  }
-  getCurrentDate() {
-    return this.engine.getViewModel().selectedDate;
-  }
-  goToDate(date) {
-    this.actions.jump(date.getFullYear(), date.getMonth());
-  }
-  getEngine() {
-    return this.engine;
-  }
-  destroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-    if (this.delegatedClickHandler) {
-      this.container.removeEventListener("click", this.delegatedClickHandler);
-      this.delegatedClickHandler = null;
-    }
-    if (this.delegatedInputHandler) {
-      this.container.removeEventListener("input", this.delegatedInputHandler);
-      this.delegatedInputHandler = null;
-    }
-    if (this.delegatedBlurHandler) {
-      this.container.removeEventListener(
-        "blur",
-        this.delegatedBlurHandler,
-        true
-      );
-      this.delegatedBlurHandler = null;
-    }
-    if (this.delegatedKeydownHandler) {
-      this.container.removeEventListener(
-        "keydown",
-        this.delegatedKeydownHandler
-      );
-      this.delegatedKeydownHandler = null;
-    }
-    if (this.clickOutsideHandler) {
-      document.removeEventListener("click", this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
-    this.listenersAttached = false;
-    this.engine.destroy();
-    this.container.innerHTML = "";
-    this.container.classList.remove("kalendly-calendar");
-    if (this.props.className) {
-      this.container.classList.remove(this.props.className);
+});
+
+// src/web-components/index.ts
+init_CalendarElement();
+init_core();
+if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")) {
+  Promise.resolve().then(() => (init_CalendarElement(), CalendarElement_exports)).then(({ CalendarElement: CalendarElement2 }) => {
+    if (!customElements.get("kal-calendar")) {
+      customElements.define("kal-calendar", CalendarElement2);
     }
-  }
-};
-function createCalendar(props) {
-  return new VanillaCalendar(props);
+  });
 }
-
-// src/index.ts
-var version = "1.0.0";
-var name = "kalendly";
 export {
+  CalendarElement,
   CalendarEngine,
   DAYS,
   DEFAULT_CATEGORY_COLORS,
   MONTHS,
   MONTHS_FULL,
-  react_exports as React,
-  Calendar as ReactCalendar,
-  react_native_exports as ReactNative,
-  Calendar2 as ReactNativeCalendar,
-  vanilla_exports as Vanilla,
-  createCalendar as createVanillaCalendar,
+  defineCalendarElement,
   formatAttendees,
   formatDateForDisplay,
   formatTimeRange,
@@ -2732,9 +1307,7 @@ export {
   isToday,
   isValidHexColor,
   mergeCategoryColors,
-  name,
   normalizeDate,
-  sortEventsByTime,
-  version
+  sortEventsByTime
 };
 //# sourceMappingURL=index.mjs.map