@diagrammo/dgmo 0.86.0 → 0.88.0

package/dist/chunk-WXPBP4IT.js

@@ -0,0 +1,438 @@
+import {
+  renderInlineText
+} from "./chunk-S7W75MIM.js";
+import {
+  BOX_H,
+  BOX_W,
+  COMMENT_W,
+  PAIR_GAP,
+  layoutBracket,
+  wrapText
+} from "./chunk-ABP5BUD6.js";
+import {
+  layoutInlineHeader
+} from "./chunk-3DOQOXXI.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-VLC6WNRD.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-LHL6HDUL.js";
+import {
+  getLegendExtent,
+  getMaxLegendReservedHeight
+} from "./chunk-FM3WAVB6.js";
+import {
+  FONT_FAMILY
+} from "./chunk-ICLB27PZ.js";
+import {
+  LEGEND_GROUP_GAP
+} from "./chunk-RH2PROYG.js";
+import {
+  measureText
+} from "./chunk-KAO7JL4I.js";
+import {
+  resolveTagColor,
+  tagAttrKey
+} from "./chunk-L5AFONQU.js";
+import {
+  contrastText,
+  getSeriesColors,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-7HWY4QAJ.js";
+import {
+  resolveColor
+} from "./chunk-2M4IGSCY.js";
+
+// src/bracket/renderer.ts
+import * as d3Selection from "d3-selection";
+var PADDING = 16;
+var TITLE_BAND = 40;
+var HALF_SPAN = (BOX_H + PAIR_GAP) / 2;
+var COMMENT_LH = 15;
+var LEGEND_POSITION = {
+  placement: "top-center",
+  titleRelation: "below-title"
+};
+function clip(s, maxW, fs, bold) {
+  if (measureText(s, fs, { bold }) <= maxW) return s;
+  let lo = 0;
+  let hi = s.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(s.slice(0, mid) + "\u2026", fs, { bold }) <= maxW) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo <= 0 ? "" : s.slice(0, lo) + "\u2026";
+}
+function paintForAccent(palette, isDark, accent, fillMode) {
+  const base = themeBaseBg(palette, isDark);
+  return {
+    accent,
+    ink: palette.text,
+    muted: mix(palette.text, base, 52),
+    // Loser / TBD outlines + connectors are ink-based (not the pale border) so
+    // they stay legible on top of a colored, shaded column band.
+    hair: mix(palette.text, base, 34),
+    wire: mix(palette.text, base, 30),
+    track: mix(palette.border, base, 55),
+    // §1.9 fill family rides through shapeFill: solid ⇒ raw accent,
+    // outline ⇒ theme base bg (accent stays on the stroke), absent ⇒ 25% tint.
+    tint: shapeFill(palette, accent, isDark, { mode: fillMode })
+  };
+}
+function paintFor(palette, isDark, sideColor, fillMode) {
+  const accent = sideColor && resolveColor(sideColor, palette) || sideColor || getSeriesColors(palette)[0];
+  return paintForAccent(palette, isDark, accent, fillMode);
+}
+function resolveBracketLegend(parsed, palette) {
+  const activeTag = parsed.activeTag;
+  const activeGroup = activeTag ? parsed.tagGroups.find((g) => tagAttrKey(g.name) === tagAttrKey(activeTag)) : void 0;
+  const legendGroups = activeGroup && !parsed.noLegend ? [
+    {
+      name: activeGroup.name,
+      entries: activeGroup.entries.map((e) => ({
+        value: e.value,
+        color: resolveColor(e.color, palette) ?? e.color
+      }))
+    }
+  ] : [];
+  return { activeGroup, legendGroups };
+}
+function bracketExportDimensions(parsed, palette) {
+  const layout = layoutBracket(parsed);
+  const width = layout.width + PADDING * 2;
+  const titleH = parsed.title ? TITLE_BAND : 0;
+  const { legendGroups } = resolveBracketLegend(parsed, palette);
+  const legendReserve = legendGroups.length > 0 ? getMaxLegendReservedHeight(
+    { groups: legendGroups, position: LEGEND_POSITION, mode: "export" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const height = titleH + legendReserve + PADDING + layout.height + PADDING;
+  return { width, height };
+}
+function renderBracket(container, parsed, palette, isDark, exportDims) {
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  if (parsed.error) return;
+  const layout = layoutBracket(parsed);
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return;
+  const showTitle = !!parsed.title;
+  const titleH = showTitle ? TITLE_BAND : 0;
+  const exportMode = exportDims !== void 0;
+  const seedByName = /* @__PURE__ */ new Map();
+  for (const s of parsed.seeds)
+    if (!seedByName.has(s.name)) seedByName.set(s.name, s.seed);
+  const activeTag = parsed.activeTag;
+  const activeKey = activeTag ? tagAttrKey(activeTag) : null;
+  const tagValueOf = (name) => {
+    if (!name || !activeKey) return null;
+    const meta = parsed.competitorMeta.get(name);
+    return meta?.[activeKey] ?? null;
+  };
+  const tagColorOf = (name) => {
+    if (!name || !activeTag) return null;
+    const meta = parsed.competitorMeta.get(name);
+    if (!meta || !activeKey || !meta[activeKey]) return null;
+    const c = resolveTagColor(meta, [...parsed.tagGroups], activeTag);
+    return c ? resolveColor(c, palette) ?? c : null;
+  };
+  const { activeGroup, legendGroups } = resolveBracketLegend(parsed, palette);
+  const legendReserve = legendGroups.length > 0 ? getMaxLegendReservedHeight(
+    { groups: legendGroups, position: LEGEND_POSITION, mode: "preview" },
+    width
+  ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = parsed.legendInline === true;
+  const legendExtent = inlineRequested && legendGroups.length > 0 ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup?.name ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: legendGroups.length > 0,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-bracket").attr("role", "img").attr(
+    "aria-label",
+    `Tournament bracket${parsed.title ? ` \u2014 ${parsed.title}` : ""}${layout.champion ? `, champion ${layout.champion}` : ""}`
+  ).style("font-family", FONT_FAMILY);
+  if (showTitle) {
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
+    if (parsed.titleLineNumber !== null)
+      t.attr("data-line-number", parsed.titleLineNumber);
+  }
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING;
+  const areaX = PADDING;
+  const areaW = Math.max(1, width - PADDING * 2);
+  const areaH = Math.max(1, height - areaY - PADDING);
+  const scale = Math.min(1, areaW / layout.width, areaH / layout.height);
+  const offsetX = areaX + (areaW - layout.width * scale) / 2;
+  const offsetY = areaY;
+  const root = svg.append("g").attr("class", "dgmo-bracket-body").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
+  if (legendGroups.length > 0) {
+    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
+    renderIntegratedLegend(legendG, {
+      groups: legendGroups,
+      palette: {
+        bg: palette.bg,
+        surface: palette.surface,
+        text: palette.text,
+        textMuted: palette.textMuted,
+        primary: palette.primary
+      },
+      isDark,
+      width,
+      mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      activeGroup: activeGroup?.name ?? null
+    });
+  }
+  const baseAccent = parsed.accentColor ?? resolveColor("blue", palette) ?? getSeriesColors(palette)[0];
+  const fillMode = parsed.fillMode;
+  const basePaint = paintForAccent(palette, isDark, baseAccent, fillMode);
+  const sideColorByLabel = /* @__PURE__ */ new Map();
+  for (const s of parsed.sides) sideColorByLabel.set(s.label, s.color);
+  const sideBarH = layout.sideLabels.length ? 30 : 0;
+  const bandTop = sideBarH + 2;
+  const roundY = sideBarH + 24;
+  for (const col of layout.columns) {
+    if (!col.color) continue;
+    const covered = layout.sideLabels.some(
+      (s) => col.x >= s.x0 && col.x <= s.x1
+    );
+    const top = covered ? bandTop : 2;
+    const c = resolveColor(col.color, palette) ?? col.color;
+    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 12 : 8)
+    ).call((sel) => {
+      if (fillMode === "outline")
+        sel.attr("stroke", mix(c, palette.bg, 35)).attr("stroke-width", 1);
+    });
+  }
+  for (const s of layout.sideLabels) {
+    const c = s.color ? resolveColor(s.color, palette) ?? s.color : basePaint.accent;
+    root.append("rect").attr("x", s.x0 - 8).attr("y", 2).attr("width", s.x1 - s.x0 + 16).attr("height", 24).attr("rx", 8).attr(
+      "fill",
+      fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 20 : 14)
+    ).attr("stroke", fillMode === "outline" ? c : mix(c, palette.bg, 55)).attr("stroke-width", 1);
+    root.append("text").attr("x", (s.x0 + s.x1) / 2).attr("y", 18).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", "bold").attr("letter-spacing", 0.3).attr("fill", c).text(clip(s.label, s.x1 - s.x0, 13, true));
+  }
+  for (const col of layout.columns) {
+    const c = col.color ? resolveColor(col.color, palette) ?? col.color : basePaint.muted;
+    const covered = layout.sideLabels.some(
+      (s) => col.x >= s.x0 && col.x <= s.x1
+    );
+    root.append("text").attr("x", col.x).attr("y", covered ? roundY : 22).attr("text-anchor", "middle").attr("font-size", covered ? 14 : 15).attr("font-weight", "bold").attr("fill", c).attr("letter-spacing", 0.4).text(clip(col.label, BOX_W + 20, covered ? 14 : 15, true));
+  }
+  for (const m of layout.matches) {
+    drawConnector(root, m, m.topFrom, m.y - HALF_SPAN, basePaint);
+    drawConnector(root, m, m.botFrom, m.y + HALF_SPAN, basePaint);
+  }
+  for (const m of layout.matches) {
+    const sidePaint = m.side && sideColorByLabel.get(m.side) ? paintFor(palette, isDark, sideColorByLabel.get(m.side), fillMode) : basePaint;
+    const topSeed = seedByName.get(m.top ?? "") ?? null;
+    const botSeed = seedByName.get(m.bot ?? "") ?? null;
+    let homeName = m.home;
+    if (!homeName && topSeed !== null && botSeed !== null) {
+      homeName = topSeed <= botSeed ? m.top : m.bot;
+    }
+    const [wSeed, lSeed] = m.winner === "top" ? [topSeed, botSeed] : m.winner === "bot" ? [botSeed, topSeed] : [null, null];
+    const isUpset = wSeed !== null && lSeed !== null && wSeed > lSeed && !m.isChampionship;
+    const scoreParts = m.score ? m.score.split(/[-–]/).map((p) => p.trim()) : null;
+    const winScore = scoreParts?.length === 2 ? scoreParts[0] : "";
+    const loseScore = scoreParts?.length === 2 ? scoreParts[1] : "";
+    const champWinner = m.isChampionship ? layout.champion : null;
+    const mkInfo = (side, name) => {
+      const isWinner = m.winner === side;
+      const isLoser = m.winner !== null && m.winner !== side;
+      return {
+        isWinner,
+        isLoser,
+        pending: m.pending,
+        isChampion: champWinner !== null && isWinner,
+        score: isWinner ? winScore : isLoser ? loseScore : "",
+        seed: seedByName.get(name ?? "") ?? null,
+        tagColor: tagColorOf(name),
+        tagValue: tagValueOf(name),
+        isHome: homeName !== null && homeName === name
+      };
+    };
+    drawBox(
+      root,
+      m.x,
+      m.y - HALF_SPAN,
+      m.top,
+      mkInfo("top", m.top),
+      sidePaint,
+      palette,
+      isDark,
+      m,
+      activeKey,
+      fillMode
+    );
+    drawBox(
+      root,
+      m.x,
+      m.y + HALF_SPAN,
+      m.bot,
+      mkInfo("bot", m.bot),
+      sidePaint,
+      palette,
+      isDark,
+      m,
+      activeKey,
+      fillMode
+    );
+    if (isUpset) drawUpset(root, m, sidePaint);
+    if (m.commentary.length) drawCommentary(root, m, palette);
+  }
+}
+function drawConnector(g, m, from, toCy, paint) {
+  if (!from) return;
+  const parentLeft = m.x - BOX_W / 2;
+  const parentRight = m.x + BOX_W / 2;
+  const childIsLeft = from.x < m.x;
+  const childEdge = childIsLeft ? from.x + BOX_W / 2 : from.x - BOX_W / 2;
+  const parentEdge = childIsLeft ? parentLeft : parentRight;
+  const midX = (childEdge + parentEdge) / 2;
+  const vLo = Math.min(from.yA, from.yB, toCy);
+  const vHi = Math.max(from.yA, from.yB, toCy);
+  const d = from.yA !== from.yB ? `M ${childEdge} ${from.yA} H ${midX} M ${childEdge} ${from.yB} H ${midX} M ${midX} ${vLo} V ${vHi} M ${midX} ${toCy} H ${parentEdge}` : `M ${childEdge} ${from.y} H ${midX} V ${toCy} H ${parentEdge}`;
+  g.append("path").attr("d", d).attr("fill", "none").attr("stroke", paint.wire).attr("stroke-width", 1.5);
+}
+function drawBox(g, cx, cy, name, info, sidePaint, palette, isDark, m, activeKey, fillMode) {
+  const x = cx - BOX_W / 2;
+  const y = cy - BOX_H / 2;
+  const paint = info.tagColor ? paintForAccent(palette, isDark, info.tagColor, fillMode) : sidePaint;
+  const cell = g.append("g").attr("class", "dgmo-bracket-box");
+  if (m.lineNumber !== null) cell.attr("data-line-number", m.lineNumber);
+  if (activeKey && info.tagValue)
+    cell.attr(`data-tag-${activeKey}`, info.tagValue.toLowerCase());
+  const isTBD = name === null;
+  let fill = "none";
+  let stroke = paint.hair;
+  let sw = 1.25;
+  let dash = null;
+  let textColor = paint.ink;
+  let weight = "bold";
+  if (info.isChampion) {
+    fill = paint.tint;
+    stroke = paint.accent;
+    sw = 3;
+    weight = "bold";
+  } else if (isTBD) {
+    fill = paint.track;
+    dash = "4 4";
+    textColor = paint.muted;
+    weight = "normal";
+  } else if (info.isWinner) {
+    fill = paint.tint;
+    stroke = paint.accent;
+    sw = 2;
+    weight = "bold";
+  } else if (info.isLoser) {
+    stroke = paint.hair;
+    textColor = paint.muted;
+    weight = "normal";
+  } else if (info.pending) {
+    stroke = mix(paint.accent, paint.hair, 50);
+  }
+  const onSolid = fillMode === "solid" && (info.isChampion || info.isWinner) ? contrastText(
+    paint.tint,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  ) : null;
+  if (onSolid) textColor = onSolid;
+  const gutterColor = onSolid ?? paint.muted;
+  const rect = cell.append("rect").attr("x", x).attr("y", y).attr("width", BOX_W).attr("height", BOX_H).attr("rx", 6).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", sw);
+  if (dash) rect.attr("stroke-dasharray", dash);
+  let leftPad = 11;
+  if (info.seed !== null) {
+    cell.append("text").attr("x", x + 9).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 10).attr("font-weight", "bold").attr("fill", gutterColor).text(info.seed);
+    leftPad = 9 + Math.max(12, measureText(String(info.seed), 10, { bold: true })) + 6;
+  }
+  let rightPad = 11;
+  if (info.score) rightPad += 20;
+  if (info.isHome) {
+    drawHome(cell, x + BOX_W - rightPad - 6, cy, gutterColor);
+    rightPad += 16;
+  }
+  cell.append("text").attr("x", x + leftPad).attr("y", cy + 4).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", weight).attr("fill", textColor).text(
+    clip(
+      isTBD ? "TBD" : name,
+      BOX_W - leftPad - rightPad,
+      12.5,
+      weight === "bold"
+    )
+  );
+  if (info.score) {
+    cell.append("text").attr("x", x + BOX_W - 11).attr("y", cy + 4).attr("text-anchor", "end").attr("font-size", 12).attr("font-weight", info.isWinner ? "bold" : "normal").attr("fill", info.isWinner ? textColor : gutterColor).text(info.score);
+  }
+}
+function drawHome(cell, hx, cy, color) {
+  const s = 5;
+  const yTop = cy - s - 1;
+  const d = `M ${hx - s} ${cy - 1} L ${hx} ${yTop} L ${hx + s} ${cy - 1} L ${hx + s} ${cy + s} L ${hx - s} ${cy + s} Z`;
+  cell.append("path").attr("d", d).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2).attr("stroke-linejoin", "round");
+}
+function drawUpset(g, m, paint) {
+  g.append("text").attr("x", m.x + BOX_W / 2).attr("y", m.y - HALF_SPAN - BOX_H / 2 - 4).attr("text-anchor", "end").attr("font-size", 9).attr("font-weight", "bold").attr("letter-spacing", 0.6).attr("fill", paint.accent).text("UPSET");
+}
+function drawCommentary(g, m, palette) {
+  const x = m.x - BOX_W / 2 + 2;
+  let y = m.y + HALF_SPAN + BOX_H / 2 + 13;
+  const muted = mix(palette.text, palette.bg, 45);
+  const bulletW = measureText("\u2022 ", 11);
+  const emit = (line, lx) => {
+    const t = g.append("text").attr("x", lx).attr("y", y).attr("text-anchor", "start").attr("font-size", 11).attr("font-style", "italic").attr("fill", muted);
+    renderInlineText(t, line, palette, 11);
+    y += COMMENT_LH;
+  };
+  for (const raw of m.commentary) {
+    const isBullet = raw.startsWith("\u2022 ");
+    if (isBullet) {
+      const body = raw.slice(2);
+      wrapText(body, COMMENT_W - bulletW, 11).forEach(
+        (line, i) => i === 0 ? emit(`\u2022 ${line}`, x) : emit(line, x + bulletW)
+      );
+    } else {
+      for (const line of wrapText(raw, COMMENT_W, 11)) emit(line, x);
+    }
+  }
+}
+function renderBracketForExport(container, parsed, palette, isDark, exportDims) {
+  renderBracket(container, parsed, palette, isDark, exportDims);
+}
+
+export {
+  bracketExportDimensions,
+  renderBracket,
+  renderBracketForExport
+};

