@diagrammo/dgmo 0.5.5 → 0.6.1

package/dist/index.cjs

@@ -1467,6 +1467,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) {
@@ -3662,9 +3685,11 @@ var init_parser3 = __esm({
 // src/chart.ts
 function parseChart(content, palette) {
   const lines = content.split("\n");
+  const parsedEras = [];
   const result = {
     type: "bar",
     data: [],
+    eras: parsedEras,
     diagnostics: [],
     error: null
   };
@@ -3683,6 +3708,16 @@ function parseChart(content, palette) {
       continue;
     }
     if (trimmed.startsWith("//")) continue;
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/);
+    if (eraMatch) {
+      parsedEras.push({
+        start: eraMatch[1].trim(),
+        end: eraMatch[2].trim(),
+        label: eraMatch[3].trim(),
+        color: eraMatch[4] ? resolveColor(eraMatch[4].trim(), palette) : null
+      });
+      continue;
+    }
     const colonIndex = trimmed.indexOf(":");
     if (colonIndex === -1) continue;
     const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
@@ -3761,6 +3796,9 @@ function parseChart(content, palette) {
       });
     }
   }
+  if (result.type !== "line" && result.type !== "area") {
+    result.eras = void 0;
+  }
   const setChartError = (line10, message) => {
     const diag = makeDgmoError(line10, message);
     result.diagnostics.push(diag);
@@ -3814,7 +3852,7 @@ var init_chart = __esm({
 });
 
 // src/echarts.ts
-function parseEChart(content, palette) {
+function parseExtendedChart(content, palette) {
   const lines = content.split("\n");
   const result = {
     type: "scatter",
@@ -4083,7 +4121,7 @@ function buildChartCommons(parsed, palette, isDark) {
   const tooltipTheme = { backgroundColor: palette.surface, borderColor: palette.border, textStyle: { color: palette.text } };
   return { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme };
 }
-function buildEChartsOption(parsed, palette, isDark) {
+function buildExtendedChartOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
@@ -4755,17 +4793,19 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint, intervalOverride) {
   const defaultGap = type === "value" ? 75 : 40;
   let catFontSize = 16;
   let catLabelExtras = {};
   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,
@@ -4782,7 +4822,10 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
       fontSize: type === "category" && data ? catFontSize : 16,
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
-        interval: 0,
+        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
       }
@@ -4796,7 +4839,7 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
+function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
   const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
   switch (parsed.type) {
@@ -4805,7 +4848,7 @@ function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
     case "bar-stacked":
       return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "line":
-      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "area":
       return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "pie":
@@ -4858,11 +4901,49 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     ]
   };
 }
+function buildIntervalStep(labels) {
+  const count = labels.length;
+  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;
+  return N - 1;
+}
+function buildMarkArea(eras, labels, textColor, defaultColor) {
+  if (eras.length === 0) return void 0;
+  return {
+    silent: false,
+    tooltip: { show: true },
+    data: eras.map((era) => {
+      const startIdx = labels.indexOf(era.start);
+      const endIdx = labels.indexOf(era.end);
+      const bandSlots = startIdx >= 0 && endIdx >= 0 ? endIdx - startIdx : Infinity;
+      const color = era.color ?? defaultColor;
+      return [
+        {
+          name: era.label,
+          xAxis: era.start,
+          itemStyle: { color, opacity: 0.15 },
+          label: {
+            show: bandSlots >= 3,
+            position: "insideTop",
+            fontSize: 11,
+            color: textColor
+          }
+        },
+        { xAxis: era.end }
+      ];
+    })
+  };
+}
 function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalStep(labels);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4872,7 +4953,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4882,15 +4963,19 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
+  const eras = parsed.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];
     const data = parsed.data.map(
@@ -4904,7 +4989,8 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SELF,
+      ...idx === 0 && markArea && { markArea }
     };
   });
   return {
@@ -4921,7 +5007,7 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       textStyle: { color: textColor }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
@@ -4931,6 +5017,9 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
+  const eras = parsed.eras ?? [];
+  const interval = buildIntervalStep(labels);
+  const markArea = buildMarkArea(eras, labels, textColor, palette.colors.blue);
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -4940,7 +5029,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth, interval),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4951,7 +5040,8 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        ...markArea && { markArea }
       }
     ]
   };
