@diagrammo/dgmo 0.0.1 → 0.1.1

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
+  "bin": {
+    "dgmo": "./dist/cli.cjs"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,6 +33,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
     "d3-array": "^3.2.4",
@@ -37,7 +41,8 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "echarts": "^5.6.0"
+    "echarts": "^5.6.0",
+    "jsdom": "^26.0.0"
   },
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
@@ -45,6 +50,7 @@
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
+    "@types/jsdom": "^21.1.7",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3"
   }

package/src/cli.ts

@@ -0,0 +1,254 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { resolve, basename, extname } from 'node:path';
+import { JSDOM } from 'jsdom';
+import { Resvg } from '@resvg/resvg-js';
+import { renderD3ForExport } from './d3';
+import { getPalette } from './palettes/registry';
+
+const PALETTES = [
+  'nord',
+  'solarized',
+  'catppuccin',
+  'rose-pine',
+  'gruvbox',
+  'tokyo-night',
+  'one-dark',
+  'bold',
+];
+
+const THEMES = ['light', 'dark', 'transparent'] as const;
+
+function printHelp(): void {
+  console.log(`Usage: dgmo <input> [options]
+       cat input.dgmo | dgmo [options]
+
+Render a .dgmo file to PNG (default) or SVG.
+
+Options:
+  -o <file>         Output file (default: <input>.png in cwd)
+                    Format inferred from extension: .svg → SVG, else PNG
+                    With stdin and no -o, PNG is written to stdout
+  --theme <theme>   Theme: ${THEMES.join(', ')} (default: light)
+  --palette <name>  Palette: ${PALETTES.join(', ')} (default: nord)
+  --help            Show this help
+  --version         Show version`);
+}
+
+function printVersion(): void {
+  const pkg = JSON.parse(
+    readFileSync(resolve(__dirname, '..', 'package.json'), 'utf-8')
+  );
+  console.log(pkg.version);
+}
+
+function parseArgs(argv: string[]): {
+  input: string | undefined;
+  output: string | undefined;
+  theme: (typeof THEMES)[number];
+  palette: string;
+  help: boolean;
+  version: boolean;
+} {
+  const result = {
+    input: undefined as string | undefined,
+    output: undefined as string | undefined,
+    theme: 'light' as (typeof THEMES)[number],
+    palette: 'nord',
+    help: false,
+    version: false,
+  };
+
+  const args = argv.slice(2); // skip node + script
+  let i = 0;
+
+  while (i < args.length) {
+    const arg = args[i];
+
+    if (arg === '--help' || arg === '-h') {
+      result.help = true;
+      i++;
+    } else if (arg === '--version' || arg === '-v') {
+      result.version = true;
+      i++;
+    } else if (arg === '-o') {
+      result.output = args[++i];
+      i++;
+    } else if (arg === '--theme') {
+      const val = args[++i];
+      if (!THEMES.includes(val as (typeof THEMES)[number])) {
+        console.error(
+          `Error: Invalid theme "${val}". Valid themes: ${THEMES.join(', ')}`
+        );
+        process.exit(1);
+      }
+      result.theme = val as (typeof THEMES)[number];
+      i++;
+    } else if (arg === '--palette') {
+      const val = args[++i];
+      if (!PALETTES.includes(val)) {
+        console.error(
+          `Error: Unknown palette "${val}". Valid palettes: ${PALETTES.join(', ')}`
+        );
+        process.exit(1);
+      }
+      result.palette = val;
+      i++;
+    } else if (!result.input) {
+      result.input = arg;
+      i++;
+    } else {
+      console.error(`Error: Unexpected argument "${arg}"`);
+      process.exit(1);
+    }
+  }
+
+  return result;
+}
+
+function setupDom(): void {
+  const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+  const win = dom.window;
+
+  // Expose DOM globals needed by d3-selection and renderers
+  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 });
+}
+
+function inferFormat(outputPath: string | undefined): 'svg' | 'png' {
+  if (outputPath && extname(outputPath).toLowerCase() === '.svg') {
+    return 'svg';
+  }
+  return 'png';
+}
+
+function svgToPng(svg: string): Buffer {
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'zoom', value: 2 },
+  });
+  const rendered = resvg.render();
+  return rendered.asPng();
+}
+
+function noInput(): never {
+  const samplePath = resolve('sample.dgmo');
+  if (existsSync(samplePath)) {
+    console.error('Error: No input file specified');
+    console.error(`Try: dgmo ${basename(samplePath)}`);
+    process.exit(1);
+  }
+  writeFileSync(
+    samplePath,
+    [
+      'chart: sequence',
+      'activations: off',
+      '',
+      '  Client -> API: POST /login',
+      '  API -> Auth: validate credentials',
+      '  Auth -> DB: SELECT user',
+      '  DB -> Auth: user record',
+      '  Auth -> API: JWT token',
+      '  API -> Client: 200 OK { token }',
+      '',
+    ].join('\n'),
+    'utf-8'
+  );
+  console.error(`Created ${samplePath}`);
+  console.error('');
+  console.error('  Render it:  dgmo sample.dgmo');
+  console.error('  As SVG:     dgmo sample.dgmo -o sample.svg');
+  console.error('');
+  console.error(
+    'Edit sample.dgmo to make it your own, or run dgmo --help for all options.'
+  );
+  process.exit(0);
+}
+
+async function main(): Promise<void> {
+  const opts = parseArgs(process.argv);
+
+  if (opts.help) {
+    printHelp();
+    return;
+  }
+
+  if (opts.version) {
+    printVersion();
+    return;
+  }
+
+  // Determine input source
+  let content: string;
+  let inputBasename: string | undefined;
+  const stdinIsPiped = !process.stdin.isTTY;
+
+  if (opts.input) {
+    // File argument provided
+    const inputPath = resolve(opts.input);
+    try {
+      content = readFileSync(inputPath, 'utf-8');
+    } catch {
+      console.error(`Error: Cannot read file "${inputPath}"`);
+      process.exit(1);
+    }
+    // Strip extension for default output name
+    const name = basename(opts.input);
+    const ext = extname(name);
+    inputBasename = ext ? name.slice(0, -ext.length) : name;
+  } else if (stdinIsPiped) {
+    // Read from stdin
+    try {
+      content = readFileSync(0, 'utf-8');
+    } catch {
+      noInput();
+    }
+  } else {
+    noInput();
+  }
+
+  // Set up jsdom before any d3/renderer code runs
+  setupDom();
+
+  const isDark = opts.theme === 'dark';
+  const paletteColors = isDark
+    ? getPalette(opts.palette).dark
+    : getPalette(opts.palette).light;
+
+  const svg = await renderD3ForExport(content, opts.theme, paletteColors);
+
+  if (!svg) {
+    console.error(
+      'Error: Failed to render diagram. The input may be empty, invalid, or use an unsupported chart type (e.g. Chart.js/ECharts charts require a browser).'
+    );
+    process.exit(1);
+  }
+
+  // Determine output format and destination
+  const format = inferFormat(opts.output);
+
+  if (opts.output) {
+    // Explicit output path
+    const outputPath = resolve(opts.output);
+    if (format === 'svg') {
+      writeFileSync(outputPath, svg, 'utf-8');
+    } else {
+      writeFileSync(outputPath, svgToPng(svg));
+    }
+    console.error(`Wrote ${outputPath}`);
+  } else if (inputBasename) {
+    // File input, no -o → write <basename>.png in cwd
+    const outputPath = resolve(`${inputBasename}.png`);
+    writeFileSync(outputPath, svgToPng(svg));
+    console.error(`Wrote ${outputPath}`);
+  } else {
+    // Stdin input, no -o → write PNG to stdout
+    process.stdout.write(svgToPng(svg));
+  }
+}
+
+main().catch((err: Error) => {
+  console.error(`Error: ${err.message}`);
+  process.exit(1);
+});

package/src/index.ts

@@ -85,8 +85,14 @@ export {
   computeActivations,
   applyPositionOverrides,
   applyGroupOrdering,
+  groupMessagesBySection,
+} from './sequence/renderer';
+export type {
+  RenderStep,
+  Activation,
+  SectionMessageGroup,
+  SequenceRenderOptions,
 } from './sequence/renderer';
-export type { RenderStep, Activation } from './sequence/renderer';
 
 // ============================================================
 // Colors & Palettes

package/src/sequence/parser.ts

@@ -247,8 +247,15 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     if (trimmed.startsWith('#') || trimmed.startsWith('//')) continue;
 
     // Parse section dividers — "== Label ==" or "== Label(color) =="
+    // Close blocks first — sections at indent 0 should not nest inside blocks
     const sectionMatch = trimmed.match(SECTION_PATTERN);
     if (sectionMatch) {
+      const sectionIndent = measureIndent(raw);
+      while (blockStack.length > 0) {
+        const top = blockStack[blockStack.length - 1];
+        if (sectionIndent > top.indent) break;
+        blockStack.pop();
+      }
       const labelRaw = sectionMatch[1].trim();
       const colorMatch = labelRaw.match(/^(.+?)\((\w+)\)$/);
       const section: SequenceSection = {