@diagrammo/dgmo 0.90.0 → 0.91.0

package/dist/{chunk-4IYJOXGS.js → chunk-TLPY4ZBI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-24YPR5EH.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NJYA4QSN.js";
+} from "./chunk-QVKTAU7P.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,
@@ -36,11 +36,11 @@ import {
   isSequenceBlock,
   isSequenceNote,
   isSequenceSection
-} from "./chunk-62VWZ3SE.js";
+} from "./chunk-ZB2Q67NO.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
@@ -234,7 +234,7 @@ function resolveSequenceTags(parsed, activeTagGroup) {
   const groupKey = tagAttrKey(group.name);
   const participantMeta = /* @__PURE__ */ new Map();
   for (const p of parsed.participants) {
-    participantMeta.set(p.id, { ...p.metadata || {} });
+    participantMeta.set(p.id, { ...p.metadata ?? {} });
   }
   propagateGroupTags(participantMeta, parsed.groups);
   const inherited = computeReceiverInheritance(
@@ -332,7 +332,7 @@ function wrapLabelWords(words, maxWidth, fontSize) {
   return lines;
 }
 var fill = (palette, isDark, color, fillMode) => color ? shapeFill(palette, color, isDark, { mode: fillMode }) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
-var stroke = (palette, color) => color || palette.border;
+var stroke = (palette, color) => color ?? palette.border;
 var SW = 1.5;
 var W = PARTICIPANT_BOX_WIDTH;
 var H = PARTICIPANT_BOX_HEIGHT;
@@ -664,10 +664,29 @@ function applyGroupOrdering(participants, groups, messages = []) {
   }
   return result;
 }
-function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
-  d3Selection.select(container).selectAll("*").remove();
+var BLOCK_HEADER_SPACE = 30;
+var BLOCK_AFTER_SPACE = 15;
+var FRAME_PADDING_TOP = 42;
+var FRAME_PADDING_X = 30;
+var FRAME_PADDING_BOTTOM = 15;
+var FRAME_LABEL_HEIGHT = 18;
+var SELF_ARROW_FRAME_PAD = 10;
+var GROUP_PADDING_X = 15;
+var GROUP_NEST_INSET_X = 6;
+var GROUP_NEST_MIN_PAD_X = 4;
+var GROUP_NEST_INSET_Y = 6;
+var GROUP_PADDING_TOP = 22;
+var GROUP_PADDING_BOTTOM = 8;
+var GROUP_LABEL_SIZE = 11;
+var GROUP_LABEL_WEIGHT = "bold";
+function groupBottomPad(depth, maxGroupDepth) {
+  return GROUP_PADDING_BOTTOM + (maxGroupDepth - depth) * GROUP_NEST_INSET_Y;
+}
+function isSectionCollapsed(sec, collapsedSections) {
+  return collapsedSections?.has(sec.lineNumber) ?? false;
+}
+function layoutSequence(parsed, containerWidth, options) {
   const { title, options: parsedOptions } = parsed;
-  const fillMode = fillModeFromOptions(parsedOptions);
   const effectiveCollapsedGroups = options?.collapsedGroups ? new Set(options.collapsedGroups) : new Set(
     parsed.groups.filter((g) => g.collapsed).map((g) => g.lineNumber)
   );
@@ -694,7 +713,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const participants = applyPositionOverrides(
     applyGroupOrdering(sourceParticipants, groups, messages)
   );
-  if (participants.length === 0) return;
+  if (participants.length === 0) return null;
   const groupBoundaryIds = /* @__PURE__ */ new Set();
   if (groups.length > 0) {
     const pToG = /* @__PURE__ */ new Map();
@@ -733,7 +752,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     participants.length * effectiveGap,
     uniformBoxWidth + 40
   );
-  const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const ctx = options?.exportWidth ? ScaleContext.identity() : ScaleContext.from(containerWidth, idealWidth);
   const sGap = ctx.structural(effectiveGap);
   const sBoxW = ctx.structural(uniformBoxWidth);
@@ -786,21 +804,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     parsedOptions["active-tag"],
     options?.activeTagGroup
   ) ?? void 0;
-  let tagMap;
-  const tagValueToColor = /* @__PURE__ */ new Map();
-  if (activeTagGroup) {
-    tagMap = resolveSequenceTags(parsed, activeTagGroup);
-    const tg = parsed.tagGroups.find(
-      (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
-    );
-    if (tg) {
-      for (const entry of tg.entries) {
-        tagValueToColor.set(entry.value.toLowerCase(), entry.color);
-      }
-    }
-  }
-  const getTagColor = (value) => value ? tagValueToColor.get(value.toLowerCase()) : void 0;
-  const tagKey = activeTagGroup ? tagAttrKey(activeTagGroup) : void 0;
   const hiddenMsgIndices = /* @__PURE__ */ new Set();
   if (collapsedSections && collapsedSections.size > 0) {
     const sectionGroups = groupMessagesBySection(elements, messages);
@@ -836,9 +839,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     };
   });
   const stepSpacing = 35;
-  const BLOCK_HEADER_SPACE = 30;
-  const BLOCK_AFTER_SPACE = 15;
-  const FRAME_PADDING_TOP = 42;
   const msgToFirstStep = /* @__PURE__ */ new Map();
   const msgToLastStep = /* @__PURE__ */ new Map();
   renderSteps.forEach((step, si) => {
@@ -907,13 +907,12 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
     return -1;
   };
-  const isSectionCollapsed = (sec) => collapsedSections?.has(sec.lineNumber) ?? false;
-  const collapsedBandPad = (sec) => isSectionCollapsed(sec) ? COLLAPSED_SECTION_BAND_EXTRA / 2 : 0;
+  const collapsedBandPad = (sec) => isSectionCollapsed(sec, collapsedSections) ? COLLAPSED_SECTION_BAND_EXTRA / 2 : 0;
   const SECTION_TOP_PAD = 35;
   const SECTION_BOTTOM_PAD = 45;
   const extraBeforeMsg = /* @__PURE__ */ new Map();
   const addExtra = (msgIdx, amount) => {
-    extraBeforeMsg.set(msgIdx, (extraBeforeMsg.get(msgIdx) || 0) + amount);
+    extraBeforeMsg.set(msgIdx, (extraBeforeMsg.get(msgIdx) ?? 0) + amount);
   };
   const markBlockSpacing = (els) => {
     for (let i = 0; i < els.length; i++) {
@@ -1093,7 +1092,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       trailingSections.push(region.section);
       continue;
     }
-    const existing = sectionsBeforeStep.get(filteredStep) || [];
+    const existing = sectionsBeforeStep.get(filteredStep) ?? [];
     existing.push(region.section);
     sectionsBeforeStep.set(filteredStep, existing);
   }
@@ -1102,15 +1101,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     sectionMsgCounts.set(region.section.lineNumber, region.msgIndices.length);
   }
   const sEdgePad = ctx.aesthetic(20);
-  const GROUP_PADDING_X = 15;
-  const GROUP_NEST_INSET_X = 6;
-  const GROUP_NEST_MIN_PAD_X = 4;
-  const GROUP_NEST_INSET_Y = 6;
-  const GROUP_PADDING_TOP = 22;
-  const GROUP_PADDING_BOTTOM = 8;
-  const GROUP_LABEL_SIZE = 11;
   const sGroupLabelSize = ctx.text(GROUP_LABEL_SIZE);
-  const GROUP_LABEL_WEIGHT = "bold";
   const showTitle = !!title && parsedOptions["no-title"] !== "on";
   const titleOffset = showTitle ? sTitleHeight : 0;
   const LEGEND_FIXED_GAP = 8;
@@ -1152,11 +1143,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   });
   const maxGroupDepth = parsed.groups.reduce((d, g) => Math.max(d, g.depth), 0);
   const groupOffset = parsed.groups.length > 0 ? (maxGroupDepth + 1) * GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
-  const groupBottomPad = (depth) => GROUP_PADDING_BOTTOM + (maxGroupDepth - depth) * GROUP_NEST_INSET_Y;
   const participantStartY = sTopMargin + titleOffset + (header.inline ? 0 : legendTopSpace) + sParticipantYOffset + groupOffset;
   const lifelineStartY0 = participantStartY + sBoxH;
   const hasActors = participants.some((p) => p.type === "actor");
