@zenuml/core 4.3.0 → 4.3.1

package/dist/cli/zenuml.mjs

@@ -9723,6 +9723,7 @@ const PARTICIPANT_ICON_WIDTH = 40;
 const LIFELINE_WIDTH = 1;
 const PARTICIPANT_TOP_SPACE_FOR_GROUP = 20;
 const OCCURRENCE_EMPTY_HEIGHT = 24;
+const DIAGRAM_HEADER_HEIGHT = 24 + 4 * 2 + 1;
 
 var TextType = /* @__PURE__ */ ((TextType2) => {
   TextType2[TextType2["MessageContent"] = 0] = "MessageContent";
@@ -10120,6 +10121,7 @@ const ASYNC_SELF_MESSAGE_HEIGHT = 44;
 const CREATION_MESSAGE_HEIGHT = 40;
 const COMMENT_LINE_HEIGHT = tw(5);
 const FRAGMENT_BORDER_WIDTH = 1;
+const FRAGMENT_GUARD_HEIGHT = 28;
 
 function getLocalParticipantNames(ctx) {
   if (!ctx) return [];
@@ -10652,7 +10654,7 @@ class FragmentAltVM extends StatementVM {
     let cursor = top + 1 + this.metrics.fragmentHeaderHeight + commentHeight;
     const ifBlock = this.alt?.ifBlock?.();
     if (ifBlock) {
-      cursor += 20;
+      cursor += FRAGMENT_GUARD_HEIGHT;
       cursor = this.layoutBlock(
         ifBlock.braceBlock()?.block(),
         leftParticipant,
@@ -10660,7 +10662,7 @@ class FragmentAltVM extends StatementVM {
       );
     }
     this.alt?.elseIfBlock?.()?.forEach((block) => {
-      cursor += 20;
+      cursor += FRAGMENT_GUARD_HEIGHT;
       cursor += 8;
       cursor += 1;
       cursor = this.layoutBlock(
@@ -10671,7 +10673,7 @@ class FragmentAltVM extends StatementVM {
     });
     const elseBlock = this.alt?.elseBlock?.()?.braceBlock?.()?.block?.();
     if (elseBlock) {
-      cursor += 20;
+      cursor += FRAGMENT_GUARD_HEIGHT;
       cursor += 8;
       cursor += 1;
       cursor = this.layoutBlock(elseBlock, leftParticipant, cursor);
@@ -10706,7 +10708,7 @@ class FragmentSingleBlockVM extends StatementVM {
     const commentHeight = this.measureComment(this.fragment);
     let cursor = top + FRAGMENT_BORDER_WIDTH + this.metrics.fragmentHeaderHeight + commentHeight;
     const hasCondition = Boolean(this.fragment?.parExpr?.()?.condition?.());
-    if (hasCondition) cursor += 20;
+    if (hasCondition) cursor += FRAGMENT_GUARD_HEIGHT;
     const block = this.fragment?.braceBlock?.()?.block?.();
     if (block) {
       const fragmentOrigin = this.findLeftParticipant(this.fragment, origin) || origin;
@@ -10955,10 +10957,14 @@ const clearPersistentCache = () => {
 };
 
 const FONT_FAMILY = "Helvetica, Verdana, serif";
-const FONT_SIZE_PARTICIPANT = "16px";
+const FONT_SIZE_PARTICIPANT = "14px";
+const FONT_SIZE_MESSAGE = "15px";
 const FONT_SIZE_FRAGMENT = "14px";
-function getFontSpec() {
-  return `${FONT_SIZE_PARTICIPANT} ${FONT_FAMILY}`;
+function getFontSize(type) {
+  return type === TextType.MessageContent ? FONT_SIZE_MESSAGE : FONT_SIZE_PARTICIPANT;
+}
+function getFontSpec(type) {
+  return `${getFontSize(type)} ${FONT_FAMILY}`;
 }
 let canvasCtx = null;
 function setCanvasContext(ctx) {
@@ -10980,18 +10986,21 @@ function getCanvasContext() {
 }
 function WidthProviderOnCanvas(text, type) {
   const measured = text.trim();
-  const cacheKey = `WidthProviderOnCanvas_${getFontSpec()}_${measured}_${type}`;
+  const cacheKey = `WidthProviderOnCanvas_${getFontSpec(type)}_${measured}_${type}`;
   const cacheValue = getCache(cacheKey);
   if (cacheValue != null) {
     return cacheValue;
   }
   const ctx = getCanvasContext();
   if (!ctx) {
-    const width2 = Math.ceil(measured.length * 16 * 0.6);
+    const width2 = Math.ceil(
+      measured.length * Number.parseFloat(getFontSize(type)) * 0.6
+    );
     setCache(cacheKey, width2);
     return width2;
   }
-  ctx.font = getFontSpec();
+  ctx.font = getFontSpec(type);
+  ctx.fontVariantCaps = "normal";
   const width = Math.round(ctx.measureText(measured).width);
   setCache(cacheKey, width, true);
   return width;
@@ -11000,32 +11009,34 @@ const EMOJI_PATTERN = (
   // eslint-disable-next-line no-misleading-character-class
   /[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}\u{FE00}-\u{FE0F}\u{200D}]/u
 );
-function measureWithSvg(text, fontSize) {
+function measureWithSvg(text, fontSize, caps = "normal") {
   if (typeof document === "undefined") return null;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("style", "position:absolute;left:-9999px;top:-9999px");
   const textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
   textEl.setAttribute("font-family", FONT_FAMILY);
   textEl.setAttribute("font-size", fontSize);
+  textEl.style.fontVariantCaps = caps;
+  if (typeof textEl.getBBox !== "function") return null;
   textEl.textContent = text;
   svg.appendChild(textEl);
   document.body.appendChild(svg);
   const width = textEl.getBBox().width;
   document.body.removeChild(svg);
-  return width;
+  return Number.isFinite(width) && width > 0 ? width : null;
 }
-function measureTextWithFont(text, fontSize) {
+function measureTextWithFont(text, fontSize, caps = "normal") {
   const measured = text.trim();
   if (!measured) return 0;
   const hasEmoji = EMOJI_PATTERN.test(measured);
   const font = `${fontSize} ${FONT_FAMILY}`;
-  const cacheKey = hasEmoji ? `measureTextWithFont_svg_${font}_${measured}` : `measureTextWithFont_${font}_${measured}`;
+  const cacheKey = (hasEmoji ? `measureTextWithFont_svg_${font}_${measured}` : `measureTextWithFont_${font}_${measured}`) + `_${caps}`;
   const cacheValue = getCache(cacheKey);
   if (cacheValue != null) {
     return cacheValue;
   }
-  if (hasEmoji) {
-    const svgWidth = measureWithSvg(measured, fontSize);
+  if (hasEmoji || caps !== "normal") {
+    const svgWidth = measureWithSvg(measured, fontSize, caps);
     if (svgWidth != null) {
       setCache(cacheKey, svgWidth, true);
       return svgWidth;
@@ -11039,7 +11050,15 @@ function measureTextWithFont(text, fontSize) {
     return width2;
   }
   ctx.font = font;
-  const width = ctx.measureText(measured).width;
+  ctx.fontVariantCaps = "normal";
+  const normalWidth = ctx.measureText(measured).width;
+  let width = normalWidth;
+  if (caps !== "normal") {
+    const normalProbe = ctx.measureText("iiii").width;
+    ctx.fontVariantCaps = caps;
+    width = Math.abs(ctx.measureText("iiii").width - normalProbe) > 0.01 ? ctx.measureText(measured).width : Math.max(normalWidth, ctx.measureText(measured.toUpperCase()).width);
+    ctx.fontVariantCaps = "normal";
+  }
   setCache(cacheKey, width, true);
   return width;
 }
@@ -11050,6 +11069,11 @@ function measureSvgParticipantLabelWidth(text) {
   return measureTextWithFont(text, FONT_SIZE_PARTICIPANT);
 }
 
+const fragmentGuardKeyword = (kind, sourceKeyword) => kind === "alt" || kind === "opt" ? "if" : kind === "loop" ? sourceKeyword ?? "loop" : void 0;
+const fragmentGuardWidth = (condition, keyword) => Math.ceil(
+  10 + measureTextWithFont(resolveEmojiInText(condition), "14px") + (keyword ? measureTextWithFont(keyword, "12px", "all-small-caps") + (condition ? 4 : 0) : 0)
+);
+
 const walker = antlr4.tree.ParseTreeWalker.DEFAULT;
 class FrameBuilder extends sequenceParserListener {
   _orderedParticipants;
@@ -11164,6 +11188,23 @@ function FrameBorder(frame) {
   };
 }
 
+const fragmentHeaderLabel = (kind) => {
+  const labels = {
+    alt: "Alt",
+    loop: "Loop",
+    opt: "Opt",
+    par: "Par",
+    critical: "Critical",
+    section: "Section",
+    tcf: "Try",
+    ref: "Ref"
+  };
+  return labels[kind] ?? kind.charAt(0).toUpperCase() + kind.slice(1);
+};
+const fragmentHeaderWidth = (label, number) => Math.ceil(
+  32 + measureTextWithFont(label, "14px", "all-small-caps") * 1.1 + (number ? measureTextWithFont(number, "12px") + 15 : 0)
+);
+
 function TotalWidth(ctx, coordinates) {
   const allParticipants = coordinates.orderedParticipantNames();
   if (!ctx || allParticipants.length === 0) return 0;
@@ -11388,7 +11429,8 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
             if (firstStatKey) {
               const innerCoord = verticalCoordinates.getStatementCoordinate(firstStatKey);
               if (innerCoord) {
-                sectionY = innerCoord.top - 20 - 8 - 8 - 1;
+                const labelHeight = info.fragmentKind === "alt" ? FRAGMENT_GUARD_HEIGHT : 20;
+                sectionY = innerCoord.top - labelHeight - 8 - 8 - 1;
               }
             }
           }
@@ -11397,11 +11439,14 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
       const sectionHeight = i < info.fragmentSections.length - 1 ? 0 : coord.top + coord.height - sectionY;
       sections.push({
         label: section.label,
+        guardKeyword: section.guardKeyword,
         y: sectionY,
         height: sectionHeight,
         labelWidth: section.label ? measureSvgFragmentLabelWidth(resolveEmojiInText(section.label)) : void 0,
-        innerLabel: /^\[\s*.*\s*\]$/.test(section.label) ? section.label.slice(1, -1).trim() : void 0,
-        innerLabelWidth: /^\[\s*.*\s*\]$/.test(section.label) ? measureSvgFragmentLabelWidth(
+        innerLabel: section.condition ?? (/^\[\s*.*\s*\]$/.test(section.label) ? section.label.slice(1, -1).trim() : void 0),
+        innerLabelWidth: section.condition !== void 0 ? measureSvgFragmentLabelWidth(
+          resolveEmojiInText(section.condition)
+        ) : /^\[\s*.*\s*\]$/.test(section.label) ? measureSvgFragmentLabelWidth(
           resolveEmojiInText(section.label.slice(1, -1).trim())
         ) : void 0,
         keyword: (() => {
@@ -11472,7 +11517,9 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
   return {
     fragment: {
       kind: info.fragmentKind,
+      headerLabel: info.fragmentHeaderLabel,
       label: info.fragmentLabel || "",
+      guardKeyword: info.guardKeyword,
       labelWidth: info.fragmentLabel ? measureSvgFragmentLabelWidth(resolveEmojiInText(info.fragmentLabel)) : void 0,
       x: fragX,
       y: coord.top,
@@ -11688,6 +11735,8 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
       hasBlock: false,
       fragmentKind: fragmentInfo.fragmentKind,
       fragmentLabel: fragmentInfo.label,
+      fragmentHeaderLabel: fragmentInfo.headerLabel,
+      guardKeyword: fragmentInfo.guardKeyword,
       fragmentSections: fragmentInfo.sections,
       comment,
       statNode: stat,
@@ -11714,7 +11763,9 @@ function extractFragmentInfo(stat) {
       const label = condition?.getFormattedText?.() || "";
       return {
         fragmentKind: kind,
+        headerLabel: frag.atom?.()?.getFormattedText?.(),
         label,
+        guardKeyword: kind === "loop" ? frag.WHILE?.()?.getText?.() : void 0,
         sections: [{ label, blockNode: frag.braceBlock?.()?.block?.() }]
       };
     }
@@ -11726,6 +11777,8 @@ function extractFragmentInfo(stat) {
     if (ifBlock) {
       sections.push({
         label: "Alt",
+        guardKeyword: "if",
+        condition: ifBlock.parExpr?.()?.condition?.()?.getFormattedText?.() || "",
         blockNode: ifBlock.braceBlock?.()?.block?.()
       });
     }
@@ -11733,14 +11786,17 @@ function extractFragmentInfo(stat) {
       const condition = elseIf.parExpr?.()?.condition?.();
       const label = condition?.getFormattedText?.() || "";
       sections.push({
-        label: `[ ${label} ]`,
+        label: `else if ${label}`,
+        guardKeyword: "else if",
+        condition: label,
         blockNode: elseIf.braceBlock?.()?.block?.()
       });
     }
     const elseBlock = alt.elseBlock?.();
     if (elseBlock) {
       sections.push({
-        label: "[else]",
+        label: "else",
+        guardKeyword: "else",
         blockNode: elseBlock.braceBlock?.()?.block?.()
       });
     }
@@ -12381,13 +12437,36 @@ function buildGeometry(input) {
     participants,
     measureText
   );
-  const { messages, selfCalls, occurrences, creations, fragments, returns, dividers, comments } = buildResult;
+  const {
+    messages,
+    selfCalls,
+    occurrences,
+    creations,
+    fragments,
+    returns,
+    dividers,
+    comments
+  } = buildResult;
+  if (input.enableNumbering === false) {
+    const numberedItems = [
+      ...messages,
+      ...selfCalls,
+      ...fragments,
+      ...returns,
+      ...creations.map((creation) => creation.message)
+    ];
+    for (const numbered of numberedItems) {
+      numbered.number = void 0;
+    }
+  }
   let maxOccBottom = 0;
   let maxOtherY = 0;
-  for (const o of occurrences) maxOccBottom = Math.max(maxOccBottom, o.y + o.height);
+  for (const o of occurrences)
+    maxOccBottom = Math.max(maxOccBottom, o.y + o.height);
   for (const m of messages) maxOtherY = Math.max(maxOtherY, m.y);
   for (const s of selfCalls) maxOtherY = Math.max(maxOtherY, s.y + s.height);
-  for (const c of creations) maxOtherY = Math.max(maxOtherY, c.message.y + PARTICIPANT_VISUAL_HEIGHT);
+  for (const c of creations)
+    maxOtherY = Math.max(maxOtherY, c.message.y + PARTICIPANT_VISUAL_HEIGHT);
   for (const f of fragments) maxOtherY = Math.max(maxOtherY, f.y + f.height);
   for (const d of dividers) maxOtherY = Math.max(maxOtherY, d.y);
   const diagramHeight = Math.max(
@@ -12397,10 +12476,7 @@ function buildGeometry(input) {
     buildResult.maxReturnBottom
   );
   const lifelineBottom = diagramHeight + PARTICIPANT_VISUAL_HEIGHT - 28;
-  const lifelines = buildLifelines(
-    participants,
-    lifelineBottom
-  );
+  const lifelines = buildLifelines(participants, lifelineBottom);
   let diagramWidth = TotalWidth(rootContext, coordinates) - frameBorder.left - frameBorder.right;
   if (measureText) {
     const LABEL_PAD = 10;
@@ -12452,6 +12528,42 @@ function buildGeometry(input) {
       f.width = targetRight - f.x;
     }
   }
+  for (const inner of [...fragments].sort((a, b) => a.height - b.height)) {
+    inner.width = Math.max(
+      inner.width,
+      fragmentHeaderWidth(
+        inner.headerLabel ?? fragmentHeaderLabel(inner.kind),
+        inner.number
+      )
+    );
+    if (inner.label)
+      inner.width = Math.max(
+        inner.width,
+        fragmentGuardWidth(
+          inner.label,
+          fragmentGuardKeyword(inner.kind, inner.guardKeyword)
+        )
+      );
+    for (const section of inner.sections) {
+      if (section.guardKeyword)
+        inner.width = Math.max(
+          inner.width,
+          fragmentGuardWidth(section.innerLabel ?? "", section.guardKeyword)
+        );
+    }
+    for (const outer of fragments) {
+      if (outer.y < inner.y && outer.y + outer.height >= inner.y + inner.height && outer.x <= inner.x) {
+        outer.width = Math.max(
+          outer.width,
+          inner.x + inner.width + FRAGMENT_PADDING_X - outer.x
+        );
+      }
+    }
+    diagramWidth = Math.max(
+      diagramWidth,
+      inner.x + inner.width - frameBorder.right
+    );
+  }
   const groups = buildGroups(participants, diagramHeight);
   return {
     width: diagramWidth,
@@ -12550,7 +12662,7 @@ function styleToAttr(style) {
   return Object.entries(style).map(([k, v]) => `${esc(k)}: ${esc(v)}`).join("; ");
 }
 
-const STROKE_WIDTH$1 = 2;
+const STROKE_WIDTH$1 = 1;
 const HALF_STROKE$1 = STROKE_WIDTH$1 / 2;
 const ICON_SIZE = 24;
 const ICON_MARGIN_RIGHT = 4;
@@ -12558,12 +12670,12 @@ const ICON_PAINT_OFFSET_X = 4;
 const LABEL_PAD_LEFT = 8;
 const LABEL_HORIZONTAL_PADDING = 16;
 const STEREOTYPE_VERTICAL_OFFSET = 8;
-const STEREOTYPE_FONT_SIZE = 16;
+const STEREOTYPE_FONT_SIZE = 14;
 const BOUNDARY_ICON_VERTICAL_TWEAK = 2.75;
 const PARTICIPANT_TEXT_FILL = "#222";
 function renderParticipant(p) {
   if (p.isStarter) return renderStarterParticipant(p);
-  const rx = 3;
+  const rx = 4 - HALF_STROKE$1;
   const x = p.x - p.width / 2 + HALF_STROKE$1;
   const rectY = p.y + HALF_STROKE$1;
   const rectW = p.width - STROKE_WIDTH$1;
@@ -12632,7 +12744,7 @@ function renderStarterParticipant(p) {
   if (!icon) {
     return "";
   }
-  const rx = 3;
+  const rx = 4 - HALF_STROKE$1;
   const boxX = p.x - p.width / 2 + HALF_STROKE$1;
   const rectY = p.y + HALF_STROKE$1;
   const rectW = p.width - STROKE_WIDTH$1;
@@ -12672,21 +12784,31 @@ function renderLifeline(l) {
   return `<line x1="${x}" y1="${l.topY}" x2="${x}" y2="${l.bottomY}" class="lifeline" stroke-dasharray="${l.dashed ? "5,5" : "none"}" stroke-dashoffset="${l.dashed ? "5" : "0"}" shape-rendering="crispEdges"/>`;
 }
 
+function messageNumberWidth(number) {
+  return measureTextWithFont(number, "12px") + 8;
+}
+function renderMessageNumber(number, right, baseline) {
+  if (!number) return "";
+  return `<rect x="${right - messageNumberWidth(number)}" y="${baseline - 12}" width="${messageNumberWidth(number)}" height="16" rx="2" class="message-number-bg"/>
+  <text x="${right - 4}" y="${baseline}" text-anchor="end" class="seq-number">${esc(number)}</text>`;
+}
+
 function renderMessage(m) {
   const isLTR = m.fromX < m.toX;
   const fromX = isLTR ? m.fromX + 1 : m.fromX;
   const toX = isLTR ? m.toX : m.toX + 1;
   const direction = Math.sign(m.toX - m.fromX);
   const labelX = (m.fromX + m.toX) / 2 - direction * 3.5 + 0.5;
-  const labelY = m.y - 3.5;
+  const labelY = m.y - 2.5;
   const dashAttr = m.arrowStyle === "dashed" ? ' stroke-dasharray="6,4"' : "";
   const styleAttr = m.style ? ` style="${styleToAttr(m.style)}"` : "";
   const numberX = Math.min(fromX, toX) - 4;
-  const numberSvg = m.number ? `<text x="${numberX}" y="${labelY}" text-anchor="end" class="seq-number">${esc(m.number)}</text>` : "";
-  const lineY = m.y - 0.5;
+  const numberSvg = renderMessageNumber(m.number, numberX, m.y - 3.5);
+  const headCenterY = m.y - 0.5;
+  const lineY = headCenterY + 0.5;
   return `<g class="message">
   <line x1="${fromX}" y1="${lineY}" x2="${toX}" y2="${lineY}" class="message-line"${dashAttr}/>
-  ${renderArrowHead(toX, lineY, m.isReverse, m.arrowStyle)}
+  ${renderArrowHead(toX, headCenterY, m.isReverse, m.arrowStyle)}
   <text x="${labelX}" y="${labelY}" text-anchor="middle" class="message-label"${styleAttr}>${esc(resolveEmojiInText(m.label))}</text>
   ${numberSvg}
 </g>`;
@@ -12697,7 +12819,7 @@ function renderSelfCall(s) {
   const labelX = x1 + 6;
   const labelY = s.y + (isAsync ? 15 : 12);
   const numberY = s.y + 12;
-  const numberSvg = s.number ? `<text x="${x1 - 3}" y="${numberY}" text-anchor="end" class="seq-number">${esc(s.number)}</text>` : "";
+  const numberSvg = renderMessageNumber(s.number, x1 - 3, numberY);
   const svgX = x1 + 1;
   const svgY = s.y + (isAsync ? 20 : 14);
   const pathEnd = isAsync ? "L1,15" : "L14,15";
@@ -12706,11 +12828,11 @@ function renderSelfCall(s) {
   const arrowPath = isAsync ? "M1 1.25 L6.15 4.5 L1 7.75" : "M1 1.25 L6.15 4.5 L1 7.75 Z";
   return `<g class="message self-call">
   <svg x="${svgX}" y="${svgY}" width="30" height="24">
-    <path d="M0,2 L26,2 Q28,2 28,4 L28,13 Q28,15 26,15 ${pathEnd}" fill="none" stroke="#000" stroke-width="2"/>
+    <path d="M0,2 L26,2 Q28,2 28,4 L28,13 Q28,15 26,15 ${pathEnd}" fill="none" stroke="#000" stroke-width="1"/>
     <g transform="translate(${arrowTx}, 10)">
       <svg height="10" width="7" viewBox="0 0 7 9">
         <g transform="scale(-1, 1) translate(-7, 0)">
-          <path d="${arrowPath}" stroke="#000" stroke-linecap="round" fill="${arrowFill}" stroke-width="2"/>
+          <path d="${arrowPath}" stroke="#000" stroke-linecap="round" fill="${arrowFill}" stroke-width="1"/>
         </g>
       </svg>
     </g>
@@ -12728,96 +12850,122 @@ function renderArrowHead(tipX, tipY, pointsLeft, style) {
   const rtlTransform = pointsLeft ? ' transform="scale(-1, 1) translate(-7, 0)"' : "";
   return `<svg x="${svgX}" y="${svgY}" width="7" height="10" viewBox="0 0 7 9" overflow="visible" class="arrow-head${isFilled ? "" : " arrow-open"}">
     <g${rtlTransform}>
-      <path d="${pathD}" stroke="#000" stroke-linecap="round" stroke-width="2" fill="${fillAttr}"/>
+      <path d="${pathD}" transform="translate(1 0.5)" stroke="#000" stroke-linecap="round" stroke-width="1" fill="${fillAttr}"/>
     </g>
   </svg>`;
 }
 
 function renderOccurrence(o) {
-  const strokeHalf = 1;
+  const strokeHalf = 0.5;
   const rx = o.x + strokeHalf;
-  return `<rect x="${rx}" y="${o.y + strokeHalf}" width="${o.width - strokeHalf * 2}" height="${o.height - strokeHalf * 2}" rx="1" class="occurrence" data-participant="${esc(o.participantName)}"/>`;
+  return `<rect x="${rx}" y="${o.y + strokeHalf}" width="${o.width - strokeHalf * 2}" height="${o.height - strokeHalf * 2}" rx="1.5" class="occurrence" data-participant="${esc(o.participantName)}"/>`;
 }
 
 const HEADER_HEIGHT = DEFAULT_LAYOUT_METRICS.fragmentHeaderHeight;
-const BRACKET_WIDTH = 3.89;
 const TEXT_PAD_X = 4;
+const NUMBER_PAD_X = 4;
 const STROKE_WIDTH = 1;
 const HALF_STROKE = STROKE_WIDTH / 2;
 function renderFragment(f) {
   const parts = [];
+  const kindLabel = f.headerLabel ?? fragmentHeaderLabel(f.kind);
+  const width = Math.max(f.width, fragmentHeaderWidth(kindLabel, f.number));
   parts.push(
-    `<rect x="${f.x + HALF_STROKE}" y="${f.y + HALF_STROKE}" width="${f.width - STROKE_WIDTH}" height="${f.height - STROKE_WIDTH}" rx="4" class="fragment-border"/>`
+    `<rect x="${f.x + HALF_STROKE}" y="${f.y + HALF_STROKE}" width="${width - STROKE_WIDTH}" height="${f.height - STROKE_WIDTH}" rx="${4 - HALF_STROKE}" class="fragment-border"/>`
   );
   const headerX = f.x + 1;
   const headerY = f.headerY;
-  const headerW = f.width - 2;
+  const headerW = width - 2;
   parts.push(
-    `<rect x="${headerX}" y="${headerY}" width="${headerW}" height="${HEADER_HEIGHT}" class="fragment-header"/>`
+    `<rect x="${headerX}" y="${headerY}" width="${headerW}" height="${HEADER_HEIGHT}" class="fragment-header"${f.kind === "opt" ? "" : ' style="clip-path: inset(0 round 4px 4px 0 0)"'}/>`
   );
-  const iconX = headerX + 4;
+  const numberWidth = f.number ? Math.ceil(measureTextWithFont(f.number, "12px") * 64) / 64 : 0;
+  const numberInset = f.number ? numberWidth + 14 : 0;
+  const titleY = headerY + HEADER_HEIGHT / 2 - 0.5;
+  if (f.number) {
+    const numberBoxX = headerX + 4;
+    const numberX = numberBoxX + NUMBER_PAD_X;
+    parts.push(
+      `<rect x="${numberBoxX}" y="${headerY + (HEADER_HEIGHT - 1 - 16) / 2}" width="${numberWidth + NUMBER_PAD_X * 2}" height="16" rx="2" class="fragment-number-bg"/>`,
+      `<text x="${numberX}" y="${titleY}" dominant-baseline="central" class="seq-number">${esc(f.number)}</text>`
+    );
+  }
+  const iconX = headerX + 4 + numberInset;
   const iconY = headerY;
   parts.push(getFragmentIcon(f.kind, iconX, iconY));
-  const kindLabel = getKindLabel(f.kind);
-  const labelX = headerX + 26;
+  const labelX = headerX + 26 + numberInset;
   parts.push(
     `<text x="${labelX}" y="${headerY + HEADER_HEIGHT / 2 - 0.5}" dominant-baseline="central" class="fragment-label">${esc(kindLabel)}</text>`
   );
-  if (f.number) {
+  if (f.label) {
     parts.push(
-      `<text x="${f.x - 3}" y="${headerY + HEADER_HEIGHT / 2 - 4.5}" text-anchor="end" dominant-baseline="central" class="seq-number">${esc(f.number)}</text>`
+      renderGuardRow(
+        headerX,
+        headerY + HEADER_HEIGHT,
+        f.label,
+        fragmentGuardKeyword(f.kind, f.guardKeyword)
+      )
     );
   }
-  if (f.label) {
-    const condY = headerY + HEADER_HEIGHT + 15;
-    parts.push(renderBracketedLabel(headerX, condY, f.label, f.labelWidth, "fragment-condition"));
-  }
   if (f.sections.length > 1) {
     for (let i = 1; i < f.sections.length; i++) {
       const section = f.sections[i];
       const lineY = section.y;
       const separatorY = lineY + HALF_STROKE;
       const sepX1 = f.x + 1 + (section.contentInsetLeft ?? 0);
-      const sepX2 = f.x + f.width - 1;
+      const sepX2 = f.x + width - 1;
       parts.push(
         `<line x1="${sepX1}" y1="${separatorY}" x2="${sepX2}" y2="${separatorY}" class="fragment-separator"/>`
       );
       if (section.label) {
+        if (f.kind === "alt") {
+          parts.push(
+            renderGuardRow(
+              f.x + 1,
+              lineY + 1,
+              section.innerLabel ?? "",
+              section.guardKeyword
+            )
+          );
+          continue;
+        }
         const labelY = lineY + 16;
         const isFinally = section.label.startsWith("finally");
         const isBracketed = !!section.innerLabel && section.label !== "[else]";
         if (isBracketed) {
           const labelX2 = f.x + 1;
-          parts.push(
-            renderBracketedLabel(labelX2, labelY, section.innerLabel, section.innerLabelWidth, "fragment-section-label")
-          );
+          parts.push(renderGuardRow(labelX2, lineY + 1, section.innerLabel));
           continue;
         }
         const spaceIdx = section.label.indexOf(" ");
         if (spaceIdx > 0 && !isFinally) {
           const keyword = section.keyword || section.label.substring(0, spaceIdx);
           const condition = section.detail || section.label.substring(spaceIdx + 1);
-          const keywordWidth = section.keywordWidth ?? keyword.length * 7;
+          const keywordWidth = measureTextWithFont(
+            keyword,
+            "14px",
+            "all-small-caps"
+          );
           const keywordX = f.x + 5;
           const conditionX = keywordX + keywordWidth + TEXT_PAD_X * 2;
-          const bgWidth = (section.keywordWidth ?? keyword.length * 7) + (section.detailWidth ?? condition.length * 7) + TEXT_PAD_X * 4;
+          const bgWidth = keywordWidth + (section.detailWidth ?? condition.length * 7) + TEXT_PAD_X * 4;
           parts.push(
-            `<g opacity="0.65"><rect x="${keywordX - TEXT_PAD_X}" y="${lineY + 1}" width="${bgWidth}" height="20" fill="#fff"/><text x="${keywordX}" y="${labelY}" class="fragment-section-label" fill="#222">${esc(keyword)}</text><text x="${conditionX}" y="${labelY}" class="fragment-section-label" fill="#222">${esc(condition)}</text></g>`
+            `<g opacity="0.65"><rect x="${keywordX - TEXT_PAD_X}" y="${lineY + 1}" width="${bgWidth}" height="20" fill="#fff"/><text x="${keywordX}" y="${labelY}" class="fragment-section-label fragment-section-keyword" fill="#222">${esc(keyword)}</text><text x="${conditionX}" y="${labelY}" class="fragment-section-label" fill="#222">${esc(condition)}</text></g>`
           );
         } else {
           const finallyX = f.x + 5;
           const finallyY = labelY;
           if (section.label === "[else]") {
             parts.push(
-              `<text x="${finallyX}" y="${finallyY}" class="fragment-section-label">${esc(section.label)}</text>`
+              `<text x="${finallyX}" y="${finallyY}" class="fragment-section-label fragment-section-keyword">${esc(section.label)}</text>`
             );
             continue;
           }
-          const bgWidth = (section.labelWidth ?? section.label.length * 7) + TEXT_PAD_X * 2;
+          const bgWidth = (isFinally ? measureTextWithFont(section.label, "14px", "all-small-caps") : section.labelWidth ?? section.label.length * 7) + TEXT_PAD_X * 2;
           const bgY = lineY + 1;
           const bgHeight = 20;
           parts.push(
-            `<g opacity="0.65"><rect x="${finallyX - TEXT_PAD_X}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" fill="#fff"/><text x="${finallyX}" y="${finallyY}" class="fragment-section-label">${esc(section.label)}</text></g>`
+            `<g opacity="0.65"><rect x="${finallyX - TEXT_PAD_X}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" fill="#fff"/><text x="${finallyX}" y="${finallyY}" class="fragment-section-label fragment-section-keyword">${esc(section.label)}</text></g>`
           );
         }
       }
@@ -12827,33 +12975,11 @@ function renderFragment(f) {
   ${parts.join("\n  ")}
 </g>`;
 }
-function renderBracketedLabel(x, y, innerText, innerWidth, cls = "fragment-condition") {
-  const measuredInnerWidth = innerWidth ?? innerText.length * 7;
-  const innerX = x + BRACKET_WIDTH + TEXT_PAD_X;
-  const closeX = innerX + measuredInnerWidth + TEXT_PAD_X;
-  return `<g><text x="${x}" y="${y}" class="${cls}">[</text><text x="${innerX}" y="${y}" class="${cls}" opacity="0.65">${esc(resolveEmojiInText(innerText))}</text><text x="${closeX}" y="${y}" class="${cls}">]</text></g>`;
-}
-function getKindLabel(kind) {
-  switch (kind) {
-    case "alt":
-      return "Alt";
-    case "loop":
-      return "Loop";
-    case "opt":
-      return "Opt";
-    case "par":
-      return "Par";
-    case "critical":
-      return "Critical";
-    case "section":
-      return "Section";
-    case "tcf":
-      return "Try";
-    case "ref":
-      return "Ref";
-    default:
-      return kind.charAt(0).toUpperCase() + kind.slice(1);
-  }
+function renderGuardRow(x, rowY, innerText, keyword) {
+  const baseline = rowY + 19;
+  const textX = x + 4;
+  const conditionX = textX + (keyword ? measureTextWithFont(keyword, "12px", "all-small-caps") + 4 : 0);
+  return `<g class="guard-row">` + (keyword ? `<text x="${textX}" y="${baseline}" class="guard-keyword">${esc(keyword)}</text>` : "") + (innerText ? `<text x="${conditionX}" y="${baseline}" class="fragment-condition" opacity="0.65">${esc(resolveEmojiInText(innerText))}</text>` : "") + `</g>`;
 }
 function getFragmentIcon(kind, x, y) {
   const w = 20;
@@ -12937,7 +13063,7 @@ function renderOpenArrow(tipX, tipY, pointsLeft) {
   const x1 = tipX + dir * w;
   const y1 = tipY - halfH;
   const y2 = tipY + halfH;
-  return `<polyline points="${x1},${y1} ${tipX},${tipY} ${x1},${y2}" fill="none" stroke-linecap="round" class="arrow-head arrow-open"/>`;
+  return `<polyline points="${x1},${y1} ${tipX},${tipY} ${x1},${y2}" transform="translate(${pointsLeft ? -1 : 1} 0)" fill="none" stroke-linecap="round" class="arrow-head arrow-open"/>`;
 }
 
 function renderReturn(r) {
@@ -12947,8 +13073,9 @@ function renderReturn(r) {
   const minX = Math.min(r.fromX, r.toX);
   const ARROW_PADDING_HALF = 3.5;
   const labelX = minX + Math.abs(r.toX - r.fromX) / 2 + (r.isReverse ? ARROW_PADDING_HALF : -ARROW_PADDING_HALF);
-  const lineY = Math.floor(r.y);
-  const labelY = lineY - 3;
+  const snappedY = Math.floor(r.y);
+  const lineY = snappedY + 0.5;
+  const labelY = snappedY - 3;
   const arrowTipX = r.toX;
   const w = 5.15;
   const halfH = 3.25;
@@ -12957,10 +13084,10 @@ function renderReturn(r) {
   const ay1 = lineY - halfH;
   const ay2 = lineY + halfH;
   const numberX = Math.min(r.fromX, r.toX) - 4;
-  const numberSvg = r.number ? `<text x="${numberX}" y="${labelY}" text-anchor="end" class="seq-number">${esc(r.number)}</text>` : "";
+  const numberSvg = renderMessageNumber(r.number, numberX, labelY);
   return `<g class="return">
   <line x1="${r.fromX}" y1="${lineY}" x2="${r.toX}" y2="${lineY}" class="return-line"/>
-  <polyline points="${ax1},${ay1} ${arrowTipX},${lineY} ${ax1},${ay2}" fill="none" stroke-linecap="round" class="return-arrow"/>
+  <polyline points="${ax1},${ay1} ${arrowTipX},${lineY} ${ax1},${ay2}" transform="translate(${dir} 0)" fill="none" stroke-linecap="round" class="return-arrow"/>
   <text x="${labelX}" y="${labelY}" text-anchor="middle" class="return-label">${esc(resolveEmojiInText(r.label))}</text>
   ${numberSvg}
 </g>`;
@@ -13202,39 +13329,43 @@ function buildThemeStyles(p) {
   .frame-border-inner { fill: ${p.frameBg}; }
   .frame-header-bg { fill: ${p.frameBg}; }
   .frame-header-line { stroke: ${p.frameBorder}; stroke-width: 1; shape-rendering: crispEdges; }
-  .frame-title { font-family: ${p.fontFamily}; font-size: 16px; font-weight: 600; fill: ${p.titleText}; }
-  .participant-box { fill: ${p.participantBg}; stroke: ${p.participantBorder}; stroke-width: 2; }
-  .participant-label { font-family: ${p.fontFamily}; font-size: 16px; fill: ${p.participantText}; }
+  .frame-title { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 400; fill: ${p.titleText}; }
+  .participant-box { fill: ${p.participantBg}; stroke: ${p.participantBorder}; stroke-width: 1; }
+  .participant-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.participantText}; }
   .participant-icon { color: ${p.participantText}; }
   .participant-icon [fill="currentColor"]:not([stroke]) { stroke: ${p.participantBorder}; stroke-width: 1; }
   .lifeline { stroke: ${p.participantBorder}; stroke-width: 1; }
-  .message-line { stroke: ${p.messageArrow}; stroke-width: 2; shape-rendering: crispEdges; }
-  .message-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.messageText}; }
-  .arrow-head { fill: ${p.messageArrow}; stroke: ${p.messageArrow}; stroke-width: 2; }
+  .message-line { stroke: ${p.messageArrow}; stroke-width: 1; shape-rendering: crispEdges; }
+  .message-label { font-family: ${p.fontFamily}; font-size: 15px; fill: ${p.messageText}; }
+  .arrow-head { fill: ${p.messageArrow}; stroke: ${p.messageArrow}; stroke-width: 1; }
   .arrow-open { fill: none; }
-  .occurrence { fill: ${p.occurrenceBg}; stroke: ${p.occurrenceBorder}; stroke-width: 2; shape-rendering: crispEdges; }
-  .fragment-border { fill: none; stroke: ${p.fragmentBorder}; stroke-width: 1; shape-rendering: crispEdges; }
+  .occurrence { fill: ${p.occurrenceBg}; stroke: ${p.occurrenceBorder}; stroke-width: 1; shape-rendering: crispEdges; }
+  .fragment-border { fill: none; stroke: ${p.fragmentBorder}; stroke-width: 1; }
   .fragment-header { fill: ${p.fragmentHeaderBg}; fill-opacity: ${p.fragmentHeaderOpacity}; stroke: none; shape-rendering: crispEdges; }
-  .fragment-label { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 600; fill: ${p.fragmentText}; }
+  .fragment-number-bg { fill: #6b7280; fill-opacity: 0.1; stroke: none; }
+  .message-number-bg { fill: #6b7280; fill-opacity: 0.1; stroke: none; }
+  .fragment-label { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 400; font-variant-caps: all-small-caps; fill: ${p.fragmentText}; }
   .fragment-condition { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
   .fragment-separator { stroke: ${p.fragmentSeparator}; stroke-width: 1; shape-rendering: crispEdges; }
+  .fragment-section-keyword { font-variant-caps: all-small-caps; }
   .fragment-section-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
-  .return-line { stroke: ${p.messageArrow}; stroke-width: 2; stroke-dasharray: 6,4; shape-rendering: crispEdges; }
-  .return-arrow { stroke: ${p.messageArrow}; stroke-width: 2; fill: none; }
-  .return-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.messageText}; }
+  .return-line { stroke: ${p.messageArrow}; stroke-width: 1; stroke-dasharray: 6,4; shape-rendering: crispEdges; }
+  .return-arrow { stroke: ${p.messageArrow}; stroke-width: 1; fill: none; }
+  .return-label { font-family: ${p.fontFamily}; font-size: 15px; fill: ${p.messageText}; }
   .return-icon { fill: ${p.messageText}; }
   .divider-line { stroke: #aaaa33; stroke-width: 1; }
   .divider-bg { fill: #fff5ad; stroke: #aaaa33; stroke-width: 1; }
   .divider-label { font-family: ${p.fontFamily}; font-size: 14px; fill: #333; }
   .comment-text { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.commentText}; opacity: 0.5; }
-  .seq-number { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 100; fill: #6b7280; }
+  .guard-keyword { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; font-variant-caps: all-small-caps; fill: #6b7280; }
+  .seq-number { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; fill: #6b7280; }
   .group-outline { fill: none; stroke: ${p.participantBorder}; }
   .group-title-bg { fill: ${p.frameBg}; stroke: none; }
   .group-title-text { font-family: ${p.fontFamily}; font-size: 13px; font-weight: 400; fill: ${p.participantText}; }
 `;
 }
 
-const FRAME_HEADER_HEIGHT = 28;
+const FRAME_VIEWPORT_HEADER_ALLOWANCE = 28;
 const FRAME_BORDER_RADIUS = 4;
 function renderToSvg(code, options) {
   const rootContext = RootContext(code);
@@ -13258,14 +13389,41 @@ function renderToSvg(code, options) {
     coordinates,
     verticalCoordinates,
     title,
-    measureText: WidthProviderOnCanvas
+    measureText: WidthProviderOnCanvas,
+    enableNumbering: options?.enableNumbering
   });
   return { ...composeSvg(geometry, options), geometry };
 }
 function composeSvg(g, options) {
   const padding = 10;
-  const headerH = FRAME_HEADER_HEIGHT;
-  const contentLeftMargin = 1 + padding + g.frameBorderLeft;
+  const headerH = FRAME_VIEWPORT_HEADER_ALLOWANCE;
+  let contentLeftMargin = 1 + padding + g.frameBorderLeft;
+  let numberLeft = 0;
+  for (const message of [
+    ...g.messages,
+    ...g.creations.map((creation) => creation.message)
+  ]) {
+    if (!message.number) continue;
+    numberLeft = Math.min(
+      numberLeft,
+      Math.min(message.fromX, message.toX) + 1 - 4 - messageNumberWidth(message.number)
+    );
+  }
+  for (const call of g.selfCalls) {
+    if (call.number)
+      numberLeft = Math.min(
+        numberLeft,
+        call.x - 3 - messageNumberWidth(call.number)
+      );
+  }
+  for (const returned of g.returns) {
+    if (returned.number && !returned.isSelf)
+      numberLeft = Math.min(
+        numberLeft,
+        Math.min(returned.fromX, returned.toX) - 4 - messageNumberWidth(returned.number)
+      );
+  }
+  contentLeftMargin += Math.max(0, padding - contentLeftMargin - numberLeft);
   const viewWidth = g.width + contentLeftMargin + padding + g.frameBorderRight + 1;
   const viewHeight = g.height + padding * 2 + headerH - 1;
   const parts = [];
@@ -13315,8 +13473,7 @@ function composeSvg(g, options) {
     `<rect class="frame-border-outer" x="0" y="0" width="${viewWidth}" height="${viewHeight}" rx="${r}" fill="#666"/>`,
     `<rect class="frame-border-inner" x="1" y="1" width="${viewWidth - 2}" height="${viewHeight - 2}" rx="${Math.max(0, r - 1)}" fill="#fff"/>`
   ].join("\n");
-  const contentPaddingTop = 6;
-  const headerLineY = headerH + contentPaddingTop;
+  const headerLineY = 1 + DIAGRAM_HEADER_HEIGHT;
   const headerLineDrawY = headerLineY - 0.5;
   const headerLineSvg = `<line class="frame-header-line" x1="1" y1="${headerLineDrawY}" x2="${viewWidth - 1}" y2="${headerLineDrawY}"/>`;
   const titleSvg = g.title ? `<text x="5" y="${headerLineDrawY / 2}" dominant-baseline="central" class="frame-title">${esc(g.title)}</text>` : "";