REQ-248 — Área de widgets como lousa: posição livre, largura total, janela cheia e opções flutuantes

Lousa de células: a área deixa a malha fixa de 12 colunas. A quantidade de colunas acompanha a largura disponível (célula de no mínimo 90 px, distância de 20 px entre widgets na…

Status: implemented-pending-homologation (relatório em sdd/implementation/BATCH-257.md)
Modo de Autonomia: autonomo_monitorado
Lote Alvo Core: BATCH-257 (conn2flow)
Data de Criação: 2026-10-06
Origem: pedido direto do Engenheiro Chefe no chat, depois da integração da REQ-247 na main.
Repositório Alvo: Core conn2flow em [REDACTED]
Branch de trabalho: feat/req-248, a partir da main 446b7817.

1. Pedido, nas palavras do Engenheiro Chefe

"Uma coisa que eu quero que você altere aí é a área do grid do widget. E eu acho que essas opções podiam ser um menu flutuante: quando clica nele, ele abre o menu e fica aparecendo, no canto da tela. E o grid está travado na largura do layout. Eu coloquei ele 100% e, quando recolho o menu, eu conseguiria colocar mais de dois por linha. Em vez de o grid ser fixo de duas colunas, qualquer elemento tem esse quadrado, essa distância: os elementos continuam com as mesmas distâncias mínimas uns dos outros, só que a gente tem flexibilidade de jogar em toda a área do grid. E responsivo. Em vez de ser a tela cheia dos widgets, poderia ter o botão janela cheia, que aí toda a área visual fica para os widgets, com os menus bem encostadinhos nos cantos. A área do widget vai ser uma lousa. Imagina os widgets funcionando, a flexibilidade de criar mini aplicativos. Deixa esse movimento livre. É como se fosse uma lousa em que os quadrinhos a gente pode arrastar e pôr em qualquer lugar, e se diminuiu a lousa ela vai jogando para baixo, fazendo scroll vertical."

2. Leitura do pedido (decisões do executor, a confirmar na homologação)

Lousa de células: a área deixa a malha fixa de 12 colunas. A quantidade de colunas acompanha a largura disponível (célula de no mínimo 90 px, distância de 20 px entre widgets na horizontal e na vertical). Mais espaço, mais widgets por linha.
Posição livre: cada widget guarda coluna e linha. Arrastar pela alça solta em qualquer célula, com encaixe; quem estiver no caminho desce. Vãos deixados de propósito ficam.
Responsivo: com a lousa mais estreita, o widget que não cabe na coluna guardada encosta na borda e, se colidir, desce. Abaixo de 640 px, uma coluna só. A rolagem é vertical.
Largura em células: de 2 até a largura da lousa (no máximo 24). A altura continua de 120 a 960 px em passos de 20.
Janela cheia no lugar da tela cheia: a lousa cobre toda a área do navegador, por cima do menu lateral e da barra do topo. Esc ou o mesmo item do menu volta.
Opções em botão flutuante no canto inferior direito, para o Dashboard inteiro. O menu abre e fica aberto até clicar de novo no botão.
Layouts gravados antes continuam válidos: sem posição guardada, os widgets são distribuídos em ordem.

3. Critérios de aceite

[ ] Recolher o menu lateral ou usar a janela cheia aumenta as colunas da lousa e cabem mais widgets por linha.
[ ] Arrastar um widget o deixa na célula escolhida, inclusive com vão; a posição persiste depois de recarregar.
[ ] Soltar sobre outro widget empurra o que estava ali para baixo, sem sobreposição.
[ ] Estreitar a janela joga para baixo o que não cabe, sem rolagem lateral; em 390 px fica uma coluna.
[ ] Redimensionar encaixa em células na largura e em 20 px na altura.
[ ] Janela cheia cobre a área do navegador; Esc sai.
[ ] Botão de opções flutuante no canto; o menu permanece aberto ao clicar fora.
[ ] Quem só visualiza vê a lousa do perfil sem controles; layout publicado por perfil guarda as posições.
[ ] PHPUnit e Vitest verdes; roteiro de navegador no Lab; textos nos dois idiomas.

4. Validação prevista

Vitest para o posicionamento (função pura de arranjo) e o cliente, PHPUnit para a normalização do layout publicado e o componente, roteiro Playwright no Lab local. Sem publicação em produção.

5. Mudança de rumo e resultado (2026-10-06)

Com a lousa já escrita, o Engenheiro Chefe pediu para não substituir a grade: "em vez de você fazer versões destrutivas, cria dois modos, a atual que está muito boa e é fácil de mexer e essa nova que você vai criar. Aí você cria um botão que faz a troca entre os dois tipos." E depois: "nesse atual, permita ser mais de duas colunas, três, quatro, poder alterar essa quantidade."

Entregue: grade como padrão, sem mudança de comportamento, com o seletor "Widgets por linha"; lousa como segundo modo, ligada por uma chave no menu; janela cheia e opções flutuantes nos dois modos. Os itens 1 a 4 da seção 2 valem para a lousa. Na mesma entrega, por decisão dele, o Tailwind foi fixado em 4.3.3. Navegador no Lab: 23/23.

# REQ-248 — Área de widgets como lousa: posição livre, largura total, janela cheia e opções flutuantes
- **Status:** `implemented-pending-homologation` (relatório em `sdd/implementation/BATCH-257.md`)
- **Modo de Autonomia:** `autonomo_monitorado`
- **Lote Alvo Core:** `BATCH-257` (`conn2flow`)
- **Data de Criação:** 2026-10-06
- **Origem:** pedido direto do Engenheiro Chefe no chat, depois da integração da REQ-247 na `main`.
- **Repositório Alvo:** Core `conn2flow` em `[REDACTED]`
- **Branch de trabalho:** `feat/req-248`, a partir da `main` `446b7817`.
---
## 1. Pedido, nas palavras do Engenheiro Chefe
> "Uma coisa que eu quero que você altere aí é a área do grid do widget. E eu acho que essas opções podiam ser um menu flutuante: quando clica nele, ele abre o menu e fica aparecendo, no canto da tela. E o grid está travado na largura do layout. Eu coloquei ele 100% e, quando recolho o menu, eu conseguiria colocar mais de dois por linha. Em vez de o grid ser fixo de duas colunas, qualquer elemento tem esse quadrado, essa distância: os elementos continuam com as mesmas distâncias mínimas uns dos outros, só que a gente tem flexibilidade de jogar em toda a área do grid. E responsivo. Em vez de ser a tela cheia dos widgets, poderia ter o botão janela cheia, que aí toda a área visual fica para os widgets, com os menus bem encostadinhos nos cantos. A área do widget vai ser uma lousa. Imagina os widgets funcionando, a flexibilidade de criar mini aplicativos. Deixa esse movimento livre. É como se fosse uma lousa em que os quadrinhos a gente pode arrastar e pôr em qualquer lugar, e se diminuiu a lousa ela vai jogando para baixo, fazendo scroll vertical."
## 2. Leitura do pedido (decisões do executor, a confirmar na homologação)
1. **Lousa de células**: a área deixa a malha fixa de 12 colunas. A quantidade de colunas acompanha a largura disponível (célula de no mínimo 90 px, distância de 20 px entre widgets na horizontal e na vertical). Mais espaço, mais widgets por linha.
2. **Posição livre**: cada widget guarda coluna e linha. Arrastar pela alça solta em qualquer célula, com encaixe; quem estiver no caminho desce. Vãos deixados de propósito ficam.
3. **Responsivo**: com a lousa mais estreita, o widget que não cabe na coluna guardada encosta na borda e, se colidir, desce. Abaixo de 640 px, uma coluna só. A rolagem é vertical.
4. **Largura em células**: de 2 até a largura da lousa (no máximo 24). A altura continua de 120 a 960 px em passos de 20.
5. **Janela cheia** no lugar da tela cheia: a lousa cobre toda a área do navegador, por cima do menu lateral e da barra do topo. `Esc` ou o mesmo item do menu volta.
6. **Opções em botão flutuante** no canto inferior direito, para o Dashboard inteiro. O menu abre e fica aberto até clicar de novo no botão.
7. Layouts gravados antes continuam válidos: sem posição guardada, os widgets são distribuídos em ordem.
## 3. Critérios de aceite
- [ ] Recolher o menu lateral ou usar a janela cheia aumenta as colunas da lousa e cabem mais widgets por linha.
- [ ] Arrastar um widget o deixa na célula escolhida, inclusive com vão; a posição persiste depois de recarregar.
- [ ] Soltar sobre outro widget empurra o que estava ali para baixo, sem sobreposição.
- [ ] Estreitar a janela joga para baixo o que não cabe, sem rolagem lateral; em 390 px fica uma coluna.
- [ ] Redimensionar encaixa em células na largura e em 20 px na altura.
- [ ] Janela cheia cobre a área do navegador; `Esc` sai.
- [ ] Botão de opções flutuante no canto; o menu permanece aberto ao clicar fora.
- [ ] Quem só visualiza vê a lousa do perfil sem controles; layout publicado por perfil guarda as posições.
- [ ] PHPUnit e Vitest verdes; roteiro de navegador no Lab; textos nos dois idiomas.
## 4. Validação prevista
Vitest para o posicionamento (função pura de arranjo) e o cliente, PHPUnit para a normalização do layout publicado e o componente, roteiro Playwright no Lab local. Sem publicação em produção.
## 5. Mudança de rumo e resultado (2026-10-06)
Com a lousa já escrita, o Engenheiro Chefe pediu para não substituir a grade: "em vez de você fazer versões destrutivas, cria dois modos, a atual que está muito boa e é fácil de mexer e essa nova que você vai criar. Aí você cria um botão que faz a troca entre os dois tipos." E depois: "nesse atual, permita ser mais de duas colunas, três, quatro, poder alterar essa quantidade."
Entregue: grade como padrão, sem mudança de comportamento, com o seletor "Widgets por linha"; lousa como segundo modo, ligada por uma chave no menu; janela cheia e opções flutuantes nos dois modos. Os itens 1 a 4 da seção 2 valem para a lousa. Na mesma entrega, por decisão dele, o Tailwind foi fixado em 4.3.3. Navegador no Lab: 23/23.