gantt-renderer 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -30,6 +30,8 @@ const taskBase = {
 	parent: z.number().int().positive().optional(),
 	/** Optional CSS color value for the task bar. Overrides the default color assignment. */
 	color: z.string().optional(),
+	/** When `true`, the task bar cannot be dragged or resized. */
+	readonly: z.boolean().optional(),
 	/** Optional arbitrary metadata for consumer use. Preserved in the parsed output. */
 	data: z.record(z.string(), z.unknown()).optional()
 };
@@ -86,6 +88,8 @@ const LinkSchema = z.object({
 	* @default 'FS'
 	*/
 	type: LinkTypeSchema.default("FS"),
+	/** When `true`, the link cannot be modified or deleted through the UI. */
+	readonly: z.boolean().optional(),
 	/** Optional arbitrary metadata for consumer use. Preserved in the parsed output. */
 	data: z.record(z.string(), z.unknown()).optional()
 }).refine((l) => l.source !== l.target, {
@@ -1748,7 +1752,7 @@ function buildRow(row, selectedId, expandedIds, cbs, columns, locale) {
 	wrapper.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onTaskSelect(row.id);
+			cbs.onTaskClick(row.id);
 		}
 	});
 	for (const column of visibleColumns(columns)) wrapper.append(buildCell(column, row, expandedIds, cbs, locale));
@@ -2056,6 +2060,7 @@ function toTask(node) {
 		startDate: node.startDate,
 		...node.parent === void 0 ? {} : { parent: node.parent },
 		...node.color === void 0 ? {} : { color: node.color },
+		...node.readonly === void 0 ? {} : { readonly: node.readonly },
 		...node.data === void 0 ? {} : { data: node.data }
 	};
 	switch (node.kind) {
@@ -2098,7 +2103,7 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 		try {
 			barEl.setPointerCapture(e.pointerId);
 		} catch {}
-		cbs.onTaskSelect?.(task.id);
+		cbs.onTaskClick?.(task.id);
 		const startX = e.clientX;
 		const originDate = parseDate(task.startDate);
 		const mapper = getMapper();
@@ -2115,7 +2120,7 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onUp);
 			barEl.style.cursor = "grab";
