@diagrammo/dgmo 0.15.0 → 0.16.0

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) {
@@ -663,7 +597,7 @@ export function looksLikeFlowchart(content: string): boolean {
 // Symbol extraction (for completion API)
 // ============================================================
 
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 // Node ID: identifier at line start followed by a shape delimiter or space (arrow line)
 const NODE_ID_RE = /^([a-zA-Z_][\w-]*)[\s([</{]/;

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) {
@@ -623,7 +618,7 @@ export function renderFlowchart(
   }
 
   // Render nodes (top layer)
-  const colorOff = graph.options?.color === 'off';
+  const colorOff = graph.options?.['color'] === 'off';
   const solid = graph.options?.['solid-fill'] === 'on';
   for (const node of layout.nodes) {
     const nodeG = contentG

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
@@ -431,7 +426,7 @@ export function renderState(
   }
 
   // Render nodes (top layer)
-  const colorOff = graph.options?.color === 'off';
+  const colorOff = graph.options?.['color'] === 'off';
   const solid = graph.options?.['solid-fill'] === 'on';
   for (const node of layout.nodes) {
     const isCollapsedGroup = collapsedGroupIds.has(node.id);

package/src/index.ts

@@ -13,6 +13,7 @@ import { render as renderInternal } from './render';
 import {
   encodeDiagramUrl as encodeDiagramUrlInternal,
   decodeDiagramUrl as decodeDiagramUrlInternal,
+  type CompactViewState,
 } from './sharing';
 import { parseDgmo as validate } from './dgmo-router';
 import { palettes, getPalette } from './palettes';
@@ -20,6 +21,8 @@ import type { PaletteConfig } from './palettes/types';
 import type { Theme } from './themes';
 import { formatDgmoError, type DgmoError } from './diagnostics';
 
+export type { CompactViewState } from './sharing';
+
 // ============================================================
 // render(text, options?)
 // ============================================================
@@ -34,6 +37,12 @@ export interface RenderOptions {
    *   'throw'  — throw an Error with the diagnostics
    */
   onError?: 'svg' | 'silent' | 'throw';
+  /**
+   * Pre-applied interactive view state — collapsed sections/columns,
+   * active swimlane tag-group, etc. Used to render a specific view
+   * non-interactively (server-side render, share-link decode).
+   */
+  viewState?: CompactViewState;
 }
 
 export interface RenderResult {
@@ -65,6 +74,7 @@ export async function render(
   const result = await renderInternal(text, {
     theme: options?.theme,
     palette: palette.id,
+    viewState: options?.viewState,
   });
 
   const errors = result.diagnostics.filter((d) => d.severity === 'error');
@@ -139,6 +149,11 @@ export interface EncodeDiagramUrlOptions {
   palette?: PaletteConfig;
   theme?: Theme;
   filename?: string;
+  /**
+   * Initial view state to embed in the URL — re-applied when the link is
+   * decoded so recipients open the diagram in the same configuration.
+   */
+  viewState?: CompactViewState;
 }
 
 /**
@@ -158,6 +173,7 @@ export function encodeDiagramUrl(
     palette: options?.palette?.id,
     theme: internalTheme,
     filename: options?.filename,
+    viewState: options?.viewState,
   });
   return 'error' in result && result.error ? null : (result.url ?? null);
 }
@@ -188,7 +204,7 @@ export function decodeDiagramUrl(url: string): DecodedDiagramUrl | null {
 // Palettes + themes (namespaces)
 // ============================================================
 
-export { palettes } from './palettes';
+export { palettes, getPalette } from './palettes';
 export { themes, type Theme } from './themes';
 
 // ============================================================

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-
@@ -351,11 +353,11 @@ export function parseInfra(content: string): ParsedInfra {
 
       // animate (default ON) / no-animate
       if (trimmed === 'animate') {
-        result.options.animate = 'on';
+        result.options['animate'] = 'on';
         continue;
       }
       if (trimmed === 'no-animate') {
-        result.options.animate = 'off';
+        result.options['animate'] = 'off';
         continue;
       }
 
@@ -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,
@@ -550,11 +560,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -588,11 +598,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -631,11 +641,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -669,11 +679,11 @@ export function parseInfra(content: string): ParsedInfra {
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
         warnUnparsedPipeMeta(targetName, lineNumber, warn);
-        const split = pipeMeta.tags.split
-          ? parseFloat(pipeMeta.tags.split)
+        const split = pipeMeta.tags['split']
+          ? parseFloat(pipeMeta.tags['split'])
           : null;
-        const fanoutRaw = pipeMeta.tags.fanout
-          ? parseInt(pipeMeta.tags.fanout, 10)
+        const fanoutRaw = pipeMeta.tags['fanout']
+          ? parseInt(pipeMeta.tags['fanout'], 10)
           : null;
         if (fanoutRaw !== null && fanoutRaw < 1) {
           warn(
@@ -892,7 +902,7 @@ export function parseInfra(content: string): ParsedInfra {
 // Symbol extraction (for completion API)
 // ============================================================
 
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 /**
  * Extract component names (entities) from infra document text.