REQ-243 — Refinamentos Visuais, Usabilidade e Controles do Painel Tailwind (Rodada 2 — Core)

• Status: ready-for-intake

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

• Lote Alvo Core: BATCH-252 (conn2flow)

• Lote Alvo Site Coordenado: BATCH-102 / REQ-108 (conn2flow-site)

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

• Origem: Auditoria humana minuciosa completa (Rodada 2) em ambiente Lab ([REDACTED]) pós-integração da REQ-242 / REQ-107, cobrindo todos os módulos do sistema até perfil-usuario.

• Repositórios Alvo:

  • Core: conn2flow em [REDACTED]

  • Site Coordenado: conn2flow-site em [REDACTED]

1. Visão Geral & Contexto

Após a consolidação em main dos lotes REQ-242 e REQ-107, o Engenheiro Chefe completou a varredura e conferência de todos os módulos administrativos restantes no Lab.

Esta especificação consolida todos os itens pertinentes ao Core (conn2flow), totalizando melhorias na biblioteca de controles (controles.js), no editor HTML, tabelas de histórico, diálogos modais, galerias, menus e na família completa de publicadores e módulos de sistema (pages-index, publisher, publisher-highlights, publisher-index, publisher-pages, variables, admin-cron, admin-environment).

2. Requisitos Normativos Core por Bloco

Bloco 1: Biblioteca de Controles & Comportamento Global (controles.js, controles.css, Interface)

1.1 Isolamento de Cliques no Select Flutuante (Stop Propagation)

• Problema: Ao clicar em uma opção de um <select> com dropdown flutuante (.c2fc-flutuante), o evento de clique vaza (click-through / event bubbling) e aciona elementos situados na camada inferior atrás do menu (exemplo: ao selecionar um modelo em subscriptions-plans, o clique atravessa e dispara o botão "Editor visual").

• Requisito:

  • No handler de clique e seleção de itens (_aoClicarItem, mousedown/pointerdown/click de .c2fc-select-opcao em controles.js), aplicar e.stopPropagation() e e.preventDefault().

  • Garantir que o fechamento do painel e a seleção do valor não disparem ações em botões ou links que estejam posicionados sob o cursor.

1.2 Quebra de Linha Automática nas Tabelas de Histórico de Alterações

• Problema: Nas tabelas de histórico de alterações de registros (historico_alteracoes / historico), textos longos não estão mudando de linha, provocando estouro de largura e barra de rolagem horizontal desnecessária.

• Requisito:

  • Na biblioteca de interface e nos estilos de tabelas de histórico, aplicar whitespace-normal, break-words e overflow-wrap: anywhere nas células de descrição/valor, garantindo que o texto quebre automaticamente na largura disponível.

Bloco 2: Componentes Core & Editores

2.1 Editor HTML (html-editor — Aba Modelos)

• Problema: Na aba "Modelos" do editor HTML (html-editor-tailwind), os cartões de prévia dos modelos estão aparecendo em tamanho gigante/desproporcional em vez do tamanho padrão de cartões compactos.

• Requisito:

  • Revisar a grade e os estilos dos cartões de modelos no componente do editor HTML para que renderizem em formato compacto e equilibrado (cards consistentes com a seleção de layouts/templates).

2.2 Diálogo de Alerta em Seleção de Arquivos Não Permitidos

• Problema: Em admin-paginas/editar/, ao tentar selecionar um arquivo que não é uma imagem via modal do admin-arquivos, a mensagem de alerta exibe o código HTML puro de forma escapada (O arquivo selecionado <b>NÃO</b> é uma imagem.).

• Requisito:

  • Ajustar o modal de alerta para renderizar o HTML formatado com segurança (<b>NÃO</b> em negrito real, em vez de imprimir as tags literais).

