gantt-renderer 0.1.2 → 0.3.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,49 +14,157 @@ 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 */
-	start_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Expected YYYY-MM-DD"),
-	/** Duration in days; 0 = milestone */
-	duration: 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–1 completion ratio */
-	progress: z.number().min(0).max(1).default(0),
-	type: TaskTypeSchema.default("task"),
-	/** Initial expanded state (only relevant for parent nodes) */
-	open: z.boolean().default(true),
-	color: z.string().optional()
+	/** Optional CSS color value for the task bar. Overrides the default color assignment. */
+	color: z.string().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),
+	/**
+	* Initial expanded state for tree hierarchy.
+	* When `false`, children of this task are hidden on initial render.
+	*
+	* @default true
+	*/
+	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(),
+	/** The `id` of the predecessor task (the task that drives the dependency). */
 	source: z.number().int().positive(),
+	/** The `id` of the successor task (the task that depends on the predecessor). */
 	target: z.number().int().positive(),
-	type: LinkTypeSchema.default("FS")
+	/**
+	* Dependency type.
+	*
+	* - `'FS'` — Finish-to-start: successor starts after predecessor finishes.
+	* - `'SS'` — Start-to-start: successor starts at the same time as predecessor.
+	* - `'FF'` — Finish-to-finish: successor finishes at the same time as predecessor.
+	* - `'SF'` — Start-to-finish: successor finishes after predecessor starts.
+	*
+	* @default 'FS'
+	*/
+	type: LinkTypeSchema.default("FS"),
+	/** 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. Throws ZodError on failure. */
+/**
+* Parses raw external data.
+*
+* @param raw - The unvalidated input from the consumer.
+* @returns The parsed and validated {@link GanttInput}.
+* @throws {import('zod').ZodError} On schema validation failure.
+*/
 function parseGanttInput(raw) {
 	return GanttInputSchema.parse(raw);
 }
