@diagrammo/dgmo 0.7.1 → 0.7.2

package/dist/index.cjs

@@ -7986,7 +7986,9 @@ function parseGantt(content, palette) {
       criticalPath: false,
       dependencies: false,
       sort: "default",
-      defaultSwimlaneGroup: null
+      defaultSwimlaneGroup: null,
+      optionLineNumbers: {},
+      holidaysLineNumber: null
     },
     diagnostics,
     error: null
@@ -8171,6 +8173,7 @@ function parseGantt(content, palette) {
       inHolidaysBlock = true;
       holidaysBlockIndent = indent;
       inHeaderBlock = false;
+      result.options.holidaysLineNumber = lineNumber;
       continue;
     }
     const tagMatch = matchTagBlockHeading(line10);
@@ -8197,7 +8200,8 @@ function parseGantt(content, palette) {
         startDate: eraMatch[1],
         endDate: eraMatch[2],
         label: eraExtracted.label,
-        color: eraExtracted.color || null
+        color: eraExtracted.color || null,
+        lineNumber
       });
       inHeaderBlock = false;
       continue;
@@ -8219,6 +8223,7 @@ function parseGantt(content, palette) {
     if (optMatch && isKnownOption(optMatch[1].toLowerCase())) {
       const key = optMatch[1].toLowerCase();
       const value = optMatch[2].trim();
+      result.options.optionLineNumbers[key] = lineNumber;
       switch (key) {
         case "start":
           result.options.start = value;
@@ -16129,7 +16134,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   const LABEL_CHAR_W = 7;
-  const LABEL_PAD = 8;
+  const LABEL_PAD2 = 8;
   const LABEL_H = 16;
   const PERP_OFFSET = 10;
   const labelPositions = [];
@@ -16138,7 +16143,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     if (!edge.label || edge.points.length < 2) continue;
     const midIdx = Math.floor(edge.points.length / 2);
     const midPt = edge.points[midIdx];
-    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD;
+    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD2;
     const prev = edge.points[Math.max(0, midIdx - 1)];
     const next = edge.points[Math.min(edge.points.length - 1, midIdx + 1)];
     const dx = next.x - prev.x;
@@ -19381,8 +19386,46 @@ __export(renderer_exports9, {
   buildTagLaneRowList: () => buildTagLaneRowList,
   renderGantt: () => renderGantt
 });
+function computeBarLabel(label, x1, barWidth, innerWidth, textColor) {
+  const textWidth = label.length * CHAR_W;
+  const x2 = x1 + barWidth;
+  if (textWidth < barWidth - LABEL_PAD) {
+    return { x: x1 + 6, anchor: "start", fill: textColor, text: label };
+  }
+  if (x2 + LABEL_GAP + textWidth <= innerWidth) {
+    return { x: x2 + LABEL_GAP, anchor: "start", fill: textColor, text: label };
+  }
+  if (x1 - LABEL_GAP - textWidth >= 0) {
+    return { x: x1 - LABEL_GAP, anchor: "end", fill: textColor, text: label };
+  }
+  const availWidth = x1 - LABEL_GAP;
+  if (availWidth > CHAR_W * 3) {
+    const maxChars = Math.floor(availWidth / CHAR_W) - 1;
+    return { x: x1 - LABEL_GAP, anchor: "end", fill: textColor, text: label.slice(0, maxChars) + "\u2026" };
+  }
+  return null;
+}
+function renderLabelBand(svg, y, leftMargin, color, palette, cssPrefix, dataAttr) {
+  const bandX = 5;
+  const bandW = leftMargin - 7;
+  const bandY = y - BAR_H / 2;
+  const clipId = `gantt-band-clip-${bandClipCounter++}`;
+  svg.append("clipPath").attr("id", clipId).append("rect").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", BAR_H).attr("rx", BAND_RADIUS);
+  const tint2 = svg.append("rect").attr("class", `gantt-${cssPrefix}-band-bg`).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", BAR_H).attr("rx", BAND_RADIUS).attr("fill", mix(color, palette.bg, 20)).style("pointer-events", "none");
+  const accent = svg.append("rect").attr("class", `gantt-${cssPrefix}-band-accent`).attr("x", bandX).attr("y", bandY).attr("width", BAND_ACCENT_W).attr("height", BAR_H).attr("fill", color).attr("clip-path", `url(#${clipId})`).style("pointer-events", "none");
+  if (dataAttr) {
+    tint2.attr(dataAttr.key, dataAttr.value);
+    accent.attr(dataAttr.key, dataAttr.value);
+  }
+}
+function appendTaskIcon(textEl, label, isMilestone, iconColor, textColor) {
+  const icon = isMilestone ? "\u25C6" : "\u25CF";
+  textEl.append("tspan").attr("fill", iconColor).text(icon);
+  textEl.append("tspan").attr("fill", textColor).text(" " + label);
+}
 function renderGantt(container, resolved, palette, isDark, options, exportDims) {
   container.innerHTML = "";
+  bandClipCounter = 0;
   if (resolved.tasks.length === 0) return;
   const onClickItem = options?.onClickItem;
   const collapsedGroups = options?.collapsedGroups;
@@ -19401,10 +19444,13 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const isTagMode = tagRows !== null;
   const allLabels = isTagMode ? [
     ...rows.filter((r) => r.type === "lane-header").map((r) => r.laneName),
-    ...rows.filter((r) => r.type === "task").map((r) => r.task.task.label)
+    ...rows.filter((r) => r.type === "task").map((r) => "\u25CF " + r.task.task.label)
   ] : [
-    ...resolved.tasks.map((t) => t.task.label),
-    ...resolved.groups.map((g2) => "  ".repeat(g2.depth) + g2.name)
+    ...resolved.tasks.map((t) => "\u25CF " + t.task.label),
+    ...resolved.groups.map((g2) => {
+      const px = g2.depth <= 2 ? g2.depth * 14 : 2 * 14 + (g2.depth - 2) * 8;
+      return " ".repeat(Math.ceil(px / 7)) + g2.name;
+    })
   ];
   const maxLabelLen = Math.max(...allLabels.map((l) => l.length), 10);
   const leftMargin = Math.max(MIN_LEFT_MARGIN, maxLabelLen * 7 + 30);
@@ -19413,8 +19459,10 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve = resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
   const topDateLabelReserve = 22;
+  const hasOverheadLabels = resolved.markers.length > 0 || resolved.eras.length > 0;
+  const markerLabelReserve = hasOverheadLabels ? 18 : 0;
   const CONTENT_TOP_PAD = 16;
-  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve;
+  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve + markerLabelReserve;
   const contentH = isTagMode ? totalRows * (BAR_H + ROW_GAP) : totalRows * (BAR_H + ROW_GAP) + GROUP_GAP2 * resolved.groups.length;
   const innerHeight = CONTENT_TOP_PAD + contentH;
   const outerHeight = marginTop + innerHeight + BOTTOM_MARGIN;
@@ -19442,6 +19490,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         isDark,
         hasCriticalPath,
         criticalPathActive,
+        resolved.options.optionLineNumbers,
         (groupName) => {
           currentActiveGroup = currentActiveGroup?.toLowerCase() === groupName.toLowerCase() ? null : groupName;
           if (onActiveGroupChange) onActiveGroupChange(currentActiveGroup);
@@ -19480,7 +19529,25 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   renderTimeScaleHorizontal(g, xScale, innerWidth, innerHeight, palette.text);
   renderWeekendBands(g, resolved, xScale, innerHeight, palette, isDark);
   renderHolidayBands(g, svg, resolved, xScale, innerHeight, palette, isDark, marginTop - 4, leftMargin, onClickItem);
-  renderErasAndMarkers(g, resolved, xScale, innerHeight, palette);
+  renderErasAndMarkers(g, svg, resolved, xScale, innerHeight, palette);
+  let todayDate = null;
+  let todayX = -1;
+  const todayColor = palette.accent || "#e74c3c";
+  const todayMarkerLineNum = resolved.options.optionLineNumbers["today-marker"];
+  if (resolved.options.todayMarker !== "off") {
+    if (resolved.options.todayMarker === "on") {
+      todayDate = /* @__PURE__ */ new Date();
+    } else {
+      todayDate = /* @__PURE__ */ new Date(resolved.options.todayMarker + "T00:00:00");
+    }
+    todayX = xScale(dateToFractionalYear(todayDate));
+    if (todayX >= 0 && todayX <= innerWidth) {
+      const todayLine = g.append("line").attr("class", "gantt-today").attr("x1", todayX).attr("y1", 0).attr("x2", todayX).attr("y2", innerHeight + 10).attr("stroke", todayColor).attr("stroke-width", 2).attr("stroke-dasharray", "6 4").attr("opacity", 0.7).attr("pointer-events", "none");
+      if (todayMarkerLineNum) todayLine.attr("data-line-number", String(todayMarkerLineNum));
+      const todayLabel = g.append("text").attr("class", "gantt-today").attr("x", todayX).attr("y", innerHeight + 24).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", todayColor).attr("opacity", 0.7).attr("pointer-events", "none").text("Today");
+      if (todayMarkerLineNum) todayLabel.attr("data-line-number", String(todayMarkerLineNum));
+    }
+  }
   const taskPositions = /* @__PURE__ */ new Map();
   const groupPositions = /* @__PURE__ */ new Map();
   const lanePositions = /* @__PURE__ */ new Map();
@@ -19516,6 +19583,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         laneBarWidth = Math.max(lx2 - lx1, 2);
       }
       lanePositions.set(row.laneName, { x1: lx1, x2: lx1 + laneBarWidth, y: yOffset + BAR_H / 2 });
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, laneColor, palette, "lane", { key: "data-lane", value: row.laneName });
       const labelG = svg.append("g").attr("class", "gantt-lane-header").attr(`data-tag-${row.tagKey}`, row.laneName.toLowerCase()).attr("data-lane", row.laneName).style("cursor", onToggleLane ? "pointer" : "default").on("click", () => {
         if (onToggleLane) onToggleLane(row.laneName);
       }).on("mouseenter", () => {
@@ -19541,7 +19609,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         });
         laneBandG.append("rect").attr("class", "gantt-lane-band").attr("x", lx1).attr("y", yOffset).attr("width", laneBarWidth).attr("height", BAR_H).attr("rx", 4).attr("fill", barFill).attr("stroke", laneColor).attr("stroke-width", 2);
         if (row.aggregateProgress !== null && row.aggregateProgress > 0) {
-          laneBandG.append("rect").attr("class", "gantt-lane-progress").attr("x", lx1).attr("y", yOffset).attr("width", laneBarWidth * Math.min(row.aggregateProgress / 100, 1)).attr("height", BAR_H).attr("rx", 4).attr("fill", laneColor).attr("opacity", 0.5).attr("pointer-events", "none");
+          laneBandG.append("rect").attr("class", "gantt-lane-progress").attr("x", lx1).attr("y", yOffset).attr("width", laneBarWidth * Math.min(row.aggregateProgress / 100, 1)).attr("height", BAR_H).attr("fill", laneColor).attr("opacity", 0.5).attr("pointer-events", "none");
         }
       }
       yOffset += BAR_H + ROW_GAP;
@@ -19552,6 +19620,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
       const toggleIcon = isCollapsed ? "\u25BA" : "\u25BC";
       const tagColor = resolveTagColor(group.metadata, resolved.tagGroups, currentActiveGroup, true);
       const groupColor = tagColor && tagColor !== "#999999" ? tagColor : group.color || palette.textMuted;
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, groupColor, palette, "group", { key: "data-group", value: group.name });
       const labelG = svg.append("g").attr("class", "gantt-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).style("cursor", onToggleGroup ? "pointer" : "default").on("click", () => {
         if (onToggleGroup) onToggleGroup(group.name);
       }).on("mouseenter", () => {
@@ -19561,7 +19630,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         resetHighlight(g, svg);
         hideGanttDateIndicators(g);
       });
