@diagrammo/dgmo 0.6.0 → 0.6.2

package/dist/index.js

@@ -1445,6 +1445,29 @@ var init_tag_groups = __esm({
   }
 });
 
+// src/utils/legend-constants.ts
+var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_PILL_FONT_W, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_FONT_W, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, EYE_OPEN_PATH, EYE_CLOSED_PATH;
+var init_legend_constants = __esm({
+  "src/utils/legend-constants.ts"() {
+    "use strict";
+    LEGEND_HEIGHT = 28;
+    LEGEND_PILL_PAD = 16;
+    LEGEND_PILL_FONT_SIZE = 11;
+    LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
+    LEGEND_CAPSULE_PAD = 4;
+    LEGEND_DOT_R = 4;
+    LEGEND_ENTRY_FONT_SIZE = 10;
+    LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
+    LEGEND_ENTRY_DOT_GAP = 4;
+    LEGEND_ENTRY_TRAIL = 8;
+    LEGEND_GROUP_GAP = 12;
+    LEGEND_EYE_SIZE = 14;
+    LEGEND_EYE_GAP = 6;
+    EYE_OPEN_PATH = "M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z";
+    EYE_CLOSED_PATH = "M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1";
+  }
+});
+
 // src/sequence/participant-inference.ts
 function inferParticipantType(name) {
   for (const rule of PARTICIPANT_RULES) {
@@ -4756,10 +4779,12 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
   if (type === "category" && data && data.length > 0) {
     const maxLabelLen = Math.max(...data.map((l) => l.length));
     const count = data.length;
-    if (count > 10 || maxLabelLen > 20) catFontSize = 10;
-    else if (count > 5 || maxLabelLen > 14) catFontSize = 11;
+    const step = intervalOverride != null && intervalOverride > 0 ? intervalOverride + 1 : 1;
+    const visibleCount = Math.ceil(count / step);
+    if (visibleCount > 10 || maxLabelLen > 20) catFontSize = 10;
+    else if (visibleCount > 5 || maxLabelLen > 14) catFontSize = 11;
     else if (maxLabelLen > 8) catFontSize = 12;
-    if (chartWidthHint && count > 0) {
+    if ((intervalOverride == null || intervalOverride === 0) && chartWidthHint && count > 0) {
       const availPerLabel = Math.floor(chartWidthHint * 0.85 / count);
       catLabelExtras = {
         width: availPerLabel,
@@ -4777,6 +4802,9 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
         interval: intervalOverride ?? 0,
+        // Prevent ECharts auto-rotation: it measures raw slot width (chartWidth/N),
+        // which is too narrow when an interval skips most labels, and rotates to 90°.
+        rotate: 0,
         formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2"),
         ...catLabelExtras
       }
@@ -4852,21 +4880,13 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     ]
   };
 }
-function buildIntervalCallback(labels, eras) {
+function buildIntervalStep(labels) {
   const count = labels.length;
-  if (count <= 8) return () => true;
-  const snapSteps = [1, 2, 4, 5, 10, 20, 25, 50];
-  const raw = Math.ceil(count / 8);
+  if (count <= 6) return 0;
+  const snapSteps = [1, 2, 5, 10, 25, 50, 100];
+  const raw = Math.ceil(count / 5);
   const N = [...snapSteps].reverse().find((s) => s <= raw) ?? 1;
-  const pinned = /* @__PURE__ */ new Set();
-  for (let i = 0; i < count; i += N) pinned.add(i);
-  for (const era of eras) {
-    const si = labels.indexOf(era.start);
-    const ei = labels.indexOf(era.end);
-    if (si >= 0) pinned.add(si);
-    if (ei >= 0) pinned.add(ei);
-  }
-  return (index) => pinned.has(index);
+  return N - 1;
 }
 function buildMarkArea(eras, labels, textColor, defaultColor) {
   if (eras.length === 0) return void 0;
@@ -4901,7 +4921,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
   const eras = parsed.eras ?? [];
-  const interval = buildIntervalCallback(labels, eras);
+  const interval = buildIntervalStep(labels);
   const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
@@ -4933,7 +4953,7 @@ function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLi
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
   const eras = parsed.eras ?? [];
-  const interval = buildIntervalCallback(labels, eras);
+  const interval = buildIntervalStep(labels);
   const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   const series = seriesNames.map((name, idx) => {
     const color = parsed.seriesNameColors?.[idx] ?? colors[idx % colors.length];
@@ -4977,7 +4997,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
   const eras = parsed.eras ?? [];
-  const interval = buildIntervalCallback(labels, eras);
+  const interval = buildIntervalStep(labels);
   const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
@@ -6990,7 +7010,6 @@ function parseInfra(content) {
     edges: [],
     groups: [],
     tagGroups: [],
-    scenarios: [],
     options: {},
     diagnostics: [],
     error: null
@@ -7093,16 +7112,7 @@ function parseInfra(content) {
         continue;
       }
       if (/^scenario\s*:/i.test(trimmed)) {
-        finishCurrentNode();
-        finishCurrentTagGroup();
-        currentGroup = null;
-        const scenarioName = trimmed.replace(/^scenario\s*:\s*/i, "").trim();
-        const scenario = {
-          name: scenarioName,
-          overrides: {},
-          lineNumber
-        };
-        let scenarioNodeId = null;
+        console.warn("[dgmo warn] scenario syntax is deprecated and will be ignored");
         let si = i + 1;
         while (si < lines.length) {
           const sLine = lines[si];
@@ -7113,23 +7123,9 @@ function parseInfra(content) {
           }
           const sIndent = sLine.length - sLine.trimStart().length;
           if (sIndent === 0) break;
-          if (sIndent <= 2) {
-            scenarioNodeId = nodeId2(sTrimmed.replace(/\|.*$/, "").trim());
-            if (!scenario.overrides[scenarioNodeId]) {
-              scenario.overrides[scenarioNodeId] = {};
-            }
-          } else if (scenarioNodeId) {
-            const pm = sTrimmed.match(PROPERTY_RE);
-            if (pm) {
-              const key = pm[1].toLowerCase();
-              const val = parsePropertyValue(pm[2].trim());
-              scenario.overrides[scenarioNodeId][key] = val;
-            }
-          }
           si++;
         }
         i = si - 1;
-        result.scenarios.push(scenario);
         continue;
       }
       const tagMatch = trimmed.match(TAG_GROUP_RE);
@@ -7662,14 +7658,14 @@ function computeLegendGroups(tagGroups, showEyeIcons, usedValuesByGroup) {
     const usedValues = usedValuesByGroup?.get(group.name.toLowerCase());
     const visibleEntries = usedValues ? group.entries.filter((e) => usedValues.has(e.value.toLowerCase())) : group.entries;
     if (visibleEntries.length === 0) continue;
-    const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillWidth = group.name.length * LEGEND_PILL_FONT_W2 + LEGEND_PILL_PAD2;
     const minPillWidth = pillWidth;
     let entriesWidth = 0;
     for (const entry of visibleEntries) {
-      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+      entriesWidth += LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2 + entry.value.length * LEGEND_ENTRY_FONT_W2 + LEGEND_ENTRY_TRAIL2;
     }
-    const eyeSpace = showEyeIcons ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
-    const capsuleWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + eyeSpace + entriesWidth;
+    const eyeSpace = showEyeIcons ? LEGEND_EYE_SIZE2 + LEGEND_EYE_GAP2 : 0;
+    const capsuleWidth = LEGEND_CAPSULE_PAD2 * 2 + pillWidth + 4 + eyeSpace + entriesWidth;
     groups.push({
       name: group.name,
       alias: group.alias,
@@ -7680,9 +7676,9 @@ function computeLegendGroups(tagGroups, showEyeIcons, usedValuesByGroup) {
       x: 0,
       y: 0,
       width: capsuleWidth,
-      height: LEGEND_HEIGHT,
+      height: LEGEND_HEIGHT2,
       minifiedWidth: minPillWidth,
-      minifiedHeight: LEGEND_HEIGHT
+      minifiedHeight: LEGEND_HEIGHT2
     });
   }
   return groups;
@@ -7712,7 +7708,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
     for (const g of legendGroups2) {
       g.x = MARGIN;
       g.y = cy;
-      cy += LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      cy += LEGEND_HEIGHT2 + LEGEND_GROUP_GAP2;
       if (g.width > maxWidth2) maxWidth2 = g.width;
     }
     return {
@@ -7721,7 +7717,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
       containers: [],
       legend: legendGroups2,
       width: maxWidth2 + MARGIN * 2,
-      height: cy - LEGEND_GROUP_GAP + MARGIN
+      height: cy - LEGEND_GROUP_GAP2 + MARGIN
     };
   }
   injectDefaultMetadata(parsed.roots, parsed.tagGroups);
@@ -8251,7 +8247,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
   const effectiveH = (g) => activeTagGroup != null || allExpanded ? g.height : g.minifiedHeight;
   if (visibleGroups.length > 0) {
     if (legendPosition === "bottom") {
-      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP2;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
       if (neededWidth > totalWidth) {
         finalWidth = neededWidth;
@@ -8269,22 +8265,22 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
       for (const g of visibleGroups) {
         g.x = cx;
         g.y = legendY;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP2;
       }
-      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
+      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT2;
     } else {
-      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      const legendShift = LEGEND_HEIGHT2 + LEGEND_GROUP_GAP2;
       for (const n of layoutNodes) n.y += legendShift;
       for (const c of containers) c.y += legendShift;
       for (const e of layoutEdges) {
         for (const p of e.points) p.y += legendShift;
       }
-      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP2;
       let cx = MARGIN;
       for (const g of visibleGroups) {
         g.x = cx;
         g.y = MARGIN;
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP2;
       }
       finalHeight += legendShift;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
@@ -8302,7 +8298,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
     height: finalHeight
   };
 }
-var CHAR_WIDTH, META_LINE_HEIGHT, HEADER_HEIGHT, SEPARATOR_GAP, CARD_H_PAD, CARD_V_PAD, MIN_CARD_WIDTH, H_GAP, V_GAP, MARGIN, CONTAINER_PAD_X, CONTAINER_PAD_BOTTOM, CONTAINER_LABEL_HEIGHT, CONTAINER_META_LINE_HEIGHT, STACK_V_GAP, LEGEND_GAP, LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_W, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_W, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP;
+var CHAR_WIDTH, META_LINE_HEIGHT, HEADER_HEIGHT, SEPARATOR_GAP, CARD_H_PAD, CARD_V_PAD, MIN_CARD_WIDTH, H_GAP, V_GAP, MARGIN, CONTAINER_PAD_X, CONTAINER_PAD_BOTTOM, CONTAINER_LABEL_HEIGHT, CONTAINER_META_LINE_HEIGHT, STACK_V_GAP, LEGEND_GAP, LEGEND_HEIGHT2, LEGEND_PILL_PAD2, LEGEND_PILL_FONT_W2, LEGEND_CAPSULE_PAD2, LEGEND_DOT_R2, LEGEND_ENTRY_FONT_W2, LEGEND_ENTRY_DOT_GAP2, LEGEND_ENTRY_TRAIL2, LEGEND_GROUP_GAP2, LEGEND_EYE_SIZE2, LEGEND_EYE_GAP2;
 var init_layout = __esm({
   "src/org/layout.ts"() {
     "use strict";
@@ -8323,17 +8319,17 @@ var init_layout = __esm({
     CONTAINER_META_LINE_HEIGHT = 16;
     STACK_V_GAP = 20;
     LEGEND_GAP = 30;
-    LEGEND_HEIGHT = 28;
-    LEGEND_PILL_PAD = 16;
-    LEGEND_PILL_FONT_W = 11 * 0.6;
-    LEGEND_CAPSULE_PAD = 4;
-    LEGEND_DOT_R = 4;
-    LEGEND_ENTRY_FONT_W = 10 * 0.6;
-    LEGEND_ENTRY_DOT_GAP = 4;
-    LEGEND_ENTRY_TRAIL = 8;
-    LEGEND_GROUP_GAP = 12;
-    LEGEND_EYE_SIZE = 14;
-    LEGEND_EYE_GAP = 6;
+    LEGEND_HEIGHT2 = 28;
+    LEGEND_PILL_PAD2 = 16;
+    LEGEND_PILL_FONT_W2 = 11 * 0.6;
+    LEGEND_CAPSULE_PAD2 = 4;
+    LEGEND_DOT_R2 = 4;
+    LEGEND_ENTRY_FONT_W2 = 10 * 0.6;
+    LEGEND_ENTRY_DOT_GAP2 = 4;
+    LEGEND_ENTRY_TRAIL2 = 8;
+    LEGEND_GROUP_GAP2 = 12;
+    LEGEND_EYE_SIZE2 = 14;
+    LEGEND_EYE_GAP2 = 6;
   }
 });
 
@@ -8431,11 +8427,11 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
   if (width <= 0 || height <= 0) return;
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const legendOnly = layout.nodes.length === 0;
-  const legendPosition = parsed.options?.["legend-position"] ?? "top";
+  const legendPosition = parsed.options?.["legend-position"] ?? "bottom";
   const hasLegend = layout.legend.length > 0;
-  const layoutLegendShift = LEGEND_HEIGHT2 + LEGEND_GROUP_GAP2;
+  const layoutLegendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
   const fixedLegend = !exportDims && hasLegend && !legendOnly;
-  const legendReserve = fixedLegend ? LEGEND_HEIGHT2 + LEGEND_FIXED_GAP : 0;
+  const legendReserve = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
   const fixedTitle = !exportDims && !!parsed.title;
   const titleReserve = fixedTitle ? TITLE_HEIGHT : 0;
   const diagramW = layout.width;
@@ -8590,56 +8586,60 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     if (fixedLegend && visibleGroups.length > 0) {
       fixedPositions = /* @__PURE__ */ new Map();
       const effectiveW = (g) => activeTagGroup != null ? g.width : g.minifiedWidth;
-      const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP2;
+      const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
       let cx = (width - totalW) / 2;
       for (const g of visibleGroups) {
         fixedPositions.set(g.name, cx);
-        cx += effectiveW(g) + LEGEND_GROUP_GAP2;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
     }
-    const legendParent = fixedLegend ? svg.append("g").attr("class", "org-legend-fixed").attr(
+    const legendParentBase = fixedLegend ? svg.append("g").attr("class", "org-legend-fixed").attr(
       "transform",
-      legendPosition === "bottom" ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT2})` : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
+      legendPosition === "bottom" ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})` : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
     ) : contentG;
+    const legendParent = legendParentBase;
+    if (fixedLegend && activeTagGroup) {
+      legendParentBase.attr("data-legend-active", activeTagGroup.toLowerCase());
+    }
     for (const group of visibleGroups) {
       const isActive = legendOnly || activeTagGroup != null && group.name.toLowerCase() === activeTagGroup.toLowerCase();
       const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
       const pillLabel = group.name;
-      const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W2 + LEGEND_PILL_PAD2;
+      const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
       const gX = fixedPositions?.get(group.name) ?? group.x;
       const gY = fixedPositions ? 0 : group.y;
       const gEl = legendParent.append("g").attr("transform", `translate(${gX}, ${gY})`).attr("class", "org-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", legendOnly ? "default" : "pointer");
       if (isActive) {
-        gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT2).attr("rx", LEGEND_HEIGHT2 / 2).attr("fill", groupBg);
+        gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
       }
-      const pillXOff = isActive ? LEGEND_CAPSULE_PAD2 : 0;
-      const pillYOff = isActive ? LEGEND_CAPSULE_PAD2 : 0;
-      const pillH = LEGEND_HEIGHT2 - (isActive ? LEGEND_CAPSULE_PAD2 * 2 : 0);
+      const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
       gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
       if (isActive) {
         gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).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);
       }
-      gEl.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
+      gEl.append("text").attr("x", pillXOff + 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", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
       if (isActive && fixedLegend) {
         const groupKey = group.name.toLowerCase();
         const isHidden = hiddenAttributes?.has(groupKey) ?? false;
-        const eyeX = pillXOff + pillWidth + LEGEND_EYE_GAP2;
-        const eyeY = (LEGEND_HEIGHT2 - LEGEND_EYE_SIZE2) / 2;
+        const eyeX = pillXOff + pillWidth + LEGEND_EYE_GAP;
+        const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
         const hitPad = 6;
         const eyeG = gEl.append("g").attr("class", "org-legend-eye").attr("data-legend-visibility", groupKey).style("cursor", "pointer").attr("opacity", isHidden ? 0.4 : 0.7);
-        eyeG.append("rect").attr("x", eyeX - hitPad).attr("y", eyeY - hitPad).attr("width", LEGEND_EYE_SIZE2 + hitPad * 2).attr("height", LEGEND_EYE_SIZE2 + hitPad * 2).attr("fill", "transparent").attr("pointer-events", "all");
+        eyeG.append("rect").attr("x", eyeX - hitPad).attr("y", eyeY - hitPad).attr("width", LEGEND_EYE_SIZE + hitPad * 2).attr("height", LEGEND_EYE_SIZE + hitPad * 2).attr("fill", "transparent").attr("pointer-events", "all");
         eyeG.append("path").attr("d", isHidden ? EYE_CLOSED_PATH : EYE_OPEN_PATH).attr("transform", `translate(${eyeX}, ${eyeY})`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
       }
       if (isActive) {
-        const eyeShift = fixedLegend ? LEGEND_EYE_SIZE2 + LEGEND_EYE_GAP2 : 0;
+        const eyeShift = fixedLegend ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
         let entryX = pillXOff + pillWidth + 4 + eyeShift;
         for (const entry of group.entries) {
           const entryG = gEl.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R2).attr("cy", LEGEND_HEIGHT2 / 2).attr("r", LEGEND_DOT_R2).attr("fill", entry.color);
-          const textX = entryX + LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2;
+          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
           const entryLabel = entry.value;
-          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entryLabel);
-          entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W2 + LEGEND_ENTRY_TRAIL2;
+          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).text(entryLabel);
+          entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
         }
       }
     }
@@ -8678,7 +8678,7 @@ function renderOrgForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, TITLE_FONT_SIZE, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_HEIGHT2, LEGEND_PILL_PAD2, LEGEND_PILL_FONT_SIZE, LEGEND_PILL_FONT_W2, LEGEND_CAPSULE_PAD2, LEGEND_DOT_R2, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_FONT_W2, LEGEND_ENTRY_DOT_GAP2, LEGEND_ENTRY_TRAIL2, LEGEND_GROUP_GAP2, LEGEND_EYE_SIZE2, LEGEND_EYE_GAP2, LEGEND_FIXED_GAP, EYE_OPEN_PATH, EYE_CLOSED_PATH;
+var DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, TITLE_FONT_SIZE, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_FIXED_GAP;
 var init_renderer = __esm({
   "src/org/renderer.ts"() {
     "use strict";
@@ -8686,6 +8686,7 @@ var init_renderer = __esm({
     init_color_utils();
     init_parser4();
     init_layout();
+    init_legend_constants();
     DIAGRAM_PADDING = 20;
     MAX_SCALE = 3;
     TITLE_HEIGHT = 30;
@@ -8705,22 +8706,7 @@ var init_renderer = __esm({
     CONTAINER_HEADER_HEIGHT = 28;
     COLLAPSE_BAR_HEIGHT = 6;
     COLLAPSE_BAR_INSET = 0;
-    LEGEND_HEIGHT2 = 28;
-    LEGEND_PILL_PAD2 = 16;
-    LEGEND_PILL_FONT_SIZE = 11;
-    LEGEND_PILL_FONT_W2 = LEGEND_PILL_FONT_SIZE * 0.6;
-    LEGEND_CAPSULE_PAD2 = 4;
-    LEGEND_DOT_R2 = 4;
-    LEGEND_ENTRY_FONT_SIZE = 10;
-    LEGEND_ENTRY_FONT_W2 = LEGEND_ENTRY_FONT_SIZE * 0.6;
-    LEGEND_ENTRY_DOT_GAP2 = 4;
-    LEGEND_ENTRY_TRAIL2 = 8;
-    LEGEND_GROUP_GAP2 = 12;
-    LEGEND_EYE_SIZE2 = 14;
-    LEGEND_EYE_GAP2 = 6;
     LEGEND_FIXED_GAP = 8;
-    EYE_OPEN_PATH = "M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z";
-    EYE_CLOSED_PATH = "M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1";
   }
 });
 
@@ -9145,23 +9131,17 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
   const effectiveW = (g2) => activeTagGroup != null || allExpanded ? g2.width : g2.minifiedWidth;
   if (visibleGroups.length > 0) {
     const legendShift = LEGEND_HEIGHT3 + LEGEND_GROUP_GAP3;
-    for (const n of layoutNodes) n.y += legendShift;
-    for (const c of layoutContainers) c.y += legendShift;
-    for (const e of layoutEdges) {
-      for (const p of e.points) p.y += legendShift;
-    }
     const totalGroupsWidth = visibleGroups.reduce((s, g2) => s + effectiveW(g2), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP3;
-    let cx = MARGIN2;
+    const neededWidth = totalGroupsWidth + MARGIN2 * 2;
+    if (neededWidth > totalWidth) totalWidth = neededWidth;
+    let cx = (totalWidth - totalGroupsWidth) / 2;
+    const legendY = totalHeight + LEGEND_GROUP_GAP3;
     for (const g2 of visibleGroups) {
       g2.x = cx;
-      g2.y = MARGIN2;
+      g2.y = legendY;
       cx += effectiveW(g2) + LEGEND_GROUP_GAP3;
     }
     totalHeight += legendShift;
-    const neededWidth = totalGroupsWidth + MARGIN2 * 2;
-    if (neededWidth > totalWidth) {
-      totalWidth = neededWidth;
-    }
   }
   return {
     nodes: layoutNodes,
@@ -9356,25 +9336,26 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const hasLegend = layout.legend.length > 0;
-  const layoutLegendShift = LEGEND_HEIGHT4 + LEGEND_GROUP_GAP4;
+  const layoutLegendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
   const fixedLegend = !exportDims && hasLegend;
   const fixedTitle = fixedLegend && !!parsed.title;
   const fixedTitleH = fixedTitle ? TITLE_HEIGHT2 : 0;
-  const legendReserveH = fixedLegend ? LEGEND_HEIGHT4 + LEGEND_FIXED_GAP2 : 0;
-  const fixedReserve = fixedTitleH + legendReserveH;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP2 : 0;
+  const fixedReserveTop = fixedTitleH;
+  const fixedReserveBottom = legendReserveH;
   const titleOffset = !fixedTitle && parsed.title ? TITLE_HEIGHT2 : 0;
   const diagramW = layout.width;
   let diagramH = layout.height + titleOffset;
   if (fixedLegend) {
     diagramH -= layoutLegendShift;
   }
-  const availH = height - DIAGRAM_PADDING2 * 2 - fixedReserve;
+  const availH = height - DIAGRAM_PADDING2 * 2 - fixedReserveTop - fixedReserveBottom;
   const scaleX = (width - DIAGRAM_PADDING2 * 2) / diagramW;
   const scaleY = availH / diagramH;
   const scale = Math.min(MAX_SCALE2, scaleX, scaleY);
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = DIAGRAM_PADDING2 + fixedReserve;
+  const offsetY = DIAGRAM_PADDING2 + fixedReserveTop;
   const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "sm-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
@@ -9515,7 +9496,10 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     titleEl.text(parsed.title);
   }
   if (fixedLegend) {
-    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING2 + fixedTitleH})`);
+    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${height - DIAGRAM_PADDING2 - LEGEND_HEIGHT})`);
+    if (activeTagGroup) {
+      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+    }
     renderLegend(legendParent, layout.legend, palette, isDark, activeTagGroup, width, hiddenAttributes);
   }
 }
@@ -9527,49 +9511,49 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   if (fixedWidth != null && visibleGroups.length > 0) {
     fixedPositions = /* @__PURE__ */ new Map();
     const effectiveW = (g) => activeTagGroup != null ? g.width : g.minifiedWidth;
-    const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP4;
+    const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
     let cx = (fixedWidth - totalW) / 2;
     for (const g of visibleGroups) {
       fixedPositions.set(g.name, cx);
-      cx += effectiveW(g) + LEGEND_GROUP_GAP4;
+      cx += effectiveW(g) + LEGEND_GROUP_GAP;
     }
   }
   for (const group of visibleGroups) {
     const isActive = activeTagGroup != null;
-    const pillW = group.name.length * LEGEND_PILL_FONT_W4 + LEGEND_PILL_PAD4;
+    const pillW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
     const gX = fixedPositions?.get(group.name) ?? group.x;
     const gY = fixedPositions ? 0 : group.y;
     const legendG = parent.append("g").attr("transform", `translate(${gX}, ${gY})`).attr("class", "sitemap-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
     if (isActive) {
-      legendG.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT4).attr("rx", LEGEND_HEIGHT4 / 2).attr("fill", groupBg);
+      legendG.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
     }
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD4 : 0;
-    const pillYOff = isActive ? LEGEND_CAPSULE_PAD4 : 0;
-    const pillH = LEGEND_HEIGHT4 - (isActive ? LEGEND_CAPSULE_PAD4 * 2 : 0);
+    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
     legendG.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillW).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
     if (isActive) {
       legendG.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillW).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
     }
-    legendG.append("text").attr("x", pillXOff + pillW / 2).attr("y", LEGEND_HEIGHT4 / 2 + LEGEND_PILL_FONT_SIZE2 / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE2).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
+    legendG.append("text").attr("x", pillXOff + pillW / 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", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
     if (isActive && fixedWidth != null) {
       const groupKey = group.name.toLowerCase();
       const isHidden = hiddenAttributes?.has(groupKey) ?? false;
-      const eyeX = pillXOff + pillW + LEGEND_EYE_GAP4;
-      const eyeY = (LEGEND_HEIGHT4 - LEGEND_EYE_SIZE4) / 2;
+      const eyeX = pillXOff + pillW + LEGEND_EYE_GAP;
+      const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
       const hitPad = 6;
       const eyeG = legendG.append("g").attr("class", "sitemap-legend-eye").attr("data-legend-visibility", groupKey).style("cursor", "pointer").attr("opacity", isHidden ? 0.4 : 0.7);
-      eyeG.append("rect").attr("x", eyeX - hitPad).attr("y", eyeY - hitPad).attr("width", LEGEND_EYE_SIZE4 + hitPad * 2).attr("height", LEGEND_EYE_SIZE4 + hitPad * 2).attr("fill", "transparent").attr("pointer-events", "all");
-      eyeG.append("path").attr("d", isHidden ? EYE_CLOSED_PATH2 : EYE_OPEN_PATH2).attr("transform", `translate(${eyeX}, ${eyeY})`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+      eyeG.append("rect").attr("x", eyeX - hitPad).attr("y", eyeY - hitPad).attr("width", LEGEND_EYE_SIZE + hitPad * 2).attr("height", LEGEND_EYE_SIZE + hitPad * 2).attr("fill", "transparent").attr("pointer-events", "all");
+      eyeG.append("path").attr("d", isHidden ? EYE_CLOSED_PATH : EYE_OPEN_PATH).attr("transform", `translate(${eyeX}, ${eyeY})`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
     }
     if (isActive) {
-      const eyeShift = fixedWidth != null ? LEGEND_EYE_SIZE4 + LEGEND_EYE_GAP4 : 0;
+      const eyeShift = fixedWidth != null ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
       let entryX = pillXOff + pillW + 4 + eyeShift;
       for (const entry of group.entries) {
         const entryG = legendG.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R4).attr("cy", LEGEND_HEIGHT4 / 2).attr("r", LEGEND_DOT_R4).attr("fill", entry.color);
-        const textX = entryX + LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4;
-        entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT4 / 2 + LEGEND_ENTRY_FONT_SIZE2 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE2).attr("fill", palette.textMuted).text(entry.value);
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W4 + LEGEND_ENTRY_TRAIL4;
+        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+        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).text(entry.value);
+        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
     }
   }
@@ -9615,12 +9599,13 @@ async function renderSitemapForExport(content, theme, palette) {
   const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
   return injectBranding2(svgHtml, brandColor);
 }
-var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, TITLE_FONT_SIZE2, LABEL_FONT_SIZE2, META_FONT_SIZE2, META_LINE_HEIGHT4, HEADER_HEIGHT4, SEPARATOR_GAP4, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, CARD_RADIUS2, CONTAINER_RADIUS2, CONTAINER_LABEL_FONT_SIZE2, CONTAINER_META_FONT_SIZE2, CONTAINER_META_LINE_HEIGHT4, CONTAINER_HEADER_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_LABEL_FONT_SIZE, COLLAPSE_BAR_HEIGHT2, LEGEND_HEIGHT4, LEGEND_FIXED_GAP2, LEGEND_PILL_PAD4, LEGEND_PILL_FONT_SIZE2, LEGEND_PILL_FONT_W4, LEGEND_CAPSULE_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_FONT_SIZE2, LEGEND_ENTRY_FONT_W4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_GROUP_GAP4, LEGEND_EYE_SIZE4, LEGEND_EYE_GAP4, lineGenerator, EYE_OPEN_PATH2, EYE_CLOSED_PATH2;
+var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, TITLE_FONT_SIZE2, LABEL_FONT_SIZE2, META_FONT_SIZE2, META_LINE_HEIGHT4, HEADER_HEIGHT4, SEPARATOR_GAP4, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, CARD_RADIUS2, CONTAINER_RADIUS2, CONTAINER_LABEL_FONT_SIZE2, CONTAINER_META_FONT_SIZE2, CONTAINER_META_LINE_HEIGHT4, CONTAINER_HEADER_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_LABEL_FONT_SIZE, COLLAPSE_BAR_HEIGHT2, LEGEND_FIXED_GAP2, lineGenerator;
 var init_renderer2 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
     init_fonts();
     init_color_utils();
+    init_legend_constants();
     DIAGRAM_PADDING2 = 20;
     MAX_SCALE2 = 3;
     TITLE_HEIGHT2 = 30;
@@ -9642,23 +9627,8 @@ var init_renderer2 = __esm({
     ARROWHEAD_H = 7;
     EDGE_LABEL_FONT_SIZE = 11;
     COLLAPSE_BAR_HEIGHT2 = 6;
-    LEGEND_HEIGHT4 = 28;
     LEGEND_FIXED_GAP2 = 8;
-    LEGEND_PILL_PAD4 = 16;
-    LEGEND_PILL_FONT_SIZE2 = 11;
-    LEGEND_PILL_FONT_W4 = LEGEND_PILL_FONT_SIZE2 * 0.6;
-    LEGEND_CAPSULE_PAD4 = 4;
-    LEGEND_DOT_R4 = 4;
-    LEGEND_ENTRY_FONT_SIZE2 = 10;
-    LEGEND_ENTRY_FONT_W4 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
-    LEGEND_ENTRY_DOT_GAP4 = 4;
-    LEGEND_ENTRY_TRAIL4 = 8;
-    LEGEND_GROUP_GAP4 = 12;
-    LEGEND_EYE_SIZE4 = 14;
-    LEGEND_EYE_GAP4 = 6;
     lineGenerator = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
-    EYE_OPEN_PATH2 = "M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z";
-    EYE_CLOSED_PATH2 = "M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1";
   }
 });
 
@@ -9861,8 +9831,7 @@ function resolveCardTagColor(card, tagGroups, activeTagGroup) {
   return entry?.color;
 }
 function computeLayout(parsed, _palette) {
-  const hasHeader = !!parsed.title || parsed.tagGroups.length > 0;
-  const headerHeight = hasHeader ? Math.max(TITLE_HEIGHT3, LEGEND_HEIGHT5) + 8 : 0;
+  const headerHeight = parsed.title ? TITLE_HEIGHT3 + 8 : 0;
   const startY = DIAGRAM_PADDING3 + headerHeight;
   const charWidth = CARD_TITLE_FONT_SIZE * 0.6;
   const columnLayouts = [];
@@ -9919,7 +9888,8 @@ function computeLayout(parsed, _palette) {
     currentX += cl.width + COLUMN_GAP;
   }
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING3;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3 + legendSpace;
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
 function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
@@ -9932,42 +9902,45 @@ 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_SIZE3).attr("font-size", TITLE_FONT_SIZE3).attr("font-weight", "bold").attr("fill", palette.text).text(parsed.title);
   }
   if (parsed.tagGroups.length > 0) {
-    const legendY = DIAGRAM_PADDING3;
-    const titleTextWidth = parsed.title ? parsed.title.length * TITLE_FONT_SIZE3 * 0.6 + 16 : 0;
-    let legendX = DIAGRAM_PADDING3 + titleTextWidth;
+    const legendY = height - LEGEND_HEIGHT;
+    let legendX = DIAGRAM_PADDING3;
     const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-    const capsulePad = 4;
+    const capsulePad = LEGEND_CAPSULE_PAD;
+    const legendContainer = svg.append("g").attr("class", "kanban-legend");
+    if (activeTagGroup) {
+      legendContainer.attr("data-legend-active", activeTagGroup.toLowerCase());
+    }
     for (const group of parsed.tagGroups) {
       const isActive = activeTagGroup?.toLowerCase() === group.name.toLowerCase();
       if (activeTagGroup != null && !isActive) continue;
-      const pillTextWidth = group.name.length * LEGEND_FONT_SIZE * 0.6;
+      const pillTextWidth = group.name.length * LEGEND_PILL_FONT_SIZE * 0.6;
       const pillWidth = pillTextWidth + 16;
       let capsuleContentWidth = pillWidth;
       if (isActive) {
         capsuleContentWidth += 4;
         for (const entry of group.entries) {
-          capsuleContentWidth += LEGEND_DOT_R5 * 2 + 4 + entry.value.length * LEGEND_ENTRY_FONT_SIZE3 * 0.6 + 8;
+          capsuleContentWidth += LEGEND_DOT_R * 2 + 4 + entry.value.length * LEGEND_ENTRY_FONT_SIZE * 0.6 + 8;
         }
       }
       const capsuleWidth = capsuleContentWidth + capsulePad * 2;
       if (isActive) {
-        svg.append("rect").attr("x", legendX).attr("y", legendY).attr("width", capsuleWidth).attr("height", LEGEND_HEIGHT5).attr("rx", LEGEND_HEIGHT5 / 2).attr("fill", groupBg);
+        legendContainer.append("rect").attr("x", legendX).attr("y", legendY).attr("width", capsuleWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
       }
       const pillX = legendX + (isActive ? capsulePad : 0);
       const pillBg = isActive ? palette.bg : groupBg;
-      svg.append("rect").attr("x", pillX).attr("y", legendY + (isActive ? capsulePad : 0)).attr("width", pillWidth).attr("height", LEGEND_HEIGHT5 - (isActive ? capsulePad * 2 : 0)).attr("rx", (LEGEND_HEIGHT5 - (isActive ? capsulePad * 2 : 0)) / 2).attr("fill", pillBg).attr("class", "kanban-legend-group").attr("data-legend-group", group.name.toLowerCase());
+      legendContainer.append("rect").attr("x", pillX).attr("y", legendY + (isActive ? capsulePad : 0)).attr("width", pillWidth).attr("height", LEGEND_HEIGHT - (isActive ? capsulePad * 2 : 0)).attr("rx", (LEGEND_HEIGHT - (isActive ? capsulePad * 2 : 0)) / 2).attr("fill", pillBg).attr("class", "kanban-legend-group").attr("data-legend-group", group.name.toLowerCase());
       if (isActive) {
-        svg.append("rect").attr("x", pillX).attr("y", legendY + capsulePad).attr("width", pillWidth).attr("height", LEGEND_HEIGHT5 - capsulePad * 2).attr("rx", (LEGEND_HEIGHT5 - capsulePad * 2) / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
+        legendContainer.append("rect").attr("x", pillX).attr("y", legendY + capsulePad).attr("width", pillWidth).attr("height", LEGEND_HEIGHT - capsulePad * 2).attr("rx", (LEGEND_HEIGHT - capsulePad * 2) / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
       }
-      svg.append("text").attr("x", pillX + pillWidth / 2).attr("y", legendY + LEGEND_HEIGHT5 / 2 + LEGEND_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
+      legendContainer.append("text").attr("x", pillX + pillWidth / 2).attr("y", legendY + LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
       if (isActive) {
         let entryX = pillX + pillWidth + 4;
         for (const entry of group.entries) {
-          const entryG = svg.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R5).attr("cy", legendY + LEGEND_HEIGHT5 / 2).attr("r", LEGEND_DOT_R5).attr("fill", entry.color);
-          const entryTextX = entryX + LEGEND_DOT_R5 * 2 + 4;
-          entryG.append("text").attr("x", entryTextX).attr("y", legendY + LEGEND_HEIGHT5 / 2 + LEGEND_ENTRY_FONT_SIZE3 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE3).attr("fill", palette.textMuted).text(entry.value);
-          entryX = entryTextX + entry.value.length * LEGEND_ENTRY_FONT_SIZE3 * 0.6 + 8;
+          const entryG = legendContainer.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
+          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", legendY + LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+          const entryTextX = entryX + LEGEND_DOT_R * 2 + 4;
+          entryG.append("text").attr("x", entryTextX).attr("y", legendY + LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entry.value);
+          entryX = entryTextX + entry.value.length * LEGEND_ENTRY_FONT_SIZE * 0.6 + 8;
         }
         legendX += capsuleWidth + 12;
       } else {
@@ -10054,7 +10027,7 @@ function renderKanbanForExport(content, theme, palette) {
   const svgEl = container.querySelector("svg");
   return svgEl?.outerHTML ?? "";
 }
-var DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS3, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, TITLE_FONT_SIZE3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS, LEGEND_HEIGHT5, LEGEND_FONT_SIZE, LEGEND_DOT_R5, LEGEND_ENTRY_FONT_SIZE3;
+var DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS3, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, TITLE_FONT_SIZE3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS;
 var init_renderer3 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
@@ -10063,6 +10036,7 @@ var init_renderer3 = __esm({
     init_inline_markdown();
     init_parser5();
     init_mutations();
+    init_legend_constants();
     DIAGRAM_PADDING3 = 20;
     COLUMN_GAP = 16;
     COLUMN_HEADER_HEIGHT = 36;
@@ -10084,10 +10058,6 @@ var init_renderer3 = __esm({
     WIP_FONT_SIZE = 10;
     COLUMN_RADIUS = 8;
     COLUMN_HEADER_RADIUS = 8;
-    LEGEND_HEIGHT5 = 28;
-    LEGEND_FONT_SIZE = 11;
-    LEGEND_DOT_R5 = 4;
-    LEGEND_ENTRY_FONT_SIZE3 = 10;
   }
 });
 
@@ -10506,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";
@@ -10620,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"];
   }
 });
 
@@ -10691,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) {
@@ -10723,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;
@@ -10762,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();
@@ -10771,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);
@@ -10803,32 +11026,87 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     }
   }
   if (parsed.tagGroups.length > 0) {
-    const LEGEND_Y_PAD = 16;
-    const LEGEND_PILL_H = 22;
-    const LEGEND_PILL_RX = 11;
-    const LEGEND_PILL_PAD9 = 10;
+    const LEGEND_PILL_H = LEGEND_HEIGHT - 6;
+    const LEGEND_PILL_RX = Math.floor(LEGEND_PILL_H / 2);
     const LEGEND_GAP2 = 8;
-    const LEGEND_FONT_SIZE2 = 11;
-    const LEGEND_GROUP_GAP7 = 16;
     const legendG = svg.append("g").attr("class", "er-tag-legend");
+    if (activeTagGroup) {
+      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_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(`${group.name}:`);
+      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}:`);
       const labelWidth = (labelText.node()?.getComputedTextLength?.() ?? group.name.length * 7) + 6;
       legendX += labelWidth;
       for (const entry of group.entries) {
         const pillG = groupG.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-        const tmpText = legendG.append("text").attr("font-size", LEGEND_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(entry.value);
+        const tmpText = legendG.append("text").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(entry.value);
         const textW = tmpText.node()?.getComputedTextLength?.() ?? entry.value.length * 7;
         tmpText.remove();
-        const pillW = textW + LEGEND_PILL_PAD9 * 2;
+        const pillW = textW + LEGEND_PILL_PAD * 2;
         pillG.append("rect").attr("x", legendX).attr("y", legendY).attr("width", pillW).attr("height", LEGEND_PILL_H).attr("rx", LEGEND_PILL_RX).attr("ry", LEGEND_PILL_RX).attr("fill", mix(entry.color, isDark ? palette.surface : palette.bg, 25)).attr("stroke", entry.color).attr("stroke-width", 1);
-        pillG.append("text").attr("x", legendX + pillW / 2).attr("y", legendY + LEGEND_PILL_H / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", LEGEND_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(entry.value);
+        pillG.append("text").attr("x", legendX + pillW / 2).attr("y", legendY + LEGEND_PILL_H / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(entry.value);
         legendX += pillW + LEGEND_GAP2;
       }
-      legendX += LEGEND_GROUP_GAP7;
+      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);
+      }
     }
   }
 }
@@ -10875,8 +11153,10 @@ var init_renderer5 = __esm({
     init_color_utils();
     init_palettes();
     init_tag_groups();
+    init_legend_constants();
     init_parser3();
     init_layout4();
+    init_classify();
     DIAGRAM_PADDING5 = 20;
     MAX_SCALE4 = 3;
     TABLE_FONT_SIZE = 13;
@@ -11005,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;
@@ -11017,28 +11298,43 @@ 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 midX = Math.max(src.x + 1, (src.x + enterX) / 2);
-      const midY = (exitY + tgt.y) / 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: src.x, y: exitY },
-        { x: midX, y: midY },
+        { 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) {
@@ -11136,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";
@@ -11152,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;
@@ -11651,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);
@@ -11661,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) {
@@ -11670,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);
@@ -11712,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) {
@@ -11722,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];
@@ -11740,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) {
@@ -11974,31 +12302,27 @@ function computeC4NodeDimensions(el, options) {
   height += CARD_V_PAD3;
   return { width, height };
 }
-function computeLegendGroups3(tagGroups, usedValuesByGroup) {
+function computeLegendGroups3(tagGroups) {
   const result = [];
   for (const group of tagGroups) {
     const entries = [];
     for (const entry of group.entries) {
-      if (usedValuesByGroup) {
-        const used = usedValuesByGroup.get(group.name.toLowerCase());
-        if (!used?.has(entry.value.toLowerCase())) continue;
-      }
       entries.push({ value: entry.value, color: entry.color });
     }
     if (entries.length === 0) continue;
-    const nameW = group.name.length * LEGEND_PILL_FONT_W5 + LEGEND_PILL_PAD5 * 2;
-    let capsuleW = LEGEND_CAPSULE_PAD5;
+    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_R6 * 2 + LEGEND_ENTRY_DOT_GAP5 + e.value.length * LEGEND_ENTRY_FONT_W5 + LEGEND_ENTRY_TRAIL5;
+      capsuleW += LEGEND_DOT_R4 * 2 + LEGEND_ENTRY_DOT_GAP4 + e.value.length * LEGEND_ENTRY_FONT_W5 + LEGEND_ENTRY_TRAIL4;
     }
-    capsuleW += LEGEND_CAPSULE_PAD5;
+    capsuleW += LEGEND_CAPSULE_PAD4;
     result.push({
       name: group.name,
       entries,
       x: 0,
       y: 0,
       width: nameW + capsuleW,
-      height: LEGEND_HEIGHT6
+      height: LEGEND_HEIGHT4
     });
   }
   return result;
@@ -12118,18 +12442,7 @@ function layoutC4Context(parsed, activeTagGroup) {
   }
   let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN3 * 2 : 0;
   let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN3 * 2 : 0;
-  const usedValuesByGroup = /* @__PURE__ */ new Map();
-  for (const el of contextElements) {
-    for (const group of parsed.tagGroups) {
-      const key = group.name.toLowerCase();
-      const val = el.metadata[key];
-      if (val) {
-        if (!usedValuesByGroup.has(key)) usedValuesByGroup.set(key, /* @__PURE__ */ new Set());
-        usedValuesByGroup.get(key).add(val.toLowerCase());
-      }
-    }
-  }
-  const legendGroups = computeLegendGroups3(parsed.tagGroups, usedValuesByGroup);
+  const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
     const legendY = totalHeight + MARGIN3;
     let legendX = MARGIN3;
@@ -12139,7 +12452,7 @@ function layoutC4Context(parsed, activeTagGroup) {
       legendX += lg.width + 12;
     }
     const legendRight = legendX;
-    const legendBottom = legendY + LEGEND_HEIGHT6;
+    const legendBottom = legendY + LEGEND_HEIGHT4;
     if (legendRight > totalWidth) totalWidth = legendRight;
     if (legendBottom > totalHeight) totalHeight = legendBottom;
   }
@@ -12445,18 +12758,7 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
   }
   let totalWidth = maxX - minX + MARGIN3 * 2;
   let totalHeight = maxY - minY + MARGIN3 * 2;
-  const usedValuesByGroup = /* @__PURE__ */ new Map();
-  for (const el of [...containers, ...externals]) {
-    for (const group of parsed.tagGroups) {
-      const key = group.name.toLowerCase();
-      const val = el.metadata[key];
-      if (val) {
-        if (!usedValuesByGroup.has(key)) usedValuesByGroup.set(key, /* @__PURE__ */ new Set());
-        usedValuesByGroup.get(key).add(val.toLowerCase());
-      }
-    }
-  }
-  const legendGroups = computeLegendGroups3(parsed.tagGroups, usedValuesByGroup);
+  const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
     const legendY = totalHeight + MARGIN3;
     let legendX = MARGIN3;
@@ -12466,7 +12768,7 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       legendX += lg.width + 12;
     }
     const legendRight = legendX;
-    const legendBottom = legendY + LEGEND_HEIGHT6;
+    const legendBottom = legendY + LEGEND_HEIGHT4;
     if (legendRight > totalWidth) totalWidth = legendRight;
     if (legendBottom > totalHeight) totalHeight = legendBottom;
   }
@@ -12821,21 +13123,7 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
   }
   let totalWidth = maxX - minX + MARGIN3 * 2;
   let totalHeight = maxY - minY + MARGIN3 * 2;
-  const usedValuesByGroup = /* @__PURE__ */ new Map();
-  for (const el of [...components, ...externals]) {
-    for (const group of parsed.tagGroups) {
-      const key = group.name.toLowerCase();
-      let val = el.metadata[key];
-      if (!val && components.includes(el)) {
-        val = targetContainer.metadata[key] ?? system.metadata[key];
-      }
-      if (val) {
-        if (!usedValuesByGroup.has(key)) usedValuesByGroup.set(key, /* @__PURE__ */ new Set());
-        usedValuesByGroup.get(key).add(val.toLowerCase());
-      }
-    }
-  }
-  const legendGroups = computeLegendGroups3(parsed.tagGroups, usedValuesByGroup);
+  const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
     const legendY = totalHeight + MARGIN3;
     let legendX = MARGIN3;
@@ -12845,7 +13133,7 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       legendX += lg.width + 12;
     }
     const legendRight = legendX;
-    const legendBottom = legendY + LEGEND_HEIGHT6;
+    const legendBottom = legendY + LEGEND_HEIGHT4;
     if (legendRight > totalWidth) totalWidth = legendRight;
     if (legendBottom > totalHeight) totalHeight = legendBottom;
   }
@@ -13090,18 +13378,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
   }
   let totalWidth = maxX - minX + MARGIN3 * 2;
   let totalHeight = maxY - minY + MARGIN3 * 2;
-  const usedValuesByGroup = /* @__PURE__ */ new Map();
-  for (const r of refEntries) {
-    for (const group of parsed.tagGroups) {
-      const key = group.name.toLowerCase();
-      const val = r.element.metadata[key];
-      if (val) {
-        if (!usedValuesByGroup.has(key)) usedValuesByGroup.set(key, /* @__PURE__ */ new Set());
-        usedValuesByGroup.get(key).add(val.toLowerCase());
-      }
-    }
-  }
-  const legendGroups = computeLegendGroups3(parsed.tagGroups, usedValuesByGroup);
+  const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
     const legendY = totalHeight + MARGIN3;
     let legendX = MARGIN3;
@@ -13111,13 +13388,13 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       legendX += lg.width + 12;
     }
     const legendRight = legendX;
-    const legendBottom = legendY + LEGEND_HEIGHT6;
+    const legendBottom = legendY + LEGEND_HEIGHT4;
     if (legendRight > totalWidth) totalWidth = legendRight;
     if (legendBottom > totalHeight) totalHeight = legendBottom;
   }
   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_HEIGHT6, LEGEND_PILL_FONT_SIZE3, LEGEND_PILL_FONT_W5, LEGEND_PILL_PAD5, LEGEND_DOT_R6, LEGEND_ENTRY_FONT_SIZE4, LEGEND_ENTRY_FONT_W5, LEGEND_ENTRY_DOT_GAP5, LEGEND_ENTRY_TRAIL5, LEGEND_CAPSULE_PAD5, 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";
@@ -13136,16 +13413,17 @@ var init_layout6 = __esm({
     MARGIN3 = 40;
     BOUNDARY_PAD = 40;
     GROUP_BOUNDARY_PAD = 24;
-    LEGEND_HEIGHT6 = 28;
-    LEGEND_PILL_FONT_SIZE3 = 11;
-    LEGEND_PILL_FONT_W5 = LEGEND_PILL_FONT_SIZE3 * 0.6;
-    LEGEND_PILL_PAD5 = 16;
-    LEGEND_DOT_R6 = 4;
-    LEGEND_ENTRY_FONT_SIZE4 = 10;
-    LEGEND_ENTRY_FONT_W5 = LEGEND_ENTRY_FONT_SIZE4 * 0.6;
-    LEGEND_ENTRY_DOT_GAP5 = 4;
-    LEGEND_ENTRY_TRAIL5 = 8;
-    LEGEND_CAPSULE_PAD5 = 4;
+    LEGEND_HEIGHT4 = 28;
+    LEGEND_PILL_FONT_SIZE2 = 11;
+    LEGEND_PILL_FONT_W4 = LEGEND_PILL_FONT_SIZE2 * 0.6;
+    LEGEND_PILL_PAD4 = 16;
+    LEGEND_DOT_R4 = 4;
+    LEGEND_ENTRY_FONT_SIZE2 = 10;
+    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"]);
   }
 });
@@ -13223,8 +13501,14 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   if (width <= 0 || height <= 0) return;
   const titleHeight = parsed.title ? TITLE_HEIGHT4 + 10 : 0;
   const diagramW = layout.width;
-  const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const hasLegend = layout.legend.length > 0;
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP4 = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP4 : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
   const scaleX = (width - DIAGRAM_PADDING7 * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING7 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE6, scaleX, scaleY);
@@ -13296,6 +13580,20 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   }
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
     if (node.importPath) {
       nodeG.attr("data-import-path", node.importPath);
     }
@@ -13348,36 +13646,12 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
-  if (!exportDims) {
-    for (const group of layout.legend) {
-      const isActive = activeTagGroup != null && group.name.toLowerCase() === (activeTagGroup ?? "").toLowerCase();
-      if (activeTagGroup != null && !isActive) continue;
-      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-      const pillLabel = group.name;
-      const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W6 + LEGEND_PILL_PAD6;
-      const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "c4-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
-      if (isActive) {
-        gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT7).attr("rx", LEGEND_HEIGHT7 / 2).attr("fill", groupBg);
-      }
-      const pillX = isActive ? LEGEND_CAPSULE_PAD6 : 0;
-      const pillY = isActive ? LEGEND_CAPSULE_PAD6 : 0;
-      const pillH = LEGEND_HEIGHT7 - (isActive ? LEGEND_CAPSULE_PAD6 * 2 : 0);
-      gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
-      if (isActive) {
-        gEl.append("rect").attr("x", pillX).attr("y", pillY).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);
-      }
-      gEl.append("text").attr("x", pillX + pillWidth / 2).attr("y", LEGEND_HEIGHT7 / 2 + LEGEND_PILL_FONT_SIZE4 / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE4).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
-      if (isActive) {
-        let entryX = pillX + pillWidth + 4;
-        for (const entry of group.entries) {
-          const entryG = gEl.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R7).attr("cy", LEGEND_HEIGHT7 / 2).attr("r", LEGEND_DOT_R7).attr("fill", entry.color);
-          const textX = entryX + LEGEND_DOT_R7 * 2 + LEGEND_ENTRY_DOT_GAP6;
-          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT7 / 2 + LEGEND_ENTRY_FONT_SIZE5 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE5).attr("fill", palette.textMuted).text(entry.value);
-          entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W6 + LEGEND_ENTRY_TRAIL6;
-        }
-      }
+  if (hasLegend) {
+    const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${height - DIAGRAM_PADDING7 - LEGEND_HEIGHT})`) : contentG.append("g").attr("class", "c4-legend");
+    if (activeTagGroup) {
+      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
+    renderLegend2(legendParent, layout, palette, isDark, activeTagGroup, fixedLegend ? width : null);
   }
 }
 function renderC4ContextForExport(content, theme, palette) {
@@ -13665,33 +13939,47 @@ function placeEdgeLabels(labels, edges, obstacleRects) {
     placedRects.push({ x: lbl.x, y: lbl.y, w: lbl.bgW, h: lbl.bgH });
   }
 }
-function renderLegend2(contentG, layout, palette, isDark, activeTagGroup) {
-  for (const group of layout.legend) {
+function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth) {
+  const visibleGroups = activeTagGroup != null ? layout.legend.filter((g) => g.name.toLowerCase() === (activeTagGroup ?? "").toLowerCase()) : layout.legend;
+  const pillWidthOf = (g) => g.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+  const effectiveW = (g) => activeTagGroup != null ? g.width : pillWidthOf(g);
+  let fixedPositions = null;
+  if (fixedWidth != null && visibleGroups.length > 0) {
+    fixedPositions = /* @__PURE__ */ new Map();
+    const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+    let cx = Math.max(DIAGRAM_PADDING7, (fixedWidth - totalW) / 2);
+    for (const g of visibleGroups) {
+      fixedPositions.set(g.name, cx);
+      cx += effectiveW(g) + LEGEND_GROUP_GAP;
+    }
+  }
+  for (const group of visibleGroups) {
     const isActive = activeTagGroup != null && group.name.toLowerCase() === (activeTagGroup ?? "").toLowerCase();
-    if (activeTagGroup != null && !isActive) continue;
     const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
     const pillLabel = group.name;
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W6 + LEGEND_PILL_PAD6;
-    const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "c4-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
+    const pillWidth = pillWidthOf(group);
+    const gX = fixedPositions?.get(group.name) ?? group.x;
+    const gY = fixedPositions != null ? 0 : group.y;
+    const gEl = parent.append("g").attr("transform", `translate(${gX}, ${gY})`).attr("class", "c4-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
     if (isActive) {
-      gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT7).attr("rx", LEGEND_HEIGHT7 / 2).attr("fill", groupBg);
+      gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
     }
-    const pillX = isActive ? LEGEND_CAPSULE_PAD6 : 0;
-    const pillY = isActive ? LEGEND_CAPSULE_PAD6 : 0;
-    const pillH = LEGEND_HEIGHT7 - (isActive ? LEGEND_CAPSULE_PAD6 * 2 : 0);
+    const pillX = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillY = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
     gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
     if (isActive) {
       gEl.append("rect").attr("x", pillX).attr("y", pillY).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);
     }
-    gEl.append("text").attr("x", pillX + pillWidth / 2).attr("y", LEGEND_HEIGHT7 / 2 + LEGEND_PILL_FONT_SIZE4 / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE4).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
+    gEl.append("text").attr("x", pillX + 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", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
     if (isActive) {
       let entryX = pillX + pillWidth + 4;
       for (const entry of group.entries) {
         const entryG = gEl.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R7).attr("cy", LEGEND_HEIGHT7 / 2).attr("r", LEGEND_DOT_R7).attr("fill", entry.color);
-        const textX = entryX + LEGEND_DOT_R7 * 2 + LEGEND_ENTRY_DOT_GAP6;
-        entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT7 / 2 + LEGEND_ENTRY_FONT_SIZE5 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE5).attr("fill", palette.textMuted).text(entry.value);
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W6 + LEGEND_ENTRY_TRAIL6;
+        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+        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).text(entry.value);
+        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
     }
   }
@@ -13703,8 +13991,14 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   if (width <= 0 || height <= 0) return;
   const titleHeight = parsed.title ? TITLE_HEIGHT4 + 10 : 0;
   const diagramW = layout.width;
-  const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const hasLegend = layout.legend.length > 0;
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP4 = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP4 : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
   const scaleX = (width - DIAGRAM_PADDING7 * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING7 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE6, scaleX, scaleY);
@@ -13775,6 +14069,20 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   renderEdges(contentG, layout.edges, palette, onClickItem, boundaryLabelObstacles);
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
     if (node.shape) {
       nodeG.attr("data-shape", node.shape);
     }
@@ -13860,8 +14168,12 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
-  if (!exportDims) {
-    renderLegend2(contentG, layout, palette, isDark, activeTagGroup);
+  if (hasLegend) {
+    const legendParent = fixedLegend ? svg.append("g").attr("class", "c4-legend-fixed").attr("transform", `translate(0, ${height - DIAGRAM_PADDING7 - LEGEND_HEIGHT})`) : contentG.append("g").attr("class", "c4-legend");
+    if (activeTagGroup) {
+      legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
+    }
+    renderLegend2(legendParent, layout, palette, isDark, activeTagGroup, fixedLegend ? width : null);
   }
 }
 function renderC4ContainersForExport(content, systemName, theme, palette) {
@@ -13963,7 +14275,7 @@ function renderC4DeploymentForExport(content, theme, palette) {
     document.body.removeChild(el);
   }
 }
-var DIAGRAM_PADDING7, MAX_SCALE6, TITLE_HEIGHT4, TITLE_FONT_SIZE4, TYPE_FONT_SIZE, NAME_FONT_SIZE, DESC_FONT_SIZE, DESC_LINE_HEIGHT2, DESC_CHAR_WIDTH2, EDGE_LABEL_FONT_SIZE5, TECH_FONT_SIZE, EDGE_STROKE_WIDTH6, NODE_STROKE_WIDTH6, CARD_RADIUS4, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, META_FONT_SIZE3, META_CHAR_WIDTH2, META_LINE_HEIGHT6, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, LEGEND_HEIGHT7, LEGEND_PILL_FONT_SIZE4, LEGEND_PILL_FONT_W6, LEGEND_PILL_PAD6, LEGEND_DOT_R7, LEGEND_ENTRY_FONT_SIZE5, LEGEND_ENTRY_FONT_W6, LEGEND_ENTRY_DOT_GAP6, LEGEND_ENTRY_TRAIL6, LEGEND_CAPSULE_PAD6, lineGenerator5;
+var DIAGRAM_PADDING7, MAX_SCALE6, TITLE_HEIGHT4, TITLE_FONT_SIZE4, TYPE_FONT_SIZE, NAME_FONT_SIZE, DESC_FONT_SIZE, DESC_LINE_HEIGHT2, DESC_CHAR_WIDTH2, EDGE_LABEL_FONT_SIZE5, TECH_FONT_SIZE, EDGE_STROKE_WIDTH6, NODE_STROKE_WIDTH6, CARD_RADIUS4, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, META_FONT_SIZE3, META_CHAR_WIDTH2, META_LINE_HEIGHT6, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, lineGenerator5;
 var init_renderer7 = __esm({
   "src/c4/renderer.ts"() {
     "use strict";
@@ -13972,6 +14284,7 @@ var init_renderer7 = __esm({
     init_inline_markdown();
     init_parser6();
     init_layout6();
+    init_legend_constants();
     DIAGRAM_PADDING7 = 20;
     MAX_SCALE6 = 3;
     TITLE_HEIGHT4 = 30;
@@ -14004,16 +14317,6 @@ var init_renderer7 = __esm({
     PERSON_LEG_SPAN = 7;
     PERSON_ICON_W = PERSON_ARM_SPAN * 2;
     PERSON_SW = 1.5;
-    LEGEND_HEIGHT7 = 28;
-    LEGEND_PILL_FONT_SIZE4 = 11;
-    LEGEND_PILL_FONT_W6 = LEGEND_PILL_FONT_SIZE4 * 0.6;
-    LEGEND_PILL_PAD6 = 16;
-    LEGEND_DOT_R7 = 4;
-    LEGEND_ENTRY_FONT_SIZE5 = 10;
-    LEGEND_ENTRY_FONT_W6 = LEGEND_ENTRY_FONT_SIZE5 * 0.6;
-    LEGEND_ENTRY_DOT_GAP6 = 4;
-    LEGEND_ENTRY_TRAIL6 = 8;
-    LEGEND_CAPSULE_PAD6 = 4;
     lineGenerator5 = d3Shape5.line().x((d) => d.x).y((d) => d.y).curve(d3Shape5.curveBasis);
   }
 });
@@ -14869,23 +15172,6 @@ function computeInfra(parsed, params = {}) {
   const defaultLatencyMs = parseFloat(parsed.options["default-latency-ms"] ?? "") || 0;
   const defaultUptime = parseFloat(parsed.options["default-uptime"] ?? "") || 100;
   let effectiveNodes = parsed.nodes;
-  if (params.scenario) {
-    const overrides = params.scenario.overrides;
-    effectiveNodes = parsed.nodes.map((node) => {
-      const nodeOverrides = overrides[node.id];
-      if (!nodeOverrides) return node;
-      const props = node.properties.map((p) => {
-        const ov = nodeOverrides[p.key];
-        return ov != null ? { ...p, value: ov } : p;
-      });
-      for (const [key, val] of Object.entries(nodeOverrides)) {
-        if (!props.some((p) => p.key === key)) {
-          props.push({ key, value: val, lineNumber: node.lineNumber });
-        }
-      }
-      return { ...node, properties: props };
-    });
-  }
   if (params.propertyOverrides) {
     const propOv = params.propertyOverrides;
     effectiveNodes = effectiveNodes.map((node) => {
@@ -15322,6 +15608,7 @@ var init_compute = __esm({
 // src/infra/layout.ts
 var layout_exports8 = {};
 __export(layout_exports8, {
+  fixEdgeWaypoints: () => fixEdgeWaypoints,
   layoutInfra: () => layoutInfra,
   separateGroups: () => separateGroups
 });
@@ -15506,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++) {
@@ -15523,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;
@@ -15531,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();
@@ -15551,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) {
@@ -15686,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;
@@ -15744,6 +16065,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight
   };
@@ -15785,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;
   }
 });
 
@@ -15876,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;
@@ -16159,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) {
@@ -16200,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);
     }
   }
@@ -16484,16 +17047,16 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
       color: r.color,
       key: r.name.toLowerCase().replace(/\s+/g, "-")
     }));
-    const pillWidth = "Capabilities".length * LEGEND_PILL_FONT_W7 + LEGEND_PILL_PAD7;
+    const pillWidth = "Capabilities".length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
     let entriesWidth = 0;
     for (const e of entries) {
-      entriesWidth += LEGEND_DOT_R8 * 2 + LEGEND_ENTRY_DOT_GAP7 + e.value.length * LEGEND_ENTRY_FONT_W7 + LEGEND_ENTRY_TRAIL7;
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
     }
     groups.push({
       name: "Capabilities",
       type: "role",
       entries,
-      width: LEGEND_CAPSULE_PAD7 * 2 + pillWidth + 4 + entriesWidth,
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth,
       minifiedWidth: pillWidth
     });
   }
@@ -16509,123 +17072,72 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
       }
     }
     if (entries.length === 0) continue;
-    const pillWidth = tg.name.length * LEGEND_PILL_FONT_W7 + LEGEND_PILL_PAD7;
+    const pillWidth = tg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
     let entriesWidth = 0;
     for (const e of entries) {
-      entriesWidth += LEGEND_DOT_R8 * 2 + LEGEND_ENTRY_DOT_GAP7 + e.value.length * LEGEND_ENTRY_FONT_W7 + LEGEND_ENTRY_TRAIL7;
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + e.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
     }
     groups.push({
       name: tg.name,
       type: "tag",
       tagKey: (tg.alias ?? tg.name).toLowerCase(),
       entries,
-      width: LEGEND_CAPSULE_PAD7 * 2 + pillWidth + 4 + entriesWidth,
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth,
       minifiedWidth: pillWidth
     });
   }
   return groups;
 }
