Human Request: Correções no Menus e Lógica do Módulo de Galerias (req-019)

Esta especificação define o lote de trabalho req-019 (BATCH-019) para o Engenheiro Executor. O foco é corrigir problemas de design e layout reportados no módulo de menus, implementar o suporte a target em links personalizados, divisor visual nos separadores, a correção de resolução de imagens no módulo galleries, controles de carrossel (setas, dot pagination, autoplay) e a lógica de script dinâmico dos widgets públicos (menus.widget.js e galleries.widget.js).

1. Módulo de Menus

1.1 Interface de Criação e Edição (HTML / JS / PHP)

• Espaçamento: Adicionar espaçamento de margin-top: 1rem; no contêiner do botão #btn-add-item-wrapper em todos os formulários (menus-adicionar.html, menus-editar.html, menus-clonar.html em pt-br e en) para evitar que fique colado na caixa de ordenação do publicador.

• Alvo de Link Personalizado (target):

  • Adicionar o campo dropdown de seleção de target (#custom-target) contendo as opções _self (Mesma janela) e _blank (Nova aba).

  • Exibir o campo alvo (#field-custom-target) condicionalmente apenas quando o tipo selecionado for link-custom.

  • Sincronizar o estado de salvamento desse campo no schema selected_items para itens do tipo link-custom.

  • Suportar a edição inline deste campo na árvore visual (dropdown edit-target).

• Rótulo no Separador:

  • Exibir o campo de Rótulo do Menu (#field-custom-label) quando o tipo selecionado for separador para permitir títulos ou textos divisores opcionais.

  • Sincronizar o estado e permitir a edição inline deste rótulo na árvore visual.

• Mapeamento de Variáveis:

  • Adicionar a variável target à função menus_variaveis_template() em menus.php.

1.2 Widget Renderer e Templates (menus.widget.php & Templates)

• Novo Delimitador item-separator:

  • Em menus.widget.php, extrair o bloco item_separator a partir da tag <!-- item-separator < --> ... <!-- item-separator > -->.

  • Na recursão menus_render_level(), se o item for do tipo separador e o template definir item_separator, renderizar este bloco (passando variáveis como [[item#label]]). Caso não exista o delimitador, cair no fallback anterior.

• Resolução de Link Target:

  • Repassar a variável [[item#target]] ao renderizar os links de item e item-parent em menus.widget.php (padrão _self para páginas e links, vazio para separadores).

  • Atualizar todos os 12 templates para incluir target="@[[item#target]]@" nas tags de link <a>.

• Bloco Separador nos Templates:

  • Incluir a marcação do divisor físico <!-- item-separator < --> ... <!-- item-separator > --> em todos os 12 templates, formatados conforme cada layout (ex: <hr class="border-t border-gray-200 my-1"> em dropdown/sidebar ou uma barra/espaçador em menus horizontais).

• Ajustes Visuais de Layout:

  • menus-horizontal-navbar: Aumentar o espaçamento horizontal no ul de gap-6 para gap-8.

  • menus-mobile-hamburguer: Trocar a lógica do checkbox toggle peer por um botão interativo .menu-mobile-btn e adicionar a classe .menu-mobile-list na lista ul de itens para controle no JavaScript do widget.

  • menus-footer-colunas: Substituir a tag <span> do título do bloco item-parent por uma tag <a> com href="@[[item#url]]@" e target="@[[item#target]]@", permitindo cliques no elemento pai que possui URL.

  • menus-dropdown: Adicionar a classe .group-hover-sub-trigger no li do item-parent e .group-hover-sub-menu no ul do submenu para fallback de exibição manual.

1.3 JavaScript do Widget (menus.widget.js)

• Hamburger Menu: Adicionar listener de clique em .menu-mobile-btn que alterna a exibição (classes hidden / flex) da lista .menu-mobile-list correspondente.

• Dropdown Hover Fallback: Implementar detecção de mouseenter/mouseleave em .group-hover-sub-trigger que alterna a exibição (classes hidden / block) do submenu .group-hover-sub-menu adjacente, prevenindo falhas caso named groups do Tailwind CSS não sejam suportados no ambiente de destino.

2. Módulo de Galerias de Imagens

2.1 Interface Administrativa (HTML / JS)

• Parâmetros dos Controles:

  • Nos formulários (galleries-adicionar.html, galleries-editar.html, galleries-clonar.html em pt-br e en), adicionar os campos de configurações de controle:

  • Exibir Setas (show_arrows - checkbox, padrão ativo).

  • Exibir Pontinhos (show_dots - checkbox, padrão ativo).

  • Slide Automático (autoplay - checkbox, padrão inativo).

  • Tempo de Transição (autoplay_speed - input numérico, padrão 3000ms, mínimo 500ms).

  • Loop Infinito (loop - checkbox, padrão ativo).

  • Hidratar esses campos a partir do schema e incluí-los na serialização e preview do snapshot em galleries.js.

2.2 Resolução e Renderização Pública (galleries.widget.php)

• Resolução da Imagem Original:

  • Em galleries_widget_resolver_item_vars(), priorizar o campo caminho (original) sobre imgSrc (thumbnail) para montar o endereço da imagem pública img-src, prefixando com a url-raiz caso seja relativo. O imgSrc continua sendo usado no painel de controle (thumbnails leves).

• Parâmetros de Controle no DOM:

  • Injetar no elemento de contêiner principal da galeria atributos de dados contendo os valores parametrizados (ex: data-autoplay="true" data-speed="3000" data-loop="true").

• Controles Dinâmicos no Widget:

  • Em galleries.widget.php, processar as regiões de controles dinâmicos:

  • <!-- controls-arrows < --> ... <!-- controls-arrows > -->: Renderizado apenas se show_arrows for verdadeiro.

  • <!-- controls-dots < --> ... <!-- controls-dots > -->: Renderizado apenas se show_dots for verdadeiro.

  • <!-- dot-item < --> ... <!-- dot-item > -->: Repetido para cada imagem no lote de curadoria, injetando [[dot#index]] (0, 1, 2, ...).

2.3 Templates de Galerias (galleries-carousel & galleries-slider)

• Modificações de Estrutura:

  • Adicionar os delimitadores condicionais de setas e dots nos templates deslizantes.

  • Adicionar classes identificadoras para a interação com o script JS (ex: .conn2flow-gallery, .gallery-slides-wrapper, .gallery-slide, .gallery-prev, .gallery-next, .gallery-dots, .gallery-dot).

2.4 JavaScript do Widget (galleries.widget.js)

• Comportamento Interativo:

  • Para cada .conn2flow-gallery com múltiplos itens, inicializar a lógica do carrossel/slider:

  • Ler as propriedades data-autoplay, data-speed, data-loop no contêiner.

  • Implementar a navegação suave alterando o scrollLeft do .gallery-slides-wrapper via animação jQuery .animate({ scrollLeft: ... }).

  • Tratar cliques nas setas .gallery-next e .gallery-prev (fazendo wrap/loop se configurado).

  • Tratar cliques nos dots .gallery-dot, sincronizando o slide e a classe ativa do pontinho.

  • Implementar e gerenciar o timer de auto-play (setInterval), limpando e reiniciando a contagem sempre que houver intervenção manual do usuário.

3. Simulação no Editor HTML (html-editor-interface.js)

• Menus:

  • Atualizar o mock MENUS_SIM_FALLBACK para incluir exemplos de links customizados com targets (_blank) e separadores com/sem rótulos.

  • Espelhar no parser de simulação a lógica do bloco item-separator e da variável [[item#target]].

• Galerias:

  • Atualizar o parser de simulação para galleries para suportar os delimitadores de setas, dots e dot-items mockados.

4. Alvos de IA, Prompts de Modo, Variáveis Globais e Modos de IA

4.1 Registro do Alvo de IA em Galerias

• Modificação em galleries.json:

  • Adicionar o bloco de configuração ai_prompts_targets e ai_modes para ambos os idiomas pt-br e en.

  • O alvo deve possuir id: "galleries" e nome correspondente (Galerias em português, Galleries em inglês).

  • O modo padrão (ai_modes) deve possuir id: "galleries", target: "galleries", default: true, version: "1.0" e checksum vazio.

4.2 Criação e Atualização dos Prompts do Modo de IA

• Arquivos do Prompt de Galerias [NEW]:

  • Criar os arquivos de prompt do modo galleries.md em:

  • galleries.md (pt-br)

  • galleries.md (en)

  • O prompt deve instruir a IA a gerar templates de carrossel, slider e grade contendo:

  • Bloco de repetição obrigatória para cada imagem: <!-- item < --> ... <!-- item > -->.

  • Bloco condicional para setas: <!-- controls-arrows < --> ... <!-- controls-arrows > -->.

  • Bloco condicional para pontinhos de paginação: <!-- controls-dots < --> ... <!-- controls-dots > -->.

  • Bloco de repetição de dots: <!-- dot-item < --> ... <!-- dot-item > --> contendo os atributos data-index="[[dot#index]]" e a classe ativa [[dot#active-class]].

  • Atributos do contêiner principal para autoplay e loop: data-autoplay="[[autoplay]]", data-speed="[[autoplay_speed]]", data-loop="[[loop]]".

  • Bloco condicional para galeria vazia: <!-- no-item < --> ... <!-- no-item > -->.

  • Lista de variáveis disponíveis: [[item#img-src]], [[item#caminho]], [[item#nome]], [[item#legenda]], e as globais [[show_arrows]], [[show_dots]], [[autoplay]], [[autoplay_speed]], [[loop]].

• Arquivos do Prompt de Menus [MODIFY]:

  • Atualizar os arquivos de prompt do modo menus.md em:

  • menus.md (pt-br)

  • menus.md (en)

  • Incluir as variáveis mais recentes na listagem: [[item#css_classes]], [[item#children]] e [[item#target]].

  • Explicar como usar [[item#target]] nas tags de link <a> (target="[[item#target]]").

  • Explicar o bloco de repetição recursiva [[item#children]] para submenus aninhados em <!-- item-parent < --> ... <!-- item-parent > -->.

  • Explicar o bloco de divisor/separador de menu <!-- item-separator < --> ... <!-- item-separator > --> que pode renderizar opcionalmente o rótulo do separador usando [[item#label]].

4.3 Diferenciação de Variáveis Globais vs Itens no Editor HTML

• Registros em galleries.php:

  • Atualizar galleries_variaveis_template() para retornar as variáveis de controle adicionando a flag 'global' => true:

  • Array('id' => 'show_arrows', 'global' => true)

  • Array('id' => 'show_dots', 'global' => true)

  • Array('id' => 'autoplay', 'global' => true)

  • Array('id' => 'autoplay_speed', 'global' => true)

  • Array('id' => 'loop', 'global' => true)

  • Manter as variáveis de item (img-src, caminho, nome, legenda) sem a flag global.

• Mapeamento em html-editor.php:

  • Na função html_editor_publisher_controls(), processar cada variável de target_variables. Se a flag global for verdadeira, definir a string da variável no template_map como [[var_id]] (sem o prefixo item#). Caso contrário, manter [[item#var_id]].

• Substituição de Variáveis no AJAX de IA (html-editor.php):

  • Na função html_editor_ajax_ia_requests(), adicionar no switch de $target os casos para menus e galleries de modo a popular a marcação {{variables}} com a listagem exata de suas variáveis de template correspondentes (itens e globais/controles), garantindo que a IA receba a lista de placeholders válidos.

4.4 Resolução de Variáveis no Widget de Galerias (galleries.widget.php)

• Substituição Global de Variáveis:

  • No renderizador público (galleries_widget_render_inline), após renderizar os itens e montar o HTML base, realizar a substituição de todas as variáveis globais de controle no HTML resultante:

  • [[show_arrows]] / @[[show_arrows]]@ -> ($schema['show_arrows'] ?? true) ? 'true' : 'false'

  • [[show_dots]] / @[[show_dots]]@ -> ($schema['show_dots'] ?? true) ? 'true' : 'false'

  • [[autoplay]] / @[[autoplay]]@ -> ($schema['autoplay'] ?? false) ? 'true' : 'false'

  • [[autoplay_speed]] / @[[autoplay_speed]]@ -> (int)($schema['autoplay_speed'] ?? 3000)

  • [[loop]] / @[[loop]]@ -> ($schema['loop'] ?? true) ? 'true' : 'false'

5. Regras e Versionamento

• RECURSOS: Executar a rotina de atualização de recursos (atualizacao-dados-recursos.php) para registrar novos templates, componentes de simulação, alvos/modos de IA e variáveis no banco.

• RESTRIÇÃO: Sem commits ou pushes automáticos no Git; as alterações permanecem locais no executor.