-			cbs._onTaskMoveFinal?.({
+			if (lastHours !== 0) cbs._onTaskMoveFinal?.({
 				id: task.id,
 				startDate: addHours(originDate, lastHours)
 			});
@@ -2186,7 +2191,7 @@ function attachProgressDrag(progressEl, barEl, task, _getMapper, cbs) {
 		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		cbs.onTaskSelect?.(task.id);
+		cbs.onTaskClick?.(task.id);
 		try {
 			progressEl.setPointerCapture(e.pointerId);
 		} catch {}
@@ -2231,7 +2236,7 @@ function attachProgressDrag(progressEl, barEl, task, _getMapper, cbs) {
 */
 function attachMilestoneClick(diamondEl, taskId, cbs) {
 	function onClick() {
-		cbs.onTaskSelect?.(taskId);
+		cbs.onTaskClick?.(taskId);
 	}
 	function onDoubleClick(event) {
 		if (event.detail === 2) {
@@ -2361,11 +2366,16 @@ function createRightPaneRefs() {
 	scrollContainer.append(stripeContainer);
 	scrollContainer.append(absoluteLayer);
 	absoluteLayer.append(svgLayer);
+	const tooltipEl = el("div");
+	tooltipEl.className = "gantt-tooltip";
+	tooltipEl.style.display = "none";
+	scrollContainer.append(tooltipEl);
 	return {
 		scrollContainer,
 		stripeContainer,
 		absoluteLayer,
 		svgLayer,
+		tooltipEl,
 		barRegistry: /* @__PURE__ */ new Map()
 	};
 }
@@ -2410,8 +2420,9 @@ function renderSpecialDayBackgrounds(layer, beforeNode, state, contentHeight) {
 		cur = next;
 	}
 }
-function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, cbs) {
+function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, cbs, tooltipEl) {
 	const selected = task.id === selectedId;
+	const readonly = task.readonly === true;
 	const color = BAR_COLOR[layout.kind] ?? BAR_COLOR["task"];
 	const bar = el("div");
 	bar.className = `gantt-bar${selected ? " gantt-bar--selected gantt-shape--selected" : ""}`;
@@ -2423,7 +2434,7 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 		height: `${layout.height}px`,
 		...color === void 0 ? {} : { background: color },
 		borderRadius: layout.kind === "project" ? "3px" : "4px",
-		cursor: "grab",
+		cursor: readonly ? "pointer" : "grab",
 		userSelect: "none",
 		overflow: "hidden",
 		zIndex: selected ? "3" : "2",
@@ -2474,30 +2485,38 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 	bar.setAttribute("aria-label", ariaLabel(state.locale, "ariaTask", task.text));
 	bar.setAttribute("aria-pressed", String(selected));
 	bar.dataset["taskId"] = String(task.id);
-	bar.addEventListener("click", () => {
-		cbs.onTaskSelect?.(task.id);
+	bar.addEventListener("click", (event) => {
+		if (event.detail === 2) cbs.onTaskDoubleClick?.({
+			id: task.id,
+			task: toTask(task)
+		});
+		else cbs.onTaskClick?.(task.id);
 	});
 	bar.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onTaskSelect?.(task.id);
+			cbs.onTaskClick?.(task.id);
 		}
 	});
-	const handle = el("div");
-	handle.className = "gantt-resize-handle";
-	css(handle, {
-		position: "absolute",
-		right: "0",
-		top: "0",
-		width: "8px",
-		height: "100%",
-		cursor: "ew-resize",
-		zIndex: "1",
-		touchAction: "none"
-	});
-	bar.append(handle);
-	layer.insertBefore(bar, svgLayer);
-	const cleanupDrag = attachDrag(bar, handle, task, () => state.mapper, cbs);
+	let handle;
+	let cleanupDrag;
+	if (!readonly) {
+		handle = el("div");
+		handle.className = "gantt-resize-handle";
+		css(handle, {
+			position: "absolute",
+			right: "0",
+			top: "0",
+			width: "8px",
+			height: "100%",
+			cursor: "ew-resize",
+			zIndex: "1",
+			touchAction: "none"
+		});
+		bar.append(handle);
+		layer.insertBefore(bar, svgLayer);
+		cleanupDrag = attachDrag(bar, handle, task, () => state.mapper, cbs);
+	} else layer.insertBefore(bar, svgLayer);
 	let cleanupLinkHandles;
 	if (state.linkCreationEnabled) {
 		const barCenterY = layout.y + layout.height / 2;
@@ -2532,17 +2551,52 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 			bar.removeEventListener("mouseleave", onBarLeave);
 		};
 	}
+	const onTooltipEnter = () => {
+		const content = cbs.onTooltipText?.({
+			id: task.id,
+			task: toTask(task)
+		});
+		if (content && content.length > 0) {
+			tooltipEl.innerHTML = content;
+			tooltipEl.style.display = "";
+		} else tooltipEl.style.display = "none";
+	};
+	const onTooltipMove = (e) => {
+		const offsetX = 12;
+		const offsetY = -8;
+		let left = e.clientX + offsetX;
+		let top = e.clientY + offsetY;
+		const maxLeft = window.innerWidth - tooltipEl.offsetWidth - 4;
+		const maxTop = window.innerHeight - tooltipEl.offsetHeight - 4;
+		left = Math.max(4, Math.min(left, maxLeft));
+		top = Math.max(4, Math.min(top, maxTop));
+		tooltipEl.style.left = `${left}px`;
+		tooltipEl.style.top = `${top}px`;
+	};
+	const onTooltipLeave = () => {
+		tooltipEl.style.display = "none";
+	};
+	bar.addEventListener("mouseenter", onTooltipEnter);
+	bar.addEventListener("mousemove", onTooltipMove);
+	bar.addEventListener("mouseleave", onTooltipLeave);
+	const cleanupTooltip = () => {
+		bar.removeEventListener("mouseenter", onTooltipEnter);
+		bar.removeEventListener("mousemove", onTooltipMove);
+		bar.removeEventListener("mouseleave", onTooltipLeave);
+	};
 	const entry = {
 		bar,
-		resizeHandle: handle,
-		cleanupDrag
+		resizeHandle: handle ?? el("div")
 	};
+	if (cleanupDrag !== void 0) entry.cleanupDrag = cleanupDrag;
 	if (cleanupLinkHandles !== void 0) entry.cleanupLinkHandles = cleanupLinkHandles;
 	if (cleanupProgressDrag !== void 0) entry.cleanupProgressDrag = cleanupProgressDrag;
+	if (cleanupTooltip !== void 0) entry.cleanupTooltip = cleanupTooltip;
 	registry.set(task.id, entry);
 }
-function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cbs, state) {
+function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cbs, state, tooltipEl) {
 	const selected = task.id === selectedId;
+	const readonly = task.readonly === true;
 	const size = MILESTONE_HALF * 2;
 	const diamond = el("div");
 	diamond.className = `gantt-milestone${selected ? " gantt-shape--selected" : ""}`;
@@ -2554,7 +2608,7 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 		height: `${size}px`,
 		background: "var(--gantt-milestone)",
 		transform: "rotate(45deg)",
-		cursor: "pointer",
+		cursor: readonly ? "default" : "pointer",
 		zIndex: "4"
 	});
 	diamond.tabIndex = 0;
@@ -2565,7 +2619,7 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 	diamond.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onTaskSelect?.(task.id);
+			cbs.onTaskClick?.(task.id);
 		}
 	});
 	const labelEl = el("span");
