@diagrammo/dgmo 0.77.0 → 0.79.0

package/dist/{chunk-SWUQJ5VR.js → chunk-EOG4QKKV.js}

@@ -4,54 +4,67 @@ import {
   layoutC4Containers,
   layoutC4Context,
   layoutC4Deployment
-} from "./chunk-FPRMP6YA.js";
+} from "./chunk-HJZ4OET2.js";
+import {
+  appendArrowheadMarkers,
+  appendReverseArrowheadMarkers
+} from "./chunk-XBJJP2HN.js";
 import {
   renderInlineText
-} from "./chunk-WGC42WJU.js";
+} from "./chunk-FWNJDD4U.js";
 import {
+  ARROWHEAD_HEIGHT,
+  ARROWHEAD_WIDTH,
   CARD_RADIUS,
+  COLLAPSE_BAR_HEIGHT,
+  CONTAINER_RADIUS,
+  EDGE_DASH,
+  EDGE_LABEL_KNOCKOUT_OPACITY,
   EDGE_STROKE_WIDTH,
+  LABEL_FONT_SIZE,
   META_FONT_SIZE,
   META_LINE_HEIGHT,
   NODE_STROKE_WIDTH
-} from "./chunk-FJ57274M.js";
+} from "./chunk-IIEI7VK5.js";
 import {
   serializeSvg
-} from "./chunk-RU2HHHYA.js";
+} from "./chunk-LD2JSKU3.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-DEW62ON3.js";
+} from "./chunk-VSPNH7LC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-U4DS2ODO.js";
+} from "./chunk-253E5ISJ.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,
   wrapTextToWidth
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.js";
 import {
   parseC4
-} from "./chunk-ZM27UI5O.js";
+} from "./chunk-IEK2FUWO.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
+  resolveGroupTagColor,
   tagAttrKey
-} from "./chunk-76LHNLGX.js";
+} from "./chunk-O2HU4AQN.js";
 import {
   fillModeFromOptions
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   contrastText,
+  groupFill,
   mix,
   shapeFill
-} from "./chunk-GLREDNBA.js";
+} from "./chunk-AMQFJ7P7.js";
 
 // src/c4/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -60,9 +73,6 @@ var DIAGRAM_PADDING = 20;
 var MAX_SCALE = 3;
 var TITLE_HEIGHT = 30;
 var TYPE_FONT_SIZE = 10;
-var NAME_FONT_SIZE = 14;
-var DESC_FONT_SIZE = 11;
-var DESC_LINE_HEIGHT = 16;
 var EDGE_LABEL_FONT_SIZE = 11;
 var TECH_FONT_SIZE = 10;
 var CARD_H_PAD = 20;
@@ -71,9 +81,6 @@ var TYPE_LABEL_HEIGHT = 18;
 var DIVIDER_GAP = 6;
 var NAME_HEIGHT = 20;
 var BOUNDARY_LABEL_FONT_SIZE = 12;
-var BOUNDARY_STROKE_WIDTH = 1.5;
-var BOUNDARY_RADIUS = 8;
-var DRILL_BAR_HEIGHT = 6;
 var CYLINDER_RY = 8;
 var PERSON_HEAD_R = 4;
 var PERSON_ARM_SPAN = 10;
@@ -141,10 +148,17 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
   const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
