req-095: Tradução Completa da Editbar, Painéis e Overlays do Editor Visual para o Inglês

Descrição do Problema / Contexto

Quando o gestor é acessado em inglês (identificado no frontend pela variável global gestor.language e no backend por $_GESTOR['linguagem-codigo']), vários elementos da interface do Editor Visual (Editbar), painéis de widgets, histórico e alertas permanecem em português. Precisamos garantir a tradução dinâmica ou estática desses elementos para o inglês quando o idioma atual for o inglês (ex: en ou en-us).

Mudanças Necessárias (Repositório conn2flow)

1. Mapeamento e Tradução Dinâmica no Frontend (gestor/assets/interface/html-editor.js)

Garantir que as seguintes strings sejam exibidas em inglês caso gestor.language (no escopo local ou herdado de window.parent.gestor.language) inicie com en:

• Painel IA (#c2f-ai-panel):

  • Título principal: "Assistente IA" → "AI Assistant"

  • Abas: "Prompt", "Modo", "Configuração" → "Prompt", "Mode", "Configuration"

  • Rótulos e placeholders:

  • "Prompt salvo (opcional)" → "Saved prompt (optional)"

  • Botões de ações do prompt: "Novo" → "New", "Salvar" → "Save", "Excluir" → "Delete", "Limpar" → "Clear"

  • "Sua instrução" → "Your instruction"

  • Placeholder da instrução: "Ex.: mude o título para 'Conn2flow AI'..." → "E.g.: change the title to 'Conn2flow AI'..."

  • "Modo" → "Mode"

  • "Prompt do modo (template enviado à IA)" → "Mode prompt (template sent to AI)"

  • "Conexão" → "Connection"

  • "Modelo" → "Model"

  • Botões do rodapé: "Fechar" / "Cancelar" → "Close" / "Cancel"

• Painel de Modelos (#c2f-tpl-panel):

  • Título principal: "Modelos de sessão" → "Session templates"

  • Placeholder de busca: "Buscar modelos..." → "Search templates..."

  • Opções do framework: "CSS puro" → "Pure CSS"

  • Instruções de inserção: "Inserir em relação ao elemento selecionado" → "Insert relative to selected element"

  • Opções de relação: "Substituir" → "Replace", "Inserir antes" → "Insert before", "Inserir depois" → "Insert after"

  • Botão de paginação: "Carregar mais" → "Load more"

  • Botão fechar: "Fechar" → "Close"

• Floating Toolbar (#html-editor-floating-toolbar):

  • Tooltips/títulos dos botões de ação:

  • "Arrastar / Mover" → "Drag / Move"

  • "Duplicar" → "Duplicate"

  • "Copiar (Ctrl+C)" → "Copy (Ctrl+C)"

  • "Colar (Ctrl+V)" → "Paste (Ctrl+V)"

  • "Embrulhar" → "Wrap"

  • "Editar" → "Edit"

  • "Editar widget no módulo" → "Edit widget in module"

  • "Deletar" → "Delete"

  • "Deselecionar (Esc)" → "Deselect (Esc)"

• Breadcrumb de Seleção e Filhos:

  • Rótulo de ancestrais (#html-editor-selection-breadcrumb): "Ancestrais:" → "Ancestors:"

  • Rótulo de filhos (#html-editor-selection-children): "Filhos:" → "Children:"

• Styler do Tailwind (#html-editor-tailwind-styler):

  • Placeholder de classes: "Adicionar classes (espaço/Enter)..." → "Add classes (space/Enter)..."

  • Accordion de seções e títulos definidos em tailwindHelperConfig():

  • Seções: "Texto" → "Text", "Layout" → "Layout" (mantém), "Bordas" → "Borders", "Espaçamento" → "Spacing"

  • Grupos:

    • "Alinhamento" → "Alignment" (opções: "Esquerda", "Centro", "Direita", "Justificado")

    • "Tamanho" → "Size" (opções: "Pequeno", "Normal", "Grande", "Extra grande")

    • "Peso" → "Weight" (opção: "Negrito")

    • "Caixa" → "Case" (opções: "Maiúsculas", "Minúsculas", "Capitalizar")

    • "Decoração" → "Decoration" (opção: "Nenhuma", "Sublinhado", "Riscado")

    • "Cor do texto" → "Text color" (opções: "Preto", "Cinza", "Vermelho", "Azul", "Verde", "Amarelo", "Roxo", "Branco")

    • "Exibição" → "Display" (opções: "Bloco", "Inline", "Flex", "Grid")

    • "Direção" → "Direction" (opções: "Linha", "Coluna")

    • "Alinhamento Justify" → "Justify content"

    • "Alinhamento Items" → "Align items"

    • "Espaço gap" → "Gap"

    • "Margem superior" → "Margin top", "Margem inferior" → "Margin bottom"

    • "Arredondamento" → "Border radius"

    • "Espessura" → "Border width"

    • "Cor da borda" → "Border color"

    • "Cor do fundo" → "Background color"

    • "Imagem de fundo" → "Background image" (botão: " Imagem" → " Image", tooltip: "Selecionar imagem do servidor" → "Select image from server", "Remover imagem de fundo" → "Remove background image")

    • "Opacidade" → "Opacity"

    • "Sombra" → "Shadow"

• Modais e Alertas inline:

  • Botões do modal de edição (.c2f-he-modal-box): "Cancelar" → "Cancel", "Salvar" → "Save"

  • Overlay do Image Picker: Botão "Fechar" → "Close"

  • Mensagens de alerta (window.alert):

  • "O arquivo selecionado não é uma imagem." → "The selected file is not an image."

  • "Selecione um elemento na página primeiro." → "Select an element on the page first."

2. Tradução Dinâmica no Controle da Toolbar e Backups (gestor/modulos/dashboard/dashboard.toolbar.js)

Garantir que as mensagens e painéis gerenciados por este script se adaptem ao idioma inglês (gestor.language === 'en'):

• Painel de Adicionar Elemento (#c2f-add-panel):

  • Cabeçalho HTML: "Elementos HTML" → "HTML Elements"

  • Item de código customizado: "Código Customizado" → "Custom Code"

  • Cabeçalho Widgets: "Widgets" → "Widgets" (mantém)

  • Busca: "Buscar widgets..." → "Search widgets..."

  • Paginação: "Carregar mais" → "Load more"

• Painel de Backups (#c2f-backup-panel):

  • Rótulo de carregamento: "Carregando…" → "Loading..."

  • Mensagem de vazio: "Nenhum backup" → "No backups"

  • Colunas: "Backups da Página" → "Page Backups", "Backups do Layout" → "Layout Backups"

• Mensagens de Alerta e Erro:

  • "Falha ao carregar o editor da página." → "Failed to load the page editor."

  • "Erro ao carregar o editor da página." → "Error loading the page editor."

  • "O editor ainda está carregando. Aguarde um instante e tente salvar novamente." → "The editor is still loading. Wait a moment and try saving again."

  • "Erro ao preparar o salvamento da página." → "Error preparing the page save."

  • "Falha ao restaurar o backup." → "Failed to restore the backup."

3. Tradução Dinâmica no Painel de Inclusão do Pai (gestor/assets/interface/html-editor-visual-controls.js)

Garantir que o painel de inclusão estático renderizado na janela pai também respeite a tradução:

• Títulos: "Elementos HTML" → "HTML Elements", "Widgets do Sistema" → "System Widgets", "Carregando..." → "Loading..."

• Rótulos dos elementos HTML em ELEMENTOS_HTML:

  • "Parágrafo" → "Paragraph"

  • "Título H1" → "Heading H1"

  • "Título H2" → "Heading H2"

  • "Título H3" → "Heading H3"

  • "Imagem" → "Image"

  • "Link" → "Link"

  • "Botão" → "Button"

  • "Bloco" → "Block"

  • "Seção" → "Section"

Validação e Testes

1. Sintaxe Javascript:

   • Garantir que todas as alterações utilizem helpers limpos (ex: funções inline de internacionalização) e não quebrem a execução do script.

2. Testes Unitários:

   • Executar npm run test e garantir que todos os 29 testes continuem passando sem regressões.

3. Validação Visual:

   • Acessar o admin do site com idioma inglês configurado, ativar a Editbar ("Edit Page") e verificar se todos os botões, tooltips, modais, painéis (Add, Backups, Templates, AI Assistant, Breadcrumbs, Tailwind Styler) e alertas estão perfeitamente traduzidos para o inglês, sem exibir nenhum texto em português.