@diagrammo/dgmo 0.8.10 → 0.8.11

package/dist/index.cjs

@@ -144,6 +144,183 @@ var init_branding = __esm({
   }
 });
 
+// src/label-layout.ts
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function rectCircleOverlap(rect, circle) {
+  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
+  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
+  const dx = nearestX - circle.cx;
+  const dy = nearestY - circle.cy;
+  return dx * dx + dy * dy < circle.r * circle.r;
+}
+function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius, fontSize) {
+  const labelHeight = fontSize + 4;
+  const stepSize = labelHeight + 2;
+  const minGap = pointRadius + 4;
+  const pointCircles = points.map((p) => ({
+    cx: p.cx,
+    cy: p.cy,
+    r: pointRadius
+  }));
+  const placedLabels = [];
+  const results = [];
+  for (let i = 0; i < points.length; i++) {
+    const pt = points[i];
+    const labelWidth = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
+    let best = null;
+    const directions = [
+      {
+        // Above
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy - offset - labelHeight;
+          if (ly < chartBounds.top || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Below
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy + offset;
+          if (ly + labelHeight > chartBounds.bottom || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Right
+        gen: (offset) => {
+          const lx = pt.cx + offset;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx + labelWidth > chartBounds.right || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx,
+            textY: pt.cy,
+            anchor: "start"
+          };
+        }
+      },
+      {
+        // Left
+        gen: (offset) => {
+          const lx = pt.cx - offset - labelWidth;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx < chartBounds.left || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx + labelWidth,
+            textY: pt.cy,
+            anchor: "end"
+          };
+        }
+      }
+    ];
+    for (const { gen } of directions) {
+      for (let offset = minGap; ; offset += stepSize) {
+        const cand = gen(offset);
+        if (!cand) break;
+        let collision = false;
+        for (const pl of placedLabels) {
+          if (rectsOverlap(cand.rect, pl)) {
+            collision = true;
+            break;
+          }
+        }
+        if (!collision) {
+          for (const circle of pointCircles) {
+            if (rectCircleOverlap(cand.rect, circle)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          for (const obs of obstacles) {
+            if (rectsOverlap(cand.rect, obs)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          const dist = offset;
+          if (!best || dist < best.dist) {
+            best = {
+              rect: cand.rect,
+              textX: cand.textX,
+              textY: cand.textY,
+              anchor: cand.anchor,
+              dist
+            };
+          }
+          break;
+        }
+      }
+    }
+    if (!best) {
+      const lx = pt.cx - labelWidth / 2;
+      const ly = pt.cy - minGap - labelHeight;
+      best = {
+        rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+        textX: pt.cx,
+        textY: ly + labelHeight / 2,
+        anchor: "middle",
+        dist: minGap
+      };
+    }
+    placedLabels.push(best.rect);
+    let connectorLine;
+    if (best.dist > minGap + stepSize) {
+      const dx = best.textX - pt.cx;
+      const dy = best.textY - pt.cy;
+      const angle = Math.atan2(dy, dx);
+      const x1 = pt.cx + Math.cos(angle) * pointRadius;
+      const y1 = pt.cy + Math.sin(angle) * pointRadius;
+      const x2 = Math.max(
+        best.rect.x,
+        Math.min(pt.cx, best.rect.x + best.rect.w)
+      );
+      const y2 = Math.max(
+        best.rect.y,
+        Math.min(pt.cy, best.rect.y + best.rect.h)
+      );
+      connectorLine = { x1, y1, x2, y2 };
+    }
+    results.push({
+      label: pt.label,
+      x: best.textX,
+      y: best.textY,
+      anchor: best.anchor,
+      connectorLine
+    });
+  }
+  return results;
+}
+var CHAR_WIDTH_RATIO;
+var init_label_layout = __esm({
+  "src/label-layout.ts"() {
+    "use strict";
+    CHAR_WIDTH_RATIO = 0.6;
+  }
+});
+
 // src/colors.ts
 function resolveColor(color, palette) {
   if (color.startsWith("#")) return null;
@@ -1814,7 +1991,7 @@ function measureLegendText(text, fontSize) {
   }
   return w;
 }
-var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
+var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, LEGEND_MAX_ENTRY_ROWS, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
 var init_legend_constants = __esm({
   "src/utils/legend-constants.ts"() {
     "use strict";
@@ -1830,6 +2007,7 @@ var init_legend_constants = __esm({
     LEGEND_EYE_SIZE = 14;
     LEGEND_EYE_GAP = 6;
     LEGEND_ICON_W = 20;
+    LEGEND_MAX_ENTRY_ROWS = 3;
     CHAR_W = {
       " ": 0.28,
       "!": 0.28,
@@ -2239,12 +2417,11 @@ function getLegendReservedHeight(config, state, containerWidth) {
   const layout = computeLegendLayout(config, state, containerWidth);
   return layout.height;
 }
-var LEGEND_MAX_ENTRY_ROWS, CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
+var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
 var init_legend_layout = __esm({
   "src/utils/legend-layout.ts"() {
     "use strict";
     init_legend_constants();
-    LEGEND_MAX_ENTRY_ROWS = 3;
     CONTROL_PILL_PAD = 16;
     CONTROL_FONT_SIZE = 11;
     CONTROL_ICON_GAP = 4;
@@ -3455,7 +3632,8 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           const branch = {
             label: elseIfMatch[1].trim(),
-            children: []
+            children: [],
+            lineNumber
           };
           if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
           top.block.elseIfBranches.push(branch);
@@ -3478,6 +3656,7 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           top.inElse = true;
           top.activeElseIfBranch = void 0;
+          top.block.elseLineNumber = lineNumber;
         }
       }
       continue;
@@ -5870,7 +6049,8 @@ function buildExtendedChartOption(parsed, palette, isDark) {
   }
   const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
-    return buildSankeyOption(parsed, textColor, colors, titleConfig);
+    const bg = isDark ? palette.surface : palette.bg;
+    return buildSankeyOption(parsed, textColor, colors, bg, titleConfig);
   }
   if (parsed.type === "chord") {
     const bg = isDark ? palette.surface : palette.bg;
@@ -5913,7 +6093,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     titleConfig
   );
 }
-function buildSankeyOption(parsed, textColor, colors, titleConfig) {
+function buildSankeyOption(parsed, textColor, colors, bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5921,12 +6101,15 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
       nodeSet.add(link.target);
     }
   }
-  const nodes = Array.from(nodeSet).map((name, index) => ({
-    name,
-    itemStyle: {
-      color: parsed.nodeColors?.[name] ?? colors[index % colors.length]
-    }
-  }));
+  const tintNode = (c) => mix(c, bg, 75);
+  const tintLink = (c) => mix(c, bg, 45);
+  const nodeColorMap = /* @__PURE__ */ new Map();
+  const nodes = Array.from(nodeSet).map((name, index) => {
+    const raw = parsed.nodeColors?.[name] ?? colors[index % colors.length];
+    const tinted = tintNode(raw);
+    nodeColorMap.set(name, tintLink(raw));
+    return { name, itemStyle: { color: tinted } };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -5949,11 +6132,13 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
           source: link.source,
           target: link.target,
           value: link.value,
-          ...link.color && { lineStyle: { color: link.color } }
+          lineStyle: {
+            color: link.color ? tintLink(link.color) : nodeColorMap.get(link.source)
+          }
         })),
         lineStyle: {
-          color: "gradient",
-          curveness: 0.5
+          curveness: 0.5,
+          opacity: 0.6
         },
         label: {
           color: textColor,
@@ -6210,16 +6395,6 @@ function getExtendedChartLegendGroups(parsed, colors) {
   }
   return [];
 }
-function rectsOverlap(a, b) {
-  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
-}
-function rectCircleOverlap(rect, circle) {
-  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
-  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
-  const dx = nearestX - circle.cx;
-  const dy = nearestY - circle.cy;
-  return dx * dx + dy * dy < circle.r * circle.r;
-}
 function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize, bg) {
   const labelHeight = fontSize + 4;
   const stepSize = labelHeight + 2;
@@ -6596,12 +6771,17 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       maxValue = Math.max(maxValue, value);
     });
   });
+  const CHAR_WIDTH7 = 7;
+  const ESTIMATED_CHART_WIDTH = 900;
+  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const slotWidth = columns.length > 0 ? ESTIMATED_CHART_WIDTH / columns.length : Infinity;
+  const needsRotation = longestCol * CHAR_WIDTH7 > slotWidth * 0.85;
   return {
     ...CHART_BASE,
     title: titleConfig,
     grid: {
       left: "3%",
-      right: "10%",
+      right: "3%",
       bottom: "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
@@ -6609,6 +6789,7 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
     xAxis: {
       type: "category",
       data: columns,
+      position: "top",
       splitArea: {
         show: true
       },
@@ -6617,12 +6798,19 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0,
+        ...needsRotation && {
+          rotate: -45,
+          width: 200,
+          overflow: "none"
+        }
       }
     },
     yAxis: {
       type: "category",
       data: rowLabels,
+      inverse: true,
       splitArea: {
         show: true
       },
@@ -6631,16 +6819,14 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0
       }
     },
     visualMap: {
+      show: false,
       min: minValue,
       max: maxValue,
-      calculable: true,
-      orient: "vertical",
-      right: "2%",
-      top: "center",
       inRange: {
         color: [
           mix(palette.primary, bg, 30),
@@ -6648,9 +6834,6 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           mix(palette.colors.yellow, bg, 30),
           mix(palette.colors.orange, bg, 30)
         ]
-      },
-      textStyle: {
-        color: textColor
       }
     },
     series: [
@@ -6668,9 +6851,8 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           fontWeight: "bold"
         },
         emphasis: {
-          ...EMPHASIS_SELF
-        },
-        blur: BLUR_DIM
+          disabled: true
+        }
       }
     ]
   };