-      const labelX = 10 + group.depth * 14;
+      const groupIndent = group.depth <= 2 ? group.depth * 14 : 2 * 14 + (group.depth - 2) * 8;
+      const labelX = 10 + groupIndent;
       labelG.append("text").attr("x", labelX).attr("y", marginTop + yOffset + BAR_H / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", "11px").attr("font-weight", "bold").attr("fill", palette.text).text(toggleIcon + " " + group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : ""));
       const gStart = dateToFractionalYear(group.startDate);
       const gEnd = dateToFractionalYear(group.endDate);
@@ -19579,7 +19649,12 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           });
           summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth).attr("height", BAR_H).attr("rx", 4).attr("fill", mix(groupColor, palette.bg, 30)).attr("stroke", groupColor).attr("stroke-width", 2);
           if (group.progress !== null && group.progress > 0) {
-            summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth * Math.min(group.progress / 100, 1)).attr("height", BAR_H).attr("rx", 4).attr("fill", groupColor).attr("opacity", 0.5);
+            summaryG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", barWidth * Math.min(group.progress / 100, 1)).attr("height", BAR_H).attr("fill", groupColor).attr("opacity", 0.5);
+          }
+          const summaryLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
+          const summaryPlacement = computeBarLabel(summaryLabel, gx1, barWidth, innerWidth, palette.text);
+          if (summaryPlacement) {
+            summaryG.append("text").attr("x", summaryPlacement.x).attr("y", yOffset + BAR_H / 2).attr("dy", "0.35em").attr("font-size", "10px").attr("font-weight", "bold").attr("text-anchor", summaryPlacement.anchor).attr("fill", summaryPlacement.fill).attr("pointer-events", "none").text(summaryPlacement.text);
           }
           groupPositions.set(group.name, { x1: gx1, x2: gx1 + barWidth, y: yOffset + BAR_H / 2 });
         } else {
@@ -19594,7 +19669,12 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           });
           groupBarG.append("rect").attr("x", gx1).attr("y", yOffset).attr("width", groupBarWidth).attr("height", BAR_H).attr("rx", 4).attr("fill", bandFill).attr("stroke", groupColor).attr("stroke-width", 2);
           if (group.progress !== null && group.progress > 0) {
-            groupBarG.append("rect").attr("class", "gantt-group-progress").attr("x", gx1).attr("y", yOffset).attr("width", groupBarWidth * Math.min(group.progress / 100, 1)).attr("height", BAR_H).attr("rx", 4).attr("fill", groupColor).attr("opacity", 0.5);
+            groupBarG.append("rect").attr("class", "gantt-group-progress").attr("x", gx1).attr("y", yOffset).attr("width", groupBarWidth * Math.min(group.progress / 100, 1)).attr("height", BAR_H).attr("fill", groupColor).attr("opacity", 0.5);
+          }
+          const expandedLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
+          const expandedPlacement = computeBarLabel(expandedLabel, gx1, groupBarWidth, innerWidth, palette.text);
+          if (expandedPlacement) {
+            groupBarG.append("text").attr("x", expandedPlacement.x).attr("y", yOffset + BAR_H / 2).attr("dy", "0.35em").attr("font-size", "10px").attr("font-weight", "bold").attr("text-anchor", expandedPlacement.anchor).attr("fill", expandedPlacement.fill).attr("pointer-events", "none").text(expandedPlacement.text);
           }
         }
       }