-  const AW = 10;
-  const AH = 7;
-  defs.append("marker").attr("id", "c4-arrow-end").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.textMuted);
-  defs.append("marker").attr("id", "c4-arrow-start").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", 0).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `${AW},0 0,${AH / 2} ${AW},${AH}`).attr("fill", palette.textMuted);
+  const markerOpts = {
+    idPrefix: "c4",
+    width: ARROWHEAD_WIDTH,
+    height: ARROWHEAD_HEIGHT,
+    baseFill: palette.textMuted
+  };
+  appendArrowheadMarkers(defs, markerOpts);
+  appendReverseArrowheadMarkers(defs, {
+    ...markerOpts,
+    reverseSuffix: "arrow-start"
+  });
   if (parsed.title && parsed.options["no-title"] !== "on") {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style(
       "cursor",
@@ -175,9 +189,9 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     const bidir = hasBidirectionalMarkers(edge.arrowType);
     const pathD = lineGenerator(edge.points);
     if (pathD) {
-      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow)");
       if (dashed) {
-        pathEl.attr("stroke-dasharray", "6 3");
+        pathEl.attr("stroke-dasharray", EDGE_DASH);
       }
       if (bidir) {
         pathEl.attr("marker-start", "url(#c4-arrow-start)");
@@ -194,7 +208,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       );
       const bgW = textW + 12;
       const bgH = (labelText ? 16 : 0) + (techText ? 14 : 0) + 4;
-      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.9).attr("class", "c4-edge-label-bg");
+      edgeG.append("rect").attr("x", midPt.x - bgW / 2).attr("y", midPt.y - bgH / 2).attr("width", bgW).attr("height", bgH).attr("rx", 3).attr("fill", palette.bg).attr("opacity", EDGE_LABEL_KNOCKOUT_OPACITY).attr("class", "c4-edge-label-bg");
       let textY = midPt.y;
       if (labelText && techText) {
         textY = midPt.y - 4;
@@ -247,7 +261,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     nodeG.append("text").attr("x", 0).attr("y", yPos + TYPE_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", TYPE_FONT_SIZE).attr("font-style", "italic").text(typeLabel);
     yPos += TYPE_LABEL_HEIGHT;
     if (node.type === "person") {
-      const textWidth = measureText(node.name, NAME_FONT_SIZE, { bold: true });
+      const textWidth = measureText(node.name, LABEL_FONT_SIZE, { bold: true });
       const gap = 6;
       const totalWidth = PERSON_ICON_W + gap + textWidth;
       const iconCx = -totalWidth / 2 + PERSON_ICON_W / 2;
@@ -255,38 +269,38 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       drawPersonIcon(
         nodeG,
         iconCx,
-        yPos + NAME_FONT_SIZE / 2 - 2,
+        yPos + LABEL_FONT_SIZE / 2 - 2,
         stroke
       );
-      nodeG.append("text").attr("x", textX).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+      nodeG.append("text").attr("x", textX).attr("y", yPos + LABEL_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", LABEL_FONT_SIZE).attr("font-weight", "bold").text(node.name);
     } else {
-      nodeG.append("text").attr("x", 0).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+      nodeG.append("text").attr("x", 0).attr("y", yPos + LABEL_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", LABEL_FONT_SIZE).attr("font-weight", "bold").text(node.name);
     }
     yPos += NAME_HEIGHT;
-    nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+    nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 1).attr("stroke-opacity", 0.3);
     yPos += DIVIDER_GAP;
     if (node.description) {
       const contentWidth = w - CARD_H_PAD * 2;
       const lines = wrapTextToWidth(
         node.description,
-        DESC_FONT_SIZE,
+        META_FONT_SIZE,
         contentWidth
       );
       for (const line2 of lines) {
-        const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+        const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + META_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE);
         renderInlineText(
           textEl,
           preprocessDescriptionLine(line2),
           palette,
-          DESC_FONT_SIZE
+          META_FONT_SIZE
         );
-        yPos += DESC_LINE_HEIGHT;
+        yPos += META_LINE_HEIGHT;
       }
     }
     if (node.drillable) {
       const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - COLLAPSE_BAR_HEIGHT).attr("width", w).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
   if (hasLegend) {
@@ -347,14 +361,14 @@ function drawCylinderCard(nodeG, w, h, fill, stroke, dashed) {
   ].join(" ");
   const el = nodeG.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
   if (dashed) {
-    el.attr("stroke-dasharray", "6 3");
+    el.attr("stroke-dasharray", EDGE_DASH);
   }
   nodeG.append("ellipse").attr("cx", 0).attr("cy", -h / 2 + ry).attr("rx", w / 2).attr("ry", ry).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
 }
 function drawCardRect(nodeG, w, h, fill, stroke, dashed) {
   const el = nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS).attr("ry", CARD_RADIUS).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", NODE_STROKE_WIDTH);
   if (dashed) {
-    el.attr("stroke-dasharray", "6 3");
+    el.attr("stroke-dasharray", EDGE_DASH);
   }
 }
 function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
@@ -372,9 +386,9 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
     const bidir = hasBidirectionalMarkers(edge.arrowType);
     const pathD = lineGenerator(edge.points);
     if (pathD) {
-      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow)");
       if (dashed) {
-        pathEl.attr("stroke-dasharray", "6 3");
+        pathEl.attr("stroke-dasharray", EDGE_DASH);
       }
       if (bidir) {
         pathEl.attr("marker-start", "url(#c4-arrow-start)");
@@ -404,7 +418,7 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
   }
   placeEdgeLabels(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");
+    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", EDGE_LABEL_KNOCKOUT_OPACITY).attr("class", "c4-edge-label-bg");
     let textY = lbl.y;
     if (lbl.labelText && lbl.techText) {
       textY = lbl.y - 4;
@@ -669,6 +683,21 @@ function renderLegend(parent, layout, palette, isDark, activeTagGroup, fixedWidt
     groups,
     activeGroup: activeTagGroup ?? null,
     mode: exportMode ? "export" : "preview",
+    // Keep inactive sibling tag groups visible as name-only pills, exactly as
+    // boxes-and-lines does. Without this a c4 reader cannot tell a second
+    // colouring dimension EXISTS — not merely that they cannot reach it: the
+    // author declared it and it rendered as nothing at all (#567).
+    //
+    // The pill carries `data-legend-group`, which is what the app walks up to
+    // on a click, and C4Preview already wires `onLegendGroupToggle` to flip the
+    // active dimension and write the `active-tag` directive back to source. So
+    // this needs no app change to be clickable.
+    //
+    // A CLI-rendered static SVG shows a pill nobody can click, and that is the
+    // accepted cost: knowing the dimension is there beats not knowing. Export
+    // mode is unaffected — `legend-layout.ts` drops non-active groups before
+    // this flag is consulted.
+    showInactivePills: true,
     palette,
     isDark,
     width: containerWidth
@@ -698,10 +727,17 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
   const offsetY = titleHeight + DIAGRAM_PADDING + legendReserveH;
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
-  const AW = 10;
-  const AH = 7;
-  defs.append("marker").attr("id", "c4-arrow-end").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", palette.textMuted);
-  defs.append("marker").attr("id", "c4-arrow-start").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", 0).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polygon").attr("points", `${AW},0 0,${AH / 2} ${AW},${AH}`).attr("fill", palette.textMuted);
+  const markerOpts = {
+    idPrefix: "c4",
+    width: ARROWHEAD_WIDTH,
+    height: ARROWHEAD_HEIGHT,
+    baseFill: palette.textMuted
+  };
+  appendArrowheadMarkers(defs, markerOpts);
+  appendReverseArrowheadMarkers(defs, {
+    ...markerOpts,
+    reverseSuffix: "arrow-start"
+  });
   if (parsed.title && parsed.options["no-title"] !== "on") {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).style(
       "cursor",
@@ -729,20 +765,27 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         onClickItem(b.lineNumber);
       });
     }
-    boundaryG.append("rect").attr("x", b.x).attr("y", b.y).attr("width", b.width).attr("height", b.height).attr("rx", BOUNDARY_RADIUS).attr("ry", BOUNDARY_RADIUS).attr("fill", boundaryFill).attr("stroke", boundaryStroke).attr("stroke-width", BOUNDARY_STROKE_WIDTH);
+    boundaryG.append("rect").attr("x", b.x).attr("y", b.y).attr("width", b.width).attr("height", b.height).attr("rx", CONTAINER_RADIUS).attr("ry", CONTAINER_RADIUS).attr("fill", boundaryFill).attr("stroke", boundaryStroke).attr("stroke-width", NODE_STROKE_WIDTH);
     boundaryG.append("text").attr("x", b.x + 12).attr("y", b.y + 16).attr("fill", palette.textMuted).attr("font-size", BOUNDARY_LABEL_FONT_SIZE).attr("font-style", "italic").text(`${b.label} \u2014 ${b.typeLabel}`);
   }
   if (layout.groupBoundaries.length > 0) {
-    const groupFill = mix(palette.surface, palette.bg, 15);
-    const groupStroke = mix(palette.textMuted, palette.bg, 60);
+    const neutralFill = mix(palette.surface, palette.bg, 15);
+    const neutralStroke = mix(palette.textMuted, palette.bg, 60);
     for (const gb of layout.groupBoundaries) {
+      const gbTagColor = resolveGroupTagColor(
+        gb.metadata,
+        parsed.tagGroups,
+        activeTagGroup ?? null
+      );
+      const groupFillColor = gbTagColor ? groupFill(palette, isDark, gbTagColor) : neutralFill;
+      const groupStrokeColor = gbTagColor ?? neutralStroke;
       const gbG = contentG.append("g").attr("class", "c4-group-boundary").attr("data-line-number", String(gb.lineNumber));
       if (onClickItem) {
         gbG.style("cursor", "pointer").on("click", () => {
           onClickItem(gb.lineNumber);
         });
       }
-      gbG.append("rect").attr("x", gb.x).attr("y", gb.y).attr("width", gb.width).attr("height", gb.height).attr("rx", 6).attr("ry", 6).attr("fill", groupFill).attr("stroke", groupStroke).attr("stroke-width", 1);
+      gbG.append("rect").attr("x", gb.x).attr("y", gb.y).attr("width", gb.width).attr("height", gb.height).attr("rx", CONTAINER_RADIUS).attr("ry", CONTAINER_RADIUS).attr("fill", groupFillColor).attr("stroke", groupStrokeColor).attr("stroke-width", NODE_STROKE_WIDTH);
       gbG.append("text").attr("x", gb.x + 10).attr("y", gb.y + 14).attr("fill", palette.textMuted).attr("font-size", BOUNDARY_LABEL_FONT_SIZE).attr("font-style", "italic").text(gb.label);
     }
   }
@@ -827,7 +870,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       yPos += TYPE_LABEL_HEIGHT;
     }
     if (node.type === "person") {
-      const textWidth = measureText(node.name, NAME_FONT_SIZE, { bold: true });
+      const textWidth = measureText(node.name, LABEL_FONT_SIZE, { bold: true });
       const gap = 6;
       const totalWidth = PERSON_ICON_W + gap + textWidth;
       const iconCx = -totalWidth / 2 + PERSON_ICON_W / 2;
@@ -835,12 +878,12 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
       drawPersonIcon(
         nodeG,
         iconCx,
-        yPos + NAME_FONT_SIZE / 2 - 2,
+        yPos + LABEL_FONT_SIZE / 2 - 2,
         stroke
       );
-      nodeG.append("text").attr("x", textX).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+      nodeG.append("text").attr("x", textX).attr("y", yPos + LABEL_FONT_SIZE / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", LABEL_FONT_SIZE).attr("font-weight", "bold").text(node.name);
     } else {
-      nodeG.append("text").attr("x", 0).attr("y", yPos + NAME_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", NAME_FONT_SIZE).attr("font-weight", "bold").text(node.name);
+      nodeG.append("text").attr("x", 0).attr("y", yPos + LABEL_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", LABEL_FONT_SIZE).attr("font-weight", "bold").text(node.name);
     }
     yPos += NAME_HEIGHT;
     if (node.type === "container") {
@@ -848,23 +891,23 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         const contentWidth = w - CARD_H_PAD * 2;
         const lines = wrapTextToWidth(
           node.description,
-          DESC_FONT_SIZE,
+          META_FONT_SIZE,
           contentWidth
         );
         for (const line2 of lines) {
-          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + META_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE);
           renderInlineText(
             textEl,
             preprocessDescriptionLine(line2),
             palette,
-            DESC_FONT_SIZE
+            META_FONT_SIZE
           );
-          yPos += DESC_LINE_HEIGHT;
+          yPos += META_LINE_HEIGHT;
         }
       }
       const metaEntries = collectCardMetadata(node.metadata);
       if (metaEntries.length > 0) {
-        nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+        nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 1).attr("stroke-opacity", 0.3);
         yPos += DIVIDER_GAP;
         const maxKeyWidth = Math.max(
           ...metaEntries.map((e) => measureText(`${e.key}: `, META_FONT_SIZE))
@@ -877,31 +920,31 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         }
       }
     } else {
-      nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
+      nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD / 2).attr("y2", yPos).attr("stroke", fillMode === "solid" ? onFillText : stroke).attr("stroke-width", 1).attr("stroke-opacity", 0.3);
       yPos += DIVIDER_GAP;
       if (node.description) {
         const contentWidth = w - CARD_H_PAD * 2;
         const lines = wrapTextToWidth(
           node.description,
-          DESC_FONT_SIZE,
+          META_FONT_SIZE,
           contentWidth
         );
         for (const line2 of lines) {
-          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + DESC_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", DESC_FONT_SIZE);
+          const textEl = nodeG.append("text").attr("x", 0).attr("y", yPos + META_FONT_SIZE / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE);
           renderInlineText(
             textEl,
             preprocessDescriptionLine(line2),
             palette,
-            DESC_FONT_SIZE
+            META_FONT_SIZE
           );
-          yPos += DESC_LINE_HEIGHT;
+          yPos += META_LINE_HEIGHT;
         }
       }
     }
     if (node.drillable) {
       const clipId = `clip-drill-${node.id.replace(/\s+/g, "-")}`;
       nodeG.append("clipPath").attr("id", clipId).append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS);
