@diagrammo/dgmo 0.8.10 → 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.10",
+  "version": "0.8.12",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -74,10 +74,10 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^2.0.4",
+    "@dagrejs/dagre": "^3.0.0",
     "@resvg/resvg-js": "^2.6.2",
     "d3-array": "^3.2.4",
-    "d3-cloud": "^1.2.7",
+    "d3-cloud": "^1.2.9",
     "d3-hierarchy": "^3.1.2",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
@@ -85,32 +85,30 @@
     "echarts": "^6.0.0",
     "lz-string": "^1.5.0"
   },
-  "optionalDependencies": {
-    "jsdom": "^28.1.0"
-  },
   "devDependencies": {
     "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
     "@eslint/js": "^10.0.1",
     "@lezer/generator": "^1.8.0",
-    "@types/d3-array": "^3.2.1",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-cloud": "^1.2.9",
     "@types/d3-hierarchy": "^3.1.7",
-    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
-    "@types/d3-shape": "^3.1.7",
-    "@types/jsdom": "^28.0.0",
+    "@types/d3-shape": "^3.1.8",
+    "@types/jsdom": "^28.0.1",
     "cspell": "^9.7.0",
-    "eslint": "^10.1.0",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.2.0",
     "husky": "^9.1.7",
     "jscpd": "^4.0.8",
-    "knip": "^6.0.1",
+    "jsdom": "^29.0.1",
+    "knip": "^6.3.0",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.57.2",
-    "vitest": "^4.0.18"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vitest": "^4.1.2"
   },
   "lint-staged": {
     "*.ts": [
@@ -120,7 +118,6 @@
   },
   "peerDependencies": {
     "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
     "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.8"

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';
@@ -292,7 +292,7 @@ function resolveEdgeLabelOverlaps(
 
 // ── Main render function ───────────────────────────────────
 
-export interface BLRenderOptions {
+interface BLRenderOptions {
   onClickItem?: (lineNumber: number) => void;
   exportDims?: { width?: number; height?: number };
   activeTagGroup?: string | null;
@@ -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/layout.ts

@@ -18,6 +18,27 @@ import {
   measureLegendText,
 } from '../utils/legend-constants';
 
+/** dagre node label shape after layout(). */
+interface DagreNodeLabel {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  [key: string]: unknown;
+}
+
+/** dagre edge label shape after layout(). */
+interface DagreEdgeLabel {
+  points: { x: number; y: number }[];
+  [key: string]: unknown;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const gNode = (g: any, name: string): DagreNodeLabel => g.node(name);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const gEdge = (g: any, v: string, w: string): DagreEdgeLabel | undefined =>
+  g.edge(v, w);
+
 // ============================================================
 // Types
 // ============================================================
@@ -213,7 +234,7 @@ function computeEdgePenalty(
  * closer to their neighbors, producing cleaner visual layouts.
  */
 function reduceCrossings(
-  g: dagre.graphlib.Graph,
+  g: InstanceType<typeof dagre.graphlib.Graph>,
   edgeList: { source: string; target: string }[],
   nodeGroupMap?: Map<string, string>
 ): void {
@@ -229,7 +250,7 @@ function reduceCrossings(
   // Build geometry map for edge-node collision scoring
   const nodeGeometry = new Map<string, NodeGeometry>();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (pos)
       nodeGeometry.set(name, {
         y: pos.y,
@@ -241,7 +262,7 @@ function reduceCrossings(
   // Group nodes by rank
   const rankMap = new Map<number, string[]>();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (!pos) continue;
     const rankY = Math.round(pos.y);
     if (!rankMap.has(rankY)) rankMap.set(rankY, []);
@@ -250,7 +271,7 @@ function reduceCrossings(
 
   // Sort each rank by current x position
   for (const [, rankNodes] of rankMap) {
-    rankNodes.sort((a, b) => g.node(a).x - g.node(b).x);
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
   }
 
   let anyMoved = false;
@@ -285,13 +306,13 @@ function reduceCrossings(
 
       // Collect the x-slots for this partition (sorted)
       const xSlots = partition
-        .map((name) => g.node(name).x)
+        .map((name) => gNode(g, name).x)
         .sort((a, b) => a - b);
 
       // Build position map snapshot
       const basePositions = new Map<string, number>();
       for (const name of g.nodes()) {
-        const pos = g.node(name);
+        const pos = gNode(g, name);
         if (pos) basePositions.set(name, pos.x);
       }
 
@@ -379,7 +400,7 @@ function reduceCrossings(
       // Apply best permutation if it differs from current
       if (bestPerm.some((name, i) => name !== partition[i])) {
         for (let i = 0; i < bestPerm.length; i++) {
-          g.node(bestPerm[i]!).x = xSlots[i]!;
+          gNode(g, bestPerm[i]!).x = xSlots[i]!;
           // Update in the original rankNodes too
           const rankIdx = rankNodes.indexOf(partition[i]!);
           if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i]!;
@@ -392,10 +413,10 @@ function reduceCrossings(
   // Recompute edge waypoints if any positions changed
   if (anyMoved) {
     for (const edge of edgeList) {
-      const edgeData = g.edge(edge.source, edge.target);
+      const edgeData = gEdge(g, edge.source, edge.target);
       if (!edgeData) continue;
-      const srcPos = g.node(edge.source);
-      const tgtPos = g.node(edge.target);
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
       if (!srcPos || !tgtPos) continue;
 
       const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };

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' },
     }),
   ],
   [