@@ -2585,7 +2639,15 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 	layer.insertBefore(diamond, svgLayer);
 	bindMilestoneTask(diamond, task);
 	const dummy = el("div");
-	const cleanupDrag = attachMilestoneClick(diamond, task.id, cbs);
+	let cleanupDrag;
+	if (!readonly) cleanupDrag = attachMilestoneClick(diamond, task.id, cbs);
+	else diamond.addEventListener("click", (event) => {
+		if (event.detail === 2) cbs.onTaskDoubleClick?.({
+			id: task.id,
+			task: toTask(task)
+		});
+		else cbs.onTaskClick?.(task.id);
+	});
 	let cleanupLinkHandles;
 	if (state.linkCreationEnabled) {
 		const diamondCenterY = layout.y + layout.height / 2;
@@ -2611,12 +2673,46 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 			diamond.removeEventListener("mouseleave", onDiamondLeave);
 		};
 	}
+	const onTooltipEnter = () => {
+		const content = cbs.onTooltipText?.({
+			id: task.id,
+			task: toTask(task)
+		});
+		if (content && content.length > 0) {
+			tooltipEl.innerHTML = content;
+			tooltipEl.style.display = "";
+		} else tooltipEl.style.display = "none";
+	};
+	const onTooltipMove = (e) => {
+		const offsetX = 12;
+		const offsetY = -8;
+		let left = e.clientX + offsetX;
+		let top = e.clientY + offsetY;
+		const maxLeft = window.innerWidth - tooltipEl.offsetWidth - 4;
+		const maxTop = window.innerHeight - tooltipEl.offsetHeight - 4;
+		left = Math.max(4, Math.min(left, maxLeft));
+		top = Math.max(4, Math.min(top, maxTop));
+		tooltipEl.style.left = `${left}px`;
+		tooltipEl.style.top = `${top}px`;
+	};
+	const onTooltipLeave = () => {
+		tooltipEl.style.display = "none";
+	};
+	diamond.addEventListener("mouseenter", onTooltipEnter);
+	diamond.addEventListener("mousemove", onTooltipMove);
+	diamond.addEventListener("mouseleave", onTooltipLeave);
+	const cleanupTooltip = () => {
+		diamond.removeEventListener("mouseenter", onTooltipEnter);
+		diamond.removeEventListener("mousemove", onTooltipMove);
+		diamond.removeEventListener("mouseleave", onTooltipLeave);
+	};
 	const entry = {
 		bar: diamond,
-		resizeHandle: dummy,
-		cleanupDrag
+		resizeHandle: dummy
 	};
+	if (cleanupDrag !== void 0) entry.cleanupDrag = cleanupDrag;
 	if (cleanupLinkHandles !== void 0) entry.cleanupLinkHandles = cleanupLinkHandles;