2.3 Altura Útil do Palco do Editor Visual (html-editor-preview-stage / #iframe-preview)

• Problema: No editor visual de admin-paginas/editar/ (e demais módulos com editor visual), ao abrir o modal de edição/pré-visualização visual, a área útil do palco (html-editor-preview-stage / #iframe-preview) colapsou para uma altura residual de ~100px.

• Causa Raiz Identificada: A regra introduzida em controles.css (.c2fc-ponte-modal.fullscreen > .content iframe { height: auto !important }) para o modal do seletor de arquivos sobrepôs a classe h-[calc(100vh-220px)] do #iframe-preview, forçando o iframe a encolher para altura automática.

• Requisito:

  • Restringir a regra de altura automática de iframes para escopos específicos de modais que possuam .iframe-container, ou excluir explicitamente o #iframe-preview e .iframe-preview-frame iframe.

  • Garantir que o #iframe-preview e o palco html-editor-preview-stage ocupem a altura útil total pretendida da tela (calc(100vh - 220px)), restaurando o espaço de trabalho do editor visual.

Bloco 3: Módulos Administrativos Core (Fase A)

3.1 admin-arquivos (Tooltips e Padronização de Botões)

• Requisito:

  • Adicionar tooltips semânticos (data-c2f-dica) nos botões de ação do topo: "Adicionar arquivos", "Nova pasta" e "Selecionar todos".

  • Padronizar as dimensões e padding dos botões de ação para ficarem perfeitamente proporcionais aos botões de controle de visualização/tamanho da listagem.

3.2 admin-categorias/adicionar-filho/

• Requisito:

  • Padronizar o campo "Nome" para a estrutura oficial c2fc-campo / c2fc-campo-entrada.

  • Aplicar classes de botão oficiais no botão de envio (c2fc-botao c2fc-botao-primario), eliminando o botão sem estilo CSS.

3.3 cookie-consent/editar/

• Requisito:

  • Corrigir as caixas de mensagem informativas situadas abaixo do select de modelo e da troca de versão: alinhar ícone e texto em linha única contínua (inline-flex items-center gap-2).

3.4 galleries/editar/ & Seletor admin-arquivos

1. Bandeja Visual e Botão de Confirmação no Modal Seletor:

   • Ao abrir o modal do admin-arquivos para seleção múltipla de imagens na galeria:

     • Na barra inferior de ações (ao lado de "Cancelar"), exibir uma bandeja com as miniaturas das imagens marcadas, com botão "×" para desmarcar.

     • Incluir um botão explícito "Confirmar" / "Concluir Seleção" (c2fc-botao c2fc-botao-primario) para fechar o modal aplicando e confirmando as seleções na tela da galeria.

2. Ações nos Cards de Imagens na Galeria:

   • No hover sobre as imagens da galeria, o botão/alça "arrastar para reordenar" está com opacidade reduzida (semi-transparente) e deslocado.

   • Tornar o botão 100% opaco e sólido (opacity-100), alinhando o posicionamento e o estilo com os demais botões de ação (editar, excluir).

3.5 menus/editar/

1. Caixas de Mensagem em Linha Única:

   • Abaixo dos selects de modelos e de disponibilidade, alinhar ícone e texto em linha única (inline-flex items-center gap-2).

2. Grupo de Rádio do Tipo de Item:

   • Para o tipo de item (Página, Sistema, Ambos):

     • Organizar os botões de opção horizontalmente em linha única (flex flex-wrap items-center gap-4).

     • Corrigir o deslocamento para a direita do popover de dica ao passar o mouse sobre as opções.

Bloco 4: Família Publisher, Índices e Módulos do Sistema (Fase B)

4.1 pages-index/editar/

1. Caixas de Mensagem: Ícone e texto em linha única (inline-flex items-center gap-2).

2. Mapeamento de Variáveis: Reestruturar para 3 colunas responsivas e autoajustáveis (grid grid-cols-1 md:grid-cols-3 gap-4), eliminando o agrupamento comprimido no canto esquerdo.

3. Aba "Código do Widget": Variável do widget e botão "Copiar" alinhados na mesma linha com botão compacto (c2fc-botao-compacto).

4.2 publisher/editar/

1. Vinculação de Campos: Padronizar em 3 colunas uniformes com os cabeçalhos em destaque (Variáveis do Modelo, Campos do Publicador, Vinculados (Variável/Campo)), espelhando o padrão de publisher-highlights.

2. Campos Personalizados:

   • Caixa e indicador "Sim" devidamente alinhados.

   • Botões de ação (excluir, mover para cima, mover para baixo) organizados lado a lado na horizontal (flex items-center gap-1.5), em vez de empilhados verticalmente.

3. Busca de Campos do Modelo: Padronizar e refinar o select de modelo.

4.3 publisher-highlights/adicionar/

1. Selects da UI: Padronizar os selects "Publicador Origem" e "Modelo" para o componente oficial c2fc-campo-selecao.

2. Mapeamento de Variáveis: Destacar os cabeçalhos das 3 colunas (Variáveis do Modelo, Campos do Publicador, Vinculados) com espaçamento adequado e respiro em relação aos botões abaixo.

4.4 publisher-index/editar/

1. Caixas de Mensagem: Linha única abaixo de modelos.

2. Conteúdo do Destaque: Refinamento visual da seção.

3. Mapeamento de Variáveis: Uniformizar com o padrão de 3 colunas.

4. Aba "Código do Widget": Alinhar variável e botão "Copiar" na mesma linha (c2fc-botao-compacto).

4.5 publisher-pages/ (Listagem e Edição)

1. Listagem: Filtro de tipo ("Sistema", "Páginas", "Ambos") padronizado no modelo de admin-paginas.

2. Edição (publisher-pages/editar/):

   • Botões "Editar publicador" e "Mover publicação" com espaçamento em relação ao select logo acima.

   • Mensagens informativas em linha única.

   • Mapeamento de layout com botões espaçados.

   • Correção de vazamento de código/iframe e tags desformatadas abaixo do editor HTML.

   • Revisão completa espelhada na estabilidade de admin-paginas.

4.6 variables/

1. Variáveis de Sistema Não Renderizadas: Corrigir vazamento de tags brutas (ex: [[VARIÁVEL_EDITAR_BOTÃO]]).

2. Botões de Ação na Listagem: Remover bordas brancas parasitas ao redor dos ícones de editar e excluir.

3. Harmonização de Controles: Revisão geral de campos e botões para o padrão Tailwind.

4.7 admin-cron/ e admin-environment/

1. Selects: Converter selects nativos para c2fc-campo-selecao.

2. Botões e Tooltips: Uniformizar botões de ação e adicionar tooltips semânticos (data-c2f-dica) em todas as ações.

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

1. controles.js: Clicar em opções de selects flutuantes nunca dispara ações ou eventos em elementos posicionados sob o dropdown.

2. Histórico: Tabelas de histórico de alterações com quebra de linha de texto automática sem estouro horizontal.

3. Editor HTML: Aba "Modelos" renderiza cartões compactos harmoniosos.

4. Alertas: Diálogo de erro ao selecionar arquivo inválido exibe texto formatado com tags HTML interpretadas (sem tags brutas).

5. admin-arquivos & admin-categorias: Tooltips em botões de topo, formulário adicionar filho devidamente estilizado.

6. cookie-consent & menus: Caixas de mensagem informativas em linha única; opções de rádio de menus em linha horizontal com dica estável.

7. galleries: Modal de arquivos com bandeja de miniaturas e botão "Confirmar"; alça de arrasto da galeria sólida (opacity-100) e alinhada.

8. Família Publisher (pages-index, publisher, publisher-highlights, publisher-index, publisher-pages):

   • Mapeamento de variáveis uniforme em 3 colunas responsivas com cabeçalhos destacados.

   • Botão copiar compacto inline na aba de widget.

   • Ações de campos personalizados na horizontal.

   • Selects padronizados com c2fc-campo-selecao.

   • publisher-pages alinhado à excelência visual de admin-paginas, sem vazamento de iframe/código.

9. variables, admin-cron e admin-environment: Sem tags brutas não processadas; sem bordas brancas nos ícones; selects e tooltips no padrão Tailwind.

10. Compilação e Testes: ./c2f resources:sync executado e suíte de testes aprovada com registro em sdd/implementation/BATCH-252.md.

4. Live Todo List (Core BATCH-252)

• [ ] controles.js: stopPropagation e isolamento de clique no select flutuante.

• [ ] Interface: Quebra de linha de texto automática nas tabelas de histórico.

• [ ] Editor HTML: Cartões compactos na aba de modelos.

• [ ] Editor HTML: Restauração da altura útil do palco (html-editor-preview-stage / #iframe-preview).

• [ ] Diálogos: Renderização segura de HTML formatado nos alertas de seleção de arquivo.

• [ ] admin-arquivos: Tooltips e padronização dos botões de topo.

• [ ] admin-categorias: Padronização do formulário adicionar filho.

• [ ] cookie-consent: Caixa de mensagem inline abaixo de modelo e versão.

• [ ] galleries: Bandeja e botão Confirmar no seletor de arquivos; alça de arrasto sólida nas miniaturas.

• [ ] menus: Mensagens inline e grupo de rádios horizontal com dica alinhada.

• [ ] pages-index: 3 colunas no mapeamento de variáveis, mensagens inline e copiar inline no widget.

• [ ] publisher: Vinculação de campos em 3 colunas, botões de ações na horizontal e select de modelo.

• [ ] publisher-highlights: Selects com c2fc-campo-selecao e cabeçalhos destacados no mapeamento.

• [ ] publisher-index: Mensagens inline, conteúdo do destaque e mapeamento de variáveis em 3 colunas.

• [ ] publisher-pages: Filtro de tipo na lista, botões e mensagens com espaçamento na edição, sem vazamento de código abaixo do editor.

• [ ] variables: Resolução de tags de sistema não renderizadas, remoção de bordas brancas nos ícones e harmonização.

• [ ] admin-cron e admin-environment: Selects com c2fc-campo-selecao, botões e tooltips padronizados.

• [ ] Compilação oficial e testes automatizados (./c2f resources:sync).

• [ ] Relatório de implementação em conn2flow/sdd/implementation/BATCH-252.md.