@diagrammo/dgmo 0.96.0 → 0.98.0

package/dist/{chunk-OO4GUE4E.js → chunk-3F74NDUY.js}

@@ -3,34 +3,37 @@ import {
   capLabelColumn,
   computeTimeTicks,
   showFullOnHover
-} from "./chunk-NERQSSYD.js";
+} from "./chunk-D67YE4LR.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-42AZPI2W.js";
 import {
   INLINE_HEADER_PAD,
   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 {
   EDGE_DASH,
   GRID_DASH,
   HAIRLINE_DASH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   keepSwimlaneToggleFocus,
   renderIntegratedLegend,
   wireSwimlaneToggle
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   controlsGroupCapsuleWidth,
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -42,7 +45,7 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -57,12 +60,12 @@ import {
   LEGEND_PILL_PAD,
   measureLegendText,
   truncateLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   getEraColors,
@@ -116,7 +119,7 @@ function computeBarLabel(label, x1, barWidth, innerWidth, textColor, onFillColor
 var BAND_ACCENT_W = 4;
 var BAND_RADIUS = 4;
 var bandClipCounter = 0;
-function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, fillMode, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W) {
+function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, fillMode, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W, collapsed = false, scale) {
   const bandX = 5;
   const bandW = leftMargin - 7;
   const bandY = y - barH / 2;
@@ -128,6 +131,45 @@ function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix,
     tint.attr(dataAttr.key, dataAttr.value);
     accent.attr(dataAttr.key, dataAttr.value);
   }
+  if (collapsed) {
+    renderCollapseBar(svg, {
+      x: bandX,
+      y: bandY,
+      width: bandW,
+      height: barH,
+      rx: bandRadius,
+      fill: color,
+      clipId: `${clipId}-bar`,
+      prefix: "gantt",
+      ...scale && { scale }
+    }).style("pointer-events", "none");
+  }
+  return {
+    x: bandX,
+    y: bandY,
+    width: bandW,
+    height: barH,
+    rx: bandRadius,
+    color,
+    clipId
+  };
+}
+function renderBandToggleTarget(toggle, band, collapsed, scale) {
+  toggle.append("rect").attr("class", "gantt-group-label-hit").attr("x", band.x).attr("y", band.y).attr("width", band.width).attr("height", band.height).attr("rx", band.rx).attr("fill", "transparent");
+  if (!collapsed) {
+    renderCollapseBar(toggle, {
+      expanded: true,
+      x: band.x,
+      y: band.y,
+      width: band.width,
+      height: band.height,
+      rx: band.rx,
+      fill: band.color,
+      clipId: `${band.clipId}-bar`,
+      prefix: "gantt",
+      ...scale && { scale }
+    });
+  }
 }
 function appendTaskIcon(textEl, label, isMilestone, iconColor, textColor) {
   const icon = isMilestone ? "\u25C6" : "\u25CF";
@@ -453,7 +495,6 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
   for (const row of rows) {
     if (row.type === "lane-header") {
       const laneColor = row.laneColor === UNTAGGED_TAG_COLOR ? palette.textMuted : row.laneColor;
-      const toggleIcon = row.isCollapsed ? "\u25B6" : "\u25BC";
       const labelX = 10;
       let lx1 = 0;
       let lx2 = innerWidth;
@@ -480,7 +521,9 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         fillMode,
         sBarH,
         sBandRadius,
-        sBandAccentW
+        sBandAccentW,
+        row.isCollapsed,
+        ctx
       );
       const labelG = svg.append("g").attr("class", "gantt-lane-header").attr(`data-tag-${tagAttrKey(row.tagKey)}`, row.laneName.toLowerCase()).attr("data-lane", row.laneName).style("cursor", onToggleLane ? "pointer" : "default").on("click", () => {
         if (onToggleLane) onToggleLane(row.laneName);
@@ -500,7 +543,7 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         restoreHighlight();
         hideGanttDateIndicators(g);
       });
-      const laneFullText = toggleIcon + " " + row.laneName + (row.aggregateProgress !== null ? ` ${Math.round(row.aggregateProgress)}%` : "");
+      const laneFullText = row.laneName + (row.aggregateProgress !== null ? ` ${Math.round(row.aggregateProgress)}%` : "");
       const laneText = labelG.append("text").attr("x", labelX).attr("y", sMarginTop + yOffset + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", sFont11).attr("font-weight", "bold").attr("fill", laneColor);
       showFullOnHover(
         labelG,
@@ -541,7 +584,6 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
     } else if (row.type === "group") {
       const group = row.group;
       const isCollapsed = collapsedGroups?.has(group.name) ?? false;
-      const toggleIcon = isCollapsed ? "\u25B6" : "\u25BC";
       const tagColor = resolveTagColor(
         group.metadata,
         resolved.tagGroups,
@@ -549,7 +591,7 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         true
       );
       const groupColor = tagColor && tagColor !== UNTAGGED_TAG_COLOR ? tagColor : group.color ?? palette.textMuted;
-      renderLabelBand(
+      const groupBand = renderLabelBand(
         svg,
         sMarginTop + yOffset + sBarH / 2,
         leftMargin,
@@ -561,9 +603,11 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         fillMode,
         sBarH,
         sBandRadius,
-        sBandAccentW
+        sBandAccentW,
+        isCollapsed,
+        ctx
       );
-      const labelG = svg.append("g").attr("class", "gantt-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).style("cursor", onToggleGroup ? "pointer" : "default").on("click", () => {
+      const labelG = svg.append("g").attr("class", "gantt-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("data-group-toggle", group.name).attr("role", "button").attr("aria-expanded", String(!isCollapsed)).attr("aria-label", group.name).style("cursor", "pointer").on("click", () => {
         if (onToggleGroup) onToggleGroup(group.name);
       }).on("mouseenter", () => {
         highlightGroup(g, svg, group.name);
@@ -579,9 +623,10 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         resetHighlight(g, svg);
         hideGanttDateIndicators(g);
       });
+      renderBandToggleTarget(labelG, groupBand, isCollapsed, ctx);
       const groupIndent = group.depth <= 2 ? group.depth * 14 : 2 * 14 + (group.depth - 2) * 8;
       const labelX = 10 + groupIndent;
-      const groupFullText = toggleIcon + " " + group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
+      const groupFullText = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
       const groupText = labelG.append("text").attr("x", labelX).attr("y", sMarginTop + yOffset + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", sFont11).attr("font-weight", "bold").attr("fill", palette.text);
       showFullOnHover(
         labelG,

package/dist/{chunk-RGFVHYDP.js → chunk-3IUMSK72.js}

@@ -8,14 +8,14 @@ import {
   resolveActiveTagGroup,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   extractColor,
   fillModeFromToken,
   measureIndent,
   parseFirstLine,
   splitNameAndMeta
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   makeDgmoError,
   makeFail

package/dist/chunk-42AZPI2W.js

@@ -0,0 +1,150 @@
+import {
+  COLLAPSE_BAR_HEIGHT,
+  EDGE_DASH
+} from "./chunk-WH6E6SHC.js";
+import {
+  measureText
+} from "./chunk-PU5X3P3T.js";
+
+// src/utils/card.ts
+function renderNodeCard(container, opts) {
+  const rect = container.append("rect").attr("x", 0).attr("y", 0).attr("width", opts.width).attr("height", opts.height).attr("rx", opts.rx).attr("fill", opts.fill).attr("stroke", opts.stroke).attr("stroke-width", opts.strokeWidth);
+  if (opts.dashed) {
+    rect.attr("stroke-dasharray", EDGE_DASH);
+  }
+  const labelLines = opts.labelLines;
+  if (labelLines && labelLines.length > 1) {
+    const lineH = opts.labelFontSize * 1.2;
+    const midY = opts.headerHeight / 2;
+    const startY = midY - (labelLines.length - 1) * lineH / 2;
+    for (let li = 0; li < labelLines.length; li++) {
+      container.append("text").attr("x", opts.width / 2).attr("y", startY + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", opts.labelColor).attr("font-size", opts.labelFontSize).attr("font-weight", "bold").text(labelLines[li]);
+    }
+  } else {
+    container.append("text").attr("x", opts.width / 2).attr("y", opts.headerHeight / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("fill", opts.labelColor).attr("font-size", opts.labelFontSize).attr("font-weight", "bold").text(labelLines?.[0] ?? opts.label);
+  }
+  const meta = opts.meta;
+  if (!meta || meta.rows.length === 0) return;
+  container.append("line").attr("x1", 0).attr("y1", opts.headerHeight).attr("x2", opts.width).attr("y2", opts.headerHeight).attr("stroke", meta.separatorColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+  const keyX = meta.keyX ?? 10;
+  const maxKeyWidth = Math.max(
+    ...meta.rows.map(([key]) => measureText(`${key}: `, meta.fontSize))
+  );
+  const valueX = keyX + maxKeyWidth;
+  const metaStartY = opts.headerHeight + meta.separatorGap + meta.fontSize;
+  for (let i = 0; i < meta.rows.length; i++) {
+    const [displayKey, value] = meta.rows[i];
+    const rowY = metaStartY + i * meta.lineHeight;
+    container.append("text").attr("x", keyX).attr("y", rowY).attr("fill", meta.textColor).attr("font-size", meta.fontSize).text(`${displayKey}: `);
+    container.append("text").attr("x", valueX).attr("y", rowY).attr("fill", meta.textColor).attr("font-size", meta.fontSize).text(value);
+  }
+}
+function renderContainerCard(container, opts) {
+  container.append("rect").attr("x", 0).attr("y", 0).attr("width", opts.width).attr("height", opts.height).attr("rx", opts.rx).attr("fill", opts.fill).attr("stroke", opts.stroke).attr("stroke-opacity", 0.35).attr("stroke-width", opts.strokeWidth);
+  container.append("text").attr("x", opts.width / 2).attr("y", opts.headerHeight / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("fill", opts.labelColor).attr("font-size", opts.labelFontSize).attr("font-weight", "bold").text(opts.label);
+  if (opts.rows.length === 0) return;
+  const maxKeyWidth = Math.max(
+    ...opts.rows.map(([key]) => measureText(`${key}: `, opts.metaFontSize))
+  );
+  const valueX = 10 + maxKeyWidth;
+  const metaStartY = opts.headerHeight + opts.metaFontSize - 2;
+  for (let i = 0; i < opts.rows.length; i++) {
+    const [displayKey, value, valueColor] = opts.rows[i];
+    const rowY = metaStartY + i * opts.metaLineHeight;
+    container.append("text").attr("x", 10).attr("y", rowY).attr("fill", opts.keyColor).attr("font-size", opts.metaFontSize).text(`${displayKey}: `);
+    container.append("text").attr("x", valueX).attr("y", rowY).attr("fill", valueColor).attr("font-size", opts.metaFontSize).text(value);
+  }
+}
+function collapseBarHeight(scale) {
+  if (scale === void 0) return COLLAPSE_BAR_HEIGHT;
+  if (typeof scale === "number") return COLLAPSE_BAR_HEIGHT * scale;
+  return scale.structural(COLLAPSE_BAR_HEIGHT);
+}
+function renderCollapseBar(container, opts) {
+  const x = opts.x ?? 0;
+  const y = opts.y ?? 0;
+  const barHeight = collapseBarHeight(opts.scale);
+  container.append("clipPath").attr("id", opts.clipId).append("rect").attr("x", x).attr("y", y).attr("width", opts.width).attr("height", opts.height).attr("rx", opts.rx);
+  const bar = container.append("rect").attr("x", x).attr("y", y + opts.height - barHeight).attr("width", opts.width).attr("height", barHeight).attr("fill", opts.fill).attr("clip-path", `url(#${opts.clipId})`);
+  if (!opts.expanded) {
+    return bar.attr("class", `${opts.prefix}-collapse-bar dgmo-collapse-bar`);
+  }
+  return bar.attr(
+    "class",
+    `${opts.prefix}-collapse-bar-preview dgmo-collapse-bar-preview`
+  ).attr("opacity", 0).attr("pointer-events", "none");
+}
+var TOGGLE_ATTRS = [
+  "data-node-toggle",
+  "data-group-toggle",
+  "data-section-toggle",
+  "data-note-toggle"
+];
+var TOGGLE_CUE_ATTR = "data-dgmo-cue";
+var COLLAPSE_PREVIEW_HOVER_OPACITY = 0.35;
+function toggleCueCss(theme = "light") {
+  const cue = theme === "dark" ? "dark" : "light";
+  const scope = `[${TOGGLE_CUE_ATTR}="${cue}"] `;
+  const t = TOGGLE_ATTRS.map((a) => `${scope}[${a}]`);
+  const on = (suffix) => t.map((s) => s + suffix).join(",");
+  const step = cue === "dark" ? 1.2 : 0.95;
+  return `${t.join(",")}{cursor:pointer}${on(":hover>rect:first-child")},${on(":hover>path:first-child")}{filter:brightness(${step})}${on(":hover>rect[fill=transparent]:first-child")}{fill:${cue === "dark" ? "#fff" : "#000"};fill-opacity:${cue === "dark" ? 0.08 : 0.05}}${scope}.dgmo-collapse-bar-preview{transition:opacity 120ms ease-out}${on(":hover>.dgmo-collapse-bar-preview")}{opacity:${COLLAPSE_PREVIEW_HOVER_OPACITY}}${on(":focus-visible")}{outline:2px solid currentColor;outline-offset:2px}@media (prefers-reduced-motion:reduce){${scope}.dgmo-collapse-bar-preview{transition:none}}`;
+}
+function injectToggleCue(svg, theme) {
+  if (!svg || !TOGGLE_ATTRS.some((a) => svg.includes(`${a}=`))) return svg;
+  const found = svg.match(/<svg\b[^>]*>/);
+  if (found?.index == null) return svg;
+  const cue = theme === "dark" ? "dark" : "light";
+  const tag = found[0].includes(`${TOGGLE_CUE_ATTR}=`) ? found[0] : found[0].replace(/^<svg\b/, `<svg ${TOGGLE_CUE_ATTR}="${cue}"`);
+  svg = svg.slice(0, found.index) + tag + svg.slice(found.index + found[0].length);
+  const at = found.index + tag.length;
+  const css = toggleCueCss(cue);
+  if (svg.startsWith("<style>", at)) {
+    const end = svg.indexOf("</style>", at);
+    if (end !== -1) return `${svg.slice(0, end)}${css}${svg.slice(end)}`;
+  }
+  return `${svg.slice(0, at)}<style>${css}</style>${svg.slice(at)}`;
+}
+var TOGGLE_OPEN_TAG = /<[a-zA-Z][\w:-]*\b(?=[^>]*\sdata-(?:node|group|section|note)-toggle=)[^>]*>/g;
+var PREVIEW_BAR = /<rect\b[^>]*\bdgmo-collapse-bar-preview\b[^>]*>(?:<\/rect>)?/g;
+function stripFoldAffordance(svg) {
+  if (!TOGGLE_ATTRS.some((a) => svg.includes(`${a}=`))) return svg;
+  const clipIds = /* @__PURE__ */ new Set();
+  let out = svg.replace(PREVIEW_BAR, (rect) => {
+    const id = /clip-path="url\(#([^)"]+)\)"/.exec(rect)?.[1];
+    if (id) clipIds.add(id);
+    return "";
+  });
+  for (const id of clipIds) {
+    if (out.includes(`url(#${id})`)) continue;
+    const esc = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    out = out.replace(
+      new RegExp(`<clipPath\\b[^>]*\\sid="${esc}"[^>]*>[\\s\\S]*?</clipPath>`),
+      ""
+    );
+  }
+  return out.replace(
+    TOGGLE_OPEN_TAG,
+    (tag) => tag.replace(
+      /\s(?:role="button"|aria-expanded="[^"]*"|tabindex="[^"]*"|cursor="[^"]*")/g,
+      ""
+    ).replace(
+      /(\saria-label=")(?:Collapse|Expand) (\w)/,
+      (_m, head, first) => head + first.toUpperCase()
+    ).replace(/(\sstyle=")([^"]*)"/, (_m, head, body) => {
+      const rest = body.replace(/\s*cursor\s*:\s*[^;"]*;?/g, "").trim();
+      return rest ? `${head}${rest}"` : "";
+    })
+  );
+}
+
+export {
+  renderNodeCard,
+  renderContainerCard,
+  collapseBarHeight,
+  renderCollapseBar,
+  TOGGLE_CUE_ATTR,
+  toggleCueCss,
+  injectToggleCue,
+  stripFoldAffordance
+};

package/dist/{chunk-H7AXCRO7.js → chunk-453IWXZ3.js}

@@ -2346,16 +2346,6 @@ var ALIAS = {
   waist: "obliques",
   back: ["upper-back", "lats"]
 };
-var BODY_TERMS = [
-  .../* @__PURE__ */ new Set([
-    ...Object.values(FIGURES).flatMap((f) => Object.keys(f.parts)),
-    ...Object.values(SURFACE).flatMap((f) => Object.keys(f)),
-    ...Object.keys(ANATOMICAL),
-    ...Object.keys(ALIAS),
-    "left",
-    "right"
-  ])
-].sort();
 function resolvePartKey(figure, name) {
   const n = name.toLowerCase();
   const surface = surfaceFor(figure);
@@ -2388,7 +2378,6 @@ function getPartGeom(figure, key) {
 
 export {
   getFigure,
-  BODY_TERMS,
   resolvePartKey,
   getPartGeom
 };

package/dist/{chunk-FHX373L5.js → chunk-47INRTZ6.js}

@@ -1,10 +1,10 @@
 import {
   buildMapProjection
-} from "./chunk-EMGNCG5C.js";
+} from "./chunk-XZGXVN4T.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 
 // src/map/dimensions.ts
 import { geoPath } from "d3-geo";

package/dist/{chunk-IN7XI6NO.js → chunk-4NMRS6HW.js}

@@ -2,7 +2,7 @@ import {
   measureText,
   truncateText,
   wrapTextToWidth
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 
 // src/boxes-and-lines/label-placement.ts
 import { curveBasis } from "d3-shape";

package/dist/{chunk-JBAFAKGX.js → chunk-4PZP6URA.js}

@@ -1,25 +1,24 @@
 import {
   layoutOrg
-} from "./chunk-O2HNVNKO.js";
-import {
-  renderCollapseBar,
-  renderNodeCard
-} from "./chunk-R2K5L4UA.js";
+} from "./chunk-ZTKO2RD4.js";
 import {
   extractExportSvg,
   runInExportContainer
-} from "./chunk-TOHTKLKE.js";
+} from "./chunk-Q5Q5JLRT.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar,
+  renderContainerCard,
+  renderNodeCard
+} from "./chunk-42AZPI2W.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   CARD_RADIUS,
-  COLLAPSE_BAR_HEIGHT,
-  COLLAPSE_BAR_INSET,
   CONTAINER_HEADER_HEIGHT,
   CONTAINER_LABEL_FONT_SIZE,
   CONTAINER_META_FONT_SIZE,
@@ -32,36 +31,33 @@ 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 {
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   parseOrg
-} from "./chunk-WLGOIMTI.js";
+} from "./chunk-FDVUD3PR.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   EYE_CLOSED_PATH,
   EYE_OPEN_PATH,
   LEGEND_EYE_GAP,
   LEGEND_EYE_SIZE,
   LEGEND_HEIGHT
-} from "./chunk-UOCWYLYT.js";
-import {
-  measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   contrastText,
   groupFill,
@@ -119,8 +115,6 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
   const sContainerMetaFontSize = ctx.text(CONTAINER_META_FONT_SIZE);
   const sContainerMetaLineHeight = ctx.structural(CONTAINER_META_LINE_HEIGHT);
   const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT);
-  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT);
-  const sCollapseBarInset = ctx.structural(COLLAPSE_BAR_INSET);
   const sAncestorDotR = ctx.structural(ANCESTOR_DOT_R);
   const sAncestorLabelFontSize = ctx.text(ANCESTOR_LABEL_FONT_SIZE);
   const sAncestorRowHeight = ctx.structural(ANCESTOR_ROW_HEIGHT);
@@ -214,38 +208,34 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
     }
     const fill = containerFill(palette, isDark, colorOff ? void 0 : c.color);
     const stroke = containerStroke(palette, colorOff ? void 0 : c.color);
-    cG.append("rect").attr("x", 0).attr("y", 0).attr("width", c.width).attr("height", c.height).attr("rx", sContainerRadius).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 [, value] = metaEntries[i];
-        const displayKey = metaDisplayKeys[i];
-        const rowY = metaStartY + i * sContainerMetaLineHeight;
-        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", palette.text).attr("font-size", sContainerMetaFontSize).text(value);
-      }
-    }
-    if (!exportDims && c.hiddenCount && c.hiddenCount > 0) {
+    renderContainerCard(cG, {
+      width: c.width,
+      height: c.height,
+      rx: sContainerRadius,
+      fill,
+      stroke,
+      strokeWidth: sNodeStrokeWidth,
+      label: c.label,
+      labelColor: palette.text,
+      labelFontSize: sContainerLabelFontSize,
+      headerHeight: sContainerHeaderHeight,
+      rows: Object.entries(c.metadata).map(
+        ([k, value]) => [displayNames.get(k) ?? k, value, palette.text]
+      ),
+      keyColor: palette.textMuted,
+      metaFontSize: sContainerMetaFontSize,
+      metaLineHeight: sContainerMetaLineHeight
+    });
+    if (c.hasChildren) {
       renderCollapseBar(cG, {
+        expanded: !c.hiddenCount,
         width: c.width,
         height: c.height,
-        barHeight: sCollapseBarHeight,
-        inset: sCollapseBarInset,
         rx: sContainerRadius,
         fill: containerStroke(palette, colorOff ? void 0 : c.color),
         clipId: `clip-${c.nodeId}`,
-        className: "org-collapse-bar"
+        prefix: "org",
+        scale: ctx
       });
     }
     if (!exportDims && c.hasChildren && !rootNodeIds.has(c.nodeId)) {
@@ -333,16 +323,16 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
         }
       }
     });
-    if (!exportDims && node.hiddenCount && node.hiddenCount > 0) {
+    if (node.hasChildren) {
       renderCollapseBar(nodeG, {
+        expanded: !node.hiddenCount,
         width: node.width,
         height: node.height,
-        barHeight: sCollapseBarHeight,
-        inset: sCollapseBarInset,
         rx: sCardRadius,
         fill: fillMode === "solid" ? labelColor : nodeStroke(palette, colorOff ? void 0 : node.color),
         clipId: `clip-${node.id}`,
-        className: "org-collapse-bar"
+        prefix: "org",
+        scale: ctx
       });
     }
     if (!exportDims && node.hasChildren && !rootNodeIds.has(node.id)) {

package/dist/{chunk-5LG526X7.js → chunk-5TGZBHEJ.js}

@@ -1,7 +1,7 @@
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   mix
 } from "./chunk-6GXLAKUH.js";

package/dist/{chunk-BD4O4D2A.js → chunk-5WZYJC2P.js}

@@ -18,7 +18,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   AliasRegistry,
   C4_REGISTRY,
@@ -30,7 +30,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   formatDgmoError,
   makeDgmoError,

package/dist/{chunk-DPNSDCR3.js → chunk-65JFUANT.js}

@@ -1,6 +1,6 @@
 import {
   parseFirstLine
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   parseCloudReferenceFence,
   parseCloudReferenceUrl

package/dist/{chunk-EZ6BI5LL.js → chunk-6OUMYNAJ.js}

@@ -7,7 +7,7 @@ import {
   extractColor,
   fillModeFromToken,
   parseFirstLine
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   makeDgmoError,
   makeFail