package/dist/{chunk-C6FZZFYD.js → chunk-WZ23JJ7U.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-XBJJP2HN.js";
 import {
   renderInlineText
-} from "./chunk-FWNJDD4U.js";
+} from "./chunk-S7W75MIM.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,

package/dist/{chunk-LIYWJ6DV.js → chunk-XIFK423U.js}

@@ -3,10 +3,10 @@ import {
   NODE_HEIGHT,
   NODE_WIDTH,
   placeEdgeLabels
-} from "./chunk-TW6WMZFW.js";
+} from "./chunk-QT3KDDXK.js";
 import {
   buildPlacedNotes
-} from "./chunk-HBCAY3KR.js";
+} from "./chunk-HTNLLT34.js";
 import {
   noteCanvasShift
 } from "./chunk-6EK55ART.js";
@@ -22,6 +22,9 @@ import {
 var MARGIN = 40;
 var MAX_PARALLEL_EDGES = 5;
 var PARALLEL_SPACING = 22;
+var DETOUR_TOLERANCE = 2 * PARALLEL_SPACING;
+var MIN_PORT_GAP = 16;
+var PORT_CORNER_CLEAR = 6;
 var DESC_NODE_WIDTH = 140;
 var DESC_FONT_SIZE = 10;
 var DESC_LINE_HEIGHT = 1.4;
@@ -104,7 +107,7 @@ function computeNodeSize(node, reserveValueRow) {
   return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
 }
 async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
-  const { layoutBoxesAndLinesSearch } = await import("./layout-search-AW5VBDCV.js");
+  const { layoutBoxesAndLinesSearch } = await import("./layout-search-VKSBUCDM.js");
   const searchOpts = {
     ...layoutOptions?.hideDescriptions !== void 0 && {
       hideDescriptions: layoutOptions.hideDescriptions
@@ -117,13 +120,6 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
     },
     ...layoutOptions?.onProgress !== void 0 && {
       onProgress: layoutOptions.onProgress
-    },
-    // Spread into the label-reserving relayout below too, via `...searchOpts`:
-    // that second search has its OWN clock, so a caller that disabled the
-    // deadline must have it disabled for both passes or the fixture that needs
-    // two passes is exactly the one still racing.
-    ...layoutOptions?.budgetMs !== void 0 && {
-      budgetMs: layoutOptions.budgetMs
     }
   };
   let topConfigs;
@@ -134,7 +130,7 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
     }
   });
   const labelOpts = { groups: parsed.groups };
