@zenuml/core 4.2.1 → 4.3.0

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() {
+MessageContext.prototype.From = fromProvidedOrOrigin;
+function providedFromDirectFrom() {
   const fromCtx = this.from();
   return fromCtx?.name?.()?.getFormattedText?.() || fromCtx?.getFormattedText?.();
-};
-AsyncMessageContext.prototype.From = function() {
-  return this.ProvidedFrom() || this.ClosestAncestorStat()?.Origin();
-};
-ReturnAsyncMessageContext.prototype.ProvidedFrom = function() {
-  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;
@@ -9956,39 +9856,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 +9996,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 +10042,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 +10076,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 +10104,23 @@ 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;
+
 function getLocalParticipantNames(ctx) {
   if (!ctx) return [];
   return [ctx.Origin() || _STARTER_, ...Participants(ctx).Names()];
@@ -10677,7 +10551,7 @@ class MarkdownMeasurer {
       return 0;
     }
     const lines = _text.trim().split("\n");
-    return lines.length * 20;
+    return lines.length * COMMENT_LINE_HEIGHT;
   }
 }
 
@@ -10689,57 +10563,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 +10583,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 +10592,6 @@ class AsyncMessageStatementVM extends StatementVM {
   }
 }
 
-const CREATION_MESSAGE_HEIGHT = 40;
 class CreationStatementVM extends StatementVM {
   constructor(statement, creation, runtime) {
     super(statement, runtime);
@@ -10787,7 +10615,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 +10640,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;
@@ -10877,7 +10685,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 +10696,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,7 +10704,7 @@ 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;
     const block = this.fragment?.braceBlock?.()?.block?.();
@@ -10904,7 +10712,7 @@ class FragmentSingleBlockVM extends FragmentVM {
       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 +10721,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 +10800,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 +10822,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 +10858,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 +10899,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 +10910,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 +10929,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,6 +10949,10 @@ const setCache = (key, value, persist = false) => {
     persistDic[key] = value;
   }
 };
+const clearPersistentCache = () => {
+  persistDic = {};
+  dic = {};
+};
 
 const FONT_FAMILY = "Helvetica, Verdana, serif";
 const FONT_SIZE_PARTICIPANT = "16px";
@@ -11162,28 +10962,25 @@ function getFontSpec() {
 }
 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()}_${measured}_${type}`;
   const cacheValue = getCache(cacheKey);
   if (cacheValue != null) {
     return cacheValue;
@@ -11191,7 +10988,7 @@ function WidthProviderOnCanvas(text, type) {
   const ctx = getCanvasContext();
   if (!ctx) {
     const width2 = Math.ceil(measured.length * 16 * 0.6);
-    setCache(cacheKey, width2, true);
+    setCache(cacheKey, width2);
     return width2;
   }
   ctx.font = getFontSpec();
@@ -11199,7 +10996,10 @@ function WidthProviderOnCanvas(text, type) {
   setCache(cacheKey, width, true);
   return width;
 }
-const EMOJI_PATTERN = /[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}\u{FE00}-\u{FE0F}\u{200D}]/u;
+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) {
   if (typeof document === "undefined") return null;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -11218,7 +11018,8 @@ function measureTextWithFont(text, fontSize) {
   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}`;
   const cacheValue = getCache(cacheKey);
   if (cacheValue != null) {
     return cacheValue;
@@ -11234,10 +11035,10 @@ 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}`;
+  ctx.font = font;
   const width = ctx.measureText(measured).width;
   setCache(cacheKey, width, true);
   return width;
@@ -11358,22 +11159,42 @@ 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 */)
   };
 }
 
+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 +11213,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 +11317,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 +11368,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,7 +11384,7 @@ 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) {
@@ -11568,7 +11401,9 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
         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,
+        innerLabelWidth: /^\[\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 +11414,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 +11430,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 +11445,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;
@@ -11639,7 +11478,9 @@ function buildFragmentGeometry(info, coord, coordinates, verticalCoordinates, al
       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 +11489,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 +11501,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 +11538,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 +11576,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 +11601,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 +11640,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);
@@ -11765,12 +11695,19 @@ 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?.();
@@ -11787,16 +11724,25 @@ function extractFragmentInfo(stat) {
     const sections = [];
     const ifBlock = alt.ifBlock?.();
     if (ifBlock) {
-      sections.push({ label: "Alt", blockNode: ifBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "Alt",
+        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: `[ ${label} ]`,
+        blockNode: elseIf.braceBlock?.()?.block?.()
+      });
     }
     const elseBlock = alt.elseBlock?.();
     if (elseBlock) {
-      sections.push({ label: "[else]", blockNode: elseBlock.braceBlock?.()?.block?.() });
+      sections.push({
+        label: "[else]",
+        blockNode: elseBlock.braceBlock?.()?.block?.()
+      });
     }
     const ifCondition = alt.ifBlock?.()?.parExpr?.()?.condition?.();
     const firstLabel = ifCondition?.getFormattedText?.() || "";
@@ -11807,15 +11753,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 +11782,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 +11813,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 +11848,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 +11870,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 +11905,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 +11945,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 +12028,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 +12043,6 @@ function computeReturnDebt(statements, verticalCoordinates, returnHeight) {
       }
     }
   }
-  result.set("__totalDebt__", debtByDepth[0] || 0);
   return result;
 }
 
@@ -12059,7 +12070,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 +12090,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 +12103,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 +12199,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 +12226,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 +12243,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 +12265,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 +12287,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 +12316,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 +12341,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) {
@@ -12384,17 +12401,7 @@ function buildGeometry(input) {
     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;
+  let diagramWidth = TotalWidth(rootContext, coordinates) - frameBorder.left - frameBorder.right;
   if (measureText) {
     const LABEL_PAD = 10;
     for (const msg of messages) {
@@ -12732,7 +12739,7 @@ function renderOccurrence(o) {
   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)}"/>`;
 }
 
