@ganttloom/gantt-core 0.4.0 → 0.4.3

package/dist/index.cjs

@@ -74,7 +74,8 @@ var DEFAULT_THEME = {
   backgroundColor: "#ffffff",
   fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
   fontSize: 12,
-  borderRadius: 4
+  borderRadius: 4,
+  borderColor: "#e2e8f0"
 };
 var DARK_THEME = {
   ...DEFAULT_THEME,
@@ -91,7 +92,8 @@ var DARK_THEME = {
   markerColor: "#a78bfa",
   selectionColor: "#38bdf8",
   textColor: "#e5e7eb",
-  backgroundColor: "#181c24"
+  backgroundColor: "#181c24",
+  borderColor: "#334155"
 };
 var DENSITY_PRESETS = {
   compact: { rowHeight: 26, barHeight: 16, headerHeight: 38, fontSize: 11 },
@@ -130,7 +132,8 @@ var CSS_VAR_NAMES = {
   backgroundColor: "--gantt-background-color",
   fontFamily: "--gantt-font-family",
   fontSize: "--gantt-font-size",
-  borderRadius: "--gantt-border-radius"
+  borderRadius: "--gantt-border-radius",
+  borderColor: "--gantt-border-color"
 };
 var PX_FIELDS = /* @__PURE__ */ new Set([
   "rowHeight",
@@ -556,20 +559,38 @@ function labelFor(date, viewMode) {
       const h = date.getHours();
       const period = h >= 12 ? "PM" : "AM";
       const h12 = h % 12 === 0 ? 12 : h % 12;
-      return `${h12} ${period}`;
+      return {
+        label: `${h12} ${period}`,
+        parentLabel: `${WEEKDAY_LABELS[date.getDay()]} ${date.getDate()} ${MONTH_LABELS[date.getMonth()]} ${date.getFullYear()}`
+      };
     }
     case "day":
-      return `${WEEKDAY_LABELS[date.getDay()]} ${date.getDate()}`;
+      return {
+        label: `${WEEKDAY_LABELS[date.getDay()]} ${date.getDate()}`,
+        parentLabel: `${MONTH_LABELS[date.getMonth()]} ${date.getFullYear()}`
+      };
     case "week":
-      return `${MONTH_LABELS[date.getMonth()]} ${date.getDate()}`;
+      return {
+        label: `${MONTH_LABELS[date.getMonth()]} ${date.getDate()}`,
+        parentLabel: `${MONTH_LABELS[date.getMonth()]} ${date.getFullYear()}`
+      };
     case "month":
-      return `${MONTH_LABELS[date.getMonth()]} ${date.getFullYear()}`;
+      return {
+        label: MONTH_LABELS[date.getMonth()] ?? "",
+        parentLabel: `${date.getFullYear()}`
+      };
     case "quarter": {
       const q = Math.floor(date.getMonth() / 3) + 1;
-      return `Q${q} ${date.getFullYear()}`;
+      return {
+        label: `Q${q}`,
+        parentLabel: `${date.getFullYear()}`
+      };
     }
     case "year":
-      return `${date.getFullYear()}`;
+      return {
+        label: `${date.getFullYear()}`,
+        parentLabel: ""
+      };
   }
 }
 function generateTicks(rangeStart, rangeEnd, viewMode, columnWidth, today = /* @__PURE__ */ new Date(), calendar) {
@@ -583,10 +604,12 @@ function generateTicks(rangeStart, rangeEnd, viewMode, columnWidth, today = /* @
   while (cursor.getTime() < rangeEnd.getTime() && guard < MAX_TICKS) {
     guard++;
     const x = (cursor.getTime() - rangeStart.getTime()) * scale;
+    const labels = labelFor(cursor, viewMode);
     ticks.push({
       date: new Date(cursor.getTime()),
       x,
-      label: labelFor(cursor, viewMode),
+      label: labels.label,
+      parentLabel: labels.parentLabel,
       isWeekend: dayLevel ? isWeekend(cursor) : false,
       isNonWorking: viewMode === "hour" && calendar?.workingHours ? !isWorkingTime(cursor, calendar) : dayLevel ? isNonWorkingDay(cursor, calendar) : false,
       isToday: isSameDay(cursor, today) && dayLevel,
@@ -827,11 +850,14 @@ function computeLayout(input) {
   let paddedStart = addUnit(rawRangeStart, viewMode, -1);
   let paddedEnd = addUnit(rawRangeEnd, viewMode, 1);
   const minUnits = MIN_VISIBLE_UNITS[viewMode];
+  let targetMinUnits = minUnits;
+  if (input.timelineViewportWidth && input.timelineViewportWidth > 0) {
+    targetMinUnits = Math.max(targetMinUnits, Math.ceil(input.timelineViewportWidth / columnWidth));
+  }
   const currentUnits = (paddedEnd.getTime() - paddedStart.getTime()) / approxUnitMs(viewMode);
-  if (currentUnits < minUnits) {
-    const deficit = minUnits - currentUnits;
-    paddedStart = addUnit(paddedStart, viewMode, -Math.ceil(deficit / 2));
-    paddedEnd = addUnit(paddedEnd, viewMode, Math.floor(deficit / 2));
+  if (currentUnits < targetMinUnits) {
+    const deficit = targetMinUnits - currentUnits;
+    paddedEnd = addUnit(paddedEnd, viewMode, Math.ceil(deficit));
   }
   const rows = [];
   const bars = [];
@@ -949,6 +975,7 @@ function computeLayout(input) {
     (t) => ({
       x: t.x,
       label: t.label,
+      parentLabel: t.parentLabel,
       isWeekend: t.isWeekend,
       isNonWorking: t.isNonWorking,
       isToday: t.isToday,
@@ -1226,6 +1253,9 @@ var GanttRenderer = class {
     this.svg = svgEl("svg");
     this.svg.classList.add("gantt-svg");
     this.timelineScroll.appendChild(this.headerContainer);
+    if (this.options.readonly) {
+      this.root.classList.add("gantt-readonly");
+    }
     this.timelineScroll.appendChild(this.svg);
     this.root.appendChild(this.gridPanel);
     this.root.appendChild(this.timelineScroll);
@@ -1293,7 +1323,10 @@ var GanttRenderer = class {
     const cell = el("div", "gantt-grid-header-cell");
     cell.style.position = "relative";
     if (col.width) cell.style.width = `${col.width}px`;
-    cell.textContent = col.title;
+    const titleSpan = document.createElement("span");
+    titleSpan.className = "gantt-cell-text";
+    titleSpan.textContent = col.title;
+    cell.appendChild(titleSpan);
     if (col.sortable) {
       cell.classList.add("gantt-grid-header-cell-sortable");
       const active = sort?.columnId === col.id;
@@ -1335,7 +1368,7 @@ var GanttRenderer = class {
         evt.preventDefault();
         evt.stopPropagation();
         const startX = evt.clientX;
-        const startWidth = col.width ?? cell.getBoundingClientRect().width;
+        const startWidth = cell.getBoundingClientRect().width;
         const onMove = (moveEvt) => {
           const newWidth = Math.max(30, startWidth + (moveEvt.clientX - startX));
           cell.style.width = `${newWidth}px`;
@@ -1388,9 +1421,11 @@ var GanttRenderer = class {
       const cell = el("div", "gantt-grid-cell");
       if (col.width) cell.style.width = `${col.width}px`;
       if (col.align) cell.style.textAlign = col.align;
-      const rawValue = col.accessor ? col.accessor(task) : colIndex === 0 ? task.name : "";
+      const isTreeColumn = col.id === "name" || !columns.some((c) => c.id === "name") && colIndex === 0;
+      console.log(`Column ${col.id}: isTreeColumn=${isTreeColumn}, colIndex=${colIndex}, hasNameCol=${columns.some((c) => c.id === "name")}`);
+      const rawValue = col.accessor ? col.accessor(task) : isTreeColumn ? task.name : task[col.id] ?? "";
       const textValue = rawValue === null || rawValue === void 0 ? "" : String(rawValue);
-      if (colIndex === 0) {
+      if (isTreeColumn) {
         cell.dataset.ganttNameCell = task.id;
         cell.dataset.ganttNameValue = textValue;
         const indent = el("span", "gantt-indent");
@@ -1399,17 +1434,27 @@ var GanttRenderer = class {
         if (row.hasChildren) {
           const toggle = el("button", "gantt-toggle");
           toggle.type = "button";
+          toggle.className = `gantt-toggle ${row.collapsed ? "collapsed" : "expanded"}`;
           toggle.dataset.ganttToggle = task.id;
           toggle.setAttribute("aria-label", row.collapsed ? "Expand" : "Collapse");
           toggle.textContent = row.collapsed ? "\u25B8" : "\u25BE";
           cell.appendChild(toggle);
         }
+        const addChildBtn = el("button", "gantt-add-child");
+        addChildBtn.type = "button";
+        addChildBtn.dataset.ganttAddChild = task.id;
+        addChildBtn.setAttribute("aria-label", "Add child task");
+        addChildBtn.textContent = "+";
+        cell.appendChild(addChildBtn);
       }
       const rendered = col.render ? col.render(task) : void 0;
       if (rendered instanceof HTMLElement) {
         cell.appendChild(rendered);
       } else if (typeof rendered === "string") {
-        cell.appendChild(document.createTextNode(rendered));
+        const span = document.createElement("span");
+        span.className = "gantt-cell-text";
+        span.textContent = rendered;
+        cell.appendChild(span);
       } else {
         const href = col.getHref ? col.getHref(task) : null;
         if (href && isSafeHref(href)) {
@@ -1418,10 +1463,13 @@ var GanttRenderer = class {
           anchor.target = col.linkTarget ?? "_blank";
           anchor.rel = "noopener noreferrer";
           anchor.textContent = textValue;
+          anchor.className = "gantt-cell-text";
           cell.appendChild(anchor);
         } else {
-          const textNode = document.createTextNode(textValue);
-          cell.appendChild(textNode);
+          const span = document.createElement("span");
+          span.className = "gantt-cell-text";
+          span.textContent = textValue;
+          cell.appendChild(span);
         }
       }
       rowEl.appendChild(cell);
@@ -1452,8 +1500,8 @@ var GanttRenderer = class {
     const bodyGroup = svgEl("g");
     this.renderGridLines(bodyGroup, model);
     this.renderRowBackgrounds(bodyGroup, model, startY, endY);
-    this.renderBars(bodyGroup, model, tasks, startY, endY);
     this.renderLinks(bodyGroup, model, startY, endY);
+    this.renderBars(bodyGroup, model, tasks, startY, endY);
     this.renderMarkers(bodyGroup, model);
     this.svg.appendChild(bodyGroup);
     this.renderHeader(model);
@@ -1520,15 +1568,21 @@ var GanttRenderer = class {
         clipRect.setAttribute("height", String(model.height));
         clipPath.appendChild(clipRect);
         defs.appendChild(clipPath);
-        const label = svgEl("text");
-        label.setAttribute("x", String(marker.x + 4));
-        label.setAttribute("y", "12");
-        label.setAttribute("clip-path", `url(#${clipId})`);
-        label.setAttribute("fill", marker.color);
-        label.setAttribute("font-size", String(model.theme.fontSize));
-        label.setAttribute("font-family", model.theme.fontFamily);
-        label.textContent = marker.label;
-        group.appendChild(label);
+        const fo = svgEl("foreignObject");
+        fo.setAttribute("x", String(marker.x + 4));
+        fo.setAttribute("y", "0");
+        fo.setAttribute("width", String(cellWidth > 8 ? cellWidth - 8 : cellWidth));
+        fo.setAttribute("height", String(model.height));
+        const div = document.createElement("div");
+        div.style.color = marker.color;
+        div.style.fontSize = `${model.theme.fontSize}px`;
+        div.style.fontFamily = model.theme.fontFamily;
+        div.style.whiteSpace = "normal";
+        div.style.overflowWrap = "break-word";
+        div.style.paddingTop = "4px";
+        div.textContent = marker.label;
+        fo.appendChild(div);
+        group.appendChild(fo);
       }
     });
   }
@@ -1549,6 +1603,60 @@ var GanttRenderer = class {
     headerGroup.appendChild(bg);
     const defs = svgEl("defs");
     const ticks = model.ticks;
+    const parentGroups = [];
+    let currentGroup = null;
+    for (const tick of ticks) {
+      if (!currentGroup || currentGroup.label !== tick.parentLabel) {
+        currentGroup = { x: tick.x, label: tick.parentLabel };
+        parentGroups.push(currentGroup);
+      }
+    }
+    const hasParentTier = parentGroups.some((g) => g.label !== "");
+    const bottomTierY = hasParentTier ? model.headerHeight / 2 : 0;
+    const tierHeight = hasParentTier ? model.headerHeight / 2 : model.headerHeight;
+    if (hasParentTier) {
+      for (let i = 0; i < parentGroups.length; i++) {
+        const group = parentGroups[i];
+        const nextX = parentGroups[i + 1]?.x ?? model.width;
+        const cellWidth = nextX - group.x;
+        const fo = svgEl("foreignObject");
+        fo.setAttribute("x", String(group.x + 4));
+        fo.setAttribute("y", "0");
+        fo.setAttribute("width", String(Math.max(0, cellWidth - 4)));
+        fo.setAttribute("height", String(tierHeight));
+        const div = document.createElement("div");
+        div.style.color = themedFill("textColor", model.theme.textColor);
+        div.style.fontSize = `${model.theme.fontSize * 0.95}px`;
+        div.style.fontFamily = model.theme.fontFamily;
+        div.style.fontWeight = "600";
+        div.style.whiteSpace = "nowrap";
+        div.style.overflow = "hidden";
+        div.style.textOverflow = "ellipsis";
+        div.style.display = "flex";
+        div.style.alignItems = "center";
+        div.style.justifyContent = "center";
+        div.style.height = "100%";
+        div.textContent = group.label;
+        fo.appendChild(div);
+        headerGroup.appendChild(fo);
+        const border = svgEl("line");
+        border.setAttribute("x1", String(group.x));
+        border.setAttribute("x2", String(nextX));
+        border.setAttribute("y1", String(tierHeight));
+        border.setAttribute("y2", String(tierHeight));
+        border.style.stroke = themedFill("borderColor", model.theme.borderColor ?? "#e2e8f0");
+        headerGroup.appendChild(border);
+        if (i > 0) {
+          const sep = svgEl("line");
+          sep.setAttribute("x1", String(group.x));
+          sep.setAttribute("x2", String(group.x));
+          sep.setAttribute("y1", "0");
+          sep.setAttribute("y2", String(tierHeight));
+          sep.style.stroke = themedFill("borderColor", model.theme.borderColor ?? "#e2e8f0");
+          headerGroup.appendChild(sep);
+        }
+      }
+    }
     for (let i = 0; i < ticks.length; i++) {
       const tick = ticks[i];
       const cellWidth = (ticks[i + 1]?.x ?? model.width) - tick.x;
@@ -1557,20 +1665,30 @@ var GanttRenderer = class {
       clipPath.setAttribute("id", clipId);
       const clipRect = svgEl("rect");
       clipRect.setAttribute("x", String(tick.x));
-      clipRect.setAttribute("y", "0");
+      clipRect.setAttribute("y", String(bottomTierY));
       clipRect.setAttribute("width", String(Math.max(0, cellWidth)));
-      clipRect.setAttribute("height", String(model.headerHeight));
+      clipRect.setAttribute("height", String(tierHeight));
       clipPath.appendChild(clipRect);
       defs.appendChild(clipPath);
-      const text = svgEl("text");
-      text.setAttribute("x", String(tick.x + 4));
-      text.setAttribute("y", String(model.headerHeight - 8));
-      text.setAttribute("clip-path", `url(#${clipId})`);
-      text.style.fill = themedFill("textColor", model.theme.textColor);
-      text.setAttribute("font-size", String(model.theme.fontSize));
-      text.setAttribute("font-family", model.theme.fontFamily);
-      text.textContent = tick.label;
-      headerGroup.appendChild(text);
+      const fo = svgEl("foreignObject");
+      fo.setAttribute("x", String(tick.x + 4));
+      fo.setAttribute("y", String(bottomTierY));
+      fo.setAttribute("width", String(cellWidth > 8 ? cellWidth - 8 : cellWidth));
+      fo.setAttribute("height", String(tierHeight));
+      const div = document.createElement("div");
+      div.style.color = themedFill("textColor", model.theme.textColor);
+      div.style.fontSize = `${model.theme.fontSize}px`;
+      div.style.fontFamily = model.theme.fontFamily;
+      div.style.whiteSpace = "normal";
+      div.style.overflowWrap = "break-word";
+      div.style.display = "flex";
+      div.style.alignItems = hasParentTier ? "center" : "flex-end";
+      div.style.justifyContent = "center";
+      div.style.paddingBottom = hasParentTier ? "0" : "4px";
+      div.style.height = "100%";
+      div.textContent = tick.label;
+      fo.appendChild(div);
+      headerGroup.appendChild(fo);
     }
     headerGroup.insertBefore(defs, headerGroup.firstChild);
     this.headerSvg.appendChild(headerGroup);
@@ -1613,8 +1731,8 @@ var GanttRenderer = class {
       g.setAttribute("role", "button");
       if (task) {
         const progress = Math.round(task.progress ?? 0);
-        const label2 = `${task.name}, ${task.start.toDateString()} to ${task.end.toDateString()}, ${progress}% complete`;
-        g.setAttribute("aria-label", label2);
+        const label = `${task.name}, ${task.start.toDateString()} to ${task.end.toDateString()}, ${progress}% complete`;
+        g.setAttribute("aria-label", label);
       }
     }
     if (bar.baseline) {
@@ -1662,17 +1780,15 @@ var GanttRenderer = class {
         `rotate(45, 0, ${bar.height / 2})`
       );
       g.appendChild(diamond);
-      const label2 = svgEl("text");
-      label2.setAttribute("x", String(size / 2 + 8));
-      label2.setAttribute("y", String(bar.height / 2 + 4));
-      label2.style.fill = themedFill("textColor", model.theme.textColor);
-      label2.setAttribute("font-size", String(model.theme.fontSize));
-      label2.setAttribute("font-family", model.theme.fontFamily);
-      label2.textContent = bar.label;
-      g.appendChild(label2);
-      return g;
-    }
-    if (bar.segments && bar.segments.length > 0) {
+      const label = svgEl("text");
+      label.setAttribute("x", String(size / 2 + 8));
+      label.setAttribute("y", String(bar.height / 2 + 4));
+      label.style.fill = themedFill("textColor", model.theme.textColor);
+      label.setAttribute("font-size", String(model.theme.fontSize));
+      label.setAttribute("font-family", model.theme.fontFamily);
+      label.textContent = bar.label;
+      g.appendChild(label);
+    } else if (bar.segments && bar.segments.length > 0) {
       bar.segments.forEach((seg, i) => {
         const segRect = svgEl("rect");
         segRect.setAttribute("x", String(seg.x));
@@ -1745,29 +1861,31 @@ var GanttRenderer = class {
       selectionOutline.setAttribute("stroke-width", "2");
       g.appendChild(selectionOutline);
     }
-    const handleWidth = 6;
-    const leftHandle = svgEl("rect");
-    leftHandle.setAttribute("x", "0");
-    leftHandle.setAttribute("y", "0");
-    leftHandle.setAttribute("width", String(handleWidth));
-    leftHandle.setAttribute("height", String(bar.height));
-    leftHandle.setAttribute("fill", "transparent");
-    leftHandle.dataset.ganttHandle = "left";
-    leftHandle.dataset.ganttHandleFor = bar.taskId;
-    leftHandle.style.cursor = "ew-resize";
-    g.appendChild(leftHandle);
-    const rightHandle = svgEl("rect");
-    rightHandle.setAttribute("x", String(Math.max(0, bar.width - handleWidth)));
-    rightHandle.setAttribute("y", "0");
-    rightHandle.setAttribute("width", String(handleWidth));
-    rightHandle.setAttribute("height", String(bar.height));
-    rightHandle.setAttribute("fill", "transparent");
-    rightHandle.dataset.ganttHandle = "right";
-    rightHandle.dataset.ganttHandleFor = bar.taskId;
-    rightHandle.style.cursor = "ew-resize";
-    g.appendChild(rightHandle);
+    if (!bar.isMilestone) {
+      const handleWidth = 6;
+      const leftHandle = svgEl("rect");
+      leftHandle.setAttribute("x", "0");
+      leftHandle.setAttribute("y", "0");
+      leftHandle.setAttribute("width", String(handleWidth));
+      leftHandle.setAttribute("height", String(bar.height));
+      leftHandle.setAttribute("fill", "transparent");
+      leftHandle.dataset.ganttHandle = "left";
+      leftHandle.dataset.ganttHandleFor = bar.taskId;
+      leftHandle.style.cursor = "ew-resize";
+      g.appendChild(leftHandle);
+      const rightHandle = svgEl("rect");
+      rightHandle.setAttribute("x", String(Math.max(0, bar.width - handleWidth)));
+      rightHandle.setAttribute("y", "0");
+      rightHandle.setAttribute("width", String(handleWidth));
+      rightHandle.setAttribute("height", String(bar.height));
+      rightHandle.setAttribute("fill", "transparent");
+      rightHandle.dataset.ganttHandle = "right";
+      rightHandle.dataset.ganttHandleFor = bar.taskId;
+      rightHandle.style.cursor = "ew-resize";
+      g.appendChild(rightHandle);
+    }
     const connector = svgEl("circle");
-    connector.setAttribute("cx", String(bar.width));
+    connector.setAttribute("cx", String(bar.width + (bar.isMilestone ? 10 : 0)));
     connector.setAttribute("cy", String(bar.height / 2));
     connector.setAttribute("r", "4");
     connector.style.fill = themedFill("linkColor", model.theme.linkColor);
@@ -1775,14 +1893,16 @@ var GanttRenderer = class {
     connector.dataset.ganttConnectorSide = "right";
     connector.style.cursor = "crosshair";
     g.appendChild(connector);
-    const label = svgEl("text");
-    label.setAttribute("x", String(bar.width + 6));
-    label.setAttribute("y", String(bar.height / 2 + 4));
-    label.style.fill = themedFill("textColor", model.theme.textColor);
-    label.setAttribute("font-size", String(model.theme.fontSize));
-    label.setAttribute("font-family", model.theme.fontFamily);
-    label.textContent = bar.label;
-    g.appendChild(label);
+    if (!bar.isMilestone) {
+      const label = svgEl("text");
+      label.setAttribute("x", String(bar.width + 6));
+      label.setAttribute("y", String(bar.height / 2 + 4));
+      label.style.fill = themedFill("textColor", model.theme.textColor);
+      label.setAttribute("font-size", String(model.theme.fontSize));
+      label.setAttribute("font-family", model.theme.fontFamily);
+      label.textContent = bar.label;
+      g.appendChild(label);
+    }
     if (bar.deadlineX !== void 0) {
       const markerX = bar.deadlineX - bar.x;
       const flag = svgEl("g");
@@ -1840,10 +1960,20 @@ var GanttRenderer = class {
     for (const link of model.links) {
       const fromBar = barByTaskId.get(link.fromId);
       const toBar = barByTaskId.get(link.toId);
-      const relevantY = toBar?.y ?? fromBar?.y ?? 0;
+      if (!fromBar || !toBar) continue;
+      const relevantY = toBar.y ?? fromBar.y ?? 0;
       if (relevantY < startY || relevantY > endY) continue;
+      const type = link.type ?? "FS";
+      const x1 = type.startsWith("F") ? fromBar.x + fromBar.width : fromBar.x;
+      const y1 = fromBar.y + fromBar.height / 2;
+      const x2 = type.endsWith("F") ? toBar.x + toBar.width : toBar.x;
+      const y2 = toBar.y + toBar.height / 2;
+      const offset = 10;
+      const routingX1 = type.startsWith("F") ? x1 + offset : x1 - offset;
+      const routingX2 = type.endsWith("F") ? x2 + offset : x2 - offset;
+      const d = `M ${x1} ${y1} L ${routingX1} ${y1} C ${routingX1 + (routingX2 - routingX1) / 2} ${y1}, ${routingX1 + (routingX2 - routingX1) / 2} ${y2}, ${routingX2} ${y2} L ${x2} ${y2}`;
       const path = svgEl("path");
-      path.setAttribute("d", link.path);
+      path.setAttribute("d", d);
       path.setAttribute("fill", "none");
       path.style.stroke = link.isCritical ? themedFill("criticalColor", model.theme.criticalColor) : themedFill("linkColor", model.theme.linkColor);
       path.setAttribute("stroke-width", link.isCritical ? "2" : "1.5");
@@ -2241,6 +2371,12 @@ var InteractionController = class {
       const toggleId = target.closest("[data-gantt-toggle]")?.dataset.ganttToggle;
       if (toggleId) {
         this.callbacks.onToggleCollapse(toggleId);
+        return;
+      }
+      const addChildId = target.closest("[data-gantt-add-child]")?.dataset.ganttAddChild;
+      if (addChildId && this.callbacks.onAddChild) {
+        this.callbacks.onAddChild(addChildId);
+        return;
       }
     };
     this.onContextMenu = (evt) => {
@@ -2700,6 +2836,7 @@ var _GanttChart = class _GanttChart {
       markers: options.markers,
       pagination: options.pagination,
       snapToUnit: options.snapToUnit,
+      headerPosition: options.headerPosition ?? "top",
       onDateChange: options.onDateChange,
       onProgressChange: options.onProgressChange,
       onDependencyCreate: options.onDependencyCreate,
@@ -2732,6 +2869,7 @@ var _GanttChart = class _GanttChart {
       this.darkMediaQuery.addEventListener?.("change", this.handleSchemeChange);
     }
     this.renderer = new GanttRenderer(this.container, {
+      readonly: this.options.readonly,
       keyboardAccessible: this.options.keyboardAccessible,
       showAssigneeAvatars: this.options.showAssigneeAvatars,
       virtualScroll: this.options.virtualScroll,
@@ -2741,6 +2879,13 @@ var _GanttChart = class _GanttChart {
       onRowReorder: this.options.onTaskReorder ? (draggedId, targetId, position) => this.handleRowReorder(draggedId, targetId, position) : void 0,
       onSortClick: (columnId) => this.handleSortClick(columnId)
     });
+    if (this.options.headerPosition && this.renderer?.root) {
+      this.renderer.root.dataset.ganttHeaderPosition = this.options.headerPosition;
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.scheduleRender());
+      this.resizeObserver.observe(this.renderer.timelineScroll);
+    }
     this.interactions = new InteractionController(
       this.renderer.svg,
       this.renderer.gridPanel,
@@ -2779,7 +2924,8 @@ var _GanttChart = class _GanttChart {
         } : void 0,
         onSelectAll: this.options.selectable ? () => this.selectAllVisible() : void 0,
         onJumpToStart: () => this.scrollToRangeStart(),
-        onJumpToEnd: () => this.scrollToRangeEnd()
+        onJumpToEnd: () => this.scrollToRangeEnd(),
+        onAddChild: (parentId) => this.handleAddChild(parentId)
       },
       {
         readonly: this.options.readonly,
@@ -3069,6 +3215,35 @@ var _GanttChart = class _GanttChart {
     };
     this.runCommand(cmd);
   }
+  handleAddChild(parentId) {
+    const parent = this.tasks.find((t) => t.id === parentId);
+    if (!parent) return;
+    const newTask = {
+      id: `task-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+      name: "New task",
+      start: new Date(parent.start.getTime()),
+      end: new Date(parent.start.getTime() + MS_PER_DAY),
+      parentId: parent.id
+    };
+    const cmd = {
+      label: "task-create",
+      do: () => {
+        const index = this.tasks.findIndex((t) => t.id === parentId);
+        if (index >= 0) this.tasks.splice(index + 1, 0, newTask);
+        else this.tasks.push(newTask);
+        this.emitter.emit("task-create", { task: newTask });
+        this.options.onTaskCreate?.(newTask);
+        this.emitter.emit("tasks-change", { tasks: this.getTasks() });
+        this.scheduleRender();
+      },
+      undo: () => {
+        this.tasks = this.tasks.filter((t) => t.id !== newTask.id);
+        this.emitter.emit("tasks-change", { tasks: this.getTasks() });
+        this.scheduleRender();
+      }
+    };
+    this.runCommand(cmd);
+  }
   handleBarClick(taskId, modifiers) {
     const task = this.tasks.find((t) => t.id === taskId);
     if (!task) return;
@@ -3300,6 +3475,12 @@ var _GanttChart = class _GanttChart {
     if (partial.gridPanelWidth !== void 0) {
       this.container.style.setProperty("--gantt-grid-panel-width", `${partial.gridPanelWidth}px`);
     }
+    if ("headerPosition" in partial) {
+      this.options.headerPosition = partial.headerPosition ?? "top";
+      if (this.renderer?.root) {
+        this.renderer.root.dataset.ganttHeaderPosition = this.options.headerPosition;
+      }
+    }
     Object.assign(this.options, partial);
     this.scheduleRender();
   }
@@ -3387,9 +3568,11 @@ var _GanttChart = class _GanttChart {
   }
   computeModel() {
     const pagination = this.options.pagination ? { pageSize: this.options.pagination.pageSize, page: this.currentPage } : void 0;
+    const timelineViewportWidth = HAS_DOM && this.renderer ? this.renderer.timelineScroll.clientWidth : void 0;
     return computeLayout({
       tasks: this.tasks,
       dependencies: this.dependencies,
+      timelineViewportWidth,
       viewMode: this.options.viewMode,
       columnWidth: this.columnWidth,
       theme: this.theme,
@@ -3472,7 +3655,35 @@ var _GanttChart = class _GanttChart {
     return this.renderer?.toSVGString() ?? "";
   }
   async rasterizeSVG(svgString, width, height) {
-    const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+    let cleanSvgString = svgString;
+    if (typeof DOMParser !== "undefined") {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svgString, "image/svg+xml");
+      const foreignObjects = Array.from(doc.querySelectorAll("foreignObject"));
+      for (const fo of foreignObjects) {
+        const x = fo.getAttribute("x") || "0";
+        const y = fo.getAttribute("y") || "0";
+        const w = parseFloat(fo.getAttribute("width") || "0");
+        const h = parseFloat(fo.getAttribute("height") || "0");
+        const div = fo.querySelector("div");
+        if (div) {
+          const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          text.setAttribute("x", String(parseFloat(x) + w / 2));
+          text.setAttribute("y", String(parseFloat(y) + h / 2 + 4));
+          text.setAttribute("text-anchor", "middle");
+          text.setAttribute("fill", div.style.color || "#000");
+          text.setAttribute("font-size", div.style.fontSize || "12px");
+          text.setAttribute("font-family", div.style.fontFamily || "sans-serif");
+          text.setAttribute("font-weight", div.style.fontWeight || "normal");
+          text.textContent = div.textContent;
+          fo.parentNode?.replaceChild(text, fo);
+        } else {
+          fo.parentNode?.removeChild(fo);
+        }
+      }
+      cleanSvgString = new XMLSerializer().serializeToString(doc);
+    }
+    const svgBlob = new Blob([cleanSvgString], { type: "image/svg+xml;charset=utf-8" });
     const url = URL.createObjectURL(svgBlob);
     try {
       return await new Promise((resolve, reject) => {