@diagrammo/dgmo 0.8.21 → 0.8.23

package/src/tech-radar/shared.ts

@@ -0,0 +1,187 @@
+import type * as d3Selection from 'd3-selection';
+import { FONT_FAMILY } from '../fonts';
+import type { PaletteColors } from '../palettes';
+import type { QuadrantPosition, BlipTrend } from './types';
+
+/** Default quadrant colors by position when not overridden. */
+export const DEFAULT_QUADRANT_COLORS: Record<QuadrantPosition, string> = {
+  'top-left': 'blue',
+  'top-right': 'green',
+  'bottom-left': 'red',
+  'bottom-right': 'orange',
+};
+
+/** Resolve a quadrant's color from palette, falling back to palette.border. */
+export function resolveQuadrantColor(
+  position: QuadrantPosition,
+  color: string | null,
+  palette: PaletteColors
+): string {
+  const name = color ?? DEFAULT_QUADRANT_COLORS[position];
+  return (palette.colors as Record<string, string>)[name] ?? palette.border;
+}
+
+/**
+ * Render a trend indicator (blip circle + optional crescent/ring).
+ *
+ * @param angleToCenter — angle in radians from the blip toward the radar center.
+ *   Used to orient the crescent for up/down trends (toward center = up, away = down).
+ */
+export function renderTrendIndicator(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  trend: BlipTrend | null,
+  color: string,
+  cx: number,
+  cy: number,
+  r: number,
+  angleToCenter: number
+): void {
+  // Base filled circle (always present)
+  g.append('circle')
+    .attr('cx', cx)
+    .attr('cy', cy)
+    .attr('r', r * 0.65)
+    .attr('fill', color);
+
+  if (trend === 'new') {
+    // Double circle — outer ring
+    g.append('circle')
+      .attr('cx', cx)
+      .attr('cy', cy)
+      .attr('r', r)
+      .attr('fill', 'none')
+      .attr('stroke', color)
+      .attr('stroke-width', 1.5);
+  } else if (trend === 'up' || trend === 'down') {
+    // Semi-circle crescent (ThoughtWorks style)
+    // "up" = crescent on the center-facing side (moving inward)
+    // "down" = crescent on the outward-facing side (moving outward)
+    const crescentAngle =
+      trend === 'up' ? angleToCenter : angleToCenter + Math.PI;
+    renderCrescent(g, cx, cy, r, crescentAngle, color);
+  }
+  // 'stable' or null: plain filled circle only
+}
+
+/**
+ * Draw a crescent (semi-circle arc) on one side of the blip, oriented
+ * at `angle` radians (0 = right, π/2 = up in math coords / down in SVG).
+ *
+ * The crescent is a thick arc segment hugging the outer edge of the blip circle,
+ * spanning ~160° centered on `angle`.
+ */
+function renderCrescent(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  cx: number,
+  cy: number,
+  r: number,
+  angle: number,
+  color: string
+): void {
+  const outerR = r;
+  const halfSpan = (Math.PI * 4) / 9; // ~80° each side = 160° total arc
+
+  const startAngle = angle - halfSpan;
+  const endAngle = angle + halfSpan;
+
+  // SVG arc: start and end points on the outer circle (SVG Y-down convention)
+  const x1 = cx + outerR * Math.cos(startAngle);
+  const y1 = cy + outerR * Math.sin(startAngle);
+  const x2 = cx + outerR * Math.cos(endAngle);
+  const y2 = cy + outerR * Math.sin(endAngle);
+
+  // Large arc flag: 0 since we span < 180°; sweep=1 for clockwise in SVG
+  const largeArc = halfSpan * 2 > Math.PI ? 1 : 0;
+
+  g.append('path')
+    .attr('d', `M${x1},${y1} A${outerR},${outerR} 0 ${largeArc},1 ${x2},${y2}`)
+    .attr('fill', 'none')
+    .attr('stroke', color)
+    .attr('stroke-width', 2.5)
+    .attr('stroke-linecap', 'round');
+}
+
+/** Trend indicator character for text listings. */
+export function getTrendChar(trend: BlipTrend | null): string {
+  switch (trend) {
+    case 'new':
+      return ' ★';
+    case 'up':
+      return ' ▲';
+    case 'down':
+      return ' ▼';
+    default:
+      return '';
+  }
+}
+
+// ============================================================
+// Shared Constants
+// ============================================================
+
+export const DIM_OPACITY = 0.25;
+
+export const TREND_ITEMS: { trend: BlipTrend | null; label: string }[] = [
+  { trend: 'new', label: 'New' },
+  { trend: 'up', label: 'Moved in' },
+  { trend: 'down', label: 'Moved out' },
+  { trend: null, label: 'No change' },
+];
+
+// ============================================================
+// Tooltip Helpers
+// ============================================================
+
+export function createTooltip(
+  container: HTMLElement,
+  palette: PaletteColors,
+  isDark: boolean
+): HTMLDivElement {
+  container.style.position = 'relative';
+  const existing = container.querySelector<HTMLDivElement>('[data-d3-tooltip]');
+  if (existing) {
+    existing.style.display = 'none';
+    return existing;
+  }
+  const tip = document.createElement('div');
+  tip.setAttribute('data-d3-tooltip', '');
+  tip.style.position = 'absolute';
+  tip.style.display = 'none';
+  tip.style.pointerEvents = 'none';
+  tip.style.padding = '6px 10px';
+  tip.style.borderRadius = '4px';
+  tip.style.fontSize = '12px';
+  tip.style.fontFamily = FONT_FAMILY;
+  tip.style.lineHeight = '1.4';
+  tip.style.zIndex = '10';
+  tip.style.whiteSpace = 'nowrap';
+  tip.style.background = palette.surface;
+  tip.style.color = palette.text;
+  tip.style.boxShadow = isDark
+    ? '0 2px 6px rgba(0,0,0,0.3)'
+    : '0 2px 6px rgba(0,0,0,0.12)';
+  container.appendChild(tip);
+  return tip;
+}
+
+export function showTooltip(
+  tooltip: HTMLDivElement,
+  text: string,
+  event: MouseEvent
+): void {
+  tooltip.textContent = text;
+  tooltip.style.display = 'block';
+  const container = tooltip.parentElement!;
+  const rect = container.getBoundingClientRect();
+  let left = event.clientX - rect.left + 12;
+  let top = event.clientY - rect.top - 28;
+  const tipW = tooltip.offsetWidth;
+  if (left + tipW > rect.width) left = rect.width - tipW - 4;
+  if (top < 0) top = event.clientY - rect.top + 16;
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
+}
+
+export function hideTooltip(tooltip: HTMLDivElement): void {
+  tooltip.style.display = 'none';
+}

