@diagrammo/dgmo 0.6.1 → 0.6.2

package/dist/index.js

@@ -10476,110 +10476,211 @@ function computeNodeDimensions2(table) {
   const height = headerHeight + columnsHeight + (columnsHeight === 0 ? 4 : 0);
   return { width, height, headerHeight, columnsHeight };
 }
+function findConnectedComponents(tableIds, relationships) {
+  const adj = /* @__PURE__ */ new Map();
+  for (const id of tableIds) adj.set(id, /* @__PURE__ */ new Set());
+  for (const rel of relationships) {
+    adj.get(rel.source)?.add(rel.target);
+    adj.get(rel.target)?.add(rel.source);
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const components = [];
+  for (const id of tableIds) {
+    if (visited.has(id)) continue;
+    const comp = [];
+    const queue = [id];
+    while (queue.length > 0) {
+      const cur = queue.shift();
+      if (visited.has(cur)) continue;
+      visited.add(cur);
+      comp.push(cur);
+      for (const nb of adj.get(cur) ?? []) {
+        if (!visited.has(nb)) queue.push(nb);
+      }
+    }
+    components.push(comp);
+  }
+  return components;
+}
+function layoutComponent(tables, rels, dimMap) {
+  const nodePositions = /* @__PURE__ */ new Map();
+  const edgePoints = /* @__PURE__ */ new Map();
+  if (tables.length === 1) {
+    const dims = dimMap.get(tables[0].id);
+    nodePositions.set(tables[0].id, { x: dims.width / 2, y: dims.height / 2, ...dims });
+    return { nodePositions, edgePoints, width: dims.width, height: dims.height };
+  }
+  const g = new dagre3.graphlib.Graph({ multigraph: true });
+  g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: 80, edgesep: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const table of tables) {
+    const dims = dimMap.get(table.id);
+    g.setNode(table.id, { width: dims.width, height: dims.height });
+  }
+  for (const rel of rels) {
+    g.setEdge(rel.source, rel.target, { label: rel.label ?? "" }, String(rel.lineNumber));
+  }
+  dagre3.layout(g);
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const table of tables) {
+    const pos = g.node(table.id);
+    const dims = dimMap.get(table.id);
+    minX = Math.min(minX, pos.x - dims.width / 2);
+    minY = Math.min(minY, pos.y - dims.height / 2);
+    maxX = Math.max(maxX, pos.x + dims.width / 2);
+    maxY = Math.max(maxY, pos.y + dims.height / 2);
+  }
+  for (const rel of rels) {
+    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
+    for (const pt of ed?.points ?? []) {
+      minX = Math.min(minX, pt.x);
+      minY = Math.min(minY, pt.y);
+      maxX = Math.max(maxX, pt.x);
+      maxY = Math.max(maxY, pt.y);
+    }
+    if (rel.label && (ed?.points ?? []).length > 0) {
+      const pts = ed.points;
+      const mid = pts[Math.floor(pts.length / 2)];
+      const hw = (rel.label.length * 7 + 8) / 2;
+      minX = Math.min(minX, mid.x - hw);
+      maxX = Math.max(maxX, mid.x + hw);
+    }
+  }
+  for (const table of tables) {
+    const pos = g.node(table.id);
+    const dims = dimMap.get(table.id);
+    nodePositions.set(table.id, {
+      x: pos.x - minX,
+      y: pos.y - minY,
+      ...dims
+    });
+  }
+  for (const rel of rels) {
+    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
+    edgePoints.set(
+      rel.lineNumber,
+      (ed?.points ?? []).map((pt) => ({ x: pt.x - minX, y: pt.y - minY }))
+    );
+  }
+  return {
+    nodePositions,
+    edgePoints,
+    width: Math.max(0, maxX - minX),
+    height: Math.max(0, maxY - minY)
+  };
+}
+function packComponents(items) {
+  if (items.length === 0) return [];
+  const sorted = [...items].sort((a, b) => {
+    const aConnected = a.compIds.length > 1 ? 1 : 0;
+    const bConnected = b.compIds.length > 1 ? 1 : 0;
+    if (aConnected !== bConnected) return bConnected - aConnected;
+    return b.compLayout.height - a.compLayout.height;
+  });
+  const totalArea = items.reduce(
+    (s, c) => s + (c.compLayout.width || MIN_WIDTH2) * (c.compLayout.height || HEADER_BASE2),
+    0
+  );
+  const targetW = Math.max(
+    Math.sqrt(totalArea) * 1.5,
+    sorted[0].compLayout.width
+    // at least as wide as the widest component
+  );
+  const placements = [];
+  let curX = 0;
+  let curY = 0;
+  let rowH = 0;
+  for (const item of sorted) {
+    const w = item.compLayout.width || MIN_WIDTH2;
+    const h = item.compLayout.height || HEADER_BASE2;
+    if (curX > 0 && curX + w > targetW) {
+      curY += rowH + COMP_GAP;
+      curX = 0;
+      rowH = 0;
+    }
+    placements.push({ compIds: item.compIds, compLayout: item.compLayout, offsetX: curX, offsetY: curY });
+    curX += w + COMP_GAP;
+    rowH = Math.max(rowH, h);
+  }
+  return placements;
+}
 function layoutERDiagram(parsed) {
   if (parsed.tables.length === 0) {
     return { nodes: [], edges: [], width: 0, height: 0 };
   }
-  const g = new dagre3.graphlib.Graph();
-  g.setGraph({
-    rankdir: "TB",
-    nodesep: 60,
-    ranksep: 80,
-    edgesep: 20
-  });
-  g.setDefaultEdgeLabel(() => ({}));
   const dimMap = /* @__PURE__ */ new Map();
   for (const table of parsed.tables) {
-    const dims = computeNodeDimensions2(table);
-    dimMap.set(table.id, dims);
-    g.setNode(table.id, {
-      label: table.name,
-      width: dims.width,
-      height: dims.height
-    });
+    dimMap.set(table.id, computeNodeDimensions2(table));
   }
-  for (const rel of parsed.relationships) {
-    g.setEdge(rel.source, rel.target, { label: rel.label ?? "" });
+  const compIdSets = findConnectedComponents(
+    parsed.tables.map((t) => t.id),
+    parsed.relationships
+  );
+  const tableById = new Map(parsed.tables.map((t) => [t.id, t]));
+  const componentItems = compIdSets.map((ids) => {
+    const tables = ids.map((id) => tableById.get(id));
+    const rels = parsed.relationships.filter((r) => ids.includes(r.source));
+    return { compIds: ids, compLayout: layoutComponent(tables, rels, dimMap) };
+  });
+  const packed = packComponents(componentItems);
+  const placementByTableId = /* @__PURE__ */ new Map();
+  for (const p of packed) {
+    for (const id of p.compIds) placementByTableId.set(id, p);
+  }
+  const placementByRelLine = /* @__PURE__ */ new Map();
+  for (const p of packed) {
+    for (const lineNum of p.compLayout.edgePoints.keys()) {
+      placementByRelLine.set(lineNum, p);
+    }
   }
-  dagre3.layout(g);
   const layoutNodes = parsed.tables.map((table) => {
-    const pos = g.node(table.id);
-    const dims = dimMap.get(table.id);
+    const p = placementByTableId.get(table.id);
+    const pos = p.compLayout.nodePositions.get(table.id);
     return {
       ...table,
-      x: pos.x,
-      y: pos.y,
-      width: dims.width,
-      height: dims.height,
-      headerHeight: dims.headerHeight,
-      columnsHeight: dims.columnsHeight
+      x: pos.x + p.offsetX + HALF_MARGIN,
+      y: pos.y + p.offsetY + HALF_MARGIN,
+      width: pos.width,
+      height: pos.height,
+      headerHeight: pos.headerHeight,
+      columnsHeight: pos.columnsHeight
     };
   });
   const layoutEdges = parsed.relationships.map((rel) => {
-    const edgeData = g.edge(rel.source, rel.target);
+    const p = placementByRelLine.get(rel.lineNumber);
+    const pts = p?.compLayout.edgePoints.get(rel.lineNumber) ?? [];
     return {
       source: rel.source,
       target: rel.target,
       cardinality: rel.cardinality,
-      points: edgeData?.points ?? [],
+      points: pts.map((pt) => ({
+        x: pt.x + (p?.offsetX ?? 0) + HALF_MARGIN,
+        y: pt.y + (p?.offsetY ?? 0) + HALF_MARGIN
+      })),
       label: rel.label,
       lineNumber: rel.lineNumber
     };
   });
-  let minX = Infinity;
-  let minY = Infinity;
   let maxX = 0;
   let maxY = 0;
   for (const node of layoutNodes) {
-    const left = node.x - node.width / 2;
-    const right = node.x + node.width / 2;
-    const top = node.y - node.height / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (right > maxX) maxX = right;
-    if (top < minY) minY = top;
-    if (bottom > maxY) maxY = bottom;
+    maxX = Math.max(maxX, node.x + node.width / 2);
+    maxY = Math.max(maxY, node.y + node.height / 2);
   }
   for (const edge of layoutEdges) {
     for (const pt of edge.points) {
-      if (pt.x < minX) minX = pt.x;
-      if (pt.x > maxX) maxX = pt.x;
-      if (pt.y < minY) minY = pt.y;
-      if (pt.y > maxY) maxY = pt.y;
-    }
-    if (edge.label && edge.points.length > 0) {
-      const midPt = edge.points[Math.floor(edge.points.length / 2)];
-      const labelHalfW = (edge.label.length * 7 + 8) / 2;
-      if (midPt.x + labelHalfW > maxX) maxX = midPt.x + labelHalfW;
-      if (midPt.x - labelHalfW < minX) minX = midPt.x - labelHalfW;
+      maxX = Math.max(maxX, pt.x);
+      maxY = Math.max(maxY, pt.y);
     }
   }
-  const EDGE_MARGIN2 = 60;
-  const HALF_MARGIN = EDGE_MARGIN2 / 2;
-  const shiftX = -minX + HALF_MARGIN;
-  const shiftY = -minY + HALF_MARGIN;
-  for (const node of layoutNodes) {
-    node.x += shiftX;
-    node.y += shiftY;
-  }
-  for (const edge of layoutEdges) {
-    for (const pt of edge.points) {
-      pt.x += shiftX;
-      pt.y += shiftY;
-    }
-  }
-  maxX += shiftX;
-  maxY += shiftY;
-  const totalWidth = maxX + HALF_MARGIN;
-  const totalHeight = maxY + HALF_MARGIN;
   return {
     nodes: layoutNodes,
     edges: layoutEdges,
-    width: totalWidth,
-    height: totalHeight
+    width: maxX + HALF_MARGIN,
+    height: maxY + HALF_MARGIN
   };
 }
-var MIN_WIDTH2, CHAR_WIDTH4, PADDING_X2, HEADER_BASE2, MEMBER_LINE_HEIGHT3, COMPARTMENT_PADDING_Y3, SEPARATOR_HEIGHT2;
+var MIN_WIDTH2, CHAR_WIDTH4, PADDING_X2, HEADER_BASE2, MEMBER_LINE_HEIGHT3, COMPARTMENT_PADDING_Y3, SEPARATOR_HEIGHT2, HALF_MARGIN, COMP_GAP;
 var init_layout4 = __esm({
   "src/er/layout.ts"() {
     "use strict";
@@ -10590,6 +10691,135 @@ var init_layout4 = __esm({
     MEMBER_LINE_HEIGHT3 = 18;
     COMPARTMENT_PADDING_Y3 = 8;
     SEPARATOR_HEIGHT2 = 1;
+    HALF_MARGIN = 30;
+    COMP_GAP = 60;
+  }
+});
+
+// src/er/classify.ts
+function classifyEREntities(tables, relationships) {
+  const result = /* @__PURE__ */ new Map();
+  if (tables.length === 0) return result;
+  const indegreeMap = {};
+  for (const t of tables) indegreeMap[t.id] = 0;
+  for (const rel of relationships) {
+    if (rel.source === rel.target) continue;
+    if (rel.cardinality.from === "1" && rel.cardinality.to !== "1") {
+      indegreeMap[rel.source] = (indegreeMap[rel.source] ?? 0) + 1;
+    }
+    if (rel.cardinality.to === "1" && rel.cardinality.from !== "1") {
+      indegreeMap[rel.target] = (indegreeMap[rel.target] ?? 0) + 1;
+    }
+  }
+  const tableStarNeighbors = /* @__PURE__ */ new Map();
+  for (const rel of relationships) {
+    if (rel.source === rel.target) continue;
+    if (rel.cardinality.from === "*") {
+      if (!tableStarNeighbors.has(rel.source)) tableStarNeighbors.set(rel.source, /* @__PURE__ */ new Set());
+      tableStarNeighbors.get(rel.source).add(rel.target);
+    }
+    if (rel.cardinality.to === "*") {
+      if (!tableStarNeighbors.has(rel.target)) tableStarNeighbors.set(rel.target, /* @__PURE__ */ new Set());
+      tableStarNeighbors.get(rel.target).add(rel.source);
+    }
+  }
+  const mmParticipants = /* @__PURE__ */ new Set();
+  for (const [id, neighbors] of tableStarNeighbors) {
+    if (neighbors.size >= 2) mmParticipants.add(id);
+  }
+  const indegreeValues = Object.values(indegreeMap);
+  const mean = indegreeValues.reduce((a, b) => a + b, 0) / indegreeValues.length;
+  const variance = indegreeValues.reduce((a, b) => a + (b - mean) ** 2, 0) / indegreeValues.length;
+  const stddev = Math.sqrt(variance);
+  const sorted = [...indegreeValues].sort((a, b) => a - b);
+  const median = sorted.length % 2 === 0 ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2 : sorted[Math.floor(sorted.length / 2)];
+  for (const table of tables) {
+    const id = table.id;
+    const cols = table.columns;
+    const fkCols = cols.filter((c) => c.constraints.includes("fk"));
+    const pkFkCols = cols.filter(
+      (c) => c.constraints.includes("pk") && c.constraints.includes("fk")
+    );
+    const fkCount = fkCols.length;
+    const fkRatio = cols.length === 0 ? 0 : fkCount / cols.length;
+    const indegree = indegreeMap[id] ?? 0;
+    const nameLower = table.name.toLowerCase();
+    const externalRels = relationships.filter(
+      (r) => (r.source === id || r.target === id) && r.source !== r.target
+    );
+    const hasSelfRef = relationships.some((r) => r.source === id && r.target === id);
+    const externalTargets = /* @__PURE__ */ new Set();
+    for (const rel of externalRels) {
+      externalTargets.add(rel.source === id ? rel.target : rel.source);
+    }
+    if (hasSelfRef && externalRels.length === 0) {
+      result.set(id, "self-referential");
+      continue;
+    }
+    const isInheritancePattern = pkFkCols.length >= 2 && externalTargets.size === 1;
+    const junctionByRatio = fkRatio >= 0.6 && !isInheritancePattern;
+    const junctionByCompositePk = pkFkCols.length >= 2 && externalTargets.size >= 2;
+    const junctionByMm = mmParticipants.has(id);
+    if (junctionByRatio || junctionByCompositePk || junctionByMm) {
+      result.set(id, "junction");
+      continue;
+    }
+    if (fkRatio >= 0.4 && fkRatio < 0.6 && pkFkCols.length < 2 && !mmParticipants.has(id)) {
+      result.set(id, "ambiguous");
+      continue;
+    }
+    const nameMatchesLookup = LOOKUP_NAME_SUFFIXES.some((s) => nameLower.endsWith(s));
+    if (nameMatchesLookup && cols.length <= 6 && fkCount <= 1 && indegree > median) {
+      result.set(id, "lookup");
+      continue;
+    }
+    if (tables.length >= 6 && indegree > 0 && indegree > mean + 1.5 * stddev && indegree >= 2 * mean) {
+      result.set(id, "hub");
+      continue;
+    }
+    if (fkCount > 0) {
+      result.set(id, "dependent");
+      continue;
+    }
+    result.set(id, "core");
+  }
+  return result;
+}
+var ROLE_COLORS, ROLE_LABELS, ROLE_ORDER, LOOKUP_NAME_SUFFIXES;
+var init_classify = __esm({
+  "src/er/classify.ts"() {
+    "use strict";
+    ROLE_COLORS = {
+      core: "green",
+      dependent: "blue",
+      junction: "red",
+      ambiguous: "purple",
+      lookup: "yellow",
+      hub: "orange",
+      "self-referential": "teal",
+      unclassified: "gray"
+    };
+    ROLE_LABELS = {
+      core: "Core entity",
+      dependent: "Dependent",
+      junction: "Junction / M:M",
+      ambiguous: "Bridge",
+      lookup: "Lookup / Reference",
+      hub: "Hub",
+      "self-referential": "Self-referential",
+      unclassified: "Unclassified"
+    };
+    ROLE_ORDER = [
+      "core",
+      "dependent",
+      "junction",
+      "ambiguous",
+      "lookup",
+      "hub",
+      "self-referential",
+      "unclassified"
+    ];
+    LOOKUP_NAME_SUFFIXES = ["_type", "_status", "_code", "_category"];
   }
 });
 
@@ -10661,25 +10891,41 @@ function drawCardinality(g, point, prevPoint, cardinality, color, useLabels) {
     g.append("line").attr("x1", bx + px * spread).attr("y1", by + py * spread).attr("x2", bx - px * spread).attr("y2", by - py * spread).attr("stroke", color).attr("stroke-width", sw);
   }
 }
-function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
+function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup, semanticColorsActive) {
   d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const useSemanticColors = parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
+  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING5 : 0;
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING5 * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING5 * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE4, scaleX, scaleY);
-  const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING5;
-  const svg = d3Selection5.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
+  const naturalW = diagramW + DIAGRAM_PADDING5 * 2;
+  const naturalH = diagramH + titleHeight + legendReserveH + DIAGRAM_PADDING5 * 2;
+  let viewW;
+  let viewH;
+  let scale;
+  let offsetX;
+  let offsetY;
+  if (exportDims) {
+    viewW = exportDims.width ?? naturalW;
+    viewH = exportDims.height ?? naturalH;
+    const availH = viewH - titleHeight - legendReserveH;
+    const scaleX = (viewW - DIAGRAM_PADDING5 * 2) / diagramW;
+    const scaleY = (availH - DIAGRAM_PADDING5 * 2) / diagramH;
+    scale = Math.min(MAX_SCALE4, scaleX, scaleY);
+    const scaledW = diagramW * scale;
+    offsetX = (viewW - scaledW) / 2;
+    offsetY = titleHeight + DIAGRAM_PADDING5;
+  } else {
+    viewW = naturalW;
+    viewH = naturalH;
+    scale = 1;
+    offsetX = DIAGRAM_PADDING5;
+    offsetY = titleHeight + DIAGRAM_PADDING5;
+  }
+  if (viewW <= 0 || viewH <= 0) return;
+  const svg = d3Selection5.select(container).append("svg").attr("width", exportDims ? viewW : "100%").attr("height", exportDims ? viewH : "100%").attr("viewBox", `0 0 ${viewW} ${viewH}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   if (parsed.title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", viewW / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
@@ -10693,6 +10939,8 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   const seriesColors2 = getSeriesColors(palette);
+  const semanticRoles = useSemanticColors ? classifyEREntities(parsed.tables, parsed.relationships) : null;
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
   const useLabels = parsed.options.notation === "labels";
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
@@ -10732,7 +10980,8 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
     const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
-    const nodeColor2 = node.color ?? tagColor ?? seriesColors2[ni % seriesColors2.length];
+    const semanticColor = semanticActive ? palette.colors[ROLE_COLORS[semanticRoles.get(node.id) ?? "unclassified"]] : semanticRoles ? palette.primary : void 0;
+    const nodeColor2 = node.color ?? tagColor ?? semanticColor ?? seriesColors2[ni % seriesColors2.length];
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "er-table").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
     if (activeTagGroup) {
       const tagKey = activeTagGroup.toLowerCase();
@@ -10741,6 +10990,10 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
       }
     }
+    if (semanticRoles) {
+      const role = semanticRoles.get(node.id);
+      if (role) nodeG.attr("data-er-role", role);
+    }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => {
         onClickItem(node.lineNumber);
@@ -10781,7 +11034,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       legendG.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
     let legendX = DIAGRAM_PADDING5;
-    let legendY = height - DIAGRAM_PADDING5;
+    let legendY = viewH - DIAGRAM_PADDING5;
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append("g").attr("data-legend-group", group.name.toLowerCase());
       const labelText = groupG.append("text").attr("x", legendX).attr("y", legendY + LEGEND_PILL_H / 2).attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(`${group.name}:`);
@@ -10800,6 +11053,62 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       legendX += LEGEND_GROUP_GAP;
     }
   }
+  if (semanticRoles) {
+    const presentRoles = ROLE_ORDER.filter((role) => {
+      for (const r of semanticRoles.values()) {
+        if (r === role) return true;
+      }
+      return false;
+    });
+    if (presentRoles.length > 0) {
+      const measureLabelW = (text, fontSize) => {
+        const dummy = svg.append("text").attr("font-size", fontSize).attr("font-family", FONT_FAMILY).attr("visibility", "hidden").text(text);
+        const measured = dummy.node()?.getComputedTextLength?.() ?? 0;
+        dummy.remove();
+        return measured > 0 ? measured : text.length * fontSize * 0.6;
+      };
+      const labelWidths = /* @__PURE__ */ new Map();
+      for (const role of presentRoles) {
+        labelWidths.set(role, measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE));
+      }
+      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+      const groupName = "Role";
+      const pillWidth = groupName.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+      let totalWidth;
+      let entriesWidth = 0;
+      if (semanticActive) {
+        for (const role of presentRoles) {
+          entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
+        }
+        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesWidth;
+      } else {
+        totalWidth = pillWidth;
+      }
+      const legendX = (viewW - totalWidth) / 2;
+      const legendY = viewH - DIAGRAM_PADDING5 - LEGEND_HEIGHT;
+      const semanticLegendG = svg.append("g").attr("class", "er-semantic-legend").attr("data-legend-group", "role").attr("transform", `translate(${legendX}, ${legendY})`).style("cursor", "pointer");
+      if (semanticActive) {
+        semanticLegendG.append("rect").attr("width", totalWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", palette.bg);
+        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
+        semanticLegendG.append("text").attr("x", LEGEND_CAPSULE_PAD + pillWidth / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
+        let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+        for (const role of presentRoles) {
+          const label = ROLE_LABELS[role];
+          const roleColor = palette.colors[ROLE_COLORS[role]];
+          const entryG = semanticLegendG.append("g").attr("data-legend-entry", role);
+          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", roleColor);
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(label);
+          entryX = textX + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
+        }
+      } else {
+        semanticLegendG.append("rect").attr("width", pillWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+        semanticLegendG.append("text").attr("x", pillWidth / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.textMuted).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
+      }
+    }
+  }
 }
 function renderERDiagramForExport(content, theme, palette) {
   const parsed = parseERDiagram(content, palette);
@@ -10847,6 +11156,7 @@ var init_renderer5 = __esm({
     init_legend_constants();
     init_parser3();
     init_layout4();
+    init_classify();
     DIAGRAM_PADDING5 = 20;
     MAX_SCALE4 = 3;
     TABLE_FONT_SIZE = 13;
@@ -10975,9 +11285,10 @@ function layoutInitiativeStatus(parsed, collapseResult) {
     const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
     const dagrePoints = dagreEdge?.points ?? [];
     const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
-    const step = Math.min((enterX - exitX) * 0.15, 20);
+    const step = Math.max(0, Math.min((enterX - exitX) * 0.15, 20));
     const isBackEdge = tgt.x < src.x - 5;
-    const isYDisplaced = !isBackEdge && Math.abs(tgt.y - src.y) > NODESEP;
+    const isTopExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y < src.y - NODESEP;
+    const isBottomExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y > src.y + NODESEP;
     let points;
     if (isBackEdge) {
       const routeAbove = Math.min(src.y, tgt.y) > avgNodeY;
@@ -10987,31 +11298,44 @@ function layoutInitiativeStatus(parsed, collapseResult) {
       const spreadDir = avgNodeX < rawMidX ? 1 : -1;
       const unclamped = Math.abs(src.x - tgt.x) < NODE_WIDTH ? rawMidX + spreadDir * BACK_EDGE_MIN_SPREAD : rawMidX;
       const midX = Math.min(src.x, Math.max(tgt.x, unclamped));
+      const srcDepart = Math.max(midX + 1, src.x - TOP_EXIT_STEP);
+      const tgtApproach = Math.min(midX - 1, tgt.x + TOP_EXIT_STEP);
       if (routeAbove) {
         const arcY = Math.min(src.y - srcHalfH, tgt.y - tgtHalfH) - BACK_EDGE_MARGIN;
         points = [
           { x: src.x, y: src.y - srcHalfH },
+          { x: srcDepart, y: src.y - srcHalfH - TOP_EXIT_STEP },
           { x: midX, y: arcY },
+          { x: tgtApproach, y: tgt.y - tgtHalfH - TOP_EXIT_STEP },
           { x: tgt.x, y: tgt.y - tgtHalfH }
         ];
       } else {
         const arcY = Math.max(src.y + srcHalfH, tgt.y + tgtHalfH) + BACK_EDGE_MARGIN;
         points = [
           { x: src.x, y: src.y + srcHalfH },
+          { x: srcDepart, y: src.y + srcHalfH + TOP_EXIT_STEP },
           { x: midX, y: arcY },
+          { x: tgtApproach, y: tgt.y + tgtHalfH + TOP_EXIT_STEP },
           { x: tgt.x, y: tgt.y + tgtHalfH }
         ];
       }
-    } else if (isYDisplaced) {
-      const exitY = tgt.y > src.y + NODESEP ? src.y + src.height / 2 : src.y - src.height / 2;
-      const spreadExitX = src.x + yOffset;
-      const spreadEntryY = tgt.y + yOffset;
-      const midX = (spreadExitX + enterX) / 2;
-      const midY = (exitY + spreadEntryY) / 2;
+    } else if (isTopExit) {
+      const exitY = src.y - src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
       points = [
-        { x: spreadExitX, y: exitY },
-        { x: midX, y: midY },
-        { x: enterX, y: spreadEntryY }
+        { x: src.x, y: exitY },
+        { x: p1x, y: exitY - TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX, y: tgt.y }
+      ];
+    } else if (isBottomExit) {
+      const exitY = src.y + src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
+      points = [
+        { x: src.x, y: exitY },
+        { x: p1x, y: exitY + TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX, y: tgt.y }
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       points = [
@@ -11108,7 +11432,7 @@ function layoutInitiativeStatus(parsed, collapseResult) {
   totalHeight += 40;
   return { nodes: layoutNodes, edges: layoutEdges, groups: layoutGroups, width: totalWidth, height: totalHeight };
 }
-var STATUS_PRIORITY, PHI, NODE_HEIGHT, NODE_WIDTH, GROUP_PADDING, NODESEP, RANKSEP, PARALLEL_SPACING, PARALLEL_EDGE_MARGIN, MAX_PARALLEL_EDGES, BACK_EDGE_MARGIN, BACK_EDGE_MIN_SPREAD, CHAR_WIDTH_RATIO, NODE_FONT_SIZE, NODE_TEXT_PADDING;
+var STATUS_PRIORITY, PHI, NODE_HEIGHT, NODE_WIDTH, GROUP_PADDING, NODESEP, RANKSEP, PARALLEL_SPACING, PARALLEL_EDGE_MARGIN, MAX_PARALLEL_EDGES, BACK_EDGE_MARGIN, BACK_EDGE_MIN_SPREAD, TOP_EXIT_STEP, CHAR_WIDTH_RATIO, NODE_FONT_SIZE, NODE_TEXT_PADDING;
 var init_layout5 = __esm({
   "src/initiative-status/layout.ts"() {
     "use strict";
@@ -11124,6 +11448,7 @@ var init_layout5 = __esm({
     MAX_PARALLEL_EDGES = 5;
     BACK_EDGE_MARGIN = 40;
     BACK_EDGE_MIN_SPREAD = Math.round(NODE_WIDTH * 0.75);
+    TOP_EXIT_STEP = 10;
     CHAR_WIDTH_RATIO = 0.6;
     NODE_FONT_SIZE = 13;
     NODE_TEXT_PADDING = 12;
@@ -11623,7 +11948,7 @@ __export(layout_exports6, {
   rollUpContextRelationships: () => rollUpContextRelationships
 });
 import dagre5 from "@dagrejs/dagre";
-function computeEdgePenalty(edgeList, nodePositions, degrees) {
+function computeEdgePenalty(edgeList, nodePositions, degrees, nodeGeometry) {
   let penalty = 0;
   for (const edge of edgeList) {
     const sx = nodePositions.get(edge.source);
@@ -11633,6 +11958,32 @@ function computeEdgePenalty(edgeList, nodePositions, degrees) {
     const weight = Math.min(degrees.get(edge.source) ?? 1, degrees.get(edge.target) ?? 1);
     penalty += dist * weight;
   }
+  if (nodeGeometry) {
+    for (const edge of edgeList) {
+      const geomA = nodeGeometry.get(edge.source);
+      const geomB = nodeGeometry.get(edge.target);
+      if (!geomA || !geomB) continue;
+      const ax = nodePositions.get(edge.source) ?? 0;
+      const bx = nodePositions.get(edge.target) ?? 0;
+      const ay = geomA.y;
+      const by = geomB.y;
+      if (ay === by) continue;
+      const edgeMinX = Math.min(ax, bx);
+      const edgeMaxX = Math.max(ax, bx);
+      const edgeMinY = Math.min(ay, by);
+      const edgeMaxY = Math.max(ay, by);
+      for (const [name, geomC] of nodeGeometry) {
+        if (name === edge.source || name === edge.target) continue;
+        const cx = nodePositions.get(name) ?? 0;
+        const cy = geomC.y;
+        const hw = geomC.width / 2;
+        const hh = geomC.height / 2;
+        if (cx + hw > edgeMinX && cx - hw < edgeMaxX && cy + hh > edgeMinY && cy - hh < edgeMaxY) {
+          penalty += EDGE_NODE_COLLISION_WEIGHT;
+        }
+      }
+    }
+  }
   return penalty;
 }
 function reduceCrossings(g, edgeList, nodeGroupMap) {
@@ -11642,6 +11993,11 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
     degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + 1);
     degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + 1);
   }
+  const nodeGeometry = /* @__PURE__ */ new Map();
+  for (const name of g.nodes()) {
+    const pos = g.node(name);
+    if (pos) nodeGeometry.set(name, { y: pos.y, width: pos.width, height: pos.height });
+  }
   const rankMap = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
     const pos = g.node(name);
@@ -11684,7 +12040,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
         const pos = g.node(name);
         if (pos) basePositions.set(name, pos.x);
       }
-      const currentPenalty = computeEdgePenalty(edgeList, basePositions, degrees);
+      const currentPenalty = computeEdgePenalty(edgeList, basePositions, degrees, nodeGeometry);
       let bestPerm = [...partition];
       let bestPenalty = currentPenalty;
       if (partition.length <= 8) {
@@ -11694,7 +12050,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
           for (let i = 0; i < perm.length; i++) {
             testPositions.set(perm[i], xSlots[i]);
           }
-          const penalty = computeEdgePenalty(edgeList, testPositions, degrees);
+          const penalty = computeEdgePenalty(edgeList, testPositions, degrees, nodeGeometry);
           if (penalty < bestPenalty) {
             bestPenalty = penalty;
             bestPerm = [...perm];
@@ -11712,13 +12068,13 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
             for (let k = 0; k < workingOrder.length; k++) {
               testPositions.set(workingOrder[k], xSlots[k]);
             }
-            const before = computeEdgePenalty(edgeList, testPositions, degrees);
+            const before = computeEdgePenalty(edgeList, testPositions, degrees, nodeGeometry);
             [workingOrder[i], workingOrder[i + 1]] = [workingOrder[i + 1], workingOrder[i]];
             const testPositions2 = new Map(basePositions);
             for (let k = 0; k < workingOrder.length; k++) {
               testPositions2.set(workingOrder[k], xSlots[k]);
             }
-            const after = computeEdgePenalty(edgeList, testPositions2, degrees);
+            const after = computeEdgePenalty(edgeList, testPositions2, degrees, nodeGeometry);
             if (after < before) {
               improved = true;
               if (after < bestPenalty) {
@@ -11957,7 +12313,7 @@ function computeLegendGroups3(tagGroups) {
     const nameW = group.name.length * LEGEND_PILL_FONT_W4 + LEGEND_PILL_PAD4 * 2;
     let capsuleW = LEGEND_CAPSULE_PAD4;
     for (const e of entries) {
-      capsuleW += LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4 + e.value.length * LEGEND_ENTRY_FONT_W4 + LEGEND_ENTRY_TRAIL4;
+      capsuleW += LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4 + e.value.length * LEGEND_ENTRY_FONT_W5 + LEGEND_ENTRY_TRAIL4;
     }
     capsuleW += LEGEND_CAPSULE_PAD4;
     result.push({
@@ -13038,7 +13394,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
   }
   return { nodes, edges, legend: legendGroups, groupBoundaries, width: totalWidth, height: totalHeight };
 }
-var 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, MARGIN3, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_FONT_SIZE2, LEGEND_PILL_FONT_W4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_FONT_SIZE2, LEGEND_ENTRY_FONT_W4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, META_EXCLUDE_KEYS;
+var 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, MARGIN3, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_FONT_SIZE2, LEGEND_PILL_FONT_W4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_FONT_SIZE2, LEGEND_ENTRY_FONT_W5, 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";
@@ -13063,10 +13419,11 @@ var init_layout6 = __esm({
     LEGEND_PILL_PAD4 = 16;
     LEGEND_DOT_R4 = 4;
     LEGEND_ENTRY_FONT_SIZE2 = 10;
-    LEGEND_ENTRY_FONT_W4 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
+    LEGEND_ENTRY_FONT_W5 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
     LEGEND_ENTRY_DOT_GAP4 = 4;
     LEGEND_ENTRY_TRAIL4 = 8;
     LEGEND_CAPSULE_PAD4 = 4;
+    EDGE_NODE_COLLISION_WEIGHT = 5e3;
     META_EXCLUDE_KEYS = /* @__PURE__ */ new Set(["description", "tech", "technology", "is a"]);
   }
 });
@@ -15251,6 +15608,7 @@ var init_compute = __esm({
 // src/infra/layout.ts
 var layout_exports8 = {};
 __export(layout_exports8, {
+  fixEdgeWaypoints: () => fixEdgeWaypoints,
   layoutInfra: () => layoutInfra,
   separateGroups: () => separateGroups
 });
@@ -15435,6 +15793,8 @@ function formatUptime(fraction) {
   return `${pct.toFixed(1)}%`;
 }
 function separateGroups(groups, nodes, isLR, maxIterations = 20) {
+  const groupDeltas = /* @__PURE__ */ new Map();
+  let converged = false;
   for (let iter = 0; iter < maxIterations; iter++) {
     let anyOverlap = false;
     for (let i = 0; i < groups.length; i++) {
@@ -15452,6 +15812,9 @@ function separateGroups(groups, nodes, isLR, maxIterations = 20) {
         const groupToShift = aCenter <= bCenter ? gb : ga;
         if (isLR) groupToShift.y += shift;
         else groupToShift.x += shift;
+        const prev = groupDeltas.get(groupToShift.id) ?? { dx: 0, dy: 0 };
+        if (isLR) groupDeltas.set(groupToShift.id, { dx: prev.dx, dy: prev.dy + shift });
+        else groupDeltas.set(groupToShift.id, { dx: prev.dx + shift, dy: prev.dy });
         for (const node of nodes) {
           if (node.groupId === groupToShift.id) {
             if (isLR) node.y += shift;
@@ -15460,19 +15823,48 @@ function separateGroups(groups, nodes, isLR, maxIterations = 20) {
         }
       }
     }
-    if (!anyOverlap) break;
+    if (!anyOverlap) {
+      converged = true;
+      break;
+    }
+  }
+  if (!converged && maxIterations > 0) {
+    console.warn(`separateGroups: hit maxIterations (${maxIterations}) without fully resolving all group overlaps`);
+  }
+  return groupDeltas;
+}
+function fixEdgeWaypoints(edges, nodes, groupDeltas) {
+  if (groupDeltas.size === 0) return;
+  const nodeToGroup = /* @__PURE__ */ new Map();
+  for (const node of nodes) nodeToGroup.set(node.id, node.groupId);
+  for (const edge of edges) {
+    const srcGroup = nodeToGroup.get(edge.sourceId) ?? null;
+    const tgtGroup = nodeToGroup.get(edge.targetId) ?? null;
+    const srcDelta = srcGroup ? groupDeltas.get(srcGroup) : void 0;
+    const tgtDelta = tgtGroup ? groupDeltas.get(tgtGroup) : void 0;
+    if (!srcDelta && !tgtDelta) continue;
+    if (srcDelta && tgtDelta && srcGroup !== tgtGroup) {
+      edge.points = [];
+      continue;
+    }
+    const delta = srcDelta ?? tgtDelta;
+    for (const pt of edge.points) {
+      pt.x += delta.dx;
+      pt.y += delta.dy;
+    }
   }
 }
 function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
   if (computed.nodes.length === 0) {
-    return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
+    return { nodes: [], edges: [], groups: [], options: {}, direction: computed.direction, width: 0, height: 0 };
   }
+  const isLR = computed.direction !== "TB";
   const g = new dagre7.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === "TB" ? "TB" : "LR",
-    nodesep: 50,
-    ranksep: 100,
-    edgesep: 20
+    nodesep: isLR ? 70 : 60,
+    ranksep: isLR ? 150 : 120,
+    edgesep: 30
   });
   g.setDefaultEdgeLabel(() => ({}));
   const groupedNodeIds = /* @__PURE__ */ new Set();
@@ -15480,7 +15872,6 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     if (node.groupId) groupedNodeIds.add(node.id);
   }
   const GROUP_INFLATE = GROUP_PADDING3 * 2 + GROUP_HEADER_HEIGHT;
-  const isLR = computed.direction !== "TB";
   const widthMap = /* @__PURE__ */ new Map();
   const heightMap = /* @__PURE__ */ new Map();
   for (const node of computed.nodes) {
@@ -15615,7 +16006,8 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
       lineNumber: group.lineNumber
     };
   });
-  separateGroups(layoutGroups, layoutNodes, isLR);
+  const groupDeltas = separateGroups(layoutGroups, layoutNodes, isLR);
+  fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of layoutNodes) {
     const left = node.x - node.width / 2;
@@ -15673,6 +16065,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight
   };
@@ -15714,23 +16107,23 @@ var init_layout8 = __esm({
     ]);
     DISPLAY_NAMES = {
       "cache-hit": "cache hit",
-      "firewall-block": "fw block",
+      "firewall-block": "firewall block",
       "ratelimit-rps": "rate limit RPS",
       "latency-ms": "latency",
       "uptime": "uptime",
       "instances": "instances",
       "max-rps": "max RPS",
-      "cb-error-threshold": "CB error",
-      "cb-latency-threshold-ms": "CB latency",
+      "cb-error-threshold": "CB error threshold",
+      "cb-latency-threshold-ms": "CB latency threshold",
       "concurrency": "concurrency",
       "duration-ms": "duration",
       "cold-start-ms": "cold start",
       "buffer": "buffer",
-      "drain-rate": "drain",
+      "drain-rate": "drain rate",
       "retention-hours": "retention",
       "partitions": "partitions"
     };
-    GROUP_GAP = 24;
+    GROUP_GAP = GROUP_PADDING3 * 2 + GROUP_HEADER_HEIGHT;
   }
 });
 
@@ -15805,6 +16198,236 @@ function resolveNodeSlo(node, diagramOptions) {
   if (availThreshold == null && latencyP90 == null) return null;
   return { availThreshold, latencyP90, warningMargin };
 }
+function buildPathD(pts, direction) {
+  const gen = d3Shape7.line().x((d) => d.x).y((d) => d.y);
+  if (pts.length <= 2) {
+    gen.curve(direction === "TB" ? d3Shape7.curveBumpY : d3Shape7.curveBumpX);
+  } else {
+    gen.curve(d3Shape7.curveCatmullRom.alpha(0.5));
+  }
+  return gen(pts) ?? "";
+}
+function computePortPts(edges, nodeMap, direction) {
+  const srcPts = /* @__PURE__ */ new Map();
+  const tgtPts = /* @__PURE__ */ new Map();
+  const PAD = 0.1;
+  const activeEdges = edges.filter((e) => e.points.length > 0);
+  const bySource = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!bySource.has(e.sourceId)) bySource.set(e.sourceId, []);
+    bySource.get(e.sourceId).push(e);
+  }
+  for (const [sourceId, es] of bySource) {
+    if (es.length < 2) continue;
+    const source = nodeMap.get(sourceId);
+    if (!source) continue;
+    const sorted = es.map((e) => ({ e, t: nodeMap.get(e.targetId) })).filter((x) => x.t != null).sort((a, b) => direction === "LR" ? a.t.y - b.t.y : a.t.x - b.t.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, t } = sorted[i];
+      const isBackward = direction === "LR" ? t.x < source.x : t.y < source.y;
+      if (direction === "LR") {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? source.x - source.width / 2 : source.x + source.width / 2,
+          y: source.y - source.height / 2 + frac * source.height
+        });
+      } else {
+        srcPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: source.x - source.width / 2 + frac * source.width,
+          y: isBackward ? source.y - source.height / 2 : source.y + source.height / 2
+        });
+      }
+    }
+  }
+  const byTarget = /* @__PURE__ */ new Map();
+  for (const e of activeEdges) {
+    if (!byTarget.has(e.targetId)) byTarget.set(e.targetId, []);
+    byTarget.get(e.targetId).push(e);
+  }
+  for (const [targetId, es] of byTarget) {
+    if (es.length < 2) continue;
+    const target = nodeMap.get(targetId);
+    if (!target) continue;
+    const sorted = es.map((e) => ({ e, s: nodeMap.get(e.sourceId) })).filter((x) => x.s != null).sort((a, b) => direction === "LR" ? a.s.y - b.s.y : a.s.x - b.s.x);
+    const n = sorted.length;
+    for (let i = 0; i < n; i++) {
+      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const { e, s } = sorted[i];
+      const isBackward = direction === "LR" ? target.x < s.x : target.y < s.y;
+      if (direction === "LR") {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: isBackward ? target.x + target.width / 2 : target.x - target.width / 2,
+          y: target.y - target.height / 2 + frac * target.height
+        });
+      } else {
+        tgtPts.set(`${e.sourceId}:${e.targetId}`, {
+          x: target.x - target.width / 2 + frac * target.width,
+          y: isBackward ? target.y + target.height / 2 : target.y - target.height / 2
+        });
+      }
+    }
+  }
+  return { srcPts, tgtPts };
+}
+function findRoutingLane(blocking, targetY, margin) {
+  const MERGE_SLOP = 4;
+  const sorted = [...blocking].sort((a, b) => a.y + a.height / 2 - (b.y + b.height / 2));
+  const merged = [];
+  for (const r of sorted) {
+    const lo = r.y - MERGE_SLOP;
+    const hi = r.y + r.height + MERGE_SLOP;
+    if (merged.length && lo <= merged[merged.length - 1][1]) {
+      merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], hi);
+    } else {
+      merged.push([lo, hi]);
+    }
+  }
+  if (merged.length === 0) return targetY;
+  const MIN_GAP = 10;
+  const candidates = [
+    merged[0][0] - margin,
+    // above all blocking rects
+    merged[merged.length - 1][1] + margin
+    // below all blocking rects
+  ];
+  for (let i = 0; i < merged.length - 1; i++) {
+    const gapLo = merged[i][1];
+    const gapHi = merged[i + 1][0];
+    if (gapHi - gapLo >= MIN_GAP) {
+      candidates.push((gapLo + gapHi) / 2);
+    }
+  }
+  return candidates.reduce(
+    (best, c) => Math.abs(c - targetY) < Math.abs(best - targetY) ? c : best,
+    candidates[0]
+  );
+}
+function segmentIntersectsRect(p1, p2, rect) {
+  const { x: rx, y: ry, width: rw, height: rh } = rect;
+  const rr = rx + rw;
+  const rb = ry + rh;
+  const inRect = (p) => p.x >= rx && p.x <= rr && p.y >= ry && p.y <= rb;
+  if (inRect(p1) || inRect(p2)) return true;
+  if (Math.max(p1.x, p2.x) < rx || Math.min(p1.x, p2.x) > rr) return false;
+  if (Math.max(p1.y, p2.y) < ry || Math.min(p1.y, p2.y) > rb) return false;
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  const crosses = (a, b) => {
+    const d1 = cross(a, b, p1);
+    const d2 = cross(a, b, p2);
+    const d3 = cross(p1, p2, a);
+    const d4 = cross(p1, p2, b);
+    return (d1 > 0 && d2 < 0 || d1 < 0 && d2 > 0) && (d3 > 0 && d4 < 0 || d3 < 0 && d4 > 0);
+  };
+  const tl = { x: rx, y: ry };
+  const tr = { x: rr, y: ry };
+  const br = { x: rr, y: rb };
+  const bl = { x: rx, y: rb };
+  return crosses(tl, tr) || crosses(tr, br) || crosses(br, bl) || crosses(bl, tl);
+}
+function curveIntersectsRect(sc, tc, rect, direction) {
+  if (direction === "LR") {
+    const midX = (sc.x + tc.x) / 2;
+    const m1 = { x: midX, y: sc.y };
+    const m2 = { x: midX, y: tc.y };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  } else {
+    const midY = (sc.y + tc.y) / 2;
+    const m1 = { x: sc.x, y: midY };
+    const m2 = { x: tc.x, y: midY };
+    return segmentIntersectsRect(sc, m1, rect) || segmentIntersectsRect(m1, m2, rect) || segmentIntersectsRect(m2, tc, rect);
+  }
+}
+function edgeWaypoints(source, target, groups, nodes, direction, margin = 30, srcExitPt, tgtEnterPt) {
+  const sc = { x: source.x, y: source.y };
+  const tc = { x: target.x, y: target.y };
+  const isBackward = direction === "LR" ? tc.x < sc.x : tc.y < sc.y;
+  if (isBackward) {
+    if (direction === "LR") {
+      const xBandObs = [];
+      for (const g of groups) {
+        if (g.x + g.width < tc.x - margin || g.x > sc.x + margin) continue;
+        xBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nLeft = n.x - n.width / 2;
+        const nRight = n.x + n.width / 2;
+        if (nRight < tc.x - margin || nLeft > sc.x + margin) continue;
+        xBandObs.push({ x: nLeft, y: n.y - n.height / 2, width: n.width, height: n.height });
+      }
+      const midY = (sc.y + tc.y) / 2;
+      const routeY2 = xBandObs.length > 0 ? findRoutingLane(xBandObs, midY, margin) : midY;
+      const exitBorder = srcExitPt ?? nodeBorderPoint(source, { x: sc.x, y: routeY2 });
+      const exitPt2 = { x: exitBorder.x, y: routeY2 };
+      const enterPt2 = { x: tc.x, y: routeY2 };
+      const tp2 = tgtEnterPt ?? nodeBorderPoint(target, enterPt2);
+      return srcExitPt ? [srcExitPt, exitPt2, enterPt2, tp2] : [exitBorder, exitPt2, enterPt2, tp2];
+    } else {
+      const yBandObs = [];
+      for (const g of groups) {
+        if (g.y + g.height < tc.y - margin || g.y > sc.y + margin) continue;
+        yBandObs.push({ x: g.x, y: g.y, width: g.width, height: g.height });
+      }
+      for (const n of nodes) {
+        if (n.id === source.id || n.id === target.id) continue;
+        const nTop = n.y - n.height / 2;
+        const nBot = n.y + n.height / 2;
+        if (nBot < tc.y - margin || nTop > sc.y + margin) continue;
+        yBandObs.push({ x: n.x - n.width / 2, y: nTop, width: n.width, height: n.height });
+      }
+      const rotated = yBandObs.map((r) => ({ x: r.y, y: r.x, width: r.height, height: r.width }));
+      const midX = (sc.x + tc.x) / 2;
+      const routeX = rotated.length > 0 ? findRoutingLane(rotated, midX, margin) : midX;
+      const exitPt2 = srcExitPt ?? { x: routeX, y: sc.y };
+      const enterPt2 = { x: routeX, y: tc.y };
+      return [
+        srcExitPt ?? nodeBorderPoint(source, exitPt2),
+        exitPt2,
+        enterPt2,
+        tgtEnterPt ?? nodeBorderPoint(target, enterPt2)
+      ];
+    }
+  }
+  const blocking = [];
+  const blockingGroupIds = /* @__PURE__ */ new Set();
+  const pathSrc = srcExitPt ?? sc;
+  const pathTgt = tgtEnterPt ?? tc;
+  for (const g of groups) {
+    if (g.id === source.groupId || g.id === target.groupId) continue;
+    const gRect = { x: g.x, y: g.y, width: g.width, height: g.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, gRect, direction)) {
+      blocking.push(gRect);
+      blockingGroupIds.add(g.id);
+    }
+  }
+  for (const n of nodes) {
+    if (n.id === source.id || n.id === target.id) continue;
+    if (n.groupId && (n.groupId === source.groupId || n.groupId === target.groupId)) continue;
+    if (n.groupId && blockingGroupIds.has(n.groupId)) continue;
+    const nodeRect = { x: n.x - n.width / 2, y: n.y - n.height / 2, width: n.width, height: n.height };
+    if (curveIntersectsRect(pathSrc, pathTgt, nodeRect, direction)) {
+      blocking.push(nodeRect);
+    }
+  }
+  if (blocking.length === 0) {
+    const sp = srcExitPt ?? nodeBorderPoint(source, tc);
+    const tp2 = tgtEnterPt ?? nodeBorderPoint(target, sp);
+    return [sp, tp2];
+  }
+  const obsLeft = Math.min(...blocking.map((o) => o.x));
+  const obsRight = Math.max(...blocking.map((o) => o.x + o.width));
+  const routeY = findRoutingLane(blocking, tc.y, margin);
+  const exitX = direction === "LR" ? Math.max(sc.x, obsLeft - margin) : obsLeft - margin;
+  const enterX = direction === "LR" ? Math.min(tc.x, obsRight + margin) : obsRight + margin;
+  const exitPt = { x: exitX, y: routeY };
+  const enterPt = { x: enterX, y: routeY };
+  const tp = tgtEnterPt ?? nodeBorderPoint(target, enterPt);
+  if (srcExitPt) {
+    return [srcExitPt, exitPt, enterPt, tp];
+  }
+  return [nodeBorderPoint(source, exitPt), exitPt, enterPt, tp];
+}
 function nodeBorderPoint(node, target) {
   const hw = node.width / 2;
   const hh = node.height / 2;
@@ -16088,33 +16711,29 @@ function renderGroups(svg, groups, palette, isDark) {
     }
   }
 }
-function renderEdgePaths(svg, edges, nodes, palette, isDark, animate) {
+function renderEdgePaths(svg, edges, nodes, groups, palette, isDark, animate, direction) {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     const targetNode = nodeMap.get(edge.targetId);
     const sourceNode = nodeMap.get(edge.sourceId);
     const color = edgeColor(edge, palette);
     const strokeW = edgeWidth();
-    let pts = edge.points;
-    if (sourceNode && targetNode && pts.length >= 2) {
-      const first = pts[0];
-      const distFirstToSource = (first.x - sourceNode.x) ** 2 + (first.y - sourceNode.y) ** 2;
-      const distFirstToTarget = (first.x - targetNode.x) ** 2 + (first.y - targetNode.y) ** 2;
-      if (distFirstToTarget < distFirstToSource) {
-        pts = [...pts].reverse();
-      }
-    }
-    if (sourceNode && pts.length > 0) {
-      const bp = nodeBorderPoint(sourceNode, pts[0]);
-      pts = [bp, ...pts];
-    }
-    if (targetNode && pts.length > 0) {
-      const bp = nodeBorderPoint(targetNode, pts[pts.length - 1]);
-      pts = [...pts, bp];
-    }
-    const pathD = lineGenerator7(pts) ?? "";
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const pts = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const pathD = buildPathD(pts, direction);
     const edgeG = svg.append("g").attr("class", "infra-edge").attr("data-line-number", edge.lineNumber);
     edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", color).attr("stroke-width", strokeW);
     if (animate && edge.computedRps > 0) {
@@ -16129,19 +16748,34 @@ function renderEdgePaths(svg, edges, nodes, palette, isDark, animate) {
     }
   }
 }
-function renderEdgeLabels(svg, edges, palette, isDark, animate) {
+function renderEdgeLabels(svg, edges, nodes, groups, palette, isDark, animate, direction) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     if (!edge.label) continue;
-    const midIdx = Math.floor(edge.points.length / 2);
-    const midPt = edge.points[midIdx];
+    const sourceNode = nodeMap.get(edge.sourceId);
+    const targetNode = nodeMap.get(edge.targetId);
+    if (!sourceNode || !targetNode) continue;
+    const key = `${edge.sourceId}:${edge.targetId}`;
+    const wps = edgeWaypoints(
+      sourceNode,
+      targetNode,
+      groups,
+      nodes,
+      direction,
+      30,
+      srcPts.get(key),
+      tgtPts.get(key)
+    );
+    const midPt = wps[Math.floor(wps.length / 2)];
     const labelText = edge.label;
     const g = svg.append("g").attr("class", animate ? "infra-edge-label" : "");
     const textWidth = labelText.length * 6.5 + 8;
     g.append("rect").attr("x", midPt.x - textWidth / 2).attr("y", midPt.y - 8).attr("width", textWidth).attr("height", 16).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9);
     g.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", EDGE_LABEL_FONT_SIZE7).attr("fill", palette.textMuted).text(labelText);
     if (animate) {
-      const pathD = lineGenerator7(edge.points) ?? "";
+      const pathD = buildPathD(wps, direction);
       g.insert("path", ":first-child").attr("d", pathD).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 20);
     }
   }
@@ -16551,7 +17185,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
     rootSvg.append("text").attr("class", "chart-title").attr("x", totalWidth / 2).attr("y", 28).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", 18).attr("font-weight", "700").attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
   }
   renderGroups(svg, layout.groups, palette, isDark);
-  renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
+  renderEdgePaths(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   const fanoutSourceIds = collectFanoutSourceIds(layout.edges);
   const scaledGroupIds = new Set(
     layout.groups.filter((g) => {
@@ -16563,7 +17197,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
-  renderEdgeLabels(svg, layout.edges, palette, isDark, shouldAnimate);
+  renderEdgeLabels(svg, layout.edges, layout.nodes, layout.groups, palette, isDark, shouldAnimate, layout.direction);
   if (hasLegend) {
     if (fixedLegend) {
       const containerWidth = container.clientWidth || totalWidth;
@@ -16581,7 +17215,7 @@ function parseAndLayoutInfra(content) {
   const layout = layoutInfra(computed);
   return { parsed, computed, layout };
 }
-var NODE_FONT_SIZE4, META_FONT_SIZE4, META_LINE_HEIGHT8, EDGE_LABEL_FONT_SIZE7, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, EDGE_STROKE_WIDTH8, NODE_STROKE_WIDTH8, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, COLLAPSE_BAR_HEIGHT5, COLLAPSE_BAR_INSET2, LEGEND_FIXED_GAP3, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_PARTICLE_R, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, lineGenerator7, PROP_DISPLAY, DESC_MAX_CHARS, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
+var NODE_FONT_SIZE4, META_FONT_SIZE4, META_LINE_HEIGHT8, EDGE_LABEL_FONT_SIZE7, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, EDGE_STROKE_WIDTH8, NODE_STROKE_WIDTH8, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, COLLAPSE_BAR_HEIGHT5, COLLAPSE_BAR_INSET2, LEGEND_FIXED_GAP3, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_PARTICLE_R, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
 var init_renderer8 = __esm({
   "src/infra/renderer.ts"() {
     "use strict";
@@ -16625,7 +17259,6 @@ var init_renderer8 = __esm({
     REJECT_DURATION_MAX = 3;
     REJECT_COUNT_MIN = 1;
     REJECT_COUNT_MAX = 3;
-    lineGenerator7 = d3Shape7.line().x((d) => d.x).y((d) => d.y).curve(d3Shape7.curveBasis);
     PROP_DISPLAY = {
       "cache-hit": "cache hit",
       "firewall-block": "firewall block",
@@ -16810,7 +17443,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
         }
       }
     } else if (edge.points.length >= 2) {
-      const pathD = lineGenerator8(edge.points);
+      const pathD = lineGenerator7(edge.points);
       if (pathD) {
         edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor2).attr("stroke-width", EDGE_STROKE_WIDTH9).attr("marker-end", `url(#${markerId})`).attr("class", "st-edge");
       }
@@ -16874,7 +17507,7 @@ function renderStateForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var DIAGRAM_PADDING9, MAX_SCALE8, NODE_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, GROUP_LABEL_FONT_SIZE3, EDGE_STROKE_WIDTH9, NODE_STROKE_WIDTH9, ARROWHEAD_W4, ARROWHEAD_H4, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING2, lineGenerator8;
+var DIAGRAM_PADDING9, MAX_SCALE8, NODE_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, GROUP_LABEL_FONT_SIZE3, EDGE_STROKE_WIDTH9, NODE_STROKE_WIDTH9, ARROWHEAD_W4, ARROWHEAD_H4, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING2, lineGenerator7;
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
@@ -16894,7 +17527,7 @@ var init_state_renderer = __esm({
     PSEUDOSTATE_RADIUS = 10;
     STATE_CORNER_RADIUS = 10;
     GROUP_EXTRA_PADDING2 = 12;
-    lineGenerator8 = d3Shape8.line().x((d) => d.x).y((d) => d.y).curve(d3Shape8.curveBasis);
+    lineGenerator7 = d3Shape8.line().x((d) => d.x).y((d) => d.y).curve(d3Shape8.curveBasis);
   }
 });