@diagrammo/dgmo 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -1307,6 +1307,31 @@ function collectIndentedValues(lines, startIndex) {
   }
   return { values, newIndex: j - 1 };
 }
+function parseSeriesNames(value, lines, lineIndex, palette) {
+  let rawNames;
+  let series;
+  let newIndex = lineIndex;
+  if (value) {
+    series = value;
+    rawNames = value.split(",").map((s) => s.trim()).filter(Boolean);
+  } else {
+    const collected = collectIndentedValues(lines, lineIndex);
+    newIndex = collected.newIndex;
+    rawNames = collected.values;
+    series = rawNames.join(", ");
+  }
+  const names = [];
+  const nameColors = [];
+  for (const raw of rawNames) {
+    const extracted = extractColor(raw, palette);
+    nameColors.push(extracted.color);
+    names.push(extracted.label);
+  }
+  if (names.length === 1) {
+    series = names[0];
+  }
+  return { series, names, nameColors, newIndex };
+}
 function parsePipeMetadata(segments, aliasMap = /* @__PURE__ */ new Map()) {
   const metadata = {};
   for (let j = 1; j < segments.length; j++) {
@@ -1612,13 +1637,18 @@ var init_participant_inference = __esm({
 
 // src/utils/arrows.ts
 function parseArrow(line7) {
+  if (BIDI_SYNC_RE.test(line7) || BIDI_ASYNC_RE.test(line7)) {
+    return {
+      error: "Bidirectional arrows are no longer supported. Use two separate lines: 'A -msg-> B' and 'B -msg-> A'"
+    };
+  }
   const patterns = [
-    { re: BIDI_SYNC_LABELED_RE, async: false, bidirectional: true },
-    { re: BIDI_ASYNC_LABELED_RE, async: true, bidirectional: true },
-    { re: SYNC_LABELED_RE, async: false, bidirectional: false },
-    { re: ASYNC_LABELED_RE, async: true, bidirectional: false }
+    { re: RETURN_SYNC_LABELED_RE, async: false, isReturn: true },
+    { re: RETURN_ASYNC_LABELED_RE, async: true, isReturn: true },
+    { re: SYNC_LABELED_RE, async: false, isReturn: false },
+    { re: ASYNC_LABELED_RE, async: true, isReturn: false }
   ];
-  for (const { re, async: isAsync, bidirectional } of patterns) {
+  for (const { re, async: isAsync, isReturn } of patterns) {
     const m = line7.match(re);
     if (!m) continue;
     const label = m[2].trim();
@@ -1626,29 +1656,40 @@ function parseArrow(line7) {
     for (const arrow of ARROW_CHARS) {
       if (label.includes(arrow)) {
         return {
-          error: "Arrow characters (->, ~>) are not allowed inside labels"
+          error: "Arrow characters (->, ~>, <-, <~) are not allowed inside labels"
         };
       }
     }
+    if (isReturn) {
+      return {
+        from: m[3],
+        to: m[1],
+        label,
+        async: isAsync,
+        isReturn: true
+      };
+    }
     return {
       from: m[1],
       to: m[3],
       label,
       async: isAsync,
-      bidirectional
+      isReturn: false
     };
   }
   return null;
 }
-var BIDI_SYNC_LABELED_RE, BIDI_ASYNC_LABELED_RE, SYNC_LABELED_RE, ASYNC_LABELED_RE, ARROW_CHARS;
+var SYNC_LABELED_RE, ASYNC_LABELED_RE, RETURN_SYNC_LABELED_RE, RETURN_ASYNC_LABELED_RE, BIDI_SYNC_RE, BIDI_ASYNC_RE, ARROW_CHARS;
 var init_arrows = __esm({
   "src/utils/arrows.ts"() {
     "use strict";
-    BIDI_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
-    BIDI_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
     SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
     ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
-    ARROW_CHARS = ["->", "~>", "<->", "<~>"];
+    RETURN_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)-\s+(\S+)$/;
+    RETURN_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~\s+(\S+)$/;
+    BIDI_SYNC_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
+    BIDI_ASYNC_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+    ARROW_CHARS = ["->", "~>", "<-", "<~"];
   }
 });
 
@@ -1670,36 +1711,6 @@ function isSequenceSection(el) {
 function isSequenceNote(el) {
   return "kind" in el && el.kind === "note";
 }
-function parseReturnLabel(rawLabel) {
-  if (!rawLabel) return { label: "" };
-  const standaloneMatch = rawLabel.match(/^<-\s*(.*)$/);
-  if (standaloneMatch) {
-    return {
-      label: standaloneMatch[1].trim(),
-      standaloneReturn: true
-    };
-  }
-  const arrowReturn = rawLabel.match(ARROW_RETURN_PATTERN);
-  if (arrowReturn) {
-    return { label: arrowReturn[1].trim(), returnLabel: arrowReturn[2].trim() };
-  }
-  const umlReturn = rawLabel.match(UML_RETURN_PATTERN);
-  if (umlReturn) {
-    return { label: umlReturn[1].trim(), returnLabel: umlReturn[2].trim() };
-  }
-  const lastColon = rawLabel.lastIndexOf(":");
-  if (lastColon > 0 && lastColon < rawLabel.length - 1) {
-    const afterColon = rawLabel.substring(lastColon + 1);
-    if (!afterColon.startsWith("//")) {
-      const reqPart = rawLabel.substring(0, lastColon).trim();
-      const resPart = afterColon.trim();
-      if (reqPart && resPart) {
-        return { label: reqPart, returnLabel: resPart };
-      }
-    }
-  }
-  return { label: rawLabel };
-}
 function parseSequenceDgmo(content) {
   const result = {
     title: null,
@@ -1799,7 +1810,7 @@ function parseSequenceDgmo(content) {
       continue;
     }
     const colonIndex = trimmed.indexOf(":");
-    if (colonIndex > 0 && !trimmed.includes("->") && !trimmed.includes("~>")) {
+    if (colonIndex > 0 && !trimmed.includes("->") && !trimmed.includes("~>") && !trimmed.includes("<-") && !trimmed.includes("<~")) {
       const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
       if (key === "note" || key.startsWith("note ")) {
       } else {
@@ -1928,16 +1939,15 @@ function parseSequenceDgmo(content) {
     }
     if (labeledArrow) {
       contentStarted = true;
-      const { from, to, label, async: isAsync2, bidirectional } = labeledArrow;
+      const { from, to, label, async: isAsync, isReturn } = labeledArrow;
       lastMsgFrom = from;
       const msg = {
         from,
         to,
         label,
-        returnLabel: void 0,
         lineNumber,
-        ...isAsync2 ? { async: true } : {},
-        ...bidirectional ? { bidirectional: true } : {}
+        ...isAsync ? { async: true } : {},
+        ...isReturn ? { standaloneReturn: true } : {}
       };
       result.messages.push(msg);
       currentContainer().push(msg);
@@ -1959,27 +1969,50 @@ function parseSequenceDgmo(content) {
       }
       continue;
     }
-    const bidiSyncMatch = trimmed.match(
-      /^(\S+)\s*<->\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    const colonPostfixSync = trimmed.match(
+      /^(\S+)\s*->\s*([^\s:]+)\s*:\s*(.+)$/
     );
-    const bidiAsyncMatch = trimmed.match(
-      /^(\S+)\s*<~>\s*([^\s:]+)\s*(?::\s*(.+))?$/
+    const colonPostfixAsync = trimmed.match(
+      /^(\S+)\s*~>\s*([^\s:]+)\s*:\s*(.+)$/
+    );
+    const colonPostfix = colonPostfixSync || colonPostfixAsync;
+    if (colonPostfix) {
+      const a = colonPostfix[1];
+      const b = colonPostfix[2];
+      const msg = colonPostfix[3].trim();
+      const arrowChar = colonPostfixAsync ? "~" : "-";
+      const arrowEnd = colonPostfixAsync ? "~>" : "->";
+      pushError(
+        lineNumber,
+        `Colon syntax is no longer supported. Use '${a} ${arrowChar}${msg}${arrowEnd} ${b}' instead`
+      );
+      continue;
+    }
+    const bidiPlainMatch = trimmed.match(
+      /^(\S+)\s*(?:<->|<~>)\s*(\S+)/
     );
-    const bidiMatch = bidiSyncMatch || bidiAsyncMatch;
-    if (bidiMatch) {
+    if (bidiPlainMatch) {
+      pushError(
+        lineNumber,
+        "Bidirectional arrows are no longer supported. Use two separate lines: 'A -msg-> B' and 'B -msg-> A'"
+      );
+      continue;
+    }
+    const bareReturnSync = trimmed.match(/^(\S+)\s+<-\s+(\S+)$/);
+    const bareReturnAsync = trimmed.match(/^(\S+)\s+<~\s+(\S+)$/);
+    const bareReturn = bareReturnSync || bareReturnAsync;
+    if (bareReturn) {
       contentStarted = true;
-      const from = bidiMatch[1];
-      const to = bidiMatch[2];
+      const to = bareReturn[1];
+      const from = bareReturn[2];
       lastMsgFrom = from;
-      const rawLabel = bidiMatch[3]?.trim() || "";
-      const isBidiAsync = !!bidiAsyncMatch;
       const msg = {
         from,
         to,
-        label: rawLabel,
+        label: "",
         lineNumber,
-        bidirectional: true,
-        ...isBidiAsync ? { async: true } : {}
+        standaloneReturn: true,
+        ...bareReturnAsync ? { async: true } : {}
       };
       result.messages.push(msg);
       currentContainer().push(msg);
@@ -2001,30 +2034,20 @@ function parseSequenceDgmo(content) {
       }
       continue;
     }
-    let isAsync = false;
-    const asyncArrowMatch = trimmed.match(
-      /^(\S+)\s*~>\s*([^\s:]+)\s*(?::\s*(.+))?$/
-    );
-    const syncArrowMatch = trimmed.match(
-      /^(\S+)\s*->\s*([^\s:]+)\s*(?::\s*(.+))?$/
-    );
-    const arrowMatch = asyncArrowMatch || syncArrowMatch;
-    if (asyncArrowMatch) isAsync = true;
-    if (arrowMatch) {
+    const bareCallSync = trimmed.match(/^(\S+)\s*->\s*(\S+)$/);
+    const bareCallAsync = trimmed.match(/^(\S+)\s*~>\s*(\S+)$/);
+    const bareCall = bareCallSync || bareCallAsync;
+    if (bareCall) {
       contentStarted = true;
-      const from = arrowMatch[1];
-      const to = arrowMatch[2];
+      const from = bareCall[1];
+      const to = bareCall[2];
       lastMsgFrom = from;
-      const rawLabel = arrowMatch[3]?.trim() || "";
-      const { label, returnLabel, standaloneReturn } = isAsync ? { label: rawLabel, returnLabel: void 0, standaloneReturn: void 0 } : parseReturnLabel(rawLabel);
       const msg = {
         from,
         to,
-        label,
-        returnLabel,
+        label: "",
         lineNumber,
-        ...isAsync ? { async: true } : {},
-        ...standaloneReturn ? { standaloneReturn: true } : {}
+        ...bareCallAsync ? { async: true } : {}
       };
       result.messages.push(msg);
       currentContainer().push(msg);
@@ -2233,7 +2256,7 @@ function looksLikeSequence(content) {
     return ARROW_PATTERN.test(trimmed);
   });
 }
-var VALID_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, GROUP_HEADING_PATTERN, SECTION_PATTERN, ARROW_PATTERN, ARROW_RETURN_PATTERN, UML_RETURN_PATTERN, NOTE_SINGLE, NOTE_MULTI;
+var VALID_PARTICIPANT_TYPES, IS_A_PATTERN, POSITION_ONLY_PATTERN, GROUP_HEADING_PATTERN, SECTION_PATTERN, ARROW_PATTERN, NOTE_SINGLE, NOTE_MULTI;
 var init_parser = __esm({
   "src/sequence/parser.ts"() {
     "use strict";
@@ -2256,9 +2279,7 @@ var init_parser = __esm({
     POSITION_ONLY_PATTERN = /^(\S+)\s+position\s+(-?\d+)$/i;
     GROUP_HEADING_PATTERN = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
     SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
-    ARROW_PATTERN = /\S+\s*(?:<->|<~>|->|~>|-\S+->|~\S+~>|<-\S+->|<~\S+~>)\s*\S+/;
-    ARROW_RETURN_PATTERN = /^(.+?)\s*<-\s*(.+)$/;
-    UML_RETURN_PATTERN = /^(\w+\([^)]*\))\s*:\s*(.+)$/;
+    ARROW_PATTERN = /\S+\s*(?:<-\S+-|<~\S+~|-\S+->|~\S+~>|->|~>|<-|<~)\s*\S+/;
     NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
     NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
   }
@@ -3164,49 +3185,19 @@ function parseChart(content, palette) {
       continue;
     }
     if (key === "series") {
-      let rawNames;
-      if (value) {
-        result.series = value;
-        rawNames = value.split(",").map((s) => s.trim()).filter(Boolean);
-      } else {
-        const collected = collectIndentedValues(lines, i);
-        i = collected.newIndex;
-        rawNames = collected.values;
-        result.series = rawNames.join(", ");
-      }
-      const names = [];
-      const nameColors = [];
-      for (const raw of rawNames) {
-        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          const resolved = resolveColor(colorMatch[1].trim(), palette);
-          nameColors.push(resolved);
-          names.push(raw.substring(0, colorMatch.index).trim());
-        } else {
-          nameColors.push(void 0);
-          names.push(raw);
-        }
-      }
-      if (names.length === 1) {
-        result.series = names[0];
+      const parsed = parseSeriesNames(value, lines, i, palette);
+      i = parsed.newIndex;
+      result.series = parsed.series;
+      if (parsed.names.length > 1) {
+        result.seriesNames = parsed.names;
       }
-      if (names.length > 1) {
-        result.seriesNames = names;
-      }
-      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      if (parsed.nameColors.some(Boolean)) result.seriesNameColors = parsed.nameColors;
       continue;
     }
     const parts = value.split(",").map((s) => s.trim());
     const numValue = parseFloat(parts[0]);
     if (!isNaN(numValue)) {
-      let rawLabel = trimmed.substring(0, colonIndex).trim();
-      let pointColor;
-      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        const resolved = resolveColor(colorMatch[1].trim(), palette);
-        pointColor = resolved;
-        rawLabel = rawLabel.substring(0, colorMatch.index).trim();
-      }
+      const { label: rawLabel, color: pointColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
       const extra = parts.slice(1).map((s) => parseFloat(s)).filter((n) => !isNaN(n));
       result.data.push({
         label: rawLabel,
@@ -3285,13 +3276,10 @@ function parseEChart(content, palette) {
     if (!trimmed) continue;
     const mdCategoryMatch = trimmed.match(/^#{2,}\s+(.+)$/);
     if (mdCategoryMatch) {
-      let catName = mdCategoryMatch[1].trim();
-      const catColorMatch = catName.match(/\(([^)]+)\)\s*$/);
-      if (catColorMatch) {
-        const resolved = resolveColor(catColorMatch[1].trim(), palette);
+      const { label: catName, color: catColor } = extractColor(mdCategoryMatch[1].trim(), palette);
+      if (catColor) {
         if (!result.categoryColors) result.categoryColors = {};
-        catName = catName.substring(0, catColorMatch.index).trim();
-        result.categoryColors[catName] = resolved;
+        result.categoryColors[catName] = catColor;
       }
       currentCategory = catName;
       continue;
@@ -3328,32 +3316,13 @@ function parseEChart(content, palette) {
       continue;
     }
     if (key === "series") {
-      let rawNames;
-      if (value) {
-        result.series = value;
-        rawNames = value.split(",").map((s) => s.trim()).filter(Boolean);
-      } else {
-        const collected = collectIndentedValues(lines, i);
-        i = collected.newIndex;
-        rawNames = collected.values;
-        result.series = rawNames.join(", ");
-      }
-      const names = [];
-      const nameColors = [];
-      for (const raw of rawNames) {
-        const colorMatch = raw.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          nameColors.push(resolveColor(colorMatch[1].trim(), palette));
-          names.push(raw.substring(0, colorMatch.index).trim());
-        } else {
-          nameColors.push(void 0);
-          names.push(raw);
-        }
-      }
-      if (names.length === 1) {
-        result.series = names[0];
+      const parsed = parseSeriesNames(value, lines, i, palette);
+      i = parsed.newIndex;
+      result.series = parsed.series;
+      if (parsed.names.length > 1) {
+        result.seriesNames = parsed.names;
       }
-      if (nameColors.some(Boolean)) result.seriesNameColors = nameColors;
+      if (parsed.nameColors.some(Boolean)) result.seriesNameColors = parsed.nameColors;
       continue;
     }
     if (key === "xlabel") {
@@ -3415,13 +3384,7 @@ function parseEChart(content, palette) {
       continue;
     }
     if (result.type === "function") {
-      let fnName = trimmed.substring(0, colonIndex).trim();
-      let fnColor;
-      const colorMatch = fnName.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        fnColor = resolveColor(colorMatch[1].trim(), palette);
-        fnName = fnName.substring(0, colorMatch.index).trim();
-      }
+      const { label: fnName, color: fnColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
       if (!result.functions) result.functions = [];
       result.functions.push({
         name: fnName,
@@ -3436,13 +3399,7 @@ function parseEChart(content, palette) {
         /^(-?[\d.]+)\s*,\s*(-?[\d.]+)(?:\s*,\s*(-?[\d.]+))?$/
       );
       if (scatterMatch) {
-        let scatterName = trimmed.substring(0, colonIndex).trim();
-        let scatterColor;
-        const colorMatch = scatterName.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          scatterColor = resolveColor(colorMatch[1].trim(), palette);
-          scatterName = scatterName.substring(0, colorMatch.index).trim();
-        }
+        const { label: scatterName, color: scatterColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
         if (!result.scatterPoints) result.scatterPoints = [];
         result.scatterPoints.push({
           name: scatterName,
@@ -3467,13 +3424,7 @@ function parseEChart(content, palette) {
     }
     const numValue = parseFloat(value);
     if (!isNaN(numValue)) {
-      let rawLabel = trimmed.substring(0, colonIndex).trim();
-      let pointColor;
-      const colorMatch = rawLabel.match(/\(([^)]+)\)\s*$/);
-      if (colorMatch) {
-        pointColor = resolveColor(colorMatch[1].trim(), palette);
-        rawLabel = rawLabel.substring(0, colorMatch.index).trim();
-      }
+      const { label: rawLabel, color: pointColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
       result.data.push({
         label: rawLabel,
         value: numValue,
@@ -3520,30 +3471,21 @@ function parseEChart(content, palette) {
   }
   return result;
 }
-function buildEChartsOption(parsed, palette, isDark) {
+function buildChartCommons(parsed, palette, isDark) {
   const textColor = palette.text;
   const axisLineColor = palette.border;
+  const splitLineColor = palette.border;
   const gridOpacity = isDark ? 0.7 : 0.55;
   const colors = getSeriesColors(palette);
+  const titleConfig = parsed.title ? { text: parsed.title, left: "center", top: 8, textStyle: { color: textColor, fontSize: 20, fontWeight: "bold", fontFamily: FONT_FAMILY } } : void 0;
+  const tooltipTheme = { backgroundColor: palette.surface, borderColor: palette.border, textStyle: { color: palette.text } };
+  return { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme };
+}
+function buildEChartsOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
-  const titleConfig = parsed.title ? {
-    text: parsed.title,
-    left: "center",
-    top: 8,
-    textStyle: {
-      color: textColor,
-      fontSize: 20,
-      fontWeight: "bold",
-      fontFamily: FONT_FAMILY
-    }
-  } : void 0;
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text }
-  };
+  const { textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
     return buildSankeyOption(
       parsed,
@@ -3619,8 +3561,7 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     }
   }));
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       show: false,
@@ -3677,8 +3618,7 @@ function buildChordOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     }
   }));
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -3780,15 +3720,11 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpac
       itemStyle: {
         color: fnColor
       },
-      emphasis: {
-        focus: "self",
-        blurScope: "global"
-      }
+      emphasis: EMPHASIS_SELF
     };
   });
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
@@ -3933,8 +3869,7 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
   const xPad = (xMax - xMin) * 0.1 || 1;
   const yPad = (yMax - yMin) * 0.1 || 1;
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip,
     ...legendData && {
@@ -4019,8 +3954,7 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
     });
   });
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -4097,8 +4031,7 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
           fontWeight: "bold"
         },
         emphasis: {
-          focus: "self",
-          blurScope: "global",
+          ...EMPHASIS_SELF,
           itemStyle: {
             shadowBlur: 10,
             shadowColor: "rgba(0, 0, 0, 0.5)"
@@ -4137,8 +4070,7 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     minSize: "8%"
   };
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -4176,8 +4108,7 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
           lineStyle: { color: textColor, opacity: 0.3 }
         },
         emphasis: {
-          focus: "self",
-          blurScope: "global",
+          ...EMPHASIS_SELF,
           label: {
             fontSize: 15
           }
@@ -4217,19 +4148,36 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data, nameGapOverride, chartWidthHint) {
   const defaultGap = type === "value" ? 75 : 40;
+  let catFontSize = 16;
+  let catLabelExtras = {};
+  if (type === "category" && data && data.length > 0) {
+    const maxLabelLen = Math.max(...data.map((l) => l.length));
+    const count = data.length;
+    if (count > 10 || maxLabelLen > 20) catFontSize = 10;
+    else if (count > 5 || maxLabelLen > 14) catFontSize = 11;
+    else if (maxLabelLen > 8) catFontSize = 12;
+    if (chartWidthHint && count > 0) {
+      const availPerLabel = Math.floor(chartWidthHint * 0.85 / count);
+      catLabelExtras = {
+        width: availPerLabel,
+        overflow: "break"
+      };
+    }
+  }
   return {
     type,
     ...data && { data },
     axisLine: { lineStyle: { color: axisLineColor } },
     axisLabel: {
       color: textColor,
-      fontSize: type === "category" && data ? data.length > 10 ? 11 : data.length > 5 ? 12 : 16 : 16,
+      fontSize: type === "category" && data ? catFontSize : 16,
       fontFamily: FONT_FAMILY,
       ...type === "category" && {
         interval: 0,
-        formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2").replace(/ /g, "\n")
+        formatter: (value) => value.replace(/([a-z])([A-Z])/g, "$1\n$2"),
+        ...catLabelExtras
       }
     },
     splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
@@ -4241,38 +4189,18 @@ function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacit
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, isDark) {
+function buildEChartsOptionFromChart(parsed, palette, isDark, chartWidth) {
   if (parsed.error) return {};
-  const textColor = palette.text;
-  const axisLineColor = palette.border;
-  const splitLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.55;
-  const colors = getSeriesColors(palette);
-  const titleConfig = parsed.title ? {
-    text: parsed.title,
-    left: "center",
-    top: 8,
-    textStyle: {
-      color: textColor,
-      fontSize: 20,
-      fontWeight: "bold",
-      fontFamily: FONT_FAMILY
-    }
-  } : void 0;
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text }
-  };
+  const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
   switch (parsed.type) {
     case "bar":
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "bar-stacked":
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
     case "line":
-      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "area":
-      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case "pie":
       return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, false);
     case "doughnut":
@@ -4283,7 +4211,16 @@ function buildEChartsOptionFromChart(parsed, palette, isDark) {
       return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme);
   }
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function makeChartGrid(options) {
+  return {
+    left: options.yLabel ? "12%" : "3%",
+    right: "4%",
+    bottom: options.hasLegend ? "15%" : options.xLabel ? "10%" : "3%",
+    top: options.hasTitle ? "15%" : "5%",
+    containLabel: true
+  };
+}
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -4292,60 +4229,43 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     itemStyle: { color: d.color ?? colors[i % colors.length] }
   }));
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap, !isHorizontal ? chartWidth : void 0);
   const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
       ...tooltipTheme,
       axisPointer: { type: "shadow" }
     },
-    grid: {
-      left: yLabel ? "12%" : "3%",
-      right: "4%",
-      bottom: xLabel ? "10%" : "3%",
-      top: parsed.title ? "15%" : "5%",
-      containLabel: true
-    },
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
     yAxis: isHorizontal ? categoryAxis : valueAxis,
     series: [
       {
         type: "bar",
         data,
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
 }
-function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
       ...tooltipTheme,
       axisPointer: { type: "line" }
     },
-    grid: {
-      left: yLabel ? "12%" : "3%",
-      right: "4%",
-      bottom: xLabel ? "10%" : "3%",
-      top: parsed.title ? "15%" : "5%",
-      containLabel: true
-    },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4355,15 +4275,12 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
@@ -4380,15 +4297,11 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
-      emphasis: {
-        focus: "self",
-        blurScope: "global"
-      }
+      emphasis: EMPHASIS_SELF
     };
   });
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
@@ -4400,40 +4313,27 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       bottom: 10,
       textStyle: { color: textColor }
     },
-    grid: {
-      left: yLabel ? "12%" : "3%",
-      right: "4%",
-      bottom: "15%",
-      top: parsed.title ? "15%" : "5%",
-      containLabel: true
-    },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
 }
-function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
   const values = parsed.data.map((d) => d.value);
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
       ...tooltipTheme,
       axisPointer: { type: "line" }
     },
-    grid: {
-      left: yLabel ? "12%" : "3%",
-      right: "4%",
-      bottom: xLabel ? "10%" : "3%",
-      top: parsed.title ? "15%" : "5%",
-      containLabel: true
-    },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, void 0, chartWidth),
     yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -4444,10 +4344,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
@@ -4471,8 +4368,7 @@ function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, is
     itemStyle: { color: d.color ?? colors[i % colors.length] }
   }));
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -4490,10 +4386,7 @@ function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, is
           fontFamily: FONT_FAMILY
         },
         labelLine: { show: true },
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
@@ -4507,8 +4400,7 @@ function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, title
     max: maxValue
   }));
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -4550,10 +4442,7 @@ function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, title
             }
           }
         ],
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
@@ -4565,8 +4454,7 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
     itemStyle: { color: d.color ?? colors[i % colors.length] }
   }));
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "item",
@@ -4585,15 +4473,12 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
           fontFamily: FONT_FAMILY
         },
         labelLine: { show: true },
