@diagrammo/dgmo 0.7.0 → 0.7.1

package/src/gantt/renderer.ts

@@ -27,7 +27,7 @@ import {
 import type { PaletteColors } from '../palettes';
 import type { D3ExportDimensions } from '../d3';
 import type { ResolvedSchedule, ResolvedTask, ResolvedGroup, Weekday } from './types';
-import type { TagGroup } from '../utils/tag-groups';
+import type { TagGroup, TagEntry } from '../utils/tag-groups';
 
 // ── Constants ───────────────────────────────────────────────
 
@@ -68,7 +68,7 @@ export function renderGantt(
   // Clear previous content
   container.innerHTML = '';
 
-  if (resolved.error || resolved.tasks.length === 0) return;
+  if (resolved.tasks.length === 0) return;
 
   // ── Destructure options ─────────────────────────────────
 
@@ -118,6 +118,7 @@ export function renderGantt(
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve = resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
   const topDateLabelReserve = 22; // tick (6) + gap (4) + label height (~12)
+  const CONTENT_TOP_PAD = 16; // breathing room between scale labels and first row
 
   const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve;
 
@@ -125,7 +126,7 @@ export function renderGantt(
   const contentH = isTagMode
     ? totalRows * (BAR_H + ROW_GAP)
     : totalRows * (BAR_H + ROW_GAP) + GROUP_GAP * resolved.groups.length;
-  const innerHeight = contentH;
+  const innerHeight = CONTENT_TOP_PAD + contentH;
   const outerHeight = marginTop + innerHeight + BOTTOM_MARGIN;
 
   const containerWidth = exportDims?.width ?? (container.clientWidth || 800);
@@ -186,6 +187,7 @@ export function renderGantt(
         currentSwimlaneGroup,
         onSwimlaneChange,
         viewMode,
+        resolved.tasks,
       );
     }
   }
@@ -256,7 +258,7 @@ export function renderGantt(
       }
     }
   }
