@diagrammo/dgmo 0.96.0 → 0.98.0

package/dist/{chunk-VLC6WNRD.js → chunk-GULGSH2Z.js}

@@ -3,6 +3,8 @@ var TITLE_FONT_SIZE = 20;
 var TITLE_FONT_WEIGHT = "bold";
 var TITLE_Y = 30;
 var TITLE_OFFSET = 40;
+var TITLE_SIDE_PAD = 12;
+var TITLE_LINE_HEIGHT = 24;
 var CAPTION_FONT_SIZE = 13;
 var CAPTION_FONT_WEIGHT = "normal";
 var CAPTION_LINE_HEIGHT = 18;
@@ -15,6 +17,8 @@ export {
   TITLE_FONT_WEIGHT,
   TITLE_Y,
   TITLE_OFFSET,
+  TITLE_SIDE_PAD,
+  TITLE_LINE_HEIGHT,
   CAPTION_FONT_SIZE,
   CAPTION_FONT_WEIGHT,
   CAPTION_LINE_HEIGHT,

package/dist/{chunk-H5NVCOEJ.js → chunk-GXBH7WNN.js}

@@ -11,10 +11,10 @@ import {
   META_FONT_SIZE,
   META_LINE_HEIGHT,
   SEPARATOR_GAP
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/family/layout.ts
 var MARGIN = 30;

package/dist/{chunk-7UWVHNPM.js → chunk-H242TVAE.js}

@@ -7,12 +7,12 @@ import {
 } from "./chunk-2CW5ZTNH.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   CARD_RADIUS,
   EDGE_DASH,
@@ -23,14 +23,14 @@ import {
   META_LINE_HEIGHT,
   NODE_STROKE_WIDTH,
   SEPARATOR_GAP
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
@@ -38,18 +38,18 @@ import {
   UNTAGGED_TAG_COLOR,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,

package/dist/{chunk-CD7VQCDL.js → chunk-H7XXQSYA.js}

@@ -1,27 +1,28 @@
-import {
-  renderNodeCard
-} from "./chunk-R2K5L4UA.js";
 import {
   placeEdgeLabels
-} from "./chunk-IN7XI6NO.js";
+} from "./chunk-4NMRS6HW.js";
 import {
   serializeSvg
-} from "./chunk-CYRB2JTN.js";
+} from "./chunk-YLKPRT6U.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar,
+  renderContainerCard,
+  renderNodeCard
+} from "./chunk-42AZPI2W.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,
   CARD_RADIUS,
-  COLLAPSE_BAR_HEIGHT,
   CONTAINER_HEADER_HEIGHT,
   CONTAINER_LABEL_FONT_SIZE,
   CONTAINER_META_FONT_SIZE,
@@ -35,14 +36,14 @@ import {
   META_LINE_HEIGHT,
   NODE_STROKE_WIDTH,
   SEPARATOR_GAP
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
@@ -54,12 +55,12 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   EYE_CLOSED_PATH,
   EYE_OPEN_PATH,
@@ -67,10 +68,10 @@ import {
   LEGEND_EYE_SIZE,
   LEGEND_GROUP_GAP,
   LEGEND_HEIGHT
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,
@@ -170,7 +171,6 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT);
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleHeight = ctx.structural(TITLE_HEIGHT);
-  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT);
   const sLegendFixedGap = ctx.aesthetic(LEGEND_FIXED_GAP);
   const noLegend = legendSuppressed(parsed.options);
   const hasLegend = layout.legend.length > 0 && !noLegend;
@@ -296,33 +296,39 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     }
     const fill = containerFill(palette, isDark, c.color);
     const stroke = containerStroke(palette, c.color);
