REQ-244 — Paridade de Renderização, Injeção de Estilos Tailwind e Hidratação de Widgets no Dashboard

• Status: ready-for-intake

• Modo de Autonomia: autonomo_monitorado (GPT-6.1 SOL — Esforço Médio)

• Lote Alvo Core: BATCH-253 (conn2flow)

• Lote Alvo Site Coordenado: BATCH-103 / REQ-109 (conn2flow-site)

• Data de Criação: 2026-10-06

• Origem: Constatação de quebra e inconsistência visual nos widgets inseridos na aba "Widgets e Métricas" do Dashboard ([REDACTED]), onde widgets perfeitamente estilizados em páginas avulsas (exemplo: [REDACTED]) perdem folhas de estilo, tokens de cores e classes utilitárias do Tailwind ao rodar no iframe isolado.

• Repositórios Alvo:

  • Core: conn2flow em [REDACTED]

  • Site: conn2flow-site em [REDACTED]

1. Visão Geral & Diagnóstico Técnico

1.1 O Problema

Na aba "Widgets e Métricas" do Dashboard ([REDACTED]), os blocos adicionados pelo usuário são renderizados dinamicamente pelo JavaScript dentro de um <iframe> via srcdoc após uma requisição AJAX para dashboard/ com ajaxOpcao=widget-render.

Embora a execução funcional de scripts ocorra (ex.: controles avançam e mudam de slide na apresentação), o visual e o CSS estão totalmente quebrados ou desconfigurados. Em contraste, ao acessar uma página normal que renderiza o mesmo widget (ex.: [REDACTED]), a apresentação e demais widgets aparecem 100% perfeitos, com tipografia refinada, gradientes, botões, espaçamentos e cores oficiais do tema.

1.2 Causas Raízes Identificadas

1. Ausência do Compilador/Runtime Tailwind no Iframe:

   • No backend (dashboard.php > dashboard_ajax_widget_render), o sistema tenta injetar estilos lendo o layout layout-iframe-tailwindcss.

   • Contudo, layout-iframe-tailwindcss.precompiled.css contém apenas regras de reset básico (box-sizing, etc.) e um @layer components,utilities; vazio — zero classes utilitárias do Tailwind (não há flex, grid, text-center, max-w-7xl, p-6, bg-c2f-blue, rounded-2xl, etc.).

   • No frontend (dashboard.js), o iframe monta o documento HTML apenas com data.css, jQuery e o HTML do widget. Diferente do editor visual (html-editor-interface.js) e do preview de módulos (pages-index.js), o dashboard NÃO injeta o compilador tailwindcss-browser, de modo que as dezenas de classes utilitárias do Tailwind no HTML do widget simplesmente não produzem efeito no iframe.

2. Omissão de Campos de Estilo e Templates no Backend (dashboard.php):

   • Na função dashboard_ajax_widget_render:

     • O select no banco na tabela do registro busca apenas id, fields_schema e css_compiled. Ele omite a coluna css autoral do registro (onde módulos como presentations armazenam arquivos como conn2flow.css).

     • A busca na tabela templates só ocorre se css_compiled for vazio e busca apenas css_precompiled, ignorando a coluna css autoral do template.

     • Marcadores de tema, fontes e variáveis globais CSS (--color-c2f-blue, --font-sans, etc.) não são passados para o iframe.

3. Inconsistência de Geometria e Estilo Estrutural do Card e Iframe (dashboard.js e CSS):

   • O card criado no DOM (.dashboard-widget-card) não possui display: flex; flex-direction: column;, fazendo com que .dashboard-widget-card-body com flex-1 não consiga preencher a altura útil definida no card pela malha (geometry(card, widget)).

   • O elemento iframe.dashboard-widget-frame não possui regra de estilo CSS global (cai no default do navegador de 300x150 com borda embutida).

   • O corpo do card possui padding fixo p-4, que é indesejado em widgets tipo apresentação, deck de slides ou gráficos full-bleed.

2. Requisitos Normativos de Implementação

Bloco 1: Backend Core — Injeção Completa de Estilos em dashboard.php

1. Consulta Robusta do Registro do Widget (dashboard_ajax_widget_render):

   • Ao buscar o registro na tabela de destino ($def['tabela']), selecionar todas as colunas de estilização disponíveis: id, fields_schema, css, css_compiled, css_precompiled (se existir) e html_extra_head (se existir).

   • Se o registro possuir um template vinculado (template_id no fields_schema), carregar tanto css quanto css_precompiled da tabela templates.

   • Garantir que qualquer folha declarada pelo widget seja unificada em data.css.

