@diagrammo/dgmo 0.95.0 → 0.97.0

package/dist/{chunk-3KVUFHUJ.js → chunk-NBISN6FH.js}

@@ -8,7 +8,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   TREEMAP_REGISTRY,
   extractColor,
@@ -21,7 +21,7 @@ import {
   stripQuotes,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   emit,
   formatDgmoError,

package/dist/{chunk-RITTLIDJ.js → chunk-NN5RUHXV.js}

@@ -1,28 +1,32 @@
 import {
   parseKanban
-} from "./chunk-LKZCUFOW.js";
+} from "./chunk-B7ZH5EQ2.js";
 import {
   serializeSvg
-} from "./chunk-CYRB2JTN.js";
+} from "./chunk-YLKPRT6U.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   CARD_RADIUS
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   keepSwimlaneToggleFocus,
   renderIntegratedLegend,
   wireSwimlaneToggle
-} from "./chunk-NMS5XSLX.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
+  parseInlineMarkdown,
   renderInlineText
 } from "./chunk-QKPOIJBT.js";
 import {
@@ -30,18 +34,19 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendSuppressed
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   LEGEND_HEIGHT,
   measureLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
-  measureText
-} from "./chunk-KAO7JL4I.js";
+  measureText,
+  truncateText
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,
@@ -154,6 +159,7 @@ var COLUMN_GAP = 16;
 var COLUMN_HEADER_HEIGHT = 36;
 var COLUMN_PADDING = 12;
 var COLUMN_MIN_WIDTH = 200;
+var CARD_TITLE_MAX_WIDTH = COLUMN_MIN_WIDTH * 2;
 var CARD_HEADER_HEIGHT = 24;
 var CARD_META_LINE_HEIGHT = 14;
 var CARD_SEPARATOR_GAP = 4;
