npm - @zenuml/core - Versions diffs - 4.2.0 → 4.3.0 - Mend

@zenuml/core 4.2.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/cli/zenuml.mjs +711 -771
package/dist/parser/index.cjs +2 -2
package/dist/parser/index.mjs +1181 -1255
package/dist/zenuml.esm.mjs +16924 -20126
package/dist/zenuml.js +613 -741
package/package.json +1 -13
package/types/index.d.ts +24 -5
package/types/svg.d.ts +0 -4

package/dist/cli/zenuml.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 #!/usr/bin/env bun
 import antlr4 from 'antlr4';
 import { marked } from 'marked';
-import { mkdirSync, writeFileSync, readFileSync, statSync, watch } from 'node:fs';
-import { resolve, dirname, extname, basename, join } from 'node:path';
+import { readFileSync, statSync, mkdirSync, writeFileSync, watch } from 'node:fs';
+import { resolve, join, dirname, basename, extname } from 'node:path';
 // Generated from java-escape by ANTLR 4.11.1
 // jshint ignore: start
@@ -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;
@@ -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,14 +10685,26 @@ class FragmentAltVM extends FragmentVM {
   }
 }
-class FragmentSingleBlockVM extends FragmentVM {
-  constructor(statement, fragment, runtime) {
+class FragmentRefVM extends StatementVM {
+  kind = "ref";
+  measure(top) {
+    const context = this.context?.ref?.() || this.context;
+    const commentHeight = this.measureComment(context);
+    const headerHeight = this.metrics.fragmentHeaderHeight;
+    const height = commentHeight + headerHeight + this.metrics.fragmentPaddingBottom;
+    return { top, height, kind: this.kind };
+  }
+}
+class FragmentSingleBlockVM extends StatementVM {
+  constructor(statement, fragment, runtime, kind) {
     super(statement, runtime);
     this.fragment = fragment;
+    this.kind = kind;
   }
   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?.();
@@ -10892,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,
@@ -10901,38 +10721,7 @@ class FragmentSingleBlockVM extends FragmentVM {
   }
 }
-class FragmentCriticalVM extends FragmentSingleBlockVM {
-  kind = "critical";
-}
-class FragmentLoopVM extends FragmentSingleBlockVM {
-  kind = "loop";
-}
-class FragmentOptVM extends FragmentSingleBlockVM {
-  kind = "opt";
-}
-class FragmentParVM extends FragmentSingleBlockVM {
-  kind = "par";
-}
-class FragmentRefVM extends FragmentVM {
-  kind = "ref";
-  measure(top) {
-    const context = this.context?.ref?.() || this.context;
-    const commentHeight = this.measureComment(context);
-    const headerHeight = this.metrics.fragmentHeaderHeight;
-    const height = commentHeight + headerHeight + this.metrics.fragmentPaddingBottom;
-    return { top, height, kind: this.kind };
-  }
-}
-class FragmentSectionVM extends FragmentSingleBlockVM {
-  kind = "section";
-}
-class FragmentTryCatchVM extends FragmentVM {
+class FragmentTryCatchVM extends StatementVM {
   constructor(statement, tcf, runtime) {
     super(statement, runtime);
     this.tcf = tcf;
@@ -11011,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);
@@ -11025,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;
@@ -11061,25 +10858,11 @@ const createStatementVM = (statement, runtime) => {
   if (statement.divider?.()) {
     return new DividerStatementVM(statement, runtime);
   }
-  const loop = statement.loop?.();
-  if (loop) {
-    return new FragmentLoopVM(statement, loop, runtime);
-  }
-  const opt = statement.opt?.();
-  if (opt) {
-    return new FragmentOptVM(statement, opt, runtime);
-  }
-  const par = statement.par?.();
-  if (par) {
-    return new FragmentParVM(statement, par, runtime);
-  }
-  const section = statement.section?.();
-  if (section) {
-    return new FragmentSectionVM(statement, section, runtime);
-  }
-  const critical = statement.critical?.();
-  if (critical) {
-    return new FragmentCriticalVM(statement, critical, runtime);
+  for (const kind of SINGLE_BLOCK_FRAGMENT_KINDS) {
+    const fragment = statement[kind]?.();
+    if (fragment) {
+      return new FragmentSingleBlockVM(statement, fragment, runtime, kind);
+    }
   }
   const tcf = statement.tcf?.();
   if (tcf) {
@@ -11116,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();
@@ -11138,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);
       }
     };
@@ -11160,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];
@@ -11186,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";
@@ -11195,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;
@@ -11224,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();
@@ -11232,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");
@@ -11251,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;
@@ -11267,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;
@@ -11391,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;
@@ -11425,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);
     }
@@ -11521,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);
@@ -11562,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;
@@ -11584,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) {
@@ -11601,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("[")) {
@@ -11612,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;
         })(),