@@ -5136,7 +5226,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
     series
   };
 }
-async function renderEChartsForExport(content, theme, palette, options) {
+async function renderExtendedChartForExport(content, theme, palette, options) {
   const isDark = theme === "dark";
   const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
   const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
@@ -5146,11 +5236,11 @@ async function renderEChartsForExport(content, theme, palette, options) {
   if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
     const parsed = parseChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
+    option = buildSimpleChartOption(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
   } else {
-    const parsed = parseEChart(content, effectivePalette);
+    const parsed = parseExtendedChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOption(parsed, effectivePalette, isDark);
+    option = buildExtendedChartOption(parsed, effectivePalette, isDark);
   }
   if (!option || Object.keys(option).length === 0) return "";
   const chart = echarts.init(null, null, {
@@ -5177,7 +5267,7 @@ async function renderEChartsForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT;
+var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -5189,11 +5279,21 @@ var init_echarts = __esm({
     init_diagnostics();
     init_colors();
     init_parsing();
-    init_dgmo_router();
     EMPHASIS_SELF = { focus: "self", blurScope: "global" };
     CHART_BASE = { backgroundColor: "transparent", animation: false };
     ECHART_EXPORT_WIDTH = 1200;
     ECHART_EXPORT_HEIGHT = 800;
+    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "multi-line",
+      "area",
+      "pie",
+      "doughnut",
+      "radar",
+      "polar-area",
+      "bar-stacked"
+    ]);
   }
 });
 
@@ -6932,7 +7032,6 @@ function parseInfra(content) {
     edges: [],
     groups: [],
     tagGroups: [],
-    scenarios: [],
     options: {},
     diagnostics: [],
     error: null
@@ -7035,16 +7134,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];
@@ -7055,23 +7145,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);
@@ -7351,15 +7427,12 @@ var init_parser9 = __esm({
 // src/dgmo-router.ts
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
-  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
-  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
-  getDgmoFramework: () => getDgmoFramework,
+  getAllChartTypes: () => getAllChartTypes,
+  getRenderCategory: () => getRenderCategory,
+  isExtendedChartType: () => isExtendedChartType,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType
 });
-function getDgmoFramework(chartType) {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
 function parseDgmoChartType(content) {
   const lines = content.split("\n");
   for (const line10 of lines) {
@@ -7379,22 +7452,39 @@ function parseDgmoChartType(content) {
   if (looksLikeOrg(content)) return "org";
   return null;
 }
+function getRenderCategory(chartType) {
+  const type = chartType.toLowerCase();
+  if (DATA_CHART_TYPES.has(type)) return "data-chart";
+  if (VISUALIZATION_TYPES.has(type)) return "visualization";
+  if (DIAGRAM_TYPES.has(type)) return "diagram";
+  return null;
+}
+function isExtendedChartType(chartType) {
+  return EXTENDED_CHART_TYPES.has(chartType.toLowerCase());
+}
+function getAllChartTypes() {
+  return [
+    ...DATA_CHART_TYPES,
+    ...VISUALIZATION_TYPES,
+    ...DIAGRAM_TYPES
+  ];
+}
 function parseDgmo(content) {
   const chartType = parseDgmoChartType(content);
   if (!chartType) {
-    return { diagnostics: parseD3(content).diagnostics };
+    return { diagnostics: parseVisualization(content).diagnostics };
   }
   const directParser = PARSE_DISPATCH.get(chartType);
   if (directParser) return { diagnostics: directParser(content).diagnostics };
-  if (STANDARD_CHART_TYPES.has(chartType)) {
+  if (STANDARD_CHART_TYPES2.has(chartType)) {
     return { diagnostics: parseChart(content).diagnostics };
   }
   if (ECHART_TYPES.has(chartType)) {
-    return { diagnostics: parseEChart(content).diagnostics };
+    return { diagnostics: parseExtendedChart(content).diagnostics };
   }
-  return { diagnostics: parseD3(content).diagnostics };
+  return { diagnostics: parseVisualization(content).diagnostics };
 }
-var DGMO_CHART_TYPE_MAP, STANDARD_CHART_TYPES, ECHART_TYPES, PARSE_DISPATCH;
+var DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -7412,44 +7502,53 @@ var init_dgmo_router = __esm({
     init_parser7();
     init_parser8();
     init_parser9();
-    DGMO_CHART_TYPE_MAP = {
-      // Standard charts (via ECharts)
-      bar: "echart",
-      line: "echart",
-      "multi-line": "echart",
-      area: "echart",
-      pie: "echart",
-      doughnut: "echart",
-      radar: "echart",
-      "polar-area": "echart",
-      "bar-stacked": "echart",
-      // ECharts
-      scatter: "echart",
-      sankey: "echart",
-      chord: "echart",
-      function: "echart",
-      heatmap: "echart",
-      funnel: "echart",
-      // D3
-      slope: "d3",
-      wordcloud: "d3",
-      arc: "d3",
-      timeline: "d3",
-      venn: "d3",
-      quadrant: "d3",
-      sequence: "d3",
-      flowchart: "d3",
-      class: "d3",
-      er: "d3",
-      org: "d3",
-      kanban: "d3",
-      c4: "d3",
-      "initiative-status": "d3",
-      state: "d3",
-      sitemap: "d3",
-      infra: "d3"
-    };
-    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
+    DATA_CHART_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "pie",
+      "doughnut",
+      "area",
+      "polar-area",
+      "radar",
+      "bar-stacked",
+      "multi-line",
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    VISUALIZATION_TYPES = /* @__PURE__ */ new Set([
+      "slope",
+      "wordcloud",
+      "arc",
+      "timeline",
+      "venn",
+      "quadrant"
+    ]);
+    DIAGRAM_TYPES = /* @__PURE__ */ new Set([
+      "sequence",
+      "flowchart",
+      "class",
+      "er",
+      "org",
+      "kanban",
+      "c4",
+      "initiative-status",
+      "state",
+      "sitemap",
+      "infra"
+    ]);
+    EXTENDED_CHART_TYPES = /* @__PURE__ */ new Set([
+      "scatter",
+      "sankey",
+      "chord",
+      "function",
+      "heatmap",
+      "funnel"
+    ]);
+    STANDARD_CHART_TYPES2 = /* @__PURE__ */ new Set([
       "bar",
       "line",
       "multi-line",
@@ -7580,14 +7679,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,
@@ -7598,9 +7697,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;
@@ -7630,7 +7729,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 {
@@ -7639,7 +7738,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);
@@ -8169,7 +8268,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;
@@ -8187,22 +8286,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;
@@ -8220,7 +8319,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
     height: finalHeight
   };
 }
-var import_d3_hierarchy, 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 import_d3_hierarchy, 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";
@@ -8242,17 +8341,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;
   }
 });
 
@@ -8349,11 +8448,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;
@@ -8508,56 +8607,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;
         }
       }
     }
@@ -8596,7 +8699,7 @@ function renderOrgForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection, 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 d3Selection, 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";
@@ -8605,6 +8708,7 @@ var init_renderer = __esm({
     init_color_utils();
     init_parser4();
     init_layout();
+    init_legend_constants();
     DIAGRAM_PADDING = 20;
     MAX_SCALE = 3;
     TITLE_HEIGHT = 30;
@@ -8624,22 +8728,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";
   }
 });
 