-function computePlaybackWidth(playback) {
-  if (!playback) return 0;
-  const pillWidth = "Playback".length * LEGEND_PILL_FONT_W7 + LEGEND_PILL_PAD7;
-  if (!playback.expanded) return pillWidth;
-  let entriesW = 8;
-  entriesW += LEGEND_PILL_FONT_SIZE5 * 0.8 + 6;
-  for (const s of playback.speedOptions) {
-    entriesW += `${s}x`.length * LEGEND_ENTRY_FONT_W7 + SPEED_BADGE_H_PAD * 2 + SPEED_BADGE_GAP;
-  }
-  return LEGEND_CAPSULE_PAD7 * 2 + pillWidth + entriesW;
-}
-function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback) {
-  if (legendGroups.length === 0 && !playback) return;
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup) {
+  if (legendGroups.length === 0) return;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
+  if (activeGroup) {
+    legendG.attr("data-legend-active", activeGroup.toLowerCase());
+  }
   const effectiveW = (g) => activeGroup != null && g.name.toLowerCase() === activeGroup.toLowerCase() ? g.width : g.minifiedWidth;
-  const playbackW = computePlaybackWidth(playback);
-  const trailingGaps = legendGroups.length > 0 && playbackW > 0 ? LEGEND_GROUP_GAP5 : 0;
-  const totalLegendW = legendGroups.reduce((s, g) => s + effectiveW(g), 0) + (legendGroups.length - 1) * LEGEND_GROUP_GAP5 + trailingGaps + playbackW;
+  const totalLegendW = legendGroups.reduce((s, g) => s + effectiveW(g), 0) + (legendGroups.length - 1) * LEGEND_GROUP_GAP;
   let cursorX = (totalWidth - totalLegendW) / 2;
   for (const group of legendGroups) {
     const isActive = activeGroup != null && group.name.toLowerCase() === activeGroup.toLowerCase();
     const groupBg = isDark ? mix(palette.bg, palette.text, 85) : mix(palette.bg, palette.text, 92);
     const pillLabel = group.name;
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W7 + LEGEND_PILL_PAD7;
-    const gEl = legendG.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "infra-legend-group").attr("data-legend-group", group.name.toLowerCase()).attr("data-legend-type", group.type).style("cursor", "pointer");
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const gEl = legendG.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "infra-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
     if (isActive) {
-      gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT8).attr("rx", LEGEND_HEIGHT8 / 2).attr("fill", groupBg);
+      gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
     }
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD7 : 0;
-    const pillYOff = isActive ? LEGEND_CAPSULE_PAD7 : 0;
-    const pillH = LEGEND_HEIGHT8 - (isActive ? LEGEND_CAPSULE_PAD7 * 2 : 0);
+    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillYOff = isActive ? LEGEND_CAPSULE_PAD : 0;
+    const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
     gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
     if (isActive) {
-      gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", isDark ? mix(palette.textMuted, palette.bg, 50) : mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
+      gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).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);
     }