+	if (cleanupTooltip !== void 0) entry.cleanupTooltip = cleanupTooltip;
 	registry.set(task.id, entry);
 }
 /**
@@ -2665,7 +2761,7 @@ function renderRightPane(refs, state, cbs) {
 	for (const node of toRemove) absoluteLayer.removeChild(node);
 	hideGhostLine(svgLayer);
 	for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag } of barRegistry.values()) {
-		cleanupDrag();
+		cleanupDrag?.();
 		cleanupLinkHandles?.();
 		cleanupProgressDrag?.();
 	}
@@ -2708,8 +2804,8 @@ function renderRightPane(refs, state, cbs) {
 	for (const task of visibleRows) {
 		const layout = layouts.get(task.id);
 		if (layout === void 0) continue;
-		if (layout.kind === "milestone") renderMilestone(absoluteLayer, svgLayer, task, layout, selectedId, barRegistry, cbs, state);
-		else renderBar(absoluteLayer, svgLayer, task, layout, selectedId, barRegistry, state, cbs);
+		if (layout.kind === "milestone") renderMilestone(absoluteLayer, svgLayer, task, layout, selectedId, barRegistry, cbs, state, refs.tooltipEl);
+		else renderBar(absoluteLayer, svgLayer, task, layout, selectedId, barRegistry, state, cbs, refs.tooltipEl);
 	}
 	updateDependencyLayer(svgLayer, links.filter((link) => visibleTaskIds.has(link.sourceTaskId) && visibleTaskIds.has(link.targetTaskId)), totalWidth, contentHeight, selectedId, highlightLinkedDependenciesOnSelect, cbs);
 }
@@ -2869,15 +2965,16 @@ var GanttChart = class {
 	/**
 	* Constructs a new chart, builds the DOM, and wires internal event handling.
 	* Data must be loaded via {@link update} before the chart renders.
+	* Callbacks must be set via {@link setCallbacks} before user interactions are handled.
 	*
 	* @param container - The host `HTMLElement` the chart will be appended to.
-	* @param opts - Configuration and callback options.
+	* @param opts - Configuration options.
 	*/
