@diagrammo/dgmo 0.2.2 → 0.2.3

package/dist/index.js

@@ -167,6 +167,14 @@ function parseReturnLabel(rawLabel) {
   if (umlReturn) {
     return { label: umlReturn[1].trim(), returnLabel: umlReturn[2].trim() };
   }
+  const lastSep = rawLabel.lastIndexOf(" : ");
+  if (lastSep > 0) {
+    const reqPart = rawLabel.substring(0, lastSep).trim();
+    const resPart = rawLabel.substring(lastSep + 3).trim();
+    if (reqPart && resPart) {
+      return { label: reqPart, returnLabel: resPart };
+    }
+  }
   return { label: rawLabel };
 }
 function measureIndent(line2) {
@@ -1371,7 +1379,7 @@ var init_bold = __esm({
       dark: {
         bg: "#000000",
         surface: "#111111",
-        overlay: "#000000",
+        overlay: "#1a1a1a",
         border: "#333333",
         text: "#ffffff",
         textMuted: "#aaaaaa",
@@ -2015,7 +2023,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   {
     let fi = 0;
     for (let oi = 0; oi < allRenderSteps.length; oi++) {
-      if (!hiddenMsgIndices.has(allRenderSteps[oi].messageIndex)) {
+      const step = allRenderSteps[oi];
+      if (!hiddenMsgIndices.has(step.messageIndex) && (step.type === "call" || step.label)) {
         originalToFiltered.set(oi, fi);
         fi++;
       }
@@ -2104,7 +2113,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     PARTICIPANT_BOX_WIDTH + 40
   );
   const totalHeight = participantStartY + PARTICIPANT_BOX_HEIGHT + Math.max(lifelineLength, 40) + 40;
-  const { width: containerWidth } = container.getBoundingClientRect();
+  const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
   const diagramWidth = participants.length * PARTICIPANT_GAP;
   const offsetX = Math.max(0, (svgWidth - diagramWidth) / 2) + PARTICIPANT_GAP / 2;
@@ -2127,7 +2136,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     `0,0 ${ARROWHEAD_SIZE},${ARROWHEAD_SIZE / 2} 0,${ARROWHEAD_SIZE}`
   ).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 1.2);
   if (title) {
-    svg.append("text").attr("x", svgWidth / 2).attr("y", TOP_MARGIN + TITLE_HEIGHT * 0.7).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 16).attr("font-weight", "bold").text(title);
+    svg.append("text").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);
   }
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
@@ -2855,9 +2864,10 @@ function parseEChart(content, palette) {
   }
   return result;
 }
-function buildEChartsOption(parsed, palette, _isDark) {
+function buildEChartsOption(parsed, palette, isDark) {
   const textColor = palette.text;
   const axisLineColor = palette.border;
+  const gridOpacity = isDark ? 0.7 : 0.4;
   const colors = getSeriesColors(palette);
   if (parsed.error) {
     return {};
@@ -2865,9 +2875,10 @@ function buildEChartsOption(parsed, palette, _isDark) {
   const titleConfig = parsed.title ? {
     text: parsed.title,
     left: "center",
+    top: 8,
     textStyle: {
       color: textColor,
-      fontSize: 18,
+      fontSize: 20,
       fontWeight: "bold",
       fontFamily: FONT_FAMILY
     }
@@ -2901,6 +2912,7 @@ function buildEChartsOption(parsed, palette, _isDark) {
       palette,
       textColor,
       axisLineColor,
+      gridOpacity,
       colors,
       titleConfig,
       tooltipTheme
@@ -2912,6 +2924,7 @@ function buildEChartsOption(parsed, palette, _isDark) {
       palette,
       textColor,
       axisLineColor,
+      gridOpacity,
       colors,
       titleConfig,
       tooltipTheme
@@ -3083,7 +3096,7 @@ function evaluateExpression(expr, x) {
     return NaN;
   }
 }
-function buildFunctionOption(parsed, palette, textColor, axisLineColor, colors, titleConfig, tooltipTheme) {
+function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const xRange = parsed.xRange ?? { min: -10, max: 10 };
   const samples = 200;
   const step = (xRange.max - xRange.min) / samples;
@@ -3131,7 +3144,7 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, colors,
       }
     },
     grid: {
-      left: "3%",
+      left: "4%",
       right: "4%",
       bottom: "15%",
       top: parsed.title ? "15%" : "5%",
@@ -3145,11 +3158,13 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, colors,
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay
+          color: palette.border,
+          opacity: gridOpacity
         }
       }
     },
@@ -3159,18 +3174,20 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, colors,
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay
+          color: palette.border,
+          opacity: gridOpacity
         }
       }
     },
     series
   };
 }