-/** Returns null instead of throwing. */
-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}.
+*/
 var GanttError = class extends Error {
 	code;
+	/**
+	* @param code - A machine-readable {@link GanttErrorCode} categorising the error.
+	* @param message - A human-readable description.
+	*/
 	constructor(code, message) {
 		super(message);
 		this.name = "GanttError";
@@ -64,20 +172,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.
-* Throws if any parent reference is unresolvable.
+*
+* @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,
+*         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;
@@ -97,7 +252,11 @@ function buildTaskTree(tasks) {
 }
 /**
 * Flattens a tree into a visible row list.
-* A node's children are included only when its id is in expandedIds.
+* A node's children are included only when its id is in `expandedIds`.
+*
+* @param roots - The root-level {@link TaskNode} instances of the tree.
+* @param expandedIds - Set of task IDs whose children should be rendered.
+* @returns A depth-first flattened array of visible {@link TaskNode} items.
 */
 function flattenTree(roots, expandedIds) {
 	const rows = [];
@@ -108,16 +267,23 @@ function flattenTree(roots, expandedIds) {
 	for (const root of roots) walk(root);
 	return rows;
 }
-/** Returns true when a node has children in the tree. */
+/**
+* Returns `true` when a node has children in the tree.
+*
+* @param node - The {@link TaskNode} to inspect.
+* @returns `true` if `node.children.length > 0`.
+*/
 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.
-* Throws with a human-readable cycle path on detection.
-* Silent return = no cycles.
+*
+* @param tasks - The task list (used to build the vertex set).
+* @param links - The dependency links defining the directed edges.
+* @throws {GanttError} When a cycle is detected, with a human-readable cycle path.
 */
 function detectCycles(tasks, links) {
 	const adj = /* @__PURE__ */ new Map();
@@ -155,88 +321,34 @@ function detectCycles(tasks, links) {
 	for (const id of adj.keys()) if ((color.get(id) ?? WHITE) === WHITE) dfs(id);
 }
 /**
-* Returns true when all link source/target ids reference existing tasks.
-* Throws with details on failure.
+* 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,
+*         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`);
-	}
-}
-//#endregion
-//#region src/gantt-chart/locale.ts
-const EN_US_LABELS = {
-	aria_task: "Task {0}",
-	aria_milestone: "Milestone {0}",
-	add_subtask_title: "Add subtask",
-	column_task_name: "Task name",
-	column_start_time: "Start time",
-	column_duration: "Duration",
-	column_quarter: "Q"
-};
-const CHART_LOCALE_EN_US = {
-	code: "en-US",
-	labels: EN_US_LABELS,
-	weekStartsOn: 0,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-/**
-* Resolves a ChartLocale from either a full ChartLocale object or a BCP 47 string.
-* When given a string, derives weekStartsOn, weekNumbering, and weekendDays from CLDR conventions.
-*/
-function resolveChartLocale(raw) {
-	if (raw === void 0) return CHART_LOCALE_EN_US;
-	if (typeof raw !== "string") {
-		const locale = {
-			code: raw.code,
-			weekStartsOn: raw.weekStartsOn ?? deriveWeekStartsOn(raw.code),
-			weekNumbering: raw.weekNumbering ?? deriveWeekNumbering(raw.code),
-			weekendDays: raw.weekendDays ?? deriveWeekendDays(raw.code)
-		};
-		if (raw.labels !== void 0) locale.labels = raw.labels;
-		return locale;
-	}
-	const code = raw;
-	return {
-		code,
-		weekStartsOn: deriveWeekStartsOn(code),
-		weekNumbering: deriveWeekNumbering(code),
-		weekendDays: deriveWeekendDays(code)
-	};
-}
-function tryGetWeekInfo(code) {
-	try {
-		if (typeof Intl !== "undefined" && typeof Intl.Locale === "function") {
-			const locale = new Intl.Locale(code);
-			const fn = locale.getWeekInfo;
-			if (typeof fn === "function") return fn.call(locale);
+		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`);
 		}
-	} catch {}
-}
-/**
-* Derives the first day of week (0=Sun, 1=Mon, 6=Sat) from a BCP 47 code.
-* Uses Intl.Locale.getWeekInfo() where available (Chromium, Safari 15.4+),
-* with a CLDR-based fallback table for Firefox and older runtimes.
-*/
-function deriveWeekStartsOn(code) {
-	const primary = code.split("-")[0]?.toLowerCase() ?? "en";
-	const region = code.split("-")[1]?.toUpperCase();
-	if (region !== void 0) {
-		const fromRegion = WEEK_START_REGION[region];
-		if (fromRegion !== void 0) return fromRegion;
-	}
-	const fromLang = WEEK_START_LANG[primary];
-	if (fromLang !== void 0) return fromLang;
-	const info = tryGetWeekInfo(code);
-	if (info !== void 0) {
-		const day = info.firstDay;
-		return day === 7 ? 0 : day;
 	}
-	return 1;
 }
+//#endregion
+//#region src/lib/locale.ts
 const WEEK_START_REGION = {
 	US: 0,
 	CA: 0,
@@ -289,24 +401,6 @@ const WEEK_START_LANG = {
 	ar: 6,
 	fa: 6
 };
-/**
-* Derives the week numbering scheme from a BCP 47 code.
-* Europe and ISO-aligned regions default to 'iso'; Americas and others to 'us'.
-*/
-function deriveWeekNumbering(code) {
-	const region = code.split("-")[1]?.toUpperCase();
-	if (region !== void 0) {
-		const fromRegion = WEEK_NUMBERING_REGION[region];
-		if (fromRegion !== void 0) return fromRegion;
-		if (region in WEEK_START_REGION) return "us";
-	}
-	const info = tryGetWeekInfo(code);
-	if (info !== void 0) {
-		if (info.minimalDays >= 4 && info.firstDay === 1) return "iso";
-		return "us";
-	}
-	return "iso";
-}
 const WEEK_NUMBERING_REGION = {
 	US: "us",
 	CA: "us",
@@ -330,28 +424,6 @@ const WEEK_NUMBERING_REGION = {
 	AU: "us",
 	NZ: "us"
 };
-/**
-* Derives weekend days (0=Sun … 6=Sat) from a BCP 47 code.
-* Uses Intl.Locale.getWeekInfo() where available, with a CLDR-based fallback table.
-*/
-function deriveWeekendDays(code) {
-	const region = code.split("-")[1]?.toUpperCase();
-	if (region !== void 0) {
-		const fromRegion = WEEKEND_REGION[region];
-		if (fromRegion !== void 0) {
-			const days = [...fromRegion];
-			days.sort((a, b) => a - b);
-			return days;
-		}
-	}
-	const info = tryGetWeekInfo(code);
-	if (info !== void 0) {
-		const days = info.weekend.map((d) => d === 7 ? 0 : d);
-		days.sort((a, b) => a - b);
-		return days;
-	}
-	return [0, 6];
-}
 const WEEKEND_REGION = {
 	AE: [5, 6],
 	AF: [4, 5],
@@ -385,19 +457,127 @@ const WEEKEND_REGION = {
 	SO: [5],
 	MY: [5, 0]
 };
+const EN_US_LABELS = {
+	ariaTask: "Task {0}",
+	ariaMilestone: "Milestone {0}",
+	addSubtaskTitle: "Add subtask",
+	columnTaskName: "Task name",
+	columnStartDate: "Start time",
+	columnDuration: "Duration",
+	columnQuarter: "Q"
+};
+const CHART_LOCALE_EN_US = {
+	code: "en-US",
+	labels: EN_US_LABELS,
+	weekStartsOn: 0,
+	weekNumbering: "iso",
+	weekendDays: [0, 6]
+};
+function tryGetWeekInfo(code) {
+	try {
+		if (typeof Intl !== "undefined" && typeof Intl.Locale === "function") {
+			const locale = new Intl.Locale(code);
+			const fn = locale.getWeekInfo;
+			if (typeof fn === "function") return fn.call(locale);
+		}
+	} catch {}
+}
 /**
-* Formats a week number according to the specified scheme.
+* Derives the first day of week (0=Sun, 1=Mon, 6=Sat) from a BCP 47 code.
+* Uses `Intl.Locale.getWeekInfo()` where available (Chromium, Safari 15.4+),
+* with a CLDR-based fallback table for Firefox and older runtimes.
 *
-* - `'iso'`: ISO 8601 (week 1 contains the first Thursday; Monday start).
-* - `'us'`: Week 1 contains January 1; Sunday start.
-* - `'simple'`: `Math.ceil(dayOfYear / 7)`.
+* @param code - A BCP 47 language tag (e.g. `'en-US'`, `'de-DE'`).
+* @returns The first day of the week: `0` (Sunday), `1` (Monday), or `6` (Saturday).
 */
-function formatWeekNumber(date, scheme) {
-	switch (scheme) {
-		case "iso": return isoWeek(date);
-		case "us": return usWeek(date);
-		case "simple": return simpleWeek(date);
+function deriveWeekStartsOn(code) {
+	const primary = code.split("-")[0]?.toLowerCase() ?? "en";
+	const region = code.split("-")[1]?.toUpperCase();
+	if (region !== void 0) {
+		const fromRegion = WEEK_START_REGION[region];
+		if (fromRegion !== void 0) return fromRegion;
+	}
+	const fromLang = WEEK_START_LANG[primary];
+	if (fromLang !== void 0) return fromLang;
+	const info = tryGetWeekInfo(code);
+	if (info !== void 0) {
+		const day = info.firstDay;
+		return day === 7 ? 0 : day;
+	}
+	return 1;
+}
+/**
+* Derives the week numbering scheme from a BCP 47 code.
+* Europe and ISO-aligned regions default to `'iso'`; Americas and others to `'us'`.
+*
+* @param code - A BCP 47 language tag (e.g. `'en-US'`, `'de-DE'`).
+* @returns The week numbering scheme: `'iso'`, `'us'`, or `'simple'`.
+*/
+function deriveWeekNumbering(code) {
+	const region = code.split("-")[1]?.toUpperCase();
+	if (region !== void 0) {
+		const fromRegion = WEEK_NUMBERING_REGION[region];
+		if (fromRegion !== void 0) return fromRegion;
+		if (region in WEEK_START_REGION) return "us";
+	}
+	const info = tryGetWeekInfo(code);
+	if (info !== void 0) {
+		if (info.minimalDays >= 4 && info.firstDay === 1) return "iso";
+		return "us";
+	}
+	return "iso";
+}
+/**
+* Derives weekend days (0=Sun … 6=Sat) from a BCP 47 code.
+* Uses `Intl.Locale.getWeekInfo()` where available, with a CLDR-based fallback table.
+*
+* @param code - A BCP 47 language tag (e.g. `'en-US'`, `'de-DE'`).
+* @returns An array of weekend day indices (sorted ascending).
+*/
+function deriveWeekendDays(code) {
+	const region = code.split("-")[1]?.toUpperCase();
+	if (region !== void 0) {
+		const fromRegion = WEEKEND_REGION[region];
+		if (fromRegion !== void 0) {
+			const days = [...fromRegion];
+			days.sort((a, b) => a - b);
+			return days;
+		}
+	}
+	const info = tryGetWeekInfo(code);
+	if (info !== void 0) {
+		const days = info.weekend.map((d) => d === 7 ? 0 : d);
+		days.sort((a, b) => a - b);
+		return days;
+	}
+	return [0, 6];
+}
+/**
+* Resolves a {@link ChartLocale} from either a full `ChartLocale` object or a BCP 47 string.
+* When given a string, derives `weekStartsOn`, `weekNumbering`, and `weekendDays` from CLDR conventions.
+*
+* @param raw - A {@link ChartLocale} object, a BCP 47 language tag string, or `undefined`.
+* @returns A fully resolved {@link ChartLocale} with defaults applied.
+*/
+function resolveChartLocale(raw) {
+	if (raw === void 0) return CHART_LOCALE_EN_US;
+	if (typeof raw !== "string") {
+		const locale = {
+			code: raw.code,
+			weekStartsOn: raw.weekStartsOn ?? deriveWeekStartsOn(raw.code),
+			weekNumbering: raw.weekNumbering ?? deriveWeekNumbering(raw.code),
+			weekendDays: raw.weekendDays ?? deriveWeekendDays(raw.code)
+		};
+		if (raw.labels !== void 0) locale.labels = raw.labels;
+		return locale;
 	}
+	const code = raw;
+	return {
+		code,
+		weekStartsOn: deriveWeekStartsOn(code),
+		weekNumbering: deriveWeekNumbering(code),
+		weekendDays: deriveWeekendDays(code)
+	};
 }
 function isoWeek(date) {
 	const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
@@ -422,33 +602,107 @@ function simpleWeek(date) {
 	return Math.ceil((dayOfYear + 1) / 7);
 }
 /**
+* Formats a week number according to the specified scheme.
+*
+* - `'iso'`: ISO 8601 (week 1 contains the first Thursday; Monday start).
+* - `'us'`: Week 1 contains January 1; Sunday start.
+* - `'simple'`: `Math.ceil(dayOfYear / 7)`.
+*
+* @param date - The date to compute the week number for.
+* @param scheme - The week numbering scheme: `'iso'`, `'us'`, or `'simple'`.
+* @returns The week number as a positive integer.
+*/
+function formatWeekNumber(date, scheme) {
+	switch (scheme) {
+		case "iso": return isoWeek(date);
+		case "us": return usWeek(date);
+		case "simple": return simpleWeek(date);
+	}
+}
+/**
 * Formats a label template by replacing `{0}` with the given argument.
+*
+* @param template - The template string containing `{0}` as placeholder.
+* @param arg - The value to substitute for `{0}`.
+* @returns The formatted string with the placeholder replaced.
 */
 function formatLabel(template, arg) {
 	return template.replaceAll("{0}", arg);
 }
 //#endregion
-//#region src/gantt-chart/domain/dateMath.ts
-/** Parses YYYY-MM-DD → UTC midnight Date. Throws on invalid input. */
+//#region src/lib/domain/dateMath.ts
+/**
+* Parses `YYYY-MM-DD` → UTC midnight `Date`.
+*
+* @param dateStr - An ISO-8601 date string in `YYYY-MM-DD` format.
+* @returns A `Date` representing UTC midnight of the given date.
+* @throws {Error} When `dateStr` does not represent a valid date.
+*/
 function parseDate(dateStr) {
 	const d = /* @__PURE__ */ new Date(`${dateStr}T00:00:00.000Z`);
 	if (isNaN(d.getTime())) throw new Error(`Invalid date: "${dateStr}"`);
 	return d;
 }
-/** Returns date + n days (exact ms arithmetic). */
+/**
+* Returns `date + n` days using exact millisecond arithmetic.
+*
+* @param date - The base date.
+* @param days - Number of days to add (may be negative).
+* @returns A new `Date` offset by the given number of days.
+*/
 function addDays(date, days) {
 	return new Date(date.getTime() + days * 864e5);
 }
-/** Difference in days (float). Positive when b > a. */
+/**
+* Returns `date + n` hours using exact millisecond arithmetic.
+*
+* @param date - The base date.
+* @param hours - Number of hours to add (may be negative).
+* @returns A new `Date` offset by the given number of hours.
+*/
+function addHours(date, hours) {
+	return new Date(date.getTime() + hours * 36e5);
+}
+/**
+* Difference in days (float). Positive when `b > a`.
+*
+* @param a - The earlier date.
+* @param b - The later date.
+* @returns The fractional number of days between the two dates.
+*/
 function diffDays(a, b) {
 	return (b.getTime() - a.getTime()) / 864e5;
 }
-/** UTC start-of-day. */
+/**
+* Difference in hours (float). Positive when `b > a`.
+*
+* @param a - The earlier date.
+* @param b - The later date.
+* @returns The fractional number of hours between the two dates.
+*/
+function diffHours(a, b) {
+	return (b.getTime() - a.getTime()) / 36e5;
+}
+/**
+* Returns the UTC start-of-day for the given date.
+*
+* @param date - Any `Date`.
+* @returns A new `Date` set to UTC midnight of the same calendar date.
+*/
 function startOfDay(date) {
 	return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
 }
+function resolveQuarterLabel(locale) {
+	if (locale.labels?.columnQuarter !== void 0) return locale.labels.columnQuarter;
+	return EN_US_LABELS.columnQuarter;
+}
 /**
-* Formats a Date for the time-header label given the active scale.
+* Formats a `Date` for the time-header label given the active scale.
+*
+* @param date - The date to format.
+* @param scale - The active {@link TimeScale} determining the label granularity.
+* @param locale - The {@link ChartLocale} used for formatting.
+* @returns A human-readable header label string.
 */
 function formatHeaderLabel(date, scale, locale) {
 	const { code, weekNumbering: weekNumScheme = "iso" } = locale;
@@ -473,7 +727,12 @@ function formatHeaderLabel(date, scale, locale) {
 }
 /**
 * Returns the upper-level (month/year) label for a given scale column.
-* Used in the top header row.
+* Used in the top header row of the timeline.
+*
+* @param date - The date to format.
+* @param scale - The active {@link TimeScale}. Determines how the upper label is computed.
+* @param locale - The {@link ChartLocale} used for formatting.
+* @returns A human-readable upper-level header label string.
 */
 function formatUpperLabel(date, scale, locale) {
 	const { code } = locale;
@@ -495,11 +754,13 @@ function formatUpperLabel(date, scale, locale) {
 		case "year": return `${date.getUTCFullYear()}`;
 	}
 }
-function resolveQuarterLabel(locale) {
-	if (locale.labels?.column_quarter !== void 0) return locale.labels.column_quarter;
-	return EN_US_LABELS.column_quarter;
-}
-/** Formats YYYY-MM-DD for display in the grid. */
+/**
+* Formats a `YYYY-MM-DD` string for display in the grid.
+*
+* @param dateStr - An ISO-8601 date string in `YYYY-MM-DD` format.
+* @param locale - The {@link ChartLocale} used for locale-aware formatting.
+* @returns A locale-formatted date string.
+*/
 function formatDisplayDate(dateStr, locale) {
 	return parseDate(dateStr).toLocaleDateString(locale.code, {
 		year: "numeric",
@@ -509,7 +770,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 = {
@@ -547,8 +808,12 @@ const SCALE_CONFIGS = {
 /**
 * Snaps a date to the column boundary for the provided scale.
 * All operations use UTC semantics.
-* The week boundary respects the optional weekStartsOn override (0=Sun, 1=Mon, 6=Sat).
-* Defaults to Monday (1) when omitted.
+* The week boundary respects the optional `weekStartsOn` override (0=Sun, 1=Mon, 6=Sat).
+*
+* @param date - The date to snap.
+* @param scale - The target {@link TimeScale}.
+* @param weekStartsOn - First day of the week (`0`-Sun, `1`-Mon, `6`-Sat). Defaults to `1` (Monday).
+* @returns A new `Date` snapped to the column boundary.
 */
 function snapToScaleBoundary(date, scale, weekStartsOn = 1) {
 	switch (scale) {
@@ -572,6 +837,10 @@ function snapToScaleBoundary(date, scale, weekStartsOn = 1) {
 /**
 * Returns the next column boundary from a boundary-aligned date.
 * Month/quarter/year use true calendar stepping (not fixed-day approximations).
+*
+* @param date - A boundary-aligned date.
+* @param scale - The target {@link TimeScale}.
+* @returns The next boundary date.
 */
 function nextScaleBoundary(date, scale) {
 	switch (scale) {
@@ -584,17 +853,21 @@ 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.
+*
+* @param scale - The active {@link TimeScale}.
+* @param viewportStart - The leftmost date visible in the viewport.
+* @returns A {@link PixelMapper} configured for the given viewport.
 */
 function createPixelMapper(scale, viewportStart) {
 	const { columnWidth, msPerColumn } = SCALE_CONFIGS[scale];
 	const originMs = viewportStart.getTime();
 	const pxPerMs = columnWidth / msPerColumn;
 	const msPerPx = msPerColumn / columnWidth;
-	const msPerDay = 864e5;
+	const msPerHour = 36e5;
 	return {
 		originMs,
 		columnWidth,
@@ -604,16 +877,16 @@ function createPixelMapper(scale, viewportStart) {
 		toDate(x) {
 			return new Date(originMs + x * msPerPx);
 		},
-		durationToWidth(days) {
-			return days * msPerDay * pxPerMs;
+		durationToWidth(hours) {
+			return hours * msPerHour * pxPerMs;
 		},
 		widthToDuration(px) {
-			return px * msPerPx / msPerDay;
+			return px * msPerPx / msPerHour;
 		}
 	};
 }
 //#endregion
-//#region src/gantt-chart/timeline/layoutEngine.ts
+//#region src/lib/timeline/layoutEngine.ts
 const DENSITY = {
 	rowHeight: 44,
 	barHeight: 28,
@@ -628,18 +901,21 @@ const MILESTONE_HALF = MILESTONE_SIZE / 2;
 /**
 * Computes pixel-space layout for all visible task rows.
 * Returns a map keyed by task id for O(1) lookup during link routing.
+*
+* @param rows - The flattened, visible {@link TaskNode} rows.
+* @param mapper - The {@link PixelMapper} for coordinate conversion.
+* @returns A `Map` from task ID to its computed {@link BarLayout}.
 */
 function computeLayout(rows, mapper) {
 	const result = /* @__PURE__ */ new Map();
 	for (let i = 0; i < rows.length; i++) {
 		const task = rows[i];
 		if (task === void 0) continue;
-		const start = parseDate(task.start_date);
+		const start = parseDate(task.startDate);
 		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,
@@ -647,15 +923,15 @@ function computeLayout(rows, mapper) {
 				width: 0,
 				height: BAR_HEIGHT,
 				progressWidth: 0,
-				type: "milestone",
+				kind: "milestone",
 				rowIndex: i,
 				centerX: x,
 				centerY
 			});
 			continue;
 		}
-		const width = Math.max(mapper.durationToWidth(task.duration), 4);
-		const progressWidth = width * Math.min(1, Math.max(0, task.progress ?? 0));
+		const width = Math.max(mapper.durationToWidth(task.durationHours), 4);
+		const progressWidth = width * Math.min(1, Math.max(0, (task.percentComplete ?? 0) / 100));
 		result.set(task.id, {
 			taskId: task.id,
 			x,
@@ -663,7 +939,7 @@ function computeLayout(rows, mapper) {
 			width,
 			height: BAR_HEIGHT,
 			progressWidth,
-			type,
+			kind: task.kind,
 			rowIndex: i,
 			centerX: x + width / 2,
 			centerY
@@ -673,36 +949,334 @@ function computeLayout(rows, mapper) {
 }
 /**
 * Computes the total pixel height of all rows.
+*
+* @param rowCount - The number of visible rows.
+* @returns The total pixel height (`rowCount * ROW_HEIGHT`).
 */
 function totalContentHeight(rowCount) {
 	return rowCount * ROW_HEIGHT;
 }
 /**
 * Derives viewport bounds from task data with padding.
-* Returns [start, end] as UTC midnight dates.
+*
+* @param tasks - The task nodes to derive bounds from.
+* @param paddingHours - Extra hours added before the earliest start and after the latest end. Defaults to `48`.
+* @returns A tuple `[start, end]` of UTC midnight `Date` instances.
 */
-function deriveViewport(tasks, paddingDays = 2) {
+function deriveViewport(tasks, paddingHours = 48) {
 	if (tasks.length === 0) {
 		const now = /* @__PURE__ */ new Date();
-		return [now, addDays(now, 30)];
+		return [now, addHours(now, 720)];
 	}
 	let minMs = Infinity;
 	let maxMs = -Infinity;
 	for (const task of tasks) {
-		const start = parseDate(task.start_date);
-		const end = addDays(start, task.duration);
+		const start = parseDate(task.startDate);
 		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/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";
+}
+/**
+* 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          |
+*
+* 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 Anchor x coordinates `{sx, tx}`.
+* @throws {Error} if the link type is not handled (exhaustiveness guard).
+*/
+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": 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
+		}];
 	}
-	return [addDays(new Date(minMs), -paddingDays), addDays(new Date(maxMs), paddingDays)];
+	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: crossX,
+			y: sy
+		},
+		{
+			x: crossX,
+			y: midY
+		},
+		{
+			x: approachX,
+			y: midY
+		},
+		{
+			x: approachX,
+			y: ty
+		},
+		{
+			x: tx,
+			y: ty
+		}
+	];
+}
+/**
+* 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));
 }
-//#endregion
-//#region src/gantt-chart/rendering/linkRouter.ts
-const TURN_MARGIN = 12;
 /**
 * 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 layouts - A map from task ID to its computed {@link BarLayout}.
+* @returns An array of {@link RoutedLink} objects with computed vertex paths.
 */
 function routeLinks(links, layouts) {
 	return links.map((link) => {
@@ -713,99 +1287,22 @@ 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/lib/vanilla/dom/helpers.ts
 /**
-* Produces the vertex list for an orthogonal connector between src and tgt.
+* Batches style assignments; avoids repeated style recalculations.
 *
-* Link semantics:
-*   FS = source.finish → target.start  (most common)
-*   SS = source.start  → target.start
-*   FF = source.finish → target.finish
-*   SF = source.start  → target.finish
+* @param elem - The target element.
+* @param styles - A partial CSS style declaration to apply.
 */
-function route(type, src, tgt) {
-	let sx, tx;
-	const sy = src.centerY;
-	const ty = tgt.centerY;
-	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
-			}
-		];
-	}
-	const loopX = tx - TURN_MARGIN;
-	return [
-		{
-			x: sx,
-			y: sy
-		},
-		{
-			x: sx + TURN_MARGIN,
-			y: sy
-		},
-		{
-			x: sx + TURN_MARGIN,
-			y: (sy + ty) / 2
-		},
-		{
-			x: loopX,
-			y: (sy + ty) / 2
-		},
-		{
-			x: loopX,
-			y: ty
-		},
-		{
-			x: tx,
-			y: ty
-		}
-	];
+function css(elem, styles) {
+	for (const [k, v] of Object.entries(styles)) elem.style[k] = v ?? "";
 }
-//#endregion
-//#region src/gantt-chart/vanilla/dom/helpers.ts
 function el(tag, props, ns) {
 	const elem = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
 	if (props !== void 0) for (const [k, v] of Object.entries(props)) if (k === "style" && typeof v === "object" && v !== null) css(elem, v);
@@ -813,32 +1310,61 @@ function el(tag, props, ns) {
 	else elem.setAttribute(k, String(v));
 	return elem;
 }
-/** Batches style assignments; avoids repeated style recalculations. */
-function css(elem, styles) {
-	for (const [k, v] of Object.entries(styles)) elem.style[k] = v ?? "";
-}
-/** Removes all child nodes from elem. Faster than innerHTML = '' for large subtrees. */
+/**
+* Removes all child nodes from elem. Faster than `innerHTML = ''` for large subtrees.
+*
+* @param elem - The element to clear.
+*/
 function clearChildren(elem) {
 	while (elem.firstChild !== null) elem.removeChild(elem.firstChild);
 }
-/** Appends all nodes from an array/fragment into parent in one pass. */
+/**
+* Appends all nodes from an array/fragment into parent in one pass.
+*
+* @param parent - The parent element.
+* @param children - The child elements or text nodes to append.
+*/
 function appendAll(parent, children) {
 	const frag = document.createDocumentFragment();
 	for (const c of children) frag.appendChild(c);
 	parent.append(frag);
 }
-/** Sets multiple SVG attributes in one call. */
+/**
+* Sets multiple SVG attributes in one call.
+*
+* @param elem - The target SVG element.
+* @param attrs - Attributes to set (values are stringified).
+*/
 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);
+	if (specialDay !== void 0) return specialDay.kind;
+	if (showWeekends && weekendDays.has(date.getUTCDay())) return "weekend";
+	return null;
+}
+/**
+* Inline style helper local to this module.
+*
+* @param elem - The target element.
+* @param styles - A partial CSS style declaration to apply.
+*/
+function css_(elem, styles) {
+	for (const [k, v] of Object.entries(styles)) elem.style[k] = v ?? "";
+}
 /**
 * Fully replaces the content of `container` with two header rows.
 * Called on scale change or viewport change only — not on scroll.
+*
+* @param container - The header container element to render into.
+* @param state - The current chart state.
 */
 function renderTimeHeader(container, state) {
-	const { scale, viewportStart, viewportEnd, mapper, totalWidth, locale } = state;
+	const { scale, viewportStart, viewportEnd, mapper, totalWidth, locale, showWeekends, weekendDays, specialDaysByDate } = state;
 	const weekStartsOn = locale.weekStartsOn ?? 1;
 	const upperCells = [];
 	const lowerCells = [];
@@ -853,7 +1379,8 @@ function renderTimeHeader(container, state) {
 		lowerCells.push({
 			label: formatHeaderLabel(cur, scale, locale),
 			x,
-			width: w
+			width: w,
+			date: new Date(cur)
 		});
 		const uLabel = formatUpperLabel(cur, scale, locale);
 		if (uLabel !== prevUpperLabel) {
@@ -928,6 +1455,19 @@ function renderTimeHeader(container, state) {
 			whiteSpace: "nowrap"
 		});
 		d.textContent = cell.label;
+		if (scale === "day") {
+			const kind = specialDayKind(cell.date, specialDaysByDate, showWeekends, weekendDays);
+			if (kind !== null) {
+				d.classList.add(`gantt-header-cell--${kind}`);
+				const dateKey = startOfDay(cell.date).toISOString().slice(0, 10);
+				d.dataset["date"] = dateKey;
+				const specialDay = specialDaysByDate.get(dateKey);
+				if (specialDay?.label !== void 0) {
+					d.dataset["label"] = specialDay.label;
+					d.title = specialDay.label;
+				}
+			}
+		}
 		return d;
 	});
 	appendAll(upperRow, upperNodes);
@@ -936,12 +1476,8 @@ function renderTimeHeader(container, state) {
 	container.append(upperRow);
 	container.append(lowerRow);
 }
-/** Inline style helper local to this module. */
-function css_(elem, styles) {
-	for (const [k, v] of Object.entries(styles)) elem.style[k] = v ?? "";
-}
 //#endregion
-//#region src/gantt-chart/vanilla/dom/gridColumns.ts
+//#region src/lib/vanilla/dom/gridColumns.ts
 const DEFAULT_GRID_COLUMNS = [
 	{
 		id: "name",
@@ -949,17 +1485,17 @@ const DEFAULT_GRID_COLUMNS = [
 		width: "1fr"
 	},
 	{
-		id: "start_date",
+		id: "startDate",
 		header: "Start time",
 		width: "90px",
-		field: "start_date",
+		field: "startDate",
 		format: (value, _task, _row, locale) => formatDisplayDate(String(value), locale)
 	},
 	{
-		id: "duration",
+		id: "durationHours",
 		header: "Duration",
 		width: "68px",
-		field: "duration",
+		field: "durationHours",
 		format: (value) => value > 0 ? String(value) : "—"
 	},
 	{
@@ -970,27 +1506,30 @@ const DEFAULT_GRID_COLUMNS = [
 ];
 /**
 * Returns a localized default grid column schema.
-* Column headers use locale label overrides with EN_US_LABELS fallback.
+* Column headers use locale label overrides with `EN_US_LABELS` fallback.
+*
+* @param locale - The {@link ChartLocale} to derive column header labels from.
+* @returns An array of {@link GridColumn} objects.
 */
 function gridColumnDefaults(locale) {
 	return [
 		{
 			id: "name",
-			header: locale.labels?.column_task_name ?? EN_US_LABELS.column_task_name,
+			header: locale.labels?.columnTaskName ?? EN_US_LABELS.columnTaskName,
 			width: "1fr"
 		},
 		{
-			id: "start_date",
-			header: locale.labels?.column_start_time ?? EN_US_LABELS.column_start_time,
+			id: "startDate",
+			header: locale.labels?.columnStartDate ?? EN_US_LABELS.columnStartDate,
 			width: "90px",
-			field: "start_date",
+			field: "startDate",
 			format: (value, _task, _row, loc) => formatDisplayDate(String(value), loc)
 		},
 		{
-			id: "duration",
-			header: locale.labels?.column_duration ?? EN_US_LABELS.column_duration,
+			id: "durationHours",
+			header: locale.labels?.columnDuration ?? EN_US_LABELS.columnDuration,
 			width: "68px",
-			field: "duration",
+			field: "durationHours",
 			format: (value) => value > 0 ? String(value) : "—"
 		},
 		{
@@ -1000,15 +1539,27 @@ function gridColumnDefaults(locale) {
 		}
 	];
 }
+/**
+* Builds a CSS `grid-template-columns` value from a column schema.
+*
+* @param columns - The full column schema array (only visible columns are included).
+* @returns A space-separated CSS track list.
+*/
 function gridTemplateColumns(columns) {
 	return columns.filter((c) => c.visible !== false).map((c) => c.width).join(" ");
 }
+/**
+* Filters a column schema to only visible columns.
+*
+* @param columns - The full column schema array.
+* @returns A new array containing only columns where `visible` is not `false`.
+*/
 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);
@@ -1017,73 +1568,57 @@ function parseColumnMinWidth(width) {
 	if (frMatch) return parseFloat(frMatch[1] ?? "0") * 120;
 	return 0;
 }
+/**
+* Computes the minimum natural pixel width of a grid column schema.
+*
+* @param columns - The full column schema array.
+* @returns The sum of minimum widths: `px` columns sum directly, `fr` units contribute
+*          `GRID_COLUMN_FR_MIN_WIDTH` px each.
+*/
 function gridNaturalWidth(columns) {
 	let total = 0;
 	for (const col of visibleColumns(columns)) total += parseColumnMinWidth(col.width);
 	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;
-/** Renders the left grid pane. */
-function renderLeftPane(container, state, cbs, columns) {
-	const { allRows, selectedId, expandedIds, startIndex, endIndex, paddingTop, paddingBottom, locale } = state;
-	const frag = document.createDocumentFragment();
-	if (paddingTop > 0) {
-		const spacer = el("div");
-		spacer.style.height = `${paddingTop}px`;
-		frag.append(spacer);
-	}
-	for (const row of allRows.slice(startIndex, endIndex + 1)) frag.append(buildRow(row, selectedId, expandedIds, cbs, columns, locale));
-	if (paddingBottom > 0) {
-		const spacer = el("div");
-		spacer.style.height = `${paddingBottom}px`;
-		frag.append(spacer);
+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"
+		};
 	}
-	clearChildren(container);
-	container.append(frag);
-}
-function buildRow(row, selectedId, expandedIds, cbs, columns, locale) {
-	const selected = row.id === selectedId;
-	const wrapper = el("div");
-	wrapper.className = "gantt-row";
-	css(wrapper, {
-		display: "grid",
-		gridTemplateColumns: gridTemplateColumns(columns),
-		height: `${ROW_HEIGHT}px`,
-		alignItems: "center",
-		paddingLeft: "8px",
-		background: selected ? "var(--gantt-row-selected)" : "var(--gantt-bg)",
-		borderBottom: "1px solid var(--gantt-border)",
-		cursor: "default",
-		boxSizing: "border-box"
-	});
-	wrapper.tabIndex = 0;
-	wrapper.setAttribute("role", "row");
-	wrapper.setAttribute("aria-selected", String(selected));
-	wrapper.dataset["taskId"] = String(row.id);
-	wrapper.addEventListener("click", () => {
-		const task = toTask$1(row);
-		cbs.onRowClick({
-			id: row.id,
-			task
-		});
-	});
-	wrapper.addEventListener("keydown", (event) => {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			cbs.onSelect(row.id);
-		}
-	});
-	for (const column of visibleColumns(columns)) wrapper.append(buildCell(column, row, expandedIds, cbs, locale));
-	return wrapper;
 }
-function buildCell(column, row, expandedIds, cbs, locale) {
-	switch (column.id) {
-		case "name": return buildTreeNameCell(row, expandedIds, cbs);
-		case "actions": return buildAddButton(row, cbs, locale);
-		default: return buildDataCell(row, column, locale);
+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) {
@@ -1128,7 +1663,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",
@@ -1152,9 +1687,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;
 }
@@ -1162,7 +1697,7 @@ function buildAddButton(row, cbs, locale) {
 	const btn = el("button");
 	btn.className = "gantt-add-btn";
 	btn.textContent = "+";
-	btn.title = locale.labels?.add_subtask_title ?? EN_US_LABELS.add_subtask_title;
+	btn.title = locale.labels?.addSubtaskTitle ?? EN_US_LABELS.addSubtaskTitle;
 	css(btn, {
 		background: "none",
 		border: "none",
@@ -1173,24 +1708,83 @@ function buildAddButton(row, cbs, locale) {
 	});
 	btn.addEventListener("click", (event) => {
 		event.stopPropagation();
-		cbs.onAdd(row.id);
+		cbs.onTaskAdd(row.id);
 	});
 	return btn;
 }
-function toTask$1(row) {
-	return {
-		id: row.id,
-		text: row.text,
-		start_date: row.start_date,
-		duration: row.duration,
-		progress: row.progress,
-		type: row.type,
-		open: row.open,
-		...row.parent === void 0 ? {} : { parent: row.parent },
-		...row.color === void 0 ? {} : { color: row.color }
-	};
+function buildCell(column, row, expandedIds, cbs, locale) {
+	switch (column.id) {
+		case "name": return buildTreeNameCell(row, expandedIds, cbs);
+		case "actions": return buildAddButton(row, cbs, locale);
+		default: return buildDataCell(row, column, locale);
+	}
+}
+function buildRow(row, selectedId, expandedIds, cbs, columns, locale) {
+	const selected = row.id === selectedId;
+	const wrapper = el("div");
+	wrapper.className = "gantt-row";
+	css(wrapper, {
+		display: "grid",
+		gridTemplateColumns: gridTemplateColumns(columns),
+		height: `${ROW_HEIGHT}px`,
+		alignItems: "center",
+		paddingLeft: "8px",
+		background: selected ? "var(--gantt-row-selected)" : "var(--gantt-bg)",
+		borderBottom: "1px solid var(--gantt-border)",
+		cursor: "default",
+		boxSizing: "border-box"
+	});
+	wrapper.tabIndex = 0;
+	wrapper.setAttribute("role", "row");
+	wrapper.setAttribute("aria-selected", String(selected));
+	wrapper.dataset["taskId"] = String(row.id);
+	wrapper.addEventListener("click", () => {
+		const task = toTask$1(row);
+		cbs.onRowClick({
+			id: row.id,
+			task
+		});
+	});
+	wrapper.addEventListener("keydown", (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			cbs.onTaskSelect(row.id);
+		}
+	});
+	for (const column of visibleColumns(columns)) wrapper.append(buildCell(column, row, expandedIds, cbs, locale));
+	return wrapper;
+}
+/**
+* Renders the left grid pane.
+*
+* @param container - The left pane body element to render into.
+* @param state - The current chart state.
+* @param cbs - The left pane callbacks.
+* @param columns - The grid column schema.
+*/
+function renderLeftPane(container, state, cbs, columns) {
+	const { allRows, selectedId, expandedIds, startIndex, endIndex, paddingTop, paddingBottom, locale } = state;
+	const frag = document.createDocumentFragment();
+	if (paddingTop > 0) {
+		const spacer = el("div");
+		spacer.style.height = `${paddingTop}px`;
+		frag.append(spacer);
+	}
+	for (const row of allRows.slice(startIndex, endIndex + 1)) frag.append(buildRow(row, selectedId, expandedIds, cbs, columns, locale));
+	if (paddingBottom > 0) {
+		const spacer = el("div");
+		spacer.style.height = `${paddingBottom}px`;
+		frag.append(spacer);
+	}
+	clearChildren(container);
+	container.append(frag);
 }
-/** Builds the header row for the left pane. */
+/**
+* Builds the header row for the left pane.
+*
+* @param columns - The grid column schema.
+* @returns The header DOM element.
+*/
 function buildLeftPaneHeader(columns) {
 	const header = el("div");
 	css(header, {
@@ -1246,8 +1840,13 @@ function buildLeftPaneHeader(columns) {
 }
 /**
 * Wires up column resize interactions on header handles.
-* Must be called after the header is in the DOM (so getBoundingClientRect works).
-* Returns a cleanup function.
+* Must be called after the header is in the DOM (so `getBoundingClientRect` works).
+*
+* @param headerEl - The header element containing resize handles.
+* @param bodyEl - The body element whose rows share the column widths.
+* @param columns - The grid column schema (mutated in place on resize end).
+* @param onChange - Optional callback fired on drag end with updated columns.
+* @returns A cleanup function that removes all resize listeners.
 */
 function setupColumnResize(headerEl, bodyEl, columns, onChange) {
 	const handles = headerEl.querySelectorAll(".gantt-col-resize-handle");
@@ -1300,19 +1899,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.
+*
+* 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",
@@ -1327,7 +1929,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,
@@ -1335,7 +1937,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);
@@ -1357,21 +1959,28 @@ function createDependencyLayer(totalWidth, totalHeight) {
 }
 /**
 * Shows or updates the ghost line drawn during a link-creation drag.
-* Pass valid=true when the pointer is over a valid target bar.
+*
+* @param svg - The SVG dependency layer element.
+* @param x1 - Start X coordinate.
+* @param y1 - Start Y coordinate.
+* @param x2 - End X coordinate.
+* @param y2 - End Y coordinate.
+* @param valid - When `true`, the line is drawn solid with an arrow marker.
 */
 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 = "";
 }
 /**
 * Hides the ghost line after a link-creation drag completes or is cancelled.
+*
+* @param svg - The SVG dependency layer element.
 */
 function hideGhostLine(svg) {
 	const ghost = svg.querySelector("path.gantt-ghost-line");
@@ -1383,26 +1992,28 @@ function hideGhostLine(svg) {
 /**
 * Replaces all path elements in the SVG to reflect the current link set.
 * The `<defs>` node (first child) is preserved.
+*
+* @param svg - The SVG dependency layer element.
+* @param links - The array of routed links to render.
+* @param totalWidth - The total pixel width of the SVG viewport.
+* @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, {
@@ -1411,19 +2022,74 @@ 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
+			});
+		});
+		path.addEventListener("dblclick", (_event) => {
+			cbs?.onLinkDblClick?.({
+				id: link.linkId,
+				source: link.sourceTaskId,
+				target: link.targetTaskId,
+				type: link.type
+			});
 		});
-		svg.append(path);
+		if (ghost !== null) svg.insertBefore(path, ghost);
+		else svg.append(path);
 	}
 }
 //#endregion
-//#region src/gantt-chart/vanilla/interaction/drag.ts
+//#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.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.
-* Returns a cleanup function that removes all listeners.
 *
 * Design: all mutable state lives in closure variables captured at mousedown.
 * No global state; multiple bars can be dragged independently (one at a time).
+*
+* @param barEl - The bar DOM element.
+* @param resizeHandleEl - The resize handle DOM element.
+* @param task - The {@link TaskNode} for this bar.
+* @param getMapper - A function returning the current {@link PixelMapper} (snapshotted at mousedown).
+* @param cbs - The chart callbacks.
+* @returns A cleanup function that removes all listeners.
 */
 function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 	function onBarDown(e) {
@@ -1432,22 +2098,27 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 		try {
 			barEl.setPointerCapture(e.pointerId);
 		} catch {}
-		cbs.onSelect?.(task.id);
+		cbs.onTaskSelect?.(task.id);
 		const startX = e.clientX;
-		const originDate = parseDate(task.start_date);
+		const originDate = parseDate(task.startDate);
 		const mapper = getMapper();
+		let lastHours = 0;
 		function onMove(me) {
 			const dx = me.clientX - startX;
-			const days = Math.round(mapper.widthToDuration(dx));
-			cbs.onMove?.({
+			lastHours = Math.round(mapper.widthToDuration(dx));
+			cbs.onTaskMove?.({
 				id: task.id,
-				startDate: addDays(originDate, days)
+				startDate: addHours(originDate, lastHours)
 			});
 		}
 		function onUp() {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onUp);
 			barEl.style.cursor = "grab";
+			cbs._onTaskMoveFinal?.({
+				id: task.id,
+				startDate: addHours(originDate, lastHours)
+			});
 		}
 		barEl.style.cursor = "grabbing";
 		window.addEventListener("pointermove", onMove);
@@ -1461,29 +2132,33 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 			resizeHandleEl.setPointerCapture(e.pointerId);
 		} catch {}
 		const startX = e.clientX;
-		const origDur = task.duration;
+		const origDur = task.kind !== "milestone" ? task.durationHours : 0;
 		const mapper = getMapper();
+		let lastDuration = origDur;
 		function onMove(me) {
 			const dx = me.clientX - startX;
-			const daysDelta = Math.round(mapper.widthToDuration(dx));
-			cbs.onResize?.({
+			const hoursDelta = Math.round(mapper.widthToDuration(dx));
+			lastDuration = Math.max(1, origDur + hoursDelta);
+			cbs.onTaskResize?.({
 				id: task.id,
-				duration: Math.max(1, origDur + daysDelta)
+				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: "double_click",
 			task: toTask(task)
 		});
 	}
@@ -1497,21 +2172,73 @@ 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.onTaskSelect?.(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.
-* Returns cleanup.
+*
+* @param diamondEl - The milestone diamond DOM element.
+* @param taskId - The task ID to select.
+* @param cbs - The chart callbacks.
+* @returns A cleanup function that removes all listeners.
 */
 function attachMilestoneClick(diamondEl, taskId, cbs) {
 	function onClick() {
-		cbs.onSelect?.(taskId);
+		cbs.onTaskSelect?.(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: "double_click",
 				task
 			});
 		}
@@ -1526,24 +2253,19 @@ function attachMilestoneClick(diamondEl, taskId, cbs) {
 function bindMilestoneTask(diamondEl, task) {
 	diamondEl.__task = task;
 }
-function toTask(row) {
-	return {
-		id: row.id,
-		text: row.text,
-		start_date: row.start_date,
-		duration: row.duration,
-		progress: row.progress,
-		type: row.type,
-		open: row.open,
-		...row.parent === void 0 ? {} : { parent: row.parent },
-		...row.color === void 0 ? {} : { color: row.color }
-	};
-}
 //#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.
-* Returns a cleanup function that removes all listeners.
+*
+* @param handle - The endpoint DOM element.
+* @param sourceTaskId - The task ID from which the link originates.
+* @param anchorX - The X anchor coordinate (task center).
+* @param anchorY - The Y anchor coordinate (task center).
+* @param svgLayer - The SVG dependency layer element for ghost line rendering.
+* @param absoluteLayer - The absolute-positioned layer for coordinate calculations.
+* @param cbs - The chart callbacks.
+* @returns A cleanup function that removes all listeners.
 */
 function attachLinkEndpointHandle(handle, sourceTaskId, anchorX, anchorY, svgLayer, absoluteLayer, cbs) {
 	function onPointerDown(e) {
@@ -1592,6 +2314,8 @@ function attachLinkEndpointHandle(handle, sourceTaskId, anchorX, anchorY, svgLay
 /**
 * Creates an endpoint handle DOM element.
 * The caller must position it with inline styles and append it to the layer.
+*
+* @returns A new `HTMLElement` with the `gantt-link-endpoint` class.
 */
 function createEndpointHandle() {
 	const handle = document.createElement("div");
@@ -1612,13 +2336,17 @@ 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)",
 	milestone: "var(--gantt-milestone)"
 };
-/** Creates the skeleton DOM structure for the right pane. Call once. */
+/**
+* Creates the skeleton DOM structure for the right pane. Call once.
+*
+* @returns A new {@link RightPaneRefs} with empty containers and bar registry.
+*/
 function createRightPaneRefs() {
 	const scrollContainer = el("div");
 	const stripeContainer = el("div");
@@ -1627,7 +2355,7 @@ function createRightPaneRefs() {
 	css(stripeContainer, { position: "relative" });
 	css(absoluteLayer, {
 		position: "absolute",
-		top: "0",
+		top: "52px",
 		left: "0"
 	});
 	scrollContainer.append(stripeContainer);
@@ -1641,94 +2369,8 @@ function createRightPaneRefs() {
 		barRegistry: /* @__PURE__ */ new Map()
 	};
 }
-/**
-* Full render of the right pane.
-* Grid lines and stripes are rebuilt each call (cheap — no event listeners).
-* Bars are rebuilt each call with fresh drag listeners (old ones cleaned up first).
-*/
-function renderRightPane(refs, state, cbs) {
-	const { allRows, layouts, links, mapper, scale, viewportStart, viewportEnd, totalWidth, selectedId, highlightLinkedDependenciesOnSelect, paddingTop, paddingBottom, startIndex } = state;
-	const { stripeContainer, absoluteLayer, svgLayer, barRegistry } = refs;
-	const rowCount = allRows.length;
-	const contentHeight = totalContentHeight(rowCount);
-	const visibleRows = allRows.slice(state.startIndex, state.endIndex + 1);
-	clearChildren(stripeContainer);
-	css(stripeContainer, { width: `${totalWidth}px` });
-	if (paddingTop > 0) {
-		const s = el("div");
-		s.style.height = `${paddingTop}px`;
-		stripeContainer.append(s);
-	}
-	for (let i = 0; i < visibleRows.length; i++) {
-		const rowIdx = startIndex + i;
-		const stripe = el("div");
-		css(stripe, {
-			height: `${ROW_HEIGHT}px`,
-			background: rowIdx % 2 === 0 ? "var(--gantt-bg)" : "var(--gantt-stripe)",
-			borderBottom: "1px solid var(--gantt-border)"
-		});
-		stripeContainer.append(stripe);
-	}
-	if (paddingBottom > 0) {
-		const s = el("div");
-		s.style.height = `${paddingBottom}px`;
-		stripeContainer.append(s);
-	}
-	css(absoluteLayer, {
-		width: `${totalWidth}px`,
-		height: `${contentHeight}px`
-	});
-	const toRemove = [];
-	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();
-		cleanupLinkHandles?.();
-	}
-	barRegistry.clear();
-	if (scale === "day") renderSpecialDayBackgrounds(absoluteLayer, svgLayer, state, contentHeight);
-	let gridCur = snapToScaleBoundary(viewportStart, scale);
-	while (gridCur <= viewportEnd) {
-		const x = mapper.toX(gridCur);
-		const line = el("div");
-		css(line, {
-			position: "absolute",
-			left: `${x}px`,
-			top: "0",
-			width: "1px",
-			height: `${contentHeight}px`,
-			background: "var(--gantt-grid-line)",
-			pointerEvents: "none"
-		});
-		absoluteLayer.insertBefore(line, svgLayer);
-		gridCur = nextScaleBoundary(gridCur, scale);
-	}
-	const todayX = mapper.toX(/* @__PURE__ */ new Date());
-	const todayLineWidth = 2;
-	if (todayX >= 0 && todayX <= totalWidth - todayLineWidth) {
-		const todayLine = el("div");
-		todayLine.className = "gantt-today-marker";
-		css(todayLine, {
-			position: "absolute",
-			left: `${todayX}px`,
-			top: "0",
-			width: `${todayLineWidth}px`,
-			height: `${contentHeight}px`,
-			background: "var(--gantt-today)",
-			pointerEvents: "none",
-			zIndex: "5"
-		});
-		absoluteLayer.insertBefore(todayLine, svgLayer);
-	}
-	const visibleTaskIds = new Set(visibleRows.map((task) => task.id));
-	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);
-	}
-	updateDependencyLayer(svgLayer, links.filter((link) => visibleTaskIds.has(link.sourceTaskId) && visibleTaskIds.has(link.targetTaskId)), totalWidth, contentHeight, selectedId, highlightLinkedDependenciesOnSelect);
+function ariaLabel(locale, key, arg) {
+	return formatLabel(locale.labels?.[key] ?? EN_US_LABELS[key], arg);
 }
 function renderSpecialDayBackgrounds(layer, beforeNode, state, contentHeight) {
 	const { mapper, viewportStart, viewportEnd, showWeekends, weekendDays, specialDaysByDate } = state;
@@ -1770,7 +2412,7 @@ function renderSpecialDayBackgrounds(layer, beforeNode, state, contentHeight) {
 }
 function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, cbs) {
 	const selected = task.id === selectedId;
-	const color = BAR_COLOR[layout.type] ?? BAR_COLOR["task"];
+	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, {
@@ -1780,15 +2422,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",
+		borderRadius: layout.kind === "project" ? "3px" : "4px",
 		cursor: "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",
@@ -1796,8 +2440,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");
@@ -1820,16 +2471,16 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 	bar.append(label);
 	bar.tabIndex = 0;
 	bar.setAttribute("role", "button");
-	bar.setAttribute("aria-label", ariaLabel(state.locale, "aria_task", task.text));
+	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);
+		cbs.onTaskSelect?.(task.id);
 	});
 	bar.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onSelect?.(task.id);
+			cbs.onTaskSelect?.(task.id);
 		}
 	});
 	const handle = el("div");
@@ -1887,6 +2538,7 @@ function renderBar(layer, svgLayer, task, layout, selectedId, registry, state, c
 		cleanupDrag
 	};
 	if (cleanupLinkHandles !== void 0) entry.cleanupLinkHandles = cleanupLinkHandles;
+	if (cleanupProgressDrag !== void 0) entry.cleanupProgressDrag = cleanupProgressDrag;
 	registry.set(task.id, entry);
 }
 function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cbs, state) {
@@ -1907,13 +2559,13 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 	});
 	diamond.tabIndex = 0;
 	diamond.setAttribute("role", "button");
-	diamond.setAttribute("aria-label", ariaLabel(state.locale, "aria_milestone", task.text));
+	diamond.setAttribute("aria-label", ariaLabel(state.locale, "ariaMilestone", task.text));
 	diamond.setAttribute("aria-pressed", String(selected));
 	diamond.dataset["taskId"] = String(task.id);
 	diamond.addEventListener("keydown", (event) => {
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
-			cbs.onSelect?.(task.id);
+			cbs.onTaskSelect?.(task.id);
 		}
 	});
 	const labelEl = el("span");
@@ -1967,11 +2619,102 @@ function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cb
 	if (cleanupLinkHandles !== void 0) entry.cleanupLinkHandles = cleanupLinkHandles;
 	registry.set(task.id, entry);
 }
-function ariaLabel(locale, key, arg) {
-	return formatLabel(locale.labels?.[key] ?? EN_US_LABELS[key], arg);
+/**
+* Full render of the right pane.
+* Grid lines and stripes are rebuilt each call (cheap — no event listeners).
+* Bars are rebuilt each call with fresh drag listeners (old ones cleaned up first).
+*
+* @param refs - The right pane DOM references.
+* @param state - The current chart state.
+* @param cbs - The chart callbacks.
+*/
+function renderRightPane(refs, state, cbs) {
+	const { allRows, layouts, links, mapper, scale, viewportStart, viewportEnd, totalWidth, selectedId, highlightLinkedDependenciesOnSelect, paddingTop, paddingBottom, startIndex } = state;
+	const { stripeContainer, absoluteLayer, svgLayer, barRegistry } = refs;
+	const rowCount = allRows.length;
+	const contentHeight = totalContentHeight(rowCount);
+	const visibleRows = allRows.slice(state.startIndex, state.endIndex + 1);
+	clearChildren(stripeContainer);
+	css(stripeContainer, { width: `${totalWidth}px` });
+	if (paddingTop > 0) {
+		const s = el("div");
+		s.style.height = `${paddingTop}px`;
+		stripeContainer.append(s);
+	}
+	for (let i = 0; i < visibleRows.length; i++) {
+		const rowIdx = startIndex + i;
+		const stripe = el("div");
+		css(stripe, {
+			height: `${ROW_HEIGHT}px`,
+			background: rowIdx % 2 === 0 ? "var(--gantt-bg)" : "var(--gantt-stripe)",
+			borderBottom: "1px solid var(--gantt-border)"
+		});
+		stripeContainer.append(stripe);
+	}
+	if (paddingBottom > 0) {
+		const s = el("div");
+		s.style.height = `${paddingBottom}px`;
+		stripeContainer.append(s);
+	}
+	css(absoluteLayer, {
+		width: `${totalWidth}px`,
+		height: `${contentHeight}px`
+	});
+	const toRemove = [];
+	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, cleanupProgressDrag } of barRegistry.values()) {
+		cleanupDrag();
+		cleanupLinkHandles?.();
+		cleanupProgressDrag?.();
+	}
+	barRegistry.clear();
+	if (scale === "day") renderSpecialDayBackgrounds(absoluteLayer, svgLayer, state, contentHeight);
+	let gridCur = snapToScaleBoundary(viewportStart, scale);
+	while (gridCur <= viewportEnd) {
+		const x = mapper.toX(gridCur);
+		const line = el("div");
+		css(line, {
+			position: "absolute",
+			left: `${x}px`,
+			top: "0",
+			width: "1px",
+			height: `${contentHeight}px`,
+			background: "var(--gantt-grid-line)",
+			pointerEvents: "none"
+		});
+		absoluteLayer.insertBefore(line, svgLayer);
+		gridCur = nextScaleBoundary(gridCur, scale);
+	}
+	const todayX = mapper.toX(/* @__PURE__ */ new Date());
+	const todayLineWidth = 2;
+	if (todayX >= 0 && todayX <= totalWidth - todayLineWidth) {
+		const todayLine = el("div");
+		todayLine.className = "gantt-today-marker";
+		css(todayLine, {
+			position: "absolute",
+			left: `${todayX}px`,
+			top: "0",
+			width: `${todayLineWidth}px`,
+			height: `${contentHeight}px`,
+			background: "var(--gantt-today)",
+			pointerEvents: "none",
+			zIndex: "5"
+		});
+		absoluteLayer.insertBefore(todayLine, svgLayer);
+	}
+	const visibleTaskIds = new Set(visibleRows.map((task) => task.id));
+	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);
+	}
+	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++) {
@@ -1980,6 +2723,9 @@ function buildTaskIndex(tasks) {
 	}
 	return index;
 }
+function toIsoDate(date) {
+	return date.toISOString().slice(0, 10);
+}
 function buildSpecialDayIndex(specialDays) {
 	const map = /* @__PURE__ */ new Map();
 	for (const specialDay of specialDays) {
@@ -1993,9 +2739,6 @@ function buildSpecialDayIndex(specialDays) {
 	}
 	return map;
 }
-function toIsoDate(date) {
-	return date.toISOString().slice(0, 10);
-}
 function normalizeWeekendDays(days) {
 	if (days === void 0) return new Set([0, 6]);
 	const normalized = /* @__PURE__ */ new Set();
@@ -2020,11 +2763,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) => {
@@ -2073,19 +2816,34 @@ 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;
+/**
+* Progressive-enhancement Gantt chart component.
+* Validates input, builds a DOM tree, and renders a full interactive chart
+* inside the given container element.
+*
+* @example
+* ```ts
+* const chart = new GanttChart(document.getElementById('chart')!, input, {
+*   locale: 'de-DE',
+*   theme: 'dark',
+* });
+* ```
+*/
 var GanttChart = class {
 	#container;
 	#opts;
-	#input;
+	#callbacks;
+	#input = null;
 	#scale;
 	#selectedId = null;
 	#scrollTop = 0;
 	#rafPending = false;
 	#rafId = null;
 	#destroyed = false;
+	#dragOriginals = /* @__PURE__ */ new Map();
 	#taskIndex;
 	#lastGridClick = null;
 	#userSplitWidth = null;
@@ -2100,6 +2858,7 @@ var GanttChart = class {
 	#root;
 	#scrollEl;
 	#leftPane;
+	#leftHeader;
 	#leftBody;
 	#rightPane;
 	#rightHeader;
@@ -2107,14 +2866,19 @@ var GanttChart = class {
 	#cbs;
 	#resizeObserver = null;
 	#columnResizeCleanup;
-	constructor(container, input, opts = {}) {
+	/**
+	* Constructs a new chart, builds the DOM, and wires internal event handling.
+	* Data must be loaded via {@link update} before the chart renders.
+	*
+	* @param container - The host `HTMLElement` the chart will be appended to.
+	* @param opts - Configuration and callback options.
+	*/
+	constructor(container, opts = {}, cbs = {}) {
 		this.#container = container;
-		validateLinkRefs(input.tasks, input.links);
-		detectCycles(input.tasks, input.links);
-		this.#input = input;
 		this.#scale = opts.scale ?? "day";
 		this.#opts = opts;
-		this.#taskIndex = buildTaskIndex(input.tasks);
+		this.#callbacks = cbs;
+		this.#taskIndex = /* @__PURE__ */ new Map();
 		this.#locale = resolveChartLocale(opts.locale);
 		this.#columns = opts.gridColumns ?? gridColumnDefaults(this.#locale);
 		this.#leftPaneDefaultWidth = opts.leftPaneWidth ?? gridNaturalWidth(this.#columns);
@@ -2122,43 +2886,117 @@ var GanttChart = class {
 		this.#timelineMinWidth = opts.timelineMinWidth ?? 220;
 		this.#weekendDays = normalizeWeekendDays(opts.weekendDays ?? this.#locale.weekendDays);
 		this.#specialDaysByDate = buildSpecialDayIndex(opts.specialDays ?? []);
-		this.#expandedIds = getInitialExpandedIds(input.tasks);
+		this.#expandedIds = /* @__PURE__ */ new Set();
 		this.#cbs = {
-			onSelect: (id) => {
+			onTaskSelect: (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.onTaskSelect?.({ task });
+				}
 				this.#scheduleRender();
 			},
 			onTaskDoubleClick: (payload) => {
-				opts.onTaskDoubleClick?.(payload);
+				this.#callbacks.onTaskDoubleClick?.({ task: payload.task });
 			},
 			onTaskEditIntent: (payload) => {
-				opts.onTaskEditIntent?.(payload);
-				opts.onTaskDoubleClick?.({
-					id: payload.id,
-					source: payload.source
-				});
+				this.#callbacks.onTaskDoubleClick?.({ task: payload.task });
 			},
-			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, { start_date: iso });
-				opts.onMove?.(payload);
+				this.#patchTask(payload.id, { startDate: iso });
+				this.#scheduleRender();
+			},
+			_onTaskMoveFinal: (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					if (this.#callbacks.onTaskMove?.({
+						task,
+						newStartDate: payload.startDate
+					}) === false) {
+						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 });
 				this.#scheduleRender();
 			},
-			onResize: (payload) => {
-				this.#patchTask(payload.id, { duration: payload.duration });
-				opts.onResize?.(payload);
+			_onTaskResizeFinal: (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					if (this.#callbacks.onTaskResize?.({
+						task,
+						newDurationHours: payload.durationHours
+					}) === false) {
+						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: (payload) => {
+				const task = this.#findTask(payload.id);
+				if (task !== void 0) {
+					if (this.#callbacks.onProgressChange?.({
+						task,
+						newPercentComplete: payload.percentComplete
+					}) === false) {
+						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 });
 			},
 			onLeftPaneWidthChange: (width) => {
-				opts.onLeftPaneWidthChange?.(width);
+				this.#callbacks.onLeftPaneWidthChange?.(width);
 			},
 			onGridColumnsChange: (updatedColumns) => {
-				opts.onGridColumnsChange?.(updatedColumns);
+				this.#callbacks.onGridColumnsChange?.(updatedColumns);
 			},
 			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
+				});
+			},
+			onLinkClick: (payload) => {
+				this.#callbacks.onLinkClick?.({ link: payload });
+			},
+			onLinkDblClick: (payload) => {
+				this.#callbacks.onLinkDblClick?.({ link: payload });
 			}
 		};
 		this.#buildDom();
@@ -2167,25 +3005,96 @@ var GanttChart = class {
 		this.#applyTheme();
 		this.#applyResponsivePaneStyles();
 		this.#setupResizeObserver();
-		this.#render();
 	}
+	/**
+	* Replaces the full dataset and re-renders.
+	*
+	* @param newInput - The new {@link GanttInput} to apply.
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
 	update(newInput) {
 		this.#assertAlive();
 		validateLinkRefs(newInput.tasks, newInput.links);
 		detectCycles(newInput.tasks, newInput.links);
-		this.#input = newInput;
-		this.#taskIndex = buildTaskIndex(newInput.tasks);
-		this.#scheduleRender();
+		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;
+			this.#rafPending = false;
+		}
+		this.#render();
 	}
-	setScale(scale) {
+	/**
+	* Merges the supplied options into the current configuration and re-renders
+	* only the panes affected by the changed options.
+	*
+	* @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.
+	*/
+	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.
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
 	select(id) {
 		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) this.#callbacks.onTaskSelect?.({ task });
+			this.#selectedId = id;
+		}
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
 			this.#rafId = null;
@@ -2193,6 +3102,11 @@ var GanttChart = class {
 		}
 		this.#render();
 	}
+	/**
+	* Collapses all expandable groups in the task tree.
+	*
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
 	collapseAll() {
 		this.#assertAlive();
 		this.#expandedIds.clear();
@@ -2203,10 +3117,15 @@ var GanttChart = class {
 		}
 		this.#render();
 	}
+	/**
+	* Expands all expandable groups in the task tree.
+	*
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
 	expandAll() {
 		this.#assertAlive();
 		this.#expandedIds.clear();
-		for (const id of getExpandableTaskIds(this.#input.tasks)) this.#expandedIds.add(id);
+		if (this.#input !== null) for (const id of getExpandableTaskIds(this.#input.tasks)) this.#expandedIds.add(id);
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
 			this.#rafId = null;
@@ -2214,6 +3133,10 @@ var GanttChart = class {
 		}
 		this.#render();
 	}
+	/**
+	* Removes the chart DOM and internal listeners, rendering the instance
+	* unusable. Subsequent calls to any public method will throw.
+	*/
 	destroy() {
 		if (this.#destroyed) return;
 		this.#destroyed = true;
@@ -2222,13 +3145,15 @@ 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()) {
+		for (const { cleanupDrag, cleanupLinkHandles, cleanupProgressDrag } of this.#rightPaneRefs.barRegistry.values()) {
 			cleanupDrag();
 			cleanupLinkHandles?.();
+			cleanupProgressDrag?.();
 		}
 		clearChildren(this.#container);
 	}
 	#patchTask(id, patch) {
+		if (this.#input === null) return;
 		const index = this.#taskIndex.get(id);
 		if (index === void 0) return;
 		const target = this.#input.tasks[index];
@@ -2238,15 +3163,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: "double_click",
 				task: payload.task
 			});
 			return;
@@ -2255,7 +3181,7 @@ var GanttChart = class {
 			id: payload.id,
 			atMs: now
 		};
-		this.#cbs.onSelect?.(payload.id);
+		this.#cbs.onTaskSelect?.(payload.id);
 	};
 	#onScroll = () => {
 		({scrollTop: this.#scrollTop} = this.#scrollEl);
@@ -2278,13 +3204,13 @@ var GanttChart = class {
 		this.#leftPane.style.maxWidth = `${computedWidth}px`;
 		this.#rightPane.style.minWidth = `${this.#timelineMinWidth}px`;
 	};
-	#computeState() {
-		const allRows = flattenTree(buildTaskTree(this.#input.tasks), this.#expandedIds);
-		const [vpStart, vpEnd] = this.#opts.viewportStart !== void 0 && this.#opts.viewportEnd !== void 0 ? [this.#opts.viewportStart, this.#opts.viewportEnd] : deriveViewport(allRows, 2);
+	#computeState(input) {
+		const allRows = flattenTree(buildTaskTree(input.tasks), this.#expandedIds);
+		const [vpStart, vpEnd] = this.#opts.viewportStart !== void 0 && this.#opts.viewportEnd !== void 0 ? [this.#opts.viewportStart, this.#opts.viewportEnd] : deriveViewport(allRows, 48);
 		const mapper = createPixelMapper(this.#scale, vpStart);
 		const totalWidth = Math.ceil(mapper.toX(vpEnd)) + 1;
 		const layouts = computeLayout(allRows, mapper);
-		const links = routeLinks(this.#input.links, layouts);
+		const links = routeLinks(input.links, layouts);
 		const containerH = this.#height - HEADER_H;
 		const rowCount = allRows.length;
 		const startIndex = Math.max(0, Math.floor(this.#scrollTop / ROW_HEIGHT) - OVERSCAN);
@@ -2292,10 +3218,11 @@ var GanttChart = class {
 		const paddingTop = startIndex * ROW_HEIGHT;
 		const paddingBottom = Math.max(0, (rowCount - 1 - endIndex) * ROW_HEIGHT);
 		return {
-			input: this.#input,
+			input,
 			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,
@@ -2318,23 +3245,51 @@ var GanttChart = class {
 	}
 	#render = () => {
 		this.#rafPending = false;
-		const state = this.#computeState();
+		const input = this.#input;
+		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),
+			onTaskSelect: (id) => this.#cbs.onTaskSelect?.(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;
@@ -2390,6 +3345,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;
@@ -2437,12 +3393,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);
@@ -2457,6 +3415,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, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, 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