@diagrammo/dgmo 0.32.1 → 0.34.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();
@@ -29006,63 +29044,6 @@ function ensureArrowMarkers(defs, colors) {
     ).attr("fill", color);
   }
 }
-function edgePolylineMidpoint(points) {
-  if (points.length === 0) return { x: 0, y: 0 };
-  if (points.length === 1) return { x: points[0].x, y: points[0].y };
-  let total = 0;
-  const segLen = [];
-  for (let k = 1; k < points.length; k++) {
-    const len = Math.hypot(
-      points[k].x - points[k - 1].x,
-      points[k].y - points[k - 1].y
-    );
-    segLen.push(len);
-    total += len;
-  }
-  let half = total / 2;
-  for (let k = 1; k < points.length; k++) {
-    const len = segLen[k - 1];
-    if (half <= len || k === points.length - 1) {
-      const t = len === 0 ? 0 : Math.min(1, half / len);
-      return {
-        x: points[k - 1].x + (points[k].x - points[k - 1].x) * t,
-        y: points[k - 1].y + (points[k].y - points[k - 1].y) * t
-      };
-    }
-    half -= len;
-  }
-  const last = points[points.length - 1];
-  return { x: last.x, y: last.y };
-}
-function resolveEdgeLabelOverlaps(labels) {
-  const MAX_PASSES = 8;
-  const PAD = 4;
-  for (let pass = 0; pass < MAX_PASSES; pass++) {
-    let moved = false;
-    for (let i = 0; i < labels.length; i++) {
-      for (let j = i + 1; j < labels.length; j++) {
-        const a = labels[i];
-        const b = labels[j];
-        const dx = Math.abs(a.x - b.x);
-        const dy = Math.abs(a.y - b.y);
-        const overlapX = (a.width + b.width) / 2 + PAD - dx;
-        const overlapY = (a.height + b.height) / 2 + PAD - dy;
-        if (overlapX > 0 && overlapY > 0) {
-          const shift = overlapY / 2 + 1;
-          if (a.y < b.y) {
-            a.y -= shift;
-            b.y += shift;
-          } else {
-            a.y += shift;
-            b.y -= shift;
-          }
-          moved = true;
-        }
-      }
-    }
-    if (!moved) break;
-  }
-}
 function renderBoxesAndLines(container, parsed, layout, palette, isDark, options) {
   const {
     onClickItem,
@@ -29269,8 +29250,6 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       groupG.append("text").attr("class", "bl-group-label").attr("x", gx + group.width / 2).attr("y", gy + 18).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sGroupLabelFontSize).attr("font-weight", "600").attr("fill", palette.text).text(group.label);
     }
   }
-  const labelPositions = [];
-  const edgeGroups = /* @__PURE__ */ new Map();
   for (let i = 0; i < layout.edges.length; i++) {
     const le = layout.edges[i];
     const color = edgeColorMap.get(i) ?? palette.textMuted;
@@ -29289,7 +29268,6 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       const nodeLayout = layoutNodeMap.get(le.source);
       if (nodeLayout) {
         const edgeG2 = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber));
-        edgeGroups.set(i, edgeG2);
         const markerId2 = `bl-arrow-${color.replace("#", "")}`;
         const cx = nodeLayout.x;
         const cy = nodeLayout.y;
@@ -29338,7 +29316,6 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     }
     if (points.length < 2) continue;
     const edgeG = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber));
-    edgeGroups.set(i, edgeG);
     const markerId = `bl-arrow-${color.replace("#", "")}`;
     const gen = le.straight ? lineGeneratorStraight : parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR;
     const path = edgeG.append("path").attr("class", "bl-edge").attr("d", gen(points) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`);
@@ -29346,31 +29323,6 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       const revId = `bl-arrow-rev-${color.replace("#", "")}`;
       path.attr("marker-start", `url(#${revId})`);
     }
-    if (le.label && le.points.length > 0) {
-      const lw = measureText(le.label, sEdgeLabelFontSize);
-      const labelH = sEdgeLabelFontSize + 6;
-      const mid = edgePolylineMidpoint(le.points);
-      let ly = mid.y;
-      if (le.parallelCount > 1 && le.yOffset !== 0) {
-        ly += (le.yOffset < 0 ? -labelH : labelH) * 0.5;
-      }
-      labelPositions.push({
-        x: mid.x,
-        y: ly,
-        width: lw + 8,
-        height: labelH,
-        idx: i
-      });
-    }
-  }
-  resolveEdgeLabelOverlaps(labelPositions);
-  for (const lp of labelPositions) {
-    const le = layout.edges[lp.idx];
-    if (!le.label) continue;
-    const edgeG = edgeGroups.get(lp.idx);
-    const target = edgeG ?? diagramG;
-    target.append("rect").attr("x", lp.x - lp.width / 2).attr("y", lp.y - lp.height / 2).attr("width", lp.width).attr("height", lp.height).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85);
-    target.append("text").attr("x", lp.x).attr("y", lp.y + sEdgeLabelFontSize / 3).attr("text-anchor", "middle").attr("font-size", sEdgeLabelFontSize).attr("fill", palette.textMuted).text(le.label);
   }
   for (const ln of layout.nodes) {
     const node = nodeMap.get(ln.label);
@@ -29421,8 +29373,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     nodeG.append("rect").attr("x", x).attr("y", y).attr("width", ln.width).attr("height", ln.height).attr("rx", NODE_RX).attr("ry", NODE_RX).attr("fill", colors.fill).attr("stroke", colors.stroke).attr("stroke-width", sNodeStrokeWidth);
     const desc = node.description;
     if (desc && desc.length > 0 && !hideDescriptions) {
-      const MAX_LABEL_LINES3 = 3;
-      const fitted = fitLabelToHeader(node.label, ln.width, MAX_LABEL_LINES3);
+      const MAX_LABEL_LINES4 = 3;
+      const fitted = fitLabelToHeader(node.label, ln.width, MAX_LABEL_LINES4);
       const labelLines = fitted.lines;
       const labelLineH = fitted.fontSize * 1.3;
       const labelTotalH = labelLines.length * labelLineH;
@@ -29556,6 +29508,35 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       }
     }
   }
