@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/graph/layout.ts

@@ -3,6 +3,7 @@ import type {
   ParsedGraph,
   GraphNode,
   GraphEdge,
+  GraphGroup,
   GraphShape,
 } from './types';
 
@@ -33,12 +34,20 @@ export interface LayoutGroup {
   label: string;
   color?: string;
   lineNumber: number;
+  collapsed?: boolean;
   x: number;
   y: number;
   width: number;
   height: number;
 }
 
+export interface LayoutOptions {
+  /** Map of group ID → number of child nodes (for collapsed groups) */
+  collapsedChildCounts?: Map<string, number>;
+  /** Original groups before collapse (includes collapsed ones) */
+  originalGroups?: GraphGroup[];
+}
+
 export interface LayoutResult {
   nodes: LayoutNode[];
   edges: LayoutEdge[];
@@ -61,8 +70,33 @@ function computeNodeHeight(shape: GraphShape): number {
   return shape === 'decision' ? 60 : 50;
 }
 
-export function layoutGraph(graph: ParsedGraph): LayoutResult {
-  if (graph.nodes.length === 0) {
+export function layoutGraph(
+  graph: ParsedGraph,
+  options?: LayoutOptions
+): LayoutResult {
+  const collapsedChildCounts = options?.collapsedChildCounts;
+  const originalGroups = options?.originalGroups;
+
+  // Collapsed groups become synthetic nodes in the graph
+  const collapsedGroupNodes: GraphNode[] = [];
+  if (collapsedChildCounts && originalGroups) {
+    for (const group of originalGroups) {
+      if (collapsedChildCounts.has(group.id)) {
+        const count = collapsedChildCounts.get(group.id)!;
+        collapsedGroupNodes.push({
+          id: group.id,
+          label: `${group.label} (${count} state${count !== 1 ? 's' : ''})`,
+          shape: 'state',
+          lineNumber: group.lineNumber,
+          ...(group.color && { color: group.color }),
+        });
+      }
+    }
+  }
+
+  const allNodes = [...graph.nodes, ...collapsedGroupNodes];
+
+  if (allNodes.length === 0) {
     return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
   }
 
@@ -77,11 +111,11 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
 
   // Build a lookup for original node data
   const nodeDataMap = new Map<string, GraphNode>();
-  for (const node of graph.nodes) {
+  for (const node of allNodes) {
     nodeDataMap.set(node.id, node);
   }
 
-  // Add group parent nodes
+  // Add group parent nodes (only non-collapsed groups)
   if (graph.groups) {
     for (const group of graph.groups) {
       g.setNode(group.id, {
@@ -92,12 +126,12 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   }
 
   // Add nodes with computed dimensions
-  for (const node of graph.nodes) {
+  for (const node of allNodes) {
     const width = computeNodeWidth(node.label, node.shape);
     const height = computeNodeHeight(node.shape);
     g.setNode(node.id, { label: node.label, width, height });
 
-    // Set parent for grouped nodes
+    // Set parent for grouped nodes (only for non-collapsed groups)
     if (node.group && graph.groups?.some((gr) => gr.id === node.group)) {
       g.setParent(node.id, node.group);
     }
@@ -117,7 +151,11 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   dagre.layout(g);
 
   // Extract positioned nodes
-  const layoutNodes: LayoutNode[] = graph.nodes.map((node) => {
+  const collapsedGroupIds = collapsedChildCounts
+    ? new Set(collapsedChildCounts.keys())
+    : new Set<string>();
+
+  const layoutNodes: LayoutNode[] = allNodes.map((node) => {
     const pos = g.node(node.id);
     return {
       id: node.id,
@@ -147,10 +185,36 @@ export function layoutGraph(graph: ParsedGraph): LayoutResult {
   });
 
   // Compute group bounding boxes from member node positions
+  // Collapsed groups are included as layout groups with collapsed=true
+  // (their synthetic node is in layoutNodes for positioning)
   const layoutGroups: LayoutGroup[] = [];
-  if (graph.groups) {
+  const allGroups = graph.groups ?? [];
+
+  // Also include collapsed groups from originalGroups
+  if (originalGroups) {
+    for (const group of originalGroups) {
+      if (collapsedGroupIds.has(group.id)) {
+        const syntheticNode = layoutNodes.find((n) => n.id === group.id);
+        if (syntheticNode) {
+          layoutGroups.push({
+            id: group.id,
+            label: group.label,
+            color: group.color,
+            lineNumber: group.lineNumber,
+            collapsed: true,
+            x: syntheticNode.x - syntheticNode.width / 2,
+            y: syntheticNode.y - syntheticNode.height / 2,
+            width: syntheticNode.width,
+            height: syntheticNode.height,
+          });
+        }
+      }
+    }
+  }
+
+  if (allGroups.length > 0) {
     const nodeMap = new Map(layoutNodes.map((n) => [n.id, n]));
-    for (const group of graph.groups) {
+    for (const group of allGroups) {
       const members = group.nodeIds
         .map((id) => nodeMap.get(id))
         .filter((n): n is LayoutNode => n !== undefined);

package/src/graph/state-collapse.ts

@@ -0,0 +1,78 @@
+// ============================================================
+// State Diagram — Collapse/Expand Transform
+// ============================================================
+
+import type { ParsedGraph, GraphGroup } from './types';
+
+export interface StateCollapseResult {
+  parsed: ParsedGraph;
+  collapsedChildCounts: Map<string, number>;
+  originalGroups: GraphGroup[];
+}
+
+/**
+ * Pure transform: returns a new ParsedGraph with collapsed groups
+ * removed from the diagram content.
+ *
+ * - Children of collapsed groups removed from nodes
+ * - Edges redirected: endpoints in collapsed groups → group ID
+ * - Internal edges (both in same collapsed group) dropped
+ * - Duplicate edges (same source, target, label) deduplicated
+ * - Collapsed groups removed from groups[] (layout handles as nodes)
+ */
+export function collapseStateGroups(
+  parsed: ParsedGraph,
+  collapsedGroups: Set<string>
+): StateCollapseResult {
+  const originalGroups = parsed.groups ?? [];
+
+  if (collapsedGroups.size === 0 || originalGroups.length === 0) {
+    return { parsed, collapsedChildCounts: new Map(), originalGroups };
+  }
+
+  // Build group lookup by ID
+  const groupById = new Map<string, GraphGroup>();
+  for (const group of originalGroups) {
+    groupById.set(group.id, group);
+  }
+
+  // Build node → collapsed group lookup
+  const nodeToGroup = new Map<string, string>();
+  const collapsedChildCounts = new Map<string, number>();
+
+  for (const groupId of collapsedGroups) {
+    const group = groupById.get(groupId);
+    if (!group) continue;
+
+    for (const nodeId of group.nodeIds) {
+      nodeToGroup.set(nodeId, groupId);
+    }
+    collapsedChildCounts.set(groupId, group.nodeIds.length);
+  }
+
+  // Filter nodes: remove children of collapsed groups
+  const nodes = parsed.nodes.filter((n) => !nodeToGroup.has(n.id));
+
+  // Remap and deduplicate edges
+  const edgeKeys = new Set<string>();
+  const edges: typeof parsed.edges = [];
+  for (const edge of parsed.edges) {
+    const src = nodeToGroup.get(edge.source) ?? edge.source;
+    const tgt = nodeToGroup.get(edge.target) ?? edge.target;
+    // Drop internal edges (both endpoints in same collapsed group)
+    if (src === tgt && src !== edge.source) continue;
+    const key = `${src}|${tgt}|${edge.label ?? ''}`;
+    if (edgeKeys.has(key)) continue;
+    edgeKeys.add(key);
+    edges.push({ ...edge, source: src, target: tgt });
+  }
+
+  // Keep only groups that are not collapsed
+  const groups = originalGroups.filter((g) => !collapsedGroups.has(g.id));
+
+  return {
+    parsed: { ...parsed, nodes, edges, groups },
+    collapsedChildCounts,
+    originalGroups,
+  };
+}

package/src/graph/state-parser.ts

@@ -2,6 +2,7 @@ import { resolveColorWithDiagnostic } from '../colors';
 import type { DgmoError } from '../diagnostics';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
 import {
   measureIndent,
   extractColor,
@@ -31,6 +32,8 @@ const GROUP_BRACKET_RE = /^\[([^\]]+)\](?:\(([^)]+)\))?\s*$/;
  * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`
  */
 function splitArrows(line: string): string[] {
+  // Mirrors flowchart-parser.ts splitArrows. TD-9 longest-match: arrow token
+  // is the maximal run of `-+>`. See that file for the full algorithm rationale.
   const segments: string[] = [];
   const arrowPositions: {
     start: number;
@@ -40,41 +43,52 @@ function splitArrows(line: string): string[] {
   }[] = [];
 
   let searchFrom = 0;
+  let scanFloor = 0;
   while (searchFrom < line.length) {
     const idx = line.indexOf('->', searchFrom);
     if (idx === -1) break;
 
-    let arrowStart = idx;
+    let runStart = idx;
+    while (runStart > scanFloor && line[runStart - 1] === '-') runStart--;
+    const arrowEnd = idx + 2;
+
+    let arrowStart: number;
     let label: string | undefined;
     let color: string | undefined;
 
-    if (idx > 0 && line[idx - 1] !== ' ' && line[idx - 1] !== '\t') {
-      let scanBack = idx - 1;
-      while (scanBack > 0 && line[scanBack] !== '-') {
-        scanBack--;
+    let openingStart = -1;
+    for (let i = scanFloor; i < runStart; i++) {
+      if (line[i] !== '-') continue;
+      const prevIsWsOrFloor =
+        i === 0 || i === scanFloor || /\s/.test(line[i - 1]);
+      if (prevIsWsOrFloor) {
+        openingStart = i;
+        break;
       }
-      if (
-        line[scanBack] === '-' &&
-        (scanBack === 0 || /\s/.test(line[scanBack - 1]))
-      ) {
-        let arrowContent = line.substring(scanBack + 1, idx);
-        if (arrowContent.endsWith('-'))
-          arrowContent = arrowContent.slice(0, -1);
-        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          color = colorMatch[1].trim();
-          const labelPart = arrowContent.substring(0, colorMatch.index!).trim();
-          if (labelPart) label = labelPart;
-        } else {
-          const labelPart = arrowContent.trim();
-          if (labelPart) label = labelPart;
-        }
-        arrowStart = scanBack;
+    }
+
+    if (openingStart !== -1) {
+      let openingEnd = openingStart;
+      while (openingEnd < runStart && line[openingEnd] === '-') openingEnd++;
+
+      const arrowContent = line.substring(openingEnd, runStart);
+      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        color = colorMatch[1].trim();
+        const labelPart = arrowContent.substring(0, colorMatch.index!).trim();
+        if (labelPart) label = labelPart;
+      } else {
+        const labelPart = arrowContent.trim();
+        if (labelPart) label = labelPart;
       }
+      arrowStart = openingStart;
+    } else {
+      arrowStart = runStart;
     }
 
-    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
-    searchFrom = idx + 2;
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    searchFrom = arrowEnd;
+    scanFloor = arrowEnd;
   }
 
   if (arrowPositions.length === 0) return [line];
@@ -111,19 +125,30 @@ function parseArrowToken(
   diagnostics: DgmoError[]
 ): ArrowInfo {
   if (token === '->') return {};
-  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
-  if (colorOnly)
-    return {
-      color: resolveColorWithDiagnostic(
-        colorOnly[1].trim(),
-        lineNumber,
-        diagnostics,
-        palette
-      ),
-    };
+  // TD-11: `-(X)->` is a color if and only if X is a recognized palette
+  // color; otherwise the whole `(X)` becomes the label. Delegate recognition
+  // to the shared `matchColorParens` helper.
+  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
+  if (bareParen) {
+    const colorName = matchColorParens(bareParen[1]);
+    if (colorName) {
+      return {
+        color: resolveColorWithDiagnostic(
+          colorName,
+          lineNumber,
+          diagnostics,
+          palette
+        ),
+      };
+    }
+    // fall through — whole `(X)` becomes label
+  }
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
-    const label = m[1]?.trim() || undefined;
+    const rawLabel = m[1] ?? '';
+    const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     const color = m[2]
       ? resolveColorWithDiagnostic(
           m[2].trim(),

package/src/graph/state-renderer.ts

@@ -11,7 +11,11 @@ import type { ParsedGraph } from './types';
 import type { LayoutResult, LayoutNode } from './layout';
 import { parseState } from './state-parser';
 import { layoutGraph } from './layout';
-import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from '../utils/title-constants';
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y,
+} from '../utils/title-constants';
 
 // ============================================================
 // Constants
@@ -38,12 +42,21 @@ function stateDefaultColor(palette: PaletteColors, colorOff?: boolean): string {
   return colorOff ? palette.textMuted : palette.colors.blue;
 }
 
-function stateFill(palette: PaletteColors, isDark: boolean, nodeColor?: string, colorOff?: boolean): string {
+function stateFill(
+  palette: PaletteColors,
+  isDark: boolean,
+  nodeColor?: string,
+  colorOff?: boolean
+): string {
   const color = nodeColor ?? stateDefaultColor(palette, colorOff);
   return mix(color, isDark ? palette.surface : palette.bg, 25);
 }
 
-function stateStroke(palette: PaletteColors, nodeColor?: string, colorOff?: boolean): string {
+function stateStroke(
+  palette: PaletteColors,
+  nodeColor?: string,
+  colorOff?: boolean
+): string {
   return nodeColor ?? stateDefaultColor(palette, colorOff);
 }
 
@@ -51,7 +64,8 @@ function stateStroke(palette: PaletteColors, nodeColor?: string, colorOff?: bool
 // Edge path generator
 // ============================================================
 
-const lineGenerator = d3Shape.line<{ x: number; y: number }>()
+const lineGenerator = d3Shape
+  .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
   .curve(d3Shape.curveBasis);
@@ -160,7 +174,10 @@ export function renderState(
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
       .attr('font-weight', TITLE_FONT_WEIGHT)
-      .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
+      .style(
+        'cursor',
+        onClickItem && graph.titleLineNumber ? 'pointer' : 'default'
+      )
       .text(graph.title);
 
     if (graph.titleLineNumber) {
@@ -168,8 +185,12 @@ export function renderState(
       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); });
+          .on('mouseenter', function () {
+            d3Selection.select(this).attr('opacity', 0.7);
+          })
+          .on('mouseleave', function () {
+            d3Selection.select(this).attr('opacity', 1);
+          });
       }
     }
   }
@@ -180,12 +201,15 @@ export function renderState(
     .attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
 
   // Render groups (background layer)
+  // Collapsed groups are rendered in the node layer instead — skip them here
   for (const group of layout.groups) {
+    if (group.collapsed) continue;
     if (group.width === 0 && group.height === 0) continue;
     const gx = group.x - GROUP_EXTRA_PADDING;
     const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
     const gw = group.width + GROUP_EXTRA_PADDING * 2;
-    const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
+    const gh =
+      group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
 
     const fillColor = group.color
       ? mix(group.color, isDark ? palette.surface : palette.bg, 10)
@@ -198,13 +222,13 @@ export function renderState(
       .append('g')
       .attr('class', 'st-group-wrapper')
       .attr('data-line-number', String(group.lineNumber))
-      .attr('data-group-id', group.id);
-
-    if (onClickItem) {
-      groupWrapper.style('cursor', 'pointer').on('click', () => {
-        onClickItem(group.lineNumber);
-      });
-    }
+      .attr('data-group-id', group.id)
+      .attr('data-group-toggle', group.id)
+      .attr('tabindex', '0')
+      .attr('role', 'button')
+      .attr('aria-expanded', 'true')
+      .attr('aria-label', `Collapse group ${group.label}`)
+      .style('cursor', 'pointer');
 
     groupWrapper
       .append('rect')
@@ -250,7 +274,13 @@ export function renderState(
   const LABEL_H = 16;
   const PERP_OFFSET = 10; // px offset perpendicular to edge direction
 
-  interface LabelPos { x: number; y: number; w: number; h: number; edgeIdx: number }
+  interface LabelPos {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    edgeIdx: number;
+  }
   const labelPositions: LabelPos[] = [];
 
   for (let ei = 0; ei < layout.edges.length; ei++) {
@@ -333,7 +363,8 @@ export function renderState(
 
         const lp = labelPosMap.get(ei);
         if (edge.label && lp) {
-          edgeG.append('rect')
+          edgeG
+            .append('rect')
             .attr('x', lp.x - lp.w / 2)
             .attr('y', lp.y - lp.h / 2 - 1)
             .attr('width', lp.w)
@@ -342,7 +373,8 @@ export function renderState(
             .attr('fill', palette.bg)
             .attr('opacity', 0.85)
             .attr('class', 'st-edge-label-bg');
-          edgeG.append('text')
+          edgeG
+            .append('text')
             .attr('x', lp.x)
             .attr('y', lp.y + 4)
             .attr('text-anchor', 'middle')
@@ -367,7 +399,8 @@ export function renderState(
 
       const lp = labelPosMap.get(ei);
       if (edge.label && lp) {
-        edgeG.append('rect')
+        edgeG
+          .append('rect')
           .attr('x', lp.x - lp.w / 2)
           .attr('y', lp.y - lp.h / 2 - 1)
           .attr('width', lp.w)
@@ -376,7 +409,8 @@ export function renderState(
           .attr('fill', palette.bg)
           .attr('opacity', 0.85)
           .attr('class', 'st-edge-label-bg');
-        edgeG.append('text')
+        edgeG
+          .append('text')
           .attr('x', lp.x)
           .attr('y', lp.y + 4)
           .attr('text-anchor', 'middle')
@@ -388,18 +422,36 @@ export function renderState(
     }
   }
 
+  // Build set of collapsed group IDs for special rendering
+  const collapsedGroupIds = new Set<string>();
+  for (const group of layout.groups) {
+    if (group.collapsed) collapsedGroupIds.add(group.id);
+  }
+
   // Render nodes (top layer)
   const colorOff = graph.options?.color === 'off';
   for (const node of layout.nodes) {
+    const isCollapsedGroup = collapsedGroupIds.has(node.id);
+
     const nodeG = contentG
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
-      .attr('class', 'st-node')
+      .attr('class', isCollapsedGroup ? 'st-group-wrapper st-node' : 'st-node')
       .attr('data-line-number', String(node.lineNumber))
-      .attr('data-node-id', node.id);
+      .attr('data-node-id', node.id)
+      .style('cursor', 'pointer');
 
-    if (onClickItem) {
-      nodeG.style('cursor', 'pointer').on('click', () => {
+    if (isCollapsedGroup) {
+      nodeG
+        .attr('data-group-toggle', node.id)
+        .attr('tabindex', '0')
+        .attr('role', 'button')
+        .attr('aria-expanded', 'false')
+        .attr('aria-label', `Expand group ${node.label}`);
+    }
+
+    if (onClickItem && !isCollapsedGroup) {
+      nodeG.on('click', () => {
         onClickItem(node.lineNumber);
       });
     }
@@ -413,6 +465,63 @@ export function renderState(
         .attr('r', PSEUDOSTATE_RADIUS)
         .attr('fill', palette.text)
         .attr('stroke', 'none');
+    } else if (isCollapsedGroup) {
+      // Collapsed group — distinctive rounded rect with collapse bar
+      const w = node.width;
+      const h = node.height;
+      const groupColor = node.color ?? stateDefaultColor(palette, colorOff);
+      const fillColor = mix(
+        groupColor,
+        isDark ? palette.surface : palette.bg,
+        15
+      );
+      const strokeColor = groupColor;
+      const COLLAPSE_BAR_H = 6;
+
+      // Main rect
+      nodeG
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', -h / 2)
+        .attr('width', w)
+        .attr('height', h)
+        .attr('rx', STATE_CORNER_RADIUS)
+        .attr('ry', STATE_CORNER_RADIUS)
+        .attr('fill', fillColor)
+        .attr('stroke', strokeColor)
+        .attr('stroke-width', NODE_STROKE_WIDTH);
+
+      // Collapse indicator bar at bottom (clipped to rounded corners)
+      const clipId = `st-clip-${node.id.replace(/[[\]:\s]/g, '')}`;
+      nodeG
+        .append('clipPath')
+        .attr('id', clipId)
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', -h / 2)
+        .attr('width', w)
+        .attr('height', h)
+        .attr('rx', STATE_CORNER_RADIUS);
+      nodeG
+        .append('rect')
+        .attr('x', -w / 2)
+        .attr('y', h / 2 - COLLAPSE_BAR_H)
+        .attr('width', w)
+        .attr('height', COLLAPSE_BAR_H)
+        .attr('fill', strokeColor)
+        .attr('opacity', 0.5)
+        .attr('clip-path', `url(#${clipId})`);
+
+      // Label
+      nodeG
+        .append('text')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('fill', palette.text)
+        .attr('font-size', NODE_FONT_SIZE)
+        .text(node.label);
     } else {
       // State — rounded rectangle
       const w = node.width;
@@ -460,7 +569,8 @@ export function renderStateForExport(
 
   const container = document.createElement('div');
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0);
+  const exportHeight =
+    layout.height + DIAGRAM_PADDING * 2 + (parsed.title ? 40 : 0);
   container.style.width = `${exportWidth}px`;
   container.style.height = `${exportHeight}px`;
   container.style.position = 'absolute';
@@ -468,15 +578,10 @@ export function renderStateForExport(
   document.body.appendChild(container);
 
   try {
-    renderState(
-      container,
-      parsed,
-      layout,
-      palette,
-      isDark,
-      undefined,
-      { width: exportWidth, height: exportHeight }
-    );
+    renderState(container, parsed, layout, palette, isDark, undefined, {
+      width: exportWidth,
+      height: exportHeight,
+    });
 
     const svgEl = container.querySelector('svg');
     if (!svgEl) return '';