@diagrammo/dgmo 0.15.1 → 0.16.0

package/src/er/parser.ts

@@ -46,15 +46,15 @@ function tableId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Table declaration: name or name (color) or name | key: value
-// Multi-word names allowed; quote `"name with reserved chars"` if the name
-// contains pipe / paren / colon. Captures:
+// Table declaration: `name`, `name color` (trailing-token §1.5), or
+// `name | key: value`. Multi-word names allowed; quote `"name with reserved
+// chars"` if the name contains pipe / paren / colon. Captures:
 //   1: quoted-name content (without surrounding quotes), or undefined
 //   2: bare-name (trimmed at call site), or undefined
-//   3: color (inside parens), or undefined
+//   3: trailing-token color (recognized palette word), or undefined
 //   4: pipe metadata (without leading `|`), or undefined
 const TABLE_DECL_RE =
-  /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
+  /^(?:"([^"]+)"|([a-zA-Z_][^|":(]*?))(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s*\|(.+))?$/;
 
 // Column: name [type] [constraints...]  — space-separated, no colon, no brackets
 // First token is always the name. Second token is the type if it's not a constraint keyword.
@@ -350,7 +350,7 @@ export function parseERDiagram(
         result.diagnostics.push(
           makeDgmoError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`,
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`,
             'warning'
           )
         );
