req-233 — Correção Estrutural da UI V3.0: Geometria Real de Widgets (Drag & Resize), Seletor Direto no Card, Proporções de Capas e Topbar

A implementação preliminar da req-232 gerou regressões e comportamentos anômalos que deixaram o Dashboard quebrado e impediram a visualização das melhorias:

Status: in-progress
Modo de Autonomia: autonomo_monitorado
Lote Alvo: BATCH-242
Data de Criação: 2026-10-04
Repositório: conn2flow (Core) em [REDACTED]
Origem: Engenheiro Chefe / Arquiteto Master: Correção de defeitos do lote preliminar BATCH-241 (req-232).
Aviso de Concorrência: Isolar na branch feat/req-233 via worktree limpo (conn2flow-req233) derivado de main. Proibido usar git add -A ou git add ..

1. Diagnóstico dos Defeitos Identificados no BATCH-241

A implementação preliminar da req-232 gerou regressões e comportamentos anômalos que deixaram o Dashboard quebrado e impediram a visualização das melhorias:

Esmagamento Vertical dos Widgets (grid-auto-rows: 0.5rem):
- Foi inserido no CSS uma regra de grid-auto-rows: 0.5rem (8px por linha) com span padrão de 12 linhas.
- Isso resultou em uma altura total de apenas 96px para o card do widget, gerando um formato de tira horizontal comprimida com scrollbars internas quebradas, impedindo a visualização dos dados, métricas e gráficos.
- A malha de 24 colunas virtuais gerou conflitos diretos com as classes utilitárias responsivas do Tailwind no HTML (grid-cols-1 md:grid-cols-2 xl:grid-cols-3).
Seletor de Widgets Indireto e Inflexível:
- O botão de substituição adicionado (dashboard-widget-switch-btn) dependia de um fluxo truncado de modal de catálogo que desabilitava opções incorretamente se outro widget estivesse aberto.
- O usuário precisa de um seletor direto no próprio cabeçalho do card (dropdown/menu evidente) ou de um estado de "Bloco Vazio" para escolher de forma transparente o que será renderizado ali.
Redimensionamento Errático:
- O redimensionamento por ponteiro calculava saltos de 8px sem tamanho mínimo de segurança (min-height), tornando a experiência de arrasto no mouse instável e desordenada.
Falta de Commit e Sincronização:
- O lote anterior não consolidou commits na árvore, mantendo centenas de arquivos pendentes e impedindo o reflexo das mudanças no runtime do usuário.

2. Escopo Detalhado da Correção

2.1. Geometria Profissional da Grade de Widgets (Aba Widgets)