-    cG.append("rect").attr("x", 0).attr("y", 0).attr("width", c.width).attr("height", c.height).attr("rx", CONTAINER_RADIUS).attr("fill", fill).attr("stroke", stroke).attr("stroke-opacity", 0.35).attr("stroke-width", sNodeStrokeWidth);
-    cG.append("text").attr("x", c.width / 2).attr("y", sContainerHeaderHeight / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sContainerLabelFontSize).attr("font-weight", "bold").text(c.label);
-    const metaEntries = Object.entries(c.metadata);
-    if (metaEntries.length > 0) {
-      const metaDisplayKeys = metaEntries.map(
-        ([k]) => displayNames.get(k) ?? k
-      );
-      const maxKeyWidth = Math.max(
-        ...metaDisplayKeys.map(
-          (k) => measureText(`${k}: `, sContainerMetaFontSize)
-        )
-      );
-      const valueX = 10 + maxKeyWidth;
-      const metaStartY = sContainerHeaderHeight + sContainerMetaFontSize - 2;
-      for (let i = 0; i < metaEntries.length; i++) {
-        const [key, value] = metaEntries[i];
-        const displayKey = metaDisplayKeys[i];
-        const rowY = metaStartY + i * sContainerMetaLineHeight;
-        const valColor = tagColors.get(`${key}:${value.toLowerCase()}`) ?? palette.text;
-        cG.append("text").attr("x", 10).attr("y", rowY).attr("fill", palette.textMuted).attr("font-size", sContainerMetaFontSize).text(`${displayKey}: `);
-        cG.append("text").attr("x", valueX).attr("y", rowY).attr("fill", valColor).attr("font-size", sContainerMetaFontSize).text(value);
-      }
-    }
-    if (!exportDims && c.hiddenCount && c.hiddenCount > 0) {
-      const clipId = `clip-${c.nodeId}`;
-      cG.append("clipPath").attr("id", clipId).append("rect").attr("width", c.width).attr("height", c.height).attr("rx", CONTAINER_RADIUS);
-      cG.append("rect").attr("y", c.height - sCollapseBarHeight).attr("width", c.width).attr("height", sCollapseBarHeight).attr("fill", stroke).attr("clip-path", `url(#${clipId})`).attr("class", "sitemap-collapse-bar");
+    renderContainerCard(cG, {
+      width: c.width,
+      height: c.height,
+      rx: CONTAINER_RADIUS,
+      fill,
+      stroke,
+      strokeWidth: sNodeStrokeWidth,
+      label: c.label,
+      labelColor: palette.text,
+      labelFontSize: sContainerLabelFontSize,
+      headerHeight: sContainerHeaderHeight,
+      rows: Object.entries(c.metadata).map(
+        ([key, value]) => [
+          displayNames.get(key) ?? key,
+          value,
+          tagColors.get(`${key}:${value.toLowerCase()}`) ?? palette.text
+        ]
+      ),
+      keyColor: palette.textMuted,
+      metaFontSize: sContainerMetaFontSize,
+      metaLineHeight: sContainerMetaLineHeight
+    });
+    if (c.hasChildren) {
+      renderCollapseBar(cG, {
+        expanded: !c.hiddenCount,
+        width: c.width,
+        height: c.height,
+        rx: CONTAINER_RADIUS,
+        fill: stroke,
+        clipId: `clip-${c.nodeId}`,
+        prefix: "sitemap",
+        scale: ctx
+      });
     }
   }
   const labelCentres = placeSitemapEdgeLabels(layout, sEdgeLabelFontSize);
