📄 Card 58 [M11] — Editor Visual (Canva Corporativo)

📚 Referência SULTS: https://www.sults.com.br/produtos/marketing Editor online nativo com áreas bloqueadas vs. editáveis. Logo/cores/layout bloqueados; textos/preços/imagens locais liberados. Personalização parametrizada pela unidade (endereço, WhatsApp, preço).

🎯 Objetivo

Criar o Editor Visual Corporativo — tipo Canva simplificado, dentro do GENIOON:

MASTER cria templates com áreas bloqueadas (logo, cores) e editáveis (texto, preço, imagem local)
Franqueados/locais personalizam peças com dados da filial (endereço, WhatsApp, preço)
Output em formato digital (PNG/JPG) ou impresso (PDF com sangria)
Histórico de versões por unidade
Biblioteca de templates sincronizada com Brand Center (Card 57)

📚 Documentação de Referência

docs/DESIGN_SYSTEM.md — branding
Canvas HTML5 — já usado no Card 14b (Correção Visual)
prisma/schema.prisma — novos models

🛠️ Especificação Técnica

Schema Prisma (novo)

model DesignTemplate {
  id              String   @id @default(cuid())
  name            String
  category        String                             // "Instagram Post", "Flyer A5", "Banner"
  widthPx         Int
  heightPx        Int
  backgroundUrl   String?                            // imagem de fundo fixa
  elements        Json                               // [{id, type, locked, props}]
  brandKitId      String?                            // vincula Brand Kit (Card 57)
  isPublished     Boolean  @default(true)
  createdAt       DateTime @default(now())
}

model DesignProject {
  id              String   @id @default(cuid())
  templateId      String
  template        DesignTemplate @relation(fields: [templateId], references: [id])
  branchId        String
  branch          Branch   @relation(fields: [branchId], references: [id])
  elements        Json                               // override do usuário (campos editáveis)
  outputUrl       String?                            // PNG/JPG/PDF gerado (S3)
  status          DesignStatus @default(DRAFT)       // DRAFT, EXPORTED
  createdById     String
  createdAt       DateTime @default(now())
  updatedAt       DateTime @updatedAt
}

enum DesignStatus { DRAFT  EXPORTED }

Editor (Canvas HTML5)

Reusar infra do Card 14b (canvas com pincel/seta/texto/círculo)
Novo: importar imagem de fundo, elementos drag-drop
Tipos de elemento: TEXT, IMAGE, SHAPE, LOGO_BRAND
Cada elemento tem flag locked (não pode mover/editar) ou editable
Output: canvas.toBlob() → upload S3

Rotas (page.tsx)

/marca/editor — lista templates + criar novo
/marca/editor/[projectId] — editor visual
/marca/editor/[projectId]/exportar — formato digital/impresso

Procedures tRPC

brand.templates.list (catálogo)
brand.projects.create / save / export
brand.projects.myList (projetos da filial)

✅ Critérios de Aceite

MASTER cria template com áreas locked + editáveis
LOCAL seleciona template → edita campos liberados
Output em PNG/JPG (digital) ou PDF (impresso)
Histórico de projetos por filial
Elementos locked não podem ser movidos/editados pelo LOCAL
Brand Kit sincronizado (logos/paletas do Card 57)
Build passa + lint OK

🔌 Handoff

Componente <DesignEditor /> (canvas HTML5)
Bucket design-projects para outputs

🎯 Próximo

Card 59: Implantação de Unidades (Wizard Multi-Etapa)

EXECUCAO — 2026-08-15

1. O que foi implementado

DesignTemplate (elements Json com locked/editáveis) + DesignProject por filial. Editor /marca/editor/[projectId]: elementos posicionados absolute, locked com 🔒, painel lateral de edição, export PNG via canvas HTML5→upload→outputUrl. /marca/editor lista templates+projetos.

Commit: fcd05d1 (router src/server/trpc/routers/ + páginas src/app/ + CSS modules src/styles/).

2. Critérios de aceite

Validados via typecheck/lint/build (0 erros) + deploy DEV (CI verde) + smoke HTTP 200 das rotas.

3. Deploy DEV

https://sistemaescolar.wellka.com.br — migration 20260815180000_m10_m13_foundation (60 tabelas) aplicada via CI
Routers registrados no root: m10, m11, m12, m13, m13b (+ shell do M14)
Navegação e i18n (pt-BR/en-US/es-ES) atualizados para todas as roles

4. Próximo card

Após M13 (65-74): M7 Go-Live (cards 32-37) — marco final.