package/src/tech-radar/types.ts

@@ -0,0 +1,81 @@
+import type { DgmoError } from '../diagnostics';
+
+// ============================================================
+// Tech Radar — Parsed Types
+// ============================================================
+
+export type QuadrantPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export type BlipTrend = 'new' | 'up' | 'down' | 'stable';
+
+export interface TechRadarRing {
+  name: string;
+  alias: string | null;
+  lineNumber: number;
+}
+
+export interface TechRadarBlip {
+  name: string;
+  ring: string;
+  trend: BlipTrend | null;
+  description: string[];
+  lineNumber: number;
+  /** Assigned after parsing — global numbering across all quadrants. */
+  globalNumber: number;
+}
+
+export interface TechRadarQuadrant {
+  name: string;
+  position: QuadrantPosition;
+  color: string | null;
+  lineNumber: number;
+  blips: TechRadarBlip[];
+}
+
+export interface ParsedTechRadar {
+  type: 'tech-radar';
+  title: string;
+  titleLineNumber: number;
+  rings: TechRadarRing[];
+  quadrants: TechRadarQuadrant[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error: string | null;
+}
+
+// ============================================================
+// Tech Radar — Layout Types
+// ============================================================
+
+export interface TechRadarLayoutPoint {
+  blip: TechRadarBlip;
+  x: number;
+  y: number;
+  quadrantIndex: number;
+  ringIndex: number;
+}
+
+// ============================================================
+// Tech Radar — Render Options
+// ============================================================
+
+export interface TechRadarRenderOptions {
+  /** Whether the blip listing is visible. Default: true for export, false for interactive. */
+  showListing?: boolean;
+  /** Callback when the listing toggle is clicked. */
+  onToggleListing?: (show: boolean) => void;
+  /** Whether the controls legend capsule is expanded. */
+  controlsExpanded?: boolean;
+  /** Callback when the controls gear pill is clicked (expand/collapse). */
+  onToggleControlsExpand?: () => void;
+  /** Active legend group name (e.g. 'Trends'). */
+  activeLegendGroup?: string | null;
+  /** Callback when a legend group pill is toggled. */
+  onLegendGroupToggle?: (groupName: string) => void;
+  /** Active line from the editor cursor — triggers popover/expansion for that blip. */
+  activeLine?: number | null;
+}

package/src/utils/description-helpers.ts

@@ -0,0 +1,33 @@
+// ============================================================
+// Description Helpers — shared utilities for node descriptions
+// ============================================================
+
+/**
+ * Try to strip a leading `description` keyword from a line.
+ * Matches: `description text`, `description: text` (colon optional).
+ * Does NOT match bare `description` with no trailing text.
+ */
+export function tryStripDescriptionKeyword(line: string): {
+  isKeyword: boolean;
+  text: string;
+} {
+  const match = line.match(/^description\s*:?\s+(.+)$/i);
+  if (match) return { isKeyword: true, text: match[1] };
+  return { isKeyword: false, text: line };
+}
+
+/**
+ * Pre-process a single description line:
+ * - `- text` → `• text` (bullet)
+ * - `http example.com` → `https://example.com` (bare URL normalization)
+ */
+export function preprocessDescriptionLine(line: string): string {
+  // Bullet transform
+  if (line.startsWith('- ')) line = '\u2022 ' + line.slice(2);
+  // Bare URL normalization
+  line = line.replace(
+    /\bhttps?\s+([\w][\w.-]+\.[a-z]{2,}(?:\/\S*)?)/gi,
+    (_, domain) => `https://${domain}`
+  );
+  return line;
+}

package/src/utils/legend-layout.ts

@@ -556,7 +556,9 @@ function layoutRows(
 
   // Commit last row
   if (currentRowItems.length > 0) {
-    centerRowItems(currentRowItems, containerWidth, totalControlsW, gearW);
+    if (!alignLeft) {
+      centerRowItems(currentRowItems, containerWidth, totalControlsW, gearW);
+    }
     rows.push({ y: rowY, items: currentRowItems });
   }
 

package/src/utils/parsing.ts

@@ -49,6 +49,10 @@ export const ALL_CHART_TYPES = new Set([
   'boxes-and-lines',
   'mindmap',
   'wireframe',
+  'tech-radar',
+  'cycle',
+  'journey-map',
+  'pyramid',
 ]);
 
 /** Measure leading whitespace of a line, normalizing tabs to 4 spaces. */
@@ -205,15 +209,51 @@ export function prescanOptions(
 }
 
 /**
- * Normalize a comma-grouped number string to a plain integer string.
- * Validates the strict pattern: leftmost group 1-3 digits, then groups of exactly 3.
+ * Normalize a numeric token with visual separators (commas or underscores) to a plain number string.
  *
- * Examples: `1,087` → `'1087'`, `1,250,000` → `'1250000'`
- * Returns `null` if the string is not a valid comma-grouped number.
+ * Supported formats:
+ * - Comma-grouped integers: `1,000` → `'1000'`, `1,234,567` → `'1234567'` (strict 3-digit grouping)
+ * - Comma-grouped decimals: `1,234.56` → `'1234.56'`
+ * - Underscore-separated integers: `1_000` → `'1000'`, `10_00_000` → `'1000000'` (any grouping)
+ * - Underscore-separated decimals: `1_234.56` → `'1234.56'` (no underscores in decimal part)
+ * - Negatives: `-1,000` → `'-1000'`, `-1_000` → `'-1000'`
+ *
+ * Returns `null` if:
+ * - Token has no commas or underscores (caller should use raw token as-is)
+ * - Token has BOTH commas and underscores (mixed separators rejected)
+ * - Token has separators but doesn't match any valid pattern
  */
-export function normalizeGroupedNumber(token: string): string | null {
-  if (!/^\d{1,3}(,\d{3})+$/.test(token)) return null;
-  return token.replace(/,/g, '');
+export function normalizeNumericToken(token: string): string | null {
+  // No separators → null (caller uses raw token)
+  if (!token.includes(',') && !token.includes('_')) return null;
+  // Mixed separators → rejected
+  if (token.includes(',') && token.includes('_')) return null;
+
+  // Strip optional leading minus sign
+  let sign = '';
+  let unsigned = token;
+  if (unsigned.startsWith('-')) {
+    sign = '-';
+    unsigned = unsigned.substring(1);
+  }
+  if (!unsigned) return null;
+
+  if (unsigned.includes(',')) {
+    // Comma-grouped integers: 1,000 or 1,234,567
+    if (/^\d{1,3}(,\d{3})+$/.test(unsigned))
+      return sign + unsigned.replace(/,/g, '');
+    // Comma-grouped decimals: 1,234.56
+    if (/^\d{1,3}(,\d{3})+\.\d+$/.test(unsigned))
+      return sign + unsigned.replace(/,/g, '');
+    return null;
+  }
+
+  // Underscore-separated integers: 1_000, 10_00_000
+  if (/^\d+(_\d+)+$/.test(unsigned)) return sign + unsigned.replace(/_/g, '');
+  // Underscore-separated decimals: 1_234.56 (no underscores in decimal part)
+  if (/^\d+(_\d+)*\.\d+$/.test(unsigned) && unsigned.includes('_'))
+    return sign + unsigned.replace(/_/g, '');
+  return null;
 }
 
 /**

package/src/utils/tag-groups.ts

@@ -108,70 +108,56 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
     // Unquoted — collect multi-word name. The alias is the last token that's 1-4 lowercase
     // BEFORE any value tokens (values have `(color)` suffixes or appear after we see a comma).
 
-    // First check for explicit `alias` keyword: `tag Name alias X`
-    const aliasKeywordIdx = tokens.findIndex(
-      (t, i) => i > 0 && t.toLowerCase() === 'alias'
-    );
-    if (aliasKeywordIdx > 0 && aliasKeywordIdx + 1 < tokens.length) {
-      // Everything before `alias` is the name, the token after `alias` is the alias
-      name = tokens
-        .slice(0, aliasKeywordIdx)
-        .map((t) => stripQuotes(t))
-        .join(' ');
-      alias = tokens[aliasKeywordIdx + 1];
-      restStartIdx = aliasKeywordIdx + 2;
-    } else {
-      // Find where inline values start — look for a token with `(` in it (color suffix)
-      // or the presence of a comma in the remaining text
-      const remainingText = tokens.slice(1).join(' ');
-      const commaInRemaining = remainingText.includes(',');
-
-      if (tokens.length === 1) {
-        // Just `tag Name` — no alias, no values
-      } else if (
-        tokens.length === 2 &&
-        isAliasToken(tokens[1]) &&
-        !commaInRemaining
-      ) {
-        // `tag Priority p` — alias only, no values
+    // Find where inline values start — look for a token with `(` in it (color suffix)
+    // or the presence of a comma in the remaining text
+    const remainingText = tokens.slice(1).join(' ');
+    const commaInRemaining = remainingText.includes(',');
+
+    if (tokens.length === 1) {
+      // Just `tag Name` — no alias, no values
+    } else if (
+      tokens.length === 2 &&
+      isAliasToken(tokens[1]) &&
+      !commaInRemaining
+    ) {
+      // `tag Priority p` — alias only, no values
+      alias = tokens[1];
+      restStartIdx = 2;
+    } else if (tokens.length >= 2) {
+      // Check if token[1] is an alias
+      if (isAliasToken(tokens[1])) {
         alias = tokens[1];
         restStartIdx = 2;
-      } else if (tokens.length >= 2) {
-        // Check if token[1] is an alias
-        if (isAliasToken(tokens[1])) {
-          alias = tokens[1];
-          restStartIdx = 2;
-          // Multi-word name not applicable when alias is right after first token
-        } else {
-          // Could be multi-word name: `tag Risk Level lo`
-          // Walk tokens to find the alias at the end (before inline values)
-          // Find where inline values begin — first token containing `(` or after comma
-          let valueStart = tokens.length; // default: no values
-          for (let i = 1; i < tokens.length; i++) {
-            // A token containing `(` suggests a value with color: `High(red)`
-            if (tokens[i].includes('(')) {
-              valueStart = i;
-              break;
-            }
+        // Multi-word name not applicable when alias is right after first token
+      } else {
+        // Could be multi-word name: `tag Risk Level lo`
+        // Walk tokens to find the alias at the end (before inline values)
+        // Find where inline values begin — first token containing `(` or after comma
+        let valueStart = tokens.length; // default: no values
+        for (let i = 1; i < tokens.length; i++) {
+          // A token containing `(` suggests a value with color: `High(red)`
+          if (tokens[i].includes('(')) {
+            valueStart = i;
+            break;
           }
+        }
 
-          // Check if the token just before valueStart is an alias
-          if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
-            alias = tokens[valueStart - 1];
-            // Name is everything from token[0] to token[valueStart-2]
-            name = tokens
-              .slice(0, valueStart - 1)
-              .map((t) => stripQuotes(t))
-              .join(' ');
-            restStartIdx = valueStart;
-          } else {
-            // No alias — name is everything before values
-            name = tokens
-              .slice(0, valueStart)
-              .map((t) => stripQuotes(t))
-              .join(' ');
-            restStartIdx = valueStart;
-          }
+        // Check if the token just before valueStart is an alias
+        if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
+          alias = tokens[valueStart - 1];
+          // Name is everything from token[0] to token[valueStart-2]
+          name = tokens
+            .slice(0, valueStart - 1)
+            .map((t) => stripQuotes(t))
+            .join(' ');
+          restStartIdx = valueStart;
+        } else {
+          // No alias — name is everything before values
+          name = tokens
+            .slice(0, valueStart)
+            .map((t) => stripQuotes(t))
+            .join(' ');
+          restStartIdx = valueStart;
         }
       }
     }