@diagrammo/dgmo 0.15.0 → 0.16.0

package/src/journey-map/parser.ts

@@ -1,4 +1,5 @@
 import type { PaletteColors } from '../palettes';
+import { resolveColorWithDiagnostic } from '../colors';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import {
   matchTagBlockHeading,
@@ -138,8 +139,14 @@ export function parseJourneyMap(
               const key = part.substring(0, colonIdx).trim().toLowerCase();
               const value = part.substring(colonIdx + 1).trim();
               if (key === 'color') {
-                const resolved = extractColor(`x(${value})`, palette);
-                personaColor = resolved.color;
+                // Resolve the color name directly (no synthetic parens wrap).
+                personaColor =
+                  resolveColorWithDiagnostic(
+                    value,
+                    lineNumber,
+                    result.diagnostics,
+                    palette
+                  ) ?? undefined;
               }
             }
           }
@@ -209,7 +216,7 @@ export function parseJourneyMap(
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }

package/src/journey-map/renderer.ts

@@ -36,6 +36,7 @@ export interface JourneyMapInteractiveOptions {
   collapsedPhases?: Set<string>;
   /** Called when a phase is toggled */
   onPhaseToggle?: (phaseName: string) => void;
+  exportMode?: boolean;
 }
 
 // ============================================================
@@ -313,7 +314,7 @@ export function renderJourneyMap(
         titleRelation: 'inline-with-title',
       },
       titleWidth: 0,
-      mode: exportDims ? 'inline' : 'fixed',
+      mode: options?.exportMode ? 'export' : 'preview',
     };
 
     const legendState: LegendState = { activeGroup: effectiveActiveGroup };
