@diagrammo/dgmo 0.6.0 → 0.6.1

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;
   }
 });
 
@@ -10803,32 +10773,31 @@ 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;
     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;
     }
   }
 }
@@ -10875,6 +10844,7 @@ var init_renderer5 = __esm({
     init_color_utils();
     init_palettes();
     init_tag_groups();
+    init_legend_constants();
     init_parser3();
     init_layout4();
     DIAGRAM_PADDING5 = 20;
@@ -11034,12 +11004,14 @@ function layoutInitiativeStatus(parsed, collapseResult) {
       }
     } 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;
+      const spreadExitX = src.x + yOffset;
+      const spreadEntryY = tgt.y + yOffset;
+      const midX = (spreadExitX + enterX) / 2;
+      const midY = (exitY + spreadEntryY) / 2;
       points = [
-        { x: src.x, y: exitY },
+        { x: spreadExitX, y: exitY },
         { x: midX, y: midY },
-        { x: enterX, y: tgt.y }
+        { x: enterX, y: spreadEntryY }
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       points = [
@@ -11974,31 +11946,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_W4 + 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 +12086,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 +12096,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 +12402,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 +12412,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 +12767,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 +12777,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 +13022,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 +13032,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_W4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, META_EXCLUDE_KEYS;
 var init_layout6 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
@@ -13136,16 +13057,16 @@ 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_W4 = LEGEND_ENTRY_FONT_SIZE2 * 0.6;
+    LEGEND_ENTRY_DOT_GAP4 = 4;
+    LEGEND_ENTRY_TRAIL4 = 8;
+    LEGEND_CAPSULE_PAD4 = 4;
     META_EXCLUDE_KEYS = /* @__PURE__ */ new Set(["description", "tech", "technology", "is a"]);
   }
 });
@@ -13223,8 +13144,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 +13223,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 +13289,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 +13582,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 +13634,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 +13712,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 +13811,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 +13918,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 +13927,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 +13960,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 +14815,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) => {
@@ -16484,16 +16413,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 +16438,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 {
@@ -16689,10 +16567,10 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   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 +16581,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, lineGenerator7, 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 +16592,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 +16608,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";
@@ -17764,9 +17629,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 +17712,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 +17772,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 +17787,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 +18343,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 +18353,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 +18375,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 +19987,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 +20096,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 +20235,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 +20381,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 +20514,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 +20557,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 +20568,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 +20668,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 +21439,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 +21468,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 +21496,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 +21528,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 +21565,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 +21588,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 +21641,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 +21656,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 +21680,7 @@ var init_d3 = __esm({
     init_diagnostics();
     init_parsing();
     init_tag_groups();
+    init_legend_constants();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
       max: 0,
@@ -21990,7 +21856,7 @@ async function render(content, options) {
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
-    scenario: options?.scenario
+    tagGroup: options?.tagGroup
   });
 }