2. Fornecimento de Assets e Tokens de Tema:

   • Incluir no retorno AJAX ($_GESTOR['ajax-json']['data']):

     • tailwind_compiler_url: URL canônica para o script tailwindcss-browser (dist/index.global.js), obtida via assets_externos_url ou equivalente do core.

     • theme_styles: Bloco de estilos contendo os tokens padrão do Conn2Flow (incluindo @theme { --color-c2f-blue: #1daac6; } ou classes utilitárias de base e variáveis CSS de cores/fontes).

     • scripts: scripts de controlador público do widget (<modulo>.widget.js) e bibliotecas registradas no $_GESTOR['javascript-fim'].

Bloco 2: Frontend Core — Hidratação do Iframe e Geometria em dashboard.js e CSS

1. Estrutura e Dimensionamento do Card:

   • Atualizar a criação de .dashboard-widget-card:

     • Deve possuir classes estruturais completas: dashboard-widget-card flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm.

   • Atualizar .dashboard-widget-card-body:

     • Deve ocupar flex-1 w-full min-h-0 overflow-hidden relative.

     • Para widgets full-bleed (ou widgets identificados como presentations / slides / decks), remover o padding interno ou aplicar classe p-0 para permitir que o iframe ocupe 100% da área útil do card.

   • Definir classes explícitas para .dashboard-widget-frame:

     • w-full h-full border-0 block min-h-0.

2. Montagem do frame.srcdoc em dashboard.js:

   • Construir o documento isolado com os seguintes elementos essenciais no <head>:

     • <meta charset="utf-8"> e <meta name="viewport" content="width=device-width, initial-scale=1">.

     • <base href="..."> com a raiz pública canônica do gestor.

     • Reset e geometria base: <style>html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}body{font-family:system-ui,-apple-system,sans-serif}</style>.

     • Variáveis e tokens de tema do Conn2Flow (ex: cor #1daac6, fontes).

     • Todas as folhas de estilo autorais e de templates recebidas em data.css.

     • O script do compilador tailwindcss-browser (usando a URL de asset oficial, idêntico ao html-editor-interface.js).

     • Script do jQuery (se presente ou necessário).

     • Variável global mínima no iframe: <script>window.gestor = { raiz: location.origin + ... };</script>.

   • No <body>:

     • O HTML do widget (data.html).

     • Os scripts do widget (data.scripts ou <modulo>.widget.js).

   • Disparar reinicialização de ícones (lucide.createIcons()) e inicialização do widget após o carregamento (onload do iframe).

Bloco 3: Paridade e Compatibilidade de Módulos (Core & Site)

1. Piloto: Widget presentations:

   • No Dashboard, ao adicionar uma apresentação (ex.: Conn2Flow), ela deve renderizar com:

     • Fundo escuro oficial e containers de slides com proporção correta.

     • Cores de destaque (c2f-blue), badges de infraestrutura, tipografia e gradientes (bg-linear-to-r).

     • Controles de slides (setas, pontos, contador, barra de progresso e botão de tela cheia) visíveis e operantes.

     • Transição suave entre slides sem overflow ou quebra de malha.

2. Outros Widgets do Catálogo:

   • forms-search: renderizar input de busca com lupa, autocomplete e botões com visual limpo Tailwind.

   • pages-index: renderizar listagem de páginas e cards com espaçamento harmônico.

   • cookie-consent, menus, galleries (quando inseridos): visual idêntico ao das páginas públicas.

3. Critérios de Aceite & Validação

• [ ] Compilação: c2f resources:sync executa sem erros em ambos os repositórios.

• [ ] Testes Automatizados: npm run test (Vitest) e composer test (PHPUnit) passam sem falhas.

• [ ] Paridade Visual: A apresentação conn2flow no Dashboard ([REDACTED]) exibe rigorosamente o mesmo design, cores (c2f-blue), tipografia e botões que a página avulsa [REDACTED].

• [ ] Redimensionamento da Grade: O redimensionamento do card de widget na malha de 12 colunas mantém o conteúdo do iframe escalável e sem overflow parasitário.

• [ ] Sem Quebra em Outros Widgets: Nenhum outro widget do catálogo perde funcionalidade ou estilo.

• [ ] Git: Commits com caminhos específicos de arquivos alterados (sem git add -A).