@diagrammo/dgmo 0.15.1 → 0.16.0

package/src/sitemap/parser.ts

@@ -3,7 +3,6 @@
 // ============================================================
 
 import type { PaletteColors } from '../palettes';
-import { resolveColorWithDiagnostic } from '../colors';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { normalizeName } from '../utils/name-normalize';
@@ -20,7 +19,6 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
-  inferArrowColor,
   MULTIPLE_PIPE_ERROR,
   parseFirstLine,
   OPTION_NOCOLON_RE,
@@ -39,10 +37,11 @@ const CONTAINER_RE = /^\[([^\]]+)\]\s*(?:\|\s*(.+))?$/;
 const METADATA_RE = /^([^:]+):\s*(.+)$/;
 
 /**
- * Arrow line: `-label->`, `-(color)->`, `-label(color)->`, `->` followed by target label.
- * Captures: [1] label, [2] color, [3] target
+ * Arrow line: `-label->` or `->` followed by target label.
+ * Edges have no color slot (spec §1.7).
+ * Captures: [1] label, [2] target
  */
-const ARROW_RE = /^-([^(>][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->\s*(.+)$/;
+const ARROW_RE = /^-([^>][^>]*?)?\s*->\s*(.+)$/;
 const BARE_ARROW_RE = /^->\s*(.+)$/;
 
 // ============================================================
@@ -51,12 +50,11 @@ const BARE_ARROW_RE = /^->\s*(.+)$/;
 
 function parseArrowLine(
   trimmed: string,
-  palette: PaletteColors | undefined,
-  lineNumber: number,
-  diagnostics: DgmoError[]
+  _palette: PaletteColors | undefined,
+  _lineNumber: number,
+  _diagnostics: DgmoError[]
 ): {
   label?: string;
-  color?: string;
   target: string;
   targetIsGroup: boolean;
 } | null {
@@ -71,33 +69,14 @@ function parseArrowLine(
     };
   }
 
-  // Labeled/colored arrow: -label(color)-> Target
+  // Labeled arrow: -label-> Target
   const arrowMatch = trimmed.match(ARROW_RE);
   if (arrowMatch) {
     const label = arrowMatch[1]?.trim() || undefined;
-    let color = arrowMatch[2]
-      ? resolveColorWithDiagnostic(
-          arrowMatch[2].trim(),
-          lineNumber,
-          diagnostics,
-          palette
-        )
-      : undefined;
-    if (label && !color) {
-      const inferred = inferArrowColor(label);
-      if (inferred)
-        color = resolveColorWithDiagnostic(
-          inferred,
-          lineNumber,
-          diagnostics,
-          palette
-        );
-    }
-    const rawTarget = arrowMatch[3].trim();
+    const rawTarget = arrowMatch[2].trim();
     const groupMatch = rawTarget.match(/^\[(.+)\]$/);
     return {
       label,
-      color,
       target: groupMatch ? groupMatch[1].trim() : rawTarget,
       targetIsGroup: !!groupMatch,
     };
@@ -216,7 +195,6 @@ export function parseSitemap(
     targetLabel: string;
     targetIsGroup: boolean;
     label?: string;
-    color?: string;
     lineNumber: number;
   }[] = [];
 
@@ -309,7 +287,7 @@ export function parseSitemap(
       }
     }
 
-    // Tag group entries (indented Value(color) under tag heading)
+    // Tag group entries (indented `Value color` under tag heading; §1.5)
     // First entry is the default unless another is marked `default`
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -319,7 +297,7 @@ export function parseSitemap(
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -365,7 +343,6 @@ export function parseSitemap(
           targetLabel: arrowInfo.target,
           targetIsGroup: arrowInfo.targetIsGroup,
           label: arrowInfo.label,
-          color: arrowInfo.color,
           lineNumber,
         });
       }
@@ -486,7 +463,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: aliasHit,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
       continue;
@@ -508,7 +484,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: targetContainer.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
     } else {
@@ -526,7 +501,6 @@ export function parseSitemap(
         sourceId: arrow.sourceNode.id,
         targetId: targetNode.id,
         label: arrow.label,
-        color: arrow.color,
         lineNumber: arrow.lineNumber,
       });
     }