-function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, titleConfig, tooltipTheme) {
+function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const points = parsed.scatterPoints ?? [];
   const defaultSize = 15;
   const hasCategories = points.some((p) => p.category !== void 0);
@@ -3246,6 +3263,14 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, t
       return html;
     }
   };
+  const xValues = points.map((p) => p.x);
+  const yValues = points.map((p) => p.y);
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+  const xPad = (xMax - xMin) * 0.1 || 1;
+  const yPad = (yMax - yMin) * 0.1 || 1;
   return {
     backgroundColor: "transparent",
     animation: false,
@@ -3259,9 +3284,9 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, t
       }
     },
     grid: {
-      left: "3%",
+      left: parsed.ylabel ? "5%" : "3%",
       right: "4%",
-      bottom: hasCategories ? "15%" : "3%",
+      bottom: hasCategories ? "15%" : parsed.xlabel ? "10%" : "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
@@ -3269,20 +3294,24 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, t
       type: "value",
       name: parsed.xlabel,
       nameLocation: "middle",
-      nameGap: 30,
+      nameGap: 40,
       nameTextStyle: {
         color: textColor,
-        fontSize: 12
+        fontSize: 18
       },
+      min: Math.floor(xMin - xPad),
+      max: Math.ceil(xMax + xPad),
       axisLine: {
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay
+          color: palette.border,
+          opacity: gridOpacity
         }
       }
     },
@@ -3290,20 +3319,24 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, colors, t
       type: "value",
       name: parsed.ylabel,
       nameLocation: "middle",
-      nameGap: 40,
+      nameGap: 50,
       nameTextStyle: {
         color: textColor,
-        fontSize: 12
+        fontSize: 18
       },
+      min: Math.floor(yMin - yPad),
+      max: Math.ceil(yMax + yPad),
       axisLine: {
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       },
       splitLine: {
         lineStyle: {
-          color: palette.overlay
+          color: palette.border,
+          opacity: gridOpacity
         }
       }
     },
@@ -3355,7 +3388,8 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       }
     },
     yAxis: {
@@ -3368,7 +3402,8 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
         lineStyle: { color: axisLineColor }
       },
       axisLabel: {
-        color: textColor
+        color: textColor,
+        fontSize: 16
       }
     },
     visualMap: {
@@ -3380,7 +3415,6 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
       top: "center",
       inRange: {
         color: [
-          palette.bg,
           palette.primary,
           palette.colors.cyan,
           palette.colors.yellow,
@@ -3397,7 +3431,9 @@ function buildHeatmapOption(parsed, palette, textColor, axisLineColor, titleConf
         data,
         label: {
           show: true,
-          color: textColor
+          color: "#ffffff",
+          fontSize: 14,
+          fontWeight: "bold"
         },
         emphasis: {
           itemStyle: {
@@ -3517,33 +3553,35 @@ function resolveAxisLabels(parsed) {
     yLabel: parsed.ylabel ?? (isHorizontal ? void 0 : parsed.label)
   };
 }
-function makeGridAxis(type, textColor, axisLineColor, splitLineColor, label, data) {
+function makeGridAxis(type, textColor, axisLineColor, splitLineColor, gridOpacity, label, data) {
   return {
     type,
     ...data && { data },
     axisLine: { lineStyle: { color: axisLineColor } },
-    axisLabel: { color: textColor, fontFamily: FONT_FAMILY },
-    splitLine: { lineStyle: { color: splitLineColor } },
+    axisLabel: { color: textColor, fontSize: 16, fontFamily: FONT_FAMILY },
+    splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
     ...label && {
       name: label,
       nameLocation: "middle",
-      nameGap: 30,
-      nameTextStyle: { color: textColor, fontSize: 12, fontFamily: FONT_FAMILY }
+      nameGap: 40,
+      nameTextStyle: { color: textColor, fontSize: 18, fontFamily: FONT_FAMILY }
     }
   };
 }
-function buildEChartsOptionFromChart(parsed, palette, _isDark) {
+function buildEChartsOptionFromChart(parsed, palette, isDark) {
   if (parsed.error) return {};
   const textColor = palette.text;
   const axisLineColor = palette.border;
-  const splitLineColor = palette.overlay;
+  const splitLineColor = palette.border;
+  const gridOpacity = isDark ? 0.7 : 0.4;
   const colors = getSeriesColors(palette);
   const titleConfig = parsed.title ? {
     text: parsed.title,
     left: "center",
+    top: 8,
     textStyle: {
       color: textColor,
-      fontSize: 18,
+      fontSize: 20,
       fontWeight: "bold",
       fontFamily: FONT_FAMILY
     }
@@ -3555,24 +3593,24 @@ function buildEChartsOptionFromChart(parsed, palette, _isDark) {
   };
   switch (parsed.type) {
     case "bar":
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case "bar-stacked":
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case "line":
-      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+      return parsed.seriesNames ? buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) : buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
     case "area":
-      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme);
+      return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme);
     case "pie":
       return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, false);
     case "doughnut":
       return buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, true);
     case "radar":
-      return buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme);
+      return buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme);
     case "polar-area":
       return buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipTheme);
   }
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -3580,8 +3618,8 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors
     value: d.value,
     itemStyle: { color: d.color ?? colors[i % colors.length] }
   }));
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
-  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
   return {
     backgroundColor: "transparent",
     animation: false,
@@ -3592,9 +3630,9 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors
       axisPointer: { type: "shadow" }
     },
     grid: {
-      left: "3%",
+      left: yLabel ? "5%" : "3%",
       right: "4%",
-      bottom: "3%",
+      bottom: xLabel ? "10%" : "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
@@ -3608,7 +3646,7 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, colors
     ]
   };
 }
