@diagrammo/dgmo 0.8.8 → 0.8.10

package/dist/index.cjs

@@ -1923,6 +1923,493 @@ var init_legend_constants = __esm({
   }
 });
 
+// src/utils/legend-layout.ts
+function pillWidth(name) {
+  return measureLegendText(name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+}
+function entriesWidth(entries) {
+  let w = 0;
+  for (const e of entries) {
+    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+function entryWidth(value) {
+  return LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+}
+function controlWidth(control) {
+  let w = CONTROL_PILL_PAD;
+  if (control.label) {
+    w += measureLegendText(control.label, CONTROL_FONT_SIZE);
+    if (control.icon) w += CONTROL_ICON_GAP;
+  }
+  if (control.icon) w += 14;
+  if (control.children) {
+    for (const child of control.children) {
+      w += measureLegendText(child.label, CONTROL_FONT_SIZE) + 12;
+    }
+  }
+  return w;
+}
+function capsuleWidth(name, entries, containerWidth, addonWidth = 0) {
+  const pw = pillWidth(name);
+  const maxCapsuleW = containerWidth;
+  const baseW = LEGEND_CAPSULE_PAD * 2 + pw + 4 + addonWidth;
+  const ew = entriesWidth(entries);
+  const singleRowW = baseW + ew;
+  if (singleRowW <= maxCapsuleW) {
+    return {
+      width: singleRowW,
+      entryRows: 1,
+      moreCount: 0,
+      visibleEntries: entries.length
+    };
+  }
+  const rowWidth = maxCapsuleW - LEGEND_CAPSULE_PAD * 2;
+  let row = 1;
+  let rowX = pw + 4;
+  let visible = 0;
+  for (let i = 0; i < entries.length; i++) {
+    const ew2 = entryWidth(entries[i].value);
+    if (rowX + ew2 > rowWidth && rowX > pw + 4) {
+      row++;
+      rowX = 0;
+      if (row > LEGEND_MAX_ENTRY_ROWS) {
+        return {
+          width: maxCapsuleW,
+          entryRows: LEGEND_MAX_ENTRY_ROWS,
+          moreCount: entries.length - visible,
+          visibleEntries: visible
+        };
+      }
+    }
+    rowX += ew2;
+    visible++;
+  }
+  return {
+    width: maxCapsuleW,
+    entryRows: row,
+    moreCount: 0,
+    visibleEntries: entries.length
+  };
+}
+function computeLegendLayout(config, state, containerWidth) {
+  const { groups, controls: configControls, mode } = config;
+  const isExport = mode === "inline";
+  const activeGroupName = state.activeGroup?.toLowerCase() ?? null;
+  if (isExport && !activeGroupName) {
+    return {
+      height: 0,
+      width: 0,
+      rows: [],
+      controls: [],
+      pills: [],
+      activeCapsule: void 0
+    };
+  }
+  const visibleGroups = config.showEmptyGroups ? groups : groups.filter((g) => g.entries.length > 0);
+  if (visibleGroups.length === 0 && (!configControls || configControls.length === 0)) {
+    return {
+      height: 0,
+      width: 0,
+      rows: [],
+      controls: [],
+      pills: [],
+      activeCapsule: void 0
+    };
+  }
+  const controlLayouts = [];
+  let totalControlsW = 0;
+  if (configControls && !isExport) {
+    for (const ctrl of configControls) {
+      const w = controlWidth(ctrl);
+      controlLayouts.push({
+        id: ctrl.id,
+        x: 0,
+        // positioned later
+        y: 0,
+        width: w,
+        height: LEGEND_HEIGHT,
+        icon: ctrl.icon,
+        label: ctrl.label,
+        exportBehavior: ctrl.exportBehavior,
+        children: ctrl.children?.map((c) => ({
+          id: c.id,
+          label: c.label,
+          x: 0,
+          y: 0,
+          width: measureLegendText(c.label, CONTROL_FONT_SIZE) + 12,
+          isActive: c.isActive
+        }))
+      });
+      totalControlsW += w + CONTROL_GAP;
+    }
+    if (totalControlsW > 0) totalControlsW -= CONTROL_GAP;
+  } else if (configControls && isExport) {
+    for (const ctrl of configControls) {
+      if (ctrl.exportBehavior === "strip") continue;
+      const w = controlWidth(ctrl);
+      controlLayouts.push({
+        id: ctrl.id,
+        x: 0,
+        y: 0,
+        width: w,
+        height: LEGEND_HEIGHT,
+        icon: ctrl.icon,
+        label: ctrl.label,
+        exportBehavior: ctrl.exportBehavior,
+        children: ctrl.children?.map((c) => ({
+          id: c.id,
+          label: c.label,
+          x: 0,
+          y: 0,
+          width: measureLegendText(c.label, CONTROL_FONT_SIZE) + 12,
+          isActive: c.isActive
+        }))
+      });
+      totalControlsW += w + CONTROL_GAP;
+    }
+    if (totalControlsW > 0) totalControlsW -= CONTROL_GAP;
+  }
+  const controlsSpace = totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0;
+  const groupAvailW = containerWidth - controlsSpace;
+  const pills = [];
+  let activeCapsule;
+  for (const g of visibleGroups) {
+    const isActive = activeGroupName === g.name.toLowerCase();
+    if (isExport && !isActive) continue;
+    if (isActive) {
+      activeCapsule = buildCapsuleLayout(
+        g,
+        containerWidth,
+        config.capsulePillAddonWidth ?? 0
+      );
+    } else {
+      const pw = pillWidth(g.name);
+      pills.push({
+        groupName: g.name,
+        x: 0,
+        y: 0,
+        width: pw,
+        height: LEGEND_HEIGHT,
+        isActive: false
+      });
+    }
+  }
+  const rows = layoutRows(
+    activeCapsule,
+    pills,
+    controlLayouts,
+    groupAvailW,
+    containerWidth,
+    totalControlsW
+  );
+  const height = rows.length * LEGEND_HEIGHT;
+  const width = containerWidth;
+  return {
+    height,
+    width,
+    rows,
+    activeCapsule,
+    controls: controlLayouts,
+    pills
+  };
+}
+function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
+  const pw = pillWidth(group.name);
+  const info = capsuleWidth(
+    group.name,
+    group.entries,
+    containerWidth,
+    addonWidth
+  );
+  const pill = {
+    groupName: group.name,
+    x: LEGEND_CAPSULE_PAD,
+    y: LEGEND_CAPSULE_PAD,
+    width: pw,
+    height: LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2,
+    isActive: true
+  };
+  const entries = [];
+  let ex = LEGEND_CAPSULE_PAD + pw + 4 + addonWidth;
+  let ey = 0;
+  let rowX = ex;
+  const maxRowW = containerWidth - LEGEND_CAPSULE_PAD * 2;
+  let currentRow = 0;
+  for (let i = 0; i < info.visibleEntries; i++) {
+    const entry = group.entries[i];
+    const ew = entryWidth(entry.value);
+    if (rowX + ew > maxRowW && rowX > ex && i > 0) {
+      currentRow++;
+      rowX = 0;
+      ey = currentRow * LEGEND_HEIGHT;
+      if (currentRow === 0) ex = LEGEND_CAPSULE_PAD + pw + 4;
+    }
+    const dotCx = rowX + LEGEND_DOT_R;
+    const dotCy = ey + LEGEND_HEIGHT / 2;
+    const textX = rowX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+    const textY = ey + LEGEND_HEIGHT / 2;
+    entries.push({
+      value: entry.value,
+      color: entry.color,
+      x: rowX,
+      y: ey,
+      dotCx,
+      dotCy,
+      textX,
+      textY
+    });
+    rowX += ew;
+  }
+  const totalRows = info.entryRows;
+  const capsuleH = totalRows * LEGEND_HEIGHT;
+  return {
+    groupName: group.name,
+    x: 0,
+    y: 0,
+    width: info.width,
+    height: capsuleH,
+    pill,
+    entries,
+    moreCount: info.moreCount > 0 ? info.moreCount : void 0,
+    addonX: addonWidth > 0 ? LEGEND_CAPSULE_PAD + pw + 4 : void 0
+  };
+}
+function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW) {
+  const rows = [];
+  const groupItems = [];
+  if (activeCapsule) groupItems.push(activeCapsule);
+  groupItems.push(...pills);
+  let currentRowItems = [];
+  let currentRowW = 0;
+  let rowY = 0;
+  for (const item of groupItems) {
+    const itemW = item.width + LEGEND_GROUP_GAP;
+    if (currentRowW + item.width > groupAvailW && currentRowItems.length > 0) {
+      centerRowItems(currentRowItems, containerWidth, totalControlsW);
+      rows.push({ y: rowY, items: currentRowItems });
+      rowY += LEGEND_HEIGHT;
+      currentRowItems = [];
+      currentRowW = 0;
+    }
+    item.x = currentRowW;
+    item.y = rowY;
+    currentRowItems.push(item);
+    currentRowW += itemW;
+  }
+  if (controls.length > 0) {
+    let cx = containerWidth;
+    for (let i = controls.length - 1; i >= 0; i--) {
+      cx -= controls[i].width;
+      controls[i].x = cx;
+      controls[i].y = 0;
+      cx -= CONTROL_GAP;
+    }
+    if (rows.length > 0) {
+      rows[0].items.push(...controls);
+    } else if (currentRowItems.length > 0) {
+      currentRowItems.push(...controls);
+    } else {
+      currentRowItems.push(...controls);
+    }
+  }
+  if (currentRowItems.length > 0) {
+    centerRowItems(currentRowItems, containerWidth, totalControlsW);
+    rows.push({ y: rowY, items: currentRowItems });
+  }
+  if (rows.length === 0) {
+    rows.push({ y: 0, items: [] });
+  }
+  return rows;
+}
+function centerRowItems(items, containerWidth, totalControlsW) {
+  const groupItems = items.filter((it) => "groupName" in it);
+  if (groupItems.length === 0) return;
+  const totalGroupW = groupItems.reduce((s, it) => s + it.width, 0) + (groupItems.length - 1) * LEGEND_GROUP_GAP;
+  const availW = containerWidth - (totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0);
+  const offset = Math.max(0, (availW - totalGroupW) / 2);
+  let x = offset;
+  for (const item of groupItems) {
+    item.x = x;
+    x += item.width + LEGEND_GROUP_GAP;
+  }
+}
+function getLegendReservedHeight(config, state, containerWidth) {
+  const layout = computeLegendLayout(config, state, containerWidth);
+  return layout.height;
+}
+var LEGEND_MAX_ENTRY_ROWS, CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
+var init_legend_layout = __esm({
+  "src/utils/legend-layout.ts"() {
+    "use strict";
+    init_legend_constants();
+    LEGEND_MAX_ENTRY_ROWS = 3;
+    CONTROL_PILL_PAD = 16;
+    CONTROL_FONT_SIZE = 11;
+    CONTROL_ICON_GAP = 4;
+    CONTROL_GAP = 8;
+  }
+});
+
+// src/utils/legend-d3.ts
+function renderLegendD3(container, config, state, palette, isDark, callbacks, containerWidth) {
+  const width = containerWidth ?? parseFloat(container.attr("width") || "800");
+  let currentState = { ...state };
+  let currentLayout;
+  const legendG = container.append("g").attr("class", "dgmo-legend");
+  function render2() {
+    currentLayout = computeLegendLayout(config, currentState, width);
+    legendG.selectAll("*").remove();
+    if (currentLayout.height === 0) return;
+    if (currentState.activeGroup) {
+      legendG.attr(
+        "data-legend-active",
+        currentState.activeGroup.toLowerCase()
+      );
+    } else {
+      legendG.attr("data-legend-active", null);
+    }
+    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+    const pillBorder = mix(palette.textMuted, palette.bg, 50);
+    if (currentLayout.activeCapsule) {
+      renderCapsule(
+        legendG,
+        currentLayout.activeCapsule,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        callbacks
+      );
+    }
+    for (const pill of currentLayout.pills) {
+      renderPill(legendG, pill, palette, groupBg, callbacks);
+    }
+    for (const ctrl of currentLayout.controls) {
+      renderControl(
+        legendG,
+        ctrl,
+        palette,
+        groupBg,
+        pillBorder,
+        isDark,
+        config.controls
+      );
+    }
+  }
+  render2();
+  return {
+    setState(newState) {
+      currentState = { ...newState };
+      render2();
+    },
+    destroy() {
+      legendG.remove();
+    },
+    getHeight() {
+      return currentLayout?.height ?? 0;
+    },
+    getLayout() {
+      return currentLayout;
+    }
+  };
+}
+function renderCapsule(parent, capsule, palette, groupBg, pillBorder, _isDark, callbacks) {
+  const g = parent.append("g").attr("transform", `translate(${capsule.x},${capsule.y})`).attr("data-legend-group", capsule.groupName.toLowerCase()).style("cursor", "pointer");
+  g.append("rect").attr("width", capsule.width).attr("height", capsule.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+  const pill = capsule.pill;
+  g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+  g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+  g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.text).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(capsule.groupName);
+  for (const entry of capsule.entries) {
+    const entryG = g.append("g").attr("data-legend-entry", entry.value.toLowerCase()).attr("data-series-name", entry.value).style("cursor", "pointer");
+    entryG.append("circle").attr("cx", entry.dotCx).attr("cy", entry.dotCy).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
+    entryG.append("text").attr("x", entry.textX).attr("y", entry.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(entry.value);
+    if (callbacks?.onEntryHover) {
+      const groupName = capsule.groupName;
+      const entryValue = entry.value;
+      const onHover = callbacks.onEntryHover;
+      entryG.on("mouseenter", () => onHover(groupName, entryValue)).on("mouseleave", () => onHover(groupName, null));
+    }
+  }
+  if (capsule.moreCount) {
+    const lastEntry = capsule.entries[capsule.entries.length - 1];
+    const moreX = lastEntry ? lastEntry.textX + measureLegendText(lastEntry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_DOT_GAP * 2 : pill.x + pill.width + 8;
+    const moreY = lastEntry?.textY ?? LEGEND_HEIGHT / 2;
+    g.append("text").attr("x", moreX).attr("y", moreY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("font-style", "italic").attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(`+${capsule.moreCount} more`);
+  }
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = capsule.groupName;
+    g.on("click", () => cb(name));
+  }
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(capsule.groupName, g, true);
+  }
+}
+function renderPill(parent, pill, palette, groupBg, callbacks) {
+  const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", pill.groupName.toLowerCase()).style("cursor", "pointer");
+  g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
+  g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
+  if (callbacks?.onGroupToggle) {
+    const cb = callbacks.onGroupToggle;
+    const name = pill.groupName;
+    g.on("click", () => cb(name));
+  }
+  if (callbacks?.onGroupRendered) {
+    callbacks.onGroupRendered(pill.groupName, g, false);
+  }
+}
+function renderControl(parent, ctrl, palette, _groupBg, pillBorder, _isDark, configControls) {
+  const g = parent.append("g").attr("transform", `translate(${ctrl.x},${ctrl.y})`).attr("data-legend-control", ctrl.id).style("cursor", "pointer");
+  if (ctrl.exportBehavior === "strip") {
+    g.attr("data-export-ignore", "true");
+  }
+  g.append("rect").attr("width", ctrl.width).attr("height", ctrl.height).attr("rx", ctrl.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+  let textX = ctrl.width / 2;
+  if (ctrl.icon && ctrl.label) {
+    const iconG = g.append("g").attr("transform", `translate(8,${(ctrl.height - 14) / 2})`);
+    iconG.html(ctrl.icon);
+    textX = 8 + 14 + LEGEND_ENTRY_DOT_GAP + measureLegendText(ctrl.label, LEGEND_PILL_FONT_SIZE) / 2;
+  }
+  if (ctrl.label) {
+    g.append("text").attr("x", textX).attr("y", ctrl.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(ctrl.label);
+  }
+  if (ctrl.children) {
+    let cx = ctrl.width + 4;
+    for (const child of ctrl.children) {
+      const childG = g.append("g").attr("transform", `translate(${cx},0)`).style("cursor", "pointer");
+      childG.append("rect").attr("width", child.width).attr("height", ctrl.height).attr("rx", ctrl.height / 2).attr(
+        "fill",
+        child.isActive ? palette.primary ?? palette.text : "none"
+      ).attr("stroke", pillBorder).attr("stroke-width", 0.75);
+      childG.append("text").attr("x", child.width / 2).attr("y", ctrl.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", child.isActive ? palette.bg : palette.textMuted).attr("font-family", FONT_FAMILY).text(child.label);
+      const configCtrl2 = configControls?.find((c) => c.id === ctrl.id);
+      const configChild = configCtrl2?.children?.find((c) => c.id === child.id);
+      if (configChild?.onClick) {
+        const onClick = configChild.onClick;
+        childG.on("click", () => onClick());
+      }
+      cx += child.width + 4;
+    }
+  }
+  const configCtrl = configControls?.find((c) => c.id === ctrl.id);
+  if (configCtrl?.onClick) {
+    const onClick = configCtrl.onClick;
+    g.on("click", () => onClick());
+  }
+}
+var init_legend_d3 = __esm({
+  "src/utils/legend-d3.ts"() {
+    "use strict";
+    init_legend_constants();
+    init_legend_layout();
+    init_color_utils();
+    init_fonts();
+  }
+});
+
 // src/utils/title-constants.ts
 var TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y, TITLE_OFFSET;
 var init_title_constants = __esm({
@@ -4852,10 +5339,10 @@ var init_chart = __esm({
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function pillWidth(name) {
+function pillWidth2(name) {
   return measureLegendText(name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
 }
-function entriesWidth(entries) {
+function entriesWidth2(entries) {
   let w = 0;
   for (const e of entries) {
     w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
@@ -4863,9 +5350,9 @@ function entriesWidth(entries) {
   return w;
 }
 function groupTotalWidth(name, entries, isActive) {
-  const pw = pillWidth(name);
+  const pw = pillWidth2(name);
   if (!isActive) return pw;
-  return LEGEND_CAPSULE_PAD * 2 + pw + 4 + entriesWidth(entries);
+  return LEGEND_CAPSULE_PAD * 2 + pw + 4 + entriesWidth2(entries);
 }
 function renderLegendSvg(groups, options) {
   if (groups.length === 0) return { svg: "", height: 0, width: 0 };
@@ -4873,7 +5360,7 @@ function renderLegendSvg(groups, options) {
   const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
   const items = groups.filter((g) => g.entries.length > 0).map((g) => {
     const isActive = !!activeGroup && g.name.toLowerCase() === activeGroup.toLowerCase();
-    const pw = pillWidth(g.name);
+    const pw = pillWidth2(g.name);
     const tw = groupTotalWidth(g.name, g.entries, isActive);
     return { group: g, isActive, pillWidth: pw, totalWidth: tw };
   });
@@ -4927,6 +5414,19 @@ function renderLegendSvg(groups, options) {
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return { svg, height: LEGEND_HEIGHT, width: totalWidth };
 }
+function renderLegendSvgFromConfig(config, state, palette, containerWidth) {
+  return renderLegendSvg(config.groups, {
+    palette: {
+      bg: palette.bg,
+      surface: palette.surface,
+      text: palette.text,
+      textMuted: palette.textMuted
+    },
+    isDark: palette.isDark,
+    containerWidth,
+    activeGroup: state.activeGroup
+  });
+}
 var init_legend_svg = __esm({
   "src/utils/legend-svg.ts"() {
     "use strict";
@@ -5355,52 +5855,26 @@ function buildChartCommons(parsed, palette, isDark) {
       fontFamily: FONT_FAMILY
     }
   } : void 0;
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text }
-  };
   return {
     textColor,
     axisLineColor,
     splitLineColor,
     gridOpacity,
     colors,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   };
 }
 function buildExtendedChartOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
-  const {
-    textColor,
-    axisLineColor,
-    gridOpacity,
-    colors,
-    titleConfig,
-    tooltipTheme
-  } = buildChartCommons(parsed, palette, isDark);
+  const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
-    return buildSankeyOption(
-      parsed,
-      textColor,
-      colors,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildSankeyOption(parsed, textColor, colors, titleConfig);
   }
   if (parsed.type === "chord") {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildChordOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildChordOption(parsed, textColor, colors, bg, titleConfig);
   }
   if (parsed.type === "function") {
     return buildFunctionOption(
@@ -5410,8 +5884,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
       axisLineColor,
       gridOpacity,
       colors,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
   if (parsed.type === "scatter") {
@@ -5424,20 +5897,12 @@ function buildExtendedChartOption(parsed, palette, isDark) {
       gridOpacity,
       colors,
       bg,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
   if (parsed.type === "funnel") {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildFunnelOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildFunnelOption(parsed, textColor, colors, bg, titleConfig);
   }
   return buildHeatmapOption(
     parsed,
@@ -5445,11 +5910,10 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     isDark,
     textColor,
     axisLineColor,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   );
 }
-function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+function buildSankeyOption(parsed, textColor, colors, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5468,17 +5932,15 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      show: false,
-      ...tooltipTheme
-    },
     series: [
       {
         type: "sankey",
         emphasis: {
           focus: "adjacency",
-          blurScope: "global"
+          blurScope: "global",
+          itemStyle: { opacity: 1 }
         },
+        blur: BLUR_DIM,
         nodeAlign: "left",
         nodeGap: 12,
         nodeWidth: 20,
@@ -5501,7 +5963,7 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     ]
   };
 }
-function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildChordOption(parsed, textColor, colors, bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5535,17 +5997,6 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipThe
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        if (p.data && p.data.source && p.data.target) {
-          return `${p.data.source} \u2192 ${p.data.target}: ${p.data.value}`;
-        }
-        return "";
-      }
-    },
     xAxis: { show: false },
     yAxis: { show: false },
     series: [
@@ -5604,11 +6055,13 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipThe
         },
         emphasis: {
           focus: "adjacency",
+          itemStyle: { opacity: 1 },
           lineStyle: {
             width: 5,
             opacity: 1
           }
-        }
+        },
+        blur: BLUR_DIM
       }
     ]
   };
@@ -5622,7 +6075,7 @@ function evaluateExpression(expr, x) {
     return NaN;
   }
 }
-function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig) {
   const xRange = parsed.xRange ?? { min: -10, max: 10 };
   const samples = 200;
   const step = (xRange.max - xRange.min) / samples;
@@ -5655,19 +6108,13 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpac
           opacity: 0.15
         }
       },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SELF,
+      blur: BLUR_DIM
     };
   });
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: {
-        type: "cross"
-      }
-    },
     legend: {
       data: (parsed.functions ?? []).map((fn) => fn.name),
       bottom: 10,
@@ -5916,7 +6363,7 @@ function dataToPixel(dataX, dataY, xMin, xMax, yMin, yMax, gridLeftPct, gridRigh
   const py = gridTopPx + (yMax - dataY) / (yMax - yMin) * plotHeight;
   return { px, py };
 }
-function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme) {
+function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, bg, titleConfig) {
   const points = parsed.scatterPoints ?? [];
   const defaultSize = 15;
   const hasCategories = points.some((p) => p.category !== void 0);
@@ -5932,11 +6379,9 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
   };
   const emphasisConfig = {
     focus: "self",
-    itemStyle: {
-      shadowBlur: 10,
-      shadowColor: "rgba(0, 0, 0, 0.3)"
-    }
+    itemStyle: { opacity: 1 }
   };
+  const blurConfig = BLUR_DIM;
   let series;
   if (hasCategories) {
     const categories2 = [
@@ -5967,7 +6412,8 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
           borderWidth: CHART_BORDER_WIDTH
         },
         label: labelConfig,
-        emphasis: emphasisConfig
+        emphasis: emphasisConfig,
+        blur: blurConfig
       };
     });
   } else {
@@ -5989,24 +6435,11 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
         type: "scatter",
         data,
         label: labelConfig,
-        emphasis: emphasisConfig
+        emphasis: emphasisConfig,
+        blur: blurConfig
       }
     ];
   }
