@diagrammo/dgmo 0.2.8 → 0.2.10

package/src/echarts.ts

@@ -54,6 +54,7 @@ export interface ParsedHeatmapRow {
 export interface ParsedEChart {
   type: EChartsChartType;
   title?: string;
+  titleLineNumber?: number;
   series?: string;
   seriesNames?: string[];
   seriesNameColors?: (string | undefined)[];
@@ -174,6 +175,7 @@ export function parseEChart(
 
     if (key === 'title') {
       result.title = value;
+      result.titleLineNumber = lineNumber;
       continue;
     }
 
@@ -536,6 +538,7 @@ function buildSankeyOption(
         type: 'sankey',
         emphasis: {
           focus: 'adjacency',
+          blurScope: 'global' as const,
         },
         nodeAlign: 'left',
         nodeGap: 12,
@@ -744,6 +747,10 @@ function buildFunctionOption(
       itemStyle: {
         color: fnColor,
       },
+      emphasis: {
+        focus: 'self' as const,
+        blurScope: 'global' as const,
+      },
     };
   });
 
@@ -1114,6 +1121,8 @@ function buildHeatmapOption(
           fontWeight: 'bold' as const,
         },
         emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
           itemStyle: {
             shadowBlur: 10,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
@@ -1208,6 +1217,8 @@ function buildFunnelOption(
           lineStyle: { color: textColor, opacity: 0.3 },
         },
         emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
           label: {
             fontSize: 15,
           },
@@ -1392,6 +1403,10 @@ function buildBarOption(
       {
         type: 'bar',
         data,
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
@@ -1440,6 +1455,10 @@ function buildLineOption(
         symbolSize: 8,
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
@@ -1474,6 +1493,10 @@ function buildMultiLineOption(
       symbolSize: 8,
       lineStyle: { color, width: 3 },
       itemStyle: { color },
+      emphasis: {
+        focus: 'self' as const,
+        blurScope: 'global' as const,
+      },
     };
   });
 
@@ -1548,11 +1571,26 @@ function buildAreaOption(
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
 }
 
+// ── Segment label formatter ──────────────────────────────────
+
+function segmentLabelFormatter(mode: ParsedChart['labels']): string {
+  switch (mode) {
+    case 'name':    return '{b}';
+    case 'value':   return '{b} — {c}';
+    case 'percent': return '{b} — {d}%';
+    default:        return '{b} — {c} ({d}%)';
+  }
+}
+
 // ── Pie / Doughnut ───────────────────────────────────────────
 
 function buildPieOption(
@@ -1584,11 +1622,15 @@ function buildPieOption(
         data,
         label: {
           position: 'outside',
-          formatter: '{b} — {c} ({d}%)',
+          formatter: segmentLabelFormatter(parsed.labels),
           color: textColor,
           fontFamily: FONT_FAMILY,
         },
         labelLine: { show: true },
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
@@ -1658,6 +1700,10 @@ function buildRadarOption(
             },
           },
         ],
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
@@ -1694,11 +1740,15 @@ function buildPolarAreaOption(
         data,
         label: {
           position: 'outside',
-          formatter: '{b} — {c} ({d}%)',
+          formatter: segmentLabelFormatter(parsed.labels),
           color: textColor,
           fontFamily: FONT_FAMILY,
         },
         labelLine: { show: true },
+        emphasis: {
+          focus: 'self' as const,
+          blurScope: 'global' as const,
+        },
       },
     ],
   };
@@ -1741,6 +1791,10 @@ function buildBarStackedOption(
         fontWeight: 'bold' as const,
         fontFamily: FONT_FAMILY,
       },
+      emphasis: {
+        focus: 'self' as const,
+        blurScope: 'global' as const,
+      },
     };
   });
 

package/src/graph/flowchart-parser.ts

@@ -436,6 +436,7 @@ export function parseFlowchart(
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }
 

package/src/graph/flowchart-renderer.ts

