Visual Site Builder (Canvas V2)

1. Diferença entre Landing Pages e Construtor de Sites

Enquanto o módulo de Landing Pages é voltado a páginas únicas de alta conversão estruturadas em blocos verticais estáticos (focado em campanhas), o **Visual Site Builder** é uma plataforma completa de design:

• Landing Pages: Edição rápida em bloco único, focada em templates pré-definidos de vendas e formulários simples.
• Construtor de Sites (V2): Layout livre baseado em grid flexível de elementos aninhados (seções, contêineres e componentes), barras de navegação globais e páginas ilimitadas interligadas por rotas customizadas.

2. Arquitetura do Canvas de Layout Flexbox

Diferente dos formulários e landing pages, o Site Builder foi escrito 100% sob medida pelo time de engenharia da DevCod utilizando a API @dnd-kit/core, sem uso de Puck ou outros editores de terceiros. A estrutura do editor é dividida em quatro componentes reativos:

• Element Palette (Paleta de Blocos): Catálogo lateral de componentes estruturais e visuais que podem ser arrastados para a tela (Ex: Headers, Contêiner Flex, Formulários, Rodapés, Sliders).
• Interactive Canvas Layer (Área de Desenho): Painel de visualização em tempo real (WYSIWYG) que renderiza o layout com detecção precisa de pontos de inserção (hit-targets) e overlay de arrastamento.
• Element Navigator (Árvore Outline): Navegador lateral que expõe a estrutura do documento em árvore aninhada, facilitando a inspeção e a movimentação rápida de elementos pais e filhos.
• Element Inspector (Painel de Propriedades): Painel flutuante reativo para alteração fina de estilos (tamanho de fonte, espaçamento padding/margin, cores, cantos arredondados, bordas e alinhamentos flex).

3. Componentes e Controles Avançados

O editor suporta customizações de design profissionais:

• Contêiner Flexbox Dinâmico: Bloco de layout com suporte a alinhamento (justify-content, align-items), direção (row/column), quebra de linha (wrap) e espaçamento uniforme (gap).
• Custom Code Block: Bloco de código livre para inserção direta de scripts customizados, pixels de conversão ou widgets externos que rodam em sandbox isolado.
• Editor de Navegação e Menus: Gerenciador integrado para criar barras de cabeçalho dinâmicas com links para subpáginas e âncoras de rolagem.

4. Modelo de Dados e Gravação do Documento

A página é salva no banco de dados na tabela PublicPage sob a estrutura de grafo do tipo PublicPageDocumentV2:

{`
model PublicPage {
  id           String               @id @default(cuid())
  siteId       String
  name         String
  slug         String
  documentData Json                 // Grafo contendo PublicPageDocumentV2
  published    Boolean              @default(false)
  createdAt    DateTime             @default(now())
  updatedAt    DateTime             @updatedAt
}
          `}

5. Renderização SSR (High-Performance Engine)

No ambiente público de produção, a renderização utiliza o componente PublicPageRendererV2, responsável por percorrer de forma recursiva a árvore de elementos JSON e gerar o HTML estático. Isso garante um tempo de carregamento (LCP) extremamente baixo e otimização total de SEO.