-  const tooltip = {
-    trigger: "item",
-    ...tooltipTheme,
-    formatter: (params) => {
-      const p = params;
-      const xLabel = parsed.xlabel || "x";
-      const yLabel = parsed.ylabel || "y";
-      let html = `<strong>${p.name}</strong>`;
-      if (hasCategories) html += `<br/>${p.seriesName}`;
-      html += `<br/>${xLabel}: ${p.value[0]}<br/>${yLabel}: ${p.value[1]}`;
-      if (hasSize) html += `<br/>${parsed.sizelabel || "size"}: ${p.value[2]}`;
-      return html;
-    }
-  };
   const xValues = points.map((p) => p.x);
   const yValues = points.map((p) => p.y);
   const xMin = Math.min(...xValues);
@@ -6087,7 +6520,6 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
     ...CHART_BASE,
     title: titleConfig,
     ...legendConfig && { legend: legendConfig },
-    tooltip,
     grid: {
       left: `${gridLeft}%`,
       right: `${gridRight}%`,
@@ -6149,7 +6581,7 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
     ...graphic && { graphic }
   };
 }
-function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig, tooltipTheme) {
+function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig) {
   const bg = isDark ? palette.surface : palette.bg;
   const heatmapRows = parsed.heatmapRows ?? [];
   const columns = parsed.columns ?? [];
@@ -6167,16 +6599,6 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        const colName = columns[p.data[0]] ?? p.data[0];
-        const rowName = rowLabels[p.data[1]] ?? p.data[1];
-        return `${rowName} / ${colName}: <strong>${p.data[2]}</strong>`;
-      }
-    },
     grid: {
       left: "3%",
       right: "10%",
@@ -6246,19 +6668,15 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           fontWeight: "bold"
         },
         emphasis: {
-          ...EMPHASIS_SELF,
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: "rgba(0, 0, 0, 0.5)"
-          }
-        }
+          ...EMPHASIS_SELF
+        },
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildFunnelOption(parsed, textColor, colors, bg, titleConfig) {
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
-  const topValue = sorted.length > 0 ? sorted[0].value : 1;
   const data = sorted.map((d) => {
     const stroke2 = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
     return {
@@ -6293,25 +6711,6 @@ function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTh
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        const val = p.value;
-        const prev = prevValueMap.get(p.name) ?? val;
-        const isFirst = p.dataIndex === 0;
-        if (isFirst) return "";
-        const parts = [];
-        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-        parts.push(`Step drop-off: ${stepDrop}%`);
-        if (topValue > 0) {
-          const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          parts.push(`Overall drop-off: ${totalDrop}%`);
-        }
-        return parts.join("<br/>");
-      }
-    },
     series: [
       {
         type: "funnel",
@@ -6329,11 +6728,9 @@ function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTh
           lineStyle: { color: textColor, opacity: 0.3 }
         },
         emphasis: {
-          ...EMPHASIS_SELF,
-          label: {
-            fontSize: 15
-          }
+          ...EMPHASIS_SELF
         },
+        blur: BLUR_DIM,
         data
       },
       {
@@ -6427,8 +6824,7 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
     splitLineColor,
     gridOpacity,
     colors,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   } = buildChartCommons(parsed, palette, isDark);
   const bg = isDark ? palette.surface : palette.bg;
   switch (parsed.type) {
@@ -6442,7 +6838,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "bar-stacked":
@@ -6455,7 +6850,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "line":
@@ -6468,7 +6862,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         gridOpacity,
         colors,
         titleConfig,
-        tooltipTheme,
         chartWidth
       ) : buildLineOption(
         parsed,
@@ -6478,7 +6871,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         splitLineColor,
         gridOpacity,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "area":
@@ -6490,7 +6882,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         splitLineColor,
         gridOpacity,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "pie":
@@ -6500,7 +6891,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         false
       );
     case "doughnut":
@@ -6510,7 +6900,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         true
       );
     case "radar":
@@ -6520,8 +6909,7 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         isDark,
         textColor,
         gridOpacity,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
     case "polar-area":
       return buildPolarAreaOption(
@@ -6529,21 +6917,36 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         textColor,
         getSegmentColors(palette, parsed.data.length),
         bg,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
   }
 }
 function makeChartGrid(options) {
+  const left = options.yLabel ? "12%" : "3%";
   return {
-    left: options.yLabel ? "12%" : "3%",
+    left,
     right: "4%",
     bottom: options.hasLegend ? "15%" : options.xLabel ? "10%" : "3%",
     top: options.hasTitle ? "15%" : "5%",
     containLabel: true
   };
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
+function wrapLabel(text, maxChars) {
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    if (current && current.length + 1 + word.length > maxChars) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = current ? current + " " + word : word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines.join("\n");
+}
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -6558,7 +6961,11 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
       }
     };
   });