+  const labelLayer = diagramG.append("g").attr("class", "bl-edge-labels");
+  const labelLineHeight = sEdgeLabelFontSize * 1.3;
+  for (const le of layout.edges) {
+    if (!le.labelLines || le.labelLines.length === 0) continue;
+    if (le.labelX === void 0 || le.labelY === void 0) continue;
+    const lx = le.labelX;
+    const ly = le.labelY;
+    if (hidden.size > 0) {
+      let isHidden = false;
+      for (const [groupKey, hiddenVals] of hidden) {
+        const val = le.metadata[groupKey];
+        if (val && hiddenVals.has(val.toLowerCase())) {
+          isHidden = true;
+          break;
+        }
+      }
+      if (isHidden) continue;
+    }
+    const lw = le.labelWidth ?? 0;
+    const lh = le.labelHeight ?? sEdgeLabelFontSize + 6;
+    const lines = le.labelLines;
+    const labelG = labelLayer.append("g").attr("class", "bl-edge-label").attr("data-line-number", String(le.lineNumber));
+    labelG.append("rect").attr("x", lx - lw / 2).attr("y", ly - lh / 2).attr("width", lw).attr("height", lh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.72);
+    const text = labelG.append("text").attr("x", lx).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sEdgeLabelFontSize).attr("fill", palette.textMuted);
+    const firstY = ly - (lines.length - 1) / 2 * labelLineHeight + sEdgeLabelFontSize / 3;
+    lines.forEach((line11, k) => {
+      text.append("tspan").attr("x", lx).attr("y", firstY + k * labelLineHeight).text(line11);
+    });
+  }
   const hasDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0
   );
@@ -29672,6 +29653,222 @@ var init_renderer6 = __esm({
   }
 });
 
