@diagrammo/dgmo 0.8.9 → 0.8.11

package/dist/index.js

@@ -122,6 +122,183 @@ var init_branding = __esm({
   }
 });
 
+// src/label-layout.ts
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function rectCircleOverlap(rect, circle) {
+  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
+  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
+  const dx = nearestX - circle.cx;
+  const dy = nearestY - circle.cy;
+  return dx * dx + dy * dy < circle.r * circle.r;
+}
+function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius, fontSize) {
+  const labelHeight = fontSize + 4;
+  const stepSize = labelHeight + 2;
+  const minGap = pointRadius + 4;
+  const pointCircles = points.map((p) => ({
+    cx: p.cx,
+    cy: p.cy,
+    r: pointRadius
+  }));
+  const placedLabels = [];
+  const results = [];
+  for (let i = 0; i < points.length; i++) {
+    const pt = points[i];
+    const labelWidth = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
+    let best = null;
+    const directions = [
+      {
+        // Above
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy - offset - labelHeight;
+          if (ly < chartBounds.top || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Below
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy + offset;
+          if (ly + labelHeight > chartBounds.bottom || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Right
+        gen: (offset) => {
+          const lx = pt.cx + offset;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx + labelWidth > chartBounds.right || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx,
+            textY: pt.cy,
+            anchor: "start"
+          };
+        }
+      },
+      {
+        // Left
+        gen: (offset) => {
+          const lx = pt.cx - offset - labelWidth;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx < chartBounds.left || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx + labelWidth,
+            textY: pt.cy,
+            anchor: "end"
+          };
+        }
+      }
+    ];
+    for (const { gen } of directions) {
+      for (let offset = minGap; ; offset += stepSize) {
+        const cand = gen(offset);
+        if (!cand) break;
+        let collision = false;
+        for (const pl of placedLabels) {
+          if (rectsOverlap(cand.rect, pl)) {
+            collision = true;
+            break;
+          }
+        }
+        if (!collision) {
+          for (const circle of pointCircles) {
+            if (rectCircleOverlap(cand.rect, circle)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          for (const obs of obstacles) {
+            if (rectsOverlap(cand.rect, obs)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          const dist = offset;
+          if (!best || dist < best.dist) {
+            best = {
+              rect: cand.rect,
+              textX: cand.textX,
+              textY: cand.textY,
+              anchor: cand.anchor,
+              dist
+            };
+          }
+          break;
+        }
+      }
+    }
+    if (!best) {
+      const lx = pt.cx - labelWidth / 2;
+      const ly = pt.cy - minGap - labelHeight;
+      best = {
+        rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+        textX: pt.cx,
+        textY: ly + labelHeight / 2,
+        anchor: "middle",
+        dist: minGap
+      };
+    }
+    placedLabels.push(best.rect);
+    let connectorLine;
+    if (best.dist > minGap + stepSize) {
+      const dx = best.textX - pt.cx;
+      const dy = best.textY - pt.cy;
+      const angle = Math.atan2(dy, dx);
+      const x1 = pt.cx + Math.cos(angle) * pointRadius;
+      const y1 = pt.cy + Math.sin(angle) * pointRadius;
+      const x2 = Math.max(
+        best.rect.x,
+        Math.min(pt.cx, best.rect.x + best.rect.w)
+      );
+      const y2 = Math.max(
+        best.rect.y,
+        Math.min(pt.cy, best.rect.y + best.rect.h)
+      );
+      connectorLine = { x1, y1, x2, y2 };
+    }
+    results.push({
+      label: pt.label,
+      x: best.textX,
+      y: best.textY,
+      anchor: best.anchor,
+      connectorLine
+    });
+  }
+  return results;
+}
+var CHAR_WIDTH_RATIO;
+var init_label_layout = __esm({
+  "src/label-layout.ts"() {
+    "use strict";
+    CHAR_WIDTH_RATIO = 0.6;
+  }
+});
+
 // src/colors.ts
 function resolveColor(color, palette) {
   if (color.startsWith("#")) return null;
@@ -1792,7 +1969,7 @@ function measureLegendText(text, fontSize) {
   }
   return w;
 }
-var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
+var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, LEGEND_MAX_ENTRY_ROWS, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
 var init_legend_constants = __esm({
   "src/utils/legend-constants.ts"() {
     "use strict";
@@ -1808,6 +1985,7 @@ var init_legend_constants = __esm({
     LEGEND_EYE_SIZE = 14;
     LEGEND_EYE_GAP = 6;
     LEGEND_ICON_W = 20;
+    LEGEND_MAX_ENTRY_ROWS = 3;
     CHAR_W = {
       " ": 0.28,
       "!": 0.28,
@@ -1901,6 +2079,492 @@ 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 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();
+    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({
@@ -2946,7 +3610,8 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           const branch = {
             label: elseIfMatch[1].trim(),
-            children: []
+            children: [],
+            lineNumber
           };
           if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
           top.block.elseIfBranches.push(branch);
@@ -2969,6 +3634,7 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           top.inElse = true;
           top.activeElseIfBranch = void 0;
+          top.block.elseLineNumber = lineNumber;
         }
       }
       continue;
@@ -4830,10 +5496,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;
@@ -4841,9 +5507,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 };
@@ -4851,7 +5517,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 };
   });
@@ -4905,6 +5571,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";
@@ -5349,7 +6028,8 @@ function buildExtendedChartOption(parsed, palette, isDark) {
   }
   const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
-    return buildSankeyOption(parsed, textColor, colors, titleConfig);
+    const bg = isDark ? palette.surface : palette.bg;
+    return buildSankeyOption(parsed, textColor, colors, bg, titleConfig);
   }
   if (parsed.type === "chord") {
     const bg = isDark ? palette.surface : palette.bg;
@@ -5392,7 +6072,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     titleConfig
   );
 }
-function buildSankeyOption(parsed, textColor, colors, titleConfig) {
+function buildSankeyOption(parsed, textColor, colors, bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5400,12 +6080,15 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
       nodeSet.add(link.target);
     }
   }
-  const nodes = Array.from(nodeSet).map((name, index) => ({
-    name,
-    itemStyle: {
-      color: parsed.nodeColors?.[name] ?? colors[index % colors.length]
-    }
-  }));
+  const tintNode = (c) => mix(c, bg, 75);
+  const tintLink = (c) => mix(c, bg, 45);
+  const nodeColorMap = /* @__PURE__ */ new Map();
+  const nodes = Array.from(nodeSet).map((name, index) => {
+    const raw = parsed.nodeColors?.[name] ?? colors[index % colors.length];
+    const tinted = tintNode(raw);
+    nodeColorMap.set(name, tintLink(raw));
+    return { name, itemStyle: { color: tinted } };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -5428,11 +6111,13 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
           source: link.source,
           target: link.target,
           value: link.value,
-          ...link.color && { lineStyle: { color: link.color } }
+          lineStyle: {
+            color: link.color ? tintLink(link.color) : nodeColorMap.get(link.source)
+          }
         })),
         lineStyle: {
-          color: "gradient",
-          curveness: 0.5
+          curveness: 0.5,
+          opacity: 0.6
         },
         label: {
           color: textColor,
@@ -5689,16 +6374,6 @@ function getExtendedChartLegendGroups(parsed, colors) {
   }
   return [];
 }
-function rectsOverlap(a, b) {
-  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
-}
-function rectCircleOverlap(rect, circle) {
-  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
-  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
-  const dx = nearestX - circle.cx;
-  const dy = nearestY - circle.cy;
-  return dx * dx + dy * dy < circle.r * circle.r;
-}
 function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize, bg) {
   const labelHeight = fontSize + 4;
   const stepSize = labelHeight + 2;
@@ -6075,12 +6750,17 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       maxValue = Math.max(maxValue, value);
     });
   });
