Conn2Flow
Navegação das docs

SDD

req-159: Utility `animate-fade-in-up` inexistente nos templates de sessão do core

Quatro templates de sessão aplicam a classe animate-fade-in-up, que não existe. Medido em Chromium sobre o HTML e o sidecar reais do template:

  • Status do intake: ready-for-intake

  • Data: 2026-09-02

  • Origem: auditoria da pasta gestor/resources/<idioma>/templates/ solicitada pelo operador ao final do BATCH-158, para verificar se os templates que originaram a página de evidência tinham defeitos próprios. Achado independente da paridade de cascata tratada naquele lote.

  • Classificação: autoria de recurso, contrato @theme do Tailwind v4, animação de entrada

  • Batch candidato: BATCH-160


1. Fato medido

Quatro templates de sessão aplicam a classe animate-fade-in-up, que não existe. Medido em Chromium sobre o HTML e o sidecar reais do template:

sessao-contato-mapa  .animate-fade-in-up   animation-name: none     duration: 0s    <- morto
sessao-com-abas      .animate-fade-in      animation-name: fadeIn   duration: 0.5s  <- funciona
sessao-destaque      .animate-bounce       animation-name: bounce   duration: 1s    <- funciona
sessao-destaque      .animate-pulse        animation-name: pulse    duration: 2s    <- funciona

No Tailwind v4 uma classe animate-<nome> só é gerada quando existe o token --animate-<nome> no @theme. Não há definição de --animate-fade-in-up — nem no contrato do core (gestor/assets/tailwindcss/system-input.css), nem no de projeto — e não existe @keyframes com esse nome em lugar nenhum do acervo. A classe é silenciosamente descartada na compilação: não há regra para ela em nenhum dos 36 sidecars .precompiled.css.

O contraste com sessao-com-abas explica a causa: aquele template traz o @keyframes fadeIn num <style> embutido no próprio HTML, e por isso a animação dele funciona. Os quatro afetados usam a classe sem trazer definição nenhuma.

Alcance

Template Ocorrências (por idioma)
sessao-contato-mapa 2
sessao-contato-mapa-alternativo 2
sessao-galeria-masonry 2
sessao-newsletter-minimalista 1

7 usos por idioma, 14 no total (pt-br e en), em 8 arquivos.

2. Severidade: baixa, e o motivo importa

Nenhum dos elementos afetados tem opacity-0 aplicado junto. Eles renderizam normalmente e apenas deixam de ter a animação de entrada — aparecem estáticos em vez de deslizarem para cima.

Se algum tivesse opacity-0 combinado com a classe, o conteúdo ficaria invisível para sempre, porque a animação que o traria de volta não existe. Não é o caso hoje, mas é exatamente o risco que uma utility inexistente carrega, e é o que justifica corrigir em vez de apenas remover a classe.

Isso também explica por que o defeito nunca deu na vista e por que não interferiu na validação do BATCH-158.

3. O que NÃO é problema (verificado na mesma auditoria)

Registrado para não ser reaberto:

  • 36 Tailwind com sidecar / 36 Fomantic sem: correto, Fomantic não usa o pipeline do Tailwind.

  • tab-btn, tab-content, sidebar-item, active, c-header-nav-btn, c-header-nav-mobile: aparecem sem regra compilada, mas são hooks de JavaScript (document.querySelector) ou estão definidas em <style> local do próprio template. Não são utilities.

  • 20 templates sem arquivo de miniatura em gestor/assets/templates/images/<idioma>/: layouts e componentes não declaram o campo thumbnail no manifesto — só as sessões declaram, porque só elas aparecem no seletor visual de inserção. TemplatesTailwindIntegrityTest passa (2.695 asserções), pois exige o arquivo apenas quando o campo existe.

  • animate-pulse (38 usos) e animate-bounce (26 usos): nativas do Tailwind, compilam e animam.

4. Escopo requerido

Módulo 1 — Definir a animação no contrato central do core

  • Localização: gestor/assets/tailwindcss/system-input.css.

  • Declarar --animate-fade-in-up no @theme e o @keyframes correspondente.

  • Decisão do operador (2026-09-02): definir no @theme do core, e não repetir um <style> local em cada template. O contrato central é a fonte única — tailwind_recursos_browser_contract() deriva dele o browser-contract.css, então a utility passa a existir também no editor visual e na Editbar, sem uma segunda declaração.

Módulo 2 — Recompilar os sidecars afetados

  • c2f resources:sync --force para que os .precompiled.css dos quatro templates passem a conter a regra.

Módulo 3 — Guarda automatizada

  • Teste que reprova classe animate-* usada em template sem regra correspondente no sidecar. A falha atual é silenciosa: o template parece correto no código e não anima na tela.

5. Critérios de aceite

  1. getComputedStyle do elemento com animate-fade-in-up devolve animation-name diferente de none e duração maior que zero, nos quatro templates e nos dois idiomas.

  2. animate-pulse, animate-bounce e animate-fade-in continuam funcionando (sem regressão).

  3. Suítes PHPUnit e Vitest verdes.

6. Ressalva conhecida

tailwind_recursos_input_central() usa o contents/tailwindcss/input.css do PROJETO quando ele existe, substituindo o system-input.css do core — não estendendo. O conn2flow-site tem input próprio (só cores e fonte). Portanto, projetos com contrato próprio que recompilem estes templates não herdam a animação enquanto não declararem o mesmo token.

Tornar o contrato de projeto uma extensão do contrato do core mudaria comportamento de compilação para todos os projetos e não está no escopo desta requisição — se for desejado, exige change request própria.

O Futuro é Híbrido: Humano + IA.

O Conn2Flow é a ferramenta. Se você precisa do Arquiteto para desenhar a estratégia da sua empresa usando essa tecnologia...

Contrate Consultoria Especializada