@diagrammo/dgmo 0.1.3 → 0.1.5

package/package.json

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

package/src/cli.ts

@@ -4,6 +4,7 @@ import { JSDOM } from 'jsdom';
 import { Resvg } from '@resvg/resvg-js';
 import { renderD3ForExport } from './d3';
 import { getPalette } from './palettes/registry';
+import { DEFAULT_FONT_NAME } from './fonts';
 
 const PALETTES = [
   'nord',
@@ -128,6 +129,11 @@ function svgToPng(svg: string, background?: string): Buffer {
   const resvg = new Resvg(svg, {
     fitTo: { mode: 'zoom', value: 2 },
     ...(background ? { background } : {}),
+    font: {
+      loadSystemFonts: true,
+      defaultFontFamily: DEFAULT_FONT_NAME,
+      sansSerifFamily: DEFAULT_FONT_NAME,
+    },
   });
   const rendered = resvg.render();
   return rendered.asPng();

package/src/d3.ts

@@ -3,6 +3,7 @@ import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import * as d3Array from 'd3-array';
 import cloud from 'd3-cloud';
+import { FONT_FAMILY } from './fonts';
 
 // ============================================================
 // Types
@@ -3770,13 +3771,13 @@ export function renderWordCloud(
     .padding(4)
     .rotate(rotateFn)
     .fontSize((d) => d.size!)
-    .font('system-ui, -apple-system, sans-serif')
+    .font(FONT_FAMILY)
     .on('end', (layoutWords) => {
       g.selectAll('text')
         .data(layoutWords)
         .join('text')
         .style('font-size', (d) => `${d.size}px`)
-        .style('font-family', 'system-ui, -apple-system, sans-serif')
+        .style('font-family', FONT_FAMILY)
         .style('font-weight', '600')
         .style('fill', (_d, i) => colors[i % colors.length])
         .style('cursor', (d) =>
@@ -3874,13 +3875,13 @@ function renderWordCloudAsync(
       .padding(4)
       .rotate(rotateFn)
       .fontSize((d) => d.size!)
-      .font('system-ui, -apple-system, sans-serif')
+      .font(FONT_FAMILY)
       .on('end', (layoutWords) => {
         g.selectAll('text')
           .data(layoutWords)
           .join('text')
           .style('font-size', (d) => `${d.size}px`)
-          .style('font-family', 'system-ui, -apple-system, sans-serif')
+          .style('font-family', FONT_FAMILY)
           .style('font-weight', '600')
           .style('fill', (_d, i) => colors[i % colors.length])
           .attr('text-anchor', 'middle')
@@ -5013,6 +5014,7 @@ export async function renderD3ForExport(
 
     // Add xmlns for standalone SVG
     svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svgEl.style.fontFamily = FONT_FAMILY;
 
     return svgEl.outerHTML;
   } finally {

package/src/echarts.ts

@@ -1,4 +1,5 @@
 import type { EChartsOption } from 'echarts';
+import { FONT_FAMILY } from './fonts';
 
 // ============================================================
 // Types
@@ -407,7 +408,7 @@ export function buildEChartsOption(
           color: textColor,
           fontSize: 18,
           fontWeight: 'bold' as const,
-          fontFamily: 'system-ui, -apple-system, sans-serif',
+          fontFamily: FONT_FAMILY,
         },
       }
     : undefined;

package/src/fonts.ts

@@ -0,0 +1,2 @@
+export const FONT_FAMILY = 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif';
+export const DEFAULT_FONT_NAME = 'Helvetica';

package/src/sequence/renderer.ts

@@ -5,6 +5,7 @@
 import * as d3Selection from 'd3-selection';
 import type { PaletteColors } from '../palettes';
 import { resolveColor } from '../colors';
+import { FONT_FAMILY } from '../fonts';
 import type {
   ParsedSequenceDgmo,
   SequenceElement,
@@ -29,9 +30,21 @@ const MESSAGE_START_OFFSET = 30;
 const LIFELINE_TAIL = 30;
 const ARROWHEAD_SIZE = 8;
 
+// Mix two hex colors in sRGB: pct% of a, rest of b
+function mix(a: string, b: string, pct: number): string {
+  const parse = (h: string) => {
+    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: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
+  return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
+}
+
 // Shared fill/stroke helpers
 const fill = (palette: PaletteColors, isDark: boolean): string =>
-  `color-mix(in srgb, ${palette.primary} ${isDark ? '15%' : '30%'}, ${isDark ? palette.surface : palette.bg})`;
+  mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
 const stroke = (palette: PaletteColors): string => palette.textMuted;
 const SW = 1.5;
 const W = PARTICIPANT_BOX_WIDTH;
@@ -746,10 +759,15 @@ export function renderSequenceDiagram(
   // Build render sequence with stack-based return placement
   // Run on ALL messages first (preserves call stack correctness), then filter
   const allRenderSteps = buildRenderSequence(messages);
-  const renderSteps =
+  let renderSteps =
     hiddenMsgIndices.size > 0
       ? allRenderSteps.filter((s) => !hiddenMsgIndices.has(s.messageIndex))
       : allRenderSteps;
+  // Drop unlabeled returns — they add visual noise without conveying information.
+  // Labeled returns (explicit <- value) are kept.
+  renderSteps = renderSteps.filter(
+    (s) => s.type === 'call' || s.label
+  );
   const activations = activationsOff ? [] : computeActivations(renderSteps);
   const stepSpacing = 35;
 
@@ -1020,10 +1038,7 @@ export function renderSequenceDiagram(
     .attr('viewBox', `0 0 ${svgWidth} ${totalHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .attr('class', 'sequence-diagram')
-    .style(
-      'font-family',
-      'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif'
-    );
+    .style('font-family', FONT_FAMILY);
 
   // Define arrowhead markers
   const defs = svg.append('defs');
@@ -1119,7 +1134,7 @@ export function renderSequenceDiagram(
       ? resolveColor(group.color, palette)
       : undefined;
     const fillColor = resolvedGroupColor
-      ? `color-mix(in srgb, ${resolvedGroupColor} 10%, ${isDark ? palette.surface : palette.bg})`
+      ? mix(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10)
       : isDark
         ? palette.surface
         : palette.bg;
@@ -1352,7 +1367,7 @@ export function renderSequenceDiagram(
       .attr('height', y2 - y1)
       .attr('fill', isDark ? palette.surface : palette.bg);
 
-    const actFill = `color-mix(in srgb, ${palette.primary} ${isDark ? '15%' : '30%'}, ${isDark ? palette.surface : palette.bg})`;
+    const actFill = mix(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg
       .append('rect')
       .attr('x', x)