@forcecalendar/interface 1.0.9 → 1.0.10

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

@@ -1,5 +1,5 @@
-var H = Object.defineProperty;
-var P = (u, e, t) => e in u ? H(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var B = Object.defineProperty;
+var P = (u, e, t) => e in u ? B(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
 var M = (u, e, t) => P(u, typeof e != "symbol" ? e + "" : e, t);
 class T extends HTMLElement {
   constructor() {
@@ -708,22 +708,22 @@ class x {
     borderColor: l = null,
     textColor: d = null,
     recurring: h = !1,
-    recurrenceRule: y = null,
+    recurrenceRule: m = null,
     timeZone: b = null,
     endTimeZone: D = null,
     status: k = "confirmed",
-    visibility: E = "public",
+    visibility: C = "public",
     organizer: A = null,
     attendees: $ = [],
     reminders: z = [],
     category: _,
     // Support singular category (no default)
-    categories: F,
+    categories: L,
     // Support plural categories (no default)
-    attachments: L = [],
+    attachments: F = [],
     conferenceData: O = null,
     metadata: R = {},
-    ...B
+    ...H
     // Capture any extra properties
   }) {
     const g = x.normalize({
@@ -739,22 +739,22 @@ class x {
       borderColor: l,
       textColor: d,
       recurring: h,
-      recurrenceRule: y,
+      recurrenceRule: m,
       timeZone: b,
       endTimeZone: D,
       status: k,
-      visibility: E,
+      visibility: C,
       organizer: A,
       attendees: $,
       reminders: z,
       category: _,
       // Pass category to normalize
-      categories: F,
+      categories: L,
       // Pass categories to normalize
-      attachments: L,
+      attachments: F,
       conferenceData: O,
       metadata: R,
-      ...B
+      ...H
       // Pass any extra properties
     });
     x.validate(g), this.id = g.id, this.title = g.title, this._timezoneManager = new S(), 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();
@@ -1859,7 +1859,7 @@ class Y {
     return e.count ? a += `, ${e.count} time${e.count > 1 ? "s" : ""}` : e.until && (a += `, until ${e.until.toLocaleDateString()}`), a;
   }
 }
-class N {
+class V {
   /**
    * Expand a recurring event into individual occurrences
    * @param {import('./Event.js').Event} event - The recurring event
@@ -1875,15 +1875,15 @@ class N {
     const n = this.parseRule(e.recurrenceRule), r = [], o = e.end - e.start, c = a || e.timeZone || "UTC", l = new S();
     let d = new Date(e.start), h = 0;
     n.until && n.until < s && (s = n.until);
-    let y = l.getTimezoneOffset(d, c);
+    let m = l.getTimezoneOffset(d, c);
     for (; d <= s && h < i; ) {
       if (d >= t) {
         const b = new Date(d), D = new Date(d.getTime() + o), k = l.getTimezoneOffset(b, c);
-        if (k !== y) {
-          const E = y - k;
-          b.setMinutes(b.getMinutes() + E), D.setMinutes(D.getMinutes() + E);
+        if (k !== m) {
+          const C = m - k;
+          b.setMinutes(b.getMinutes() + C), D.setMinutes(D.getMinutes() + C);
         }
-        y = k, this.isException(b, n, e.id) || r.push({
+        m = k, this.isException(b, n, e.id) || r.push({
           start: b,
           end: D,
           recurringEventId: e.id,
@@ -2176,7 +2176,7 @@ class I {
     return this.cache.size;
   }
 }
-class V {
+class N {
   constructor(e = {}) {
     this.config = {
       checkInterval: 3e4,
@@ -2408,7 +2408,7 @@ class W {
       enableAdaptiveMemory: !0,
       // Enable adaptive memory management
       ...e
-    }, this.eventCache = new I(this.config.cacheCapacity), this.queryCache = new I(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new I(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new V({
+    }, this.eventCache = new I(this.config.cacheCapacity), this.queryCache = new I(Math.floor(this.config.cacheCapacity / 2)), this.dateRangeCache = new I(Math.floor(this.config.cacheCapacity / 4)), this.config.enableAdaptiveMemory && (this.memoryManager = new N({
       checkInterval: 3e4,
       memoryThreshold: 0.75,
       criticalThreshold: 0.9
@@ -3135,8 +3135,8 @@ class Z {
     for (let l = -1; l <= 1; l++) {
       const d = new Date(i);
       d.setDate(d.getDate() + l);
-      const h = f.getLocalDateString(d), y = this.indices.byDate.get(h);
-      y && y.forEach((b) => s.add(b));
+      const h = f.getLocalDateString(d), m = this.indices.byDate.get(h);
+      m && m.forEach((b) => s.add(b));
     }
     const a = `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}`, n = this.indices.byMonth.get(a);
     n && n.forEach((l) => s.add(l));
@@ -3147,12 +3147,12 @@ class Z {
     for (const l of s) {
       const d = this.events.get(l);
       if (d) {
-        const h = d.getStartInTimezone(t), y = d.getEndInTimezone(t);
-        h <= c && y >= o && r.push(d);
+        const h = d.getStartInTimezone(t), m = d.getEndInTimezone(t);
+        h <= c && m >= o && r.push(d);
       }
     }
     return r.sort((l, d) => {
-      const h = l.getStartInTimezone(t), y = d.getStartInTimezone(t), b = h - y;
+      const h = l.getStartInTimezone(t), m = d.getStartInTimezone(t), b = h - m;
       return b !== 0 ? b : d.duration - l.duration;
     });
   }
@@ -3170,8 +3170,8 @@ class Z {
       (this.indices.byDate.get(l) || /* @__PURE__ */ new Set()).forEach((h) => {
         if (!o.has(h) && h !== s) {
           o.add(h);
-          const y = this.events.get(h);
-          y && y.overlaps({ start: e, end: t }) && i.push(y);
+          const m = this.events.get(h);
+          m && m.overlaps({ start: e, end: t }) && i.push(m);
         }
       });
     }), i.sort((c, l) => c.start - l.start);
@@ -3281,7 +3281,7 @@ class Z {
       return [e];
     i = i || this.defaultTimezone;
     const a = e.timeZone || i;
-    return N.expandEvent(e, t, s).map((r, o) => e.clone({
+    return V.expandEvent(e, t, s).map((r, o) => e.clone({
       id: `${e.id}_occurrence_${o}`,
       start: r.start,
       end: r.end,
@@ -4348,22 +4348,22 @@ class K {
     let l = new Date(o);
     const d = a ? 6 : Math.ceil((r.getDate() + f.getDayOfWeek(n, i)) / 7);
     for (let h = 0; h < d; h++) {
-      const y = {
+      const m = {
         weekNumber: f.getWeekNumber(l),
         days: []
       };
       for (let b = 0; b < 7; b++) {
-        const D = new Date(l), k = D.getMonth() === s, E = f.isToday(D), A = D.getDay() === 0 || D.getDay() === 6;
-        y.days.push({
+        const D = new Date(l), k = D.getMonth() === s, C = f.isToday(D), A = D.getDay() === 0 || D.getDay() === 6;
+        m.days.push({
           date: D,
           dayOfMonth: D.getDate(),
           isCurrentMonth: k,
-          isToday: E,
+          isToday: C,
           isWeekend: A,
           events: this.getEventsForDate(D)
         }), l = f.addDays(l, 1);
       }
-      c.push(y);
+      c.push(m);
     }
     return {
       type: "month",
@@ -4653,7 +4653,7 @@ class G {
     return this.events.has(e) ? this.events.get(e).length : 0;
   }
 }
-const m = new G();
+const p = new G();
 class Q {
   constructor(e = {}) {
     this.calendar = new K({
@@ -4702,62 +4702,62 @@ class Q {
       (i) => e[i] !== t[i]
     );
     s.forEach((i) => {
-      m.emit(`state:${i}:changed`, {
+      p.emit(`state:${i}:changed`, {
         oldValue: e[i],
         newValue: t[i],
         state: t
       });
-    }), s.length > 0 && m.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
+    }), s.length > 0 && p.emit("state:changed", { oldState: e, newState: t, changedKeys: s });
   }
   // Calendar operations
   setView(e) {
-    this.calendar.setView(e), this.setState({ view: e }), m.emit("view:changed", { view: e });
+    this.calendar.setView(e), this.setState({ view: e }), p.emit("view:changed", { view: e });
   }
   getView() {
     return this.state.view;
   }
   setDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("date:changed", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("date:changed", { date: this.state.currentDate });
   }
   getCurrentDate() {
     return this.state.currentDate;
   }
   // Navigation
   next() {
-    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:next", { date: this.state.currentDate });
+    this.calendar.next(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:next", { date: this.state.currentDate });
   }
   previous() {
-    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:previous", { date: this.state.currentDate });
+    this.calendar.previous(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:previous", { date: this.state.currentDate });
   }
   today() {
-    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:today", { date: this.state.currentDate });
+    this.calendar.today(), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:today", { date: this.state.currentDate });
   }
   goToDate(e) {
-    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), m.emit("navigation:goto", { date: this.state.currentDate });
+    this.calendar.goToDate(e), this.setState({ currentDate: this.calendar.getCurrentDate() }), p.emit("navigation:goto", { date: this.state.currentDate });
   }
   // Event management
   addEvent(e) {
     const t = this.calendar.addEvent(e);
     if (!t)
-      return console.error("Failed to add event to calendar"), m.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null;
+      return console.error("Failed to add event to calendar"), p.emit("event:error", { action: "add", event: e, error: "Failed to add event" }), null;
     const s = [...this.state.events, t];
-    return this.setState({ events: s }), m.emit("event:added", { event: t }), t;
+    return this.setState({ events: s }), p.emit("event:added", { event: t }), t;
   }
   updateEvent(e, t) {
     const s = this.calendar.updateEvent(e, t);
     if (!s)
-      return console.error(`Failed to update event: ${e}`), m.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null;
+      return console.error(`Failed to update event: ${e}`), p.emit("event:error", { action: "update", eventId: e, updates: t, error: "Event not found in calendar" }), null;
     const i = this.state.events.findIndex((n) => n.id === e);
     if (i === -1)
-      return console.error(`Event ${e} not found in state`), m.emit("event:error", { action: "update", eventId: e, error: "Event not found in state" }), null;
+      return console.error(`Event ${e} not found in state`), p.emit("event:error", { action: "update", eventId: e, error: "Event not found in state" }), null;
     const a = [...this.state.events];
-    return a[i] = s, this.setState({ events: a }), m.emit("event:updated", { event: s }), s;
+    return a[i] = s, this.setState({ events: a }), p.emit("event:updated", { event: s }), s;
   }
   deleteEvent(e) {
     if (!this.calendar.removeEvent(e))
-      return console.error(`Failed to delete event: ${e}`), m.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1;
+      return console.error(`Failed to delete event: ${e}`), p.emit("event:error", { action: "delete", eventId: e, error: "Event not found" }), !1;
     const s = this.state.events.filter((i) => i.id !== e);
-    return this.setState({ events: s }), m.emit("event:deleted", { eventId: e }), !0;
+    return this.setState({ events: s }), p.emit("event:deleted", { eventId: e }), !0;
   }
   getEvents() {
     return this.calendar.getEvents();
@@ -4801,20 +4801,20 @@ class Q {
   }
   // Selection management
   selectEvent(e) {
-    this.setState({ selectedEvent: e }), m.emit("event:selected", { event: e });
+    this.setState({ selectedEvent: e }), p.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 }), m.emit("event:deselected", {});
+    this.setState({ selectedEvent: null }), p.emit("event:deselected", {});
   }
   selectDate(e) {
-    this.setState({ selectedDate: e }), m.emit("date:selected", { date: e });
+    this.setState({ selectedDate: e }), p.emit("date:selected", { date: e });
   }
   deselectDate() {
-    this.setState({ selectedDate: null }), m.emit("date:deselected", {});
+    this.setState({ selectedDate: null }), p.emit("date:deselected", {});
   }
   // Utility methods
   isToday(e) {
@@ -4834,7 +4834,7 @@ class Q {
   }
   // Error handling
   setError(e) {
-    this.setState({ error: e }), e && m.emit("error", { error: e });
+    this.setState({ error: e }), e && p.emit("error", { error: e });
   }
   clearError() {
     this.setState({ error: null });
@@ -4962,7 +4962,7 @@ class v extends f {
     return a && (a.toLowerCase() === "pm" && n < 12 ? o = n + 12 : a.toLowerCase() === "am" && n === 12 && (o = 0)), s.setHours(o, r || 0, 0, 0), s;
   }
 }
-class C {
+class E {
   /**
    * Create element with attributes and children
    */
@@ -5157,7 +5157,7 @@ class C {
     return e.addEventListener("keydown", a), s == null || s.focus(), () => e.removeEventListener("keydown", a);
   }
 }
-class p {
+class y {
   /**
    * Get CSS variable value
    */
@@ -5494,7 +5494,7 @@ class p {
 /**
  * Default theme colors
  */
-M(p, "colors", {
+M(y, "colors", {
   primary: "#3B82F6",
   // Modern Blue
   secondary: "#64748B",
@@ -5527,7 +5527,7 @@ M(p, "colors", {
 }), /**
  * Common CSS variables
  */
-M(p, "cssVariables", {
+M(y, "cssVariables", {
   // "Pro" Palette - Functional & Sharp
   "--fc-primary-color": "#2563EB",
   // International Blue (Focus)
@@ -5595,7 +5595,7 @@ M(p, "cssVariables", {
 }), /**
  * Get responsive breakpoints
  */
-M(p, "breakpoints", {
+M(y, "breakpoints", {
   xs: "320px",
   sm: "576px",
   md: "768px",
@@ -5983,7 +5983,7 @@ class J extends T {
   renderDay(e) {
     const { date: t, dayOfMonth: s, isOtherMonth: i, isToday: a, isSelected: n, isWeekend: r, events: o = [] } = e, c = s, l = ["month-day"];
     i && l.push("other-month"), a && l.push("today"), n && l.push("selected"), r && l.push("weekend");
-    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, y = d.map((D) => this.renderEvent(D)).join(""), b = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
+    const d = o.slice(0, this.config.maxEventsToShow), h = o.length - this.config.maxEventsToShow, m = d.map((D) => this.renderEvent(D)).join(""), b = h > 0 ? `<div class="more-events">+${h} more</div>` : "";
     return `
             <div class="${l.join(" ")}"
                  data-date="${t.toISOString()}"
@@ -5992,7 +5992,7 @@ class J extends T {
                     <span class="day-number">${c}</span>
                 </div>
                 <div class="day-events">
-                    ${y}
+                    ${m}
                     ${b}
                 </div>
             </div>
@@ -6002,7 +6002,7 @@ class J extends T {
     const { title: t, start: s, allDay: i, backgroundColor: a, textColor: n } = e;
     let r = "";
     if (a) {
-      const l = p.sanitizeColor(a), d = p.sanitizeColor(n, "white");
+      const l = y.sanitizeColor(a), d = y.sanitizeColor(n, "white");
       r += `background-color: ${l}; color: ${d};`;
     }
     let o = "";
@@ -6012,9 +6012,9 @@ class J extends T {
             <div class="${c.join(" ")}"
                  style="${r}"
                  data-event-id="${e.id}"
-                 title="${C.escapeHTML(t)}">
+                 title="${E.escapeHTML(t)}">
                 ${o ? `<span class="event-time">${o}</span>` : ""}
-                <span class="event-title">${C.escapeHTML(t)}</span>
+                <span class="event-title">${E.escapeHTML(t)}</span>
             </div>
         `;
   }
@@ -6348,23 +6348,23 @@ class X extends T {
         ` : '<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(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 20), o = p.sanitizeColor(e.backgroundColor), c = p.sanitizeColor(p.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 20), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${r}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
+                <span class="event-title">${E.escapeHTML(e.title)}</span>
                 <span class="event-time">${v.formatTime(t)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = p.sanitizeColor(e.backgroundColor), s = p.sanitizeColor(p.getContrastColor(t), "white");
+    const t = y.sanitizeColor(e.backgroundColor), s = y.sanitizeColor(y.getContrastColor(t), "white");
     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)}
+                ${E.escapeHTML(e.title)}
             </div>
         `;
   }
@@ -6678,23 +6678,23 @@ class ee extends T {
         `;
   }
   renderTimedEvent(e) {
-    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 30), o = p.sanitizeColor(e.backgroundColor), c = p.sanitizeColor(p.getContrastColor(o), "white");
+    const t = new Date(e.start), s = new Date(e.end), i = t.getHours() * 60 + t.getMinutes(), a = (s - t) / (1e3 * 60), n = i, r = Math.max(a, 30), o = y.sanitizeColor(e.backgroundColor), c = y.sanitizeColor(y.getContrastColor(o), "white");
     return `
             <div class="event-container"
                  style="top: ${n}px; height: ${r}px; background-color: ${o}; color: ${c};"
                  data-event-id="${e.id}">
-                <span class="event-title">${C.escapeHTML(e.title)}</span>
+                <span class="event-title">${E.escapeHTML(e.title)}</span>
                 <span class="event-time">${v.formatTime(t)} - ${v.formatTime(s)}</span>
             </div>
         `;
   }
   renderAllDayEvent(e) {
-    const t = p.sanitizeColor(e.backgroundColor), s = p.sanitizeColor(p.getContrastColor(t), "white");
+    const t = y.sanitizeColor(e.backgroundColor), s = y.sanitizeColor(y.getContrastColor(t), "white");
     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)}
+                ${E.escapeHTML(e.title)}
             </div>
         `;
   }
@@ -6751,8 +6751,8 @@ class te extends T {
   }
   getStyles() {
     return `
-            ${p.getBaseStyles()}
-            ${p.getButtonStyles()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
 
             :host {
                 display: none;
@@ -6995,7 +6995,7 @@ class te extends T {
     });
   }
   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 = E.trapFocus(this.modalContent));
   }
   close() {
     this.removeAttribute("open"), this._cleanupFocusTrap && (this._cleanupFocusTrap(), this._cleanupFocusTrap = null);
@@ -7046,13 +7046,13 @@ class se extends T {
     this.stateManager = new Q(e), this.stateManager.subscribe(this.handleStateChange.bind(this)), this.setupEventListeners();
   }
   setupEventListeners() {
-    m.on("navigation:*", (e, t) => {
+    p.on("navigation:*", (e, t) => {
       this.emit("calendar-navigate", { action: t.split(":")[1], ...e });
-    }), m.on("view:changed", (e) => {
+    }), p.on("view:changed", (e) => {
       this.emit("calendar-view-change", e);
-    }), m.on("event:*", (e, t) => {
+    }), p.on("event:*", (e, t) => {
       this.emit(`calendar-event-${t.split(":")[1]}`, e);
-    }), m.on("date:selected", (e) => {
+    }), p.on("date:selected", (e) => {
       this.emit("calendar-date-select", e);
     });
   }
@@ -7068,10 +7068,10 @@ class se extends T {
   getStyles() {
     const e = this.getAttribute("height") || "800px";
     return `
-            ${p.getBaseStyles()}
-            ${p.getButtonStyles()}
-            ${p.getGridStyles()}
-            ${p.getAnimations()}
+            ${y.getBaseStyles()}
+            ${y.getButtonStyles()}
+            ${y.getGridStyles()}
+            ${y.getAnimations()}
 
             :host {
                 --calendar-height: ${e};
@@ -7234,10 +7234,15 @@ class se extends T {
                 flex-direction: column;
             }
 
-            /* Ensure view components have proper dimensions */
-            forcecal-month,
-            forcecal-week,
-            forcecal-day {
+            /* Ensure view container has proper dimensions */
+            #calendar-view-container {
+                display: block;
+                width: 100%;
+                height: 100%;
+                flex: 1;
+            }
+
+            #calendar-view-container > * {
                 display: block;
                 width: 100%;
                 height: 100%;
@@ -7376,38 +7381,130 @@ class se extends T {
         `;
   }
   renderView() {
-    if (!this.currentView)
-      return "<div>Loading view...</div>";
-    const e = `forcecal-${this.currentView}`;
-    return `<${e} id="calendar-view"></${e}>`;
+    return '<div id="calendar-view-container"></div>';
   }
   afterRender() {
-    var i;
-    const e = this.$("#calendar-view");
-    if (console.log("[ForceCalendar] afterRender - viewElement:", e), console.log("[ForceCalendar] afterRender - stateManager:", !!this.stateManager), e && this.stateManager) {
-      console.log("[ForceCalendar] viewElement.constructor.name:", (i = e.constructor) == null ? void 0 : i.name), console.log("[ForceCalendar] viewElement methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(e))), typeof customElements < "u" && customElements.upgrade && (console.log("[ForceCalendar] Forcing custom element upgrade"), customElements.upgrade(e));
-      const a = this._registryId || (this._registryId = "fc-" + Math.random().toString(36).substr(2, 9));
-      window.__forceCalendarRegistry = window.__forceCalendarRegistry || {}, window.__forceCalendarRegistry[a] = this.stateManager, e.setAttribute("data-state-registry", a), console.log("[ForceCalendar] Set registry ID:", a), e._checkRegistry ? (console.log("[ForceCalendar] Calling _checkRegistry directly"), e._checkRegistry()) : e.setStateManager && (console.log("[ForceCalendar] Calling setStateManager directly"), e.setStateManager(this.stateManager));
-    } else
-      console.log("[ForceCalendar] Could not set stateManager - viewElement:", !!e, "stateManager:", !!this.stateManager);
-    this.$$("[data-action]").forEach((a) => {
-      this.addListener(a, "click", this.handleNavigation);
-    }), this.$$("[data-view]").forEach((a) => {
-      this.addListener(a, "click", this.handleViewChange);
+    const e = this.$("#calendar-view-container");
+    if (console.log("[ForceCalendar] afterRender - container:", !!e, "stateManager:", !!this.stateManager, "currentView:", this.currentView), e && this.stateManager && this.currentView) {
+      this._currentViewInstance && this._currentViewInstance.cleanup && this._currentViewInstance.cleanup(), console.log("[ForceCalendar] Creating view for:", this.currentView);
+      const i = this._createViewRenderer(this.currentView);
+      i && (this._currentViewInstance = i, i.stateManager = this.stateManager, i.container = e, i.render(), this.stateManager.subscribe((a, n) => {
+        i && i.render && i.render();
+      }));
+    }
+    this.$$("[data-action]").forEach((i) => {
+      this.addListener(i, "click", this.handleNavigation);
+    }), this.$$("[data-view]").forEach((i) => {
+      this.addListener(i, "click", this.handleViewChange);
     });
     const t = this.$("#event-modal"), s = this.$("#create-event-btn");
     s && t && this.addListener(s, "click", () => {
       t.open(/* @__PURE__ */ new Date());
-    }), this.addListener(this.shadowRoot, "day-click", (a) => {
-      t && t.open(a.detail.date);
-    }), t && this.addListener(t, "save", (a) => {
-      const n = a.detail, r = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
+    }), this.addListener(this.shadowRoot, "day-click", (i) => {
+      t && t.open(i.detail.date);
+    }), t && this.addListener(t, "save", (i) => {
+      const a = i.detail, n = window.crypto && typeof window.crypto.randomUUID == "function" ? window.crypto.randomUUID() : Math.random().toString(36).substring(2, 15);
       this.stateManager.addEvent({
-        id: r,
-        ...n
+        id: n,
+        ...a
       });
     });
   }
+  _createViewRenderer(e) {
+    return {
+      stateManager: null,
+      container: null,
+      _listeners: [],
+      cleanup() {
+        this._listeners.forEach(({ element: t, event: s, handler: i }) => {
+          t.removeEventListener(s, i);
+        }), this._listeners = [];
+      },
+      addListener(t, s, i) {
+        t.addEventListener(s, i), this._listeners.push({ element: t, event: s, handler: i });
+      },
+      render() {
+        if (!this.container || !this.stateManager) return;
+        const t = this.stateManager.getViewData();
+        if (!t || !t.weeks) {
+          this.container.innerHTML = '<div style="padding: 20px; text-align: center;">Loading calendar...</div>';
+          return;
+        }
+        this.cleanup();
+        const s = this.stateManager.getState().config, i = this._renderMonthView(t, s);
+        this.container.innerHTML = i, this._attachEventHandlers();
+      },
+      _renderMonthView(t, s) {
+        const i = s.weekStartsOn || 0, a = [];
+        for (let r = 0; r < 7; r++) {
+          const o = (i + r) % 7;
+          a.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][o]);
+        }
+        let n = `
+                    <style>
+                        .fc-month-view { display: flex; flex-direction: column; height: 100%; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; }
+                        .fc-month-header { display: grid; grid-template-columns: repeat(7, 1fr); background: #fafafa; border-bottom: 1px solid #e5e7eb; }
+                        .fc-month-header-cell { padding: 8px; text-align: left; font-weight: 600; font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }
+                        .fc-month-body { flex: 1; display: flex; flex-direction: column; }
+                        .fc-month-week { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #e5e7eb; }
+                        .fc-month-week:last-child { border-bottom: none; }
+                        .fc-month-day { background: #fff; padding: 4px; position: relative; border-right: 1px solid #e5e7eb; min-height: 80px; cursor: pointer; }
+                        .fc-month-day:last-child { border-right: none; }
+                        .fc-month-day:hover { background: #f9fafb; }
+                        .fc-month-day.other-month { background: #f9fafb; }
+                        .fc-month-day.other-month .fc-day-number { color: #d1d5db; }
+                        .fc-month-day.today .fc-day-number { background: #ef4444; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
+                        .fc-day-number { font-size: 12px; font-weight: 500; color: #111827; padding: 4px; }
+                        .fc-day-events { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
+                        .fc-event { font-size: 11px; padding: 2px 6px; border-radius: 2px; background: #2563eb; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
+                        .fc-event:hover { opacity: 0.9; }
+                        .fc-more-events { font-size: 10px; color: #6b7280; padding: 2px 4px; cursor: pointer; }
+                        .fc-more-events:hover { color: #111827; text-decoration: underline; }
+                    </style>
+                    <div class="fc-month-view">
+                        <div class="fc-month-header">
+                            ${a.map((r) => `<div class="fc-month-header-cell">${r}</div>`).join("")}
+                        </div>
+                        <div class="fc-month-body">
+                `;
+        return t.weeks.forEach((r) => {
+          n += '<div class="fc-month-week">', r.days.forEach((o) => {
+            const c = ["fc-month-day"];
+            o.isCurrentMonth || c.push("other-month"), o.isToday && c.push("today");
+            const l = o.events || [], d = l.slice(0, 3), h = l.length - 3;
+            n += `
+                            <div class="${c.join(" ")}" data-date="${o.date}">
+                                <div class="fc-day-number">${o.dayOfMonth}</div>
+                                <div class="fc-day-events">
+                                    ${d.map((m) => `
+                                        <div class="fc-event" data-event-id="${m.id}" style="background-color: ${m.backgroundColor || "#2563eb"}">
+                                            ${m.title}
+                                        </div>
+                                    `).join("")}
+                                    ${h > 0 ? `<div class="fc-more-events">+${h} more</div>` : ""}
+                                </div>
+                            </div>
+                        `;
+          }), n += "</div>";
+        }), n += "</div></div>", n;
+      },
+      _attachEventHandlers() {
+        const t = this.stateManager;
+        this.container.querySelectorAll(".fc-month-day").forEach((s) => {
+          this.addListener(s, "click", (i) => {
+            const a = new Date(s.dataset.date);
+            t.selectDate(a);
+          });
+        }), this.container.querySelectorAll(".fc-event").forEach((s) => {
+          this.addListener(s, "click", (i) => {
+            i.stopPropagation();
+            const a = s.dataset.eventId, n = t.getEvents().find((r) => r.id === a);
+            n && t.selectEvent(n);
+          });
+        });
+      }
+    };
+  }
   handleNavigation(e) {
     switch (e.currentTarget.dataset.action) {
       case "today":
@@ -7487,22 +7584,22 @@ class se extends T {
     this.stateManager.today();
   }
   destroy() {
-    this.stateManager && this.stateManager.destroy(), m.clear(), super.cleanup();
+    this.stateManager && this.stateManager.destroy(), p.clear(), super.cleanup();
   }
 }
 customElements.get("forcecal-main") || customElements.define("forcecal-main", se);
 typeof window < "u" && typeof customElements < "u" && console.log("Force Calendar Interface loading...");
 export {
   T as BaseComponent,
-  C as DOMUtils,
+  E as DOMUtils,
   v as DateUtils,
   ee as DayView,
   G as EventBus,
   se as ForceCalendar,
   J as MonthView,
   Q as StateManager,
-  p as StyleUtils,
+  y as StyleUtils,
   X as WeekView,
-  m as eventBus
+  p as eventBus
 };
 //# sourceMappingURL=force-calendar-interface.esm.js.map