@zenuml/core 4.7.1 → 4.8.0

package/dist/cli/zenuml.mjs

@@ -12820,7 +12820,8 @@ function renderParticipant(p) {
     const stereoX = icon && p.labelWidth != null ? textX + p.labelWidth / 2 : p.x;
     const stereoAnchor = "middle";
     const stereoY = textY - STEREOTYPE_VERTICAL_OFFSET;
-    stereotypeSvg = `<text x="${stereoX}" y="${stereoY}" text-anchor="${stereoAnchor}" dominant-baseline="central" class="stereotype-label" font-size="${STEREOTYPE_FONT_SIZE}"${participantTextStyle()}>${esc("«" + p.stereotype + "»")}</text>`;
+    const { textStyle: stereoTextStyle } = colorAttrs(p.color);
+    stereotypeSvg = `<text x="${stereoX}" y="${stereoY}" text-anchor="${stereoAnchor}" dominant-baseline="central" class="stereotype-label" font-size="${STEREOTYPE_FONT_SIZE}"${stereoTextStyle}>${esc("«" + p.stereotype + "»")}</text>`;
   }
   const useTextLength = p.labelWidth != null && p.name.includes(":");
   const textLengthAttr = useTextLength ? ` textLength="${p.labelWidth}" lengthAdjust="spacing"` : "";