+  const CHAR_WIDTH7 = 7;
+  const ESTIMATED_CHART_WIDTH = 900;
+  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const slotWidth = columns.length > 0 ? ESTIMATED_CHART_WIDTH / columns.length : Infinity;
+  const needsRotation = longestCol * CHAR_WIDTH7 > slotWidth * 0.85;
   return {
     ...CHART_BASE,
     title: titleConfig,
     grid: {
       left: "3%",
-      right: "10%",
+      right: "3%",
       bottom: "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
@@ -6088,6 +6768,7 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
     xAxis: {
       type: "category",
       data: columns,
+      position: "top",
       splitArea: {
         show: true
       },
@@ -6096,12 +6777,19 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0,
+        ...needsRotation && {
+          rotate: -45,
+          width: 200,
+          overflow: "none"
+        }
       }
     },
     yAxis: {
       type: "category",
       data: rowLabels,
+      inverse: true,
       splitArea: {
         show: true
       },
@@ -6110,16 +6798,14 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0
       }
     },
     visualMap: {
+      show: false,
       min: minValue,
       max: maxValue,
-      calculable: true,
-      orient: "vertical",
-      right: "2%",
-      top: "center",
       inRange: {
         color: [
           mix(palette.primary, bg, 30),
@@ -6127,9 +6813,6 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           mix(palette.colors.yellow, bg, 30),
           mix(palette.colors.orange, bg, 30)
         ]
-      },
-      textStyle: {
-        color: textColor
       }
     },
     series: [
@@ -6147,9 +6830,8 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           fontWeight: "bold"
         },
         emphasis: {
-          ...EMPHASIS_SELF
-        },
-        blur: BLUR_DIM
+          disabled: true
+        }
       }
     ]
   };