@@ -257,7 +257,6 @@ export function renderFlowchart(
     .append('svg')
     .attr('width', width)
     .attr('height', height)
-    .style('background', palette.bg)
     .style('font-family', FONT_FAMILY);
 
   // Defs: arrowhead markers
@@ -305,7 +304,7 @@ export function renderFlowchart(
 
   // Title
   if (graph.title) {
-    mainG
+    const titleEl = mainG
       .append('text')
       .attr('x', diagramW / 2)
       .attr('y', TITLE_FONT_SIZE)
@@ -313,8 +312,19 @@ export function renderFlowchart(
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
       .attr('font-weight', 'bold')
-      .attr('class', 'fc-title')
+      .attr('class', 'fc-title chart-title')
+      .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
       .text(graph.title);
+
+    if (graph.titleLineNumber) {
+      titleEl.attr('data-line-number', graph.titleLineNumber);
+      if (onClickItem) {
+        titleEl
+          .on('click', () => onClickItem(graph.titleLineNumber!))
+          .on('mouseenter', function () { d3Selection.select(this).attr('opacity', 0.7); })
+          .on('mouseleave', function () { d3Selection.select(this).attr('opacity', 1); });
+      }
+    }
   }
 
   // Content group (offset by title)
@@ -425,7 +435,8 @@ export function renderFlowchart(
       .append('g')
       .attr('transform', `translate(${node.x}, ${node.y})`)
       .attr('class', 'fc-node')
-      .attr('data-line-number', String(node.lineNumber));
+      .attr('data-line-number', String(node.lineNumber))
+      .attr('data-node-id', node.id);
 
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {

package/src/graph/types.ts

@@ -36,6 +36,7 @@ export interface GraphGroup {
 export interface ParsedGraph {
   type: 'flowchart';
   title?: string;
+  titleLineNumber?: number;
   direction: GraphDirection;
   nodes: GraphNode[];
   edges: GraphEdge[];

package/src/index.ts

@@ -1,3 +1,9 @@
+// ============================================================
+// Unified API
+// ============================================================
+
+export { render } from './render';
+
 // ============================================================
 // Router
 // ============================================================
@@ -109,6 +115,7 @@ export {
   applyPositionOverrides,
   applyGroupOrdering,
   groupMessagesBySection,
+  buildNoteMessageMap,
 } from './sequence/renderer';
 export type {
   RenderStep,

package/src/render.ts

@@ -0,0 +1,68 @@
+import { renderD3ForExport } from './d3';
+import { renderEChartsForExport } from './echarts';
+import { parseDgmoChartType, getDgmoFramework } from './dgmo-router';
+import { getPalette } from './palettes/registry';
+
+/**
+ * Ensures DOM globals are available for D3 renderers.
+ * No-ops in browser environments where `document` already exists.
+ * Dynamically imports jsdom only in Node.js to avoid bundling it for browsers.
+ */
+async function ensureDom(): Promise<void> {
+  if (typeof document !== 'undefined') return;
+
+  const { JSDOM } = await import('jsdom');
+  const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+  const win = dom.window;
+
+  Object.defineProperty(globalThis, 'document', { value: win.document, configurable: true });
+  Object.defineProperty(globalThis, 'window', { value: win, configurable: true });
+  Object.defineProperty(globalThis, 'navigator', { value: win.navigator, configurable: true });
+  Object.defineProperty(globalThis, 'HTMLElement', { value: win.HTMLElement, configurable: true });
+  Object.defineProperty(globalThis, 'SVGElement', { value: win.SVGElement, configurable: true });
+}
+
+/**
+ * Render DGMO source to an SVG string.
+ *
+ * Automatically detects the chart type, selects the appropriate renderer,
+ * and returns a complete SVG document string.
+ *
+ * @param content - DGMO source text
+ * @param options - Optional theme and palette settings
+ * @returns SVG string, or empty string on error
+ *
+ * @example
+ * ```ts
+ * import { render } from '@diagrammo/dgmo';
+ *
+ * const svg = await render(`chart: pie
+ * title: Languages
+ * TypeScript: 45
+ * Python: 30
+ * Rust: 25`);
+ * ```
+ */
+export async function render(
+  content: string,
+  options?: {
+    theme?: 'light' | 'dark' | 'transparent';
+    palette?: string;
+  },
+): Promise<string> {
+  const theme = options?.theme ?? 'light';
+  const paletteName = options?.palette ?? 'nord';
+
+  const paletteColors = getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];
+
+  const chartType = parseDgmoChartType(content);
+  const framework = chartType ? getDgmoFramework(chartType) : null;
+
+  if (framework === 'echart') {
+    return renderEChartsForExport(content, theme, paletteColors);
+  }
+
+  // D3 and unknown/null frameworks both go through D3 renderer
+  await ensureDom();
+  return renderD3ForExport(content, theme, paletteColors);
+}

package/src/sequence/parser.ts

@@ -133,6 +133,7 @@ export interface SequenceGroup {
  */
 export interface ParsedSequenceDgmo {
   title: string | null;
+  titleLineNumber: number | null;
   participants: SequenceParticipant[];
   messages: SequenceMessage[];
   elements: SequenceElement[];
@@ -227,6 +228,7 @@ function measureIndent(line: string): number {
 export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
   const result: ParsedSequenceDgmo = {
     title: null,
+    titleLineNumber: null,
     participants: [],
     messages: [],
     elements: [],
@@ -367,6 +369,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
       if (key === 'title') {
         result.title = value;
+        result.titleLineNumber = lineNumber;
         continue;
       }