@diagrammo/dgmo 0.96.0 → 0.98.0

package/dist/{chunk-ZBOIYC2G.js → chunk-NXOIH5JK.js}

@@ -1,14 +1,17 @@
+import {
+  QUEUE_CAP
+} from "./chunk-VTGGPBLW.js";
 import {
   META_FONT_SIZE,
   META_LINE_HEIGHT
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   UNTAGGED_TAG_COLOR,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   legendSuppressed
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -19,16 +22,11 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText,
   wrapTextToWidth
-} from "./chunk-KAO7JL4I.js";
-
-// src/shape-caps.ts
-var CYLINDER_RY = 8;
-var QUEUE_CAP = 16;
-var FILE_WAVE = 10;
+} from "./chunk-PU5X3P3T.js";
 
 // src/c4/layout.ts
 import dagre from "@dagrejs/dagre";
@@ -1736,9 +1734,6 @@ function layoutC4Deployment(parsed, activeTagGroup) {
 }
 
 export {
-  CYLINDER_RY,
-  QUEUE_CAP,
-  FILE_WAVE,
   rollUpContextRelationships,
   collectCardMetadata,
   computeC4NodeDimensions,

package/dist/{chunk-AUXUNV73.js → chunk-O3HRF25Z.js}

@@ -7,7 +7,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   makeDgmoError
 } from "./chunk-BYU54C3S.js";

package/dist/{chunk-KDWEOT54.js → chunk-O5APWRZN.js}

@@ -1,33 +1,47 @@
+import {
+  applyCollapseProjection,
+  collapsedGroupId,
+  collapsedSequenceNoteLinesFromSource,
+  isCollapsibleGroup,
+  isFoldableSequenceNote
+} from "./chunk-R4U7IIRX.js";
+import {
+  SEQUENCE_CYLINDER_RY,
+  SEQUENCE_QUEUE_CAP
+} from "./chunk-VTGGPBLW.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  collapseBarHeight,
+  renderCollapseBar
+} from "./chunk-42AZPI2W.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.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-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   isSequenceBlock,
   isSequenceNote,
   isSequenceSection
-} from "./chunk-JCC3B2GS.js";
+} from "./chunk-ROH4LYBL.js";
 import {
   wrapDescriptionLines
 } from "./chunk-7WEYXYLC.js";
@@ -40,19 +54,19 @@ import {
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-FUYEXLAN.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,133 +77,83 @@ 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;
+// src/sequence/participant-shapes.ts
+var PARTICIPANT_BOX_HEIGHT = 50;
+var STROKE_WIDTH = 1.5;
+function cylinder(axis, w, h, cap) {
+  const v = axis === "y";
+  const start = v ? cap : -w / 2 + cap;
+  const span = (v ? h : w) - cap * 2;
+  const end = start + span;
+  const [lo, hi, mid, half] = v ? [-w / 2, w / 2, 0, w / 2] : [0, h, h / 2, h / 2];
+  const at = (a, c) => v ? [c, a] : [a, c];
+  const capAt = (a) => {
+    const [cx, cy] = at(a, mid);
+    const [rx, ry] = v ? [half, cap] : [cap, half];
+    return { tag: "ellipse", paint: "shape", attrs: { cx, cy, rx, ry } };
   };
-  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 };
+  const wall = (c) => {
+    const [x1, y1] = at(start, c);
+    const [x2, y2] = at(end, c);
+    return { tag: "line", paint: "line", attrs: { x1, y1, x2, y2 } };
+  };
+  const [x, y] = at(start, lo);
+  const body = {
+    tag: "rect",
+    paint: "body",
+    attrs: { x, y, width: v ? w : span, height: v ? span : h }
+  };
+  return [capAt(end), body, wall(lo), wall(hi), capAt(start)];
+}
+function actor(h) {
+  const sc = h / PARTICIPANT_BOX_HEIGHT;
+  const hip = h * 0.65;
+  const legY = h - 2 * sc;
+  const line = (x1, y1, x2, y2) => ({
+    tag: "line",
+    paint: "line",
+    attrs: { x1, y1, x2, y2 }
   });
   return {
-    participants,
-    messages,
-    elements,
-    groups,
-    collapsedGroupIds: memberToGroup
+    parts: [
+      {
+        tag: "circle",
+        paint: "ring",
+        attrs: { cx: 0, cy: 10 * sc, r: 8 * sc }
+      },
+      line(0, 19 * sc, 0, hip),
+      line(-16 * sc, 24 * sc, 16 * sc, 24 * sc),
+      line(0, hip, -12 * sc, legY),
+      line(0, hip, 12 * sc, legY)
+    ],
+    strokeWidth: Math.max(1.2, 2.5 * sc),
+    dashed: false
   };
 }
