@diagrammo/dgmo 0.30.0 → 0.31.0

package/dist/index.js

@@ -318,7 +318,7 @@ function resolveColorWithDiagnostic(color, line11, diagnostics, palette) {
   );
   return void 0;
 }
-var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
+var nord, colorNames, RECOGNIZED_COLOR_NAMES, CATEGORICAL_COLOR_ORDER, seriesColors;
 var init_colors = __esm({
   "src/colors.ts"() {
     "use strict";
@@ -376,6 +376,16 @@ var init_colors = __esm({
       "black",
       "white"
     ]);
+    CATEGORICAL_COLOR_ORDER = Object.freeze([
+      "red",
+      "green",
+      "blue",
+      "yellow",
+      "teal",
+      "purple",
+      "orange",
+      "cyan"
+    ]);
     seriesColors = [
       nord.nord10,
       // blue
@@ -1229,11 +1239,7 @@ var init_tag_groups = __esm({
     init_diagnostics();
     init_colors();
     AUTO_TAG_COLOR_SENTINEL = "";
-    autoTagColorCycle = Object.freeze(
-      RECOGNIZED_COLOR_NAMES.filter(
-        (n) => n !== "gray" && n !== "black" && n !== "white"
-      )
-    );
+    autoTagColorCycle = CATEGORICAL_COLOR_ORDER;
     TAG_BLOCK_NOCOLON_RE = /^tag\s+/i;
     VALID_TAG_IDENT_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
   }
@@ -3023,7 +3029,7 @@ function shapeFill(palette, intent, isDark, opts) {
 }
 function getSeriesColors(palette) {
   const c = palette.colors;
-  return [c.blue, c.green, c.yellow, c.orange, c.purple, c.red, c.teal, c.cyan];
+  return CATEGORICAL_COLOR_ORDER.map((name) => c[name]);
 }
 function getSegmentColors(palette, count) {
   if (count <= 0) return [];
@@ -3076,6 +3082,7 @@ var POLITICAL_TINT_BANDS;
 var init_color_utils = __esm({
   "src/palettes/color-utils.ts"() {
     "use strict";
+    init_colors();
     POLITICAL_TINT_BANDS = {
       light: [32, 48, 64, 80],
       dark: [44, 58, 72, 86]
@@ -11532,7 +11539,7 @@ var init_chart_types = __esm({
       },
       {
         id: "map",
-        description: "Geographic concept map: highlight/score regions, drop points of interest, connect with routes or edges"
+        description: "Geographic map: a value or count per country, state, or region (choropleth); points of interest; routes. Use when categories are real-world places."
       },
       // ── Tier 3 — Specialized analytical charts ────────────────
       {
@@ -11549,7 +11556,7 @@ var init_chart_types = __esm({
       },
       {
         id: "slope",
-        description: "Change between two periods"
+        description: "Change for multiple things between exactly two periods"
       },
       {
         id: "sankey",
@@ -19005,6 +19012,7 @@ function parseBoxesAndLines(content, palette) {
   const nodes = [];
   const edges = [];
   const groups = [];
+  const nodePositions = /* @__PURE__ */ new Map();
   const result = {
     type: "boxes-and-lines",
     title: null,
@@ -19038,6 +19046,8 @@ function parseBoxesAndLines(content, palette) {
   }
   const groupStack = [];
   let contentStarted = false;
+  let inLayoutBlock = false;
+  const LAYOUT_ENTRY_RE = /^(.+?):\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*$/;
   let currentTagGroup = null;
   const metaAliasMap = /* @__PURE__ */ new Map();
   const nameAliasMap = /* @__PURE__ */ new Map();
@@ -19239,6 +19249,42 @@ function parseBoxesAndLines(content, palette) {
     if (currentTagGroup && indent === 0) {
       currentTagGroup = null;
     }
+    if (!inLayoutBlock && indent === 0 && trimmed === "layout") {
+      let isBlock = false;
+      for (let j = i + 1; j < lines.length; j++) {
+        const peek = lines[j];
+        if (!peek.trim()) continue;
+        isBlock = measureIndent2(peek) > 0 && LAYOUT_ENTRY_RE.test(peek.trim());
+        break;
+      }
+      if (isBlock) {
+        flushDescription();
+        closeGroupsToIndent(0);
+        inLayoutBlock = true;
+        continue;
+      }
+    }
+    if (inLayoutBlock) {
+      if (indent > 0) {
+        const lm = trimmed.match(LAYOUT_ENTRY_RE);
+        if (lm) {
+          nodePositions.set(lm[1].trim(), {
+            x: Number(lm[2]),
+            y: Number(lm[3])
+          });
+        } else {
+          result.diagnostics.push(
+            makeDgmoError(
+              lineNum,
+              `Invalid layout entry "${trimmed}" \u2014 expected "<node-id>: <x>, <y>"`,
+              "warning"
+            )
+          );
+        }
+        continue;
+      }
+      inLayoutBlock = false;
+    }
     if (descState !== null) {
       if (indent > descState.indent) {
         if (trimmed.includes("->") || trimmed.includes("<->")) {
@@ -19491,6 +19537,22 @@ function parseBoxesAndLines(content, palette) {
     );
   }
   finalizeAutoTagColors(result.tagGroups);
+  if (nodePositions.size > 0) {
+    const nodeLabelSet = new Set(result.nodes.map((n) => n.label));
+    for (const id of nodePositions.keys()) {
+      if (!nodeLabelSet.has(id)) {
+        pushWarning(0, `layout entry for unknown node "${id}" (ignored)`);
+      }
+    }
+    const unpositioned = result.nodes.filter((n) => !nodePositions.has(n.label)).map((n) => n.label);
+    if (unpositioned.length > 0) {
+      pushWarning(
+        0,
+        `layout block is partial \u2014 ${unpositioned.length} node(s) without coordinates (${unpositioned.slice(0, 5).join(", ")}${unpositioned.length > 5 ? "\u2026" : ""}); ignoring the block and auto-laying-out`
+      );
+    }
+    result.nodePositions = nodePositions;
+  }
   if (result.tagGroups.length > 0) {
     injectDefaultTagMetadata(result.nodes, result.tagGroups);
     validateTagValues(result.nodes, result.tagGroups, pushWarning, suggest);
@@ -21591,7 +21653,18 @@ function parseJourneyMap(content, palette) {
             }
           }
         } else {
-          personaName = afterKeyword;
+          const colorMatch = afterKeyword.match(/^(.+?)\s+color:\s*(\S+)$/i);
+          if (colorMatch) {
+            personaName = colorMatch[1].trim();
+            personaColor = resolveColorWithDiagnostic(
+              colorMatch[2],
+              lineNumber,
+              result.diagnostics,
+              palette
+            ) ?? void 0;
+          } else {
+            personaName = afterKeyword;
+          }
         }
         if (!personaName) {
           return fail(lineNumber, "persona requires a name");
@@ -24532,6 +24605,63 @@ var init_export_container = __esm({
   }
 });
 
+// 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");
+  }
+  container.append("text").attr("x", opts.width / 2).attr("y", opts.headerHeight / 2 + opts.labelFontSize / 2 - 2).attr("text-anchor", "middle").attr("fill", opts.labelColor).attr("font-size", opts.labelFontSize).attr("font-weight", "bold").text(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 renderCollapseBar(container, opts) {
+  container.append("clipPath").attr("id", opts.clipId).append("rect").attr("width", opts.width).attr("height", opts.height).attr("rx", opts.rx);
+  container.append("rect").attr("x", opts.inset).attr("y", opts.height - opts.barHeight).attr("width", opts.width - opts.inset * 2).attr("height", opts.barHeight).attr("fill", opts.fill).attr("clip-path", `url(#${opts.clipId})`).attr("class", opts.className);
+}
+var init_card = __esm({
+  "src/utils/card.ts"() {
+    "use strict";
+    init_text_measure();
+  }
+});
+
+// src/utils/visual-conventions.ts
+var NODE_STROKE_WIDTH, EDGE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, COLLAPSE_BAR_INSET, HEADER_HEIGHT2, LABEL_FONT_SIZE2, META_FONT_SIZE2, META_LINE_HEIGHT2, SEPARATOR_GAP2, COLLAPSE_BAR_HEIGHT, CONTAINER_HEADER_HEIGHT, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2;
+var init_visual_conventions = __esm({
+  "src/utils/visual-conventions.ts"() {
+    "use strict";
+    NODE_STROKE_WIDTH = 1.5;
+    EDGE_STROKE_WIDTH = 1.5;
+    CARD_RADIUS = 6;
+    CONTAINER_RADIUS = 8;
+    COLLAPSE_BAR_INSET = 0;
+    HEADER_HEIGHT2 = 28;
+    LABEL_FONT_SIZE2 = 13;
+    META_FONT_SIZE2 = 11;
+    META_LINE_HEIGHT2 = 16;
+    SEPARATOR_GAP2 = 6;
+    COLLAPSE_BAR_HEIGHT = 6;
+    CONTAINER_HEADER_HEIGHT = 28;
+    CONTAINER_LABEL_FONT_SIZE = 13;
+    CONTAINER_META_FONT_SIZE = 11;
+    CONTAINER_META_LINE_HEIGHT2 = 16;
+  }
+});
+
 // src/org/renderer.ts
 var renderer_exports = {};
 __export(renderer_exports, {
@@ -24690,9 +24820,16 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       }
     }
     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", sContainerRadius);
-      cG.append("rect").attr("x", sCollapseBarInset).attr("y", c.height - sCollapseBarHeight).attr("width", c.width - sCollapseBarInset * 2).attr("height", sCollapseBarHeight).attr("fill", containerStroke(palette, colorOff ? void 0 : c.color)).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
+      renderCollapseBar(cG, {
+        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"
+      });
     }
     if (!exportDims && c.hasChildren && !rootNodeIds.has(c.nodeId)) {
       const iconSize = 14;
@@ -24743,42 +24880,48 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       solid
     );
     const stroke2 = nodeStroke(palette, colorOff ? void 0 : node.color);
-    const rect = nodeG.append("rect").attr("x", 0).attr("y", 0).attr("width", node.width).attr("height", node.height).attr("rx", sCardRadius).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sNodeStrokeWidth);
-    if (node.isContainer) {
-      rect.attr("stroke-dasharray", "6 3");
-    }
     const labelColor = contrastText(
       fill2,
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    nodeG.append("text").attr("x", node.width / 2).attr("y", sHeaderHeight / 2 + sLabelFontSize / 2 - 2).attr("text-anchor", "middle").attr("fill", labelColor).attr("font-size", sLabelFontSize).attr("font-weight", "bold").text(node.label);
     const metaEntries = Object.entries(node.metadata);
-    if (metaEntries.length > 0) {
-      nodeG.append("line").attr("x1", 0).attr("y1", sHeaderHeight).attr("x2", node.width).attr("y2", sHeaderHeight).attr("stroke", solid ? labelColor : stroke2).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
-      const metaDisplayKeys = metaEntries.map(
-        ([k]) => displayNames.get(k) ?? k
-      );
-      const maxKeyWidth = Math.max(
-        ...metaDisplayKeys.map((k) => measureText(`${k}: `, sMetaFontSize))
-      );
-      const valueX = 10 + maxKeyWidth;
-      const metaStartY = sHeaderHeight + sSeparatorGap + sMetaFontSize;
-      for (let i = 0; i < metaEntries.length; i++) {
-        const [, value] = metaEntries[i];
-        const displayKey = metaDisplayKeys[i];
-        const rowY = metaStartY + i * sMetaLineHeight;
-        nodeG.append("text").attr("x", 10).attr("y", rowY).attr("fill", labelColor).attr("font-size", sMetaFontSize).text(`${displayKey}: `);
-        nodeG.append("text").attr("x", valueX).attr("y", rowY).attr("fill", labelColor).attr("font-size", sMetaFontSize).text(value);
+    renderNodeCard(nodeG, {
+      width: node.width,
+      height: node.height,
+      rx: sCardRadius,
+      fill: fill2,
+      stroke: stroke2,
+      strokeWidth: sNodeStrokeWidth,
+      ...node.isContainer && { dashed: true },
+      label: node.label,
+      labelColor,
+      labelFontSize: sLabelFontSize,
+      headerHeight: sHeaderHeight,
+      ...metaEntries.length > 0 && {
+        meta: {
+          rows: metaEntries.map(
+            ([k, value]) => [displayNames.get(k) ?? k, value]
+          ),
+          fontSize: sMetaFontSize,
+          lineHeight: sMetaLineHeight,
+          separatorGap: sSeparatorGap,
+          separatorColor: solid ? labelColor : stroke2,
+          textColor: labelColor
+        }
       }
-    }
+    });
     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", sCardRadius);
-      nodeG.append("rect").attr("x", sCollapseBarInset).attr("y", node.height - sCollapseBarHeight).attr("width", node.width - sCollapseBarInset * 2).attr("height", sCollapseBarHeight).attr(
-        "fill",
-        solid ? labelColor : nodeStroke(palette, colorOff ? void 0 : node.color)
-      ).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
+      renderCollapseBar(nodeG, {
+        width: node.width,
+        height: node.height,
+        barHeight: sCollapseBarHeight,
+        inset: sCollapseBarInset,
+        rx: sCardRadius,
+        fill: solid ? labelColor : nodeStroke(palette, colorOff ? void 0 : node.color),
+        clipId: `clip-${node.id}`,
+        className: "org-collapse-bar"
+      });
     }
     if (!exportDims && node.hasChildren && !rootNodeIds.has(node.id)) {
       const iconSize = 14;
@@ -24922,7 +25065,7 @@ function renderOrgForExport(content, theme, palette) {
     return extractExportSvg(container, theme);
   });
 }
-var DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, LABEL_FONT_SIZE2, META_FONT_SIZE2, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, ANCESTOR_DOT_R, ANCESTOR_LABEL_FONT_SIZE, ANCESTOR_ROW_HEIGHT, ANCESTOR_TRAIL_BOTTOM_GAP, LEGEND_FIXED_GAP;
+var DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, ANCESTOR_DOT_R, ANCESTOR_LABEL_FONT_SIZE, ANCESTOR_ROW_HEIGHT, ANCESTOR_TRAIL_BOTTOM_GAP, LEGEND_FIXED_GAP;
 var init_renderer = __esm({
   "src/org/renderer.ts"() {
     "use strict";
@@ -24935,27 +25078,14 @@ var init_renderer = __esm({
     init_layout();
     init_legend_constants();
     init_legend_integration();
+    init_card();
     init_text_measure();
     init_legend_layout();
     init_title_constants();
+    init_visual_conventions();
     DIAGRAM_PADDING = 20;
     MAX_SCALE = 3;
     TITLE_HEIGHT = 30;
-    LABEL_FONT_SIZE2 = 13;
-    META_FONT_SIZE2 = 11;
-    META_LINE_HEIGHT2 = 16;
-    HEADER_HEIGHT2 = 28;
-    SEPARATOR_GAP2 = 6;
-    EDGE_STROKE_WIDTH = 1.5;
-    NODE_STROKE_WIDTH = 1.5;
-    CARD_RADIUS = 6;
-    CONTAINER_RADIUS = 8;
-    CONTAINER_LABEL_FONT_SIZE = 13;
-    CONTAINER_META_FONT_SIZE = 11;
-    CONTAINER_META_LINE_HEIGHT2 = 16;
-    CONTAINER_HEADER_HEIGHT = 28;
-    COLLAPSE_BAR_HEIGHT = 6;
-    COLLAPSE_BAR_INSET = 0;
     ANCESTOR_DOT_R = 4;
     ANCESTOR_LABEL_FONT_SIZE = 11;
     ANCESTOR_ROW_HEIGHT = 22;
@@ -25739,21 +25869,21 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
   if (width <= 0 || height <= 0) return;
   const ctx = ScaleContext.identity();
   const sDiagramPadding = ctx.aesthetic(DIAGRAM_PADDING2);
-  const sLabelFontSize = ctx.text(LABEL_FONT_SIZE4);
-  const sMetaFontSize = ctx.text(META_FONT_SIZE4);
-  const sMetaLineHeight = ctx.structural(META_LINE_HEIGHT4);
-  const sHeaderHeight = ctx.structural(HEADER_HEIGHT4);
-  const sSeparatorGap = ctx.structural(SEPARATOR_GAP4);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH2);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH2);
+  const sLabelFontSize = ctx.text(LABEL_FONT_SIZE2);
+  const sMetaFontSize = ctx.text(META_FONT_SIZE2);
+  const sMetaLineHeight = ctx.structural(META_LINE_HEIGHT2);
+  const sHeaderHeight = ctx.structural(HEADER_HEIGHT2);
+  const sSeparatorGap = ctx.structural(SEPARATOR_GAP2);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE);
-  const sContainerLabelFontSize = ctx.text(CONTAINER_LABEL_FONT_SIZE3);
-  const sContainerMetaFontSize = ctx.text(CONTAINER_META_FONT_SIZE2);
-  const sContainerMetaLineHeight = ctx.structural(CONTAINER_META_LINE_HEIGHT4);
-  const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT2);
+  const sContainerLabelFontSize = ctx.text(CONTAINER_LABEL_FONT_SIZE);
+  const sContainerMetaFontSize = ctx.text(CONTAINER_META_FONT_SIZE);
+  const sContainerMetaLineHeight = ctx.structural(CONTAINER_META_LINE_HEIGHT2);
+  const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT);
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleHeight = ctx.structural(TITLE_HEIGHT2);
-  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT2);
+  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT);
   const sLegendFixedGap = ctx.aesthetic(LEGEND_FIXED_GAP2);
   const hasLegend = layout.legend.length > 0;
   const layoutLegendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
@@ -25844,7 +25974,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     }
     const fill2 = containerFill2(palette, isDark, c.color);
     const stroke2 = containerStroke2(palette, c.color);
-    cG.append("rect").attr("x", 0).attr("y", 0).attr("width", c.width).attr("height", c.height).attr("rx", CONTAINER_RADIUS2).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-opacity", 0.35).attr("stroke-width", sNodeStrokeWidth);
+    cG.append("rect").attr("x", 0).attr("y", 0).attr("width", c.width).attr("height", c.height).attr("rx", CONTAINER_RADIUS).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-opacity", 0.35).attr("stroke-width", sNodeStrokeWidth);
     cG.append("text").attr("x", c.width / 2).attr("y", sContainerHeaderHeight / 2 + sContainerLabelFontSize / 2 - 2).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) {
@@ -25869,7 +25999,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     }
     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_RADIUS2);
+      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", c.color ?? palette.primary).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
       cG.append("text").attr("x", c.width / 2).attr("y", c.height - sCollapseBarHeight - 6).attr("text-anchor", "middle").attr("fill", palette.textMuted).attr("font-size", sMetaFontSize).text(`+${c.hiddenCount}`);
     }
@@ -25908,13 +26038,23 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     const solid = parsed.options["solid-fill"] === "on";
     const fill2 = nodeFill2(palette, isDark, node.color, solid);
     const stroke2 = nodeStroke2(palette, node.color);
-    nodeG.append("rect").attr("x", 0).attr("y", 0).attr("width", node.width).attr("height", node.height).attr("rx", CARD_RADIUS2).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", sNodeStrokeWidth);
     const labelColor = contrastText(
       fill2,
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    nodeG.append("text").attr("x", node.width / 2).attr("y", sHeaderHeight / 2 + sLabelFontSize / 2 - 2).attr("text-anchor", "middle").attr("fill", labelColor).attr("font-size", sLabelFontSize).attr("font-weight", "bold").text(node.label);
+    renderNodeCard(nodeG, {
+      width: node.width,
+      height: node.height,
+      rx: CARD_RADIUS,
+      fill: fill2,
+      stroke: stroke2,
+      strokeWidth: sNodeStrokeWidth,
+      label: node.label,
+      labelColor,
+      labelFontSize: sLabelFontSize,
+      headerHeight: sHeaderHeight
+    });
     const metaEntries = Object.entries(node.metadata);
     if (metaEntries.length > 0) {
       nodeG.append("line").attr("x1", 0).attr("y1", sHeaderHeight).attr("x2", node.width).attr("y2", sHeaderHeight).attr("stroke", solid ? labelColor : stroke2).attr("stroke-opacity", 0.3);
@@ -25949,7 +26089,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     }
     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_RADIUS2);
+      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", solid ? labelColor : node.color ?? palette.primary).attr("opacity", 0.5).attr("clip-path", `url(#${clipId})`);
     }
   }
@@ -26079,7 +26219,7 @@ async function renderSitemapForExport(content, theme, palette) {
   document.body.removeChild(container);
   return svgHtml;
 }
-var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, LABEL_FONT_SIZE4, META_FONT_SIZE4, META_LINE_HEIGHT4, HEADER_HEIGHT4, SEPARATOR_GAP4, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, CARD_RADIUS2, CONTAINER_RADIUS2, CONTAINER_LABEL_FONT_SIZE3, CONTAINER_META_FONT_SIZE2, CONTAINER_META_LINE_HEIGHT4, CONTAINER_HEADER_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_LABEL_FONT_SIZE, COLLAPSE_BAR_HEIGHT2, LEGEND_FIXED_GAP2, lineGenerator, lineGeneratorLinear;
+var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_LABEL_FONT_SIZE, LEGEND_FIXED_GAP2, lineGenerator, lineGeneratorLinear;
 var init_renderer2 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
@@ -26092,27 +26232,15 @@ var init_renderer2 = __esm({
     init_legend_integration();
     init_legend_layout();
     init_scaling();
+    init_card();
     init_title_constants();
+    init_visual_conventions();
     DIAGRAM_PADDING2 = 20;
     MAX_SCALE2 = 3;
     TITLE_HEIGHT2 = 30;
-    LABEL_FONT_SIZE4 = 13;
-    META_FONT_SIZE4 = 11;
-    META_LINE_HEIGHT4 = 16;
-    HEADER_HEIGHT4 = 28;
-    SEPARATOR_GAP4 = 6;
-    EDGE_STROKE_WIDTH2 = 1.5;
-    NODE_STROKE_WIDTH2 = 1.5;
-    CARD_RADIUS2 = 6;
-    CONTAINER_RADIUS2 = 8;
-    CONTAINER_LABEL_FONT_SIZE3 = 13;
-    CONTAINER_META_FONT_SIZE2 = 11;
-    CONTAINER_META_LINE_HEIGHT4 = 16;
-    CONTAINER_HEADER_HEIGHT2 = 28;
     ARROWHEAD_W = 10;
     ARROWHEAD_H = 7;
     EDGE_LABEL_FONT_SIZE = 11;
-    COLLAPSE_BAR_HEIGHT2 = 6;
     LEGEND_FIXED_GAP2 = 8;
     lineGenerator = d3Shape2.line().x((d) => d.x).y((d) => d.y).curve(d3Shape2.curveBasis);
     lineGeneratorLinear = d3Shape2.line().x((d) => d.x).y((d) => d.y).curve(d3Shape2.curveLinear);
@@ -26280,7 +26408,7 @@ function renderKanban(container, parsed, palette, isDark, options) {
   const sCardMetaLineHeight = ctx.structural(CARD_META_LINE_HEIGHT);
   const sCardSeparatorGap = ctx.structural(CARD_SEPARATOR_GAP);
   const sCardGap = ctx.aesthetic(CARD_GAP);
-  const sCardRadius = ctx.structural(CARD_RADIUS3);
+  const sCardRadius = ctx.structural(CARD_RADIUS);
   const sCardPaddingX = ctx.aesthetic(CARD_PADDING_X);
   const sCardPaddingY = ctx.aesthetic(CARD_PADDING_Y);
   const sCardStrokeWidth = ctx.structural(CARD_STROKE_WIDTH);
@@ -26660,7 +26788,7 @@ function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, coll
   const totalHeight = laneY - sLaneGap + sColumnPadding + sDiagramPadding;
   return { columnXs, lanes, totalWidth, totalHeight, startY };
 }
-function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING3, sTitleHeight = TITLE_HEIGHT3, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnRadius = COLUMN_RADIUS, sColumnHeaderRadius = COLUMN_HEADER_RADIUS, sWipFontSize = WIP_FONT_SIZE, sCardRadius = CARD_RADIUS3, sCardPaddingX = CARD_PADDING_X, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE) {
+function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING3, sTitleHeight = TITLE_HEIGHT3, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnRadius = COLUMN_RADIUS, sColumnHeaderRadius = COLUMN_HEADER_RADIUS, sWipFontSize = WIP_FONT_SIZE, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE) {
   const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
   const buckets = bucketCardsBySwimlane(visibleColumns, swimlaneGroup);
   const grid = computeSwimlaneLayout(
@@ -26800,7 +26928,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
     }
   }
 }
-function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, isDark, hiddenMetaGroups, solid, sCardRadius = CARD_RADIUS3, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
+function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palette, isDark, hiddenMetaGroups, solid, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
   const card = cardLayout.card;
   const resolvedColor = resolveCardTagColor(card, tagGroups, activeTagGroup);
   const tagMeta = resolveCardTagMeta(card, tagGroups, hiddenMetaGroups);
@@ -26850,7 +26978,7 @@ function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palet
     }
   }
 }
-var DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS3, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS, COLLAPSED_COLUMN_WIDTH, COLLAPSED_LANE_HEIGHT, LANE_HEADER_WIDTH, LANE_GAP;
+var DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT3, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS, COLLAPSED_COLUMN_WIDTH, COLLAPSED_LANE_HEIGHT, LANE_HEADER_WIDTH, LANE_GAP;
 var init_renderer3 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
@@ -26864,6 +26992,7 @@ var init_renderer3 = __esm({
     init_legend_integration();
     init_scaling();
     init_text_measure();
+    init_visual_conventions();
     init_title_constants();
     DIAGRAM_PADDING3 = 20;
     COLUMN_GAP = 16;
@@ -26874,7 +27003,6 @@ var init_renderer3 = __esm({
     CARD_META_LINE_HEIGHT = 14;
     CARD_SEPARATOR_GAP = 4;
     CARD_GAP = 8;
-    CARD_RADIUS3 = 6;
     CARD_PADDING_X = 10;
     CARD_PADDING_Y = 6;
     CARD_STROKE_WIDTH = 1.5;
@@ -27177,8 +27305,8 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   const sClassFontSize = ctx.text(CLASS_FONT_SIZE2);
   const sMemberFontSize = ctx.text(MEMBER_FONT_SIZE2);
   const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE2);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH3);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH3);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sMemberLineHeight = ctx.structural(MEMBER_LINE_HEIGHT2);
   const sCompartmentPaddingY = ctx.structural(COMPARTMENT_PADDING_Y2);
   const sMemberPaddingX = ctx.structural(MEMBER_PADDING_X);
@@ -27437,7 +27565,7 @@ function renderClassDiagramForExport(content, theme, palette) {
     return extractExportSvg(container, theme);
   });
 }
-var DIAGRAM_PADDING4, MAX_SCALE3, CLASS_FONT_SIZE2, MEMBER_FONT_SIZE2, EDGE_LABEL_FONT_SIZE2, EDGE_STROKE_WIDTH3, NODE_STROKE_WIDTH3, MEMBER_LINE_HEIGHT2, COMPARTMENT_PADDING_Y2, MEMBER_PADDING_X, CLASS_TYPE_MAP, CLASS_TYPE_ORDER, LEGEND_GROUP_NAME, lineGenerator2;
+var DIAGRAM_PADDING4, MAX_SCALE3, CLASS_FONT_SIZE2, MEMBER_FONT_SIZE2, EDGE_LABEL_FONT_SIZE2, MEMBER_LINE_HEIGHT2, COMPARTMENT_PADDING_Y2, MEMBER_PADDING_X, CLASS_TYPE_MAP, CLASS_TYPE_ORDER, LEGEND_GROUP_NAME, lineGenerator2;
 var init_renderer4 = __esm({
   "src/class/renderer.ts"() {
     "use strict";
@@ -27452,13 +27580,12 @@ var init_renderer4 = __esm({
     init_scaling();
     init_text_measure();
     init_note_box();
+    init_visual_conventions();
     DIAGRAM_PADDING4 = 20;
     MAX_SCALE3 = 3;
     CLASS_FONT_SIZE2 = 13;
     MEMBER_FONT_SIZE2 = 11;
     EDGE_LABEL_FONT_SIZE2 = 11;
-    EDGE_STROKE_WIDTH3 = 1.5;
-    NODE_STROKE_WIDTH3 = 1.5;
     MEMBER_LINE_HEIGHT2 = 18;
     COMPARTMENT_PADDING_Y2 = 8;
     MEMBER_PADDING_X = 10;
@@ -27954,7 +28081,7 @@ function constraintIcon(constraint) {
       return "\u25CB";
   }
 }
-function drawCardinality(g, point, prevPoint, cardinality, color, useLabels, edgeLabelFontSize = EDGE_LABEL_FONT_SIZE4, edgeStrokeWidth = EDGE_STROKE_WIDTH4) {
+function drawCardinality(g, point, prevPoint, cardinality, color, useLabels, edgeLabelFontSize = EDGE_LABEL_FONT_SIZE4, edgeStrokeWidth = EDGE_STROKE_WIDTH) {
   const dx = point.x - prevPoint.x;
   const dy = point.y - prevPoint.y;
   const len = Math.sqrt(dx * dx + dy * dy);
@@ -28014,8 +28141,8 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   const sTableFontSize = ctx.text(TABLE_FONT_SIZE2);
   const sColumnFontSize = ctx.text(COLUMN_FONT_SIZE2);
   const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE4);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH4);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH4);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sMemberLineHeight = ctx.structural(MEMBER_LINE_HEIGHT4);
   const sCompartmentPaddingY = ctx.structural(COMPARTMENT_PADDING_Y4);
   const sMemberPaddingX = ctx.structural(MEMBER_PADDING_X2);
@@ -28293,7 +28420,7 @@ function renderERDiagramForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var DIAGRAM_PADDING5, MAX_SCALE4, TABLE_FONT_SIZE2, COLUMN_FONT_SIZE2, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH4, NODE_STROKE_WIDTH4, MEMBER_LINE_HEIGHT4, COMPARTMENT_PADDING_Y4, MEMBER_PADDING_X2, lineGenerator3;
+var DIAGRAM_PADDING5, MAX_SCALE4, TABLE_FONT_SIZE2, COLUMN_FONT_SIZE2, EDGE_LABEL_FONT_SIZE4, MEMBER_LINE_HEIGHT4, COMPARTMENT_PADDING_Y4, MEMBER_PADDING_X2, lineGenerator3;
 var init_renderer5 = __esm({
   "src/er/renderer.ts"() {
     "use strict";
@@ -28310,13 +28437,12 @@ var init_renderer5 = __esm({
     init_parser9();
     init_layout4();
     init_classify();
+    init_visual_conventions();
     DIAGRAM_PADDING5 = 20;
     MAX_SCALE4 = 3;
     TABLE_FONT_SIZE2 = 13;
     COLUMN_FONT_SIZE2 = 11;
     EDGE_LABEL_FONT_SIZE4 = 11;
-    EDGE_STROKE_WIDTH4 = 1.5;
-    NODE_STROKE_WIDTH4 = 1.5;
     MEMBER_LINE_HEIGHT4 = 18;
     COMPARTMENT_PADDING_Y4 = 8;
     MEMBER_PADDING_X2 = 10;
@@ -28546,9 +28672,9 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const sDiagramPadding = sctx.aesthetic(DIAGRAM_PADDING6);
   const sMinNodeFontSize = sctx.text(MIN_NODE_FONT_SIZE);
   const sEdgeLabelFontSize = sctx.text(EDGE_LABEL_FONT_SIZE5);
-  const sEdgeStrokeWidth = sctx.structural(EDGE_STROKE_WIDTH5);
-  const sNodeStrokeWidth = sctx.structural(NODE_STROKE_WIDTH5);
-  const sCollapseBarHeight = sctx.structural(COLLAPSE_BAR_HEIGHT3);
+  const sEdgeStrokeWidth = sctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = sctx.structural(NODE_STROKE_WIDTH);
+  const sCollapseBarHeight = sctx.structural(COLLAPSE_BAR_HEIGHT2);
   const sDescFontSize = sctx.text(DESC_FONT_SIZE);
   const sGroupLabelFontSize = sctx.text(GROUP_LABEL_FONT_SIZE);
   const sGroupLabelZone = sctx.structural(GROUP_LABEL_ZONE);
@@ -28640,8 +28766,32 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const scaleX = width / (contentW + sDiagramPadding * 2);
   const scaleY = height / (contentH + sDiagramPadding * 2);
   const scale = Math.min(scaleX, scaleY, 3);
-  const offsetX = (width - contentW * scale) / 2;
-  const offsetY = sDiagramPadding + titleOffset + legendH;
+  let centerShiftX = 0;
+  let centerShiftY = 0;
+  if (parsed.nodePositions && parsed.nodePositions.size > 0) {
+    let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
+    const accB = (x, y) => {
+      if (x < bMinX) bMinX = x;
+      if (x > bMaxX) bMaxX = x;
+      if (y < bMinY) bMinY = y;
+      if (y > bMaxY) bMaxY = y;
+    };
+    for (const n of layout.nodes) {
+      accB(n.x - n.width / 2, n.y - n.height / 2);
+      accB(n.x + n.width / 2, n.y + n.height / 2);
+    }
+    for (const g of layout.groups) {
+      accB(g.x - g.width / 2, g.y - g.height / 2);
+      accB(g.x + g.width / 2, g.y + g.height / 2);
+    }
+    for (const e of layout.edges) for (const p of e.points) accB(p.x, p.y);
+    if (Number.isFinite(bMinX)) {
+      centerShiftX = (layout.width - bMaxX - bMinX) / 2;
+      centerShiftY = (layout.height - bMaxY - bMinY) / 2;
+    }
+  }
+  const offsetX = (width - contentW * scale) / 2 + centerShiftX * scale;
+  const offsetY = sDiagramPadding + titleOffset + legendH + centerShiftY * scale;
   const svg = d3Selection11.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY).style("background", palette.bg);
   if (sctx.isBelowFloor) {
     svg.attr("width", "100%");
@@ -28777,7 +28927,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     const edgeG = diagramG.append("g").attr("class", "bl-edge-group").attr("data-line-number", String(le.lineNumber));
     edgeGroups.set(i, edgeG);
     const markerId = `bl-arrow-${color.replace("#", "")}`;
-    const gen = parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR;
+    const gen = le.straight ? lineGeneratorStraight : parsed.direction === "TB" ? lineGeneratorTB : lineGeneratorLR;
     const path = edgeG.append("path").attr("class", "bl-edge").attr("d", gen(points) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", sEdgeStrokeWidth).attr("marker-end", `url(#${markerId})`);
     if (le.bidirectional) {
       const revId = `bl-arrow-rev-${color.replace("#", "")}`;
@@ -29058,7 +29208,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     }
   });
 }
-var DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE5, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, RAMP_FLOOR, VALUE_FONT_SIZE, lineGeneratorLR, lineGeneratorTB;
+var DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE5, NODE_RX, COLLAPSE_BAR_HEIGHT2, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, RAMP_FLOOR, VALUE_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorStraight;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -29074,14 +29224,13 @@ var init_renderer6 = __esm({
     init_wrapped_desc();
     init_scaling();
     init_text_measure();
+    init_visual_conventions();
     DIAGRAM_PADDING6 = 20;
     NODE_FONT_SIZE = 11;
     MIN_NODE_FONT_SIZE = 9;
     EDGE_LABEL_FONT_SIZE5 = 11;
-    EDGE_STROKE_WIDTH5 = 1.5;
-    NODE_STROKE_WIDTH5 = 1.5;
     NODE_RX = 8;
-    COLLAPSE_BAR_HEIGHT3 = 4;
+    COLLAPSE_BAR_HEIGHT2 = 4;
     ARROWHEAD_W2 = 5;
     ARROWHEAD_H2 = 4;
     DESC_FONT_SIZE = 10;
@@ -29095,6 +29244,7 @@ var init_renderer6 = __esm({
     VALUE_FONT_SIZE = 11;
     lineGeneratorLR = d3Shape5.line().x((d) => d.x).y((d) => d.y).curve(d3Shape5.curveBasis);
     lineGeneratorTB = d3Shape5.line().x((d) => d.x).y((d) => d.y).curve(d3Shape5.curveBasis);
+    lineGeneratorStraight = d3Shape5.line().x((d) => d.x).y((d) => d.y).curve(d3Shape5.curveLinear);
   }
 });
 
@@ -30284,6 +30434,156 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     return { x: rect.x + dx * s, y: rect.y + dy * s };
   };
   const isInsideRect = (p, rect) => Math.abs(p.x - rect.x) <= rect.w / 2 && Math.abs(p.y - rect.y) <= rect.h / 2;
+  const pinned = parsed.nodePositions;
+  const groupLabelSet = new Set(parsed.groups.map((g) => g.label));
+  const groupsAreFlat = parsed.groups.every(
+    (g) => !g.parentGroup && !g.children.some((c) => groupLabelSet.has(c))
+  );
+  const allOriginalGroupLabels = new Set(
+    (collapseInfo?.originalGroups ?? parsed.groups).map((g) => g.label)
+  );
+  const collapsedAreFlatPinned = collapsedGroupLabels.size === 0 || pinned !== void 0 && collapseInfo !== void 0 && [...collapsedGroupLabels].every((label) => {
+    const og = collapseInfo.originalGroups.find((g) => g.label === label);
+    if (!og || og.parentGroup) return false;
+    return og.children.every(
+      (c) => pinned.has(c) && !allOriginalGroupLabels.has(c)
+    );
+  });
+  const allPinned = pinned !== void 0 && (parsed.nodes.length > 0 || collapsedGroupLabels.size > 0) && parsed.nodes.every((n2) => pinned.has(n2.label)) && groupsAreFlat && collapsedAreFlatPinned;
+  function placePinned(pins) {
+    const collapsedPosByGid = /* @__PURE__ */ new Map();
+    const collapsedBoxes = [];
+    if (collapseInfo)
+      for (const label of collapsedGroupLabels) {
+        const og = collapseInfo.originalGroups.find((g) => g.label === label);
+        if (!og) continue;
+        let cx0 = Infinity, cy0 = Infinity, cx1 = -Infinity, cy1 = -Infinity;
+        for (const c of og.children) {
+          const p = pins.get(c);
+          if (!p) continue;
+          cx0 = Math.min(cx0, p.x);
+          cx1 = Math.max(cx1, p.x);
+          cy0 = Math.min(cy0, p.y);
+          cy1 = Math.max(cy1, p.y);
+        }
+        if (!Number.isFinite(cx0)) continue;
+        const cx = (cx0 + cx1) / 2;
+        const cy = (cy0 + cy1) / 2;
+        collapsedPosByGid.set(`__group_${label}`, { x: cx, y: cy });
+        collapsedBoxes.push({
+          label,
+          lineNumber: og.lineNumber,
+          childCount: collapseInfo.collapsedChildCounts.get(label) ?? og.children.length,
+          x: cx,
+          y: cy
+        });
+      }
+    const posOf = (label) => pins.get(label) ?? collapsedPosByGid.get(label);
+    const rectOf = (label) => {
+      const p = posOf(label);
+      const s = sizes.get(label) ?? { width: NODE_WIDTH, height: NODE_HEIGHT };
+      return { x: p.x, y: p.y, w: s.width, h: s.height };
+    };
+    const nodes = parsed.nodes.map((n2) => {
+      const r = rectOf(n2.label);
+      return { label: n2.label, x: r.x, y: r.y, width: r.w, height: r.h };
+    });
+    const edges = parsed.edges.flatMap((e) => {
+      const sp = posOf(e.source);
+      const tp = posOf(e.target);
+      if (!sp || !tp) return [];
+      const srcRect = rectOf(e.source);
+      const tgtRect = rectOf(e.target);
+      const p0 = rectBorderPoint(srcRect, tp);
+      const p1 = rectBorderPoint(tgtRect, sp);
+      return [
+        {
+          source: e.source,
+          target: e.target,
+          ...e.label !== void 0 && { label: e.label },
+          bidirectional: e.bidirectional,
+          lineNumber: e.lineNumber,
+          points: [p0, p1],
+          yOffset: 0,
+          parallelCount: 1,
+          metadata: e.metadata,
+          straight: true
+        }
+      ];
+    });
+    const GROUP_PAD = 16;
+    const nodeByLabel = new Map(nodes.map((n2) => [n2.label, n2]));
+    const groups = [];
+    for (const grp of parsed.groups) {
+      let gx0 = Infinity, gy0 = Infinity, gx1 = -Infinity, gy1 = -Infinity;
+      for (const c of grp.children) {
+        const n2 = nodeByLabel.get(c);
+        if (!n2) continue;
+        gx0 = Math.min(gx0, n2.x - n2.width / 2);
+        gx1 = Math.max(gx1, n2.x + n2.width / 2);
+        gy0 = Math.min(gy0, n2.y - n2.height / 2);
+        gy1 = Math.max(gy1, n2.y + n2.height / 2);
+      }
+      if (!Number.isFinite(gx0)) continue;
+      const x0 = gx0 - GROUP_PAD;
+      const x1 = gx1 + GROUP_PAD;
+      const y0 = gy0 - GROUP_LABEL_ZONE2;
+      const y1 = gy1 + GROUP_PAD;
+      groups.push({
+        label: grp.label,
+        lineNumber: grp.lineNumber,
+        x: (x0 + x1) / 2,
+        y: (y0 + y1) / 2,
+        width: x1 - x0,
+        height: y1 - y0,
+        collapsed: false,
+        childCount: grp.children.length
+      });
+    }
+    for (const cb of collapsedBoxes) {
+      groups.push({
+        label: cb.label,
+        lineNumber: cb.lineNumber,
+        x: cb.x,
+        y: cb.y,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        collapsed: true,
+        childCount: cb.childCount
+      });
+    }
+    const M = 40;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const acc = (x, y) => {
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    };
+    for (const n2 of nodes) {
+      acc(n2.x - n2.width / 2, n2.y - n2.height / 2);
+      acc(n2.x + n2.width / 2, n2.y + n2.height / 2);
+    }
+    for (const e of edges) for (const p of e.points) acc(p.x, p.y);
+    for (const gr of groups) {
+      acc(gr.x - gr.width / 2, gr.y - gr.height / 2);
+      acc(gr.x + gr.width / 2, gr.y + gr.height / 2);
+    }
+    const TOL = 2;
+    const sx = minX < M - TOL ? M - minX : 0;
+    const sy = minY < M - TOL ? M - minY : 0;
+    const shifted = sx !== 0 || sy !== 0;
+    return {
+      nodes: shifted ? nodes.map((n2) => ({ ...n2, x: n2.x + sx, y: n2.y + sy })) : nodes,
+      edges: shifted ? edges.map((e) => ({
+        ...e,
+        points: e.points.map((p) => ({ x: p.x + sx, y: p.y + sy }))
+      })) : edges,
+      groups: shifted ? groups.map((gr) => ({ ...gr, x: gr.x + sx, y: gr.y + sy })) : groups,
+      width: maxX + sx + M,
+      height: maxY + sy + M
+    };
+  }
   function place(cfg) {
     const r = cfg.seed === void 0 ? null : rng2(cfg.seed + 1);
     const ord = (a) => r ? shuffle(a, r) : a.slice();
@@ -30422,6 +30722,7 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       height: gg.height ?? 600
     };
   }
+  if (allPinned) return placePinned(pinned);
   const n = parsed.nodes.length;
   const seedCount = opts?.seeds ?? (n <= 12 ? 80 : n <= 22 ? 40 : n <= 35 ? 22 : 10);
   const REFINE_K = opts?.refineK ?? 6;
@@ -30616,7 +30917,7 @@ function computeNodeSize(node, reserveValueRow) {
   }
   totalRenderedLines = Math.min(totalRenderedLines, MAX_DESC_LINES2);
   const descriptionHeight = totalRenderedLines * DESC_FONT_SIZE2 * DESC_LINE_HEIGHT2;
-  const totalHeight = labelHeight + SEPARATOR_GAP5 + DESC_PADDING + descriptionHeight + DESC_PADDING + (reserveValueRow ? VALUE_ROW_H : 0);
+  const totalHeight = labelHeight + SEPARATOR_GAP4 + DESC_PADDING + descriptionHeight + DESC_PADDING + (reserveValueRow ? VALUE_ROW_H : 0);
   return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
 }
 async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
@@ -30745,7 +31046,7 @@ function applyParallelEdgeOffsets(layout) {
     }))
   };
 }
-var MARGIN4, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP5, MAX_DESC_LINES2, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
+var MARGIN4, MAX_PARALLEL_EDGES, PARALLEL_SPACING, PHI, NODE_HEIGHT, NODE_WIDTH, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP4, MAX_DESC_LINES2, MAX_LABEL_LINES, LABEL_LINE_HEIGHT, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
 var init_layout5 = __esm({
   "src/boxes-and-lines/layout.ts"() {
     "use strict";
@@ -30761,13 +31062,13 @@ var init_layout5 = __esm({
     DESC_FONT_SIZE2 = 10;
     DESC_LINE_HEIGHT2 = 1.4;
     DESC_PADDING = 8;
-    SEPARATOR_GAP5 = 4;
+    SEPARATOR_GAP4 = 4;
     MAX_DESC_LINES2 = 6;
     MAX_LABEL_LINES = 3;
     LABEL_LINE_HEIGHT = 1.3;
     LABEL_PAD = 12;
     VALUE_ROW_FONT = 11;
-    VALUE_ROW_H = SEPARATOR_GAP5 + VALUE_ROW_FONT * DESC_LINE_HEIGHT2 + DESC_PADDING;
+    VALUE_ROW_H = SEPARATOR_GAP4 + VALUE_ROW_FONT * DESC_LINE_HEIGHT2 + DESC_PADDING;
   }
 });
 
@@ -31529,11 +31830,11 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
     });
   }
   for (const edge of renderLayout.edges) {
-    mainG.append("path").attr("class", "mindmap-edge").attr("d", edge.path).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", EDGE_STROKE_WIDTH6).attr("stroke-opacity", 0.5);
+    mainG.append("path").attr("class", "mindmap-edge").attr("d", edge.path).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", EDGE_STROKE_WIDTH).attr("stroke-opacity", 0.5);
   }
   for (const node of renderLayout.nodes) {
     const isRoot = node.radius === 0 && renderLayout.nodes.indexOf(node) === 0;
-    const strokeW = isRoot ? ROOT_STROKE_WIDTH : NODE_STROKE_WIDTH6;
+    const strokeW = isRoot ? ROOT_STROKE_WIDTH : NODE_STROKE_WIDTH;
     const effectiveColor = options?.colorByDepth ? depthColor(node.depth, palette) : node.color;
     const fill2 = nodeFill4(
       palette,
@@ -31616,7 +31917,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
       const clipId = `collapse-clip-${node.id}`;
       const defs = mainG.append("defs");
       defs.append("clipPath").attr("id", clipId).append("rect").attr("x", node.x).attr("y", node.y).attr("width", node.width).attr("height", node.height).attr("rx", NODE_RADIUS).attr("ry", NODE_RADIUS);
-      nodeG.append("rect").attr("class", "collapse-bar").attr("x", node.x).attr("y", node.y + node.height - COLLAPSE_BAR_HEIGHT4).attr("width", node.width).attr("height", COLLAPSE_BAR_HEIGHT4).attr("fill", stroke2).attr("clip-path", `url(#${clipId})`);
+      nodeG.append("rect").attr("class", "collapse-bar").attr("x", node.x).attr("y", node.y + node.height - COLLAPSE_BAR_HEIGHT).attr("width", node.width).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", stroke2).attr("clip-path", `url(#${clipId})`);
     }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", (event) => {
@@ -31664,7 +31965,7 @@ function renderMindmapForExport(content, theme, palette) {
     return extractExportSvg(container, theme);
   });
 }
-var DIAGRAM_PADDING7, TITLE_HEIGHT4, SINGLE_LABEL_HEIGHT2, LABEL_LINE_HEIGHT3, DESC_LINE_HEIGHT4, NODE_RADIUS, ROOT_STROKE_WIDTH, NODE_STROKE_WIDTH6, EDGE_STROKE_WIDTH6, COLLAPSE_BAR_HEIGHT4, DEPTH_COLOR_KEYS;
+var DIAGRAM_PADDING7, TITLE_HEIGHT4, SINGLE_LABEL_HEIGHT2, LABEL_LINE_HEIGHT3, DESC_LINE_HEIGHT4, NODE_RADIUS, ROOT_STROKE_WIDTH, DEPTH_COLOR_KEYS;
 var init_renderer7 = __esm({
   "src/mindmap/renderer.ts"() {
     "use strict";
@@ -31681,6 +31982,7 @@ var init_renderer7 = __esm({
     init_legend_layout();
     init_title_constants();
     init_scaling();
+    init_visual_conventions();
     DIAGRAM_PADDING7 = 20;
     TITLE_HEIGHT4 = 30;
     SINGLE_LABEL_HEIGHT2 = 28;
@@ -31688,9 +31990,6 @@ var init_renderer7 = __esm({
     DESC_LINE_HEIGHT4 = 14;
     NODE_RADIUS = 6;
     ROOT_STROKE_WIDTH = 2.5;
-    NODE_STROKE_WIDTH6 = 1.5;
-    EDGE_STROKE_WIDTH6 = 1.5;
-    COLLAPSE_BAR_HEIGHT4 = 6;
     DEPTH_COLOR_KEYS = [
       "red",
       "orange",
@@ -32919,10 +33218,10 @@ function computeC4NodeDimensions(el, options) {
     const metaEntries = collectCardMetadata(el.metadata);
     if (metaEntries.length > 0) {
       height2 += DIVIDER_GAP;
-      height2 += metaEntries.length * META_LINE_HEIGHT5;
+      height2 += metaEntries.length * META_LINE_HEIGHT4;
       const maxMetaWidth = Math.max(
         ...metaEntries.map(
-          (e) => measureText(`${e.key}: ${e.value}`, META_FONT_SIZE5) + CARD_H_PAD3 * 2
+          (e) => measureText(`${e.key}: ${e.value}`, META_FONT_SIZE4) + CARD_H_PAD3 * 2
         )
       );
       if (maxMetaWidth > width) width = Math.min(MAX_NODE_WIDTH, maxMetaWidth);
@@ -34199,7 +34498,7 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     height: totalHeight
   };
 }
-var gNode, gEdge, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, NAME_FONT_SIZE, DESC_LINE_HEIGHT5, DESC_FONT_SIZE4, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_FONT_SIZE5, MARGIN6, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
+var gNode, gEdge, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, NAME_FONT_SIZE, DESC_LINE_HEIGHT5, DESC_FONT_SIZE4, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT4, META_FONT_SIZE4, MARGIN6, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout8 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
@@ -34217,8 +34516,8 @@ var init_layout8 = __esm({
     DESC_FONT_SIZE4 = 11;
     CARD_V_PAD3 = 14;
     CARD_H_PAD3 = 20;
-    META_LINE_HEIGHT5 = 16;
-    META_FONT_SIZE5 = 11;
+    META_LINE_HEIGHT4 = 16;
+    META_FONT_SIZE4 = 11;
     MARGIN6 = 40;
     BOUNDARY_PAD = 40;
     GROUP_BOUNDARY_PAD = 24;
@@ -34341,7 +34640,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     const bidir = hasBidirectionalMarkers(edge.arrowType);
     const pathD = lineGenerator4(edge.points);
     if (pathD) {
-      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH7).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
       if (dashed) {
         pathEl.attr("stroke-dasharray", "6 3");
       }
@@ -34407,7 +34706,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS4).attr("ry", CARD_RADIUS4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH7);
+    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", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH);
     let yPos = -h / 2 + CARD_V_PAD4;
     const typeLabel = `\xAB${node.type}\xBB`;
     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);
@@ -34451,7 +34750,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
     }
     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_RADIUS4);
+      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", solid ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
@@ -34511,14 +34810,14 @@ function drawCylinderCard(nodeG, w, h, fill2, stroke2, dashed) {
     `A ${w / 2} ${ry} 0 0 1 ${-w / 2} ${h / 2 - ry}`,
     "Z"
   ].join(" ");
-  const el = nodeG.append("path").attr("d", path).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH7);
+  const el = nodeG.append("path").attr("d", path).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH);
   if (dashed) {
     el.attr("stroke-dasharray", "6 3");
   }
-  nodeG.append("ellipse").attr("cx", 0).attr("cy", -h / 2 + ry).attr("rx", w / 2).attr("ry", ry).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH7);
+  nodeG.append("ellipse").attr("cx", 0).attr("cy", -h / 2 + ry).attr("rx", w / 2).attr("ry", ry).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH);
 }
 function drawCardRect(nodeG, w, h, fill2, stroke2, dashed) {
-  const el = nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", CARD_RADIUS4).attr("ry", CARD_RADIUS4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH7);
+  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", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH);
   if (dashed) {
     el.attr("stroke-dasharray", "6 3");
   }
@@ -34538,7 +34837,7 @@ function renderEdges(contentG, edges, palette, onClickItem, obstacleRects) {
     const bidir = hasBidirectionalMarkers(edge.arrowType);
     const pathD = lineGenerator4(edge.points);
     if (pathD) {
-      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH7).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
+      const pathEl = edgeG.append("path").attr("d", pathD).attr("fill", "none").attr("stroke", edgeColor3).attr("stroke-width", EDGE_STROKE_WIDTH).attr("class", "c4-edge").attr("marker-end", "url(#c4-arrow-end)");
       if (dashed) {
         pathEl.attr("stroke-dasharray", "6 3");
       }
@@ -35033,13 +35332,13 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         nodeG.append("line").attr("x1", -w / 2 + CARD_H_PAD4 / 2).attr("y1", yPos).attr("x2", w / 2 - CARD_H_PAD4 / 2).attr("y2", yPos).attr("stroke", solid ? onFillText : stroke2).attr("stroke-width", 0.5).attr("stroke-opacity", 0.4);
         yPos += DIVIDER_GAP2;
         const maxKeyWidth = Math.max(
-          ...metaEntries.map((e) => measureText(`${e.key}: `, META_FONT_SIZE6))
+          ...metaEntries.map((e) => measureText(`${e.key}: `, META_FONT_SIZE2))
         );
         const valueX = -w / 2 + CARD_H_PAD4 + maxKeyWidth;
         for (const entry of metaEntries) {
-          nodeG.append("text").attr("x", -w / 2 + CARD_H_PAD4).attr("y", yPos + META_FONT_SIZE6 / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE6).text(`${entry.key}:`);
-          nodeG.append("text").attr("x", valueX).attr("y", yPos + META_FONT_SIZE6 / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE6).text(entry.value);
-          yPos += META_LINE_HEIGHT6;
+          nodeG.append("text").attr("x", -w / 2 + CARD_H_PAD4).attr("y", yPos + META_FONT_SIZE2 / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE2).text(`${entry.key}:`);
+          nodeG.append("text").attr("x", valueX).attr("y", yPos + META_FONT_SIZE2 / 2).attr("text-anchor", "start").attr("dominant-baseline", "central").attr("fill", onFillText).attr("font-size", META_FONT_SIZE2).text(entry.value);
+          yPos += META_LINE_HEIGHT2;
         }
       }
     } else {
@@ -35066,7 +35365,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
     }
     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_RADIUS4);
+      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", solid ? onFillText : stroke2).attr("clip-path", `url(#${clipId})`).attr("class", "c4-drill-bar");
     }
   }
