@diagrammo/dgmo 0.32.1 → 0.33.0

package/src/boxes-and-lines/layout-search.ts

@@ -22,6 +22,7 @@ import {
   type BLLayoutEdge,
 } from './layout';
 import { layeredCandidates } from './layout-layered';
+import { groupedTierCandidates } from './layout-grouped';
 
 type Pt = { x: number; y: number };
 
@@ -1528,6 +1529,21 @@ export async function layoutBoxesAndLinesSearch(
     /* ignore */
   }
 
+  // Tier-banded grouped candidates. The dagre path treats `[Group]` containers
+  // as compound clusters with no tier ORDER and no cycle-aware routing, so
+  // tiered architecture diagrams collide bands side-by-side and balloon on
+  // back-edges. This generator orders the groups into disjoint rank bands and
+  // routes against-tier edges around the periphery. Additive — kept only on a
+  // strict badness win. Skipped when any group is collapsed (the generator
+  // models fully-expanded groups only).
+  if (parsed.groups.length > 0 && collapsedGroupLabels.size === 0) {
+    try {
+      layered = layered.concat(groupedTierCandidates(parsed, sizes));
+    } catch {
+      /* ignore */
+    }
+  }
+
   // Stage 1: rank the dagre pool with the cheap straight-segment counter — a
   // cheap proxy to pick which candidates are worth the expensive exact scoring.
   // Widen REFINE_K a little since the proxy only sees crossings, not O/P.