-    gEl.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LEGEND_HEIGHT8 / 2 + LEGEND_PILL_FONT_SIZE5 / 2 - 2).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE5).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
+    gEl.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
     if (isActive) {
       let entryX = pillXOff + pillWidth + 4;
       for (const entry of group.entries) {
-        const entryG = gEl.append("g").attr("class", "infra-legend-entry").attr("data-legend-entry", entry.key).attr("data-legend-type", group.type).attr("data-legend-color", entry.color).style("cursor", "pointer");
-        if (group.type === "tag" && group.tagKey) {
-          entryG.attr("data-legend-tag-group", group.tagKey);
-        }
-        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R8).attr("cy", LEGEND_HEIGHT8 / 2).attr("r", LEGEND_DOT_R8).attr("fill", entry.color);
-        const textX = entryX + LEGEND_DOT_R8 * 2 + LEGEND_ENTRY_DOT_GAP7;
-        entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT8 / 2 + LEGEND_ENTRY_FONT_SIZE6 / 2 - 1).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE6).attr("fill", palette.textMuted).text(entry.value);
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W7 + LEGEND_ENTRY_TRAIL7;
+        const entryG = gEl.append("g").attr("class", "infra-legend-entry").attr("data-legend-entry", entry.key.toLowerCase()).attr("data-legend-color", entry.color).attr("data-legend-type", group.type).attr("data-legend-tag-group", group.type === "tag" ? group.tagKey ?? "" : null).style("cursor", "pointer");
+        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+        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-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entry.value);
+        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
     }