Em dashboard-cards-tailwind.css e dashboard.js:
- Malha Canônica de 12 Colunas:
- Estruturar a grade do container #dashboard-widgets-grid em 12 colunas no desktop (grid-template-columns: repeat(12, minmax(0, 1fr))), 6 colunas em tablets e 1 coluna (100%) em mobile.
- Definir altura modular proporcional: altura mínima de segurança de min-h-[220px] (ou blocos de altura h-1x = 220px, h-2x = 460px), eliminando de vez o cálculo de linhas de 8px.
- Larguras Válidas no Grid de 12 Colunas:
- 4 colunas (1/3 da tela — tamanho padrão para cards compactos).
- 6 colunas (1/2 da tela — tamanho médio para gráficos e tabelas).
- 8 colunas (2/3 da tela — tamanho amplo para dashboards operacionais).
- 12 colunas (largura total — full-width).
- Alça de Drag & Resize Suave:
- A alça no canto inferior direito (dashboard-widget-resize-handle) deve aplicar classes ou CSS com snapping suave entre essas colunas (4, 6, 8, 12) e alturas modulares (1x ou 2x).
- Manter cursor nwse-resize e feedback visual claro (outline: 2px solid #0284c7) sem quebrar a proporção dos elementos internos.
- Persistência das Dimensões:
- Salvar a largura (em colunas: 4, 6, 8 ou 12) e a altura (1 ou 2) no objeto JSON via dashboardSalvarPreferenciaBackend('dashboard_widgets_layout', widgetsList).

2.2. Seletor Direto e Evidente de Widgets no Card

No cabeçalho de cada card de widget:
- Adicionar um botão de seleção/troca evidente com ícone de engrenagem ou setas de alternância (dashboard-widget-switch-btn) e título claro ("Trocar widget deste bloco").
- Ao clicar, exibir um menu suspenso (dropdown rápido) ou abrir o catálogo com o alvo pré-selecionado, permitindo trocar o widget daquele espaço com 1 clique.
- Ao trocar, atualizar o título do cabeçalho e disparar a requisição AJAX de renderização do novo widget (opcao=inicio&ajax=sim&ajaxOpcao=widget-render&widget_id=...).
- No botão geral de "Adicionar Bloco", o novo card pode nascer como um bloco placeholder com seletor no corpo ("Selecione um widget para este espaço...") ou adicionar diretamente do catálogo.

2.3. Capas dos Cards de Módulos (Dashboard - Aba Módulos)

Em dashboard-cards-tailwind.css:
- Altura na Densidade M (Padrão): Aumentar para 9rem (144px) (cerca de 40% a mais que os 6rem anteriores), garantindo que as capas 3D fiquem imponentes e bem visíveis.
- Altura na Densidade G (Grande): Ajustar para 12rem (192px).
- Enquadramento: Garantir .dashboard-module-cover { width: 100%; height: 100%; object-fit: cover; } preenchendo integralmente o topo do card.
- Alça de Drag Flutuante: A alça de arrasto (.dashboard-card-drag-handle) deve ficar em posição absoluta no canto superior esquerdo (top-2.5 left-2.5), com fundo translúcido suave (bg-white/85 backdrop-blur-sm shadow-sm), sem empurrar ou descentralizar os ícones SVG quando não houver cover.

2.4. Topbar, Dropdowns, Dicas e Reordenação

Em admin-topbar-tailwind.html e admin-topbar.js:
- Largura do Dropdown do Usuário: Fixar em w-80 ou w-84, distribuindo os itens com bom espaçamento lateral e tipografia legível.
- Tooltips: Garantir que todas as dicas da topbar usem data-c2f-dica-pos="bottom" para não sumirem sob o iframe da barra de edição.
- Modal de Favoritos: Espaçamento respirado entre itens (gap-2), sem textos sobrepostos e com suporte a reordenação por arrasto (drag & drop sortable).
- Logomarca do Cabeçalho: Ampliar a imagem da logo em ~35% (h-10 a h-11, mantendo proporção da barra h-16).

2.5. Largura Dinâmica do Painel Administrativo

No layout-administrativo-tailwind.html:
- Permitir alternar a largura máxima do container principal <main data-admin-main> entre:
- Normal: max-w-7xl (1280px).
- Expandido: max-w-[1600px].
- Total: max-w-none w-full px-6.
- Persistir a escolha na preferência do usuário (dashboard_admin_width).

3. Critérios de Aceite (Definition of Done)

[ ] CA-1 (Widgets com Geometria e Altura Real): Os cards de widgets na aba de Widgets possuem altura mínima funcional (min-h-[220px]), sem esmagamento vertical, e grid responsivo de 12 colunas.
[ ] CA-2 (Redimensionamento Fluido): A alça no canto inferior direito do widget permite arrastar com o mouse para alterar a largura (4, 6, 8, 12 colunas) e altura de forma intuitiva, com persistência da preferência.
[ ] CA-3 (Seletor Direto de Widgets): No card do widget há opção evidente para trocar de imediato qual widget roda naquele espaço.
[ ] CA-4 (Capas dos Módulos Visíveis e Nítidas): Na densidade M, os cards de módulos têm altura de 9rem (144px), object-fit: cover 100% e alça de arrasto não intrusiva.
[ ] CA-5 (Topbar Aprimorada): Dropdown de perfil espaçoso (w-80), tooltips abrindo para baixo, modal de favoritos sem sobreposição de textos e logo em destaque.
[ ] CA-6 (Largura Útil Configurável): Opção funcional para expandir a largura útil do <main> em monitores amplos.
[ ] CA-7 (Compilação e Entrega Limpa): assets:minify executado sem erros, arquivos específicos comitados (git add <arquivos>) e testes focados verdes.

# req-233 — Correção Estrutural da UI V3.0: Geometria Real de Widgets (Drag & Resize), Seletor Direto no Card, Proporções de Capas e Topbar
- **Status:** `in-progress`
- **Modo de Autonomia:** `autonomo_monitorado`
- **Lote Alvo:** `BATCH-242`
- **Data de Criação:** 2026-10-04
- **Repositório:** `conn2flow` (Core) em `[REDACTED]`
- **Origem:** Engenheiro Chefe / Arquiteto Master: Correção de defeitos do lote preliminar BATCH-241 (req-232).
- **Aviso de Concorrência:** Isolar na branch `feat/req-233` via worktree limpo (`conn2flow-req233`) derivado de `main`. Proibido usar `git add -A` ou `git add .`.
---
## 1. Diagnóstico dos Defeitos Identificados no BATCH-241
A implementação preliminar da `req-232` gerou regressões e comportamentos anômalos que deixaram o Dashboard quebrado e impediram a visualização das melhorias:
1. **Esmagamento Vertical dos Widgets (`grid-auto-rows: 0.5rem`):**
   - Foi inserido no CSS uma regra de `grid-auto-rows: 0.5rem` (8px por linha) com span padrão de 12 linhas.
   - Isso resultou em uma altura total de **apenas 96px** para o card do widget, gerando um formato de tira horizontal comprimida com scrollbars internas quebradas, impedindo a visualização dos dados, métricas e gráficos.
   - A malha de 24 colunas virtuais gerou conflitos diretos com as classes utilitárias responsivas do Tailwind no HTML (`grid-cols-1 md:grid-cols-2 xl:grid-cols-3`).
2. **Seletor de Widgets Indireto e Inflexível:**
   - O botão de substituição adicionado (`dashboard-widget-switch-btn`) dependia de um fluxo truncado de modal de catálogo que desabilitava opções incorretamente se outro widget estivesse aberto.
   - O usuário precisa de um **seletor direto no próprio cabeçalho do card** (dropdown/menu evidente) ou de um estado de "Bloco Vazio" para escolher de forma transparente o que será renderizado ali.
3. **Redimensionamento Errático:**
   - O redimensionamento por ponteiro calculava saltos de 8px sem tamanho mínimo de segurança (`min-height`), tornando a experiência de arrasto no mouse instável e desordenada.
4. **Falta de Commit e Sincronização:**
   - O lote anterior não consolidou commits na árvore, mantendo centenas de arquivos pendentes e impedindo o reflexo das mudanças no runtime do usuário.
---
## 2. Escopo Detalhado da Correção
### 2.1. Geometria Profissional da Grade de Widgets (Aba Widgets)
- Em [`dashboard-cards-tailwind.css`](file:///[REDACTED]) e [`dashboard.js`](file:///[REDACTED]):
  - **Malha Canônica de 12 Colunas:**
    - Estruturar a grade do container `#dashboard-widgets-grid` em **12 colunas** no desktop (`grid-template-columns: repeat(12, minmax(0, 1fr))`), 6 colunas em tablets e 1 coluna (100%) em mobile.
    - Definir altura modular proporcional: altura mínima de segurança de **`min-h-[220px]`** (ou blocos de altura `h-1x = 220px`, `h-2x = 460px`), eliminando de vez o cálculo de linhas de 8px.
  - **Larguras Válidas no Grid de 12 Colunas:**
    - 4 colunas (1/3 da tela — tamanho padrão para cards compactos).
    - 6 colunas (1/2 da tela — tamanho médio para gráficos e tabelas).
    - 8 colunas (2/3 da tela — tamanho amplo para dashboards operacionais).
    - 12 colunas (largura total — full-width).
  - **Alça de Drag & Resize Suave:**
    - A alça no canto inferior direito (`dashboard-widget-resize-handle`) deve aplicar classes ou CSS com snapping suave entre essas colunas (4, 6, 8, 12) e alturas modulares (1x ou 2x).
    - Manter cursor `nwse-resize` e feedback visual claro (`outline: 2px solid #0284c7`) sem quebrar a proporção dos elementos internos.
  - **Persistência das Dimensões:**
    - Salvar a largura (em colunas: 4, 6, 8 ou 12) e a altura (1 ou 2) no objeto JSON via `dashboardSalvarPreferenciaBackend('dashboard_widgets_layout', widgetsList)`.
### 2.2. Seletor Direto e Evidente de Widgets no Card
- No cabeçalho de cada card de widget:
  - Adicionar um botão de seleção/troca evidente com ícone de engrenagem ou setas de alternância (`dashboard-widget-switch-btn`) e título claro (*"Trocar widget deste bloco"*).
  - Ao clicar, exibir um menu suspenso (dropdown rápido) ou abrir o catálogo com o alvo pré-selecionado, permitindo trocar o widget daquele espaço com 1 clique.
  - Ao trocar, atualizar o título do cabeçalho e disparar a requisição AJAX de renderização do novo widget (`opcao=inicio&ajax=sim&ajaxOpcao=widget-render&widget_id=...`).
  - No botão geral de *"Adicionar Bloco"*, o novo card pode nascer como um bloco placeholder com seletor no corpo (*"Selecione um widget para este espaço..."*) ou adicionar diretamente do catálogo.
### 2.3. Capas dos Cards de Módulos (Dashboard - Aba Módulos)
- Em [`dashboard-cards-tailwind.css`](file:///[REDACTED]):
  - **Altura na Densidade M (Padrão):** Aumentar para **`9rem` (144px)** (cerca de 40% a mais que os 6rem anteriores), garantindo que as capas 3D fiquem imponentes e bem visíveis.
  - **Altura na Densidade G (Grande):** Ajustar para **`12rem` (192px)**.
  - **Enquadramento:** Garantir `.dashboard-module-cover { width: 100%; height: 100%; object-fit: cover; }` preenchendo integralmente o topo do card.
  - **Alça de Drag Flutuante:** A alça de arrasto (`.dashboard-card-drag-handle`) deve ficar em posição absoluta no canto superior esquerdo (`top-2.5 left-2.5`), com fundo translúcido suave (`bg-white/85 backdrop-blur-sm shadow-sm`), sem empurrar ou descentralizar os ícones SVG quando não houver cover.
### 2.4. Topbar, Dropdowns, Dicas e Reordenação
- Em [`admin-topbar-tailwind.html`](file:///[REDACTED]) e [`admin-topbar.js`](file:///[REDACTED]):
  - **Largura do Dropdown do Usuário:** Fixar em `w-80` ou `w-84`, distribuindo os itens com bom espaçamento lateral e tipografia legível.
  - **Tooltips:** Garantir que todas as dicas da topbar usem `data-c2f-dica-pos="bottom"` para não sumirem sob o iframe da barra de edição.
  - **Modal de Favoritos:** Espaçamento respirado entre itens (`gap-2`), sem textos sobrepostos e com suporte a reordenação por arrasto (drag & drop sortable).
  - **Logomarca do Cabeçalho:** Ampliar a imagem da logo em ~35% (`h-10` a `h-11`, mantendo proporção da barra `h-16`).
### 2.5. Largura Dinâmica do Painel Administrativo
- No [`layout-administrativo-tailwind.html`](file:///[REDACTED]):
  - Permitir alternar a largura máxima do container principal `<main data-admin-main>` entre:
    - **Normal:** `max-w-7xl` (1280px).
    - **Expandido:** `max-w-[1600px]`.
    - **Total:** `max-w-none w-full px-6`.
  - Persistir a escolha na preferência do usuário (`dashboard_admin_width`).
---
## 3. Critérios de Aceite (Definition of Done)
- [ ] **CA-1 (Widgets com Geometria e Altura Real):** Os cards de widgets na aba de Widgets possuem altura mínima funcional (`min-h-[220px]`), sem esmagamento vertical, e grid responsivo de 12 colunas.
- [ ] **CA-2 (Redimensionamento Fluido):** A alça no canto inferior direito do widget permite arrastar com o mouse para alterar a largura (4, 6, 8, 12 colunas) e altura de forma intuitiva, com persistência da preferência.
- [ ] **CA-3 (Seletor Direto de Widgets):** No card do widget há opção evidente para trocar de imediato qual widget roda naquele espaço.
- [ ] **CA-4 (Capas dos Módulos Visíveis e Nítidas):** Na densidade M, os cards de módulos têm altura de 9rem (144px), `object-fit: cover` 100% e alça de arrasto não intrusiva.
- [ ] **CA-5 (Topbar Aprimorada):** Dropdown de perfil espaçoso (`w-80`), tooltips abrindo para baixo, modal de favoritos sem sobreposição de textos e logo em destaque.
- [ ] **CA-6 (Largura Útil Configurável):** Opção funcional para expandir a largura útil do `<main>` em monitores amplos.
- [ ] **CA-7 (Compilação e Entrega Limpa):** `assets:minify` executado sem erros, arquivos específicos comitados (`git add <arquivos>`) e testes focados verdes.