-function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -3623,14 +3661,14 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: {
-      left: "3%",
+      left: yLabel ? "5%" : "3%",
       right: "4%",
-      bottom: "3%",
+      bottom: xLabel ? "10%" : "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
         type: "line",
@@ -3643,7 +3681,7 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
     ]
   };
 }
-function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
@@ -3677,18 +3715,18 @@ function buildMultiLineOption(parsed, textColor, axisLineColor, splitLineColor,
       textStyle: { color: textColor }
     },
     grid: {
-      left: "3%",
+      left: yLabel ? "5%" : "3%",
       right: "4%",
       bottom: "15%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series
   };
 }
-function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, titleConfig, tooltipTheme) {
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -3703,14 +3741,14 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
       axisPointer: { type: "line" }
     },
     grid: {
-      left: "3%",
+      left: yLabel ? "5%" : "3%",
       right: "4%",
-      bottom: "3%",
+      bottom: xLabel ? "10%" : "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
     },
-    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, xLabel, labels),
-    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, yLabel),
+    xAxis: makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    yAxis: makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
         type: "line",
@@ -3745,7 +3783,7 @@ function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, is
         data,
         label: {
           position: "outside",
-          formatter: "{b}",
+          formatter: "{b} \u2014 {c} ({d}%)",
           color: textColor,
           fontFamily: FONT_FAMILY
         },
@@ -3754,11 +3792,10 @@ function buildPieOption(parsed, textColor, colors, titleConfig, tooltipTheme, is
     ]
   };
 }
