@ganttloom/gantt-core 0.2.1 → 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,
@@ -663,6 +686,29 @@ function computeProgressRollup(node) {
   }
   node.computedProgress = totalWeight > 0 ? weightedSum / totalWeight : 0;
 }
+function sortValue(node, col) {
+  if (!col) return null;
+  if (col.accessor) return col.accessor(node.task) ?? null;
+  return col.id === "name" ? node.task.name : null;
+}
+function compareValues(a, b) {
+  if (a === null && b === null) return 0;
+  if (a === null) return 1;
+  if (b === null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function sortTree(roots, columns, sort) {
+  if (!sort) return;
+  const col = columns.find((c) => c.id === sort.columnId);
+  const dir = sort.direction === "desc" ? -1 : 1;
+  const compare = (a, b) => dir * compareValues(sortValue(a, col), sortValue(b, col));
+  const sortLevel = (nodes) => {
+    nodes.sort(compare);
+    for (const node of nodes) sortLevel(node.children);
+  };
+  sortLevel(roots);
+}
 function flatten(roots) {
   const out = [];
   const stack = [];
@@ -749,6 +795,14 @@ function linkPath(from, to) {
   const c2y = to.y;
   return `M ${from.x} ${from.y} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${to.x} ${to.y}`;
 }
+var MIN_VISIBLE_UNITS = {
+  hour: 8,
+  day: 7,
+  week: 6,
+  month: 6,
+  quarter: 4,
+  year: 5
+};
 function computeLayout(input) {
   const {
     tasks,
@@ -764,7 +818,8 @@ function computeLayout(input) {
     markers = [],
     autoRollupProgress = false,
     selectedTaskIds,
-    pagination
+    pagination,
+    sort = null
   } = input;
   validateInputs(tasks, dependencies);
   const { roots, nodeById } = buildTree(tasks);
@@ -772,6 +827,7 @@ function computeLayout(input) {
   if (autoRollupProgress) {
     for (const root of roots) computeProgressRollup(root);
   }
+  sortTree(roots, columns, sort);
   let visibleRoots = roots;
   if (pagination && pagination.pageSize > 0) {
     const start = Math.max(0, (pagination.page - 1) * pagination.pageSize);
@@ -791,8 +847,18 @@ function computeLayout(input) {
   const now = Date.now();
   const rawRangeStart = rangeMin === null ? new Date(now) : new Date(rangeMin);
   const rawRangeEnd = rangeMax === null ? new Date(now + 1) : new Date(rangeMax);
-  const paddedStart = addUnit(rawRangeStart, viewMode, -1);
-  const paddedEnd = addUnit(rawRangeEnd, viewMode, 1);
+  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 < targetMinUnits) {
+    const deficit = targetMinUnits - currentUnits;
+    paddedEnd = addUnit(paddedEnd, viewMode, Math.ceil(deficit));
+  }
   const rows = [];
   const bars = [];
   const barByTaskId = /* @__PURE__ */ new Map();
@@ -909,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,
@@ -943,7 +1010,8 @@ function computeLayout(input) {
     columns,
     theme,
     markers: renderMarkers,
-    rangeStart: paddedStart
+    rangeStart: paddedStart,
+    sort
   };
 }
 
@@ -1140,6 +1208,7 @@ var GanttRenderer = class {
     this.lastModel = null;
     this.lastTasks = [];
     this.lastColumns = [];
+    this.lastExplicitThemeKeys = /* @__PURE__ */ new Set();
     this.onGridDoubleClick = (evt) => {
       if (!this.options.onRenameCommit) return;
       const target = evt.target;
@@ -1177,8 +1246,16 @@ var GanttRenderer = class {
     this.root = el("div", "gantt-root");
     this.gridPanel = el("div", "gantt-grid-panel");
     this.timelineScroll = el("div", "gantt-timeline-scroll");
+    this.headerContainer = el("div", "gantt-timeline-header");
+    this.headerSvg = svgEl("svg");
+    this.headerSvg.classList.add("gantt-header-svg");
+    this.headerContainer.appendChild(this.headerSvg);
     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);
@@ -1194,9 +1271,14 @@ var GanttRenderer = class {
     this.lastTasks = tasks;
     this.lastColumns = columns;
     const cssVars = explicitThemeToCssVars(explicitTheme);
-    for (const key of Object.keys(cssVars)) {
+    const newKeys = new Set(Object.keys(cssVars));
+    for (const key of this.lastExplicitThemeKeys) {
+      if (!newKeys.has(key)) this.root.style.removeProperty(key);
+    }
+    for (const key of newKeys) {
       this.root.style.setProperty(key, cssVars[key]);
     }
+    this.lastExplicitThemeKeys = newKeys;
     this.renderGridPanel(model, tasks, columns);
     this.renderTimeline(model, tasks);
   }
@@ -1224,7 +1306,7 @@ var GanttRenderer = class {
     const header = el("div", "gantt-grid-header-row");
     header.style.height = `${model.headerHeight}px`;
     for (const col of columns) {
-      header.appendChild(this.renderHeaderCell(col, columns));
+      header.appendChild(this.renderHeaderCell(col, columns, model.sort));
     }
     this.gridPanel.appendChild(header);
     const body = el("div", "gantt-grid-body");
@@ -1237,11 +1319,26 @@ var GanttRenderer = class {
     });
     this.gridPanel.appendChild(body);
   }
-  renderHeaderCell(col, columns) {
+  renderHeaderCell(col, columns, sort) {
     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;
+      const indicator = el("span", "gantt-sort-indicator");
+      indicator.textContent = active ? sort.direction === "asc" ? " \u25B2" : " \u25BC" : "";
+      cell.appendChild(indicator);
+      cell.addEventListener("click", (evt) => {
+        const target = evt.target;
+        if (target.closest(".gantt-col-resize-handle")) return;
+        this.options.onSortClick?.(col.id);
+      });
+    }
     if (this.options.onColumnReorder) {
       cell.draggable = true;
       cell.style.cursor = "grab";
@@ -1271,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`;
@@ -1324,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");
@@ -1335,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)) {
@@ -1354,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);
@@ -1368,8 +1480,8 @@ var GanttRenderer = class {
   renderTimeline(model, tasks) {
     this.svg.replaceChildren();
     this.svg.setAttribute("width", String(model.width));
-    this.svg.setAttribute("height", String(model.headerHeight + model.height));
-    this.svg.setAttribute("viewBox", `0 0 ${model.width} ${model.headerHeight + model.height}`);
+    this.svg.setAttribute("height", String(model.height));
+    this.svg.setAttribute("viewBox", `0 0 ${model.width} ${model.height}`);
     const defs = svgEl("defs");
     const marker = svgEl("marker");
     marker.setAttribute("id", this.markerDefsId);
@@ -1386,11 +1498,10 @@ var GanttRenderer = class {
     this.svg.appendChild(defs);
     const { startY, endY } = this.getViewportRowRange(model);
     const bodyGroup = svgEl("g");
-    bodyGroup.setAttribute("transform", `translate(0, ${model.headerHeight})`);
     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);
@@ -1457,22 +1568,31 @@ 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);
       }
     });
   }
   renderHeader(model) {
-    let headerGroup = this.svg.querySelector(".gantt-header-group");
-    if (headerGroup) headerGroup.remove();
-    headerGroup = svgEl("g");
+    this.headerSvg.replaceChildren();
+    this.headerSvg.setAttribute("width", String(model.width));
+    this.headerSvg.setAttribute("height", String(model.headerHeight));
+    this.headerSvg.setAttribute("viewBox", `0 0 ${model.width} ${model.headerHeight}`);
+    this.headerContainer.style.height = `${model.headerHeight}px`;
+    const headerGroup = svgEl("g");
     headerGroup.setAttribute("class", "gantt-header-group");
     const bg = svgEl("rect");
     bg.setAttribute("x", "0");
@@ -1483,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;
@@ -1491,23 +1665,33 @@ 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.svg.appendChild(headerGroup);
+    this.headerSvg.appendChild(headerGroup);
   }
   /**
    * Invisible full-width hit-test rects, one per row, behind the bars. Lets
@@ -1542,18 +1726,13 @@ var GanttRenderer = class {
     g.setAttribute("class", "gantt-bar");
     g.dataset.ganttBar = bar.taskId;
     g.setAttribute("transform", `translate(${bar.x}, ${bar.y})`);
-    if (task?.notes) {
-      const title = svgEl("title");
-      title.textContent = task.notes;
-      g.appendChild(title);
-    }
     if (this.options.keyboardAccessible) {
       g.setAttribute("tabindex", "0");
       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) {
@@ -1601,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));
@@ -1684,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);
@@ -1714,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");
@@ -1779,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");
@@ -1791,8 +1982,30 @@ var GanttRenderer = class {
       group.appendChild(path);
     }
   }
+  /**
+   * The header and body are separate DOM elements at runtime (so plain CSS `position: sticky`
+   * can pin the header - see the constructor's doc comment), but exports need one self-contained
+   * SVG with both, laid out exactly as the original single-SVG version was.
+   */
   toSVGString() {
-    return new XMLSerializer().serializeToString(this.svg);
+    const headerHeight = this.lastModel?.headerHeight ?? 0;
+    const width = this.lastModel?.width ?? 0;
+    const bodyHeight = this.lastModel?.height ?? 0;
+    const combined = svgEl("svg");
+    combined.setAttribute("xmlns", SVG_NS);
+    combined.setAttribute("width", String(width));
+    combined.setAttribute("height", String(headerHeight + bodyHeight));
+    combined.setAttribute("viewBox", `0 0 ${width} ${headerHeight + bodyHeight}`);
+    for (const child of Array.from(this.headerSvg.children)) {
+      combined.appendChild(child.cloneNode(true));
+    }
+    const bodyGroup = svgEl("g");
+    bodyGroup.setAttribute("transform", `translate(0, ${headerHeight})`);
+    for (const child of Array.from(this.svg.children)) {
+      bodyGroup.appendChild(child.cloneNode(true));
+    }
+    combined.appendChild(bodyGroup);
+    return new XMLSerializer().serializeToString(combined);
   }
   destroy() {
     if (this.scrollListener) {
@@ -2158,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) => {
@@ -2171,13 +2390,17 @@ var InteractionController = class {
       }
     };
     this.onSvgDoubleClick = (evt) => {
-      if (!this.callbacks.onLinkDblClick) return;
       const target = evt.target;
       const linkPath2 = target.closest("[data-gantt-link]");
       const key = linkPath2?.dataset.ganttLink;
-      if (!key) return;
-      const [fromId, toId] = key.split("->");
-      if (fromId && toId) this.callbacks.onLinkDblClick(fromId, toId);
+      if (key && this.callbacks.onLinkDblClick) {
+        const [fromId, toId] = key.split("->");
+        if (fromId && toId) this.callbacks.onLinkDblClick(fromId, toId);
+        return;
+      }
+      const barGroup = target.closest("[data-gantt-bar]");
+      const taskId = barGroup?.dataset.ganttBar;
+      if (taskId && this.callbacks.onBarDblClick) this.callbacks.onBarDblClick(taskId);
     };
     this.onPointerDown = (evt) => {
       const target = evt.target;
@@ -2440,6 +2663,119 @@ var InteractionController = class {
   }
 };
 
+// src/tooltip.ts
+function formatDate(d) {
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+function defaultTooltipContent(task) {
+  const el2 = document.createElement("div");
+  const title = document.createElement("div");
+  title.className = "gantt-tooltip-title";
+  title.textContent = task.name;
+  el2.appendChild(title);
+  const dates = document.createElement("div");
+  dates.className = "gantt-tooltip-row";
+  dates.textContent = task.isMilestone ? formatDate(task.start) : `${formatDate(task.start)} \u2192 ${formatDate(task.end)}`;
+  el2.appendChild(dates);
+  if (task.progress !== void 0) {
+    const progress = document.createElement("div");
+    progress.className = "gantt-tooltip-row";
+    progress.textContent = `${Math.round(task.progress)}% complete`;
+    el2.appendChild(progress);
+  }
+  if (task.assignees && task.assignees.length > 0) {
+    const assignees = document.createElement("div");
+    assignees.className = "gantt-tooltip-row";
+    assignees.textContent = task.assignees.map((a) => a.name).join(", ");
+    el2.appendChild(assignees);
+  }
+  if (task.notes) {
+    const notes = document.createElement("div");
+    notes.className = "gantt-tooltip-notes";
+    notes.textContent = task.notes;
+    el2.appendChild(notes);
+  }
+  return el2;
+}
+var Tooltip = class {
+  constructor(getOptions, getTask) {
+    this.svg = null;
+    this.hoveredTaskId = null;
+    this.onPointerOver = (evt) => {
+      if (!this.getOptions().enabled) return;
+      const target = evt.target;
+      const barGroup = target.closest("[data-gantt-bar]");
+      const taskId = barGroup?.dataset.ganttBar;
+      if (!taskId || taskId === this.hoveredTaskId) return;
+      const task = this.getTask(taskId);
+      if (!task) return;
+      const { render } = this.getOptions();
+      const content = render ? render(task) : defaultTooltipContent(task);
+      if (content === null || content === void 0) {
+        this.hide();
+        return;
+      }
+      this.el.replaceChildren();
+      if (content instanceof HTMLElement) {
+        this.el.appendChild(content);
+      } else {
+        this.el.textContent = content;
+      }
+      this.hoveredTaskId = taskId;
+      this.el.style.display = "block";
+      this.position(evt.clientX, evt.clientY);
+    };
+    this.onPointerMove = (evt) => {
+      if (this.hoveredTaskId === null) return;
+      this.position(evt.clientX, evt.clientY);
+    };
+    this.onPointerOut = (evt) => {
+      const related = evt.relatedTarget;
+      const target = evt.target;
+      const leftBarGroup = target.closest("[data-gantt-bar]");
+      if (related && leftBarGroup?.contains(related)) return;
+      this.hide();
+    };
+    this.getOptions = getOptions;
+    this.getTask = getTask;
+    this.el = document.createElement("div");
+    this.el.className = "gantt-tooltip";
+    this.el.setAttribute("role", "tooltip");
+    this.el.style.display = "none";
+    document.body.appendChild(this.el);
+  }
+  attach(svg) {
+    this.svg = svg;
+    svg.addEventListener("pointerover", this.onPointerOver);
+    svg.addEventListener("pointermove", this.onPointerMove);
+    svg.addEventListener("pointerout", this.onPointerOut);
+  }
+  position(clientX, clientY) {
+    const OFFSET = 12;
+    const rect = this.el.getBoundingClientRect();
+    const viewportW = window.innerWidth;
+    const viewportH = window.innerHeight;
+    let left = clientX + OFFSET;
+    let top = clientY + OFFSET;
+    if (left + rect.width > viewportW) left = clientX - OFFSET - rect.width;
+    if (top + rect.height > viewportH) top = clientY - OFFSET - rect.height;
+    this.el.style.left = `${Math.max(0, left)}px`;
+    this.el.style.top = `${Math.max(0, top)}px`;
+  }
+  hide() {
+    this.hoveredTaskId = null;
+    this.el.style.display = "none";
+  }
+  destroy() {
+    if (this.svg) {
+      this.svg.removeEventListener("pointerover", this.onPointerOver);
+      this.svg.removeEventListener("pointermove", this.onPointerMove);
+      this.svg.removeEventListener("pointerout", this.onPointerOut);
+    }
+    this.el.remove();
+  }
+};
+
 // src/index.ts
 var HAS_DOM = typeof document !== "undefined" && typeof window !== "undefined";
 var DEFAULT_COLUMNS = [{ id: "name", title: "Name" }];
@@ -2459,6 +2795,9 @@ var _GanttChart = class _GanttChart {
     this.history = null;
     this.renderer = null;
     this.interactions = null;
+    this.tooltip = null;
+    this.resizeObserver = null;
+    this.sort = null;
     this.renderModel = null;
     this.rafHandle = null;
     this.currentPage = 1;
@@ -2481,6 +2820,8 @@ var _GanttChart = class _GanttChart {
       showCriticalPath: options.showCriticalPath ?? false,
       showBaseline: options.showBaseline ?? false,
       showDeadlines: options.showDeadlines ?? true,
+      showTooltip: options.showTooltip ?? true,
+      autoFitToViewport: options.autoFitToViewport ?? false,
       showAssigneeAvatars: options.showAssigneeAvatars ?? false,
       enableHistory: options.enableHistory ?? false,
       keyboardAccessible: options.keyboardAccessible ?? false,
@@ -2495,19 +2836,23 @@ 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,
       onDependencyRemove: options.onDependencyRemove,
       onDependencyDblClick: options.onDependencyDblClick,
       onTaskClick: options.onTaskClick,
+      onTaskDblClick: options.onTaskDblClick,
       onGroupToggle: options.onGroupToggle,
       onContextMenu: options.onContextMenu,
       onTaskCreate: options.onTaskCreate,
       onColumnResize: options.onColumnResize,
       onColumnReorder: options.onColumnReorder,
       onTaskReorder: options.onTaskReorder,
-      onSelectionChange: options.onSelectionChange
+      onSelectionChange: options.onSelectionChange,
+      onSortChange: options.onSortChange,
+      renderTooltip: options.renderTooltip
     };
     if (this.options.enableHistory) {
       this.history = new HistoryManager((state) => this.emitter.emit("history-change", state));
@@ -2524,14 +2869,23 @@ 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,
       onRenameCommit: (taskId, name) => this.updateTask(taskId, { name }),
       onColumnResize: this.options.onColumnResize ? (columnId, width) => this.handleColumnResize(columnId, width) : void 0,
       onColumnReorder: this.options.onColumnReorder ? (order) => this.handleColumnReorder(order) : void 0,
-      onRowReorder: this.options.onTaskReorder ? (draggedId, targetId, position) => this.handleRowReorder(draggedId, targetId, position) : void 0
+      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,
@@ -2551,7 +2905,17 @@ var _GanttChart = class _GanttChart {
         onCreateTaskDrag: this.options.onTaskCreate ? (rowTaskId, startXPx, endXPx) => this.handleCreateTaskDrag(rowTaskId, startXPx, endXPx) : void 0,
         onLinkDblClick: this.options.onDependencyDblClick ? (fromId, toId) => {
           const dep = this.dependencies.find((d) => d.fromId === fromId && d.toId === toId);
-          if (dep) this.options.onDependencyDblClick?.(dep);
+          if (dep) {
+            this.emitter.emit("dependency-dblclick", dep);
+            this.options.onDependencyDblClick?.(dep);
+          }
+        } : void 0,
+        onBarDblClick: this.options.onTaskDblClick ? (taskId) => {
+          const task = this.tasks.find((t) => t.id === taskId);
+          if (task) {
+            this.emitter.emit("task-dblclick", { task });
+            this.options.onTaskDblClick?.(task);
+          }
         } : void 0,
         onContextMenu: this.options.onContextMenu ? (taskId, evt) => {
           const task = this.tasks.find((t) => t.id === taskId);
@@ -2560,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,
@@ -2570,6 +2935,17 @@ var _GanttChart = class _GanttChart {
         pxPerMs: () => pxPerMs(this.options.viewMode, this.columnWidth)
       }
     );
+    this.tooltip = new Tooltip(
+      () => ({ enabled: this.options.showTooltip, render: this.options.renderTooltip }),
+      (taskId) => this.tasks.find((t) => t.id === taskId)
+    );
+    this.tooltip.attach(this.renderer.svg);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.options.autoFitToViewport) this.scheduleRender();
+      });
+      this.resizeObserver.observe(this.container);
+    }
   }
   handleMove(taskId, dxMs) {
     if (dxMs === 0) return;
@@ -2839,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;
@@ -2974,6 +3379,24 @@ var _GanttChart = class _GanttChart {
     this.options.onColumnReorder?.(order);
     this.scheduleRender();
   }
+  /** Cycles a sortable column's header through asc -> desc -> none; clicking a different column starts it fresh at asc. */
+  handleSortClick(columnId) {
+    if (this.sort?.columnId === columnId) {
+      this.setSort(columnId, this.sort.direction === "asc" ? "desc" : null);
+    } else {
+      this.setSort(columnId, "asc");
+    }
+  }
+  /** Sorts siblings at every tree level by a column's value (see GanttColumn.sortable); `direction: null`/omitted `columnId` clears it. */
+  setSort(columnId, direction = "asc") {
+    this.sort = columnId && direction ? { columnId, direction } : null;
+    this.emitter.emit("sort-change", { sort: this.sort });
+    this.options.onSortChange?.(this.sort);
+    this.scheduleRender();
+  }
+  getSort() {
+    return this.sort;
+  }
   handleRowReorder(draggedId, targetId, position) {
     const draggedIndex = this.tasks.findIndex((t) => t.id === draggedId);
     const targetIndex = this.tasks.findIndex((t) => t.id === targetId);
@@ -3040,13 +3463,24 @@ var _GanttChart = class _GanttChart {
     this.scheduleRender();
   }
   setOptions(partial) {
-    if (partial.colorScheme !== void 0) this.colorScheme = partial.colorScheme;
-    if (partial.theme !== void 0) this.explicitTheme = partial.theme;
-    if (partial.theme !== void 0 || partial.colorScheme !== void 0) {
+    const hasTheme = "theme" in partial;
+    const hasColorScheme = "colorScheme" in partial;
+    if (hasColorScheme) this.colorScheme = partial.colorScheme ?? "auto";
+    if (hasTheme) this.explicitTheme = partial.theme;
+    if (hasTheme || hasColorScheme) {
       this.theme = mergeTheme(this.explicitTheme, this.colorScheme);
     }
-    if (partial.columns) this.columns = partial.columns;
+    if ("columns" in partial) this.columns = partial.columns ?? this.columns;
     if (partial.columnWidth !== void 0) this.columnWidth = partial.columnWidth;
+    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();
   }
@@ -3134,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,
@@ -3149,7 +3585,8 @@ var _GanttChart = class _GanttChart {
       markers: this.options.markers,
       autoRollupProgress: this.options.autoRollupProgress,
       selectedTaskIds: this.options.selectable ? this.selectedTaskIds : void 0,
-      pagination
+      pagination,
+      sort: this.sort
     });
   }
   scheduleRender(immediate = false) {
@@ -3164,6 +3601,7 @@ var _GanttChart = class _GanttChart {
     });
   }
   doRender() {
+    if (this.options.autoFitToViewport) this.applyAutoFit();
     this.renderModel = this.computeModel();
     this.renderer?.render(this.renderModel, this.tasks, this.columns, this.explicitTheme);
     if (this.renderer && this.colorScheme !== "auto") {
@@ -3172,6 +3610,29 @@ var _GanttChart = class _GanttChart {
       this.renderer?.root.removeAttribute("data-gantt-theme");
     }
   }
+  /**
+   * Stretch-only fit: bump columnWidth up so the timeline fills the container's available
+   * width, but never shrink it below what the current zoom level already implies - a project
+   * wider than the container should still scroll normally, not get crammed to fit.
+   */
+  applyAutoFit() {
+    const availableWidth = this.container.clientWidth - this.options.gridPanelWidth;
+    if (!Number.isFinite(availableWidth) || availableWidth <= 0) return;
+    let min = null;
+    let max = null;
+    for (const t of this.tasks) {
+      if (!isValidDate(t.start) || !isValidDate(t.end)) continue;
+      min = min === null ? t.start.getTime() : Math.min(min, t.start.getTime());
+      max = max === null ? t.end.getTime() : Math.max(max, t.end.getTime());
+    }
+    if (min === null || max === null || max <= min) return;
+    const rangeMs = max - min;
+    const unitMs = approxUnitMs(this.options.viewMode);
+    const neededColumnWidth = availableWidth * unitMs / rangeMs;
+    if (neededColumnWidth > this.columnWidth) {
+      this.columnWidth = Math.min(neededColumnWidth, _GanttChart.MAX_COLUMN_WIDTH);
+    }
+  }
   undo() {
     this.history?.undo();
   }
@@ -3194,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) => {
@@ -3266,6 +3755,8 @@ var _GanttChart = class _GanttChart {
     this.darkMediaQuery?.removeEventListener?.("change", this.handleSchemeChange);
     this.emitter.removeAllListeners();
     this.interactions?.destroy();
+    this.tooltip?.destroy();
+    this.resizeObserver?.disconnect();
     this.renderer?.destroy();
   }
 };