@diagrammo/dgmo 0.7.3 → 0.8.0

package/src/sequence/parser.ts

@@ -6,10 +6,16 @@ import { inferParticipantType } from './participant-inference';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { parseArrow } from '../utils/arrows';
-import { measureIndent, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from '../utils/parsing';
+import { measureIndent, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING, parseFirstLine, OPTION_NOCOLON_RE } from '../utils/parsing';
 import type { TagGroup } from '../utils/tag-groups';
 import { matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 
+/** Known sequence-diagram options that take a value (space-separated). */
+const KNOWN_SEQ_OPTIONS = new Set(['active-tag']);
+
+/** Known sequence-diagram boolean options (bare keyword or `no-` prefix). */
+const KNOWN_SEQ_BOOLEANS = new Set(['activations', 'collapse-notes']);
+
 /**
  * Participant types that can be declared via "Name is a type" syntax.
  */
@@ -165,8 +171,11 @@ const POSITION_ONLY_PATTERN = /^([^:]+?)\s+position\s+(-?\d+)$/i;
 // Colored participant declaration — e.g. "Tapin2(green)", "API(blue)"
 const COLORED_PARTICIPANT_PATTERN = /^(\S+?)\(([^)]+)\)\s*$/;
 
-// Group heading pattern — "[Backend]", "[API Services(blue)]", "[Backend(#hex)]"
-const GROUP_HEADING_PATTERN = /^\[(.+?)(?:\(([^)]+)\))?\]\s*$/;
+// Group heading pattern — "[Backend]", "[Backend] | t: Product"
+// Group 1: name (no ] or | inside brackets), Group 2: color in parens, Group 3: after-bracket text
+const GROUP_HEADING_PATTERN = /^\[([^\]|]+?)(?:\(([^)]+)\))?\]\s*(.*)$/;
+// Fallback: allows anything inside brackets (used to detect pipe-inside-brackets error)
+const GROUP_HEADING_FALLBACK = /^\[([^\]]+)\]\s*(.*)$/;
 // Legacy ## syntax — detect and emit migration error
 const LEGACY_GROUP_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
 
@@ -176,10 +185,169 @@ const SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
 // Arrow pattern for sequence inference — detects any arrow form
 const ARROW_PATTERN = /\S+\s*(?:<-\S+-|<~\S+~|-\S+->|~\S+~>|->|~>|<-|<~)\s*\S+/;
 