-function buildRadarOption(parsed, palette, textColor, colors, titleConfig, tooltipTheme) {
+function buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
   const maxValue = Math.max(...values) * 1.15;
-  const gridOpacity = 0.6;
   const indicator = parsed.data.map((d) => ({
     name: d.label,
     max: maxValue
@@ -3775,7 +3812,8 @@ function buildRadarOption(parsed, palette, textColor, colors, titleConfig, toolt
       indicator,
       axisName: {
         color: textColor,
-        fontFamily: FONT_FAMILY
+        fontFamily: FONT_FAMILY,
+        fontSize: 16
       },
       splitLine: {
         lineStyle: { color: palette.border, opacity: gridOpacity }
@@ -3832,7 +3870,7 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
         data,
         label: {
           position: "outside",
-          formatter: "{b}",
+          formatter: "{b} \u2014 {c} ({d}%)",
           color: textColor,
           fontFamily: FONT_FAMILY
         },
@@ -3841,7 +3879,7 @@ function buildPolarAreaOption(parsed, textColor, colors, titleConfig, tooltipThe
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, colors, titleConfig, tooltipTheme) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -3856,11 +3894,20 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       type: "bar",
       stack: "total",
       data,
-      itemStyle: { color }
+      itemStyle: { color },
+      label: {
+        show: true,
+        position: "inside",
+        formatter: "{c}",
+        color: "#ffffff",
+        fontSize: 14,
+        fontWeight: "bold",
+        fontFamily: FONT_FAMILY
+      }
     };
   });
-  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, isHorizontal ? yLabel : xLabel, labels);
-  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, isHorizontal ? xLabel : yLabel);
+  const categoryAxis = makeGridAxis("category", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? yLabel : xLabel, labels);
+  const valueAxis = makeGridAxis("value", textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
   return {
     backgroundColor: "transparent",
     animation: false,
@@ -3876,7 +3923,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       textStyle: { color: textColor }
     },
     grid: {
-      left: "3%",
+      left: yLabel ? "5%" : "3%",
       right: "4%",
       bottom: "15%",
       top: parsed.title ? "15%" : "5%",
@@ -3927,9 +3974,10 @@ async function renderEChartsForExport(content, theme, palette) {
     chart.setOption(option);
     const svgString = chart.renderToSVGString();
     if (!svgString) return "";
+    const bgStyle = theme !== "transparent" ? `background: ${effectivePalette.bg}; ` : "";
     return svgString.replace(
       /^<svg /,
-      `<svg style="font-family: ${FONT_FAMILY}" `
+      `<svg style="${bgStyle}font-family: ${FONT_FAMILY}" `
     );
   } finally {
     chart.dispose();
@@ -4594,14 +4642,14 @@ function tokenizeFreeformText(text) {
   return Array.from(counts.entries()).map(([text2, count]) => ({ text: text2, weight: count, lineNumber: 0 })).sort((a, b) => b.weight - a.weight);
 }
 var SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
-var SLOPE_LABEL_FONT_SIZE = 12;
-var SLOPE_CHAR_WIDTH = 7;
-function renderSlopeChart(container, parsed, palette, isDark, onClickItem) {
+var SLOPE_LABEL_FONT_SIZE = 14;
+var SLOPE_CHAR_WIDTH = 8;
+function renderSlopeChart(container, parsed, palette, isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { periods, data, title } = parsed;
   if (data.length === 0 || periods.length < 2) return;
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const maxLabelText = data.reduce((longest, item) => {
     const text = `${item.values[item.values.length - 1]} \u2014 ${item.label}`;
@@ -4610,14 +4658,14 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem) {
   const estimatedLabelWidth = maxLabelText.length * SLOPE_CHAR_WIDTH;
   const maxRightMargin = Math.floor(width * 0.35);
   const rightMargin = Math.min(
-    Math.max(estimatedLabelWidth + 20, 100),
+    Math.max(estimatedLabelWidth + 30, 120),
     maxRightMargin
   );
   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.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const allValues = data.flatMap((d) => d.values);
   const [minVal, maxVal] = d3Array.extent(allValues);
@@ -4628,11 +4676,11 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem) {
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
   }
   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", "13px").attr("font-weight", "600").text(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 = d3Shape.line().x((_d, i) => xScale(periods[i])).y((d) => yScale(d));
@@ -4670,7 +4718,7 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem) {
       const isFirst = i === 0;
       const isLast = i === periods.length - 1;
       if (!isLast) {
-        g.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", "12px").text(val.toString());
+        g.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 lastX = xScale(periods[periods.length - 1]);
@@ -4796,12 +4844,12 @@ function orderArcNodes(links, order, groups) {
   return allNodes;
 }
 var ARC_MARGIN = { top: 60, right: 40, bottom: 60, left: 40 };
-function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
+function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { links, title, orientation, arcOrder, arcNodeGroups } = parsed;
   if (links.length === 0) return;
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const isVertical = orientation === "vertical";
   const margin = isVertical ? {
@@ -4814,7 +4862,7 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
   const innerHeight = height - margin.top - margin.bottom;
   const textColor = palette.text;
   const mutedColor = palette.border;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const nodes = orderArcNodes(links, arcOrder, arcNodeGroups);
   const nodeColorMap = /* @__PURE__ */ new Map();
@@ -4837,7 +4885,7 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
   const svg = d3Selection2.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) {
-    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
   }
   const neighbors = /* @__PURE__ */ new Map();
   for (const node of nodes) neighbors.set(node, /* @__PURE__ */ new Set());
@@ -4870,11 +4918,11 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
     g.selectAll(".arc-node").attr("opacity", 1);
     g.selectAll(".arc-group-band").attr(
       "fill-opacity",
-      0.08
+      0.06
     );
     g.selectAll(".arc-group-label").attr(
       "fill-opacity",
-      0.7
+      0.5
     );
   }
   function handleGroupEnter(groupName) {
@@ -4914,10 +4962,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
         const minY = Math.min(...positions) - bandPad;
         const maxY = Math.max(...positions) + bandPad;
         const bandColor = group.color ?? mutedColor;
-        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("x", baseX - bandHalfW).attr("y", minY).attr("width", bandHalfW * 2).attr("height", maxY - minY).attr("rx", 4).attr("fill", bandColor).attr("fill-opacity", 0.08).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("x", baseX - bandHalfW).attr("y", minY).attr("width", bandHalfW * 2).attr("height", maxY - minY).attr("rx", 4).attr("fill", textColor).attr("fill-opacity", 0.06).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
-        g.append("text").attr("class", "arc-group-label").attr("data-group", group.name).attr("x", baseX - bandHalfW + 6).attr("y", minY + 12).attr("fill", bandColor).attr("font-size", "10px").attr("font-weight", "600").attr("fill-opacity", 0.7).style("cursor", onClickItem ? "pointer" : "default").text(group.name).on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("text").attr("class", "arc-group-label").attr("data-group", group.name).attr("x", baseX - bandHalfW + 6).attr("y", minY + 14).attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "600").attr("fill-opacity", 0.5).style("cursor", onClickItem ? "pointer" : "default").text(group.name).on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
       }
@@ -4958,10 +5006,10 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem) {
         const minX = Math.min(...positions) - bandPad;
         const maxX = Math.max(...positions) + bandPad;
         const bandColor = group.color ?? mutedColor;
-        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("x", minX).attr("y", baseY - bandHalfH).attr("width", maxX - minX).attr("height", bandHalfH * 2).attr("rx", 4).attr("fill", bandColor).attr("fill-opacity", 0.08).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("rect").attr("class", "arc-group-band").attr("data-group", group.name).attr("x", minX).attr("y", baseY - bandHalfH).attr("width", maxX - minX).attr("height", bandHalfH * 2).attr("rx", 4).attr("fill", textColor).attr("fill-opacity", 0.06).style("cursor", "pointer").on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
-        g.append("text").attr("class", "arc-group-label").attr("data-group", group.name).attr("x", (minX + maxX) / 2).attr("y", baseY + bandHalfH - 4).attr("text-anchor", "middle").attr("fill", bandColor).attr("font-size", "10px").attr("font-weight", "600").attr("fill-opacity", 0.7).style("cursor", onClickItem ? "pointer" : "default").text(group.name).on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
+        g.append("text").attr("class", "arc-group-label").attr("data-group", group.name).attr("x", (minX + maxX) / 2).attr("y", baseY + bandHalfH - 4).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "600").attr("fill-opacity", 0.5).style("cursor", onClickItem ? "pointer" : "default").text(group.name).on("mouseenter", () => handleGroupEnter(group.name)).on("mouseleave", handleMouseLeave).on("click", () => {
           if (onClickItem) onClickItem(group.lineNumber);
         });
       }
@@ -5257,7 +5305,7 @@ function buildEventTooltipHtml(ev) {
 function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
@@ -5272,13 +5320,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
   } = parsed;
   if (timelineEvents.length === 0) return;
   const tooltip = createTooltip(container, palette, isDark);
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const isVertical = orientation === "vertical";
   const textColor = palette.text;
   const mutedColor = palette.border;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const groupColorMap = /* @__PURE__ */ new Map();
   timelineGroups.forEach((grp, i) => {
@@ -5382,7 +5430,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
       const svg = d3Selection2.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) {
-        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
       }
       renderEras(
         g,
@@ -5476,7 +5524,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
       const svg = d3Selection2.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) {
-        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+        svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
       }
       renderEras(
         g,
@@ -5599,7 +5647,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
     const svg = d3Selection2.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) {
-      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
     }
     renderEras(
       g,
@@ -5709,7 +5757,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
           if (labelFitsInside) {
-            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", "#ffffff").attr("font-size", "13px").attr("font-weight", "500").text(ev.label);
+            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", "#ffffff").attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
           } else {
             const wouldFlipLeft = x + rectW > innerWidth * 0.6;
             const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -5744,7 +5792,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
     const svg = d3Selection2.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) {
-      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
     }
     renderEras(
       g,
@@ -5848,7 +5896,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem) {
         }
         evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
         if (labelFitsInside) {
-          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", "#ffffff").attr("font-size", "13px").attr("font-weight", "500").text(ev.label);
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", "#ffffff").attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
         } else {
           const wouldFlipLeft = x + rectW > innerWidth * 0.6;
           const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -5871,17 +5919,17 @@ function getRotateFn(mode) {
   if (mode === "angled") return () => Math.round(Math.random() * 30 - 15);
   return () => 0;
 }
-function renderWordCloud(container, parsed, palette, _isDark, onClickItem) {
+function renderWordCloud(container, parsed, palette, _isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { words, title, cloudOptions } = parsed;
   if (words.length === 0) return;
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const titleHeight = title ? 40 : 0;
   const cloudHeight = height - titleHeight;
   const textColor = palette.text;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const { minSize, maxSize } = cloudOptions;
   const weights = words.map((w) => w.weight);
@@ -5895,7 +5943,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem) {
   const rotateFn = getRotateFn(cloudOptions.rotate);
   const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 28).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
   }
   const g = svg.append("g").attr(
     "transform",
@@ -5914,7 +5962,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem) {
     });
   }).start();
 }
-function renderWordCloudAsync(container, parsed, palette, _isDark) {
+function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
     d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
     const { words, title, cloudOptions } = parsed;
@@ -5922,8 +5970,8 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
       resolve();
       return;
     }
-    const width = container.clientWidth;
-    const height = container.clientHeight;
+    const width = exportDims?.width ?? container.clientWidth;
+    const height = exportDims?.height ?? container.clientHeight;
     if (width <= 0 || height <= 0) {
       resolve();
       return;
@@ -5931,7 +5979,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
     const titleHeight = title ? 40 : 0;
     const cloudHeight = height - titleHeight;
     const textColor = palette.text;
-    const bgColor = palette.overlay;
+    const bgColor = palette.bg;
     const colors = getSeriesColors(palette);
     const { minSize, maxSize } = cloudOptions;
     const weights = words.map((w) => w.weight);
@@ -5945,7 +5993,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark) {
     const rotateFn = getRotateFn(cloudOptions.rotate);
     const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     if (title) {
-      svg.append("text").attr("x", width / 2).attr("y", 28).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+      svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
     }
     const g = svg.append("g").attr(
       "transform",
@@ -6086,15 +6134,15 @@ function blendColors(hexColors) {
 function circlePathD(cx, cy, r) {
   return `M${cx - r},${cy} A${r},${r} 0 1,0 ${cx + r},${cy} A${r},${r} 0 1,0 ${cx - r},${cy} Z`;
 }
-function renderVenn(container, parsed, palette, isDark, onClickItem) {
+function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { vennSets, vennOverlaps, vennShowValues, title } = parsed;
   if (vennSets.length < 2) return;
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  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.overlay;
+  const bgColor = palette.bg;
   const colors = getSeriesColors(palette);
   const titleHeight = title ? 40 : 0;
   const radii = vennSets.map((s) => radiusFromArea(s.size));
@@ -6155,7 +6203,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem) {
   const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
-    svg.append("text").attr("x", width / 2).attr("y", 28).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").text(title);
+    svg.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
   }
   const defs = svg.append("defs");
   const pad = 20;
@@ -6297,7 +6345,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem) {
     });
   });
 }
-function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
+function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportDims) {
   d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     title,
@@ -6310,12 +6358,12 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     quadrantYAxisLineNumber
   } = parsed;
   if (quadrantPoints.length === 0) return;
