xenolith-graph

XenolithGraph é um editor de grafos de nós embutível e plug-and-play para a web, atualmente em v0.7 BETA. Ele visa construtores de fluxos de trabalho de IA, ferramentas da classe ComfyUI e depuradores visuais, sendo o sucessor do projeto arquivado BluePrintRenderer, reescrito em TypeScript sobre PIXI v8 (WebGL). Capacidades principais - Modelo Blueprint-first: pinos tipados (exec vs dados), cor e forma por tipo, conversões de tipo registráveis, pinos exec elevados ao cabeçalho do nó. - Modelos e macros ao vivo: subgrafos reutilizáveis com uma definição e muitas instâncias, edição com mergulho e breadcrumbs, conversão entre macro e modelo, desempacotamento de instâncias. - Comentários: retângulos coloridos atrás dos nós que movem seu conteúdo como um grupo. - Widgets em nós: número/slider/combo/texto/toggle/cor/botão declarativos, além de widgets personalizados desenhados em canvas ou montados em DOM (React/Vue/Svelte via registerWidget), visibilidade condicional, widgets flutuantes, painel de propriedades. - Comandos e atalhos: comandos nomeados com constantes tipadas e uma gramática de atalhos multiplataforma; atalhos embutidos são substituíveis. - Eventos e histórico: eventos tipados incluindo variantes canceláveis, transações e agrupamento para que muitas mutações colapsem em uma única entrada de desfazer. - Persistência: JSON xenolith.v1 versionado e ordenado para diffs limpos, ganchos de migração por esquema, importador de fluxos ComfyUI, exportação PNG/JPEG de grafo completo. - Plugin de auto-layout com adaptadores Dagre e ELK, animado e confirmado como uma única entrada de desfazer. - Caminhos de aresta plugáveis (bezier, smoothstep, step, linear) com rótulos, pontas de seta e traços animados. - Host de plugins expondo esquema, tipos, ícones, widgets, um barramento de eventos e superfícies de delegação em tempo de execução. - Três temas fornecidos (Xen escuro/dourado, Daylight claro, Liquid Glass baseado em shader) trocáveis em tempo de execução com estado preservado; Live Mode oculta o chrome do editor para pré-visualizações. - Recursos de desempenho: virtualização de viewport, LOD de três níveis, renderização sob demanda, atlas de glifos BitmapText, caches compartilhados de texturas GPU. Adaptadores e pacotes Adaptadores React e Vue 3 fornecem componentes de painel, controles, minimapa e botões com hooks/composables reativos e wrappers de widgets personalizados. Adaptadores iniciais finos existem para Svelte, Solid, Angular e Web Components. O pacote principal headless é sem dependências. Um pacote test-utils inicializa o editor WebGL real sob vitest e jsdom. Integração de IA Um servidor MCP integrado faz a ponte entre MCP stdio e uma conexão WebSocket no editor do navegador, permitindo que Claude Desktop ou Cursor listem tipos de nós, adicionem nós, conectem pinos e façam auto-layout. Mutações fluem pelo mesmo barramento de comandos que edições humanas, então desfazer funciona. Autenticação por token e modo somente leitura são suportados, e um modo de proposta enfileira edições do agente para aprovação humana como uma única transação atômica desfazível. Depuração Um primitivo StepDebugger no pacote do editor envolve qualquer executor para fornecer pausar/avançar/continuar, breakpoints, temporização por nó e um trace ao vivo, sustentando os showcases de depurador, viagem no tempo, mapa de calor e diff de grafo. Tamanho do bundle e trade-offs O README declara tamanhos gzip medidos: core 8,4 KB, renderizador PIXI 17,4 KB, editor 74,3 KB, adaptador React 2,3 KB, temas 2,3-7,9 KB, com pixi.js como dependência peer de aproximadamente 250 KB e uma carga realista de app React perto de 330 KB. O projeto nota explicitamente que é a opção mais pesada comparada a Drawflow, LiteGraph.js, Rete.js, Baklava e React Flow, recomendando alternativas mais leves para casos mobile-first ou somente Vue, enquanto se posiciona para produtos onde o editor é o núcleo. Status e roadmap A API pública documentada em STABLE-API.md é destinada a ser congelada, mas ainda não está; mudanças que quebram podem ocorrer antes da v1.0, então fixar uma versão exata é aconselhado. Suporte inicial a toque/mobile foi lançado (pinça, pan com dois dedos, menu de pressão longa, chrome de gaveta) com itens de polimento restantes. Acessibilidade de canvas (ARIA, navegação por teclado) e mais polimento de toque estão abertos. Contextos de múltiplos grafos, colaboração, layout RTL, um renderizador não-PIXI, fios que evitam obstáculos e layout WASM estão explicitamente não agendados. Um plugin experimental de VM Blueprint está em progresso; dataflow do host usa evaluateGraph do pacote core. Testes e desenvolvimento O README relata 1326 testes unitários e 117 testes de interação Playwright, testes de snapshot visual para o renderizador e orçamentos de bundle por pacote aplicados via CI. Desenvolvimento usa pnpm com playground, site de docs, vitest, Playwright e comandos de build tsc. Licença é MIT.