@@ -12919,15 +12920,15 @@ function renderSelfCall(s) {
   const svgY = s.y + (isAsync ? 20 : 14);
   const pathEnd = isAsync ? "L1,15" : "L14,15";
   const arrowTx = isAsync ? 0 : 7;
-  const arrowFill = isAsync ? "none" : "#000";
+  const arrowFill = isAsync ? ' fill="none"' : "";
   const arrowPath = isAsync ? "M1 1.25 L6.15 4.5 L1 7.75" : "M1 1.25 L6.15 4.5 L1 7.75 Z";
   return `<g class="message self-call">
   <svg x="${svgX}" y="${svgY}" width="30" height="24">
-    <path d="M0,2 L26,2 Q28,2 28,4 L28,13 Q28,15 26,15 ${pathEnd}" fill="none" stroke="#000" stroke-width="1"/>
+    <path d="M0,2 L26,2 Q28,2 28,4 L28,13 Q28,15 26,15 ${pathEnd}" class="self-call-line"/>
     <g transform="translate(${arrowTx}, 10)">
-      <svg height="10" width="7" viewBox="0 0 7 9">
+      <svg height="10" width="7" viewBox="0 0 7 9" class="arrow-head${isAsync ? " arrow-open" : ""}">
         <g transform="scale(-1, 1) translate(-7, 0)">
-          <path d="${arrowPath}" stroke="#000" stroke-linecap="round" fill="${arrowFill}" stroke-width="1"/>
+          <path d="${arrowPath}" stroke-linecap="round"${arrowFill} stroke-width="1"/>
         </g>
       </svg>
     </g>
@@ -12945,7 +12946,7 @@ function renderArrowHead(tipX, tipY, pointsLeft, style) {
   const rtlTransform = pointsLeft ? ' transform="scale(-1, 1) translate(-7, 0)"' : "";
   return `<svg x="${svgX}" y="${svgY}" width="7" height="10" viewBox="0 0 7 9" overflow="visible" class="arrow-head${isFilled ? "" : " arrow-open"}">
     <g${rtlTransform}>
-      <path d="${pathD}" transform="translate(1 0.5)" stroke="#000" stroke-linecap="round" stroke-width="1" fill="${fillAttr}"/>
+      <path d="${pathD}" transform="translate(1 0.5)" stroke-linecap="round" stroke-width="1"${fillAttr === "none" ? ' fill="none"' : ""}/>
     </g>
   </svg>`;
 }
@@ -12984,7 +12985,7 @@ function renderFragment(f) {
     const numberX = numberBoxX + NUMBER_PAD_X;
     parts.push(
       `<rect x="${numberBoxX}" y="${headerY + (HEADER_HEIGHT - 1 - 16) / 2}" width="${numberWidth + NUMBER_PAD_X * 2}" height="16" rx="2" class="fragment-number-bg"/>`,
-      `<text x="${numberX}" y="${titleY - NUMBER_OPTICAL_LIFT}" dominant-baseline="central" class="seq-number">${esc(f.number)}</text>`
+      `<text x="${numberX}" y="${titleY - NUMBER_OPTICAL_LIFT}" dominant-baseline="central" class="seq-number fragment-number">${esc(f.number)}</text>`
     );
   }
   const iconX = headerX + 4 + numberInset;
@@ -13048,7 +13049,7 @@ function renderFragment(f) {
           const conditionX = keywordX + keywordWidth + TEXT_PAD_X * 2;
           const bgWidth = keywordWidth + (section.detailWidth ?? condition.length * 7) + TEXT_PAD_X * 4;
           parts.push(
-            `<g opacity="0.65"><rect x="${keywordX - TEXT_PAD_X}" y="${lineY + 1}" width="${bgWidth}" height="20" fill="#fff"/><text x="${keywordX}" y="${labelY2}" class="fragment-section-label fragment-section-keyword" fill="#222">${esc(keyword)}</text><text x="${conditionX}" y="${labelY2}" class="fragment-section-label" fill="#222">${esc(condition)}</text></g>`
+            `<g class="fragment-section-dim"><rect x="${keywordX - TEXT_PAD_X}" y="${lineY + 1}" width="${bgWidth}" height="20" class="fragment-section-bg"/><text x="${keywordX}" y="${labelY2}" class="fragment-section-label fragment-section-keyword">${esc(keyword)}</text><text x="${conditionX}" y="${labelY2}" class="fragment-section-label">${esc(condition)}</text></g>`
           );
         } else {
           const finallyX = f.x + 5;
@@ -13063,7 +13064,7 @@ function renderFragment(f) {
           const bgY = lineY + 1;
           const bgHeight = 20;
           parts.push(
-            `<g opacity="0.65"><rect x="${finallyX - TEXT_PAD_X}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" fill="#fff"/><text x="${finallyX}" y="${finallyY}" class="fragment-section-label fragment-section-keyword">${esc(section.label)}</text></g>`
+            `<g class="fragment-section-dim"><rect x="${finallyX - TEXT_PAD_X}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" class="fragment-section-bg"/><text x="${finallyX}" y="${finallyY}" class="fragment-section-label fragment-section-keyword">${esc(section.label)}</text></g>`
           );
         }
       }
@@ -13077,48 +13078,48 @@ function renderGuardRow(x, rowY, innerText, keyword) {
   const baseline = rowY + 19;
   const textX = x + 4;
   const conditionX = textX + (keyword ? measureTextWithFont(keyword, "12px", "all-small-caps") + 4 : 0);
-  return `<g class="guard-row">` + (keyword ? `<text x="${textX}" y="${baseline}" class="guard-keyword">${esc(keyword)}</text>` : "") + (innerText ? `<text x="${conditionX}" y="${baseline}" class="fragment-condition" opacity="0.65">${esc(resolveEmojiInText(innerText))}</text>` : "") + `</g>`;
+  return `<g class="guard-row">` + (keyword ? `<text x="${textX}" y="${baseline}" class="guard-keyword">${esc(keyword)}</text>` : "") + (innerText ? `<text x="${conditionX}" y="${baseline}" class="fragment-condition">${esc(resolveEmojiInText(innerText))}</text>` : "") + `</g>`;
 }
 function getFragmentIcon(kind, x, y) {
   const w = 20;
   const h = 24;
   switch (kind) {
     case "loop":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 1024 1024" fill="#000" stroke="none">
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 1024 1024" class="fragment-icon" fill="currentColor" stroke="none">
       <path d="M960 101.84l-896.002.002c-35.344 0-64 28.656-64 64v576c0 35.36 28.656 64 64 64h160c20.496 0 32-26.32 32-31.984v-.016c0-5.824-10.88-32.416-32-32.416h-120.96c-21.376 0-38.72-17.344-38.72-38.72V206.002c0-21.391 17.328-38.72 38.72-38.72l818.272-1.007c21.376 0 38.72 17.328 38.72 38.72V702.69c0 21.376-17.344 38.72-38.72 38.72H518.142l75.984-68.912c9.344-8.944 12.369-23.408 3.025-32.336l-5.472-8.064c-9.376-8.945-24.496-8.945-33.84 0L428.111 750.53c-.192.16-.368.224-.528.368l-8.48 8.096c-4.672 4.431-7.008 10.335-6.976 16.223-.032 5.904 2.288 11.777 6.977 16.288l8.48 8.096c.16.16.368.192.528.336L555.84 915.44c9.344 8.944 24.464 8.944 33.84 0l5.472-8.065c9.344-8.944 6.32-23.44-3.025-32.368l-77.135-69.168H960c35.343 0 64-28.64 64-64v-576c0-35.344-28.657-64-64-64z"/>
     </svg>`;
     case "opt":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none">
-      <circle cx="12" cy="12" r="7" stroke="#000" stroke-width="1.5" stroke-dasharray="3 2" stroke-linecap="round"/>
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" class="fragment-icon" fill="none">
+      <circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 2" stroke-linecap="round"/>
     </svg>`;
     case "par":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none">
-      <path d="M5 10H19" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M5 14H19" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" class="fragment-icon" fill="none">
+      <path d="M5 10H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M5 14H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`;
     case "critical":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none">
-      <path d="M12 5L19 12L12 19L5 12L12 5Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M12 9V13" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M12 15V15.5" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" class="fragment-icon" fill="none">
+      <path d="M12 5L19 12L12 19L5 12L12 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12 9V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12 15V15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`;
     case "tcf":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 3 76 76" fill="#000" stroke="none">
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 3 76 76" class="fragment-icon" fill="currentColor" stroke="none">
       <path d="M 26,22.0001L 27,21.9998L 27,27L 26.0001,27.0003C 23.2386,27.0003 21.0001,29.2389 21.0001,32.0003L 21,46.0002C 21,48.7616 23.2386,51.0002 25.9999,51.0002L 27,51.0002L 27,47L 33.75,53.5L 27,60L 27,56L 26,56C 20.4771,56 16,51.5229 16,46L 16,32.0001C 16,26.4773 20.4771,22.0001 26,22.0001 Z M 33,27L 59,27L 59,32L 33,32L 33,27 Z M 36,35L 59,35L 59,40L 36,40L 36,35 Z M 33,43L 59,43L 59,48L 33,48L 33,43 Z"/>
     </svg>`;
     case "ref":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none">
-      <path d="M10 6H18C19.1046 6 20 6.89543 20 8V16C20 17.1046 19.1046 18 18 18H10" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      <path d="M10 6L6 12L10 18" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" class="fragment-icon" fill="none">
+      <path d="M10 6H18C19.1046 6 20 6.89543 20 8V16C20 17.1046 19.1046 18 18 18H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M10 6L6 12L10 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`;
     case "section":
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 15 15" fill="#000" stroke="none">
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 15 15" class="fragment-icon" fill="currentColor" stroke="none">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1.5C2 1.77614 1.77614 2 1.5 2C1.22386 2 1 1.77614 1 1.5C1 1.22386 1.22386 1 1.5 1C1.77614 1 2 1.22386 2 1.5ZM2 5L2 10H13V5H2ZM2 4C1.44772 4 1 4.44772 1 5V10C1 10.5523 1.44772 11 2 11H13C13.5523 11 14 10.5523 14 10V5C14 4.44772 13.5523 4 13 4H2ZM1.5 14C1.77614 14 2 13.7761 2 13.5C2 13.2239 1.77614 13 1.5 13C1.22386 13 1 13.2239 1 13.5C1 13.7761 1.22386 14 1.5 14ZM4 1.5C4 1.77614 3.77614 2 3.5 2C3.22386 2 3 1.77614 3 1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5ZM3.5 14C3.77614 14 4 13.7761 4 13.5C4 13.2239 3.77614 13 3.5 13C3.22386 13 3 13.2239 3 13.5C3 13.7761 3.22386 14 3.5 14ZM6 1.5C6 1.77614 5.77614 2 5.5 2C5.22386 2 5 1.77614 5 1.5C5 1.22386 5.22386 1 5.5 1C5.77614 1 6 1.22386 6 1.5ZM5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14ZM8 1.5C8 1.77614 7.77614 2 7.5 2C7.22386 2 7 1.77614 7 1.5C7 1.22386 7.22386 1 7.5 1C7.77614 1 8 1.22386 8 1.5ZM7.5 14C7.77614 14 8 13.7761 8 13.5C8 13.2239 7.77614 13 7.5 13C7.22386 13 7 13.2239 7 13.5C7 13.7761 7.22386 14 7.5 14ZM10 1.5C10 1.77614 9.77614 2 9.5 2C9.22386 2 9 1.77614 9 1.5C9 1.22386 9.22386 1 9.5 1C9.77614 1 10 1.22386 10 1.5ZM9.5 14C9.77614 14 10 13.7761 10 13.5C10 13.2239 9.77614 13 9.5 13C9.22386 13 9 13.2239 9 13.5C9 13.7761 9.22386 14 9.5 14ZM12 1.5C12 1.77614 11.7761 2 11.5 2C11.2239 2 11 1.77614 11 1.5C11 1.22386 11.2239 1 11.5 1C11.7761 1 12 1.22386 12 1.5ZM11.5 14C11.7761 14 12 13.7761 12 13.5C12 13.2239 11.7761 13 11.5 13C11.2239 13 11 13.2239 11 13.5C11 13.7761 11.2239 14 11.5 14ZM14 1.5C14 1.77614 13.7761 2 13.5 2C13.2239 2 13 1.77614 13 1.5C13 1.22386 13.2239 1 13.5 1C13.7761 1 14 1.22386 14 1.5ZM13.5 14C13.7761 14 14 13.7761 14 13.5C14 13.2239 13.7761 13 13.5 13C13.2239 13 13 13.2239 13 13.5C13 13.7761 13.2239 14 13.5 14Z"/>
     </svg>`;
     case "alt":
     default:
-      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" fill="none">
-      <path d="M12 8L20 12L12 16L4 12L12 8Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      return `<svg x="${x}" y="${y}" width="${w}" height="${h}" viewBox="0 0 24 24" class="fragment-icon" fill="none">
+      <path d="M12 8L20 12L12 16L4 12L12 8Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`;
   }
 }
