gantt-renderer 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2462 @@
+import { z } from "zod";
+//#region src/gantt-chart/validation/schemas.ts
+const LinkTypeSchema = z.enum([
+	"FS",
+	"SS",
+	"FF",
+	"SF"
+]);
+const TaskTypeSchema = z.enum([
+	"task",
+	"project",
+	"milestone"
+]);
+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"),
+	kind: SpecialDayKindSchema,
+	label: z.string().min(1).optional(),
+	className: z.string().min(1).optional()
+});
+const TaskSchema = z.object({
+	id: z.number().int().positive(),
+	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),
+	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()
+});
+const LinkSchema = z.object({
+	id: z.number().int().positive(),
+	source: z.number().int().positive(),
+	target: z.number().int().positive(),
+	type: LinkTypeSchema.default("FS")
+});
+const GanttInputSchema = z.object({
+	tasks: z.array(TaskSchema).min(1),
+	links: z.array(LinkSchema).default([])
+});
+/** Parses raw external data. Throws ZodError on 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
+var GanttError = class extends Error {
+	code;
+	constructor(code, message) {
+		super(message);
+		this.name = "GanttError";
+		this.code = code;
+	}
+};
+//#endregion
+//#region src/gantt-chart/domain/tree.ts
+/**
+* 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.
+*/
+function buildTaskTree(tasks) {
+	const map = /* @__PURE__ */ new Map();
+	const roots = [];
+	for (const task of tasks) map.set(task.id, {
+		...task,
+		children: [],
+		depth: 0
+	});
+	for (const task of tasks) {
+		const node = map.get(task.id);
+		if (node === void 0) continue;
+		if (task.parent !== void 0) {
+			const parent = map.get(task.parent);
+			if (parent === void 0) throw new GanttError("PARENT_REFERENCE", `Task id=${task.id} references non-existent parent id=${task.parent}`);
+			parent.children.push(node);
+		} else roots.push(node);
+	}
+	(function setDepths(nodes, d) {
+		for (const n of nodes) {
+			n.depth = d;
+			setDepths(n.children, d + 1);
+		}
+	})(roots, 0);
+	return roots;
+}
+/**
+* Flattens a tree into a visible row list.
+* A node's children are included only when its id is in expandedIds.
+*/
+function flattenTree(roots, expandedIds) {
+	const rows = [];
+	function walk(node) {
+		rows.push(node);
+		if (node.children.length > 0 && expandedIds.has(node.id)) for (const child of node.children) walk(child);
+	}
+	for (const root of roots) walk(root);
+	return rows;
+}
+/** Returns true when a node has children in the tree. */
+function isParent(node) {
+	return node.children.length > 0;
+}
+//#endregion
+//#region src/gantt-chart/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.
+*/
+function detectCycles(tasks, links) {
+	const adj = /* @__PURE__ */ new Map();
+	for (const task of tasks) adj.set(task.id, []);
+	for (const link of links) {
+		const neighbors = adj.get(link.source);
+		if (neighbors !== void 0) neighbors.push(link.target);
+	}
+	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("DEPENDENCY_CYCLE", `Circular dependency 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);
+}
+/**
+* Returns true when all link source/target ids reference existing tasks.
+* Throws with details on failure.
+*/
+function validateLinkRefs(tasks, links) {
+	const ids = new Set(tasks.map((t) => t.id));
+	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);
+		}
+	} 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;
+}
+const WEEK_START_REGION = {
+	US: 0,
+	CA: 0,
+	MX: 0,
+	JP: 0,
+	PH: 0,
+	BR: 0,
+	CO: 0,
+	VE: 0,
+	PE: 0,
+	EC: 0,
+	CL: 0,
+	AR: 0,
+	UY: 0,
+	PY: 0,
+	BO: 0,
+	GT: 0,
+	HN: 0,
+	SV: 0,
+	NI: 0,
+	CR: 0,
+	PA: 0,
+	DO: 0,
+	PR: 0,
+	IL: 0,
+	SA: 0,
+	KW: 0,
+	QA: 0,
+	BH: 0,
+	OM: 0,
+	YE: 0,
+	MA: 0,
+	DZ: 0,
+	TN: 0,
+	LY: 0,
+	EG: 0,
+	IQ: 0,
+	JO: 0,
+	SD: 0,
+	SY: 0,
+	LB: 0,
+	PS: 0,
+	AE: 6,
+	IR: 6,
+	AF: 6,
+	DJ: 6,
+	SO: 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",
+	MX: "us",
+	BR: "us",
+	AR: "us",
+	CL: "us",
+	CO: "us",
+	PE: "us",
+	JP: "us",
+	KR: "us",
+	CN: "us",
+	TW: "us",
+	IN: "us",
+	PH: "us",
+	IL: "us",
+	SA: "us",
+	AE: "us",
+	IR: "us",
+	ZA: "us",
+	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],
+	DZ: [5, 6],
+	BH: [5, 6],
+	BD: [5, 6],
+	EG: [5, 6],
+	IQ: [5, 6],
+	IL: [5, 6],
+	JO: [5, 6],
+	KW: [5, 6],
+	LY: [5, 6],
+	MV: [5, 6],
+	MR: [5, 6],
+	MA: [5, 6],
+	OM: [5, 6],
+	PK: [5, 6],
+	PS: [5, 6],
+	QA: [5, 6],
+	SA: [5, 6],
+	SD: [5, 6],
+	SY: [5, 6],
+	TN: [5, 6],
+	YE: [5, 6],
+	BN: [5, 0],
+	IN: [0],
+	UG: [0],
+	NP: [6],
+	IR: [5],
+	DJ: [4, 5],
+	SO: [5],
+	MY: [5, 0]
+};
+/**
+* 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)`.
+*/
+function formatWeekNumber(date, scheme) {
+	switch (scheme) {
+		case "iso": return isoWeek(date);
+		case "us": return usWeek(date);
+		case "simple": return simpleWeek(date);
+	}
+}
+function isoWeek(date) {
+	const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+	const dayNum = d.getUTCDay() || 7;
+	d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+	const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+	return Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function usWeek(date) {
+	const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+	const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+	const dayOfYear = Math.floor((d.getTime() - yearStart.getTime()) / 864e5);
+	const jan1Dow = yearStart.getUTCDay();
+	const weekStartDayOfYear = jan1Dow === 0 ? 0 : -jan1Dow;
+	if (dayOfYear < weekStartDayOfYear) return 0;
+	return Math.floor((dayOfYear - weekStartDayOfYear) / 7) + 1;
+}
+function simpleWeek(date) {
+	const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+	const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+	const dayOfYear = Math.floor((d.getTime() - yearStart.getTime()) / 864e5);
+	return Math.ceil((dayOfYear + 1) / 7);
+}
+/**
+* Formats a label template by replacing `{0}` with the given argument.
+*/
+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. */
+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). */
+function addDays(date, days) {
+	return new Date(date.getTime() + days * 864e5);
+}
+/** Difference in days (float). Positive when b > a. */
+function diffDays(a, b) {
+	return (b.getTime() - a.getTime()) / 864e5;
+}
+/** UTC start-of-day. */
+function startOfDay(date) {
+	return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+}
+/**
+* Formats a Date for the time-header label given the active scale.
+*/
+function formatHeaderLabel(date, scale, locale) {
+	const { code, weekNumbering: weekNumScheme = "iso" } = locale;
+	switch (scale) {
+		case "hour": return `${String(date.getUTCHours()).padStart(2, "0")}:00`;
+		case "day": {
+			const day = date.toLocaleDateString(code, {
+				weekday: "short",
+				timeZone: "UTC"
+			});
+			return `${date.getUTCDate()} ${day}`;
+		}
+		case "week": return `W${formatWeekNumber(date, weekNumScheme)}`;
+		case "month": return date.toLocaleDateString(code, {
+			month: "short",
+			year: "numeric",
+			timeZone: "UTC"
+		});
+		case "quarter": return `${resolveQuarterLabel(locale)}${Math.floor(date.getUTCMonth() / 3) + 1} ${date.getUTCFullYear()}`;
+		case "year": return `${date.getUTCFullYear()}`;
+	}
+}
+/**
+* Returns the upper-level (month/year) label for a given scale column.
+* Used in the top header row.
+*/
+function formatUpperLabel(date, scale, locale) {
+	const { code } = locale;
+	switch (scale) {
+		case "hour": return date.toLocaleDateString(code, {
+			month: "long",
+			day: "numeric",
+			year: "numeric",
+			timeZone: "UTC"
+		});
+		case "day":
+		case "week": return date.toLocaleDateString(code, {
+			month: "long",
+			year: "numeric",
+			timeZone: "UTC"
+		});
+		case "month": return `${date.getUTCFullYear()}`;
+		case "quarter": return `${date.getUTCFullYear()}`;
+		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. */
+function formatDisplayDate(dateStr, locale) {
+	return parseDate(dateStr).toLocaleDateString(locale.code, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		timeZone: "UTC"
+	});
+}
+//#endregion
+//#region src/gantt-chart/timeline/scale.ts
+const H = 36e5;
+const D = 864e5;
+const SCALE_CONFIGS = {
+	hour: {
+		columnWidth: 60,
+		msPerColumn: H,
+		headerFormat: "hour"
+	},
+	day: {
+		columnWidth: 72,
+		msPerColumn: D,
+		headerFormat: "day"
+	},
+	week: {
+		columnWidth: 120,
+		msPerColumn: 7 * D,
+		headerFormat: "week"
+	},
+	month: {
+		columnWidth: 160,
+		msPerColumn: 30 * D,
+		headerFormat: "month"
+	},
+	quarter: {
+		columnWidth: 220,
+		msPerColumn: 91 * D,
+		headerFormat: "quarter"
+	},
+	year: {
+		columnWidth: 280,
+		msPerColumn: 365 * D,
+		headerFormat: "year"
+	}
+};
+/**
+* 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.
+*/
+function snapToScaleBoundary(date, scale, weekStartsOn = 1) {
+	switch (scale) {
+		case "hour": return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours()));
+		case "day": return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+		case "week": {
+			const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+			const offset = ((d.getUTCDay() - weekStartsOn) % 7 + 7) % 7;
+			d.setUTCDate(d.getUTCDate() - offset);
+			return d;
+		}
+		case "month": return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+		case "quarter": {
+			const month = date.getUTCMonth();
+			const quarterStartMonth = Math.floor(month / 3) * 3;
+			return new Date(Date.UTC(date.getUTCFullYear(), quarterStartMonth, 1));
+		}
+		case "year": return new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+	}
+}
+/**
+* Returns the next column boundary from a boundary-aligned date.
+* Month/quarter/year use true calendar stepping (not fixed-day approximations).
+*/
+function nextScaleBoundary(date, scale) {
+	switch (scale) {
+		case "hour": return new Date(date.getTime() + H);
+		case "day": return new Date(date.getTime() + D);
+		case "week": return new Date(date.getTime() + 7 * D);
+		case "month": return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
+		case "quarter": return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 3, 1));
+		case "year": return new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
+	}
+}
+//#endregion
+//#region src/gantt-chart/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.
+*/
+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;
+	return {
+		originMs,
+		columnWidth,
+		toX(date) {
+			return (date.getTime() - originMs) * pxPerMs;
+		},
+		toDate(x) {
+			return new Date(originMs + x * msPerPx);
+		},
+		durationToWidth(days) {
+			return days * msPerDay * pxPerMs;
+		},
+		widthToDuration(px) {
+			return px * msPerPx / msPerDay;
+		}
+	};
+}
+//#endregion
+//#region src/gantt-chart/timeline/layoutEngine.ts
+const DENSITY = {
+	rowHeight: 44,
+	barHeight: 28,
+	milestoneSize: 20
+};
+const ROW_HEIGHT = DENSITY.rowHeight;
+const BAR_HEIGHT = DENSITY.barHeight;
+const BAR_Y_OFFSET = (ROW_HEIGHT - BAR_HEIGHT) / 2;
+const MILESTONE_SIZE = DENSITY.milestoneSize;
+/** Half-width of a milestone diamond */
+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.
+*/
+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 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") {
+			result.set(task.id, {
+				taskId: task.id,
+				x,
+				y,
+				width: 0,
+				height: BAR_HEIGHT,
+				progressWidth: 0,
+				type: "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));
+		result.set(task.id, {
+			taskId: task.id,
+			x,
+			y,
+			width,
+			height: BAR_HEIGHT,
+			progressWidth,
+			type,
+			rowIndex: i,
+			centerX: x + width / 2,
+			centerY
+		});
+	}
+	return result;
+}
+/**
+* Computes the total pixel height of all rows.
+*/
+function totalContentHeight(rowCount) {
+	return rowCount * ROW_HEIGHT;
+}
+/**
+* Derives viewport bounds from task data with padding.
+* Returns [start, end] as UTC midnight dates.
+*/
+function deriveViewport(tasks, paddingDays = 2) {
+	if (tasks.length === 0) {
+		const now = /* @__PURE__ */ new Date();
+		return [now, addDays(now, 30)];
+	}
+	let minMs = Infinity;
+	let maxMs = -Infinity;
+	for (const task of tasks) {
+		const start = parseDate(task.start_date);
+		const end = addDays(start, task.duration);
+		if (start.getTime() < minMs) minMs = start.getTime();
+		if (end.getTime() > maxMs) maxMs = end.getTime();
+	}
+	return [addDays(new Date(minMs), -paddingDays), addDays(new Date(maxMs), paddingDays)];
+}
+//#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).
+*/
+function routeLinks(links, layouts) {
+	return links.map((link) => {
+		const src = layouts.get(link.source);
+		const tgt = layouts.get(link.target);
+		if (src === void 0 || tgt === void 0) return null;
+		return {
+			linkId: link.id,
+			sourceTaskId: link.source,
+			targetTaskId: link.target,
+			points: route(link.type, src, tgt)
+		};
+	}).filter((r) => r !== null);
+}
+/**
+* Produces the vertex list for an orthogonal connector between src and tgt.
+*
+* Link semantics:
+*   FS = source.finish → target.start  (most common)
+*   SS = source.start  → target.start
+*   FF = source.finish → target.finish
+*   SF = source.start  → target.finish
+*/
+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
+		}
+	];
+}
+//#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);
+	else if (k in elem) elem[k] = v;
+	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. */
+function clearChildren(elem) {
+	while (elem.firstChild !== null) elem.removeChild(elem.firstChild);
+}
+/** Appends all nodes from an array/fragment into parent in one pass. */
+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. */
+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
+/**
+* Fully replaces the content of `container` with two header rows.
+* Called on scale change or viewport change only — not on scroll.
+*/
+function renderTimeHeader(container, state) {
+	const { scale, viewportStart, viewportEnd, mapper, totalWidth, locale } = state;
+	const weekStartsOn = locale.weekStartsOn ?? 1;
+	const upperCells = [];
+	const lowerCells = [];
+	let cur = snapToScaleBoundary(viewportStart, scale, weekStartsOn);
+	let prevUpperLabel = "";
+	let upperStart = 0;
+	let upperWidth = 0;
+	while (cur < viewportEnd) {
+		const next = nextScaleBoundary(cur, scale);
+		const x = mapper.toX(cur);
+		const w = mapper.toX(next) - x;
+		lowerCells.push({
+			label: formatHeaderLabel(cur, scale, locale),
+			x,
+			width: w
+		});
+		const uLabel = formatUpperLabel(cur, scale, locale);
+		if (uLabel !== prevUpperLabel) {
+			if (prevUpperLabel !== "") upperCells.push({
+				label: prevUpperLabel,
+				x: upperStart,
+				width: upperWidth
+			});
+			prevUpperLabel = uLabel;
+			upperStart = x;
+			upperWidth = w;
+		} else upperWidth += w;
+		cur = next;
+	}
+	if (prevUpperLabel !== "") upperCells.push({
+		label: prevUpperLabel,
+		x: upperStart,
+		width: upperWidth
+	});
+	const upperRow = el("div");
+	css_(upperRow, {
+		position: "relative",
+		height: "24px",
+		width: `${totalWidth}px`,
+		background: "var(--gantt-header-bg)",
+		borderBottom: "1px solid var(--gantt-border)"
+	});
+	const upperNodes = upperCells.map((cell) => {
+		const d = el("div");
+		css_(d, {
+			position: "absolute",
+			left: `${cell.x}px`,
+			width: `${cell.width}px`,
+			height: "100%",
+			borderRight: "1px solid var(--gantt-border)",
+			display: "flex",
+			alignItems: "center",
+			paddingLeft: "8px",
+			fontSize: "var(--gantt-font-size-xs)",
+			fontWeight: "var(--gantt-font-weight-bold)",
+			color: "var(--gantt-text)",
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			letterSpacing: "var(--gantt-letter-spacing-tight)",
+			textTransform: "uppercase"
+		});
+		d.textContent = cell.label;
+		return d;
+	});
+	const lowerRow = el("div");
+	css_(lowerRow, {
+		position: "relative",
+		height: "28px",
+		width: `${totalWidth}px`,
+		background: "var(--gantt-header-bg)",
+		borderBottom: "1px solid var(--gantt-border)"
+	});
+	const lowerNodes = lowerCells.map((cell) => {
+		const d = el("div");
+		css_(d, {
+			position: "absolute",
+			left: `${cell.x}px`,
+			width: `${cell.width}px`,
+			height: "100%",
+			borderRight: "1px solid var(--gantt-border)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			fontSize: "var(--gantt-font-size-xs)",
+			color: "var(--gantt-text-secondary)",
+			overflow: "hidden",
+			whiteSpace: "nowrap"
+		});
+		d.textContent = cell.label;
+		return d;
+	});
+	appendAll(upperRow, upperNodes);
+	appendAll(lowerRow, lowerNodes);
+	clearChildren(container);
+	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
+const DEFAULT_GRID_COLUMNS = [
+	{
+		id: "name",
+		header: "Task name",
+		width: "1fr"
+	},
+	{
+		id: "start_date",
+		header: "Start time",
+		width: "90px",
+		field: "start_date",
+		format: (value, _task, _row, locale) => formatDisplayDate(String(value), locale)
+	},
+	{
+		id: "duration",
+		header: "Duration",
+		width: "68px",
+		field: "duration",
+		format: (value) => value > 0 ? String(value) : "—"
+	},
+	{
+		id: "actions",
+		header: "",
+		width: "28px"
+	}
+];
+/**
+* Returns a localized default grid column schema.
+* Column headers use locale label overrides with EN_US_LABELS fallback.
+*/
+function gridColumnDefaults(locale) {
+	return [
+		{
+			id: "name",
+			header: locale.labels?.column_task_name ?? EN_US_LABELS.column_task_name,
+			width: "1fr"
+		},
+		{
+			id: "start_date",
+			header: locale.labels?.column_start_time ?? EN_US_LABELS.column_start_time,
+			width: "90px",
+			field: "start_date",
+			format: (value, _task, _row, loc) => formatDisplayDate(String(value), loc)
+		},
+		{
+			id: "duration",
+			header: locale.labels?.column_duration ?? EN_US_LABELS.column_duration,
+			width: "68px",
+			field: "duration",
+			format: (value) => value > 0 ? String(value) : "—"
+		},
+		{
+			id: "actions",
+			header: "",
+			width: "28px"
+		}
+	];
+}
+function gridTemplateColumns(columns) {
+	return columns.filter((c) => c.visible !== false).map((c) => c.width).join(" ");
+}
+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$/;
+function parseColumnMinWidth(width) {
+	const trimmed = width.trim();
+	const pxMatch = PX_RE.exec(trimmed);
+	if (pxMatch) return parseFloat(pxMatch[1] ?? "0");
+	const frMatch = FR_RE.exec(trimmed);
+	if (frMatch) return parseFloat(frMatch[1] ?? "0") * 120;
+	return 0;
+}
+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
+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);
+	}
+	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 buildTreeNameCell(row, expandedIds, cbs) {
+	const hasChildren = isParent(row);
+	const expanded = expandedIds.has(row.id);
+	const cell = el("div");
+	css(cell, {
+		display: "flex",
+		alignItems: "center",
+		paddingLeft: `${row.depth * INDENT}px`,
+		gap: "4px",
+		overflow: "hidden"
+	});
+	if (hasChildren) {
+		const btn = el("button");
+		btn.className = "gantt-toggle";
+		btn.textContent = expanded ? "▾" : "▸";
+		css(btn, {
+			width: "16px",
+			height: "16px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: "none",
+			border: "none",
+			cursor: "pointer",
+			color: "var(--gantt-text-secondary)",
+			padding: "0",
+			flexShrink: "0"
+		});
+		btn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			cbs.onToggle(row.id);
+		});
+		cell.append(btn);
+	} else {
+		const spacer = el("span");
+		spacer.style.width = "16px";
+		spacer.style.flexShrink = "0";
+		cell.append(spacer);
+	}
+	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)",
+		color: "var(--gantt-text)",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	});
+	label.textContent = row.text;
+	cell.append(label);
+	return cell;
+}
+function buildDataCell(row, column, locale) {
+	const cell = el("span");
+	const styles = {
+		fontSize: "var(--gantt-font-size-sm)",
+		color: "var(--gantt-text-secondary)",
+		paddingRight: "8px",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	};
+	if (column.align !== void 0) styles.textAlign = column.align;
+	css(cell, styles);
+	const task = toTask$1(row);
+	if (column.field !== void 0) {
+		const rawValue = 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) : "";
+	}
+	return cell;
+}
+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;
+	css(btn, {
+		background: "none",
+		border: "none",
+		cursor: "pointer",
+		color: "var(--gantt-text-secondary)",
+		fontSize: "var(--gantt-font-size-lg)",
+		lineHeight: "1"
+	});
+	btn.addEventListener("click", (event) => {
+		event.stopPropagation();
+		cbs.onAdd(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 }
+	};
+}
+/** Builds the header row for the left pane. */
+function buildLeftPaneHeader(columns) {
+	const header = el("div");
+	css(header, {
+		display: "grid",
+		gridTemplateColumns: gridTemplateColumns(columns),
+		height: "52px",
+		background: "var(--gantt-header-bg)",
+		borderBottom: "1px solid var(--gantt-border)",
+		paddingLeft: "8px",
+		alignItems: "flex-end",
+		paddingBottom: "4px",
+		boxSizing: "border-box"
+	});
+	const visible = visibleColumns(columns);
+	for (let i = 0; i < visible.length; i++) {
+		const column = visible[i];
+		if (column === void 0) continue;
+		const wrapper = el("div");
+		css(wrapper, {
+			position: "relative",
+			display: "flex",
+			alignItems: "flex-end"
+		});
+		const cell = el("span");
+		css(cell, {
+			fontSize: "var(--gantt-font-size-xs)",
+			fontWeight: "var(--gantt-font-weight-bold)",
+			color: "var(--gantt-text-secondary)",
+			letterSpacing: "var(--gantt-letter-spacing-wide)",
+			textTransform: "uppercase",
+			paddingRight: "8px"
+		});
+		if (column.align !== void 0) cell.style.textAlign = column.align;
+		cell.textContent = column.header;
+		wrapper.append(cell);
+		if (i < visible.length - 1) {
+			const handle = el("div");
+			handle.className = "gantt-col-resize-handle";
+			css(handle, {
+				position: "absolute",
+				right: "-3px",
+				top: "0",
+				bottom: "0",
+				width: "6px",
+				cursor: "col-resize",
+				zIndex: "1"
+			});
+			wrapper.append(handle);
+		}
+		header.append(wrapper);
+	}
+	return header;
+}
+/**
+* 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.
+*/
+function setupColumnResize(headerEl, bodyEl, columns, onChange) {
+	const handles = headerEl.querySelectorAll(".gantt-col-resize-handle");
+	const cleanups = [];
+	for (let colIndex = 0; colIndex < handles.length; colIndex++) {
+		const handle = handles.item(colIndex);
+		if (handle === null) continue;
+		const capturedColIndex = colIndex;
+		const onPointerDown = (e) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const startX = e.clientX;
+			const startWidths = [...headerEl.children].map((c) => c.getBoundingClientRect().width);
+			const onMove = (me) => {
+				const dx = me.clientX - startX;
+				const newWidths = [...startWidths];
+				newWidths[capturedColIndex] = Math.max(COLUMN_MIN_WIDTH, (startWidths[capturedColIndex] ?? 0) + dx);
+				if (capturedColIndex + 1 < newWidths.length) newWidths[capturedColIndex + 1] = Math.max(COLUMN_MIN_WIDTH, (startWidths[capturedColIndex + 1] ?? 0) - dx);
+				const template = newWidths.map((w) => `${Math.round(w)}px`).join(" ");
+				headerEl.style.gridTemplateColumns = template;
+				const rows = bodyEl.querySelectorAll("[role=\"row\"]");
+				for (const row of rows) row.style.gridTemplateColumns = template;
+			};
+			const onUp = () => {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				const finalCells = [...headerEl.children];
+				const visible = visibleColumns(columns);
+				for (let i = 0; i < visible.length && i < finalCells.length; i++) {
+					const col = visible[i];
+					const cell = finalCells[i];
+					if (col !== void 0 && cell !== void 0) {
+						const w = cell.getBoundingClientRect().width;
+						col.width = `${Math.round(w)}px`;
+					}
+				}
+				onChange?.([...columns]);
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+		};
+		handle.addEventListener("pointerdown", onPointerDown);
+		cleanups.push(() => {
+			handle.removeEventListener("pointerdown", onPointerDown);
+		});
+	}
+	return () => {
+		for (const cleanup of cleanups) cleanup();
+	};
+}
+//#endregion
+//#region src/gantt-chart/vanilla/dom/dependencyLayer.ts
+const NS = "http://www.w3.org/2000/svg";
+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.
+*/
+function createDependencyLayer(totalWidth, totalHeight) {
+	const svg = document.createElementNS(NS, "svg");
+	setAttrs(svg, {
+		width: totalWidth,
+		height: totalHeight
+	});
+	Object.assign(svg.style, {
+		position: "absolute",
+		top: "0",
+		left: "0",
+		pointerEvents: "none",
+		overflow: "visible",
+		zIndex: "1"
+	});
+	const defs = document.createElementNS(NS, "defs");
+	for (const [id, color] of [["gantt-arrow", "var(--gantt-link)"], ["gantt-arrow-hi", "var(--gantt-link-hi)"]]) {
+		const marker = document.createElementNS(NS, "marker");
+		setAttrs(marker, {
+			id,
+			viewBox: "0 0 10 10",
+			refX: "9",
+			refY: "5",
+			markerWidth: ARROW_SIZE,
+			markerHeight: ARROW_SIZE,
+			orient: "auto"
+		});
+		const path = document.createElementNS(NS, "path");
+		setAttrs(path, {
+			d: "M 0 1 L 10 5 L 0 9 Z",
+			fill: color
+		});
+		marker.append(path);
+		defs.append(marker);
+	}
+	svg.append(defs);
+	const ghostPath = document.createElementNS(NS, "path");
+	setAttrs(ghostPath, {
+		d: "",
+		fill: "none",
+		stroke: "var(--gantt-link)",
+		"stroke-width": "1.5",
+		"stroke-dasharray": "5 3"
+	});
+	ghostPath.classList.add("gantt-ghost-line");
+	ghostPath.style.display = "none";
+	svg.append(ghostPath);
+	return svg;
+}
+/**
+* Shows or updates the ghost line drawn during a link-creation drag.
+* Pass valid=true when the pointer is over a valid target bar.
+*/
+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"
+	});
+	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.
+*/
+function hideGhostLine(svg) {
+	const ghost = svg.querySelector("path.gantt-ghost-line");
+	if (ghost !== null) {
+		ghost.style.display = "none";
+		ghost.removeAttribute("marker-end");
+	}
+}
+/**
+* Replaces all path elements in the SVG to reflect the current link set.
+* The `<defs>` node (first child) is preserved.
+*/
+function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTaskId, highlightLinkedDependenciesOnSelect) {
+	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);
+	}
+	for (const node of toRemove) svg.removeChild(node);
+	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 isRelated = highlightLinkedDependenciesOnSelect && selectedTaskId !== null && (link.sourceTaskId === selectedTaskId || link.targetTaskId === selectedTaskId);
+		const path = document.createElementNS(NS, "path");
+		setAttrs(path, {
+			d,
+			fill: "none",
+			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)"
+		});
+		svg.append(path);
+	}
+}
+//#endregion
+//#region src/gantt-chart/vanilla/interaction/drag.ts
+/**
+* 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).
+*/
+function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
+	function onBarDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		try {
+			barEl.setPointerCapture(e.pointerId);
+		} catch {}
+		cbs.onSelect?.(task.id);
+		const startX = e.clientX;
+		const originDate = parseDate(task.start_date);
+		const mapper = getMapper();
+		function onMove(me) {
+			const dx = me.clientX - startX;
+			const days = Math.round(mapper.widthToDuration(dx));
+			cbs.onMove?.({
+				id: task.id,
+				startDate: addDays(originDate, days)
+			});
+		}
+		function onUp() {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			barEl.style.cursor = "grab";
+		}
+		barEl.style.cursor = "grabbing";
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}
+	function onResizeDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		try {
+			resizeHandleEl.setPointerCapture(e.pointerId);
+		} catch {}
+		const startX = e.clientX;
+		const origDur = task.duration;
+		const mapper = getMapper();
+		function onMove(me) {
+			const dx = me.clientX - startX;
+			const daysDelta = Math.round(mapper.widthToDuration(dx));
+			cbs.onResize?.({
+				id: task.id,
+				duration: Math.max(1, origDur + daysDelta)
+			});
+		}
+		function onUp() {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		}
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}
+	function onBarClick(event) {
+		if (event.detail !== 2) return;
+		cbs.onTaskEditIntent?.({
+			id: task.id,
+			source: "bar",
+			trigger: "double_click",
+			task: toTask(task)
+		});
+	}
+	barEl.addEventListener("pointerdown", onBarDown);
+	barEl.addEventListener("click", onBarClick);
+	resizeHandleEl.addEventListener("pointerdown", onResizeDown);
+	return () => {
+		barEl.removeEventListener("pointerdown", onBarDown);
+		barEl.removeEventListener("click", onBarClick);
+		resizeHandleEl.removeEventListener("pointerdown", onResizeDown);
+	};
+}
+/**
+* Attaches click-to-select on a milestone diamond.
+* Returns cleanup.
+*/
+function attachMilestoneClick(diamondEl, taskId, cbs) {
+	function onClick() {
+		cbs.onSelect?.(taskId);
+	}
+	function onDoubleClick(event) {
+		if (event.detail === 2) {
+			const task = diamondEl.__task;
+			if (task === void 0) return;
+			cbs.onTaskEditIntent?.({
+				id: taskId,
+				source: "milestone",
+				trigger: "double_click",
+				task
+			});
+		}
+	}
+	diamondEl.addEventListener("click", onClick);
+	diamondEl.addEventListener("click", onDoubleClick);
+	return () => {
+		diamondEl.removeEventListener("click", onClick);
+		diamondEl.removeEventListener("click", onDoubleClick);
+	};
+}
+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
+/**
+* Attaches a link-creation drag listener to an endpoint handle.
+* Returns a cleanup function that removes all listeners.
+*/
+function attachLinkEndpointHandle(handle, sourceTaskId, anchorX, anchorY, svgLayer, absoluteLayer, cbs) {
+	function onPointerDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		try {
+			handle.setPointerCapture(e.pointerId);
+		} catch {}
+		let validTargetId = null;
+		function onMove(me) {
+			const layerRect = absoluteLayer.getBoundingClientRect();
+			const x = me.clientX - layerRect.left;
+			const y = me.clientY - layerRect.top;
+			const barEl = document.elementFromPoint(me.clientX, me.clientY)?.closest("[data-task-id]");
+			const targetId = barEl !== null && barEl !== void 0 ? Number(barEl.dataset["taskId"]) : null;
+			validTargetId = targetId !== null && targetId !== sourceTaskId ? targetId : null;
+			showGhostLine(svgLayer, anchorX, anchorY, x, y, validTargetId !== null);
+		}
+		function onUp() {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			hideGhostLine(svgLayer);
+			if (validTargetId !== null) cbs.onLinkCreate?.({
+				sourceTaskId,
+				targetTaskId: validTargetId,
+				type: "FS"
+			});
+		}
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	}
+	handle.addEventListener("pointerdown", onPointerDown);
+	handle.tabIndex = 0;
+	handle.setAttribute("role", "button");
+	handle.setAttribute("aria-label", `Create link from task ${sourceTaskId}`);
+	function onKeyDown(event) {
+		if (event.key === "Enter" || event.key === " ") event.preventDefault();
+	}
+	handle.addEventListener("keydown", onKeyDown);
+	return () => {
+		handle.removeEventListener("pointerdown", onPointerDown);
+		handle.removeEventListener("keydown", onKeyDown);
+	};
+}
+/**
+* Creates an endpoint handle DOM element.
+* The caller must position it with inline styles and append it to the layer.
+*/
+function createEndpointHandle() {
+	const handle = document.createElement("div");
+	handle.className = "gantt-link-endpoint";
+	handle.style.position = "absolute";
+	handle.style.width = "10px";
+	handle.style.height = "10px";
+	handle.style.borderRadius = "50%";
+	handle.style.background = "var(--gantt-link)";
+	handle.style.border = "2px solid var(--gantt-bg)";
+	handle.style.cursor = "crosshair";
+	handle.style.zIndex = "4";
+	handle.style.opacity = "0";
+	handle.style.transition = "opacity 0.15s ease, transform 0.1s ease";
+	handle.style.transform = "translate(-50%, -50%) scale(0.8)";
+	handle.style.pointerEvents = "auto";
+	handle.style.touchAction = "none";
+	return handle;
+}
+//#endregion
+//#region src/gantt-chart/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. */
+function createRightPaneRefs() {
+	const scrollContainer = el("div");
+	const stripeContainer = el("div");
+	const absoluteLayer = el("div");
+	const svgLayer = createDependencyLayer(0, 0);
+	css(stripeContainer, { position: "relative" });
+	css(absoluteLayer, {
+		position: "absolute",
+		top: "0",
+		left: "0"
+	});
+	scrollContainer.append(stripeContainer);
+	scrollContainer.append(absoluteLayer);
+	absoluteLayer.append(svgLayer);
+	return {
+		scrollContainer,
+		stripeContainer,
+		absoluteLayer,
+		svgLayer,
+		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 renderSpecialDayBackgrounds(layer, beforeNode, state, contentHeight) {
+	const { mapper, viewportStart, viewportEnd, showWeekends, weekendDays, specialDaysByDate } = state;
+	let cur = startOfDay(viewportStart);
+	while (cur < viewportEnd) {
+		const next = new Date(cur.getTime() + 864e5);
+		const x = mapper.toX(cur);
+		const width = Math.max(1, mapper.toX(next) - x);
+		const dateKey = cur.toISOString().slice(0, 10);
+		const specialDay = specialDaysByDate.get(dateKey);
+		const isWeekend = weekendDays.has(cur.getUTCDay());
+		let kind = null;
+		if (specialDay !== void 0) {
+			const { kind: specialKind } = specialDay;
+			kind = specialKind;
+		} else if (showWeekends && isWeekend) kind = "weekend";
+		if (kind !== null) {
+			const dayCell = el("div");
+			dayCell.className = `gantt-day-cell gantt-day-cell--${kind}`;
+			if (specialDay?.className !== void 0) dayCell.classList.add(specialDay.className);
+			dayCell.dataset["date"] = dateKey;
+			if (specialDay?.label !== void 0) {
+				dayCell.dataset["label"] = specialDay.label;
+				dayCell.title = specialDay.label;
+			}
+			css(dayCell, {
+				position: "absolute",
+				left: `${x}px`,
+				top: "0",
+				width: `${width}px`,
+				height: `${contentHeight}px`,
+				pointerEvents: "none",
+				zIndex: "1"
+			});
+			layer.insertBefore(dayCell, beforeNode);
+		}
+		cur = next;
+	}
+}
+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 bar = el("div");
+	bar.className = `gantt-bar${selected ? " gantt-bar--selected gantt-shape--selected" : ""}`;
+	css(bar, {
+		position: "absolute",
+		left: `${layout.x}px`,
+		top: `${layout.y}px`,
+		width: `${layout.width}px`,
+		height: `${layout.height}px`,
+		...color === void 0 ? {} : { background: color },
+		borderRadius: layout.type === "project" ? "3px" : "4px",
+		cursor: "grab",
+		userSelect: "none",
+		overflow: "hidden",
+		zIndex: selected ? "3" : "2",
+		touchAction: "none"
+	});
+	if (layout.progressWidth > 0) {
+		const prog = el("div");
+		css(prog, {
+			position: "absolute",
+			left: "0",
+			top: "0",
+			width: `${layout.progressWidth}px`,
+			height: "100%",
+			background: "rgba(0,0,0,0.18)",
+			pointerEvents: "none"
+		});
+		bar.append(prog);
+	}
+	const label = el("span");
+	css(label, {
+		position: "absolute",
+		left: "8px",
+		right: "8px",
+		top: "50%",
+		transform: "translateY(-50%)",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		color: "var(--gantt-bar-label-color)",
+		fontSize: "var(--gantt-font-size-sm)",
+		fontWeight: "var(--gantt-font-weight-semibold)",
+		whiteSpace: "nowrap",
+		pointerEvents: "none",
+		textShadow: "0 1px 2px rgba(0,0,0,0.25)"
+	});
+	label.textContent = task.text;
+	bar.append(label);
+	bar.tabIndex = 0;
+	bar.setAttribute("role", "button");
+	bar.setAttribute("aria-label", ariaLabel(state.locale, "aria_task", task.text));
+	bar.setAttribute("aria-pressed", String(selected));
+	bar.dataset["taskId"] = String(task.id);
+	bar.addEventListener("click", () => {
+		cbs.onSelect?.(task.id);
+	});
+	bar.addEventListener("keydown", (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			cbs.onSelect?.(task.id);
+		}
+	});
+	const handle = el("div");
+	handle.className = "gantt-resize-handle";
+	css(handle, {
+		position: "absolute",
+		right: "0",
+		top: "0",
+		width: "8px",
+		height: "100%",
+		cursor: "ew-resize",
+		zIndex: "1",
+		touchAction: "none"
+	});
+	bar.append(handle);
+	layer.insertBefore(bar, svgLayer);
+	const cleanupDrag = attachDrag(bar, handle, task, () => state.mapper, cbs);
+	let cleanupLinkHandles;
+	if (state.linkCreationEnabled) {
+		const barCenterY = layout.y + layout.height / 2;
+		const leftHandle = createEndpointHandle();
+		leftHandle.style.left = `${layout.x}px`;
+		leftHandle.style.top = `${barCenterY}px`;
+		layer.insertBefore(leftHandle, svgLayer);
+		const rightHandle = createEndpointHandle();
+		rightHandle.style.left = `${layout.x + layout.width}px`;
+		rightHandle.style.top = `${barCenterY}px`;
+		layer.insertBefore(rightHandle, svgLayer);
+		const cleanupLeft = attachLinkEndpointHandle(leftHandle, task.id, layout.x, barCenterY, svgLayer, layer, cbs);
+		const cleanupRight = attachLinkEndpointHandle(rightHandle, task.id, layout.x + layout.width, barCenterY, svgLayer, layer, cbs);
+		const onBarEnter = () => {
+			leftHandle.style.opacity = "1";
+			rightHandle.style.opacity = "1";
+			leftHandle.style.transform = "translate(-50%, -50%) scale(1)";
+			rightHandle.style.transform = "translate(-50%, -50%) scale(1)";
+		};
+		const onBarLeave = () => {
+			leftHandle.style.opacity = "0";
+			rightHandle.style.opacity = "0";
+			leftHandle.style.transform = "translate(-50%, -50%) scale(0.8)";
+			rightHandle.style.transform = "translate(-50%, -50%) scale(0.8)";
+		};
+		bar.addEventListener("mouseenter", onBarEnter);
+		bar.addEventListener("mouseleave", onBarLeave);
+		cleanupLinkHandles = () => {
+			cleanupLeft();
+			cleanupRight();
+			bar.removeEventListener("mouseenter", onBarEnter);
+			bar.removeEventListener("mouseleave", onBarLeave);
+		};
+	}
+	const entry = {
+		bar,
+		resizeHandle: handle,
+		cleanupDrag
+	};
+	if (cleanupLinkHandles !== void 0) entry.cleanupLinkHandles = cleanupLinkHandles;
+	registry.set(task.id, entry);
+}
+function renderMilestone(layer, svgLayer, task, layout, selectedId, registry, cbs, state) {
+	const selected = task.id === selectedId;
+	const size = MILESTONE_HALF * 2;
+	const diamond = el("div");
+	diamond.className = `gantt-milestone${selected ? " gantt-shape--selected" : ""}`;
+	css(diamond, {
+		position: "absolute",
+		left: `${layout.x - MILESTONE_HALF}px`,
+		top: `${layout.y + (layout.height - size) / 2}px`,
+		width: `${size}px`,
+		height: `${size}px`,
+		background: "var(--gantt-milestone)",
+		transform: "rotate(45deg)",
+		cursor: "pointer",
+		zIndex: "4"
+	});
+	diamond.tabIndex = 0;
+	diamond.setAttribute("role", "button");
+	diamond.setAttribute("aria-label", ariaLabel(state.locale, "aria_milestone", 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);
+		}
+	});
+	const labelEl = el("span");
+	css(labelEl, {
+		position: "absolute",
+		left: "50%",
+		top: "110%",
+		transform: "translate(-50%, 0) rotate(-45deg)",
+		fontSize: "var(--gantt-font-size-xs)",
+		fontWeight: "var(--gantt-font-weight-semibold)",
+		color: "var(--gantt-milestone)",
+		whiteSpace: "nowrap",
+		pointerEvents: "none"
+	});
+	labelEl.textContent = task.text;
+	diamond.append(labelEl);
+	layer.insertBefore(diamond, svgLayer);
+	bindMilestoneTask(diamond, task);
+	const dummy = el("div");
+	const cleanupDrag = attachMilestoneClick(diamond, task.id, cbs);
+	let cleanupLinkHandles;
+	if (state.linkCreationEnabled) {
+		const diamondCenterY = layout.y + layout.height / 2;
+		const linkHandle = createEndpointHandle();
+		linkHandle.style.left = `${layout.x}px`;
+		linkHandle.style.top = `${diamondCenterY}px`;
+		linkHandle.style.background = "var(--gantt-milestone)";
+		layer.insertBefore(linkHandle, svgLayer);
+		const cleanupLink = attachLinkEndpointHandle(linkHandle, task.id, layout.x, diamondCenterY, svgLayer, layer, cbs);
+		const onDiamondEnter = () => {
+			linkHandle.style.opacity = "1";
+			linkHandle.style.transform = "translate(-50%, -50%) scale(1)";
+		};
+		const onDiamondLeave = () => {
+			linkHandle.style.opacity = "0";
+			linkHandle.style.transform = "translate(-50%, -50%) scale(0.8)";
+		};
+		diamond.addEventListener("mouseenter", onDiamondEnter);
+		diamond.addEventListener("mouseleave", onDiamondLeave);
+		cleanupLinkHandles = () => {
+			cleanupLink();
+			diamond.removeEventListener("mouseenter", onDiamondEnter);
+			diamond.removeEventListener("mouseleave", onDiamondLeave);
+		};
+	}
+	const entry = {
+		bar: diamond,
+		resizeHandle: dummy,
+		cleanupDrag
+	};
+	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);
+}
+//#endregion
+//#region src/gantt-chart/vanilla/utils.ts
+function buildTaskIndex(tasks) {
+	const index = /* @__PURE__ */ new Map();
+	for (let i = 0; i < tasks.length; i++) {
+		const task = tasks[i];
+		if (task !== void 0) index.set(task.id, i);
+	}
+	return index;
+}
+function buildSpecialDayIndex(specialDays) {
+	const map = /* @__PURE__ */ new Map();
+	for (const specialDay of specialDays) {
+		const parsed = SpecialDaySchema.parse(specialDay);
+		const isoDate = toIsoDate(parseDate(parsed.date));
+		map.set(isoDate, {
+			kind: parsed.kind,
+			...parsed.label === void 0 ? {} : { label: parsed.label },
+			...parsed.className === void 0 ? {} : { className: parsed.className }
+		});
+	}
+	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();
+	for (const day of days) {
+		if (!Number.isInteger(day) || day < 0 || day > 6) throw new Error("weekendDays must contain integers in range 0..6");
+		normalized.add(day);
+	}
+	return normalized;
+}
+function getExpandableTaskIds(tasks) {
+	const roots = buildTaskTree(tasks);
+	const expandableIds = /* @__PURE__ */ new Set();
+	const stack = [...roots];
+	while (stack.length > 0) {
+		const node = stack.pop();
+		if (node === void 0) continue;
+		if (node.children.length > 0) expandableIds.add(node.id);
+		for (const child of node.children) stack.push(child);
+	}
+	return expandableIds;
+}
+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);
+	return expandedIds;
+}
+//#endregion
+//#region src/gantt-chart/vanilla/splitter.ts
+const MIN_PANE_WIDTH$1 = 96;
+function attachSplitter(splitterHandle, leftPane, container, timelineMinWidth, onDragEnd) {
+	splitterHandle.addEventListener("pointerdown", (e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startWidth = Number.parseFloat(leftPane.style.width) || 0;
+		function onMove(me) {
+			let newWidth = startWidth + (me.clientX - startX);
+			const hostWidth = container.clientWidth;
+			if (hostWidth > 0) newWidth = Math.max(MIN_PANE_WIDTH$1, Math.min(newWidth, hostWidth - timelineMinWidth));
+			newWidth = Math.max(MIN_PANE_WIDTH$1, newWidth);
+			leftPane.style.width = `${newWidth}px`;
+			leftPane.style.minWidth = `${newWidth}px`;
+			leftPane.style.maxWidth = `${newWidth}px`;
+		}
+		function onUp() {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+			onDragEnd(Number.parseFloat(leftPane.style.width));
+		}
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+	});
+}
+const DESKTOP_MIN_RATIO = .25;
+const DESKTOP_MAX_RATIO = .4;
+const MIN_PANE_WIDTH = 96;
+function computeLeftPaneWidth(options) {
+	const { hostWidth, defaultWidth, userSplitWidth, explicitOptWidth, responsiveSplitPane, mobileBreakpoint, mobileLeftPaneMinWidth, mobileLeftPaneMaxRatio, timelineMinWidth } = options;
+	let width = defaultWidth;
+	if (hostWidth <= 0) return width;
+	if (userSplitWidth !== null) width = userSplitWidth;
+	else if (explicitOptWidth !== void 0) width = explicitOptWidth;
+	else if (responsiveSplitPane && hostWidth <= mobileBreakpoint) {
+		const ratioWidth = Math.floor(hostWidth * mobileLeftPaneMaxRatio);
+		width = Math.min(defaultWidth, Math.max(mobileLeftPaneMinWidth, ratioWidth));
+	} else {
+		const minProportional = Math.floor(hostWidth * DESKTOP_MIN_RATIO);
+		const maxProportional = Math.floor(hostWidth * DESKTOP_MAX_RATIO);
+		width = Math.min(maxProportional, Math.max(defaultWidth, minProportional));
+	}
+	const maxAllowed = Math.max(MIN_PANE_WIDTH, hostWidth - timelineMinWidth);
+	width = Math.min(width, maxAllowed);
+	return Math.max(MIN_PANE_WIDTH, Math.floor(width));
+}
+//#endregion
+//#region src/gantt-chart/vanilla/gantt-chart.ts
+const HEADER_H = 52;
+const OVERSCAN = 4;
+var GanttChart = class {
+	#container;
+	#opts;
+	#input;
+	#scale;
+	#selectedId = null;
+	#scrollTop = 0;
+	#rafPending = false;
+	#rafId = null;
+	#destroyed = false;
+	#taskIndex;
+	#lastGridClick = null;
+	#userSplitWidth = null;
+	#height;
+	#locale;
+	#timelineMinWidth;
+	#columns;
+	#leftPaneDefaultWidth;
+	#weekendDays;
+	#specialDaysByDate;
+	#expandedIds;
+	#root;
+	#scrollEl;
+	#leftPane;
+	#leftBody;
+	#rightPane;
+	#rightHeader;
+	#rightPaneRefs;
+	#cbs;
+	#resizeObserver = null;
+	#columnResizeCleanup;
+	constructor(container, input, opts = {}) {
+		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.#locale = resolveChartLocale(opts.locale);
+		this.#columns = opts.gridColumns ?? gridColumnDefaults(this.#locale);
+		this.#leftPaneDefaultWidth = opts.leftPaneWidth ?? gridNaturalWidth(this.#columns);
+		this.#height = opts.height ?? 500;
+		this.#timelineMinWidth = opts.timelineMinWidth ?? 220;
+		this.#weekendDays = normalizeWeekendDays(opts.weekendDays ?? this.#locale.weekendDays);
+		this.#specialDaysByDate = buildSpecialDayIndex(opts.specialDays ?? []);
+		this.#expandedIds = getInitialExpandedIds(input.tasks);
+		this.#cbs = {
+			onSelect: (id) => {
+				if (this.#selectedId === id) return;
+				this.#selectedId = id;
+				opts.onSelect?.(this.#selectedId);
+				this.#scheduleRender();
+			},
+			onTaskDoubleClick: (payload) => {
+				opts.onTaskDoubleClick?.(payload);
+			},
+			onTaskEditIntent: (payload) => {
+				opts.onTaskEditIntent?.(payload);
+				opts.onTaskDoubleClick?.({
+					id: payload.id,
+					source: payload.source
+				});
+			},
+			onMove: (payload) => {
+				const iso = payload.startDate.toISOString().slice(0, 10);
+				this.#patchTask(payload.id, { start_date: iso });
+				opts.onMove?.(payload);
+				this.#scheduleRender();
+			},
+			onResize: (payload) => {
+				this.#patchTask(payload.id, { duration: payload.duration });
+				opts.onResize?.(payload);
+				this.#scheduleRender();
+			},
+			onLeftPaneWidthChange: (width) => {
+				opts.onLeftPaneWidthChange?.(width);
+			},
+			onGridColumnsChange: (updatedColumns) => {
+				opts.onGridColumnsChange?.(updatedColumns);
+			},
+			onLinkCreate: (payload) => {
+				opts.onLinkCreate?.(payload);
+			}
+		};
+		this.#buildDom();
+		this.#wireEvents();
+		container.append(this.#root);
+		this.#applyTheme();
+		this.#applyResponsivePaneStyles();
+		this.#setupResizeObserver();
+		this.#render();
+	}
+	update(newInput) {
+		this.#assertAlive();
+		validateLinkRefs(newInput.tasks, newInput.links);
+		detectCycles(newInput.tasks, newInput.links);
+		this.#input = newInput;
+		this.#taskIndex = buildTaskIndex(newInput.tasks);
+		this.#scheduleRender();
+	}
+	setScale(scale) {
+		this.#assertAlive();
+		this.#scale = scale;
+		this.#scheduleRender();
+	}
+	select(id) {
+		this.#assertAlive();
+		this.#selectedId = id;
+		this.#opts.onSelect?.(id);
+		if (this.#rafPending && this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+			this.#rafPending = false;
+		}
+		this.#render();
+	}
+	collapseAll() {
+		this.#assertAlive();
+		this.#expandedIds.clear();
+		if (this.#rafPending && this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+			this.#rafPending = false;
+		}
+		this.#render();
+	}
+	expandAll() {
+		this.#assertAlive();
+		this.#expandedIds.clear();
+		for (const id of getExpandableTaskIds(this.#input.tasks)) this.#expandedIds.add(id);
+		if (this.#rafPending && this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+			this.#rafPending = false;
+		}
+		this.#render();
+	}
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		this.#scrollEl.removeEventListener("scroll", this.#onScroll);
+		if (this.#resizeObserver !== null) this.#resizeObserver.disconnect();
+		else window.removeEventListener("resize", this.#applyResponsivePaneStyles);
+		if (this.#rafId !== null) cancelAnimationFrame(this.#rafId);
+		this.#columnResizeCleanup();
+		for (const { cleanupDrag, cleanupLinkHandles } of this.#rightPaneRefs.barRegistry.values()) {
+			cleanupDrag();
+			cleanupLinkHandles?.();
+		}
+		clearChildren(this.#container);
+	}
+	#patchTask(id, patch) {
+		const index = this.#taskIndex.get(id);
+		if (index === void 0) return;
+		const target = this.#input.tasks[index];
+		if (target === void 0) return;
+		this.#input.tasks[index] = {
+			...target,
+			...patch
+		};
+	}
+	#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?.({
+				id: payload.id,
+				source: "grid",
+				trigger: "double_click",
+				task: payload.task
+			});
+			return;
+		}
+		this.#lastGridClick = {
+			id: payload.id,
+			atMs: now
+		};
+		this.#cbs.onSelect?.(payload.id);
+	};
+	#onScroll = () => {
+		({scrollTop: this.#scrollTop} = this.#scrollEl);
+		this.#scheduleRender();
+	};
+	#applyResponsivePaneStyles = () => {
+		const computedWidth = computeLeftPaneWidth({
+			hostWidth: Math.max(0, this.#container.clientWidth),
+			defaultWidth: this.#leftPaneDefaultWidth,
+			userSplitWidth: this.#userSplitWidth,
+			explicitOptWidth: this.#opts.leftPaneWidth,
+			responsiveSplitPane: this.#opts.responsiveSplitPane ?? true,
+			mobileBreakpoint: this.#opts.mobileBreakpoint ?? 768,
+			mobileLeftPaneMinWidth: this.#opts.mobileLeftPaneMinWidth ?? 140,
+			mobileLeftPaneMaxRatio: this.#opts.mobileLeftPaneMaxRatio ?? .45,
+			timelineMinWidth: this.#timelineMinWidth
+		});
+		this.#leftPane.style.width = `${computedWidth}px`;
+		this.#leftPane.style.minWidth = `${computedWidth}px`;
+		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);
+		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 containerH = this.#height - HEADER_H;
+		const rowCount = allRows.length;
+		const startIndex = Math.max(0, Math.floor(this.#scrollTop / ROW_HEIGHT) - OVERSCAN);
+		const endIndex = Math.min(rowCount - 1, Math.ceil((this.#scrollTop + containerH) / ROW_HEIGHT) + OVERSCAN - 1);
+		const paddingTop = startIndex * ROW_HEIGHT;
+		const paddingBottom = Math.max(0, (rowCount - 1 - endIndex) * ROW_HEIGHT);
+		return {
+			input: this.#input,
+			scale: this.#scale,
+			highlightLinkedDependenciesOnSelect: this.#opts.highlightLinkedDependenciesOnSelect ?? false,
+			linkCreationEnabled: this.#opts.linkCreationEnabled ?? false,
+			expandedIds: this.#expandedIds,
+			selectedId: this.#selectedId,
+			scrollTop: this.#scrollTop,
+			allRows,
+			mapper,
+			viewportStart: vpStart,
+			viewportEnd: vpEnd,
+			totalWidth,
+			layouts,
+			links,
+			startIndex,
+			endIndex,
+			paddingTop,
+			paddingBottom,
+			showWeekends: this.#opts.showWeekends ?? true,
+			weekendDays: this.#weekendDays,
+			specialDaysByDate: this.#specialDaysByDate,
+			locale: this.#locale
+		};
+	}
+	#render = () => {
+		this.#rafPending = false;
+		const state = this.#computeState();
+		renderTimeHeader(this.#rightHeader, 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),
+			onRowClick: (payload) => {
+				this.#handleGridClick(payload);
+			},
+			onTaskEditIntent: (payload) => this.#cbs.onTaskEditIntent?.(payload),
+			onAdd: (id) => this.#cbs.onAdd?.({ parentId: id })
+		}, this.#columns);
+		renderRightPane(this.#rightPaneRefs, state, this.#cbs);
+	};
+	#scheduleRender() {
+		if (this.#rafPending || this.#destroyed) return;
+		this.#rafPending = true;
+		this.#rafId = requestAnimationFrame(this.#render);
+	}
+	#applyTheme() {
+		const theme = this.#opts.theme ?? "system";
+		this.#container.dataset["theme"] = theme;
+	}
+	#assertAlive() {
+		if (this.#destroyed) throw new GanttError("INSTANCE_DESTROYED", "Gantt instance was destroyed");
+	}
+	#buildDom() {
+		const root = el("div");
+		root.className = "gantt-root";
+		css(root, {
+			height: `${this.#height}px`,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: "var(--gantt-font)",
+			background: "var(--gantt-bg)"
+		});
+		this.#root = root;
+		const scrollEl = el("div");
+		css(scrollEl, {
+			flex: "1",
+			overflow: "auto",
+			position: "relative",
+			display: "flex"
+		});
+		root.append(scrollEl);
+		this.#scrollEl = scrollEl;
+		const leftPane = el("div");
+		leftPane.dataset["pane"] = "left";
+		css(leftPane, {
+			width: `${this.#leftPaneDefaultWidth}px`,
+			flexShrink: "0",
+			position: "sticky",
+			left: "0",
+			zIndex: "10",
+			background: "var(--gantt-bg)",
+			borderRight: "1px solid var(--gantt-border)"
+		});
+		this.#leftPane = leftPane;
+		const leftHeader = el("div");
+		css(leftHeader, {
+			position: "sticky",
+			top: "0",
+			zIndex: "11",
+			background: "var(--gantt-header-bg)"
+		});
+		const headerEl = buildLeftPaneHeader(this.#columns);
+		leftHeader.append(headerEl);
+		leftPane.append(leftHeader);
+		const leftBody = el("div");
+		leftPane.append(leftBody);
+		this.#leftBody = leftBody;
+		this.#columnResizeCleanup = setupColumnResize(headerEl, leftBody, this.#columns, (updated) => {
+			this.#cbs.onGridColumnsChange?.(updated);
+		});
+		scrollEl.append(leftPane);
+		const rightPane = el("div");
+		rightPane.dataset["pane"] = "right";
+		css(rightPane, {
+			flexShrink: "0",
+			position: "relative",
+			minWidth: `${this.#timelineMinWidth}px`
+		});
+		this.#rightPane = rightPane;
+		const rightHeader = el("div");
+		css(rightHeader, {
+			position: "sticky",
+			top: "0",
+			zIndex: "9",
+			background: "var(--gantt-header-bg)"
+		});
+		rightPane.append(rightHeader);
+		this.#rightHeader = rightHeader;
+		this.#rightPaneRefs = createRightPaneRefs();
+		rightPane.append(this.#rightPaneRefs.scrollContainer);
+		scrollEl.append(rightPane);
+		const splitterHandle = el("div");
+		splitterHandle.className = "gantt-splitter-handle";
+		css(splitterHandle, {
+			position: "absolute",
+			right: "0",
+			top: "0",
+			bottom: "0",
+			width: "4px",
+			cursor: "col-resize",
+			zIndex: "20"
+		});
+		leftPane.append(splitterHandle);
+		attachSplitter(splitterHandle, leftPane, this.#container, this.#timelineMinWidth, (finalWidth) => {
+			this.#userSplitWidth = finalWidth;
+			this.#cbs.onLeftPaneWidthChange?.(finalWidth);
+		});
+	}
+	#wireEvents() {
+		this.#rightPaneRefs.absoluteLayer.addEventListener("click", (event) => {
+			if (event.target.closest(".gantt-bar, .gantt-milestone, .gantt-resize-handle")) return;
+			this.#cbs.onSelect?.(null);
+		});
+		this.#root.addEventListener("keydown", (event) => {
+			if (event.key === "Escape" && this.#selectedId !== null) {
+				event.preventDefault();
+				this.#cbs.onSelect?.(null);
+			}
+		});
+		this.#scrollEl.addEventListener("scroll", this.#onScroll);
+	}
+	#setupResizeObserver() {
+		if (typeof ResizeObserver !== "undefined") {
+			this.#resizeObserver = new ResizeObserver(() => {
+				this.#applyResponsivePaneStyles();
+			});
+			this.#resizeObserver.observe(this.#container);
+		} else window.addEventListener("resize", this.#applyResponsivePaneStyles);
+	}
+};
+//#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 };
+
+//# sourceMappingURL=index.mjs.map