✨ Xircuits Workflow Viewer

[MFA-X-AI]

Description

This PR adds xircuits-graph-viewer, a standalone, pure SVG renderer for .xircuits workflow files. It parses the .xircuits JSON format and produces self-contained SVG that visually matches the Xircuits editor, including title bar gradients (oklch), port symbols, flow/data bezier edges, comment nodes, and the actual Xircuits node icons.

Published to npm as:

• @xpressai/xircuits-viewer - core parser + renderer, zero runtime deps
• @xpressai/xircuits-viewer-react - React components with src prop (pass a URL, it renders)

Includes:

• Core package: parser, layout engine, SVG renderer, pan/zoom interaction, dark/light theme support
• React package: <XircuitsGraph> (interactive) and <XircuitsGraphStatic> (SSR-safe) components
• Upload demo: standalone Vite app — drag-and-drop any .xircuits file to view it
• Docusaurus docs site: workflow documentation pages with interactive viewer, floating zoom controls, loading states, and theme sync
• 24 tests covering parser and renderer
• Publish script (publish.sh) for npm releases

References

N/A — new feature, no prior issues.

Pull Request Type

• Xircuits Core (Jupyterlab Related changes)
• Xircuits Canvas (Custom RD Related changes)
• Xircuits Component Library
• Xircuits Project Template
• Testing Automation
• Documentation
• Others (Please Specify) - New standalone package: xircuits-graph-viewer, pure SVG renderer for embedding .xircuits workflows in docs, demos, and web apps.

Type of Change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Tests

24 unit tests covering parser and renderer.

1. Parser tests (11)

1. cd xircuits-graph-viewer
2. node_modules/.bin/vitest run
3. Validates .xircuits files, parses nodes/ports/edges, classifies node kinds (start, finish, literal, component, comment)

2. Render tests (13)

1. Verifies SVG output contains correct elements, gradients, styles, node names, port symbols, edge types
2. Tests dark and light theme rendering
3. Tests node metrics computation for component, comment, and literal nodes

3. Manual testing

1. Upload demo: drag-and-drop HelloXircuits.xircuits, ControlflowExample.xircuits - verify rendering, pan/zoom, theme toggle
2. Docusaurus site: npm start, verify workflow pages render with interactive viewer

Tested on? Specify Version.

• Windows
• Linux
• Mac
• Others (State here -> xxx )

Notes

• The viewer renders from stored port coordinates in the .xircuits file — it does not re-layout nodes
• SVG uses modern CSS (oklch, rgba) — PNG export requires Chrome headless, not ImageMagick
• A Docusaurus plugin (docusaurus-plugin-xircuits) is planned as a follow-up to simplify docs integration

[github-actions]

👈 Launch a binder notebook on branch XpressAI/xircuits/fahreza/xircuits-viewer