@diagrammo/dgmo 0.2.27 → 0.2.28

package/src/sequence/parser.ts

@@ -5,6 +5,8 @@
 import { inferParticipantType } from './participant-inference';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { parseArrow } from '../utils/arrows';
+import { measureIndent } from '../utils/parsing';
 
 /**
  * Participant types that can be declared via "Name is a type" syntax.
@@ -60,6 +62,7 @@ export interface SequenceMessage {
   returnLabel?: string;
   lineNumber: number;
   async?: boolean;
+  bidirectional?: boolean;
 }
 
 /**
@@ -159,8 +162,9 @@ const GROUP_HEADING_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
 // Section divider pattern — "== Label ==", "== Label(color) ==", or "== Label" (trailing == optional)
 const SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
 
-// Arrow pattern for sequence inference — "A -> B: message" or "A ~> B: message"
-const ARROW_PATTERN = /\S+\s*(?:->|~>)\s*\S+/;
+// Arrow pattern for sequence inference — "A -> B: message", "A ~> B: message",
+// "A -label-> B", "A ~label~> B", "A <-> B", "A <~> B"
+const ARROW_PATTERN = /\S+\s*(?:<->|<~>|->|~>|-\S+->|~\S+~>|<-\S+->|<~\S+~>)\s*\S+/;
 
 // <- return syntax: "Login <- 200 OK"
 const ARROW_RETURN_PATTERN = /^(.+?)\s*<-\s*(.+)$/;
@@ -212,19 +216,6 @@ function parseReturnLabel(rawLabel: string): {
   return { label: rawLabel };
 }
 
-/**
- * Measure leading whitespace of a line, normalizing tabs to 4 spaces.
- */
-function measureIndent(line: string): number {
-  let indent = 0;
-  for (const ch of line) {
-    if (ch === ' ') indent++;
-    else if (ch === '\t') indent += 4;
-    else break;
-  }
-  return indent;
-}
-
 /**
  * Parse a .dgmo file with `chart: sequence` into a structured representation.
  */
@@ -519,6 +510,97 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       continue;
     }
 
