gantt-renderer 0.2.0 → 0.4.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { z } from "zod";
-//#region src/gantt-chart/validation/schemas.ts
+//#region src/lib/validation/schemas.ts
 const LinkTypeSchema = z.enum([
 	"FS",
 	"SS",
 	"FF",
 	"SF"
 ]);
-const TaskTypeSchema = z.enum([
+const TaskKindSchema = z.enum([
 	"task",
 	"project",
 	"milestone"
@@ -14,45 +14,62 @@ const TaskTypeSchema = z.enum([
 const SpecialDayKindSchema = z.enum(["holiday", "custom"]);
 const SpecialDaySchema = z.object({
 	/** ISO date: YYYY-MM-DD */
-	date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Expected YYYY-MM-DD"),
+	date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/u, "Expected YYYY-MM-DD"),
 	kind: SpecialDayKindSchema,
 	label: z.string().min(1).optional(),
 	className: z.string().min(1).optional()
 });
-const TaskSchema = z.object({
+const taskBase = {
 	/** Unique positive integer identifier for the task. */
 	id: z.number().int().positive(),
 	/** Display name / label of the task. */
 	text: z.string().min(1),
 	/** ISO date: YYYY-MM-DD */
-	startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Expected YYYY-MM-DD"),
-	/** Duration in hours; 0 = milestone */
-	durationHours: z.number().int().min(0),
+	startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/u, "Expected YYYY-MM-DD"),
 	/** Optional id of the parent task. When set, this task is a child in the hierarchy. */
 	parent: z.number().int().positive().optional(),
-	/** 0–100 completion percentage (integer) */
+	/** 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()
+};
+/** @internal */
+const TaskLeafSchema = z.object({
+	...taskBase,
+	kind: z.literal("task"),
+	/** Duration in hours. Must be positive; use `kind: 'milestone'` for zero-duration points. */
+	durationHours: z.number().int().positive(),
+	/** 0–100 completion percentage (integer). */
+	percentComplete: z.number().int().min(0).max(100).default(0)
+});
+/** @internal */
+const TaskProjectSchema = z.object({
+	...taskBase,
+	kind: z.literal("project"),
+	/** Duration in hours. Must be positive; use `kind: 'milestone'` for zero-duration points. */
+	durationHours: z.number().int().positive(),
+	/** 0–100 completion percentage (integer). */
 	percentComplete: z.number().int().min(0).max(100).default(0),
 	/**
-	* Task type: `'task'`, `'project'`, or `'milestone'`.
-	*
-	* - `'task'` — A regular task with a colored bar.
-	* - `'project'` — A summary/group row with a colored bar.
-	* - `'milestone'` — A zero-duration marker rendered as a diamond.
-	*
-	* @default 'task'
-	*/
-	type: TaskTypeSchema.default("task"),
-	/**
 	* Initial expanded state for tree hierarchy.
 	* When `false`, children of this task are hidden on initial render.
-	* Only relevant for tasks with child tasks.
 	*
 	* @default true
 	*/
-	open: z.boolean().default(true),
-	/** Optional CSS color value for the task bar. Overrides the default color assignment. */
-	color: z.string().optional()
+	open: z.boolean().default(true)
+});
+/** @internal */
+const TaskMilestoneSchema = z.object({
+	...taskBase,
+	kind: z.literal("milestone")
 });
+const TaskSchema = z.discriminatedUnion("kind", [
+	TaskLeafSchema,
+	TaskProjectSchema,
+	TaskMilestoneSchema
+]);
 const LinkSchema = z.object({
 	/** Unique positive integer identifier for the dependency link. */
 	id: z.number().int().positive(),
@@ -70,13 +87,66 @@ const LinkSchema = z.object({
 	*
 	* @default 'FS'
 	*/
-	type: LinkTypeSchema.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, {
+	message: "A link cannot connect a task to itself",
+	path: ["target"]
 });
 const GanttInputSchema = z.object({
 	/** Array of task objects. At least one task is required. */
 	tasks: z.array(TaskSchema).min(1),
 	/** Optional array of dependency link objects. Defaults to empty array. */
 	links: z.array(LinkSchema).default([])
+}).superRefine((data, ctx) => {
+	const taskIds = /* @__PURE__ */ new Set();
+	for (let i = 0; i < data.tasks.length; i++) {
+		const task = data.tasks[i];
+		if (task !== void 0) {
+			if (taskIds.has(task.id)) ctx.addIssue({
+				code: "custom",
+				message: `Duplicate task id: ${task.id}`,
+				path: [
+					"tasks",
+					i,
+					"id"
+				]
+			});
+			taskIds.add(task.id);
+		}
+	}
+	const linkIds = /* @__PURE__ */ new Set();
+	for (let i = 0; i < data.links.length; i++) {
+		const link = data.links[i];
+		if (link !== void 0) {
+			if (linkIds.has(link.id)) ctx.addIssue({
+				code: "custom",
+				message: `Duplicate link id: ${link.id}`,
+				path: [
+					"links",
+					i,
+					"id"
+				]
+			});
+			linkIds.add(link.id);
+		}
+	}
+	const pairKeys = /* @__PURE__ */ new Set();
+	for (let i = 0; i < data.links.length; i++) {
+		const link = data.links[i];
+		if (link !== void 0) {
+			const key = `${link.source}:${link.target}`;
+			if (pairKeys.has(key)) ctx.addIssue({
+				code: "custom",
+				message: `Duplicate link pair: source=${link.source} target=${link.target}`,
+				path: ["links", i]
+			});
+			pairKeys.add(key);
+		}
+	}
 });
 /**
 * Parses raw external data.
@@ -88,18 +158,8 @@ const GanttInputSchema = z.object({
 function parseGanttInput(raw) {
 	return GanttInputSchema.parse(raw);
 }
-/**
-* Parses without throwing; returns `null` on validation failure.
-*
-* @param raw - The unvalidated input from the consumer.
-* @returns The parsed {@link GanttInput} or `null` when the input is invalid.
-*/
-function safeParseGanttInput(raw) {
-	const result = GanttInputSchema.safeParse(raw);
-	return result.success ? result.data : null;
-}
 //#endregion
-//#region src/gantt-chart/errors.ts
+//#region src/lib/errors.ts
 /**
 * Domain-specific error with a machine-readable {@link GanttErrorCode}.
 */
@@ -116,23 +176,67 @@ var GanttError = class extends Error {
 	}
 };
 //#endregion
-//#region src/gantt-chart/domain/tree.ts
+//#region src/lib/domain/tree.ts
+function detectParentCycles(tasks) {
+	const adj = /* @__PURE__ */ new Map();
+	for (const task of tasks) {
+		adj.set(task.id, []);
+		if (task.parent !== void 0) {
+			const parents = adj.get(task.parent);
+			if (parents !== void 0) parents.push(task.id);
+		}
+	}
+	const WHITE = 0, GRAY = 1, BLACK = 2;
+	const color = /* @__PURE__ */ new Map();
+	const parent = /* @__PURE__ */ new Map();
+	for (const id of adj.keys()) color.set(id, WHITE);
+	const dfs = (u) => {
+		color.set(u, GRAY);
+		for (const v of adj.get(u) ?? []) {
+			const vc = color.get(v) ?? WHITE;
+			if (vc === GRAY) {
+				const path = [v, u];
+				let cur = u;
+				while (cur !== v) {
+					const p = parent.get(cur);
+					if (p === void 0) break;
+					path.push(p);
+					cur = p;
+				}
+				throw new GanttError("PARENT_CYCLE", `Parent cycle detected: ${[...path].reverse().join(" -> ")}`);
+			}
+			if (vc === WHITE) {
+				parent.set(v, u);
+				dfs(v);
+			}
+		}
+		color.set(u, BLACK);
+	};
+	for (const id of adj.keys()) if ((color.get(id) ?? WHITE) === WHITE) dfs(id);
+}
 /**
 * Builds a typed tree from a flat task array.
 * Order of tasks[] is irrelevant — parents need not precede children.
 *
 * @param tasks - The flat array of tasks to convert into a tree.
 * @returns Root-level {@link TaskNode} instances with populated `children`.
-* @throws {GanttError} When a task references a `parent` id that does not exist.
+* @throws {GanttError} When a task references a `parent` id that does not exist,
+*         when a parent cycle is detected, or when a `parent` points to a
+*         milestone or leaf task.
 */
 function buildTaskTree(tasks) {
 	const map = /* @__PURE__ */ new Map();
 	const roots = [];
+	for (const task of tasks) if (task.parent !== void 0) {
+		const parentTask = tasks.find((t) => t.id === task.parent);
+		if (parentTask !== void 0 && (parentTask.kind === "milestone" || parentTask.kind === "task")) throw new GanttError("PARENT_REFERENCE", `Task id=${task.id} cannot have parent id=${task.parent} of kind '${parentTask.kind}'`);
+	}
 	for (const task of tasks) map.set(task.id, {
 		...task,
 		children: [],
 		depth: 0
 	});
+	detectParentCycles(tasks);
 	for (const task of tasks) {
 		const node = map.get(task.id);
 		if (node === void 0) continue;
@@ -177,7 +281,7 @@ function isParent(node) {
 	return node.children.length > 0;
 }
 //#endregion
-//#region src/gantt-chart/domain/dependencies.ts
+//#region src/lib/domain/dependencies.ts
 /**
 * Detects circular dependencies in the link graph using DFS tri-colour marking.
 *
@@ -221,21 +325,34 @@ function detectCycles(tasks, links) {
 	for (const id of adj.keys()) if ((color.get(id) ?? WHITE) === WHITE) dfs(id);
 }
 /**
-* Validates that every link references existing task IDs.
+* Validates that every link references existing task IDs and that no
+* duplicate (source, target) pairs exist.
 *
 * @param tasks - The task list (used as the reference set of valid IDs).
 * @param links - The dependency links to validate.
-* @throws {GanttError} When any link references a non-existent source or target task.
+* @throws {GanttError} When any link references a non-existent source or target task,
+*         when a non-FS link connects to/from a milestone, or when duplicate
+*         (source, target) pairs exist.
 */
 function validateLinkRefs(tasks, links) {
 	const ids = new Set(tasks.map((t) => t.id));
+	const taskById = new Map(tasks.map((t) => [t.id, t]));
+	const pairKeys = /* @__PURE__ */ new Set();
 	for (const link of links) {
 		if (!ids.has(link.source)) throw new GanttError("LINK_REFERENCE", `Link id=${link.id}: source=${link.source} not found`);
 		if (!ids.has(link.target)) throw new GanttError("LINK_REFERENCE", `Link id=${link.id}: target=${link.target} not found`);
+		const pairKey = `${link.source}:${link.target}`;
+		if (pairKeys.has(pairKey)) throw new GanttError("DUPLICATE_LINK_PAIR", `Link id=${link.id}: duplicate pair source=${link.source} target=${link.target}`);
+		pairKeys.add(pairKey);
+		if (link.type !== "FS") {
+			const sourceTask = taskById.get(link.source);
+			const targetTask = taskById.get(link.target);
+			if (sourceTask?.kind === "milestone" || targetTask?.kind === "milestone") throw new GanttError("MILESTONE_LINK_TYPE", `Link id=${link.id}: non-FS type '${link.type}' not allowed when connected to a milestone`);
+		}
 	}
 }
 //#endregion
-//#region src/gantt-chart/locale.ts
+//#region src/lib/locale.ts
 const WEEK_START_REGION = {
 	US: 0,
 	CA: 0,
@@ -517,7 +634,7 @@ function formatLabel(template, arg) {
 	return template.replaceAll("{0}", arg);
 }
 //#endregion
-//#region src/gantt-chart/domain/dateMath.ts
+//#region src/lib/domain/dateMath.ts
 /**
 * Parses `YYYY-MM-DD` → UTC midnight `Date`.
 *
@@ -657,7 +774,7 @@ function formatDisplayDate(dateStr, locale) {
 	});
 }
 //#endregion
-//#region src/gantt-chart/timeline/scale.ts
+//#region src/lib/timeline/scale.ts
 const H = 36e5;
 const D = 864e5;
 const SCALE_CONFIGS = {
@@ -740,7 +857,7 @@ function nextScaleBoundary(date, scale) {
 	}
 }
 //#endregion
-//#region src/gantt-chart/timeline/pixelMapper.ts
+//#region src/lib/timeline/pixelMapper.ts
 /**
 * Creates a stateless pixel mapper for the given scale and viewport start.
 * All conversions are O(1) arithmetic — safe to call in tight loops.
@@ -773,7 +890,7 @@ function createPixelMapper(scale, viewportStart) {
 	};
 }
 //#endregion
-//#region src/gantt-chart/timeline/layoutEngine.ts
+//#region src/lib/timeline/layoutEngine.ts
 const DENSITY = {
 	rowHeight: 44,
 	barHeight: 28,
@@ -802,8 +919,7 @@ function computeLayout(rows, mapper) {
 		const x = mapper.toX(start);
 		const y = i * ROW_HEIGHT + BAR_Y_OFFSET;
 		const centerY = i * ROW_HEIGHT + ROW_HEIGHT / 2;
-		const type = task.type ?? "task";
-		if (type === "milestone") {
+		if (task.kind === "milestone") {
 			result.set(task.id, {
 				taskId: task.id,
 				x,
@@ -811,7 +927,7 @@ function computeLayout(rows, mapper) {
 				width: 0,
 				height: BAR_HEIGHT,
 				progressWidth: 0,
-				type: "milestone",
+				kind: "milestone",
 				rowIndex: i,
 				centerX: x,
 				centerY
@@ -827,7 +943,7 @@ function computeLayout(rows, mapper) {
 			width,
 			height: BAR_HEIGHT,
 			progressWidth,
-			type,
+			kind: task.kind,
 			rowIndex: i,
 			centerX: x + width / 2,
 			centerY
@@ -860,99 +976,245 @@ function deriveViewport(tasks, paddingHours = 48) {
 	let maxMs = -Infinity;
 	for (const task of tasks) {
 		const start = parseDate(task.startDate);
-		const end = addHours(start, task.durationHours);
 		if (start.getTime() < minMs) minMs = start.getTime();
-		if (end.getTime() > maxMs) maxMs = end.getTime();
+		if (task.kind !== "milestone") {
+			const end = addHours(start, task.durationHours);
+			if (end.getTime() > maxMs) maxMs = end.getTime();
+		} else if (start.getTime() > maxMs) maxMs = start.getTime();
 	}
 	return [addHours(new Date(minMs), -paddingHours), addHours(new Date(maxMs), paddingHours)];
 }
 //#endregion
-//#region src/gantt-chart/rendering/linkRouter.ts
-const TURN_MARGIN = 12;
+//#region src/lib/rendering/linkRouter.ts
+/** px gap before/after bar for routing clearance and arrow approach */
+const TURN_MARGIN = 24;
+/** px vertical offset below the bar row for same-row loop detours */
+const SAME_ROW_DETOUR = 24;
+/** Segments shorter than this (px) are collapsed before stroking */
+const STUB_THRESHOLD = 2;
+/**
+* Removes consecutive points whose Euclidean distance is below {@link STUB_THRESHOLD}.
+* The first point is always kept.  This prevents near‑zero‑length segments from
+* appearing as visible stubs near the arrowhead.
+*
+* @param points - The ordered vertex list.
+* @returns A filtered copy, guaranteed to contain at least the first point.
+*/
+function collapseStubs(points) {
+	const out = [];
+	for (const pt of points) {
+		const last = out.at(-1);
+		if (last === void 0 || Math.hypot(pt.x - last.x, pt.y - last.y) >= STUB_THRESHOLD) out.push(pt);
+	}
+	return out;
+}
+/**
+* True when the dependency arrow enters the target on its **left** edge (FS, SS).
+* False when the arrow enters on the target's **right** edge (FF, SF).
+*
+* The arrowhead uses SVG `orient="auto"` so it rotates to match the direction
+* of the **last** path segment. Therefore:
+*
+*   - Left-entry  → last segment must travel **RIGHT**   (penultimate.x < tx).
+*   - Right-entry → last segment must travel **LEFT**    (penultimate.x > tx).
+*
+* @param type - The link type.
+* @returns `true` for FS / SS, `false` for FF / SF.
+*/
+function isLeftEntry(type) {
+	return type === "FS" || type === "SS";
+}
+/**
+* True when the link exits the source bar on its **right** edge (FS, FF).
+* False when it exits on the **left** edge (SS, SF).
+*
+* The first step after the source anchor should move **away** from the bar,
+* **not** into it.  This means:
+*
+*   - Exit‑right → first horizontal segment goes RIGHT  (+TURN_MARGIN).
+*   - Exit‑left  → first horizontal segment goes LEFT   (-TURN_MARGIN).
+*
+* @param type - The link type.
+* @returns `true` for FS / FF, `false` for SS / SF.
+*/
+function isExitRight(type) {
+	return type === "FS" || type === "FF";
+}
 /**
-* Produces the vertex list for an orthogonal connector between src and tgt.
+* Computes anchor points for the given link type.
+*
+* | Type | Source anchor (`sx`)        | Target anchor (`tx`)          |
+* |------|-----------------------------|-------------------------------|
+* | FS   | right edge of source        | left edge of target           |
+* | SS   | left edge of source         | left edge of target           |
+* | FF   | right edge of source        | right edge of target          |
+* | SF   | left edge of source         | right edge of target          |
 *
-* Link semantics:
-*   FS = source.finish → target.start  (most common)
-*   SS = source.start  → target.start
-*   FF = source.finish → target.finish
-*   SF = source.start  → target.finish
+* Milestone offsets are applied automatically: ± {@link MILESTONE_HALF} replaces
+* ± width for zero‑width milestones.
 *
 * @param type - The link type determining start/end anchor points.
-* @param src - The source bar layout.
-* @param tgt - The target bar layout.
-* @returns An ordered array of `Point` vertices.
+* @param src  - The source bar layout.
+* @param tgt  - The target bar layout.
+* @returns Anchor x coordinates `{sx, tx}`.
+* @throws {Error} if the link type is not handled (exhaustiveness guard).
 */
-function route(type, src, tgt) {
-	let sx, tx;
-	const sy = src.centerY;
-	const ty = tgt.centerY;
+function getAnchors(type, src, tgt) {
+	const srcRight = src.kind === "milestone" ? src.x + MILESTONE_HALF : src.x + src.width;
+	const srcLeft = src.kind === "milestone" ? src.x - MILESTONE_HALF : src.x;
+	const tgtRight = tgt.kind === "milestone" ? tgt.x + MILESTONE_HALF : tgt.x + tgt.width;
+	const tgtLeft = tgt.kind === "milestone" ? tgt.x - MILESTONE_HALF : tgt.x;
 	switch (type) {
-		case "FS":
-			sx = src.type === "milestone" ? src.x + MILESTONE_HALF : src.x + src.width;
-			tx = tgt.type === "milestone" ? tgt.x - MILESTONE_HALF : tgt.x;
-			break;
-		case "SS":
-			sx = src.type === "milestone" ? src.x - MILESTONE_HALF : src.x;
-			tx = tgt.type === "milestone" ? tgt.x - MILESTONE_HALF : tgt.x;
-			break;
-		case "FF":
-			sx = src.type === "milestone" ? src.x + MILESTONE_HALF : src.x + src.width;
-			tx = tgt.type === "milestone" ? tgt.x + MILESTONE_HALF : tgt.x + tgt.width;
-			break;
-		case "SF":
-			sx = src.type === "milestone" ? src.x - MILESTONE_HALF : src.x;
-			tx = tgt.type === "milestone" ? tgt.x + MILESTONE_HALF : tgt.x + tgt.width;
-			break;
-	}
-	if (Math.abs(sy - ty) < 1) return [{
-		x: sx,
-		y: sy
-	}, {
-		x: tx,
-		y: ty
-	}];
-	if (sx <= tx) {
-		const midX = sx + Math.max(TURN_MARGIN, (tx - sx) / 2);
-		return [
-			{
-				x: sx,
-				y: sy
-			},
-			{
-				x: midX,
-				y: sy
-			},
-			{
-				x: midX,
-				y: ty
-			},
-			{
-				x: tx,
-				y: ty
-			}
-		];
+		case "FS": return {
+			sx: srcRight,
+			tx: tgtLeft
+		};
+		case "SS": return {
+			sx: srcLeft,
+			tx: tgtLeft
+		};
+		case "FF": return {
+			sx: srcRight,
+			tx: tgtRight
+		};
+		case "SF": return {
+			sx: srcLeft,
+			tx: tgtRight
+		};
+		default: throw new Error(`Unhandled link type: ${String(type)}`);
+	}
+}
+/**
+* Routes a link whose source and target rows are within 1 px of each other.
+*
+* **Direct‑line optimisation**
+* A plain horizontal segment is only used when it is non‑degenerate (`sx ≠ tx`)
+* AND the arrowhead direction is visually correct:
+*
+* | Entry side | Condition  | Arrow direction |
+* |-----------|-----------|----------------|
+* | left      | `sx < tx` | → RIGHT ✓       |
+* | right     | `sx > tx` | ← LEFT ✓        |
+*
+* Otherwise a 6‑vertex detour is drawn so that the last segment approaches
+* the target from the correct side. By default the detour goes **below** the
+* bars; pass `above = true` when headroom is insufficient below.
+*
+* @param sx - Source anchor x.
+* @param sy - Source row center y.
+* @param tx - Target anchor x.
+* @param ty - Target row center y.
+* @param leftEntry - Whether the link enters the target on its left edge.
+* @param exitRight - Whether the link exits the source on its right edge.
+* @param above - Route the detour above the bar row instead of below (default `false`).
+* @returns An ordered array of {@link Point} vertices.
+*/
+function routeSameRow(sx, sy, tx, ty, leftEntry, exitRight, above = false) {
+	if (Math.abs(sx - tx) >= STUB_THRESHOLD) {
+		if (leftEntry && sx < tx || !leftEntry && sx > tx) return [{
+			x: sx,
+			y: sy
+		}, {
+			x: tx,
+			y: ty
+		}];
 	}
-	const loopX = tx - TURN_MARGIN;
+	const exitDir = exitRight ? TURN_MARGIN : -TURN_MARGIN;
+	const detourY = sy + (above ? -SAME_ROW_DETOUR : SAME_ROW_DETOUR);
+	const approachX = leftEntry ? tx - TURN_MARGIN : tx + TURN_MARGIN;
+	return [
+		{
+			x: sx,
+			y: sy
+		},
+		{
+			x: sx + exitDir,
+			y: sy
+		},
+		{
+			x: sx + exitDir,
+			y: detourY
+		},
+		{
+			x: approachX,
+			y: detourY
+		},
+		{
+			x: approachX,
+			y: ty
+		},
+		{
+			x: tx,
+			y: ty
+		}
+	];
+}
+/**
+* Routes a link between **different** rows using an orthogonal path.
+*
+*   1. Step **away** from the source bar to the crossover x (`crossX`).
+*   2. Travel **vertically** to the midpoint between rows (`midY`).
+*   3. Travel **horizontally** to the approach point on the correct side
+*      of the target.
+*   4. Travel **vertically** to the target row (`ty`).
+*   5. Final segment to the target entry point (`tx`).
+*
+* The crossover x is clamped so the path never doubles back past both bars.
+* When exit and entry are on the **same** side (SS / FF) the exit-side step
+* is limited to the approach x, avoiding a wide U‑shape.
+*
+* The approach point is chosen so the last segment travels in the arrow
+* direction demanded by the entry side:
+*
+*   - Left‑entry  (FS, SS): approach from the **left**  → `tx - TURN_MARGIN`
+*     Last segment goes RIGHT.
+*   - Right‑entry (FF, SF): approach from the **right** → `tx + TURN_MARGIN`
+*     Last segment goes LEFT.
+*
+*         left‑entry (FS / SS)              right‑entry (FF / SF)
+*         ─────────────────────              ─────────────────────
+*   sx  ●────────────────►              sx  ●────────────────►
+*        exitDir                             exitDir
+*        │                                    │
+*        │  midY                              │  midY
+*        ▼  ════════════════════►             ▼  ════════════════════►
+*                                │                                   │
+*                                │                                   │
+*                                ▼  approachFromLeft                 ▼  approachFromRight
+*                              ●────────────────►                 ◄────────────────●
+*                              tx                                   tx
+*
+* @param sx - Source anchor x.
+* @param sy - Source row center y.
+* @param tx - Target anchor x.
+* @param ty - Target row center y.
+* @param leftEntry - Whether the link enters the target on its left edge.
+* @param exitRight - Whether the link exits the source on its right edge.
+* @returns An ordered array of {@link Point} vertices.
+*/
+function routeMultiRow(sx, sy, tx, ty, leftEntry, exitRight) {
+	const midY = Math.round(Math.abs(sy - ty) / ROW_HEIGHT) % 2 === 0 ? (sy + ty) / 2 + ROW_HEIGHT / 2 : (sy + ty) / 2;
+	const approachX = leftEntry ? tx - TURN_MARGIN : tx + TURN_MARGIN;
+	const crossX = exitRight ? Math.max(sx + TURN_MARGIN, approachX) : Math.min(sx - TURN_MARGIN, approachX);
 	return [
 		{
 			x: sx,
 			y: sy
 		},
 		{
-			x: sx + TURN_MARGIN,
+			x: crossX,
 			y: sy
 		},
 		{
-			x: sx + TURN_MARGIN,
-			y: (sy + ty) / 2
+			x: crossX,
+			y: midY
 		},
 		{
-			x: loopX,
-			y: (sy + ty) / 2
+			x: approachX,
+			y: midY
 		},
 		{
-			x: loopX,
+			x: approachX,
 			y: ty
 		},
 		{
@@ -962,11 +1224,61 @@ function route(type, src, tgt) {
 	];
 }
 /**
+* Produces the vertex list for an orthogonal connector between source and target.
+*
+* ## Anchor points (sx / tx)
+*
+* | Type | Source anchor (`sx`)        | Target anchor (`tx`)          |
+* |------|-----------------------------|-------------------------------|
+* | FS   | right edge of source        | left edge of target           |
+* | SS   | left edge of source         | left edge of target           |
+* | FF   | right edge of source        | right edge of target          |
+* | SF   | left edge of source         | right edge of target          |
+*
+* Milestone offsets are applied automatically: ± {@link MILESTONE_HALF} replaces
+* ± width for zero‑width milestones.
+*
+* ## Routing strategy
+*
+* **Same row** (|sy − ty| < 1 px):
+* - Direct horizontal line when non‑degenerate **and** the arrow direction
+*   naturally points **into** the target (see {@link routeSameRow}).
+* - Otherwise a 6‑vertex detour below the bars is drawn.
+*
+* **Different rows**: always a 6‑vertex orthogonal path that steps away from
+* the source, passes through the midpoint between rows, and approaches the
+* target from the correct side (see {@link routeMultiRow}).
+*
+* ## Arrowhead direction guarantee
+*
+* The SVG `marker-end` uses `orient="auto"`, so the arrow rotates to match
+* the last segment. This function ensures the last segment always travels
+* **into** the target on the semantically correct edge:
+*
+* | Entry side | Target edge  | Last segment direction |
+* |-----------|-------------|-----------------------|
+* | left      | left edge    | → RIGHT               |
+* | right     | right edge   | ← LEFT                |
+*
+* @param type - The link type determining start/end anchor points.
+* @param src  - The source bar layout.
+* @param tgt  - The target bar layout.
+* @returns An ordered array of {@link Point} vertices.
+*/
+function route(type, src, tgt) {
+	const { sx, tx } = getAnchors(type, src, tgt);
+	const sy = src.centerY;
+	const ty = tgt.centerY;
+	const leftEntry = isLeftEntry(type);
+	const exitRight = isExitRight(type);
+	return collapseStubs(Math.abs(sy - ty) < 1 ? routeSameRow(sx, sy, tx, ty, leftEntry, exitRight) : routeMultiRow(sx, sy, tx, ty, leftEntry, exitRight));
+}
+/**
 * Computes orthogonal routing for all dependency links.
 * Links whose source or target is not in the layout map are skipped silently
 * (e.g. when the row is collapsed).
 *
-* @param links - The dependency links to route.
+* @param links   - The dependency links to route.
 * @param layouts - A map from task ID to its computed {@link BarLayout}.
 * @returns An array of {@link RoutedLink} objects with computed vertex paths.
 */
@@ -979,12 +1291,13 @@ function routeLinks(links, layouts) {
 			linkId: link.id,
 			sourceTaskId: link.source,
 			targetTaskId: link.target,
+			type: link.type,
 			points: route(link.type, src, tgt)
 		};
 	}).filter((r) => r !== null);
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/helpers.ts
+//#region src/lib/vanilla/dom/helpers.ts
 /**
 * Batches style assignments; avoids repeated style recalculations.
 *
@@ -1030,7 +1343,7 @@ function setAttrs(elem, attrs) {
 	for (const [k, v] of Object.entries(attrs)) elem.setAttribute(k, String(v));
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/timeHeader.ts
+//#region src/lib/vanilla/dom/timeHeader.ts
 function specialDayKind(date, specialDaysByDate, showWeekends, weekendDays) {
 	const dateKey = startOfDay(date).toISOString().slice(0, 10);
 	const specialDay = specialDaysByDate.get(dateKey);
@@ -1168,7 +1481,7 @@ function renderTimeHeader(container, state) {
 	container.append(lowerRow);
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/gridColumns.ts
+//#region src/lib/vanilla/dom/gridColumns.ts
 const DEFAULT_GRID_COLUMNS = [
 	{
 		id: "name",
@@ -1249,8 +1562,8 @@ function visibleColumns(columns) {
 	return columns.filter((c) => c.visible !== false);
 }
 const GRID_COLUMN_FR_MIN_WIDTH = 120;
-const PX_RE = /^(\d+(?:\.\d+)?)px$/;
-const FR_RE = /^(\d+(?:\.\d+)?)fr$/;
+const PX_RE = /^(\d+(?:\.\d+)?)px$/u;
+const FR_RE = /^(\d+(?:\.\d+)?)fr$/u;
 function parseColumnMinWidth(width) {
 	const trimmed = width.trim();
 	const pxMatch = PX_RE.exec(trimmed);
@@ -1272,21 +1585,45 @@ function gridNaturalWidth(columns) {
 	return total;
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/leftPane.ts
+//#region src/lib/vanilla/dom/leftPane.ts
 const INDENT = 16;
 const COLUMN_MIN_WIDTH = 30;
-function toTask$1(row) {
-	return {
-		id: row.id,
-		text: row.text,
-		startDate: row.startDate,
-		durationHours: row.durationHours,
-		percentComplete: row.percentComplete,
-		type: row.type,
-		open: row.open,
-		...row.parent === void 0 ? {} : { parent: row.parent },
-		...row.color === void 0 ? {} : { color: row.color }
+function toTask$1(node) {
+	const base = {
+		id: node.id,
+		text: node.text,
+		startDate: node.startDate,
+		...node.parent === void 0 ? {} : { parent: node.parent },
+		...node.color === void 0 ? {} : { color: node.color },
+		...node.data === void 0 ? {} : { data: node.data }
 	};
+	switch (node.kind) {
+		case "task": return {
+			...base,
+			kind: "task",
+			durationHours: node.durationHours,
+			percentComplete: node.percentComplete
+		};
+		case "project": return {
+			...base,
+			kind: "project",
+			durationHours: node.durationHours,
+			percentComplete: node.percentComplete,
+			open: node.open
+		};
+		case "milestone": return {
+			...base,
+			kind: "milestone"
+		};
+	}
+}
+function getTaskField(task, field) {
+	switch (field) {
+		case "durationHours": return task.kind !== "milestone" ? task.durationHours : void 0;
+		case "percentComplete": return task.kind !== "milestone" ? task.percentComplete : void 0;
+		case "open": return task.kind === "project" ? task.open : void 0;
+		default: return task[field];
+	}
 }
 function buildTreeNameCell(row, expandedIds, cbs) {
 	const hasChildren = isParent(row);
@@ -1330,7 +1667,7 @@ function buildTreeNameCell(row, expandedIds, cbs) {
 	const label = el("span");
 	css(label, {
 		fontSize: "var(--gantt-font-size-md)",
-		fontWeight: row.type === "project" ? "var(--gantt-font-weight-bold)" : "var(--gantt-font-weight-normal)",
+		fontWeight: row.kind === "project" ? "var(--gantt-font-weight-bold)" : "var(--gantt-font-weight-normal)",
 		color: "var(--gantt-text)",
 		overflow: "hidden",
 		textOverflow: "ellipsis",
@@ -1354,9 +1691,9 @@ function buildDataCell(row, column, locale) {
 	css(cell, styles);
 	const task = toTask$1(row);
 	if (column.field !== void 0) {
-		const rawValue = task[column.field];
+		const rawValue = getTaskField(task, column.field);
 		if (column.format !== void 0) cell.textContent = column.format(rawValue, task, row, locale);
-		else cell.textContent = rawValue !== null && rawValue !== void 0 ? String(rawValue) : "";
+		else cell.textContent = rawValue !== null && rawValue !== void 0 ? typeof rawValue === "object" ? JSON.stringify(rawValue) : String(rawValue) : "";
 	}
 	return cell;
 }
@@ -1375,7 +1712,7 @@ function buildAddButton(row, cbs, locale) {
 	});
 	btn.addEventListener("click", (event) => {
 		event.stopPropagation();
-		cbs.onAdd(row.id);
+		cbs.onTaskAdd(row.id);
 	});
 	return btn;
 }
@@ -1415,7 +1752,7 @@ function buildRow(row, selectedId, expandedIds, cbs, columns, locale) {
 	wrapper.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onSelect(row.id);
+			cbs.onTaskClick(row.id);
 		}
 	});
 	for (const column of visibleColumns(columns)) wrapper.append(buildCell(column, row, expandedIds, cbs, locale));
@@ -1566,23 +1903,22 @@ function setupColumnResize(headerEl, bodyEl, columns, onChange) {
 	};
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/dependencyLayer.ts
+//#region src/lib/vanilla/dom/dependencyLayer.ts
 const NS = "http://www.w3.org/2000/svg";
+const ARROW_PATH = "M 0 1 L 10 5 L 0 9 Z";
 const ARROW_SIZE = 6;
 /**
 * Creates the SVG overlay element. Call once; pass to updateDependencyLayer on each render.
 * Also creates a hidden ghost-line path used during link-creation drags.
 *
-* @param totalWidth - The total pixel width of the SVG viewport.
-* @param totalHeight - The total pixel height of the SVG viewport.
+* The SVG is initially zero-sized; `updateDependencyLayer` sets width/height each frame.
+*
+* @param _totalWidth - The total pixel width of the SVG viewport.
+* @param _totalHeight - The total pixel height of the SVG viewport.
 * @returns An `SVGSVGElement` ready to be inserted into the DOM.
 */
-function createDependencyLayer(totalWidth, totalHeight) {
+function createDependencyLayer(_totalWidth, _totalHeight) {
 	const svg = document.createElementNS(NS, "svg");
-	setAttrs(svg, {
-		width: totalWidth,
-		height: totalHeight
-	});
 	Object.assign(svg.style, {
 		position: "absolute",
 		top: "0",
@@ -1597,7 +1933,7 @@ function createDependencyLayer(totalWidth, totalHeight) {
 		setAttrs(marker, {
 			id,
 			viewBox: "0 0 10 10",
-			refX: "9",
+			refX: "10",
 			refY: "5",
 			markerWidth: ARROW_SIZE,
 			markerHeight: ARROW_SIZE,
@@ -1605,7 +1941,7 @@ function createDependencyLayer(totalWidth, totalHeight) {
 		});
 		const path = document.createElementNS(NS, "path");
 		setAttrs(path, {
-			d: "M 0 1 L 10 5 L 0 9 Z",
+			d: ARROW_PATH,
 			fill: color
 		});
 		marker.append(path);
@@ -1638,10 +1974,9 @@ function createDependencyLayer(totalWidth, totalHeight) {
 function showGhostLine(svg, x1, y1, x2, y2, valid) {
 	const ghost = svg.querySelector("path.gantt-ghost-line");
 	if (ghost === null) return;
-	setAttrs(ghost, {
-		d: `M ${x1},${y1} L ${x2},${y2}`,
-		"stroke-dasharray": valid ? "none" : "5 3"
-	});
+	setAttrs(ghost, { d: `M ${x1},${y1} L ${x2},${y2}` });
+	if (valid) ghost.removeAttribute("stroke-dasharray");
+	else ghost.setAttribute("stroke-dasharray", "5 3");
 	if (valid) ghost.setAttribute("marker-end", "url(#gantt-arrow)");
 	else ghost.removeAttribute("marker-end");
 	ghost.style.display = "";
@@ -1668,26 +2003,21 @@ function hideGhostLine(svg) {
 * @param totalHeight - The total pixel height of the SVG viewport.
 * @param selectedTaskId - The currently selected task ID, or `null`.
 * @param highlightLinkedDependenciesOnSelect - When `true`, links connected to the selected task use highlight styling.
+* @param cbs - Optional callbacks for link click and double-click events.
 */
-function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTaskId, highlightLinkedDependenciesOnSelect) {
+function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTaskId, highlightLinkedDependenciesOnSelect, cbs) {
 	setAttrs(svg, {
 		width: totalWidth,
 		height: totalHeight
 	});
-	const toRemove = [];
-	for (let i = 1; i < svg.children.length; i++) {
-		const child = svg.children[i];
-		if (child !== void 0 && !child.classList.contains("gantt-ghost-line")) toRemove.push(child);
-	}
+	const toRemove = [...svg.children].slice(1).filter((c) => !c.classList.contains("gantt-ghost-line"));
 	for (const node of toRemove) svg.removeChild(node);
+	const ghost = svg.querySelector("path.gantt-ghost-line");
 	for (const link of links) {
 		const { points } = link;
 		if (points.length === 0) continue;
-		let d = `M ${points[0]?.x ?? 0},${points[0]?.y ?? 0}`;
-		for (let i = 1; i < points.length; i++) {
-			const p = points[i];
-			if (p !== void 0) d += ` L ${p.x},${p.y}`;
-		}
+		const [first, ...rest] = points;
+		const d = `M ${first.x},${first.y}${rest.map((p) => ` L ${p.x},${p.y}`).join("")}`;
 		const isRelated = highlightLinkedDependenciesOnSelect && selectedTaskId !== null && (link.sourceTaskId === selectedTaskId || link.targetTaskId === selectedTaskId);
 		const path = document.createElementNS(NS, "path");
 		setAttrs(path, {
@@ -1696,25 +2026,62 @@ function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTask
 			stroke: isRelated ? "var(--gantt-link-hi)" : "var(--gantt-link)",
 			"stroke-width": isRelated ? "1.8" : "1.5",
 			"stroke-linejoin": "round",
-			"marker-end": isRelated ? "url(#gantt-arrow-hi)" : "url(#gantt-arrow)"
+			"marker-end": isRelated ? "url(#gantt-arrow-hi)" : "url(#gantt-arrow)",
+			"data-link-id": String(link.linkId)
+		});
+		path.style.pointerEvents = "visibleStroke";
+		path.style.cursor = "pointer";
+		path.addEventListener("click", (event) => {
+			if (event.detail === 1) cbs?.onLinkClick?.({
+				id: link.linkId,
+				source: link.sourceTaskId,
+				target: link.targetTaskId,
+				type: link.type
+			});
 		});
-		svg.append(path);
+		path.addEventListener("dblclick", (_event) => {
+			cbs?.onLinkDblClick?.({
+				id: link.linkId,
+				source: link.sourceTaskId,
+				target: link.targetTaskId,
+				type: link.type
+			});
+		});
+		if (ghost !== null) svg.insertBefore(path, ghost);
+		else svg.append(path);
 	}
 }
 //#endregion
-//#region src/gantt-chart/vanilla/interaction/drag.ts
-function toTask(row) {
-	return {
-		id: row.id,
-		text: row.text,
-		startDate: row.startDate,
-		durationHours: row.durationHours,
-		percentComplete: row.percentComplete,
-		type: row.type,
-		open: row.open,
-		...row.parent === void 0 ? {} : { parent: row.parent },
-		...row.color === void 0 ? {} : { color: row.color }
+//#region src/lib/vanilla/interaction/drag.ts
+function toTask(node) {
+	const base = {
+		id: node.id,
+		text: node.text,
+		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) {
+		case "task": return {
+			...base,
+			kind: "task",
+			durationHours: node.durationHours,
+			percentComplete: node.percentComplete
+		};
+		case "project": return {
+			...base,
+			kind: "project",
+			durationHours: node.durationHours,
+			percentComplete: node.percentComplete,
+			open: node.open
+		};
+		case "milestone": return {
+			...base,
+			kind: "milestone"
+		};
+	}
 }
 /**
 * Attaches drag-to-move and resize listeners to a bar element.
@@ -1736,22 +2103,27 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 		try {
 			barEl.setPointerCapture(e.pointerId);
 		} catch {}
-		cbs.onSelect?.(task.id);
+		cbs.onTaskClick?.(task.id);
 		const startX = e.clientX;
 		const originDate = parseDate(task.startDate);
 		const mapper = getMapper();
+		let lastHours = 0;
 		function onMove(me) {
 			const dx = me.clientX - startX;
-			const hours = Math.round(mapper.widthToDuration(dx));
-			cbs.onMove?.({
+			lastHours = Math.round(mapper.widthToDuration(dx));
+			cbs.onTaskMove?.({
 				id: task.id,
-				startDate: addHours(originDate, hours)
+				startDate: addHours(originDate, lastHours)
 			});
 		}
 		function onUp() {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onUp);
 			barEl.style.cursor = "grab";
+			if (lastHours !== 0) cbs._onTaskMoveFinal?.({
+				id: task.id,
+				startDate: addHours(originDate, lastHours)
+			});
 		}
 		barEl.style.cursor = "grabbing";
 		window.addEventListener("pointermove", onMove);
@@ -1765,29 +2137,33 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 			resizeHandleEl.setPointerCapture(e.pointerId);
 		} catch {}
 		const startX = e.clientX;
-		const origDur = task.durationHours;
+		const origDur = task.kind !== "milestone" ? task.durationHours : 0;
 		const mapper = getMapper();
+		let lastDuration = origDur;
 		function onMove(me) {
 			const dx = me.clientX - startX;
 			const hoursDelta = Math.round(mapper.widthToDuration(dx));
-			cbs.onResize?.({
+			lastDuration = Math.max(1, origDur + hoursDelta);
+			cbs.onTaskResize?.({
 				id: task.id,
-				durationHours: Math.max(1, origDur + hoursDelta)
+				durationHours: lastDuration
 			});
 		}
 		function onUp() {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onUp);
+			cbs._onTaskResizeFinal?.({
+				id: task.id,
+				durationHours: lastDuration
+			});
 		}
 		window.addEventListener("pointermove", onMove);
 		window.addEventListener("pointerup", onUp);
 	}
 	function onBarClick(event) {
 		if (event.detail !== 2) return;
-		cbs.onTaskEditIntent?.({
+		cbs.onTaskDoubleClick?.({
 			id: task.id,
-			source: "bar",
-			trigger: "doubleClick",
 			task: toTask(task)
 		});
 	}
@@ -1801,6 +2177,56 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 	};
 }
 /**
+* Attaches drag-to-change-progress listeners to a progress overlay element.
+*
+* @param progressEl - The progress overlay DOM element.
+* @param barEl - The bar DOM element (for width measurement).
+* @param task - The {@link TaskNode} for this bar.
+* @param _getMapper - A function returning the current {@link PixelMapper} (unused, kept for API symmetry).
+* @param cbs - The chart callbacks.
+* @returns A cleanup function that removes all listeners.
+*/
+function attachProgressDrag(progressEl, barEl, task, _getMapper, cbs) {
+	function onProgressDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		cbs.onTaskClick?.(task.id);
+		try {
+			progressEl.setPointerCapture(e.pointerId);
+		} catch {}
+		const startX = e.clientX;
+		const barWidth = barEl.getBoundingClientRect().width;
+		const origPercent = task.kind !== "milestone" ? task.percentComplete ?? 0 : 0;
+		let lastPercent = origPercent;
+		function onMove(me) {
+			const dx = me.clientX - startX;
+			const percentDelta = barWidth > 0 ? dx / barWidth * 100 : 0;
+			lastPercent = Math.max(0, Math.min(100, Math.round(origPercent + percentDelta)));
+			cbs.onTaskProgressDrag?.({
+				id: task.id,
+				percentComplete: lastPercent
+			});
+		}
+		function onUp() {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			progressEl.style.cursor = "ew-resize";
+			cbs._onTaskProgressDragFinal?.({
+				id: task.id,
+				percentComplete: lastPercent
+			});
+		}
+		progressEl.style.cursor = "ew-resize";
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}
+	progressEl.addEventListener("pointerdown", onProgressDown);
+	return () => {
+		progressEl.removeEventListener("pointerdown", onProgressDown);
+	};
+}
+/**
 * Attaches click-to-select on a milestone diamond.
 *
 * @param diamondEl - The milestone diamond DOM element.
@@ -1810,16 +2236,14 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 */
 function attachMilestoneClick(diamondEl, taskId, cbs) {
 	function onClick() {
-		cbs.onSelect?.(taskId);
+		cbs.onTaskClick?.(taskId);
 	}
 	function onDoubleClick(event) {
 		if (event.detail === 2) {
 			const task = diamondEl.__task;
 			if (task === void 0) return;
-			cbs.onTaskEditIntent?.({
+			cbs.onTaskDoubleClick?.({
 				id: taskId,
-				source: "milestone",
-				trigger: "doubleClick",
 				task
 			});
 		}
@@ -1835,7 +2259,7 @@ function bindMilestoneTask(diamondEl, task) {
 	diamondEl.__task = task;
 }
 //#endregion
-//#region src/gantt-chart/vanilla/interaction/linkCreation.ts
+//#region src/lib/vanilla/interaction/linkCreation.ts
 /**
 * Attaches a link-creation drag listener to an endpoint handle.
 *
@@ -1917,7 +2341,7 @@ function createEndpointHandle() {
 	return handle;
 }
 //#endregion
-//#region src/gantt-chart/vanilla/dom/rightPane.ts
+//#region src/lib/vanilla/dom/rightPane.ts
 const BAR_COLOR = {
 	task: "var(--gantt-task)",
 	project: "var(--gantt-project)",
@@ -1942,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()
 	};
 }
@@ -1991,9 +2420,10 @@ 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 color = BAR_COLOR[layout.type] ?? BAR_COLOR["task"];
+	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" : ""}`;
 	css(bar, {
@@ -2003,15 +2433,17 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 		width: `${layout.width}px`,
 		height: `${layout.height}px`,
 		...color === void 0 ? {} : { background: color },
-		borderRadius: layout.type === "project" ? "3px" : "4px",
-		cursor: "grab",
+		borderRadius: layout.kind === "project" ? "3px" : "4px",
+		cursor: readonly ? "pointer" : "grab",
 		userSelect: "none",
 		overflow: "hidden",
 		zIndex: selected ? "3" : "2",
 		touchAction: "none"
 	});
+	let cleanupProgressDrag;
 	if (layout.progressWidth > 0) {
 		const prog = el("div");
+		const progressEnabled = state.progressDragEnabled;
 		css(prog, {
 			position: "absolute",
 			left: "0",
@@ -2019,8 +2451,15 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 			width: `${layout.progressWidth}px`,
 			height: "100%",
 			background: "rgba(0,0,0,0.18)",
-			pointerEvents: "none"
+			...progressEnabled ? {
+				cursor: "ew-resize",
+				touchAction: "none"
+			} : { pointerEvents: "none" }
 		});
+		if (progressEnabled) {
+			prog.className = "gantt-progress-overlay";
+			cleanupProgressDrag = attachProgressDrag(prog, bar, task, () => state.mapper, cbs);
+		}
 		bar.append(prog);
 	}
 	const label = el("span");
@@ -2046,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.onSelect?.(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.onSelect?.(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;
@@ -2104,16 +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" : ""}`;
@@ -2125,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;
@@ -2136,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.onSelect?.(task.id);
+			cbs.onTaskClick?.(task.id);
 		}
 	});
 	const labelEl = el("span");
@@ -2156,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;
@@ -2182,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);
 }
 /**
@@ -2235,9 +2760,10 @@ function renderRightPane(refs, state, cbs) {
 	for (const child of [...absoluteLayer.children]) if (child !== svgLayer) toRemove.push(child);
 	for (const node of toRemove) absoluteLayer.removeChild(node);
 	hideGhostLine(svgLayer);
-	for (const { cleanupDrag, cleanupLinkHandles } of barRegistry.values()) {
-		cleanupDrag();
+	for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag } of barRegistry.values()) {
+		cleanupDrag?.();
 		cleanupLinkHandles?.();
+		cleanupProgressDrag?.();
 	}
 	barRegistry.clear();
 	if (scale === "day") renderSpecialDayBackgrounds(absoluteLayer, svgLayer, state, contentHeight);
@@ -2278,13 +2804,13 @@ function renderRightPane(refs, state, cbs) {
 	for (const task of visibleRows) {
 		const layout = layouts.get(task.id);
 		if (layout === void 0) continue;
-		if (layout.type === "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);
+	updateDependencyLayer(svgLayer, links.filter((link) => visibleTaskIds.has(link.sourceTaskId) && visibleTaskIds.has(link.targetTaskId)), totalWidth, contentHeight, selectedId, highlightLinkedDependenciesOnSelect, cbs);
 }
 //#endregion
-//#region src/gantt-chart/vanilla/utils.ts
+//#region src/lib/vanilla/utils.ts
 function buildTaskIndex(tasks) {
 	const index = /* @__PURE__ */ new Map();
 	for (let i = 0; i < tasks.length; i++) {
@@ -2333,11 +2859,11 @@ function getExpandableTaskIds(tasks) {
 function getInitialExpandedIds(tasks) {
 	const expandableIds = getExpandableTaskIds(tasks);
 	const expandedIds = /* @__PURE__ */ new Set();
-	for (const task of tasks) if (task.open && expandableIds.has(task.id)) expandedIds.add(task.id);
+	for (const task of tasks) if (task.kind === "project" && task.open && expandableIds.has(task.id)) expandedIds.add(task.id);
 	return expandedIds;
 }
 //#endregion
-//#region src/gantt-chart/vanilla/splitter.ts
+//#region src/lib/vanilla/splitter.ts
 const MIN_PANE_WIDTH$1 = 96;
 function attachSplitter(splitterHandle, leftPane, container, timelineMinWidth, onDragEnd) {
 	splitterHandle.addEventListener("pointerdown", (e) => {
@@ -2386,7 +2912,7 @@ function computeLeftPaneWidth(options) {
 	return Math.max(MIN_PANE_WIDTH, Math.floor(width));
 }
 //#endregion
-//#region src/gantt-chart/vanilla/gantt-chart.ts
+//#region src/lib/vanilla/gantt-chart.ts
 const HEADER_H = 52;
 const OVERSCAN = 4;
 /**
@@ -2405,6 +2931,7 @@ const OVERSCAN = 4;
 var GanttChart = class {
 	#container;
 	#opts;
+	#callbacks;
 	#input = null;
 	#scale;
 	#selectedId = null;
@@ -2412,6 +2939,7 @@ var GanttChart = class {
 	#rafPending = false;
 	#rafId = null;
 	#destroyed = false;
+	#dragOriginals = /* @__PURE__ */ new Map();
 	#taskIndex;
 	#lastGridClick = null;
 	#userSplitWidth = null;
@@ -2426,6 +2954,7 @@ var GanttChart = class {
 	#root;
 	#scrollEl;
 	#leftPane;
+	#leftHeader;
 	#leftBody;
 	#rightPane;
 	#rightHeader;
@@ -2436,14 +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 = {}) {
 		this.#container = container;
 		this.#scale = opts.scale ?? "day";
 		this.#opts = opts;
+		this.#callbacks = {};
 		this.#taskIndex = /* @__PURE__ */ new Map();
 		this.#locale = resolveChartLocale(opts.locale);
 		this.#columns = opts.gridColumns ?? gridColumnDefaults(this.#locale);
@@ -2453,50 +2984,189 @@ var GanttChart = class {
 		this.#weekendDays = normalizeWeekendDays(opts.weekendDays ?? this.#locale.weekendDays);
 		this.#specialDaysByDate = buildSpecialDayIndex(opts.specialDays ?? []);
 		this.#expandedIds = /* @__PURE__ */ new Set();
-		this.#cbs = {
-			onSelect: (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;
-				opts.onSelect?.(this.#selectedId);
+				if (this.#selectedId !== null) {
+					const task = this.#findTask(this.#selectedId);
+					if (task !== void 0) this.#callbacks.onTaskClick?.({
+						task,
+						instance: this
+					});
+				}
 				this.#scheduleRender();
 			},
 			onTaskDoubleClick: (payload) => {
-				opts.onTaskDoubleClick?.(payload);
+				this.#callbacks.onTaskDoubleClick?.({
+					task: payload.task,
+					instance: this
+				});
 			},
 			onTaskEditIntent: (payload) => {
-				opts.onTaskEditIntent?.(payload);
-				opts.onTaskDoubleClick?.({
-					id: payload.id,
-					source: payload.source
+				this.#callbacks.onTaskDoubleClick?.({
+					task: payload.task,
+					instance: this
 				});
 			},
-			onMove: (payload) => {
+			onTaskMove: (payload) => {
+				if (!this.#dragOriginals.has(payload.id)) {
+					const task = this.#input?.tasks.find((t) => t.id === payload.id);
+					if (task !== void 0) this.#dragOriginals.set(payload.id, task);
+				}
 				const iso = payload.startDate.toISOString().slice(0, 10);
 				this.#patchTask(payload.id, { startDate: iso });
-				opts.onMove?.(payload);
 				this.#scheduleRender();
 			},
-			onResize: (payload) => {
+			_onTaskMoveFinal: async (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					const result = this.#callbacks.onTaskMove?.({
+						task,
+						newStartDate: payload.startDate,
+						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 });
+					}
+				}
+				this.#dragOriginals.clear();
+				this.#scheduleRender();
+				return true;
+			},
+			onTaskResize: (payload) => {
+				if (!this.#dragOriginals.has(payload.id)) {
+					const task = this.#input?.tasks.find((t) => t.id === payload.id);
+					if (task !== void 0) this.#dragOriginals.set(payload.id, task);
+				}
 				this.#patchTask(payload.id, { durationHours: payload.durationHours });
-				opts.onResize?.(payload);
 				this.#scheduleRender();
 			},
+			_onTaskResizeFinal: async (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					const result = this.#callbacks.onTaskResize?.({
+						task,
+						newDurationHours: payload.durationHours,
+						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 });
+					}
+				}
+				this.#dragOriginals.clear();
+				this.#scheduleRender();
+				return true;
+			},
+			onTaskProgressDrag: (payload) => {
+				if (!this.#dragOriginals.has(payload.id)) {
+					const task = this.#input?.tasks.find((t) => t.id === payload.id);
+					if (task !== void 0) this.#dragOriginals.set(payload.id, task);
+				}
+				this.#patchTask(payload.id, { percentComplete: payload.percentComplete });
+				this.#scheduleRender();
+			},
+			_onTaskProgressDragFinal: async (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					const result = this.#callbacks.onProgressChange?.({
+						task,
+						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 });
+					}
+				}
+				this.#dragOriginals.clear();
+				this.#scheduleRender();
+				return true;
+			},
+			onTaskAdd: (parentId) => {
+				const parentTask = this.#findTask(parentId);
+				if (parentTask !== void 0) this.#callbacks.onTaskAdd?.({
+					parentTask,
+					instance: this
+				});
+			},
 			onLeftPaneWidthChange: (width) => {
-				opts.onLeftPaneWidthChange?.(width);
+				this.#callbacks.onLeftPaneWidthChange?.({
+					width,
+					instance: this
+				});
 			},
 			onGridColumnsChange: (updatedColumns) => {
-				opts.onGridColumnsChange?.(updatedColumns);
+				this.#callbacks.onGridColumnsChange?.({
+					columns: updatedColumns,
+					instance: this
+				});
 			},
 			onLinkCreate: (payload) => {
-				opts.onLinkCreate?.(payload);
-			}
+				const sourceTask = this.#findTask(payload.sourceTaskId);
+				const targetTask = this.#findTask(payload.targetTaskId);
+				if (sourceTask !== void 0 && targetTask !== void 0) this.#callbacks.onLinkCreate?.({
+					type: "FS",
+					sourceTask,
+					targetTask,
+					instance: this
+				});
+			},
+			onLinkClick: (payload) => {
+				this.#callbacks.onLinkClick?.({
+					link: payload,
+					instance: this
+				});
+			},
+			onLinkDblClick: (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.
@@ -2508,9 +3178,9 @@ var GanttChart = class {
 		this.#assertAlive();
 		validateLinkRefs(newInput.tasks, newInput.links);
 		detectCycles(newInput.tasks, newInput.links);
-		this.#input = newInput;
-		this.#taskIndex = buildTaskIndex(newInput.tasks);
-		this.#expandedIds = getInitialExpandedIds(newInput.tasks);
+		this.#input = structuredClone(newInput);
+		this.#taskIndex = buildTaskIndex(this.#input.tasks);
+		this.#expandedIds = getInitialExpandedIds(this.#input.tasks);
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
 			this.#rafId = null;
@@ -2519,26 +3189,78 @@ var GanttChart = class {
 		this.#render();
 	}
 	/**
-	* Switches the time scale and re-renders.
+	* Merges the supplied options into the current configuration and re-renders
+	* only the panes affected by the changed options.
 	*
-	* @param scale - The new {@link TimeScale} to display.
+	* @param opts - A partial {@link GanttOptions} object. Only the keys present
+	*               in this parameter are updated; missing keys keep their
+	*               previous values.
 	* @throws {GanttError} When the instance has been destroyed.
 	*/
-	setScale(scale) {
+	setOptions(opts) {
 		this.#assertAlive();
-		this.#scale = scale;
-		this.#scheduleRender();
+		Object.assign(this.#opts, opts);
+		this.#scale = this.#opts.scale ?? "day";
+		let columnsChanged = false;
+		if (opts.locale !== void 0) {
+			this.#locale = resolveChartLocale(opts.locale);
+			if (this.#opts.gridColumns === void 0) {
+				this.#columns = gridColumnDefaults(this.#locale);
+				this.#leftPaneDefaultWidth = gridNaturalWidth(this.#columns);
+				columnsChanged = true;
+			}
+			if (this.#opts.weekendDays === void 0) this.#weekendDays = normalizeWeekendDays(this.#locale.weekendDays);
+		}
+		if (opts.gridColumns !== void 0) {
+			this.#columns = opts.gridColumns;
+			this.#leftPaneDefaultWidth = this.#opts.leftPaneWidth ?? gridNaturalWidth(this.#columns);
+			columnsChanged = true;
+		}
+		if (columnsChanged && this.#input !== null) this.#rebuildLeftPaneHeader();
+		if (opts.leftPaneWidth !== void 0) this.#leftPaneDefaultWidth = opts.leftPaneWidth;
+		if (opts.height !== void 0) {
+			this.#height = opts.height;
+			this.#root.style.height = `${this.#height}px`;
+		}
+		if (opts.timelineMinWidth !== void 0) {
+			this.#timelineMinWidth = opts.timelineMinWidth;
+			this.#rightPane.style.minWidth = `${this.#timelineMinWidth}px`;
+		}
+		if (opts.weekendDays !== void 0) this.#weekendDays = normalizeWeekendDays(opts.weekendDays);
+		if (opts.specialDays !== void 0) this.#specialDaysByDate = buildSpecialDayIndex(opts.specialDays);
+		if (opts.theme !== void 0) this.#applyTheme();
+		const hasLayoutChange = opts.leftPaneWidth !== void 0 || opts.responsiveSplitPane !== void 0 || opts.mobileBreakpoint !== void 0 || opts.mobileLeftPaneMinWidth !== void 0 || opts.mobileLeftPaneMaxRatio !== void 0 || opts.timelineMinWidth !== void 0;
+		if (hasLayoutChange) this.#applyResponsivePaneStyles();
+		const hasLeftPaneChange = columnsChanged || opts.locale !== void 0;
+		const hasRightPaneChange = opts.scale !== void 0 || opts.showWeekends !== void 0 || opts.weekendDays !== void 0 || opts.specialDays !== void 0 || opts.highlightLinkedDependenciesOnSelect !== void 0 || opts.linkCreationEnabled !== void 0 || opts.progressDragEnabled !== void 0 || opts.viewportStart !== void 0 || opts.viewportEnd !== void 0 || opts.locale !== void 0 || opts.timelineMinWidth !== void 0;
+		if (!(hasLeftPaneChange || hasRightPaneChange || hasLayoutChange)) return;
+		if (this.#rafPending && this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+			this.#rafPending = false;
+		}
+		if (hasLeftPaneChange && !hasRightPaneChange) this.#renderGrid();
+		else if (!hasLeftPaneChange && hasRightPaneChange) this.#renderTimeline();
+		else this.#render();
 	}
 	/**
 	* 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();
-		this.#selectedId = id;
-		this.#opts.onSelect?.(id);
+		if (id === null) this.#selectedId = null;
+		else {
+			const task = this.#input?.tasks.find((t) => t.id === id);
+			if (task !== void 0 && fireCallback) this.#callbacks.onTaskClick?.({
+				task,
+				instance: this
+			});
+			this.#selectedId = id;
+		}
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
 			this.#rafId = null;
@@ -2589,9 +3311,11 @@ var GanttChart = class {
 		else window.removeEventListener("resize", this.#applyResponsivePaneStyles);
 		if (this.#rafId !== null) cancelAnimationFrame(this.#rafId);
 		this.#columnResizeCleanup();
-		for (const { cleanupDrag, cleanupLinkHandles } of this.#rightPaneRefs.barRegistry.values()) {
-			cleanupDrag();
+		for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag, cleanupTooltip } of this.#rightPaneRefs.barRegistry.values()) {
+			cleanupDrag?.();
 			cleanupLinkHandles?.();
+			cleanupProgressDrag?.();
+			cleanupTooltip?.();
 		}
 		clearChildren(this.#container);
 	}
@@ -2606,15 +3330,16 @@ var GanttChart = class {
 			...patch
 		};
 	}
+	#findTask(id) {
+		return this.#input?.tasks.find((t) => t.id === id);
+	}
 	#handleGridClick = (payload) => {
 		const now = Date.now();
 		const prev = this.#lastGridClick;
 		if (prev !== null && prev.id === payload.id && now - prev.atMs <= 350) {
 			this.#lastGridClick = null;
-			this.#cbs.onTaskEditIntent?.({
+			this.#cbs.onTaskDoubleClick?.({
 				id: payload.id,
-				source: "grid",
-				trigger: "doubleClick",
 				task: payload.task
 			});
 			return;
@@ -2623,7 +3348,7 @@ var GanttChart = class {
 			id: payload.id,
 			atMs: now
 		};
-		this.#cbs.onSelect?.(payload.id);
+		this.#cbs.onTaskClick?.(payload.id);
 	};
 	#onScroll = () => {
 		({scrollTop: this.#scrollTop} = this.#scrollEl);
@@ -2664,6 +3389,7 @@ var GanttChart = class {
 			scale: this.#scale,
 			highlightLinkedDependenciesOnSelect: this.#opts.highlightLinkedDependenciesOnSelect ?? false,
 			linkCreationEnabled: this.#opts.linkCreationEnabled ?? false,
+			progressDragEnabled: this.#opts.progressDragEnabled ?? false,
 			expandedIds: this.#expandedIds,
 			selectedId: this.#selectedId,
 			scrollTop: this.#scrollTop,
@@ -2690,21 +3416,47 @@ var GanttChart = class {
 		if (input === null) return;
 		const state = this.#computeState(input);
 		renderTimeHeader(this.#rightHeader, state);
+		this.#renderGridInternal(state);
+		renderRightPane(this.#rightPaneRefs, state, this.#cbs);
+	};
+	#renderGrid = () => {
+		this.#rafPending = false;
+		const input = this.#input;
+		if (input === null) return;
+		this.#renderGridInternal(this.#computeState(input));
+	};
+	#renderGridInternal(state) {
 		renderLeftPane(this.#leftBody, state, {
 			onToggle: (id) => {
 				if (this.#expandedIds.has(id)) this.#expandedIds.delete(id);
 				else this.#expandedIds.add(id);
 				this.#scheduleRender();
 			},
-			onSelect: (id) => this.#cbs.onSelect?.(id),
+			onTaskClick: (id) => this.#cbs.onTaskClick?.(id),
 			onRowClick: (payload) => {
 				this.#handleGridClick(payload);
 			},
-			onTaskEditIntent: (payload) => this.#cbs.onTaskEditIntent?.(payload),
-			onAdd: (id) => this.#cbs.onAdd?.({ parentId: id })
+			onTaskDoubleClick: (payload) => this.#cbs.onTaskDoubleClick?.(payload),
+			onTaskAdd: (id) => this.#cbs.onTaskAdd?.(id)
 		}, this.#columns);
+	}
+	#renderTimeline = () => {
+		this.#rafPending = false;
+		const input = this.#input;
+		if (input === null) return;
+		const state = this.#computeState(input);
+		renderTimeHeader(this.#rightHeader, state);
 		renderRightPane(this.#rightPaneRefs, state, this.#cbs);
 	};
+	#rebuildLeftPaneHeader() {
+		this.#columnResizeCleanup();
+		clearChildren(this.#leftHeader);
+		const headerEl = buildLeftPaneHeader(this.#columns);
+		this.#leftHeader.append(headerEl);
+		this.#columnResizeCleanup = setupColumnResize(headerEl, this.#leftBody, this.#columns, (updated) => {
+			this.#cbs.onGridColumnsChange?.(updated);
+		});
+	}
 	#scheduleRender() {
 		if (this.#rafPending || this.#destroyed) return;
 		this.#rafPending = true;
@@ -2760,6 +3512,7 @@ var GanttChart = class {
 		const headerEl = buildLeftPaneHeader(this.#columns);
 		leftHeader.append(headerEl);
 		leftPane.append(leftHeader);
+		this.#leftHeader = leftHeader;
 		const leftBody = el("div");
 		leftPane.append(leftBody);
 		this.#leftBody = leftBody;
@@ -2807,12 +3560,14 @@ var GanttChart = class {
 	#wireEvents() {
 		this.#rightPaneRefs.absoluteLayer.addEventListener("click", (event) => {
 			if (event.target.closest(".gantt-bar, .gantt-milestone, .gantt-resize-handle")) return;
-			this.#cbs.onSelect?.(null);
+			this.#selectedId = null;
+			this.#scheduleRender();
 		});
 		this.#root.addEventListener("keydown", (event) => {
 			if (event.key === "Escape" && this.#selectedId !== null) {
 				event.preventDefault();
-				this.#cbs.onSelect?.(null);
+				this.#selectedId = null;
+				this.#scheduleRender();
 			}
 		});
 		this.#scrollEl.addEventListener("scroll", this.#onScroll);
@@ -2827,6 +3582,6 @@ var GanttChart = class {
 	}
 };
 //#endregion
-export { BAR_HEIGHT, BAR_Y_OFFSET, CHART_LOCALE_EN_US, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, GanttChart, GanttError, GanttInputSchema, LinkSchema, LinkTypeSchema, MILESTONE_HALF, MILESTONE_SIZE, ROW_HEIGHT, SCALE_CONFIGS, SpecialDayKindSchema, SpecialDaySchema, TaskSchema, TaskTypeSchema, addDays, addHours, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, diffHours, flattenTree, formatLabel, formatWeekNumber, gridColumnDefaults, gridNaturalWidth, gridTemplateColumns, isParent, parseDate, parseGanttInput, resolveChartLocale, routeLinks, safeParseGanttInput, validateLinkRefs, visibleColumns };
+export { BAR_HEIGHT, BAR_Y_OFFSET, CHART_LOCALE_EN_US, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, GanttChart, GanttError, GanttInputSchema, LinkSchema, LinkTypeSchema, MILESTONE_HALF, MILESTONE_SIZE, ROW_HEIGHT, SCALE_CONFIGS, SpecialDayKindSchema, SpecialDaySchema, TaskKindSchema, TaskSchema, addDays, addHours, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, diffHours, flattenTree, formatLabel, formatWeekNumber, gridColumnDefaults, gridNaturalWidth, gridTemplateColumns, isParent, parseDate, parseGanttInput, resolveChartLocale, routeLinks, validateLinkRefs, visibleColumns };
 
 //# sourceMappingURL=index.mjs.map