req-236 — Master Integrador Multi-Repositório: Unificação Tailwind (Core & Site), Refinamento do Dashboard V3.1 e Homologação Final

• Status: ready-for-implementation

• Modo de Autonomia: autonomo_monitorado

• Lote Alvo Core: BATCH-245 (conn2flow)

• Lote Alvo Site: BATCH-095 (conn2flow-site)

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

• Papel: Agente Sênior de Integração & Full-Stack (Opera em ambos os repositórios)

• Repositório 1 (Core): conn2flow em [REDACTED]

• Repositório 2 (Site): conn2flow-site em [REDACTED]

1. Visão Geral & Diagnóstico da Missão

Esta requisição unificada resolve de forma definitiva e sequencial:

1. O Descompasso dos Módulos do Core: O código dos módulos listados pelo Engenheiro Chefe (admin-ia, forms, menus, galleries, admin-arquivos, admin-atualizacoes, admin-environment, admin-plugins, variables, usuarios, modulos, etc.) já foi implementado nas branches paralelas feat/req-222, feat/req-223 e feat/req-224, mas aguardava merge na main de conn2flow.

2. Refinamento de UX/UI do Dashboard V3.1: Correção do tooltip da alça (sem cortes), capa única sem duplicação com +20% de altura, aba widgets com "Modo de Edição" e seleção de registro/instância alvo, e reorganização visual com menu "Opções".

3. Módulos Privados do Site (conn2flow-site): Migração para Tailwind de social-connections, social-apps, host-manager e 3d-catalog sob a REQ-101.

4. Auditoria Geral e Homologação: Validação de paridade (req-225) com c2f css:audit e sincronização completa no Lab (project:update-all).

2. Especificação Técnica & Critérios de Aceite

BLOCO A: Integração das Branches Pendentes do Core (conn2flow)

• CA-A1 (Limpeza e Merge Sequencial):

  • Limpar a árvore de trabalho da main em conn2flow (git stash para artefatos voláteis .precompiled.css).

  • Mesclar na main:

    1. feat/req-222 (BATCH-231): cookie-consent, forms, forms-search, forms-submissions, galleries, menus.

    2. feat/req-223 (BATCH-232): admin-ia, admin-modos-ia, admin-prompts-ia, admin-arquivos, admin-categorias, admin-atualizacoes, admin-environment, admin-plugins, variables.

    3. feat/req-224 (BATCH-233): usuarios, usuarios-perfis, modulos, modulos-operacoes.

  • Resolver conflitos de documentação preservando o histórico de todos os lotes.

  • Executar npm.cmd test e certificar que todos os testes unitários do Core continuam passando (501+ testes).

BLOCO B: Refinamentos de UX/UI do Dashboard V3.1 (Core)

CA-B1: Hierarquia do Cabeçalho e Menu Dropdown "Opções"

• Estrutura Visual Superior:

  1. Topo: Título da página <h1>#titulo#</h1> ("Painel Inicial" / "Dashboard").

  2. Imediatamente abaixo do título: A barra de navegação das abas ([ Módulos ] [ Widgets ]).

• Limpeza da Aba Widgets:

  • Remover textos redundantes como "Painel Operacional e Widgets" e "Personalize".

  • A malha de widgets deve começar logo abaixo da barra de abas.

• Menu Dropdown "Opções":

  • Em vez de botões avulsos espalhados, agrupar as ações em um botão dropdown elegante "Opções" (com ícone sliders-horizontal ou settings-2):

  • Modo de Edição (toggle para habilitar/desabilitar controles visuais de edição).

  • Adicionar Widget (abre catálogo de widgets).

  • Restaurar Padrões (reseta layout para o padrão de fábrica).

  • Densidade dos Módulos (seletores P / M / G).

CA-B2: Tooltip da Alça de Arrasto dos Cards (Sem Cortes)

• Problema Atual: O tooltip (data-c2f-dica) na alça de arrasto dos módulos está cortado pela metade na borda esquerda do cartão por tentar se alinhar da direita para a esquerda ou ficar preso no overflow: hidden.

• Solução Normativa:

  • Alinhar o balão da dica da esquerda para a direita (data-c2f-dica-pos="bottom left" com CSS left: 0 !important; right: auto !important; transform: none !important; min-width: max-content;).

  • Elevar o z-index do tooltip para 100030, garantindo que ele flutue acima de qualquer cartão vizinho.

  • O texto do tooltip deve se expandir sempre para o interior do cartão, sem corte horizontal.

CA-B3: Capa Única dos Módulos (Sem Duplicata) e Altura +20% Maior