@@ -9063,23 +9152,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,
@@ -9273,25 +9356,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);
@@ -9432,7 +9516,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);
   }
 }
@@ -9444,49 +9531,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;
       }
     }
   }
@@ -9532,7 +9619,7 @@ async function renderSitemapForExport(content, theme, palette) {
   const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
   return injectBranding2(svgHtml, brandColor);
 }
-var d3Selection2, d3Shape, 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 d3Selection2, d3Shape, 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";
@@ -9540,6 +9627,7 @@ var init_renderer2 = __esm({
     d3Shape = __toESM(require("d3-shape"), 1);
     init_fonts();
     init_color_utils();
+    init_legend_constants();
     DIAGRAM_PADDING2 = 20;
     MAX_SCALE2 = 3;
     TITLE_HEIGHT2 = 30;
@@ -9561,23 +9649,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";
   }
 });
 
@@ -9779,8 +9852,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 = [];
@@ -9837,7 +9909,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) {
@@ -9850,42 +9923,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 {
@@ -9972,7 +10048,7 @@ function renderKanbanForExport(content, theme, palette) {
   const svgEl = container.querySelector("svg");
   return svgEl?.outerHTML ?? "";
 }
-var d3Selection3, 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 d3Selection3, 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";
@@ -9982,6 +10058,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;
@@ -10003,10 +10080,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;
   }
 });
 
