req-161: Eliminação de requisição espúria 404 de `{{thumbnail}}` no carregamento do Editor HTML

• Status do intake: ready-for-intake

• Data: 2026-09-02

• Origem: Relato do operador inspecionando o console do Chrome em admin-paginas/editar/?id=teste-de-pagina-4, onde ocorria um disparo 404 espúrio (editar/?id=teste-de-pagina-4:2789 GET [REDACTED] 404 (Not Found)).

• Classificação: frontend, componentes de UI, padrões HTML5, integridade de recursos

• Batch candidato: BATCH-162

1. Fato Medido

Ao abrir a tela de edição de páginas autenticada ([REDACTED]), o Chrome acusava no console:

editar/?id=teste-de-pagina-4:2789  GET [REDACTED] 404 (Not Found)

Inspecionando os logs de acesso HTTP na VM do Lab ([REDACTED] em /var/log/apache2/domains/[REDACTED].log), a sequência exata de chamadas revelou a causa-raiz:

[02/Sep/2026:22:15:38 +0000] "GET /admin-paginas/editar/?id=teste-de-pagina-4 HTTP/2.0" 200 343440
[02/Sep/2026:22:15:38 +0000] "GET /admin-paginas/editar/%7B%7Bthumbnail%7D%7D HTTP/2.0" 302 0
[02/Sep/2026:22:15:38 +0000] "GET /404 HTTP/2.0" 404 9981

O navegador tentava carregar a imagem com a URL literal {{thumbnail}} (%7B%7Bthumbnail%7D%7D), gerando um 302 do Gestor para /404, que por sua vez retornava 404 Not Found.

2. Diagnóstico

No componente html-editor-modelos (resources/pt-br/components/html-editor-modelos/html-editor-modelos.html e na versão en), o molde de card de modelo estava encapsulado em uma <div> normal:

<div id="modelo-card-template">
    <div class="card modelo-card" data-modelo-id="{{id}}">
        <div class="image">
            <img src="{{thumbnail}}" alt="{{nome}}">
        </div>
        ...
    </div>
</div>

1. Ativação prematura do DOM: Como o contêiner era uma <div> (e não uma tag inerte), o parser de HTML do navegador instanciava a tag <img> imediatamente durante a carga da página.

2. Resolução de URL relativa: Com src="{{thumbnail}}", o navegador resolvia o caminho relativo contra a página ativa (/admin-paginas/editar/), montando /admin-paginas/editar/{{thumbnail}}.

3. Redirecionamento para 404: O roteador do Gestor em gestor/gestor.php (gestor_roteador_301_ou_404) não encontra rota correspondente para {{thumbnail}} e invoca gestor_redirecionar('404'), culminando no erro visível no console.

3. Solução Normativa

No padrão HTML5, conteúdos destinados a template client-side devem ser encapsulados na tag <template>. Os elementos dentro de <template> residem em um DocumentFragment inerte: o navegador não executa scripts, não avalia estilos e não dispara requisições de rede para atributos src de <img> até que o fragmento seja clonado ou consumido.

O código consumidor JavaScript em gestor/assets/interface/html-editor-interface.js:

const template = $('#modelo-card-template').html();

Continua funcionando de forma 100% idêntica, pois a propriedade .innerHTML do elemento <template> retorna a string HTML com os placeholders intactos para interpolação.

4. Escopo Requerido

Módulo 1 — Migração para <template> nos Componentes de Autoria

• Alterar <div id="modelo-card-template"> para <template id="modelo-card-template"> (e o respectivo </template>) em:

  • gestor/resources/pt-br/components/html-editor-modelos/html-editor-modelos.html

  • gestor/resources/en/components/html-editor-modelos/html-editor-modelos.html

Módulo 2 — Sincronização de Recursos

• Executar o pipeline oficial de recursos para atualizar os metadados derivados:

  • php cli/c2f.php resources:sync --force

  • Validar a sincronização de gestor/db/data/ComponentesData.json.

Módulo 3 — Guardas Automatizadas

• Criar/estender teste automatizado (ex: em tests/Unit/JS/html-editor-template-preview.test.js ou teste dedicado) garantindo que:

  1. O seletor #modelo-card-template é uma tag <template> (ou que nenhum <img> com {{...}} exista solto fora de <template>).

  2. $('#modelo-card-template').html() recupera com sucesso a estrutura do card para interpolação de modelos.

• Executar suíte completa: composer test e npx vitest run.

5. Critérios de Aceite

1. Zero requisições espúrias: Abrir [REDACTED] sem nenhum disparo para {{thumbnail}} e sem ocorrência de GET /404 no console de rede.

2. Seleção de Modelos intacta: Ao clicar na aba "Modelos", os cards de templates de página continuam sendo renderizados com suas respectivas miniaturas, nomes e botões de ação funcionais.

3. Testes verdes: 100% de aprovação no PHPUnit e Vitest.