@@ -35195,7 +35494,7 @@ function renderC4DeploymentForExport(content, theme, palette) {
     document.body.removeChild(el);
   }
 }
-var DIAGRAM_PADDING8, MAX_SCALE5, TITLE_HEIGHT6, TYPE_FONT_SIZE, NAME_FONT_SIZE2, DESC_FONT_SIZE5, DESC_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE6, TECH_FONT_SIZE, EDGE_STROKE_WIDTH7, NODE_STROKE_WIDTH7, CARD_RADIUS4, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, META_FONT_SIZE6, META_LINE_HEIGHT6, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, lineGenerator4;
+var DIAGRAM_PADDING8, MAX_SCALE5, TITLE_HEIGHT6, TYPE_FONT_SIZE, NAME_FONT_SIZE2, DESC_FONT_SIZE5, DESC_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE6, TECH_FONT_SIZE, CARD_H_PAD4, CARD_V_PAD4, TYPE_LABEL_HEIGHT2, DIVIDER_GAP2, NAME_HEIGHT2, BOUNDARY_LABEL_FONT_SIZE, BOUNDARY_STROKE_WIDTH, BOUNDARY_RADIUS, DRILL_BAR_HEIGHT, CYLINDER_RY, PERSON_HEAD_R, PERSON_ARM_SPAN, PERSON_LEG_SPAN, PERSON_ICON_W, PERSON_SW, lineGenerator4;
 var init_renderer9 = __esm({
   "src/c4/renderer.ts"() {
     "use strict";
@@ -35209,6 +35508,7 @@ var init_renderer9 = __esm({
     init_legend_constants();
     init_legend_integration();
     init_title_constants();
+    init_visual_conventions();
     DIAGRAM_PADDING8 = 20;
     MAX_SCALE5 = 3;
     TITLE_HEIGHT6 = 30;
@@ -35218,16 +35518,11 @@ var init_renderer9 = __esm({
     DESC_LINE_HEIGHT6 = 16;
     EDGE_LABEL_FONT_SIZE6 = 11;
     TECH_FONT_SIZE = 10;
-    EDGE_STROKE_WIDTH7 = 1.5;
-    NODE_STROKE_WIDTH7 = 1.5;
-    CARD_RADIUS4 = 6;
     CARD_H_PAD4 = 20;
     CARD_V_PAD4 = 14;
     TYPE_LABEL_HEIGHT2 = 18;
     DIVIDER_GAP2 = 6;
     NAME_HEIGHT2 = 20;
-    META_FONT_SIZE6 = 11;
-    META_LINE_HEIGHT6 = 16;
     BOUNDARY_LABEL_FONT_SIZE = 12;
     BOUNDARY_STROKE_WIDTH = 1.5;
     BOUNDARY_RADIUS = 8;
@@ -35632,7 +35927,7 @@ function nodeFill6(palette, isDark, shape, nodeColor2, isEndTerminal, colorOff,
 function nodeStroke6(palette, shape, nodeColor2, isEndTerminal, colorOff) {
   return nodeColor2 ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
 }
-function renderTerminal(g, node, palette, isDark, isEnd, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8) {
+function renderTerminal(g, node, palette, isDark, isEnd, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width;
   const h = node.height;
   const rx = h / 2;
@@ -35644,7 +35939,7 @@ function renderTerminal(g, node, palette, isDark, isEnd, colorOff, solid, sNodeS
     nodeStroke6(palette, node.shape, node.color, isEnd, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderProcess(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8) {
+function renderProcess(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width;
   const h = node.height;
   g.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr(
@@ -35663,7 +35958,7 @@ function renderProcess(g, node, palette, isDark, colorOff, solid, sNodeStrokeWid
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderDecision(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8) {
+function renderDecision(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH) {
   const w = node.width / 2;
   const h = node.height / 2;
   const points = [`${0},${-h}`, `${w},${0}`, `${0},${h}`, `${-w},${0}`].join(
@@ -35685,7 +35980,7 @@ function renderDecision(g, node, palette, isDark, colorOff, solid, sNodeStrokeWi
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderIO(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8, sIoSkew = IO_SKEW) {
+function renderIO(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW) {
   const w = node.width / 2;
   const h = node.height / 2;
   const sk = sIoSkew;
@@ -35711,7 +36006,7 @@ function renderIO(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth =
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderSubroutine(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8, sSubroutineInset = SUBROUTINE_INSET) {
+function renderSubroutine(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sSubroutineInset = SUBROUTINE_INSET) {
   const w = node.width;
   const h = node.height;
   const s = nodeStroke6(palette, node.shape, node.color, void 0, colorOff);
@@ -35729,7 +36024,7 @@ function renderSubroutine(g, node, palette, isDark, colorOff, solid, sNodeStroke
   g.append("line").attr("x1", -w / 2 + sSubroutineInset).attr("y1", -h / 2).attr("x2", -w / 2 + sSubroutineInset).attr("y2", h / 2).attr("stroke", innerStroke).attr("stroke-width", sNodeStrokeWidth);
   g.append("line").attr("x1", w / 2 - sSubroutineInset).attr("y1", -h / 2).attr("x2", w / 2 - sSubroutineInset).attr("y2", h / 2).attr("stroke", innerStroke).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderDocument(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8, sDocWaveHeight = DOC_WAVE_HEIGHT) {
+function renderDocument(g, node, palette, isDark, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sDocWaveHeight = DOC_WAVE_HEIGHT) {
   const w = node.width;
   const h = node.height;
   const waveH = sDocWaveHeight;
@@ -35760,7 +36055,7 @@ function renderDocument(g, node, palette, isDark, colorOff, solid, sNodeStrokeWi
     nodeStroke6(palette, node.shape, node.color, void 0, colorOff)
   ).attr("stroke-width", sNodeStrokeWidth);
 }
-function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH8, sIoSkew = IO_SKEW, sSubroutineInset = SUBROUTINE_INSET, sDocWaveHeight = DOC_WAVE_HEIGHT) {
+function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff, solid, sNodeStrokeWidth = NODE_STROKE_WIDTH, sIoSkew = IO_SKEW, sSubroutineInset = SUBROUTINE_INSET, sDocWaveHeight = DOC_WAVE_HEIGHT) {
   switch (node.shape) {
     case "terminal":
       renderTerminal(
@@ -35847,8 +36142,8 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const sTitleY = ctx.structural(TITLE_Y);
   const sNodeFontSize = ctx.text(NODE_FONT_SIZE2);
   const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE7);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH8);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH8);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sArrowheadW = ctx.structural(ARROWHEAD_W3);
   const sArrowheadH = ctx.structural(ARROWHEAD_H3);
   const sIoSkew = ctx.structural(IO_SKEW);
@@ -36072,7 +36367,7 @@ function renderFlowchartForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var DIAGRAM_PADDING9, MAX_SCALE6, NODE_FONT_SIZE2, EDGE_LABEL_FONT_SIZE7, EDGE_STROKE_WIDTH8, NODE_STROKE_WIDTH8, ARROWHEAD_W3, ARROWHEAD_H3, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT;
+var DIAGRAM_PADDING9, MAX_SCALE6, NODE_FONT_SIZE2, EDGE_LABEL_FONT_SIZE7, ARROWHEAD_W3, ARROWHEAD_H3, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT;
 var init_flowchart_renderer = __esm({
   "src/graph/flowchart-renderer.ts"() {
     "use strict";
@@ -36087,12 +36382,11 @@ var init_flowchart_renderer = __esm({
     init_scaling();
     init_text_measure();
     init_note_box();
+    init_visual_conventions();
     DIAGRAM_PADDING9 = 20;
     MAX_SCALE6 = 3;
     NODE_FONT_SIZE2 = 13;
     EDGE_LABEL_FONT_SIZE7 = 11;
-    EDGE_STROKE_WIDTH8 = 1.5;
-    NODE_STROKE_WIDTH8 = 1.5;
     ARROWHEAD_W3 = 10;
     ARROWHEAD_H3 = 7;
     IO_SKEW = 15;
@@ -37077,7 +37371,7 @@ function hasRoles(node) {
 }
 function computeNodeWidth2(node, expanded, options) {
   const badgeVal = node.computedConcurrentInvocations === 0 && node.computedInstances > 1 ? node.computedInstances : 0;
-  const badgeWidth = badgeVal > 0 ? measureText(`${badgeVal}x`, META_FONT_SIZE7) + 2 * CHAR_WIDTH_RATIO * NODE_FONT_SIZE3 : 0;
+  const badgeWidth = badgeVal > 0 ? measureText(`${badgeVal}x`, META_FONT_SIZE5) + 2 * CHAR_WIDTH_RATIO * NODE_FONT_SIZE3 : 0;
   const labelWidth2 = measureText(node.label, NODE_FONT_SIZE3) + badgeWidth + PADDING_X3;
   const allKeys = [];
   if (node.computedRps > 0) allKeys.push("RPS");
@@ -37124,7 +37418,7 @@ function computeNodeWidth2(node, expanded, options) {
   }
   if (allKeys.length === 0) return Math.max(MIN_NODE_WIDTH2, labelWidth2);
   const keyColWidth = Math.max(
-    ...allKeys.map((k) => measureText(`${k}: `, META_FONT_SIZE7))
+    ...allKeys.map((k) => measureText(`${k}: `, META_FONT_SIZE5))
   );
   let maxRowWidth = 0;
   if (node.computedRps > 0) {
@@ -37137,7 +37431,7 @@ function computeNodeWidth2(node, expanded, options) {
     const rpsVal = effectiveCap > 0 && !node.isEdge ? `${formatRpsShort(node.computedRps)} / ${formatRpsShort(effectiveCap)}` : formatRps(node.computedRps);
     maxRowWidth = Math.max(
       maxRowWidth,
-      keyColWidth + measureText(rpsVal, META_FONT_SIZE7)
+      keyColWidth + measureText(rpsVal, META_FONT_SIZE5)
     );
   }
   if (expanded) {
@@ -37154,7 +37448,7 @@ function computeNodeWidth2(node, expanded, options) {
       const valStr = p.key === "max-rps" || p.key === "ratelimit-rps" ? formatRpsShort(numVal) : p.key === "latency-ms" || p.key === "cb-latency-threshold-ms" || p.key === "duration-ms" || p.key === "cold-start-ms" ? formatMs(numVal) : PCT_KEYS.includes(p.key) ? `${numVal}%` : String(p.value);
       maxRowWidth = Math.max(
         maxRowWidth,
-        keyColWidth + measureText(valStr, META_FONT_SIZE7)
+        keyColWidth + measureText(valStr, META_FONT_SIZE5)
       );
     }
   }
@@ -37165,7 +37459,7 @@ function computeNodeWidth2(node, expanded, options) {
       if (ms > 0) {
         maxRowWidth = Math.max(
           maxRowWidth,
-          keyColWidth + measureText(formatMs(ms), META_FONT_SIZE7)
+          keyColWidth + measureText(formatMs(ms), META_FONT_SIZE5)
         );
       }
     }
@@ -37176,37 +37470,37 @@ function computeNodeWidth2(node, expanded, options) {
         const combinedVal = `${formatMs(perc.p90)} / ${formatMs(threshold)}`;
         maxRowWidth = Math.max(
           maxRowWidth,
-          keyColWidth + measureText(combinedVal, META_FONT_SIZE7)
+          keyColWidth + measureText(combinedVal, META_FONT_SIZE5)
         );
       }
     }
     if (node.computedUptime < 1) {
       maxRowWidth = Math.max(
         maxRowWidth,
-        keyColWidth + measureText(formatUptime(node.computedUptime), META_FONT_SIZE7)
+        keyColWidth + measureText(formatUptime(node.computedUptime), META_FONT_SIZE5)
       );
     }
     if (node.computedAvailability < 1) {
       maxRowWidth = Math.max(
         maxRowWidth,
-        keyColWidth + measureText(formatUptime(node.computedAvailability), META_FONT_SIZE7)
+        keyColWidth + measureText(formatUptime(node.computedAvailability), META_FONT_SIZE5)
       );
     }
     if (node.computedCbState === "open") {
       maxRowWidth = Math.max(
         maxRowWidth,
-        measureText("CB: OPEN", META_FONT_SIZE7) + 8
+        measureText("CB: OPEN", META_FONT_SIZE5) + 8
       );
     }
   }
-  const DESC_MAX_WIDTH2 = 120 * CHAR_WIDTH_RATIO * META_FONT_SIZE7;
+  const DESC_MAX_WIDTH2 = 120 * CHAR_WIDTH_RATIO * META_FONT_SIZE5;
   const descLines = expanded && node.description && !node.isEdge ? node.description : [];
   let descWidth = 0;
   for (const dl of descLines) {
-    const truncated = truncateText(dl, META_FONT_SIZE7, DESC_MAX_WIDTH2);
+    const truncated = truncateText(dl, META_FONT_SIZE5, DESC_MAX_WIDTH2);
     descWidth = Math.max(
       descWidth,
-      measureText(truncated, META_FONT_SIZE7) + PADDING_X3
+      measureText(truncated, META_FONT_SIZE5) + PADDING_X3
     );
   }
   return Math.max(MIN_NODE_WIDTH2, labelWidth2, maxRowWidth + 20, descWidth);
@@ -37216,17 +37510,17 @@ function computeNodeHeight2(node, expanded, options) {
   const computedCount = countComputedRows(node, expanded);
   const hasRps = node.computedRps > 0;
   const descLineCount = expanded && node.description && !node.isEdge ? node.description.length : 0;
-  const descH = descLineCount * META_LINE_HEIGHT7;
+  const descH = descLineCount * META_LINE_HEIGHT5;
   if (propCount === 0 && computedCount === 0 && !hasRps)
     return NODE_HEADER_HEIGHT + descH + NODE_PAD_BOTTOM;
   let h = NODE_HEADER_HEIGHT + descH + NODE_SEPARATOR_GAP;
   const computedSectionCount = (hasRps ? 1 : 0) + computedCount;
-  h += computedSectionCount * META_LINE_HEIGHT7;
+  h += computedSectionCount * META_LINE_HEIGHT5;
   if (computedSectionCount > 0 && propCount > 0) h += NODE_SEPARATOR_GAP;
-  h += propCount * META_LINE_HEIGHT7;
+  h += propCount * META_LINE_HEIGHT5;
   if (hasRoles(node)) h += ROLE_DOT_ROW;
   h += NODE_PAD_BOTTOM;
-  if (node.id.startsWith("[")) h += COLLAPSE_BAR_HEIGHT5;
+  if (node.id.startsWith("[")) h += COLLAPSE_BAR_HEIGHT3;
   return h;
 }
 function formatRps(rps) {
@@ -37561,20 +37855,20 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
     height: totalHeight
   };
 }
-var MIN_NODE_WIDTH2, NODE_HEADER_HEIGHT, META_LINE_HEIGHT7, NODE_SEPARATOR_GAP, NODE_PAD_BOTTOM, ROLE_DOT_ROW, COLLAPSE_BAR_HEIGHT5, NODE_FONT_SIZE3, META_FONT_SIZE7, EDGE_LABEL_FONT_SIZE8, PADDING_X3, GROUP_PADDING2, GROUP_HEADER_HEIGHT, EDGE_MARGIN, DISPLAY_KEYS, DISPLAY_NAMES, GROUP_GAP;
+var MIN_NODE_WIDTH2, NODE_HEADER_HEIGHT, META_LINE_HEIGHT5, NODE_SEPARATOR_GAP, NODE_PAD_BOTTOM, ROLE_DOT_ROW, COLLAPSE_BAR_HEIGHT3, NODE_FONT_SIZE3, META_FONT_SIZE5, EDGE_LABEL_FONT_SIZE8, PADDING_X3, GROUP_PADDING2, GROUP_HEADER_HEIGHT, EDGE_MARGIN, DISPLAY_KEYS, DISPLAY_NAMES, GROUP_GAP;
 var init_layout10 = __esm({
   "src/infra/layout.ts"() {
     "use strict";
     init_text_measure();
     MIN_NODE_WIDTH2 = 140;
     NODE_HEADER_HEIGHT = 28;
-    META_LINE_HEIGHT7 = 14;
+    META_LINE_HEIGHT5 = 14;
     NODE_SEPARATOR_GAP = 4;
     NODE_PAD_BOTTOM = 10;
     ROLE_DOT_ROW = 12;
-    COLLAPSE_BAR_HEIGHT5 = 6;
+    COLLAPSE_BAR_HEIGHT3 = 6;
     NODE_FONT_SIZE3 = 13;
-    META_FONT_SIZE7 = 10;
+    META_FONT_SIZE5 = 10;
     EDGE_LABEL_FONT_SIZE8 = 11;
     PADDING_X3 = 24;
     GROUP_PADDING2 = 20;
@@ -37680,19 +37974,19 @@ import * as d3Shape8 from "d3-shape";
 function buildScaledConstants(ctx) {
   return {
     sNodeFontSize: ctx.text(NODE_FONT_SIZE4),
-    sMetaFontSize: ctx.text(META_FONT_SIZE8),
-    sMetaLineHeight: ctx.structural(META_LINE_HEIGHT8),
+    sMetaFontSize: ctx.text(META_FONT_SIZE6),
+    sMetaLineHeight: ctx.structural(META_LINE_HEIGHT6),
     sEdgeLabelFontSize: ctx.text(EDGE_LABEL_FONT_SIZE9),
     sGroupLabelFontSize: ctx.text(GROUP_LABEL_FONT_SIZE2),
     sNodeBorderRadius: ctx.structural(NODE_BORDER_RADIUS),
-    sEdgeStrokeWidth: ctx.structural(EDGE_STROKE_WIDTH9),
-    sNodeStrokeWidth: ctx.structural(NODE_STROKE_WIDTH9),
+    sEdgeStrokeWidth: ctx.structural(EDGE_STROKE_WIDTH),
+    sNodeStrokeWidth: ctx.structural(NODE_STROKE_WIDTH),
     sOverloadStrokeWidth: ctx.structural(OVERLOAD_STROKE_WIDTH),
     sRoleDotRadius: ctx.structural(ROLE_DOT_RADIUS),
     sNodeSeparatorGap: ctx.structural(NODE_SEPARATOR_GAP2),
     sNodePadBottom: ctx.structural(NODE_PAD_BOTTOM2),
-    sCollapseBarHeight: ctx.structural(COLLAPSE_BAR_HEIGHT6),
-    sCollapseBarInset: ctx.structural(COLLAPSE_BAR_INSET2),
+    sCollapseBarHeight: ctx.structural(COLLAPSE_BAR_HEIGHT),
+    sCollapseBarInset: ctx.structural(COLLAPSE_BAR_INSET),
     sParticleR: ctx.structural(PARTICLE_R),
     sRejectParticleR: ctx.structural(PARTICLE_R),
     sRejectDropDistance: ctx.structural(REJECT_DROP_DISTANCE),
@@ -38016,7 +38310,7 @@ function isWarning(node) {
   return cap > 0 && node.computedRps / cap > 0.7;
 }
 function truncateDesc(text) {
-  return truncateText(text, META_FONT_SIZE8, DESC_MAX_WIDTH);
+  return truncateText(text, META_FONT_SIZE6, DESC_MAX_WIDTH);
 }
 function sloLatencyColor(p90, slo) {
   const t = slo.latencyP90 ?? 0;
@@ -38495,7 +38789,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
     if (!isNodeCollapsed) {
       const expanded = expandedNodeIds?.has(node.id) ?? false;
       const descLines = expanded && node.description && !node.isEdge ? node.description : [];
-      const descH = descLines.length * META_LINE_HEIGHT8;
+      const descH = descLines.length * META_LINE_HEIGHT6;
       for (let di = 0; di < descLines.length; di++) {
         const rawLine = descLines[di];
         const processed = preprocessDescriptionLine(rawLine);
@@ -38503,7 +38797,7 @@ function renderNodes(svg, nodes, palette, isDark, animate, expandedNodeIds, acti
         const isTruncated = descTruncated !== processed;
         const textEl = g.append("text").attr("x", node.x).attr(
           "y",
-          y + NODE_HEADER_HEIGHT2 + di * META_LINE_HEIGHT8 + META_LINE_HEIGHT8 / 2 + sc.sMetaFontSize * 0.35
+          y + NODE_HEADER_HEIGHT2 + di * META_LINE_HEIGHT6 + META_LINE_HEIGHT6 / 2 + sc.sMetaFontSize * 0.35
         ).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sMetaFontSize).attr("fill", textFill);
         renderInlineText(textEl, descTruncated, palette, sc.sMetaFontSize);
         if (isTruncated) textEl.append("title").text(rawLine);
@@ -39021,7 +39315,7 @@ function parseAndLayoutInfra(content) {
   const layout = layoutInfra(computed);
   return { parsed, computed, layout };
 }
-var NODE_FONT_SIZE4, META_FONT_SIZE8, META_LINE_HEIGHT8, EDGE_LABEL_FONT_SIZE9, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, EDGE_STROKE_WIDTH9, NODE_STROKE_WIDTH9, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, COLLAPSE_BAR_HEIGHT6, COLLAPSE_BAR_INSET2, LEGEND_FIXED_GAP3, SPEED_BADGE_H_PAD, SPEED_BADGE_V_PAD, SPEED_BADGE_GAP, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, DESC_MAX_WIDTH, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
+var NODE_FONT_SIZE4, META_FONT_SIZE6, META_LINE_HEIGHT6, EDGE_LABEL_FONT_SIZE9, GROUP_LABEL_FONT_SIZE2, NODE_BORDER_RADIUS, OVERLOAD_STROKE_WIDTH, ROLE_DOT_RADIUS, NODE_HEADER_HEIGHT2, NODE_SEPARATOR_GAP2, NODE_PAD_BOTTOM2, LEGEND_FIXED_GAP3, SPEED_BADGE_H_PAD, SPEED_BADGE_V_PAD, SPEED_BADGE_GAP, COLOR_HEALTHY, COLOR_WARNING, COLOR_OVERLOADED, FLOW_SPEED_MIN, FLOW_SPEED_MAX, PARTICLE_R, PARTICLE_COUNT_MIN, PARTICLE_COUNT_MAX, NODE_PULSE_SPEED, NODE_PULSE_OVERLOAD, REJECT_DROP_DISTANCE, REJECT_DURATION_MIN, REJECT_DURATION_MAX, REJECT_COUNT_MIN, REJECT_COUNT_MAX, PROP_DISPLAY, DESC_MAX_CHARS, DESC_MAX_WIDTH, RPS_FORMAT_KEYS, MS_FORMAT_KEYS, PCT_FORMAT_KEYS;
 var init_renderer10 = __esm({
   "src/infra/renderer.ts"() {
     "use strict";
@@ -39040,21 +39334,18 @@ var init_renderer10 = __esm({
     init_legend_layout();
     init_title_constants();
     init_scaling();
+    init_visual_conventions();
     NODE_FONT_SIZE4 = 13;
-    META_FONT_SIZE8 = 10;
-    META_LINE_HEIGHT8 = 14;
+    META_FONT_SIZE6 = 10;
+    META_LINE_HEIGHT6 = 14;
     EDGE_LABEL_FONT_SIZE9 = 11;
     GROUP_LABEL_FONT_SIZE2 = 14;
     NODE_BORDER_RADIUS = 8;
-    EDGE_STROKE_WIDTH9 = 1.5;
-    NODE_STROKE_WIDTH9 = 1.5;
     OVERLOAD_STROKE_WIDTH = 3;
     ROLE_DOT_RADIUS = 3;
     NODE_HEADER_HEIGHT2 = 28;
     NODE_SEPARATOR_GAP2 = 4;
     NODE_PAD_BOTTOM2 = 10;
-    COLLAPSE_BAR_HEIGHT6 = 6;
-    COLLAPSE_BAR_INSET2 = 0;
     LEGEND_FIXED_GAP3 = 16;
     SPEED_BADGE_H_PAD = 5;
     SPEED_BADGE_V_PAD = 3;
@@ -39093,7 +39384,7 @@ var init_renderer10 = __esm({
       partitions: "partitions"
     };
     DESC_MAX_CHARS = 120;
-    DESC_MAX_WIDTH = DESC_MAX_CHARS * CHAR_WIDTH_RATIO * META_FONT_SIZE8;
+    DESC_MAX_WIDTH = DESC_MAX_CHARS * CHAR_WIDTH_RATIO * META_FONT_SIZE6;
     RPS_FORMAT_KEYS = /* @__PURE__ */ new Set(["max-rps", "ratelimit-rps"]);
     MS_FORMAT_KEYS = /* @__PURE__ */ new Set([
       "latency-ms",
@@ -40882,18 +41173,18 @@ function renderPert(container, resolved, layout, palette, isDark, options = {})
   const sLegendPillHeight = ctx.structural(LEGEND_PILL_HEIGHT);
   const sLegendBlockHeight = showTagLegend ? sLegendTopGap + sLegendPillHeight + sLegendBottomGap : 0;
   const sNodeRadius = ctx.structural(NODE_RADIUS2);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH10);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sNodeFontSize = ctx.text(NODE_FONT_SIZE5);
   const sNodeCellFontSize = ctx.text(NODE_CELL_FONT_SIZE2);
   const sNodeTopRowHeight = ctx.structural(NODE_TOP_ROW_HEIGHT);
   const sNodeBottomRowHeight = ctx.structural(NODE_BOTTOM_ROW_HEIGHT);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH10);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
   const sArrowheadW = ctx.structural(ARROWHEAD_W4);
   const sArrowheadH = ctx.structural(ARROWHEAD_H4);
-  const sContainerRadius = ctx.structural(CONTAINER_RADIUS3);
-  const sContainerLabelFontSize = ctx.text(CONTAINER_LABEL_FONT_SIZE4);
-  const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT3);
-  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT7);
+  const sContainerRadius = ctx.structural(CONTAINER_RADIUS);
+  const sContainerLabelFontSize = ctx.text(CONTAINER_LABEL_FONT_SIZE);
+  const sContainerHeaderHeight = ctx.structural(CONTAINER_HEADER_HEIGHT);
+  const sCollapseBarHeight = ctx.structural(COLLAPSE_BAR_HEIGHT);
   const sPinIconW = ctx.structural(PIN_ICON_W);
   const sPinIconH = ctx.structural(PIN_ICON_H);
   const scaledWidth = layout.width + sDiagramPad * 2;
@@ -41460,7 +41751,7 @@ function renderGroups2(root, resolved, layout, palette, isDark, collapsedSet, si
         palette.textOnFillDark
       );
       const sNR = sc.nodeRadius ?? NODE_RADIUS2;
-      const sCBH = sc.collapseBarHeight ?? COLLAPSE_BAR_HEIGHT7;
+      const sCBH = sc.collapseBarHeight ?? COLLAPSE_BAR_HEIGHT;
       drawTextbookCard(g, {
         width: grp.width,
         height: grp.height,
@@ -41494,10 +41785,10 @@ function renderGroups2(root, resolved, layout, palette, isDark, collapsedSet, si
       g.append("rect").attr("class", "pert-collapse-bar").attr("x", grp.x).attr("y", grp.y + grp.height - sCBH).attr("width", grp.width).attr("height", sCBH).attr("fill", cardBaseColor).attr("clip-path", `url(#${clipId})`);
       continue;
     }
-    const sCR = sc.containerRadius ?? CONTAINER_RADIUS3;
-    const sCLFS = sc.containerLabelFontSize ?? CONTAINER_LABEL_FONT_SIZE4;
-    const sCHH = sc.containerHeaderHeight ?? CONTAINER_HEADER_HEIGHT3;
-    const sNSW = sc.nodeStrokeWidth ?? NODE_STROKE_WIDTH10;
+    const sCR = sc.containerRadius ?? CONTAINER_RADIUS;
+    const sCLFS = sc.containerLabelFontSize ?? CONTAINER_LABEL_FONT_SIZE;
+    const sCHH = sc.containerHeaderHeight ?? CONTAINER_HEADER_HEIGHT;
+    const sNSW = sc.nodeStrokeWidth ?? NODE_STROKE_WIDTH;
     g.append("rect").attr("x", grp.x).attr("y", grp.y).attr("width", grp.width).attr("height", grp.height).attr("rx", sCR).attr("ry", sCR).attr("fill", containerFill3).attr("stroke", containerStroke3).attr("stroke-opacity", 0.35).attr("stroke-width", sNSW);
     g.append("text").attr("x", grp.x + grp.width / 2).attr("y", grp.y + sCHH / 2 + sCLFS / 2 - 2).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("fill", palette.text).attr("font-size", sCLFS).attr("font-weight", "bold").text(label);
   }
@@ -41550,7 +41841,7 @@ function renderEdges2(root, resolved, layout, palette, collapsedSet, sc = {}) {
     }
     const path = lineGenerator6(e.points);
     if (!path) continue;
-    const sESW = sc.edgeStrokeWidth ?? EDGE_STROKE_WIDTH10;
+    const sESW = sc.edgeStrokeWidth ?? EDGE_STROKE_WIDTH;
     const sELFS = sc.edgeLabelFontSize ?? 10;
     layer.append("path").attr("class", "pert-edge").attr("d", path).attr("fill", "none").attr("stroke", bandColor(band, palette, palette.textMuted)).attr("stroke-width", sESW).attr("marker-end", `url(#${bandArrow(band)})`).attr("data-source", e.source).attr("data-target", e.target).attr("data-critical", String(isCritical)).attr("data-critical-path", String(isCritical)).attr("data-criticality-band", band ?? "");
     const parsedEdge = edgeByKey.get(`${e.source}->${e.target}`);
@@ -41732,7 +42023,7 @@ function computeDurationEmphasis(activities) {
 function drawTextbookCard(g, a) {
   const { width: w, height: h, x, y } = a;
   const sNR = a.sNodeRadius ?? NODE_RADIUS2;
-  const sNSW = a.sNodeStrokeWidth ?? NODE_STROKE_WIDTH10;
+  const sNSW = a.sNodeStrokeWidth ?? NODE_STROKE_WIDTH;
   const sTRH = a.sNodeTopRowHeight ?? NODE_TOP_ROW_HEIGHT;
   const sBRH = a.sNodeBottomRowHeight ?? NODE_BOTTOM_ROW_HEIGHT;
   const sNFS = a.sNodeFontSize ?? NODE_FONT_SIZE5;
@@ -41831,7 +42122,7 @@ function drawTextbookCard(g, a) {
 function drawMilestonePill(g, a) {
   const { width: w, height: h, x, y } = a;
   const sNR = a.sNodeRadius ?? NODE_RADIUS2;
-  const sNSW = a.sNodeStrokeWidth ?? NODE_STROKE_WIDTH10;
+  const sNSW = a.sNodeStrokeWidth ?? NODE_STROKE_WIDTH;
   const topRowH = a.sNodeTopRowHeight ?? NODE_TOP_ROW_HEIGHT;
   const botRowH = a.sNodeBottomRowHeight ?? NODE_BOTTOM_ROW_HEIGHT;
   const sNCFS = a.sNodeCellFontSize ?? NODE_CELL_FONT_SIZE2;
@@ -41964,7 +42255,7 @@ function renderCaptionBlock(svg, bullets, args) {
     palette.textOnFillDark
   );
   const block = svg.append("g").attr("class", "pert-caption-block").attr("data-pert-caption", "");
-  block.append("rect").attr("class", "pert-caption-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH10);
+  block.append("rect").attr("class", "pert-caption-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH);
   block.append("text").attr("class", "pert-caption-header").attr("x", x + width / 2).attr("y", y + CAPTION_BOX_PADDING_Y + CAPTION_FONT_SIZE).attr("text-anchor", "middle").attr("fill", labelColor).attr("font-size", CAPTION_FONT_SIZE).attr("font-weight", "700").text("Summary");
   const textX = x + CAPTION_BOX_PADDING_X;
   const firstBaselineY = y + CAPTION_BOX_PADDING_Y + CAPTION_HEADER_BAND_HEIGHT + CAPTION_FONT_SIZE;
@@ -42081,7 +42372,7 @@ function renderTornadoBlock(svg, rows, args) {
     palette.textOnFillDark
   );
   const block = svg.append("g").attr("class", "pert-tornado-block").attr("data-pert-tornado", "");
-  block.append("rect").attr("class", "pert-tornado-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH10);
+  block.append("rect").attr("class", "pert-tornado-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH);
   block.append("text").attr("class", "pert-tornado-header").attr("x", x + width / 2).attr("y", y + CAPTION_BOX_PADDING_Y + CAPTION_FONT_SIZE).attr("text-anchor", "middle").attr("fill", labelColor).attr("font-size", CAPTION_FONT_SIZE).attr("font-weight", "700").text("Activity Risk");
   const fmt = (v) => {
     const r = Math.round(v * 100) / 100;
@@ -42237,7 +42528,7 @@ function renderScurveBlock(svg, data, args) {
     palette.textOnFillDark
   );
   const block = svg.append("g").attr("class", "pert-scurve-block").attr("data-pert-scurve", "");
-  block.append("rect").attr("class", "pert-scurve-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH10);
+  block.append("rect").attr("class", "pert-scurve-rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("rx", NODE_RADIUS2).attr("ry", NODE_RADIUS2).attr("fill", fill2).attr("stroke", chromeStroke).attr("stroke-width", NODE_STROKE_WIDTH);
   const hasTitle = typeof title === "string" && title.length > 0;
   if (hasTitle) {
     const titleText = title.replace(/\.$/, "");
@@ -42421,7 +42712,7 @@ function formatScurveDate(iso) {
   if (month < 0 || month > 11 || isNaN(day)) return iso;
   return `${SCURVE_MONTH_NAMES[month]} ${day}`;
 }
-var DIAGRAM_PADDING11, NODE_FONT_SIZE5, NODE_CELL_FONT_SIZE2, NODE_RADIUS2, NODE_STROKE_WIDTH10, NODE_TOP_ROW_HEIGHT, NODE_BOTTOM_ROW_HEIGHT, EDGE_STROKE_WIDTH10, ARROWHEAD_W4, ARROWHEAD_H4, CONTAINER_RADIUS3, CONTAINER_LABEL_FONT_SIZE4, CONTAINER_HEADER_HEIGHT3, COLLAPSE_BAR_HEIGHT7, DURATION_FADE_OPACITY, PIN_ICON_W, PIN_ICON_H, LEGEND_PILL_HEIGHT, LEGEND_TOP_GAP, LEGEND_BOTTOM_GAP, FIELD_LEGEND_HEADER_BAND_HEIGHT, FIELD_LEGEND_CELL_VPAD, FIELD_LEGEND_LABEL_FONT_SIZE, FIELD_LEGEND_DESC_FONT_SIZE, FIELD_LEGEND_DESC_LINE_HEIGHT, FIELD_LEGEND_LABEL_DESC_GAP, FIELD_LEGEND_CELLS, lineGenerator6, FIELD_LEGEND_MIN_W, SUB_BULLET_INDENT, CAPTION_HEADER_BAND_HEIGHT, TORNADO_TOP_N, TORNADO_ROW_HEIGHT, TORNADO_NAME_COL_W, TORNADO_BAR_FONT_SIZE, TORNADO_BAR_HEIGHT, SUMMARY_MIN_W, SUMMARY_MAX_W, ANALYSIS_GAP, COL1_VSTACK_GAP, TORNADO_MIN_W, SCURVE_MIN_W, SCURVE_BOX_HEIGHT, SCURVE_PLOT_PADDING_X, SCURVE_PLOT_PADDING_RIGHT, SCURVE_PLOT_PADDING_BOTTOM, SCURVE_TICK_FONT_SIZE, SCURVE_PERCENTILE_RADIUS, DAYS_PER_UNIT, SCURVE_MONTH_NAMES, UNIT_TO_DAYS_LOCAL2;
+var DIAGRAM_PADDING11, NODE_FONT_SIZE5, NODE_CELL_FONT_SIZE2, NODE_RADIUS2, NODE_TOP_ROW_HEIGHT, NODE_BOTTOM_ROW_HEIGHT, ARROWHEAD_W4, ARROWHEAD_H4, DURATION_FADE_OPACITY, PIN_ICON_W, PIN_ICON_H, LEGEND_PILL_HEIGHT, LEGEND_TOP_GAP, LEGEND_BOTTOM_GAP, FIELD_LEGEND_HEADER_BAND_HEIGHT, FIELD_LEGEND_CELL_VPAD, FIELD_LEGEND_LABEL_FONT_SIZE, FIELD_LEGEND_DESC_FONT_SIZE, FIELD_LEGEND_DESC_LINE_HEIGHT, FIELD_LEGEND_LABEL_DESC_GAP, FIELD_LEGEND_CELLS, lineGenerator6, FIELD_LEGEND_MIN_W, SUB_BULLET_INDENT, CAPTION_HEADER_BAND_HEIGHT, TORNADO_TOP_N, TORNADO_ROW_HEIGHT, TORNADO_NAME_COL_W, TORNADO_BAR_FONT_SIZE, TORNADO_BAR_HEIGHT, SUMMARY_MIN_W, SUMMARY_MAX_W, ANALYSIS_GAP, COL1_VSTACK_GAP, TORNADO_MIN_W, SCURVE_MIN_W, SCURVE_BOX_HEIGHT, SCURVE_PLOT_PADDING_X, SCURVE_PLOT_PADDING_RIGHT, SCURVE_PLOT_PADDING_BOTTOM, SCURVE_TICK_FONT_SIZE, SCURVE_PERCENTILE_RADIUS, DAYS_PER_UNIT, SCURVE_MONTH_NAMES, UNIT_TO_DAYS_LOCAL2;
 var init_renderer11 = __esm({
   "src/pert/renderer.ts"() {
     "use strict";
@@ -42437,20 +42728,15 @@ var init_renderer11 = __esm({
     init_analyzer();
     init_layout11();
     init_internal();
+    init_visual_conventions();
     DIAGRAM_PADDING11 = 20;
     NODE_FONT_SIZE5 = 13;
     NODE_CELL_FONT_SIZE2 = 11;
     NODE_RADIUS2 = 6;
-    NODE_STROKE_WIDTH10 = 1.5;
     NODE_TOP_ROW_HEIGHT = 26;
     NODE_BOTTOM_ROW_HEIGHT = 26;
-    EDGE_STROKE_WIDTH10 = 1.5;
     ARROWHEAD_W4 = 10;
     ARROWHEAD_H4 = 7;
-    CONTAINER_RADIUS3 = 8;
-    CONTAINER_LABEL_FONT_SIZE4 = 13;
-    CONTAINER_HEADER_HEIGHT3 = 28;
-    COLLAPSE_BAR_HEIGHT7 = 6;
     DURATION_FADE_OPACITY = 0.55;
     PIN_ICON_W = 13;
     PIN_ICON_H = 13;
@@ -45442,8 +45728,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
   const sNodeFontSize = ctx.text(NODE_FONT_SIZE6);
   const sEdgeLabelFontSize = ctx.text(EDGE_LABEL_FONT_SIZE10);
   const sGroupLabelFontSize = ctx.text(GROUP_LABEL_FONT_SIZE3);
-  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH11);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH11);
+  const sEdgeStrokeWidth = ctx.structural(EDGE_STROKE_WIDTH);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sArrowheadW = ctx.structural(ARROWHEAD_W5);
   const sArrowheadH = ctx.structural(ARROWHEAD_H5);
   const sPseudostateRadius = ctx.structural(PSEUDOSTATE_RADIUS);
@@ -45720,7 +46006,7 @@ function renderStateForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var DIAGRAM_PADDING12, MAX_SCALE7, NODE_FONT_SIZE6, EDGE_LABEL_FONT_SIZE10, GROUP_LABEL_FONT_SIZE3, EDGE_STROKE_WIDTH11, NODE_STROKE_WIDTH11, ARROWHEAD_W5, ARROWHEAD_H5, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING;
+var DIAGRAM_PADDING12, MAX_SCALE7, NODE_FONT_SIZE6, EDGE_LABEL_FONT_SIZE10, GROUP_LABEL_FONT_SIZE3, ARROWHEAD_W5, ARROWHEAD_H5, PSEUDOSTATE_RADIUS, STATE_CORNER_RADIUS, GROUP_EXTRA_PADDING;
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
@@ -45735,13 +46021,12 @@ var init_state_renderer = __esm({
     init_scaling();
     init_text_measure();
     init_note_box();
+    init_visual_conventions();
     DIAGRAM_PADDING12 = 20;
     MAX_SCALE7 = 3;
     NODE_FONT_SIZE6 = 13;
     EDGE_LABEL_FONT_SIZE10 = 11;
     GROUP_LABEL_FONT_SIZE3 = 11;
-    EDGE_STROKE_WIDTH11 = 1.5;
-    NODE_STROKE_WIDTH11 = 1.5;
     ARROWHEAD_W5 = 10;
     ARROWHEAD_H5 = 7;
     PSEUDOSTATE_RADIUS = 10;
@@ -47456,14 +47741,14 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const panelY = PADDING2;
     const textX = panelX + CARD_PADDING_X3;
     const clipId = "persona-clip";
-    defs.append("clipPath").attr("id", clipId).append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS5);
+    defs.append("clipPath").attr("id", clipId).append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS);
     const personaFill = shapeFill(palette, personaColor, isDark, { solid });
     const onPersonaText = contrastText(
       personaFill,
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS5).attr("fill", personaFill);
+    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", personaFill);
     if (descLines.length > 0) {
       personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", solid ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
     }
@@ -47471,7 +47756,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const silY = panelY + panelHeight / 2 - 6;
     const silClip = personaG.append("g").attr("clip-path", `url(#${clipId})`);
     renderPersonaSilhouette(silClip, silX, silY, personaColor, palette, 1.2);
-    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS5).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH2);
+    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH2);
     personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y3 + FONT_SIZE_STEP).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onPersonaText).text(parsed.persona.name);
     for (let li = 0; li < descLines.length; li++) {
       const lineEl = personaG.append("text").attr("x", textX).attr("y", panelY + titleRowH + descLineH * (li + 1)).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText);
@@ -47711,7 +47996,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
             { solid }
           );
           const rowStroke = stepColor ?? palette.textMuted;
-          itemG.append("rect").attr("x", listX).attr("y", itemY).attr("width", cardW).attr("height", COLLAPSED_CARD_H).attr("rx", CARD_RADIUS5).attr("fill", rowFill).attr("stroke", rowStroke).attr("stroke-width", CARD_STROKE_WIDTH2);
+          itemG.append("rect").attr("x", listX).attr("y", itemY).attr("width", cardW).attr("height", COLLAPSED_CARD_H).attr("rx", CARD_RADIUS).attr("fill", rowFill).attr("stroke", rowStroke).attr("stroke-width", CARD_STROKE_WIDTH2);
           const faceCx = listX + CARD_PADDING_X3 + COLLAPSED_FACE_R;
           const faceCy = itemY + COLLAPSED_CARD_H / 2;
           if (step.score !== void 0) {
@@ -47874,7 +48159,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       const scoreColor = scoreToColor(score, palette);
       const tintedBg = mix(scoreColor, palette.surface, 20);
       const g = overlayG.append("g").attr("class", "journey-thought-hover");
-      g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS5).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
+      g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
       g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_RADIUS - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
       const centerX = bx + bw / 2;
       for (let i = 0; i < lines.length; i++) {
@@ -48031,7 +48316,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     palette.textOnFillLight,
     palette.textOnFillDark
   );
-  stepG.append("rect").attr("x", cx).attr("y", cy).attr("width", sl.width).attr("height", sl.height).attr("rx", CARD_RADIUS5).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", CARD_STROKE_WIDTH2);
+  stepG.append("rect").attr("x", cx).attr("y", cy).attr("width", sl.width).attr("height", sl.height).attr("rx", CARD_RADIUS).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", CARD_STROKE_WIDTH2);
   const titleMaxW = sl.width - CARD_PADDING_X3 * 2;
   const titleLines = wrapTextToWidth(sl.step.title, FONT_SIZE_STEP, titleMaxW);
   for (let i = 0; i < titleLines.length; i++) {
@@ -48090,7 +48375,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
     const stripFill = shapeFill(palette, stripColor, isDark, {
       ...solid !== void 0 && { solid }
     });
-    stepG.append("rect").attr("x", cx).attr("y", stripY).attr("width", sl.width).attr("height", TAG_STRIP_HEIGHT).attr("rx", CARD_RADIUS5).attr("fill", stripFill).attr("stroke", stripColor).attr("stroke-width", CARD_STROKE_WIDTH2);
+    stepG.append("rect").attr("x", cx).attr("y", stripY).attr("width", sl.width).attr("height", TAG_STRIP_HEIGHT).attr("rx", CARD_RADIUS).attr("fill", stripFill).attr("stroke", stripColor).attr("stroke-width", CARD_STROKE_WIDTH2);
     const stripTextColor = contrastText(
       stripFill,
       palette.textOnFillLight,
@@ -48206,7 +48491,7 @@ function renderJourneyMapForExport(content, theme, palette) {
   }
   return svgEl.outerHTML;
 }
-var DIAGRAM_PADDING13, PADDING2, CARD_RADIUS5, CARD_PADDING_X3, CARD_PADDING_Y3, CARD_HEADER_HEIGHT3, CARD_STROKE_WIDTH2, CARD_META_LINE_HEIGHT3, CARD_GAP_INTERNAL, COLUMN_RADIUS2, COLUMN_HEADER_HEIGHT2, COLUMN_PADDING3, FONT_SIZE_TITLE, FONT_SIZE_PHASE, FONT_SIZE_STEP, FONT_SIZE_META, GRID_LINE_OPACITY, CURVE_STROKE_WIDTH, FACE_RADIUS, DIM_HOVER, TITLE_LINE_HEIGHT, EMOTION_LABEL_MAX_WIDTH, EMOTION_LABEL_FONT_SIZE, ICON_THUMBS_DOWN, ICON_THUMBS_UP, ICON_THOUGHT;
+var DIAGRAM_PADDING13, PADDING2, CARD_PADDING_X3, CARD_PADDING_Y3, CARD_HEADER_HEIGHT3, CARD_STROKE_WIDTH2, CARD_META_LINE_HEIGHT3, CARD_GAP_INTERNAL, COLUMN_RADIUS2, COLUMN_HEADER_HEIGHT2, COLUMN_PADDING3, FONT_SIZE_TITLE, FONT_SIZE_PHASE, FONT_SIZE_STEP, FONT_SIZE_META, GRID_LINE_OPACITY, CURVE_STROKE_WIDTH, FACE_RADIUS, DIM_HOVER, TITLE_LINE_HEIGHT, EMOTION_LABEL_MAX_WIDTH, EMOTION_LABEL_FONT_SIZE, ICON_THUMBS_DOWN, ICON_THUMBS_UP, ICON_THOUGHT;
 var init_renderer14 = __esm({
   "src/journey-map/renderer.ts"() {
     "use strict";
@@ -48219,9 +48504,9 @@ var init_renderer14 = __esm({
     init_tag_groups();
     init_scaling();
     init_text_measure();
+    init_visual_conventions();
     DIAGRAM_PADDING13 = 20;
     PADDING2 = DIAGRAM_PADDING13;
-    CARD_RADIUS5 = 6;
     CARD_PADDING_X3 = 10;
     CARD_PADDING_Y3 = 6;
     CARD_HEADER_HEIGHT3 = 24;
@@ -48298,7 +48583,7 @@ function computeCycleLayout(parsed, options) {
     const hasDesc = !hideDescriptions && node.description.length > 0;
     const labelWidth2 = Math.max(
       MIN_NODE_WIDTH4,
-      measureText(node.label, LABEL_FONT_SIZE5) + NODE_PAD_X * 2
+      measureText(node.label, LABEL_FONT_SIZE4) + NODE_PAD_X * 2
     );
     if (circleNodes) {
       return computeCircleNodeDims(node, hasDesc);
@@ -48515,7 +48800,7 @@ function chooseDescribedRectDims(description, labelWidth2) {
   let bestScore = Infinity;
   for (let w = minW; w <= MAX_NODE_WIDTH3; w += DESC_WIDTH_STEP) {
     const wrapped2 = wrapDescForWidth(description, w);
-    const h = HEADER_HEIGHT5 + wrapped2.length * DESC_LINE_HEIGHT7 + DESC_PAD_Y;
+    const h = HEADER_HEIGHT4 + wrapped2.length * DESC_LINE_HEIGHT7 + DESC_PAD_Y;
     const ratio = w / h;
     const score = Math.abs(Math.log(ratio / DESC_TARGET_RATIO));
     if (score < bestScore) {
@@ -48527,7 +48812,7 @@ function chooseDescribedRectDims(description, labelWidth2) {
   const wrapped = wrapDescForWidth(description, minW);
   return {
     width: minW,
-    height: HEADER_HEIGHT5 + wrapped.length * DESC_LINE_HEIGHT7 + DESC_PAD_Y,
+    height: HEADER_HEIGHT4 + wrapped.length * DESC_LINE_HEIGHT7 + DESC_PAD_Y,
     wrappedDesc: wrapped
   };
 }
@@ -48540,7 +48825,7 @@ function wrapDescForWidth(description, nodeWidth) {
   );
 }
 function renderedDescNodeHeight(numLines, scale) {
-  const headerH = HEADER_HEIGHT5 * scale;
+  const headerH = HEADER_HEIGHT4 * scale;
   const descFont = Math.max(
     RENDERER_DESC_FONT_MIN,
     Math.round(RENDERER_DESC_FONT * scale)
@@ -48875,7 +49160,7 @@ function buildEdgeArc(src, tgt, cx, cy, radius, isClockwise, arrowLength = 0) {
   const midAngle = srcExitAngle + dir * visibleSweep / 2;
   return { path, midAngle };
 }
-var MIN_ARC_ANGLE, LABEL_FONT_SIZE5, CIRCLE_LABEL_FONT_SIZE, DESC_FONT_SIZE6, EDGE_LABEL_FONT_SIZE11, MIN_NODE_WIDTH4, MAX_NODE_WIDTH3, DESC_MIN_WIDTH, DESC_WIDTH_STEP, DESC_TARGET_RATIO, PLAIN_NODE_HEIGHT, HEADER_HEIGHT5, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, RENDERER_DESC_FONT, RENDERER_DESC_FONT_MIN, RENDERER_DESC_LINE_H, RENDERER_DESC_LINE_H_MIN, EDGE_LABEL_MAX_WIDTH;
+var MIN_ARC_ANGLE, LABEL_FONT_SIZE4, CIRCLE_LABEL_FONT_SIZE, DESC_FONT_SIZE6, EDGE_LABEL_FONT_SIZE11, MIN_NODE_WIDTH4, MAX_NODE_WIDTH3, DESC_MIN_WIDTH, DESC_WIDTH_STEP, DESC_TARGET_RATIO, PLAIN_NODE_HEIGHT, HEADER_HEIGHT4, DESC_LINE_HEIGHT7, DESC_PAD_Y, NODE_PAD_X, MIN_CIRCLE_RADIUS, CIRCLE_PAD, RENDERER_DESC_FONT, RENDERER_DESC_FONT_MIN, RENDERER_DESC_LINE_H, RENDERER_DESC_LINE_H_MIN, EDGE_LABEL_MAX_WIDTH;
 var init_layout14 = __esm({
   "src/cycle/layout.ts"() {
     "use strict";
@@ -48883,7 +49168,7 @@ var init_layout14 = __esm({
     init_wrapped_desc();
     init_text_measure();
     MIN_ARC_ANGLE = 15 * Math.PI / 180;
-    LABEL_FONT_SIZE5 = 13;
+    LABEL_FONT_SIZE4 = 13;
     CIRCLE_LABEL_FONT_SIZE = 16;
     DESC_FONT_SIZE6 = 11;
     EDGE_LABEL_FONT_SIZE11 = 11;
@@ -48893,7 +49178,7 @@ var init_layout14 = __esm({
     DESC_WIDTH_STEP = 20;
     DESC_TARGET_RATIO = 1.6;
     PLAIN_NODE_HEIGHT = 50;
-    HEADER_HEIGHT5 = 36;
+    HEADER_HEIGHT4 = 36;
     DESC_LINE_HEIGHT7 = 16;
     DESC_PAD_Y = 14;
     NODE_PAD_X = 20;
@@ -53000,6 +53285,8 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   const svg = d3Selection23.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY).style("background", layout.background);
   svg.append("rect").attr("width", width).attr("height", height).attr("fill", layout.background);
   const defs = svg.append("defs");
+  const uid = mapInstanceCounter++;
+  const nid = (base) => `${base}__m${uid}`;
   const arrowSize = (w) => Math.min(15, 7 + w * 0.95);
   const haloColor = palette.bg;
   const gRegions = svg.append("g").attr("class", "dgmo-map-regions");
@@ -53032,8 +53319,8 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   for (const r of layout.regions) drawRegion(gRegions, r, 0.5);
   if (layout.relief.length && layout.reliefHatch) {
     const h = layout.reliefHatch;
-    const rangeClipId = "dgmo-relief-clip";
-    const landClipId = "dgmo-relief-land";
+    const rangeClipId = nid("dgmo-relief-clip");
+    const landClipId = nid("dgmo-relief-land");
     const rangeClip = defs.append("clipPath").attr("id", rangeClipId);
     for (const s of layout.relief) rangeClip.append("path").attr("d", s.d);
     const landClip = defs.append("clipPath").attr("id", landClipId);
@@ -53046,7 +53333,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   }
   if (layout.coastlineStyle) {
     const cs = layout.coastlineStyle;
-    const maskId = "dgmo-map-water-mask";
+    const maskId = nid("dgmo-map-water-mask");
     const mask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
     mask.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "white");
     const landD = layout.regions.filter((r) => r.id !== "lake").map((r) => r.d).join(" ");
@@ -53064,7 +53351,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     appendWaterLines(
       gWater,
       defs,
-      "dgmo-map-coast",
+      nid("dgmo-map-coast"),
       // Pass the canvas frame so edges collinear with it (the antimeridian on a
       // world map, regional clipExtent cuts) don't get ringed as fake coast —
       // land runs cleanly to the render-area edge.
@@ -53101,7 +53388,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     (l) => l.poiId !== void 0 && !l.hidden
   );
   if (poiLabels.length) {
-    const patchBlurId = "dgmo-map-label-patch-blur";
+    const patchBlurId = nid("dgmo-map-label-patch-blur");
     defs.append("filter").attr("id", patchBlurId).attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%").append("feGaussianBlur").attr("in", "SourceGraphic").attr("stdDeviation", 2.5);
     const PAD = 8;
     const buildPatch = (labels, maskId, decoCluster) => {
@@ -53146,7 +53433,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     if (clusterUi) {
       buildPatch(
         poiLabels.filter((l) => l.clusterMember === void 0),
-        "dgmo-map-label-patch"
+        nid("dgmo-map-label-patch")
       );
       const byCluster = /* @__PURE__ */ new Map();
       for (const l of poiLabels) {
@@ -53157,9 +53444,9 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       }
       let ci = 0;
       for (const [cid, labs] of byCluster)
-        buildPatch(labs, `dgmo-map-label-patch-c${ci++}`, cid);
+        buildPatch(labs, nid(`dgmo-map-label-patch-c${ci++}`), cid);
     } else {
-      buildPatch(poiLabels, "dgmo-map-label-patch");
+      buildPatch(poiLabels, nid("dgmo-map-label-patch"));
     }
   }
   if (layout.insets.length) {
@@ -53168,7 +53455,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
       insetG.append("path").attr("d", d).attr("fill", layout.background).attr("stroke", mix(palette.text, palette.bg, 55)).attr("stroke-width", 1).attr("stroke-linejoin", "round");
       if (box.contextLand) {
-        const clipId = `dgmo-map-inset-clip-${bi}`;
+        const clipId = nid(`dgmo-map-inset-clip-${bi}`);
         defs.append("clipPath").attr("id", clipId).append("path").attr("d", d);
         insetG.append("path").attr("d", box.contextLand.d).attr("fill", box.contextLand.fill).attr("clip-path", `url(#${clipId})`);
       }
@@ -53176,7 +53463,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     for (const r of layout.insetRegions) drawRegion(insetG, r, 0.5);
     if (layout.coastlineStyle) {
       const cs = layout.coastlineStyle;
-      const maskId = "dgmo-map-inset-water-mask";
+      const maskId = nid("dgmo-map-inset-water-mask");
       const mask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
       const reach = Math.max(0, ...cs.lines.map((l) => l.d + l.thickness));
       for (const box of layout.insets) {
@@ -53185,7 +53472,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       }
       layout.insets.forEach((box, bi) => {
         if (box.contextLand)
-          mask.append("path").attr("d", box.contextLand.d).attr("fill", "black").attr("clip-path", `url(#dgmo-map-inset-clip-${bi})`);
+          mask.append("path").attr("d", box.contextLand.d).attr("fill", "black").attr("clip-path", `url(#${nid(`dgmo-map-inset-clip-${bi}`)})`);
       });
       for (const r of layout.insetRegions)
         if (r.id !== "lake")
@@ -53193,7 +53480,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       for (const r of layout.insetRegions)
         if (r.id === "lake")
           mask.append("path").attr("d", r.d).attr("fill", "white");
-      const clipId = "dgmo-map-inset-water-clip";
+      const clipId = nid("dgmo-map-inset-water-clip");
       const clip = defs.append("clipPath").attr("id", clipId);
       for (const box of layout.insets) {
         const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
@@ -53203,7 +53490,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       appendWaterLines(
         gInsetWater,
         defs,
-        "dgmo-map-inset-coast",
+        nid("dgmo-map-inset-coast"),
         coastlineOuterRings(layout.insetRegions, cs.minExtent),
         cs,
         layout.background
@@ -53232,7 +53519,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     }
     wireSync(p, leg.lineNumber);
     if (leg.arrow) {
-      const id = `dgmo-map-arrow-${i}`;
+      const id = nid(`dgmo-map-arrow-${i}`);
       const s = arrowSize(leg.width);
       defs.append("marker").attr("id", id).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", s).attr("markerHeight", s).attr("orient", "auto-start-reverse").append("path").attr("d", "M0,0L10,5L0,10z").attr("fill", leg.color);
       p.attr("marker-end", `url(#${id})`);
@@ -53428,7 +53715,7 @@ function emitText(g, x, y, text, anchor, color, halo, withHalo, fontSize, italic
   }
   return t;
 }
-var LABEL_FONT;
+var LABEL_FONT, mapInstanceCounter;
 var init_renderer16 = __esm({
   "src/map/renderer.ts"() {
     "use strict";
@@ -53440,6 +53727,7 @@ var init_renderer16 = __esm({
     init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
+    mapInstanceCounter = 0;
   }
 });
 
@@ -54371,7 +54659,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
   const sHMargin = ctx.aesthetic(H_MARGIN);
   const sVMargin = ctx.aesthetic(V_MARGIN3);
   const sTitleAreaHeight = ctx.structural(TITLE_AREA_HEIGHT4);
-  const sHeaderHeight = ctx.structural(HEADER_HEIGHT6);
+  const sHeaderHeight = ctx.structural(HEADER_HEIGHT5);
   const sRowHeight = ctx.structural(ROW_HEIGHT);
   const sPhaseHeight = ctx.structural(PHASE_HEIGHT);
   const sTaskLabelMin = ctx.structural(TASK_LABEL_MIN);
@@ -54396,7 +54684,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
   const sLegendLetterFont = ctx.text(LEGEND_LETTER_FONT);
   const sViolationLineHeight = ctx.structural(VIOLATION_LINE_HEIGHT);
   const sStackTopGap = ctx.structural(STACK_TOP_GAP);
-  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH12);
+  const sNodeStrokeWidth = ctx.structural(NODE_STROKE_WIDTH);
   const sNodeRadius = ctx.structural(NODE_RADIUS3);
   const innerWidth = Math.max(0, width - 2 * sHMargin);
   let roleColW = Math.max(
@@ -54942,7 +55230,7 @@ function parseQuotedSegments(message) {
     out.push({ text: message.slice(last), bold: false });
   return out;
 }
-var MARKER_LABELS, TITLE_AREA_HEIGHT4, H_MARGIN, V_MARGIN3, LEGEND_HEIGHT2, LEGEND_CHIP_GAP, LEGEND_CHIP_LABEL_MIN, LEGEND_LETTER_CHIP_W, TITLE_LEGEND_GAP, LEGEND_LABEL_FONT, LEGEND_LETTER_FONT, HEADER_HEIGHT6, ROW_HEIGHT, PHASE_HEIGHT, TASK_LABEL_MIN, TASK_LABEL_MAX, ROLE_COL_MIN, ROLE_COL_MAX, CELL_PAD, VIOLATION_LINE_HEIGHT, STACK_TOP_GAP, DESC_FONT, COLUMN_RADIUS3, COLUMN_INSET, COLUMN_BOTTOM_PAD, MARKER_FONT, MARKER_FONT_WEIGHT, LABEL_FONT2, ROLE_HEADER_FONT, PHASE_FONT, TINT_PCT, NODE_STROKE_WIDTH12, NODE_RADIUS3, AUTO_ACCENTS, SLICE_GAP, NAME_LINE_HEIGHT, DESC_LINE_HEIGHT9;
+var MARKER_LABELS, TITLE_AREA_HEIGHT4, H_MARGIN, V_MARGIN3, LEGEND_HEIGHT2, LEGEND_CHIP_GAP, LEGEND_CHIP_LABEL_MIN, LEGEND_LETTER_CHIP_W, TITLE_LEGEND_GAP, LEGEND_LABEL_FONT, LEGEND_LETTER_FONT, HEADER_HEIGHT5, ROW_HEIGHT, PHASE_HEIGHT, TASK_LABEL_MIN, TASK_LABEL_MAX, ROLE_COL_MIN, ROLE_COL_MAX, CELL_PAD, VIOLATION_LINE_HEIGHT, STACK_TOP_GAP, DESC_FONT, COLUMN_RADIUS3, COLUMN_INSET, COLUMN_BOTTOM_PAD, MARKER_FONT, MARKER_FONT_WEIGHT, LABEL_FONT2, ROLE_HEADER_FONT, PHASE_FONT, TINT_PCT, NODE_RADIUS3, AUTO_ACCENTS, SLICE_GAP, NAME_LINE_HEIGHT, DESC_LINE_HEIGHT9;
 var init_renderer19 = __esm({
   "src/raci/renderer.ts"() {
     "use strict";
@@ -54953,6 +55241,7 @@ var init_renderer19 = __esm({
     init_variants();
     init_scaling();
     init_text_measure();
+    init_visual_conventions();
     MARKER_LABELS = {
       raci: { R: "Responsible", A: "Accountable", C: "Consulted", I: "Informed" },
       rasci: {
@@ -54974,7 +55263,7 @@ var init_renderer19 = __esm({
     TITLE_LEGEND_GAP = 16;
     LEGEND_LABEL_FONT = 12;
     LEGEND_LETTER_FONT = 14;
-    HEADER_HEIGHT6 = 36;
+    HEADER_HEIGHT5 = 36;
     ROW_HEIGHT = 36;
     PHASE_HEIGHT = 40;
     TASK_LABEL_MIN = 200;
@@ -54994,7 +55283,6 @@ var init_renderer19 = __esm({
     ROLE_HEADER_FONT = 12;
     PHASE_FONT = 13;
     TINT_PCT = 25;
-    NODE_STROKE_WIDTH12 = 1.5;
     NODE_RADIUS3 = 6;
     AUTO_ACCENTS = [
       "blue",
@@ -55595,11 +55883,11 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const lines = splitParticipantLabel(
       p.label,
       labelTextWidth(PARTICIPANT_BOX_WIDTH),
-      LABEL_FONT_SIZE6
+      LABEL_FONT_SIZE5
     );
     if (lines.length === 0) continue;
     const widest = Math.max(
-      ...lines.map((l) => measureText(l, LABEL_FONT_SIZE6))
+      ...lines.map((l) => measureText(l, LABEL_FONT_SIZE5))
     );
     const labelWidth2 = widest + 10;
     uniformBoxWidth = Math.max(uniformBoxWidth, labelWidth2);
@@ -55633,7 +55921,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const sSelfCallWidth = ctx.structural(SELF_CALL_WIDTH);
   const sNoteTextWidthMax = sNoteMaxW - sNotePadH * 2 - sNoteFold;
   const sNoteLaneMax = sGap - sActivationWidth - sNoteGap;
-  const sLabelFontSize = ctx.text(LABEL_FONT_SIZE6);
+  const sLabelFontSize = ctx.text(LABEL_FONT_SIZE5);
   const sLabelTextWidth = labelTextWidth(sBoxW);
   const participantIndexMap = /* @__PURE__ */ new Map();
   participants.forEach((p, i) => participantIndexMap.set(p.id, i));
@@ -56770,7 +57058,7 @@ function buildNoteMessageMap(elements) {
   walk(elements);
   return map;
 }
-function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, solid, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize2 = LABEL_FONT_SIZE6) {
+function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tagAttr, solid, boxW = W, boxH = H, labelTextW = labelTextWidth(W), labelFontSize2 = LABEL_FONT_SIZE5) {
   const g = svg.append("g").attr("transform", `translate(${cx}, ${cy})`).attr("class", "participant").attr("data-participant-id", participant.id);
   if (tagAttr) {
     g.attr(`data-tag-${tagAttr.key}`, tagAttr.value);
@@ -56818,7 +57106,7 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark, color, tag
     });
   }
 }
-var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, LABEL_FONT_SIZE6, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W2, NOTE_FOLD2, NOTE_PAD_H2, NOTE_PAD_V2, NOTE_FONT_SIZE2, NOTE_LINE_H2, NOTE_GAP2, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, ACTOR_LABEL_CLEARANCE, labelTextWidth, fill, stroke, SW, W, H;
+var PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, LABEL_FONT_SIZE5, TOP_MARGIN, TITLE_HEIGHT8, PARTICIPANT_Y_OFFSET, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W2, NOTE_FOLD2, NOTE_PAD_H2, NOTE_PAD_V2, NOTE_FONT_SIZE2, NOTE_LINE_H2, NOTE_GAP2, ACTIVATION_WIDTH, SELF_CALL_HEIGHT, SELF_CALL_WIDTH, ACTOR_LABEL_CLEARANCE, labelTextWidth, fill, stroke, SW, W, H;
 var init_renderer20 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
@@ -56838,7 +57126,7 @@ var init_renderer20 = __esm({
     PARTICIPANT_GAP = 160;
     PARTICIPANT_BOX_WIDTH = 120;
     PARTICIPANT_BOX_HEIGHT = 50;
-    LABEL_FONT_SIZE6 = 13;
+    LABEL_FONT_SIZE5 = 13;
     TOP_MARGIN = 20;
     TITLE_HEIGHT8 = 30;
     PARTICIPANT_Y_OFFSET = 10;