@@ -11626,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;
         })()
@@ -11639,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;
@@ -11672,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
@@ -11681,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;
   }
@@ -11693,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) {
@@ -11734,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;
     }
@@ -11746,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?.();
@@ -11756,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;
     }
@@ -11770,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);
@@ -11798,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?.();
@@ -11820,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?.() || "";
@@ -11840,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 };
   }
@@ -11860,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;
     }
   }
@@ -11878,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);
@@ -11895,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);
       }
@@ -11909,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);
@@ -11926,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);
       }
@@ -11958,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();
@@ -12045,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();
@@ -12064,7 +12043,6 @@ function computeReturnDebt(statements, verticalCoordinates, returnHeight) {
       }
     }
   }
-  result.set("__totalDebt__", debtByDepth[0] || 0);
   return result;
 }
@@ -12092,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;
@@ -12108,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;
@@ -12121,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,
@@ -12216,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,
@@ -12244,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
@@ -12261,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;
@@ -12283,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,
@@ -12305,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({
@@ -12346,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;
     }
@@ -12369,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) {
@@ -12417,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) {
@@ -12765,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;
@@ -13126,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);
@@ -13180,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;
@@ -13239,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}
@@ -13258,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");
@@ -13282,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
@@ -13643,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) => ({
@@ -13657,6 +13734,69 @@ async function checkOne(input) {
     errors
   };
 }
+async function renderMarkdownFile(inputArg, args, config) {
+  const mdContent = await readCode(inputArg);
+  const effectiveFormat = args.outputFormat ?? config.configOutputFormat ?? "svg";
+  if (effectiveFormat !== "svg" && effectiveFormat !== "png") {
+    throw new Error(
+      `Unsupported output format: "${effectiveFormat}". Use "svg" or "png".`
+    );
+  }
+  const inputPath = inputArg === "-" ? void 0 : resolve(inputArg);
+  const outputPath = args.output === "-" ? "-" : args.output ? resolve(args.output) : inputPath ? join(
+    dirname(inputPath),
+    `${basename(inputArg, extname(inputArg))}-rendered.md`
+  ) : "-";
+  const imageDir = outputPath !== "-" ? dirname(outputPath) : inputPath ? dirname(inputPath) : process.cwd();
+  const imageStem = inputPath ? basename(inputArg, extname(inputArg)) : outputPath !== "-" ? basename(outputPath, extname(outputPath)) : "diagram";
+  const renderOptions = {};
+  const effectiveTheme = args.theme ?? config.configTheme;
+  if (effectiveTheme) {
+    renderOptions.theme = effectiveTheme;
+  }
+  const blocks = extractZenumlBlocks(mdContent);
+  const imageFiles = /* @__PURE__ */ new Map();
+  for (const block of blocks) {
+    if (block.empty) continue;
+    const imageFilename = `${imageStem}-zenuml-${block.index}.${effectiveFormat}`;
+    const imageFilePath = join(imageDir, imageFilename);
+    let result;
+    try {
+      result = renderToSvg(block.code, renderOptions);
+    } catch (err) {
+      throw new Error(
+        `Failed to render zenuml block ${block.index}: ${err.message}`
+      );
+    }
+    mkdirSync(imageDir, { recursive: true });
+    const image = effectiveFormat === "png" ? await rasterizeToPng(
+      result.svg,
+      result.width,
+      result.height,
+      args.scale ?? config.configScale ?? 2
+    ) : result.svg;
+    writeFileSync(imageFilePath, image);
+    imageFiles.set(block.index, imageFilename);
+    if (!args.quiet && !args.watch) {
+      process.stderr.write(`Wrote ${imageFilePath}
+`);
+    }
+  }
+  const outputMd = [...blocks].reverse().reduce((markdown, block) => {
+    const replacement = block.empty ? "" : `![${block.title || `diagram ${block.index + 1}`}](${imageFiles.get(block.index)})`;
+    return markdown.replace(block.raw, replacement);
+  }, mdContent);
+  if (outputPath === "-") {
+    process.stdout.write(outputMd);
+    return;
+  }
+  mkdirSync(dirname(outputPath), { recursive: true });
+  writeFileSync(outputPath, outputMd, "utf-8");
+  if (!args.quiet && !args.watch) {
+    process.stderr.write(`Wrote ${outputPath}
+`);
+  }
+}
 async function main() {
   if (!globalThis.OffscreenCanvas && typeof document === "undefined") {
     try {
@@ -13746,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) {
@@ -13760,146 +13899,6 @@ async function main() {
     process.stdout.write(JSON.stringify(ast, null, 2) + "\n");
     process.exit(0);
   }
-  const isMdMode = args.md || expandedInputs.some((f) => f !== "-" && /\.(?:md|markdown)$/i.test(f));
-  if (isMdMode) {
-    if (expandedInputs.length > 1) {
-      process.stderr.write(
-        "Error: --md mode supports only a single input file.\n"
-      );
-      process.exit(1);
-    }
-    const inputArg = expandedInputs[0];
-    if (args.md && inputArg !== "-") {
-      const ext = extname(inputArg).toLowerCase();
-      if (ext !== ".md" && ext !== ".markdown") {
-        process.stderr.write(
-          `Error: --md flag requires a .md or .markdown input file, got: ${inputArg}
-`
-        );
-        process.exit(1);
-      }
-    }
-    let mdContent;
-    try {
-      mdContent = await readCode(inputArg);
-    } catch (err) {
-      process.stderr.write(`Error: ${err.message}
-`);
-      process.exit(1);
-    }
-    const effectiveFormat = args.outputFormat ?? "svg";
-    if (effectiveFormat !== "svg" && effectiveFormat !== "png") {
-      process.stderr.write(
-        `Error: Unsupported output format: "${effectiveFormat}". Use "svg" or "png".
-`
-      );
-      process.exit(1);
-    }
-    let imageDir;
-    let mdOutputPath;
-    if (args.output && args.output !== "-") {
-      const resolvedOutput = resolve(args.output);
-      imageDir = dirname(resolvedOutput);
-      mdOutputPath = resolvedOutput;
-    } else if (args.output === "-") {
-      if (inputArg !== "-") {
-        imageDir = dirname(resolve(inputArg));
-      } else {
-        imageDir = process.cwd();
-      }
-      mdOutputPath = "-";
-    } else {
-      if (inputArg !== "-") {
-        const resolvedInput = resolve(inputArg);
-        const inputDir = dirname(resolvedInput);
-        const ext = extname(inputArg);
-        const stem = basename(inputArg, ext);
-        imageDir = inputDir;
-        mdOutputPath = join(inputDir, `${stem}-rendered.md`);
-      } else {
-        imageDir = process.cwd();
-        mdOutputPath = "-";
-      }
-    }
-    let imageStem;
-    if (inputArg !== "-") {
-      const ext = extname(inputArg);
-      imageStem = basename(inputArg, ext);
-    } else if (mdOutputPath !== "-") {
-      const ext = extname(mdOutputPath);
-      imageStem = basename(mdOutputPath, ext);
-    } else {
-      imageStem = "diagram";
-    }
-    const blocks = extractZenumlBlocks(mdContent);
-    const effectiveScale = args.scale ?? 2;
-    const effectiveTheme = args.theme;
-    const renderOptions = {};
-    if (effectiveTheme) {
-      renderOptions.theme = effectiveTheme;
-    }
-    const imageFiles = /* @__PURE__ */ new Map();
-    for (const block of blocks) {
-      if (block.empty) continue;
-      const imageFilename = `${imageStem}-zenuml-${block.index}.${effectiveFormat}`;
-      const imageFilePath = join(imageDir, imageFilename);
-      let svg;
-      let svgWidth;
-      let svgHeight;
-      try {
-        const result = renderToSvg(block.code, renderOptions);
-        svg = result.svg;
-        svgWidth = result.width;
-        svgHeight = result.height;
-      } catch (err) {
-        process.stderr.write(
-          `Error: Failed to render zenuml block ${block.index}: ${err.message}
-`
-        );
-        process.exit(1);
-      }
-      mkdirSync(imageDir, { recursive: true });
-      if (effectiveFormat === "png") {
-        const pngBuffer = await rasterizeToPng(
-          svg,
-          svgWidth,
-          svgHeight,
-          effectiveScale
-        );
-        writeFileSync(imageFilePath, pngBuffer);
-      } else {
-        writeFileSync(imageFilePath, svg, "utf-8");
-      }
-      if (!args.quiet) {
-        process.stderr.write(`Wrote ${imageFilePath}
-`);
-      }
-      imageFiles.set(block.index, imageFilename);
-    }
-    let outputMd = mdContent;
-    const sortedBlocks = [...blocks].reverse();
-    for (const block of sortedBlocks) {
-      const altText = block.title || `diagram ${block.index + 1}`;
-      if (block.empty) {
-        outputMd = outputMd.replace(block.raw, "");
-      } else {
-        const imageFilename = imageFiles.get(block.index);
-        const replacement = `![${altText}](${imageFilename})`;
-        outputMd = outputMd.replace(block.raw, replacement);
-      }
-    }
-    if (mdOutputPath === "-") {
-      process.stdout.write(outputMd);
-    } else {
-      mkdirSync(dirname(mdOutputPath), { recursive: true });
-      writeFileSync(mdOutputPath, outputMd, "utf-8");
-      if (!args.quiet) {
-        process.stderr.write(`Wrote ${mdOutputPath}
-`);
-      }
-    }
-    process.exit(0);
-  }
   let configScale;
   let configTheme;
   let configOutputFormat;
@@ -13917,99 +13916,30 @@ async function main() {
     );
     process.exit(1);
   }
-  if (args.watch) {
-    const renderForWatch = async (inputArg) => {
-      await renderOneFile(inputArg, args, {
-        configScale,
-        configTheme,
-        configOutputFormat});
-    };
-    const renderMdForWatch = async (inputArg) => {
-      let mdContent;
-      try {
-        mdContent = readFileSync(resolve(inputArg), "utf-8");
-      } catch {
-        throw new Error(`Cannot read input file: ${resolve(inputArg)}`);
-      }
-      const effectiveFormat = args.outputFormat ?? "svg";
-      if (effectiveFormat !== "svg" && effectiveFormat !== "png") {
-        throw new Error(
-          `Unsupported output format: "${effectiveFormat}". Use "svg" or "png".`
-        );
-      }
-      let mdOutputPath;
-      let imageDir;
-      if (args.output && args.output !== "-") {
-        const resolvedOutput = resolve(args.output);
-        imageDir = dirname(resolvedOutput);
-        mdOutputPath = resolvedOutput;
-      } else if (args.output === "-") {
-        imageDir = dirname(resolve(inputArg));
-        mdOutputPath = "-";
-      } else {
-        const resolvedInput = resolve(inputArg);
-        const inputDir = dirname(resolvedInput);
-        const ext2 = extname(inputArg);
-        const stem = basename(inputArg, ext2);
-        imageDir = inputDir;
-        mdOutputPath = join(inputDir, `${stem}-rendered.md`);
-      }
-      const ext = extname(inputArg);
-      const imageStem = basename(inputArg, ext);
-      const blocks = extractZenumlBlocks(mdContent);
-      const effectiveScale = args.scale ?? configScale ?? 2;
-      const imageFiles = /* @__PURE__ */ new Map();
-      for (const block of blocks) {
-        if (block.empty) continue;
-        const imageFilename = `${imageStem}-zenuml-${block.index}.${effectiveFormat}`;
-        const imageFilePath = join(imageDir, imageFilename);
-        const result = renderToSvg(block.code);
-        const { svg, width: svgWidth, height: svgHeight } = result;
-        mkdirSync(imageDir, { recursive: true });
-        if (effectiveFormat === "png") {
-          const pngBuffer = await rasterizeToPng(
-            svg,
-            svgWidth,
-            svgHeight,
-            effectiveScale
-          );
-          writeFileSync(imageFilePath, pngBuffer);
-        } else {
-          writeFileSync(imageFilePath, svg, "utf-8");
-        }
-        imageFiles.set(block.index, imageFilename);
-      }
-      let outputMd = mdContent;
-      const sortedBlocks = [...blocks].reverse();
-      for (const block of sortedBlocks) {
-        const altText = block.title || `diagram ${block.index + 1}`;
-        if (block.empty) {
-          outputMd = outputMd.replace(block.raw, "");
-        } else {
-          const imageFilename = imageFiles.get(block.index);
-          const replacement = `![${altText}](${imageFilename})`;
-          outputMd = outputMd.replace(block.raw, replacement);
-        }
-      }
-      if (mdOutputPath === "-") {
-        process.stdout.write(outputMd);
-      } else {
-        mkdirSync(dirname(mdOutputPath), { recursive: true });
-        writeFileSync(mdOutputPath, outputMd, "utf-8");
-      }
-    };
-    const hasMdInputs = expandedInputs.some(
-      (f) => /\.(?:md|markdown)$/i.test(f)
+  const config = {
+    configScale,
+    configTheme,
+    configOutputFormat,
+    multipleInputs
+  };
+  const isMdMode = args.md || expandedInputs.some((f) => f !== "-" && /\.(?:md|markdown)$/i.test(f));
+  if (isMdMode && multipleInputs) {
+    process.stderr.write(
+      "Error: --md mode supports only a single input file.\n"
     );
-    const renderMdFnForWatch = hasMdInputs ? renderMdForWatch : void 0;
-    const watchHandle = await startWatchMode(
-      expandedInputs,
-      renderForWatch,
-      void 0,
-      void 0,
-      void 0,
-      renderMdFnForWatch
+    process.exit(1);
+  }
+  const inputArg = expandedInputs[0];
+  if (args.md && inputArg !== "-" && !/\.(?:md|markdown)$/i.test(inputArg)) {
+    process.stderr.write(
+      `Error: --md flag requires a .md or .markdown input file, got: ${inputArg}
+`
     );
+    process.exit(1);
+  }
+  if (args.watch) {
+    const renderForWatch = (input) => isMdMode ? renderMarkdownFile(input, args, config) : renderOneFile(input, args, config);
+    const watchHandle = await startWatchMode(expandedInputs, renderForWatch);
     process.on("SIGINT", () => {
       watchHandle.shutdown();
       process.exit(0);
@@ -14018,16 +13948,26 @@ async function main() {
     });
     return;
   }
+  if (isMdMode) {
+    try {
+      await renderMarkdownFile(inputArg, args, config);
+      process.exit(0);
+    } catch (err) {
+      process.stderr.write(`Error: ${err.message}
+`);
+      process.exit(1);
+    }
+  }
   let rendered = 0;
   let errors = 0;
-  for (const inputArg of expandedInputs) {
+  for (const inputArg2 of expandedInputs) {
     if (!args.quiet) {
-      const displayName = inputArg === "-" ? "<stdin>" : inputArg;
+      const displayName = inputArg2 === "-" ? "<stdin>" : inputArg2;
       process.stderr.write(`Rendering ${displayName}...
 `);
     }
     try {
-      await renderOneFile(inputArg, args, {
+      await renderOneFile(inputArg2, args, {
         configScale,
         configTheme,
         configOutputFormat,
@@ -14036,7 +13976,7 @@ async function main() {
       rendered++;
     } catch (err) {
       errors++;
-      process.stderr.write(`Error: ${inputArg}: ${err.message}
+      process.stderr.write(`Error: ${inputArg2}: ${err.message}
 `);
     }
   }