+// src/boxes-and-lines/label-placement.ts
+function measureEdgeLabel(label, fontSize = EDGE_LABEL_FONT_SIZE6, maxWidth = LABEL_MAX_WIDTH) {
+  let lines = wrapTextToWidth(label, fontSize, maxWidth, { hardBreak: true });
+  if (lines.length > MAX_LABEL_LINES) {
+    const kept = lines.slice(0, MAX_LABEL_LINES - 1);
+    const rest = lines.slice(MAX_LABEL_LINES - 1).join(" ");
+    kept.push(truncateText(rest, fontSize, maxWidth));
+    lines = kept;
+  }
+  let textW = 0;
+  for (const ln of lines) {
+    const w = measureText(ln, fontSize);
+    if (w > textW) textW = w;
+  }
+  return {
+    lines,
+    width: textW + 2 * H_PAD,
+    height: lines.length * fontSize * LABEL_LINE_HEIGHT + 2 * V_PAD
+  };
+}
+function edgePolylineMidpoint(points) {
+  return pointAtArcFraction(points, 0.5).p;
+}
+function pointAtArcFraction(points, t) {
+  if (points.length === 0) return { p: { x: 0, y: 0 }, nx: 0, ny: 1 };
+  if (points.length === 1)
+    return { p: { x: points[0].x, y: points[0].y }, nx: 0, ny: 1 };
+  const segLen = [];
+  let total = 0;
+  for (let k = 1; k < points.length; k++) {
+    const len = Math.hypot(
+      points[k].x - points[k - 1].x,
+      points[k].y - points[k - 1].y
+    );
+    segLen.push(len);
+    total += len;
+  }
+  let want = total * Math.max(0, Math.min(1, t));
+  for (let k = 1; k < points.length; k++) {
+    const len = segLen[k - 1];
+    if (want <= len || k === points.length - 1) {
+      const f = len === 0 ? 0 : Math.min(1, want / len);
+      const ax = points[k - 1].x;
+      const ay = points[k - 1].y;
+      const bx = points[k].x;
+      const by = points[k].y;
+      const dx = bx - ax;
+      const dy = by - ay;
+      const dlen = Math.hypot(dx, dy) || 1;
+      return {
+        p: { x: ax + dx * f, y: ay + dy * f },
+        nx: -dy / dlen,
+        ny: dx / dlen
+      };
+    }
+    want -= len;
+  }
+  const last = points[points.length - 1];
+  return { p: { x: last.x, y: last.y }, nx: 0, ny: 1 };
+}
+function rectFromCenter(cx, cy, w, h) {
+  return {
+    minX: cx - w / 2,
+    minY: cy - h / 2,
+    maxX: cx + w / 2,
+    maxY: cy + h / 2
+  };
+}
+function overlapsAny(cx, cy, w, h, obstacles, pad2) {
+  const minX = cx - w / 2 - pad2;
+  const minY = cy - h / 2 - pad2;
+  const maxX = cx + w / 2 + pad2;
+  const maxY = cy + h / 2 + pad2;
+  for (const o of obstacles) {
+    if (minX < o.maxX && maxX > o.minX && minY < o.maxY && maxY > o.minY)
+      return true;
+  }
+  return false;
+}
+function slideFractions() {
+  const out = [0.5];
+  for (let k = 1; k <= SLIDE_SAMPLES; k++) {
+    const off = k * 0.08;
+    if (0.5 - off >= 0.12) out.push(0.5 - off);
+    if (0.5 + off <= 0.88) out.push(0.5 + off);
+  }
+  return out;
+}
+function findClearPosition(w, h, points, obstacles) {
+  const ts = slideFractions();
+  for (const t of ts) {
+    const { p } = pointAtArcFraction(points, t);
+    if (!overlapsAny(p.x, p.y, w, h, obstacles, BOX_CLEAR_PAD)) return p;
+  }
+  for (let mag = PERP_STEP; mag <= PERP_MAX; mag += PERP_STEP) {
+    for (const t of ts) {
+      const { p, nx, ny } = pointAtArcFraction(points, t);
+      for (const sign of [-1, 1]) {
+        const x = p.x + nx * mag * sign;
+        const y = p.y + ny * mag * sign;
+        if (!overlapsAny(x, y, w, h, obstacles, BOX_CLEAR_PAD)) return { x, y };
+      }
+    }
+  }
+  return null;
+}
+function resolveLabelOverlaps(boxes) {
+  const MAX_PASSES = 8;
+  const PAD = 4;
+  for (let pass = 0; pass < MAX_PASSES; pass++) {
+    let moved = false;
+    for (let i = 0; i < boxes.length; i++) {
+      for (let j = i + 1; j < boxes.length; j++) {
+        const a = boxes[i];
+        const b = boxes[j];
+        const dx = Math.abs(a.cx - b.cx);
+        const dy = Math.abs(a.cy - b.cy);
+        const overlapX = (a.w + b.w) / 2 + PAD - dx;
+        const overlapY = (a.h + b.h) / 2 + PAD - dy;
+        if (overlapX > 0 && overlapY > 0) {
+          const shift = overlapY / 2 + 1;
+          if (a.cy < b.cy) {
+            a.cy -= shift;
+            b.cy += shift;
+          } else {
+            a.cy += shift;
+            b.cy -= shift;
+          }
+          moved = true;
+        }
+      }
+    }
+    if (!moved) break;
+  }
+}
+function placeEdgeLabels(layout, opts) {
+  const fontSize = opts?.fontSize ?? EDGE_LABEL_FONT_SIZE6;
+  const maxWidth = opts?.maxWidth ?? LABEL_MAX_WIDTH;
+  const obstacles = [];
+  for (const n of layout.nodes)
+    obstacles.push(rectFromCenter(n.x, n.y, n.width, n.height));
+  for (const g of layout.groups)
+    if (g.collapsed)
+      obstacles.push(rectFromCenter(g.x, g.y, g.width, g.height));
+  const boxes = [];
+  layout.edges.forEach((e, idx) => {
+    if (!e.label || e.points.length < 2) return;
+    const m = measureEdgeLabel(e.label, fontSize, maxWidth);
+    const mid = edgePolylineMidpoint(e.points);
+    let cy = mid.y;
+    if (e.parallelCount > 1 && e.yOffset !== 0)
+      cy += (e.yOffset < 0 ? -1 : 1) * (m.height / 2);
+    boxes.push({
+      edgeIdx: idx,
+      cx: mid.x,
+      cy,
+      w: m.width,
+      h: m.height,
+      lines: m.lines,
+      resolved: true
+    });
+  });
+  for (const box of boxes) {
+    if (!overlapsAny(box.cx, box.cy, box.w, box.h, obstacles, BOX_CLEAR_PAD))
+      continue;
+    const e = layout.edges[box.edgeIdx];
+    const clear = findClearPosition(box.w, box.h, e.points, obstacles);
+    if (clear) {
+      box.cx = clear.x;
+      box.cy = clear.y;
+    } else {
+      box.resolved = false;
+    }
+  }
+  resolveLabelOverlaps(boxes);
+  for (const box of boxes) {
+    if (overlapsAny(box.cx, box.cy, box.w, box.h, obstacles, BOX_CLEAR_PAD))
+      box.resolved = false;
+  }
+  const boxByIdx = /* @__PURE__ */ new Map();
+  for (const b of boxes) boxByIdx.set(b.edgeIdx, b);
+  const edges = layout.edges.map((e, idx) => {
+    const b = boxByIdx.get(idx);
+    if (!b) return e;
+    return {
+      ...e,
+      labelX: b.cx,
+      labelY: b.cy,
+      labelWidth: b.w,
+      labelHeight: b.h,
+      labelLines: b.lines
+    };
+  });
+  return {
+    layout: { ...layout, edges },
+    unresolved: boxes.filter((b) => !b.resolved).map((b) => b.edgeIdx)
+  };
+}
+var EDGE_LABEL_FONT_SIZE6, LABEL_MAX_WIDTH, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, H_PAD, V_PAD, BOX_CLEAR_PAD, PERP_STEP, PERP_MAX, SLIDE_SAMPLES;
+var init_label_placement = __esm({
+  "src/boxes-and-lines/label-placement.ts"() {
+    "use strict";
+    init_text_measure();
+    EDGE_LABEL_FONT_SIZE6 = 11;
+    LABEL_MAX_WIDTH = 160;
+    MAX_LABEL_LINES = 3;
+    LABEL_LINE_HEIGHT = 1.3;
+    H_PAD = 6;
+    V_PAD = 3;
+    BOX_CLEAR_PAD = 4;
+    PERP_STEP = 8;
+    PERP_MAX = 40;
+    SLIDE_SAMPLES = 9;
+  }
+});
+
 // src/boxes-and-lines/layout-layered.ts
 function rng(s) {
   return () => {
@@ -29831,7 +30028,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 +30043,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 +30373,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 +31077,7 @@ __export(layout_search_exports, {
   layoutBoxesAndLinesSearch: () => layoutBoxesAndLinesSearch,
   separateGroupBands: () => separateGroupBands
 });
-function rng2(s) {
+function rng3(s) {
   return () => {
     s |= 0;
     s = s + 1831565813 | 0;
@@ -30546,7 +31432,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 +31459,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 +31502,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 +31573,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);
@@ -30770,6 +31656,7 @@ function edgeLength(layout) {
 }
 async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   const hideDescriptions = opts?.hideDescriptions ?? false;
+  const reserveEdgeLabels = opts?.reserveEdgeLabels ?? false;
   const onProgress = opts?.onProgress;
   const tick = onProgress ? () => new Promise((r) => setTimeout(r)) : () => void 0;
   const collapsedGroupLabels = /* @__PURE__ */ new Set();
@@ -30951,7 +31838,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 +31852,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 +31912,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({
@@ -31062,8 +31949,14 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     for (const e of ord(parsed.edges)) {
       const s = srcRep(e.source);
       const t = tgtRep(e.target);
-      if (s !== t && g.hasNode(s) && g.hasNode(t))
-        g.setEdge(s, t, {}, edgeKey(e));
+      if (s !== t && g.hasNode(s) && g.hasNode(t)) {
+        let edgeLabel = {};
+        if (reserveEdgeLabels && e.label) {
+          const m = measureEdgeLabel(e.label, EDGE_LABEL_FONT_SIZE6);
+          edgeLabel = { width: m.width, height: m.height, labelpos: "c" };
+        }
+        g.setEdge(s, t, edgeLabel, edgeKey(e));
+      }
     }
     import_dagre4.default.layout(g);
     const nodes = parsed.nodes.map((n2) => {
@@ -31212,8 +32105,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 +32178,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 +32186,8 @@ var init_layout_search = __esm({
     import_d3_shape = require("d3-shape");
     init_layout5();
     init_layout_layered();
+    init_layout_grouped();
+    init_label_placement();
     DEFAULT_LAMBDA = 4;
     ESCALATE_THRESHOLD = 4;
     ESCALATE_MAX_N = 45;
@@ -31294,7 +32196,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;
   }
 });
 
@@ -31344,9 +32246,9 @@ function estimateLabelLines(label, nodeWidth = NODE_WIDTH) {
         current = word;
       }
     }
-    if (lines <= MAX_LABEL_LINES) return Math.min(lines, MAX_LABEL_LINES);
+    if (lines <= MAX_LABEL_LINES2) return Math.min(lines, MAX_LABEL_LINES2);
   }
-  return MAX_LABEL_LINES;
+  return MAX_LABEL_LINES2;
 }
 function computeNodeSize(node, reserveValueRow) {
   if (!node.description || node.description.length === 0) {
@@ -31354,7 +32256,7 @@ function computeNodeSize(node, reserveValueRow) {
   }
   const w = DESC_NODE_WIDTH;
   const labelLines = estimateLabelLines(node.label, w);
-  const labelHeight = labelLines * 13 * LABEL_LINE_HEIGHT + LABEL_PAD;
+  const labelHeight = labelLines * 13 * LABEL_LINE_HEIGHT2 + LABEL_PAD;
   const maxTextWidth = w - 24;
   let totalRenderedLines = 0;
   for (const line11 of node.description) {
@@ -31378,7 +32280,7 @@ function computeNodeSize(node, reserveValueRow) {
 }
 async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
   const { layoutBoxesAndLinesSearch: layoutBoxesAndLinesSearch2 } = await Promise.resolve().then(() => (init_layout_search(), layout_search_exports));
-  const searched = await layoutBoxesAndLinesSearch2(parsed, collapseInfo, {
+  const searchOpts = {
     ...layoutOptions?.hideDescriptions !== void 0 && {
       hideDescriptions: layoutOptions.hideDescriptions
     },
@@ -31388,12 +32290,23 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
     ...layoutOptions?.onProgress !== void 0 && {
       onProgress: layoutOptions.onProgress
     }
-  });
-  return attachNotes(
-    applyParallelEdgeOffsets(searched),
+  };
+  const searched = await layoutBoxesAndLinesSearch2(
     parsed,
-    layoutOptions?.collapsedNotes
-  );
+    collapseInfo,
+    searchOpts
+  );
+  let placed = placeEdgeLabels(applyParallelEdgeOffsets(searched));
+  if (placed.unresolved.length > 0) {
+    const relaid = await layoutBoxesAndLinesSearch2(parsed, collapseInfo, {
+      ...searchOpts,
+      reserveEdgeLabels: true
+    });
+    const relaidPlaced = placeEdgeLabels(applyParallelEdgeOffsets(relaid));
+    if (relaidPlaced.unresolved.length < placed.unresolved.length)
+      placed = relaidPlaced;
+  }
+  return attachNotes(placed.layout, parsed, layoutOptions?.collapsedNotes);
 }
 function attachNotes(layout, parsed, collapsedNotes) {
   const notesSuppressed = parsed.options?.["no-notes"] === "on";
@@ -31461,6 +32374,7 @@ function attachNotes(layout, parsed, collapsedNotes) {
     points: e.points.map((pt) => ({ x: pt.x + shiftX, y: pt.y + shiftY })),
     ...e.labelX !== void 0 && { labelX: e.labelX + shiftX },
     ...e.labelY !== void 0 && { labelY: e.labelY + shiftY }
+    // labelWidth/labelHeight/labelLines are shift-invariant — carried via spread.
   })) : layout.edges;
   const finalGroups = shifted ? layout.groups.map((grp) => ({
     ...grp,
@@ -31471,8 +32385,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 +32419,14 @@ 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_LINES2, LABEL_LINE_HEIGHT2, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
 var init_layout5 = __esm({
   "src/boxes-and-lines/layout.ts"() {
     "use strict";
     init_text_measure();
+    init_label_placement();
     init_notes();
-    MARGIN4 = 40;
+    MARGIN5 = 40;
     MAX_PARALLEL_EDGES = 5;
     PARALLEL_SPACING = 22;
     PHI = 1.618;
@@ -31523,8 +32438,8 @@ var init_layout5 = __esm({
     DESC_PADDING = 8;
     SEPARATOR_GAP4 = 4;
     MAX_DESC_LINES2 = 6;
-    MAX_LABEL_LINES = 3;
-    LABEL_LINE_HEIGHT = 1.3;
+    MAX_LABEL_LINES2 = 3;
+    LABEL_LINE_HEIGHT2 = 1.3;
     LABEL_PAD = 12;
     VALUE_ROW_FONT = 11;
     VALUE_ROW_H = SEPARATOR_GAP4 + VALUE_ROW_FONT * DESC_LINE_HEIGHT2 + DESC_PADDING;
@@ -31543,7 +32458,7 @@ function tokenize(text) {
   return tokens;
 }
 function tryWrap(tokens, maxWidth, fontSize, maxLines) {
-  const availWidth = maxWidth - H_PAD;
+  const availWidth = maxWidth - H_PAD2;
   const lines = [];
   let currentLine = "";
   for (const token of tokens) {
@@ -31568,7 +32483,7 @@ function tryWrap(tokens, maxWidth, fontSize, maxLines) {
   return lines;
 }
 function truncateLastLine(lines, maxWidth, fontSize) {
-  const availWidth = maxWidth - H_PAD;
+  const availWidth = maxWidth - H_PAD2;
   const result = [...lines];
   const last = result[result.length - 1];
   if (measureText(last, fontSize) > availWidth) {
@@ -31576,7 +32491,7 @@ function truncateLastLine(lines, maxWidth, fontSize) {
   }
   return result;
 }
-function wrapText(text, maxWidth, baseFontSize, minFontSize, maxLines = MAX_LABEL_LINES2) {
+function wrapText(text, maxWidth, baseFontSize, minFontSize, maxLines = MAX_LABEL_LINES3) {
   if (!text) return { lines: [""], fontSize: baseFontSize };
   const tokens = tokenize(text);
   for (let fs = baseFontSize; fs >= minFontSize; fs--) {
@@ -31591,7 +32506,7 @@ function wrapText(text, maxWidth, baseFontSize, minFontSize, maxLines = MAX_LABE
   if (allLines.length > maxLines) {
     const last = truncated[truncated.length - 1];
     if (!last.endsWith("\u2026")) {
-      const availWidth = maxWidth - H_PAD;
+      const availWidth = maxWidth - H_PAD2;
       if (measureText(last + "\u2026", minFontSize) > availWidth) {
         truncated[truncated.length - 1] = truncateText(
           last,
@@ -31618,7 +32533,7 @@ function computeNodeText(label, description, depth, nodeWidth, hideDescriptions)
     nodeWidth,
     baseFontSize,
     MIN_FONT_SIZE,
-    MAX_LABEL_LINES2
+    MAX_LABEL_LINES3
   );
   const descLines = [];
   let descFontSize = DESC_FONT_SIZE3;
@@ -31646,14 +32561,14 @@ function computeNodeText(label, description, depth, nodeWidth, hideDescriptions)
     descFontSize
   };
 }
-var H_PAD, MAX_LABEL_LINES2, MAX_DESC_LINES3, ROOT_FONT_SIZE, MIN_FONT_SIZE, FONT_STEP, DESC_FONT_SIZE3;
+var H_PAD2, MAX_LABEL_LINES3, MAX_DESC_LINES3, ROOT_FONT_SIZE, MIN_FONT_SIZE, FONT_STEP, DESC_FONT_SIZE3;
 var init_text_wrap = __esm({
   "src/mindmap/text-wrap.ts"() {
     "use strict";
     init_description_helpers();
     init_text_measure();
-    H_PAD = 16;
-    MAX_LABEL_LINES2 = 3;
+    H_PAD2 = 16;
+    MAX_LABEL_LINES3 = 3;
     MAX_DESC_LINES3 = 2;
     ROOT_FONT_SIZE = 17;
     MIN_FONT_SIZE = 9;
@@ -31682,7 +32597,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);
@@ -32040,7 +32955,7 @@ function nodeHeightS(node, hideDescriptions, sc) {
     hideDescriptions
   );
   const labelLineCount = text.labelLines.length;
-  const labelH = labelLineCount <= 1 ? SINGLE_LABEL_HEIGHT : LABEL_LINE_HEIGHT2 * labelLineCount;
+  const labelH = labelLineCount <= 1 ? SINGLE_LABEL_HEIGHT : LABEL_LINE_HEIGHT3 * labelLineCount;
   let h = labelH + NODE_V_PAD;
   if (text.descLines.length > 0) {
     h += DESC_LINE_HEIGHT3 * text.descLines.length + 4;
@@ -32060,7 +32975,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_HEIGHT3, 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";
@@ -32071,12 +32986,12 @@ var init_layout6 = __esm({
     DEPTH1_WIDTH = 150;
     LEAF_WIDTH = 120;
     SINGLE_LABEL_HEIGHT = 28;
-    LABEL_LINE_HEIGHT2 = 18;
+    LABEL_LINE_HEIGHT3 = 18;
     DESC_LINE_HEIGHT3 = 14;
     NODE_V_PAD = 10;
     H_GAP2 = 40;
     V_GAP2 = 12;
-    MARGIN5 = 40;
+    MARGIN6 = 40;
     MULTI_ROOT_GAP = 60;
     nodeDepthCache = /* @__PURE__ */ new Map();
   }
@@ -32333,7 +33248,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());
@@ -32362,18 +33277,18 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
       descFontSize
     } = textLayout;
     const labelLineCount = labelLines.length;
-    const labelZoneH = labelLineCount <= 1 ? SINGLE_LABEL_HEIGHT2 : LABEL_LINE_HEIGHT3 * labelLineCount;
+    const labelZoneH = labelLineCount <= 1 ? SINGLE_LABEL_HEIGHT2 : LABEL_LINE_HEIGHT4 * labelLineCount;
     const labelZoneHeight = showDesc ? labelZoneH : node.height;
     const centerX = node.x + node.width / 2;
     if (labelLineCount <= 1) {
       const labelY = node.y + labelZoneHeight / 2 + fontSize * 0.35;
       nodeG.append("text").attr("x", centerX).attr("y", labelY).attr("text-anchor", "middle").attr("font-size", fontSize).attr("font-weight", isRoot ? "bold" : "normal").attr("fill", onFillText).text(labelLines[0]);
     } else {
-      const blockH = LABEL_LINE_HEIGHT3 * (labelLineCount - 1);
+      const blockH = LABEL_LINE_HEIGHT4 * (labelLineCount - 1);
       const firstBaselineY = node.y + labelZoneHeight / 2 - blockH / 2 + fontSize * 0.35;
       const textEl = nodeG.append("text").attr("x", centerX).attr("text-anchor", "middle").attr("font-size", fontSize).attr("font-weight", isRoot ? "bold" : "normal").attr("fill", onFillText);
       for (let i = 0; i < labelLines.length; i++) {
-        textEl.append("tspan").attr("x", centerX).attr("y", firstBaselineY + i * LABEL_LINE_HEIGHT3).text(labelLines[i]);
+        textEl.append("tspan").attr("x", centerX).attr("y", firstBaselineY + i * LABEL_LINE_HEIGHT4).text(labelLines[i]);
       }
     }
     if (labelLines.length > 1 || labelLines[0] !== node.label) {
@@ -32448,10 +33363,11 @@ function renderMindmapForExport(content, theme, palette) {
     return extractExportSvg(container, theme);
   });
 }
-var d3Selection12, DIAGRAM_PADDING7, TITLE_HEIGHT4, SINGLE_LABEL_HEIGHT2, LABEL_LINE_HEIGHT3, DESC_LINE_HEIGHT4, NODE_RADIUS, ROOT_STROKE_WIDTH, DEPTH_COLOR_KEYS;
+var d3Selection12, DIAGRAM_PADDING7, TITLE_HEIGHT4, SINGLE_LABEL_HEIGHT2, LABEL_LINE_HEIGHT4, DESC_LINE_HEIGHT4, NODE_RADIUS, ROOT_STROKE_WIDTH, DEPTH_COLOR_KEYS;
 var init_renderer7 = __esm({
   "src/mindmap/renderer.ts"() {
     "use strict";
+    init_tag_groups();
     d3Selection12 = __toESM(require("d3-selection"), 1);
     init_fonts();
     init_export_container();
@@ -32470,7 +33386,7 @@ var init_renderer7 = __esm({
     DIAGRAM_PADDING7 = 20;
     TITLE_HEIGHT4 = 30;
     SINGLE_LABEL_HEIGHT2 = 28;
-    LABEL_LINE_HEIGHT3 = 18;
+    LABEL_LINE_HEIGHT4 = 18;
     DESC_LINE_HEIGHT4 = 14;
     NODE_RADIUS = 6;
     ROOT_STROKE_WIDTH = 2.5;
@@ -33662,7 +34578,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 +34780,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 +34793,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 +35130,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 +35148,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 +35545,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 +35563,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 +35856,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 +35872,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 +35897,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 +35919,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;
@@ -35136,7 +36053,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       const labelText = edge.label ?? "";
       const techText = edge.technology ? `[${edge.technology}]` : "";
       const textW = Math.max(
-        measureText(labelText, EDGE_LABEL_FONT_SIZE6),
+        measureText(labelText, EDGE_LABEL_FONT_SIZE7),
         measureText(techText, TECH_FONT_SIZE)
       );
       const bgW = textW + 12;
@@ -35147,7 +36064,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
         textY = midPt.y - 4;
       }
       if (labelText) {
-        edgeG.append("text").attr("x", midPt.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", edgeColor3).attr("font-size", EDGE_LABEL_FONT_SIZE6).attr("class", "c4-edge-label").text(labelText);
+        edgeG.append("text").attr("x", midPt.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", edgeColor3).attr("font-size", EDGE_LABEL_FONT_SIZE7).attr("class", "c4-edge-label").text(labelText);
       }
       if (techText) {
         edgeG.append("text").attr("x", midPt.x).attr("y", labelText ? textY + 18 : textY + 4).attr("text-anchor", "middle").attr("fill", edgeColor3).attr("font-size", TECH_FONT_SIZE).attr("font-style", "italic").attr("class", "c4-edge-tech").text(techText);
@@ -35157,7 +36074,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());
@@ -35331,7 +36248,7 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
       const labelText = edge.label ?? "";
       const techText = edge.technology ? `[${edge.technology}]` : "";
       const textW = Math.max(
-        measureText(labelText, EDGE_LABEL_FONT_SIZE6),
+        measureText(labelText, EDGE_LABEL_FONT_SIZE7),
         measureText(techText, TECH_FONT_SIZE)
       );
       const bgW = textW + 12;
@@ -35349,7 +36266,7 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
       });
     }
   }
-  placeEdgeLabels(pendingLabels, edges, obstacleRects);
+  placeEdgeLabels2(pendingLabels, edges, obstacleRects);
   for (const lbl of pendingLabels) {
     lbl.edgeG.append("rect").attr("x", lbl.x - lbl.bgW / 2).attr("y", lbl.y - lbl.bgH / 2).attr("width", lbl.bgW).attr("height", lbl.bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9).attr("class", "c4-edge-label-bg");
     let textY = lbl.y;
@@ -35357,7 +36274,7 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
       textY = lbl.y - 4;
     }
     if (lbl.labelText) {
-      lbl.edgeG.append("text").attr("x", lbl.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", lbl.edgeColor).attr("font-size", EDGE_LABEL_FONT_SIZE6).attr("class", "c4-edge-label").text(lbl.labelText);
+      lbl.edgeG.append("text").attr("x", lbl.x).attr("y", textY + 4).attr("text-anchor", "middle").attr("fill", lbl.edgeColor).attr("font-size", EDGE_LABEL_FONT_SIZE7).attr("class", "c4-edge-label").text(lbl.labelText);
     }
     if (lbl.techText) {
       lbl.edgeG.append("text").attr("x", lbl.x).attr("y", lbl.labelText ? textY + 18 : textY + 4).attr("text-anchor", "middle").attr("fill", lbl.edgeColor).attr("font-size", TECH_FONT_SIZE).attr("font-style", "italic").attr("class", "c4-edge-tech").text(lbl.techText);
@@ -35438,7 +36355,7 @@ function tangentAt(points, t) {
   }
   return { x: 0, y: 1 };
 }
-function placeEdgeLabels(labels, edges, obstacleRects) {
+function placeEdgeLabels2(labels, edges, obstacleRects) {
   if (labels.length === 0) return;
   const allPaths = edges.map((e) => e.points);
   const placedRects = [];
@@ -35716,7 +36633,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());
@@ -35976,10 +36893,11 @@ function renderC4DeploymentForExport(content, theme, palette) {
     document.body.removeChild(el);
   }
 }
-var d3Selection14, d3Shape6, DIAGRAM_PADDING8, MAX_SCALE5, TITLE_HEIGHT6, TYPE_FONT_SIZE, NAME_FONT_SIZE2, DESC_FONT_SIZE5, DESC_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE6, TECH_FONT_SIZE, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, lineGenerator4;
+var d3Selection14, d3Shape6, DIAGRAM_PADDING8, MAX_SCALE5, TITLE_HEIGHT6, TYPE_FONT_SIZE, NAME_FONT_SIZE2, DESC_FONT_SIZE5, DESC_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE7, TECH_FONT_SIZE, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, lineGenerator4;
 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();
@@ -36000,7 +36918,7 @@ var init_renderer9 = __esm({
     NAME_FONT_SIZE2 = 14;
     DESC_FONT_SIZE5 = 11;
     DESC_LINE_HEIGHT6 = 16;
-    EDGE_LABEL_FONT_SIZE6 = 11;
+    EDGE_LABEL_FONT_SIZE7 = 11;
     TECH_FONT_SIZE = 10;
     CARD_H_PAD4 = 20;
     CARD_V_PAD4 = 14;
@@ -36624,7 +37542,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleY = ctx.structural(TITLE_Y);
   const sNodeFontSize = ctx.text(NODE_FONT_SIZE2);
-  const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE7);
+  const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE8);
   const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
   const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sArrowheadW = ctx.structural(ARROWHEAD_W3);
@@ -36850,7 +37768,7 @@ function renderFlowchartForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection15, DIAGRAM_PADDING9, MAX_SCALE6, NODE_FONT_SIZE2, EDGE_LABEL_FONT_SIZE7, ARROWHEAD_W3, ARROWHEAD_H3, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT;
+var d3Selection15, DIAGRAM_PADDING9, MAX_SCALE6, NODE_FONT_SIZE2, EDGE_LABEL_FONT_SIZE8, ARROWHEAD_W3, ARROWHEAD_H3, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT;
 var init_flowchart_renderer = __esm({
   "src/graph/flowchart-renderer.ts"() {
     "use strict";
@@ -36870,7 +37788,7 @@ var init_flowchart_renderer = __esm({
     DIAGRAM_PADDING9 = 20;
     MAX_SCALE6 = 3;
     NODE_FONT_SIZE2 = 13;
-    EDGE_LABEL_FONT_SIZE7 = 11;
+    EDGE_LABEL_FONT_SIZE8 = 11;
     ARROWHEAD_W3 = 10;
     ARROWHEAD_H3 = 7;
     IO_SKEW = 15;
@@ -38044,7 +38962,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;
@@ -38304,7 +39222,7 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
       const midIdx = Math.floor(edge.points.length / 2);
       const midPt = edge.points[midIdx];
       if (midPt) {
-        const halfWidth = (measureText(edge.label, EDGE_LABEL_FONT_SIZE8) + 8) / 2;
+        const halfWidth = (measureText(edge.label, EDGE_LABEL_FONT_SIZE9) + 8) / 2;
         if (midPt.x - halfWidth < minX) minX = midPt.x - halfWidth;
         if (midPt.x + halfWidth > maxX) maxX = midPt.x + halfWidth;
       }
@@ -38338,7 +39256,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_SIZE9, 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";
@@ -38353,7 +39271,7 @@ var init_layout10 = __esm({
     COLLAPSE_BAR_HEIGHT3 = 6;
     NODE_FONT_SIZE3 = 13;
     META_FONT_SIZE5 = 10;
-    EDGE_LABEL_FONT_SIZE8 = 11;
+    EDGE_LABEL_FONT_SIZE9 = 11;
     PADDING_X3 = 24;
     GROUP_PADDING2 = 20;
     GROUP_HEADER_HEIGHT = 24;
@@ -38394,7 +39312,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;
   }
 });
 
@@ -38458,7 +39376,7 @@ function buildScaledConstants(ctx) {
     sNodeFontSize: ctx.text(NODE_FONT_SIZE4),
     sMetaFontSize: ctx.text(META_FONT_SIZE6),
     sMetaLineHeight: ctx.structural(META_LINE_HEIGHT6),
-    sEdgeLabelFontSize: ctx.text(EDGE_LABEL_FONT_SIZE9),
+    sEdgeLabelFontSize: ctx.text(EDGE_LABEL_FONT_SIZE10),
     sGroupLabelFontSize: ctx.text(GROUP_LABEL_FONT_SIZE2),
     sNodeBorderRadius: ctx.structural(NODE_BORDER_RADIUS),
     sEdgeStrokeWidth: ctx.structural(EDGE_STROKE_WIDTH),
@@ -39187,7 +40105,7 @@ function renderEdgeLabels(svg, edges, nodes, groups, palette, _isDark, animate,
     if (!midPt) continue;
     const labelText = edge.label;
     const g = svg.append("g").attr("class", animate ? "infra-edge-label" : "");
-    const textWidth = measureText(labelText, EDGE_LABEL_FONT_SIZE9) + 8;
+    const textWidth = measureText(labelText, EDGE_LABEL_FONT_SIZE10) + 8;
     g.append("rect").attr("x", midPt.x - textWidth / 2).attr("y", midPt.y - 8).attr("width", textWidth).attr("height", 16).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9);
     g.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sEdgeLabelFontSize).attr("fill", palette.textMuted).text(labelText);
     if (animate) {
@@ -39201,7 +40119,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 +40448,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 +40496,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()}"]`
@@ -39797,10 +40715,11 @@ function parseAndLayoutInfra(content) {
   const layout = layoutInfra(computed);
   return { parsed, computed, layout };
 }
-var d3Selection16, d3Shape8, NODE_FONT_SIZE4, META_FONT_SIZE6, META_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE9, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, LEGEND_FIXED_GAP3, SPEED_BADGE_H_PAD, SPEED_BADGE_V_PAD, SPEED_BADGE_GAP, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, DESC_MAX_WIDTH, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
+var d3Selection16, d3Shape8, NODE_FONT_SIZE4, META_FONT_SIZE6, META_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE10, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, LEGEND_FIXED_GAP3, SPEED_BADGE_H_PAD, SPEED_BADGE_V_PAD, SPEED_BADGE_GAP, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, DESC_MAX_WIDTH, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
 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();
@@ -39822,7 +40741,7 @@ var init_renderer10 = __esm({
     NODE_FONT_SIZE4 = 13;
     META_FONT_SIZE6 = 10;
     META_LINE_HEIGHT6 = 14;
-    EDGE_LABEL_FONT_SIZE9 = 11;
+    EDGE_LABEL_FONT_SIZE10 = 11;
     GROUP_LABEL_FONT_SIZE2 = 14;
     NODE_BORDER_RADIUS = 8;
     OVERLOAD_STROKE_WIDTH = 3;
@@ -39899,17 +40818,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 +40836,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 +40881,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 +45166,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 +45338,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 +46079,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 +46090,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 +46111,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 +46168,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 +46858,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 +47042,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 +47063,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;
@@ -46209,7 +47129,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleY = ctx.structural(TITLE_Y);
   const sNodeFontSize = ctx.text(NODE_FONT_SIZE6);
-  const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE10);
+  const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE11);
   const sGroupLabelFontSize = ctx.text(GROUP_LABEL_FONT_SIZE3);
   const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
   const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
@@ -46489,7 +47409,7 @@ function renderStateForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection19, DIAGRAM_PADDING12, MAX_SCALE7, NODE_FONT_SIZE6, EDGE_LABEL_FONT_SIZE10, GROUP_LABEL_FONT_SIZE3, ARROWHEAD_W5, ARROWHEAD_H5, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING;
+var d3Selection19, DIAGRAM_PADDING12, MAX_SCALE7, NODE_FONT_SIZE6, EDGE_LABEL_FONT_SIZE11, GROUP_LABEL_FONT_SIZE3, ARROWHEAD_W5, ARROWHEAD_H5, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING;
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
@@ -46509,7 +47429,7 @@ var init_state_renderer = __esm({
     DIAGRAM_PADDING12 = 20;
     MAX_SCALE7 = 3;
     NODE_FONT_SIZE6 = 13;
-    EDGE_LABEL_FONT_SIZE10 = 11;
+    EDGE_LABEL_FONT_SIZE11 = 11;
     GROUP_LABEL_FONT_SIZE3 = 11;
     ARROWHEAD_W5 = 10;
     ARROWHEAD_H5 = 7;
@@ -48216,7 +49136,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 +49161,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 +49207,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 +49688,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 +49903,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 +49911,7 @@ var init_renderer14 = __esm({
     init_parser23();
     init_layout13();
     init_inline_markdown();
+    init_note_box();
     init_legend_integration();
     init_tag_groups();
     init_scaling();
@@ -49323,10 +50251,10 @@ function renderedDescNodeHeight(numLines, scale) {
   return headerH + textBlockH + bottomPad;
 }
 function wrapEdgeLabelText(label, description, maxWidth = EDGE_LABEL_MAX_WIDTH) {
-  const labelLines = label ? wrapTextToWidth(label, EDGE_LABEL_FONT_SIZE11, maxWidth) : [];
+  const labelLines = label ? wrapTextToWidth(label, EDGE_LABEL_FONT_SIZE12, maxWidth) : [];
   const descLines = [];
   for (const d of description) {
-    descLines.push(...wrapTextToWidth(d, EDGE_LABEL_FONT_SIZE11, maxWidth));
+    descLines.push(...wrapTextToWidth(d, EDGE_LABEL_FONT_SIZE12, maxWidth));
   }
   return { labelLines, descLines };
 }
@@ -49464,9 +50392,9 @@ function computeEdgePaths(layoutNodes, parsed, cx, cy, radius, isClockwise) {
     const lineCount = labelLines.length + descLines.length;
     let labelPxW = 0;
     for (const l of labelLines)
-      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE11));
+      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE12));
     for (const l of descLines)
-      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE11));
+      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE12));
     const { labelX, labelY, labelAngle } = computeEdgeLabelPosition(
       midAngle,
       radius,
@@ -49568,9 +50496,9 @@ function fitToCanvas(nodes, edges, parsed, _cx, _cy, radius, width, height, _isC
     );
     let textWidth = 0;
     for (const l of labelLines)
-      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE11));
+      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE12));
     for (const l of descLines)
-      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE11));
+      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE12));
     if (textWidth === 0) continue;
     const normAngle = (le.labelAngle % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
     const isRight = normAngle < Math.PI * 0.4 || normAngle > Math.PI * 1.6;
@@ -49644,7 +50572,7 @@ function buildEdgeArc(src, tgt, cx, cy, radius, isClockwise, arrowLength = 0) {
   const midAngle = srcExitAngle + dir * visibleSweep / 2;
   return { path, midAngle };
 }
-var MIN_ARC_ANGLE, LABEL_FONT_SIZE4, CIRCLE_LABEL_FONT_SIZE, DESC_FONT_SIZE6, EDGE_LABEL_FONT_SIZE11, MIN_NODE_WIDTH4, MAX_NODE_WIDTH3, DESC_MIN_WIDTH, DESC_WIDTH_STEP, DESC_TARGET_RATIO, PLAIN_NODE_HEIGHT, HEADER_HEIGHT4, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, RENDERER_DESC_FONT, RENDERER_DESC_FONT_MIN, RENDERER_DESC_LINE_H, RENDERER_DESC_LINE_H_MIN, EDGE_LABEL_MAX_WIDTH;
+var MIN_ARC_ANGLE, LABEL_FONT_SIZE4, CIRCLE_LABEL_FONT_SIZE, DESC_FONT_SIZE6, EDGE_LABEL_FONT_SIZE12, MIN_NODE_WIDTH4, MAX_NODE_WIDTH3, DESC_MIN_WIDTH, DESC_WIDTH_STEP, DESC_TARGET_RATIO, PLAIN_NODE_HEIGHT, HEADER_HEIGHT4, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, RENDERER_DESC_FONT, RENDERER_DESC_FONT_MIN, RENDERER_DESC_LINE_H, RENDERER_DESC_LINE_H_MIN, EDGE_LABEL_MAX_WIDTH;
 var init_layout14 = __esm({
   "src/cycle/layout.ts"() {
     "use strict";
@@ -49655,7 +50583,7 @@ var init_layout14 = __esm({
     LABEL_FONT_SIZE4 = 13;
     CIRCLE_LABEL_FONT_SIZE = 16;
     DESC_FONT_SIZE6 = 11;
-    EDGE_LABEL_FONT_SIZE11 = 11;
+    EDGE_LABEL_FONT_SIZE12 = 11;
     MIN_NODE_WIDTH4 = 70;
     MAX_NODE_WIDTH3 = 260;
     DESC_MIN_WIDTH = 140;
@@ -49800,7 +50728,7 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
   const scaledNodeFont = Math.max(6, Math.round(NODE_FONT_SIZE7 * layout.scale));
   const scaledEdgeLabelFont = Math.max(
     6,
-    Math.round(EDGE_LABEL_FONT_SIZE12 * layout.scale)
+    Math.round(EDGE_LABEL_FONT_SIZE13 * layout.scale)
   );
   const CIRCLE_LABEL_FONT_SIZE2 = 16;
   const scaledCircleLabelFont = Math.max(
@@ -49963,7 +50891,7 @@ function ensureArrowMarker(defs, color, strokeWidth) {
   const mh = Math.max(1.5, mw * 0.5);
   defs.append("marker").attr("id", id).attr("viewBox", `0 0 ${mw} ${mh}`).attr("refX", mw * 0.1).attr("refY", mh / 2).attr("markerWidth", mw).attr("markerHeight", mh).attr("orient", "auto").append("polygon").attr("points", `0,0 ${mw},${mh / 2} 0,${mh}`).attr("fill", color);
 }
-var d3Selection22, NODE_FONT_SIZE7, DESC_FONT_SIZE7, EDGE_LABEL_FONT_SIZE12, DESC_LINE_HEIGHT8, TITLE_AREA_HEIGHT;
+var d3Selection22, NODE_FONT_SIZE7, DESC_FONT_SIZE7, EDGE_LABEL_FONT_SIZE13, DESC_LINE_HEIGHT8, TITLE_AREA_HEIGHT;
 var init_renderer15 = __esm({
   "src/cycle/renderer.ts"() {
     "use strict";
@@ -49981,7 +50909,7 @@ var init_renderer15 = __esm({
     init_text_measure();
     NODE_FONT_SIZE7 = 13;
     DESC_FONT_SIZE7 = 11;
-    EDGE_LABEL_FONT_SIZE12 = 11;
+    EDGE_LABEL_FONT_SIZE13 = 11;
     DESC_LINE_HEIGHT8 = 15;
     TITLE_AREA_HEIGHT = 50;
   }
@@ -51807,7 +52735,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 +53349,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 +53364,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 +54630,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 +57047,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 +57083,7 @@ function resolveSequenceTags(parsed, activeTagGroup) {
 var init_tag_resolution = __esm({
   "src/sequence/tag-resolution.ts"() {
     "use strict";
+    init_tag_groups();
   }
 });
 
@@ -56628,7 +57558,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 +58150,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 +58200,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 +58696,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 +59866,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 +60131,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 +60437,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 +60456,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 +64178,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.32.1";
+var VERSION = "0.34.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "slate",