@@ -7003,6 +7685,7 @@ var init_echarts = __esm({
     init_fonts();
     init_branding();
     init_legend_svg();
+    init_label_layout();
     init_palettes();
     init_color_utils();
     init_chart();
@@ -8357,7 +9040,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) {
@@ -8366,8 +9054,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;
 }
@@ -8429,6 +9123,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];
@@ -8530,6 +9225,7 @@ function parseSitemap(content, palette) {
         deferredArrows.push({
           sourceNode: source,
           targetLabel: arrowInfo.target,
+          targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
           color: arrowInfo.color,
           lineNumber
@@ -8563,6 +9259,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;
@@ -8603,22 +9300,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 = [];
@@ -10332,6 +11048,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;
@@ -10570,6 +11287,8 @@ function parseBoxesAndLines(content) {
       };
       groupLabels.add(label);
       groupStack.push({ group, indent, depth: currentDepth });
+      lastNodeLabel = label;
+      lastSourceIsGroup = true;
       continue;
     }
     if (trimmed.includes("->") || trimmed.includes("<->")) {
@@ -10587,7 +11306,8 @@ function parseBoxesAndLines(content) {
           );
           continue;
         }
-        edgeText = `${lastNodeLabel} ${trimmed}`;
+        const sourcePrefix = lastSourceIsGroup ? `[${lastNodeLabel}]` : lastNodeLabel;
+        edgeText = `${sourcePrefix} ${trimmed}`;
       }
       const edge = parseEdgeLine(
         edgeText,
@@ -10610,6 +11330,7 @@ function parseBoxesAndLines(content) {
       continue;
     }
     lastNodeLabel = node.label;
+    lastSourceIsGroup = false;
     const gs = currentGroupState();
     const isGroupChild = gs && indent > gs.indent;
     if (nodeLabels.has(node.label)) {
@@ -10637,14 +11358,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);
@@ -10673,10 +11422,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 = {};
@@ -10697,7 +11450,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
     }
     return {
       source: source2,
-      target: rest2,
+      target: resolveEndpoint(rest2),
       label: label || void 0,
       bidirectional: true,
       lineNumber: lineNum,
@@ -10706,7 +11459,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("|");
@@ -10726,7 +11479,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
     }
     return {
       source: source2,
-      target: rest2,
+      target: resolveEndpoint(rest2),
       bidirectional: true,
       lineNumber: lineNum,
       metadata: metadata2
@@ -10734,7 +11487,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) {
@@ -10756,7 +11509,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
       }
       return {
         source: source2,
-        target: rest2,
+        target: resolveEndpoint(rest2),
         label,
         bidirectional: false,
         lineNumber: lineNum,
@@ -10766,7 +11519,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(
@@ -10787,7 +11540,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   }
   return {
     source,
-    target: rest,
+    target: resolveEndpoint(rest),
     bidirectional: false,
     lineNumber: lineNum,
     metadata
@@ -11102,14 +11855,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,
@@ -11119,7 +11872,7 @@ function computeLegendGroups(tagGroups, showEyeIcons, usedValuesByGroup) {
       })),
       x: 0,
       y: 0,
-      width: capsuleWidth,
+      width: capsuleWidth2,
       height: LEGEND_HEIGHT2,
       minifiedWidth: minPillWidth,
       minifiedHeight: LEGEND_HEIGHT2
@@ -12060,66 +12813,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");
         }
       }
     }