-  const width = container.clientWidth;
-  const height = container.clientHeight;
+  const width = exportDims?.width ?? container.clientWidth;
+  const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
   const textColor = palette.text;
   const mutedColor = palette.textMuted;
-  const bgColor = palette.overlay;
+  const bgColor = palette.bg;
   const borderColor = palette.border;
   const defaultColors = [
     palette.colors.blue,
@@ -6323,7 +6371,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     palette.colors.yellow,
     palette.colors.purple
   ];
-  const margin = { top: title ? 60 : 30, right: 30, bottom: 50, left: 60 };
+  const hasXAxis = !!quadrantXAxis;
+  const hasYAxis = !!quadrantYAxis;
+  const margin = { top: title ? 60 : 30, right: 30, bottom: hasXAxis ? 70 : 40, left: hasYAxis ? 80 : 40 };
   const chartWidth = width - margin.left - margin.right;
   const chartHeight = height - margin.top - margin.bottom;
   const xScale = d3Scale.scaleLinear().domain([0, 1]).range([0, chartWidth]);
@@ -6331,7 +6381,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
   const svg = d3Selection2.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("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("font-weight", "700").style(
+    const titleText = svg.append("text").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);
@@ -6344,6 +6394,16 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     }
   }
   const chartG = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
+  const mixHex = (a, b, pct) => {
+    const parse = (h) => {
+      const r = h.replace("#", "");
+      const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+      return [parseInt(f.substring(0, 2), 16), parseInt(f.substring(2, 4), 16), parseInt(f.substring(4, 6), 16)];
+    };
+    const [ar, ag, ab] = parse(a), [br, bg, bb] = parse(b), t = pct / 100;
+    const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+    return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+  };
   const getQuadrantFill = (label, defaultIdx) => {
     return label?.color ?? defaultColors[defaultIdx % defaultColors.length];
   };
