gantt-renderer 0.1.2 → 0.2.0

package/dist/index.mjs

@@ -20,43 +20,95 @@ const SpecialDaySchema = z.object({
 	className: z.string().min(1).optional()
 });
 const TaskSchema = z.object({
+	/** 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}$/, "Expected YYYY-MM-DD"),
+	/** Duration in hours; 0 = milestone */
+	durationHours: z.number().int().min(0),
+	/** 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),
+	/** 0–100 completion percentage (integer) */
+	percentComplete: z.number().int().min(0).max(100).default(0),
+	/**
+	* Task type: `'task'`, `'project'`, or `'milestone'`.
+	*
+	* - `'task'` — A regular task with a colored bar.
+	* - `'project'` — A summary/group row with a colored bar.
+	* - `'milestone'` — A zero-duration marker rendered as a diamond.
+	*
+	* @default 'task'
+	*/
 	type: TaskTypeSchema.default("task"),
-	/** Initial expanded state (only relevant for parent nodes) */
+	/**
+	* Initial expanded state for tree hierarchy.
+	* When `false`, children of this task are hidden on initial render.
+	* Only relevant for tasks with child tasks.
+	*
+	* @default true
+	*/
 	open: z.boolean().default(true),
+	/** Optional CSS color value for the task bar. Overrides the default color assignment. */
 	color: z.string().optional()
 });
 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(),
+	/**
+	* 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")
 });
 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([])
 });
-/** 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. */
+/**
+* Parses without throwing; returns `null` on validation failure.
+*
+* @param raw - The unvalidated input from the consumer.
+* @returns The parsed {@link GanttInput} or `null` when the input is invalid.
+*/
 function safeParseGanttInput(raw) {
 	const result = GanttInputSchema.safeParse(raw);
 	return result.success ? result.data : null;
 }
 //#endregion
 //#region src/gantt-chart/errors.ts
+/**
+* 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";
@@ -68,7 +120,10 @@ var GanttError = class extends Error {
 /**
 * 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.
 */
 function buildTaskTree(tasks) {
 	const map = /* @__PURE__ */ new Map();
@@ -97,7 +152,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,7 +167,12 @@ 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;
 }
