@diagrammo/dgmo 0.8.21 → 0.8.22

package/src/journey-map/types.ts

@@ -0,0 +1,47 @@
+import type { DgmoError } from '../diagnostics';
+import type { TagGroup } from '../utils/tag-groups';
+
+export interface JourneyMapAnnotation {
+  type: 'pain' | 'opportunity' | 'thought';
+  text: string;
+}
+
+export interface JourneyMapStep {
+  id: string;
+  title: string;
+  score?: number;
+  emotionLabel?: string;
+  tags: Record<string, string>;
+  annotations: JourneyMapAnnotation[];
+  description?: string;
+  lineNumber: number;
+  endLineNumber: number;
+}
+
+export interface JourneyMapPhase {
+  id: string;
+  name: string;
+  steps: JourneyMapStep[];
+  lineNumber: number;
+}
+
+export interface JourneyMapPersona {
+  name: string;
+  description?: string;
+  color?: string;
+  lineNumber: number;
+}
+
+export interface ParsedJourneyMap {
+  type: 'journey-map';
+  title?: string;
+  titleLineNumber?: number;
+  persona?: JourneyMapPersona;
+  phases: JourneyMapPhase[];
+  /** Flat-mode steps (not inside any phase) */
+  steps: JourneyMapStep[];
+  tagGroups: TagGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error: string | null;
+}

package/src/kanban/parser.ts

@@ -387,8 +387,8 @@ function parseCardLine(
   lineNumber: number,
   counter: number,
   aliasMap: Map<string, string>,
-  palette?: PaletteColors,
-  diagnostics?: import('../diagnostics').DgmoError[]
+  _palette?: PaletteColors,
+  _diagnostics?: import('../diagnostics').DgmoError[]
 ): KanbanCard {
   // Split on first pipe: Title | tag: value, tag: value
   const pipeIdx = trimmed.indexOf('|');
@@ -402,13 +402,7 @@ function parseCardLine(
     rawTitle = trimmed;
   }
 
-  // Extract optional color suffix from title
-  const { label: title, color } = extractColor(
-    rawTitle,
-    palette,
-    diagnostics,
-    lineNumber
-  );
+  const title = rawTitle;
 
   // Parse tags: comma-separated key: value pairs
   const tags: Record<string, string> = {};
@@ -431,6 +425,5 @@ function parseCardLine(
     details: [],
     lineNumber,
     endLineNumber: lineNumber,
-    color,
   };
 }

package/src/kanban/renderer.ts

