@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/dgmo-router.ts

@@ -17,7 +17,10 @@ import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
 import { parseInfra } from './infra/parser';
 import { parseGantt } from './gantt/parser';
 import { parseBoxesAndLines } from './boxes-and-lines/parser';
+import { parseMindmap } from './mindmap/parser';
+import { parseWireframe } from './wireframe/parser';
 import { parseFirstLine } from './utils/parsing';
+import { makeDgmoError, suggest } from './diagnostics';
 import type { DgmoError } from './diagnostics';
 
 // ============================================================
@@ -148,6 +151,8 @@ const DIAGRAM_TYPES = new Set([
   'infra',
   'gantt',
   'boxes-and-lines',
+  'mindmap',
+  'wireframe',
 ]);
 const EXTENDED_CHART_TYPES = new Set([
   'scatter',
@@ -227,6 +232,19 @@ const PARSE_DISPATCH = new Map<
   ['infra', (c) => parseInfra(c)],
   ['gantt', (c) => parseGantt(c)],
   ['boxes-and-lines', (c) => parseBoxesAndLines(c)],
+  ['mindmap', (c) => parseMindmap(c)],
+  ['wireframe', (c) => parseWireframe(c)],
+]);
+
+/**
+ * Parse DGMO content and return diagnostics without rendering.
+ * Useful for the CLI and editor to surface all errors before attempting render.
+ */
+/** All known chart type names for colon-pattern detection. */
+const ALL_KNOWN_TYPES = new Set([
+  ...DATA_CHART_TYPES,
+  ...VISUALIZATION_TYPES,
+  ...DIAGRAM_TYPES,
 ]);
 
 /**
@@ -237,20 +255,100 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
   const chartType = parseDgmoChartType(content);
 
   if (!chartType) {
-    // No chart type detected — try visualization parser as fallback (it handles missing chart: line)
+    // Check for common mistake: colon in chart type declaration (e.g. "bar: Sales")
+    const colonDiag = detectColonChartType(content);
+    if (colonDiag) {
+      const fallback = parseVisualization(content).diagnostics;
+      return { diagnostics: [colonDiag, ...fallback] };
+    }
+
+    // No chart type detected — try visualization parser as fallback
     return { diagnostics: parseVisualization(content).diagnostics };
   }
 
   const directParser = PARSE_DISPATCH.get(chartType);
-  if (directParser) return { diagnostics: directParser(content).diagnostics };
+  if (directParser) {
+    const result = directParser(content);
+    return {
+      diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    };
+  }
 
   if (STANDARD_CHART_TYPES.has(chartType)) {
-    return { diagnostics: parseChart(content).diagnostics };
+    const result = parseChart(content);
+    return {
+      diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    };
   }
   if (ECHART_TYPES.has(chartType)) {
-    return { diagnostics: parseExtendedChart(content).diagnostics };
+    const result = parseExtendedChart(content);
+    return {
+      diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    };
   }
 
   // Visualization types (slope, wordcloud, arc, timeline, venn, quadrant)
-  return { diagnostics: parseVisualization(content).diagnostics };
+  const result = parseVisualization(content);
+  return {
+    diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+  };
+}
+
+// ============================================================
+// Common-mistake detectors
+// ============================================================
+
+/**
+ * Detects colon-separated chart type declarations like "bar: Sales" or "pie: Data".
+ * Returns a diagnostic if the word before the colon is a known or similar chart type.
+ */
+function detectColonChartType(content: string): DgmoError | null {
+  const lines = content.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (!trimmed || trimmed.startsWith('#') || trimmed.startsWith('//'))
+      continue;
+
+    const match = trimmed.match(/^(\w[\w-]*)\s*:\s*(.*)$/);
+    if (!match) return null; // First non-empty line doesn't match colon pattern
+
+    const word = match[1].toLowerCase();
+    const rest = match[2].trim();
+
+    if (ALL_KNOWN_TYPES.has(word)) {
+      const example = rest ? `${word} ${rest}` : word;
+      return makeDgmoError(
+        i + 1,
+        `Remove the colon — use '${example}' instead of '${trimmed}'. DGMO chart types don't use colons.`
+      );
+    }
+
+    // Check if it's a misspelling of a known type
+    const hint = suggest(word, [...ALL_KNOWN_TYPES]);
+    if (hint) {
+      return makeDgmoError(
+        i + 1,
+        `Unknown chart type: ${word}. ${hint} Also, DGMO chart types don't use colons.`
+      );
+    }
+
+    return null; // First line has colon but isn't a chart type — normal data
+  }
+  return null;
+}
+
+/**
+ * Detects when content has only the chart type line with no meaningful data lines.
+ */
+function detectEmptyContent(content: string): DgmoError[] {
+  const lines = content.split('\n');
+  const nonEmpty = lines.filter(
+    (l) => l.trim() && !l.trim().startsWith('#') && !l.trim().startsWith('//')
+  );
+  if (nonEmpty.length <= 1) {
+    return [
+      makeDgmoError(1, 'No content after chart type declaration.', 'warning'),
+    ];
+  }
+  return [];
 }