-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 });
-    }
+function participantShape(type, w, h) {
+  const drawn = (parts, dashed = false) => ({
+    parts,
+    strokeWidth: STROKE_WIDTH,
+    dashed
+  });
+  switch (type) {
+    case "actor":
+      return actor(h);
+    case "database":
+      return drawn(cylinder("y", w, h, SEQUENCE_CYLINDER_RY));
+    case "cache":
+      return drawn(cylinder("y", w, h, SEQUENCE_CYLINDER_RY), true);
+    case "queue":
+      return drawn(cylinder("x", w, h, SEQUENCE_QUEUE_CAP));
+    default:
+      return drawn([
+        {
+          tag: "rect",
+          paint: "shape",
+          attrs: { x: -w / 2, y: 0, width: w, height: h, rx: 2, ry: 2 }
+        }
+      ]);
   }
-  return result;
 }
 
 // src/sequence/tag-resolution.ts
@@ -278,7 +242,6 @@ function resolveSequenceTags(parsed, activeTagGroup) {
 // src/sequence/renderer.ts
 var PARTICIPANT_GAP = 160;
 var PARTICIPANT_BOX_WIDTH = 120;
-var PARTICIPANT_BOX_HEIGHT = 50;
 var LABEL_FONT_SIZE = 13;
 var TOP_MARGIN = 20;
 var TITLE_HEIGHT = 30;
@@ -345,67 +308,23 @@ function wrapLabelWords(words, maxWidth, fontSize, sep = "") {
 }
 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 SW = 1.5;
 var W = PARTICIPANT_BOX_WIDTH;
 var H = PARTICIPANT_BOX_HEIGHT;
-function renderRectParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
-  g.append("rect").attr("x", -w / 2).attr("y", 0).attr("width", w).attr("height", h).attr("rx", 2).attr("ry", 2).attr("fill", fill(palette, isDark, color, fillMode)).attr("stroke", stroke(palette, color)).attr("stroke-width", SW);
-}
-function renderActorParticipant(g, palette, color, h = H) {
-  const sc = h / H;
-  const headR = 8 * sc;
-  const cx = 0;
-  const headY = 10 * sc;
-  const bodyTopY = 19 * sc;
-  const bodyBottomY = h * 0.65;
-  const legY = h - 2 * sc;
-  const armY = 24 * sc;
-  const armSpan = 16 * sc;
-  const legSpan = 12 * sc;
-  const s = stroke(palette, color);
-  const actorSW = Math.max(1.2, 2.5 * sc);
-  g.append("circle").attr("cx", cx).attr("cy", headY).attr("r", headR).attr("fill", "none").attr("stroke", s).attr("stroke-width", actorSW);
-  g.append("line").attr("x1", cx).attr("y1", bodyTopY).attr("x2", cx).attr("y2", bodyBottomY).attr("stroke", s).attr("stroke-width", actorSW);
-  g.append("line").attr("x1", cx - armSpan).attr("y1", armY).attr("x2", cx + armSpan).attr("y2", armY).attr("stroke", s).attr("stroke-width", actorSW);
-  g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx - legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
-  g.append("line").attr("x1", cx).attr("y1", bodyBottomY).attr("x2", cx + legSpan).attr("y2", legY).attr("stroke", s).attr("stroke-width", actorSW);
-}
-function renderDatabaseParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
-  const ry = 7;
-  const topY = ry;
-  const bodyH = h - ry * 2;
-  const f = fill(palette, isDark, color, fillMode);
-  const s = stroke(palette, color);
-  g.append("ellipse").attr("cx", 0).attr("cy", topY + bodyH).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
-  g.append("rect").attr("class", "participant-body").attr("x", -w / 2).attr("y", topY).attr("width", w).attr("height", bodyH).attr("fill", f).attr("stroke", "none");
-  g.append("line").attr("x1", -w / 2).attr("y1", topY).attr("x2", -w / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW);
-  g.append("line").attr("x1", w / 2).attr("y1", topY).attr("x2", w / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW);
-  g.append("ellipse").attr("cx", 0).attr("cy", topY).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
-}
-function renderQueueParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
-  const rx = 10;
-  const leftX = -w / 2 + rx;
-  const bodyW = w - rx * 2;
-  const f = fill(palette, isDark, color, fillMode);
-  const s = stroke(palette, color);
-  g.append("ellipse").attr("cx", leftX + bodyW).attr("cy", h / 2).attr("rx", rx).attr("ry", h / 2).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
-  g.append("rect").attr("class", "participant-body").attr("x", leftX).attr("y", 0).attr("width", bodyW).attr("height", h).attr("fill", f).attr("stroke", "none");
-  g.append("line").attr("x1", leftX).attr("y1", 0).attr("x2", leftX + bodyW).attr("y2", 0).attr("stroke", s).attr("stroke-width", SW);
-  g.append("line").attr("x1", leftX).attr("y1", h).attr("x2", leftX + bodyW).attr("y2", h).attr("stroke", s).attr("stroke-width", SW);
-  g.append("ellipse").attr("cx", leftX).attr("cy", h / 2).attr("rx", rx).attr("ry", h / 2).attr("fill", f).attr("stroke", s).attr("stroke-width", SW);
-}
-function renderCacheParticipant(g, palette, isDark, color, fillMode, w = W, h = H) {
-  const ry = 7;
-  const topY = ry;
-  const bodyH = h - ry * 2;
-  const f = fill(palette, isDark, color, fillMode);
-  const s = stroke(palette, color);
-  const dash = EDGE_DASH;
-  g.append("ellipse").attr("cx", 0).attr("cy", topY + bodyH).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
-  g.append("rect").attr("class", "participant-body").attr("x", -w / 2).attr("y", topY).attr("width", w).attr("height", bodyH).attr("fill", f).attr("stroke", "none");
-  g.append("line").attr("x1", -w / 2).attr("y1", topY).attr("x2", -w / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
-  g.append("line").attr("x1", w / 2).attr("y1", topY).attr("x2", w / 2).attr("y2", topY + bodyH).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
-  g.append("ellipse").attr("cx", 0).attr("cy", topY).attr("rx", w / 2).attr("ry", ry).attr("fill", f).attr("stroke", s).attr("stroke-width", SW).attr("stroke-dasharray", dash);
+function drawParticipantShape(g, shape, fillColor, strokeColor) {
+  for (const part of shape.parts) {
+    const el = g.append(part.tag);
+    if (part.paint === "body") el.attr("class", "participant-body");
+    for (const [name, value] of Object.entries(part.attrs))
+      el.attr(name, value);
+    if (part.paint === "body") {
+      el.attr("fill", fillColor).attr("stroke", "none");
+      continue;
+    }
+    if (part.paint !== "line")
+      el.attr("fill", part.paint === "ring" ? "none" : fillColor);
+    el.attr("stroke", strokeColor).attr("stroke-width", shape.strokeWidth);
+    if (shape.dashed) el.attr("stroke-dasharray", EDGE_DASH);
+  }
 }
 function groupMessagesBySection(elements, messages) {
   const groups = [];
@@ -762,6 +681,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])
@@ -1050,7 +972,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++;
         }