-    cursorX += effectiveW(group) + LEGEND_GROUP_GAP5;
+    cursorX += effectiveW(group) + LEGEND_GROUP_GAP;
   }
-  if (playback) {
-    const isExpanded = playback.expanded;
-    const groupBg = isDark ? mix(palette.bg, palette.text, 85) : mix(palette.bg, palette.text, 92);
-    const pillLabel = "Playback";
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W7 + LEGEND_PILL_PAD7;
-    const fullW = computePlaybackWidth(playback);
-    const pbG = legendG.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "infra-legend-group infra-playback-pill").style("cursor", "pointer");
-    if (isExpanded) {
-      pbG.append("rect").attr("width", fullW).attr("height", LEGEND_HEIGHT8).attr("rx", LEGEND_HEIGHT8 / 2).attr("fill", groupBg);
-    }
-    const pillXOff = isExpanded ? LEGEND_CAPSULE_PAD7 : 0;
-    const pillYOff = isExpanded ? LEGEND_CAPSULE_PAD7 : 0;
-    const pillH = LEGEND_HEIGHT8 - (isExpanded ? LEGEND_CAPSULE_PAD7 * 2 : 0);
-    pbG.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isExpanded ? palette.bg : groupBg);
-    if (isExpanded) {
-      pbG.append("rect").attr("x", pillXOff).attr("y", pillYOff).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);
-    }
-    pbG.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LEGEND_HEIGHT8 / 2 + LEGEND_PILL_FONT_SIZE5 / 2 - 2).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE5).attr("font-weight", "500").attr("fill", isExpanded ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
-    if (isExpanded) {
-      let entryX = pillXOff + pillWidth + 8;
-      const entryY = LEGEND_HEIGHT8 / 2 + LEGEND_ENTRY_FONT_SIZE6 / 2 - 1;
-      const ppLabel = playback.paused ? "\u25B6" : "\u23F8";
-      pbG.append("text").attr("x", entryX).attr("y", entryY).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE5).attr("fill", palette.textMuted).attr("data-playback-action", "toggle-pause").style("cursor", "pointer").text(ppLabel);
-      entryX += LEGEND_PILL_FONT_SIZE5 * 0.8 + 6;
-      for (const s of playback.speedOptions) {
-        const label = `${s}x`;
-        const isActive = playback.speed === s;
-        const slotW = label.length * LEGEND_ENTRY_FONT_W7 + SPEED_BADGE_H_PAD * 2;
-        const badgeH = LEGEND_ENTRY_FONT_SIZE6 + SPEED_BADGE_V_PAD * 2;
-        const badgeY = (LEGEND_HEIGHT8 - badgeH) / 2;
-        const speedG = pbG.append("g").attr("data-playback-action", "set-speed").attr("data-playback-value", String(s)).style("cursor", "pointer");
-        speedG.append("rect").attr("x", entryX).attr("y", badgeY).attr("width", slotW).attr("height", badgeH).attr("rx", badgeH / 2).attr("fill", isActive ? palette.primary : "transparent");
-        speedG.append("text").attr("x", entryX + slotW / 2).attr("y", entryY).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE6).attr("font-weight", isActive ? "600" : "400").attr("fill", isActive ? palette.bg : palette.textMuted).attr("text-anchor", "middle").text(label);
-        entryX += slotW + SPEED_BADGE_GAP;
-      }
-    }
-    cursorX += fullW + LEGEND_GROUP_GAP5;
-  }
-}
-function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, expandedNodeIds, exportMode, collapsedNodes) {
+}
+function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, _playback, expandedNodeIds, exportMode, collapsedNodes) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette, layout.edges);
-  const hasLegend = legendGroups.length > 0 || !!playback;
+  const hasLegend = legendGroups.length > 0;
   const fixedLegend = !exportMode && hasLegend;
