@diagrammo/dgmo 0.77.0 → 0.79.0

package/dist/{chunk-WHWUVDYK.js → chunk-OM6XZAKM.js}

@@ -8,28 +8,28 @@ import {
   rectCircleOverlap,
   rectsOverlap,
   segmentRectOverlap
-} from "./chunk-L65WI4HO.js";
+} from "./chunk-EDU2OCIQ.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   compactNumber,
   computeLegendLayout
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-LLZVRWVS.js";
 import {
   measureLegendText
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   contrastRatio,
   mix,
   politicalTints,
   relativeLuminance,
   valueRampColor
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
 import {
   resolveColor
 } from "./chunk-XOGQY4EC.js";
@@ -3406,4 +3406,4 @@ export {
   albersSkewFallback,
   layoutMap
 };
-//# sourceMappingURL=chunk-WHWUVDYK.js.map
+//# sourceMappingURL=chunk-OM6XZAKM.js.map

package/dist/{chunk-DSXWJAOA.js → chunk-OMN4F42L.js}

@@ -4,42 +4,43 @@ import {
   buildLegend,
   compactNumber,
   formatPct,
+  mutedFill,
   resolveCellColor,
   resolveColorMode
-} from "./chunk-C2WH3BMS.js";
+} from "./chunk-VTWUHX4H.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-2F7AG7LA.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-253E5ISJ.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-LLZVRWVS.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   measureText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   contrastText,
   getSeriesColors,
   mix,
   themeBaseBg
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
 
 // src/treemap/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -241,7 +242,8 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
     rootIndexByLabel,
     seriesColors,
     colorOffset,
