@forcecalendar/interface 1.0.17 → 1.0.19

package/dist/force-calendar-interface.esm.js

@@ -1,7 +1,7 @@
 var V = Object.defineProperty;
-var P = (p, e, t) => e in p ? V(p, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[e] = t;
-var I = (p, e, t) => P(p, typeof e != "symbol" ? e + "" : e, t);
-class $ extends HTMLElement {
+var W = (u, e, t) => e in u ? V(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var $ = (u, e, t) => W(u, typeof e != "symbol" ? e + "" : e, t);
+class O extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._listeners = [], this._state = null, this._props = /* @__PURE__ */ new Map(), this._initialized = !1;
   }
@@ -108,7 +108,7 @@ class $ extends HTMLElement {
     this.setProp(e, s), this._initialized && this.render();
   }
 }
-class U {
+class j {
   constructor() {
     this.timezones = {
       // UTC
@@ -673,25 +673,25 @@ class U {
     };
   }
 }
-let E = null;
-class S {
+let k = null;
+class C {
   /**
    * Get the shared singleton instance of TimezoneManager
    * This should be used instead of creating new instances to avoid memory bloat
    * @returns {TimezoneManager} The shared instance
    */
   static getInstance() {
-    return E || (E = new S()), E;
+    return k || (k = new C()), k;
   }
   /**
    * Reset the singleton instance (useful for testing)
    * @private
    */
   static _resetInstance() {
-    E && E.clearCache(), E = null;
+    k && k.clearCache(), k = null;
   }
   constructor() {
-    this.database = new U(), this.offsetCache = /* @__PURE__ */ new Map(), this.dstCache = /* @__PURE__ */ new Map(), this.maxCacheSize = 1e3, this.cacheHits = 0, this.cacheMisses = 0;
+    this.database = new j(), this.offsetCache = /* @__PURE__ */ new Map(), this.dstCache = /* @__PURE__ */ new Map(), this.maxCacheSize = 1e3, this.cacheHits = 0, this.cacheMisses = 0;
   }
   /**
    * Convert date from one timezone to another
@@ -976,7 +976,7 @@ class S {
     }
   }
 }
-class M {
+class w {
   /**
    * Normalize event data
    * @param {import('../../types.js').EventData} data - Raw event data
@@ -1039,27 +1039,27 @@ class M {
     color: o = null,
     backgroundColor: c = null,
     borderColor: l = null,
-    textColor: d = null,
-    recurring: h = !1,
-    recurrenceRule: g = null,
-    timeZone: w = null,
-    endTimeZone: f = null,
-    status: k = "confirmed",
-    visibility: b = "public",
+    textColor: h = null,
+    recurring: d = !1,
+    recurrenceRule: p = null,
+    timeZone: b = null,
+    endTimeZone: v = null,
+    status: M = "confirmed",
+    visibility: D = "public",
     organizer: T = null,
     attendees: A = [],
-    reminders: _ = [],
-    category: L,
+    reminders: I = [],
+    category: R,
     // Support singular category (no default)
-    categories: F,
+    categories: B,
     // Support plural categories (no default)
-    attachments: O = [],
-    conferenceData: H = null,
-    metadata: R = {},
-    ...B
+    attachments: U = [],
+    conferenceData: Y = null,
+    metadata: N = {},
+    ...P
     // Capture any extra properties
   }) {
-    const m = M.normalize({
+    const g = w.normalize({
       id: e,
       title: t,
       start: s,
@@ -1070,27 +1070,27 @@ class M {
       color: o,
       backgroundColor: c,
       borderColor: l,
-      textColor: d,
-      recurring: h,
-      recurrenceRule: g,
-      timeZone: w,
-      endTimeZone: f,
-      status: k,
-      visibility: b,
+      textColor: h,
+      recurring: d,
+      recurrenceRule: p,
+      timeZone: b,
+      endTimeZone: v,
+      status: M,
+      visibility: D,
       organizer: T,
       attendees: A,
-      reminders: _,
-      category: L,
+      reminders: I,
+      category: R,
       // Pass category to normalize
-      categories: F,
+      categories: B,
       // Pass categories to normalize
-      attachments: O,
-      conferenceData: H,
-      metadata: R,
-      ...B
+      attachments: U,
+      conferenceData: Y,
+      metadata: N,
+      ...P
       // Pass any extra properties
     });
-    M.validate(m), this.id = m.id, this.title = m.title, this._timezoneManager = S.getInstance(), this.timeZone = m.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = m.endTimeZone || this.timeZone, this.start = m.start, this.end = m.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = m.allDay, this.description = m.description, this.location = m.location, this.color = m.color, this.backgroundColor = m.backgroundColor, this.borderColor = m.borderColor, this.textColor = m.textColor, this.recurring = m.recurring, this.recurrenceRule = m.recurrenceRule, this._originalTimeZone = m.timeZone || null, this.status = m.status, this.visibility = m.visibility, this.organizer = m.organizer, this.attendees = [...m.attendees], this.reminders = [...m.reminders], this.categories = m.categories ? [...m.categories] : [], this.attachments = [...m.attachments], this.conferenceData = m.conferenceData, this.metadata = { ...m.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
+    w.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = C.getInstance(), this.timeZone = g.timeZone || this._timezoneManager.getSystemTimezone(), this.endTimeZone = g.endTimeZone || this.timeZone, this.start = g.start, this.end = g.end, this.startUTC = this._timezoneManager.toUTC(this.start, this.timeZone), this.endUTC = this._timezoneManager.toUTC(this.end, this.endTimeZone), this.allDay = g.allDay, this.description = g.description, this.location = g.location, this.color = g.color, this.backgroundColor = g.backgroundColor, this.borderColor = g.borderColor, this.textColor = g.textColor, this.recurring = g.recurring, this.recurrenceRule = g.recurrenceRule, this._originalTimeZone = g.timeZone || null, this.status = g.status, this.visibility = g.visibility, this.organizer = g.organizer, this.attendees = [...g.attendees], this.reminders = [...g.reminders], this.categories = g.categories ? [...g.categories] : [], this.attachments = [...g.attachments], this.conferenceData = g.conferenceData, this.metadata = { ...g.metadata }, this._cache = {}, this._validateAttendees(), this._validateReminders();
   }
   /**
    * Get event duration in milliseconds
@@ -1180,7 +1180,7 @@ class M {
    * @throws {Error} If otherEvent is not an Event instance or doesn't have start/end
    */
   overlaps(e) {
-    if (e instanceof M)
+    if (e instanceof w)
       return !(this.end <= e.start || this.start >= e.end);
     if (e && e.start && e.end)
       return !(this.end <= e.start || this.start >= e.end);
@@ -1200,7 +1200,7 @@ class M {
    * @returns {Event} New Event instance with updated properties
    */
   clone(e = {}) {
-    return new M({
+    return new w({
       id: this.id,
       title: this.title,
       start: new Date(this.start),
@@ -1264,7 +1264,7 @@ class M {
    * @returns {Event} New Event instance
    */
   static fromObject(e) {
-    return new M(e);
+    return new w(e);
   }
   /**
    * Compare events for equality
@@ -1272,7 +1272,7 @@ class M {
    * @returns {boolean} True if events are equal
    */
   equals(e) {
-    return e instanceof M ? this.id === e.id && this.title === e.title && this.start.getTime() === e.start.getTime() && this.end.getTime() === e.end.getTime() && this.allDay === e.allDay && this.description === e.description && this.location === e.location && this.recurring === e.recurring && this.recurrenceRule === e.recurrenceRule && this.status === e.status : !1;
+    return e instanceof w ? this.id === e.id && this.title === e.title && this.start.getTime() === e.start.getTime() && this.end.getTime() === e.end.getTime() && this.allDay === e.allDay && this.description === e.description && this.location === e.location && this.recurring === e.recurring && this.recurrenceRule === e.recurrenceRule && this.status === e.status : !1;
   }
   // ============ Attendee Management Methods ============
   /**
@@ -1531,7 +1531,7 @@ class M {
     return this.conferenceData !== null;
   }
 }
-let u = class D {
+let f = class y {
   /**
    * Get the start of a day
    * @param {Date} date - The date
@@ -1567,7 +1567,7 @@ let u = class D {
    * @returns {Date}
    */
   static endOfWeek(e, t = 0) {
-    const s = D.startOfWeek(e, t);
+    const s = y.startOfWeek(e, t);
     return s.setDate(s.getDate() + 6), s.setHours(23, 59, 59, 999), s;
   }
   /**
@@ -1619,7 +1619,7 @@ let u = class D {
    * @returns {Date}
    */
   static addWeeks(e, t) {
-    return D.addDays(e, t * 7);
+    return y.addDays(e, t * 7);
   }
   /**
    * Add months to a date
@@ -1701,7 +1701,7 @@ let u = class D {
    * @returns {boolean}
    */
   static isSameWeek(e, t, s = 0) {
-    const i = D.startOfWeek(e, s), r = D.startOfWeek(t, s);
+    const i = y.startOfWeek(e, s), r = y.startOfWeek(t, s);
     return i.toDateString() === r.toDateString();
   }
   /**
@@ -1739,7 +1739,7 @@ let u = class D {
    * @returns {number}
    */
   static differenceInWeeks(e, t) {
-    return Math.floor(D.differenceInDays(e, t) / 7);
+    return Math.floor(y.differenceInDays(e, t) / 7);
   }
   /**
    * Get the difference in months between two dates
@@ -1795,7 +1795,7 @@ let u = class D {
    * @returns {string}
    */
   static getMonthName(e, t = "en-US", s = "long") {
-    return D.format(e, t, { month: s });
+    return y.format(e, t, { month: s });
   }
   /**
    * Get day name
@@ -1805,7 +1805,7 @@ let u = class D {
    * @returns {string}
    */
   static getDayName(e, t = "en-US", s = "long") {
-    return D.format(e, t, { weekday: s });
+    return y.format(e, t, { weekday: s });
   }
   /**
    * Format time
@@ -1815,7 +1815,7 @@ let u = class D {
    * @returns {string}
    */
   static formatTime(e, t = "en-US", s = !1) {
-    return D.format(e, t, {
+    return y.format(e, t, {
       hour: "numeric",
       minute: "2-digit",
       hour12: !s
@@ -1837,7 +1837,7 @@ let u = class D {
    * @returns {Date}
    */
   static setTime(e, t) {
-    const s = new Date(e), { hours: i, minutes: r } = D.parseTime(t);
+    const s = new Date(e), { hours: i, minutes: r } = y.parseTime(t);
     return s.setHours(i, r, 0, 0), s;
   }
   /**
@@ -1916,7 +1916,7 @@ let u = class D {
    * @returns {boolean}
    */
   static isDST(e, t) {
-    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), r = D.getTimezoneOffset(s, t), n = D.getTimezoneOffset(i, t), a = D.getTimezoneOffset(e, t);
+    const s = new Date(e.getFullYear(), 0, 1), i = new Date(e.getFullYear(), 6, 1), r = y.getTimezoneOffset(s, t), n = y.getTimezoneOffset(i, t), a = y.getTimezoneOffset(e, t);
     return Math.max(r, n) === a;
   }
   /**
@@ -1927,9 +1927,9 @@ let u = class D {
    * @returns {Date}
    */
   static addHoursWithDST(e, t, s) {
-    const i = new Date(e), r = D.getTimezoneOffset(e, s);
+    const i = new Date(e), r = y.getTimezoneOffset(e, s);
     i.setTime(i.getTime() + t * 60 * 60 * 1e3);
-    const n = D.getTimezoneOffset(i, s);
+    const n = y.getTimezoneOffset(i, s);
     if (r !== n) {
       const a = (n - r) * 6e4;
       i.setTime(i.getTime() + a);
@@ -1948,11 +1948,11 @@ let u = class D {
    * @returns {Date}
    */
   static createInTimeZone(e, t, s, i = 0, r = 0, n = 0, a) {
-    const o = `${e}-${String(t + 1).padStart(2, "0")}-${String(s).padStart(2, "0")}`, c = `${String(i).padStart(2, "0")}:${String(r).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), d = D.getTimezoneOffset(l, a), h = l.getTime() + d * 6e4;
-    return new Date(h);
+    const o = `${e}-${String(t + 1).padStart(2, "0")}-${String(s).padStart(2, "0")}`, c = `${String(i).padStart(2, "0")}:${String(r).padStart(2, "0")}:${String(n).padStart(2, "0")}`, l = /* @__PURE__ */ new Date(`${o}T${c}`), h = y.getTimezoneOffset(l, a), d = l.getTime() + h * 6e4;
+    return new Date(d);
   }
 };
-class Y {
+class Z {
   /**
    * Parse an RRULE string into a structured rule object
    * @param {string|Object} rrule - RRULE string or rule object
@@ -2206,7 +2206,7 @@ class Y {
     return e.count ? r += `, ${e.count} time${e.count > 1 ? "s" : ""}` : e.until && (r += `, until ${e.until.toLocaleDateString()}`), r;
   }
 }
-class N {
+class q {
   /**
    * Expand a recurring event into individual occurrences
    * @param {import('./Event.js').Event} event - The recurring event
@@ -2219,35 +2219,35 @@ class N {
   static expandEvent(e, t, s, i = 365, r = null) {
     if (!e.recurring || !e.recurrenceRule)
       return [{ start: e.start, end: e.end, timezone: e.timeZone }];
-    const n = this.parseRule(e.recurrenceRule), a = [], o = e.end - e.start, c = r || e.timeZone || "UTC", l = S.getInstance();
-    let d = new Date(e.start), h = 0;
+    const n = this.parseRule(e.recurrenceRule), a = [], o = e.end - e.start, c = r || e.timeZone || "UTC", l = C.getInstance();
+    let h = new Date(e.start), d = 0;
     n.until && n.until < s && (s = n.until);
-    let g = l.getTimezoneOffset(d, c), w = 0;
-    const f = 3;
-    for (; d <= s && h < i; ) {
-      if (d >= t) {
-        const b = new Date(d), T = new Date(d.getTime() + o), A = l.getTimezoneOffset(b, c);
-        if (A !== g) {
-          const _ = g - A;
-          b.setMinutes(b.getMinutes() + _), T.setMinutes(T.getMinutes() + _);
+    let p = l.getTimezoneOffset(h, c), b = 0;
+    const v = 3;
+    for (; h <= s && d < i; ) {
+      if (h >= t) {
+        const D = new Date(h), T = new Date(h.getTime() + o), A = l.getTimezoneOffset(D, c);
+        if (A !== p) {
+          const I = p - A;
+          D.setMinutes(D.getMinutes() + I), T.setMinutes(T.getMinutes() + I);
         }
-        g = A, this.isException(b, n, e.id) || a.push({
-          start: b,
+        p = A, this.isException(D, n, e.id) || a.push({
+          start: D,
           end: T,
           recurringEventId: e.id,
           timezone: c,
           originalStart: e.start
         });
       }
-      const k = d.getTime();
-      if (d = this.getNextOccurrence(d, n, c), h++, d.getTime() === k) {
-        if (w++, w >= f) {
+      const M = h.getTime();
+      if (h = this.getNextOccurrence(h, n, c), d++, h.getTime() === M) {
+        if (b++, b >= v) {
           console.warn("RecurrenceEngine: Date not advancing, breaking to prevent infinite loop");
           break;
         }
       } else
-        w = 0;
-      if (n.count && h >= n.count)
+        b = 0;
+      if (n.count && d >= n.count)
         break;
     }
     return a;
@@ -2258,7 +2258,7 @@ class N {
    * @returns {import('../../types.js').RecurrenceRule} Parsed rule object
    */
   static parseRule(e) {
-    return Y.parse(e);
+    return Z.parse(e);
   }
   /**
    * Calculate the next occurrence based on the rule
@@ -2446,7 +2446,7 @@ class N {
     return r && (n = `${r === -1 ? "Last" : ["", "1st", "2nd", "3rd", "4th", "5th"][r] || `${r}th`} ${n}`), n;
   }
 }
-class z {
+class _ {
   /**
    * Create a new LRU Cache
    * @param {number} capacity - Maximum number of items in cache
@@ -2533,7 +2533,7 @@ class z {
     return this.cache.size;
   }
 }
-class j {
+class K {
   constructor(e = {}) {
     this.config = {
       checkInterval: 3e4,
@@ -2751,7 +2751,7 @@ class j {
     this.stopMonitoring(), this.caches.clear();
   }
 }
-class W {
+class G {
   constructor(e = {}) {
     this.config = {
       enableCache: !0,
@@ -2766,7 +2766,7 @@ class W {
       enableAdaptiveMemory: !0,
       // Enable adaptive memory management
       ...e
-    }, this.eventCache = new z(this.config.cacheCapacity), this.queryCache = new z(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new z(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new j({
+    }, this.eventCache = new _(this.config.cacheCapacity), this.queryCache = new _(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new _(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new K({
       checkInterval: 3e4,
       memoryThreshold: 0.75,
       criticalThreshold: 0.9
@@ -3056,7 +3056,7 @@ class W {
     this.cleanupTimer && (clearInterval(this.cleanupTimer), this.cleanupTimer = null), this.batchTimer && (clearTimeout(this.batchTimer), this.batchTimer = null), this.eventCache.clear(), this.queryCache.clear(), this.dateRangeCache.clear(), this.lazyIndexes.clear(), this.pendingIndexes.clear();
   }
 }
-class Z {
+class Q {
   /**
    * Create a new ConflictDetector
    * @param {import('../events/EventStore.js').EventStore} eventStore - Event store instance
@@ -3085,8 +3085,8 @@ class Z {
       throw new Error("Event must have start and end dates");
     const i = [], r = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), a = new Date(e.start.getTime() - s.bufferMinutes * 6e4), o = new Date(e.end.getTime() + s.bufferMinutes * 6e4), c = this.eventStore.getEventsInRange(a, o, !1).filter((l) => !(l.id === e.id || s.excludeEventIds.includes(l.id) || !s.includeStatuses.includes(l.status) || s.ignoreAllDay && (l.allDay || e.allDay) || l.status === "cancelled"));
     for (const l of c) {
-      const d = this._detectEventConflicts(e, l, s);
-      d.length > 0 && (i.push(...d), r.add(e.id), r.add(l.id), e.attendees && e.attendees.forEach((h) => n.add(h.email)), l.attendees && l.attendees.forEach((h) => n.add(h.email)));
+      const h = this._detectEventConflicts(e, l, s);
+      h.length > 0 && (i.push(...h), r.add(e.id), r.add(l.id), e.attendees && e.attendees.forEach((d) => n.add(d.email)), l.attendees && l.attendees.forEach((d) => n.add(d.email)));
     }
     return this._buildConflictSummary(i, r, n);
   }
@@ -3343,7 +3343,7 @@ class Z {
     return i >= n && r <= a;
   }
 }
-class q {
+class J {
   constructor(e = {}) {
     this.events = /* @__PURE__ */ new Map(), this.indices = {
       /** @type {Map<string, Set<string>>} UTC Date string -> Set of event IDs */
@@ -3356,7 +3356,7 @@ class q {
       byCategory: /* @__PURE__ */ new Map(),
       /** @type {Map<string, Set<string>>} Status -> Set of event IDs */
       byStatus: /* @__PURE__ */ new Map()
-    }, this.timezoneManager = S.getInstance(), this.defaultTimezone = e.timezone || this.timezoneManager.getSystemTimezone(), this.optimizer = new W(e.performance), this.conflictDetector = new Z(this), this.isBatchMode = !1, this.batchNotifications = [], this.batchBackup = null, this.version = 0, this.listeners = /* @__PURE__ */ new Set();
+    }, this.timezoneManager = C.getInstance(), this.defaultTimezone = e.timezone || this.timezoneManager.getSystemTimezone(), this.optimizer = new G(e.performance), this.conflictDetector = new Q(this), this.isBatchMode = !1, this.batchNotifications = [], this.batchBackup = null, this.version = 0, this.listeners = /* @__PURE__ */ new Set();
   }
   /**
    * Add an event to the store
@@ -3366,7 +3366,7 @@ class q {
    */
   addEvent(e) {
     return this.optimizer.measure("addEvent", () => {
-      if (e instanceof M || (e = new M(e)), this.events.has(e.id))
+      if (e instanceof w || (e = new w(e)), this.events.has(e.id))
         throw new Error(`Event with id ${e.id} already exists`);
       return this.events.set(e.id, e), this.optimizer.cache(e.id, e, "event"), this._indexEvent(e), this.isBatchMode ? this.batchNotifications.push({
         type: "add",
@@ -3478,13 +3478,13 @@ class q {
    * @returns {Event[]} Events occurring on the date, sorted by start time
    */
   getEventsForDate(e, t = null) {
-    t = t || this.defaultTimezone, u.getLocalDateString(e);
+    t = t || this.defaultTimezone, f.getLocalDateString(e);
     const s = /* @__PURE__ */ new Set(), i = new Date(e);
     for (let l = -1; l <= 1; l++) {
-      const d = new Date(i);
-      d.setDate(d.getDate() + l);
-      const h = u.getLocalDateString(d), g = this.indices.byDate.get(h);
-      g && g.forEach((w) => s.add(w));
+      const h = new Date(i);
+      h.setDate(h.getDate() + l);
+      const d = f.getLocalDateString(h), p = this.indices.byDate.get(d);
+      p && p.forEach((b) => s.add(b));
     }
     const r = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}`, n = this.indices.byMonth.get(r);
     n && n.forEach((l) => s.add(l));
@@ -3493,15 +3493,15 @@ class q {
     const c = new Date(e);
     c.setHours(23, 59, 59, 999);
     for (const l of s) {
-      const d = this.events.get(l);
-      if (d) {
-        const h = d.getStartInTimezone(t), g = d.getEndInTimezone(t);
-        h <= c && g >= o && a.push(d);
+      const h = this.events.get(l);
+      if (h) {
+        const d = h.getStartInTimezone(t), p = h.getEndInTimezone(t);
+        d <= c && p >= o && a.push(h);
       }
     }
-    return a.sort((l, d) => {
-      const h = l.getStartInTimezone(t), g = d.getStartInTimezone(t), w = h - g;
-      return w !== 0 ? w : d.duration - l.duration;
+    return a.sort((l, h) => {
+      const d = l.getStartInTimezone(t), p = h.getStartInTimezone(t), b = d - p;
+      return b !== 0 ? b : h.duration - l.duration;
     });
   }
   /**
@@ -3512,14 +3512,14 @@ class q {
    * @returns {Event[]} Array of overlapping events
    */
   getOverlappingEvents(e, t, s = null) {
-    const i = [], r = u.startOfDay(e), n = u.endOfDay(t), a = u.getDateRange(r, n), o = /* @__PURE__ */ new Set();
+    const i = [], r = f.startOfDay(e), n = f.endOfDay(t), a = f.getDateRange(r, n), o = /* @__PURE__ */ new Set();
     return a.forEach((c) => {
-      const l = u.getLocalDateString(c);
-      (this.indices.byDate.get(l) || /* @__PURE__ */ new Set()).forEach((h) => {
-        if (!o.has(h) && h !== s) {
-          o.add(h);
-          const g = this.events.get(h);
-          g && g.overlaps({ start: e, end: t }) && i.push(g);
+      const l = f.getLocalDateString(c);
+      (this.indices.byDate.get(l) || /* @__PURE__ */ new Set()).forEach((d) => {
+        if (!o.has(d) && d !== s) {
+          o.add(d);
+          const p = this.events.get(d);
+          p && p.overlaps({ start: e, end: t }) && i.push(p);
         }
       });
     }), i.sort((c, l) => c.start - l.start);
@@ -3612,8 +3612,8 @@ class q {
       } else
         o.push(c);
     }), o.sort((c, l) => {
-      const d = c.getStartInTimezone(i), h = l.getStartInTimezone(i);
-      return d - h;
+      const h = c.getStartInTimezone(i), d = l.getStartInTimezone(i);
+      return h - d;
     });
   }
   /**
@@ -3629,7 +3629,7 @@ class q {
       return [e];
     i = i || this.defaultTimezone;
     const r = e.timeZone || i;
-    return N.expandEvent(e, t, s).map((a, o) => e.clone({
+    return q.expandEvent(e, t, s).map((a, o) => e.clone({
       id: `${e.id}_occurrence_${o}`,
       start: a.start,
       end: a.end,
@@ -3680,9 +3680,9 @@ class q {
       this._indexEventLazy(e);
       return;
     }
-    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = u.startOfDay(t), r = u.endOfDay(s);
-    u.getDateRange(i, r).forEach((o) => {
-      const c = u.getLocalDateString(o);
+    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = f.startOfDay(t), r = f.endOfDay(s);
+    f.getDateRange(i, r).forEach((o) => {
+      const c = f.getLocalDateString(o);
       this.indices.byDate.has(c) || this.indices.byDate.set(c, /* @__PURE__ */ new Set()), this.indices.byDate.get(c).add(e.id);
     }), `${i.getFullYear()}${String(i.getMonth() + 1).padStart(2, "0")}`, `${r.getFullYear()}${String(r.getMonth() + 1).padStart(2, "0")}`;
     const a = new Date(i.getFullYear(), i.getMonth(), 1);
@@ -3700,21 +3700,21 @@ class q {
    */
   _indexEventLazy(e) {
     this.optimizer.createLazyIndexMarkers(e);
-    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = u.startOfDay(t), r = u.endOfDay(s), n = new Date(i);
-    if (n.setDate(n.getDate() + 7), u.getDateRange(
+    const t = e.getStartInTimezone(e.timeZone), s = e.getEndInTimezone(e.endTimeZone || e.timeZone), i = f.startOfDay(t), r = f.endOfDay(s), n = new Date(i);
+    if (n.setDate(n.getDate() + 7), f.getDateRange(
       i,
       n < r ? n : r
     ).forEach((c) => {
-      const l = u.getLocalDateString(c);
+      const l = f.getLocalDateString(c);
       this.indices.byDate.has(l) || this.indices.byDate.set(l, /* @__PURE__ */ new Set()), this.indices.byDate.get(l).add(e.id);
     }), r > n) {
       const c = new Date(r);
-      c.setDate(c.getDate() - 7), u.getDateRange(
+      c.setDate(c.getDate() - 7), f.getDateRange(
         c > i ? c : i,
         r
-      ).forEach((d) => {
-        const h = u.getLocalDateString(d);
-        this.indices.byDate.has(h) || this.indices.byDate.set(h, /* @__PURE__ */ new Set()), this.indices.byDate.get(h).add(e.id);
+      ).forEach((h) => {
+        const d = f.getLocalDateString(h);
+        this.indices.byDate.has(d) || this.indices.byDate.set(d, /* @__PURE__ */ new Set()), this.indices.byDate.get(d).add(e.id);
       });
     }
     const o = new Date(i.getFullYear(), i.getMonth(), 1);
@@ -4023,7 +4023,7 @@ class q {
     return t;
   }
 }
-let K = class {
+let X = class {
   /**
    * Create a new StateManager instance
    * @param {Partial<import('../../types.js').CalendarState>} [initialState={}] - Initial state values
@@ -4404,13 +4404,13 @@ let K = class {
           }
   }
 };
-class G {
+class ee {
   /**
    * Create a new Calendar instance
    * @param {import('../../types.js').CalendarConfig} [config={}] - Configuration options
    */
   constructor(e = {}) {
-    this.timezoneManager = S.getInstance(), this.config = {
+    this.timezoneManager = C.getInstance(), this.config = {
       view: "month",
       date: /* @__PURE__ */ new Date(),
       weekStartsOn: 0,
@@ -4425,7 +4425,7 @@ class G {
         end: "17:00"
       },
       ...e
-    }, this.eventStore = new q({ timezone: this.config.timeZone }), this.state = new K({
+    }, this.eventStore = new J({ timezone: this.config.timeZone }), this.state = new X({
       view: this.config.view,
       currentDate: this.config.date,
       weekStartsOn: this.config.weekStartsOn,
@@ -4516,7 +4516,7 @@ class G {
    * @returns {import('../events/Event.js').Event} The added event
    */
   addEvent(e) {
-    !(e instanceof M) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
+    !(e instanceof w) && !e.timeZone && (e = { ...e, timeZone: this.config.timeZone });
     const t = this.eventStore.addEvent(e);
     return this._emit("eventAdd", { event: t }), t;
   }
@@ -4714,32 +4714,32 @@ class G {
    * @private
    */
   _getMonthViewData(e) {
-    const t = e.getFullYear(), s = e.getMonth(), i = this.state.get("weekStartsOn"), r = this.state.get("fixedWeekCount"), n = new Date(t, s, 1), a = new Date(t, s + 1, 0), o = u.startOfWeek(n, i), c = [];
+    const t = e.getFullYear(), s = e.getMonth(), i = this.state.get("weekStartsOn"), r = this.state.get("fixedWeekCount"), n = new Date(t, s, 1), a = new Date(t, s + 1, 0), o = f.startOfWeek(n, i), c = [];
     let l = new Date(o);
-    const d = r ? 6 : Math.ceil((a.getDate() + u.getDayOfWeek(n, i)) / 7);
-    for (let h = 0; h < d; h++) {
-      const g = {
-        weekNumber: u.getWeekNumber(l),
+    const h = r ? 6 : Math.ceil((a.getDate() + f.getDayOfWeek(n, i)) / 7);
+    for (let d = 0; d < h; d++) {
+      const p = {
+        weekNumber: f.getWeekNumber(l),
         days: []
       };
-      for (let w = 0; w < 7; w++) {
-        const f = new Date(l), k = f.getMonth() === s, b = u.isToday(f), T = f.getDay() === 0 || f.getDay() === 6;
-        g.days.push({
-          date: f,
-          dayOfMonth: f.getDate(),
-          isCurrentMonth: k,
-          isToday: b,
+      for (let b = 0; b < 7; b++) {
+        const v = new Date(l), M = v.getMonth() === s, D = f.isToday(v), T = v.getDay() === 0 || v.getDay() === 6;
+        p.days.push({
+          date: v,
+          dayOfMonth: v.getDate(),
+          isCurrentMonth: M,
+          isToday: D,
           isWeekend: T,
-          events: this.getEventsForDate(f)
-        }), l = u.addDays(l, 1);
+          events: this.getEventsForDate(v)
+        }), l = f.addDays(l, 1);
       }
-      c.push(g);
+      c.push(p);
     }
     return {
       type: "month",
       year: t,
       month: s,
-      monthName: u.getMonthName(e, this.state.get("locale")),
+      monthName: f.getMonthName(e, this.state.get("locale")),
       weeks: c,
       startDate: o,
       endDate: new Date(l.getTime() - 1)
@@ -4751,15 +4751,15 @@ class G {
    * @private
    */
   _getWeekViewData(e) {
-    const t = this.state.get("weekStartsOn"), s = u.startOfWeek(e, t), i = u.endOfWeek(e, t), r = [], n = new Date(s);
+    const t = this.state.get("weekStartsOn"), s = f.startOfWeek(e, t), i = f.endOfWeek(e, t), r = [], n = new Date(s);
     for (let a = 0; a < 7; a++) {
       const o = new Date(n);
       r.push({
         date: o,
         dayOfMonth: o.getDate(),
         dayOfWeek: o.getDay(),
-        dayName: u.getDayName(o, this.state.get("locale")),
-        isToday: u.isToday(o),
+        dayName: f.getDayName(o, this.state.get("locale")),
+        isToday: f.isToday(o),
         isWeekend: o.getDay() === 0 || o.getDay() === 6,
         events: this.getEventsForDate(o),
         // Add overlap groups for positioning overlapping events
@@ -4769,7 +4769,7 @@ class G {
     }
     return {
       type: "week",
-      weekNumber: u.getWeekNumber(s),
+      weekNumber: f.getWeekNumber(s),
       startDate: s,
       endDate: i,
       days: r
@@ -4787,15 +4787,15 @@ class G {
       const o = new Date(e);
       o.setHours(n + 1, 0, 0, 0), r.push({
         hour: n,
-        time: u.formatTime(a, this.state.get("locale")),
+        time: f.formatTime(a, this.state.get("locale")),
         events: i.filter((c) => c.start < o && c.end > a)
       });
     }
     return {
       type: "day",
       date: e,
-      dayName: u.getDayName(e, this.state.get("locale")),
-      isToday: u.isToday(e),
+      dayName: f.getDayName(e, this.state.get("locale")),
+      isToday: f.isToday(e),
       allDayEvents: s,
       hours: r
     };
@@ -4819,8 +4819,8 @@ class G {
     });
     const n = Array.from(r.values()).sort((a, o) => a.date - o.date).map((a) => ({
       ...a,
-      dayName: u.getDayName(a.date, this.state.get("locale")),
-      isToday: u.isToday(a.date)
+      dayName: f.getDayName(a.date, this.state.get("locale")),
+      isToday: f.isToday(a.date)
     }));
     return {
       type: "list",
@@ -4925,7 +4925,7 @@ class G {
     }), this.plugins.clear(), this.views.clear(), this._emit("destroy");
   }
 }
-class Q {
+class te {
   constructor() {
     this.events = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set();
   }
@@ -5067,10 +5067,10 @@ class Q {
     return e;
   }
 }
-const y = new Q();
-class J {
+const m = new te();
+class se {
   constructor(e = {}) {
-    this.calendar = new G({
+    this.calendar = new ee({
       view: e.view || "month",
       date: e.date || /* @__PURE__ */ new Date(),
       weekStartsOn: e.weekStartsOn ?? 0,
@@ -5147,51 +5147,51 @@ class J {
       (i) => e[i] !== t[i]
     );
     s.forEach((i) => {
-      y.emit(`state:${i}:changed`, {
+      m.emit(`state:${i}:changed`, {
         oldValue: e[i],
         newValue: t[i],
         state: t
       });
-    }), s.length > 0 && y.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
+    }), s.length > 0 && m.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
   }
   // Calendar operations
   setView(e) {
-    this.calendar.setView(e), this.setState({ view: e }), y.emit("view:changed", { view: e });
+    this.calendar.setView(e), this.setState({ view: e }), m.emit("view:changed", { view: e });
   }
   getView() {
     return this.state.view;
   }
   setDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("date:changed", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("date:changed", { date: this.state.currentDate });
   }
   getCurrentDate() {
     return this.state.currentDate;
   }
   // Navigation
   next() {
-    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:next", { date: this.state.currentDate });
+    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:next", { date: this.state.currentDate });
   }
   previous() {
-    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:previous", { date: this.state.currentDate });
+    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:previous", { date: this.state.currentDate });
   }
   today() {
-    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:today", { date: this.state.currentDate });
+    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:today", { date: this.state.currentDate });
   }
   goToDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), y.emit("navigation:goto", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:goto", { date: this.state.currentDate });
   }
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
-    return t ? (this._syncEventsFromCore(), y.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), y.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
+    return t ? (this._syncEventsFromCore(), m.emit("event:added", { event: t }), t) : (console.error("Failed to add event to calendar"), m.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null);
   }
   updateEvent(e, t) {
     this._syncEventsFromCore({ silent: !0 });
     const s = this.calendar.updateEvent(e, t);
-    return s ? (this._syncEventsFromCore(), y.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), y.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
+    return s ? (this._syncEventsFromCore(), m.emit("event:updated", { event: s }), s) : (console.error(`Failed to update event: ${e}`), m.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null);
   }
   deleteEvent(e) {
-    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), y.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), y.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
+    return this._syncEventsFromCore({ silent: !0 }), this.calendar.removeEvent(e) ? (this._syncEventsFromCore(), m.emit("event:deleted", { eventId: e }), !0) : (console.error(`Failed to delete event: ${e}`), m.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1);
   }
   getEvents() {
     return this.calendar.getEvents() || [];
@@ -5242,20 +5242,20 @@ class J {
   }
   // Selection management
   selectEvent(e) {
-    this.setState({ selectedEvent: e }), y.emit("event:selected", { event: e });
+    this.setState({ selectedEvent: e }), m.emit("event:selected", { event: e });
   }
   selectEventById(e) {
     const t = this.state.events.find((s) => s.id === e);
     t && this.selectEvent(t);
   }
   deselectEvent() {
-    this.setState({ selectedEvent: null }), y.emit("event:deselected", {});
+    this.setState({ selectedEvent: null }), m.emit("event:deselected", {});
   }
   selectDate(e) {
-    this.setState({ selectedDate: e }), y.emit("date:selected", { date: e });
+    this.setState({ selectedDate: e }), m.emit("date:selected", { date: e });
   }
   deselectDate() {
-    this.setState({ selectedDate: null }), y.emit("date:deselected", {});
+    this.setState({ selectedDate: null }), m.emit("date:deselected", {});
   }
   // Utility methods
   isToday(e) {
@@ -5275,7 +5275,7 @@ class J {
   }
   // Error handling
   setError(e) {
-    this.setState({ error: e }), e && y.emit("error", { error: e });
+    this.setState({ error: e }), e && m.emit("error", { error: e });
   }
   clearError() {
     this.setState({ error: null });
@@ -5289,7 +5289,7 @@ class J {
     this.subscribers.clear(), this._subscriberIds && (this._subscriberIds.clear(), this._subscriberIds = null), this.state = null, this.calendar = null;
   }
 }
-class x extends u {
+class S extends f {
   /**
    * Format date for display
    */
@@ -5351,8 +5351,8 @@ class x extends u {
    * Get relative time string (e.g., "2 hours ago", "in 3 days")
    */
   static getRelativeTime(e, t = /* @__PURE__ */ new Date(), s = "en-US") {
-    const i = new Intl.RelativeTimeFormat(s, { numeric: "auto" }), r = e - t, n = Math.floor(r / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), l = Math.floor(c / 7), d = Math.floor(c / 30), h = Math.floor(c / 365);
-    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(a) < 60 ? i.format(a, "minute") : Math.abs(o) < 24 ? i.format(o, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(l) < 4 ? i.format(l, "week") : Math.abs(d) < 12 ? i.format(d, "month") : i.format(h, "year");
+    const i = new Intl.RelativeTimeFormat(s, { numeric: "auto" }), r = e - t, n = Math.floor(r / 1e3), a = Math.floor(n / 60), o = Math.floor(a / 60), c = Math.floor(o / 24), l = Math.floor(c / 7), h = Math.floor(c / 30), d = Math.floor(c / 365);
+    return Math.abs(n) < 60 ? i.format(n, "second") : Math.abs(a) < 60 ? i.format(a, "minute") : Math.abs(o) < 24 ? i.format(o, "hour") : Math.abs(c) < 7 ? i.format(c, "day") : Math.abs(l) < 4 ? i.format(l, "week") : Math.abs(h) < 12 ? i.format(h, "month") : i.format(d, "year");
   }
   /**
    * Check if date is today
@@ -5403,7 +5403,7 @@ class x extends u {
     return r && (r.toLowerCase() === "pm" && n < 12 ? o = n + 12 : r.toLowerCase() === "am" && n === 12 && (o = 0)), s.setHours(o, a || 0, 0, 0), s;
   }
 }
-class C {
+class L {
   /**
    * Create element with attributes and children
    */
@@ -5598,7 +5598,7 @@ class C {
     return e.addEventListener("keydown", r), s == null || s.focus(), () => e.removeEventListener("keydown", r);
   }
 }
-class v {
+class x {
   /**
    * Get CSS variable value
    */
@@ -5935,7 +5935,7 @@ class v {
 /**
  * Default theme colors
  */
-I(v, "colors", {
+$(x, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5968,7 +5968,7 @@ I(v, "colors", {
 }), /**
  * Common CSS variables
  */
-I(v, "cssVariables", {
+$(x, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -6036,7 +6036,7 @@ I(v, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-I(v, "breakpoints", {
+$(x, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -6044,101 +6044,89 @@ I(v, "breakpoints", {
   xl: "1200px",
   "2xl": "1400px"
 });
-class X extends $ {
-  constructor() {
-    super(), this._stateManager = null, this.viewData = null, this.config = {
-      maxEventsToShow: 3
-    }, this._registryCheckInterval = null;
-  }
-  connectedCallback() {
-    super.connectedCallback(), console.log("[MonthView] connectedCallback - starting registry polling"), this._startRegistryPolling();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._stopRegistryPolling();
-  }
-  _startRegistryPolling() {
-    this._checkRegistry();
-    let e = 0;
-    this._registryCheckInterval = setInterval(() => {
-      if (e++, this._stateManager || e > 50) {
-        this._stopRegistryPolling();
-        return;
-      }
-      this._checkRegistry();
-    }, 100);
-  }
-  _stopRegistryPolling() {
-    this._registryCheckInterval && (clearInterval(this._registryCheckInterval), this._registryCheckInterval = null);
+class H {
+  /**
+   * @param {HTMLElement} container - The DOM element to render into
+   * @param {StateManager} stateManager - The state manager instance
+   */
+  constructor(e, t) {
+    this.container = e, this.stateManager = t, this._listeners = [], this._scrolled = !1;
   }
-  _checkRegistry() {
-    const e = this.getAttribute("data-state-registry");
-    if (console.log("[MonthView] Checking registry for ID:", e), e && window.__forceCalendarRegistry && window.__forceCalendarRegistry[e]) {
-      const t = window.__forceCalendarRegistry[e];
-      console.log("[MonthView] Found stateManager in registry"), this._stopRegistryPolling(), this.setStateManager(t);
-    }
+  /**
+   * Render the view into the container
+   * Must be implemented by subclasses
+   */
+  render() {
+    throw new Error("render() must be implemented by subclass");
   }
-  set stateManager(e) {
-    console.log("[MonthView] stateManager setter called with:", !!e), this.setStateManager(e);
+  /**
+   * Clean up event listeners
+   */
+  cleanup() {
+    this._listeners.forEach(({ element: e, event: t, handler: s }) => {
+      e.removeEventListener(t, s);
+    }), this._listeners = [];
   }
-  // Method alternative for Salesforce Locker Service compatibility
-  setStateManager(e) {
-    if (console.log("[MonthView] setStateManager method called with:", !!e), this._stateManager === e) {
-      console.log("[MonthView] stateManager already set, skipping");
-      return;
-    }
-    this._stateManager = e, e && (console.log("[MonthView] Subscribing to state changes and loading view data"), this.unsubscribe = e.subscribe(this.handleStateUpdate.bind(this)), this.loadViewData());
+  /**
+   * Add an event listener with automatic cleanup tracking
+   * @param {HTMLElement} element
+   * @param {string} event
+   * @param {Function} handler
+   */
+  addListener(e, t, s) {
+    const i = s.bind(this);
+    e.addEventListener(t, i), this._listeners.push({ element: e, event: t, handler: i });
   }
-  get stateManager() {
-    return this._stateManager;
+  /**
+   * Escape HTML to prevent XSS
+   * @param {string} str
+   * @returns {string}
+   */
+  escapeHTML(e) {
+    return e == null ? "" : L.escapeHTML(String(e));
   }
-  handleStateUpdate(e, t) {
-    if (e.currentDate !== t.currentDate) {
-      this.loadViewData();
-      return;
-    }
-    e.events !== t.events && this.updateEvents(), e.selectedDate !== t.selectedDate && this.updateSelection(e.selectedDate, t.selectedDate);
+  /**
+   * Check if a date is today
+   * @param {Date} date
+   * @returns {boolean}
+   */
+  isToday(e) {
+    const t = /* @__PURE__ */ new Date();
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
   }
-  updateEvents() {
-    this.loadViewData();
+  /**
+   * Check if two dates are the same day
+   * @param {Date} date1
+   * @param {Date} date2
+   * @returns {boolean}
+   */
+  isSameDay(e, t) {
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
   }
-  updateSelection(e, t) {
-    if (t) {
-      const s = this.shadowRoot.querySelector(`[data-date^="${t.toISOString().split("T")[0]}"]`);
-      s && s.classList.remove("selected");
-    }
-    if (e) {
-      const s = this.shadowRoot.querySelector(`[data-date^="${e.toISOString().split("T")[0]}"]`);
-      s && s.classList.add("selected");
-    }
+  /**
+   * Format hour for display (e.g., "9 AM", "2 PM")
+   * @param {number} hour - Hour in 24-hour format (0-23)
+   * @returns {string}
+   */
+  formatHour(e) {
+    const t = e >= 12 ? "PM" : "AM";
+    return `${e % 12 || 12} ${t}`;
   }
-  loadViewData() {
-    if (console.log("[MonthView] loadViewData called, stateManager:", !!this.stateManager), !this.stateManager) return;
-    const e = this.stateManager.getViewData();
-    console.log("[MonthView] viewData from stateManager:", e), this.viewData = this.processViewData(e), console.log("[MonthView] processed viewData:", this.viewData), this.render(), console.log("[MonthView] render completed");
-  }
-  processViewData(e) {
-    var i, r;
-    if (!e || !e.weeks) return null;
-    const t = (r = (i = this.stateManager) == null ? void 0 : i.getState()) == null ? void 0 : r.selectedDate, s = e.weeks.map((n) => n.days.map((a) => {
-      const o = new Date(a.date), c = t && o.toDateString() === t.toDateString(), l = a.events.map((d) => ({
-        ...d,
-        textColor: this.getContrastingTextColor(d.backgroundColor)
-      }));
-      return {
-        ...a,
-        date: o,
-        isOtherMonth: !a.isCurrentMonth,
-        isSelected: c,
-        events: l
-      };
-    }));
-    return {
-      ...e,
-      weeks: s,
-      month: e.month,
-      year: e.year
-    };
+  /**
+   * Format time for display (e.g., "9 AM", "2:30 PM")
+   * @param {Date} date
+   * @returns {string}
+   */
+  formatTime(e) {
+    const t = e.getHours(), s = e.getMinutes(), i = t >= 12 ? "PM" : "AM", r = t % 12 || 12;
+    return s === 0 ? `${r} ${i}` : `${r}:${s.toString().padStart(2, "0")} ${i}`;
   }
+  /**
+   * Get contrasting text color for a background color
+   * Uses WCAG luminance formula
+   * @param {string} bgColor - Hex color string
+   * @returns {string} 'black' or 'white'
+   */
   getContrastingTextColor(e) {
     if (!e || typeof e != "string") return "white";
     const t = e.charAt(0) === "#" ? e.substring(1) : e;
@@ -6150,1019 +6138,385 @@ class X extends $ {
     const o = [i / 255, r / 255, n / 255].map((l) => l <= 0.03928 ? l / 12.92 : Math.pow((l + 0.055) / 1.055, 2.4));
     return 0.2126 * o[0] + 0.7152 * o[1] + 0.0722 * o[2] > 0.179 ? "black" : "white";
   }
-  isSelectedDate(e) {
-    var s, i;
-    const t = (i = (s = this.stateManager) == null ? void 0 : s.getState()) == null ? void 0 : i.selectedDate;
-    return t && e.toDateString() === t.toDateString();
+  /**
+   * Render the "now" indicator line for time-based views
+   * @returns {string} HTML string
+   */
+  renderNowIndicator() {
+    const e = /* @__PURE__ */ new Date();
+    return `<div class="fc-now-indicator" style="position: absolute; left: 0; right: 0; top: ${e.getHours() * 60 + e.getMinutes()}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
   }
-  getStyles() {
+  /**
+   * Render a timed event block
+   * @param {Object} event - Event object
+   * @param {Object} options - Rendering options
+   * @returns {string} HTML string
+   */
+  renderTimedEvent(e, t = {}) {
+    const { compact: s = !0 } = t, i = new Date(e.start), r = new Date(e.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), s ? 20 : 30), o = e.backgroundColor || "#2563eb", c = s ? "4px 8px" : "8px 12px", l = s ? "11px" : "13px", h = s ? "2px" : "12px", d = s ? "2px" : "24px", p = s ? "4px" : "6px";
     return `
-            :host {
-                display: block;
-                height: 100%;
-            }
-
-            .month-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                background: var(--fc-background);
-            }
-
-            .month-header {
-                display: grid;
-                grid-template-columns: repeat(7, 1fr);
-                background: var(--fc-background);
-                border-bottom: 1px solid var(--fc-border-color);
-                z-index: 5;
-            }
-
-            .month-header-cell {
-                padding: var(--fc-spacing-sm);
-                text-align: left; /* Align with dates */
-                font-weight: var(--fc-font-weight-bold);
-                font-size: 10px;
-                color: var(--fc-text-light);
-                text-transform: uppercase;
-                letter-spacing: 0.1em;
-                border-left: 1px solid transparent; /* Alignment hack */
-                padding-left: 8px;
-            }
-
-            .month-body {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                overflow: hidden;
-            }
-
-            .month-week {
-                flex: 1;
-                display: grid;
-                grid-template-columns: repeat(7, 1fr);
-                border-bottom: 1px solid var(--fc-border-color);
-            }
-            
-            .month-week:last-child {
-                border-bottom: none;
-            }
-
-            .month-day {
-                background: var(--fc-background);
-                padding: 4px;
-                position: relative;
-                cursor: default;
-                overflow: hidden;
-                min-height: 80px;
-                border-right: 1px solid var(--fc-border-color);
-                display: flex;
-                flex-direction: column;
-                min-width: 0; /* Critical for Grid Item shrinking */
-            }
-
-            .month-day:last-child {
-                border-right: none;
-            }
-
-            .month-day:hover {
-                background: var(--fc-background-alt);
-            }
-
-            .month-day.other-month {
-                background: var(--fc-background-alt);
-                background-image: linear-gradient(45deg, #f9fafb 25%, transparent 25%, transparent 50%, #f9fafb 50%, #f9fafb 75%, transparent 75%, transparent);
-                background-size: 10px 10px;
-            }
-
-            .month-day.other-month .day-number {
-                color: var(--fc-text-light);
-                opacity: 0.5;
-            }
-
-            .month-day.selected {
-                background: var(--fc-background-hover);
-            }
-
-            .day-header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 4px;
-                margin-bottom: 2px;
-            }
-            
-            .day-number {
-                font-size: 12px;
-                font-family: var(--fc-font-family); /* Ensure monospaced feel if available */
-                font-weight: var(--fc-font-weight-medium);
-                color: var(--fc-text-color);
-                line-height: 1;
-            }
-            
-            .month-day.today .day-number {
-                color: white;
-                background: var(--fc-danger-color); /* Red for Today (Calendar standard) */
-                width: 20px;
-                height: 20px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                margin-left: -4px; /* Optical adjustment */
-            }
-
-            .day-events {
-                display: flex;
-                flex-direction: column;
-                gap: 2px;
-                flex: 1;
-                overflow: hidden;
-            }
-
-            /* Precision Event Style */
-            .event-item {
-                font-size: 11px;
-                padding: 2px 6px;
-                border-radius: 2px; /* Micro rounding */
-                
-                /* High Contrast */
-                background: var(--fc-primary-color);
-                color: white;
-                
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                cursor: pointer;
-                line-height: 1.3;
-                font-weight: var(--fc-font-weight-medium);
-                margin: 0 1px;
-                border: 1px solid rgba(0,0,0,0.05); /* Subtle border for definition */
-            }
-
-            .event-item:hover {
-                opacity: 0.9;
-            }
-
-            .event-time {
-                font-weight: var(--fc-font-weight-bold);
-                margin-right: 4px;
-                opacity: 0.9;
-                font-size: 10px;
-            }
-
-            .more-events {
-                font-size: 10px;
-                color: var(--fc-text-secondary);
-                cursor: pointer;
-                padding: 1px 4px;
-                font-weight: var(--fc-font-weight-medium);
-                text-align: right;
-            }
-
-            .more-events:hover {
-                color: var(--fc-text-color);
-                text-decoration: underline;
-            }
-
-            /* Responsive adjustments */
-            @media (max-width: 768px) {
-                .month-day {
-                    min-height: 60px;
-                    padding: 2px;
-                }
-
-                .day-number {
-                    font-size: 11px;
-                }
-
-                .event-item {
-                    font-size: 10px;
-                    padding: 1px 3px;
-                }
-
-                .month-header-cell {
-                    font-size: 9px;
-                    padding: 4px;
-                }
-            }
-
-            /* Loading state */
-            .month-loading {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-                color: var(--fc-text-secondary);
-                font-weight: var(--fc-font-weight-medium);
-            }
-
-            /* Empty state */
-            .month-empty {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-                color: var(--fc-text-secondary);
-                gap: var(--fc-spacing-md);
-            }
-
-            .empty-icon {
-                width: 48px;
-                height: 48px;
-                opacity: 0.3;
-            }
+            <div class="fc-event fc-timed-event" data-event-id="${this.escapeHTML(e.id)}"
+                 style="position: absolute; top: ${n}px; height: ${a}px;
+                        left: ${h}; right: ${d};
+                        background-color: ${o}; border-radius: ${p};
+                        padding: ${c}; font-size: ${l};
+                        font-weight: 500; color: white; overflow: hidden;
+                        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                        cursor: pointer; z-index: 5;">
+                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                    ${this.escapeHTML(e.title)}
+                </div>
+                <div style="font-size: ${s ? "10px" : "11px"}; opacity: 0.9;">
+                    ${this.formatTime(i)}${s ? "" : " - " + this.formatTime(r)}
+                </div>
+            </div>
         `;
   }
-  template() {
-    return this.viewData ? `
-            <div class="month-view">
-                ${this.renderHeader()}
-                ${this.renderBody()}
-            </div>
-        ` : `
-                <div class="month-view">
-                    <div class="month-loading">Loading calendar...</div>
+  /**
+   * Attach common event handlers for day/event clicks
+   */
+  attachCommonEventHandlers() {
+    this.container.querySelectorAll(".fc-event").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        t.stopPropagation();
+        const s = e.dataset.eventId, i = this.stateManager.getEvents().find((r) => r.id === s);
+        i && this.stateManager.selectEvent(i);
+      });
+    });
+  }
+}
+class E extends H {
+  constructor(e, t) {
+    super(e, t), this.maxEventsToShow = 3;
+  }
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e || !e.weeks) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
+      return;
+    }
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderMonthView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers();
+  }
+  _renderMonthView(e, t) {
+    const s = t.weekStartsOn || 0;
+    let r = `
+            <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
+                <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
+                    ${this._getDayNames(s).map((n) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${n}</div>`).join("")}
                 </div>
-            `;
+                <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
+        `;
+    return e.weeks.forEach((n) => {
+      r += this._renderWeek(n);
+    }), r += "</div></div>", r;
   }
-  renderHeader() {
-    const { config: e } = this.stateManager.getState(), t = [], s = e.weekStartsOn || 0;
+  _getDayNames(e) {
+    const t = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], s = [];
     for (let i = 0; i < 7; i++) {
-      const r = (s + i) % 7, n = x.getDayAbbreviation(r, e.locale);
-      t.push(`<div class="month-header-cell">${n}</div>`);
+      const r = (e + i) % 7;
+      s.push(t[r]);
     }
-    return `
-            <div class="month-header">
-                ${t.join("")}
-            </div>
-        `;
+    return s;
   }
-  renderBody() {
-    return !this.viewData.weeks || this.viewData.weeks.length === 0 ? `
-                <div class="month-body">
-                    <div class="month-empty">
-                        <svg class="empty-icon" viewBox="0 0 24 24">
-                            <path fill="currentColor" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
-                        </svg>
-                        <p>No calendar data available</p>
-                    </div>
+  _renderWeek(e) {
+    let t = '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
+    return e.days.forEach((s) => {
+      t += this._renderDay(s);
+    }), t += "</div>", t;
+  }
+  _renderDay(e) {
+    const t = !e.isCurrentMonth, s = e.isToday, i = t ? "#f3f4f6" : "#fff", r = t ? "#9ca3af" : "#111827", n = s ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", a = e.events || [], o = a.slice(0, this.maxEventsToShow), c = a.length - this.maxEventsToShow;
+    return `
+            <div class="fc-month-day" data-date="${e.date}"
+                 style="background: ${i}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
+                <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${r}; padding: 2px 4px; margin-bottom: 4px; ${n}">
+                    ${e.dayOfMonth}
+                </div>
+                <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden;">
+                    ${o.map((l) => this._renderEvent(l)).join("")}
+                    ${c > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${c} more</div>` : ""}
                 </div>
-            ` : `
-            <div class="month-body">
-                ${this.viewData.weeks.map((t) => this.renderWeek(t)).join("")}
             </div>
         `;
   }
-  renderWeek(e) {
+  _renderEvent(e) {
+    const t = e.backgroundColor || "#2563eb";
     return `
-            <div class="month-week">
-                ${e.map((s) => this.renderDay(s)).join("")}
+            <div class="fc-event" data-event-id="${this.escapeHTML(e.id)}"
+                 style="background-color: ${t}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                ${this.escapeHTML(e.title)}
             </div>
         `;
   }
-  renderDay(e) {
-    const { date: t, dayOfMonth: s, isOtherMonth: i, isToday: r, isSelected: n, isWeekend: a, events: o = [] } = e, c = s, l = ["month-day"];
-    i && l.push("other-month"), r && l.push("today"), n && l.push("selected"), a && l.push("weekend");
-    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, g = d.map((f) => this.renderEvent(f)).join(""), w = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
-    return `
-            <div class="${l.join(" ")}"
-                 data-date="${t.toISOString()}"
-                 data-day="${c}">
-                <div class="day-header">
-                    <span class="day-number">${c}</span>
-                </div>
-                <div class="day-events">
-                    ${g}
-                    ${w}
-                </div>
-            </div>
-        `;
-  }
-  renderEvent(e) {
-    const { title: t, start: s, allDay: i, backgroundColor: r, textColor: n } = e;
-    let a = "";
-    if (r) {
-      const l = v.sanitizeColor(r), d = v.sanitizeColor(n, "white");
-      a += `background-color: ${l}; color: ${d};`;
-    }
-    let o = "";
-    !i && s && (o = x.formatTime(new Date(s), !1, !1));
-    const c = ["event-item"];
-    return i && c.push("all-day"), `
-            <div class="${c.join(" ")}"
-                 style="${a}"
-                 data-event-id="${e.id}"
-                 title="${C.escapeHTML(t)}">
-                ${o ? `<span class="event-time">${o}</span>` : ""}
-                <span class="event-title">${C.escapeHTML(t)}</span>
-            </div>
-        `;
-  }
-  afterRender() {
-    this.$$(".month-day").forEach((e) => {
-      this.addListener(e, "click", this.handleDayClick);
-    }), this.$$(".event-item").forEach((e) => {
-      this.addListener(e, "click", this.handleEventClick);
-    }), this.$$(".more-events").forEach((e) => {
-      this.addListener(e, "click", this.handleMoreClick);
-    });
-  }
-  handleDayClick(e) {
-    e.stopPropagation();
-    const t = e.currentTarget, s = new Date(t.dataset.date);
-    this.stateManager.selectDate(s), this.emit("day-click", { date: s });
-  }
-  handleEventClick(e) {
-    e.stopPropagation();
-    const s = e.currentTarget.dataset.eventId, i = this.stateManager.getEvents().find((r) => r.id === s);
-    i && (this.stateManager.selectEvent(i), this.emit("event-click", { event: i }));
-  }
-  handleMoreClick(e) {
-    e.stopPropagation();
-    const t = e.currentTarget.closest(".month-day"), s = new Date(t.dataset.date), i = this.stateManager.getEventsForDate(s);
-    this.emit("more-events-click", { date: s, events: i });
-  }
-  unmount() {
-    this.unsubscribe && this.unsubscribe();
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-month-day").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date);
+        this.stateManager.selectDate(s);
+      });
+    }), this.attachCommonEventHandlers();
   }
 }
-class ee extends $ {
-  constructor() {
-    super(), this._stateManager = null, this.viewData = null, this.hours = Array.from({ length: 24 }, (e, t) => t), this._registryCheckInterval = null;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._startRegistryPolling();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._registryCheckInterval && clearInterval(this._registryCheckInterval);
-  }
-  _startRegistryPolling() {
-    this._checkRegistry();
-    let e = 0;
-    this._registryCheckInterval = setInterval(() => {
-      if (e++, this._stateManager || e > 50) {
-        clearInterval(this._registryCheckInterval);
-        return;
-      }
-      this._checkRegistry();
-    }, 100);
-  }
-  _checkRegistry() {
-    const e = this.getAttribute("data-state-registry");
-    e && window.__forceCalendarRegistry && window.__forceCalendarRegistry[e] && (clearInterval(this._registryCheckInterval), this.setStateManager(window.__forceCalendarRegistry[e]));
+class z extends H {
+  constructor(e, t) {
+    super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
-  set stateManager(e) {
-    this.setStateManager(e);
-  }
-  setStateManager(e) {
-    this._stateManager !== e && (this._stateManager = e, e && (this.unsubscribe = e.subscribe(this.handleStateUpdate.bind(this)), this.loadViewData()));
-  }
-  get stateManager() {
-    return this._stateManager;
-  }
-  handleStateUpdate(e, t) {
-    if (e.currentDate !== (t == null ? void 0 : t.currentDate) || e.view !== (t == null ? void 0 : t.view)) {
-      this.loadViewData();
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e || !e.days || e.days.length === 0) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
       return;
     }
-    e.events !== (t == null ? void 0 : t.events) && this.loadViewData(), e.selectedDate !== (t == null ? void 0 : t.selectedDate) && this.updateSelection(e.selectedDate, t == null ? void 0 : t.selectedDate);
-  }
-  updateSelection(e, t) {
-    if (t) {
-      const s = this.shadowRoot.querySelector(`[data-date^="${t.toISOString().split("T")[0]}"]`);
-      s && s.classList.remove("selected");
-    }
-    if (e) {
-      const s = this.shadowRoot.querySelector(`[data-date^="${e.toISOString().split("T")[0]}"]`);
-      s && s.classList.add("selected");
-    }
-  }
-  loadViewData() {
-    if (!this.stateManager) return;
-    const e = this.stateManager.getViewData();
-    this.viewData = this.processViewData(e), this.render();
-  }
-  processViewData(e) {
-    if (!e) return null;
-    let t = [];
-    return e.weeks && e.weeks.length > 0 ? t = e.weeks[0].days : e.days && (t = e.days), !t || t.length === 0 ? null : {
-      ...e,
-      days: t.map((s) => {
-        const i = new Date(s.date);
-        return {
-          ...s,
-          date: i,
-          isToday: x.isToday(i),
-          timedEvents: (s.events || []).filter((r) => !r.allDay),
-          allDayEvents: (s.events || []).filter((r) => r.allDay)
-        };
-      })
-    };
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderWeekView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers(), this._scrollToCurrentTime();
   }
-  getStyles() {
+  _renderWeekView(e, t) {
+    const s = e.days, i = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = Array.from({ length: 24 }, (a, o) => o), n = s.map((a) => {
+      const o = new Date(a.date), c = a.events || [];
+      return {
+        ...a,
+        date: o,
+        dayName: i[o.getDay()],
+        dayOfMonth: o.getDate(),
+        isToday: this.isToday(o),
+        timedEvents: c.filter((l) => !l.allDay),
+        allDayEvents: c.filter((l) => l.allDay)
+      };
+    });
     return `
-            :host {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                min-height: 0;
-            }
-
-            .week-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                background: var(--fc-background);
-                min-height: 0;
-                overflow: hidden;
-            }
-
-            /* Header Section */
-            .week-header {
-                display: grid;
-                grid-template-columns: 60px repeat(7, 1fr);
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background);
-                z-index: 20;
-                flex-shrink: 0;
-            }
-
-            .day-column-header {
-                padding: 12px 8px;
-                text-align: center;
-                border-right: 1px solid var(--fc-border-color);
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 4px;
-            }
-
-            .day-name {
-                font-size: 10px;
-                font-weight: 700;
-                color: var(--fc-text-light);
-                text-transform: uppercase;
-                letter-spacing: 0.1em;
-            }
-
-            .day-number {
-                font-size: 16px;
-                font-weight: 500;
-                width: 28px;
-                height: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                color: var(--fc-text-color);
-            }
-
-            .is-today .day-number {
-                background: var(--fc-danger-color);
-                color: white;
-                font-weight: 700;
-            }
-
-            /* All Day Events Row */
-            .all-day-row {
-                display: grid;
-                grid-template-columns: 60px repeat(7, 1fr);
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                min-height: 32px;
-                flex-shrink: 0;
-            }
-
-            .all-day-label {
-                font-size: 9px;
-                color: var(--fc-text-light);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-right: 1px solid var(--fc-border-color);
-                text-transform: uppercase;
-                font-weight: 700;
-            }
-
-            .all-day-cell {
-                border-right: 1px solid var(--fc-border-color);
-                padding: 4px;
-                display: flex;
-                flex-direction: column;
-                gap: 2px;
-            }
-
-            /* Body Section */
-            .week-body {
-                flex: 1;
-                overflow-y: auto;
-                overflow-x: hidden;
-                position: relative;
-                display: grid;
-                grid-template-columns: 60px repeat(7, 1fr);
-                background: var(--fc-background);
-            }
-
-            .time-gutter {
-                border-right: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                height: 1440px;
-            }
-
-            .time-slot-label {
-                height: 60px;
-                font-size: 10px;
-                color: var(--fc-text-light);
-                text-align: right;
-                padding-right: 8px;
-                font-weight: 500;
-            }
-
-            .day-column {
-                border-right: 1px solid var(--fc-border-color);
-                position: relative;
-                height: 1440px;
-            }
-
-            .day-column.selected {
-                background: var(--fc-background-hover);
-            }
-
-            /* Grid Lines Layer */
-            .grid-lines {
-                position: absolute;
-                top: 0;
-                left: 60px;
-                right: 0;
-                bottom: 0;
-                pointer-events: none;
-            }
-
-            .grid-line {
-                height: 60px;
-                border-bottom: 1px solid var(--fc-border-color);
-                width: 100%;
-            }
-            
-            .grid-line:last-child {
-                border-bottom: none;
-            }
-
-            .event-container {
-                position: absolute;
-                left: 2px;
-                right: 2px;
-                border-radius: 4px;
-                padding: 4px 8px;
-                font-size: 11px;
-                font-weight: 500;
-                color: white;
-                background: var(--fc-primary-color);
-                border: 1px solid rgba(0,0,0,0.1);
-                overflow: hidden;
-                box-shadow: var(--fc-shadow-sm);
-                cursor: pointer;
-                transition: transform 0.1s;
-                z-index: 5;
-            }
-
-            .event-container:hover {
-                z-index: 10;
-                transform: scale(1.02);
-            }
-
-            .now-indicator {
-                position: absolute;
-                left: 0;
-                right: 0;
-                height: 2px;
-                background: var(--fc-danger-color);
-                z-index: 15;
-                pointer-events: none;
-            }
+            <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(n)}
+                ${this._renderAllDayRow(n)}
+                ${this._renderTimeGrid(n, r)}
+            </div>
         `;
   }
-  template() {
-    return this.viewData ? `
-            <div class="week-view">
-                <div class="week-header">
-                    <div class="time-gutter-header"></div>
-                    ${this.viewData.days.map((e) => `
-                        <div class="day-column-header ${e.isToday ? "is-today" : ""}">
-                            <span class="day-name">${x.getDayAbbreviation(e.date.getDay())}</span>
-                            <span class="day-number">${e.date.getDate()}</span>
+  _renderHeader(e) {
+    return `
+            <div class="fc-week-header" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                ${e.map((t) => `
+                    <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
+                        <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                            ${t.dayName}
                         </div>
-                    `).join("")}
-                </div>
-
-                <div class="all-day-row">
-                    <div class="all-day-label">All day</div>
-                    ${this.viewData.days.map((e) => `
-                        <div class="all-day-cell">
-                            ${e.allDayEvents.map((t) => this.renderAllDayEvent(t)).join("")}
+                        <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${t.isToday ? "background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: #111827;"}">
+                            ${t.dayOfMonth}
                         </div>
-                    `).join("")}
-                </div>
-
-                <div class="week-body" id="scroll-container">
-                    <div class="grid-lines">
-                        ${this.hours.map(() => '<div class="grid-line"></div>').join("")}
                     </div>
-
-                    <div class="time-gutter">
-                        ${this.hours.map((e) => `
-                            <div class="time-slot-label">
-                                ${e === 0 ? "" : x.formatTime((/* @__PURE__ */ new Date()).setHours(e, 0), !1)}
+                `).join("")}
+            </div>
+        `;
+  }
+  _renderAllDayRow(e) {
+    return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; flex-shrink: 0;">
+                <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
+                    All day
+                </div>
+                ${e.map((t) => `
+                    <div class="fc-all-day-cell" data-date="${t.date.toISOString()}" style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
+                        ${t.allDayEvents.map((s) => `
+                            <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
+                                 style="background-color: ${s.backgroundColor || "#2563eb"}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                ${this.escapeHTML(s.title)}
                             </div>
                         `).join("")}
                     </div>
-
-                    ${this.viewData.days.map((e) => `
-                        <div class="day-column" data-date="${e.date.toISOString()}">
-                            ${e.isToday ? this.renderNowIndicator() : ""}
-                            ${e.timedEvents.map((t) => this.renderTimedEvent(t)).join("")}
-                        </div>
-                    `).join("")}
-                </div>
+                `).join("")}
             </div>
-        ` : '<div class="week-view">Loading...</div>';
+        `;
   }
-  renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 20), o = v.sanitizeColor(e.backgroundColor), c = v.sanitizeColor(v.getContrastColor(o), "white");
+  _renderTimeGrid(e, t) {
     return `
-            <div class="event-container"
-                 style="top: ${n}px; height: ${a}px; background-color: ${o}; color: ${c};"
-                 data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${x.formatTime(t)}</span>
+            <div id="week-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
+                <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(t)}
+                    ${e.map((s) => this._renderDayColumn(s, t)).join("")}
+                </div>
             </div>
         `;
   }
-  renderAllDayEvent(e) {
-    const t = v.sanitizeColor(e.backgroundColor), s = v.sanitizeColor(v.getContrastColor(t), "white");
+  _renderTimeGutter(e) {
     return `
-            <div class="event-item"
-                 style="background-color: ${t}; color: ${s}; font-size: 10px; padding: 2px 4px; border-radius: 2px; cursor: pointer; margin-bottom: 2px;"
-                 data-event-id="${e.id}">
-                ${C.escapeHTML(e.title)}
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${e.map((t) => `
+                    <div style="height: ${this.hourHeight}px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
+                        ${t === 0 ? "" : this.formatHour(t)}
+                    </div>
+                `).join("")}
             </div>
         `;
   }
-  renderNowIndicator() {
-    const e = /* @__PURE__ */ new Date();
-    return `<div class="now-indicator" style="top: ${e.getHours() * 60 + e.getMinutes()}px"></div>`;
+  _renderDayColumn(e, t) {
+    return `
+            <div class="fc-week-day-column" data-date="${e.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${t.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+
+                <!-- Now indicator for today -->
+                ${e.isToday ? this.renderNowIndicator() : ""}
+
+                <!-- Timed events -->
+                ${e.timedEvents.map((s) => this.renderTimedEvent(s, { compact: !0 })).join("")}
+            </div>
+        `;
   }
-  afterRender() {
-    const e = this.$("#scroll-container");
-    e && !this._scrolled && (e.scrollTop = 8 * 60 - 50, this._scrolled = !0), this.$$("[data-event-id]").forEach((t) => {
-      this.addListener(t, "click", (s) => {
-        s.stopPropagation();
-        const i = s.currentTarget.dataset.eventId, r = this.stateManager.getEvents().find((n) => n.id === i);
-        r && this.emit("event-click", { event: r });
-      });
-    }), this.$$(".day-column").forEach((t) => {
-      this.addListener(t, "click", (s) => {
-        const i = s.currentTarget, r = this.$("#scroll-container"), n = i.getBoundingClientRect(), a = s.clientY - n.top + (r ? r.scrollTop : 0), o = new Date(i.dataset.date);
-        o.setHours(Math.floor(a / 60), Math.floor(a % 60), 0, 0), this.stateManager.selectDate(o), this.emit("day-click", { date: o });
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-week-day-column").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#week-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
+        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
       });
-    });
+    }), this.attachCommonEventHandlers();
   }
-  unmount() {
-    this.unsubscribe && this.unsubscribe();
+  _scrollToCurrentTime() {
+    if (this._scrolled) return;
+    const e = this.container.querySelector("#week-scroll-container");
+    e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class te extends $ {
-  constructor() {
-    super(), this._stateManager = null, this.viewData = null, this.hours = Array.from({ length: 24 }, (e, t) => t), this._registryCheckInterval = null;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._startRegistryPolling();
+class F extends H {
+  constructor(e, t) {
+    super(e, t), this.hourHeight = 60, this.totalHeight = 24 * this.hourHeight;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._registryCheckInterval && clearInterval(this._registryCheckInterval);
-  }
-  _startRegistryPolling() {
-    this._checkRegistry();
-    let e = 0;
-    this._registryCheckInterval = setInterval(() => {
-      if (e++, this._stateManager || e > 50) {
-        clearInterval(this._registryCheckInterval);
-        return;
-      }
-      this._checkRegistry();
-    }, 100);
-  }
-  _checkRegistry() {
-    const e = this.getAttribute("data-state-registry");
-    e && window.__forceCalendarRegistry && window.__forceCalendarRegistry[e] && (clearInterval(this._registryCheckInterval), this.setStateManager(window.__forceCalendarRegistry[e]));
-  }
-  set stateManager(e) {
-    this.setStateManager(e);
-  }
-  setStateManager(e) {
-    this._stateManager !== e && (this._stateManager = e, e && (this.unsubscribe = e.subscribe(this.handleStateUpdate.bind(this)), this.loadViewData()));
-  }
-  get stateManager() {
-    return this._stateManager;
-  }
-  handleStateUpdate(e, t) {
-    if (e.currentDate !== (t == null ? void 0 : t.currentDate) || e.view !== (t == null ? void 0 : t.view)) {
-      this.loadViewData();
+  render() {
+    if (!this.container || !this.stateManager) return;
+    const e = this.stateManager.getViewData();
+    if (!e) {
+      this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
       return;
     }
-    e.events !== (t == null ? void 0 : t.events) && this.loadViewData(), e.selectedDate !== (t == null ? void 0 : t.selectedDate) && this.updateSelection(e.selectedDate, t == null ? void 0 : t.selectedDate);
-  }
-  updateSelection(e, t) {
-    const s = this.shadowRoot.querySelector(".day-column");
-    if (!s) return;
-    ((r) => r && x.isSameDay(r, new Date(s.dataset.date)))(e) ? s.classList.add("selected") : s.classList.remove("selected");
-  }
-  loadViewData() {
-    if (!this.stateManager) return;
-    const e = this.stateManager.getViewData();
-    this.viewData = this.processViewData(e), this.render();
-  }
-  processViewData(e) {
-    var n;
-    if (!e) return null;
-    let t = null;
-    const s = (n = this.stateManager) == null ? void 0 : n.getState(), i = (s == null ? void 0 : s.currentDate) || /* @__PURE__ */ new Date();
-    if (e.days && Array.isArray(e.days) && e.days.length > 0)
-      t = e.days.find((a) => x.isSameDay(new Date(a.date), i)) || e.days[0];
-    else if (e.weeks && Array.isArray(e.weeks) && e.weeks.length > 0) {
-      const a = e.weeks.flatMap((o) => o.days || []);
-      t = a.find((o) => x.isSameDay(new Date(o.date), i)) || a[0];
-    } else e.date && (t = e);
-    if (!t) return null;
-    const r = new Date(t.date);
-    return {
-      ...e,
-      day: {
-        ...t,
-        date: r,
-        isToday: x.isToday(r),
-        timedEvents: (t.events || []).filter((a) => !a.allDay),
-        allDayEvents: (t.events || []).filter((a) => a.allDay)
-      }
-    };
+    this.cleanup();
+    const t = this.stateManager.getState().config, s = this._renderDayView(e, t);
+    this.container.innerHTML = s, this._attachEventHandlers(), this._scrollToCurrentTime();
   }
-  getStyles() {
+  _renderDayView(e, t) {
+    var h, d;
+    const s = ((d = (h = this.stateManager) == null ? void 0 : h.getState()) == null ? void 0 : d.currentDate) || /* @__PURE__ */ new Date(), i = this._extractDayData(e, s);
+    if (!i)
+      return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
+    const { dayDate: r, dayName: n, isToday: a, allDayEvents: o, timedEvents: c } = i, l = Array.from({ length: 24 }, (p, b) => b);
     return `
-            :host {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                min-height: 0;
-            }
-
-            .day-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                background: var(--fc-background);
-                min-height: 0;
-                overflow: hidden;
-            }
-
-            /* Header */
-            .day-header {
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background);
-                z-index: 20;
-                flex-shrink: 0;
-            }
-
-            .day-column-header {
-                padding: 16px 24px;
-                text-align: left;
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-            }
-
-            .day-name {
-                font-size: 12px;
-                font-weight: 700;
-                color: var(--fc-text-light);
-                text-transform: uppercase;
-                letter-spacing: 0.1em;
-            }
-
-            .day-number {
-                font-size: 24px;
-                font-weight: 600;
-                color: var(--fc-text-color);
-            }
-
-            .is-today .day-number {
-                color: var(--fc-danger-color);
-            }
-
-            /* All Day Events */
-            .all-day-row {
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                border-bottom: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                min-height: 36px;
-                flex-shrink: 0;
-            }
-
-            .all-day-label {
-                font-size: 9px;
-                color: var(--fc-text-light);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-right: 1px solid var(--fc-border-color);
-                text-transform: uppercase;
-                font-weight: 700;
-            }
-
-            .all-day-cell {
-                padding: 6px 12px;
-                display: flex;
-                flex-wrap: wrap;
-                gap: 4px;
-            }
-
-            /* Body */
-            .day-body {
-                flex: 1;
-                overflow-y: auto;
-                overflow-x: hidden;
-                position: relative;
-                display: grid;
-                grid-template-columns: 60px 1fr;
-                background: var(--fc-background);
-            }
-
-            .time-gutter {
-                border-right: 1px solid var(--fc-border-color);
-                background: var(--fc-background-alt);
-                height: 1440px;
-            }
-
-            .time-slot-label {
-                height: 60px;
-                font-size: 11px;
-                color: var(--fc-text-light);
-                text-align: right;
-                padding-right: 12px;
-                font-weight: 500;
-            }
-
-            .day-column {
-                position: relative;
-                height: 1440px;
-            }
-
-            .day-column.selected {
-                background: var(--fc-background-hover);
-            }
-
-            /* Grid Lines */
-            .grid-lines {
-                position: absolute;
-                top: 0;
-                left: 60px;
-                right: 0;
-                bottom: 0;
-                pointer-events: none;
-            }
-
-            .grid-line {
-                height: 60px;
-                border-bottom: 1px solid var(--fc-border-color);
-                width: 100%;
-            }
-
-            /* Event Style */
-            .event-container {
-                position: absolute;
-                left: 12px;
-                right: 24px;
-                border-radius: 6px;
-                padding: 8px 12px;
-                font-size: 13px;
-                font-weight: 500;
-                color: white;
-                background: var(--fc-primary-color);
-                border: 1px solid rgba(0,0,0,0.1);
-                overflow: hidden;
-                box-shadow: var(--fc-shadow);
-                cursor: pointer;
-                transition: all 0.15s ease;
-                z-index: 5;
-            }
-
-            .event-container:hover {
-                z-index: 10;
-                transform: translateX(4px);
-            }
-
-            .now-indicator {
-                position: absolute;
-                left: 0;
-                right: 0;
-                height: 2px;
-                background: var(--fc-danger-color);
-                z-index: 15;
-                pointer-events: none;
-            }
+            <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
+                ${this._renderHeader(r, n, a)}
+                ${this._renderAllDayRow(o, r)}
+                ${this._renderTimeGrid(c, a, r, l)}
+            </div>
         `;
   }
-  template() {
-    var i, r, n;
-    if (!this.viewData || !this.viewData.day)
-      return '<div class="day-view" style="padding: 20px; color: var(--fc-text-light);">No data available.</div>';
-    const { day: e } = this.viewData, t = ((n = (r = (i = this.stateManager) == null ? void 0 : i.state) == null ? void 0 : r.config) == null ? void 0 : n.locale) || "en-US", s = x.formatDate(e.date, "day", t).split(" ")[0];
+  _extractDayData(e, t) {
+    let s, i, r, n, a;
+    const o = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    if (e.type === "day" && e.date)
+      if (s = new Date(e.date), i = e.dayName || o[s.getDay()], r = e.isToday !== void 0 ? e.isToday : this.isToday(s), n = e.allDayEvents || [], e.hours && Array.isArray(e.hours)) {
+        const c = /* @__PURE__ */ new Map();
+        e.hours.forEach((l) => {
+          (l.events || []).forEach((h) => {
+            c.has(h.id) || c.set(h.id, h);
+          });
+        }), a = Array.from(c.values());
+      } else
+        a = [];
+    else if (e.days && e.days.length > 0) {
+      const c = e.days.find((h) => this.isSameDay(new Date(h.date), t)) || e.days[0];
+      s = new Date(c.date), i = o[s.getDay()], r = this.isToday(s);
+      const l = c.events || [];
+      n = l.filter((h) => h.allDay), a = l.filter((h) => !h.allDay);
+    } else
+      return null;
+    return { dayDate: s, dayName: i, isToday: r, allDayEvents: n, timedEvents: a };
+  }
+  _renderHeader(e, t, s) {
     return `
-            <div class="day-view">
-                <div class="day-header">
-                    <div class="time-gutter-header"></div>
-                    <div class="day-column-header ${e.isToday ? "is-today" : ""}">
-                        <span class="day-name">${s}</span>
-                        <span class="day-number">${e.date.getDate()}</span>
+            <div class="fc-day-header" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
+                <div style="border-right: 1px solid #e5e7eb;"></div>
+                <div style="padding: 16px 24px;">
+                    <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">
+                        ${t}
                     </div>
-                </div>
-
-                <div class="all-day-row">
-                    <div class="all-day-label">All day</div>
-                    <div class="all-day-cell">
-                        ${e.allDayEvents.map((a) => this.renderAllDayEvent(a)).join("")}
+                    <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${s ? "color: #dc2626;" : "color: #111827;"}">
+                        ${e.getDate()}
                     </div>
                 </div>
-
-                <div class="day-body" id="scroll-container">
-                    <div class="grid-lines">
-                        ${this.hours.map(() => '<div class="grid-line"></div>').join("")}
-                    </div>
-
-                    <div class="time-gutter">
-                        ${this.hours.map((a) => `
-                            <div class="time-slot-label">
-                                ${a === 0 ? "" : x.formatTime((/* @__PURE__ */ new Date()).setHours(a, 0), !1)}
-                            </div>
-                        `).join("")}
-                    </div>
-
-                    <div class="day-column" data-date="${e.date.toISOString()}">
-                        ${e.isToday ? this.renderNowIndicator() : ""}
-                        ${e.timedEvents.map((a) => this.renderTimedEvent(a)).join("")}
-                    </div>
+            </div>
+        `;
+  }
+  _renderAllDayRow(e, t) {
+    return `
+            <div class="fc-all-day-row" style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
+                <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">
+                    All day
+                </div>
+                <div class="fc-all-day-cell" data-date="${t.toISOString()}" style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
+                    ${e.map((s) => `
+                        <div class="fc-event fc-all-day-event" data-event-id="${this.escapeHTML(s.id)}"
+                             style="background-color: ${s.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                            ${this.escapeHTML(s.title)}
+                        </div>
+                    `).join("")}
                 </div>
             </div>
         `;
   }
-  renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), r = (s - t) / (1e3 * 60), n = i, a = Math.max(r, 30), o = v.sanitizeColor(e.backgroundColor), c = v.sanitizeColor(v.getContrastColor(o), "white");
+  _renderTimeGrid(e, t, s, i) {
     return `
-            <div class="event-container"
-                 style="top: ${n}px; height: ${a}px; background-color: ${o}; color: ${c};"
-                 data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
-                <span class="event-time">${x.formatTime(t)} - ${x.formatTime(s)}</span>
+            <div id="day-scroll-container" class="fc-time-grid-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
+                <div class="fc-time-grid" style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: ${this.totalHeight}px;">
+                    ${this._renderTimeGutter(i)}
+                    ${this._renderDayColumn(e, t, s, i)}
+                </div>
             </div>
         `;
   }
-  renderAllDayEvent(e) {
-    const t = v.sanitizeColor(e.backgroundColor), s = v.sanitizeColor(v.getContrastColor(t), "white");
+  _renderTimeGutter(e) {
     return `
-            <div class="event-item"
-                 style="background-color: ${t}; color: ${s}; font-size: 12px; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-weight: 500; margin-bottom: 2px;"
-                 data-event-id="${e.id}">
-                ${C.escapeHTML(e.title)}
+            <div class="fc-time-gutter" style="border-right: 1px solid #e5e7eb; background: #fafafa;">
+                ${e.map((t) => `
+                    <div style="height: ${this.hourHeight}px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
+                        ${t === 0 ? "" : this.formatHour(t)}
+                    </div>
+                `).join("")}
             </div>
         `;
   }
-  renderNowIndicator() {
-    const e = /* @__PURE__ */ new Date();
-    return `<div class="now-indicator" style="top: ${e.getHours() * 60 + e.getMinutes()}px"></div>`;
+  _renderDayColumn(e, t, s, i) {
+    return `
+            <div class="fc-day-column" data-date="${s.toISOString()}" style="position: relative; cursor: pointer;">
+                <!-- Hour grid lines -->
+                ${i.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid #f3f4f6;"></div>`).join("")}
+
+                <!-- Now indicator for today -->
+                ${t ? this.renderNowIndicator() : ""}
+
+                <!-- Timed events -->
+                ${e.map((r) => this.renderTimedEvent(r, { compact: !1 })).join("")}
+            </div>
+        `;
   }
-  afterRender() {
-    const e = this.$("#scroll-container");
-    e && !this._scrolled && (e.scrollTop = 8 * 60 - 50, this._scrolled = !0), this.$$("[data-event-id]").forEach((s) => {
-      this.addListener(s, "click", (i) => {
-        i.stopPropagation();
-        const r = i.currentTarget.dataset.eventId, n = this.stateManager.getEvents().find((a) => a.id === r);
-        n && this.emit("event-click", { event: n });
+  _attachEventHandlers() {
+    this.container.querySelectorAll(".fc-day-column").forEach((e) => {
+      this.addListener(e, "click", (t) => {
+        if (t.target.closest(".fc-event")) return;
+        const s = new Date(e.dataset.date), i = e.getBoundingClientRect(), r = this.container.querySelector("#day-scroll-container"), n = t.clientY - i.top + (r ? r.scrollTop : 0);
+        s.setHours(Math.floor(n / this.hourHeight), Math.floor(n % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(s);
       });
-    });
-    const t = this.$(".day-column");
-    t && this.addListener(t, "click", (s) => {
-      const i = s.currentTarget, r = this.$("#scroll-container"), n = i.getBoundingClientRect(), a = s.clientY - n.top + (r ? r.scrollTop : 0), o = new Date(i.dataset.date);
-      o.setHours(Math.floor(a / 60), Math.floor(a % 60), 0, 0), this.stateManager.selectDate(o), this.emit("day-click", { date: o });
-    });
+    }), this.attachCommonEventHandlers();
   }
-  unmount() {
-    this.unsubscribe && this.unsubscribe();
+  _scrollToCurrentTime() {
+    if (this._scrolled) return;
+    const e = this.container.querySelector("#day-scroll-container");
+    e && (e.scrollTop = 8 * this.hourHeight - 50, this._scrolled = !0);
   }
 }
-class se extends $ {
+class ie extends O {
   constructor() {
     super(), this._isVisible = !1, this._cleanupFocusTrap = null, this.config = {
       title: "New Event",
@@ -7192,8 +6546,8 @@ class se extends $ {
   }
   getStyles() {
     return `
-            ${v.getBaseStyles()}
-            ${v.getButtonStyles()}
+            ${x.getBaseStyles()}
+            ${x.getButtonStyles()}
 
             :host {
                 display: none;
@@ -7436,7 +6790,7 @@ class se extends $ {
     });
   }
   open(e = /* @__PURE__ */ new Date()) {
-    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = C.trapFocus(this.modalContent));
+    this.hasAttribute("open") || this.setAttribute("open", ""), this.titleGroup.classList.remove("has-error"), this.endGroup.classList.remove("has-error"), this._formData.start = e, this._formData.end = new Date(e.getTime() + this.config.defaultDuration * 60 * 1e3), this._formData.title = "", this._formData.color = this.config.colors[0].color, this.startInput && (this.titleInput.value = "", this.startInput.value = this.formatDateForInput(this._formData.start), this.endInput.value = this.formatDateForInput(this._formData.end), this.updateColorSelection(), this._cleanupFocusTrap = L.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -7465,11 +6819,8 @@ class se extends $ {
     this._cleanupFocusTrap && this._cleanupFocusTrap(), this._handleKeyDown && (window.removeEventListener("keydown", this._handleKeyDown), this._handleKeyDown = null, this._keydownListenerAdded = !1);
   }
 }
-customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", se);
-customElements.get("forcecal-month") || customElements.define("forcecal-month", X);
-customElements.get("forcecal-week") || customElements.define("forcecal-week", ee);
-customElements.get("forcecal-day") || customElements.define("forcecal-day", te);
-class ie extends $ {
+customElements.get("forcecal-event-form") || customElements.define("forcecal-event-form", ie);
+class re extends O {
   static get observedAttributes() {
     return ["view", "date", "locale", "timezone", "week-starts-on", "height"];
   }
@@ -7484,16 +6835,16 @@ class ie extends $ {
       timeZone: this.getAttribute("timezone") || Intl.DateTimeFormat().resolvedOptions().timeZone,
       weekStartsOn: parseInt(this.getAttribute("week-starts-on") || "0")
     };
-    this.stateManager = new J(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
+    this.stateManager = new se(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
-    y.on("navigation:*", (e, t) => {
+    m.on("navigation:*", (e, t) => {
       this.emit("calendar-navigate", { action: t.split(":")[1], ...e });
-    }), y.on("view:changed", (e) => {
+    }), m.on("view:changed", (e) => {
       this.emit("calendar-view-change", e);
-    }), y.on("event:*", (e, t) => {
+    }), m.on("event:*", (e, t) => {
       this.emit(`calendar-event-${t.split(":")[1]}`, e);
-    }), y.on("date:selected", (e) => {
+    }), m.on("date:selected", (e) => {
       this.emit("calendar-date-select", e);
     });
   }
@@ -7536,8 +6887,12 @@ class ie extends $ {
     if (e) {
       this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup();
       try {
-        const t = this._createViewRenderer(this.currentView);
-        t && (t._viewType = this.currentView, this._currentViewInstance = t, t.stateManager = this.stateManager, t.container = e, t.render());
+        const s = {
+          month: E,
+          week: z,
+          day: F
+        }[this.currentView] || E, i = new s(e, this.stateManager);
+        i._viewType = this.currentView, this._currentViewInstance = i, i.render();
       } catch (t) {
         console.error("[ForceCalendar] Error switching view:", t);
       }
@@ -7558,10 +6913,10 @@ class ie extends $ {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${v.getBaseStyles()}
-            ${v.getButtonStyles()}
-            ${v.getGridStyles()}
-            ${v.getAnimations()}
+            ${x.getBaseStyles()}
+            ${x.getButtonStyles()}
+            ${x.getGridStyles()}
+            ${x.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -7950,7 +7305,7 @@ class ie extends $ {
       return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${C.escapeHTML(r.message || "An error occurred")}</p>
+                        <p><strong>Error:</strong> ${L.escapeHTML(r.message || "An error occurred")}</p>
                     </div>
                 </div>
             `;
@@ -8016,8 +7371,12 @@ class ie extends $ {
         return;
       this._currentViewInstance && (this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), this._viewUnsubscribe && (this._viewUnsubscribe(), this._viewUnsubscribe = null));
       try {
-        const i = this._createViewRenderer(this.currentView);
-        i && (i._viewType = this.currentView, this._currentViewInstance = i, i.stateManager = this.stateManager, i.container = e, i.render());
+        const r = {
+          month: E,
+          week: z,
+          day: F
+        }[this.currentView] || E, n = new r(e, this.stateManager);
+        n._viewType = this.currentView, this._currentViewInstance = n, n.render();
       } catch (i) {
         console.error("[ForceCalendar] Error creating/rendering view:", i);
       }
@@ -8040,307 +7399,19 @@ class ie extends $ {
       });
     }), this._hasRendered = !0;
   }
+  /**
+   * Create a view renderer instance for the given view type
+   * Uses pure JavaScript renderer classes for Salesforce Locker Service compatibility
+   * @param {string} viewName - 'month', 'week', or 'day'
+   * @returns {BaseViewRenderer} Renderer instance
+   */
   _createViewRenderer(e) {
-    const t = e;
-    return {
-      stateManager: null,
-      container: null,
-      _listeners: [],
-      _scrolled: !1,
-      _escapeHTML(s) {
-        return s == null ? "" : C.escapeHTML(String(s));
-      },
-      cleanup() {
-        this._listeners.forEach(({ element: s, event: i, handler: r }) => {
-          s.removeEventListener(i, r);
-        }), this._listeners = [];
-      },
-      addListener(s, i, r) {
-        s.addEventListener(i, r), this._listeners.push({ element: s, event: i, handler: r });
-      },
-      render() {
-        if (!this.container || !this.stateManager) return;
-        const s = this.stateManager.getViewData();
-        if (!s) {
-          this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Loading...</div>';
-          return;
-        }
-        this.cleanup();
-        const i = this.stateManager.getState().config;
-        let r = "";
-        switch (t) {
-          case "week":
-            r = this._renderWeekView(s, i);
-            break;
-          case "day":
-            r = this._renderDayView(s, i);
-            break;
-          case "month":
-          default:
-            if (!s.weeks) {
-              this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">No data available for month view.</div>';
-              return;
-            }
-            r = this._renderMonthView(s, i);
-            break;
-        }
-        this.container.innerHTML = r, this._attachEventHandlers(t);
-      },
-      _renderMonthView(s, i) {
-        const r = i.weekStartsOn || 0, n = [];
-        for (let o = 0; o < 7; o++) {
-          const c = (r + o) % 7;
-          n.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][c]);
-        }
-        let a = `
-                    <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: #fff; border: 1px solid #e5e7eb;">
-                        <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb;">
-                            ${n.map((o) => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase;">${o}</div>`).join("")}
-                        </div>
-                        <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
-                `;
-        return s.weeks.forEach((o) => {
-          a += '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">', o.days.forEach((c) => {
-            const l = !c.isCurrentMonth, d = c.isToday, h = l ? "#f3f4f6" : "#fff", g = l ? "#9ca3af" : "#111827", w = d ? "background: #2563eb; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;" : "", f = c.events || [], k = f.slice(0, 3), b = f.length - 3;
-            a += `
-                            <div class="fc-month-day" data-date="${c.date}" style="background: ${h}; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 4px; min-height: 80px; cursor: pointer;">
-                                <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${g}; padding: 2px 4px; margin-bottom: 4px; ${w}">${c.dayOfMonth}</div>
-                                <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px;">
-                                    ${k.map((T) => `
-                                        <div class="fc-event" data-event-id="${this._escapeHTML(T.id)}" style="background-color: ${T.backgroundColor || "#2563eb"}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
-                                            ${this._escapeHTML(T.title)}
-                                        </div>
-                                    `).join("")}
-                                    ${b > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${b} more</div>` : ""}
-                                </div>
-                            </div>
-                        `;
-          }), a += "</div>";
-        }), a += "</div></div>", a;
-      },
-      _renderWeekView(s, i) {
-        const r = s.days || [];
-        if (r.length === 0)
-          return '<div style="padding: 20px; text-align: center; color: #666;">No data available for week view.</div>';
-        i.weekStartsOn;
-        const n = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = Array.from({ length: 24 }, (l, d) => d), o = r.map((l) => {
-          const d = new Date(l.date), h = l.events || [];
-          return {
-            ...l,
-            date: d,
-            dayName: n[d.getDay()],
-            dayOfMonth: d.getDate(),
-            isToday: this._isToday(d),
-            timedEvents: h.filter((g) => !g.allDay),
-            allDayEvents: h.filter((g) => g.allDay)
-          };
-        });
-        return `
-                    <div class="fc-week-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
-                        <!-- Header -->
-                        <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                            <div style="border-right: 1px solid #e5e7eb;"></div>
-                            ${o.map((l) => `
-                                <div style="padding: 12px 8px; text-align: center; border-right: 1px solid #e5e7eb;">
-                                    <div style="font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">${l.dayName}</div>
-                                    <div style="font-size: 16px; font-weight: 500; margin-top: 4px; ${l.isToday ? "background: #dc2626; color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;" : "color: #111827;"}">${l.dayOfMonth}</div>
-                                </div>
-                            `).join("")}
-                        </div>
-
-                        <!-- All Day Row -->
-                        <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 32px; flex-shrink: 0;">
-                            <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">All day</div>
-                            ${o.map((l) => `
-                                <div style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
-                                    ${l.allDayEvents.map((d) => `
-                                        <div class="fc-event" data-event-id="${this._escapeHTML(d.id)}" style="background-color: ${d.backgroundColor || "#2563eb"}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                                            ${this._escapeHTML(d.title)}
-                                        </div>
-                                    `).join("")}
-                                </div>
-                            `).join("")}
-                        </div>
-
-                        <!-- Time Grid Body -->
-                        <div id="week-scroll-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
-                            <div style="display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; height: 1440px;">
-                                <!-- Time Gutter -->
-                                <div style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                                    ${a.map((l) => `
-                                        <div style="height: 60px; font-size: 10px; color: #6b7280; text-align: right; padding-right: 8px; font-weight: 500;">
-                                            ${l === 0 ? "" : this._formatHour(l)}
-                                        </div>
-                                    `).join("")}
-                                </div>
-
-                                <!-- Day Columns -->
-                                ${o.map((l) => `
-                                    <div class="fc-week-day-column" data-date="${l.date.toISOString()}" style="border-right: 1px solid #e5e7eb; position: relative; cursor: pointer;">
-                                        <!-- Hour grid lines -->
-                                        ${a.map(() => '<div style="height: 60px; border-bottom: 1px solid #f3f4f6;"></div>').join("")}
-
-                                        <!-- Now indicator for today -->
-                                        ${l.isToday ? this._renderNowIndicator() : ""}
-
-                                        <!-- Timed events -->
-                                        ${l.timedEvents.map((d) => this._renderTimedEvent(d)).join("")}
-                                    </div>
-                                `).join("")}
-                            </div>
-                        </div>
-                    </div>
-                `;
-      },
-      _renderDayView(s, i) {
-        var g, w;
-        const r = ((w = (g = this.stateManager) == null ? void 0 : g.getState()) == null ? void 0 : w.currentDate) || /* @__PURE__ */ new Date();
-        let n, a, o, c, l;
-        if (s.type === "day" && s.date)
-          if (n = new Date(s.date), a = s.dayName || ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][n.getDay()], o = s.isToday !== void 0 ? s.isToday : this._isToday(n), c = s.allDayEvents || [], s.hours && Array.isArray(s.hours)) {
-            const f = /* @__PURE__ */ new Map();
-            s.hours.forEach((k) => {
-              (k.events || []).forEach((b) => {
-                f.has(b.id) || f.set(b.id, b);
-              });
-            }), l = Array.from(f.values());
-          } else
-            l = [];
-        else if (s.days && s.days.length > 0) {
-          const f = s.days.find((b) => this._isSameDay(new Date(b.date), r)) || s.days[0];
-          n = new Date(f.date), a = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][n.getDay()], o = this._isToday(n);
-          const k = f.events || [];
-          c = k.filter((b) => b.allDay), l = k.filter((b) => !b.allDay);
-        } else
-          return '<div style="padding: 20px; text-align: center; color: #666;">No data available for day view.</div>';
-        const d = Array.from({ length: 24 }, (f, k) => k);
-        return `
-                    <div class="fc-day-view" style="display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;">
-                        <!-- Header -->
-                        <div style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0;">
-                            <div style="border-right: 1px solid #e5e7eb;"></div>
-                            <div style="padding: 16px 24px;">
-                                <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em;">${a}</div>
-                                <div style="font-size: 24px; font-weight: 600; margin-top: 4px; ${o ? "color: #dc2626;" : "color: #111827;"}">${n.getDate()}</div>
-                            </div>
-                        </div>
-
-                        <!-- All Day Row -->
-                        <div style="display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid #e5e7eb; background: #fafafa; min-height: 36px; flex-shrink: 0;">
-                            <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">All day</div>
-                            <div style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
-                                ${c.map((f) => `
-                                    <div class="fc-event" data-event-id="${this._escapeHTML(f.id)}" style="background-color: ${f.backgroundColor || "#2563eb"}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
-                                        ${this._escapeHTML(f.title)}
-                                    </div>
-                                `).join("")}
-                            </div>
-                        </div>
-
-                        <!-- Time Grid Body -->
-                        <div id="day-scroll-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;">
-                            <div style="display: grid; grid-template-columns: 60px 1fr; position: relative; height: 1440px;">
-                                <!-- Time Gutter -->
-                                <div style="border-right: 1px solid #e5e7eb; background: #fafafa;">
-                                    ${d.map((f) => `
-                                        <div style="height: 60px; font-size: 11px; color: #6b7280; text-align: right; padding-right: 12px; font-weight: 500;">
-                                            ${f === 0 ? "" : this._formatHour(f)}
-                                        </div>
-                                    `).join("")}
-                                </div>
-
-                                <!-- Day Column -->
-                                <div class="fc-day-column" data-date="${n.toISOString()}" style="position: relative; cursor: pointer;">
-                                    <!-- Hour grid lines -->
-                                    ${d.map(() => '<div style="height: 60px; border-bottom: 1px solid #f3f4f6;"></div>').join("")}
-
-                                    <!-- Now indicator for today -->
-                                    ${o ? this._renderNowIndicator() : ""}
-
-                                    <!-- Timed events -->
-                                    ${l.map((f) => this._renderTimedEventDay(f)).join("")}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-      },
-      _renderTimedEvent(s) {
-        const i = new Date(s.start), r = new Date(s.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), 20), o = s.backgroundColor || "#2563eb";
-        return `
-                    <div class="fc-event" data-event-id="${this._escapeHTML(s.id)}"
-                         style="position: absolute; top: ${n}px; height: ${a}px; left: 2px; right: 2px;
-                                background-color: ${o}; border-radius: 4px; padding: 4px 8px; font-size: 11px;
-                                font-weight: 500; color: white; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-                                cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(s.title)}</div>
-                        <div style="font-size: 10px; opacity: 0.9;">${this._formatTime(i)}</div>
-                    </div>
-                `;
-      },
-      _renderTimedEventDay(s) {
-        const i = new Date(s.start), r = new Date(s.end), n = i.getHours() * 60 + i.getMinutes(), a = Math.max((r - i) / (1e3 * 60), 30), o = s.backgroundColor || "#2563eb";
-        return `
-                    <div class="fc-event" data-event-id="${this._escapeHTML(s.id)}"
-                         style="position: absolute; top: ${n}px; height: ${a}px; left: 12px; right: 24px;
-                                background-color: ${o}; border-radius: 6px; padding: 8px 12px; font-size: 13px;
-                                font-weight: 500; color: white; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                                cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(s.title)}</div>
-                        <div style="font-size: 11px; opacity: 0.9;">${this._formatTime(i)} - ${this._formatTime(r)}</div>
-                    </div>
-                `;
-      },
-      _renderNowIndicator() {
-        const s = /* @__PURE__ */ new Date();
-        return `<div style="position: absolute; left: 0; right: 0; top: ${s.getHours() * 60 + s.getMinutes()}px; height: 2px; background: #dc2626; z-index: 15; pointer-events: none;"></div>`;
-      },
-      _formatHour(s) {
-        const i = s >= 12 ? "PM" : "AM";
-        return `${s % 12 || 12} ${i}`;
-      },
-      _formatTime(s) {
-        const i = s.getHours(), r = s.getMinutes(), n = i >= 12 ? "PM" : "AM", a = i % 12 || 12;
-        return r === 0 ? `${a} ${n}` : `${a}:${r.toString().padStart(2, "0")} ${n}`;
-      },
-      _isToday(s) {
-        const i = /* @__PURE__ */ new Date();
-        return s.getDate() === i.getDate() && s.getMonth() === i.getMonth() && s.getFullYear() === i.getFullYear();
-      },
-      _isSameDay(s, i) {
-        return s.getDate() === i.getDate() && s.getMonth() === i.getMonth() && s.getFullYear() === i.getFullYear();
-      },
-      _attachEventHandlers(s) {
-        const i = this.stateManager;
-        if (this.container.querySelectorAll(".fc-month-day").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            const a = new Date(r.dataset.date);
-            i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-week-day-column").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            if (n.target.closest(".fc-event")) return;
-            const a = new Date(r.dataset.date), o = r.getBoundingClientRect(), c = this.container.querySelector("#week-scroll-container"), l = n.clientY - o.top + (c ? c.scrollTop : 0);
-            a.setHours(Math.floor(l / 60), Math.floor(l % 60), 0, 0), i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-day-column").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            if (n.target.closest(".fc-event")) return;
-            const a = new Date(r.dataset.date), o = r.getBoundingClientRect(), c = this.container.querySelector("#day-scroll-container"), l = n.clientY - o.top + (c ? c.scrollTop : 0);
-            a.setHours(Math.floor(l / 60), Math.floor(l % 60), 0, 0), i.selectDate(a);
-          });
-        }), this.container.querySelectorAll(".fc-event").forEach((r) => {
-          this.addListener(r, "click", (n) => {
-            n.stopPropagation();
-            const a = r.dataset.eventId, o = i.getEvents().find((c) => c.id === a);
-            o && i.selectEvent(o);
-          });
-        }), s === "week" || s === "day") {
-          const r = s === "week" ? "#week-scroll-container" : "#day-scroll-container", n = this.container.querySelector(r);
-          n && !this._scrolled && (n.scrollTop = 8 * 60 - 50, this._scrolled = !0);
-        }
-      }
-    };
+    const s = {
+      month: E,
+      week: z,
+      day: F
+    }[e] || E;
+    return new s(null, null);
   }
   handleNavigation(e) {
     switch (e.currentTarget.dataset.action) {
@@ -8363,14 +7434,14 @@ class ie extends $ {
     const s = this.stateManager.state.config.locale;
     switch (t) {
       case "month":
-        return x.formatDate(e, "month", s);
+        return S.formatDate(e, "month", s);
       case "week":
-        const i = x.startOfWeek(e), r = x.endOfWeek(e);
-        return x.formatDateRange(i, r, s);
+        const i = S.startOfWeek(e), r = S.endOfWeek(e);
+        return S.formatDateRange(i, r, s);
       case "day":
-        return x.formatDate(e, "long", s);
+        return S.formatDate(e, "long", s);
       default:
-        return x.formatDate(e, "month", s);
+        return S.formatDate(e, "month", s);
     }
   }
   getIcon(e) {
@@ -8421,22 +7492,23 @@ class ie extends $ {
     this.stateManager.today();
   }
   destroy() {
-    this.stateManager && this.stateManager.destroy(), y.clear(), super.cleanup();
+    this.stateManager && this.stateManager.destroy(), m.clear(), super.cleanup();
   }
 }
-customElements.get("forcecal-main") || customElements.define("forcecal-main", ie);
+customElements.get("forcecal-main") || customElements.define("forcecal-main", re);
 typeof window < "u" && typeof customElements < "u" && console.log("Force Calendar Interface loading...");
 export {
-  $ as BaseComponent,
-  C as DOMUtils,
-  x as DateUtils,
-  te as DayView,
-  Q as EventBus,
-  ie as ForceCalendar,
-  X as MonthView,
-  J as StateManager,
-  v as StyleUtils,
-  ee as WeekView,
-  y as eventBus
+  O as BaseComponent,
+  H as BaseViewRenderer,
+  L as DOMUtils,
+  S as DateUtils,
+  F as DayViewRenderer,
+  te as EventBus,
+  re as ForceCalendar,
+  E as MonthViewRenderer,
+  se as StateManager,
+  x as StyleUtils,
+  z as WeekViewRenderer,
+  m as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map