+    // ---- Labeled arrows: -label->, ~label~>, <-label->, <~label~> ----
+    // Must be checked BEFORE plain arrow patterns to avoid partial matches
+    const labeledArrow = parseArrow(trimmed);
+    if (labeledArrow && 'error' in labeledArrow) {
+      pushError(lineNumber, labeledArrow.error);
+      continue;
+    }
+    if (labeledArrow) {
+      contentStarted = true;
+      const { from, to, label, async: isAsync, bidirectional } = labeledArrow;
+      lastMsgFrom = from;
+
+      const msg: SequenceMessage = {
+        from,
+        to,
+        label,
+        returnLabel: undefined,
+        lineNumber,
+        ...(isAsync ? { async: true } : {}),
+        ...(bidirectional ? { bidirectional: true } : {}),
+      };
+      result.messages.push(msg);
+      currentContainer().push(msg);
+
+      // Auto-register participants
+      if (!result.participants.some((p) => p.id === from)) {
+        result.participants.push({
+          id: from,
+          label: from,
+          type: inferParticipantType(from),
+          lineNumber,
+        });
+      }
+      if (!result.participants.some((p) => p.id === to)) {
+        result.participants.push({
+          id: to,
+          label: to,
+          type: inferParticipantType(to),
+          lineNumber,
+        });
+      }
+      continue;
+    }
+
+    // ---- Plain bidi arrows: <-> and <~> ----
+    // Must be checked BEFORE unidirectional plain arrows
+    const bidiSyncMatch = trimmed.match(
+      /^(\S+)\s*<->\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    );
+    const bidiAsyncMatch = trimmed.match(
+      /^(\S+)\s*<~>\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    );
+    const bidiMatch = bidiSyncMatch || bidiAsyncMatch;
+    if (bidiMatch) {
+      contentStarted = true;
+      const from = bidiMatch[1];
+      const to = bidiMatch[2];
+      lastMsgFrom = from;
+      const rawLabel = bidiMatch[3]?.trim() || '';
+      const isBidiAsync = !!bidiAsyncMatch;
+
+      const msg: SequenceMessage = {
+        from,
+        to,
+        label: rawLabel,
+        lineNumber,
+        bidirectional: true,
+        ...(isBidiAsync ? { async: true } : {}),
+      };
+      result.messages.push(msg);
+      currentContainer().push(msg);
+
+      if (!result.participants.some((p) => p.id === from)) {
+        result.participants.push({
+          id: from,
+          label: from,
+          type: inferParticipantType(from),
+          lineNumber,
+        });
+      }
+      if (!result.participants.some((p) => p.id === to)) {
+        result.participants.push({
+          id: to,
+          label: to,
+          type: inferParticipantType(to),
+          lineNumber,
+        });
+      }
+      continue;
+    }
+
     // Match ~> (async arrow) or -> (sync arrow)
     let isAsync = false;
     const asyncArrowMatch = trimmed.match(

package/src/sequence/renderer.ts

@@ -5,6 +5,13 @@
 import * as d3Selection from 'd3-selection';
 import type { PaletteColors } from '../palettes';
 import { resolveColor } from '../colors';
+import {
+  parseInlineMarkdown,
+  truncateBareUrl,
+  renderInlineText,
+} from '../utils/inline-markdown';
+export type { InlineSpan } from '../utils/inline-markdown';
+export { parseInlineMarkdown, truncateBareUrl };
 import { FONT_FAMILY } from '../fonts';
 import type {
   ParsedSequenceDgmo,
@@ -44,74 +51,6 @@ const NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD)
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
 
-interface InlineSpan {
-  text: string;
-  bold?: boolean;
-  italic?: boolean;
-  code?: boolean;
-  href?: string;
-}
-
-export function parseInlineMarkdown(text: string): InlineSpan[] {
-  const spans: InlineSpan[] = [];
-  const regex =
-    /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|(https?:\/\/[^\s)>\]]+|www\.[^\s)>\]]+)|([^*_`[]+?(?=https?:\/\/|www\.|$)|[^*_`[]+)/g;
-  let match;
-  while ((match = regex.exec(text)) !== null) {
-    if (match[1]) spans.push({ text: match[1], bold: true });       // **bold**
-    else if (match[2]) spans.push({ text: match[2], bold: true });  // __bold__
-    else if (match[3]) spans.push({ text: match[3], italic: true }); // *italic*
-    else if (match[4]) spans.push({ text: match[4], italic: true }); // _italic_
-    else if (match[5]) spans.push({ text: match[5], code: true });   // `code`
-    else if (match[6]) spans.push({ text: match[6], href: match[7] }); // [text](url)
-    else if (match[8]) {                                              // bare URL
-      const url = match[8];
-      const href = url.startsWith('www.') ? `https://${url}` : url;
-      spans.push({ text: url, href });
-    } else if (match[9]) spans.push({ text: match[9] });             // plain text
-  }
-  return spans;
-}
-
-const BARE_URL_MAX_DISPLAY = 35;
-
-export function truncateBareUrl(url: string): string {
-  const stripped = url.replace(/^https?:\/\//, '').replace(/^www\./, '');
-  if (stripped.length <= BARE_URL_MAX_DISPLAY) return stripped;
-  return stripped.slice(0, BARE_URL_MAX_DISPLAY - 1) + '\u2026';
-}
-
-function renderInlineText(
-  textEl: d3Selection.Selection<SVGTextElement, unknown, null, undefined>,
-  text: string,
-  palette: PaletteColors,
-  fontSize?: number
-): void {
-  const spans = parseInlineMarkdown(text);
-  for (const span of spans) {
-    if (span.href) {
-      // Bare URLs (text === href or href with https:// prepended) get truncated display;
-      // markdown links [text](url) keep their user-chosen text as-is.
-      const isBareUrl =
-        span.text === span.href ||
-        `https://${span.text}` === span.href;
-      const display = isBareUrl ? truncateBareUrl(span.text) : span.text;
-      const a = textEl.append('a').attr('href', span.href);
-      a.append('tspan')
-        .text(display)
-        .attr('fill', palette.primary)
-        .style('text-decoration', 'underline');
-    } else {
-      const tspan = textEl.append('tspan').text(span.text);
-      if (span.bold) tspan.attr('font-weight', 'bold');
-      if (span.italic) tspan.attr('font-style', 'italic');
-      if (span.code) {
-        tspan.attr('font-family', 'monospace');
-        if (fontSize) tspan.attr('font-size', fontSize - 1);
-      }
-    }
-  }
-}
 
 function wrapTextLines(text: string, maxChars: number): string[] {
   const rawLines = text.split('\n');
@@ -599,6 +538,7 @@ export interface RenderStep {
   label: string;
   messageIndex: number;
   async?: boolean;
+  bidirectional?: boolean;
 }
 
 /**
@@ -639,8 +579,14 @@ export function buildRenderSequence(messages: SequenceMessage[]): RenderStep[] {
       label: msg.label,
       messageIndex: mi,
       ...(msg.async ? { async: true } : {}),
+      ...(msg.bidirectional ? { bidirectional: true } : {}),
     });
 
+    // Bidirectional messages: no activation bar, no return
+    if (msg.bidirectional) {
+      continue;
+    }
+
     // Async messages: no return arrow, no activation on target
     if (msg.async) {
       continue;
@@ -1400,6 +1346,42 @@ export function renderSequenceDiagram(
     .attr('stroke', palette.text)
     .attr('stroke-width', 1.2);
 
+  // Filled reverse arrowhead for bidirectional sync arrows (marker-start)
+  defs
+    .append('marker')
+    .attr('id', 'seq-arrowhead-reverse')
+    .attr('viewBox', `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`)
+    .attr('refX', 0)
+    .attr('refY', ARROWHEAD_SIZE / 2)
+    .attr('markerWidth', ARROWHEAD_SIZE)
+    .attr('markerHeight', ARROWHEAD_SIZE)
+    .attr('orient', 'auto')
+    .append('polygon')
+    .attr(
+      'points',
+      `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
+    )
+    .attr('fill', palette.text);
+
+  // Open reverse arrowhead for bidirectional async arrows (marker-start)
+  defs
+    .append('marker')
+    .attr('id', 'seq-arrowhead-async-reverse')
+    .attr('viewBox', `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`)
+    .attr('refX', 0)
+    .attr('refY', ARROWHEAD_SIZE / 2)
+    .attr('markerWidth', ARROWHEAD_SIZE)
+    .attr('markerHeight', ARROWHEAD_SIZE)
+    .attr('orient', 'auto')
+    .append('polyline')
+    .attr(
+      'points',
+      `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
+    )
+    .attr('fill', 'none')
+    .attr('stroke', palette.text)
+    .attr('stroke-width', 1.2);
+
   // Render title
   if (title) {
     const titleEl = svg
@@ -1954,7 +1936,12 @@ export function renderSequenceDiagram(
         const markerRef = step.async
           ? 'url(#seq-arrowhead-async)'
           : 'url(#seq-arrowhead)';
-        svg
+        const markerStartRef = step.bidirectional
+          ? step.async
+            ? 'url(#seq-arrowhead-async-reverse)'
+            : 'url(#seq-arrowhead-reverse)'
+          : null;
+        const line = svg
           .append('line')
           .attr('x1', x1)
           .attr('y1', y)
@@ -1970,6 +1957,12 @@ export function renderSequenceDiagram(
           )
           .attr('data-msg-index', String(step.messageIndex))
           .attr('data-step-index', String(i));
+        if (markerStartRef) {
+          line.attr('marker-start', markerStartRef);
+        }
+        if (step.bidirectional && step.async) {
+          line.attr('stroke-dasharray', '6 4');
+        }
 
         if (step.label) {
           const midX = (x1 + x2) / 2;

package/src/utils/arrows.ts

@@ -0,0 +1,75 @@
+// ============================================================
+// Shared Arrow Parsing Utility
+// ============================================================
+//
+// Labeled arrow syntax: `-label->`, `~label~>`, `<-label->`, `<~label~>`
+// Used by sequence, C4, and init-status parsers.
+
+export interface ParsedArrow {
+  from: string;
+  to: string;
+  label: string;
+  async: boolean;
+  bidirectional: boolean;
+}
+
+// Bidi patterns checked FIRST — longer prefix avoids partial match
+const BIDI_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
+const BIDI_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+const SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
+const ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
+
+const ARROW_CHARS = ['->', '~>', '<->', '<~>'];
+
+/**
+ * Try to parse a labeled arrow from a trimmed line.
+ *
+ * Returns:
+ *  - `ParsedArrow` if matched and valid
+ *  - `{ error: string }` if matched but label contains arrow chars
+ *  - `null` if not a labeled arrow (caller should fall through to plain patterns)
+ */
+export function parseArrow(
+  line: string,
+): ParsedArrow | { error: string } | null {
+  // Order: bidi first (longer prefix), then unidirectional
+  const patterns: {
+    re: RegExp;
+    async: boolean;
+    bidirectional: boolean;
+  }[] = [
+    { re: BIDI_SYNC_LABELED_RE, async: false, bidirectional: true },
+    { re: BIDI_ASYNC_LABELED_RE, async: true, bidirectional: true },
+    { re: SYNC_LABELED_RE, async: false, bidirectional: false },
+    { re: ASYNC_LABELED_RE, async: true, bidirectional: false },
+  ];
+
+  for (const { re, async: isAsync, bidirectional } of patterns) {
+    const m = line.match(re);
+    if (!m) continue;
+
+    const label = m[2].trim();
+
+    // 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],
+      label,
+      async: isAsync,
+      bidirectional,
+    };
+  }
+
+  return null;
+}

package/src/utils/inline-markdown.ts

@@ -0,0 +1,75 @@
+// ============================================================
+// Inline Markdown — shared parsing + SVG rendering for text fields
+// ============================================================
+
+import * as d3Selection from 'd3-selection';
+import type { PaletteColors } from '../palettes';
+
+export interface InlineSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+  href?: string;
+}
+
+export function parseInlineMarkdown(text: string): InlineSpan[] {
+  const spans: InlineSpan[] = [];
+  const regex =
+    /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|(https?:\/\/[^\s)>\]]+|www\.[^\s)>\]]+)|([^*_`[]+?(?=https?:\/\/|www\.|$)|[^*_`[]+)/g;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match[1]) spans.push({ text: match[1], bold: true });       // **bold**
+    else if (match[2]) spans.push({ text: match[2], bold: true });  // __bold__
+    else if (match[3]) spans.push({ text: match[3], italic: true }); // *italic*
+    else if (match[4]) spans.push({ text: match[4], italic: true }); // _italic_
+    else if (match[5]) spans.push({ text: match[5], code: true });   // `code`
+    else if (match[6]) spans.push({ text: match[6], href: match[7] }); // [text](url)
+    else if (match[8]) {                                              // bare URL
+      const url = match[8];
+      const href = url.startsWith('www.') ? `https://${url}` : url;
+      spans.push({ text: url, href });
+    } else if (match[9]) spans.push({ text: match[9] });             // plain text
+  }
+  return spans;
+}
+
+const BARE_URL_MAX_DISPLAY = 35;
+
+export function truncateBareUrl(url: string): string {
+  const stripped = url.replace(/^https?:\/\//, '').replace(/^www\./, '');
+  if (stripped.length <= BARE_URL_MAX_DISPLAY) return stripped;
+  return stripped.slice(0, BARE_URL_MAX_DISPLAY - 1) + '\u2026';
+}
+
+export function renderInlineText(
+  textEl: d3Selection.Selection<SVGTextElement, unknown, null, undefined>,
+  text: string,
+  palette: PaletteColors,
+  fontSize?: number
+): void {
+  const spans = parseInlineMarkdown(text);
+  for (const span of spans) {
+    if (span.href) {
+      // Bare URLs (text === href or href with https:// prepended) get truncated display;
+      // markdown links [text](url) keep their user-chosen text as-is.
+      const isBareUrl =
+        span.text === span.href ||
+        `https://${span.text}` === span.href;
+      const display = isBareUrl ? truncateBareUrl(span.text) : span.text;
+      const a = textEl.append('a').attr('href', span.href);
+      a.append('tspan')
+        .text(display)
+        .attr('fill', palette.primary)
+        .style('text-decoration', 'underline');
+    } else {
+      const tspan = textEl.append('tspan').text(span.text);
+      if (span.bold) tspan.attr('font-weight', 'bold');
+      if (span.italic) tspan.attr('font-style', 'italic');
+      if (span.code) {
+        tspan.attr('font-family', 'monospace');
+        if (fontSize) tspan.attr('font-size', fontSize - 1);
+      }
+    }
+  }
+}

package/src/utils/parsing.ts

@@ -0,0 +1,67 @@
+/**
+ * Shared parser utilities — extracted from individual parsers to eliminate
+ * duplication of measureIndent, extractColor, header regexes, and
+ * pipe-metadata parsing.
+ */
+
+import { resolveColor } from '../colors';
+import type { PaletteColors } from '../palettes';
+
+/** Measure leading whitespace of a line, normalizing tabs to 4 spaces. */
+export function measureIndent(line: string): number {
+  let indent = 0;
+  for (const ch of line) {
+    if (ch === ' ') indent++;
+    else if (ch === '\t') indent += 4;
+    else break;
+  }
+  return indent;
+}
+
+/** Matches a trailing `(colorName)` suffix on a label. */
+export const COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
+
+/** Extract an optional trailing color suffix from a label, resolving via palette. */
+export function extractColor(
+  label: string,
+  palette?: PaletteColors,
+): { label: string; color?: string } {
+  const m = label.match(COLOR_SUFFIX_RE);
+  if (!m) return { label };
+  const colorName = m[1].trim();
+  return {
+    label: label.substring(0, m.index!).trim(),
+    color: resolveColor(colorName, palette),
+  };
+}
+
+/** Matches `chart: <type>` header lines. */
+export const CHART_TYPE_RE = /^chart\s*:\s*(.+)/i;
+
+/** Matches `title: <text>` header lines. */
+export const TITLE_RE = /^title\s*:\s*(.+)/i;
+
+/** Matches `option: value` header lines. */
+export const OPTION_RE = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
+
+/** Parse pipe-delimited metadata from segments after the first (name) segment. */
+export function parsePipeMetadata(
+  segments: string[],
+  aliasMap: Map<string, string> = new Map(),
+): Record<string, string> {
+  const metadata: Record<string, string> = {};
+  for (let j = 1; j < segments.length; j++) {
+    for (const part of segments[j].split(',')) {
+      const trimmedPart = part.trim();
+      if (!trimmedPart) continue;
+      const colonIdx = trimmedPart.indexOf(':');
+      if (colonIdx > 0) {
+        const rawKey = trimmedPart.substring(0, colonIdx).trim().toLowerCase();
+        const key = aliasMap.get(rawKey) ?? rawKey;
+        const value = trimmedPart.substring(colonIdx + 1).trim();
+        metadata[key] = value;
+      }
+    }
+  }
+  return metadata;
+}

package/src/utils/tag-groups.ts

@@ -0,0 +1,76 @@
+// ============================================================
+// Shared tag-group types, regexes, and matchers
+// ============================================================
+
+/** A single entry inside a tag group: `Value(color)` */
+export interface TagEntry {
+  value: string;
+  color: string;
+  lineNumber: number;
+}
+
+/** A tag group block: heading + entries */
+export interface TagGroup {
+  name: string;
+  alias?: string;
+  entries: TagEntry[];
+  /** Value of the entry marked `default` (nodes without metadata get this) */
+  defaultValue?: string;
+  lineNumber: number;
+}
+
+/** Result of matching a tag block heading */
+export interface TagBlockMatch {
+  name: string;
+  alias: string | undefined;
+  colorHint: string | undefined;
+  /** true when the heading used `## …` (deprecated) */
+  deprecated: boolean;
+}
+
+// ── Regexes ─────────────────────────────────────────────────
+
+/** New canonical syntax: `tag: GroupName [alias X] [(color)]` (case-insensitive) */
+export const TAG_BLOCK_RE =
+  /^tag:\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/i;
+
+/** Legacy syntax: `## GroupName [alias X] [(color)]` */
+export const GROUP_HEADING_RE =
+  /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
+
+// ── Matchers ────────────────────────────────────────────────
+
+/** Returns true if `trimmed` is a tag block heading in either syntax. */
+export function isTagBlockHeading(trimmed: string): boolean {
+  return TAG_BLOCK_RE.test(trimmed) || GROUP_HEADING_RE.test(trimmed);
+}
+
+/**
+ * Parse a tag block heading line into structured data.
+ * Returns `null` if the line is not a tag block heading.
+ */
+export function matchTagBlockHeading(trimmed: string): TagBlockMatch | null {
+  // Try new syntax first
+  const tagMatch = trimmed.match(TAG_BLOCK_RE);
+  if (tagMatch) {
+    return {
+      name: tagMatch[1].trim(),
+      alias: tagMatch[2] || undefined,
+      colorHint: tagMatch[3] || undefined,
+      deprecated: false,
+    };
+  }
+
+  // Fall back to legacy syntax
+  const groupMatch = trimmed.match(GROUP_HEADING_RE);
+  if (groupMatch) {
+    return {
+      name: groupMatch[1].trim(),
+      alias: groupMatch[2] || undefined,
+      colorHint: groupMatch[3] || undefined,
+      deprecated: true,
+    };
+  }
+
+  return null;
+}