-  let yOffset = 0;
+  let yOffset = CONTENT_TOP_PAD;
 
   for (const row of rows) {
     if (row.type === 'lane-header') {
@@ -358,8 +360,9 @@ export function renderGantt(
       const indent = '  '.repeat(group.depth);
       const toggleIcon = isCollapsed ? '►' : '▼';
 
-      // Group label with toggle
-      const groupColor = group.color || palette.textMuted;
+      // Group label with toggle — resolve tag color from group metadata
+      const tagColor = resolveTagColor(group.metadata, resolved.tagGroups, currentActiveGroup, true);
+      const groupColor = (tagColor && tagColor !== '#999999') ? tagColor : (group.color || palette.textMuted);
       const labelG = svg
         .append('g')
         .attr('class', 'gantt-group-label')
@@ -505,7 +508,11 @@ export function renderGantt(
           if (onClickItem) onClickItem(task.lineNumber);
         })
         .on('mouseenter', () => {
-          highlightTask(g, svg, task.id);
+          if (rt.isMilestone) {
+            highlightMilestone(g, svg, task.id);
+          } else {
+            highlightTask(g, svg, task.id);
+          }
         })
         .on('mouseleave', () => {
           resetHighlight(g, svg);
@@ -534,13 +541,14 @@ export function renderGantt(
           .attr('stroke-width', 1.5)
           .attr('data-line-number', String(task.lineNumber))
           .attr('data-task-name', task.label)
+          .attr('data-task-id', task.id)
           .attr('data-group', topGroup)
           .style('cursor', onClickItem ? 'pointer' : 'default')
           .on('click', () => {
             if (onClickItem) onClickItem(task.lineNumber);
           })
           .on('mouseenter', () => {
-            highlightTaskLabel(svg, task.lineNumber);
+            highlightMilestone(g, svg, task.id);
             showGanttDateIndicators(g, xScale, rt.startDate, null, innerHeight, barColor);
             // Show label next to diamond
             g.append('text')
@@ -555,7 +563,7 @@ export function renderGantt(
               .text(task.label);
           })
           .on('mouseleave', () => {
-            resetTaskLabels(svg);
+            resetHighlight(g, svg);
             hideGanttDateIndicators(g);
             g.selectAll('.gantt-milestone-hover-label').remove();
           });
@@ -1138,6 +1146,7 @@ function renderTagLegend(
   currentSwimlaneGroup?: string | null,
   onSwimlaneChange?: (group: string | null) => void,
   legendViewMode?: boolean,
+  resolvedTasks?: ResolvedTask[],
 ): void {
   const groupBg = isDark
     ? mix(palette.surface, palette.bg, 50)
@@ -1155,6 +1164,32 @@ function renderTagLegend(
     visibleGroups = tagGroups;
   }
 
+  // Build set of used tag values per group from resolved tasks
+  const usedValues = new Map<string, Set<string>>();
+  if (resolvedTasks) {
+    for (const group of visibleGroups) {
+      const key = group.name.toLowerCase();
+      const used = new Set<string>();
+      for (const rt of resolvedTasks) {
+        const val = rt.effectiveMetadata[key];
+        if (val) used.add(val.toLowerCase());
+      }
+      usedValues.set(key, used);
+    }
+  }
+
+  // Filter entries to only those used in the current view
+  const filteredEntries = new Map<string, TagEntry[]>();
+  for (const group of visibleGroups) {
+    const key = group.name.toLowerCase();
+    const used = usedValues.get(key);
+    if (used && used.size > 0) {
+      filteredEntries.set(key, group.entries.filter(e => used.has(e.value.toLowerCase())));
+    } else {
+      filteredEntries.set(key, group.entries);
+    }
+  }
+
   // Compute per-group widths
   const groupWidths: number[] = [];
   let totalW = 0;
@@ -1166,8 +1201,9 @@ function renderTagLegend(
     const pillW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD + iconReserve;
     let groupW = pillW;
     if (isActive) {
+      const entries = filteredEntries.get(group.name.toLowerCase()) ?? group.entries;
       let entriesW = 0;
-      for (const entry of group.entries) {
+      for (const entry of entries) {
         entriesW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
       groupW = LEGEND_CAPSULE_PAD * 2 + pillW + 4 + entriesW;
@@ -1278,11 +1314,12 @@ function renderTagLegend(
         });
     }
 
-    // Entries (when active — expanded color group)
+    // Entries (when active — expanded color group, only used values)
     if (isActive) {
       const tagKey = group.name.toLowerCase();
+      const entries = filteredEntries.get(tagKey) ?? group.entries;
       let ex = pillXOff + pillW + LEGEND_CAPSULE_PAD + 4;
-      for (const entry of group.entries) {
+      for (const entry of entries) {
         const entryValue = entry.value.toLowerCase();
 
         // Wrap dot + label in a <g> for hover targeting
@@ -1456,48 +1493,72 @@ function renderErasAndMarkers(
       });
   }
 
-  // Markers: vertical dashed lines
+  // Markers: label → diamond → dashed line (same layout as timeline)
   for (const marker of resolved.markers) {
     const color = marker.color || palette.accent || '#d08770';
     const mx = xScale(parseDateToFractionalYear(marker.date));
     const markerDate = parseDateStringToDate(marker.date);
+    const diamondSize = 5;
+    const labelY = -24;
+    const diamondY = labelY + 14;
 
     const markerG = g.append('g')
-      .attr('class', 'gantt-marker-group');
+      .attr('class', 'gantt-marker-group')
+      .style('cursor', 'pointer');
+
+    // Invisible hit rect for easier clicking/hovering
+    markerG.append('rect')
+      .attr('x', mx - 40)
+      .attr('y', labelY - 12)
+      .attr('width', 80)
+      .attr('height', innerHeight - labelY + 12)
+      .attr('fill', 'transparent')
+      .attr('pointer-events', 'all');
+
+    // Label above diamond
+    markerG.append('text')
+      .attr('class', 'gantt-marker-label')
+      .attr('x', mx)
+      .attr('y', labelY)
+      .attr('text-anchor', 'middle')
+      .attr('font-size', '11px')
+      .attr('font-weight', '600')
+      .attr('fill', color)
+      .text(marker.label);
+
+    // Diamond below label
+    markerG.append('path')
+      .attr('d', `M${mx},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`)
+      .attr('fill', color)
+      .attr('opacity', 0.9);
 
+    // Dashed line from diamond down
     markerG.append('line')
       .attr('class', 'gantt-marker')
       .attr('x1', mx)
-      .attr('y1', 0)
+      .attr('y1', diamondY + diamondSize)
       .attr('x2', mx)
       .attr('y2', innerHeight)
       .attr('stroke', color)
       .attr('stroke-width', 1.5)
-      .attr('stroke-dasharray', '6 3')
-      .attr('opacity', 0.5);
-
-    // Diamond indicator (at top of chart area)
-    markerG.append('polygon')
-      .attr('points', diamondPoints(mx, 6, 8))
-      .attr('fill', color)
+      .attr('stroke-dasharray', '6 4')
       .attr('opacity', 0.5);
 
-    // Label (inside chart at top)
-    markerG.append('text')
-      .attr('class', 'gantt-marker-label')
-      .attr('x', mx + 8)
-      .attr('y', 10)
-      .attr('font-size', '9px')
-      .attr('fill', color)
-      .attr('opacity', 0.7)
-      .attr('pointer-events', 'none')
-      .text(marker.label);
-
+    // Hide marker visuals on hover — showGanttDateIndicators replaces them
+    const markerLine = markerG.select('.gantt-marker');
+    const markerLabel = markerG.select('.gantt-marker-label');
+    const markerDiamond = markerG.select('path');
     markerG
       .on('mouseenter', () => {
+        markerLine.attr('opacity', 0);
+        markerLabel.attr('opacity', 0);
+        markerDiamond.attr('opacity', 0);
         showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color);
       })
       .on('mouseleave', () => {
+        markerLine.attr('opacity', 0.5);
+        markerLabel.attr('opacity', 1);
+        markerDiamond.attr('opacity', 0.9);
         hideGanttDateIndicators(g);
       });
   }
@@ -1615,6 +1676,8 @@ function highlightGroup(
   // Fade lane elements
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightLane(
@@ -1654,6 +1717,8 @@ function highlightLane(
   // Fade group elements (not relevant in lane mode)
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightTask(
@@ -1679,6 +1744,35 @@ function highlightTask(
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+}
+
+function highlightMilestone(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
+  taskId: string,
+): void {
+  // Fade tasks
+  g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+  // Fade milestones not matching
+  g.selectAll<SVGElement, unknown>('.gantt-milestone').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-task-id') === taskId ? 1 : FADE_OPACITY);
+  });
+  // Fade task labels not matching
+  svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-task-id') === taskId ? 1 : FADE_OPACITY);
+  });
+  // Fade group/lane elements
+  g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+  g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightTaskLabel(
@@ -1709,6 +1803,7 @@ function resetHighlight(
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', 0.5);
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', 1);
 }
 
 // ── Row Building ────────────────────────────────────────────
@@ -1821,20 +1916,16 @@ export function buildTagLaneRowList(
     }
   }
 
-  // Emit lanes in tag entry declaration order
+  // Emit lanes in tag entry declaration order (skip empty lanes)
   for (const entry of tagGroup.entries) {
     const entryKey = entry.value.toLowerCase();
     const tasks = buckets.get(entryKey) ?? [];
+    if (tasks.length === 0) continue;
     // Sort tasks within lane by start date
     tasks.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
 
-    // Compute aggregate progress
-    const progressValues = tasks
-      .map(t => t.task.progress)
-      .filter((p): p is number => p !== null);
-    const aggregateProgress = progressValues.length > 0
-      ? progressValues.reduce((a, b) => a + b, 0) / progressValues.length
-      : null;
+    // Compute duration-weighted aggregate progress (tasks without progress count as 0%)
+    const aggregateProgress = durationWeightedProgress(tasks);
 
     // Compute lane date range from tasks
     const laneStartDate = tasks.length > 0 ? new Date(Math.min(...tasks.map(t => t.startDate.getTime()))) : null;
@@ -1861,12 +1952,7 @@ export function buildTagLaneRowList(
   // Append unbucketed tasks as "No {GroupName}" lane
   if (unbucketed.length > 0) {
     unbucketed.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
-    const progressValues = unbucketed
-      .map(t => t.task.progress)
-      .filter((p): p is number => p !== null);
-    const aggregateProgress = progressValues.length > 0
-      ? progressValues.reduce((a, b) => a + b, 0) / progressValues.length
-      : null;
+    const aggregateProgress = durationWeightedProgress(unbucketed);
 
     const noLaneStartDate = unbucketed.length > 0 ? new Date(Math.min(...unbucketed.map(t => t.startDate.getTime()))) : null;
     const noLaneEndDate = unbucketed.length > 0 ? new Date(Math.max(...unbucketed.map(t => t.endDate.getTime()))) : null;
@@ -1895,6 +1981,22 @@ export function buildTagLaneRowList(
 
 // ── Helpers ─────────────────────────────────────────────────
 
+/** Duration-weighted progress: tasks without explicit progress count as 0%. Returns null if no task has progress. */
+function durationWeightedProgress(tasks: ResolvedTask[]): number | null {
+  let totalDuration = 0;
+  let totalProgress = 0;
+  let hasProgress = false;
+  for (const rt of tasks) {
+    const dur = rt.endDate.getTime() - rt.startDate.getTime();
+    totalDuration += dur;
+    if (rt.task.progress !== null) {
+      totalProgress += rt.task.progress * dur;
+      hasProgress = true;
+    }
+  }
+  return hasProgress && totalDuration > 0 ? totalProgress / totalDuration : null;
+}
+
 function dateToFractionalYear(d: Date): number {
   const y = d.getFullYear();
   const startOfYear = new Date(y, 0, 1);
@@ -1970,6 +2072,22 @@ function showGanttDateIndicators(
     const endPos = xScale(dateToFractionalYear(endDate));
     const endLabel = formatGanttDate(endDate);
 
+    // When dates are close, push labels apart so they don't overlap.
+    // ~90px is roughly the width of a date label like "Aug 12, 2026" at 10px.
+    const minLabelGap = 90;
+    const gap = endPos - startPos;
+    let startLabelX = startPos;
+    let endLabelX = endPos;
+    let startAnchor = 'middle';
+    let endAnchor = 'middle';
+    if (gap < minLabelGap) {
+      const mid = (startPos + endPos) / 2;
+      startLabelX = mid - minLabelGap / 2;
+      endLabelX = mid + minLabelGap / 2;
+      startAnchor = 'middle';
+      endAnchor = 'middle';
+    }
+
     // End date — dashed vertical line
     g.append('line')
       .attr('class', 'gantt-hover-date')
@@ -1982,12 +2100,20 @@ function showGanttDateIndicators(
       .attr('stroke-dasharray', '4 4')
       .attr('opacity', 0.6);
 
+    // Reposition start labels to avoid overlap
+    g.selectAll<SVGTextElement, unknown>('text.gantt-hover-date').each(function () {
+      const el = d3Selection.select(this);
+      if (el.text() === startLabel) {
+        el.attr('x', startLabelX).attr('text-anchor', startAnchor);
+      }
+    });
+
     // End date — top label
     g.append('text')
       .attr('class', 'gantt-hover-date')
-      .attr('x', endPos)
+      .attr('x', endLabelX)
       .attr('y', -tickLen - 4)
-      .attr('text-anchor', 'middle')
+      .attr('text-anchor', endAnchor)
       .attr('fill', color)
       .attr('font-size', '10px')
       .attr('font-weight', '600')
@@ -1996,9 +2122,9 @@ function showGanttDateIndicators(
     // End date — bottom label
     g.append('text')
       .attr('class', 'gantt-hover-date')
-      .attr('x', endPos)
+      .attr('x', endLabelX)
       .attr('y', innerHeight + tickLen + 12)
-      .attr('text-anchor', 'middle')
+      .attr('text-anchor', endAnchor)
       .attr('fill', color)
       .attr('font-size', '10px')
       .attr('font-weight', '600')

package/src/org/parser.ts

@@ -7,6 +7,7 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
+  MULTIPLE_PIPE_WARNING,
   CHART_TYPE_RE,
   TITLE_RE,
   OPTION_RE,
@@ -280,14 +281,14 @@ export function parseOrg(
       // Otherwise it's an orphan metadata error
       if (indent === 0) {
         // Treat as a node label (e.g., "Dr. Smith: Surgeon" is a valid name)
-        const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap);
+        const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap, pushWarning);
         attachNode(node, indent, indentStack, result);
       } else {
         pushError(lineNumber, 'Metadata has no parent node');
       }
     } else {
       // It's a node label — possibly with single-line pipe-delimited metadata
-      const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap);
+      const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap, pushWarning);
       attachNode(node, indent, indentStack, result);
     }
   }
@@ -326,15 +327,16 @@ function parseNodeLabel(
   lineNumber: number,
   palette: PaletteColors | undefined,
   counter: number,
-  aliasMap: Map<string, string> = new Map()
+  aliasMap: Map<string, string> = new Map(),
+  warnFn?: (line: number, msg: string) => void,
 ): OrgNode {
-  // Check for single-line compact metadata: "Alice Park | role: Senior | location: NY"
+  // Check for single-line compact metadata: "Alice Park | role: Senior, location: NY"
   const segments = trimmed.split('|').map((s) => s.trim());
 
   let rawLabel = segments[0];
   const { label, color } = extractColor(rawLabel, palette);
 
-  const metadata = parsePipeMetadata(segments, aliasMap);
+  const metadata = parsePipeMetadata(segments, aliasMap, warnFn ? () => warnFn(lineNumber, MULTIPLE_PIPE_WARNING) : undefined);
 
   return {
     id: `node-${counter}`,

package/src/sequence/parser.ts

@@ -6,7 +6,7 @@ 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 } from '../utils/parsing';
+import { measureIndent, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from '../utils/parsing';
 import type { TagGroup } from '../utils/tag-groups';
 import { matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 
@@ -237,12 +237,13 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   const aliasMap = new Map<string, string>();
 
   /** Split pipe metadata from a line: "core | k: v" → { core, meta } */
-  const splitPipe = (text: string): { core: string; meta?: Record<string, string> } => {
+  const splitPipe = (text: string, ln?: number): { core: string; meta?: Record<string, string> } => {
     const idx = text.indexOf('|');
     if (idx < 0) return { core: text };
     const core = text.substring(0, idx).trimEnd();
     const segments = text.substring(idx).split('|');
-    const meta = parsePipeMetadata(segments, aliasMap);
+    const warnFn = ln != null ? () => pushWarning(ln, MULTIPLE_PIPE_WARNING) : undefined;
+    const meta = parsePipeMetadata(segments, aliasMap, warnFn);
     return Object.keys(meta).length > 0 ? { core, meta } : { core };
   };
 
@@ -287,7 +288,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       if (gpipeIdx >= 0) {
         const nameAndColor = groupName.substring(0, gpipeIdx).trimEnd();
         const segments = groupName.substring(gpipeIdx).split('|');
-        const meta = parsePipeMetadata(segments, aliasMap);
+        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(/^(.+?)\(([^)]+)\)$/);
@@ -444,7 +445,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // Parse "Name is a type [aka Alias]" declarations (always top-level)
-    const { core: isACore, meta: isAMeta } = splitPipe(trimmed);
+    const { core: isACore, meta: isAMeta } = splitPipe(trimmed, lineNumber);
     const isAMatch = isACore.match(IS_A_PATTERN);
     if (isAMatch) {
       contentStarted = true;
@@ -491,7 +492,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // Parse standalone "Name position N" (no "is a" type)
-    const { core: posCore, meta: posMeta } = splitPipe(trimmed);
+    const { core: posCore, meta: posMeta } = splitPipe(trimmed, lineNumber);
     const posOnlyMatch = posCore.match(POSITION_ONLY_PATTERN);
     if (posOnlyMatch) {
       contentStarted = true;
@@ -523,7 +524,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
     // Colored participant declaration — "Name(color)" at any level
     // Color syntax is deprecated — emit warning and register without color
-    const { core: colorCore, meta: colorMeta } = splitPipe(trimmed);
+    const { core: colorCore, meta: colorMeta } = splitPipe(trimmed, lineNumber);
     const coloredMatch = colorCore.match(COLORED_PARTICIPANT_PATTERN);
     if (coloredMatch && !ARROW_PATTERN.test(colorCore)) {
       const id = coloredMatch[1];
@@ -554,7 +555,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     // Bare participant name — either inside an active group (indented) or top-level declaration
     // Supports pipe metadata: "  API | c: Gateway" or "Tapin2 | l:Park"
     {
-      const { core: bareCore, meta: bareMeta } = splitPipe(trimmed);
+      const { core: bareCore, meta: bareMeta } = splitPipe(trimmed, lineNumber);
       const inGroup = activeGroup && measureIndent(raw) > 0;
       if (/^\S+$/.test(bareCore) && !ARROW_PATTERN.test(bareCore) && (inGroup || !contentStarted || bareMeta)) {
         contentStarted = true;
@@ -600,7 +601,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // Split pipe metadata before arrow parsing (arrows use $ anchor)
-    const { core: arrowCore, meta: arrowMeta } = splitPipe(trimmed);
+    const { core: arrowCore, meta: arrowMeta } = splitPipe(trimmed, lineNumber);
 
     // Parse message lines first — arrows take priority over keywords
     // Reject "async" keyword prefix — use ~> instead

package/src/sitemap/parser.ts

@@ -11,6 +11,7 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
+  MULTIPLE_PIPE_WARNING,
   CHART_TYPE_RE,
   TITLE_RE,
   OPTION_RE,
@@ -360,7 +361,7 @@ export function parseSitemap(
     } else if (metadataMatch && indentStack.length === 0) {
       // Could be a node label containing ':'
       if (indent === 0) {
-        const node = parseNodeLabel(trimmed, lineNumber, palette, ++nodeCounter, aliasMap);
+        const node = parseNodeLabel(trimmed, lineNumber, palette, ++nodeCounter, aliasMap, pushWarning);
         attachNode(node, indent, indentStack, result);
         labelToNode.set(node.label.toLowerCase(), node);
       } else {
@@ -368,7 +369,7 @@ export function parseSitemap(
       }
     } else {
       // Node label — possibly with pipe-delimited metadata
-      const node = parseNodeLabel(trimmed, lineNumber, palette, ++nodeCounter, aliasMap);
+      const node = parseNodeLabel(trimmed, lineNumber, palette, ++nodeCounter, aliasMap, pushWarning);
       attachNode(node, indent, indentStack, result);
       labelToNode.set(node.label.toLowerCase(), node);
     }
@@ -430,11 +431,12 @@ function parseNodeLabel(
   palette: PaletteColors | undefined,
   counter: number,
   aliasMap: Map<string, string> = new Map(),
+  warnFn?: (line: number, msg: string) => void,
 ): SitemapNode {
   const segments = trimmed.split('|').map((s) => s.trim());
   const rawLabel = segments[0];
   const { label, color } = extractColor(rawLabel, palette);
-  const metadata = parsePipeMetadata(segments, aliasMap);
+  const metadata = parsePipeMetadata(segments, aliasMap, warnFn ? () => warnFn(lineNumber, MULTIPLE_PIPE_WARNING) : undefined);
 
   return {
     id: `node-${counter}`,

package/src/utils/parsing.ts

@@ -118,23 +118,34 @@ export function parseSeriesNames(
   return { series, names, nameColors, newIndex };
 }
 
-/** Parse pipe-delimited metadata from segments after the first (name) segment. */
+/** Warning message for multiple pipes on a single line. */
+export const MULTIPLE_PIPE_WARNING =
+  'Use a single "|" to start metadata, then separate items with commas.';
+
+/**
+ * Parse metadata from segments after the first (name) segment.
+ * A single `|` separates the label from metadata; items after the pipe are comma-delimited.
+ * Multiple pipes are treated as commas for backward compatibility but trigger a warning.
+ */
 export function parsePipeMetadata(
   segments: string[],
   aliasMap: Map<string, string> = new Map(),
+  warnMultiplePipes?: () => void,
 ): Record<string, string> {
+  if (segments.length > 2 && warnMultiplePipes) {
+    warnMultiplePipes();
+  }
   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;
-      }
+  const raw = segments.slice(1).join(',');
+  for (const part of raw.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;