# Glossário — E-PROC

> Gerado do guide vivo em 2026-07-15. Fonte: `8.vibe-coding/5.glossario.md`.

Falar a língua do ME nos prompts faz a IA gerar a coisa certa de primeira. Use estes termos exatos em vez de descrições genéricas — *"Subheader"* gera melhor que *"barra de cima"*.

## Traduzindo o que você quer dizer

A mesma coisa tem mil apelidos. Diga o termo da direita no prompt — a IA gera o componente certo, com o comportamento certo.

| Quando você diz… | Use o termo | Observação |
|------------------|-------------|------------|
| "uma janela por cima", "um pop-up", "uma caixinha no meio" | **Modal** | Bloqueia a tela; para confirmar/decidir. "Tem certeza?" → **Modal de confirmação**. |
| "uma gaveta", "um painel que desliza do lado" | **Drawer** (ou **Slideover**) | Desliza pela lateral sem sair da tela; para detalhes/edição rápida. |
| "um aviso", "uma tarja", "uma faixa colorida" | **Alert** (na tela) ou **Banner** (topo da página) | Persistente. Some sozinho? → **Toast**. |
| "uma mensagem que some", "notificaçãozinha no canto" | **Toast** | Efêmero; ação reversível usa toast com **Desfazer**. |
| "um balãozinho ao passar o mouse", "uma dica" | **Tooltip** | Só texto curto de apoio, no hover/foco. |
| "os três pontinhos", "menu escondido" | **Menu de mais ações** | Ícone `ellipsis-vertical`; agrupa ações secundárias. |
| "uma lista que abre", "dropdown", "caixa de opções" | **Select** (escolher valor) ou **Menu** (disparar ação) | Digitar e adicionar valores novos → **InputTags**. |
| "etiqueta", "selo", "tag de status" | **Badge** | Status sempre como badge semântico (cor = significado). |
| "caixinha de marcar" / "liga-desliga" | **Checkbox** / **Switch** | Checkbox seleciona itens; Switch liga/desliga um estado. |
| "a barra de cima" | **Header** (global) ou **Subheader** (da tela) | Header = navegação do produto; Subheader = título + CTA da tela. |
| "abas", "guias" | **Tabs** | Trocam o conteúdo abaixo sem sair da tela. |
| "caixa pra escrever", "campo de texto" | **Input** (uma linha) ou **Textarea** (texto longo) | — |
| "passo a passo", "etapas", "tela de progresso" | **Stepper** (indicador) / **Wizard** (fluxo) / **Phases** (rail de documento) | — |
| "tabelinha", "grade de dados" | **Table** | Colunas configuráveis, status como badge, ações em menu de mais ações. |
| "cartão", "quadradinho", "bloco" | **Card** | Cada bloco de dashboard/listagem é um Card. |
| "barra de busca", "a lupa", "buscar em tudo" | Campo de busca ou **Command Palette** (busca/ações global) | — |
| "bolinha girando", "esqueleto carregando" | **loading** / **Skeleton** | Skeleton = placeholder do conteúdo enquanto carrega. |

## Estrutura de tela

| Termo | O que é |
|-------|---------|
| **Header** | Barra de navegação global do produto (topo). No mobile vira uma barra compacta (menu + busca + avatar) no topo e a navegação migra para a **NavBar** no rodapé. |
| **NavBar** | Navegação no **rodapé** em telas pequenas — até 4 itens (ícone + rótulo, ativo com indicador) + **"Mais"** no fim. É o que o Header vira no mobile. |
| **Transversais** | Serviços do header que abrem como **painel lateral** (não navegam): **Genius**, **Chat** (mensagens), **Carrinho**. Ao expandir, ocupam a tela inteira. |
| **Subheader** | Faixa no topo do conteúdo com o título/CTA primário e ações que impactam a tela toda (fica sticky no scroll). |
| **Filter Bar** | Barra de filtros **persistente** abaixo do Subheader — critérios (campo · operador · valor) que filtram a área de dados. |
| **Filtros rápidos (select)** | Chips-select no início da Filter Bar ("Todos processos ▾", "Todo período ▾") — escolha rápida, sem montar critério. |
| **Filter Search** | Busca/ações **global por overlay** (Command Palette) — diferente da Filter Bar (persistente). |
| **Área de dados** | Região principal da index — tabela, cards ou **lista** (na lista, cada registro é um **Forehead** empilhado). |
| **Faceta** | Filtro por dimensão na **sidebar** (não na Filter Bar): checkbox com contagem, faixas (sliders) ou **árvore** (pasta País › Estado › Cidade que abre em checkboxes). Listas longas truncam com **"Ver mais"**. |
| **Segmento** | Faceta de **categoria/ramo** do fornecedor (ex.: "Ferramentas e máquinas") — checkbox com contagem, na sidebar de Fornecedores ME. |
| **Switcher de contexto** | Alternância no topo da sidebar entre dois universos que **trocam os filtros** (ex.: **Meus fornecedores ↔ Fornecedores ME**, **Meu catálogo ↔ Marketplace**) — não é um filtro adicional. |
| **Forehead** | Cabeçalho de um **registro** — identidade (badge/imagem), título, status e ações. Variações por tipo: documento (transação), **produto** (com área de carrinho) e **fornecedor** (logo, contatos, "Visível para o marketplace"). |
| **Chassi** | O **esqueleto** de um gabarito: as zonas + a ordem que não mudam entre instâncias (o gabarito = chassi + componentes + o prompt pronto). |
| **Campo** | Unidade de um formulário — rótulo + controle (input/select/checkbox) + texto de ajuda/erro. |
| **Rodapé de ações** | Faixa final do formulário com as ações — "Cancelar" (secundário) e "Salvar" (primário). |