@@ -6398,9 +6458,13 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     }
   ];
   const quadrantRects = chartG.selectAll("rect.quadrant").data(quadrantDefs).enter().append("rect").attr("class", "quadrant").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.w).attr("height", (d) => d.h).attr("fill", (d) => getQuadrantFill(d.label, d.colorIdx)).attr("stroke", borderColor).attr("stroke-width", 0.5);
-  const contrastColor = isDark ? "#ffffff" : "#333333";
-  const shadowColor = isDark ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)";
-  const quadrantLabelTexts = chartG.selectAll("text.quadrant-label").data(quadrantDefs.filter((d) => d.label !== null)).enter().append("text").attr("class", "quadrant-label").attr("x", (d) => d.labelX).attr("y", (d) => d.labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", contrastColor).attr("font-size", "16px").attr("font-weight", "600").style("text-shadow", `0 1px 2px ${shadowColor}`).style(
+  const contrastColor = "#ffffff";
+  const shadowColor = "rgba(0,0,0,0.4)";
+  const getQuadrantLabelColor = (d) => {
+    const fill2 = getQuadrantFill(d.label, d.colorIdx);
+    return mixHex("#000000", fill2, 40);
+  };
+  const quadrantLabelTexts = chartG.selectAll("text.quadrant-label").data(quadrantDefs.filter((d) => d.label !== null)).enter().append("text").attr("class", "quadrant-label").attr("x", (d) => d.labelX).attr("y", (d) => d.labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", (d) => getQuadrantLabelColor(d)).attr("font-size", "48px").attr("font-weight", "700").style(
     "cursor",
     (d) => onClickItem && d.label?.lineNumber ? "pointer" : "default"
   ).text((d) => d.label.text);
@@ -6414,15 +6478,14 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     });
   }
   if (quadrantXAxis) {
-    const xLowLabel = svg.append("text").attr("x", margin.left).attr("y", height - 15).attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "12px").style(
+    const xLowLabel = svg.append("text").attr("x", margin.left + chartWidth / 4).attr("y", height - 20).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").style(
       "cursor",
       onClickItem && quadrantXAxisLineNumber ? "pointer" : "default"
     ).text(quadrantXAxis[0]);
