@diagrammo/dgmo 0.3.0 → 0.3.2

package/docs/language-reference.md

@@ -44,6 +44,41 @@ Set via CLI: `dgmo diagram.dgmo --palette catppuccin --theme dark`
 
 Text fields support: `*italic*`, `**bold**`, `` `code` ``, `[link text](url)`. Bare URLs are auto-linked.
 
+### Multi-line Values
+
+Properties that accept comma-separated lists (`series`, `columns`, `rows`, `x-axis`, `y-axis`) also accept an indented multi-line format. Leave the value after the colon empty and list each value on its own indented line:
+
+```
+// Single-line (still works)
+series: Rum, Spices, Silk, Gold
+
+// Multi-line equivalent
+series:
+  Rum
+  Spices
+  Silk
+  Gold
+```
+
+Multi-line blocks support blank lines and `//` comments within the block. Trailing commas on values are stripped for convenience.
+
+```
+series:
+  Rum (red)
+  Spices (green)
+  // gold last
+  Gold (yellow)
+```
+
+Works with `columns:` and `rows:` in heatmaps:
+
+```
+columns:
+  January
+  February
+  March
+```
+
 ---
 
 ## Chart Types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/chart.ts

@@ -47,6 +47,7 @@ export interface ParsedChart {
 import { resolveColor } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
+import { collectIndentedValues } from './utils/parsing';
 
 // ============================================================
 // Parser
@@ -181,12 +182,17 @@ export function parseChart(
     }
 
     if (key === 'series') {
-      result.series = value;
-      // Parse comma-separated series names for multi-series chart types
-      const rawNames = value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
+      // Parse series names — comma-separated on one line, or indented multi-line
+      let rawNames: string[];
+      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: string[] = [];
       const nameColors: (string | undefined)[] = [];
       for (const raw of rawNames) {

package/src/d3.ts

@@ -180,6 +180,7 @@ import type { PaletteColors } from './palettes';
 import { getSeriesColors } from './palettes';
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
+import { collectIndentedValues } from './utils/parsing';
 
 // ============================================================
 // Timeline Date Helper
@@ -517,10 +518,18 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
 
     // Quadrant-specific parsing
     if (result.type === 'quadrant') {
-      // x-axis: Low, High
-      const xAxisMatch = line.match(/^x-axis\s*:\s*(.+)/i);
+      // x-axis: Low, High  — or indented multi-line
+      const xAxisMatch = line.match(/^x-axis\s*:\s*(.*)/i);
       if (xAxisMatch) {
-        const parts = xAxisMatch[1].split(',').map((s) => s.trim());
+        const val = xAxisMatch[1].trim();
+        let parts: string[];
+        if (val) {
+          parts = val.split(',').map((s) => s.trim());
+        } else {
+          const collected = collectIndentedValues(lines, i);
+          i = collected.newIndex;
+          parts = collected.values;
+        }
         if (parts.length >= 2) {
           result.quadrantXAxis = [parts[0], parts[1]];
           result.quadrantXAxisLineNumber = lineNumber;
@@ -528,10 +537,18 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
         continue;
       }
 
-      // y-axis: Low, High
-      const yAxisMatch = line.match(/^y-axis\s*:\s*(.+)/i);
+      // y-axis: Low, High  — or indented multi-line
+      const yAxisMatch = line.match(/^y-axis\s*:\s*(.*)/i);
       if (yAxisMatch) {
-        const parts = yAxisMatch[1].split(',').map((s) => s.trim());
+        const val = yAxisMatch[1].trim();
+        let parts: string[];
+        if (val) {
+          parts = val.split(',').map((s) => s.trim());
+        } else {
+          const collected = collectIndentedValues(lines, i);
+          i = collected.newIndex;
+          parts = collected.values;
+        }
         if (parts.length >= 2) {
           result.quadrantYAxis = [parts[0], parts[1]];
           result.quadrantYAxisLineNumber = lineNumber;
@@ -1057,6 +1074,29 @@ function tokenizeFreeformText(text: string): WordCloudWord[] {
 // Slope Chart Renderer
 // ============================================================
 
+/**
+ * Resolves vertical label collisions by nudging overlapping items apart.
+ * Takes items with a naturalY (center) and height, returns adjusted center Y positions.
+ */
+function resolveVerticalCollisions(
+  items: { naturalY: number; height: number }[],
+  minGap: number
+): number[] {
+  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<number>(items.length);
+  let prevBottom = -Infinity;
+  for (const item of sorted) {
+    const halfH = item.height / 2;
+    const top = Math.max(item.naturalY - halfH, prevBottom + minGap);
+    adjustedY[item.idx] = top + halfH;
+    prevBottom = top + item.height;
+  }
+  return adjustedY;
+}
+
 const SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
 const SLOPE_LABEL_FONT_SIZE = 14;
 const SLOPE_CHAR_WIDTH = 8; // approximate px per character at 14px
@@ -1188,28 +1228,83 @@ export function renderSlopeChart(
     .x((_d, i) => xScale(periods[i])!)
     .y((d) => yScale(d));
 
-  // Render each data series
-  data.forEach((item, idx) => {
+  // Pre-compute per-series data for label collision resolution
+  const seriesInfo = data.map((item, idx) => {
     const color = item.color ?? colors[idx % colors.length];
-
-    // Wrap each series in a group with data-line-number for sync adapter
-    const seriesG = g
-      .append('g')
-      .attr('class', 'slope-series')
-      .attr('data-line-number', String(item.lineNumber));
-
-    // Tooltip content – overall change for this series
     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>');
 
+    // Compute right-side label text and wrapping info
+    const lastX = xScale(periods[periods.length - 1])!;
+    const labelText = `${lastVal} — ${item.label}`;
+    const availableWidth = rightMargin - 15;
+    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+
+    let labelLineCount = 1;
+    let wrappedLines: string[] | null = null;
+    if (labelText.length > maxChars) {
+      const words = labelText.split(/\s+/);
+      const lines: string[] = [];
+      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,
+    };
+  });
+
+  // --- Resolve left-side label collisions per non-last period column ---
+  const leftLabelHeight = 20; // 16px font needs ~20px to avoid glyph overlap
+  const leftLabelCollisions: Map<number, number[]> = 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));
+  }
+
+  // --- Resolve right-side label collisions ---
+  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);
+
+  // Render each data series
+  data.forEach((item, idx) => {
+    const si = seriesInfo[idx];
+    const color = si.color;
+
+    // Wrap each series in a group with data-line-number for sync adapter
+    const seriesG = g
+      .append('g')
+      .attr('class', 'slope-series')
+      .attr('data-line-number', String(item.lineNumber));
+
     // Line
     seriesG.append('path')
       .datum(item.values)
@@ -1227,10 +1322,10 @@ export function renderSlopeChart(
       .attr('d', lineGen)
       .style('cursor', onClickItem ? 'pointer' : 'default')
       .on('mouseenter', (event: MouseEvent) =>
-        showTooltip(tooltip, tipHtml, event)
+        showTooltip(tooltip, si.tipHtml, event)
       )
       .on('mousemove', (event: MouseEvent) =>
-        showTooltip(tooltip, tipHtml, event)
+        showTooltip(tooltip, si.tipHtml, event)
       )
       .on('mouseleave', () => hideTooltip(tooltip))
       .on('click', () => {
@@ -1252,10 +1347,10 @@ export function renderSlopeChart(
         .attr('stroke-width', 1.5)
         .style('cursor', onClickItem ? 'pointer' : 'default')
         .on('mouseenter', (event: MouseEvent) =>
-          showTooltip(tooltip, tipHtml, event)
+          showTooltip(tooltip, si.tipHtml, event)
         )
         .on('mousemove', (event: MouseEvent) =>
-          showTooltip(tooltip, tipHtml, event)
+          showTooltip(tooltip, si.tipHtml, event)
         )
         .on('mouseleave', () => hideTooltip(tooltip))
         .on('click', () => {
@@ -1266,59 +1361,41 @@ export function renderSlopeChart(
       const isFirst = i === 0;
       const isLast = i === periods.length - 1;
       if (!isLast) {
+        const adjustedY = leftLabelCollisions.get(i)![idx];
         seriesG.append('text')
           .attr('x', isFirst ? x - 10 : x)
-          .attr('y', y)
+          .attr('y', adjustedY)
           .attr('dy', '0.35em')
           .attr('text-anchor', isFirst ? 'end' : 'middle')
-          .attr('fill', textColor)
+          .attr('fill', color)
           .attr('font-size', '16px')
           .text(val.toString());
       }
     });
 
     // Series label with value at end of line — wraps if it exceeds available space
-    const lastX = xScale(periods[periods.length - 1])!;
-    const lastY = yScale(lastVal);
-    const labelText = `${lastVal} — ${item.label}`;
-    const availableWidth = rightMargin - 15;
-    const maxChars = Math.floor(availableWidth / SLOPE_CHAR_WIDTH);
+    const adjustedLastY = rightAdjustedY[idx];
 
     const labelEl = seriesG
       .append('text')
-      .attr('x', lastX + 10)
-      .attr('y', lastY)
+      .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 (labelText.length <= maxChars) {
-      labelEl.attr('dy', '0.35em').text(labelText);
+    if (!si.wrappedLines) {
+      labelEl.attr('dy', '0.35em').text(si.labelText);
     } else {
-      // Wrap into lines that fit the available width
-      const words = labelText.split(/\s+/);
-      const lines: string[] = [];
-      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((line, li) => {
+      si.wrappedLines.forEach((line, li) => {
         labelEl
           .append('tspan')
-          .attr('x', lastX + 10)
+          .attr('x', si.lastX + 10)
           .attr(
             'dy',
             li === 0

package/src/echarts.ts

@@ -88,6 +88,7 @@ import { getSeriesColors, getSegmentColors } from './palettes';
 import { parseChart } from './chart';
 import type { ParsedChart } from './chart';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
+import { collectIndentedValues } from './utils/parsing';
 
 // ============================================================
 // Parser
@@ -193,11 +194,16 @@ export function parseEChart(
     }
 
     if (key === 'series') {
-      result.series = value;
-      const rawNames = value
-        .split(',')
-        .map((s) => s.trim())
-        .filter(Boolean);
+      let rawNames: string[];
+      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: string[] = [];
       const nameColors: (string | undefined)[] = [];
       for (const raw of rawNames) {
@@ -241,12 +247,24 @@ export function parseEChart(
 
     // Heatmap columns and rows headers
     if (key === 'columns') {
-      result.columns = value.split(',').map((s) => s.trim());
+      if (value) {
+        result.columns = value.split(',').map((s) => s.trim());
+      } else {
+        const collected = collectIndentedValues(lines, i);
+        i = collected.newIndex;
+        result.columns = collected.values;
+      }
       continue;
     }
 
     if (key === 'rows') {
-      result.rows = value.split(',').map((s) => s.trim());
+      if (value) {
+        result.rows = value.split(',').map((s) => s.trim());
+      } else {
+        const collected = collectIndentedValues(lines, i);
+        i = collected.newIndex;
+        result.rows = collected.values;
+      }
       continue;
     }
 
@@ -1291,21 +1309,45 @@ function makeGridAxis(
   gridOpacity: number,
   label?: string,
   data?: string[],
-  nameGapOverride?: number
+  nameGapOverride?: number,
+  chartWidthHint?: number
 ): Record<string, unknown> {
   const defaultGap = type === 'value' ? 75 : 40;
+
+  // Compute category label sizing: font size and width constraint
+  let catFontSize = 16;
+  let catLabelExtras: Record<string, unknown> = {};
+  if (type === 'category' && data && data.length > 0) {
+    const maxLabelLen = Math.max(...data.map((l) => l.length));
+    const count = data.length;
+    // Reduce font size based on density and label length
+    if (count > 10 || maxLabelLen > 20) catFontSize = 10;
+    else if (count > 5 || maxLabelLen > 14) catFontSize = 11;
+    else if (maxLabelLen > 8) catFontSize = 12;
+
+    // Constrain labels to their allotted slot width so ECharts wraps instead of hiding
+    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: string) =>
-          value.replace(/([a-z])([A-Z])/g, '$1\n$2').replace(/ /g, '\n'),
+          value.replace(/([a-z])([A-Z])/g, '$1\n$2'),
+        ...catLabelExtras,
       }),
     },
     splitLine: { lineStyle: { color: splitLineColor, opacity: gridOpacity } },
@@ -1325,7 +1367,8 @@ function makeGridAxis(
 export function buildEChartsOptionFromChart(
   parsed: ParsedChart,
   palette: PaletteColors,
-  isDark: boolean
+  isDark: boolean,
+  chartWidth?: number
 ): EChartsOption {
   if (parsed.error) return {};
 
@@ -1357,15 +1400,15 @@ export function buildEChartsOptionFromChart(
 
   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);
+        ? 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':
@@ -1387,7 +1430,8 @@ function buildBarOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === 'horizontal';
@@ -1402,7 +1446,7 @@ function buildBarOption(
   const hCatGap = isHorizontal && yLabel
     ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
     : undefined;
-  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 : undefined);
   const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel);
 
   // xAxis is always the bottom axis, yAxis is always the left axis in ECharts
@@ -1448,7 +1492,8 @@ function buildLineOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
@@ -1471,7 +1516,7 @@ function buildLineOption(
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1500,7 +1545,8 @@ function buildMultiLineOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
@@ -1547,7 +1593,7 @@ function buildMultiLineOption(
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series,
   };
@@ -1563,7 +1609,8 @@ function buildAreaOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
@@ -1586,7 +1633,7 @@ function buildAreaOption(
       top: parsed.title ? '15%' : '5%',
       containLabel: true,
     },
-    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels),
+    xAxis: makeGridAxis('category', textColor, axisLineColor, splitLineColor, gridOpacity, xLabel, labels, undefined, chartWidth),
     yAxis: makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, yLabel),
     series: [
       {
@@ -1790,7 +1837,8 @@ function buildBarStackedOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  tooltipTheme: Record<string, unknown>,
+  chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === 'horizontal';
@@ -1827,8 +1875,11 @@ function buildBarStackedOption(
   const hCatGap = isHorizontal && yLabel
     ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
     : undefined;
-  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 : undefined);
+  // For horizontal bars with a legend, use a smaller nameGap so the xlabel
+  // stays close to the axis ticks rather than drifting toward the legend.
+  const hValueGap = isHorizontal && xLabel ? 40 : undefined;
+  const valueAxis = makeGridAxis('value', textColor, axisLineColor, splitLineColor, gridOpacity, isHorizontal ? xLabel : yLabel, undefined, hValueGap);
 
   return {
     backgroundColor: 'transparent',
@@ -1901,7 +1952,7 @@ export async function renderEChartsForExport(
   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 '';

package/src/sequence/parser.ts

@@ -63,6 +63,8 @@ export interface SequenceMessage {
   lineNumber: number;
   async?: boolean;
   bidirectional?: boolean;
+  /** Standalone return — the message itself IS a return (dashed arrow, no call). */
+  standaloneReturn?: boolean;
 }
 
 /**
@@ -184,10 +186,20 @@ const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
 function parseReturnLabel(rawLabel: string): {
   label: string;
   returnLabel?: string;
+  standaloneReturn?: boolean;
 } {
   if (!rawLabel) return { label: '' };
 
-  // Check <- syntax first
+  // Standalone return: label starts with `<-` (no forward label)
+  const standaloneMatch = rawLabel.match(/^<-\s*(.*)$/);
+  if (standaloneMatch) {
+    return {
+      label: standaloneMatch[1].trim(),
+      standaloneReturn: true,
+    };
+  }
+
+  // Check <- syntax first (separates forward label from return label)
   const arrowReturn = rawLabel.match(ARROW_RETURN_PATTERN);
   if (arrowReturn) {
     return { label: arrowReturn[1].trim(), returnLabel: arrowReturn[2].trim() };
@@ -620,8 +632,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const rawLabel = arrowMatch[3]?.trim() || '';
 
       // Extract return label — skip for async messages
-      const { label, returnLabel } = isAsync
-        ? { label: rawLabel, returnLabel: undefined }
+      const { label, returnLabel, standaloneReturn } = isAsync
+        ? { label: rawLabel, returnLabel: undefined, standaloneReturn: undefined }
         : parseReturnLabel(rawLabel);
 
       const msg: SequenceMessage = {
@@ -631,6 +643,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         returnLabel,
         lineNumber,
         ...(isAsync ? { async: true } : {}),
+        ...(standaloneReturn ? { standaloneReturn: true } : {}),
       };
       result.messages.push(msg);
       currentContainer().push(msg);

package/src/sequence/renderer.ts

@@ -571,6 +571,28 @@ export function buildRenderSequence(messages: SequenceMessage[]): RenderStep[] {
       });
     }
 
+    // Standalone return: emit as a return step directly (no call, no stack).
+    // Also pop the matching pending call from the stack so it doesn't
+    // generate a duplicate empty return later.
+    if (msg.standaloneReturn) {
+      // Find and remove the stack entry this return satisfies
+      // (the pending call where from→to matches to→from of this return)
+      for (let si = stack.length - 1; si >= 0; si--) {
+        if (stack[si].from === msg.to && stack[si].to === msg.from) {
+          stack.splice(si, 1);
+          break;
+        }
+      }
+      steps.push({
+        type: 'return',
+        from: msg.from,
+        to: msg.to,
+        label: msg.label,
+        messageIndex: mi,
+      });
+      continue;
+    }
+
     // Emit call
     steps.push({
       type: 'call',