-  const legendOffset = hasLegend && !fixedLegend ? LEGEND_HEIGHT8 : 0;
+  const legendOffset = hasLegend && !fixedLegend ? LEGEND_HEIGHT : 0;
   const titleOffset = title ? 40 : 0;
   const totalWidth = layout.width;
   const totalHeight = layout.height + titleOffset + legendOffset;
   const shouldAnimate = animate !== false;
-  const rootSvg = d3Selection9.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", "100%").attr("height", fixedLegend ? `calc(100% - ${LEGEND_HEIGHT8 + LEGEND_FIXED_GAP3}px)` : "100%").attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMid meet");
+  const rootSvg = d3Selection9.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", "100%").attr("height", fixedLegend ? `calc(100% - ${LEGEND_HEIGHT + LEGEND_FIXED_GAP3}px)` : "100%").attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMid meet");
   if (shouldAnimate) {
     rootSvg.append("style").text(`
       @keyframes infra-pulse-warning {
@@ -16673,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) => {
@@ -16685,14 +17197,14 @@ 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;
-      const legendSvg = d3Selection9.select(container).append("svg").attr("class", "infra-legend-fixed").attr("width", "100%").attr("height", LEGEND_HEIGHT8 + LEGEND_FIXED_GAP3).attr("viewBox", `0 0 ${containerWidth} ${LEGEND_HEIGHT8 + LEGEND_FIXED_GAP3}`).attr("preserveAspectRatio", "xMidYMid meet").style("display", "block");
-      renderLegend3(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP3 / 2, palette, isDark, activeGroup ?? null, playback ?? void 0);
+      const legendSvg = d3Selection9.select(container).append("svg").attr("class", "infra-legend-fixed").attr("width", "100%").attr("height", LEGEND_HEIGHT + LEGEND_FIXED_GAP3).attr("viewBox", `0 0 ${containerWidth} ${LEGEND_HEIGHT + LEGEND_FIXED_GAP3}`).attr("preserveAspectRatio", "xMidYMid meet").style("display", "block");
+      renderLegend3(legendSvg, legendGroups, containerWidth, LEGEND_FIXED_GAP3 / 2, palette, isDark, activeGroup ?? null);
     } else {
-      renderLegend3(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null, playback ?? void 0);
+      renderLegend3(rootSvg, legendGroups, totalWidth, titleOffset + layout.height + 4, palette, isDark, activeGroup ?? null);
     }
   }
 }
@@ -16703,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_HEIGHT8, LEGEND_PILL_PAD7, LEGEND_PILL_FONT_SIZE5, LEGEND_PILL_FONT_W7, LEGEND_CAPSULE_PAD7, LEGEND_DOT_R8, LEGEND_ENTRY_FONT_SIZE6, LEGEND_ENTRY_FONT_W7, LEGEND_ENTRY_DOT_GAP7, LEGEND_ENTRY_TRAIL7, LEGEND_GROUP_GAP5, LEGEND_FIXED_GAP3, SPEED_BADGE_H_PAD, SPEED_BADGE_V_PAD, SPEED_BADGE_GAP, 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";
@@ -16714,6 +17226,7 @@ var init_renderer8 = __esm({
     init_parser9();
     init_compute();
     init_layout8();
+    init_legend_constants();
     NODE_FONT_SIZE4 = 13;
     META_FONT_SIZE4 = 10;
     META_LINE_HEIGHT8 = 14;
@@ -16729,21 +17242,7 @@ var init_renderer8 = __esm({
     NODE_PAD_BOTTOM2 = 10;
     COLLAPSE_BAR_HEIGHT5 = 6;
     COLLAPSE_BAR_INSET2 = 0;
-    LEGEND_HEIGHT8 = 28;
-    LEGEND_PILL_PAD7 = 16;
-    LEGEND_PILL_FONT_SIZE5 = 11;
-    LEGEND_PILL_FONT_W7 = LEGEND_PILL_FONT_SIZE5 * 0.6;
-    LEGEND_CAPSULE_PAD7 = 4;
-    LEGEND_DOT_R8 = 4;
-    LEGEND_ENTRY_FONT_SIZE6 = 10;
-    LEGEND_ENTRY_FONT_W7 = LEGEND_ENTRY_FONT_SIZE6 * 0.6;
-    LEGEND_ENTRY_DOT_GAP7 = 4;
-    LEGEND_ENTRY_TRAIL7 = 8;
-    LEGEND_GROUP_GAP5 = 12;
     LEGEND_FIXED_GAP3 = 16;
-    SPEED_BADGE_H_PAD = 5;
-    SPEED_BADGE_V_PAD = 3;
-    SPEED_BADGE_GAP = 6;
     COLOR_HEALTHY = "#22c55e";
     COLOR_WARNING = "#eab308";
     COLOR_OVERLOADED = "#ef4444";
@@ -16760,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",
@@ -16945,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");
       }
@@ -17009,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";
@@ -17029,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);
   }
 });
 
@@ -17764,9 +18262,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const GROUP_PADDING_BOTTOM = 8;
   const GROUP_LABEL_SIZE = 11;
   const titleOffset = title ? TITLE_HEIGHT5 : 0;
-  const legendOffset = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT9 + LEGEND_BOTTOM_GAP : 0;
   const groupOffset = groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
-  const participantStartY = TOP_MARGIN + titleOffset + legendOffset + PARTICIPANT_Y_OFFSET + groupOffset;
+  const participantStartY = TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
   const hasActors = participants.some((p) => p.type === "actor");
   const messageStartOffset = MESSAGE_START_OFFSET + (hasActors ? 20 : 0);
@@ -17848,7 +18345,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     participants.length * PARTICIPANT_GAP,
     PARTICIPANT_BOX_WIDTH + 40
   );
-  const totalHeight = participantStartY + PARTICIPANT_BOX_HEIGHT + Math.max(lifelineLength, 40) + 40;
+  const contentHeight = participantStartY + PARTICIPANT_BOX_HEIGHT + Math.max(lifelineLength, 40) + 40;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = contentHeight + legendSpace;
   const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
   const diagramWidth = participants.length * PARTICIPANT_GAP;
@@ -17906,13 +18405,13 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   if (parsed.tagGroups.length > 0) {
-    const legendY = TOP_MARGIN + titleOffset;
+    const legendY = contentHeight;
     const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
     const legendItems = [];
     for (const tg of parsed.tagGroups) {
       if (tg.entries.length === 0) continue;
       const isActive = !!activeTagGroup && tg.name.toLowerCase() === activeTagGroup.toLowerCase();
-      const pillWidth = tg.name.length * LEGEND_PILL_FONT_W8 + LEGEND_PILL_PAD8;
+      const pillWidth = tg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
       const entries = tg.entries.map((e) => ({
         value: e.value,
         color: resolveColor(e.color)
@@ -17921,38 +18420,42 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (isActive) {
         let entriesWidth = 0;
         for (const entry of entries) {
-          entriesWidth += LEGEND_DOT_R9 * 2 + LEGEND_ENTRY_DOT_GAP8 + entry.value.length * LEGEND_ENTRY_FONT_W8 + LEGEND_ENTRY_TRAIL8;
+          entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
         }
-        totalWidth2 = LEGEND_CAPSULE_PAD8 * 2 + pillWidth + 4 + entriesWidth;
+        totalWidth2 = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
       }
       legendItems.push({ group: tg, isActive, pillWidth, totalWidth: totalWidth2, entries });
     }
-    const totalLegendWidth = legendItems.reduce((s, item) => s + item.totalWidth, 0) + (legendItems.length - 1) * LEGEND_GROUP_GAP6;
+    const totalLegendWidth = legendItems.reduce((s, item) => s + item.totalWidth, 0) + (legendItems.length - 1) * LEGEND_GROUP_GAP;
     let legendX = (svgWidth - totalLegendWidth) / 2;
+    const legendContainer = svg.append("g").attr("class", "sequence-legend");
+    if (activeTagGroup) {
+      legendContainer.attr("data-legend-active", activeTagGroup.toLowerCase());
+    }
     for (const item of legendItems) {
-      const gEl = svg.append("g").attr("transform", `translate(${legendX}, ${legendY})`).attr("class", "sequence-legend-group").attr("data-legend-group", item.group.name.toLowerCase()).style("cursor", "pointer");
+      const gEl = legendContainer.append("g").attr("transform", `translate(${legendX}, ${legendY})`).attr("class", "sequence-legend-group").attr("data-legend-group", item.group.name.toLowerCase()).style("cursor", "pointer");
       if (item.isActive) {
-        gEl.append("rect").attr("width", item.totalWidth).attr("height", LEGEND_HEIGHT9).attr("rx", LEGEND_HEIGHT9 / 2).attr("fill", groupBg);
+        gEl.append("rect").attr("width", item.totalWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
       }
-      const pillXOff = item.isActive ? LEGEND_CAPSULE_PAD8 : 0;
-      const pillYOff = item.isActive ? LEGEND_CAPSULE_PAD8 : 0;
-      const pillH = LEGEND_HEIGHT9 - (item.isActive ? LEGEND_CAPSULE_PAD8 * 2 : 0);
+      const pillXOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillYOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
+      const pillH = LEGEND_HEIGHT - (item.isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
       gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", item.pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", item.isActive ? palette.bg : groupBg);
       if (item.isActive) {
         gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", item.pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
       }
-      gEl.append("text").attr("x", pillXOff + item.pillWidth / 2).attr("y", LEGEND_HEIGHT9 / 2 + LEGEND_PILL_FONT_SIZE6 / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE6).attr("font-weight", "500").attr("fill", item.isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(item.group.name);
+      gEl.append("text").attr("x", pillXOff + item.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", item.isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(item.group.name);
       if (item.isActive) {
         let entryX = pillXOff + item.pillWidth + 4;
         for (const entry of item.entries) {
           const entryG = gEl.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R9).attr("cy", LEGEND_HEIGHT9 / 2).attr("r", LEGEND_DOT_R9).attr("fill", entry.color);
-          const textX = entryX + LEGEND_DOT_R9 * 2 + LEGEND_ENTRY_DOT_GAP8;
-          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT9 / 2 + LEGEND_ENTRY_FONT_SIZE7 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE7).attr("fill", palette.textMuted).text(entry.value);
-          entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W8 + LEGEND_ENTRY_TRAIL8;
+          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+          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).text(entry.value);
+          entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
         }
       }
-      legendX += item.totalWidth + LEGEND_GROUP_GAP6;
+      legendX += item.totalWidth + LEGEND_GROUP_GAP;
     }
   }
   for (const group of groups) {
@@ -18473,7 +18976,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT5, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, LEGEND_HEIGHT9, LEGEND_PILL_PAD8, LEGEND_PILL_FONT_SIZE6, LEGEND_PILL_FONT_W8, LEGEND_CAPSULE_PAD8, LEGEND_DOT_R9, LEGEND_ENTRY_FONT_SIZE7, LEGEND_ENTRY_FONT_W8, LEGEND_ENTRY_DOT_GAP8, LEGEND_ENTRY_TRAIL8, LEGEND_GROUP_GAP6, LEGEND_BOTTOM_GAP, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
+var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT5, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, LABEL_CHAR_WIDTH, LABEL_MAX_CHARS, fill, stroke, SW, W, H;
 var init_renderer9 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
@@ -18483,6 +18986,7 @@ var init_renderer9 = __esm({
     init_colors();
     init_parser();
     init_tag_resolution();
+    init_legend_constants();
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
     PARTICIPANT_BOX_HEIGHT = 50;
@@ -18504,18 +19008,6 @@ var init_renderer9 = __esm({
     NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
     COLLAPSED_NOTE_H = 20;
     COLLAPSED_NOTE_W = 40;
-    LEGEND_HEIGHT9 = 28;
-    LEGEND_PILL_PAD8 = 16;
-    LEGEND_PILL_FONT_SIZE6 = 11;
-    LEGEND_PILL_FONT_W8 = LEGEND_PILL_FONT_SIZE6 * 0.6;
-    LEGEND_CAPSULE_PAD8 = 4;
-    LEGEND_DOT_R9 = 4;
-    LEGEND_ENTRY_FONT_SIZE7 = 10;
-    LEGEND_ENTRY_FONT_W8 = LEGEND_ENTRY_FONT_SIZE7 * 0.6;
-    LEGEND_ENTRY_DOT_GAP8 = 4;
-    LEGEND_ENTRY_TRAIL8 = 8;
-    LEGEND_GROUP_GAP6 = 12;
-    LEGEND_BOTTOM_GAP = 8;
     LABEL_CHAR_WIDTH = 7.5;
     LABEL_MAX_CHARS = Math.floor((PARTICIPANT_BOX_WIDTH - 10) / LABEL_CHAR_WIDTH);
     fill = (palette, isDark, color) => color ? mix(color, isDark ? palette.surface : palette.bg, isDark ? 30 : 40) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
@@ -20128,9 +20620,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin + tagLegendReserve,
+        top: 104 + markerMargin,
         right: 40 + scaleMargin,
-        bottom: 40,
+        bottom: 40 + tagLegendReserve,
         left: 60 + scaleMargin
       };
       const innerWidth = width - margin.left - margin.right;
@@ -20237,9 +20729,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin + tagLegendReserve,
+        top: 104 + markerMargin,
         right: 200,
-        bottom: 40,
+        bottom: 40 + tagLegendReserve,
         left: 60 + scaleMargin
       };
       const innerWidth = width - margin.left - margin.right;
@@ -20376,9 +20868,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const dynamicLeftMargin = Math.max(120, maxGroupNameLen * 7 + 30);
     const baseTopMargin = title ? 50 : 20;
     const margin = {
-      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
+      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin,
       right: 40,
-      bottom: 40 + scaleMargin,
+      bottom: 40 + scaleMargin + tagLegendReserve,
       left: dynamicLeftMargin
     };
     const innerWidth = width - margin.left - margin.right;
@@ -20522,9 +21014,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: 104 + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
+      top: 104 + (timelineScale ? 40 : 0) + markerMargin,
       right: 40,
-      bottom: 40 + scaleMargin,
+      bottom: 40 + scaleMargin + tagLegendReserve,
       left: 60
     };
     const innerWidth = width - margin.left - margin.right;
@@ -20655,17 +21147,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     });
   }
   if (parsed.timelineTagGroups.length > 0) {
-    const LG_HEIGHT = 28;
-    const LG_PILL_PAD = 16;
-    const LG_PILL_FONT_SIZE = 11;
-    const LG_PILL_FONT_W = LG_PILL_FONT_SIZE * 0.6;
-    const LG_CAPSULE_PAD = 4;
-    const LG_DOT_R = 4;
-    const LG_ENTRY_FONT_SIZE = 10;
-    const LG_ENTRY_FONT_W = LG_ENTRY_FONT_SIZE * 0.6;
-    const LG_ENTRY_DOT_GAP = 4;
-    const LG_ENTRY_TRAIL = 8;
-    const LG_GROUP_GAP = 12;
+    const LG_HEIGHT = LEGEND_HEIGHT;
+    const LG_PILL_PAD = LEGEND_PILL_PAD;
+    const LG_PILL_FONT_SIZE = LEGEND_PILL_FONT_SIZE;
+    const LG_PILL_FONT_W = LEGEND_PILL_FONT_W;
+    const LG_CAPSULE_PAD = LEGEND_CAPSULE_PAD;
+    const LG_DOT_R = LEGEND_DOT_R;
+    const LG_ENTRY_FONT_SIZE = LEGEND_ENTRY_FONT_SIZE;
+    const LG_ENTRY_FONT_W = LEGEND_ENTRY_FONT_W;
+    const LG_ENTRY_DOT_GAP = LEGEND_ENTRY_DOT_GAP;
+    const LG_ENTRY_TRAIL = LEGEND_ENTRY_TRAIL;
+    const LG_GROUP_GAP = LEGEND_GROUP_GAP;
     const LG_ICON_W = 20;
     const mainSvg = d3Selection12.select(container).select("svg");
     const mainG = mainSvg.select("g");
@@ -20698,6 +21190,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         );
       }, drawLegend2 = function() {
         mainSvg.selectAll(".tl-tag-legend-group").remove();
+        mainSvg.selectAll(".tl-tag-legend-container").remove();
         const effectiveColorKey = (currentActiveGroup ?? currentSwimlaneGroup)?.toLowerCase() ?? null;
         const visibleGroups = viewMode ? legendGroups.filter(
           (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
@@ -20708,13 +21201,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
         }, 0) + (visibleGroups.length - 1) * LG_GROUP_GAP;
         let cx = (width - totalW) / 2;
+        const legendContainer = mainSvg.append("g").attr("class", "tl-tag-legend-container");
+        if (currentActiveGroup) {
+          legendContainer.attr("data-legend-active", currentActiveGroup.toLowerCase());
+        }
         for (const lg of visibleGroups) {
           const groupKey = lg.group.name.toLowerCase();
           const isActive = viewMode || currentActiveGroup != null && currentActiveGroup.toLowerCase() === groupKey;
           const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
           const pillLabel = lg.group.name;
           const pillWidth = pillLabel.length * LG_PILL_FONT_W + LG_PILL_PAD;
-          const gEl = mainSvg.append("g").attr("transform", `translate(${cx}, ${legendY})`).attr("class", "tl-tag-legend-group tl-tag-legend-entry").attr("data-legend-group", groupKey).attr("data-tag-group", groupKey).attr("data-legend-entry", "__group__");
+          const gEl = legendContainer.append("g").attr("transform", `translate(${cx}, ${legendY})`).attr("class", "tl-tag-legend-group tl-tag-legend-entry").attr("data-legend-group", groupKey).attr("data-tag-group", groupKey).attr("data-legend-entry", "__group__");
           if (!viewMode) {
             gEl.style("cursor", "pointer").on("click", () => {
               currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
@@ -20804,7 +21301,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         });
       };
       var drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
-      const legendY = title ? 50 : 10;
+      const legendY = height - LG_HEIGHT - 4;
       const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
       const legendGroups = parsed.timelineTagGroups.map((g) => {
         const pillW = g.name.length * LG_PILL_FONT_W + LG_PILL_PAD;
@@ -21575,7 +22072,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const orgParsed = parseOrg2(content, effectivePalette2);
     if (orgParsed.error) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? null;
+    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
     const hiddenAttributes = orgExportState?.hiddenAttributes;
     const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseOrgTree2(orgParsed, collapsedNodes) : { parsed: orgParsed, hiddenCounts: /* @__PURE__ */ new Map() };
     const orgLayout = layoutOrg2(
@@ -21604,7 +22101,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const sitemapParsed = parseSitemap2(content, effectivePalette2);
     if (sitemapParsed.error || sitemapParsed.roots.length === 0) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? null;
+    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
     const hiddenAttributes = orgExportState?.hiddenAttributes;
     const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseSitemapTree2(sitemapParsed, collapsedNodes) : { parsed: sitemapParsed, hiddenCounts: /* @__PURE__ */ new Map() };
     const sitemapLayout = layoutSitemap2(
@@ -21632,7 +22129,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     container2.style.position = "absolute";
     container2.style.left = "-9999px";
     document.body.appendChild(container2);
-    renderKanban2(container2, kanbanParsed, effectivePalette2, theme === "dark");
+    renderKanban2(container2, kanbanParsed, effectivePalette2, theme === "dark", void 0, void 0, options?.tagGroup);
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "class") {
@@ -21664,7 +22161,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const exportWidth = erLayout.width + PADDING * 2;
     const exportHeight = erLayout.height + PADDING * 2 + titleOffset;
     const container2 = createExportContainer(exportWidth, exportHeight);
-    renderERDiagram2(container2, erParsed, erLayout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    renderERDiagram2(container2, erParsed, erLayout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight }, options?.tagGroup);
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "initiative-status") {
@@ -21701,7 +22198,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const exportHeight = c4Layout.height + PADDING * 2 + titleOffset;
     const container2 = createExportContainer(exportWidth, exportHeight);
     const renderFn = c4Level === "deployment" || c4Level === "components" && c4System && c4Container || c4Level === "containers" && c4System ? renderC4Containers2 : renderC4Context2;
-    renderFn(container2, c4Parsed, c4Layout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    renderFn(container2, c4Parsed, c4Layout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight }, options?.tagGroup);
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "flowchart") {
@@ -21724,16 +22221,16 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const effectivePalette2 = await resolveExportPalette(theme, palette);
     const infraParsed = parseInfra2(content);
     if (infraParsed.error || infraParsed.nodes.length === 0) return "";
-    const selectedScenario = options?.scenario ? infraParsed.scenarios.find((s) => s.name.toLowerCase() === options.scenario.toLowerCase()) ?? null : null;
-    const infraComputed = computeInfra2(infraParsed, selectedScenario ? { scenario: selectedScenario } : {});
+    const infraComputed = computeInfra2(infraParsed);
     const infraLayout = layoutInfra2(infraComputed);
+    const activeTagGroup = options?.tagGroup ?? null;
     const titleOffset = infraParsed.title ? 40 : 0;
     const legendGroups = computeInfraLegendGroups2(infraLayout.nodes, infraParsed.tagGroups, effectivePalette2);
     const legendOffset = legendGroups.length > 0 ? 28 : 0;
     const exportWidth = infraLayout.width;
     const exportHeight = infraLayout.height + titleOffset + legendOffset;
     const container2 = createExportContainer(exportWidth, exportHeight);
-    renderInfra2(container2, infraLayout, effectivePalette2, theme === "dark", infraParsed.title, infraParsed.titleLineNumber, infraParsed.tagGroups, null, false, null, null, true);
+    renderInfra2(container2, infraLayout, effectivePalette2, theme === "dark", infraParsed.title, infraParsed.titleLineNumber, infraParsed.tagGroups, activeTagGroup, false, null, null, true);
     const infraSvg = container2.querySelector("svg");
     if (infraSvg) {
       infraSvg.setAttribute("width", String(exportWidth));
@@ -21777,7 +22274,8 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const seqParsed = parseSequenceDgmo2(content);
     if (seqParsed.error || seqParsed.participants.length === 0) return "";
     renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark, void 0, {
-      exportWidth: EXPORT_WIDTH
+      exportWidth: EXPORT_WIDTH,
+      activeTagGroup: options?.tagGroup
     });
   } else if (parsed.type === "wordcloud") {
     await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
@@ -21791,7 +22289,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       isDark,
       void 0,
       dims,
-      orgExportState?.activeTagGroup,
+      orgExportState?.activeTagGroup ?? options?.tagGroup,
       orgExportState?.swimlaneTagGroup
     );
   } else if (parsed.type === "venn") {
@@ -21815,6 +22313,7 @@ var init_d3 = __esm({
     init_diagnostics();
     init_parsing();
     init_tag_groups();
+    init_legend_constants();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
       max: 0,
@@ -21990,7 +22489,7 @@ async function render(content, options) {
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
-    scenario: options?.scenario
+    tagGroup: options?.tagGroup
   });
 }