Logo Studio

Gerenciar e preparar a identidade visual para ambientes web exige múltiplas iterações: desde a adaptação de logotipos vetoriais até a geração de manifestos para Progressive Web Apps (PWAs), ícones de diferentes resoluções e cartões sociais (OpenGraph). O problema fundamental está no atrito introduzido pelas ferramentas tradicionais de design gráfico, desconectadas do ambiente de desenvolvimento web, e pelas ferramentas online que exigem processamento no servidor, expondo os ativos a latência de rede e a problemas de privacidade.

A solução que implementei consiste em uma ferramenta que transfere completamente a carga de processamento para o navegador do cliente (client-side). Isso permite ingerir gráficos vetoriais escaláveis (SVG), analisá-los estruturalmente para extrair metadados (dimensões, paletas de cores) e aplicar transformações geométricas e cromáticas em tempo real antes de empacotar os artefatos gerados em múltiplos formatos.

Fluxo Operacional Principal

1. Ingestão e Normalização: O usuário carrega um arquivo SVG. O sistema o analisa usando um DOMParser, extraindo as dimensões intrínsecas (viewBox) e estruturando uma árvore de propriedades de cor.
2. Transformação em Tempo Real: O espaço de trabalho do canvas permite aplicar escalas dinâmicas, translações e substituições cromáticas.
3. Pré-visualização Contextual: Os metadados de configuração (raios de borda, fundos, cores de tema) são injetados em componentes React que simulam ambientes nativos (Web, Mobile, OpenGraph, PWA Manifest).
4. Empacotamento e Exportação: Por meio de rasterização programática em elementos <canvas>, os vetores modificados são convertidos em PNG ou reescritos como SVGs modificados. As configurações JSON (manifest.json, app.json) são geradas dinamicamente e consolidadas em um arquivo compactado assíncrono para download.

Arquitetura de Software

A aplicação segue princípios de separação de responsabilidades, operando como um monorepo que divide o roteamento estático, o gerenciamento de estado reativo e a persistência local. Optei por uma arquitetura híbrida Local-First.

Modelo Estrutural

Desacoplei o carregamento estrutural das páginas, gerenciado por um motor de roteamento estático (Astro), dos fluxos de interação de alta fidelidade, que dependem de componentes reativos (React). Isso minimiza o bloqueio da thread principal e acelera a métrica Time-to-Interactive.

graph TD
    Client["Cliente / Navegador"] --> AstroRouter["Astro: Roteador e Shell Estático"]
    AstroRouter --> ReactApp["React: Complexidade Reativa"]

    subgraph Renderização no Cliente
        ReactApp --> EditorState["Gerenciamento de Estado e Eventos"]
        ReactApp --> GeneratorLibs["Bibliotecas Geradoras: SVG, PWA, OG"]
    end

    subgraph Persistência Local
        EditorState <--> DexieDB["(IndexedDB / Dexie.js)"]
        DexieDB --> SyncEngine["Live Queries"]
    end

    GeneratorLibs --> CanvasAPI["Rasterização em Canvas"]
    CanvasAPI --> Export["Geração de Zip / PNG"]

Gerenciamento de Estado e Eventos

O núcleo interativo é gerenciado por meio do React, com estado derivado da persistência ativa (Live Queries). As ações do usuário (arrastar e soltar, entradas de cor) emitem eventos que modificam diretamente o banco de dados local. O componente de interface está inscrito nessas mudanças, garantindo que a Fonte da Verdade seja sempre a camada de dados e não o estado efêmero em memória do React.

Modelagem de Dados (IndexedDB)

A persistência é gerenciada por meio do Dexie.js, que fornece um esquema assíncrono sobre o IndexedDB. O modelo principal, Project, é uma entidade agregada que consolida tanto os ativos brutos (SVG) quanto os parâmetros de configuração de saída.

erDiagram
    Project {
        number id PK
        string name
        string svgContent "Payload vetorial original/normalizado"
        object colors "Mapa chave-valor de recoloração"
        number borderRadius
        string backgroundColor
        number logoScale
        number logoX
        number logoY
        string displayMode "PWA: standalone, fullscreen, etc."
        string themeColor "PWA Manifest"
        string appBackgroundColor "PWA Manifest"
        array selectedSizes "Dimensões de exportação"
        array selectedExtraAssets "Ativos adicionais: favicon, og, manifest"
        date createdAt
        date updatedAt
    }

Essa estrutura achatada e desnormalizada está otimizada para leituras e escritas atômicas de um único documento por sessão de trabalho, o que é ideal para uma arquitetura orientada a documentos no navegador.

4. Stack Tecnológico

As decisões de ferramentas respondem a critérios de máxima eficiência no lado do cliente e compatibilidade com os padrões web modernos.

Camada / Domínio	Tecnologia	Justificativa Técnica
Framework Shell	Astro (v5.2.5)	Renderização inicial rápida, SEO, gerenciamento de roteamento baseado em arquivos, suporte nativo a i18n ([lang]).
Camada Interativa	React (v19)	Gerenciamento de interfaces complexas (Editor de UI), ciclos de vida do canvas, componentes de arrastar e soltar.
Persistência Local	Dexie.js (v4.3)	Wrapper de IndexedDB. Permite consultas assíncronas e reativas (useLiveQuery) sem bloquear a UI.
Estilos e CSS	Tailwind CSS (v4)	Sistemas de design com classes utilitárias puras, facilitando variáveis locais e suporte nativo ao modo escuro.
Manipulação SVG/PNG	Canvas API e JSZip	Transformação de vetores em bitmaps no lado do cliente. Consolidação das exportações em memória.
Geração OpenGraph	Satori	Motor JSX-para-SVG para construir imagens para redes sociais, configurado para usar fontes WOFF2 locais.
Linting e Formatação	Biome.js	Ferramenta unificada de análise estática, que substitui o ESLint e o Prettier com tempos de execução significativamente menores.
Testes	Vitest / Playwright	Testes unitários para utilitários e testes end-to-end para os fluxos de interação do usuário.

Conclusão

A implementação deste sistema demonstra que transferir todo o fluxo de processamento gráfico para o cliente reduz a dependência de infraestruturas de backend dedicadas, eliminando custos de transferência de dados, persistência em nuvem e latência de manipulação. O uso do IndexedDB garante resiliência estrutural entre sessões, e a composição híbrida de Astro e React assegura uma entrega estática eficiente sem sacrificar a sofisticação do estado no lado do cliente.