@@ -7525,6 +7707,7 @@ var init_echarts = __esm({
     init_fonts();
     init_branding();
     init_legend_svg();
+    init_label_layout();
     init_palettes();
     init_color_utils();
     init_chart();
@@ -14092,8 +14275,7 @@ function computeLayout(parsed, _palette) {
     currentX += cl.width + COLUMN_GAP;
   }
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING3;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3 + legendSpace;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3;
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
 function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
@@ -14106,14 +14288,16 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", DIAGRAM_PADDING3).attr("y", DIAGRAM_PADDING3 + TITLE_FONT_SIZE).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   if (parsed.tagGroups.length > 0) {
-    const legendY = height - LEGEND_HEIGHT;
+    const titleTextWidth = parsed.title ? measureLegendText(parsed.title, TITLE_FONT_SIZE) + 16 : 0;
+    const legendX = DIAGRAM_PADDING3 + titleTextWidth;
+    const legendY = DIAGRAM_PADDING3 + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
     const legendConfig = {
       groups: parsed.tagGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
       mode: exportDims ? "inline" : "fixed"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
-    const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${DIAGRAM_PADDING3},${legendY})`);
+    const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
     renderLegendD3(
       legendG,
       legendConfig,
@@ -14121,7 +14305,7 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
       palette,
       isDark,
       void 0,
-      width - DIAGRAM_PADDING3 * 2
+      width - legendX - DIAGRAM_PADDING3
     );
   }
   const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
@@ -15662,7 +15846,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
   const maxTextWidth = nodeWidth - NODE_TEXT_PADDING * 2;
   const lineHeight = 1.3;
   for (let fontSize = NODE_FONT_SIZE; fontSize >= MIN_NODE_FONT_SIZE; fontSize--) {
-    const charWidth2 = fontSize * CHAR_WIDTH_RATIO;
+    const charWidth2 = fontSize * CHAR_WIDTH_RATIO2;
     const maxCharsPerLine = Math.floor(maxTextWidth / charWidth2);
     const maxLines = Math.floor((nodeHeight - 8) / (fontSize * lineHeight));
     if (maxCharsPerLine < 2 || maxLines < 1) continue;
@@ -15714,7 +15898,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
     }
     if (hardLines.length <= maxLines) return { lines: hardLines, fontSize };
   }
-  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO;
+  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO2;
   const maxChars = Math.floor((nodeWidth - NODE_TEXT_PADDING * 2) / charWidth);
   const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "\u2026" : label;
   return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
@@ -15873,7 +16057,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       path.attr("marker-start", `url(#${revId})`);
     }
     if (le.label && le.labelX != null && le.labelY != null) {
-      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO;
+      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO2;
       labelPositions.push({
         x: le.labelX,
         y: le.labelY + le.yOffset,
@@ -15931,7 +16115,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       const descY = labelY + lineH / 2 + gap + META_FONT_SIZE3 / 2;
       nodeG.append("text").attr("x", 0).attr("y", labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", NODE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).text(node.label);
       const maxChars = Math.floor(
-        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO)
+        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO2)
       );
       const desc = node.description.length > maxChars ? node.description.slice(0, maxChars - 1) + "\u2026" : node.description;
       const descEl = nodeG.append("text").attr("x", 0).attr("y", descY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", META_FONT_SIZE3).attr("fill", palette.textMuted).text(desc);
@@ -15972,7 +16156,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     exportDims: options?.exportDims
   });
 }
-var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
+var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -15995,7 +16179,7 @@ var init_renderer6 = __esm({
     COLLAPSE_BAR_HEIGHT3 = 4;
     ARROWHEAD_W2 = 5;
     ARROWHEAD_H2 = 4;
-    CHAR_WIDTH_RATIO = 0.6;
+    CHAR_WIDTH_RATIO2 = 0.6;
     NODE_TEXT_PADDING = 12;
     GROUP_RX = 8;
     GROUP_LABEL_FONT_SIZE = 14;
@@ -16066,7 +16250,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const nodeGeometry = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (pos)
       nodeGeometry.set(name, {
         y: pos.y,
@@ -16076,14 +16260,14 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const rankMap = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (!pos) continue;
     const rankY = Math.round(pos.y);
     if (!rankMap.has(rankY)) rankMap.set(rankY, []);
     rankMap.get(rankY).push(name);
   }
   for (const [, rankNodes] of rankMap) {
-    rankNodes.sort((a, b) => g.node(a).x - g.node(b).x);
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
   }
   let anyMoved = false;
   for (const [, rankNodes] of rankMap) {
@@ -16110,10 +16294,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
     }
     for (const partition of partitions) {
       if (partition.length < 2) continue;
-      const xSlots = partition.map((name) => g.node(name).x).sort((a, b) => a - b);
+      const xSlots = partition.map((name) => gNode(g, name).x).sort((a, b) => a - b);
       const basePositions = /* @__PURE__ */ new Map();
       for (const name of g.nodes()) {
-        const pos = g.node(name);
+        const pos = gNode(g, name);
         if (pos) basePositions.set(name, pos.x);
       }
       const currentPenalty = computeEdgePenalty(
@@ -16191,7 +16375,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
       }
       if (bestPerm.some((name, i) => name !== partition[i])) {
         for (let i = 0; i < bestPerm.length; i++) {
-          g.node(bestPerm[i]).x = xSlots[i];
+          gNode(g, bestPerm[i]).x = xSlots[i];
           const rankIdx = rankNodes.indexOf(partition[i]);
           if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i];
         }
@@ -16201,10 +16385,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   if (anyMoved) {
     for (const edge of edgeList) {
-      const edgeData = g.edge(edge.source, edge.target);
+      const edgeData = gEdge(g, edge.source, edge.target);
       if (!edgeData) continue;
-      const srcPos = g.node(edge.source);
-      const tgtPos = g.node(edge.target);
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
       if (!srcPos || !tgtPos) continue;
       const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };
       const tgtTop = { x: tgtPos.x, y: tgtPos.y - tgtPos.height / 2 };
@@ -17648,12 +17832,14 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     height: totalHeight
   };
 }
-var import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
+var import_dagre5, gNode, gEdge, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout6 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
     import_dagre5 = __toESM(require("@dagrejs/dagre"), 1);
     init_legend_constants();
+    gNode = (g, name) => g.node(name);
+    gEdge = (g, v, w) => g.edge(v, w);
     CHAR_WIDTH5 = 8;
     MIN_NODE_WIDTH = 160;
     MAX_NODE_WIDTH = 260;
@@ -25456,7 +25642,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         for (const branch of el.elseIfBranches) {
           elseIfBranchData.push({
             label: branch.label,
-            indices: collectMsgIndices(branch.children)
+            indices: collectMsgIndices(branch.children),
+            lineNumber: branch.lineNumber
           });
         }
       }
@@ -25517,14 +25704,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
               x1: frameX,
               y1: dividerY,
               x2: frameX + frameW,
-              y2: dividerY
+              y2: dividerY,
+              blockLine: branchData.lineNumber
             });
             deferredLabels.push({
               x: frameX + 6,
               y: dividerY + 14,
               text: `else if ${branchData.label}`,
               bold: false,
-              italic: true
+              italic: true,
+              blockLine: branchData.lineNumber
             });
           }
         }
