@diagrammo/dgmo 0.8.21 → 0.8.23

package/src/render.ts

@@ -1,10 +1,6 @@
 import { renderForExport } from './d3';
 import { renderExtendedChartForExport } from './echarts';
-import {
-  parseDgmoChartType,
-  getRenderCategory,
-  parseDgmo,
-} from './dgmo-router';
+import { getRenderCategory, parseDgmo } from './dgmo-router';
 import type { DgmoError } from './diagnostics';
 import { getPalette } from './palettes/registry';
 import type { CompactViewState } from './sharing';
@@ -84,9 +80,7 @@ export async function render(
   const paletteColors =
     getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];
 
-  const { diagnostics } = parseDgmo(content);
-
-  const chartType = parseDgmoChartType(content);
+  const { diagnostics, chartType } = parseDgmo(content);
   const category = chartType ? getRenderCategory(chartType) : null;
 
   // Build viewState from legendState (backwards compat) or use provided viewState

package/src/sequence/parser.ts

@@ -236,6 +236,8 @@ type NoteParseResult =
 function parseNoteLine(
   trimmed: string,
   participants: SequenceParticipant[],
+  participantIds: Set<string>,
+  sortedParticipantsCache: SequenceParticipant[],
   lastMsgFrom: string | null
 ): NoteParseResult {
   const lower = trimmed.toLowerCase();
@@ -256,7 +258,7 @@ function parseNoteLine(
       if (!lastMsgFrom) return { kind: 'skip' };
       participantId = lastMsgFrom;
     }
-    if (participants.some((p) => p.id === participantId)) {
+    if (participantIds.has(participantId)) {
       return { kind: 'multi-head', position, participantId };
     }
     // Participant not found — fall through to bare-note handler for proper resolution
@@ -284,13 +286,17 @@ function parseNoteLine(
       if (!afterPos) {
         // Just `note left` or `note right` — multi-line head
         if (!lastMsgFrom) return { kind: 'skip' };
-        if (!participants.some((p) => p.id === lastMsgFrom))
-          return { kind: 'skip' };
+        if (!participantIds.has(lastMsgFrom)) return { kind: 'skip' };
         return { kind: 'multi-head', position, participantId: lastMsgFrom };
       }
 
       // Try to match a known participant at the start of afterPos
-      const resolved = resolveParticipantAndText(afterPos, participants);
+      const resolved = resolveParticipantAndText(
+        afterPos,
+        participants,
+        participantIds,
+        sortedParticipantsCache
+      );
       if (resolved) {
         if (resolved.text) {
           return {
@@ -316,8 +322,7 @@ function parseNoteLine(
 
       // Without `of`, treat remaining text as note content on the last-msg sender
       if (!lastMsgFrom) return { kind: 'skip' };
-      if (!participants.some((p) => p.id === lastMsgFrom))
-        return { kind: 'skip' };
+      if (!participantIds.has(lastMsgFrom)) return { kind: 'skip' };
       return {
         kind: 'single',
         position,
@@ -328,8 +333,7 @@ function parseNoteLine(
 
     // Plain `note text` — default position, last msg sender
     if (!lastMsgFrom) return { kind: 'skip' };
-    if (!participants.some((p) => p.id === lastMsgFrom))
-      return { kind: 'skip' };
+    if (!participantIds.has(lastMsgFrom)) return { kind: 'skip' };
     return {
       kind: 'single',
       position: 'right',
@@ -348,7 +352,9 @@ function parseNoteLine(
  */
 function resolveParticipantAndText(
   input: string,
-  participants: SequenceParticipant[]
+  participants: SequenceParticipant[],
+  participantIds: Set<string>,
+  sortedParticipantsCache: SequenceParticipant[]
 ): { participantId: string; text: string } | null {
   // Handle quoted participant: `"Auth Service" text`
   if (input.startsWith('"') || input.startsWith("'")) {
@@ -356,7 +362,7 @@ function resolveParticipantAndText(
     const endQuote = input.indexOf(quote, 1);
     if (endQuote > 0) {
       const name = input.substring(1, endQuote);
-      if (participants.some((p) => p.id === name)) {
+      if (participantIds.has(name)) {
         const text = input.substring(endQuote + 1).trim();
         return { participantId: name, text };
       }
@@ -364,8 +370,8 @@ function resolveParticipantAndText(
     return null;
   }
 
-  // Sort participants by name length (longest first) for greedy matching
-  const sorted = [...participants].sort((a, b) => b.id.length - a.id.length);
+  // Use pre-sorted participants (longest first) for greedy matching
+  const sorted = sortedParticipantsCache;
   for (const p of sorted) {
     if (input.startsWith(p.id)) {
       const remaining = input.substring(p.id.length);
@@ -443,6 +449,25 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   // Group parsing state — tracks the active [Group] heading
   let activeGroup: SequenceGroup | null = null;
 
+  // Fast lookup set for participant existence checks (mirrors result.participants)
+  const participantIds = new Set<string>();
+
+  // Cache sorted participants (longest ID first) for greedy name matching in notes.
+  // Invalidated whenever a new participant is added.
+  let sortedParticipantsCache: SequenceParticipant[] = [];
+  let sortedCacheDirty = true;
+
+  /** Get sorted participants, rebuilding cache only when dirty. */
+  const getSortedParticipants = (): SequenceParticipant[] => {
+    if (sortedCacheDirty) {
+      sortedParticipantsCache = [...result.participants].sort(
+        (a, b) => b.id.length - a.id.length
+      );
+      sortedCacheDirty = false;
+    }
+    return sortedParticipantsCache;
+  };
+
   // Track participant → group name for duplicate membership detection
   const participantGroupMap = new Map<string, string>();
 
@@ -774,7 +799,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const position = posMatch ? parseInt(posMatch[1], 10) : undefined;
 
       // Avoid duplicate participant declarations
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: alias || id,
@@ -808,7 +835,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const id = posOnlyMatch[1];
       const position = parseInt(posOnlyMatch[2], 10);
 
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: id,
@@ -846,7 +875,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         `'${id}(${color})' syntax is no longer supported — use 'tag:' groups for coloring`
       );
       contentStarted = true;
-      if (!result.participants.some((p) => p.id === id)) {
+      if (!participantIds.has(id)) {
+        participantIds.add(id);
+        sortedCacheDirty = true;
         result.participants.push({
           id,
           label: id,
@@ -882,7 +913,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       ) {
         contentStarted = true;
         const id = bareCore;
-        if (!result.participants.some((p) => p.id === id)) {
+        if (!participantIds.has(id)) {
+          participantIds.add(id);
           result.participants.push({
             id,
             label: id,
@@ -965,7 +997,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       currentContainer().push(msg);
 
       // Auto-register participants
-      if (!result.participants.some((p) => p.id === from)) {
+      if (!participantIds.has(from)) {
+        participantIds.add(from);
+        sortedCacheDirty = true;
         result.participants.push({
           id: from,
           label: from,
@@ -973,7 +1007,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
           lineNumber,
         });
       }
-      if (!result.participants.some((p) => p.id === to)) {
+      if (!participantIds.has(to)) {
+        participantIds.add(to);
+        sortedCacheDirty = true;
         result.participants.push({
           id: to,
           label: to,
@@ -1050,7 +1086,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       result.messages.push(msg);
       currentContainer().push(msg);
 
-      if (!result.participants.some((p) => p.id === from)) {
+      if (!participantIds.has(from)) {
+        participantIds.add(from);
+        sortedCacheDirty = true;
         result.participants.push({
           id: from,
           label: from,
@@ -1058,7 +1096,9 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
           lineNumber,
         });
       }
-      if (!result.participants.some((p) => p.id === to)) {
+      if (!participantIds.has(to)) {
+        participantIds.add(to);
+        sortedCacheDirty = true;
         result.participants.push({
           id: to,
           label: to,
@@ -1182,6 +1222,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const noteParsed = parseNoteLine(
         trimmed,
         result.participants,
+        participantIds,
+        getSortedParticipants(),
         lastMsgFrom
       );
       if (noteParsed) {

package/src/sequence/renderer.ts

@@ -28,7 +28,11 @@ import type { ResolvedTagMap } from './tag-resolution';
 import { resolveActiveTagGroup } from '../utils/tag-groups';
 import { LEGEND_HEIGHT } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
-import type { LegendConfig, LegendState } from '../utils/legend-types';
+import type {
+  LegendCallbacks,
+  LegendConfig,
+  LegendState,
+} from '../utils/legend-types';
 import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 
 // ============================================================
@@ -73,14 +77,26 @@ function wrapTextLines(text: string, maxChars: number): string[] {
     if (line.length <= maxChars) {
       wrapped.push(line);
     } else {
-      const words = line.split(' ');
-      let current = '';
+      // Preserve bullet prefix: keep "- " glued to the first content word
+      // so wrapping never produces a bare "-" line.
+      const bulletPrefix = line.startsWith('- ') ? '- ' : '';
+      const content = bulletPrefix ? line.slice(2) : line;
+      const words = content.split(' ');
+      let current = bulletPrefix;
       for (const word of words) {
-        if (current && (current + ' ' + word).length > maxChars) {
+        const candidate = current ? current + ' ' + word : word;
+        if (
+          current &&
+          current !== bulletPrefix &&
+          candidate.length > maxChars
+        ) {
           wrapped.push(current);
           current = word;
         } else {
-          current = current ? current + ' ' + word : word;
+          current =
+            current && current !== bulletPrefix
+              ? current + ' ' + word
+              : current + word;
         }
       }
       if (current) wrapped.push(current);
@@ -544,6 +560,10 @@ export interface SequenceRenderOptions {
   expandedNoteLines?: Set<number>; // keyed by note lineNumber; undefined = all expanded (CLI default)
   exportWidth?: number; // Explicit width for CLI/export rendering (bypasses getBoundingClientRect)
   activeTagGroup?: string | null; // Active tag group name for tag-driven recoloring; null = explicitly none
+  expandAllNotes?: boolean; // Whether the "Expand Notes" toggle is active
+  onExpandAllNotes?: (expand: boolean) => void; // Toggle all notes expanded/collapsed
+  controlsExpanded?: boolean; // Controls group expanded state (managed by React)
+  onToggleControlsExpand?: () => void; // Callback to toggle controls group
 }
 
 /**
@@ -1716,39 +1736,33 @@ export function renderSequenceDiagram(
     }
   }
 
-  // Render legend pills for tag groups
-  if (parsed.tagGroups.length > 0) {
-    const legendY = TOP_MARGIN + titleOffset;
-    // Resolve tag colors for legend entries
-    const resolvedGroups = parsed.tagGroups
-      .filter((tg) => tg.entries.length > 0)
-      .map((tg) => ({
-        name: tg.name,
-        entries: tg.entries.map((e) => ({
-          value: e.value,
-          color: e.color,
-        })),
-      }));
-    const legendConfig: LegendConfig = {
-      groups: resolvedGroups,
-      position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
-    };
-    const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
-    const legendG = svg
-      .append('g')
-      .attr('class', 'sequence-legend')
-      .attr('transform', `translate(0,${legendY})`);
-    renderLegendD3(
-      legendG,
-      legendConfig,
-      legendState,
-      palette,
-      isDark,
-      undefined,
-      svgWidth
-    );
-  }
+  // Collect all note line numbers (for controls group visibility + "all expanded" check)
+  const allNoteLineNumbers: number[] = [];
+  const collectNoteLines = (els: SequenceElement[]): void => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        allNoteLineNumbers.push(el.lineNumber);
+      } else if (isSequenceBlock(el)) {
+        collectNoteLines(el.children);
+        if ('elseChildren' in el) collectNoteLines(el.elseChildren);
+        if ('branches' in el && Array.isArray(el.branches)) {
+          for (const branch of el.branches) {
+            collectNoteLines(branch.children);
+          }
+        }
+      }
+    }
+  };
+  collectNoteLines(elements);
+
+  // Show controls group only in interactive mode (expandedNoteLines defined)
+  // when notes exist and collapse-notes is not disabled
+  const showNotesControl =
+    allNoteLineNumbers.length > 0 &&
+    !collapseNotesDisabled &&
+    expandedNoteLines !== undefined;
+
+  const hasTagGroups = parsed.tagGroups.length > 0;
 
   // Build set of collapsed group names for drill-bar rendering
   const collapsedGroupNames = new Set<string>();
@@ -2113,7 +2127,7 @@ export function renderSequenceDiagram(
               firstBranchStep = Math.min(firstBranchStep, first);
           }
           if (firstBranchStep < Infinity) {
-            const dividerY = stepY(firstBranchStep) - stepSpacing / 2;
+            const dividerY = stepY(firstBranchStep) - BLOCK_HEADER_SPACE;
             deferredLines.push({
               x1: frameX,
               y1: dividerY,
@@ -2142,7 +2156,7 @@ export function renderSequenceDiagram(
             firstElseStep = Math.min(firstElseStep, first);
         }
         if (firstElseStep < Infinity) {
-          const dividerY = stepY(firstElseStep) - stepSpacing / 2;
+          const dividerY = stepY(firstElseStep) - BLOCK_HEADER_SPACE;
           deferredLines.push({
             x1: frameX,
             y1: dividerY,
@@ -2805,6 +2819,73 @@ export function renderSequenceDiagram(
   if (elements && elements.length > 0) {
     renderNoteElements(elements);
   }
+
+  // Render legend LAST so it sits on top of all other SVG elements
+  // (group boxes, lifelines, participants, etc.) and can receive clicks.
+  if (hasTagGroups || showNotesControl) {
+    const controlsExpanded = options?.controlsExpanded ?? false;
+
+    const legendY = TOP_MARGIN + titleOffset;
+    const resolvedGroups = parsed.tagGroups
+      .filter((tg) => tg.entries.length > 0)
+      .map((tg) => ({
+        name: tg.name,
+        entries: tg.entries.map((e) => ({
+          value: e.value,
+          color: e.color,
+        })),
+      }));
+
+    const allExpanded = showNotesControl && (options?.expandAllNotes ?? false);
+
+    const controlsGroup = showNotesControl
+      ? {
+          toggles: [
+            {
+              id: 'expand-all-notes',
+              type: 'toggle' as const,
+              label: 'Expand Notes',
+              active: allExpanded,
+              onToggle: () => {},
+            },
+          ],
+        }
+      : undefined;
+
+    const legendConfig: LegendConfig = {
+      groups: resolvedGroups,
+      position: { placement: 'top-center', titleRelation: 'below-title' },
+      mode: 'fixed',
+      controlsGroup,
+    };
+    const legendState: LegendState = {
+      activeGroup: activeTagGroup ?? null,
+      controlsExpanded,
+    };
+
+    const legendCallbacks: LegendCallbacks = {
+      onControlsExpand: () => {
+        options?.onToggleControlsExpand?.();
+      },
+      onControlsToggle: (_toggleId: string, active: boolean) => {
+        options?.onExpandAllNotes?.(active);
+      },
+    };
+
+    const legendG = svg
+      .append('g')
+      .attr('class', 'sequence-legend')
+      .attr('transform', `translate(0,${legendY})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      legendCallbacks,
+      svgWidth
+    );
+  }
 }
 
 /**
@@ -2843,6 +2924,31 @@ export function buildNoteMessageMap(
   return map;
 }
 
+/**
+ * Collect all note line numbers from a sequence diagram's elements.
+ * Used by the app to compute the "expand all" set.
+ */
+export function collectNoteLineNumbers(elements: SequenceElement[]): number[] {
+  const result: number[] = [];
+  const walk = (els: SequenceElement[]): void => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        result.push(el.lineNumber);
+      } else if (isSequenceBlock(el)) {
+        walk(el.children);
+        if (el.elseIfBranches) {
+          for (const branch of el.elseIfBranches) {
+            walk(branch.children);
+          }
+        }
+        walk(el.elseChildren);
+      }
+    }
+  };
+  walk(elements);
+  return result;
+}
+
 function renderParticipant(
   svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   participant: SequenceParticipant,

package/src/sharing.ts

@@ -32,6 +32,7 @@ export interface CompactViewState {
   io?: Record<string, number>; // instance overrides (infra)
   hd?: boolean; // hide descriptions (mindmap)
   cbd?: boolean; // color by depth (mindmap)
+  rq?: string; // radar quadrant focus (tech-radar position)
 }
 
 export interface DecodedDiagramUrl {

package/src/sitemap/layout.ts

@@ -22,6 +22,7 @@ export interface SitemapLayoutNode {
   metadata: Record<string, string>;
   /** Original (unfiltered) metadata for tag-based coloring and hover dimming */
   tagMetadata: Record<string, string>;
+  description?: string[];
   isContainer: boolean;
   lineNumber: number;
   color?: string;
@@ -161,23 +162,36 @@ function filterMetadata(
   return filtered;
 }
 
-function computeCardWidth(label: string, meta: Record<string, string>): number {
+function computeCardWidth(
+  label: string,
+  meta: Record<string, string>,
+  descLines?: string[]
+): number {
   let maxChars = label.length;
   for (const [key, value] of Object.entries(meta)) {
     const lineChars = key.length + 2 + value.length;
     if (lineChars > maxChars) maxChars = lineChars;
   }
+  if (descLines) {
+    for (const dl of descLines) {
+      if (dl.length > maxChars) maxChars = dl.length;
+    }
+  }
   return Math.max(
     MIN_CARD_WIDTH,
     Math.ceil(maxChars * CHAR_WIDTH) + CARD_H_PAD * 2
   );
 }
 
-function computeCardHeight(meta: Record<string, string>): number {
+function computeCardHeight(
+  meta: Record<string, string>,
+  descLineCount = 0
+): number {
   const metaCount = Object.keys(meta).length;
-  if (metaCount === 0) return HEADER_HEIGHT + CARD_V_PAD;
+  const contentCount = metaCount + descLineCount;
+  if (contentCount === 0) return HEADER_HEIGHT + CARD_V_PAD;
   return (
-    HEADER_HEIGHT + SEPARATOR_GAP + metaCount * META_LINE_HEIGHT + CARD_V_PAD
+    HEADER_HEIGHT + SEPARATOR_GAP + contentCount * META_LINE_HEIGHT + CARD_V_PAD
   );
 }
 
@@ -307,8 +321,8 @@ function flattenNodes(
         parentPageId,
         meta,
         fullMeta: { ...node.metadata },
-        width: computeCardWidth(node.label, meta),
-        height: computeCardHeight(meta),
+        width: computeCardWidth(node.label, meta, node.description),
+        height: computeCardHeight(meta, node.description?.length ?? 0),
       });
       // Pages can have children too (nested pages) — this page becomes the parentPageId
       if (node.children.length > 0) {
@@ -519,6 +533,7 @@ export function layoutSitemap(
       label: node.label,
       metadata: flat.meta,
       tagMetadata: flat.fullMeta,
+      description: node.description,
       isContainer: false,
       lineNumber: node.lineNumber,
       color: resolveNodeColor(node, parsed.tagGroups, activeTagGroup ?? null),

package/src/sitemap/parser.ts

@@ -25,6 +25,7 @@ import {
   ALL_CHART_TYPES,
 } from '../utils/parsing';
 import type { SitemapNode, ParsedSitemap } from './types';
+import { tryStripDescriptionKeyword } from '../utils/description-helpers';
 
 // ============================================================
 // Regexes
@@ -370,13 +371,7 @@ export function parseSitemap(
       : trimmed.match(METADATA_RE);
 
     if (containerMatch) {
-      const rawLabel = containerMatch[1].trim();
-      const { label, color } = extractColor(
-        rawLabel,
-        palette,
-        result.diagnostics,
-        lineNumber
-      );
+      const label = containerMatch[1].trim();
 
       // Parse optional pipe metadata on the container line
       const pipeStr = containerMatch[2];
@@ -399,7 +394,6 @@ export function parseSitemap(
         parentId: null,
         isContainer: true,
         lineNumber,
-        color,
       };
 
       attachNode(node, indent, indentStack, result);
@@ -435,6 +429,17 @@ export function parseSitemap(
         pushError(lineNumber, 'Metadata has no parent node');
       }
     } else {
+      // Check if this is a description line for a parent node
+      const descResult = tryStripDescriptionKeyword(trimmed);
+      if (descResult.isKeyword && indentStack.length > 0) {
+        const parent = findParentNode(indent, indentStack);
+        if (parent) {
+          if (!parent.description) parent.description = [];
+          parent.description.push(descResult.text.trim());
+          continue;
+        }
+      }
+
       // Node label — possibly with pipe-delimited metadata
       const node = parseNodeLabel(
         trimmed,
@@ -531,31 +536,35 @@ function parseNodeLabel(
   counter: number,
   aliasMap: Map<string, string> = new Map(),
   warnFn?: (line: number, msg: string) => void,
-  diagnostics?: DgmoError[]
+  _diagnostics?: DgmoError[]
 ): SitemapNode {
   const segments = trimmed.split('|').map((s) => s.trim());
-  const rawLabel = segments[0];
-  const { label, color } = extractColor(
-    rawLabel,
-    palette,
-    diagnostics,
-    lineNumber
-  );
+  const label = segments[0];
   const metadata = parsePipeMetadata(
     segments,
     aliasMap,
     warnFn ? () => warnFn(lineNumber, MULTIPLE_PIPE_ERROR) : undefined
   );
 
+  // Extract description from pipe metadata into dedicated field
+  let description: string[] | undefined;
+  if ('description' in metadata) {
+    const descVal = metadata['description'].trim();
+    if (descVal) {
+      description = [descVal];
+    }
+    delete metadata['description'];
+  }
+
   return {
     id: `node-${counter}`,
     label,
     metadata,
+    description,
     children: [],
     parentId: null,
     isContainer: false,
     lineNumber,
-    color,
   };
 }