@@ -253,7 +259,27 @@ function collapsedChips(cards, group) {
 function collapsedLaneLabel(laneName, total) {
   return `${laneName} (${total})`;
 }
-function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardGap = CARD_GAP, sColumnMinWidth = COLUMN_MIN_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, activeTagGroup = null, sCollapsedChipHeight = COLLAPSED_CHIP_HEIGHT, sCollapsedChipGap = COLLAPSED_CHIP_GAP, sCollapsedNameGap = COLLAPSED_NAME_GAP) {
+var RTL_START = /^[\P{L}]*[\u0590-\u08ff\ufb1d-\ufdff\ufe70-\ufeff]/u;
+function renderCardTitle(titleEl, title, palette, fontSize, maxWidth) {
+  if (measureText(title, fontSize) > maxWidth) {
+    const plain = parseInlineMarkdown(title).map((span) => span.text).join("");
+    const shown = truncateText(plain, fontSize, maxWidth);
+    if (shown !== plain) {
+      if (RTL_START.test(plain)) {
+        const x = Number(titleEl.attr("x"));
+        const ellipsisEl = titleEl.clone(false).text("\u2026");
+        ellipsisEl.attr("x", x);
+        titleEl.attr("x", x + measureText("\u2026", fontSize)).text(shown.slice(0, -1));
+      } else {
+        titleEl.text(shown);
+      }
+      titleEl.append("title").text(plain);
+      return;
+    }
+  }
+  renderInlineText(titleEl, title, palette, fontSize);
+}
+function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardGap = CARD_GAP, sColumnMinWidth = COLUMN_MIN_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, activeTagGroup = null, sCollapsedChipHeight = COLLAPSED_CHIP_HEIGHT, sCollapsedChipGap = COLLAPSED_CHIP_GAP, sCollapsedNameGap = COLLAPSED_NAME_GAP, sCardTitleMaxWidth = CARD_TITLE_MAX_WIDTH) {
   const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
   const headerHeight = showTitle ? sTitleHeight + 8 : 0;
   const startY = sDiagramPadding + headerHeight;
@@ -279,7 +305,10 @@ function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDi
     const cardLayouts = [];
     let cardY = sColumnHeaderHeight + sColumnPadding;
     for (const card of col.cards) {
-      const titleWidth = measureText(card.title, sCardTitleFontSize);
+      const titleWidth = Math.min(
+        measureText(card.title, sCardTitleFontSize),
+        sCardTitleMaxWidth
+      );
       maxCardTextWidth = Math.max(
         maxCardTextWidth,
         titleWidth + sCardPaddingX * 2
@@ -443,7 +472,10 @@ function drawKanban(container, parsed, palette, isDark, options) {
     activeTagGroup,
     sCollapsedChipHeight,
     sCollapsedChipGap,
-    sCollapsedNameGap
+    sCollapsedNameGap,
+    // Reserved at the size the title is DRAWN at, which a shrunken screen layout
+    // does not shrink as far as its boxes, so the cap holds the same characters.
+    CARD_TITLE_MAX_WIDTH * (sCardTitleFontSize / CARD_TITLE_FONT_SIZE)
   );
   const width = exportDims?.width ?? layout.totalWidth;
   const height = exportDims?.height ?? layout.totalHeight;
@@ -561,6 +593,7 @@ function drawKanban(container, parsed, palette, isDark, options) {
     const col = colLayout.column;
     const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
     const g = svg.append("g").attr("class", "kanban-column").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
+    g.attr("data-group-toggle", col.id).attr("role", "button").attr("aria-expanded", String(!isColCollapsed)).attr("aria-label", col.name);
     const thisColBg = defaultColBg;
     const colColor = resolveColumnTagColor(col, parsed.tagGroups, activeTagGroup ?? null) ?? col.color;
     const thisColHeaderBg = colColor ? shapeFill(palette, colColor, isDark, { mode: fillMode }) : defaultColHeaderBg;
@@ -577,6 +610,17 @@ function drawKanban(container, parsed, palette, isDark, options) {
       g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight / 2).attr("dominant-baseline", "central").attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", col.color ? onHeaderText : palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight + sColumnPadding).attr("font-size", sCardTitleFontSize).attr("font-weight", "bold").attr("fill", palette.text).attr("text-anchor", "middle").attr("writing-mode", "tb").text(col.name);
+      renderCollapseBar(g, {
+        x: colLayout.x,
+        y: colLayout.y,
+        width: sCollapsedColumnWidth,
+        height: colLayout.height,
+        rx: sColumnRadius,
+        fill: colColor ?? wellStroke,
+        clipId: `kanban-col-clip-${col.id.replace(/[^A-Za-z0-9_-]/g, "_")}`,
+        prefix: "kanban",
+        scale: ctx
+      });
       const chips = collapsedChips(col.cards, activeGroup);
       if (chips.length > 0) {
         const chipX = colLayout.x + sCollapsedChipInset;
@@ -640,6 +684,18 @@ function drawKanban(container, parsed, palette, isDark, options) {
         wipExceeded ? palette.colors.red : col.color ? onHeaderText : palette.textMuted
       ).attr("font-weight", wipExceeded ? "bold" : "normal").text(badgeText);
     }
+    renderCollapseBar(g, {
+      expanded: true,
+      x: colLayout.x,
+      y: colLayout.y,
+      width: colLayout.width,
+      height: colLayout.height,
+      rx: sColumnRadius,
+      fill: colColor ?? wellStroke,
+      clipId: `kanban-col-clip-${col.id.replace(/[^A-Za-z0-9_-]/g, "_")}`,
+      prefix: "kanban",
+      scale: ctx
+    });
     for (const cardLayout of colLayout.cardLayouts) {
       const card = cardLayout.card;
       const resolvedColor = resolveCardTagColor(
@@ -681,7 +737,13 @@ function drawKanban(container, parsed, palette, isDark, options) {
       const cy = colLayout.y + cardLayout.y;
       cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", sCardRadius).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", sCardStrokeWidth);
       const titleEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", cy + sCardPaddingY + sCardTitleFontSize).attr("font-size", sCardTitleFontSize).attr("font-weight", "normal").attr("fill", onCardText);
-      renderInlineText(titleEl, card.title, palette, sCardTitleFontSize);
+      renderCardTitle(
+        titleEl,
+        card.title,
+        palette,
+        sCardTitleFontSize,
+        cardLayout.width - sCardPaddingX * 2
+      );
       if (hasMeta) {
         const separatorY = cy + sCardHeaderHeight;
         cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", fillMode === "solid" ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
@@ -1147,7 +1209,13 @@ function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palet
   const cy = cardLayout.y;
   cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", sCardRadius).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", sCardStrokeWidth);
   const titleEl = cg.append("text").attr("x", cx + sCardPaddingX).attr("y", cy + sCardPaddingY + sCardTitleFontSize).attr("font-size", sCardTitleFontSize).attr("font-weight", "normal").attr("fill", onCardText);
-  renderInlineText(titleEl, card.title, palette, sCardTitleFontSize);
+  renderCardTitle(
+    titleEl,
+    card.title,
+    palette,
+    sCardTitleFontSize,
+    cardLayout.width - sCardPaddingX * 2
+  );
   if (hasMeta) {
     const separatorY = cy + sCardHeaderHeight;
     cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);

package/dist/{chunk-62GLKE6Q.js → chunk-NOZMRPXI.js}

@@ -1,33 +1,43 @@
+import {
+  applyCollapseProjection,
+  collapsedGroupId,
+  collapsedSequenceNoteLinesFromSource,
+  isCollapsibleGroup,
+  isFoldableSequenceNote
+} from "./chunk-R4U7IIRX.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  collapseBarHeight,
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   layoutInlineHeader
-} from "./chunk-UIEKW4SG.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,
-  COLLAPSE_BAR_HEIGHT,
   EDGE_DASH,
   HAIRLINE_DASH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NMS5XSLX.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   isSequenceBlock,
   isSequenceNote,
   isSequenceSection
-} from "./chunk-VSAKEMDD.js";
+} from "./chunk-ROH4LYBL.js";
 import {
   wrapDescriptionLines
 } from "./chunk-7WEYXYLC.js";
@@ -40,19 +50,19 @@ import {
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   legendChromeColors
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,
@@ -63,135 +73,6 @@ import {
 // src/sequence/renderer.ts
 import * as d3Selection from "d3-selection";
 
-// src/sequence/collapse.ts
-function isCollapsibleGroup(group) {
-  return group.participantIds.length > 1;
-}
-function collapsedGroupId(group, groups) {
-  const shared = groups.some((g) => g !== group && g.name === group.name);
-  return shared ? `${group.name}@${group.lineNumber}` : group.name;
-}
-function applyCollapseProjection(parsed, requestedGroups) {
-  const collapsedGroups = new Set(
-    parsed.groups.filter((g) => requestedGroups.has(g.lineNumber) && isCollapsibleGroup(g)).map((g) => g.lineNumber)
-  );
-  if (collapsedGroups.size === 0) {
-    return {
-      participants: parsed.participants,
-      messages: parsed.messages,
-      elements: parsed.elements,
-      groups: parsed.groups,
-      collapsedGroupIds: /* @__PURE__ */ new Map()
-    };
-  }
-  const byName = new Map(parsed.groups.map((g) => [g.name, g]));
-  const insideCollapsed = (group) => {
-    let parentName = group.parent;
-    const seen = /* @__PURE__ */ new Set();
-    while (parentName !== void 0 && !seen.has(parentName)) {
-      seen.add(parentName);
-      const ancestor = byName.get(parentName);
-      if (!ancestor) return false;
-      if (collapsedGroups.has(ancestor.lineNumber)) return true;
-      parentName = ancestor.parent;
-    }
-    return false;
-  };
-  const memberToGroup = /* @__PURE__ */ new Map();
-  const virtualIds = /* @__PURE__ */ new Set();
-  const groupById = /* @__PURE__ */ new Map();
-  const byDepth = [...parsed.groups].sort((a, b) => a.depth - b.depth);
-  for (const group of byDepth) {
-    if (!collapsedGroups.has(group.lineNumber)) continue;
-    if (insideCollapsed(group)) continue;
-    const id = collapsedGroupId(group, parsed.groups);
-    virtualIds.add(id);
-    groupById.set(id, group);
-    for (const memberId of group.participantIds) {
-      if (!memberToGroup.has(memberId)) {
-        memberToGroup.set(memberId, id);
-      }
-    }
-  }
-  const participants = [];
-  const insertedGroups = /* @__PURE__ */ new Set();
-  for (const p of parsed.participants) {
-    const groupId = memberToGroup.get(p.id);
-    if (groupId) {
-      if (!insertedGroups.has(groupId)) {
-        insertedGroups.add(groupId);
-        const group = groupById.get(groupId);
-        participants.push({
-          id: groupId,
-          label: group.name,
-          type: "default",
-          lineNumber: group.lineNumber
-        });
-      }
-    } else if (virtualIds.has(p.id)) {
-    } else {
-      participants.push(p);
-    }
-  }
-  const remap = (id) => memberToGroup.get(id) ?? id;
-  const messages = parsed.messages.map((msg) => ({
-    ...msg,
-    from: remap(msg.from),
-    to: remap(msg.to)
-  }));
-  const elements = remapElements(parsed.elements, memberToGroup);
-  const groups = parsed.groups.filter((g) => !collapsedGroups.has(g.lineNumber) && !insideCollapsed(g)).map((g) => {
-    const remapped = [];
-    for (const id of g.participantIds) {
-      const to = memberToGroup.get(id) ?? id;
-      if (!remapped.includes(to)) remapped.push(to);
-    }
-    return { ...g, participantIds: remapped };
-  });
-  return {
-    participants,
-    messages,
-    elements,
-    groups,
-    collapsedGroupIds: memberToGroup
-  };
-}
-function remapElements(elements, memberToGroup) {
-  const remap = (id) => memberToGroup.get(id) ?? id;
-  const result = [];
-  for (const el of elements) {
-    if (isSequenceSection(el)) {
-      result.push(el);
-    } else if (isSequenceNote(el)) {
-      result.push({
-        ...el,
-        participantId: remap(el.participantId)
-      });
-    } else if (isSequenceBlock(el)) {
-      result.push({
-        ...el,
-        children: remapElements(el.children, memberToGroup),
-        elseChildren: remapElements(el.elseChildren, memberToGroup),
-        ...el.elseIfBranches ? {
-          elseIfBranches: el.elseIfBranches.map((branch) => ({
-            ...branch,
-            children: remapElements(branch.children, memberToGroup)
-          }))
-        } : {}
-      });
-    } else {
-      const msg = el;
-      const from = remap(msg.from);
-      const to = remap(msg.to);
-      if (from === to && from !== msg.from && !msg.label) {
-        continue;
-      }
-      result.push({ ...msg, from, to });
-    }
-  }
-  return result;
-}
-
 // src/sequence/tag-resolution.ts
 function propagateGroupTags(participantMeta, groups) {
   for (const group of [...groups].sort((a, b) => b.depth - a.depth)) {
@@ -762,6 +643,9 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
   const elements = collapsed ? collapsed.elements : parsed.elements;
   const groups = collapsed ? collapsed.groups : parsed.groups;
   const collapsedSections = options?.collapsedSections;
+  const collapsedNoteLines = options?.collapsedNotes ?? collapsedSequenceNoteLinesFromSource(parsed);
+  const isNoteFolded = (note) => isFoldableSequenceNote(note) && collapsedNoteLines.has(note.lineNumber);
+  const shownNoteText = (note) => isNoteFolded(note) ? note.text.split("\n")[0] : note.text;
   const autonumber = parsedOptions["autonumber"]?.toLowerCase() === "on";
   const sourceMessageNumberByLine = new Map(
     parsed.messages.map((message, index) => [message.lineNumber, index + 1])
@@ -907,6 +791,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
   const clampStep = (i) => Math.min(Math.max(i, 0), lastStepIdx);
   const activations = activationsOff ? [] : computeActivations(allRenderSteps).map((a) => {
     const closingStep = allRenderSteps[a.endStep];
+    const openingStep = allRenderSteps[a.startStep];
     return {
       ...a,
       startStep: clampStep(allToFiltered[a.startStep] ?? 0),
@@ -914,7 +799,14 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
       // True when the return that closes this bar was dropped from the
       // layout, so `endStep` is not the bar's own event but whatever
       // happens next. The bar has to stop short of it — see the render.
-      implicitEnd: closingStep !== void 0 && !stepSurvives(closingStep)
+      implicitEnd: closingStep !== void 0 && !stepSurvives(closingStep),
+      // True when nothing laid out follows the dropped return, so
+      // `endStep` clamps back onto the last step and the bar ends where
+      // a next step WOULD sit instead (#1436); a last unreturned call's
+      // bar used to draw 0 tall. Only for a bar whose own call is laid
+      // out: one opened inside a collapsed section clamps onto a step
+      // that is not its own, and stays the 0-tall bar it always was.
+      endsAfterLast: openingStep !== void 0 && stepSurvives(openingStep) && (allToFiltered[a.endStep] ?? 0) >= renderSteps.length
     };
   });
   const stepSpacing = 35;
@@ -1042,7 +934,10 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
           const note = els[j];
           const sc = isNoteAfterSelfCall(note);
           const maxW = noteEffectiveMaxW(note.participantId, note.position, sc);
-          const noteH = computeNoteHeight(note.text, noteTextWidth(maxW));
+          const noteH = computeNoteHeight(
+            shownNoteText(note),
+            noteTextWidth(maxW)
+          );
           totalExtent += noteH + NOTE_OFFSET_BELOW;
           j++;
         }
@@ -1247,7 +1142,8 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
       }
     });
     for (const act of activations) {
-      if (!act.implicitEnd || act.endStep <= act.startStep) continue;
+      if (!act.implicitEnd || act.endsAfterLast) continue;
+      if (act.endStep <= act.startStep) continue;
       const step = renderSteps[act.endStep];
       if (!step || step.from === step.to) continue;
       if (step.from === act.participantId || step.to === act.participantId) {
@@ -1278,6 +1174,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
   const stepYPositions = [];
   const sectionYPositions = /* @__PURE__ */ new Map();
   let layoutEndY;
+  let stepsEndY;
   {
     let curY = lifelineStartY0 + messageStartOffset;
     for (let i = 0; i < renderSteps.length; i++) {
@@ -1300,6 +1197,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
       const isSelfCall = step.type === "call" && step.from === step.to;
       curY += isSelfCall ? sSelfCallHeight + 25 : stepSpacing;
     }
+    stepsEndY = curY;
     for (const sec of trailingSections) {
       const bandPad = collapsedBandPad(sec);
       curY += SECTION_TOP_PAD + bandPad;
@@ -1366,7 +1264,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
       effectiveNotePosition(note),
       isNoteAfterSelfCall(note)
     );
-    const noteH = computeNoteHeight(note.text, noteTextWidth(maxW));
+    const noteH = computeNoteHeight(shownNoteText(note), noteTextWidth(maxW));
     contentBottomY = Math.max(
       contentBottomY,
       noteTopY + noteH + NOTE_TRAILING_GAP
@@ -1528,7 +1426,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
     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);
+    const barHeight = collapseBarHeight(ctx);
     collapsedGroupBoxes.set(collapsedGroupId(group, parsed.groups), {
       name: group.name,
       lineNumber: group.lineNumber,
@@ -1540,9 +1438,7 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
       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
+      nameY: -padTop + (height - barHeight) / 2
     });
   }
   const framedGroups = [...groups].sort((a, b) => a.depth - b.depth);
@@ -1803,8 +1699,9 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
     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 rawY2 = act.endsAfterLast ? stepsEndY : stepY(act.endStep);
+    const roomBefore = act.endsAfterLast ? 0 : labelRoomBefore[act.endStep];
+    const implicitY2 = rawY2 - roomBefore - ACTIVATION_IMPLICIT_END_CLEARANCE;
     const y2 = act.implicitEnd && implicitY2 > y1 + sActivationWidth ? implicitY2 : rawY2;
     return { x, y: y1, width: sActivationWidth, height: y2 - y1 };
   });
@@ -1863,7 +1760,11 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
     if (px === void 0) continue;
     const { topY, position, afterSelfCall, maxW, textWidth } = noteLayout;
     const isRight = position === "right";
-    const wrappedLines = wrapTextLines(note.text, textWidth, sNoteFontSize);
+    const wrappedLines = wrapTextLines(
+      shownNoteText(note),
+      textWidth,
+      sNoteFontSize
+    );
     const noteH = wrappedLines.length * sNoteLineH + sNotePadV * 2;
     const maxLineW = Math.max(
       ...wrappedLines.map((l) => measureText(l.text, sNoteFontSize))
@@ -1875,6 +1776,8 @@ function layoutSequencePass(parsed, containerWidth, options, fit) {
     const rightOffset = afterSelfCall && isRight ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
     const noteX = isRight ? px + rightOffset : px - sActivationWidth - sNoteGap - noteW;
     noteBoxes.set(note, {
+      foldable: isFoldableSequenceNote(note),
+      folded: isNoteFolded(note),
       x: noteX,
       y: topY,
       width: noteW,
@@ -2082,9 +1985,24 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     if (collapsible) {
       groupG.attr("data-line-number", String(group.lineNumber)).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");
+    const frameRect = 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("class", "group-box");
+    if (!collapsible) frameRect.attr("pointer-events", "none");
     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);
+    if (collapsible) {
+      renderCollapseBar(groupG, {
+        expanded: true,
+        x: frame.x,
+        y: frame.y,
+        width: frame.width,
+        height: frame.height,
+        rx: 6,
+        fill: strokeColor,
+        clipId: `clip-group-frame-${group.lineNumber}`,
+        prefix: "sequence",
+        scale: ctx
+      });
+    }
   }
   participants.forEach((participant) => {
     const cx = participantX.get(participant.id);
@@ -2113,7 +2031,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       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 { padTop, height: fullH, nameY } = meta;
       const clipId = `clip-drill-group-${participant.id.replace(/[^a-zA-Z0-9-]/g, "-")}`;
       const participantG = svg.select(
         `.participant[data-participant-id="${participant.id}"]`
@@ -2123,8 +2041,17 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       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})`);
+      renderCollapseBar(participantG, {
+        x: -boxW / 2,
+        y: -padTop,
+        width: boxW,
+        height: fullH,
+        rx: 6,
+        fill: drillColor,
+        clipId,
+        prefix: "sequence",
+        scale: ctx
+      });
     }
     const llColor = effectiveTagColor ?? palette.textMuted;
     for (const [segTop, segBottom] of lifelines.get(participant.id) ?? []) {
@@ -2189,6 +2116,18 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const bandFill = isCollapsed ? legendChromeColors(palette, isDark).groupBg : lineColor;
     const bandOpacity = isCollapsed ? 1 : isDark ? 0.1 : 0.08;
     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");
+    renderCollapseBar(sectionG, {
+      expanded: !isCollapsed,
+      x: band.x,
+      y: secY - BAND_HEIGHT / 2,
+      width: band.width,
+      height: BAND_HEIGHT,
+      rx: 2,
+      fill: lineColor,
+      clipId: `seq-section-clip-${sec.lineNumber}`,
+      prefix: "sequence-section",
+      scale: ctx
+    });
     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");
@@ -2306,7 +2245,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         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));
+        const noteG = svg.append("g").attr("class", box.folded ? "note note-collapsed" : "note").attr("data-line-number", String(el.lineNumber)).attr("data-line-end", String(el.endLineNumber));
+        if (box.foldable) {
+          noteG.attr("data-note-toggle", String(el.lineNumber)).attr("role", "button").attr("aria-expanded", box.folded ? "false" : "true").attr("aria-label", el.text.split("\n")[0]).style("cursor", "pointer");
+        }
         noteG.append("path").attr(
           "d",
           [
@@ -2333,6 +2275,20 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
           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);
         }
+        if (box.foldable) {
+          renderCollapseBar(noteG, {
+            expanded: !box.folded,
+            x: noteX,
+            y: noteTopY,
+            width: noteW,
+            height: noteH,
+            rx: 0,
+            fill: palette.textMuted,
+            clipId: `clip-note-${String(el.lineNumber)}`,
+            prefix: "sequence-note",
+            scale: ctx
+          });
+        }
       } else if (isSequenceBlock(el)) {
         renderNoteElements(el.children);
         if (el.elseIfBranches) {
@@ -2456,7 +2412,6 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
 }
 
 export {
-  applyCollapseProjection,
   groupMessagesBySection,
   summarizeSectionParticipation,
   buildRenderSequence,