${node.description}
`\n return el\n },\n },\n },\n})\n```\n\n### Theming by Type\n\n```typescript\nawait graph({\n root: 'my-graph',\n nodes: [\n { id: 'start', type: 'input', title: 'Start' },\n { id: 'process', type: 'process', title: 'Process' },\n { id: 'error', type: 'error', title: 'Error' },\n ],\n edges: [...],\n options: {\n canvas: {\n nodeTypes: {\n input: { border: '#3b82f6' },\n process: { border: '#8b5cf6' },\n error: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },\n },\n edgeTypes: {\n error: { color: '#ef4444' },\n success: { color: '#22c55e' },\n },\n },\n },\n})\n```\n\n### Real-time Ingestion\n\n```typescript\n// Connect to a WebSocket for live updates\nawait graph({\n root: 'my-graph',\n ingestion: {\n type: 'websocket',\n url: 'ws://localhost:8787',\n },\n})\n\n// Or poll a file/endpoint\nawait graph({\n root: 'my-graph',\n ingestion: {\n type: 'file',\n url: '/api/graph-updates.ndjson',\n intervalMs: 1000,\n },\n})\n```\n\n### Event Handling\n\n```typescript\nawait graph({\n root: 'my-graph',\n nodes: [...],\n edges: [...],\n events: {\n nodeClick: (node) => console.log('Clicked:', node),\n edgeClick: (edge) => console.log('Edge clicked:', edge),\n addNode: (props, done) => {\n // Custom logic when user adds a node\n const newNode = { id: generateId(), ...props }\n done(newNode)\n },\n historyChange: (index, length) => {\n console.log(`Step ${index + 1} of ${length}`)\n },\n },\n})\n```\n\n## API Methods\n\n```typescript\nconst api = await graph({ ... })\n\n// Navigation\napi.nav('first') // Jump to first state\napi.nav('prev') // Go to previous state\napi.nav('next') // Go to next state\napi.nav('last') // Jump to latest state\n\n// Updates\napi.update(u => {\n u.addNodes({ id: 'x', title: 'New' })\n u.deleteNodes('old-node')\n u.updateNodes({ id: 'x', title: 'Updated' })\n u.addEdges({ source: 'a', target: 'x' })\n u.deleteEdges('edge-id')\n u.describe('Added new node') // Label for history\n})\n\n// Bulk operations\napi.replaceSnapshot(nodes, edges)\napi.replaceHistory(history)\n\n// Theming\napi.setColorMode('dark')\napi.updateStyles({ nodeTypes: { ... } })\n\n// Cleanup\napi.destroy()\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n\n# Run demo site\npnpm dev:site\n\n# Run tests\npnpm test\n```\n\n## Inspiration\n\nThis library is inspired by [IonGraph Web](https://spidermonkey.dev/blog/2025/10/28/iongraph-web.html) from the SpiderMonkey team, which visualizes JavaScript JIT compilation graphs with stable, incremental layouts.\n\n## Contributing\n\nWe welcome contributions! Before submitting a pull request:\n\n1. Read our [Contributing Guidelines](./CONTRIBUTING.md)\n2. Sign the [Contributor License Agreement](./CLA.md)\n3. Follow the code style and testing guidelines\n\n## License\n\n**GNU General Public License v3.0** — see [LICENSE](./LICENSE) for details.\n\n### Why GPL?\n\nWe've chosen GPL-3.0 to ensure improvements to @3plate/graph remain open source:\n\n- ✅ Use in open source projects\n- ✅ Modify and distribute\n- ✅ Commercial use allowed\n- ⚠️ Distributed modifications must also be GPL-3.0\n\n### Commercial Licensing\n\nNeed to use @3plate/graph in proprietary software without GPL restrictions? Commercial licenses are available — contact [nathan@3plate.com](mailto:nathan@3plate.com).\n\n---\n\n**Copyright © 2025 [3Plate LLC](https://www.3plate.com/)**\n","readmeFilename":"README.md"}