@@ -347,7 +353,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   for (const node of layout.nodes) {
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x - node.width / 2}, ${node.y})`).attr("class", "sitemap-node").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
     if (node.hasChildren) {
-      nodeG.attr("data-node-toggle", node.id).attr("role", "button").attr("aria-expanded", String(!node.hiddenCount));
+      nodeG.attr("data-node-toggle", node.id).attr("role", "button").attr("aria-expanded", String(!node.hiddenCount)).attr("aria-label", node.label);
     }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => onClickItem(node.lineNumber));
@@ -410,13 +416,17 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
         renderInlineText(textEl, processed, palette, sMetaFontSize);
       }
     }
-    if (!exportDims && node.hiddenCount && node.hiddenCount > 0) {
-      const clipId = `clip-${node.id}`;
-      nodeG.append("clipPath").attr("id", clipId).append("rect").attr("width", node.width).attr("height", node.height).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("y", node.height - sCollapseBarHeight).attr("width", node.width).attr("height", sCollapseBarHeight).attr(
-        "fill",
-        fillMode === "solid" ? labelColor : node.color ?? palette.primary
-      ).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
+    if (node.hasChildren) {
+      renderCollapseBar(nodeG, {
+        expanded: !node.hiddenCount,
+        width: node.width,
+        height: node.height,
+        rx: CARD_RADIUS,
+        fill: fillMode === "solid" ? labelColor : stroke,
+        clipId: `clip-${node.id}`,
+        prefix: "sitemap",
+        scale: ctx
+      });
     }
   }
   if (exportDims && hasLegend) {
@@ -507,8 +517,8 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   }
 }
 async function renderSitemapForExport(content, theme, palette) {
-  const { parseSitemap } = await import("./parser-UHKROC7Z.js");
-  const { layoutSitemap } = await import("./layout-IXQNVRBE.js");
+  const { parseSitemap } = await import("./parser-BA43YPIQ.js");
+  const { layoutSitemap } = await import("./layout-ZCCABSV7.js");
   const { getPalette, DEFAULT_PALETTE_ID } = await import("./palettes-4Y7CL2QL.js");
   const isDark = theme === "dark";
   const defaultCfg = getPalette(DEFAULT_PALETTE_ID);

package/dist/{chunk-GLCMUTO5.js → chunk-HQNZJMNS.js}

@@ -1,6 +1,6 @@
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/wireframe/layout.ts
 var DESKTOP_WIDTH = 1200;

package/dist/{chunk-WTPS73RM.js → chunk-II6D6NWX.js}

@@ -7,34 +7,34 @@ import {
   mutedFill,
   resolveCellColor,
   resolveColorMode
-} from "./chunk-5LG526X7.js";
+} from "./chunk-5TGZBHEJ.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   getSeriesColors,

package/dist/{chunk-3W73ZP6W.js → chunk-IMBFWXHF.js}

@@ -1,14 +1,14 @@
 import {
   searchPlacement
-} from "./chunk-VNAPEZX2.js";
+} from "./chunk-NHN6GBG7.js";
 import {
   buildPlacedNotes,
   noteCanvasShift,
   resolveNotes
-} from "./chunk-HH3DHNQA.js";
+} from "./chunk-UWWQECLC.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/er/layout.ts
 import dagre from "@dagrejs/dagre";

package/dist/{chunk-5ARANBIE.js → chunk-IUFTAFGN.js}

@@ -9,7 +9,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   MAP_DIRECTIVE_KEY_SET,
   MAP_REGISTRY,
@@ -18,7 +18,7 @@ import {
   peelRampColors,
   splitNameAndMeta,
   withTagAliases
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   NEGATIVE_VALUE_DX,
   emit,

package/dist/{chunk-AQRSEQZV.js → chunk-IZEKHIV6.js}

@@ -1,9 +1,9 @@
 import {
   compactNumber
-} from "./chunk-5LG526X7.js";
+} from "./chunk-5TGZBHEJ.js";
 import {
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   parseInlineMarkdown
 } from "./chunk-QKPOIJBT.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   getSeriesColors,
   mix,

package/dist/{chunk-WGNP5ND2.js → chunk-J3YM6RA5.js}

@@ -6,18 +6,18 @@ import {
 } from "./chunk-24YPR5EH.js";
 import {
   HEADER_HEIGHT
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   injectDefaultTagMetadata,
   resolveTagColor
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/mindmap/text-wrap.ts
 var H_PAD = 16;

package/dist/{chunk-YFIUABSF.js → chunk-J467QBZF.js}

@@ -7,11 +7,12 @@ import {
 } from "./chunk-NOTA6TEI.js";
 import {
   AUTO_TAG_COLOR_SENTINEL,
+  activeTagNoMatchMessage,
   finalizeAutoTagColors,
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   FAMILY_PERSON_REGISTRY,
   FAMILY_UNION_REGISTRY,
@@ -26,13 +27,14 @@ import {
   tokenizeQuoteAware,
   tryParseSharedOption,
   withTagAliases
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   nord,
   resolveColor
 } from "./chunk-3J7O3CU6.js";
 import {
-  emit
+  emit,
+  makeDgmoError
 } from "./chunk-BYU54C3S.js";
 
 // src/family/diagnostics.ts
@@ -148,6 +150,8 @@ function matchFamilyOption(line) {
   const h = line.match(/^highlight\s+(.+)$/i);
   if (h) return { key: "highlight", value: h[1].trim() };
   if (/^generations$/i.test(line)) return { key: "generations", value: "true" };
+  const at = line.match(/^active-tag\s+(.+)$/i);
+  if (at) return { key: "active-tag", value: at[1].trim() };
   if (/^no-daggers$/i.test(line)) return { key: "no-daggers", value: "true" };
   return null;
 }
@@ -157,6 +161,7 @@ function parseFamily(content, palette) {
   const unions = [];
   const tagGroups = [];
   const options = {};
+  let activeTagLine = 0;
   const rawLines = content.split("\n");
   let title;
   let titleLineNumber;
@@ -244,6 +249,7 @@ function parseFamily(content, palette) {
       const fam = matchFamilyOption(trimmed);
       if (fam) {
         options[fam.key] = fam.value;
+        if (fam.key === "active-tag") activeTagLine = lineNum;
         continue;
       }
     }
@@ -548,6 +554,20 @@ function parseFamily(content, palette) {
       delete options["highlight"];
     }
   }
+  const activeTagWarning = activeTagNoMatchMessage(
+    options["active-tag"],
+    tagGroups
+  );
+  if (activeTagWarning) {
+    diagnostics.push(
+      makeDgmoError(
+        activeTagLine || 1,
+        activeTagWarning,
+        "warning",
+        "W_ACTIVE_TAG_NO_MATCH"
+      )
+    );
+  }
   let error = null;
   const quotient = buildCoupleQuotient(frozenPersons, unions);
   if (quotient.cycle) {

package/dist/{chunk-EPDBWATV.js → chunk-K7RRXZHS.js}

@@ -1,16 +1,18 @@
 // src/utils/fit-canvas.ts
 var MIN_CANVAS_WIDTH = 480;
+var MIN_DRAWN_TEXT_PX = 7;
 function fitDiagramToCanvas(p) {
   const scaleX = (p.width - p.padding * 2) / p.diagramW;
   let scale;
   let canvasHeight;
   let canvasWidth;
   if (p.exportMode) {
-    scale = Math.min(p.maxScale, scaleX, 1);
+    const minScale = p.smallestTextPx ? MIN_DRAWN_TEXT_PX / p.smallestTextPx : 0;
+    scale = Math.max(Math.min(p.maxScale, scaleX, 1), minScale);
     canvasHeight = p.titleHeight + p.diagramH * scale + p.padding * 2;
     canvasWidth = Math.round(
       Math.min(
-        p.width,
+        scale > scaleX ? Infinity : p.width,
         Math.max(MIN_CANVAS_WIDTH, p.diagramW * scale + p.padding * 2)
       )
     );

package/dist/{chunk-TIPNNOZC.js → chunk-KKJG3LBY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EQJ3U5EW.js";
 import {
   layoutInfra
-} from "./chunk-5P2L5QXE.js";
+} from "./chunk-FZVCS2XY.js";
 import {
   FULL_TEXT_ATTR,
   fullNodeText
@@ -13,39 +13,41 @@ import {
 } from "./chunk-XBJJP2HN.js";
 import {
   placeEdgeLabels
-} from "./chunk-IN7XI6NO.js";
+} from "./chunk-4NMRS6HW.js";
 import {
   parseInfra
-} from "./chunk-VLI6AWS3.js";
+} from "./chunk-3C4OXVZJ.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-42AZPI2W.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_OFFSET,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.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-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
@@ -57,11 +59,11 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -72,12 +74,12 @@ import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_PILL_PAD,
   measureLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   groupFill,
@@ -172,7 +174,7 @@ function buildScaledConstants(ctx) {
     sNodeSeparatorGap: ctx.structural(NODE_SEPARATOR_GAP),
     sNodePadBottom: ctx.structural(NODE_PAD_BOTTOM),
     sCollapseBarHeight: ctx.structural(COLLAPSE_BAR_HEIGHT),
-    sCollapseBarInset: ctx.structural(COLLAPSE_BAR_INSET),
+    scale: ctx,
     sParticleR: ctx.structural(PARTICLE_R),
     sRejectParticleR: ctx.structural(PARTICLE_R),
     sRejectDropDistance: ctx.structural(REJECT_DROP_DISTANCE),
@@ -907,12 +909,24 @@ function resolveGroupTagFill(metadata, activeGroup, tagGroups, 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 g = svg.append("g").attr("class", "infra-group").attr("data-line-number", group.lineNumber).attr("data-node-toggle", group.id).attr("role", "button").attr("aria-expanded", "true").attr("aria-label", group.label).style("cursor", "pointer");
     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);
+    renderCollapseBar(g, {
+      expanded: true,
+      x: group.x,
+      y: group.y,
+      width: group.width,
+      height: group.height,
+      rx: 6,
+      fill: frameStroke,
+      clipId: `clip-group-${group.id.replace(/[^A-Za-z0-9_-]/g, "")}`,
+      prefix: "infra",
+      scale: sc.scale
+    });
     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`);
