@creately/rdm-canvas 0.1.0

package/bin/rdm-canvas.ts

@@ -0,0 +1,108 @@
+#!/usr/bin/env bun
+/**
+ * rdm-canvas CLI
+ *
+ * Usage:
+ *   npx rdm-canvas diagram.rdm              # Single-file mode
+ *   npx rdm-canvas ./diagrams/              # Directory mode — index + routing
+ *   npx rdm-canvas --examples               # Built-in examples gallery
+ *   npx rdm-canvas diagram.rdm --port 3456
+ *   npx rdm-canvas diagram.rdm --no-open
+ */
+
+import { startServer, startDirectoryServer } from '../server/index';
+import { openBrowser } from '../server/browserLauncher';
+import { existsSync, statSync } from 'fs';
+import { resolve, dirname } from 'path';
+
+const args = process.argv.slice(2);
+const flags = new Set(args.filter((a) => a.startsWith('--')));
+const positional = args.filter((a) => !a.startsWith('--'));
+
+const portIdx = args.indexOf('--port');
+const preferredPort = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : 4983;
+const noOpen = flags.has('--no-open');
+
+// Determine mode: --examples, directory, or single-file
+let mode: 'file' | 'directory';
+let targetPath: string;
+let title = 'rdm-canvas';
+
+if (flags.has('--examples')) {
+  mode = 'directory';
+  targetPath = findExamplesDir();
+  title = 'RDM Examples';
+} else {
+  const input = positional[0];
+  if (!input) {
+    console.error(
+      'Usage: rdm-canvas <file.rdm | directory> [--examples] [--port <port>] [--no-open]',
+    );
+    process.exit(1);
+  }
+  targetPath = resolve(input);
+  if (!existsSync(targetPath)) {
+    console.error(`Not found: ${input}`);
+    process.exit(1);
+  }
+  mode = statSync(targetPath).isDirectory() ? 'directory' : 'file';
+}
+
+// Start server with port scanning
+let server;
+let port = preferredPort;
+for (let attempt = 0; attempt < 10; attempt++) {
+  try {
+    if (mode === 'directory') {
+      server = startDirectoryServer({ rootDir: targetPath, port, title });
+    } else {
+      server = startServer({ filePath: targetPath, port });
+    }
+    break;
+  } catch (e: any) {
+    if (e?.code === 'EADDRINUSE') {
+      port++;
+      continue;
+    }
+    throw e;
+  }
+}
+if (!server) {
+  console.error(`Could not find an open port (tried ${preferredPort}-${port})`);
+  process.exit(1);
+}
+
+console.log(`rdm-canvas v0.1.0`);
+if (mode === 'directory') {
+  console.log(`Directory: ${targetPath}`);
+} else {
+  console.log(`Watching:  ${targetPath}`);
+}
+console.log(`Server:    http://localhost:${port}`);
+console.log();
+
+if (!noOpen) {
+  setTimeout(() => {
+    openBrowser(`http://localhost:${port}`);
+  }, 300);
+}
+
+process.on('SIGINT', () => {
+  console.log('\nShutting down...');
+  server.stop();
+  process.exit(0);
+});
+
+function findExamplesDir(): string {
+  // Walk up from this script's directory to find the project root with src/domains/rdm/examples
+  let dir = dirname(new URL(import.meta.url).pathname);
+  for (let i = 0; i < 10; i++) {
+    const candidate = resolve(dir, 'src/domains/rdm/examples');
+    if (existsSync(candidate)) return candidate;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  console.error('Could not find built-in examples directory');
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@creately/rdm-canvas",
+  "version": "0.1.0",
+  "description": "Local server for live RDM diagram rendering with bidirectional file sync",
+  "bin": {
+    "rdm-canvas": "./bin/rdm-canvas.ts"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "bun run bin/rdm-canvas.ts",
+    "dev": "bun run --watch bin/rdm-canvas.ts"
+  },
+  "dependencies": {
+    "@creately/rdm-core": ">=0.2.0"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "files": [
+    "bin/",
+    "server/",
+    "static/"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/creately/rdm",
+    "directory": "packages/rdm-canvas"
+  },
+  "keywords": ["rdm", "canvas", "diagram", "viewer", "bun"]
+}

package/server/browserLauncher.ts

@@ -0,0 +1,32 @@
+/**
+ * Browser Launcher — Cross-platform browser opening
+ */
+
+import { spawn } from 'child_process';
+
+export function openBrowser(url: string): void {
+  const platform = process.platform;
+  let cmd: string;
+  let args: string[];
+
+  switch (platform) {
+    case 'darwin':
+      cmd = 'open';
+      args = [url];
+      break;
+    case 'win32':
+      cmd = 'start';
+      args = ['', url];
+      break;
+    default:
+      cmd = 'xdg-open';
+      args = [url];
+  }
+
+  try {
+    const proc = spawn(cmd, args, { detached: true, stdio: 'ignore' });
+    proc.unref();
+  } catch {
+    console.log(`Open ${url} in your browser`);
+  }
+}

package/server/fileScanner.ts

@@ -0,0 +1,69 @@
+/**
+ * File Scanner — Recursively scan a directory for .rdm files with metadata
+ */
+
+import { readdirSync, statSync, readFileSync } from 'fs';
+import { join, relative, dirname, basename } from 'path';
+
+export interface RdmFileInfo {
+  relativePath: string;
+  name: string;
+  directory: string;
+  title?: string;
+  type?: string;
+  size: number;
+  mtime: Date;
+}
+
+export function scanRdmFiles(rootDir: string): RdmFileInfo[] {
+  const files: RdmFileInfo[] = [];
+  walkDir(rootDir, rootDir, files);
+  files.sort((a, b) => {
+    if (a.directory !== b.directory) return a.directory.localeCompare(b.directory);
+    return a.name.localeCompare(b.name);
+  });
+  return files;
+}
+
+function walkDir(dir: string, rootDir: string, results: RdmFileInfo[]): void {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === 'output' || entry.name.startsWith('.')) continue;
+      walkDir(fullPath, rootDir, results);
+    } else if (entry.name.endsWith('.rdm')) {
+      const stat = statSync(fullPath);
+      const relPath = relative(rootDir, fullPath);
+      const frontmatter = parseFrontmatter(fullPath);
+      results.push({
+        relativePath: relPath,
+        name: basename(fullPath),
+        directory: dirname(relPath) === '.' ? '' : dirname(relPath),
+        title: frontmatter.title,
+        type: frontmatter.type,
+        size: stat.size,
+        mtime: stat.mtime,
+      });
+    }
+  }
+}
+
+function parseFrontmatter(filePath: string): { title?: string; type?: string } {
+  try {
+    const content = readFileSync(filePath, 'utf-8');
+    const lines = content.split('\n', 10);
+    if (lines[0]?.trim() !== '---') return {};
+    const result: { title?: string; type?: string } = {};
+    for (let i = 1; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line === '---') break;
+      const typeMatch = line.match(/^type:\s*["']?(\w+)["']?/);
+      if (typeMatch) result.type = typeMatch[1];
+      const titleMatch = line.match(/^title:\s*["']?(.+?)["']?\s*$/);
+      if (titleMatch) result.title = titleMatch[1];
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}

package/server/fileWatcher.ts

@@ -0,0 +1,74 @@
+/**
+ * File Watcher — Polling-based watcher for .rdm files
+ *
+ * Uses fs.watchFile (stat polling) instead of fs.watch because macOS's
+ * FSEvents doesn't reliably detect atomic writes (write-to-temp + rename),
+ * which is what most editors and CLI tools do.
+ *
+ * Calls onChange when the file is modified externally.
+ * Suppresses echoes during write-back (bidirectional sync).
+ */
+
+import { watchFile, unwatchFile, readFileSync } from 'fs';
+
+export interface FileWatcherOptions {
+  filePath: string;
+  debounceMs?: number;
+  onChange: (content: string) => void;
+}
+
+export class FileWatcher {
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private suppressed = false;
+  private filePath: string;
+  private debounceMs: number;
+  private onChange: (content: string) => void;
+  private lastContent: string;
+
+  constructor(options: FileWatcherOptions) {
+    this.filePath = options.filePath;
+    this.debounceMs = options.debounceMs ?? 100;
+    this.onChange = options.onChange;
+    this.lastContent = '';
+    try {
+      this.lastContent = readFileSync(this.filePath, 'utf-8');
+    } catch { /* file may not exist yet */ }
+  }
+
+  start(): void {
+    watchFile(this.filePath, { interval: 300 }, () => {
+      if (this.suppressed) return;
+
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => {
+        try {
+          const content = readFileSync(this.filePath, 'utf-8');
+          if (content !== this.lastContent) {
+            this.lastContent = content;
+            this.onChange(content);
+          }
+        } catch {
+          // File might be mid-write, ignore
+        }
+      }, this.debounceMs);
+    });
+  }
+
+  /** Suppress watcher during a write-back to avoid echo loops */
+  async writeBack(content: string): Promise<void> {
+    this.suppressed = true;
+    try {
+      await Bun.write(this.filePath, content);
+      this.lastContent = content;
+      // Keep suppressed briefly to absorb the stat poll
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    } finally {
+      this.suppressed = false;
+    }
+  }
+
+  stop(): void {
+    unwatchFile(this.filePath);
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+  }
+}