@ganttloom/gantt-core 0.2.0 → 0.4.0

package/dist/index.js

@@ -140,7 +140,6 @@ function computeCriticalPath(tasks, dependencies) {
   }
   for (const e of edges) {
     outgoing.get(e.fromId)?.push(e);
-    incoming.get(e.fromId) === void 0 ? void 0 : void 0;
     incoming.get(e.toId)?.push(e);
   }
   const inDegree = /* @__PURE__ */ new Map();
@@ -225,11 +224,9 @@ function computeCriticalPath(tasks, dependencies) {
       criticalLinks.add(linkKey(e.fromId, e.toId));
     }
   }
-  const taskMap = new Map(tasks.map((t) => [t.id, t]));
   for (const task of tasks) {
     if (!task.isGroup) continue;
     let hasCriticalDescendant = false;
-    let cur = task;
     const descendantStack = [task.id];
     const visited = /* @__PURE__ */ new Set();
     while (descendantStack.length > 0) {
@@ -244,8 +241,6 @@ function computeCriticalPath(tasks, dependencies) {
       }
     }
     if (hasCriticalDescendant) criticalTasks.add(task.id);
-    void cur;
-    void taskMap;
   }
   return { criticalTasks, criticalLinks };
 }
@@ -619,6 +614,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 = [];
@@ -640,6 +658,9 @@ function flatten(roots) {
   }
   return out;
 }
+function estimateTextWidth(text, fontSize) {
+  return text.length * fontSize * 0.62;
+}
 function anchorPoint(bar, side) {
   const y = bar.y + bar.height / 2;
   return side === "start" ? { x: bar.x, y } : { x: bar.x + bar.width, y };
@@ -702,6 +723,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,
@@ -717,7 +746,8 @@ function computeLayout(input) {
     markers = [],
     autoRollupProgress = false,
     selectedTaskIds,
-    pagination
+    pagination,
+    sort = null
   } = input;
   validateInputs(tasks, dependencies);
   const { roots, nodeById } = buildTree(tasks);
@@ -725,6 +755,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);
@@ -744,8 +775,15 @@ 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];
+  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));
+  }
   const rows = [];
   const bars = [];
   const barByTaskId = /* @__PURE__ */ new Map();
@@ -765,8 +803,9 @@ function computeLayout(input) {
     const end = row.node.computedEnd;
     if (!start || !end) return;
     const x = dateToX(start, paddedStart, viewMode, columnWidth);
-    const width2 = Math.max(0, dateToX(end, paddedStart, viewMode, columnWidth) - x);
-    if (!Number.isFinite(x) || !Number.isFinite(width2)) return;
+    const rawWidth = Math.max(0, dateToX(end, paddedStart, viewMode, columnWidth) - x);
+    if (!Number.isFinite(x) || !Number.isFinite(rawWidth)) return;
+    const width2 = rawWidth > 0 ? Math.max(rawWidth, 3) : rawWidth;
     const progress = task.progress !== void 0 ? Math.min(100, Math.max(0, task.progress)) : autoRollupProgress ? row.node.computedProgress : 0;
     const barHeight = theme.barHeight;
     const barY = y + (theme.rowHeight - barHeight) / 2;
@@ -874,7 +913,13 @@ function computeLayout(input) {
   })).filter((m) => Number.isFinite(m.x));
   let width = 0;
   for (const tick of ticks) width = Math.max(width, tick.x);
-  for (const bar of bars) width = Math.max(width, bar.x + bar.width);
+  for (const bar of bars) {
+    width = Math.max(width, bar.x + bar.width);
+    if (bar.label) {
+      const labelOffset = bar.isMilestone ? theme.barHeight * 0.4 + 8 : bar.width + 6;
+      width = Math.max(width, bar.x + labelOffset + estimateTextWidth(bar.label, theme.fontSize));
+    }
+  }
   width += columnWidth;
   const height = rows.length * theme.rowHeight;
   return {
@@ -889,7 +934,8 @@ function computeLayout(input) {
     columns,
     theme,
     markers: renderMarkers,
-    rangeStart: paddedStart
+    rangeStart: paddedStart,
+    sort
   };
 }
 
@@ -1086,6 +1132,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;
@@ -1123,8 +1170,13 @@ 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);
     this.timelineScroll.appendChild(this.svg);
     this.root.appendChild(this.gridPanel);
     this.root.appendChild(this.timelineScroll);
@@ -1140,9 +1192,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);
   }
