@luckydye/calendar 1.2.3 → 1.3.0

package/dist/calendar.js

@@ -249,7 +249,7 @@ let Vt = class extends HTMLElement {
 Vt.elementStyles = [], Vt.shadowRootOptions = { mode: "open" }, Vt[re("elementProperties")] = /* @__PURE__ */ new Map(), Vt[re("finalized")] = /* @__PURE__ */ new Map(), yn?.({ ReactiveElement: Vt }), (Ce.reactiveElementVersions ??= []).push("2.1.2");
 const Ke = globalThis, di = (n) => n, we = Ke.trustedTypes, ui = we ? we.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Bi = "$lit$", At = `lit$${Math.random().toFixed(9).slice(2)}$`, qi = "?" + At, bn = `<${qi}>`, Lt = document, le = () => Lt.createComment(""), ce = (n) => n === null || typeof n != "object" && typeof n != "function", Xe = Array.isArray, wn = (n) => Xe(n) || typeof n?.[Symbol.iterator] == "function", _e = `[ 	
 \f\r]`, ne = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, fi = /-->/g, gi = />/g, It = RegExp(`>|${_e}(?:([^\\s"'>=/]+)(${_e}*=${_e}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), pi = /'/g, vi = /"/g, Vi = /^(?:script|style|textarea|title)$/i, En = (n) => (t, ...e) => ({ _$litType$: n, strings: t, values: e }), _ = En(1), Xt = /* @__PURE__ */ Symbol.for("lit-noChange"), G = /* @__PURE__ */ Symbol.for("lit-nothing"), mi = /* @__PURE__ */ new WeakMap(), Ut = Lt.createTreeWalker(Lt, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), pi = /'/g, vi = /"/g, Vi = /^(?:script|style|textarea|title)$/i, En = (n) => (t, ...e) => ({ _$litType$: n, strings: t, values: e }), O = En(1), Xt = /* @__PURE__ */ Symbol.for("lit-noChange"), G = /* @__PURE__ */ Symbol.for("lit-nothing"), mi = /* @__PURE__ */ new WeakMap(), Ut = Lt.createTreeWalker(Lt, 129);
 function ji(n, t) {
   if (!Xe(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ui !== void 0 ? ui.createHTML(t) : t;
@@ -1609,14 +1609,14 @@ function ds(n, t) {
         ;
   }
   if (d) {
-    var C = void 0;
+    var M = void 0;
     if (F(t.byweekno, -1))
-      C = -1;
+      M = -1;
     else {
-      var H = Gt(Wt(n - 1, 1, 1)), M = lt(7 - H.valueOf() + t.wkst, 7), E = oe(n - 1) ? 366 : 365, $ = void 0;
-      M >= 4 ? (M = 0, $ = E + lt(H - t.wkst, 7)) : $ = i - d, C = Math.floor(52 + lt($, 7) / 4);
+      var H = Gt(Wt(n - 1, 1, 1)), $ = lt(7 - H.valueOf() + t.wkst, 7), w = oe(n - 1) ? 366 : 365, D = void 0;
+      $ >= 4 ? ($ = 0, D = w + lt(H - t.wkst, 7)) : D = i - d, M = Math.floor(52 + lt(D, 7) / 4);
     }
-    if (F(t.byweekno, C))
+    if (F(t.byweekno, M))
       for (var p = 0; p < d; p++)
         a.wnomask[p] = 1;
   }
@@ -1826,25 +1826,25 @@ function nn(n, t) {
     var h = c.getdayset(i)(l.year, l.month, l.day), u = h[0], f = h[1], v = h[2], g = ys(u, f, v, c, t);
     if (Z(o))
       for (var p = vs(o, d, f, v, c, u), y = 0; y < p.length; y++) {
-        var C = p[y];
-        if (r && C > r)
+        var M = p[y];
+        if (r && M > r)
           return xt(n);
-        if (C >= e) {
-          var H = Ci(C, t);
+        if (M >= e) {
+          var H = Ci(M, t);
           if (!n.accept(H) || a && (--a, !a))
             return xt(n);
         }
       }
     else
       for (var y = f; y < v; y++) {
-        var M = u[y];
-        if (V(M))
-          for (var E = Ji(c.yearordinal + M), $ = 0; $ < d.length; $++) {
-            var w = d[$], C = Qi(E, w);
-            if (r && C > r)
+        var $ = u[y];
+        if (V($))
+          for (var w = Ji(c.yearordinal + $), D = 0; D < d.length; D++) {
+            var E = d[D], M = Qi(w, E);
+            if (r && M > r)
               return xt(n);
-            if (C >= e) {
-              var H = Ci(C, t);
+            if (M >= e) {
+              var H = Ci(M, t);
               if (!n.accept(H) || a && (--a, !a))
                 return xt(n);
             }
@@ -2274,6 +2274,14 @@ class N {
       this.calendarEvents.set(e.id, e);
     return this.sendEvents(), t;
   }
+  applyEventOptimistically(t) {
+    this.calendarEvents.set(t.id, t), this.storage?.putEvent(t).catch(() => {
+    }), this.sendEvents();
+  }
+  removeEventOptimistically(t) {
+    this.calendarEvents.delete(t), this.storage?.deleteEvent(t).catch(() => {
+    }), this.sendEvents();
+  }
   setFilter(t) {
     this.filter = t, this.sendEvents();
   }
@@ -2769,7 +2777,7 @@ const ke = class ke extends Kt {
     }, 200));
   }
   render() {
-    return !this.isShowing || !this.currentMessage ? _`` : _`<div class="message">${this.currentMessage}</div>`;
+    return !this.isShowing || !this.currentMessage ? O`` : O`<div class="message">${this.currentMessage}</div>`;
   }
 };
 ke.styles = zi`
@@ -3006,6 +3014,13 @@ class zs {
       r.objectStore(this.storeName).put(this.serializeEvent(t)), r.oncomplete = () => i(), r.onerror = () => s(r.error);
     });
   }
+  async deleteEvent(t) {
+    const e = await this.open();
+    return new Promise((i, s) => {
+      const r = e.transaction(this.storeName, "readwrite");
+      r.objectStore(this.storeName).delete(t), r.oncomplete = () => i(), r.onerror = () => s(r.error);
+    });
+  }
 }
 const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
   constructor() {
@@ -3383,8 +3398,8 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         if (!this.scrollAnimationFrame) return;
         const y = Math.min((p - u) / h, 1);
         this._dayHeight = r + (t - r) * f(y), this.updateWeekOffsets();
-        const C = c + (d - c) * v(y);
-        this._scrollTop = Math.max(0, C * this.totalHeight), this.scrollContainer && (this.scrollContent && this.scrollContainer.scrollHeight < this._scrollTop && (this.scrollContent.style.minHeight = this._scrollTop + window.innerHeight + "px"), this.scrollContainer.scrollTop = this._scrollTop), this.renderCanvas(), y < 1 ? this.scrollAnimationFrame = requestAnimationFrame(g) : (this._dayHeight = t, this._scrollTop = e, this.saveDayHeight(), this.saveScrollPosition(), this.scrollAnimationFrame = null, this.renderCanvas());
+        const M = c + (d - c) * v(y);
+        this._scrollTop = Math.max(0, M * this.totalHeight), this.scrollContainer && (this.scrollContent && this.scrollContainer.scrollHeight < this._scrollTop && (this.scrollContent.style.minHeight = this._scrollTop + window.innerHeight + "px"), this.scrollContainer.scrollTop = this._scrollTop), this.renderCanvas(), y < 1 ? this.scrollAnimationFrame = requestAnimationFrame(g) : (this._dayHeight = t, this._scrollTop = e, this.saveDayHeight(), this.saveScrollPosition(), this.scrollAnimationFrame = null, this.renderCanvas());
       };
       this.scrollAnimationFrame = requestAnimationFrame(g);
       return;
