@diagrammo/dgmo 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/chart.ts

@@ -23,6 +23,7 @@ export interface ChartDataPoint {
 export interface ParsedChart {
   type: ChartType;
   title?: string;
+  titleLineNumber?: number;
   series?: string;
   xlabel?: string;
   ylabel?: string;
@@ -120,6 +121,7 @@ export function parseChart(
 
     if (key === 'title') {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
 

package/src/d3.ts

@@ -139,6 +139,7 @@ export interface D3ExportDimensions {
 export interface ParsedD3 {
   type: D3ChartType | null;
   title: string | null;
+  titleLineNumber: number | null;
   orientation: 'horizontal' | 'vertical';
   periods: string[];
   data: D3DataItem[];
@@ -265,6 +266,7 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
   const result: ParsedD3 = {
     type: null,
     title: null,
+    titleLineNumber: null,
     orientation: 'horizontal',
     periods: [],
     data: [],
@@ -609,6 +611,7 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
 
       if (key === 'title') {
         result.title = line.substring(colonIndex + 1).trim();
+        result.titleLineNumber = lineNumber;
         if (result.type === 'quadrant') {
           result.quadrantTitleLineNumber = lineNumber;
         }
@@ -1120,15 +1123,27 @@ export function renderSlopeChart(
 
   // Title
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '20px')
       .attr('font-weight', '700')
+      .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(parsed.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Period column headers
@@ -1501,15 +1516,27 @@ export function renderArcDiagram(
 
   // Title
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '20px')
       .attr('font-weight', '700')
+      .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(parsed.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Build adjacency map for hover interactions
@@ -2745,15 +2772,27 @@ export function renderTimeline(
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
       if (title) {
-        svg
+        const titleEl = svg
           .append('text')
+          .attr('class', 'chart-title')
           .attr('x', width / 2)
           .attr('y', 30)
           .attr('text-anchor', 'middle')
           .attr('fill', textColor)
           .attr('font-size', '20px')
           .attr('font-weight', '700')
+          .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
           .text(title);
+
+        if (parsed.titleLineNumber) {
+          titleEl.attr('data-line-number', parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl
+              .on('click', () => onClickItem(parsed.titleLineNumber!))
+              .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+              .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+          }
+        }
       }
 
       renderEras(
@@ -2936,15 +2975,27 @@ export function renderTimeline(
         .attr('transform', `translate(${margin.left},${margin.top})`);
 
       if (title) {
-        svg
+        const titleEl = svg
           .append('text')
+          .attr('class', 'chart-title')
           .attr('x', width / 2)
           .attr('y', 30)
           .attr('text-anchor', 'middle')
           .attr('fill', textColor)
           .attr('font-size', '20px')
           .attr('font-weight', '700')
+          .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
           .text(title);
+
+        if (parsed.titleLineNumber) {
+          titleEl.attr('data-line-number', parsed.titleLineNumber);
+          if (onClickItem) {
+            titleEl
+              .on('click', () => onClickItem(parsed.titleLineNumber!))
+              .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+              .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+          }
+        }
       }
 
       renderEras(
@@ -3188,15 +3239,27 @@ export function renderTimeline(
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
     if (title) {
-      svg
+      const titleEl = svg
         .append('text')
+        .attr('class', 'chart-title')
         .attr('x', width / 2)
         .attr('y', 30)
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
         .attr('font-size', '20px')
         .attr('font-weight', '700')
+        .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
         .text(title);
+
+      if (parsed.titleLineNumber) {
+        titleEl.attr('data-line-number', parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl
+            .on('click', () => onClickItem(parsed.titleLineNumber!))
+            .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+            .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+        }
+      }
     }
 
     renderEras(
@@ -3472,15 +3535,27 @@ export function renderTimeline(
       .attr('transform', `translate(${margin.left},${margin.top})`);
 
     if (title) {
-      svg
+      const titleEl = svg
         .append('text')
+        .attr('class', 'chart-title')
         .attr('x', width / 2)
         .attr('y', 30)
         .attr('text-anchor', 'middle')
         .attr('fill', textColor)
         .attr('font-size', '20px')
         .attr('font-weight', '700')
+        .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
         .text(title);
+
+      if (parsed.titleLineNumber) {
+        titleEl.attr('data-line-number', parsed.titleLineNumber);
+        if (onClickItem) {
+          titleEl
+            .on('click', () => onClickItem(parsed.titleLineNumber!))
+            .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+            .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+        }
+      }
     }
 
     renderEras(
@@ -3767,15 +3842,27 @@ export function renderWordCloud(
     .style('background', bgColor);
 
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '20px')
       .attr('font-weight', '700')
+      .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(parsed.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   const g = svg
@@ -3872,8 +3959,9 @@ function renderWordCloudAsync(
       .style('background', bgColor);
 
     if (title) {
-      svg
+      const titleEl = svg
         .append('text')
+        .attr('class', 'chart-title')
         .attr('x', width / 2)
         .attr('y', 30)
         .attr('text-anchor', 'middle')
@@ -3881,6 +3969,10 @@ function renderWordCloudAsync(
         .attr('font-size', '20px')
         .attr('font-weight', '700')
         .text(title);
+
+      if (parsed.titleLineNumber) {
+        titleEl.attr('data-line-number', parsed.titleLineNumber);
+      }
     }
 
     const g = svg
@@ -4217,15 +4309,27 @@ export function renderVenn(
 
   // Title
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', textColor)
       .attr('font-size', '20px')
       .attr('font-weight', '700')
+      .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(parsed.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // ── Clip-path definitions ──
@@ -4593,6 +4697,7 @@ export function renderQuadrant(
   if (title) {
     const titleText = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', width / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
@@ -4605,6 +4710,10 @@ export function renderQuadrant(
       )
       .text(title);
 
+    if (quadrantTitleLineNumber) {
+      titleText.attr('data-line-number', quadrantTitleLineNumber);
+    }
+
     if (onClickItem && quadrantTitleLineNumber) {
       titleText
         .on('click', () => onClickItem(quadrantTitleLineNumber))

package/src/echarts.ts

@@ -54,6 +54,7 @@ export interface ParsedHeatmapRow {
 export interface ParsedEChart {
   type: EChartsChartType;
   title?: string;
+  titleLineNumber?: number;
   series?: string;
   seriesNames?: string[];
   seriesNameColors?: (string | undefined)[];
@@ -174,6 +175,7 @@ export function parseEChart(
 
     if (key === 'title') {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
 

package/src/graph/flowchart-parser.ts

@@ -436,6 +436,7 @@ export function parseFlowchart(
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
 

package/src/graph/flowchart-renderer.ts

@@ -257,7 +257,6 @@ export function renderFlowchart(
     .append('svg')
     .attr('width', width)
     .attr('height', height)
-    .style('background', palette.bg)
     .style('font-family', FONT_FAMILY);
 
   // Defs: arrowhead markers
@@ -305,7 +304,7 @@ export function renderFlowchart(
 
   // Title
   if (graph.title) {
-    mainG
+    const titleEl = mainG
       .append('text')
       .attr('x', diagramW / 2)
       .attr('y', TITLE_FONT_SIZE)
@@ -313,8 +312,19 @@ export function renderFlowchart(
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
       .attr('font-weight', 'bold')
-      .attr('class', 'fc-title')
+      .attr('class', 'fc-title chart-title')
+      .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
       .text(graph.title);
+
+    if (graph.titleLineNumber) {
+      titleEl.attr('data-line-number', graph.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(graph.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Content group (offset by title)
@@ -425,7 +435,8 @@ export function renderFlowchart(
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'fc-node')
-      .attr('data-line-number', String(node.lineNumber));
+      .attr('data-line-number', String(node.lineNumber))
+      .attr('data-node-id', node.id);
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {

package/src/graph/types.ts

@@ -36,6 +36,7 @@ export interface GraphGroup {
 export interface ParsedGraph {
   type: 'flowchart';
   title?: string;
+  titleLineNumber?: number;
   direction: GraphDirection;
   nodes: GraphNode[];
   edges: GraphEdge[];

package/src/sequence/parser.ts

@@ -97,6 +97,7 @@ export interface SequenceNote {
   position: 'right' | 'left';
   participantId: string;
   lineNumber: number;
+  endLineNumber: number;
 }
 
 export type SequenceElement =
@@ -132,6 +133,7 @@ export interface SequenceGroup {
  */
 export interface ParsedSequenceDgmo {
   title: string | null;
+  titleLineNumber: number | null;
   participants: SequenceParticipant[];
   messages: SequenceMessage[];
   elements: SequenceElement[];
@@ -165,7 +167,7 @@ const UML_RETURN_PATTERN = /^(\w+\([^)]*\))\s*:\s*(.+)$/;
 
 // Note patterns — "note: text", "note right of API: text", "note left of User"
 const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
-const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*$/i;
+const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
 
 /**
  * Extract return label from a message label string.
@@ -226,6 +228,7 @@ function measureIndent(line: string): number {
 export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   const result: ParsedSequenceDgmo = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -366,6 +369,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
 
@@ -647,15 +651,11 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         (noteSingleMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
       let noteParticipant = noteSingleMatch[2] || null;
       if (!noteParticipant) {
-        if (!lastMsgFrom) {
-          result.error = `Line ${lineNumber}: note requires a preceding message`;
-          return result;
-        }
+        if (!lastMsgFrom) continue; // incomplete — skip during live typing
         noteParticipant = lastMsgFrom;
       }
       if (!result.participants.some((p) => p.id === noteParticipant)) {
-        result.error = `Line ${lineNumber}: note references unknown participant '${noteParticipant}'`;
-        return result;
+        continue; // unknown participant — skip during live typing
       }
       const note: SequenceNote = {
         kind: 'note',
@@ -663,6 +663,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         position: notePosition,
         participantId: noteParticipant,
         lineNumber,
+        endLineNumber: lineNumber,
       };
       currentContainer().push(note);
       continue;
@@ -675,15 +676,11 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         (noteMultiMatch[1]?.toLowerCase() as 'right' | 'left') || 'right';
       let noteParticipant = noteMultiMatch[2] || null;
       if (!noteParticipant) {
-        if (!lastMsgFrom) {
-          result.error = `Line ${lineNumber}: note requires a preceding message`;
-          return result;
-        }
+        if (!lastMsgFrom) continue; // incomplete — skip during live typing
         noteParticipant = lastMsgFrom;
       }
       if (!result.participants.some((p) => p.id === noteParticipant)) {
-        result.error = `Line ${lineNumber}: note references unknown participant '${noteParticipant}'`;
-        return result;
+        continue; // unknown participant — skip during live typing
       }
       // Collect indented body lines
       const noteLines: string[] = [];
@@ -696,16 +693,14 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         noteLines.push(nextTrimmed);
         i++;
       }
-      if (noteLines.length === 0) {
-        result.error = `Line ${lineNumber}: multi-line note has no content — add indented lines or use 'note: text'`;
-        return result;
-      }
+      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;

package/src/sequence/renderer.ts

@@ -52,14 +52,16 @@ interface InlineSpan {
 
 function parseInlineMarkdown(text: string): InlineSpan[] {
   const spans: InlineSpan[] = [];
-  const regex = /\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\)|([^*`[]+)/g;
+  const regex = /\*\*(.+?)\*\*|__(.+?)__|\*(.+?)\*|_(.+?)_|`(.+?)`|\[(.+?)\]\((.+?)\)|([^*_`[]+)/g;
   let match;
   while ((match = regex.exec(text)) !== null) {
-    if (match[1]) spans.push({ text: match[1], bold: true });
-    else if (match[2]) spans.push({ text: match[2], italic: true });
-    else if (match[3]) spans.push({ text: match[3], code: true });
-    else if (match[4]) spans.push({ text: match[4], href: match[5] });
-    else if (match[6]) spans.push({ text: match[6] });
+    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]) spans.push({ text: match[8] });
   }
   return spans;
 }
@@ -915,6 +917,38 @@ export function renderSequenceDiagram(
     markBlockSpacing(elements);
   }
 
+  // Note spacing — add vertical room after messages that have notes attached
+  const NOTE_OFFSET_BELOW = 16; // gap between message arrow and top of note box
+  const computeNoteHeight = (text: string): number => {
+    const lines = wrapTextLines(text, NOTE_CHARS_PER_LINE);
+    return lines.length * NOTE_LINE_H + NOTE_PAD_V * 2;
+  };
+  const markNoteSpacing = (els: SequenceElement[]): void => {
+    for (let i = 0; i < els.length; i++) {
+      const el = els[i];
+      if (isSequenceNote(el)) {
+        const noteH = computeNoteHeight(el.text);
+        // Find the next non-note element after this note
+        const nextIdx =
+          i + 1 < els.length ? findFirstMsgIndex([els[i + 1]]) : -1;
+        if (nextIdx >= 0) {
+          addExtra(nextIdx, noteH + NOTE_OFFSET_BELOW);
+        }
+      } else if (isSequenceBlock(el)) {
+        markNoteSpacing(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            markNoteSpacing(branch.children);
+          }
+        }
+        markNoteSpacing(el.elseChildren);
+      }
+    }
+  };
+  if (elements && elements.length > 0) {
+    markNoteSpacing(elements);
+  }
+
   // --- Section-aware Y layout ---
   // Sections get their own Y positions computed from content above them (not anchored
   // to messages below). This ensures toggling collapse/expand doesn't move the divider.
@@ -1195,8 +1229,9 @@ export function renderSequenceDiagram(
 
   // Render title
   if (title) {
-    svg
+    const titleEl = svg
       .append('text')
+      .attr('class', 'chart-title')
       .attr('x', svgWidth / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
@@ -1204,6 +1239,10 @@ export function renderSequenceDiagram(
       .attr('font-size', 20)
       .attr('font-weight', 'bold')
       .text(title);
+
+    if (parsed.titleLineNumber) {
+      titleEl.attr('data-line-number', parsed.titleLineNumber);
+    }
   }
 
   // Render group boxes (behind participant shapes)
@@ -1865,14 +1904,15 @@ export function renderSequenceDiagram(
         const noteX = isRight
           ? px + ACTIVATION_WIDTH + NOTE_GAP
           : px - ACTIVATION_WIDTH - NOTE_GAP - noteW;
-        const noteTopY = noteY - noteH / 2;
+        const noteTopY = noteY + NOTE_OFFSET_BELOW;
 
         // Wrap in <g> with data attributes for toggle support
         const noteG = svg
           .append('g')
           .attr('class', 'note')
           .attr('data-note-toggle', '')
-          .attr('data-line-number', String(el.lineNumber));
+          .attr('data-line-number', String(el.lineNumber))
+          .attr('data-line-end', String(el.endLineNumber));
 
         // Folded-corner path
         noteG
@@ -1909,35 +1949,32 @@ export function renderSequenceDiagram(
           .attr('stroke-width', 0.75)
           .attr('class', 'note-fold');
 
-        // Dashed connector to lifeline
-        const connectorNoteX = isRight ? noteX : noteX + noteW;
-        const connectorLifeX = isRight
-          ? px + ACTIVATION_WIDTH / 2
-          : px - ACTIVATION_WIDTH / 2;
-        noteG
-          .append('line')
-          .attr('x1', connectorNoteX)
-          .attr('y1', noteY)
-          .attr('x2', connectorLifeX)
-          .attr('y2', noteY)
-          .attr('stroke', palette.textMuted)
-          .attr('stroke-width', 0.75)
-          .attr('stroke-dasharray', '3 2')
-          .attr('class', 'note-connector');
-
         // Render text with inline markdown
         wrappedLines.forEach((line, li) => {
           const textY =
             noteTopY + NOTE_PAD_V + (li + 1) * NOTE_LINE_H - 3;
+          const isBullet = line.startsWith('- ');
+          const bulletIndent = isBullet ? 10 : 0;
+          const displayLine = isBullet ? line.slice(2) : line;
           const textEl = noteG
             .append('text')
-            .attr('x', noteX + NOTE_PAD_H)
+            .attr('x', noteX + NOTE_PAD_H + bulletIndent)
             .attr('y', textY)
             .attr('fill', palette.text)
             .attr('font-size', NOTE_FONT_SIZE)
             .attr('class', 'note-text');
 
-          const spans = parseInlineMarkdown(line);
+          if (isBullet) {
+            noteG
+              .append('text')
+              .attr('x', noteX + NOTE_PAD_H)
+              .attr('y', textY)
+              .attr('fill', palette.text)
+              .attr('font-size', NOTE_FONT_SIZE)
+              .text('\u2022');
+          }
+
+          const spans = parseInlineMarkdown(displayLine);
           for (const span of spans) {
             if (span.href) {
               const a = textEl