@@ -1107,7 +1121,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
     }
     const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id).attr("data-node-collapse", node.id).style("cursor", "pointer");
     if (node.id.startsWith("[")) {
-      g.attr("data-node-toggle", node.id);
+      g.attr("data-node-toggle", node.id).attr("role", "button").attr("aria-expanded", "false").attr("aria-label", node.label);
     }
     for (const [tagKey, tagVal] of Object.entries(node.tags)) {
       g.attr(`data-tag-${tagAttrKey(tagKey)}`, tagVal.toLowerCase());
@@ -1290,9 +1304,17 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
         }
       }
       if (isCollapsedGroup) {
-        const clipId = `clip-${node.id.replace(/[[\]\s]/g, "")}`;
-        g.append("clipPath").attr("id", clipId).append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", sc.sNodeBorderRadius);
-        g.append("rect").attr("x", x + sc.sCollapseBarInset).attr("y", y + node.height - sc.sCollapseBarHeight).attr("width", node.width - sc.sCollapseBarInset * 2).attr("height", sc.sCollapseBarHeight).attr("fill", stroke).attr("clip-path", `url(#${clipId})`).attr("class", "infra-collapse-bar");
+        renderCollapseBar(g, {
+          x,
+          y,
+          width: node.width,
+          height: node.height,
+          rx: sc.sNodeBorderRadius,
+          fill: stroke,
+          clipId: `clip-${node.id.replace(/[[\]\s]/g, "")}`,
+          prefix: "infra",
+          scale: sc.scale
+        });
       }
     }
   }