-    const xHighLabel = svg.append("text").attr("x", width - margin.right).attr("y", height - 15).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", "12px").style(
+    const xHighLabel = svg.append("text").attr("x", margin.left + chartWidth * 3 / 4).attr("y", height - 20).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").style(
       "cursor",
       onClickItem && quadrantXAxisLineNumber ? "pointer" : "default"
     ).text(quadrantXAxis[1]);
-    svg.append("text").attr("x", width / 2).attr("y", height - 15).attr("text-anchor", "middle").attr("fill", mutedColor).attr("font-size", "12px").text("\u2192");
     if (onClickItem && quadrantXAxisLineNumber) {
       [xLowLabel, xHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantXAxisLineNumber)).on("mouseenter", function() {
@@ -6434,15 +6497,16 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     }
   }
   if (quadrantYAxis) {
-    const yLowLabel = svg.append("text").attr("x", 15).attr("y", height - margin.bottom).attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "12px").attr("transform", `rotate(-90, 15, ${height - margin.bottom})`).style(
+    const yMidBottom = margin.top + chartHeight * 3 / 4;
+    const yMidTop = margin.top + chartHeight / 4;
+    const yLowLabel = svg.append("text").attr("x", 22).attr("y", yMidBottom).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("transform", `rotate(-90, 22, ${yMidBottom})`).style(
       "cursor",
       onClickItem && quadrantYAxisLineNumber ? "pointer" : "default"
     ).text(quadrantYAxis[0]);
-    const yHighLabel = svg.append("text").attr("x", 15).attr("y", margin.top).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", "12px").attr("transform", `rotate(-90, 15, ${margin.top})`).style(
+    const yHighLabel = svg.append("text").attr("x", 22).attr("y", yMidTop).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "18px").attr("transform", `rotate(-90, 22, ${yMidTop})`).style(
       "cursor",
       onClickItem && quadrantYAxisLineNumber ? "pointer" : "default"
     ).text(quadrantYAxis[1]);