@@ -10720,32 +10793,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;
     }
   }
 }
@@ -10794,6 +10866,7 @@ var init_renderer5 = __esm({
     init_color_utils();
     init_palettes();
     init_tag_groups();
+    init_legend_constants();
     init_parser3();
     init_layout4();
     DIAGRAM_PADDING5 = 20;
@@ -10952,12 +11025,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 = [
@@ -11892,31 +11967,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;
@@ -12036,18 +12107,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;
@@ -12057,7 +12117,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;
   }
@@ -12363,18 +12423,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;
@@ -12384,7 +12433,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;
   }
@@ -12739,21 +12788,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;
@@ -12763,7 +12798,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;
   }
@@ -13008,18 +13043,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;
@@ -13029,13 +13053,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 import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, 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 import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, 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";
@@ -13055,16 +13079,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"]);
   }
 });
@@ -13140,8 +13164,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);
@@ -13213,6 +13243,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);
     }
@@ -13265,36 +13309,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) {
@@ -13582,33 +13602,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;
       }
     }
   }
@@ -13620,8 +13654,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);
@@ -13692,6 +13732,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);
     }
@@ -13777,8 +13831,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) {
@@ -13880,7 +13938,7 @@ function renderC4DeploymentForExport(content, theme, palette) {
     document.body.removeChild(el);
   }
 }
-var d3Selection7, d3Shape5, 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 d3Selection7, d3Shape5, 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";
@@ -13891,6 +13949,7 @@ var init_renderer7 = __esm({
     init_inline_markdown();
     init_parser6();
     init_layout6();
+    init_legend_constants();
     DIAGRAM_PADDING7 = 20;
     MAX_SCALE6 = 3;
     TITLE_HEIGHT4 = 30;
@@ -13923,16 +13982,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);
   }
 });
@@ -14788,23 +14837,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) => {
@@ -16401,16 +16433,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
     });
   }
@@ -16426,123 +16458,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 {
@@ -16606,10 +16587,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);
     }
   }
 }
@@ -16620,7 +16601,7 @@ function parseAndLayoutInfra(content) {
   const layout = layoutInfra(computed);
   return { parsed, computed, layout };
 }
-var d3Selection9, d3Shape7, 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 d3Selection9, d3Shape7, 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";
@@ -16633,6 +16614,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;
@@ -16648,21 +16630,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";
@@ -17682,9 +17650,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);
@@ -17766,7 +17733,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;
@@ -17824,13 +17793,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)
@@ -17839,38 +17808,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) {
@@ -18391,7 +18364,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var d3Selection11, 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 d3Selection11, 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";
@@ -18402,6 +18375,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;
@@ -18423,18 +18397,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);
@@ -18522,7 +18484,7 @@ function addDurationToDate(startDate, amount, unit) {
     return `${endYear}-${endMonth}-${endDay}`;
   }
 }
