REQ-250 — Linha 3.1, fase 1 da lousa: objetos livres, esconder por largura, imagem de fundo e Google Fonts

• Status: implemented-pending-homologation (relatório em sdd/implementation/BATCH-259.md)

• Modo de Autonomia: autonomo_monitorado

• Lote Alvo Core: BATCH-259 (conn2flow)

• Data de Criação: 2026-10-07

• Origem: pedido direto do Engenheiro Chefe no chat; fase 1 do plano registrado em sdd/implementation/BATCH-258.md.

• Repositório Alvo: Core conn2flow em [REDACTED]

• Linha: 3.1. Branch de trabalho feat/req-250, a partir de origin/3.1; entrega na 3.1. A main e a 3.0 não recebem este lote.

• Ambiente de teste: [REDACTED] (projeto [REDACTED]).

1. Pedido, nas palavras do Engenheiro Chefe

"Bora fazer a implementação da fase 1 do 3.1. O 3.0 é a main hoje, ela que eu vou tentar publicar. E você agora entra na 3.1."

Das mensagens anteriores, sobre a fase 1:

"Criar formas, colocar texto [...] como você fez com os quadrados, você faz com os objetos, que no final vão ser quadrados também. É uma área que vai ter um objeto ali circunscrito. Seja um desenho, seja um ícone, seja qualquer coisa. Então vai dar a responsividade do mesmo jeito. Mas dá a opção também de não aparecer em telas pequenas, ou colocar um limiar ali para a pessoa poder decidir, põe uns três no limiar de largura de tela. [...] A opção de texto também por fontes do Google Fonts. E o título das caixas também poder aplicar a fonte."

"Coloca também imagem, que aí pega do arquivo. [...] A imagem de fundo do widget seria legal. E nessa imagem de fundo também ter controles, além do controle de cor: de opacidade, esse tipo de coisa."

"Chamada para ação como objeto, sim."

2. Escopo

1. Objetos livres na área de widgets, nos dois modos (grade e lousa). Cada objeto é uma caixa como a de um widget: mesma posição em células, mesmo redimensionamento, mesma responsividade. Tipos: texto, forma, imagem (do gerenciador de arquivos), ícone e botão de chamada para ação.

2. Esconder por largura de tela, por widget ou objeto, com três limiares: abaixo de 640, de 1024 ou de 1280 px. No modo de edição o item continua à vista, marcado.

3. Imagem de fundo em widget e objeto, escolhida no gerenciador de arquivos, com opacidade e modo de preenchimento (cobrir, conter, repetir). Soma-se à cor de fundo.

4. Google Fonts: lista fechada de famílias para o texto dos objetos e para o título das caixas. Só as famílias em uso são carregadas.

Fora deste lote: desenho à mão livre, lousa nomeada, publicação como página, modelos, medição e compartilhamento (fases 2 a 7 do plano).

3. Critérios de aceite

• [x] Adicionar objeto pelo menu; escolher o tipo e os atributos no pop-up de configurações; o objeto aparece na caixa sem recarregar a página.

• [x] Objeto arrasta, redimensiona, duplica e remove como um widget, na grade e na lousa.

• [ ] Imagem do objeto e imagem de fundo vêm do gerenciador de arquivos; só endereço do próprio painel é aceito.

• [x] Botão de chamada abre o destino; no modo de edição não navega.

• [x] Esconder por largura funciona nos três limiares e a lousa não deixa o espaço do item escondido.

• [x] Fonte do Google aplicada ao texto e ao título; a folha de fontes só carrega com fonte em uso.

• [x] Layout publicado por perfil e layouts salvos guardam objetos e opções novas; valores fora da lista são descartados no servidor.

• [x] PHPUnit e Vitest verdes; roteiro de navegador em [REDACTED]; textos nos dois idiomas; 390 px sem rolagem lateral.