@@ -19602,9 +19682,12 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
     } else if (row.type === "task") {
       const rt = row.task;
       const task = rt.task;
-      const taskLabelX = isTagMode ? 20 : 6 + rt.groupPath.length * 14;
+      const barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors2, palette);
+      const depth = rt.groupPath.length;
+      const indent = depth <= 2 ? depth * 14 : 2 * 14 + (depth - 2) * 8;
+      const taskLabelX = isTagMode ? 20 : 6 + indent;
       const topGroup = rt.groupPath.length > 0 ? rt.groupPath[0] : null;
-      const taskLabel = svg.append("text").attr("class", "gantt-task-label").attr("x", taskLabelX).attr("y", marginTop + yOffset + BAR_H / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", "11px").attr("fill", palette.text).attr("data-line-number", String(task.lineNumber)).attr("data-task-id", task.id).attr("data-group", topGroup).style("cursor", onClickItem ? "pointer" : "default").text(task.label).on("click", () => {
+      const taskLabel = svg.append("text").attr("class", "gantt-task-label").attr("x", taskLabelX).attr("y", marginTop + yOffset + BAR_H / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", "11px").attr("fill", palette.text).attr("data-line-number", String(task.lineNumber)).attr("data-task-id", task.id).attr("data-group", topGroup).style("cursor", onClickItem ? "pointer" : "default").on("click", () => {
         if (onClickItem) onClickItem(task.lineNumber);
       }).on("mouseenter", () => {
         if (rt.isMilestone) {
@@ -19615,13 +19698,13 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
       }).on("mouseleave", () => {
         resetHighlight(g, svg);
       });
+      appendTaskIcon(taskLabel, task.label, rt.isMilestone, barColor, palette.text);
       for (const [key, value] of Object.entries(rt.effectiveMetadata)) {
         taskLabel.attr(`data-tag-${key}`, value.toLowerCase());
       }
       if (rt.isCriticalPath) {
         taskLabel.attr("data-critical-path", "true");
       }
-      let barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors2, palette);
       if (rt.isMilestone) {
         const mx = xScale(dateToFractionalYear(rt.startDate));
         const my = yOffset + BAR_H / 2;
@@ -19699,32 +19782,40 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
             progGrad.append("stop").attr("offset", "100%").attr("stop-color", barColor).attr("stop-opacity", 0);
             progressFill = `url(#${progGradId})`;
           }
