@taskctrl/canvas-timeline 0.4.0 → 0.5.0

package/dist/canvas-timeline.es.js

@@ -1,8 +1,8 @@
-import { jsx as se, jsxs as Ae, Fragment as At } from "react/jsx-runtime";
-import ge, { useRef as x, useCallback as ie, useEffect as he, forwardRef as di, useMemo as oe, useState as Ve, useImperativeHandle as ui } from "react";
-import { flushSync as hi } from "react-dom";
-import pe from "dayjs";
-const we = {
+import { jsx as se, jsxs as xe, Fragment as $t } from "react/jsx-runtime";
+import me, { useRef as x, useMemo as Q, useCallback as ne, useEffect as he, forwardRef as pi, useState as tt, useImperativeHandle as vi } from "react";
+import { flushSync as bi } from "react-dom";
+import ve from "dayjs";
+const Ce = {
   primary: "#269bf7",
   trainColors: {},
   status: { red: "#EF5350", yellow: "#FBBF24", green: "#31c48d" },
@@ -12,7 +12,7 @@ const we = {
   sidebar: { bg: "#F9FAFB", border: "#E5E7EB", text: "#6c737f" },
   header: { bg: "#F9FAFB", border: "#E5E7EB", text: "#6c737f" }
 };
-class lt {
+class ft {
   constructor(e) {
     Object.defineProperty(this, "visibleTimeStart", {
       enumerable: !0,
@@ -59,6 +59,11 @@ class lt {
       configurable: !0,
       writable: !0,
       value: void 0
+    }), Object.defineProperty(this, "groupHeights", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
     }), Object.defineProperty(this, "visibleDuration", {
       enumerable: !0,
       configurable: !0,
@@ -69,10 +74,25 @@ class lt {
       configurable: !0,
       writable: !0,
       value: void 0
-    }), this.visibleTimeStart = e.visibleTimeStart, this.visibleTimeEnd = e.visibleTimeEnd, this.canvasWidth = e.canvasWidth, this.canvasHeight = e.canvasHeight, this.sidebarWidth = e.sidebarWidth, this.lineHeight = e.lineHeight, this.groupCount = e.groupCount, this.buffer = e.buffer, this.scrollTop = e.scrollTop, this.visibleDuration = this.visibleTimeEnd - this.visibleTimeStart, this.pixelsPerMs = this.canvasWidth / this.visibleDuration;
+    }), Object.defineProperty(this, "groupYOffsets", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.visibleTimeStart = e.visibleTimeStart, this.visibleTimeEnd = e.visibleTimeEnd, this.canvasWidth = e.canvasWidth, this.canvasHeight = e.canvasHeight, this.sidebarWidth = e.sidebarWidth, this.lineHeight = e.lineHeight, this.groupCount = e.groupCount, this.buffer = e.buffer, this.scrollTop = e.scrollTop, this.groupHeights = e.groupHeights ?? null, this.visibleDuration = this.visibleTimeEnd - this.visibleTimeStart, this.pixelsPerMs = this.canvasWidth / this.visibleDuration, this.groupYOffsets = [], this.recomputeGroupYOffsets();
   }
   update(e) {
-    e.visibleTimeStart !== void 0 && (this.visibleTimeStart = e.visibleTimeStart), e.visibleTimeEnd !== void 0 && (this.visibleTimeEnd = e.visibleTimeEnd), e.canvasWidth !== void 0 && (this.canvasWidth = e.canvasWidth), e.canvasHeight !== void 0 && (this.canvasHeight = e.canvasHeight), e.sidebarWidth !== void 0 && (this.sidebarWidth = e.sidebarWidth), e.lineHeight !== void 0 && (this.lineHeight = e.lineHeight), e.groupCount !== void 0 && (this.groupCount = e.groupCount), e.buffer !== void 0 && (this.buffer = e.buffer), e.scrollTop !== void 0 && (this.scrollTop = e.scrollTop), this.visibleDuration = this.visibleTimeEnd - this.visibleTimeStart, this.pixelsPerMs = this.canvasWidth / this.visibleDuration;
+    e.visibleTimeStart !== void 0 && (this.visibleTimeStart = e.visibleTimeStart), e.visibleTimeEnd !== void 0 && (this.visibleTimeEnd = e.visibleTimeEnd), e.canvasWidth !== void 0 && (this.canvasWidth = e.canvasWidth), e.canvasHeight !== void 0 && (this.canvasHeight = e.canvasHeight), e.sidebarWidth !== void 0 && (this.sidebarWidth = e.sidebarWidth), e.lineHeight !== void 0 && (this.lineHeight = e.lineHeight), e.groupCount !== void 0 && (this.groupCount = e.groupCount), e.buffer !== void 0 && (this.buffer = e.buffer), e.scrollTop !== void 0 && (this.scrollTop = e.scrollTop), e.groupHeights !== void 0 && (this.groupHeights = e.groupHeights ?? null), this.visibleDuration = this.visibleTimeEnd - this.visibleTimeStart, this.pixelsPerMs = this.canvasWidth / this.visibleDuration, this.recomputeGroupYOffsets();
+  }
+  recomputeGroupYOffsets() {
+    var t;
+    const e = new Array(this.groupCount + 1);
+    e[0] = 0;
+    for (let n = 0; n < this.groupCount; n++) {
+      const o = ((t = this.groupHeights) == null ? void 0 : t[n]) ?? this.lineHeight;
+      e[n + 1] = e[n] + o;
+    }
+    this.groupYOffsets = e;
   }
   timeToX(e) {
     return (e - this.visibleTimeStart) * this.pixelsPerMs;
@@ -81,11 +101,26 @@ class lt {
     return this.visibleTimeStart + e / this.pixelsPerMs;
   }
   yToGroupIndex(e) {
-    const t = Math.floor((e + this.scrollTop) / this.lineHeight);
-    return Math.max(0, Math.min(t, this.groupCount - 1));
+    if (this.groupCount === 0)
+      return 0;
+    const t = e + this.scrollTop;
+    if (t <= 0)
+      return 0;
+    if (t >= this.groupYOffsets[this.groupCount])
+      return this.groupCount - 1;
+    let n = 0, o = this.groupCount - 1;
+    for (; n < o; ) {
+      const d = n + o >>> 1;
+      this.groupYOffsets[d + 1] > t ? o = d : n = d + 1;
+    }
+    return n;
   }
   groupIndexToY(e) {
-    return e * this.lineHeight - this.scrollTop;
+    return e < 0 ? -this.scrollTop : e >= this.groupCount ? (this.groupYOffsets[this.groupCount] ?? 0) - this.scrollTop : this.groupYOffsets[e] - this.scrollTop;
+  }
+  groupIndexToHeight(e) {
+    var t;
+    return e < 0 || e >= this.groupCount ? this.lineHeight : ((t = this.groupHeights) == null ? void 0 : t[e]) ?? this.lineHeight;
   }
   getBufferBounds() {
     const e = this.visibleDuration * 1.5;
@@ -95,18 +130,20 @@ class lt {
     };
   }
   getVisibleGroupRange() {
-    const e = Math.max(0, Math.floor(this.scrollTop / this.lineHeight)), t = Math.ceil(this.canvasHeight / this.lineHeight), n = Math.min(this.groupCount - 1, e + t);
-    return { firstVisible: e, lastVisible: n };
+    if (this.groupCount === 0)
+      return { firstVisible: 0, lastVisible: -1 };
+    const e = this.yToGroupIndex(0), t = this.yToGroupIndex(this.canvasHeight);
+    return { firstVisible: e, lastVisible: t };
   }
   isScrollInBuffer(e) {
     const t = this.visibleDuration * 1.5 * this.pixelsPerMs;
     return Math.abs(e) < t;
   }
   getTotalHeight() {
-    return this.groupCount * this.lineHeight;
+    return this.groupYOffsets[this.groupCount] ?? 0;
   }
 }
-class fi {
+class yi {
   constructor() {
     Object.defineProperty(this, "root", {
       enumerable: !0,
@@ -116,42 +153,42 @@ class fi {
     });
   }
   buildFromItems(e, t, n) {
-    const r = e.map((u) => ({
-      item: u,
-      start: t(u),
-      end: n(u)
+    const o = e.map((d) => ({
+      item: d,
+      start: t(d),
+      end: n(d)
     }));
-    this.root = this.buildNode(r);
+    this.root = this.buildNode(o);
   }
   buildNode(e) {
     if (e.length === 0)
       return null;
     let t = 1 / 0, n = -1 / 0;
-    for (const c of e)
-      c.start < t && (t = c.start), c.end > n && (n = c.end);
-    const r = (t + n) / 2, u = [], a = [], d = [];
-    for (const c of e)
-      c.end < r ? u.push(c) : c.start > r ? a.push(c) : d.push(c);
+    for (const u of e)
+      u.start < t && (t = u.start), u.end > n && (n = u.end);
+    const o = (t + n) / 2, d = [], l = [], c = [];
+    for (const u of e)
+      u.end < o ? d.push(u) : u.start > o ? l.push(u) : c.push(u);
     return {
-      center: r,
-      left: this.buildNode(u),
-      right: this.buildNode(a),
-      overlapping: d
+      center: o,
+      left: this.buildNode(d),
+      right: this.buildNode(l),
+      overlapping: c
     };
   }
   query(e, t) {
     const n = [];
     return this.queryNode(this.root, e, t, n), n;
   }
-  queryNode(e, t, n, r) {
+  queryNode(e, t, n, o) {
     if (e !== null) {
-      for (const u of e.overlapping)
-        u.start <= n && u.end >= t && r.push(u.item);
-      t <= e.center && e.left !== null && this.queryNode(e.left, t, n, r), n >= e.center && e.right !== null && this.queryNode(e.right, t, n, r);
+      for (const d of e.overlapping)
+        d.start <= n && d.end >= t && o.push(d.item);
+      t <= e.center && e.left !== null && this.queryNode(e.left, t, n, o), n >= e.center && e.right !== null && this.queryNode(e.right, t, n, o);
     }
   }
 }
-class mi {
+class Ti {
   constructor(e, t) {
     Object.defineProperty(this, "lineHeight", {
       enumerable: !0,
@@ -177,65 +214,65 @@ class mi {
   }
   computeLayout(e, t, n) {
     this.layoutCache = /* @__PURE__ */ new Map(), this.groupMaxStack = /* @__PURE__ */ new Map();
-    const r = this.lineHeight * this.itemHeightRatio, u = r * 0.6;
+    const o = this.lineHeight * this.itemHeightRatio, d = o * 0.6;
     if (!t) {
-      for (const d of e) {
-        const c = (n == null ? void 0 : n.isParent(d.id)) ?? !1;
-        this.layoutCache.set(d.id, { stackLevel: 0, itemHeight: c ? u : r }), this.groupMaxStack.set(d.group, 0);
+      for (const c of e) {
+        const u = (n == null ? void 0 : n.isParent(c.id)) ?? !1;
+        this.layoutCache.set(c.id, { stackLevel: 0, itemHeight: u ? d : o }), this.groupMaxStack.set(c.group, 0);
       }
       return this.layoutCache;
     }
-    const a = /* @__PURE__ */ new Map();
-    for (const d of e) {
-      let c = a.get(d.group);
-      c || (c = [], a.set(d.group, c)), c.push(d);
+    const l = /* @__PURE__ */ new Map();
+    for (const c of e) {
+      let u = l.get(c.group);
+      u || (u = [], l.set(c.group, u)), u.push(c);
     }
-    for (const [d, c] of a)
-      n ? this.computeHierarchyLayout(c, n, r, u, d) : this.computeFlatLayout(c, r, d);
+    for (const [c, u] of l)
+      n ? this.computeHierarchyLayout(u, n, o, d, c) : this.computeFlatLayout(u, o, c);
     return this.layoutCache;
   }
   computeFlatLayout(e, t, n) {
-    e.sort((a, d) => {
-      const c = a.start_time - d.start_time;
-      return c !== 0 ? c : d.end_time - d.start_time - (a.end_time - a.start_time);
+    e.sort((l, c) => {
+      const u = l.start_time - c.start_time;
+      return u !== 0 ? u : c.end_time - c.start_time - (l.end_time - l.start_time);
     });
-    const r = [];
-    let u = 0;
-    for (const a of e) {
-      let d = -1;
-      for (let c = 0; c < r.length; c++)
-        if (r[c] <= a.start_time) {
-          d = c;
+    const o = [];
+    let d = 0;
+    for (const l of e) {
+      let c = -1;
+      for (let u = 0; u < o.length; u++)
+        if (o[u] <= l.start_time) {
+          c = u;
           break;
         }
-      d === -1 ? (d = r.length, r.push(a.end_time)) : r[d] = a.end_time, d > u && (u = d), this.layoutCache.set(a.id, { stackLevel: d, itemHeight: t });
+      c === -1 ? (c = o.length, o.push(l.end_time)) : o[c] = l.end_time, c > d && (d = c), this.layoutCache.set(l.id, { stackLevel: c, itemHeight: t });
     }
-    this.groupMaxStack.set(n, u);
+    this.groupMaxStack.set(n, d);
   }
-  computeHierarchyLayout(e, t, n, r, u) {
-    const a = [], d = [];
-    for (const g of e)
-      t.isParent(g.id) ? d.push(g) : a.push(g);
-    a.sort((g, b) => {
-      const T = g.start_time - b.start_time;
-      return T !== 0 ? T : b.end_time - b.start_time - (g.end_time - g.start_time);
+  computeHierarchyLayout(e, t, n, o, d) {
+    const l = [], c = [];
+    for (const m of e)
+      t.isParent(m.id) ? c.push(m) : l.push(m);
+    l.sort((m, b) => {
+      const T = m.start_time - b.start_time;
+      return T !== 0 ? T : b.end_time - b.start_time - (m.end_time - m.start_time);
     });
-    const c = [];
-    let v = 0;
-    for (const g of a) {
+    const u = [];
+    let p = 0;
+    for (const m of l) {
       let b = -1;
-      for (let T = 0; T < c.length; T++)
-        if (c[T] <= g.start_time) {
+      for (let T = 0; T < u.length; T++)
+        if (u[T] <= m.start_time) {
           b = T;
           break;
         }
-      b === -1 ? (b = c.length, c.push(g.end_time)) : c[b] = g.end_time, b > v && (v = b), this.layoutCache.set(g.id, { stackLevel: b, itemHeight: n });
+      b === -1 ? (b = u.length, u.push(m.end_time)) : u[b] = m.end_time, b > p && (p = b), this.layoutCache.set(m.id, { stackLevel: b, itemHeight: n });
     }
-    d.sort((g, b) => t.getNestingDepth(b.id) - t.getNestingDepth(g.id));
-    let M = a.length > 0 ? v + 1 : 0;
-    for (const g of d)
-      this.layoutCache.set(g.id, { stackLevel: M, itemHeight: r }), M > v && (v = M), M++;
-    this.groupMaxStack.set(u, v);
+    c.sort((m, b) => t.getNestingDepth(b.id) - t.getNestingDepth(m.id));
+    let M = l.length > 0 ? p + 1 : 0;
+    for (const m of c)
+      this.layoutCache.set(m.id, { stackLevel: M, itemHeight: o }), M > p && (p = M), M++;
+    this.groupMaxStack.set(d, p);
   }
   getLayout(e) {
     return this.layoutCache.get(e);
@@ -244,7 +281,7 @@ class mi {
     return ((this.groupMaxStack.get(e) ?? 0) + 1) * this.lineHeight;
   }
 }
-class gi {
+class Si {
   constructor() {
     Object.defineProperty(this, "parentToChildren", {
       enumerable: !0,
@@ -280,19 +317,19 @@ class gi {
       }
     for (const t of this.childToParent.keys()) {
       const n = /* @__PURE__ */ new Set();
-      let r = t;
-      for (; r !== void 0; ) {
-        if (n.has(r)) {
-          const u = this.childToParent.get(t);
+      let o = t;
+      for (; o !== void 0; ) {
+        if (n.has(o)) {
+          const d = this.childToParent.get(t);
           this.childToParent.delete(t);
-          const a = this.parentToChildren.get(u);
-          if (a) {
-            const d = a.indexOf(t);
-            d !== -1 && a.splice(d, 1), a.length === 0 && this.parentToChildren.delete(u);
+          const l = this.parentToChildren.get(d);
+          if (l) {
+            const c = l.indexOf(t);
+            c !== -1 && l.splice(c, 1), l.length === 0 && this.parentToChildren.delete(d);
           }
           break;
         }
-        n.add(r), r = this.childToParent.get(r);
+        n.add(o), o = this.childToParent.get(o);
       }
     }
   }
@@ -309,10 +346,10 @@ class gi {
   getDescendants(e) {
     const t = [], n = [...this.getChildren(e)];
     for (; n.length > 0; ) {
-      const r = n.pop();
-      t.push(r);
-      const u = this.parentToChildren.get(r);
-      u && n.push(...u);
+      const o = n.pop();
+      t.push(o);
+      const d = this.parentToChildren.get(o);
+      d && n.push(...d);
     }
     return t;
   }
@@ -320,31 +357,31 @@ class gi {
     const t = this.itemMap.get(e);
     if (!t)
       return { start: 0, end: 0 };
-    let n = t.start_time, r = t.end_time;
-    const u = this.getDescendants(e);
-    for (const a of u) {
-      const d = this.itemMap.get(a);
-      d && (d.start_time < n && (n = d.start_time), d.end_time > r && (r = d.end_time));
+    let n = t.start_time, o = t.end_time;
+    const d = this.getDescendants(e);
+    for (const l of d) {
+      const c = this.itemMap.get(l);
+      c && (c.start_time < n && (n = c.start_time), c.end_time > o && (o = c.end_time));
     }
-    return { start: n, end: r };
+    return { start: n, end: o };
   }
   getNestingDepth(e) {
     const t = this.depthCache.get(e);
     if (t !== void 0)
       return t;
-    let n = 0, r = this.childToParent.get(e);
-    for (; r !== void 0; )
-      n++, r = this.childToParent.get(r);
+    let n = 0, o = this.childToParent.get(e);
+    for (; o !== void 0; )
+      n++, o = this.childToParent.get(o);
     return this.depthCache.set(e, n), n;
   }
   getMoveDelta(e, t) {
     const n = this.itemMap.get(e);
     if (!n)
       return [];
-    const r = t - n.start_time;
-    return this.getDescendants(e).map((a) => {
-      const d = this.itemMap.get(a);
-      return { itemId: a, newStart: d.start_time + r };
+    const o = t - n.start_time;
+    return this.getDescendants(e).map((l) => {
+      const c = this.itemMap.get(l);
+      return { itemId: l, newStart: c.start_time + o };
     });
   }
   getResizeConstraint(e, t) {
@@ -352,78 +389,78 @@ class gi {
     if (n.length === 0)
       return t === "left" ? { min: -1 / 0, max: 1 / 0 } : { min: -1 / 0, max: 1 / 0 };
     if (t === "left") {
-      let r = 1 / 0;
-      for (const u of n) {
-        const a = this.itemMap.get(u);
-        a && a.start_time < r && (r = a.start_time);
+      let o = 1 / 0;
+      for (const d of n) {
+        const l = this.itemMap.get(d);
+        l && l.start_time < o && (o = l.start_time);
       }
-      return { min: -1 / 0, max: r };
+      return { min: -1 / 0, max: o };
     } else {
-      let r = -1 / 0;
-      for (const u of n) {
-        const a = this.itemMap.get(u);
-        a && a.end_time > r && (r = a.end_time);
+      let o = -1 / 0;
+      for (const d of n) {
+        const l = this.itemMap.get(d);
+        l && l.end_time > o && (o = l.end_time);
       }
-      return { min: r, max: 1 / 0 };
+      return { min: o, max: 1 / 0 };
     }
   }
 }
-function pi(i, e, t, n, r, u) {
-  const { x: a, y: d, width: c, height: v } = t, M = u.primary;
-  i.globalAlpha = 0.15, i.fillStyle = M, i.fillRect(a, d, c, v), i.globalAlpha = 1, i.strokeStyle = M, i.lineWidth = 1.5, i.strokeRect(a, d, c, v);
-  const g = Math.min(v * 0.5, 6), b = d + v / 2;
-  i.fillStyle = M, i.beginPath(), i.moveTo(a, b), i.lineTo(a + g, b - g), i.lineTo(a + g * 2, b), i.lineTo(a + g, b + g), i.closePath(), i.fill(), i.beginPath(), i.moveTo(a + c, b), i.lineTo(a + c - g, b - g), i.lineTo(a + c - g * 2, b), i.lineTo(a + c - g, b + g), i.closePath(), i.fill();
+function ki(i, e, t, n, o, d) {
+  const { x: l, y: c, width: u, height: p } = t, M = d.primary;
+  i.globalAlpha = 0.15, i.fillStyle = M, i.fillRect(l, c, u, p), i.globalAlpha = 1, i.strokeStyle = M, i.lineWidth = 1.5, i.strokeRect(l, c, u, p);
+  const m = Math.min(p * 0.5, 6), b = c + p / 2;
+  i.fillStyle = M, i.beginPath(), i.moveTo(l, b), i.lineTo(l + m, b - m), i.lineTo(l + m * 2, b), i.lineTo(l + m, b + m), i.closePath(), i.fill(), i.beginPath(), i.moveTo(l + u, b), i.lineTo(l + u - m, b - m), i.lineTo(l + u - m * 2, b), i.lineTo(l + u - m, b + m), i.closePath(), i.fill();
   const T = e.title;
-  if (T && c > 30) {
-    i.fillStyle = u.item.text, i.font = '500 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', i.textBaseline = "middle";
-    const C = i.measureText(T).width, I = c - g * 4 - 4;
-    if (I > 20) {
-      const W = C > I ? T.slice(0, Math.floor(T.length * I / C)) + "..." : T;
-      i.fillText(W, a + c / 2 - Math.min(C, I) / 2, b);
+  if (T && u > 30) {
+    i.fillStyle = d.item.text, i.font = '500 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', i.textBaseline = "middle";
+    const H = i.measureText(T).width, O = u - m * 4 - 4;
+    if (O > 20) {
+      const j = H > O ? T.slice(0, Math.floor(T.length * O / H)) + "..." : T;
+      i.fillText(j, l + u / 2 - Math.min(H, O) / 2, b);
     }
   }
-  n.selected && (i.strokeStyle = u.item.selectedRing, i.lineWidth = 2, i.strokeRect(a - 1, d - 1, c + 2, v + 2));
+  n.selected && (i.strokeStyle = d.item.selectedRing, i.lineWidth = 2, i.strokeRect(l - 1, c - 1, u + 2, p + 2));
 }
-function Le(i, e, t, n, r, u) {
-  const a = t.xToTime(i), d = /* @__PURE__ */ new Map();
-  for (let g = 0; g < u.length; g++)
-    d.set(u[g].id, g);
-  const c = n.query(a, a);
-  let v = null, M = -1 / 0;
-  for (const g of c) {
-    const b = d.get(g.group);
+function $e(i, e, t, n, o, d) {
+  const l = t.xToTime(i), c = /* @__PURE__ */ new Map();
+  for (let m = 0; m < d.length; m++)
+    c.set(d[m].id, m);
+  const u = n.query(l, l);
+  let p = null, M = -1 / 0;
+  for (const m of u) {
+    const b = c.get(m.group);
     if (b === void 0)
       continue;
-    const T = r.getLayout(g.id);
+    const T = o.getLayout(m.id);
     if (!T)
       continue;
-    const C = t.timeToX(g.start_time), I = t.timeToX(g.end_time) - C;
-    if (i < C || i > C + I)
+    const H = t.timeToX(m.start_time), O = t.timeToX(m.end_time) - H;
+    if (i < H || i > H + O)
       continue;
-    const z = t.groupIndexToY(b) + T.stackLevel * t.lineHeight + (t.lineHeight - T.itemHeight) / 2, S = T.itemHeight;
-    e < z || e > z + S || z > M && (M = z, v = g);
+    const re = t.groupIndexToY(b) + T.stackLevel * t.lineHeight + (t.lineHeight - T.itemHeight) / 2, w = T.itemHeight;
+    e < re || e > re + w || re > M && (M = re, p = m);
   }
-  return v;
+  return p;
 }
-function at(i, e, t) {
+function mt(i, e, t) {
   const n = e.yToGroupIndex(i);
   return t[n] ?? null;
 }
-function Dt(i, e, t, n = 6) {
-  const r = t.timeToX(e.start_time), u = t.timeToX(e.end_time);
-  return i - r <= n ? "left" : u - i <= n ? "right" : "body";
+function Bt(i, e, t, n = 6) {
+  const o = t.timeToX(e.start_time), d = t.timeToX(e.end_time);
+  return i - o <= n ? "left" : d - i <= n ? "right" : "body";
 }
-function ct(i, e, t) {
-  const n = window.devicePixelRatio || 1, r = Math.round(e * n), u = Math.round(t * n);
-  (i.width !== r || i.height !== u) && (i.width = r, i.height = u, i.style.width = `${e}px`, i.style.height = `${t}px`);
-  const a = i.getContext("2d");
-  return a.setTransform(n, 0, 0, n, 0, 0), a;
+function gt(i, e, t) {
+  const n = window.devicePixelRatio || 1, o = Math.round(e * n), d = Math.round(t * n);
+  (i.width !== o || i.height !== d) && (i.width = o, i.height = d, i.style.width = `${e}px`, i.style.height = `${t}px`);
+  const l = i.getContext("2d");
+  return l.setTransform(n, 0, 0, n, 0, 0), l;
 }
-function dt(i, e) {
+function pt(i, e) {
   const t = window.devicePixelRatio || 1;
   i.clearRect(0, 0, e.width / t, e.height / t);
 }
-class vi {
+class wi {
   constructor(e) {
     Object.defineProperty(this, "dirty", {
       enumerable: !0,
@@ -459,101 +496,101 @@ class vi {
     }));
   }
 }
-class bi {
-  draw(e, t, n, r, u, a, d) {
-    const { firstVisible: c, lastVisible: v } = t.getVisibleGroupRange();
-    for (let S = c; S <= v; S++) {
-      const _ = t.groupIndexToY(S), B = n[S];
-      if (!B)
+class Mi {
+  draw(e, t, n, o, d, l, c) {
+    const { firstVisible: u, lastVisible: p } = t.getVisibleGroupRange();
+    for (let w = u; w <= p; w++) {
+      const X = t.groupIndexToY(w), E = t.groupIndexToHeight(w), R = n[w];
+      if (!R)
         continue;
-      let Y;
-      const G = a == null ? void 0 : a(B);
-      G != null && G.backgroundColor ? Y = G.backgroundColor : Y = S % 2 === 0 ? "#FFFFFF" : r.grid.rowAlt, e.fillStyle = Y, e.fillRect(0, _, t.canvasWidth, t.lineHeight), e.strokeStyle = (G == null ? void 0 : G.borderBottomColor) ?? r.grid.line, e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, _ + t.lineHeight), e.lineTo(t.canvasWidth, _ + t.lineHeight), e.stroke();
+      let z;
+      const B = l == null ? void 0 : l(R);
+      B != null && B.backgroundColor ? z = B.backgroundColor : z = w % 2 === 0 ? "#FFFFFF" : o.grid.rowAlt, e.fillStyle = z, e.fillRect(0, X, t.canvasWidth, E), e.strokeStyle = (B == null ? void 0 : B.borderBottomColor) ?? o.grid.line, e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, X + E), e.lineTo(t.canvasWidth, X + E), e.stroke();
     }
-    if (d && d.length > 0)
-      for (const S of d) {
-        const _ = t.timeToX(S.start), B = t.timeToX(S.end);
-        if (B < 0 || _ > t.canvasWidth)
+    if (c && c.length > 0)
+      for (const w of c) {
+        const X = t.timeToX(w.start), E = t.timeToX(w.end);
+        if (E < 0 || X > t.canvasWidth)
           continue;
-        const Y = Math.max(0, _), G = Math.min(t.canvasWidth, B) - Y, ne = S.opacity ?? 0.12, P = parseInt(S.color.slice(1, 3), 16), L = parseInt(S.color.slice(3, 5), 16), Z = parseInt(S.color.slice(5, 7), 16);
-        e.fillStyle = `rgb(${Math.round(P * ne + 255 * (1 - ne))},${Math.round(L * ne + 255 * (1 - ne))},${Math.round(Z * ne + 255 * (1 - ne))})`, e.fillRect(Y, 0, G, t.canvasHeight);
+        const R = Math.max(0, X), z = Math.min(t.canvasWidth, E) - R, B = w.opacity ?? 0.12, _ = parseInt(w.color.slice(1, 3), 16), G = parseInt(w.color.slice(3, 5), 16), q = parseInt(w.color.slice(5, 7), 16);
+        e.fillStyle = `rgb(${Math.round(_ * B + 255 * (1 - B))},${Math.round(G * B + 255 * (1 - B))},${Math.round(q * B + 255 * (1 - B))})`, e.fillRect(R, 0, z, t.canvasHeight);
       }
-    const M = t.visibleTimeStart, g = t.visibleTimeEnd, C = 864e5 / (g - M) * t.canvasWidth;
-    let I = "day";
-    C < 2 ? I = "month" : C < 8 && (I = "week");
+    const M = t.visibleTimeStart, m = t.visibleTimeEnd, H = 864e5 / (m - M) * t.canvasWidth;
+    let O = "day";
+    H < 2 ? O = "month" : H < 8 && (O = "week");
     {
-      let S = pe(M).startOf("day");
-      const _ = pe(g).endOf("day");
-      let B = null, Y = 1, G = 0;
-      const ne = [], P = (L) => {
-        B !== null && (e.fillStyle = B, Y !== 1 && (e.globalAlpha = Y), e.fillRect(G, 0, L - G, t.canvasHeight), Y !== 1 && (e.globalAlpha = 1), B = null, Y = 1);
+      let w = ve(M).startOf("day");
+      const X = ve(m).endOf("day");
+      let E = null, R = 1, z = 0;
+      const B = [], _ = (G) => {
+        E !== null && (e.fillStyle = E, R !== 1 && (e.globalAlpha = R), e.fillRect(z, 0, G - z, t.canvasHeight), R !== 1 && (e.globalAlpha = 1), E = null, R = 1);
       };
-      for (; S.isBefore(_); ) {
-        const L = t.timeToX(S.valueOf()), Z = S.toDate(), K = u == null ? void 0 : u(Z);
-        let te = null, de = 1;
-        if (K != null && K.backgroundColor)
-          te = K.backgroundColor, de = K.opacity ?? 1;
+      for (; w.isBefore(X); ) {
+        const G = t.timeToX(w.valueOf()), q = w.toDate(), J = d == null ? void 0 : d(q);
+        let oe = null, ue = 1;
+        if (J != null && J.backgroundColor)
+          oe = J.backgroundColor, ue = J.opacity ?? 1;
         else {
-          const ve = S.day();
-          (ve === 0 || ve === 6) && (te = r.grid.weekend);
+          const ye = w.day();
+          (ye === 0 || ye === 6) && (oe = o.grid.weekend);
         }
-        K != null && K.borderColor && ne.push({ x: L, color: K.borderColor }), te === B && de === Y || (P(L), te !== null && (B = te, Y = de, G = L)), S = S.add(1, "day");
+        J != null && J.borderColor && B.push({ x: G, color: J.borderColor }), oe === E && ue === R || (_(G), oe !== null && (E = oe, R = ue, z = G)), w = w.add(1, "day");
       }
-      B !== null && P(t.timeToX(S.valueOf()));
-      for (const L of ne)
-        e.strokeStyle = L.color, e.lineWidth = 0.5, e.beginPath(), e.moveTo(L.x, 0), e.lineTo(L.x, t.canvasHeight), e.stroke();
+      E !== null && _(t.timeToX(w.valueOf()));
+      for (const G of B)
+        e.strokeStyle = G.color, e.lineWidth = 0.5, e.beginPath(), e.moveTo(G.x, 0), e.lineTo(G.x, t.canvasHeight), e.stroke();
     }
-    let W = pe(M).startOf(I);
-    const z = pe(g).add(1, I);
-    for (e.strokeStyle = r.grid.line, e.lineWidth = 0.5, e.beginPath(); W.isBefore(z); ) {
-      const S = t.timeToX(W.valueOf());
-      e.moveTo(S, 0), e.lineTo(S, t.canvasHeight), W = W.add(1, I);
+    let j = ve(M).startOf(O);
+    const re = ve(m).add(1, O);
+    for (e.strokeStyle = o.grid.line, e.lineWidth = 0.5, e.beginPath(); j.isBefore(re); ) {
+      const w = t.timeToX(j.valueOf());
+      e.moveTo(w, 0), e.lineTo(w, t.canvasHeight), j = j.add(1, O);
     }
-    if (e.stroke(), d && d.length > 0)
-      for (const S of d) {
-        const _ = t.timeToX(S.start), B = t.timeToX(S.end);
-        if (!(B < 0 || _ > t.canvasWidth) && (e.strokeStyle = S.color, e.globalAlpha = 0.4, e.lineWidth = 1, e.beginPath(), _ >= 0 && _ <= t.canvasWidth && (e.moveTo(_, 0), e.lineTo(_, t.canvasHeight)), B >= 0 && B <= t.canvasWidth && (e.moveTo(B, 0), e.lineTo(B, t.canvasHeight)), e.stroke(), e.globalAlpha = 1, S.label)) {
-          const Y = Math.max(0, _), G = Math.min(t.canvasWidth, B) - Y;
+    if (e.stroke(), c && c.length > 0)
+      for (const w of c) {
+        const X = t.timeToX(w.start), E = t.timeToX(w.end);
+        if (!(E < 0 || X > t.canvasWidth) && (e.strokeStyle = w.color, e.globalAlpha = 0.4, e.lineWidth = 1, e.beginPath(), X >= 0 && X <= t.canvasWidth && (e.moveTo(X, 0), e.lineTo(X, t.canvasHeight)), E >= 0 && E <= t.canvasWidth && (e.moveTo(E, 0), e.lineTo(E, t.canvasHeight)), e.stroke(), e.globalAlpha = 1, w.label)) {
+          const R = Math.max(0, X), z = Math.min(t.canvasWidth, E) - R;
           e.save(), e.font = '600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-          const ne = e.measureText(S.label).width, P = 6, L = ne + P * 2, Z = 18, K = Y + (G - L) / 2, te = 4;
-          e.fillStyle = S.color, e.globalAlpha = 0.9, e.beginPath(), e.roundRect(K, te, L, Z, 3), e.fill(), e.globalAlpha = 1, e.fillStyle = "#FFFFFF", e.textBaseline = "middle", e.fillText(S.label, K + P, te + Z / 2), e.restore();
+          const B = e.measureText(w.label).width, _ = 6, G = B + _ * 2, q = 18, J = R + (z - G) / 2, oe = 4;
+          e.fillStyle = w.color, e.globalAlpha = 0.9, e.beginPath(), e.roundRect(J, oe, G, q, 3), e.fill(), e.globalAlpha = 1, e.fillStyle = "#FFFFFF", e.textBaseline = "middle", e.fillText(w.label, J + _, oe + q / 2), e.restore();
         }
       }
   }
 }
-const Ft = '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-function Yt(i, e) {
+const Yt = '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+function xt(i, e) {
   return {
     /**
      * Draws a filled rounded rectangle.
      * Default corner radius is 3px.
      */
-    roundRect(t, n, r, u, a = 3) {
-      i.beginPath(), i.roundRect(t, n, r, u, a), i.fill();
+    roundRect(t, n, o, d, l = 3) {
+      i.beginPath(), i.roundRect(t, n, o, d, l), i.fill();
     },
     /**
      * Draws text at (x, y) using the standard item font.
      * If maxWidth is provided and the text is too wide, binary-search truncates it
      * and appends '...' so it fits within maxWidth.
      */
-    fillText(t, n, r, u) {
-      if (i.font = Ft, u !== void 0 && i.measureText(t).width > u) {
-        let a = 0, d = t.length;
-        for (; a < d; ) {
-          const c = Math.ceil((a + d) / 2), v = t.slice(0, c) + "...";
-          i.measureText(v).width <= u ? a = c : d = c - 1;
+    fillText(t, n, o, d) {
+      if (i.font = Yt, d !== void 0 && i.measureText(t).width > d) {
+        let l = 0, c = t.length;
+        for (; l < c; ) {
+          const u = Math.ceil((l + c) / 2), p = t.slice(0, u) + "...";
+          i.measureText(p).width <= d ? l = u : c = u - 1;
         }
-        i.fillText(t.slice(0, a) + "...", n, r);
+        i.fillText(t.slice(0, l) + "...", n, o);
       } else
-        i.fillText(t, n, r);
+        i.fillText(t, n, o);
     },
     /**
      * Creates a 50/50 linear gradient from color1 (0%–50%) to color2 (50%–100%)
      * spanning the given x position and width.
      */
-    gradient(t, n, r, u) {
-      const a = i.createLinearGradient(t, 0, t + n, 0);
-      return a.addColorStop(0, r), a.addColorStop(0.5, r), a.addColorStop(0.5, u), a.addColorStop(1, u), a;
+    gradient(t, n, o, d) {
+      const l = i.createLinearGradient(t, 0, t + n, 0);
+      return l.addColorStop(0, o), l.addColorStop(0.5, o), l.addColorStop(0.5, d), l.addColorStop(1, d), l;
     },
     /**
      * Draws a vertical colored bar on the left edge of the item bounds.
@@ -567,124 +604,124 @@ function Yt(i, e) {
      * Supported types: 'check', 'danger-red', 'danger-yellow'.
      * Default size is 14px.
      */
-    icon(t, n, r, u = 14) {
+    icon(t, n, o, d = 14) {
       i.save();
-      const a = u / 2;
+      const l = d / 2;
       if (t === "check") {
-        i.fillStyle = "#31c48d", i.beginPath(), i.arc(n + a, r + a, a, 0, Math.PI * 2), i.fill(), i.strokeStyle = "#ffffff", i.lineWidth = u * 0.12, i.beginPath();
-        const d = n + a, c = r + a;
-        i.moveTo(d - a * 0.45, c), i.lineTo(d - a * 0.1, c + a * 0.42), i.lineTo(d + a * 0.45, c - a * 0.35), i.stroke();
+        i.fillStyle = "#31c48d", i.beginPath(), i.arc(n + l, o + l, l, 0, Math.PI * 2), i.fill(), i.strokeStyle = "#ffffff", i.lineWidth = d * 0.12, i.beginPath();
+        const c = n + l, u = o + l;
+        i.moveTo(c - l * 0.45, u), i.lineTo(c - l * 0.1, u + l * 0.42), i.lineTo(c + l * 0.45, u - l * 0.35), i.stroke();
       } else if (t === "danger-red" || t === "danger-yellow") {
-        const d = t === "danger-red" ? "#EF5350" : "#FBBF24";
-        i.fillStyle = d, i.beginPath(), i.moveTo(n + a, r), i.lineTo(n + u, r + u), i.lineTo(n, r + u), i.closePath(), i.fill(), i.fillStyle = "#ffffff";
-        const c = u * 0.12, v = n + a - c / 2;
-        i.fillRect(v, r + u * 0.35, c, u * 0.35), i.beginPath(), i.arc(n + a, r + u * 0.82, c * 0.7, 0, Math.PI * 2), i.fill();
+        const c = t === "danger-red" ? "#EF5350" : "#FBBF24";
+        i.fillStyle = c, i.beginPath(), i.moveTo(n + l, o), i.lineTo(n + d, o + d), i.lineTo(n, o + d), i.closePath(), i.fill(), i.fillStyle = "#ffffff";
+        const u = d * 0.12, p = n + l - u / 2;
+        i.fillRect(p, o + d * 0.35, u, d * 0.35), i.beginPath(), i.arc(n + l, o + d * 0.82, u * 0.7, 0, Math.PI * 2), i.fill();
       }
       i.restore();
     },
     /**
      * Draws a pill-shaped badge with centered white text on a colored background.
      */
-    badge(t, n, r, u) {
-      i.save(), i.font = Ft;
-      const d = i.measureText(t).width, c = 8, M = 12 + 3 * 2, g = d + c * 2, b = M / 2;
-      i.fillStyle = u, i.beginPath(), i.roundRect(n, r, g, M, b), i.fill(), i.fillStyle = "#ffffff", i.textAlign = "center", i.textBaseline = "middle", i.fillText(t, n + g / 2, r + M / 2), i.restore();
+    badge(t, n, o, d) {
+      i.save(), i.font = Yt;
+      const c = i.measureText(t).width, u = 8, M = 12 + 3 * 2, m = c + u * 2, b = M / 2;
+      i.fillStyle = d, i.beginPath(), i.roundRect(n, o, m, M, b), i.fill(), i.fillStyle = "#ffffff", i.textAlign = "center", i.textBaseline = "middle", i.fillText(t, n + m / 2, o + M / 2), i.restore();
     }
   };
 }
-class yi {
-  draw(e, t, n, r, u, a, d, c, v, M, g, b, T, C) {
-    const I = (t.visibleTimeEnd - t.visibleTimeStart) * 0.1, W = t.visibleTimeStart - I, z = t.visibleTimeEnd + I, S = u.query(W, z), _ = /* @__PURE__ */ new Map();
-    for (let P = 0; P < n.length; P++)
-      _.set(n[P].id, P);
-    const B = new Set(M), Y = /* @__PURE__ */ new Map(), G = -t.lineHeight, ne = t.canvasHeight + t.lineHeight;
-    for (const P of S) {
-      const L = _.get(P.group);
-      if (L === void 0)
+class Ei {
+  draw(e, t, n, o, d, l, c, u, p, M, m, b, T, H) {
+    const O = (t.visibleTimeEnd - t.visibleTimeStart) * 0.1, j = t.visibleTimeStart - O, re = t.visibleTimeEnd + O, w = d.query(j, re), X = /* @__PURE__ */ new Map();
+    for (let _ = 0; _ < n.length; _++)
+      X.set(n[_].id, _);
+    const E = new Set(M), R = /* @__PURE__ */ new Map(), z = -t.lineHeight, B = t.canvasHeight + t.lineHeight;
+    for (const _ of w) {
+      const G = X.get(_.group);
+      if (G === void 0)
         continue;
-      const Z = a.getLayout(P.id);
-      if (!Z)
+      const q = l.getLayout(_.id);
+      if (!q)
         continue;
-      const te = t.groupIndexToY(L) + Z.stackLevel * t.lineHeight + (t.lineHeight - Z.itemHeight) / 2, de = Z.itemHeight;
-      if (te + de < G || te > ne)
+      const oe = t.groupIndexToY(G) + q.stackLevel * t.lineHeight + (t.lineHeight - q.itemHeight) / 2, ue = q.itemHeight;
+      if (oe + ue < z || oe > B)
         continue;
-      const ve = t.timeToX(P.start_time), He = t.timeToX(P.end_time) - ve, be = { x: ve, y: te, width: He, height: de };
-      Y.set(P.id, be);
-      const Ie = {
-        selected: B.has(P.id),
-        hovered: g === P.id,
+      const ye = t.timeToX(_.start_time), Oe = t.timeToX(_.end_time) - ye, Te = { x: ye, y: oe, width: Oe, height: ue };
+      R.set(_.id, Te);
+      const Xe = {
+        selected: E.has(_.id),
+        hovered: m === _.id,
         dragging: !1,
-        filtered: P.filtered !== !1
+        filtered: _.filtered !== !1
       };
       e.save();
-      const Ye = Yt(e, be);
-      let Ee;
-      T && (C != null && C.isParent(P.id)) ? Ee = T : c && (P.type === "control_area_group" || P.type === "construction_train") ? Ee = c : Ee = d, Ee(e, P, be, Ie, Ye), e.restore();
+      const Ve = xt(e, Te);
+      let He;
+      T && (H != null && H.isParent(_.id)) ? He = T : u && (_.type === "control_area_group" || _.type === "construction_train") ? He = u : He = c, He(e, _, Te, Xe, Ve), e.restore();
     }
     if (b && b.length > 0) {
-      const P = /* @__PURE__ */ new Set();
-      for (const L of b)
-        Y.has(L.fromItemId) || P.add(L.fromItemId), Y.has(L.toItemId) || P.add(L.toItemId);
-      if (P.size > 0) {
-        const L = /* @__PURE__ */ new Map();
-        for (const Z of r)
-          P.has(Z.id) && L.set(Z.id, Z);
-        for (const [Z, K] of L) {
-          const te = _.get(K.group);
-          if (te === void 0)
+      const _ = /* @__PURE__ */ new Set();
+      for (const G of b)
+        R.has(G.fromItemId) || _.add(G.fromItemId), R.has(G.toItemId) || _.add(G.toItemId);
+      if (_.size > 0) {
+        const G = /* @__PURE__ */ new Map();
+        for (const q of o)
+          _.has(q.id) && G.set(q.id, q);
+        for (const [q, J] of G) {
+          const oe = X.get(J.group);
+          if (oe === void 0)
             continue;
-          const de = a.getLayout(Z);
-          if (!de)
+          const ue = l.getLayout(q);
+          if (!ue)
             continue;
-          const He = t.groupIndexToY(te) + de.stackLevel * t.lineHeight + (t.lineHeight - de.itemHeight) / 2, be = t.timeToX(K.start_time), Ie = t.timeToX(K.end_time) - be;
-          Y.set(Z, { x: be, y: He, width: Ie, height: de.itemHeight });
+          const Oe = t.groupIndexToY(oe) + ue.stackLevel * t.lineHeight + (t.lineHeight - ue.itemHeight) / 2, Te = t.timeToX(J.start_time), Xe = t.timeToX(J.end_time) - Te;
+          R.set(q, { x: Te, y: Oe, width: Xe, height: ue.itemHeight });
         }
       }
-      this.drawDependencies(e, b, Y, g, v);
+      this.drawDependencies(e, b, R, m, p);
     }
   }
-  drawDependencies(e, t, n, r, u) {
-    for (const a of t) {
-      const d = n.get(a.fromItemId), c = n.get(a.toItemId);
-      if (!d || !c)
+  drawDependencies(e, t, n, o, d) {
+    for (const l of t) {
+      const c = n.get(l.fromItemId), u = n.get(l.toItemId);
+      if (!c || !u)
         continue;
-      const v = r === a.fromItemId || r === a.toItemId;
-      e.strokeStyle = v ? u.primary : a.color ?? "#94A3B8", e.lineWidth = v ? 2 : 1.5, e.setLineDash([]);
-      const M = d.x + d.width, g = d.y + d.height / 2, b = c.x, T = c.y + c.height / 2, C = Math.abs(b - M), I = Math.max(C * 0.4, 30);
-      e.beginPath(), e.moveTo(M, g), e.bezierCurveTo(M + I, g, b - I, T, b, T), e.stroke();
-      const W = 6;
-      e.fillStyle = e.strokeStyle, e.beginPath(), e.moveTo(b, T), e.lineTo(b - W, T - W / 2), e.lineTo(b - W, T + W / 2), e.closePath(), e.fill();
+      const p = o === l.fromItemId || o === l.toItemId;
+      e.strokeStyle = p ? d.primary : l.color ?? "#94A3B8", e.lineWidth = p ? 2 : 1.5, e.setLineDash([]);
+      const M = c.x + c.width, m = c.y + c.height / 2, b = u.x, T = u.y + u.height / 2, H = Math.abs(b - M), O = Math.max(H * 0.4, 30);
+      e.beginPath(), e.moveTo(M, m), e.bezierCurveTo(M + O, m, b - O, T, b, T), e.stroke();
+      const j = 6;
+      e.fillStyle = e.strokeStyle, e.beginPath(), e.moveTo(b, T), e.lineTo(b - j, T - j / 2), e.lineTo(b - j, T + j / 2), e.closePath(), e.fill();
     }
   }
 }
-class Ti {
-  draw(e, t, n, r) {
-    const { cursorX: u, snapX: a, markers: d, interaction: c } = r;
-    if (d)
-      for (const v of d) {
-        const M = t.timeToX(v.date);
-        if (e.fillStyle = v.color, e.fillRect(M - v.width / 2, 0, v.width, t.canvasHeight), v.label) {
+class Ci {
+  draw(e, t, n, o) {
+    const { cursorX: d, snapX: l, markers: c, interaction: u } = o;
+    if (c)
+      for (const p of c) {
+        const M = t.timeToX(p.date);
+        if (e.fillStyle = p.color, e.fillRect(M - p.width / 2, 0, p.width, t.canvasHeight), p.label) {
           e.save(), e.font = '500 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-          const g = e.measureText(v.label).width, b = 8, T = 200, C = Math.min(g + b * 2, T), I = 20, W = M - C / 2, z = 4;
-          e.fillStyle = v.color, e.beginPath(), e.roundRect(W, z, C, I, 3), e.fill(), e.fillStyle = "#FFFFFF", e.textBaseline = "middle";
-          const S = T - b * 2, _ = g > S ? v.label.slice(0, Math.floor(v.label.length * S / g)) + "…" : v.label;
-          e.fillText(_, W + b, z + I / 2), e.restore();
+          const m = e.measureText(p.label).width, b = 8, T = 200, H = Math.min(m + b * 2, T), O = 20, j = M - H / 2, re = 4;
+          e.fillStyle = p.color, e.beginPath(), e.roundRect(j, re, H, O, 3), e.fill(), e.fillStyle = "#FFFFFF", e.textBaseline = "middle";
+          const w = T - b * 2, X = m > w ? p.label.slice(0, Math.floor(p.label.length * w / m)) + "…" : p.label;
+          e.fillText(X, j + b, re + O / 2), e.restore();
         }
       }
-    if (u != null && (e.strokeStyle = n.marker.cursor, e.lineWidth = 1, e.beginPath(), e.moveTo(u, 0), e.lineTo(u, t.canvasHeight), e.stroke()), a != null && (e.strokeStyle = n.primary, e.lineWidth = 1, e.setLineDash([4, 4]), e.beginPath(), e.moveTo(a, 0), e.lineTo(a, t.canvasHeight), e.stroke(), e.setLineDash([])), c) {
-      c.groupChanged && c.targetGroupY !== void 0 && (e.fillStyle = "rgba(59, 130, 246, 0.08)", e.fillRect(0, c.targetGroupY, t.canvasWidth, t.lineHeight)), e.save(), e.globalAlpha = 0.5;
-      const v = Yt(e, c.bounds);
-      c.renderer(e, c.item, c.bounds, { selected: !1, hovered: !1, dragging: !0, filtered: !0 }, v), e.restore();
+    if (d != null && (e.strokeStyle = n.marker.cursor, e.lineWidth = 1, e.beginPath(), e.moveTo(d, 0), e.lineTo(d, t.canvasHeight), e.stroke()), l != null && (e.strokeStyle = n.primary, e.lineWidth = 1, e.setLineDash([4, 4]), e.beginPath(), e.moveTo(l, 0), e.lineTo(l, t.canvasHeight), e.stroke(), e.setLineDash([])), u) {
+      u.groupChanged && u.targetGroupY !== void 0 && (e.fillStyle = "rgba(59, 130, 246, 0.08)", e.fillRect(0, u.targetGroupY, t.canvasWidth, t.lineHeight)), e.save(), e.globalAlpha = 0.5;
+      const p = xt(e, u.bounds);
+      u.renderer(e, u.item, u.bounds, { selected: !1, hovered: !1, dragging: !0, filtered: !0 }, p), e.restore();
     }
   }
 }
-const _t = 120;
-function Si(i) {
+const Lt = 120;
+function Hi(i) {
   let e = i.deltaY || i.deltaX;
-  return i.deltaMode === 1 ? e *= 15 : i.deltaMode === 2 && (e *= 800), Math.max(-_t, Math.min(_t, e));
+  return i.deltaMode === 1 ? e *= 15 : i.deltaMode === 2 && (e *= 800), Math.max(-Lt, Math.min(Lt, e));
 }
-class ki {
-  constructor(e, t, n, r, u) {
+class Ii {
+  constructor(e, t, n, o, d) {
     Object.defineProperty(this, "onZoom", {
       enumerable: !0,
       configurable: !0,
@@ -710,21 +747,21 @@ class ki {
       configurable: !0,
       writable: !0,
       value: void 0
-    }), this.onZoom = e, this.visibleTimeStart = t, this.visibleTimeEnd = n, this.minZoom = r, this.maxZoom = u;
+    }), this.onZoom = e, this.visibleTimeStart = t, this.visibleTimeEnd = n, this.minZoom = o, this.maxZoom = d;
   }
   updateBounds(e, t) {
     this.visibleTimeStart = e, this.visibleTimeEnd = t;
   }
   handleWheelZoom(e, t) {
-    const n = Si(e), r = e.ctrlKey ? 10 : e.metaKey ? 3 : 1, u = n > 0 ? 1 + r * n / 500 : 1 / (1 + r * -n / 500), a = this.visibleTimeEnd - this.visibleTimeStart;
-    let d = Math.round(a * u);
-    d = Math.max(this.minZoom, Math.min(this.maxZoom, d));
-    const c = Math.round(this.visibleTimeStart + (a - d) * t), v = c + d;
-    this.onZoom(c, v);
+    const n = Hi(e), o = e.ctrlKey ? 10 : e.metaKey ? 3 : 1, d = n > 0 ? 1 + o * n / 500 : 1 / (1 + o * -n / 500), l = this.visibleTimeEnd - this.visibleTimeStart;
+    let c = Math.round(l * d);
+    c = Math.max(this.minZoom, Math.min(this.maxZoom, c));
+    const u = Math.round(this.visibleTimeStart + (l - c) * t), p = u + c;
+    this.onZoom(u, p);
   }
 }
-const Mi = 4;
-class wi {
+const Ri = 4;
+class Pi {
   constructor(e) {
     Object.defineProperty(this, "state", {
       enumerable: !0,
@@ -743,21 +780,21 @@ class wi {
       value: !1
     }), this.dragSnap = e;
   }
-  startInteraction(e, t, n, r) {
+  startInteraction(e, t, n, o) {
     this.state = {
       item: e,
       mode: t,
       startX: n,
-      startY: r,
+      startY: o,
       currentX: n,
-      currentY: r,
+      currentY: o,
       deltaX: 0,
       originalGroup: e.group,
       currentGroup: e.group
     }, this.activated = !1;
   }
   update(e, t) {
-    this.state && (this.state.currentX = e, this.state.currentY = t, this.state.deltaX = e - this.state.startX, !this.activated && Math.abs(this.state.deltaX) >= Mi && (this.activated = !0));
+    this.state && (this.state.currentX = e, this.state.currentY = t, this.state.deltaX = e - this.state.startX, !this.activated && Math.abs(this.state.deltaX) >= Ri && (this.activated = !0));
   }
   setCurrentGroup(e) {
     this.state && (this.state.currentGroup = e);
@@ -765,14 +802,14 @@ class wi {
   endMove(e) {
     if (!this.state)
       return null;
-    const t = this.state.deltaX / e, n = this.state.item.start_time + t, r = Math.round(n / this.dragSnap) * this.dragSnap, u = this.state.currentGroup;
-    return this.state = null, this.activated = !1, { newStartTime: r, newGroupId: u };
+    const t = this.state.deltaX / e, n = this.state.item.start_time + t, o = Math.round(n / this.dragSnap) * this.dragSnap, d = this.state.currentGroup;
+    return this.state = null, this.activated = !1, { newStartTime: o, newGroupId: d };
   }
   endResize(e) {
     if (!this.state)
       return null;
-    const t = this.state.deltaX / e, n = this.state.mode === "resize-left" ? "left" : "right", u = (n === "left" ? this.state.item.start_time : this.state.item.end_time) + t, a = Math.round(u / this.dragSnap) * this.dragSnap;
-    return this.state = null, this.activated = !1, { newTime: a, edge: n };
+    const t = this.state.deltaX / e, n = this.state.mode === "resize-left" ? "left" : "right", d = (n === "left" ? this.state.item.start_time : this.state.item.end_time) + t, l = Math.round(d / this.dragSnap) * this.dragSnap;
+    return this.state = null, this.activated = !1, { newTime: l, edge: n };
   }
   cancel() {
     this.state = null, this.activated = !1;
@@ -791,105 +828,125 @@ class wi {
     return this.state !== null;
   }
 }
-function ut(i, e, t) {
+function vt(i, e, t) {
   const n = [];
-  for (const r of i)
-    r.id !== e && (n.push(t(r.start_time)), n.push(t(r.end_time)));
+  for (const o of i)
+    o.id !== e && (n.push(t(o.start_time)), n.push(t(o.end_time)));
   return n;
 }
-function Ze(i, e, t, n, r) {
+function it(i, e, t, n, o) {
   if (e.length === 0)
     return null;
-  let u = e[0], a = Math.abs(i - u);
-  for (let d = 1; d < e.length; d++) {
-    const c = Math.abs(i - e[d]);
-    c < a && (a = c, u = e[d]);
+  let d = e[0], l = Math.abs(i - d);
+  for (let c = 1; c < e.length; c++) {
+    const u = Math.abs(i - e[c]);
+    u < l && (l = u, d = e[c]);
   }
-  return a <= t ? u : null;
+  return l <= t ? d : null;
 }
-var jt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Nt(i) {
+var Vt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Zt(i) {
   return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
-var zt = { exports: {} };
+var qt = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
-  })(jt, function() {
+  })(Vt, function() {
     var t = "day";
-    return function(n, r, u) {
-      var a = function(v) {
-        return v.add(4 - v.isoWeekday(), t);
-      }, d = r.prototype;
-      d.isoWeekYear = function() {
-        return a(this).year();
-      }, d.isoWeek = function(v) {
-        if (!this.$utils().u(v)) return this.add(7 * (v - this.isoWeek()), t);
-        var M, g, b, T, C = a(this), I = (M = this.isoWeekYear(), g = this.$u, b = (g ? u.utc : u)().year(M).startOf("year"), T = 4 - b.isoWeekday(), b.isoWeekday() > 4 && (T += 7), b.add(T, t));
-        return C.diff(I, "week") + 1;
-      }, d.isoWeekday = function(v) {
-        return this.$utils().u(v) ? this.day() || 7 : this.day(this.day() % 7 ? v : v - 7);
+    return function(n, o, d) {
+      var l = function(p) {
+        return p.add(4 - p.isoWeekday(), t);
+      }, c = o.prototype;
+      c.isoWeekYear = function() {
+        return l(this).year();
+      }, c.isoWeek = function(p) {
+        if (!this.$utils().u(p)) return this.add(7 * (p - this.isoWeek()), t);
+        var M, m, b, T, H = l(this), O = (M = this.isoWeekYear(), m = this.$u, b = (m ? d.utc : d)().year(M).startOf("year"), T = 4 - b.isoWeekday(), b.isoWeekday() > 4 && (T += 7), b.add(T, t));
+        return H.diff(O, "week") + 1;
+      }, c.isoWeekday = function(p) {
+        return this.$utils().u(p) ? this.day() || 7 : this.day(this.day() % 7 ? p : p - 7);
       };
-      var c = d.startOf;
-      d.startOf = function(v, M) {
-        var g = this.$utils(), b = !!g.u(M) || M;
-        return g.p(v) === "isoweek" ? b ? this.date(this.date() - (this.isoWeekday() - 1)).startOf("day") : this.date(this.date() - 1 - (this.isoWeekday() - 1) + 7).endOf("day") : c.bind(this)(v, M);
+      var u = c.startOf;
+      c.startOf = function(p, M) {
+        var m = this.$utils(), b = !!m.u(M) || M;
+        return m.p(p) === "isoweek" ? b ? this.date(this.date() - (this.isoWeekday() - 1)).startOf("day") : this.date(this.date() - 1 - (this.isoWeekday() - 1) + 7).endOf("day") : u.bind(this)(p, M);
       };
     };
   });
-})(zt);
-var Ei = zt.exports;
-const Ci = /* @__PURE__ */ Nt(Ei), Ot = 5;
-function Wt({ groups: i, width: e, lineHeight: t, scrollTop: n, canvasHeight: r, theme: u, groupRenderer: a, onScroll: d }) {
-  var W;
-  const c = x(null), v = x(!1), M = i.length * t, g = r, b = Math.max(0, Math.floor(n / t) - Ot), T = Math.min(i.length - 1, Math.ceil((n + r) / t) + Ot), C = ie((z) => {
-    v.current || d(z.currentTarget.scrollTop);
-  }, [d]);
+})(qt);
+var Di = qt.exports;
+const Oi = /* @__PURE__ */ Zt(Di), At = 200;
+function jt({ groups: i, width: e, lineHeight: t, groupHeights: n, scrollTop: o, canvasHeight: d, theme: l, groupRenderer: c, onScroll: u }) {
+  var X;
+  const p = x(null), M = x(!1), m = Q(() => {
+    const E = new Array(i.length + 1);
+    E[0] = 0;
+    for (let R = 0; R < i.length; R++)
+      E[R + 1] = E[R] + ((n == null ? void 0 : n[R]) ?? t);
+    return E;
+  }, [i.length, n, t]), b = m[i.length] ?? 0, T = d, H = ne((E) => {
+    if (i.length === 0 || E <= 0)
+      return 0;
+    if (E >= b)
+      return i.length - 1;
+    let R = 0, z = i.length - 1;
+    for (; R < z; ) {
+      const B = R + z >>> 1;
+      m[B + 1] > E ? z = B : R = B + 1;
+    }
+    return R;
+  }, [i.length, m, b]), O = H(o - At), j = H(o + d + At), re = ne((E) => {
+    M.current || u(E.currentTarget.scrollTop);
+  }, [u]);
   he(() => {
-    c.current && (v.current = !0, c.current.scrollTop = n, requestAnimationFrame(() => {
-      v.current = !1;
+    p.current && (M.current = !0, p.current.scrollTop = o, requestAnimationFrame(() => {
+      M.current = !1;
     }));
-  }, [n]);
-  const I = [];
-  for (let z = b; z <= T; z++) {
-    const S = i[z];
-    S && I.push(se("div", { style: {
+  }, [o]);
+  const w = [];
+  for (let E = O; E <= j; E++) {
+    const R = i[E];
+    if (!R)
+      continue;
+    const z = m[E], B = m[E + 1] - z;
+    w.push(se("div", { style: {
       position: "absolute",
-      top: z * t,
-      height: t,
+      top: z,
+      height: B,
       width: "100%",
       overflow: "hidden",
       display: "flex",
       alignItems: "stretch",
-      borderBottom: `1px solid ${((W = u.grid) == null ? void 0 : W.line) ?? "#E5E5E5"}`,
+      borderBottom: `1px solid ${((X = l.grid) == null ? void 0 : X.line) ?? "#E5E5E5"}`,
       boxSizing: "border-box"
-    }, children: a(S) }, S.id));
+    }, children: c(R) }, R.id));
   }
-  return se("div", { ref: c, onScroll: C, style: {
+  return se("div", { ref: p, onScroll: re, style: {
     width: e,
-    height: g,
-    overflowY: M > r ? "auto" : "hidden",
+    height: T,
+    overflowY: b > d ? "auto" : "hidden",
     overflowX: "hidden",
     position: "relative",
-    borderRight: `1px solid ${u.sidebar.border}`,
-    backgroundColor: u.sidebar.bg
-  }, children: se("div", { style: { height: M, position: "relative" }, children: I }) });
+    borderRight: `1px solid ${l.sidebar.border}`,
+    backgroundColor: l.sidebar.bg
+  }, children: se("div", { style: { height: b, position: "relative" }, children: w }) });
 }
-function Hi(i) {
+function Xi(i) {
   return null;
 }
-Hi.displayName = "TodayMarker";
-function Xt(i) {
+Xi.displayName = "TodayMarker";
+function Gt(i) {
   return { date: Math.floor(Date.now() / 6e4) * 6e4, color: i.color ?? "#FD7171", width: i.width ?? 6, label: i.label };
 }
-function Ii(i) {
+function _i(i) {
   return i.interval ?? 1e4;
 }
-function Ri(i) {
+function Fi(i) {
   return null;
 }
-Ri.displayName = "CustomMarker";
-function Bt(i) {
+Fi.displayName = "CustomMarker";
+function Nt(i) {
   return {
     date: i.date,
     color: i.color ?? "#3B82F6",
@@ -897,540 +954,571 @@ function Bt(i) {
     label: i.label
   };
 }
-pe.extend(Ci);
-function Pi(i) {
+ve.extend(Oi);
+function Wi(i) {
   return i ? {
-    ...we,
+    ...Ce,
     ...i,
-    status: { ...we.status, ...i.status },
-    grid: { ...we.grid, ...i.grid },
-    item: { ...we.item, ...i.item },
-    marker: { ...we.marker, ...i.marker },
-    sidebar: { ...we.sidebar, ...i.sidebar },
-    header: { ...we.header, ...i.header }
-  } : we;
+    status: { ...Ce.status, ...i.status },
+    grid: { ...Ce.grid, ...i.grid },
+    item: { ...Ce.item, ...i.item },
+    marker: { ...Ce.marker, ...i.marker },
+    sidebar: { ...Ce.sidebar, ...i.sidebar },
+    header: { ...Ce.header, ...i.header }
+  } : Ce;
 }
-const Lt = 32, $i = ge.memo(di(function(e, t) {
-  const { groups: n, items: r, defaultTimeStart: u, defaultTimeEnd: a, sidebarWidth: d, lineHeight: c, itemHeightRatio: v, stackItems: M, canMove: g, canChangeGroup: b, canResize: T, dragSnap: C, minZoom: I, maxZoom: W, theme: z, dayStyle: S, rowStyle: _, showCursorLine: B, itemRenderer: Y, groupRenderer: G, sidebarGroupRenderer: ne, dependencies: P, highlights: L, onItemClick: Z, onItemDoubleClick: K, onItemContextMenu: te, onItemMove: de, onItemResize: ve, moveResizeValidator: He, onItemHover: be, onCanvasDoubleClick: Ie, onCanvasContextMenu: Ye, onTimeChange: Ee, onZoom: ht, selected: ft = [], rightSidebarWidth: qe, rightSidebarGroupRenderer: mt, onReady: je, devBadge: xt, children: Te } = e, ye = oe(() => Pi(z), [z]), gt = ie((l, o) => {
-    for (let h = 0; h < o.length; h++)
-      if (o[h].id === l)
+const zt = 32, Ui = me.memo(pi(function(e, t) {
+  const { groups: n, items: o, defaultTimeStart: d, defaultTimeEnd: l, sidebarWidth: c, lineHeight: u, itemHeightRatio: p, stackItems: M, canMove: m, canChangeGroup: b, canResize: T, dragSnap: H, minZoom: O, maxZoom: j, theme: re, dayStyle: w, rowStyle: X, showCursorLine: E, itemRenderer: R, groupRenderer: z, sidebarGroupRenderer: B, dependencies: _, highlights: G, onItemClick: q, onItemDoubleClick: J, onItemContextMenu: oe, onItemMove: ue, onItemResize: ye, moveResizeValidator: Oe, onItemHover: Te, onCanvasDoubleClick: Xe, onCanvasContextMenu: Ve, onTimeChange: He, onZoom: bt, selected: yt = [], rightSidebarWidth: nt, rightSidebarGroupRenderer: Tt, onReady: Ze, devBadge: Kt, children: ke } = e, Se = Q(() => Wi(re), [re]), St = ne((r, s) => {
+    for (let h = 0; h < s.length; h++)
+      if (s[h].id === r)
         return h;
     return 0;
-  }, []), Gt = ft.join(","), Ue = oe(() => ft, [Gt]), pt = x(null), vt = x(null), bt = x(null), _e = x(null), yt = x(null), Vt = x(null), [Zt, qt] = Ve(800);
+  }, []), Jt = yt.join(","), rt = Q(() => yt, [Jt]), kt = x(null), wt = x(null), Mt = x(null), Ye = x(null), Et = x(null), Qt = x(null), [ei, ti] = tt(800);
   he(() => {
-    const l = yt.current;
-    if (!l)
+    const r = Et.current;
+    if (!r)
       return;
-    const o = new ResizeObserver((h) => {
+    const s = new ResizeObserver((h) => {
       const f = h[0];
-      f && qt(f.contentRect.width);
+      f && ti(f.contentRect.width);
     });
-    return o.observe(l), () => o.disconnect();
+    return s.observe(r), () => s.disconnect();
   }, []);
-  const Se = Math.max(0, Zt - d - (qe ?? 0)), ke = n.length * c, D = x(new lt({
-    visibleTimeStart: e.visibleTimeStart ?? u,
-    visibleTimeEnd: e.visibleTimeEnd ?? a,
-    canvasWidth: Se,
-    canvasHeight: ke,
-    sidebarWidth: d,
-    lineHeight: c,
+  const we = Math.max(0, ei - c - (nt ?? 0)), Ie = Q(() => {
+    const r = new Si();
+    return r.rebuild(o), r;
+  }, [o]), ot = Q(() => {
+    const r = new yi();
+    return r.buildFromItems(o, (s) => Ie.getEffectiveSpan(s.id).start, (s) => Ie.getEffectiveSpan(s.id).end), r;
+  }, [o, Ie]), Le = Q(() => {
+    const r = new Ti(u, p);
+    return r.computeLayout(o, M, Ie), r;
+  }, [o, u, p, M, Ie]), Re = Q(() => n.map((r) => Le.getGroupHeight(r.id)), [n, Le]), Me = Q(() => Re.reduce((r, s) => r + s, 0), [Re]), F = x(new ft({
+    visibleTimeStart: e.visibleTimeStart ?? d,
+    visibleTimeEnd: e.visibleTimeEnd ?? l,
+    canvasWidth: we,
+    canvasHeight: Me,
+    sidebarWidth: c,
+    lineHeight: u,
     groupCount: n.length,
     buffer: e.buffer ?? 3,
-    scrollTop: 0
-  })), Ke = x(null), Oe = x(void 0), [Tt, Ut] = Ve(e.visibleTimeStart ?? u), [St, Kt] = Ve(e.visibleTimeEnd ?? a), [kt, Ne] = Ve(0), We = x(null), Re = ie(() => {
-    const l = D.current;
-    Ut(l.visibleTimeStart), Kt(l.visibleTimeEnd), Ne(l.scrollTop), We.current = null;
-  }, []), Je = ie(() => {
-    We.current === null && (We.current = setTimeout(Re, Lt));
-  }, [Re]);
+    scrollTop: 0,
+    groupHeights: Re
+  })), st = x(null), Ae = x(void 0), be = x(null), Pe = x(!1), Ct = 4, [Ht, ii] = tt(e.visibleTimeStart ?? d), [It, ni] = tt(e.visibleTimeEnd ?? l), [Rt, qe] = tt(0), je = x(null), _e = ne(() => {
+    const r = F.current;
+    ii(r.visibleTimeStart), ni(r.visibleTimeEnd), qe(r.scrollTop), je.current = null;
+  }, []), lt = ne(() => {
+    je.current === null && (je.current = setTimeout(_e, zt));
+  }, [_e]);
   he(() => () => {
-    We.current !== null && clearTimeout(We.current);
+    je.current !== null && clearTimeout(je.current);
   }, []);
-  const Ce = oe(() => {
-    const l = new gi();
-    return l.rebuild(r), l;
-  }, [r]), Qe = oe(() => {
-    const l = new fi();
-    return l.buildFromItems(r, (o) => Ce.getEffectiveSpan(o.id).start, (o) => Ce.getEffectiveSpan(o.id).end), l;
-  }, [r, Ce]), et = oe(() => {
-    const l = new mi(c, v);
-    return l.computeLayout(r, M, Ce), l;
-  }, [r, c, v, M, Ce]), Mt = oe(() => e.summaryRenderer ? e.summaryRenderer : (l, o, h, f, s) => {
-    pi(l, o, h, f, s, ye);
-  }, [e.summaryRenderer, ye]), Pe = oe(() => new bi(), []), De = oe(() => new yi(), []), Fe = oe(() => new Ti(), []), Q = oe(() => new wi(C), [C]), ze = oe(() => {
-    const l = [];
-    return ge.Children.forEach(Te, (o) => {
+  const Pt = Q(() => e.summaryRenderer ? e.summaryRenderer : (r, s, h, f, a) => {
+    ki(r, s, h, f, a, Se);
+  }, [e.summaryRenderer, Se]), Fe = Q(() => new Mi(), []), We = Q(() => new Ei(), []), Be = Q(() => new Ci(), []), ee = Q(() => new Pi(H), [H]), Ue = Q(() => {
+    const r = [];
+    return me.Children.forEach(ke, (s) => {
       var f;
-      if (!ge.isValidElement(o))
+      if (!me.isValidElement(s))
         return;
-      const h = (f = o.type) == null ? void 0 : f.displayName;
-      h === "TodayMarker" ? l.push(Xt(o.props)) : h === "CustomMarker" && l.push(Bt(o.props));
-    }), l;
-  }, [Te]), $e = oe(() => ze.map((l) => `${l.date}|${l.color}|${l.width}|${l.label ?? ""}`).join(";"), [ze]), Xe = x(ze);
-  Xe.current = ze;
-  const tt = oe(() => {
-    let l = 0;
-    return ge.Children.forEach(Te, (o) => {
+      const h = (f = s.type) == null ? void 0 : f.displayName;
+      h === "TodayMarker" ? r.push(Gt(s.props)) : h === "CustomMarker" && r.push(Nt(s.props));
+    }), r;
+  }, [ke]), Ke = Q(() => Ue.map((r) => `${r.date}|${r.color}|${r.width}|${r.label ?? ""}`).join(";"), [Ue]), Ge = x(Ue);
+  Ge.current = Ue;
+  const at = Q(() => {
+    let r = 0;
+    return me.Children.forEach(ke, (s) => {
       var f;
-      if (!ge.isValidElement(o))
+      if (!me.isValidElement(s))
         return;
-      ((f = o.type) == null ? void 0 : f.displayName) === "TodayMarker" && (l = Ii(o.props));
-    }), l;
-  }, [Te]), F = x({
+      ((f = s.type) == null ? void 0 : f.displayName) === "TodayMarker" && (r = _i(s.props));
+    }), r;
+  }, [ke]), Y = x({
     groups: n,
-    items: r,
-    intervalTree: Qe,
-    layoutEngine: et,
-    itemRenderer: Y,
-    groupRenderer: G,
-    theme: ye,
-    selected: Ue,
-    dependencies: P,
-    highlights: L,
-    dayStyle: S,
-    rowStyle: _,
-    showCursorLine: B,
-    canvasWidth: Se,
-    canvasHeight: ke,
-    lineHeight: c,
-    itemHeightRatio: v,
-    onTimeChange: Ee,
-    onZoom: ht,
-    onItemHover: be,
-    onItemClick: Z,
-    onItemDoubleClick: K,
-    onItemContextMenu: te,
-    onItemMove: de,
-    onItemResize: ve,
-    onCanvasDoubleClick: Ie,
-    onCanvasContextMenu: Ye,
-    canMove: g,
+    items: o,
+    intervalTree: ot,
+    layoutEngine: Le,
+    itemRenderer: R,
+    groupRenderer: z,
+    theme: Se,
+    selected: rt,
+    dependencies: _,
+    highlights: G,
+    dayStyle: w,
+    rowStyle: X,
+    showCursorLine: E,
+    canvasWidth: we,
+    canvasHeight: Me,
+    lineHeight: u,
+    itemHeightRatio: p,
+    onTimeChange: He,
+    onZoom: bt,
+    onItemHover: Te,
+    onItemClick: q,
+    onItemDoubleClick: J,
+    onItemContextMenu: oe,
+    onItemMove: ue,
+    onItemResize: ye,
+    onCanvasDoubleClick: Xe,
+    onCanvasContextMenu: Ve,
+    canMove: m,
     canResize: T,
     canChangeGroup: b,
-    dragSnap: C,
-    sidebarWidth: d,
-    moveResizeValidator: He,
-    summaryRenderer: Mt,
-    hierarchyEngine: Ce
+    dragSnap: H,
+    sidebarWidth: c,
+    moveResizeValidator: Oe,
+    summaryRenderer: Pt,
+    hierarchyEngine: Ie
   });
-  F.current = {
+  Y.current = {
     groups: n,
-    items: r,
-    intervalTree: Qe,
-    layoutEngine: et,
-    itemRenderer: Y,
-    groupRenderer: G,
-    theme: ye,
-    selected: Ue,
-    dependencies: P,
-    highlights: L,
-    dayStyle: S,
-    rowStyle: _,
-    showCursorLine: B,
-    canvasWidth: Se,
-    canvasHeight: ke,
-    lineHeight: c,
-    itemHeightRatio: v,
-    onTimeChange: Ee,
-    onZoom: ht,
-    onItemHover: be,
-    onItemClick: Z,
-    onItemDoubleClick: K,
-    onItemContextMenu: te,
-    onItemMove: de,
-    onItemResize: ve,
-    onCanvasDoubleClick: Ie,
-    onCanvasContextMenu: Ye,
-    canMove: g,
+    items: o,
+    intervalTree: ot,
+    layoutEngine: Le,
+    itemRenderer: R,
+    groupRenderer: z,
+    theme: Se,
+    selected: rt,
+    dependencies: _,
+    highlights: G,
+    dayStyle: w,
+    rowStyle: X,
+    showCursorLine: E,
+    canvasWidth: we,
+    canvasHeight: Me,
+    lineHeight: u,
+    itemHeightRatio: p,
+    onTimeChange: He,
+    onZoom: bt,
+    onItemHover: Te,
+    onItemClick: q,
+    onItemDoubleClick: J,
+    onItemContextMenu: oe,
+    onItemMove: ue,
+    onItemResize: ye,
+    onCanvasDoubleClick: Xe,
+    onCanvasContextMenu: Ve,
+    canMove: m,
     canResize: T,
     canChangeGroup: b,
-    dragSnap: C,
-    sidebarWidth: d,
-    moveResizeValidator: He,
-    summaryRenderer: Mt,
-    hierarchyEngine: Ce
+    dragSnap: H,
+    sidebarWidth: c,
+    moveResizeValidator: Oe,
+    summaryRenderer: Pt,
+    hierarchyEngine: Ie
   };
-  const Jt = ie(() => {
-    const l = pt.current;
-    if (!l)
+  const ri = ne(() => {
+    const r = kt.current;
+    if (!r)
       return;
-    const o = F.current, h = ct(l, o.canvasWidth, o.canvasHeight);
-    dt(h, l), Pe.draw(h, D.current, o.groups, o.theme, o.dayStyle, o.rowStyle, o.highlights);
-  }, [Pe]), Qt = ie(() => {
-    const l = vt.current;
-    if (!l)
+    const s = Y.current, h = gt(r, s.canvasWidth, s.canvasHeight);
+    pt(h, r), Fe.draw(h, F.current, s.groups, s.theme, s.dayStyle, s.rowStyle, s.highlights);
+  }, [Fe]), oi = ne(() => {
+    const r = wt.current;
+    if (!r)
       return;
-    const o = F.current, h = ct(l, o.canvasWidth, o.canvasHeight);
-    dt(h, l), De.draw(h, D.current, o.groups, o.items, o.intervalTree, o.layoutEngine, o.itemRenderer, o.groupRenderer, o.theme, o.selected, Oe.current, o.dependencies, o.summaryRenderer, o.hierarchyEngine);
-  }, [De]), wt = ie((l, o, h) => {
-    const f = D.current, s = F.current, m = s.canvasWidth / (f.visibleTimeEnd - f.visibleTimeStart), y = o / m, k = [];
-    h === "move" ? (k.push(f.timeToX(l.start_time + y)), k.push(f.timeToX(l.end_time + y))) : h === "resize-left" ? k.push(f.timeToX(l.start_time + y)) : k.push(f.timeToX(l.end_time + y));
-    const H = (f.visibleTimeEnd - f.visibleTimeStart) * 0.1, O = s.intervalTree.query(f.visibleTimeStart - H, f.visibleTimeEnd + H), V = ut(O, l.id, (re) => f.timeToX(re));
-    for (const re of k) {
-      const $ = Ze(re, V, 8, m, s.dragSnap);
-      if ($ !== null)
-        return $;
+    const s = Y.current, h = gt(r, s.canvasWidth, s.canvasHeight);
+    pt(h, r), We.draw(h, F.current, s.groups, s.items, s.intervalTree, s.layoutEngine, s.itemRenderer, s.groupRenderer, s.theme, s.selected, Ae.current, s.dependencies, s.summaryRenderer, s.hierarchyEngine);
+  }, [We]), Dt = ne((r, s, h) => {
+    const f = F.current, a = Y.current, g = a.canvasWidth / (f.visibleTimeEnd - f.visibleTimeStart), y = s / g, k = [];
+    h === "move" ? (k.push(f.timeToX(r.start_time + y)), k.push(f.timeToX(r.end_time + y))) : h === "resize-left" ? k.push(f.timeToX(r.start_time + y)) : k.push(f.timeToX(r.end_time + y));
+    const I = (f.visibleTimeEnd - f.visibleTimeStart) * 0.1, P = a.intervalTree.query(f.visibleTimeStart - I, f.visibleTimeEnd + I), N = vt(P, r.id, (U) => f.timeToX(U));
+    for (const U of k) {
+      const Z = it(U, N, 8, g, a.dragSnap);
+      if (Z !== null)
+        return Z;
     }
-    const J = h === "resize-right" ? l.end_time + y : l.start_time + y, R = Math.round(J / s.dragSnap) * s.dragSnap;
-    return f.timeToX(R);
-  }, []), ei = ie(() => {
-    const l = bt.current;
-    if (!l)
+    const te = h === "resize-right" ? r.end_time + y : r.start_time + y, W = Math.round(te / a.dragSnap) * a.dragSnap;
+    return f.timeToX(W);
+  }, []), si = ne(() => {
+    const r = Mt.current;
+    if (!r)
       return;
-    const o = F.current, h = ct(l, o.canvasWidth, o.canvasHeight);
-    dt(h, l);
-    const f = D.current, s = Q.getState();
-    let m = null;
-    if (s) {
-      const y = f.timeToX(s.item.start_time), k = f.timeToX(s.item.end_time) - y;
-      let H, O;
-      s.mode === "resize-left" ? (H = y + s.deltaX, O = k - s.deltaX) : s.mode === "resize-right" ? (H = y, O = k + s.deltaX) : (H = y + s.deltaX, O = k);
-      const V = gt(s.currentGroup, o.groups), J = f.groupIndexToY(V), R = s.currentGroup !== s.originalGroup;
-      m = {
-        item: s.item,
-        mode: s.mode,
-        bounds: { x: H, y: J + (o.lineHeight - o.lineHeight * o.itemHeightRatio) / 2, width: O, height: o.lineHeight * o.itemHeightRatio },
-        renderer: o.itemRenderer,
-        targetGroupY: J,
-        groupChanged: R
+    const s = Y.current, h = gt(r, s.canvasWidth, s.canvasHeight);
+    pt(h, r);
+    const f = F.current, a = ee.getState();
+    let g = null;
+    if (a) {
+      const y = f.timeToX(a.item.start_time), k = f.timeToX(a.item.end_time) - y;
+      let I, P;
+      a.mode === "resize-left" ? (I = y + a.deltaX, P = k - a.deltaX) : a.mode === "resize-right" ? (I = y, P = k + a.deltaX) : (I = y + a.deltaX, P = k);
+      const N = St(a.currentGroup, s.groups), te = f.groupIndexToY(N), W = a.currentGroup !== a.originalGroup;
+      g = {
+        item: a.item,
+        mode: a.mode,
+        bounds: { x: I, y: te + (s.lineHeight - s.lineHeight * s.itemHeightRatio) / 2, width: P, height: s.lineHeight * s.itemHeightRatio },
+        renderer: s.itemRenderer,
+        targetGroupY: te,
+        groupChanged: W
       };
     }
-    Fe.draw(h, f, o.theme, {
-      cursorX: o.showCursorLine ? Ke.current : null,
-      snapX: s ? wt(s.item, s.deltaX, s.mode) : null,
-      markers: Xe.current,
-      interaction: m
+    Be.draw(h, f, s.theme, {
+      cursorX: s.showCursorLine ? st.current : null,
+      snapX: a ? Dt(a.item, a.deltaX, a.mode) : null,
+      markers: Ge.current,
+      interaction: g
     });
-  }, [Fe, Q, wt, gt]), it = x(null);
-  it.current || (it.current = new vi((l) => {
-    l.grid && Jt(), l.items && Qt(), l.overlay && ei();
+  }, [Be, ee, Dt, St]), ut = x(null);
+  ut.current || (ut.current = new wi((r) => {
+    r.grid && ri(), r.items && oi(), r.overlay && si();
   }));
-  const E = it.current;
-  he(() => () => E.dispose(), [E]), he(() => {
-    if (!tt)
+  const C = ut.current;
+  he(() => () => C.dispose(), [C]), he(() => {
+    if (!at)
       return;
-    const l = setInterval(() => {
-      const o = [];
-      ge.Children.forEach(Te, (h) => {
-        var s;
-        if (!ge.isValidElement(h))
+    const r = setInterval(() => {
+      const s = [];
+      me.Children.forEach(ke, (h) => {
+        var a;
+        if (!me.isValidElement(h))
           return;
-        const f = (s = h.type) == null ? void 0 : s.displayName;
-        f === "TodayMarker" ? o.push(Xt(h.props)) : f === "CustomMarker" && o.push(Bt(h.props));
-      }), Xe.current = o, E.markDirty("overlay");
-    }, tt);
-    return () => clearInterval(l);
-  }, [tt, Te, E]), he(() => {
-    D.current.update({ canvasWidth: Se, canvasHeight: ke, sidebarWidth: d, lineHeight: c, groupCount: n.length }), E.markAllDirty();
-  }, [Se, ke, d, c, n.length, E]), he(() => {
-    E.markDirty("grid"), E.markDirty("items");
-  }, [r, n, Ue, ye, S, _, Qe, et, E]);
-  const xe = oe(() => {
-    var l;
-    return ((l = e.highlights) == null ? void 0 : l.map((o) => `${o.start}|${o.end}|${o.color}|${o.label ?? ""}|${o.opacity ?? ""}`).join(";")) ?? "";
-  }, [e.highlights]), Et = x(xe);
+        const f = (a = h.type) == null ? void 0 : a.displayName;
+        f === "TodayMarker" ? s.push(Gt(h.props)) : f === "CustomMarker" && s.push(Nt(h.props));
+      }), Ge.current = s, C.markDirty("overlay");
+    }, at);
+    return () => clearInterval(r);
+  }, [at, ke, C]), he(() => {
+    F.current.update({
+      canvasWidth: we,
+      canvasHeight: Me,
+      sidebarWidth: c,
+      lineHeight: u,
+      groupCount: n.length,
+      groupHeights: Re
+    }), C.markAllDirty();
+  }, [we, Me, c, u, n.length, Re, C]), he(() => {
+    C.markDirty("grid"), C.markDirty("items");
+  }, [o, n, rt, Se, w, X, ot, Le, C]);
+  const Je = Q(() => {
+    var r;
+    return ((r = e.highlights) == null ? void 0 : r.map((s) => `${s.start}|${s.end}|${s.color}|${s.label ?? ""}|${s.opacity ?? ""}`).join(";")) ?? "";
+  }, [e.highlights]), Ot = x(Je);
   he(() => {
-    xe !== Et.current && (Et.current = xe, E.markDirty("grid"));
-  }, [xe, E]);
-  const Ct = x($e);
+    Je !== Ot.current && (Ot.current = Je, C.markDirty("grid"));
+  }, [Je, C]);
+  const Xt = x(Ke);
   he(() => {
-    $e !== Ct.current && (Ct.current = $e, E.markDirty("overlay"));
-  }, [$e, E]);
-  const Ht = x(e.visibleTimeStart), It = x(e.visibleTimeEnd);
-  e.visibleTimeStart !== void 0 && e.visibleTimeStart !== Ht.current && (Ht.current = e.visibleTimeStart, D.current.update({ visibleTimeStart: e.visibleTimeStart }), E.markAllDirty()), e.visibleTimeEnd !== void 0 && e.visibleTimeEnd !== It.current && (It.current = e.visibleTimeEnd, D.current.update({ visibleTimeEnd: e.visibleTimeEnd }), E.markAllDirty());
-  const Be = x(null), nt = ie((l) => {
-    Be.current === null && (Be.current = setTimeout(() => {
-      var f, s;
-      Be.current = null;
-      const o = D.current, h = F.current;
-      l === "zoom" ? (f = h.onZoom) == null || f.call(h, o.visibleTimeStart, o.visibleTimeEnd) : (s = h.onTimeChange) == null || s.call(h, o.visibleTimeStart, o.visibleTimeEnd);
-    }, Lt));
+    Ke !== Xt.current && (Xt.current = Ke, C.markDirty("overlay"));
+  }, [Ke, C]);
+  const _t = x(e.visibleTimeStart), Ft = x(e.visibleTimeEnd);
+  e.visibleTimeStart !== void 0 && e.visibleTimeStart !== _t.current && (_t.current = e.visibleTimeStart, F.current.update({ visibleTimeStart: e.visibleTimeStart }), C.markAllDirty()), e.visibleTimeEnd !== void 0 && e.visibleTimeEnd !== Ft.current && (Ft.current = e.visibleTimeEnd, F.current.update({ visibleTimeEnd: e.visibleTimeEnd }), C.markAllDirty());
+  const Ne = x(null), ct = ne((r) => {
+    Ne.current === null && (Ne.current = setTimeout(() => {
+      var f, a;
+      Ne.current = null;
+      const s = F.current, h = Y.current;
+      r === "zoom" ? (f = h.onZoom) == null || f.call(h, s.visibleTimeStart, s.visibleTimeEnd) : (a = h.onTimeChange) == null || a.call(h, s.visibleTimeStart, s.visibleTimeEnd);
+    }, zt));
   }, []);
   he(() => () => {
-    Be.current !== null && clearTimeout(Be.current);
+    Ne.current !== null && clearTimeout(Ne.current);
   }, []);
-  const Ge = x(null), rt = oe(() => new ki((l, o) => {
+  const Qe = x(null), dt = Q(() => new Ii((r, s) => {
     var h;
-    D.current.update({ visibleTimeStart: l, visibleTimeEnd: o }), (h = Ge.current) == null || h.updateBounds(l, o), E.markAllDirty(), Je(), nt("zoom");
-  }, u, a, I, W), []);
-  Ge.current = rt;
-  const Rt = ie((l) => {
-    const o = D.current, h = o.groupCount * o.lineHeight, f = Math.max(0, h - o.canvasHeight), s = Math.max(0, Math.min(f, o.scrollTop + l));
-    s !== o.scrollTop && (o.update({ scrollTop: s }), E.markDirty("grid"), E.markDirty("items"), E.markDirty("overlay"), Ne(s));
-  }, [E]), ot = ie((l) => {
-    var y, k, H;
-    const o = D.current, h = o.canvasWidth / (o.visibleTimeEnd - o.visibleTimeStart), f = l / h, s = o.visibleTimeStart + f, m = o.visibleTimeEnd + f;
-    o.update({ visibleTimeStart: s, visibleTimeEnd: m }), (y = Ge.current) == null || y.updateBounds(s, m), E.markAllDirty(), hi(() => Re()), (H = (k = F.current).onTimeChange) == null || H.call(k, s, m);
-  }, [E, Re]);
+    F.current.update({ visibleTimeStart: r, visibleTimeEnd: s }), (h = Qe.current) == null || h.updateBounds(r, s), C.markAllDirty(), lt(), ct("zoom");
+  }, d, l, O, j), []);
+  Qe.current = dt;
+  const et = ne((r) => {
+    const s = F.current, h = s.getTotalHeight(), f = Math.max(0, h - s.canvasHeight), a = Math.max(0, Math.min(f, s.scrollTop + r));
+    a !== s.scrollTop && (s.update({ scrollTop: a }), C.markDirty("grid"), C.markDirty("items"), C.markDirty("overlay"), qe(a));
+  }, [C]), ze = ne((r) => {
+    var y, k, I;
+    const s = F.current, h = s.canvasWidth / (s.visibleTimeEnd - s.visibleTimeStart), f = r / h, a = s.visibleTimeStart + f, g = s.visibleTimeEnd + f;
+    s.update({ visibleTimeStart: a, visibleTimeEnd: g }), (y = Qe.current) == null || y.updateBounds(a, g), C.markAllDirty(), bi(() => _e()), (I = (k = Y.current).onTimeChange) == null || I.call(k, a, g);
+  }, [C, _e]);
   he(() => {
-    const l = _e.current;
-    if (!l)
+    const r = Ye.current;
+    if (!r)
       return;
-    const o = (h) => {
+    const s = (h) => {
       if (h.ctrlKey || h.metaKey || h.altKey) {
         h.preventDefault();
-        const f = l.getBoundingClientRect(), s = (h.clientX - f.left) / f.width;
-        rt.handleWheelZoom(h, s);
+        const f = r.getBoundingClientRect(), a = (h.clientX - f.left) / f.width;
+        dt.handleWheelZoom(h, a);
       } else if (h.shiftKey)
-        h.preventDefault(), ot(h.deltaY);
+        h.preventDefault(), ze(h.deltaY || h.deltaX);
       else {
         const f = h.deltaX;
-        f !== 0 && Math.abs(f) > Math.abs(h.deltaY) ? (h.preventDefault(), ot(f)) : h.deltaY !== 0 && Rt(h.deltaY);
+        f !== 0 && Math.abs(f) > Math.abs(h.deltaY) ? (h.preventDefault(), ze(f)) : h.deltaY !== 0 && et(h.deltaY);
       }
     };
-    return l.addEventListener("wheel", o, { passive: !1 }), () => l.removeEventListener("wheel", o);
-  }, [rt, Rt, ot]);
-  const Me = x({ lastDistance: null, lastCenter: null });
+    return r.addEventListener("wheel", s, { passive: !1 }), () => r.removeEventListener("wheel", s);
+  }, [dt, et, ze]);
+  const Ee = x({ lastDistance: null, lastCenter: null });
   he(() => {
-    const l = _e.current;
-    if (!l)
+    const r = Ye.current;
+    if (!r)
       return;
-    const o = (y, k) => Math.abs(y.clientX - k.clientX), h = (y, k, H) => (y.clientX + k.clientX) / 2 - H.left, f = (y) => {
-      y.touches.length === 2 && (y.preventDefault(), Me.current.lastDistance = o(y.touches[0], y.touches[1]), Me.current.lastCenter = null);
-    }, s = (y) => {
+    const s = (y, k) => Math.abs(y.clientX - k.clientX), h = (y, k, I) => (y.clientX + k.clientX) / 2 - I.left, f = (y) => {
+      y.touches.length === 2 && (y.preventDefault(), Ee.current.lastDistance = s(y.touches[0], y.touches[1]), Ee.current.lastCenter = null);
+    }, a = (y) => {
       var k;
-      if (y.touches.length === 2 && Me.current.lastDistance !== null) {
+      if (y.touches.length === 2 && Ee.current.lastDistance !== null) {
         y.preventDefault();
-        const H = o(y.touches[0], y.touches[1]), O = l.getBoundingClientRect(), J = h(y.touches[0], y.touches[1], O) / O.width;
-        if (H !== 0 && Me.current.lastDistance !== 0) {
-          const R = Me.current.lastDistance / H, re = D.current, $ = re.visibleTimeEnd - re.visibleTimeStart;
-          let w = $ * R;
-          w = Math.max(I, Math.min(W, w));
-          const p = re.visibleTimeStart + $ * J, j = p - w * J, A = p + w * (1 - J);
-          re.update({ visibleTimeStart: j, visibleTimeEnd: A }), (k = Ge.current) == null || k.updateBounds(j, A), E.markAllDirty(), Je(), nt("zoom");
+        const I = s(y.touches[0], y.touches[1]), P = r.getBoundingClientRect(), te = h(y.touches[0], y.touches[1], P) / P.width;
+        if (I !== 0 && Ee.current.lastDistance !== 0) {
+          const W = Ee.current.lastDistance / I, U = F.current, Z = U.visibleTimeEnd - U.visibleTimeStart;
+          let ce = Z * W;
+          ce = Math.max(O, Math.min(j, ce));
+          const $ = U.visibleTimeStart + Z * te, S = $ - ce * te, v = $ + ce * (1 - te);
+          U.update({ visibleTimeStart: S, visibleTimeEnd: v }), (k = Qe.current) == null || k.updateBounds(S, v), C.markAllDirty(), lt(), ct("zoom");
         }
-        Me.current.lastDistance = H;
+        Ee.current.lastDistance = I;
       }
-    }, m = () => {
-      Me.current.lastDistance = null, Me.current.lastCenter = null;
+    }, g = () => {
+      Ee.current.lastDistance = null, Ee.current.lastCenter = null;
     };
-    return l.addEventListener("touchstart", f, { passive: !1 }), l.addEventListener("touchmove", s, { passive: !1 }), l.addEventListener("touchend", m), () => {
-      l.removeEventListener("touchstart", f), l.removeEventListener("touchmove", s), l.removeEventListener("touchend", m);
+    return r.addEventListener("touchstart", f, { passive: !1 }), r.addEventListener("touchmove", a, { passive: !1 }), r.addEventListener("touchend", g), () => {
+      r.removeEventListener("touchstart", f), r.removeEventListener("touchmove", a), r.removeEventListener("touchend", g);
     };
-  }, [E, Je, nt]);
-  const ti = ie((l) => {
-    var H;
-    const o = l.currentTarget, h = o.getBoundingClientRect(), f = l.clientX - h.left, s = l.clientY - h.top;
-    if (Ke.current = f, Q.isPending()) {
-      if (Q.update(f, s), Q.isActive()) {
-        const O = Q.getState();
-        if (O && O.mode === "move" && F.current.canChangeGroup) {
-          const V = at(s, D.current, F.current.groups);
-          V && Q.setCurrentGroup(V.id);
+  }, [C, lt, ct]);
+  const li = ne((r) => {
+    var I;
+    const s = r.currentTarget, h = s.getBoundingClientRect(), f = r.clientX - h.left, a = r.clientY - h.top;
+    if (st.current = f, be.current) {
+      const P = r.clientX - be.current.startX, N = r.clientY - be.current.startY;
+      if (!Pe.current && (Math.abs(P) >= Ct || Math.abs(N) >= Ct) && (Pe.current = !0, s.style.cursor = "grabbing", s.setPointerCapture(r.pointerId)), Pe.current) {
+        const te = r.clientX - be.current.lastX, W = r.clientY - be.current.lastY;
+        be.current.lastX = r.clientX, be.current.lastY = r.clientY, Math.abs(te) > 0 && ze(-te), Math.abs(W) > 0 && et(-W);
+      }
+      return;
+    }
+    if (ee.isPending()) {
+      if (ee.update(f, a), ee.isActive()) {
+        const P = ee.getState();
+        if (P && P.mode === "move" && Y.current.canChangeGroup) {
+          const N = mt(a, F.current, Y.current.groups);
+          N && ee.setCurrentGroup(N.id);
         }
-        E.markDirty("overlay");
+        C.markDirty("overlay");
       }
       return;
     }
-    F.current.showCursorLine && E.markDirty("overlay");
-    const m = F.current, y = Le(f, s, D.current, m.intervalTree, m.layoutEngine, m.groups), k = y == null ? void 0 : y.id;
-    if (k !== Oe.current && (Oe.current = k, E.markDirty("items"), (H = m.onItemHover) == null || H.call(m, k ?? null, l.nativeEvent)), y) {
-      const O = Dt(f, y, D.current), V = m.canResize;
-      O === "left" && (V === "left" || V === "both") || O === "right" && (V === "right" || V === "both") ? o.style.cursor = "col-resize" : m.canMove ? o.style.cursor = "grab" : o.style.cursor = "default";
+    Y.current.showCursorLine && C.markDirty("overlay");
+    const g = Y.current, y = $e(f, a, F.current, g.intervalTree, g.layoutEngine, g.groups), k = y == null ? void 0 : y.id;
+    if (k !== Ae.current && (Ae.current = k, C.markDirty("items"), (I = g.onItemHover) == null || I.call(g, k ?? null, r.nativeEvent)), y) {
+      const P = Bt(f, y, F.current), N = g.canResize;
+      P === "left" && (N === "left" || N === "both") || P === "right" && (N === "right" || N === "both") ? s.style.cursor = "col-resize" : g.canMove ? s.style.cursor = "grab" : s.style.cursor = "default";
     } else
-      o.style.cursor = "default";
-  }, [Q, E]), ii = ie((l) => {
-    const o = F.current, h = l.currentTarget.getBoundingClientRect(), f = l.clientX - h.left, s = l.clientY - h.top, m = Le(f, s, D.current, o.intervalTree, o.layoutEngine, o.groups);
-    if (!m)
+      s.style.cursor = "default";
+  }, [ee, C, ze, et]), ai = ne((r) => {
+    const s = Y.current, h = r.currentTarget.getBoundingClientRect(), f = r.clientX - h.left, a = r.clientY - h.top, g = $e(f, a, F.current, s.intervalTree, s.layoutEngine, s.groups);
+    if (!g) {
+      be.current = { startX: r.clientX, startY: r.clientY, lastX: r.clientX, lastY: r.clientY }, Pe.current = !1;
       return;
-    const y = Dt(f, m, D.current), k = o.canResize;
-    y === "left" && (k === "left" || k === "both") ? Q.startInteraction(m, "resize-left", f, s) : y === "right" && (k === "right" || k === "both") ? Q.startInteraction(m, "resize-right", f, s) : o.canMove && Q.startInteraction(m, "move", f, s);
-  }, [Q]), ni = ie((l) => {
-    var y, k, H, O, V, J;
-    const o = l.currentTarget;
-    if (Q.isActive()) {
-      const R = Q.getState(), re = D.current, $ = re.canvasWidth / (re.visibleTimeEnd - re.visibleTimeStart);
-      if (R) {
-        const w = F.current.moveResizeValidator;
-        if (R.mode === "move") {
-          const p = Q.endMove($);
-          if (p) {
-            const j = D.current, A = F.current, ae = R.deltaX / $, fe = j.timeToX(R.item.start_time + ae), X = j.timeToX(R.item.end_time + ae), q = (j.visibleTimeEnd - j.visibleTimeStart) * 0.1, ee = A.intervalTree.query(j.visibleTimeStart - q, j.visibleTimeEnd + q), N = ut(ee, R.item.id, (me) => j.timeToX(me));
-            let le = p.newStartTime;
-            const U = Ze(fe, N, 8, $, A.dragSnap);
-            if (U !== null)
-              le = j.xToTime(U);
+    }
+    const y = Bt(f, g, F.current), k = s.canResize;
+    y === "left" && (k === "left" || k === "both") ? ee.startInteraction(g, "resize-left", f, a) : y === "right" && (k === "right" || k === "both") ? ee.startInteraction(g, "resize-right", f, a) : s.canMove && ee.startInteraction(g, "move", f, a);
+  }, [ee]), ui = ne((r) => {
+    var y, k, I, P, N, te;
+    const s = r.currentTarget;
+    if (be.current) {
+      const W = Pe.current;
+      if (be.current = null, Pe.current = !1, s.style.cursor = "default", W)
+        return;
+    }
+    if (ee.isActive()) {
+      const W = ee.getState(), U = F.current, Z = U.canvasWidth / (U.visibleTimeEnd - U.visibleTimeStart);
+      if (W) {
+        const ce = Y.current.moveResizeValidator;
+        if (W.mode === "move") {
+          const $ = ee.endMove(Z);
+          if ($) {
+            const S = F.current, v = Y.current, ge = W.deltaX / Z, L = S.timeToX(W.item.start_time + ge), fe = S.timeToX(W.item.end_time + ge), ae = (S.visibleTimeEnd - S.visibleTimeStart) * 0.1, D = v.intervalTree.query(S.visibleTimeStart - ae, S.visibleTimeEnd + ae), ie = vt(D, W.item.id, (de) => S.timeToX(de));
+            let V = $.newStartTime;
+            const A = it(L, ie, 8, Z, v.dragSnap);
+            if (A !== null)
+              V = S.xToTime(A);
             else {
-              const me = Ze(X, N, 8, $, A.dragSnap);
-              if (me !== null) {
-                const ci = R.item.end_time - R.item.start_time;
-                le = j.xToTime(me) - ci;
+              const de = it(fe, ie, 8, Z, v.dragSnap);
+              if (de !== null) {
+                const pe = W.item.end_time - W.item.start_time;
+                V = S.xToTime(de) - pe;
               }
             }
-            const ce = w ? w("move", R.item.id, le) : le, ue = F.current.hierarchyEngine.getMoveDelta(R.item.id, ce);
-            (k = (y = F.current).onItemMove) == null || k.call(y, R.item.id, ce, p.newGroupId, ue.length > 0 ? ue : void 0);
+            const K = ce ? ce("move", W.item.id, V) : V, le = Y.current.hierarchyEngine.getMoveDelta(W.item.id, K);
+            (k = (y = Y.current).onItemMove) == null || k.call(y, W.item.id, K, $.newGroupId, le.length > 0 ? le : void 0);
           }
         } else {
-          const p = Q.endResize($);
-          if (p) {
-            const j = D.current, A = F.current, ae = R.deltaX / $, fe = p.edge === "left" ? R.item.start_time + ae : R.item.end_time + ae, X = j.timeToX(fe), q = (j.visibleTimeEnd - j.visibleTimeStart) * 0.1, ee = A.intervalTree.query(j.visibleTimeStart - q, j.visibleTimeEnd + q), N = ut(ee, R.item.id, (me) => j.timeToX(me)), le = Ze(X, N, 8, $, A.dragSnap);
-            let U = le !== null ? j.xToTime(le) : p.newTime;
-            const ce = F.current.hierarchyEngine.getResizeConstraint(R.item.id, p.edge);
-            p.edge === "left" && U > ce.max ? U = ce.max : p.edge === "right" && U < ce.min && (U = ce.min);
-            const ue = w ? w("resize", R.item.id, U, p.edge) : U;
-            (O = (H = F.current).onItemResize) == null || O.call(H, R.item.id, ue, p.edge);
+          const $ = ee.endResize(Z);
+          if ($) {
+            const S = F.current, v = Y.current, ge = W.deltaX / Z, L = $.edge === "left" ? W.item.start_time + ge : W.item.end_time + ge, fe = S.timeToX(L), ae = (S.visibleTimeEnd - S.visibleTimeStart) * 0.1, D = v.intervalTree.query(S.visibleTimeStart - ae, S.visibleTimeEnd + ae), ie = vt(D, W.item.id, (de) => S.timeToX(de)), V = it(fe, ie, 8, Z, v.dragSnap);
+            let A = V !== null ? S.xToTime(V) : $.newTime;
+            const K = Y.current.hierarchyEngine.getResizeConstraint(W.item.id, $.edge);
+            $.edge === "left" && A > K.max ? A = K.max : $.edge === "right" && A < K.min && (A = K.min);
+            const le = ce ? ce("resize", W.item.id, A, $.edge) : A;
+            (P = (I = Y.current).onItemResize) == null || P.call(I, W.item.id, le, $.edge);
           }
         }
       }
-      o.style.cursor = "default", E.markDirty("overlay");
+      s.style.cursor = "default", C.markDirty("overlay");
       return;
     }
-    Q.isPending() && Q.cancel();
-    const h = o.getBoundingClientRect(), f = l.clientX - h.left, s = l.clientY - h.top, m = Le(f, s, D.current, F.current.intervalTree, F.current.layoutEngine, F.current.groups);
-    m && ((J = (V = F.current).onItemClick) == null || J.call(V, m.id, l.nativeEvent));
-  }, [Q, E]), ri = ie((l) => {
+    ee.isPending() && ee.cancel();
+    const h = s.getBoundingClientRect(), f = r.clientX - h.left, a = r.clientY - h.top, g = $e(f, a, F.current, Y.current.intervalTree, Y.current.layoutEngine, Y.current.groups);
+    g && ((te = (N = Y.current).onItemClick) == null || te.call(N, g.id, r.nativeEvent));
+  }, [ee, C]), ci = ne((r) => {
     var y, k;
-    const o = l.currentTarget.getBoundingClientRect(), h = l.clientX - o.left, f = l.clientY - o.top, s = F.current, m = Le(h, f, D.current, s.intervalTree, s.layoutEngine, s.groups);
-    if (m)
-      (y = s.onItemDoubleClick) == null || y.call(s, m.id, l.nativeEvent);
+    const s = r.currentTarget.getBoundingClientRect(), h = r.clientX - s.left, f = r.clientY - s.top, a = Y.current, g = $e(h, f, F.current, a.intervalTree, a.layoutEngine, a.groups);
+    if (g)
+      (y = a.onItemDoubleClick) == null || y.call(a, g.id, r.nativeEvent);
     else {
-      const H = at(f, D.current, s.groups), O = D.current.xToTime(h);
-      H && ((k = s.onCanvasDoubleClick) == null || k.call(s, H.id, O));
+      const I = mt(f, F.current, a.groups), P = F.current.xToTime(h);
+      I && ((k = a.onCanvasDoubleClick) == null || k.call(a, I.id, P));
     }
-  }, []), oi = ie((l) => {
+  }, []), di = ne((r) => {
     var y, k;
-    l.preventDefault();
-    const o = l.currentTarget.getBoundingClientRect(), h = l.clientX - o.left, f = l.clientY - o.top, s = F.current, m = Le(h, f, D.current, s.intervalTree, s.layoutEngine, s.groups);
-    if (m)
-      (y = s.onItemContextMenu) == null || y.call(s, m.id, l.nativeEvent);
+    r.preventDefault();
+    const s = r.currentTarget.getBoundingClientRect(), h = r.clientX - s.left, f = r.clientY - s.top, a = Y.current, g = $e(h, f, F.current, a.intervalTree, a.layoutEngine, a.groups);
+    if (g)
+      (y = a.onItemContextMenu) == null || y.call(a, g.id, r.nativeEvent);
     else {
-      const H = at(f, D.current, s.groups), O = D.current.xToTime(h);
-      H && ((k = s.onCanvasContextMenu) == null || k.call(s, H.id, O, l.nativeEvent));
+      const I = mt(f, F.current, a.groups), P = F.current.xToTime(h);
+      I && ((k = a.onCanvasContextMenu) == null || k.call(a, I.id, P, r.nativeEvent));
     }
-  }, []), si = ie(() => {
-    var l, o;
-    Ke.current = null, _e.current && (_e.current.style.cursor = "default"), Oe.current !== void 0 && (Oe.current = void 0, E.markDirty("items"), (o = (l = F.current).onItemHover) == null || o.call(l, null, new PointerEvent("pointerleave"))), F.current.showCursorLine && E.markDirty("overlay");
-  }, [E]), li = oe(() => {
-    const l = [];
-    return ge.Children.forEach(Te, (o) => {
+  }, []), hi = ne(() => {
+    var r, s;
+    be.current = null, Pe.current = !1, st.current = null, Ye.current && (Ye.current.style.cursor = "default"), Ae.current !== void 0 && (Ae.current = void 0, C.markDirty("items"), (s = (r = Y.current).onItemHover) == null || s.call(r, null, new PointerEvent("pointerleave"))), Y.current.showCursorLine && C.markDirty("overlay");
+  }, [C]), fi = Q(() => {
+    const r = [];
+    return me.Children.forEach(ke, (s) => {
       var f;
-      if (!ge.isValidElement(o))
+      if (!me.isValidElement(s))
         return;
-      if (((f = o.type) == null ? void 0 : f.displayName) === "TimelineHeaders") {
-        const s = o.props;
-        l.push(ge.cloneElement(o, {
-          visibleTimeStart: s.visibleTimeStart ?? Tt,
-          visibleTimeEnd: s.visibleTimeEnd ?? St,
-          canvasWidth: s.canvasWidth ?? Se,
-          sidebarWidth: s.sidebarWidth ?? d,
-          theme: s.theme ?? ye,
-          onZoomToInterval: s.onZoomToInterval ?? ((m, y) => {
-            var k, H, O, V;
-            D.current.update({ visibleTimeStart: m, visibleTimeEnd: y }), E.markAllDirty(), Re(), (H = (k = F.current).onTimeChange) == null || H.call(k, m, y), (V = (O = F.current).onZoom) == null || V.call(O, m, y);
+      if (((f = s.type) == null ? void 0 : f.displayName) === "TimelineHeaders") {
+        const a = s.props;
+        r.push(me.cloneElement(s, {
+          visibleTimeStart: a.visibleTimeStart ?? Ht,
+          visibleTimeEnd: a.visibleTimeEnd ?? It,
+          canvasWidth: a.canvasWidth ?? we,
+          sidebarWidth: a.sidebarWidth ?? c,
+          theme: a.theme ?? Se,
+          onZoomToInterval: a.onZoomToInterval ?? ((g, y) => {
+            var k, I, P, N;
+            F.current.update({ visibleTimeStart: g, visibleTimeEnd: y }), C.markAllDirty(), _e(), (I = (k = Y.current).onTimeChange) == null || I.call(k, g, y), (N = (P = Y.current).onZoom) == null || N.call(P, g, y);
           })
         }));
       }
-    }), l;
-  }, [Te, Tt, St, Se, d, ye, E, Re]), Pt = x(!1);
+    }), r;
+  }, [ke, Ht, It, we, c, Se, C, _e]), Wt = x(!1);
   he(() => {
-    Pt.current || (Pt.current = !0, E.markAllDirty());
-  }, [E]), ui(t, () => ({
-    captureToCanvas({ timeStart: l, timeEnd: o, scale: h, sidebarWidth: f }) {
-      const s = F.current, m = 28, y = m * 3, k = s.groups.length * s.lineHeight, H = D.current, O = s.canvasWidth / (H.visibleTimeEnd - H.visibleTimeStart), V = o - l, J = Math.max(s.canvasWidth, Math.round(V * O)), R = (f + J) * h, re = (y + k) * h, $ = document.createElement("canvas");
-      $.width = R, $.height = re;
-      const w = $.getContext("2d");
-      w.scale(h, h);
-      for (let A = 0; A < s.groups.length; A++) {
-        const ae = s.groups[A], fe = y + A * s.lineHeight;
-        if (s.rowStyle) {
-          const N = s.rowStyle(ae);
-          N != null && N.backgroundColor && (w.fillStyle = N.backgroundColor, w.fillRect(0, fe, f, s.lineHeight));
+    Wt.current || (Wt.current = !0, C.markAllDirty());
+  }, [C]), vi(t, () => ({
+    captureToCanvas({ timeStart: r, timeEnd: s, scale: h, sidebarWidth: f }) {
+      const a = Y.current, g = 28, y = g * 3, k = a.groups.map((L) => a.layoutEngine.getGroupHeight(L.id)), I = [0];
+      for (let L = 0; L < k.length; L++)
+        I.push(I[L] + k[L]);
+      const P = I[k.length], N = F.current, te = a.canvasWidth / (N.visibleTimeEnd - N.visibleTimeStart), W = s - r, U = Math.max(a.canvasWidth, Math.round(W * te)), Z = (f + U) * h, ce = (y + P) * h, $ = document.createElement("canvas");
+      $.width = Z, $.height = ce;
+      const S = $.getContext("2d");
+      S.scale(h, h);
+      for (let L = 0; L < a.groups.length; L++) {
+        const fe = a.groups[L], ae = k[L], D = y + I[L];
+        if (a.rowStyle) {
+          const K = a.rowStyle(fe);
+          K != null && K.backgroundColor && (S.fillStyle = K.backgroundColor, S.fillRect(0, D, f, ae));
         }
-        const X = ae.type;
-        let q = "400", ee = 8;
-        X === "project" ? q = "700" : X === "CAG" ? q = "600" : X === "CA" && (q = "400", ee = 24), w.fillStyle = "#111", w.font = `${q} 12px sans-serif`, w.textBaseline = "middle", w.fillText(ae.title, ee, fe + s.lineHeight / 2, f - ee - 4);
+        const ie = fe.type;
+        let V = "400", A = 8;
+        ie === "project" ? V = "700" : ie === "CAG" ? V = "600" : ie === "CA" && (V = "400", A = 24), S.fillStyle = "#111", S.font = `${V} 12px sans-serif`, S.textBaseline = "middle", S.fillText(fe.title, A, D + ae / 2, f - A - 4);
       }
-      const p = (A, ae, fe) => {
-        var ee, N;
-        w.fillStyle = ((ee = s.theme.header) == null ? void 0 : ee.bg) ?? "#f5f5f5", w.fillRect(f, A, J, m), w.strokeStyle = ((N = s.theme.grid) == null ? void 0 : N.line) ?? "#e0e0e0", w.lineWidth = 1, w.strokeRect(f, A, J, m);
-        let X = pe(l).startOf(fe);
-        X.valueOf() < l && (X = X.add(1, fe));
-        const q = J / (o - l);
-        for (; X.valueOf() < o; ) {
-          const le = X.add(1, fe), U = f + (X.valueOf() - l) * q, ue = f + (Math.min(le.valueOf(), o) - l) * q - U;
-          w.beginPath(), w.moveTo(U, A), w.lineTo(U, A + m), w.stroke(), w.fillStyle = "#333", w.font = "600 11px sans-serif", w.textBaseline = "middle", w.textAlign = "center", w.fillText(ae(X), U + ue / 2, A + m / 2, ue - 4), X = le;
+      const v = (L, fe, ae) => {
+        var V, A;
+        S.fillStyle = ((V = a.theme.header) == null ? void 0 : V.bg) ?? "#f5f5f5", S.fillRect(f, L, U, g), S.strokeStyle = ((A = a.theme.grid) == null ? void 0 : A.line) ?? "#e0e0e0", S.lineWidth = 1, S.strokeRect(f, L, U, g);
+        let D = ve(r).startOf(ae);
+        D.valueOf() < r && (D = D.add(1, ae));
+        const ie = U / (s - r);
+        for (; D.valueOf() < s; ) {
+          const K = D.add(1, ae), le = f + (D.valueOf() - r) * ie, pe = f + (Math.min(K.valueOf(), s) - r) * ie - le;
+          S.beginPath(), S.moveTo(le, L), S.lineTo(le, L + g), S.stroke(), S.fillStyle = "#333", S.font = "600 11px sans-serif", S.textBaseline = "middle", S.textAlign = "center", S.fillText(fe(D), le + pe / 2, L + g / 2, pe - 4), D = K;
         }
-        w.textAlign = "start";
+        S.textAlign = "start";
       };
-      p(0, (A) => A.format("YYYY"), "year"), p(m, (A) => A.format("MM"), "month"), p(m * 2, (A) => String(A.isoWeek()), "week");
-      const j = new lt({
-        visibleTimeStart: l,
-        visibleTimeEnd: o,
-        canvasWidth: J,
-        canvasHeight: k,
+      v(0, (L) => L.format("YYYY"), "year"), v(g, (L) => L.format("MM"), "month"), v(g * 2, (L) => String(L.isoWeek()), "week");
+      const ge = new ft({
+        visibleTimeStart: r,
+        visibleTimeEnd: s,
+        canvasWidth: U,
+        canvasHeight: P,
         sidebarWidth: 0,
-        lineHeight: s.lineHeight,
-        groupCount: s.groups.length,
+        lineHeight: a.lineHeight,
+        groupCount: a.groups.length,
         buffer: 1,
-        scrollTop: 0
+        scrollTop: 0,
+        groupHeights: k
       });
-      return w.save(), w.translate(f, y), w.beginPath(), w.rect(0, 0, J, k), w.clip(), Pe.draw(w, j, s.groups, s.theme, s.dayStyle, s.rowStyle, s.highlights), De.draw(w, j, s.groups, s.items, s.intervalTree, s.layoutEngine, s.itemRenderer, s.groupRenderer, s.theme, s.selected, void 0, s.dependencies, s.summaryRenderer, s.hierarchyEngine), Fe.draw(w, j, s.theme, {
+      return S.save(), S.translate(f, y), S.beginPath(), S.rect(0, 0, U, P), S.clip(), Fe.draw(S, ge, a.groups, a.theme, a.dayStyle, a.rowStyle, a.highlights), We.draw(S, ge, a.groups, a.items, a.intervalTree, a.layoutEngine, a.itemRenderer, a.groupRenderer, a.theme, a.selected, void 0, a.dependencies, a.summaryRenderer, a.hierarchyEngine), Be.draw(S, ge, a.theme, {
         cursorX: null,
         snapX: null,
-        markers: Xe.current,
+        markers: Ge.current,
         interaction: null
-      }), w.restore(), $;
+      }), S.restore(), $;
     }
-  }), [Pe, De, Fe]), he(() => {
-    const l = {
-      captureToCanvas({ timeStart: o, timeEnd: h, scale: f, sidebarWidth: s }) {
-        var fe;
-        const m = F.current, y = 28, k = y * 3, H = m.groups.length * m.lineHeight, O = D.current, V = m.canvasWidth / (O.visibleTimeEnd - O.visibleTimeStart), J = h - o, R = Math.max(m.canvasWidth, Math.round(J * V)), re = s + R, $ = k + H, w = document.createElement("canvas");
-        w.width = re * f, w.height = $ * f;
-        const p = w.getContext("2d");
-        p.scale(f, f), p.fillStyle = "#FFFFFF", p.fillRect(0, 0, re, $), p.save(), p.beginPath(), p.rect(0, 0, s, $), p.clip(), p.fillStyle = "#F9FAFB", p.fillRect(0, 0, s, k), p.strokeStyle = "#E5E7EB", p.lineWidth = 1, p.strokeRect(0, 0, s, k);
-        for (let X = 0; X < m.groups.length; X++) {
-          const q = m.groups[X], ee = k + X * m.lineHeight, N = (fe = m.rowStyle) == null ? void 0 : fe.call(m, q);
-          p.fillStyle = (N == null ? void 0 : N.backgroundColor) ?? (X % 2 === 0 ? "#FFFFFF" : "#F7F7F7"), p.fillRect(0, ee, s, m.lineHeight), p.strokeStyle = "#E5E5E5", p.lineWidth = 0.5, p.beginPath(), p.moveTo(0, ee + m.lineHeight), p.lineTo(s, ee + m.lineHeight), p.stroke();
-          const le = q.type ?? "";
-          let U = 8, ce = "400", ue = 11;
-          le === "project" ? (ce = "700", ue = 12) : le === "control_area_group" ? ce = "600" : le === "control_area" && (U = 24), p.fillStyle = "#374151", p.font = `${ce} ${ue}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, p.textBaseline = "middle";
-          const me = typeof q.title == "string" ? q.title : String(q.title);
-          p.fillText(me, U, ee + m.lineHeight / 2, s - U - 8);
+  }), [Fe, We, Be]), he(() => {
+    const r = {
+      captureToCanvas({ timeStart: s, timeEnd: h, scale: f, sidebarWidth: a }) {
+        var ae;
+        const g = Y.current, y = 28, k = y * 3, I = g.groups.map((D) => g.layoutEngine.getGroupHeight(D.id)), P = [0];
+        for (let D = 0; D < I.length; D++)
+          P.push(P[D] + I[D]);
+        const N = P[I.length], te = F.current, W = g.canvasWidth / (te.visibleTimeEnd - te.visibleTimeStart), U = h - s, Z = Math.max(g.canvasWidth, Math.round(U * W)), ce = a + Z, $ = k + N, S = document.createElement("canvas");
+        S.width = ce * f, S.height = $ * f;
+        const v = S.getContext("2d");
+        v.scale(f, f), v.fillStyle = "#FFFFFF", v.fillRect(0, 0, ce, $), v.save(), v.beginPath(), v.rect(0, 0, a, $), v.clip(), v.fillStyle = "#F9FAFB", v.fillRect(0, 0, a, k), v.strokeStyle = "#E5E7EB", v.lineWidth = 1, v.strokeRect(0, 0, a, k);
+        for (let D = 0; D < g.groups.length; D++) {
+          const ie = g.groups[D], V = I[D], A = k + P[D], K = (ae = g.rowStyle) == null ? void 0 : ae.call(g, ie);
+          v.fillStyle = (K == null ? void 0 : K.backgroundColor) ?? (D % 2 === 0 ? "#FFFFFF" : "#F7F7F7"), v.fillRect(0, A, a, V), v.strokeStyle = "#E5E5E5", v.lineWidth = 0.5, v.beginPath(), v.moveTo(0, A + V), v.lineTo(a, A + V), v.stroke();
+          const le = ie.type ?? "";
+          let de = 8, pe = "400", De = 11;
+          le === "project" ? (pe = "700", De = 12) : le === "control_area_group" ? pe = "600" : le === "control_area" && (de = 24), v.fillStyle = "#374151", v.font = `${pe} ${De}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, v.textBaseline = "middle";
+          const gi = typeof ie.title == "string" ? ie.title : String(ie.title);
+          v.fillText(gi, de, A + V / 2, a - de - 8);
         }
-        p.strokeStyle = "#E5E7EB", p.lineWidth = 1, p.beginPath(), p.moveTo(s, 0), p.lineTo(s, $), p.stroke(), p.restore(), p.save(), p.beginPath(), p.rect(s, 0, R, k), p.clip();
-        const j = h - o, A = [
+        v.strokeStyle = "#E5E7EB", v.lineWidth = 1, v.beginPath(), v.moveTo(a, 0), v.lineTo(a, $), v.stroke(), v.restore(), v.save(), v.beginPath(), v.rect(a, 0, Z, k), v.clip();
+        const ge = h - s, L = [
           { unit: "year", row: 0 },
           { unit: "month", row: 1 },
           { unit: "week", row: 2 }
         ];
-        for (const { unit: X, row: q } of A) {
-          const ee = q * y;
-          p.fillStyle = "#F9FAFB", p.fillRect(s, ee, R, y);
-          let N = pe(o).startOf(X);
-          const le = pe(h).add(1, X);
-          for (; N.isBefore(le); ) {
-            const U = N.add(1, X), ce = s + (N.valueOf() - o) / j * R, ue = (U.valueOf() - N.valueOf()) / j * R;
-            p.strokeStyle = "#E5E7EB", p.lineWidth = 0.5, p.strokeRect(ce, ee, ue, y);
-            let me;
-            X === "year" ? me = N.format("YYYY") : X === "month" ? me = N.format("MM") : me = `${N.week()}`, p.fillStyle = "#6c737f", p.font = X === "year" ? '600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', p.textBaseline = "middle", p.textAlign = "center", ue > 20 && p.fillText(me, ce + ue / 2, ee + y / 2), N = U;
+        for (const { unit: D, row: ie } of L) {
+          const V = ie * y;
+          v.fillStyle = "#F9FAFB", v.fillRect(a, V, Z, y);
+          let A = ve(s).startOf(D);
+          const K = ve(h).add(1, D);
+          for (; A.isBefore(K); ) {
+            const le = A.add(1, D), de = a + (A.valueOf() - s) / ge * Z, pe = (le.valueOf() - A.valueOf()) / ge * Z;
+            v.strokeStyle = "#E5E7EB", v.lineWidth = 0.5, v.strokeRect(de, V, pe, y);
+            let De;
+            D === "year" ? De = A.format("YYYY") : D === "month" ? De = A.format("MM") : De = `${A.week()}`, v.fillStyle = "#6c737f", v.font = D === "year" ? '600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', v.textBaseline = "middle", v.textAlign = "center", pe > 20 && v.fillText(De, de + pe / 2, V + y / 2), A = le;
           }
         }
-        p.textAlign = "start", p.restore(), p.save(), p.beginPath(), p.rect(s, k, R, H), p.clip(), p.translate(s, k);
-        const ae = new lt({
-          visibleTimeStart: o,
+        v.textAlign = "start", v.restore(), v.save(), v.beginPath(), v.rect(a, k, Z, N), v.clip(), v.translate(a, k);
+        const fe = new ft({
+          visibleTimeStart: s,
           visibleTimeEnd: h,
-          canvasWidth: R,
-          canvasHeight: H,
+          canvasWidth: Z,
+          canvasHeight: N,
           sidebarWidth: 0,
-          lineHeight: m.lineHeight,
-          groupCount: m.groups.length,
+          lineHeight: g.lineHeight,
+          groupCount: g.groups.length,
           buffer: 1,
-          scrollTop: 0
+          scrollTop: 0,
+          groupHeights: I
         });
-        return Pe.draw(p, ae, m.groups, m.theme, m.dayStyle, m.rowStyle, m.highlights), De.draw(p, ae, m.groups, m.items, m.intervalTree, m.layoutEngine, m.itemRenderer, m.groupRenderer, m.theme, m.selected, void 0, m.dependencies, m.summaryRenderer, m.hierarchyEngine), Fe.draw(p, ae, m.theme, { cursorX: null, markers: Xe.current }), p.restore(), w;
+        return Fe.draw(v, fe, g.groups, g.theme, g.dayStyle, g.rowStyle, g.highlights), We.draw(v, fe, g.groups, g.items, g.intervalTree, g.layoutEngine, g.itemRenderer, g.groupRenderer, g.theme, g.selected, void 0, g.dependencies, g.summaryRenderer, g.hierarchyEngine), Be.draw(v, fe, g.theme, { cursorX: null, markers: Ge.current }), v.restore(), S;
       }
     };
-    je == null || je(l);
-  }, [je, Pe, De, Fe]);
-  const ai = {
+    Ze == null || Ze(r);
+  }, [Ze, Fe, We, Be]);
+  const mi = {
     position: "relative",
-    width: Se,
-    height: ke,
+    width: we,
+    height: Me,
     overflow: "hidden",
     cursor: "default"
-  }, st = { position: "absolute", top: 0, left: 0 };
-  return Ae("div", { ref: yt, style: { display: "flex", flexDirection: "column", width: "100%", position: "relative" }, children: [xt ? Ae("div", { style: {
+  }, ht = { position: "absolute", top: 0, left: 0 };
+  return xe("div", { ref: Et, style: { display: "flex", flexDirection: "column", width: "100%", position: "relative" }, children: [Kt ? xe("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -1444,28 +1532,28 @@ const Lt = 32, $i = ge.memo(di(function(e, t) {
     borderBottomRightRadius: 4,
     pointerEvents: "none",
     userSelect: "none"
-  }, children: ["v", "0.4.0", " · ", "11:57:07"] }) : null, li, Ae("div", { ref: Vt, style: { display: "flex", overflow: "hidden" }, children: [se(Wt, { groups: n, width: d, lineHeight: c, scrollTop: kt, canvasHeight: ke, theme: ye, groupRenderer: ne, onScroll: (l) => {
-    D.current.update({ scrollTop: l }), E.markDirty("grid"), E.markDirty("items"), E.markDirty("overlay"), Ne(l);
-  } }), Ae("div", { ref: _e, style: ai, onPointerMove: ti, onPointerDown: ii, onPointerUp: ni, onDoubleClick: ri, onContextMenu: oi, onPointerLeave: si, children: [se("canvas", { ref: pt, style: { ...st, zIndex: 0 } }), se("canvas", { ref: vt, style: { ...st, zIndex: 1 } }), se("canvas", { ref: bt, style: { ...st, zIndex: 2 } })] }), qe && mt ? se(Wt, { groups: n, width: qe, lineHeight: c, scrollTop: kt, canvasHeight: ke, theme: ye, groupRenderer: mt, onScroll: (l) => {
-    D.current.update({ scrollTop: l }), E.markDirty("grid"), E.markDirty("items"), E.markDirty("overlay"), Ne(l);
+  }, children: ["v", "0.5.0", " · ", "15:09:31"] }) : null, fi, xe("div", { ref: Qt, style: { display: "flex", overflow: "hidden" }, children: [se(jt, { groups: n, width: c, lineHeight: u, groupHeights: Re, scrollTop: Rt, canvasHeight: Me, theme: Se, groupRenderer: B, onScroll: (r) => {
+    F.current.update({ scrollTop: r }), C.markDirty("grid"), C.markDirty("items"), C.markDirty("overlay"), qe(r);
+  } }), xe("div", { ref: Ye, style: mi, onPointerMove: li, onPointerDown: ai, onPointerUp: ui, onDoubleClick: ci, onContextMenu: di, onPointerLeave: hi, children: [se("canvas", { ref: kt, style: { ...ht, zIndex: 0 } }), se("canvas", { ref: wt, style: { ...ht, zIndex: 1 } }), se("canvas", { ref: Mt, style: { ...ht, zIndex: 2 } })] }), nt && Tt ? se(jt, { groups: n, width: nt, lineHeight: u, groupHeights: Re, scrollTop: Rt, canvasHeight: Me, theme: Se, groupRenderer: Tt, onScroll: (r) => {
+    F.current.update({ scrollTop: r }), C.markDirty("grid"), C.markDirty("items"), C.markDirty("overlay"), qe(r);
   } }) : null] })] });
 }));
-function Di({ children: i, theme: e, className: t, classNames: n, style: r, visibleTimeStart: u, visibleTimeEnd: a, canvasWidth: d, sidebarWidth: c = 0, onZoomToInterval: v }) {
-  const M = ge.Children.map(i, (g) => {
+function Bi({ children: i, theme: e, className: t, classNames: n, style: o, visibleTimeStart: d, visibleTimeEnd: l, canvasWidth: c, sidebarWidth: u = 0, onZoomToInterval: p }) {
+  const M = me.Children.map(i, (m) => {
     var T;
-    if (!ge.isValidElement(g))
-      return g;
-    if (((T = g.type) == null ? void 0 : T.displayName) === "DateHeader") {
-      const C = g.props, I = ge.cloneElement(g, {
-        visibleTimeStart: C.visibleTimeStart ?? u,
-        visibleTimeEnd: C.visibleTimeEnd ?? a,
-        canvasWidth: C.canvasWidth ?? d,
-        theme: C.theme ?? e,
-        onZoomToInterval: C.onIntervalClick ?? C.onZoomToInterval ?? v
+    if (!me.isValidElement(m))
+      return m;
+    if (((T = m.type) == null ? void 0 : T.displayName) === "DateHeader") {
+      const H = m.props, O = me.cloneElement(m, {
+        visibleTimeStart: H.visibleTimeStart ?? d,
+        visibleTimeEnd: H.visibleTimeEnd ?? l,
+        canvasWidth: H.canvasWidth ?? c,
+        theme: H.theme ?? e,
+        onZoomToInterval: H.onIntervalClick ?? H.onZoomToInterval ?? p
       });
-      return Ae("div", { style: { display: "flex" }, children: [se("div", { style: { width: c, flexShrink: 0 } }), se("div", { style: { flex: 1, overflow: "hidden" }, children: I })] });
+      return xe("div", { style: { display: "flex" }, children: [se("div", { style: { width: u, flexShrink: 0 } }), se("div", { style: { flex: 1, overflow: "hidden" }, children: O })] });
     }
-    return g;
+    return m;
   });
   return se("div", { className: t, style: {
     position: "sticky",
@@ -1476,65 +1564,65 @@ function Di({ children: i, theme: e, className: t, classNames: n, style: r, visi
     backgroundColor: (e == null ? void 0 : e.header.bg) ?? "#F9FAFB",
     borderTop: `1px solid ${(e == null ? void 0 : e.header.border) ?? "#E5E7EB"}`,
     borderBottom: `1px solid ${(e == null ? void 0 : e.header.border) ?? "#E5E7EB"}`,
-    ...r
+    ...o
   }, children: M });
 }
-Di.displayName = "TimelineHeaders";
-var $t = { exports: {} };
+Bi.displayName = "TimelineHeaders";
+var Ut = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
-  })(jt, function() {
+  })(Vt, function() {
     var t = "week", n = "year";
-    return function(r, u, a) {
-      var d = u.prototype;
-      d.week = function(c) {
-        if (c === void 0 && (c = null), c !== null) return this.add(7 * (c - this.week()), "day");
-        var v = this.$locale().yearStart || 1;
+    return function(o, d, l) {
+      var c = d.prototype;
+      c.week = function(u) {
+        if (u === void 0 && (u = null), u !== null) return this.add(7 * (u - this.week()), "day");
+        var p = this.$locale().yearStart || 1;
         if (this.month() === 11 && this.date() > 25) {
-          var M = a(this).startOf(n).add(1, n).date(v), g = a(this).endOf(t);
-          if (M.isBefore(g)) return 1;
+          var M = l(this).startOf(n).add(1, n).date(p), m = l(this).endOf(t);
+          if (M.isBefore(m)) return 1;
         }
-        var b = a(this).startOf(n).date(v).startOf(t).subtract(1, "millisecond"), T = this.diff(b, t, !0);
-        return T < 0 ? a(this).startOf("week").week() : Math.ceil(T);
-      }, d.weeks = function(c) {
-        return c === void 0 && (c = null), this.week(c);
+        var b = l(this).startOf(n).date(p).startOf(t).subtract(1, "millisecond"), T = this.diff(b, t, !0);
+        return T < 0 ? l(this).startOf("week").week() : Math.ceil(T);
+      }, c.weeks = function(u) {
+        return u === void 0 && (u = null), this.week(u);
       };
     };
   });
-})($t);
-var Fi = $t.exports;
-const _i = /* @__PURE__ */ Nt(Fi);
-pe.extend(_i);
-const Oi = {
+})(Ut);
+var Yi = Ut.exports;
+const Li = /* @__PURE__ */ Zt(Yi);
+ve.extend(Li);
+const Ai = {
   year: 30,
   month: 30,
   week: 20,
   day: 15,
   hour: 30
 };
-function Wi({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWidth: n = 0, theme: r, height: u = 28, className: a, labelFormat: d, onIntervalClick: c, minCellWidth: v, onZoomToInterval: M }) {
-  const g = oe(() => {
+function ji({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWidth: n = 0, theme: o, height: d = 28, className: l, labelFormat: c, onIntervalClick: u, minCellWidth: p, onZoomToInterval: M }) {
+  const m = Q(() => {
     if (!e || !t || !n)
       return [];
-    const T = t - e, C = v ?? Oi[i];
-    if (C > 0) {
-      const S = pe(e).startOf(i);
-      if ((S.add(1, i).valueOf() - S.valueOf()) / T * n < C)
+    const T = t - e, H = p ?? Ai[i];
+    if (H > 0) {
+      const w = ve(e).startOf(i);
+      if ((w.add(1, i).valueOf() - w.valueOf()) / T * n < H)
         return [];
     }
-    const I = [];
-    let W = pe(e).startOf(i).subtract(1, i);
-    const z = pe(t).add(2, i).valueOf();
-    for (; W.valueOf() < z; ) {
-      const S = W.add(1, i), _ = W.valueOf(), B = S.valueOf(), Y = (_ - e) / T * n, G = (B - _) / T * n, ne = Xi(W, S, i, d);
-      I.push({ start: _, end: B, label: ne, left: Y, width: G }), W = S;
+    const O = [];
+    let j = ve(e).startOf(i).subtract(1, i);
+    const re = ve(t).add(2, i).valueOf();
+    for (; j.valueOf() < re; ) {
+      const w = j.add(1, i), X = j.valueOf(), E = w.valueOf(), R = (X - e) / T * n, z = (E - X) / T * n, B = Gi(j, w, i, c);
+      O.push({ start: X, end: E, label: B, left: R, width: z }), j = w;
     }
-    return I;
-  }, [e, t, n, i, d, v]), b = ie((T, C) => {
-    c ? c(T, C) : M && M(T, C);
-  }, [c, M]);
-  return g.length === 0 ? null : se("div", { style: { display: "flex", position: "relative", height: u, overflow: "hidden" }, children: g.map((T) => se("div", { className: a, onClick: () => b(T.start, T.end), style: {
+    return O;
+  }, [e, t, n, i, c, p]), b = ne((T, H) => {
+    u ? u(T, H) : M && M(T, H);
+  }, [u, M]);
+  return m.length === 0 ? null : se("div", { style: { display: "flex", position: "relative", height: d, overflow: "hidden" }, children: m.map((T) => se("div", { className: l, onClick: () => b(T.start, T.end), style: {
     position: "absolute",
     left: T.left,
     width: T.width,
@@ -1542,11 +1630,11 @@ function Wi({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWid
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRight: `1px solid ${(r == null ? void 0 : r.header.border) ?? "#E5E7EB"}`,
-    borderBottom: `1px solid ${(r == null ? void 0 : r.header.border) ?? "#E5E7EB"}`,
+    borderRight: `1px solid ${(o == null ? void 0 : o.header.border) ?? "#E5E7EB"}`,
+    borderBottom: `1px solid ${(o == null ? void 0 : o.header.border) ?? "#E5E7EB"}`,
     fontSize: 12,
-    color: (r == null ? void 0 : r.header.text) ?? "#6c737f",
-    backgroundColor: (r == null ? void 0 : r.header.bg) ?? "#F9FAFB",
+    color: (o == null ? void 0 : o.header.text) ?? "#6c737f",
+    backgroundColor: (o == null ? void 0 : o.header.bg) ?? "#F9FAFB",
     overflow: "hidden",
     whiteSpace: "nowrap",
     cursor: "pointer",
@@ -1555,11 +1643,11 @@ function Wi({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWid
     boxSizing: "border-box"
   }, children: se("span", { children: T.label }) }, T.start)) });
 }
-Wi.displayName = "DateHeader";
-function Xi(i, e, t, n, r) {
-  return typeof n == "function" ? n(i.toDate(), e.toDate(), t) : typeof n == "string" ? i.format(n) : Bi(i, t);
+ji.displayName = "DateHeader";
+function Gi(i, e, t, n, o) {
+  return typeof n == "function" ? n(i.toDate(), e.toDate(), t) : typeof n == "string" ? i.format(n) : Ni(i, t);
 }
-function Bi(i, e) {
+function Ni(i, e) {
   switch (e) {
     case "year":
       return i.format("YYYY");
@@ -1573,24 +1661,24 @@ function Bi(i, e) {
       return i.format("HH:mm");
   }
 }
-function Li({ width: i, children: e, style: t }) {
+function zi({ width: i, children: e, style: t }) {
   const n = () => ({ style: { width: i, ...t } });
-  return e ? se(At, { children: e({ getRootProps: n }) }) : se("div", { style: { width: i } });
+  return e ? se($t, { children: e({ getRootProps: n }) }) : se("div", { style: { width: i } });
 }
-Li.displayName = "SidebarHeader";
-function Ai({ children: i }) {
-  return se(At, { children: i });
+zi.displayName = "SidebarHeader";
+function $i({ children: i }) {
+  return se($t, { children: i });
 }
-Ai.displayName = "CustomHeader";
+$i.displayName = "CustomHeader";
 export {
-  $i as CanvasTimeline,
-  Ai as CustomHeader,
-  Ri as CustomMarker,
-  we as DEFAULT_THEME,
-  Wi as DateHeader,
-  gi as HierarchyEngine,
-  Li as SidebarHeader,
-  Di as TimelineHeaders,
-  Hi as TodayMarker
+  Ui as CanvasTimeline,
+  $i as CustomHeader,
+  Fi as CustomMarker,
+  Ce as DEFAULT_THEME,
+  ji as DateHeader,
+  Si as HierarchyEngine,
+  zi as SidebarHeader,
+  Bi as TimelineHeaders,
+  Xi as TodayMarker
 };
 //# sourceMappingURL=canvas-timeline.es.js.map