-	constructor(container, opts = {}, cbs = {}) {
+	constructor(container, opts = {}) {
 		this.#container = container;
 		this.#scale = opts.scale ?? "day";
 		this.#opts = opts;
-		this.#callbacks = cbs;
+		this.#callbacks = {};
 		this.#taskIndex = /* @__PURE__ */ new Map();
 		this.#locale = resolveChartLocale(opts.locale);
 		this.#columns = opts.gridColumns ?? gridColumnDefaults(this.#locale);
@@ -2887,21 +2984,39 @@ var GanttChart = class {
 		this.#weekendDays = normalizeWeekendDays(opts.weekendDays ?? this.#locale.weekendDays);
 		this.#specialDaysByDate = buildSpecialDayIndex(opts.specialDays ?? []);
 		this.#expandedIds = /* @__PURE__ */ new Set();
-		this.#cbs = {
-			onTaskSelect: (id) => {
+		this.#cbs = this.#buildCallbackAdapter();
+		this.#buildDom();
+		this.#wireEvents();
+		container.append(this.#root);
+		this.#applyTheme();
+		this.#applyResponsivePaneStyles();
+		this.#setupResizeObserver();
+	}
+	#buildCallbackAdapter() {
+		return {
+			onTaskClick: (id) => {
 				if (this.#selectedId === id) return;
 				this.#selectedId = id;
 				if (this.#selectedId !== null) {
 					const task = this.#findTask(this.#selectedId);
-					if (task !== void 0) this.#callbacks.onTaskSelect?.({ task });
+					if (task !== void 0) this.#callbacks.onTaskClick?.({
+						task,
+						instance: this
+					});
 				}
 				this.#scheduleRender();
 			},
 			onTaskDoubleClick: (payload) => {
-				this.#callbacks.onTaskDoubleClick?.({ task: payload.task });
+				this.#callbacks.onTaskDoubleClick?.({
+					task: payload.task,
+					instance: this
+				});
 			},
 			onTaskEditIntent: (payload) => {
-				this.#callbacks.onTaskDoubleClick?.({ task: payload.task });
+				this.#callbacks.onTaskDoubleClick?.({
+					task: payload.task,
+					instance: this
+				});
 			},
 			onTaskMove: (payload) => {
 				if (!this.#dragOriginals.has(payload.id)) {
@@ -2912,13 +3027,23 @@ var GanttChart = class {
 				this.#patchTask(payload.id, { startDate: iso });
 				this.#scheduleRender();
 			},
-			_onTaskMoveFinal: (payload) => {
+			_onTaskMoveFinal: async (payload) => {
 				const task = this.#findTask(payload.id);
 				if (task !== void 0) {
-					if (this.#callbacks.onTaskMove?.({
+					const durationHours = task.kind !== "milestone" ? task.durationHours : 0;
+					const newEndDate = addHours(payload.startDate, durationHours);
+					const result = this.#callbacks.onTaskMove?.({
 						task,
-						newStartDate: payload.startDate
-					}) === false) {
+						newStartDate: payload.startDate,
+						newEndDate,
+						instance: this
+					});
+					if (result instanceof Promise) {
+						if (!await result) {
+							const original = this.#dragOriginals.get(payload.id);
+							if (original !== void 0) this.#patchTask(payload.id, { startDate: original.startDate });
+						}
+					} else if (!result) {
 						const original = this.#dragOriginals.get(payload.id);
 						if (original !== void 0) this.#patchTask(payload.id, { startDate: original.startDate });
 					}
@@ -2935,13 +3060,24 @@ var GanttChart = class {
 				this.#patchTask(payload.id, { durationHours: payload.durationHours });
 				this.#scheduleRender();
 			},
-			_onTaskResizeFinal: (payload) => {
+			_onTaskResizeFinal: async (payload) => {
 				const task = this.#findTask(payload.id);
 				if (task !== void 0) {
-					if (this.#callbacks.onTaskResize?.({
+					const newStartDate = parseDate(task.startDate);
+					const newEndDate = addHours(newStartDate, task.kind !== "milestone" ? task.durationHours : 0);
+					const result = this.#callbacks.onTaskResize?.({
 						task,
-						newDurationHours: payload.durationHours
-					}) === false) {
+						newDurationHours: payload.durationHours,
+						newStartDate,
+						newEndDate,
+						instance: this
+					});
+					if (result instanceof Promise) {
+						if (!await result) {
+							const original = this.#dragOriginals.get(payload.id);
+							if (original !== void 0 && original.kind !== "milestone") this.#patchTask(payload.id, { durationHours: original.durationHours });
+						}
+					} else if (!result) {
 						const original = this.#dragOriginals.get(payload.id);
 						if (original !== void 0 && original.kind !== "milestone") this.#patchTask(payload.id, { durationHours: original.durationHours });
 					}
@@ -2958,13 +3094,20 @@ var GanttChart = class {
 				this.#patchTask(payload.id, { percentComplete: payload.percentComplete });
 				this.#scheduleRender();
 			},
-			_onTaskProgressDragFinal: (payload) => {
+			_onTaskProgressDragFinal: async (payload) => {
 				const task = this.#findTask(payload.id);
 				if (task !== void 0) {
-					if (this.#callbacks.onProgressChange?.({
+					const result = this.#callbacks.onProgressChange?.({
 						task,
-						newPercentComplete: payload.percentComplete
-					}) === false) {
+						newPercentComplete: payload.percentComplete,
+						instance: this
+					});
+					if (result instanceof Promise) {
+						if (!await result) {
+							const original = this.#dragOriginals.get(payload.id);
+							if (original !== void 0 && original.kind !== "milestone") this.#patchTask(payload.id, { percentComplete: original.percentComplete });
+						}
+					} else if (!result) {
 						const original = this.#dragOriginals.get(payload.id);
 						if (original !== void 0 && original.kind !== "milestone") this.#patchTask(payload.id, { percentComplete: original.percentComplete });
 					}
@@ -2975,13 +3118,22 @@ var GanttChart = class {
 			},
 			onTaskAdd: (parentId) => {
 				const parentTask = this.#findTask(parentId);
-				if (parentTask !== void 0) this.#callbacks.onTaskAdd?.({ parentTask });
+				if (parentTask !== void 0) this.#callbacks.onTaskAdd?.({
+					parentTask,
+					instance: this
+				});
 			},
 			onLeftPaneWidthChange: (width) => {
-				this.#callbacks.onLeftPaneWidthChange?.(width);
+				this.#callbacks.onLeftPaneWidthChange?.({
+					width,
+					instance: this
+				});
 			},
 			onGridColumnsChange: (updatedColumns) => {
-				this.#callbacks.onGridColumnsChange?.(updatedColumns);
+				this.#callbacks.onGridColumnsChange?.({
+					columns: updatedColumns,
+					instance: this
+				});
 			},
 			onLinkCreate: (payload) => {
 				const sourceTask = this.#findTask(payload.sourceTaskId);
@@ -2989,22 +3141,39 @@ var GanttChart = class {
 				if (sourceTask !== void 0 && targetTask !== void 0) this.#callbacks.onLinkCreate?.({
 					type: "FS",
 					sourceTask,
-					targetTask
+					targetTask,
+					instance: this
 				});
 			},
 			onLinkClick: (payload) => {
-				this.#callbacks.onLinkClick?.({ link: payload });
+				this.#callbacks.onLinkClick?.({
+					link: payload,
+					instance: this
+				});
 			},
 			onLinkDblClick: (payload) => {
-				this.#callbacks.onLinkDblClick?.({ link: payload });
-			}
+				this.#callbacks.onLinkDblClick?.({
+					link: payload,
+					instance: this
+				});
+			},
+			onTooltipText: (payload) => this.#callbacks.onTooltipText?.({
+				task: payload.task,
+				instance: this
+			}) ?? null
 		};