-  const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
+  const catLabels = isHorizontal ? labels.map((l) => wrapLabel(l, 12)) : labels;
+  const maxVisibleLen = Math.max(
+    ...catLabels.map((l) => Math.max(...l.split("\n").map((seg) => seg.length)))
+  );
+  const hCatGap = isHorizontal && yLabel ? Math.max(40, maxVisibleLen * 8 + 16) : void 0;
   const categoryAxis = makeGridAxis(
     "category",
     textColor,
@@ -6566,29 +6973,38 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     splitLineColor,
     gridOpacity,
     isHorizontal ? yLabel : xLabel,
-    labels,
+    catLabels,
     hCatGap,
     !isHorizontal ? chartWidth : void 0
   );
+  const hValueGap = isHorizontal && xLabel ? 40 : void 0;
   const valueAxis = makeGridAxis(
     "value",
     textColor,
     axisLineColor,
     splitLineColor,
     gridOpacity,
-    isHorizontal ? xLabel : yLabel
+    isHorizontal ? xLabel : yLabel,
+    void 0,
+    hValueGap
   );
   return {
     ...CHART_BASE,
     title: titleConfig,
-    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    grid: makeChartGrid({
+      xLabel,
+      yLabel,
+      hasTitle: !!parsed.title,
+      isHorizontal
+    }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series: [
       {
         type: "bar",
         data,
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
@@ -6605,7 +7021,7 @@ function buildMarkArea(eras, labels, textColor, defaultColor) {
   if (eras.length === 0) return void 0;
   return {
     silent: false,
-    tooltip: { show: true },
+    tooltip: { show: false },
     data: eras.map((era) => {
       const startIdx = labels.indexOf(era.start);
       const endIdx = labels.indexOf(era.end);
@@ -6628,7 +7044,7 @@ function buildMarkArea(eras, labels, textColor, defaultColor) {
     })
   };
 }
-function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -6639,11 +7055,6 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       "category",
@@ -6674,12 +7085,13 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...markArea && { markArea }
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
@@ -6700,17 +7112,13 @@ function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLi
       lineStyle: { color, width: 3 },
       itemStyle: { color },
       emphasis: EMPHASIS_LINE,
+      blur: BLUR_DIM,
       ...idx === 0 && markArea && { markArea }
     };
   });
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     legend: {
       data: seriesNames,
       bottom: 10,
@@ -6745,7 +7153,7 @@ function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLi
     series
   };
 }
-function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -6756,11 +7164,6 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       "category",
@@ -6792,6 +7195,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...markArea && { markArea }
       }
     ]
@@ -6823,7 +7227,7 @@ function pieLabelLayout(parsed) {
   if (maxLen > 18) return { outerRadius: 55, fontSize: 13 };
   return { outerRadius: 70, fontSize: 14 };
 }
-function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme, isDoughnut) {
+function buildPieOption(parsed, textColor, colors, bg, titleConfig, isDoughnut) {
   const HIDE_AXES = { xAxis: { show: false }, yAxis: { show: false } };
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
@@ -6842,10 +7246,6 @@ function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme
     ...CHART_BASE,
     ...HIDE_AXES,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     series: [
       {
         type: "pie",
@@ -6859,12 +7259,13 @@ function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme
           fontSize
         },
         labelLine: { show: true },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig) {
   const bg = isDark ? palette.surface : palette.bg;
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
@@ -6878,10 +7279,6 @@ function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, title
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     radar: {
       indicator,
       axisName: {
@@ -6918,12 +7315,13 @@ function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, title
             }
           }
         ],
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig) {
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
     return {
@@ -6941,10 +7339,6 @@ function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, toolti
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     series: [
       {
         type: "pie",
@@ -6962,12 +7356,13 @@ function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, toolti
           fontSize: pieLabelLayout(parsed).fontSize
         },
         labelLine: { show: true },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -6996,7 +7391,8 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
         fontWeight: "bold",
         fontFamily: FONT_FAMILY
       },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SERIES,
+      blur: BLUR_DIM
     };
   });
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
@@ -7037,7 +7433,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       hasLegend: true
     }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series
   };
 }
