@diagrammo/dgmo 0.32.0 → 0.33.0

package/dist/auto.cjs

@@ -1158,6 +1158,9 @@ var init_parsing = __esm({
 });
 
 // src/utils/tag-groups.ts
+function tagAttrKey(name) {
+  return name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+}
 function stripDefaultModifier(text) {
   if (/\bdefault\s*$/.test(text)) {
     return { text: text.replace(/\s+default\s*$/, "").trim(), isDefault: true };
@@ -1303,17 +1306,17 @@ function parseTagDeclaration(line11) {
 function resolveTagColor(metadata, tagGroups, activeGroupName, isContainer) {
   if (!activeGroupName) return void 0;
   const group = tagGroups.find(
-    (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
+    (g) => tagAttrKey(g.name) === tagAttrKey(activeGroupName)
   );
   if (!group) return void 0;
-  const metaValue = metadata[group.name.toLowerCase()] ?? (isContainer ? void 0 : group.defaultValue);
+  const metaValue = metadata[tagAttrKey(group.name)] ?? (isContainer ? void 0 : group.defaultValue);
   if (!metaValue) return "#999999";
   return group.entries.find((e) => e.value.toLowerCase() === metaValue.toLowerCase())?.color ?? "#999999";
 }
 function validateTagValues(entities, tagGroups, pushWarning, suggestFn) {
   if (tagGroups.length === 0) return;
   const groupMap = /* @__PURE__ */ new Map();
-  for (const g of tagGroups) groupMap.set(g.name.toLowerCase(), g);
+  for (const g of tagGroups) groupMap.set(tagAttrKey(g.name), g);
   for (const entity of entities) {
     for (const [key, value] of Object.entries(entity.metadata)) {
       const group = groupMap.get(key);
@@ -1350,10 +1353,10 @@ function validateTagGroupNames(tagGroups, pushWarning, pushError) {
         `'none' is a reserved keyword and cannot be used as a tag group name`
       );
     }
-    if (!VALID_TAG_IDENT_RE.test(group.name)) {
+    if (!VALID_TAG_IDENT_RE.test(tagAttrKey(group.name))) {
       report(
         group.lineNumber,
-        `Tag group name "${group.name}" contains invalid characters \u2014 use a single identifier (letters, digits, underscore, hyphen)`
+        `Tag group name "${group.name}" can't form a valid key \u2014 use letters, digits, underscore, or hyphen, and quote a multi-word name (e.g. tag "Trust Zone" as tz)`
       );
     }
     if (group.alias != null && !VALID_TAG_IDENT_RE.test(group.alias)) {
@@ -1365,7 +1368,7 @@ function validateTagGroupNames(tagGroups, pushWarning, pushError) {
   }
 }
 function cascadeTagMetadata(roots, tagGroups) {
-  const keys = tagGroups.map((g) => g.name.toLowerCase());
+  const keys = tagGroups.map((g) => tagAttrKey(g.name));
   if (keys.length === 0) return;
   const walk = (node, inherited) => {
     const childInherited = { ...inherited };
@@ -1386,7 +1389,7 @@ function injectDefaultTagMetadata(entities, tagGroups, skip) {
   for (const group of tagGroups) {
     if (group.defaultValue) {
       defaults.push({
-        key: group.name.toLowerCase(),
+        key: tagAttrKey(group.name),
         value: group.defaultValue
       });
     }
@@ -2777,7 +2780,7 @@ function parseVisualizationFull(content, palette) {
       );
       for (const group of result.timelineTagGroups) {
         if (!group.defaultValue) continue;
-        const key = group.name.toLowerCase();
+        const key = tagAttrKey(group.name);
         for (const event of result.timelineEvents) {
           if (!event.metadata[key]) {
             event.metadata[key] = group.defaultValue;
@@ -5169,7 +5172,7 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
   };
 }
 function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, callbacks) {
-  const g = parent.append("g").attr("transform", `translate(${capsule.x},${capsule.y})`).attr("data-legend-group", capsule.groupName.toLowerCase()).style("cursor", "pointer");
+  const g = parent.append("g").attr("transform", `translate(${capsule.x},${capsule.y})`).attr("data-legend-group", tagAttrKey(capsule.groupName)).style("cursor", "pointer");
   g.append("rect").attr("width", capsule.width).attr("height", capsule.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
   const pill = capsule.pill;
   g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
@@ -5177,7 +5180,7 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, ca
   g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.text).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(capsule.groupName);
   if (capsule.gradient) {
     const gr = capsule.gradient;
-    const gradId = `dgmo-legend-ramp-${capsule.groupName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+    const gradId = `dgmo-legend-ramp-${tagAttrKey(capsule.groupName).replace(/[^a-z0-9]+/g, "-")}`;
     const def = g.append("defs").append("linearGradient").attr("id", gradId);
     for (const stop of valueRampStops(gr.low, gr.high, { isDark })) {
       def.append("stop").attr("offset", `${stop.offset * 100}%`).attr("stop-color", stop.color);
@@ -5207,7 +5210,7 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, isDark, ca
   }
 }
 function renderPill(parent, pill, palette, groupBg, callbacks) {
-  const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", pill.groupName.toLowerCase()).style("cursor", "pointer");
+  const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", tagAttrKey(pill.groupName)).style("cursor", "pointer");
   g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
   g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
   if (callbacks?.onGroupToggle) {
@@ -5313,6 +5316,7 @@ var LEGEND_TEXT_DY;
 var init_legend_d3 = __esm({
   "src/utils/legend-d3.ts"() {
     "use strict";
+    init_tag_groups();
     init_legend_constants();
     init_legend_layout();
     init_color_utils();
@@ -9299,7 +9303,7 @@ function parseERDiagram(content, palette) {
     );
     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);
@@ -9529,12 +9533,12 @@ function parseOrg(content, palette) {
       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;
@@ -9920,12 +9924,12 @@ function parseSitemap(content, palette) {
       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(newTagGroup);
       continue;
@@ -10095,6 +10099,14 @@ function parseSitemap(content, palette) {
           continue;
         }
       }
+      const enclosingContainer = nestedPageInsideContainer(indent, indentStack);
+      if (enclosingContainer) {
+        pushError(
+          lineNumber,
+          `Pages inside container '[${enclosingContainer}]' cannot have indented sub-pages. Containers hold a flat list of pages.`
+        );
+        continue;
+      }
       const node = parseNodeLabel2(
         trimmed,
         lineNumber,
@@ -10242,6 +10254,16 @@ function attachNode2(node, indent, indentStack, result) {
   }
   indentStack.push({ node, indent });
 }
+function nestedPageInsideContainer(indent, indentStack) {
+  let idx = indentStack.length - 1;
+  while (idx >= 0 && indentStack[idx].indent >= indent) idx--;
+  if (idx < 0) return null;
+  if (indentStack[idx].node.isContainer) return null;
+  for (let k = idx - 1; k >= 0; k--) {
+    if (indentStack[k].node.isContainer) return indentStack[k].node.label;
+  }
+  return null;
+}
 function findParentNode(indent, indentStack) {
   for (let i = indentStack.length - 1; i >= 0; i--) {
     if (indentStack[i].indent < indent) {
@@ -10825,12 +10847,12 @@ function parsePert(content, parseOpts = {}) {
         if (tagBlockMatch.alias) {
           metaAliasMap.set(
             tagBlockMatch.alias.toLowerCase(),
-            tagBlockMatch.name.toLowerCase()
+            tagAttrKey(tagBlockMatch.name)
           );
         }
         metaAliasMap.set(
           normalizeName(tagBlockMatch.name),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
         tagGroups.push(currentTagGroup);
         if (tagBlockMatch.inlineValues) {
@@ -12295,10 +12317,10 @@ function emitCapsule(capsule, palette, groupBg, pillBorder) {
       `<g data-legend-entry="${esc(entry.value.toLowerCase())}" data-series-name="${esc(entry.value)}" style="cursor:pointer"><circle cx="${entry.dotCx}" cy="${entry.dotCy}" r="${LEGEND_DOT_R}" fill="${esc(entry.color)}"/><text x="${entry.textX}" y="${entry.dotCy + LEGEND_ENTRY_FONT_SIZE / 2 - 1}" font-size="${LEGEND_ENTRY_FONT_SIZE}" fill="${esc(palette.textMuted)}" font-family="${esc(FONT_FAMILY)}">${esc(label)}</text></g>`
     );
   }
-  return `<g transform="translate(${capsule.x},${capsule.y})" data-legend-group="${esc(capsule.groupName.toLowerCase())}" style="cursor:pointer">${inner.join("")}</g>`;
+  return `<g transform="translate(${capsule.x},${capsule.y})" data-legend-group="${esc(tagAttrKey(capsule.groupName))}" style="cursor:pointer">${inner.join("")}</g>`;
 }
 function emitPill(pill, palette, groupBg) {
-  return `<g transform="translate(${pill.x},${pill.y})" data-legend-group="${esc(pill.groupName.toLowerCase())}" style="cursor:pointer"><rect width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(groupBg)}"/><text x="${pill.width / 2}" y="${pill.height / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2}" font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(pill.groupName)}</text></g>`;
+  return `<g transform="translate(${pill.x},${pill.y})" data-legend-group="${esc(tagAttrKey(pill.groupName))}" style="cursor:pointer"><rect width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(groupBg)}"/><text x="${pill.width / 2}" y="${pill.height / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2}" font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(pill.groupName)}</text></g>`;
 }
 function renderLegendSvg(groups, options) {
   if (groups.length === 0) return { svg: "", height: 0, width: 0 };
@@ -12346,6 +12368,7 @@ function renderLegendSvg(groups, options) {
 var init_legend_svg = __esm({
   "src/utils/legend-svg.ts"() {
     "use strict";
+    init_tag_groups();
     init_legend_constants();
     init_legend_layout();
     init_color_utils();
@@ -15036,12 +15059,12 @@ function parseKanban(content, palette) {
         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;
@@ -15230,7 +15253,7 @@ function parseKanban(content, palette) {
   }
   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);
   }
   for (const col of result.columns) {
     if (col.wipLimit != null && col.cards.length > col.wipLimit) {
@@ -15492,12 +15515,12 @@ function parseC4(content, palette) {
       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;
@@ -17180,7 +17203,7 @@ function parseInfra(content) {
   }
   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)) {
@@ -17317,6 +17340,7 @@ var CONNECTION_RE, SIMPLE_CONNECTION_RE, ASYNC_CONNECTION_RE, ASYNC_SIMPLE_CONNE
 var init_parser15 = __esm({
   "src/infra/parser.ts"() {
     "use strict";
+    init_tag_groups();
     init_diagnostics();
     init_description_helpers();
     init_arrows();
@@ -17862,13 +17886,10 @@ function parseGantt(content, palette) {
       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;
     }
     const topWorkweekMatch = line11.match(WORKWEEK_RE);
@@ -18794,7 +18815,7 @@ function parseMap(content, palette) {
   const aliasMap = /* @__PURE__ */ new Map();
   const open = { tag: null, route: null, poi: null };
   const registry = () => withTagAliases(MAP_REGISTRY, new Set(aliasMap.keys()));
-  const tagGroupNames = () => new Set(tagGroups.map((g) => g.name.toLowerCase()));
+  const tagGroupNames = () => new Set(tagGroups.map((g) => tagAttrKey(g.name)));
   const closeBlocks = () => {
     open.tag = null;
     open.route = null;
@@ -18978,7 +18999,7 @@ function parseMap(content, palette) {
       entries: [],
       lineNumber: line11
     };
-    if (m.alias) aliasMap.set(m.alias.toLowerCase(), m.name.toLowerCase());
+    if (m.alias) aliasMap.set(m.alias.toLowerCase(), tagAttrKey(m.name));
     tagGroups.push(group);
     open.tag = group;
     if (m.inlineValues?.length) {
@@ -19511,12 +19532,12 @@ function parseBoxesAndLines(content, palette) {
       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) {
@@ -20257,12 +20278,12 @@ function parseMindmap(content, palette) {
       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;
@@ -21971,7 +21992,18 @@ function parseJourneyMap(content, palette) {
               palette
             ) ?? void 0;
           } else {
-            personaName = afterKeyword;
+            const { label, colorName } = peelTrailingColorName(afterKeyword);
+            if (colorName) {
+              personaName = label;
+              personaColor = resolveColorWithDiagnostic(
+                colorName,
+                lineNumber,
+                result.diagnostics,
+                palette
+              ) ?? void 0;
+            } else {
+              personaName = afterKeyword;
+            }
           }
         }
         if (!personaName) {
@@ -22014,12 +22046,12 @@ function parseJourneyMap(content, palette) {
         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;
@@ -22163,7 +22195,7 @@ function parseJourneyMap(content, palette) {
   }
   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);
   }
   const allSteps = hasPhases ? result.phases.flatMap((p) => p.steps) : result.steps;
   for (const step of allSteps) {
@@ -24149,7 +24181,7 @@ function computeLegendGroups(tagGroups, showEyeIcons, usedValuesByGroup) {
   const groups = [];
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
-    const usedValues = usedValuesByGroup?.get(group.name.toLowerCase());
+    const usedValues = usedValuesByGroup?.get(tagAttrKey(group.name));
     const visibleEntries = usedValues ? group.entries.filter((e) => usedValues.has(e.value.toLowerCase())) : group.entries;
     if (visibleEntries.length === 0) continue;
     const pillWidth2 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
@@ -24762,7 +24794,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
   const totalHeight = finalMaxY - minY + MARGIN * 2;
   const usedValuesByGroup = /* @__PURE__ */ new Map();
   for (const group of parsed.tagGroups) {
-    const key = group.name.toLowerCase();
+    const key = tagAttrKey(group.name);
     const used = /* @__PURE__ */ new Set();
     const walk = (node) => {
       if (!node.isContainer && node.metadata[key]) {
@@ -24820,6 +24852,7 @@ var import_d3_hierarchy, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT, HEAD
 var init_layout = __esm({
   "src/org/layout.ts"() {
     "use strict";
+    init_tag_groups();
     import_d3_hierarchy = require("d3-hierarchy");
     init_tag_groups();
     init_legend_constants();
@@ -25181,14 +25214,14 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
   const contentG = mainG.append("g").attr("transform", `translate(0, ${contentYShift})`);
   const displayNames = /* @__PURE__ */ new Map();
   for (const group of parsed.tagGroups) {
-    displayNames.set(group.name.toLowerCase(), group.name);
+    displayNames.set(tagAttrKey(group.name), group.name);
   }
   const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
   const colorOff = parsed.options?.["color"] === "off";
   for (const c of layout.containers) {
     const cG = contentG.append("g").attr("transform", `translate(${c.x}, ${c.y})`).attr("class", "org-container").attr("data-line-number", String(c.lineNumber));
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const metaValue = c.tagMetadata[tagKey];
       if (metaValue) {
         cG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
@@ -25270,7 +25303,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     if (containerNodeIds.has(node.id)) continue;
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x - node.width / 2}, ${node.y})`).attr("class", "org-node").attr("data-line-number", String(node.lineNumber));
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const metaValue = node.tagMetadata[tagKey];
       if (metaValue) {
         nodeG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
@@ -25443,7 +25476,7 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       const computedLayout = legendHandle.getLayout();
       if (computedLayout.activeCapsule?.addonX != null) {
         const capsule = computedLayout.activeCapsule;
-        const groupKey = capsule.groupName.toLowerCase();
+        const groupKey = tagAttrKey(capsule.groupName);
         const isHidden = hiddenAttributes?.has(groupKey) ?? false;
         const activeGroupEl = legendParentBase.select(
           `[data-legend-group="${groupKey}"]`
@@ -25482,6 +25515,7 @@ var d3Selection6, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, ANCESTOR_DOT_R, ANCE
 var init_renderer = __esm({
   "src/org/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection6 = __toESM(require("d3-selection"), 1);
     init_fonts();
     init_export_container();
@@ -25567,7 +25601,7 @@ function computeLegendGroups2(tagGroups, usedValuesByGroup) {
   const groups = [];
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
-    const usedValues = usedValuesByGroup?.get(group.name.toLowerCase());
+    const usedValues = usedValuesByGroup?.get(tagAttrKey(group.name));
     const visibleEntries = usedValues ? group.entries.filter((e) => usedValues.has(e.value.toLowerCase())) : group.entries;
     if (visibleEntries.length === 0) continue;
     const pillWidth2 = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
@@ -26047,7 +26081,7 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
   totalHeight += MARGIN2;
   const usedValuesByGroup = /* @__PURE__ */ new Map();
   for (const group of parsed.tagGroups) {
-    const key = group.name.toLowerCase();
+    const key = tagAttrKey(group.name);
     const used = /* @__PURE__ */ new Set();
     const walk = (node) => {
       if (!node.isContainer && node.metadata[key]) {
@@ -26091,6 +26125,7 @@ var import_dagre, LABEL_FONT_SIZE3, META_FONT_SIZE3, CONTAINER_LABEL_FONT_SIZE2,
 var init_layout2 = __esm({
   "src/sitemap/layout.ts"() {
     "use strict";
+    init_tag_groups();
     import_dagre = __toESM(require("@dagrejs/dagre"), 1);
     init_tag_groups();
     init_legend_constants();
@@ -26360,10 +26395,10 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   const displayNames = /* @__PURE__ */ new Map();
   const tagColors = /* @__PURE__ */ new Map();
   for (const group of parsed.tagGroups) {
-    displayNames.set(group.name.toLowerCase(), group.name);
+    displayNames.set(tagAttrKey(group.name), group.name);
     for (const entry of group.entries) {
       tagColors.set(
-        `${group.name.toLowerCase()}:${entry.value.toLowerCase()}`,
+        `${tagAttrKey(group.name)}:${entry.value.toLowerCase()}`,
         entry.color
       );
     }
@@ -26380,7 +26415,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       );
     }
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagVal = c.tagMetadata[tagKey];
       if (tagVal) cG.attr(`data-tag-${tagKey}`, tagVal.toLowerCase());
     }
@@ -26443,7 +26478,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       nodeG.style("cursor", "pointer").on("click", () => onClickItem(node.lineNumber));
     }
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagVal = node.tagMetadata[tagKey];
       if (tagVal) nodeG.attr(`data-tag-${tagKey}`, tagVal.toLowerCase());
     }
@@ -26570,7 +26605,7 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
     const computedLayout = legendHandle.getLayout();
     if (computedLayout.activeCapsule?.addonX != null) {
       const capsule = computedLayout.activeCapsule;
-      const groupKey = capsule.groupName.toLowerCase();
+      const groupKey = tagAttrKey(capsule.groupName);
       const isHidden = hiddenAttributes?.has(groupKey) ?? false;
       const activeGroupEl = parent.select(`[data-legend-group="${groupKey}"]`);
       if (!activeGroupEl.empty()) {
@@ -26635,6 +26670,7 @@ var d3Selection7, d3Shape2, DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, ARROWHE
 var init_renderer2 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection7 = __toESM(require("d3-selection"), 1);
     d3Shape2 = __toESM(require("d3-shape"), 1);
     init_fonts();
@@ -26683,7 +26719,7 @@ function resolveCardTagMeta(card, tagGroups, hiddenMetaGroups) {
   const meta = [];
   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(
@@ -26703,7 +26739,7 @@ function resolveCardTagColor(card, tagGroups, activeTagGroup) {
     (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 void 0;
   const entry = group.entries.find(
@@ -27013,7 +27049,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
       );
       const cg = g.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).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
@@ -27074,7 +27110,7 @@ function drawSwimlaneIcon(parent, x, y, isActive, palette) {
   return iconG;
 }
 function bucketCardsBySwimlane(columns, swimlaneGroup) {
-  const tagKey = swimlaneGroup.name.toLowerCase();
+  const tagKey = tagAttrKey(swimlaneGroup.name);
   const buckets = /* @__PURE__ */ new Map();
   for (const entry of swimlaneGroup.entries) {
     buckets.set(entry.value.toLowerCase(), {
@@ -27362,7 +27398,7 @@ function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palet
   );
   const cg = parent.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).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) {
@@ -27395,6 +27431,7 @@ var d3Selection8, DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PAD
 var init_renderer3 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection8 = __toESM(require("d3-selection"), 1);
     init_fonts();
     init_color_utils();
@@ -28377,7 +28414,7 @@ function classifyEREntities(tables, relationships) {
   const variance = indegreeValues.reduce((a, b) => a + (b - mean) ** 2, 0) / indegreeValues.length;
   const stddev = Math.sqrt(variance);
   const sorted = [...indegreeValues].sort((a, b) => a - b);
-  const median = sorted.length % 2 === 0 ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2 : sorted[Math.floor(sorted.length / 2)];
+  const median2 = sorted.length % 2 === 0 ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2 : sorted[Math.floor(sorted.length / 2)];
   for (const table of tables) {
     const id = table.id;
     const cols = table.columns;
@@ -28418,7 +28455,7 @@ function classifyEREntities(tables, relationships) {
     const nameMatchesLookup = LOOKUP_NAME_SUFFIXES.some(
       (s) => nameLower.endsWith(s)
     );
-    if (nameMatchesLookup && cols.length <= 6 && fkCount <= 1 && indegree > median) {
+    if (nameMatchesLookup && cols.length <= 6 && fkCount <= 1 && indegree > median2) {
       result.set(id, "lookup");
       continue;
     }
@@ -28657,7 +28694,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     seriesColors2[ni % seriesColors2.length];
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "er-table").attr("data-line-number", String(node.lineNumber)).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());
@@ -28836,6 +28873,7 @@ var d3Selection10, d3Shape4, DIAGRAM_PADDING5, MAX_SCALE4, TABLE_FONT_SIZE2, COL
 var init_renderer5 = __esm({
   "src/er/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection10 = __toESM(require("d3-selection"), 1);
     d3Shape4 = __toESM(require("d3-shape"), 1);
     init_fonts();
@@ -29831,7 +29869,7 @@ function layeredCandidates(parsed, sizes, opts) {
     for (let r = 0; r < maxRank; r++) c += gapCrossings(r);
     return c;
   };
-  const median = (vals) => {
+  const median2 = (vals) => {
     if (vals.length === 0) return -1;
     vals.sort((x, y) => x - y);
     const m = Math.floor(vals.length / 2);
@@ -29846,7 +29884,7 @@ function layeredCandidates(parsed, sizes, opts) {
     const neigh = useUp ? up : down;
     const med = /* @__PURE__ */ new Map();
     for (const id of ids)
-      med.set(id, median(neigh.get(id).map((x) => orderOf.get(x))));
+      med.set(id, median2(neigh.get(id).map((x) => orderOf.get(x))));
     const movable = ids.filter((id) => med.get(id) >= 0).sort((a, b) => med.get(a) - med.get(b));
     const out = new Array(ids.length).fill(null);
     for (const id of ids) if (med.get(id) < 0) out[orderOf.get(id)] = id;
@@ -30176,6 +30214,695 @@ var init_layout_layered = __esm({
   }
 });
 
+// src/boxes-and-lines/layout-grouped.ts
+function rng2(s) {
+  return () => {
+    s |= 0;
+    s = s + 1831565813 | 0;
+    let t = Math.imul(s ^ s >>> 15, 1 | s);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function median(vals) {
+  if (vals.length === 0) return -1;
+  vals.sort((x, y) => x - y);
+  const m = Math.floor(vals.length / 2);
+  if (vals.length % 2 === 1) return vals[m];
+  if (vals.length === 2) return (vals[0] + vals[1]) / 2;
+  const left = vals[m - 1] - vals[0];
+  const right = vals[vals.length - 1] - vals[m];
+  return left + right === 0 ? (vals[m - 1] + vals[m]) / 2 : (vals[m - 1] * right + vals[m] * left) / (left + right);
+}
+function acyclicOrient(ids, edges) {
+  const adj = /* @__PURE__ */ new Map();
+  for (const l of ids) adj.set(l, []);
+  for (const e of edges) adj.get(e.from)?.push({ to: e.to, idx: e.idx });
+  const reversed = /* @__PURE__ */ new Set();
+  const state = /* @__PURE__ */ new Map();
+  for (const l of ids) state.set(l, 0);
+  const stack = [];
+  const visit = (root) => {
+    stack.push(root);
+    const it = /* @__PURE__ */ new Map();
+    while (stack.length) {
+      const u = stack[stack.length - 1];
+      if (state.get(u) === 0) state.set(u, 1);
+      const list = adj.get(u);
+      let i = it.get(u) ?? 0;
+      let descended = false;
+      for (; i < list.length; i++) {
+        const { to, idx } = list[i];
+        const st = state.get(to);
+        if (st === 1) reversed.add(idx);
+        else if (st === 0) {
+          it.set(u, i + 1);
+          stack.push(to);
+          descended = true;
+          break;
+        }
+      }
+      if (!descended) {
+        it.set(u, list.length);
+        state.set(u, 2);
+        stack.pop();
+      }
+    }
+  };
+  for (const l of ids) if (state.get(l) === 0) visit(l);
+  const dag = edges.map(
+    (e) => reversed.has(e.idx) ? { from: e.to, to: e.from, idx: e.idx, rev: true } : { from: e.from, to: e.to, idx: e.idx, rev: false }
+  );
+  return { dag };
+}
+function longestPath(ids, dag) {
+  const out = /* @__PURE__ */ new Map();
+  const inDeg = /* @__PURE__ */ new Map();
+  for (const l of ids) {
+    out.set(l, []);
+    inDeg.set(l, 0);
+  }
+  for (const d of dag) {
+    out.get(d.from).push(d.to);
+    inDeg.set(d.to, (inDeg.get(d.to) ?? 0) + 1);
+  }
+  const rank = /* @__PURE__ */ new Map();
+  for (const l of ids) rank.set(l, 0);
+  const queue = ids.filter((l) => (inDeg.get(l) ?? 0) === 0);
+  const indeg2 = new Map(inDeg);
+  let seen = 0;
+  while (queue.length) {
+    const u = queue.shift();
+    seen++;
+    for (const v of out.get(u)) {
+      rank.set(v, Math.max(rank.get(v), rank.get(u) + 1));
+      indeg2.set(v, indeg2.get(v) - 1);
+      if (indeg2.get(v) === 0) queue.push(v);
+    }
+  }
+  return seen === ids.length ? rank : null;
+}
+function groupedTierCandidates(parsed, sizes, opts) {
+  if (parsed.groups.length === 0) return [];
+  const nCount = parsed.nodes.length;
+  if (nCount < 3 || nCount > 60) return [];
+  const isTB = parsed.direction === "TB";
+  const labels = parsed.nodes.map((n) => n.label);
+  const labelSet = new Set(labels);
+  for (const e of parsed.edges)
+    if (e.source.startsWith("__group_") || e.target.startsWith("__group_"))
+      return [];
+  const groupByLabel = new Map(parsed.groups.map((g) => [g.label, g]));
+  const directGroupOf = /* @__PURE__ */ new Map();
+  for (const grp of parsed.groups)
+    for (const c of grp.children)
+      if (labelSet.has(c)) directGroupOf.set(c, grp.label);
+  const topGroupOf = (groupLabel) => {
+    let cur = groupLabel;
+    const guard = /* @__PURE__ */ new Set();
+    while (true) {
+      const g = groupByLabel.get(cur);
+      if (!g?.parentGroup || guard.has(cur)) return cur;
+      guard.add(cur);
+      cur = g.parentGroup;
+    }
+  };
+  const pathOf = (label) => {
+    const direct = directGroupOf.get(label);
+    if (!direct) return [];
+    const chain = [direct];
+    let cur = direct;
+    const guard = /* @__PURE__ */ new Set([direct]);
+    while (true) {
+      const g = groupByLabel.get(cur);
+      if (!g?.parentGroup || guard.has(g.parentGroup)) break;
+      chain.push(g.parentGroup);
+      guard.add(g.parentGroup);
+      cur = g.parentGroup;
+    }
+    return chain.reverse();
+  };
+  const SINGLE = "\0node\0";
+  const unitOf = (label) => {
+    const direct = directGroupOf.get(label);
+    return direct ? topGroupOf(direct) : SINGLE + label;
+  };
+  const edges = parsed.edges.map((e, i) => ({ e, i })).filter(
+    ({ e }) => labelSet.has(e.source) && labelSet.has(e.target) && e.source !== e.target
+  );
+  if (edges.length === 0) return [];
+  const unitOfNode = /* @__PURE__ */ new Map();
+  for (const l of labels) unitOfNode.set(l, unitOf(l));
+  const units = Array.from(new Set(labels.map((l) => unitOfNode.get(l))));
+  const interUnit = edges.filter(({ e }) => unitOfNode.get(e.source) !== unitOfNode.get(e.target)).map(({ e, i }) => ({
+    from: unitOfNode.get(e.source),
+    to: unitOfNode.get(e.target),
+    idx: i
+  }));
+  const { dag: unitDag } = acyclicOrient(units, interUnit);
+  const tier = longestPath(
+    units,
+    unitDag.map((d) => ({ from: d.from, to: d.to }))
+  );
+  if (!tier) return [];
+  const localRank = /* @__PURE__ */ new Map();
+  const unitMembers = /* @__PURE__ */ new Map();
+  for (const l of labels) {
+    const u = unitOfNode.get(l);
+    (unitMembers.get(u) ?? unitMembers.set(u, []).get(u)).push(l);
+  }
+  for (const [u, members] of unitMembers) {
+    const memberSet = new Set(members);
+    const intra = edges.filter(
+      ({ e }) => unitOfNode.get(e.source) === u && unitOfNode.get(e.target) === u && memberSet.has(e.source) && memberSet.has(e.target)
+    ).map(({ e, i }) => ({ from: e.source, to: e.target, idx: i }));
+    const { dag } = acyclicOrient(members, intra);
+    const lr = longestPath(
+      members,
+      dag.map((d) => ({ from: d.from, to: d.to }))
+    );
+    if (!lr) return [];
+    for (const m of members) localRank.set(m, lr.get(m));
+  }
+  const maxTier = Math.max(...units.map((u) => tier.get(u)));
+  const bandHeight = Array.from({ length: maxTier + 1 }, () => 1);
+  for (const u of units) {
+    const h = Math.max(
+      ...unitMembers.get(u).map((m) => localRank.get(m) + 1)
+    );
+    const t = tier.get(u);
+    bandHeight[t] = Math.max(bandHeight[t], h);
+  }
+  const tierBase = [];
+  let accBase = 0;
+  for (let t = 0; t <= maxTier; t++) {
+    tierBase[t] = accBase;
+    accBase += bandHeight[t];
+  }
+  const tierStartRanks = new Set(tierBase.slice(1));
+  const globalRank = /* @__PURE__ */ new Map();
+  for (const l of labels)
+    globalRank.set(
+      l,
+      tierBase[tier.get(unitOfNode.get(l))] + localRank.get(l)
+    );
+  const maxRank = Math.max(...labels.map((l) => globalRank.get(l)));
+  const node = /* @__PURE__ */ new Map();
+  for (const n of parsed.nodes) {
+    const s = sizes.get(n.label) ?? { width: NODE_WIDTH, height: NODE_HEIGHT };
+    node.set(n.label, {
+      id: n.label,
+      dummy: false,
+      rank: globalRank.get(n.label),
+      cross: 0,
+      thick: isTB ? s.width : s.height,
+      depth: isTB ? s.height : s.width,
+      realW: s.width,
+      realH: s.height,
+      unit: unitOfNode.get(n.label),
+      path: pathOf(n.label)
+    });
+  }
+  const chains = [];
+  const segs = [];
+  const backEdges = [];
+  const flatEdges = [];
+  for (const { e, i } of edges) {
+    const rs = globalRank.get(e.source);
+    const rt = globalRank.get(e.target);
+    if (rs === rt) {
+      flatEdges.push({ edgeIdx: i, a: e.source, b: e.target });
+      continue;
+    }
+    if (rt < rs) {
+      backEdges.push({ edgeIdx: i, src: e.source, tgt: e.target });
+      continue;
+    }
+    const chain = [e.source];
+    let prev = e.source;
+    for (let r = rs + 1; r < rt; r++) {
+      const id = `__d${i}_${r}`;
+      node.set(id, {
+        id,
+        dummy: true,
+        rank: r,
+        cross: 0,
+        thick: DUMMY_THICK2,
+        depth: 0,
+        realW: 0,
+        realH: 0,
+        unit: SINGLE + id,
+        path: []
+      });
+      segs.push({ a: prev, b: id });
+      chain.push(id);
+      prev = id;
+    }
+    segs.push({ a: prev, b: e.target });
+    chain.push(e.target);
+    chains.push({ edgeIdx: i, chain });
+  }
+  const ranks = Array.from({ length: maxRank + 1 }, () => []);
+  for (const n of node.values()) ranks[n.rank].push(n.id);
+  const up = /* @__PURE__ */ new Map();
+  const down = /* @__PURE__ */ new Map();
+  for (const id of node.keys()) {
+    up.set(id, []);
+    down.set(id, []);
+  }
+  for (const s of segs) {
+    down.get(s.a).push(s.b);
+    up.get(s.b).push(s.a);
+  }
+  const orderOf = /* @__PURE__ */ new Map();
+  const gapCrossings = (r) => {
+    const lower = ranks[r + 1];
+    if (!lower) return 0;
+    const es = [];
+    for (const a of ranks[r]) {
+      const pa = orderOf.get(a);
+      for (const b of down.get(a)) es.push({ p: pa, q: orderOf.get(b) });
+    }
+    let c = 0;
+    for (let i = 0; i < es.length; i++)
+      for (let j = i + 1; j < es.length; j++) {
+        const A = es[i], B = es[j];
+        if ((A.p - B.p) * (A.q - B.q) < 0) c++;
+      }
+    return c;
+  };
+  const totalCrossings = () => {
+    let c = 0;
+    for (let r = 0; r < maxRank; r++) c += gapCrossings(r);
+    return c;
+  };
+  const wmedianRank = (r, useUp) => {
+    const ids = ranks[r];
+    const neigh = useUp ? up : down;
+    const med = /* @__PURE__ */ new Map();
+    for (const id of ids)
+      med.set(id, median(neigh.get(id).map((x) => orderOf.get(x))));
+    const movable = ids.filter((id) => med.get(id) >= 0).sort((a, b) => med.get(a) - med.get(b));
+    const out = new Array(ids.length).fill(null);
+    for (const id of ids) if (med.get(id) < 0) out[orderOf.get(id)] = id;
+    let mi = 0;
+    for (let slot = 0; slot < out.length; slot++)
+      if (out[slot] === null) out[slot] = movable[mi++];
+    const final = out;
+    final.forEach((id, i) => orderOf.set(id, i));
+    ranks[r] = final;
+  };
+  const transpose = () => {
+    let improved = true;
+    let guard = 0;
+    while (improved && guard++ < 12) {
+      improved = false;
+      for (let r = 0; r <= maxRank; r++) {
+        const ids = ranks[r];
+        for (let i = 0; i < ids.length - 1; i++) {
+          const before = (r > 0 ? gapCrossings(r - 1) : 0) + (r < maxRank ? gapCrossings(r) : 0);
+          const a = ids[i], b = ids[i + 1];
+          ids[i] = b;
+          ids[i + 1] = a;
+          orderOf.set(b, i);
+          orderOf.set(a, i + 1);
+          const after = (r > 0 ? gapCrossings(r - 1) : 0) + (r < maxRank ? gapCrossings(r) : 0);
+          if (after < before) improved = true;
+          else {
+            ids[i] = a;
+            ids[i + 1] = b;
+            orderOf.set(a, i);
+            orderOf.set(b, i + 1);
+          }
+        }
+      }
+    }
+  };
+  const initOrder = (seed) => {
+    const r = seed === 0 ? null : rng2(seed);
+    for (let rr = 0; rr <= maxRank; rr++) {
+      const ids = ranks[rr].slice();
+      if (r)
+        for (let i = ids.length - 1; i > 0; i--) {
+          const j = Math.floor(r() * (i + 1));
+          [ids[i], ids[j]] = [ids[j], ids[i]];
+        }
+      ranks[rr] = ids;
+      ids.forEach((id, i) => orderOf.set(id, i));
+    }
+  };
+  const restarts = opts?.restarts ?? (nCount <= 16 ? 20 : nCount <= 30 ? 12 : 6);
+  const keepK = opts?.keepK ?? 3;
+  const found = [];
+  for (let s = 0; s < restarts; s++) {
+    initOrder(s);
+    let best = totalCrossings();
+    let bestSnap = new Map(orderOf);
+    for (let iter = 0; iter < 8; iter++) {
+      if (iter % 2 === 0)
+        for (let r = 1; r <= maxRank; r++) wmedianRank(r, true);
+      else for (let r = maxRank - 1; r >= 0; r--) wmedianRank(r, false);
+      transpose();
+      const c = totalCrossings();
+      if (c < best) {
+        best = c;
+        bestSnap = new Map(orderOf);
+      }
+      if (c === 0) break;
+    }
+    for (const [k, v] of bestSnap) orderOf.set(k, v);
+    for (let r = 0; r <= maxRank; r++)
+      ranks[r].sort((a, b) => orderOf.get(a) - orderOf.get(b));
+    const sig = ranks.map((r) => r.join(",")).join("|");
+    if (!found.some((f) => f.sig === sig))
+      found.push({ sig, cross: best, order: new Map(bestSnap) });
+  }
+  found.sort((a, b) => a.cross - b.cross);
+  const keep = found.slice(0, keepK);
+  if (keep.length === 0) return [];
+  const results = [];
+  for (const cand of keep) {
+    for (const [k, v] of cand.order) orderOf.set(k, v);
+    const rk = Array.from({ length: maxRank + 1 }, () => []);
+    for (const n of node.values()) rk[n.rank].push(n.id);
+    for (let r = 0; r <= maxRank; r++)
+      rk[r].sort((a, b) => cand.order.get(a) - cand.order.get(b));
+    results.push(realize(rk));
+  }
+  return results;
+  function weight(a, b) {
+    if (a.dummy && b.dummy) return W_DUMMY_DUMMY2;
+    if (a.dummy || b.dummy) return W_REAL_DUMMY2;
+    return W_REAL_REAL2;
+  }
+  function placeWithSeparation(ids, desired, gap) {
+    const n = ids.length;
+    if (n === 0) return;
+    const off = [0];
+    for (let i = 1; i < n; i++) off[i] = off[i - 1] + gap[i];
+    const d = desired.map((v, i) => v - off[i]);
+    const blocks = [];
+    for (let i = 0; i < n; i++) {
+      let b = { pos: d[i], count: 1, sumOffset: d[i], first: i };
+      while (blocks.length && blocks[blocks.length - 1].pos >= b.pos) {
+        const prev = blocks.pop();
+        const count = prev.count + b.count;
+        const sumOffset = prev.sumOffset + b.sumOffset;
+        b = { pos: sumOffset / count, count, sumOffset, first: prev.first };
+      }
+      blocks.push(b);
+    }
+    const xs = new Array(n);
+    for (const b of blocks)
+      for (let k = 0; k < b.count; k++) xs[b.first + k] = b.pos;
+    for (let i = 0; i < n; i++) node.get(ids[i]).cross = xs[i] + off[i];
+  }
+  function gapBetween(a, b) {
+    const base = a.thick / 2 + b.thick / 2 + NODESEP2;
+    if (a.dummy || b.dummy) return base;
+    if (a.unit !== b.unit) return base + 2 * GROUP_PAD + GROUP_GAP;
+    const da = a.path[a.path.length - 1];
+    const db = b.path[b.path.length - 1];
+    if (da !== db && (da || db)) return base + 2 * GROUP_PAD;
+    return base;
+  }
+  function realize(rk) {
+    const bandDepth = rk.map(
+      (ids) => Math.max(0, ...ids.map((id) => node.get(id).depth))
+    );
+    const bandCenter = [];
+    let acc = MARGIN4;
+    for (let r = 0; r <= maxRank; r++) {
+      if (r > 0) acc += RANKSEP2 + (tierStartRanks.has(r) ? TIER_GAP : 0);
+      bandCenter[r] = acc + bandDepth[r] / 2;
+      acc += bandDepth[r];
+    }
+    const gapsFor = (ids) => ids.map(
+      (id, i) => i === 0 ? 0 : gapBetween(node.get(ids[i - 1]), node.get(id))
+    );
+    for (let r = 0; r <= maxRank; r++) {
+      const ids = rk[r];
+      const gap = gapsFor(ids);
+      let x = MARGIN4;
+      for (let i = 0; i < ids.length; i++) {
+        const n = node.get(ids[i]);
+        x += gap[i];
+        n.cross = i === 0 ? MARGIN4 + n.thick / 2 : x;
+      }
+    }
+    const ITER = 18;
+    for (let it = 0; it < ITER; it++) {
+      const downPass = it % 2 === 0;
+      const order = downPass ? Array.from({ length: maxRank + 1 }, (_, i) => i) : Array.from({ length: maxRank + 1 }, (_, i) => maxRank - i);
+      for (const r of order) {
+        const ids = rk[r];
+        const desired = ids.map((id) => {
+          const n = node.get(id);
+          let sw = 0, sx2 = 0;
+          for (const nb of up.get(id)) {
+            const w = weight(n, node.get(nb));
+            sw += w;
+            sx2 += w * node.get(nb).cross;
+          }
+          for (const nb of down.get(id)) {
+            const w = weight(n, node.get(nb));
+            sw += w;
+            sx2 += w * node.get(nb).cross;
+          }
+          return sw > 0 ? sx2 / sw : n.cross;
+        });
+        placeWithSeparation(ids, desired, gapsFor(ids));
+      }
+    }
+    let minC = Infinity;
+    for (const n of node.values()) minC = Math.min(minC, n.cross - n.thick / 2);
+    const shiftC = MARGIN4 - minC;
+    for (const n of node.values()) n.cross += shiftC;
+    const coord = (n) => isTB ? { x: n.cross, y: bandCenter[n.rank] } : { x: bandCenter[n.rank], y: n.cross };
+    const layoutNodes = parsed.nodes.map((pn) => {
+      const n = node.get(pn.label);
+      const c = coord(n);
+      return {
+        label: pn.label,
+        x: c.x,
+        y: c.y,
+        width: n.realW,
+        height: n.realH
+      };
+    });
+    const chainById = /* @__PURE__ */ new Map();
+    for (const ch of chains) chainById.set(ch.edgeIdx, ch.chain);
+    let minCross = Infinity, maxCross = -Infinity;
+    for (const n of node.values()) {
+      if (n.dummy) continue;
+      minCross = Math.min(minCross, n.cross - n.thick / 2);
+      maxCross = Math.max(maxCross, n.cross + n.thick / 2);
+    }
+    const GAP = 34;
+    const LANE = 28;
+    const faceLim = (depth) => Math.max(0, depth / 2 - 6);
+    const sideOf = (b) => {
+      const d = node.get(b.src).cross - node.get(b.tgt).cross;
+      return d >= 0 ? 1 : -1;
+    };
+    const backSorted = backEdges.map((b) => ({
+      ...b,
+      side: sideOf(b),
+      span: Math.abs(node.get(b.src).rank - node.get(b.tgt).rank)
+    })).sort((a, b) => a.side - b.side || a.span - b.span);
+    const sideCounts = /* @__PURE__ */ new Map();
+    for (const b of backSorted)
+      sideCounts.set(b.side, (sideCounts.get(b.side) ?? 0) + 1);
+    const laneCounter = /* @__PURE__ */ new Map();
+    const backPoints = /* @__PURE__ */ new Map();
+    for (const b of backSorted) {
+      const s = b.side;
+      const k = laneCounter.get(s) ?? 0;
+      laneCounter.set(s, k + 1);
+      const K = sideCounts.get(s);
+      const src = node.get(b.src);
+      const tgt = node.get(b.tgt);
+      const laneC = s > 0 ? maxCross + GAP + k * LANE : minCross - GAP - k * LANE;
+      const srcCtr = bandCenter[src.rank];
+      const tgtCtr = bandCenter[tgt.rank];
+      const frac = K > 1 ? (k + 1) / (K + 1) : 0;
+      const srcR = srcCtr - frac * faceLim(src.depth);
+      const tgtR = tgtCtr + frac * faceLim(tgt.depth);
+      const m = (c, rr) => isTB ? { x: c, y: rr } : { x: rr, y: c };
+      const off = 10;
+      const srcEdgeC = src.cross + s * (src.thick / 2 + off);
+      const tgtEdgeC = tgt.cross + s * (tgt.thick / 2 + off);
+      backPoints.set(b.edgeIdx, [
+        m(src.cross, srcCtr),
+        m(srcEdgeC, srcR),
+        m(laneC, srcR),
+        m(laneC, tgtR),
+        m(tgtEdgeC, tgtR),
+        m(tgt.cross, tgtCtr)
+      ]);
+    }
+    const flatPoints = /* @__PURE__ */ new Map();
+    for (const f of flatEdges) {
+      const a = node.get(f.a);
+      const b = node.get(f.b);
+      const ctr = bandCenter[a.rank];
+      const bow = ctr - (a.depth / 2 + 26);
+      const m = (c, rr) => isTB ? { x: c, y: rr } : { x: rr, y: c };
+      flatPoints.set(f.edgeIdx, [
+        m(a.cross, ctr),
+        m(a.cross, bow),
+        m(b.cross, bow),
+        m(b.cross, ctr)
+      ]);
+    }
+    const layoutEdges = [];
+    for (let i = 0; i < parsed.edges.length; i++) {
+      const e = parsed.edges[i];
+      if (!labelSet.has(e.source) || !labelSet.has(e.target)) continue;
+      let points;
+      if (e.source === e.target) {
+        const c = coord(node.get(e.source));
+        points = [c, c];
+      } else if (backPoints.has(i)) points = backPoints.get(i);
+      else if (flatPoints.has(i)) points = flatPoints.get(i);
+      else {
+        const chain = chainById.get(i);
+        if (!chain) continue;
+        points = chain.map((id) => coord(node.get(id)));
+      }
+      layoutEdges.push({
+        source: e.source,
+        target: e.target,
+        ...e.label !== void 0 && { label: e.label },
+        bidirectional: e.bidirectional,
+        lineNumber: e.lineNumber,
+        points,
+        yOffset: 0,
+        parallelCount: 1,
+        metadata: e.metadata
+      });
+    }
+    const nodeBox = new Map(
+      layoutNodes.map((n) => [
+        n.label,
+        {
+          l: n.x - n.width / 2,
+          r: n.x + n.width / 2,
+          t: n.y - n.height / 2,
+          b: n.y + n.height / 2
+        }
+      ])
+    );
+    const depthOf = (label) => {
+      let d = 0;
+      let cur = label;
+      const guard = /* @__PURE__ */ new Set();
+      while (cur && !guard.has(cur)) {
+        guard.add(cur);
+        cur = groupByLabel.get(cur)?.parentGroup;
+        if (cur) d++;
+      }
+      return d;
+    };
+    const childGroups = /* @__PURE__ */ new Map();
+    for (const g of parsed.groups)
+      if (g.parentGroup)
+        (childGroups.get(g.parentGroup) ?? childGroups.set(g.parentGroup, []).get(g.parentGroup)).push(g.label);
+    const rectByGroup = /* @__PURE__ */ new Map();
+    const ordered = [...parsed.groups].sort(
+      (a, b) => depthOf(b.label) - depthOf(a.label)
+    );
+    const layoutGroups = [];
+    for (const grp of ordered) {
+      let l = Infinity, r = -Infinity, t = Infinity, bm = -Infinity;
+      const acc2 = (box) => {
+        l = Math.min(l, box.l);
+        r = Math.max(r, box.r);
+        t = Math.min(t, box.t);
+        bm = Math.max(bm, box.b);
+      };
+      for (const c of grp.children) {
+        const nb = nodeBox.get(c);
+        if (nb) acc2(nb);
+      }
+      for (const sub of childGroups.get(grp.label) ?? []) {
+        const sr = rectByGroup.get(sub);
+        if (sr) acc2(sr);
+      }
+      if (!Number.isFinite(l)) continue;
+      const x0 = l - GROUP_PAD;
+      const x1 = r + GROUP_PAD;
+      const y0 = t - GROUP_LABEL_ZONE2;
+      const y1 = bm + GROUP_PAD;
+      rectByGroup.set(grp.label, { l: x0, r: x1, t: y0, b: y1 });
+      layoutGroups.push({
+        label: grp.label,
+        lineNumber: grp.lineNumber,
+        x: (x0 + x1) / 2,
+        y: (y0 + y1) / 2,
+        width: x1 - x0,
+        height: y1 - y0,
+        collapsed: false,
+        childCount: grp.children.length
+      });
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const ext = (x0, y0, x1, y1) => {
+      minX = Math.min(minX, x0);
+      minY = Math.min(minY, y0);
+      maxX = Math.max(maxX, x1);
+      maxY = Math.max(maxY, y1);
+    };
+    for (const n of layoutNodes)
+      ext(
+        n.x - n.width / 2,
+        n.y - n.height / 2,
+        n.x + n.width / 2,
+        n.y + n.height / 2
+      );
+    for (const e of layoutEdges)
+      for (const p of e.points) ext(p.x, p.y, p.x, p.y);
+    for (const g of layoutGroups)
+      ext(
+        g.x - g.width / 2,
+        g.y - g.height / 2,
+        g.x + g.width / 2,
+        g.y + g.height / 2
+      );
+    const sx = MARGIN4 - minX;
+    const sy = MARGIN4 - minY;
+    const shift = sx !== 0 || sy !== 0;
+    return {
+      nodes: shift ? layoutNodes.map((n) => ({ ...n, x: n.x + sx, y: n.y + sy })) : layoutNodes,
+      edges: shift ? layoutEdges.map((e) => ({
+        ...e,
+        points: e.points.map((p) => ({ x: p.x + sx, y: p.y + sy }))
+      })) : layoutEdges,
+      groups: shift ? layoutGroups.map((g) => ({ ...g, x: g.x + sx, y: g.y + sy })) : layoutGroups,
+      width: maxX + sx + MARGIN4,
+      height: maxY + sy + MARGIN4
+    };
+  }
+}
+var NODESEP2, RANKSEP2, DUMMY_THICK2, MARGIN4, GROUP_PAD, GROUP_LABEL_ZONE2, GROUP_GAP, TIER_GAP, W_REAL_REAL2, W_REAL_DUMMY2, W_DUMMY_DUMMY2;
+var init_layout_grouped = __esm({
+  "src/boxes-and-lines/layout-grouped.ts"() {
+    "use strict";
+    init_layout5();
+    NODESEP2 = 50;
+    RANKSEP2 = 60;
+    DUMMY_THICK2 = 10;
+    MARGIN4 = 40;
+    GROUP_PAD = 16;
+    GROUP_LABEL_ZONE2 = 32;
+    GROUP_GAP = 24;
+    TIER_GAP = GROUP_LABEL_ZONE2 + 2 * GROUP_PAD;
+    W_REAL_REAL2 = 1;
+    W_REAL_DUMMY2 = 2;
+    W_DUMMY_DUMMY2 = 8;
+  }
+});
+
 // src/boxes-and-lines/layout-search.ts
 var layout_search_exports = {};
 __export(layout_search_exports, {
@@ -30191,7 +30918,7 @@ __export(layout_search_exports, {
   layoutBoxesAndLinesSearch: () => layoutBoxesAndLinesSearch,
   separateGroupBands: () => separateGroupBands
 });
-function rng2(s) {
+function rng3(s) {
   return () => {
     s |= 0;
     s = s + 1831565813 | 0;
@@ -30546,7 +31273,7 @@ function detectGroupOverlaps(layout, opts) {
   const contains = (outer, inner) => outer.l <= inner.l + margin && outer.r >= inner.r - margin && outer.t <= inner.t + margin && outer.b >= inner.b - margin;
   const rend = raw.map((a, i) => {
     const parent = raw.some((b, j) => j !== i && contains(a, b));
-    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE2 } : a;
+    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE3 } : a;
   });
   const hit = /* @__PURE__ */ new Set();
   for (let i = 0; i < raw.length; i++)
@@ -30573,7 +31300,7 @@ function countGroupOverlaps(layout, opts) {
   const contains = (outer, inner) => outer.l <= inner.l + margin && outer.r >= inner.r - margin && outer.t <= inner.t + margin && outer.b >= inner.b - margin;
   const rend = raw.map((a, i) => {
     const parent = raw.some((b, j) => j !== i && contains(a, b));
-    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE2 } : a;
+    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE3 } : a;
   });
   let count = 0;
   for (let i = 0; i < raw.length; i++)
@@ -30616,7 +31343,7 @@ function separateGroupBands(layout, parsed) {
     let lo = (axis === "y" ? g.y : g.x) - half2;
     const hi = (axis === "y" ? g.y : g.x) + half2;
     const isParent = parsed.groups.some((c) => c.parentGroup === label);
-    if (axis === "y" && isParent) lo -= GROUP_LABEL_ZONE2;
+    if (axis === "y" && isParent) lo -= GROUP_LABEL_ZONE3;
     return { label, lo, hi, c: (lo + hi) / 2 };
   });
   bands.sort((a, b) => a.c - b.c);
@@ -30687,7 +31414,7 @@ function separateGroupBands(layout, parsed) {
     acc(n.x + n.width / 2, n.y + n.height / 2);
   }
   for (const g of groups) {
-    acc(g.x - g.width / 2, g.y - g.height / 2 - GROUP_LABEL_ZONE2);
+    acc(g.x - g.width / 2, g.y - g.height / 2 - GROUP_LABEL_ZONE3);
     acc(g.x + g.width / 2, g.y + g.height / 2);
   }
   for (const e of edges) for (const p of e.points) acc(p.x, p.y);
@@ -30951,7 +31678,7 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
         }
       ];
     });
-    const GROUP_PAD = 16;
+    const GROUP_PAD2 = 16;
     const nodeByLabel = new Map(nodes.map((n2) => [n2.label, n2]));
     const groups = [];
     for (const grp of parsed.groups) {
@@ -30965,10 +31692,10 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
         gy1 = Math.max(gy1, n2.y + n2.height / 2);
       }
       if (!Number.isFinite(gx0)) continue;
-      const x0 = gx0 - GROUP_PAD;
-      const x1 = gx1 + GROUP_PAD;
-      const y0 = gy0 - GROUP_LABEL_ZONE2;
-      const y1 = gy1 + GROUP_PAD;
+      const x0 = gx0 - GROUP_PAD2;
+      const x1 = gx1 + GROUP_PAD2;
+      const y0 = gy0 - GROUP_LABEL_ZONE3;
+      const y1 = gy1 + GROUP_PAD2;
       groups.push({
         label: grp.label,
         lineNumber: grp.lineNumber,
@@ -31025,7 +31752,7 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     };
   }
   function place(cfg) {
-    const r = cfg.seed === void 0 ? null : rng2(cfg.seed + 1);
+    const r = cfg.seed === void 0 ? null : rng3(cfg.seed + 1);
     const ord = (a) => r ? shuffle(a, r) : a.slice();
     const g = new import_dagre4.default.graphlib.Graph({ compound: true, multigraph: true });
     g.setGraph({
@@ -31212,8 +31939,15 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     layered = layeredCandidates(parsed, sizes);
   } catch {
   }
+  if (parsed.groups.length > 0 && collapsedGroupLabels.size === 0) {
+    try {
+      layered = layered.concat(groupedTierCandidates(parsed, sizes));
+    } catch {
+    }
+  }
   const fastKey = /* @__PURE__ */ new Map();
-  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);
   let best = pool[0];
@@ -31278,7 +32012,7 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   }
   return best;
 }
-var import_dagre4, import_d3_shape, DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, splineGen, PATH_TOKEN_RE, FLAT_CACHE, GROUP_LABEL_ZONE2;
+var import_dagre4, import_d3_shape, DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, splineGen, PATH_TOKEN_RE, FLAT_CACHE, GROUP_LABEL_ZONE3;
 var init_layout_search = __esm({
   "src/boxes-and-lines/layout-search.ts"() {
     "use strict";
@@ -31286,6 +32020,7 @@ var init_layout_search = __esm({
     import_d3_shape = require("d3-shape");
     init_layout5();
     init_layout_layered();
+    init_layout_grouped();
     DEFAULT_LAMBDA = 4;
     ESCALATE_THRESHOLD = 4;
     ESCALATE_MAX_N = 45;
@@ -31294,7 +32029,7 @@ var init_layout_search = __esm({
     splineGen = (0, import_d3_shape.line)().x((d) => d.x).y((d) => d.y).curve(import_d3_shape.curveBasis);
     PATH_TOKEN_RE = /[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi;
     FLAT_CACHE = /* @__PURE__ */ new WeakMap();
-    GROUP_LABEL_ZONE2 = 32;
+    GROUP_LABEL_ZONE3 = 32;
   }
 });
 
@@ -31471,8 +32206,8 @@ function attachNotes(layout, parsed, collapsedNotes) {
     nodes: finalNodes,
     edges: finalEdges,
     groups: finalGroups,
-    width: bbMaxX + shiftX + MARGIN4,
-    height: bbMaxY + shiftY + MARGIN4
+    width: bbMaxX + shiftX + MARGIN5,
+    height: bbMaxY + shiftY + MARGIN5
   };
 }
 function applyParallelEdgeOffsets(layout) {
@@ -31505,13 +32240,13 @@ function applyParallelEdgeOffsets(layout) {
     }))
   };
 }
-var MARGIN4, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP4, MAX_DESC_LINES2, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
+var MARGIN5, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP4, MAX_DESC_LINES2, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
 var init_layout5 = __esm({
   "src/boxes-and-lines/layout.ts"() {
     "use strict";
     init_text_measure();
     init_notes();
-    MARGIN4 = 40;
+    MARGIN5 = 40;
     MAX_PARALLEL_EDGES = 5;
     PARALLEL_SPACING = 22;
     PHI = 1.618;
@@ -31682,7 +32417,7 @@ function layoutMindmap(parsed, _palette, options) {
     leafWidth: ctx.structural(LEAF_WIDTH),
     hGap: ctx.aesthetic(H_GAP2),
     vGap: ctx.aesthetic(V_GAP2),
-    margin: ctx.aesthetic(MARGIN5),
+    margin: ctx.aesthetic(MARGIN6),
     multiRootGap: ctx.aesthetic(MULTI_ROOT_GAP)
   };
   populateDepthCache(roots);
@@ -32060,7 +32795,7 @@ function populateDepthCache(roots) {
   };
   walk(roots, 0);
 }
-var ROOT_WIDTH, DEPTH1_WIDTH, LEAF_WIDTH, SINGLE_LABEL_HEIGHT, LABEL_LINE_HEIGHT2, DESC_LINE_HEIGHT3, NODE_V_PAD, H_GAP2, V_GAP2, MARGIN5, MULTI_ROOT_GAP, nodeDepthCache;
+var ROOT_WIDTH, DEPTH1_WIDTH, LEAF_WIDTH, SINGLE_LABEL_HEIGHT, LABEL_LINE_HEIGHT2, DESC_LINE_HEIGHT3, NODE_V_PAD, H_GAP2, V_GAP2, MARGIN6, MULTI_ROOT_GAP, nodeDepthCache;
 var init_layout6 = __esm({
   "src/mindmap/layout.ts"() {
     "use strict";
@@ -32076,7 +32811,7 @@ var init_layout6 = __esm({
     NODE_V_PAD = 10;
     H_GAP2 = 40;
     V_GAP2 = 12;
-    MARGIN5 = 40;
+    MARGIN6 = 40;
     MULTI_ROOT_GAP = 60;
     nodeDepthCache = /* @__PURE__ */ new Map();
   }
@@ -32333,7 +33068,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
     );
     const nodeG = mainG.append("g").attr("class", "mindmap-node").attr("data-line-number", node.lineNumber);
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const metaValue = node.metadata[tagKey];
       if (metaValue) {
         nodeG.attr(`data-tag-${tagKey}`, metaValue.toLowerCase());
@@ -32452,6 +33187,7 @@ var d3Selection12, DIAGRAM_PADDING7, TITLE_HEIGHT4, SINGLE_LABEL_HEIGHT2, LABEL_
 var init_renderer7 = __esm({
   "src/mindmap/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection12 = __toESM(require("d3-selection"), 1);
     init_fonts();
     init_export_container();
@@ -33662,7 +34398,7 @@ function resolveNodeColor4(el, tagGroups, activeGroupName, ancestors) {
     (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
   );
   if (!group) return void 0;
-  const key = group.name.toLowerCase();
+  const key = tagAttrKey(group.name);
   let metaValue = el.metadata[key];
   if (!metaValue && ancestors) {
     for (const ancestor of ancestors) {
@@ -33864,8 +34600,8 @@ function layoutC4Context(parsed, activeTagGroup) {
     }
   }
   if (nodes.length > 0) {
-    const shiftX = MARGIN6 - minX;
-    const shiftY = MARGIN6 - minY;
+    const shiftX = MARGIN7 - minX;
+    const shiftY = MARGIN7 - minY;
     for (const node of nodes) {
       node.x += shiftX;
       node.y += shiftY;
@@ -33877,12 +34613,12 @@ function layoutC4Context(parsed, activeTagGroup) {
       }
     }
   }
-  let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN6 * 2 : 0;
-  let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN6 * 2 : 0;
+  let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN7 * 2 : 0;
+  let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN7 * 2 : 0;
   const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN6;
-    let legendX = MARGIN6;
+    const legendY = totalHeight + MARGIN7;
+    let legendX = MARGIN7;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -34214,8 +34950,8 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN6 - minX;
-  const shiftY = MARGIN6 - minY;
+  const shiftX = MARGIN7 - minX;
+  const shiftY = MARGIN7 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -34232,12 +34968,12 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN6 * 2;
-  let totalHeight = maxY - minY + MARGIN6 * 2;
+  let totalWidth = maxX - minX + MARGIN7 * 2;
+  let totalHeight = maxY - minY + MARGIN7 * 2;
   const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN6;
-    let legendX = MARGIN6;
+    const legendY = totalHeight + MARGIN7;
+    let legendX = MARGIN7;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -34629,8 +35365,8 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN6 - minX;
-  const shiftY = MARGIN6 - minY;
+  const shiftX = MARGIN7 - minX;
+  const shiftY = MARGIN7 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -34647,12 +35383,12 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN6 * 2;
-  let totalHeight = maxY - minY + MARGIN6 * 2;
+  let totalWidth = maxX - minX + MARGIN7 * 2;
+  let totalHeight = maxY - minY + MARGIN7 * 2;
   const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN6;
-    let legendX = MARGIN6;
+    const legendY = totalHeight + MARGIN7;
+    let legendX = MARGIN7;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -34940,8 +35676,8 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN6 - minX;
-  const shiftY = MARGIN6 - minY;
+  const shiftX = MARGIN7 - minX;
+  const shiftY = MARGIN7 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -34956,12 +35692,12 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN6 * 2;
-  let totalHeight = maxY - minY + MARGIN6 * 2;
+  let totalWidth = maxX - minX + MARGIN7 * 2;
+  let totalHeight = maxY - minY + MARGIN7 * 2;
   const legendGroups = computeLegendGroups3(parsed.tagGroups);
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN6;
-    let legendX = MARGIN6;
+    const legendY = totalHeight + MARGIN7;
+    let legendX = MARGIN7;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -34981,10 +35717,11 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     height: totalHeight
   };
 }
-var import_dagre5, gNode, gEdge, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, NAME_FONT_SIZE, DESC_LINE_HEIGHT5, DESC_FONT_SIZE4, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT4, META_FONT_SIZE4, MARGIN6, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
+var import_dagre5, gNode, gEdge, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, NAME_FONT_SIZE, DESC_LINE_HEIGHT5, DESC_FONT_SIZE4, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT4, META_FONT_SIZE4, MARGIN7, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout8 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
+    init_tag_groups();
     import_dagre5 = __toESM(require("@dagrejs/dagre"), 1);
     init_legend_constants();
     init_text_measure();
@@ -35002,7 +35739,7 @@ var init_layout8 = __esm({
     CARD_H_PAD3 = 20;
     META_LINE_HEIGHT4 = 16;
     META_FONT_SIZE4 = 11;
-    MARGIN6 = 40;
+    MARGIN7 = 40;
     BOUNDARY_PAD = 40;
     GROUP_BOUNDARY_PAD = 24;
     EDGE_NODE_COLLISION_WEIGHT = 5e3;
@@ -35157,7 +35894,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).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());
@@ -35716,7 +36453,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "c4-card").attr("data-line-number", String(node.lineNumber)).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());
@@ -35980,6 +36717,7 @@ var d3Selection14, d3Shape6, DIAGRAM_PADDING8, MAX_SCALE5, TITLE_HEIGHT6, TYPE_F
 var init_renderer9 = __esm({
   "src/c4/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection14 = __toESM(require("d3-selection"), 1);
     d3Shape6 = __toESM(require("d3-shape"), 1);
     init_fonts();
@@ -38044,7 +38782,7 @@ function separateGroups(groups, nodes, isLR, maxIterations = 20) {
         const crossOverlap = isLR ? Math.min(ga.x + ga.width, gb.x + gb.width) - Math.max(ga.x, gb.x) : Math.min(ga.y + ga.height, gb.y + gb.height) - Math.max(ga.y, gb.y);
         if (crossOverlap <= 0) continue;
         anyOverlap = true;
-        const shift = primaryOverlap + GROUP_GAP;
+        const shift = primaryOverlap + GROUP_GAP2;
         const aCenter = isLR ? ga.y + ga.height / 2 : ga.x + ga.width / 2;
         const bCenter = isLR ? gb.y + gb.height / 2 : gb.x + gb.width / 2;
         const groupToShift = aCenter <= bCenter ? gb : ga;
@@ -38338,7 +39076,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     height: totalHeight
   };
 }
-var import_dagre7, MIN_NODE_WIDTH2, NODE_HEADER_HEIGHT, META_LINE_HEIGHT5, NODE_SEPARATOR_GAP, NODE_PAD_BOTTOM, ROLE_DOT_ROW, COLLAPSE_BAR_HEIGHT3, NODE_FONT_SIZE3, META_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, PADDING_X3, GROUP_PADDING2, GROUP_HEADER_HEIGHT, EDGE_MARGIN, DISPLAY_KEYS, DISPLAY_NAMES, GROUP_GAP;
+var import_dagre7, MIN_NODE_WIDTH2, NODE_HEADER_HEIGHT, META_LINE_HEIGHT5, NODE_SEPARATOR_GAP, NODE_PAD_BOTTOM, ROLE_DOT_ROW, COLLAPSE_BAR_HEIGHT3, NODE_FONT_SIZE3, META_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, PADDING_X3, GROUP_PADDING2, GROUP_HEADER_HEIGHT, EDGE_MARGIN, DISPLAY_KEYS, DISPLAY_NAMES, GROUP_GAP2;
 var init_layout10 = __esm({
   "src/infra/layout.ts"() {
     "use strict";
@@ -38394,7 +39132,7 @@ var init_layout10 = __esm({
       "retention-hours": "retention",
       partitions: "partitions"
     };
-    GROUP_GAP = GROUP_PADDING2 * 2 + GROUP_HEADER_HEIGHT;
+    GROUP_GAP2 = GROUP_PADDING2 * 2 + GROUP_HEADER_HEIGHT;
   }
 });
 
@@ -39201,7 +39939,7 @@ function resolveActiveTagStroke(node, activeGroup, tagGroups, palette) {
     (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(
@@ -39530,7 +40268,7 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
     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 + pillWidth2 + 4 + entriesWidth2,
       minifiedWidth: pillWidth2
@@ -39578,7 +40316,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
   });
   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()}"]`
@@ -39801,6 +40539,7 @@ var d3Selection16, d3Shape8, NODE_FONT_SIZE4, META_FONT_SIZE6, META_LINE_HEIGHT6
 var init_renderer10 = __esm({
   "src/infra/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection16 = __toESM(require("d3-selection"), 1);
     d3Shape8 = __toESM(require("d3-shape"), 1);
     init_fonts();
@@ -39899,17 +40638,17 @@ function mulberry32(seed) {
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
-function standardNormal(rng3) {
+function standardNormal(rng4) {
   let u = 0;
   let v = 0;
-  while (u === 0) u = rng3();
-  while (v === 0) v = rng3();
+  while (u === 0) u = rng4();
+  while (v === 0) v = rng4();
   return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
 }
-function gamma(shape, rng3) {
+function gamma(shape, rng4) {
   if (shape < 1) {
-    const u = rng3();
-    return gamma(shape + 1, rng3) * Math.pow(u, 1 / shape);
+    const u = rng4();
+    return gamma(shape + 1, rng4) * Math.pow(u, 1 / shape);
   }
   const d = shape - 1 / 3;
   const c = 1 / Math.sqrt(9 * d);
@@ -39917,29 +40656,29 @@ function gamma(shape, rng3) {
     let x;
     let v;
     do {
-      x = standardNormal(rng3);
+      x = standardNormal(rng4);
       v = 1 + c * x;
     } while (v <= 0);
     v = v * v * v;
-    const u = rng3();
+    const u = rng4();
     if (u < 1 - 0.0331 * x * x * x * x) return d * v;
     if (Math.log(u) < x * x / 2 + d * (1 - v + Math.log(v))) return d * v;
   }
 }
-function sampleBeta(alpha, beta, rng3) {
-  const x = gamma(alpha, rng3);
-  const y = gamma(beta, rng3);
+function sampleBeta(alpha, beta, rng4) {
+  const x = gamma(alpha, rng4);
+  const y = gamma(beta, rng4);
   return x / (x + y);
 }
-function sampleBetaPert(o, m, p, rng3) {
+function sampleBetaPert(o, m, p, rng4) {
   if (o === p) return m;
   const range = p - o;
   const alpha = 1 + 4 * (m - o) / range;
   const beta = 1 + 4 * (p - m) / range;
-  return o + sampleBeta(alpha, beta, rng3) * range;
+  return o + sampleBeta(alpha, beta, rng4) * range;
 }
 function simulate(resolved, expanded, _predecessors, _successors, topo, terminals, poisoned, opts) {
-  const rng3 = mulberry32(opts.seed);
+  const rng4 = mulberry32(opts.seed);
   const expById = /* @__PURE__ */ new Map();
   for (const e of expanded) expById.set(e.id, e);
   const completionTimes = new Array(opts.trials);
@@ -39962,7 +40701,7 @@ function simulate(resolved, expanded, _predecessors, _successors, topo, terminal
       } else if (exp.o === exp.p) {
         duration = exp.m;
       } else {
-        duration = sampleBetaPert(exp.o, exp.m, exp.p, rng3);
+        duration = sampleBetaPert(exp.o, exp.m, exp.p, rng4);
       }
       let esLower = 0;
       let efLower = -Infinity;
@@ -44247,7 +44986,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(containerWidth, idealWidth);
   const sBarH = ctx.structural(BAR_H);
   const sRowGap = ctx.structural(ROW_GAP);
-  const sGroupGap = ctx.structural(GROUP_GAP2);
+  const sGroupGap = ctx.structural(GROUP_GAP3);
   const sMilestoneSize = ctx.structural(MILESTONE_SIZE);
   const sBottomMargin = ctx.aesthetic(BOTTOM_MARGIN);
   const sRightMargin = ctx.aesthetic(RIGHT_MARGIN);
@@ -44419,7 +45158,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
       (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;
@@ -45160,7 +45899,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
   const usedValues = /* @__PURE__ */ new Map();
   if (resolvedTasks) {
     for (const group of visibleGroups) {
-      const key = group.name.toLowerCase();
+      const key = tagAttrKey(group.name);
       const used = /* @__PURE__ */ new Set();
       for (const rt of resolvedTasks) {
         const val = rt.effectiveMetadata[key];
@@ -45171,7 +45910,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
   }
   const filteredEntries = /* @__PURE__ */ new Map();
   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(
@@ -45192,7 +45931,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     const pillW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD + iconReserve;
     let groupW = pillW;
     if (isActive) {
-      const entries = filteredEntries.get(group.name.toLowerCase()) ?? group.entries;
+      const entries = filteredEntries.get(tagAttrKey(group.name)) ?? group.entries;
       let entriesW = 0;
       for (const entry of entries) {
         entriesW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
@@ -45249,7 +45988,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
       },
       ...onControlsToggle !== void 0 && { onControlsToggle },
       onEntryHover: (groupName, entryValue) => {
-        const tagKey = groupName.toLowerCase();
+        const tagKey = tagAttrKey(groupName);
         if (entryValue) {
           const ev = entryValue.toLowerCase();
           chartG.selectAll(".gantt-task").each(function() {
@@ -45939,7 +46678,7 @@ function buildTagLaneRowList(resolved, swimlaneGroup, collapsedLanes) {
     (g) => g.name.toLowerCase() === swimlaneGroup.toLowerCase()
   );
   if (!tagGroup) return null;
-  const tagKey = tagGroup.name.toLowerCase();
+  const tagKey = tagAttrKey(tagGroup.name);
   const rows = [];
   const buckets = /* @__PURE__ */ new Map();
   const unbucketed = [];
@@ -46123,10 +46862,11 @@ function renderTimeScaleHorizontal(g, scale, _innerWidth, innerHeight, textColor
     g.append("text").attr("class", "gantt-scale-tick").attr("x", tick.pos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", textColor).attr("opacity", opacity).text(tick.label);
   }
 }
-var d3Scale5, d3Selection18, BAR_H, ROW_GAP, GROUP_GAP2, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, LABEL_PAD2, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY;
+var d3Scale5, d3Selection18, BAR_H, ROW_GAP, GROUP_GAP3, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, LABEL_PAD2, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY;
 var init_renderer12 = __esm({
   "src/gantt/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Scale5 = __toESM(require("d3-scale"), 1);
     d3Selection18 = __toESM(require("d3-selection"), 1);
     init_fonts();
@@ -46143,7 +46883,7 @@ var init_renderer12 = __esm({
     init_title_constants();
     BAR_H = 22;
     ROW_GAP = 6;
-    GROUP_GAP2 = 14;
+    GROUP_GAP3 = 14;
     MILESTONE_SIZE = 10;
     MIN_LEFT_MARGIN = 120;
     BOTTOM_MARGIN = 40;
@@ -48216,7 +48956,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const panelWidth = 280;
     const textAreaWidth = panelWidth - silhouetteZone - CARD_PADDING_X3;
     const descLineH = 14;
-    const descLines = parsed.persona.description ? wrapText2(parsed.persona.description, textAreaWidth, FONT_SIZE_META) : [];
+    const descLines = parsed.persona.description ? wrapNoteBody(parsed.persona.description, textAreaWidth, FONT_SIZE_META) : [];
     const descRowH = descLines.length > 0 ? descLines.length * descLineH + 8 : 0;
     const panelHeight = titleRowH + descRowH;
     const panelX = layout.totalWidth - PADDING2 - panelWidth;
@@ -48241,8 +48981,14 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH2);
     personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y3 + FONT_SIZE_STEP).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onPersonaText).text(parsed.persona.name);
     for (let li = 0; li < descLines.length; li++) {
-      const lineEl = personaG.append("text").attr("x", textX).attr("y", panelY + titleRowH + descLineH * (li + 1)).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText);
-      renderInlineText(lineEl, descLines[li], palette, FONT_SIZE_META);
+      const line11 = descLines[li];
+      const indent = line11.kind === "plain" ? 0 : NOTE_BULLET_INDENT;
+      const lineY = panelY + titleRowH + descLineH * (li + 1);
+      if (line11.kind === "bullet-first") {
+        personaG.append("text").attr("x", textX).attr("y", lineY).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText).text("\u2022");
+      }
+      const lineEl = personaG.append("text").attr("x", textX + indent).attr("y", lineY).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText);
+      renderInlineText(lineEl, line11.text, palette, FONT_SIZE_META);
     }
     if (onNavigateToLine) {
       personaG.style("cursor", "pointer").on("click", () => {
@@ -48281,7 +49027,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             return;
           }
           const isScore = groupName === "Score";
-          const attrName = isScore ? "data-score" : `data-tag-${groupName.toLowerCase()}`;
+          const attrName = isScore ? "data-score" : `data-tag-${tagAttrKey(groupName)}`;
           const matches = (el) => el.getAttribute(attrName) === entryValue;
           svg.selectAll(".journey-step").each(function() {
             const hit = matches(this);
@@ -48762,7 +49508,7 @@ function resolveStepColor(step, scoreColor, activeGroup, tagGroups, _palette) {
     (g) => g.name.toLowerCase() === activeGroup.toLowerCase()
   );
   if (!group) return void 0;
-  const tagValue = step.tags[group.name.toLowerCase()];
+  const tagValue = step.tags[tagAttrKey(group.name)];
   if (!tagValue) return void 0;
   const entry = group.entries.find(
     (e) => e.value.toLowerCase() === tagValue.toLowerCase()
@@ -48977,6 +49723,7 @@ var d3, d3Shape10, DIAGRAM_PADDING13, PADDING2, CARD_PADDING_X3, CARD_PADDING_Y3
 var init_renderer14 = __esm({
   "src/journey-map/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3 = __toESM(require("d3-selection"), 1);
     d3Shape10 = __toESM(require("d3-shape"), 1);
     init_color_utils();
@@ -48984,6 +49731,7 @@ var init_renderer14 = __esm({
     init_parser23();
     init_layout13();
     init_inline_markdown();
+    init_note_box();
     init_legend_integration();
     init_tag_groups();
     init_scaling();
@@ -51807,7 +52555,7 @@ function layoutMap(resolvedIn, data, size, opts) {
       (g) => g.name.toLowerCase() === groupName.toLowerCase()
     );
     if (!group) return null;
-    const val = tags[group.name.toLowerCase()] ?? group.defaultValue;
+    const val = tags[tagAttrKey(group.name)] ?? group.defaultValue;
     if (!val) return null;
     const entry = group.entries.find(
       (e) => e.value.toLowerCase() === val.toLowerCase()
@@ -52421,7 +53169,7 @@ function layoutMap(resolvedIn, data, size, opts) {
     if (directHex)
       return { fill: directHex, stroke: mix(directHex, palette.text, 18) };
     for (const group of resolved.tagGroups) {
-      const val = p.tags[group.name.toLowerCase()];
+      const val = p.tags[tagAttrKey(group.name)];
       if (!val) continue;
       const entry = group.entries.find(
         (e) => e.value.toLowerCase() === val.toLowerCase()
@@ -52436,7 +53184,7 @@ function layoutMap(resolvedIn, data, size, opts) {
   };
   const lineColor = (tags) => {
     for (const group of resolved.tagGroups) {
-      const val = tags[group.name.toLowerCase()];
+      const val = tags[tagAttrKey(group.name)];
       if (!val) continue;
       const entry = group.entries.find(
         (e) => e.value.toLowerCase() === val.toLowerCase()
@@ -53702,6 +54450,7 @@ var import_d3_geo2, import_topojson_client2, FIT_PAD, PATH_DIGITS, THIN_TOL, ALB
 var init_layout15 = __esm({
   "src/map/layout.ts"() {
     "use strict";
+    init_tag_groups();
     import_d3_geo2 = require("d3-geo");
     import_topojson_client2 = require("topojson-client");
     init_color_utils();
@@ -56118,7 +56867,7 @@ function resolveSequenceTags(parsed, activeTagGroup) {
     }
     return result;
   }
-  const groupKey = group.name.toLowerCase();
+  const groupKey = tagAttrKey(group.name);
   const participantMeta = /* @__PURE__ */ new Map();
   for (const p of parsed.participants) {
     participantMeta.set(p.id, { ...p.metadata || {} });
@@ -56154,6 +56903,7 @@ function resolveSequenceTags(parsed, activeTagGroup) {
 var init_tag_resolution = __esm({
   "src/sequence/tag-resolution.ts"() {
     "use strict";
+    init_tag_groups();
   }
 });
 
@@ -56628,7 +57378,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   }
   const getTagColor = (value) => value ? tagValueToColor.get(value.toLowerCase()) : void 0;
-  const tagKey = activeTagGroup?.toLowerCase();
+  const tagKey = activeTagGroup ? tagAttrKey(activeTagGroup) : void 0;
   const hiddenMsgIndices = /* @__PURE__ */ new Set();
   if (collapsedSections && collapsedSections.size > 0) {
     const sectionGroups = groupMessagesBySection(elements, messages);
@@ -57220,11 +57970,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxH = sBoxH + GROUP_PADDING_TOP2 + GROUP_PADDING_BOTTOM2;
     const groupTagValue = tagKey && group.metadata?.[tagKey];
     const groupTagColor = getTagColor(groupTagValue || void 0);
-    const fillColor = groupTagColor ? mix(
-      groupTagColor,
-      themeBaseBg(palette, isDark),
-      isDark ? 15 : 20
-    ) : isDark ? palette.surface : palette.bg;
+    const fillColor = groupTagColor ? mix(groupTagColor, themeBaseBg(palette, isDark), isDark ? 15 : 20) : isDark ? palette.surface : palette.bg;
     const strokeColor = groupTagColor || palette.textMuted;
     const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("cursor", "pointer");
     groupG.append("title").text("Click to collapse");
@@ -57274,11 +58020,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       );
       participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr("cursor", "pointer");
       participantG.append("title").text("Click to expand");
-      const pFill = effectiveTagColor ? mix(
-        effectiveTagColor,
-        themeBaseBg(palette, isDark),
-        isDark ? 30 : 40
-      ) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
+      const pFill = effectiveTagColor ? mix(effectiveTagColor, themeBaseBg(palette, isDark), isDark ? 30 : 40) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
       const pStroke = effectiveTagColor || palette.border;
       participantG.append("rect").attr("x", -boxW / 2).attr("y", -GROUP_PADDING_TOP2).attr("width", boxW).attr("height", fullH).attr("rx", 6).attr("fill", pFill).attr("stroke", pStroke).attr("stroke-width", 1.5);
       participantG.append("text").attr("x", 0).attr("y", -GROUP_PADDING_TOP2 + fullH / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", ctx.text(13)).attr("font-weight", 500).text(participant.label);
@@ -57774,6 +58516,7 @@ var d3Selection27, PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGH
 var init_renderer20 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection27 = __toESM(require("d3-selection"), 1);
     init_color_utils();
     init_inline_markdown();
@@ -58943,6 +59686,7 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
 init_parser3();
 
 // src/timeline/renderer.ts
+init_tag_groups();
 var d3Scale3 = __toESM(require("d3-scale"), 1);
 var d3Selection3 = __toESM(require("d3-selection"), 1);
 init_fonts();
@@ -59207,7 +59951,7 @@ function setupTimeline(container, parsed, palette, isDark, exportDims, activeTag
   });
   let tagLanes = null;
   if (resolvedSwimlaneTG) {
-    const tagKey = resolvedSwimlaneTG.toLowerCase();
+    const tagKey = tagAttrKey(resolvedSwimlaneTG);
     const tagGroup = parsed.timelineTagGroups.find(
       (g) => g.name.toLowerCase() === tagKey
     );
@@ -59513,7 +60257,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
           onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
         },
         onEntryHover: (groupName, entryValue) => {
-          const tagKey = groupName.toLowerCase();
+          const tagKey = tagAttrKey(groupName);
           if (entryValue) {
             const tagVal = entryValue.toLowerCase();
             fadeToTagValue(mainG, tagKey, tagVal);
@@ -59532,7 +60276,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
           }
         },
         onGroupRendered: (groupName, groupEl, isActive) => {
-          const groupKey = groupName.toLowerCase();
+          const groupKey = tagAttrKey(groupName);
           groupEl.attr("data-tag-group", groupKey);
           if (isActive && !viewMode) {
             const isSwimActive = currentSwimlaneGroup?.toLowerCase() === groupKey;
@@ -63254,7 +63998,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.32.0";
+var VERSION = "0.33.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "slate",