req-083: Correções de Homologação do Live Editor (Hover, Responsive Preview e Normalização)

Descrição do Problema / Contexto

Esta requisição (BATCH-083) abrange correções pontuais surgidas durante a homologação do BATCH-082 na Editbar do Live Editor:

1. Bug de Hover nos Dropdowns da Toolbar:

   • Problema: Ao mover o mouse do botão acionador (trigger) de um dropdown da toolbar (menu de módulos, Página ou Usuário) para a respectiva caixa de submenu, a caixa sumia intermitentemente. Isso acontecia porque a visibilidade do dropdown era controlada unicamente via CSS (group-hover:block), e a renderização assíncrona do redimensionamento do iframe da toolbar deixava o ponteiro do mouse fora da área do iframe temporariamente, quebrando o hover.

   • Comportamento Esperado: Implementar um mecanismo de atraso (hover-intent) de fechamento (ex: 220ms) controlado por JS, mantendo a visibilidade ativa até que o mouse alcance a área expandida do iframe da toolbar.

2. Visualização Responsiva Fiel (Device Preview):

   • Problema: Os botões de visualização Desktop/Tablet/Mobile alteravam somente a largura do contêiner do layout. Isso impedia que regras de media query CSS (@media), unidades de medida baseadas na viewport (vw/vh) e rotinas de redimensionamento do próprio site respondessem fielmente.

   • Comportamento Esperado: Nos modos Tablet e Mobile, renderizar o site em um iframe dimensionado com a largura correspondente ao dispositivo selecionado. A edição in-place permanecerá ativa em modo Desktop. Em modos Mobile/Tablet, a edição será desabilitada em prol de uma pré-visualização fiel.

3. Normalização de Variáveis e Widgets Digitados Manualmente:

   • Problema: Se o usuário digitasse uma variável (ex: [[pagina#url-raiz]]) ou widget inline manualmente no editor, eles eram salvos literais sem o cerco padrão de arrobas @ exigido pelo banco, impossibilitando a renderização posterior na página.

   • Comportamento Esperado: Ao salvar, normalizar todas as expressões no formato [[recurso]] para o formato correspondente @?\[\[...\]\]@? (idempotente para não duplicar arrobas existentes).

Proposta de Alterações Detalhada

1. Hover Intent nos Dropdowns

• No frontend (dashboard.iframe-toolbar.js):

  • Unificar o comportamento dos dropdowns por meio de um registro genérico (registerHoverDropdown).

  • Aplicar a classe .c2f-dropdown-force-open com atraso de fechamento de 220ms.

  • Capturar o evento window.resize para reajustar a altura quando necessário.

2. Preview de Dispositivo com Viewport Real

• No frontend (dashboard.toolbar.js):

  • Ao selecionar Tablet ou Mobile, criar um iframe contendo o srcdoc preenchido com as tags <link rel=stylesheet>/<style> e o HTML limpo do editor.

  • Desativar a edição durante a exibição em dispositivo responsivo.

  • Retornar ao editor in-place ao redefinir para Desktop.

3. Normalização de Variáveis no Save

• No frontend (dashboard.toolbar.js - reconstructOriginal):

  • Utilizar a expressão regular /@?\[\[([\s\S]+?)\]\]@?/g para envolver expressões no formato original de banco.

Validação e Testes

1. Vitest:

   • Testar a normalização de variáveis e widgets.

2. Visual:

   • Testar os hovers dos menus, alternar os tamanhos de preview e testar a normalização das variáveis digitadas no salvamento.