@mogura/moguchart-core 0.5.2

package/dist/moguchart-core.mjs

@@ -0,0 +1,3163 @@
+import { LitElement as e, css as t, html as n, render as r, svg as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import l from "dayjs";
+import { repeat as u } from "lit/directives/repeat.js";
+import { unsafeHTML as d } from "lit/directives/unsafe-html.js";
+import { throttle as f } from "lodash-es";
+import p from "html2canvas-pro";
+import { jsPDF as m } from "jspdf";
+//#region src/core/patterns.ts
+var h = [
+	"diagonal-stripe",
+	"diagonal-stripe-thin",
+	"diagonal-stripe-thick",
+	"diagonal-stripe-reverse",
+	"vertical-stripe",
+	"horizontal-stripe",
+	"checkerboard",
+	"dots",
+	"triangle",
+	"circle",
+	"grid",
+	"diagonal-grid"
+], g = { type: "diagonal-stripe" }, _ = { type: "diagonal-stripe-reverse" }, v = { type: "vertical-stripe" }, y = { type: "horizontal-stripe" }, b = { type: "checkerboard" }, x = { type: "dots" }, S = { type: "triangle" }, C = { type: "circle" }, w = { type: "grid" }, T = { type: "diagonal-grid" }, E = { type: "diagonal-stripe-thin" }, D = { type: "diagonal-stripe-thick" }, O = { type: "dots-dense" };
+function k(e) {
+	if (!e?.type) return "";
+	let t = e.color || "rgba(255, 255, 255, 0.3)", n = e.type === "dots" ? "6px" : "8px";
+	switch (e.type) {
+		case "diagonal-stripe": return `
+          background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "diagonal-stripe-thin": return n = "4px", `
+          background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "diagonal-stripe-thick": return n = "16px", `
+          background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "diagonal-stripe-reverse": return `
+          background-image: linear-gradient(135deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "diagonal-grid": return `
+          background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent), linear-gradient(135deg, ${t} 25%, transparent 25%, transparent 50%, ${t} 50%, ${t} 75%, transparent 75%, transparent);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "vertical-stripe": return `
+          background-image: linear-gradient(90deg, ${t} 50%, transparent 50%);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "horizontal-stripe": return `
+          background-image: linear-gradient(0deg, ${t} 50%, transparent 50%);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "checkerboard": return `
+          background-image: linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 75%, ${t} 75%, ${t}), linear-gradient(45deg, ${t} 25%, transparent 25%, transparent 75%, ${t} 75%, ${t});
+          background-position: 0 0, calc(${n} / 2) calc(${n} / 2);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "dots": return `
+          background-image: radial-gradient(${t} 20%, transparent 20%);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "dots-dense": return n = "4px", `
+          background-image: radial-gradient(${t} 20%, transparent 20%);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "triangle": return `
+          background-image: conic-gradient(from 150deg at 50% 35%, ${t} 60deg, transparent 60deg);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "circle": return `
+          background-image: radial-gradient(circle, transparent 50%, ${t} 50%, ${t} 70%, transparent 70%);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		case "grid": return `
+          background-image: linear-gradient(${t} 1px, transparent 1px), linear-gradient(90deg, ${t} 1px, transparent 1px);
+          background-size: ${n} ${n};
+          background-repeat: repeat;
+        `;
+		default: return "";
+	}
+}
+//#endregion
+//#region src/core/i18n.ts
+var A = {
+	monthFormat: "YYYY年M月",
+	monthRowFormat: "M月",
+	dateFormat: (e) => `${e.getFullYear()}/${e.getMonth() + 1}/${e.getDate()}`,
+	timeUnitDateFormat: (e) => `${e.getFullYear()}年${e.getMonth() + 1}月${e.getDate()}日`,
+	dateTimeFormat: (e) => {
+		let t = `${e.getFullYear()}/${e.getMonth() + 1}/${e.getDate()}`, n = e.getHours(), r = e.getMinutes();
+		return n === 0 && r === 0 ? t : `${t} ${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+	},
+	yearMonthFormat: (e) => `${e.getFullYear()}/${e.getMonth() + 1}`,
+	duration: {
+		days: (e) => `${e}日`,
+		hours: (e) => `${e}時間`,
+		minutes: (e) => `${e}分`,
+		zero: "0分"
+	},
+	tooltip: { duration: (e) => `所要日数: ${e}日` },
+	dragOverlay: {
+		noTitle: "タイトルなし",
+		moveTo: (e) => `移動先: ${e}`,
+		movingTasks: (e) => `${e}件のタスクを移動中`
+	}
+}, j = {
+	monthFormat: "MMM YYYY",
+	monthRowFormat: "MMM",
+	dateFormat: (e) => `${e.getMonth() + 1}/${e.getDate()}/${e.getFullYear()}`,
+	timeUnitDateFormat: (e) => `${[
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	][e.getMonth()]} ${e.getDate()}, ${e.getFullYear()}`,
+	dateTimeFormat: (e) => {
+		let t = `${e.getMonth() + 1}/${e.getDate()}/${e.getFullYear()}`, n = e.getHours(), r = e.getMinutes();
+		return n === 0 && r === 0 ? t : `${t} ${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+	},
+	yearMonthFormat: (e) => `${e.getFullYear()}/${e.getMonth() + 1}`,
+	duration: {
+		days: (e) => `${e} day${e === 1 ? "" : "s"}`,
+		hours: (e) => `${e} hour${e === 1 ? "" : "s"}`,
+		minutes: (e) => `${e} minute${e === 1 ? "" : "s"}`,
+		zero: "0 minutes"
+	},
+	tooltip: { duration: (e) => `Duration: ${e} day${e === 1 ? "" : "s"}` },
+	dragOverlay: {
+		noTitle: "No Title",
+		moveTo: (e) => `Move to: ${e}`,
+		movingTasks: (e) => `Moving ${e} task${e === 1 ? "" : "s"}`
+	}
+}, M = {
+	light: {
+		bg: "#f1f5f9",
+		text: "#0f172a",
+		border: "#cbd5e1",
+		gridLine: "#cbd5e1",
+		subGridLine: "#e2e8f0",
+		monthGridLine: "#94a3b8",
+		yearGridLine: "#64748b",
+		dragTarget: "#e0f2fe",
+		tooltipBg: "rgba(0, 0, 0, 0.8)",
+		tooltipText: "white",
+		dragOverlayBg: "rgba(0, 0, 0, 0.85)",
+		dragOverlayText: "white",
+		dragOverlaySubText: "#cbd5e1",
+		dragOverlayDivider: "#666",
+		dependencyLine: "#94a3b8",
+		calendarBg: "#e2e8f0",
+		saturday: "#dbeafe",
+		sunday: "#fee2e2",
+		holiday: "#fee2e2",
+		rowHeaderBg: "#e2e8f0",
+		rowSelected: "#bfdbfe",
+		rowSelectedHeader: "#dbeafe",
+		rowHiddenBg: "repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px)",
+		currentTimeLine: "rgba(239, 68, 68, 0.5)",
+		currentTimeLineText: "#ffffff"
+	},
+	dark: {
+		bg: "#1e293b",
+		text: "#f8fafc",
+		border: "#263040",
+		gridLine: "#334155",
+		subGridLine: "#263040",
+		monthGridLine: "#475569",
+		yearGridLine: "#64748b",
+		dragTarget: "rgba(51, 65, 85, 0.5)",
+		tooltipBg: "rgba(255, 255, 255, 0.9)",
+		tooltipText: "#0f172a",
+		dragOverlayBg: "rgba(255, 255, 255, 0.9)",
+		dragOverlayText: "#0f172a",
+		dragOverlaySubText: "#64748b",
+		dragOverlayDivider: "#cbd5e1",
+		dependencyLine: "#475569",
+		calendarBg: "#0f172a",
+		saturday: "rgba(59, 130, 246, 0.15)",
+		sunday: "rgba(239, 68, 68, 0.15)",
+		holiday: "rgba(239, 68, 68, 0.15)",
+		rowHeaderBg: "#0f172a",
+		rowSelected: "#283548",
+		rowSelectedHeader: "#1c2738",
+		rowHiddenBg: "repeating-linear-gradient(45deg, #0f172a, #0f172a 10px, #1e293b 10px, #1e293b 20px)",
+		currentTimeLine: "rgba(239, 68, 68, 0.5)",
+		currentTimeLineText: "#ffffff"
+	}
+}, N = (e, t, n, r) => {
+	if (r !== void 0) {
+		let n = t.getFullYear(), i = t.getMonth(), a = e.getFullYear(), o = e.getMonth(), s = (a - n) * 12 + (o - i), c = new Date(n, i + 1, 0).getDate(), l = (t.getDate() - 1 + t.getHours() / 24 + t.getMinutes() / 1440) / c, u = new Date(a, o + 1, 0).getDate();
+		return (s + (e.getDate() - 1 + e.getHours() / 24 + e.getMinutes() / 1440) / u - l) * r;
+	}
+	return (e.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24) * n;
+}, P = (e, t, n, r) => {
+	if (r !== void 0) {
+		let n = t.getFullYear(), i = t.getMonth(), a = new Date(n, i + 1, 0).getDate(), o = (t.getDate() - 1 + t.getHours() / 24 + t.getMinutes() / 1440) / a, s = e / r + o, c = i + Math.floor(s), l = n + Math.floor(c / 12);
+		c %= 12, c < 0 && (c += 12, --l);
+		let u = (s - Math.floor(s)) * new Date(l, c + 1, 0).getDate(), d = 1 + Math.floor(u), f = (u - Math.floor(u)) * 24, p = Math.floor(f), m = Math.round((f - p) * 60);
+		return new Date(l, c, d, p, m);
+	}
+	let i = e / n;
+	return new Date(t.getTime() + i * 24 * 60 * 60 * 1e3);
+};
+function F(e) {
+	if (!e.length) return {
+		tasksWithLanes: [],
+		laneCount: 1
+	};
+	let t = [...e].sort((e, t) => e.start.getTime() - t.start.getTime()), n = [], r = /* @__PURE__ */ new Map();
+	for (let e of t) {
+		let t = -1;
+		for (let r = 0; r < n.length; r++) if (e.start >= n[r]) {
+			n[r] = e.end, t = r;
+			break;
+		}
+		t === -1 && (n.push(e.end), t = n.length - 1), r.set(e.id, t);
+	}
+	return {
+		tasksWithLanes: e.map((e) => ({
+			...e,
+			lane: r.get(e.id) ?? 0
+		})),
+		laneCount: n.length || 1
+	};
+}
+var I = (e, t) => ({
+	...M[e] || M.light,
+	...t
+}), L = (e, t, n) => {
+	let r = e.getDay();
+	return n && n(e) ? t.holiday : [
+		t.sunday,
+		t.monday ?? "",
+		t.tuesday ?? "",
+		t.wednesday ?? "",
+		t.thursday ?? "",
+		t.friday ?? "",
+		t.saturday
+	][r];
+};
+function R(e, t) {
+	return (t.getTime() - e.getTime()) / (1e3 * 60 * 60 * 24);
+}
+var z = (e, t, n) => {
+	let r = n ?? A, i = t.getTime() - e.getTime(), a = Math.floor(i / (1e3 * 60 * 60 * 24)), o = i % (1e3 * 60 * 60 * 24), s = Math.floor(o / (1e3 * 60 * 60)), c = o % (1e3 * 60 * 60), l = Math.floor(c / (1e3 * 60)), u = "";
+	return a > 0 && (u += r.duration.days(a)), s > 0 && (u += r.duration.hours(s)), l > 0 && (u += r.duration.minutes(l)), u || r.duration.zero;
+}, B = {
+	BAR: "#3b82f6",
+	LABEL_BACKGROUND: "#fafafa",
+	SATURDAY: "#dbeafe",
+	SUNDAY: "#fee2e2",
+	HOLIDAY: "#fee2e2",
+	BORDER: "#e2e8f0"
+}.BAR;
+//#endregion
+//#region \0@oxc-project+runtime@0.120.0/helpers/decorate.js
+function V(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+//#region src/components/gantt-bar.ts
+var H = class extends e {
+	constructor(...e) {
+		super(...e), this.lane = 0, this.selected = !1, this.focused = !1, this.multiDragDx = 0, this.multiDragActive = !1, this.connectorDropTarget = !1, this.isExporting = !1, this._currentDragCursor = null, this._dragAnimationFrame = null, this._wasDragging = !1, this.handleKeyDown = (e) => {
+			(e.key === "Control" || e.key === "Alt") && this.updateCursor(!0);
+		}, this.handleKeyUp = (e) => {
+			(e.key === "Control" || e.key === "Alt") && this.updateCursor(!1);
+		};
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .task-group {
+      position: absolute;
+      box-sizing: border-box;
+      pointer-events: auto;
+      z-index: 3;
+    }
+    .task-group:hover {
+      z-index: 50;
+    }
+    .task-group.dragging {
+      opacity: 0.5;
+      z-index: 15;
+    }
+    .bar {
+      cursor: grab;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: ${a(B)};
+    }
+    :host([selected]) .bar {
+      outline: 2px solid #3b82f6;
+      outline-offset: 1px;
+      box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+    }
+    :host([focused]) .bar {
+      outline: 2px dashed #3b82f6;
+      outline-offset: 2px;
+    }
+    :host([selected][focused]) .bar {
+      outline: 2px solid #3b82f6;
+      outline-offset: 1px;
+      box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+    }
+    .handle-left,
+    .handle-right {
+      background: transparent;
+      cursor: col-resize;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 10px;
+      z-index: 10;
+    }
+    .handle-left {
+      left: 0px;
+    }
+    .handle-right {
+      right: 0px;
+    }
+    .handle-left:hover,
+    .handle-right:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+    .connector-left,
+    .connector-right {
+      position: absolute;
+      top: 50%;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #3b82f6;
+      border: 2px solid #fff;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+      transform: translateY(-50%);
+      cursor: crosshair;
+      z-index: 20;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      pointer-events: auto;
+    }
+    .task-group:hover .connector-left,
+    .task-group:hover .connector-right {
+      opacity: 1;
+    }
+    .connector-left {
+      left: -10px;
+    }
+    .connector-right {
+      right: -10px;
+    }
+    .connector-left:hover,
+    .connector-right:hover {
+      background: #2563eb;
+      transform: translateY(-50%) scale(1.2);
+    }
+    :host([connector-drop-target]) .bar {
+      outline: 2px solid #3b82f6;
+      outline-offset: 2px;
+      box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
+    }
+    .bar-label {
+      color: white;
+      font-size: 12px;
+      pointer-events: none;
+      user-select: none;
+      position: absolute;
+      top: 2px;
+      left: 6px;
+      white-space: nowrap;
+      z-index: 5;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: calc(100% - 12px);
+    }
+    :host([isexporting]) .bar,
+    :host([isexporting]) .bar * {
+      text-overflow: clip !important;
+    }
+    @keyframes pop-in {
+      0% {
+        transform: scale(0.5);
+        opacity: 0;
+      }
+      60% {
+        transform: scale(1.1);
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+    @keyframes fade-out {
+      0% {
+        transform: scale(1);
+        opacity: 1;
+      }
+      100% {
+        transform: scale(0.5);
+        opacity: 0;
+      }
+    }
+    @keyframes collab-pulse {
+      0%,
+      100% {
+        outline-offset: 2px;
+        filter: brightness(1);
+      }
+      50% {
+        outline-offset: 3px;
+        filter: brightness(1.08);
+      }
+    }
+  `;
+	}
+	getX(e) {
+		return N(e, this.option.calendar.start, this.option.calendar.pxPerDay ?? 50, this.option.calendar.pxPerMonth);
+	}
+	setupDragEvents(e, t, n, r) {
+		let i = () => {
+			e.releasePointerCapture(t), window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", o), window.removeEventListener("keydown", s);
+		}, a = (e) => {
+			n(e);
+		}, o = (e) => {
+			i(), r(!1, e);
+		}, s = (e) => {
+			e.key === "Escape" && (i(), r(!0));
+		};
+		window.addEventListener("pointermove", a), window.addEventListener("pointerup", o), window.addEventListener("keydown", s);
+	}
+	onResizeStart(e, t) {
+		e.stopPropagation();
+		let n = e.target, r = this.task.movable ?? "both", i = this.task.resizable, a = !this.option.readOnly;
+		if (a &&= i === void 0 ? !(r === "y" || r === "none") : i, !a) return;
+		let o = this.shadowRoot?.querySelector(".bar");
+		if (!o) return;
+		o.style.pointerEvents = "none";
+		let s = this.shadowRoot?.querySelector(".task-group");
+		s?.classList.add("dragging"), n.setPointerCapture(e.pointerId);
+		let c = e.clientX, l = new Date(this.task.start), u = new Date(this.task.end), d = new Date(l), f = new Date(u);
+		this.setupDragEvents(n, e.pointerId, (e) => {
+			let n = e.clientX - c, r = new Date(l), i = new Date(u), a = this.option.calendar.pxPerDay ?? 50, o = this.option.calendar.pxPerMonth, p = Math.max(this.option.snapDuration ?? 1440, 1);
+			if (o) {
+				let e = this.getX(l), s = this.getX(u);
+				if (t === "left") {
+					let t = P(e + n, this.option.calendar.start, a, o);
+					t.getDate() > 15 && t.setMonth(t.getMonth() + 1), t.setDate(1), t.setHours(0, 0, 0, 0), r = t, r >= i && (r = new Date(i), r.setMonth(r.getMonth() - 1));
+				} else {
+					let e = P(s + n, this.option.calendar.start, a, o);
+					e.getDate() > 15 && e.setMonth(e.getMonth() + 1), e.setDate(1), e.setHours(0, 0, 0, 0), i = e, i <= r && (i = new Date(r), i.setMonth(i.getMonth() + 1));
+				}
+			} else {
+				let e = a / 1440, o = e * p, s = Math.round(n / o) * o, c = Math.round(s / e);
+				t === "left" ? (r = new Date(l.getTime() + c * 60 * 1e3), r >= i && (r = /* @__PURE__ */ new Date(i.getTime() - p * 60 * 1e3))) : (i = new Date(u.getTime() + c * 60 * 1e3), i <= r && (i = new Date(r.getTime() + p * 60 * 1e3)));
+			}
+			if (d = r, f = i, s) {
+				let e = this.getX(r), t = this.getX(i) - e;
+				s.style.left = `${e}px`, s.style.width = `${t}px`;
+			}
+			this._dragAnimationFrame && cancelAnimationFrame(this._dragAnimationFrame), this._dragAnimationFrame = requestAnimationFrame(() => {
+				this.dispatchEvent(new CustomEvent("task-update", {
+					detail: {
+						...this.task,
+						start: r,
+						end: i,
+						dy: 0,
+						isDragging: !0,
+						x: e.clientX,
+						y: e.clientY
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			});
+		}, (e) => {
+			if (s?.classList.remove("dragging"), o.style.pointerEvents = "", this._dragAnimationFrame &&= (cancelAnimationFrame(this._dragAnimationFrame), null), e) {
+				if (s) {
+					let e = this.getX(l), t = this.getX(u) - e;
+					s.style.left = `${e}px`, s.style.width = `${t}px`;
+				}
+				this.requestUpdate(), this.dispatchEvent(new CustomEvent("task-update", {
+					detail: {
+						...this.task,
+						start: l,
+						end: u,
+						dy: 0,
+						isDragging: !1
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			} else requestAnimationFrame(() => {
+				this.dispatchEvent(new CustomEvent("task-update", {
+					detail: {
+						...this.task,
+						start: d,
+						end: f,
+						dy: 0,
+						isDragging: !1
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			});
+		});
+	}
+	onMoveStart(e) {
+		if (e.button === 2) return;
+		e.stopPropagation();
+		let t = e.target, n = this.shadowRoot?.querySelector(".task-group");
+		if (!t || !n) return;
+		let r = this.task.movable ?? "both";
+		if (r === "none") return;
+		let i = e.ctrlKey || e.altKey ? "copy" : "grabbing";
+		this._currentDragCursor = i, t.style.cursor = i, t.setPointerCapture(e.pointerId), n.classList.add("dragging");
+		let a = e.clientX, o = e.clientY, s = new Date(this.task.start), c = new Date(this.task.end), l = this.option.snapDuration ?? 1440;
+		this.setupDragEvents(t, e.pointerId, (e) => {
+			let i = e.ctrlKey || e.altKey ? "copy" : "grabbing";
+			this._currentDragCursor = i, t.style.cursor = i;
+			let u = e.clientX - a, d = e.clientY - o;
+			r === "y" && (u = 0), (r === "x" || this.multiDragActive) && (d = 0);
+			let f = u;
+			if (this.option.calendar.pxPerMonth) {
+				let e = P(this.getX(s) + u, this.option.calendar.start, 50, this.option.calendar.pxPerMonth), t = (e.getFullYear() - s.getFullYear()) * 12 + (e.getMonth() - s.getMonth()) + (e.getDate() > 15 ? 1 : 0), n = new Date(s);
+				n.setMonth(n.getMonth() + t), f = this.getX(n) - this.getX(s);
+			} else {
+				let e = this.option.calendar.pxPerDay / 1440 * l;
+				f = Math.round(u / e) * e;
+			}
+			n.style.transform = `translate(${f}px, ${d}px)`, this._dragAnimationFrame && cancelAnimationFrame(this._dragAnimationFrame), this._dragAnimationFrame = requestAnimationFrame(() => {
+				let t = e.ctrlKey || e.altKey;
+				this.dispatchEvent(new CustomEvent("task-update", {
+					detail: {
+						...this.task,
+						start: s,
+						end: c,
+						dx: f,
+						dy: d,
+						isDragging: !0,
+						x: e.clientX,
+						y: e.clientY,
+						mode: t ? "copy" : "move"
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			});
+		}, (e, i) => {
+			if (this._currentDragCursor = null, n.classList.remove("dragging"), n.style.transform = "", t.style.cursor = "", this._dragAnimationFrame &&= (cancelAnimationFrame(this._dragAnimationFrame), null), e) this.requestUpdate(), this.dispatchEvent(new CustomEvent("task-update", {
+				detail: {
+					...this.task,
+					start: s,
+					end: c,
+					dx: 0,
+					dy: 0,
+					isDragging: !1
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+			else if (i) {
+				let e = i.clientX - a, t = e;
+				if (this.option.calendar.pxPerMonth) {
+					let n = P(this.getX(s) + e, this.option.calendar.start, 50, this.option.calendar.pxPerMonth), r = (n.getFullYear() - s.getFullYear()) * 12 + (n.getMonth() - s.getMonth()) + (n.getDate() > 15 ? 1 : 0), i = new Date(s);
+					i.setMonth(i.getMonth() + r), t = this.getX(i) - this.getX(s);
+				} else {
+					let n = this.option.calendar.pxPerDay / 1440 * l;
+					t = Math.round(e / n) * n;
+				}
+				let n = i.clientY - o;
+				if (r === "y" && (t = 0), (r === "x" || this.multiDragActive) && (n = 0), t === 0 && Math.abs(n) < 5) {
+					this.dispatchEvent(new CustomEvent("bar-click", {
+						detail: {
+							task: this.task,
+							event: i,
+							isMultiSelect: i.metaKey || i.ctrlKey
+						},
+						bubbles: !0,
+						composed: !0
+					})), this._wasDragging = !0;
+					return;
+				}
+				let u = i.ctrlKey || i.altKey;
+				this._wasDragging = !0, this.multiDragActive || this.dispatchEvent(new CustomEvent("bar-click", {
+					detail: {
+						task: this.task,
+						event: i,
+						isMultiSelect: !1
+					},
+					bubbles: !0,
+					composed: !0
+				})), this.dispatchEvent(new CustomEvent("task-update", {
+					detail: {
+						...this.task,
+						start: s,
+						end: c,
+						dx: t,
+						dy: n,
+						isDragging: !1,
+						mode: u ? "copy" : "move"
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		});
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.shadowRoot?.querySelector(".bar");
+		if (t && (this.option.customRendering?.barContent, this.dispatchEvent(new CustomEvent("render-bar-content", {
+			detail: {
+				container: t,
+				task: this.task
+			},
+			bubbles: !0,
+			composed: !0
+		})), this._currentDragCursor ? t.style.cursor = this._currentDragCursor : this.option.readOnly || (t.style.cursor = "")), e.has("multiDragDx")) {
+			let e = this.shadowRoot?.querySelector(".task-group");
+			e && (this.multiDragDx === 0 ? (e.style.transform = "", e.style.opacity = "", e.style.pointerEvents = "") : (e.style.transform = `translateX(${this.multiDragDx}px)`, e.style.opacity = "0.6", e.style.pointerEvents = "none"));
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("keyup", this.handleKeyUp);
+	}
+	updateCursor(e) {
+		let t = this.shadowRoot?.querySelector(".bar");
+		t && !this._currentDragCursor && (t.style.cursor = e ? "copy" : "");
+	}
+	onMouseEnter(e) {
+		let t = e.currentTarget;
+		if (t.classList.contains("dragging")) return;
+		this.option.readOnly || (window.addEventListener("keydown", this.handleKeyDown), window.addEventListener("keyup", this.handleKeyUp), (e.ctrlKey || e.altKey) && this.updateCursor(!0));
+		let n = t.getBoundingClientRect();
+		this.dispatchEvent(new CustomEvent("bar-mouseenter", {
+			detail: {
+				task: this.task,
+				x: n.left + n.width / 2,
+				y: n.top
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onMouseLeave() {
+		this.option.readOnly || (window.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("keyup", this.handleKeyUp), this.updateCursor(!1)), this.dispatchEvent(new CustomEvent("bar-mouseleave", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onDblClick(e) {
+		this.dispatchEvent(new CustomEvent("task-dblclick", {
+			detail: {
+				task: this.task,
+				event: e
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onClick(e) {
+		if (e.stopPropagation(), this._wasDragging) {
+			this._wasDragging = !1;
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("bar-click", {
+			detail: {
+				task: this.task,
+				event: e,
+				isMultiSelect: e.metaKey || e.ctrlKey
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	onConnectorDragStart(e, t) {
+		e.stopPropagation(), e.preventDefault();
+		let n = e.target;
+		if (n.setPointerCapture(e.pointerId), !this.shadowRoot?.querySelector(".task-group")) return;
+		let r = this.option.bar?.height ?? 28, i = this.option.bar?.margin ?? 4, a = this.getX(this.task.start), o = this.getX(this.task.end) - a, s = this.lane * (r + i) + i, c = t === "start" ? a : a + o, l = s + r / 2;
+		this.dispatchEvent(new CustomEvent("connector-drag-start", {
+			detail: {
+				taskId: this.task.id,
+				endpoint: t,
+				startX: c,
+				startY: l,
+				clientX: e.clientX,
+				clientY: e.clientY
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.setupDragEvents(n, e.pointerId, (e) => {
+			this.dispatchEvent(new CustomEvent("connector-drag-move", {
+				detail: {
+					taskId: this.task.id,
+					endpoint: t,
+					startX: c,
+					startY: l,
+					clientX: e.clientX,
+					clientY: e.clientY
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, (e) => {
+			this.dispatchEvent(new CustomEvent("connector-drag-end", {
+				detail: {
+					taskId: this.task.id,
+					endpoint: t,
+					cancelled: e
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+	onContextMenu(e) {
+		if (e.ctrlKey) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("task-contextmenu", {
+			detail: {
+				task: this.task,
+				event: e
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		if (!this.task || !this.option) return n``;
+		let e = this.getX(this.task.start), t = this.getX(this.task.end) - e, r = this.option.bar?.height ?? 28, i = this.option.bar?.margin ?? 4, a = this.option.bar?.cornerRadius ?? 4, o = this.lane * (r + i) + i, s = this.option.readOnly, c = this.task.movable ?? "both", l = this.task.resizable, u = !s && c !== "none", d = !s;
+		return d &&= l === void 0 ? !(c === "y" || c === "none") : l, n`
+      <div
+        class="task-group"
+        style="
+          left: ${e}px;
+          top: ${o}px;
+          width: ${t}px;
+          height: ${r}px;
+        "
+        @mouseenter="${this.onMouseEnter}"
+        @mouseleave="${this.onMouseLeave}"
+        @click="${this.onClick}"
+        @dblclick="${this.onDblClick}"
+        @contextmenu="${this.onContextMenu}"
+      >
+        <div
+          class="bar"
+          style="border-radius: ${a}px; ${this.task.style || ""}; ${k(this.task.pattern)}; ${u ? "" : "cursor: pointer;"}"
+          @pointerdown="${u ? this.onMoveStart : void 0}"
+        >
+          ${this.option.customRendering?.barContent ? this.option.customRendering.barContent(this.task) : ""}
+        </div>
+        ${!this.option.customRendering?.barContent && this.task.name ? n`<div class="bar-label" style="${this.task.labelStyle || ""}">${this.task.name}</div>` : ""}
+        ${d ? n`
+              <div class="handle-left" @pointerdown="${(e) => this.onResizeStart(e, "left")}"></div>
+              <div class="handle-right" @pointerdown="${(e) => this.onResizeStart(e, "right")}"></div>
+            ` : ""}
+        ${s ? "" : n`
+              <div
+                class="connector-left"
+                @pointerdown="${(e) => this.onConnectorDragStart(e, "start")}"
+              ></div>
+              <div
+                class="connector-right"
+                @pointerdown="${(e) => this.onConnectorDragStart(e, "end")}"
+              ></div>
+            `}
+      </div>
+    `;
+	}
+};
+V([s({ type: Object })], H.prototype, "task", void 0), V([s({ type: Object })], H.prototype, "option", void 0), V([s({ type: Number })], H.prototype, "lane", void 0), V([s({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "selected", void 0), V([s({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "focused", void 0), V([s({ type: Number })], H.prototype, "multiDragDx", void 0), V([s({ type: Boolean })], H.prototype, "multiDragActive", void 0), V([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "connector-drop-target"
+})], H.prototype, "connectorDropTarget", void 0), V([s({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "isExporting", void 0), H = V([o("gantt-bar")], H);
+//#endregion
+//#region src/components/gantt-calendar.ts
+var U = class extends e {
+	constructor(...e) {
+		super(...e), this.theme = "light", this.currentTime = /* @__PURE__ */ new Date(), this.hoveredMilestoneId = null, this._cachedDays = null, this._cachedMonths = null, this._cachedYears = null, this._cachedWeeks = null, this._cachedStartTime = 0, this._cachedEndTime = 0, this._cachedPxPerDay = 0, this._cachedPxPerMonth = void 0, this._cachedWeekStartDay = -1;
+	}
+	injectCustomContent(e, t, n) {
+		let r = e.querySelector(`.${n}`);
+		if (r && r.remove(), t instanceof HTMLElement) t.classList.add(n), e.appendChild(t);
+		else if (typeof t == "string") {
+			let r = document.createElement("span");
+			r.classList.add(n), r.innerHTML = t, e.appendChild(r);
+		}
+	}
+	updated() {
+		let e = this.shadowRoot?.querySelector(".label-placeholder");
+		if (!e) return;
+		let t = e.querySelector(".corner-content-root");
+		if (t && t.remove(), this.cornerContent) {
+			let t = this.cornerContent();
+			t instanceof HTMLElement && (t.classList.add("corner-content-root"), e.appendChild(t));
+		}
+		this.injectCalendarCustomContent();
+	}
+	injectCalendarCustomContent() {
+		this.calendarMonthContent && (this.shadowRoot?.querySelectorAll("[data-calendar-month]"))?.forEach((e) => {
+			let t = e, n = {
+				year: parseInt(t.dataset.calendarMonthYear ?? "0", 10),
+				month: parseInt(t.dataset.calendarMonth ?? "0", 10),
+				width: parseFloat(t.dataset.calendarMonthWidth ?? "0"),
+				defaultLabel: t.dataset.calendarMonthLabel ?? ""
+			}, r = this.calendarMonthContent(n);
+			this.injectCustomContent(t, r, "custom-month-content");
+		}), this.calendarDayContent && (this.shadowRoot?.querySelectorAll("[data-calendar-day]"))?.forEach((e) => {
+			let t = e, n = t.dataset.calendarDay ?? "", r = {
+				date: new Date(n),
+				width: parseFloat(t.dataset.calendarDayWidth ?? "0"),
+				isSaturday: t.dataset.calendarDaySaturday === "true",
+				isSunday: t.dataset.calendarDaySunday === "true",
+				isHoliday: t.dataset.calendarDayHoliday === "true",
+				defaultLabel: t.dataset.calendarDayLabel ?? ""
+			}, i = this.calendarDayContent(r);
+			this.injectCustomContent(t, i, "custom-day-content");
+		}), this.calendarWeekContent && (this.shadowRoot?.querySelectorAll("[data-calendar-week]"))?.forEach((e) => {
+			let t = e, n = parseInt(t.dataset.calendarWeek ?? "0", 10), r = t.dataset.calendarWeekStart ?? "", i = {
+				weekNumber: n,
+				startDate: new Date(r),
+				width: parseFloat(t.dataset.calendarWeekWidth ?? "0"),
+				defaultLabel: t.dataset.calendarWeekLabel ?? ""
+			}, a = this.calendarWeekContent(i);
+			this.injectCustomContent(t, a, "custom-week-content");
+		}), this.calendarHourContent && (this.shadowRoot?.querySelectorAll("[data-calendar-hour]"))?.forEach((e) => {
+			let t = e, n = parseInt(t.dataset.calendarHour ?? "0", 10), r = parseFloat(t.dataset.calendarHourWidth ?? "0"), i = t.dataset.calendarHourDate ?? "", a = {
+				hour: n,
+				width: r,
+				date: new Date(i)
+			}, o = this.calendarHourContent(a);
+			this.injectCustomContent(t, o, "custom-hour-content");
+		});
+	}
+	get totalDays() {
+		return R(this.option.calendar.start, this.option.calendar.end);
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: flex;
+      width: fit-content;
+      min-width: 100%;
+      box-sizing: border-box;
+      position: sticky;
+      top: 0;
+      z-index: 500;
+    }
+    .label-placeholder {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      position: sticky;
+      left: 0;
+      z-index: 100;
+      background: inherit;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 4px;
+      overflow: hidden;
+    }
+    .calendar-group {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      z-index: 70;
+    }
+    .months-container {
+      display: flex;
+    }
+    .month-cell {
+      box-sizing: border-box;
+      padding: 4px 8px;
+      font-size: 12px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .weeks-container {
+      display: flex;
+    }
+    .week-cell {
+      box-sizing: border-box;
+      padding: 4px 0;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      flex-shrink: 0;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .days-container {
+      display: flex;
+    }
+    .day-cell {
+      text-align: center;
+      font-size: 10px;
+      padding: 6px 0;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      word-break: break-all;
+      line-height: 1.1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .hours-container {
+      display: flex;
+    }
+    .hour-cell {
+      text-align: center;
+      font-size: 10px;
+      padding: 2px 0;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+    .current-time-badge {
+      position: absolute;
+      bottom: 0;
+      transform: translateX(-50%);
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: bold;
+      white-space: nowrap;
+      z-index: 10;
+      pointer-events: none;
+    }
+    .milestone-badge {
+      position: absolute;
+      top: 0;
+      transform: translateX(-50%);
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: bold;
+      white-space: nowrap;
+      z-index: 9;
+      pointer-events: auto;
+      color: #ffffff;
+      transition: opacity 0.2s ease;
+      cursor: default;
+    }
+    .milestone-connector {
+      position: absolute;
+      top: 19px;
+      bottom: 0px;
+      transform: translateX(-50%);
+      z-index: 8;
+      pointer-events: auto;
+      transition: opacity 0.2s ease;
+      cursor: default;
+    }
+  `;
+	}
+	getDateX(e) {
+		return N(e, this.option.calendar.start, this.option.calendar.pxPerDay, this.option.calendar.pxPerMonth);
+	}
+	formatTime(e) {
+		return `${e.getHours().toString().padStart(2, "0")}:${e.getMinutes().toString().padStart(2, "0")}`;
+	}
+	_buildWeeks(e, t) {
+		let n = (e) => {
+			let n = new Date(e.getTime());
+			n.setHours(0, 0, 0, 0);
+			let r = (n.getDay() - t + 7) % 7, i = new Date(n.getTime());
+			i.setDate(i.getDate() - r);
+			let a = new Date(i.getFullYear(), 0, 1), o = Math.floor((i.getTime() - a.getTime()) / 864e5);
+			return Math.floor(o / 7) + 1;
+		}, r = [];
+		return e.forEach((e) => {
+			let i = e.getDay() === t, a = r[r.length - 1];
+			a && !i ? a.count++ : r.push({
+				weekNumber: n(e),
+				startDate: new Date(e),
+				count: 1
+			});
+		}), r;
+	}
+	render() {
+		let e = I(this.theme, this.option.customTheme), t = this.option.calendar.start.getTime(), r = this.option.calendar.end.getTime(), i = this.option.calendar.pxPerDay, a = this.option.calendar.pxPerMonth, o = this.option.calendar.weekStartDay ?? 1, s = !this._cachedDays || t !== this._cachedStartTime || r !== this._cachedEndTime, c = i !== this._cachedPxPerDay || a !== this._cachedPxPerMonth;
+		if (s) {
+			this._cachedStartTime = t, this._cachedEndTime = r, this._cachedPxPerDay = i, this._cachedPxPerMonth = a;
+			let e = Array.from({ length: Math.ceil(this.totalDays) }, (e, t) => {
+				let n = new Date(this.option.calendar.start);
+				return n.setDate(n.getDate() + t), n;
+			});
+			this._cachedDays = e;
+			let n = [];
+			e.forEach((e) => {
+				let t = e.getFullYear(), r = e.getMonth(), i = n[n.length - 1];
+				if (i && i.year === t && i.month === r) i.count++, i.end = new Date(e), i.end.setDate(i.end.getDate() + 1);
+				else {
+					let i = new Date(e);
+					i.setHours(0, 0, 0, 0);
+					let a = new Date(e);
+					a.setDate(a.getDate() + 1), n.push({
+						year: t,
+						month: r,
+						count: 1,
+						start: i,
+						end: a
+					});
+				}
+			}), n.forEach((e) => {
+				e.start && e.end && (e.width = this.getDateX(e.end) - this.getDateX(e.start));
+			}), this._cachedMonths = n;
+			let s = [];
+			e.forEach((e) => {
+				let t = e.getFullYear(), n = s[s.length - 1];
+				if (n && n.year === t) n.count++, n.end = new Date(e), n.end.setDate(n.end.getDate() + 1);
+				else {
+					let n = new Date(e);
+					n.setHours(0, 0, 0, 0);
+					let r = new Date(e);
+					r.setDate(r.getDate() + 1), s.push({
+						year: t,
+						count: 1,
+						start: n,
+						end: r
+					});
+				}
+			}), s.forEach((e) => {
+				e.start && e.end && (e.width = this.getDateX(e.end) - this.getDateX(e.start));
+			}), this._cachedYears = s, this._cachedWeekStartDay = o, this._cachedWeeks = this._buildWeeks(e, o);
+		} else c ? (this._cachedPxPerDay = i, this._cachedPxPerMonth = a, this._cachedMonths.forEach((e) => {
+			e.start && e.end && (e.width = this.getDateX(e.end) - this.getDateX(e.start));
+		}), this._cachedYears.forEach((e) => {
+			e.start && e.end && (e.width = this.getDateX(e.end) - this.getDateX(e.start));
+		}), o !== this._cachedWeekStartDay && (this._cachedWeekStartDay = o, this._cachedWeeks = this._buildWeeks(this._cachedDays, o))) : o !== this._cachedWeekStartDay && (this._cachedWeekStartDay = o, this._cachedWeeks = this._buildWeeks(this._cachedDays, o));
+		let u = this._cachedDays, d = this._cachedMonths, f = this._cachedYears, p = `
+      background-image: linear-gradient(90deg, transparent ${this.option.calendar.pxPerDay - 1}px, ${e.border} ${this.option.calendar.pxPerDay - 1}px);
+      background-size: ${this.option.calendar.pxPerDay}px 100%;
+    `, m = this.option.calendar.pxPerDay / 24, h = this.option.calendar.pxPerDay, g = this.option.customTheme?.showTimeDateLine ?? e.monthGridLine ?? e.border, _ = this.option.calendar.start, v = (_.getHours() * 60 * 60 * 1e3 + _.getMinutes() * 60 * 1e3 + _.getSeconds() * 1e3) / (1440 * 60 * 1e3) * h, y = v % m, b = v === 0 ? "0px 0" : `${-v}px 0`, x = y === 0 ? "0px 0" : `${-y}px 0`, S = `
+      background-image: linear-gradient(90deg, transparent ${h - 1}px, ${g} ${h - 1}px), linear-gradient(90deg, transparent ${m - 1}px, ${e.border} ${m - 1}px);
+      background-size: ${h}px 100%, ${m}px 100%;
+      background-position: ${b}, ${x};
+    `, C = [];
+		if (this.option.calendar.showTime) {
+			let e = this.option.calendar.start, t = this.option.calendar.end, n = new Date(e);
+			for (n.setHours(0, 0, 0, 0); n.getTime() < t.getTime();) {
+				let r = n.getTime() < e.getTime() ? e : n, i = new Date(n);
+				i.setDate(i.getDate() + 1);
+				let a = i.getTime() > t.getTime() ? t : i, o = r.getHours(), s = a.getHours(), c = a.getMinutes() > 0 || a.getSeconds() > 0 || a.getMilliseconds() > 0, l = s === 0 && !c ? 24 : c ? s + 1 : s, u = (a.getTime() - r.getTime()) / (1e3 * 60 * 60);
+				C.push({
+					date: new Date(n),
+					hStart: o,
+					hEnd: l,
+					widthPx: u * m
+				}), n = new Date(i);
+			}
+		}
+		let w = d[d.length - 1], T = this.option.calendar.pxPerMonth !== void 0 && w?.end ? this.getDateX(w.end) : this.getDateX(this.option.calendar.end);
+		return n`
+      <style>
+        :host {
+          background: ${e.calendarBg};
+          border-bottom: 2px solid ${e.border};
+          color: ${e.text};
+        }
+        .label-placeholder {
+          border-right: 1px solid ${e.border};
+        }
+        .months-container {
+          background: ${e.bg};
+          border-bottom: 1px solid ${e.border};
+        }
+        .hours-container {
+          border-top: 1px solid ${e.border};
+        }
+      </style>
+      <div
+        class="label-placeholder"
+        style="width: ${this.option.rowHeader?.width ?? 150}px; background-color: ${this.option.rowHeader?.backgroundColor ?? e.rowHeaderBg};"
+      ></div>
+      <div class="calendar-group" style="width: ${T}px; overflow: hidden;">
+        ${this.option.calendar.showMonthsRow ? (() => {
+			let t = this.option.calendar.monthTextAlign ?? "center";
+			return n`<div class="months-container" style="position: relative; z-index: 2;">
+                  ${f.map((e) => n`<div
+                        class="month-cell"
+                        style="width: ${e.width ?? e.count * this.option.calendar.pxPerDay}px;"
+                      >
+                        ${e.year}
+                      </div>`)}
+                </div>
+                <div
+                  class="weeks-container"
+                  style="background: ${e.bg}; border-bottom: 1px solid ${e.border}; position: relative;"
+                >
+                  ${d.map((e) => {
+				let r = (this.option.locale ?? A).monthRowFormat, i = l(new Date(e.year, e.month)).format(r), a = e.width ?? e.count * this.option.calendar.pxPerDay;
+				return n`<div
+                      class="week-cell"
+                      style="width: ${a}px; text-align: ${t}; padding: 0 2px;"
+                      data-calendar-month="${e.month}"
+                      data-calendar-month-year="${e.year}"
+                      data-calendar-month-width="${a}"
+                      data-calendar-month-label="${i}"
+                    >
+                      ${this.calendarMonthContent ? "" : i}
+                    </div>`;
+			})}
+                </div>`;
+		})() : ""}
+        ${this.option.calendar.showMonths !== !1 && !this.option.calendar.showMonthsRow ? n`<div class="months-container" style="position: relative;">
+              ${d.map((e) => {
+			let t = this.option.calendar.monthFormat || (this.option.locale ?? A).monthFormat, r = l(new Date(e.year, e.month)).format(t), i = e.width ?? e.count * this.option.calendar.pxPerDay;
+			return n`<div
+                  class="month-cell"
+                  style="width: ${i}px;"
+                  data-calendar-month="${e.month}"
+                  data-calendar-month-year="${e.year}"
+                  data-calendar-month-width="${i}"
+                  data-calendar-month-label="${r}"
+                >
+                  ${this.calendarMonthContent ? "" : r}
+                </div>`;
+		})}
+            </div>` : ""}
+        ${this.option.calendar.showWeeks ? (() => {
+			let t = this._cachedWeeks, r = `
+                background: ${e.bg};
+                border-bottom: 1px solid ${e.border};
+              `, i = this.option.calendar.weekFormat, a = this.option.calendar.weekTextAlign ?? "center";
+			return n`<div class="weeks-container" style="${r}">
+                ${t.map((t) => {
+				let r = i ? i(t.weekNumber, t.startDate) : `W${t.weekNumber}`, o = t.count * this.option.calendar.pxPerDay;
+				return n`<div
+                    class="week-cell"
+                    style="width: ${o}px; border-right: 1px solid ${e.border}; text-align: ${a}; padding: 0 2px;"
+                    data-calendar-week="${t.weekNumber}"
+                    data-calendar-week-start="${t.startDate.toISOString()}"
+                    data-calendar-week-width="${o}"
+                    data-calendar-week-label="${r}"
+                  >
+                    ${this.calendarWeekContent ? "" : r}
+                  </div>`;
+			})}
+              </div>`;
+		})() : ""}
+        ${this.option.calendar.showDays === !1 ? "" : n`<div class="days-container" style="${this.option.calendar.showTime ? "" : p}">
+              ${this.option.calendar.showTime ? C.map((t, r) => {
+			let i = L(t.date, e, this.option.calendar.isHoliday), a = r === C.length - 1, o = e.showTimeDateLine ?? e.monthGridLine ?? e.border, s = (this.option.locale ?? A).timeUnitDateFormat(t.date), c = this.option.calendar.isHoliday ? this.option.calendar.isHoliday(t.date) : !1;
+			return n`
+                      <div
+                        class="day-cell"
+                        style="width: ${t.widthPx}px; border-right: ${a ? "none" : `1px solid ${o}`}; ${i ? `background-color: ${i};` : ""} font-size: 12px; font-weight: 700; justify-content: flex-start; padding-left: 4px;"
+                        data-calendar-day="${t.date.toISOString()}"
+                        data-calendar-day-width="${t.widthPx}"
+                        data-calendar-day-saturday="${t.date.getDay() === 6}"
+                        data-calendar-day-sunday="${t.date.getDay() === 0}"
+                        data-calendar-day-holiday="${c}"
+                        data-calendar-day-label="${s}"
+                      >
+                        ${this.calendarDayContent ? "" : s}
+                      </div>
+                    `;
+		}) : u.map((t, r) => {
+			let i = this.option.calendar.pxPerDay;
+			r + 1 > this.totalDays && (i = (this.totalDays - r) * this.option.calendar.pxPerDay);
+			let a = L(t, e, this.option.calendar.isHoliday), o = String(t.getDate()), s = this.option.calendar.isHoliday ? this.option.calendar.isHoliday(t) : !1;
+			return n`
+                      <div
+                        class="day-cell"
+                        style="width: ${i}px; ${a ? `background-color: ${a};` : ""}"
+                        data-calendar-day="${t.toISOString()}"
+                        data-calendar-day-width="${i}"
+                        data-calendar-day-saturday="${t.getDay() === 6}"
+                        data-calendar-day-sunday="${t.getDay() === 0}"
+                        data-calendar-day-holiday="${s}"
+                        data-calendar-day-label="${o}"
+                      >
+                        ${this.calendarDayContent ? "" : o}
+                      </div>
+                    `;
+		})}
+            </div>`}
+        ${this.option.calendar.showTime ? n`
+              <div class="hours-container" style="${S}">
+                ${C.map((e) => Array.from({ length: e.hEnd - e.hStart }, (t, n) => e.hStart + n).map((t) => n` <div
+                      class="hour-cell"
+                      style="width: ${m}px;"
+                      data-calendar-hour="${t}"
+                      data-calendar-hour-width="${m}"
+                      data-calendar-hour-date="${e.date.toISOString()}"
+                    >${this.calendarHourContent ? "" : t}</div> `))}
+              </div>
+            ` : ""}
+        ${(() => {
+			let t = this.option.calendar.showMonthsRow || this.option.calendar.showDays === !1 && !this.option.calendar.showWeeks, r = this.getDateX(this.option.calendar.start), i = this.getDateX(this.option.calendar.end), a = d.map((i) => {
+				if (!i.start) return "";
+				let a = this.getDateX(i.start);
+				if (a <= r) return "";
+				let o = i.month === 0, s, c = 1;
+				return o ? (s = e.yearGridLine || e.monthGridLine || e.border, c = 3) : (s = t ? e.border : e.monthGridLine || e.border, c = 1), n`<div
+              style="position: absolute; top: 0; bottom: 0; left: ${a - 1}px; width: 1px; background-color: ${s}; pointer-events: none; z-index: ${c};"
+            ></div>`;
+			}), o = d[d.length - 1];
+			if (o && i > r) {
+				let r = o.month === 11, s = r ? e.yearGridLine || e.monthGridLine || e.border : t ? e.border : e.monthGridLine || e.border, c = r ? 3 : 1;
+				a.push(n`<div
+                style="position: absolute; top: 0; bottom: 0; left: ${i - 1}px; width: 1px; background-color: ${s}; pointer-events: none; z-index: ${c};"
+              ></div>`);
+			}
+			return a;
+		})()}
+        ${this.option.calendar.showCurrentTime && this.option.calendar.showCurrentTimeBadge === !0 && this.currentTime >= this.option.calendar.start && this.currentTime <= this.option.calendar.end ? n`
+              <div
+                class="current-time-badge"
+                style="
+                  left: ${this.getDateX(this.currentTime)}px;
+                  background-color: ${e.currentTimeLine};
+                  color: ${e.currentTimeLineText};
+                "
+              >
+                ${this.formatTime(this.currentTime)}
+              </div>
+            ` : ""}
+        ${(this.option.calendar.milestones ?? []).map((e) => n`
+            <div
+              class="milestone-connector"
+              style="
+                left: ${this.getDateX(e.start) + 1}px;
+                width: ${e.width ?? 2}px;
+                background-color: ${e.color};
+                opacity: ${this.hoveredMilestoneId === e.id ? 1 : .5};
+              "
+              @mouseenter="${() => {
+			this.dispatchEvent(new CustomEvent("milestone-hover-change", {
+				detail: { milestoneId: e.id },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}"
+              @mouseleave="${() => {
+			this.dispatchEvent(new CustomEvent("milestone-hover-change", {
+				detail: { milestoneId: null },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}"
+            ></div>
+            <div
+              class="milestone-badge"
+              style="
+                left: ${this.getDateX(e.start)}px;
+                background-color: ${e.color};
+                opacity: ${this.hoveredMilestoneId === e.id ? 1 : .5};
+              "
+              @mouseenter="${() => {
+			this.dispatchEvent(new CustomEvent("milestone-hover-change", {
+				detail: { milestoneId: e.id },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}"
+              @mouseleave="${() => {
+			this.dispatchEvent(new CustomEvent("milestone-hover-change", {
+				detail: { milestoneId: null },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}"
+            >
+              ${e.name}
+            </div>
+          `)}
+      </div>
+    `;
+	}
+};
+V([s({ type: Object })], U.prototype, "option", void 0), V([s({ type: String })], U.prototype, "theme", void 0), V([s({ type: Object })], U.prototype, "currentTime", void 0), V([s({ type: String })], U.prototype, "hoveredMilestoneId", void 0), V([s({ attribute: !1 })], U.prototype, "cornerContent", void 0), V([s({ attribute: !1 })], U.prototype, "calendarMonthContent", void 0), V([s({ attribute: !1 })], U.prototype, "calendarDayContent", void 0), V([s({ attribute: !1 })], U.prototype, "calendarWeekContent", void 0), V([s({ attribute: !1 })], U.prototype, "calendarHourContent", void 0), U = V([o("gantt-calendar")], U);
+//#endregion
+//#region src/components/gantt-row-background.ts
+var W = class extends e {
+	constructor(...e) {
+		super(...e), this.theme = "light", this.rowId = "", this._cachedCells = null, this._cachedCellsStartTime = 0, this._cachedCellsEndTime = 0, this._cachedCellsPxPerDay = 0, this._cachedCellsPxPerMonth = void 0, this._cachedCellsTheme = "";
+	}
+	get totalDays() {
+		return R(this.option.calendar.start, this.option.calendar.end);
+	}
+	static {
+		this.styles = t`
+    :host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      z-index: 0;
+      pointer-events: none;
+      overflow: hidden;
+    }
+    .bg-cell {
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+    }
+  `;
+	}
+	render() {
+		let e = I(this.theme, this.option.customTheme), t = this.option.calendar.start.getTime(), r = this.option.calendar.end.getTime(), i = this.option.calendar.pxPerDay ?? 50, a = this.option.calendar.pxPerMonth;
+		(!this._cachedCells || t !== this._cachedCellsStartTime || r !== this._cachedCellsEndTime || i !== this._cachedCellsPxPerDay || a !== this._cachedCellsPxPerMonth || this.theme !== this._cachedCellsTheme) && (this._cachedCellsStartTime = t, this._cachedCellsEndTime = r, this._cachedCellsPxPerDay = i, this._cachedCellsPxPerMonth = a, this._cachedCellsTheme = this.theme, this._cachedCells = Array.from({ length: Math.ceil(this.totalDays) }, (e, t) => {
+			let n = new Date(this.option.calendar.start);
+			return n.setDate(n.getDate() + t), n;
+		}).map((t) => {
+			let n = L(t, e, this.option.calendar.isHoliday), r = new Date(t);
+			r.setDate(t.getDate() + 1);
+			let o = N(t, this.option.calendar.start, i, a);
+			return {
+				width: N(r, this.option.calendar.start, i, a) - o,
+				color: n,
+				date: t
+			};
+		}));
+		let o = this.option.customRendering?.chartBackground;
+		return o ? n`
+        ${this._cachedCells.map(({ width: e, color: t, date: r }, i) => {
+			let a = r.getDay(), s = this.option.calendar.isHoliday ? this.option.calendar.isHoliday(r) : !1, c = o({
+				date: r,
+				width: e,
+				height: this.clientHeight || 0,
+				rowId: this.rowId,
+				isSaturday: a === 6,
+				isSunday: a === 0,
+				isHoliday: s,
+				defaultColor: t,
+				index: i
+			});
+			return typeof c == "string" ? n`<div
+              class="bg-cell"
+              style="width: ${e}px; background-color: ${t};"
+            ><div style="position: absolute; inset: 0;">${n`${c}`}</div></div>` : n`<div
+            class="bg-cell"
+            style="width: ${e}px; background-color: ${t};"
+          ><div style="position: absolute; inset: 0;">${c}</div></div>`;
+		})}
+      ` : n`
+      ${this._cachedCells.map(({ width: e, color: t }) => n`<div
+        style="width: ${e}px; background-color: ${t}; flex-shrink: 0;"
+      ></div>`)}
+    `;
+	}
+};
+V([s({ type: Object })], W.prototype, "option", void 0), V([s({ type: String })], W.prototype, "theme", void 0), V([s({ type: String })], W.prototype, "rowId", void 0), W = V([o("gantt-row-background")], W);
+//#endregion
+//#region src/components/gantt-row.ts
+var G = class extends e {
+	constructor(...e) {
+		super(...e), this.isDragTarget = !1, this.draggingTask = null, this.draggingTaskIds = [], this.multiDragDx = 0, this.externalDragTask = null, this.theme = "light", this.isSelected = !1, this.dropPosition = null, this.selectedTaskIds = [], this.focusedTaskId = null, this.isExporting = !1, this._cachedMonthGridLines = null, this._cachedMonthGridStartTime = 0, this._cachedMonthGridEndTime = 0, this._cachedMonthGridPxPerDay = 0, this._cachedMonthGridPxPerMonth = 0;
+	}
+	getDateX(e) {
+		return N(e, this.option.calendar.start, this.option.calendar.pxPerDay, this.option.calendar.pxPerMonth);
+	}
+	getMarkerPath(e, t) {
+		let n = t / 2;
+		switch (e) {
+			case "triangle-up": return `M 0 ${t} L ${n} 0 L ${t} ${t} Z`;
+			case "triangle-down": return `M 0 0 L ${t} 0 L ${n} ${t} Z`;
+			case "triangle-left": return `M ${t} 0 L 0 ${n} L ${t} ${t} Z`;
+			case "triangle-right": return `M 0 0 L ${t} ${n} L 0 ${t} Z`;
+			case "diamond": return `M ${n} 0 L ${t} ${n} L ${n} ${t} L 0 ${n} Z`;
+			case "square": return `M 0 0 L ${t} 0 L ${t} ${t} L 0 ${t} Z`;
+			default: return `M 0 ${t} L ${n} 0 L ${t} ${t} Z`;
+		}
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: block;
+      width: fit-content;
+      min-width: 100%;
+      box-sizing: border-box;
+      background-color: transparent;
+    }
+    .row-container {
+      display: flex;
+      height: 100%;
+      box-sizing: border-box;
+      background: inherit;
+      position: relative;
+    }
+    .row-container.drop-top::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: #3b82f6;
+      z-index: 110;
+      pointer-events: none;
+    }
+    .row-container.drop-bottom::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: #3b82f6;
+      z-index: 110;
+      pointer-events: none;
+    }
+    .row-header {
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 0;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      position: sticky;
+      left: 0;
+      z-index: 100;
+    }
+    .row-header-content {
+      flex-grow: 1;
+      padding: 6px 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    :host([isexporting]) .row-header-content,
+    :host([isexporting]) .row-header-content * {
+      text-overflow: clip !important;
+    }
+    .bars-container {
+      flex: none;
+      position: relative;
+    }
+    .grid-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+  `;
+	}
+	handleDragStart(e) {
+		if (this.isSelected || this.dispatchEvent(new CustomEvent("row-clicked", {
+			detail: {
+				rowId: this.row.id,
+				event: e
+			},
+			bubbles: !0,
+			composed: !0
+		})), e.dataTransfer) {
+			e.dataTransfer.setData("text/plain", this.row.id), e.dataTransfer.effectAllowed = "move";
+			let t = I(this.theme, this.option.customTheme), n = document.createElement("div");
+			n.style.position = "absolute", n.style.top = "-1000px", n.style.left = "-1000px", n.style.display = "flex", n.style.flexDirection = "column", n.style.zIndex = "9999", n.style.width = "fit-content", n.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", n.style.border = `1px solid ${t.border}`, n.style.borderRadius = "4px", n.style.overflow = "hidden";
+			let r = [];
+			if (this.isSelected) {
+				let e = this.getRootNode(), t = Array.from(e.querySelectorAll("gantt-row[isselected]"));
+				r = t.length > 0 ? t : [this];
+			} else r = [this];
+			let i = r.slice(0, 10);
+			if (i.forEach((e, r) => {
+				let a = e.shadowRoot?.querySelector(".row-header");
+				if (a) {
+					let o = a.cloneNode(!0), s = window.getComputedStyle(a);
+					o.style.width = s.width, o.style.minWidth = s.minWidth, o.style.height = `${e.offsetHeight}px`, o.style.boxSizing = s.boxSizing, o.style.background = s.backgroundColor, o.style.color = s.color, o.style.fontSize = s.fontSize, o.style.display = s.display, o.style.alignItems = s.alignItems, o.style.padding = s.padding, o.style.border = "none", o.style.borderBottom = r < i.length - 1 ? `1px solid ${t.border}` : "none", o.style.cursor = "grabbing", n.appendChild(o);
+				}
+			}), r.length > 10) {
+				let e = document.createElement("div");
+				e.style.padding = "4px 8px", e.style.background = t.bg, e.style.color = t.text, e.style.fontSize = "11px", e.style.textAlign = "center", e.textContent = `+ ${r.length - 10} more`, n.appendChild(e);
+			}
+			document.body.appendChild(n), e.dataTransfer.setDragImage(n, 0, 0), setTimeout(() => {
+				document.body.removeChild(n);
+			}, 0);
+		}
+	}
+	handleHeaderClick(e) {
+		this.dispatchEvent(new CustomEvent("row-clicked", {
+			detail: {
+				rowId: this.row.id,
+				event: e
+			},
+			bubbles: !0,
+			composed: !0
+		})), e.stopPropagation();
+	}
+	handleHeaderContextMenu(e) {
+		e.preventDefault(), this.dispatchEvent(new CustomEvent("row-header-contextmenu", {
+			detail: {
+				rowId: this.row.id,
+				row: this.row,
+				event: e,
+				target: e.currentTarget
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleHeaderDblClick(e) {
+		this.dispatchEvent(new CustomEvent("row-header-dblclick", {
+			detail: {
+				rowId: this.row.id,
+				row: this.row,
+				event: e,
+				target: e.currentTarget
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	updated(e) {
+		if (super.updated(e), !(e.has("row") || e.has("option") || e.has("isSelected") || e.has("theme"))) return;
+		let t = this.shadowRoot?.querySelector(".row-header-content");
+		t && r(this.option.customRendering?.rowHeaderContent ? this.option.customRendering.rowHeaderContent(this.row) : this.row.name, t);
+	}
+	render() {
+		let e = I(this.theme, this.option.customTheme), t = [...this.row.tasks];
+		if (this.externalDragTask) {
+			let e = {
+				...this.externalDragTask.task,
+				start: this.externalDragTask.currentStart,
+				end: this.externalDragTask.currentEnd,
+				style: `${this.externalDragTask.task.style || ""}; opacity: 0.6; pointer-events: none;`
+			};
+			t = [...t, e];
+		}
+		let r, i, a = this.row.tasks.find((e) => this.draggingTask && e.id === this.draggingTask.id);
+		if (this.draggingTask?.mode === "copy" && a) {
+			let e = t.filter((e) => e.id !== this.draggingTask.id);
+			e.push({
+				...a,
+				id: `${a.id}-static`,
+				movable: "none",
+				resizable: !1,
+				style: `${a.style || ""}; opacity: 0.5;`
+			});
+			let n = F(e);
+			r = n.tasksWithLanes, i = n.laneCount;
+			let o = r.find((e) => e.id === `${a.id}-static`);
+			o && r.push({
+				...a,
+				lane: o.lane
+			});
+		} else {
+			let e = F(t);
+			r = e.tasksWithLanes, i = e.laneCount;
+		}
+		let o = this.option.bar?.height ?? 28, s = this.option.bar?.margin ?? 4, c = i * (o + s) + s;
+		this.style.height = `${c}px`;
+		let l = "", d = null, f = this.option.calendar.start.getTime(), p = this.option.calendar.end.getTime(), m = this.option.calendar.pxPerDay, h = this.option.calendar.pxPerMonth ?? 0;
+		if (!this._cachedMonthGridLines || f !== this._cachedMonthGridStartTime || p !== this._cachedMonthGridEndTime || m !== this._cachedMonthGridPxPerDay || h !== this._cachedMonthGridPxPerMonth) {
+			this._cachedMonthGridStartTime = f, this._cachedMonthGridEndTime = p, this._cachedMonthGridPxPerDay = m, this._cachedMonthGridPxPerMonth = h;
+			let e = new Date(this.option.calendar.start), t = this.getDateX(e), n = this.option.calendar.end, r = new Date(n.getFullYear(), n.getMonth() + 1, 1), i = this.option.calendar.pxPerMonth === void 0 ? this.getDateX(n) : this.getDateX(r), a = [], o = new Date(e);
+			for (o.setDate(1), o.setHours(0, 0, 0, 0); o <= r;) {
+				let e = this.getDateX(o);
+				if (e > t && e <= i) {
+					let t = o.getMonth() === 0;
+					a.push({
+						left: e,
+						isYearBoundary: t
+					});
+				}
+				o.setMonth(o.getMonth() + 1);
+			}
+			this._cachedMonthGridLines = a;
+		}
+		if (d = this._cachedMonthGridLines, this.option.calendar.showMonthsRow) l = "";
+		else if (this.option.calendar.showTime) {
+			let t = this.option.calendar.pxPerDay / 24, n = this.option.snapDuration ?? 60, r = this.option.calendar.pxPerDay / 1440 * n, i = this.option.calendar.pxPerDay, a = this.option.customTheme?.showTimeDateLine ?? e.monthGridLine ?? e.gridLine, o = this.option.calendar.start, s = (o.getHours() * 60 * 60 * 1e3 + o.getMinutes() * 60 * 1e3 + o.getSeconds() * 1e3) / (1440 * 60 * 1e3) * i, c = s % t, u = s % r, d = s === 0 ? "0px 0" : `${-s}px 0`, f = c === 0 ? "0px 0" : `${-c}px 0`, p = u === 0 ? "0px 0" : `${-u}px 0`, m = [
+				`linear-gradient(90deg, transparent ${i - 1}px, ${a} ${i - 1}px)`,
+				`linear-gradient(90deg, transparent ${t - 1}px, ${e.gridLine} ${t - 1}px)`,
+				`linear-gradient(90deg, transparent ${r - 1}px, ${e.subGridLine} ${r - 1}px)`
+			], h = [
+				`${i}px 100%`,
+				`${t}px 100%`,
+				`${r}px 100%`
+			], g = [
+				d,
+				f,
+				p
+			];
+			l = `
+        background-image: ${m.join(", ")};
+        background-size: ${h.join(", ")};
+        background-position: ${g.join(", ")};
+      `;
+		} else {
+			let t = this.option.calendar.pxPerDay, n = this.option.calendar.start, r = (n.getHours() * 60 * 60 * 1e3 + n.getMinutes() * 60 * 1e3 + n.getSeconds() * 1e3) / (1440 * 60 * 1e3) * t, i = r === 0 ? "0px 0" : `${-r}px 0`;
+			l = `
+        background-image: linear-gradient(90deg, transparent ${t - 1}px, ${e.gridLine} ${t - 1}px);
+        background-size: ${t}px 100%;
+        background-position: ${i};
+      `;
+		}
+		let g = this.option.enableRowReordering && !this.option.readOnly, _ = this.row.visible === !1, v = this.isSelected ? e.rowSelectedHeader : _ ? e.rowHiddenBg : e.rowHeaderBg, y = v.includes("gradient") ? `background: ${v};` : `background-color: ${v};`;
+		return n`
+      <style>
+        :host {
+          color: ${e.text};
+          background-color: ${_ ? e.rowHiddenBg : "transparent"};
+        }
+
+        .row-header {
+          cursor: ${g ? "grab" : "pointer"};
+          border-right: 1px solid ${e.border};
+          border-bottom: 1px solid ${e.border};
+          box-sizing: border-box;
+        }
+        .row-header:active {
+          cursor: ${g ? "grabbing" : "pointer"};
+        }
+        .bars-container {
+          border-bottom: 1px solid ${e.border};
+          box-sizing: border-box;
+        }
+        .hidden-row-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 5;
+          pointer-events: none;
+          opacity: 0.5;
+        }
+        .selected-row-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          pointer-events: none;
+          background-color: ${e.rowSelected};
+          opacity: 0.5;
+        }
+      </style>
+      <div class="row-container ${this.dropPosition ? `drop-${this.dropPosition}` : ""}">
+        <div
+          class="row-header"
+          style="width: ${this.option.rowHeader?.width ?? 150}px; ${y}"
+          draggable="${g ? "true" : "false"}"
+          @dragstart="${g ? this.handleDragStart : void 0}"
+          @click="${this.handleHeaderClick}"
+          @dblclick="${this.handleHeaderDblClick}"
+          @contextmenu="${this.handleHeaderContextMenu}"
+        >
+          <div
+            class="row-header-content"
+            style="${this.option.customRendering?.rowHeaderContent ? "padding: 0; height: 100%;" : ""}"
+          ></div>
+        </div>
+        <div class="bars-container" style="width: ${(() => {
+			if (this.option.calendar.pxPerMonth !== void 0) {
+				let e = this.option.calendar.end;
+				return this.getDateX(new Date(e.getFullYear(), e.getMonth() + 1, 1));
+			}
+			return this.getDateX(this.option.calendar.end);
+		})()}px">
+          ${this.option.calendar.showRowBackground !== !1 && !this.option.calendar.showMonthsRow ? n`<gantt-row-background .option="${this.option}" .theme="${this.theme}" .rowId="${this.row.id}" /> ` : ""}
+          ${this.isSelected ? n`<div class="selected-row-overlay"></div>` : ""}
+          ${l ? n`<div class="grid-background" style="${l}"></div>` : ""}
+          ${d ? d.map((t) => {
+			let r;
+			return r = t.isYearBoundary ? e.yearGridLine || e.monthGridLine || e.gridLine : this.option.calendar.showMonthsRow || this.option.calendar.showDays === !1 && !this.option.calendar.showWeeks ? e.gridLine : e.monthGridLine || e.gridLine, n`<div style="position: absolute; top: 0; left: ${t.left - 1}px; width: 1px; height: 100%; background-color: ${r}; pointer-events: none; z-index: 1;"></div>`;
+		}) : ""}
+          ${_ ? n`<div class="hidden-row-overlay" style="background: ${e.rowHiddenBg};"></div>` : ""}
+          ${u(r, (e) => e.id, (e) => {
+			let t = this.draggingTask?.id === e.id, r = !t && this.draggingTaskIds.length >= 2 && this.draggingTaskIds.includes(e.id), i = t ? {
+				...e,
+				start: this.draggingTask.start,
+				end: this.draggingTask.end
+			} : e, a = this.selectedTaskIds.includes(e.id), o = r ? this.multiDragDx : 0, s = t && this.draggingTaskIds.length >= 2;
+			return n`
+                <gantt-bar
+                  .task="${i}"
+                  .option="${this.option}"
+                  .lane="${e.lane}"
+                  .selected="${a}"
+                  .focused="${this.focusedTaskId === e.id}"
+                  .multiDragDx="${o}"
+                  .multiDragActive="${s}"
+                  .isExporting="${this.isExporting}"
+                />
+              `;
+		})}
+          ${(this.row.markers ?? []).map((e) => {
+			let t = Math.min(o, 12), r = this.getDateX(e.date), i = e.color ?? "#ef4444", a = e.anchor === "center", s = a ? c / 2 - t : (c - t) / 2, l = e.anchor === "start" ? r : e.anchor === "end" ? r - t : r - t / 2, u = e.anchor === "end";
+			return n`
+              <div
+                class="marker-wrapper"
+                style="
+                  position: absolute;
+                  left: ${l}px;
+                  top: ${s}px;
+                  z-index: 2;
+                  display: flex;
+                  ${a ? `flex-direction: column; align-items: center; width: ${t}px; overflow: visible;` : `align-items: center; ${u ? "flex-direction: row-reverse;" : ""}`}
+                  pointer-events: auto;
+                  cursor: default;
+                  white-space: nowrap;
+                "
+                title="${e.name ?? ""}"
+              >
+                <svg
+                  class="marker-icon"
+                  width="${t}"
+                  height="${t}"
+                  viewBox="0 0 ${t} ${t}"
+                  style="
+                    flex-shrink: 0;
+                    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+                    ${e.style ?? ""}
+                  "
+                >
+                  <path d="${this.getMarkerPath(e.type, t)}" fill="${i}" />
+                </svg>
+                ${e.name ? n`<span style="
+                      font-size: 10px;
+                      color: ${i};
+                      line-height: 1;
+                      ${a ? "padding: 1px 0 0 0;" : "padding: 0 2px;"}
+                    ">${e.name}</span>` : ""}
+              </div>
+            `;
+		})}
+        </div>
+      </div>
+    `;
+	}
+};
+V([s({ type: Object })], G.prototype, "row", void 0), V([s({ type: Object })], G.prototype, "option", void 0), V([s({ type: Boolean })], G.prototype, "isDragTarget", void 0), V([s({ type: Object })], G.prototype, "draggingTask", void 0), V([s({ type: Array })], G.prototype, "draggingTaskIds", void 0), V([s({ type: Number })], G.prototype, "multiDragDx", void 0), V([s({ type: Object })], G.prototype, "externalDragTask", void 0), V([s({ type: String })], G.prototype, "theme", void 0), V([s({
+	type: Boolean,
+	reflect: !0
+})], G.prototype, "isSelected", void 0), V([s({ type: String })], G.prototype, "dropPosition", void 0), V([s({ type: Array })], G.prototype, "selectedTaskIds", void 0), V([s({ type: String })], G.prototype, "focusedTaskId", void 0), V([s({
+	type: Boolean,
+	reflect: !0
+})], G.prototype, "isExporting", void 0), G = V([o("gantt-row")], G);
+//#endregion
+//#region src/components/gantt-chart-dependency-path.ts
+function K(e, t, n, r, i, a, o, s) {
+	let c = (n) => {
+		if (Math.abs(t - r) < 1) return `M ${e} ${t} L ${n} ${r}`;
+		if (e < n) {
+			let i = (e + n) / 2, a = r > t ? 1 : -1, o = Math.min(s, i - e, n - i, Math.abs(r - t) / 2);
+			return [
+				`M ${e} ${t}`,
+				`L ${i - o} ${t}`,
+				`Q ${i} ${t} ${i} ${t + a * o}`,
+				`L ${i} ${r - a * o}`,
+				`Q ${i} ${r} ${i + o} ${r}`,
+				`L ${n} ${r}`
+			].join(" ");
+		} else {
+			let i = Math.max(12, s + 4), c = e + i, l = n - i, u = (t + r) / 2, d = Math.abs(t - r) < a ? u + a + o : u, f = d - t, p = r - d, m = f >= 0 ? 1 : -1, h = p >= 0 ? 1 : -1, g = l - c, _ = g >= 0 ? 1 : -1, v = Math.min(s, i, Math.abs(f) / 2), y = Math.min(s, Math.abs(f) / 2, Math.abs(g) / 2), b = Math.min(s, Math.abs(g) / 2, Math.abs(p) / 2), x = Math.min(s, Math.abs(p) / 2, i);
+			return [
+				`M ${e} ${t}`,
+				`L ${c - v} ${t}`,
+				`Q ${c} ${t} ${c} ${t + m * v}`,
+				`L ${c} ${d - m * y}`,
+				`Q ${c} ${d} ${c + _ * y} ${d}`,
+				`L ${l - _ * b} ${d}`,
+				`Q ${l} ${d} ${l} ${d + h * b}`,
+				`L ${l} ${r - h * x}`,
+				`Q ${l} ${r} ${l + x} ${r}`,
+				`L ${n} ${r}`
+			].join(" ");
+		}
+	};
+	return {
+		pathD: c(i),
+		hitPathD: c(n)
+	};
+}
+//#endregion
+//#region src/components/gantt-chart-styles.ts
+var q = t`
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+  }
+  :host(:focus-visible) {
+    outline: 2px solid #3b82f6;
+    outline-offset: -2px;
+  }
+  .scroll-container {
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: auto;
+    position: relative;
+    overflow-anchor: none;
+  }
+  .dependency-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .tooltip {
+    position: fixed;
+    transform: translate(-50%, -100%);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1000;
+    margin-top: -6px;
+    text-align: left;
+    line-height: 1.4;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .tooltip.visible {
+    opacity: 1;
+  }
+  .tooltip-row {
+    display: block;
+  }
+  .tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px;
+    border-style: solid;
+  }
+  .drag-info-overlay {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 2000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .drag-info-overlay.visible {
+    opacity: 1;
+  }
+  .drag-info-sub {
+    font-size: 12px;
+  }
+  .dependency-line {
+    stroke-width: 2;
+    fill: none;
+    pointer-events: none;
+  }
+  .dependency-arrow-line {
+    stroke-width: 0;
+  }
+  .dependency-hit-area {
+    stroke-width: 16;
+    stroke: transparent;
+    fill: none;
+    pointer-events: stroke;
+    cursor: pointer;
+  }
+  .dependency-group:hover .dependency-line {
+    stroke-width: 3;
+    filter: drop-shadow(0 0 3px currentColor);
+  }
+  .dependency-group:hover .dependency-arrow-line {
+    stroke-width: 0;
+  }
+  .dependency-group:hover .dependency-hit-area ~ .dependency-line {
+    opacity: 1;
+  }
+  .current-time-line {
+    position: absolute;
+    width: 2px;
+    z-index: 60;
+    pointer-events: none;
+  }
+  .current-time-dot {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    z-index: 80;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+  }
+  .milestone-line {
+    position: absolute;
+    z-index: 59;
+    pointer-events: auto;
+    transition: opacity 0.2s ease;
+    cursor: default;
+  }
+  .cursor-line {
+    position: absolute;
+    width: 2px;
+    top: 0;
+    pointer-events: none;
+    z-index: 58;
+  }
+`;
+function J(e, t) {
+	let n = I(e, t);
+	return `
+    :host {
+      background: ${n.bg};
+      border: 1px solid ${n.border};
+      border-radius: 8px;
+      overflow: hidden;
+      color: ${n.text};
+    }
+    .tooltip {
+      background-color: ${n.tooltipBg};
+      color: ${n.tooltipText};
+    }
+    .tooltip::after {
+      border-color: ${n.tooltipBg} transparent transparent transparent;
+    }
+    .drag-info-overlay {
+      background: ${n.dragOverlayBg};
+      color: ${n.dragOverlayText};
+    }
+    .drag-info-sub {
+      color: ${n.dragOverlaySubText};
+    }
+    .dependency-line {
+      stroke: ${n.dependencyLine};
+    }
+    .connector-preview-line {
+      stroke: ${n.dependencyLine};
+      stroke-width: 2;
+      stroke-dasharray: 6 3;
+      fill: none;
+      opacity: 0.7;
+    }
+    .header-resizer {
+      width: 4px;
+      cursor: col-resize;
+      z-index: 510;
+      background-color: transparent;
+      transition: background-color 0.2s;
+    }
+    .header-resizer:hover,
+    .header-resizer.resizing {
+      background-color: ${n.border};
+    }
+  `;
+}
+//#endregion
+//#region src/components/gantt-chart-export.ts
+function Y(e, t) {
+	let n = document.createElement("a");
+	n.href = e, n.download = t, n.click();
+}
+async function X(e, t = "png", n = {}) {
+	let { filename: r = "gantt-chart", download: i = !1, scale: a = 2, splitHeight: o } = n, s = e.shadowRoot?.querySelector(".scroll-container"), c = s ? s.scrollWidth : e.scrollWidth, l = s ? s.scrollHeight : e.scrollHeight;
+	console.log("[export] splitHeight:", o, "scrollHeight:", l);
+	let u = await p(e, {
+		backgroundColor: "#ffffff",
+		scale: a,
+		width: c,
+		height: l,
+		windowWidth: c,
+		windowHeight: l
+	});
+	if (o && l > o) {
+		let t = 50, n = e.shadowRoot?.querySelector("gantt-calendar");
+		n && n.offsetHeight > 0 ? t = n.offsetHeight : e.calendarHeight && (t = e.calendarHeight), console.log("[export] Splitting Canvas. calendarHeight:", t);
+		let r = u.height / l, i = Math.floor(o * r), a = Math.floor(t * r), s = u.height, c = u.width, d = s - a, f = i - a;
+		if (f > 0) {
+			let e = Math.ceil(d / f), t = s + (e - 1) * a, n = document.createElement("canvas");
+			n.width = c, n.height = t;
+			let o = n.getContext("2d");
+			if (o) {
+				o.drawImage(u, 0, 0, c, i, 0, 0, c, i);
+				let d = i, p = i;
+				for (let t = 1; t < e; t++) {
+					o.drawImage(u, 0, 0, c, a, 0, p, c, a), p += a;
+					let e = s - d, t = Math.min(f, e);
+					o.drawImage(u, 0, d, c, t, 0, p, c, t), d += t, p += t;
+				}
+				u = n, l = t / r, console.log("[export] Split complete. new scrollHeight:", l);
+			} else console.warn("[export] Failed to get 2D context for new canvas. It might be too large.");
+		}
+	}
+	if (t === "pdf") {
+		let e = u.toDataURL("image/jpeg", .9), t = new m({
+			orientation: c > l ? "l" : "p",
+			unit: "px",
+			format: [c, l],
+			compress: !0
+		});
+		return t.addImage(e, "JPEG", 0, 0, c, l, void 0, "FAST"), i && t.save(`${r}.pdf`), t.output("blob");
+	} else {
+		let e = u.toDataURL("image/png");
+		return i && Y(e, `${r}.png`), e;
+	}
+}
+//#endregion
+//#region src/components/gantt-chart.ts
+var Z = class extends e {
+	constructor(...e) {
+		super(...e), this.rows = [], this.theme = "light", this.selectedRowIds = [], this.selectedTaskIds = [], this.externalDraggingTask = null, this.selectedRows = /* @__PURE__ */ new Set(), this.selectedTasks = /* @__PURE__ */ new Set(), this.lastClickedRowId = null, this.virtualScrollTop = 0, this.dragTargetRowIndex = null, this.draggingTask = null, this.draggingTaskIds = [], this.multiDragDx = 0, this.viewportHeight = 400, this.dragOverlayInfo = null, this.calendarHeight = 0, this.tooltip = null, this.dragOverRowId = null, this.dragOverPosition = null, this.currentTime = /* @__PURE__ */ new Date(), this.dragPreview = null, this.currentRowHeaderWidth = 150, this.isResizingHeader = !1, this.hoveredMilestoneId = null, this.cursorLineX = null, this.connectorDrag = null, this._systemThemeMediaQuery = null, this.isExporting = !1, this.focusedTaskId = null, this.focusedRowId = null, this._layoutCache = null, this.resizeObserver = null, this._cachedSelectedTaskIds = [], this._cachedSelectedTasksSize = -1, this._cachedCurrentOption = null, this._lastOptionRef = null, this._lastLabelWidth = -1, this.handleSystemThemeChange = (e) => {
+			(this.option?.theme === "system" || this.option?.theme !== "light" && this.option?.theme !== "dark") && (this.theme = e.matches ? "dark" : "light");
+		}, this.handleScroll = (e) => {
+			let t = e.target;
+			this.updateScrollTop(t.scrollTop), this.hoverTimer !== void 0 && window.clearTimeout(this.hoverTimer), this.tooltip &&= {
+				...this.tooltip,
+				visible: !1
+			};
+		}, this.updateScrollTop = f((e) => {
+			this.virtualScrollTop = e;
+		}, 100), this.handleContainerMouseMove = (e) => {
+			if (!this.option.calendar.showCursorLine) return;
+			let t = this.shadowRoot?.querySelector(".scroll-container");
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = e.clientX - n.left + t.scrollLeft;
+			if (r < this.currentRowHeaderWidth) {
+				this.cursorLineX = null;
+				return;
+			}
+			this.cursorLineX = r;
+		}, this.handleContainerMouseLeave = () => {
+			this.cursorLineX = null;
+		}, this.handleKeyDown = (e) => {
+			if (this.option.keyboard?.enabled === !1) return;
+			let t = e.composedPath()[0];
+			if (!(t !== this && t?.tagName && [
+				"INPUT",
+				"TEXTAREA",
+				"SELECT"
+			].includes(t.tagName))) switch (e.key) {
+				case "ArrowRight":
+					e.shiftKey && !this.option.readOnly ? this.moveSelectedTasksByKeyboard(1) : this.moveFocusHorizontal(1), e.preventDefault();
+					break;
+				case "ArrowLeft":
+					e.shiftKey && !this.option.readOnly ? this.moveSelectedTasksByKeyboard(-1) : this.moveFocusHorizontal(-1), e.preventDefault();
+					break;
+				case "ArrowDown":
+					this.moveFocusVertical(1), e.preventDefault();
+					break;
+				case "ArrowUp":
+					this.moveFocusVertical(-1), e.preventDefault();
+					break;
+				case "Enter":
+				case " ":
+					this.focusedTaskId && (e.ctrlKey || e.metaKey ? this.toggleTaskSelection(this.focusedTaskId) : this.selectSingleTask(this.focusedTaskId)), e.preventDefault();
+					break;
+				case "Escape":
+					this.clearSelection(), this.focusedTaskId = null, this.focusedRowId = null;
+					break;
+				case "Delete":
+				case "Backspace":
+					!this.option.readOnly && this.selectedTasks.size > 0 && this.dispatchEvent(new CustomEvent("task-delete", {
+						detail: {
+							taskIds: [...this.selectedTasks],
+							event: e
+						},
+						bubbles: !0,
+						composed: !0
+					})), e.preventDefault();
+					break;
+				case "Home":
+					this.focusFirstOrLastTaskInRow("first"), e.preventDefault();
+					break;
+				case "End":
+					this.focusFirstOrLastTaskInRow("last"), e.preventDefault();
+					break;
+			}
+		};
+	}
+	get displayRows() {
+		return this.option.showHiddenRows ? this.rows : this.rows.filter((e) => e.visible !== !1);
+	}
+	static {
+		this.styles = q;
+	}
+	firstUpdated() {
+		this.setupCurrentTimeTimer();
+		let e = this.shadowRoot?.getElementById("calendar");
+		this.resizeObserver = new ResizeObserver((t) => {
+			for (let n of t) n.target === this ? this.viewportHeight = n.contentRect.height : n.target === e && (this.calendarHeight = n.target.offsetHeight);
+		}), this.resizeObserver.observe(this), e && this.resizeObserver.observe(e);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._systemThemeMediaQuery = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null, this._systemThemeMediaQuery?.addEventListener("change", this.handleSystemThemeChange), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "grid"), this.setAttribute("aria-label", "Gantt Chart"), this.addEventListener("keydown", this.handleKeyDown), this.option?.theme === "system" || this.option?.theme !== "light" && this.option?.theme !== "dark" ? this.theme = this._systemThemeMediaQuery?.matches ? "dark" : "light" : this.theme = this.option.theme;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver?.disconnect(), this.stopCurrentTimeTimer(), this._systemThemeMediaQuery?.removeEventListener("change", this.handleSystemThemeChange), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	willUpdate(e) {
+		if (e.has("option") && (this.option?.theme === "light" || this.option?.theme === "dark" ? this.theme = this.option.theme : this._systemThemeMediaQuery && (this.theme = this._systemThemeMediaQuery.matches ? "dark" : "light")), e.has("option") && (this.setupCurrentTimeTimer(), this.isResizingHeader || (this.currentRowHeaderWidth = this.option.rowHeader?.width ?? 150)), (e.has("rows") || e.has("option") || e.has("currentRowHeaderWidth")) && (this._layoutCache = null), e.has("selectedRowIds")) {
+			let e = new Set(this.selectedRowIds);
+			(e.size !== this.selectedRows.size || ![...e].every((e) => this.selectedRows.has(e))) && (this.selectedRows = e);
+		}
+		if (e.has("selectedTaskIds")) {
+			let e = new Set(this.selectedTaskIds);
+			(e.size !== this.selectedTasks.size || ![...e].every((e) => this.selectedTasks.has(e))) && (this.selectedTasks = e);
+		}
+		(e.has("selectedTasks") || this._cachedSelectedTasksSize !== this.selectedTasks.size) && (this._cachedSelectedTaskIds = [...this.selectedTasks], this._cachedSelectedTasksSize = this.selectedTasks.size);
+	}
+	updated(e) {
+		if (super.updated(e), this.tooltip) {
+			let e = this.shadowRoot?.querySelector(".tooltip");
+			if (e) {
+				let t = this.option.customRendering?.tooltip ? this.option.customRendering.tooltip(this.tooltip.task) : void 0;
+				if (t) r(typeof t == "string" ? d(t) : t, e);
+				else {
+					let t = this.option.locale ?? A, i = !!this.option.calendar.pxPerMonth, a = Math.round((this.tooltip.task.end.getTime() - this.tooltip.task.start.getTime()) / (1e3 * 60 * 60 * 24));
+					if (i) {
+						let i = new Date(this.tooltip.task.end);
+						i.setMonth(i.getMonth() - 1), r(n`
+                <div style="font-weight: bold;">${this.tooltip.task.name}</div>
+                <div class="tooltip-row">
+                  ${t.yearMonthFormat(this.tooltip.task.start)} - ${t.yearMonthFormat(i)}
+                </div>
+                <div class="tooltip-row">${t.tooltip.duration(a)}</div>
+              `, e);
+					} else r(n`
+                <div style="font-weight: bold;">${this.tooltip.task.name}</div>
+                <div class="tooltip-row">
+                  ${t.dateFormat(this.tooltip.task.start)} - ${t.dateFormat(this.tooltip.task.end)}
+                </div>
+                <div class="tooltip-row">${t.tooltip.duration(a)}</div>
+              `, e);
+				}
+			}
+		}
+	}
+	updateDragOverlay() {
+		if (!this.dragOverlayInfo || this.option.showDragInfoOverlay === !1) return;
+		let e = I(this.theme, this.option.customTheme), t = this.shadowRoot?.querySelector(".drag-info-overlay");
+		if (!t) return;
+		t.classList.toggle("visible", this.dragOverlayInfo.visible), t.innerHTML = "";
+		let { targetRow: n } = this.dragOverlayInfo, i = this.option.customRendering?.dragInfo ? this.option.customRendering.dragInfo({
+			id: this.dragOverlayInfo.id,
+			name: this.dragOverlayInfo.name,
+			start: this.dragOverlayInfo.start,
+			end: this.dragOverlayInfo.end
+		}, this.dragOverlayInfo.currentStart, this.dragOverlayInfo.currentEnd, n) : void 0;
+		if (i && r(i, t), t.innerHTML === "") {
+			let r = this.option.locale ?? A, i = !!this.option.calendar.pxPerMonth, a, o;
+			if (i) {
+				let e = new Date(this.dragOverlayInfo.currentEnd);
+				e.setMonth(e.getMonth() - 1), a = r.yearMonthFormat(this.dragOverlayInfo.currentStart), o = r.yearMonthFormat(e);
+			} else a = r.dateTimeFormat(this.dragOverlayInfo.currentStart), o = r.dateTimeFormat(this.dragOverlayInfo.currentEnd);
+			t.innerHTML = `
+          <div style="font-weight: bold;">
+            ${this.dragOverlayInfo.name || r.dragOverlay.noTitle}
+          </div>
+          <div class="drag-info-sub">
+            ${a} -
+            ${o}
+            (${z(this.dragOverlayInfo.currentStart, this.dragOverlayInfo.currentEnd, this.option.locale)})
+          </div>
+          ${n ? `<div class="drag-info-sub" style="margin-top: 4px; border-top: 1px solid ${e.dragOverlayDivider}; padding-top: 4px; width: 100%;">${(this.option.locale ?? A).dragOverlay.moveTo(n.name)}</div>` : ""}`;
+		}
+		if (this.dragOverlayInfo.clientY !== void 0) {
+			let e = this.dragOverlayInfo.clientX ?? 0, n = this.dragOverlayInfo.clientY, r = this.getBoundingClientRect();
+			if (e < r.left || e > r.right || n < r.top || n > r.bottom) {
+				t.classList.remove("visible");
+				return;
+			}
+			let i = t.offsetWidth || 200, a = t.offsetHeight || 60, o = window.innerWidth, s = window.innerHeight, c = e - i / 2;
+			c = Math.max(8, Math.min(c, o - i - 8));
+			let l = n - a - 40;
+			l < 8 && (l = n + 40), l + a > s - 8 && (l = s - a - 8), t.style.left = `${c}px`, t.style.transform = "none", t.style.top = `${l}px`, t.style.bottom = "auto";
+		}
+	}
+	hideDragOverlay() {
+		let e = this.shadowRoot?.querySelector(".drag-info-overlay");
+		e && e.classList.remove("visible");
+	}
+	setupCurrentTimeTimer() {
+		this.stopCurrentTimeTimer();
+		let e = this.option.calendar.currentTimeUpdateInterval;
+		e && e > 0 && (this.currentTimeTimer = window.setInterval(() => {
+			this.currentTime = /* @__PURE__ */ new Date();
+		}, e));
+	}
+	stopCurrentTimeTimer() {
+		this.currentTimeTimer !== void 0 && (window.clearInterval(this.currentTimeTimer), this.currentTimeTimer = void 0);
+	}
+	handleHeaderResizeStart(e) {
+		e.preventDefault(), e.stopPropagation(), this.isResizingHeader = !0;
+		let t = e.clientX, n = this.currentRowHeaderWidth, r = e.target;
+		r.setPointerCapture(e.pointerId);
+		let i = this.option.rowHeader?.minWidth ?? 50, a = this.option.rowHeader?.maxWidth ?? 2 ** 53 - 1, o = (e) => {
+			let r = n + (e.clientX - t);
+			this.currentRowHeaderWidth = Math.max(i, Math.min(a, r));
+		}, s = () => {
+			this.isResizingHeader = !1, r.releasePointerCapture(e.pointerId), r.removeEventListener("pointermove", o), r.removeEventListener("pointerup", s);
+			let t = Math.round(this.currentRowHeaderWidth);
+			this.currentRowHeaderWidth = t, this.dispatchEvent(new CustomEvent("row-header-resize", {
+				detail: { width: t },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+		r.addEventListener("pointermove", o), r.addEventListener("pointerup", s);
+	}
+	getDateX(e) {
+		return N(e, this.option.calendar.start, this.option.calendar.pxPerDay ?? 50, this.option.calendar.pxPerMonth);
+	}
+	calculateLayout() {
+		if (this._layoutCache) return this._layoutCache;
+		let e = 0, t = this.currentRowHeaderWidth, n = /* @__PURE__ */ new Map(), r = {
+			layouts: this.displayRows.map((r) => {
+				let { tasksWithLanes: i, laneCount: a } = F(r.tasks), o = this.option.bar?.height ?? 28, s = this.option.bar?.margin ?? 4;
+				i.forEach((r) => {
+					let i = this.getDateX(r.start) + t, a = this.getDateX(r.end) + t - i, c = e + r.lane * (o + s) + s;
+					n.set(r.id, {
+						x: i,
+						y: c,
+						width: a,
+						height: o,
+						dependencies: r.dependencies
+					});
+				});
+				let c = a * (o + s) + s, l = {
+					top: e,
+					height: c
+				};
+				return e += c, l;
+			}),
+			taskCoords: n,
+			totalHeight: e
+		};
+		return this._layoutCache = r, r;
+	}
+	isMultiDrag(e) {
+		return this.selectedTasks.size >= 2 && this.selectedTasks.has(e);
+	}
+	handleTaskUpdate(e) {
+		e.stopPropagation();
+		let { id: t, start: n, end: r, dx: i, isDragging: a, mode: o } = e.detail, { dy: s } = e.detail, c = this.isMultiDrag(t);
+		c && (s = 0);
+		let l = n, u = r;
+		if (i !== void 0) {
+			let e = this.option.calendar.pxPerDay ?? 50, t = this.option.calendar.pxPerMonth, a = this.getDateX(n), o = this.getDateX(r);
+			l = P(a + i, this.option.calendar.start, e, t), u = P(o + i, this.option.calendar.start, e, t);
+		}
+		(this.option.calendar.pxPerMonth || this.option.snapDuration && this.option.snapDuration >= 43200) && (l.getDate() > 15 && l.setMonth(l.getMonth() + 1), l.setDate(1), l.setHours(0, 0, 0, 0), u.getDate() > 15 && u.setMonth(u.getMonth() + 1), u.setDate(1), u.setHours(0, 0, 0, 0));
+		let d = -1, f, p = -1;
+		if (this.rows.find((e, n) => {
+			let r = e.tasks.findIndex((e) => e.id === t);
+			return r === -1 ? !1 : (d = n, f = e.tasks[r], p = r, !0);
+		}), d === -1 || !f) return;
+		let { layouts: m } = this.calculateLayout(), h = this.displayRows.findIndex((e) => e.id === this.rows[d].id);
+		if (h === -1) return;
+		let g = m[h].top, { tasksWithLanes: _ } = F(this.rows[d].tasks), v = _.find((e) => e.id === t), y = v ? v.lane : 0, b = this.option.bar?.height ?? 28, x = this.option.bar?.margin ?? 4, S = g + (y * (b + x) + x) + s + b / 2, C = -1;
+		for (let e = 0; e < m.length; e++) {
+			let t = m[e];
+			if (S >= t.top && S < t.top + t.height) {
+				C = e;
+				break;
+			}
+		}
+		let w = C === -1 ? void 0 : this.displayRows[C].id, T = c ? [...this.selectedTasks] : void 0;
+		if (this.dispatchEvent(new CustomEvent("task-update", {
+			detail: {
+				...e.detail,
+				dy: s,
+				start: l,
+				end: u,
+				targetRowId: w,
+				selectedTaskIds: T
+			},
+			bubbles: !0,
+			composed: !0
+		})), a) {
+			if (this.hoverTimer !== void 0 && window.clearTimeout(this.hoverTimer), this.tooltip &&= null, (!this.draggingTask || this.draggingTask.id !== t) && (this.draggingTask = {
+				id: t,
+				name: e.detail.name,
+				start: n,
+				end: r,
+				currentStart: l,
+				currentEnd: u,
+				mode: o
+			}, c ? this.draggingTaskIds = [...this.selectedTasks] : this.draggingTaskIds = []), c ? this.multiDragDx = i ?? 0 : this.multiDragDx !== 0 && (this.multiDragDx = 0), !c) {
+				let e = C >= 0 ? C : null;
+				this.dragTargetRowIndex !== e && (this.dragTargetRowIndex = e);
+			}
+			c ? this.dragOverlayInfo = {
+				id: t,
+				name: (this.option.locale ?? A).dragOverlay.movingTasks(this.selectedTasks.size),
+				start: n,
+				end: r,
+				currentStart: l,
+				currentEnd: u,
+				visible: !0,
+				clientX: e.detail.x,
+				clientY: e.detail.y
+			} : this.dragOverlayInfo = {
+				id: t,
+				name: e.detail.name,
+				start: n,
+				end: r,
+				currentStart: l,
+				currentEnd: u,
+				targetRow: C >= 0 ? this.displayRows[C] : void 0,
+				visible: !0,
+				clientX: e.detail.x,
+				clientY: e.detail.y
+			}, this.updateDragOverlay();
+			return;
+		}
+		let E = this.draggingTaskIds.length >= 2;
+		this.draggingTask = null, this.draggingTaskIds = [], this.multiDragDx = 0, this.dragTargetRowIndex = null, this.dragOverlayInfo && (this.dragOverlayInfo = {
+			...this.dragOverlayInfo,
+			visible: !1
+		}, this.hideDragOverlay()), this.tooltip &&= {
+			...this.tooltip,
+			visible: !1
+		};
+		let D = -1;
+		if (C !== -1) {
+			let e = this.displayRows[C];
+			D = this.rows.findIndex((t) => t.id === e.id);
+		}
+		if (E && i !== void 0) {
+			let e = this.option.calendar.pxPerDay ?? 50, t = this.option.calendar.pxPerMonth, n = this.rows.map((n) => n.tasks.some((e) => this.selectedTasks.has(e.id)) ? {
+				...n,
+				tasks: n.tasks.map((n) => {
+					if (!this.selectedTasks.has(n.id)) return n;
+					let r = this.getDateX(n.start), a = this.getDateX(n.end), o = P(r + i, this.option.calendar.start, e, t), s = P(a + i, this.option.calendar.start, e, t);
+					return (this.option.calendar.pxPerMonth || this.option.snapDuration && this.option.snapDuration >= 43200) && (o.getDate() > 15 && o.setMonth(o.getMonth() + 1), o.setDate(1), o.setHours(0, 0, 0, 0), s.getDate() > 15 && s.setMonth(s.getMonth() + 1), s.setDate(1), s.setHours(0, 0, 0, 0)), {
+						...n,
+						start: o,
+						end: s
+					};
+				})
+			} : n);
+			requestAnimationFrame(() => {
+				this.rows = n, this.dispatchEvent(new CustomEvent("rows-change", {
+					detail: this.rows,
+					bubbles: !0,
+					composed: !0
+				}));
+			});
+			return;
+		}
+		if (o === "copy") {
+			if (D !== -1) {
+				let e = [...this.rows], t = { ...e[D] };
+				t.tasks = [...t.tasks];
+				let n = `task-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, r = {
+					...f,
+					id: n,
+					start: l,
+					end: u,
+					dependencies: []
+				};
+				t.tasks.push(r), e[D] = t, requestAnimationFrame(() => {
+					this.rows = e, this.dispatchEvent(new CustomEvent("rows-change", {
+						detail: this.rows,
+						bubbles: !0,
+						composed: !0
+					}));
+				});
+			}
+		} else {
+			let e = [...this.rows], t = { ...e[d] };
+			if (t.tasks = [...t.tasks], e[d] = t, D !== -1 && d !== D) {
+				let n = { ...e[D] };
+				n.tasks = [...n.tasks], e[D] = n;
+				let [r] = t.tasks.splice(p, 1);
+				n.tasks.push({
+					...r,
+					start: l,
+					end: u
+				});
+			} else t.tasks[p] = {
+				...f,
+				start: l,
+				end: u
+			};
+			requestAnimationFrame(() => {
+				this.rows = e, this.dispatchEvent(new CustomEvent("rows-change", {
+					detail: this.rows,
+					bubbles: !0,
+					composed: !0
+				}));
+			});
+		}
+	}
+	handleBarMouseEnter(e) {
+		if (this.draggingTask || this.option.showTooltip === !1) return;
+		this.hoverTimer !== void 0 && window.clearTimeout(this.hoverTimer);
+		let t = this.option.tooltipDelay ?? 500;
+		t > 0 ? this.hoverTimer = window.setTimeout(() => {
+			this.tooltip = {
+				...e.detail,
+				visible: !0
+			};
+		}, t) : this.tooltip = {
+			...e.detail,
+			visible: !0
+		};
+	}
+	handleBarMouseLeave() {
+		this.hoverTimer !== void 0 && window.clearTimeout(this.hoverTimer), this.tooltip &&= {
+			...this.tooltip,
+			visible: !1
+		};
+	}
+	async reorderRows(e, t, n) {
+		let r = Array.isArray(e) ? e : [e], i = Array.from(this.shadowRoot?.querySelectorAll("gantt-row") ?? []), a = /* @__PURE__ */ new Map();
+		i.forEach((e) => {
+			e.row && a.set(e.row.id, e.getBoundingClientRect().top);
+		});
+		let o = [...this.rows], s = [];
+		if (o.findIndex((e) => e.id === t) === -1) return;
+		r.forEach((e) => {
+			let t = o.findIndex((t) => t.id === e);
+			t !== -1 && s.push(o[t]);
+		});
+		let c = o.filter((e) => !r.includes(e.id));
+		if (r.includes(t)) return;
+		let l = c.findIndex((e) => e.id === t);
+		n === "bottom" && l++, c.splice(l, 0, ...s), this.rows = c, await this.updateComplete, Array.from(this.shadowRoot?.querySelectorAll("gantt-row") ?? []).forEach((e) => {
+			if (e.row) {
+				let t = a.get(e.row.id);
+				if (t !== void 0) {
+					let n = t - e.getBoundingClientRect().top;
+					n !== 0 && e.animate([{
+						transform: `translateY(${n}px)`,
+						zIndex: "1"
+					}, {
+						transform: "translateY(0)",
+						zIndex: "1"
+					}], {
+						duration: 300,
+						easing: "ease-out"
+					});
+				}
+			}
+		}), this.dispatchEvent(new CustomEvent("row-reordered", {
+			detail: {
+				sourceId: r[0],
+				sourceIds: r,
+				targetId: t,
+				position: n,
+				rows: this.rows
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("rows-change", {
+			detail: this.rows,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleContainerDragOver(e) {
+		e.preventDefault();
+		let t = e.dataTransfer && e.dataTransfer.types.includes("application/json");
+		if (t && (e.dataTransfer.dropEffect = "copy"), !this.option.enableRowReordering && !t) return;
+		let n = this.shadowRoot?.querySelector(".scroll-container");
+		if (!n) return;
+		let r = n.getBoundingClientRect(), i = e.clientY - r.top + n.scrollTop - this.calendarHeight, { layouts: a } = this.calculateLayout(), o = -1;
+		for (let e = 0; e < a.length; e++) {
+			let t = a[e];
+			if (i >= t.top && i < t.top + t.height) {
+				o = e;
+				break;
+			}
+		}
+		if (o !== -1) {
+			let s = this.displayRows[o];
+			if (t) {
+				if ((this.dragOverRowId !== s.id || this.dragOverPosition !== null) && (this.dragOverRowId = s.id, this.dragOverPosition = null), this.externalDraggingTask) {
+					let t = this.currentRowHeaderWidth, i = n.scrollLeft, a = e.clientX - r.left + i - t, o = this.option.calendar.pxPerDay ?? 50, c = this.option.calendar.pxPerMonth, l = this.option.snapDuration ?? 1440, u = o / 1440 * l, d = P(Math.round(a / u) * u, this.option.calendar.start, o, c), f = this.externalDraggingTask.end.getTime() - this.externalDraggingTask.start.getTime(), p = new Date(d.getTime() + f);
+					(!this.dragPreview || this.dragPreview.rowId !== s.id || this.dragPreview.currentStart.getTime() !== d.getTime()) && (this.dragPreview = {
+						task: this.externalDraggingTask,
+						currentStart: d,
+						currentEnd: p,
+						rowId: s.id
+					});
+				}
+			} else {
+				let e = a[o], t = i - e.top < e.height / 2 ? "top" : "bottom";
+				(this.dragOverRowId !== s.id || this.dragOverPosition !== t) && (this.dragOverRowId = s.id, this.dragOverPosition = t);
+			}
+		} else this.dragOverRowId = null, this.dragOverPosition = null, this.dragPreview = null;
+	}
+	handleContainerDragLeave(e) {
+		let t = this.shadowRoot?.querySelector(".scroll-container"), n = e.relatedTarget;
+		t && t.contains(n) || (this.dragOverRowId = null, this.dragOverPosition = null, this.dragPreview = null);
+	}
+	handleContainerDrop(e) {
+		e.preventDefault();
+		let t = e.dataTransfer?.getData("application/json");
+		if (t) {
+			this.handleExternalTaskDrop(e, t), this.dragOverRowId = null, this.dragOverPosition = null, this.dragPreview = null;
+			return;
+		}
+		if (!this.option.enableRowReordering) return;
+		let n = e.dataTransfer?.getData("text/plain"), r = this.dragOverRowId, i = this.dragOverPosition;
+		if (this.dragOverRowId = null, this.dragOverPosition = null, this.dragPreview = null, n && r && n !== r && i) if (this.selectedRows.has(n) && this.selectedRows.size > 1) {
+			let e = Array.from(this.selectedRows);
+			this.reorderRows(e, r, i);
+		} else this.reorderRows(n, r, i);
+	}
+	handleExternalTaskDrop(e, t) {
+		try {
+			let n = JSON.parse(t), r = this.shadowRoot?.querySelector(".scroll-container");
+			if (!r) return;
+			let i = r.getBoundingClientRect(), a = r.scrollLeft, o = r.scrollTop, s = this.currentRowHeaderWidth, c = e.clientX - i.left + a - s, l = this.option.calendar.pxPerDay ?? 50, u = this.option.calendar.pxPerMonth, d = P(c, this.option.calendar.start, l, u), f = e.clientY - i.top + o - this.calendarHeight, { layouts: p } = this.calculateLayout(), m;
+			for (let e = 0; e < p.length; e++) {
+				let t = p[e];
+				if (f >= t.top && f < t.top + t.height) {
+					m = this.displayRows[e].id;
+					break;
+				}
+			}
+			m && this.dispatchEvent(new CustomEvent("task-drop", {
+				detail: {
+					task: n,
+					dropDate: d,
+					targetRowId: m
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		} catch (e) {
+			console.warn("Failed to parse dropped task data", e);
+		}
+	}
+	handleRowClicked(e) {
+		let { rowId: t, event: n } = e.detail, { shiftKey: r, ctrlKey: i, metaKey: a } = n, o = new Set(this.selectedRows);
+		if (r && this.lastClickedRowId) {
+			let e = this.rows.findIndex((e) => e.id === this.lastClickedRowId), n = this.rows.findIndex((e) => e.id === t);
+			if (e !== -1 && n !== -1) {
+				let t = Math.min(e, n), r = Math.max(e, n);
+				for (let e = t; e <= r; e++) o.add(this.rows[e].id);
+			}
+		} else if (i || a) o.has(t) ? o.delete(t) : o.add(t), this.lastClickedRowId = t;
+		else {
+			if (o.has(t)) {
+				this.lastClickedRowId = t;
+				return;
+			}
+			o.clear(), o.add(t), this.lastClickedRowId = t;
+		}
+		this.selectedRows = o, this.dispatchEvent(new CustomEvent("row-selection-change", {
+			detail: { selectedIds: Array.from(this.selectedRows) },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleRowContextMenu(e) {
+		this.selectedRows.has(e.detail.rowId) || this.handleRowClicked(e);
+	}
+	handleContainerClick(e) {
+		e.defaultPrevented || this.clearSelection();
+	}
+	handleContainerContextMenu(e) {
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		let t = this.shadowRoot?.querySelector(".scroll-container");
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = t.scrollLeft, i = t.scrollTop, a = this.currentRowHeaderWidth, o = e.clientY - n.top + i - this.calendarHeight, { layouts: s } = this.calculateLayout(), c;
+		for (let e = 0; e < s.length; e++) {
+			let t = s[e];
+			if (o >= t.top && o < t.top + t.height) {
+				c = this.displayRows[e].id;
+				break;
+			}
+		}
+		if (c) {
+			let t = e.clientX - n.left + r - a, i = this.option.calendar.pxPerDay ?? 50, o = this.option.calendar.pxPerMonth, s = P(t, this.option.calendar.start, i, o);
+			this.dispatchEvent(new CustomEvent("chart-contextmenu", {
+				detail: {
+					event: e,
+					date: s,
+					rowId: c
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		this.clearSelection();
+	}
+	hitTest(e, t) {
+		let n = this.shadowRoot?.querySelector(".scroll-container");
+		if (!n) return null;
+		let r = n.getBoundingClientRect(), i = n.scrollLeft, a = n.scrollTop, o = this.currentRowHeaderWidth, s = t - r.top + a - this.calendarHeight, { layouts: c } = this.calculateLayout(), l;
+		for (let e = 0; e < c.length; e++) {
+			let t = c[e];
+			if (s >= t.top && s < t.top + t.height) {
+				l = this.displayRows[e].id;
+				break;
+			}
+		}
+		if (!l) return null;
+		let u = e - r.left + i - o, d = this.option.calendar.pxPerDay ?? 50, f = this.option.calendar.pxPerMonth, p = P(u, this.option.calendar.start, d, f);
+		return {
+			rowId: l,
+			date: p
+		};
+	}
+	async exportImage(e = "png", t = {}) {
+		this.isExporting = !0, await this.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+		try {
+			return await X(this, e, t);
+		} finally {
+			this.isExporting = !1, await this.updateComplete;
+		}
+	}
+	clearSelection() {
+		this.selectedRows.size === 0 && this.selectedTasks.size === 0 || (this.selectedRows.size > 0 && (this.selectedRows = /* @__PURE__ */ new Set(), this.dispatchEvent(new CustomEvent("row-selection-change", {
+			detail: { selectedIds: [] },
+			bubbles: !0,
+			composed: !0
+		}))), this.selectedTasks.size > 0 && (this.selectedTasks = /* @__PURE__ */ new Set(), this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [] },
+			bubbles: !0,
+			composed: !0
+		}))));
+	}
+	moveFocusHorizontal(e) {
+		let t = this.displayRows;
+		if (t.length === 0) return;
+		if (!this.focusedTaskId || !this.focusedRowId) {
+			this.focusFirstAvailableTask();
+			return;
+		}
+		let n = t.findIndex((e) => e.id === this.focusedRowId);
+		if (n === -1) {
+			this.focusFirstAvailableTask();
+			return;
+		}
+		let r = t[n], i = [...r.tasks].sort((e, t) => e.start.getTime() - t.start.getTime()), a = i.findIndex((e) => e.id === this.focusedTaskId);
+		if (a === -1) {
+			i.length > 0 && this.setFocus(i[0].id, r.id);
+			return;
+		}
+		let o = a + e;
+		o >= 0 && o < i.length ? this.setFocus(i[o].id, r.id) : this.moveFocusVertical(e);
+	}
+	moveFocusVertical(e) {
+		let t = this.displayRows;
+		if (t.length === 0) return;
+		if (!this.focusedTaskId || !this.focusedRowId) {
+			this.focusFirstAvailableTask();
+			return;
+		}
+		let n = t.findIndex((e) => e.id === this.focusedRowId);
+		if (n === -1) {
+			this.focusFirstAvailableTask();
+			return;
+		}
+		for (let r = n + e; r >= 0 && r < t.length; r += e) {
+			let n = t[r];
+			if (n.tasks.length > 0) {
+				let t = [...n.tasks].sort((e, t) => e.start.getTime() - t.start.getTime()), r = e > 0 ? t[0] : t[t.length - 1];
+				this.setFocus(r.id, n.id);
+				return;
+			}
+		}
+	}
+	focusFirstAvailableTask() {
+		for (let e of this.displayRows) if (e.tasks.length > 0) {
+			let t = [...e.tasks].sort((e, t) => e.start.getTime() - t.start.getTime());
+			this.setFocus(t[0].id, e.id);
+			return;
+		}
+	}
+	focusFirstOrLastTaskInRow(e) {
+		if (!this.focusedRowId) {
+			this.focusFirstAvailableTask();
+			return;
+		}
+		let t = this.displayRows.find((e) => e.id === this.focusedRowId);
+		if (!t || t.tasks.length === 0) return;
+		let n = [...t.tasks].sort((e, t) => e.start.getTime() - t.start.getTime()), r = e === "first" ? n[0] : n[n.length - 1];
+		this.setFocus(r.id, t.id);
+	}
+	setFocus(e, t) {
+		this.focusedTaskId = e, this.focusedRowId = t, this.scrollToTask(e);
+	}
+	toggleTaskSelection(e) {
+		let t = new Set(this.selectedTasks);
+		t.has(e) ? t.delete(e) : t.add(e), this.selectedTasks = t, this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [...t] },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	selectSingleTask(e) {
+		this.selectedTasks = new Set([e]), this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [e] },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	moveSelectedTasksByKeyboard(e) {
+		if (this.selectedTasks.size === 0) return;
+		let t = (this.option.keyboard?.moveStep ?? this.option.snapDuration ?? 1440) * 60 * 1e3 * e, n = this.rows.map((e) => e.tasks.some((e) => this.selectedTasks.has(e.id)) ? {
+			...e,
+			tasks: e.tasks.map((e) => this.selectedTasks.has(e.id) ? {
+				...e,
+				start: new Date(e.start.getTime() + t),
+				end: new Date(e.end.getTime() + t)
+			} : e)
+		} : e);
+		for (let e of this.rows) for (let n of e.tasks) {
+			if (!this.selectedTasks.has(n.id)) continue;
+			let r = new Date(n.start.getTime() + t), i = new Date(n.end.getTime() + t);
+			this.dispatchEvent(new CustomEvent("task-update", {
+				detail: {
+					id: n.id,
+					name: n.name,
+					start: r,
+					end: i,
+					dx: 0,
+					dy: 0,
+					isDragging: !1,
+					mode: "move",
+					targetRowId: e.id
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		this.rows = n, this.dispatchEvent(new CustomEvent("rows-change", {
+			detail: this.rows,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleBarClick(e) {
+		e.stopPropagation();
+		let { task: t, isMultiSelect: n } = e.detail;
+		this.draggingTask = null, this.dragTargetRowIndex = null, this.dragOverlayInfo && (this.dragOverlayInfo = {
+			...this.dragOverlayInfo,
+			visible: !1
+		}, this.hideDragOverlay());
+		let r;
+		n ? (r = new Set(this.selectedTasks), r.has(t.id) ? r.delete(t.id) : r.add(t.id)) : r = new Set([t.id]), this.selectedTasks = r, this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [...r] },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleBarContextMenu(e) {
+		let { task: t } = e.detail;
+		this.selectedTasks.has(t.id) || (this.selectedTasks = new Set([t.id]), this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [t.id] },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	handleConnectorDragStart(e) {
+		let { taskId: t, endpoint: n, clientX: r, clientY: i } = e.detail;
+		e.stopPropagation();
+		let { taskCoords: a } = this.calculateLayout(), o = a.get(t), s = this.currentRowHeaderWidth, c = e.detail.startX + s, l = e.detail.startY;
+		o && (c = n === "start" ? o.x : o.x + o.width, l = o.y + o.height / 2), this.connectorDrag = {
+			sourceTaskId: t,
+			sourceEndpoint: n,
+			startX: c,
+			startY: l,
+			currentClientX: r,
+			currentClientY: i,
+			targetTaskId: null,
+			targetEndpoint: null
+		}, this.tooltip &&= null;
+	}
+	handleConnectorDragMove(e) {
+		if (!this.connectorDrag) return;
+		e.stopPropagation();
+		let { clientX: t, clientY: n } = e.detail, r = this.shadowRoot?.querySelector(".scroll-container");
+		if (!r) return;
+		let i = r.getBoundingClientRect(), a = t - i.left + r.scrollLeft, o = n - i.top + r.scrollTop - this.calendarHeight, { taskCoords: s } = this.calculateLayout(), c = null, l = null, u = 30;
+		for (let [e, t] of s) {
+			if (e === this.connectorDrag.sourceTaskId) continue;
+			let n = t.y + t.height / 2, r = t.x, i = t.x + t.width, s = Math.sqrt((a - r) ** 2 + (o - n) ** 2), d = Math.sqrt((a - i) ** 2 + (o - n) ** 2);
+			s < u && (u = s, c = e, l = "start"), d < u && (u = d, c = e, l = "end");
+		}
+		let d = this.connectorDrag.targetTaskId;
+		d !== c && (d && this._setConnectorDropTarget(d, !1), c && this._setConnectorDropTarget(c, !0)), this.connectorDrag = {
+			...this.connectorDrag,
+			currentClientX: t,
+			currentClientY: n,
+			targetTaskId: c,
+			targetEndpoint: l
+		};
+	}
+	handleConnectorDragEnd(e) {
+		if (!this.connectorDrag) return;
+		e.stopPropagation();
+		let { cancelled: t } = e.detail, { sourceTaskId: n, sourceEndpoint: r, targetTaskId: i, targetEndpoint: a } = this.connectorDrag;
+		i && this._setConnectorDropTarget(i, !1), !t && i && a && this.dispatchEvent(new CustomEvent("dependency-create", {
+			detail: {
+				sourceTaskId: n,
+				sourceEndpoint: r,
+				targetTaskId: i,
+				targetEndpoint: a
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.connectorDrag = null;
+	}
+	_setConnectorDropTarget(e, t) {
+		let n = this.shadowRoot?.querySelectorAll("gantt-row");
+		if (n) for (let r of n) {
+			let n = r.shadowRoot?.querySelectorAll("gantt-bar");
+			if (n) {
+				for (let r of n) if (r.task?.id === e) {
+					r.connectorDropTarget = t;
+					return;
+				}
+			}
+		}
+	}
+	handleDependencyLineClick(e, t, n) {
+		this.dispatchEvent(new CustomEvent("dependency-click", {
+			detail: {
+				event: e,
+				sourceTaskId: n,
+				targetTaskId: t
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	selectTask(e) {
+		let t = !1;
+		for (let n of this.displayRows) if (n.tasks.some((t) => t.id === e)) {
+			t = !0;
+			break;
+		}
+		return t ? (this.selectedTasks = new Set([e]), this.dispatchEvent(new CustomEvent("bar-selection-change", {
+			detail: { selectedIds: [e] },
+			bubbles: !0,
+			composed: !0
+		})), this.scrollToTask(e), !0) : !1;
+	}
+	scrollToTask(e) {
+		let { taskCoords: t } = this.calculateLayout(), n = t.get(e);
+		if (!n) return;
+		let r = this.shadowRoot?.querySelector(".scroll-container");
+		if (!r) return;
+		let i = this.currentRowHeaderWidth, a = n.y + this.calendarHeight, o = a + n.height, s = r.scrollTop, c = r.scrollTop + r.clientHeight;
+		if (a < s || o > c) {
+			let e = a - r.clientHeight / 2 + n.height / 2;
+			r.scrollTo({
+				top: Math.max(0, e),
+				behavior: "smooth"
+			});
+		}
+		let l = n.x, u = n.x + n.width, d = r.scrollLeft + i, f = r.scrollLeft + r.clientWidth;
+		if (l < d || u > f) {
+			let e = l - i - 20;
+			r.scrollTo({
+				left: Math.max(0, e),
+				behavior: "smooth"
+			});
+		}
+	}
+	render() {
+		let e = I(this.theme, this.option.customTheme), { layouts: t, taskCoords: r, totalHeight: a } = this.calculateLayout(), o = this.currentRowHeaderWidth;
+		(this._lastOptionRef !== this.option || this._lastLabelWidth !== o) && (this._cachedCurrentOption = {
+			...this.option,
+			rowHeader: {
+				...this.option.rowHeader,
+				width: o
+			}
+		}, this._lastOptionRef = this.option, this._lastLabelWidth = o);
+		let s = this._cachedCurrentOption, c = 0, l = this.displayRows.length - 1;
+		if (!this.isExporting) {
+			for (let e = 0; e < t.length; e++) if (t[e].top + t[e].height > this.virtualScrollTop) {
+				c = Math.max(0, e - 5);
+				break;
+			}
+			for (let e = c; e < t.length; e++) if (t[e].top > this.virtualScrollTop + this.viewportHeight) {
+				l = Math.min(this.displayRows.length - 1, e + 5);
+				break;
+			}
+		}
+		let d = this.displayRows.slice(c, l + 1), f = this.isExporting ? 0 : t[c] ? t[c].top : 0, p = t[l], m = p ? p.top + p.height : 0, h = Math.max(0, a - m), g = a > this.viewportHeight, _ = [], v = this.option.readOnly === !0, y = this.option.dependency?.showArrows !== !1, b = this.option.dependency?.arrowSize ?? 8, x = this.option.dependency?.lineStyle ?? "orthogonal", S = this.option.dependency?.cornerRadius ?? 8;
+		for (let [e, t] of r) if (t.dependencies) for (let n of t.dependencies) {
+			let a = r.get(n);
+			if (a) {
+				let r = a.x + a.width, o = a.y + a.height / 2, s = t.x, c = t.y + t.height / 2, l = r < s, u = y ? s - b : s, d = l ? Math.max(r, u) : u, f, p, m, h = this.option.bar?.height ?? 28, g = this.option.bar?.margin ?? 4;
+				if (Math.abs(o - c) < 1 && l) f = d > r ? `M ${r} ${o} L ${d} ${c}` : "", p = s > r ? `M ${r} ${o} L ${s} ${c}` : "";
+				else if (x === "orthogonal") {
+					let e = K(r, o, s, c, d, h, g, S);
+					f = e.pathD, p = e.hitPathD;
+				} else if (l) {
+					let e = (r + d) / 2;
+					f = `M ${r} ${o} C ${e} ${o} ${e} ${c} ${d} ${c}`, p = `M ${r} ${o} C ${(r + s) / 2} ${o} ${(r + s) / 2} ${c} ${s} ${c}`;
+				} else {
+					let e = Math.max(12, (r - s) * .15), t = (o + c) / 2, n = Math.abs(o - c) < h ? t + h + g : t;
+					f = `M ${r} ${o} C ${r + e} ${o}, ${r + e} ${n}, ${(r + d) / 2} ${n} S ${d - e} ${c}, ${d} ${c}`, p = `M ${r} ${o} C ${r + e} ${o}, ${r + e} ${n}, ${(r + s) / 2} ${n} S ${s - e} ${c}, ${s} ${c}`;
+				}
+				m = y ? `M ${d} ${c} L ${s} ${c}` : "", _.push(i`<g class="dependency-group">
+                ${v ? "" : i`<path class="dependency-hit-area" d="${p}" @click="${(t) => {
+					t.stopPropagation(), this.handleDependencyLineClick(t, e, n);
+				}}" />`}
+                <path class="dependency-line" d="${f}" />
+                ${y ? i`<path class="dependency-line dependency-arrow-line" d="${m}" marker-end="url(#dependency-arrowhead)" />` : ""}
+              </g>`);
+			}
+		}
+		let C = null;
+		if (this.connectorDrag) {
+			let e = this.shadowRoot?.querySelector(".scroll-container");
+			if (e) {
+				let t = e.getBoundingClientRect(), n = this.connectorDrag.startX, a = this.connectorDrag.startY, o, s;
+				if (this.connectorDrag.targetTaskId && this.connectorDrag.targetEndpoint) {
+					let n = r.get(this.connectorDrag.targetTaskId);
+					n ? (o = this.connectorDrag.targetEndpoint === "start" ? n.x : n.x + n.width, s = n.y + n.height / 2) : (o = this.connectorDrag.currentClientX - t.left + e.scrollLeft, s = this.connectorDrag.currentClientY - t.top + e.scrollTop - this.calendarHeight);
+				} else o = this.connectorDrag.currentClientX - t.left + e.scrollLeft, s = this.connectorDrag.currentClientY - t.top + e.scrollTop - this.calendarHeight;
+				let c = (n + o) / 2;
+				C = i`<path class="connector-preview-line" d="M ${n} ${a} C ${c} ${a} ${c} ${s} ${o} ${s}" />`;
+			}
+		}
+		return n`
+      <style>${J(this.theme, this.option.customTheme)}</style>
+      ${this.isExporting ? n`<style>:host { overflow: visible !important; height: ${this.calendarHeight + a + 2}px !important; width: max-content !important; min-width: auto !important; }</style>` : ""}
+      <div
+        class="scroll-container"
+        style="overflow-x: ${this.isExporting ? "visible" : "auto"}; overflow-y: ${this.isExporting ? "visible" : g ? "auto" : "hidden"}; height: ${this.isExporting ? "auto" : "100%"}; width: ${this.isExporting ? "max-content" : "100%"}; min-width: auto;"
+        @scroll="${this.handleScroll}"
+        @bar-mouseenter="${this.handleBarMouseEnter}"
+        @bar-mouseleave="${this.handleBarMouseLeave}"
+        @dragover="${this.handleContainerDragOver}"
+        @dragleave="${this.handleContainerDragLeave}"
+        @drop="${this.handleContainerDrop}"
+        @click="${this.handleContainerClick}"
+        @contextmenu="${this.handleContainerContextMenu}"
+        @mousemove="${this.handleContainerMouseMove}"
+        @mouseleave="${this.handleContainerMouseLeave}"
+        @connector-drag-start="${this.handleConnectorDragStart}"
+        @connector-drag-move="${this.handleConnectorDragMove}"
+        @connector-drag-end="${this.handleConnectorDragEnd}"
+      >
+        ${this.option.rowHeader?.resizable === !1 ? "" : n`
+              <div
+                style="
+                  position: sticky;
+                  left: ${o - 2}px;
+                  top: 0;
+                  width: 0;
+                  height: 0;
+                  z-index: 510;
+                  overflow: visible;
+                "
+              >
+                <div
+                  class="header-resizer ${this.isResizingHeader ? "resizing" : ""}"
+                  style="height: ${this.isExporting ? a : Math.max(a, this.viewportHeight)}px;"
+                  @pointerdown="${this.handleHeaderResizeStart}"
+                ></div>
+              </div>
+            `}
+        <gantt-calendar
+          id="calendar"
+          .option="${s}"
+          .theme="${this.theme}"
+          .currentTime="${this.currentTime}"
+          .hoveredMilestoneId="${this.hoveredMilestoneId}"
+          .cornerContent="${this.option.customRendering?.cornerContent}"
+          .calendarMonthContent="${this.option.customRendering?.calendarMonthContent}"
+          .calendarDayContent="${this.option.customRendering?.calendarDayContent}"
+          .calendarWeekContent="${this.option.customRendering?.calendarWeekContent}"
+          .calendarHourContent="${this.option.customRendering?.calendarHourContent}"
+          @milestone-hover-change="${(e) => {
+			this.hoveredMilestoneId = e.detail.milestoneId;
+		}}"
+        ></gantt-calendar>
+
+        <svg
+          class="dependency-lines"
+          style="top: 0;"
+          width="${this.getDateX(this.option.calendar.end) + o}"
+          height="${a + this.calendarHeight}"
+        >
+          ${y ? i`<defs>
+                <marker
+                  id="dependency-arrowhead"
+                  markerWidth="${b}"
+                  markerHeight="${b}"
+                  refX="${b}"
+                  refY="${b / 2}"
+                  orient="auto"
+                  markerUnits="userSpaceOnUse"
+                >
+                  <polygon
+                    points="0 0, ${b} ${b / 2}, 0 ${b}"
+                    fill="${e.dependencyLine}"
+                    class="dependency-arrowhead-fill"
+                  />
+                </marker>
+              </defs>` : ""}
+          <g transform="translate(0, ${this.calendarHeight})">
+            ${_}
+            ${C}
+          </g>
+        </svg>
+
+        ${this.option.calendar.showCurrentTime && this.currentTime >= this.option.calendar.start && this.currentTime <= this.option.calendar.end ? n`
+              <div
+                class="current-time-line"
+                style="
+                  top: ${this.calendarHeight}px;
+                  left: ${this.getDateX(this.currentTime) + o}px;
+                  height: ${a}px;
+                  background-color: ${e.currentTimeLine};
+                "
+              ></div>
+              <div
+                class="current-time-dot"
+                style="
+                  top: ${this.calendarHeight + 3}px;
+                  left: ${this.getDateX(this.currentTime) + o + 1}px;
+                  background-color: ${e.currentTimeLine};
+                "
+              ></div>
+            ` : ""}
+        ${(this.option.calendar.milestones ?? []).map((e) => n`
+            <div
+              class="milestone-line"
+              style="
+                top: ${this.calendarHeight}px;
+                left: ${this.getDateX(e.start) + o}px;
+                height: ${a}px;
+                width: ${e.width ?? 2}px;
+                background-color: ${e.color};
+                opacity: ${this.hoveredMilestoneId === e.id ? 1 : .5};
+                ${e.style ?? ""}
+              "
+              @mouseenter="${() => {
+			this.hoveredMilestoneId = e.id;
+		}}"
+              @mouseleave="${() => {
+			this.hoveredMilestoneId = null;
+		}}"
+            ></div>
+          `)}
+        ${this.option.calendar.showCursorLine && this.cursorLineX !== null ? n`
+              <div
+                class="cursor-line"
+                style="
+                  left: ${this.cursorLineX}px;
+                  height: ${this.calendarHeight + (this.isExporting ? a : a || this.viewportHeight)}px;
+                  background-color: ${this.option.calendar.cursorLineColor ?? e.currentTimeLine};
+                "
+              ></div>
+            ` : ""}
+
+        <div style="height: ${f}px; width: 1px;"></div>
+
+        ${u(d, (e) => e.id, (e, t) => {
+			let r = c + t;
+			return n`
+              <gantt-row
+                .row="${e}"
+                .option="${s}"
+                .isSelected="${this.selectedRows.has(e.id)}"
+                .isDragTarget="${this.dragTargetRowIndex === r || this.dragOverRowId === e.id && this.dragOverPosition === null}"
+                .draggingTask="${this.draggingTask}"
+                .draggingTaskIds="${this.draggingTaskIds}"
+                .multiDragDx="${this.multiDragDx}"
+                .theme="${this.theme}"
+                .dropPosition="${this.dragOverRowId === e.id ? this.dragOverPosition : null}"
+                .externalDragTask="${this.dragPreview?.rowId === e.id ? this.dragPreview : null}"
+                .selectedTaskIds="${this._cachedSelectedTaskIds}"
+                .focusedTaskId="${this.focusedTaskId}"
+                .isExporting="${this.isExporting}"
+                @task-update="${this.handleTaskUpdate}"
+                @row-clicked="${this.handleRowClicked}"
+                @row-header-contextmenu="${this.handleRowContextMenu}"
+                @bar-click="${this.handleBarClick}"
+                @task-contextmenu="${this.handleBarContextMenu}"
+              />
+            `;
+		})}
+
+        <div style="height: ${h}px; width: 1px;"></div>
+      </div>
+
+      ${this.option.showDragInfoOverlay === !1 ? "" : n` <div class="drag-info-overlay"></div> `}
+      ${this.tooltip ? n`
+            <div
+              class="tooltip ${this.tooltip.visible ? "visible" : ""}"
+              style="top: ${this.tooltip.y}px; left: ${this.tooltip.x}px;"
+            />
+          ` : ""}
+    `;
+	}
+};
+V([s({ type: Array })], Z.prototype, "rows", void 0), V([s({ type: Object })], Z.prototype, "option", void 0), V([s({
+	type: String,
+	reflect: !0
+})], Z.prototype, "theme", void 0), V([s({ type: Array })], Z.prototype, "selectedRowIds", void 0), V([s({ type: Array })], Z.prototype, "selectedTaskIds", void 0), V([s({ attribute: !1 })], Z.prototype, "externalDraggingTask", void 0), V([c()], Z.prototype, "selectedRows", void 0), V([c()], Z.prototype, "selectedTasks", void 0), V([c()], Z.prototype, "lastClickedRowId", void 0), V([c()], Z.prototype, "virtualScrollTop", void 0), V([c()], Z.prototype, "dragTargetRowIndex", void 0), V([c()], Z.prototype, "draggingTask", void 0), V([c()], Z.prototype, "draggingTaskIds", void 0), V([c()], Z.prototype, "multiDragDx", void 0), V([c()], Z.prototype, "viewportHeight", void 0), V([c()], Z.prototype, "calendarHeight", void 0), V([c()], Z.prototype, "tooltip", void 0), V([c()], Z.prototype, "dragOverRowId", void 0), V([c()], Z.prototype, "dragOverPosition", void 0), V([c()], Z.prototype, "currentTime", void 0), V([c()], Z.prototype, "dragPreview", void 0), V([c()], Z.prototype, "currentRowHeaderWidth", void 0), V([c()], Z.prototype, "isResizingHeader", void 0), V([c()], Z.prototype, "hoveredMilestoneId", void 0), V([c()], Z.prototype, "cursorLineX", void 0), V([c()], Z.prototype, "connectorDrag", void 0), V([c()], Z.prototype, "isExporting", void 0), V([c()], Z.prototype, "focusedTaskId", void 0), V([c()], Z.prototype, "focusedRowId", void 0), Z = V([o("gantt-chart")], Z);
+//#endregion
+export { h as ALL_BAR_PATTERNS, H as GanttBarElement, U as GanttCalendarElement, Z as GanttChartElement, G as GanttRowElement, b as PATTERN_CHECKERBOARD, C as PATTERN_CIRCLE, T as PATTERN_DIAGONAL_GRID, g as PATTERN_DIAGONAL_STRIPE, _ as PATTERN_DIAGONAL_STRIPE_REVERSE, x as PATTERN_DOTS, O as PATTERN_DOTS_DENSE, w as PATTERN_GRID, y as PATTERN_HORIZONTAL_STRIPE, D as PATTERN_STRIPE_THICK, E as PATTERN_STRIPE_THIN, S as PATTERN_TRIANGLE, v as PATTERN_VERTICAL_STRIPE, j as enLocale, k as getPatternStyle, A as jaLocale };