Headless-first
O núcleo não depende de Angular Material. A UI profissional é opt-in e substituível pelo seu app.
svg-engine
O editor de SVG embutível para Angular — headless por dentro, profissional por fora.
Angular v21Headless-first9 entry pointsApache-2.0pré-1.0
Por que o svg-engine?
Seção intitulada “Por que o svg-engine?”O svg-engine é um core de editor extensível por plugins, onde o modelo de dados, o render, os serviços de edição e a UI Material são entry points separados. Você compõe só o que o seu app precisa — de um renderer read-only a um editor profissional completo — e o engine de edição nunca impõe uma UI a você.
Importe só o necessário
Entry points independentes e lazy-loadable — de um viewer mínimo ao editor completo.
Modelo imutável + signals
Estado reativo com signal/computed; cada mutação gera uma nova árvore.
Undo automático via Command pattern.
Extensível por plugins
Categorias de plugin para renderers, tools, importers/exporters, efeitos, paletas, menus e mais — sem fork do core.
Componha só o que precisar
Seção intitulada “Componha só o que precisar”Cada entry point secundário é independente e lazy-loadable. Consumir core
não arrasta render, edição, UI ou a camada de IA.
| Camada | Entry points | UI Material |
|---|---|---|
| Core headless | core · render · io · optimize · edit | Não |
| UI profissional | ui | Opt-in |
| IA (opt-in) | ai/nlu · ai/nlu-ui · ai/nlu-voice-wasm | Parcial |
Ver todos os entry points
Uma superfície de edição profissional
Seção intitulada “Uma superfície de edição profissional”O editor opcional alcança um conjunto de recursos comparável a ferramentas vetoriais de desktop — tudo sobre o mesmo engine headless.
Desenhar
Select e Direct-Select, Pen e Pencil, ferramentas de forma, texto rico (variable fonts, texto em path), além de Eyedropper, Knife, Width e Symbol Sprayer.
Editar geometria
Editor de Path/Anchor (cusp / smooth / symmetric), operações booleanas do Pathfinder, operações de path (simplify / join / outline stroke / offset), live corners e compound paths.
Compor documentos
Pages / artboards, camadas, Smart Objects, símbolos e instâncias, snapshots de versão, auto-save e recuperação.
Estilo
Efeitos e filtros não-destrutivos e encadeáveis, gradientes com editor inline, patterns e um sistema de libraries (formas, paletas, gradientes, patterns, símbolos, brushes, graphic styles e templates).
Produtividade
Find & Replace, alinhar / distribuir, atalhos de teclado configuráveis, auto-trace (raster → vetor), code generators, export por asset e timeline de animação.
Comando por voz (opt-in)
Comando por linguagem natural e speech-to-text on-device (Whisper) — totalmente opcional e desacoplado do core do editor.
Garantias arquiteturais
Seção intitulada “Garantias arquiteturais”Fronteira headless
core, render, io, optimize e edit têm dependência zero de
@angular/material ou @angular/cdk. O Material vive apenas em ui.
Modelo imutável
Cada mutação gera uma nova árvore (structural sharing). Undo é snapshot e replay, não um sistema frágil de deltas.
Command pattern
Cada mutação passa por um único CommandBus, então undo/redo é automático e
consistente.
OnPush em tudo
Todo componente usa ChangeDetectionStrategy.OnPush; o estado reativo é
signal/computed, sem Subjects na API pública.
Primeiros passos
Seção intitulada “Primeiros passos”Publicado no npm como o pacote escopado @mosaicoo/svg-engine:
npm install @mosaicoo/svg-engine @angular/core@^21Apache-2.0, com apenas duas dependências de runtime (polygon-clipping,
tslib); o Angular Material e os pacotes de AI/voz são peers opcionais. A
library é coberta por 3.012 testes, e as mudanças ficam registradas no
changelog e nos
releases do GitHub.