-  const messageStartOffset = sMsgStartOffset + (hasActors ? 20 : 0) + (parsed.groups.length > 0 ? groupBottomPad(0) : 0);
+  const messageStartOffset = sMsgStartOffset + (hasActors ? 20 : 0) + (parsed.groups.length > 0 ? groupBottomPad(0, maxGroupDepth) : 0);
   const totalGaps = participants.length > 1 ? participants.length - 1 : 0;
   const numWithinGaps = totalGaps - numGroupGaps;
   let sWithinGap = sGap;
@@ -1223,7 +1213,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       }
       const step = renderSteps[i];
       if (msgToFirstStep.get(step.messageIndex) === i) {
-        const extra = extraBeforeMsg.get(step.messageIndex) || 0;
+        const extra = extraBeforeMsg.get(step.messageIndex) ?? 0;
         curY += extra;
       }
       curY += labelRoomBefore[i];
@@ -1303,6 +1293,20 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       noteTopY + noteH + NOTE_TRAILING_GAP
     );
   }
+  const noteLayouts = /* @__PURE__ */ new Map();
+  for (const [note, topY] of noteYMap) {
+    const position = effectiveNotePosition(note);
+    const afterSelfCall = isNoteAfterSelfCall(note);
+    const maxW = noteEffectiveMaxW(note.participantId, position, afterSelfCall);
+    noteLayouts.set(note, {
+      topY,
+      position,
+      afterSelfCall,
+      maxW,
+      textWidth: noteTextWidth(maxW)
+    });
+  }
+  const stepLabels = renderSteps.map((step) => displayMessageLabel(step));
   const messageAreaHeight = contentBottomY - lifelineStartY0;
   const lifelineLength = messageAreaHeight + sLifelineTail;
   const edgeProjection = (id) => {
@@ -1434,82 +1438,35 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     offsetX = leftMargin + Math.max(0, (svgWidth - totalWidth) / 2);
     buildParticipantX();
   }
-  const svg = d3Selection.select(container).append("svg").attr("width", svgWidth).attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
-  if (ctx.isBelowFloor) {
-    svg.attr("width", "100%");
-  }
-  const defs = svg.append("defs");
-  defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", palette.text);
-  defs.append("marker").attr("id", "seq-arrowhead-open").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.2);
-  defs.append("marker").attr("id", "seq-arrowhead-async").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
-  const arrowPoints = `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`;
-  for (const [, color] of tagValueToColor) {
-    const hex = color.replace("#", "");
-    defs.append("marker").attr("id", `seq-arrowhead-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polygon").attr("points", arrowPoints).attr("fill", color);
-    defs.append("marker").attr("id", `seq-arrowhead-async-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", arrowPoints).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2);
-    defs.append("marker").attr("id", `seq-arrowhead-open-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", arrowPoints).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2);
-  }
-  const coloredMarker = (type, tagColor) => {
-    if (tagColor) {
-      const hex = tagColor.replace("#", "");
-      switch (type) {
-        case "call":
-          return `url(#seq-arrowhead-c${hex})`;
-        case "async":
-          return `url(#seq-arrowhead-async-c${hex})`;
-        case "return":
-          return `url(#seq-arrowhead-open-c${hex})`;
-      }
-    }
-    switch (type) {
-      case "call":
-        return "url(#seq-arrowhead)";
-      case "async":
-        return "url(#seq-arrowhead-async)";
-      case "return":
-        return "url(#seq-arrowhead-open)";
-    }
-  };
-  if (showTitle) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : svgWidth / 2).attr("y", ctx.structural(TITLE_Y)).attr("text-anchor", header.inline ? header.titleAnchor : "middle").attr("fill", palette.text).attr("font-size", ctx.text(TITLE_FONT_SIZE)).attr("font-weight", TITLE_FONT_WEIGHT).text(title);
-    if (parsed.titleLineNumber) {
-      titleEl.attr("data-line-number", parsed.titleLineNumber);
-    }
-  }
-  const hasTagGroups = parsed.tagGroups.length > 0 && !noLegend;
-  const collapsedGroupNames = /* @__PURE__ */ new Set();
-  const collapsedGroupMeta = /* @__PURE__ */ new Map();
-  for (const group of parsed.groups) {
-    if (effectiveCollapsedGroups.has(group.lineNumber)) {
-      collapsedGroupNames.add(group.name);
-      collapsedGroupMeta.set(group.name, {
-        lineNumber: group.lineNumber,
-        depth: group.depth,
-        participantIds: group.participantIds,
-        ...group.metadata !== void 0 && { metadata: group.metadata }
-      });
-    }
-  }
-  const participantLabels = new Map(
-    parsed.participants.map((p) => [String(p.id), p.label])
-  );
-  const groupToggleName = (groupName, memberIds) => {
-    const labels = memberIds.map((id) => participantLabels.get(id) ?? id);
-    return labels.length > 0 ? `${groupName}, ${labels.join(", ")}` : groupName;
-  };
-  const participantTagColor = (id) => {
-    const direct = getTagColor(tagMap?.participants.get(id));
-    if (direct) return direct;
-    if (!collapsedGroupNames.has(id) || !tagKey) return void 0;
-    const meta = collapsedGroupMeta.get(id);
-    return meta?.metadata ? getTagColor(meta.metadata[tagKey]) : void 0;
-  };
+  const collapsedGroupBoxes = /* @__PURE__ */ new Map();
   const hasExpandedGroup = groups.some(
     (g) => g.participantIds.some((id) => participantX.has(id))
   );
+  for (const group of parsed.groups) {
+    if (!effectiveCollapsedGroups.has(group.lineNumber)) continue;
+    const padTop = hasExpandedGroup ? (maxGroupDepth + 1 - group.depth) * GROUP_PADDING_TOP : 0;
+    const padBottom = hasExpandedGroup ? groupBottomPad(group.depth, maxGroupDepth) : 0;
+    const height = sBoxH + padTop + padBottom;
+    const barHeight = ctx.structural(COLLAPSE_BAR_HEIGHT);
+    collapsedGroupBoxes.set(group.name, {
+      lineNumber: group.lineNumber,
+      depth: group.depth,
+      participantIds: group.participantIds,
+      ...group.metadata !== void 0 && { metadata: group.metadata },
+      padTop,
+      padBottom,
+      height,
+      // Centred in the box ABOVE the bar, so the bar does not push the name
+      // off-centre the way it would if the whole box were used.
+      nameY: -padTop + (height - barHeight) / 2,
+      barY: -padTop + height - barHeight,
+      barHeight
+    });
+  }
   const framedGroups = [...groups].sort((a, b) => a.depth - b.depth);
   const allColumnXs = [...participantX.values()].sort((a, b) => a - b);
   const frameExtents = /* @__PURE__ */ new Map();
