@diagrammo/dgmo 0.45.0 → 0.47.0

package/dist/chunk-UWN33VNX.js

@@ -0,0 +1,1610 @@
+import {
+  MONTH_ABBR,
+  computeTimeTicks
+} from "./chunk-YRYKTYMQ.js";
+import {
+  createTooltip,
+  hideTooltip,
+  renderChartTitle,
+  showTooltip
+} from "./chunk-U6EQI3U6.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_PAD,
+  measureLegendText,
+  truncateLegendText
+} from "./chunk-QOOUC2J5.js";
+import {
+  parseTimelineDate
+} from "./chunk-GMR5MFHJ.js";
+import {
+  getSeriesColors,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/timeline/renderer.ts
+import * as d3Scale from "d3-scale";
+import * as d3Selection from "d3-selection";
+function getEraColors(palette) {
+  return [
+    palette.colors.blue,
+    palette.colors.green,
+    palette.colors.yellow,
+    palette.colors.orange,
+    palette.colors.purple
+  ];
+}
+function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, hasScale = false, _tooltip = null, palette, reservedLabelY) {
+  const eraColors = palette ? getEraColors(palette) : ["#3b6ea5", "#5b9357", "#c9a227", "#cc7a33", "#7d5ba6"];
+  eras.forEach((era, i) => {
+    const startVal = parseTimelineDate(era.startDate);
+    const endVal = parseTimelineDate(era.endDate);
+    if (!Number.isFinite(startVal) || !Number.isFinite(endVal)) return;
+    const start = scale(startVal);
+    const end = scale(endVal);
+    if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+    const color = era.color || eraColors[i % eraColors.length];
+    const eraG = g.append("g").attr("class", "tl-era").attr("data-line-number", String(era.lineNumber)).attr("data-era-start", String(startVal)).attr("data-era-end", String(endVal)).style("cursor", "pointer");
+    let labelEl;
+    let displayLabel = era.label;
+    let truncated = false;
+    if (isVertical) {
+      const y = Math.min(start, end);
+      const h = Math.abs(end - start);
+      eraG.append("rect").attr("x", 0).attr("y", y).attr("width", innerWidth).attr("height", h).attr("fill", color).attr("opacity", 0.08);
+      labelEl = eraG.append("text").attr("x", 6).attr("y", y + 18).attr("text-anchor", "start").attr("fill", color).attr("font-size", "13px").attr("font-weight", "600").attr("opacity", 0.8).text(displayLabel);
+    } else {
+      const x = Math.min(start, end);
+      const w = Math.abs(end - start);
+      const useReservedRow = reservedLabelY != null;
+      const rectTop = useReservedRow ? 0 : hasScale ? -48 : 0;
+      const labelY = useReservedRow ? reservedLabelY : hasScale ? -32 : 18;
+      eraG.append("rect").attr("x", x).attr("y", rectTop).attr("width", w).attr("height", innerHeight - rectTop).attr("fill", color).attr("opacity", 0.08);
+      if (useReservedRow) {
+        const maxW = Math.max(0, w - 8);
+        displayLabel = truncateLegendText(era.label, 13, maxW);
+        truncated = displayLabel !== era.label;
+      }
+      labelEl = eraG.append("text").attr("x", x + w / 2).attr("y", labelY).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "13px").attr("font-weight", "600").attr("opacity", 0.8).text(displayLabel);
+    }
+    eraG.on("mouseenter", function() {
+      onEnter(startVal, endVal);
+      if (truncated) labelEl.text(era.label);
+    }).on("mouseleave", function() {
+      onLeave();
+      if (truncated) labelEl.text(displayLabel);
+    });
+  });
+}
+function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, _hasScale = false, _tooltip = null, palette, reservedLabelY) {
+  const defaultColor = palette?.accent || "#3a9188";
+  const positions = markers.map((m) => {
+    const v = parseTimelineDate(m.date);
+    return Number.isFinite(v) ? scale(v) : NaN;
+  });
+  const useReservedRow = reservedLabelY != null && !isVertical;
+  markers.forEach((marker, i) => {
+    const dateVal = parseTimelineDate(marker.date);
+    if (!Number.isFinite(dateVal)) return;
+    const pos = positions[i];
+    if (!Number.isFinite(pos)) return;
+    const color = marker.color || defaultColor;
+    const lineOpacity = 0.5;
+    const diamondSize = 5;
+    const markerG = g.append("g").attr("class", "tl-marker").attr("data-marker-date", String(dateVal)).attr("data-line-number", String(marker.lineNumber)).style("cursor", "pointer");
+    if (isVertical) {
+      markerG.append("line").attr("x1", 0).attr("y1", pos).attr("x2", innerWidth).attr("y2", pos).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "6 4").attr("opacity", lineOpacity);
+      markerG.append("text").attr("x", -diamondSize - 8).attr("y", pos - diamondSize - 4).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "11px").attr("font-weight", "600").text(marker.label);
+      markerG.append("path").attr(
+        "d",
+        `M${-diamondSize - 8},${pos} l${diamondSize},-${diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} Z`
+      ).attr("fill", color).attr("opacity", 0.9);
+      markerG.on("mouseenter", function() {
+        onEnter(dateVal);
+      }).on("mouseleave", function() {
+        onLeave();
+      });
+    } else {
+      const labelY = useReservedRow ? reservedLabelY : 6;
+      const diamondY = useReservedRow ? -(diamondSize + 1) : labelY + 14;
+      const lineTop = diamondY + diamondSize;
+      let displayLabel = marker.label;
+      let truncated = false;
+      if (useReservedRow) {
+        let nearestDist = Math.min(pos, innerWidth - pos);
+        for (let j = 0; j < positions.length; j++) {
+          if (j === i) continue;
+          const other = positions[j];
+          if (!Number.isFinite(other)) continue;
+          const d = Math.abs(other - pos);
+          if (d < nearestDist) nearestDist = d;
+        }
+        const maxW = Math.max(0, nearestDist - 8);
+        displayLabel = truncateLegendText(marker.label, 11, maxW);
+        truncated = displayLabel !== marker.label;
+      }
+      const labelEl = markerG.append("text").attr("x", pos).attr("y", labelY).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "11px").attr("font-weight", "600").text(displayLabel);
+      markerG.append("path").attr(
+        "d",
+        `M${pos},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`
+      ).attr("fill", color).attr("opacity", 0.9);
+      markerG.append("line").attr("x1", pos).attr("y1", lineTop).attr("x2", pos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "6 4").attr("opacity", lineOpacity);
+      markerG.on("mouseenter", function() {
+        onEnter(dateVal);
+        if (truncated) labelEl.text(marker.label);
+      }).on("mouseleave", function() {
+        onLeave();
+        if (truncated) labelEl.text(displayLabel);
+      });
+    }
+  });
+}
+function formatDateLabel(dateStr) {
+  let bce = false;
+  if (dateStr.startsWith("-")) {
+    bce = true;
+    dateStr = dateStr.slice(1);
+  }
+  const era = bce ? " BCE" : "";
+  const spaceIdx = dateStr.indexOf(" ");
+  let datePart = dateStr;
+  let timeSuffix = "";
+  if (spaceIdx !== -1) {
+    datePart = dateStr.slice(0, spaceIdx);
+    timeSuffix = " " + dateStr.slice(spaceIdx + 1);
+  }
+  const parts = datePart.split("-");
+  const year = String(parseInt(parts[0], 10));
+  if (parts.length === 1) return `${year}${timeSuffix}${era}`;
+  const month = MONTH_ABBR[parseInt(parts[1], 10) - 1];
+  if (parts.length === 2) return `${month} ${year}${timeSuffix}${era}`;
+  const day = parseInt(parts[2], 10);
+  return `${month} ${day}, ${year}${timeSuffix}${era}`;
+}
+function formatBoundaryLabel(dateStr, otherDateStr) {
+  const spaceIdx = dateStr.indexOf(" ");
+  const otherSpaceIdx = otherDateStr.indexOf(" ");
+  if (spaceIdx !== -1 && otherSpaceIdx !== -1) {
+    const datePart = dateStr.slice(0, spaceIdx);
+    const otherDatePart = otherDateStr.slice(0, otherSpaceIdx);
+    if (datePart === otherDatePart) {
+      return dateStr.slice(spaceIdx + 1);
+    }
+  }
+  return formatDateLabel(dateStr);
+}
+function renderTimeScale(g, scale, isVertical, innerWidth, innerHeight, textColor, boundaryStart, boundaryEnd, boundaryStartLabel, boundaryEndLabel) {
+  const [domainMin, domainMax] = scale.domain();
+  const ticks = computeTimeTicks(
+    domainMin,
+    domainMax,
+    scale,
+    boundaryStart,
+    boundaryEnd,
+    boundaryStartLabel,
+    boundaryEndLabel
+  );
+  if (ticks.length < 2) return;
+  const tickLen = 6;
+  const opacity = 0.4;
+  const guideOpacity = 0.15;
+  for (const tick of ticks) {
+    if (isVertical) {
+      g.append("line").attr("x1", 0).attr("y1", tick.pos).attr("x2", innerWidth).attr("y2", tick.pos).attr("stroke", textColor).attr("stroke-width", 1).attr("stroke-dasharray", "4 4").attr("opacity", guideOpacity);
+      g.append("line").attr("x1", -tickLen).attr("y1", tick.pos).attr("x2", 0).attr("y2", tick.pos).attr("stroke", textColor).attr("stroke-width", 1).attr("opacity", opacity);
+      g.append("text").attr("x", -tickLen - 3).attr("y", tick.pos).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", textColor).attr("font-size", "10px").attr("opacity", opacity).text(tick.label);
+      g.append("line").attr("x1", innerWidth).attr("y1", tick.pos).attr("x2", innerWidth + tickLen).attr("y2", tick.pos).attr("stroke", textColor).attr("stroke-width", 1).attr("opacity", opacity);
+      g.append("text").attr("x", innerWidth + tickLen + 3).attr("y", tick.pos).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "10px").attr("opacity", opacity).text(tick.label);
+    } else {
+      g.append("line").attr("class", "tl-scale-tick").attr("x1", tick.pos).attr("y1", 0).attr("x2", tick.pos).attr("y2", innerHeight).attr("stroke", textColor).attr("stroke-width", 1).attr("stroke-dasharray", "4 4").attr("opacity", guideOpacity);
+      g.append("line").attr("class", "tl-scale-tick").attr("x1", tick.pos).attr("y1", innerHeight).attr("x2", tick.pos).attr("y2", innerHeight + tickLen).attr("stroke", textColor).attr("stroke-width", 1).attr("opacity", opacity);
+      g.append("text").attr("class", "tl-scale-tick").attr("x", tick.pos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "10px").attr("opacity", opacity).text(tick.label);
+      g.append("line").attr("class", "tl-scale-tick").attr("x1", tick.pos).attr("y1", -tickLen).attr("x2", tick.pos).attr("y2", 0).attr("stroke", textColor).attr("stroke-width", 1).attr("opacity", opacity);
+      g.append("text").attr("class", "tl-scale-tick").attr("x", tick.pos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "10px").attr("opacity", opacity).text(tick.label);
+    }
+  }
+}
+function showEventDatesOnScale(g, scale, startDate, endDate, innerHeight, accentColor) {
+  g.selectAll(".tl-scale-tick").attr("opacity", 0.1);
+  const tickLen = 6;
+  const startPos = scale(parseTimelineDate(startDate));
+  const startLabel = formatDateLabel(startDate);
+  g.append("line").attr("class", "tl-event-date").attr("x1", startPos).attr("y1", -tickLen).attr("x2", startPos).attr("y2", innerHeight).attr("stroke", accentColor).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
+  g.append("text").attr("class", "tl-event-date").attr("x", startPos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", accentColor).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
+  g.append("text").attr("class", "tl-event-date").attr("x", startPos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", accentColor).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
+  if (endDate) {
+    const endPos = scale(parseTimelineDate(endDate));
+    const endLabel = formatDateLabel(endDate);
+    g.append("line").attr("class", "tl-event-date").attr("x1", endPos).attr("y1", -tickLen).attr("x2", endPos).attr("y2", innerHeight).attr("stroke", accentColor).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
+    g.append("text").attr("class", "tl-event-date").attr("x", endPos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", accentColor).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
+    g.append("text").attr("class", "tl-event-date").attr("x", endPos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", accentColor).attr("font-size", "10px").attr("font-weight", "600").text(endLabel);
+  }
+}
+function hideEventDatesOnScale(g) {
+  g.selectAll(".tl-event-date").remove();
+  g.selectAll(".tl-scale-tick").each(function() {
+    const el = d3Selection.select(this);
+    const isDashed = el.attr("stroke-dasharray");
+    el.attr("opacity", isDashed ? 0.15 : 0.4);
+  });
+}
+function buildEventTooltipHtml(ev) {
+  const datePart = ev.endDate ? `${formatDateLabel(ev.date)} \u2192 ${formatDateLabel(ev.endDate)}` : formatDateLabel(ev.date);
+  return `<strong>${ev.label}</strong><br>${datePart}`;
+}
+function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette, isDark, legendY, onHover, onLeave) {
+  const PILL_H = 22;
+  const DOT_R = 4;
+  const DOT_GAP = 4;
+  const PAD_X = 10;
+  const FONT_SIZE = 11;
+  const GAP = 8;
+  const pillBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+  let legendX = 0;
+  for (const grp of groups) {
+    const color = groupColorMap.get(grp.name) ?? textColor;
+    const textW = measureLegendText(grp.name, FONT_SIZE);
+    const pillW = PAD_X + DOT_R * 2 + DOT_GAP + textW + PAD_X;
+    const itemG = g.append("g").attr("class", "tl-legend-item").attr("data-group", grp.name).style("cursor", "pointer").on("mouseenter", () => onHover(grp.name)).on("mouseleave", () => onLeave());
+    itemG.append("rect").attr("x", legendX).attr("y", legendY - PILL_H / 2).attr("width", pillW).attr("height", PILL_H).attr("rx", PILL_H / 2).attr("fill", pillBg);
+    itemG.append("circle").attr("cx", legendX + PAD_X + DOT_R).attr("cy", legendY).attr("r", DOT_R).attr("fill", color);
+    itemG.append("text").attr("x", legendX + PAD_X + DOT_R * 2 + DOT_GAP).attr("y", legendY).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${FONT_SIZE}px`).attr("font-family", FONT_FAMILY).text(grp.name);
+    legendX += pillW + GAP;
+  }
+}
+function setupTimeline(container, parsed, palette, isDark, exportDims, activeTagGroup, swimlaneTagGroup) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const solid = parsed.solidFill === true;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineSort,
+    orientation
+  } = parsed;
+  if (timelineEvents.length === 0) return null;
+  let resolvedSwimlaneTG = swimlaneTagGroup ?? null;
+  if (resolvedSwimlaneTG == null && timelineSort === "tag" && parsed.timelineDefaultSwimlaneTG) {
+    resolvedSwimlaneTG = parsed.timelineDefaultSwimlaneTG;
+  }
+  const tooltip = createTooltip(container, palette, isDark);
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return null;
+  const isVertical = orientation === "vertical";
+  const textColor = palette.text;
+  const mutedColor = palette.border;
+  const bgColor = palette.bg;
+  const bg = themeBaseBg(palette, isDark);
+  const colors = getSeriesColors(palette);
+  const groupColorMap = /* @__PURE__ */ new Map();
+  timelineGroups.forEach((grp, i) => {
+    groupColorMap.set(grp.name, grp.color ?? colors[i % colors.length]);
+  });
+  let tagLanes = null;
+  if (resolvedSwimlaneTG) {
+    const tagKey = tagAttrKey(resolvedSwimlaneTG);
+    const tagGroup = parsed.timelineTagGroups.find(
+      (g) => g.name.toLowerCase() === tagKey
+    );
+    if (tagGroup) {
+      const buckets = /* @__PURE__ */ new Map();
+      const otherEvents = [];
+      for (const ev of timelineEvents) {
+        const val = ev.metadata[tagKey];
+        if (val) {
+          const list = buckets.get(val) ?? [];
+          list.push(ev);
+          buckets.set(val, list);
+        } else {
+          otherEvents.push(ev);
+        }
+      }
+      const laneEntries = [...buckets.entries()].sort((a, b) => {
+        const aMin = Math.min(...a[1].map((e) => parseTimelineDate(e.date)));
+        const bMin = Math.min(...b[1].map((e) => parseTimelineDate(e.date)));
+        return aMin - bMin;
+      });
+      tagLanes = laneEntries.map(([name, events]) => ({ name, events }));
+      if (otherEvents.length > 0) {
+        tagLanes.push({ name: "(Other)", events: otherEvents });
+      }
+      for (const entry of tagGroup.entries) {
+        groupColorMap.set(entry.value, entry.color);
+      }
+    }
+  }
+  const effectiveColorTG = activeTagGroup ?? resolvedSwimlaneTG ?? null;
+  function eventColor(ev) {
+    if (effectiveColorTG) {
+      const tagColor = resolveTagColor(
+        ev.metadata,
+        parsed.timelineTagGroups,
+        effectiveColorTG
+      );
+      if (tagColor) return tagColor;
+    }
+    if (ev.group && groupColorMap.has(ev.group)) {
+      return groupColorMap.get(ev.group);
+    }
+    return textColor;
+  }
+  let minDate = Infinity;
+  let maxDate = -Infinity;
+  let earliestStartDateStr = "";
+  let latestEndDateStr = "";
+  for (const ev of timelineEvents) {
+    const startNum = parseTimelineDate(ev.date);
+    const endNum = ev.endDate ? parseTimelineDate(ev.endDate) : startNum;
+    if (startNum < minDate) {
+      minDate = startNum;
+      earliestStartDateStr = ev.date;
+    }
+    if (endNum > maxDate) {
+      maxDate = endNum;
+      latestEndDateStr = ev.endDate ?? ev.date;
+    }
+  }
+  for (const era of timelineEras) {
+    const eraStartNum = parseTimelineDate(era.startDate);
+    const eraEndNum = parseTimelineDate(era.endDate);
+    if (Number.isFinite(eraStartNum) && eraStartNum < minDate) {
+      minDate = eraStartNum;
+      earliestStartDateStr = era.startDate;
+    }
+    if (Number.isFinite(eraEndNum) && eraEndNum > maxDate) {
+      maxDate = eraEndNum;
+      latestEndDateStr = era.endDate;
+    }
+  }
+  for (const marker of timelineMarkers) {
+    const markerNum = parseTimelineDate(marker.date);
+    if (!Number.isFinite(markerNum)) continue;
+    if (markerNum < minDate) {
+      minDate = markerNum;
+      earliestStartDateStr = marker.date;
+    }
+    if (markerNum > maxDate) {
+      maxDate = markerNum;
+      latestEndDateStr = marker.date;
+    }
+  }
+  const datePadding = (maxDate - minDate) * 0.05 || 0.5;
+  const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
+  const idealWidth = isVertical ? 500 : Math.max(600, timelineEvents.length * 40 + 200);
+  const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(width, idealWidth);
+  return {
+    width,
+    height,
+    isVertical,
+    tooltip,
+    solid,
+    textColor,
+    mutedColor,
+    bgColor,
+    bg,
+    swimlaneTagGroup: resolvedSwimlaneTG,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve,
+    ctx
+  };
+}
+function makeTimelineHoverHelpers() {
+  const FADE_OPACITY = 0.1;
+  function fadeToGroup(g, groupName) {
+    g.selectAll(".tl-event").each(function() {
+      const el = d3Selection.select(this);
+      const evGroup = el.attr("data-group");
+      el.attr("opacity", evGroup === groupName ? 1 : FADE_OPACITY);
+    });
+    g.selectAll(".tl-legend-item, .tl-lane-header").each(
+      function() {
+        const el = d3Selection.select(this);
+        const name = el.attr("data-group");
+        el.attr("opacity", name === groupName ? 1 : FADE_OPACITY);
+      }
+    );
+    g.selectAll(".tl-marker").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+  }
+  function fadeToEra(g, eraStart, eraEnd) {
+    g.selectAll(".tl-event").each(function() {
+      const el = d3Selection.select(this);
+      const date = parseFloat(el.attr("data-date"));
+      const endDate = el.attr("data-end-date");
+      const evEnd = endDate ? parseFloat(endDate) : date;
+      const inside = evEnd >= eraStart && date <= eraEnd;
+      el.attr("opacity", inside ? 1 : FADE_OPACITY);
+    });
+    g.selectAll(".tl-legend-item, .tl-lane-header").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-era").each(function() {
+      const el = d3Selection.select(this);
+      const s = parseFloat(el.attr("data-era-start"));
+      const e = parseFloat(el.attr("data-era-end"));
+      const isSelf = s === eraStart && e === eraEnd;
+      el.attr("opacity", isSelf ? 1 : FADE_OPACITY);
+    });
+    g.selectAll(".tl-marker").each(function() {
+      const el = d3Selection.select(this);
+      const date = parseFloat(el.attr("data-marker-date"));
+      const inside = date >= eraStart && date <= eraEnd;
+      el.attr("opacity", inside ? 1 : FADE_OPACITY);
+    });
+  }
+  function fadeToMarker(g, markerDate) {
+    g.selectAll(".tl-event").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-era").attr("opacity", FADE_OPACITY);
+    g.selectAll(".tl-legend-item, .tl-lane-header").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-marker").each(function() {
+      const el = d3Selection.select(this);
+      const date = parseFloat(el.attr("data-marker-date"));
+      el.attr("opacity", date === markerDate ? 1 : FADE_OPACITY);
+    });
+  }
+  function fadeReset(g) {
+    g.selectAll(
+      ".tl-event, .tl-legend-item, .tl-lane-header, .tl-marker, .tl-tag-legend-entry"
+    ).attr("opacity", 1);
+    g.selectAll(".tl-era").attr("opacity", 1);
+  }
+  function fadeToTagValue(g, tagKey, tagValue) {
+    const attrName = `data-tag-${tagKey}`;
+    g.selectAll(".tl-event").each(function() {
+      const el = d3Selection.select(this);
+      const val = el.attr(attrName);
+      el.attr("opacity", val === tagValue ? 1 : FADE_OPACITY);
+    });
+    g.selectAll(".tl-legend-item, .tl-lane-header").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-marker").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-tag-legend-entry").each(function() {
+      const el = d3Selection.select(this);
+      const entryValue = el.attr("data-legend-entry");
+      if (entryValue === "__group__") return;
+      const entryGroup = el.attr("data-tag-group");
+      el.attr(
+        "opacity",
+        entryGroup === tagKey && entryValue === tagValue ? 1 : FADE_OPACITY
+      );
+    });
+  }
+  function setTagAttrs(evG, ev) {
+    for (const [key, value] of Object.entries(ev.metadata)) {
+      evG.attr(`data-tag-${key}`, value.toLowerCase());
+    }
+  }
+  return {
+    FADE_OPACITY,
+    fadeToGroup,
+    fadeToEra,
+    fadeToMarker,
+    fadeReset,
+    fadeToTagValue,
+    setTagAttrs
+  };
+}
+function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, swimlaneTagGroup, activeTagGroup, onTagStateChange, viewMode, exportMode) {
+  if (parsed.timelineTagGroups.length === 0) return;
+  const { width, textColor, groupColorMap, solid } = setup;
+  const { FADE_OPACITY, fadeReset, fadeToTagValue } = hovers;
+  const title = parsed.noTitle ? null : parsed.title;
+  const { timelineEvents } = parsed;
+  const LG_HEIGHT = LEGEND_HEIGHT;
+  const LG_PILL_PAD = LEGEND_PILL_PAD;
+  const LG_PILL_FONT_SIZE = LEGEND_PILL_FONT_SIZE;
+  const LG_CAPSULE_PAD = LEGEND_CAPSULE_PAD;
+  const LG_DOT_R = LEGEND_DOT_R;
+  const LG_ENTRY_FONT_SIZE = LEGEND_ENTRY_FONT_SIZE;
+  const LG_ENTRY_DOT_GAP = LEGEND_ENTRY_DOT_GAP;
+  const LG_ENTRY_TRAIL = LEGEND_ENTRY_TRAIL;
+  const LG_ICON_W = 20;
+  const mainSvg = d3Selection.select(container).select("svg");
+  const mainG = mainSvg.select("g");
+  if (!mainSvg.empty() && !mainG.empty()) {
+    let drawSwimlaneIcon2 = function(parent, x, y, isSwimActive) {
+      const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
+      iconG.append("rect").attr("x", -5).attr("y", -5).attr("width", 22).attr("height", 20).attr("fill", "transparent");
+      const barColor = isSwimActive ? palette.primary : palette.textMuted;
+      const barOpacity = isSwimActive ? 1 : 0.35;
+      const bars = [
+        { y: 0, w: 8 },
+        { y: 4, w: 12 },
+        { y: 8, w: 6 }
+      ];
+      for (const bar of bars) {
+        iconG.append("rect").attr("x", 0).attr("y", bar.y).attr("width", bar.w).attr("height", 2).attr("rx", 1).attr("fill", barColor).attr("opacity", barOpacity);
+      }
+      return iconG;
+    }, relayout2 = function() {
+      renderTimeline(
+        container,
+        parsed,
+        palette,
+        isDark,
+        onClickItem,
+        exportDims,
+        currentActiveGroup,
+        currentSwimlaneGroup,
+        onTagStateChange,
+        viewMode
+      );
+    }, drawLegend2 = function() {
+      mainSvg.selectAll(".tl-tag-legend-group").remove();
+      mainSvg.selectAll(".tl-tag-legend-container").remove();
+      const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
+      const visibleGroups = viewMode ? legendGroups.filter(
+        (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
+      ) : legendGroups;
+      if (visibleGroups.length === 0) return;
+      const legendContainer = mainSvg.append("g").attr("class", "tl-tag-legend-container");
+      if (currentActiveGroup) {
+        legendContainer.attr(
+          "data-legend-active",
+          tagAttrKey(currentActiveGroup)
+        );
+      }
+      const iconAddon = viewMode ? 0 : LG_ICON_W;
+      const centralGroups = visibleGroups.map((lg) => ({
+        name: lg.group.name,
+        entries: lg.group.entries.map((e) => ({
+          value: e.value,
+          color: e.color
+        }))
+      }));
+      const centralActive = viewMode ? effectiveColorKey : currentActiveGroup;
+      const centralConfig = {
+        groups: centralGroups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: exportMode ? "export" : "preview",
+        capsulePillAddonWidth: iconAddon
+      };
+      const centralCallbacks = viewMode ? {} : {
+        onGroupToggle: (groupName) => {
+          currentActiveGroup = currentActiveGroup === groupName.toLowerCase() ? null : groupName.toLowerCase();
+          drawLegend2();
+          recolorEvents2();
+          onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+        },
+        onEntryHover: (groupName, entryValue) => {
+          const tagKey = tagAttrKey(groupName);
+          if (entryValue) {
+            const tagVal = entryValue.toLowerCase();
+            fadeToTagValue(mainG, tagKey, tagVal);
+            mainSvg.selectAll("[data-legend-entry]").each(function() {
+              const el = d3Selection.select(this);
+              const ev = el.attr("data-legend-entry");
+              const eg = el.attr("data-tag-group") ?? el.node()?.closest?.("[data-tag-group]")?.getAttribute("data-tag-group");
+              el.attr(
+                "opacity",
+                eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY
+              );
+            });
+          } else {
+            fadeReset(mainG);
+            mainSvg.selectAll("[data-legend-entry]").attr("opacity", 1);
+          }
+        },
+        onGroupRendered: (groupName, groupEl, isActive) => {
+          const groupKey = tagAttrKey(groupName);
+          groupEl.attr("data-tag-group", groupKey);
+          if (isActive && !viewMode) {
+            const isSwimActive = currentSwimlaneGroup?.toLowerCase() === groupKey;
+            const pillWidth = measureLegendText(groupName, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+            const pillXOff = LG_CAPSULE_PAD;
+            const iconX = pillXOff + pillWidth + 5;
+            const iconY = (LG_HEIGHT - 10) / 2;
+            const iconEl = drawSwimlaneIcon2(
+              groupEl,
+              iconX,
+              iconY,
+              isSwimActive
+            );
+            iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
+              event.stopPropagation();
+              currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
+              onTagStateChange?.(
+                currentActiveGroup,
+                currentSwimlaneGroup
+              );
+              relayout2();
+            });
+          }
+        }
+      };
+      const legendInnerG = legendContainer.append("g").attr("transform", `translate(0, ${legendY})`);
+      renderIntegratedLegend(legendInnerG, {
+        ...centralConfig,
+        palette,
+        isDark,
+        width,
+        activeGroup: centralActive,
+        callbacks: centralCallbacks
+      });
+    }, recolorEvents2 = function() {
+      const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
+      mainG.selectAll(".tl-event").each(function() {
+        const el = d3Selection.select(this);
+        const lineNum = el.attr("data-line-number");
+        const ev = lineNum ? eventByLine.get(lineNum) : void 0;
+        if (!ev) return;
+        let color;
+        if (colorTG) {
+          const tagColor = resolveTagColor(
+            ev.metadata,
+            parsed.timelineTagGroups,
+            colorTG
+          );
+          color = tagColor ?? (ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor);
+        } else {
+          color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
+        }
+        el.selectAll("rect").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
+        el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color);
+      });
+    };
+    var drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
+    const legendY = title ? 50 : 10;
+    const legendGroups = parsed.timelineTagGroups.map((g) => {
+      const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+      const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
+      let entryX = LG_CAPSULE_PAD + pillW + iconSpace;
+      for (const entry of g.entries) {
+        const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
+        entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
+      }
+      return {
+        group: g,
+        minifiedWidth: pillW,
+        expandedWidth: entryX + LG_CAPSULE_PAD
+      };
+    });
+    let currentActiveGroup = activeTagGroup ?? null;
+    let currentSwimlaneGroup = swimlaneTagGroup ?? null;
+    const eventByLine = /* @__PURE__ */ new Map();
+    for (const ev of timelineEvents) {
+      eventByLine.set(String(ev.lineNumber), ev);
+    }
+    drawLegend2();
+  }
+}
+function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve,
+    ctx
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineScale
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const sBarH = ctx.structural(22);
+  const sPointR = ctx.structural(5);
+  const sPointStroke = ctx.structural(2);
+  const sBarRx = ctx.structural(4);
+  const sBarStroke = ctx.structural(2);
+  const sEventFont = ctx.text(13);
+  const sEventFontSm = ctx.text(12);
+  const sCharW = ctx.structural(7);
+  const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
+  const scaleMargin = timelineScale ? ctx.aesthetic(24) : 0;
+  const ERA_ROW_H = ctx.structural(22);
+  const MARKER_ROW_H = ctx.structural(22);
+  const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
+  const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
+  const topScaleH = timelineScale ? ctx.structural(40) : 0;
+  const margin = {
+    top: ctx.aesthetic(104) + topScaleH + eraReserve + markerReserve + tagLegendReserve,
+    right: ctx.aesthetic(40),
+    bottom: ctx.aesthetic(40) + scaleMargin,
+    left: ctx.aesthetic(60)
+  };
+  const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
+  const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
+  const innerWidth = width - margin.left - margin.right;
+  const rowH = ctx.structural(28);
+  const innerHeight = rowH * sorted.length;
+  const usedHeight = margin.top + innerHeight + margin.bottom;
+  const fitToContainer = !exportDims && height > 0 && usedHeight > height;
+  const svgHeight = fitToContainer ? height : usedHeight;
+  const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", svgHeight).attr("viewBox", `0 0 ${width} ${usedHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+  if (ctx.isBelowFloor && !fitToContainer) {
+    svg.attr("width", "100%");
+  }
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
+  renderEras(
+    g,
+    timelineEras,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (s, e) => fadeToEra(g, s, e),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    eraReserve ? eraLabelY : void 0
+  );
+  renderMarkers(
+    g,
+    timelineMarkers,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (d) => fadeToMarker(g, d),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    markerReserve ? markerLabelY : void 0
+  );
+  if (timelineScale) {
+    renderTimeScale(
+      g,
+      xScale,
+      false,
+      innerWidth,
+      innerHeight,
+      textColor,
+      minDate,
+      maxDate,
+      formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+      formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+    );
+  }
+  if (timelineGroups.length > 0) {
+    const legendY = timelineScale ? -ctx.aesthetic(75) : -ctx.aesthetic(55);
+    renderTimelineGroupLegend(
+      g,
+      timelineGroups,
+      groupColorMap,
+      textColor,
+      palette,
+      isDark,
+      legendY,
+      (name) => fadeToGroup(g, name),
+      () => fadeReset(g)
+    );
+  }
+  sorted.forEach((ev, i) => {
+    const y = i * rowH + rowH / 2;
+    const x = xScale(parseTimelineDate(ev.date));
+    const color = eventColor(ev);
+    const evG = g.append("g").attr("class", "tl-event").attr("data-group", ev.group || "").attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+      "data-end-date",
+      ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+    ).style("cursor", "pointer").on("mouseenter", function(event) {
+      if (ev.group && timelineGroups.length > 0) fadeToGroup(g, ev.group);
+      if (timelineScale) {
+        showEventDatesOnScale(
+          g,
+          xScale,
+          ev.date,
+          ev.endDate,
+          innerHeight,
+          color
+        );
+      } else {
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+      }
+    }).on("mouseleave", function() {
+      fadeReset(g);
+      if (timelineScale) {
+        hideEventDatesOnScale(g);
+      } else {
+        hideTooltip(tooltip);
+      }
+    }).on("mousemove", function(event) {
+      if (!timelineScale) {
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+      }
+    }).on("click", () => {
+      if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+    });
+    setTagAttrs(evG, ev);
+    if (ev.endDate) {
+      const x2 = xScale(parseTimelineDate(ev.endDate));
+      const rectW = Math.max(x2 - x, 4);
+      const estLabelWidth = ev.label.length * sCharW + ctx.aesthetic(16);
+      const labelFitsInside = rectW >= estLabelWidth;
+      let fill = shapeFill(palette, color, isDark, { solid });
+      let stroke = color;
+      if (ev.uncertain) {
+        const gradientId = `uncertain-ts-${ev.lineNumber}`;
+        const strokeGradientId = `uncertain-ts-s-${ev.lineNumber}`;
+        const defs = svg.select("defs").node() || svg.append("defs").node();
+        const defsEl = d3Selection.select(defs);
+        defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          { offset: "0%", opacity: 1 },
+          { offset: "80%", opacity: 1 },
+          { offset: "100%", opacity: 0 }
+        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+        defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          { offset: "0%", opacity: 1 },
+          { offset: "80%", opacity: 1 },
+          { offset: "100%", opacity: 0 }
+        ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", color).attr("stop-opacity", (d) => d.opacity);
+        fill = `url(#${gradientId})`;
+        stroke = `url(#${strokeGradientId})`;
+      }
+      evG.append("rect").attr("x", x).attr("y", y - sBarH / 2).attr("width", rectW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sBarStroke);
+      if (labelFitsInside) {
+        evG.append("text").attr("x", x + ctx.aesthetic(8)).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
+      } else {
+        const sLabelGap = ctx.aesthetic(6);
+        const wouldFlipLeft = x + rectW > innerWidth * 0.6;
+        const labelFitsLeft = x - sLabelGap - estLabelWidth > 0;
+        const flipLeft = wouldFlipLeft && labelFitsLeft;
+        evG.append("text").attr("x", flipLeft ? x - sLabelGap : x + rectW + sLabelGap).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
+      }
+    } else {
+      const estLabelWidth = ev.label.length * sCharW;
+      const sPointGap = ctx.aesthetic(10);
+      const wouldFlipLeft = x > innerWidth * 0.6;
+      const labelFitsLeft = x - sPointGap - estLabelWidth > 0;
+      const flipLeft = wouldFlipLeft && labelFitsLeft;
+      evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", sPointStroke);
+      evG.append("text").attr("x", flipLeft ? x - sPointGap : x + sPointGap).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
+    }
+  });
+}
+function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode, collapsedGroups, toggleGroup) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve,
+    ctx
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineScale
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const sBarH = ctx.structural(22);
+  const sGroupGap = ctx.aesthetic(12);
+  const sPointR = ctx.structural(5);
+  const sPointStroke = ctx.structural(2);
+  const sBarRx = ctx.structural(4);
+  const sBarStroke = ctx.structural(2);
+  const sEventFont = ctx.text(13);
+  const sCharW = ctx.structural(7);
+  const sLaneHeaderFont = ctx.text(12);
+  let lanes;
+  if (tagLanes) {
+    lanes = tagLanes;
+  } else {
+    const groupNames = timelineGroups.map((gr) => gr.name);
+    const ungroupedEvents = timelineEvents.filter(
+      (ev) => ev.group === null || !groupNames.includes(ev.group)
+    );
+    const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+    lanes = laneNames.map((name) => ({
+      name,
+      events: timelineEvents.filter(
+        (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+      )
+    }));
+  }
+  const totalRows = lanes.reduce((s, l) => {
+    if (collapsedGroups.has(l.name)) return s + 1;
+    return s + l.events.length + 1;
+  }, 0);
+  const scaleMargin = timelineScale ? ctx.aesthetic(24) : 0;
+  const ERA_ROW_H = ctx.structural(22);
+  const MARKER_ROW_H = ctx.structural(22);
+  const eraReserve = timelineEras.length > 0 ? ERA_ROW_H : 0;
+  const markerReserve = timelineMarkers.length > 0 ? MARKER_ROW_H : 0;
+  const topScaleH = timelineScale ? ctx.structural(40) : 0;
+  const maxGroupNameLen = Math.max(...lanes.map((l) => l.name.length)) + 2;
+  const maxEventLabelLen = Math.max(
+    0,
+    ...lanes.flatMap((l) => l.events.map((ev) => ev.label.length + 2))
+  );
+  const maxLeftLabelLen = Math.max(maxGroupNameLen, maxEventLabelLen);
+  const dynamicLeftMargin = Math.max(
+    ctx.aesthetic(140),
+    maxLeftLabelLen * sCharW + ctx.aesthetic(30)
+  );
+  const baseTopMargin = title ? ctx.aesthetic(50) : ctx.aesthetic(20);
+  const margin = {
+    top: baseTopMargin + topScaleH + eraReserve + markerReserve + tagLegendReserve,
+    right: ctx.aesthetic(40),
+    bottom: ctx.aesthetic(40) + scaleMargin,
+    left: dynamicLeftMargin
+  };
+  const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
+  const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
+  const innerWidth = width - margin.left - margin.right;
+  const totalGaps = (lanes.length - 1) * sGroupGap;
+  const rowH = ctx.structural(28);
+  const innerHeight = rowH * totalRows + totalGaps;
+  const usedHeight = margin.top + innerHeight + margin.bottom;
+  const fitToContainer = !exportDims && height > 0 && usedHeight > height;
+  const svgHeight = fitToContainer ? height : usedHeight;
+  const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", svgHeight).attr("viewBox", `0 0 ${width} ${usedHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+  if (ctx.isBelowFloor && !fitToContainer) {
+    svg.attr("width", "100%");
+  }
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  renderChartTitle(
+    svg,
+    title,
+    parsed.titleLineNumber,
+    width,
+    textColor,
+    onClickItem
+  );
+  renderEras(
+    g,
+    timelineEras,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (s, e) => fadeToEra(g, s, e),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    eraReserve ? eraLabelY : void 0
+  );
+  renderMarkers(
+    g,
+    timelineMarkers,
+    xScale,
+    false,
+    innerWidth,
+    innerHeight,
+    (d) => fadeToMarker(g, d),
+    () => fadeReset(g),
+    timelineScale,
+    tooltip,
+    palette,
+    markerReserve ? markerLabelY : void 0
+  );
+  if (timelineScale) {
+    renderTimeScale(
+      g,
+      xScale,
+      false,
+      innerWidth,
+      innerHeight,
+      textColor,
+      minDate,
+      maxDate,
+      formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+      formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+    );
+  }
+  let curY = 0;
+  for (const lane of lanes) {
+    const laneColor = groupColorMap.get(lane.name) ?? textColor;
+    const isCollapsed = collapsedGroups.has(lane.name);
+    const toggleIcon = isCollapsed ? "\u25B6" : "\u25BC";
+    const bandX = -margin.left + 5;
+    const bandW = margin.left - 7;
+    const bandY = curY;
+    const bandH = sBarH;
+    const sBandRx = ctx.structural(4);
+    const sBandAccentW = ctx.structural(4);
+    const clipId = `tl-band-clip-${tlBandClipCounter++}`;
+    g.append("clipPath").attr("id", clipId).append("rect").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx);
+    g.append("rect").attr("class", "tl-group-header-bg").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx).attr("fill", shapeFill(palette, laneColor, isDark, { solid })).style("pointer-events", "none");
+    g.append("rect").attr("class", "tl-group-header-accent").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", sBandAccentW).attr("height", bandH).attr("fill", laneColor).attr("clip-path", `url(#${clipId})`).style("pointer-events", "none");
+    const headerG = g.append("g").attr("class", "tl-group-header").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => toggleGroup(lane.name));
+    headerG.append("text").attr("x", -margin.left + ctx.aesthetic(10)).attr("y", curY + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", `${sLaneHeaderFont}px`).attr("font-weight", "600").text(`${toggleIcon} ${lane.name}`);
+    if (lane.events.length > 0) {
+      const evDates = lane.events.map((ev) => parseTimelineDate(ev.date));
+      const evEndDates = lane.events.filter((ev) => ev.endDate).map((ev) => parseTimelineDate(ev.endDate));
+      const laneMinD = Math.min(...evDates);
+      const laneMaxD = Math.max(...evDates, ...evEndDates);
+      const sx1 = xScale(laneMinD);
+      const sx2 = xScale(laneMaxD);
+      const groupBarW = Math.max(sx2 - sx1, ctx.structural(20));
+      const groupBarG = g.append("g").attr("class", isCollapsed ? "tl-group-summary" : "tl-group-bar").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => toggleGroup(lane.name));
+      groupBarG.append("rect").attr("x", sx1).attr("y", curY).attr("width", groupBarW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", shapeFill(palette, laneColor, isDark, { solid })).attr("stroke", laneColor).attr("stroke-width", sBarStroke);
+    }
+    if (isCollapsed) {
+      curY += rowH + sGroupGap;
+      continue;
+    }
+    lane.events.forEach((ev, i) => {
+      const y = curY + (i + 1) * rowH + rowH / 2;
+      const x = xScale(parseTimelineDate(ev.date));
+      const evG = g.append("g").attr("class", "tl-event").attr("data-group", lane.name).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+        "data-end-date",
+        ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+      ).style("cursor", "pointer").on("mouseenter", function(event) {
+        fadeToGroup(g, lane.name);
+        if (timelineScale) {
+          showEventDatesOnScale(
+            g,
+            xScale,
+            ev.date,
+            ev.endDate,
+            innerHeight,
+            laneColor
+          );
+        } else {
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+        }
+      }).on("mouseleave", function() {
+        fadeReset(g);
+        if (timelineScale) {
+          hideEventDatesOnScale(g);
+        } else {
+          hideTooltip(tooltip);
+        }
+      }).on("mousemove", function(event) {
+        if (!timelineScale) {
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+        }
+      }).on("click", () => {
+        if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+      });
+      setTagAttrs(evG, ev);
+      const evColor = eventColor(ev);
+      const isPoint = !ev.endDate;
+      const icon = isPoint ? "\u25C6" : "\u25CF";
+      const labelEl = evG.append("text").attr("class", "tl-event-label").attr("x", -margin.left + ctx.aesthetic(20)).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", `${sEventFont}px`).attr("fill", textColor);
+      labelEl.append("tspan").attr("fill", evColor).text(icon);
+      labelEl.append("tspan").attr("fill", textColor).text(" " + ev.label);
+      if (ev.endDate) {
+        const x2 = xScale(parseTimelineDate(ev.endDate));
+        const rectW = Math.max(x2 - x, 4);
+        let fill = shapeFill(palette, evColor, isDark, { solid });
+        let stroke = evColor;
+        if (ev.uncertain) {
+          const gradientId = `uncertain-${ev.lineNumber}`;
+          const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
+          const defs = svg.select("defs").node() || svg.append("defs").node();
+          const defsEl = d3Selection.select(defs);
+          defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            { offset: "0%", opacity: 1 },
+            { offset: "80%", opacity: 1 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(evColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+          defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            { offset: "0%", opacity: 1 },
+            { offset: "80%", opacity: 1 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
+          fill = `url(#${gradientId})`;
+          stroke = `url(#${strokeGradientId})`;
+        }
+        evG.append("rect").attr("x", x).attr("y", y - sBarH / 2).attr("width", rectW).attr("height", sBarH).attr("rx", sBarRx).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sBarStroke);
+      } else {
+        evG.append("circle").attr("cx", x).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", sPointStroke);
+      }
+    });
+    curY += (lane.events.length + 1) * rowH + sGroupGap;
+  }
+}
+function renderTimelineVertical(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+  const {
+    width,
+    height,
+    tooltip,
+    solid,
+    textColor,
+    mutedColor,
+    bgColor,
+    bg,
+    groupColorMap,
+    tagLanes,
+    eventColor,
+    minDate,
+    maxDate,
+    datePadding,
+    earliestStartDateStr,
+    latestEndDateStr,
+    tagLegendReserve,
+    ctx
+  } = setup;
+  const { fadeToGroup, fadeToEra, fadeToMarker, fadeReset, setTagAttrs } = hovers;
+  const {
+    timelineEvents,
+    timelineGroups,
+    timelineEras,
+    timelineMarkers,
+    timelineSort,
+    timelineScale,
+    timelineSwimlanes
+  } = parsed;
+  const title = parsed.noTitle ? null : parsed.title;
+  const sPointR = ctx.structural(4);
+  const sPointStroke = ctx.structural(2);
+  const sBarRx = ctx.structural(4);
+  const sBarStroke = ctx.structural(2);
+  const sBarW = ctx.structural(12);
+  const sEventFont = ctx.text(10);
+  const sEventFontSm = ctx.text(11);
+  const sDateFont = ctx.text(10);
+  const sLaneHeaderFont = ctx.text(12);
+  const sDash = `${ctx.structural(4)},${ctx.structural(4)}`;
+  const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+  if (useGroupedVertical) {
+    let laneNames;
+    let laneEventsByName;
+    if (tagLanes) {
+      laneNames = tagLanes.map((l) => l.name);
+      laneEventsByName = new Map(tagLanes.map((l) => [l.name, l.events]));
+    } else {
+      const groupNames = timelineGroups.map((gr) => gr.name);
+      const ungroupedEvents = timelineEvents.filter(
+        (ev) => ev.group === null || !groupNames.includes(ev.group)
+      );
+      laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+      laneEventsByName = new Map(
+        laneNames.map((name) => [
+          name,
+          timelineEvents.filter(
+            (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+          )
+        ])
+      );
+    }
+    const laneCount = laneNames.length;
+    const scaleMargin = timelineScale ? ctx.aesthetic(40) : 0;
+    const markerMargin = timelineMarkers.length > 0 ? ctx.aesthetic(30) : 0;
+    const margin = {
+      top: ctx.aesthetic(104) + markerMargin + tagLegendReserve,
+      right: ctx.aesthetic(40) + scaleMargin,
+      bottom: ctx.aesthetic(40),
+      left: ctx.aesthetic(60) + scaleMargin
+    };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const laneWidth = innerWidth / laneCount;
+    const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
+    const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    renderChartTitle(
+      svg,
+      title,
+      parsed.titleLineNumber,
+      width,
+      textColor,
+      onClickItem
+    );
+    renderEras(
+      g,
+      timelineEras,
+      yScale,
+      true,
+      innerWidth,
+      innerHeight,
+      (s, e) => fadeToEra(g, s, e),
+      () => fadeReset(g),
+      timelineScale,
+      tooltip,
+      palette
+    );
+    renderMarkers(
+      g,
+      timelineMarkers,
+      yScale,
+      true,
+      innerWidth,
+      innerHeight,
+      (d) => fadeToMarker(g, d),
+      () => fadeReset(g),
+      timelineScale,
+      tooltip,
+      palette
+    );
+    if (timelineScale) {
+      renderTimeScale(
+        g,
+        yScale,
+        true,
+        innerWidth,
+        innerHeight,
+        textColor,
+        minDate,
+        maxDate,
+        formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+        formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+      );
+    }
+    if (timelineSwimlanes || tagLanes) {
+      laneNames.forEach((laneName, laneIdx) => {
+        const laneX = laneIdx * laneWidth;
+        const fillColor = laneIdx % 2 === 0 ? textColor : "transparent";
+        g.append("rect").attr("class", "tl-swimlane").attr("data-group", laneName).attr("x", laneX).attr("y", 0).attr("width", laneWidth).attr("height", innerHeight).attr("fill", fillColor).attr("opacity", 0.06);
+      });
+    }
+    laneNames.forEach((laneName, laneIdx) => {
+      const laneX = laneIdx * laneWidth;
+      const laneColor = groupColorMap.get(laneName) ?? textColor;
+      const laneCenter = laneX + laneWidth / 2;
+      const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", laneName).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, laneName)).on("mouseleave", () => fadeReset(g));
+      headerG.append("text").attr("x", laneCenter).attr("y", -ctx.structural(15)).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", `${sLaneHeaderFont}px`).attr("font-weight", "600").text(laneName);
+      g.append("line").attr("x1", laneCenter).attr("y1", 0).attr("x2", laneCenter).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", sDash);
+      const laneEvents = laneEventsByName.get(laneName) ?? [];
+      for (const ev of laneEvents) {
+        const y = yScale(parseTimelineDate(ev.date));
+        const evG = g.append("g").attr("class", "tl-event").attr("data-group", laneName).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+          "data-end-date",
+          ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+        ).style("cursor", "pointer").on("mouseenter", function(event) {
+          fadeToGroup(g, laneName);
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+        }).on("mouseleave", function() {
+          fadeReset(g);
+          hideTooltip(tooltip);
+        }).on("mousemove", function(event) {
+          showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+        }).on("click", () => {
+          if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+        });
+        setTagAttrs(evG, ev);
+        const evColor = eventColor(ev);
+        if (ev.endDate) {
+          const y2 = yScale(parseTimelineDate(ev.endDate));
+          const rectH = Math.max(y2 - y, 4);
+          let fill = shapeFill(palette, evColor, isDark, { solid });
+          let stroke = evColor;
+          if (ev.uncertain) {
+            const gradientId = `uncertain-vg-${ev.lineNumber}`;
+            const strokeGradientId = `uncertain-vg-s-${ev.lineNumber}`;
+            const defs = svg.select("defs").node() || svg.append("defs").node();
+            const defsEl = d3Selection.select(defs);
+            defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+              { offset: "0%", opacity: 1 },
+              { offset: "80%", opacity: 1 },
+              { offset: "100%", opacity: 0 }
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(laneColor, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+            defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+              { offset: "0%", opacity: 1 },
+              { offset: "80%", opacity: 1 },
+              { offset: "100%", opacity: 0 }
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
+            fill = `url(#${gradientId})`;
+            stroke = `url(#${strokeGradientId})`;
+          }
+          evG.append("rect").attr("x", laneCenter - sBarW / 2).attr("y", y).attr("width", sBarW).attr("height", rectH).attr("rx", sBarRx).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sBarStroke);
+          evG.append("text").attr("x", laneCenter + sBarW + ctx.aesthetic(2)).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
+        } else {
+          evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, evColor, isDark, { solid })).attr("stroke", evColor).attr("stroke-width", sPointStroke);
+          evG.append("text").attr("x", laneCenter + ctx.aesthetic(10)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFont}px`).text(ev.label);
+        }
+      }
+    });
+  } else {
+    const scaleMargin = timelineScale ? ctx.aesthetic(40) : 0;
+    const markerMargin = timelineMarkers.length > 0 ? ctx.aesthetic(30) : 0;
+    const margin = {
+      top: ctx.aesthetic(104) + markerMargin + tagLegendReserve,
+      right: ctx.aesthetic(200),
+      bottom: ctx.aesthetic(40),
+      left: ctx.aesthetic(60) + scaleMargin
+    };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+    const axisX = ctx.structural(20);
+    const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
+    const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
+    const svg = d3Selection.select(container).append("svg").attr("viewBox", `0 0 ${width} ${height}`).attr("width", exportDims ? width : "100%").attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    renderChartTitle(
+      svg,
+      title,
+      parsed.titleLineNumber,
+      width,
+      textColor,
+      onClickItem
+    );
+    renderEras(
+      g,
+      timelineEras,
+      yScale,
+      true,
+      innerWidth,
+      innerHeight,
+      (s, e) => fadeToEra(g, s, e),
+      () => fadeReset(g),
+      timelineScale,
+      tooltip,
+      palette
+    );
+    renderMarkers(
+      g,
+      timelineMarkers,
+      yScale,
+      true,
+      innerWidth,
+      innerHeight,
+      (d) => fadeToMarker(g, d),
+      () => fadeReset(g),
+      timelineScale,
+      tooltip,
+      palette
+    );
+    if (timelineScale) {
+      renderTimeScale(
+        g,
+        yScale,
+        true,
+        innerWidth,
+        innerHeight,
+        textColor,
+        minDate,
+        maxDate,
+        formatBoundaryLabel(earliestStartDateStr, latestEndDateStr),
+        formatBoundaryLabel(latestEndDateStr, earliestStartDateStr)
+      );
+    }
+    if (timelineGroups.length > 0) {
+      renderTimelineGroupLegend(
+        g,
+        timelineGroups,
+        groupColorMap,
+        textColor,
+        palette,
+        isDark,
+        -ctx.aesthetic(55),
+        (name) => fadeToGroup(g, name),
+        () => fadeReset(g)
+      );
+    }
+    g.append("line").attr("x1", axisX).attr("y1", 0).attr("x2", axisX).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", sDash);
+    for (const ev of sorted) {
+      const y = yScale(parseTimelineDate(ev.date));
+      const color = eventColor(ev);
+      const evG = g.append("g").attr("class", "tl-event").attr("data-group", ev.group || "").attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
+        "data-end-date",
+        ev.endDate ? String(parseTimelineDate(ev.endDate)) : null
+      ).style("cursor", "pointer").on("mouseenter", function(event) {
+        if (ev.group && timelineGroups.length > 0) fadeToGroup(g, ev.group);
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+      }).on("mouseleave", function() {
+        fadeReset(g);
+        hideTooltip(tooltip);
+      }).on("mousemove", function(event) {
+        showTooltip(tooltip, buildEventTooltipHtml(ev), event);
+      }).on("click", () => {
+        if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
+      });
+      setTagAttrs(evG, ev);
+      if (ev.endDate) {
+        const y2 = yScale(parseTimelineDate(ev.endDate));
+        const rectH = Math.max(y2 - y, 4);
+        let fill = shapeFill(palette, color, isDark, { solid });
+        let stroke = color;
+        if (ev.uncertain) {
+          const gradientId = `uncertain-v-${ev.lineNumber}`;
+          const strokeGradientId = `uncertain-v-s-${ev.lineNumber}`;
+          const defs = svg.select("defs").node() || svg.append("defs").node();
+          const defsEl = d3Selection.select(defs);
+          defsEl.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+            { offset: "0%", opacity: 1 },
+            { offset: "80%", opacity: 1 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", mix(color, bg, 30)).attr("stop-opacity", (d) => d.opacity);
+          defsEl.append("linearGradient").attr("id", strokeGradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+            { offset: "0%", opacity: 1 },
+            { offset: "80%", opacity: 1 },
+            { offset: "100%", opacity: 0 }
+          ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", color).attr("stop-opacity", (d) => d.opacity);
+          fill = `url(#${gradientId})`;
+          stroke = `url(#${strokeGradientId})`;
+        }
+        evG.append("rect").attr("x", axisX - sBarW / 2).attr("y", y).attr("width", sBarW).attr("height", rectH).attr("rx", sBarRx).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sBarStroke);
+        evG.append("text").attr("x", axisX + sBarW + ctx.aesthetic(4)).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
+      } else {
+        evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { solid })).attr("stroke", color).attr("stroke-width", sPointStroke);
+        evG.append("text").attr("x", axisX + sBarW + ctx.aesthetic(4)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${sEventFontSm}px`).text(ev.label);
+      }
+      evG.append("text").attr("x", axisX - ctx.aesthetic(14)).attr(
+        "y",
+        ev.endDate ? yScale(parseTimelineDate(ev.date)) + Math.max(
+          yScale(parseTimelineDate(ev.endDate)) - yScale(parseTimelineDate(ev.date)),
+          4
+        ) / 2 : y
+      ).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", mutedColor).attr("font-size", `${sDateFont}px`).text(ev.date + (ev.endDate ? `\u2192${ev.endDate}` : ""));
+    }
+  }
+}
+var timelineCollapseState = /* @__PURE__ */ new WeakMap();
+var tlBandClipCounter = 0;
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode, exportMode) {
+  const setup = setupTimeline(
+    container,
+    parsed,
+    palette,
+    isDark,
+    exportDims,
+    activeTagGroup,
+    swimlaneTagGroup
+  );
+  if (!setup) return;
+  swimlaneTagGroup = setup.swimlaneTagGroup;
+  const { isVertical, tagLanes } = setup;
+  const hovers = makeTimelineHoverHelpers();
+  let collapsedGroups = timelineCollapseState.get(container);
+  if (!collapsedGroups) {
+    collapsedGroups = /* @__PURE__ */ new Set();
+    timelineCollapseState.set(container, collapsedGroups);
+  }
+  function toggleGroup(name) {
+    if (collapsedGroups.has(name)) collapsedGroups.delete(name);
+    else collapsedGroups.add(name);
+    renderTimeline(
+      container,
+      parsed,
+      palette,
+      isDark,
+      onClickItem,
+      exportDims,
+      activeTagGroup,
+      swimlaneTagGroup,
+      onTagStateChange,
+      viewMode,
+      exportMode
+    );
+  }
+  if (isVertical) {
+    renderTimelineVertical(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode
+    );
+    return;
+  }
+  const useGroupedHorizontal = tagLanes != null || parsed.timelineSort !== "time" && parsed.timelineGroups.length > 0;
+  if (useGroupedHorizontal) {
+    renderTimelineHorizontalGrouped(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode,
+      collapsedGroups,
+      toggleGroup
+    );
+  } else {
+    renderTimelineHorizontalTimeSort(
+      container,
+      parsed,
+      palette,
+      isDark,
+      setup,
+      hovers,
+      onClickItem,
+      exportDims,
+      swimlaneTagGroup,
+      activeTagGroup,
+      onTagStateChange,
+      viewMode
+    );
+  }
+  renderTimelineTagLegendOverlay(
+    container,
+    parsed,
+    palette,
+    isDark,
+    setup,
+    hovers,
+    onClickItem,
+    exportDims,
+    swimlaneTagGroup,
+    activeTagGroup,
+    onTagStateChange,
+    viewMode,
+    exportMode
+  );
+}
+
+export {
+  formatDateLabel,
+  renderTimeline
+};
+//# sourceMappingURL=chunk-UWN33VNX.js.map