@@ -13331,6 +13332,7 @@ const DEFAULT_PALETTE = {
   titleText: "#222",
   participantBg: "#ffffff",
   participantBorder: "#666",
+  lifeline: "#666",
   participantText: "#222",
   messageArrow: "#000",
   messageText: "#222",
@@ -13339,57 +13341,116 @@ const DEFAULT_PALETTE = {
   fragmentBorder: "#666",
   fragmentHeaderBg: "#dedede",
   fragmentHeaderOpacity: "0.498",
+  fragmentHeaderText: "#000",
   fragmentText: "#000",
+  guardOpacity: "0.65",
   fragmentSeparator: "#e5e7eb",
   commentText: "#333",
+  commentOpacity: "0.5",
+  groupOutline: "#666",
+  dividerLine: "#aaaa33",
+  dividerBg: "#fff5ad",
+  dividerText: "#333",
+  numberText: "#6b7280",
+  fragmentNumberText: "#6b7280",
+  numberBg: "#6b7280",
+  numberBgOpacity: "0.1",
+  guardText: "#6b7280",
+  fontFamily: DIAGRAM_FONT_STACK
+};
+const DARK_PALETTE = {
+  frameBorder: "#e1e1e1",
+  frameBg: "#1f1f1f",
+  titleText: "#fbfbfb",
+  participantBg: "#1f1f1f",
+  participantBorder: "#e1e1e1",
+  lifeline: "#e1e1e1",
+  participantText: "#fbfbfb",
+  messageArrow: "#ffffff",
+  messageText: "#fbfbfb",
+  occurrenceBg: "#818181",
+  occurrenceBorder: "#e1e1e1",
+  fragmentBorder: "#e1e1e1",
+  fragmentHeaderBg: "#e9e9e9",
+  fragmentHeaderOpacity: "1",
+  fragmentHeaderText: "#000000",
+  fragmentText: "#d4d4d4",
+  guardOpacity: "1",
+  fragmentSeparator: "#9f9f9f",
+  commentText: "#d4d4d4",
+  commentOpacity: "1",
+  groupOutline: "#e1e1e1",
+  dividerLine: "#9f9f9f",
+  dividerBg: "#cfcfcf",
+  dividerText: "#000000",
+  numberText: "#ededed",
+  fragmentNumberText: "#000000",
+  // No badge: the slot is transparent, so the fill colour is irrelevant at opacity 0.
+  numberBg: "#ededed",
+  numberBgOpacity: "0",
+  guardText: "#ececec",
   fontFamily: DIAGRAM_FONT_STACK
 };
 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-mermaid` sets only base/text/border/occurrence (and hides the
+  // footer, which the SVG does not draw). Two slots it leaves unset fall back
+  // differently from theme-default in the DOM: the message arrow resolves to
+  // the border colour and the fragment header to the frame (no band). The
+  // palette follows the DOM (themes.spec.ts).
+  "theme-mermaid": {
+    ...DEFAULT_PALETTE,
+    messageArrow: "#666",
+    fragmentHeaderBg: "#ffffff",
+    fragmentHeaderOpacity: "1"
+  },
+  // src/assets/tailwind.css `.theme-clean-light`, resolved through the DOM
+  // chains (themes.spec.ts): the title, fragment border, separator and comment
+  // used to carry values the DOM never showed.
   "theme-clean-light": {
     frameBorder: "#e5e9f0",
     frameBg: "#ffffff",
-    titleText: "#353748",
+    titleText: "#368eff",
     participantBg: "#edf4fe",
     participantBorder: "#368eff",
+    // The DOM lifeline is --color-border-base, not the participant border.
+    lifeline: "#c8c9c9",
     participantText: "#368eff",
     messageArrow: "#368eff",
     messageText: "#368eff",
     occurrenceBg: "#ffffff",
     occurrenceBorder: "#368eff",
-    fragmentBorder: "#c8c9c9",
+    fragmentBorder: "#e5e9f0",
     fragmentHeaderBg: "#edf4fe",
     fragmentHeaderOpacity: "1",
+    fragmentHeaderText: "#368eff",
     fragmentText: "#368eff",
-    fragmentSeparator: "#e5e9f0",
-    commentText: "#353748",
-    fontFamily: DIAGRAM_FONT_STACK
-  },
-  // 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",
+    guardOpacity: "0.65",
+    fragmentSeparator: "#e5e7eb",
+    commentText: "#333",
+    commentOpacity: "0.5",
+    // Slots every DOM theme still renders with the theme-default literals
+    // (their CSS chains fall back to these values; only a theme that sets the
+    // slot changes them).
+    groupOutline: "#666",
+    dividerLine: "#aaaa33",
+    dividerBg: "#fff5ad",
+    dividerText: "#333",
+    numberText: "#6b7280",
+    fragmentNumberText: "#6b7280",
+    numberBg: "#6b7280",
+    numberBgOpacity: "0.1",
+    guardText: "#6b7280",
     fontFamily: DIAGRAM_FONT_STACK
   },
+  // The one dark theme (ADR 0004); theme-clean-dark and theme-darcula are
+  // aliases of it. Values are the derived tokens in
+  // docs/ux-research/evidence/theme-dark/derive-dark.json, transcribed from
+  // the `.theme-dark` block in src/assets/tailwind.css; themes.spec.ts
+  // resolves every slot through tailwind.config.js and checks them.
+  "theme-dark": DARK_PALETTE,
+  "theme-clean-dark": DARK_PALETTE,
+  "theme-darcula": DARK_PALETTE,
   // 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
@@ -13400,6 +13461,7 @@ const THEME_PALETTES = {
     titleText: "#8ffc5b",
     participantBg: "#000000",
     participantBorder: "#8ffc5b",
+    lifeline: "#60ff33",
     participantText: "#8ffc5b",
     messageArrow: "#8ffc5b",
     messageText: "#8ffc5b",
@@ -13408,9 +13470,25 @@ const THEME_PALETTES = {
     fragmentBorder: "#60ff33",
     fragmentHeaderBg: "#000000",
     fragmentHeaderOpacity: "1",
+    fragmentHeaderText: "#8ffc5b",
     fragmentText: "#8ffc5b",
-    fragmentSeparator: "#60ff33",
-    commentText: "#8ffc5b",
+    guardOpacity: "0.65",
+    // Neither slot is set by `.theme-neon`; the DOM shows the defaults.
+    fragmentSeparator: "#e5e7eb",
+    commentText: "#333",
+    commentOpacity: "0.5",
+    // Slots every DOM theme still renders with the theme-default literals
+    // (their CSS chains fall back to these values; only a theme that sets the
+    // slot changes them).
+    groupOutline: "#666",
+    dividerLine: "#aaaa33",
+    dividerBg: "#fff5ad",
+    dividerText: "#333",
+    numberText: "#6b7280",
+    fragmentNumberText: "#6b7280",
+    numberBg: "#6b7280",
+    numberBgOpacity: "0.1",
+    guardText: "#6b7280",
     fontFamily: `"MS Sans Serif", ${DIAGRAM_FONT_STACK}`
   }
 };
@@ -13430,20 +13508,25 @@ function buildThemeStyles(p) {
   .frame-title { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 400; fill: ${p.titleText}; }
   .participant-box { fill: ${p.participantBg}; stroke: ${p.participantBorder}; stroke-width: 1; }
   .participant-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.participantText}; }
+  .stereotype-label { 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; }
+  .lifeline { stroke: ${p.lifeline}; stroke-width: 1; }
   .message-line { stroke: ${p.messageArrow}; stroke-width: 1; shape-rendering: crispEdges; }
   .message-label { font-family: ${p.fontFamily}; font-size: 15px; fill: ${p.messageText}; }
   .arrow-head { fill: ${p.messageArrow}; stroke: ${p.messageArrow}; stroke-width: 1; }
   .arrow-open { fill: none; }
+  .self-call-line { stroke: ${p.messageArrow}; stroke-width: 1; fill: none; }
   .occurrence { fill: ${p.occurrenceBg}; stroke: ${p.occurrenceBorder}; stroke-width: 1; shape-rendering: crispEdges; }
   .fragment-border { fill: none; stroke: ${p.fragmentBorder}; stroke-width: 1; }
   .fragment-header { fill: ${p.fragmentHeaderBg}; fill-opacity: ${p.fragmentHeaderOpacity}; stroke: none; shape-rendering: crispEdges; }
-  .fragment-number-bg { fill: #6b7280; fill-opacity: 0.1; stroke: none; }
-  .message-number-bg { fill: #6b7280; fill-opacity: 0.1; stroke: none; }
-  .fragment-label { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 400; font-variant-caps: all-small-caps; fill: ${p.fragmentText}; }
-  .fragment-condition { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
+  .fragment-number-bg { fill: ${p.numberBg}; fill-opacity: ${p.numberBgOpacity}; stroke: none; }
+  .message-number-bg { fill: ${p.numberBg}; fill-opacity: ${p.numberBgOpacity}; stroke: none; }
+  .fragment-label { font-family: ${p.fontFamily}; font-size: 14px; font-weight: 400; font-variant-caps: all-small-caps; fill: ${p.fragmentHeaderText}; }
+  .fragment-condition { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; opacity: ${p.guardOpacity}; }
+  .fragment-section-dim { opacity: ${p.guardOpacity}; }
+  .fragment-section-bg { fill: ${p.frameBg}; }
+  .fragment-icon { color: ${p.fragmentHeaderText}; }
   .fragment-separator { stroke: ${p.fragmentSeparator}; stroke-width: 1; shape-rendering: crispEdges; }
   .fragment-section-keyword { font-variant-caps: all-small-caps; }
   .fragment-section-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.fragmentText}; }
@@ -13451,13 +13534,14 @@ function buildThemeStyles(p) {
   .return-arrow { stroke: ${p.messageArrow}; stroke-width: 1; fill: none; }
   .return-label { font-family: ${p.fontFamily}; font-size: 15px; fill: ${p.messageText}; }
   .return-icon { fill: ${p.messageText}; }
-  .divider-line { stroke: #aaaa33; stroke-width: 1; }
-  .divider-bg { fill: #fff5ad; stroke: #aaaa33; stroke-width: 1; }
-  .divider-label { font-family: ${p.fontFamily}; font-size: 14px; fill: #333; }
-  .comment-text { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.commentText}; opacity: 0.5; }
-  .guard-keyword { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; font-variant-caps: all-small-caps; fill: #6b7280; }
-  .seq-number { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; fill: #6b7280; }
-  .group-outline { fill: none; stroke: ${p.participantBorder}; }
+  .divider-line { stroke: ${p.dividerLine}; stroke-width: 1; }
+  .divider-bg { fill: ${p.dividerBg}; stroke: ${p.dividerLine}; stroke-width: 1; }
+  .divider-label { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.dividerText}; }
+  .comment-text { font-family: ${p.fontFamily}; font-size: 14px; fill: ${p.commentText}; opacity: ${p.commentOpacity}; }
+  .guard-keyword { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; font-variant-caps: all-small-caps; fill: ${p.guardText}; }
+  .seq-number { font-family: ${p.fontFamily}; font-size: 12px; font-weight: 400; fill: ${p.numberText}; }
+  .fragment-number { fill: ${p.fragmentNumberText}; }
+  .group-outline { fill: none; stroke: ${p.groupOutline}; }
   .group-title-bg { fill: ${p.frameBg}; stroke: none; }
   .group-title-text { font-family: ${p.fontFamily}; font-size: 13px; font-weight: 400; fill: ${p.participantText}; }
 `;
@@ -13614,8 +13698,9 @@ 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: default, mermaid, clean-light, clean-dark,
-                               neon (prefix "theme-"; unknown names use default)
+  -t, --theme <name>           Theme: default, mermaid, clean-light, dark, neon
+                               (clean-dark and darcula are aliases of dark;
+                               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