req-106: Painel Flutuante de Opções de Exibição, Sidebar Lateral de CSS, Barra Superior de Navegação e Ação Substituir no Editor Visual

Descrição do Problema / Contexto

Esta requisição (BATCH-106) reformula a experiência de estilização e navegação visual do Editor HTML (tanto na Editbar/Dashboard Site Toolbar quanto nos editores visuais dos módulos administrativos como /admin-paginas/).

Atualmente, o html-editor-tailwind-styler, o html-editor-selection-breadcrumb e o html-editor-selection-children acompanham flutuando o elemento selecionado na tela, o que polui a visualização. Além disso, faltavam recursos de substituição direta na área de transferência e suporte expandido a classes e valores manuais de CSS.

Proposta de Alterações Detalhada

1. Novo Painel Flutuante de Opções de Exibição (c2f-view-options-panel)

• Botão Acionador (c2f-tb-view-options):

  • Adicionar o botão "Opções de Exibição" na Editbar (c2f-toolbar-editbar) e no editor dos módulos.

• Painel Flutuante:

  • Seguir o mesmo padrão visual do c2f-add-panel (painel "+").

  • Conter seletores do tipo toggle (liga/desliga) com os nomes explícitos:

  • Sidebar Lateral de CSS (desativado por padrão).

  • Barra de Navegação de Elementos (desativado por padrão).

2. Sidebar Lateral Fixa de CSS (c2f-he-css-sidebar)

• Relocalização & Cabeçalho Fixo:

  • Relocalizar a caixa de estilização de modo flutuante para uma Sidebar Lateral Fixa à esquerda (c2f-he-css-sidebar), com largura de ~200px a 250px e altura útil de 100% da viewport.

  • Adicionar um cabeçalho fixo no topo da sidebar com o rótulo "Sidebar Lateral de CSS" para identificação visual imediata.

  • Por padrão nasce desativada, sendo ativada via toggle no Painel de Opções de Exibição.

  • Encaixa-se perfeitamente abaixo da Barra Superior de Navegação de Elementos, sem sobreposições.

• Expansão de Funcionalidades de Estilo e Classes:

  • Classes Tailwind Ativas: Listar as classes utilitárias do Tailwind no elemento (class="..."), com opção de remover ou adicionar novas.

  • Expansão do Datalist (tailwindSuggestions / html-editor-tw-classes): Expandir significativamente o dicionário de sugestões de classes Tailwind CSS (incluindo flexbox, grid, tamanhos, espaçamentos, bordas, sombras, opacidade e sintaxe de colchetes arbitrários como w-[350px] e bg-[#1a2b3c]).

  • Classes Customizadas: Seção dedicada para classes personalizadas do projeto (não-Tailwind) presentes no elemento.

  • Valores Manuais e Digitais no he-styler-col-visual: Expandir a coluna de estilização para aceitar a digitação manual de valores digitais/customizados (ex.: 25px, 1.5rem, #123456), além dos botões pré-definidos do Tailwind.

  • Campo de CSS Inline Customizado: Campo textual para inserção/edição direta de regras de estilo inline (style="...").

3. Barra Superior Fixa de Navegação de Elementos (c2f-he-element-navbar)

• Relocalização:

  • Relocalizar o html-editor-selection-breadcrumb (trilha de pais) e o html-editor-selection-children (filhos) para uma Barra Superior Fixa (c2f-he-element-navbar), posicionada diretamente abaixo da Editbar principal (c2f-toolbar-editbar), com largura 100% e altura de 40px a 50px.

• Layout em Duas Colunas (20% / 80%):

  • Coluna Esquerda (20%): Rótulo fixo "Barra de Navegação de Elementos".

  • Coluna Direita (80%): Área útil onde residem o breadcrumb e a lista de botões dos elementos filhos.

• Comportamento:

  • Desativada por padrão, ativada via toggle no Painel de Opções de Exibição.

4. Toolbar Flutuante Contextual (html-editor-floating-toolbar) e Ação "Substituir"

• O toolbar flutuante contextual continua flutuando e acompanhando o elemento selecionado no canvas.

• Nova Ação "Substituir" (.he-tb-replace):

  • Adicionar a opção "Substituir" ao lado dos botões de Copiar e Colar.

  • Comportamento: Substitui o elemento selecionado no canvas pelo objeto armazenado na memória da área de transferência (c2f-he-clipboard).

  • Seleção Automática: Após a substituição, selecionar automaticamente o novo objeto colado no editor.

5. Sugestões de MelhoriasPropostas pelo Assistente

1. Autocomplete de Classes com Filtro Instantâneo: Busca rápida na Sidebar CSS com filtro em tempo real conectado ao datalist expandido de classes Tailwind.

2. Filtro por Pseudoclasse e Breakpoint: Organização visual agrupando classes por breakpoint (sm:, md:, lg:) ou estado (hover:, focus:).

3. Inspetor de Estilos Computados: Painel sanfonado na sidebar exibindo valores calculados reais (getComputedStyle()) do elemento selecionado.

Validação e Testes

1. Validação de Sintaxe:

   • php -l nos arquivos PHP alterados.

   • node --check em html-editor.js, html-editor-interface.js, dashboard.toolbar.js e dashboard.iframe-toolbar.js.

2. Suíte de Testes JS (Vitest):

   • Criar testes unitários para a nova ação substituirSelected(), alternância das opções no painel e posicionamento da Sidebar CSS e Barra Superior.

3. Validação Manual e Visual:

   • Testar a ação Substituir: copiar um elemento A, selecionar o elemento B e clicar em Substituir -> verificar se o elemento B foi trocado pelo A e se o novo elemento fica selecionado.

   • Abrir o Painel de Opções de Exibição e testar os toggles da Sidebar de CSS e da Barra de Navegação de Elementos.

   • Na Sidebar de CSS, testar a digitação de valores manuais/digitais, autocomplete de classes Tailwind expandidas e inclusão de CSS inline.