@@ -1377,7 +1302,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
@@ -1539,7 +1464,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,
@@ -1551,9 +1476,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);
@@ -1875,7 +1798,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))
@@ -1887,6 +1814,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,
@@ -2094,9 +2023,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);
@@ -2125,7 +2069,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}"]`
@@ -2135,8 +2079,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) ?? []) {
@@ -2201,6 +2154,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");
@@ -2318,7 +2283,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",
           [
@@ -2345,6 +2313,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) {
@@ -2415,31 +2397,12 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     g.attr(`data-tag-${tagAttrKey(tagAttr.key)}`, tagAttr.value);
   }
   if (overlaid) return;
-  switch (participant.type) {
-    case "actor":
-      renderActorParticipant(g, palette, color, boxH);
-      break;
-    case "database":
-      renderDatabaseParticipant(
-        g,
-        palette,
-        isDark,
-        color,
-        fillMode,
-        boxW,
-        boxH
-      );
-      break;
-    case "queue":
-      renderQueueParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-    case "cache":
-      renderCacheParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-    default:
-      renderRectParticipant(g, palette, isDark, color, fillMode, boxW, boxH);
-      break;
-  }
+  drawParticipantShape(
+    g,
+    participantShape(participant.type, boxW, boxH),
+    fill(palette, isDark, color, fillMode),
+    stroke(palette, color)
+  );
   const isActor = participant.type === "actor";
   const labelLines = splitParticipantLabel(
     participant.label,
@@ -2468,7 +2431,6 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
 }
 
 export {
-  applyCollapseProjection,
   groupMessagesBySection,
   summarizeSectionParticipation,
   buildRenderSequence,