-          taskG.append("rect").attr("class", "gantt-progress").attr("x", x1).attr("y", yOffset).attr("width", progressWidth).attr("height", BAR_H).attr("rx", 4).attr("fill", progressFill).attr("opacity", 0.5);
+          taskG.append("rect").attr("class", "gantt-progress").attr("x", x1).attr("y", yOffset).attr("width", progressWidth).attr("height", BAR_H).attr("fill", progressFill).attr("opacity", 0.5);
         }
         if (rt.isCriticalPath) {
           taskG.attr("data-critical-path", "true");
         }
-        const textWidth = task.label.length * 6.5;
-        if (textWidth < barWidth - 8) {
-          taskG.append("text").attr("x", x1 + 6).attr("y", yOffset + BAR_H / 2).attr("dy", "0.35em").attr("font-size", "10px").attr("fill", palette.text).attr("pointer-events", "none").text(task.label);
+        const labelPlacement = computeBarLabel(task.label, x1, barWidth, innerWidth, palette.text);
+        if (labelPlacement) {
+          taskG.append("text").attr("x", labelPlacement.x).attr("y", yOffset + BAR_H / 2).attr("dy", "0.35em").attr("font-size", "10px").attr("text-anchor", labelPlacement.anchor).attr("fill", labelPlacement.fill).attr("pointer-events", "none").text(labelPlacement.text);
         }
         taskPositions.set(task.id, { x1, x2: x1 + barWidth, y: yOffset + BAR_H / 2 });
       }
       yOffset += BAR_H + ROW_GAP;
     }
   }