## Ações

| Termo | O que é |
|-------|---------|
| **CTA primário** | Ação principal da tela — botão sólido, cor primária, no Subheader/Forehead. No mobile vira **FAB**. |
| **FAB** | Botão de ação flutuante (canto inferior direito) — no mobile o CTA primário vira FAB, fixo acima da NavBar. |
| **Menu de mais ações** | Menu (ícone `ellipsis-vertical`) com as ações secundárias de um item/linha. |
| **Ações em massa** | Modo ativado pela seleção — badge "{N} selecionados" na Filter Bar que desabilita os filtros. |
| **Desfazer** | Feedback reversível de uma ação destrutiva (toast com "Desfazer"), em vez de modal. |
| **Validação inline** | Erro mostrado no próprio campo, abaixo do controle, ao sair dele ou ao submeter. |

Comportamento completo: Ações do usuário.

## Labeling

| Convenção | Regra |
|-----------|-------|
| **"Novo X"** | Cadastro de uma **entidade** nova (ex.: "Novo fornecedor"). |
| **"Adicionar X"** | Inserir um **item existente** numa lista/coleção (ex.: "Adicionar item"). |
| **PT-BR, sentence case** | Rótulos em português, só a primeira letra maiúscula — nunca UPPERCASE. PT-BR é a voz padrão; o ME é multilíngue (ver i18n). |
| **Verbo no infinitivo** | Ações como "Editar", "Excluir", "Filtrar" — não "Editando" nem "Edição". |
| **Idioma por campo (i18n)** | Conteúdo respondido em idiomas diferentes (ex.: perguntas de cotação). Troca de idioma do usuário via `LocalePicker`/`setupI18n` do EletroDS — ver Voz e conteúdo › Idioma e i18n. |

## Status, tipos e valores

**Status** — sempre como **badge semântico** (cor nunca sozinha: combine com o rótulo). Mapa canônico:

| Status | Tom | Uso |
|--------|-----|-----|
| Pendente · Em análise · Aguardando | `warning` | aguardando ação/decisão |
| Em andamento | `info` | em processamento |
| Aprovado · Concluído | `success` | finalizado com êxito |
| Rascunho | `neutral` | não enviado / em edição |
| Recusado · Cancelado | `error` | encerrado sem êxito |

O rótulo do badge é **curto (1–2 palavras)**; o detalhe vai na descrição/tooltip, não no rótulo.

**Tipos de documento (transações):** Requisição · Cotação · Pré-Pedido · Pedido · Contrato · Leilão. **Cotação** e **Leilão** são documentos de **processo** (têm rail de **Fases** à esquerda); os demais são simples (full-page direta). **Fichas de entidade** — **Fornecedor** e **Produto** — também são documentos, mas com template dedicado (forehead + abas ancoradas + seções), **sem** o padrão de "locais" (Entrega/Faturamento/Cobrança).

**Formato de valor monetário:** total/financeiro usa `R$ 1.234,56` (R$ + milhar com ponto, decimais com vírgula); **preço unitário / de lista** usa `BRL 38,90`.

## Fluxo (Compositor)

| Termo | O que é |
|-------|---------|
| **Fluxo** | Sequência **ordenada** de telas que compartilham contexto, montada no Compositor. A ordem da tira de telas **é** o fluxo. |
| **Tira de telas** | O seletor de telas do Compositor quando **"Habilitar fluxo"** está ligado — adicione, **arraste para reordenar**, remova. |
| **Gatilho (transição)** | O que abre a próxima tela (ex.: *clicar em "Novo documento"*, *abrir um registro*). Definido no **conector** entre os cards; entra no prompt do fluxo. |
| **Alvo (stack)** | A camada de implementação: **EletroDS + Nuxt** (default) ou **shadcn/React**. Muda só a camada de componentes — anatomia, convenções e voz do ME são as mesmas. Um fluxo é todo de **um alvo só**. |

## Kit e ferramentas

| Termo | O que é |
|-------|---------|
| **Prompt Builder** | O **kit** inteiro de vibe-coding (esta seção): o Compositor, os Modelos de prompt, os Gabaritos, o Glossário e os Downloads. |
| **Compositor** | A **ferramenta** interativa (abrir): você descreve a tela com suas palavras e ela monta o prompt + um preview 1:1. |
| **Gabarito** | Uma **tela-base** do ME: anatomia (zonas + ordem) + componentes + o prompt pronto para gerá-la. Partir de um gabarito = partir do padrão, não da página em branco. |
| **Bundle E-PROC** | O **pacote** de Downloads com as skills do guide + os MDs de contexto, num instalador só (para Claude Code / Cursor). |
| **MCP** | *Model Context Protocol* — conecta o editor de IA aos **dados reais** dos componentes (props/slots) do EletroDS, para a IA não inventar a API. |
| **Skill / Plugin** | **Skill** = pacote de instrução que a IA passa a seguir (o padrão do ME). **Plugin** = o instalador que empacota skills + configs num passo só. |