@ziix/calendar 0.1.0 → 0.1.2

package/dist/ziix-calendar.js

@@ -7,10 +7,10 @@ function b(p, t) {
   const e = C(p);
   return t ? e.tz(t) : e;
 }
-function $(p) {
+function P(p) {
   return p ? C().tz(p) : C();
 }
-function R(p) {
+function $(p) {
   const t = p.split(":"), e = Number(t[0]) || 0, i = Number(t[1]) || 0;
   return e * 60 + i;
 }
@@ -25,7 +25,7 @@ function L(p, t, e, i) {
   return new Intl.DateTimeFormat(e, { ...t, timeZone: i }).format(p.toDate());
 }
 function N(p = {}) {
-  const t = R(p.min ?? "00:00"), e = R(p.max ?? "24:00"), i = p.duration ?? 15, n = p.labelInterval ?? 60, s = Math.max(0, e - t), o = i > 0 ? Math.ceil(s / i) : 0;
+  const t = $(p.min ?? "00:00"), e = $(p.max ?? "24:00"), i = p.duration ?? 15, n = p.labelInterval ?? 60, s = Math.max(0, e - t), o = i > 0 ? Math.ceil(s / i) : 0;
   return { min: t, max: e, duration: i, labelInterval: n, slots: o, totalMinutes: s };
 }
 class _ {
@@ -81,13 +81,15 @@ class X {
     this.groupField = t, this.orderField = e, this.list = [];
   }
   normalize(t) {
-    const e = t[this.groupField], i = t[this.orderField];
+    const e = t[this.groupField], i = t[this.orderField], n = /* @__PURE__ */ new Set(["id", "title", "group", "order", "extendedProps", this.groupField, this.orderField]), s = {};
+    for (const o of Object.keys(t))
+      n.has(o) || (s[o] = t[o]);
     return {
       id: String(t.id),
       title: t.title ?? "",
       group: e != null ? String(e) : null,
       order: typeof i == "number" ? i : 0,
-      extendedProps: t.extendedProps ?? {},
+      extendedProps: { ...s, ...t.extendedProps ?? {} },
       raw: t
     };
   }
@@ -104,7 +106,7 @@ class X {
    * Resources in display order. With `resourceOrder: 'id'` they are sorted by a
    * natural id comparison (so 'E2' precedes 'E10'); with a numeric order field
    * they sort by it; otherwise the original input order is preserved (sort is
-   * stable), matching FullCalendar's default.
+   * stable).
    */
   ordered() {
     return this.orderField === "id" ? [...this.list].sort((t, e) => t.id.localeCompare(e.id, void 0, { numeric: !0 })) : this.list.every((t) => t.order === 0) ? [...this.list] : [...this.list].sort((t, e) => t.order - e.order);
@@ -122,7 +124,7 @@ class X {
     return t;
   }
 }
-function I(p) {
+function S(p) {
   const t = [...p].sort(
     (o, r) => o.start.valueOf() - r.start.valueOf() || r.end.valueOf() - o.end.valueOf()
   ), e = [];
@@ -130,19 +132,19 @@ function I(p) {
   const s = () => {
     if (i.length === 0) return;
     const o = [];
-    for (const c of i) {
-      let a = !1;
+    for (const a of i) {
+      let c = !1;
       for (const l of o)
-        if (l[l.length - 1].end.valueOf() <= c.start.valueOf()) {
-          l.push(c), a = !0;
+        if (l[l.length - 1].end.valueOf() <= a.start.valueOf()) {
+          l.push(a), c = !0;
           break;
         }
-      a || o.push([c]);
+      c || o.push([a]);
     }
     const r = o.length;
-    o.forEach((c, a) => {
-      for (const l of c)
-        e.push({ event: l, col: a, cols: r, left: a / r, width: 1 / r });
+    o.forEach((a, c) => {
+      for (const l of a)
+        e.push({ event: l, col: c, cols: r, left: c / r, width: 1 / r });
     }), i = [], n = -1 / 0;
   };
   for (const o of t)
@@ -152,19 +154,19 @@ function I(p) {
 function w(p, t) {
   const e = t.threshold ?? 4, i = p.clientX, n = p.clientY;
   let s = !1;
-  const o = (c) => {
+  const o = (a) => {
     var u, g;
-    const a = c, l = a.clientX - i, d = a.clientY - n;
-    !s && Math.hypot(l, d) < e || (s || (s = !0, (u = t.onStart) == null || u.call(t, a)), (g = t.onMove) == null || g.call(t, { dx: l, dy: d, moved: !0, event: a }));
-  }, r = (c) => {
+    const c = a, l = c.clientX - i, d = c.clientY - n;
+    !s && Math.hypot(l, d) < e || (s || (s = !0, (u = t.onStart) == null || u.call(t, c)), (g = t.onMove) == null || g.call(t, { dx: l, dy: d, moved: !0, event: c }));
+  }, r = (a) => {
     var l;
     window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", r), window.removeEventListener("pointercancel", r);
-    const a = c;
+    const c = a;
     (l = t.onEnd) == null || l.call(t, {
-      dx: a.clientX - i,
-      dy: a.clientY - n,
+      dx: c.clientX - i,
+      dy: c.clientY - n,
       moved: s,
-      event: a
+      event: c
     });
   };
   window.addEventListener("pointermove", o), window.addEventListener("pointerup", r), window.addEventListener("pointercancel", r);
@@ -229,14 +231,14 @@ class F {
   renderEvents() {
     if (!this.content) return;
     this.content.querySelectorAll(".zc-event").forEach((i) => i.remove());
-    const t = this.cal.axis, e = I(this.eventsFor());
+    const t = this.cal.axis, e = S(this.eventsFor());
     for (const i of e) {
-      const n = i.event, s = f(n.start), o = f(n.end) || t.max, r = m(s, t.min, t.max), c = m(o, t.min, t.max), a = (r - t.min) * this.pxPerMinute, l = Math.max(E - 2, (c - r) * this.pxPerMinute), d = h("div", "zc-event");
-      d.dataset.eventId = n.id, d.style.top = `${a}px`, d.style.height = `${l}px`, d.style.left = `calc(${i.left * 100}% + 2px)`, d.style.width = `calc(${i.width * 100}% - 4px)`, n.color && d.style.setProperty("--zc-event-bg", n.color), n.textColor && d.style.setProperty("--zc-event-fg", n.textColor), d.appendChild(this.cal.renderEventContent(n)), this.bindBar(d, n), this.content.appendChild(d), this.cal.fireEventMount(n, d);
+      const n = i.event, s = f(n.start), o = f(n.end) || t.max, r = m(s, t.min, t.max), a = m(o, t.min, t.max), c = (r - t.min) * this.pxPerMinute, l = Math.max(E - 2, (a - r) * this.pxPerMinute), d = h("div", "zc-event");
+      d.dataset.eventId = n.id, d.style.top = `${c}px`, d.style.height = `${l}px`, d.style.left = `calc(${i.left * 100}% + 2px)`, d.style.width = `calc(${i.width * 100}% - 4px)`, n.color && d.style.setProperty("--zc-event-bg", n.color), n.textColor && d.style.setProperty("--zc-event-fg", n.textColor), d.appendChild(this.cal.renderEventContent(n)), this.bindBar(d, n), this.content.appendChild(d), this.cal.fireEventMount(n, d);
     }
     this.renderNowIndicator();
   }
-  // ---- interaction (Fase 4) ------------------------------------------------
+  // ---- interaction ---------------------------------------------------------
   timeAt(t) {
     return this.cal.date.startOf("day").add(t, "minute");
   }
@@ -255,22 +257,22 @@ class F {
     t.appendChild(i), i.addEventListener("pointerdown", (n) => this.beginResize(n, t, e)), t.addEventListener("pointerdown", (n) => {
       if (n.button !== 0 || n.target.closest(".zc-resize-handle")) return;
       n.preventDefault();
-      const s = this.cal.axis, o = e.end.diff(e.start, "minute"), r = f(e.start), c = this.minuteAtY(n.clientY), a = (l) => m(
-        x(r + (this.minuteAtY(l) - c), s.duration),
+      const s = this.cal.axis, o = e.end.diff(e.start, "minute"), r = f(e.start), a = this.minuteAtY(n.clientY), c = (l) => m(
+        x(r + (this.minuteAtY(l) - a), s.duration),
         s.min,
         s.max - o
       );
       w(n, {
         onStart: () => t.classList.add("zc-dragging"),
         onMove: ({ event: l }) => {
-          t.style.top = `${(a(l.clientY) - s.min) * this.pxPerMinute}px`;
+          t.style.top = `${(c(l.clientY) - s.min) * this.pxPerMinute}px`;
         },
         onEnd: ({ moved: l, event: d }) => {
           if (t.classList.remove("zc-dragging"), !l) {
             this.cal.fireEventClick(e, t, d);
             return;
           }
-          const u = this.timeAt(a(d.clientY));
+          const u = this.timeAt(c(d.clientY));
           this.cal.commitEventChange(e, u, u.add(o, "minute"), e.resourceId);
         }
       });
@@ -285,8 +287,8 @@ class F {
       onMove: ({ event: r }) => {
         e.style.height = `${(o(r.clientY) - s) * this.pxPerMinute}px`;
       },
-      onEnd: ({ moved: r, event: c }) => {
-        e.classList.remove("zc-dragging"), r && this.cal.commitEventChange(i, i.start, this.timeAt(o(c.clientY)), i.resourceId);
+      onEnd: ({ moved: r, event: a }) => {
+        e.classList.remove("zc-dragging"), r && this.cal.commitEventChange(i, i.start, this.timeAt(o(a.clientY)), i.resourceId);
       }
     });
   }
@@ -297,16 +299,16 @@ class F {
       const e = this.cal.axis, i = m(x(this.minuteAtY(t.clientY), e.duration), e.min, e.max), n = h("div", "zc-select-box");
       this.content.appendChild(n);
       const s = (o) => {
-        const r = m(x(this.minuteAtY(o), e.duration), e.min, e.max), c = Math.min(i, r), a = Math.max(i, r);
-        n.style.top = `${(c - e.min) * this.pxPerMinute}px`, n.style.height = `${(a - c) * this.pxPerMinute}px`;
+        const r = m(x(this.minuteAtY(o), e.duration), e.min, e.max), a = Math.min(i, r), c = Math.max(i, r);
+        n.style.top = `${(a - e.min) * this.pxPerMinute}px`, n.style.height = `${(c - a) * this.pxPerMinute}px`;
       };
       w(t, {
         onMove: ({ event: o }) => s(o.clientY),
         onEnd: ({ moved: o, event: r }) => {
           if (n.remove(), !o) return;
-          const c = m(x(this.minuteAtY(r.clientY), e.duration), e.min, e.max);
-          let a = Math.min(i, c), l = Math.max(i, c);
-          l <= a && (l = Math.min(a + e.duration, e.max)), !(l <= a) && this.cal.commitSelect(this.timeAt(a), this.timeAt(l), null, r);
+          const a = m(x(this.minuteAtY(r.clientY), e.duration), e.min, e.max);
+          let c = Math.min(i, a), l = Math.max(i, a);
+          l <= c && (l = Math.min(c + e.duration, e.max)), !(l <= c) && this.cal.commitSelect(this.timeAt(c), this.timeAt(l), null, r);
         }
       });
     });
@@ -363,24 +365,24 @@ class V {
     n.appendChild(this.colsEl), this.rootEl.appendChild(n), this.root.appendChild(this.rootEl), this.renderEvents();
   }
   buildHead(t, e) {
-    var r, c;
+    var r, a;
     const i = h("div", "zc-rg-head"), n = h("div", "zc-rg-corner");
     i.appendChild(n);
     const s = h("div", "zc-rg-head-cols");
     if (e) {
-      const a = h("div", "zc-rg-group-row");
+      const c = h("div", "zc-rg-group-row");
       for (const l of t) {
         const d = h("div", "zc-rg-group-band");
-        d.style.flex = `${l.resources.length} 1 0`, d.textContent = l.group ?? "", a.appendChild(d);
+        d.style.flex = `${l.resources.length} 1 0`, d.textContent = l.group ?? "", c.appendChild(d);
       }
-      s.appendChild(a);
+      s.appendChild(c);
     }
     const o = h("div", "zc-rg-label-row");
-    for (const a of t.flatMap((l) => l.resources)) {
+    for (const c of t.flatMap((l) => l.resources)) {
       const l = h("div", "zc-rg-label");
-      l.dataset.resourceId = a.id;
-      const d = (c = (r = this.cal.options).renderResource) == null ? void 0 : c.call(r, a);
-      d != null ? typeof d == "string" ? l.innerHTML = d : l.appendChild(d) : l.textContent = a.title, o.appendChild(l);
+      l.dataset.resourceId = c.id;
+      const d = (a = (r = this.cal.options).renderResource) == null ? void 0 : a.call(r, c);
+      d != null ? typeof d == "string" ? l.innerHTML = d : l.appendChild(d) : l.textContent = c.title, o.appendChild(l);
     }
     return s.appendChild(o), i.appendChild(s), i;
   }
@@ -407,9 +409,9 @@ class V {
     const t = this.range(), e = this.cal.axis;
     for (const { resource: i, content: n } of this.cols) {
       n.querySelectorAll(".zc-event").forEach((o) => o.remove());
-      const s = I(this.cal.events.inRange(t.start, t.end, i.id));
+      const s = S(this.cal.events.inRange(t.start, t.end, i.id));
       for (const o of s) {
-        const r = o.event, c = f(r.start), a = f(r.end) || e.max, l = m(c, e.min, e.max), d = m(a, e.min, e.max), u = (l - e.min) * this.pxPerMinute, g = Math.max(E - 2, (d - l) * this.pxPerMinute), v = h("div", "zc-event");
+        const r = o.event, a = f(r.start), c = f(r.end) || e.max, l = m(a, e.min, e.max), d = m(c, e.min, e.max), u = (l - e.min) * this.pxPerMinute, g = Math.max(E - 2, (d - l) * this.pxPerMinute), v = h("div", "zc-event");
         v.dataset.eventId = r.id, v.style.top = `${u}px`, v.style.height = `${g}px`, v.style.left = `calc(${o.left * 100}% + 2px)`, v.style.width = `calc(${o.width * 100}% - 4px)`, r.color && v.style.setProperty("--zc-event-bg", r.color), r.textColor && v.style.setProperty("--zc-event-fg", r.textColor), v.appendChild(this.cal.renderEventContent(r)), this.bindBar(v, r), n.appendChild(v), this.cal.fireEventMount(r, v);
       }
     }
@@ -440,6 +442,18 @@ class V {
     const s = n == null ? void 0 : n.closest(".zc-rg-col[data-resource-id]");
     return s ? s.dataset.resourceId ?? null : void 0;
   }
+  highlightCol(t, e) {
+    var s;
+    this.clearHighlight();
+    const i = e.style.pointerEvents;
+    e.style.pointerEvents = "none";
+    const n = document.elementFromPoint(t.clientX, t.clientY);
+    e.style.pointerEvents = i, (s = n == null ? void 0 : n.closest(".zc-rg-col[data-resource-id]")) == null || s.classList.add("zc-drop-target");
+  }
+  clearHighlight() {
+    var t;
+    (t = this.colsEl) == null || t.querySelectorAll(".zc-drop-target").forEach((e) => e.classList.remove("zc-drop-target"));
+  }
   bindBar(t, e) {
     if (this.cal.bindContextMenu(t, e), !this.cal.editable) {
       t.addEventListener("click", (n) => this.cal.fireEventClick(e, t, n));
@@ -450,22 +464,22 @@ class V {
     t.appendChild(i), i.addEventListener("pointerdown", (n) => this.beginResize(n, t, e)), t.addEventListener("pointerdown", (n) => {
       if (n.button !== 0 || n.target.closest(".zc-resize-handle")) return;
       n.preventDefault();
-      const s = this.cal.axis, o = e.end.diff(e.start, "minute"), r = f(e.start), c = this.minuteAtY(n.clientY), a = (l) => m(
-        x(r + (this.minuteAtY(l) - c), s.duration),
+      const s = this.cal.axis, o = e.end.diff(e.start, "minute"), r = f(e.start), a = this.minuteAtY(n.clientY), c = (l) => m(
+        x(r + (this.minuteAtY(l) - a), s.duration),
         s.min,
         s.max - o
       );
       w(n, {
         onStart: () => t.classList.add("zc-dragging"),
         onMove: ({ event: l }) => {
-          t.style.top = `${(a(l.clientY) - s.min) * this.pxPerMinute}px`;
+          t.style.top = `${(c(l.clientY) - s.min) * this.pxPerMinute}px`, this.highlightCol(l, t);
         },
         onEnd: ({ moved: l, event: d }) => {
-          if (t.classList.remove("zc-dragging"), !l) {
+          if (t.classList.remove("zc-dragging"), this.clearHighlight(), !l) {
             this.cal.fireEventClick(e, t, d);
             return;
           }
-          const u = this.timeAt(a(d.clientY)), g = this.resourceIdAt(d, t) ?? e.resourceId;
+          const u = this.timeAt(c(d.clientY)), g = this.resourceIdAt(d, t) ?? e.resourceId;
           this.cal.commitEventChange(e, u, u.add(o, "minute"), g);
         }
       });
@@ -480,8 +494,8 @@ class V {
       onMove: ({ event: r }) => {
         e.style.height = `${(o(r.clientY) - s) * this.pxPerMinute}px`;
       },
-      onEnd: ({ moved: r, event: c }) => {
-        e.classList.remove("zc-dragging"), r && this.cal.commitEventChange(i, i.start, this.timeAt(o(c.clientY)), i.resourceId);
+      onEnd: ({ moved: r, event: a }) => {
+        e.classList.remove("zc-dragging"), r && this.cal.commitEventChange(i, i.start, this.timeAt(o(a.clientY)), i.resourceId);
       }
     });
   }
@@ -491,17 +505,17 @@ class V {
       i.preventDefault();
       const n = this.cal.axis, s = m(x(this.minuteAtY(i.clientY), n.duration), n.min, n.max), o = h("div", "zc-select-box zc-rg-select");
       t.appendChild(o);
-      const r = (c) => {
-        const a = m(x(this.minuteAtY(c), n.duration), n.min, n.max), l = Math.min(s, a), d = Math.max(s, a);
+      const r = (a) => {
+        const c = m(x(this.minuteAtY(a), n.duration), n.min, n.max), l = Math.min(s, c), d = Math.max(s, c);
         o.style.top = `${(l - n.min) * this.pxPerMinute}px`, o.style.height = `${(d - l) * this.pxPerMinute}px`;
       };
       w(i, {
-        onMove: ({ event: c }) => r(c.clientY),
-        onEnd: ({ moved: c, event: a }) => {
-          if (o.remove(), !c) return;
-          const l = m(x(this.minuteAtY(a.clientY), n.duration), n.min, n.max);
+        onMove: ({ event: a }) => r(a.clientY),
+        onEnd: ({ moved: a, event: c }) => {
+          if (o.remove(), !a) return;
+          const l = m(x(this.minuteAtY(c.clientY), n.duration), n.min, n.max);
           let d = Math.min(s, l), u = Math.max(s, l);
-          u <= d && (u = Math.min(d + n.duration, n.max)), !(u <= d) && this.cal.commitSelect(this.timeAt(d), this.timeAt(u), e, a);
+          u <= d && (u = Math.min(d + n.duration, n.max)), !(u <= d) && this.cal.commitSelect(this.timeAt(d), this.timeAt(u), e, c);
         }
       });
     });
@@ -511,14 +525,14 @@ class V {
     (t = this.rootEl) == null || t.remove(), this.rootEl = void 0, this.colsEl = void 0, this.nowLine = null, this.cols = [];
   }
 }
-const T = 38, H = 26, G = 48, Y = 4, U = 90, W = 14;
-class q {
+const H = 38, T = 26, q = 48, Y = 4, G = 90, W = 14;
+class U {
   constructor(t, e) {
     this.cal = t, this.root = e;
   }
   // ---- geometry ------------------------------------------------------------
   get pxPerMinute() {
-    return U / 60;
+    return G / 60;
   }
   get width() {
     return this.cal.axis.totalMinutes * this.pxPerMinute;
@@ -557,14 +571,14 @@ class q {
     const t = h("div", "zc-tl-resource-area");
     this.applyWidth(t, ((s = this.cal.options.resourceArea) == null ? void 0 : s.width) ?? "25%", !1), ((o = this.cal.options.resourceArea) == null ? void 0 : o.width) == null && (t.style.flex = "0 0 25%");
     const e = h("div", "zc-tl-resource-head");
-    e.style.height = `${T}px`;
+    e.style.height = `${H}px`;
     for (const r of this.columns()) {
-      const c = h("div", "zc-tl-col-head");
-      this.applyWidth(c, r.width), c.textContent = r.header ?? "", e.appendChild(c);
+      const a = h("div", "zc-tl-col-head");
+      this.applyWidth(a, r.width), a.textContent = r.header ?? "", e.appendChild(a);
     }
     this.resourceBody = h("div", "zc-tl-resource-body"), this.resourceRows = h("div", "zc-tl-resource-rows"), this.resourceBody.appendChild(this.resourceRows), t.append(e, this.resourceBody);
     const i = h("div", "zc-tl-time-area");
-    this.timeHead = h("div", "zc-tl-time-head"), this.timeHead.style.height = `${T}px`, this.buildAxisHeader(this.timeHead), this.timeBody = h("div", "zc-tl-time-body");
+    this.timeHead = h("div", "zc-tl-time-head"), this.timeHead.style.height = `${H}px`, this.buildAxisHeader(this.timeHead), this.timeBody = h("div", "zc-tl-time-body");
     const n = h("div", "zc-tl-time-canvas");
     n.style.width = `${this.width}px`, this.overlay = h("div", "zc-tl-overlay"), this.buildOverlayLines(this.overlay), this.rowsEl = h("div", "zc-tl-rows"), n.append(this.overlay, this.rowsEl), this.timeBody.appendChild(n), i.append(this.timeHead, this.timeBody), this.rootEl.append(t, i), this.root.appendChild(this.rootEl), this.onScroll = () => {
       this.resourceBody && this.timeBody && (this.resourceBody.scrollTop = this.timeBody.scrollTop), this.timeHead && this.timeBody && (this.timeHead.scrollLeft = this.timeBody.scrollLeft);
@@ -591,6 +605,19 @@ class q {
   renderEvents() {
     this.relayout();
   }
+  /** Re-render only the resource-area cells, leaving event bars untouched. */
+  renderResources() {
+    this.resourceRows && this.resourceRows.querySelectorAll(".zc-tl-resource-row[data-resource-id]").forEach((t) => {
+      const e = this.cal.resources.get(t.dataset.resourceId ?? "");
+      if (e) {
+        t.innerHTML = "";
+        for (const i of this.columns()) {
+          const n = h("div", "zc-tl-col-cell");
+          this.applyWidth(n, i.width), this.fillResourceCell(n, i, e), t.appendChild(n);
+        }
+      }
+    });
+  }
   /** Rebuild rows in both panes from the current resources + events. */
   relayout() {
     if (!this.resourceRows || !this.rowsEl) return;
@@ -607,33 +634,33 @@ class q {
   }
   appendGroupRow(t) {
     const e = h("div", "zc-tl-resource-row zc-tl-group-row");
-    e.style.height = `${H}px`, e.textContent = t, this.resourceRows.appendChild(e);
+    e.style.height = `${T}px`, e.textContent = t, this.resourceRows.appendChild(e);
     const i = h("div", "zc-tl-row zc-tl-group-spacer");
-    i.style.height = `${H}px`, this.rowsEl.appendChild(i);
+    i.style.height = `${T}px`, this.rowsEl.appendChild(i);
   }
   appendResourceRow(t, e) {
-    const i = I(e), n = i.reduce((d, u) => Math.max(d, u.cols), 1), s = this.cal.options.eventMinHeight ?? G, o = n * s + 2 * Y, r = s, c = h("div", "zc-tl-resource-row");
-    c.style.height = `${o}px`, c.dataset.resourceId = t.id;
+    const i = S(e), n = i.reduce((d, u) => Math.max(d, u.cols), 1), s = this.cal.options.eventMinHeight ?? q, o = n * s + 2 * Y, r = s, a = h("div", "zc-tl-resource-row");
+    a.style.height = `${o}px`, a.dataset.resourceId = t.id;
     for (const d of this.columns()) {
       const u = h("div", "zc-tl-col-cell");
-      this.applyWidth(u, d.width), this.fillResourceCell(u, d, t), c.appendChild(u);
+      this.applyWidth(u, d.width), this.fillResourceCell(u, d, t), a.appendChild(u);
     }
-    this.resourceRows.appendChild(c);
-    const a = h("div", "zc-tl-row");
-    a.style.height = `${o}px`, a.dataset.resourceId = t.id;
+    this.resourceRows.appendChild(a);
+    const c = h("div", "zc-tl-row");
+    c.style.height = `${o}px`, c.dataset.resourceId = t.id;
     const l = this.cal.axis;
     for (const d of i) {
       const u = d.event, g = f(u.start);
       let v = f(u.end);
       v <= g && (v = l.max);
-      const z = m(g, l.min, l.max), S = m(v, l.min, l.max);
-      if (S <= l.min || z >= l.max) continue;
-      const P = (z - l.min) * this.pxPerMinute, B = Math.max(W, (S - z) * this.pxPerMinute), D = Y + d.col * r, y = h("div", "zc-event zc-tl-event");
-      y.dataset.eventId = u.id, y.style.left = `${P}px`, y.style.width = `${Math.min(B, this.width - P)}px`, y.style.top = `${D}px`, y.style.height = `${r - 2}px`, u.color && y.style.setProperty("--zc-event-bg", u.color), u.textColor && y.style.setProperty("--zc-event-fg", u.textColor), y.appendChild(this.cal.renderEventContent(u)), this.bindBar(y, u), a.appendChild(y), this.cal.fireEventMount(u, y);
+      const z = m(g, l.min, l.max), I = m(v, l.min, l.max);
+      if (I <= l.min || z >= l.max) continue;
+      const R = (z - l.min) * this.pxPerMinute, B = Math.max(W, (I - z) * this.pxPerMinute), D = Y + d.col * r, y = h("div", "zc-event zc-tl-event");
+      y.dataset.eventId = u.id, y.style.left = `${R}px`, y.style.width = `${Math.min(B, this.width - R)}px`, y.style.top = `${D}px`, y.style.height = `${r - 2}px`, u.color && y.style.setProperty("--zc-event-bg", u.color), u.textColor && y.style.setProperty("--zc-event-fg", u.textColor), y.appendChild(this.cal.renderEventContent(u)), this.bindBar(y, u), c.appendChild(y), this.cal.fireEventMount(u, y);
     }
-    this.bindRowSelect(a, t), this.rowsEl.appendChild(a);
+    this.bindRowSelect(c, t), this.rowsEl.appendChild(c);
   }
-  // ---- interaction (Fase 4) ------------------------------------------------
+  // ---- interaction ---------------------------------------------------------
   timeAt(t) {
     return this.cal.date.startOf("day").add(t, "minute");
   }
@@ -666,8 +693,8 @@ class q {
     t.append(i, n), i.addEventListener("pointerdown", (s) => this.beginResize(s, t, e, "start")), n.addEventListener("pointerdown", (s) => this.beginResize(s, t, e, "end")), t.addEventListener("pointerdown", (s) => {
       if (s.button !== 0 || s.target.closest(".zc-resize-handle")) return;
       s.preventDefault();
-      const o = this.cal.axis, r = e.end.diff(e.start, "minute"), c = f(e.start), a = this.minuteAtX(s.clientX), l = (d) => m(
-        x(c + (this.minuteAtX(d) - a), o.duration),
+      const o = this.cal.axis, r = e.end.diff(e.start, "minute"), a = f(e.start), c = this.minuteAtX(s.clientX), l = (d) => m(
+        x(a + (this.minuteAtX(d) - c), o.duration),
         o.min,
         o.max - r
       );
@@ -694,23 +721,23 @@ class q {
     w(t, {
       onStart: () => e.classList.add("zc-dragging"),
       onMove: ({ event: r }) => {
-        const c = o(r.clientX);
+        const a = o(r.clientX);
         if (n === "end") {
-          const a = Math.max(c, f(i.start) + s.duration);
-          e.style.width = `${(a - f(i.start)) * this.pxPerMinute}px`;
+          const c = Math.max(a, f(i.start) + s.duration);
+          e.style.width = `${(c - f(i.start)) * this.pxPerMinute}px`;
         } else {
-          const a = Math.min(c, f(i.end) - s.duration);
-          e.style.left = `${(a - s.min) * this.pxPerMinute}px`, e.style.width = `${(f(i.end) - a) * this.pxPerMinute}px`;
+          const c = Math.min(a, f(i.end) - s.duration);
+          e.style.left = `${(c - s.min) * this.pxPerMinute}px`, e.style.width = `${(f(i.end) - c) * this.pxPerMinute}px`;
         }
       },
-      onEnd: ({ moved: r, event: c }) => {
+      onEnd: ({ moved: r, event: a }) => {
         if (e.classList.remove("zc-dragging"), !r) return;
-        const a = o(c.clientX);
+        const c = o(a.clientX);
         if (n === "end") {
-          const l = Math.max(a, f(i.start) + s.duration);
+          const l = Math.max(c, f(i.start) + s.duration);
           this.cal.commitEventChange(i, i.start, this.timeAt(l), i.resourceId);
         } else {
-          const l = Math.min(a, f(i.end) - s.duration);
+          const l = Math.min(c, f(i.end) - s.duration);
           this.cal.commitEventChange(i, this.timeAt(l), i.end, i.resourceId);
         }
       }
@@ -722,17 +749,17 @@ class q {
       i.preventDefault();
       const n = this.cal.axis, s = m(x(this.minuteAtX(i.clientX), n.duration), n.min, n.max), o = h("div", "zc-select-box zc-tl-select");
       t.appendChild(o);
-      const r = (c) => {
-        const a = m(x(this.minuteAtX(c), n.duration), n.min, n.max), l = Math.min(s, a), d = Math.max(s, a);
+      const r = (a) => {
+        const c = m(x(this.minuteAtX(a), n.duration), n.min, n.max), l = Math.min(s, c), d = Math.max(s, c);
         o.style.left = `${(l - n.min) * this.pxPerMinute}px`, o.style.width = `${(d - l) * this.pxPerMinute}px`;
       };
       w(i, {
-        onMove: ({ event: c }) => r(c.clientX),
-        onEnd: ({ moved: c, event: a }) => {
-          if (o.remove(), !c) return;
-          const l = m(x(this.minuteAtX(a.clientX), n.duration), n.min, n.max);
+        onMove: ({ event: a }) => r(a.clientX),
+        onEnd: ({ moved: a, event: c }) => {
+          if (o.remove(), !a) return;
+          const l = m(x(this.minuteAtX(c.clientX), n.duration), n.min, n.max);
           let d = Math.min(s, l), u = Math.max(s, l);
-          u <= d && (u = Math.min(d + n.duration, n.max)), !(u <= d) && this.cal.commitSelect(this.timeAt(d), this.timeAt(u), e, a);
+          u <= d && (u = Math.min(d + n.duration, n.max)), !(u <= d) && this.cal.commitSelect(this.timeAt(d), this.timeAt(u), e, c);
         }
       });
     });
@@ -773,10 +800,10 @@ const M = {
 }, j = { start: "", center: "title", end: "today prev next" };
 class Q {
   constructor(t, e = {}) {
-    this.viewImpl = null, this.bodyEl = null, this.titleEl = null, this.el = t, this.options = e, this.events = new _(e.timezone), this.resources = new X(
+    this.viewImpl = null, this.bodyEl = null, this.titleEl = null, this.resourceRenderScheduled = !1, this.el = t, this.options = e, this.events = new _(e.timezone), this.resources = new X(
       e.resourceGroupField ?? "group",
       e.resourceOrder ?? "order"
-    ), this._view = e.view ?? "day", this._date = e.date ? b(e.date, e.timezone) : $(e.timezone), Array.isArray(e.resources) && this.resources.set(e.resources), Array.isArray(e.events) && this.events.set(e.events);
+    ), this._view = e.view ?? "day", this._date = e.date ? b(e.date, e.timezone) : P(e.timezone), Array.isArray(e.resources) && this.resources.set(e.resources), Array.isArray(e.events) && this.events.set(e.events);
   }
   // ---- derived state -------------------------------------------------------
   get tz() {
@@ -813,7 +840,7 @@ class Q {
     var t;
     return ((t = this.viewImpl) == null ? void 0 : t.range().end) ?? this._date.endOf("day");
   }
-  /** The active view's type and date window (parity with FullCalendar's `view`). */
+  /** The active view's type and date window. */
   getView() {
     return { type: this._view, activeStart: this.activeStart, activeEnd: this.activeEnd };
   }
@@ -828,7 +855,7 @@ class Q {
     return this.options.selectable === !0;
   }
   now() {
-    return $(this.tz);
+    return P(this.tz);
   }
   // ---- lifecycle -----------------------------------------------------------
   render() {
@@ -848,7 +875,7 @@ class Q {
       case "resource-day":
         return new V(this, e);
       case "timeline":
-        return new q(this, e);
+        return new U(this, e);
       default:
         throw new Error(`[@ziix/calendar] unknown view: ${String(t)}`);
     }
@@ -909,17 +936,27 @@ class Q {
     const e = this.resources.get(t);
     return e ? this.resourceHandle(e) : null;
   }
+  /**
+   * Coalesce resource-area re-renders: many setExtendedProp calls in a row (e.g.
+   * pushing work hours / punch-ins for every resource) collapse into a single
+   * cell update on the next microtask, and event bars are never rebuilt — so the
+   * timeline doesn't flicker.
+   */
+  scheduleResourceRender() {
+    this.resourceRenderScheduled || (this.resourceRenderScheduled = !0, queueMicrotask(() => {
+      var t, e;
+      this.resourceRenderScheduled = !1, (t = this.viewImpl) != null && t.renderResources ? this.viewImpl.renderResources() : (e = this.viewImpl) == null || e.renderEvents();
+    }));
+  }
   resourceHandle(t) {
     return {
       id: t.id,
       resource: t,
       setExtendedProp: (e, i) => {
-        var n;
-        t.extendedProps[e] = i, (n = this.viewImpl) == null || n.renderEvents();
+        t.extendedProps[e] = i, this.scheduleResourceRender();
       },
       setProp: (e, i) => {
-        var n;
-        e === "title" ? t.title = i : t.group = i, (n = this.viewImpl) == null || n.renderEvents();
+        e === "title" ? t.title = i : t.group = i, this.scheduleResourceRender();
       }
     };
   }
@@ -988,11 +1025,11 @@ class Q {
    * preview by re-rendering) when the move is rejected.
    */
   commitEventChange(t, e, i, n) {
-    var c, a, l, d, u;
+    var a, c, l, d, u;
     if (t.start.isSame(e) && t.end.isSame(i) && t.resourceId === n)
-      return (c = this.viewImpl) == null || c.renderEvents(), !1;
-    if (!this.allowsOverlap() && this.hasCollision(t, e, i, n))
       return (a = this.viewImpl) == null || a.renderEvents(), !1;
+    if (!this.allowsOverlap() && this.hasCollision(t, e, i, n))
+      return (c = this.viewImpl) == null || c.renderEvents(), !1;
     const o = { ...t };
     t.start = e, t.end = i, t.resourceId = n, (l = this.viewImpl) == null || l.renderEvents();
     const r = () => {
@@ -1022,10 +1059,10 @@ class Q {
             n.appendChild(this.renderToolbarToken("title"));
             continue;
           }
-          const c = document.createElement("div");
-          c.className = "zc-btn-group";
-          for (const a of r) c.appendChild(this.renderToolbarToken(a));
-          n.appendChild(c);
+          const a = document.createElement("div");
+          a.className = "zc-btn-group";
+          for (const c of r) a.appendChild(this.renderToolbarToken(c));
+          n.appendChild(a);
         }
       e.appendChild(n);
     }
@@ -1075,9 +1112,9 @@ export {
   f as dayMinutes,
   L as intlFormat,
   A as minutesToTime,
-  $ as nowTz,
-  I as packEvents,
-  R as timeToMinutes,
+  P as nowTz,
+  S as packEvents,
+  $ as timeToMinutes,
   b as toTz
 };
 //# sourceMappingURL=ziix-calendar.js.map