@@ -499,17 +499,21 @@ export function renderKanban(
       .attr('fill', palette.text)
       .text(col.name);
 
-    // WIP limit badge
-    if (col.wipLimit != null) {
-      const wipExceeded = col.cards.length > col.wipLimit;
-      const badgeText = `${col.cards.length}/${col.wipLimit}`;
-      const nameWidth = col.name.length * COLUMN_HEADER_FONT_SIZE * 0.65;
+    // Card count / WIP limit badge (right-aligned)
+    {
+      const wipExceeded =
+        col.wipLimit != null && col.cards.length > col.wipLimit;
+      const badgeText =
+        col.wipLimit != null
+          ? `${col.cards.length}/${col.wipLimit}`
+          : String(col.cards.length);
       g.append('text')
-        .attr('x', colLayout.x + COLUMN_PADDING + nameWidth + 8)
+        .attr('x', colLayout.x + colLayout.width - COLUMN_PADDING)
         .attr(
           'y',
           colLayout.y + COLUMN_HEADER_HEIGHT / 2 + WIP_FONT_SIZE / 2 - 1
         )
+        .attr('text-anchor', 'end')
         .attr('font-size', WIP_FONT_SIZE)
         .attr('fill', wipExceeded ? palette.colors.red : palette.textMuted)
         .attr('font-weight', wipExceeded ? 'bold' : 'normal')
@@ -978,6 +982,26 @@ function renderSwimlaneBoard(
         .attr('font-weight', 'bold')
         .attr('fill', palette.text)
         .text(col.name);
+
+      // Card count (right-aligned)
+      const wipExceeded =
+        col.wipLimit != null && col.cards.length > col.wipLimit;
+      const badgeText =
+        col.wipLimit != null
+          ? `${col.cards.length}/${col.wipLimit}`
+          : String(col.cards.length);
+      headerG
+        .append('text')
+        .attr('x', colInfo.x + colInfo.width - COLUMN_PADDING)
+        .attr(
+          'y',
+          grid.startY + COLUMN_HEADER_HEIGHT / 2 + WIP_FONT_SIZE / 2 - 1
+        )
+        .attr('text-anchor', 'end')
+        .attr('font-size', WIP_FONT_SIZE)
+        .attr('fill', wipExceeded ? palette.colors.red : palette.textMuted)
+        .attr('font-weight', wipExceeded ? 'bold' : 'normal')
+        .text(badgeText);
     }
   }
 
@@ -1031,7 +1055,7 @@ function renderSwimlaneBoard(
         .attr('fill', palette.textMuted)
         .text(`${lane.bucket.laneName} (${totalCards})`);
     } else {
-      // Expanded: name on first line, count on second
+      // Expanded: name only (count omitted to match app view)
       headerG
         .append('text')
         .attr('x', labelX)
@@ -1040,14 +1064,6 @@ function renderSwimlaneBoard(
         .attr('font-weight', 'bold')
         .attr('fill', lane.bucket.isFallback ? palette.textMuted : palette.text)
         .text(lane.bucket.laneName);
-
-      headerG
-        .append('text')
-        .attr('x', labelX)
-        .attr('y', 36)
-        .attr('font-size', 10)
-        .attr('fill', palette.textMuted)
-        .text(`(${totalCards})`);
     }
 
     if (isLaneCollapsed) {

package/src/mindmap/parser.ts

@@ -16,13 +16,12 @@ import {
   OPTION_NOCOLON_RE,
 } from '../utils/parsing';
 import type { MindmapNode, ParsedMindmap } from './types';
+import { tryStripDescriptionKeyword } from '../utils/description-helpers';
 
 // ============================================================
 // Constants
 // ============================================================
 
-const DESCRIPTION_RE = /^description:\s*(.*)$/i;
-
 /** Known mindmap options (key-value). */
 const KNOWN_OPTIONS = new Set(['active-tag']);
 
@@ -111,8 +110,8 @@ export function parseMindmap(
           return fail(lineNumber, msg);
         }
         if (firstLine.title) {
-          // Title IS the root: extract color from title
-          const { label, color } = extractColor(firstLine.title, palette);
+          // Title IS the root
+          const label = firstLine.title;
           result.title = label;
           result.titleLineNumber = lineNumber;
 
@@ -124,7 +123,6 @@ export function parseMindmap(
             children: [],
             parentId: null,
             lineNumber,
-            color,
           };
           result.roots.push(titleRoot);
           // Push title root onto indent stack at indent -1 so all indent-0 lines become children
@@ -208,14 +206,14 @@ export function parseMindmap(
 
     const indent = measureIndent(line);
 
-    // Check for indented `description: text` metadata
+    // Check for indented `description: text` or `description text` metadata
     if (indent > 0) {
-      const descMatch = trimmed.match(DESCRIPTION_RE);
-      if (descMatch) {
+      const descResult = tryStripDescriptionKeyword(trimmed);
+      if (descResult.isKeyword) {
         // Find parent node from indent stack
         const parent = findMetadataParent(indent, indentStack);
         if (parent) {
-          const descValue = descMatch[1].trim();
+          const descValue = descResult.text.trim();
           if (!descValue) {
             // Empty description: silently skip
             continue;
@@ -228,10 +226,8 @@ export function parseMindmap(
             );
             continue;
           }
-          // Only set if pipe description didn't already set it
-          if (parent.description === undefined) {
-            parent.description = descValue;
-          }
+          if (!parent.description) parent.description = [];
+          parent.description.push(descValue);
           continue;
         }
       }
@@ -300,19 +296,18 @@ function parseNodeLine(
   warnFn: (line: number, msg: string) => void
 ): MindmapNode {
   const segments = trimmed.split('|').map((s) => s.trim());
-  const rawLabel = segments[0];
-  const { label, color } = extractColor(rawLabel, palette);
+  const label = segments[0];
 
   const metadata = parsePipeMetadata(segments, aliasMap, () =>
     warnFn(lineNumber, MULTIPLE_PIPE_ERROR)
   );
 
   // Extract description from pipe metadata as a dedicated field
-  let description: string | undefined;
+  let description: string[] | undefined;
   if ('description' in metadata) {
     const descVal = metadata['description'].trim();
     if (descVal) {
-      description = descVal;
+      description = [descVal];
     }
     delete metadata['description'];
   }
@@ -332,7 +327,6 @@ function parseNodeLine(
     children: [],
     parentId: null,
     lineNumber,
-    color,
     collapsed,
   };
 }

package/src/mindmap/renderer.ts

@@ -15,6 +15,8 @@ import type { MindmapLayoutResult } from './types';
 import { parseMindmap } from './parser';
 import { layoutMindmap } from './layout';
 import { computeNodeText } from './text-wrap';
+import { renderInlineText } from '../utils/inline-markdown';
+import { preprocessDescriptionLine } from '../utils/description-helpers';
 import { renderLegendD3 } from '../utils/legend-d3';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
 import { LEGEND_HEIGHT, LEGEND_GROUP_GAP } from '../utils/legend-constants';
@@ -419,31 +421,30 @@ export function renderMindmap(
         .attr('stroke-opacity', 0.3)
         .attr('stroke-width', 1);
 
-      // Description text
+      // Description text (with inline markdown + preprocessing)
       if (descLines.length <= 1) {
         const descY = separatorY + 4 + descFontSize;
-        nodeG
+        const processed = preprocessDescriptionLine(descLines[0]);
+        const textEl = nodeG
           .append('text')
           .attr('x', centerX)
           .attr('y', descY)
           .attr('text-anchor', 'middle')
           .attr('font-size', descFontSize)
-          .attr('fill', palette.textMuted)
-          .text(descLines[0]);
+          .attr('fill', palette.textMuted);
+        renderInlineText(textEl, processed, palette, descFontSize);
       } else {
         const descStartY = separatorY + 4 + descFontSize;
-        const descTextEl = nodeG
-          .append('text')
-          .attr('x', centerX)
-          .attr('text-anchor', 'middle')
-          .attr('font-size', descFontSize)
-          .attr('fill', palette.textMuted);
         for (let i = 0; i < descLines.length; i++) {
-          descTextEl
-            .append('tspan')
+          const processed = preprocessDescriptionLine(descLines[i]);
+          const textEl = nodeG
+            .append('text')
             .attr('x', centerX)
             .attr('y', descStartY + i * DESC_LINE_HEIGHT)
-            .text(descLines[i]);
+            .attr('text-anchor', 'middle')
+            .attr('font-size', descFontSize)
+            .attr('fill', palette.textMuted);
+          renderInlineText(textEl, processed, palette, descFontSize);
         }
       }
     }

package/src/mindmap/text-wrap.ts

@@ -6,6 +6,8 @@
 // multiple lines. Used by both layout (for sizing) and renderer
 // (for drawing). Ensures both agree on line breaks and font size.
 
+import { preprocessDescriptionLine } from '../utils/description-helpers';
+
 const CHAR_WIDTH_RATIO = 0.58; // avg char width / fontSize for Helvetica
 const H_PAD = 16; // 8px padding each side
 const MAX_LABEL_LINES = 3;
@@ -170,7 +172,7 @@ interface NodeTextLayout {
  */
 export function computeNodeText(
   label: string,
-  description: string | undefined,
+  description: string[] | undefined,
   depth: number,
   nodeWidth: number,
   hideDescriptions: boolean
@@ -184,18 +186,26 @@ export function computeNodeText(
     MAX_LABEL_LINES
   );
 
-  let descLines: string[] = [];
+  const descLines: string[] = [];
   let descFontSize = DESC_FONT_SIZE;
-  if (!hideDescriptions && description) {
-    const descResult = wrapText(
-      description,
-      nodeWidth,
-      DESC_FONT_SIZE,
-      DESC_FONT_SIZE, // don't shrink descriptions
-      MAX_DESC_LINES
-    );
-    descLines = descResult.lines;
-    descFontSize = descResult.fontSize;
+  if (!hideDescriptions && description && description.length > 0) {
+    // Wrap each description line independently so bullets and line breaks are preserved.
+    // Cap total output lines at MAX_DESC_LINES across all input lines.
+    let remaining = MAX_DESC_LINES;
+    for (const rawLine of description) {
+      if (remaining <= 0) break;
+      const line = preprocessDescriptionLine(rawLine);
+      const lineResult = wrapText(
+        line,
+        nodeWidth,
+        DESC_FONT_SIZE,
+        DESC_FONT_SIZE,
+        remaining
+      );
+      descLines.push(...lineResult.lines);
+      remaining -= lineResult.lines.length;
+      descFontSize = lineResult.fontSize;
+    }
   }
 
   return {

package/src/mindmap/types.ts

@@ -4,7 +4,7 @@ import type { TagGroup } from '../utils/tag-groups.js';
 export interface MindmapNode {
   id: string;
   label: string;
-  description?: string;
+  description?: string[];
   metadata: Record<string, string>;
   children: MindmapNode[];
   parentId: string | null;
@@ -26,7 +26,7 @@ export interface ParsedMindmap {
 export interface MindmapLayoutNode {
   id: string;
   label: string;
-  description?: string;
+  description?: string[];
   metadata: Record<string, string>;
   lineNumber: number;
   color?: string;

package/src/org/parser.ts

@@ -270,8 +270,7 @@ export function parseOrg(content: string, palette?: PaletteColors): ParsedOrg {
 
     if (containerMatch) {
       // It's a container node
-      const rawLabel = containerMatch[1].trim();
-      const { label, color } = extractColor(rawLabel, palette);
+      const label = containerMatch[1].trim();
 
       containerCounter++;
       const node: OrgNode = {
@@ -282,7 +281,6 @@ export function parseOrg(content: string, palette?: PaletteColors): ParsedOrg {
         parentId: null,
         isContainer: true,
         lineNumber,
-        color,
       };
 
       attachNode(node, indent, indentStack, result);
@@ -378,8 +376,7 @@ function parseNodeLabel(
   // Check for single-line compact metadata: "Alice Park | role: Senior, location: NY"
   const segments = trimmed.split('|').map((s) => s.trim());
 
-  const rawLabel = segments[0];
-  const { label, color } = extractColor(rawLabel, palette);
+  const label = segments[0];
 
   const metadata = parsePipeMetadata(
     segments,
@@ -395,7 +392,6 @@ function parseNodeLabel(
     parentId: null,
     isContainer: false,
     lineNumber,
-    color,
   };
 }
 

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>();
@@ -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 {