package/src/diagnostics.ts

@@ -9,14 +9,23 @@ export interface DgmoError {
   column?: number; // optional 1-based column
   message: string; // without "Line N:" prefix
   severity: DgmoSeverity;
+  /**
+   * Optional stable diagnostic code (e.g. 'E_ARROW_SUBSTRING_IN_LABEL').
+   * Additive; pre-existing diagnostics omit this field and existing
+   * substring-on-`.message` assertions keep working unchanged.
+   */
+  code?: string;
 }
 
 export function makeDgmoError(
   line: number,
   message: string,
-  severity: DgmoSeverity = 'error'
+  severity: DgmoSeverity = 'error',
+  code?: string
 ): DgmoError {
-  return { line, message, severity };
+  return code !== undefined
+    ? { line, message, severity, code }
+    : { line, message, severity };
 }
 
 export function formatDgmoError(err: DgmoError): string {
@@ -43,9 +52,7 @@ function levenshtein(a: string, b: string): number {
     for (let j = 1; j <= n; j++) {
       const tmp = dp[j];
       dp[j] =
-        a[i - 1] === b[j - 1]
-          ? prev
-          : 1 + Math.min(prev, dp[j], dp[j - 1]);
+        a[i - 1] === b[j - 1] ? prev : 1 + Math.min(prev, dp[j], dp[j - 1]);
       prev = tmp;
     }
   }
@@ -57,7 +64,10 @@ function levenshtein(a: string, b: string): number {
  * Returns null if no good match is found.
  * Threshold: distance ≤ max(2, floor(input.length / 3))
  */
-export function suggest(input: string, candidates: readonly string[]): string | null {
+export function suggest(
+  input: string,
+  candidates: readonly string[]
+): string | null {
   if (!input || candidates.length === 0) return null;
   const lower = input.toLowerCase();
   const threshold = Math.max(2, Math.floor(lower.length / 3));

package/src/echarts.ts

@@ -1,7 +1,47 @@
-import * as echarts from 'echarts';
+import * as echarts from 'echarts/core';
 import type { EChartsOption } from 'echarts';
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  SankeyChart,
+  GraphChart,
+  HeatmapChart,
+  FunnelChart,
+} from 'echarts/charts';
+import {
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  RadarComponent,
+  VisualMapComponent,
+  GraphicComponent,
+} from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  SankeyChart,
+  GraphChart,
+  HeatmapChart,
+  FunnelChart,
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  RadarComponent,
+  VisualMapComponent,
+  GraphicComponent,
+  SVGRenderer,
+]);
 import { FONT_FAMILY } from './fonts';
-import { injectBranding } from './branding';
 import { renderLegendSvg } from './utils/legend-svg';
 import type { LegendGroupData } from './utils/legend-svg';
 import {
@@ -2863,8 +2903,7 @@ const STANDARD_CHART_TYPES = new Set([
 export async function renderExtendedChartForExport(
   content: string,
   theme: 'light' | 'dark' | 'transparent',
-  palette?: PaletteColors,
-  options?: { branding?: boolean }
+  palette?: PaletteColors
 ): Promise<string> {
   const isDark = theme === 'dark';
 
@@ -2965,12 +3004,6 @@ export async function renderExtendedChartForExport(
       );
     }
 
-    if (options?.branding !== false) {
-      const brandColor =
-        theme === 'transparent' ? '#888' : effectivePalette.textMuted;
-      result = injectBranding(result, brandColor);
-    }
-
     return result;
   } finally {
     chart.dispose();

package/src/editor/keywords.ts

@@ -13,6 +13,7 @@ export const CHART_TYPES = new Set([
   'infra',
   'gantt',
   'boxes-and-lines',
+  'wireframe',
   // Data chart types
   'bar',
   'line',
@@ -170,6 +171,17 @@ export const CONTROL_KEYWORDS = new Set([
   'loop',
   'parallel',
   'note',
+  // Wireframe elements
+  'nav',
+  'tabs',
+  'table',
+  'image',
+  'modal',
+  'skeleton',
+  'alert',
+  'progress',
+  'chart',
+  'mobile',
 ]);
 
 /** Status keywords — kanban. */

package/src/er/parser.ts

@@ -1,6 +1,7 @@
 import { resolveColorWithDiagnostic } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { validateLabelCharacters } from '../utils/arrows';
 import {
   measureIndent,
   extractColor,
@@ -108,12 +109,22 @@ function parseRelationship(
     const fromCard = parseCardSide(sym[2]);
     const toCard = parseCardSide(sym[3]);
     if (fromCard && toCard) {
+      const label = sym[5]?.trim();
+      // F17: run label through validator for defense in depth. The parent
+      // loop currently discards top-level relationships as warnings, so
+      // the label never reaches the AST — but if that changes, this keeps
+      // character-set validation in sync with the indented path.
+      if (label) {
+        validateLabelCharacters(label, lineNumber).forEach((d) =>
+          pushError(d.line, d.message)
+        );
+      }
       return {
         source: sym[1],
         target: sym[4],
         from: fromCard,
         to: toCard,
-        label: sym[5]?.trim(),
+        label,
       };
     }
   }
@@ -321,6 +332,9 @@ export function parseERDiagram(
     // Indented lines = columns or relationships of current table
     if (indent > 0 && currentTable) {
       // Try indented relationship first: 1-* target  or  1-label-* target
+      // ER chart-specific constraint: labels cannot contain `-` because
+      // INDENT_REL_RE uses `-{1,2}` as hard delimiters on both sides of the
+      // label. So `1-has-*` works but `1-has dashes-*` does not.
       const indentRel = trimmed.match(INDENT_REL_RE);
       if (indentRel) {
         const fromCard = parseCardSide(indentRel[1]);
@@ -328,11 +342,17 @@ export function parseERDiagram(
         if (fromCard && toCard) {
           const targetName = indentRel[4];
           getOrCreateTable(targetName, lineNumber);
+          const rawLabel = indentRel[2]?.trim();
+          if (rawLabel) {
+            result.diagnostics.push(
+              ...validateLabelCharacters(rawLabel, lineNumber)
+            );
+          }
           result.relationships.push({
             source: currentTable.id,
             target: tableId(targetName),
             cardinality: { from: fromCard, to: toCard },
-            ...(indentRel[2]?.trim() && { label: indentRel[2].trim() }),
+            ...(rawLabel && { label: rawLabel }),
             lineNumber,
           });
         }

package/src/gantt/renderer.ts

@@ -8,7 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import { getSeriesColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
-import { computeTimeTicks } from '../d3';
+import { computeTimeTicks } from '../utils/time-ticks';
 import {
   LEGEND_HEIGHT,
   LEGEND_PILL_PAD,
@@ -36,7 +36,7 @@ import {
   TITLE_Y,
 } from '../utils/title-constants';
 import type { PaletteColors } from '../palettes';
-import type { D3ExportDimensions } from '../d3';
+import type { D3ExportDimensions } from '../utils/d3-types';
 import type {
   ResolvedSchedule,
   ResolvedTask,

package/src/graph/flowchart-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,
@@ -87,15 +88,17 @@ function parseNodeRef(text: string, palette?: PaletteColors): NodeRef | null {
 
 /**
  * Split a line into segments around arrow tokens.
- * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`
+ * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`, and long-dash
+ * variants like `-->`, `--->`, `--foo--->` (TD-9 longest-match: the arrow
+ * token is the maximal run of `-+>`).
  *
  * Returns alternating: [nodeText, arrowText, nodeText, arrowText, nodeText, ...]
- * Where arrowText is the full arrow token like `-yes->` or `->`.
+ * Where arrowText is the synthesized full arrow token like `-yes->` or `->`
+ * (with visual dash-run length collapsed to the minimal `-...->` form —
+ * edge styling is not yet differentiated by arrow length).
  */
 function splitArrows(line: string): string[] {
   const segments: string[] = [];
-  let lastIndex = 0;
-  // Simpler approach: find all `->` positions, then determine if there's a label prefix
   const arrowPositions: {
     start: number;
     end: number;
@@ -103,60 +106,84 @@ function splitArrows(line: string): string[] {
     color?: string;
   }[] = [];
 
-  // Find all -> occurrences
+  // Find all arrow tokens. A token is a maximal run of `-+>` (one-or-more
+  // dashes followed by `>`). We scan for `->` and then expand leftward across
+  // adjacent dashes to absorb longer forms. `scanFloor` marks the lower
+  // bound for the next opening-dash search so an arrow's opening cannot
+  // reach back into the territory of a previously consumed arrow.
   let searchFrom = 0;
+  let scanFloor = 0;
   while (searchFrom < line.length) {
     const idx = line.indexOf('->', searchFrom);
     if (idx === -1) break;
 
-    // Look backwards from idx to find the start of the arrow (the `-` that starts the label)
-    let arrowStart = idx;
+    // TD-9: absorb the full arrow run leftward from idx, but not past the
+    // scanFloor (which is right after the previous arrow).
+    let runStart = idx;
+    while (runStart > scanFloor && line[runStart - 1] === '-') runStart--;
+    const arrowEnd = idx + 2; // position after `>`
+
+    // Look for an opening dash run before the arrow. The opening is the
+    // LEFTMOST `-` in the region `[scanFloor, runStart)` that is preceded by
+    // whitespace or start-of-line. Any dashes to its right up to the first
+    // non-dash character are part of the opening run; content after that is
+    // the label; the full arrow token runs from opening through `>`.
+    let arrowStart: number;
     let label: string | undefined;
     let color: string | undefined;
 
-    // Check if there's content between a preceding `-` and this `->` (e.g., `-yes->`)
-    // Walk backwards from idx-1 to find another `-` that could be the arrow start
-    if (idx > 0 && line[idx - 1] !== ' ' && line[idx - 1] !== '\t') {
-      // There might be label/color content attached: e.g. `-yes->` or `-(blue)->`
-      // The arrow token starts with `-` followed by optional label, optional (color), then `->`
-      // We need to find the opening `-` before any label text
-      // Scan backwards to find a `-` preceded by whitespace or start-of-line
-      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;
       }
-      // Check if this `-` could be the start of the arrow
-      if (
-        line[scanBack] === '-' &&
-        (scanBack === 0 || /\s/.test(line[scanBack - 1]))
-      ) {
-        // Content between opening `-` and `->` (strip trailing `-` that is part of `->`)
-        let arrowContent = line.substring(scanBack + 1, idx);
-        if (arrowContent.endsWith('-'))
-          arrowContent = arrowContent.slice(0, -1);
-        // Parse label and color from arrow content
-        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) {
+      // End of opening run: consume consecutive dashes after openingStart.
+      let openingEnd = openingStart;
+      while (openingEnd < runStart && line[openingEnd] === '-') openingEnd++;
+
+      // Label content = everything between opening run and the arrow run.
+      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 {
+      // No opening dash run found. All absorbed leftward dashes belong to
+      // the arrow token itself (e.g. `A --> B` → arrow is `-->`, no label).
+      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];
   }
 
-  // Build segments
+  // Build segments.
+  //
+  // NOTE: the synthesized arrow token is always the short form (`->`,
+  // `-label->`, `-(color)->`). The actual dash run-length (`-->`, `--->`,
+  // `---->`) seen in the source is collapsed here. If we ever add
+  // dash-length-sensitive edge styling (e.g. Mermaid-style "long arrow"
+  // emphasis), thread `arrow.end - arrow.start - label?.length - color?.length`
+  // through to ArrowInfo so downstream renderers can honor it.
+  let lastIndex = 0;
   for (let i = 0; i < arrowPositions.length; i++) {
     const arrow = arrowPositions[i];
     const beforeText = line.substring(lastIndex, arrow.start).trim();
@@ -193,22 +220,32 @@ function parseArrowToken(
   diagnostics: DgmoError[]
 ): ArrowInfo {
   if (token === '->') return {};
-  // Color-only: -(color)->
-  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 one of the 11 recognized
+  // palette color names. Otherwise the entire `(X)` becomes the label.
+  // Delegate the recognition rule 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
+        ),
+      };
+    }
+    // Unrecognized color name → whole `(X)` is the label (fall through).
   }
   // -label(color)-> or -label->
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
-    const label = m[1]?.trim() || undefined;
+    const rawLabel = m[1] ?? '';
+    // Route label through TD-13/TD-14 validator.
+    const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let color = m[2]
       ? resolveColorWithDiagnostic(
           m[2].trim(),