• Eliminação da Imagem Dupla:

  • PROIBIDO renderizar duas imagens no mesmo cabeçalho (a capa esticada no fundo + o ícone SVG com <image href="..."> no centro).

  • Quando o módulo tem capa cadastrada (has-cover), renderizar apenas uma imagem única e contínua:

  • Tag <img> limpa ocupando 100% da área do cabeçalho (position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;).

  • Desativar e ocultar completamente o #modulo-svg# quando houver capa.

  • Quando o módulo NÃO tem capa (no-cover), renderizar apenas o ícone vetorial Feather SVG centralizado.

• Aumento de Altura em +20%:

  • Densidade M (padrão): aumentar de 9rem para 11rem (~176px).

  • Densidade G (expandido): aumentar de 12rem para 14.5rem (~232px).

  • Densidade P (compacto): mantém 2.25rem em linha horizontal.

CA-B4: Aba Widgets — Modo de Edição e Seleção de Registro Alvo

• Modo de Edição (Toggle):

  • Modo de Visualização (Padrão / Desligado): A malha de widgets é limpa. As alças de redimensionamento (.dashboard-widget-resize-handle), alças de arrasto e botões de substituição/exclusão ficam ocultos (display: none).

  • Modo de Edição (Ligado): As alças de redimensionamento nos cantos, botões de arrasto e opções de configuração tornam-se visíveis e interativos.

  • O estado do Modo de Edição é acionado pelo menu "Opções" e pode ser salvo na sessão do usuário.

• Seleção de Registro / Instância do Widget:

  • Um widget no Conn2Flow é composto por um Tipo de Widget (ex: métricas, gráfico, resumo) e opcionalmente um Registro/Instância Alvo (registro_id / configuração de dados específica).

  • Ao clicar em "Adicionar Widget" ou "Trocar Widget", a interface deve permitir:

    1. Escolher o Tipo de Widget.

    2. Selecionar o Registro Alvo ou configuração específica associada.

  • Persistir tanto o ID do widget quanto os parâmetros da instância na preferência dashboard_widgets_layout.

BLOCO C: Migração dos Módulos Privados do Site (conn2flow-site)

• CA-C1 (Escopo da REQ-101 / BATCH-095):

  • No repositório conn2flow-site, implementar a migração para Tailwind dos módulos privados:

  • Social: social-connections, social-apps, publisher-social-media (utilizando o adaptador social-connections.workspace-tailwind.js da REQ-221).

  • Operação & Hospedagem: host-manager, marketplace-admin, documentation.

  • Catálogo 3D: 3d-catalog, 3d-catalog-groups, 3d-catalog-items.

  • Garantir que as telas utilizem layout-administrativo-tailwind, sem scripts nem estilos do Fomantic.

  • Suporte responsivo a telas de 390px sem rolagem horizontal.

BLOCO D: Auditoria Visual Geral & Sincronização no Lab

• CA-D1 (Auditoria de Paridade req-225):

  • Rodar php cli/c2f.php css:audit no Core para certificar zero resíduos de classes do Fomantic em todas as páginas administrativas.

  • Garantir paridade bilíngue (pt-br e en) em todos os componentes tocados.

• CA-D2 (Pipeline e Homologação):

  • Rodar ./c2f project:update-all [REDACTED] --confirmar-remoto.

  • Validar visualmente no navegador em [REDACTED].

3. Live Todo List do Master Integrador

No Core (conn2flow):

• [ ] Stash / limpeza de arquivos temporários da branch main.

• [ ] git merge feat/req-222 (forms, menus, galerias, cookies).

• [ ] git merge feat/req-223 (admin-ia, arquivos, atualizações, environment, plugins, variáveis).

• [ ] git merge feat/req-224 (usuários, perfis, módulos).

• [ ] Dashboard: Ajustar hierarquia (Título -> Abas), remover subtítulos redundantes na aba widgets e criar menu dropdown "Opções".

• [ ] Dashboard: Alinhar tooltip da alça da esquerda para a direita (bottom left) com z-index alto.

• [ ] Dashboard: Remover imagem duplicada; fixar capa única com alturas de 11rem (M) e 14.5rem (G).

• [ ] Dashboard: Implementar Modo de Edição (toggle de controles de resize/drag) e seletor com registro alvo de widgets.

• [ ] Rodar testes unitários Vitest e PHPUnit no Core.

No Site (conn2flow-site):

• [ ] Criar branch feat/req-101 (worktree conn2flow-site-req101).

• [ ] Migrar telas de social-connections, social-apps, host-manager e 3d-catalog para Tailwind.

• [ ] Rodar testes do site (npm test).

Fechamento Integrado:

• [ ] Executar ./c2f project:update-all [REDACTED] --confirmar-remoto.

• [ ] Validar e registrar os relatórios em sdd/implementation/BATCH-245.md (Core) e sdd/implementation/website/batch-095.md (Site).