-function parseD3(content, palette) {
+function parseVisualization(content, palette) {
   const result = {
     type: null,
     title: null,
@@ -20042,9 +20004,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;
@@ -20151,9 +20113,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;
@@ -20290,9 +20252,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;
@@ -20436,9 +20398,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;
@@ -20569,17 +20531,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");
@@ -20612,6 +20574,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
@@ -20622,13 +20585,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;
@@ -20718,7 +20685,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;
@@ -21476,7 +21443,7 @@ function finalizeSvgExport(container, theme, palette, options) {
   }
   return svgHtml;
 }
-async function renderD3ForExport(content, theme, palette, orgExportState, options) {
+async function renderForExport(content, theme, palette, orgExportState, options) {
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
   if (detectedType === "org") {
@@ -21489,7 +21456,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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(
@@ -21518,7 +21485,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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(
@@ -21546,7 +21513,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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") {
@@ -21578,7 +21545,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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") {
@@ -21615,7 +21582,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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") {
@@ -21638,16 +21605,16 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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));
@@ -21667,7 +21634,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     renderState2(container2, stateParsed, layout, effectivePalette2, theme === "dark", void 0, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
-  const parsed = parseD3(content, palette);
+  const parsed = parseVisualization(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
     const looksLikeSequence2 = /->|~>|<-/.test(content);
     if (!looksLikeSequence2) return "";
@@ -21691,7 +21658,8 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     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);
@@ -21705,7 +21673,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
       isDark,
       void 0,
       dims,
-      orgExportState?.activeTagGroup,
+      orgExportState?.activeTagGroup ?? options?.tagGroup,
       orgExportState?.swimlaneTagGroup
     );
   } else if (parsed.type === "venn") {
@@ -21734,6 +21702,7 @@ var init_d3 = __esm({
     init_diagnostics();
     init_parsing();
     init_tag_groups();
+    init_legend_constants();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
       max: 0,
@@ -21877,20 +21846,18 @@ var init_d3 = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
   INFRA_BEHAVIOR_KEYS: () => INFRA_BEHAVIOR_KEYS,
   RULE_COUNT: () => RULE_COUNT,
-  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
   addDurationToDate: () => addDurationToDate,
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
   boldPalette: () => boldPalette,
-  buildEChartsOption: () => buildEChartsOption,
-  buildEChartsOptionFromChart: () => buildEChartsOptionFromChart,
+  buildExtendedChartOption: () => buildExtendedChartOption,
   buildMermaidQuadrant: () => buildMermaidQuadrant,
   buildMermaidThemeVars: () => buildMermaidThemeVars,
   buildNoteMessageMap: () => buildNoteMessageMap,
   buildRenderSequence: () => buildRenderSequence,
+  buildSimpleChartOption: () => buildSimpleChartOption,
   buildThemeCSS: () => buildThemeCSS,
   catppuccinPalette: () => catppuccinPalette,
   collapseInitiativeStatus: () => collapseInitiativeStatus,
@@ -21910,8 +21877,8 @@ __export(index_exports, {
   formatDateLabel: () => formatDateLabel,
   formatDgmoError: () => formatDgmoError,
   getAvailablePalettes: () => getAvailablePalettes,
-  getDgmoFramework: () => getDgmoFramework,
   getPalette: () => getPalette,
+  getRenderCategory: () => getRenderCategory,
   getSeriesColors: () => getSeriesColors,
   groupMessagesBySection: () => groupMessagesBySection,
   gruvboxPalette: () => gruvboxPalette,
@@ -21922,6 +21889,7 @@ __export(index_exports, {
   inferRoles: () => inferRoles,
   injectBranding: () => injectBranding,
   isArchiveColumn: () => isArchiveColumn,
+  isExtendedChartType: () => isExtendedChartType,
   isSequenceBlock: () => isSequenceBlock,
   isSequenceNote: () => isSequenceNote,
   isValidHex: () => isValidHex,
@@ -21953,11 +21921,10 @@ __export(index_exports, {
   parseC4: () => parseC4,
   parseChart: () => parseChart,
   parseClassDiagram: () => parseClassDiagram,
-  parseD3: () => parseD3,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType,
-  parseEChart: () => parseEChart,
   parseERDiagram: () => parseERDiagram,
+  parseExtendedChart: () => parseExtendedChart,
   parseFlowchart: () => parseFlowchart,
   parseInfra: () => parseInfra,
   parseInitiativeStatus: () => parseInitiativeStatus,
@@ -21969,6 +21936,7 @@ __export(index_exports, {
   parseSitemap: () => parseSitemap,
   parseState: () => parseState,
   parseTimelineDate: () => parseTimelineDate,
+  parseVisualization: () => parseVisualization,
   registerPalette: () => registerPalette,
   render: () => render,
   renderArcDiagram: () => renderArcDiagram,
@@ -21981,12 +21949,12 @@ __export(index_exports, {
   renderC4DeploymentForExport: () => renderC4DeploymentForExport,
   renderClassDiagram: () => renderClassDiagram,
   renderClassDiagramForExport: () => renderClassDiagramForExport,
-  renderD3ForExport: () => renderD3ForExport,
-  renderEChartsForExport: () => renderEChartsForExport,
   renderERDiagram: () => renderERDiagram,
   renderERDiagramForExport: () => renderERDiagramForExport,
+  renderExtendedChartForExport: () => renderExtendedChartForExport,
   renderFlowchart: () => renderFlowchart,
   renderFlowchartForExport: () => renderFlowchartForExport,
+  renderForExport: () => renderForExport,
   renderInfra: () => renderInfra,
   renderInitiativeStatus: () => renderInitiativeStatus,
   renderInitiativeStatusForExport: () => renderInitiativeStatusForExport,
@@ -22042,17 +22010,17 @@ async function render(content, options) {
   const branding = options?.branding ?? true;
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
   const chartType = parseDgmoChartType(content);
-  const framework = chartType ? getDgmoFramework(chartType) : null;
-  if (framework === "echart") {
-    return renderEChartsForExport(content, theme, paletteColors, { branding });
+  const category = chartType ? getRenderCategory(chartType) : null;
+  if (category === "data-chart") {
+    return renderExtendedChartForExport(content, theme, paletteColors, { branding });
   }
   await ensureDom();
-  return renderD3ForExport(content, theme, paletteColors, void 0, {
+  return renderForExport(content, theme, paletteColors, void 0, {
     branding,
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
-    scenario: options?.scenario
+    tagGroup: options?.tagGroup
   });
 }
 
@@ -22826,20 +22794,18 @@ function decodeDiagramUrl(hash) {
 init_branding();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DGMO_CHART_TYPE_MAP,
   INFRA_BEHAVIOR_KEYS,
   RULE_COUNT,
-  STANDARD_CHART_TYPES,
   addDurationToDate,
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
-  buildEChartsOption,
-  buildEChartsOptionFromChart,
+  buildExtendedChartOption,
   buildMermaidQuadrant,
   buildMermaidThemeVars,
   buildNoteMessageMap,
   buildRenderSequence,
+  buildSimpleChartOption,
   buildThemeCSS,
   catppuccinPalette,
   collapseInitiativeStatus,
@@ -22859,8 +22825,8 @@ init_branding();
   formatDateLabel,
   formatDgmoError,
   getAvailablePalettes,
-  getDgmoFramework,
   getPalette,
+  getRenderCategory,
   getSeriesColors,
   groupMessagesBySection,
   gruvboxPalette,
@@ -22871,6 +22837,7 @@ init_branding();
   inferRoles,
   injectBranding,
   isArchiveColumn,
+  isExtendedChartType,
   isSequenceBlock,
   isSequenceNote,
   isValidHex,
@@ -22902,11 +22869,10 @@ init_branding();
   parseC4,
   parseChart,
   parseClassDiagram,
-  parseD3,
   parseDgmo,
   parseDgmoChartType,
-  parseEChart,
   parseERDiagram,
+  parseExtendedChart,
   parseFlowchart,
   parseInfra,
   parseInitiativeStatus,
@@ -22918,6 +22884,7 @@ init_branding();
   parseSitemap,
   parseState,
   parseTimelineDate,
+  parseVisualization,
   registerPalette,
   render,
   renderArcDiagram,
@@ -22930,12 +22897,12 @@ init_branding();
   renderC4DeploymentForExport,
   renderClassDiagram,
   renderClassDiagramForExport,
-  renderD3ForExport,
-  renderEChartsForExport,
   renderERDiagram,
   renderERDiagramForExport,
+  renderExtendedChartForExport,
   renderFlowchart,
   renderFlowchartForExport,
+  renderForExport,
   renderInfra,
   renderInitiativeStatus,
   renderInitiativeStatusForExport,