@@ -1170,7 +1227,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");
@@ -1183,11 +1240,23 @@ 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;
+    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";
@@ -1314,8 +1383,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);
@@ -1332,7 +1401,6 @@ 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);
@@ -1373,7 +1441,9 @@ var GanttRenderer = class {
     }
   }
   renderMarkers(group, model) {
-    for (const marker of model.markers) {
+    const sorted = [...model.markers].sort((a, b) => a.x - b.x);
+    let defs = null;
+    sorted.forEach((marker, i) => {
       const line = svgEl("line");
       line.setAttribute("x1", String(marker.x));
       line.setAttribute("x2", String(marker.x));
@@ -1385,21 +1455,41 @@ var GanttRenderer = class {
       line.dataset.ganttMarker = marker.label;
       group.appendChild(line);
       if (marker.label) {
+        const nextX = sorted[i + 1]?.x ?? model.width;
+        const cellWidth = Math.max(0, nextX - marker.x);
+        if (!defs) {
+          defs = svgEl("defs");
+          group.insertBefore(defs, group.firstChild);
+        }
+        const clipId = `${this.markerDefsId}-marker-${i}`;
+        const clipPath = svgEl("clipPath");
+        clipPath.setAttribute("id", clipId);
+        const clipRect = svgEl("rect");
+        clipRect.setAttribute("x", String(marker.x));
+        clipRect.setAttribute("y", "0");
+        clipRect.setAttribute("width", String(cellWidth));
+        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);
       }
-    }
+    });
   }
   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");
@@ -1408,17 +1498,33 @@ var GanttRenderer = class {
     bg.setAttribute("height", String(model.headerHeight));
     bg.style.fill = themedFill("backgroundColor", model.theme.backgroundColor);
     headerGroup.appendChild(bg);
-    for (const tick of model.ticks) {
+    const defs = svgEl("defs");
+    const ticks = model.ticks;
+    for (let i = 0; i < ticks.length; i++) {
+      const tick = ticks[i];
+      const cellWidth = (ticks[i + 1]?.x ?? model.width) - tick.x;
+      const clipId = `${this.markerDefsId}-tick-${i}`;
+      const clipPath = svgEl("clipPath");
+      clipPath.setAttribute("id", clipId);
+      const clipRect = svgEl("rect");
+      clipRect.setAttribute("x", String(tick.x));
+      clipRect.setAttribute("y", "0");
+      clipRect.setAttribute("width", String(Math.max(0, cellWidth)));
+      clipRect.setAttribute("height", String(model.headerHeight));
+      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);
     }
-    this.svg.appendChild(headerGroup);
+    headerGroup.insertBefore(defs, headerGroup.firstChild);
+    this.headerSvg.appendChild(headerGroup);
   }
   /**
    * Invisible full-width hit-test rects, one per row, behind the bars. Lets
@@ -1453,11 +1559,6 @@ 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");
@@ -1702,8 +1803,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) {
@@ -2082,13 +2205,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;
@@ -2351,6 +2478,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" }];
@@ -2370,6 +2610,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;
@@ -2392,6 +2635,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,
@@ -2412,13 +2657,16 @@ var _GanttChart = class _GanttChart {
       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));
@@ -2441,7 +2689,8 @@ var _GanttChart = class _GanttChart {
       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)
     });
     this.interactions = new InteractionController(
       this.renderer.svg,
@@ -2462,7 +2711,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);
@@ -2481,6 +2740,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;
@@ -2501,7 +2771,7 @@ var _GanttChart = class _GanttChart {
     const newStart = edge === "left" ? new Date(task.start.getTime() + dxMs) : task.start;
     const newEnd = edge === "right" ? new Date(task.end.getTime() + dxMs) : task.end;
     if (newEnd.getTime() <= newStart.getTime()) return;
-    let newSegments = task.segments?.map((s) => ({ ...s }));
+    const newSegments = task.segments?.map((s) => ({ ...s }));
     if (newSegments && newSegments.length > 0) {
       if (edge === "left") newSegments[0] = { ...newSegments[0], start: newStart };
       else newSegments[newSegments.length - 1] = { ...newSegments[newSegments.length - 1], end: newEnd };
@@ -2885,6 +3155,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);
@@ -2951,13 +3239,18 @@ 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`);
+    }
     Object.assign(this.options, partial);
     this.scheduleRender();
   }
@@ -3060,7 +3353,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) {
@@ -3075,6 +3369,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") {
@@ -3083,6 +3378,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();
   }
@@ -3177,6 +3495,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();
   }
 };