@diagrammo/dgmo 0.77.0 → 0.79.0

package/dist/{chunk-UH5YTZN7.js → chunk-QDTFFVLT.js}

@@ -2,7 +2,10 @@ import {
   computeQuadrantPointLabels,
   rectCircleOverlap,
   rectsOverlap
-} from "./chunk-L65WI4HO.js";
+} from "./chunk-EDU2OCIQ.js";
+import {
+  MIN_CANVAS_WIDTH
+} from "./chunk-EPDBWATV.js";
 import {
   EXPORT_HEIGHT,
   EXPORT_WIDTH,
@@ -11,38 +14,38 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-3E4YB6TY.js";
+} from "./chunk-4YSWUQKZ.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-2F7AG7LA.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_OFFSET,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   computeLegendLayout
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-LLZVRWVS.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE,
   legendChromeColors
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   measureText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   getExtendedChartLegendGroups,
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-M526IKKH.js";
+} from "./chunk-Z4COUG7H.js";
 import {
   EMPHASIS_DIM_OPACITY,
   EMPHASIS_DIM_TEXT_OPACITY,
@@ -50,7 +53,7 @@ import {
 } from "./chunk-2CW5ZTNH.js";
 import {
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   contrastText,
   getSegmentColors,
@@ -60,7 +63,93 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
+
+// src/charts-d3/natural-size.ts
+var UNCOUNTED_WIDTH = 720;
+var MIN_NATURAL_WIDTH = MIN_CANVAS_WIDTH;
+var STEP_PER_CATEGORY = 80;
+var STEP_PER_SERIES_IN_GROUP = 28;
+var STEP_PER_LINE_POINT = 48;
+var STEP_PER_HEATMAP_COLUMN = 64;
+var STEP_PER_SANKEY_DEPTH = 220;
+var AXIS_FURNITURE = 120;
+function clamp(w) {
+  return Math.round(Math.max(MIN_NATURAL_WIDTH, Math.min(EXPORT_WIDTH, w)));
+}
+function sankeyDepth(links) {
+  const targets = new Set(links.map((l) => l.target));
+  const roots = new Set(
+    links.map((l) => l.source).filter((n) => !targets.has(n))
+  );
+  if (roots.size === 0) return 2;
+  const next = /* @__PURE__ */ new Map();
+  for (const l of links)
+    next.set(l.source, [...next.get(l.source) ?? [], l.target]);
+  let depth = 1;
+  let level = [...roots];
+  const seen = new Set(level);
+  while (level.length > 0 && depth < 12) {
+    const following = level.flatMap((n) => next.get(n) ?? []).filter((n) => !seen.has(n));
+    if (following.length === 0) break;
+    following.forEach((n) => seen.add(n));
+    level = [...new Set(following)];
+    depth += 1;
+  }
+  return depth;
+}
+function naturalDataChartSize(content, palette) {
+  const width = naturalDataChartWidth(content, palette);
+  if (width === null) return null;
+  return {
+    width,
+    height: Math.round(width * EXPORT_HEIGHT / EXPORT_WIDTH)
+  };
+}
+function naturalDataChartWidth(content, palette) {
+  const ext = parseExtendedChart(content, palette);
+  if (ext && !ext.error) {
+    switch (ext.type) {
+      case "heatmap": {
+        const cols = ext.columns?.length ?? 0;
+        if (cols === 0) return UNCOUNTED_WIDTH;
+        return clamp(AXIS_FURNITURE + cols * STEP_PER_HEATMAP_COLUMN);
+      }
+      case "sankey":
+      case "chord": {
+        const links = ext.links ?? [];
+        if (ext.type === "chord" || links.length === 0) return UNCOUNTED_WIDTH;
+        return clamp(sankeyDepth(links) * STEP_PER_SANKEY_DEPTH);
+      }
+      case "funnel":
+      case "scatter":
+      case "function":
+        return UNCOUNTED_WIDTH;
+    }
+  }
+  const std = parseChart(content, palette);
+  if (!std || std.error || std.data.length === 0) return null;
+  switch (std.type) {
+    case "pie":
+    case "radar":
+    case "polar-area":
+      return UNCOUNTED_WIDTH;
+    case "bar": {
+      if (std.orientation === "horizontal") return UNCOUNTED_WIDTH;
+      const series = Math.max(1, std.seriesNames?.length ?? 1);
+      const grouped = std.barLayout === "group" ? series : 1;
+      const step = Math.max(
+        STEP_PER_CATEGORY,
+        grouped * STEP_PER_SERIES_IN_GROUP
+      );
+      return clamp(AXIS_FURNITURE + std.data.length * step);
+    }
+    case "line":
+      return clamp(AXIS_FURNITURE + std.data.length * STEP_PER_LINE_POINT);
+    default:
+      return null;
+  }
+}
 
 // src/utils/legend-svg.ts
 var CENTER = 'dominant-baseline="central"';
@@ -78,7 +167,7 @@ function emitCapsule(capsule, palette, groupBg, pillBorder) {
     `<rect x="${pill.x}" y="${pill.y}" width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="none" stroke="${esc(pillBorder)}" stroke-width="0.75"/>`
   );
   inner.push(
-    `<text x="${pill.x + pill.width / 2}" y="${LEGEND_HEIGHT / 2}" ${CENTER} font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.text)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(capsule.groupName)}</text>`
+    `<text x="${pill.x + pill.width / 2}" y="${LEGEND_HEIGHT / 2}" ${CENTER} font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="normal" fill="${esc(palette.text)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(capsule.groupName)}</text>`
   );
   for (const entry of capsule.entries) {
     const label = entry.displayValue ?? entry.value;
@@ -90,7 +179,7 @@ function emitCapsule(capsule, palette, groupBg, pillBorder) {
   return `<g transform="translate(${capsule.x},${capsule.y})" data-legend-group="${esc(tagAttrKey(capsule.groupName))}" style="cursor:pointer">${inner.join("")}</g>`;
 }
 function emitPill(pill, palette, groupBg) {
-  return `<g transform="translate(${pill.x},${pill.y})" data-legend-group="${esc(tagAttrKey(pill.groupName))}" style="cursor:pointer"><rect width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(groupBg)}"/><text x="${pill.width / 2}" y="${pill.height / 2}" ${CENTER} font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(pill.groupName)}</text></g>`;
+  return `<g transform="translate(${pill.x},${pill.y})" data-legend-group="${esc(tagAttrKey(pill.groupName))}" style="cursor:pointer"><rect width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(groupBg)}"/><text x="${pill.width / 2}" y="${pill.height / 2}" ${CENTER} font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="normal" fill="${esc(palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(pill.groupName)}</text></g>`;
 }
 function renderLegendSvg(groups, options) {
   if (groups.length === 0) return { svg: "", height: 0, width: 0 };
@@ -261,11 +350,11 @@ function computeLeftMargin(yLabel, leftLabels) {
 }
 function drawXAxisTitle(svg, label, cx, y, textColor) {
   if (!label) return;
-  svg.append("text").attr("x", cx).attr("y", y).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", 600).text(label);
+  svg.append("text").attr("x", cx).attr("y", y).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", "bold").text(label);
 }
 function drawYAxisTitle(svg, label, cy, x, textColor) {
   if (!label) return;
-  svg.append("text").attr("transform", `translate(${x},${cy}) rotate(-90)`).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", 600).text(label);
+  svg.append("text").attr("transform", `translate(${x},${cy}) rotate(-90)`).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", "bold").text(label);
 }
 function tagDatum(sel, o) {
   const cls = (sel.attr("class") ?? "").split(/\s+/).filter(Boolean);
@@ -855,7 +944,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
     }
   }
   if (hasHole && !chart.noCenterTotal) {
-    g.append("text").attr("text-anchor", "middle").attr("y", Math.max(4, 8 * labelScale)).attr("fill", textColor).attr("font-size", Math.max(11, 26 * labelScale)).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
+    g.append("text").attr("text-anchor", "middle").attr("y", Math.max(4, 8 * labelScale)).attr("fill", textColor).attr("font-size", Math.max(11, 26 * labelScale)).attr("font-weight", "bold").attr("font-family", FONT_FAMILY).text(fmtNum(total));
   }
 }
 
@@ -1072,18 +1161,18 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
     const yMid = (y0 + y1) / 2;
     const halfEdge = (topW + botW) / 4;
     if (!chart.noName) {
-      svg.append("text").attr("x", cx - halfEdge - PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "end").attr("fill", stroke).attr("font-size", sideFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(d.label);
+      svg.append("text").attr("x", cx - halfEdge - PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "end").attr("fill", stroke).attr("font-size", sideFont).attr("font-weight", "bold").attr("font-family", FONT_FAMILY).text(d.label);
     }
     const showPct = !chart.noPercent && i > 0;
     const valueInside = valueInsideAt(plotW, i);
     if (valueInside) {
       const valueSize = valueSizeAt(plotW, i);
       const valueFill = fillMode === "solid" ? contrastText(fill, palette.textOnFillLight, palette.textOnFillDark) : stroke;
-      svg.append("text").attr("x", cx).attr("y", yMid + valueSize * 0.35).attr("text-anchor", "middle").attr("fill", valueFill).attr("font-size", valueSize).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
+      svg.append("text").attr("x", cx).attr("y", yMid + valueSize * 0.35).attr("text-anchor", "middle").attr("fill", valueFill).attr("font-size", valueSize).attr("font-weight", "bold").attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
     }
     const showValueRight = !chart.noValue && !valueInside;
     if (showValueRight || showPct) {
-      const text = svg.append("text").attr("x", cx + halfEdge + PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "start").attr("font-size", sideFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY);
+      const text = svg.append("text").attr("x", cx + halfEdge + PAD).attr("y", yMid + sideFont * 0.35).attr("text-anchor", "start").attr("font-size", sideFont).attr("font-weight", "bold").attr("font-family", FONT_FAMILY);
       if (showValueRight) {
         text.append("tspan").attr("fill", stroke).text(fmtNum(d.value));
       }
@@ -1183,7 +1272,7 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
         color: ramp
       });
       if (!chart.noValue) {
-        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", "bold").attr("font-family", FONT_FAMILY).text(fmtNum(v));
         tagDatum(label, {
           line: row.lineNumber,
           key: cellKey,
@@ -1909,8 +1998,9 @@ function firstNonCommentToken(content) {
 async function renderDataChartD3(content, theme, palette, dims) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const isDark = theme === "dark";
-  const w = dims?.width && dims.width > 0 ? Math.round(dims.width) : EXPORT_WIDTH;
-  const h = dims?.height && dims.height > 0 ? Math.round(dims.height) : EXPORT_HEIGHT;
+  const natural = naturalDataChartSize(content, effectivePalette);
+  const w = dims?.width && dims.width > 0 ? Math.round(dims.width) : natural?.width ?? EXPORT_WIDTH;
+  const h = dims?.height && dims.height > 0 ? Math.round(dims.height) : dims?.width && dims.width > 0 ? Math.round(w * EXPORT_HEIGHT / EXPORT_WIDTH) : natural?.height ?? EXPORT_HEIGHT;
   const container = createExportContainer(w, h);
   const init = initD3Chart(container, effectivePalette, {
     width: w,
@@ -2151,4 +2241,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-UH5YTZN7.js.map
+//# sourceMappingURL=chunk-QDTFFVLT.js.map

package/dist/chunk-QFIXL3OK.js

@@ -0,0 +1,68 @@
+import {
+  serializeSvg
+} from "./chunk-LD2JSKU3.js";
+import {
+  FONT_FAMILY
+} from "./chunk-ICLB27PZ.js";
+
+// src/utils/export-container.ts
+function runInExportContainer(width, height, fn) {
+  const container = document.createElement("div");
+  container.style.width = `${width}px`;
+  container.style.height = `${height}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  try {
+    return fn(container);
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+function paintRootBackground(svgEl, theme, bg) {
+  if (theme === "transparent") return;
+  const vb = (svgEl.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/);
+  if (vb.length !== 4) return;
+  const [x, y, w, h] = vb.map(Number);
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return;
+  const want = bg.trim().toLowerCase();
+  for (const rect2 of Array.from(svgEl.querySelectorAll(":scope > rect"))) {
+    const fill = (rect2.getAttribute("fill") ?? "").trim().toLowerCase();
+    if (fill !== want) continue;
+    if (Number(rect2.getAttribute("width")) !== w) continue;
+    if (Number(rect2.getAttribute("height")) !== h) continue;
+    rect2.remove();
+  }
+  const rect = svgEl.ownerDocument.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "rect"
+  );
+  rect.setAttribute("class", "dgmo-canvas-bg");
+  rect.setAttribute("x", String(x));
+  rect.setAttribute("y", String(y));
+  rect.setAttribute("width", String(w));
+  rect.setAttribute("height", String(h));
+  rect.setAttribute("fill", bg);
+  svgEl.insertBefore(rect, svgEl.firstChild);
+}
+function extractExportSvg(container, theme, palette) {
+  const svgEl = container.querySelector("svg");
+  if (!svgEl) return "";
+  if (theme === "transparent") {
+    svgEl.style.background = "none";
+  } else if (palette && !svgEl.style.background) {
+    svgEl.style.background = palette.bg;
+  }
+  svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svgEl.style.fontFamily = FONT_FAMILY;
+  svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
+  if (palette) paintRootBackground(svgEl, theme, palette.bg);
+  return serializeSvg(svgEl);
+}
+
+export {
+  runInExportContainer,
+  paintRootBackground,
+  extractExportSvg
+};
+//# sourceMappingURL=chunk-QFIXL3OK.js.map

package/dist/{chunk-QXMHBIQG.js → chunk-QGXH64FT.js}

@@ -5,18 +5,23 @@ import {
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  EDGE_DASH,
+  GRID_DASH,
+  scaleDash
+} from "./chunk-IIEI7VK5.js";
 import {
   createTooltip,
   hideTooltip,
   renderChartTitle,
   showTooltip
-} from "./chunk-3E4YB6TY.js";
+} from "./chunk-4YSWUQKZ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-253E5ISJ.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -29,35 +34,33 @@ import {
   legendChromeColors,
   measureLegendText,
   truncateLegendText
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   parseTimelineDate
-} from "./chunk-UCZBRGJN.js";
+} from "./chunk-XXLAZQ5E.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
+import {
+  DEFAULT_PALETTE_ID,
+  getPalette
+} from "./chunk-IDJGV6VM.js";
 import {
+  getEraColors,
   getSeriesColors,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.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, fillMode, outlineBg) {
-  const eraColors = palette ? getEraColors(palette) : ["#3b6ea5", "#5b9357", "#c9a227", "#cc7a33", "#7d5ba6"];
+  const eraColors = getEraColors(
+    palette ?? getPalette(DEFAULT_PALETTE_ID).light
+  );
   eras.forEach((era, i) => {
     const startVal = parseTimelineDate(era.startDate);
     const endVal = parseTimelineDate(era.endDate);
@@ -84,7 +87,7 @@ function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter
       applyEraFill(
         eraG.append("rect").attr("x", 0).attr("y", y).attr("width", innerWidth).attr("height", h)
       );
-      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);
+      labelEl = eraG.append("text").attr("x", 6).attr("y", y + 18).attr("text-anchor", "start").attr("fill", color).attr("font-size", 13).attr("font-weight", "bold").attr("opacity", 0.8).text(displayLabel);
     } else {
       const x = Math.min(start, end);
       const w = Math.abs(end - start);
@@ -99,7 +102,7 @@ function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter
         displayLabel = truncateLegendText(era.label, 13, maxW, { bold: true });
         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);
+      labelEl = eraG.append("text").attr("x", x + w / 2).attr("y", labelY).attr("text-anchor", "middle").attr("fill", color).attr("font-size", 13).attr("font-weight", "bold").attr("opacity", 0.8).text(displayLabel);
     }
     eraG.on("mouseenter", function() {
       onEnter(startVal, endVal);
@@ -135,8 +138,8 @@ function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, o
     };
     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("line").attr("x1", 0).attr("y1", pos).attr("x2", innerWidth).attr("y2", pos).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", EDGE_DASH).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", 11).attr("font-weight", "bold").text(marker.label);
       applyDiamondFill(
         markerG.append("path").attr(
           "d",
@@ -169,14 +172,14 @@ function renderMarkers(g, markers, scale, isVertical, innerWidth, innerHeight, o
         });
         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);
+      const labelEl = markerG.append("text").attr("x", pos).attr("y", labelY).attr("text-anchor", "middle").attr("fill", color).attr("font-size", 11).attr("font-weight", "bold").text(displayLabel);
       applyDiamondFill(
         markerG.append("path").attr(
           "d",
           `M${pos},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`
         )
       );
-      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.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", EDGE_DASH).attr("opacity", lineOpacity);
       markerG.on("mouseenter", function() {
         onEnter(dateVal);
         if (truncated) labelEl.text(marker.label);
@@ -238,17 +241,17 @@ function renderTimeScale(g, scale, isVertical, innerWidth, innerHeight, textColo
   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", 0).attr("y1", tick.pos).attr("x2", innerWidth).attr("y2", tick.pos).attr("stroke", textColor).attr("stroke-width", 1).attr("stroke-dasharray", GRID_DASH).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("text").attr("x", -tickLen - 3).attr("y", tick.pos).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 10).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);
+      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", 10).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", 0).attr("x2", tick.pos).attr("y2", innerHeight).attr("stroke", textColor).attr("stroke-width", 1).attr("stroke-dasharray", GRID_DASH).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("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", 10).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);
+      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", 10).attr("opacity", opacity).text(tick.label);
     }
   }
 }
@@ -257,15 +260,15 @@ function showEventDatesOnScale(g, scale, startDate, endDate, innerHeight, accent
   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);
+  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", GRID_DASH).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", 10).attr("font-weight", "bold").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", 10).attr("font-weight", "bold").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);
+    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", GRID_DASH).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", 10).attr("font-weight", "bold").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", 10).attr("font-weight", "bold").text(endLabel);
   }
 }
 function hideEventDatesOnScale(g) {
@@ -296,7 +299,7 @@ function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette,
     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);
+    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).attr("font-family", FONT_FAMILY).text(grp.name);
     legendX += pillW + GAP;
   }
 }
@@ -933,13 +936,13 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
       }
       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);
+        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).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);
+        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).text(ev.label);
       }
     } else {
       const estLabelWidth = ev.label.length * sCharW;
@@ -948,7 +951,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
       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, { mode: fillMode })).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);
+      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).text(ev.label);
     }
   });
 }
@@ -1118,7 +1121,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     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, { mode: fillMode })).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}`);
+    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).attr("font-weight", "bold").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));
@@ -1172,7 +1175,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
       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);
+      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).attr("fill", textColor);
       labelEl.append("tspan").attr("fill", evColor).text(icon);
       labelEl.append("tspan").attr("fill", textColor).text(" " + ev.label);
       if (ev.endDate) {
@@ -1252,7 +1255,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
   const sEventFontSm = ctx.text(11);
   const sDateFont = ctx.text(10);
   const sLaneHeaderFont = ctx.text(12);
-  const sDash = `${ctx.structural(4)},${ctx.structural(4)}`;
+  const sDash = scaleDash(GRID_DASH, (n) => ctx.structural(n));
   const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
   if (useGroupedVertical) {
     let laneNames;
@@ -1356,7 +1359,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       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);
+      headerG.append("text").attr("x", laneCenter).attr("y", -ctx.structural(15)).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", sLaneHeaderFont).attr("font-weight", "bold").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) {
@@ -1406,13 +1409,13 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
             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);
+          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).text(ev.label);
         } else {
           evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", sPointR).attr(
             "fill",
             shapeFill(palette, evColor, isDark, { mode: fillMode })
           ).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);
+          evG.append("text").attr("x", laneCenter + ctx.aesthetic(10)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", sEventFont).text(ev.label);
         }
       }
     });
@@ -1547,10 +1550,10 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
           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);
+        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).text(ev.label);
       } else {
         evG.append("circle").attr("cx", axisX).attr("cy", y).attr("r", sPointR).attr("fill", shapeFill(palette, color, isDark, { mode: fillMode })).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 + sBarW + ctx.aesthetic(4)).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", sEventFontSm).text(ev.label);
       }
       evG.append("text").attr("x", axisX - ctx.aesthetic(14)).attr(
         "y",
@@ -1558,7 +1561,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
           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}` : ""));
+      ).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", mutedColor).attr("font-size", sDateFont).text(ev.date + (ev.endDate ? `\u2192${ev.endDate}` : ""));
     }
   }
 }
@@ -1672,4 +1675,4 @@ export {
   formatDateLabel,
   renderTimeline
 };
-//# sourceMappingURL=chunk-QXMHBIQG.js.map
+//# sourceMappingURL=chunk-QGXH64FT.js.map