+  const groupFrames = [];
   for (const group of framedGroups) {
     if (group.participantIds.length === 0) continue;
     const memberXs = group.participantIds.map((id) => participantX.get(id)).filter((x) => x !== void 0);
@@ -1535,118 +1492,18 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
     frameExtents.set(group.name, { minX, maxX });
     const boxY = participantStartY - (maxGroupDepth + 1 - group.depth) * GROUP_PADDING_TOP;
-    const boxH = sBoxH + (participantStartY - boxY) + groupBottomPad(group.depth);
-    const groupTagValue = tagKey && group.metadata?.[tagKey];
-    const groupTagColor = getTagColor(groupTagValue || void 0);
-    const fillColor = groupTagColor ? mix(groupTagColor, themeBaseBg(palette, isDark), isDark ? 15 : 20) : isDark ? palette.surface : palette.bg;
-    const strokeColor = groupTagColor || palette.textMuted;
-    const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", groupToggleName(group.name, group.participantIds)).attr("cursor", "pointer");
-    groupG.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("pointer-events", "none").attr("class", "group-box");
-    groupG.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", participantStartY - boxY).attr("fill", "transparent").attr("class", "group-label-hit");
-    groupG.append("text").attr("x", (minX + maxX) / 2).attr("y", boxY + sGroupLabelSize + 4).attr("text-anchor", "middle").attr("fill", strokeColor).attr("font-size", sGroupLabelSize).attr("font-weight", GROUP_LABEL_WEIGHT).attr("opacity", 0.7).attr("pointer-events", "none").attr("class", "group-label").text(group.name);
-  }
-  const bandLeftmostX = Math.min(...Array.from(participantX.values()));
-  const bandRightmostX = Math.max(...Array.from(participantX.values()));
-  const sectionLineX1 = bandLeftmostX - sBoxW / 2 - 10;
-  const sectionLineX2 = bandRightmostX + sBoxW / 2 + 10;
-  const sectionLabelX = (sectionLineX1 + sectionLineX2) / 2;
-  const sectionLabelTextFor = (sec) => {
-    if (!isSectionCollapsed(sec)) return sec.label;
-    const count = sectionMsgCounts.get(sec.lineNumber) ?? 0;
-    return `${sec.label} (${count} ${count === 1 ? "message" : "messages"})`;
-  };
-  const sectionLabelBaselineFor = (sec, secY) => isSectionCollapsed(sec) ? secY + COLLAPSED_SECTION_LABEL_BASELINE : secY + 4;
-  const sectionLabelBoxes = sectionRegions.map((region) => {
-    const secY = sectionYPositions.get(region.section.lineNumber);
-    if (secY === void 0) return null;
-    const width = measureText(sectionLabelTextFor(region.section), 11, {
-      bold: true
+    groupFrames.push({
+      group,
+      x: minX,
+      y: boxY,
+      width: maxX - minX,
+      height: sBoxH + (participantStartY - boxY) + groupBottomPad(group.depth, maxGroupDepth),
+      headerHeight: participantStartY - boxY,
+      // Centred across the header strip.
+      labelX: (minX + maxX) / 2,
+      labelY: boxY + sGroupLabelSize + 4
     });
-    const baseline = sectionLabelBaselineFor(region.section, secY);
-    return {
-      x1: sectionLabelX - width / 2 - SECTION_LABEL_CLEARANCE_X,
-      x2: sectionLabelX + width / 2 + SECTION_LABEL_CLEARANCE_X,
-      y1: baseline - SECTION_LABEL_CLEARANCE_ABOVE,
-      y2: baseline + SECTION_LABEL_CLEARANCE_BELOW
-    };
-  }).filter((box) => box !== null);
-  const lifelineSegments = (cx, yTop, yBottom) => {
-    const cuts = sectionLabelBoxes.filter((b) => cx >= b.x1 && cx <= b.x2 && b.y2 > yTop && b.y1 < yBottom).sort((a, b) => a.y1 - b.y1);
-    const segments = [];
-    let y = yTop;
-    for (const cut of cuts) {
-      if (cut.y1 > y) segments.push([y, cut.y1]);
-      y = Math.max(y, cut.y2);
-    }
-    if (y < yBottom) segments.push([y, yBottom]);
-    return segments;
-  };
-  const lifelineStartY = lifelineStartY0;
-  participants.forEach((participant) => {
-    const cx = participantX.get(participant.id);
-    const cy = participantStartY;
-    const pTagValue = tagMap?.participants.get(participant.id);
-    const pTagAttr = tagKey && pTagValue ? { key: tagKey, value: pTagValue.toLowerCase() } : void 0;
-    const isCollapsedGroup = collapsedGroupNames.has(participant.id);
-    const effectiveTagColor = participantTagColor(participant.id);
-    renderParticipant(
-      svg,
-      participant,
-      cx,
-      cy,
-      palette,
-      isDark,
-      effectiveTagColor,
-      pTagAttr,
-      fillMode,
-      sBoxW,
-      sBoxH,
-      sLabelTextWidth,
-      sLabelFontSize,
-      isCollapsedGroup
-    );
-    if (isCollapsedGroup) {
-      const meta = collapsedGroupMeta.get(participant.id);
-      const drillColor = effectiveTagColor ?? mix(palette.textMuted, themeBaseBg(palette, isDark), 55);
-      const drillBarH = ctx.structural(COLLAPSE_BAR_HEIGHT);
-      const boxW = sBoxW;
-      const padTop = hasExpandedGroup ? (maxGroupDepth + 1 - meta.depth) * GROUP_PADDING_TOP : 0;
-      const padBottom = hasExpandedGroup ? groupBottomPad(meta.depth) : 0;
-      const fullH = sBoxH + padTop + padBottom;
-      const clipId = `clip-drill-group-${participant.id.replace(/[^a-zA-Z0-9-]/g, "-")}`;
-      const participantG = svg.select(
-        `.participant[data-participant-id="${participant.id}"]`
-      );
-      participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr(
-        "aria-label",
-        groupToggleName(participant.id, meta.participantIds)
-      ).attr("cursor", "pointer");
-      const pFill = effectiveTagColor ? mix(effectiveTagColor, themeBaseBg(palette, isDark), isDark ? 30 : 40) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
-      const pStroke = effectiveTagColor || palette.border;
-      participantG.append("rect").attr("x", -boxW / 2).attr("y", -padTop).attr("width", boxW).attr("height", fullH).attr("rx", 6).attr("fill", pFill).attr("stroke", pStroke).attr("stroke-width", 1.5);
-      const nameY = -padTop + (fullH - drillBarH) / 2;
-      participantG.append("text").attr("x", 0).attr("y", nameY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", sLabelFontSize).attr("font-weight", "normal").attr("class", "collapsed-group-label").text(truncateText(participant.label, sLabelFontSize, sLabelTextWidth));
-      participantG.append("clipPath").attr("id", clipId).append("rect").attr("x", -boxW / 2).attr("y", -padTop).attr("width", boxW).attr("height", fullH).attr("rx", 6);
-      participantG.append("rect").attr("class", "sequence-drill-bar").attr("x", -boxW / 2).attr("y", -padTop + fullH - drillBarH).attr("width", boxW).attr("height", drillBarH).attr("fill", drillColor).attr("clip-path", `url(#${clipId})`);
-    }
-    const llY = isCollapsedGroup ? lifelineStartY + (hasExpandedGroup ? groupBottomPad(collapsedGroupMeta.get(participant.id)?.depth ?? 0) : 0) : participant.type === "actor" ? lifelineStartY + ACTOR_LABEL_CLEARANCE : lifelineStartY;
-    const llColor = effectiveTagColor || palette.textMuted;
-    for (const [segTop, segBottom] of lifelineSegments(
-      cx,
-      llY,
-      lifelineStartY + lifelineLength
-    )) {
-      const lifelineEl = svg.append("line").attr("x1", cx).attr("y1", segTop).attr("x2", cx).attr("y2", segBottom).attr("stroke", llColor).attr("stroke-width", 1).attr("stroke-dasharray", EDGE_DASH).attr("class", "lifeline").attr("data-participant-id", participant.id);
-      if (tagKey && pTagValue) {
-        lifelineEl.attr(`data-tag-${tagKey}`, pTagValue.toLowerCase());
-      }
-    }
-  });
-  const FRAME_PADDING_X = 30;
-  const FRAME_PADDING_BOTTOM = 15;
-  const FRAME_LABEL_HEIGHT = 18;
-  const SELF_ARROW_PROJECTION = sActivationWidth / 2 + sSelfCallWidth;
-  const SELF_ARROW_FRAME_PAD = 10;
+  }
   const collectMsgIndices = (els) => {
     const indices = [];
     for (const el of els) {
@@ -1667,22 +1524,25 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
     return indices;
   };
-  const deferredLabels = [];
-  const deferredLines = [];
-  const renderBlockFrames = (els, depth) => {
+  const firstStepOf = (indices) => {
+    let first = Infinity;
+    for (const mi of indices) {
+      const step = msgToFirstStep.get(mi);
+      if (step !== void 0) first = Math.min(first, step);
+    }
+    return first;
+  };
+  const SELF_ARROW_PROJECTION = sActivationWidth / 2 + sSelfCallWidth;
+  const blockFrames = [];
+  const layoutBlockFrames = (els) => {
     for (const el of els) {
       if (!isSequenceBlock(el)) continue;
       const ifIndices = collectMsgIndices(el.children);
-      const elseIfBranchData = [];
-      if (el.elseIfBranches) {
-        for (const branch of el.elseIfBranches) {
-          elseIfBranchData.push({
-            label: branch.label,
-            indices: collectMsgIndices(branch.children),
-            lineNumber: branch.lineNumber
-          });
-        }
-      }
+      const elseIfBranchData = (el.elseIfBranches ?? []).map((branch) => ({
+        label: branch.label,
+        indices: collectMsgIndices(branch.children),
+        lineNumber: branch.lineNumber
+      }));
       const elseIndices = collectMsgIndices(el.elseChildren);
       const allIndices = [
         ...ifIndices,
@@ -1734,93 +1594,467 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       const frameY = stepY(minStep) - FRAME_PADDING_TOP;
       const frameW = maxPX - minPX + FRAME_PADDING_X * 2 + extraRight;
       const frameH = stepY(maxStep) - stepY(minStep) + FRAME_PADDING_TOP + FRAME_PADDING_BOTTOM + (maxStepIsSelfCall ? sSelfCallHeight : 0);
-      svg.append("rect").attr("x", frameX).attr("y", frameY).attr("width", frameW).attr("height", frameH).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", HAIRLINE_DASH).attr("rx", 3).attr("ry", 3).attr("class", "block-frame").attr("data-block-line", String(el.lineNumber));
-      deferredLabels.push({
-        x: frameX + 6,
-        y: frameY + FRAME_LABEL_HEIGHT - 4,
-        text: `${el.type} ${el.label}`,
-        bold: false,
-        italic: false,
-        blockLine: el.lineNumber
-      });
+      const divider = (firstStep, text, lineNumber) => {
+        const dividerY = stepY(firstStep) - BLOCK_HEADER_SPACE;
+        return {
+          x1: frameX,
+          x2: frameX + frameW,
+          y: dividerY,
+          label: { x: frameX + 6, y: dividerY + 14, text },
+          ...lineNumber !== void 0 && { lineNumber }
+        };
+      };
+      const dividers = [];
       for (const branchData of elseIfBranchData) {
-        if (branchData.indices.length > 0) {
-          let firstBranchStep = Infinity;
-          for (const mi of branchData.indices) {
-            const first = msgToFirstStep.get(mi);
-            if (first !== void 0)
-              firstBranchStep = Math.min(firstBranchStep, first);
-          }
-          if (firstBranchStep < Infinity) {
-            const dividerY = stepY(firstBranchStep) - BLOCK_HEADER_SPACE;
-            deferredLines.push({
-              x1: frameX,
-              y1: dividerY,
-              x2: frameX + frameW,
-              y2: dividerY,
-              blockLine: branchData.lineNumber
-            });
-            deferredLabels.push({
-              x: frameX + 6,
-              y: dividerY + 14,
-              text: `else if ${branchData.label}`,
-              bold: false,
-              italic: false,
-              blockLine: branchData.lineNumber
-            });
-          }
+        const firstBranchStep = firstStepOf(branchData.indices);
+        if (firstBranchStep < Infinity) {
+          dividers.push(
+            divider(
+              firstBranchStep,
+              `else if ${branchData.label}`,
+              branchData.lineNumber
+            )
+          );
         }
       }
-      if (elseIndices.length > 0) {
-        let firstElseStep = Infinity;
-        for (const mi of elseIndices) {
-          const first = msgToFirstStep.get(mi);
-          if (first !== void 0)
-            firstElseStep = Math.min(firstElseStep, first);
-        }
-        if (firstElseStep < Infinity) {
-          const dividerY = stepY(firstElseStep) - BLOCK_HEADER_SPACE;
-          deferredLines.push({
-            x1: frameX,
-            y1: dividerY,
-            x2: frameX + frameW,
-            y2: dividerY,
-            ...el.elseLineNumber !== void 0 && {
-              blockLine: el.elseLineNumber
-            }
-          });
-          deferredLabels.push({
-            x: frameX + 6,
-            y: dividerY + 14,
-            text: "else",
-            bold: false,
-            italic: false,
-            ...el.elseLineNumber !== void 0 && {
-              blockLine: el.elseLineNumber
-            }
-          });
-        }
+      const firstElseStep = firstStepOf(elseIndices);
+      if (firstElseStep < Infinity) {
+        dividers.push(divider(firstElseStep, "else", el.elseLineNumber));
       }
-      renderBlockFrames(el.children, depth + 1);
-      if (el.elseIfBranches) {
-        for (const branch of el.elseIfBranches) {
-          renderBlockFrames(branch.children, depth + 1);
-        }
+      blockFrames.push({
+        lineNumber: el.lineNumber,
+        x: frameX,
+        y: frameY,
+        width: frameW,
+        height: frameH,
+        label: {
+          x: frameX + 6,
+          y: frameY + FRAME_LABEL_HEIGHT - 4,
+          text: `${el.type} ${el.label}`
+        },
+        dividers
+      });
+      layoutBlockFrames(el.children);
+      for (const branch of el.elseIfBranches ?? []) {
+        layoutBlockFrames(branch.children);
       }
-      renderBlockFrames(el.elseChildren, depth + 1);
+      layoutBlockFrames(el.elseChildren);
     }
   };
-  if (elements && elements.length > 0) {
-    renderBlockFrames(elements, 0);
+  if (elements && elements.length > 0) layoutBlockFrames(elements);
+  const sectionLineX1 = Math.min(...Array.from(participantX.values())) - sBoxW / 2 - 10;
+  const sectionLineX2 = Math.max(...Array.from(participantX.values())) + sBoxW / 2 + 10;
+  const sectionLabelX = (sectionLineX1 + sectionLineX2) / 2;
+  const sectionBands = [];
+  for (const region of sectionRegions) {
+    const sec = region.section;
+    const secY = sectionYPositions.get(sec.lineNumber);
+    if (secY === void 0) continue;
+    const isCollapsed = isSectionCollapsed(sec, collapsedSections);
+    const count = sectionMsgCounts.get(sec.lineNumber) ?? 0;
+    const labelText = isCollapsed ? `${sec.label} (${count} ${count === 1 ? "message" : "messages"})` : sec.label;
+    const height = isCollapsed ? COLLAPSED_SECTION_BAND_HEIGHT : SECTION_BAND_HEIGHT;
+    const marks = [];
+    let reach = null;
+    if (isCollapsed) {
+      const participation = summarizeSectionParticipation(
+        messages,
+        region.msgIndices
+      );
+      const involvedXs = participants.filter((p) => participation.has(p.id)).map((p) => participantX.get(p.id)).filter((x) => x !== void 0);
+      if (involvedXs.length > 1) {
+        reach = { x1: Math.min(...involvedXs), x2: Math.max(...involvedXs) };
+      }
+      for (const participant of participants) {
+        const markX = participantX.get(participant.id);
+        if (markX === void 0) continue;
+        const part = participation.get(participant.id);
+        marks.push({
+          participantId: participant.id,
+          x: markX,
+          ...part !== void 0 && { part },
+          radius: part ? sectionMarkRadius(part.sends + part.receives) : 2.5
+        });
+      }
+    }
+    sectionBands.push({
+      region,
+      collapsed: isCollapsed,
+      y: secY,
+      x: sectionLineX1 - 10,
+      width: sectionLineX2 - sectionLineX1 + 20,
+      height,
+      labelText,
+      labelX: sectionLabelX,
+      labelBaseline: isCollapsed ? secY + COLLAPSED_SECTION_LABEL_BASELINE : secY + 4,
+      // The section label is set at a fixed 11px, bold.
+      labelWidth: measureText(labelText, 11, { bold: true }),
+      markY: secY + COLLAPSED_SECTION_MARK_OFFSET,
+      marks,
+      reach
+    });
+  }
+  const sectionLabelBoxes = sectionBands.map((band) => ({
+    x1: band.labelX - band.labelWidth / 2 - SECTION_LABEL_CLEARANCE_X,
+    x2: band.labelX + band.labelWidth / 2 + SECTION_LABEL_CLEARANCE_X,
+    y1: band.labelBaseline - SECTION_LABEL_CLEARANCE_ABOVE,
+    y2: band.labelBaseline + SECTION_LABEL_CLEARANCE_BELOW
+  }));
+  const lifelines = /* @__PURE__ */ new Map();
+  for (const participant of participants) {
+    const cx = participantX.get(participant.id);
+    const collapsedBox = collapsedGroupBoxes.get(participant.id);
+    const yTop = collapsedBox ? lifelineStartY0 + collapsedBox.padBottom : participant.type === "actor" ? lifelineStartY0 + ACTOR_LABEL_CLEARANCE : lifelineStartY0;
+    const yBottom = lifelineStartY0 + lifelineLength;
+    const cuts = sectionLabelBoxes.filter((b) => cx >= b.x1 && cx <= b.x2 && b.y2 > yTop && b.y1 < yBottom).sort((a, b) => a.y1 - b.y1);
+    const segments = [];
+    let y = yTop;
+    for (const cut of cuts) {
+      if (cut.y1 > y) segments.push([y, cut.y1]);
+      y = Math.max(y, cut.y2);
+    }
+    if (y < yBottom) segments.push([y, yBottom]);
+    lifelines.set(participant.id, segments);
   }
-  activations.forEach((act) => {
+  const activationBars = activations.map((act) => {
     const px = participantX.get(act.participantId);
-    if (px === void 0) return;
+    if (px === void 0) return null;
     const x = px - sActivationWidth / 2 + act.depth * ACTIVATION_NEST_OFFSET;
     const y1 = stepY(act.startStep);
     const rawY2 = stepY(act.endStep);
     const implicitY2 = rawY2 - labelRoomBefore[act.endStep] - ACTIVATION_IMPLICIT_END_CLEARANCE;
     const y2 = act.implicitEnd && implicitY2 > y1 + sActivationWidth ? implicitY2 : rawY2;
+    return { x, y: y1, width: sActivationWidth, height: y2 - y1 };
+  });
+  const activeDepthAt = (pid, stepIdx) => {
+    let maxDepth = -1;
+    for (const act of activations) {
+      if (act.participantId === pid && act.startStep <= stepIdx && stepIdx <= act.endStep && act.depth > maxDepth) {
+        maxDepth = act.depth;
+      }
+    }
+    return maxDepth;
+  };
+  const arrowEdgeX = (pid, stepIdx, side) => {
+    const px = participantX.get(pid);
+    const depth = activeDepthAt(pid, stepIdx);
+    if (depth < 0) return px;
+    const offset = depth * ACTIVATION_NEST_OFFSET;
+    return side === "right" ? px + sActivationWidth / 2 + offset : px - sActivationWidth / 2 + offset;
+  };
+  const messageArrows = renderSteps.map((step, i) => {
+    const fromX = participantX.get(step.from);
+    const toX = participantX.get(step.to);
+    if (fromX === void 0 || toX === void 0) return null;
+    const y = stepY(i);
+    if (step.from === step.to) {
+      if (step.type !== "call") return null;
+      const x = arrowEdgeX(step.from, i, "right");
+      const loopX = x + sSelfCallWidth;
+      return {
+        kind: "self",
+        x,
+        loopX,
+        y,
+        returnY: y + sSelfCallHeight,
+        label: { x: loopX + 5, y: y + sSelfCallHeight / 2 + 4 }
+      };
+    }
+    const goingRight = fromX < toX;
+    const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
+    const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
+    return {
+      kind: step.type,
+      x1,
+      x2,
+      y,
+      label: {
+        x: (x1 + x2) / 2,
+        y: y - (step.type === "call" ? MSG_LABEL_OFFSET : RETURN_LABEL_OFFSET)
+      }
+    };
+  });
+  const noteBoxes = /* @__PURE__ */ new Map();
+  const BULLET_BODY_INDENT = 10;
+  for (const [note, noteLayout] of noteLayouts) {
+    const px = participantX.get(note.participantId);
+    if (px === void 0) continue;
+    const { topY, position, afterSelfCall, maxW, textWidth } = noteLayout;
+    const isRight = position === "right";
+    const wrappedLines = wrapTextLines(note.text, textWidth, sNoteFontSize);
+    const noteH = wrappedLines.length * sNoteLineH + sNotePadV * 2;
+    const maxLineW = Math.max(
+      ...wrappedLines.map((l) => measureText(l.text, sNoteFontSize))
+    );
+    const noteW = Math.min(
+      maxW,
+      Math.max(80, maxLineW + sNotePadH * 2 + sNoteFold)
+    );
+    const rightOffset = afterSelfCall && isRight ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
+    const noteX = isRight ? px + rightOffset : px - sActivationWidth - sNoteGap - noteW;
+    noteBoxes.set(note, {
+      x: noteX,
+      y: topY,
+      width: noteW,
+      height: noteH,
+      lines: wrappedLines.map((line, li) => ({
+        kind: line.kind,
+        text: line.text,
+        x: noteX + sNotePadH + (line.kind === "plain" ? 0 : BULLET_BODY_INDENT),
+        y: topY + sNotePadV + (li + 1) * sNoteLineH - 3,
+        ...line.kind === "bullet-first" && { bulletX: noteX + sNotePadH }
+      }))
+    });
+  }
+  return {
+    ctx,
+    participants,
+    messages,
+    elements,
+    groups,
+    effectiveCollapsedGroups,
+    activeTagGroup,
+    renderSteps,
+    stepLabels,
+    activations,
+    activationBars,
+    messageArrows,
+    labelRoomBefore,
+    msgToFirstStep,
+    msgToLastStep,
+    stepYPositions,
+    sectionYPositions,
+    sectionRegions,
+    sectionMsgCounts,
+    noteLayouts,
+    noteBoxes,
+    participantX,
+    participantStartY,
+    lifelineStartY0,
+    lifelineLength,
+    lifelines,
+    groupFrames,
+    collapsedGroupBoxes,
+    blockFrames,
+    sectionBands,
+    maxGroupDepth,
+    svgWidth,
+    totalHeight,
+    showTitle,
+    titleOffset,
+    noLegend,
+    legendConfig,
+    header,
+    sTopMargin,
+    sBoxW,
+    sBoxH,
+    sLabelFontSize,
+    sLabelTextWidth,
+    sGroupLabelSize,
+    sActivationWidth,
+    ACTIVATION_NEST_OFFSET,
+    sArrowheadW,
+    sArrowheadH,
+    sSelfCallWidth,
+    sSelfCallHeight,
+    sNoteFold,
+    sNoteFontSize,
+    sNoteGap,
+    sNoteLineH,
+    sNotePadH,
+    sNotePadV
+  };
+}
+function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
+  d3Selection.select(container).selectAll("*").remove();
+  const layout = layoutSequence(
+    parsed,
+    options?.exportWidth ?? container.getBoundingClientRect().width,
+    options
+  );
+  if (!layout) return;
+  const {
+    ctx,
+    participants,
+    messages,
+    elements,
+    activeTagGroup,
+    renderSteps,
+    stepLabels,
+    activations,
+    activationBars,
+    messageArrows,
+    noteBoxes,
+    participantX,
+    participantStartY,
+    lifelines,
+    groupFrames,
+    collapsedGroupBoxes,
+    blockFrames,
+    sectionBands,
+    svgWidth,
+    totalHeight,
+    showTitle,
+    titleOffset,
+    noLegend,
+    legendConfig,
+    header,
+    sTopMargin,
+    sBoxW,
+    sBoxH,
+    sLabelFontSize,
+    sLabelTextWidth,
+    sGroupLabelSize,
+    sArrowheadW,
+    sArrowheadH,
+    sSelfCallWidth,
+    sSelfCallHeight,
+    sNoteFold,
+    sNoteFontSize
+  } = layout;
+  const { title, options: parsedOptions } = parsed;
+  const fillMode = fillModeFromOptions(parsedOptions);
+  let tagMap;
+  const tagValueToColor = /* @__PURE__ */ new Map();
+  if (activeTagGroup) {
+    tagMap = resolveSequenceTags(parsed, activeTagGroup);
+    const tg = parsed.tagGroups.find(
+      (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
+    );
+    if (tg) {
+      for (const entry of tg.entries) {
+        tagValueToColor.set(entry.value.toLowerCase(), entry.color);
+      }
+    }
+  }
+  const getTagColor = (value) => value ? tagValueToColor.get(value.toLowerCase()) : void 0;
+  const tagKey = activeTagGroup ? tagAttrKey(activeTagGroup) : void 0;
+  const svg = d3Selection.select(container).append("svg").attr("width", svgWidth).attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
+  if (ctx.isBelowFloor) {
+    svg.attr("width", "100%");
+  }
+  const defs = svg.append("defs");
+  defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", palette.text);
+  defs.append("marker").attr("id", "seq-arrowhead-open").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.2);
+  defs.append("marker").attr("id", "seq-arrowhead-async").attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
+  const arrowPoints = `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`;
+  for (const [, color] of tagValueToColor) {
+    const hex = color.replace("#", "");
+    defs.append("marker").attr("id", `seq-arrowhead-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polygon").attr("points", arrowPoints).attr("fill", color);
+    defs.append("marker").attr("id", `seq-arrowhead-async-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", arrowPoints).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2);
+    defs.append("marker").attr("id", `seq-arrowhead-open-c${hex}`).attr("viewBox", `0 0 ${sArrowheadW} ${sArrowheadH}`).attr("refX", sArrowheadW).attr("refY", sArrowheadH / 2).attr("markerWidth", sArrowheadW).attr("markerHeight", sArrowheadH).attr("orient", "auto").append("polyline").attr("points", arrowPoints).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.2);
+  }
+  const coloredMarker = (type, tagColor) => {
+    if (tagColor) {
+      const hex = tagColor.replace("#", "");
+      switch (type) {
+        case "call":
+          return `url(#seq-arrowhead-c${hex})`;
+        case "async":
+          return `url(#seq-arrowhead-async-c${hex})`;
+        case "return":
+          return `url(#seq-arrowhead-open-c${hex})`;
+      }
+    }
+    switch (type) {
+      case "call":
+        return "url(#seq-arrowhead)";
+      case "async":
+        return "url(#seq-arrowhead-async)";
+      case "return":
+        return "url(#seq-arrowhead-open)";
+    }
+  };
+  if (showTitle) {
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : svgWidth / 2).attr("y", ctx.structural(TITLE_Y)).attr("text-anchor", header.inline ? header.titleAnchor : "middle").attr("fill", palette.text).attr("font-size", ctx.text(TITLE_FONT_SIZE)).attr("font-weight", TITLE_FONT_WEIGHT).text(title);
+    if (parsed.titleLineNumber) {
+      titleEl.attr("data-line-number", parsed.titleLineNumber);
+    }
+  }
+  const hasTagGroups = parsed.tagGroups.length > 0 && !noLegend;
+  const participantLabels = new Map(
+    parsed.participants.map((p) => [String(p.id), p.label])
+  );
+  const groupToggleName = (groupName, memberIds) => {
+    const labels = memberIds.map((id) => participantLabels.get(id) ?? id);
+    return labels.length > 0 ? `${groupName}, ${labels.join(", ")}` : groupName;
+  };
+  const participantTagColor = (id) => {
+    const direct = getTagColor(tagMap?.participants.get(id));
+    if (direct) return direct;
+    if (!collapsedGroupBoxes.has(id) || !tagKey) return void 0;
+    const meta = collapsedGroupBoxes.get(id);
+    return meta?.metadata ? getTagColor(meta.metadata[tagKey]) : void 0;
+  };
+  for (const frame of groupFrames) {
+    const { group } = frame;
+    const groupTagValue = tagKey && group.metadata?.[tagKey];
+    const groupTagColor = getTagColor(groupTagValue);
+    const fillColor = groupTagColor ? mix(groupTagColor, themeBaseBg(palette, isDark), isDark ? 15 : 20) : isDark ? palette.surface : palette.bg;
+    const strokeColor = groupTagColor ?? palette.textMuted;
+    const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", groupToggleName(group.name, group.participantIds)).attr("cursor", "pointer");
+    groupG.append("rect").attr("x", frame.x).attr("y", frame.y).attr("width", frame.width).attr("height", frame.height).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("pointer-events", "none").attr("class", "group-box");
+    groupG.append("rect").attr("x", frame.x).attr("y", frame.y).attr("width", frame.width).attr("height", frame.headerHeight).attr("fill", "transparent").attr("class", "group-label-hit");
+    groupG.append("text").attr("x", frame.labelX).attr("y", frame.labelY).attr("text-anchor", "middle").attr("fill", strokeColor).attr("font-size", sGroupLabelSize).attr("font-weight", GROUP_LABEL_WEIGHT).attr("opacity", 0.7).attr("pointer-events", "none").attr("class", "group-label").text(group.name);
+  }
+  participants.forEach((participant) => {
+    const cx = participantX.get(participant.id);
+    const cy = participantStartY;
+    const pTagValue = tagMap?.participants.get(participant.id);
+    const pTagAttr = tagKey && pTagValue ? { key: tagKey, value: pTagValue.toLowerCase() } : void 0;
+    const isCollapsedGroup = collapsedGroupBoxes.has(participant.id);
+    const effectiveTagColor = participantTagColor(participant.id);
+    renderParticipant(
+      svg,
+      participant,
+      cx,
+      cy,
+      palette,
+      isDark,
+      effectiveTagColor,
+      pTagAttr,
+      fillMode,
+      sBoxW,
+      sBoxH,
+      sLabelTextWidth,
+      sLabelFontSize,
+      isCollapsedGroup
+    );
+    if (isCollapsedGroup) {
+      const meta = collapsedGroupBoxes.get(participant.id);
+      const drillColor = effectiveTagColor ?? mix(palette.textMuted, themeBaseBg(palette, isDark), 55);
+      const boxW = sBoxW;
+      const { padTop, height: fullH, nameY, barY, barHeight } = meta;
+      const clipId = `clip-drill-group-${participant.id.replace(/[^a-zA-Z0-9-]/g, "-")}`;
+      const participantG = svg.select(
+        `.participant[data-participant-id="${participant.id}"]`
+      );
+      participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr(
+        "aria-label",
+        groupToggleName(participant.id, meta.participantIds)
+      ).attr("cursor", "pointer");
+      const pFill = effectiveTagColor ? mix(effectiveTagColor, themeBaseBg(palette, isDark), isDark ? 30 : 40) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
+      const pStroke = effectiveTagColor ?? palette.border;
+      participantG.append("rect").attr("x", -boxW / 2).attr("y", -padTop).attr("width", boxW).attr("height", fullH).attr("rx", 6).attr("fill", pFill).attr("stroke", pStroke).attr("stroke-width", 1.5);
+      participantG.append("text").attr("x", 0).attr("y", nameY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", sLabelFontSize).attr("font-weight", "normal").attr("class", "collapsed-group-label").text(truncateText(participant.label, sLabelFontSize, sLabelTextWidth));
+      participantG.append("clipPath").attr("id", clipId).append("rect").attr("x", -boxW / 2).attr("y", -padTop).attr("width", boxW).attr("height", fullH).attr("rx", 6);
+      participantG.append("rect").attr("class", "sequence-drill-bar").attr("x", -boxW / 2).attr("y", barY).attr("width", boxW).attr("height", barHeight).attr("fill", drillColor).attr("clip-path", `url(#${clipId})`);
+    }
+    const llColor = effectiveTagColor ?? palette.textMuted;
+    for (const [segTop, segBottom] of lifelines.get(participant.id) ?? []) {
+      const lifelineEl = svg.append("line").attr("x1", cx).attr("y1", segTop).attr("x2", cx).attr("y2", segBottom).attr("stroke", llColor).attr("stroke-width", 1).attr("stroke-dasharray", EDGE_DASH).attr("class", "lifeline").attr("data-participant-id", participant.id);
+      if (tagKey && pTagValue) {
+        lifelineEl.attr(`data-tag-${tagKey}`, pTagValue.toLowerCase());
+      }
+    }
+  });
+  for (const frame of blockFrames) {
+    svg.append("rect").attr("x", frame.x).attr("y", frame.y).attr("width", frame.width).attr("height", frame.height).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", HAIRLINE_DASH).attr("rx", 3).attr("ry", 3).attr("class", "block-frame").attr("data-block-line", String(frame.lineNumber));
+  }
+  activations.forEach((act, ai) => {
+    const bar = activationBars[ai];
+    if (!bar) return;
+    const { x, y: y1, height } = bar;
     const coveredLines = [];
     for (let si = act.startStep; si <= act.endStep; si++) {
       const step = renderSteps[si];
@@ -1832,162 +2066,125 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const triggerMsg = triggerStep !== void 0 ? messages[triggerStep.messageIndex] : void 0;
     const actTagValue = triggerMsg ? tagMap?.messages.get(triggerMsg.lineNumber) : void 0;
     const actTagColor = getTagColor(actTagValue);
-    const actBaseColor = actTagColor || palette.primary;
-    svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", themeBaseBg(palette, isDark));
+    const actBaseColor = actTagColor ?? palette.primary;
+    svg.append("rect").attr("x", x).attr("y", y1).attr("width", bar.width).attr("height", height).attr("fill", themeBaseBg(palette, isDark));
     const actFill = shapeFill(palette, actBaseColor, isDark, {
       mode: fillMode
     });
-    const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
+    const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", bar.width).attr("height", height).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
     if (tagKey && actTagValue) {
       actRect.attr(`data-tag-${tagKey}`, actTagValue.toLowerCase());
     }
   });
-  for (const ln of deferredLines) {
-    const line = 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", HAIRLINE_DASH).attr("class", "block-divider");
-    if (ln.blockLine !== void 0)
-      line.attr("data-block-line", String(ln.blockLine));
+  for (const divider of blockFrames.flatMap((frame) => frame.dividers)) {
+    const line = svg.append("line").attr("x1", divider.x1).attr("y1", divider.y).attr("x2", divider.x2).attr("y2", divider.y).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", HAIRLINE_DASH).attr("class", "block-divider");
+    if (divider.lineNumber !== void 0)
+      line.attr("data-block-line", String(divider.lineNumber));
   }
-  for (const lbl of deferredLabels) {
+  const blockLabels = blockFrames.flatMap((frame) => [
+    { ...frame.label, lineNumber: frame.lineNumber },
+    ...frame.dividers.map((d) => ({ ...d.label, lineNumber: d.lineNumber }))
+  ]);
+  for (const lbl of blockLabels) {
     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);
-    if (lbl.bold) t.attr("font-weight", "bold");
-    if (lbl.italic) t.attr("font-style", "italic");
-    if (lbl.blockLine !== void 0)
-      t.attr("data-block-line", String(lbl.blockLine));
+    if (lbl.lineNumber !== void 0)
+      t.attr("data-block-line", String(lbl.lineNumber));
   }
-  const activeDepthAt = (pid, stepIdx) => {
-    let maxDepth = -1;
-    for (const act of activations) {
-      if (act.participantId === pid && act.startStep <= stepIdx && stepIdx <= act.endStep && act.depth > maxDepth) {
-        maxDepth = act.depth;
-      }
-    }
-    return maxDepth;
-  };
-  const arrowEdgeX = (pid, stepIdx, side) => {
-    const px = participantX.get(pid);
-    const depth = activeDepthAt(pid, stepIdx);
-    if (depth < 0) return px;
-    const offset = depth * ACTIVATION_NEST_OFFSET;
-    return side === "right" ? px + sActivationWidth / 2 + offset : px - sActivationWidth / 2 + offset;
-  };
-  for (const region of sectionRegions) {
-    const sec = region.section;
-    const secY = sectionYPositions.get(sec.lineNumber);
-    if (secY === void 0) continue;
-    const isCollapsed = isSectionCollapsed(sec);
+  for (const band of sectionBands) {
+    const sec = band.region.section;
+    const secY = band.y;
+    const isCollapsed = band.collapsed;
     const lineColor = palette.textMuted;
     const sectionG = svg.append("g").attr("data-section-toggle", "").attr("data-line-number", String(sec.lineNumber)).attr("data-section", "").attr("tabindex", "0").attr("role", "button").attr("aria-expanded", String(!isCollapsed));
-    const BAND_HEIGHT = isCollapsed ? COLLAPSED_SECTION_BAND_HEIGHT : SECTION_BAND_HEIGHT;
-    const bandX = sectionLineX1 - 10;
-    const bandWidth = sectionLineX2 - sectionLineX1 + 20;
+    const BAND_HEIGHT = band.height;
     const bandFill = isCollapsed ? legendChromeColors(palette, isDark).groupBg : lineColor;
     const bandOpacity = isCollapsed ? 1 : isDark ? 0.1 : 0.08;
-    sectionG.append("rect").attr("x", bandX).attr("y", secY - BAND_HEIGHT / 2).attr("width", bandWidth).attr("height", BAND_HEIGHT).attr("fill", bandFill).attr("opacity", bandOpacity).attr("rx", 2).attr("pointer-events", "none").attr("class", "section-divider");
-    const labelText = sectionLabelTextFor(sec);
-    const labelWidth = measureText(labelText, 11, { bold: true });
-    const labelX = sectionLabelX;
-    const labelBaseline = sectionLabelBaselineFor(sec, secY);
+    sectionG.append("rect").attr("x", band.x).attr("y", secY - BAND_HEIGHT / 2).attr("width", band.width).attr("height", BAND_HEIGHT).attr("fill", bandFill).attr("opacity", bandOpacity).attr("rx", 2).attr("pointer-events", "none").attr("class", "section-divider");
+    const { labelText, labelWidth, labelX, labelBaseline } = band;
     const labelHitW = Math.max(80, labelWidth + 24);
     sectionG.append("rect").attr("x", labelX - labelHitW / 2).attr("y", secY - BAND_HEIGHT / 2).attr("width", labelHitW).attr("height", BAND_HEIGHT).attr("fill", "transparent").attr("class", "section-label-hit");
     sectionG.append("text").attr("x", labelX).attr("y", labelBaseline).attr("text-anchor", "middle").attr("fill", lineColor).attr("font-size", 11).attr("font-weight", "bold").attr("class", "section-label").text(labelText);
     if (!isCollapsed) continue;
-    const participation = summarizeSectionParticipation(
-      messages,
-      region.msgIndices
-    );
-    const markY = secY + COLLAPSED_SECTION_MARK_OFFSET;
-    const involvedXs = participants.filter((p) => participation.has(p.id)).map((p) => participantX.get(p.id)).filter((x) => x !== void 0);
-    if (involvedXs.length > 1) {
-      sectionG.append("line").attr("x1", Math.min(...involvedXs)).attr("x2", Math.max(...involvedXs)).attr("y1", markY).attr("y2", markY).attr("stroke", lineColor).attr("stroke-width", 1).attr("stroke-dasharray", HAIRLINE_DASH).attr("opacity", 0.5).attr("pointer-events", "none").attr("class", "section-reach");
-    }
-    for (const participant of participants) {
-      const markX = participantX.get(participant.id);
-      if (markX === void 0) continue;
-      const part = participation.get(participant.id);
-      const mark = sectionG.append("circle").attr("cx", markX).attr("cy", markY).attr("pointer-events", "none").attr("data-participant-id", participant.id);
+    const markY = band.markY;
+    if (band.reach) {
+      sectionG.append("line").attr("x1", band.reach.x1).attr("x2", band.reach.x2).attr("y1", markY).attr("y2", markY).attr("stroke", lineColor).attr("stroke-width", 1).attr("stroke-dasharray", HAIRLINE_DASH).attr("opacity", 0.5).attr("pointer-events", "none").attr("class", "section-reach");
+    }
+    for (const { participantId, x: markX, part, radius } of band.marks) {
+      const mark = sectionG.append("circle").attr("cx", markX).attr("cy", markY).attr("pointer-events", "none").attr("data-participant-id", participantId);
       if (!part) {
-        mark.attr("r", 2.5).attr("fill", "none").attr("stroke", lineColor).attr("stroke-width", 1).attr("opacity", 0.5).attr("class", "section-mark section-mark-absent");
+        mark.attr("r", radius).attr("fill", "none").attr("stroke", lineColor).attr("stroke-width", 1).attr("opacity", 0.5).attr("class", "section-mark section-mark-absent");
         continue;
       }
-      const markColor = participantTagColor(participant.id) ?? palette.text;
-      const radius = sectionMarkRadius(part.sends + part.receives);
-      sectionG.append("circle").attr("cx", markX).attr("cy", markY).attr("r", Math.max(radius, SECTION_MARK_HIT_RADIUS)).attr("fill", "transparent").attr("class", "section-mark-hit").attr("data-participant-id", participant.id).attr("data-section-mark-line", String(part.firstLine)).attr("cursor", "pointer");
+      const markColor = participantTagColor(participantId) ?? palette.text;
+      sectionG.append("circle").attr("cx", markX).attr("cy", markY).attr("r", Math.max(radius, SECTION_MARK_HIT_RADIUS)).attr("fill", "transparent").attr("class", "section-mark-hit").attr("data-participant-id", participantId).attr("data-section-mark-line", String(part.firstLine)).attr("cursor", "pointer");
       if (part.sends === 0) {
         mark.attr("r", radius).attr("fill", bandFill).attr("stroke", markColor).attr("stroke-width", 1.6).attr("class", "section-mark section-mark-receives");
       } else {
         mark.attr("r", radius).attr("fill", markColor).attr("class", "section-mark section-mark-sends");
       }
     }
-    const involvedLabels = participants.filter((p) => participation.has(p.id)).map((p) => p.label);
+    const involved = new Set(
+      band.marks.filter((m) => m.part).map((m) => m.participantId)
+    );
+    const involvedLabels = participants.filter((p) => involved.has(p.id)).map((p) => p.label);
     if (involvedLabels.length > 0) {
       sectionG.attr("aria-label", `${labelText}, ${involvedLabels.join(", ")}`);
     }
   }
   renderSteps.forEach((step, i) => {
-    const fromX = participantX.get(step.from);
-    const toX = participantX.get(step.to);
-    if (fromX === void 0 || toX === void 0) return;
-    const y = stepY(i);
+    const arrow = messageArrows[i];
+    if (!arrow) return;
+    const { y, label } = arrow;
     const HIT_H = 20;
     const msg = messages[step.messageIndex];
     const msgTagValue = msg ? tagMap?.messages.get(msg.lineNumber) : void 0;
     const msgTagColor = getTagColor(msgTagValue);
     if (step.type === "call") {
-      const arrowColor = msgTagColor || palette.text;
-      if (step.from === step.to) {
-        const x = arrowEdgeX(step.from, i, "right");
-        const loopX = x + sSelfCallWidth;
+      const arrowColor = msgTagColor ?? palette.text;
+      if (arrow.kind === "self") {
+        const { x, loopX, returnY } = arrow;
         const hitX = x;
         svg.append("rect").attr("x", hitX).attr("y", y - 5).attr("width", sSelfCallWidth).attr("height", sSelfCallHeight + 10).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-        const selfCallEl = svg.append("path").attr("d", `M ${x} ${y} H ${loopX} V ${y + sSelfCallHeight} H ${x}`).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", coloredMarker("call", msgTagColor)).attr("class", "message-arrow self-call").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
+        const selfCallEl = svg.append("path").attr("d", `M ${x} ${y} H ${loopX} V ${returnY} H ${x}`).attr("fill", "none").attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", coloredMarker("call", msgTagColor)).attr("class", "message-arrow self-call").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
         if (tagKey && msgTagValue) {
           selfCallEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
         }
-        const displayLabel = displayMessageLabel(step);
+        const displayLabel = stepLabels[i];
         if (displayLabel) {
-          const labelEl = svg.append("text").attr("x", loopX + 5).attr("y", y + sSelfCallHeight / 2 + 4).attr("text-anchor", "start").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+          const labelEl = svg.append("text").attr("x", label.x).attr("y", label.y).attr("text-anchor", "start").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", 12).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
           labelEl.text(displayLabel);
         }
       } else {
-        const goingRight = fromX < toX;
-        const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
-        const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
+        const { x1, x2 } = arrow;
         svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
         const markerRef = step.async ? coloredMarker("async", msgTagColor) : coloredMarker("call", msgTagColor);
         const arrowEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", arrowColor).attr("stroke-width", 1.2).attr("marker-end", markerRef).attr("class", "message-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
         if (tagKey && msgTagValue) {
           arrowEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
         }
-        const displayLabel = displayMessageLabel(step);
+        const displayLabel = stepLabels[i];
         if (displayLabel) {
-          const midX = (x1 + x2) / 2;
-          const labelEl = svg.append("text").attr("x", midX).attr("y", y - MSG_LABEL_OFFSET).attr("text-anchor", "middle").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", MSG_LABEL_FONT_SIZE).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+          const labelEl = svg.append("text").attr("x", label.x).attr("y", label.y).attr("text-anchor", "middle").attr("fill", arrowColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", MSG_LABEL_FONT_SIZE).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
           labelEl.text(displayLabel);
         }
       }
-    } else {
-      if (step.from === step.to) {
-        return;
-      }
-      const goingRight = fromX < toX;
-      const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
-      const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
-      const returnColor = msgTagColor || palette.textMuted;
+    } else if (arrow.kind === "return") {
+      const { x1, x2 } = arrow;
+      const returnColor = msgTagColor ?? palette.textMuted;
       svg.append("rect").attr("x", Math.min(x1, x2)).attr("y", y - HIT_H / 2).attr("width", Math.abs(x2 - x1)).attr("height", HIT_H).attr("fill", "transparent").attr("class", "message-hit-area").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
       const returnEl = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", returnColor).attr("stroke-width", 1).attr("stroke-dasharray", EDGE_DASH).attr("marker-end", coloredMarker("return", msgTagColor)).attr("class", "return-arrow").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i)).attr("data-from", step.from).attr("data-to", step.to);
       if (tagKey && msgTagValue) {
         returnEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
       }
-      const displayLabel = displayMessageLabel(step);
+      const displayLabel = stepLabels[i];
       if (displayLabel) {
-        const midX = (x1 + x2) / 2;
-        const labelEl = svg.append("text").attr("x", midX).attr("y", y - RETURN_LABEL_OFFSET).attr("text-anchor", "middle").attr("fill", returnColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", RETURN_LABEL_FONT_SIZE).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
+        const labelEl = svg.append("text").attr("x", label.x).attr("y", label.y).attr("text-anchor", "middle").attr("fill", returnColor).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("font-size", RETURN_LABEL_FONT_SIZE).attr("class", "message-label").attr("data-line-number", String(msg.lineNumber)).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
         if (tagKey && msgTagValue) {
           labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
         }
@@ -1999,30 +2196,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const renderNoteElements = (els) => {
     for (const el of els) {
       if (isSequenceNote(el)) {
-        const px = participantX.get(el.participantId);
-        if (px === void 0) continue;
-        const noteTopY = noteYMap.get(el);
-        if (noteTopY === void 0) continue;
-        const position = effectiveNotePosition(el);
-        const isRight = position === "right";
-        const afterSelfCall = isNoteAfterSelfCall(el);
-        const maxW = noteEffectiveMaxW(
-          el.participantId,
-          position,
-          afterSelfCall
-        );
-        const textWidth = noteTextWidth(maxW);
-        const wrappedLines = wrapTextLines(el.text, textWidth, sNoteFontSize);
-        const noteH = wrappedLines.length * sNoteLineH + sNotePadV * 2;
-        const maxLineW = Math.max(
-          ...wrappedLines.map((l) => measureText(l.text, sNoteFontSize))
-        );
-        const noteW = Math.min(
-          maxW,
-          Math.max(80, maxLineW + sNotePadH * 2 + sNoteFold)
-        );
-        const rightOffset = afterSelfCall && isRight ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
-        const noteX = isRight ? px + rightOffset : px - sActivationWidth - sNoteGap - noteW;
+        const box = noteBoxes.get(el);
+        if (box === void 0) continue;
+        const { x: noteX, y: noteTopY, width: noteW, height: noteH } = box;
         const noteG = svg.append("g").attr("class", "note").attr("data-note-toggle", "").attr("data-line-number", String(el.lineNumber)).attr("data-line-end", String(el.endLineNumber));
         noteG.append("path").attr(
           "d",
@@ -2043,16 +2219,13 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             `L ${noteX + noteW} ${noteTopY + sNoteFold}`
           ].join(" ")
         ).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 0.75).attr("class", "note-fold");
-        const BULLET_BODY_INDENT = 10;
-        wrappedLines.forEach((line, li) => {
-          const textY = noteTopY + sNotePadV + (li + 1) * sNoteLineH - 3;
-          const indent = line.kind === "plain" ? 0 : BULLET_BODY_INDENT;
-          if (line.kind === "bullet-first") {
-            noteG.append("text").attr("x", noteX + sNotePadH).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).text("\u2022");
+        for (const line of box.lines) {
+          if (line.bulletX !== void 0) {
+            noteG.append("text").attr("x", line.bulletX).attr("y", line.y).attr("fill", palette.text).attr("font-size", sNoteFontSize).text("\u2022");
           }
-          const textEl = noteG.append("text").attr("x", noteX + sNotePadH + indent).attr("y", textY).attr("fill", palette.text).attr("font-size", sNoteFontSize).attr("class", "note-text");
+          const textEl = noteG.append("text").attr("x", line.x).attr("y", line.y).attr("fill", palette.text).attr("font-size", sNoteFontSize).attr("class", "note-text");
           renderInlineText(textEl, line.text, palette, sNoteFontSize);
-        });
+        }
       } else if (isSequenceBlock(el)) {
         renderNoteElements(el.children);
         if (el.elseIfBranches) {
@@ -2183,6 +2356,7 @@ export {
   computeActivations,
   applyPositionOverrides,
   applyGroupOrdering,
+  layoutSequence,
   renderSequenceDiagram,
   buildNoteMessageMap
 };