req-037: Painel Auxiliar de Formatação Visual (Tailwind UI Helper)

Este documento detalha o novo painel de formatação visual anexado ao editor rápido de classes Tailwind CSS (#html-editor-tailwind-styler) para facilitar o design sem necessidade de digitação de classes.

1. Requisitos do Lote

1.1 Layout do Painel Auxiliar (#html-editor-tailwind-visual-helper)

• O Tailwind CSS styler (#html-editor-tailwind-styler) deve ser estendido para comportar uma estrutura de duas colunas:

  • Coluna da Esquerda (Existente): O editor de texto de classes Tailwind (lista de tags removíveis e input autocomplete).

  • Coluna da Direita (Nova - Visual Helper): O painel de formatação com botões visuais interativos.

• O painel visual deve possuir design limpo, moderno e compacto, integrando-se harmonicamente ao visual-modal.

• Empilhamento Responsivo para Elementos Estreitos: Se o elemento selecionado for muito estreito (ex: largura inferior a 400px), o painel #html-editor-tailwind-styler deve alterar dinamicamente o layout de duas colunas paralelas (lado a lado) para empilhamento vertical (uma abaixo da outra). Isso assegura legibilidade e usabilidade ideais mesmo para elementos pequenos como botões isolados ou ícones.

1.2 Controles Visuais e Mapeamento de Classes Tailwind

O painel visual deve conter botões amigáveis para gerenciar as principais propriedades do elemento selecionado:

• Alinhamento do Texto (Text Alignment):

  • Botões com ícones (Esquerda, Centro, Direita, Justificado).

  • Mapeamento: text-left, text-center, text-right, text-justify (aplicação mutuamente exclusiva).

• Espaçamento Interno (Padding):

  • Botões rápidos (Pequeno, Médio, Grande, Nenhum).

  • Mapeamento: p-2, p-4, p-8 (mutuamente exclusivos; remover outras classes p- aplicadas ao mesmo nó).

• Arredondamento de Bordas (Border Radius):

  • Botões rápidos (Reto, Leve, Médio, Redondo/Círculo).

  • Mapeamento: rounded-none, rounded-sm, rounded-lg, rounded-full (mutuamente exclusivos).

• Cor do Texto (Text Color):

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

  • Mapeamento: text-gray-900, text-gray-500, text-red-600, text-blue-600, text-green-600, text-yellow-500, text-purple-600, text-white (mutuamente exclusivos; remover outras classes text-[cor] aplicadas).

• Cor de Fundo (Background Color):

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

  • Mapeamento: bg-transparent, bg-gray-100, bg-gray-800, bg-red-500, bg-blue-500, bg-green-500, bg-yellow-400, bg-purple-500 (mutuamente exclusivos; remover outras classes bg-[cor] aplicadas).

1.3 Sincronização Bidirecional

• Ao selecionar um elemento, os botões visuais do painel devem refletir o estado atual do elemento. Exemplo: se o elemento possui a classe text-center, o botão de alinhamento centralizado deve aparecer destacado com estado "ativo".

• Ao clicar em qualquer controle visual do painel:

  1. A classe correspondente deve ser adicionada ao elemento selecionado (e as classes conflitantes do mesmo grupo removidas).

  2. A lista de tags de classe na Coluna da Esquerda (Tailwind CSS Styler) deve ser atualizada imediatamente.

  3. Disparar a rotina de sincronização e histórico do DOM (afterDomMutation()).