@@ -3605,10 +3620,10 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       if (u >= 0) {
         const { row: f, col: v } = this.getDayVisualPosition(u), g = z + v * a, p = h.yOffset + f * this.dayHeight - r, y = getComputedStyle(this).getPropertyValue("--bg-today").trim() || "rgba(255, 255, 255, 0.05)";
         if (t.fillStyle = y, t.fillRect(g, p, a, this.dayHeight), d) {
-          const C = /* @__PURE__ */ new Date(), H = C.getHours() * 60 + C.getMinutes(), M = p + H / 1440 * this.dayHeight;
-          if (M >= 0 && M <= i) {
-            const E = getComputedStyle(this).getPropertyValue("--accent-current-time").trim() || "rgba(255, 0, 0, 0.8)";
-            t.strokeStyle = E, t.lineWidth = 1, t.beginPath(), t.moveTo(g, M), t.lineTo(g + a, M), t.stroke(), t.lineWidth = 1;
+          const M = /* @__PURE__ */ new Date(), H = M.getHours() * 60 + M.getMinutes(), $ = p + H / 1440 * this.dayHeight;
+          if ($ >= 0 && $ <= i) {
+            const w = getComputedStyle(this).getPropertyValue("--accent-current-time").trim() || "rgba(255, 0, 0, 0.8)";
+            t.strokeStyle = w, t.lineWidth = 1, t.beginPath(), t.moveTo(g, $), t.lineTo(g + a, $), t.stroke(), t.lineWidth = 1;
           }
         }
       }
@@ -3623,21 +3638,21 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       if (!u) continue;
       const f = u.yOffset - r;
       if (this.filter && h > 0) {
-        const w = c[h - 1];
-        if (!w) continue;
-        const S = this.weeks.indexOf(w), O = this.weeks.indexOf(u) - S - 1;
-        if (O > 0) {
+        const E = c[h - 1];
+        if (!E) continue;
+        const S = this.weeks.indexOf(E), _ = this.weeks.indexOf(u) - S - 1;
+        if (_ > 0) {
           const b = f, x = getComputedStyle(this).getPropertyValue("--grid-color-strong").trim() || "rgba(255, 255, 255, 0.3)";
           t.strokeStyle = x, t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(z, b), t.lineTo(e, b), t.stroke(), t.setLineDash([]);
           const T = getComputedStyle(this).getPropertyValue("--text-muted").trim() || "rgba(255, 255, 255, 0.4)";
           t.fillStyle = T, t.textAlign = "center";
-          const D = `⋯ ${O} week${O > 1 ? "s" : ""}`, U = t.measureText(D).width, L = 8, P = (z + e) / 2 - U / 2 - L, B = b - 8, R = U + L * 2, W = 16, K = getComputedStyle(this).getPropertyValue("--bg-primary").trim() || "rgba(30, 30, 30, 0.9)";
-          t.fillStyle = K, t.beginPath(), t.roundRect(P, B, R, W, 8), t.fill(), t.fillStyle = T, t.fillText(D, (z + e) / 2, b + 4);
+          const C = `⋯ ${_} week${_ > 1 ? "s" : ""}`, U = t.measureText(C).width, L = 8, P = (z + e) / 2 - U / 2 - L, B = b - 8, R = U + L * 2, W = 16, K = getComputedStyle(this).getPropertyValue("--bg-primary").trim() || "rgba(30, 30, 30, 0.9)";
+          t.fillStyle = K, t.beginPath(), t.roundRect(P, B, R, W, 8), t.fill(), t.fillStyle = T, t.fillText(C, (z + e) / 2, b + 4);
         }
       }
       t.strokeStyle = getComputedStyle(this).getPropertyValue("--grid-color").trim() || "rgba(255, 255, 255, 0.1)", t.beginPath(), t.moveTo(z, f), t.lineTo(e, f), t.stroke();
-      for (let w = 1; w < this.rowsPerWeek; w++) {
-        const S = f + w * this.dayHeight;
+      for (let E = 1; E < this.rowsPerWeek; E++) {
+        const S = f + E * this.dayHeight;
         S >= 0 && S <= i && (t.beginPath(), t.moveTo(z, S), t.lineTo(e, S), t.stroke());
       }
       const v = Math.max(
@@ -3653,73 +3668,73 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         /[\d.]+\)$/,
         `${0.4 * v})`
       );
-      for (let w = 0; w < this.rowsPerWeek; w++) {
-        const S = f + w * this.dayHeight;
+      for (let E = 0; E < this.rowsPerWeek; E++) {
+        const S = f + E * this.dayHeight;
         for (let A = 0; A < 24; A++) {
-          const O = S + A / 24 * this.dayHeight;
-          if (O >= 0 && O <= i && (t.beginPath(), t.moveTo(z, O), t.lineTo(e, O), t.stroke(), v > 0.1)) {
+          const _ = S + A / 24 * this.dayHeight;
+          if (_ >= 0 && _ <= i && (t.beginPath(), t.moveTo(z, _), t.lineTo(e, _), t.stroke(), v > 0.1)) {
             const b = `${A.toString().padStart(2, "0")}:00`;
-            t.fillText(b, 48, O + 4);
+            t.fillText(b, 48, _ + 4);
           }
         }
       }
       if (v > 0.1) {
-        const w = /* @__PURE__ */ new Date(), S = u.days.findIndex(
-          (A) => N.isSameDay(A, w)
+        const E = /* @__PURE__ */ new Date(), S = u.days.findIndex(
+          (A) => N.isSameDay(A, E)
         );
         if (S >= 0) {
-          const { row: A } = this.getDayVisualPosition(S), O = w.getHours() * 60 + w.getMinutes(), b = f + A * this.dayHeight + O / 1440 * this.dayHeight;
+          const { row: A } = this.getDayVisualPosition(S), _ = E.getHours() * 60 + E.getMinutes(), b = f + A * this.dayHeight + _ / 1440 * this.dayHeight;
           if (b >= 0 && b <= i) {
-            const x = w.getHours().toString().padStart(2, "0"), T = w.getMinutes().toString().padStart(2, "0"), D = `${x}:${T}`;
+            const x = E.getHours().toString().padStart(2, "0"), T = E.getMinutes().toString().padStart(2, "0"), C = `${x}:${T}`;
             t.save(), t.textAlign = "right", t.textBaseline = "middle";
-            const U = t.measureText(D).width, L = 6, P = 48, B = b, R = getComputedStyle(this).getPropertyValue("--bg-elevated").trim() || "rgba(0, 0, 0, 0.7)";
+            const U = t.measureText(C).width, L = 6, P = 48, B = b, R = getComputedStyle(this).getPropertyValue("--bg-elevated").trim() || "rgba(0, 0, 0, 0.7)";
             t.fillStyle = R, t.beginPath(), t.roundRect(
               P - U - L,
               B - 8,
               U + L * 2,
               16,
               4
-            ), t.fill(), t.fillStyle = getComputedStyle(this).getPropertyValue("--text-primary").trim() || "rgba(255, 255, 255, 1)", t.fillText(D, P, B), t.restore();
+            ), t.fill(), t.fillStyle = getComputedStyle(this).getPropertyValue("--text-primary").trim() || "rgba(255, 255, 255, 1)", t.fillText(C, P, B), t.restore();
           }
         }
       }
       const y = Math.max(
         0,
         Math.min(1, 1 - (this.dayHeight - 300) / 50)
-      ), C = getComputedStyle(this).getPropertyValue("--text-muted").trim() || "rgba(255, 255, 255, 0.4)";
-      t.fillStyle = C.replace(
+      ), M = getComputedStyle(this).getPropertyValue("--text-muted").trim() || "rgba(255, 255, 255, 0.4)";
+      t.fillStyle = M.replace(
         /[\d.]+\)$/,
         `${0.4 * y})`
       ), t.textAlign = "center";
-      const H = `W${u.weekNumber}`, M = f, E = f + u.height, $ = Math.max(
+      const H = `W${u.weekNumber}`, $ = f, w = f + u.height, D = Math.max(
         14,
-        Math.min(M + u.height / 2 + 4, E - 4)
+        Math.min($ + u.height / 2 + 4, w - 4)
       );
-      $ >= Math.max(0, M + 4) && $ <= Math.min(i, E) && y > 0.1 && t.fillText(H, 30, $);
+      D >= Math.max(0, $ + 4) && D <= Math.min(i, w) && y > 0.1 && t.fillText(H, 30, D);
     }
     this.renderEventsOnCanvas(t, r, i, a, c), this.renderDateLabels(), this.renderWeekdayLabels(t, a, c, r, i), this.isCreatingEvent && this.renderEventCreationPreview(), this.isDraggingEvent && this.renderEventMovePreview(), this.renderMinimap();
   }
   renderEventsOnCanvas(t, e, i, s, r) {
     const o = this.events, a = getComputedStyle(this).fontFamily, l = e + i, c = this.dayHeight >= 300;
     if (this.eventRects = [], r.length === 0) return;
-    const d = r[0], h = r[r.length - 1], u = d.days[0], f = h.days[6], v = u.getTime(), g = f.getTime() + 864e5 - 1, p = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), C = [], H = [], M = [];
+    const d = r[0], h = r[r.length - 1], u = d.days[0], f = h.days[6], v = u.getTime(), g = f.getTime() + 864e5 - 1, p = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map(), M = [], H = [], $ = [];
     for (const b of o) {
       const x = b.start.getTime(), T = b.end.getTime();
       if (T < v || x > g)
         continue;
-      const D = [];
+      const C = [];
       for (const P of r) {
         const B = P.days[0], R = P.days[6];
         if (!B || !R) continue;
         const W = B.getTime(), K = R.getTime() + 86399999;
         if (T >= W && x <= K) {
           const J = this.weeks.indexOf(P);
-          D.push({ weekIndex: J, week: P });
+          C.push({ weekIndex: J, week: P });
         }
       }
-      const U = D.length, L = b.isAllDay === !0;
-      for (let P = 0; P < D.length; P++) {
-        const { weekIndex: B, week: R } = D[P], W = P === 0, K = P === D.length - 1;
+      const U = C.length, L = b.isAllDay === !0;
+      for (let P = 0; P < C.length; P++) {
+        const { weekIndex: B, week: R } = C[P], W = P === 0, K = P === C.length - 1;
         let J = 0, wt = 6;
         if (W && (J = Ui(R, b.start)), K) {
           const ut = L ? new Date(b.end.getTime() - 1) : b.end;
@@ -3735,10 +3750,10 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
           isEnd: K,
           totalWeeks: U
         };
-        L ? H.push(rt) : M.push(rt);
+        L ? H.push(rt) : $.push(rt);
       }
     }
-    const E = c ? M.flatMap((b) => {
+    const w = c ? $.flatMap((b) => {
       if (b.startDayIndex === b.endDayIndex) return [b];
       const x = [];
       for (let T = b.startDayIndex; T <= b.endDayIndex; T++)
@@ -3751,20 +3766,20 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
           totalWeeks: 1
         });
       return x;
-    }) : M;
-    C.push(...H, ...E);
-    const $ = /* @__PURE__ */ new Map();
-    for (const b of C) {
+    }) : $;
+    M.push(...H, ...w);
+    const D = /* @__PURE__ */ new Map();
+    for (const b of M) {
       const x = b.event.isAllDay === !0;
       if (c && !x)
         for (let T = b.startDayIndex; T <= b.endDayIndex; T++) {
-          const D = `${b.weekIndex}-${T}`;
-          $.has(D) || $.set(D, []), $.get(D).push(b);
+          const C = `${b.weekIndex}-${T}`;
+          D.has(C) || D.set(C, []), D.get(C).push(b);
         }
     }
-    const w = /* @__PURE__ */ new Map();
-    for (const [b, x] of $) {
-      const [T, D] = b.split("-"), U = parseInt(D), L = parseInt(T), P = [];
+    const E = /* @__PURE__ */ new Map();
+    for (const [b, x] of D) {
+      const [T, C] = b.split("-"), U = parseInt(C), L = parseInt(T), P = [];
       for (const R of x) {
         const W = this.weeks[L];
         if (!W) continue;
@@ -3789,21 +3804,21 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
           ;
         W === B.length ? B.push({ endMinutes: R.endMinutes }) : B[W].endMinutes = R.endMinutes;
         const K = `${R.segment.weekIndex}-${R.segment.event.id}-${U}`;
-        w.set(K, {
+        E.set(K, {
           column: W,
           totalColumns: B.length
         });
       }
       for (const R of P) {
-        const W = `${R.segment.weekIndex}-${R.segment.event.id}-${U}`, K = w.get(W);
+        const W = `${R.segment.weekIndex}-${R.segment.event.id}-${U}`, K = E.get(W);
         K && (K.totalColumns = B.length);
       }
     }
-    for (const b of C) {
+    for (const b of M) {
       const {
         event: x,
         week: T,
-        weekIndex: D,
+        weekIndex: C,
         startDayIndex: U,
         endDayIndex: L,
         isStart: P,
@@ -3826,13 +3841,13 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         ), Et = x.start.getTime(), gt = x.end.getTime() - 6e4, st = Math.max(Et, nt), j = Math.min(gt, q), pt = new Date(st), vt = new Date(j), Pt = pt.getHours() * 60 + pt.getMinutes(), Rt = vt.getHours() * 60 + vt.getMinutes(), $t = W + J.row * this.dayHeight;
         rt = $t + Pt / 1440 * this.dayHeight, ut = $t + Rt / 1440 * this.dayHeight;
       } else {
-        const nt = `${D}-${x.id}`;
+        const nt = `${C}-${x.id}`;
         let q = y.get(nt);
         if (q === void 0) {
           for (q = 0; ; ) {
             let st = !0;
             for (let j = U; j <= L; j++) {
-              const pt = `${D}-${j}`;
+              const pt = `${C}-${j}`;
               if (p.get(pt)?.has(q)) {
                 st = !1;
                 break;
@@ -3844,7 +3859,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
           y.set(nt, q);
         }
         for (let st = U; st <= L; st++) {
-          const j = `${D}-${st}`;
+          const j = `${C}-${st}`;
           let pt = p.get(j);
           pt || (pt = /* @__PURE__ */ new Set(), p.set(j, pt)), pt.add(q);
         }
@@ -3859,7 +3874,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         ut - rt
       );
       let X, Tt;
-      const Qt = `${D}-${x.id}-${U}`, kt = w.get(Qt);
+      const Qt = `${C}-${x.id}-${U}`, kt = E.get(Qt);
       if (c && !K && kt && kt.totalColumns > 1) {
         const nt = s / kt.totalColumns;
         X = z + J.col * s + kt.column * nt, Tt = nt;
@@ -3983,27 +3998,27 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       "October",
       "November",
       "December"
-    ], A = [], O = /* @__PURE__ */ new Set();
+    ], A = [], _ = /* @__PURE__ */ new Set();
     for (const b of r) {
       const x = b.days[0];
       if (!x) continue;
-      const T = x.getMonth(), D = x.getFullYear(), U = `${T}-${D}`;
-      if (!O.has(U)) {
-        O.add(U);
+      const T = x.getMonth(), C = x.getFullYear(), U = `${T}-${C}`;
+      if (!_.has(U)) {
+        _.add(U);
         const L = S[T];
         L && A.push({
           monthKey: U,
           monthName: L,
-          year: D,
+          year: C,
           yOffset: b.yOffset
         });
       }
     }
     for (let b = 0; b < A.length; b++) {
-      const x = A[b], T = A[b + 1], D = x.yOffset, U = T ? T.yOffset : this.totalHeight;
+      const x = A[b], T = A[b + 1], C = x.yOffset, U = T ? T.yOffset : this.totalHeight;
       if (U < e) continue;
-      if (D > l) break;
-      const L = [12, 0, 0, 12], P = Math.max(0, e - D), B = U - D - 24, R = Math.min(P, B), K = D + R - e + 32;
+      if (C > l) break;
+      const L = [12, 0, 0, 12], P = Math.max(0, e - C), B = U - C - 24, R = Math.min(P, B), K = C + R - e + 32;
       t.save(), t.font = `bold 18px ${a}`, t.textAlign = "left", t.textBaseline = "top";
       const J = `${x.monthName} ${x.year}`, wt = t.measureText(J).width, ut = 64 + L[3] + 8, Q = K + L[0], X = 8, Tt = 8, Qt = getComputedStyle(this).getPropertyValue("--bg-elevated").trim() || "rgba(0, 0, 0, 0.7)";
       t.fillStyle = Qt, t.beginPath(), t.roundRect(
@@ -4173,40 +4188,40 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         for (let p = 0; p < 7; p++) {
           const y = g.days[p];
           if (!y) continue;
-          const { row: C, col: H } = this.getDayVisualPosition(p);
+          const { row: M, col: H } = this.getDayVisualPosition(p);
           if (H < l || H > c) continue;
-          const M = g.yOffset + C * this.dayHeight, E = M + this.dayHeight;
-          if (s < M || i > E) continue;
-          const $ = Math.max(i, M), w = Math.min(s, E), S = $ - M, A = Math.floor(
+          const $ = g.yOffset + M * this.dayHeight, w = $ + this.dayHeight;
+          if (s < $ || i > w) continue;
+          const D = Math.max(i, $), E = Math.min(s, w), S = D - $, A = Math.floor(
             S / this.dayHeight * 24 * 60
-          ), O = Math.floor(A / 60), b = A % 60, x = w - M, T = Math.ceil(
+          ), _ = Math.floor(A / 60), b = A % 60, x = E - $, T = Math.ceil(
             x / this.dayHeight * 24 * 60
-          ), D = Math.floor(T / 60), U = T % 60, L = new Date(y);
-          L.setHours(O, b, 0, 0);
+          ), C = Math.floor(T / 60), U = T % 60, L = new Date(y);
+          L.setHours(_, b, 0, 0);
           const P = new Date(y);
-          P.setHours(D, U, 59, 999), h.push({ start: L, end: P });
+          P.setHours(C, U, 59, 999), h.push({ start: L, end: P });
         }
     else
       for (const g of d)
         for (let p = 0; p < 7; p++) {
           const y = g.days[p];
           if (!y) continue;
-          const { row: C, col: H } = this.getDayVisualPosition(p);
+          const { row: M, col: H } = this.getDayVisualPosition(p);
           if (H < l || H > c) continue;
-          const M = g.yOffset + C * this.dayHeight, E = M + this.dayHeight;
-          if (s < M || i > E) continue;
-          const $ = new Date(y);
-          $.setHours(0, 0, 0, 0);
-          const w = new Date(y);
-          w.setHours(23, 59, 59, 999), h.push({ start: $, end: w });
+          const $ = g.yOffset + M * this.dayHeight, w = $ + this.dayHeight;
+          if (s < $ || i > w) continue;
+          const D = new Date(y);
+          D.setHours(0, 0, 0, 0);
+          const E = new Date(y);
+          E.setHours(23, 59, 59, 999), h.push({ start: D, end: E });
         }
     const f = /* @__PURE__ */ new Set();
     for (const g of this.events) {
       if (g.isAllDay) continue;
       const p = g.start.getTime(), y = g.end.getTime();
-      for (const C of h) {
-        const H = C.start.getTime(), M = C.end.getTime();
-        if (!(y < H || p > M)) {
+      for (const M of h) {
+        const H = M.start.getTime(), $ = M.end.getTime();
+        if (!(y < H || p > $)) {
           f.add(g);
           break;
         }
@@ -4233,7 +4248,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
     ), this.renderCanvas();
   }
   renderEvents() {
-    return _``;
+    return O``;
   }
   checkAndExtendRange() {
     if (this.isExtendingRange || this.filter) return;
@@ -4430,7 +4445,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
   renderVirtualEvent(t, e, i, s = !0) {
     if (!this.overlayCanvas || !this.overlayCtx || !this.scrollContainer)
       return;
-    const r = this.overlayCtx, o = getComputedStyle(this).fontFamily, c = (this.scrollContainer.getBoundingClientRect().width - z - Yi) / this._columnsPerRow, d = (S, A, O) => {
+    const r = this.overlayCtx, o = getComputedStyle(this).fontFamily, c = (this.scrollContainer.getBoundingClientRect().width - z - Yi) / this._columnsPerRow, d = (S, A, _) => {
       const b = this.weeks.find(
         (L) => L.days.some((P) => P.toDateString() === S.toDateString())
       );
@@ -4439,56 +4454,56 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         (L) => L.toDateString() === S.toDateString()
       );
       if (x < 0) return null;
-      const { row: T } = this.getDayVisualPosition(x), D = A * 60 + O;
-      return b.yOffset + T * this.dayHeight + D / 1440 * this.dayHeight - this.scrollTop;
+      const { row: T } = this.getDayVisualPosition(x), C = A * 60 + _;
+      return b.yOffset + T * this.dayHeight + C / 1440 * this.dayHeight - this.scrollTop;
     }, h = (S) => {
       const A = this.weeks.find(
         (x) => x.days.some((T) => T.toDateString() === S.toDateString())
       );
       if (!A) return null;
-      const O = A.days.findIndex(
+      const _ = A.days.findIndex(
         (x) => x.toDateString() === S.toDateString()
       );
-      if (O < 0) return null;
-      const { col: b } = this.getDayVisualPosition(O);
+      if (_ < 0) return null;
+      const { col: b } = this.getDayVisualPosition(_);
       return b * c;
-    }, u = (S, A, O) => {
-      const b = S + 2, x = c - 4, T = Math.max(4, O - A);
+    }, u = (S, A, _) => {
+      const b = S + 2, x = c - 4, T = Math.max(4, _ - A);
       r.fillStyle = i.fill, r.beginPath(), r.roundRect(b, A, x, T, 4), r.fill(), r.strokeStyle = i.stroke, r.lineWidth = 1, r.setLineDash([6, 3]), r.stroke(), r.setLineDash([]);
     }, f = t.toDateString() === e.toDateString();
     if (f) {
-      const S = h(t), A = d(t, t.getHours(), t.getMinutes()), O = d(e, e.getHours(), e.getMinutes());
-      S != null && A != null && O != null && u(S, A, O);
+      const S = h(t), A = d(t, t.getHours(), t.getMinutes()), _ = d(e, e.getHours(), e.getMinutes());
+      S != null && A != null && _ != null && u(S, A, _);
     } else {
       const S = new Date(t);
       S.setHours(0, 0, 0, 0);
       const A = new Date(e);
       for (A.setHours(23, 59, 59, 999); S <= A; ) {
-        const O = h(S);
-        if (O != null) {
+        const _ = h(S);
+        if (_ != null) {
           const b = S.toDateString() === t.toDateString(), x = S.toDateString() === e.toDateString();
-          let T, D;
-          b ? (T = d(S, t.getHours(), t.getMinutes()), D = d(S, 23, 59)) : x ? (T = d(S, 0, 0), D = d(S, e.getHours(), e.getMinutes())) : (T = d(S, 0, 0), D = d(S, 23, 59)), T != null && D != null && u(O, T, D);
+          let T, C;
+          b ? (T = d(S, t.getHours(), t.getMinutes()), C = d(S, 23, 59)) : x ? (T = d(S, 0, 0), C = d(S, e.getHours(), e.getMinutes())) : (T = d(S, 0, 0), C = d(S, 23, 59)), T != null && C != null && u(_, T, C);
         }
         S.setDate(S.getDate() + 1);
       }
     }
-    const v = (S) => `${S.getHours().toString().padStart(2, "0")}:${S.getMinutes().toString().padStart(2, "0")}`, g = (S) => `${S.getDate()}.${S.getMonth() + 1}`, p = f ? `${v(t)} – ${v(e)}` : `${g(t)} ${v(t)} – ${g(e)} ${v(e)}`, H = Math.abs(e.getTime() - t.getTime()) / (1e3 * 60) < 15, M = h(t), E = h(e), $ = d(t, t.getHours(), t.getMinutes()), w = d(e, e.getHours(), e.getMinutes());
-    if (M != null && E != null && $ != null && w != null) {
+    const v = (S) => `${S.getHours().toString().padStart(2, "0")}:${S.getMinutes().toString().padStart(2, "0")}`, g = (S) => `${S.getDate()}.${S.getMonth() + 1}`, p = f ? `${v(t)} – ${v(e)}` : `${g(t)} ${v(t)} – ${g(e)} ${v(e)}`, H = Math.abs(e.getTime() - t.getTime()) / (1e3 * 60) < 15, $ = h(t), w = h(e), D = d(t, t.getHours(), t.getMinutes()), E = d(e, e.getHours(), e.getMinutes());
+    if ($ != null && w != null && D != null && E != null) {
       r.font = `600 11px ${o}`, r.fillStyle = i.text, r.textAlign = "left";
-      const S = s ? M : E;
+      const S = s ? $ : w;
       if (H) {
-        const A = s ? $ : w, O = A + 6, b = A + 10, x = r.measureText(p).width, T = 6, D = getComputedStyle(this).getPropertyValue("--bg-elevated").trim() || "rgba(0, 0, 0, 0.8)";
-        r.fillStyle = D, r.beginPath(), r.roundRect(
+        const A = s ? D : E, _ = A + 6, b = A + 10, x = r.measureText(p).width, T = 6, C = getComputedStyle(this).getPropertyValue("--bg-elevated").trim() || "rgba(0, 0, 0, 0.8)";
+        r.fillStyle = C, r.beginPath(), r.roundRect(
           S + 4,
-          O,
+          _,
           x + T * 2,
           16,
           4
         ), r.fill(), r.fillStyle = "white", r.textBaseline = "top", r.fillText(p, S + 4 + T, b);
       } else {
         r.textBaseline = "top";
-        const A = s ? $ + 4 : w - 18;
+        const A = s ? D + 4 : E - 18;
         r.fillText(p, S + 8, A);
       }
     }
@@ -4510,19 +4525,19 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
           if (!d) continue;
           const { row: h, col: u } = this.getDayVisualPosition(c), f = u * s, v = l.yOffset + h * this.dayHeight - r, g = v + this.dayHeight;
           if (c === 5 || c === 6) {
-            const E = getComputedStyle(this).getPropertyValue("--bg-weekend").trim() || "rgba(255, 255, 255, 0.03)";
-            t.fillStyle = E, t.fillRect(f, v, s, this.dayHeight);
+            const w = getComputedStyle(this).getPropertyValue("--bg-weekend").trim() || "rgba(255, 255, 255, 0.03)";
+            t.fillStyle = w, t.fillRect(f, v, s, this.dayHeight);
           }
           const p = this.dayHeight >= 300, y = /* @__PURE__ */ new Date();
           if (!p && N.isSameDay(d, y)) {
-            const E = getComputedStyle(this).getPropertyValue("--accent-current-time").trim() || "rgba(255, 0, 0, 0.8)";
-            t.strokeStyle = E, t.lineWidth = 1, t.strokeRect(f + 1, v + 1, s - 2, this.dayHeight - 2), t.lineWidth = 1;
+            const w = getComputedStyle(this).getPropertyValue("--accent-current-time").trim() || "rgba(255, 0, 0, 0.8)";
+            t.strokeStyle = w, t.lineWidth = 1, t.strokeRect(f + 1, v + 1, s - 2, this.dayHeight - 2), t.lineWidth = 1;
           }
-          const C = 12, M = Math.min(
-            g - C - 8,
-            i - C - 64
+          const M = 12, $ = Math.min(
+            g - M - 8,
+            i - M - 64
           );
-          v < i && g > 0 && M > v && (t.fillStyle = a, t.fillText(d.getDate().toString(), f + s - 12, M));
+          v < i && g > 0 && $ > v && (t.fillStyle = a, t.fillText(d.getDate().toString(), f + s - 12, $));
         }
       }
   }
@@ -4538,25 +4553,25 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         const p = Math.min(h, g - d - 2);
         if (!(p < 0))
           for (let y = 0; y < this._columnsPerRow; y++) {
-            const C = f * this._columnsPerRow + y;
-            if (C >= 7) continue;
-            const H = o[C];
+            const M = f * this._columnsPerRow + y;
+            if (M >= 7) continue;
+            const H = o[M];
             if (!H) continue;
-            const M = z + y * e + e / 2, E = t.measureText(H).width, $ = 6, w = 2;
+            const $ = z + y * e + e / 2, w = t.measureText(H).width, D = 6, E = 2;
             t.fillStyle = c, t.beginPath(), t.roundRect(
-              M - E / 2 - $,
+              $ - w / 2 - D,
               p,
-              E + $ * 2,
+              w + D * 2,
               d,
               4
-            ), t.fill(), t.fillStyle = l, t.fillText(H, M, p + w + 1);
+            ), t.fill(), t.fillStyle = l, t.fillText(H, $, p + E + 1);
           }
       }
   }
   renderSelection() {
-    if (!this.selection) return _``;
+    if (!this.selection) return O``;
     const t = Math.min(this.selection.startX, this.selection.endX), e = Math.max(this.selection.startX, this.selection.endX), i = Math.min(this.selection.startY, this.selection.endY), s = Math.max(this.selection.startY, this.selection.endY);
-    return _`
+    return O`
       <div
         class="selection"
         style="
@@ -4582,20 +4597,20 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       for (let p = v; p <= g; p++) {
         const y = this.weeks[p];
         if (!y || y.height === 0) continue;
-        const C = y.days[0], H = y.days[6];
-        if (!C || !H) continue;
-        const M = C.getTime(), E = H.getTime() + a - 1, $ = Math.max(d, M), w = Math.min(h, E), S = Math.floor(
-          $ % a / l
+        const M = y.days[0], H = y.days[6];
+        if (!M || !H) continue;
+        const $ = M.getTime(), w = H.getTime() + a - 1, D = Math.max(d, $), E = Math.min(h, w), S = Math.floor(
+          D % a / l
         ), A = Math.floor(
-          w % a / l
-        ), O = y.yOffset / this.totalHeight * e + S / 1440 * (y.height / this.totalHeight * e), b = y.yOffset / this.totalHeight * e + A / 1440 * (y.height / this.totalHeight * e);
-        i.globalAlpha = c.readOnly ? 0.333 * 0.5 : 0.333, i.fillStyle = c.color || "#888", i.fillRect(2, O, t - 4, Math.max(b - O, 2));
+          E % a / l
+        ), _ = y.yOffset / this.totalHeight * e + S / 1440 * (y.height / this.totalHeight * e), b = y.yOffset / this.totalHeight * e + A / 1440 * (y.height / this.totalHeight * e);
+        i.globalAlpha = c.readOnly ? 0.333 * 0.5 : 0.333, i.fillStyle = c.color || "#888", i.fillRect(2, _, t - 4, Math.max(b - _, 2));
       }
     }
   }
   renderMinimap() {
-    if (this.totalHeight === 0 || this.weeks.length === 0) return _``;
-    if (!this.minimapBufferCanvas) return _``;
+    if (this.totalHeight === 0 || this.weeks.length === 0) return O``;
+    if (!this.minimapBufferCanvas) return O``;
     const t = 32, e = 2e3, i = this.viewportHeight / this.totalHeight, s = this.scrollTop / this.totalHeight * e, r = Math.max(i * e, 4), o = this.minimapCanvas, a = o.getContext("2d");
     if (o.width = t, o.height = e, !a) throw new Error("Failed to get 2d context");
     a.drawImage(this.minimapBufferCanvas, 0, 0), getComputedStyle(this).getPropertyValue("--grid-color").trim();
@@ -4737,7 +4752,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
   }
   renderNotificationsList(t) {
     return t.reminders?.length ? t.reminders.map(
-      (e) => _`
+      (e) => O`
 			<div class="notification-item">
 				<select
 					class="notification-select"
@@ -4748,7 +4763,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       }}
 				>
 					${As.map(
-        (i) => _`<option value="${i.value}" ?selected=${i.value === e.triggerOffset}>${i.label}</option>`
+        (i) => O`<option value="${i.value}" ?selected=${i.value === e.triggerOffset}>${i.label}</option>`
       )}
 				</select>
 				<button
@@ -4757,7 +4772,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 				>×</button>
 			</div>
 		`
-    ) : _`<div class="notification-empty-state">No notifications set</div>`;
+    ) : O`<div class="notification-empty-state">No notifications set</div>`;
   }
   addNotification(t) {
     const e = {
@@ -4815,64 +4830,64 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
   renderEventDetail() {
     if (!this.selectedEventForDetail || !this.selectedEventRect)
       return null;
-    const t = this.selectedEventForDetail, e = (E) => new Intl.DateTimeFormat(this.locale, {
+    const t = this.selectedEventForDetail, e = (w) => new Intl.DateTimeFormat(this.locale, {
       weekday: "short",
       year: "numeric",
       month: "short",
       day: "numeric"
-    }).format(E), i = (E) => new Intl.DateTimeFormat(this.locale, {
+    }).format(w), i = (w) => new Intl.DateTimeFormat(this.locale, {
       hour: "numeric",
       minute: "2-digit"
-    }).format(E), s = N.isSameDay(t.start, t.end), r = 320, o = 550, a = 8, l = this.scrollContainer?.clientWidth || 800, c = this.scrollContainer?.clientHeight || 600, d = this.selectedEventRect.x + this.selectedEventRect.width + a, h = this.selectedEventRect.x - r - a, u = d + r <= l ? d : h, f = z + a, v = l - r - a, g = Math.max(f, Math.min(v, u)), p = this.selectedEventRect.y - this.scrollTop, y = a, C = c - o - a, H = Math.max(y, Math.min(C, p)), M = `left: ${g}px; top: ${H}px; --calendar-color: ${t.color || "#888888"};`;
-    return _`
-      <div class="event-detail-overlay" style="${M}">
+    }).format(w), s = N.isSameDay(t.start, t.end), r = 320, o = 550, a = 8, l = this.scrollContainer?.clientWidth || 800, c = this.scrollContainer?.clientHeight || 600, d = this.selectedEventRect.x + this.selectedEventRect.width + a, h = this.selectedEventRect.x - r - a, u = d + r <= l ? d : h, f = z + a, v = l - r - a, g = Math.max(f, Math.min(v, u)), p = this.selectedEventRect.y - this.scrollTop, y = a, M = c - o - a, H = Math.max(y, Math.min(M, p)), $ = `left: ${g}px; top: ${H}px; --calendar-color: ${t.color || "#888888"};`;
+    return O`
+      <div class="event-detail-overlay" style="${$}">
         <div class="event-detail-content">
           <div class="event-detail-header">
           <div class="event-detail-header-content">
-            ${t.calendar ? _`
+            ${t.calendar ? O`
                     <div class="event-detail-section event-detail-calendar">
                         <div class="event-detail-value">${t.calendar}</div>
                     </div>
                     ` : null}
-            ${t.readOnly || t.organizer != null && !this.currentUserEmails.has(t.organizer.email) ? _`
-              <h3 class="event-detail-title">${t.rrule ? _`<span style="opacity: 0.6">⟳</span> ` : ""}${t.title}</h3>
-            ` : _`
+            ${t.readOnly || t.organizer != null && !this.currentUserEmails.has(t.organizer.email) ? O`
+              <h3 class="event-detail-title">${t.rrule ? O`<span style="opacity: 0.6">⟳</span> ` : ""}${t.title}</h3>
+            ` : O`
               <textarea
                 class="event-detail-title-input"
                 .value=${t.title}
                 placeholder="Event title"
-                @input=${(E) => {
-      const w = E.target.value;
-      w !== t.title && (this.updateEventTimeout && clearTimeout(this.updateEventTimeout), this.updateEventTimeout = setTimeout(() => {
+                @input=${(w) => {
+      const E = w.target.value;
+      E !== t.title && (this.updateEventTimeout && clearTimeout(this.updateEventTimeout), this.updateEventTimeout = setTimeout(() => {
         this.dispatchEvent(
           new CustomEvent("update-event", {
-            detail: { event: t, updates: { title: w } },
+            detail: { event: t, updates: { title: E } },
             bubbles: !0,
             composed: !0
           })
         ), this.updateEventTimeout = null;
       }, 500));
     }}
-                @keydown=${(E) => {
-      if (E.key === "Enter") {
+                @keydown=${(w) => {
+      if (w.key === "Enter") {
         this.updateEventTimeout && (clearTimeout(this.updateEventTimeout), this.updateEventTimeout = null);
-        const $ = E.target, w = $.value;
-        w !== t.title && this.dispatchEvent(
+        const D = w.target, E = D.value;
+        E !== t.title && this.dispatchEvent(
           new CustomEvent("update-event", {
-            detail: { event: t, updates: { title: w } },
+            detail: { event: t, updates: { title: E } },
             bubbles: !0,
             composed: !0
           })
-        ), $.blur();
+        ), D.blur();
       }
     }}
               />
             `}
             <div class="event-detail-time">
-              ${s ? _`
+              ${s ? O`
                   <div>${e(t.start)}</div>
                   <div>${i(t.start)} – ${i(t.end)}</div>
-                ` : _`
+                ` : O`
                   <div>${e(t.start)}, ${i(t.start)}</div>
                   <div>${e(t.end)}, ${i(t.end)}</div>
                 `}
@@ -4887,14 +4902,20 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         </div>
 
         <div class="event-detail-body">
-          ${t.location ? _`
+          ${(() => {
+      const w = t.description?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/), D = w ? w[0] : null;
+      return !t.location && !D ? null : O`
               <div class="event-detail-section">
                 <div class="event-detail-label">Location</div>
-                <div class="event-detail-value">${t.location}</div>
+                <div class="event-detail-value">
+                  ${t.location ? O`<div>${t.location}</div>` : null}
+                  ${D ? O`<a href="${D}" class="event-detail-link" target="_blank" rel="noopener">Join Microsoft Teams Meeting</a>` : null}
+                </div>
               </div>
-            ` : null}
+            `;
+    })()}
 
-          ${t.url ? _`
+          ${t.url ? O`
               <div class="event-detail-section">
                 <div class="event-detail-label">URL</div>
                 <div class="event-detail-value">
@@ -4905,7 +4926,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
               </div>
             ` : null}
 
-          ${t.organizer ? _`
+          ${t.organizer ? O`
               <div class="event-detail-section">
                 <div class="event-detail-label">Organizer</div>
                 <div class="event-detail-value">
@@ -4916,17 +4937,17 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 
           ${(() => {
       if (!t.attendees || t.attendees.length === 0) return null;
-      const E = this.findCurrentUserAttendee(t), $ = E ? t.attendees.filter((w) => w !== E) : t.attendees;
-      return $.length > 0 ? _`
+      const w = this.findCurrentUserAttendee(t), D = w ? t.attendees.filter((E) => E !== w) : t.attendees;
+      return D.length > 0 ? O`
 								<div class="event-detail-section">
-									<div class="event-detail-label">Participants (${$.length})</div>
+									<div class="event-detail-label">Participants (${D.length})</div>
 									<div class="event-detail-value">
-										${$.map(
-        (w) => _`
+										${D.map(
+        (E) => O`
 												<div style="margin-bottom: 4px">
-													<span title=${w.email}>${w.name || w.email}</span>
-													${w.status ? _`<span style="opacity: 0.7"> - ${this.formatAttendeeStatus(
-          w.status
+													<span title=${E.email}>${E.name || E.email}</span>
+													${E.status ? O`<span style="opacity: 0.7"> - ${this.formatAttendeeStatus(
+          E.status
         )}</span>` : null}
 												</div>
 											`
@@ -4936,7 +4957,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 							` : null;
     })()}
 
-          ${t.readOnly ? null : _`
+          ${t.readOnly ? null : O`
             <div class="event-detail-section">
               <div class="event-detail-label">
                   <span>Notifications</span>
@@ -4951,7 +4972,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
             </div>
           `}
 
-          ${t.readOnly || t.organizer != null && !this.currentUserEmails.has(t.organizer.email) ? t.description ? _`
+          ${t.readOnly || t.organizer != null && !this.currentUserEmails.has(t.organizer.email) ? t.description ? O`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <div class="event-detail-description ${this.isDescriptionExpanded ? "expanded" : ""}">
@@ -4962,7 +4983,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
     )}</pre>
                 </div>
                 ${t.description.length > 300 || t.description.split(`
-`).length > 8 ? _`
+`).length > 8 ? O`
                     <button
                       class="description-see-more"
                       @click=${() => {
@@ -4973,7 +4994,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
                     </button>
                   ` : null}
               </div>
-            ` : null : _`
+            ` : null : O`
               <div class="event-detail-section">
                 <div class="event-detail-label">Description</div>
                 <textarea
@@ -4981,14 +5002,14 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
                   .value=${t.description ?? ""}
                   placeholder="Add description..."
                   rows="3"
-                  @input=${(E) => {
-      const w = E.target.value;
+                  @input=${(w) => {
+      const E = w.target.value;
       this.updateEventTimeout && clearTimeout(this.updateEventTimeout), this.updateEventTimeout = setTimeout(() => {
         this.dispatchEvent(
           new CustomEvent("update-event", {
             detail: {
               event: t,
-              updates: { description: w }
+              updates: { description: E }
             },
             bubbles: !0,
             composed: !0
@@ -4996,13 +5017,13 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
         ), this.updateEventTimeout = null;
       }, 500);
     }}
-                  @blur=${(E) => {
-      const w = E.target.value;
-      this.updateEventTimeout && (clearTimeout(this.updateEventTimeout), this.updateEventTimeout = null), w !== (t.description ?? "") && this.dispatchEvent(
+                  @blur=${(w) => {
+      const E = w.target.value;
+      this.updateEventTimeout && (clearTimeout(this.updateEventTimeout), this.updateEventTimeout = null), E !== (t.description ?? "") && this.dispatchEvent(
         new CustomEvent("update-event", {
           detail: {
             event: t,
-            updates: { description: w }
+            updates: { description: E }
           },
           bubbles: !0,
           composed: !0
@@ -5016,29 +5037,29 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 
           ${(() => {
       if (!t.attendees || t.attendees.length === 0) return null;
-      const E = this.findCurrentUserAttendee(t);
-      return !E || t.readOnly || t.organizer?.email === E.email ? null : _`
+      const w = this.findCurrentUserAttendee(t);
+      return !w || t.readOnly || t.organizer?.email === w.email ? null : O`
 							<div class="event-detail-footer">
 								<div class="invite-response-buttons">
 									<button
-										class="invite-response-button ${E.status === "ACCEPTED" ? "active" : ""}"
-										@click=${() => this.updateAttendeeStatus(t, E, "ACCEPTED")}
+										class="invite-response-button ${w.status === "ACCEPTED" ? "active" : ""}"
+										@click=${() => this.updateAttendeeStatus(t, w, "ACCEPTED")}
 									>
 										Accept
 									</button>
 									<button
-										class="invite-response-button ${E.status === "TENTATIVE" ? "active" : ""}"
+										class="invite-response-button ${w.status === "TENTATIVE" ? "active" : ""}"
 										@click=${() => this.updateAttendeeStatus(
         t,
-        E,
+        w,
         "TENTATIVE"
       )}
 									>
 										Maybe
 									</button>
 									<button
-										class="invite-response-button ${E.status === "DECLINED" ? "active" : ""}"
-										@click=${() => this.updateAttendeeStatus(t, E, "DECLINED")}
+										class="invite-response-button ${w.status === "DECLINED" ? "active" : ""}"
+										@click=${() => this.updateAttendeeStatus(t, w, "DECLINED")}
 									>
 										Decline
 									</button>
@@ -5051,62 +5072,10 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
     `;
   }
   render() {
-    return _`
+    return O`
       <div class="container ${this.isDraggingFile ? "dragging-file" : ""}">
-        <div class="toolbar">
-          <div class="toolbar-left">
-            <slot name="toolbar-center"></slot>
-            
-            <button class="toolbar-button" title="Month" @click=${this.scrollToMonth}>
-              Month
-            </button>
-            <button class="toolbar-button" title="Today" @click=${this.scrollToToday}>
-              Today
-            </button>
-            <button ?disabled=${this.historyStack.length === 0 || this.historyIndex >= this.historyStack.length - 1} class="toolbar-button" title="Back" @click=${this.goBack}>
-              ←
-            </button>
-            <button ?disabled=${this.historyStack.length === 0 || this.historyIndex === 0} class="toolbar-button" title="Forward" @click=${this.goForward}>
-              →
-            </button>
-            <div class="toolbar-zoom">
-              <input
-                type="range"
-                class="toolbar-zoom-slider"
-                min="${Nt}"
-                max="${me}"
-                .value=${this.dayHeight}
-                @input=${this.onZoomSliderChange}
-                title="Adjust zoom level"
-              />
-            </div>
-          </div>
-
-          <div class="toolbar-right">
-            <!--<select
-              class="theme-selector"
-              .value=${this.currentTheme}
-              @change=${this.onThemeChange}
-              title="Select theme"
-            >
-              ${Ws.map(
-      (t) => _`<option value="${t.name}">${t.label}</option>`
-    )}
-            </select>-->
-            <div class="toolbar-search">
-              <span class="toolbar-search-icon">🔍</span>
-              <input
-                class="toolbar-search-input"
-                type="text"
-                placeholder="Filter events..."
-                .value=${this.filter}
-                @input=${this.onFilterInput}
-              />
-            </div>
-          </div>
-        </div>
-
         <div class="body">
+          <slot name="sidebar"></slot>
           <div class="calendar-area">
             <div class="canvas-layer">
               <canvas></canvas>
@@ -5126,6 +5095,57 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
             ${this.minimapCanvas}
             ${this.renderEventDetail()}
             ${this.renderNotificationPopover()}
+          
+            <div class="toolbar">
+                <div class="toolbar-left">
+                <button class="toolbar-button" title="Month" @click=${this.scrollToMonth}>
+                    Month
+                </button>
+                <button class="toolbar-button" title="Today" @click=${this.scrollToToday}>
+                    Today
+                </button>
+                <button ?disabled=${this.historyStack.length === 0 || this.historyIndex >= this.historyStack.length - 1} class="toolbar-button" title="Back" @click=${this.goBack}>
+                    ←
+                </button>
+                <button ?disabled=${this.historyStack.length === 0 || this.historyIndex === 0} class="toolbar-button" title="Forward" @click=${this.goForward}>
+                    →
+                </button>
+                <div class="toolbar-zoom">
+                    <input
+                    type="range"
+                    class="toolbar-zoom-slider"
+                    min="${Nt}"
+                    max="${me}"
+                    .value=${this.dayHeight}
+                    @input=${this.onZoomSliderChange}
+                    title="Adjust zoom level"
+                    />
+                </div>
+                </div>
+    
+                <div class="toolbar-right">
+                <!--<select
+                    class="theme-selector"
+                    .value=${this.currentTheme}
+                    @change=${this.onThemeChange}
+                    title="Select theme"
+                >
+                    ${Ws.map(
+      (t) => O`<option value="${t.name}">${t.label}</option>`
+    )}
+                </select>-->
+                <div class="toolbar-search">
+                    <span class="toolbar-search-icon">🔍</span>
+                    <input
+                    class="toolbar-search-input"
+                    type="text"
+                    placeholder="Filter events..."
+                    .value=${this.filter}
+                    @input=${this.onFilterInput}
+                    />
+                </div>
+                </div>
+            </div>
           </div>
         </div>
       </div>
@@ -5142,7 +5162,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
       hour: "numeric",
       minute: "2-digit"
     });
-    return _`
+    return O`
 			<div class="notification-popover-overlay" @click=${this.onNotificationPopoverToggle}></div>
 			<div class="notification-popover">
 				<div class="notification-popover-header">
@@ -5150,8 +5170,8 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 					<button class="notification-popover-close" @click=${this.onNotificationPopoverToggle}>×</button>
 				</div>
 				<div class="notification-popover-content">
-					${this.scheduledNotifications.length === 0 ? _`<div class="notification-popover-empty">No scheduled notifications</div>` : this.scheduledNotifications.map(
-      (i) => _`
+					${this.scheduledNotifications.length === 0 ? O`<div class="notification-popover-empty">No scheduled notifications</div>` : this.scheduledNotifications.map(
+      (i) => O`
 									<div class="notification-popover-item">
 										<div class="notification-popover-item-header">
 											<div class="notification-popover-item-title">${i.eventTitle}</div>
@@ -5163,7 +5183,7 @@ const Nt = 100, me = 3e3, z = 60, Yi = 12, ye = 20, ni = class ni extends Kt {
 											<div class="notification-popover-item-event-time">📅 ${e(
         i.eventStart
       )}</div>
-											${i.eventLocation ? _`<div class="notification-popover-item-location">📍 ${i.eventLocation}</div>` : null}
+											${i.eventLocation ? O`<div class="notification-popover-item-location">📍 ${i.eventLocation}</div>` : null}
 										</div>
 									</div>
 								`
@@ -5201,31 +5221,24 @@ ni.styles = zi`
       align-items: center;
       justify-content: space-between;
       padding: 8px 10px;
-      background: var(--bg-secondary, rgba(36, 36, 38, 0.5));
-      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      background: var(--bg-primary, rgb(30, 30, 30));
       flex-shrink: 0;
       gap: 16px;
       position: absolute;
-      bottom: .25rem;
-      left: .5rem;
-      right: 0.5rem;
+      bottom: 0;
+      left: 0;
+      right: 0;
       z-index: 100;
-      border-radius: var(--border-radius-lg, 8px);
-      overflow: hidden;
-      
-      --backdrop-padding: 30px;
-      --backdrop-size: 42px;
     }
 
     .toolbar::before {
       content: '';
-      width: 100%;
       position: absolute;
-      top: calc(var(--backdrop-padding) * -1);
       left: 0;
-      bottom: calc(var(--backdrop-padding) * -1);
-      backdrop-filter: blur(var(--backdrop-size));
-      z-index: -1;
+      right: 0;
+      bottom: 100%;
+      height: 48px;
+      background: linear-gradient(to bottom, transparent, var(--bg-primary, rgb(30, 30, 30)));
       pointer-events: none;
     }
 
@@ -5606,13 +5619,14 @@ ni.styles = zi`
       flex-direction: column;
       min-width: 0;
       max-height: 550px;
+      border-radius: var(--border-radius-lg, 8px);
+      overflow: hidden;
     }
 
     .event-detail-footer {
       border-top: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
       padding: 12px 16px;
       background: var(--bg-elevated, rgba(20, 20, 20, 0.95));
-      border-radius: 0 0 var(--border-radius-lg, 8px) 0;
     }
 
     .invite-response-buttons {