-// Note patterns — "note: text", "note right of Auth Server: text"
-// Participant names may contain spaces; the colon acts as the delimiter.
-const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:\s*(.+)$/i;
-const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:?\s*$/i;
+// Note patterns — colon-free syntax
+// Single-line: "note text", "note left text", "note right of X text", "note left X text"
+// Multi-line:  "note", "note right", "note right of X", "note left X" (body indented below)
+// Also supports legacy colon syntax: "note: text", "note right of X: text"
+//
+// The colon-free positioned form requires participant resolution — the parser
+// already has participant collection infrastructure, so we match the general
+// structure here and resolve participant vs text in the parsing logic.
+const NOTE_SINGLE_COLON = /^note(?:\s+(right|left)(?:\s+(?:of\s+)?(.+?))?)?\s*:\s*(.+)$/i;
+const NOTE_BARE = /^note\s+(.+)$/i;
+const NOTE_MULTI = /^note(?:\s+(right|left)(?:\s+(?:of\s+)?(.+?))?)?\s*:?\s*$/i;
+
+/** Result of parseNoteLine — indicates what the parser should do. */
+type NoteParseResult =
+  | { kind: 'single'; position: 'right' | 'left'; participantId: string; text: string }
+  | { kind: 'multi-head'; position: 'right' | 'left'; participantId: string }
+  | { kind: 'skip' }
+  | null; // not a note line at all
+
+/**
+ * Parse a note line, resolving participant names from the known participants list.
+ *
+ * Supports:
+ * - `note: text` / `note text` — default position (right), last msg sender
+ * - `note left of X: text` / `note left of X text` / `note left X text`
+ * - `note right:` / `note right` — multi-line head
+ * - `note right of X:` / `note right of X` / `note left X` — multi-line head
+ * - Quoted participant: `note left "Auth Service" text`
+ */
+function parseNoteLine(
+  trimmed: string,
+  participants: SequenceParticipant[],
+  lastMsgFrom: string | null,
+): NoteParseResult {
+  const lower = trimmed.toLowerCase();
+  if (!lower.startsWith('note')) return null;
+  // Must be exactly "note" or "note " — not "notebook" etc.
+  if (trimmed.length > 4 && trimmed[4] !== ' ' && trimmed[4] !== ':') return null;
+
+  // 1. Try legacy colon-based syntax first
+  const colonMatch = trimmed.match(NOTE_SINGLE_COLON);
+  if (colonMatch) {
+    const position = (colonMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
+    let participantId = colonMatch[2] || null;
+    if (!participantId) {
+      if (!lastMsgFrom) return { kind: 'skip' };
+      participantId = lastMsgFrom;
+    }
+    if (!participants.some((p) => p.id === participantId)) return { kind: 'skip' };
+    return { kind: 'single', position, participantId, text: colonMatch[3].trim() };
+  }
+
+  // 2. Try multi-line head (no text after note): `note`, `note right`, `note right of X`, `note left X`
+  // NOTE: NOTE_MULTI's (.+?) can greedily capture "participant text" as one group.
+  // Only trust this match if the captured participant actually exists. Otherwise, fall
+  // through to the bare-note handler which does proper participant-aware splitting.
+  const multiMatch = trimmed.match(NOTE_MULTI);
+  if (multiMatch) {
+    const position = (multiMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
+    let participantId = multiMatch[2] || null;
+    if (!participantId) {
+      if (!lastMsgFrom) return { kind: 'skip' };
+      participantId = lastMsgFrom;
+    }
+    if (participants.some((p) => p.id === participantId)) {
+      return { kind: 'multi-head', position, participantId };
+    }
+    // Participant not found — fall through to bare-note handler for proper resolution
+  }
+
+  // 3. Bare note (colon-free): `note text` or `note left [of] X text`
+  const bareMatch = trimmed.match(NOTE_BARE);
+  if (bareMatch) {
+    const rest = bareMatch[1].trim();
+    const restLower = rest.toLowerCase();
+
+    // Check for positioned note: `note left/right ...`
+    if (restLower.startsWith('left') || restLower.startsWith('right')) {
+      const posWord = restLower.startsWith('left') ? 'left' : 'right';
+      const position = posWord as 'right' | 'left';
+      let afterPos = rest.substring(posWord.length).trim();
+
+      // Strip optional `of` keyword — track whether it was present
+      let hadOf = false;
+      if (afterPos.toLowerCase().startsWith('of ')) {
+        afterPos = afterPos.substring(3).trim();
+        hadOf = true;
+      }
+
+      if (!afterPos) {
+        // Just `note left` or `note right` — multi-line head
+        if (!lastMsgFrom) return { kind: 'skip' };
+        if (!participants.some((p) => p.id === lastMsgFrom)) return { kind: 'skip' };
+        return { kind: 'multi-head', position, participantId: lastMsgFrom };
+      }
+
+      // Try to match a known participant at the start of afterPos
+      const resolved = resolveParticipantAndText(afterPos, participants);
+      if (resolved) {
+        if (resolved.text) {
+          return { kind: 'single', position, participantId: resolved.participantId, text: resolved.text };
+        } else {
+          // No text after participant — multi-line head
+          return { kind: 'multi-head', position, participantId: resolved.participantId };
+        }
+      }
+
+      // No known participant matched.
+      // If `of` was explicit (`note right of Z ...`), the user intended a specific
+      // participant — skip when it doesn't exist rather than defaulting.
+      if (hadOf) return { kind: 'skip' };
+
+      // Without `of`, treat remaining text as note content on the last-msg sender
+      if (!lastMsgFrom) return { kind: 'skip' };
+      if (!participants.some((p) => p.id === lastMsgFrom)) return { kind: 'skip' };
+      return { kind: 'single', position, participantId: lastMsgFrom, text: afterPos };
+    }
+
+    // Plain `note text` — default position, last msg sender
+    if (!lastMsgFrom) return { kind: 'skip' };
+    if (!participants.some((p) => p.id === lastMsgFrom)) return { kind: 'skip' };
+    return { kind: 'single', position: 'right', participantId: lastMsgFrom, text: rest };
+  }
+
+  return null;
+}
+
+/**
+ * Try to match a known participant name at the start of a string.
+ * Returns the matched participant and remaining text, or null if no match.
+ * Tries longest match first (multi-word participant names).
+ */
+function resolveParticipantAndText(
+  input: string,
+  participants: SequenceParticipant[],
+): { participantId: string; text: string } | null {
+  // Handle quoted participant: `"Auth Service" text`
+  if (input.startsWith('"') || input.startsWith("'")) {
+    const quote = input[0];
+    const endQuote = input.indexOf(quote, 1);
+    if (endQuote > 0) {
+      const name = input.substring(1, endQuote);
+      if (participants.some((p) => p.id === name)) {
+        const text = input.substring(endQuote + 1).trim();
+        return { participantId: name, text };
+      }
+    }
+    return null;
+  }
+
+  // Sort participants by name length (longest first) for greedy matching
+  const sorted = [...participants].sort((a, b) => b.id.length - a.id.length);
+  for (const p of sorted) {
+    if (input.startsWith(p.id)) {
+      const remaining = input.substring(p.id.length);
+      // Must be followed by whitespace, end of string, or nothing
+      if (remaining === '' || remaining[0] === ' ' || remaining[0] === '\t') {
+        return { participantId: p.id, text: remaining.trim() };
+      }
+    }
+  }
+  return null;
+}
 
 /**
  * Parse a .dgmo file with `chart: sequence` into a structured representation.
@@ -225,6 +393,23 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   const lines = content.split('\n');
   let hasExplicitChart = false;
   let contentStarted = false;
+  let firstLineIndex = -1; // line index of the `sequence [Title]` first line (to skip in main loop)
+
+  // Handle first non-empty, non-comment line for `sequence Title` syntax
+  for (let fi = 0; fi < lines.length; fi++) {
+    const fl = lines[fi].trim();
+    if (!fl || fl.startsWith('//')) continue;
+    const parsed = parseFirstLine(fl);
+    if (parsed && parsed.chartType === 'sequence') {
+      hasExplicitChart = true;
+      firstLineIndex = fi;
+      if (parsed.title) {
+        result.title = parsed.title;
+        result.titleLineNumber = fi + 1;
+      }
+    }
+    break;
+  }
 
   // Group parsing state — tracks the active [Group] heading
   let activeGroup: SequenceGroup | null = null;
@@ -276,28 +461,22 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
-    // Parse group heading — [Group Name] or [Group Name(color)] or [Group | k: v]
+    // Skip first line already handled as `sequence [Title]`
+    if (i === firstLineIndex) continue;
+
+    // Parse group heading — [Group Name] or [Group Name] | k: v
     const groupMatch = trimmed.match(GROUP_HEADING_PATTERN);
     if (groupMatch) {
-      let groupName = groupMatch[1].trim();
-      let groupColor = groupMatch[2]?.trim();
+      const groupName = groupMatch[1].trim();
+      const groupColor = groupMatch[2]?.trim();
       let groupMeta: Record<string, string> | undefined;
 
-      // Check for pipe metadata inside brackets
-      const gpipeIdx = groupName.indexOf('|');
-      if (gpipeIdx >= 0) {
-        const nameAndColor = groupName.substring(0, gpipeIdx).trimEnd();
-        const segments = groupName.substring(gpipeIdx).split('|');
+      // Parse pipe metadata AFTER the closing bracket
+      const afterBracket = groupMatch[3]?.trim() || '';
+      if (afterBracket.startsWith('|')) {
+        const segments = afterBracket.split('|');
         const meta = parsePipeMetadata(segments, aliasMap, () => pushWarning(lineNumber, MULTIPLE_PIPE_WARNING));
         if (Object.keys(meta).length > 0) groupMeta = meta;
-        // Re-extract color from name part
-        const colorSuffix = nameAndColor.match(/^(.+?)\(([^)]+)\)$/);
-        if (colorSuffix) {
-          groupName = colorSuffix[1].trim();
-          groupColor = colorSuffix[2].trim();
-        } else {
-          groupName = nameAndColor;
-        }
       }
 
       if (groupColor) {
@@ -314,6 +493,19 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
+    // Detect pipe-inside-brackets error: [Name | meta] → suggest [Name] | meta
+    if (trimmed.startsWith('[')) {
+      const fallbackMatch = trimmed.match(GROUP_HEADING_FALLBACK);
+      if (fallbackMatch && fallbackMatch[1].includes('|')) {
+        const rawInside = fallbackMatch[1];
+        const pipeIdx = rawInside.indexOf('|');
+        const cleanName = rawInside.substring(0, pipeIdx).trim().replace(/\([^)]*\)$/, '').trim();
+        const metaPart = rawInside.substring(pipeIdx).trim();
+        pushError(lineNumber, `Pipe metadata must go outside brackets — use '[${cleanName}] ${metaPart}' instead of '[${rawInside.trim()}]'`);
+        continue;
+      }
+    }
+
     // Reject legacy ## group syntax with migration hint
     if (trimmed.match(LEGACY_GROUP_PATTERN)) {
       const legacyMatch = trimmed.match(LEGACY_GROUP_PATTERN)!;
@@ -359,18 +551,16 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
-    // Tag group entries (indented Value(color) [default] under tag: heading)
+    // Tag group entries (indented Value(color) under tag heading)
+    // First entry is automatically the default (no `default` keyword needed)
     if (currentTagGroup && !contentStarted && measureIndent(raw) > 0) {
-      const isDefault = /\bdefault\s*$/.test(trimmed);
-      const entryText = isDefault
-        ? trimmed.replace(/\s+default\s*$/, '').trim()
-        : trimmed;
-      const { label, color } = extractColor(entryText);
+      const { label, color } = extractColor(trimmed);
       if (!color) {
         pushError(lineNumber, `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`);
         continue;
       }
-      if (isDefault) {
+      // First entry is the default
+      if (currentTagGroup.entries.length === 0) {
         currentTagGroup.defaultValue = label;
       }
       currentTagGroup.entries.push({ value: label, color, lineNumber });
@@ -444,6 +634,37 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       }
     }
 
+    // Parse space-separated options (no colon): `activations off`, `no-activations`, `active-tag Priority`
+    {
+      const optLower = trimmed.toLowerCase();
+      // Negated boolean: `no-activations` → options.activations = 'off'
+      if (optLower.startsWith('no-')) {
+        const base = optLower.substring(3);
+        if (KNOWN_SEQ_BOOLEANS.has(base)) {
+          if (contentStarted) {
+            pushError(lineNumber, `Options like '${trimmed}' must appear before the first message or declaration`);
+            continue;
+          }
+          result.options[base] = 'off';
+          continue;
+        }
+      }
+      // Key-value option: `active-tag Priority`
+      const spaceMatch = trimmed.match(OPTION_NOCOLON_RE);
+      if (spaceMatch) {
+        const optKey = spaceMatch[1].toLowerCase();
+        const optVal = spaceMatch[2].trim();
+        if (KNOWN_SEQ_OPTIONS.has(optKey) || KNOWN_SEQ_BOOLEANS.has(optKey)) {
+          if (contentStarted) {
+            pushError(lineNumber, `Options like '${trimmed}' must appear before the first message or declaration`);
+            continue;
+          }
+          result.options[optKey] = optVal;
+          continue;
+        }
+      }
+    }
+
     // Parse "Name is a type [aka Alias]" declarations (always top-level)
     const { core: isACore, meta: isAMeta } = splitPipe(trimmed, lineNumber);
     const isAMatch = isACore.match(IS_A_PATTERN);
@@ -529,7 +750,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     if (coloredMatch && !ARROW_PATTERN.test(colorCore)) {
       const id = coloredMatch[1];
       const color = coloredMatch[2].trim();
-      pushWarning(lineNumber, `(${color}) color syntax removed from sequence diagrams — use 'tag:' groups for coloring`);
+      pushError(lineNumber, `'${id}(${color})' syntax is no longer supported — use 'tag:' groups for coloring`);
       contentStarted = true;
       if (!result.participants.some((p) => p.id === id)) {
         result.participants.push({
@@ -688,8 +909,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // ---- Deprecated bare return arrows: A <- B, A <~ B ----
-    const bareReturnSync = arrowCore.match(/^(.+?)\s+<-\s+(.+)$/);
-    const bareReturnAsync = arrowCore.match(/^(.+?)\s+<~\s+(.+)$/);
+    const bareReturnSync = arrowCore.match(/^(.+?)\s*<-\s*(.+)$/);
+    const bareReturnAsync = arrowCore.match(/^(.+?)\s*<~\s*(.+)$/);
     const bareReturn = bareReturnSync || bareReturnAsync;
     if (bareReturn) {
       const to = bareReturn[1];
@@ -828,66 +1049,54 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
-    // Parse single-line note — "note: text" or "note right of API: text"
-    const noteSingleMatch = trimmed.match(NOTE_SINGLE);
-    if (noteSingleMatch) {
-      const notePosition =
-        (noteSingleMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
-      let noteParticipant = noteSingleMatch[2] || null;
-      if (!noteParticipant) {
-        if (!lastMsgFrom) continue; // incomplete — skip during live typing
-        noteParticipant = lastMsgFrom;
-      }
-      if (!result.participants.some((p) => p.id === noteParticipant)) {
-        continue; // unknown participant — skip during live typing
-      }
-      const note: SequenceNote = {
-        kind: 'note',
-        text: noteSingleMatch[3].trim(),
-        position: notePosition,
-        participantId: noteParticipant,
-        lineNumber,
-        endLineNumber: lineNumber,
-      };
-      currentContainer().push(note);
-      continue;
-    }
-
-    // Parse multi-line note — "note" or "note right of API" (no colon, body indented below)
-    const noteMultiMatch = trimmed.match(NOTE_MULTI);
-    if (noteMultiMatch) {
-      const notePosition =
-        (noteMultiMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
-      let noteParticipant = noteMultiMatch[2] || null;
-      if (!noteParticipant) {
-        if (!lastMsgFrom) continue; // incomplete — skip during live typing
-        noteParticipant = lastMsgFrom;
-      }
-      if (!result.participants.some((p) => p.id === noteParticipant)) {
-        continue; // unknown participant — skip during live typing
-      }
-      // Collect indented body lines
-      const noteLines: string[] = [];
-      while (i + 1 < lines.length) {
-        const nextRaw = lines[i + 1];
-        const nextTrimmed = nextRaw.trim();
-        if (!nextTrimmed) break;
-        const nextIndent = measureIndent(nextRaw);
-        if (nextIndent <= indent) break;
-        noteLines.push(nextTrimmed);
-        i++;
-      }
-      if (noteLines.length === 0) continue; // no body yet — skip during live typing
-      const note: SequenceNote = {
-        kind: 'note',
-        text: noteLines.join('\n'),
-        position: notePosition,
-        participantId: noteParticipant,
-        lineNumber,
-        endLineNumber: i + 1, // i has advanced past the body lines (1-based)
-      };
-      currentContainer().push(note);
-      continue;
+    // ---- Note parsing (colon-free + legacy colon syntax) ----
+    // Strategy:
+    // 1. Try colon-based syntax: `note right of X: text` (legacy, still supported)
+    // 2. Try bare note: `note text` — position defaults, text is everything after `note`
+    // 3. For positioned: `note left [of] X text` — needs participant lookup to split name vs text
+    // 4. Multi-line: `note`, `note right`, `note right [of] X` (body indented below)
+    {
+      const noteParsed = parseNoteLine(trimmed, result.participants, lastMsgFrom);
+      if (noteParsed) {
+        if (noteParsed.kind === 'single') {
+          const note: SequenceNote = {
+            kind: 'note',
+            text: noteParsed.text,
+            position: noteParsed.position,
+            participantId: noteParsed.participantId,
+            lineNumber,
+            endLineNumber: lineNumber,
+          };
+          currentContainer().push(note);
+          continue;
+        }
+        if (noteParsed.kind === 'multi-head') {
+          // Collect indented body lines
+          const noteLines: string[] = [];
+          while (i + 1 < lines.length) {
+            const nextRaw = lines[i + 1];
+            const nextTrimmed = nextRaw.trim();
+            if (!nextTrimmed) break;
+            const nextIndent = measureIndent(nextRaw);
+            if (nextIndent <= indent) break;
+            noteLines.push(nextTrimmed);
+            i++;
+          }
+          if (noteLines.length === 0) continue; // no body yet — skip during live typing
+          const note: SequenceNote = {
+            kind: 'note',
+            text: noteLines.join('\n'),
+            position: noteParsed.position,
+            participantId: noteParsed.participantId,
+            lineNumber,
+            endLineNumber: i + 1, // i has advanced past the body lines (1-based)
+          };
+          currentContainer().push(note);
+          continue;
+        }
+        // 'skip' — note was incomplete (no preceding message, unknown participant)
+        continue;
+      }
     }
   }
 
@@ -896,7 +1105,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     // Check if raw content has arrow patterns for inference
     const hasArrows = lines.some((line) => ARROW_PATTERN.test(line.trim()));
     if (!hasArrows) {
-      return fail(1, 'No "chart: sequence" header and no sequence content detected');
+      return fail(1, 'No "sequence" header and no sequence content detected');
     }
   }
 
@@ -935,7 +1144,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   // Warn about empty groups
   for (const group of result.groups) {
     if (group.participantIds.length === 0) {
-      pushWarning(group.lineNumber, `Group "${group.name}" has no participants`);
+      pushWarning(group.lineNumber, `Empty group '${group.name}' — did you mean '== ${group.name} ==' for a section divider?`);
     }
   }
 

package/src/sequence/renderer.ts

@@ -28,15 +28,15 @@ import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
   LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_FONT_W,
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
+  measureLegendText,
 } from '../utils/legend-constants';
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 
 // ============================================================
 // Layout Constants
@@ -932,7 +932,7 @@ export function renderSequenceDiagram(
     );
     if (tg) {
       for (const entry of tg.entries) {
-        tagValueToColor.set(entry.value.toLowerCase(), resolveColor(entry.color));
+        tagValueToColor.set(entry.value.toLowerCase(), resolveColor(entry.color) ?? entry.color);
       }
     }
   }
@@ -1560,8 +1560,8 @@ export function renderSequenceDiagram(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', 20)
-      .attr('font-weight', 'bold')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .text(title);
 
     if (parsed.titleLineNumber) {
@@ -1589,10 +1589,10 @@ export function renderSequenceDiagram(
       const isActive =
         !!activeTagGroup &&
         tg.name.toLowerCase() === activeTagGroup.toLowerCase();
-      const pillWidth = tg.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillWidth = measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
       const entries = tg.entries.map((e) => ({
         value: e.value,
-        color: resolveColor(e.color),
+        color: resolveColor(e.color) ?? e.color,
       }));
       let totalWidth = pillWidth;
       if (isActive) {
@@ -1601,7 +1601,7 @@ export function renderSequenceDiagram(
           entriesWidth +=
             LEGEND_DOT_R * 2 +
             LEGEND_ENTRY_DOT_GAP +
-            entry.value.length * LEGEND_ENTRY_FONT_W +
+            measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
             LEGEND_ENTRY_TRAIL;
         }
         totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
@@ -1702,7 +1702,7 @@ export function renderSequenceDiagram(
             .attr('fill', palette.textMuted)
             .text(entry.value);
 
-          entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+          entryX = textX + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
         }
       }
 

package/src/sitemap/layout.ts

@@ -6,6 +6,7 @@ import dagre from '@dagrejs/dagre';
 import type { ParsedSitemap, SitemapNode } from './types';
 import type { TagGroup } from '../utils/tag-groups';
 import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
+import { LEGEND_PILL_FONT_SIZE, LEGEND_ENTRY_FONT_SIZE, measureLegendText } from '../utils/legend-constants';
 
 // ============================================================
 // Types
@@ -105,10 +106,8 @@ const CONTAINER_META_LINE_HEIGHT = 16;
 // Legend (kanban-style pills)
 const LEGEND_HEIGHT = 28;
 const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_W = 11 * 0.6;
 const LEGEND_CAPSULE_PAD = 4;
 const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_W = 10 * 0.6;
 const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_GROUP_GAP = 12;
@@ -178,7 +177,7 @@ function computeLegendGroups(
       : group.entries;
     if (visibleEntries.length === 0) continue;
 
-    const pillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillWidth = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
     const minPillWidth = pillWidth;
 
     let entriesWidth = 0;
@@ -186,7 +185,7 @@ function computeLegendGroups(
       entriesWidth +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
-        entry.value.length * LEGEND_ENTRY_FONT_W +
+        measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
         LEGEND_ENTRY_TRAIL;
     }
     const eyeSpace = LEGEND_EYE_SIZE + LEGEND_EYE_GAP;