-      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - DRILL_BAR_HEIGHT).attr("width", w).attr("height", DRILL_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
+      nodeG.append("rect").attr("x", -w / 2).attr("y", h / 2 - COLLAPSE_BAR_HEIGHT).attr("width", w).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", fillMode === "solid" ? onFillText : stroke).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
   if (hasLegend) {
@@ -1039,4 +1082,4 @@ export {
   renderC4Deployment,
   renderC4DeploymentForExport
 };
-//# sourceMappingURL=chunk-SWUQJ5VR.js.map
+//# sourceMappingURL=chunk-EOG4QKKV.js.map

package/dist/chunk-EPDBWATV.js

@@ -0,0 +1,38 @@
+// src/utils/fit-canvas.ts
+var MIN_CANVAS_WIDTH = 480;
+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);
+    canvasHeight = p.titleHeight + p.diagramH * scale + p.padding * 2;
+    canvasWidth = Math.round(
+      Math.min(
+        p.width,
+        Math.max(MIN_CANVAS_WIDTH, p.diagramW * scale + p.padding * 2)
+      )
+    );
+  } else {
+    const availH = p.height - p.titleHeight;
+    const scaleY = (availH - p.padding * 2) / p.diagramH;
+    scale = Math.min(p.maxScale, scaleX, scaleY);
+    canvasHeight = p.height;
+    canvasWidth = p.width;
+  }
+  const scaledW = p.diagramW * scale;
+  return {
+    scale,
+    offsetX: (canvasWidth - scaledW) / 2,
+    offsetY: p.titleHeight + p.padding,
+    canvasHeight,
+    canvasWidth
+  };
+}
+
+export {
+  MIN_CANVAS_WIDTH,
+  fitDiagramToCanvas
+};
+//# sourceMappingURL=chunk-EPDBWATV.js.map