-        emphasis: {
-          focus: "self",
-          blurScope: "global"
-        }
+        emphasis: EMPHASIS_SELF
       }
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -4618,18 +4503,15 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
         fontWeight: "bold",
         fontFamily: FONT_FAMILY
       },
-      emphasis: {
-        focus: "self",
-        blurScope: "global"
-      }
+      emphasis: EMPHASIS_SELF
     };
   });
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap);
-  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels, hCatGap, !isHorizontal ? chartWidth : void 0);
+  const hValueGap = isHorizontal && xLabel ? 40 : void 0;
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel, void 0, hValueGap);
   return {
-    backgroundColor: "transparent",
-    animation: false,
+    ...CHART_BASE,
     title: titleConfig,
     tooltip: {
       trigger: "axis",
@@ -4641,13 +4523,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       bottom: 10,
       textStyle: { color: textColor }
     },
-    grid: {
-      left: yLabel ? "12%" : "3%",
-      right: "4%",
-      bottom: "15%",
-      top: parsed.title ? "15%" : "5%",
-      containLabel: true
-    },
+    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title, hasLegend: true }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
     yAxis: isHorizontal ? categoryAxis : valueAxis,
     series
@@ -4663,7 +4539,7 @@ async function renderEChartsForExport(content, theme, palette, options) {
   if (chartType && STANDARD_CHART_TYPES.has(chartType)) {
     const parsed = parseChart(content, effectivePalette);
     if (parsed.error) return "";
-    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark);
+    option = buildEChartsOptionFromChart(parsed, effectivePalette, isDark, ECHART_EXPORT_WIDTH);
   } else {
     const parsed = parseEChart(content, effectivePalette);
     if (parsed.error) return "";
@@ -4694,31 +4570,22 @@ async function renderEChartsForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var echarts, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
+var echarts, EMPHASIS_SELF, CHART_BASE, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
     echarts = __toESM(require("echarts"), 1);
     init_fonts();
     init_branding();
-    init_colors();
     init_palettes();
     init_chart();
     init_diagnostics();
     init_parsing();
+    init_dgmo_router();
+    EMPHASIS_SELF = { focus: "self", blurScope: "global" };
+    CHART_BASE = { backgroundColor: "transparent", animation: false };
     ECHART_EXPORT_WIDTH = 1200;
     ECHART_EXPORT_HEIGHT = 800;
-    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
-      "bar",
-      "line",
-      "multi-line",
-      "area",
-      "pie",
-      "doughnut",
-      "radar",
-      "polar-area",
-      "bar-stacked"
-    ]);
   }
 });
 