@@ -12153,6 +12917,7 @@ var init_renderer = __esm({
     init_parser4();
     init_layout();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING = 20;
     MAX_SCALE = 3;
@@ -12182,6 +12947,17 @@ __export(layout_exports2, {
   layoutSitemap: () => layoutSitemap
 });
 import dagre from "@dagrejs/dagre";
+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 = {};
@@ -12198,7 +12974,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;
@@ -12207,7 +12986,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 = [];
@@ -12216,21 +13000,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
@@ -12250,10 +13034,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,
@@ -12265,14 +13059,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) => {
@@ -12280,9 +13088,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);
@@ -12344,14 +13163,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}`
+    );
   }
   dagre.layout(g);
   const layoutNodes = [];
@@ -12419,19 +13253,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
     });
   }
   {
@@ -12592,7 +13459,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) {
@@ -12908,7 +13777,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");
     }
@@ -12992,64 +13862,51 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       palette,
       isDark,
       activeTagGroup,
-      width,
-      hiddenAttributes
-    );
-  }
-}
-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;
-    }
+      width,
+      hiddenAttributes
+    );
   }
-  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();
+}
+function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes) {
+  if (legendGroups.length === 0) return;
+  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");
       }
     }
   }
@@ -13103,13 +13960,14 @@ async function renderSitemapForExport(content, theme, palette) {
   const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
   return injectBranding2(svgHtml, brandColor);
 }
-var 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 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";
     init_fonts();
     init_color_utils();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING2 = 20;
     MAX_SCALE2 = 3;
@@ -13133,6 +13991,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);
   }
 });
 
@@ -13395,8 +14254,7 @@ function computeLayout(parsed, _palette) {
     currentX += cl.width + COLUMN_GAP;
   }
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING3;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3 + legendSpace;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3;
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
 function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
@@ -13409,54 +14267,25 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", DIAGRAM_PADDING3).attr("y", DIAGRAM_PADDING3 + TITLE_FONT_SIZE).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   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 titleTextWidth = parsed.title ? measureLegendText(parsed.title, TITLE_FONT_SIZE) + 16 : 0;
+    const legendX = DIAGRAM_PADDING3 + titleTextWidth;
+    const legendY = DIAGRAM_PADDING3 + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
+    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(${legendX},${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      void 0,
+      width - legendX - DIAGRAM_PADDING3
+    );
   }
   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);
@@ -13551,6 +14380,7 @@ var init_renderer3 = __esm({
     init_parser5();
     init_mutations();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING3 = 20;
     COLUMN_GAP = 16;
@@ -13746,14 +14576,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";
@@ -13822,7 +14647,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) {
@@ -13836,32 +14664,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) {
@@ -13905,7 +14734,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;
@@ -13974,15 +14809,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);
   });
 }
@@ -13993,6 +14823,7 @@ var init_renderer4 = __esm({
     init_fonts();
     init_export_container();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_color_utils();
     init_parser2();
@@ -14601,35 +15432,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) => {
@@ -14639,55 +15459,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);
     }
   }
 }
@@ -14730,6 +15530,7 @@ var init_renderer5 = __esm({
     init_palettes();
     init_tag_groups();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_parser3();
     init_layout4();
@@ -14754,6 +15555,17 @@ __export(layout_exports5, {
   layoutBoxesAndLines: () => layoutBoxesAndLines
 });
 import dagre4 from "@dagrejs/dagre";
+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;
@@ -14906,13 +15718,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 ?? [];
@@ -14935,7 +15759,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;
@@ -15001,7 +15826,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
   const maxTextWidth = nodeWidth - NODE_TEXT_PADDING * 2;
   const lineHeight = 1.3;
   for (let fontSize = NODE_FONT_SIZE; fontSize >= MIN_NODE_FONT_SIZE; fontSize--) {
-    const charWidth2 = fontSize * CHAR_WIDTH_RATIO;
+    const charWidth2 = fontSize * CHAR_WIDTH_RATIO2;
     const maxCharsPerLine = Math.floor(maxTextWidth / charWidth2);
     const maxLines = Math.floor((nodeHeight - 8) / (fontSize * lineHeight));
     if (maxCharsPerLine < 2 || maxLines < 1) continue;
@@ -15053,7 +15878,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
     }
     if (hardLines.length <= maxLines) return { lines: hardLines, fontSize };
   }
-  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO;
+  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO2;
   const maxChars = Math.floor((nodeWidth - NODE_TEXT_PADDING * 2) / charWidth);
   const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "\u2026" : label;
   return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
@@ -15205,18 +16030,14 @@ 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})`);
     }
     if (le.label && le.labelX != null && le.labelY != null) {
-      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO;
+      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO2;
       labelPositions.push({
         x: le.labelX,
         y: le.labelY + le.yOffset,
@@ -15274,7 +16095,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       const descY = labelY + lineH / 2 + gap + META_FONT_SIZE3 / 2;
       nodeG.append("text").attr("x", 0).attr("y", labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", NODE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).text(node.label);
       const maxChars = Math.floor(
-        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO)
+        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO2)
       );
       const desc = node.description.length > maxChars ? node.description.slice(0, maxChars - 1) + "\u2026" : node.description;
       const descEl = nodeG.append("text").attr("x", 0).attr("y", descY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", META_FONT_SIZE3).attr("fill", palette.textMuted).text(desc);
@@ -15291,50 +16112,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) {
@@ -15342,12 +16136,13 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     exportDims: options?.exportDims
   });
 }
