REQ-242 — Refinamentos Visuais, Usabilidade e Harmonização de Controles do Painel Tailwind (Core)

• Status: ready-for-intake

• Modo de Autonomia: autonomo_monitorado (Flagship / Deep Reasoning — Opus 5.5)

• Lote Alvo Core: BATCH-251 (conn2flow)

• Lote Alvo Site Coordenado: BATCH-101 / REQ-107 (conn2flow-site)

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

• Origem: Auditoria humana detalhada tela a tela no ambiente Lab ([REDACTED]) após a entrega da REQ-240 / REQ-106.

• Repositórios Alvo:

  • Core: conn2flow em [REDACTED]

  • Site Coordenado: conn2flow-site em [REDACTED]

1. Visão Geral & Contexto

Após a grande varredura global realizada na REQ-240 / REQ-106 (51 módulos harmonizados com Lucide, cards brancos e abas c2fc-abas), o Engenheiro Chefe conduziu uma auditoria humana minuciosa tela a tela no Lab ([REDACTED]).

Foram identificados 18 grupos de defeitos e refinamentos finos de usabilidade e acabamento visual. Esta especificação formaliza os requisitos normativos pertinentes ao repositório Core (conn2flow), enquanto os requisitos dos módulos privados do site residem na REQ-107 (conn2flow-site).

2. Requisitos Normativos Core por Bloco

Bloco 1: Formulários Core & Abas (forms-search, forms, forms-submissions)

1.1 forms-search/adicionar/

1. Abas Limpas sem Fundo Azul:

   • As abas atuais possuem fundo azul escuro/destoante.

   • Padronizar rigorosamente com o padrão limpo e elegante de admin-paginas (folha canônica c2fc-abas sobre fundo branco).

2. Aba "Código do Widget":

   • O botão "Copiar" está espremido com o sufixo "ar" quebrando para a segunda linha.

   • Ajustar container e botão com whitespace-nowrap inline-flex items-center gap-1.5 px-3 py-1.5 text-xs.

3. Campos Extras ("Mais campo"):

   • Inputs estão colados/encostados sem margem. Adicionar espaçamento consistente (space-y-3 ou gap-3).

   • O dropdown do <select> de tipo é cortado pela borda do container (overflow: hidden), forçando uma barra de rolagem vertical indesejada. Ao tentar rolar, o select fecha sozinho.

   • O dropdown do select deve flutuar livremente fora do container (overflow-visible no wrapper ou posicionamento com z-index/portal adequado), sem provocar scroll interno.

4. Tooltips Padronizados:

   • Adicionar tooltips visíveis via data-c2f-dica ou title semântico em todas as abas e botões de ação (espelhando a consistência existente nas abas internas do editor HTML).

1.2 forms/adicionar/

1. Conformidade Idêntica:

   • Aplicar as mesmas correções de forms-search: abas limpas sem fundo azul, selects suspensos sem corte de container nos campos extras, inputs com espaçamento e tooltips em todas as abas e botões.

1.3 forms-submissions/view/

1. Tooltips em Abas:

   • Adicionar data-c2f-dica em todas as abas de visualização do envio ("Dados Básicos", "Respostas", "Dados JSON").

2. Aba "Dados JSON" com CodeMirror:

   • Hoje exibe JSON bruto dentro de um <textarea> desformatado com ícones desalinhados no sumário.

   • Integrar o CodeMirror (modo application/json, syntax highlighting com tema claro limpo, JSON indentado/formatado para leitura, visual elegante e leitura protegida).

3. Aba "Dados do Envio":

   • Substituir o <select> legado em HTML cru pelo componente oficial c2fc-campo-selecao.

Bloco 2: Dashboard V3.4 (Módulos, Widgets & Mesh Blueprint)

2.1 Padronização de Estados e Hover das Abas

• Na alternância entre as abas "Módulos" e "Widgets e Métricas":

  • O hover de "Widgets e Métricas" exibe uma linha cinza inferior, mas ao estar dentro de Widgets e passar o mouse sobre "Módulos", a animação não é a mesma.

  • Padronizar o estilo de hover, foco e estado ativo de forma perfeitamente simétrica entre as duas abas.

2.2 Exclusividade Estrita: Cover vs Ícone SVG nos Cards de Módulos

• Defeito: Cards de módulos estão renderizando simultaneamente a imagem de capa WebP e o ícone SVG Lucide sobrepostos no centro do card.

• Regra Normativa:

  • Se o módulo possui imagem de capa (tem_cover ativo e arquivo existente), exibe apenas a imagem de capa (ícone SVG omitido).

  • Se o módulo NÃO possui imagem de capa, exibe apenas o ícone SVG perfeitamente centralizado.

  • Nunca exibir ambos sobrepostos.

2.3 Menu de Opções dos Widgets & Integridade de Estilos/Eventos

• Menu de Opções:

  • Acabamento visual moderno e refinado do dropdown de configurações do widget (rounded-lg shadow-lg border border-slate-200 bg-white p-1 text-xs).

• Renderização e Injeção de CSS/JS:

  • Garantir injeção correta dos estilos e scripts dos widgets no contexto do Dashboard (evitando quebra visual, como no widget de apresentações).

  • Tratar eventos globais como fullscreen e redimensionamento sem vazamento de escopo.

2.4 Malha Blueprint Mesh e Redimensionamento Vertical

• Blueprint Mesh no Resize:

  • Durante o redimensionamento/arrasto de widgets, desenhar malha técnica suave de quadradinhos/pontos (blueprint mesh), eliminando as linhas verticais estranhas atuais.