package/src/sitemap/renderer.ts

@@ -116,7 +116,8 @@ export function renderSitemap(
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
   activeTagGroup?: string | null,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  exportMode?: boolean
 ): void {
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -184,11 +185,9 @@ export function renderSitemap(
     .attr('points', `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`)
     .attr('fill', palette.textMuted);
 
-  // Colored arrowheads
+  // Edges have no color slot (spec §1.7); keep empty set so the marker-setup
+  // loop is a no-op but the symbol stays available for future color sources.
   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 = `sm-arrow-${color.replace('#', '')}`;
     defs
@@ -379,10 +378,8 @@ export function renderSitemap(
       .attr('class', 'sitemap-edge-group')
       .attr('data-line-number', String(edge.lineNumber));
 
-    const edgeColor = edge.color ?? palette.textMuted;
-    const markerId = edge.color
-      ? `sm-arrow-${edge.color.replace('#', '')}`
-      : 'sm-arrow';
+    const edgeColor = palette.textMuted;
+    const markerId = 'sm-arrow';
 
     const gen = edge.deferred ? lineGeneratorLinear : lineGenerator;
     const pathD = gen(edge.points);
@@ -602,7 +599,8 @@ export function renderSitemap(
       isDark,
       activeTagGroup,
       undefined,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 
@@ -647,7 +645,8 @@ export function renderSitemap(
       isDark,
       activeTagGroup,
       width,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
   }
 }
@@ -663,7 +662,8 @@ function renderLegend(
   isDark: boolean,
   activeTagGroup?: string | null,
   fixedWidth?: number,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  exportMode?: boolean
 ): void {
   if (legendGroups.length === 0) return;
 
@@ -678,7 +678,7 @@ function renderLegend(
   const legendConfig: LegendConfig = {
     groups,
     position: { placement: 'top-center', titleRelation: 'below-title' },
-    mode: 'fixed',
+    mode: exportMode ? 'export' : 'preview',
     capsulePillAddonWidth: eyeAddonWidth,
   };
   const legendState: LegendState = { activeGroup: activeTagGroup ?? null };

package/src/sitemap/types.ts

@@ -22,7 +22,6 @@ export interface SitemapEdge {
   sourceId: string;
   targetId: string;
   label?: string;
-  color?: string;
   lineNumber: number;
 }
 

package/src/tech-radar/renderer.ts

@@ -163,7 +163,7 @@ export function renderTechRadar(
         },
       ],
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: options?.exportMode ? 'export' : 'preview',
       controlsGroup: {
         toggles: [
           {
@@ -1195,7 +1195,8 @@ export function renderTechRadarForExport(
   palette: PaletteColors,
   isDark: boolean,
   exportDims?: D3ExportDimensions,
-  viewState?: CompactViewState
+  viewState?: CompactViewState,
+  exportMode?: boolean
 ): void {
   renderTechRadar(
     container,
@@ -1204,6 +1205,7 @@ export function renderTechRadarForExport(
     isDark,
     undefined,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }

package/src/tech-radar/types.ts

@@ -78,4 +78,6 @@ export interface TechRadarRenderOptions {
   onLegendGroupToggle?: (groupName: string) => void;
   /** Active line from the editor cursor — triggers popover/expansion for that blip. */
   activeLine?: number | null;
+  /** True when rendering for export (PNG/SVG/PDF) — controls whether collapsed legend pills and cog are stripped. */
+  exportMode?: boolean;
 }

package/src/utils/arrows.ts

@@ -22,7 +22,6 @@
 
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError } from '../diagnostics';
-import { RECOGNIZED_COLOR_NAMES } from '../colors';
 
 interface ParsedArrow {
   from: string;
@@ -140,10 +139,9 @@ export interface ParseInArrowLabelResult {
  *
  * This helper is intentionally chart-agnostic: it operates on an already
  * extracted label string, leaving each chart's existing arrow-finding
- * tokenization in place. TD-11 color-parens is handled inside the
- * flowchart and state `parseArrowToken` functions because those are the
- * only charts that interpret `-(color)->` as a colored edge; they use
- * `matchColorParens()` from this module for the shared lookup.
+ * tokenization in place. Edges no longer have a color slot on any chart
+ * type (see spec §1.7 "Edge color is not a feature"); arrow content is
+ * pure label text.
  */
 export function parseInArrowLabel(
   rawLabel: string,
@@ -162,29 +160,6 @@ export function parseInArrowLabel(
   return { label: trimmed, diagnostics };
 }
 
-// ============================================================
-// matchColorParens — shared TD-11 helper for flowchart and state
-// ============================================================
-
-/**
- * Test whether a string matches the TD-11 color-parens form `(colorName)`
- * where `colorName` is one of the 11 recognized palette color names from
- * `src/colors.ts:RECOGNIZED_COLOR_NAMES`. Returns the lowercase color name
- * on a match, or `null` on fall-through (whole string becomes a label).
- *
- * Used by flowchart and state parsers to keep the color-parens recognition
- * rule in one place — do NOT re-implement the regex in chart parsers.
- */
-export function matchColorParens(content: string): string | null {
-  const m = content.match(/^\(([A-Za-z]+)\)$/);
-  if (!m) return null;
-  const candidate = m[1].toLowerCase();
-  if ((RECOGNIZED_COLOR_NAMES as readonly string[]).includes(candidate)) {
-    return candidate;
-  }
-  return null;
-}
-
 // Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
 const SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
 const ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;

package/src/utils/legend-d3.ts

@@ -46,7 +46,14 @@ export function renderLegendD3(
   let currentState = { ...state };
   let currentLayout: LegendLayout;
 
-  const legendG = container.append('g').attr('class', 'dgmo-legend');
+  const legendG = container
+    .append('g')
+    .attr('class', 'dgmo-legend')
+    .attr('data-legend-title-relation', config.position.titleRelation)
+    .attr(
+      'data-legend-capsule-addon-width',
+      String(config.capsulePillAddonWidth ?? 0)
+    );
 
   function render() {
     currentLayout = computeLegendLayout(config, currentState, width);
@@ -270,11 +277,10 @@ function renderPill(
   groupBg: string,
   callbacks?: LegendCallbacks
 ): void {
-  // Collapsed tag-group pills survive static export so readers see
-  // that the diagram has tag dimensions even when no group is active.
-  // (Per spec §1.3 "Coloring is opt-in" — exports default to collapsed
-  // pills, no node coloring.) Interactive controls keep
-  // `data-export-ignore` separately.
+  // Collapsed tag-group pills are hidden in export mode
+  // (`LegendConfig.mode === 'export'`) — the layout engine filters them
+  // in `computeLegendLayout`. See
+  // tech-spec-hide-inactive-tag-pills-in-exports.md.
   const g = parent
     .append('g')
     .attr('transform', `translate(${pill.x},${pill.y})`)

package/src/utils/legend-layout.ts

@@ -235,7 +235,7 @@ export function computeLegendLayout(
   containerWidth: number
 ): LegendLayout {
   const { groups, controls: configControls, mode } = config;
-  const isExport = mode === 'inline';
+  const isExport = mode === 'export';
 
   // Filter groups for export: only active group shown
   const activeGroupName = state.activeGroup?.toLowerCase() ?? null;

package/src/utils/legend-types.ts

@@ -37,7 +37,7 @@ export interface LegendPosition {
   titleRelation: 'below-title' | 'inline-with-title';
 }
 
-export type LegendMode = 'fixed' | 'inline';
+export type LegendMode = 'preview' | 'export';
 
 export type LegendControlExportBehavior = 'include' | 'strip' | 'static';
 

package/src/utils/parsing.ts

@@ -4,10 +4,18 @@
  * pipe-metadata parsing.
  */
 
-import { resolveColor, resolveColorWithDiagnostic } from '../colors';
+import {
+  RECOGNIZED_COLOR_NAMES,
+  resolveColor,
+  resolveColorWithDiagnostic,
+} from '../colors';
 import type { DgmoError } from '../diagnostics';
 import type { PaletteColors } from '../palettes';
 
+const RECOGNIZED_COLOR_SET: ReadonlySet<string> = new Set(
+  RECOGNIZED_COLOR_NAMES
+);
+
 // ── All known chart types ────────────────────────────────────
 /** Complete set of recognized chart type identifiers. */
 export const ALL_CHART_TYPES = new Set([
@@ -87,27 +95,47 @@ export function measureIndent(line: string): number {
   return indent;
 }
 
-/** Matches a trailing `(colorName)` suffix on a label. */
-export const COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
-
-/** Extract an optional trailing color suffix from a label, resolving via palette. */
+/**
+ * Trailing-token color rule (see docs/dgmo-language-spec.md §1.5).
+ *
+ * Caller contract: `label` must be a pre-split LABEL REGION — the parser is
+ * responsible for stripping structural terminators (`as <alias>`, `| pipe
+ * metadata`, numeric values, date ranges, brackets, arrow constructs) BEFORE
+ * invoking this function. The color rule operates only on what remains.
+ *
+ * Algorithm: split the label on whitespace; if the final token is exactly one
+ * of `RECOGNIZED_COLOR_NAMES` (case-sensitive, lowercase only), peel it off
+ * as color and return the rest as the label. Otherwise the entire input
+ * stays as the label, no color.
+ *
+ * Case-sensitivity is deliberate: it provides the escape hatch (`Red`,
+ * `Yellow`, `Green` stay as labels — useful for traffic-light tag groups).
+ *
+ * Returns `{ label, color? }` where `color` is the palette-resolved hex string
+ * (or undefined if no color word matched).
+ */
 export function extractColor(
   label: string,
   palette?: PaletteColors,
   diagnostics?: DgmoError[],
   line?: number
 ): { label: string; color?: string } {
-  const m = label.match(COLOR_SUFFIX_RE);
-  if (!m) return { label };
-  const colorName = m[1].trim();
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(' '),
+    label.lastIndexOf('\t')
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  // Case-sensitive lowercase match against the closed 11-name palette.
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
   let color: string | undefined;
   if (diagnostics && line !== undefined) {
-    color = resolveColorWithDiagnostic(colorName, line, diagnostics, palette);
+    color = resolveColorWithDiagnostic(trailing, line, diagnostics, palette);
   } else {
-    color = resolveColor(colorName, palette) ?? undefined;
+    color = resolveColor(trailing, palette) ?? undefined;
   }
   return {
-    label: label.substring(0, m.index!).trim(),
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
     color,
   };
 }
@@ -457,31 +485,32 @@ export function parseSeriesNames(
 }
 
 /**
- * Infer arrow color from label text.
- * Returns a named palette color or undefined if no inference applies.
- * Case-insensitive, exact match only (not prefix/substring).
+ * Peel a trailing recognized color name from a label region, returning the
+ * raw color name (not a resolved hex). Used by chart types that pair the
+ * universal trailing-token shortcut with their own pipe-metadata `color: …`
+ * long form (cycle, pyramid, ring, raci, boxes-and-lines).
+ *
+ * Caller contract: `label` must already have pipe metadata stripped — this
+ * function operates only on the label region.
+ *
+ * Returns `{ label, colorName? }`. If the trailing token is not a recognized
+ * lowercase color, returns the original label and `colorName: undefined`.
  */
-export function inferArrowColor(label: string): string | undefined {
-  const lower = label.toLowerCase();
-  // Green: positive/affirmative
-  if (
-    lower === 'yes' ||
-    lower === 'success' ||
-    lower === 'ok' ||
-    lower === 'true'
-  )
-    return 'green';
-  // Red: negative/failure
-  if (
-    lower === 'no' ||
-    lower === 'fail' ||
-    lower === 'error' ||
-    lower === 'false'
-  )
-    return 'red';
-  // Orange: uncertain/warning
-  if (lower === 'maybe' || lower === 'warning') return 'orange';
-  return undefined;
+export function peelTrailingColorName(label: string): {
+  label: string;
+  colorName?: string;
+} {
+  const lastSpaceIdx = Math.max(
+    label.lastIndexOf(' '),
+    label.lastIndexOf('\t')
+  );
+  if (lastSpaceIdx < 0) return { label };
+  const trailing = label.substring(lastSpaceIdx + 1);
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
+  return {
+    label: label.substring(0, lastSpaceIdx).trimEnd(),
+    colorName: trailing,
+  };
 }
 
 /** Error message for multiple pipes on a single line. */

package/src/utils/tag-groups.ts

@@ -9,8 +9,9 @@ import {
   tagShorthandRemovedMessage,
   type DgmoError,
 } from '../diagnostics';
+import { RECOGNIZED_COLOR_NAMES } from '../colors';
 
-/** A single entry inside a tag group: `Value(color)` */
+/** A single entry inside a tag group: `Value color` */
 export interface TagEntry {
   value: string;
   color: string;
@@ -32,7 +33,7 @@ interface TagBlockMatch {
   name: string;
   alias: string | undefined;
   colorHint: string | undefined;
-  /** Inline tag values parsed from single-line form (e.g., `tag Priority as p High(red), Low(blue)`) */
+  /** Inline tag values parsed from single-line form (e.g., `tag Priority as p High red, Low blue`) */
   inlineValues?: string[];
   /**
    * If the heading used the legacy `tag Name <alias>` (bare shorthand)
@@ -51,8 +52,8 @@ interface TagBlockMatch {
  * Returns the cleaned text and whether the keyword was present.
  *
  * Examples:
- *   "NA(gray) default" → { text: "NA(gray)", isDefault: true }
- *   "Done(green)"      → { text: "Done(green)", isDefault: false }
+ *   "NA gray default" → { text: "NA gray", isDefault: true }
+ *   "Done green"      → { text: "Done green", isDefault: false }
  */
 export function stripDefaultModifier(text: string): {
   text: string;
@@ -90,7 +91,7 @@ export function isTagBlockHeading(trimmed: string): boolean {
 /**
  * Parse a tag declaration line: `tag Name [as <alias>] [Values...]`
  *
- * Canonical form (post-TD-18): `tag Priority as p High(red), Low(blue)`.
+ * Canonical form: `tag Priority as p High red, Low blue` (universal §1.5).
  *
  * Legacy forms still parse for graceful degradation but set
  * `legacyForm` on the result so the caller can emit
@@ -117,12 +118,26 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
   let restStartIdx = 1;
 
   // Locate any keyword separator (`as` or legacy `alias`) that appears
-  // BEFORE the first inline-value token. Inline values are tokens that
-  // contain `(` (color suffix) or follow a comma.
+  // BEFORE the first inline-value token. Inline values are recognized by
+  // a comma in the line: scan tokens for one. Under §1.5 trailing-token
+  // syntax there's no `(color)` marker anymore — a comma anywhere after
+  // the name span signals that inline values follow.
   let valueStart = tokens.length;
   for (let i = 1; i < tokens.length; i++) {
-    if (tokens[i].includes('(')) {
+    if (tokens[i].includes(',')) {
+      // valueStart is the FIRST token of the first inline value, which is
+      // the token immediately following the alias / keyword span. Walk
+      // back to the start of the value span by finding the most recent
+      // word boundary — but for the simple heuristic here, the inline
+      // value list starts at the previous non-keyword token.
       valueStart = i;
+      // The token containing the comma might be `High` (in `High red,`)
+      // or `red,` (in `High red,` if tokenized differently). Treat the
+      // value span as starting at the token BEFORE the first comma
+      // unless that token is the alias / keyword.
+      // Simpler: use this index as a coarse upper bound. The keyword
+      // search below uses [1, valueStart) — anything past `as`/`alias`
+      // belongs to the value span.
       break;
     }
   }
@@ -170,16 +185,77 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
   } else {
     // No `as`/`alias` keyword — try legacy bare-shorthand. The trailing
     // token of the name span (just before inline values) is the alias
-    // candidate; if it passes the universal alias regex, accept it and
-    // mark legacyForm='bare-shorthand'.
-    if (tokens[0][0] === '"' || tokens[0][0] === "'") {
+    // candidate; if it passes the universal alias regex AND is NOT a
+    // recognized palette color (§1.5 escape hatch), accept it.
+    //
+    // When inline values are present (valueStart < tokens.length), the
+    // tokens immediately before the first value-segment-with-color form
+    // the (name + alias) prefix. The first value contains at least the
+    // value name + trailing color, so we walk back to find where it
+    // starts: skip the trailing color token, then 1+ name tokens.
+    const isColorWord = (s: string): boolean =>
+      (RECOGNIZED_COLOR_NAMES as readonly string[]).includes(s);
+
+    if (valueStart < tokens.length) {
+      // Inline values are present (we found a comma at valueStart).
+      // The first value's last token is at index commaIdx; strip the
+      // comma to inspect. Walk back to determine the value name length.
+      const commaTokenIdx = valueStart;
+      // Find where the first value starts: the value contains at least
+      // 1 word + optional trailing color. Walk back from commaTokenIdx
+      // while the previous tokens look like value-name words (i.e. not
+      // a recognized alias-shaped lowercase short token that is followed
+      // by a value start).
+      // Simpler heuristic: pre-comma trailing color is the last token if
+      // it's a recognized color (after stripping comma). The value's
+      // name is the token immediately before that. So the value spans
+      // (firstValueStart..=commaTokenIdx). The "name + alias" prefix
+      // is [0, firstValueStart).
+      const lastBeforeComma = tokens[commaTokenIdx].replace(/,$/, '');
+      // value = `<name word(s)> <color>` if trailing token is a recognized
+      // palette word; otherwise value = `<name word(s)>` (no color).
+      const firstValueStart = isColorWord(lastBeforeComma)
+        ? commaTokenIdx - 1
+        : commaTokenIdx;
+      // Now firstValueStart points at the first token of value #1.
+      // [0, firstValueStart) is the `<name + optional alias>` prefix.
+      const prefixEnd = firstValueStart;
+      const aliasCandidate = prefixEnd > 1 ? tokens[prefixEnd - 1] : undefined;
+      if (
+        aliasCandidate &&
+        isAliasToken(aliasCandidate) &&
+        !isColorWord(aliasCandidate)
+      ) {
+        alias = aliasCandidate;
+        legacyForm = 'bare-shorthand';
+        name = tokens
+          .slice(0, prefixEnd - 1)
+          .map((t) => stripQuotes(t))
+          .join(' ');
+        restStartIdx = prefixEnd;
+      } else {
+        name = tokens
+          .slice(0, prefixEnd)
+          .map((t) => stripQuotes(t))
+          .join(' ');
+        restStartIdx = prefixEnd;
+      }
+    } else if (tokens[0][0] === '"' || tokens[0][0] === "'") {
       // Quoted name. Check the next token for legacy bare alias.
-      if (tokens.length > 1 && isAliasToken(tokens[1]) && valueStart > 1) {
+      if (
+        tokens.length > 1 &&
+        isAliasToken(tokens[1]) &&
+        !isColorWord(tokens[1])
+      ) {
         alias = tokens[1];
         legacyForm = 'bare-shorthand';
         restStartIdx = 2;
       }
-    } else if (valueStart > 1 && isAliasToken(tokens[valueStart - 1])) {
+    } else if (
+      valueStart > 1 &&
+      isAliasToken(tokens[valueStart - 1]) &&
+      !isColorWord(tokens[valueStart - 1])
+    ) {
       // Bare shorthand at the end of the name span.
       alias = tokens[valueStart - 1];
       legacyForm = 'bare-shorthand';
@@ -207,12 +283,16 @@ export function parseTagDeclaration(line: string): TagBlockMatch | null {
       .filter(Boolean);
   }
 
-  // Trailing `(color)` on the name itself (no inline values).
+  // Trailing recognized-color token on the name itself (no inline values).
+  // Per §1.5 universal trailing-token: case-sensitive lowercase match.
   if (!inlineValues || inlineValues.length === 0) {
-    const colorMatch = name.match(/\(([^)]+)\)\s*$/);
-    if (colorMatch) {
-      colorHint = colorMatch[1];
-      name = name.substring(0, colorMatch.index!).trim();
+    const lastSpaceIdx = name.lastIndexOf(' ');
+    if (lastSpaceIdx > 0) {
+      const trailing = name.substring(lastSpaceIdx + 1);
+      if ((RECOGNIZED_COLOR_NAMES as readonly string[]).includes(trailing)) {
+        colorHint = trailing;
+        name = name.substring(0, lastSpaceIdx).trimEnd();
+      }
     }
   }