# Guia de implementação do E-PROC

> Contexto único para colar na IA. Gerado do guide vivo em 2026-07-15. Consolida Foundations + Padrões + Componentes + Glossário.

## Como usar
Cole este arquivo (ou os módulos: `padroes-eproc.md`, `componentes-eproc.md`, `glossario-eproc.md`) como contexto, e descreva a tela. Use o **prompt base** (`prompt-base-eproc.md`) como esqueleto.

## O CHASSI do ME (leia antes de montar qualquer tela)

Toda tela do ME nasce no mesmo shell (block **MeLayout**). O que define "cara de ME" é o chassi — erre aqui e a tela não parece do ME, mesmo com os tokens certos.

**App bar (#header) — a regra que mais se erra:**
- Barra **AZUL me-brand full-width** no topo. Marca **"me." branca à ESQUERDA**.
- **Navegação principal HORIZONTAL no topo** (áreas: Dashboard · Transações · Fornecedores · Catálogos · Usuários · Mais).
- À direita: transversais (**Mensagens · Genius · Carrinho**, com divisor antes deles) + **avatar**.
- ❌ **NUNCA** transforme a navegação de áreas num **rail/sidebar de ícones à esquerda**. O rail lateral (#nav-area) é OPCIONAL e é só atalho de etapa/rodada — não é o menu de áreas.
- ❌ Header **verde ou claro/neutro = me-brand NÃO aplicado (erro)**. A barra é azul me-brand.

**Slots do MeLayout (preencha só os que a tela usa):**
- **#header** — app bar azul (acima).
- **#nav-area** — rail lateral opcional (5.5rem), atalhos; NÃO é o menu de áreas.
- **#toolbar (Subheader)** — CTA primário (botão split azul) à **ESQUERDA** + até 3 ações + "Mais ações"; à direita busca (Filter Search) + toggle de gráficos + troca de visão.
- **#left-area** — sidebar de escopos/filtros da entidade (sempre visível quando ligada; recolha pelo colapso do rail, nunca escondendo o slot — senão sobra coluna vazia que espreme a tabela).
- **#analytics** — gráficos, só pelos gatilhos (toggle/coluna) e com fechar.
- **#default** — conteúdo (tabela | cards | lista).
- **#right-area** — Carrinho **XOR** Mensagens (um por vez).
- **#footer** — só tablet/mobile.
- **Modal** nunca mostra o #header; anexos abrem em drawer.

## Anatomia da Index (a mais comum), em ordem
1. **#header** (app bar azul horizontal, acima).
2. **Subheader** — CTA **"Novo X"** (cadastro de entidade) à esquerda · até 3 ações + "Mais ações" · à direita busca + toggle gráficos + troca de visão.
3. **Filter Bar** — critérios no modelo **campo · operador · valor** (MeCriterionInput, peças encostadas/removíveis) — **NÃO** Selects soltos; ao lado a Filter Search (busca livre em overlay).
4. **Área de dados** — tabela/cards/lista. **Tipo = TEXTO**; **só Status é badge** semântico. **Seleção em massa = badge "N selecionados" na Filter Bar** (toggle que filtra os selecionados e desabilita os filtros) — **NÃO** o rodapé padrão "N de M linha(s) selecionada(s)".

## Convenções do ME (toda tela)
- Voz/labeling **PT-BR**, sem UPPERCASE. "**Novo X**" = cadastrar entidade · "**Adicionar X**" = item em lista existente. Sobrescreva rótulo default em inglês (o overflow é "Mais ações", não "Options").
- **Cor primária = me-brand (AZUL)**. Header/CTA verde = me-brand não aplicado.
- **Status = badge semântico** (nunca cor sozinha): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error.
- Valor: total/financeiro "R$ 1.234,56" · unitário/de lista "BRL 38,90".
- Menu por linha no kebab vertical (⋮). Ação destrutiva por modal de confirmação.
- Feedback por toast (com desfazer quando fizer sentido); trate **vazio, carregando e erro**.
- Responsivo: no mobile o **app bar vira BRANCO** (bg-background — logo azul/primary, hambúrguer, lupa/busca sob demanda, transversais e avatar como ícones escuros; **header claro no DESKTOP = erro, no MOBILE = correto**) + **navbar inferior AZUL**; o CTA primário vira **FAB**; as ações secundárias do subheader **colapsam em "Mais ações"** (nunca rolam na horizontal nem quebram em linhas); a sidebar vira drawer pelo hambúrguer.

## PRONTO QUANDO (Definition of Done — critério de aceite em E-PROC)
- [ ] **App bar azul me-brand** com marca "me." à esquerda + **navegação HORIZONTAL** + transversais/avatar à direita (nav NÃO virou rail lateral).
- [ ] Anatomia e **ordem das zonas** do padrão respeitadas; só as zonas usadas.
- [ ] **Componentes REAIS** do EletroDS/blocks (Me*/blocks) antes de remontar; nada recriado do zero que já exista.
- [ ] **Status como badge**; Tipo como texto; seleção em massa = badge-toggle na filter bar.
- [ ] Labeling **PT-BR** + moeda no formato certo.
- [ ] Estados **vazio / carregando / erro** tratados; a view inicial já EXIBE dados.
- [ ] **Foundations aplicados**: só classe Tailwind + var(--ui-*)/token — sem HEX/valor fora de escala/inline fixo; dark mode pelos tokens. (Confirme com o **doctor** da suite me-foundations que `--primary` é me-brand — guard limpo NÃO prova marca aplicada.)
- [ ] **a11y**: heading order, foco visível, contraste AA, rótulo/nome acessível, alvo ≥ 44px.
- [ ] A tela **RENDERIZA** de fato (valide olhando, não só o build): tabela mostra linhas com rolagem interna e o corpo NÃO colapsa a zero.

## Alvo shadcn/React
O chassi é o **MESMO** — muda só a camada de componentes. Puxe os componentes do **catálogo ME `@me-shadcn` (shadcn-me.vercel.app)** e **espelhe o layout 1:1 do app `vibe-react/src/previews/`** (`_shell.tsx` = AppHeader/MobileNavbar; `IndexPreview.tsx` = index completa). `ui.shadcn.com` genérico + tokens ME só como emergência (avise). Tokens/setup shadcn = skill **me-foundations-shadcn** (rode o `shadcn-doctor.mjs` como gate de marca).

---

## Foundations
Resumo (regras + boas práticas + escalas) em `foundations-eproc.md` (28 páginas). Tokens `--ui-*` (sem HEX), tipografia Roboto, spacing/radius/sombras na escala Tailwind. **Tokens canônicos e enforcement** por stack: suite **me-foundations** (nuxt/shadcn) — download companheiro.

## Padrões
Ver `padroes-eproc.md` (46 padrões).

## Componentes
Ver `componentes-eproc.md` (58 componentes).

## O que o EletroDS NÃO tem (e como resolver)
Hierarquia: **EDS-first → Nuxt UI → compor**. Não há block pronto no EDS para:
- **Sidebar / menu lateral** → compor no slot `#left-area` do **MeLayout** (ou `UNavigationMenu`).
- **Filter Bar** → compor (filtros rápidos + chips de `MeCriterionInput`).
- **Paginação** → `UPagination` (Nuxt UI).
- **Gráficos** → lib externa (não existe no EDS).
- **Detalhe local (painel)** → `MePreview` é baseado em **iframe (`src`)**; não serve a detalhe renderizado localmente — compor o painel.

Área de dados: use os blocks reais **MeTableView / MeCardView / MeListView** (pinar a versão que os inclua); fallback `UTable`. Eventos de `MeCriterionInput` são **camelCase** (`valueInput`, `fieldChange`, `operatorChange`, `remove`) — vincule a grafia camelCase.

## Glossário
Ver `glossario-eproc.md`.