Human Request: Ajuste das Variáveis sem Arrobas, Correção da Simulação e Atualização com Debounce (req-009)

Esta especificação detalha as correções nos delimitadores das variáveis globais e de templates (removendo os arrobas @@ na exibição do painel adm, editor HTML e mapeamento de…

Esta especificação detalha as correções nos delimitadores das variáveis globais e de templates (removendo os arrobas @@ na exibição do painel adm, editor HTML e mapeamento de variáveis), ajustes na regex de simulação de destaques, atualização sincronizada da aba de variáveis do editor ao alterar o mapeamento, e a implementação de atualização automática da pré-visualização e do editor com debounce ao modificar qualquer campo de configuração do Destaque.

Detalhes das Correções e Ajustes Solicitados

1. Formatação das Variáveis no Painel Administrativo e Mapeamento (Sem Arrobas)

Regra Geral:
- No banco de dados e na renderização final do site pelo gestor (gestor.php), as variáveis mantêm os arrobas: @[[VARS]]@.
- No painel administrativo, editor HTML, mapeamento de variáveis e textos explicativos do admin, as variáveis devem ser exibidas sem os arrobas: [[VARS]] (ou [[item#NOME]] para destaques).
- O backend faz o controle dos delimitadores via variáveis globais do gestor:
- $open = @[[ (abertura no banco)
- $close = ]]@ (fechamento no banco)
- $openText = [[ (abertura no painel adm)
- $closeText = ]] (fechamento no painel adm)
Ajustes:
- No Javascript (publisher-highlights.js):
- Na função renderItemVars(), alterar a renderização do texto do botão da variável do modelo para remover os arrobas: usar [[item# + v.id + ]] (em vez de @[[item#...]]@).
- Na função renderLinkedVars(), alterar a renderização do texto das variáveis vinculadas exibidas na coluna da direita para usar [[item# + varName + ]].
- Nas Páginas HTML de Adicionar, Editar e Clonar:
- Nos arquivos físicos de páginas de idiomas (pt-br e en) localizados em gestor/modulos/publisher-highlights/resources/[idioma]/pages/publisher-highlights-[adicionar/editar/clonar]/:
  - Substituir todas as ocorrências de textos estáticos explicativos e cabeçalhos que exibem @[[item#...]]@ ou @[[item#nome_da_variavel]]@ para o formato sem arrobas [[item#...]] e [[item#nome_da_variavel]].
- Compilação:
- Após alterar os HTMLs físicos das páginas, atualizar as sementes do banco de dados executando a compilação do Core para sincronizar o arquivo gestor/db/data/PaginasData.json e o banco de dados local.

2. Correção na Substituição e Regex de Simulação do Highlights (`[[item#...]]`)

Problema: A simulação de destaques no iframe do preview não substitui variáveis de modelo (título, resumo, imagem, url, etc.), pois a regex de busca interna do simulador espera que o HTML no editor contenha arrobas (/@\[\[item#([a-zA-Z0-9_\-]+)\]\]@/g). Como o editor exibe o HTML limpo sem arrobas ([[item#NOME]]), o casamento falha.
Ajuste:
- Em gestor/assets/interface/html-editor-interface.js, na função de simulação do alvo publisher-highlights (publisherVariablesOrSimulation):
- Alterar a regex de substituição das variáveis de item para não esperar arrobas: usar /\[\[item#([a-zA-Z0-9_\-]+)\]\]/g.
- Garantir que os placeholders do editor como [[item#titulo]], [[item#resumo]], etc. sejam capturados, mapeados usando o variable_mapping do fields_schema e substituídos pelos dados simulados (textos, imagens picsum, URLs e datas fictícias).

3. Sincronização Dinâmica do Mapeamento de Variáveis com a Aba do Editor

Problema: Ao associar ou remover um vínculo no Mapeamento de Variáveis, a lista de variáveis do editor HTML (a aba lateral ou o modal de variáveis) não atualiza seu estado atual de mapeamento e a aba de pré-visualização não reflete a modificação imediatamente.
Ajuste:
- Sempre que ocorrer um evento de mapeamento (vincular uma variável a um campo ou clicar no ícone "x" para remover o vínculo) em publisher-highlights.js:
- Disparar a sincronização das variáveis do editor chamando a função global exposta pelo editor window.publisher_highlights_update_target_variables(vars) passando as variáveis atualmente definidas.
- Sincronizar o estado do JSON de mapeamento e disparar a atualização automática da pré-visualização e do editor.

4. Atualização Automática Global via Debounce

Problema: O usuário precisa que qualquer alteração de configuração na página atualize o preview de forma dinâmica, mas sem sobrecarregar o servidor com chamadas AJAX consecutivas rápidas enquanto ele digita ou faz seleções consecutivas.
Ajuste:
- Em publisher-highlights.js, escutar as alterações nos seguintes elementos de controle e inputs:
- Modelo Visual de Destaque (seleção de modelo #template_id).
- Regra de Curadoria (alimentação #rule, quantidade máxima #count, ordenação #order_by, e itens selecionados no dropdown manual #selected_items).
- Mapeamento de Variáveis (vinculados e desvinculados).
- Demais campos de texto e formulário relevantes.
- Ao detectar qualquer alteração, acionar a rotina de renderização dinâmica da pré-visualização (iframe de visualização via AJAX widget-preview) e do editor HTML.
- Mecanismo de Debounce:
- Implementar um timer de debounce (ex: 250ms ou 500ms) no disparo do AJAX de preview para garantir que, se o usuário alterar várias opções rapidamente ou digitar um valor de quantidade/título, apenas a última alteração dispare a chamada de rede ao servidor após a pausa do usuário.

# Human Request: Ajuste das Variáveis sem Arrobas, Correção da Simulação e Atualização com Debounce (req-009)
Esta especificação detalha as correções nos delimitadores das variáveis globais e de templates (removendo os arrobas `@@` na exibição do painel adm, editor HTML e mapeamento de variáveis), ajustes na regex de simulação de destaques, atualização sincronizada da aba de variáveis do editor ao alterar o mapeamento, e a implementação de atualização automática da pré-visualização e do editor com debounce ao modificar qualquer campo de configuração do Destaque.
---
## Detalhes das Correções e Ajustes Solicitados
### 1. Formatação das Variáveis no Painel Administrativo e Mapeamento (Sem Arrobas)
* **Regra Geral**:
  * No banco de dados e na renderização final do site pelo gestor (`gestor.php`), as variáveis mantêm os arrobas: `@[[VARS]]@`.
  * No painel administrativo, editor HTML, mapeamento de variáveis e textos explicativos do admin, as variáveis devem ser exibidas sem os arrobas: `[[VARS]]` (ou `[[item#NOME]]` para destaques).
  * O backend faz o controle dos delimitadores via variáveis globais do gestor:
    * `$open` = `@[[` (abertura no banco)
    * `$close` = `]]@` (fechamento no banco)
    * `$openText` = `[[` (abertura no painel adm)
    * `$closeText` = `]]` (fechamento no painel adm)
* **Ajustes**:
  * **No Javascript (`publisher-highlights.js`)**:
    * Na função `renderItemVars()`, alterar a renderização do texto do botão da variável do modelo para remover os arrobas: usar `[[item#` + v.id + `]]` (em vez de `@[[item#...]]@`).
    * Na função `renderLinkedVars()`, alterar a renderização do texto das variáveis vinculadas exibidas na coluna da direita para usar `[[item#` + varName + `]]`.
  * **Nas Páginas HTML de Adicionar, Editar e Clonar**:
    * Nos arquivos físicos de páginas de idiomas (`pt-br` e `en`) localizados em `gestor/modulos/publisher-highlights/resources/[idioma]/pages/publisher-highlights-[adicionar/editar/clonar]/`:
      * Substituir todas as ocorrências de textos estáticos explicativos e cabeçalhos que exibem `@[[item#...]]@` ou `@[[item#nome_da_variavel]]@` para o formato sem arrobas `[[item#...]]` e `[[item#nome_da_variavel]]`.
  * **Compilação**:
    * Após alterar os HTMLs físicos das páginas, atualizar as sementes do banco de dados executando a compilação do Core para sincronizar o arquivo `gestor/db/data/PaginasData.json` e o banco de dados local.
---
### 2. Correção na Substituição e Regex de Simulação do Highlights (`[[item#...]]`)
* **Problema**: A simulação de destaques no iframe do preview não substitui variáveis de modelo (título, resumo, imagem, url, etc.), pois a regex de busca interna do simulador espera que o HTML no editor contenha arrobas (`/@\[\[item#([a-zA-Z0-9_\-]+)\]\]@/g`). Como o editor exibe o HTML limpo sem arrobas (`[[item#NOME]]`), o casamento falha.
* **Ajuste**:
  * Em `gestor/assets/interface/html-editor-interface.js`, na função de simulação do alvo `publisher-highlights` (`publisherVariablesOrSimulation`):
    * Alterar a regex de substituição das variáveis de item para não esperar arrobas: usar `/\[\[item#([a-zA-Z0-9_\-]+)\]\]/g`.
    * Garantir que os placeholders do editor como `[[item#titulo]]`, `[[item#resumo]]`, etc. sejam capturados, mapeados usando o `variable_mapping` do `fields_schema` e substituídos pelos dados simulados (textos, imagens picsum, URLs e datas fictícias).
---
### 3. Sincronização Dinâmica do Mapeamento de Variáveis com a Aba do Editor
* **Problema**: Ao associar ou remover um vínculo no Mapeamento de Variáveis, a lista de variáveis do editor HTML (a aba lateral ou o modal de variáveis) não atualiza seu estado atual de mapeamento e a aba de pré-visualização não reflete a modificação imediatamente.
* **Ajuste**:
  * Sempre que ocorrer um evento de mapeamento (vincular uma variável a um campo ou clicar no ícone "x" para remover o vínculo) em `publisher-highlights.js`:
    * Disparar a sincronização das variáveis do editor chamando a função global exposta pelo editor `window.publisher_highlights_update_target_variables(vars)` passando as variáveis atualmente definidas.
    * Sincronizar o estado do JSON de mapeamento e disparar a atualização automática da pré-visualização e do editor.
---
### 4. Atualização Automática Global via Debounce
* **Problema**: O usuário precisa que qualquer alteração de configuração na página atualize o preview de forma dinâmica, mas sem sobrecarregar o servidor com chamadas AJAX consecutivas rápidas enquanto ele digita ou faz seleções consecutivas.
* **Ajuste**:
  * Em `publisher-highlights.js`, escutar as alterações nos seguintes elementos de controle e inputs:
    * `Modelo Visual de Destaque` (seleção de modelo `#template_id`).
    * `Regra de Curadoria` (alimentação `#rule`, quantidade máxima `#count`, ordenação `#order_by`, e itens selecionados no dropdown manual `#selected_items`).
    * `Mapeamento de Variáveis` (vinculados e desvinculados).
    * Demais campos de texto e formulário relevantes.
  * Ao detectar qualquer alteração, acionar a rotina de renderização dinâmica da pré-visualização (iframe de visualização via AJAX `widget-preview`) e do editor HTML.
  * **Mecanismo de Debounce**:
    * Implementar um timer de debounce (ex: 250ms ou 500ms) no disparo do AJAX de preview para garantir que, se o usuário alterar várias opções rapidamente ou digitar um valor de quantidade/título, apenas a última alteração dispare a chamada de rede ao servidor após a pausa do usuário.