@@ -1536,7 +1552,8 @@ export async function layoutBoxesAndLinesSearch(
   // for both operands on every comparison (O(C log C) calls vs C). The score is a
   // pure function of the layout, so the resulting order is identical.
   const fastKey = new Map<BLLayoutResult, number>();
-  for (const lay of pool) fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
+  for (const lay of pool)
+    fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
   pool.sort((a, b) => fastKey.get(a)! - fastKey.get(b)!);
   const refineK = Math.min(REFINE_K, pool.length);
 

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

@@ -21,6 +21,7 @@ import {
   stripDefaultModifier,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import type { Writable } from '../utils/brand';
@@ -399,12 +400,12 @@ export function parseBoxesAndLines(
       if (tagBlockMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagBlockMatch.alias),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
       }
       metaAliasMap.set(
         normalizeName(tagBlockMatch.name),
-        tagBlockMatch.name.toLowerCase()
+        tagAttrKey(tagBlockMatch.name)
       );
       if (tagBlockMatch.inlineValues) {
         for (const rawVal of tagBlockMatch.inlineValues) {

package/src/c4/layout.ts

@@ -2,6 +2,7 @@
 // C4 Context Diagram Layout Engine (dagre)
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import dagre from '@dagrejs/dagre';
 import type {
   ParsedC4,
@@ -619,7 +620,7 @@ function resolveNodeColor(
     (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
   );
   if (!group) return undefined;
-  const key = group.name.toLowerCase();
+  const key = tagAttrKey(group.name);
   // Walk inheritance chain: element → ancestors (container → system)
   let metaValue: string | undefined = el.metadata[key];
   if (!metaValue && ancestors) {

package/src/c4/parser.ts

@@ -24,6 +24,7 @@ import {
   validateTagGroupNames,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import { inferParticipantType } from '../sequence/participant-inference';
 import {
@@ -416,12 +417,12 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       if (tagBlockMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagBlockMatch.alias),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
       }
       metaAliasMap.set(
         normalizeName(tagBlockMatch.name),
-        tagBlockMatch.name.toLowerCase()
+        tagAttrKey(tagBlockMatch.name)
       );
       result.tagGroups.push(currentTagGroup);
       continue;

package/src/c4/renderer.ts

@@ -2,6 +2,7 @@
 // C4 Context Diagram SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
@@ -432,7 +433,7 @@ export function renderC4Context(
       .attr('data-node-id', node.id);
 
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
@@ -1517,7 +1518,7 @@ export function renderC4Containers(
       .attr('data-node-id', node.id);
 
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());

package/src/cli.ts

@@ -26,6 +26,8 @@ import {
 } from './migrate';
 import { migrateEmbedded } from './migrate/embedded';
 import { renderBanner } from './cli-banner';
+import { searchMapLocations } from './map/completion';
+import { loadMapData } from './map/load-data';
 
 // Derived from the palette registry so new palettes are auto-included.
 const PALETTES = getAvailablePalettes().map((p) => p.id);
@@ -470,6 +472,7 @@ function printHelp(): void {
        cat input.dgmo | dgmo [options]
        dgmo cat <file>          Display file with syntax highlighting
        dgmo migrate <path>      Convert legacy "|" metadata to §1.4 grammar
+       dgmo map search <query>  Find the map place token (city or IATA code)
 
 Render a .dgmo file to PNG (default) or SVG.
 
@@ -859,6 +862,66 @@ async function runMigrateCommand(args: string[]): Promise<void> {
   }
 }
 
+// `dgmo map search <query>` — discover the exact place token the map resolver
+// expects (city name or bundled IATA airport code), so authors never guess
+// (e.g. "New York" → `New York City`; "kennedy" → `JFK`). Searches cities +
+// the bundled airport set; `--json` for machine output, `--limit N` to widen.
+async function runMapCommand(args: string[]): Promise<void> {
+  const sub = args[0];
+  const json = args.includes('--json');
+  const limFlag = args.indexOf('--limit');
+  const limit =
+    limFlag >= 0 ? Math.max(1, Number(args[limFlag + 1]) || 20) : 20;
+  // The query is the positional args (allow unquoted multi-word: `... New York`).
+  const query = args
+    .slice(1)
+    .filter(
+      (a, i, arr) =>
+        a !== '--json' && a !== '--limit' && arr[i - 1] !== '--limit'
+    )
+    .join(' ')
+    .trim();
+
+  if (sub !== 'search' || !query) {
+    console.log('Usage: dgmo map search <query> [--json] [--limit N]');
+    console.log(
+      '  Find the place token the map resolver expects (city or IATA airport code).'
+    );
+    console.log('  Examples:');
+    console.log(
+      '    dgmo map search "new york"     # → New York City (+ JFK/LGA/EWR airports)'
+    );
+    console.log('    dgmo map search kennedy        # → JFK by airport name');
+    console.log('    dgmo map search heathrow --json');
+    if (sub === 'search' && !query) process.exitCode = 1;
+    return;
+  }
+
+  const data = await loadMapData();
+  const results = searchMapLocations(query, data.gazetteer, {
+    limit,
+    ...(data.airports && { airports: data.airports }),
+  });
+
+  if (json) {
+    process.stdout.write(JSON.stringify({ query, results }, null, 2) + '\n');
+    return;
+  }
+  if (!results.length) {
+    console.log(
+      `No cities or airports match "${query}". Use coordinates: poi Name as <lat,lng>`
+    );
+    return;
+  }
+  console.log(
+    `Places matching "${query}" — use the token column in your DGMO:`
+  );
+  for (const r of results) {
+    const tag = r.kind === 'airport' ? '✈' : '•';
+    console.log(`  ${tag} ${r.token.padEnd(22)} ${r.detail}`);
+  }
+}
+
 async function main(): Promise<void> {
   // Subcommand dispatch — `dgmo migrate` is parsed independently from
   // the rendering flags so its surface doesn't pollute `parseArgs`.
@@ -867,6 +930,11 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (process.argv[2] === 'map') {
+    await runMapCommand(process.argv.slice(3));
+    return;
+  }
+
   const opts = parseArgs(process.argv);
 
   if (opts.help) {

package/src/er/parser.ts

@@ -31,6 +31,7 @@ import {
   stripDefaultModifier,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import { tryCollectNote, resolveNotes, type DiagramNote } from '../utils/notes';
@@ -608,7 +609,7 @@ export function parseERDiagram(
     // Inject defaults for tables without explicit tags
     for (const group of result.tagGroups) {
       if (!group.defaultValue) continue;
-      const key = group.name.toLowerCase();
+      const key = tagAttrKey(group.name);
       for (const table of result.tables) {
         if (!table.metadata[key]) {
           const mutableMeta = tableMetadataMap.get(table.id);

package/src/er/renderer.ts

@@ -2,6 +2,7 @@
 // ER Diagram SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
@@ -455,7 +456,7 @@ export function renderERDiagram(
 
     // Set data-tag-* attributes for legend hover
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());

package/src/gantt/parser.ts

@@ -25,6 +25,7 @@ import {
   emitTagLegacyDiagnostic,
   stripDefaultModifier,
   validateTagGroupNames,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -814,13 +815,10 @@ export function parseGantt(
       if (tagMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagMatch.alias),
-          tagMatch.name.toLowerCase()
+          tagAttrKey(tagMatch.name)
         );
       }
-      metaAliasMap.set(
-        normalizeName(tagMatch.name),
-        tagMatch.name.toLowerCase()
-      );
+      metaAliasMap.set(normalizeName(tagMatch.name), tagAttrKey(tagMatch.name));
       continue;
     }
 

package/src/gantt/renderer.ts

@@ -2,6 +2,7 @@
 // Gantt Chart Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Scale from 'd3-scale';
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
@@ -660,7 +661,7 @@ export function renderGantt(
       (tg) => tg.name.toLowerCase() === currentSwimlaneGroup.toLowerCase()
     );
     if (tagGroup) {
-      const tagKey = tagGroup.name.toLowerCase();
+      const tagKey = tagAttrKey(tagGroup.name);
       for (const rt of resolved.tasks) {
         let value = rt.effectiveMetadata[tagKey];
         if (!value && tagGroup.defaultValue) value = tagGroup.defaultValue;
@@ -2091,7 +2092,7 @@ function renderTagLegend(
   const usedValues = new Map<string, Set<string>>();
   if (resolvedTasks) {
     for (const group of visibleGroups) {
-      const key = group.name.toLowerCase();
+      const key = tagAttrKey(group.name);
       const used = new Set<string>();
       for (const rt of resolvedTasks) {
         const val = rt.effectiveMetadata[key];
@@ -2104,7 +2105,7 @@ function renderTagLegend(
   // Filter entries to only those used in the current view
   const filteredEntries = new Map<string, readonly TagEntry[]>();
   for (const group of visibleGroups) {
-    const key = group.name.toLowerCase();
+    const key = tagAttrKey(group.name);
     const used = usedValues.get(key);
     if (used && used.size > 0) {
       filteredEntries.set(
@@ -2133,7 +2134,7 @@ function renderTagLegend(
     let groupW = pillW;
     if (isActive) {
       const entries =
-        filteredEntries.get(group.name.toLowerCase()) ?? group.entries;
+        filteredEntries.get(tagAttrKey(group.name)) ?? group.entries;
       let entriesW = 0;
       for (const entry of entries) {
         entriesW +=
@@ -2215,7 +2216,7 @@ function renderTagLegend(
       }),
       ...(onControlsToggle !== undefined && { onControlsToggle }),
       onEntryHover: (groupName, entryValue) => {
-        const tagKey = groupName.toLowerCase();
+        const tagKey = tagAttrKey(groupName);
         if (entryValue) {
           const ev = entryValue.toLowerCase();
           chartG
@@ -3388,7 +3389,7 @@ export function buildTagLaneRowList(
   );
   if (!tagGroup) return null;
 
-  const tagKey = tagGroup.name.toLowerCase();
+  const tagKey = tagAttrKey(tagGroup.name);
   const rows: Row[] = [];
 
   // Bucket tasks by tag value

package/src/index.ts

@@ -226,11 +226,16 @@ export { normalizeSvgForEmbed, getEmbedSvgViewBox } from './utils/svg-embed';
 // ============================================================
 // Pure + dependency-injected: the caller supplies the `Gazetteer` asset. Safe
 // to export from the main index — no d3-geo/topojson runtime imports.
-export { completeMapPlaces, completeMapRegions } from './map/completion';
+export {
+  completeMapPlaces,
+  completeMapRegions,
+  searchMapLocations,
+} from './map/completion';
 export type {
   MapPlaceCompletion,
   MapRegionCompletion,
   MapCompletionOptions,
+  MapLocationMatch,
 } from './map/completion';
 export type {
   Gazetteer,

package/src/infra/parser.ts

@@ -6,6 +6,7 @@
 // Handles: chart metadata, component blocks with indented properties
 // and connections, [Group] containers, tag groups, pipe metadata.
 
+import { tagAttrKey } from '../utils/tag-groups';
 import {
   descriptionBareRemovedMessage,
   formatDgmoError,
@@ -1054,7 +1055,7 @@ export function parseInfra(content: string): ParsedInfra {
   // Inject default tag values into nodes that don't have one
   for (const tg of result.tagGroups) {
     if (!tg.defaultValue) continue;
-    const key = (tg.alias ?? tg.name).toLowerCase();
+    const key = tagAttrKey(tg.alias ?? tg.name);
     for (const node of result.nodes) {
       if (node.isEdge) continue;
       if (!(key in node.tags)) {

package/src/infra/renderer.ts

@@ -2,6 +2,7 @@
 // Infra Chart SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
@@ -1388,7 +1389,7 @@ function resolveActiveTagStroke(
     (t) => t.name.toLowerCase() === activeGroup.toLowerCase()
   );
   if (!tg) return null;
-  const tagKey = (tg.alias ?? tg.name).toLowerCase();
+  const tagKey = tagAttrKey(tg.alias ?? tg.name);
   const tagVal = node.tags[tagKey];
   if (!tagVal) return null;
   const tv = tg.values.find(
@@ -2073,7 +2074,7 @@ export function computeInfraLegendGroups(
     groups.push({
       name: tg.name,
       type: 'tag',
-      tagKey: (tg.alias ?? tg.name).toLowerCase(),
+      tagKey: tagAttrKey(tg.alias ?? tg.name),
       entries,
       width: LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth,
       minifiedWidth: pillWidth,
@@ -2146,7 +2147,7 @@ function renderLegend(
   // Add infra-specific classes and data attributes for app interactivity
   legendG.selectAll('[data-legend-group]').classed('infra-legend-group', true);
   for (const group of legendGroups) {
-    const groupKey = group.name.toLowerCase();
+    const groupKey = tagAttrKey(group.name);
     for (const entry of group.entries) {
       const entryEl = legendG.select(
         `[data-legend-group="${groupKey}"] [data-legend-entry="${entry.value.toLowerCase()}"]`

package/src/journey-map/parser.ts

@@ -14,7 +14,11 @@ import {
   JOURNEY_MAP_REGISTRY,
   withTagAliases,
 } from '../utils/reserved-key-registry';
-import { splitNameAndMeta, warnUnknownMetaKeys } from '../utils/parsing';
+import {
+  splitNameAndMeta,
+  warnUnknownMetaKeys,
+  peelTrailingColorName,
+} from '../utils/parsing';
 import {
   matchTagBlockHeading,
   emitTagLegacyDiagnostic,
@@ -22,6 +26,7 @@ import {
   validateTagGroupNames,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -180,8 +185,10 @@ export function parseJourneyMap(
             }
           }
         } else {
-          // Same-line form (pipes removed in 0.18.0): peel a trailing
-          // `color: <token>` off the rest-of-line persona name.
+          // Same-line form (pipes removed in 0.18.0). Two ways to set color:
+          //   1. explicit `persona <name> color: <token>` (long form)
+          //   2. universal §1.5 trailing-token color (`persona <name> green`);
+          //      capitalize the word (`Green`) to keep it as literal name text.
           const colorMatch = afterKeyword.match(/^(.+?)\s+color:\s*(\S+)$/i);
           if (colorMatch) {
             personaName = colorMatch[1]!.trim();
@@ -193,7 +200,19 @@ export function parseJourneyMap(
                 palette
               ) ?? undefined;
           } else {
-            personaName = afterKeyword;
+            const { label, colorName } = peelTrailingColorName(afterKeyword);
+            if (colorName) {
+              personaName = label;
+              personaColor =
+                resolveColorWithDiagnostic(
+                  colorName,
+                  lineNumber,
+                  result.diagnostics,
+                  palette
+                ) ?? undefined;
+            } else {
+              personaName = afterKeyword;
+            }
           }
         }
 
@@ -246,12 +265,12 @@ export function parseJourneyMap(
         if (tagBlockMatch.alias) {
           aliasMap.set(
             tagBlockMatch.alias.toLowerCase(),
-            tagBlockMatch.name.toLowerCase()
+            tagAttrKey(tagBlockMatch.name)
           );
         }
         aliasMap.set(
-          tagBlockMatch.name.toLowerCase(),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name),
+          tagAttrKey(tagBlockMatch.name)
         );
         result.tagGroups.push(currentTagGroup);
         continue;
@@ -445,7 +464,7 @@ export function parseJourneyMap(
   // Build tag value sets
   for (const group of result.tagGroups) {
     const values = new Set(group.entries.map((e) => e.value.toLowerCase()));
-    tagValueSets.set(group.name.toLowerCase(), values);
+    tagValueSets.set(tagAttrKey(group.name), values);
   }
 
   // Validate tag values on all steps

package/src/journey-map/renderer.ts

@@ -1,3 +1,4 @@
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3 from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import type { PaletteColors } from '../palettes';
@@ -18,6 +19,7 @@ import type {
   JourneyMapStep,
 } from './types';
 import { renderInlineText } from '../utils/inline-markdown';
+import { wrapNoteBody, NOTE_BULLET_INDENT } from '../utils/note-box';
 import { renderIntegratedLegend } from '../utils/legend-integration';
 import { resolveActiveTagGroup } from '../utils/tag-groups';
 import { ScaleContext } from '../utils/scaling';
@@ -194,9 +196,10 @@ export function renderJourneyMap(
     const textAreaWidth = panelWidth - silhouetteZone - CARD_PADDING_X;
     const descLineH = 14;
 
-    // Wrap description text into lines
+    // Wrap description text into lines — bullet-aware (`- `/`* ` → hanging
+    // "•") + inline markdown, matching how note boxes render rich bodies.
     const descLines = parsed.persona.description
-      ? wrapText(parsed.persona.description, textAreaWidth, FONT_SIZE_META)
+      ? wrapNoteBody(parsed.persona.description, textAreaWidth, FONT_SIZE_META)
       : [];
     const descRowH =
       descLines.length > 0 ? descLines.length * descLineH + 8 : 0;
@@ -276,16 +279,30 @@ export function renderJourneyMap(
       .attr('fill', onPersonaText)
       .text(parsed.persona.name);
 
-    // Description — wrapped lines below divider, with inline markdown
+    // Description — wrapped lines below divider, with inline markdown.
+    // Bullet first-lines get a "•" glyph at the left edge with the body
+    // hanging-indented; continuation lines align under the body.
     for (let li = 0; li < descLines.length; li++) {
+      // In-bounds by loop guard.
+      const line = descLines[li]!;
+      const indent = line.kind === 'plain' ? 0 : NOTE_BULLET_INDENT;
+      const lineY = panelY + titleRowH + descLineH * (li + 1);
+      if (line.kind === 'bullet-first') {
+        personaG
+          .append('text')
+          .attr('x', textX)
+          .attr('y', lineY)
+          .attr('font-size', FONT_SIZE_META)
+          .attr('fill', onPersonaText)
+          .text('•');
+      }
       const lineEl = personaG
         .append('text')
-        .attr('x', textX)
-        .attr('y', panelY + titleRowH + descLineH * (li + 1))
+        .attr('x', textX + indent)
+        .attr('y', lineY)
         .attr('font-size', FONT_SIZE_META)
         .attr('fill', onPersonaText);
-      // In-bounds by loop guard.
-      renderInlineText(lineEl, descLines[li]!, palette, FONT_SIZE_META);
+      renderInlineText(lineEl, line.text, palette, FONT_SIZE_META);
     }
 
     if (onNavigateToLine) {
@@ -346,7 +363,7 @@ export function renderJourneyMap(
               const isScore = groupName === 'Score';
               const attrName = isScore
                 ? 'data-score'
-                : `data-tag-${groupName.toLowerCase()}`;
+                : `data-tag-${tagAttrKey(groupName)}`;
 
               const matches = (el: Element) =>
                 el.getAttribute(attrName) === entryValue;
@@ -1094,7 +1111,7 @@ function resolveStepColor(
   );
   if (!group) return undefined;
 
-  const tagValue = step.tags[group.name.toLowerCase()];
+  const tagValue = step.tags[tagAttrKey(group.name)];
   if (!tagValue) return undefined;
 
   const entry = group.entries.find(

package/src/kanban/parser.ts

@@ -19,6 +19,7 @@ import {
   validateTagGroupNames,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -168,14 +169,14 @@ export function parseKanban(
         if (tagBlockMatch.alias) {
           metaAliasMap.set(
             normalizeName(tagBlockMatch.alias),
-            tagBlockMatch.name.toLowerCase()
+            tagAttrKey(tagBlockMatch.name)
           );
         }
         // §1.4 dispatch: register the canonical tag name so `priority: X`
         // also dispatches as metadata (not just the optional `p: X` alias).
         metaAliasMap.set(
           normalizeName(tagBlockMatch.name),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
         result.tagGroups.push(currentTagGroup);
         continue;
@@ -419,7 +420,7 @@ export function parseKanban(
   // Build tag value sets for validation
   for (const group of result.tagGroups) {
     const values = new Set(group.entries.map((e) => e.value.toLowerCase()));
-    tagValueSets.set(group.name.toLowerCase(), values);
+    tagValueSets.set(tagAttrKey(group.name), values);
   }
 
   // Validate WIP limits

package/src/kanban/renderer.ts

@@ -2,6 +2,7 @@
 // Kanban Board SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
@@ -82,7 +83,7 @@ function resolveCardTagMeta(
   const meta: { label: string; value: string; color?: string }[] = [];
   for (const group of tagGroups) {
     if (hiddenMetaGroups?.includes(group.name.toLowerCase())) continue;
-    const tagValue = card.tags[group.name.toLowerCase()];
+    const tagValue = card.tags[tagAttrKey(group.name)];
     const value = tagValue ?? group.defaultValue;
     if (!value) continue;
     const entry = group.entries.find(
@@ -107,7 +108,7 @@ function resolveCardTagColor(
     (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
   );
   if (!group) return card.color;
-  const tagValue = card.tags[group.name.toLowerCase()];
+  const tagValue = card.tags[tagAttrKey(group.name)];
   const value = tagValue ?? group.defaultValue;
   if (!value) return undefined;
   const entry = group.entries.find(
@@ -639,7 +640,7 @@ export function renderKanban(
         .attr('data-line-number', card.lineNumber);
 
       if (activeTagGroup) {
-        const tagKey = activeTagGroup.toLowerCase();
+        const tagKey = tagAttrKey(activeTagGroup);
         const tagValue = card.tags[tagKey];
         const group = parsed.tagGroups.find(
           (tg) => tg.name.toLowerCase() === tagKey
@@ -806,7 +807,7 @@ function bucketCardsBySwimlane(
   columns: KanbanColumn[],
   swimlaneGroup: KanbanTagGroup
 ): SwimlaneBucket[] {
-  const tagKey = swimlaneGroup.name.toLowerCase();
+  const tagKey = tagAttrKey(swimlaneGroup.name);
   const buckets = new Map<string, SwimlaneBucket>();
 
   // Seed lanes from declaration order
@@ -1369,7 +1370,7 @@ function renderSwimlaneCard(
     .attr('data-line-number', card.lineNumber);
 
   if (activeTagGroup) {
-    const tagKey = activeTagGroup.toLowerCase();
+    const tagKey = tagAttrKey(activeTagGroup);
     const group = tagGroups.find((tg) => tg.name.toLowerCase() === tagKey);
     const value = card.tags[tagKey] ?? group?.defaultValue;
     if (value) {