@@ -1559,6 +1560,7 @@ export function renderJourneyMapForExport(
   const container = document.createElement('div');
   renderJourneyMap(container, parsed, palette, isDark, {
     exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true,
   });
 
   const svgEl = container.querySelector('svg');

package/src/kanban/parser.ts

@@ -26,10 +26,11 @@ import type {
 // Regex patterns
 // ============================================================
 
-// [Column Name], [Column Name](color), [Column Name] as <alias>, [Column Name] | wip: 3, etc.
+// [Column Name], [Column Name] color, [Column Name] as <alias>, [Column Name] | wip: 3, etc.
+// Universal §1.5 trailing-token: color is a bare token after `]`.
 // Captures: [1]=label [2]=color [3]=alias (TD-18) [4]=pipe meta
 const COLUMN_RE =
-  /^\[(.+?)\](?:\s*\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*(?:\|\s*(.+))?$/;
+  /^\[(.+?)\](?:\s+(\S+))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*(?:\|\s*(.+))?$/;
 // Legacy delimiter
 const LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
 
@@ -180,7 +181,7 @@ export function parseKanban(
       }
     }
 
-    // Tag group entries (indented Value(color) under tag heading)
+    // Tag group entries (indented Value color under tag heading)
     // First entry is the default unless another is marked `default`
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -190,7 +191,7 @@ export function parseKanban(
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -247,9 +248,12 @@ export function parseKanban(
 
       columnCounter++;
       const colName = columnMatch[1].trim();
-      const colColor = columnMatch[2]
+      // Trailing token after `]` must be a recognized color word (§1.5).
+      // If it isn't, the line is malformed — emit the standard diagnostic.
+      const rawTrailing = columnMatch[2]?.trim();
+      const colColor = rawTrailing
         ? resolveColorWithDiagnostic(
-            columnMatch[2].trim(),
+            rawTrailing,
             lineNumber,
             result.diagnostics,
             palette
@@ -270,8 +274,8 @@ export function parseKanban(
           parsePipeMetadata(pipeSegments, metaAliasMap)
         );
         // Extract wip from metadata
-        if (columnMetadata.wip) {
-          const wipVal = parseInt(columnMetadata.wip, 10);
+        if (columnMetadata['wip']) {
+          const wipVal = parseInt(columnMetadata['wip'], 10);
           if (!isNaN(wipVal)) {
             wipLimit = wipVal;
           }

package/src/kanban/renderer.ts

@@ -37,6 +37,7 @@ interface KanbanInteractiveOptions {
   collapsedLanes?: Set<string>;
   collapsedColumns?: Set<string>;
   compactMeta?: boolean;
+  exportMode?: boolean;
 }
 
 // ============================================================
@@ -330,7 +331,7 @@ export function renderKanban(
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'inline-with-title' },
-      mode: exportDims ? 'inline' : 'fixed',
+      mode: options?.exportMode ? 'export' : 'preview',
     };
     const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
     const legendG = svg
@@ -682,6 +683,7 @@ export function renderKanbanForExport(
   const container = document.createElement('div');
   renderKanban(container, parsed, palette, isDark, {
     exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true,
   });
 
   const svgEl = container.querySelector('svg');

package/src/mindmap/layout.ts

@@ -64,7 +64,7 @@ interface PositionedNode {
 
 export function layoutMindmap(
   parsed: ParsedMindmap,
-  palette: PaletteColors,
+  _palette: PaletteColors,
   options?: {
     interactive?: boolean;
     hiddenCounts?: Map<string, number>;

package/src/mindmap/parser.ts

@@ -179,7 +179,7 @@ export function parseMindmap(
       }
     }
 
-    // Tag group entries (indented Value(color) under tag heading)
+    // Tag group entries (indented Value color under tag heading)
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
       if (indent > 0) {
@@ -188,7 +188,7 @@ export function parseMindmap(
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -297,7 +297,7 @@ export function parseMindmap(
 function parseNodeLine(
   trimmed: string,
   lineNumber: number,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   counter: number,
   aliasMap: Map<string, string>,
   warnFn: (line: number, msg: string) => void

package/src/mindmap/renderer.ts

@@ -95,6 +95,7 @@ export function renderMindmap(
     onToggleDescriptions?: (active: boolean) => void;
     controlsExpanded?: boolean;
     onToggleControlsExpand?: () => void;
+    exportMode?: boolean;
   }
 ): void {
   const isExport = !!exportDims;
@@ -234,7 +235,7 @@ export function renderMindmap(
         };
       }),
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: options?.exportMode ? 'export' : 'preview',
       controlsGroup: controlsToggles,
     };
     const legendState: LegendState = {

package/src/org/parser.ts

@@ -235,7 +235,7 @@ export function parseOrg(content: string, palette?: PaletteColors): ParsedOrg {
       }
     }
 
-    // Tag group entries (indented Value(color) under tag heading)
+    // Tag group entries (indented Value color under tag heading)
     // First entry is the default unless another is marked `default`
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -245,7 +245,7 @@ export function parseOrg(content: string, palette?: PaletteColors): ParsedOrg {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -389,7 +389,7 @@ function parseNodeLabel(
   trimmed: string,
   _indent: number,
   lineNumber: number,
-  palette: PaletteColors | undefined,
+  _palette: PaletteColors | undefined,
   counter: number,
   metaAliasMap: Map<string, string> = new Map(),
   warnFn?: (line: number, msg: string) => void,

package/src/org/renderer.ts

@@ -110,7 +110,8 @@ export function renderOrg(
   exportDims?: { width?: number; height?: number },
   activeTagGroup?: string | null,
   hiddenAttributes?: Set<string>,
-  ancestorPath?: AncestorInfo[]
+  ancestorPath?: AncestorInfo[],
+  exportMode?: boolean
 ): void {
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -235,7 +236,7 @@ export function renderOrg(
   const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
 
   // Render container backgrounds (bottom layer)
-  const colorOff = parsed.options?.color === 'off';
+  const colorOff = parsed.options?.['color'] === 'off';
   for (const c of layout.containers) {
     const cG = contentG
       .append('g')
@@ -759,7 +760,7 @@ export function renderOrg(
             },
           ],
           position: { placement: 'top-center', titleRelation: 'below-title' },
-          mode: 'fixed',
+          mode: exportMode ? 'export' : 'preview',
         };
         const singleState: LegendState = { activeGroup: lg.name };
         const groupG = legendParentBase
@@ -783,7 +784,7 @@ export function renderOrg(
       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/pert/layout.ts

@@ -488,7 +488,7 @@ export function relayoutPert(
 function applySwimLanes(
   g: any,
   resolved: ResolvedPert,
-  memberToGroup: Map<string, string>,
+  _memberToGroup: Map<string, string>,
   collapsedGroupIds: ReadonlySet<string>
 ): boolean {
   const expanded = resolved.groups.filter(

package/src/pert/monte-carlo.ts

@@ -134,8 +134,8 @@ interface SimulationOptions {
 function simulate(
   resolved: ResolvedPert,
   expanded: ExpandedActivity[],
-  predecessors: Map<string, string[]>,
-  successors: Map<string, string[]>,
+  _predecessors: Map<string, string[]>,
+  _successors: Map<string, string[]>,
   topo: string[],
   terminals: string[],
   poisoned: Set<string>,

package/src/pert/parser.ts

@@ -42,7 +42,7 @@ import type {
   DeclarationSite,
   ReferenceSite,
 } from './internal';
-import type { DiagramSymbols } from '../completion';
+import type { DiagramSymbols } from '../completion-types';
 
 // ============================================================
 // Regexes / constants
@@ -448,7 +448,7 @@ export interface ParsePertOptions {
   now?: Date;
   /**
    * Active palette — used when resolving color names on `tag` entries
-   * (e.g. `High(red)` → palette.colors.red). Optional; when omitted the
+   * (e.g. `High red` → palette.colors.red). Optional; when omitted the
    * universal default color map is used.
    */
   palette?: PaletteColors;
@@ -503,7 +503,7 @@ export function parsePert(
 
   /**
    * Tag groups declared at the top of the diagram. A `tag …` heading
-   * opens a block; entries (indented `Value(color)` lines) accumulate
+   * opens a block; entries (indented `Value color` lines) accumulate
    * until the first non-tag content line closes it.
    */
   const tagGroups: TagGroup[] = [];
@@ -576,7 +576,7 @@ export function parsePert(
       // layer is responsible for routing.
     }
 
-    // ── Tag-block phase. `tag Priority as p\n  High(red)\n  Low(green)`
+    // ── Tag-block phase. `tag Priority as p\n  High red\n  Low green`
     // lives BEFORE diagram content; once any group / activity / arrow
     // is seen, `contentStarted` flips and further `tag …` headings
     // emit an error.
@@ -599,7 +599,7 @@ export function parsePert(
           );
         }
         tagGroups.push(currentTagGroup);
-        // Inline values (e.g. `tag Priority as p Low(green), High(red)`).
+        // Inline values (e.g. `tag Priority as p Low green, High red`).
         if (tagBlockMatch.inlineValues) {
           for (const raw of tagBlockMatch.inlineValues) {
             const { text, isDefault } = stripDefaultModifier(raw);
@@ -612,7 +612,7 @@ export function parsePert(
             if (!color) {
               warn(
                 lineNumber,
-                `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+                `Expected 'Value color' in tag group '${currentTagGroup.name}'`
               );
               continue;
             }
@@ -624,7 +624,7 @@ export function parsePert(
         }
         continue;
       }
-      // Indented `Value(color)` entry under an open tag block.
+      // Indented `Value color` entry under an open tag block.
       if (currentTagGroup && indent > 0) {
         const { text, isDefault } = stripDefaultModifier(trimmed);
         const { label, color } = extractColor(
@@ -636,7 +636,7 @@ export function parsePert(
         if (!color) {
           warn(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }
@@ -675,7 +675,7 @@ export function parsePert(
         id,
         name,
         activityIds: [],
-        collapsed: meta.collapsed === 'true',
+        collapsed: meta['collapsed'] === 'true',
         lineNumber,
         ...(Object.keys(tags).length > 0 && { tags }),
       });
@@ -1027,7 +1027,7 @@ export function parsePert(
       name: decl.name,
       ...(decl.alias !== undefined && { alias: decl.alias }),
       duration: estimate,
-      ...(meta.confidence && { confidence: meta.confidence }),
+      ...(meta['confidence'] && { confidence: meta['confidence'] }),
       ...(decl.groupHint !== undefined && { groupId: decl.groupHint }),
       lineNumber: decl.lineNumber,
       isMilestone,

package/src/pert/renderer.ts

@@ -388,6 +388,8 @@ export interface PertRenderOptions {
    * through to the parsed `active-tag` directive.
    */
   activeTagOverride?: string | null;
+  /** True when rendering for export — strips collapsed pills and cog from legend. */
+  exportMode?: boolean;
 }
 
 export function renderPert(
@@ -568,6 +570,7 @@ export function renderPert(
       y: tagLegendY,
       width: exportWidth,
       activeGroup: tagLegendActive,
+      exportMode: options.exportMode,
     });
   }
 
@@ -681,6 +684,7 @@ export function renderPertForExport(
       title: hasTitle ? parsed.title : null,
       subtitle: resolved.projectSubtitle,
       exportDims: { width: exportWidth, height: exportHeight },
+      exportMode: true,
     });
     const svgEl = container.querySelector('svg');
     if (!svgEl) return '';
@@ -2990,6 +2994,7 @@ interface TagLegendArgs {
   y: number;
   width: number;
   activeGroup: string | null;
+  exportMode?: boolean;
 }
 
 /**
@@ -3008,7 +3013,7 @@ function renderTagLegendRow(
 ): void {
   if (resolved.tagGroups.length === 0) return;
 
-  const { x, y, width, activeGroup } = args;
+  const { x, y, width, activeGroup, exportMode } = args;
   const groups = resolved.tagGroups.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
@@ -3024,7 +3029,7 @@ function renderTagLegendRow(
     {
       groups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
     },
     { activeGroup },
     palette,

package/src/pert/types.ts

@@ -215,7 +215,7 @@ export interface ParsedPert {
   groups: PertGroup[];
   /**
    * Tag groups declared at the top of the diagram (`tag Priority as p
-   * High(red), Low(green)`). Drive node fill via `resolveTagColor()`.
+   * High red, Low green`). Drive node fill via `resolveTagColor()`.
    * Empty when no `tag` blocks are declared.
    */
   tagGroups: TagGroup[];

package/src/pyramid/parser.ts

@@ -7,6 +7,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   tryParseSharedOption,
 } from '../utils/parsing';
 import type { ParsedPyramid, PyramidLayer } from './types';
@@ -146,6 +147,17 @@ export function parsePyramid(content: string): ParsedPyramid {
         continue;
       }
 
+      // Universal trailing-token shortcut: `Label color` is equivalent to
+      // `Label | color: <name>` when color is the only metadata key (§1.5).
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } =
+          peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
+
       currentLayer = {
         label,
         lineNumber: lineNum,

package/src/raci/parser.ts

@@ -24,6 +24,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   OPTION_NOCOLON_RE,
   tryParseSharedOption,
 } from '../utils/parsing';
@@ -82,10 +83,10 @@ const KNOWN_BOOLEANS = new Set<string>([
   ...Object.keys(VARIANT_LOCK_DIRECTIVES),
 ]);
 
-// Allow optional trailing `| key: value, ...` after the bracket,
-// e.g. `[Voyage] | color: blue` — matches the modern dgmo idiom
-// (cycle / pyramid / ring / journey-map / boxes-and-lines).
-const PHASE_RE = /^\[(.+?)\]\s*(?:\|\s*(.+))?\s*$/;
+// Allow optional trailing color shortcut and/or pipe metadata after the
+// bracket: `[Voyage] blue | desc: …` (per §1.5 universal trailing-token
+// rule + the modern cycle/pyramid/ring/journey-map/b&l idiom).
+const PHASE_RE = /^\[(.+?)\](?:\s+(\S+))?(?:\s*\|\s*(.+))?\s*$/;
 const ROLE_ASSIGNMENT_RE = /^([^:]+):\s*(.*)$/;
 
 /**
@@ -382,22 +383,36 @@ export function parseRaci(
           // Strip a possible trailing comma (user habit tolerance,
           // matches `collectIndentedValues`).
           const stripped = nextTrim.replace(/,\s*$/, '');
-          // Optional pipe metadata: `Cap | color: blue` — matches
-          // every modern chart-type's per-element styling form.
+          // Optional pipe metadata: `Cap | color: blue` — long form.
+          // Optional trailing-token shortcut: `Cap blue` — short form (§1.5).
           const segments = stripped.split('|').map((s) => s.trim());
-          const roleLabel = segments[0] ?? '';
+          let roleLabel = segments[0] ?? '';
           let roleColor: string | undefined;
           if (segments.length > 1) {
             const meta = parsePipeMetadata(segments);
-            if (meta.color) {
+            if (meta['color']) {
               roleColor = resolveColorWithDiagnostic(
-                meta.color,
+                meta['color'],
                 j + 1,
                 result.diagnostics,
                 palette
               );
             }
           }
+          // Apply shortcut only when pipe metadata didn't already set color.
+          if (!roleColor) {
+            const { label: stripLabel, colorName: shortcutColor } =
+              peelTrailingColorName(roleLabel);
+            if (shortcutColor) {
+              roleColor = resolveColorWithDiagnostic(
+                shortcutColor,
+                j + 1,
+                result.diagnostics,
+                palette
+              );
+              roleLabel = stripLabel;
+            }
+          }
           if (roleLabel) getOrAddRole(roleLabel, j + 1, roleColor);
         }
         i = j - 1; // outer loop's i++ lands on the first non-block line
@@ -469,13 +484,28 @@ export function parseRaci(
           errorAt(lineNumber, 'Phase label is empty.');
           continue;
         }
-        // Optional pipe metadata: `[Voyage] | color: blue`.
+        // PHASE_RE captures: 1=label, 2=optional trailing-token color, 3=pipe meta.
+        // Long pipe form (`[Voyage] | color: blue`) wins over the shortcut.
         let phaseColor: string | undefined;
-        if (phaseMatch[2]) {
-          const meta = parsePipeMetadata(['', phaseMatch[2]]);
-          if (meta.color) {
+        const trailingToken = phaseMatch[2];
+        const pipeMeta = phaseMatch[3];
+        if (pipeMeta) {
+          const meta = parsePipeMetadata(['', pipeMeta]);
+          if (meta['color']) {
+            phaseColor = resolveColorWithDiagnostic(
+              meta['color'],
+              lineNumber,
+              result.diagnostics,
+              palette
+            );
+          }
+        }
+        if (!phaseColor && trailingToken) {
+          // Trailing token must be a recognized color word, or it's a parse error.
+          const { colorName } = peelTrailingColorName(`x ${trailingToken}`);
+          if (colorName) {
             phaseColor = resolveColorWithDiagnostic(
-              meta.color,
+              colorName,
               lineNumber,
               result.diagnostics,
               palette

package/src/raci/renderer.ts

@@ -602,7 +602,8 @@ export function renderRaci(
   parsed.roles.forEach((roleId, i) => {
     const cx = roleX(i) + COLUMN_INSET;
     const cw = roleColW - 2 * COLUMN_INSET;
-    // Per-role color from `Cap(blue)` syntax. When the user provides
+    // Per-role color from `Cap blue` trailing-token (or `Cap | color: blue`)
+    // syntax. When the user provides
     // one, it wins; otherwise rotate through marker-safe accents so
     // each column has a subtle visual identity instead of every column
     // reading as the same neutral gray.
@@ -1150,7 +1151,7 @@ function renderTaskRow(
   surfaceBg: string,
   solid: boolean,
   taskDiagnostics: Map<string, TaskDiagnosticBucket> | null,
-  hasAnyDiagnostic: boolean,
+  _hasAnyDiagnostic: boolean,
   rowContent: RowContent | undefined,
   onClickLine?: (lineNumber: number) => void,
   _onMarkerDragStart?: (source: RaciDragSource, e: PointerEvent) => void

package/src/raci/types.ts

@@ -67,9 +67,10 @@ export interface ParsedRaci {
   /** Display name for each role (parallel to `roles`). */
   roleDisplayNames: string[];
   /**
-   * Optional per-role palette color from `Cap(blue)` suffix in the
-   * roles block. Parallel to `roles`; entries default to `undefined`
-   * (renderer falls back to the neutral column tint).
+   * Optional per-role palette color from the `Cap blue` trailing-token
+   * suffix in the roles block (or the long pipe form `Cap | color: blue`).
+   * Parallel to `roles`; entries default to `undefined` (renderer falls
+   * back to the neutral column tint).
    */
   roleColors: Array<string | undefined>;
   phases: RaciPhase[];

package/src/ring/parser.ts

@@ -8,6 +8,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   tryParseSharedOption,
   PIPE_KEY_VALUE_PREFIX_RE,
   PIPE_LIKELY_STRUCTURED_TAIL_RE,
@@ -175,6 +176,17 @@ export function parseRing(content: string): ParsedRing {
         continue;
       }
 
+      // Universal trailing-token shortcut: `Label color` equivalent to
+      // `Label | color: <name>` when color is not already set (§1.5).
+      if (!color) {
+        const { label: stripped, colorName: shortcutColor } =
+          peelTrailingColorName(label);
+        if (shortcutColor) {
+          color = shortcutColor;
+          label = stripped;
+        }
+      }
+
       currentLayer = {
         label,
         lineNumber: lineNum,