@diagrammo/dgmo 0.8.11 → 0.8.12

package/gallery/fixtures/er.dgmo

@@ -0,0 +1,36 @@
+er Pirate Fleet
+
+ships
+  id int pk
+  name varchar
+  ship_type varchar
+  cannons int
+  1-aboard-* crew_members
+  1-1 captains
+  1-carries-* treasure
+
+captains
+  id int pk
+  name varchar
+  ship_id int fk
+  bounty int
+  ?-frequents-1 ports
+  *-has-1 crew_members
+
+crew_members
+  id int pk
+  name varchar
+  ship_id int fk
+  role varchar nullable
+
+treasure
+  id int pk
+  name varchar
+  value int
+  ship_id int fk, nullable
+
+ports
+  id int pk
+  name varchar
+  region varchar unique
+  1-docks-* ships

package/gallery/fixtures/kanban.dgmo

@@ -0,0 +1,27 @@
+kanban Plunder Sprint 7
+
+tag Priority
+  Low(green)
+  Urgent(red)
+  High(orange)
+
+tag Crew c
+  Blackbeard(red)
+  Anne Bonny(purple)
+  Calico Jack(teal)
+
+[Awaiting Orders](red)
+  Recruit gunners at Tortuga | priority: High, c: Calico Jack
+  Chart new trade route | priority: Urgent, c: Anne Bonny
+    Scout the Windward Passage
+    Avoid Royal Navy patrols
+  Resupply rum and powder | priority: Low, c: Calico Jack
+
+[Underway](orange) | wip: 2
+  Forge letters of marque | priority: High, c: Anne Bonny
+  Raid merchant convoy | priority: Urgent, c: Blackbeard
+    Three ships spotted off Nassau
+
+[Done](green)
+  Bribe the harbour master | priority: High, c: Anne Bonny
+  Repair hull damage | priority: Low, c: Blackbeard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/boxes-and-lines/parser.ts

@@ -9,6 +9,7 @@ import {
   matchTagBlockHeading,
   injectDefaultTagMetadata,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
@@ -531,6 +532,7 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
   if (result.tagGroups.length > 0) {
     injectDefaultTagMetadata(result.nodes, result.tagGroups);
     validateTagValues(result.nodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
 
   return result;

package/src/boxes-and-lines/renderer.ts

@@ -14,7 +14,7 @@ import {
   TITLE_Y,
 } from '../utils/title-constants';
 import { contrastText, mix } from '../palettes/color-utils';
-import { resolveTagColor } from '../utils/tag-groups';
+import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import type { PaletteColors } from '../palettes';
 import type { ParsedBoxesAndLines, BLNode } from './types';
@@ -315,8 +315,12 @@ export function renderBoxesAndLines(
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
 
-  // Determine active tag group
-  const activeGroup = activeTagGroup ?? parsed.options['active-tag'] ?? null;
+  // Determine active tag group — shared utility handles priority chain
+  const activeGroup = resolveActiveTagGroup(
+    parsed.tagGroups,
+    parsed.options['active-tag'],
+    activeTagGroup
+  );
 
   // Build hidden set
   const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
@@ -736,9 +740,13 @@ export function renderBoxesAndLinesForExport(
   layout: BLLayoutResult,
   palette: PaletteColors,
   isDark: boolean,
-  options?: { exportDims?: { width: number; height: number } }
+  options?: {
+    exportDims?: { width: number; height: number };
+    activeTagGroup?: string | null;
+  }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
+    activeTagGroup: options?.activeTagGroup,
   });
 }

package/src/c4/parser.ts

@@ -8,6 +8,7 @@ import type { TagGroup } from '../utils/tag-groups';
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import { inferParticipantType } from '../sequence/participant-inference';
 import {
@@ -84,7 +85,7 @@ const VALID_SHAPES = new Set<string>([
 ]);
 
 /** Known top-level option keys for C4 diagrams. */
-const KNOWN_C4_OPTIONS = new Set<string>(['layout']);
+const KNOWN_C4_OPTIONS = new Set<string>(['layout', 'active-tag']);
 
 /** Known C4 boolean options (bare keyword = on). */
 const KNOWN_C4_BOOLEANS = new Set<string>(['direction-tb']);
@@ -829,6 +830,9 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
   // ── Post-parse validation ───────────────────────────────
   validateRelationshipTargets(result, knownNames, pushError);
   validateDeploymentRefs(result, knownNames, pushError);
+  validateTagGroupNames(result.tagGroups, (line, msg) =>
+    pushError(line, msg, 'warning')
+  );
 
   return result;
 }

package/src/completion.ts

@@ -258,21 +258,33 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       },
     }),
   ],