-    svg.append("text").attr("x", 15).attr("y", height / 2).attr("text-anchor", "middle").attr("fill", mutedColor).attr("font-size", "12px").attr("transform", `rotate(-90, 15, ${height / 2})`).text("\u2192");
     if (onClickItem && quadrantYAxisLineNumber) {
       [yLowLabel, yHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantYAxisLineNumber)).on("mouseenter", function() {
@@ -6469,8 +6533,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem) {
     const quadDef = quadrantDefs.find((d) => d.position === quadrant);
     const pointColor = quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
     const pointG = pointsG.append("g").attr("class", "point-group");
-    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", contrastColor).attr("stroke", pointColor).attr("stroke-width", 2);
-    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", contrastColor).attr("font-size", "11px").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
+    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
+    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", contrastColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
     const tipHtml = `<strong>${point.label}</strong><br>x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`;
     pointG.style("cursor", onClickItem ? "pointer" : "default").on("mouseenter", (event) => {
       showTooltip(tooltip, tipHtml, event);
@@ -6512,7 +6576,11 @@ var EXPORT_WIDTH = 1200;
 var EXPORT_HEIGHT = 800;
 async function renderD3ForExport(content, theme, palette) {
   const parsed = parseD3(content, palette);
-  if (parsed.error) return "";
+  if (parsed.error && parsed.type !== "sequence") {
+    const looksLikeSequence2 = /->|~>|<-/.test(content);
+    if (!looksLikeSequence2) return "";
+    parsed.type = "sequence";
+  }
   if (parsed.type === "wordcloud" && parsed.words.length === 0) return "";
   if (parsed.type === "slope" && parsed.data.length === 0) return "";
   if (parsed.type === "arc" && parsed.links.length === 0) return "";
@@ -6530,30 +6598,35 @@ async function renderD3ForExport(content, theme, palette) {
   container.style.position = "absolute";
   container.style.left = "-9999px";
   document.body.appendChild(container);
+  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_renderer(), renderer_exports));
       const seqParsed = parseSequenceDgmo2(content);
       if (seqParsed.error || seqParsed.participants.length === 0) return "";
-      renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark);
+      renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark, void 0, {
+        exportWidth: EXPORT_WIDTH
+      });
     } else if (parsed.type === "wordcloud") {
-      await renderWordCloudAsync(container, parsed, effectivePalette, isDark);
+      await renderWordCloudAsync(container, parsed, effectivePalette, isDark, dims);
     } else if (parsed.type === "arc") {
-      renderArcDiagram(container, parsed, effectivePalette, isDark);
+      renderArcDiagram(container, parsed, effectivePalette, isDark, void 0, dims);
     } else if (parsed.type === "timeline") {
-      renderTimeline(container, parsed, effectivePalette, isDark);
+      renderTimeline(container, parsed, effectivePalette, isDark, void 0, dims);
     } else if (parsed.type === "venn") {
-      renderVenn(container, parsed, effectivePalette, isDark);
+      renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);
     } else if (parsed.type === "quadrant") {
-      renderQuadrant(container, parsed, effectivePalette, isDark);
+      renderQuadrant(container, parsed, effectivePalette, isDark, void 0, dims);
     } else {
-      renderSlopeChart(container, parsed, effectivePalette, isDark);
+      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;