@diagrammo/dgmo 0.15.1 → 0.16.0

package/src/cycle/parser.ts

@@ -7,6 +7,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   tryParseSharedOption,
 } from '../utils/parsing';
 import type { ParsedCycle, CycleNode, CycleEdge } from './types';
@@ -149,6 +150,7 @@ export function parseCycle(content: string): ParsedCycle {
       }
 
       // Parse node: Label | color: blue, span: 3, description: text
+      // OR shortcut form (color only): `Label color` (universal §1.5)
       const pipeIdx = trimmed.indexOf('|');
       let label: string;
       let metadata: Record<string, string> = {};
@@ -166,6 +168,18 @@ export function parseCycle(content: string): ParsedCycle {
         continue;
       }
 
+      // Universal trailing-token shortcut: if no `| color:` was set explicitly
+      // and the label ends in a recognized color word, treat that word as the
+      // color and strip it from the label.
+      if (!metadata['color']) {
+        const { label: stripped, colorName: shortcutColor } =
+          peelTrailingColorName(label);
+        if (shortcutColor) {
+          metadata['color'] = shortcutColor;
+          label = stripped;
+        }
+      }
+
       // Extract known keys from metadata
       const color = metadata['color'];
       const spanStr = metadata['span'];

package/src/cycle/renderer.ts