-    bg: palette.bg
+    bg: palette.bg,
+    muted: mutedFill(palette)
   };
   for (const cell of layout.cells) {
     const w = Math.max(0, cell.x1 - cell.x0);
@@ -281,7 +283,7 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const showVal = valStr.length > 0 && w > 110;
       const valW = showVal ? measureText(valStr, 10.5) : 0;
       const labelMax = w - 8 - ICON_RESERVE - (showVal ? valW + 10 : 0);
-      g.append("text").attr("class", "dgmo-treemap-header").attr("x", 6).attr("y", 13).attr("font-size", 11).attr("font-weight", 700).attr("fill", ink).text(clipLabel(cell.label, Math.max(0, labelMax), 11));
+      g.append("text").attr("class", "dgmo-treemap-header").attr("x", 6).attr("y", 13).attr("font-size", 11).attr("font-weight", "bold").attr("fill", ink).text(clipLabel(cell.label, Math.max(0, labelMax), 11));
       if (showVal) {
         g.append("text").attr("class", "dgmo-treemap-header-value").attr("x", w - ICON_RESERVE - 4).attr("y", 13).attr("text-anchor", "end").attr("font-size", 10.5).attr("fill", ink).attr("opacity", 0.75).text(valStr);
       }
@@ -304,7 +306,7 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const vfs = clamp(Math.round(fs * 0.42), 11, 28);
       const valOpacity = Math.max(0.45, nameOpacity - 0.1);
       let y = PAD + Math.round(fs * 0.78);
-      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD).attr("y", y).attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
+      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD).attr("y", y).attr("font-size", fs).attr("font-weight", "bold").attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
       const valParts = [
         opts.noValues ? "" : compactNumber(cell.value),
         opts.noPercent ? "" : formatPct(cell.pctOfRoot)
@@ -410,7 +412,7 @@ function drawVerticalLabel(g, label, w, h, pad, ink) {
     fs = Math.max(MIN_FS, Math.floor(fs * availLen / nameW));
   const text = clipLabel(label, availLen, fs);
   if (!text) return;
-  g.append("text").attr("class", "dgmo-treemap-label").attr("transform", `translate(${w / 2},${h / 2}) rotate(-90)`).attr("y", Math.round(fs * 0.28)).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", 0.95).text(text);
+  g.append("text").attr("class", "dgmo-treemap-label").attr("transform", `translate(${w / 2},${h / 2}) rotate(-90)`).attr("y", Math.round(fs * 0.28)).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", "bold").attr("fill", ink).attr("opacity", 0.95).text(text);
 }
 function descent(fs) {
   return Math.ceil(fs * 0.26);
@@ -439,4 +441,4 @@ export {
   renderTreemapForExport,
   renderTreemap
 };
-//# sourceMappingURL=chunk-DSXWJAOA.js.map
+//# sourceMappingURL=chunk-OMN4F42L.js.map

package/dist/{chunk-LM3HY3VG.js → chunk-P4U5GST7.js}

@@ -1,12 +1,12 @@
 import {
   buildPlacedNotes
-} from "./chunk-OWVDD5EC.js";
+} from "./chunk-2R2M2C6V.js";
 import {
   noteCanvasShift
 } from "./chunk-6EK55ART.js";
 import {
   measureText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   resolveNotes
 } from "./chunk-E6PNTYRK.js";
@@ -201,4 +201,4 @@ function layoutClassDiagram(parsed, options) {
 export {
   layoutClassDiagram
 };
-//# sourceMappingURL=chunk-LM3HY3VG.js.map
+//# sourceMappingURL=chunk-P4U5GST7.js.map

package/dist/{chunk-BH3BQICT.js → chunk-PKW4TLJC.js}

@@ -3,39 +3,45 @@ import {
 } from "./chunk-ICZ7M6IZ.js";
 import {
   layoutInfra
-} from "./chunk-VS2M72PF.js";
+} from "./chunk-RLJKH4ZO.js";
+import {
+  appendArrowheadMarkers
+} from "./chunk-XBJJP2HN.js";
 import {
   renderInlineText
-} from "./chunk-WGC42WJU.js";
+} from "./chunk-FWNJDD4U.js";
+import {
+  ScaleContext
+} from "./chunk-24YPR5EH.js";
 import {
+  ARROWHEAD_HEIGHT,
+  ARROWHEAD_WIDTH,
   COLLAPSE_BAR_HEIGHT,
   COLLAPSE_BAR_INSET,
+  EDGE_DASH,
   EDGE_LABEL_KNOCKOUT_OPACITY,
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
-} from "./chunk-FJ57274M.js";
-import {
-  ScaleContext
-} from "./chunk-24YPR5EH.js";
+} from "./chunk-IIEI7VK5.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-2F7AG7LA.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_OFFSET,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-253E5ISJ.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-LLZVRWVS.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -46,30 +52,32 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   parseInfra
-} from "./chunk-46KVXDUJ.js";
+} from "./chunk-O5QG5IFV.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   contrastText,
+  groupFill,
+  groupStroke,
   mix,
   shapeFill
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
 import {
   resolveColor
 } from "./chunk-XOGQY4EC.js";
@@ -80,13 +88,19 @@ import * as d3Shape from "d3-shape";
 
 // src/infra/roles.ts
 var ROLE_RULES = [
-  { keys: ["cache-hit"], role: { name: "Cache", color: "#22c55e" } },
-  { keys: ["firewall-block"], role: { name: "Firewall", color: "#ef4444" } },
-  { keys: ["ratelimit-rps"], role: { name: "Rate Limiter", color: "#eab308" } },
-  { keys: ["max-rps"], role: { name: "Service", color: "#3b82f6" } },
-  { keys: ["cb-error-threshold", "cb-latency-threshold-ms"], role: { name: "Circuit Breaker", color: "#a855f7" } },
-  { keys: ["concurrency"], role: { name: "Serverless", color: "#06b6d4" } },
-  { keys: ["buffer"], role: { name: "Queue", color: "#8b5cf6" } }
+  { keys: ["cache-hit"], role: { name: "Cache", colorToken: "green" } },
+  { keys: ["firewall-block"], role: { name: "Firewall", colorToken: "red" } },
+  {
+    keys: ["ratelimit-rps"],
+    role: { name: "Rate Limiter", colorToken: "yellow" }
+  },
+  { keys: ["max-rps"], role: { name: "Service", colorToken: "blue" } },
+  {
+    keys: ["cb-error-threshold", "cb-latency-threshold-ms"],
+    role: { name: "Circuit Breaker", colorToken: "purple" }
+  },
+  { keys: ["concurrency"], role: { name: "Serverless", colorToken: "cyan" } },
+  { keys: ["buffer"], role: { name: "Queue", colorToken: "teal" } }
 ];
 function inferRoles(properties) {
   const propKeys = new Set(properties.map((p) => p.key));
@@ -98,7 +112,7 @@ function inferRoles(properties) {
   }
   return roles;
 }