-  if (resolved.options.todayMarker !== "off") {
-    let todayDate;
-    if (resolved.options.todayMarker === "on") {
-      todayDate = /* @__PURE__ */ new Date();
-    } else {
-      todayDate = /* @__PURE__ */ new Date(resolved.options.todayMarker + "T00:00:00");
-    }
-    const todayX = xScale(dateToFractionalYear(todayDate));
-    if (todayX >= 0 && todayX <= innerWidth) {
-      g.append("line").attr("class", "gantt-today").attr("x1", todayX).attr("y1", 0).attr("x2", todayX).attr("y2", innerHeight + 10).attr("stroke", palette.accent || "#e74c3c").attr("stroke-width", 2).attr("stroke-dasharray", "6 4").attr("opacity", 0.7);
-      g.append("text").attr("class", "gantt-today").attr("x", todayX + 4).attr("y", innerHeight + 24).attr("text-anchor", "start").attr("font-size", "10px").attr("fill", palette.accent || "#e74c3c").attr("opacity", 0.7).text("Today");
-    }
+  if (todayDate && todayX >= 0 && todayX <= innerWidth) {
+    const todayHoverG = g.append("g").attr("class", "gantt-today-hover").style("cursor", "pointer");
+    todayHoverG.append("rect").attr("x", todayX - 10).attr("y", -6).attr("width", 20).attr("height", innerHeight + 16).attr("fill", "transparent").attr("pointer-events", "all");
+    const todayDateObj = todayDate;
+    todayHoverG.on("mouseenter", () => {
+      g.selectAll(".gantt-task").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-milestone").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-task-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-era-group").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
+      showGanttDateIndicators(g, xScale, todayDateObj, null, innerHeight, todayColor);
+    }).on("mouseleave", () => {
+      resetHighlight(g, svg);
+      hideGanttDateIndicators(g);
+    });
   }
   if (resolved.options.dependencies) {
     renderDependencyArrows(g, resolved, taskPositions, groupPositions, collapsedGroups, palette, isDark, isTagMode, lanePositions, collapsedLanes, taskLaneMap);
@@ -19841,10 +19932,10 @@ function renderDependencyArrows(g, resolved, taskPositions, groupPositions, coll
       const path = `M ${sx} ${sy} C ${sx + cpOffset} ${sy}, ${tx - cpOffset} ${ty}, ${tx} ${ty}`;
       const arrowColor = mix(palette.text, palette.bg, 50);
       const isCpArrow = rt.isCriticalPath && targetTask.isCriticalPath;
-      g.append("path").attr("class", "gantt-dep-arrow").attr("data-dep-from", rt.task.id).attr("data-dep-to", targetTask.task.id).attr("data-critical-path", isCpArrow ? "true" : null).attr("d", path).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.5).attr("opacity", 0.5);
+      g.append("path").attr("class", "gantt-dep-arrow").attr("data-dep-from", rt.task.id).attr("data-dep-to", targetTask.task.id).attr("data-line-number", String(dep.lineNumber)).attr("data-critical-path", isCpArrow ? "true" : null).attr("d", path).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.5).attr("opacity", 0.5);
       const headSize = 5;
       const angle = 0;
-      g.append("polygon").attr("class", "gantt-dep-arrowhead").attr("data-dep-from", rt.task.id).attr("data-dep-to", targetTask.task.id).attr("data-critical-path", isCpArrow ? "true" : null).attr("points", arrowheadPoints(tx, ty, headSize, angle)).attr("fill", arrowColor).attr("opacity", 0.5);
+      g.append("polygon").attr("class", "gantt-dep-arrowhead").attr("data-dep-from", rt.task.id).attr("data-dep-to", targetTask.task.id).attr("data-line-number", String(dep.lineNumber)).attr("data-critical-path", isCpArrow ? "true" : null).attr("points", arrowheadPoints(tx, ty, headSize, angle)).attr("fill", arrowColor).attr("opacity", 0.5);
     }
   }
 }
@@ -19865,7 +19956,9 @@ function applyCriticalPathHighlight(svg, chartG) {
     el.attr("opacity", el.attr("data-critical-path") === "true" ? 1 : FADE_OPACITY);
   });
   svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", FADE_OPACITY);
   chartG.selectAll(".gantt-lane-band, .gantt-lane-accent").attr("opacity", FADE_OPACITY);
   chartG.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").each(function() {
     const el = d3Selection10.select(this);
@@ -19877,7 +19970,9 @@ function resetHighlightAll(svg, chartG) {
   chartG.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", 1);
   svg.selectAll(".gantt-task-label").attr("opacity", 1);
   svg.selectAll(".gantt-group-label").attr("opacity", 1);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", 1);
   svg.selectAll(".gantt-lane-header").attr("opacity", 1);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", 1);
   chartG.selectAll(".gantt-lane-band, .gantt-lane-accent").attr("opacity", 1);
   chartG.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", 0.5);
 }