-  let chosen = applyParallelEdgeOffsets(searched);
+  let chosen = applyParallelEdgeOffsets(spreadCrowdedPorts(searched));
   let placed = placeEdgeLabels(chosen, labelOpts);
   if (placed.unresolved.length > 0) {
     const relaid = await layoutBoxesAndLinesSearch(parsed, collapseInfo, {
@@ -145,7 +141,7 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
       // first search surfaced no dagre candidates.
       ...topConfigs !== void 0 && topConfigs.length > 0 && { configs: topConfigs }
     });
-    const relaidChosen = applyParallelEdgeOffsets(relaid);
+    const relaidChosen = applyParallelEdgeOffsets(spreadCrowdedPorts(relaid));
     const relaidPlaced = placeEdgeLabels(relaidChosen, labelOpts);
     if (relaidPlaced.unresolved.length < placed.unresolved.length) {
       placed = relaidPlaced;
@@ -242,6 +238,102 @@ function attachNotes(layout, parsed, collapsedNotes) {
     height: bbMaxY + shiftY + MARGIN
   };
 }
+function spreadCrowdedPorts(layout) {
+  const boxes = /* @__PURE__ */ new Map();
+  for (const n of layout.nodes)
+    boxes.set(n.label, { x: n.x, y: n.y, w: n.width, h: n.height });
+  for (const g of layout.groups)
+    if (g.collapsed)
+      boxes.set("__group_" + g.label, {
+        x: g.x,
+        y: g.y,
+        w: g.width,
+        h: g.height
+      });
+  const faces = /* @__PURE__ */ new Map();
+  const onSide = (box, p) => {
+    const E = 1;
+    const l = box.x - box.w / 2;
+    const r = box.x + box.w / 2;
+    const t = box.y - box.h / 2;
+    const b = box.y + box.h / 2;
+    if (p.x < l - E || p.x > r + E || p.y < t - E || p.y > b + E) return null;
+    if (Math.abs(p.y - t) <= E) return "top";
+    if (Math.abs(p.y - b) <= E) return "bottom";
+    if (Math.abs(p.x - l) <= E) return "left";
+    if (Math.abs(p.x - r) <= E) return "right";
+    return null;
+  };
+  layout.edges.forEach((e, i) => {
+    if (e.source === e.target || e.points.length < 2) return;
+    for (const last of [false, true]) {
+      const id = last ? e.target : e.source;
+      const box = boxes.get(id);
+      const p = last ? e.points[e.points.length - 1] : e.points[0];
+      if (!box) continue;
+      const side = onSide(box, p);
+      if (!side) continue;
+      const horiz = side === "top" || side === "bottom";
+      const key = `${id}\0${side}`;
+      let f = faces.get(key);
+      if (!f) faces.set(key, f = { box, horiz, ends: [] });
+      f.ends.push({ edge: i, last, along: horiz ? p.x : p.y });
+    }
+  });
+  const moved = /* @__PURE__ */ new Map();
+  for (const { box, horiz, ends } of faces.values()) {
+    if (ends.length < 2) continue;
+    ends.sort((a, b) => a.along - b.along || a.edge - b.edge);
+    let crowded = false;
+    for (let k = 1; k < ends.length; k++)
+      if (ends[k].along - ends[k - 1].along < MIN_PORT_GAP) crowded = true;
+    if (!crowded) continue;
+    const half = (horiz ? box.w : box.h) / 2 - PORT_CORNER_CLEAR;
+    const ctr = horiz ? box.x : box.y;
+    if (half <= 0) continue;
+    const gap = Math.min(MIN_PORT_GAP, 2 * half / (ends.length - 1));
+    const mean = ends.reduce((acc, e) => acc + e.along, 0) / ends.length;
+    const span = gap * (ends.length - 1);
+    const first = Math.max(
+      ctr - half,
+      Math.min(ctr + half - span, mean - span / 2)
+    );
+    ends.forEach((e, k) => {
+      moved.set(`${e.edge}:${e.last}`, { along: first + k * gap, horiz });
+    });
+  }
+  if (moved.size === 0) return layout;
+  return {
+    ...layout,
+    edges: layout.edges.map((e, i) => {
+      const a = moved.get(`${i}:false`);
+      const b = moved.get(`${i}:true`);
+      if (a === void 0 && b === void 0) return e;
+      const pts = e.points.map((p) => ({ x: p.x, y: p.y }));
+      const shift = (idx, to) => {
+        if (to.horiz) pts[idx].x = to.along;
+        else pts[idx].y = to.along;
+      };
+      if (a !== void 0) shift(0, a);
+      if (b !== void 0) shift(pts.length - 1, b);
+      return { ...e, points: pts };
+    })
+  };
+}
+function routeDetour(points) {
+  const s = points[0];
+  const t = points[points.length - 1];
+  if (!s || !t) return 0;
+  const dx = t.x - s.x;
+  const dy = t.y - s.y;
+  const len = Math.hypot(dx, dy);
+  let worst = 0;
+  for (const p of points) {
+    const d = len < 1e-6 ? Math.hypot(p.x - s.x, p.y - s.y) : Math.abs((p.x - s.x) * dy - (p.y - s.y) * dx) / len;
+    if (d > worst) worst = d;
+  }
+  return worst;
+}
 function applyParallelEdgeOffsets(layout) {
   const groups = /* @__PURE__ */ new Map();
   layout.edges.forEach((e, i) => {
@@ -262,8 +354,11 @@ function applyParallelEdgeOffsets(layout) {
     layout.edges.length
   ).fill(void 0);
   for (const [key, idxs] of groups) {
-    const capped = idxs.slice(0, MAX_PARALLEL_EDGES);
+    const kept = idxs.slice(0, MAX_PARALLEL_EDGES);
     for (const drop of idxs.slice(MAX_PARALLEL_EDGES)) count[drop] = 0;
+    const capped = kept.filter(
+      (idx) => routeDetour(layout.edges[idx].points) <= DETOUR_TOLERANCE
+    );
     if (capped.length < 2) continue;
     const sep = key.indexOf("\0");
     const ca = centre.get(key.slice(0, sep));

package/dist/{chunk-4ELXLATB.js → chunk-XUDGZJTJ.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk-26EVL454.js";
 import {
   layoutGraph
-} from "./chunk-PBEH52A2.js";
+} from "./chunk-ZNNVI5SR.js";
 import {
   NOTE_BADGE_RADIUS,
   noteConnectorPoints,
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-5JO443MB.js";
+} from "./chunk-HAH5X345.js";
 import {
   appendArrowheadMarkers
 } from "./chunk-XBJJP2HN.js";

package/dist/{chunk-H6AFNCN3.js → chunk-XVSJYAK7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-LNO3ASX5.js";
 import {
   parseInlineMarkdown
-} from "./chunk-FWNJDD4U.js";
+} from "./chunk-S7W75MIM.js";
 import {
   TITLE_FONT_WEIGHT
 } from "./chunk-VLC6WNRD.js";

package/dist/{chunk-LHBMQJC3.js → chunk-XWYR5T52.js}

@@ -1,13 +1,13 @@
 import {
   layoutClassDiagram
-} from "./chunk-BP4BT5TH.js";
+} from "./chunk-CLQIXD2C.js";
 import {
   NOTE_BADGE_RADIUS,
   noteConnectorPoints,
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-5JO443MB.js";
+} from "./chunk-HAH5X345.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";

package/dist/{chunk-QNKHJ5CK.js → chunk-YK4N6TBN.js}

@@ -1,7 +1,9 @@
 import {
-  parseInlineMarkdown,
+  parseInlineMarkdown
+} from "./chunk-S7W75MIM.js";
+import {
   safeHref
-} from "./chunk-FWNJDD4U.js";
+} from "./chunk-Z6DXWULM.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";