-var FANOUT_ROLE = { name: "Fan-Out", color: "#f97316" };
+var FANOUT_ROLE = { name: "Fan-Out", colorToken: "orange" };
 function collectFanoutSourceIds(edges) {
   const ids = /* @__PURE__ */ new Set();
   for (const e of edges) {
@@ -870,13 +884,28 @@ function nodeColor(_node, palette, isDark, severity, fillMode) {
 function edgeColor(_edge, palette) {
   return palette.textMuted;
 }
-function renderGroups(svg, groups, palette, _isDark, sc = buildScaledConstants(ScaleContext.identity())) {
+function resolveGroupTagFill(metadata, activeGroup, tagGroups, palette) {
+  if (!metadata) return null;
+  const tg = tagGroups.find(
+    (t) => t.name.toLowerCase() === activeGroup.toLowerCase()
+  );
+  if (!tg) return null;
+  const tagVal = metadata[tagAttrKey(tg.name)];
+  if (!tagVal) return null;
+  const tv = tg.values.find(
+    (v) => v.name.toLowerCase() === tagVal.toLowerCase()
+  );
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+function renderGroups(svg, groups, palette, isDark, sc = buildScaledConstants(ScaleContext.identity()), activeGroup, tagGroups) {
   for (const group of groups) {
     const g = svg.append("g").attr("class", "infra-group").attr("data-line-number", group.lineNumber).attr("data-node-toggle", group.id).style("cursor", "pointer");
-    const groupFill = mix(palette.surface, palette.bg, 40);
-    const groupStroke = palette.textMuted;
-    g.append("rect").attr("x", group.x).attr("y", group.y).attr("width", group.width).attr("height", group.height).attr("rx", 6).attr("fill", groupFill).attr("stroke", groupStroke).attr("stroke-opacity", 0.35).attr("stroke-width", 1);
-    g.append("text").attr("x", group.x + group.width / 2).attr("y", group.y + 16).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sGroupLabelFontSize).attr("font-weight", "600").attr("fill", palette.text).text(group.label);
+    const tagColor = activeGroup && tagGroups ? resolveGroupTagFill(group.metadata, activeGroup, tagGroups, palette) : null;
+    const frameFill = groupFill(palette, isDark, tagColor ?? void 0);
+    const frameStroke = groupStroke(palette, tagColor ?? void 0);
+    g.append("rect").attr("x", group.x).attr("y", group.y).attr("width", group.width).attr("height", group.height).attr("rx", 6).attr("fill", frameFill).attr("stroke", frameStroke).attr("stroke-opacity", tagColor ? 1 : 0.35).attr("stroke-width", 1);
+    g.append("text").attr("x", group.x + group.width / 2).attr("y", group.y + 16).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sGroupLabelFontSize).attr("font-weight", "bold").attr("fill", palette.text).text(group.label);
     const gi = typeof group.instances === "number" ? group.instances : typeof group.instances === "string" ? parseInt(String(group.instances), 10) || 0 : 0;
     if (gi > 1) {
       g.append("text").attr("x", group.x + group.width - 8).attr("y", group.y + 16).attr("text-anchor", "end").attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", palette.textMuted).text(`${gi}x`);
@@ -887,6 +916,17 @@ function renderEdgePaths(svg, edges, nodes, groups, palette, _isDark, animate, d
   const nodeMap = nodeMapWithGroups(nodes, groups);
   const maxRps = Math.max(...edges.map((e) => e.computedRps), 1);
   const { srcPts, tgtPts } = computePortPts(edges, nodeMap, direction);
+  const defs = svg.append("defs");
+  const edgeColors = new Set(edges.map((e) => edgeColor(e, palette)));
+  if (edgeColors.size > 0) {
+    appendArrowheadMarkers(defs, {
+      idPrefix: "infra",
+      width: ARROWHEAD_WIDTH,
+      height: ARROWHEAD_HEIGHT,
+      baseFill: palette.textMuted,
+      colors: edgeColors
+    });
+  }
   for (const edge of edges) {
     if (edge.points.length === 0) continue;
     const targetNode = nodeMap.get(edge.targetId);
@@ -907,9 +947,9 @@ function renderEdgePaths(svg, edges, nodes, groups, palette, _isDark, animate, d
     );
     const pathD = buildPathD(pts, direction);
     const edgeG = svg.append("g").attr("class", "infra-edge").attr("data-line-number", edge.lineNumber).attr("data-from", edge.sourceId).attr("data-to", edge.targetId);
-    const edgePath = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", color).attr("stroke-width", strokeW);
+    const edgePath = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", color).attr("stroke-width", strokeW).attr("marker-end", `url(#infra-arrow-${color.replace("#", "")})`);
     if (edge.async) {
-      edgePath.attr("stroke-dasharray", "6 4");
+      edgePath.attr("stroke-dasharray", EDGE_DASH);
     }
     if (animate && edge.computedRps > 0) {
       const baseDur = flowDuration(edge.computedRps, maxRps);
@@ -1023,7 +1063,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
     const strokeWidth = severity !== "normal" ? sc.sOverloadStrokeWidth : sc.sNodeStrokeWidth;
     g.append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", sc.sNodeBorderRadius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", strokeWidth);
     const headerCenterY = y + NODE_HEADER_HEIGHT / 2 + sc.sNodeFontSize * 0.35;
-    g.append("text").attr("x", node.x).attr("y", headerCenterY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sNodeFontSize).attr("font-weight", "600").attr("fill", textFill).text(node.label);
+    g.append("text").attr("x", node.x).attr("y", headerCenterY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sNodeFontSize).attr("font-weight", "bold").attr("fill", textFill).text(node.label);
     const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
     if (isNodeCollapsed) {
       const chevronY = y + node.height - 6;
@@ -1078,7 +1118,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
             key: "RPS",
             value: rpsText,
             valueFill: rpsColor,
-            fontWeight: "500",
+            fontWeight: "normal",
             inverted: rpsInverted,
             ...rpsInverted && { invertedBg: rpsColor }
           });
@@ -1147,9 +1187,13 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
             const pillY = rowY - sc.sMetaFontSize + 1;
             const pillW = node.width - pillPad * 2;
             g.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillW).attr("height", pillH).attr("rx", 3).attr("fill", row.invertedBg).attr("opacity", 0.9);
-            const pillTextColor = isDark ? "#ffffff" : palette.text;
-            g.append("text").attr("x", x + 10).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "600").attr("fill", pillTextColor).text(`${row.key}: `);
-            g.append("text").attr("x", valueX).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "600").attr("fill", pillTextColor).text(row.value);
+            const pillTextColor = contrastText(
+              row.invertedBg,
+              palette.textOnFillLight,
+              palette.textOnFillDark
+            );
+            g.append("text").attr("x", x + 10).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "bold").attr("fill", pillTextColor).text(`${row.key}: `);
+            g.append("text").attr("x", valueX).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", "bold").attr("fill", pillTextColor).text(row.value);
           } else {
             g.append("text").attr("x", x + 10).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", textFill).text(`${row.key}: `);
             g.append("text").attr("x", valueX).attr("y", rowY).attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("font-weight", row.fontWeight).attr("fill", row.valueFill).text(row.value);
@@ -1170,7 +1214,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
         const totalDotsWidth = roles.length * (sc.sRoleDotRadius * 2 + 2) - 2;
         const startX = node.x - totalDotsWidth / 2 + sc.sRoleDotRadius;
         for (let i = 0; i < roles.length; i++) {
-          g.append("circle").attr("cx", startX + i * (sc.sRoleDotRadius * 2 + 2)).attr("cy", dotY).attr("r", sc.sRoleDotRadius).attr("fill", roles[i].color);
+          g.append("circle").attr("cx", startX + i * (sc.sRoleDotRadius * 2 + 2)).attr("cy", dotY).attr("r", sc.sRoleDotRadius).attr("fill", palette.colors[roles[i].colorToken]);
         }
       }
       if (isCollapsedGroup) {
@@ -1259,7 +1303,7 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
   if (roles.length > 0) {
     const entries = roles.map((r) => ({
       value: r.name,
-      color: r.color,
+      color: palette.colors[r.colorToken],
       key: r.name.toLowerCase().replace(/\s+/g, "-")
     }));
     const pillWidth = measureLegendText("Capabilities", LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
@@ -1381,7 +1425,7 @@ function renderLegend(rootSvg, legendGroups, totalWidth, legendY, palette, isDar
       const badgeY = (LEGEND_HEIGHT - badgeH) / 2;
       const speedG = playbackEl.append("g").attr("data-playback-action", "set-speed").attr("data-playback-value", String(s)).style("cursor", "pointer");
       speedG.append("rect").attr("x", entryX).attr("y", badgeY).attr("width", slotW).attr("height", badgeH).attr("rx", badgeH / 2).attr("fill", isSpeedActive ? palette.primary : "transparent");
-      speedG.append("text").attr("x", entryX + slotW / 2).attr("y", entryY).attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("font-weight", isSpeedActive ? "600" : "400").attr("fill", isSpeedActive ? palette.bg : palette.textMuted).attr("text-anchor", "middle").text(label);
+      speedG.append("text").attr("x", entryX + slotW / 2).attr("y", entryY).attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("font-weight", isSpeedActive ? "bold" : "normal").attr("fill", isSpeedActive ? palette.bg : palette.textMuted).attr("text-anchor", "middle").text(label);
       entryX += slotW + SPEED_BADGE_GAP;
     }
   }
@@ -1472,7 +1516,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
       }
       @keyframes infra-pulse-cb {
         0%, 49% { stroke-dasharray: none; }
-        50%, 100% { stroke-dasharray: 6 4; }
+        50%, 100% { stroke-dasharray: ${EDGE_DASH}; }
       }
       .infra-node-warning > rect:first-of-type {
         animation: infra-pulse-warning ${NODE_PULSE_SPEED}s ease-in-out infinite;
@@ -1481,7 +1525,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         animation: infra-pulse-overload ${NODE_PULSE_OVERLOAD}s ease-in-out infinite;
       }
       .infra-node-cb-open > rect:first-of-type {
-        stroke-dasharray: 6 4;
+        stroke-dasharray: ${EDGE_DASH};
         animation: infra-pulse-cb 1s step-end infinite;
       }
       @keyframes infra-edge-throb {
@@ -1510,7 +1554,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   if (title && !fixedTitleH) {
     rootSvg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sc.sTitleY).attr("text-anchor", header.titleAnchor).attr("font-family", FONT_FAMILY).attr("font-size", sc.sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
   }
-  renderGroups(svg, layout.groups, palette, isDark, sc);
+  renderGroups(svg, layout.groups, palette, isDark, sc, activeGroup, tagGroups);
   const speedMultiplier = playback?.speed ?? 1;
   renderEdgePaths(
     svg,
@@ -1613,4 +1657,4 @@ export {
   renderInfra,
   parseAndLayoutInfra
 };
-//# sourceMappingURL=chunk-BH3BQICT.js.map
+//# sourceMappingURL=chunk-PKW4TLJC.js.map

package/dist/{chunk-GRN44Z6A.js → chunk-PQR7E3LY.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-NOTA6TEI.js";
 import {
   peelQuotedName
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   makeDgmoError
 } from "./chunk-5SI6T5A5.js";
@@ -787,4 +787,4 @@ export {
   resolveTaskName,
   calculateSchedule
 };
-//# sourceMappingURL=chunk-GRN44Z6A.js.map
+//# sourceMappingURL=chunk-PQR7E3LY.js.map

package/dist/{chunk-SH4PPRU7.js → chunk-Q5KGGW7Z.js}

@@ -7,7 +7,7 @@ import {
   extractColor,
   fillModeFromToken,
   parseFirstLine
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   makeDgmoError,
   makeFail
@@ -675,4 +675,4 @@ export {
   searchZones,
   parseClock
 };
-//# sourceMappingURL=chunk-SH4PPRU7.js.map
+//# sourceMappingURL=chunk-Q5KGGW7Z.js.map

package/dist/{chunk-RV5A3EGI.js → chunk-QDHOIBHZ.js}

@@ -1,63 +1,64 @@
 import {
   layoutERDiagram
-} from "./chunk-5VMUVJO4.js";
+} from "./chunk-5DWF3N3V.js";
 import {
   NOTE_BADGE_RADIUS,
   noteConnectorPoints,
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-Q74GP3GK.js";
-import {
-  EDGE_STROKE_WIDTH,
-  NODE_STROKE_WIDTH
-} from "./chunk-FJ57274M.js";
+} from "./chunk-37NDM5NW.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  EDGE_LABEL_KNOCKOUT_OPACITY,
+  EDGE_STROKE_WIDTH,
+  NODE_STROKE_WIDTH
+} from "./chunk-IIEI7VK5.js";
 import {
   layoutInlineHeader
-} from "./chunk-MG3DE3VO.js";
+} from "./chunk-2F7AG7LA.js";
 import {
   serializeSvg
-} from "./chunk-RU2HHHYA.js";
+} from "./chunk-LD2JSKU3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-253E5ISJ.js";
 import {
   getLegendExtent
-} from "./chunk-VRPV6QXR.js";
+} from "./chunk-LLZVRWVS.js";
 import {
   FONT_FAMILY
-} from "./chunk-53SEVJQM.js";
+} from "./chunk-ICLB27PZ.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-YT5ICQ4R.js";
+} from "./chunk-CKDYRVOC.js";
 import {
   measureText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   parseERDiagram
-} from "./chunk-ICVIJLBA.js";
+} from "./chunk-LLYHYPYG.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   contrastText,
   getSeriesColors,
   shapeFill
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
 
 // src/er/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -410,7 +411,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       const midPt = pts[midIdx];
       const bgW = measureText(edge.label, sEdgeLabelFontSize) + 8;
       const bgH = 16;
-      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2 - 1).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85).attr("class", "er-edge-label-bg");
+      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2 - 1).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", EDGE_LABEL_KNOCKOUT_OPACITY).attr("class", "er-edge-label-bg");
       edgeG.append("text").attr("x", midPt.x).attr("y", midPt.y + 4).attr("text-anchor", "middle").attr("fill", edgeColor).attr("font-size", sEdgeLabelFontSize).attr("class", "er-edge-label").text(edge.label);
     }
   }
@@ -603,4 +604,4 @@ export {
   renderERDiagram,
   renderERDiagramForExport
 };
-//# sourceMappingURL=chunk-RV5A3EGI.js.map
+//# sourceMappingURL=chunk-QDHOIBHZ.js.map