@@ -19893,7 +19988,7 @@ function drawSwimlaneIcon(parent, x, y, isActive, palette) {
   }
   return iconG;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, onToggle, onToggleCriticalPath, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks) {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, optionLineNumbers, onToggle, onToggleCriticalPath, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks) {
   const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
   let visibleGroups;
   if (activeGroupName) {
@@ -19954,7 +20049,8 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     if (visibleGroups.length > 0) totalW += LEGEND_GROUP_GAP;
     totalW += cpPillW;
   }
-  const legendX = chartLeftMargin + (chartInnerWidth - totalW) / 2;
+  const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
+  const legendX = (containerWidth - totalW) / 2;
   const legendRow = svg.append("g").attr("class", "gantt-tag-legend-container").attr("transform", `translate(${legendX}, ${legendY})`);
   let cursorX = 0;
   for (let i = 0; i < visibleGroups.length; i++) {
@@ -19966,7 +20062,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     const pillW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD + iconReserve;
     const pillH = isActive ? LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2 : LEGEND_HEIGHT;
     const groupW = groupWidths[i];
-    const gEl = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "gantt-tag-legend-group").attr("data-tag-group", group.name).style("cursor", "pointer").on("click", () => {
+    const gEl = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "gantt-tag-legend-group").attr("data-tag-group", group.name).attr("data-line-number", String(group.lineNumber)).style("cursor", "pointer").on("click", () => {
       if (onToggle) onToggle(group.name);
     });
     if (isActive) {
@@ -20000,7 +20096,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
       let ex = pillXOff + pillW + LEGEND_CAPSULE_PAD + 4;
       for (const entry of entries) {
         const entryValue = entry.value.toLowerCase();
-        const entryG = gEl.append("g").attr("class", "gantt-legend-entry").style("cursor", "pointer");
+        const entryG = gEl.append("g").attr("class", "gantt-legend-entry").attr("data-line-number", String(entry.lineNumber)).style("cursor", "pointer");
         entryG.append("circle").attr("cx", ex + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
         entryG.append("text").attr("x", ex + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 2).attr("text-anchor", "start").attr("font-size", `${LEGEND_ENTRY_FONT_SIZE}px`).attr("fill", palette.textMuted).text(entry.value);
         entryG.on("mouseenter", () => {
@@ -20036,9 +20132,11 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     cursorX += groupW + LEGEND_GROUP_GAP;
   }
   if (hasCriticalPath) {
+    const cpLineNum = optionLineNumbers["critical-path"];
     const cpG = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "gantt-legend-critical-path").style("cursor", "pointer").on("click", () => {
       if (onToggleCriticalPath) onToggleCriticalPath();
     });
+    if (cpLineNum) cpG.attr("data-line-number", String(cpLineNum));
     cpG.append("rect").attr("width", cpPillW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", criticalPathActive ? palette.bg : groupBg);
     if (criticalPathActive) {
       cpG.append("rect").attr("width", cpPillW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
@@ -20056,7 +20154,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     });
   }
 }
-function renderErasAndMarkers(g, resolved, xScale, innerHeight, palette) {
+function renderErasAndMarkers(g, svg, resolved, xScale, innerHeight, palette) {
   for (let i = 0; i < resolved.eras.length; i++) {
     const era = resolved.eras[i];
     const color = era.color || ERA_COLORS[i % ERA_COLORS.length];
@@ -20067,13 +20165,23 @@ function renderErasAndMarkers(g, resolved, xScale, innerHeight, palette) {
     const hoverEraOpacity = 0.16;
     const eraStartDate = parseDateStringToDate(era.startDate);
     const eraEndDate = parseDateStringToDate(era.endDate);
-    const eraG = g.append("g").attr("class", "gantt-era-group");
+    const eraG = g.append("g").attr("class", "gantt-era-group").attr("data-line-number", String(era.lineNumber));
     const eraRect = eraG.append("rect").attr("class", "gantt-era").attr("x", sx).attr("y", 0).attr("width", ex - sx).attr("height", innerHeight).attr("fill", color).attr("opacity", baseEraOpacity);
-    eraG.append("text").attr("class", "gantt-era-label").attr("x", (sx + ex) / 2).attr("y", 12).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", color).attr("opacity", 0.7).attr("pointer-events", "none").text(era.label);
+    eraG.append("text").attr("class", "gantt-era-label").attr("x", (sx + ex) / 2).attr("y", -24).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", color).attr("opacity", 0.7).style("cursor", "pointer").text(era.label);
     eraG.on("mouseenter", () => {
+      g.selectAll(".gantt-task").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-milestone").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-task-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
       eraRect.attr("opacity", hoverEraOpacity);
       showGanttDateIndicators(g, xScale, eraStartDate, eraEndDate, innerHeight, color);
     }).on("mouseleave", () => {
+      resetHighlight(g, svg);
       eraRect.attr("opacity", baseEraOpacity);
       hideGanttDateIndicators(g);
     });
@@ -20085,22 +20193,31 @@ function renderErasAndMarkers(g, resolved, xScale, innerHeight, palette) {
     const diamondSize = 5;
     const labelY = -24;
     const diamondY = labelY + 14;
-    const markerG = g.append("g").attr("class", "gantt-marker-group").style("cursor", "pointer");
+    const markerG = g.append("g").attr("class", "gantt-marker-group").attr("data-line-number", String(marker.lineNumber)).style("cursor", "pointer");
     markerG.append("rect").attr("x", mx - 40).attr("y", labelY - 12).attr("width", 80).attr("height", innerHeight - labelY + 12).attr("fill", "transparent").attr("pointer-events", "all");
     markerG.append("text").attr("class", "gantt-marker-label").attr("x", mx).attr("y", labelY).attr("text-anchor", "middle").attr("font-size", "11px").attr("font-weight", "600").attr("fill", color).text(marker.label);
     markerG.append("path").attr("d", `M${mx},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`).attr("fill", color).attr("opacity", 0.9);
     markerG.append("line").attr("class", "gantt-marker").attr("x1", mx).attr("y1", diamondY + diamondSize).attr("x2", mx).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "6 4").attr("opacity", 0.5);
     const markerLine = markerG.select(".gantt-marker");
-    const markerLabel = markerG.select(".gantt-marker-label");
     const markerDiamond = markerG.select("path");
     markerG.on("mouseenter", () => {
-      markerLine.attr("opacity", 0);
-      markerLabel.attr("opacity", 0);
+      g.selectAll(".gantt-task").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-milestone").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-task-label").attr("opacity", FADE_OPACITY);
+      svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-era-group").attr("opacity", FADE_OPACITY);
+      g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
+      markerG.attr("opacity", 1);
+      markerLine.attr("opacity", 0.8);
       markerDiamond.attr("opacity", 0);
-      showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color);
+      showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color, { skipStartLine: true });
     }).on("mouseleave", () => {
+      resetHighlight(g, svg);
       markerLine.attr("opacity", 0.5);
-      markerLabel.attr("opacity", 1);
       markerDiamond.attr("opacity", 0.9);
       hideGanttDateIndicators(g);
     });
@@ -20114,11 +20231,7 @@ function parseDateStringToDate(s) {
   return new Date(year, month, day);
 }
 function parseDateToFractionalYear(s) {
-  const parts = s.split("-").map((p) => parseInt(p, 10));
-  const year = parts[0];
-  const month = parts.length >= 2 ? parts[1] : 1;
-  const day = parts.length >= 3 ? parts[2] : 1;
-  return year + (month - 1) / 12 + (day - 1) / 365;
+  return dateToFractionalYear(parseDateStringToDate(s));
 }
 function highlightDeps(g, svg, taskId, resolved) {
   const related = /* @__PURE__ */ new Set([taskId]);
@@ -20152,6 +20265,7 @@ function highlightDeps(g, svg, taskId, resolved) {
     const isRelated = from && related.has(from) || to && related.has(to);
     el.attr("opacity", isRelated ? 0.5 : FADE_OPACITY);
   });
+  g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
 }
 function highlightGroup(g, svg, groupName) {
   g.selectAll(".gantt-task").each(function() {
@@ -20174,7 +20288,12 @@ function highlightGroup(g, svg, groupName) {
     const el = d3Selection10.select(this);
     el.attr("opacity", el.attr("data-group") === groupName ? 1 : FADE_OPACITY);
   });
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").each(function() {
+    const el = d3Selection10.select(this);
+    el.attr("opacity", el.attr("data-group") === groupName ? 1 : FADE_OPACITY);
+  });
   svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-lane-band, .gantt-lane-accent").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
 }
@@ -20201,8 +20320,13 @@ function highlightLane(g, svg, tagKey, laneName) {
     const el = d3Selection10.select(this);
     el.attr("opacity", el.attr("data-lane") === laneName ? 1 : FADE_OPACITY);
   });
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").each(function() {
+    const el = d3Selection10.select(this);
+    el.attr("opacity", el.attr("data-lane") === laneName ? 1 : FADE_OPACITY);
+  });
   g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
 }
 function highlightTask(g, svg, taskId) {
@@ -20217,7 +20341,9 @@ function highlightTask(g, svg, taskId) {
   });
   g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