@@ -6048,6 +5915,7 @@ var init_parser7 = __esm({
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
   DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
+  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
   getDgmoFramework: () => getDgmoFramework,
   parseDgmo: () => parseDgmo,
   parseDgmoChartType: () => parseDgmoChartType
@@ -6075,53 +5943,19 @@ function parseDgmoChartType(content) {
 function parseDgmo(content) {
   const chartType = parseDgmoChartType(content);
   if (!chartType) {
-    const parsed2 = parseD3(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "sequence") {
-    const parsed2 = parseSequenceDgmo(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "flowchart") {
-    const parsed2 = parseFlowchart(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "class") {
-    const parsed2 = parseClassDiagram(content);
-    return { diagnostics: parsed2.diagnostics };
+    return { diagnostics: parseD3(content).diagnostics };
   }
-  if (chartType === "er") {
-    const parsed2 = parseERDiagram(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "org") {
-    const parsed2 = parseOrg(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "kanban") {
-    const parsed2 = parseKanban(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "c4") {
-    const parsed2 = parseC4(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (chartType === "initiative-status") {
-    const parsed2 = parseInitiativeStatus(content);
-    return { diagnostics: parsed2.diagnostics };
-  }
-  if (STANDARD_CHART_TYPES2.has(chartType)) {
-    const parsed2 = parseChart(content);
-    return { diagnostics: parsed2.diagnostics };
+  const directParser = PARSE_DISPATCH.get(chartType);
+  if (directParser) return { diagnostics: directParser(content).diagnostics };
+  if (STANDARD_CHART_TYPES.has(chartType)) {
+    return { diagnostics: parseChart(content).diagnostics };
   }
   if (ECHART_TYPES.has(chartType)) {
-    const parsed2 = parseEChart(content);
-    return { diagnostics: parsed2.diagnostics };
+    return { diagnostics: parseEChart(content).diagnostics };
   }
-  const parsed = parseD3(content);
-  return { diagnostics: parsed.diagnostics };
+  return { diagnostics: parseD3(content).diagnostics };
 }
-var DGMO_CHART_TYPE_MAP, STANDARD_CHART_TYPES2, ECHART_TYPES;
+var DGMO_CHART_TYPE_MAP, STANDARD_CHART_TYPES, ECHART_TYPES, PARSE_DISPATCH;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -6170,7 +6004,7 @@ var init_dgmo_router = __esm({
       c4: "d3",
       "initiative-status": "d3"
     };
-    STANDARD_CHART_TYPES2 = /* @__PURE__ */ new Set([
+    STANDARD_CHART_TYPES = /* @__PURE__ */ new Set([
       "bar",
       "line",
       "multi-line",
@@ -6189,6 +6023,16 @@ var init_dgmo_router = __esm({
       "heatmap",
       "funnel"
     ]);
+    PARSE_DISPATCH = /* @__PURE__ */ new Map([
+      ["sequence", (c) => parseSequenceDgmo(c)],
+      ["flowchart", (c) => parseFlowchart(c)],
+      ["class", (c) => parseClassDiagram(c)],
+      ["er", (c) => parseERDiagram(c)],
+      ["org", (c) => parseOrg(c)],
+      ["kanban", (c) => parseKanban(c)],
+      ["c4", (c) => parseC4(c)],
+      ["initiative-status", (c) => parseInitiativeStatus(c)]
+    ]);
   }
 });
 
@@ -12187,7 +12031,7 @@ function buildRenderSequence(messages) {
         type: "return",
         from: top.to,
         to: top.from,
-        label: top.returnLabel || "",
+        label: "",
         messageIndex: top.messageIndex
       });
     }
@@ -12213,12 +12057,8 @@ function buildRenderSequence(messages) {
       to: msg.to,
       label: msg.label,
       messageIndex: mi,
-      ...msg.async ? { async: true } : {},
-      ...msg.bidirectional ? { bidirectional: true } : {}
+      ...msg.async ? { async: true } : {}
     });
-    if (msg.bidirectional) {
-      continue;
-    }
     if (msg.async) {
       continue;
     }
@@ -12227,14 +12067,13 @@ function buildRenderSequence(messages) {
         type: "return",
         from: msg.to,
         to: msg.from,
-        label: msg.returnLabel || "",
+        label: "",
         messageIndex: mi
       });
     } else {
       stack.push({
         from: msg.from,
         to: msg.to,
-        returnLabel: msg.returnLabel,
         messageIndex: mi
       });
     }
@@ -12245,7 +12084,7 @@ function buildRenderSequence(messages) {
       type: "return",
       from: top.to,
       to: top.from,
-      label: top.returnLabel || "",
+      label: "",
       messageIndex: top.messageIndex
     });
   }
@@ -12710,14 +12549,6 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     "points",
     `0,0 ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE / 2} 0,${ARROWHEAD_SIZE}`
   ).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
-  defs.append("marker").attr("id", "seq-arrowhead-reverse").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", 0).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
-    "points",
-    `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
-  ).attr("fill", palette.text);
-  defs.append("marker").attr("id", "seq-arrowhead-async-reverse").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", 0).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polyline").attr(
-    "points",
-    `${ARROWHEAD_SIZE},0 0,${ARROWHEAD_SIZE / 2} ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE}`
-  ).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
   if (title) {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", svgWidth / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 20).attr("font-weight", "bold").text(title);
     if (parsed.titleLineNumber) {
@@ -12998,17 +12829,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         const x1 = arrowEdgeX(step.from, i, goingRight ? "right" : "left");
         const x2 = arrowEdgeX(step.to, i, goingRight ? "left" : "right");
         const markerRef = step.async ? "url(#seq-arrowhead-async)" : "url(#seq-arrowhead)";
-        const markerStartRef = step.bidirectional ? step.async ? "url(#seq-arrowhead-async-reverse)" : "url(#seq-arrowhead-reverse)" : null;
-        const line7 = svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", palette.text).attr("stroke-width", 1.2).attr("marker-end", markerRef).attr("class", "message-arrow").attr(
+        svg.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("stroke", palette.text).attr("stroke-width", 1.2).attr("marker-end", markerRef).attr("class", "message-arrow").attr(
           "data-line-number",
           String(messages[step.messageIndex].lineNumber)
         ).attr("data-msg-index", String(step.messageIndex)).attr("data-step-index", String(i));
-        if (markerStartRef) {
-          line7.attr("marker-start", markerStartRef);
-        }
-        if (step.bidirectional && step.async) {
-          line7.attr("stroke-dasharray", "6 4");
-        }
         if (step.label) {
           const midX = (x1 + x2) / 2;
           const labelEl = svg.append("text").attr("x", midX).attr("y", y - 8).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 12).attr("class", "message-label").attr(
@@ -13235,6 +13059,32 @@ var init_renderer7 = __esm({
 });
 
 // src/d3.ts
+function renderChartTitle(svg, title, titleLineNumber, width, textColor, onClickItem) {
+  if (!title) return;
+  const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && titleLineNumber ? "pointer" : "default").text(title);
+  if (titleLineNumber) {
+    titleEl.attr("data-line-number", titleLineNumber);
+    if (onClickItem) {
+      titleEl.on("click", () => onClickItem(titleLineNumber)).on("mouseenter", function() {
+        d3Selection9.select(this).attr("opacity", 0.7);
+      }).on("mouseleave", function() {
+        d3Selection9.select(this).attr("opacity", 1);
+      });
+    }
+  }
+}
+function initD3Chart(container, palette, exportDims) {
+  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || height <= 0) return null;
+  const textColor = palette.text;
+  const mutedColor = palette.border;
+  const bgColor = palette.bg;
+  const colors = getSeriesColors(palette);
+  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  return { svg, width, height, textColor, mutedColor, bgColor, colors };
+}
 function parseTimelineDate(s) {
   const parts = s.split("-").map((p) => parseInt(p, 10));
   const year = parts[0];
@@ -13797,13 +13647,28 @@ function tokenizeFreeformText(text) {
   }
   return Array.from(counts.entries()).map(([text2, count]) => ({ text: text2, weight: count, lineNumber: 0 })).sort((a, b) => b.weight - a.weight);
 }
+function resolveVerticalCollisions(items, minGap, maxY) {
+  if (items.length === 0) return [];
+  const sorted = items.map((it, i) => ({ ...it, idx: i })).sort((a, b) => a.naturalY - b.naturalY);
+  const adjustedY = new Array(items.length);
+  let prevBottom = -Infinity;
+  for (const item of sorted) {
+    const halfH = item.height / 2;
+    let top = Math.max(item.naturalY - halfH, prevBottom + minGap);
+    if (maxY !== void 0) {
+      top = Math.min(top, maxY - item.height);
+    }
+    adjustedY[item.idx] = top + halfH;
+    prevBottom = top + item.height;
+  }
+  return adjustedY;
+}
 function renderSlopeChart(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { periods, data, title } = parsed;
   if (data.length === 0 || periods.length < 2) return;
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const init2 = initD3Chart(container, palette, exportDims);
+  if (!init2) return;
+  const { svg, width, height, textColor, mutedColor, bgColor, colors } = init2;
   const maxLabelText = data.reduce((longest, item) => {
     const text = `${item.values[item.values.length - 1]} \u2014 ${item.label}`;
     return text.length > longest.length ? text : longest;
@@ -13816,56 +13681,94 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
   );
   const innerWidth = width - SLOPE_MARGIN.left - rightMargin;
   const innerHeight = height - SLOPE_MARGIN.top - SLOPE_MARGIN.bottom;
-  const textColor = palette.text;
-  const mutedColor = palette.border;
-  const bgColor = palette.bg;
-  const colors = getSeriesColors(palette);
   const allValues = data.flatMap((d) => d.values);
   const [minVal, maxVal] = d3Array.extent(allValues);
   const valuePadding = (maxVal - minVal) * 0.1 || 1;
   const yScale = d3Scale.scaleLinear().domain([minVal - valuePadding, maxVal + valuePadding]).range([innerHeight, 0]);
   const xScale = d3Scale.scalePoint().domain(periods).range([0, innerWidth]).padding(0);
-  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   const tooltip = createTooltip(container, palette, isDark);
-  if (title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-    if (parsed.titleLineNumber) {
-      titleEl.attr("data-line-number", parsed.titleLineNumber);
-      if (onClickItem) {
-        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection9.select(this).attr("opacity", 0.7);
-        }).on("mouseleave", function() {
-          d3Selection9.select(this).attr("opacity", 1);
-        });
-      }
-    }
-  }
+  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
   for (const period of periods) {
     const x = xScale(period);
     g.append("text").attr("x", x).attr("y", -15).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "600").text(period);
     g.append("line").attr("x1", x).attr("y1", 0).attr("x2", x).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
   }
   const lineGen = d3Shape6.line().x((_d, i) => xScale(periods[i])).y((d) => yScale(d));
-  data.forEach((item, idx) => {
+  const seriesInfo = data.map((item, idx) => {
     const color = item.color ?? colors[idx % colors.length];
-    const seriesG = g.append("g").attr("class", "slope-series").attr("data-line-number", String(item.lineNumber));
     const firstVal = item.values[0];
     const lastVal = item.values[item.values.length - 1];
     const absChange = lastVal - firstVal;
     const pctChange = firstVal !== 0 ? absChange / firstVal * 100 : null;
     const sign = absChange > 0 ? "+" : "";
-    const pctPart = pctChange !== null ? ` (${sign}${pctChange.toFixed(1)}%)` : "";
-    const tipLines = [`${sign}${absChange}`];
+    const tipLines = [`${sign}${parseFloat(absChange.toFixed(2))}`];
     if (pctChange !== null) tipLines.push(`${sign}${pctChange.toFixed(1)}%`);
     const tipHtml = tipLines.join("<br>");
+    const lastX = xScale(periods[periods.length - 1]);
+    const labelText = `${lastVal} \u2014 ${item.label}`;
+    const availableWidth = rightMargin - 15;
+    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+    let labelLineCount = 1;
+    let wrappedLines = null;
+    if (labelText.length > maxChars) {
+      const words = labelText.split(/\s+/);
+      const lines = [];
+      let current = "";
+      for (const word of words) {
+        const test = current ? `${current} ${word}` : word;
+        if (test.length > maxChars && current) {
+          lines.push(current);
+          current = word;
+        } else {
+          current = test;
+        }
+      }
+      if (current) lines.push(current);
+      labelLineCount = lines.length;
+      wrappedLines = lines;
+    }
+    const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
+    const labelHeight = labelLineCount === 1 ? SLOPE_LABEL_FONT_SIZE : labelLineCount * lineHeight;
+    return {
+      item,
+      idx,
+      color,
+      firstVal,
+      lastVal,
+      tipHtml,
+      lastX,
+      labelText,
+      maxChars,
+      wrappedLines,
+      labelHeight
+    };
+  });
+  const leftLabelHeight = 20;
+  const leftLabelCollisions = /* @__PURE__ */ new Map();
+  for (let pi = 0; pi < periods.length - 1; pi++) {
+    const entries = data.map((item) => ({
+      naturalY: yScale(item.values[pi]),
+      height: leftLabelHeight
+    }));
+    leftLabelCollisions.set(pi, resolveVerticalCollisions(entries, 4, innerHeight));
+  }
+  const rightEntries = seriesInfo.map((si) => ({
+    naturalY: yScale(si.lastVal),
+    height: Math.max(si.labelHeight, SLOPE_LABEL_FONT_SIZE * 1.4)
+  }));
+  const rightAdjustedY = resolveVerticalCollisions(rightEntries, 4, innerHeight);
+  data.forEach((item, idx) => {
+    const si = seriesInfo[idx];
+    const color = si.color;
+    const seriesG = g.append("g").attr("class", "slope-series").attr("data-line-number", String(item.lineNumber));
     seriesG.append("path").datum(item.values).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2.5).attr("d", lineGen);
     seriesG.append("path").datum(item.values).attr("fill", "none").attr("stroke", "transparent").attr("stroke-width", 14).attr("d", lineGen).style("cursor", onClickItem ? "pointer" : "default").on(
       "mouseenter",
-      (event) => showTooltip(tooltip, tipHtml, event)
+      (event) => showTooltip(tooltip, si.tipHtml, event)
     ).on(
       "mousemove",
-      (event) => showTooltip(tooltip, tipHtml, event)
+      (event) => showTooltip(tooltip, si.tipHtml, event)
     ).on("mouseleave", () => hideTooltip(tooltip)).on("click", () => {
       if (onClickItem && item.lineNumber) onClickItem(item.lineNumber);
     });
@@ -13874,46 +13777,30 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
       const y = yScale(val);
       seriesG.append("circle").attr("cx", x).attr("cy", y).attr("r", 4).attr("fill", color).attr("stroke", bgColor).attr("stroke-width", 1.5).style("cursor", onClickItem ? "pointer" : "default").on(
         "mouseenter",
-        (event) => showTooltip(tooltip, tipHtml, event)
+        (event) => showTooltip(tooltip, si.tipHtml, event)
       ).on(
         "mousemove",
-        (event) => showTooltip(tooltip, tipHtml, event)
+        (event) => showTooltip(tooltip, si.tipHtml, event)
       ).on("mouseleave", () => hideTooltip(tooltip)).on("click", () => {
         if (onClickItem && item.lineNumber) onClickItem(item.lineNumber);
       });
       const isFirst = i === 0;
       const isLast = i === periods.length - 1;
       if (!isLast) {
-        seriesG.append("text").attr("x", isFirst ? x - 10 : x).attr("y", y).attr("dy", "0.35em").attr("text-anchor", isFirst ? "end" : "middle").attr("fill", textColor).attr("font-size", "16px").text(val.toString());
+        const adjustedY = leftLabelCollisions.get(i)[idx];
+        seriesG.append("text").attr("x", isFirst ? x - 10 : x).attr("y", adjustedY).attr("dy", "0.35em").attr("text-anchor", isFirst ? "end" : "middle").attr("fill", color).attr("font-size", "16px").text(val.toString());
       }
     });
-    const lastX = xScale(periods[periods.length - 1]);
-    const lastY = yScale(lastVal);
-    const labelText = `${lastVal} \u2014 ${item.label}`;
-    const availableWidth = rightMargin - 15;
-    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
-    const labelEl = seriesG.append("text").attr("x", lastX + 10).attr("y", lastY).attr("text-anchor", "start").attr("fill", color).attr("font-size", `${SLOPE_LABEL_FONT_SIZE}px`).attr("font-weight", "500");
-    if (labelText.length <= maxChars) {
-      labelEl.attr("dy", "0.35em").text(labelText);
+    const adjustedLastY = rightAdjustedY[idx];
+    const labelEl = seriesG.append("text").attr("x", si.lastX + 10).attr("y", adjustedLastY).attr("text-anchor", "start").attr("fill", color).attr("font-size", `${SLOPE_LABEL_FONT_SIZE}px`).attr("font-weight", "500");
+    if (!si.wrappedLines) {
+      labelEl.attr("dy", "0.35em").text(si.labelText);
     } else {
-      const words = labelText.split(/\s+/);
-      const lines = [];
-      let current = "";
-      for (const word of words) {
-        const test = current ? `${current} ${word}` : word;
-        if (test.length > maxChars && current) {
-          lines.push(current);
-          current = word;
-        } else {
-          current = test;
-        }
-      }
-      if (current) lines.push(current);
       const lineHeight = SLOPE_LABEL_FONT_SIZE * 1.2;
-      const totalHeight = (lines.length - 1) * lineHeight;
+      const totalHeight = (si.wrappedLines.length - 1) * lineHeight;
       const startDy = -totalHeight / 2;
-      lines.forEach((line7, li) => {
-        labelEl.append("tspan").attr("x", lastX + 10).attr(
+      si.wrappedLines.forEach((line7, li) => {
+        labelEl.append("tspan").attr("x", si.lastX + 10).attr(
           "dy",
           li === 0 ? `${startDy + SLOPE_LABEL_FONT_SIZE * 0.35}px` : `${lineHeight}px`
         ).text(line7);
@@ -14010,12 +13897,11 @@ function orderArcNodes(links, order, groups) {
   return allNodes;
 }
 function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { links, title, orientation, arcOrder, arcNodeGroups } = parsed;
   if (links.length === 0) return;
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const init2 = initD3Chart(container, palette, exportDims);
+  if (!init2) return;
+  const { svg, width, height, textColor, mutedColor, bgColor, colors } = init2;
   const isVertical = orientation === "vertical";
   const margin = isVertical ? {
     top: ARC_MARGIN.top,
@@ -14025,10 +13911,6 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   } : ARC_MARGIN;
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
-  const textColor = palette.text;
-  const mutedColor = palette.border;
-  const bgColor = palette.bg;
-  const colors = getSeriesColors(palette);
   const nodes = orderArcNodes(links, arcOrder, arcNodeGroups);
   const nodeColorMap = /* @__PURE__ */ new Map();
   for (const group of arcNodeGroups) {
@@ -14047,21 +13929,8 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   const values = links.map((l) => l.value);
   const [minVal, maxVal] = d3Array.extent(values);
   const strokeScale = d3Scale.scaleLinear().domain([minVal, maxVal]).range([1.5, 6]);
-  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-  if (title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-    if (parsed.titleLineNumber) {
-      titleEl.attr("data-line-number", parsed.titleLineNumber);
-      if (onClickItem) {
-        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection9.select(this).attr("opacity", 0.7);
-        }).on("mouseleave", function() {
-          d3Selection9.select(this).attr("opacity", 1);
-        });
-      }
-    }
-  }
+  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
   const neighbors = /* @__PURE__ */ new Map();
   for (const node of nodes) neighbors.set(node, /* @__PURE__ */ new Set());
   for (const link of links) {
@@ -14597,19 +14466,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
       const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-      if (title) {
-        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-        if (parsed.titleLineNumber) {
-          titleEl.attr("data-line-number", parsed.titleLineNumber);
-          if (onClickItem) {
-            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-              d3Selection9.select(this).attr("opacity", 0.7);
-            }).on("mouseleave", function() {
-              d3Selection9.select(this).attr("opacity", 1);
-            });
-          }
-        }
-      }
+      renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
       renderEras(
         g,
         timelineEras,
@@ -14712,19 +14569,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
       const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-      if (title) {
-        const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-        if (parsed.titleLineNumber) {
-          titleEl.attr("data-line-number", parsed.titleLineNumber);
-          if (onClickItem) {
-            titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-              d3Selection9.select(this).attr("opacity", 0.7);
-            }).on("mouseleave", function() {
-              d3Selection9.select(this).attr("opacity", 1);
-            });
-          }
-        }
-      }
+      renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
       renderEras(
         g,
         timelineEras,
@@ -14856,19 +14701,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
     const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    if (title) {
-      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-      if (parsed.titleLineNumber) {
-        titleEl.attr("data-line-number", parsed.titleLineNumber);
-        if (onClickItem) {
-          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-            d3Selection9.select(this).attr("opacity", 0.7);
-          }).on("mouseleave", function() {
-            d3Selection9.select(this).attr("opacity", 1);
-          });
-        }
-      }
-    }
+    renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
     renderEras(
       g,
       timelineEras,
@@ -15011,19 +14844,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
     const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    if (title) {
-      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-      if (parsed.titleLineNumber) {
-        titleEl.attr("data-line-number", parsed.titleLineNumber);
-        if (onClickItem) {
-          titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-            d3Selection9.select(this).attr("opacity", 0.7);
-          }).on("mouseleave", function() {
-            d3Selection9.select(this).attr("opacity", 1);
-          });
-        }
-      }
-    }
+    renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
     renderEras(
       g,
       timelineEras,
@@ -15150,17 +14971,13 @@ function getRotateFn(mode) {
   return () => 0;
 }
 function renderWordCloud(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { words, title, cloudOptions } = parsed;
   if (words.length === 0) return;
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const init2 = initD3Chart(container, palette, exportDims);
+  if (!init2) return;
+  const { svg, width, height, textColor, colors } = init2;
   const titleHeight = title ? 40 : 0;
   const cloudHeight = height - titleHeight;
-  const textColor = palette.text;
-  const bgColor = palette.bg;
-  const colors = getSeriesColors(palette);
   const { minSize, maxSize } = cloudOptions;
   const weights = words.map((w) => w.weight);
   const minWeight = Math.min(...weights);
@@ -15171,20 +14988,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
     return minSize + t * (maxSize - minSize);
   };
   const rotateFn = getRotateFn(cloudOptions.rotate);
-  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
-  if (title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-    if (parsed.titleLineNumber) {
-      titleEl.attr("data-line-number", parsed.titleLineNumber);
-      if (onClickItem) {
-        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection9.select(this).attr("opacity", 0.7);
-        }).on("mouseleave", function() {
-          d3Selection9.select(this).attr("opacity", 1);
-        });
-      }
-    }
-  }
+  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
   const g = svg.append("g").attr(
     "transform",
     `translate(${width / 2},${titleHeight + cloudHeight / 2})`
@@ -15235,12 +15039,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
     };
     const rotateFn = getRotateFn(cloudOptions.rotate);
     const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
-    if (title) {
-      const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
-      if (parsed.titleLineNumber) {
-        titleEl.attr("data-line-number", parsed.titleLineNumber);
-      }
-    }
+    renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor);
     const g = svg.append("g").attr(
       "transform",
       `translate(${width / 2},${titleHeight + cloudHeight / 2})`
@@ -15371,15 +15170,11 @@ function regionCentroid(circles, inside) {
   return { x: sx / count, y: sy / count };
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { vennSets, vennOverlaps, vennShowValues, title } = parsed;
   if (vennSets.length < 2) return;
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
-  const textColor = palette.text;
-  const bgColor = palette.bg;
-  const colors = getSeriesColors(palette);
+  const init2 = initD3Chart(container, palette, exportDims);
+  if (!init2) return;
+  const { svg, width, height, textColor, colors } = init2;
   const titleHeight = title ? 40 : 0;
   const radii = vennSets.map((s) => radiusFromArea(s.size));
   const overlapMap = /* @__PURE__ */ new Map();
@@ -15458,21 +15253,8 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     marginTop,
     marginBottom
   ).map((c) => ({ ...c, y: c.y + titleHeight }));
-  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
-  if (title) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
-    if (parsed.titleLineNumber) {
-      titleEl.attr("data-line-number", parsed.titleLineNumber);
-      if (onClickItem) {
-        titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection9.select(this).attr("opacity", 0.7);
-        }).on("mouseleave", function() {
-          d3Selection9.select(this).attr("opacity", 1);
-        });
-      }
-    }
-  }
+  renderChartTitle(svg, title, parsed.titleLineNumber, width, textColor, onClickItem);
   const circleEls = [];
   const circleGroup = svg.append("g");
   circles.forEach((c, i) => {
@@ -15616,7 +15398,6 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   });
 }
 function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     title,
     quadrantLabels,
@@ -15628,12 +15409,10 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     quadrantYAxisLineNumber
   } = parsed;
   if (quadrantPoints.length === 0) return;
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
-  const textColor = palette.text;
+  const init2 = initD3Chart(container, palette, exportDims);
+  if (!init2) return;
+  const { svg, width, height, textColor } = init2;
   const mutedColor = palette.textMuted;
-  const bgColor = palette.bg;
   const borderColor = palette.border;
   const defaultColors = [
     palette.colors.blue,
@@ -15648,24 +15427,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const chartHeight = height - margin.top - margin.bottom;
   const xScale = d3Scale.scaleLinear().domain([0, 1]).range([0, chartWidth]);
   const yScale = d3Scale.scaleLinear().domain([0, 1]).range([chartHeight, 0]);
-  const svg = d3Selection9.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
-  if (title) {
-    const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
-      "cursor",
-      onClickItem && quadrantTitleLineNumber ? "pointer" : "default"
-    ).text(title);
-    if (quadrantTitleLineNumber) {
-      titleText.attr("data-line-number", quadrantTitleLineNumber);
-    }
-    if (onClickItem && quadrantTitleLineNumber) {
-      titleText.on("click", () => onClickItem(quadrantTitleLineNumber)).on("mouseenter", function() {
-        d3Selection9.select(this).attr("opacity", 0.7);
-      }).on("mouseleave", function() {
-        d3Selection9.select(this).attr("opacity", 1);
-      });
-    }
-  }
+  renderChartTitle(svg, title, quadrantTitleLineNumber, width, textColor, onClickItem);
   const chartG = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
   const mixHex = (a, b, pct) => {
     const parse = (h) => {
@@ -15914,6 +15677,38 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     }
   });
 }
+async function resolveExportPalette(theme, palette) {
+  if (palette) return palette;
+  const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
+  return theme === "dark" ? getPalette2("nord").dark : getPalette2("nord").light;
+}
+function createExportContainer(width, height) {
+  const container = document.createElement("div");
+  container.style.width = `${width}px`;
+  container.style.height = `${height}px`;
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  document.body.appendChild(container);
+  return container;
+}
+function finalizeSvgExport(container, theme, palette, options) {
+  const svgEl = container.querySelector("svg");
+  if (!svgEl) return "";
+  if (theme === "transparent") {
+    svgEl.style.background = "none";
+  } else if (!svgEl.style.background) {
+    svgEl.style.background = palette.bg;
+  }
+  svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svgEl.style.fontFamily = FONT_FAMILY;
+  const svgHtml = svgEl.outerHTML;
+  document.body.removeChild(container);
+  if (options?.branding !== false) {
+    const brandColor = theme === "transparent" ? "#888" : palette.textMuted;
+    return injectBranding(svgHtml, brandColor);
+  }
+  return svgHtml;
+}
 async function renderD3ForExport(content, theme, palette, orgExportState, options) {
   const { parseDgmoChartType: parseDgmoChartType2 } = await Promise.resolve().then(() => (init_dgmo_router(), dgmo_router_exports));
   const detectedType = parseDgmoChartType2(content);
@@ -15923,8 +15718,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const { collapseOrgTree: collapseOrgTree2 } = await Promise.resolve().then(() => (init_collapse(), collapse_exports));
     const { renderOrg: renderOrg2 } = await Promise.resolve().then(() => (init_renderer(), renderer_exports));
     const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const orgParsed = parseOrg2(content, effectivePalette2);
     if (orgParsed.error) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
@@ -15941,83 +15735,28 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const titleOffset = effectiveParsed.title ? 30 : 0;
     const exportWidth = orgLayout.width + PADDING * 2;
     const exportHeight = orgLayout.height + PADDING * 2 + titleOffset;
-    const container2 = document.createElement("div");
-    container2.style.width = `${exportWidth}px`;
-    container2.style.height = `${exportHeight}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      renderOrg2(
-        container2,
-        effectiveParsed,
-        orgLayout,
-        effectivePalette2,
-        isDark2,
-        void 0,
-        { width: exportWidth, height: exportHeight },
-        activeTagGroup,
-        hiddenAttributes
-      );
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(exportWidth, exportHeight);
+    renderOrg2(container2, effectiveParsed, orgLayout, effectivePalette2, isDark2, void 0, { width: exportWidth, height: exportHeight }, activeTagGroup, hiddenAttributes);
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "kanban") {
     const { parseKanban: parseKanban2 } = await Promise.resolve().then(() => (init_parser5(), parser_exports5));
     const { renderKanban: renderKanban2 } = await Promise.resolve().then(() => (init_renderer2(), renderer_exports2));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const kanbanParsed = parseKanban2(content, effectivePalette2);
     if (kanbanParsed.error || kanbanParsed.columns.length === 0) return "";
     const container2 = document.createElement("div");
     container2.style.position = "absolute";
     container2.style.left = "-9999px";
     document.body.appendChild(container2);
-    try {
-      renderKanban2(container2, kanbanParsed, effectivePalette2, isDark2);
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    renderKanban2(container2, kanbanParsed, effectivePalette2, theme === "dark");
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "class") {
     const { parseClassDiagram: parseClassDiagram2 } = await Promise.resolve().then(() => (init_parser2(), parser_exports2));
     const { layoutClassDiagram: layoutClassDiagram2 } = await Promise.resolve().then(() => (init_layout2(), layout_exports2));
     const { renderClassDiagram: renderClassDiagram2 } = await Promise.resolve().then(() => (init_renderer3(), renderer_exports3));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const classParsed = parseClassDiagram2(content, effectivePalette2);
     if (classParsed.error || classParsed.classes.length === 0) return "";
     const classLayout = layoutClassDiagram2(classParsed);
@@ -16025,48 +15764,15 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const titleOffset = classParsed.title ? 40 : 0;
     const exportWidth = classLayout.width + PADDING * 2;
     const exportHeight = classLayout.height + PADDING * 2 + titleOffset;
-    const container2 = document.createElement("div");
-    container2.style.width = `${exportWidth}px`;
-    container2.style.height = `${exportHeight}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      renderClassDiagram2(
-        container2,
-        classParsed,
-        classLayout,
-        effectivePalette2,
-        isDark2,
-        void 0,
-        { width: exportWidth, height: exportHeight }
-      );
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(exportWidth, exportHeight);
+    renderClassDiagram2(container2, classParsed, classLayout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "er") {
     const { parseERDiagram: parseERDiagram2 } = await Promise.resolve().then(() => (init_parser3(), parser_exports3));
     const { layoutERDiagram: layoutERDiagram2 } = await Promise.resolve().then(() => (init_layout3(), layout_exports3));
     const { renderERDiagram: renderERDiagram2 } = await Promise.resolve().then(() => (init_renderer4(), renderer_exports4));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const erParsed = parseERDiagram2(content, effectivePalette2);
     if (erParsed.error || erParsed.tables.length === 0) return "";
     const erLayout = layoutERDiagram2(erParsed);
@@ -16074,48 +15780,15 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const titleOffset = erParsed.title ? 40 : 0;
     const exportWidth = erLayout.width + PADDING * 2;
     const exportHeight = erLayout.height + PADDING * 2 + titleOffset;
-    const container2 = document.createElement("div");
-    container2.style.width = `${exportWidth}px`;
-    container2.style.height = `${exportHeight}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      renderERDiagram2(
-        container2,
-        erParsed,
-        erLayout,
-        effectivePalette2,
-        isDark2,
-        void 0,
-        { width: exportWidth, height: exportHeight }
-      );
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(exportWidth, exportHeight);
+    renderERDiagram2(container2, erParsed, erLayout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "initiative-status") {
     const { parseInitiativeStatus: parseInitiativeStatus2 } = await Promise.resolve().then(() => (init_parser7(), parser_exports7));
     const { layoutInitiativeStatus: layoutInitiativeStatus2 } = await Promise.resolve().then(() => (init_layout4(), layout_exports4));
     const { renderInitiativeStatus: renderInitiativeStatus2 } = await Promise.resolve().then(() => (init_renderer5(), renderer_exports5));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const isParsed = parseInitiativeStatus2(content);
     if (isParsed.error || isParsed.nodes.length === 0) return "";
     const isLayout = layoutInitiativeStatus2(isParsed);
@@ -16123,48 +15796,15 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const titleOffset = isParsed.title ? 40 : 0;
     const exportWidth = isLayout.width + PADDING * 2;
     const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
-    const container2 = document.createElement("div");
-    container2.style.width = `${exportWidth}px`;
-    container2.style.height = `${exportHeight}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      renderInitiativeStatus2(
-        container2,
-        isParsed,
-        isLayout,
-        effectivePalette2,
-        isDark2,
-        void 0,
-        { width: exportWidth, height: exportHeight }
-      );
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(exportWidth, exportHeight);
+    renderInitiativeStatus2(container2, isParsed, isLayout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "c4") {
     const { parseC4: parseC42 } = await Promise.resolve().then(() => (init_parser6(), parser_exports6));
     const { layoutC4Context: layoutC4Context2, layoutC4Containers: layoutC4Containers2, layoutC4Components: layoutC4Components2, layoutC4Deployment: layoutC4Deployment2 } = await Promise.resolve().then(() => (init_layout5(), layout_exports5));
     const { renderC4Context: renderC4Context2, renderC4Containers: renderC4Containers2 } = await Promise.resolve().then(() => (init_renderer6(), renderer_exports6));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const c4Parsed = parseC42(content, effectivePalette2);
     if (c4Parsed.error || c4Parsed.elements.length === 0) return "";
     const c4Level = options?.c4Level ?? "context";
@@ -16176,81 +15816,22 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const titleOffset = c4Parsed.title ? 40 : 0;
     const exportWidth = c4Layout.width + PADDING * 2;
     const exportHeight = c4Layout.height + PADDING * 2 + titleOffset;
-    const container2 = document.createElement("div");
-    container2.style.width = `${exportWidth}px`;
-    container2.style.height = `${exportHeight}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      const renderFn = c4Level === "deployment" || c4Level === "components" && c4System && c4Container || c4Level === "containers" && c4System ? renderC4Containers2 : renderC4Context2;
-      renderFn(
-        container2,
-        c4Parsed,
-        c4Layout,
-        effectivePalette2,
-        isDark2,
-        void 0,
-        { width: exportWidth, height: exportHeight }
-      );
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(exportWidth, exportHeight);
+    const renderFn = c4Level === "deployment" || c4Level === "components" && c4System && c4Container || c4Level === "containers" && c4System ? renderC4Containers2 : renderC4Context2;
+    renderFn(container2, c4Parsed, c4Layout, effectivePalette2, theme === "dark", void 0, { width: exportWidth, height: exportHeight });
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   if (detectedType === "flowchart") {
     const { parseFlowchart: parseFlowchart2 } = await Promise.resolve().then(() => (init_flowchart_parser(), flowchart_parser_exports));
     const { layoutGraph: layoutGraph2 } = await Promise.resolve().then(() => (init_layout6(), layout_exports6));
     const { renderFlowchart: renderFlowchart2 } = await Promise.resolve().then(() => (init_flowchart_renderer(), flowchart_renderer_exports));
-    const isDark2 = theme === "dark";
-    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const effectivePalette2 = await resolveExportPalette(theme, palette);
     const fcParsed = parseFlowchart2(content, effectivePalette2);
     if (fcParsed.error || fcParsed.nodes.length === 0) return "";
     const layout = layoutGraph2(fcParsed);
-    const container2 = document.createElement("div");
-    container2.style.width = `${EXPORT_WIDTH}px`;
-    container2.style.height = `${EXPORT_HEIGHT}px`;
-    container2.style.position = "absolute";
-    container2.style.left = "-9999px";
-    document.body.appendChild(container2);
-    try {
-      renderFlowchart2(container2, fcParsed, layout, effectivePalette2, isDark2, void 0, {
-        width: EXPORT_WIDTH,
-        height: EXPORT_HEIGHT
-      });
-      const svgEl = container2.querySelector("svg");
-      if (!svgEl) return "";
-      if (theme === "transparent") {
-        svgEl.style.background = "none";
-      } else if (!svgEl.style.background) {
-        svgEl.style.background = effectivePalette2.bg;
-      }
-      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      svgEl.style.fontFamily = FONT_FAMILY;
-      const svgHtml = svgEl.outerHTML;
-      if (options?.branding !== false) {
-        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
-        return injectBranding(svgHtml, brandColor);
-      }
-      return svgHtml;
-    } finally {
-      document.body.removeChild(container2);
-    }
+    const container2 = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    renderFlowchart2(container2, fcParsed, layout, effectivePalette2, theme === "dark", void 0, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
+    return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
   const parsed = parseD3(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
@@ -16266,56 +15847,32 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
   if (parsed.type === "venn" && parsed.vennSets.length < 2) return "";
   if (parsed.type === "quadrant" && parsed.quadrantPoints.length === 0)
     return "";
+  const effectivePalette = await resolveExportPalette(theme, palette);
   const isDark = theme === "dark";
-  const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-  const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
-  const container = document.createElement("div");
-  container.style.width = `${EXPORT_WIDTH}px`;
-  container.style.height = `${EXPORT_HEIGHT}px`;
-  container.style.position = "absolute";
-  container.style.left = "-9999px";
-  document.body.appendChild(container);
+  const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
   const dims = { width: EXPORT_WIDTH, height: EXPORT_HEIGHT };
-  try {
-    if (parsed.type === "sequence") {
-      const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
-      const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer7(), renderer_exports7));
-      const seqParsed = parseSequenceDgmo2(content);
-      if (seqParsed.error || seqParsed.participants.length === 0) return "";
-      renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark, void 0, {
-        exportWidth: EXPORT_WIDTH
-      });
-    } else if (parsed.type === "wordcloud") {
-      await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
-    } else if (parsed.type === "arc") {
-      renderArcDiagram(container, parsed, effectivePalette, isDark, void 0, dims);
-    } else if (parsed.type === "timeline") {
-      renderTimeline(container, parsed, effectivePalette, isDark, void 0, dims);
-    } else if (parsed.type === "venn") {
-      renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);
-    } else if (parsed.type === "quadrant") {
-      renderQuadrant(container, parsed, effectivePalette, isDark, void 0, dims);
-    } else {
-      renderSlopeChart(container, parsed, effectivePalette, isDark, void 0, dims);
-    }
-    const svgEl = container.querySelector("svg");
-    if (!svgEl) return "";
-    if (theme === "transparent") {
-      svgEl.style.background = "none";
-    } else if (!svgEl.style.background) {
-      svgEl.style.background = effectivePalette.bg;
-    }
-    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgEl.style.fontFamily = FONT_FAMILY;
-    const svgHtml = svgEl.outerHTML;
-    if (options?.branding !== false) {
-      const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
-      return injectBranding(svgHtml, brandColor);
-    }
-    return svgHtml;
-  } finally {
-    document.body.removeChild(container);
+  if (parsed.type === "sequence") {
+    const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
+    const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer7(), renderer_exports7));
+    const seqParsed = parseSequenceDgmo2(content);
+    if (seqParsed.error || seqParsed.participants.length === 0) return "";
+    renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark, void 0, {
+      exportWidth: EXPORT_WIDTH
+    });
+  } else if (parsed.type === "wordcloud") {
+    await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
+  } else if (parsed.type === "arc") {
+    renderArcDiagram(container, parsed, effectivePalette, isDark, void 0, dims);
+  } else if (parsed.type === "timeline") {
+    renderTimeline(container, parsed, effectivePalette, isDark, void 0, dims);
+  } else if (parsed.type === "venn") {
+    renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);
+  } else if (parsed.type === "quadrant") {
+    renderQuadrant(container, parsed, effectivePalette, isDark, void 0, dims);
+  } else {
+    renderSlopeChart(container, parsed, effectivePalette, isDark, void 0, dims);
   }
+  return finalizeSvgExport(container, theme, effectivePalette, options);
 }
 var d3Scale, d3Selection9, d3Shape6, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, MONTH_ABBR, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
@@ -16477,6 +16034,7 @@ var index_exports = {};
 __export(index_exports, {
   DGMO_CHART_TYPE_MAP: () => DGMO_CHART_TYPE_MAP,
   RULE_COUNT: () => RULE_COUNT,
+  STANDARD_CHART_TYPES: () => STANDARD_CHART_TYPES,
   addDurationToDate: () => addDurationToDate,
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
@@ -17159,6 +16717,7 @@ init_branding();
 0 && (module.exports = {
   DGMO_CHART_TYPE_MAP,
   RULE_COUNT,
+  STANDARD_CHART_TYPES,
   addDurationToDate,
   applyGroupOrdering,
   applyPositionOverrides,