@zenuml/core 4.2.1 → 4.3.1

package/dist/cli/zenuml.mjs

@@ -9075,7 +9075,7 @@ ToCollector.enterRet = function (ctx) {
   returnTo && participants.Add(returnTo);
 };
 
-const walker$2 = antlr4.tree.ParseTreeWalker.DEFAULT;
+const walker$1 = antlr4.tree.ParseTreeWalker.DEFAULT;
 
 // The walk is a pure function of the (immutable) parse tree and consumers only
 // read the returned Participants, so results are cached per context node.
@@ -9086,80 +9086,11 @@ ToCollector.getParticipants = function (context) {
   const cached = participantsCache.get(context);
   if (cached) return cached;
   participants = new Participants$1();
-  walker$2.walk(this, context);
+  walker$1.walk(this, context);
   participantsCache.set(context, participants);
   return participants;
 };
 
-const walker$1 = antlr4.tree.ParseTreeWalker.DEFAULT;
-
-let ChildFragmentDetector = new sequenceParserListener();
-
-let cursor = 0;
-let max = 0;
-
-ChildFragmentDetector.enterTcf = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterOpt = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterPar = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterAlt = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterLoop = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterSection = function () {
-  cursor++;
-};
-ChildFragmentDetector.enterCritical = function () {
-  cursor++;
-};
-
-ChildFragmentDetector.exitTcf = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitOpt = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitPar = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitAlt = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitLoop = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitSection = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-ChildFragmentDetector.exitCritical = function () {
-  max = Math.max(max, cursor);
-  cursor--;
-};
-
-ChildFragmentDetector.depth = function (me) {
-  return function (context) {
-    cursor = 0;
-    max = 0;
-    context.children.map(function (child) {
-      walker$1.walk(me, child);
-    });
-    return max;
-  };
-};
-
 const seqParser$9 = sequenceParser;
 const TitleContext = seqParser$9.TitleContext;
 TitleContext.prototype.content = function () {
@@ -9227,10 +9158,6 @@ CreationContext$6.prototype.Constructor = function () {
   return this.creationBody()?.construct()?.getFormattedText();
 };
 
-CreationContext$6.prototype.To = function () {
-  return this.Constructor();
-};
-
 CreationContext$6.prototype.Owner = function () {
   if (!this.Constructor()) {
     return "Missing Constructor";
@@ -9245,10 +9172,6 @@ MessageContext$6.prototype.To = function () {
   return toCtx?.name?.()?.getFormattedText() || toCtx?.getFormattedText();
 };
 
-MessageContext$6.prototype.Owner = function () {
-  return this.To() || getOwnerFromAncestor(this.parentCtx);
-};
-
 function getOwnerFromAncestor(ctx) {
   while (ctx) {
     if (ctx instanceof CreationContext$6 || ctx instanceof MessageContext$6) {
@@ -9259,32 +9182,39 @@ function getOwnerFromAncestor(ctx) {
   return undefined;
 }
 
-AsyncMessageContext$2.prototype.To = function () {
-  const toCtx = this.to();
-  return toCtx?.name?.()?.getFormattedText() || toCtx?.getFormattedText();
-};
-
-AsyncMessageContext$2.prototype.Owner = function () {
+// MessageContext, AsyncMessageContext, ReturnAsyncMessageContext and
+// RetContext all resolve Owner the same way: prefer their own To(), else
+// look up the nearest CreationContext/MessageContext ancestor. Assigning
+// the same function to each prototype keeps the body single-sourced while
+// each context class still gets its own Owner property.
+function ownerFromToOrAncestor() {
   return this.To() || getOwnerFromAncestor(this.parentCtx);
-};
+}
+
+[
+  MessageContext$6,
+  AsyncMessageContext$2,
+  ReturnAsyncMessageContext$2,
+  RetMessageContext,
+].forEach((ContextClass) => {
+  ContextClass.prototype.Owner = ownerFromToOrAncestor;
+});
 
-ReturnAsyncMessageContext$2.prototype.To = function () {
+// AsyncMessageContext and ReturnAsyncMessageContext resolve To() identically
+// (unlike MessageContext, which reaches its `to` node through
+// messageBody()?.fromTo(), and RetContext, which delegates to ReturnTo()).
+function toFromDirectTo() {
   const toCtx = this.to();
   return toCtx?.name?.()?.getFormattedText() || toCtx?.getFormattedText();
-};
+}
 
-ReturnAsyncMessageContext$2.prototype.Owner = function () {
-  return this.To() || getOwnerFromAncestor(this.parentCtx);
-};
+AsyncMessageContext$2.prototype.To = toFromDirectTo;
+ReturnAsyncMessageContext$2.prototype.To = toFromDirectTo;
 
 RetMessageContext.prototype.To = function () {
   return this.ReturnTo();
 };
 
-RetMessageContext.prototype.Owner = function () {
-  return this.To() || getOwnerFromAncestor(this.parentCtx);
-};
-
 const ProgContext$2 = sequenceParser.ProgContext;
 
 /**
@@ -9397,11 +9327,7 @@ const MessageContext$4 = sequenceParser.MessageContext;
 const CreationContext$4 = sequenceParser.CreationContext;
 
 ParserRuleContext$1.prototype.Origin = function () {
-  let ctx = this.parentCtx;
-  while (ctx && !(ctx instanceof StatContext$2 || ctx instanceof ProgContext)) {
-    ctx = this.parentCtx;
-  }
-  return ctx.Origin();
+  return this.ClosestAncestorStat()?.Origin();
 };
 // Origin is essentially the 'from' of a message.
 // For example, in `S -> A.m1 {B.m2 {C.m3}}`,
@@ -9482,9 +9408,6 @@ CreationContext$3.prototype.SignatureText = function() {
   const text = this.ParametersText() || "create";
   return `«${text}»`;
 };
-CreationContext$3.prototype.isParamValid = function() {
-  return (this.creationBody().parameters()?.parameter()?.length ?? 0) > 0;
-};
 RetContext$1.prototype.SignatureText = function() {
   return this.asyncMessage()?.content()?.getFormattedText() ?? this.returnAsyncMessage()?.content()?.getFormattedText() ?? this.expr()?.getFormattedText() ?? "";
 };
@@ -9575,27 +9498,22 @@ CreationContext.prototype.From = function() {
   }
   return void 0;
 };
+function fromProvidedOrOrigin() {
+  return this.ProvidedFrom() || this.ClosestAncestorStat()?.Origin();
+}
 MessageContext.prototype.ProvidedFrom = function() {
   const fromCtx = this.messageBody()?.fromTo?.()?.from?.();
   return fromCtx?.name?.()?.getFormattedText?.() || fromCtx?.getFormattedText?.();
 };
-MessageContext.prototype.From = function() {
-  return this.ProvidedFrom() || this.ClosestAncestorStat()?.Origin();
-};
-AsyncMessageContext.prototype.ProvidedFrom = function() {
-  const fromCtx = this.from();
-  return fromCtx?.name?.()?.getFormattedText?.() || fromCtx?.getFormattedText?.();
-};
-AsyncMessageContext.prototype.From = function() {
-  return this.ProvidedFrom() || this.ClosestAncestorStat()?.Origin();
-};
-ReturnAsyncMessageContext.prototype.ProvidedFrom = function() {
+MessageContext.prototype.From = fromProvidedOrOrigin;
+function providedFromDirectFrom() {
   const fromCtx = this.from();
   return fromCtx?.name?.()?.getFormattedText?.() || fromCtx?.getFormattedText?.();
-};
-ReturnAsyncMessageContext.prototype.From = function() {
-  return this.ProvidedFrom() || this.ClosestAncestorStat()?.Origin();
-};
+}
+AsyncMessageContext.prototype.ProvidedFrom = providedFromDirectFrom;
+AsyncMessageContext.prototype.From = fromProvidedOrOrigin;
+ReturnAsyncMessageContext.prototype.ProvidedFrom = providedFromDirectFrom;
+ReturnAsyncMessageContext.prototype.From = fromProvidedOrOrigin;
 RetContext.prototype.From = function() {
   return this.asyncMessage()?.From?.() || this.returnAsyncMessage()?.From?.() || this.ClosestAncestorStat()?.Origin();
 };
@@ -9616,14 +9534,6 @@ ParserRuleContext.prototype.ClosestAncestorStat = function() {
   }
   return void 0;
 };
-ParserRuleContext.prototype.ClosestAncestorBlock = function() {
-  const parentCtx = this.ClosestAncestorStat()?.parentCtx;
-  if (parentCtx instanceof seqParser.BlockContext) {
-    return parentCtx;
-  }
-  console.warn("Cannot find closest ancestor block for context:", this);
-  return void 0;
-};
 
 antlr4.ParserRuleContext.prototype.getAncestors = function(predicate) {
   const ancestors = [];
@@ -9642,11 +9552,9 @@ antlr4.ParserRuleContext.prototype.getAncestors = function(predicate) {
 
 const formatText = (text) => text.replace(/[\n\r]/g, " ").replace(/\s+/g, " ").replace(/\s*([,;.])\s*/g, "$1").replace(/\s*(\()\s*|\s*(\))/g, "$1$2").replace(/\s+$/g, "").replace(/^"(.*)"$/, "$1");
 
-const errors = [];
 const errorDetails = [];
 class SeqErrorListener extends antlr4.error.ErrorListener {
   syntaxError(recognizer, offendingSymbol, line, column, msg) {
-    errors.push(`${offendingSymbol} line ${line}, col ${column}: ${msg}`);
     errorDetails.push({
       line,
       column,
@@ -9656,7 +9564,7 @@ class SeqErrorListener extends antlr4.error.ErrorListener {
 }
 
 // Reentrant error listener: collects syntax errors into its OWN instance array
-// instead of the shared module-level `errors`/`errorDetails`. This is what lets
+// instead of the shared module-level `errorDetails`. This is what lets
 // validate()/parse() below run repeatedly or concurrently (e.g. server-side)
 // without the clear-before/clear-after dance the legacy globals require.
 class CollectingErrorListener extends antlr4.error.ErrorListener {
@@ -9716,7 +9624,7 @@ function rootContext(code) {
 
   const parser = createParser(code);
   parser.addErrorListener(new SeqErrorListener());
-  return parser._syntaxErrors ? null : parser.prog();
+  return parser.prog();
 }
 
 antlr4.ParserRuleContext.prototype.getFormattedText = function () {
@@ -9747,7 +9655,7 @@ antlr4.ParserRuleContext.prototype.getComment = function () {
 /**
  * Parse ZenUML DSL with a per-call (reentrant) error listener and return both
  * the error-recovered parse tree and a structured error list. Safe to call
- * repeatedly/concurrently — it does not touch the module-level Errors/ErrorDetails.
+ * repeatedly/concurrently — it does not touch the module-level ErrorDetails.
  *
  * @param {string} code ZenUML DSL source
  * @returns {{ rootContext: object, pass: boolean, errorDetails: { line: number, column: number, msg: string }[] }}
@@ -9801,15 +9709,7 @@ const Parser = {
   },
   parse,
   validate,
-  Errors: errors,
   ErrorDetails: errorDetails,
-  /**
-   * @return {number} how many levels of embedded fragments
-   */
-  Depth: function (ctx) {
-    const childFragmentDetector = ChildFragmentDetector;
-    return childFragmentDetector.depth(childFragmentDetector)(ctx);
-  },
 };
 
 const FRAGMENT_PADDING_X = 10;
@@ -9823,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";
@@ -9956,39 +9857,6 @@ function OrderedParticipants(rootContext) {
   return result;
 }
 
-const LEVELS = ["log", "trace", "debug", "info", "warn", "error"];
-const LEVEL_WEIGHT = {
-  trace: 10,
-  debug: 20,
-  log: 30,
-  info: 30,
-  warn: 40,
-  error: 50
-};
-const THRESHOLD = LEVEL_WEIGHT.warn;
-function consoleFn(level) {
-  const fn = console[level];
-  return typeof fn === "function" ? fn.bind(console) : console.log.bind(console);
-}
-function createLogger(prefix) {
-  const logger = {};
-  for (const level of LEVELS) {
-    const fn = consoleFn(level);
-    logger[level] = (...args) => {
-      if (LEVEL_WEIGHT[level] >= THRESHOLD) {
-        if (prefix) {
-          fn(prefix[0], prefix[1], ...args);
-        } else {
-          fn(...args);
-        }
-      }
-    };
-  }
-  logger.child = (opts) => createLogger(["%c" + (opts.name || ""), "color: #00f"]);
-  return logger;
-}
-const rootLogger = createLogger();
-
 function Dual(p, v) {
   return { position: p, velocity: v };
 }
@@ -10129,7 +9997,6 @@ class Coordinates {
     }
     const leftGap = this.getParticipantGap(this.participantModels[0]);
     const position = leftGap + this.positionsCache[pIndex];
-    rootLogger.debug(`Position of ${participantName} is ${position}`);
     return position;
   }
   walkThrough() {
@@ -10176,17 +10043,11 @@ class Coordinates {
       }
       const leftIndex = Math.min(indexFrom, indexTo);
       const rightIndex = Math.max(indexFrom, indexTo);
-      try {
-        const messageWidth = this.getMessageWidth(message);
-        this.m[leftIndex][rightIndex] = Math.max(
-          messageWidth + ARROW_HEAD_WIDTH + OCCURRENCE_WIDTH,
-          this.m[leftIndex][rightIndex]
-        );
-      } catch {
-        console.warn(
-          `Could not set message gap between ${from} and ${message.to}`
-        );
-      }
+      const messageWidth = this.getMessageWidth(message);
+      this.m[leftIndex][rightIndex] = Math.max(
+        messageWidth + ARROW_HEAD_WIDTH + OCCURRENCE_WIDTH,
+        this.m[leftIndex][rightIndex]
+      );
     }
   }
   withParticipantGaps(participantModels) {
@@ -10216,9 +10077,6 @@ class Coordinates {
     );
     const participantWidth = Math.max(labelWidth + iconWidth + emojiWidth, MIN_PARTICIPANT_WIDTH) + MARGIN;
     this.participantWidthCache.set(participant.name, participantWidth);
-    rootLogger.debug(
-      `Width of ${participant.name} is ${participantWidth}; labelWidth: ${labelWidth}`
-    );
     return participantWidth;
   }
 }
@@ -10247,6 +10105,24 @@ class NodeVM {
   }
 }
 
+const SPACING_UNIT = 4;
+const tw = (value) => value * SPACING_UNIT;
+const DEFAULT_LAYOUT_METRICS = {
+  statementMarginY: tw(4),
+  // .statement-container .my-4
+  fragmentHeaderHeight: 25,
+  // .fragment .leading-4 => line-height: 1rem
+  fragmentPaddingBottom: 10
+  // .zenuml .fragment =>padding-bottom: 10px
+};
+const MESSAGE_HEIGHT = 16;
+const SELF_MESSAGE_HEIGHT = 30;
+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 [];
   return [ctx.Origin() || _STARTER_, ...Participants(ctx).Names()];
@@ -10677,7 +10553,7 @@ class MarkdownMeasurer {
       return 0;
     }
     const lines = _text.trim().split("\n");
-    return lines.length * 20;
+    return lines.length * COMMENT_LINE_HEIGHT;
   }
 }
 
@@ -10689,57 +10565,12 @@ class StatementVM extends NodeVM {
     if (!context?.getComment || !context.getComment()) return 0;
     return new MarkdownMeasurer().measure(context.getComment());
   }
-  resolveFragmentOrigin(fallbackOrigin) {
-    try {
-      const participants = getLocalParticipantNames(this.context) || [];
-      return participants[0] || fallbackOrigin;
-    } catch (error) {
-      console.warn("Failed to resolve fragment origin", error);
-      return fallbackOrigin;
-    }
-  }
   findLeftParticipant(ctx, fallbackOrigin) {
     if (!ctx) return void 0;
     const local = getLocalParticipantNames(ctx) || [];
     const ordered = this.runtime.participants;
     return ordered.find((name) => local.includes(name)) || local[0] || fallbackOrigin || void 0;
   }
-  measureOccurrence(context, top, participant, minHeight = 24, contentInset = 1) {
-    const block = context?.braceBlock?.()?.block?.();
-    if (!block) {
-      return minHeight;
-    }
-    const offset = this.metrics.statementMarginY - contentInset;
-    const blockStart = top - offset;
-    const blockEnd = this.layoutBlock(
-      block,
-      participant || this.runtime.originParticipant,
-      blockStart
-    );
-    const height = blockEnd - blockStart - offset;
-    return Math.max(minHeight, height);
-  }
-  isRootLevelStatement(statCtx) {
-    const block = statCtx?.parentCtx;
-    return block === this.runtime.rootBlock;
-  }
-  isFirstStatement(statCtx) {
-    const block = statCtx?.parentCtx;
-    const statements = block?.stat?.() || [];
-    return statements.length > 0 && statements[0] === statCtx;
-  }
-  altHasMultipleBranches(ctx) {
-    if (typeof ctx?.alt !== "function") {
-      return false;
-    }
-    const altContext = ctx.alt();
-    if (!altContext) {
-      return false;
-    }
-    const elseIfBlocks = altContext?.elseIfBlock?.() || [];
-    const hasElse = Boolean(altContext?.elseBlock?.());
-    return elseIfBlocks.length > 0 || hasElse;
-  }
 }
 
 class AsyncMessageStatementVM extends StatementVM {
@@ -10754,7 +10585,7 @@ class AsyncMessageStatementVM extends StatementVM {
     const source = asyncContext?.From?.() || asyncContext?.ProvidedFrom?.() || asyncContext?.Origin?.() || origin;
     const target = asyncContext?.Owner?.() || asyncContext?.to?.()?.getFormattedText?.() || source;
     const isSelf = source === target;
-    const messageHeight = isSelf ? 44 : 16;
+    const messageHeight = isSelf ? ASYNC_SELF_MESSAGE_HEIGHT : MESSAGE_HEIGHT;
     return {
       top,
       height: commentHeight + messageHeight,
@@ -10763,7 +10594,6 @@ class AsyncMessageStatementVM extends StatementVM {
   }
 }
 
-const CREATION_MESSAGE_HEIGHT = 40;
 class CreationStatementVM extends StatementVM {
   constructor(statement, creation, runtime) {
     super(statement, runtime);
@@ -10787,7 +10617,6 @@ class CreationStatementVM extends StatementVM {
     }
     const assignment = this.creation?.Assignment?.();
     if (assignment) {
-      rootLogger.info(`creation::assignment::${participant}`);
       cursor += 12;
     }
     const height = cursor - top;
@@ -10813,26 +10642,7 @@ class EmptyStatementVM extends StatementVM {
   }
 }
 
-class FragmentVM extends StatementVM {
-  beginFragment(context, top) {
-    const commentHeight = this.measureComment(context);
-    const headerHeight = this.metrics.fragmentHeaderHeight;
-    return {
-      cursor: top + commentHeight + headerHeight,
-      commentHeight,
-      headerHeight
-    };
-  }
-  finalizeFragment(top, cursor) {
-    cursor += this.metrics.fragmentPaddingBottom;
-    return {
-      top,
-      height: cursor - top
-    };
-  }
-}
-
-class FragmentAltVM extends FragmentVM {
+class FragmentAltVM extends StatementVM {
   constructor(statement, alt, runtime) {
     super(statement, runtime);
     this.alt = alt;
@@ -10844,7 +10654,7 @@ class FragmentAltVM extends FragmentVM {
     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,
@@ -10852,7 +10662,7 @@ class FragmentAltVM extends FragmentVM {
       );
     }
     this.alt?.elseIfBlock?.()?.forEach((block) => {
-      cursor += 20;
+      cursor += FRAGMENT_GUARD_HEIGHT;
       cursor += 8;
       cursor += 1;
       cursor = this.layoutBlock(
@@ -10863,7 +10673,7 @@ class FragmentAltVM extends FragmentVM {
     });
     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);
@@ -10877,7 +10687,7 @@ class FragmentAltVM extends FragmentVM {
   }
 }
 
-class FragmentRefVM extends FragmentVM {
+class FragmentRefVM extends StatementVM {
   kind = "ref";
   measure(top) {
     const context = this.context?.ref?.() || this.context;
@@ -10888,7 +10698,7 @@ class FragmentRefVM extends FragmentVM {
   }
 }
 
-class FragmentSingleBlockVM extends FragmentVM {
+class FragmentSingleBlockVM extends StatementVM {
   constructor(statement, fragment, runtime, kind) {
     super(statement, runtime);
     this.fragment = fragment;
@@ -10896,15 +10706,15 @@ class FragmentSingleBlockVM extends FragmentVM {
   }
   measure(top, origin) {
     const commentHeight = this.measureComment(this.fragment);
-    let cursor = top + 1 + this.metrics.fragmentHeaderHeight + commentHeight;
+    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;
       cursor = this.layoutBlock(block, fragmentOrigin, cursor, this.kind);
     }
-    cursor += this.metrics.fragmentPaddingBottom + 1;
+    cursor += this.metrics.fragmentPaddingBottom + FRAGMENT_BORDER_WIDTH;
     return {
       top,
       height: cursor - top,
@@ -10913,7 +10723,7 @@ class FragmentSingleBlockVM extends FragmentVM {
   }
 }
 
-class FragmentTryCatchVM extends FragmentVM {
+class FragmentTryCatchVM extends StatementVM {
   constructor(statement, tcf, runtime) {
     super(statement, runtime);
     this.tcf = tcf;
@@ -10992,6 +10802,14 @@ class ReturnStatementVM extends StatementVM {
   }
 }
 
+const SINGLE_BLOCK_FRAGMENT_KINDS = [
+  "loop",
+  "opt",
+  "par",
+  "section",
+  "critical"
+];
+
 class SyncMessageStatementVM extends StatementVM {
   constructor(statement, message, runtime) {
     super(statement, runtime);
@@ -11006,7 +10824,7 @@ class SyncMessageStatementVM extends StatementVM {
     const block = this.message.braceBlock?.()?.block?.();
     const assignee = this.message.Assignment?.();
     const isSelf = source === target;
-    const messageHeight = isSelf ? 30 : 16;
+    const messageHeight = isSelf ? SELF_MESSAGE_HEIGHT : MESSAGE_HEIGHT;
     cursor += messageHeight;
     if (block) {
       const fragmentOrigin = this.findLeftParticipant(this.message, origin) || origin;
@@ -11042,7 +10860,7 @@ const createStatementVM = (statement, runtime) => {
   if (statement.divider?.()) {
     return new DividerStatementVM(statement, runtime);
   }
-  for (const kind of ["loop", "opt", "par", "section", "critical"]) {
+  for (const kind of SINGLE_BLOCK_FRAGMENT_KINDS) {
     const fragment = statement[kind]?.();
     if (fragment) {
       return new FragmentSingleBlockVM(statement, fragment, runtime, kind);
@@ -11083,17 +10901,6 @@ class BlockVM extends NodeVM {
   }
 }
 
-const SPACING_UNIT = 4;
-const tw = (value) => value * SPACING_UNIT;
-const DEFAULT_LAYOUT_METRICS = {
-  statementMarginY: tw(4),
-  // .statement-container .my-4
-  fragmentHeaderHeight: 25,
-  // .fragment .leading-4 => line-height: 1rem
-  fragmentPaddingBottom: 10
-  // .zenuml .fragment =>padding-bottom: 10px
-};
-
 class VerticalCoordinates {
   statementMap = /* @__PURE__ */ new Map();
   creationTops = /* @__PURE__ */ new Map();
@@ -11105,16 +10912,13 @@ class VerticalCoordinates {
     const originParticipant = messages.length === 0 ? _STARTER_ : messages[0].from || _STARTER_;
     const runtime = {
       metrics: DEFAULT_LAYOUT_METRICS,
-      rootBlock,
       participants,
-      originParticipant,
       recordCoordinate: (statement, coordinate) => {
         const key = createStatementKey(statement);
         this.statementMap.set(key, coordinate);
       },
       updateCreationTop: (participant, top) => {
         const paddingTop = top - 8;
-        rootLogger.info(`[VerticalCoordinates] updateCreationTop participant="${participant}" raw=${top} paddingTop=${paddingTop}`);
         this.creationTops.set(participant, paddingTop);
       }
     };
@@ -11127,19 +10931,13 @@ class VerticalCoordinates {
   getStatementCoordinate(key) {
     return this.statementMap.get(key);
   }
-  getStatementCoordinateFor(statement) {
-    return this.statementMap.get(createStatementKey(statement));
-  }
-  entries() {
-    return Array.from(this.statementMap.entries());
-  }
   getTotalHeight() {
     return this.totalHeight;
   }
 }
 
 let dic = {};
-const persistDic = {};
+let persistDic = {};
 const getCache = (key) => {
   if (key != null) {
     const cacheValue = dic[key] ?? persistDic[key];
@@ -11153,78 +10951,92 @@ const setCache = (key, value, persist = false) => {
     persistDic[key] = value;
   }
 };
+const clearPersistentCache = () => {
+  persistDic = {};
+  dic = {};
+};
 
 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) {
+  if (ctx === canvasCtx) return;
   canvasCtx = ctx;
+  clearPersistentCache();
 }
 function getCanvasContext() {
   if (canvasCtx) return canvasCtx;
   try {
     if (typeof OffscreenCanvas !== "undefined") {
       canvasCtx = new OffscreenCanvas(1, 1).getContext("2d");
-      rootLogger.debug("[ZenUML] WidthProviderOnCanvas: using OffscreenCanvas");
     } else if (typeof document !== "undefined") {
       canvasCtx = document.createElement("canvas").getContext("2d");
-      rootLogger.debug("[ZenUML] WidthProviderOnCanvas: using <canvas> element");
-    } else {
-      rootLogger.debug("[ZenUML] WidthProviderOnCanvas: no canvas available, using character estimate fallback");
     }
   } catch {
-    rootLogger.debug("[ZenUML] WidthProviderOnCanvas: canvas creation failed, using character estimate fallback");
   }
   return canvasCtx;
 }
 function WidthProviderOnCanvas(text, type) {
   const measured = text.trim();
-  const cacheKey = `WidthProviderOnCanvas_${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);
-    setCache(cacheKey, width2, true);
+    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;
 }
-const EMOJI_PATTERN = /[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}\u{FE00}-\u{FE0F}\u{200D}]/u;
-function measureWithSvg(text, fontSize) {
+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, 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 cacheKey = hasEmoji ? `measureTextWithFont_svg_${fontSize}_${measured}` : `measureTextWithFont_${fontSize}_${measured}`;
+  const font = `${fontSize} ${FONT_FAMILY}`;
+  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;
@@ -11234,11 +11046,19 @@ function measureTextWithFont(text, fontSize) {
   if (!ctx) {
     const px = Number.parseFloat(fontSize) || 14;
     const width2 = Math.ceil(measured.length * px * 0.6);
-    setCache(cacheKey, width2, true);
+    setCache(cacheKey, width2);
     return width2;
   }
-  ctx.font = `${fontSize} ${FONT_FAMILY}`;
-  const width = ctx.measureText(measured).width;
+  ctx.font = font;
+  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;
 }
@@ -11249,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;
@@ -11358,22 +11183,59 @@ function FrameBorder(frame) {
     return { left: 0, right: 0 };
   }
   return {
-    type: frame.type,
     left: FRAGMENT_PADDING_X * longestPath(frame, "LEFT" /* LEFT */),
     right: FRAGMENT_PADDING_X * longestPath(frame, "RIGHT" /* RIGHT */)
   };
 }
 
+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;
+  const localParticipants = getLocalParticipantNames(ctx);
+  const leftParticipant = allParticipants.find((p) => localParticipants.includes(p)) || "";
+  const rightParticipant = allParticipants.slice().reverse().find((p) => localParticipants.includes(p)) || "";
+  const frameBuilder = new FrameBuilder(allParticipants);
+  const frame = frameBuilder.getFrame(ctx);
+  const border = FrameBorder(frame);
+  const extraWidth = extraWidthDueToSelfMessage(
+    ctx,
+    rightParticipant,
+    coordinates
+  );
+  const participantWidth = coordinates.distance(leftParticipant, rightParticipant) + coordinates.half(leftParticipant) + coordinates.half(rightParticipant);
+  return Math.max(participantWidth, FRAGMENT_MIN_WIDTH) + border.left + border.right + extraWidth;
+}
+function extraWidthDueToSelfMessage(ctx, rightParticipant, coordinates) {
+  const allMessages = AllMessages(ctx);
+  const widths = allMessages.filter((m) => m.from === m.to).map(
+    (m) => coordinates.getMessageWidth(m) - coordinates.distance(m.from || _STARTER_, rightParticipant) - coordinates.half(rightParticipant)
+  );
+  return Math.max.apply(null, [0, ...widths]);
+}
+
 const PARTICIPANT_TOP_SPACE = PARTICIPANT_TOP_SPACE_FOR_GROUP + 8;
 const PARTICIPANT_BOX_PADDING = 16;
-const PARTICIPANT_BOX_PADDING_ASSIGNEE = 16;
 const PARTICIPANT_ICON_ROW_WIDTH = 28;
 const PARTICIPANT_EMOJI_WIDTH = 20;
 const PARTICIPANT_VISUAL_HEIGHT = 40;
 const PARTICIPANT_MAX_WIDTH = 250;
-function snapX$1(x) {
-  return x;
-}
 function cssToSvgStyle(css) {
   const result = {};
   let hasKeys = false;
@@ -11392,24 +11254,32 @@ function cssToSvgStyle(css) {
 
 function buildParticipants(models, coordinates, verticalCoordinates, measureText) {
   return models.map((m) => {
-    const centerX = snapX$1(coordinates.getPosition(m.name));
+    const centerX = coordinates.getPosition(m.name);
     const halfWidth = coordinates.half(m.name);
-    const isAssignee = m.name.includes(":") && m.getDisplayName() === m.name;
     let width;
     let measuredTextWidth;
     let measuredStereotypeWidth;
     if (measureText && m.name !== _STARTER_) {
       const textWidth = measureSvgParticipantLabelWidth(m.getDisplayName());
       measuredTextWidth = textWidth;
-      const padding = isAssignee ? PARTICIPANT_BOX_PADDING_ASSIGNEE : PARTICIPANT_BOX_PADDING;
+      const padding = PARTICIPANT_BOX_PADDING;
       const iconWidth = m.hasIcon() ? PARTICIPANT_ICON_ROW_WIDTH : 0;
       const emojiWidth = m.emoji ? PARTICIPANT_EMOJI_WIDTH : 0;
       const STEREOTYPE_BOX_OVERHEAD = 8;
       if (m.stereotype) {
-        measuredStereotypeWidth = measureSvgParticipantLabelWidth(`«${m.stereotype}»`);
+        measuredStereotypeWidth = measureSvgParticipantLabelWidth(
+          `«${m.stereotype}»`
+        );
       }
       const stereotypeBoxWidth = measuredStereotypeWidth != null ? measuredStereotypeWidth + STEREOTYPE_BOX_OVERHEAD : 0;
-      width = Math.min(Math.max(textWidth + padding + iconWidth + emojiWidth, stereotypeBoxWidth, MIN_PARTICIPANT_WIDTH), PARTICIPANT_MAX_WIDTH);
+      width = Math.min(
+        Math.max(
+          textWidth + padding + iconWidth + emojiWidth,
+          stereotypeBoxWidth,
+          MIN_PARTICIPANT_WIDTH
+        ),
+        PARTICIPANT_MAX_WIDTH
+      );
     } else {
       width = Math.min(halfWidth * 2 - MARGIN, PARTICIPANT_MAX_WIDTH);
     }
@@ -11488,39 +11358,49 @@ function buildGroups(participants, diagramHeight) {
   return groups;
 }
 
-function snapX(x) {
-  return x;
+class Anchor2 {
+  constructor(position, layers) {
+    this.position = position;
+    this.layers = layers;
+  }
+  /**
+   * centerToEdge is used for translateX calculations.
+   */
+  centerToEdge(other) {
+    return other.rightEdgeOfRightWall() - this.centerOfRightWall();
+  }
+  centerToCenter(other) {
+    return other.centerOfRightWall() - this.centerOfRightWall();
+  }
+  /**
+   * edgeOffset is used for interactionWidth calculations.
+   */
+  edgeOffset(other) {
+    const isRightToLeft = other.position < this.position;
+    const rightEdgeOfLeftAnchor = isRightToLeft ? other.rightEdgeOfRightWall() : this.rightEdgeOfRightWall();
+    const leftEdgeOfRightAnchor = isRightToLeft ? this.leftEdgeOfRightWall() : other.leftEdgeOfRightWall();
+    const distance = leftEdgeOfRightAnchor - rightEdgeOfLeftAnchor - LIFELINE_WIDTH;
+    return isRightToLeft ? distance * -1 : distance;
+  }
+  centerOfRightWall() {
+    return this.layers <= 1 ? this.position : this.position + OCCURRENCE_BAR_SIDE_WIDTH * (this.layers - 1);
+  }
+  rightEdgeOfRightWall() {
+    return this.position + OCCURRENCE_BAR_SIDE_WIDTH * this.layers;
+  }
+  leftEdgeOfRightWall() {
+    return this.layers === 0 ? this.position : this.centerOfRightWall() - OCCURRENCE_BAR_SIDE_WIDTH;
+  }
 }
+
 const COMMENT_FONT_ASCENT = 15;
 function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, allParticipants, _measureText, commentHeight = 0, commentText, commentStyle, commentYBase) {
   const statNode = info.statNode;
-  if (!statNode) return null;
   const fragmentCtx = findFragmentContext(statNode);
-  if (!fragmentCtx) {
-    return {
-      fragment: {
-        kind: info.fragmentKind,
-        label: info.fragmentLabel || "",
-        labelWidth: info.fragmentLabel ? measureSvgFragmentLabelWidth(resolveEmojiInText(info.fragmentLabel)) : void 0,
-        x: 0,
-        y: coord.top,
-        width: coordinates.getWidth(),
-        height: coord.height,
-        headerY: coord.top + 1 + commentHeight,
-        sections: [],
-        number: info.number,
-        depth: info.depth
-      },
-      comment: commentText && commentYBase != null ? {
-        x: 1,
-        y: commentYBase + 1 + COMMENT_FONT_ASCENT,
-        text: commentText,
-        style: commentStyle,
-        fragmentComment: true
-      } : void 0
-    };
-  }
-  const localNames = getDeepParticipantNames(fragmentCtx, info.fragmentSections);
+  const localNames = getDeepParticipantNames(
+    fragmentCtx,
+    info.fragmentSections
+  );
   const leftParticipant = allParticipants.find((p) => localNames.includes(p)) || "";
   const rightParticipant = allParticipants.slice().reverse().find((p) => localNames.includes(p)) || "";
   const frameBuilder = new FrameBuilder(allParticipants);
@@ -11529,14 +11409,8 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
   let fragWidth;
   let fragX;
   if (leftParticipant && rightParticipant) {
-    const participantWidth = coordinates.distance(leftParticipant, rightParticipant) + coordinates.half(leftParticipant) + coordinates.half(rightParticipant);
-    const selfMessages = AllMessages(statNode).filter((m) => m.from === m.to);
-    const extraWidths = selfMessages.map(
-      (m) => coordinates.getMessageWidth(m) - coordinates.distance(m.from || _STARTER_, rightParticipant) - coordinates.half(rightParticipant)
-    );
-    const extraWidth = Math.max(0, ...extraWidths);
-    fragWidth = Math.max(participantWidth, FRAGMENT_MIN_WIDTH) + fragBorder.left + fragBorder.right + extraWidth;
-    fragX = snapX(coordinates.getPosition(leftParticipant)) - coordinates.half(leftParticipant);
+    fragWidth = TotalWidth(statNode, coordinates);
+    fragX = coordinates.getPosition(leftParticipant) - coordinates.half(leftParticipant);
   } else {
     fragWidth = Math.max(FRAGMENT_MIN_WIDTH, coordinates.getWidth());
     fragX = 0;
@@ -11551,11 +11425,12 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
         if (sectionBlock) {
           const innerStats = sectionBlock.stat?.() || [];
           if (innerStats.length > 0) {
-            const firstStatKey = createStatementKeyFromStat(innerStats[0]);
+            const firstStatKey = createStatementKey(innerStats[0]);
             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;
               }
             }
           }
@@ -11564,11 +11439,16 @@ 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(resolveEmojiInText(section.label.slice(1, -1).trim())) : void 0,
+        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: (() => {
           const spaceIdx = section.label.indexOf(" ");
           if (spaceIdx > 0 && !section.label.startsWith("finally") && !section.label.startsWith("[")) {
@@ -11579,7 +11459,9 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
         keywordWidth: (() => {
           const spaceIdx = section.label.indexOf(" ");
           if (spaceIdx > 0 && !section.label.startsWith("finally") && !section.label.startsWith("[")) {
-            return measureSvgFragmentLabelWidth(section.label.substring(0, spaceIdx));
+            return measureSvgFragmentLabelWidth(
+              section.label.substring(0, spaceIdx)
+            );
           }
           return void 0;
         })(),
@@ -11593,7 +11475,9 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
         detailWidth: (() => {
           const spaceIdx = section.label.indexOf(" ");
           if (spaceIdx > 0 && !section.label.startsWith("finally") && !section.label.startsWith("[")) {
-            return measureSvgFragmentLabelWidth(section.label.substring(spaceIdx + 1));
+            return measureSvgFragmentLabelWidth(
+              section.label.substring(spaceIdx + 1)
+            );
           }
           return void 0;
         })()
@@ -11606,7 +11490,7 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
     if (innerStats.length > 1) {
       sections.push({ label: "", y: coord.top, height: 0 });
       for (let i = 1; i < innerStats.length; i++) {
-        const statKey = createStatementKeyFromStat(innerStats[i]);
+        const statKey = createStatementKey(innerStats[i]);
         if (!statKey) continue;
         const innerCoord = verticalCoordinates.getStatementCoordinate(statKey);
         if (!innerCoord) continue;
@@ -11633,13 +11517,17 @@ 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,
       width: fragWidth,
       height: coord.height,
-      headerY: coord.top + 1 + commentHeight,
+      // The header sits just inside the fragment's 1px top border, below any
+      // inline comment — the same offset FragmentSingleBlockVM.measure() applies.
+      headerY: coord.top + FRAGMENT_BORDER_WIDTH + commentHeight,
       sections,
       number: info.number,
       depth: info.depth
@@ -11648,7 +11536,7 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
   };
 }
 function findFragmentContext(stat) {
-  for (const kind of ["loop", "opt", "par", "critical", "section"]) {
+  for (const kind of SINGLE_BLOCK_FRAGMENT_KINDS) {
     const frag = stat[kind]?.();
     if (frag) return frag;
   }
@@ -11660,10 +11548,6 @@ function findFragmentContext(stat) {
   if (ref) return ref;
   return null;
 }
-function createStatementKeyFromStat(statement) {
-  if (!statement?.start || !statement?.stop) return "";
-  return `${statement.start.start}-${statement.stop.stop}`;
-}
 function getDeepParticipantNames(fragmentCtx, sections) {
   const names = new Set(getLocalParticipantNames(fragmentCtx));
   if (sections) {
@@ -11701,11 +11585,37 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
       const to = message.Owner?.() || _STARTER_;
       const label = normalizeLabel(message.SignatureText?.() || "");
       const nestedBlock = message.braceBlock?.()?.block?.();
-      results.push({ key, kind: "sync", from, to, label, isSelf: from === to, hasBlock: !!nestedBlock, comment, statNode: stat, senderOccurrenceDepth: activeOccurrences.get(from) || 0, targetHasOccurrence: activeOccurrences.has(to), targetOccurrenceDepth: activeOccurrences.get(to) || 0, number, depth, parentBlockKind });
+      results.push({
+        key,
+        kind: "sync",
+        from,
+        to,
+        label,
+        isSelf: from === to,
+        hasBlock: !!nestedBlock,
+        comment,
+        statNode: stat,
+        senderOccurrenceDepth: activeOccurrences.get(from) || 0,
+        targetHasOccurrence: activeOccurrences.has(to),
+        targetOccurrenceDepth: activeOccurrences.get(to) || 0,
+        number,
+        depth,
+        parentBlockKind
+      });
       if (nestedBlock) {
         const innerOccs = new Map(activeOccurrences);
         innerOccs.set(to, (innerOccs.get(to) || 0) + 1);
-        results.push(...walkBlock(nestedBlock, to, innerOccs, number, depth + 1, "sync", 0));
+        results.push(
+          ...walkBlock(
+            nestedBlock,
+            to,
+            innerOccs,
+            number,
+            depth + 1,
+            "sync",
+            0
+          )
+        );
       }
       continue;
     }
@@ -11713,8 +11623,23 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
     if (asyncMsg) {
       const from = asyncMsg.From?.() || asyncMsg.ProvidedFrom?.() || asyncMsg.Origin?.() || currentOrigin;
       const to = asyncMsg.Owner?.() || asyncMsg.to?.()?.getFormattedText?.() || from;
-      const label = normalizeLabel(asyncMsg.content?.()?.getText?.() || asyncMsg.SignatureText?.() || "");
-      results.push({ key, kind: "async", from, to, label, isSelf: from === to, hasBlock: false, comment, senderOccurrenceDepth: activeOccurrences.get(from) || 0, targetHasOccurrence: activeOccurrences.has(to), number, depth });
+      const label = normalizeLabel(
+        asyncMsg.content?.()?.getText?.() || asyncMsg.SignatureText?.() || ""
+      );
+      results.push({
+        key,
+        kind: "async",
+        from,
+        to,
+        label,
+        isSelf: from === to,
+        hasBlock: false,
+        comment,
+        senderOccurrenceDepth: activeOccurrences.get(from) || 0,
+        targetHasOccurrence: activeOccurrences.has(to),
+        number,
+        depth
+      });
       continue;
     }
     const creation = stat.creation?.();
@@ -11723,11 +11648,36 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
       const to = creation.Owner?.() || "";
       const label = normalizeLabel(creation.SignatureText?.() || "«create»");
       const creationBlock = creation.braceBlock?.()?.block?.();
-      results.push({ key, kind: "creation", from, to, label, isSelf: false, hasBlock: !!creationBlock, comment, statNode: stat, senderOccurrenceDepth: activeOccurrences.get(from) || 0, targetHasOccurrence: activeOccurrences.has(to), number, depth, parentBlockKind });
+      results.push({
+        key,
+        kind: "creation",
+        from,
+        to,
+        label,
+        isSelf: false,
+        hasBlock: !!creationBlock,
+        comment,
+        statNode: stat,
+        senderOccurrenceDepth: activeOccurrences.get(from) || 0,
+        targetHasOccurrence: activeOccurrences.has(to),
+        number,
+        depth,
+        parentBlockKind
+      });
       if (creationBlock) {
         const innerOccs = new Map(activeOccurrences);
         innerOccs.set(to, (innerOccs.get(to) || 0) + 1);
-        results.push(...walkBlock(creationBlock, to || currentOrigin, innerOccs, number, depth + 1, "creation", 0));
+        results.push(
+          ...walkBlock(
+            creationBlock,
+            to || currentOrigin,
+            innerOccs,
+            number,
+            depth + 1,
+            "creation",
+            0
+          )
+        );
       }
       continue;
     }
@@ -11737,13 +11687,40 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
       const asyncMessage = ret?.asyncMessage?.();
       const from = asyncMessage?.From?.() || ret?.From?.() || currentOrigin;
       const to = asyncMessage?.to?.()?.getFormattedText?.() || ret?.ReturnTo?.() || _STARTER_;
-      results.push({ key, kind: "return", from, to, label, isSelf: from === to, hasBlock: false, comment, senderOccurrenceDepth: activeOccurrences.get(from) || 0, targetOccurrenceDepth: activeOccurrences.get(to) || 0, number, depth, parentBlockKind });
+      results.push({
+        key,
+        kind: "return",
+        from,
+        to,
+        label,
+        isSelf: from === to,
+        hasBlock: false,
+        comment,
+        senderOccurrenceDepth: activeOccurrences.get(from) || 0,
+        targetOccurrenceDepth: activeOccurrences.get(to) || 0,
+        number,
+        depth,
+        parentBlockKind
+      });
       continue;
     }
     const divider = stat.divider?.();
     if (divider) {
-      const label = normalizeLabel(divider.getFormattedText?.() || divider.getText?.() || "");
-      results.push({ key, kind: "divider", from: "", to: "", label, isSelf: false, hasBlock: false, senderOccurrenceDepth: 0, number, depth });
+      const label = normalizeLabel(
+        divider.getFormattedText?.() || divider.getText?.() || ""
+      );
+      results.push({
+        key,
+        kind: "divider",
+        from: "",
+        to: "",
+        label,
+        isSelf: false,
+        hasBlock: false,
+        senderOccurrenceDepth: 0,
+        number,
+        depth
+      });
       continue;
     }
     const fragmentInfo = extractFragmentInfo(stat);
@@ -11758,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,
@@ -11765,19 +11744,28 @@ function walkBlock(block, currentOrigin, activeOccurrences, parentNumber, depth,
       number,
       depth
     });
-    walkFragmentBlocks(stat, currentOrigin, results, activeOccurrences, number, depth);
+    walkFragmentBlocks(
+      stat,
+      currentOrigin,
+      results,
+      activeOccurrences,
+      number,
+      depth
+    );
   }
   return results;
 }
 function extractFragmentInfo(stat) {
-  for (const kind of ["loop", "opt", "par", "critical", "section"]) {
+  for (const kind of SINGLE_BLOCK_FRAGMENT_KINDS) {
     const frag = stat[kind]?.();
     if (frag) {
       const condition = frag.parExpr?.()?.condition?.();
       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?.() }]
       };
     }
@@ -11787,16 +11775,30 @@ function extractFragmentInfo(stat) {
     const sections = [];
     const ifBlock = alt.ifBlock?.();
     if (ifBlock) {
-      sections.push({ label: "Alt", blockNode: ifBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "Alt",
+        guardKeyword: "if",
+        condition: ifBlock.parExpr?.()?.condition?.()?.getFormattedText?.() || "",
+        blockNode: ifBlock.braceBlock?.()?.block?.()
+      });
     }
     for (const elseIf of alt.elseIfBlock?.() || []) {
       const condition = elseIf.parExpr?.()?.condition?.();
       const label = condition?.getFormattedText?.() || "";
-      sections.push({ label: `[ ${label} ]`, blockNode: elseIf.braceBlock?.()?.block?.() });
+      sections.push({
+        label: `else if ${label}`,
+        guardKeyword: "else if",
+        condition: label,
+        blockNode: elseIf.braceBlock?.()?.block?.()
+      });
     }
     const elseBlock = alt.elseBlock?.();
     if (elseBlock) {
-      sections.push({ label: "[else]", blockNode: elseBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "else",
+        guardKeyword: "else",
+        blockNode: elseBlock.braceBlock?.()?.block?.()
+      });
     }
     const ifCondition = alt.ifBlock?.()?.parExpr?.()?.condition?.();
     const firstLabel = ifCondition?.getFormattedText?.() || "";
@@ -11807,15 +11809,24 @@ function extractFragmentInfo(stat) {
     const sections = [];
     const tryBlock = tcf.tryBlock?.();
     if (tryBlock) {
-      sections.push({ label: "Try", blockNode: tryBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "Try",
+        blockNode: tryBlock.braceBlock?.()?.block?.()
+      });
     }
     for (const catchBlock of tcf.catchBlock?.() || []) {
       const exception = catchBlock.invocation?.()?.parameters?.()?.getFormattedText?.() || "";
-      sections.push({ label: `catch ${exception}`, blockNode: catchBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: `catch ${exception}`,
+        blockNode: catchBlock.braceBlock?.()?.block?.()
+      });
     }
     const finallyBlock = tcf.finallyBlock?.();
     if (finallyBlock) {
-      sections.push({ label: "finally", blockNode: finallyBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "finally",
+        blockNode: finallyBlock.braceBlock?.()?.block?.()
+      });
     }
     return { fragmentKind: "tcf", label: "", sections };
   }
@@ -11827,14 +11838,27 @@ function extractFragmentInfo(stat) {
   return null;
 }
 function blockLength(block) {
-  return (block?.stat?.() || []).filter((stat) => !!createStatementKey(stat)).length;
+  return (block?.stat?.() || []).filter(
+    (stat) => !!createStatementKey(stat)
+  ).length;
 }
 function walkFragmentBlocks(stat, origin, results, activeOccurrences, parentNumber, depth) {
-  for (const kind of ["loop", "opt", "par", "critical", "section"]) {
+  for (const kind of SINGLE_BLOCK_FRAGMENT_KINDS) {
     const frag = stat[kind]?.();
     if (frag) {
       const block = frag.braceBlock?.()?.block?.();
-      if (block) results.push(...walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, 0));
+      if (block)
+        results.push(
+          ...walkBlock(
+            block,
+            origin,
+            activeOccurrences,
+            parentNumber,
+            depth + 1,
+            null,
+            0
+          )
+        );
       return;
     }
   }
@@ -11845,14 +11869,32 @@ function walkFragmentBlocks(stat, origin, results, activeOccurrences, parentNumb
     if (ifBlock) {
       const block = ifBlock.braceBlock?.()?.block?.();
       if (block) {
-        results.push(...walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset));
+        results.push(
+          ...walkBlock(
+            block,
+            origin,
+            activeOccurrences,
+            parentNumber,
+            depth + 1,
+            null,
+            sectionOffset
+          )
+        );
         sectionOffset += blockLength(block);
       }
     }
     for (const elseIf of alt.elseIfBlock?.() || []) {
       const block = elseIf.braceBlock?.()?.block?.();
       if (block) {
-        const sectionStmts = walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset);
+        const sectionStmts = walkBlock(
+          block,
+          origin,
+          activeOccurrences,
+          parentNumber,
+          depth + 1,
+          null,
+          sectionOffset
+        );
         if (sectionStmts.length > 0) sectionStmts[0].sectionReset = true;
         results.push(...sectionStmts);
         sectionOffset += blockLength(block);
@@ -11862,7 +11904,15 @@ function walkFragmentBlocks(stat, origin, results, activeOccurrences, parentNumb
     if (elseBlock) {
       const block = elseBlock.braceBlock?.()?.block?.();
       if (block) {
-        const sectionStmts = walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset);
+        const sectionStmts = walkBlock(
+          block,
+          origin,
+          activeOccurrences,
+          parentNumber,
+          depth + 1,
+          null,
+          sectionOffset
+        );
         if (sectionStmts.length > 0) sectionStmts[0].sectionReset = true;
         results.push(...sectionStmts);
       }
@@ -11876,14 +11926,32 @@ function walkFragmentBlocks(stat, origin, results, activeOccurrences, parentNumb
     if (tryBlock) {
       const block = tryBlock.braceBlock?.()?.block?.();
       if (block) {
-        results.push(...walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset));
+        results.push(
+          ...walkBlock(
+            block,
+            origin,
+            activeOccurrences,
+            parentNumber,
+            depth + 1,
+            null,
+            sectionOffset
+          )
+        );
         sectionOffset += blockLength(block);
       }
     }
     for (const catchBlock of tcf.catchBlock?.() || []) {
       const block = catchBlock.braceBlock?.()?.block?.();
       if (block) {
-        const sectionStmts = walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset);
+        const sectionStmts = walkBlock(
+          block,
+          origin,
+          activeOccurrences,
+          parentNumber,
+          depth + 1,
+          null,
+          sectionOffset
+        );
         if (sectionStmts.length > 0) sectionStmts[0].sectionReset = true;
         results.push(...sectionStmts);
         sectionOffset += blockLength(block);
@@ -11893,7 +11961,15 @@ function walkFragmentBlocks(stat, origin, results, activeOccurrences, parentNumb
     if (finallyBlock) {
       const block = finallyBlock.braceBlock?.()?.block?.();
       if (block) {
-        const sectionStmts = walkBlock(block, origin, activeOccurrences, parentNumber, depth + 1, null, sectionOffset);
+        const sectionStmts = walkBlock(
+          block,
+          origin,
+          activeOccurrences,
+          parentNumber,
+          depth + 1,
+          null,
+          sectionOffset
+        );
         if (sectionStmts.length > 0) sectionStmts[0].sectionReset = true;
         results.push(...sectionStmts);
       }
@@ -11925,10 +12001,6 @@ function computeReturnDebt(statements, verticalCoordinates, returnHeight) {
       if (ownerKey && occInnerDebt > 0) {
         result.set(`inner:${ownerKey}`, occInnerDebt);
       }
-      const hasMixed = hasNonReturnChild[maxDepth] || false;
-      if (ownerKey && hasMixed) {
-        result.set(`mixed:${ownerKey}`, 1);
-      }
       const hasAssign = blockHasAssignment[maxDepth] || false;
       debtByDepth.pop();
       directDebtByDepth.pop();
@@ -12012,10 +12084,6 @@ function computeReturnDebt(statements, verticalCoordinates, returnHeight) {
     if (ownerKey && occInnerDebtEnd > 0) {
       result.set(`inner:${ownerKey}`, occInnerDebtEnd);
     }
-    const hasMixedEnd = hasNonReturnChild[maxDepth] || false;
-    if (ownerKey && hasMixedEnd) {
-      result.set(`mixed:${ownerKey}`, 1);
-    }
     const hasAssignEnd = blockHasAssignment[maxDepth] || false;
     debtByDepth.pop();
     directDebtByDepth.pop();
@@ -12031,7 +12099,6 @@ function computeReturnDebt(statements, verticalCoordinates, returnHeight) {
       }
     }
   }
-  result.set("__totalDebt__", debtByDepth[0] || 0);
   return result;
 }
 
@@ -12059,7 +12126,11 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
     }
   }
   const RETURN_VISUAL_HEIGHT = 16;
-  const adjustMap = computeReturnDebt(statements, verticalCoordinates, RETURN_VISUAL_HEIGHT);
+  const adjustMap = computeReturnDebt(
+    statements,
+    verticalCoordinates,
+    RETURN_VISUAL_HEIGHT
+  );
   for (const info of statements) {
     const coord = verticalCoordinates.getStatementCoordinate(info.key);
     if (!coord) continue;
@@ -12075,7 +12146,7 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
         const tX = coordinates.getPosition(info.to);
         if (fX > tX) commentParticipant = info.to;
       }
-      const commentX = commentParticipant ? snapX$1(coordinates.getPosition(commentParticipant)) : 10;
+      const commentX = commentParticipant ? coordinates.getPosition(commentParticipant) : 10;
       const COMMENT_FONT_ASCENT = 15;
       const commentXOffset = info.senderOccurrenceDepth >= 1 ? OCCURRENCE_BAR_SIDE_WIDTH + 1 : 1;
       const codeSpanPadding = commentObj.text.trimStart().startsWith("`") ? 2 : 0;
@@ -12088,30 +12159,31 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
     }
     const messageStyle = commentObj ? cssToSvgStyle(commentObj.messageStyle) : void 0;
     if (info.kind === "sync" || info.kind === "async") {
-      let fromX = snapX$1(coordinates.getPosition(info.from));
-      const toX = snapX$1(coordinates.getPosition(info.to));
-      const messageHeight = info.isSelf ? 30 : 16;
-      const msgCommentHeight = commentObj?.text ? (info.comment?.trim().split("\n").length || 0) * 20 : 0;
+      let fromX = coordinates.getPosition(info.from);
+      const toX = coordinates.getPosition(info.to);
+      const isAsync = info.kind === "async";
+      const messageHeight = !info.isSelf ? MESSAGE_HEIGHT : isAsync ? ASYNC_SELF_MESSAGE_HEIGHT : SELF_MESSAGE_HEIGHT;
+      const msgCommentHeight = commentObj?.text ? (info.comment?.trim().split("\n").length || 0) * COMMENT_LINE_HEIGHT : 0;
       const messageY = coord.top + adjust + msgCommentHeight + messageHeight - 0.5;
       if (info.senderOccurrenceDepth >= 1 && !info.isSelf) {
-        const depth = info.senderOccurrenceDepth;
-        const occOffset = depth * OCCURRENCE_BAR_SIDE_WIDTH;
+        const senderAnchor = new Anchor2(fromX, info.senderOccurrenceDepth);
         const isLTR = fromX < toX;
-        fromX = isLTR ? fromX + occOffset : fromX - OCCURRENCE_BAR_SIDE_WIDTH + (depth - 1) * OCCURRENCE_BAR_SIDE_WIDTH;
+        fromX = isLTR ? senderAnchor.rightEdgeOfRightWall() : senderAnchor.leftEdgeOfRightWall();
       }
       const targetDepth = info.targetOccurrenceDepth || (info.targetHasOccurrence ? 1 : 0);
       const nestingOffset = targetDepth * OCCURRENCE_BAR_SIDE_WIDTH;
       if (info.isSelf) {
-        const isAsync = info.kind === "async";
         const selfYOffset = 0;
         const selfWidth = isAsync ? 28 : OCCURRENCE_WIDTH;
-        const selfHeight = isAsync ? 44 : messageHeight;
-        const selfX = info.senderOccurrenceDepth >= 1 ? fromX + OCCURRENCE_BAR_SIDE_WIDTH + (info.senderOccurrenceDepth - 1) * OCCURRENCE_BAR_SIDE_WIDTH : fromX;
+        const selfX = new Anchor2(
+          fromX,
+          info.senderOccurrenceDepth
+        ).rightEdgeOfRightWall();
         selfCalls.push({
           x: selfX,
           y: coord.top + selfYOffset + msgCommentHeight,
           width: selfWidth,
-          height: selfHeight,
+          height: messageHeight,
           label: info.label,
           arrowStyle: isAsync ? "open" : "solid",
           number: info.number,
@@ -12183,16 +12255,15 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
       continue;
     }
     if (info.kind === "creation") {
-      const CREATION_MSG_HEIGHT = 40;
-      let fromX = snapX$1(coordinates.getPosition(info.from));
-      const toX = snapX$1(coordinates.getPosition(info.to));
+      let fromX = coordinates.getPosition(info.from);
+      const toX = coordinates.getPosition(info.to);
       if (info.senderOccurrenceDepth >= 1) {
         const occOffset = OCCURRENCE_BAR_SIDE_WIDTH + (info.senderOccurrenceDepth - 1) * OCCURRENCE_BAR_SIDE_WIDTH;
         const isLTR = fromX < toX;
         fromX = isLTR ? fromX + occOffset : fromX - occOffset;
       }
       const targetParticipant = participants.find((p) => p.name === info.to);
-      const messageY = targetParticipant ? targetParticipant.y + PARTICIPANT_VISUAL_HEIGHT / 2 : coord.top + CREATION_MSG_HEIGHT / 2;
+      const messageY = targetParticipant ? targetParticipant.y + PARTICIPANT_VISUAL_HEIGHT / 2 : coord.top + CREATION_MESSAGE_HEIGHT / 2;
       if (targetParticipant) {
         creations.push({
           participant: targetParticipant,
@@ -12211,7 +12282,7 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
         });
       }
       const occX = toX - OCCURRENCE_BAR_SIDE_WIDTH;
-      const occY = targetParticipant ? targetParticipant.y + PARTICIPANT_VISUAL_HEIGHT - 2 : coord.top + CREATION_MSG_HEIGHT - 2;
+      const occY = targetParticipant ? targetParticipant.y + PARTICIPANT_VISUAL_HEIGHT - 2 : coord.top + CREATION_MESSAGE_HEIGHT - 2;
       const occHeight = Math.max(
         coord.top + coord.height - occY,
         OCCURRENCE_EMPTY_HEIGHT
@@ -12228,7 +12299,7 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
         const creationAssign = creationCtx?.Assignment?.();
         if (creationAssign?.assignee) {
           const occBottom = occY + occHeight - 2;
-          const rawFromX = snapX$1(coordinates.getPosition(info.from));
+          const rawFromX = coordinates.getPosition(info.from);
           const isLTR = rawFromX < toX;
           const occHalf = OCCURRENCE_BAR_SIDE_WIDTH;
           const senderNest = Math.max(info.senderOccurrenceDepth - 1, 0) * OCCURRENCE_BAR_SIDE_WIDTH;
@@ -12250,7 +12321,7 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
     }
     if (info.kind === "fragment" && info.fragmentKind) {
       const adjustedCoord = { top: coord.top + adjust, height: coord.height };
-      const fragmentCommentHeight = commentObj?.text ? (info.comment?.trim().split("\n").length || 0) * 20 : 0;
+      const fragmentCommentHeight = commentObj?.text ? (info.comment?.trim().split("\n").length || 0) * COMMENT_LINE_HEIGHT : 0;
       const fragmentResult = buildFragmentGeometry(
         info,
         adjustedCoord,
@@ -12272,26 +12343,14 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
       continue;
     }
     if (info.kind === "return") {
-      const rawFromX = snapX$1(coordinates.getPosition(info.from));
-      const rawToX = snapX$1(coordinates.getPosition(info.to));
+      const rawFromX = coordinates.getPosition(info.from);
+      const rawToX = coordinates.getPosition(info.to);
       const isReverse = rawToX < rawFromX;
-      const fromLayers = info.senderOccurrenceDepth;
-      let fromX;
-      if (isReverse) {
-        fromX = fromLayers === 0 ? rawFromX : (fromLayers <= 1 ? rawFromX : rawFromX + OCCURRENCE_BAR_SIDE_WIDTH * (fromLayers - 1)) - OCCURRENCE_BAR_SIDE_WIDTH;
-      } else {
-        fromX = rawFromX + OCCURRENCE_BAR_SIDE_WIDTH * fromLayers + 1;
-      }
-      const toLayers = info.targetOccurrenceDepth || 0;
-      let toX;
-      if (isReverse) {
-        toX = rawToX + OCCURRENCE_BAR_SIDE_WIDTH * toLayers;
-      } else {
-        toX = toLayers === 0 ? rawToX : (toLayers <= 1 ? rawToX : rawToX + OCCURRENCE_BAR_SIDE_WIDTH * (toLayers - 1)) - OCCURRENCE_BAR_SIDE_WIDTH;
-      }
-      if (isReverse) {
-        toX += LIFELINE_WIDTH;
-      }
+      const fromAnchor = new Anchor2(rawFromX, info.senderOccurrenceDepth);
+      const toAnchor = new Anchor2(rawToX, info.targetOccurrenceDepth || 0);
+      const RETURN_STROKE_OFFSET = 1;
+      const fromX = isReverse ? fromAnchor.leftEdgeOfRightWall() : fromAnchor.rightEdgeOfRightWall() + RETURN_STROKE_OFFSET;
+      const toX = isReverse ? toAnchor.rightEdgeOfRightWall() + LIFELINE_WIDTH : toAnchor.leftEdgeOfRightWall();
       const returnOffset = coord.height === 0 ? 16.5 : 15.5;
       const returnY = coord.top + adjust + returnOffset;
       returns.push({
@@ -12313,7 +12372,9 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
         y: coord.top + adjust + coord.height / 2,
         width: diagramWidth,
         label: info.label,
-        labelWidth: measureSvgFragmentLabelWidth(resolveEmojiInText(cleanLabel))
+        labelWidth: measureSvgFragmentLabelWidth(
+          resolveEmojiInText(cleanLabel)
+        )
       });
       continue;
     }
@@ -12336,11 +12397,23 @@ function buildMessages(rootContext, coordinates, verticalCoordinates, participan
       }
     }
     if (depth > 0) {
-      occurrences[i] = { ...inner, x: inner.x + depth * OCCURRENCE_BAR_SIDE_WIDTH };
+      occurrences[i] = {
+        ...inner,
+        x: inner.x + depth * OCCURRENCE_BAR_SIDE_WIDTH
+      };
     }
   }
-  const totalReturnDebt = adjustMap.get("__totalDebt__") || 0;
-  return { messages, selfCalls, occurrences, creations, fragments, returns, dividers, comments, totalReturnDebt, maxReturnBottom };
+  return {
+    messages,
+    selfCalls,
+    occurrences,
+    creations,
+    fragments,
+    returns,
+    dividers,
+    comments,
+    maxReturnBottom
+  };
 }
 
 function buildGeometry(input) {
@@ -12364,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(
@@ -12380,21 +12476,8 @@ function buildGeometry(input) {
     buildResult.maxReturnBottom
   );
   const lifelineBottom = diagramHeight + PARTICIPANT_VISUAL_HEIGHT - 28;
-  const lifelines = buildLifelines(
-    participants,
-    lifelineBottom
-  );
-  const localParticipants = getLocalParticipantNames(rootContext);
-  const orderedNames = coordinates.orderedParticipantNames();
-  const leftParticipant = orderedNames.find((p) => localParticipants.includes(p)) || "";
-  const rightParticipant = orderedNames.slice().reverse().find((p) => localParticipants.includes(p)) || "";
-  const participantWidth = coordinates.distance(leftParticipant, rightParticipant) + coordinates.half(leftParticipant) + coordinates.half(rightParticipant);
-  const selfMessages = AllMessages(rootContext).filter((m) => m.from === m.to);
-  const extraWidths = selfMessages.map(
-    (m) => coordinates.getMessageWidth(m) - coordinates.distance(m.from || _STARTER_, rightParticipant) - coordinates.half(rightParticipant)
-  );
-  const extraWidthDueToSelfMessage = Math.max(0, ...extraWidths);
-  let diagramWidth = Math.max(participantWidth, FRAGMENT_MIN_WIDTH) + extraWidthDueToSelfMessage;
+  const lifelines = buildLifelines(participants, lifelineBottom);
+  let diagramWidth = TotalWidth(rootContext, coordinates) - frameBorder.left - frameBorder.right;
   if (measureText) {
     const LABEL_PAD = 10;
     for (const msg of messages) {
@@ -12445,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,
@@ -12543,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;
@@ -12551,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;
@@ -12625,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;
@@ -12665,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>`;
@@ -12690,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";
@@ -12699,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>
@@ -12721,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 = 25;
-const BRACKET_WIDTH = 3.89;
+const HEADER_HEIGHT = DEFAULT_LAYOUT_METRICS.fragmentHeaderHeight;
 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>`
           );
         }
       }
@@ -12820,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;
@@ -12930,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) {
@@ -12940,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;
@@ -12950,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>`;
@@ -13093,47 +13227,157 @@ function renderGroup(g) {
 </g>`;
 }
 
-const FRAME_HEADER_HEIGHT = 28;
-const FRAME_BORDER_RADIUS = 4;
-const DEFAULT_THEME_STYLES = `
-  .frame-border-outer { fill: #666; }
-  .frame-border-inner { fill: #ffffff; }
-  .frame-header-bg { fill: #ffffff; }
-  .frame-header-line { stroke: #666; stroke-width: 1; shape-rendering: crispEdges; }
-  .frame-title { font-family: Helvetica, Verdana, serif; font-size: 16px; font-weight: 600; fill: #222; }
-  .participant-box { fill: #ffffff; stroke: #666; stroke-width: 2; }
-  .participant-label { font-family: Helvetica, Verdana, serif; font-size: 16px; fill: #222; }
-  .participant-icon { color: #222; }
-  .participant-icon [fill="currentColor"]:not([stroke]) { stroke: #666; stroke-width: 1; }
-  .lifeline { stroke: #666; stroke-width: 1; }
-  .message-line { stroke: #000; stroke-width: 2; shape-rendering: crispEdges; }
-  .message-label { font-family: Helvetica, Verdana, serif; font-size: 14px; fill: #222; }
-  .arrow-head { fill: #000; stroke: #000; stroke-width: 2; }
+const HELVETICA = "Helvetica, Verdana, serif";
+const DEFAULT_PALETTE = {
+  frameBorder: "#666",
+  frameBg: "#ffffff",
+  titleText: "#222",
+  participantBg: "#ffffff",
+  participantBorder: "#666",
+  participantText: "#222",
+  messageArrow: "#000",
+  messageText: "#222",
+  occurrenceBg: "#dedede",
+  occurrenceBorder: "#666",
+  fragmentBorder: "#666",
+  fragmentHeaderBg: "#dedede",
+  fragmentHeaderOpacity: "0.498",
+  fragmentText: "#000",
+  fragmentSeparator: "#e5e7eb",
+  commentText: "#333",
+  fontFamily: HELVETICA
+};
+const THEME_PALETTES = {
+  "theme-default": DEFAULT_PALETTE,
+  // `.theme-mermaid` sets only base/text/border/occurrence, and hides the
+  // footer — chrome the SVG output does not draw. Every slot it leaves unset
+  // matches theme-default, so the two render identically.
+  "theme-mermaid": DEFAULT_PALETTE,
+  // src/assets/tailwind.css `.theme-clean-light`.
+  "theme-clean-light": {
+    frameBorder: "#e5e9f0",
+    frameBg: "#ffffff",
+    titleText: "#353748",
+    participantBg: "#edf4fe",
+    participantBorder: "#368eff",
+    participantText: "#368eff",
+    messageArrow: "#368eff",
+    messageText: "#368eff",
+    occurrenceBg: "#ffffff",
+    occurrenceBorder: "#368eff",
+    fragmentBorder: "#c8c9c9",
+    fragmentHeaderBg: "#edf4fe",
+    fragmentHeaderOpacity: "1",
+    fragmentText: "#368eff",
+    fragmentSeparator: "#e5e9f0",
+    commentText: "#353748",
+    fontFamily: HELVETICA
+  },
+  // src/assets/tailwind.css `.theme-clean-dark`.
+  "theme-clean-dark": {
+    frameBorder: "#cecfd2",
+    frameBg: "#111628",
+    titleText: "#cecfd2",
+    participantBg: "#5964f2",
+    participantBorder: "#cecfd2",
+    participantText: "#536fff",
+    messageArrow: "#536fff",
+    messageText: "#cecfd2",
+    occurrenceBg: "#5964f2",
+    occurrenceBorder: "#cecfd2",
+    fragmentBorder: "#cecfd2",
+    fragmentHeaderBg: "#5964f2",
+    fragmentHeaderOpacity: "1",
+    fragmentText: "#cecfd2",
+    fragmentSeparator: "#cecfd2",
+    commentText: "#cecfd2",
+    fontFamily: HELVETICA
+  },
+  // src/assets/tailwind.css `.theme-neon`. The DOM theme also swaps in the
+  // MS Sans Serif webfont (`.zenuml .theme-neon`); the SVG names it first and
+  // keeps the Helvetica stack behind it, since a consumer embedding the SVG
+  // will not have that @font-face rule.
+  "theme-neon": {
+    frameBorder: "#60ff33",
+    frameBg: "#000000",
+    titleText: "#8ffc5b",
+    participantBg: "#000000",
+    participantBorder: "#8ffc5b",
+    participantText: "#8ffc5b",
+    messageArrow: "#8ffc5b",
+    messageText: "#8ffc5b",
+    occurrenceBg: "#8ffc5b",
+    occurrenceBorder: "#8ffc5b",
+    fragmentBorder: "#60ff33",
+    fragmentHeaderBg: "#000000",
+    fragmentHeaderOpacity: "1",
+    fragmentText: "#8ffc5b",
+    fragmentSeparator: "#60ff33",
+    commentText: "#8ffc5b",
+    fontFamily: `"MS Sans Serif", ${HELVETICA}`
+  }
+};
+function resolvePalette(theme) {
+  if (theme && theme in THEME_PALETTES) {
+    return THEME_PALETTES[theme];
+  }
+  return DEFAULT_PALETTE;
+}
+function buildThemeStyles(p) {
+  return `
+  .frame-border-outer { fill: ${p.frameBorder}; }
+  .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: 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: 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: #dedede; stroke: #666; stroke-width: 2; shape-rendering: crispEdges; }
-  .fragment-border { fill: none; stroke: #666; stroke-width: 1; shape-rendering: crispEdges; }
-  .fragment-header { fill: #dedede; fill-opacity: 0.498; stroke: none; shape-rendering: crispEdges; }
-  .fragment-label { font-family: Helvetica, Verdana, serif; font-size: 14px; font-weight: 600; fill: #000; }
-  .fragment-condition { font-family: Helvetica, Verdana, serif; font-size: 14px; fill: #000; }
-  .fragment-separator { stroke: #e5e7eb; stroke-width: 1; shape-rendering: crispEdges; }
-  .fragment-section-label { font-family: Helvetica, Verdana, serif; font-size: 14px; fill: #000; }
-  .return-line { stroke: #000; stroke-width: 2; stroke-dasharray: 6,4; shape-rendering: crispEdges; }
-  .return-arrow { stroke: #000; stroke-width: 2; fill: none; }
-  .return-label { font-family: Helvetica, Verdana, serif; font-size: 14px; fill: #222; }
-  .return-icon { fill: #222; }
+  .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-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: 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: Helvetica, Verdana, serif; font-size: 14px; fill: #333; }
-  .comment-text { font-family: Helvetica, Verdana, serif; font-size: 14px; fill: #333; opacity: 0.5; }
-  .seq-number { font-family: Helvetica, Verdana, serif; font-size: 12px; font-weight: 100; fill: #6b7280; }
-  .group-outline { fill: none; stroke: #666; }
-  .group-title-bg { fill: #ffffff; stroke: none; }
-  .group-title-text { font-family: Helvetica, Verdana, serif; font-size: 13px; font-weight: 400; fill: #222; }
+  .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; }
+  .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_VIEWPORT_HEADER_ALLOWANCE = 28;
+const FRAME_BORDER_RADIUS = 4;
 function renderToSvg(code, options) {
   const rootContext = RootContext(code);
   if (!rootContext) {
-    return { svg: "<svg></svg>", innerSvg: "", width: 0, height: 0, viewBox: "0 0 0 0", geometry: void 0 };
+    return {
+      svg: "<svg></svg>",
+      innerSvg: "",
+      width: 0,
+      height: 0,
+      viewBox: "0 0 0 0",
+      geometry: void 0
+    };
   }
   const coordinates = new Coordinates(rootContext, WidthProviderOnCanvas);
   const verticalCoordinates = new VerticalCoordinates(rootContext);
@@ -13145,14 +13389,41 @@ function renderToSvg(code, options) {
     coordinates,
     verticalCoordinates,
     title,
-    measureText: WidthProviderOnCanvas
+    measureText: WidthProviderOnCanvas,
+    enableNumbering: options?.enableNumbering
   });
-  return { ...composeSvg(geometry), geometry };
+  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 = [];
@@ -13202,14 +13473,13 @@ 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">${escXml(g.title)}</text>` : "";
+  const titleSvg = g.title ? `<text x="5" y="${headerLineDrawY / 2}" dominant-baseline="central" class="frame-title">${esc(g.title)}</text>` : "";
   const viewBox = `0 0 ${viewWidth} ${viewHeight}`;
   const defs = `<defs>
-  <style>${DEFAULT_THEME_STYLES}</style>
+  <style>${buildThemeStyles(resolvePalette(options?.theme))}</style>
 </defs>`;
   const frame = `${frameSvg}
 ${headerLineSvg}
@@ -13225,9 +13495,6 @@ ${innerSvg}
 </svg>`;
   return { svg, innerSvg, width: viewWidth, height: viewHeight, viewBox };
 }
-function escXml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
 
 function readVersion() {
   const pkgPath = resolve(import.meta.dir, "../../package.json");
@@ -13249,7 +13516,8 @@ Rendering:
   -o, --output <file>          Output file (use "-" for stdout; default: <input>.svg)
   -e, --outputFormat <format>  Output format: "svg" (default) or "png"
   -s, --scale <factor>         Pixel scale factor for PNG (default: 2; ignored for SVG)
-  -t, --theme <name>           Theme name passed to renderer (e.g. "theme-default")
+  -t, --theme <name>           Theme: default, mermaid, clean-light, clean-dark,
+                               neon (prefix "theme-"; unknown names use default)
   -c, --configFile <file>      JSON config file with { theme, scale, outputFormat }
   --md                         Markdown mode: render zenuml code blocks and produce output Markdown
 
@@ -13610,7 +13878,6 @@ async function checkOne(input) {
       errors: [{ line: 0, column: 0, msg: err.message }]
     };
   }
-  Parser.Errors.length = 0;
   Parser.ErrorDetails.length = 0;
   Parser.RootContext(code);
   const errors = Parser.ErrorDetails.map((e) => ({
@@ -13776,7 +14043,6 @@ async function main() {
 `);
       process.exit(1);
     }
-    Parser.Errors.length = 0;
     Parser.ErrorDetails.length = 0;
     const tree = Parser.RootContext(code);
     if (Parser.ErrorDetails.length > 0) {