@@ -20234,7 +20360,9 @@ function highlightMilestone(g, svg, taskId) {
   });
   g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", FADE_OPACITY);
   svg.selectAll(".gantt-lane-header").attr("opacity", FADE_OPACITY);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", FADE_OPACITY);
   g.selectAll(".gantt-marker-group").attr("opacity", FADE_OPACITY);
@@ -20253,11 +20381,14 @@ function resetHighlight(g, svg) {
   g.selectAll(".gantt-task, .gantt-milestone").attr("opacity", 1);
   g.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", 1);
   svg.selectAll(".gantt-group-label").attr("opacity", 1);
+  svg.selectAll(".gantt-group-band-bg, .gantt-group-band-accent").attr("opacity", 1);
   svg.selectAll(".gantt-task-label").attr("opacity", 1);
   svg.selectAll(".gantt-lane-header").attr("opacity", 1);
+  svg.selectAll(".gantt-lane-band-bg, .gantt-lane-band-accent").attr("opacity", 1);
   g.selectAll(".gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group").attr("opacity", 1);
   g.selectAll(".gantt-dep-arrow, .gantt-dep-arrowhead").attr("opacity", 0.5);
   g.selectAll(".gantt-marker-group").attr("opacity", 1);
+  g.selectAll(".gantt-era-group").attr("opacity", 1);
 }
 function buildRowList(resolved, collapsedGroups) {
   const rows = [];
@@ -20411,15 +20542,18 @@ function diamondPoints(cx, cy, size) {
 function formatGanttDate(d) {
   return `${MONTH_ABBR[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
 }
-function showGanttDateIndicators(g, xScale, startDate, endDate, innerHeight, color) {
+function showGanttDateIndicators(g, xScale, startDate, endDate, innerHeight, color, options) {
   g.selectAll(".gantt-scale-tick").attr("opacity", 0.05);
   g.selectAll(".gantt-today").attr("opacity", 0.05);
+  const hg = g.append("g").attr("class", "gantt-hover-date").attr("pointer-events", "none");
   const tickLen = 6;
   const startPos = xScale(dateToFractionalYear(startDate));
   const startLabel = formatGanttDate(startDate);
-  g.append("line").attr("class", "gantt-hover-date").attr("x1", startPos).attr("y1", -tickLen).attr("x2", startPos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
-  g.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
-  g.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
+  if (!options?.skipStartLine) {
+    hg.append("line").attr("class", "gantt-hover-date").attr("x1", startPos).attr("y1", -tickLen).attr("x2", startPos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
+  }
+  hg.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
+  hg.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
   if (endDate && endDate.getTime() !== startDate.getTime()) {
     const endPos = xScale(dateToFractionalYear(endDate));
     const endLabel = formatGanttDate(endDate);
@@ -20436,15 +20570,15 @@ function showGanttDateIndicators(g, xScale, startDate, endDate, innerHeight, col
       startAnchor = "middle";
       endAnchor = "middle";
     }
-    g.append("line").attr("class", "gantt-hover-date").attr("x1", endPos).attr("y1", -tickLen).attr("x2", endPos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
-    g.selectAll("text.gantt-hover-date").each(function() {
+    hg.append("line").attr("class", "gantt-hover-date").attr("x1", endPos).attr("y1", -tickLen).attr("x2", endPos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
+    hg.selectAll("text.gantt-hover-date").each(function() {
       const el = d3Selection10.select(this);
       if (el.text() === startLabel) {
         el.attr("x", startLabelX).attr("text-anchor", startAnchor);
       }
     });
-    g.append("text").attr("class", "gantt-hover-date").attr("x", endLabelX).attr("y", -tickLen - 4).attr("text-anchor", endAnchor).attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
-    g.append("text").attr("class", "gantt-hover-date").attr("x", endLabelX).attr("y", innerHeight + tickLen + 12).attr("text-anchor", endAnchor).attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
+    hg.append("text").attr("class", "gantt-hover-date").attr("x", endLabelX).attr("y", -tickLen - 4).attr("text-anchor", endAnchor).attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
+    hg.append("text").attr("class", "gantt-hover-date").attr("x", endLabelX).attr("y", innerHeight + tickLen + 12).attr("text-anchor", endAnchor).attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
   }
 }
 function hideGanttDateIndicators(g) {
@@ -20489,7 +20623,7 @@ function renderTimeScaleHorizontal(g, scale, innerWidth, innerHeight, textColor)
     g.append("text").attr("class", "gantt-scale-tick").attr("x", tick.pos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", textColor).attr("opacity", opacity).text(tick.label);
   }
 }
-var d3Scale, d3Selection10, BAR_H, ROW_GAP, GROUP_GAP2, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, JS_DAY_TO_WEEKDAY2, ERA_COLORS, FADE_OPACITY, MONTH_ABBR;
+var d3Scale, d3Selection10, BAR_H, ROW_GAP, GROUP_GAP2, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, CHAR_W, LABEL_PAD, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, FADE_OPACITY, MONTH_ABBR;
 var init_renderer9 = __esm({
   "src/gantt/renderer.ts"() {
     "use strict";
@@ -20508,6 +20642,12 @@ var init_renderer9 = __esm({
     MIN_LEFT_MARGIN = 120;
     BOTTOM_MARGIN = 40;
     RIGHT_MARGIN = 20;
+    CHAR_W = 6.5;
+    LABEL_PAD = 8;
+    LABEL_GAP = 5;
+    BAND_ACCENT_W = 4;
+    BAND_RADIUS = 4;
+    bandClipCounter = 0;
     JS_DAY_TO_WEEKDAY2 = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
     ERA_COLORS = ["#5e81ac", "#a3be8c", "#ebcb8b", "#d08770", "#b48ead"];
     FADE_OPACITY = 0.1;
@@ -20608,14 +20748,14 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     nodePositionMap.set(node.id, node);
   }
   const LABEL_CHAR_W = 7;
-  const LABEL_PAD = 8;
+  const LABEL_PAD2 = 8;
   const LABEL_H = 16;
   const PERP_OFFSET = 10;
   const labelPositions = [];
   for (let ei = 0; ei < layout.edges.length; ei++) {
     const edge = layout.edges[ei];
     if (!edge.label) continue;
-    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD;
+    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD2;
     let lx, ly;
     if (edge.source === edge.target) {
       const node = nodePositionMap.get(edge.source);
@@ -25115,12 +25255,12 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   };
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
-  const LABEL_PAD = 40;
+  const LABEL_PAD2 = 40;
   const CHAR_WIDTH_RATIO3 = 0.6;
   const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO3;
   const quadrantLabelLayout = (text, qw2, qh2) => {
-    const availW = qw2 - LABEL_PAD;
-    const availH = qh2 - LABEL_PAD;
+    const availW = qw2 - LABEL_PAD2;
+    const availH = qh2 - LABEL_PAD2;
     const words = text.split(/\s+/);
     if (estTextWidth(text, LABEL_MAX_FONT) <= availW) {
       const fs = Math.min(LABEL_MAX_FONT, availH);