req-035: Refinamentos e Ajustes no Editor HTML Visual

Este documento formaliza as melhorias de interface e navegabilidade do DOM no Editor HTML Visual pós-validação do BATCH-034.

1. Requisitos do Lote

1.1 Ancoragem da Barra de Ferramentas Flutuante (#html-editor-floating-toolbar)

• A barra de ferramentas flutuante (#html-editor-floating-toolbar) deve ser ancorada na borda direita da caixa do elemento selecionado (em vez da borda esquerda).

• O comportamento vertical existente (exibição acima ou abaixo do elemento selecionado, dependendo da viewport/scroll) deve ser mantido, apenas deslocando a coordenada left para se alinhar ao canto direito do contêiner ativo (rect.right - toolbar.offsetWidth).

1.2 Novo Seletor de Elementos Filhos e Ajuste de Empilhamento

Para facilitar a seleção de elementos internos menores ou difíceis de mirar (como tags <img> e links <a> aninhados dentro de blocos complexos), deve ser implementada uma barra adicional para seleção de descendentes diretos (filhos).

• Identificação por Rótulos (Labels):

  • O breadcrumb de ancestrais (#html-editor-selection-breadcrumb) passa a ter o label prefixado "Ancestrais:" do lado esquerdo.

  • O novo seletor de filhos deve ter o label prefixado "Filhos:" do lado esquerdo.

• Formato do Seletor de Filhos:

  • Exibe uma lista horizontal contendo os filhos diretos do elemento ativo (element.children) que sejam editáveis (ou seja, não ignorados/pertencentes ao editor).

  • O separador visual entre os filhos na lista deve ser uma barra | (em vez de >).

  • O fundo do contêiner de filhos deve ser ligeiramente mais claro do que o de ancestrais para fornecer contraste visual (ex: se o de ancestrais é #111827, o de filhos pode ser #1f2937 ou similar).

  • Hover sobre um filho na lista deve acionar o hover overlay sobre o elemento correspondente no iframe.

  • Clique em um filho seleciona-o diretamente, transferindo o estado ativo e os controles a ele.

  • Se o elemento selecionado não tiver filhos editáveis, a barra de filhos deve ficar oculta.

• Empilhamento de Elementos de Suporte (Ordem Vertical):

  • Os elementos adicionais devem ser renderizados abaixo do overlay de seleção no iframe, empilhados de cima para baixo sem sobreposição:

    1. Ancestrais (breadcrumb legado): diretamente abaixo do elemento.

    2. Filhos (novo breadcrumb): logo abaixo de ancestrais.

    3. Classes Tailwind (Tailwind styler): logo abaixo de filhos.

  • A lógica de reposicionamento/redesenho deve somar a altura (offsetHeight) de cada elemento exibido para calcular o topo do elemento seguinte.

1.3 Destacamento Visual no Hover dos Breadcrumbs (Ancestrais e Filhos)

• Quando o usuário passar o mouse sobre qualquer link/item no breadcrumb de Ancestrais ou no seletor de Filhos, o respectivo elemento físico no preview do iframe deve ser contornado com um destaque temporário.

• Estilo do Destaque:

  • Deve ser uma caixa tracejada (dashed), usando a mesma cor/tom roxo do contorno de seleção (selection-overlay), diferenciando-se do hover padrão azul.

  • Para isso, pode ser criado um terceiro overlay específico (ex: #html-editor-breadcrumb-hover-overlay) ou redefinido dinamicamente um estilo temporário no hover overlay.

• O hover normal no preview do iframe (que desenha uma caixa azul tracejada ao passar o mouse diretamente sobre os elementos) deve continuar funcionando de forma independente e sem alterações.