package/dist/{chunk-5GM6BZO7.js → chunk-F66R7CPY.js}

@@ -1,12 +1,15 @@
+import {
+  EDGE_DASH
+} from "./chunk-IIEI7VK5.js";
 import {
   measureText
-} from "./chunk-MTGGOCND.js";
+} from "./chunk-YC6GVLTI.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", "6 3");
+    rect.attr("stroke-dasharray", EDGE_DASH);
   }
   const labelLines = opts.labelLines;
   if (labelLines && labelLines.length > 1) {
@@ -44,4 +47,4 @@ export {
   renderNodeCard,
   renderCollapseBar
 };
-//# sourceMappingURL=chunk-5GM6BZO7.js.map
+//# sourceMappingURL=chunk-F66R7CPY.js.map

package/dist/{chunk-7BMX2M3F.js → chunk-FFDHZVEL.js}

@@ -2,7 +2,7 @@ import {
   extractColor,
   measureIndent,
   parseFirstLine
-} from "./chunk-M5OOAP65.js";
+} from "./chunk-4CA7TJ44.js";
 import {
   emit,
   formatDgmoError,
@@ -507,4 +507,4 @@ export {
   VERSION_CONTROL_DIAGNOSTICS,
   parseVersionControl
 };
-//# sourceMappingURL=chunk-7BMX2M3F.js.map
+//# sourceMappingURL=chunk-FFDHZVEL.js.map

package/dist/{chunk-WGC42WJU.js → chunk-FWNJDD4U.js}

@@ -1,3 +1,7 @@
+import {
+  MONO_FAMILY
+} from "./chunk-ICLB27PZ.js";
+
 // src/utils/safe-href.ts
 var ALLOWED_SCHEMES = ["http", "https", "mailto"];
 var SCHEME_RE = /^([a-z][a-z0-9+.-]*):/i;
@@ -76,7 +80,7 @@ function renderInlineText(textEl, text, palette, fontSize) {
       if (span.bold) tspan.attr("font-weight", "bold");
       if (span.italic) tspan.attr("font-style", "italic");
       if (span.code) {
-        tspan.attr("font-family", "monospace");
+        tspan.attr("font-family", MONO_FAMILY);
         if (fontSize) tspan.attr("font-size", fontSize - 1);
       }
     }
@@ -90,4 +94,4 @@ export {
   stripInlineMarkdown,
   renderInlineText
 };
-//# sourceMappingURL=chunk-WGC42WJU.js.map
+//# sourceMappingURL=chunk-FWNJDD4U.js.map