@diagrammo/dgmo 0.55.0 → 0.56.0

package/dist/element.mjs

@@ -104,7 +104,7 @@ function nameMergedMessage(args) {
 function emptyMetadataValueMessage(key) {
   return `Metadata key '${key}:' has no value \u2014 the pair is dropped. Provide a value or remove the key.`;
 }
-var NAME_DIAGNOSTIC_CODES, METADATA_DIAGNOSTIC_CODES, TITLE_DIRECTIVE_DX;
+var NAME_DIAGNOSTIC_CODES, METADATA_DIAGNOSTIC_CODES, NEGATIVE_VALUE_DX, TITLE_DIRECTIVE_DX;
 var init_diagnostics = __esm({
   "src/diagnostics.ts"() {
     "use strict";
@@ -135,6 +135,15 @@ var init_diagnostics = __esm({
        */
       EMPTY_METADATA_VALUE: "W_EMPTY_METADATA_VALUE"
     };
+    NEGATIVE_VALUE_DX = {
+      code: "E_VALUE_NEGATIVE",
+      severity: "error",
+      chartType: null,
+      title: "Negative value on a magnitude channel",
+      message: (p) => `Negative value ${p.value ?? -300} on "${p.label ?? "Refunds"}" \u2014 ${p.channel ?? "this chart's values"} encode magnitude and can't be negative.`,
+      hint: 'Restate the data as positive magnitudes (e.g. "decline %"). If direction matters, use a bar chart \u2014 bars support negative values.',
+      example: "pie Budget\nRent 1200\nRefunds -300"
+    };
     TITLE_DIRECTIVE_DX = {
       code: "E_TITLE_DIRECTIVE",
       severity: "error",
@@ -2708,6 +2717,16 @@ function parseVisualizationFull(content, palette) {
           palette
         ) ?? null : null;
         const arcValue = linkMatch[4] ? parseFloat(normalizeNumericToken(linkMatch[4]) ?? linkMatch[4]) : 1;
+        if (arcValue < 0) {
+          result.diagnostics.push(
+            emit(NEGATIVE_VALUE_DX, lineNumber, {
+              value: arcValue,
+              label: `${source} -> ${target}`,
+              channel: "arc link weights"
+            })
+          );
+          continue;
+        }
         result.links.push({
           source,
           target,
@@ -3327,6 +3346,14 @@ function parseVisualizationFull(content, palette) {
             weight: maybeWeight,
             lineNumber
           });
+        } else if (lastSpace >= 0 && !isNaN(maybeWeight) && maybeWeight < 0) {
+          result.diagnostics.push(
+            emit(NEGATIVE_VALUE_DX, lineNumber, {
+              value: maybeWeight,
+              label: line11.substring(0, lastSpace).trim(),
+              channel: "wordcloud weights"
+            })
+          );
         } else {
           freeformLines.push(line11);
         }
@@ -3639,6 +3666,27 @@ var init_parse = __esm({
   }
 });
 
+// src/utils/svg-serialize.ts
+function escapeAttributeAngleBrackets(svg) {
+  return svg.replace(
+    // ` name="value"` / ` xlink:href="value"` — attribute names in SVG may carry
+    // a namespace prefix, a dot, or a dash.
+    /(\s[\w:.-]+=")([^"]*)"/g,
+    (match, prefix, value) => {
+      if (!value.includes("<") && !value.includes(">")) return match;
+      return `${prefix}${value.replace(/</g, "&lt;").replace(/>/g, "&gt;")}"`;
+    }
+  );
+}
+function serializeSvg(svgEl) {
+  return escapeAttributeAngleBrackets(svgEl.outerHTML);
+}
+var init_svg_serialize = __esm({
+  "src/utils/svg-serialize.ts"() {
+    "use strict";
+  }
+});
+
 // src/fonts.ts
 var FONT_FAMILY;
 var init_fonts = __esm({
@@ -4842,15 +4890,15 @@ function showTooltip(tooltip, html, event) {
   tooltip.style.display = "block";
   const container = tooltip.parentElement;
   const rect2 = container.getBoundingClientRect();
-  let left = event.clientX - rect2.left + 12;
-  let top = event.clientY - rect2.top - 28;
+  let left2 = event.clientX - rect2.left + 12;
+  let top2 = event.clientY - rect2.top - 28;
   const tipW = tooltip.offsetWidth;
   const tipH = tooltip.offsetHeight;
-  if (left + tipW > rect2.width) left = rect2.width - tipW - 4;
-  if (top < 0) top = event.clientY - rect2.top + 16;
-  if (top + tipH > rect2.height) top = rect2.height - tipH - 4;
-  tooltip.style.left = `${left}px`;
-  tooltip.style.top = `${top}px`;
+  if (left2 + tipW > rect2.width) left2 = rect2.width - tipW - 4;
+  if (top2 < 0) top2 = event.clientY - rect2.top + 16;
+  if (top2 + tipH > rect2.height) top2 = rect2.height - tipH - 4;
+  tooltip.style.left = `${left2}px`;
+  tooltip.style.top = `${top2}px`;
 }
 function hideTooltip(tooltip) {
   tooltip.style.display = "none";
@@ -4880,7 +4928,7 @@ function finalizeSvgExport(container, theme, palette) {
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
   svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
-  const svgHtml = svgEl.outerHTML;
+  const svgHtml = serializeSvg(svgEl);
   document.body.removeChild(container);
   return svgHtml;
 }
@@ -4888,6 +4936,7 @@ var EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3_helpers = __esm({
   "src/utils/d3-helpers.ts"() {
     "use strict";
+    init_svg_serialize();
     init_fonts();
     init_palettes();
     init_title_constants();
@@ -5932,13 +5981,13 @@ function getMaxLegendReservedHeight(config, containerWidth) {
 }
 function getLegendExtent(config, state, containerWidth) {
   const layout = computeLegendLayout(config, state, containerWidth);
-  let left = Infinity;
-  let right = 0;
-  let bottom = 0;
+  let left2 = Infinity;
+  let right2 = 0;
+  let bottom2 = 0;
   const track = (x, y, w, h) => {
-    left = Math.min(left, x);
-    right = Math.max(right, x + w);
-    bottom = Math.max(bottom, y + h);
+    left2 = Math.min(left2, x);
+    right2 = Math.max(right2, x + w);
+    bottom2 = Math.max(bottom2, y + h);
   };
   if (layout.activeCapsule) {
     const c = layout.activeCapsule;
@@ -5946,8 +5995,8 @@ function getLegendExtent(config, state, containerWidth) {
   }
   for (const pill of layout.pills) track(pill.x, pill.y, pill.width, pill.height);
   return {
-    width: right - (left === Infinity ? 0 : left),
-    height: bottom || LEGEND_HEIGHT
+    width: right2 - (left2 === Infinity ? 0 : left2),
+    height: bottom2 || LEGEND_HEIGHT
   };
 }
 var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP, RAMP_LEGEND_W, RAMP_LEGEND_H, RAMP_LABEL_GAP;
@@ -8658,9 +8707,9 @@ function parseSequenceDgmo(content, palette) {
   const blockStack = [];
   const currentContainer = () => {
     if (blockStack.length === 0) return result.elements;
-    const top = blockStack[blockStack.length - 1];
-    if (top.activeElseIfBranch) return top.activeElseIfBranch.children;
-    return top.inElse ? top.block.elseChildren : top.block.children;
+    const top2 = blockStack[blockStack.length - 1];
+    if (top2.activeElseIfBranch) return top2.activeElseIfBranch.children;
+    return top2.inElse ? top2.block.elseChildren : top2.block.children;
   };
   let lastMsgFrom = null;
   for (let i = 0; i < lines.length; i++) {
@@ -8798,8 +8847,8 @@ function parseSequenceDgmo(content, palette) {
     if (sectionMatch) {
       const sectionIndent = measureIndent(raw);
       while (blockStack.length > 0) {
-        const top = blockStack[blockStack.length - 1];
-        if (sectionIndent > top.indent) break;
+        const top2 = blockStack[blockStack.length - 1];
+        if (sectionIndent > top2.indent) break;
         blockStack.pop();
       }
       const labelRaw = sectionMatch[1].trim();
@@ -8999,9 +9048,9 @@ function parseSequenceDgmo(content, palette) {
     }
     const indent = measureIndent(raw);
     while (blockStack.length > 0) {
-      const top = blockStack[blockStack.length - 1];
-      if (indent > top.indent) break;
-      if (indent === top.indent && (top.block.type === "if" || top.block.type === "parallel")) {
+      const top2 = blockStack[blockStack.length - 1];
+      if (indent > top2.indent) break;
+      if (indent === top2.indent && (top2.block.type === "if" || top2.block.type === "parallel")) {
         const lower = trimmed.toLowerCase();
         if (lower === "else" || lower.startsWith("else if ")) break;
       }
@@ -9158,26 +9207,26 @@ function parseSequenceDgmo(content, palette) {
     if (elseIfMatch) {
       if (blockStack.length > 0 && // In-bounds by the length check above.
       blockStack[blockStack.length - 1].indent === indent) {
-        const top = blockStack[blockStack.length - 1];
-        if (top.block.type === "parallel") {
+        const top2 = blockStack[blockStack.length - 1];
+        if (top2.block.type === "parallel") {
           pushError(
             lineNumber,
             "parallel blocks don't support else if \u2014 list all concurrent messages directly inside the block"
           );
           continue;
         }
-        if (top.block.type === "if") {
+        if (top2.block.type === "if") {
           const branch = {
             // Capture group 1 guaranteed present after successful match.
             label: elseIfMatch[1].trim(),
             children: [],
             lineNumber
           };
-          if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
-          const branches = top.block.elseIfBranches;
+          if (!top2.block.elseIfBranches) top2.block.elseIfBranches = [];
+          const branches = top2.block.elseIfBranches;
           branches.push(branch);
-          top.activeElseIfBranch = branch;
-          top.inElse = false;
+          top2.activeElseIfBranch = branch;
+          top2.inElse = false;
         }
       }
       continue;
@@ -9185,18 +9234,18 @@ function parseSequenceDgmo(content, palette) {
     if (trimmed.toLowerCase() === "else") {
       if (blockStack.length > 0 && // In-bounds by the length check above.
       blockStack[blockStack.length - 1].indent === indent) {
-        const top = blockStack[blockStack.length - 1];
-        if (top.block.type === "parallel") {
+        const top2 = blockStack[blockStack.length - 1];
+        if (top2.block.type === "parallel") {
           pushError(
             lineNumber,
             "parallel blocks don't support else \u2014 list all concurrent messages directly inside the block"
           );
           continue;
         }
-        if (top.block.type === "if") {
-          top.inElse = true;
-          delete top.activeElseIfBranch;
-          top.block.elseLineNumber = lineNumber;
+        if (top2.block.type === "if") {
+          top2.inElse = true;
+          delete top2.activeElseIfBranch;
+          top2.block.elseLineNumber = lineNumber;
         }
       }
       continue;
@@ -9964,25 +10013,25 @@ function placeNotes(obstacles, requests, direction) {
     const rectFor = (side) => {
       switch (side) {
         case "right": {
-          const left = nodeRight + NOTE_GAP;
-          const top = cy - noteH / 2;
-          return { left, top, right: left + noteW, bottom: top + noteH };
+          const left2 = nodeRight + NOTE_GAP;
+          const top2 = cy - noteH / 2;
+          return { left: left2, top: top2, right: left2 + noteW, bottom: top2 + noteH };
         }
         case "left": {
-          const right = nodeLeft - NOTE_GAP;
-          const top = cy - noteH / 2;
-          return { left: right - noteW, top, right, bottom: top + noteH };
+          const right2 = nodeLeft - NOTE_GAP;
+          const top2 = cy - noteH / 2;
+          return { left: right2 - noteW, top: top2, right: right2, bottom: top2 + noteH };
         }
         case "below": {
-          const left = cx - noteW / 2;
-          const top = nodeBottom + NOTE_GAP;
-          return { left, top, right: left + noteW, bottom: top + noteH };
+          const left2 = cx - noteW / 2;
+          const top2 = nodeBottom + NOTE_GAP;
+          return { left: left2, top: top2, right: left2 + noteW, bottom: top2 + noteH };
         }
         case "above":
         default: {
-          const left = cx - noteW / 2;
-          const bottom = nodeTop - NOTE_GAP;
-          return { left, top: bottom - noteH, right: left + noteW, bottom };
+          const left2 = cx - noteW / 2;
+          const bottom2 = nodeTop - NOTE_GAP;
+          return { left: left2, top: bottom2 - noteH, right: left2 + noteW, bottom: bottom2 };
         }
       }
     };
@@ -10006,17 +10055,17 @@ function placeNotes(obstacles, requests, direction) {
         );
         if (blockers.length === 0) break;
         if (axisIsY && outward > 0) {
-          const top = Math.max(...blockers.map((b) => b.bottom)) + NOTE_CLEAR;
-          rect2 = { ...rect2, top, bottom: top + noteH };
+          const top2 = Math.max(...blockers.map((b) => b.bottom)) + NOTE_CLEAR;
+          rect2 = { ...rect2, top: top2, bottom: top2 + noteH };
         } else if (axisIsY) {
-          const bottom = Math.min(...blockers.map((b) => b.top)) - NOTE_CLEAR;
-          rect2 = { ...rect2, bottom, top: bottom - noteH };
+          const bottom2 = Math.min(...blockers.map((b) => b.top)) - NOTE_CLEAR;
+          rect2 = { ...rect2, bottom: bottom2, top: bottom2 - noteH };
         } else if (outward > 0) {
-          const left = Math.max(...blockers.map((b) => b.right)) + NOTE_CLEAR;
-          rect2 = { ...rect2, left, right: left + noteW };
+          const left2 = Math.max(...blockers.map((b) => b.right)) + NOTE_CLEAR;
+          rect2 = { ...rect2, left: left2, right: left2 + noteW };
         } else {
-          const right = Math.min(...blockers.map((b) => b.left)) - NOTE_CLEAR;
-          rect2 = { ...rect2, right, left: right - noteW };
+          const right2 = Math.min(...blockers.map((b) => b.left)) - NOTE_CLEAR;
+          rect2 = { ...rect2, right: right2, left: right2 - noteW };
         }
       }
       chosen = { rect: rect2, side };
@@ -10356,8 +10405,8 @@ function parseFlowchart(content, palette) {
   function processContentLine(trimmed, lineNumber, indent) {
     contentStarted = true;
     while (indentStack.length > 0) {
-      const top = indentStack[indentStack.length - 1];
-      if (top.indent >= indent) {
+      const top2 = indentStack[indentStack.length - 1];
+      if (top2.indent >= indent) {
         indentStack.pop();
       } else {
         break;
@@ -10943,8 +10992,8 @@ function parseState(content, palette) {
       groupIndent = -1;
     }
     while (indentStack.length > 0) {
-      const top = indentStack[indentStack.length - 1];
-      if (top.indent >= indent) {
+      const top2 = indentStack[indentStack.length - 1];
+      if (top2.indent >= indent) {
         indentStack.pop();
       } else {
         break;
@@ -12325,8 +12374,8 @@ function parseNodeLabel(trimmed, _indent, lineNumber, _palette, counter, metaAli
 }
 function attachNode(node, indent, indentStack, result) {
   while (indentStack.length > 0) {
-    const top = indentStack[indentStack.length - 1];
-    if (top.indent < indent) break;
+    const top2 = indentStack[indentStack.length - 1];
+    if (top2.indent < indent) break;
     indentStack.pop();
   }
   if (indentStack.length > 0) {
@@ -12849,8 +12898,8 @@ function parseSitemapMetaTail(tail, metaAliasMap) {
 }
 function attachNode2(node, indent, indentStack, result) {
   while (indentStack.length > 0) {
-    const top = indentStack[indentStack.length - 1];
-    if (top.indent < indent) break;
+    const top2 = indentStack[indentStack.length - 1];
+    if (top2.indent < indent) break;
     indentStack.pop();
   }
   if (indentStack.length > 0) {
@@ -13530,8 +13579,8 @@ function parsePert(content, parseOpts = {}) {
     if (trimmed.startsWith("#") || trimmed.startsWith("//")) continue;
     const indent = measureIndent(rawLine);
     while (groupStack.length > 0) {
-      const top = groupStack[groupStack.length - 1];
-      if (indent <= top.indent) groupStack.pop();
+      const top2 = groupStack[groupStack.length - 1];
+      if (indent <= top2.indent) groupStack.pop();
       else break;
     }
     if (currentSourceIndent >= 0 && indent <= currentSourceIndent && !trimmed.startsWith("-")) {
@@ -14944,6 +14993,19 @@ function parseChart(content, palette) {
         lineNumber
       );
       const [first, ...rest] = dataValues.values;
+      if (result.type === "pie" || result.type === "polar-area" || result.type === "radar") {
+        const neg = dataValues.values.find((v) => v < 0);
+        if (neg !== void 0) {
+          result.diagnostics.push(
+            emit(NEGATIVE_VALUE_DX, lineNumber, {
+              value: neg,
+              label: rawLabel,
+              channel: CHANNEL_NAME[result.type]
+            })
+          );
+          continue;
+        }
+      }
       result.data.push({
         label: rawLabel,
         // parseDataRowValues guarantees values.length >= 1.
@@ -15095,13 +15157,18 @@ function trailingNumerics(tokens, minIndex) {
   }
   return values;
 }
-var VALID_TYPES, KNOWN_OPTIONS3, DEFAULT_HOLE, KNOWN_BOOLEANS2, KNOWN_FIRST_TOKENS;
+var CHANNEL_NAME, VALID_TYPES, KNOWN_OPTIONS3, DEFAULT_HOLE, KNOWN_BOOLEANS2, KNOWN_FIRST_TOKENS;
 var init_chart = __esm({
   "src/chart.ts"() {
     "use strict";
     init_colors();
     init_diagnostics();
     init_parsing();
+    CHANNEL_NAME = {
+      pie: "pie slices",
+      "polar-area": "polar-area wedges",
+      radar: "radar axis values"
+    };
     VALID_TYPES = /* @__PURE__ */ new Set([
       "bar",
       "line",
@@ -15382,11 +15449,22 @@ function parseExtendedChartFull(content, palette) {
         result.diagnostics,
         palette
       ) : void 0;
+      const linkValue = parseFloat(val);
+      if (linkValue < 0) {
+        result.diagnostics.push(
+          emit(NEGATIVE_VALUE_DX, lineNumber, {
+            value: linkValue,
+            label: `${source} -> ${target}`,
+            channel: "flow widths"
+          })
+        );
+        continue;
+      }
       if (!result.links) result.links = [];
       result.links.push({
         source,
         target,
-        value: parseFloat(val),
+        value: linkValue,
         ...linkColor && { color: linkColor },
         directed: arrow === "->",
         lineNumber
@@ -15424,12 +15502,22 @@ function parseExtendedChartFull(content, palette) {
               if (!result.nodeColors) result.nodeColors = {};
               result.nodeColors[target] = targetColor;
             }
+            const childValue = dataRow2.values[0];
+            if (childValue < 0) {
+              result.diagnostics.push(
+                emit(NEGATIVE_VALUE_DX, lineNumber, {
+                  value: childValue,
+                  label: `${source} -> ${target}`,
+                  channel: "flow widths"
+                })
+              );
+              continue;
+            }
             if (!result.links) result.links = [];
             result.links.push({
               source,
               target,
-              // In-bounds by values.length === 1 guard above.
-              value: dataRow2.values[0],
+              value: childValue,
               ...linkColor && { color: linkColor },
               lineNumber
             });
@@ -15677,6 +15765,16 @@ function parseExtendedChartFull(content, palette) {
         result.diagnostics,
         lineNumber
       );
+      if (result.type === "funnel" && dataRow.values[0] < 0) {
+        result.diagnostics.push(
+          emit(NEGATIVE_VALUE_DX, lineNumber, {
+            value: dataRow.values[0],
+            label: rawLabel,
+            channel: "funnel stage sizes"
+          })
+        );
+        continue;
+      }
       result.data.push({
         label: rawLabel,
         // In-bounds by values.length === 1 guard above.
@@ -16312,10 +16410,10 @@ function resolveFutureEvents(events) {
         e.futureSpan = [lo, hi];
       });
     } else if (lo === null && hi !== null) {
-      const left = hi - pad3;
+      const left2 = hi - pad3;
       group.forEach((e, k) => {
-        e.dateValue = left + (hi - left) * (k + 1) / (g + 1);
-        e.futureSpan = [left, hi];
+        e.dateValue = left2 + (hi - left2) * (k + 1) / (g + 1);
+        e.futureSpan = [left2, hi];
       });
     } else {
       group.forEach((e, k) => {
@@ -17579,8 +17677,8 @@ function parseC4(content, palette) {
     const indent = measureIndent(line11);
     if (inDeployment) {
       while (deployStack.length > 0) {
-        const top = deployStack[deployStack.length - 1];
-        if (top.indent < indent) break;
+        const top2 = deployStack[deployStack.length - 1];
+        if (top2.indent < indent) break;
         deployStack.pop();
       }
       if (indent === 0 && (C4_IS_A_RE.test(trimmed) || ELEMENT_RE.test(trimmed))) {
@@ -17658,8 +17756,8 @@ function parseC4(content, palette) {
       continue;
     }
     while (stack.length > 0) {
-      const top = stack[stack.length - 1];
-      if (top.indent < indent) break;
+      const top2 = stack[stack.length - 1];
+      if (top2.indent < indent) break;
       stack.pop();
     }
     const containerMatch = trimmed.match(CONTAINER_RE3);
@@ -19435,11 +19533,11 @@ function parseGantt(content, palette) {
       let hadDeeperPop = false;
       let lastPoppedTaskRef = null;
       while (blockStack.length > 0) {
-        const top = blockStack[blockStack.length - 1];
-        if (indent <= top.indent) {
-          if (top.indent > indent) hadDeeperPop = true;
-          if (top.containerType === "task" && top.taskRef) {
-            lastPoppedTaskRef = top.taskRef;
+        const top2 = blockStack[blockStack.length - 1];
+        if (indent <= top2.indent) {
+          if (top2.indent > indent) hadDeeperPop = true;
+          if (top2.containerType === "task" && top2.taskRef) {
+            lastPoppedTaskRef = top2.taskRef;
           }
           blockStack.pop();
         } else {
@@ -20612,6 +20710,19 @@ function parseMap(content, palette) {
         delete meta[k];
       }
     }
+    if (own !== "heat" && meta[own] !== void 0) {
+      const n = Number(meta[own]);
+      if (Number.isFinite(n) && n < 0) {
+        diagnostics.push(
+          emit(NEGATIVE_VALUE_DX, line11, {
+            value: n,
+            label: `${own}: ${meta[own]}`,
+            channel: own === "size" ? "marker sizes" : "edge widths"
+          })
+        );
+        delete meta[own];
+      }
+    }
   }
   function handleDirective2(key, value, line11) {
     const d = result.directives;
@@ -23389,17 +23500,17 @@ function hasCycle(n, edges) {
     stack.push({ v: s, i: 0 });
     color[s] = 1;
     while (stack.length) {
-      const top = stack[stack.length - 1];
-      const nbrs = adj.get(top.v) ?? [];
-      if (top.i < nbrs.length) {
-        const w = nbrs[top.i++];
+      const top2 = stack[stack.length - 1];
+      const nbrs = adj.get(top2.v) ?? [];
+      if (top2.i < nbrs.length) {
+        const w = nbrs[top2.i++];
         if (color[w] === 1) return true;
         if (color[w] === 0) {
           color[w] = 1;
           stack.push({ v: w, i: 0 });
         }
       } else {
-        color[top.v] = 2;
+        color[top2.v] = 2;
         stack.pop();
       }
     }
@@ -24191,8 +24302,8 @@ function parseNodeLine2(trimmed, lineNumber, _palette, counter, aliasMap, diagno
 }
 function attachNode3(node, indent, indentStack, result, nodesWithChildren) {
   while (indentStack.length > 0) {
-    const top = indentStack[indentStack.length - 1];
-    if (top.indent < indent) break;
+    const top2 = indentStack[indentStack.length - 1];
+    if (top2.indent < indent) break;
     indentStack.pop();
   }
   if (indentStack.length > 0) {
@@ -26638,8 +26749,8 @@ function parseNodeLine3(trimmed, lineNumber, counter, aliasMap, diagnostics, bad
 }
 function attachNode4(node, indent, indentStack, result) {
   while (indentStack.length > 0) {
-    const top = indentStack[indentStack.length - 1];
-    if (top.indent < indent) break;
+    const top2 = indentStack[indentStack.length - 1];
+    if (top2.indent < indent) break;
     indentStack.pop();
   }
   if (indentStack.length > 0) {
@@ -33639,13 +33750,13 @@ function renderLegendSvg(groups, options) {
   }
   const { groupBg, pillBorder } = legendChromeColors(palette, isDark);
   const parts = [];
-  let bottom = 0;
-  let left = Infinity;
-  let right = 0;
+  let bottom2 = 0;
+  let left2 = Infinity;
+  let right2 = 0;
   const track = (x, y, w, h) => {
-    left = Math.min(left, x);
-    right = Math.max(right, x + w);
-    bottom = Math.max(bottom, y + h);
+    left2 = Math.min(left2, x);
+    right2 = Math.max(right2, x + w);
+    bottom2 = Math.max(bottom2, y + h);
   };
   if (layout.activeCapsule) {
     const c = layout.activeCapsule;
@@ -33661,8 +33772,8 @@ function renderLegendSvg(groups, options) {
   const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
   return {
     svg,
-    height: bottom,
-    width: right - (left === Infinity ? 0 : left)
+    height: bottom2,
+    width: right2 - (left2 === Infinity ? 0 : left2)
   };
 }
 var init_legend_svg = __esm({
@@ -33901,7 +34012,7 @@ var init_shared = __esm({
 
 // src/charts-d3/bar.ts
 import { scaleBand, scaleLinear as scaleLinear5 } from "d3-scale";
-import { max as d3max } from "d3-array";
+import { max as d3max, min as d3min } from "d3-array";
 function seriesValues(pt, seriesCount) {
   const out = [pt.value];
   for (let s = 1; s < seriesCount; s++) out.push(pt.extraValues?.[s - 1] ?? 0);
@@ -33925,7 +34036,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
     return multiSeries ? chart.seriesNameColors?.[seriesIdx] ?? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
   };
   const fillOf = (c) => shapeFill(palette, c, isDark, { mode: fillMode });
-  const top = reserveHeader(
+  const top2 = reserveHeader(
     svg,
     chart,
     colors,
@@ -33936,11 +34047,20 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
     inlineTitle
   );
   const perCat = data.map((d) => seriesValues(d, seriesCount));
-  const maxVal = stacked ? d3max(perCat, (vals) => vals.reduce((a, b) => a + b, 0)) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
-  const niceMax = maxVal === 0 ? 1 : maxVal;
-  const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2)];
+  const maxVal = stacked ? d3max(
+    perCat,
+    (vals) => vals.filter((v) => v > 0).reduce((a, b) => a + b, 0)
+  ) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
+  const minVal = stacked ? d3min(
+    perCat,
+    (vals) => vals.filter((v) => v < 0).reduce((a, b) => a + b, 0)
+  ) ?? 0 : d3min(perCat, (vals) => d3min(vals) ?? 0) ?? 0;
+  const hiVal = Math.max(0, maxVal);
+  const loVal = Math.min(0, minVal);
+  const niceMax = hiVal === 0 && loVal === 0 ? 1 : hiVal;
+  const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2), fmtNum(loVal), fmtNum(loVal / 2)];
   const m = {
-    top: top + 8,
+    top: top2 + 8,
     right: 32,
     bottom: 64,
     left: computeLeftMargin(chart.ylabel, leftLabels)
@@ -33951,7 +34071,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   const catRange = horiz ? [m.top, m.top + plotH] : [m.left, m.left + plotW];
   const cat = scaleBand().domain(data.map((d) => d.label)).range(catRange).padding(0.3);
   const valRange = horiz ? [m.left, m.left + plotW] : [m.top + plotH, m.top];
-  const val = scaleLinear5().domain([0, niceMax]).nice().range(valRange);
+  const val = scaleLinear5().domain([loVal, niceMax]).nice().range(valRange);
   for (const t of val.ticks(6)) {
     if (horiz) {
       const x = val(t);
@@ -33976,7 +34096,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   data.forEach((d, ci) => {
     const base = cat(d.label) ?? 0;
     const vals = seriesValues(d, seriesCount);
-    let acc = 0;
+    let accPos = 0;
+    let accNeg = 0;
     vals.forEach((v, s) => {
       const stroke2 = colorFor(s, ci, seriesCount === 1 ? d.color : void 0);
       const fill2 = fillOf(stroke2);
@@ -33990,6 +34111,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
         seriesName: multiSeries ? sName : void 0
       };
       if (stacked) {
+        const acc = v < 0 ? accNeg : accPos;
         if (horiz) {
           const x0 = val(acc);
           const x1 = val(acc + v);
@@ -34033,7 +34155,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
               textColor
             );
         }
-        acc += v;
+        if (v < 0) accNeg += v;
+        else accPos += v;
       } else {
         const off = inner(s) ?? 0;
         const bw = inner.bandwidth();
@@ -34049,13 +34172,16 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
             stroke2,
             tag
           );
+          const txt = fmtNum(v);
+          const approxW = txt.length * 7 + 6;
+          const inside = v < 0 ? x1 - approxW < m.left : x1 + approxW > m.left + plotW;
           drawValueLabel(
             svg,
-            fmtNum(v),
-            x1 + 6,
+            txt,
+            v < 0 ? inside ? x1 + 6 : x1 - 6 : inside ? x1 - 6 : x1 + 6,
             base + off + bw / 2 + 4,
             textColor,
-            "start"
+            v < 0 !== inside ? "end" : "start"
           );
         } else {
           const y1 = val(v);
@@ -34069,11 +34195,13 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
             stroke2,
             tag
           );
+          const yOut = v < 0 ? y1 + 14 : y1 - 6;
+          const yInside = v < 0 ? yOut > m.top + plotH - 2 : yOut < m.top + 2;
           drawValueLabel(
             svg,
             fmtNum(v),
             base + off + bw / 2,
-            y1 - 6,
+            yInside ? v < 0 ? y1 - 6 : y1 + 14 : yOut,
             textColor
           );
         }
@@ -34127,7 +34255,7 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
       if (axisOf(s) === side) owners.push(s);
     return owners.length === 1 ? seriesColor(owners[0]) : void 0;
   };
-  const top = reserveHeader(
+  const top2 = reserveHeader(
     svg,
     chart,
     colors,
@@ -34162,7 +34290,7 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
   const [loL, hiL] = extentFor("left");
   const [loR, hiR] = dual ? extentFor("right") : [0, 1];
   const m = {
-    top: top + 8,
+    top: top2 + 8,
     right: dual ? computeLeftMargin(chart.yrlabel, [fmtNum(hiR), fmtNum(loR)]) : 32,
     bottom: 64,
     left: computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)])
@@ -34278,9 +34406,9 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const fillMode = chart.fillMode;
   const total = data.reduce((a, d) => a + d.value, 0);
   const cx = width / 2;
-  const top = topInset + 12;
-  const availH = height - top;
-  const cy = top + availH / 2;
+  const top2 = topInset + 12;
+  const availH = height - top2;
+  const cy = top2 + availH / 2;
   const labels = data.map((d) => {
     const pct = Math.round(d.value / total * 100);
     const nm = chart.noName ? "" : d.label;
@@ -34291,8 +34419,8 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
     return [nm, tail].filter(Boolean).join(" \u2014 ");
   });
   const maxLabelLen = labels.reduce((m, s) => Math.max(m, s.length), 0);
-  const MARGIN11 = 6;
-  const halfW = width / 2 - MARGIN11;
+  const MARGIN12 = 6;
+  const halfW = width / 2 - MARGIN12;
   const rH = availH / 2 - availH * 0.06;
   const labelExtent = 1.27 + 0.06 * maxLabelLen;
   const rLabeled = Math.min(rH, halfW / labelExtent);
@@ -34419,9 +34547,9 @@ function renderRadar(svg, chart, width, height, colors, palette, isDark, textCol
     for (let s = 0; s < seriesCount; s++) allValues.push(seriesValue2(d, s));
   const maxValue = Math.max(...allValues) * 1.15 || 1;
   const cx = width / 2;
-  const top = topInset + 8;
-  const cy = top + (height - top) / 2;
-  const radius = Math.min(width / 2 - 130, (height - top) / 2 - 50);
+  const top2 = topInset + 8;
+  const cy = top2 + (height - top2) / 2;
+  const radius = Math.min(width / 2 - 130, (height - top2) / 2 - 50);
   const angle = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
   const pt = (i, r) => [
     cx + Math.cos(angle(i)) * r,
@@ -34497,9 +34625,9 @@ function renderPolarArea(svg, chart, width, height, palette, isDark, textColor,
   const total = data.reduce((a, d) => a + d.value, 0);
   const maxValue = Math.max(...data.map((d) => d.value)) || 1;
   const cx = width / 2;
-  const top = topInset + 8;
-  const cy = top + (height - top) / 2;
-  const outerR = Math.min(width / 2 - 200, (height - top) / 2 - 40);
+  const top2 = topInset + 8;
+  const cy = top2 + (height - top2) / 2;
+  const outerR = Math.min(width / 2 - 200, (height - top2) / 2 - 40);
   const innerR = outerR * 0.14;
   const segColors = getSegmentColors(palette, n);
   const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
@@ -34549,9 +34677,9 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
   const n = sorted.length;
   if (n === 0) return;
   const fillMode = chart.fillMode;
-  const top = topInset + 8;
-  const bottom = height - 30;
-  const H2 = bottom - top;
+  const top2 = topInset + 8;
+  const bottom2 = height - 30;
+  const H2 = bottom2 - top2;
   const bandH = H2 / n;
   const maxValue = sorted[0].value || 1;
   const sideFont = Math.max(11, Math.min(21, width / 52));
@@ -34608,7 +34736,7 @@ function renderFunnel(svg, chart, width, height, colors, palette, isDark, topIns
     const stroke2 = d.color ?? colors[chart.data.indexOf(d) % colors.length];
     const fill2 = shapeFill(palette, stroke2, isDark, { mode: fillMode });
     const { topW, botW } = bandWidthsAt(plotW, i);
-    const y0 = top + i * bandH;
+    const y0 = top2 + i * bandH;
     const y1 = y0 + bandH;
     const seg = svg.append("polygon").attr(
       "points",
@@ -34697,12 +34825,12 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
     return hslToHex(h, targetS, targetL);
   };
   const rowLabelW = Math.max(0, ...rows.map((r) => measureText(r.label, 13))) + 16;
-  const left = 20 + rowLabelW;
-  const top = topInset + 28;
-  const right = 24;
-  const bottom = 24;
-  const plotW = width - left - right;
-  const plotH = height - top - bottom;
+  const left2 = 20 + rowLabelW;
+  const top2 = topInset + 28;
+  const right2 = 24;
+  const bottom2 = 24;
+  const plotW = width - left2 - right2;
+  const plotH = height - top2 - bottom2;
   const cw = plotW / ncols;
   const ch = plotH / nrows;
   const REF2 = 100;
@@ -34716,26 +34844,26 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
   );
   const rotate = cols.some((c) => measureText(c, 12) > cw * 0.85);
   cols.forEach((c, ci) => {
-    const x = left + ci * cw + cw / 2;
+    const x = left2 + ci * cw + cw / 2;
     const t = svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-col-key").attr("data-filter-value", c).attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(c);
     if (rotate) {
-      t.attr("transform", `translate(${x},${top - 8}) rotate(-40)`).attr(
+      t.attr("transform", `translate(${x},${top2 - 8}) rotate(-40)`).attr(
         "text-anchor",
         "start"
       );
     } else {
-      t.attr("x", x).attr("y", top - 8).attr("text-anchor", "middle");
+      t.attr("x", x).attr("y", top2 - 8).attr("text-anchor", "middle");
     }
   });
   rows.forEach((row, ri) => {
-    svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-row-key").attr("data-filter-value", row.label).attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
+    svg.append("text").attr("class", "dgmo-axis-label").attr("data-filter-attr", "data-row-key").attr("data-filter-value", row.label).attr("x", left2 - 10).attr("y", top2 + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
     row.values.forEach((v, ci) => {
       const t = maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
       const ramp = gradientAt(t);
       const cell = outline ? baseBg : ramp;
       const colLabel = cols[ci] ?? `Col ${ci + 1}`;
       const cellKey = `${row.label} \xB7 ${colLabel}`;
-      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", outline ? ramp : bgColor).attr("stroke-width", outline ? 1.5 : 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
+      const r = svg.append("rect").attr("x", left2 + ci * cw).attr("y", top2 + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", outline ? ramp : bgColor).attr("stroke-width", outline ? 1.5 : 2).attr("data-row-key", row.label).attr("data-col-key", colLabel);
       tagDatum(r, {
         line: row.lineNumber,
         key: cellKey,
@@ -34744,7 +34872,7 @@ function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bg
         color: ramp
       });
       if (!chart.noValue) {
-        const label = svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+        const label = svg.append("text").attr("x", left2 + ci * cw + cw / 2).attr("y", top2 + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(ramp)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
         tagDatum(label, {
           line: row.lineNumber,
           key: cellKey,
@@ -35029,9 +35157,9 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
   const layers = Array.from({ length: maxRank + 1 }, () => []);
   for (const n of node.values()) layers[n.rank].push(n);
   const plotLeft = 16;
-  const top = topInset + 8;
+  const top2 = topInset + 8;
   const plotW = width - plotLeft - 16 - measureText("M", 14);
-  const plotH = height - top - 24;
+  const plotH = height - top2 - 24;
   let valueScale = Infinity;
   for (const layer of layers) {
     const tot = layer.reduce((a, n) => a + n.value, 0);
@@ -35043,7 +35171,7 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
   const placeLayer = (layer) => {
     layer.sort((a, b) => a.order - b.order);
     const totH = layer.reduce((a, n) => a + n.value * valueScale, 0) + (layer.length - 1) * NODE_GAP;
-    let y = top + (plotH - totH) / 2;
+    let y = top2 + (plotH - totH) / 2;
     for (const n of layer) {
       n.h = n.value * valueScale;
       n.x = layerX(n.rank);
@@ -35149,11 +35277,11 @@ function renderChord(svg, chart, width, height, colors, palette, isDark, textCol
   const n = names.length;
   const idx = new Map(names.map((nm, i) => [nm, i]));
   const colorOf2 = (i) => colors[i % colors.length];
-  const top = topInset + 8;
+  const top2 = topInset + 8;
   const cx = width / 2;
-  const cy = top + (height - top) / 2;
+  const cy = top2 + (height - top2) / 2;
   const maxLabel = Math.max(0, ...names.map((nm) => measureText(nm, 14)));
-  const radius = Math.min(width / 2 - maxLabel - 60, (height - top) / 2 - 50);
+  const radius = Math.min(width / 2 - maxLabel - 60, (height - top2) / 2 - 50);
   const angle = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
   const pos = (i) => [
     cx + Math.cos(angle(i)) * radius,
@@ -35598,7 +35726,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         return true;
       case "radar": {
         const groups = std.noLegend ? [] : getSimpleChartLegendGroups(std, colors);
-        const top = injectLegendGroups(
+        const top2 = injectLegendGroups(
           s,
           groups,
           palette,
@@ -35617,7 +35745,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           isDark,
           textColor,
           mutedColor,
-          top
+          top2
         );
         return true;
       }
@@ -35670,7 +35798,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
       return true;
     case "scatter": {
       const groups = ext.noLegend ? [] : getExtendedChartLegendGroups(ext, seriesColors2);
-      const top = injectLegendGroups(
+      const top2 = injectLegendGroups(
         s,
         groups,
         palette,
@@ -35689,7 +35817,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         isDark,
         textColor,
         mutedColor,
-        top
+        top2
       );
       return true;
     }
@@ -35720,7 +35848,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
       return true;
     case "function": {
       const groups = ext.noLegend ? [] : getExtendedChartLegendGroups(ext, seriesColors2);
-      const top = injectLegendGroups(
+      const top2 = injectLegendGroups(
         s,
         groups,
         palette,
@@ -35737,7 +35865,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors2,
         textColor,
         mutedColor,
-        top,
+        top2,
         palette,
         isDark
       );
@@ -36160,17 +36288,17 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
         const maxLeft = p.x - CARD_INSET;
         const minLeft = p.x - CARD_W + CARD_INSET;
         let lane = laneRight.length;
-        let left = Math.max(preferred, minLeft);
+        let left2 = Math.max(preferred, minLeft);
         for (let l = 0; l < laneRight.length; l++) {
           const want = Math.max(preferred, laneRight[l] + FAN_GAP, minLeft);
           if (want <= maxLeft) {
             lane = l;
-            left = want;
+            left2 = want;
             break;
           }
         }
         p.lane = lane;
-        p.left = Math.max(6, left);
+        p.left = Math.max(6, left2);
         laneRight[lane] = p.left + CARD_W;
       }
     }
@@ -36302,8 +36430,8 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   }
   const geo = placed.map((p) => {
     const near = p.side === "above" ? spineY - laneNear(p) : spineY + laneNear(p);
-    const top = p.side === "above" ? near - p.cardH : near;
-    return { p, near, top };
+    const top2 = p.side === "above" ? near - p.cardH : near;
+    return { p, near, top: top2 };
   });
   const leaderCrossesBox = (owner, near) => {
     const lo = Math.min(spineY, near);
@@ -36322,9 +36450,9 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
     applyHoverHooks(leader, p);
   }
   let shelfClipSeq = 0;
-  for (const { p, top } of geo) {
-    const left = p.left;
-    const cardG = svg.append("g").attr("class", "dgmo-event-card").attr("transform", `translate(${left}, ${top})`).attr("data-line-number", p.lineNumber);
+  for (const { p, top: top2 } of geo) {
+    const left2 = p.left;
+    const cardG = svg.append("g").attr("class", "dgmo-event-card").attr("transform", `translate(${left2}, ${top2})`).attr("data-line-number", p.lineNumber);
     applyHoverHooks(cardG, p);
     if (p.kind === "era") {
       cardG.attr("data-era", p.era.name).attr("data-era-collapsed", "true");
@@ -37014,27 +37142,27 @@ function renderFigureBody(fig, view, parts, partColor, emphKey, form, palette, i
   const muscleFill = mix(palette.bg, palette.border, 0.7);
   const seam = palette.bg;
   const outlineStroke = palette.textMuted;
-  const gid = `body-skin-${vx}-${vy}`;
+  const gid2 = `body-skin-${vx}-${vy}`;
   defs.push(
-    `<linearGradient id="${gid}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${mix(palette.surface, palette.bg, 0.4)}"/><stop offset="1" stop-color="${mix(palette.border, palette.bg, 0.3)}"/></linearGradient>`
+    `<linearGradient id="${gid2}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${mix(palette.surface, palette.bg, 0.4)}"/><stop offset="1" stop-color="${mix(palette.border, palette.bg, 0.3)}"/></linearGradient>`
   );
   let out = "";
   if (form === "skin") {
-    out += `<path d="${fig.outline}" fill="url(#${gid})"/>`;
+    out += `<path d="${fig.outline}" fill="url(#${gid2})"/>`;
     for (const d of fig.headPaths) {
-      out += `<path d="${d}" fill="url(#${gid})" stroke="${outlineStroke}" stroke-width="2.5"/>`;
+      out += `<path d="${d}" fill="url(#${gid2})" stroke="${outlineStroke}" stroke-width="2.5"/>`;
     }
     const hairFill = mix(palette.text, palette.bg, 0.6);
     for (const d of fig.hairPaths) {
       out += `<path d="${d}" fill="${hairFill}" stroke="${outlineStroke}" stroke-width="1.5"/>`;
     }
   } else {
-    out += `<path d="${fig.outline}" fill="url(#${gid})"/>`;
+    out += `<path d="${fig.outline}" fill="url(#${gid2})"/>`;
     for (const d of fig.base) {
       out += `<path d="${d}" fill="${muscleFill}" fill-opacity="0.55" stroke="${seam}" stroke-width="1"/>`;
     }
     for (const d of fig.headPaths) {
-      out += `<path d="${d}" fill="url(#${gid})" stroke="${outlineStroke}" stroke-width="2.5"/>`;
+      out += `<path d="${d}" fill="url(#${gid2})" stroke="${outlineStroke}" stroke-width="2.5"/>`;
     }
     for (const d of fig.hairPaths) {
       out += `<path d="${d}" fill="none" stroke="${outlineStroke}" stroke-width="2.5"/>`;
@@ -37107,10 +37235,10 @@ function gutterLabels(r, palette) {
   const cx = vx + vw / 2;
   const list = [...r.anchors.values()];
   const band = vw * 0.1;
-  const left = list.filter((a) => a.x < cx - band);
-  const right = list.filter((a) => a.x > cx + band);
+  const left2 = list.filter((a) => a.x < cx - band);
+  const right2 = list.filter((a) => a.x > cx + band);
   const mid = list.filter((a) => a.x >= cx - band && a.x <= cx + band).sort((a, b) => a.y - b.y);
-  for (const a of mid) (left.length <= right.length ? left : right).push(a);
+  for (const a of mid) (left2.length <= right2.length ? left2 : right2).push(a);
   let labels = "";
   const place = (arr, side) => {
     const gx = side === "L" ? vx - 14 : vx + vw + 14;
@@ -37130,8 +37258,8 @@ function gutterLabels(r, palette) {
       }
     }
   };
-  place(left, "L");
-  place(right, "R");
+  place(left2, "L");
+  place(right2, "R");
   return labels;
 }
 function renderBody2(container, parsed, palette, _isDark, _onClickItem, exportDims, tagOverride) {
@@ -37202,17 +37330,17 @@ function renderBody2(container, parsed, palette, _isDark, _onClickItem, exportDi
       const aR = fR.anchors.get(nm);
       if (!aL && !aR) continue;
       seen.add(nm);
-      const left = aL ? mapL(nearestCenter(aL, fL.vx + fL.vw)) : void 0;
-      const right = aR ? mapR(nearestCenter(aR, fR.vx)) : void 0;
-      const ys = [left?.y, right?.y].filter((v) => v != null);
+      const left2 = aL ? mapL(nearestCenter(aL, fL.vx + fL.vw)) : void 0;
+      const right2 = aR ? mapR(nearestCenter(aR, fR.vx)) : void 0;
+      const ys = [left2?.y, right2?.y].filter((v) => v != null);
       items.push({
         name: partLabel(part),
         note: part.notes.length ? part.notes[0] : "",
         color: (aL ?? aR).color,
         emph: (aL ?? aR).emph,
         line: part.lineNumber,
-        ...left && { left },
-        ...right && { right },
+        ...left2 && { left: left2 },
+        ...right2 && { right: right2 },
         y: ys.reduce((s, v) => s + v, 0) / ys.length
       });
     }
@@ -37408,25 +37536,25 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
     for (const n of sorted) {
       const p = pos.get(n.key);
       const w = label.get(n.key).lw + SHELF_PAD * 2;
-      const left = p.x - w / 2;
+      const left2 = p.x - w / 2;
       let row = rowRight.length;
       for (let l = 0; l < rowRight.length; l++)
-        if (rowRight[l] + shelfGap <= left) {
+        if (rowRight[l] + shelfGap <= left2) {
           row = l;
           break;
         }
-      const top = bandTop + row * (SHELF_H + ROW_GAP);
-      rowRight[row] = left + w;
+      const top2 = bandTop + row * (SHELF_H + ROW_GAP);
+      rowRight[row] = left2 + w;
       placements.push({
         node: n,
         kind: "msg",
         x: p.x,
-        y: top,
+        y: top2,
         anchor: "start",
-        shelfLeft: Math.max(4, left),
-        shelfTop: top,
+        shelfLeft: Math.max(4, left2),
+        shelfTop: top2,
         shelfW: w,
-        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: top }
+        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: top2 }
       });
       const stack = above.get(n.key) ?? [];
       stack.forEach(
@@ -37689,15 +37817,15 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byK
       let ty = pl.y + 4;
       let anchor = pl.anchor;
       if (pl.shelfW != null) {
-        const left = pl.shelfLeft;
-        const top = pl.shelfTop;
+        const left2 = pl.shelfLeft;
+        const top2 = pl.shelfTop;
         const w = pl.shelfW;
         const clipId = `dgmo-vc-shelf-${shelfSeq++}`;
-        g.append("clipPath").attr("id", clipId).append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE2);
-        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE2).attr("fill", gh ? palette.bg : mix(c, palette.bg, SHELF_TINT2)).attr("data-branch", n.branch).attr("opacity", gh ? 0.5 : 1);
-        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_LIP2).attr("clip-path", `url(#${clipId})`).attr("fill", c).attr("data-branch", n.branch).attr("opacity", gh ? 0.4 : 1);
-        tx = left + SHELF_PAD;
-        ty = top + SHELF_H / 2 + 4;
+        g.append("clipPath").attr("id", clipId).append("rect").attr("x", left2).attr("y", top2).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE2);
+        g.append("rect").attr("x", left2).attr("y", top2).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE2).attr("fill", gh ? palette.bg : mix(c, palette.bg, SHELF_TINT2)).attr("data-branch", n.branch).attr("opacity", gh ? 0.5 : 1);
+        g.append("rect").attr("x", left2).attr("y", top2).attr("width", w).attr("height", SHELF_LIP2).attr("clip-path", `url(#${clipId})`).attr("fill", c).attr("data-branch", n.branch).attr("opacity", gh ? 0.4 : 1);
+        tx = left2 + SHELF_PAD;
+        ty = top2 + SHELF_H / 2 + 4;
         anchor = "start";
       }
       const t = g.append("text").attr("x", tx).attr("y", ty).attr("text-anchor", anchor).attr("font-size", 12).attr("data-branch", n.branch).attr("opacity", gh ? 0.6 : 1);
@@ -37836,18 +37964,18 @@ function centerHeavyChildren(node) {
   const weighted = node.children.map((child) => ({ child, weight: countDescendants(child) })).sort((a, b) => b.weight - a.weight);
   const result = new Array(weighted.length);
   const mid = Math.floor((weighted.length - 1) / 2);
-  let left = mid;
-  let right = mid;
+  let left2 = mid;
+  let right2 = mid;
   for (let i = 0; i < weighted.length; i++) {
     const w = weighted[i];
     if (i === 0) {
       result[mid] = w.child;
     } else if (i % 2 === 1) {
-      right++;
-      result[right] = w.child;
+      right2++;
+      result[right2] = w.child;
     } else {
-      left--;
-      result[left] = w.child;
+      left2--;
+      result[left2] = w.child;
     }
   }
   node.children = result;
@@ -38182,8 +38310,8 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
     }
   }
   const screenRect = (ax, ay, w, h2) => {
-    const { left, top } = screenTopLeft(ax, ay, w, h2);
-    return { left, top, right: left + w, bottom: top + h2 };
+    const { left: left2, top: top2 } = screenTopLeft(ax, ay, w, h2);
+    return { left: left2, top: top2, right: left2 + w, bottom: top2 + h2 };
   };
   const growBBox = (r) => {
     if (r.left < minX) minX = r.left;
@@ -38397,11 +38525,11 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, expan
     let descMaxX = -Infinity;
     let descMinY = Infinity;
     let descMaxY = -Infinity;
-    const growDesc = (left, top, right, bottom) => {
-      if (left < descMinX) descMinX = left;
-      if (right > descMaxX) descMaxX = right;
-      if (top < descMinY) descMinY = top;
-      if (bottom > descMaxY) descMaxY = bottom;
+    const growDesc = (left2, top2, right2, bottom2) => {
+      if (left2 < descMinX) descMinX = left2;
+      if (right2 > descMaxX) descMaxX = right2;
+      if (top2 < descMinY) descMinY = top2;
+      if (bottom2 > descMaxY) descMaxY = bottom2;
     };
     for (const desc of allDesc) {
       const innerBounds = containerBoundsMap.get(desc.data.orgNode.id);
@@ -38773,11 +38901,12 @@ function extractExportSvg(container, theme, palette) {
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
   svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
-  return svgEl.outerHTML;
+  return serializeSvg(svgEl);
 }
 var init_export_container = __esm({
   "src/utils/export-container.ts"() {
     "use strict";
+    init_svg_serialize();
     init_fonts();
   }
 });
@@ -39739,16 +39868,16 @@ function layoutSitemap(parsed, hiddenCounts, activeTagGroup, hiddenAttributes, e
   let totalWidth = 0;
   let totalHeight = 0;
   for (const node of layoutNodes) {
-    const right = node.x + node.width / 2;
-    const bottom = node.y + node.height;
-    if (right > totalWidth) totalWidth = right;
-    if (bottom > totalHeight) totalHeight = bottom;
+    const right2 = node.x + node.width / 2;
+    const bottom2 = node.y + node.height;
+    if (right2 > totalWidth) totalWidth = right2;
+    if (bottom2 > totalHeight) totalHeight = bottom2;
   }
   for (const c of layoutContainers) {
-    const right = c.x + c.width;
-    const bottom = c.y + c.height;
-    if (right > totalWidth) totalWidth = right;
-    if (bottom > totalHeight) totalHeight = bottom;
+    const right2 = c.x + c.width;
+    const bottom2 = c.y + c.height;
+    if (right2 > totalWidth) totalWidth = right2;
+    if (bottom2 > totalHeight) totalHeight = bottom2;
   }
   for (const edge of layoutEdges) {
     for (const p of edge.points) {
@@ -40378,7 +40507,7 @@ async function renderSitemapForExport(content, theme, palette) {
   }
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
-  const svgHtml = svgEl.outerHTML;
+  const svgHtml = serializeSvg(svgEl);
   document.body.removeChild(container);
   return svgHtml;
 }
@@ -40386,6 +40515,7 @@ var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_
 var init_renderer6 = __esm({
   "src/sitemap/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_tag_groups();
     init_parsing();
     init_inline_header();
@@ -40819,7 +40949,7 @@ function renderKanbanForExport(content, theme, palette) {
     exportMode: true
   });
   const svgEl = container.querySelector("svg");
-  return svgEl?.outerHTML ?? "";
+  return svgEl ? serializeSvg(svgEl) : "";
 }
 function drawSwimlaneIcon(parent, x, y, isActive, palette) {
   const iconG = parent.append("g").attr("class", "kanban-swimlane-icon").attr("transform", `translate(${x}, ${y})`);
@@ -41154,6 +41284,7 @@ var DIAGRAM_PADDING3, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_M
 var init_renderer7 = __esm({
   "src/kanban/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_tag_groups();
     init_parsing();
     init_fonts();
@@ -42667,7 +42798,7 @@ function renderERDiagramForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -42676,6 +42807,7 @@ var DIAGRAM_PADDING5, MAX_SCALE4, TABLE_FONT_SIZE2, COLUMN_FONT_SIZE2, EDGE_LABE
 var init_renderer9 = __esm({
   "src/er/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_tag_groups();
     init_parsing();
     init_fonts();
@@ -42785,6 +42917,16 @@ var layout_exports5 = {};
 __export(layout_exports5, {
   layoutSketch: () => layoutSketch
 });
+function resolveAutoFlags(f = {}) {
+  return {
+    normalizeOrigin: f.normalizeOrigin ?? true,
+    sortRootsBySource: f.sortRootsBySource ?? true,
+    resolveOverlap: f.resolveOverlap ?? true,
+    groupCollisionAsRect: f.groupCollisionAsRect ?? true,
+    flowPlaceUnpositioned: f.flowPlaceUnpositioned ?? true,
+    avoidEdges: f.avoidEdges ?? true
+  };
+}
 function unitRect(c, r) {
   return { c, r, w: SKETCH_SEP, h: SKETCH_SEP };
 }
@@ -42817,7 +42959,7 @@ function nearestFree(base, occupied) {
   }
   return { c: base.c, r: base.r };
 }
-function layoutChildren(box, nodesById, warn) {
+function layoutChildren(box, nodesById, warn, flags) {
   const occupied = [];
   const children = [];
   const pending = [];
@@ -42829,13 +42971,17 @@ function layoutChildren(box, nodesById, warn) {
       continue;
     }
     const target = unitRect(node.at.c, node.at.r);
-    const spot = nearestFree(target, occupied);
+    const spot = flags.resolveOverlap ? nearestFree(target, occupied) : { c: node.at.c, r: node.at.r };
     if (spot.c !== node.at.c || spot.r !== node.at.r) {
       warn(node.lineNumber, node.label);
     }
     occupied.push(unitRect(spot.c, spot.r));
     children.push({ node, c: spot.c, r: spot.r });
   }
+  if (!flags.flowPlaceUnpositioned) {
+    for (const node of pending) children.push({ node, c: 0, r: 0 });
+    pending.length = 0;
+  }
   let flowRow = occupied.length > 0 ? Math.max(...occupied.map((o) => o.r)) + SKETCH_SEP : 0;
   let flowCol = 0;
   const wrapAt = Math.max(
@@ -42882,6 +43028,7 @@ function layoutSketch(parsed, options = {}) {
       )
     );
   };
+  const flags = resolveAutoFlags(options.autoLayout);
   const collapsed = collapseSketch(parsed, options.collapsedBoxes);
   const nodesById = new Map(collapsed.nodes.map((n) => [n.id, n]));
   const padHsX = SKETCH_GEOMETRY.boxPadPx / SKETCH_HALF_SLOT_X;
@@ -42890,10 +43037,39 @@ function layoutSketch(parsed, options = {}) {
   const boxLocal = /* @__PURE__ */ new Map();
   const inExpandedBox = /* @__PURE__ */ new Set();
   for (const box of collapsed.boxes) {
-    const local = layoutChildren(box, nodesById, overlapWarn);
+    const local = layoutChildren(box, nodesById, overlapWarn, flags);
     boxLocal.set(box.id, local);
     for (const child of local.children) inExpandedBox.add(child.node.id);
   }
+  const allNodesById = new Map(parsed.nodes.map((n) => [n.id, n]));
+  const noWarn = () => {
+  };
+  const virtualLocal = /* @__PURE__ */ new Map();
+  for (const box of collapsed.virtualBoxes) {
+    virtualLocal.set(box.id, layoutChildren(box, allNodesById, noWarn, flags));
+  }
+  const footWs = SKETCH_FOOT_W / SKETCH_HALF_SLOT_X;
+  const footHs = SKETCH_FOOT_H / SKETCH_HALF_SLOT_Y;
+  const virtualCardSpot = (boxId, spot) => {
+    const local = virtualLocal.get(boxId);
+    if (local.children.length === 0) return { c: spot.c, r: spot.r };
+    let minC = Infinity;
+    let minR = Infinity;
+    let maxC = -Infinity;
+    let maxR = -Infinity;
+    for (const ch of local.children) {
+      minC = Math.min(minC, ch.c);
+      minR = Math.min(minR, ch.r);
+      maxC = Math.max(maxC, ch.c + footWs);
+      maxR = Math.max(maxR, ch.r + footHs);
+    }
+    const cx = spot.c + (minC + maxC) / 2;
+    const cy = spot.r + (minR + maxR) / 2 + (padHsY - bandHs) / 2;
+    return {
+      c: Math.round(cx - footWs / 2),
+      r: Math.round(cy - footHs / 2)
+    };
+  };
   const rootUnits = [];
   for (const node of collapsed.nodes) {
     if (!inExpandedBox.has(node.id)) rootUnits.push({ kind: "shape", node });
@@ -42904,14 +43080,27 @@ function layoutSketch(parsed, options = {}) {
   for (const box of collapsed.boxes) {
     rootUnits.push({ kind: "box", box });
   }
-  rootUnits.sort((a, b) => {
-    const la = a.kind === "shape" ? a.node.lineNumber : a.box.lineNumber;
-    const lb = b.kind === "shape" ? b.node.lineNumber : b.box.lineNumber;
-    return la - lb;
-  });
+  const lineOf = (u) => u.kind === "shape" ? u.node.lineNumber : u.box.lineNumber;
+  const atOf = (u) => u.kind === "shape" ? u.node.at : u.box.at;
+  if (flags.sortRootsBySource) {
+    rootUnits.sort((a, b) => lineOf(a) - lineOf(b));
+  } else {
+    rootUnits.sort((a, b) => {
+      const aa = atOf(a);
+      const ba = atOf(b);
+      if (aa && ba) {
+        return aa.r - ba.r || aa.c - ba.c || lineOf(a) - lineOf(b);
+      }
+      if (aa) return -1;
+      if (ba) return 1;
+      return lineOf(a) - lineOf(b);
+    });
+  }
   const rectFor = (unit, c, r) => {
-    if (unit.kind === "box") {
-      const local = boxLocal.get(unit.box.id);
+    if (unit.kind !== "shape" && flags.groupCollisionAsRect) {
+      const local = (unit.kind === "box" ? boxLocal : virtualLocal).get(
+        unit.box.id
+      );
       return {
         c: c + local.extent.c - padHsX,
         r: r + local.extent.r - bandHs,
@@ -42925,26 +43114,31 @@ function layoutSketch(parsed, options = {}) {
   const placedAt = /* @__PURE__ */ new Map();
   const pending = [];
   for (const unit of rootUnits) {
-    const at = unit.kind === "shape" ? unit.node.at : unit.box.at;
+    const at = atOf(unit);
     if (at === null) {
       pending.push(unit);
       continue;
     }
     const base = rectFor(unit, at.c, at.r);
     let spot = { c: at.c, r: at.r };
-    if (collidesAny(base, occupied)) {
+    if (flags.resolveOverlap && unit.kind === "shape" && collidesAny(base, occupied)) {
       const freed = nearestFree(base, occupied);
       spot = {
         c: at.c + (freed.c - base.c),
         r: at.r + (freed.r - base.r)
       };
-      const line11 = unit.kind === "shape" ? unit.node.lineNumber : unit.box.lineNumber;
-      const label = unit.kind === "shape" ? unit.node.label : unit.box.label;
-      overlapWarn(line11, label);
+      overlapWarn(unit.node.lineNumber, unit.node.label);
     }
     occupied.push(rectFor(unit, spot.c, spot.r));
     placedAt.set(unit, spot);
   }
+  if (!flags.flowPlaceUnpositioned) {
+    for (const unit of pending) {
+      occupied.push(rectFor(unit, 0, 0));
+      placedAt.set(unit, { c: 0, r: 0 });
+    }
+    pending.length = 0;
+  }
   let flowRow = occupied.length > 0 ? Math.ceil(Math.max(...occupied.map((o) => o.r + o.h))) : 0;
   let flowCol = 0;
   const wrapAt = Math.max(
@@ -42971,8 +43165,10 @@ function layoutSketch(parsed, options = {}) {
     const spot = placedAt.get(u);
     return rectFor(u, spot.c, spot.r);
   });
-  const cMin = allRects.length > 0 ? Math.min(...allRects.map((r) => r.c)) : 0;
-  const rMin = allRects.length > 0 ? Math.min(...allRects.map((r) => r.r)) : 0;
+  const liveCMin = allRects.length > 0 ? Math.min(...allRects.map((r) => r.c)) : 0;
+  const liveRMin = allRects.length > 0 ? Math.min(...allRects.map((r) => r.r)) : 0;
+  const cMin = flags.normalizeOrigin ? liveCMin : Math.min(options.frozenOrigin?.c ?? liveCMin, liveCMin);
+  const rMin = flags.normalizeOrigin ? liveRMin : Math.min(options.frozenOrigin?.r ?? liveRMin, liveRMin);
   const toPx = (c, r) => ({
     x: (c - cMin) * SKETCH_HALF_SLOT_X,
     y: (r - rMin) * SKETCH_HALF_SLOT_Y
@@ -42997,14 +43193,15 @@ function layoutSketch(parsed, options = {}) {
         h: SKETCH_FOOT_H
       });
     } else if (unit.kind === "virtual") {
-      const { x, y } = toPx(spot.c, spot.r);
+      const cardSpot = virtualCardSpot(unit.box.id, spot);
+      const { x, y } = toPx(cardSpot.c, cardSpot.r);
       nodes.push({
         id: unit.box.id,
         label: unit.box.label,
         shape: "rectangle",
         metadata: unit.box.metadata,
         lineNumber: unit.box.lineNumber,
-        slot: spot,
+        slot: cardSpot,
         x,
         y,
         w: SKETCH_FOOT_W,
@@ -43061,7 +43258,13 @@ function layoutSketch(parsed, options = {}) {
       });
     }
   }
-  {
+  if (flags.avoidEdges) {
+    const authored = /* @__PURE__ */ new Set();
+    for (const unit of rootUnits) {
+      if (atOf(unit) !== null) {
+        authored.add(unit.kind === "shape" ? unit.node.id : unit.box.id);
+      }
+    }
     const centerOf = (id) => {
       const n = nodes.find((nd) => nd.id === id);
       if (n) return { x: n.x + n.w / 2, y: n.y + n.h / 2 };
@@ -43095,6 +43298,7 @@ function layoutSketch(parsed, options = {}) {
       let moved = false;
       for (const n of nodes) {
         if (n.boxLabel) continue;
+        if (authored.has(n.id)) continue;
         for (const e of collapsed.edges) {
           if (e.sourceId === n.id || e.targetId === n.id) continue;
           const a = centerOf(e.sourceId);
@@ -43145,7 +43349,8 @@ function layoutSketch(parsed, options = {}) {
     edges: collapsed.edges,
     width,
     height,
-    diagnostics
+    diagnostics,
+    origin: { c: cMin, r: rMin }
   };
 }
 var init_layout5 = __esm({
@@ -43328,7 +43533,7 @@ function drawMarkdownBlock(container, text, opts) {
     const textEl = container.append("text").attr("x", line11.x).attr("y", y).attr("font-size", fontSize);
     let cursorX = line11.x;
     const segs = line11.segments.slice();
-    if (clamped && isLast) {
+    if (clamped && isLast && !opts.noEllipsis) {
       segs.push({ text: ELLIPSIS, bold: false });
     }
     for (const seg of segs) {
@@ -43342,7 +43547,11 @@ function drawMarkdownBlock(container, text, opts) {
       cursorX += w;
     }
   }
-  return shown.length * lineHeight;
+  return {
+    height: shown.length * lineHeight,
+    shown: shown.length,
+    total: visualLines.length
+  };
 }
 var BOLD_WIDTH_FACTOR2, INDENT_PX, BULLET_HANG_PX, ELLIPSIS, BULLET;
 var init_markdown_card = __esm({
@@ -43395,14 +43604,6 @@ function drawTypeBadge(g, kind, color, bx, by) {
       return;
   }
 }
-function metaRows(metadata, tagGroups) {
-  const rows = [];
-  for (const grp of tagGroups) {
-    const v = metadata[tagAttrKey(grp.name)];
-    if (v !== void 0) rows.push([grp.name, v]);
-  }
-  return rows;
-}
 function fitWrapped(label, maxWidth, maxFont = CARD_LABEL_MAX, minFont = CARD_LABEL_MIN, maxLines = 2) {
   for (let fs = maxFont; fs >= minFont; fs--) {
     const lines2 = wrapTextToWidth(label, fs, maxWidth, { hardBreak: true });
@@ -43421,7 +43622,8 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
   const {
     activeTagGroup,
     exportMode = false,
-    hideDescriptions = false
+    hideDescriptions = false,
+    splitCardIds
   } = options;
   const hideDesc = hideDescriptions || parsed.options.noDescriptions;
   const neutralFill = parsed.options.fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(palette.textMuted, palette.bg, 12);
@@ -43686,7 +43888,7 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
       colorsFor(node.metadata),
       palette,
       isDark,
-      hideDesc ? [] : tagGroups
+      !hideDesc && (splitCardIds?.includes(node.id) ?? false)
     );
   }
   const labelLayer = root.append("g").attr("class", "sk-edge-labels");
@@ -43713,7 +43915,7 @@ function drawBoxFrame(layer, box, colors, palette) {
     g.append("text").attr("x", box.x + box.w / 2).attr("y", startY + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fit.fontSize).attr("font-weight", 800).attr("fill", palette.text).attr("opacity", BAND_LABEL_OPACITY).text(fit.lines[li]);
   }
 }
-function drawNode(layer, node, colors, palette, isDark, tagGroups) {
+function drawNode(layer, node, colors, palette, isDark, splitCard) {
   void isDark;
   const g = layer.append("g").attr("class", node.isCollapsedBox ? "sk-node sk-box-collapsed" : "sk-node").attr("transform", `translate(${node.x},${node.y})`).attr("data-node-id", node.id).attr("data-line-number", node.lineNumber);
   for (const [k, v] of Object.entries(node.metadata)) {
@@ -43730,12 +43932,11 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
       g.append("text").attr("x", 10).attr("y", 20 + i * lineHeight).attr("font-size", NOTE_FONT_SIZE2).attr("fill", colors.text).text(line11);
     });
   } else {
-    const rows = node.isCollapsedBox ? [] : metaRows(node.metadata, tagGroups);
     const badge = node.shape !== "rectangle";
     const labelInset = badge ? 22 : 0;
     const solidLike = colors.stroke === colors.fill;
     const ruleColor = solidLike ? colors.text : colors.stroke;
-    if (node.description && !node.isCollapsedBox) {
+    if (!node.isCollapsedBox && (node.description || splitCard)) {
       const fitH = fitWrapped(
         node.label,
         node.w - 24 - labelInset,
@@ -43756,33 +43957,37 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
         headerHeight: CARD_HEADER_H
       });
       g.append("line").attr("x1", 0).attr("y1", CARD_HEADER_H).attr("x2", node.w).attr("y2", CARD_HEADER_H).attr("stroke", ruleColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
-      const inset = 12;
-      const bodyGap = 8;
-      const lh = CARD_META_FONT + 4;
-      const avail = node.h - CARD_HEADER_H - bodyGap - 8;
-      const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${CARD_HEADER_H + bodyGap})`);
-      drawMarkdownBlock(body, node.description, {
-        width: node.w - inset * 2,
-        fontSize: CARD_META_FONT,
-        lineHeight: lh,
-        color: colors.text,
-        // match the header label (contrast-aware in solid)
-        linkColor: colors.text,
-        maxLines: Math.max(1, Math.floor(avail / lh))
-      });
+      if (node.description) {
+        const inset = 12;
+        const bodyGap = 8;
+        const lh = CARD_META_FONT + 4;
+        const avail = node.h - CARD_HEADER_H - bodyGap - 8;
+        const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${CARD_HEADER_H + bodyGap})`);
+        const block = drawMarkdownBlock(body, node.description, {
+          width: node.w - inset * 2,
+          fontSize: CARD_META_FONT,
+          lineHeight: lh,
+          color: colors.text,
+          // match the header label (contrast-aware in solid)
+          linkColor: colors.text,
+          maxLines: Math.max(1, Math.floor(avail / lh)),
+          noEllipsis: true
+        });
+        if (block.total > block.shown) {
+          g.append("text").attr("class", "sk-desc-more").attr("x", node.w - 8).attr("y", node.h - 5).attr("text-anchor", "end").attr("font-size", 9).attr("fill", palette.textMuted).attr("data-line-number", node.lineNumber).style("cursor", "pointer").text(`+${block.total - block.shown} more in source`);
+        }
+      }
       if (badge) {
         drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
       }
       return;
     }
-    const headerH = rows.length ? CARD_HEADER_H : node.h;
-    const fillTitle = rows.length === 0;
     const fit = fitWrapped(
       node.label,
       node.w - 24 - labelInset,
-      fillTitle ? CARD_TITLE_MAX : CARD_LABEL_MAX,
+      CARD_TITLE_MAX,
       CARD_LABEL_MIN,
-      fillTitle ? 3 : 2
+      3
     );
     renderNodeCard(g, {
       width: node.w,
@@ -43795,18 +44000,7 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
       labelLines: fit.lines,
       labelColor: colors.text,
       labelFontSize: fit.fontSize,
-      headerHeight: headerH,
-      ...rows.length ? {
-        meta: {
-          rows,
-          fontSize: CARD_META_FONT,
-          lineHeight: CARD_META_FONT + 5,
-          separatorGap: 8,
-          separatorColor: ruleColor,
-          textColor: solidLike ? colors.text : palette.text,
-          keyX: 12
-        }
-      } : {}
+      headerHeight: node.h
     });
     if (badge) {
       drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
@@ -43842,8 +44036,8 @@ function assignEdgeSides(edges, rectById) {
       return { s: below ? "B" : "T", t: below ? "T" : "B" };
     }
     if (yOverlap >= 0 && yOverlap >= xOverlap) {
-      const right = dx >= 0;
-      return { s: right ? "R" : "L", t: right ? "L" : "R" };
+      const right2 = dx >= 0;
+      return { s: right2 ? "R" : "L", t: right2 ? "L" : "R" };
     }
     return { s: facing(dx, dy), t: facing(-dx, -dy) };
   });
@@ -44059,6 +44253,8 @@ function sketchEdgeGeometry(layout, offsets) {
     const n = normalOf(side);
     return 1 - (n.x * dx + n.y * dy) / len;
   };
+  const W_BACK = 2.6;
+  const backFacingCost = (from, to, side) => W_BACK * Math.max(0, facingCost(from, to, side) - 1);
   const ctx = layout.edges.map((edge) => {
     const source = rectById.get(edge.sourceId);
     const target = rectById.get(edge.targetId);
@@ -44093,6 +44289,7 @@ function sketchEdgeGeometry(layout, offsets) {
   const W_NODE = 100;
   const W_EDGE = 8;
   const W_PORT = 1.5;
+  const W_PORT_SAME = 0.6;
   const isBox = (id) => portsById.has(id);
   const portClashCount = (self, s, t) => {
     const e = layout.edges[self];
@@ -44110,6 +44307,44 @@ function sketchEdgeGeometry(layout, offsets) {
     }
     return n;
   };
+  const portStackCount = (self, _s, t) => {
+    const e = layout.edges[self];
+    if (isBox(e.targetId)) return 0;
+    let n = 0;
+    for (let j = 0; j < layout.edges.length; j++) {
+      if (j === self) continue;
+      const ej = layout.edges[j];
+      if (ej.targetId === e.targetId && ej.sourceId !== e.sourceId && // not reciprocal
+      chosen[j].t === t)
+        n++;
+    }
+    return n;
+  };
+  const W_TURN = 0.55;
+  const W_SCURVE = 1.8;
+  const CURVE_STRAIGHT = 0.35;
+  const curveCostPoly = (pts) => {
+    let totalTurn = 0;
+    let inflections = 0;
+    let prevSign = 0;
+    for (let i = 1; i < pts.length - 1; i++) {
+      const ax = pts[i].x - pts[i - 1].x;
+      const ay = pts[i].y - pts[i - 1].y;
+      const bx = pts[i + 1].x - pts[i].x;
+      const by = pts[i + 1].y - pts[i].y;
+      const cross = ax * by - ay * bx;
+      const dot = ax * bx + ay * by;
+      if (ax === 0 && ay === 0) continue;
+      if (bx === 0 && by === 0) continue;
+      totalTurn += Math.abs(Math.atan2(cross, dot));
+      const sign = cross > 1e-6 ? 1 : cross < -1e-6 ? -1 : 0;
+      if (sign !== 0) {
+        if (prevSign !== 0 && sign !== prevSign) inflections++;
+        prevSign = sign;
+      }
+    }
+    return totalTurn * W_TURN + inflections * W_SCURVE;
+  };
   const scoreOf = (c, g, poly, self, polys2, s, t) => {
     let edgeCross = 0;
     for (let j = 0; j < polys2.length; j++) {
@@ -44117,7 +44352,7 @@ function sketchEdgeGeometry(layout, offsets) {
       const pj = polys2[j];
       if (pj) edgeCross += polyCrossings(poly, pj);
     }
-    return pathCrossings(g, c.obstacleRects) * W_NODE + edgeCross * W_EDGE + portClashCount(self, s, t) * W_PORT + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t);
+    return pathCrossings(g, c.obstacleRects) * W_NODE + edgeCross * W_EDGE + portClashCount(self, s, t) * W_PORT + portStackCount(self, s, t) * W_PORT_SAME + curveCostPoly(poly) + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t) + backFacingCost(c.source, c.target, s) + backFacingCost(c.target, c.source, t);
   };
   const chosen = layout.edges.map(
     (_, i) => sides[i] ?? { s: "R", t: "L" }
@@ -44142,7 +44377,8 @@ function sketchEdgeGeometry(layout, offsets) {
       if (!c || !g || !p) continue;
       const cur = chosen[i];
       const curScore = scoreOf(c, g, p, i, polys, cur.s, cur.t);
-      if (curScore < W_EDGE && portClashCount(i, cur.s, cur.t) === 0) continue;
+      if (curScore < W_EDGE && portClashCount(i, cur.s, cur.t) === 0 && portStackCount(i, cur.s, cur.t) === 0 && curveCostPoly(p) < CURVE_STRAIGHT && backFacingCost(c.source, c.target, cur.s) === 0 && backFacingCost(c.target, c.source, cur.t) === 0)
+        continue;
       let bestScore = curScore;
       let bestG = g;
       let bestP = p;
@@ -44219,8 +44455,8 @@ var init_renderer10 = __esm({
     NODE_STROKE_WIDTH2 = 2;
     EDGE_STROKE_WIDTH2 = 2;
     EDGE_HIT_WIDTH = 18;
-    ARROWHEAD_W2 = 12;
-    ARROWHEAD_H2 = 8;
+    ARROWHEAD_W2 = 18;
+    ARROWHEAD_H2 = 12;
     DASH = "6 3";
     BAND_LABEL_FONT_SIZE = 19;
     BAND_LABEL_OPACITY = 0.55;
@@ -44587,6 +44823,18 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       for (let li = 0; li < fitted.lines.length; li++) {
         groupG.append("text").attr("class", "bl-group-label").attr("x", group.x).attr("y", group.y - totalH / 2 + lineH / 2 + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", palette.text).text(fitted.lines[li]);
       }
+      if (group.childCount !== void 0 && group.childCount > 0) {
+        const chipFont = Math.max(9, sMinNodeFontSize - 2);
+        const chipH = chipFont + 7;
+        const chipW = Math.max(
+          chipH,
+          String(group.childCount).length * chipFont * 0.62 + 10
+        );
+        const chipCx = gx + group.width - chipW / 2 - 6;
+        const chipCy = gy + chipH / 2 + 6;
+        groupG.append("rect").attr("class", "bl-collapse-count").attr("x", chipCx - chipW / 2).attr("y", chipCy - chipH / 2).attr("width", chipW).attr("height", chipH).attr("rx", chipH / 2).attr("ry", chipH / 2).attr("fill", palette.textMuted).attr("fill-opacity", 0.18);
+        groupG.append("text").attr("class", "bl-collapse-count").attr("x", chipCx).attr("y", chipCy).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", chipFont).attr("font-weight", "600").attr("fill", palette.text).text(String(group.childCount));
+      }
     } else {
       groupG.append("rect").attr("x", gx).attr("y", gy).attr("width", group.width).attr("height", groupHeight).attr("rx", GROUP_RX).attr("ry", GROUP_RX).attr("fill", mix(palette.surface, palette.bg, 40)).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-opacity", 0.35);
       groupG.append("text").attr("class", "bl-group-label").attr("x", gx + group.width / 2).attr("y", gy + 18).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sGroupLabelFontSize).attr("font-weight", "600").attr("fill", palette.text).text(group.label);
@@ -45003,6 +45251,17 @@ var init_renderer11 = __esm({
   }
 });
 
+// src/boxes-and-lines/node-metrics.ts
+var PHI, NODE_HEIGHT, NODE_WIDTH;
+var init_node_metrics = __esm({
+  "src/boxes-and-lines/node-metrics.ts"() {
+    "use strict";
+    PHI = 1.618;
+    NODE_HEIGHT = 60;
+    NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
+  }
+});
+
 // src/boxes-and-lines/label-placement.ts
 function measureEdgeLabel(label, fontSize = EDGE_LABEL_FONT_SIZE7, maxWidth = LABEL_MAX_WIDTH) {
   let lines = wrapTextToWidth(label, fontSize, maxWidth, { hardBreak: true });
@@ -45384,9 +45643,9 @@ function layeredCandidates(parsed, sizes, opts) {
     const m = Math.floor(vals.length / 2);
     if (vals.length % 2 === 1) return vals[m];
     if (vals.length === 2) return (vals[0] + vals[1]) / 2;
-    const left = vals[m - 1] - vals[0];
-    const right = vals[vals.length - 1] - vals[m];
-    return left + right === 0 ? (vals[m - 1] + vals[m]) / 2 : (vals[m - 1] * right + vals[m] * left) / (left + right);
+    const left2 = vals[m - 1] - vals[0];
+    const right2 = vals[vals.length - 1] - vals[m];
+    return left2 + right2 === 0 ? (vals[m - 1] + vals[m]) / 2 : (vals[m - 1] * right2 + vals[m] * left2) / (left2 + right2);
   };
   const wmedianRank = (r, useUp) => {
     const ids = ranks[r];
@@ -45712,7 +45971,7 @@ var NODESEP, RANKSEP, DUMMY_THICK, MARGIN4, W_REAL_REAL, W_REAL_DUMMY, W_DUMMY_D
 var init_layout_layered = __esm({
   "src/boxes-and-lines/layout-layered.ts"() {
     "use strict";
-    init_layout6();
+    init_node_metrics();
     NODESEP = 50;
     RANKSEP = 60;
     DUMMY_THICK = 10;
@@ -45739,9 +45998,9 @@ function median(vals) {
   const m = Math.floor(vals.length / 2);
   if (vals.length % 2 === 1) return vals[m];
   if (vals.length === 2) return (vals[0] + vals[1]) / 2;
-  const left = vals[m - 1] - vals[0];
-  const right = vals[vals.length - 1] - vals[m];
-  return left + right === 0 ? (vals[m - 1] + vals[m]) / 2 : (vals[m - 1] * right + vals[m] * left) / (left + right);
+  const left2 = vals[m - 1] - vals[0];
+  const right2 = vals[vals.length - 1] - vals[m];
+  return left2 + right2 === 0 ? (vals[m - 1] + vals[m]) / 2 : (vals[m - 1] * right2 + vals[m] * left2) / (left2 + right2);
 }
 function acyclicOrient(ids, edges) {
   const adj = /* @__PURE__ */ new Map();
@@ -46397,7 +46656,7 @@ var NODESEP2, RANKSEP2, DUMMY_THICK2, MARGIN5, GROUP_PAD, GROUP_LABEL_ZONE2, GRO
 var init_layout_grouped = __esm({
   "src/boxes-and-lines/layout-grouped.ts"() {
     "use strict";
-    init_layout6();
+    init_node_metrics();
     NODESEP2 = 50;
     RANKSEP2 = 60;
     DUMMY_THICK2 = 10;
@@ -46412,6 +46671,282 @@ var init_layout_grouped = __esm({
   }
 });
 
+// src/boxes-and-lines/layout-stable-collapse.ts
+function bboxOf(rects) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const r of rects) {
+    x0 = Math.min(x0, left(r));
+    y0 = Math.min(y0, top(r));
+    x1 = Math.max(x1, right(r));
+    y1 = Math.max(y1, bottom(r));
+  }
+  return {
+    x: (x0 + x1) / 2,
+    y: (y0 + y1) / 2,
+    width: x1 - x0,
+    height: y1 - y0
+  };
+}
+function borderPoint(rect2, toward) {
+  const dx = toward.x - rect2.x;
+  const dy = toward.y - rect2.y;
+  const sx = dx === 0 ? Infinity : rect2.width / 2 / Math.abs(dx);
+  const sy = dy === 0 ? Infinity : rect2.height / 2 / Math.abs(dy);
+  const s = Math.min(sx, sy);
+  if (!Number.isFinite(s)) return { x: rect2.x, y: rect2.y };
+  return { x: rect2.x + dx * s, y: rect2.y + dy * s };
+}
+function tryStableCollapseLayout(input) {
+  const {
+    parsed,
+    collapseInfo,
+    collapsedGroupLabels,
+    previousPositions,
+    sizes
+  } = input;
+  const prev = previousPositions;
+  const rects = /* @__PURE__ */ new Map();
+  for (const n of parsed.nodes) {
+    const p = prev.get(n.label);
+    const s = sizes.get(n.label);
+    if (!p || !s) return null;
+    rects.set(n.label, { x: p.x, y: p.y, width: s.width, height: s.height });
+  }
+  const ogByLabel = /* @__PURE__ */ new Map();
+  for (const g of collapseInfo.originalGroups) ogByLabel.set(g.label, g);
+  const descendantNodes = (label, seen = /* @__PURE__ */ new Set()) => {
+    if (seen.has(label)) return [];
+    seen.add(label);
+    const g = ogByLabel.get(label);
+    if (!g) return [];
+    const out = [];
+    for (const c of g.children) {
+      if (ogByLabel.has(c)) out.push(...descendantNodes(c, seen));
+      else out.push(c);
+    }
+    return out;
+  };
+  const newlyCollapsed = [];
+  for (const label of collapsedGroupLabels) {
+    const own = prev.get(gid(label));
+    if (own) {
+      rects.set(gid(label), {
+        x: own.x,
+        y: own.y,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT
+      });
+      continue;
+    }
+    const members = descendantNodes(label);
+    if (members.length === 0) return null;
+    const memberRects = [];
+    for (const m of members) {
+      const p = prev.get(m);
+      if (!p) return null;
+      memberRects.push({
+        x: p.x,
+        y: p.y,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT
+      });
+    }
+    const bbox = bboxOf(memberRects);
+    rects.set(gid(label), {
+      x: bbox.x,
+      y: bbox.y,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT
+    });
+    newlyCollapsed.push({ label, memberBbox: bbox });
+  }
+  const groupByLabel = new Map(parsed.groups.map((g) => [g.label, g]));
+  const inUnit = /* @__PURE__ */ new Set();
+  const unitKeys = (label, seen = /* @__PURE__ */ new Set()) => {
+    if (seen.has(label)) return [];
+    seen.add(label);
+    const g = groupByLabel.get(label);
+    if (!g) return [];
+    const out = [];
+    for (const c of g.children) {
+      if (groupByLabel.has(c)) out.push(...unitKeys(c, seen));
+      else if (rects.has(c)) out.push(c);
+      else if (rects.has(gid(c))) out.push(gid(c));
+    }
+    return out;
+  };
+  const units = [];
+  for (const g of parsed.groups) {
+    if (g.parentGroup) continue;
+    const keys = unitKeys(g.label);
+    if (keys.length === 0) continue;
+    for (const k of keys) inUnit.add(k);
+    units.push(keys);
+  }
+  for (const key of rects.keys()) if (!inUnit.has(key)) units.push([key]);
+  const axes = ["x", "y"];
+  for (const { label, memberBbox } of newlyCollapsed) {
+    const pill = rects.get(gid(label));
+    for (const axis of axes) {
+      const size = axis === "x" ? "width" : "height";
+      const perpMin = axis === "x" ? top : left;
+      const perpMax = axis === "x" ? bottom : right;
+      const axMin = axis === "x" ? left : top;
+      const axMax = axis === "x" ? right : bottom;
+      const reclaim = memberBbox[size] - pill[size];
+      if (reclaim <= 0) continue;
+      const unitBbox = (keys) => bboxOf(keys.map((k) => rects.get(k)));
+      const sliding = [];
+      const staticRects = [];
+      for (const u of units) {
+        const b = unitBbox(u);
+        if (axMin(b) >= pill[axis] && !u.includes(gid(label))) sliding.push(u);
+        else staticRects.push(...u.map((k) => rects.get(k)));
+      }
+      if (sliding.length === 0) continue;
+      let delta = reclaim;
+      for (const u of sliding) {
+        const b = unitBbox(u);
+        for (const s of staticRects) {
+          const overlaps = perpMin(b) < perpMax(s) - 4 && perpMax(b) > perpMin(s) + 4;
+          if (!overlaps || axMax(s) > axMin(b)) continue;
+          delta = Math.min(delta, axMin(b) - axMax(s) - MIN_GAP);
+        }
+      }
+      if (delta <= 0) continue;
+      for (const u of sliding)
+        for (const k of u) {
+          const r = rects.get(k);
+          rects.set(k, { ...r, [axis]: r[axis] - delta });
+        }
+    }
+  }
+  const groupRect = /* @__PURE__ */ new Map();
+  const buildGroupRect = (label, seen = /* @__PURE__ */ new Set()) => {
+    if (groupRect.has(label)) return groupRect.get(label);
+    if (seen.has(label)) return null;
+    seen.add(label);
+    const g = groupByLabel.get(label);
+    if (!g) return null;
+    const memberRects = [];
+    for (const c of g.children) {
+      if (groupByLabel.has(c)) {
+        const sub = buildGroupRect(c, seen);
+        if (sub) memberRects.push(sub);
+      } else if (rects.has(c)) memberRects.push(rects.get(c));
+      else if (rects.has(gid(c))) memberRects.push(rects.get(gid(c)));
+    }
+    if (memberRects.length === 0) return null;
+    const b = bboxOf(memberRects);
+    const rect2 = {
+      x: b.x,
+      y: b.y - GROUP_LABEL_ZONE3 / 2,
+      width: b.width + 2 * GROUP_PAD2,
+      height: b.height + 2 * GROUP_PAD2 + GROUP_LABEL_ZONE3
+    };
+    groupRect.set(label, rect2);
+    return rect2;
+  };
+  for (const g of parsed.groups) if (!buildGroupRect(g.label)) return null;
+  const boxes = [...rects.values()];
+  for (let i = 0; i < boxes.length; i++)
+    for (let j = i + 1; j < boxes.length; j++) {
+      const a = boxes[i];
+      const b = boxes[j];
+      if (Math.abs(a.x - b.x) < (a.width + b.width) / 2 - 4 && Math.abs(a.y - b.y) < (a.height + b.height) / 2 - 4)
+        return null;
+    }
+  const endpointRect = (key) => {
+    const direct = rects.get(key);
+    if (direct) return direct;
+    if (key.startsWith("__group_")) {
+      const label = key.slice("__group_".length);
+      return groupRect.get(label) ?? null;
+    }
+    return groupRect.get(key) ?? null;
+  };
+  const edges = [];
+  for (const e of parsed.edges) {
+    const sr = endpointRect(e.source);
+    const tr = endpointRect(e.target);
+    if (!sr || !tr) return null;
+    edges.push({
+      source: e.source,
+      target: e.target,
+      ...e.label !== void 0 && { label: e.label },
+      bidirectional: e.bidirectional,
+      lineNumber: e.lineNumber,
+      points: [borderPoint(sr, tr), borderPoint(tr, sr)],
+      yOffset: 0,
+      parallelCount: 1,
+      metadata: e.metadata
+    });
+  }
+  const allRects = [...rects.values(), ...groupRect.values()];
+  const total = bboxOf(allRects);
+  const dx = MARGIN6 - left(total);
+  const dy = MARGIN6 - top(total);
+  const shift = (r) => ({ ...r, x: r.x + dx, y: r.y + dy });
+  const nodes = parsed.nodes.map((n) => {
+    const r = shift(rects.get(n.label));
+    return { label: n.label, x: r.x, y: r.y, width: r.width, height: r.height };
+  });
+  const groups = parsed.groups.map((g) => {
+    const r = shift(groupRect.get(g.label));
+    return {
+      label: g.label,
+      lineNumber: g.lineNumber,
+      x: r.x,
+      y: r.y,
+      width: r.width,
+      height: r.height,
+      collapsed: false,
+      childCount: g.children.length
+    };
+  });
+  for (const label of collapsedGroupLabels) {
+    const r = shift(rects.get(gid(label)));
+    groups.push({
+      label,
+      lineNumber: 0,
+      x: r.x,
+      y: r.y,
+      width: r.width,
+      height: r.height,
+      collapsed: true,
+      childCount: collapseInfo.collapsedChildCounts.get(label) ?? 0
+    });
+  }
+  const shiftedEdges = edges.map((e) => ({
+    ...e,
+    points: e.points.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+  }));
+  const shiftedTotal = shift(total);
+  return {
+    nodes,
+    edges: shiftedEdges,
+    groups,
+    width: right(shiftedTotal) + MARGIN6,
+    height: bottom(shiftedTotal) + MARGIN6
+  };
+}
+var GROUP_PAD2, GROUP_LABEL_ZONE3, MARGIN6, MIN_GAP, gid, left, right, top, bottom;
+var init_layout_stable_collapse = __esm({
+  "src/boxes-and-lines/layout-stable-collapse.ts"() {
+    "use strict";
+    init_node_metrics();
+    GROUP_PAD2 = 16;
+    GROUP_LABEL_ZONE3 = 32;
+    MARGIN6 = 40;
+    MIN_GAP = 36;
+    gid = (label) => `__group_${label}`;
+    left = (r) => r.x - r.width / 2;
+    right = (r) => r.x + r.width / 2;
+    top = (r) => r.y - r.height / 2;
+    bottom = (r) => r.y + r.height / 2;
+  }
+});
+
 // src/boxes-and-lines/layout-search.ts
 var layout_search_exports = {};
 __export(layout_search_exports, {
@@ -46784,7 +47319,7 @@ function detectGroupOverlaps(layout, opts) {
   const contains = (outer, inner) => outer.l <= inner.l + margin && outer.r >= inner.r - margin && outer.t <= inner.t + margin && outer.b >= inner.b - margin;
   const rend = raw.map((a, i) => {
     const parent = raw.some((b, j) => j !== i && contains(a, b));
-    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE3 } : a;
+    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE4 } : a;
   });
   const hit = /* @__PURE__ */ new Set();
   for (let i = 0; i < raw.length; i++)
@@ -46811,7 +47346,7 @@ function countGroupOverlaps(layout, opts) {
   const contains = (outer, inner) => outer.l <= inner.l + margin && outer.r >= inner.r - margin && outer.t <= inner.t + margin && outer.b >= inner.b - margin;
   const rend = raw.map((a, i) => {
     const parent = raw.some((b, j) => j !== i && contains(a, b));
-    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE3 } : a;
+    return parent ? { ...a, t: a.t - GROUP_LABEL_ZONE4 } : a;
   });
   let count = 0;
   for (let i = 0; i < raw.length; i++)
@@ -46854,7 +47389,7 @@ function separateGroupBands(layout, parsed) {
     let lo = (axis === "y" ? g.y : g.x) - half2;
     const hi = (axis === "y" ? g.y : g.x) + half2;
     const isParent = parsed.groups.some((c) => c.parentGroup === label);
-    if (axis === "y" && isParent) lo -= GROUP_LABEL_ZONE3;
+    if (axis === "y" && isParent) lo -= GROUP_LABEL_ZONE4;
     return { label, lo, hi, c: (lo + hi) / 2 };
   });
   bands.sort((a, b) => a.c - b.c);
@@ -46890,8 +47425,8 @@ function separateGroupBands(layout, parsed) {
   const nodeDelta = (label) => {
     if (label.startsWith("__group_"))
       return delta.get(topOf(label.slice("__group_".length))) ?? 0;
-    const top = nodeTop.get(label);
-    return top ? delta.get(top) ?? 0 : 0;
+    const top2 = nodeTop.get(label);
+    return top2 ? delta.get(top2) ?? 0 : 0;
   };
   const shift = (p, d) => axis === "y" ? { x: p.x, y: p.y + d } : { x: p.x + d, y: p.y };
   const nodes = layout.nodes.map((n) => {
@@ -46925,7 +47460,7 @@ function separateGroupBands(layout, parsed) {
     acc(n.x + n.width / 2, n.y + n.height / 2);
   }
   for (const g of groups) {
-    acc(g.x - g.width / 2, g.y - g.height / 2 - GROUP_LABEL_ZONE3);
+    acc(g.x - g.width / 2, g.y - g.height / 2 - GROUP_LABEL_ZONE4);
     acc(g.x + g.width / 2, g.y + g.height / 2);
   }
   for (const e of edges) for (const p of e.points) acc(p.x, p.y);
@@ -47044,8 +47579,19 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
         sizes.set(node.label, { width: s.width, height: maxDescH });
       }
   }
-  const gid = (label) => `__group_${label}`;
+  const gid2 = (label) => `__group_${label}`;
   const rankdir = parsed.direction === "TB" ? "TB" : "LR";
+  if (opts?.stableCollapse && collapseInfo && collapsedGroupLabels.size > 0 && opts.previousPositions) {
+    const stable = tryStableCollapseLayout({
+      parsed,
+      collapseInfo,
+      collapsedGroupLabels,
+      previousPositions: opts.previousPositions,
+      sizes,
+      rankdir
+    });
+    if (stable) return stable;
+  }
   const nodeLabelSet = new Set(parsed.nodes.map((n2) => n2.label));
   const directNodeChildren = /* @__PURE__ */ new Map();
   const childGroupsOf = /* @__PURE__ */ new Map();
@@ -47103,8 +47649,8 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       if (rankOf(mem) > rankOf(exit)) exit = mem;
       if (rankOf(mem) < rankOf(entry)) entry = mem;
     }
-    gidSourceRep.set(gid(grp.label), exit);
-    gidTargetRep.set(gid(grp.label), entry);
+    gidSourceRep.set(gid2(grp.label), exit);
+    gidTargetRep.set(gid2(grp.label), entry);
   }
   const srcRep = (label) => gidSourceRep.get(label) ?? label;
   const tgtRep = (label) => gidTargetRep.get(label) ?? label;
@@ -47134,25 +47680,25 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     });
     g.setDefaultEdgeLabel(() => ({}));
     for (const grp of ord(parsed.groups))
-      g.setNode(gid(grp.label), { label: grp.label });
+      g.setNode(gid2(grp.label), { label: grp.label });
     for (const node of ord(parsed.nodes)) {
       const s = sizes.get(node.label);
       g.setNode(node.label, { width: s.width, height: s.height });
     }
     for (const label of collapsedGroupLabels)
-      g.setNode(gid(label), { width: NODE_WIDTH, height: NODE_HEIGHT });
+      g.setNode(gid2(label), { width: NODE_WIDTH, height: NODE_HEIGHT });
     for (const grp of parsed.groups) {
-      if (grp.parentGroup && g.hasNode(gid(grp.parentGroup)))
-        g.setParent(gid(grp.label), gid(grp.parentGroup));
+      if (grp.parentGroup && g.hasNode(gid2(grp.parentGroup)))
+        g.setParent(gid2(grp.label), gid2(grp.parentGroup));
       for (const c of ord(grp.children)) {
-        if (g.hasNode(c)) g.setParent(c, gid(grp.label));
+        if (g.hasNode(c)) g.setParent(c, gid2(grp.label));
       }
     }
     if (collapseInfo)
       for (const label of collapsedGroupLabels) {
         const og = collapseInfo.originalGroups.find((x) => x.label === label);
-        if (og?.parentGroup && !collapsedGroupLabels.has(og.parentGroup) && g.hasNode(gid(og.parentGroup)))
-          g.setParent(gid(label), gid(og.parentGroup));
+        if (og?.parentGroup && !collapsedGroupLabels.has(og.parentGroup) && g.hasNode(gid2(og.parentGroup)))
+          g.setParent(gid2(label), gid2(og.parentGroup));
       }
     for (const e of ord(parsed.edges)) {
       const s = srcRep(e.source);
@@ -47179,7 +47725,7 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     });
     const groups = parsed.groups.map(
       (grp) => {
-        const p = g.node(gid(grp.label));
+        const p = g.node(gid2(grp.label));
         return {
           label: grp.label,
           lineNumber: grp.lineNumber,
@@ -47193,7 +47739,7 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       }
     );
     for (const label of collapsedGroupLabels) {
-      const p = g.node(gid(label));
+      const p = g.node(gid2(label));
       groups.push({
         label,
         lineNumber: 0,
@@ -47207,9 +47753,9 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
     }
     const groupRectByGid = /* @__PURE__ */ new Map();
     for (const grp of parsed.groups) {
-      const p = g.node(gid(grp.label));
+      const p = g.node(gid2(grp.label));
       if (p)
-        groupRectByGid.set(gid(grp.label), {
+        groupRectByGid.set(gid2(grp.label), {
           x: p.x,
           y: p.y,
           w: p.width,
@@ -47409,14 +47955,16 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   opts?.onTopConfigs?.(topConfigs);
   return best;
 }
-var DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, DEFAULT_SEARCH_BUDGET_MS, splineGen, PATH_TOKEN_RE, FLAT_CACHE, GROUP_LABEL_ZONE3;
+var DEFAULT_LAMBDA, ESCALATE_THRESHOLD, ESCALATE_MAX_N, ESCALATE_SEEDS, ESCALATE_REFINE, DEFAULT_SEARCH_BUDGET_MS, splineGen, PATH_TOKEN_RE, FLAT_CACHE, GROUP_LABEL_ZONE4;
 var init_layout_search = __esm({
   "src/boxes-and-lines/layout-search.ts"() {
     "use strict";
+    init_node_metrics();
     init_layout6();
     init_layout_layered();
     init_layout_grouped();
     init_label_placement();
+    init_layout_stable_collapse();
     DEFAULT_LAMBDA = 4;
     ESCALATE_THRESHOLD = 4;
     ESCALATE_MAX_N = 45;
@@ -47426,15 +47974,13 @@ var init_layout_search = __esm({
     splineGen = d3line3().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_ZONE3 = 32;
+    GROUP_LABEL_ZONE4 = 32;
   }
 });
 
 // src/boxes-and-lines/layout.ts
 var layout_exports6 = {};
 __export(layout_exports6, {
-  NODE_HEIGHT: () => NODE_HEIGHT,
-  NODE_WIDTH: () => NODE_WIDTH,
   computeNodeSize: () => computeNodeSize,
   layoutBoxesAndLines: () => layoutBoxesAndLines
 });
@@ -47517,6 +48063,9 @@ async function layoutBoxesAndLines(parsed, collapseInfo, layoutOptions) {
     ...layoutOptions?.previousPositions !== void 0 && {
       previousPositions: layoutOptions.previousPositions
     },
+    ...layoutOptions?.stableCollapse !== void 0 && {
+      stableCollapse: layoutOptions.stableCollapse
+    },
     ...layoutOptions?.onProgress !== void 0 && {
       onProgress: layoutOptions.onProgress
     }
@@ -47621,8 +48170,8 @@ function attachNotes(layout, parsed, collapsedNotes) {
     nodes: finalNodes,
     edges: finalEdges,
     groups: finalGroups,
-    width: bbMaxX + shiftX + MARGIN6,
-    height: bbMaxY + shiftY + MARGIN6
+    width: bbMaxX + shiftX + MARGIN7,
+    height: bbMaxY + shiftY + MARGIN7
   };
 }
 function applyParallelEdgeOffsets(layout) {
@@ -47655,19 +48204,17 @@ function applyParallelEdgeOffsets(layout) {
     }))
   };
 }
-var MARGIN6, 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_LINES2, LABEL_LINE_HEIGHT2, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
+var MARGIN7, MAX_PARALLEL_EDGES, PARALLEL_SPACING, DESC_NODE_WIDTH, DESC_FONT_SIZE2, DESC_LINE_HEIGHT2, DESC_PADDING, SEPARATOR_GAP4, MAX_DESC_LINES2, MAX_LABEL_LINES2, LABEL_LINE_HEIGHT2, LABEL_PAD, VALUE_ROW_FONT, VALUE_ROW_H;
 var init_layout6 = __esm({
   "src/boxes-and-lines/layout.ts"() {
     "use strict";
+    init_node_metrics();
     init_text_measure();
     init_label_placement();
     init_notes();
-    MARGIN6 = 40;
+    MARGIN7 = 40;
     MAX_PARALLEL_EDGES = 5;
     PARALLEL_SPACING = 22;
-    PHI = 1.618;
-    NODE_HEIGHT = 60;
-    NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
     DESC_NODE_WIDTH = 140;
     DESC_FONT_SIZE2 = 10;
     DESC_LINE_HEIGHT2 = 1.4;
@@ -47793,7 +48340,7 @@ function layoutSwimlane(parsed) {
   const rankIndex = new Map(usedRanks.map((r, i) => [r, i]));
   const R = usedRanks.length;
   const riOf = (id) => rankIndex.get(finalRank.get(id)) ?? 0;
-  const contentFlowStart = LANE_HEADER + MARGIN7;
+  const contentFlowStart = LANE_HEADER + MARGIN8;
   const colFlowLen = Array.from({ length: R }, () => 0);
   for (const id of ids) {
     const ri = riOf(id);
@@ -47811,8 +48358,8 @@ function layoutSwimlane(parsed) {
     }
   }
   const gapMid = (gi) => flowCenter[gi] + colLen[gi] / 2 + COL_GAP / 2;
-  const totalFlow = (R > 0 ? flowCenter[R - 1] + Math.max(colFlowLen[R - 1], NODE_W2) / 2 : contentFlowStart) + MARGIN7;
-  const contentCrossStart = (parsed.phases.length ? PHASE_HEADER : 0) + MARGIN7;
+  const totalFlow = (R > 0 ? flowCenter[R - 1] + Math.max(colFlowLen[R - 1], NODE_W2) / 2 : contentFlowStart) + MARGIN8;
+  const contentCrossStart = (parsed.phases.length ? PHASE_HEADER : 0) + MARGIN8;
   const cellNodes = /* @__PURE__ */ new Map();
   for (const n of parsed.nodes) {
     const key = `${n.lane}\0${riOf(n.id)}`;
@@ -47864,7 +48411,7 @@ function layoutSwimlane(parsed) {
     if ((finalRank.get(e.to) ?? 0) < (finalRank.get(e.from) ?? 0)) backCount++;
   const needsBack = backCount > 0;
   const backReserve = needsBack ? BACK_CHANNEL + BACK_STEP * (backCount - 1) : 0;
-  const totalCross = laneCrossEnd + backReserve + MARGIN7;
+  const totalCross = laneCrossEnd + backReserve + MARGIN8;
   const project = (flow, cross) => isLR ? { x: flow, y: cross } : { x: cross, y: flow };
   const layoutNodes = parsed.nodes.map((n) => {
     const s = size.get(n.id);
@@ -48086,12 +48633,12 @@ function layoutSwimlane(parsed) {
     height: isLR ? totalCross : totalFlow
   };
 }
-var MARGIN7, COL_GAP, NODE_W2, NODE_H, DIAMOND, TERM_D, INTRA_GAP, LANE_PAD, MIN_LANE, LANE_HEADER, PHASE_HEADER, BACK_CHANNEL, BACK_STEP;
+var MARGIN8, COL_GAP, NODE_W2, NODE_H, DIAMOND, TERM_D, INTRA_GAP, LANE_PAD, MIN_LANE, LANE_HEADER, PHASE_HEADER, BACK_CHANNEL, BACK_STEP;
 var init_layout7 = __esm({
   "src/swimlane/layout.ts"() {
     "use strict";
     init_layout_grouped();
-    MARGIN7 = 30;
+    MARGIN8 = 30;
     COL_GAP = 64;
     NODE_W2 = 124;
     NODE_H = 44;
@@ -48386,9 +48933,9 @@ function renderSwimlaneForExport(container, parsed, layout, palette, isDark, opt
         anchor = "middle";
         baseline = below ? "hanging" : "auto";
       } else {
-        const right = clearance(mid.x + LABEL_GAP2, mid.y, 1);
-        const left = clearance(mid.x - LABEL_GAP2, mid.y, -1);
-        const toLeft = right < CROWD && left > right;
+        const right2 = clearance(mid.x + LABEL_GAP2, mid.y, 1);
+        const left2 = clearance(mid.x - LABEL_GAP2, mid.y, -1);
+        const toLeft = right2 < CROWD && left2 > right2;
         tx = mid.x + (toLeft ? -LABEL_GAP2 : LABEL_GAP2);
         ty = mid.y;
         anchor = toLeft ? "end" : "start";
@@ -48609,8 +49156,8 @@ function cardSize(p) {
   const valueX = KEY_X + maxKeyW + KEY_VALUE_GAP;
   let contentRight = 0;
   for (const r of rows) {
-    const right = r.year ? KEY_X + measureText(r.value, META_FONT_SIZE) : valueX + measureText(r.value, META_FONT_SIZE);
-    contentRight = Math.max(contentRight, right);
+    const right2 = r.year ? KEY_X + measureText(r.value, META_FONT_SIZE) : valueX + measureText(r.value, META_FONT_SIZE);
+    contentRight = Math.max(contentRight, right2);
   }
   const labelW = measureText(p.label, LABEL_FONT_SIZE);
   const width = Math.max(
@@ -48784,7 +49331,7 @@ function layoutFamily(parsed, focusId) {
   }
   const rowY = /* @__PURE__ */ new Map();
   {
-    let acc = MARGIN8 + ANCESTOR_BAND;
+    let acc = MARGIN9 + ANCESTOR_BAND;
     for (let r = 0; r <= maxRow; r++) {
       rowY.set(r, acc);
       acc += (rowHeight.get(r) ?? 0) + ROW_GAP2;
@@ -48859,11 +49406,11 @@ function layoutFamily(parsed, focusId) {
         if (kids.length === 0 || u.parents.every((p) => !centerX.has(p)))
           continue;
         const blockW = kids.reduce((s, id) => s + sizes.get(id).width, 0) + H_GAP2 * (kids.length - 1);
-        let left = unionMid(u) - blockW / 2;
+        let left2 = unionMid(u) - blockW / 2;
         for (const id of kids) {
           const w = sizes.get(id).width;
-          desired.set(id, left + w / 2);
-          left += w + H_GAP2;
+          desired.set(id, left2 + w / 2);
+          left2 += w + H_GAP2;
         }
       }
       resolveRow(rowPersons.get(r) ?? [], desired);
@@ -48873,7 +49420,7 @@ function layoutFamily(parsed, focusId) {
   for (const id of persons.keys())
     minLeft = Math.min(minLeft, centerX.get(id) - sizes.get(id).width / 2);
   const gutter = showGen ? GUTTER_WIDTH : 0;
-  const dx = (Number.isFinite(minLeft) ? MARGIN8 - minLeft : MARGIN8) + gutter;
+  const dx = (Number.isFinite(minLeft) ? MARGIN9 - minLeft : MARGIN9) + gutter;
   const nodes = [];
   const topY = /* @__PURE__ */ new Map();
   const bottomY = /* @__PURE__ */ new Map();
@@ -48987,13 +49534,13 @@ function layoutFamily(parsed, focusId) {
         sex: p.sex,
         ...p.color !== void 0 && { color: p.color },
         x: fx,
-        y: MARGIN8 + 10 + i * ANCESTOR_STAGGER
+        y: MARGIN9 + 10 + i * ANCESTOR_STAGGER
       });
     });
   }
-  const width = contentRightEdge + MARGIN8;
+  const width = contentRightEdge + MARGIN9;
   const lastR = maxRow;
-  const height = (rowY.get(lastR) ?? MARGIN8) + (rowHeight.get(lastR) ?? 0) + MARGIN8;
+  const height = (rowY.get(lastR) ?? MARGIN9) + (rowHeight.get(lastR) ?? 0) + MARGIN9;
   const rows = [];
   for (let r = 0; r <= maxRow; r++) {
     if (!rowPersons.get(r)?.length) continue;
@@ -49010,7 +49557,7 @@ function layoutFamily(parsed, focusId) {
     height
   };
 }
-var MARGIN8, MIN_CARD_W, CARD_H_PAD3, CARD_TEXT_PAD, H_GAP2, ROW_GAP2, KEY_VALUE_GAP, KEY_X, GUTTER_WIDTH;
+var MARGIN9, MIN_CARD_W, CARD_H_PAD3, CARD_TEXT_PAD, H_GAP2, ROW_GAP2, KEY_VALUE_GAP, KEY_X, GUTTER_WIDTH;
 var init_layout8 = __esm({
   "src/family/layout.ts"() {
     "use strict";
@@ -49018,7 +49565,7 @@ var init_layout8 = __esm({
     init_visual_conventions();
     init_couple_rank();
     init_card_model();
-    MARGIN8 = 30;
+    MARGIN9 = 30;
     MIN_CARD_W = 132;
     CARD_H_PAD3 = 12;
     CARD_TEXT_PAD = 12;
@@ -49461,7 +50008,7 @@ function layoutMindmap(parsed, _palette, options) {
     leafWidth: ctx.structural(LEAF_WIDTH),
     hGap: ctx.aesthetic(H_GAP3),
     vGap: ctx.aesthetic(V_GAP2),
-    margin: ctx.aesthetic(MARGIN9),
+    margin: ctx.aesthetic(MARGIN10),
     multiRootGap: ctx.aesthetic(MULTI_ROOT_GAP)
   };
   populateDepthCache(roots);
@@ -49781,20 +50328,20 @@ function balancedSplitS(children, hideDescriptions, sc) {
     node: c,
     height: computeSubtreeHeightS(c, 1, hideDescriptions, sc)
   }));
-  const right = [];
-  const left = [];
+  const right2 = [];
+  const left2 = [];
   let rightWeight = 0;
   let leftWeight = 0;
   for (const w of weights) {
     if (rightWeight <= leftWeight) {
-      right.push(w.node);
+      right2.push(w.node);
       rightWeight += w.height;
     } else {
-      left.push(w.node);
+      left2.push(w.node);
       leftWeight += w.height;
     }
   }
-  return { right, left };
+  return { right: right2, left: left2 };
 }
 function offsetPath(path, dx, dy) {
   if (dx === 0 && dy === 0) return path;
@@ -49839,7 +50386,7 @@ function populateDepthCache(roots) {
   };
   walk(roots, 0);
 }
-var ROOT_WIDTH, DEPTH1_WIDTH, LEAF_WIDTH, SINGLE_LABEL_HEIGHT, LABEL_LINE_HEIGHT3, DESC_LINE_HEIGHT3, NODE_V_PAD, H_GAP3, V_GAP2, MARGIN9, MULTI_ROOT_GAP, nodeDepthCache;
+var ROOT_WIDTH, DEPTH1_WIDTH, LEAF_WIDTH, SINGLE_LABEL_HEIGHT, LABEL_LINE_HEIGHT3, DESC_LINE_HEIGHT3, NODE_V_PAD, H_GAP3, V_GAP2, MARGIN10, MULTI_ROOT_GAP, nodeDepthCache;
 var init_layout9 = __esm({
   "src/mindmap/layout.ts"() {
     "use strict";
@@ -49855,7 +50402,7 @@ var init_layout9 = __esm({
     NODE_V_PAD = 10;
     H_GAP3 = 40;
     V_GAP2 = 12;
-    MARGIN9 = 40;
+    MARGIN10 = 40;
     MULTI_ROOT_GAP = 60;
     nodeDepthCache = /* @__PURE__ */ new Map();
   }
@@ -51678,14 +52225,14 @@ function layoutC4Context(parsed, activeTagGroup) {
   );
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of nodes) {
-    const left = node.x - node.width / 2;
-    const top = node.y - node.height / 2;
-    const right = node.x + node.width / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (top < minY) minY = top;
-    if (right > maxX) maxX = right;
-    if (bottom > maxY) maxY = bottom;
+    const left2 = node.x - node.width / 2;
+    const top2 = node.y - node.height / 2;
+    const right2 = node.x + node.width / 2;
+    const bottom2 = node.y + node.height / 2;
+    if (left2 < minX) minX = left2;
+    if (top2 < minY) minY = top2;
+    if (right2 > maxX) maxX = right2;
+    if (bottom2 > maxY) maxY = bottom2;
   }
   for (const edge of edges) {
     for (const pt of edge.points) {
@@ -51696,8 +52243,8 @@ function layoutC4Context(parsed, activeTagGroup) {
     }
   }
   if (nodes.length > 0) {
-    const shiftX = MARGIN10 - minX;
-    const shiftY = MARGIN10 - minY;
+    const shiftX = MARGIN11 - minX;
+    const shiftY = MARGIN11 - minY;
     for (const node of nodes) {
       node.x += shiftX;
       node.y += shiftY;
@@ -51709,14 +52256,14 @@ function layoutC4Context(parsed, activeTagGroup) {
       }
     }
   }
-  let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN10 * 2 : 0;
-  let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN10 * 2 : 0;
+  let totalWidth = nodes.length > 0 ? maxX - minX + MARGIN11 * 2 : 0;
+  let totalHeight = nodes.length > 0 ? maxY - minY + MARGIN11 * 2 : 0;
   const legendGroups = computeLegendGroups3(
     legendSuppressed(parsed.options) ? [] : parsed.tagGroups
   );
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN10;
-    let legendX = MARGIN10;
+    const legendY = totalHeight + MARGIN11;
+    let legendX = MARGIN11;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -51967,14 +52514,14 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
   const containerNodes = nodes.filter((n) => n.type === "container");
   let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
   for (const n of containerNodes) {
-    const left = n.x - n.width / 2;
-    const top = n.y - n.height / 2;
-    const right = n.x + n.width / 2;
-    const bottom = n.y + n.height / 2;
-    if (left < bMinX) bMinX = left;
-    if (top < bMinY) bMinY = top;
-    if (right > bMaxX) bMaxX = right;
-    if (bottom > bMaxY) bMaxY = bottom;
+    const left2 = n.x - n.width / 2;
+    const top2 = n.y - n.height / 2;
+    const right2 = n.x + n.width / 2;
+    const bottom2 = n.y + n.height / 2;
+    if (left2 < bMinX) bMinX = left2;
+    if (top2 < bMinY) bMinY = top2;
+    if (right2 > bMaxX) bMaxX = right2;
+    if (bottom2 > bMaxY) bMaxY = bottom2;
   }
   const boundary = {
     label: system.name,
@@ -52001,14 +52548,14 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       if (members.length === 0) continue;
       let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
       for (const m of members) {
-        const left = m.x - m.width / 2;
-        const top = m.y - m.height / 2;
-        const right = m.x + m.width / 2;
-        const bottom = m.y + m.height / 2;
-        if (left < gMinX) gMinX = left;
-        if (top < gMinY) gMinY = top;
-        if (right > gMaxX) gMaxX = right;
-        if (bottom > gMaxY) gMaxY = bottom;
+        const left2 = m.x - m.width / 2;
+        const top2 = m.y - m.height / 2;
+        const right2 = m.x + m.width / 2;
+        const bottom2 = m.y + m.height / 2;
+        if (left2 < gMinX) gMinX = left2;
+        if (top2 < gMinY) gMinY = top2;
+        if (right2 > gMaxX) gMaxX = right2;
+        if (bottom2 > gMaxY) gMaxY = bottom2;
       }
       groupBoundaries.push({
         label: groupName,
@@ -52023,14 +52570,14 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
   }
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of nodes) {
-    const left = node.x - node.width / 2;
-    const top = node.y - node.height / 2;
-    const right = node.x + node.width / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (top < minY) minY = top;
-    if (right > maxX) maxX = right;
-    if (bottom > maxY) maxY = bottom;
+    const left2 = node.x - node.width / 2;
+    const top2 = node.y - node.height / 2;
+    const right2 = node.x + node.width / 2;
+    const bottom2 = node.y + node.height / 2;
+    if (left2 < minX) minX = left2;
+    if (top2 < minY) minY = top2;
+    if (right2 > maxX) maxX = right2;
+    if (bottom2 > maxY) maxY = bottom2;
   }
   if (boundary.x < minX) minX = boundary.x;
   if (boundary.y < minY) minY = boundary.y;
@@ -52050,8 +52597,8 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN10 - minX;
-  const shiftY = MARGIN10 - minY;
+  const shiftX = MARGIN11 - minX;
+  const shiftY = MARGIN11 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -52068,14 +52615,14 @@ function layoutC4Containers(parsed, systemName, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN10 * 2;
-  let totalHeight = maxY - minY + MARGIN10 * 2;
+  let totalWidth = maxX - minX + MARGIN11 * 2;
+  let totalHeight = maxY - minY + MARGIN11 * 2;
   const legendGroups = computeLegendGroups3(
     legendSuppressed(parsed.options) ? [] : parsed.tagGroups
   );
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN10;
-    let legendX = MARGIN10;
+    const legendY = totalHeight + MARGIN11;
+    let legendX = MARGIN11;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -52386,14 +52933,14 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
   const componentNodes = nodes.filter((n) => n.type === "component");
   let bMinX = Infinity, bMinY = Infinity, bMaxX = -Infinity, bMaxY = -Infinity;
   for (const n of componentNodes) {
-    const left = n.x - n.width / 2;
-    const top = n.y - n.height / 2;
-    const right = n.x + n.width / 2;
-    const bottom = n.y + n.height / 2;
-    if (left < bMinX) bMinX = left;
-    if (top < bMinY) bMinY = top;
-    if (right > bMaxX) bMaxX = right;
-    if (bottom > bMaxY) bMaxY = bottom;
+    const left2 = n.x - n.width / 2;
+    const top2 = n.y - n.height / 2;
+    const right2 = n.x + n.width / 2;
+    const bottom2 = n.y + n.height / 2;
+    if (left2 < bMinX) bMinX = left2;
+    if (top2 < bMinY) bMinY = top2;
+    if (right2 > bMaxX) bMaxX = right2;
+    if (bottom2 > bMaxY) bMaxY = bottom2;
   }
   const boundary = {
     label: targetContainer.name,
@@ -52420,14 +52967,14 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       if (members.length === 0) continue;
       let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
       for (const m of members) {
-        const left = m.x - m.width / 2;
-        const top = m.y - m.height / 2;
-        const right = m.x + m.width / 2;
-        const bottom = m.y + m.height / 2;
-        if (left < gMinX) gMinX = left;
-        if (top < gMinY) gMinY = top;
-        if (right > gMaxX) gMaxX = right;
-        if (bottom > gMaxY) gMaxY = bottom;
+        const left2 = m.x - m.width / 2;
+        const top2 = m.y - m.height / 2;
+        const right2 = m.x + m.width / 2;
+        const bottom2 = m.y + m.height / 2;
+        if (left2 < gMinX) gMinX = left2;
+        if (top2 < gMinY) gMinY = top2;
+        if (right2 > gMaxX) gMaxX = right2;
+        if (bottom2 > gMaxY) gMaxY = bottom2;
       }
       groupBoundaries.push({
         label: groupName,
@@ -52442,14 +52989,14 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
   }
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of nodes) {
-    const left = node.x - node.width / 2;
-    const top = node.y - node.height / 2;
-    const right = node.x + node.width / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (top < minY) minY = top;
-    if (right > maxX) maxX = right;
-    if (bottom > maxY) maxY = bottom;
+    const left2 = node.x - node.width / 2;
+    const top2 = node.y - node.height / 2;
+    const right2 = node.x + node.width / 2;
+    const bottom2 = node.y + node.height / 2;
+    if (left2 < minX) minX = left2;
+    if (top2 < minY) minY = top2;
+    if (right2 > maxX) maxX = right2;
+    if (bottom2 > maxY) maxY = bottom2;
   }
   if (boundary.x < minX) minX = boundary.x;
   if (boundary.y < minY) minY = boundary.y;
@@ -52469,8 +53016,8 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN10 - minX;
-  const shiftY = MARGIN10 - minY;
+  const shiftX = MARGIN11 - minX;
+  const shiftY = MARGIN11 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -52487,14 +53034,14 @@ function layoutC4Components(parsed, systemName, containerName, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN10 * 2;
-  let totalHeight = maxY - minY + MARGIN10 * 2;
+  let totalWidth = maxX - minX + MARGIN11 * 2;
+  let totalHeight = maxY - minY + MARGIN11 * 2;
   const legendGroups = computeLegendGroups3(
     legendSuppressed(parsed.options) ? [] : parsed.tagGroups
   );
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN10;
-    let legendX = MARGIN10;
+    const legendY = totalHeight + MARGIN11;
+    let legendX = MARGIN11;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -52713,14 +53260,14 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     const members = infraMembers.get(infraId) ?? [];
     for (const m of members) {
       hasContent = true;
-      const left = m.x - m.width / 2;
-      const top = m.y - m.height / 2;
-      const right = m.x + m.width / 2;
-      const bottom = m.y + m.height / 2;
-      if (left < bMinX) bMinX = left;
-      if (top < bMinY) bMinY = top;
-      if (right > bMaxX) bMaxX = right;
-      if (bottom > bMaxY) bMaxY = bottom;
+      const left2 = m.x - m.width / 2;
+      const top2 = m.y - m.height / 2;
+      const right2 = m.x + m.width / 2;
+      const bottom2 = m.y + m.height / 2;
+      if (left2 < bMinX) bMinX = left2;
+      if (top2 < bMinY) bMinY = top2;
+      if (right2 > bMaxX) bMaxX = right2;
+      if (bottom2 > bMaxY) bMaxY = bottom2;
     }
     for (const [childId, parentId] of infraParents) {
       if (parentId === infraId) {
@@ -52761,14 +53308,14 @@ function layoutC4Deployment(parsed, activeTagGroup) {
   groupBoundaries.sort((a, b) => b.width * b.height - a.width * a.height);
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of nodes) {
-    const left = node.x - node.width / 2;
-    const top = node.y - node.height / 2;
-    const right = node.x + node.width / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (top < minY) minY = top;
-    if (right > maxX) maxX = right;
-    if (bottom > maxY) maxY = bottom;
+    const left2 = node.x - node.width / 2;
+    const top2 = node.y - node.height / 2;
+    const right2 = node.x + node.width / 2;
+    const bottom2 = node.y + node.height / 2;
+    if (left2 < minX) minX = left2;
+    if (top2 < minY) minY = top2;
+    if (right2 > maxX) maxX = right2;
+    if (bottom2 > maxY) maxY = bottom2;
   }
   for (const gb of groupBoundaries) {
     if (gb.x < minX) minX = gb.x;
@@ -52784,8 +53331,8 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       if (pt.y > maxY) maxY = pt.y;
     }
   }
-  const shiftX = MARGIN10 - minX;
-  const shiftY = MARGIN10 - minY;
+  const shiftX = MARGIN11 - minX;
+  const shiftY = MARGIN11 - minY;
   for (const node of nodes) {
     node.x += shiftX;
     node.y += shiftY;
@@ -52800,14 +53347,14 @@ function layoutC4Deployment(parsed, activeTagGroup) {
       pt.y += shiftY;
     }
   }
-  let totalWidth = maxX - minX + MARGIN10 * 2;
-  let totalHeight = maxY - minY + MARGIN10 * 2;
+  let totalWidth = maxX - minX + MARGIN11 * 2;
+  let totalHeight = maxY - minY + MARGIN11 * 2;
   const legendGroups = computeLegendGroups3(
     legendSuppressed(parsed.options) ? [] : parsed.tagGroups
   );
   if (legendGroups.length > 0) {
-    const legendY = totalHeight + MARGIN10;
-    let legendX = MARGIN10;
+    const legendY = totalHeight + MARGIN11;
+    let legendX = MARGIN11;
     for (const lg of legendGroups) {
       lg.x = legendX;
       lg.y = legendY;
@@ -52827,7 +53374,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_PAD4, META_LINE_HEIGHT4, META_FONT_SIZE4, MARGIN10, 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_PAD4, META_LINE_HEIGHT4, META_FONT_SIZE4, MARGIN11, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout11 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
@@ -52849,7 +53396,7 @@ var init_layout11 = __esm({
     CARD_H_PAD4 = 20;
     META_LINE_HEIGHT4 = 16;
     META_FONT_SIZE4 = 11;
-    MARGIN10 = 40;
+    MARGIN11 = 40;
     BOUNDARY_PAD = 40;
     GROUP_BOUNDARY_PAD = 24;
     EDGE_NODE_COLLISION_WEIGHT = 5e3;
@@ -53125,7 +53672,7 @@ function renderC4ContextForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -53741,7 +54288,7 @@ function renderC4ContainersForExport(content, systemName, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(el);
   }
@@ -53773,7 +54320,7 @@ function renderC4ComponentsForExport(content, systemName, containerName, theme,
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(el);
   }
@@ -53818,7 +54365,7 @@ function renderC4DeploymentForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(el);
   }
@@ -53827,6 +54374,7 @@ var DIAGRAM_PADDING9, MAX_SCALE5, TITLE_HEIGHT6, TYPE_FONT_SIZE, NAME_FONT_SIZE2
 var init_renderer16 = __esm({
   "src/c4/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_tag_groups();
     init_parsing();
     init_fonts();
@@ -54095,14 +54643,14 @@ function layoutGraph(graph, options) {
       let maxX = -Infinity;
       let maxY = -Infinity;
       for (const member of members) {
-        const left = member.x - member.width / 2;
-        const right = member.x + member.width / 2;
-        const top = member.y - member.height / 2;
-        const bottom = member.y + member.height / 2;
-        if (left < minX) minX = left;
-        if (right > maxX) maxX = right;
-        if (top < minY) minY = top;
-        if (bottom > maxY) maxY = bottom;
+        const left2 = member.x - member.width / 2;
+        const right2 = member.x + member.width / 2;
+        const top2 = member.y - member.height / 2;
+        const bottom2 = member.y + member.height / 2;
+        if (left2 < minX) minX = left2;
+        if (right2 > maxX) maxX = right2;
+        if (top2 < minY) minY = top2;
+        if (bottom2 > maxY) maxY = bottom2;
       }
       layoutGroups.push({
         id: group.id,
@@ -54371,15 +54919,15 @@ function renderDocument(g, node, palette, isDark, colorOff, fillMode, sNodeStrok
   const w = node.width;
   const h = node.height;
   const waveH = sDocWaveHeight;
-  const left = -w / 2;
-  const right = w / 2;
-  const top = -h / 2;
-  const bottom = h / 2 - waveH;
+  const left2 = -w / 2;
+  const right2 = w / 2;
+  const top2 = -h / 2;
+  const bottom2 = h / 2 - waveH;
   const d = [
-    `M ${left} ${top}`,
-    `L ${right} ${top}`,
-    `L ${right} ${bottom}`,
-    `C ${right - w * 0.25} ${bottom + waveH * 2}, ${left + w * 0.25} ${bottom - waveH}, ${left} ${bottom}`,
+    `M ${left2} ${top2}`,
+    `L ${right2} ${top2}`,
+    `L ${right2} ${bottom2}`,
+    `C ${right2 - w * 0.25} ${bottom2 + waveH * 2}, ${left2 + w * 0.25} ${bottom2 - waveH}, ${left2} ${bottom2}`,
     "Z"
   ].join(" ");
   g.append("path").attr("d", d).attr(
@@ -54745,7 +55293,7 @@ function renderFlowchartForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -54754,6 +55302,7 @@ var DIAGRAM_PADDING10, MAX_SCALE6, NODE_FONT_SIZE3, EDGE_LABEL_FONT_SIZE9, ARROW
 var init_flowchart_renderer = __esm({
   "src/graph/flowchart-renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_parsing();
     init_arrow_markers();
     init_fit_canvas();
@@ -56160,14 +56709,14 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
       }
       let minX2 = Infinity, minY2 = Infinity, maxX2 = -Infinity, maxY2 = -Infinity;
       for (const child of childNodes) {
-        const left = child.x - child.width / 2;
-        const right = child.x + child.width / 2;
-        const top = child.y - child.height / 2;
-        const bottom = child.y + child.height / 2;
-        if (left < minX2) minX2 = left;
-        if (right > maxX2) maxX2 = right;
-        if (top < minY2) minY2 = top;
-        if (bottom > maxY2) maxY2 = bottom;
+        const left2 = child.x - child.width / 2;
+        const right2 = child.x + child.width / 2;
+        const top2 = child.y - child.height / 2;
+        const bottom2 = child.y + child.height / 2;
+        if (left2 < minX2) minX2 = left2;
+        if (right2 > maxX2) maxX2 = right2;
+        if (top2 < minY2) minY2 = top2;
+        if (bottom2 > maxY2) maxY2 = bottom2;
       }
       return {
         id: group.id,
@@ -56185,14 +56734,14 @@ function layoutInfra(computed, expandedNodeIds, collapsedNodes) {
   fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const node of layoutNodes) {
-    const left = node.x - node.width / 2;
-    const right = node.x + node.width / 2;
-    const top = node.y - node.height / 2;
-    const bottom = node.y + node.height / 2;
-    if (left < minX) minX = left;
-    if (right > maxX) maxX = right;
-    if (top < minY) minY = top;
-    if (bottom > maxY) maxY = bottom;
+    const left2 = node.x - node.width / 2;
+    const right2 = node.x + node.width / 2;
+    const top2 = node.y - node.height / 2;
+    const bottom2 = node.y + node.height / 2;
+    if (left2 < minX) minX = left2;
+    if (right2 > maxX) maxX = right2;
+    if (top2 < minY) minY = top2;
+    if (bottom2 > maxY) maxY = bottom2;
   }
   for (const group of layoutGroups) {
     if (group.x < minX) minX = group.x;
@@ -56512,7 +57061,7 @@ function findRoutingLane(blocking, targetY, margin) {
     }
   }
   if (merged.length === 0) return targetY;
-  const MIN_GAP = 10;
+  const MIN_GAP2 = 10;
   const candidates = [
     // In-bounds: merged.length > 0 guarded above.
     merged[0][0] - margin,
@@ -56523,7 +57072,7 @@ function findRoutingLane(blocking, targetY, margin) {
   for (let i = 0; i < merged.length - 1; i++) {
     const gapLo = merged[i][1];
     const gapHi = merged[i + 1][0];
-    if (gapHi - gapLo >= MIN_GAP) {
+    if (gapHi - gapLo >= MIN_GAP2) {
       candidates.push((gapLo + gapHi) / 2);
     }
   }
@@ -59172,14 +59721,14 @@ function relayoutPert(resolved, overrides, collapsedGroupIds = /* @__PURE__ */ n
     let maxX = -Infinity;
     let maxY = -Infinity;
     for (const m of members) {
-      const left = m.x - m.width / 2;
-      const right = m.x + m.width / 2;
-      const top = m.y - m.height / 2;
-      const bottom = m.y + m.height / 2;
-      if (left < minX) minX = left;
-      if (right > maxX) maxX = right;
-      if (top < minY) minY = top;
-      if (bottom > maxY) maxY = bottom;
+      const left2 = m.x - m.width / 2;
+      const right2 = m.x + m.width / 2;
+      const top2 = m.y - m.height / 2;
+      const bottom2 = m.y + m.height / 2;
+      if (left2 < minX) minX = left2;
+      if (right2 > maxX) maxX = right2;
+      if (top2 < minY) minY = top2;
+      if (bottom2 > maxY) maxY = bottom2;
     }
     return {
       id: rg.group.id,
@@ -59193,10 +59742,10 @@ function relayoutPert(resolved, overrides, collapsedGroupIds = /* @__PURE__ */ n
   let totalW = 0;
   let totalH = 0;
   for (const n of nodes) {
-    const right = n.x + n.width / 2;
-    const bottom = n.y + n.height / 2;
-    if (right > totalW) totalW = right;
-    if (bottom > totalH) totalH = bottom;
+    const right2 = n.x + n.width / 2;
+    const bottom2 = n.y + n.height / 2;
+    if (right2 > totalW) totalW = right2;
+    if (bottom2 > totalH) totalH = bottom2;
   }
   for (const grp of groups) {
     if (grp.x + grp.width > totalW) totalW = grp.x + grp.width;
@@ -59369,15 +59918,15 @@ function centerByCriticality(g, resolved, memberToGroup, collapsedGroupIds) {
       if (cb !== ca) return cb - ca;
       return (currentSlot.get(a) ?? 0) - (currentSlot.get(b) ?? 0);
     });
-    const top = [];
-    const bottom = [];
+    const top2 = [];
+    const bottom2 = [];
     let middle = null;
     sortedDesc.forEach((id, i) => {
       if (i === 0) middle = id;
-      else if (i % 2 === 1) top.unshift(id);
-      else bottom.push(id);
+      else if (i % 2 === 1) top2.unshift(id);
+      else bottom2.push(id);
     });
-    const newOrder = middle ? [...top, middle, ...bottom] : [...top, ...bottom];
+    const newOrder = middle ? [...top2, middle, ...bottom2] : [...top2, ...bottom2];
     newOrder.forEach((id, i) => {
       const node = g.node(id);
       const oldVal = node[slotAxis];
@@ -59805,7 +60354,7 @@ function renderPertForExport(content, theme, palette, now) {
     else svgEl.style.background = palette.bg;
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -60690,10 +61239,10 @@ function drawMilestonePill(g, a) {
     drawCenteredText(x + w / 2, y + h - botRowH / 2, a.slack, "normal", sNCFS);
   }
 }
-function drawAnchorPin(g, left, centerY, color, pinW = PIN_ICON_W, pinH = PIN_ICON_H) {
+function drawAnchorPin(g, left2, centerY, color, pinW = PIN_ICON_W, pinH = PIN_ICON_H) {
   const scale = pinW / 24;
-  const top = centerY - pinH / 2;
-  const pin = g.append("g").attr("class", "pert-pin").attr("data-pert-pin", "").attr("transform", `translate(${left}, ${top}) scale(${scale})`);
+  const top2 = centerY - pinH / 2;
+  const pin = g.append("g").attr("class", "pert-pin").attr("data-pert-pin", "").attr("transform", `translate(${left2}, ${top2}) scale(${scale})`);
   pin.append("path").attr("d", "M12 22V8 M5 12H2a10 10 0 0 0 20 0h-3").attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
   pin.append("circle").attr("cx", 12).attr("cy", 5).attr("r", 3).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2);
 }
@@ -61227,6 +61776,7 @@ var DIAGRAM_PADDING12, NODE_FONT_SIZE6, NODE_CELL_FONT_SIZE2, NODE_RADIUS2, NODE
 var init_renderer18 = __esm({
   "src/pert/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_fonts();
     init_color_utils();
     init_scaling();
@@ -64640,7 +65190,7 @@ function renderStateForExport(content, theme, palette) {
     }
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -64649,6 +65199,7 @@ var DIAGRAM_PADDING13, MAX_SCALE7, NODE_FONT_SIZE7, EDGE_LABEL_FONT_SIZE12, GROU
 var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_parsing();
     init_inline_header();
     init_arrow_markers();
@@ -65975,14 +66526,14 @@ function positionPopover(popover, event) {
   const cursorY = event.clientY - rect2.top;
   const centerX = rect2.width / 2;
   const centerY = rect2.height / 2;
-  let left = cursorX < centerX ? cursorX + 16 : cursorX - tipW - 16;
-  let top = cursorY < centerY ? cursorY + 16 : cursorY - tipH - 16;
-  if (left + tipW > rect2.width - 4) left = rect2.width - tipW - 4;
-  if (left < 4) left = 4;
-  if (top + tipH > rect2.height - 4) top = rect2.height - tipH - 4;
-  if (top < 4) top = 4;
-  popover.style.left = `${left}px`;
-  popover.style.top = `${top}px`;
+  let left2 = cursorX < centerX ? cursorX + 16 : cursorX - tipW - 16;
+  let top2 = cursorY < centerY ? cursorY + 16 : cursorY - tipH - 16;
+  if (left2 + tipW > rect2.width - 4) left2 = rect2.width - tipW - 4;
+  if (left2 < 4) left2 = 4;
+  if (top2 + tipH > rect2.height - 4) top2 = rect2.height - tipH - 4;
+  if (top2 < 4) top2 = 4;
+  popover.style.left = `${left2}px`;
+  popover.style.top = `${top2}px`;
 }
 function hideBlipPopover(popover) {
   popover.style.display = "none";
@@ -67193,12 +67744,13 @@ function renderJourneyMapForExport(content, theme, palette) {
     const bgRect = svgEl.querySelector("rect:first-child");
     if (bgRect) bgRect.remove();
   }
-  return svgEl.outerHTML;
+  return serializeSvg(svgEl);
 }
 var DIAGRAM_PADDING14, 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, CURVE_AREA_BOTTOM_GAP, FACE_HOVER_SCALE, FACE_HOVER_R, DIM_HOVER, TITLE_LINE_HEIGHT, EMOTION_LABEL_MAX_WIDTH, EMOTION_LABEL_FONT_SIZE, ICON_THUMBS_DOWN, ICON_THUMBS_UP, ICON_THOUGHT;
 var init_renderer21 = __esm({
   "src/journey-map/renderer.ts"() {
     "use strict";
+    init_svg_serialize();
     init_tag_groups();
     init_parsing();
     init_color_utils();
@@ -69893,13 +70445,13 @@ function placeContextLabels(args) {
     if (!rectFits(rect2, width, height)) return null;
     if (cand.italic && overLand) {
       const inset = 2;
-      const top = cy - (cand.lines.length - 1) / 2 * LINE_HEIGHT;
+      const top2 = cy - (cand.lines.length - 1) / 2 * LINE_HEIGHT;
       const touchesLand = cand.lines.some((line11, li) => {
         const lw = labelWidth(line11, cand.letterSpacing);
         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;
+        const base = top2 + li * LINE_HEIGHT;
         return [base, base - FONT * 0.4, base - FONT * 0.8].some(
           (y) => xs.some((x) => overLand(x, y))
         );
@@ -70724,12 +71276,12 @@ function layoutMap(resolvedIn, data, size, opts) {
       const sh = Number.isFinite(bb[0][0]) ? bb[1][1] - bb[0][1] : iw;
       const needH = sh + 2 * PAD3;
       let topFit = topGuess;
-      const bottom = Math.min(topFit + needH, yB);
-      if (bottom - topFit < needH) topFit = bottom - needH;
+      const bottom2 = Math.min(topFit + needH, yB);
+      if (bottom2 - topFit < needH) topFit = bottom2 - needH;
       proj.fitExtent(
         [
           [x0 + PAD3, topFit + PAD3],
-          [xr - PAD3, bottom - PAD3]
+          [xr - PAD3, bottom2 - PAD3]
         ],
         f
       );
@@ -70757,12 +71309,12 @@ function layoutMap(resolvedIn, data, size, opts) {
         x: x0,
         y: topFit,
         w: xr - x0,
-        h: bottom - topFit,
+        h: bottom2 - topFit,
         points: [
           [x0, topFit],
           [xr, topFit],
-          [xr, bottom],
-          [x0, bottom]
+          [xr, bottom2],
+          [x0, bottom2]
         ],
         // The FITTED inset projection (just fit to this box) — captured so the
         // geo-query can invert pixels inside the frame back to AK/HI coords.
@@ -72083,11 +72635,11 @@ function layoutMap(resolvedIn, data, size, opts) {
     const COL_GAP2 = 16;
     const makeItems = (group) => group.map((p) => ({ p, ...labelInfo(p) })).sort((a, b) => a.p.cy - b.p.cy || (a.text < b.text ? -1 : 1));
     const columnRows = (items, side) => {
-      const left = Math.min(...items.map((o) => o.p.cx - o.p.r));
-      const right = Math.max(...items.map((o) => o.p.cx + o.p.r));
+      const left2 = Math.min(...items.map((o) => o.p.cx - o.p.r));
+      const right2 = Math.max(...items.map((o) => o.p.cx + o.p.r));
       const maxW = Math.max(...items.map((o) => o.w));
       const cyMid = (Math.min(...items.map((o) => o.p.cy)) + Math.max(...items.map((o) => o.p.cy))) / 2;
-      const colX = side === "right" ? Math.min(right + COL_GAP2, width - POI_EDGE_CLEAR - maxW) : Math.max(left - COL_GAP2, POI_EDGE_CLEAR + maxW);
+      const colX = side === "right" ? Math.min(right2 + COL_GAP2, width - POI_EDGE_CLEAR - maxW) : Math.max(left2 - COL_GAP2, POI_EDGE_CLEAR + maxW);
       const totalH = items.length * step;
       let startY = cyMid - totalH / 2;
       startY = Math.max(
@@ -72285,11 +72837,11 @@ function layoutMap(resolvedIn, data, size, opts) {
         pushInline(p, text, w, side);
         continue;
       }
-      const left = Math.min(...items.map((o) => o.p.cx - o.p.r));
-      const right = Math.max(...items.map((o) => o.p.cx + o.p.r));
+      const left2 = Math.min(...items.map((o) => o.p.cx - o.p.r));
+      const right2 = Math.max(...items.map((o) => o.p.cx + o.p.r));
       const minCy = Math.min(...items.map((o) => o.p.cy));
       const maxCy = Math.max(...items.map((o) => o.p.cy));
-      const diag = Math.hypot(right - left, maxCy - minCy);
+      const diag = Math.hypot(right2 - left2, maxCy - minCy);
       if (diag > maxExtent || items.length > MAX_COLUMN_ROWS) {
         items.forEach((o) => pushHidden(o.p));
       } else {
@@ -72349,18 +72901,18 @@ function layoutMap(resolvedIn, data, size, opts) {
       needBottom = Math.min(Math.max(0, Math.ceil(needBottom)), capV);
       if (needLeft >= 1 || needRight >= 1 || needTop >= 1 || needBottom >= 1) {
         const prev = opts._calloutReserve;
-        const left = Math.min((prev?.left ?? 0) + needLeft, capH);
-        const right = Math.min((prev?.right ?? 0) + needRight, capH);
-        const top = Math.min((prev?.top ?? 0) + needTop, capV);
-        const bottom = Math.min((prev?.bottom ?? 0) + needBottom, capV);
+        const left2 = Math.min((prev?.left ?? 0) + needLeft, capH);
+        const right2 = Math.min((prev?.right ?? 0) + needRight, capH);
+        const top2 = Math.min((prev?.top ?? 0) + needTop, capV);
+        const bottom2 = Math.min((prev?.bottom ?? 0) + needBottom, capV);
         return layoutMap(resolved, data, size, {
           ...opts,
           _poiClearancePass: clearancePass + 1,
           _calloutReserve: {
-            ...left > 0 && { left },
-            ...right > 0 && { right },
-            ...top > 0 && { top },
-            ...bottom > 0 && { bottom }
+            ...left2 > 0 && { left: left2 },
+            ...right2 > 0 && { right: right2 },
+            ...top2 > 0 && { top: top2 },
+            ...bottom2 > 0 && { bottom: bottom2 }
           }
         });
       }
@@ -74350,8 +74902,8 @@ function layoutTreemapRadial(roots, opts) {
   );
   const ringSpan = Math.max(1, radius - discRadius);
   const ringWidth = ringSpan / Math.max(1, treeDepth);
-  (hroot.children ?? []).forEach((top, i) => {
-    top.each((d) => {
+  (hroot.children ?? []).forEach((top2, i) => {
+    top2.each((d) => {
       d._topIndex = i;
     });
   });
@@ -74785,14 +75337,14 @@ function fitFs(text, maxFs, availLen) {
   return Math.max(MIN_LABEL_FS, Math.floor(maxFs * availLen / w));
 }
 function drawCurvedLine(g, defs, pathId, cell, centerR, fs, weight, text, ink) {
-  const bottom = isBottomHalf(cell);
-  const rPath = bottom ? centerR + fs * 0.32 : centerR - fs * 0.32;
-  const [a0, a1] = bottom ? [cell.endAngle, cell.startAngle] : [cell.startAngle, cell.endAngle];
+  const bottom2 = isBottomHalf(cell);
+  const rPath = bottom2 ? centerR + fs * 0.32 : centerR - fs * 0.32;
+  const [a0, a1] = bottom2 ? [cell.endAngle, cell.startAngle] : [cell.startAngle, cell.endAngle];
   const p0x = Math.sin(a0) * rPath;
   const p0y = -Math.cos(a0) * rPath;
   const p1x = Math.sin(a1) * rPath;
   const p1y = -Math.cos(a1) * rPath;
-  const sweepFlag = bottom ? 0 : 1;
+  const sweepFlag = bottom2 ? 0 : 1;
   const largeArc = cell.endAngle - cell.startAngle > Math.PI ? 1 : 0;
   const d = `M ${p0x.toFixed(2)} ${p0y.toFixed(2)} A ${rPath.toFixed(2)} ${rPath.toFixed(2)} 0 ${largeArc} ${sweepFlag} ${p1x.toFixed(2)} ${p1y.toFixed(2)}`;
   defs.append("path").attr("id", pathId).attr("d", d);
@@ -74917,8 +75469,8 @@ function layoutTreemap(roots, opts) {
   const h = hierarchy3(rootDatum).sum((d) => d.children?.length ? 0 : d.value ?? 0).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
   const hroot = treemap().tile(treemapSquarify).size([opts.width, opts.height]).paddingOuter(opts.paddingOuter ?? 3).paddingTop(opts.headerH > 0 ? opts.headerH : opts.paddingInner ?? 2).paddingInner(opts.paddingInner ?? 2).round(true)(h);
   const total = hroot.value ?? 0;
-  (hroot.children ?? []).forEach((top, i) => {
-    top.each((d) => {
+  (hroot.children ?? []).forEach((top2, i) => {
+    top2.each((d) => {
       d._topIndex = i;
     });
   });
@@ -75790,13 +76342,13 @@ function renderWrappedMarkdown(textEl, lines, lineH) {
     }
   });
 }
-function drawNote(svg, description, paint, left, top, width) {
+function drawNote(svg, description, paint, left2, top2, width) {
   const descSize = 15;
   const lineH = descSize * 1.4;
   const maxChars = Math.max(8, Math.floor(width / (descSize * 0.46)));
-  const firstY = top + descSize;
-  const lines = layoutDescription(description, left, maxChars);
-  const desc = svg.append("text").attr("x", left).attr("y", firstY).attr("text-anchor", "start").attr("fill", paint.muted).attr("font-family", FONT_FAMILY).attr("font-size", descSize).attr("font-weight", 500);
+  const firstY = top2 + descSize;
+  const lines = layoutDescription(description, left2, maxChars);
+  const desc = svg.append("text").attr("x", left2).attr("y", firstY).attr("text-anchor", "start").attr("fill", paint.muted).attr("font-family", FONT_FAMILY).attr("font-size", descSize).attr("font-weight", 500);
   renderWrappedMarkdown(desc, lines, lineH);
   return firstY + lines.length * lineH;
 }
@@ -75834,15 +76386,15 @@ function renderBar2(svg, parsed, metrics, paint) {
   if (parsed.hasTarget) {
     g.append("text").attr("x", barRight + gap).attr("y", barCy + 26 * 0.35).attr("text-anchor", "start").attr("fill", paint.text).attr("font-family", FONT_FAMILY).attr("font-size", 26).attr("font-weight", 700).text(compactNumber2(parsed.target));
   }
-  let bottom = y + trackH;
+  let bottom2 = y + trackH;
   if (parsed.description && !parsed.options.noNote) {
-    bottom = drawNote(svg, parsed.description, paint, x, bottom + 40, trackW);
+    bottom2 = drawNote(svg, parsed.description, paint, x, bottom2 + 40, trackW);
   }
   return {
     minX: 0,
     minY: 0,
     maxX: barRight + gap + targetLabelW,
-    maxY: bottom
+    maxY: bottom2
   };
 }
 function renderThermometer(svg, parsed, metrics, paint) {
@@ -75943,12 +76495,12 @@ function renderGauge(svg, parsed, metrics, paint) {
   let colBottom = crestTop;
   if (hasNote) {
     const titleSize = GOAL_TITLE_SIZE;
-    let top = crestTop;
+    let top2 = crestTop;
     if (parsed.title && !parsed.options.noTitle) {
-      svg.append("text").attr("class", "chart-title").attr("x", colLeft).attr("y", top + titleSize * 0.78).attr("text-anchor", "start").attr("fill", paint.text).attr("font-family", FONT_FAMILY).attr("font-size", titleSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber).text(parsed.title);
-      top += titleSize * 0.78 + 16;
+      svg.append("text").attr("class", "chart-title").attr("x", colLeft).attr("y", top2 + titleSize * 0.78).attr("text-anchor", "start").attr("fill", paint.text).attr("font-family", FONT_FAMILY).attr("font-size", titleSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber).text(parsed.title);
+      top2 += titleSize * 0.78 + 16;
     }
-    colBottom = drawNote(svg, parsed.description, paint, colLeft, top, colW);
+    colBottom = drawNote(svg, parsed.description, paint, colLeft, top2, colW);
   } else if (hasTopTitle) {
     faceTitle(svg, parsed, paint, cx, GOAL_TITLE_SIZE);
   }
@@ -76474,7 +77026,7 @@ function vizMonthGrid(svg, g, nowMs, resolvedMs, C) {
   const gridW = mw - 2 * padX;
   const cols = 7;
   const cellW = gridW / cols;
-  const top = g.top;
+  const top2 = g.top;
   const headH = 26;
   const cellH = (g.height - headH - 8) / 6;
   const gridH = 6 * cellH;
@@ -76484,8 +77036,8 @@ function vizMonthGrid(svg, g, nowMs, resolvedMs, C) {
   months.forEach((m, mi) => {
     const mt = isContext[mi] ? svg.append("g").attr("opacity", 0.42) : svg;
     const mx = g.left + mi * (mw + gap);
-    aRect(mt, mx, top, mw, g.height, 14, C.inert, C.inertBorder, 1.25);
-    const gy = top + headH;
+    aRect(mt, mx, top2, mw, g.height, 14, C.inert, C.inertBorder, 1.25);
+    const gy = top2 + headH;
     for (const wcol of [0, 6])
       aRect(
         mt,
@@ -76499,14 +77051,14 @@ function vizMonthGrid(svg, g, nowMs, resolvedMs, C) {
     aText(
       mt,
       mx + mw / 2,
-      top + 16,
+      top2 + 16,
       14,
       C.text,
       700,
       "middle",
       `${MON_ABBR[m.getMonth()]} ${m.getFullYear()}`
     );
-    aLine(mt, mx, top + headH - 6, mx + mw, top + headH - 6, C.rule, 1.25);
+    aLine(mt, mx, top2 + headH - 6, mx + mw, top2 + headH - 6, C.rule, 1.25);
     const first = new Date(m.getFullYear(), m.getMonth(), 1).getDay();
     const dim = new Date(m.getFullYear(), m.getMonth() + 1, 0).getDate();
     for (let day = 1; day <= dim; day++) {
@@ -77348,9 +77900,9 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
   if (status) lines.push({ kind: "avail" });
   if (sun) lines.push({ kind: "sun" });
   const lh = 23;
-  const top = center + 10 - (lines.length - 1) * lh / 2;
+  const top2 = center + 10 - (lines.length - 1) * lh / 2;
   lines.forEach((ln, i) => {
-    const yy = top + i * lh;
+    const yy = top2 + i * lh;
     if (ln.kind === "place") {
       g.append("path").attr("transform", `translate(${iconX},${yy - 5}) scale(1.25)`).attr("d", "M0,4 L-2.3,-0.6 A2.6,2.6 0 1 1 2.3,-0.6 Z").attr("fill", muted);
       g.append("text").attr("x", textX).attr("y", yy).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", 14).attr("font-weight", 500).text(ellipsize(entry.place, 14, textMax));
@@ -77390,15 +77942,15 @@ function bakeAnchors(g, entry, parsed, sun, sw) {
     );
   }
 }
-function drawColumns(body, parsed, now, top, geom, col) {
+function drawColumns(body, parsed, now, top2, geom, col) {
   const { width, cardM } = geom;
   const { text, muted, line2: line22, tick, cardFill, sw } = col;
   const n = Math.max(1, parsed.entries.length);
   const colW = (width - 2 * cardM) / n;
   const tints = [];
-  let maxBottom = top;
+  let maxBottom = top2;
   const deferred = [];
-  let detailTop = top;
+  let detailTop = top2;
   parsed.entries.forEach((entry, i) => {
     const x0 = cardM + i * colW;
     const cx = x0 + colW / 2;
@@ -77437,13 +77989,13 @@ function drawColumns(body, parsed, now, top, geom, col) {
     bakeAnchors(g, entry, parsed, sun, sw);
     if (auto)
       tints.push(
-        g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", x0).attr("y", top).attr("width", colW).attr("fill", fm === "outline" ? col.baseBg : auto.laneTint)
+        g.append("rect").attr("data-dgmo-clock-lane", "").attr("x", x0).attr("y", top2).attr("width", colW).attr("fill", fm === "outline" ? col.baseBg : auto.laneTint)
       );
     if (auto) {
       g.attr("data-dgmo-clock-auto-solid", auto.solid).attr("data-dgmo-clock-auto-face", faceFill).attr("data-dgmo-clock-auto-mode", parsed.colorBy).attr("data-dgmo-clock-cardfill", cardFill);
     }
     if (fm) g.attr("data-dgmo-clock-fill-mode", fm);
-    let cy = top + (parsed.face === "analog" ? 22 : 36);
+    let cy = top2 + (parsed.face === "analog" ? 22 : 36);
     const innerW = colW - 16;
     if (parsed.face === "analog") {
       const size = Math.min(innerW, 96);
@@ -77534,17 +78086,17 @@ function drawColumns(body, parsed, now, top, geom, col) {
   });
   deferred.forEach((d) => {
     d.draw(detailTop);
-    const bottom = d.kinds ? detailTop + (d.kinds - 1) * 20 + 8 : detailTop;
-    if (bottom > maxBottom) maxBottom = bottom;
+    const bottom2 = d.kinds ? detailTop + (d.kinds - 1) * 20 + 8 : detailTop;
+    if (bottom2 > maxBottom) maxBottom = bottom2;
   });
-  const colBodyH = maxBottom - top + 14;
+  const colBodyH = maxBottom - top2 + 14;
   tints.forEach((r) => r.attr("height", colBodyH));
   const dividerColor = mix(col.palette.text, col.palette.bg, 40);
   for (let i = 1; i < n; i++) {
     const x = cardM + i * colW;
-    body.append("line").attr("data-dgmo-clock-col-divider", "").attr("x1", x).attr("x2", x).attr("y1", top).attr("y2", top + colBodyH).attr("stroke", dividerColor).attr("stroke-width", 1);
+    body.append("line").attr("data-dgmo-clock-col-divider", "").attr("x1", x).attr("x2", x).attr("y1", top2).attr("y2", top2 + colBodyH).attr("stroke", dividerColor).attr("stroke-width", 1);
   }
-  return top + colBodyH + cardM;
+  return top2 + colBodyH + cardM;
 }
 function renderClockForExport(container, parsed, palette, isDark, exportDims) {
   renderClock(container, parsed, palette, isDark, exportDims);
@@ -77960,36 +78512,36 @@ function layoutBracket(parsed) {
       champion = winnerNameOf(finalNode);
     }
   } else {
-    const left = groups[0];
-    const right = groups[1];
-    const L = left.built.rounds;
-    const R = right.built.rounds;
+    const left2 = groups[0];
+    const right2 = groups[1];
+    const L = left2.built.rounds;
+    const R = right2.built.rounds;
     const centerX = L * COL_W + BOX_W / 2;
-    for (const n of left.built.nodes) {
+    for (const n of left2.built.nodes) {
       n.x = (n.round - 1) * COL_W + BOX_W / 2;
       n.y = n.y * rowScale;
       allNodes.push(n);
       nodeById.set(n.id, n);
       addColLabel(n.x, roundLabel(n.round, L, parsed.roundNames, true));
     }
-    for (const n of right.built.nodes) {
+    for (const n of right2.built.nodes) {
       n.x = centerX + (R - n.round + 1) * COL_W;
       n.y = n.y * rowScale;
       allNodes.push(n);
       nodeById.set(n.id, n);
       addColLabel(n.x, roundLabel(n.round, R, parsed.roundNames, true));
     }
-    if (left.label)
-      pushSide(0, (L - 1) * COL_W + BOX_W, left.label, left.color);
-    if (right.label)
+    if (left2.label)
+      pushSide(0, (L - 1) * COL_W + BOX_W, left2.label, left2.color);
+    if (right2.label)
       pushSide(
         centerX + COL_W - BOX_W / 2,
         centerX + R * COL_W + BOX_W / 2,
-        right.label,
-        right.color
+        right2.label,
+        right2.color
       );
-    const leftRoot = left.built.rootId !== null ? nodeById.get(left.built.rootId) : null;
-    const rightRoot = right.built.rootId !== null ? nodeById.get(right.built.rootId) : null;
+    const leftRoot = left2.built.rootId !== null ? nodeById.get(left2.built.rootId) : null;
+    const rightRoot = right2.built.rootId !== null ? nodeById.get(right2.built.rootId) : null;
     const cid = nextId();
     const champNode = {
       id: cid,
@@ -78323,9 +78875,9 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     const covered = layout.sideLabels.some(
       (s) => col.x >= s.x0 && col.x <= s.x1
     );
-    const top = covered ? bandTop : 2;
+    const top2 = covered ? bandTop : 2;
     const c = resolveColor(col.color, palette) ?? col.color;
-    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top)).attr("rx", 10).attr(
+    root.append("rect").attr("x", col.x - BOX_W / 2 - 10).attr("y", top2).attr("width", BOX_W + 20).attr("height", Math.max(0, layout.height - top2)).attr("rx", 10).attr(
       "fill",
       fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(c, palette.bg, isDark ? 12 : 8)
     ).call((sel) => {
@@ -79671,20 +80223,20 @@ function buildRenderSequence(messages) {
   for (let mi = 0; mi < messages.length; mi++) {
     const msg = messages[mi];
     while (stack.length > 0) {
-      const top = stack[stack.length - 1];
-      if (top.to === msg.from) break;
+      const top2 = stack[stack.length - 1];
+      if (top2.to === msg.from) break;
       stack.pop();
       steps.push({
         type: "return",
-        from: top.to,
-        to: top.from,
+        from: top2.to,
+        to: top2.from,
         label: "",
-        messageIndex: top.messageIndex
+        messageIndex: top2.messageIndex
       });
     }
     if (stack.length > 0 && !msg.async && msg.from !== msg.to) {
-      const top = stack[stack.length - 1];
-      if (top.from === msg.to && top.to === msg.from) {
+      const top2 = stack[stack.length - 1];
+      if (top2.from === msg.to && top2.to === msg.from) {
         stack.pop();
         steps.push({
           type: "return",
@@ -79724,13 +80276,13 @@ function buildRenderSequence(messages) {
     }
   }
   while (stack.length > 0) {
-    const top = stack.pop();
+    const top2 = stack.pop();
     steps.push({
       type: "return",
-      from: top.to,
-      to: top.from,
+      from: top2.to,
+      to: top2.from,
       label: "",
-      messageIndex: top.messageIndex
+      messageIndex: top2.messageIndex
     });
   }
   return steps;
@@ -79836,11 +80388,11 @@ function applyGroupOrdering(participants, groups, messages = []) {
     const group = idToGroup.get(id);
     if (group && !placedGroups.has(group)) {
       placedGroups.add(group);
-      for (const gid of group.participantIds) {
-        const p = participants.find((pp) => pp.id === gid);
-        if (p && !placed.has(gid)) {
+      for (const gid2 of group.participantIds) {
+        const p = participants.find((pp) => pp.id === gid2);
+        if (p && !placed.has(gid2)) {
           result.push(p);
-          placed.add(gid);
+          placed.add(gid2);
         }
       }
     } else if (!group) {
@@ -81687,12 +82239,12 @@ function resolveVerticalCollisions(items, minGap, maxY) {
   let prevBottom = -Infinity;
   for (const item of sorted) {
     const halfH = item.height / 2;
-    let top = Math.max(item.naturalY - halfH, prevBottom + minGap);
+    let top2 = Math.max(item.naturalY - halfH, prevBottom + minGap);
     if (maxY !== void 0) {
-      top = Math.min(top, maxY - item.height);
+      top2 = Math.min(top2, maxY - item.height);
     }
-    adjustedY[item.idx] = top + halfH;
-    prevBottom = top + item.height;
+    adjustedY[item.idx] = top2 + halfH;
+    prevBottom = top2 + item.height;
   }
   return adjustedY;
 }
@@ -82753,8 +83305,8 @@ function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims
     const cci = circles[ci];
     const dy = py - cci.y;
     const halfChord = Math.sqrt(Math.max(0, cci.r * cci.r - dy * dy));
-    let left = cci.x - halfChord;
-    let right = cci.x + halfChord;
+    let left2 = cci.x - halfChord;
+    let right2 = cci.x + halfChord;
     for (let j = 0; j < n; j++) {
       if (j === ci) continue;
       const cj = circles[j];
@@ -82763,11 +83315,11 @@ function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims
       const hc = Math.sqrt(cj.r * cj.r - djy * djy);
       const jLeft = cj.x - hc;
       const jRight = cj.x + hc;
-      if (jLeft <= left && jRight >= right) return 0;
-      if (jLeft <= left && jRight > left) left = jRight;
-      if (jRight >= right && jLeft < right) right = jLeft;
+      if (jLeft <= left2 && jRight >= right2) return 0;
+      if (jLeft <= left2 && jRight > left2) left2 = jRight;
+      if (jRight >= right2 && jLeft < right2) right2 = jLeft;
     }
-    return Math.max(0, right - left);
+    return Math.max(0, right2 - left2);
   }
   const MIN_FONT = ctx.text(10);
   const MAX_FONT = ctx.text(22);
@@ -86702,7 +87254,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.55.0";
+var VERSION = "0.56.0";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";