-const HEADER_HEIGHT = 25;
+const HEADER_HEIGHT = DEFAULT_LAYOUT_METRICS.fragmentHeaderHeight;
 const BRACKET_WIDTH = 3.89;
 const TEXT_PAD_X = 4;
 const STROKE_WIDTH = 1;
@@ -13093,47 +13100,153 @@ 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: 16px; font-weight: 600; fill: ${p.titleText}; }
+  .participant-box { fill: ${p.participantBg}; stroke: ${p.participantBorder}; stroke-width: 2; }
+  .participant-label { font-family: ${p.fontFamily}; font-size: 16px; fill: ${p.participantText}; }
+  .participant-icon { color: ${p.participantText}; }
+  .participant-icon [fill="currentColor"]:not([stroke]) { stroke: ${p.participantBorder}; stroke-width: 1; }
+  .lifeline { stroke: ${p.participantBorder}; stroke-width: 1; }
+  .message-line { stroke: ${p.messageArrow}; stroke-width: 2; shape-rendering: crispEdges; }
+  .message-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.messageText}; }
+  .arrow-head { fill: ${p.messageArrow}; stroke: ${p.messageArrow}; stroke-width: 2; }
   .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: 2; shape-rendering: crispEdges; }
+  .fragment-border { fill: none; stroke: ${p.fragmentBorder}; stroke-width: 1; shape-rendering: crispEdges; }
+  .fragment-header { fill: ${p.fragmentHeaderBg}; fill-opacity: ${p.fragmentHeaderOpacity}; stroke: none; shape-rendering: crispEdges; }
+  .fragment-label { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 600; fill: ${p.fragmentText}; }
+  .fragment-condition { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
+  .fragment-separator { stroke: ${p.fragmentSeparator}; stroke-width: 1; shape-rendering: crispEdges; }
+  .fragment-section-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
+  .return-line { stroke: ${p.messageArrow}; stroke-width: 2; stroke-dasharray: 6,4; shape-rendering: crispEdges; }
+  .return-arrow { stroke: ${p.messageArrow}; stroke-width: 2; fill: none; }
+  .return-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.messageText}; }
+  .return-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; }
+  .seq-number { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 100; fill: #6b7280; }
+  .group-outline { fill: none; stroke: ${p.participantBorder}; }
+  .group-title-bg { fill: ${p.frameBg}; stroke: none; }
+  .group-title-text { font-family: ${p.fontFamily}; font-size: 13px; font-weight: 400; fill: ${p.participantText}; }
 `;
+}
+
+const FRAME_HEADER_HEIGHT = 28;
+const FRAME_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);
@@ -13147,7 +13260,7 @@ function renderToSvg(code, options) {
     title,
     measureText: WidthProviderOnCanvas
   });
-  return { ...composeSvg(geometry), geometry };
+  return { ...composeSvg(geometry, options), geometry };
 }
 function composeSvg(g, options) {
   const padding = 10;
@@ -13206,10 +13319,10 @@ function composeSvg(g, options) {
   const headerLineY = headerH + contentPaddingTop;
   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 +13338,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 +13359,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 +13721,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 +13886,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) {