@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/sequence/renderer.ts

@@ -60,6 +60,11 @@ const NOTE_CHARS_PER_LINE = Math.floor(
 );
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
+const ACTIVATION_WIDTH = 10;
+const SELF_CALL_HEIGHT = 25;
+const SELF_CALL_WIDTH = 30;
+// Max note width that keeps a note within one participant lane
+const NOTE_LANE_MAX = PARTICIPANT_GAP - ACTIVATION_WIDTH - NOTE_GAP; // 135px
 
 function wrapTextLines(text: string, maxChars: number): string[] {
   const rawLines = text.split('\n');
@@ -953,6 +958,37 @@ export function renderSequenceDiagram(
   );
   if (participants.length === 0) return;
 
+  // Participant index lookup — used to clamp note width within one lane
+  const participantIndexMap = new Map<string, number>();
+  participants.forEach((p, i) => participantIndexMap.set(p.id, i));
+
+  // Extra X shift for notes after self-calls
+  const SELF_CALL_NOTE_X_SHIFT =
+    ACTIVATION_WIDTH / 2 +
+    SELF_CALL_WIDTH +
+    NOTE_GAP -
+    (ACTIVATION_WIDTH + NOTE_GAP); // 25px
+
+  const noteEffectiveMaxW = (
+    participantId: string,
+    position: 'right' | 'left',
+    afterSelfCall = false
+  ): number => {
+    const idx = participantIndexMap.get(participantId);
+    if (idx === undefined) return NOTE_MAX_W;
+    const hasNeighbor =
+      position === 'right' ? idx < participants.length - 1 : idx > 0;
+    if (!hasNeighbor) return NOTE_MAX_W;
+    const laneMax =
+      afterSelfCall && position === 'right'
+        ? NOTE_LANE_MAX - SELF_CALL_NOTE_X_SHIFT
+        : NOTE_LANE_MAX;
+    return Math.min(NOTE_MAX_W, laneMax);
+  };
+
+  const charsForWidth = (maxW: number): number =>
+    Math.floor((maxW - NOTE_PAD_H * 2 - NOTE_FOLD) / NOTE_CHAR_W);
+
   const activationsOff = parsedOptions.activations?.toLowerCase() === 'off';
 
   // Tag resolution — shared utility handles priority chain:
@@ -1049,7 +1085,39 @@ export function renderSequenceDiagram(
     return msgToLastStep.get(closestMsgIndex) ?? -1;
   };
 
-  // Find the first visible message index in an element subtree
+  // Check whether a note's preceding message is a self-call.
+  // Self-call loopback arrows extend SELF_CALL_HEIGHT below the step Y,
+  // so notes after self-calls need a larger vertical offset.
+  const isNoteAfterSelfCall = (note: SequenceNote): boolean => {
+    let closestMsgIndex = -1;
+    let closestLine = -1;
+    for (let mi = 0; mi < messages.length; mi++) {
+      if (
+        messages[mi].lineNumber < note.lineNumber &&
+        messages[mi].lineNumber > closestLine
+      ) {
+        closestLine = messages[mi].lineNumber;
+        closestMsgIndex = mi;
+      }
+    }
+    if (closestMsgIndex < 0) return false;
+    const msg = messages[closestMsgIndex];
+    return msg.from === msg.to;
+  };
+
+  // Extra gap below self-call loop before note starts
+  const SELF_CALL_NOTE_GAP = 8;
+  const noteOffsetBelow = (note: SequenceNote): number =>
+    isNoteAfterSelfCall(note)
+      ? SELF_CALL_HEIGHT + NOTE_OFFSET_BELOW + SELF_CALL_NOTE_GAP
+      : NOTE_OFFSET_BELOW;
+
+  // Find the first visible message index in an element subtree.
+  // Use lineNumber lookup instead of indexOf — collapse projection creates
+  // separate spread copies for messages[] and elements[], breaking reference equality.
+  const msgLineToIdx = new Map<number, number>();
+  messages.forEach((m, i) => msgLineToIdx.set(m.lineNumber, i));
+
   const findFirstMsgIndex = (els: SequenceElement[]): number => {
     for (const el of els) {
       if (isSequenceBlock(el)) {
@@ -1064,7 +1132,7 @@ export function renderSequenceDiagram(
         const elseIdx = findFirstMsgIndex(el.elseChildren);
         if (elseIdx >= 0) return elseIdx;
       } else if (!isSequenceSection(el) && !isSequenceNote(el)) {
-        const idx = messages.indexOf(el as SequenceMessage);
+        const idx = msgLineToIdx.get(el.lineNumber) ?? -1;
         if (idx >= 0 && !hiddenMsgIndices.has(idx)) return idx;
       }
     }
@@ -1121,8 +1189,11 @@ export function renderSequenceDiagram(
   // When notes share horizontal space with subsequent arrows, generous vertical clearance
   // is needed so note boxes don't visually cover message labels.
   const NOTE_TRAILING_GAP = 35;
-  const computeNoteHeight = (text: string): number => {
-    const lines = wrapTextLines(text, NOTE_CHARS_PER_LINE);
+  const computeNoteHeight = (
+    text: string,
+    maxChars: number = NOTE_CHARS_PER_LINE
+  ): number => {
+    const lines = wrapTextLines(text, maxChars);
     return lines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
   };
   let trailingNoteSpace = 0; // extra space for notes at the end with no following message
@@ -1131,15 +1202,18 @@ export function renderSequenceDiagram(
       const el = els[i];
       if (isSequenceNote(el)) {
         // Total vertical extent of notes from the message arrow:
-        //   NOTE_OFFSET_BELOW (gap above first note)
+        //   offset (gap above first note — larger after self-calls)
         //   + each note's height + NOTE_OFFSET_BELOW (inter-note gap)
         //   + NOTE_TRAILING_GAP (gap below last note — clears next message label)
-        let totalExtent = NOTE_OFFSET_BELOW;
+        const firstOffset = noteOffsetBelow(el as SequenceNote);
+        let totalExtent = firstOffset;
         let j = i;
         while (j < els.length && isSequenceNote(els[j])) {
           const note = els[j] as SequenceNote;
+          const sc = isNoteAfterSelfCall(note);
+          const maxW = noteEffectiveMaxW(note.participantId, note.position, sc);
           const noteH = isNoteExpanded(note)
-            ? computeNoteHeight(note.text)
+            ? computeNoteHeight(note.text, charsForWidth(maxW))
             : COLLAPSED_NOTE_H;
           totalExtent += noteH + NOTE_OFFSET_BELOW;
           j++;
@@ -1401,13 +1475,18 @@ export function renderSequenceDiagram(
           let noteTopY: number;
           if (prevNoteY !== undefined && prevNote) {
             // Stack below previous note
+            const prevMaxW = noteEffectiveMaxW(
+              prevNote.participantId,
+              prevNote.position,
+              isNoteAfterSelfCall(prevNote)
+            );
             const prevNoteH = isNoteExpanded(prevNote)
-              ? computeNoteHeight(prevNote.text)
+              ? computeNoteHeight(prevNote.text, charsForWidth(prevMaxW))
               : COLLAPSED_NOTE_H;
             noteTopY = prevNoteY + prevNoteH + NOTE_OFFSET_BELOW;
           } else {
-            // First note after a message
-            noteTopY = stepY(si) + NOTE_OFFSET_BELOW;
+            // First note after a message — use larger offset after self-calls
+            noteTopY = stepY(si) + noteOffsetBelow(el);
           }
           noteYMap.set(el, noteTopY);
         } else if (isSequenceBlock(el)) {
@@ -1435,8 +1514,13 @@ export function renderSequenceDiagram(
         )
       : layoutEndY;
   for (const [note, noteTopY] of noteYMap) {
+    const maxW = noteEffectiveMaxW(
+      note.participantId,
+      note.position,
+      isNoteAfterSelfCall(note)
+    );
     const noteH = isNoteExpanded(note)
-      ? computeNoteHeight(note.text)
+      ? computeNoteHeight(note.text, charsForWidth(maxW))
       : COLLAPSED_NOTE_H;
     contentBottomY = Math.max(
       contentBottomY,
@@ -2093,7 +2177,6 @@ export function renderSequenceDiagram(
   }
 
   // Render activation rectangles (behind arrows)
-  const ACTIVATION_WIDTH = 10;
   const ACTIVATION_NEST_OFFSET = 6;
   activations.forEach((act) => {
     const px = participantX.get(act.participantId);
@@ -2285,8 +2368,7 @@ export function renderSequenceDiagram(
   }
 
   // Render steps (calls and returns in stack-inferred order)
-  const SELF_CALL_WIDTH = 30;
-  const SELF_CALL_HEIGHT = 25;
+  // SELF_CALL_WIDTH is now a module-level constant
   renderSteps.forEach((step, i) => {
     const fromX = participantX.get(step.from);
     const toX = participantX.get(step.to);
@@ -2354,6 +2436,10 @@ export function renderSequenceDiagram(
             .attr('y', y + SELF_CALL_HEIGHT / 2 + 4)
             .attr('text-anchor', 'start')
             .attr('fill', arrowColor)
+            .attr('paint-order', 'stroke fill')
+            .attr('stroke', palette.bg)
+            .attr('stroke-width', 4)
+            .attr('stroke-linejoin', 'round')
             .attr('font-size', 12)
             .attr('class', 'message-label')
             .attr(
@@ -2365,7 +2451,9 @@ export function renderSequenceDiagram(
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          renderInlineText(labelEl, step.label, palette);
+          // TD-1: in-arrow labels render as plain text (no markdown interpretation).
+          // Fixes the `location[]`-style silent character drop.
+          labelEl.text(step.label);
         }
       } else {
         // Normal call arrow — snap to activation box edges
@@ -2422,6 +2510,10 @@ export function renderSequenceDiagram(
             .attr('y', y - 8)
             .attr('text-anchor', 'middle')
             .attr('fill', arrowColor)
+            .attr('paint-order', 'stroke fill')
+            .attr('stroke', palette.bg)
+            .attr('stroke-width', 4)
+            .attr('stroke-linejoin', 'round')
             .attr('font-size', 12)
             .attr('class', 'message-label')
             .attr(
@@ -2433,7 +2525,9 @@ export function renderSequenceDiagram(
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          renderInlineText(labelEl, step.label, palette);
+          // TD-1: in-arrow labels render as plain text (no markdown interpretation).
+          // Fixes the `location[]`-style silent character drop.
+          labelEl.text(step.label);
         }
       }
     } else {
@@ -2494,6 +2588,10 @@ export function renderSequenceDiagram(
           .attr('y', y - 6)
           .attr('text-anchor', 'middle')
           .attr('fill', returnColor)
+          .attr('paint-order', 'stroke fill')
+          .attr('stroke', palette.bg)
+          .attr('stroke-width', 4)
+          .attr('stroke-linejoin', 'round')
           .attr('font-size', 11)
           .attr('class', 'message-label')
           .attr(
@@ -2505,7 +2603,12 @@ export function renderSequenceDiagram(
         if (tagKey && msgTagValue) {
           labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
         }
-        renderInlineText(labelEl, step.label, palette);
+        // TD-1: in-arrow labels render as plain text (no markdown
+        // interpretation). Return-arrow labels are currently always empty
+        // (buildRenderSequence sets them to '') but this path is kept in
+        // sync with the call/self-call sites above to prevent a future
+        // change resurrecting the location[] silent-drop bug.
+        labelEl.text(step.label);
       }
     }
   });
@@ -2530,15 +2633,27 @@ export function renderSequenceDiagram(
 
         if (expanded) {
           // --- Expanded note: full folded-corner box with wrapped text ---
-          const wrappedLines = wrapTextLines(el.text, NOTE_CHARS_PER_LINE);
+          const afterSelfCall = isNoteAfterSelfCall(el);
+          const maxW = noteEffectiveMaxW(
+            el.participantId,
+            el.position,
+            afterSelfCall
+          );
+          const maxChars = charsForWidth(maxW);
+          const wrappedLines = wrapTextLines(el.text, maxChars);
           const noteH = wrappedLines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
           const maxLineLen = Math.max(...wrappedLines.map((l) => l.length));
           const noteW = Math.min(
-            NOTE_MAX_W,
+            maxW,
             Math.max(80, maxLineLen * NOTE_CHAR_W + NOTE_PAD_H * 2 + NOTE_FOLD)
           );
+          // Shift notes past self-call loopback when applicable
+          const rightOffset =
+            afterSelfCall && isRight
+              ? ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH + NOTE_GAP
+              : ACTIVATION_WIDTH + NOTE_GAP;
           const noteX = isRight
-            ? px + ACTIVATION_WIDTH + NOTE_GAP
+            ? px + rightOffset
             : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
 
           const noteG = svg
@@ -2612,8 +2727,13 @@ export function renderSequenceDiagram(
         } else {
           // --- Collapsed note: compact indicator ---
           const cFold = 6;
+          const afterSelfCallC = isNoteAfterSelfCall(el);
+          const rightOffsetC =
+            afterSelfCallC && isRight
+              ? ACTIVATION_WIDTH / 2 + SELF_CALL_WIDTH + NOTE_GAP
+              : ACTIVATION_WIDTH + NOTE_GAP;
           const noteX = isRight
-            ? px + ACTIVATION_WIDTH + NOTE_GAP
+            ? px + rightOffsetC
             : px - ACTIVATION_WIDTH - NOTE_GAP - COLLAPSED_NOTE_W;
 
           const noteG = svg

package/src/sharing.ts

@@ -30,6 +30,8 @@ export interface CompactViewState {
   rps?: number; // RPS multiplier (infra)
   spd?: number; // playback speed (infra)
   io?: Record<string, number>; // instance overrides (infra)
+  hd?: boolean; // hide descriptions (mindmap)
+  cbd?: boolean; // color by depth (mindmap)
 }
 
 export interface DecodedDiagramUrl {

package/src/sitemap/layout.ts

@@ -396,15 +396,15 @@ export function layoutSitemap(
   const pageNodeIds = new Set<string>();
   const collapsedContainerIds = new Set<string>();
 
-  // Identify containers vs pages, and detect collapsed (empty) containers
+  // Identify containers vs pages, and detect collapsed containers.
+  // A container is collapsed iff hiddenCounts records it with a positive count
+  // (meaning collapseSitemapTree pruned its descendants). Source-level empty
+  // containers (never had children) are NOT treated as collapsed.
   for (const flat of flatNodes) {
     if (flat.sitemapNode.isContainer) {
       containerIds.add(flat.sitemapNode.id);
-      // A container is "collapsed" if it has no children at all in the flat list
-      const hasAnyChild = flatNodes.some(
-        (f) => f.parentContainerId === flat.sitemapNode.id
-      );
-      if (!hasAnyChild) {
+      const hidden = hiddenCounts?.get(flat.sitemapNode.id) ?? 0;
+      if (hidden > 0) {
         collapsedContainerIds.add(flat.sitemapNode.id);
       }
     } else {
@@ -412,16 +412,31 @@ export function layoutSitemap(
     }
   }
 
+  // Sibling-page floor for collapsed containers — prevents collapsed containers
+  // from rendering smaller than meta-rich page cards in the same layout.
+  let pageMaxW = 0;
+  let pageMaxH = 0;
+  for (const f of flatNodes) {
+    if (!f.sitemapNode.isContainer) {
+      if (f.width > pageMaxW) pageMaxW = f.width;
+      if (f.height > pageMaxH) pageMaxH = f.height;
+    }
+  }
+
   // Add nodes to dagre
   for (const flat of flatNodes) {
     const node = flat.sitemapNode;
     if (node.isContainer) {
       if (collapsedContainerIds.has(node.id)) {
-        // Collapsed container — regular node with explicit dimensions
+        // Collapsed container — regular node with explicit dimensions.
+        // Floor to max page-card dims so collapsed containers never look
+        // smaller than sibling page cards.
+        const flooredW = Math.max(flat.width, pageMaxW);
+        const flooredH = Math.max(flat.height, pageMaxH);
         g.setNode(node.id, {
           label: node.label,
-          width: flat.width,
-          height: flat.height,
+          width: flooredW,
+          height: flooredH,
         });
       } else {
         // Regular container — compound node with padding for child layout
@@ -546,7 +561,15 @@ export function layoutSitemap(
           node.children.length > 0 || (hc != null && hc > 0) || undefined,
       });
     } else {
-      // Fallback
+      // Fallback — still apply the floor for consistency
+      const isCollapsed = collapsedContainerIds.has(node.id);
+      const flooredW = isCollapsed
+        ? Math.max(flat.width, pageMaxW)
+        : flat.width;
+      const fallbackH = isCollapsed
+        ? flat.height
+        : labelHeight + CONTAINER_PAD_BOTTOM;
+      const flooredH = isCollapsed ? Math.max(fallbackH, pageMaxH) : fallbackH;
       layoutContainers.push({
         nodeId: node.id,
         label: node.label,
@@ -556,8 +579,8 @@ export function layoutSitemap(
         tagMetadata: flat.fullMeta,
         x: MARGIN,
         y: MARGIN,
-        width: flat.width,
-        height: labelHeight + CONTAINER_PAD_BOTTOM,
+        width: flooredW,
+        height: flooredH,
         labelHeight,
         hiddenCount: hc,
         hasChildren:

package/src/sitemap/renderer.ts

@@ -704,8 +704,6 @@ export async function renderSitemapForExport(
   const { parseSitemap } = await import('./parser');
   const { layoutSitemap } = await import('./layout');
   const { getPalette } = await import('../palettes');
-  const { injectBranding } = await import('../branding');
-
   const isDark = theme === 'dark';
   const effectivePalette =
     palette ?? (isDark ? getPalette('nord').dark : getPalette('nord').light);
@@ -756,8 +754,5 @@ export async function renderSitemapForExport(
 
   const svgHtml = svgEl.outerHTML;
   document.body.removeChild(container);
-
-  const brandColor =
-    theme === 'transparent' ? '#888' : effectivePalette.textMuted;
-  return injectBranding(svgHtml, brandColor);
+  return svgHtml;
 }

package/src/utils/arrows.ts

@@ -5,6 +5,24 @@
 // Labeled arrow syntax (always left-to-right):
 //   Sync:  `-label->`
 //   Async: `~label~>`
+//
+// In-arrow label character-set contract (see docs/dgmo-language-spec.md
+// §"In-Arrow Message Labels"):
+//   - Allowed: any codepoint except the forbidden substrings and forbidden
+//     control characters below.
+//   - Forbidden substrings: "->", "~>" (arrow-token lookalikes inside labels).
+//     Use the post-colon form for labels that need these symbols:
+//       `A -> B: uses -> to chain`
+//   - Forbidden characters: C0 control chars U+0000–U+001F EXCEPT U+0009 (tab),
+//     and U+007F (DEL).
+//   - Whitespace: leading/trailing trimmed; internal runs (incl. tab, NBSP,
+//     ZWSP) preserved — never collapsed.
+//   - Plain text only: no markdown interpretation. `*`, `_`, backticks,
+//     `[`, `]`, `{`, `}` are literal characters.
+
+import type { DgmoError } from '../diagnostics';
+import { makeDgmoError } from '../diagnostics';
+import { RECOGNIZED_COLOR_NAMES } from '../colors';
 
 interface ParsedArrow {
   from: string;
@@ -13,6 +31,160 @@ interface ParsedArrow {
   async: boolean;
 }
 
+// ============================================================
+// Diagnostic codes (TD-16)
+// ============================================================
+
+/**
+ * Stable diagnostic codes for in-arrow label parsing errors.
+ *
+ * **Active codes** — emitted by the parser pipeline today:
+ *   - `ARROW_SUBSTRING_IN_LABEL` (TD-13)
+ *   - `CONTROL_CHAR_IN_LABEL` (TD-14)
+ *
+ * **Reserved codes** — declared but NOT currently emitted. These are
+ * placeholders for future tightening of the arrow-tokenization rules
+ * described in TD-9. Today's chart parsers catch these cases through
+ * their own regex machinery with different diagnostics. A follow-up
+ * spec that introduces a dedicated tokenizer can start emitting them
+ * without changing the public code shape:
+ *   - `TRAILING_ARROW_TEXT` — extra `->`/`~>` after the primary arrow
+ *   - `MIXED_ARROW_DELIMITERS` — opening delim type doesn't match arrow
+ *
+ * See `docs/dgmo-language-spec-decisions.md` → TD-16 for the rationale.
+ */
+export const ARROW_DIAGNOSTIC_CODES = {
+  /** Active: label contains `->` or `~>` substring (TD-13). */
+  ARROW_SUBSTRING_IN_LABEL: 'E_ARROW_SUBSTRING_IN_LABEL',
+  /** Active: label contains a forbidden control character (TD-14). */
+  CONTROL_CHAR_IN_LABEL: 'E_CONTROL_CHAR_IN_LABEL',
+  /** Reserved: not currently emitted by any parser. See JSDoc above. */
+  TRAILING_ARROW_TEXT: 'E_TRAILING_ARROW_TEXT',
+  /** Reserved: not currently emitted by any parser. See JSDoc above. */
+  MIXED_ARROW_DELIMITERS: 'E_MIXED_ARROW_DELIMITERS',
+} as const;
+
+// ============================================================
+// validateLabelCharacters (TD-13, TD-14)
+// ============================================================
+
+/**
+ * Validate an in-arrow label against the TD-13 and TD-14 character-set
+ * contract. Returns diagnostics (possibly empty). Does NOT mutate the label —
+ * callers that want a normalized label should trim before calling.
+ *
+ * TD-13: label must not contain the substrings "->" or "~>".
+ * TD-14: label must not contain C0 control chars other than tab, and no DEL.
+ */
+export function validateLabelCharacters(
+  label: string,
+  lineNumber: number
+): DgmoError[] {
+  const out: DgmoError[] = [];
+
+  // TD-13: forbidden substrings
+  if (label.includes('->') || label.includes('~>')) {
+    out.push(
+      makeDgmoError(
+        lineNumber,
+        'Arrow symbols (-> or ~>) are not allowed inside a label. ' +
+          'Move the label after the arrow: "A -> B: uses -> to chain". ' +
+          'See "In-Arrow Message Labels" → Forbidden.',
+        'error',
+        ARROW_DIAGNOSTIC_CODES.ARROW_SUBSTRING_IN_LABEL
+      )
+    );
+  }
+
+  // TD-14: control chars (iterate codepoints to handle surrogate pairs)
+  for (const ch of label) {
+    const cp = ch.codePointAt(0)!;
+    const isC0 = cp >= 0x00 && cp <= 0x1f && cp !== 0x09; // allow tab
+    const isDel = cp === 0x7f;
+    if (isC0 || isDel) {
+      const hex = cp.toString(16).toUpperCase().padStart(4, '0');
+      out.push(
+        makeDgmoError(
+          lineNumber,
+          `Label contains a control character (U+${hex}). ` +
+            'Remove it and use plain text.',
+          'error',
+          ARROW_DIAGNOSTIC_CODES.CONTROL_CHAR_IN_LABEL
+        )
+      );
+      break; // one diagnostic per label is enough
+    }
+  }
+
+  return out;
+}
+
+// ============================================================
+// parseInArrowLabel (TD-1, TD-8, TD-10, TD-13, TD-14)
+// ============================================================
+
+export interface ParseInArrowLabelResult {
+  /** Cleaned label (trimmed; `undefined` if empty after trim per TD-10). */
+  label: string | undefined;
+  diagnostics: DgmoError[];
+}
+
+/**
+ * Normalize and validate a raw in-arrow label.
+ *
+ * Behavior:
+ *   - Trims leading/trailing whitespace (TD-8: internal whitespace preserved).
+ *   - Empty-after-trim → `{ label: undefined }` (TD-10 normalization).
+ *   - TD-13: emits `E_ARROW_SUBSTRING_IN_LABEL` if `->` or `~>` is present.
+ *   - TD-14: emits `E_CONTROL_CHAR_IN_LABEL` for forbidden control chars.
+ *
+ * This helper is intentionally chart-agnostic: it operates on an already
+ * extracted label string, leaving each chart's existing arrow-finding
+ * tokenization in place. TD-11 color-parens is handled inside the
+ * flowchart and state `parseArrowToken` functions because those are the
+ * only charts that interpret `-(color)->` as a colored edge; they use
+ * `matchColorParens()` from this module for the shared lookup.
+ */
+export function parseInArrowLabel(
+  rawLabel: string,
+  lineNumber: number
+): ParseInArrowLabelResult {
+  const trimmed = rawLabel.trim();
+
+  // TD-10: empty/whitespace-only label normalizes to undefined
+  if (trimmed.length === 0) {
+    return { label: undefined, diagnostics: [] };
+  }
+
+  // TD-13 / TD-14 validation
+  const diagnostics = validateLabelCharacters(trimmed, lineNumber);
+
+  return { label: trimmed, diagnostics };
+}
+
+// ============================================================
+// matchColorParens — shared TD-11 helper for flowchart and state
+// ============================================================
+
+/**
+ * Test whether a string matches the TD-11 color-parens form `(colorName)`
+ * where `colorName` is one of the 11 recognized palette color names from
+ * `src/colors.ts:RECOGNIZED_COLOR_NAMES`. Returns the lowercase color name
+ * on a match, or `null` on fall-through (whole string becomes a label).
+ *
+ * Used by flowchart and state parsers to keep the color-parens recognition
+ * rule in one place — do NOT re-implement the regex in chart parsers.
+ */
+export function matchColorParens(content: string): string | null {
+  const m = content.match(/^\(([A-Za-z]+)\)$/);
+  if (!m) return null;
+  const candidate = m[1].toLowerCase();
+  if ((RECOGNIZED_COLOR_NAMES as readonly string[]).includes(candidate)) {
+    return candidate;
+  }
+  return null;
+}
+
 // Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
 const SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
 const ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;
@@ -23,8 +195,6 @@ const RETURN_ASYNC_LABELED_RE = /^(.+?)\s*<~(.+)~\s*(.+)$/;
 const BIDI_SYNC_RE = /^(.+?)\s*<-(.+)->\s*(.+)$/;
 const BIDI_ASYNC_RE = /^(.+?)\s*<~(.+)~>\s*(.+)$/;
 
-const ARROW_CHARS = ['->', '~>'];
-
 /**
  * Try to parse a labeled arrow from a trimmed line.
  *
@@ -32,6 +202,14 @@ const ARROW_CHARS = ['->', '~>'];
  *  - `ParsedArrow` if matched and valid
  *  - `{ error: string }` if matched but invalid (deprecated syntax)
  *  - `null` if not a labeled arrow (caller should fall through to bare patterns)
+ *
+ * Note: arrow-char-in-label validation (TD-13) is NOT performed here —
+ * callers must route the returned `label` through `parseInArrowLabel` or
+ * `validateLabelCharacters` to get the unified `E_ARROW_SUBSTRING_IN_LABEL`
+ * diagnostic with the correct code. In practice this path is unreachable
+ * because arrow regexes are greedy enough to absorb inner `->`/`~>` tokens
+ * into the source/destination captures, but the check remains at the
+ * validator level for defense in depth.
  */
 export function parseArrow(
   line: string
@@ -73,15 +251,6 @@ export function parseArrow(
     // Empty label (e.g. `--> B`) — fall through to plain arrow handling
     if (!label) return null;
 
-    // Validate: no arrow chars inside label
-    for (const arrow of ARROW_CHARS) {
-      if (label.includes(arrow)) {
-        return {
-          error: 'Arrow characters (->, ~>) are not allowed inside labels',
-        };
-      }
-    }
-
     return {
       from: m[1],
       to: m[3],

package/src/utils/d3-types.ts

@@ -0,0 +1,4 @@
+export interface D3ExportDimensions {
+  width?: number;
+  height?: number;
+}

package/src/utils/export-container.ts

@@ -7,7 +7,7 @@ import { FONT_FAMILY } from '../fonts';
 export function runInExportContainer<T>(
   width: number,
   height: number,
-  fn: (container: HTMLDivElement) => T,
+  fn: (container: HTMLDivElement) => T
 ): T {
   const container = document.createElement('div');
   container.style.width = `${width}px`;
@@ -29,12 +29,13 @@ export function runInExportContainer<T>(
  */
 export function extractExportSvg(
   container: HTMLElement,
-  theme: 'light' | 'dark' | 'transparent',
+  theme: 'light' | 'dark' | 'transparent'
 ): string {
   const svgEl = container.querySelector('svg');
   if (!svgEl) return '';
   if (theme === 'transparent') svgEl.style.background = 'none';
   svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svgEl.style.fontFamily = FONT_FAMILY;
+  svgEl.querySelectorAll('[data-export-ignore]').forEach((el) => el.remove());
   return svgEl.outerHTML;
 }

package/src/utils/legend-constants.ts

@@ -16,10 +16,6 @@ export const LEGEND_EYE_SIZE = 14;
 export const LEGEND_EYE_GAP = 6;
 export const LEGEND_ICON_W = 20;
 
-// ── Spacing constants (centralized legend system) ───────────
-export const LEGEND_TOP_PAD = 12;
-export const LEGEND_TITLE_GAP = 8;
-export const LEGEND_CONTENT_GAP = 12;
 export const LEGEND_MAX_ENTRY_ROWS = 3;
 
 // ── Proportional text measurement ────────────────────────────