req-038: Inversão e Expansão do Painel Auxiliar de Formatação Visual (Tailwind UI Helper)

Este documento detalha novas melhorias estruturais e expansão de controles de formatação no editor de classes Tailwind CSS (#html-editor-tailwind-styler).

1. Requisitos do Lote

1.1 Inversão das Colunas do Styler

• O layout do painel #html-editor-tailwind-styler deve ter a ordem de suas duas colunas invertida:

  • Coluna da Esquerda (Nova Posição): O painel de formatação visual (Visual UI Helper).

  • Coluna da Direita (Nova Posição): O editor de texto de classes Tailwind (lista de tags removíveis e input autocomplete).

• A responsividade de empilhamento vertical (quando a largura do elemento selecionado for menor que 400px) deve continuar funcionando normalmente, passando a exibir o Visual UI Helper no topo e a lista de tags/input logo abaixo.

• Deslocamento de Overlays no Posicionamento Inferior: Caso a barra de ferramentas flutuante (#html-editor-floating-toolbar) seja desenhada na borda inferior do elemento selecionado (quando não há espaço no topo), os overlays de navegação (Ancestrais, Filhos e o Styler) devem ser empurrados verticalmente para baixo, sendo renderizados logo abaixo da barra flutuante (e não sob ela).

1.2 Expansão Massiva de Controles Visuais

O painel Visual UI Helper deve expandir significativamente suas propriedades de formatação rápida para abranger um espectro maior de design visual intuitivo. As seguintes propriedades devem ser adicionadas:

1. Tamanho do Texto (Font Size):

   • Controles rápidos (Pequeno, Normal, Grande, Extra Grande).

   • Mapeamento: text-sm, text-base, text-lg, text-xl (mutuamente exclusivos).

2. Espessura do Texto (Font Weight):

   • Controles rápidos (Normal, Médio, Negrito).

   • Mapeamento: font-normal, font-medium, font-bold (mutuamente exclusivos).

3. Margem Externa (Margin):

   • Controles rápidos (Nenhuma, Pequena, Média, Grande).

   • Mapeamento: m-0, m-2, m-4, m-8 (mutuamente exclusivos; limpar outras classes m- no elemento).

4. Espessura da Borda (Border Width):

   • Controles rápidos (Nenhuma, Fina, Média, Grossa).

   • Mapeamento: border-0, border, border-2, border-4 (mutuamente exclusivos; limpar outras classes border-[largura]).

5. Cor da Borda (Border Color):

   • Mini paleta de botões circulares coloridos (Transparente, Cinza, Vermelho, Azul, Verde, Amarelo, Roxo, Preto).

   • Mapeamento: border-transparent, border-gray-300, border-red-500, border-blue-500, border-green-500, border-yellow-400, border-purple-500, border-black (mutuamente exclusivos; limpar outras classes de cor de borda).

6. Opacidade (Opacity):

   • Controles rápidos (100%, 75%, 50%, 25%).

   • Mapeamento: opacity-100, opacity-75, opacity-50, opacity-25 (mutuamente exclusivos).

7. Exibição / Layout (Display):

   • Controles rápidos (Block, Inline-Block, Flex, Grid).

   • Mapeamento: block, inline-block, flex, grid (mutuamente exclusivos).

1.3 Sincronização e Limpeza Estendida

• A lógica de remoção inteligente de classes conflitantes (applyHelperClass()) deve ser estendida para suportar as novas propriedades (limpando classes de tamanho de fonte, peso de fonte, opacidade, display, margem e bordas conflitantes).

• A sincronização bidirecional (syncHelperButtons()) deve marcar a classe .active em todos os novos botões correspondentes ao carregar ou atualizar a seleção do elemento.