@@ -7121,7 +7517,7 @@ async function renderExtendedChartForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var echarts, EMPHASIS_SELF, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
+var echarts, EMPHASIS_SELF, EMPHASIS_SERIES, BLUR_DIM, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -7136,20 +7532,22 @@ var init_echarts = __esm({
     init_colors();
     init_parsing();
     init_chart();
-    EMPHASIS_SELF = { focus: "self", blurScope: "global" };
-    EMPHASIS_LINE = {
-      ...EMPHASIS_SELF,
-      scale: 2.5,
-      itemStyle: {
-        borderWidth: 2,
-        borderColor: "#fff",
-        shadowBlur: 8,
-        shadowColor: "rgba(0,0,0,0.4)"
-      }
+    EMPHASIS_SELF = {
+      focus: "self",
+      blurScope: "global",
+      itemStyle: { opacity: 1 }
+    };
+    EMPHASIS_SERIES = {
+      focus: "series",
+      blurScope: "global",
+      itemStyle: { opacity: 1 }
     };
+    BLUR_DIM = { itemStyle: { opacity: 0.15 }, lineStyle: { opacity: 0.15 } };
+    EMPHASIS_LINE = { ...EMPHASIS_SELF };
     CHART_BASE = {
       backgroundColor: "transparent",
-      animation: false
+      animation: false,
+      tooltip: { show: false }
     };
     CHART_BORDER_WIDTH = 2;
     VALID_EXTENDED_TYPES = /* @__PURE__ */ new Set([
@@ -8481,7 +8879,12 @@ __export(parser_exports7, {
 function parseArrowLine(trimmed, palette) {
   const bareMatch = trimmed.match(BARE_ARROW_RE);
   if (bareMatch) {
-    return { target: bareMatch[1].trim() };
+    const rawTarget = bareMatch[1].trim();
+    const groupMatch = rawTarget.match(/^\[(.+)\]$/);
+    return {
+      target: groupMatch ? groupMatch[1].trim() : rawTarget,
+      targetIsGroup: !!groupMatch
+    };
   }
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
@@ -8490,8 +8893,14 @@ function parseArrowLine(trimmed, palette) {
     if (label && !color) {
       color = inferArrowColor(label);
     }
-    const target = arrowMatch[3].trim();
-    return { label, color, target };
+    const rawTarget = arrowMatch[3].trim();
+    const groupMatch = rawTarget.match(/^\[(.+)\]$/);
+    return {
+      label,
+      color,
+      target: groupMatch ? groupMatch[1].trim() : rawTarget,
+      targetIsGroup: !!groupMatch
+    };
   }
   return null;
 }
@@ -8553,6 +8962,7 @@ function parseSitemap(content, palette) {
   const aliasMap = /* @__PURE__ */ new Map();
   const indentStack = [];
   const labelToNode = /* @__PURE__ */ new Map();
+  const labelToContainer = /* @__PURE__ */ new Map();
   const deferredArrows = [];
   for (let i = 0; i < lines.length; i++) {
     const line10 = lines[i];
@@ -8654,6 +9064,7 @@ function parseSitemap(content, palette) {
         deferredArrows.push({
           sourceNode: source,
           targetLabel: arrowInfo.target,
+          targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
           color: arrowInfo.color,
           lineNumber
@@ -8687,6 +9098,7 @@ function parseSitemap(content, palette) {
         color
       };
       attachNode2(node, indent, indentStack, result);
+      labelToContainer.set(label.toLowerCase(), node);
     } else if (metadataMatch && indentStack.length > 0) {
       const rawKey = metadataMatch[1].trim().toLowerCase();
       const key = aliasMap.get(rawKey) ?? rawKey;
@@ -8727,22 +9139,41 @@ function parseSitemap(content, palette) {
   }
   for (const arrow of deferredArrows) {
     const targetKey = arrow.targetLabel.toLowerCase();
-    const targetNode = labelToNode.get(targetKey);
-    if (!targetNode) {
-      const allLabels = Array.from(labelToNode.keys());
-      let msg = `Arrow target "${arrow.targetLabel}" not found`;
-      const hint = suggest(targetKey, allLabels);
-      if (hint) msg += `. ${hint}`;
-      pushError(arrow.lineNumber, msg);
-      continue;
+    if (arrow.targetIsGroup) {
+      const targetContainer = labelToContainer.get(targetKey);
+      if (!targetContainer) {
+        const allLabels = Array.from(labelToContainer.keys());
+        let msg = `Group '[${arrow.targetLabel}]' not found`;
+        const hint = suggest(targetKey, allLabels);
+        if (hint) msg += `. ${hint}`;
+        pushError(arrow.lineNumber, msg);
+        continue;
+      }
+      result.edges.push({
+        sourceId: arrow.sourceNode.id,
+        targetId: targetContainer.id,
+        label: arrow.label,
+        color: arrow.color,
+        lineNumber: arrow.lineNumber
+      });
+    } else {
+      const targetNode = labelToNode.get(targetKey);
+      if (!targetNode) {
+        const allLabels = Array.from(labelToNode.keys());
+        let msg = `Arrow target "${arrow.targetLabel}" not found`;
+        const hint = suggest(targetKey, allLabels);
+        if (hint) msg += `. ${hint}`;
+        pushError(arrow.lineNumber, msg);
+        continue;
+      }
+      result.edges.push({
+        sourceId: arrow.sourceNode.id,
+        targetId: targetNode.id,
+        label: arrow.label,
+        color: arrow.color,
+        lineNumber: arrow.lineNumber
+      });
     }
-    result.edges.push({
-      sourceId: arrow.sourceNode.id,
-      targetId: targetNode.id,
-      label: arrow.label,
-      color: arrow.color,
-      lineNumber: arrow.lineNumber
-    });
   }
   if (result.tagGroups.length > 0) {
     const allNodes = [];
@@ -10456,6 +10887,7 @@ function parseBoxesAndLines(content) {
   const nodeLabels = /* @__PURE__ */ new Set();
   const groupLabels = /* @__PURE__ */ new Set();
   let lastNodeLabel = null;
+  let lastSourceIsGroup = false;
   const groupStack = [];
   let contentStarted = false;
   let currentTagGroup = null;
@@ -10694,6 +11126,8 @@ function parseBoxesAndLines(content) {
       };
       groupLabels.add(label);
       groupStack.push({ group, indent, depth: currentDepth });
+      lastNodeLabel = label;
+      lastSourceIsGroup = true;
       continue;
     }
     if (trimmed.includes("->") || trimmed.includes("<->")) {
@@ -10711,7 +11145,8 @@ function parseBoxesAndLines(content) {
           );
           continue;
         }
-        edgeText = `${lastNodeLabel} ${trimmed}`;
+        const sourcePrefix = lastSourceIsGroup ? `[${lastNodeLabel}]` : lastNodeLabel;
+        edgeText = `${sourcePrefix} ${trimmed}`;
       }
       const edge = parseEdgeLine(
         edgeText,
@@ -10734,6 +11169,7 @@ function parseBoxesAndLines(content) {
       continue;
     }
     lastNodeLabel = node.label;
+    lastSourceIsGroup = false;
     const gs = currentGroupState();
     const isGroupChild = gs && indent > gs.indent;
     if (nodeLabels.has(node.label)) {
@@ -10761,14 +11197,42 @@ function parseBoxesAndLines(content) {
     const gs = groupStack.pop();
     result.groups.push(gs.group);
   }
+  const validEdges = [];
   for (const edge of result.edges) {
-    if (!edge.source.startsWith("__group_")) {
+    let valid = true;
+    if (edge.source.startsWith("__group_")) {
+      const label = edge.source.slice("__group_".length);
+      const found = [...groupLabels].some(
+        (g) => g.toLowerCase() === label.toLowerCase()
+      );
+      if (!found) {
+        result.diagnostics.push(
+          makeDgmoError(edge.lineNumber, `Group '[${label}]' not found`)
+        );
+        valid = false;
+      }
+    } else {
       ensureNode(edge.source, edge.lineNumber);
     }
-    if (!edge.target.startsWith("__group_")) {
+    if (edge.target.startsWith("__group_")) {
+      const label = edge.target.slice("__group_".length);
+      const found = [...groupLabels].some(
+        (g) => g.toLowerCase() === label.toLowerCase()
+      );
+      if (!found) {
+        result.diagnostics.push(
+          makeDgmoError(edge.lineNumber, `Group '[${label}]' not found`)
+        );
+        valid = false;
+      }
+    } else {
       ensureNode(edge.target, edge.lineNumber);
     }
+    if (valid) {
+      validEdges.push(edge);
+    }
   }
+  result.edges = validEdges;
   if (result.tagGroups.length > 0) {
     injectDefaultTagMetadata(result.nodes, result.tagGroups);
     validateTagValues(result.nodes, result.tagGroups, pushWarning, suggest);
@@ -10797,10 +11261,14 @@ function parseNodeLine(trimmed, lineNum, aliasMap, _diagnostics) {
     description
   };
 }
+function resolveEndpoint(name) {
+  const m = name.match(/^\[(.+)\]$/);
+  return m ? groupId2(m[1].trim()) : name;
+}
 function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   const biLabeledMatch = trimmed.match(/^(.+?)\s*<-(.+)->\s*(.+)$/);
   if (biLabeledMatch) {
-    const source2 = biLabeledMatch[1].trim();
+    const source2 = resolveEndpoint(biLabeledMatch[1].trim());
     const label = biLabeledMatch[2].trim();
     let rest2 = biLabeledMatch[3].trim();
     let metadata2 = {};
@@ -10821,7 +11289,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
     }
     return {
       source: source2,
-      target: rest2,
+      target: resolveEndpoint(rest2),
       label: label || void 0,
       bidirectional: true,
       lineNumber: lineNum,
@@ -10830,7 +11298,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   }
   const biIdx = trimmed.indexOf("<->");
   if (biIdx >= 0) {
-    const source2 = trimmed.slice(0, biIdx).trim();
+    const source2 = resolveEndpoint(trimmed.slice(0, biIdx).trim());
     let rest2 = trimmed.slice(biIdx + 3).trim();
     let metadata2 = {};
     const pipeIdx2 = rest2.indexOf("|");
@@ -10850,7 +11318,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
     }
     return {
       source: source2,
-      target: rest2,
+      target: resolveEndpoint(rest2),
       bidirectional: true,
       lineNumber: lineNum,
       metadata: metadata2
@@ -10858,7 +11326,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   }
   const labeledMatch = trimmed.match(/^(.+?)\s+-(.+)->\s*(.+)$/);
   if (labeledMatch) {
-    const source2 = labeledMatch[1].trim();
+    const source2 = resolveEndpoint(labeledMatch[1].trim());
     const label = labeledMatch[2].trim();
     let rest2 = labeledMatch[3].trim();
     if (label) {
@@ -10880,7 +11348,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
       }
       return {
         source: source2,
-        target: rest2,
+        target: resolveEndpoint(rest2),
         label,
         bidirectional: false,
         lineNumber: lineNum,
@@ -10890,7 +11358,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   }
   const arrowIdx = trimmed.indexOf("->");
   if (arrowIdx < 0) return null;
-  const source = trimmed.slice(0, arrowIdx).trim();
+  const source = resolveEndpoint(trimmed.slice(0, arrowIdx).trim());
   let rest = trimmed.slice(arrowIdx + 2).trim();
   if (!source || !rest) {
     diagnostics.push(
@@ -10911,7 +11379,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   }
   return {
     source,
-    target: rest,
+    target: resolveEndpoint(rest),
     bidirectional: false,
     lineNumber: lineNum,
     metadata
@@ -11225,14 +11693,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 pillWidth2 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD2;
-    const minPillWidth = pillWidth2;
-    let entriesWidth2 = 0;
+    const pillWidth3 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD2;
+    const minPillWidth = pillWidth3;
+    let entriesWidth3 = 0;
     for (const entry of visibleEntries) {
-      entriesWidth2 += LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL2;
+      entriesWidth3 += LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL2;
     }
     const eyeSpace = showEyeIcons ? LEGEND_EYE_SIZE2 + LEGEND_EYE_GAP2 : 0;
-    const capsuleWidth = LEGEND_CAPSULE_PAD2 * 2 + pillWidth2 + 4 + eyeSpace + entriesWidth2;
+    const capsuleWidth2 = LEGEND_CAPSULE_PAD2 * 2 + pillWidth3 + 4 + eyeSpace + entriesWidth3;
     groups.push({
       name: group.name,
       alias: group.alias,
@@ -11242,7 +11710,7 @@ function computeLegendGroups(tagGroups, showEyeIcons, usedValuesByGroup) {
       })),
       x: 0,
       y: 0,
-      width: capsuleWidth,
+      width: capsuleWidth2,
       height: LEGEND_HEIGHT2,
       minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT2
@@ -12183,66 +12651,77 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     }
   }
   if (fixedLegend || legendOnly || exportDims && hasLegend) {
-    const visibleGroups = layout.legend.filter((group) => {
-      if (legendOnly) return true;
-      if (activeTagGroup == null) return true;
-      return group.name.toLowerCase() === activeTagGroup.toLowerCase();
-    });
-    let fixedPositions;
-    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_GAP;
-      let cx = (width - totalW) / 2;
-      for (const g of visibleGroups) {
-        fixedPositions.set(g.name, cx);
-        cx += effectiveW(g) + LEGEND_GROUP_GAP;
-      }
-    }
-    const legendParentBase = fixedLegend ? svg.append("g").attr("class", "org-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING + titleReserve})`) : contentG;
-    const legendParent = legendParentBase;
-    if (fixedLegend && activeTagGroup) {
-      legendParentBase.attr("data-legend-active", activeTagGroup.toLowerCase());
+    const groups = layout.legend.map((g) => ({
+      name: g.name,
+      entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+    }));
+    const eyeAddonWidth = fixedLegend ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
+    const legendParentBase = fixedLegend ? svg.append("g").attr("class", "org-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING + titleReserve})`) : contentG.append("g");
+    let legendHandle;
+    if (legendOnly) {
+      for (const lg of layout.legend) {
+        const singleConfig = {
+          groups: [
+            {
+              name: lg.name,
+              entries: lg.entries.map((e) => ({
+                value: e.value,
+                color: e.color
+              }))
+            }
+          ],
+          position: { placement: "top-center", titleRelation: "below-title" },
+          mode: "fixed"
+        };
+        const singleState = { activeGroup: lg.name };
+        const groupG = legendParentBase.append("g").attr("transform", `translate(${lg.x}, ${lg.y})`);
+        renderLegendD3(
+          groupG,
+          singleConfig,
+          singleState,
+          palette,
+          isDark,
+          void 0,
+          lg.width
+        );
+        groupG.selectAll("[data-legend-group]").classed("org-legend-group", true);
+      }
+      legendHandle = null;
+    } else {
+      const legendConfig = {
+        groups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: "fixed",
+        capsulePillAddonWidth: eyeAddonWidth
+      };
+      const legendState = { activeGroup: activeTagGroup ?? null };
+      legendHandle = renderLegendD3(
+        legendParentBase,
+        legendConfig,
+        legendState,
+        palette,
+        isDark,
+        void 0,
+        fixedLegend ? width : layout.width
+      );
+      legendParentBase.selectAll("[data-legend-group]").classed("org-legend-group", true);
     }
-    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 pillWidth2 = measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + 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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-      }
-      const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-      const pillYOff = LEGEND_CAPSULE_PAD;
-      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-      gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth2).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", pillWidth2).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 + pillWidth2 / 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();
+    if (fixedLegend && legendHandle) {
+      const computedLayout = legendHandle.getLayout();
+      if (computedLayout.activeCapsule?.addonX != null) {
+        const capsule = computedLayout.activeCapsule;
+        const groupKey = capsule.groupName.toLowerCase();
         const isHidden = hiddenAttributes?.has(groupKey) ?? false;
-        const eyeX = pillXOff + pillWidth2 + 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_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_SIZE + LEGEND_EYE_GAP : 0;
-        let entryX = pillXOff + pillWidth2 + 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_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_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entryLabel);
-          entryX = textX + measureLegendText(entryLabel, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+        const activeGroupEl = legendParentBase.select(
+          `[data-legend-group="${groupKey}"]`
+        );
+        if (!activeGroupEl.empty()) {
+          const eyeX = capsule.addonX;
+          const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
+          const hitPad = 6;
+          const eyeG = activeGroupEl.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_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");
         }
       }
     }
@@ -12277,6 +12756,7 @@ var init_renderer = __esm({
     init_parser4();
     init_layout();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING = 20;
     MAX_SCALE = 3;
@@ -12305,6 +12785,17 @@ var layout_exports2 = {};
 __export(layout_exports2, {
   layoutSitemap: () => layoutSitemap
 });
+function clipToRectBorder(cx, cy, w, h, tx, ty) {
+  const dx = tx - cx;
+  const dy = ty - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const hw = w / 2;
+  const hh = h / 2;
+  const sx = dx !== 0 ? hw / Math.abs(dx) : Infinity;
+  const sy = dy !== 0 ? hh / Math.abs(dy) : Infinity;
+  const s = Math.min(sx, sy);
+  return { x: cx + dx * s, y: cy + dy * s };
+}
 function filterMetadata2(metadata, hiddenAttributes) {
   if (!hiddenAttributes || hiddenAttributes.size === 0) return metadata;
   const filtered = {};
@@ -12321,7 +12812,10 @@ function computeCardWidth2(label, meta) {
     const lineChars = key.length + 2 + value.length;
     if (lineChars > maxChars) maxChars = lineChars;
   }
-  return Math.max(MIN_CARD_WIDTH2, Math.ceil(maxChars * CHAR_WIDTH2) + CARD_H_PAD2 * 2);
+  return Math.max(
+    MIN_CARD_WIDTH2,
+    Math.ceil(maxChars * CHAR_WIDTH2) + CARD_H_PAD2 * 2
+  );
 }
 function computeCardHeight2(meta) {
   const metaCount = Object.keys(meta).length;
@@ -12330,7 +12824,12 @@ function computeCardHeight2(meta) {
 }
 function resolveNodeColor2(node, tagGroups, activeGroupName) {
   if (node.color) return node.color;
-  return resolveTagColor(node.metadata, tagGroups, activeGroupName, node.isContainer);
+  return resolveTagColor(
+    node.metadata,
+    tagGroups,
+    activeGroupName,
+    node.isContainer
+  );
 }
 function computeLegendGroups2(tagGroups, usedValuesByGroup) {
   const groups = [];
@@ -12339,21 +12838,21 @@ function computeLegendGroups2(tagGroups, 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 pillWidth2 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD3;
-    const minPillWidth = pillWidth2;
-    let entriesWidth2 = 0;
+    const pillWidth3 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD3;
+    const minPillWidth = pillWidth3;
+    let entriesWidth3 = 0;
     for (const entry of visibleEntries) {
-      entriesWidth2 += LEGEND_DOT_R3 * 2 + LEGEND_ENTRY_DOT_GAP3 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL3;
+      entriesWidth3 += LEGEND_DOT_R3 * 2 + LEGEND_ENTRY_DOT_GAP3 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL3;
     }
     const eyeSpace = LEGEND_EYE_SIZE3 + LEGEND_EYE_GAP3;
-    const capsuleWidth = LEGEND_CAPSULE_PAD3 * 2 + pillWidth2 + 4 + eyeSpace + entriesWidth2;
+    const capsuleWidth2 = LEGEND_CAPSULE_PAD3 * 2 + pillWidth3 + 4 + eyeSpace + entriesWidth3;
     groups.push({
       name: group.name,
       alias: group.alias,
       entries: visibleEntries.map((e) => ({ value: e.value, color: e.color })),
       x: 0,
       y: 0,
-      width: capsuleWidth,
+      width: capsuleWidth2,
       height: LEGEND_HEIGHT3,
       minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT3
@@ -12373,10 +12872,20 @@ function flattenNodes(nodes, parentContainerId, parentPageId, hiddenCounts, hidd
         parentPageId,
         meta,
         fullMeta: { ...node.metadata },
-        width: Math.max(MIN_CARD_WIDTH2, node.label.length * CHAR_WIDTH2 + CARD_H_PAD2 * 2),
+        width: Math.max(
+          MIN_CARD_WIDTH2,
+          node.label.length * CHAR_WIDTH2 + CARD_H_PAD2 * 2
+        ),
         height: labelHeight + CONTAINER_PAD_BOTTOM2
       });
-      flattenNodes(node.children, node.id, parentPageId, hiddenCounts, hiddenAttributes, result);
+      flattenNodes(
+        node.children,
+        node.id,
+        parentPageId,
+        hiddenCounts,
+        hiddenAttributes,
+        result
+      );
     } else {
       result.push({
         sitemapNode: node,
@@ -12388,14 +12897,28 @@ function flattenNodes(nodes, parentContainerId, parentPageId, hiddenCounts, hidd
         height: computeCardHeight2(meta)
       });
       if (node.children.length > 0) {
-        flattenNodes(node.children, parentContainerId, node.id, hiddenCounts, hiddenAttributes, result);
+        flattenNodes(
+          node.children,
+          parentContainerId,
+          node.id,
+          hiddenCounts,
+          hiddenAttributes,
+          result
+        );
       }
     }
   }
 }
 function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expandAllLegend) {
   if (parsed.roots.length === 0) {
-    return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    return {
+      nodes: [],
+      edges: [],
+      containers: [],
+      legend: [],
+      width: 0,
+      height: 0
+    };
   }
   const allNodes = [];
   const collect = (node) => {
@@ -12403,9 +12926,20 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
     for (const child of node.children) collect(child);
   };
   for (const root of parsed.roots) collect(root);
-  injectDefaultTagMetadata(allNodes, parsed.tagGroups, (e) => e.isContainer);
+  injectDefaultTagMetadata(
+    allNodes,
+    parsed.tagGroups,
+    (e) => e.isContainer
+  );
   const flatNodes = [];
-  flattenNodes(parsed.roots, null, null, hiddenCounts, hiddenAttributes, flatNodes);
+  flattenNodes(
+    parsed.roots,
+    null,
+    null,
+    hiddenCounts,
+    hiddenAttributes,
+    flatNodes
+  );
   const nodeMap = /* @__PURE__ */ new Map();
   for (const flat of flatNodes) {
     nodeMap.set(flat.sitemapNode.id, flat);
@@ -12467,14 +13001,29 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
       g.setParent(flat.sitemapNode.id, flat.parentContainerId);
     }
   }
+  const expandedContainerIds = /* @__PURE__ */ new Set();
+  for (const cid of containerIds) {
+    if (!collapsedContainerIds.has(cid)) {
+      expandedContainerIds.add(cid);
+    }
+  }
+  const deferredEdgeIndices = [];
   for (let i = 0; i < parsed.edges.length; i++) {
     const edge = parsed.edges[i];
-    if (g.hasNode(edge.sourceId) && g.hasNode(edge.targetId)) {
-      g.setEdge(edge.sourceId, edge.targetId, {
+    if (!g.hasNode(edge.sourceId) || !g.hasNode(edge.targetId)) continue;
+    if (expandedContainerIds.has(edge.sourceId) || expandedContainerIds.has(edge.targetId)) {
+      deferredEdgeIndices.push(i);
+      continue;
+    }
+    g.setEdge(
+      edge.sourceId,
+      edge.targetId,
+      {
         label: edge.label ?? "",
         minlen: 1
-      }, `e${i}`);
-    }
+      },
+      `e${i}`
+    );
   }
   import_dagre.default.layout(g);
   const layoutNodes = [];
@@ -12542,19 +13091,52 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
       });
     }
   }
+  const deferredSet = new Set(deferredEdgeIndices);
   const layoutEdges = [];
   for (let i = 0; i < parsed.edges.length; i++) {
     const edge = parsed.edges[i];
     if (!g.hasNode(edge.sourceId) || !g.hasNode(edge.targetId)) continue;
-    const edgeData = g.edge({ v: edge.sourceId, w: edge.targetId, name: `e${i}` });
-    if (!edgeData) continue;
+    let points;
+    if (deferredSet.has(i)) {
+      const srcNode = g.node(edge.sourceId);
+      const tgtNode = g.node(edge.targetId);
+      if (!srcNode || !tgtNode) continue;
+      const srcPt = clipToRectBorder(
+        srcNode.x,
+        srcNode.y,
+        srcNode.width,
+        srcNode.height,
+        tgtNode.x,
+        tgtNode.y
+      );
+      const tgtPt = clipToRectBorder(
+        tgtNode.x,
+        tgtNode.y,
+        tgtNode.width,
+        tgtNode.height,
+        srcNode.x,
+        srcNode.y
+      );
+      const midX = (srcPt.x + tgtPt.x) / 2;
+      const midY = (srcPt.y + tgtPt.y) / 2;
+      points = [srcPt, { x: midX, y: midY }, tgtPt];
+    } else {
+      const edgeData = g.edge({
+        v: edge.sourceId,
+        w: edge.targetId,
+        name: `e${i}`
+      });
+      if (!edgeData) continue;
+      points = edgeData.points ?? [];
+    }
     layoutEdges.push({
       sourceId: edge.sourceId,
       targetId: edge.targetId,
-      points: edgeData.points ?? [],
+      points,
       label: edge.label,
       color: edge.color,
-      lineNumber: edge.lineNumber
+      lineNumber: edge.lineNumber,
+      deferred: deferredSet.has(i) || void 0
     });
   }
   {
@@ -12715,7 +13297,9 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
     usedValuesByGroup.set(key, used);
   }
   const legendGroups = computeLegendGroups2(parsed.tagGroups, usedValuesByGroup);
-  const visibleGroups = activeTagGroup != null ? legendGroups.filter((g2) => g2.name.toLowerCase() === activeTagGroup.toLowerCase()) : legendGroups;
+  const visibleGroups = activeTagGroup != null ? legendGroups.filter(
+    (g2) => g2.name.toLowerCase() === activeTagGroup.toLowerCase()
+  ) : legendGroups;
   const allExpanded = expandAllLegend && activeTagGroup == null;
   const effectiveW = (g2) => activeTagGroup != null || allExpanded ? g2.width : g2.minifiedWidth;
   if (visibleGroups.length > 0) {
@@ -13030,7 +13614,8 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     const edgeG = contentG.append("g").attr("class", "sitemap-edge-group").attr("data-line-number", String(edge.lineNumber));
     const edgeColor3 = edge.color ?? palette.textMuted;
     const markerId = edge.color ? `sm-arrow-${edge.color.replace("#", "")}` : "sm-arrow";
-    const pathD = lineGenerator(edge.points);
+    const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
+    const pathD = gen(edge.points);
     if (pathD) {
       edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH2).attr("marker-end", `url(#${markerId})`).attr("class", "sitemap-edge");
     }
@@ -13121,57 +13706,44 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
 }
 function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes) {
   if (legendGroups.length === 0) return;
-  const visibleGroups = activeTagGroup != null ? legendGroups.filter(
-    (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
-  ) : legendGroups;
-  const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-  let fixedPositions;
-  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_GAP;
-    let cx = (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;
-    const pillW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + 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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    }
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-    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_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 groups = legendGroups.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+  }));
+  const isFixedMode = fixedWidth != null;
+  const eyeAddonWidth = isFixedMode ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
+  const legendConfig = {
+    groups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode: "fixed",
+    capsulePillAddonWidth: eyeAddonWidth
+  };
+  const legendState = { activeGroup: activeTagGroup ?? null };
+  const containerWidth = fixedWidth ?? legendGroups[0]?.x + (legendGroups[0]?.width ?? 200);
+  const legendHandle = renderLegendD3(
+    parent,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    void 0,
+    containerWidth
+  );
+  parent.selectAll("[data-legend-group]").classed("sitemap-legend-group", true);
+  if (isFixedMode) {
+    const computedLayout = legendHandle.getLayout();
+    if (computedLayout.activeCapsule?.addonX != null) {
+      const capsule = computedLayout.activeCapsule;
+      const groupKey = capsule.groupName.toLowerCase();
       const isHidden = hiddenAttributes?.has(groupKey) ?? false;
-      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_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_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_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 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+      const activeGroupEl = parent.select(`[data-legend-group="${groupKey}"]`);
+      if (!activeGroupEl.empty()) {
+        const eyeX = capsule.addonX;
+        const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
+        const hitPad = 6;
+        const eyeG = activeGroupEl.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_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");
       }
     }
   }
@@ -13225,7 +13797,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, 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 d3Selection2, d3Shape, DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, 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, lineGeneratorLinear;
 var init_renderer2 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
@@ -13234,6 +13806,7 @@ var init_renderer2 = __esm({
     init_fonts();
     init_color_utils();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING2 = 20;
     MAX_SCALE2 = 3;
@@ -13257,6 +13830,7 @@ var init_renderer2 = __esm({
     COLLAPSE_BAR_HEIGHT2 = 6;
     LEGEND_FIXED_GAP2 = 8;
     lineGenerator = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveBasis);
+    lineGeneratorLinear = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveLinear);
   }
 });
 
@@ -13533,53 +14107,22 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
   }
   if (parsed.tagGroups.length > 0) {
     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 = 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_PILL_FONT_SIZE * 0.6;
-      const pillWidth2 = pillTextWidth + 16;
-      let capsuleContentWidth = pillWidth2;
-      if (isActive) {
-        capsuleContentWidth += 4;
-        for (const entry of group.entries) {
-          capsuleContentWidth += LEGEND_DOT_R * 2 + 4 + entry.value.length * LEGEND_ENTRY_FONT_SIZE * 0.6 + 8;
-        }
-      }
-      const capsuleWidth = capsuleContentWidth + capsulePad * 2;
-      if (isActive) {
-        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;
-      legendContainer.append("rect").attr("x", pillX).attr("y", legendY + capsulePad).attr("width", pillWidth2).attr("height", LEGEND_HEIGHT - capsulePad * 2).attr("rx", (LEGEND_HEIGHT - capsulePad * 2) / 2).attr("fill", pillBg).attr("class", "kanban-legend-group").attr("data-legend-group", group.name.toLowerCase());
-      if (isActive) {
-        legendContainer.append("rect").attr("x", pillX).attr("y", legendY + capsulePad).attr("width", pillWidth2).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);
-      }
-      legendContainer.append("text").attr("x", pillX + pillWidth2 / 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 + pillWidth2 + 4;
-        for (const entry of group.entries) {
-          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 {
-        legendX += pillWidth2 + 12;
-      }
-    }
+    const legendConfig = {
+      groups: parsed.tagGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: exportDims ? "inline" : "fixed"
+    };
+    const legendState = { activeGroup: activeTagGroup ?? null };
+    const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${DIAGRAM_PADDING3},${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      width - DIAGRAM_PADDING3 * 2
+    );
   }
   const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
   const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
@@ -13675,6 +14218,7 @@ var init_renderer3 = __esm({
     init_parser5();
     init_mutations();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING3 = 20;
     COLUMN_GAP = 16;
@@ -13868,14 +14412,9 @@ function collectClassTypes(parsed) {
     if (c.color) continue;
     present.add(c.modifier ?? "class");
   }
-  return CLASS_TYPE_ORDER.filter((k) => present.has(k)).map((k) => CLASS_TYPE_MAP[k]);
-}
-function legendEntriesWidth(entries) {
-  let w = 0;
-  for (const e of entries) {
-    w += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
-  }
-  return w;
+  return CLASS_TYPE_ORDER.filter((k) => present.has(k)).map(
+    (k) => CLASS_TYPE_MAP[k]
+  );
 }
 function classTypeKey(modifier) {
   return modifier ?? "class";
@@ -13944,7 +14483,10 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   defs.append("marker").attr("id", "cd-arrow-depend").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
   defs.append("marker").attr("id", "cd-arrow-assoc").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
   if (parsed.title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style(
+      "cursor",
+      onClickItem && parsed.titleLineNumber ? "pointer" : "default"
+    ).text(parsed.title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
@@ -13958,32 +14500,33 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   }
   const isLegendExpanded = legendActive !== false;
   if (hasLegend) {
-    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-    const pillWidth2 = measureLegendText(LEGEND_GROUP_NAME, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-    const entriesW = legendEntriesWidth(legendEntries);
-    const totalW = isLegendExpanded ? LEGEND_CAPSULE_PAD * 2 + pillWidth2 + LEGEND_ENTRY_TRAIL + entriesW : pillWidth2;
-    const legendX = (width - totalW) / 2;
-    const legendY = titleHeight;
-    const legendG = svg.append("g").attr("class", "cd-legend").attr("data-legend-group", "type").attr("transform", `translate(${legendX}, ${legendY})`).style("cursor", "pointer");
-    if (isLegendExpanded) {
-      legendG.append("rect").attr("width", totalW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-      legendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth2).attr("height", pillH).attr("rx", pillH / 2).attr("fill", palette.bg);
-      legendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth2).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", LEGEND_CAPSULE_PAD + pillWidth2 / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(LEGEND_GROUP_NAME);
-      let entryX = LEGEND_CAPSULE_PAD + pillWidth2 + LEGEND_ENTRY_TRAIL;
-      for (const entry of legendEntries) {
-        const color = palette.colors[entry.colorKey];
-        const typeKey = CLASS_TYPE_ORDER.find((k) => CLASS_TYPE_MAP[k] === entry);
-        const entryG = legendG.append("g").attr("data-legend-entry", typeKey);
-        entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", color);
-        entryG.append("text").attr("x", entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(entry.label);
-        entryX += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+    const legendGroups = [
+      {
+        name: LEGEND_GROUP_NAME,
+        entries: legendEntries.map((entry) => ({
+          value: entry.label,
+          color: palette.colors[entry.colorKey]
+        }))
       }
-    } else {
-      legendG.append("rect").attr("width", pillWidth2).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-      legendG.append("text").attr("x", pillWidth2 / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.textMuted).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(LEGEND_GROUP_NAME);
-    }
+    ];
+    const legendConfig = {
+      groups: legendGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: "fixed"
+    };
+    const legendState = {
+      activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null
+    };
+    const legendG = svg.append("g").attr("class", "cd-legend").attr("transform", `translate(0,${titleHeight})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      width
+    );
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   for (const edge of layout.edges) {
@@ -14027,7 +14570,13 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
     const colorOff = !!parsed.options?.["no-auto-color"];
     const neutralize = hasLegend && !isLegendExpanded && !node.color;
     const effectiveColor = neutralize ? palette.primary : node.color;
-    const fill2 = nodeFill3(palette, isDark, node.modifier, effectiveColor, colorOff);
+    const fill2 = nodeFill3(
+      palette,
+      isDark,
+      node.modifier,
+      effectiveColor,
+      colorOff
+    );
     const stroke2 = nodeStroke3(palette, node.modifier, effectiveColor, colorOff);
     nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH3);
     let yPos = -h / 2;
@@ -14096,15 +14645,10 @@ function renderClassDiagramForExport(content, theme, palette) {
   const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0) + legendReserve;
   return runInExportContainer(exportWidth, exportHeight, (container) => {
-    renderClassDiagram(
-      container,
-      parsed,
-      layout,
-      palette,
-      isDark,
-      void 0,
-      { width: exportWidth, height: exportHeight }
-    );
+    renderClassDiagram(container, parsed, layout, palette, isDark, void 0, {
+      width: exportWidth,
+      height: exportHeight
+    });
     return extractExportSvg(container, theme);
   });
 }
@@ -14117,6 +14661,7 @@ var init_renderer4 = __esm({
     init_fonts();
     init_export_container();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_color_utils();
     init_parser2();
@@ -14723,35 +15268,24 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     }
   }
   if (parsed.tagGroups.length > 0) {
-    const LEGEND_PILL_H = LEGEND_HEIGHT - 6;
-    const LEGEND_PILL_RX = Math.floor(LEGEND_PILL_H / 2);
-    const LEGEND_GAP = 8;
-    const legendG = svg.append("g").attr("class", "er-tag-legend");
-    if (activeTagGroup) {
-      legendG.attr("data-legend-active", activeTagGroup.toLowerCase());
-    }
-    let legendX = DIAGRAM_PADDING5;
     const legendY = DIAGRAM_PADDING5 + titleHeight;
-    for (const group of parsed.tagGroups) {
-      const groupG = legendG.append("g").attr("data-legend-group", group.name.toLowerCase());
-      const labelText = groupG.append("text").attr("x", legendX).attr("y", legendY + LEGEND_PILL_H / 2).attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(`${group.name}:`);
-      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_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_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_PILL_FONT_SIZE).attr("font-family", FONT_FAMILY).text(entry.value);
-        legendX += pillW + LEGEND_GAP;
-      }
-      legendX += LEGEND_GROUP_GAP;
-    }
+    const legendConfig = {
+      groups: parsed.tagGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: "fixed"
+    };
+    const legendState = { activeGroup: activeTagGroup ?? null };
+    const legendG = svg.append("g").attr("class", "er-tag-legend").attr("transform", `translate(0,${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      viewW
+    );
+    legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
   }
   if (semanticRoles) {
     const presentRoles = ROLE_ORDER.filter((role) => {
@@ -14761,55 +15295,35 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       return false;
     });
     if (presentRoles.length > 0) {
-      const measureLabelW = (text, fontSize) => {
-        const dummy = svg.append("text").attr("font-size", fontSize).attr("font-family", FONT_FAMILY).attr("visibility", "hidden").text(text);
-        const measured = dummy.node()?.getComputedTextLength?.() ?? 0;
-        dummy.remove();
-        return measured > 0 ? measured : text.length * fontSize * 0.6;
-      };
-      const labelWidths = /* @__PURE__ */ new Map();
-      for (const role of presentRoles) {
-        labelWidths.set(
-          role,
-          measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE)
-        );
-      }
-      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-      const groupName = "Role";
-      const pillWidth2 = measureLegendText(groupName, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-      let totalWidth;
-      let entriesWidth2 = 0;
-      if (semanticActive) {
-        for (const role of presentRoles) {
-          entriesWidth2 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
-        }
-        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth2 + LEGEND_ENTRY_TRAIL + entriesWidth2;
-      } else {
-        totalWidth = pillWidth2;
-      }
-      const legendX = (viewW - totalWidth) / 2;
       const legendY = DIAGRAM_PADDING5 + titleHeight;
-      const semanticLegendG = svg.append("g").attr("class", "er-semantic-legend").attr("data-legend-group", "role").attr("transform", `translate(${legendX}, ${legendY})`).style("cursor", "pointer");
-      if (semanticActive) {
-        semanticLegendG.append("rect").attr("width", totalWidth).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth2).attr("height", pillH).attr("rx", pillH / 2).attr("fill", palette.bg);
-        semanticLegendG.append("rect").attr("x", LEGEND_CAPSULE_PAD).attr("y", LEGEND_CAPSULE_PAD).attr("width", pillWidth2).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
-        semanticLegendG.append("text").attr("x", LEGEND_CAPSULE_PAD + pillWidth2 / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
-        let entryX = LEGEND_CAPSULE_PAD + pillWidth2 + LEGEND_ENTRY_TRAIL;
-        for (const role of presentRoles) {
-          const label = ROLE_LABELS[role];
-          const roleColor = palette.colors[ROLE_COLORS[role]];
-          const entryG = semanticLegendG.append("g").attr("data-legend-entry", role);
-          entryG.append("circle").attr("cx", entryX + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", roleColor);
-          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-          entryG.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(label);
-          entryX = textX + labelWidths.get(role) + LEGEND_ENTRY_TRAIL;
+      const semanticGroups = [
+        {
+          name: "Role",
+          entries: presentRoles.map((role) => ({
+            value: ROLE_LABELS[role],
+            color: palette.colors[ROLE_COLORS[role]]
+          }))
         }
-      } else {
-        semanticLegendG.append("rect").attr("width", pillWidth2).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-        semanticLegendG.append("text").attr("x", pillWidth2 / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.textMuted).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).text(groupName);
-      }
+      ];
+      const legendConfig = {
+        groups: semanticGroups,
+        position: { placement: "top-center", titleRelation: "below-title" },
+        mode: "fixed"
+      };
+      const legendState = {
+        activeGroup: semanticActive ? "Role" : null
+      };
+      const legendG = svg.append("g").attr("class", "er-semantic-legend").attr("transform", `translate(0,${legendY})`);
+      renderLegendD3(
+        legendG,
+        legendConfig,
+        legendState,
+        palette,
+        isDark,
+        void 0,
+        viewW
+      );
+      legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
     }
   }
 }
@@ -14854,6 +15368,7 @@ var init_renderer5 = __esm({
     init_palettes();
     init_tag_groups();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_parser3();
     init_layout4();
@@ -14877,6 +15392,17 @@ var layout_exports5 = {};
 __export(layout_exports5, {
   layoutBoxesAndLines: () => layoutBoxesAndLines
 });
+function clipToRectBorder2(cx, cy, w, h, tx, ty) {
+  const dx = tx - cx;
+  const dy = ty - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const hw = w / 2;
+  const hh = h / 2;
+  const sx = dx !== 0 ? hw / Math.abs(dx) : Infinity;
+  const sy = dy !== 0 ? hh / Math.abs(dy) : Infinity;
+  const s = Math.min(sx, sy);
+  return { x: cx + dx * s, y: cy + dy * s };
+}
 function computeNodeSize(_node) {
   const PHI = 1.618;
   const NODE_HEIGHT = 60;
@@ -15029,13 +15555,25 @@ function layoutBoxesAndLines(parsed, collapseInfo) {
       const srcNode = g.node(edge.source);
       const tgtNode = g.node(edge.target);
       if (!srcNode || !tgtNode) continue;
-      const midX = (srcNode.x + tgtNode.x) / 2;
-      const midY = (srcNode.y + tgtNode.y) / 2;
-      points = [
-        { x: srcNode.x, y: srcNode.y },
-        { x: midX, y: midY },
-        { x: tgtNode.x, y: tgtNode.y }
-      ];
+      const srcPt = clipToRectBorder2(
+        srcNode.x,
+        srcNode.y,
+        srcNode.width,
+        srcNode.height,
+        tgtNode.x,
+        tgtNode.y
+      );
+      const tgtPt = clipToRectBorder2(
+        tgtNode.x,
+        tgtNode.y,
+        tgtNode.width,
+        tgtNode.height,
+        srcNode.x,
+        srcNode.y
+      );
+      const midX = (srcPt.x + tgtPt.x) / 2;
+      const midY = (srcPt.y + tgtPt.y) / 2;
+      points = [srcPt, { x: midX, y: midY }, tgtPt];
     } else {
       const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
       points = dagreEdge?.points ?? [];
@@ -15058,7 +15596,8 @@ function layoutBoxesAndLines(parsed, collapseInfo) {
       labelY,
       yOffset: edgeYOffsets[i],
       parallelCount: edgeParallelCounts[i],
-      metadata: edge.metadata
+      metadata: edge.metadata,
+      deferred: deferredSet.has(i) || void 0
     });
   }
   let maxX = 0;
@@ -15327,12 +15866,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     const edgeG = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber));
     edgeGroups.set(i, edgeG);
     const markerId = `bl-arrow-${color.replace("#", "")}`;
-    const path = edgeG.append("path").attr("class", "bl-edge").attr(
-      "d",
-      (parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR)(
-        points
-      ) ?? ""
-    ).attr("fill", "none").attr("stroke", color).attr("stroke-width", EDGE_STROKE_WIDTH5).attr("marker-end", `url(#${markerId})`);
+    const gen = le.deferred ? lineGeneratorLinear2 : parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR;
+    const path = edgeG.append("path").attr("class", "bl-edge").attr("d", gen(points) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", EDGE_STROKE_WIDTH5).attr("marker-end", `url(#${markerId})`);
     if (le.bidirectional) {
       const revId = `bl-arrow-rev-${color.replace("#", "")}`;
       path.attr("marker-start", `url(#${revId})`);
@@ -15413,50 +15948,23 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     }
   }
   if (parsed.tagGroups.length > 0) {
-    renderLegend2(svg, parsed, palette, isDark, activeGroup, width, titleOffset);
-  }
-}
-function renderLegend2(svg, parsed, palette, isDark, activeGroup, svgWidth, titleOffset) {
-  const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-  const pillBorder = mix(palette.textMuted, palette.bg, 50);
-  let totalW = 0;
-  for (const tg of parsed.tagGroups) {
-    const isActive = activeGroup?.toLowerCase() === tg.name.toLowerCase();
-    totalW += measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    if (isActive) {
-      totalW += 6;
-      for (const entry of tg.entries) {
-        totalW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
-      }
-    }
-    totalW += LEGEND_GROUP_GAP;
-  }
-  const legendX = Math.max(LEGEND_CAPSULE_PAD, (svgWidth - totalW) / 2);
-  const legendY = titleOffset + 4;
-  const legendG = svg.append("g").attr("transform", `translate(${legendX},${legendY})`);
-  let x = 0;
-  for (const tg of parsed.tagGroups) {
-    const isActiveGroup = activeGroup?.toLowerCase() === tg.name.toLowerCase();
-    const groupG = legendG.append("g").attr("class", "bl-legend-group").attr("data-legend-group", tg.name.toLowerCase()).style("cursor", "pointer");
-    const nameW = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    const tagPill = groupG.append("rect").attr("x", x).attr("y", 0).attr("width", nameW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    if (isActiveGroup) {
-      tagPill.attr("stroke", pillBorder).attr("stroke-width", 0.75);
-    }
-    groupG.append("text").attr("x", x + nameW / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", isActiveGroup ? palette.text : palette.textMuted).attr("pointer-events", "none").text(tg.name);
-    x += nameW;
-    if (isActiveGroup) {
-      x += 6;
-      for (const entry of tg.entries) {
-        const entryColor = entry.color || palette.textMuted;
-        const ew = measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE);
-        const entryG = groupG.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
-        entryG.append("circle").attr("cx", x + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entryColor);
-        entryG.append("text").attr("x", x + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entry.value);
-        x += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + ew + LEGEND_ENTRY_TRAIL;
-      }
-    }
-    x += LEGEND_GROUP_GAP;
+    const legendConfig = {
+      groups: parsed.tagGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: "fixed"
+    };
+    const legendState = { activeGroup };
+    const legendG = svg.append("g").attr("transform", `translate(0,${titleOffset + 4})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      width
+    );
+    legendG.selectAll("[data-legend-group]").classed("bl-legend-group", true);
   }
 }
 function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark, options) {
@@ -15464,7 +15972,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     exportDims: options?.exportDims
   });
 }
-var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB;
+var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -15472,6 +15980,7 @@ var init_renderer6 = __esm({
     d3Shape4 = __toESM(require("d3-shape"), 1);
     init_fonts();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_color_utils();
     init_tag_groups();
@@ -15492,6 +16001,7 @@ var init_renderer6 = __esm({
     GROUP_LABEL_FONT_SIZE = 14;
     lineGeneratorLR = d3Shape4.line().x((d) => d.x).y((d) => d.y).curve(d3Shape4.curveMonotoneX);
     lineGeneratorTB = d3Shape4.line().x((d) => d.x).y((d) => d.y).curve(d3Shape4.curveMonotoneY);
+    lineGeneratorLinear2 = d3Shape4.line().x((d) => d.x).y((d) => d.y).curve(d3Shape4.curveLinear);
   }
 });
 
@@ -17398,7 +17908,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
-    renderLegend3(
+    renderLegend2(
       legendParent,
       layout,
       palette,
@@ -17759,52 +18269,28 @@ function placeEdgeLabels(labels, edges, obstacleRects) {
     placedRects.push({ x: lbl.x, y: lbl.y, w: lbl.bgW, h: lbl.bgH });
   }
 }
-function renderLegend3(parent, layout, palette, isDark, activeTagGroup, fixedWidth) {
-  const visibleGroups = activeTagGroup != null ? layout.legend.filter(
-    (g) => g.name.toLowerCase() === (activeTagGroup ?? "").toLowerCase()
-  ) : layout.legend;
-  const pillWidthOf = (g) => measureLegendText(g.name, LEGEND_PILL_FONT_SIZE) + 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();
-    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-    const pillLabel = group.name;
-    const pillWidth2 = 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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    }
-    const pillX = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillY = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-    gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth2).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", pillWidth2).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 + pillWidth2 / 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 + pillWidth2 + 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_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 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
-      }
-    }
-  }
+function renderLegend2(parent, layout, palette, isDark, activeTagGroup, fixedWidth) {
+  const groups = layout.legend.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+  }));
+  const legendConfig = {
+    groups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode: "fixed"
+  };
+  const legendState = { activeGroup: activeTagGroup ?? null };
+  const containerWidth = fixedWidth ?? layout.width;
+  renderLegendD3(
+    parent,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    void 0,
+    containerWidth
+  );
+  parent.selectAll("[data-legend-group]").classed("c4-legend-group", true);
 }
 function renderC4Containers(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
   d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
@@ -18015,7 +18501,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
-    renderLegend3(
+    renderLegend2(
       legendParent,
       layout,
       palette,
@@ -18145,6 +18631,7 @@ var init_renderer7 = __esm({
     init_parser6();
     init_layout6();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING7 = 20;
     MAX_SCALE5 = 3;
@@ -21032,17 +21519,17 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
       color: r.color,
       key: r.name.toLowerCase().replace(/\s+/g, "-")
     }));
-    const pillWidth2 = measureLegendText("Capabilities", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    let entriesWidth2 = 0;
+    const pillWidth3 = measureLegendText("Capabilities", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entriesWidth3 = 0;
     for (const e of entries) {
-      entriesWidth2 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+      entriesWidth3 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
     }
     groups.push({
       name: "Capabilities",
       type: "role",
       entries,
-      width: LEGEND_CAPSULE_PAD * 2 + pillWidth2 + 4 + entriesWidth2,
-      minifiedWidth: pillWidth2
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth3 + 4 + entriesWidth3,
+      minifiedWidth: pillWidth3
     });
   }
   for (const tg of tagGroups) {
@@ -21057,113 +21544,88 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
       }
     }
     if (entries.length === 0) continue;
-    const pillWidth2 = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    let entriesWidth2 = 0;
+    const pillWidth3 = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entriesWidth3 = 0;
     for (const e of entries) {
-      entriesWidth2 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+      entriesWidth3 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
     }
     groups.push({
       name: tg.name,
       type: "tag",
       tagKey: (tg.alias ?? tg.name).toLowerCase(),
       entries,
-      width: LEGEND_CAPSULE_PAD * 2 + pillWidth2 + 4 + entriesWidth2,
-      minifiedWidth: pillWidth2
+      width: LEGEND_CAPSULE_PAD * 2 + pillWidth3 + 4 + entriesWidth3,
+      minifiedWidth: pillWidth3
     });
   }
   return groups;
 }
-function computePlaybackWidth(playback) {
-  if (!playback) return 0;
-  const pillWidth2 = measureLegendText("Playback", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  if (!playback.expanded) return pillWidth2;
-  let entriesW = 8;
-  entriesW += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
-  for (const s of playback.speedOptions) {
-    entriesW += measureLegendText(`${s}x`, LEGEND_ENTRY_FONT_SIZE) + SPEED_BADGE_H_PAD * 2 + SPEED_BADGE_GAP;
-  }
-  return LEGEND_CAPSULE_PAD * 2 + pillWidth2 + entriesW;
-}
-function renderLegend4(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback) {
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback) {
   if (legendGroups.length === 0 && !playback) 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_GAP : 0;
-  const totalLegendW = legendGroups.reduce((s, g) => s + effectiveW(g), 0) + (legendGroups.length - 1) * LEGEND_GROUP_GAP + trailingGaps + playbackW;
-  let cursorX = (totalWidth - totalLegendW) / 2;
+  const allGroups = legendGroups.map((g) => ({
+    name: g.name,
+    entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+  }));
+  if (playback) {
+    allGroups.push({ name: "Playback", entries: [] });
+  }
+  const legendConfig = {
+    groups: allGroups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode: "fixed",
+    showEmptyGroups: true
+  };
+  const legendState = { activeGroup };
+  renderLegendD3(
+    legendG,
+    legendConfig,
+    legendState,
+    palette,
+    isDark,
+    void 0,
+    totalWidth
+  );
+  legendG.selectAll("[data-legend-group]").classed("infra-legend-group", true);
   for (const group of legendGroups) {
-    const isActive = activeGroup != null && group.name.toLowerCase() === activeGroup.toLowerCase();
-    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
-    const pillLabel = group.name;
-    const pillWidth2 = measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + 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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    }
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = LEGEND_CAPSULE_PAD;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-    gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth2).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", pillWidth2).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 + pillWidth2 / 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 + pillWidth2 + 4;
-      for (const entry of group.entries) {
-        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(
+    const groupKey = group.name.toLowerCase();
+    for (const entry of group.entries) {
+      const entryEl = legendG.select(
+        `[data-legend-group="${groupKey}"] [data-legend-entry="${entry.value.toLowerCase()}"]`
+      );
+      if (!entryEl.empty()) {
+        entryEl.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 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+        );
       }
     }
-    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 pillWidth2 = measureLegendText(pillLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    }
-    const pillXOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = isExpanded ? LEGEND_CAPSULE_PAD : 0;
-    const pillH = LEGEND_HEIGHT - (isExpanded ? LEGEND_CAPSULE_PAD * 2 : 0);
-    pbG.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth2).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", pillWidth2).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 + pillWidth2 / 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", isExpanded ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
-    if (isExpanded) {
-      let entryX = pillXOff + pillWidth2 + 8;
-      const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 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_SIZE).attr("fill", palette.textMuted).attr("data-playback-action", "toggle-pause").style("cursor", "pointer").text(ppLabel);
-      entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
-      for (const s of playback.speedOptions) {
-        const label = `${s}x`;
-        const isActive = playback.speed === s;
-        const slotW = measureLegendText(label, LEGEND_ENTRY_FONT_SIZE) + SPEED_BADGE_H_PAD * 2;
-        const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
-        const badgeY = (LEGEND_HEIGHT - 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_SIZE).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_GAP;
+  const playbackEl = legendG.select('[data-legend-group="playback"]');
+  if (!playbackEl.empty()) {
+    playbackEl.classed("infra-playback-pill", true);
+  }
+  if (playback && playback.expanded && !playbackEl.empty()) {
+    const pillWidth3 = measureLegendText("Playback", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+    let entryX = pillWidth3 + 8;
+    const entryY = LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1;
+    const ppLabel = playback.paused ? "\u25B6" : "\u23F8";
+    playbackEl.append("text").attr("x", entryX).attr("y", entryY).attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("fill", palette.textMuted).attr("data-playback-action", "toggle-pause").style("cursor", "pointer").text(ppLabel);
+    entryX += LEGEND_PILL_FONT_SIZE * 0.8 + 6;
+    for (const s of playback.speedOptions) {
+      const label = `${s}x`;
+      const isSpeedActive = playback.speed === s;
+      const slotW = measureLegendText(label, LEGEND_ENTRY_FONT_SIZE) + SPEED_BADGE_H_PAD * 2;
+      const badgeH = LEGEND_ENTRY_FONT_SIZE + SPEED_BADGE_V_PAD * 2;
+      const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
+      const speedG = playbackEl.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", isSpeedActive ? 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_SIZE).attr("font-weight", isSpeedActive ? "600" : "400").attr("fill", isSpeedActive ? palette.bg : palette.textMuted).attr("text-anchor", "middle").text(label);
+      entryX += slotW + SPEED_BADGE_GAP;
+    }
   }
 }
 function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, expandedNodeIds, exportMode, collapsedNodes) {
@@ -21294,7 +21756,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         "viewBox",
         `0 0 ${containerWidth} ${LEGEND_HEIGHT + LEGEND_FIXED_GAP3}`
       ).attr("preserveAspectRatio", "xMidYMid meet").style("display", "block").style("pointer-events", "none");
-      renderLegend4(
+      renderLegend3(
         legendSvg,
         legendGroups,
         containerWidth,
@@ -21306,7 +21768,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
       );
       legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
     } else {
-      renderLegend4(
+      renderLegend3(
         rootSvg,
         legendGroups,
         totalWidth,
@@ -21340,6 +21802,7 @@ var init_renderer8 = __esm({
     init_compute();
     init_layout8();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     NODE_FONT_SIZE3 = 13;
     META_FONT_SIZE5 = 10;
@@ -22965,7 +23428,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     const isActive = activeGroupName?.toLowerCase() === group.name.toLowerCase();
     const isSwimlane = currentSwimlaneGroup?.toLowerCase() === group.name.toLowerCase();
     const showIcon = !legendViewMode && tagGroups.length > 0;
-    const iconReserve = showIcon ? LEGEND_ICON_W : 0;
+    const iconReserve = showIcon && isActive ? LEGEND_ICON_W : 0;
     const pillW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD + iconReserve;
     let groupW = pillW;
     if (isActive) {
@@ -22992,83 +23455,110 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
   const legendX = (containerWidth - totalW) / 2;
   const legendRow = svg.append("g").attr("class", "gantt-tag-legend-container").attr("transform", `translate(${legendX}, ${legendY})`);
   let cursorX = 0;
-  for (let i = 0; i < visibleGroups.length; i++) {
-    const group = visibleGroups[i];
-    const isActive = activeGroupName?.toLowerCase() === group.name.toLowerCase();
-    const isSwimlane = currentSwimlaneGroup?.toLowerCase() === group.name.toLowerCase();
+  if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
     const iconReserve = showIcon ? LEGEND_ICON_W : 0;
-    const pillW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD + iconReserve;
-    const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-    const groupW = groupWidths[i];
-    const gEl = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "gantt-tag-legend-group").attr("data-tag-group", group.name).attr("data-line-number", String(group.lineNumber)).style("cursor", "pointer").on("click", () => {
-      if (onToggle) onToggle(group.name);
+    const legendGroups = visibleGroups.map((g) => {
+      const key = g.name.toLowerCase();
+      const entries = filteredEntries.get(key) ?? g.entries;
+      return {
+        name: g.name,
+        entries: entries.map((e) => ({ value: e.value, color: e.color }))
+      };
     });
-    if (isActive) {
-      gEl.append("rect").attr("width", groupW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-    }
-    const pillXOff = isActive ? LEGEND_CAPSULE_PAD : 0;
-    const pillYOff = LEGEND_CAPSULE_PAD;
-    gEl.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) {
-      gEl.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);
-    }
-    const textW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    gEl.append("text").attr("x", pillXOff + textW / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("text-anchor", "middle").attr("font-size", `${LEGEND_PILL_FONT_SIZE}px`).attr("font-weight", "500").attr("fill", isActive || isSwimlane ? palette.text : palette.textMuted).text(group.name);
-    if (showIcon) {
-      const iconX = pillXOff + textW + 3;
-      const iconY = (LEGEND_HEIGHT - 10) / 2;
-      const iconEl = drawSwimlaneIcon(gEl, iconX, iconY, isSwimlane, palette);
-      iconEl.append("title").text(`Group by ${group.name}`);
-      iconEl.style("cursor", "pointer").on("click", (event) => {
-        event.stopPropagation();
-        if (onSwimlaneChange) {
-          onSwimlaneChange(
-            currentSwimlaneGroup?.toLowerCase() === group.name.toLowerCase() ? null : group.name
-          );
-        }
-      });
-    }
-    if (isActive) {
-      const tagKey = group.name.toLowerCase();
-      const entries = filteredEntries.get(tagKey) ?? group.entries;
-      let ex = pillXOff + pillW + LEGEND_CAPSULE_PAD + 4;
-      for (const entry of entries) {
-        const entryValue = entry.value.toLowerCase();
-        const entryG = gEl.append("g").attr("class", "gantt-legend-entry").attr("data-line-number", String(entry.lineNumber)).style("cursor", "pointer");
-        entryG.append("circle").attr("cx", ex + LEGEND_DOT_R).attr("cy", LEGEND_HEIGHT / 2).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
-        entryG.append("text").attr("x", ex + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP).attr("y", LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 2).attr("text-anchor", "start").attr("font-size", `${LEGEND_ENTRY_FONT_SIZE}px`).attr("fill", palette.textMuted).text(entry.value);
-        entryG.on("mouseenter", () => {
+    const legendConfig = {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "below-title"
+      },
+      mode: "fixed",
+      capsulePillAddonWidth: iconReserve
+    };
+    const legendState = { activeGroup: activeGroupName };
+    const tagGroupsW = visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) + Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    const tagGroupG = legendRow.append("g");
+    const legendCallbacks = {
+      onGroupToggle: onToggle,
+      onEntryHover: (groupName, entryValue) => {
+        const tagKey = groupName.toLowerCase();
+        if (entryValue) {
+          const ev = entryValue.toLowerCase();
           chartG.selectAll(".gantt-task").each(function() {
             const el = d3Selection10.select(this);
-            const matches = el.attr(`data-tag-${tagKey}`) === entryValue;
-            el.attr("opacity", matches ? 1 : FADE_OPACITY);
+            el.attr(
+              "opacity",
+              el.attr(`data-tag-${tagKey}`) === ev ? 1 : FADE_OPACITY
+            );
           });
           chartG.selectAll(".gantt-milestone").attr("opacity", FADE_OPACITY);
           chartG.selectAll(".gantt-group-bar, .gantt-group-summary").attr("opacity", FADE_OPACITY);
           svg.selectAll(".gantt-task-label").each(function() {
             const el = d3Selection10.select(this);
-            const matches = el.attr(`data-tag-${tagKey}`) === entryValue;
-            el.attr("opacity", matches ? 1 : FADE_OPACITY);
+            el.attr(
+              "opacity",
+              el.attr(`data-tag-${tagKey}`) === ev ? 1 : FADE_OPACITY
+            );
           });
           svg.selectAll(".gantt-group-label").attr("opacity", FADE_OPACITY);
           svg.selectAll(".gantt-lane-header").each(function() {
             const el = d3Selection10.select(this);
-            const matches = el.attr(`data-tag-${tagKey}`) === entryValue;
-            el.attr("opacity", matches ? 1 : FADE_OPACITY);
+            el.attr(
+              "opacity",
+              el.attr(`data-tag-${tagKey}`) === ev ? 1 : FADE_OPACITY
+            );
           });
           chartG.selectAll(".gantt-lane-band, .gantt-lane-accent").attr("opacity", FADE_OPACITY);
-        }).on("mouseleave", () => {
+        } else {
           if (criticalPathActive) {
             applyCriticalPathHighlight(svg, chartG);
           } else {
             resetHighlightAll(svg, chartG);
           }
-        });
-        ex += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+        }
+      },
+      onGroupRendered: (groupName, groupEl, _isActive) => {
+        const group = visibleGroups.find((g) => g.name === groupName);
+        if (group) {
+          groupEl.attr("data-tag-group", group.name).attr("data-line-number", String(group.lineNumber));
+        }
+        if (showIcon && _isActive) {
+          const isSwimlane = currentSwimlaneGroup?.toLowerCase() === groupName.toLowerCase();
+          const textW = measureLegendText(groupName, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
+          const pillXOff = LEGEND_CAPSULE_PAD;
+          const iconX = pillXOff + textW + 3;
+          const iconY = (LEGEND_HEIGHT - 10) / 2;
+          const iconEl = drawSwimlaneIcon(
+            groupEl,
+            iconX,
+            iconY,
+            isSwimlane,
+            palette
+          );
+          iconEl.append("title").text(`Group by ${groupName}`);
+          iconEl.style("cursor", "pointer").on("click", (event) => {
+            event.stopPropagation();
+            if (onSwimlaneChange) {
+              onSwimlaneChange(
+                currentSwimlaneGroup?.toLowerCase() === groupName.toLowerCase() ? null : groupName
+              );
+            }
+          });
+        }
       }
+    };
+    renderLegendD3(
+      tagGroupG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      legendCallbacks,
+      tagGroupsW
+    );
+    for (let i = 0; i < visibleGroups.length; i++) {
+      cursorX += groupWidths[i] + LEGEND_GROUP_GAP;
     }
-    cursorX += groupW + LEGEND_GROUP_GAP;
   }
   if (hasCriticalPath) {
     const cpLineNum = optionLineNumbers["critical-path"];
@@ -23697,6 +24187,7 @@ var init_renderer9 = __esm({
     init_tag_groups();
     init_d3();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     BAR_H = 22;
     ROW_GAP = 6;
@@ -24866,57 +25357,29 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   }
   if (parsed.tagGroups.length > 0) {
     const legendY = TOP_MARGIN + titleOffset;
-    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 pillWidth2 = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-      const entries = tg.entries.map((e) => ({
+    const resolvedGroups = parsed.tagGroups.filter((tg) => tg.entries.length > 0).map((tg) => ({
+      name: tg.name,
+      entries: tg.entries.map((e) => ({
         value: e.value,
         color: resolveColor(e.color) ?? e.color
-      }));
-      let totalWidth2 = pillWidth2;
-      if (isActive) {
-        let entriesWidth2 = 0;
-        for (const entry of entries) {
-          entriesWidth2 += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
-        }
-        totalWidth2 = LEGEND_CAPSULE_PAD * 2 + pillWidth2 + 4 + entriesWidth2;
-      }
-      legendItems.push({ group: tg, isActive, pillWidth: pillWidth2, totalWidth: totalWidth2, entries });
-    }
-    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 = 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_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
-      }
-      const pillXOff = item.isActive ? LEGEND_CAPSULE_PAD : 0;
-      const pillYOff = LEGEND_CAPSULE_PAD;
-      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
-      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_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_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 + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
-        }
-      }
-      legendX += item.totalWidth + LEGEND_GROUP_GAP;
-    }
+      }))
+    }));
+    const legendConfig = {
+      groups: resolvedGroups,
+      position: { placement: "top-center", titleRelation: "below-title" },
+      mode: "fixed"
+    };
+    const legendState = { activeGroup: activeTagGroup ?? null };
+    const legendG = svg.append("g").attr("class", "sequence-legend").attr("transform", `translate(0,${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      svgWidth
+    );
   }
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
@@ -25476,6 +25939,7 @@ var init_renderer10 = __esm({
     init_parser();
     init_tag_resolution();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
@@ -28131,7 +28595,6 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const LG_ENTRY_FONT_SIZE = LEGEND_ENTRY_FONT_SIZE;
     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 = d3Selection13.select(container).select("svg");
     const mainG = mainSvg.select("g");
@@ -28170,11 +28633,6 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           (lg) => effectiveColorKey != null && lg.group.name.toLowerCase() === effectiveColorKey
         ) : legendGroups;
         if (visibleGroups.length === 0) return;
-        const totalW = visibleGroups.reduce((s, lg) => {
-          const isActive = viewMode || currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
-          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(
@@ -28182,82 +28640,85 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             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 pillWidth2 = measureLegendText(pillLabel, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
-          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;
-              drawLegend2();
-              recolorEvents2();
-              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
-            });
-          }
-          if (isActive) {
-            gEl.append("rect").attr("width", lg.expandedWidth).attr("height", LG_HEIGHT).attr("rx", LG_HEIGHT / 2).attr("fill", groupBg);
-          }
-          const pillXOff = isActive ? LG_CAPSULE_PAD : 0;
-          const pillYOff = LG_CAPSULE_PAD;
-          const pillH = LG_HEIGHT - LG_CAPSULE_PAD * 2;
-          gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth2).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", pillWidth2).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 + pillWidth2 / 2).attr("y", LG_HEIGHT / 2 + LG_PILL_FONT_SIZE / 2 - 2).attr("font-size", LG_PILL_FONT_SIZE).attr("font-weight", "500").attr("font-family", FONT_FAMILY).attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
-          if (isActive) {
-            let entryX;
-            if (!viewMode) {
-              const iconX = pillXOff + pillWidth2 + 5;
+        const iconAddon = viewMode ? 0 : LG_ICON_W;
+        const centralGroups = visibleGroups.map((lg) => ({
+          name: lg.group.name,
+          entries: lg.group.entries.map((e) => ({
+            value: e.value,
+            color: e.color
+          }))
+        }));
+        const centralActive = viewMode ? effectiveColorKey : currentActiveGroup;
+        const centralConfig = {
+          groups: centralGroups,
+          position: { placement: "top-center", titleRelation: "below-title" },
+          mode: "fixed",
+          capsulePillAddonWidth: iconAddon
+        };
+        const centralState = { activeGroup: centralActive };
+        const centralCallbacks = viewMode ? {} : {
+          onGroupToggle: (groupName) => {
+            currentActiveGroup = currentActiveGroup === groupName.toLowerCase() ? null : groupName.toLowerCase();
+            drawLegend2();
+            recolorEvents2();
+            onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+          },
+          onEntryHover: (groupName, entryValue) => {
+            const tagKey = groupName.toLowerCase();
+            if (entryValue) {
+              const tagVal = entryValue.toLowerCase();
+              fadeToTagValue(mainG, tagKey, tagVal);
+              mainSvg.selectAll("[data-legend-entry]").each(function() {
+                const el = d3Selection13.select(this);
+                const ev = el.attr("data-legend-entry");
+                const eg = el.attr("data-tag-group") ?? el.node()?.closest?.("[data-tag-group]")?.getAttribute("data-tag-group");
+                el.attr(
+                  "opacity",
+                  eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY2
+                );
+              });
+            } else {
+              fadeReset(mainG);
+              mainSvg.selectAll("[data-legend-entry]").attr("opacity", 1);
+            }
+          },
+          onGroupRendered: (groupName, groupEl, isActive) => {
+            const groupKey = groupName.toLowerCase();
+            groupEl.attr("data-tag-group", groupKey);
+            if (isActive && !viewMode) {
+              const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
+              const pillWidth3 = measureLegendText(groupName, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
+              const pillXOff = LG_CAPSULE_PAD;
+              const iconX = pillXOff + pillWidth3 + 5;
               const iconY = (LG_HEIGHT - 10) / 2;
-              const iconEl = drawSwimlaneIcon3(gEl, iconX, iconY, isSwimActive);
+              const iconEl = drawSwimlaneIcon3(
+                groupEl,
+                iconX,
+                iconY,
+                isSwimActive
+              );
               iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
                 event.stopPropagation();
                 currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
-                onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+                onTagStateChange?.(
+                  currentActiveGroup,
+                  currentSwimlaneGroup
+                );
                 relayout2();
               });
-              entryX = pillXOff + pillWidth2 + LG_ICON_W + 4;
-            } else {
-              entryX = pillXOff + pillWidth2 + 8;
-            }
-            for (const entry of lg.group.entries) {
-              const tagKey = lg.group.name.toLowerCase();
-              const tagVal = entry.value.toLowerCase();
-              const entryG = gEl.append("g").attr("class", "tl-tag-legend-entry").attr("data-tag-group", tagKey).attr("data-legend-entry", tagVal);
-              if (!viewMode) {
-                entryG.style("cursor", "pointer").on("mouseenter", (event) => {
-                  event.stopPropagation();
-                  fadeToTagValue(mainG, tagKey, tagVal);
-                  mainSvg.selectAll(".tl-tag-legend-entry").each(function() {
-                    const el = d3Selection13.select(this);
-                    const ev = el.attr("data-legend-entry");
-                    if (ev === "__group__") return;
-                    const eg = el.attr("data-tag-group");
-                    el.attr(
-                      "opacity",
-                      eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY2
-                    );
-                  });
-                }).on("mouseleave", (event) => {
-                  event.stopPropagation();
-                  fadeReset(mainG);
-                  mainSvg.selectAll(".tl-tag-legend-entry").attr("opacity", 1);
-                }).on("click", (event) => {
-                  event.stopPropagation();
-                });
-              }
-              entryG.append("circle").attr("cx", entryX + LG_DOT_R).attr("cy", LG_HEIGHT / 2).attr("r", LG_DOT_R).attr("fill", entry.color);
-              const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
-              entryG.append("text").attr("x", textX).attr("y", LG_HEIGHT / 2 + LG_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LG_ENTRY_FONT_SIZE).attr("font-family", FONT_FAMILY).attr("fill", palette.textMuted).text(entry.value);
-              entryX = textX + measureLegendText(entry.value, LG_ENTRY_FONT_SIZE) + LG_ENTRY_TRAIL;
             }
           }
-          cx += (isActive ? lg.expandedWidth : lg.minifiedWidth) + LG_GROUP_GAP;
-        }
+        };
+        const legendInnerG = legendContainer.append("g").attr("transform", `translate(0, ${legendY})`);
+        renderLegendD3(
+          legendInnerG,
+          centralConfig,
+          centralState,
+          palette,
+          isDark,
+          centralCallbacks,
+          width
+        );
       }, recolorEvents2 = function() {
         const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
         mainG.selectAll(".tl-event").each(function() {
@@ -28282,7 +28743,6 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       };
       var drawSwimlaneIcon2 = drawSwimlaneIcon3, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
       const legendY = title ? 50 : 10;
-      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
       const legendGroups = parsed.timelineTagGroups.map((g) => {
         const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
         const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
@@ -29529,6 +29989,7 @@ var init_d3 = __esm({
     init_parsing();
     init_tag_groups();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
@@ -29707,6 +30168,7 @@ __export(index_exports, {
   computeCardMove: () => computeCardMove,
   computeInfra: () => computeInfra,
   computeInfraLegendGroups: () => computeInfraLegendGroups,
+  computeLegendLayout: () => computeLegendLayout,
   computeScatterLabelGraphics: () => computeScatterLabelGraphics,
   computeTimeTicks: () => computeTimeTicks,
   contrastText: () => contrastText,
@@ -29718,6 +30180,7 @@ __export(index_exports, {
   formatDgmoError: () => formatDgmoError,
   getAvailablePalettes: () => getAvailablePalettes,
   getExtendedChartLegendGroups: () => getExtendedChartLegendGroups,
+  getLegendReservedHeight: () => getLegendReservedHeight,
   getPalette: () => getPalette,
   getRenderCategory: () => getRenderCategory,
   getSeriesColors: () => getSeriesColors,
@@ -29806,7 +30269,9 @@ __export(index_exports, {
   renderInfra: () => renderInfra,
   renderKanban: () => renderKanban,
   renderKanbanForExport: () => renderKanbanForExport,
+  renderLegendD3: () => renderLegendD3,
   renderLegendSvg: () => renderLegendSvg,
+  renderLegendSvgFromConfig: () => renderLegendSvgFromConfig,
   renderOrg: () => renderOrg,
   renderOrgForExport: () => renderOrgForExport,
   renderQuadrant: () => renderQuadrant,
@@ -29846,11 +30311,26 @@ async function ensureDom() {
   const { JSDOM } = await import("jsdom");
   const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
   const win = dom.window;
-  Object.defineProperty(globalThis, "document", { value: win.document, configurable: true });
-  Object.defineProperty(globalThis, "window", { value: win, configurable: true });
-  Object.defineProperty(globalThis, "navigator", { value: win.navigator, configurable: true });
-  Object.defineProperty(globalThis, "HTMLElement", { value: win.HTMLElement, configurable: true });
-  Object.defineProperty(globalThis, "SVGElement", { value: win.SVGElement, configurable: true });
+  Object.defineProperty(globalThis, "document", {
+    value: win.document,
+    configurable: true
+  });
+  Object.defineProperty(globalThis, "window", {
+    value: win,
+    configurable: true
+  });
+  Object.defineProperty(globalThis, "navigator", {
+    value: win.navigator,
+    configurable: true
+  });
+  Object.defineProperty(globalThis, "HTMLElement", {
+    value: win.HTMLElement,
+    configurable: true
+  });
+  Object.defineProperty(globalThis, "SVGElement", {
+    value: win.SVGElement,
+    configurable: true
+  });
 }
 async function render(content, options) {
   const theme = options?.theme ?? "light";
@@ -29859,11 +30339,17 @@ async function render(content, options) {
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
   const chartType = parseDgmoChartType(content);
   const category = chartType ? getRenderCategory(chartType) : null;
+  const legendExportState = options?.legendState ? {
+    activeTagGroup: options.legendState.activeGroup ?? null,
+    hiddenAttributes: options.legendState.hiddenAttributes ? new Set(options.legendState.hiddenAttributes) : void 0
+  } : void 0;
   if (category === "data-chart") {
-    return renderExtendedChartForExport(content, theme, paletteColors, { branding });
+    return renderExtendedChartForExport(content, theme, paletteColors, {
+      branding
+    });
   }
   await ensureDom();
-  return renderForExport(content, theme, paletteColors, void 0, {
+  return renderForExport(content, theme, paletteColors, legendExportState, {
     branding,
     c4Level: options?.c4Level,
     c4System: options?.c4System,
@@ -30586,6 +31072,8 @@ init_flowchart_renderer();
 init_echarts();
 init_legend_svg();
 init_legend_constants();
+init_legend_d3();
+init_legend_layout();
 init_d3();
 init_renderer10();
 init_colors();
@@ -31430,6 +31918,7 @@ init_branding();
   computeCardMove,
   computeInfra,
   computeInfraLegendGroups,
+  computeLegendLayout,
   computeScatterLabelGraphics,
   computeTimeTicks,
   contrastText,
@@ -31441,6 +31930,7 @@ init_branding();
   formatDgmoError,
   getAvailablePalettes,
   getExtendedChartLegendGroups,
+  getLegendReservedHeight,
   getPalette,
   getRenderCategory,
   getSeriesColors,
@@ -31529,7 +32019,9 @@ init_branding();
   renderInfra,
   renderKanban,
   renderKanbanForExport,
+  renderLegendD3,
   renderLegendSvg,
+  renderLegendSvgFromConfig,
   renderOrg,
   renderOrgForExport,
   renderQuadrant,