-var 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 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_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
     init_fonts();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     init_color_utils();
     init_tag_groups();
@@ -15362,12 +16157,13 @@ var init_renderer6 = __esm({
     COLLAPSE_BAR_HEIGHT3 = 4;
     ARROWHEAD_W2 = 5;
     ARROWHEAD_H2 = 4;
-    CHAR_WIDTH_RATIO = 0.6;
+    CHAR_WIDTH_RATIO2 = 0.6;
     NODE_TEXT_PADDING = 12;
     GROUP_RX = 8;
     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);
   }
 });
 
@@ -15433,7 +16229,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const nodeGeometry = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (pos)
       nodeGeometry.set(name, {
         y: pos.y,
@@ -15443,14 +16239,14 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const rankMap = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (!pos) continue;
     const rankY = Math.round(pos.y);
     if (!rankMap.has(rankY)) rankMap.set(rankY, []);
     rankMap.get(rankY).push(name);
   }
   for (const [, rankNodes] of rankMap) {
-    rankNodes.sort((a, b) => g.node(a).x - g.node(b).x);
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
   }
   let anyMoved = false;
   for (const [, rankNodes] of rankMap) {
@@ -15477,10 +16273,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
     }
     for (const partition of partitions) {
       if (partition.length < 2) continue;
-      const xSlots = partition.map((name) => g.node(name).x).sort((a, b) => a - b);
+      const xSlots = partition.map((name) => gNode(g, name).x).sort((a, b) => a - b);
       const basePositions = /* @__PURE__ */ new Map();
       for (const name of g.nodes()) {
-        const pos = g.node(name);
+        const pos = gNode(g, name);
         if (pos) basePositions.set(name, pos.x);
       }
       const currentPenalty = computeEdgePenalty(
@@ -15558,7 +16354,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
       }
       if (bestPerm.some((name, i) => name !== partition[i])) {
         for (let i = 0; i < bestPerm.length; i++) {
-          g.node(bestPerm[i]).x = xSlots[i];
+          gNode(g, bestPerm[i]).x = xSlots[i];
           const rankIdx = rankNodes.indexOf(partition[i]);
           if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i];
         }
@@ -15568,10 +16364,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   if (anyMoved) {
     for (const edge of edgeList) {
-      const edgeData = g.edge(edge.source, edge.target);
+      const edgeData = gEdge(g, edge.source, edge.target);
       if (!edgeData) continue;
-      const srcPos = g.node(edge.source);
-      const tgtPos = g.node(edge.target);
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
       if (!srcPos || !tgtPos) continue;
       const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };
       const tgtTop = { x: tgtPos.x, y: tgtPos.y - tgtPos.height / 2 };
@@ -17015,11 +17811,13 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     height: totalHeight
   };
 }
-var CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
+var gNode, gEdge, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout6 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
     init_legend_constants();
+    gNode = (g, name) => g.node(name);
+    gEdge = (g, v, w) => g.edge(v, w);
     CHAR_WIDTH5 = 8;
     MIN_NODE_WIDTH = 160;
     MAX_NODE_WIDTH = 260;
@@ -17276,7 +18074,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
-    renderLegend3(
+    renderLegend2(
       legendParent,
       layout,
       palette,
@@ -17637,52 +18435,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();
@@ -17893,7 +18667,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", activeTagGroup.toLowerCase());
     }
-    renderLegend3(
+    renderLegend2(
       legendParent,
       layout,
       palette,
@@ -18021,6 +18795,7 @@ var init_renderer7 = __esm({
     init_parser6();
     init_layout6();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DIAGRAM_PADDING7 = 20;
     MAX_SCALE5 = 3;
@@ -20910,17 +21685,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) {
@@ -20935,113 +21710,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) {
@@ -21172,7 +21922,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,
@@ -21184,7 +21934,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
       );
       legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
     } else {
-      renderLegend4(
+      renderLegend3(
         rootSvg,
         legendGroups,
         totalWidth,
@@ -21216,6 +21966,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;
@@ -22843,7 +23594,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) {
@@ -22870,83 +23621,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"];
@@ -23573,6 +24351,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;
@@ -24743,57 +25522,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;
@@ -24870,7 +25621,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         for (const branch of el.elseIfBranches) {
           elseIfBranchData.push({
             label: branch.label,
-            indices: collectMsgIndices(branch.children)
+            indices: collectMsgIndices(branch.children),
+            lineNumber: branch.lineNumber
           });
         }
       }
@@ -24931,14 +25683,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
               x1: frameX,
               y1: dividerY,
               x2: frameX + frameW,
-              y2: dividerY
+              y2: dividerY,
+              blockLine: branchData.lineNumber
             });
             deferredLabels.push({
               x: frameX + 6,
               y: dividerY + 14,
               text: `else if ${branchData.label}`,
               bold: false,
-              italic: true
+              italic: true,
+              blockLine: branchData.lineNumber
             });
           }
         }
@@ -24956,14 +25710,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             x1: frameX,
             y1: dividerY,
             x2: frameX + frameW,
-            y2: dividerY
+            y2: dividerY,
+            blockLine: el.elseLineNumber
           });
           deferredLabels.push({
             x: frameX + 6,
             y: dividerY + 14,
             text: "else",
             bold: false,
-            italic: true
+            italic: true,
+            blockLine: el.elseLineNumber
           });
         }
       }
