@diagrammo/dgmo 0.30.0 → 0.32.0

package/dist/auto.mjs

@@ -38,6 +38,14 @@ function makeDgmoError(line11, message, severity = "error", code) {
 function formatDgmoError(err) {
   return err.line > 0 ? `Line ${err.line}: ${err.message}` : err.message;
 }
+function makeFail(result) {
+  return (line11, message) => {
+    const diag = makeDgmoError(line11, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+    return result;
+  };
+}
 function levenshtein(a, b) {
   const m = a.length;
   const n = b.length;
@@ -304,21 +312,99 @@ function resolveColor(color, palette) {
   }
   return colorNames[lower] ?? null;
 }
+function nearestNamedColor(input) {
+  const cssHex = INVALID_CSS_COLOR_HEX[input.trim().toLowerCase()];
+  if (cssHex) input = cssHex;
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(input.trim());
+  if (!m) return null;
+  let h = m[1].toLowerCase();
+  if (h.length === 3)
+    h = h.split("").map((c) => c + c).join("");
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  if (s < 0.15) {
+    if (l < 0.2) return "black";
+    if (l > 0.85) return "white";
+    return "gray";
+  }
+  let hue;
+  if (max === r) hue = 60 * ((g - b) / delta % 6);
+  else if (max === g) hue = 60 * ((b - r) / delta + 2);
+  else hue = 60 * ((r - g) / delta + 4);
+  if (hue < 0) hue += 360;
+  const anchors = [
+    ["red", 0],
+    ["orange", 30],
+    ["yellow", 55],
+    ["green", 120],
+    ["teal", 170],
+    ["cyan", 190],
+    ["blue", 225],
+    ["purple", 285],
+    ["red", 360]
+  ];
+  let best = "red";
+  let bestD = Infinity;
+  for (const [name, deg] of anchors) {
+    const d = Math.abs(hue - deg);
+    if (d < bestD) {
+      bestD = d;
+      best = name;
+    }
+  }
+  return best;
+}
+function isInvalidColorToken(token) {
+  if (/^(#|rgba?\(|hsla?\()/i.test(token)) return true;
+  const lower = token.toLowerCase();
+  return INVALID_CSS_COLOR_HEX[lower] !== void 0 && !isRecognizedColorName(lower);
+}
+function invalidColorDiagnostic(token, line11) {
+  if (!isInvalidColorToken(token)) return null;
+  const nearest = nearestNamedColor(token);
+  const near = nearest ? ` Nearest: ${nearest}.` : "";
+  return makeDgmoError(
+    line11,
+    `Color "${token}" is not a valid DGMO color \u2014 DGMO accepts only these 11 named colors: ${RECOGNIZED_COLOR_NAMES.join(", ")} (no hex, no CSS color names).${near}`,
+    "warning",
+    INVALID_COLOR_CODE
+  );
+}
 function resolveColorWithDiagnostic(color, line11, diagnostics, palette) {
   const resolved = resolveColor(color, palette);
   if (resolved !== null) return resolved;
+  if (/^(#|rgba?\(|hsla?\()/i.test(color)) {
+    const nearest = nearestNamedColor(color);
+    const near = nearest ? ` Nearest: ${nearest}.` : "";
+    diagnostics.push(
+      makeDgmoError(
+        line11,
+        `Color "${color}" is not supported \u2014 DGMO does not accept hex or CSS color values. Use a named palette color: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${near}`,
+        "error",
+        INVALID_COLOR_CODE
+      )
+    );
+    return void 0;
+  }
   const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
   const suggestion = hint ? ` ${hint}` : "";
   diagnostics.push(
     makeDgmoError(
       line11,
-      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
-      "warning"
+      `Unknown color "${color}". DGMO accepts only these 11 named colors: ${RECOGNIZED_COLOR_NAMES.join(", ")} (no hex, no CSS color names).${suggestion}`,
+      "warning",
+      INVALID_COLOR_CODE
     )
   );
   return void 0;
 }
-var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
+var nord, colorNames, RECOGNIZED_COLOR_NAMES, CATEGORICAL_COLOR_ORDER, INVALID_COLOR_CODE, INVALID_CSS_COLOR_HEX, seriesColors;
 var init_colors = __esm({
   "src/colors.ts"() {
     "use strict";
@@ -376,6 +462,102 @@ var init_colors = __esm({
       "black",
       "white"
     ]);
+    CATEGORICAL_COLOR_ORDER = Object.freeze([
+      "red",
+      "green",
+      "blue",
+      "yellow",
+      "teal",
+      "purple",
+      "orange",
+      "cyan"
+    ]);
+    INVALID_COLOR_CODE = "E_INVALID_COLOR";
+    INVALID_CSS_COLOR_HEX = Object.freeze({
+      pink: "#ffc0cb",
+      hotpink: "#ff69b4",
+      deeppink: "#ff1493",
+      lightpink: "#ffb6c1",
+      palevioletred: "#db7093",
+      crimson: "#dc143c",
+      scarlet: "#ff2400",
+      firebrick: "#b22222",
+      darkred: "#8b0000",
+      maroon: "#800000",
+      salmon: "#fa8072",
+      lightsalmon: "#ffa07a",
+      darksalmon: "#e9967a",
+      coral: "#ff7f50",
+      lightcoral: "#f08080",
+      tomato: "#ff6347",
+      orangered: "#ff4500",
+      darkorange: "#ff8c00",
+      gold: "#ffd700",
+      goldenrod: "#daa520",
+      darkgoldenrod: "#b8860b",
+      khaki: "#f0e68c",
+      darkkhaki: "#bdb76b",
+      amber: "#ffbf00",
+      lavender: "#e6e6fa",
+      violet: "#ee82ee",
+      magenta: "#ff00ff",
+      fuchsia: "#ff00ff",
+      orchid: "#da70d6",
+      plum: "#dda0dd",
+      indigo: "#4b0082",
+      navy: "#000080",
+      midnightblue: "#191970",
+      darkblue: "#00008b",
+      mediumblue: "#0000cd",
+      royalblue: "#4169e1",
+      cornflowerblue: "#6495ed",
+      dodgerblue: "#1e90ff",
+      deepskyblue: "#00bfff",
+      skyblue: "#87ceeb",
+      lightskyblue: "#87cefa",
+      lightblue: "#add8e6",
+      powderblue: "#b0e0e6",
+      steelblue: "#4682b4",
+      slateblue: "#6a5acd",
+      cadetblue: "#5f9ea0",
+      turquoise: "#40e0d0",
+      aqua: "#00ffff",
+      aquamarine: "#7fffd4",
+      lime: "#00ff00",
+      limegreen: "#32cd32",
+      lightgreen: "#90ee90",
+      palegreen: "#98fb98",
+      seagreen: "#2e8b57",
+      mediumseagreen: "#3cb371",
+      forestgreen: "#228b22",
+      darkgreen: "#006400",
+      olive: "#808000",
+      olivedrab: "#6b8e23",
+      darkolivegreen: "#556b2f",
+      chartreuse: "#7fff00",
+      lawngreen: "#7cfc00",
+      springgreen: "#00ff7f",
+      greenyellow: "#adff2f",
+      brown: "#a52a2a",
+      sienna: "#a0522d",
+      chocolate: "#d2691e",
+      peru: "#cd853f",
+      tan: "#d2b48c",
+      beige: "#f5f5dc",
+      wheat: "#f5deb3",
+      ivory: "#fffff0",
+      silver: "#c0c0c0",
+      lightgray: "#d3d3d3",
+      lightgrey: "#d3d3d3",
+      darkgray: "#a9a9a9",
+      darkgrey: "#a9a9a9",
+      dimgray: "#696969",
+      dimgrey: "#696969",
+      slategray: "#708090",
+      slategrey: "#708090",
+      gainsboro: "#dcdcdc",
+      grey: "#808080"
+    });
     seriesColors = [
       nord.nord10,
       // blue
@@ -550,7 +732,13 @@ function extractColor(label, palette, diagnostics, line11) {
   );
   if (lastSpaceIdx < 0) return { label };
   const trailing = label.substring(lastSpaceIdx + 1);
-  if (!RECOGNIZED_COLOR_SET.has(trailing)) return { label };
+  if (!RECOGNIZED_COLOR_SET.has(trailing)) {
+    if (diagnostics && line11 !== void 0) {
+      const diag = invalidColorDiagnostic(trailing, line11);
+      if (diag) diagnostics.push(diag);
+    }
+    return { label };
+  }
   let color;
   if (diagnostics && line11 !== void 0) {
     color = resolveColorWithDiagnostic(trailing, line11, diagnostics, palette);
@@ -1174,6 +1362,23 @@ function validateTagGroupNames(tagGroups, pushWarning, pushError) {
     }
   }
 }
+function cascadeTagMetadata(roots, tagGroups) {
+  const keys = tagGroups.map((g) => g.name.toLowerCase());
+  if (keys.length === 0) return;
+  const walk = (node, inherited) => {
+    const childInherited = { ...inherited };
+    for (const key of keys) {
+      const own = node.metadata[key];
+      if (own) {
+        childInherited[key] = own;
+      } else if (inherited[key]) {
+        node.metadata[key] = inherited[key];
+      }
+    }
+    for (const child of node.children) walk(child, childInherited);
+  };
+  for (const root of roots) walk(root, {});
+}
 function injectDefaultTagMetadata(entities, tagGroups, skip) {
   const defaults = [];
   for (const group of tagGroups) {
@@ -1229,11 +1434,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_-]*$/;
   }
@@ -1716,7 +1917,12 @@ function parseVisualizationFull(content, palette) {
     }
     if (currentTimelineTagGroup && indent > 0) {
       const { text: entryText, isDefault } = stripDefaultModifier(line11);
-      const { label, color } = extractColor(entryText, palette);
+      const { label, color } = extractColor(
+        entryText,
+        palette,
+        result.diagnostics,
+        lineNumber
+      );
       if (color) {
         if (isDefault) {
           currentTimelineTagGroup.defaultValue = label;
@@ -3017,13 +3223,16 @@ function contrastText(bg, lightText, darkText) {
   }
   return lightText;
 }
+function themeBaseBg(palette, isDark) {
+  return isDark ? palette.surface : palette.bg;
+}
 function shapeFill(palette, intent, isDark, opts) {
   if (opts?.solid) return intent;
-  return mix(intent, isDark ? palette.surface : palette.bg, 25);
+  return mix(intent, themeBaseBg(palette, isDark), 25);
 }
 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 [];
@@ -3050,7 +3259,7 @@ function getSegmentColors(palette, count) {
 }
 function politicalTints(palette, count, isDark) {
   if (count <= 0) return [];
-  const base = isDark ? palette.surface : palette.bg;
+  const base = themeBaseBg(palette, isDark);
   const c = palette.colors;
   const swatches = [
     .../* @__PURE__ */ new Set([
@@ -3076,6 +3285,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]
@@ -3859,6 +4069,7 @@ __export(palettes_exports, {
   shade: () => shade,
   shapeFill: () => shapeFill,
   slatePalette: () => slatePalette,
+  themeBaseBg: () => themeBaseBg,
   tidewaterPalette: () => tidewaterPalette,
   tint: () => tint,
   tokyoNightPalette: () => tokyoNightPalette
@@ -4092,6 +4303,30 @@ var init_scaling = __esm({
         const clamped = Math.max(Math.min(raw, 1), minScaleFactor);
         return new _ScaleContext(clamped, minScaleFactor);
       }
+      /**
+       * Fit content into a bounding box, scaling by whichever dimension is more
+       * constraining (the smaller of the width- and height-fit ratios) so the
+       * diagram never overflows the canvas in either axis. Like {@link from}, the
+       * factor is clamped to `[minScaleFactor, 1]` (content is never enlarged, and
+       * never shrunk past the readability floor).
+       */
+      static fromBox(containerWidth, idealWidth, containerHeight, idealHeight, minScaleFactor = DEFAULT_MIN_SCALE_FACTOR) {
+        const wRaw = idealWidth > 0 ? containerWidth / idealWidth : 1;
+        const hRaw = idealHeight > 0 ? containerHeight / idealHeight : 1;
+        const raw = Math.min(wRaw, hRaw);
+        const clamped = Math.max(Math.min(raw, 1), minScaleFactor);
+        return new _ScaleContext(clamped, minScaleFactor);
+      }
+      /**
+       * Build a context from an explicit raw factor (clamped to
+       * `[minScaleFactor, 1]`). Used to refine a fit iteratively: layout scaling is
+       * non-linear (gaps shrink faster than floored text), so the first-pass factor
+       * can still overflow — re-measure the laid-out result and tighten.
+       */
+      static fromFactor(rawFactor, minScaleFactor = DEFAULT_MIN_SCALE_FACTOR) {
+        const clamped = Math.max(Math.min(rawFactor, 1), minScaleFactor);
+        return new _ScaleContext(clamped, minScaleFactor);
+      }
       static identity() {
         return new _ScaleContext(1, DEFAULT_MIN_SCALE_FACTOR);
       }
@@ -5792,12 +6027,7 @@ function parseSequenceDgmo(content, palette) {
     const trimmed = token.trim();
     return nameAliasMap.get(trimmed) ?? trimmed;
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const pushError = (line11, message) => {
     const diag = makeDgmoError(line11, message);
     result.diagnostics.push(diag);
@@ -5812,6 +6042,7 @@ function parseSequenceDgmo(content, palette) {
   const lines = content.split("\n");
   let hasExplicitChart = false;
   let contentStarted = false;
+  let bodyStarted = false;
   let firstLineIndex = -1;
   for (let fi = 0; fi < lines.length; fi++) {
     const fl = lines[fi].trim();
@@ -6123,6 +6354,7 @@ function parseSequenceDgmo(content, palette) {
         );
       }
       contentStarted = true;
+      bodyStarted = true;
       const section = {
         kind: "section",
         // Capture group 1 guaranteed present after successful match.
@@ -6338,7 +6570,7 @@ function parseSequenceDgmo(content, palette) {
         alias: bareAlias
       } = splitPipe(trimmed, lineNumber);
       const inGroup = activeGroup && measureIndent(raw) > 0;
-      if (/^\S+$/.test(bareCore) && !ARROW_PATTERN.test(bareCore) && (inGroup || !contentStarted || bareMeta)) {
+      if (/^\S+$/.test(bareCore) && !ARROW_PATTERN.test(bareCore) && (inGroup || !bodyStarted || bareMeta)) {
         contentStarted = true;
         const id = bareCore;
         if (bareAlias !== void 0) nameAliasMap.set(bareAlias, id);
@@ -6385,6 +6617,7 @@ function parseSequenceDgmo(content, palette) {
     }
     if (labeledArrow) {
       contentStarted = true;
+      bodyStarted = true;
       const { from, to, label: rawLabel, async: isAsync } = labeledArrow;
       const fromKey = addParticipant(resolveAlias(from), lineNumber);
       const toKey = addParticipant(resolveAlias(to), lineNumber);
@@ -6449,6 +6682,7 @@ function parseSequenceDgmo(content, palette) {
     const bareCall = bareCallSync || bareCallAsync;
     if (bareCall) {
       contentStarted = true;
+      bodyStarted = true;
       const from = bareCall[1];
       const to = bareCall[2];
       const fromKey = addParticipant(resolveAlias(from), lineNumber);
@@ -6470,6 +6704,7 @@ function parseSequenceDgmo(content, palette) {
     const ifMatch = trimmed.match(/^if\s+(.+)$/i);
     if (ifMatch) {
       contentStarted = true;
+      bodyStarted = true;
       const block = {
         kind: "block",
         type: "if",
@@ -6486,6 +6721,7 @@ function parseSequenceDgmo(content, palette) {
     const loopMatch = trimmed.match(/^loop\s+(.+)$/i);
     if (loopMatch) {
       contentStarted = true;
+      bodyStarted = true;
       const block = {
         kind: "block",
         type: "loop",
@@ -6502,6 +6738,7 @@ function parseSequenceDgmo(content, palette) {
     const parallelMatch = trimmed.match(/^parallel(?:\s+(.+))?$/i);
     if (parallelMatch) {
       contentStarted = true;
+      bodyStarted = true;
       const block = {
         kind: "block",
         type: "parallel",
@@ -6598,6 +6835,7 @@ function parseSequenceDgmo(content, palette) {
             lineNumber,
             endLineNumber: lineNumber
           };
+          bodyStarted = true;
           currentContainer().push(note);
           continue;
         }
@@ -6622,6 +6860,7 @@ function parseSequenceDgmo(content, palette) {
             endLineNumber: i + 1
             // i has advanced past the body lines (1-based)
           };
+          bodyStarted = true;
           currentContainer().push(note);
           continue;
         }
@@ -7466,6 +7705,15 @@ function parseNodeRef(text) {
   }
   return null;
 }
+function parseNodeRefLoose(text) {
+  const t = text.trim();
+  const shapeRe = /^(\[\[.+?\]\]|\[.+?~\]|\[.+?\]|\(.+?\)|<.+?>|\/.+?\/)\s+(\S.*)$/;
+  const m = t.match(shapeRe);
+  if (!m) return null;
+  const ref = parseNodeRef(m[1]);
+  if (!ref) return null;
+  return { ref, trailing: m[2].trim() };
+}
 function splitArrows(line11) {
   const segments = [];
   const arrowPositions = [];
@@ -7561,6 +7809,7 @@ function parseFlowchart(content, palette) {
   const notes = [];
   let contentStarted = false;
   let firstLineParsed = false;
+  let prevLineLastNodeId = null;
   const nameAliasMap = /* @__PURE__ */ new Map();
   function peelAlias2(seg) {
     const trimmed = seg.trim();
@@ -7568,6 +7817,19 @@ function parseFlowchart(content, palette) {
     if (!m) return { seg: trimmed };
     return { seg: m[1].trim(), alias: m[2] };
   }
+  const suffixWarnedLines = /* @__PURE__ */ new Set();
+  function warnUnsupportedSuffix(lineNumber, trailing) {
+    if (suffixWarnedLines.has(lineNumber)) return;
+    suffixWarnedLines.add(lineNumber);
+    result.diagnostics.push(
+      makeDgmoError(
+        lineNumber,
+        `Ignored unsupported text after a node shape: "${trailing}". Flowcharts have no tag groups or node metadata; node colors are assigned automatically by shape (e.g. terminals green/red, decisions yellow). Remove the suffix.`,
+        "warning",
+        "W_FLOWCHART_NODE_SUFFIX"
+      )
+    );
+  }
   function getOrCreateNode(ref, lineNumber) {
     const key = ref.id;
     const existing = nodeMap.get(key);
@@ -7626,6 +7888,8 @@ function parseFlowchart(content, palette) {
       indentStack[indentStack.length - 1].nodeId
     ) : null;
     const segments = splitArrows(trimmed);
+    const startsWithArrow = segments.length >= 2 && segments[0].trim() === "";
+    const effectiveSource = implicitSourceId ?? (startsWithArrow ? prevLineLastNodeId : null);
     if (segments.length === 1) {
       const peeled = peelAlias2(segments[0]);
       const ref = parseNodeRef(peeled.seg);
@@ -7635,6 +7899,13 @@ function parseFlowchart(content, palette) {
         indentStack.push({ nodeId: node.id, indent });
         return node.id;
       }
+      const loose = parseNodeRefLoose(peeled.seg);
+      if (loose) {
+        warnUnsupportedSuffix(lineNumber, loose.trailing);
+        const node = getOrCreateNode(loose.ref, lineNumber);
+        indentStack.push({ nodeId: node.id, indent });
+        return node.id;
+      }
       const aliasResolved = nameAliasMap.get(peeled.seg.trim());
       if (aliasResolved !== void 0) {
         indentStack.push({ nodeId: aliasResolved, indent });
@@ -7670,16 +7941,23 @@ function parseFlowchart(content, palette) {
           }
         }
       }
+      if (!ref) {
+        const loose = parseNodeRefLoose(peeled.seg);
+        if (loose) {
+          warnUnsupportedSuffix(lineNumber, loose.trailing);
+          ref = loose.ref;
+        }
+      }
       if (!ref) continue;
       const node = getOrCreateNode(ref, lineNumber);
       if (peeled.alias) nameAliasMap.set(peeled.alias, node.id);
       if (pendingArrow !== null) {
-        const sourceId = lastNodeId ?? implicitSourceId;
+        const sourceId = lastNodeId ?? effectiveSource;
         if (sourceId) {
           addEdge(sourceId, node.id, lineNumber, pendingArrow.label);
         }
         pendingArrow = null;
-      } else if (lastNodeId === null && implicitSourceId === null) {
+      } else if (lastNodeId === null && effectiveSource === null) {
       }
       lastNodeId = node.id;
     }
@@ -7761,7 +8039,8 @@ function parseFlowchart(content, palette) {
         continue;
       }
     }
-    processContentLine(trimmed, lineNumber, indent);
+    const lastId = processContentLine(trimmed, lineNumber, indent);
+    if (lastId) prevLineLastNodeId = lastId;
   }
   if (result.nodes.length === 0 && !result.error) {
     const diag = makeDgmoError(
@@ -8844,7 +9123,12 @@ function parseERDiagram(content, palette) {
     }
     if (currentTagGroup && !contentStarted && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const { label, color } = extractColor(cleanEntry, palette);
+      const { label, color } = extractColor(
+        cleanEntry,
+        palette,
+        result.diagnostics,
+        lineNumber
+      );
       if (isDefault) {
         currentTagGroup.defaultValue = label;
       } else if (currentTagGroup.entries.length === 0) {
@@ -9162,12 +9446,7 @@ function parseOrg(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const pushError = (line11, message) => {
     const diag = makeDgmoError(line11, message);
     result.diagnostics.push(diag);
@@ -9276,7 +9555,12 @@ function parseOrg(content, palette) {
       const indent2 = measureIndent(line11);
       if (indent2 > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         if (isDefault) {
           currentTagGroup.defaultValue = label;
         } else if (currentTagGroup.entries.length === 0) {
@@ -9562,12 +9846,7 @@ function parseSitemap(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const pushError = (line11, message) => {
     const diag = makeDgmoError(line11, message);
     result.diagnostics.push(diag);
@@ -9668,7 +9947,12 @@ function parseSitemap(content, palette) {
       const indent2 = measureIndent(line11);
       if (indent2 > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         currentTagGroup.entries.push({
           value: label,
           color: color ?? AUTO_TAG_COLOR_SENTINEL,
@@ -11383,7 +11667,7 @@ var init_chart_types = __esm({
       },
       {
         id: "sequence",
-        description: "Message / interaction flows",
+        description: "Message request and response interaction flows",
         fallback: true
       },
       {
@@ -11474,7 +11758,7 @@ var init_chart_types = __esm({
       },
       {
         id: "slope",
-        description: "Change between two periods"
+        description: "Change between 2 time periods"
       },
       {
         id: "sankey",
@@ -11503,7 +11787,7 @@ var init_chart_types = __esm({
       // ── Tier 4 — General-purpose data charts ──────────────────
       {
         id: "bar",
-        description: "Categorical comparisons",
+        description: "Categorical comparisons for 3 - 5 figures",
         fallback: true
       },
       {
@@ -11765,7 +12049,9 @@ function parseChart(content, palette) {
     if (dataValues) {
       const { label: rawLabel, color: pointColor } = extractColor(
         dataValues.label,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       const [first, ...rest] = dataValues.values;
       result.data.push({
@@ -11830,6 +12116,12 @@ function parseChart(content, palette) {
       'Chart type "bar-stacked" requires multiple series names. Use: series Name1, Name2, Name3'
     );
   }
+  if (!result.error && result.type === "bar" && (result.seriesNames?.length ?? 0) > 1) {
+    warn2(
+      result.seriesLineNumber ?? 1,
+      `Plain "bar" shows only the first series ("${result.seriesNames[0]}"); the other ${result.seriesNames.length - 1} are dropped at render. Use "bar-stacked" for stacked bars or "multi-line" to plot every series.`
+    );
+  }
   if (!result.error && result.seriesNames) {
     const expectedCount = result.seriesNames.length;
     for (const dp of result.data) {
@@ -12100,7 +12392,9 @@ function parseScatterRow(line11, palette, currentCategory, lineNumber, diagnosti
   if (!dataRow || dataRow.values.length < 2) return null;
   const { label: rawLabel, color: pointColor } = extractColor(
     dataRow.label,
-    palette
+    palette,
+    diagnostics,
+    lineNumber
   );
   return {
     name: rawLabel,
@@ -12238,11 +12532,15 @@ function parseExtendedChartFull(content, palette) {
       const targetResolved = resolveSlot(rawTarget);
       const { label: source, color: sourceColor } = extractColor(
         sourceResolved,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       const { label: target, color: targetColor } = extractColor(
         targetResolved,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       if (sourceColor || targetColor) {
         if (!result.nodeColors) result.nodeColors = {};
@@ -12294,7 +12592,9 @@ function parseExtendedChartFull(content, palette) {
             const targetResolved = resolveSlot(dataRow2.label);
             const { label: target, color: targetColor } = extractColor(
               targetResolved,
-              palette
+              palette,
+              result.diagnostics,
+              lineNumber
             );
             if (targetColor) {
               if (!result.nodeColors) result.nodeColors = {};
@@ -12327,7 +12627,9 @@ function parseExtendedChartFull(content, palette) {
         const trimmedResolved = resolveSlot(trimmed);
         const { label: nodeName, color: nodeColor2 } = extractColor(
           trimmedResolved,
-          palette
+          palette,
+          result.diagnostics,
+          lineNumber
         );
         if (nodeColor2) {
           if (!result.nodeColors) result.nodeColors = {};
@@ -12417,8 +12719,11 @@ function parseExtendedChartFull(content, palette) {
             min: parseFloat(rangeMatch[1]),
             max: parseFloat(rangeMatch[2])
           };
+          continue;
+        }
+        if (!(result.type === "function" && trimmed.includes(":"))) {
+          continue;
         }
-        continue;
       }
     }
     if (firstToken === "no-name") {
@@ -12478,7 +12783,9 @@ function parseExtendedChartFull(content, palette) {
       if (colonIndex >= 0) {
         const { label: fnName, color: fnColor } = extractColor(
           trimmed.substring(0, colonIndex).trim(),
-          palette
+          palette,
+          result.diagnostics,
+          lineNumber
         );
         const fnValue = trimmed.substring(colonIndex + 1).trim();
         if (!result.functions) result.functions = [];
@@ -12526,7 +12833,9 @@ function parseExtendedChartFull(content, palette) {
     if (dataRow?.values.length === 1) {
       const { label: rawLabel, color: pointColor } = extractColor(
         dataRow.label,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       result.data.push({
         label: rawLabel,
@@ -12625,11 +12934,11 @@ function buildExtendedChartOption(parsed, palette, isDark, ctx) {
   const sc = ctx ?? ScaleContext.identity();
   const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark, sc);
   if (parsed.type === "sankey") {
-    const bg = isDark ? palette.surface : palette.bg;
+    const bg = themeBaseBg(palette, isDark);
     return buildSankeyOption(parsed, textColor, colors, bg, titleConfig, sc);
   }
   if (parsed.type === "chord") {
-    const bg = isDark ? palette.surface : palette.bg;
+    const bg = themeBaseBg(palette, isDark);
     return buildChordOption(
       parsed,
       palette,
@@ -12670,7 +12979,7 @@ function buildExtendedChartOption(parsed, palette, isDark, ctx) {
     );
   }
   if (parsed.type === "funnel") {
-    const bg = isDark ? palette.surface : palette.bg;
+    const bg = themeBaseBg(palette, isDark);
     return buildFunnelOption(
       parsed,
       palette,
@@ -13266,7 +13575,8 @@ function buildScatterOption(parsed, palette, isDark, textColor, axisLineColor, g
   const gridLeft = parsed.ylabel ? 12 : 3;
   const gridRight = 4;
   const gridBottom = hasCategories ? 15 : parsed.xlabel ? 10 : 3;
-  const gridTop = parsed.title && !parsed.noTitle ? 15 : 5;
+  const hasTitle = !!(parsed.title && !parsed.noTitle);
+  const gridTop = hasTitle ? hasCategories ? 22 : 15 : hasCategories ? 12 : 5;
   let graphic;
   if (showLabels && points.length > 0) {
     const labelPoints = [];
@@ -13406,7 +13716,7 @@ function buildScatterOption(parsed, palette, isDark, textColor, axisLineColor, g
 }
 function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig, ctx) {
   const sc = ctx ?? ScaleContext.identity();
-  const bg = isDark ? palette.surface : palette.bg;
+  const bg = themeBaseBg(palette, isDark);
   const heatmapRows = parsed.heatmapRows ?? [];
   const columns = parsed.columns ?? [];
   const rowLabels = heatmapRows.map((r) => r.label);
@@ -13725,7 +14035,7 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth, ctx) {
     colors,
     titleConfig
   } = buildChartCommons(parsed, palette, isDark, sc);
-  const bg = isDark ? palette.surface : palette.bg;
+  const bg = themeBaseBg(palette, isDark);
   switch (parsed.type) {
     case "bar":
       return buildBarOption(
@@ -14673,12 +14983,7 @@ function parseKanban(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message) => {
     result.diagnostics.push(makeDgmoError(line11, message, "warning"));
   };
@@ -14781,7 +15086,12 @@ function parseKanban(content, palette) {
       const indent2 = measureIndent(line11);
       if (indent2 > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         if (isDefault) {
           currentTagGroup.defaultValue = label;
         } else if (currentTagGroup.entries.length === 0) {
@@ -15125,12 +15435,7 @@ function parseC4(content, palette) {
     if (!result.error && severity === "error")
       result.error = formatDgmoError(diag);
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   if (!content?.trim()) {
     return fail(0, "No content provided");
   }
@@ -15231,7 +15536,12 @@ function parseC4(content, palette) {
       const indent2 = measureIndent(line11);
       if (indent2 > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         if (isDefault) {
           currentTagGroup.defaultValue = label;
         } else if (currentTagGroup.entries.length === 0) {
@@ -16896,8 +17206,66 @@ function parseInfra(content) {
     }
   }
   validateTagGroupNames(result.tagGroups, warn2, setError);
+  checkReachability(result);
   return result;
 }
+function checkReachability(result) {
+  if (result.nodes.length === 0) return;
+  const entries = result.nodes.filter((n) => n.isEdge);
+  if (entries.length === 0) {
+    const line11 = result.titleLineNumber ?? result.nodes[0]?.lineNumber ?? 1;
+    result.diagnostics.push(
+      makeDgmoError(
+        line11,
+        `Infra diagram has no 'internet' or 'edge' entry point \u2014 an infra diagram traces request traffic from an entry inward, so without one nothing carries traffic. Add an 'internet' or 'edge' node and route from it.`,
+        "warning",
+        "W_INFRA_NO_ENTRY"
+      )
+    );
+    return;
+  }
+  const groupChildMap = /* @__PURE__ */ new Map();
+  for (const node of result.nodes) {
+    if (node.groupId) {
+      const list = groupChildMap.get(node.groupId) ?? [];
+      list.push(node.id);
+      groupChildMap.set(node.groupId, list);
+    }
+  }
+  const outbound = /* @__PURE__ */ new Map();
+  for (const edge of result.edges) {
+    const targets = groupChildMap.get(edge.targetId) ?? [edge.targetId];
+    const list = outbound.get(edge.sourceId) ?? [];
+    list.push(...targets);
+    outbound.set(edge.sourceId, list);
+  }
+  const reachable = /* @__PURE__ */ new Set();
+  const queue = [];
+  for (const entry of entries) {
+    reachable.add(entry.id);
+    queue.push(entry.id);
+  }
+  while (queue.length > 0) {
+    const current = queue.shift();
+    for (const next of outbound.get(current) ?? []) {
+      if (!reachable.has(next)) {
+        reachable.add(next);
+        queue.push(next);
+      }
+    }
+  }
+  for (const node of result.nodes) {
+    if (node.isEdge || reachable.has(node.id)) continue;
+    result.diagnostics.push(
+      makeDgmoError(
+        node.lineNumber,
+        `'${node.label}' is unreachable from an 'internet'/'edge' entry \u2014 no request traffic flows to it, so it's dead on an infra diagram. Connect it downstream of an entry, or remove it.`,
+        "warning",
+        "W_INFRA_UNREACHABLE"
+      )
+    );
+  }
+}
 function stripNodeDecorations(name) {
   let s = name.trim();
   const aliasMatch = s.match(/^(.*?)\s+as\s+[A-Za-z][A-Za-z0-9_]{0,11}\s*$/);
@@ -17187,7 +17555,12 @@ function parseGantt(content, palette) {
         const eraEntryMatch = line11.match(ERA_ENTRY_RE);
         if (eraEntryMatch) {
           const eraLabelRaw = eraEntryMatch[3].trim();
-          const eraExtracted = extractColor(eraLabelRaw, palette);
+          const eraExtracted = extractColor(
+            eraLabelRaw,
+            palette,
+            diagnostics,
+            lineNumber
+          );
           result.eras.push({
             startDate: eraEntryMatch[1],
             endDate: eraEntryMatch[2],
@@ -17209,7 +17582,12 @@ function parseGantt(content, palette) {
         const markerEntryMatch = line11.match(MARKER_ENTRY_RE);
         if (markerEntryMatch) {
           const markerLabelRaw = markerEntryMatch[2].trim();
-          const markerExtracted = extractColor(markerLabelRaw, palette);
+          const markerExtracted = extractColor(
+            markerLabelRaw,
+            palette,
+            diagnostics,
+            lineNumber
+          );
           result.markers.push({
             date: markerEntryMatch[1],
             label: markerExtracted.label,
@@ -17230,7 +17608,12 @@ function parseGantt(content, palette) {
       } else {
         if (COMMENT_RE.test(line11)) continue;
         const { text: cleanEntry, isDefault } = stripDefaultModifier(line11);
-        const extracted = extractColor(cleanEntry, palette);
+        const extracted = extractColor(
+          cleanEntry,
+          palette,
+          diagnostics,
+          lineNumber
+        );
         const color = extracted.color || seriesColors2[currentTagGroup.entries.length % seriesColors2.length] || "#888888";
         const isFirstEntry = currentTagGroup.entries.length === 0;
         currentTagGroup.entries.push({
@@ -17425,7 +17808,12 @@ function parseGantt(content, palette) {
         const startOff = parseOffsetPrefix("+" + eraOffsetMatch[1]);
         const endOff = parseOffsetPrefix("+" + eraOffsetMatch[2]);
         const eraLabelRaw = eraOffsetMatch[3].trim();
-        const eraExtracted = extractColor(eraLabelRaw, palette);
+        const eraExtracted = extractColor(
+          eraLabelRaw,
+          palette,
+          diagnostics,
+          lineNumber
+        );
         result.eras.push({
           startDate: "",
           endDate: "",
@@ -17441,7 +17829,12 @@ function parseGantt(content, palette) {
       if (markerOffsetMatch) {
         const dateOff = parseOffsetPrefix("+" + markerOffsetMatch[1]);
         const markerLabelRaw = markerOffsetMatch[2].trim();
-        const markerExtracted = extractColor(markerLabelRaw, palette);
+        const markerExtracted = extractColor(
+          markerLabelRaw,
+          palette,
+          diagnostics,
+          lineNumber
+        );
         result.markers.push({
           date: "",
           label: markerExtracted.label,
@@ -17515,7 +17908,12 @@ function parseGantt(content, palette) {
     const eraMatch = line11.match(ERA_RE);
     if (eraMatch) {
       const eraLabelRaw = eraMatch[3].trim();
-      const eraExtracted = extractColor(eraLabelRaw, palette);
+      const eraExtracted = extractColor(
+        eraLabelRaw,
+        palette,
+        diagnostics,
+        lineNumber
+      );
       result.eras.push({
         startDate: eraMatch[1],
         endDate: eraMatch[2],
@@ -17533,7 +17931,12 @@ function parseGantt(content, palette) {
     const markerMatch = line11.match(MARKER_RE);
     if (markerMatch) {
       const markerLabelRaw = markerMatch[2].trim();
-      const markerExtracted = extractColor(markerLabelRaw, palette);
+      const markerExtracted = extractColor(
+        markerLabelRaw,
+        palette,
+        diagnostics,
+        lineNumber
+      );
       result.markers.push({
         date: markerMatch[1],
         label: markerExtracted.label,
@@ -18930,6 +19333,7 @@ function parseBoxesAndLines(content, palette) {
   const nodes = [];
   const edges = [];
   const groups = [];
+  const nodePositions = /* @__PURE__ */ new Map();
   const result = {
     type: "boxes-and-lines",
     title: null,
@@ -18963,6 +19367,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();
@@ -19002,7 +19408,7 @@ function parseBoxesAndLines(content, palette) {
     const trimmed = raw.trim();
     const indent = measureIndent2(raw);
     if (!trimmed || trimmed.startsWith("//")) continue;
-    if (trimmed.includes("|") && !/-\S*\|\S*->/.test(trimmed) && !/~\S*\|\S*~>/.test(trimmed)) {
+    if (trimmed.includes("|") && !ARROW_LABEL_PIPE_DIRECTED_RE.test(trimmed) && !ARROW_LABEL_PIPE_UNDIRECTED_RE.test(trimmed)) {
       result.diagnostics.push(
         makeDgmoError(
           lineNum,
@@ -19131,7 +19537,12 @@ function parseBoxesAndLines(content, palette) {
       if (tagBlockMatch.inlineValues) {
         for (const rawVal of tagBlockMatch.inlineValues) {
           const { text: cleanVal, isDefault } = stripDefaultModifier(rawVal);
-          const { label, color } = extractColor(cleanVal);
+          const { label, color } = extractColor(
+            cleanVal,
+            palette,
+            result.diagnostics,
+            lineNum
+          );
           newTagGroup.entries.push({
             value: label,
             color: color ?? AUTO_TAG_COLOR_SENTINEL,
@@ -19148,7 +19559,12 @@ function parseBoxesAndLines(content, palette) {
     }
     if (currentTagGroup && !contentStarted && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const { label, color } = extractColor(cleanEntry);
+      const { label, color } = extractColor(
+        cleanEntry,
+        palette,
+        result.diagnostics,
+        lineNum
+      );
       currentTagGroup.entries.push({
         value: label,
         color: color ?? AUTO_TAG_COLOR_SENTINEL,
@@ -19164,6 +19580,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("<->")) {
@@ -19416,6 +19868,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);
@@ -19694,7 +20162,7 @@ function parseEdgeLine(trimmed, lineNum, metaAliasMap, diagnostics, nameAliasMap
     metadata
   };
 }
-var MAX_GROUP_DEPTH;
+var MAX_GROUP_DEPTH, ARROW_LABEL_PIPE_DIRECTED_RE, ARROW_LABEL_PIPE_UNDIRECTED_RE;
 var init_parser18 = __esm({
   "src/boxes-and-lines/parser.ts"() {
     "use strict";
@@ -19706,6 +20174,8 @@ var init_parser18 = __esm({
     init_reserved_key_registry();
     init_notes();
     MAX_GROUP_DEPTH = 2;
+    ARROW_LABEL_PIPE_DIRECTED_RE = /-\S*\|\S*->/;
+    ARROW_LABEL_PIPE_UNDIRECTED_RE = /~\S*\|\S*~>/;
   }
 });
 
@@ -19725,12 +20195,7 @@ function parseMindmap(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const pushError = (line11, message) => {
     const diag = makeDgmoError(line11, message);
     result.diagnostics.push(diag);
@@ -19843,7 +20308,12 @@ function parseMindmap(content, palette) {
       const indent2 = measureIndent(line11);
       if (indent2 > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         if (isDefault) {
           currentTagGroup.defaultValue = label;
         } else if (currentTagGroup.entries.length === 0) {
@@ -19920,6 +20390,7 @@ function parseMindmap(content, palette) {
     collectAll(result.roots);
     validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
     validateTagGroupNames(result.tagGroups, pushWarning);
+    cascadeTagMetadata(result.roots, result.tagGroups);
   }
   if (result.roots.length === 0 && !result.error) {
     const diag = makeDgmoError(1, "No nodes found in mindmap");
@@ -20526,7 +20997,12 @@ function parseWireframe(content) {
       }
       if (indent > 0 && currentTagGroup) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry);
+        const { label, color } = extractColor(
+          cleanEntry,
+          void 0,
+          diagnostics,
+          lineNumber
+        );
         currentTagGroup.entries.push({
           value: label,
           color: color ?? AUTO_TAG_COLOR_SENTINEL,
@@ -20774,12 +21250,7 @@ function parseTechRadar(content) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message) => {
     result.diagnostics.push(makeDgmoError(line11, message, "warning"));
   };
@@ -21147,12 +21618,7 @@ function parseCycle(content) {
   let state = "top";
   let currentNode = null;
   let currentEdge = null;
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message, severity = "warning") => {
     result.diagnostics.push(makeDgmoError(line11, message, severity));
   };
@@ -21429,12 +21895,7 @@ function parseJourneyMap(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message) => {
     result.diagnostics.push(makeDgmoError(line11, message, "warning"));
   };
@@ -21516,7 +21977,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");
@@ -21572,7 +22044,12 @@ function parseJourneyMap(content, palette) {
     if (currentTagGroup && !contentStarted) {
       if (indent > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         if (isDefault) {
           currentTagGroup.defaultValue = label;
         } else if (currentTagGroup.entries.length === 0) {
@@ -21944,12 +22421,7 @@ function parsePyramid(content) {
   const lines = content.split("\n");
   let headerParsed = false;
   let currentLayer = null;
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message, severity = "warning") => {
     result.diagnostics.push(makeDgmoError(line11, message, severity));
   };
@@ -22096,12 +22568,7 @@ function parseRing(content) {
   const lines = content.split("\n");
   let headerParsed = false;
   let currentLayer = null;
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message, severity = "warning") => {
     result.diagnostics.push(makeDgmoError(line11, message, severity));
   };
@@ -22565,12 +23032,7 @@ function parseRaci(content, palette) {
     diagnostics: [],
     error: null
   };
-  const fail = (line11, message) => {
-    const diag = makeDgmoError(line11, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
   const warn2 = (line11, message, code) => {
     result.diagnostics.push(makeDgmoError(line11, message, "warning", code));
   };
@@ -23173,6 +23635,81 @@ function measureInfra(content) {
   const parsed = parseInfra(content);
   return { nodes: parsed.nodes.length };
 }
+function minDimsSequence(c) {
+  return {
+    width: Math.max((c.participants ?? 2) * 80, 320),
+    height: Math.max((c.messages ?? 1) * 20 + 120, 200)
+  };
+}
+function minDimsRaci(c) {
+  return {
+    width: Math.max((c.roles ?? 2) * 50 + 180, 300),
+    height: Math.max((c.tasks ?? 1) * 28 + 80, 200)
+  };
+}
+function minDimsMindmap(c) {
+  return {
+    width: Math.max((c.nodes ?? 3) * 30, 300),
+    height: Math.max((c.depth ?? 2) * 60, 200)
+  };
+}
+function minDimsTechRadar() {
+  return { width: 360, height: 400 };
+}
+function minDimsHeatmap(c) {
+  return {
+    width: Math.max((c.columns ?? 3) * 40, 300),
+    height: Math.max((c.rows ?? 3) * 30 + 60, 200)
+  };
+}
+function minDimsArc(c) {
+  return {
+    width: 300,
+    height: Math.max((c.nodes ?? 3) * 20 + 120, 200)
+  };
+}
+function minDimsOrg(c) {
+  return {
+    width: Math.max((c.nodes ?? 3) * 60, 300),
+    height: Math.max((c.depth ?? 2) * 80, 200)
+  };
+}
+function minDimsGantt(c) {
+  return {
+    width: 400,
+    height: Math.max((c.tasks ?? 3) * 24 + 80, 200)
+  };
+}
+function minDimsKanban(c) {
+  return {
+    width: Math.max((c.columns ?? 3) * 120, 360),
+    height: 300
+  };
+}
+function minDimsEntities(c) {
+  return {
+    width: Math.max((c.nodes ?? 2) * 140, 300),
+    height: Math.max((c.nodes ?? 2) * 80, 200)
+  };
+}
+function minDimsGraph(c) {
+  return {
+    width: Math.max((c.nodes ?? 3) * 60, 300),
+    height: Math.max((c.nodes ?? 3) * 50, 200)
+  };
+}
+function minDimsPert(c) {
+  return {
+    width: Math.max((c.tasks ?? 3) * 80, 340),
+    height: Math.max((c.tasks ?? 3) * 40 + 80, 200)
+  };
+}
+function minDimsInfra(c) {
+  return {
+    width: Math.max((c.nodes ?? 3) * 80, 300),
+    height: Math.max((c.nodes ?? 3) * 60, 200)
+  };
+}
 function isExtendedChartParser(parse) {
   return EXTENDED_CHART_DOORS.has(parse);
 }
@@ -23216,33 +23753,50 @@ var init_chart_type_registry = __esm({
         id: "sequence",
         category: "diagram",
         parse: parseSequenceDgmo,
-        measure: measureSequence
+        measure: measureSequence,
+        minDims: minDimsSequence
       },
       {
         id: "flowchart",
         category: "diagram",
         parse: parseFlowchart,
-        measure: measureFlowchart
+        measure: measureFlowchart,
+        minDims: minDimsGraph
       },
       {
         id: "class",
         category: "diagram",
         parse: parseClassDiagram,
-        measure: measureClass
+        measure: measureClass,
+        minDims: minDimsEntities
+      },
+      {
+        id: "er",
+        category: "diagram",
+        parse: parseERDiagram,
+        measure: measureER,
+        minDims: minDimsEntities
       },
-      { id: "er", category: "diagram", parse: parseERDiagram, measure: measureER },
       {
         id: "state",
         category: "diagram",
         parse: parseState,
-        measure: measureStateGraph
+        measure: measureStateGraph,
+        minDims: minDimsGraph
+      },
+      {
+        id: "org",
+        category: "diagram",
+        parse: parseOrg,
+        measure: measureOrg,
+        minDims: minDimsOrg
       },
-      { id: "org", category: "diagram", parse: parseOrg, measure: measureOrg },
       {
         id: "kanban",
         category: "diagram",
         parse: parseKanban,
-        measure: measureKanban
+        measure: measureKanban,
+        minDims: minDimsKanban
       },
       { id: "c4", category: "diagram", parse: parseC4 },
       { id: "sitemap", category: "diagram", parse: parseSitemap },
@@ -23250,25 +23804,40 @@ var init_chart_type_registry = __esm({
         id: "infra",
         category: "diagram",
         parse: parseInfra,
-        measure: measureInfra
+        measure: measureInfra,
+        minDims: minDimsInfra
       },
       {
         id: "gantt",
         category: "diagram",
         parse: parseGantt,
-        measure: measureGantt
+        measure: measureGantt,
+        minDims: minDimsGantt
+      },
+      {
+        id: "pert",
+        category: "diagram",
+        parse: parsePert,
+        measure: measurePert,
+        minDims: minDimsPert
       },
-      { id: "pert", category: "diagram", parse: parsePert, measure: measurePert },
       { id: "boxes-and-lines", category: "diagram", parse: parseBoxesAndLines },
       {
         id: "mindmap",
         category: "diagram",
         parse: parseMindmap,
-        measure: measureMindmap
+        measure: measureMindmap,
+        minDims: minDimsMindmap
       },
       { id: "wireframe", category: "diagram", parse: parseWireframe },
       { id: "journey-map", category: "diagram", parse: parseJourneyMap },
-      { id: "raci", category: "diagram", parse: parseRaci, measure: measureRaci },
+      {
+        id: "raci",
+        category: "diagram",
+        parse: parseRaci,
+        measure: measureRaci,
+        minDims: minDimsRaci
+      },
       { id: "rasci", category: "diagram", parse: parseRaci, measure: measureRaci },
       { id: "daci", category: "diagram", parse: parseRaci, measure: measureRaci },
       // ── Standard ECharts charts (parseChart) ──────────────────
@@ -23290,7 +23859,8 @@ var init_chart_type_registry = __esm({
         id: "heatmap",
         category: "data-chart",
         parse: parseHeatmap,
-        measure: measureHeatmap
+        measure: measureHeatmap,
+        minDims: minDimsHeatmap
       },
       { id: "funnel", category: "data-chart", parse: parseFunnel },
       // ── D3 visualizations — own per-viz parser door (Story 109.2) ──
@@ -23300,7 +23870,8 @@ var init_chart_type_registry = __esm({
         id: "arc",
         category: "visualization",
         parse: parseArc,
-        measure: measureArc
+        measure: measureArc,
+        minDims: minDimsArc
       },
       { id: "timeline", category: "visualization", parse: parseTimeline },
       { id: "venn", category: "visualization", parse: parseVenn },
@@ -23310,7 +23881,8 @@ var init_chart_type_registry = __esm({
         id: "tech-radar",
         category: "visualization",
         parse: parseTechRadar,
-        measure: measureTechRadar
+        measure: measureTechRadar,
+        minDims: minDimsTechRadar
       },
       { id: "cycle", category: "visualization", parse: parseCycle },
       { id: "pyramid", category: "visualization", parse: parsePyramid },
@@ -24457,6 +25029,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, {
@@ -24475,7 +25104,7 @@ function nodeStroke(palette, nodeColor2) {
 }
 function containerFill(palette, isDark, nodeColor2) {
   if (nodeColor2) {
-    return mix(nodeColor2, isDark ? palette.surface : palette.bg, 10);
+    return mix(nodeColor2, themeBaseBg(palette, isDark), 10);
   }
   return mix(palette.surface, palette.bg, 40);
 }
@@ -24615,9 +25244,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;
@@ -24626,10 +25262,15 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       const iconY = iconPad;
       const focusG = cG.append("g").attr("class", "org-focus-icon").attr("data-focus-node", c.nodeId).attr("data-export-ignore", "true").attr("transform", `translate(${iconX}, ${iconY})`);
       focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+      const iconColor = contrastText(
+        fill2,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      );
       const cx = iconSize / 2;
       const cy = iconSize / 2;
-      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
-      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", iconColor).attr("stroke-width", 1.5);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", iconColor);
     }
   }
   for (const edge of layout.edges) {
@@ -24668,42 +25309,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;
@@ -24712,10 +25359,11 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       const iconY = iconPad;
       const focusG = nodeG.append("g").attr("class", "org-focus-icon").attr("data-focus-node", node.id).attr("data-export-ignore", "true").attr("transform", `translate(${iconX}, ${iconY})`);
       focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+      const iconColor = labelColor;
       const cx = iconSize / 2;
       const cy = iconSize / 2;
-      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
-      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", "none").attr("stroke", iconColor).attr("stroke-width", 1.5);
+      focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", iconColor);
     }
   }
   if (hasAncestorTrail) {
@@ -24847,7 +25495,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";
@@ -24860,27 +25508,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;
@@ -25650,7 +26285,7 @@ function nodeStroke2(_palette, nodeColor2) {
 }
 function containerFill2(palette, isDark, nodeColor2) {
   if (nodeColor2) {
-    return mix(nodeColor2, isDark ? palette.surface : palette.bg, 10);
+    return mix(nodeColor2, themeBaseBg(palette, isDark), 10);
   }
   return mix(palette.surface, palette.bg, 40);
 }
@@ -25664,21 +26299,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;
@@ -25769,7 +26404,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) {
@@ -25794,7 +26429,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}`);
     }
@@ -25833,13 +26468,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);
@@ -25874,7 +26519,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})`);
     }
   }
@@ -26004,7 +26649,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";
@@ -26017,27 +26662,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);
@@ -26205,7 +26838,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);
@@ -26585,7 +27218,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(
@@ -26725,7 +27358,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);
@@ -26775,7 +27408,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";
@@ -26789,6 +27422,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;
@@ -26799,7 +27433,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;
@@ -27102,8 +27735,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);
@@ -27362,7 +27995,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";
@@ -27377,13 +28010,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;
@@ -27879,7 +28511,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);
@@ -27939,8 +28571,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);
@@ -28218,7 +28850,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";
@@ -28235,13 +28867,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;
@@ -28461,7 +29092,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     onToggleDescriptions,
     onToggleControlsExpand,
     exportMode = false,
-    controlsHost
+    controlsHost,
+    rampDomain
   } = options ?? {};
   d3Selection11.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -28471,9 +29103,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);
@@ -28481,8 +29113,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const sTitleY = sctx.structural(TITLE_Y);
   const nodeValues = parsed.nodes.filter((n) => n.value !== void 0).map((n) => n.value);
   const hasRamp = nodeValues.length > 0;
-  const rampMin = hasRamp ? Math.min(...nodeValues) : 0;
-  const rampMax = Math.max(...nodeValues);
+  const rampMin = rampDomain?.min ?? (hasRamp ? Math.min(...nodeValues) : 0);
+  const rampMax = rampDomain?.max ?? Math.max(...nodeValues);
   const rampHue = resolveColor(parsed.boxMetricColor ?? "", palette) ?? palette.primary;
   const rampLow = parsed.boxMetricLowColor ? resolveColor(parsed.boxMetricLowColor, palette) ?? void 0 : void 0;
   const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
@@ -28565,8 +29197,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%");
@@ -28610,7 +29266,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       group.collapsed ? "bl-group bl-group-collapsed" : "bl-group"
     ).attr("data-line-number", String(group.lineNumber)).attr("data-node-id", group.label).attr("data-group-toggle", group.label).style("cursor", "pointer");
     if (group.collapsed) {
-      const fillColor = isDark ? palette.surface : palette.bg;
+      const fillColor = themeBaseBg(palette, isDark);
       const strokeColor = palette.border;
       groupG.append("rect").attr("x", gx).attr("y", gy).attr("width", group.width).attr("height", group.height).attr("rx", NODE_RX).attr("ry", NODE_RX).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", sNodeStrokeWidth);
       const clipId = `bl-clip-${group.label.replace(/[[\]\s]/g, "")}`;
@@ -28702,7 +29358,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("#", "")}`;
@@ -28966,6 +29622,15 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     });
     legendG.selectAll("[data-legend-group]").classed("bl-legend-group", true);
   }
+  if (!exportDims && !exportMode) {
+    const iconSize = 14;
+    const focusG = svg.append("g").attr("class", "bl-focus-icon").attr("data-export-ignore", "true").style("display", "none").style("pointer-events", "auto").style("cursor", "pointer");
+    focusG.append("rect").attr("x", -3).attr("y", -3).attr("width", iconSize + 6).attr("height", iconSize + 6).attr("fill", "transparent");
+    const cx = iconSize / 2;
+    const cy = iconSize / 2;
+    focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", iconSize / 2 - 1).attr("fill", palette.bg).attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
+    focusG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 2).attr("fill", palette.textMuted);
+  }
 }
 function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark, options) {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
@@ -28983,7 +29648,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";
@@ -28999,14 +29664,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;
@@ -29020,6 +29684,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);
   }
 });
 
@@ -29562,7 +30227,7 @@ function shuffle(a, r) {
   return x;
 }
 function flatten(d) {
-  const toks = d.match(/[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi) ?? [];
+  const toks = d.match(PATH_TOKEN_RE) ?? [];
   const pts = [];
   let i = 0, cx = 0, cy = 0, cmd = "";
   const num = () => parseFloat(toks[i++]);
@@ -29606,17 +30271,10 @@ function flatten(d) {
   }
   return pts;
 }
-function segPoint(p1, p2, p3, p4) {
-  const den = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x);
-  if (Math.abs(den) < 1e-9) return null;
-  const t = ((p3.x - p1.x) * (p4.y - p3.y) - (p3.y - p1.y) * (p4.x - p3.x)) / den, u = ((p3.x - p1.x) * (p2.y - p1.y) - (p3.y - p1.y) * (p2.x - p1.x)) / den;
-  return t > 0 && t < 1 && u > 0 && u < 1 ? { x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y) } : null;
-}
-function countSplineCrossings(layout) {
-  const center = /* @__PURE__ */ new Map();
-  for (const n of layout.nodes) center.set(n.label, { x: n.x, y: n.y });
-  for (const g of layout.groups)
-    if (g.collapsed) center.set("__group_" + g.label, { x: g.x, y: g.y });
+function flatPolys(layout) {
+  const key = layout.edges;
+  const hit = FLAT_CACHE.get(key);
+  if (hit) return hit;
   const polys = layout.edges.map((e) => {
     const pts = e.points.length >= 2 ? flatten(splineGen(e.points) ?? "") : [];
     let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
@@ -29626,8 +30284,24 @@ function countSplineCrossings(layout) {
       if (p.y < y0) y0 = p.y;
       if (p.y > y1) y1 = p.y;
     }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
+    return { pts, x0, y0, x1, y1 };
   });
+  FLAT_CACHE.set(key, polys);
+  return polys;
+}
+function segPoint(p1, p2, p3, p4) {
+  const den = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x);
+  if (Math.abs(den) < 1e-9) return null;
+  const t = ((p3.x - p1.x) * (p4.y - p3.y) - (p3.y - p1.y) * (p4.x - p3.x)) / den, u = ((p3.x - p1.x) * (p2.y - p1.y) - (p3.y - p1.y) * (p2.x - p1.x)) / den;
+  return t > 0 && t < 1 && u > 0 && u < 1 ? { x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y) } : null;
+}
+function countSplineCrossings(layout, floor = Infinity) {
+  const center = /* @__PURE__ */ new Map();
+  for (const n of layout.nodes) center.set(n.label, { x: n.x, y: n.y });
+  for (const g of layout.groups)
+    if (g.collapsed) center.set("__group_" + g.label, { x: g.x, y: g.y });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
   const R = 34;
   let total = 0;
   for (let a = 0; a < polys.length; a++)
@@ -29635,23 +30309,33 @@ function countSplineCrossings(layout) {
       const A = polys[a], B = polys[b];
       if (A.pts.length < 2 || B.pts.length < 2) continue;
       if (A.x1 < B.x0 || B.x1 < A.x0 || A.y1 < B.y0 || B.y1 < A.y0) continue;
-      const shared = [A.s, A.t].filter((n) => n === B.s || n === B.t).map((n) => center.get(n)).filter(Boolean);
+      const ea = edges[a], eb = edges[b];
+      let sh0, sh1;
+      if (ea.source === eb.source || ea.source === eb.target)
+        sh0 = center.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        sh1 = center.get(ea.target);
       const hits = [];
-      for (let i = 1; i < A.pts.length; i++)
-        for (let j = 1; j < B.pts.length; j++) {
-          const p = segPoint(
-            A.pts[i - 1],
-            A.pts[i],
-            B.pts[j - 1],
-            B.pts[j]
-          );
+      const ap = A.pts, bp = B.pts;
+      for (let i = 1; i < ap.length; i++) {
+        const a0 = ap[i - 1], a1 = ap[i];
+        const axMin = a0.x < a1.x ? a0.x : a1.x, axMax = a0.x > a1.x ? a0.x : a1.x, ayMin = a0.y < a1.y ? a0.y : a1.y, ayMax = a0.y > a1.y ? a0.y : a1.y;
+        for (let j = 1; j < bp.length; j++) {
+          const b0 = bp[j - 1], b1 = bp[j];
+          if (axMax < (b0.x < b1.x ? b0.x : b1.x)) continue;
+          if ((b0.x > b1.x ? b0.x : b1.x) < axMin) continue;
+          if (ayMax < (b0.y < b1.y ? b0.y : b1.y)) continue;
+          if ((b0.y > b1.y ? b0.y : b1.y) < ayMin) continue;
+          const p = segPoint(a0, a1, b0, b1);
           if (!p) continue;
-          if (shared.some((c) => Math.hypot(p.x - c.x, p.y - c.y) < R))
-            continue;
+          if (sh0 && Math.hypot(p.x - sh0.x, p.y - sh0.y) < R) continue;
+          if (sh1 && Math.hypot(p.x - sh1.x, p.y - sh1.y) < R) continue;
           if (!hits.some((h) => Math.hypot(h.x - p.x, h.y - p.y) < 6))
             hits.push(p);
         }
+      }
       total += hits.length;
+      if (total > floor) return total;
     }
   return total;
 }
@@ -29689,17 +30373,8 @@ function detectEdgeOverlaps(layout, opts) {
         w: g.width,
         h: g.height
       });
-  const polys = layout.edges.map((e) => {
-    const pts = e.points.length >= 2 ? flatten(splineGen(e.points) ?? "") : [];
-    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-    for (const p of pts) {
-      if (p.x < x0) x0 = p.x;
-      if (p.x > x1) x1 = p.x;
-      if (p.y < y0) y0 = p.y;
-      if (p.y > y1) y1 = p.y;
-    }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
-  });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
   const runs = [];
   for (let a = 0; a < polys.length; a++)
     for (let b = a + 1; b < polys.length; b++) {
@@ -29707,7 +30382,12 @@ function detectEdgeOverlaps(layout, opts) {
       if (A.pts.length < 2 || B.pts.length < 2) continue;
       if (A.x1 + dist < B.x0 || B.x1 + dist < A.x0 || A.y1 + dist < B.y0 || B.y1 + dist < A.y0)
         continue;
-      const shared = [A.s, A.t].filter((n) => n === B.s || n === B.t).map((n) => rect.get(n)).filter(Boolean);
+      const ea = edges[a], eb = edges[b];
+      let shr0, shr1;
+      if (ea.source === eb.source || ea.source === eb.target)
+        shr0 = rect.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        shr1 = rect.get(ea.target);
       let run2 = [];
       let runLen = 0;
       const flush = () => {
@@ -29721,7 +30401,7 @@ function detectEdgeOverlaps(layout, opts) {
         runLen = 0;
       };
       for (const p of A.pts) {
-        const nearShared = shared.some((r) => pointRectDist(p, r) < nodeClear);
+        const nearShared = shr0 !== void 0 && pointRectDist(p, shr0) < nodeClear || shr1 !== void 0 && pointRectDist(p, shr1) < nodeClear;
         const covered = !nearShared && distToPoly(p, B.pts) < dist;
         if (covered) {
           if (run2.length)
@@ -29756,9 +30436,10 @@ function detectEdgeNodePierces(layout, opts) {
       });
   const inside = (p, r) => Math.abs(p.x - r.x) < r.w / 2 - inset && Math.abs(p.y - r.y) < r.h / 2 - inset;
   const out = [];
+  const polys = flatPolys(layout);
   layout.edges.forEach((e, idx) => {
     if (e.points.length < 2) return;
-    const poly = flatten(splineGen(e.points) ?? "");
+    const poly = polys[idx].pts;
     for (const r of rects) {
       if (r.key === e.source || r.key === e.target || "__group_" + r.key === e.source || "__group_" + r.key === e.target)
         continue;
@@ -30105,8 +30786,10 @@ function edgeLength(layout) {
       );
   return total;
 }
-function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
+async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   const hideDescriptions = opts?.hideDescriptions ?? false;
+  const onProgress = opts?.onProgress;
+  const tick = onProgress ? () => new Promise((r) => setTimeout(r)) : () => void 0;
   const collapsedGroupLabels = /* @__PURE__ */ new Set();
   if (collapseInfo) {
     const missing = /* @__PURE__ */ new Set();
@@ -30209,6 +30892,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();
@@ -30347,6 +31180,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;
@@ -30369,17 +31203,25 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       seed: s
     });
   const badness = (lay, floor) => {
-    const x = countSplineCrossings(lay);
+    const x = countSplineCrossings(lay, floor);
     if (x > floor) return Infinity;
     return x + countEdgeOverlaps(lay) + countEdgeNodePierces(lay) + countGroupOverlaps(lay);
   };
   const objective = (lay, viol) => viol * 1e6 + edgeLength(lay) + lambda * meanDrift(lay, prev) * 10;
+  const progressTotal = configs.length + Math.min(opts?.refineK ?? 6, configs.length);
+  let progressDone = 0;
+  const step = async (phase) => {
+    if (!onProgress) return;
+    onProgress(++progressDone, progressTotal, phase);
+    await tick();
+  };
   const pool = [];
   for (const cfg of configs) {
     try {
       pool.push(place(cfg));
     } catch {
     }
+    await step("Optimizing layout");
   }
   if (!pool.length)
     return place({ ranker: "network-simplex", nodesep: 50, ranksep: 60 });
@@ -30388,9 +31230,9 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     layered = layeredCandidates(parsed, sizes);
   } catch {
   }
-  pool.sort(
-    (a, b) => objective(a, countCrossingsFast(a)) - objective(b, countCrossingsFast(b))
-  );
+  const fastKey = /* @__PURE__ */ new Map();
+  for (const lay of pool) fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
+  pool.sort((a, b) => fastKey.get(a) - fastKey.get(b));
   const refineK = Math.min(REFINE_K, pool.length);
   let best = pool[0];
   let bestObj = Infinity;
@@ -30405,7 +31247,10 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       best = lay;
     }
   };
-  for (const lay of pool.slice(0, refineK)) consider(lay);
+  for (const lay of pool.slice(0, refineK)) {
+    consider(lay);
+    await step("Refining layout");
+  }
   if (bestBad >= ESCALATE_THRESHOLD && n <= ESCALATE_MAX_N) {
     const extra = [];
     for (let s = seedCount; s < seedCount + ESCALATE_SEEDS; s++) {
@@ -30421,9 +31266,10 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       } catch {
       }
     }
-    extra.sort(
-      (a, b) => objective(a, countCrossingsFast(a)) - objective(b, countCrossingsFast(b))
-    );
+    const extraKey = /* @__PURE__ */ new Map();
+    for (const lay of extra)
+      extraKey.set(lay, objective(lay, countCrossingsFast(lay)));
+    extra.sort((a, b) => extraKey.get(a) - extraKey.get(b));
     for (const lay of extra.slice(0, ESCALATE_REFINE)) consider(lay);
   }
   for (const lay of layered) {
@@ -30450,7 +31296,7 @@ function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   }
   return best;
 }
-var DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, splineGen, GROUP_LABEL_ZONE2;
+var DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, splineGen, PATH_TOKEN_RE, FLAT_CACHE, GROUP_LABEL_ZONE2;
 var init_layout_search = __esm({
   "src/boxes-and-lines/layout-search.ts"() {
     "use strict";
@@ -30462,6 +31308,8 @@ var init_layout_search = __esm({
     ESCALATE_SEEDS = 18;
     ESCALATE_REFINE = 10;
     splineGen = d3line().x((d) => d.x).y((d) => d.y).curve(curveBasis5);
+    PATH_TOKEN_RE = /[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi;
+    FLAT_CACHE = /* @__PURE__ */ new WeakMap();
     GROUP_LABEL_ZONE2 = 32;
   }
 });
@@ -30541,17 +31389,20 @@ 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) {
   const { layoutBoxesAndLinesSearch: layoutBoxesAndLinesSearch2 } = await Promise.resolve().then(() => (init_layout_search(), layout_search_exports));
-  const searched = layoutBoxesAndLinesSearch2(parsed, collapseInfo, {
+  const searched = await layoutBoxesAndLinesSearch2(parsed, collapseInfo, {
     ...layoutOptions?.hideDescriptions !== void 0 && {
       hideDescriptions: layoutOptions.hideDescriptions
     },
     ...layoutOptions?.previousPositions !== void 0 && {
       previousPositions: layoutOptions.previousPositions
+    },
+    ...layoutOptions?.onProgress !== void 0 && {
+      onProgress: layoutOptions.onProgress
     }
   });
   return attachNotes(
@@ -30670,7 +31521,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";
@@ -30686,13 +31537,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;
   }
 });
 
@@ -31336,7 +32187,12 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const titleReserve = fixedTitle ? TITLE_HEIGHT4 : 0;
   const availWidth = containerWidth;
   const availHeight = containerHeight - DIAGRAM_PADDING7 * 2 - legendReserve - titleReserve;
-  const ctx = isExport ? ScaleContext.identity() : ScaleContext.from(availWidth, layout.width);
+  let ctx = isExport ? ScaleContext.identity() : ScaleContext.fromBox(
+    availWidth,
+    layout.width,
+    availHeight,
+    layout.height
+  );
   let renderLayout = layout;
   if (ctx.factor < 1) {
     const hiddenCounts = /* @__PURE__ */ new Map();
@@ -31345,17 +32201,37 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
         hiddenCounts.set(n.id, n.hiddenCount);
       }
     }
-    renderLayout = layoutMindmap(parsed, palette, {
+    const relayout = (c) => layoutMindmap(parsed, palette, {
       interactive: !isExport,
       ...hiddenCounts.size > 0 && { hiddenCounts },
       activeTagGroup: activeTagGroup ?? null,
       ...hideDescriptions !== void 0 && { hideDescriptions },
-      ctx
+      ctx: c
     });
+    renderLayout = relayout(ctx);
+    for (let i = 0; i < 3 && !ctx.isBelowFloor; i++) {
+      const refit = Math.min(
+        availWidth / renderLayout.width,
+        availHeight / renderLayout.height
+      );
+      if (refit >= 0.999) break;
+      ctx = ScaleContext.fromFactor(ctx.factor * refit);
+      renderLayout = relayout(ctx);
+    }
   }
-  const offsetX = Math.max(0, (availWidth - renderLayout.width) / 2);
-  const offsetY = DIAGRAM_PADDING7 + legendReserve + titleReserve + Math.max(0, (availHeight - renderLayout.height) / 2);
-  const mainG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY})`);
+  const fitScale = isExport ? 1 : Math.min(
+    1,
+    renderLayout.width > 0 ? availWidth / renderLayout.width : 1,
+    renderLayout.height > 0 ? availHeight / renderLayout.height : 1
+  );
+  const scaledWidth = renderLayout.width * fitScale;
+  const scaledHeight = renderLayout.height * fitScale;
+  const offsetX = Math.max(0, (availWidth - scaledWidth) / 2);
+  const offsetY = DIAGRAM_PADDING7 + legendReserve + titleReserve + Math.max(0, (availHeight - scaledHeight) / 2);
+  const mainG = svg.append("g").attr(
+    "transform",
+    `translate(${offsetX}, ${offsetY})${fitScale < 1 ? ` scale(${fitScale})` : ""}`
+  );
   if (ctx.isBelowFloor) {
     svg.attr("width", "100%");
   }
@@ -31454,11 +32330,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,
@@ -31541,7 +32417,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) => {
@@ -31589,7 +32465,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";
@@ -31606,6 +32482,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;
@@ -31613,9 +32490,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",
@@ -32844,10 +33718,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);
@@ -34124,7 +34998,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";
@@ -34142,8 +35016,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;
@@ -34266,7 +35140,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");
       }
@@ -34332,7 +35206,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);
@@ -34376,7 +35250,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");
     }
   }
@@ -34436,14 +35310,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");
   }
@@ -34463,7 +35337,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");
       }
@@ -34958,13 +35832,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 {
@@ -34991,7 +35865,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");
     }
   }
@@ -35120,7 +35994,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";
@@ -35134,6 +36008,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;
@@ -35143,16 +36018,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;
@@ -35557,7 +36427,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;
@@ -35569,7 +36439,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(
@@ -35588,7 +36458,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(
@@ -35610,7 +36480,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;
@@ -35636,7 +36506,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);
@@ -35654,7 +36524,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;
@@ -35685,7 +36555,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(
@@ -35772,8 +36642,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);
@@ -35997,7 +36867,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";
@@ -36012,12 +36882,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;
@@ -37002,7 +37871,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");
@@ -37049,7 +37918,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) {
@@ -37062,7 +37931,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) {
@@ -37079,7 +37948,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)
       );
     }
   }
@@ -37090,7 +37959,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)
         );
       }
     }
@@ -37101,37 +37970,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);
@@ -37141,17 +38010,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) {
@@ -37486,20 +38355,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;
@@ -37605,19 +38474,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),
@@ -37941,7 +38810,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;
@@ -38420,7 +39289,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);
@@ -38428,7 +39297,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);
@@ -38946,7 +39815,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";
@@ -38965,21 +39834,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;
@@ -39018,7 +39884,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",
@@ -40709,7 +41575,7 @@ __export(renderer_exports11, {
 import * as d3Selection17 from "d3-selection";
 import * as d3Shape9 from "d3-shape";
 function analysisBlockChrome(palette, isDark) {
-  const surfaceBg = isDark ? palette.surface : palette.bg;
+  const surfaceBg = themeBaseBg(palette, isDark);
   return {
     fill: mix(palette.surface, palette.bg, 40),
     stroke: mix(palette.textMuted, surfaceBg, 35)
@@ -40807,18 +41673,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;
@@ -41385,7 +42251,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,
@@ -41419,10 +42285,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);
   }
@@ -41475,7 +42341,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}`);
@@ -41657,7 +42523,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;
@@ -41756,7 +42622,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;
@@ -41889,7 +42755,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;
@@ -42006,7 +42872,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;
@@ -42162,7 +43028,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(/\.$/, "");
@@ -42346,7 +43212,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";
@@ -42362,20 +43228,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;
@@ -45367,8 +46228,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);
@@ -45425,7 +46286,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     const gy = group.y - sGroupExtraPadding - sGroupLabelFontSize - 4;
     const gw = group.width + sGroupExtraPadding * 2;
     const gh = group.height + sGroupExtraPadding * 2 + sGroupLabelFontSize + 4;
-    const fillColor = group.color ? mix(group.color, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
+    const fillColor = group.color ? mix(group.color, themeBaseBg(palette, isDark), 10) : isDark ? palette.surface : mix(palette.border, palette.bg, 30);
     const strokeColor = group.color ?? palette.textMuted;
     const groupWrapper = contentG.append("g").attr("class", "st-group-wrapper").attr("data-line-number", String(group.lineNumber)).attr("data-group-id", group.id).attr("data-group-toggle", group.id).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", `Collapse group ${group.label}`).style("cursor", "pointer");
     groupWrapper.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "st-group");
@@ -45645,7 +46506,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";
@@ -45660,13 +46521,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;
@@ -47381,14 +48241,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);
     }
@@ -47396,7 +48256,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);
@@ -47636,7 +48496,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) {
@@ -47799,7 +48659,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++) {
@@ -47956,7 +48816,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++) {
@@ -48015,7 +48875,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,
@@ -48131,7 +48991,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";
@@ -48144,9 +49004,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;
@@ -48223,7 +49083,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);
@@ -48440,7 +49300,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) {
@@ -48452,7 +49312,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
   };
 }
@@ -48465,7 +49325,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)
@@ -48800,7 +49660,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";
@@ -48808,7 +49668,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;
@@ -48818,7 +49678,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;
@@ -49398,6 +50258,16 @@ __export(resolver_exports, {
   isSubNationalUsExtent: () => isSubNationalUsExtent,
   resolveMap: () => resolveMap
 });
+function containerOvershoot(span, usOriented) {
+  if (usOriented) return CONTAINER_OVERSHOOT_MAX;
+  return Math.max(
+    CONTAINER_OVERSHOOT_MIN,
+    Math.min(
+      CONTAINER_OVERSHOOT_MAX,
+      CONTAINER_OVERSHOOT_MAX - CONTAINER_OVERSHOOT_DECAY * span
+    )
+  );
+}
 function bboxArea(b) {
   return (b[1][0] - b[0][0]) * (b[1][1] - b[0][1]);
 }
@@ -49894,7 +50764,7 @@ function resolveMap(parsed, data) {
     const containerUnion = unionExtent(containerBoxes, points);
     if (containerUnion)
       extent3 = pad(
-        clampContainerToCluster(containerUnion, points),
+        clampContainerToCluster(containerUnion, points, usOriented),
         PAD_FRACTION
       );
   }
@@ -49978,17 +50848,21 @@ function mostCommonCountry(regions, poiCountries) {
   }
   return best;
 }
-function clampContainerToCluster(container, points) {
+function clampContainerToCluster(container, points, usOriented) {
   const poi = unionExtent([], points);
   if (!poi) return container;
   let [[west, south], [east, north]] = container;
   const [[pWest, pSouth], [pEast, pNorth]] = poi;
-  south = Math.max(south, pSouth - CONTAINER_OVERSHOOT_DEG);
-  north = Math.min(north, pNorth + CONTAINER_OVERSHOOT_DEG);
-  if (east <= 180 && pEast <= 180) {
-    west = Math.max(west, pWest - CONTAINER_OVERSHOOT_DEG);
-    east = Math.min(east, pEast + CONTAINER_OVERSHOOT_DEG);
-  }
+  const over = containerOvershoot(
+    Math.max(pEast - pWest, pNorth - pSouth),
+    usOriented
+  );
+  south = Math.max(south, pSouth - over);
+  north = Math.min(north, pNorth + over);
+  const wOver = pWest - over;
+  const eOver = pEast + over;
+  west = west >= -180 && west <= pWest ? Math.max(west, wOver) : wOver;
+  east = east <= 180 && east >= pEast ? Math.min(east, eOver) : eOver;
   return [
     [west, south],
     [east, north]
@@ -50006,7 +50880,7 @@ function firstError(diags) {
   const e = diags.find((d) => d.severity === "error");
   return e ? formatDgmoError(e) : null;
 }
-var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, CONTAINER_OVERSHOOT_DEG, US_NATIONAL_LON_SPAN, CONUS_BBOX, US_SUBNATIONAL_AREA_FRACTION, REGION_ALIASES, US_STATE_POSTAL;
+var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, CONTAINER_OVERSHOOT_MAX, CONTAINER_OVERSHOOT_MIN, CONTAINER_OVERSHOOT_DECAY, US_NATIONAL_LON_SPAN, CONUS_BBOX, US_SUBNATIONAL_AREA_FRACTION, REGION_ALIASES, US_STATE_POSTAL;
 var init_resolver2 = __esm({
   "src/map/resolver.ts"() {
     "use strict";
@@ -50019,7 +50893,9 @@ var init_resolver2 = __esm({
     WORLD_LAT_SOUTH = -58;
     WORLD_LAT_NORTH = 78;
     POI_ZOOM_FLOOR_DEG = 7;
-    CONTAINER_OVERSHOOT_DEG = 8;
+    CONTAINER_OVERSHOOT_MAX = 8;
+    CONTAINER_OVERSHOOT_MIN = 3;
+    CONTAINER_OVERSHOOT_DECAY = 0.3;
     US_NATIONAL_LON_SPAN = 48;
     CONUS_BBOX = [
       [-125, 25],
@@ -50185,12 +51061,12 @@ function tierBand(maxSpanDeg) {
 }
 function labelBudget(width, height, band) {
   const bandCap = {
-    world: 7,
-    continental: 6,
-    regional: 5,
-    local: 4
+    world: 10,
+    continental: 9,
+    regional: 7,
+    local: 6
   };
-  const area2 = Math.floor(Math.sqrt(Math.max(0, width * height)) / 150);
+  const area2 = Math.floor(Math.sqrt(Math.max(0, width * height)) / 105);
   return Math.max(0, Math.min(area2, bandCap[band]));
 }
 function waterEligible(tier, kind, band) {
@@ -50244,6 +51120,11 @@ function rectAround(cx, cy, lines, letterSpacing, font = FONT) {
   const h = (lines.length - 1) * lineHeight + font + 2 * PADY;
   return { x: cx - w / 2, y: cy - h / 2, w, h };
 }
+function rectDist2(px, py, x0, y0, x1, y1) {
+  const dx = Math.max(x0 - px, 0, px - x1);
+  const dy = Math.max(y0 - py, 0, py - y1);
+  return dx * dx + dy * dy;
+}
 function rectFits(r, width, height) {
   return r.x >= 0 && r.y >= 0 && r.x + r.w <= width && r.y + r.h <= height;
 }
@@ -50262,6 +51143,7 @@ function placeContextLabels(args) {
     palette,
     project,
     collides,
+    contentPoints,
     overLand
   } = args;
   void projection;
@@ -50332,8 +51214,17 @@ function placeContextLabels(args) {
     const [x0, y0, x1, y1] = c.bbox;
     const w = x1 - x0;
     const h = y1 - y0;
-    return { c, w, h, area: w * h };
-  }).filter((r) => Number.isFinite(r.area) && r.area > 0).sort((a, b) => b.area - a.area);
+    let dist = Infinity;
+    if (contentPoints?.length) {
+      for (const p of contentPoints) {
+        const d = rectDist2(p[0], p[1], x0, y0, x1, y1);
+        if (d < dist) dist = d;
+      }
+    }
+    return { c, w, h, area: w * h, dist };
+  }).filter((r) => Number.isFinite(r.area) && r.area > 0).sort(
+    (a, b) => contentPoints?.length ? a.dist - b.dist || b.area - a.area : b.area - a.area
+  );
   const canvasLinear = Math.sqrt(Math.max(1, width * height));
   let ci = 0;
   for (const r of ranked) {
@@ -50350,7 +51241,7 @@ function placeContextLabels(args) {
     );
     const fontSize = Math.round(FONT + t * (COUNTRY_FONT_MAX - FONT));
     const fade = Math.round(t * COUNTRY_FADE_MAX);
-    const color = fade > 0 ? mix(countryColor, palette.bg, fade) : countryColor;
+    const color = fade > 0 ? mix(countryColor, palette.bg, 100 - fade) : countryColor;
     const text = c.name;
     const tw = labelWidth(text, 0, fontSize);
     if (tw > w || fontSize + 2 * PADY > h) continue;
@@ -50363,6 +51254,9 @@ function placeContextLabels(args) {
       letterSpacing: 0,
       color,
       fontSize,
+      // Multi-position dodging: carry the ordered interior positions through to the
+      // commit loop. Invariant anchor === positions[0], so `cx/cy` is positions[0].
+      ...c.positions ? { positions: c.positions } : {},
       // Band 1 (orientation-value ranking): above MINOR water (band 2, 2000+) but
       // below MAJOR water — oceans + major seas (band 0, ≤~16). So a big country
       // (US, Canada, Russia) outranks a minor sea/bay (Sargasso, Bahía de
@@ -50377,39 +51271,53 @@ function placeContextLabels(args) {
   const countryCount = candidates.reduce((n, c) => n + (c.italic ? 0 : 1), 0);
   const waterCap = budget - Math.min(2, countryCount);
   let waterPlaced = 0;
-  for (const cand of candidates) {
-    if (placed.length >= budget) break;
-    if (cand.italic && waterPlaced >= waterCap) continue;
+  const gateAt = (cx, cy, cand) => {
     const rect = rectAround(
-      cand.cx,
-      cand.cy,
+      cx,
+      cy,
       cand.lines,
       cand.letterSpacing,
       cand.fontSize
     );
-    if (!rectFits(rect, width, height)) continue;
+    if (!rectFits(rect, width, height)) return null;
     if (cand.italic && overLand) {
       const inset = 2;
-      const top = cand.cy - (cand.lines.length - 1) / 2 * LINE_HEIGHT;
+      const top = cy - (cand.lines.length - 1) / 2 * LINE_HEIGHT;
       const touchesLand = cand.lines.some((line11, li) => {
         const lw = labelWidth(line11, cand.letterSpacing);
-        const x0 = cand.cx - lw / 2 + inset;
-        const x1 = cand.cx + lw / 2 - inset;
-        const xs = [x0, (x0 + cand.cx) / 2, cand.cx, (cand.cx + x1) / 2, x1];
+        const x0 = cx - lw / 2 + inset;
+        const x1 = cx + lw / 2 - inset;
+        const xs = [x0, (x0 + cx) / 2, cx, (cx + x1) / 2, x1];
         const base = top + li * LINE_HEIGHT;
         return [base, base - FONT * 0.4, base - FONT * 0.8].some(
           (y) => xs.some((x) => overLand(x, y))
         );
       });
-      if (touchesLand) continue;
+      if (touchesLand) return null;
+    }
+    if (collides(rect)) return null;
+    if (placedRects.some((r) => overlapsPadded(rect, r, CONTEXT_PAD)))
+      return null;
+    return rect;
+  };
+  for (const cand of candidates) {
+    if (placed.length >= budget) break;
+    if (cand.italic && waterPlaced >= waterCap) continue;
+    const positions = cand.positions ?? [[cand.cx, cand.cy]];
+    let chosen = null;
+    for (const [px, py] of positions) {
+      const rect = gateAt(px, py, cand);
+      if (rect) {
+        chosen = { x: px, y: py, rect };
+        break;
+      }
     }
-    if (collides(rect)) continue;
-    if (placedRects.some((r) => overlapsPadded(rect, r, CONTEXT_PAD))) continue;
-    placedRects.push(rect);
+    if (!chosen) continue;
+    placedRects.push(chosen.rect);
     if (cand.italic) waterPlaced++;
     placed.push({
-      x: cand.cx,
-      y: cand.cy,
+      x: chosen.x,
+      y: chosen.y,
       text: cand.text,
       anchor: "middle",
       color: cand.color,
@@ -50427,7 +51335,7 @@ function placeContextLabels(args) {
   }
   return placed;
 }
-var FONT, LINE_HEIGHT, PADX, PADY, WATER_LETTER_SPACING, CONTEXT_PAD, EDGE_CLAMP_MARGIN, EDGE_CLAMP_OVERSHOOT, COUNTRY_FONT_MAX, COUNTRY_SIZE_FRAC_MIN, COUNTRY_SIZE_FRAC_MAX, COUNTRY_FADE_MAX, KIND_ORDER;
+var FONT, LINE_HEIGHT, PADX, PADY, WATER_LETTER_SPACING, CONTEXT_PAD, EDGE_CLAMP_MARGIN, EDGE_CLAMP_OVERSHOOT, COUNTRY_FONT_MAX, COUNTRY_SIZE_FRAC_MIN, COUNTRY_SIZE_FRAC_MAX, COUNTRY_FADE_MAX, MAX_COUNTRY_POSITIONS, COUNTRY_POS_GRID, COUNTRY_POS_TOPN_MARGIN, KIND_ORDER;
 var init_context_labels = __esm({
   "src/map/context-labels.ts"() {
     "use strict";
@@ -50445,6 +51353,9 @@ var init_context_labels = __esm({
     COUNTRY_SIZE_FRAC_MIN = 0.06;
     COUNTRY_SIZE_FRAC_MAX = 0.32;
     COUNTRY_FADE_MAX = 45;
+    MAX_COUNTRY_POSITIONS = 4;
+    COUNTRY_POS_GRID = 5;
+    COUNTRY_POS_TOPN_MARGIN = 3;
     KIND_ORDER = {
       ocean: 0,
       sea: 1,
@@ -50538,6 +51449,84 @@ function decodeLayer(topo) {
   decodeCache.set(topo, out);
   return out;
 }
+function countryLabelPositions(args) {
+  const { geometry, bounds, project, width, height, curated } = args;
+  const w0 = bounds[0][0];
+  const s0 = bounds[0][1];
+  const e0 = bounds[1][0];
+  const n0 = bounds[1][1];
+  if (![w0, s0, e0, n0].every(Number.isFinite) || e0 <= w0 || n0 <= s0) {
+    return mkCurated(curated, project);
+  }
+  const N = COUNTRY_POS_GRID;
+  const onLand = [];
+  const kept = [];
+  for (let i = 0; i < N; i++) {
+    onLand[i] = [];
+    const lon = w0 + (i + 0.5) / N * (e0 - w0);
+    for (let j = 0; j < N; j++) {
+      const lat = s0 + (j + 0.5) / N * (n0 - s0);
+      const land = pointInGeometry(geometry, lon, lat);
+      onLand[i][j] = land;
+      if (!land) continue;
+      const p = project(lon, lat);
+      if (!p || !Number.isFinite(p[0]) || !Number.isFinite(p[1])) continue;
+      if (p[0] < 0 || p[0] > width || p[1] < 0 || p[1] > height) continue;
+      kept.push({ i, j, lon, lat, sx: p[0], sy: p[1] });
+    }
+  }
+  if (!kept.length) return mkCurated(curated, project);
+  const cx = kept.reduce((s, c) => s + c.sx, 0) / kept.length;
+  const cy = kept.reduce((s, c) => s + c.sy, 0) / kept.length;
+  const interiorness = (c) => {
+    let n = 0;
+    for (let di = -1; di <= 1; di++)
+      for (let dj = -1; dj <= 1; dj++) {
+        if (di === 0 && dj === 0) continue;
+        const ni = c.i + di;
+        const nj = c.j + dj;
+        if (ni >= 0 && ni < N && nj >= 0 && nj < N && onLand[ni][nj]) n++;
+      }
+    return n;
+  };
+  const dist2ToCentre = (c) => (c.sx - cx) ** 2 + (c.sy - cy) ** 2;
+  const pool = [...kept];
+  pool.sort((a, b) => {
+    const d = interiorness(b) - interiorness(a);
+    return d !== 0 ? d : dist2ToCentre(a) - dist2ToCentre(b);
+  });
+  const ordered = [pool.shift()];
+  while (ordered.length < MAX_COUNTRY_POSITIONS && pool.length) {
+    let bestIdx = 0;
+    let bestMin = -1;
+    for (let k = 0; k < pool.length; k++) {
+      const c = pool[k];
+      let minD = Infinity;
+      for (const o of ordered) {
+        const d = (c.sx - o.sx) ** 2 + (c.sy - o.sy) ** 2;
+        if (d < minD) minD = d;
+      }
+      if (minD > bestMin) {
+        bestMin = minD;
+        bestIdx = k;
+      }
+    }
+    ordered.push(pool.splice(bestIdx, 1)[0]);
+  }
+  const grid = ordered.map((c) => ({
+    lonLat: [c.lon, c.lat],
+    screen: [c.sx, c.sy]
+  }));
+  const curatedPos = curated ? mkCurated(curated, project) : [];
+  const out = [...curatedPos, ...grid].slice(0, MAX_COUNTRY_POSITIONS);
+  return out;
+}
+function mkCurated(curated, project) {
+  if (!curated) return [];
+  const p = project(curated[0], curated[1]);
+  if (!p || !Number.isFinite(p[0]) || !Number.isFinite(p[1])) return [];
+  return [{ lonLat: [curated[0], curated[1]], screen: [p[0], p[1]] }];
+}
 function projectionFor(family, extent3) {
   switch (family) {
     case "albers-usa":
@@ -51365,6 +52354,8 @@ function layoutMap(resolvedIn, data, size, opts) {
         if (p[1] < minY) minY = p[1];
         if (p[1] > maxY) maxY = p[1];
       }
+    r.bbox = [minX, minY, maxX, maxY];
+    r.rings = rings;
     return { fill: r.fill, rings, minX, minY, maxX, maxY };
   });
   const fillAt = (x, y) => {
@@ -52555,6 +53546,7 @@ function layoutMap(resolvedIn, data, size, opts) {
     for (const box of insets)
       obstacles.push({ x: box.x, y: box.y, w: box.w, h: box.h });
     const countryCandidates = [];
+    const rawCountries = [];
     for (const f of worldLayer.values()) {
       const iso = typeof f.id === "string" ? f.id : String(f.id ?? "");
       if (!iso || regionById.has(iso)) continue;
@@ -52571,11 +53563,59 @@ function layoutMap(resolvedIn, data, size, opts) {
       if (!Number.isFinite(x0) || !Number.isFinite(x1)) continue;
       const anchorLngLat = WORLD_LABEL_ANCHORS[iso];
       const a = anchorLngLat ? project(anchorLngLat[0], anchorLngLat[1]) : path.centroid(f);
-      countryCandidates.push({
+      rawCountries.push({
+        f,
+        iso,
         name: f.properties?.name ?? iso,
         bbox: [x0, y0, x1, y1],
         anchor: a && Number.isFinite(a[0]) ? [a[0], a[1]] : null,
-        curatedAnchor: !!anchorLngLat
+        curatedLngLat: anchorLngLat ?? null,
+        area: (x1 - x0) * (y1 - y0)
+      });
+    }
+    const cBand = tierBand(Math.max(dLonSpan, dLatSpan));
+    const cBudget = labelBudget(width, height, cBand);
+    const contentPoints = markers.map((m) => [m.cx, m.cy]);
+    const topN = cBudget + COUNTRY_POS_TOPN_MARGIN;
+    const rankOrder = rawCountries.map((r, idx) => {
+      let dist = Infinity;
+      const [x0, y0, x1, y1] = r.bbox;
+      for (const [px, py] of contentPoints) {
+        const dx = Math.max(x0 - px, 0, px - x1);
+        const dy = Math.max(y0 - py, 0, py - y1);
+        const d = dx * dx + dy * dy;
+        if (d < dist) dist = d;
+      }
+      return { idx, area: r.area, dist };
+    }).filter((r) => Number.isFinite(r.area) && r.area > 0).sort(
+      (a, b) => contentPoints.length ? a.dist - b.dist || b.area - a.area : b.area - a.area
+    ).slice(0, topN);
+    const genIdx = new Set(rankOrder.map((r) => r.idx));
+    for (let i = 0; i < rawCountries.length; i++) {
+      const r = rawCountries[i];
+      let anchor = r.anchor;
+      let positions;
+      if (genIdx.has(i) && anchor) {
+        const gb = geoBounds2(r.f);
+        const gen = countryLabelPositions({
+          geometry: r.f.geometry,
+          bounds: gb,
+          project,
+          width,
+          height,
+          curated: r.curatedLngLat
+        });
+        if (gen.length) {
+          positions = gen.map((p) => p.screen);
+          anchor = positions[0];
+        }
+      }
+      countryCandidates.push({
+        name: r.name,
+        bbox: r.bbox,
+        anchor,
+        curatedAnchor: !!r.curatedLngLat,
+        ...positions ? { positions } : {}
       });
     }
     const framedStateContainers = (resolved.poiFrameContainers ?? []).some(
@@ -52609,6 +53649,7 @@ function layoutMap(resolvedIn, data, size, opts) {
       palette,
       project,
       collides,
+      contentPoints,
       // Water labels must stay over open water — `fillAt` returns the ocean
       // backdrop colour off-land and a region fill on-land (lakes/states count
       // as land here, which is the safe side for an ocean name).
@@ -52861,7 +53902,7 @@ function ringToCoastPaths(ring, frame) {
 function coastlineOuterRings(regions, minExtent, frame) {
   const paths = [];
   for (const r of regions) {
-    const rings = parsePathRings(r.d);
+    const rings = r.rings ?? parsePathRings(r.d);
     for (let i = 0; i < rings.length; i++) {
       const ring = rings[i];
       if (ring.length < 3) continue;
@@ -52925,6 +53966,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");
@@ -52957,8 +54000,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);
@@ -52971,7 +54014,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(" ");
@@ -52989,7 +54032,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.
@@ -53026,7 +54069,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) => {
@@ -53054,14 +54097,22 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       if (decoCluster !== void 0)
         gPatch.attr("data-cluster-deco", decoCluster);
       for (const r of layout.regions) {
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const ring of parsePathRings(r.d))
-          for (const [px, py] of ring) {
-            if (px < minX) minX = px;
-            if (px > maxX) maxX = px;
-            if (py < minY) minY = py;
-            if (py > maxY) maxY = py;
-          }
+        let minX, minY, maxX, maxY;
+        if (r.bbox) {
+          [minX, minY, maxX, maxY] = r.bbox;
+        } else {
+          minX = Infinity;
+          minY = Infinity;
+          maxX = -Infinity;
+          maxY = -Infinity;
+          for (const ring of parsePathRings(r.d))
+            for (const [px, py] of ring) {
+              if (px < minX) minX = px;
+              if (px > maxX) maxX = px;
+              if (py < minY) minY = py;
+              if (py > maxY) maxY = py;
+            }
+        }
         const hit = blobRects.some(
           (b) => minX <= b.x1 && maxX >= b.x0 && minY <= b.y1 && maxY >= b.y0
         );
@@ -53071,7 +54122,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) {
@@ -53082,9 +54133,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) {
@@ -53093,7 +54144,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})`);
       }
@@ -53101,7 +54152,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) {
@@ -53110,7 +54161,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")
@@ -53118,7 +54169,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";
@@ -53128,7 +54179,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
@@ -53157,7 +54208,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})`);
@@ -53353,7 +54404,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";
@@ -53365,6 +54416,7 @@ var init_renderer16 = __esm({
     init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
+    mapInstanceCounter = 0;
   }
 });
 
@@ -54287,7 +55339,7 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
   const tasksAll = [...allTasks(parsed)];
   if (tasksAll.length === 0 && parsed.phases.length === 0) return;
   const solid = parsed.options["solid-fill"] === "on";
-  const surfaceBg = isDark ? palette.surface : palette.bg;
+  const surfaceBg = themeBaseBg(palette, isDark);
   const roleCount = Math.max(1, parsed.roles.length);
   const idealWidth = roleCount * ROLE_COL_MAX + TASK_LABEL_MAX + 2 * H_MARGIN;
   const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(width, idealWidth);
@@ -54296,7 +55348,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);
@@ -54321,7 +55373,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(
@@ -54465,10 +55517,10 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
     const cx = roleX(i) + sColumnInset;
     const cw = roleColW - 2 * sColumnInset;
     const roleColor = parsed.roleColors[i] ?? autoAccent(i, palette);
-    const bodyFill = mix(roleColor, isDark ? palette.surface : palette.bg, 16);
+    const bodyFill = mix(roleColor, themeBaseBg(palette, isDark), 16);
     const headerFill = mix(
       roleColor,
-      isDark ? palette.surface : palette.bg,
+      themeBaseBg(palette, isDark),
       30
     );
     const colG = columnsG.append("g").attr("class", "raci-column").attr("data-role-id", roleId);
@@ -54867,7 +55919,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";
@@ -54878,6 +55930,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: {
@@ -54899,7 +55952,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;
@@ -54919,7 +55972,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",
@@ -55520,11 +56572,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);
@@ -55558,7 +56610,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));
@@ -56195,7 +57247,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const groupTagColor = getTagColor(groupTagValue || void 0);
     const fillColor = groupTagColor ? mix(
       groupTagColor,
-      isDark ? palette.surface : palette.bg,
+      themeBaseBg(palette, isDark),
       isDark ? 15 : 20
     ) : isDark ? palette.surface : palette.bg;
     const strokeColor = groupTagColor || palette.textMuted;
@@ -56249,7 +57301,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       participantG.append("title").text("Click to expand");
       const pFill = effectiveTagColor ? mix(
         effectiveTagColor,
-        isDark ? palette.surface : palette.bg,
+        themeBaseBg(palette, isDark),
         isDark ? 30 : 40
       ) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
       const pStroke = effectiveTagColor || palette.border;
@@ -56456,7 +57508,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const actTagValue = triggerMsg ? tagMap?.messages.get(triggerMsg.lineNumber) : void 0;
     const actTagColor = getTagColor(actTagValue);
     const actBaseColor = actTagColor || palette.primary;
-    svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
+    svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", themeBaseBg(palette, isDark));
     const actFill = shapeFill(palette, actBaseColor, isDark, { solid });
     const actRect = svg.append("rect").attr("x", x).attr("y", y1).attr("width", sActivationWidth).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", actBaseColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
     if (tagKey && actTagValue) {
@@ -56695,7 +57747,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);
@@ -56743,7 +57795,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";
@@ -56763,7 +57815,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;
@@ -58157,7 +59209,7 @@ function setupTimeline(container, parsed, palette, isDark, exportDims, activeTag
   const textColor = palette.text;
   const mutedColor = palette.border;
   const bgColor = palette.bg;
-  const bg = isDark ? palette.surface : palette.bg;
+  const bg = themeBaseBg(palette, isDark);
   const colors = getSeriesColors(palette);
   const groupColorMap = /* @__PURE__ */ new Map();
   timelineGroups.forEach((grp, i) => {
@@ -58572,9 +59624,10 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
     drawLegend2();
   }
 }
-function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, _exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
+function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
   const {
     width,
+    height,
     tooltip,
     solid,
     textColor,
@@ -58626,9 +59679,11 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
   const rowH = ctx.structural(28);
   const innerHeight = rowH * sorted.length;
   const usedHeight = margin.top + innerHeight + margin.bottom;
+  const fitToContainer = !exportDims && height > 0 && usedHeight > height;
+  const svgHeight = fitToContainer ? height : usedHeight;
   const xScale = d3Scale3.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", usedHeight).attr("viewBox", `0 0 ${width} ${usedHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
-  if (ctx.isBelowFloor) {
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", svgHeight).attr("viewBox", `0 0 ${width} ${usedHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+  if (ctx.isBelowFloor && !fitToContainer) {
     svg.attr("width", "100%");
   }
   const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
@@ -60302,7 +61357,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     onClickItem
   );
   const chartG = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
-  const bg = isDark ? palette.surface : palette.bg;
+  const bg = themeBaseBg(palette, isDark);
   const getQuadrantColor = (label, defaultIdx) => {
     return label?.color ?? defaultColors[defaultIdx % defaultColors.length];
   };
@@ -60639,18 +61694,22 @@ async function renderForExport(content, theme, palette, viewState, options) {
     palette,
     viewState,
     options,
-    exportMode
+    exportMode,
+    isDark: theme === "dark"
   };
   const handler = detectedType !== null ? DIAGRAM_EXPORT_HANDLERS[detectedType] : void 0;
   return (handler ?? exportVisualization)(ctx);
 }
+function ctxTagOverride(ctx) {
+  return ctx.viewState?.tag ?? ctx.options?.tagGroup;
+}
 async function exportOrg(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseOrg: parseOrg2 } = await Promise.resolve().then(() => (init_parser10(), parser_exports4));
   const { layoutOrg: layoutOrg2 } = await Promise.resolve().then(() => (init_layout(), layout_exports));
   const { collapseOrgTree: collapseOrgTree2 } = await Promise.resolve().then(() => (init_collapse(), collapse_exports));
   const { renderOrg: renderOrg2 } = await Promise.resolve().then(() => (init_renderer(), renderer_exports));
-  const isDark = theme === "dark";
+  const isDark = ctx.isDark;
   const effectivePalette = await resolveExportPalette(theme, palette);
   const orgParsed = parseOrg2(content, effectivePalette);
   if (orgParsed.error) return "";
@@ -60658,7 +61717,7 @@ async function exportOrg(ctx) {
   const activeTagGroup = resolveActiveTagGroup(
     orgParsed.tagGroups,
     orgParsed.options["active-tag"],
-    viewState?.tag ?? options?.tagGroup
+    ctxTagOverride(ctx)
   );
   const hiddenAttributes = viewState?.ha ? new Set(viewState.ha) : void 0;
   const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseOrgTree2(orgParsed, collapsedNodes) : { parsed: orgParsed, hiddenCounts: /* @__PURE__ */ new Map() };
@@ -60691,12 +61750,12 @@ async function exportOrg(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportSitemap(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseSitemap: parseSitemap2 } = await Promise.resolve().then(() => (init_parser11(), parser_exports5));
   const { layoutSitemap: layoutSitemap2 } = await Promise.resolve().then(() => (init_layout2(), layout_exports2));
   const { collapseSitemapTree: collapseSitemapTree2 } = await Promise.resolve().then(() => (init_collapse2(), collapse_exports2));
   const { renderSitemap: renderSitemap2 } = await Promise.resolve().then(() => (init_renderer2(), renderer_exports2));
-  const isDark = theme === "dark";
+  const isDark = ctx.isDark;
   const effectivePalette = await resolveExportPalette(theme, palette);
   const sitemapParsed = parseSitemap2(content, effectivePalette);
   if (sitemapParsed.error || sitemapParsed.roots.length === 0) return "";
@@ -60704,7 +61763,7 @@ async function exportSitemap(ctx) {
   const activeTagGroup = resolveActiveTagGroup(
     sitemapParsed.tagGroups,
     sitemapParsed.options["active-tag"],
-    viewState?.tag ?? options?.tagGroup
+    ctxTagOverride(ctx)
   );
   const hiddenAttributes = viewState?.ha ? new Set(viewState.ha) : void 0;
   const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseSitemapTree2(sitemapParsed, collapsedNodes) : { parsed: sitemapParsed, hiddenCounts: /* @__PURE__ */ new Map() };
@@ -60735,7 +61794,7 @@ async function exportSitemap(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportKanban(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseKanban: parseKanban2 } = await Promise.resolve().then(() => (init_parser13(), parser_exports7));
   const { renderKanban: renderKanban2 } = await Promise.resolve().then(() => (init_renderer3(), renderer_exports3));
   const effectivePalette = await resolveExportPalette(theme, palette);
@@ -60747,11 +61806,11 @@ async function exportKanban(ctx) {
   document.body.appendChild(container);
   const kanbanCollapsedLanes = viewState?.cl ? new Set(viewState.cl) : void 0;
   const kanbanCollapsedColumns = viewState?.cc ? new Set(viewState.cc) : void 0;
-  renderKanban2(container, kanbanParsed, effectivePalette, theme === "dark", {
+  renderKanban2(container, kanbanParsed, effectivePalette, ctx.isDark, {
     activeTagGroup: resolveActiveTagGroup(
       kanbanParsed.tagGroups,
       kanbanParsed.options["active-tag"],
-      viewState?.tag ?? options?.tagGroup
+      ctxTagOverride(ctx)
     ),
     currentSwimlaneGroup: viewState?.swim ?? null,
     ...kanbanCollapsedLanes !== void 0 && {
@@ -60784,7 +61843,7 @@ async function exportClass(ctx) {
     classParsed,
     classLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: exportWidth, height: exportHeight },
     void 0,
@@ -60793,7 +61852,7 @@ async function exportClass(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportEr(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseERDiagram: parseERDiagram2 } = await Promise.resolve().then(() => (init_parser9(), parser_exports3));
   const { layoutERDiagram: layoutERDiagram2 } = await Promise.resolve().then(() => (init_layout4(), layout_exports4));
   const { renderERDiagram: renderERDiagram2 } = await Promise.resolve().then(() => (init_renderer5(), renderer_exports5));
@@ -60811,13 +61870,13 @@ async function exportEr(ctx) {
     erParsed,
     erLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: exportWidth, height: exportHeight },
     resolveActiveTagGroup(
       erParsed.tagGroups,
       erParsed.options["active-tag"],
-      viewState?.tag ?? options?.tagGroup
+      ctxTagOverride(ctx)
     ),
     viewState?.sem,
     exportMode
@@ -60825,7 +61884,7 @@ async function exportEr(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportBoxesAndLines(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseBoxesAndLines: parseBoxesAndLines2 } = await Promise.resolve().then(() => (init_parser18(), parser_exports12));
   const effectivePalette = await resolveExportPalette(theme, palette);
   const blParsed = parseBoxesAndLines2(content, effectivePalette);
@@ -60845,13 +61904,13 @@ async function exportBoxesAndLines(ctx) {
   const exportWidth = blLayout.width + PADDING3 * 2;
   const exportHeight = blLayout.height + PADDING3 * 2 + titleOffset;
   const container = createExportContainer(exportWidth, exportHeight);
-  const blActiveTagGroup = viewState?.tag ?? options?.tagGroup;
+  const blActiveTagGroup = ctxTagOverride(ctx);
   renderBoxesAndLinesForExport2(
     container,
     blParsed,
     blLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     {
       exportDims: { width: exportWidth, height: exportHeight },
       ...blActiveTagGroup !== void 0 && {
@@ -60866,12 +61925,12 @@ async function exportBoxesAndLines(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportMindmap(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseMindmap: parseMindmap2 } = await Promise.resolve().then(() => (init_parser19(), parser_exports13));
   const { layoutMindmap: layoutMindmap2 } = await Promise.resolve().then(() => (init_layout6(), layout_exports6));
   const { collapseMindmapTree: collapseMindmapTree2 } = await Promise.resolve().then(() => (init_collapse3(), collapse_exports3));
   const { renderMindmap: renderMindmap2 } = await Promise.resolve().then(() => (init_renderer7(), renderer_exports7));
-  const isDark = theme === "dark";
+  const isDark = ctx.isDark;
   const effectivePalette = await resolveExportPalette(theme, palette);
   const mmParsed = parseMindmap2(content, effectivePalette);
   if (mmParsed.error) return "";
@@ -60879,7 +61938,7 @@ async function exportMindmap(ctx) {
   const activeTagGroup = resolveActiveTagGroup(
     mmParsed.tagGroups,
     mmParsed.options["active-tag"],
-    viewState?.tag ?? options?.tagGroup
+    ctxTagOverride(ctx)
   );
   const hideDescriptions = mmParsed.options["no-descriptions"] === "true" || viewState?.hd === true;
   const { roots: effectiveRoots, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseMindmapTree2(mmParsed.roots, collapsedNodes) : { roots: mmParsed.roots, hiddenCounts: /* @__PURE__ */ new Map() };
@@ -60929,7 +61988,7 @@ async function exportWireframe(ctx) {
     wireframeParsed,
     wireframeLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: exportWidth, height: exportHeight },
     theme
@@ -60937,7 +61996,7 @@ async function exportWireframe(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportC4(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseC4: parseC42 } = await Promise.resolve().then(() => (init_parser14(), parser_exports8));
   const {
     layoutC4Context: layoutC4Context2,
@@ -60949,9 +62008,9 @@ async function exportC4(ctx) {
   const effectivePalette = await resolveExportPalette(theme, palette);
   const c4Parsed = parseC42(content, effectivePalette);
   if (c4Parsed.error || c4Parsed.elements.length === 0) return "";
-  const c4Level = options?.c4Level ?? viewState?.c4l ?? "context";
-  const c4System = options?.c4System ?? viewState?.c4s;
-  const c4Container = options?.c4Container ?? viewState?.c4c;
+  const c4Level = ctx.options?.c4Level ?? viewState?.c4l ?? "context";
+  const c4System = ctx.options?.c4System ?? viewState?.c4s;
+  const c4Container = ctx.options?.c4Container ?? viewState?.c4c;
   const c4Layout = c4Level === "deployment" ? layoutC4Deployment2(c4Parsed) : c4Level === "components" && c4System && c4Container ? layoutC4Components2(c4Parsed, c4System, c4Container) : c4Level === "containers" && c4System ? layoutC4Containers2(c4Parsed, c4System) : layoutC4Context2(c4Parsed);
   if (c4Layout.nodes.length === 0) return "";
   const PADDING3 = 20;
@@ -60965,13 +62024,13 @@ async function exportC4(ctx) {
     c4Parsed,
     c4Layout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: exportWidth, height: exportHeight },
     resolveActiveTagGroup(
       c4Parsed.tagGroups,
       c4Parsed.options["active-tag"],
-      viewState?.tag ?? options?.tagGroup
+      ctxTagOverride(ctx)
     ),
     exportMode
   );
@@ -60992,14 +62051,14 @@ async function exportFlowchart(ctx) {
     fcParsed,
     layout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportInfra(ctx) {
-  const { content, theme, palette, viewState, options } = ctx;
+  const { content, theme, palette, viewState } = ctx;
   const { parseInfra: parseInfra2 } = await Promise.resolve().then(() => (init_parser15(), parser_exports9));
   const { computeInfra: computeInfra2 } = await Promise.resolve().then(() => (init_compute(), compute_exports));
   const { layoutInfra: layoutInfra2 } = await Promise.resolve().then(() => (init_layout10(), layout_exports10));
@@ -61012,7 +62071,7 @@ async function exportInfra(ctx) {
   const activeTagGroup = resolveActiveTagGroup(
     infraParsed.tagGroups,
     infraParsed.options["active-tag"],
-    viewState?.tag ?? options?.tagGroup
+    ctxTagOverride(ctx)
   );
   const showInfraTitle = !!infraParsed.title && infraParsed.options["no-title"] !== "on";
   const titleOffset = showInfraTitle ? 40 : 0;
@@ -61030,7 +62089,7 @@ async function exportInfra(ctx) {
     container,
     infraLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     showInfraTitle ? infraParsed.title : null,
     showInfraTitle ? infraParsed.titleLineNumber : null,
     infraTagGroups,
@@ -61077,7 +62136,7 @@ async function exportPert(ctx) {
     pertResolved,
     pertLayout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     {
       title: pertParsed.title,
       exportDims: { width: exportW, height: exportH },
@@ -61090,7 +62149,7 @@ async function exportPert(ctx) {
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportGantt(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const { parseGantt: parseGantt2 } = await Promise.resolve().then(() => (init_parser16(), parser_exports10));
   const { calculateSchedule: calculateSchedule2 } = await Promise.resolve().then(() => (init_calculator(), calculator_exports));
   const { renderGantt: renderGantt2 } = await Promise.resolve().then(() => (init_renderer12(), renderer_exports12));
@@ -61108,7 +62167,7 @@ async function exportGantt(ctx) {
     container,
     resolved,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     {
       ...ganttCollapsedGroups !== void 0 && {
         collapsedGroups: ganttCollapsedGroups
@@ -61122,7 +62181,7 @@ async function exportGantt(ctx) {
       currentActiveGroup: resolveActiveTagGroup(
         resolved.tagGroups,
         resolved.options.activeTag ?? void 0,
-        viewState?.tag ?? options?.tagGroup
+        ctxTagOverride(ctx)
       ),
       exportMode
     },
@@ -61145,7 +62204,7 @@ async function exportState(ctx) {
     stateParsed,
     layout,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
   );
@@ -61165,7 +62224,7 @@ async function exportTechRadar(ctx) {
     container,
     radarParsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     { width: RADAR_EXPORT_W, height: RADAR_EXPORT_H },
     viewState,
     exportMode
@@ -61182,13 +62241,13 @@ async function exportJourneyMap(ctx) {
   if (jmParsed.error || jmParsed.phases.length === 0 && jmParsed.steps.length === 0)
     return "";
   const jmLayout = layoutJourneyMap2(jmParsed, effectivePalette, {
-    isDark: theme === "dark"
+    isDark: ctx.isDark
   });
   const container = createExportContainer(
     jmLayout.totalWidth,
     jmLayout.totalHeight
   );
-  renderJourneyMap2(container, jmParsed, effectivePalette, theme === "dark", {
+  renderJourneyMap2(container, jmParsed, effectivePalette, ctx.isDark, {
     exportDims: { width: jmLayout.totalWidth, height: jmLayout.totalHeight },
     exportMode
   });
@@ -61206,7 +62265,7 @@ async function exportCycle(ctx) {
     container,
     cycleParsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
     viewState,
     exportMode
@@ -61243,7 +62302,7 @@ async function exportMap(ctx) {
     mapResolved,
     mapData,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     dims
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -61260,7 +62319,7 @@ async function exportPyramid(ctx) {
     container,
     pyramidParsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -61277,7 +62336,7 @@ async function exportRing(ctx) {
     container,
     ringParsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -61294,7 +62353,7 @@ async function exportRaci(ctx) {
     container,
     raciParsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -61317,7 +62376,7 @@ async function exportSlope(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     dims
   );
@@ -61333,14 +62392,14 @@ async function exportArc(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     dims
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportTimeline(ctx) {
-  const { content, theme, palette, viewState, options, exportMode } = ctx;
+  const { content, theme, palette, viewState, exportMode } = ctx;
   const parsed = parseTimeline(content, palette);
   if (parsed.error || parsed.timelineEvents.length === 0) return "";
   const effectivePalette = await resolveExportPalette(theme, palette);
@@ -61349,13 +62408,13 @@ async function exportTimeline(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     dims,
     resolveActiveTagGroup(
       parsed.timelineTagGroups,
       parsed.timelineActiveTag,
-      viewState?.tag ?? options?.tagGroup
+      ctxTagOverride(ctx)
     ),
     viewState?.swim,
     void 0,
@@ -61374,7 +62433,7 @@ async function exportWordcloud(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     dims
   );
   return finalizeSvgExport(container, theme, effectivePalette);
@@ -61389,7 +62448,7 @@ async function exportVenn(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     dims
   );
@@ -61405,14 +62464,14 @@ async function exportQuadrant(ctx) {
     container,
     parsed,
     effectivePalette,
-    theme === "dark",
+    ctx.isDark,
     void 0,
     dims
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
 async function exportVisualization(ctx) {
-  const { content, theme, palette, viewState, options } = ctx;
+  const { content, theme, palette, viewState } = ctx;
   const parsed = parseVisualization(content, palette);
   if (parsed.type !== "sequence") {
     if (parsed.error) {
@@ -61423,7 +62482,7 @@ async function exportVisualization(ctx) {
     }
   }
   const effectivePalette = await resolveExportPalette(theme, palette);
-  const isDark = theme === "dark";
+  const isDark = ctx.isDark;
   const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
   const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser7(), parser_exports));
   const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer20(), renderer_exports20));
@@ -61431,7 +62490,7 @@ async function exportVisualization(ctx) {
   if (seqParsed.error || seqParsed.participants.length === 0) return "";
   const collapsedSections = viewState?.cs ? new Set(viewState.cs) : void 0;
   const collapsedGroups = viewState?.cg ? new Set(viewState.cg.map(Number).filter((n) => Number.isFinite(n))) : void 0;
-  const seqActiveTagGroup = viewState?.tag ?? options?.tagGroup;
+  const seqActiveTagGroup = ctxTagOverride(ctx);
   renderSequenceDiagram2(
     container,
     seqParsed,
@@ -62205,7 +63264,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.30.0";
+var VERSION = "0.32.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "slate",