@@ -116,8 +180,10 @@ function isParent(node) {
 //#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.
+*
+* @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,8 +221,11 @@ 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.
+*
+* @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.
 */
 function validateLinkRefs(tasks, links) {
 	const ids = new Set(tasks.map((t) => t.id));
@@ -167,76 +236,6 @@ function validateLinkRefs(tasks, links) {
 }
 //#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,
@@ -289,24 +288,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 +311,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 +344,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 +489,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. */
+/**
+* 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 +614,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 +641,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",
@@ -547,8 +695,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 +724,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) {
@@ -588,13 +744,17 @@ function nextScaleBoundary(date, scale) {
 /**
 * 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,11 +764,11 @@ 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;
 		}
 	};
 }
@@ -628,13 +788,17 @@ 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;
@@ -654,8 +818,8 @@ function computeLayout(rows, mapper) {
 			});
 			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,
@@ -673,51 +837,39 @@ 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);
+		const end = addHours(start, task.durationHours);
 		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)];
+	return [addHours(new Date(minMs), -paddingHours), addHours(new Date(maxMs), paddingHours)];
 }
 //#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:
@@ -725,6 +877,11 @@ function routeLinks(links, layouts) {
 *   SS = source.start  → target.start
 *   FF = source.finish → target.finish
 *   SF = source.start  → target.finish
+*
+* @param type - The link type determining start/end anchor points.
+* @param src - The source bar layout.
+* @param tgt - The target bar layout.
+* @returns An ordered array of `Point` vertices.
 */
 function route(type, src, tgt) {
 	let sx, tx;
@@ -804,8 +961,39 @@ function route(type, src, tgt) {
 		}
 	];
 }
+/**
+* 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) => {
+		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);
+}
 //#endregion
 //#region src/gantt-chart/vanilla/dom/helpers.ts
+/**
+* Batches style assignments; avoids repeated style recalculations.
+*
+* @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 ?? "";
+}
 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 +1001,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
+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 +1070,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 +1146,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,10 +1167,6 @@ 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
 const DEFAULT_GRID_COLUMNS = [
@@ -949,17 +1176,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 +1197,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,9 +1230,21 @@ 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);
 }
@@ -1017,6 +1259,13 @@ 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);
@@ -1026,65 +1275,18 @@ function gridNaturalWidth(columns) {
 //#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 toTask$1(row) {
+	return {
+		id: row.id,
+		text: row.text,
+		startDate: row.startDate,
+		durationHours: row.durationHours,
+		percentComplete: row.percentComplete,
+		type: row.type,
+		open: row.open,
+		...row.parent === void 0 ? {} : { parent: row.parent },
+		...row.color === void 0 ? {} : { color: row.color }
+	};
 }
 function buildTreeNameCell(row, expandedIds, cbs) {
 	const hasChildren = isParent(row);
@@ -1162,7 +1364,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",
@@ -1177,20 +1379,79 @@ function buildAddButton(row, cbs, locale) {
 	});
 	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.onSelect(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 +1507,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");
@@ -1306,6 +1572,10 @@ const ARROW_SIZE = 6;
 /**
 * Creates the SVG overlay element. Call once; pass to updateDependencyLayer on each render.
 * Also creates a hidden ghost-line path used during link-creation drags.
+*
+* @param totalWidth - The total pixel width of the SVG viewport.
+* @param totalHeight - The total pixel height of the SVG viewport.
+* @returns An `SVGSVGElement` ready to be inserted into the DOM.
 */
 function createDependencyLayer(totalWidth, totalHeight) {
 	const svg = document.createElementNS(NS, "svg");
@@ -1357,7 +1627,13 @@ 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");
@@ -1372,6 +1648,8 @@ function showGhostLine(svg, x1, y1, x2, y2, valid) {
 }
 /**
 * 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,6 +1661,13 @@ 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.
 */
 function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTaskId, highlightLinkedDependenciesOnSelect) {
 	setAttrs(svg, {
@@ -1418,12 +1703,31 @@ function updateDependencyLayer(svg, links, totalWidth, totalHeight, selectedTask
 }
 //#endregion
 //#region src/gantt-chart/vanilla/interaction/drag.ts
+function toTask(row) {
+	return {
+		id: row.id,
+		text: row.text,
+		startDate: row.startDate,
+		durationHours: row.durationHours,
+		percentComplete: row.percentComplete,
+		type: row.type,
+		open: row.open,
+		...row.parent === void 0 ? {} : { parent: row.parent },
+		...row.color === void 0 ? {} : { color: row.color }
+	};
+}
 /**
 * 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) {
@@ -1434,14 +1738,14 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 		} catch {}
 		cbs.onSelect?.(task.id);
 		const startX = e.clientX;
-		const originDate = parseDate(task.start_date);
+		const originDate = parseDate(task.startDate);
 		const mapper = getMapper();
 		function onMove(me) {
 			const dx = me.clientX - startX;
-			const days = Math.round(mapper.widthToDuration(dx));
+			const hours = Math.round(mapper.widthToDuration(dx));
 			cbs.onMove?.({
 				id: task.id,
-				startDate: addDays(originDate, days)
+				startDate: addHours(originDate, hours)
 			});
 		}
 		function onUp() {
@@ -1461,14 +1765,14 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 			resizeHandleEl.setPointerCapture(e.pointerId);
 		} catch {}
 		const startX = e.clientX;
-		const origDur = task.duration;
+		const origDur = task.durationHours;
 		const mapper = getMapper();
 		function onMove(me) {
 			const dx = me.clientX - startX;
-			const daysDelta = Math.round(mapper.widthToDuration(dx));
+			const hoursDelta = Math.round(mapper.widthToDuration(dx));
 			cbs.onResize?.({
 				id: task.id,
-				duration: Math.max(1, origDur + daysDelta)
+				durationHours: Math.max(1, origDur + hoursDelta)
 			});
 		}
 		function onUp() {
@@ -1483,7 +1787,7 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 		cbs.onTaskEditIntent?.({
 			id: task.id,
 			source: "bar",
-			trigger: "double_click",
+			trigger: "doubleClick",
 			task: toTask(task)
 		});
 	}
@@ -1498,7 +1802,11 @@ function attachDrag(barEl, resizeHandleEl, task, getMapper, cbs) {
 }
 /**
 * 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() {
@@ -1511,7 +1819,7 @@ function attachMilestoneClick(diamondEl, taskId, cbs) {
 			cbs.onTaskEditIntent?.({
 				id: taskId,
 				source: "milestone",
-				trigger: "double_click",
+				trigger: "doubleClick",
 				task
 			});
 		}
@@ -1526,24 +1834,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
 /**
 * 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 +1895,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");
@@ -1618,7 +1923,11 @@ const BAR_COLOR = {
 	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 +1936,7 @@ function createRightPaneRefs() {
 	css(stripeContainer, { position: "relative" });
 	css(absoluteLayer, {
 		position: "absolute",
-		top: "0",
+		top: "52px",
 		left: "0"
 	});
 	scrollContainer.append(stripeContainer);
@@ -1641,94 +1950,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;
@@ -1820,7 +2043,7 @@ 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", () => {
@@ -1907,7 +2130,7 @@ 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) => {
@@ -1967,8 +2190,98 @@ 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 } 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);
 }
 //#endregion
 //#region src/gantt-chart/vanilla/utils.ts
@@ -1980,6 +2293,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 +2309,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();
@@ -2076,10 +2389,23 @@ function computeLeftPaneWidth(options) {
 //#region src/gantt-chart/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;
+	#input = null;
 	#scale;
 	#selectedId = null;
 	#scrollTop = 0;
@@ -2107,14 +2433,18 @@ 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 = {}) {
 		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.#taskIndex = /* @__PURE__ */ new Map();
 		this.#locale = resolveChartLocale(opts.locale);
 		this.#columns = opts.gridColumns ?? gridColumnDefaults(this.#locale);
 		this.#leftPaneDefaultWidth = opts.leftPaneWidth ?? gridNaturalWidth(this.#columns);
@@ -2122,7 +2452,7 @@ 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) => {
 				if (this.#selectedId === id) return;
@@ -2142,12 +2472,12 @@ var GanttChart = class {
 			},
 			onMove: (payload) => {
 				const iso = payload.startDate.toISOString().slice(0, 10);
-				this.#patchTask(payload.id, { start_date: iso });
+				this.#patchTask(payload.id, { startDate: iso });
 				opts.onMove?.(payload);
 				this.#scheduleRender();
 			},
 			onResize: (payload) => {
-				this.#patchTask(payload.id, { duration: payload.duration });
+				this.#patchTask(payload.id, { durationHours: payload.durationHours });
 				opts.onResize?.(payload);
 				this.#scheduleRender();
 			},
@@ -2167,21 +2497,44 @@ 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.#expandedIds = getInitialExpandedIds(newInput.tasks);
+		if (this.#rafPending && this.#rafId !== null) {
+			cancelAnimationFrame(this.#rafId);
+			this.#rafId = null;
+			this.#rafPending = false;
+		}
+		this.#render();
 	}
+	/**
+	* Switches the time scale and re-renders.
+	*
+	* @param scale - The new {@link TimeScale} to display.
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
 	setScale(scale) {
 		this.#assertAlive();
 		this.#scale = scale;
 		this.#scheduleRender();
 	}
+	/**
+	* 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;
@@ -2193,6 +2546,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 +2561,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 +2577,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;
@@ -2229,6 +2596,7 @@ var GanttChart = class {
 		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];
@@ -2246,7 +2614,7 @@ var GanttChart = class {
 			this.#cbs.onTaskEditIntent?.({
 				id: payload.id,
 				source: "grid",
-				trigger: "double_click",
+				trigger: "doubleClick",
 				task: payload.task
 			});
 			return;
@@ -2278,13 +2646,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,7 +2660,7 @@ 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,
@@ -2318,7 +2686,9 @@ 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);
 		renderLeftPane(this.#leftBody, state, {
 			onToggle: (id) => {
@@ -2457,6 +2827,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, TaskSchema, TaskTypeSchema, addDays, addHours, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, diffHours, flattenTree, formatLabel, formatWeekNumber, gridColumnDefaults, gridNaturalWidth, gridTemplateColumns, isParent, parseDate, parseGanttInput, resolveChartLocale, routeLinks, safeParseGanttInput, validateLinkRefs, visibleColumns };
 
 //# sourceMappingURL=index.mjs.map