@@ -25009,7 +25765,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   });
   for (const ln of deferredLines) {
-    svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3");
+    const line10 = svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("class", "block-divider");
+    if (ln.blockLine !== void 0)
+      line10.attr("data-block-line", String(ln.blockLine));
   }
   for (const lbl of deferredLabels) {
     const t = svg.append("text").attr("x", lbl.x).attr("y", lbl.y).attr("fill", palette.text).attr("font-size", 11).attr("class", "block-label").text(lbl.text);
@@ -25352,6 +26110,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;
@@ -27832,7 +28591,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
           if (labelFitsInside) {
-            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
           } else {
             const wouldFlipLeft = x + rectW > innerWidth * 0.6;
             const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -27986,7 +28745,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }
         evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
         if (labelFitsInside) {
-          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
         } else {
           const wouldFlipLeft = x + rectW > innerWidth * 0.6;
           const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -28012,7 +28771,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");
@@ -28051,11 +28809,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(
@@ -28063,82 +28816,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() {
@@ -28163,7 +28919,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;
@@ -28358,7 +29113,7 @@ function regionCentroid(circles, inside) {
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
   const { vennSets, vennOverlaps, title } = parsed;
-  if (vennSets.length < 2) return;
+  if (vennSets.length < 2 || vennSets.length > 3) return;
   const init2 = initD3Chart(container, palette, exportDims);
   if (!init2) return;
   const { svg, width, height, textColor, colors } = init2;
@@ -28414,7 +29169,9 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     marginBottom
   ).map((c) => ({ ...c, y: c.y + titleHeight }));
   const scaledR = circles[0].r;
-  svg.append("style").text("circle:focus, circle:focus-visible { outline: none !important; }");
+  svg.append("style").text(
+    "circle:focus, circle:focus-visible { outline-solid: none !important; }"
+  );
   renderChartTitle(
     svg,
     title,
@@ -28596,7 +29353,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   const hoverGroup = svg.append("g");
   circles.forEach((c, i) => {
-    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay([i]);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -28634,7 +29391,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     const declaredOv = vennOverlaps.find(
       (ov) => ov.sets.length === sets.length && ov.sets.every((s, k) => s === sets[k])
     );
-    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay(idxs);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -28768,8 +29525,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
   const LABEL_PAD2 = 40;
-  const CHAR_WIDTH_RATIO2 = 0.6;
-  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO2;
+  const CHAR_WIDTH_RATIO3 = 0.6;
+  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO3;
   const quadrantLabelLayout = (text, qw2, qh2) => {
     const availW = qw2 - LABEL_PAD2;
     const availH = qh2 - LABEL_PAD2;
@@ -28913,16 +29670,45 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (x < 0.5 && y < 0.5) return "bottom-left";
     return "bottom-right";
   };
+  const POINT_RADIUS = 6;
+  const POINT_LABEL_FONT_SIZE = 12;
+  const quadrantLabelObstacles = quadrantDefsWithLabel.map((d) => {
+    const layout = labelLayouts.get(d.label.text);
+    const totalW = Math.max(...layout.lines.map((l) => l.length)) * layout.fontSize * CHAR_WIDTH_RATIO3;
+    const totalH = layout.lines.length * layout.fontSize * 1.2;
+    return {
+      x: d.labelX - totalW / 2,
+      y: d.labelY - totalH / 2,
+      w: totalW,
+      h: totalH
+    };
+  });
+  const pointPixels = quadrantPoints.map((point) => ({
+    label: point.label,
+    cx: xScale(point.x),
+    cy: yScale(point.y)
+  }));
+  const placedPointLabels = computeQuadrantPointLabels(
+    pointPixels,
+    { left: 0, top: 0, right: chartWidth, bottom: chartHeight },
+    quadrantLabelObstacles,
+    POINT_RADIUS,
+    POINT_LABEL_FONT_SIZE
+  );
   const pointsG = chartG.append("g").attr("class", "points");
-  quadrantPoints.forEach((point) => {
+  quadrantPoints.forEach((point, i) => {
     const cx = xScale(point.x);
     const cy = yScale(point.y);
     const quadrant = getPointQuadrant(point.x, point.y);
     const quadDef = quadrantDefs.find((d) => d.position === quadrant);
     const pointColor = quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
+    const placed = placedPointLabels[i];
     const pointG = pointsG.append("g").attr("class", "point-group").attr("data-line-number", String(point.lineNumber));
-    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
-    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
+    if (placed.connectorLine) {
+      pointG.append("line").attr("x1", placed.connectorLine.x1).attr("y1", placed.connectorLine.y1).attr("x2", placed.connectorLine.x2).attr("y2", placed.connectorLine.y2).attr("stroke", pointColor).attr("stroke-width", 1).attr("opacity", 0.5);
+    }
+    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", POINT_RADIUS).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
+    pointG.append("text").attr("x", placed.x).attr("y", placed.y).attr("text-anchor", placed.anchor).attr("dominant-baseline", "central").attr("fill", textColor).attr("font-size", `${POINT_LABEL_FONT_SIZE}px`).attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
     const tipHtml = `<strong>${point.label}</strong><br>x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`;
     pointG.style("cursor", onClickItem ? "pointer" : "default").on("mouseenter", (event) => {
       showTooltip(tooltip, tipHtml, event);
@@ -28931,7 +29717,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
       showTooltip(tooltip, tipHtml, event);
     }).on("mouseleave", () => {
       hideTooltip(tooltip);
-      pointG.select("circle").attr("r", 6);
+      pointG.select("circle").attr("r", POINT_RADIUS);
     }).on("click", () => {
       if (onClickItem && point.lineNumber) onClickItem(point.lineNumber);
     });
@@ -29398,6 +30184,7 @@ var init_d3 = __esm({
     "use strict";
     init_fonts();
     init_branding();
+    init_label_layout();
     init_colors();
     init_palettes();
     init_color_utils();
@@ -29405,6 +30192,7 @@ var init_d3 = __esm({
     init_parsing();
     init_tag_groups();
     init_legend_constants();
+    init_legend_d3();
     init_title_constants();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
@@ -29559,11 +30347,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";
@@ -29572,11 +30375,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,
@@ -30299,6 +31108,8 @@ init_flowchart_renderer();
 init_echarts();
 init_legend_svg();
 init_legend_constants();
+init_legend_d3();
+init_legend_layout();
 init_d3();
 init_renderer10();
 init_colors();
@@ -31145,10 +31956,12 @@ export {
   computeCardMove,
   computeInfra,
   computeInfraLegendGroups,
+  computeLegendLayout,
   computeScatterLabelGraphics,
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
+  draculaPalette,
   encodeDiagramUrl,
   extractDiagramSymbols,
   extractTagDeclarations,
@@ -31156,6 +31969,7 @@ export {
   formatDgmoError,
   getAvailablePalettes,
   getExtendedChartLegendGroups,
+  getLegendReservedHeight,
   getPalette,
   getRenderCategory,
   getSeriesColors,
@@ -31191,6 +32005,7 @@ export {
   looksLikeSitemap,
   looksLikeState,
   makeDgmoError,
+  monokaiPalette,
   mute,
   nord,
   nordPalette,
@@ -31244,7 +32059,9 @@ export {
   renderInfra,
   renderKanban,
   renderKanbanForExport,
+  renderLegendD3,
   renderLegendSvg,
+  renderLegendSvgFromConfig,
   renderOrg,
   renderOrgForExport,
   renderQuadrant,