chore(agent): evoluir @ux com ergonomia cognitiva, orcamento de viewport 75/25, teto de 3 indicadores por linha e inspetor em acordeao

rules/refactoring-ui-hierarquia-despoluicao.md

@@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A
 scope: global
 trigger: always_on
 priority: alta
-updatedAt: "2026-10-24"
+updatedAt: "2026-10-26"
 ---
 
 # Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*)
@@ -96,6 +96,26 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
 3. **Estados Vazios Despoluídos (p. 234):**
    - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
 
+### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
+
+Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
+
+1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
+   - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
+   - **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**:
+     - *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas.
+     - *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura).
+2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
+   - **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central.
+   - Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho.
+3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):**
+   - Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`).
+   - **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas).
+   - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
+4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
+   - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
+   - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
+
 ---
 
 ## Exemplos