@taskctrl/canvas-timeline 0.1.0 → 0.1.1

package/dist/canvas-timeline.es.js

@@ -0,0 +1,1316 @@
+import { jsx as Z, jsxs as je, Fragment as Ft } from "react/jsx-runtime";
+import ie, { useRef as L, useCallback as $, useEffect as re, forwardRef as tr, useMemo as Q, useState as Ye, useImperativeHandle as rr } from "react";
+import { flushSync as ir } from "react-dom";
+import ne from "dayjs";
+const be = {
+  primary: "#269bf7",
+  trainColors: {},
+  status: { red: "#EF5350", yellow: "#FBBF24", green: "#31c48d" },
+  grid: { line: "#E5E5E5", rowAlt: "#F7F7F7", weekend: "rgba(0,0,0,0.03)" },
+  item: { radius: 3, text: "#374151", selectedRing: "#a3a3a3" },
+  marker: { today: "#FD7171", milestone: "#3B82F6", cursor: "#269bf7" },
+  sidebar: { bg: "#F9FAFB", border: "#E5E7EB", text: "#6c737f" },
+  header: { bg: "#F9FAFB", border: "#E5E7EB", text: "#6c737f" }
+};
+class rt {
+  constructor(e) {
+    Object.defineProperty(this, "visibleTimeStart", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "visibleTimeEnd", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "canvasWidth", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "canvasHeight", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "sidebarWidth", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "lineHeight", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "groupCount", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "buffer", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "scrollTop", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "visibleDuration", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "pixelsPerMs", {
+      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.visibleDuration = this.visibleTimeEnd - this.visibleTimeStart, this.pixelsPerMs = this.canvasWidth / this.visibleDuration;
+  }
+  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;
+  }
+  timeToX(e) {
+    return (e - this.visibleTimeStart) * this.pixelsPerMs;
+  }
+  xToTime(e) {
+    return this.visibleTimeStart + e / this.pixelsPerMs;
+  }
+  yToGroupIndex(e) {
+    const r = Math.floor((e + this.scrollTop) / this.lineHeight);
+    return Math.max(0, Math.min(r, this.groupCount - 1));
+  }
+  groupIndexToY(e) {
+    return e * this.lineHeight - this.scrollTop;
+  }
+  getBufferBounds() {
+    const e = this.visibleDuration * 1.5;
+    return {
+      bufferStart: this.visibleTimeStart - e,
+      bufferEnd: this.visibleTimeEnd + e
+    };
+  }
+  getVisibleGroupRange() {
+    const e = Math.max(0, Math.floor(this.scrollTop / this.lineHeight)), r = Math.ceil(this.canvasHeight / this.lineHeight), s = Math.min(this.groupCount - 1, e + r);
+    return { firstVisible: e, lastVisible: s };
+  }
+  isScrollInBuffer(e) {
+    const r = this.visibleDuration * 1.5 * this.pixelsPerMs;
+    return Math.abs(e) < r;
+  }
+  getTotalHeight() {
+    return this.groupCount * this.lineHeight;
+  }
+}
+class nr {
+  constructor() {
+    Object.defineProperty(this, "root", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    });
+  }
+  buildFromItems(e, r, s) {
+    const l = e.map((u) => ({
+      item: u,
+      start: r(u),
+      end: s(u)
+    }));
+    this.root = this.buildNode(l);
+  }
+  buildNode(e) {
+    if (e.length === 0)
+      return null;
+    let r = 1 / 0, s = -1 / 0;
+    for (const d of e)
+      d.start < r && (r = d.start), d.end > s && (s = d.end);
+    const l = (r + s) / 2, u = [], a = [], v = [];
+    for (const d of e)
+      d.end < l ? u.push(d) : d.start > l ? a.push(d) : v.push(d);
+    return {
+      center: l,
+      left: this.buildNode(u),
+      right: this.buildNode(a),
+      overlapping: v
+    };
+  }
+  query(e, r) {
+    const s = [];
+    return this.queryNode(this.root, e, r, s), s;
+  }
+  queryNode(e, r, s, l) {
+    if (e !== null) {
+      for (const u of e.overlapping)
+        u.start <= s && u.end >= r && l.push(u.item);
+      r <= e.center && e.left !== null && this.queryNode(e.left, r, s, l), s >= e.center && e.right !== null && this.queryNode(e.right, r, s, l);
+    }
+  }
+}
+class or {
+  constructor(e, r) {
+    Object.defineProperty(this, "lineHeight", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "itemHeightRatio", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "layoutCache", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: /* @__PURE__ */ new Map()
+    }), Object.defineProperty(this, "groupMaxStack", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: /* @__PURE__ */ new Map()
+    }), this.lineHeight = e, this.itemHeightRatio = r;
+  }
+  computeLayout(e, r) {
+    if (this.layoutCache = /* @__PURE__ */ new Map(), this.groupMaxStack = /* @__PURE__ */ new Map(), !r) {
+      const u = this.lineHeight * this.itemHeightRatio;
+      for (const a of e)
+        this.layoutCache.set(a.id, { stackLevel: 0, itemHeight: u }), this.groupMaxStack.set(a.group, 0);
+      return this.layoutCache;
+    }
+    const s = /* @__PURE__ */ new Map();
+    for (const u of e) {
+      let a = s.get(u.group);
+      a || (a = [], s.set(u.group, a)), a.push(u);
+    }
+    const l = this.lineHeight * this.itemHeightRatio;
+    for (const [u, a] of s) {
+      a.sort((g, y) => {
+        const p = g.start_time - y.start_time;
+        return p !== 0 ? p : y.end_time - y.start_time - (g.end_time - g.start_time);
+      });
+      const v = [];
+      let d = 0;
+      for (const g of a) {
+        let y = -1;
+        for (let p = 0; p < v.length; p++)
+          if (v[p] <= g.start_time) {
+            y = p;
+            break;
+          }
+        y === -1 ? (y = v.length, v.push(g.end_time)) : v[y] = g.end_time, y > d && (d = y), this.layoutCache.set(g.id, { stackLevel: y, itemHeight: l });
+      }
+      this.groupMaxStack.set(u, d);
+    }
+    return this.layoutCache;
+  }
+  getLayout(e) {
+    return this.layoutCache.get(e);
+  }
+  getGroupHeight(e) {
+    return ((this.groupMaxStack.get(e) ?? 0) + 1) * this.lineHeight;
+  }
+}
+function Fe(t, e, r, s, l, u) {
+  const a = r.xToTime(t), v = /* @__PURE__ */ new Map();
+  for (let p = 0; p < u.length; p++)
+    v.set(u[p].id, p);
+  const d = s.query(a, a);
+  let g = null, y = -1 / 0;
+  for (const p of d) {
+    const M = v.get(p.group);
+    if (M === void 0)
+      continue;
+    const T = l.getLayout(p.id);
+    if (!T)
+      continue;
+    const C = r.timeToX(p.start_time), I = r.timeToX(p.end_time) - C;
+    if (t < C || t > C + I)
+      continue;
+    const E = r.groupIndexToY(M) + T.stackLevel * r.lineHeight + (r.lineHeight - T.itemHeight) / 2, P = T.itemHeight;
+    e < E || e > E + P || E > y && (y = E, g = p);
+  }
+  return g;
+}
+function it(t, e, r) {
+  const s = e.yToGroupIndex(t);
+  return r[s] ?? null;
+}
+function Ct(t, e, r, s = 6) {
+  const l = r.timeToX(e.start_time), u = r.timeToX(e.end_time);
+  return t - l <= s ? "left" : u - t <= s ? "right" : "body";
+}
+function nt(t, e, r) {
+  const s = window.devicePixelRatio || 1, l = Math.round(e * s), u = Math.round(r * s);
+  (t.width !== l || t.height !== u) && (t.width = l, t.height = u, t.style.width = `${e}px`, t.style.height = `${r}px`);
+  const a = t.getContext("2d");
+  return a.setTransform(s, 0, 0, s, 0, 0), a;
+}
+function ot(t, e) {
+  const r = window.devicePixelRatio || 1;
+  t.clearRect(0, 0, e.width / r, e.height / r);
+}
+class sr {
+  constructor(e) {
+    Object.defineProperty(this, "dirty", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: { grid: !1, items: !1, overlay: !1 }
+    }), Object.defineProperty(this, "rafId", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), Object.defineProperty(this, "drawCallback", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.drawCallback = e;
+  }
+  markDirty(e) {
+    this.dirty[e] = !0, this.schedule();
+  }
+  markAllDirty() {
+    this.dirty.grid = !0, this.dirty.items = !0, this.dirty.overlay = !0, this.schedule();
+  }
+  dispose() {
+    this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null);
+  }
+  schedule() {
+    this.rafId === null && (this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      const e = { ...this.dirty };
+      this.dirty.grid = !1, this.dirty.items = !1, this.dirty.overlay = !1, this.drawCallback(e);
+    }));
+  }
+}
+class lr {
+  draw(e, r, s, l, u, a) {
+    const { firstVisible: v, lastVisible: d } = r.getVisibleGroupRange();
+    for (let E = v; E <= d; E++) {
+      const P = r.groupIndexToY(E), X = s[E];
+      if (!X)
+        continue;
+      let j;
+      const G = a == null ? void 0 : a(X);
+      G != null && G.backgroundColor ? j = G.backgroundColor : j = E % 2 === 0 ? "#FFFFFF" : l.grid.rowAlt, e.fillStyle = j, e.fillRect(0, P, r.canvasWidth, r.lineHeight), e.strokeStyle = (G == null ? void 0 : G.borderBottomColor) ?? l.grid.line, e.lineWidth = 0.5, e.beginPath(), e.moveTo(0, P + r.lineHeight), e.lineTo(r.canvasWidth, P + r.lineHeight), e.stroke();
+    }
+    const g = r.visibleTimeStart, y = r.visibleTimeEnd, T = 864e5 / (y - g) * r.canvasWidth;
+    let C = "day";
+    T < 2 ? C = "month" : T < 8 && (C = "week");
+    {
+      let E = ne(g).startOf("day");
+      const P = ne(y).endOf("day");
+      let X = null, j = 1, G = 0;
+      const W = [], le = (V) => {
+        X !== null && (e.fillStyle = X, j !== 1 && (e.globalAlpha = j), e.fillRect(G, 0, V - G, r.canvasHeight), j !== 1 && (e.globalAlpha = 1), X = null, j = 1);
+      };
+      for (; E.isBefore(P); ) {
+        const V = r.timeToX(E.valueOf()), He = E.toDate(), q = u == null ? void 0 : u(He);
+        let oe = null, ae = 1;
+        if (q != null && q.backgroundColor)
+          oe = q.backgroundColor, ae = q.opacity ?? 1;
+        else {
+          const pe = E.day();
+          (pe === 0 || pe === 6) && (oe = l.grid.weekend);
+        }
+        q != null && q.borderColor && W.push({ x: V, color: q.borderColor }), oe === X && ae === j || (le(V), oe !== null && (X = oe, j = ae, G = V)), E = E.add(1, "day");
+      }
+      X !== null && le(r.timeToX(E.valueOf()));
+      for (const V of W)
+        e.strokeStyle = V.color, e.lineWidth = 0.5, e.beginPath(), e.moveTo(V.x, 0), e.lineTo(V.x, r.canvasHeight), e.stroke();
+    }
+    let I = ne(g).startOf(C);
+    const B = ne(y).add(1, C);
+    for (e.strokeStyle = l.grid.line, e.lineWidth = 0.5, e.beginPath(); I.isBefore(B); ) {
+      const E = r.timeToX(I.valueOf());
+      e.moveTo(E, 0), e.lineTo(E, r.canvasHeight), I = I.add(1, C);
+    }
+    e.stroke();
+  }
+}
+const Mt = '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+function Bt(t, e) {
+  return {
+    /**
+     * Draws a filled rounded rectangle.
+     * Default corner radius is 3px.
+     */
+    roundRect(r, s, l, u, a = 3) {
+      t.beginPath(), t.roundRect(r, s, l, u, a), t.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(r, s, l, u) {
+      if (t.font = Mt, u !== void 0 && t.measureText(r).width > u) {
+        let a = 0, v = r.length;
+        for (; a < v; ) {
+          const d = Math.ceil((a + v) / 2), g = r.slice(0, d) + "...";
+          t.measureText(g).width <= u ? a = d : v = d - 1;
+        }
+        t.fillText(r.slice(0, a) + "...", s, l);
+      } else
+        t.fillText(r, s, l);
+    },
+    /**
+     * Creates a 50/50 linear gradient from color1 (0%–50%) to color2 (50%–100%)
+     * spanning the given x position and width.
+     */
+    gradient(r, s, l, u) {
+      const a = t.createLinearGradient(r, 0, r + s, 0);
+      return a.addColorStop(0, l), a.addColorStop(0.5, l), a.addColorStop(0.5, u), a.addColorStop(1, u), a;
+    },
+    /**
+     * Draws a vertical colored bar on the left edge of the item bounds.
+     * Does nothing if no bounds were provided.
+     */
+    leftBar(r, s = 3) {
+      e && (t.save(), t.fillStyle = r, t.fillRect(e.x, e.y, s, e.height), t.restore());
+    },
+    /**
+     * Draws a vector icon centered at (x, y).
+     * Supported types: 'check', 'danger-red', 'danger-yellow'.
+     * Default size is 14px.
+     */
+    icon(r, s, l, u = 14) {
+      t.save();
+      const a = u / 2;
+      if (r === "check") {
+        t.fillStyle = "#31c48d", t.beginPath(), t.arc(s + a, l + a, a, 0, Math.PI * 2), t.fill(), t.strokeStyle = "#ffffff", t.lineWidth = u * 0.12, t.beginPath();
+        const v = s + a, d = l + a;
+        t.moveTo(v - a * 0.45, d), t.lineTo(v - a * 0.1, d + a * 0.42), t.lineTo(v + a * 0.45, d - a * 0.35), t.stroke();
+      } else if (r === "danger-red" || r === "danger-yellow") {
+        const v = r === "danger-red" ? "#EF5350" : "#FBBF24";
+        t.fillStyle = v, t.beginPath(), t.moveTo(s + a, l), t.lineTo(s + u, l + u), t.lineTo(s, l + u), t.closePath(), t.fill(), t.fillStyle = "#ffffff";
+        const d = u * 0.12, g = s + a - d / 2;
+        t.fillRect(g, l + u * 0.35, d, u * 0.35), t.beginPath(), t.arc(s + a, l + u * 0.82, d * 0.7, 0, Math.PI * 2), t.fill();
+      }
+      t.restore();
+    },
+    /**
+     * Draws a pill-shaped badge with centered white text on a colored background.
+     */
+    badge(r, s, l, u) {
+      t.save(), t.font = Mt;
+      const v = t.measureText(r).width, d = 8, y = 12 + 3 * 2, p = v + d * 2, M = y / 2;
+      t.fillStyle = u, t.beginPath(), t.roundRect(s, l, p, y, M), t.fill(), t.fillStyle = "#ffffff", t.textAlign = "center", t.textBaseline = "middle", t.fillText(r, s + p / 2, l + y / 2), t.restore();
+    }
+  };
+}
+class ar {
+  draw(e, r, s, l, u, a, v, d, g, y, p, M) {
+    const T = (r.visibleTimeEnd - r.visibleTimeStart) * 0.1, C = r.visibleTimeStart - T, I = r.visibleTimeEnd + T, B = u.query(C, I), E = /* @__PURE__ */ new Map();
+    for (let W = 0; W < s.length; W++)
+      E.set(s[W].id, W);
+    const P = new Set(y), X = /* @__PURE__ */ new Map(), j = -r.lineHeight, G = r.canvasHeight + r.lineHeight;
+    for (const W of B) {
+      const le = E.get(W.group);
+      if (le === void 0)
+        continue;
+      const V = a.getLayout(W.id);
+      if (!V)
+        continue;
+      const q = r.groupIndexToY(le) + V.stackLevel * r.lineHeight + (r.lineHeight - V.itemHeight) / 2, oe = V.itemHeight;
+      if (q + oe < j || q > G)
+        continue;
+      const ae = r.timeToX(W.start_time), pe = r.timeToX(W.end_time) - ae, ke = { x: ae, y: q, width: pe, height: oe };
+      X.set(W.id, ke);
+      const Be = {
+        selected: P.has(W.id),
+        hovered: p === W.id,
+        dragging: !1,
+        filtered: W.filtered !== !1
+      };
+      e.save();
+      const We = Bt(e, ke);
+      (d && (W.type === "control_area_group" || W.type === "construction_train") ? d : v)(e, W, ke, Be, We), e.restore();
+    }
+    M && M.length > 0 && this.drawDependencies(e, M, X, p, g);
+  }
+  drawDependencies(e, r, s, l, u) {
+    for (const a of r) {
+      const v = s.get(a.fromItemId), d = s.get(a.toItemId);
+      if (!v || !d)
+        continue;
+      const g = l === a.fromItemId || l === a.toItemId;
+      e.strokeStyle = g ? u.primary : a.color ?? "#94A3B8", e.lineWidth = g ? 2 : 1.5, e.setLineDash([]);
+      const y = v.x + v.width, p = v.y + v.height / 2, M = d.x, T = d.y + d.height / 2, C = Math.abs(M - y), I = Math.max(C * 0.4, 30);
+      e.beginPath(), e.moveTo(y, p), e.bezierCurveTo(y + I, p, M - I, T, M, T), e.stroke();
+      const B = 6;
+      e.fillStyle = e.strokeStyle, e.beginPath(), e.moveTo(M, T), e.lineTo(M - B, T - B / 2), e.lineTo(M - B, T + B / 2), e.closePath(), e.fill();
+    }
+  }
+}
+class ur {
+  draw(e, r, s, l) {
+    const { cursorX: u, snapX: a, markers: v, interaction: d } = l;
+    if (v)
+      for (const g of v) {
+        const y = r.timeToX(g.date);
+        if (e.fillStyle = g.color, e.fillRect(y - g.width / 2, 0, g.width, r.canvasHeight), g.label) {
+          e.save(), e.font = '500 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+          const p = e.measureText(g.label).width, M = 8, T = 200, C = Math.min(p + M * 2, T), I = 20, B = y - C / 2, E = 4;
+          e.fillStyle = g.color, e.beginPath(), e.roundRect(B, E, C, I, 3), e.fill(), e.fillStyle = "#FFFFFF", e.textBaseline = "middle";
+          const P = T - M * 2, X = p > P ? g.label.slice(0, Math.floor(g.label.length * P / p)) + "…" : g.label;
+          e.fillText(X, B + M, E + I / 2), e.restore();
+        }
+      }
+    if (u != null && (e.strokeStyle = s.marker.cursor, e.lineWidth = 1, e.beginPath(), e.moveTo(u, 0), e.lineTo(u, r.canvasHeight), e.stroke()), a != null && (e.strokeStyle = s.primary, e.lineWidth = 1, e.setLineDash([4, 4]), e.beginPath(), e.moveTo(a, 0), e.lineTo(a, r.canvasHeight), e.stroke(), e.setLineDash([])), d) {
+      d.groupChanged && d.targetGroupY !== void 0 && (e.fillStyle = "rgba(59, 130, 246, 0.08)", e.fillRect(0, d.targetGroupY, r.canvasWidth, r.lineHeight)), e.save(), e.globalAlpha = 0.5;
+      const g = Bt(e, d.bounds);
+      d.renderer(e, d.item, d.bounds, { selected: !1, hovered: !1, dragging: !0, filtered: !0 }, g), e.restore();
+    }
+  }
+}
+const Ht = 120;
+function cr(t) {
+  let e = t.deltaY || t.deltaX;
+  return t.deltaMode === 1 ? e *= 15 : t.deltaMode === 2 && (e *= 800), Math.max(-Ht, Math.min(Ht, e));
+}
+class dr {
+  constructor(e, r, s, l, u) {
+    Object.defineProperty(this, "onZoom", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "visibleTimeStart", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "visibleTimeEnd", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "minZoom", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "maxZoom", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.onZoom = e, this.visibleTimeStart = r, this.visibleTimeEnd = s, this.minZoom = l, this.maxZoom = u;
+  }
+  updateBounds(e, r) {
+    this.visibleTimeStart = e, this.visibleTimeEnd = r;
+  }
+  handleWheelZoom(e, r) {
+    const s = cr(e), l = e.ctrlKey ? 10 : e.metaKey ? 3 : 1, u = s > 0 ? 1 + l * s / 500 : 1 / (1 + l * -s / 500), a = this.visibleTimeEnd - this.visibleTimeStart;
+    let v = Math.round(a * u);
+    v = Math.max(this.minZoom, Math.min(this.maxZoom, v));
+    const d = Math.round(this.visibleTimeStart + (a - v) * r), g = d + v;
+    this.onZoom(d, g);
+  }
+}
+const hr = 4;
+class fr {
+  constructor(e) {
+    Object.defineProperty(this, "state", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), Object.defineProperty(this, "dragSnap", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "activated", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: !1
+    }), this.dragSnap = e;
+  }
+  startInteraction(e, r, s, l) {
+    this.state = {
+      item: e,
+      mode: r,
+      startX: s,
+      startY: l,
+      currentX: s,
+      currentY: l,
+      deltaX: 0,
+      originalGroup: e.group,
+      currentGroup: e.group
+    }, this.activated = !1;
+  }
+  update(e, r) {
+    this.state && (this.state.currentX = e, this.state.currentY = r, this.state.deltaX = e - this.state.startX, !this.activated && Math.abs(this.state.deltaX) >= hr && (this.activated = !0));
+  }
+  setCurrentGroup(e) {
+    this.state && (this.state.currentGroup = e);
+  }
+  endMove(e) {
+    if (!this.state)
+      return null;
+    const r = this.state.deltaX / e, s = this.state.item.start_time + r, l = Math.round(s / this.dragSnap) * this.dragSnap, u = this.state.currentGroup;
+    return this.state = null, this.activated = !1, { newStartTime: l, newGroupId: u };
+  }
+  endResize(e) {
+    if (!this.state)
+      return null;
+    const r = this.state.deltaX / e, s = this.state.mode === "resize-left" ? "left" : "right", u = (s === "left" ? this.state.item.start_time : this.state.item.end_time) + r, a = Math.round(u / this.dragSnap) * this.dragSnap;
+    return this.state = null, this.activated = !1, { newTime: a, edge: s };
+  }
+  cancel() {
+    this.state = null, this.activated = !1;
+  }
+  getState() {
+    return this.state;
+  }
+  getMode() {
+    var e;
+    return ((e = this.state) == null ? void 0 : e.mode) ?? null;
+  }
+  isActive() {
+    return this.state !== null && this.activated;
+  }
+  isPending() {
+    return this.state !== null;
+  }
+}
+var Wt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Xt(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var Lt = { exports: {} };
+(function(t, e) {
+  (function(r, s) {
+    t.exports = s();
+  })(Wt, function() {
+    var r = "day";
+    return function(s, l, u) {
+      var a = function(g) {
+        return g.add(4 - g.isoWeekday(), r);
+      }, v = l.prototype;
+      v.isoWeekYear = function() {
+        return a(this).year();
+      }, v.isoWeek = function(g) {
+        if (!this.$utils().u(g)) return this.add(7 * (g - this.isoWeek()), r);
+        var y, p, M, T, C = a(this), I = (y = this.isoWeekYear(), p = this.$u, M = (p ? u.utc : u)().year(y).startOf("year"), T = 4 - M.isoWeekday(), M.isoWeekday() > 4 && (T += 7), M.add(T, r));
+        return C.diff(I, "week") + 1;
+      }, v.isoWeekday = function(g) {
+        return this.$utils().u(g) ? this.day() || 7 : this.day(this.day() % 7 ? g : g - 7);
+      };
+      var d = v.startOf;
+      v.startOf = function(g, y) {
+        var p = this.$utils(), M = !!p.u(y) || y;
+        return p.p(g) === "isoweek" ? M ? this.date(this.date() - (this.isoWeekday() - 1)).startOf("day") : this.date(this.date() - 1 - (this.isoWeekday() - 1) + 7).endOf("day") : d.bind(this)(g, y);
+      };
+    };
+  });
+})(Lt);
+var mr = Lt.exports;
+const gr = /* @__PURE__ */ Xt(mr), Rt = 5;
+function Dt({ groups: t, width: e, lineHeight: r, scrollTop: s, canvasHeight: l, theme: u, groupRenderer: a, onScroll: v }) {
+  var B;
+  const d = L(null), g = L(!1), y = t.length * r, p = l, M = Math.max(0, Math.floor(s / r) - Rt), T = Math.min(t.length - 1, Math.ceil((s + l) / r) + Rt), C = $((E) => {
+    g.current || v(E.currentTarget.scrollTop);
+  }, [v]);
+  re(() => {
+    d.current && (g.current = !0, d.current.scrollTop = s, requestAnimationFrame(() => {
+      g.current = !1;
+    }));
+  }, [s]);
+  const I = [];
+  for (let E = M; E <= T; E++) {
+    const P = t[E];
+    P && I.push(Z("div", { style: {
+      position: "absolute",
+      top: E * r,
+      height: r,
+      width: "100%",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "stretch",
+      borderBottom: `1px solid ${((B = u.grid) == null ? void 0 : B.line) ?? "#E5E5E5"}`,
+      boxSizing: "border-box"
+    }, children: a(P) }, P.id));
+  }
+  return Z("div", { ref: d, onScroll: C, style: {
+    width: e,
+    height: p,
+    overflowY: y > l ? "auto" : "hidden",
+    overflowX: "hidden",
+    position: "relative",
+    borderRight: `1px solid ${u.sidebar.border}`,
+    backgroundColor: u.sidebar.bg
+  }, children: Z("div", { style: { height: y, position: "relative" }, children: I }) });
+}
+function vr(t) {
+  return null;
+}
+vr.displayName = "TodayMarker";
+function It(t) {
+  return { date: Math.floor(Date.now() / 6e4) * 6e4, color: t.color ?? "#FD7171", width: t.width ?? 6, label: t.label };
+}
+function br(t) {
+  return t.interval ?? 1e4;
+}
+function pr(t) {
+  return null;
+}
+pr.displayName = "CustomMarker";
+function Pt(t) {
+  return {
+    date: t.date,
+    color: t.color ?? "#3B82F6",
+    width: t.width ?? 4,
+    label: t.label
+  };
+}
+ne.extend(gr);
+function yr(t) {
+  return t ? {
+    ...be,
+    ...t,
+    status: { ...be.status, ...t.status },
+    grid: { ...be.grid, ...t.grid },
+    item: { ...be.item, ...t.item },
+    marker: { ...be.marker, ...t.marker },
+    sidebar: { ...be.sidebar, ...t.sidebar },
+    header: { ...be.header, ...t.header }
+  } : be;
+}
+const Ot = 32, Fr = ie.memo(tr(function(e, r) {
+  const { groups: s, items: l, defaultTimeStart: u, defaultTimeEnd: a, sidebarWidth: v, lineHeight: d, itemHeightRatio: g, stackItems: y, canMove: p, canChangeGroup: M, canResize: T, dragSnap: C, minZoom: I, maxZoom: B, theme: E, dayStyle: P, rowStyle: X, showCursorLine: j, itemRenderer: G, groupRenderer: W, sidebarGroupRenderer: le, dependencies: V, onItemClick: He, onItemDoubleClick: q, onItemContextMenu: oe, onItemMove: ae, onItemResize: pe, moveResizeValidator: ke, onItemHover: Be, onCanvasDoubleClick: We, onCanvasContextMenu: Ne, onTimeChange: st, onZoom: lt, selected: at = [], rightSidebarWidth: Ge, rightSidebarGroupRenderer: ut, onReady: Xe, children: he } = e, ye = Q(() => yr(E), [E]), ct = $((o, i) => {
+    for (let c = 0; c < i.length; c++)
+      if (i[c].id === o)
+        return c;
+    return 0;
+  }, []), xt = at.join(","), ze = Q(() => at, [xt]), dt = L(null), ht = L(null), ft = L(null), Re = L(null), mt = L(null), At = L(null), [gt, Yt] = Ye({ width: 800, height: 600 });
+  re(() => {
+    const o = mt.current;
+    if (!o)
+      return;
+    const i = new ResizeObserver((c) => {
+      const f = c[0];
+      f && Yt({ width: f.contentRect.width, height: f.contentRect.height });
+    });
+    return i.observe(o), () => i.disconnect();
+  }, []);
+  const fe = Math.max(0, gt.width - v - (Ge ?? 0)), me = s.length * d || gt.height, R = L(new rt({
+    visibleTimeStart: e.visibleTimeStart ?? u,
+    visibleTimeEnd: e.visibleTimeEnd ?? a,
+    canvasWidth: fe,
+    canvasHeight: me,
+    sidebarWidth: v,
+    lineHeight: d,
+    groupCount: s.length,
+    buffer: e.buffer ?? 3,
+    scrollTop: 0
+  })), $e = L(null), De = L(void 0), [vt, jt] = Ye(e.visibleTimeStart ?? u), [bt, Nt] = Ye(e.visibleTimeEnd ?? a), [pt, Le] = Ye(0), Ie = L(null), we = $(() => {
+    const o = R.current;
+    jt(o.visibleTimeStart), Nt(o.visibleTimeEnd), Le(o.scrollTop), Ie.current = null;
+  }, []), Ve = $(() => {
+    Ie.current === null && (Ie.current = setTimeout(we, Ot));
+  }, [we]);
+  re(() => () => {
+    Ie.current !== null && clearTimeout(Ie.current);
+  }, []);
+  const Ze = Q(() => {
+    const o = new nr();
+    return o.buildFromItems(l, (i) => i.start_time, (i) => i.end_time), o;
+  }, [l]), qe = Q(() => {
+    const o = new or(d, g);
+    return o.computeLayout(l, y), o;
+  }, [l, d, g, y]), Se = Q(() => new lr(), []), Ee = Q(() => new ar(), []), Ce = Q(() => new ur(), []), N = Q(() => new fr(C), [C]), _e = Q(() => {
+    const o = [];
+    return ie.Children.forEach(he, (i) => {
+      var f;
+      if (!ie.isValidElement(i))
+        return;
+      const c = (f = i.type) == null ? void 0 : f.displayName;
+      c === "TodayMarker" ? o.push(It(i.props)) : c === "CustomMarker" && o.push(Pt(i.props));
+    }), o;
+  }, [he]), xe = Q(() => _e.map((o) => `${o.date}|${o.color}|${o.width}|${o.label ?? ""}`).join(";"), [_e]), Pe = L(_e);
+  Pe.current = _e;
+  const Ue = Q(() => {
+    let o = 0;
+    return ie.Children.forEach(he, (i) => {
+      var f;
+      if (!ie.isValidElement(i))
+        return;
+      ((f = i.type) == null ? void 0 : f.displayName) === "TodayMarker" && (o = br(i.props));
+    }), o;
+  }, [he]), O = L({
+    groups: s,
+    items: l,
+    intervalTree: Ze,
+    layoutEngine: qe,
+    itemRenderer: G,
+    groupRenderer: W,
+    theme: ye,
+    selected: ze,
+    dependencies: V,
+    dayStyle: P,
+    rowStyle: X,
+    showCursorLine: j,
+    canvasWidth: fe,
+    canvasHeight: me,
+    lineHeight: d,
+    itemHeightRatio: g,
+    onTimeChange: st,
+    onZoom: lt,
+    onItemHover: Be,
+    onItemClick: He,
+    onItemDoubleClick: q,
+    onItemContextMenu: oe,
+    onItemMove: ae,
+    onItemResize: pe,
+    onCanvasDoubleClick: We,
+    onCanvasContextMenu: Ne,
+    canMove: p,
+    canResize: T,
+    canChangeGroup: M,
+    dragSnap: C,
+    sidebarWidth: v,
+    moveResizeValidator: ke
+  });
+  O.current = {
+    groups: s,
+    items: l,
+    intervalTree: Ze,
+    layoutEngine: qe,
+    itemRenderer: G,
+    groupRenderer: W,
+    theme: ye,
+    selected: ze,
+    dependencies: V,
+    dayStyle: P,
+    rowStyle: X,
+    showCursorLine: j,
+    canvasWidth: fe,
+    canvasHeight: me,
+    lineHeight: d,
+    itemHeightRatio: g,
+    onTimeChange: st,
+    onZoom: lt,
+    onItemHover: Be,
+    onItemClick: He,
+    onItemDoubleClick: q,
+    onItemContextMenu: oe,
+    onItemMove: ae,
+    onItemResize: pe,
+    onCanvasDoubleClick: We,
+    onCanvasContextMenu: Ne,
+    canMove: p,
+    canResize: T,
+    canChangeGroup: M,
+    dragSnap: C,
+    sidebarWidth: v,
+    moveResizeValidator: ke
+  };
+  const Gt = $(() => {
+    const o = dt.current;
+    if (!o)
+      return;
+    const i = O.current, c = nt(o, i.canvasWidth, i.canvasHeight);
+    ot(c, o), Se.draw(c, R.current, i.groups, i.theme, i.dayStyle, i.rowStyle);
+  }, [Se]), zt = $(() => {
+    const o = ht.current;
+    if (!o)
+      return;
+    const i = O.current, c = nt(o, i.canvasWidth, i.canvasHeight);
+    ot(c, o), Ee.draw(c, R.current, i.groups, i.items, i.intervalTree, i.layoutEngine, i.itemRenderer, i.groupRenderer, i.theme, i.selected, De.current, i.dependencies);
+  }, [Ee]), yt = $((o, i) => {
+    const c = R.current, f = O.current, n = f.canvasWidth / (c.visibleTimeEnd - c.visibleTimeStart), h = i / n, b = o.start_time + h, k = Math.round(b / f.dragSnap) * f.dragSnap;
+    return c.timeToX(k);
+  }, []), $t = $(() => {
+    const o = ft.current;
+    if (!o)
+      return;
+    const i = O.current, c = nt(o, i.canvasWidth, i.canvasHeight);
+    ot(c, o);
+    const f = R.current, n = N.getState();
+    let h = null;
+    if (n) {
+      const b = f.timeToX(n.item.start_time), k = f.timeToX(n.item.end_time) - b;
+      let H, D;
+      n.mode === "resize-left" ? (H = b + n.deltaX, D = k - n.deltaX) : n.mode === "resize-right" ? (H = b, D = k + n.deltaX) : (H = b + n.deltaX, D = k);
+      const x = ct(n.currentGroup, i.groups), z = f.groupIndexToY(x), A = n.currentGroup !== n.originalGroup;
+      h = {
+        item: n.item,
+        mode: n.mode,
+        bounds: { x: H, y: z + (i.lineHeight - i.lineHeight * i.itemHeightRatio) / 2, width: D, height: i.lineHeight * i.itemHeightRatio },
+        renderer: i.itemRenderer,
+        targetGroupY: z,
+        groupChanged: A
+      };
+    }
+    Ce.draw(c, f, i.theme, {
+      cursorX: i.showCursorLine ? $e.current : null,
+      snapX: n ? yt(n.item, n.deltaX) : null,
+      markers: Pe.current,
+      interaction: h
+    });
+  }, [Ce, N, yt, ct]), Ke = L(null);
+  Ke.current || (Ke.current = new sr((o) => {
+    o.grid && Gt(), o.items && zt(), o.overlay && $t();
+  }));
+  const S = Ke.current;
+  re(() => () => S.dispose(), [S]), re(() => {
+    if (!Ue)
+      return;
+    const o = setInterval(() => {
+      const i = [];
+      ie.Children.forEach(he, (c) => {
+        var n;
+        if (!ie.isValidElement(c))
+          return;
+        const f = (n = c.type) == null ? void 0 : n.displayName;
+        f === "TodayMarker" ? i.push(It(c.props)) : f === "CustomMarker" && i.push(Pt(c.props));
+      }), Pe.current = i, S.markDirty("overlay");
+    }, Ue);
+    return () => clearInterval(o);
+  }, [Ue, he, S]), re(() => {
+    R.current.update({ canvasWidth: fe, canvasHeight: me, sidebarWidth: v, lineHeight: d, groupCount: s.length }), S.markAllDirty();
+  }, [fe, me, v, d, s.length, S]), re(() => {
+    S.markDirty("grid"), S.markDirty("items");
+  }, [l, s, ze, ye, P, X, Ze, qe, S]);
+  const Tt = L(xe);
+  re(() => {
+    xe !== Tt.current && (Tt.current = xe, S.markDirty("overlay"));
+  }, [xe, S]);
+  const kt = L(e.visibleTimeStart), wt = L(e.visibleTimeEnd);
+  e.visibleTimeStart !== void 0 && e.visibleTimeStart !== kt.current && (kt.current = e.visibleTimeStart, R.current.update({ visibleTimeStart: e.visibleTimeStart }), S.markAllDirty()), e.visibleTimeEnd !== void 0 && e.visibleTimeEnd !== wt.current && (wt.current = e.visibleTimeEnd, R.current.update({ visibleTimeEnd: e.visibleTimeEnd }), S.markAllDirty());
+  const Oe = L(null), Je = $((o) => {
+    Oe.current === null && (Oe.current = setTimeout(() => {
+      var f, n;
+      Oe.current = null;
+      const i = R.current, c = O.current;
+      o === "zoom" ? (f = c.onZoom) == null || f.call(c, i.visibleTimeStart, i.visibleTimeEnd) : (n = c.onTimeChange) == null || n.call(c, i.visibleTimeStart, i.visibleTimeEnd);
+    }, Ot));
+  }, []);
+  re(() => () => {
+    Oe.current !== null && clearTimeout(Oe.current);
+  }, []);
+  const Ae = L(null), Qe = Q(() => new dr((o, i) => {
+    var c;
+    R.current.update({ visibleTimeStart: o, visibleTimeEnd: i }), (c = Ae.current) == null || c.updateBounds(o, i), S.markAllDirty(), Ve(), Je("zoom");
+  }, u, a, I, B), []);
+  Ae.current = Qe;
+  const St = $((o) => {
+    const i = R.current, c = i.groupCount * i.lineHeight, f = Math.max(0, c - i.canvasHeight), n = Math.max(0, Math.min(f, i.scrollTop + o));
+    n !== i.scrollTop && (i.update({ scrollTop: n }), S.markDirty("grid"), S.markDirty("items"), S.markDirty("overlay"), Le(n));
+  }, [S]), et = $((o) => {
+    var b, k, H;
+    const i = R.current, c = i.canvasWidth / (i.visibleTimeEnd - i.visibleTimeStart), f = o / c, n = i.visibleTimeStart + f, h = i.visibleTimeEnd + f;
+    i.update({ visibleTimeStart: n, visibleTimeEnd: h }), (b = Ae.current) == null || b.updateBounds(n, h), S.markAllDirty(), ir(() => we()), (H = (k = O.current).onTimeChange) == null || H.call(k, n, h);
+  }, [S, we]);
+  re(() => {
+    const o = Re.current;
+    if (!o)
+      return;
+    const i = (c) => {
+      if (c.ctrlKey || c.metaKey || c.altKey) {
+        c.preventDefault();
+        const f = o.getBoundingClientRect(), n = (c.clientX - f.left) / f.width;
+        Qe.handleWheelZoom(c, n);
+      } else if (c.shiftKey)
+        c.preventDefault(), et(c.deltaY);
+      else {
+        const f = c.deltaX;
+        f !== 0 && Math.abs(f) > Math.abs(c.deltaY) ? (c.preventDefault(), et(f)) : c.deltaY !== 0 && St(c.deltaY);
+      }
+    };
+    return o.addEventListener("wheel", i, { passive: !1 }), () => o.removeEventListener("wheel", i);
+  }, [Qe, St, et]);
+  const ge = L({ lastDistance: null, lastCenter: null });
+  re(() => {
+    const o = Re.current;
+    if (!o)
+      return;
+    const i = (b, k) => Math.abs(b.clientX - k.clientX), c = (b, k, H) => (b.clientX + k.clientX) / 2 - H.left, f = (b) => {
+      b.touches.length === 2 && (b.preventDefault(), ge.current.lastDistance = i(b.touches[0], b.touches[1]), ge.current.lastCenter = null);
+    }, n = (b) => {
+      var k;
+      if (b.touches.length === 2 && ge.current.lastDistance !== null) {
+        b.preventDefault();
+        const H = i(b.touches[0], b.touches[1]), D = o.getBoundingClientRect(), z = c(b.touches[0], b.touches[1], D) / D.width;
+        if (H !== 0 && ge.current.lastDistance !== 0) {
+          const A = ge.current.lastDistance / H, ee = R.current, U = ee.visibleTimeEnd - ee.visibleTimeStart;
+          let w = U * A;
+          w = Math.max(I, Math.min(B, w));
+          const m = ee.visibleTimeStart + U * z, te = m - w * z, _ = m + w * (1 - z);
+          ee.update({ visibleTimeStart: te, visibleTimeEnd: _ }), (k = Ae.current) == null || k.updateBounds(te, _), S.markAllDirty(), Ve(), Je("zoom");
+        }
+        ge.current.lastDistance = H;
+      }
+    }, h = () => {
+      ge.current.lastDistance = null, ge.current.lastCenter = null;
+    };
+    return o.addEventListener("touchstart", f, { passive: !1 }), o.addEventListener("touchmove", n, { passive: !1 }), o.addEventListener("touchend", h), () => {
+      o.removeEventListener("touchstart", f), o.removeEventListener("touchmove", n), o.removeEventListener("touchend", h);
+    };
+  }, [S, Ve, Je]);
+  const Vt = $((o) => {
+    var H;
+    const i = o.currentTarget, c = i.getBoundingClientRect(), f = o.clientX - c.left, n = o.clientY - c.top;
+    if ($e.current = f, N.isPending()) {
+      if (N.update(f, n), N.isActive()) {
+        const D = N.getState();
+        if (D && D.mode === "move" && O.current.canChangeGroup) {
+          const x = it(n, R.current, O.current.groups);
+          x && N.setCurrentGroup(x.id);
+        }
+        S.markDirty("overlay");
+      }
+      return;
+    }
+    O.current.showCursorLine && S.markDirty("overlay");
+    const h = O.current, b = Fe(f, n, R.current, h.intervalTree, h.layoutEngine, h.groups), k = b == null ? void 0 : b.id;
+    if (k !== De.current && (De.current = k, S.markDirty("items"), (H = h.onItemHover) == null || H.call(h, k ?? null, o.nativeEvent)), b) {
+      const D = Ct(f, b, R.current), x = h.canResize;
+      D === "left" && (x === "left" || x === "both") || D === "right" && (x === "right" || x === "both") ? i.style.cursor = "col-resize" : h.canMove ? i.style.cursor = "grab" : i.style.cursor = "default";
+    } else
+      i.style.cursor = "default";
+  }, [N, S]), Zt = $((o) => {
+    const i = O.current, c = o.currentTarget.getBoundingClientRect(), f = o.clientX - c.left, n = o.clientY - c.top, h = Fe(f, n, R.current, i.intervalTree, i.layoutEngine, i.groups);
+    if (!h)
+      return;
+    const b = Ct(f, h, R.current), k = i.canResize;
+    b === "left" && (k === "left" || k === "both") ? N.startInteraction(h, "resize-left", f, n) : b === "right" && (k === "right" || k === "both") ? N.startInteraction(h, "resize-right", f, n) : i.canMove && N.startInteraction(h, "move", f, n);
+  }, [N]), qt = $((o) => {
+    var b, k, H, D, x, z;
+    const i = o.currentTarget;
+    if (N.isActive()) {
+      const A = N.getState(), ee = R.current, U = ee.canvasWidth / (ee.visibleTimeEnd - ee.visibleTimeStart);
+      if (A) {
+        const w = O.current.moveResizeValidator;
+        if (A.mode === "move") {
+          const m = N.endMove(U);
+          if (m) {
+            const te = w ? w("move", A.item.id, m.newStartTime) : m.newStartTime;
+            (k = (b = O.current).onItemMove) == null || k.call(b, A.item.id, te, m.newGroupId);
+          }
+        } else {
+          const m = N.endResize(U);
+          if (m) {
+            const te = w ? w("resize", A.item.id, m.newTime, m.edge) : m.newTime;
+            (D = (H = O.current).onItemResize) == null || D.call(H, A.item.id, te, m.edge);
+          }
+        }
+      }
+      i.style.cursor = "default", S.markDirty("overlay");
+      return;
+    }
+    N.isPending() && N.cancel();
+    const c = i.getBoundingClientRect(), f = o.clientX - c.left, n = o.clientY - c.top, h = Fe(f, n, R.current, O.current.intervalTree, O.current.layoutEngine, O.current.groups);
+    h && ((z = (x = O.current).onItemClick) == null || z.call(x, h.id, o.nativeEvent));
+  }, [N, S]), Ut = $((o) => {
+    var b, k;
+    const i = o.currentTarget.getBoundingClientRect(), c = o.clientX - i.left, f = o.clientY - i.top, n = O.current, h = Fe(c, f, R.current, n.intervalTree, n.layoutEngine, n.groups);
+    if (h)
+      (b = n.onItemDoubleClick) == null || b.call(n, h.id, o.nativeEvent);
+    else {
+      const H = it(f, R.current, n.groups), D = R.current.xToTime(c);
+      H && ((k = n.onCanvasDoubleClick) == null || k.call(n, H.id, D));
+    }
+  }, []), Kt = $((o) => {
+    var b, k;
+    o.preventDefault();
+    const i = o.currentTarget.getBoundingClientRect(), c = o.clientX - i.left, f = o.clientY - i.top, n = O.current, h = Fe(c, f, R.current, n.intervalTree, n.layoutEngine, n.groups);
+    if (h)
+      (b = n.onItemContextMenu) == null || b.call(n, h.id, o.nativeEvent);
+    else {
+      const H = it(f, R.current, n.groups), D = R.current.xToTime(c);
+      H && ((k = n.onCanvasContextMenu) == null || k.call(n, H.id, D, o.nativeEvent));
+    }
+  }, []), Jt = $(() => {
+    var o, i;
+    $e.current = null, Re.current && (Re.current.style.cursor = "default"), De.current !== void 0 && (De.current = void 0, S.markDirty("items"), (i = (o = O.current).onItemHover) == null || i.call(o, null, new PointerEvent("pointerleave"))), O.current.showCursorLine && S.markDirty("overlay");
+  }, [S]), Qt = Q(() => {
+    const o = [];
+    return ie.Children.forEach(he, (i) => {
+      var f;
+      if (!ie.isValidElement(i))
+        return;
+      if (((f = i.type) == null ? void 0 : f.displayName) === "TimelineHeaders") {
+        const n = i.props;
+        o.push(ie.cloneElement(i, {
+          visibleTimeStart: n.visibleTimeStart ?? vt,
+          visibleTimeEnd: n.visibleTimeEnd ?? bt,
+          canvasWidth: n.canvasWidth ?? fe,
+          sidebarWidth: n.sidebarWidth ?? v,
+          theme: n.theme ?? ye,
+          onZoomToInterval: n.onZoomToInterval ?? ((h, b) => {
+            var k, H, D, x;
+            R.current.update({ visibleTimeStart: h, visibleTimeEnd: b }), S.markAllDirty(), we(), (H = (k = O.current).onTimeChange) == null || H.call(k, h, b), (x = (D = O.current).onZoom) == null || x.call(D, h, b);
+          })
+        }));
+      }
+    }), o;
+  }, [he, vt, bt, fe, v, ye, S, we]), Et = L(!1);
+  re(() => {
+    Et.current || (Et.current = !0, S.markAllDirty());
+  }, [S]), rr(r, () => ({
+    captureToCanvas({ timeStart: o, timeEnd: i, scale: c, sidebarWidth: f }) {
+      const n = O.current, h = 28, b = h * 3, k = n.groups.length * n.lineHeight, H = R.current, D = n.canvasWidth / (H.visibleTimeEnd - H.visibleTimeStart), x = i - o, z = Math.max(n.canvasWidth, Math.round(x * D)), A = (f + z) * c, ee = (b + k) * c, U = document.createElement("canvas");
+      U.width = A, U.height = ee;
+      const w = U.getContext("2d");
+      w.scale(c, c);
+      for (let _ = 0; _ < n.groups.length; _++) {
+        const ue = n.groups[_], ce = b + _ * n.lineHeight;
+        if (n.rowStyle) {
+          const Y = n.rowStyle(ue);
+          Y != null && Y.backgroundColor && (w.fillStyle = Y.backgroundColor, w.fillRect(0, ce, f, n.lineHeight));
+        }
+        const F = ue.type;
+        let K = "400", J = 8;
+        F === "project" ? K = "700" : F === "CAG" ? K = "600" : F === "CA" && (K = "400", J = 24), w.fillStyle = "#111", w.font = `${K} 12px sans-serif`, w.textBaseline = "middle", w.fillText(ue.title, J, ce + n.lineHeight / 2, f - J - 4);
+      }
+      const m = (_, ue, ce) => {
+        var J, Y;
+        w.fillStyle = ((J = n.theme.header) == null ? void 0 : J.bg) ?? "#f5f5f5", w.fillRect(f, _, z, h), w.strokeStyle = ((Y = n.theme.grid) == null ? void 0 : Y.line) ?? "#e0e0e0", w.lineWidth = 1, w.strokeRect(f, _, z, h);
+        let F = ne(o).startOf(ce);
+        F.valueOf() < o && (F = F.add(1, ce));
+        const K = z / (i - o);
+        for (; F.valueOf() < i; ) {
+          const ve = F.add(1, ce), se = f + (F.valueOf() - o) * K, de = f + (Math.min(ve.valueOf(), i) - o) * K - se;
+          w.beginPath(), w.moveTo(se, _), w.lineTo(se, _ + h), w.stroke(), w.fillStyle = "#333", w.font = "600 11px sans-serif", w.textBaseline = "middle", w.textAlign = "center", w.fillText(ue(F), se + de / 2, _ + h / 2, de - 4), F = ve;
+        }
+        w.textAlign = "start";
+      };
+      m(0, (_) => _.format("YYYY"), "year"), m(h, (_) => _.format("MM"), "month"), m(h * 2, (_) => String(_.isoWeek()), "week");
+      const te = new rt({
+        visibleTimeStart: o,
+        visibleTimeEnd: i,
+        canvasWidth: z,
+        canvasHeight: k,
+        sidebarWidth: 0,
+        lineHeight: n.lineHeight,
+        groupCount: n.groups.length,
+        buffer: 1,
+        scrollTop: 0
+      });
+      return w.save(), w.translate(f, b), w.beginPath(), w.rect(0, 0, z, k), w.clip(), Se.draw(w, te, n.groups, n.theme, n.dayStyle, n.rowStyle), Ee.draw(w, te, n.groups, n.items, n.intervalTree, n.layoutEngine, n.itemRenderer, n.groupRenderer, n.theme, n.selected, void 0, n.dependencies), Ce.draw(w, te, n.theme, {
+        cursorX: null,
+        snapX: null,
+        markers: Pe.current,
+        interaction: null
+      }), w.restore(), U;
+    }
+  }), [Se, Ee, Ce]), re(() => {
+    const o = {
+      captureToCanvas({ timeStart: i, timeEnd: c, scale: f, sidebarWidth: n }) {
+        var ce;
+        const h = O.current, b = 28, k = b * 3, H = h.groups.length * h.lineHeight, D = R.current, x = h.canvasWidth / (D.visibleTimeEnd - D.visibleTimeStart), z = c - i, A = Math.max(h.canvasWidth, Math.round(z * x)), ee = n + A, U = k + H, w = document.createElement("canvas");
+        w.width = ee * f, w.height = U * f;
+        const m = w.getContext("2d");
+        m.scale(f, f), m.fillStyle = "#FFFFFF", m.fillRect(0, 0, ee, U), m.save(), m.beginPath(), m.rect(0, 0, n, U), m.clip(), m.fillStyle = "#F9FAFB", m.fillRect(0, 0, n, k), m.strokeStyle = "#E5E7EB", m.lineWidth = 1, m.strokeRect(0, 0, n, k);
+        for (let F = 0; F < h.groups.length; F++) {
+          const K = h.groups[F], J = k + F * h.lineHeight, Y = (ce = h.rowStyle) == null ? void 0 : ce.call(h, K);
+          m.fillStyle = (Y == null ? void 0 : Y.backgroundColor) ?? (F % 2 === 0 ? "#FFFFFF" : "#F7F7F7"), m.fillRect(0, J, n, h.lineHeight), m.strokeStyle = "#E5E5E5", m.lineWidth = 0.5, m.beginPath(), m.moveTo(0, J + h.lineHeight), m.lineTo(n, J + h.lineHeight), m.stroke();
+          const ve = K.type ?? "";
+          let se = 8, Te = "400", de = 11;
+          ve === "project" ? (Te = "700", de = 12) : ve === "control_area_group" ? Te = "600" : ve === "control_area" && (se = 24), m.fillStyle = "#374151", m.font = `${Te} ${de}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, m.textBaseline = "middle";
+          const Me = typeof K.title == "string" ? K.title : String(K.title);
+          m.fillText(Me, se, J + h.lineHeight / 2, n - se - 8);
+        }
+        m.strokeStyle = "#E5E7EB", m.lineWidth = 1, m.beginPath(), m.moveTo(n, 0), m.lineTo(n, U), m.stroke(), m.restore(), m.save(), m.beginPath(), m.rect(n, 0, A, k), m.clip();
+        const te = c - i, _ = [
+          { unit: "year", row: 0 },
+          { unit: "month", row: 1 },
+          { unit: "week", row: 2 }
+        ];
+        for (const { unit: F, row: K } of _) {
+          const J = K * b;
+          m.fillStyle = "#F9FAFB", m.fillRect(n, J, A, b);
+          let Y = ne(i).startOf(F);
+          const ve = ne(c).add(1, F);
+          for (; Y.isBefore(ve); ) {
+            const se = Y.add(1, F), Te = n + (Y.valueOf() - i) / te * A, de = (se.valueOf() - Y.valueOf()) / te * A;
+            m.strokeStyle = "#E5E7EB", m.lineWidth = 0.5, m.strokeRect(Te, J, de, b);
+            let Me;
+            F === "year" ? Me = Y.format("YYYY") : F === "month" ? Me = Y.format("MM") : Me = `${Y.week()}`, m.fillStyle = "#6c737f", m.font = F === "year" ? '600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', m.textBaseline = "middle", m.textAlign = "center", de > 20 && m.fillText(Me, Te + de / 2, J + b / 2), Y = se;
+          }
+        }
+        m.textAlign = "start", m.restore(), m.save(), m.beginPath(), m.rect(n, k, A, H), m.clip(), m.translate(n, k);
+        const ue = new rt({
+          visibleTimeStart: i,
+          visibleTimeEnd: c,
+          canvasWidth: A,
+          canvasHeight: H,
+          sidebarWidth: 0,
+          lineHeight: h.lineHeight,
+          groupCount: h.groups.length,
+          buffer: 1,
+          scrollTop: 0
+        });
+        return Se.draw(m, ue, h.groups, h.theme, h.dayStyle, h.rowStyle), Ee.draw(m, ue, h.groups, h.items, h.intervalTree, h.layoutEngine, h.itemRenderer, h.groupRenderer, h.theme, h.selected, void 0, h.dependencies), Ce.draw(m, ue, h.theme, { cursorX: null, markers: Pe.current }), m.restore(), w;
+      }
+    };
+    Xe == null || Xe(o);
+  }, [Xe, Se, Ee, Ce]);
+  const er = {
+    position: "relative",
+    width: fe,
+    height: me,
+    overflow: "hidden",
+    cursor: "default"
+  }, tt = { position: "absolute", top: 0, left: 0 };
+  return je("div", { ref: mt, style: { display: "flex", flexDirection: "column", width: "100%" }, children: [Qt, je("div", { ref: At, style: { display: "flex", overflow: "hidden" }, children: [Z(Dt, { groups: s, width: v, lineHeight: d, scrollTop: pt, canvasHeight: me, theme: ye, groupRenderer: le, onScroll: (o) => {
+    R.current.update({ scrollTop: o }), S.markDirty("grid"), S.markDirty("items"), S.markDirty("overlay"), Le(o);
+  } }), je("div", { ref: Re, style: er, onPointerMove: Vt, onPointerDown: Zt, onPointerUp: qt, onDoubleClick: Ut, onContextMenu: Kt, onPointerLeave: Jt, children: [Z("canvas", { ref: dt, style: { ...tt, zIndex: 0 } }), Z("canvas", { ref: ht, style: { ...tt, zIndex: 1 } }), Z("canvas", { ref: ft, style: { ...tt, zIndex: 2 } })] }), Ge && ut ? Z(Dt, { groups: s, width: Ge, lineHeight: d, scrollTop: pt, canvasHeight: me, theme: ye, groupRenderer: ut, onScroll: (o) => {
+    R.current.update({ scrollTop: o }), S.markDirty("grid"), S.markDirty("items"), S.markDirty("overlay"), Le(o);
+  } }) : null] })] });
+}));
+function Tr({ children: t, theme: e, className: r, classNames: s, style: l, visibleTimeStart: u, visibleTimeEnd: a, canvasWidth: v, sidebarWidth: d = 0, onZoomToInterval: g }) {
+  const y = ie.Children.map(t, (p) => {
+    var T;
+    if (!ie.isValidElement(p))
+      return p;
+    if (((T = p.type) == null ? void 0 : T.displayName) === "DateHeader") {
+      const C = p.props, I = ie.cloneElement(p, {
+        visibleTimeStart: C.visibleTimeStart ?? u,
+        visibleTimeEnd: C.visibleTimeEnd ?? a,
+        canvasWidth: C.canvasWidth ?? v,
+        theme: C.theme ?? e,
+        onZoomToInterval: C.onIntervalClick ?? C.onZoomToInterval ?? g
+      });
+      return je("div", { style: { display: "flex" }, children: [Z("div", { style: { width: d, flexShrink: 0 } }), Z("div", { style: { flex: 1, overflow: "hidden" }, children: I })] });
+    }
+    return p;
+  });
+  return Z("div", { className: r, style: {
+    position: "sticky",
+    top: 0,
+    zIndex: 20,
+    display: "flex",
+    flexDirection: "column",
+    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"}`,
+    ...l
+  }, children: y });
+}
+Tr.displayName = "TimelineHeaders";
+var _t = { exports: {} };
+(function(t, e) {
+  (function(r, s) {
+    t.exports = s();
+  })(Wt, function() {
+    var r = "week", s = "year";
+    return function(l, u, a) {
+      var v = u.prototype;
+      v.week = function(d) {
+        if (d === void 0 && (d = null), d !== null) return this.add(7 * (d - this.week()), "day");
+        var g = this.$locale().yearStart || 1;
+        if (this.month() === 11 && this.date() > 25) {
+          var y = a(this).startOf(s).add(1, s).date(g), p = a(this).endOf(r);
+          if (y.isBefore(p)) return 1;
+        }
+        var M = a(this).startOf(s).date(g).startOf(r).subtract(1, "millisecond"), T = this.diff(M, r, !0);
+        return T < 0 ? a(this).startOf("week").week() : Math.ceil(T);
+      }, v.weeks = function(d) {
+        return d === void 0 && (d = null), this.week(d);
+      };
+    };
+  });
+})(_t);
+var kr = _t.exports;
+const wr = /* @__PURE__ */ Xt(kr);
+ne.extend(wr);
+const Sr = {
+  year: 30,
+  month: 30,
+  week: 20,
+  day: 15,
+  hour: 30
+};
+function Er({ unit: t, visibleTimeStart: e = 0, visibleTimeEnd: r = 0, canvasWidth: s = 0, theme: l, height: u = 28, className: a, labelFormat: v, onIntervalClick: d, minCellWidth: g, onZoomToInterval: y }) {
+  const p = Q(() => {
+    if (!e || !r || !s)
+      return [];
+    const T = r - e, C = g ?? Sr[t];
+    if (C > 0) {
+      const P = ne(e).startOf(t);
+      if ((P.add(1, t).valueOf() - P.valueOf()) / T * s < C)
+        return [];
+    }
+    const I = [];
+    let B = ne(e).startOf(t).subtract(1, t);
+    const E = ne(r).add(2, t).valueOf();
+    for (; B.valueOf() < E; ) {
+      const P = B.add(1, t), X = B.valueOf(), j = P.valueOf(), G = (X - e) / T * s, W = (j - X) / T * s, le = Cr(B, P, t, v);
+      I.push({ start: X, end: j, label: le, left: G, width: W }), B = P;
+    }
+    return I;
+  }, [e, r, s, t, v, g]), M = $((T, C) => {
+    d ? d(T, C) : y && y(T, C);
+  }, [d, y]);
+  return p.length === 0 ? null : Z("div", { style: { display: "flex", position: "relative", height: u, overflow: "hidden" }, children: p.map((T) => Z("div", { className: a, onClick: () => M(T.start, T.end), style: {
+    position: "absolute",
+    left: T.left,
+    width: T.width,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRight: `1px solid ${(l == null ? void 0 : l.header.border) ?? "#E5E7EB"}`,
+    borderBottom: `1px solid ${(l == null ? void 0 : l.header.border) ?? "#E5E7EB"}`,
+    fontSize: 12,
+    color: (l == null ? void 0 : l.header.text) ?? "#6c737f",
+    backgroundColor: (l == null ? void 0 : l.header.bg) ?? "#F9FAFB",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    userSelect: "none",
+    padding: "0 4px",
+    boxSizing: "border-box"
+  }, children: Z("span", { children: T.label }) }, T.start)) });
+}
+Er.displayName = "DateHeader";
+function Cr(t, e, r, s, l) {
+  return typeof s == "function" ? s(t.toDate(), e.toDate(), r) : typeof s == "string" ? t.format(s) : Mr(t, r);
+}
+function Mr(t, e) {
+  switch (e) {
+    case "year":
+      return t.format("YYYY");
+    case "month":
+      return t.format("MM");
+    case "week":
+      return `${t.week()}`;
+    case "day":
+      return t.format("D");
+    case "hour":
+      return t.format("HH:mm");
+  }
+}
+function Hr({ width: t, children: e, style: r }) {
+  const s = () => ({ style: { width: t, ...r } });
+  return e ? Z(Ft, { children: e({ getRootProps: s }) }) : Z("div", { style: { width: t } });
+}
+Hr.displayName = "SidebarHeader";
+function Rr({ children: t }) {
+  return Z(Ft, { children: t });
+}
+Rr.displayName = "CustomHeader";
+export {
+  Fr as CanvasTimeline,
+  Rr as CustomHeader,
+  pr as CustomMarker,
+  be as DEFAULT_THEME,
+  Er as DateHeader,
+  Hr as SidebarHeader,
+  Tr as TimelineHeaders,
+  vr as TodayMarker
+};
+//# sourceMappingURL=canvas-timeline.es.js.map