@@ -25542,14 +25731,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             x1: frameX,
             y1: dividerY,
             x2: frameX + frameW,
-            y2: dividerY
+            y2: dividerY,
+            blockLine: el.elseLineNumber
           });
           deferredLabels.push({
             x: frameX + 6,
             y: dividerY + 14,
             text: "else",
             bold: false,
-            italic: true
+            italic: true,
+            blockLine: el.elseLineNumber
           });
         }
       }
@@ -25595,7 +25786,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   });
   for (const ln of deferredLines) {
-    svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3");
+    const line10 = svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("class", "block-divider");
+    if (ln.blockLine !== void 0)
+      line10.attr("data-block-line", String(ln.blockLine));
   }
   for (const lbl of deferredLabels) {
     const t = svg.append("text").attr("x", lbl.x).attr("y", lbl.y).attr("fill", palette.text).attr("font-size", 11).attr("class", "block-label").text(lbl.text);
@@ -28415,7 +28608,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
           if (labelFitsInside) {
-            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
           } else {
             const wouldFlipLeft = x + rectW > innerWidth * 0.6;
             const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -28569,7 +28762,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }
         evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
         if (labelFitsInside) {
-          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
         } else {
           const wouldFlipLeft = x + rectW > innerWidth * 0.6;
           const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -28937,7 +29130,7 @@ function regionCentroid(circles, inside) {
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
   const { vennSets, vennOverlaps, title } = parsed;
-  if (vennSets.length < 2) return;
+  if (vennSets.length < 2 || vennSets.length > 3) return;
   const init2 = initD3Chart(container, palette, exportDims);
   if (!init2) return;
   const { svg, width, height, textColor, colors } = init2;
@@ -28993,7 +29186,9 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     marginBottom
   ).map((c) => ({ ...c, y: c.y + titleHeight }));
   const scaledR = circles[0].r;
-  svg.append("style").text("circle:focus, circle:focus-visible { outline: none !important; }");
+  svg.append("style").text(
+    "circle:focus, circle:focus-visible { outline-solid: none !important; }"
+  );
   renderChartTitle(
     svg,
     title,
@@ -29175,7 +29370,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   const hoverGroup = svg.append("g");
   circles.forEach((c, i) => {
-    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay([i]);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -29213,7 +29408,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     const declaredOv = vennOverlaps.find(
       (ov) => ov.sets.length === sets.length && ov.sets.every((s, k) => s === sets[k])
     );
-    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay(idxs);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -29347,8 +29542,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
   const LABEL_PAD2 = 40;
-  const CHAR_WIDTH_RATIO2 = 0.6;
-  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO2;
+  const CHAR_WIDTH_RATIO3 = 0.6;
+  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO3;
   const quadrantLabelLayout = (text, qw2, qh2) => {
     const availW = qw2 - LABEL_PAD2;
     const availH = qh2 - LABEL_PAD2;
@@ -29492,16 +29687,45 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (x < 0.5 && y < 0.5) return "bottom-left";
     return "bottom-right";
   };
+  const POINT_RADIUS = 6;
+  const POINT_LABEL_FONT_SIZE = 12;
+  const quadrantLabelObstacles = quadrantDefsWithLabel.map((d) => {
+    const layout = labelLayouts.get(d.label.text);
+    const totalW = Math.max(...layout.lines.map((l) => l.length)) * layout.fontSize * CHAR_WIDTH_RATIO3;
+    const totalH = layout.lines.length * layout.fontSize * 1.2;
+    return {
+      x: d.labelX - totalW / 2,
+      y: d.labelY - totalH / 2,
+      w: totalW,
+      h: totalH
+    };
+  });
+  const pointPixels = quadrantPoints.map((point) => ({
+    label: point.label,
+    cx: xScale(point.x),
+    cy: yScale(point.y)
+  }));
+  const placedPointLabels = computeQuadrantPointLabels(
+    pointPixels,
+    { left: 0, top: 0, right: chartWidth, bottom: chartHeight },
+    quadrantLabelObstacles,
+    POINT_RADIUS,
+    POINT_LABEL_FONT_SIZE
+  );
   const pointsG = chartG.append("g").attr("class", "points");
-  quadrantPoints.forEach((point) => {
+  quadrantPoints.forEach((point, i) => {
     const cx = xScale(point.x);
     const cy = yScale(point.y);
     const quadrant = getPointQuadrant(point.x, point.y);
     const quadDef = quadrantDefs.find((d) => d.position === quadrant);
     const pointColor = quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
+    const placed = placedPointLabels[i];
     const pointG = pointsG.append("g").attr("class", "point-group").attr("data-line-number", String(point.lineNumber));
-    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
-    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
+    if (placed.connectorLine) {
+      pointG.append("line").attr("x1", placed.connectorLine.x1).attr("y1", placed.connectorLine.y1).attr("x2", placed.connectorLine.x2).attr("y2", placed.connectorLine.y2).attr("stroke", pointColor).attr("stroke-width", 1).attr("opacity", 0.5);
+    }
+    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", POINT_RADIUS).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
+    pointG.append("text").attr("x", placed.x).attr("y", placed.y).attr("text-anchor", placed.anchor).attr("dominant-baseline", "central").attr("fill", textColor).attr("font-size", `${POINT_LABEL_FONT_SIZE}px`).attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
     const tipHtml = `<strong>${point.label}</strong><br>x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`;
     pointG.style("cursor", onClickItem ? "pointer" : "default").on("mouseenter", (event) => {
       showTooltip(tooltip, tipHtml, event);
@@ -29510,7 +29734,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
       showTooltip(tooltip, tipHtml, event);
     }).on("mouseleave", () => {
       hideTooltip(tooltip);
-      pointG.select("circle").attr("r", 6);
+      pointG.select("circle").attr("r", POINT_RADIUS);
     }).on("click", () => {
       if (onClickItem && point.lineNumber) onClickItem(point.lineNumber);
     });
@@ -29982,6 +30206,7 @@ var init_d3 = __esm({
     import_d3_cloud = __toESM(require("d3-cloud"), 1);
     init_fonts();
     init_branding();
+    init_label_layout();
     init_colors();
     init_palettes();
     init_color_utils();
@@ -30173,6 +30398,7 @@ __export(index_exports, {
   computeTimeTicks: () => computeTimeTicks,
   contrastText: () => contrastText,
   decodeDiagramUrl: () => decodeDiagramUrl,
+  draculaPalette: () => draculaPalette,
   encodeDiagramUrl: () => encodeDiagramUrl,
   extractDiagramSymbols: () => extractDiagramSymbols,
   extractTagDeclarations: () => extractTagDeclarations,
@@ -30216,6 +30442,7 @@ __export(index_exports, {
   looksLikeSitemap: () => looksLikeSitemap,
   looksLikeState: () => looksLikeState,
   makeDgmoError: () => makeDgmoError,
+  monokaiPalette: () => monokaiPalette,
   mute: () => mute,
   nord: () => nord,
   nordPalette: () => nordPalette,
@@ -31923,6 +32150,7 @@ init_branding();
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
+  draculaPalette,
   encodeDiagramUrl,
   extractDiagramSymbols,
   extractTagDeclarations,
@@ -31966,6 +32194,7 @@ init_branding();
   looksLikeSitemap,
   looksLikeState,
   makeDgmoError,
+  monokaiPalette,
   mute,
   nord,
   nordPalette,