-		this.#buildDom();
-		this.#wireEvents();
-		container.append(this.#root);
-		this.#applyTheme();
-		this.#applyResponsivePaneStyles();
-		this.#setupResizeObserver();
+	}
+	/**
+	* Sets or replaces the chart's user-facing callbacks.
+	* Does not trigger a re-render.
+	*
+	* @param cbs - The {@link GanttCallbacks} to register.
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
+	setCallbacks(cbs) {
+		this.#assertAlive();
+		this.#callbacks = cbs;
+		this.#cbs = this.#buildCallbackAdapter();
 	}
 	/**
 	* Replaces the full dataset and re-renders.
@@ -3085,14 +3254,18 @@ var GanttChart = class {
 	* Programmatically selects or deselects a task.
 	*
 	* @param id - The task ID to select, or `null` to clear the selection.
+	* @param fireCallback - Whether to fire the `onTaskClick` callback. Default `true`.
 	* @throws {GanttError} When the instance has been destroyed.
 	*/
-	select(id) {
+	select(id, fireCallback = true) {
 		this.#assertAlive();
 		if (id === null) this.#selectedId = null;
 		else {
 			const task = this.#input?.tasks.find((t) => t.id === id);
-			if (task !== void 0) this.#callbacks.onTaskSelect?.({ task });
+			if (task !== void 0 && fireCallback) this.#callbacks.onTaskClick?.({
+				task,
+				instance: this
+			});
 			this.#selectedId = id;
 		}
 		if (this.#rafPending && this.#rafId !== null) {
@@ -3145,10 +3318,11 @@ var GanttChart = class {
 		else window.removeEventListener("resize", this.#applyResponsivePaneStyles);
 		if (this.#rafId !== null) cancelAnimationFrame(this.#rafId);
 		this.#columnResizeCleanup();
-		for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag } of this.#rightPaneRefs.barRegistry.values()) {
-			cleanupDrag();
+		for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag, cleanupTooltip } of this.#rightPaneRefs.barRegistry.values()) {
+			cleanupDrag?.();
 			cleanupLinkHandles?.();
 			cleanupProgressDrag?.();
+			cleanupTooltip?.();
 		}
 		clearChildren(this.#container);
 	}
@@ -3181,7 +3355,7 @@ var GanttChart = class {
 			id: payload.id,
 			atMs: now
 		};
-		this.#cbs.onTaskSelect?.(payload.id);
+		this.#cbs.onTaskClick?.(payload.id);
 	};
 	#onScroll = () => {
 		({scrollTop: this.#scrollTop} = this.#scrollEl);
@@ -3265,7 +3439,7 @@ var GanttChart = class {
 				else this.#expandedIds.add(id);
 				this.#scheduleRender();
 			},
-			onTaskSelect: (id) => this.#cbs.onTaskSelect?.(id),
+			onTaskClick: (id) => this.#cbs.onTaskClick?.(id),
 			onRowClick: (payload) => {
 				this.#handleGridClick(payload);
 			},