@@ -494,7 +494,7 @@ export function parseERDiagram(
   if (result.tables.length === 0 && !result.error) {
     const diag = makeDgmoError(
       1,
-      'No tables found. Add table declarations like "users" or "orders (blue)".'
+      'No tables found. Add table declarations like "users" or "orders blue".'
     );
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
@@ -632,15 +632,22 @@ export function extractSymbols(docText: string): DiagramSymbols {
   for (const rawLine of docText.split('\n')) {
     const line = rawLine.trim();
     if (inMetadata && /^er(\s|$)/i.test(line)) continue;
-    if (inMetadata && OPTION_NOCOLON_RE.test(line)) continue; // option line
-    inMetadata = false;
-    if (line.length === 0) continue;
+    // Under §1.5 trailing-token, `Users blue` matches OPTION_NOCOLON_RE
+    // (key=Users, value=blue) but is actually a table with a color.
+    // Detect tables FIRST so they aren't swallowed by the option fallback.
     if (/^\s/.test(rawLine)) continue; // indented = column definition, not table
+    if (line.length === 0) continue;
     const m = TABLE_DECL_RE.exec(line);
     if (m) {
       const name = (m[1] ?? m[2] ?? '').trim();
-      if (name) entities.push(name);
+      if (name) {
+        inMetadata = false;
+        entities.push(name);
+        continue;
+      }
     }
+    if (inMetadata && OPTION_NOCOLON_RE.test(line)) continue; // option line
+    inMetadata = false;
   }
   return {
     kind: 'er',

package/src/er/renderer.ts

@@ -225,7 +225,8 @@ export function renderERDiagram(
   exportDims?: { width?: number; height?: number },
   activeTagGroup?: string | null,
   /** When false, semantic role colors are suppressed and entities use a neutral color. */
-  semanticColorsActive?: boolean
+  semanticColorsActive?: boolean,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -560,7 +561,7 @@ export function renderERDiagram(
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
     };
     const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg
@@ -602,7 +603,7 @@ export function renderERDiagram(
       const legendConfig: LegendConfig = {
         groups: semanticGroups,
         position: { placement: 'top-center', titleRelation: 'below-title' },
-        mode: 'fixed',
+        mode: exportMode ? 'export' : 'preview',
       };
       const legendState: LegendState = {
         activeGroup: semanticActive ? 'Role' : null,
@@ -653,10 +654,21 @@ export function renderERDiagramForExport(
   document.body.appendChild(container);
 
   try {
-    renderERDiagram(container, parsed, layout, palette, isDark, undefined, {
-      width: exportWidth,
-      height: exportHeight,
-    });
+    renderERDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      undefined,
+      {
+        width: exportWidth,
+        height: exportHeight,
+      },
+      undefined,
+      undefined,
+      true
+    );
 
     const svgEl = container.querySelector('svg');
     if (!svgEl) return '';

package/src/gantt/parser.ts

@@ -380,7 +380,7 @@ export function parseGantt(
         currentTagGroup = null;
         // fall through to process this line normally
       } else {
-        // Parse tag entry: `Value(color)` or `Value`
+        // Parse tag entry: `Value color` or `Value`
         // First entry is the default unless another is marked `default`
         if (COMMENT_RE.test(line)) continue;
         const { text: cleanEntry, isDefault } = stripDefaultModifier(line);

package/src/gantt/renderer.ts

@@ -208,6 +208,7 @@ export interface GanttInteractiveOptions {
   collapsedLanes?: Set<string>;
   onToggleLane?: (laneName: string) => void;
   viewMode?: boolean;
+  exportMode?: boolean;
 }
 
 // ── Main Renderer ───────────────────────────────────────────
@@ -439,7 +440,8 @@ export function renderGantt(
             ).attr('display', active ? null : 'none');
           }
           drawLegend();
-        }
+        },
+        options?.exportMode ?? false
       );
     }
   }
@@ -1983,7 +1985,8 @@ function renderTagLegend(
   controlsExpanded = false,
   hasDependencies = false,
   dependenciesActive = false,
-  onControlsToggle?: (toggleId: string, active: boolean) => void
+  onControlsToggle?: (toggleId: string, active: boolean) => void,
+  exportMode = false
 ): void {
   // Build visible groups: active group expanded + swimlane group as compact pill
   let visibleGroups: TagGroup[];
@@ -2117,7 +2120,7 @@ function renderTagLegend(
         placement: 'top-center' as const,
         titleRelation: 'below-title' as const,
       },
-      mode: 'fixed' as const,
+      mode: exportMode ? 'export' : 'preview',
       capsulePillAddonWidth: iconReserve,
       controlsGroup:
         controlsToggles.length > 0 ? { toggles: controlsToggles } : undefined,
@@ -2263,7 +2266,7 @@ function renderTagLegend(
         placement: 'top-center' as const,
         titleRelation: 'below-title' as const,
       },
-      mode: 'fixed' as const,
+      mode: exportMode ? 'export' : 'preview',
       controlsGroup: { toggles: controlsToggles },
     };
 

package/src/graph/flowchart-parser.ts

@@ -1,4 +1,3 @@
-import { resolveColorWithDiagnostic } from '../colors';
 import type { DgmoError } from '../diagnostics';
 import type { PaletteColors } from '../palettes';
 import {
@@ -8,10 +7,9 @@ import {
   NAME_DIAGNOSTIC_CODES,
   nameMergedMessage,
 } from '../diagnostics';
-import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
+import { parseInArrowLabel } from '../utils/arrows';
 import {
   measureIndent,
-  inferArrowColor,
   parseFirstLine,
   OPTION_NOCOLON_RE,
   ALL_CHART_TYPES,
@@ -90,9 +88,8 @@ function parseNodeRef(text: string): NodeRef | null {
 
 /**
  * Split a line into segments around arrow tokens.
- * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`, and long-dash
- * variants like `-->`, `--->`, `--foo--->` (TD-9 longest-match: the arrow
- * token is the maximal run of `-+>`).
+ * Arrows: `->`, `-label->`, 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 synthesized full arrow token like `-yes->` or `->`
@@ -105,7 +102,6 @@ function splitArrows(line: string): string[] {
     start: number;
     end: number;
     label?: string;
-    color?: string;
   }[] = [];
 
   // Find all arrow tokens. A token is a maximal run of `-+>` (one-or-more
@@ -132,7 +128,6 @@ function splitArrows(line: string): string[] {
     // the label; the full arrow token runs from opening through `>`.
     let arrowStart: number;
     let label: string | undefined;
-    let color: string | undefined;
 
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
@@ -151,16 +146,9 @@ function splitArrows(line: string): string[] {
       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;
-      }
+      // Edges have no color slot (§1.7); parens stay literal.
+      const labelPart = line.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       // No opening dash run found. All absorbed leftward dashes belong to
@@ -168,7 +156,7 @@ function splitArrows(line: string): string[] {
       arrowStart = runStart;
     }
 
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -179,12 +167,9 @@ function splitArrows(line: string): string[] {
 
   // 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.
+  // NOTE: the synthesized arrow token is always the short form (`->` or
+  // `-label->`). The actual dash run-length (`-->`, `--->`, `---->`) seen
+  // in the source is collapsed here.
   let lastIndex = 0;
   for (let i = 0; i < arrowPositions.length; i++) {
     const arrow = arrowPositions[i];
@@ -192,12 +177,7 @@ function splitArrows(line: string): string[] {
     if (beforeText || i === 0) {
       segments.push(beforeText);
     }
-    // Arrow marker
-    let arrowToken = '->';
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : '->';
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -212,61 +192,23 @@ function splitArrows(line: string): string[] {
 
 interface ArrowInfo {
   label?: string;
-  color?: string;
 }
 
 function parseArrowToken(
   token: string,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   lineNumber: number,
   diagnostics: DgmoError[]
 ): ArrowInfo {
   if (token === '->') return {};
-  // 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(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  // Edges have no color slot (spec §1.7 "Edge color is not a feature"). The
+  // whole content between `-` and `->` is the label, including parens.
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     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(),
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      : undefined;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -362,15 +304,13 @@ export function parseFlowchart(
     sourceId: string,
     targetId: string,
     lineNumber: number,
-    label?: string,
-    color?: string
+    label?: string
   ): void {
     const edge: GraphEdge = {
       source: sourceId,
       target: targetId,
       lineNumber,
       ...(label && { label }),
-      ...(color && { color }),
     };
     result.edges.push(edge);
   }
@@ -471,13 +411,7 @@ export function parseFlowchart(
       if (pendingArrow !== null) {
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       } else if (lastNodeId === null && implicitSourceId === null) {

package/src/graph/flowchart-renderer.ts

@@ -447,11 +447,8 @@ export function renderFlowchart(
     .attr('points', `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`)
     .attr('fill', palette.textMuted);
 
-  // Collect unique edge colors for custom markers
+  // Edges have no color slot (§1.7); keep empty set for marker iteration.
   const edgeColors = new Set<string>();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `fc-arrow-${color.replace('#', '')}`;
     defs
@@ -569,10 +566,8 @@ export function renderFlowchart(
       .attr('class', 'fc-edge-group')
       .attr('data-line-number', String(edge.lineNumber));
 
-    const edgeColor = edge.color ?? palette.textMuted;
-    const markerId = edge.color
-      ? `fc-arrow-${edge.color.replace('#', '')}`
-      : 'fc-arrow';
+    const edgeColor = palette.textMuted;
+    const markerId = 'fc-arrow';
 
     const pathD = lineGenerator(edge.points);
     if (pathD) {

package/src/graph/layout.ts

@@ -25,7 +25,6 @@ export interface LayoutEdge {
   target: string;
   points: { x: number; y: number }[];
   label?: string;
-  color?: string;
   lineNumber: number;
 }
 
@@ -179,7 +178,6 @@ export function layoutGraph(
       target: edge.target,
       points: edgeData?.points ?? [],
       label: edge.label,
-      color: edge.color,
       lineNumber: edge.lineNumber,
     };
   });

package/src/graph/state-parser.ts

@@ -8,7 +8,7 @@ import {
   NAME_DIAGNOSTIC_CODES,
   nameMergedMessage,
 } from '../diagnostics';
-import { parseInArrowLabel, matchColorParens } from '../utils/arrows';
+import { parseInArrowLabel } from '../utils/arrows';
 import {
   measureIndent,
   parseFirstLine,
@@ -26,7 +26,10 @@ import type { ParsedGraph, GraphNode, GraphGroup } from './types';
 const PSEUDOSTATE_ID = 'pseudostate:[*]';
 const PSEUDOSTATE_LABEL = '[*]';
 
-const GROUP_BRACKET_RE = /^\[([^\]]+)\](?:\(([^)]+)\))?\s*$/;
+// `[Group]` or `[Group] color` (universal §1.5 trailing-token).
+// Color (group 2) must be a recognized lowercase palette word.
+const GROUP_BRACKET_RE =
+  /^\[([^\]]+)\](?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/;
 
 // ============================================================
 // Arrow splitter
@@ -36,7 +39,7 @@ const GROUP_BRACKET_RE = /^\[([^\]]+)\](?:\(([^)]+)\))?\s*$/;
  * Split a line on `->` arrows, returning alternating segments:
  * [nodeText, arrowToken, nodeText, ...]
  *
- * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`
+ * Arrows: `->`, `-label->`. Edges have no color slot (spec §1.7).
  */
 function splitArrows(line: string): string[] {
   // Mirrors flowchart-parser.ts splitArrows. TD-9 longest-match: arrow token
@@ -46,7 +49,6 @@ function splitArrows(line: string): string[] {
     start: number;
     end: number;
     label?: string;
-    color?: string;
   }[] = [];
 
   let searchFrom = 0;
@@ -61,7 +63,6 @@ function splitArrows(line: string): string[] {
 
     let arrowStart: number;
     let label: string | undefined;
-    let color: string | undefined;
 
     let openingStart = -1;
     for (let i = scanFloor; i < runStart; i++) {
@@ -78,22 +79,14 @@ function splitArrows(line: string): string[] {
       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;
-      }
+      const labelPart = line.substring(openingEnd, runStart).trim();
+      if (labelPart) label = labelPart;
       arrowStart = openingStart;
     } else {
       arrowStart = runStart;
     }
 
-    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label });
     searchFrom = arrowEnd;
     scanFloor = arrowEnd;
   }
@@ -106,11 +99,7 @@ function splitArrows(line: string): string[] {
     const beforeText = line.substring(lastIndex, arrow.start).trim();
     if (beforeText || i === 0) segments.push(beforeText);
 
-    let arrowToken = '->';
-    if (arrow.label && arrow.color)
-      arrowToken = `-${arrow.label}(${arrow.color})->`;
-    else if (arrow.label) arrowToken = `-${arrow.label}->`;
-    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    const arrowToken = arrow.label ? `-${arrow.label}->` : '->';
     segments.push(arrowToken);
     lastIndex = arrow.end;
   }
@@ -122,49 +111,23 @@ function splitArrows(line: string): string[] {
 
 interface ArrowInfo {
   label?: string;
-  color?: string;
 }
 
 function parseArrowToken(
   token: string,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   lineNumber: number,
   diagnostics: DgmoError[]
 ): ArrowInfo {
   if (token === '->') return {};
-  // 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(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  // Edges have no color slot (§1.7); arrow content between `-` and `->`
+  // is pure label text.
+  const m = token.match(/^-(.+?)->$/);
   if (m) {
     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(),
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      : undefined;
-    return { label, color };
+    return { label: labelResult.label };
   }
   return {};
 }
@@ -292,15 +255,13 @@ export function parseState(
     sourceId: string,
     targetId: string,
     lineNumber: number,
-    label?: string,
-    color?: string
+    label?: string
   ): void {
     result.edges.push({
       source: sourceId,
       target: targetId,
       lineNumber,
       ...(label && { label }),
-      ...(color && { color }),
     });
   }
 
@@ -494,13 +455,7 @@ export function parseState(
         // Use explicit source if available, else implicit from indent
         const sourceId = lastNodeId ?? implicitSourceId;
         if (sourceId) {
-          addEdge(
-            sourceId,
-            node.id,
-            lineNumber,
-            pendingArrow.label,
-            pendingArrow.color
-          );
+          addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
       }

package/src/graph/state-renderer.ts

@@ -144,11 +144,8 @@ export function renderState(
     .attr('points', `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`)
     .attr('fill', palette.textMuted);
 
-  // Custom colored markers
+  // Edges have no color slot (§1.7); keep empty set for marker iteration.
   const edgeColors = new Set<string>();
-  for (const edge of layout.edges) {
-    if (edge.color) edgeColors.add(edge.color);
-  }
   for (const color of edgeColors) {
     const id = `st-arrow-${color.replace('#', '')}`;
     defs
@@ -345,10 +342,8 @@ export function renderState(
       .attr('class', 'st-edge-group')
       .attr('data-line-number', String(edge.lineNumber));
 
-    const edgeColor = edge.color ?? palette.textMuted;
-    const markerId = edge.color
-      ? `st-arrow-${edge.color.replace('#', '')}`
-      : 'st-arrow';
+    const edgeColor = palette.textMuted;
+    const markerId = 'st-arrow';
 
     if (edge.source === edge.target) {
       // Self-loop

package/src/infra/parser.ts

@@ -14,7 +14,6 @@ import {
   nameMergedMessage,
 } from '../diagnostics';
 import { tryStripDescriptionKeyword } from '../utils/description-helpers';
-import { resolveColorWithDiagnostic } from '../colors';
 import { parseInArrowLabel } from '../utils/arrows';
 import {
   measureIndent,
@@ -22,6 +21,7 @@ import {
   OPTION_NOCOLON_RE,
   tryParseSharedOption,
 } from '../utils/parsing';
+import { isRecognizedColorName } from '../colors';
 import { normalizeName, displayName } from '../utils/name-normalize';
 import {
   matchTagBlockHeading,
@@ -62,9 +62,11 @@ const DEPRECATED_FANOUT_RE = /\bx(\d+)\s*$/;
 const GROUP_RE =
   /^\[([^\]]+)\]\s*(?:as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*)?(?:\|\s*(.+))?$/;
 
-// Tag value: Name  or  Name(color)
-// Note: `default` keyword removed — first value is the default.
-const TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?\s*$/;
+// Tag value: `Name` or `Name color` (trailing-token color form). Color is
+// extracted via the shared `extractColor` helper at use-site (see
+// `dgmo/src/utils/parsing.ts:extractColor`), not via this regex. This regex
+// just confirms the line shape is a valid tag value (no reserved sigils).
+const TAG_VALUE_RE = /^(\w[\w\s]+?)\s*$/;
 
 // Component line. Accepts either a quoted name ("name with | : reserved chars")
 // or a bare name (multi-word allowed; must start with letter/underscore so digit-
@@ -445,14 +447,22 @@ export function parseInfra(content: string): ParsedInfra {
     // Tag value inside tag group — first value is the default unless another is marked `default`
     if (currentTagGroup && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const tvMatch = cleanEntry.match(TAG_VALUE_RE);
-      if (tvMatch) {
-        const valueName = tvMatch[1].trim();
-        const rawColor = tvMatch[2]?.trim();
-        if (rawColor) {
-          // Validate the color name; emit diagnostic if invalid
-          resolveColorWithDiagnostic(rawColor, lineNumber, result.diagnostics);
+      // Trailing-token color (universal rule, §1.5): peel off a lowercase
+      // recognized color word from the end of the line. Downstream stores
+      // the raw color NAME (not the palette hex) so the renderer can resolve
+      // against whichever theme/palette is active at render time.
+      const lastSpaceIdx = cleanEntry.lastIndexOf(' ');
+      let valueName = cleanEntry;
+      let rawColor: string | undefined;
+      if (lastSpaceIdx > 0) {
+        const trailing = cleanEntry.substring(lastSpaceIdx + 1);
+        if (isRecognizedColorName(trailing)) {
+          rawColor = trailing;
+          valueName = cleanEntry.substring(0, lastSpaceIdx).trimEnd();
         }
+      }
+      const tvMatch = valueName.match(TAG_VALUE_RE);
+      if (tvMatch || /^\w+$/.test(valueName)) {
         currentTagGroup.values.push({
           name: valueName,
           color: rawColor,