-  ['er', withGlobals()],
+  [
+    'er',
+    withGlobals({
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
   [
     'org',
     withGlobals({
       'sub-node-label': { description: 'Label for sub-nodes' },
       'show-sub-node-count': { description: 'Show sub-node counts' },
+      'active-tag': { description: 'Active tag group name' },
     }),
   ],
   [
     'kanban',
     withGlobals({
       'no-auto-color': { description: 'Disable automatic card coloring' },
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
+  [
+    'c4',
+    withGlobals({
+      'active-tag': { description: 'Active tag group name' },
     }),
   ],
-  ['c4', withGlobals()],
   [
     'state',
     withGlobals({
@@ -284,6 +296,7 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
     'sitemap',
     withGlobals({
       'direction-tb': { description: 'Switch to top-to-bottom layout' },
+      'active-tag': { description: 'Active tag group name' },
     }),
   ],
   [
@@ -298,6 +311,7 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       'slo-availability': { description: 'SLO availability target (0-1)' },
       'slo-p90-latency-ms': { description: 'SLO p90 latency target in ms' },
       'slo-warning-margin': { description: 'SLO warning margin percentage' },
+      'active-tag': { description: 'Active tag group name' },
     }),
   ],
   [
@@ -310,6 +324,7 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       sort: { description: 'Sort order', values: ['time', 'group', 'tag'] },
       'critical-path': { description: 'Show critical path' },
       dependencies: { description: 'Show dependencies' },
+      'active-tag': { description: 'Active tag group name' },
     }),
   ],
   [

package/src/d3.ts

@@ -193,7 +193,9 @@ import {
 import {
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   resolveTagColor,
+  resolveActiveTagGroup,
   stripDefaultModifier,
 } from './utils/tag-groups';
 import type { TagGroup } from './utils/tag-groups';
@@ -1477,6 +1479,9 @@ export function parseVisualization(
           result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
         suggest
       );
+      validateTagGroupNames(result.timelineTagGroups, (line, msg) =>
+        result.diagnostics.push(makeDgmoError(line, msg, 'warning'))
+      );
       for (const group of result.timelineTagGroups) {
         if (!group.defaultValue) continue;
         const key = group.name.toLowerCase();
@@ -3405,6 +3410,78 @@ function buildEraTooltipHtml(era: TimelineEra): string {
 // Timeline Renderer
 // ============================================================
 
+/**
+ * Renders timeline group legend as pills (colored dot + text in rounded rect),
+ * matching the centralized legend pill style.
+ */
+function renderTimelineGroupLegend(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  groups: TimelineGroup[],
+  groupColorMap: Map<string, string>,
+  textColor: string,
+  palette: PaletteColors,
+  isDark: boolean,
+  legendY: number,
+  onHover: (name: string) => void,
+  onLeave: () => void
+): void {
+  const PILL_H = 22;
+  const DOT_R = 4;
+  const DOT_GAP = 4;
+  const PAD_X = 10;
+  const FONT_SIZE = 11;
+  const GAP = 8;
+  const pillBg = isDark
+    ? mix(palette.surface, palette.bg, 50)
+    : mix(palette.surface, palette.bg, 30);
+
+  let legendX = 0;
+  for (const grp of groups) {
+    const color = groupColorMap.get(grp.name) ?? textColor;
+    const textW = measureLegendText(grp.name, FONT_SIZE);
+    const pillW = PAD_X + DOT_R * 2 + DOT_GAP + textW + PAD_X;
+
+    const itemG = g
+      .append('g')
+      .attr('class', 'tl-legend-item')
+      .attr('data-group', grp.name)
+      .style('cursor', 'pointer')
+      .on('mouseenter', () => onHover(grp.name))
+      .on('mouseleave', () => onLeave());
+
+    // Pill background
+    itemG
+      .append('rect')
+      .attr('x', legendX)
+      .attr('y', legendY - PILL_H / 2)
+      .attr('width', pillW)
+      .attr('height', PILL_H)
+      .attr('rx', PILL_H / 2)
+      .attr('fill', pillBg);
+
+    // Colored dot
+    itemG
+      .append('circle')
+      .attr('cx', legendX + PAD_X + DOT_R)
+      .attr('cy', legendY)
+      .attr('r', DOT_R)
+      .attr('fill', color);
+
+    // Label text
+    itemG
+      .append('text')
+      .attr('x', legendX + PAD_X + DOT_R * 2 + DOT_GAP)
+      .attr('y', legendY)
+      .attr('dy', '0.35em')
+      .attr('fill', textColor)
+      .attr('font-size', `${FONT_SIZE}px`)
+      .attr('font-family', FONT_FAMILY)
+      .text(grp.name);
+
+    legendX += pillW + GAP;
+  }
+}
+
 /**
  * Renders a timeline chart into the given container using D3.
  * Supports horizontal (default) and vertical orientation.
@@ -4038,38 +4115,19 @@ export function renderTimeline(
         );
       }
 
-      // Group legend
+      // Group legend (pill style)
       if (timelineGroups.length > 0) {
-        let legendX = 0;
-        const legendY = -55;
-        for (const grp of timelineGroups) {
-          const color = groupColorMap.get(grp.name) ?? textColor;
-          const itemG = g
-            .append('g')
-            .attr('class', 'tl-legend-item')
-            .attr('data-group', grp.name)
-            .style('cursor', 'pointer')
-            .on('mouseenter', () => fadeToGroup(g, grp.name))
-            .on('mouseleave', () => fadeReset(g));
-
-          itemG
-            .append('circle')
-            .attr('cx', legendX)
-            .attr('cy', legendY)
-            .attr('r', 5)
-            .attr('fill', color);
-
-          itemG
-            .append('text')
-            .attr('x', legendX + 10)
-            .attr('y', legendY)
-            .attr('dy', '0.35em')
-            .attr('fill', textColor)
-            .attr('font-size', '11px')
-            .text(grp.name);
-
-          legendX += grp.name.length * 7 + 30;
-        }
+        renderTimelineGroupLegend(
+          g,
+          timelineGroups,
+          groupColorMap,
+          textColor,
+          palette,
+          isDark,
+          -55,
+          (name) => fadeToGroup(g, name),
+          () => fadeReset(g)
+        );
       }
 
       g.append('line')
@@ -4656,38 +4714,20 @@ export function renderTimeline(
       );
     }
 
-    // Group legend at top-left
+    // Group legend at top-left (pill style)
     if (timelineGroups.length > 0) {
-      let legendX = 0;
       const legendY = timelineScale ? -75 : -55;
-      for (const grp of timelineGroups) {
-        const color = groupColorMap.get(grp.name) ?? textColor;
-        const itemG = g
-          .append('g')
-          .attr('class', 'tl-legend-item')
-          .attr('data-group', grp.name)
-          .style('cursor', 'pointer')
-          .on('mouseenter', () => fadeToGroup(g, grp.name))
-          .on('mouseleave', () => fadeReset(g));
-
-        itemG
-          .append('circle')
-          .attr('cx', legendX)
-          .attr('cy', legendY)
-          .attr('r', 5)
-          .attr('fill', color);
-
-        itemG
-          .append('text')
-          .attr('x', legendX + 10)
-          .attr('y', legendY)
-          .attr('dy', '0.35em')
-          .attr('fill', textColor)
-          .attr('font-size', '11px')
-          .text(grp.name);
-
-        legendX += grp.name.length * 7 + 30;
-      }
+      renderTimelineGroupLegend(
+        g,
+        timelineGroups,
+        groupColorMap,
+        textColor,
+        palette,
+        isDark,
+        legendY,
+        (name) => fadeToGroup(g, name),
+        () => fadeReset(g)
+      );
     }
 
     sorted.forEach((ev, i) => {
@@ -6658,8 +6698,11 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup =
-      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      orgParsed.tagGroups,
+      orgParsed.options['active-tag'],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6709,8 +6752,11 @@ export async function renderForExport(
 
     // Apply interactive collapse state when provided
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup =
-      orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      sitemapParsed.tagGroups,
+      sitemapParsed.options['active-tag'],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
 
     const { parsed: effectiveParsed, hiddenCounts } =
@@ -6767,7 +6813,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       undefined,
-      options?.tagGroup
+      resolveActiveTagGroup(
+        kanbanParsed.tagGroups,
+        kanbanParsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6824,7 +6874,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        erParsed.tagGroups,
+        erParsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6852,7 +6906,10 @@ export async function renderForExport(
       blLayout,
       effectivePalette,
       theme === 'dark',
-      { exportDims: { width: exportWidth, height: exportHeight } }
+      {
+        exportDims: { width: exportWidth, height: exportHeight },
+        activeTagGroup: options?.tagGroup,
+      }
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6909,7 +6966,11 @@ export async function renderForExport(
       theme === 'dark',
       undefined,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        c4Parsed.tagGroups,
+        c4Parsed.options['active-tag'],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
@@ -6951,7 +7012,11 @@ export async function renderForExport(
 
     const infraComputed = computeInfra(infraParsed);
     const infraLayout = layoutInfra(infraComputed);
-    const activeTagGroup = options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      infraParsed.tagGroups,
+      infraParsed.options['active-tag'],
+      options?.tagGroup
+    );
 
     const titleOffset = infraParsed.title ? 40 : 0;
     const legendGroups = computeInfraLegendGroups(
@@ -7104,7 +7169,11 @@ export async function renderForExport(
       isDark,
       undefined,
       dims,
-      orgExportState?.activeTagGroup ?? options?.tagGroup,
+      resolveActiveTagGroup(
+        parsed.timelineTagGroups,
+        undefined,
+        orgExportState?.activeTagGroup ?? options?.tagGroup
+      ),
       orgExportState?.swimlaneTagGroup
     );
   } else if (parsed.type === 'venn') {

package/src/echarts.ts

@@ -977,7 +977,7 @@ function buildChordOption(
             };
           });
         })(),
-        roam: true,
+        roam: false,
         label: {
           position: 'right',
           formatter: '{b}',

package/src/er/parser.ts

@@ -11,6 +11,7 @@ import {
 import {
   matchTagBlockHeading,
   validateTagValues,
+  validateTagGroupNames,
   stripDefaultModifier,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
@@ -54,7 +55,7 @@ const CONSTRAINT_MAP: Record<string, ERConstraint> = {
 };
 
 // Known options (space-separated, no colon)
-const KNOWN_OPTIONS = new Set(['notation']);
+const KNOWN_OPTIONS = new Set(['notation', 'active-tag']);
 
 // ============================================================
 // Cardinality parsing
@@ -418,6 +419,9 @@ export function parseERDiagram(
         result.diagnostics.push(makeDgmoError(line, msg, 'warning')),
       suggest
     );
+    validateTagGroupNames(result.tagGroups, (line, msg) =>
+      result.diagnostics.push(makeDgmoError(line, msg, 'warning'))
+    );
 
     // Inject defaults for tables without explicit tags
     for (const group of result.tagGroups) {

package/src/gantt/parser.ts

@@ -8,6 +8,7 @@ import type { TagGroup } from '../utils/tag-groups';
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -134,6 +135,7 @@ export function parseGantt(
       dependencies: true,
       sort: 'default',
       defaultSwimlaneGroup: null,
+      activeTag: null,
       optionLineNumbers: {},
       holidaysLineNumber: null,
     },
@@ -645,6 +647,9 @@ export function parseGantt(
             );
           }
           break;
+        case 'active-tag':
+          result.options.activeTag = value;
+          break;
       }
       continue;
     }
@@ -872,6 +877,8 @@ export function parseGantt(
     result.options.sort = 'default';
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 
   // ── Helper: create a task ───────────────────────────────
@@ -1033,6 +1040,7 @@ const KNOWN_OPTIONS = new Set([
   'dependencies',
   'chart',
   'sort',
+  'active-tag',
 ]);
 
 /** Boolean options that can appear as bare keywords or with `no-` prefix. */

package/src/gantt/renderer.ts

@@ -7,7 +7,7 @@ import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
 import { getSeriesColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
-import { resolveTagColor } from '../utils/tag-groups';
+import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
 import { computeTimeTicks } from '../d3';
 import {
   LEGEND_HEIGHT,
@@ -227,12 +227,11 @@ export function renderGantt(
   // ── Compute layout dimensions ───────────────────────────
 
   const seriesColors = getSeriesColors(palette);
-  let currentActiveGroup: string | null =
-    options?.currentActiveGroup !== undefined
-      ? options.currentActiveGroup
-      : resolved.tagGroups.length > 0
-        ? resolved.tagGroups[0].name
-        : null;
+  let currentActiveGroup: string | null = resolveActiveTagGroup(
+    resolved.tagGroups,
+    resolved.options.activeTag ?? undefined,
+    options?.currentActiveGroup
+  );
   let criticalPathActive = false;
 
   // ── Build row list (structural vs tag mode) ─────────────

package/src/gantt/types.ts

@@ -115,6 +115,7 @@ export interface GanttOptions {
   dependencies: boolean;
   sort: 'default' | 'tag';
   defaultSwimlaneGroup: string | null; // tag group name from `sort: tag:Team`
+  activeTag: string | null; // from `active-tag GroupName` or `active-tag none`
   /** Line numbers for option/block keywords — maps key to source line */
   optionLineNumbers: Record<string, number>;
   holidaysLineNumber: number | null;

package/src/infra/parser.ts

@@ -15,6 +15,7 @@ import {
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import type {
   ParsedInfra,
@@ -77,6 +78,7 @@ const TOP_LEVEL_OPTIONS = new Set([
   'default-latency-ms',
   'default-uptime',
   'default-rps',
+  'active-tag',
 ]);
 
 // ============================================================
@@ -726,6 +728,8 @@ export function parseInfra(content: string): ParsedInfra {
     }
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 }
 

package/src/kanban/parser.ts

@@ -4,6 +4,7 @@ import { resolveColor } from '../colors';
 import {
   matchTagBlockHeading,
   stripDefaultModifier,
+  validateTagGroupNames,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -29,7 +30,7 @@ const COLUMN_RE = /^\[(.+?)\](?:\s*\(([^)]+)\))?\s*(?:\|\s*(.+))?$/;
 const LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
 
 /** Known kanban options (key-value). */
-const KNOWN_OPTIONS = new Set(['hide']);
+const KNOWN_OPTIONS = new Set(['hide', 'active-tag']);
 /** Known kanban boolean options (bare keyword = on). */
 const KNOWN_BOOLEANS = new Set<string>(['no-auto-color']);
 
@@ -366,6 +367,8 @@ export function parseKanban(
     return fail(1, 'No columns found. Use [Column Name] to define columns');
   }
 
+  validateTagGroupNames(result.tagGroups, warn);
+
   return result;
 }