@diagrammo/dgmo 0.8.3 → 0.8.5

package/src/editor/dgmo.grammar

@@ -0,0 +1,69 @@
+@top Document { (newline | Comment | ContentLine)* }
+
+ContentLine { contentPart+ newline }
+
+contentPart {
+  SyncArrow | AsyncArrow |
+  Duration | DateLiteral | Percentage | Number |
+  SectionMarker |
+  Url |
+  OpenBracket | CloseBracket | OpenParen | CloseParen | OpenAngle | CloseAngle |
+  ColorAnnotation |
+  Pipe | Colon | Comma | Plus | Dash | Tilde | Star | Question |
+  ChartType |
+  TagKeyword | DirectiveKeyword | ControlKeyword | ModifierKeyword |
+  Identifier |
+  Punct
+}
+
+@skip { spaces }
+
+@tokens {
+  spaces { $[ \t]+ }
+  newline { "\n" }
+
+  Comment { "//" ![\n]* }
+
+  SyncArrow { "->" }
+  AsyncArrow { "~>" }
+
+  Duration { $[0-9]+ ("." $[0-9]+)? ("min" | "bd" | "h" | "d" | "w" | "m" | "q" | "y") "?"? }
+  DateLiteral { $[0-9] $[0-9] $[0-9] $[0-9] "-" $[0-9] $[0-9] ("-" $[0-9] $[0-9])? }
+  Percentage { $[0-9]+ ("." $[0-9]+)? "%" }
+  Number { $[0-9]+ ("." $[0-9]+)? }
+
+  SectionMarker { "==" }
+  Url { "http" "s"? "://" ![ \t\n|,)\]>]+ }
+  ColorAnnotation { "(" $[a-z\-]+ ")" }
+
+  Pipe { "|" }
+  Colon { ":" }
+  Comma { "," }
+  Plus { "+" }
+  Dash { "-" }
+  Tilde { "~" }
+  Star { "*" }
+  Question { "?" }
+  OpenBracket { "[" }
+  CloseBracket { "]" }
+  OpenParen { "(" }
+  CloseParen { ")" }
+  OpenAngle { "<" }
+  CloseAngle { ">" }
+
+  Identifier { $[a-zA-Z_] ($[a-zA-Z0-9_./&?=@#!'+] | "-" $[a-zA-Z_./&?=@#!'+])* }
+
+  Punct { ![$[ \t\n] }
+
+  @precedence {
+    Comment, SyncArrow, AsyncArrow,
+    Duration, DateLiteral, Percentage, Number, SectionMarker, Url, ColorAnnotation,
+    Pipe, Colon, Comma, Plus, Dash, Tilde, Star, Question,
+    OpenBracket, CloseBracket, OpenParen, CloseParen, OpenAngle, CloseAngle,
+    Identifier, Punct
+  }
+}
+
+@external specialize {Identifier} specializeKeyword from "./tokens" {
+  ChartType, TagKeyword, DirectiveKeyword, ControlKeyword, ModifierKeyword
+}

package/src/editor/dgmo.grammar.d.ts

@@ -0,0 +1,2 @@
+import { LRParser } from '@lezer/lr';
+export declare const parser: LRParser;

package/src/editor/dgmo.grammar.js

@@ -0,0 +1,18 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {specializeKeyword} from "./tokens"
+export const parser = LRParser.deserialize({
+  version: 14,
+  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[]^_`ghijklmnoabcdefpqk~",
+  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 ColorAnnotation Pipe Colon Comma Plus Dash Tilde Star Question Identifier Punct",
+  maxTerm: 40,
+  skippedNodes: [0],
+  repeatNodeCount: 2,
+  tokenData: "9q~RxOX#oXY#tYZ$PZp#opq#tqt#oux#oxy$Uyz$tz{${{|%S|}%Z}!O%b!O!P#o!P!Q%q!Q![&b![!],v!]!^#o!^!_,}!_!`-U!`!a-c!a!b-j!b!c#o!c!}-q!}#O0w#O#P#o#P#Q0|#Q#R#o#R#S-q#S#T#o#T#[-q#[#]1T#]#o-q#o#p#o#p#q9T#q#r#o#r#s9[#s;'S#o;'S;=`9k<%lO#o~#tOq~~#yQv~XY#tpq#t~$UOw~~$]Qc~q~}!O$c#T#o$c~$fRyz$o}!O$c#T#o$c~$tOg~~${Od~q~~%SOn~q~~%ZOk~q~~%bOj~q~~%iPl~q~!`!a%l~%qOX~~%vPq~!P!Q%y~&OSV~OY%yZ;'S%y;'S;=`&[<%lO%y~&_P;=`<%l%y~&iY^~q~uv'X!O!P'^!Q![(z#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~'^O]~~'aP!Q!['d~'iX^~uv'X!Q!['d#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~(XP#W#X([~(aPZ~!a!b(d~(iOZ~~(nQZ~!a!b(d#]#^(t~(wP#b#c([~)PY^~uv'X!O!P'^!Q![)o#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~)tY^~uv'X!O!P'^!Q![*d#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~*iZ^~uv'X}!O+[!O!P'^!Q![,R#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~+_P!Q![+b~+eP!Q![+h~+mP[~}!O+p~+sP!Q![+v~+yP!Q![+|~,RO[~~,WY^~uv'X!O!P'^!Q![,R#U#V(U#W#X([#[#]([#a#b(i#e#f([#k#l([#m#n([~,}Oi~q~~-UOe~q~~-ZPq~!_!`-^~-cO_~~-jOf~q~~-qOo~q~~-x_p~q~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#o.w~.|_p~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#o.w~0O]qr.wst.wvw.wwx.w{|.w!O!P.w!P!Q.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#o.w~0|Oa~~1TOb~q~~1[ap~q~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#h.w#h#i2a#i#o.w~2fap~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#h.w#h#i3k#i#o.w~3pap~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#d.w#d#e4u#e#o.w~4zbp~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w![!]6S!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#g.w#g#h7|#h#o.w~6VP!P!Q6Y~6]P!P!Q6`~6cYOX7RZp7Rqy7Rz|7R}!`7R!a#P7R#Q#p7R#q;'S7R;'S;=`7v<%lO7R~7WY`~OX7RZp7Rqy7Rz|7R}!`7R!a#P7R#Q#p7R#q;'S7R;'S;=`7v<%lO7R~7yP;=`<%l7R~8R`p~qr.wst.wvw.wwx.w{|.w}!O/{!O!P.w!P!Q.w!Q![.w![!]6S!_!`.w!a!b.w!b!c.w!c!}.w#R#S.w#T#o.w~9[Oh~q~~9cPm~q~!`!a9f~9kOY~~9nP;=`<%l#o",
+  tokenizers: [0],
+  topRules: {"Document":[0,6]},
+  specialized: [{term: 32, get: (value, stack) => (specializeKeyword(value, stack) << 1), external: specializeKeyword}],
+  tokenPrec: 204
+})

package/src/editor/dgmo.grammar.terms.d.ts

@@ -0,0 +1,5 @@
+export declare const ChartType: number;
+export declare const TagKeyword: number;
+export declare const DirectiveKeyword: number;
+export declare const ControlKeyword: number;
+export declare const ModifierKeyword: number;

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

@@ -0,0 +1,35 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  ChartType = 1,
+  TagKeyword = 2,
+  DirectiveKeyword = 3,
+  ControlKeyword = 4,
+  ModifierKeyword = 5,
+  Document = 6,
+  Comment = 7,
+  ContentLine = 8,
+  SyncArrow = 9,
+  AsyncArrow = 10,
+  Duration = 11,
+  DateLiteral = 12,
+  Percentage = 13,
+  Number = 14,
+  SectionMarker = 15,
+  Url = 16,
+  OpenBracket = 17,
+  CloseBracket = 18,
+  OpenParen = 19,
+  CloseParen = 20,
+  OpenAngle = 21,
+  CloseAngle = 22,
+  ColorAnnotation = 23,
+  Pipe = 24,
+  Colon = 25,
+  Comma = 26,
+  Plus = 27,
+  Dash = 28,
+  Tilde = 29,
+  Star = 30,
+  Question = 31,
+  Identifier = 32,
+  Punct = 33

package/src/editor/highlight-api.ts

@@ -0,0 +1,444 @@
+/**
+ * Standalone DGMO syntax highlighter — no CodeMirror dependency.
+ *
+ * Exports:
+ *   - `highlightDgmo(source)` → `HighlightToken[]` (consumer-agnostic)
+ *   - `NORD_ROLE_STYLES` — inline style objects keyed by role (for React/Astro)
+ *   - `ROLE_TO_ANSI` — ANSI escape codes keyed by role (for CLI)
+ *
+ * Uses the raw Lezer parser directly — keyword specialization is wired into
+ * the grammar, so `parser.parse()` runs it automatically.
+ *
+ * @module @diagrammo/dgmo/highlight
+ */
+
+import { parser } from './dgmo.grammar.js';
+
+// ============================================================
+// Types
+// ============================================================
+
+export interface HighlightToken {
+  text: string;
+  role: string;
+}
+
+// ============================================================
+// NODE_TO_ROLE — keep in sync with highlight.ts
+// ============================================================
+
+const NODE_TO_ROLE: Record<string, string> = {
+  Comment: 'comment',
+  ChartType: 'chartType',
+  TagKeyword: 'definitionKeyword',
+  DirectiveKeyword: 'keyword',
+  ControlKeyword: 'controlKeyword',
+  ModifierKeyword: 'modifier',
+  SyncArrow: 'operator',
+  AsyncArrow: 'operator',
+  Dash: 'operator',
+  Tilde: 'operator',
+  Star: 'operator',
+  Question: 'operator',
+  Duration: 'number',
+  DateLiteral: 'number',
+  Number: 'number',
+  Percentage: 'number',
+  SectionMarker: 'heading',
+  Url: 'url',
+  ColorAnnotation: 'colorAnnotation',
+  OpenBracket: 'bracket',
+  CloseBracket: 'bracket',
+  OpenParen: 'bracket',
+  CloseParen: 'bracket',
+  OpenAngle: 'bracket',
+  CloseAngle: 'bracket',
+  Pipe: 'separator',
+  Colon: 'separator',
+  Plus: 'separator',
+  Comma: 'punctuation',
+  Punct: 'punctuation',
+  Identifier: 'default',
+};
+
+// ============================================================
+// Entity detection — keep in sync with entity-highlight.ts
+// ============================================================
+
+/** Tokens that have grammar-level styling which should be overridden in labels. */
+const OVERRIDE_IN_LABEL = new Set([
+  'ChartType',
+  'TagKeyword',
+  'DirectiveKeyword',
+  'ControlKeyword',
+  'ModifierKeyword',
+  'Number',
+  'Percentage',
+  'Duration',
+  'DateLiteral',
+]);
+
+/** Lines starting with these are keyword-led — not entity declarations. */
+const KEYWORD_STARTS = new Set([
+  'TagKeyword',
+  'DirectiveKeyword',
+  'ControlKeyword',
+  'ModifierKeyword',
+  'SectionMarker',
+  'Comment',
+  'Duration',
+  'DateLiteral',
+]);
+
+// ============================================================
+// Core: highlightDgmo()
+// ============================================================
+
+/**
+ * Tokenize DGMO source into annotated highlight spans.
+ *
+ * Guarantees lossless round-trip:
+ *   `highlightDgmo(src).map(t => t.text).join('') === src`
+ */
+export function highlightDgmo(source: string): HighlightToken[] {
+  const tree = parser.parse(source);
+  const tokens: HighlightToken[] = [];
+
+  // Phase 1: Walk tree cursor, collect leaf tokens with gap filling
+  let pos = 0;
+  const cursor = tree.cursor();
+
+  // Descend to leaves, process them, then advance via next() or parent+next()
+  function descend(): void {
+    for (;;) {
+      // Try to go deeper
+      if (cursor.firstChild()) continue;
+
+      // At a leaf — emit it
+      emitLeaf();
+
+      // Try to advance to next sibling or ascend
+      while (!cursor.nextSibling()) {
+        if (!cursor.parent()) return; // back at root — done
+      }
+
+      // Now at next sibling — loop will try to descend into it
+    }
+  }
+
+  function emitLeaf(): void {
+    const from = cursor.from;
+    const to = cursor.to;
+
+    // Fill gap before this node
+    if (from > pos) {
+      tokens.push({ text: source.slice(pos, from), role: 'default' });
+    }
+
+    // Emit this leaf node
+    if (to > from) {
+      const role = NODE_TO_ROLE[cursor.name] ?? 'default';
+      tokens.push({ text: source.slice(from, to), role });
+    }
+
+    pos = to;
+  }
+
+  descend();
+
+  // Fill trailing gap
+  if (pos < source.length) {
+    tokens.push({ text: source.slice(pos, source.length), role: 'default' });
+  }
+
+  // Phase 2: Post-process — entity detection (label override only)
+  applyLabelOverrides(tokens);
+
+  // Phase 3: Post-process — note content detection
+  applyNoteContent(tokens);
+
+  return tokens;
+}
+
+// ============================================================
+// Post-processing: label overrides
+// ============================================================
+
+interface LineTokenRef {
+  /** Index into the flat token array. */
+  idx: number;
+  /** Grammar node name (looked up from role + NODE_TO_ROLE reverse). */
+  nodeName: string;
+}
+
+/**
+ * Override keyword/number tokens in message-label positions to `default` role.
+ *
+ * A "label" is the span between the first Dash/Tilde and the last arrow on a
+ * content line. Tokens in OVERRIDE_IN_LABEL within that zone get their role
+ * set to `default` so they render as plain text.
+ *
+ * Also handles ChartType tokens on non-first content lines — they become
+ * `default` in labels.
+ */
+function applyLabelOverrides(tokens: HighlightToken[]): void {
+  // Build reverse map: role → possible node names (for override detection)
+  const ROLE_TO_NODES: Record<string, string[]> = {};
+  for (const [node, role] of Object.entries(NODE_TO_ROLE)) {
+    (ROLE_TO_NODES[role] ??= []).push(node);
+  }
+
+  // Split tokens into lines
+  const lines: LineTokenRef[][] = [[]];
+  for (let i = 0; i < tokens.length; i++) {
+    const t = tokens[i];
+    // If the token contains newlines, it belongs to the current line
+    // but signals the start of a new line after it
+    const currentLine = lines[lines.length - 1];
+    const role = t.role;
+
+    // Determine which node name this token likely had
+    let nodeName = '';
+    for (const [node, r] of Object.entries(NODE_TO_ROLE)) {
+      if (r === role) {
+        nodeName = node;
+        break;
+      }
+    }
+    // For roles mapping to multiple nodes, refine
+    if (role === 'operator') {
+      const text = t.text;
+      if (text === '->' || text.endsWith('->')) nodeName = 'SyncArrow';
+      else if (text === '~>' || text.endsWith('~>')) nodeName = 'AsyncArrow';
+      else if (text === '-') nodeName = 'Dash';
+      else if (text === '~') nodeName = 'Tilde';
+      else if (text === '*') nodeName = 'Star';
+      else if (text === '?') nodeName = 'Question';
+    } else if (role === 'number') {
+      const text = t.text;
+      if (/^\d+[smhd]$/i.test(text)) nodeName = 'Duration';
+      else if (/^\d{4}-\d{2}-\d{2}/.test(text)) nodeName = 'DateLiteral';
+      else if (text.endsWith('%')) nodeName = 'Percentage';
+      else nodeName = 'Number';
+    } else if (role === 'bracket') {
+      const text = t.text;
+      if (text === '[') nodeName = 'OpenBracket';
+      else if (text === ']') nodeName = 'CloseBracket';
+      else if (text === '(') nodeName = 'OpenParen';
+      else if (text === ')') nodeName = 'CloseParen';
+      else if (text === '<') nodeName = 'OpenAngle';
+      else if (text === '>') nodeName = 'CloseAngle';
+    } else if (role === 'separator') {
+      if (t.text === '|') nodeName = 'Pipe';
+      else if (t.text === ':') nodeName = 'Colon';
+      else if (t.text === '+') nodeName = 'Plus';
+    } else if (role === 'punctuation') {
+      if (t.text === ',') nodeName = 'Comma';
+      else nodeName = 'Punct';
+    }
+
+    currentLine.push({ idx: i, nodeName });
+
+    // Check if token text ends with newline — start a new line
+    if (t.text.includes('\n')) {
+      lines.push([]);
+    }
+  }
+
+  // Track first content line (for ChartType handling)
+  let seenFirstContent = false;
+
+  for (const line of lines) {
+    // Skip empty lines and whitespace-only
+    const nonWs = line.filter((ref) => tokens[ref.idx].text.trim().length > 0);
+    if (nonWs.length === 0) continue;
+
+    const firstTok = nonWs[0];
+
+    // Skip keyword-led lines
+    if (KEYWORD_STARTS.has(firstTok.nodeName)) continue;
+
+    // First-line chart type — skip
+    if (firstTok.nodeName === 'ChartType' && !seenFirstContent) {
+      seenFirstContent = true;
+      continue;
+    }
+    seenFirstContent = true;
+
+    // Find structural boundaries within this line
+    let firstDashTildeIdx = -1;
+    let lastArrowIdx = -1;
+
+    for (let li = 0; li < nonWs.length; li++) {
+      const ref = nonWs[li];
+      if (
+        (ref.nodeName === 'Dash' || ref.nodeName === 'Tilde') &&
+        firstDashTildeIdx < 0
+      ) {
+        firstDashTildeIdx = li;
+      }
+      if (ref.nodeName === 'SyncArrow' || ref.nodeName === 'AsyncArrow') {
+        lastArrowIdx = li;
+      }
+    }
+
+    const hasArrow = firstDashTildeIdx >= 0 && lastArrowIdx > firstDashTildeIdx;
+
+    if (!hasArrow) continue;
+
+    // Override tokens in label zone (between first dash/tilde and last arrow)
+    for (let li = firstDashTildeIdx + 1; li < lastArrowIdx; li++) {
+      const ref = nonWs[li];
+      if (OVERRIDE_IN_LABEL.has(ref.nodeName)) {
+        tokens[ref.idx].role = 'default';
+      }
+      // ChartType in label also overridden
+      if (ref.nodeName === 'ChartType') {
+        tokens[ref.idx].role = 'default';
+      }
+    }
+  }
+}
+
+// ============================================================
+// Post-processing: note content detection
+// ============================================================
+
+const NOTE_HEAD_RE = /^note(\s|$)/i;
+
+/**
+ * Detect `note` keyword lines and mark indented followers as `noteContent`.
+ */
+function applyNoteContent(tokens: HighlightToken[]): void {
+  // Reconstruct lines from token text
+  const fullText = tokens.map((t) => t.text).join('');
+  const lines = fullText.split('\n');
+
+  let inNote = false;
+  let noteIndent = 0;
+  let charOffset = 0;
+
+  for (const lineText of lines) {
+    const lineStart = charOffset;
+    const lineEnd = charOffset + lineText.length;
+    const trimmed = lineText.trimStart();
+    const indent = lineText.length - trimmed.length;
+
+    if (NOTE_HEAD_RE.test(trimmed)) {
+      inNote = true;
+      noteIndent = indent;
+    } else if (inNote) {
+      if (trimmed.length === 0) {
+        // Blank line — stays in note block
+      } else if (indent > noteIndent) {
+        // Mark all tokens within this line range as noteContent
+        markTokensInRange(tokens, lineStart, lineEnd, 'noteContent');
+      } else {
+        inNote = false;
+      }
+    }
+
+    charOffset = lineEnd + 1; // +1 for the \n
+  }
+}
+
+/**
+ * Set the role of all tokens overlapping [from, to) to the given role.
+ */
+function markTokensInRange(
+  tokens: HighlightToken[],
+  from: number,
+  to: number,
+  role: string
+): void {
+  let pos = 0;
+  for (const token of tokens) {
+    const tokenEnd = pos + token.text.length;
+    // Token overlaps range and is not just whitespace
+    if (tokenEnd > from && pos < to && token.text.trim().length > 0) {
+      token.role = role;
+    }
+    pos = tokenEnd;
+  }
+}
+
+// ============================================================
+// NORD_ROLE_STYLES — hardcoded Nord dark palette for static contexts
+// ============================================================
+
+export const NORD_ROLE_STYLES: Record<string, Record<string, string>> = {
+  keyword: { color: '#81A1C1', fontWeight: 'bold' }, // nord9
+  controlKeyword: { color: '#B48EAD', fontWeight: 'bold' }, // nord15
+  definitionKeyword: { color: '#5E81AC', fontWeight: 'bold' }, // nord10
+  modifier: { color: '#B48EAD' }, // nord15
+  chartType: { color: '#D08770', fontWeight: 'bold' }, // nord12
+  operator: { color: '#BF616A', fontWeight: 'bold' }, // nord11
+  number: { color: '#B48EAD' }, // nord15
+  comment: { color: '#616E88', fontStyle: 'italic' },
+  heading: { color: '#D08770', fontWeight: 'bold' }, // nord12
+  bracket: { color: '#5E81AC' }, // nord10
+  separator: { color: '#88C0D0' }, // nord8
+  url: { color: '#88C0D0', textDecoration: 'underline' }, // nord8
+  colorAnnotation: { color: '#D08770', fontStyle: 'italic' }, // nord12
+  punctuation: { color: '#616E88' },
+  noteContent: { color: '#616E88', fontStyle: 'italic' },
+  default: {},
+};
+
+// ============================================================
+// ROLE_TO_ANSI — ANSI escape codes for CLI output
+// ============================================================
+
+export const ROLE_TO_ANSI: Record<string, string> = {
+  comment: '\x1b[3;90m', // italic dim
+  keyword: '\x1b[1;34m', // bold blue
+  controlKeyword: '\x1b[1;35m', // bold magenta
+  definitionKeyword: '\x1b[1;34m', // bold blue
+  modifier: '\x1b[35m', // magenta
+  chartType: '\x1b[1;33m', // bold yellow
+  operator: '\x1b[1;31m', // bold red
+  number: '\x1b[35m', // magenta
+  heading: '\x1b[1;33m', // bold yellow
+  bracket: '\x1b[34m', // blue
+  separator: '\x1b[36m', // cyan
+  url: '\x1b[4;36m', // underline cyan
+  colorAnnotation: '\x1b[3;33m', // italic yellow
+  punctuation: '\x1b[90m', // dim
+  noteContent: '\x1b[3;90m', // italic dim
+};
+
+const ANSI_RESET = '\x1b[0m';
+
+/**
+ * Render highlighted tokens to an ANSI string for terminal display.
+ */
+export function renderAnsi(
+  tokens: HighlightToken[],
+  useColor: boolean
+): string {
+  if (!useColor) {
+    return tokens.map((t) => t.text).join('');
+  }
+
+  let out = '';
+  let inStyled = false;
+
+  for (const token of tokens) {
+    const ansi = ROLE_TO_ANSI[token.role];
+    if (ansi) {
+      if (inStyled) out += ANSI_RESET;
+      out += ansi + token.text;
+      inStyled = true;
+    } else {
+      if (inStyled) {
+        out += ANSI_RESET;
+        inStyled = false;
+      }
+      out += token.text;
+    }
+  }
+
+  // Final reset to prevent terminal style leakage
+  out += ANSI_RESET;
+  return out;
+}

package/src/editor/highlight.ts

@@ -0,0 +1,36 @@
+import type { NodePropSource } from '@lezer/common';
+import { styleTags, tags as t } from '@lezer/highlight';
+
+/** Maps grammar node names to semantic highlight tags. */
+export const dgmoHighlighting: NodePropSource = styleTags({
+  Comment: t.lineComment,
+  ChartType: t.typeName,
+  TagKeyword: t.definitionKeyword,
+  DirectiveKeyword: t.keyword,
+  ControlKeyword: t.controlKeyword,
+  ModifierKeyword: t.modifier,
+  SyncArrow: t.operator,
+  AsyncArrow: t.operator,
+  Duration: t.number,
+  DateLiteral: t.number,
+  Number: t.number,
+  Percentage: t.number,
+  SectionMarker: t.heading,
+  OpenBracket: t.squareBracket,
+  CloseBracket: t.squareBracket,
+  OpenParen: t.paren,
+  CloseParen: t.paren,
+  OpenAngle: t.angleBracket,
+  CloseAngle: t.angleBracket,
+  Url: t.url,
+  ColorAnnotation: t.atom,
+  Pipe: t.separator,
+  Colon: t.separator,
+  Plus: t.separator,
+  Comma: t.punctuation,
+  Dash: t.operator,
+  Tilde: t.operator,
+  Star: t.operator,
+  Question: t.operator,
+  Punct: t.punctuation,
+});

package/src/editor/index.ts

@@ -0,0 +1,28 @@
+import { LRLanguage, LanguageSupport } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+import { parser } from './dgmo.grammar.js';
+import { dgmoHighlighting } from './highlight';
+
+export { CHART_TYPES, METADATA_KEYS } from './keywords';
+export { dgmoHighlighting } from './highlight';
+
+/** The raw Lezer parser for DGMO. */
+export const dgmoParser = parser.configure({
+  props: [dgmoHighlighting],
+});
+
+/** LRLanguage wrapper for CodeMirror. */
+export const dgmoLanguage = LRLanguage.define({
+  name: 'dgmo',
+  parser: dgmoParser,
+});
+
+/** Full language support (language + extensions). */
+export const dgmoLanguageSupport = new LanguageSupport(dgmoLanguage);
+
+/**
+ * Drop-in replacement for the old dgmoExtension.
+ * Consumers should add indentationMarkers() separately if desired
+ * (from @replit/codemirror-indentation-markers).
+ */
+export const dgmoExtension: Extension = dgmoLanguageSupport;