@@ -46,6 +46,7 @@ export interface CycleRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 /**
@@ -144,7 +145,7 @@ export function renderCycle(
     const legendConfig: LegendConfig = {
       groups: [],
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: renderOptions?.exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -519,7 +520,8 @@ export function renderCycleForExport(
   palette: PaletteColors,
   isDark: boolean,
   exportDims?: D3ExportDimensions,
-  viewState?: CompactViewState
+  viewState?: CompactViewState,
+  exportMode?: boolean
 ): void {
   renderCycle(
     container,
@@ -528,7 +530,8 @@ export function renderCycleForExport(
     isDark,
     undefined,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }
 

package/src/d3.ts

@@ -205,6 +205,7 @@ import {
   normalizeNumericToken,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   MULTIPLE_PIPE_ERROR,
 } from './utils/parsing';
 import {
@@ -593,8 +594,12 @@ export function parseVisualization(
       currentTimelineTagGroup = null;
     }
 
-    // [Group] container headers for arc diagram node grouping and timeline eras
-    const groupMatch = line.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    // [Group] container headers for arc / timeline (§1.5 trailing-token):
+    //   `[Group]`           — no color
+    //   `[Group] color`     — trailing-token color (recognized palette word)
+    const groupMatch = line.match(
+      /^\[(.+?)\](?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
+    );
     if (groupMatch) {
       if (result.type === 'arc') {
         const name = groupMatch[1].trim();
@@ -649,10 +654,11 @@ export function parseVisualization(
       currentTimelineGroup = null;
     }
 
-    // Arc link line: source -> target(color) weight
+    // Arc link line (§1.5 trailing-token):
+    //   `source -> target [color] [weight]` — color before weight
     if (result.type === 'arc') {
       const linkMatch = line.match(
-        /^(.+?)\s*->\s*(.+?)(?:\(([^)]+)\))?\s*(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
+        /^(.+?)\s*->\s*(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+(-?[\d,_]+(?:\.[\d]+)?))?$/
       );
       if (linkMatch) {
         const source = linkMatch[1].trim();
@@ -698,8 +704,12 @@ export function parseVisualization(
         // fall through to process this line normally
       } else {
         if (line.startsWith('//')) continue;
+        // Timeline era block entry (\u00a71.5 trailing-token):
+        //   `<start> -> <end> Label`           (no color)
+        //   `<start> -> <end> Label color`     (trailing color word)
+        // Color (group 4) must be a recognized lowercase palette word.
         const eraEntryMatch = line.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (eraEntryMatch) {
           const colorAnnotation = eraEntryMatch[4]?.trim() || null;
@@ -731,8 +741,9 @@ export function parseVisualization(
         // fall through to process this line normally
       } else {
         if (line.startsWith('//')) continue;
+        // Timeline marker block entry (§1.5 trailing-token).
         const markerEntryMatch = line.match(
-          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+          /^(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
         );
         if (markerEntryMatch) {
           const colorAnnotation = markerEntryMatch[3]?.trim() || null;
@@ -772,9 +783,11 @@ export function parseVisualization(
         continue;
       }
 
-      // Timeline era lines (inline): era YYYY->YYYY Label (color)
+      // Timeline era lines, inline (\u00a71.5 trailing-token):
+      //   `era YYYY->YYYY Label`        \u2014 no color
+      //   `era YYYY->YYYY Label color`  \u2014 trailing-token color (recognized palette word)
       const eraMatch = line.match(
-        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^era\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s*(?:->|\u2013>)\s*(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (eraMatch) {
         const colorAnnotation = eraMatch[4]?.trim() || null;
@@ -795,9 +808,11 @@ export function parseVisualization(
         continue;
       }
 
-      // Timeline marker lines (inline): marker YYYY Label (color)
+      // Timeline marker lines, inline (§1.5 trailing-token):
+      //   `marker YYYY Label`        — no color
+      //   `marker YYYY Label color`  — trailing-token color
       const markerMatch = line.match(
-        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2}(?: \d{2}:\d{2})?)?)\s+(.+?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
       );
       if (markerMatch) {
         const colorAnnotation = markerMatch[3]?.trim() || null;
@@ -959,19 +974,20 @@ export function parseVisualization(
         }
       }
 
-      // Set declaration: "Name(color) as <alias>" / "Name as <alias>" / "Name(color)" / "Name"
-      // Legacy "Name(color) alias <token>" emits E_VENN_ALIAS_KEYWORD_REMOVED.
+      // Set declaration (§1.5 universal trailing-token):
+      //   `Name` / `Name color` / `Name as <alias>` / `Name color as <alias>`
+      // Legacy `Name color alias <token>` emits E_VENN_ALIAS_KEYWORD_REMOVED.
       // Only attempt set parsing if the line wasn't a bare-keyword option (handled above).
       if (!/^(solid-fill|no-name|no-value|no-percent|no-title)$/i.test(line)) {
         // Detect legacy `alias` keyword first — graceful degradation parses
         // the rest of the line so the set still appears.
-        const legacyAliasMatch = line.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?\s+alias\s+(\S+)\s*$/i
-        );
+        const legacyAliasMatch = line.match(/^(.+?)\s+alias\s+(\S+)\s*$/i);
         if (legacyAliasMatch) {
-          const name = legacyAliasMatch[1].trim();
-          const colorName = legacyAliasMatch[2]?.trim() ?? null;
-          const aliasToken = legacyAliasMatch[3].trim();
+          const nameWithMaybeColor = legacyAliasMatch[1].trim();
+          const aliasToken = legacyAliasMatch[2].trim();
+          // Split off trailing-token color from the name region.
+          const { label: name, colorName } =
+            peelTrailingColorName(nameWithMaybeColor);
           let color: string | null = null;
           if (colorName) {
             color =
@@ -995,11 +1011,14 @@ export function parseVisualization(
         }
 
         const setDeclMatch = line.match(
-          /^([^(:]+?)(?:\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
+          /^(.+?)(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/i
         );
         if (setDeclMatch) {
-          const name = setDeclMatch[1].trim();
-          const colorName = setDeclMatch[2]?.trim() ?? null;
+          const nameWithMaybeColor = setDeclMatch[1].trim();
+          const alias = setDeclMatch[2]?.trim() ?? null;
+          // Split off trailing-token color from the name region (before `as`).
+          const { label: name, colorName } =
+            peelTrailingColorName(nameWithMaybeColor);
           let color: string | null = null;
           if (colorName) {
             color =
@@ -1010,7 +1029,6 @@ export function parseVisualization(
                 palette
               ) ?? null;
           }
-          const alias = setDeclMatch[3]?.trim() ?? null;
           result.vennSets.push({ name, alias, color, lineNumber });
           continue;
         }
@@ -1057,19 +1075,20 @@ export function parseVisualization(
         continue;
       }
 
-      // Quadrant position labels: top-right Label (color)
+      // Quadrant position labels (§1.5 trailing-token):
+      //   `top-right Label`        — no color
+      //   `top-right Label color`  — trailing-token color (recognized palette word)
       const quadrantLabelRe =
         /^(top-right|top-left|bottom-left|bottom-right)\s+(.+)/i;
       const quadrantMatch = line.match(quadrantLabelRe);
       if (quadrantMatch) {
         const position = quadrantMatch[1].toLowerCase();
         const labelPart = quadrantMatch[2].trim();
-        // Check for color annotation: "Label (color)" or "Label(color)"
-        const labelColorMatch = labelPart.match(/^(.+?)\s*\(([^)]+)\)\s*$/);
-        const text = labelColorMatch ? labelColorMatch[1].trim() : labelPart;
-        const color = labelColorMatch
+        // Peel trailing recognized color word from the label.
+        const { label: text, colorName } = peelTrailingColorName(labelPart);
+        const color = colorName
           ? (resolveColorWithDiagnostic(
-              labelColorMatch[2].trim(),
+              colorName,
               lineNumber,
               result.diagnostics,
               palette
@@ -1325,12 +1344,12 @@ export function parseVisualization(
           continue;
         }
 
-        // Color annotation: `Label (color)` → extract color
-        const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
-        const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
-        const colorPart = colorMatch
+        // Color annotation (§1.5 trailing-token): `Label color` → split.
+        const { label: labelPart, colorName: colorWord } =
+          peelTrailingColorName(joinedLabel);
+        const colorPart = colorWord
           ? (resolveColorWithDiagnostic(
-              colorMatch[2].trim(),
+              colorWord,
               lineNumber,
               result.diagnostics,
               palette
@@ -3885,7 +3904,8 @@ function renderTimelineTagLegendOverlay(
   onTagStateChange:
     | ((activeTagGroup: string | null, swimlaneTagGroup: string | null) => void)
     | undefined,
-  viewMode: boolean | undefined
+  viewMode: boolean | undefined,
+  exportMode?: boolean
 ): void {
   if (parsed.timelineTagGroups.length === 0) return;
 
@@ -4038,7 +4058,7 @@ function renderTimelineTagLegendOverlay(
       const centralConfig: LegendConfig = {
         groups: centralGroups,
         position: { placement: 'top-center', titleRelation: 'below-title' },
-        mode: 'fixed',
+        mode: exportMode ? 'export' : 'preview',
         capsulePillAddonWidth: iconAddon,
       };
       const centralState: LegendState = { activeGroup: centralActive };
@@ -5517,7 +5537,8 @@ export function renderTimeline(
     activeTagGroup: string | null,
     swimlaneTagGroup: string | null
   ) => void,
-  viewMode?: boolean
+  viewMode?: boolean,
+  exportMode?: boolean
 ): void {
   const setup = setupTimeline(
     container,
@@ -5599,7 +5620,8 @@ export function renderTimeline(
     swimlaneTagGroup,
     activeTagGroup,
     onTagStateChange,
-    viewMode
+    viewMode,
+    exportMode
   );
 }
 
@@ -7512,8 +7534,10 @@ export async function renderForExport(
     c4System?: string;
     c4Container?: string;
     tagGroup?: string;
+    exportMode?: boolean;
   }
 ): Promise<string> {
+  const exportMode = options?.exportMode ?? false;
   // Flowchart and org chart use their own parser pipelines — intercept before parseVisualization()
   const { parseDgmoChartType } = await import('./dgmo-router');
   const detectedType = parseDgmoChartType(content);
@@ -7567,7 +7591,9 @@ export async function renderForExport(
       undefined,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      undefined,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7621,7 +7647,8 @@ export async function renderForExport(
       undefined,
       { width: exportWidth, height: exportHeight },
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7650,6 +7677,7 @@ export async function renderForExport(
       collapsedLanes: viewState?.cl ? new Set(viewState.cl) : undefined,
       collapsedColumns: viewState?.cc ? new Set(viewState.cc) : undefined,
       compactMeta: viewState?.cm,
+      exportMode,
     });
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7677,7 +7705,9 @@ export async function renderForExport(
       effectivePalette,
       theme === 'dark',
       undefined,
-      { width: exportWidth, height: exportHeight }
+      { width: exportWidth, height: exportHeight },
+      undefined,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7711,7 +7741,8 @@ export async function renderForExport(
         erParsed.options['active-tag'],
         viewState?.tag ?? options?.tagGroup
       ),
-      viewState?.sem
+      viewState?.sem,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7751,6 +7782,7 @@ export async function renderForExport(
         exportDims: { width: exportWidth, height: exportHeight },
         activeTagGroup: viewState?.tag ?? options?.tagGroup,
         hiddenTagValues: blHiddenTagValues,
+        exportMode,
       }
     );
     return finalizeSvgExport(container, theme, effectivePalette);
@@ -7810,7 +7842,7 @@ export async function renderForExport(
       undefined,
       hideDescriptions,
       colorByDepth ? null : activeTagGroup,
-      colorByDepth ? { colorByDepth: true } : undefined
+      colorByDepth ? { colorByDepth: true, exportMode } : { exportMode }
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -7912,7 +7944,8 @@ export async function renderForExport(
         c4Parsed.tagGroups,
         c4Parsed.options['active-tag'],
         viewState?.tag ?? options?.tagGroup
-      )
+      ),
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -8079,6 +8112,7 @@ export async function renderForExport(
           resolved.options.activeTag ?? undefined,
           viewState?.tag ?? options?.tagGroup
         ),
+        exportMode,
       },
       { width: EXPORT_W, height: EXPORT_H }
     );
@@ -8126,7 +8160,8 @@ export async function renderForExport(
       effectivePalette,
       theme === 'dark',
       { width: RADAR_EXPORT_W, height: RADAR_EXPORT_H },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -8153,6 +8188,7 @@ export async function renderForExport(
     );
     renderJourneyMap(container, jmParsed, effectivePalette, theme === 'dark', {
       exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight },
+      exportMode,
     });
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -8172,7 +8208,8 @@ export async function renderForExport(
       effectivePalette,
       theme === 'dark',
       { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
-      viewState
+      viewState,
+      exportMode
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -8311,7 +8348,10 @@ export async function renderForExport(
         undefined,
         viewState?.tag ?? options?.tagGroup
       ),
-      viewState?.swim
+      viewState?.swim,
+      undefined,
+      undefined,
+      exportMode
     );
   } else if (parsed.type === 'venn') {
     renderVenn(container, parsed, effectivePalette, isDark, undefined, dims);

package/src/echarts.ts

@@ -367,12 +367,15 @@ export function parseExtendedChart(
     }
 
     // [Category] container header with optional color: [Category Name] or [Category Name](color)
-    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    // Category brackets with optional trailing-token color (§1.5):
+    // `[Name]` or `[Name] color`. Per universal rule, color is a bare token.
+    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s+(\S+))?\s*$/);
     if (categoryMatch) {
       const catName = categoryMatch[1].trim();
-      const catColor = categoryMatch[2]
+      const rawCatColor = categoryMatch[2]?.trim();
+      const catColor = rawCatColor
         ? (resolveColorWithDiagnostic(
-            categoryMatch[2].trim(),
+            rawCatColor,
             lineNumber,
             result.diagnostics,
             palette
@@ -388,9 +391,14 @@ export function parseExtendedChart(
       continue;
     }
 
-    // Sankey/chord link syntax: Source -> Target Value (directed) or Source -- Target Value (undirected)
+    // Sankey/chord link syntax (§1.5 universal trailing-token):
+    //   `Source -> Target value`           (directed, no link color)
+    //   `Source -> Target value linkColor` (directed, trailing-token link color)
+    //   `Source -- Target value`           (undirected)
+    // Link color (if present) must be a recognized lowercase palette word.
+    // Source/target labels still accept trailing-token color via extractColor.
     const arrowMatch = trimmed.match(
-      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)\s*(?:\(([^)]+)\))?\s*$/
+      /^(.+?)\s*(->|--)\s*(.+?)\s+(-?[\d,_]+(?:\.[\d]+)?)(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?\s*$/
     );
     if (arrowMatch) {
       const [, rawSource, arrow, rawTarget, rawVal, rawLinkColor] = arrowMatch;
@@ -441,13 +449,22 @@ export function parseExtendedChart(
           sankeyStack.pop();
         }
         if (sankeyStack.length > 0) {
-          // Parse "TargetName value (linkColor)" or "TargetName(nodeColor) value (linkColor)"
-          // Strip trailing (color) annotation before parseDataRowValues — it can't handle it
+          // Indented sankey child (§1.5 trailing-token):
+          //   `TargetName value`                  — link, no link color
+          //   `TargetName value linkColor`        — link with link color
+          //   `TargetName nodeColor value`        — node-colored child
+          //   `TargetName nodeColor value linkColor` — both
+          // Strategy: peel a trailing recognized color word (after the value)
+          // first, then run parseDataRowValues on the remainder. Trailing
+          // tokens that aren't recognized colors stay in the data row.
           const valColorMatch = trimmed.match(
-            /(-?[\d,_]+(?:\.[\d]+)?)\s*\(([^)]+)\)\s*$/
+            /(-?[\d,_]+(?:\.[\d]+)?)\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\s*$/
           );
           const strippedLine = valColorMatch
-            ? trimmed.replace(/\s*\([^)]+\)\s*$/, '')
+            ? trimmed.replace(
+                /\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white)\s*$/,
+                ''
+              )
             : trimmed;
           const dataRow = parseDataRowValues(strippedLine);
           if (dataRow && dataRow.values.length === 1) {

package/src/editor/dgmo.grammar

@@ -8,7 +8,6 @@ contentPart {
   SectionMarker |
   Url |
   OpenBracket | CloseBracket | OpenParen | CloseParen | OpenAngle | CloseAngle |
-  ColorAnnotation |
   Pipe | Colon | Comma | Plus | Dash | Tilde | Star | Question |
   ChartType |
   TagKeyword | DirectiveKeyword | ControlKeyword | ModifierKeyword |
@@ -38,7 +37,6 @@ contentPart {
 
   SectionMarker { "==" }
   Url { "http" "s"? "://" ![ \t\n|,)\]>]+ }
-  ColorAnnotation { "(" $[a-z\-]+ ")" }
 
   Pipe { "|" }
   Colon { ":" }
@@ -66,7 +64,7 @@ contentPart {
 
   @precedence {
     Comment, SyncArrow, AsyncArrow,
-    Duration, DateLiteral, Percentage, Number, SectionMarker, Url, ColorAnnotation,
+    Duration, DateLiteral, Percentage, Number, SectionMarker, Url,
     Pipe, Colon, Comma, Plus, Dash, Tilde, Star, Question,
     OpenBracket, CloseBracket, OpenParen, CloseParen, OpenAngle, CloseAngle,
     QuotedString, Identifier, Punct

package/src/editor/dgmo.grammar.js

@@ -3,16 +3,16 @@ import {LRParser} from "@lezer/lr"
 import {specializeKeyword} from "./tokens"
 export const parser = LRParser.deserialize({
   version: 14,
-  states: "!WQVQPOOOOQO'#DV'#DVOOQO'#DQ'#DQO%cQPO'#CdOOQO'#DP'#DPQVQPOOOOQO-E7O-E7OOOQO,59O,59OOOQO-E6}-E6}",
-  stateData: "&X~OwOS~OPPOQPORPOSPOTPOVSOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOrPOxSO~OPPOQPORPOSPOTPOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOrPO~OxVO~P#`OVXYZ[]^_`ghijklmnoabcdefpqrk~",
-  goto: "!czPPPPPPPP{PPPPPPPPPPPPPPPPPPPPPPPPPP!P!VPPPP!^TSOTQTORWTSROTRURVQORT",
-  nodeNames: "⚠ ChartType TagKeyword DirectiveKeyword ControlKeyword ModifierKeyword Document Comment ContentLine SyncArrow AsyncArrow Duration DateLiteral Percentage Number SectionMarker Url OpenBracket CloseBracket OpenParen CloseParen OpenAngle CloseAngle ColorAnnotation Pipe Colon Comma Plus Dash Tilde Star Question QuotedString Identifier Punct",
-  maxTerm: 41,
+  states: "!WQVQPOOOOQO'#DU'#DUOOQO'#DP'#DPO%]QPO'#CdOOQO'#DO'#DOQVQPOOOOQO-E6}-E6}OOQO,59O,59OOOQO-E6|-E6|",
+  stateData: "&Q~OvOS~OPPOQPORPOSPOTPOVSOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPOwSO~OPPOQPORPOSPOTPOXPOYPOZPO[PO]PO^PO_PO`POaPObPOcPOdPOePOfPOgPOhPOiPOjPOkPOlPOmPOnPOoPOpPOqPO~OwVO~P#]OVXYZ[]^_`ghijklmnabcdefopqk~",
+  goto: "!byPPPPPPPPzPPPPPPPPPPPPPPPPPPPPPPPPP!O!UPPPP!]TSOTQTORWTSROTRURVQORT",
+  nodeNames: "⚠ ChartType TagKeyword DirectiveKeyword ControlKeyword ModifierKeyword Document Comment ContentLine SyncArrow AsyncArrow Duration DateLiteral Percentage Number SectionMarker Url OpenBracket CloseBracket OpenParen CloseParen OpenAngle CloseAngle Pipe Colon Comma Plus Dash Tilde Star Question QuotedString Identifier Punct",
+  maxTerm: 40,
   skippedNodes: [0],
   repeatNodeCount: 2,
-  tokenData: "=_~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz&Tz{&[{|&c|}&j}!O&q!O!P#u!P!Q'Q!Q!['q![!]0d!]!^#u!^!_0k!_!`0r!`!a1P!a!b1W!b!c#u!c!}1_!}#O4e#O#P#u#P#Q4j#Q#R#u#R#S1_#S#T#u#T#[1_#[#]4q#]#o1_#o#p#u#p#q<q#q#r#u#r#s<x#s;'S#u;'S;=`=X<%lO#u~#zOr~~$PQw~XY#zpq#z~$[Ox~~$aUr~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Op~~%bP;=`<%l$s~%lQc~r~}!O%r#T#o%r~%uRyz&O}!O%r#T#o%r~&TOg~~&[Od~r~~&cOn~r~~&jOk~r~~&qOj~r~~&xPl~r~!`!a&{~'QOX~~'VPr~!P!Q'Y~'_SV~OY'YZ;'S'Y;'S;=`'k<%lO'Y~'nP;=`<%l'Y~'x]^~r~uv(q|}(v!O!P)s!Q![+d#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~(vO]~~(yP!Q![(|~)PP!Q![)S~)VP!Q![)Y~)_Q^~|}(v!O!P)e~)hP!Q![)k~)pP^~!Q![)k~)vP!Q![)y~*OY^~uv(q!Q![)y#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~*qP#W#X*t~*yPZ~!a!b*|~+ROZ~~+WQZ~!a!b*|#]#^+^~+aP#b#c*t~+i]^~uv(q|}(v!O!P)s!Q![,b#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~,g]^~uv(q|}(v!O!P)s!Q![-`#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~-e]^~uv(q}!O.^!O!P)s!Q![/T#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~.aP!Q![.d~.gP!Q![.j~.oP[~}!O.r~.uP!Q![.x~.{P!Q![/O~/TO[~~/Y[^~uv(q!O!P)s!Q![/T#R#S0O#U#V*n#W#X*t#[#]*t#a#b+R#e#f*t#g#h*t#k#l*t#m#n*t~0RP!Q![0U~0ZR^~!O!P)e!Q![0U#R#S0O~0kOi~r~~0rOe~r~~0wPr~!_!`0z~1PO_~~1WOf~r~~1_Oo~r~~1f_q~r~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~2j_q~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~3l]qr2est2evw2ewx2e{|2e!O!P2e!P!Q2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~4jOa~~4qOb~r~~4xaq~r~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#h2e#h#i5}#i#o2e~6Saq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#h2e#h#i7X#i#o2e~7^aq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#d2e#d#e8c#e#o2e~8hbq~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e![!]9p!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#g2e#g#h;j#h#o2e~9sP!P!Q9v~9yP!P!Q9|~:PYOX:oZp:oqy:oz|:o}!`:o!a#P:o#Q#p:o#q;'S:o;'S;=`;d<%lO:o~:tY`~OX:oZp:oqy:oz|:o}!`:o!a#P:o#Q#p:o#q;'S:o;'S;=`;d<%lO:o~;gP;=`<%l:o~;o`q~qr2est2evw2ewx2e{|2e}!O3i!O!P2e!P!Q2e!Q![2e![!]9p!_!`2e!a!b2e!b!c2e!c!}2e#R#S2e#T#o2e~<xOh~r~~=PPm~r~!`!a=S~=XOY~~=[P;=`<%l#u",
+  tokenData: "<v~RzOX#uXY#zYZ$VZp#upq#zqr#urs$[st#uux#uxy%eyz%lz{%s{|%z|}&R}!O&Y!O!P#u!P!Q&i!Q!['Y![!]/{!]!^#u!^!_0S!_!`0Z!`!a0h!a!b0o!b!c#u!c!}0v!}#O3|#O#P#u#P#Q4R#Q#R#u#R#S0v#S#T#u#T#[0v#[#]4Y#]#o0v#o#p#u#p#q<Y#q#r#u#r#s<a#s;'S#u;'S;=`<p<%lO#u~#zOq~~$PQv~XY#zpq#z~$[Ow~~$aUq~OY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~$vUOY$sZr$srs%Ys;'S$s;'S;=`%_<%lO$s~%_Oo~~%bP;=`<%l$s~%lOc~q~~%sOd~q~~%zOm~q~~&ROj~q~~&YOi~q~~&aPk~q~!`!a&d~&iOX~~&nPq~!P!Q&q~&vSV~OY&qZ;'S&q;'S;=`'S<%lO&q~'VP;=`<%l&q~'a]^~q~uv(Y|}(_!O!P)[!Q![*{#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~(_O]~~(bP!Q![(e~(hP!Q![(k~(nP!Q![(q~(vQ^~|}(_!O!P(|~)PP!Q![)S~)XP^~!Q![)S~)_P!Q![)b~)gY^~uv(Y!Q![)b#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~*YP#W#X*]~*bPZ~!a!b*e~*jOZ~~*oQZ~!a!b*e#]#^*u~*xP#b#c*]~+Q]^~uv(Y|}(_!O!P)[!Q![+y#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,O]^~uv(Y|}(_!O!P)[!Q![,w#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~,|]^~uv(Y}!O-u!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~-xP!Q![-{~.OP!Q![.R~.WP[~}!O.Z~.^P!Q![.a~.dP!Q![.g~.lO[~~.q[^~uv(Y!O!P)[!Q![.l#R#S/g#U#V*V#W#X*]#[#]*]#a#b*j#e#f*]#g#h*]#k#l*]#m#n*]~/jP!Q![/m~/rR^~!O!P(|!Q![/m#R#S/g~0SOh~q~~0ZOe~q~~0`Pq~!_!`0c~0hO_~~0oOf~q~~0vOn~q~~0}_p~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~2R_p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~3T]qr1|st1|vw1|wx1|{|1|!O!P1|!P!Q1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~4ROa~~4YOb~q~~4aap~q~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i5f#i#o1|~5kap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#h1|#h#i6p#i#o1|~6uap~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#d1|#d#e7z#e#o1|~8Pbp~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#g1|#g#h;R#h#o1|~9[P!P!Q9_~9bP!P!Q9e~9hYOX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~:]Y`~OX:WZp:Wqy:Wz|:W}!`:W!a#P:W#Q#p:W#q;'S:W;'S;=`:{<%lO:W~;OP;=`<%l:W~;W`p~qr1|st1|vw1|wx1|{|1|}!O3Q!O!P1|!P!Q1|!Q![1|![!]9X!_!`1|!a!b1|!b!c1|!c!}1|#R#S1|#T#o1|~<aOg~q~~<hPl~q~!`!a<k~<pOY~~<sP;=`<%l#u",
   tokenizers: [0],
   topRules: {"Document":[0,6]},
-  specialized: [{term: 33, get: (value, stack) => (specializeKeyword(value, stack) << 1), external: specializeKeyword}],
-  tokenPrec: 210
+  specialized: [{term: 32, get: (value, stack) => (specializeKeyword(value, stack) << 1), external: specializeKeyword}],
+  tokenPrec: 204
 })

package/src/editor/dgmo.grammar.terms.js

@@ -22,15 +22,14 @@ export const
   CloseParen = 20,
   OpenAngle = 21,
   CloseAngle = 22,
-  ColorAnnotation = 23,
-  Pipe = 24,
-  Colon = 25,
-  Comma = 26,
-  Plus = 27,
-  Dash = 28,
-  Tilde = 29,
-  Star = 30,
-  Question = 31,
-  QuotedString = 32,
-  Identifier = 33,
-  Punct = 34
+  Pipe = 23,
+  Colon = 24,
+  Comma = 25,
+  Plus = 26,
+  Dash = 27,
+  Tilde = 28,
+  Star = 29,
+  Question = 30,
+  QuotedString = 31,
+  Identifier = 32,
+  Punct = 33

package/src/editor/highlight-api.ts

@@ -46,7 +46,6 @@ const NODE_TO_ROLE: Record<string, string> = {
   Percentage: 'number',
   SectionMarker: 'heading',
   Url: 'url',
-  ColorAnnotation: 'colorAnnotation',
   OpenBracket: 'bracket',
   CloseBracket: 'bracket',
   OpenParen: 'bracket',

package/src/editor/highlight.ts

@@ -23,7 +23,6 @@ export const dgmoHighlighting: NodePropSource = styleTags({
   OpenAngle: t.angleBracket,
   CloseAngle: t.angleBracket,
   Url: t.url,
-  ColorAnnotation: t.atom,
   Pipe: t.separator,
   Colon: t.separator,
   Plus: t.separator,