@diagrammo/dgmo 0.8.21 → 0.8.22

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,
   };
 }
 

package/src/sitemap/renderer.ts

@@ -9,6 +9,8 @@ import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedSitemap } from './types';
 import type { SitemapLayoutResult, SitemapLegendGroup } from './layout';
+import { renderInlineText } from '../utils/inline-markdown';
+import { preprocessDescriptionLine } from '../utils/description-helpers';
 import {
   LEGEND_HEIGHT,
   LEGEND_GROUP_GAP,
@@ -522,6 +524,38 @@ export function renderSitemap(
       }
     }
 
+    // Description lines (after metadata)
+    if (node.description && node.description.length > 0) {
+      const metaCount = Object.keys(node.metadata).length;
+      // Separator line before descriptions
+      const sepY =
+        metaCount > 0
+          ? HEADER_HEIGHT + SEPARATOR_GAP + metaCount * META_LINE_HEIGHT
+          : HEADER_HEIGHT;
+      nodeG
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', sepY)
+        .attr('x2', node.width)
+        .attr('y2', sepY)
+        .attr('stroke', stroke)
+        .attr('stroke-opacity', 0.3);
+
+      const descStartY =
+        HEADER_HEIGHT + SEPARATOR_GAP + metaCount * META_LINE_HEIGHT;
+      for (let di = 0; di < node.description.length; di++) {
+        const processed = preprocessDescriptionLine(node.description[di]);
+        const rowY = descStartY + (di + 1) * META_LINE_HEIGHT - 4;
+        const textEl = nodeG
+          .append('text')
+          .attr('x', 10)
+          .attr('y', rowY)
+          .attr('fill', palette.textMuted)
+          .attr('font-size', META_FONT_SIZE);
+        renderInlineText(textEl, processed, palette, META_FONT_SIZE);
+      }
+    }
+
     // Collapsed accent bar
     if (!exportDims && node.hiddenCount && node.hiddenCount > 0) {
       const clipId = `clip-${node.id}`;

package/src/sitemap/types.ts

@@ -11,6 +11,7 @@ export interface SitemapNode {
   metadata: Record<string, string>;
   children: SitemapNode[];
   parentId: string | null;
+  description?: string[];
   /** True for [Group Name] container nodes */
   isContainer: boolean;
   lineNumber: number;

package/src/tech-radar/index.ts

@@ -0,0 +1,14 @@
+export { parseTechRadar } from './parser';
+export { computeRadarLayout, getRadarGeometry } from './layout';
+export { renderTechRadar, renderTechRadarForExport } from './renderer';
+export { renderQuadrantFocus } from './interactive';
+export type {
+  ParsedTechRadar,
+  TechRadarRing,
+  TechRadarQuadrant,
+  TechRadarBlip,
+  TechRadarLayoutPoint,
+  QuadrantPosition,
+  BlipTrend,
+  TechRadarRenderOptions,
+} from './types';