• Flexibilidade Vertical:

  • Permitir maior amplitude de altura (mais passos de grade vertical) e diminuir a altura mínima permitida para acomodar widgets compactos de métricas rápidas.

Bloco 3: TopBar, Sidebar e Padrões Globais da UI

3.1 TopBar: "Mais Atalhos" / Favoritos Fixo à Direita

• Em admin-ia e dashboard, o menu de atalhos/favoritos fica alinhado à direita.

• Em admin-modos-ia e admin-prompts-ia, ele pula para a esquerda.

• Regra: O container de "Mais Atalhos" / Favoritos no TopBar deve permanecer sempre ancorado à extrema direita em 100% dos módulos do sistema.

3.2 Tipografia da Sidebar Canônica

• Módulos do Core e layouts base devem manter rigorosamente a folha de estilos canônica da sidebar ([data-admin-sidebar] [data-menu-item] { font-weight: 500; }, font-semibold no ativo).

• Evitar classes globais ou heranças que alterem o tamanho ou peso das fontes do menu lateral.

3.3 Feedback Global: cursor-pointer em Labels de Checkbox e Rádio

• Em toda a biblioteca de formulários e componentes base:

  • Adicionar cursor-pointer obrigatório ao passar o mouse sobre o rótulo (<label>) associado a qualquer checkbox ou botão de opção (rádio), garantindo feedback imediato de elemento clicável.

Bloco 4: Galerias & Seletor de Arquivos Core (admin-arquivos)

4.1 Módulo galleries/editar/

1. Labels Informativos em Linha Única:

   • Abaixo do select de modelo, o ícone e o texto de ajuda quebram em duas linhas. Alinhar em linha única: inline-flex items-center gap-2 text-xs text-slate-500.

   • Aplicar o mesmo alinhamento inline no label da imagem da galeria.

2. Abas e Sub-abas:

   • Ajustar as abas do editor HTML para a folha canônica c2fc-abas.

   • Na sub-aba "Variáveis", adicionar espaçamento (gap-2) entre os ícones para eliminar o encavalamento.

3. Distribuição dos Controles de Exibição:

   • Os controles de exibição da galeria estão muito verticais e espremidos à esquerda.

   • Distribuir em layout horizontal responsivo (grid de 2 a 3 colunas) para aproveitar a largura útil da tela.

4.2 Seletor de Arquivos Core (admin-arquivos no iframe)

1. Título Dinâmico do Modal:

   • Quando em modo de seleção múltipla, alterar o título para: "Selecione uma ou mais imagens abaixo...".

2. Barra Inferior de Miniaturas Selecionadas:

   • Na barra inferior do modal (ao lado dos botões "Cancelar" e "Confirmar / Incluir Selecionados"), criar um container horizontal de visualização com miniaturas (thumbnails) de todos os arquivos marcados.

   • Cada miniatura deve permitir visualização rápida e botão "×" para desmarcar diretamente pela miniatura antes de confirmar.

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

1. forms-search & forms: Abas limpas sem fundo azul, botão "Copiar" sem quebra, selects de campos extras flutuantes sem scroll do container, tooltips presentes.

2. forms-submissions: Abas com tooltips, aba "Dados JSON" renderizada com CodeMirror syntax highlighting, select da aba "Dados do Envio" usando c2fc-campo-selecao.

3. Dashboard V3.4:

   • Hover simétrico entre as abas.

   • Cards de módulos exibindo SOMENTE imagem de capa (se tiver) OU ícone SVG (se não tiver), nunca ambos.

   • Menu de opções dos widgets moderno; CSS dos widgets íntegro.

   • Resize com grade blueprint suave e maior amplitude vertical com altura mínima reduzida.

4. TopBar & Sidebar: Favoritos fixo à extrema direita em todos os módulos; tipografia da sidebar perfeitamente uniforme.

5. Checkboxes e Rádios: cursor-pointer em todos os labels associados no sistema.

6. galleries & Seletor:

   • Labels de modelo e imagem em linha única; sub-aba variáveis com espaçamento; controles horizontalizados.

   • Seletor de arquivos com título dinâmico no modo múltiplo e barra inferior de thumbnails selecionados com remoção direta.

7. Pipeline Oficial: Compilação e sincronização executadas via ./c2f resources:sync e testes passando com relatório em sdd/implementation/BATCH-251.md.

4. Live Todo List do Lote (Core BATCH-251)

• [ ] Bloco 1: Abas limpas, botão copiar, campos extras com select flutuante e tooltips em forms-search e forms.

• [ ] Bloco 1: CodeMirror na aba Dados JSON, tooltips e c2fc-campo-selecao em forms-submissions.

• [ ] Bloco 2: Hover simétrico das abas do Dashboard.

• [ ] Bloco 2: Exclusividade mútua entre imagem de capa e ícone SVG nos cards de módulos do Dashboard.

• [ ] Bloco 2: Acabamento do menu de opções de widgets e injeção íntegra de CSS/JS.

• [ ] Bloco 2: Grade blueprint mesh no resize do Dashboard e ajuste de amplitude/altura mínima.

• [ ] Bloco 3: TopBar com Favoritos fixado à direita em todos os módulos (admin-modos-ia, admin-prompts-ia, etc.).

• [ ] Bloco 3: Regra global de cursor-pointer em labels de checkboxes e rádios.

• [ ] Bloco 4: Labels inline, abas padronizadas, espaçamento e horizontalização de controles em galleries.

• [ ] Bloco 4: Título dinâmico e barra inferior com thumbnails selecionados no modal de admin-arquivos.

• [ ] Validação automatizada e compilação oficial (./c2f resources:sync).

• [ ] Elaboração do relatório de evidências em conn2flow/sdd/implementation/BATCH-251.md.