Gabaritos

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de index do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Estrutura de Index
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header · Subheader (título + CTA primário) · Filter bar · Área de dados (tabela | cards | lista de foreheads).
Componentes obrigatórios: Header (block EletroDS), Subheader (block EletroDS — CTA, busca, filtros), barra de filtros: MeFilterBar se existir no projeto, senão componha com Subheader + MeCriterionInput, TableView · CardView · ListView (blocks EletroDS; na view lista cada registro é um MeForehead empilhado), MeButtonBar (ações + “Mais ações”), UBadge (Nuxt UI — status).
Status como UBadge semântico: Pendente/Em análise/Em aprovação/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error.
Estrutura: {Header, Sidebar, Filter Bar, View}.
Header — seção ativa: {Transações}.
Header — menus: {Dashboard, Transações}.
Header — transversais: {Mensagens, Genius, Carrinho}.
Header — menu do usuário: {Trocar conta, Ver Perfil}.
Ação principal: {Novo {entidade}}.
Ações da tela: {ação1, ação2}.
Ações "em massa" aplicam-se aos itens selecionados (somem/desabilitam sem seleção); "abre modal" confirma num modal/painel antes de executar; as demais rodam inline com toast (destrutivas sempre confirmam). As que não couberem no subheader colapsam em "Mais ações".
Sidebar — seções: {Favoritos, Filtros salvos}.
Cada seção da sidebar declara seu tipo de exibição (Lista/Checkbox-faceta/Seleção múltipla/Seleção única/Árvore/Card/Slider) — respeite-o ao montar (ex.: faceta = checkbox com contagem; slider = faixa de dois thumbs).
Use exatamente os itens listados em cada seção da sidebar — não misture itens/facetas de outra entidade (ex.: não traga facetas de Fornecedores num index de Transações).
Sidebar — switcher de contexto (TROCA os filtros): {Meus X ↔ Y}.
Filtros rápidos (select): {Processo, Período}.
Filtros: {filtro1, filtro2}.
Filter Search — busca por: {número, título}.
Views disponíveis: {tabela, cards, lista}.
View padrão: {tabela | cards | lista}.
Colunas: {col1, col2, status, valor}.
Ações por linha: {editar, excluir}.
⛔ REPRODUZA O PADRÃO EXATO (não reinterprete) — evite estes desvios recorrentes: (1) Subheader: ações em ghost (NÃO outline), CTA primário à ESQUERDA, SEM botão "Opções", COM botão de gráficos (ícone chart-column, modo tabela); (2) UMA filter bar, SEM checkbox líder no modo tabela (só lista/card), NÃO duplicada; (3) Sidebar: campo de busca no topo + tabs-âncora + seções AGRUPADAS (nunca itens soltos) — tamanhos normais (não encolha itens/tree); (4) SEM padding externo na área de dados (tabela/lista/card/preview ocupam a área inteira); (5) Lista = só checkbox / Preview = avatar; (6) Mensagens·Genius·Carrinho ABREM painel à direita (#right-area/drawer); (7) Mobile: MESMA estrutura do desk, com FAB, nav bar com "Mais", e subheader SEM busca/hambúrguer (foram pro header/FAB); (8) fundo BRANCO (bg-default) nas zonas; scrollbar fina padrão ME. Se algum aparecer, você reinterpretou — corrija antes de entregar.
Afordâncias de index: ao clicar numa linha/card, abre o documento em página inteira — o identificador (1ª coluna) é o LINK principal; colunas ordenáveis (chevron no cabeçalho); realce da linha selecionada; paginação com seletor de itens por página no rodapé da área de dados.
Busca e filtros: a Filter Search abre por um ícone de funil (overlay com drill-down Critério › Operador › Valor); a Filter Bar rola horizontalmente por baixo do cluster de ações fixo à direita.
Sidebar de navegação agrupada (ex.: Pendências · Itens · Transações · Filtros salvos · Meus links), com contagens por grupo — distinta das facetas (Segmento/Localização) de Fornecedores/Catálogo.
Faceta de tipo na sidebar (grupo Transações: Requisições/Cotações/Pedidos/Contratos/Nota Fiscal): selecioná-la filtra a lista para só aquele tipo (o número reflete o prefixo — REQ/COT/PED…).
Faixa de widgets/gráficos (view "Meus widgets"): grade no desktop; no mobile empilha em 1 coluna full-width e a tela rola até a tabela (área de dados com altura mínima).
App bar: ao lado do "Mais" ficam os transversais Mensagens · Genius · Carrinho — o Carrinho é item rotulado e um divisor separa "Mais" dos transversais; o subheader inclui a ação "Enviar para o Genius".
Sidebar, Filter Bar e paginação NÃO existem prontas no EletroDS — componha-as (regra EDS-first → Nuxt UI → compor); use os blocks reais (MeTableView/MeFilterBar) onde existirem.
A sidebar fica sempre VISÍVEL quando a zona está ligada — NÃO use v-show/condicional sobre o slot dela (isso reserva uma coluna vazia que espreme a tabela); se precisar recolher, use o colapso nativo do rail (ícone), não escondendo o slot.
View "preview" (master-detail): lista à esquerda + painel de detalhe à direita; o subheader do detalhe traz, ao lado de "Opções", um ícone "abrir em outra janela" (afordância para a página única do documento). Sem seleção, o painel mostra um empty state ("Abrir documento" / "Perguntar ao Genius").
Tabela configurável (persiste por conta): densidade das linhas Compacto 40px · Regular 48px (padrão) · Espaçoso 64px (a célula do cabeçalho é SEMPRE 40px); "linhas por registro" 1/2/3 truncam (line-clamp) e "Ajustar ao texto" cresce sem truncar; "itens por tela" 10/20/50/100 (só na tabela — lista/card usam scroll infinito). Rodapé "X–Y de Z registros" (PT-BR) + paginação, 56px; listagens com menos de 10 registros NÃO exibem rodapé.
Cabeçalho de coluna = botão (ícone de ordenação à esquerda, sem chevron) e arrastável para reordenar; clicar abre menu: Ordenar A→Z/Z→A · Fixar/Desafixar coluna · Ocultar coluna · [só em coluna agregável] Criar gráfico / Criar métrica. FIXAR = REORDENAR (a coluna vai para o início, logo após o checkbox, agrupada às demais fixadas) — NÃO é sticky-on-scroll nem o column-pinning nativo do UTable. Checkbox é sempre a 1ª coluna.
"Mais ações" (⋮) da filter bar SÓ na tabela: Exportar · Configurações da tabela (Editar colunas = modal transfer-list MeDualList inativas↔ativas com busca/mover/arrastar-para-ordenar + Restaurar padrão) · Densidade · Linhas por registro · Paginação · Itens por tela.
Filter Bar (peça custom, ainda não é block do EDS): altura 48px; esquerda→direita = checkbox líder (lista/card) · chip "N selecionados" (toggle: desabilita os filtros e expõe Salvar lista / Limpar seleção) · filtros de contexto (escopo/período, radios cor primary) · critérios MeCriterionInput (campo·operador·valor, removíveis, rolam no wheel) · grupo [+][salvar (só com dirty)][limpar (danger)] · ⋮. No mobile colapsa num funil (bottom-sheet) com ponto vermelho quando há filtro ativo.
Widgets/gráficos: nascem da agregação de uma coluna (menu do cabeçalho) ou do Dashboard; faixa "Meus widgets" colapsável no topo do conteúdo (só no modo Tabela), com contagem + Restaurar padrão + Limpar todos; grade auto-ajustável de ~4 por linha; ao abrir, a tabela vira "hug" e o corpo rola junto. Cores por série chart-1…chart-10 (Blue/Orange/Teal/Pink/Yellow/Purple/Red/Cyan/Lime/Slate 600) — NUNCA as cores semânticas de status.
Sidebar (peça custom): moldura fixa na ordem busca → tabs 1 (pill = switcher de contexto, quando houver) → tabs 2 (link = âncora das seções) → collapsibles. Tipos de item: link/ativo (azul) · árvore/pasta (contagem) · faceta-checkbox (count) · radio de período (+ date) · slider de métrica (USlider range) · switcher (troca universo E filtros) · box especial (endereço "Destino de compra" = 1º collapsible do Catálogo; banner promo acima da busca) · Favoritos (estrela sólida amarela) · "Ver mais".
Mobile: app bar vira BRANCO (bg-default) com logo ME azul — hambúrguer→drawer da sidebar (w-80), busca→painel, transversais→drawer à direita, avatar→drawer inferior; CTA primário vira FAB acima da nav bar (drawer inferior "Novo documento"); nav bar inferior AZUL com as funções + "Mais" (drawer). Alturas: header 64px · subheader 56px · nav bar 56px. No Preview mobile, tocar num registro abre o documento em TELA CHEIA.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais (Mensagens, Genius, Carrinho) + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader: a ação primária (botão split azul) fica à ESQUERDA; em seguida até 3 ações da tabela + "Mais ações" (overflow). À direita: Filter Search (busca) + toggle de gráficos + troca de visão (tabela/cards/lista).
- #left-area → sidebar de navegação/filtros (Pendências/Itens/Filtros salvos). Quando há switcher de contexto (ex.: Meus fornecedores ↔ Fornecedores ME), ele TROCA os filtros/facetas da sidebar — facetas: checkbox com contagem, árvore País › Estado › Cidade e "Ver mais".
- #filter-bar → Filter Bar: filtros rápidos + critérios no modelo campo · operador · valor (MeCriterionInput — peças encostadas, removíveis), NÃO Selects soltos; ao lado, a Filter Search (busca livre que abre um command/overlay com drill critério → operador → valor).
- #analytics → área de gráficos — visível só pelos gatilhos (toggle da toolbar OU gráfico no header de uma coluna) e com botão de fechar.
- #default → á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 aplicados), NÃO o rodapé padrão "N de M linha(s) selecionada(s)".

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Status sempre como badge semântico.
Ações por linha no menu de mais ações.
Seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto ativa).
CTA primário "Novo X" (cadastro de entidade) vs "Adicionar X" (item existente em lista).
Switcher de contexto na sidebar (quando houver) TROCA o conjunto de filtros/facetas — não é um filtro adicional..

PRONTO QUANDO
- A seleção de linhas habilita/desabilita as ações em lote (sem seleção = desabilitadas).
- A área de gráficos só aparece pelos gatilhos (toggle da toolbar ou gráfico no header de coluna) e tem como fechar.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Defina o CTA, as colunas, os filtros e a view padrão — é o que mais muda a saída.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de documento do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Estrutura de Documento
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header · Subheader (ações por status + Opções) · Nav-area (rail de fases, se processo) · Forehead (badge + leading + building blocks + Ver mais) · Abas de ancoragem + corpo da aba ativa.
Componentes obrigatórios: Header (block EletroDS), Subheader (block EletroDS — ações por status + Opções), Phases (rail de fases, se processo), MeForehead + MeForeheadBadge (EletroDS), MeButtonBar (ações + “Mais ações”), UTabs (Nuxt UI — abas de ancoragem), UCollapsible (seções), UBadge (Nuxt UI — status).
Status como UBadge semântico: Pendente/Em análise/Em aprovação/Aguardando=warning · Em andamento=info · Aprovado/Encerrado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error.
Estrutura: {Header, Subheader, Forehead, Conteúdo}.
Tipo de documento: {simples | processo}.
Header — seção ativa: {Transações}.
Header — menus: {Dashboard, Transações}.
Header — transversais: {Mensagens, Genius, Carrinho}.
Header — menu do usuário: {Trocar conta, Idioma…}.
Ações por status: {aprovar, editar, cancelar}.
Ações "em massa" aplicam-se aos itens selecionados (somem/desabilitam sem seleção); "abre modal" confirma num modal/painel antes de executar; as demais rodam inline com toast (destrutivas sempre confirmam). As que não couberem no subheader colapsam em "Mais ações".
Menu "Opções" (config da tela): {Configurações da tela, Exportar}.
Nav-area — tipo: {Fases}.
Nav-area — itens: {RFQ [itens: Rodada 1 | Rodada 2], RFP}.
Forehead — visão: {Default | Expandida + simplificada | Com fundo}.
Forehead — badge: {Texto | Imagem | Ícone}.
Forehead — leading content: {Título, Nome, Telefone, E-mail}.
Forehead — building blocks: {Status, Valor total, Prazo}.
Status possíveis: {rascunho, em análise, aprovado}.
Alertas: {Aviso: vence em 30 dias}.
Cards informativos: {Entrega, Faturamento}.
Conteúdo (seções) (cada seção é uma lista de BLOCOS): {Informações gerais, Históricos, Itens}.
Cada seção do corpo é montada por BLOCOS empilhados (Descrição, Formulário, Tabela/Cards/Lista, Widgets, Mapa, Anexos, Resumo, Timeline, Collapse). Reproduza os blocos na ordem indicada; Collapse agrupa sub-blocos; tabelas podem ter linhas expansíveis (detalhe = blocos internos).

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo (menus), e à direita os transversais + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #nav-area → Rail lateral (só documento de PROCESSO): lista o tipo de dado (Fases/Rodadas/Etapas) e seus itens; é atalho de etapa, não o menu de áreas.
- #toolbar → Subheader: à esquerda as ações por status (até 3 + "Mais ações", primária muda com o status, destrutiva isolada/modal); à direita o menu "Opções" (config da tela).
- #default → Forehead (badge text/image/icon + leading content + building blocks como Status/Valor/Prazo + opcional "Ver mais" que expande um slot; com ou sem banda de fundo) + abas de ancoragem + corpo da aba ativa (cada aba com o conteúdo definido).

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Status sempre como badge semântico.
As ações primárias dependem do status.
Ação destrutiva passa por modal de confirmação.
Forehead: badge (text/image/icon) + leading content + building blocks + (opcional) botão "Ver mais" que expande um slot.
Abas de ancoragem (scroll-spy) sobre seções empilhadas — não trocam de página.

PRONTO QUANDO
- As ações primárias mudam conforme o status do documento.
- Ação destrutiva passa por modal de confirmação.
- Abas são de ancoragem — rolam para a seção, não trocam de página.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Diga se é documento simples ou de processo, liste os status e a ação de cada um — o Forehead organiza identidade + status.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de dashboard do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Dashboard
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Faixa de filtros globais · Linha de KPIs (KpiCard) · Grid de 12 colunas com widgets/gráficos.
Componentes obrigatórios: Layout (block EletroDS — shell), KpiCard (block EletroDS — KPIs: rótulo + número + variação ↑↓; NÃO CardView, que é card de produto), Subheader (block EletroDS — filtros globais), Charts (lib de chart do EDS; séries com a paleta chart-1..10).
Estrutura: {Header, Filtros globais, KPIs, Gráficos}.
Filtros globais: {período, empresa}.
KPIs: {kpi1, kpi2, kpi3}.
Gráficos: {tipo: dado}.
Anatomia do dashboard (painel "Meus widgets"), em ORDEM (topo → base): 1) Header (app bar) [Topo, full-width] · 2) Abas de painéis + menus [Faixa abaixo do header] · 3) Filter Bar do painel [Faixa abaixo das abas] · 4) Toolbar do painel [Acima da grade — título/contexto à esquerda, ações à direita (OU delegada ao subheader)] · 5) Seção de métricas (KPIs) [Topo do corpo — ABAIXO da toolbar, nunca acima das ações] · 6) Grade de widgets (12 col) [Corpo (coluna central)] · 7) Chart Wizard (criação/edição) [Overlay/painel — abre por "Novo gráfico" ou "Editar" no ⋮ do card] · 8) Sidebar de fixados (OPCIONAL) [Coluna lateral direita — só quando o modo de fixar-por-arraste está ligado].
Header (app bar): App bar AZUL me-brand no desktop / BRANCO no mobile (mesma casca da Index). Marca + navegação horizontal + transversais + avatar.
Abas de painéis + menus: Abas de painéis (ex.: Painel de compras · Aprovações e Requisições · Fornecedores · +). Menu da aba (⋮): Compartilhar · Duplicar · Renomear · Ocultar · Remover. ⋮ da página: Meus links · Filtros salvos · Painéis ocultos · Exportar (PDF ou imagem).
Filter Bar do painel: Filtros persistentes do painel (ex.: Meus processos · Todo período · Processo = X ×). Cluster à direita: adicionar (+) · salvar visão (💾) · limpar (🗑) · ⋮. Controlam os widgets abaixo; sinalizam estado "alterado".
Toolbar do painel: Ordem FIXA: "Novo gráfico" (abre o Chart Wizard) · "Restaurar padrão" (warning: reorganiza, NÃO apaga) · "Limpar" (error: remove). Cada ação só habilita quando há o que fazer. No mobile vão pro FAB "Mais ações".
Seção de métricas (KPIs): Bloco de TILES em grade responsiva: cada tile = ícone (chip colorido) + RÓTULO + número + delta (Badge semântico ↑↓). NÃO é CardView (card de produto) NEM cards gigantes full-width empilhados — são tiles compactos, vários por linha.
Grade de widgets (12 col): Grid 12 col, gap 16px, card padrão 4 col (mín. 3×3), altura de linha 30px. Cada card: menu ⋮ + ARRASTAR (pointer: sombra azul + reflow) + REDIMENSIONAR (alças) + AGRUPAR (card sobre card = pasta). Séries usam a paleta chart-1..10 (cada série/categoria uma cor; NUNCA cor de status; série única pode ser 1 cor só). Blocos curados coexistem: Seção de métricas, Lista de status, Grade de charts, Empty state.
Chart Wizard (criação/edição): Tela única: Tipo → Dados → Estilo/ajustes → Detalhes, com PREVIEW ao vivo. Editar reabre pré-preenchido. Emite a config (on-chart-created); NÃO é onde o gráfico final aparece (isso é o Widget).
Sidebar de fixados (OPCIONAL): Cópias compactas em pastas por grupo (collapsibles). Fixar = COPIAR (vidas apartadas). NÃO incluir por padrão se a tela não pedir explicitamente.
Menu ⋮ de cada widget (ordem fixa): Editar (Reabre o Chart Wizard pré-preenchido) · Tipo de gráfico (Troca o tipo na hora (barra ↔ linha ↔ pizza…)) · Período (Seletor no header do card (7 dias / 30 dias / Este ano)) · Copiar para (Duplica o card em outro painel/aba) · Mover para grupo (Move o card para uma pasta existente) · Fixar / Desafixar (Fixa uma cópia na sidebar (ou remove)) · Redefinir resolução · Expandir (Tamanho padrão · ampliado) · Remover (Exclui (com modal de confirmação)).
Tipos de gráfico disponíveis (Chart Wizard): Barras (e horizontal) · Linhas · Área · Pizza (e Donut) · Radar · Radial · Tag Cloud · KPI.
Blocos curados que coexistem com os widgets: Seção de métricas (tiles) — KPIs num card, grade responsiva; cada tile = número de relance com tom semântico (neutral/info/warning/error). Em modo seleção, filtram o resto da tela. · Lista de status — Status em barras horizontais clicáveis (rótulo à esquerda, valor à direita); clicar pula para a fatia. · Grade de charts — Gráficos em grade responsiva (1–3 colunas), em modo galeria (gráfico puro) ou como widget (casca + período). · Empty state do painel — Painel em branco: título + descrição + ilustração + UM único CTA "Novo gráfico".
Responsividade por área (desktop → mobile/tablet, recorte lg=1024px): Header: App bar BRANCO (logo azul, lupa, transversais); navbar inferior azul. · Abas de painéis: Abas-âncora rolam na horizontal. · Filter Bar: Critérios rolam na horizontal; a busca encolhe. · Toolbar (Novo/Restaurar/Limpar): Colapsam no FAB "Mais ações". · Seção de métricas (KPIs): Empilham em 1 coluna, mantendo a ordem (abaixo das ações). · Grade de widgets: 1 coluna full-width; cards em modo compact; arrastar por toque; a tela rola verticalmente (sem carrossel). · Sidebar de fixados: Vira drawer; hambúrguer abre/fecha por cima..

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader com filtros globais (período, empresa…) que controlam tudo abaixo.
- #default → linha de KpiCards (topo, abaixo das ações) + grid de 12 colunas com widgets/gráficos.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Cada bloco de gráfico é um Card.
Os filtros globais do topo controlam tudo abaixo.
Ordem fixa da tela: ações/subheader → KPIs (topo do CORPO, ABAIXO das ações, nunca acima) → gráficos no grid.
KPI = KpiCard (número + variação), nunca CardView.
Séries de gráfico usam a paleta chart-1..10 (cada série/categoria uma cor; nunca cor de status; série única pode ser 1 cor só).
No mobile: app bar BRANCO (logo azul) + navbar inferior azul; ações colapsam em "Mais ações" (FAB); KPIs empilham em 1 coluna mantendo a ordem; o grid empilha em 1 coluna full-width e a tela rola verticalmente (sem carrossel horizontal).

PRONTO QUANDO
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

KPIs no topo, gráficos no grid; os filtros globais controlam tudo abaixo.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de formulário do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Formulário
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header · Subheader (ações) · Cabeçalho de seção (título + descrição) · Campos em grid · Seções com perguntas.
Componentes obrigatórios: Subheader (block EletroDS — Cancelar/Salvar/Visualizar), MeButtonBar, MeInput · MeInputDate · MeSelectMultiple (campos), UFormField (Nuxt UI — rótulo + validação inline).
Estrutura: {Header, Subheader, Informações gerais, Seções}.
Ações: {Cancelar, Salvar, Visualizar}.
Campos: {Nome: texto, Categoria: select}.
Colunas do formulário: {1 | 2 | 3 | 4}.
Seções: {Administrativa, Técnica}.
Tipo de resposta: {Texto | Numérica | Múltipla escolha}.
Recursos por pergunta: {Obrigatório, Significância}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader de ações (Cancelar · Salvar · Visualizar; até 3 + "Mais ações").
- #default → cabeçalho de seção + grid de campos (Informações gerais) + seções com perguntas.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Ações fixas no subheader (Cancelar · Salvar · Visualizar), nunca soltas no meio.
Campos agrupados em seções com cabeçalho (título + descrição).
Cada pergunta declara tipo de resposta, peso e se é obrigatória.
Validação inline; obrigatórios marcados com *.
Criar/editar de um DOCUMENTO = a MESMA tela (uma só) — muda apenas o título ("Novo X" ao criar · "Editar X #número" ao editar); na EDIÇÃO os campos obrigatórios/existentes já vêm PREENCHIDOS. Isso é distinto da tela de VER o documento (leitura: forehead + abas + corpo), que é outra tela..

PRONTO QUANDO
- Ações fixas no subheader (até 3 + "Mais ações"), nunca soltas no meio.
- Cada pergunta com seu tipo de resposta; obrigatório marcado com * e anexo opcional quando habilitado.
- Validação inline nos campos.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Defina as ações do topo, os campos da seção principal e as seções com perguntas (cada uma com tipo de resposta, peso e obrigatoriedade).

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de wizard / fluxo em etapas do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Wizard / fluxo em etapas
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Indicador de progresso (passos) · Conteúdo da etapa atual · Rodapé (Voltar + Avançar / Concluir).
Componentes obrigatórios: Subheader (block EletroDS — título/passos/ações), UStepper (Nuxt UI — indicador de progresso), MeButtonBar (Voltar/Continuar), MeInput · MeSelectMultiple (campos da etapa).
Estrutura: {Header, Subheader, Passos}.
Tarefa do fluxo: {tarefa}.
Título: {{entidade} — fluxo em etapas}.
Ações do rodapé: {Voltar, Continuar}.
Passos: {Dados (Formulário), Revisão (Revisão)}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader do fluxo: título + "Passo X de N" + Voltar/Continuar.
- #default → indicador de passos (stepper navegável) + conteúdo da etapa ativa.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Valide cada etapa antes de avançar.
"Concluir" no último passo, não "Avançar".
Estado do passo (concluída · atual · futura) com sinal redundante à cor (não só cor).
Mobile/tablet: o stepper compacta em "Passo X de N" textual; os campos empilham; as ações vão para um rodapé FIXO (Voltar/Avançar ao alcance do polegar).

PRONTO QUANDO
- Cada etapa é validada antes de avançar.
- No último passo, "Continuar" vira "Concluir".
- O stepper reflete a etapa ativa e o corpo mostra o conteúdo dela.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Liste os passos na ordem, os campos de cada etapa (com tipo) e diga o que valida antes de avançar.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de livre do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Tela livre
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Shell ME (Header/Navbar quando marcado) · Corpo — seções na ordem definida.
Componentes obrigatórios: Header (block EletroDS) quando houver shell, os componentes da stack conforme o conteúdo de cada seção (Card, Table, formulário, gráfico, texto, banner…).
Formato: {Página}.
Shell: {Header}.
Seções (na ordem): {Hero, Cards, Tabela}.
Header — layout: {Header no topo}.
Header — marca: {me.}.
Header — cor: {me-brand}.
Header — menus: {Dashboard, Transações}.
Header — transversais: {Mensagens, Genius, Carrinho}.
Subheader — título: {Título da tela}.
Subheader — ações: {Ação, Ação principal}.
Filter bar — filtros: {Filtro 1, Filtro 2}.
Sidebar — grupos: {Grupo 1, Grupo 2}.
Drawer — título: {Painel}.
Drawer — itens: {Detalhe, Anexo}.
Footer — links: {Sobre, Ajuda}.
Componentes por tipo de seção (hierarquia EDS → Nuxt UI → compor): Carrossel = UCarousel; Planos / preços = UPricingTable; Área de rolagem = UScrollArea; Abas / tabs = UTabs; Seções (ancoradas) = seções numeradas com âncora + scroll-spy; Vazio (empty state) = compor (ícone + título + descrição + ação) — o Nuxt UI não tem UEmpty. Para um tipo fora desta lista, use o componente Nuxt UI de papel equivalente (consulte ui.nuxt.com) ou componha — nunca recrie o que já existe; mantenha os tokens do ME.
Cada seção pode trazer uma DESCRIÇÃO livre (conteúdo) — respeite-a ao construir. "Área em branco (descrever)" é um bloco definido só pela descrição (ex.: a especificação de uma tela vinda de um PDD).
Telas embutidas como seção (recrie a tela inteira DENTRO da seção): Índice / listagem = padrão de index (MeSubheader com "Novo", MeFilterBar, MeTableView com colunas + status, paginação); Dashboard / painel = painel de widgets (MeCard/KPIs + gráficos); Documento = corpo de documento (MeForehead + UTabs ancoradas + grid de itens); Assistente / etapas = UStepper multi-etapas. Cada seção pode definir uma INTERAÇÃO ao clicar: abre UModal/painel (com o conteúdo descrito) ou navega para outra tela.
SEM CASCA (full-bleed): tela cheia, sem Header/shell do ME — mantenha apenas as foundations (tokens, espaçamento, voz) e a acessibilidade.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header = app bar do ME: barra AZUL full-width (cor primária = me-brand; NÃO o verde default do Nuxt UI) com a marca "me." em branco à esquerda, navegação horizontal no topo, e à direita os transversais + avatar. NÃO renderize header neutro/claro nem mova a marca para uma sidebar.
- #toolbar → Subheader (título da tela + ações).
- #left-area → Sidebar de navegação/filtros.
- #default → corpo livre: as seções na ordem definida, cada uma com o componente adequado ao seu tipo.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Use os componentes da stack por papel — não recrie o que já existe.
Mantenha as foundations do ME (tokens, espaçamento e voz) mesmo sem um template fixo.
Respeite a ordem das seções definidas.

PRONTO QUANDO
- O corpo segue a ordem das seções definidas, cada uma com o componente adequado ao seu tipo.
- A tela respeita as foundations do ME (tokens, espaçamento, voz) mesmo sem um template fixo.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Empilhe seções OU vá de "Corpo livre (canvas)" e descreva a experiência. Mantenha a casca ME (ou zere o Shell para full-bleed) — as foundations valem sempre.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de login do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Login e acesso
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Painel de marca (esquerda, azul me-brand) · Painel de formulário (direita).
Componentes obrigatórios: MeLogin (block EletroDS — split imagem + formulário), MeLoginForm (EletroDS — usuário/senha, lembrar, esqueci, locale, links), painel de marca custom no slot #image (marca "me." + tagline + textura).
Estrutura: {Painel de marca, Formulário}.
Painel de marca — tagline: {O MERCADO elevado à potência do ELETRÔNICO}.
Painel de marca — imagem de fundo: {textura hexagonal (padrão)}.
Painel de marca — fundo: {Gradiente}.
Painel de marca — cor: {me-brand}.
Painel de marca — logo: {me. (branco)}.
Formulário — título: {Entre na sua conta}.
Passos: {Login}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #image → Painel de marca: azul me-brand + textura hexagonal + "me." branco + tagline. No mobile some (vira faixa no topo).
- #default → MeLoginForm: usuário/senha (mostrar/ocultar), lembrar senha + esqueci a senha, CTA "Entrar", links (Cadastre-se como Fornecedor, ativação).

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
FORA do chassi MeLayout — sem header/nav do app; a identidade vem do painel de marca..
CTA "Entrar" primário full-width; ações secundárias viram links..
Seletor de idioma no topo do painel de formulário..
No mobile o split empilha: header branco no topo + formulário abaixo (só o form rola)..

PRONTO QUANDO
- Split de marca + formulário, fora do chassi.
- CTA "Entrar" full-width; idioma no topo.
- Mobile: header branco + form empilhado.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

É a exceção ao chassi: a identidade vem do painel de marca azul, não do header. Use MeLogin + MeLoginForm reais.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de cadastro comprador do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Cadastro Comprador
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Painel de marca · Formulário multi-step (2 passos + validação).
Componentes obrigatórios: MeLogin (split), MeInput c/ máscara (CNPJ/CEP/telefone), USelect (País/Natureza/Cidade/Estado), UCheckbox (aceite dos Termos), UModal (Termos), barra de progresso.
Estrutura: {Painel de marca, Formulário}.
Painel de marca — tagline: {O MERCADO elevado à potência do ELETRÔNICO}.
Painel de marca — imagem de fundo: {textura hexagonal (padrão)}.
Painel de marca — fundo: {Gradiente}.
Painel de marca — cor: {me-brand}.
Painel de marca — logo: {me. (branco)}.
Passos: {Empresa/endereço, Dados cadastrais, Validar cadastro}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #image → Painel de marca (banner azul).
- #default → Multi-step: País/Natureza/CNPJ/Razão Social/CEP/Endereço/Número/Complemento/Bairro/Cidade/Estado → Nome/E-mail/Login/Telefone/Celular/Senha/Repetir + Termos → Validar cadastro.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
FORA do chassi; split de marca + formulário..
Passo 1: empresa/endereço. Passo 2: dados cadastrais + senha (checklist de força) + aceite dos Termos..
Barra de progresso (X/2) com "Próximo passo"..
NÃO é o cadastro de Fornecedor (fluxo e campos diferentes)..

PRONTO QUANDO
- Split de marca + form 2 passos + validação por e-mail.
- Senha com checklist de força; aceite dos Termos.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Comprador = 2 passos (empresa/endereço → dados+senha) + validação. Fora do chassi.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de cadastro fornecedor do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Cadastro Fornecedor
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Painel de marca (ou banner de convite) · Formulário de 5 passos.
Componentes obrigatórios: MeLogin (split), MeInput c/ máscara (CNPJ), USelect (País), UCheckbox (Termos), UModal (Termos), barra de progresso (5 passos).
Estrutura: {Painel de marca, Formulário}.
Painel de marca — tagline: {O MERCADO elevado à potência do ELETRÔNICO}.
Painel de marca — imagem de fundo: {textura hexagonal (padrão)}.
Painel de marca — fundo: {Gradiente}.
Painel de marca — cor: {me-brand}.
Painel de marca — logo: {me. (branco)}.
Passos: {Conta, Dados cadastrais, Validar e-mail, Validar telefone, Criar senha}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #image → Painel de marca; ou banner de convite (empresa convidante) na variante por convite.
- #default → Formulário de 5 passos com barra de progresso (X/5) + "Próximo passo".

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
FORA do chassi; a partir do "Cadastre-se como Fornecedor" no login..
5 passos: conta (país/CNPJ/razão social + Termos) → dados cadastrais → validar e-mail → validar telefone → criar senha..
Variante POR CONVITE: muda só o banner (logo/nome da empresa convidante + vantagens do ME); o formulário é o mesmo..

PRONTO QUANDO
- 5 passos com validação de e-mail e telefone.
- Variante por convite muda só o banner.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Fornecedor = 5 passos + 2FA (e-mail/telefone). Ligue o banner no painel para o cadastro por convite.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de acesso livre do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Acesso livre
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Painel de marca · Formulário.
Componentes obrigatórios: MeLogin (split imagem + formulário), os componentes conforme os elementos que você adicionar em cada passo.
Estrutura: {Painel de marca, Formulário}.
Painel de marca — tagline: {O MERCADO elevado à potência do ELETRÔNICO}.
Painel de marca — imagem de fundo: {textura hexagonal (padrão)}.
Painel de marca — fundo: {Gradiente}.
Painel de marca — cor: {me-brand}.
Painel de marca — logo: {me. (branco)}.
Formulário — título: {Título da tela}.
Passos: {Passo 1}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #image → Painel de marca (ou banner de convite).
- #default → Formulário/fluxo montado do zero (passos + elementos).

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
FORA do chassi MeLayout; split de marca + formulário..
Estrutura livre — você define os passos e os elementos de cada um..

PRONTO QUANDO
- Split de marca + formulário, fora do chassi.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Comece do zero: adicione passos e, em cada um, os campos/links/botões. Painel de marca personalizável.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de configurações gerais do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Config gerais
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header · Left-area (menu de configurações) · Conteúdo da seção.
Componentes obrigatórios: Layout (block EletroDS — chassi), nav lateral (grupos aninhados + busca "Busque neste menu"), TableView / Formulário (conteúdo da seção), MeButtonBar (toolbar da seção).
Estrutura: {Header, Menu de config, Conteúdo}.
Header — seção ativa: {Nenhum}.
Menu de config — grupos: {Sistema e Operações, Usuários e Acessos}.
Cada seção da sidebar declara seu tipo de exibição (Lista/Checkbox-faceta/Seleção múltipla/Seleção única/Árvore/Card/Slider) — respeite-o ao montar (ex.: faceta = checkbox com contagem; slider = faixa de dois thumbs).
Use exatamente os itens listados em cada seção da sidebar — não misture itens/facetas de outra entidade (ex.: não traga facetas de Fornecedores num index de Transações).
Conteúdo — título: {Automação}.
Conteúdo — descrição: {Gerencie e edite os fluxos de automação}.
Conteúdo — seções: {Automação (Tabela)}.

LAYOUT (block MeLayout — preencha só os slots usados)
- #header → Header azul do ME.
- #left-area → Menu de configurações: grupos aninhados (Sistema e Operações, Usuários e Acessos, Processos…) + busca; seção ativa destacada.
- #default → Cabeçalho da seção + toolbar + conteúdo (ex.: Automação = listagem com paginação).

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Usa o chassi MeLayout com o LEFT-AREA como menu de configurações..
NÃO usa o subheader/toolbar de documento; edição via modal ou inline (sem submit global)..
Cabeçalho da seção (título + descrição) + toolbar (ação primária + secundárias + busca) + conteúdo (tabela/form)..
No mobile o hambúrguer no header abre o menu de config em drawer (esquerda)..

PRONTO QUANDO
- Menu de config à esquerda + conteúdo da seção.
- Sem subheader de documento; edição via modal/inline.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Config = chassi com left-area = menu de seções. Sem toolbar de documento; edição por modal/inline.

CONTEXTO
Você é um(a) engenheiro(a) de front-end do ME.
Você trabalha no ME — a plataforma de procurement (E-PROC) — seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia, cor), os componentes do design system e a voz do produto em PT-BR (Glossário do ME).

ALVO (STACK) — EletroDS + Nuxt
- Stack: Nuxt 3 + Vue 3 (Composition API, `<script setup>`) + Nuxt UI v4, sobre o EletroDS Design Guide.
- Hierarquia de componentes (NESTA ordem; nunca recrie o que já existe): 1) blocks EletroDS Header, Subheader, Layout, TableView, CardView, ListView, Preview (em código as tags `<MeHeader>`, `<MeSubheader>`, `<MeLayout>`, `<MeTableView>`, `<MeCardView>`, `<MeListView>`, `<MePreview>`) + componentes MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput, MeInput, MeInputDate, MeSelectMultiple, MeNavBar…; 2) Nuxt UI (UButton, UTabs, UBadge, UModal, UFormField, UTable…); 3) Vue puro só no que não existir nas libs acima.
- Foundations: apenas classes Tailwind + variáveis `--ui-*` (e tokens do EletroDS) — sem HEX, pixel cru ou valor fora da escala; dark mode pelos tokens.
- Saída: um componente Vue (Composition API).

TAREFA
Gere a tela de templates de e-mail do zero, seguindo o PADRÃO ME abaixo.

PADRÃO ME — Templates de e-mail
A anatomia abaixo é a estrutura da tela — a mesma que o preview do Compositor desenha. Siga a ordem e monte só o que está listado.
Anatomia, nesta ordem: Header (marca me.) · Conteúdo · Footer (atendimento + redes).
Componentes obrigatórios: shell de e-mail (header azul + conteúdo + footer), CTA primário único, logo do parceiro (nos convites).
Cenário: {Confirmação de cadastro}.
Estrutura: {Header, Conteúdo, Footer}.
Conteúdo — logo: {logo enviada}.
Conteúdo: {Título, Texto, CTA}.

LAYOUT (block MeLayout — preencha só os slots usados)
- header → Faixa azul com a marca "me." centralizada.
- conteudo → Miolo contextual: confirmação de cadastro, convite (fornecedor ativo/novo), redefinir senha.
- footer → Faixa azul: Atendimento, Conheça o ME e redes sociais.

CONVENÇÕES DO ME (padrões do guide — valem para toda tela)
- Voz e labeling em PT-BR (Glossário do ME), sem UPPERCASE: "Novo X" = cadastro de entidade; "Adicionar X" = item em lista existente.
- Hierarquia de ações: a primária à esquerda do subheader; até 3 ações aparentes + "Mais ações" (overflow); ação destrutiva passa por modal de confirmação.
- Rótulos sempre em PT-BR: se um componente trouxer rótulo default em inglês (ex.: o overflow "Options" do MeButtonBar), sobrescreva-o — o overflow do subheader é "Mais ações".
- Cor primária = me-brand (AZUL da marca). No alvo Nuxt, o Nuxt UI v4 NÃO resolve o nome "me-brand" sozinho e cai no DEFAULT VERDE — por isso, além de `ui.colors.primary: 'me-brand'` no app.config, é preciso definir a paleta `--color-me-brand-50..950` (azul) E mapear `--ui-color-primary-*` para ela (tokens da suite me-foundations / `tokens.me-brand.css`). Header/CTA VERDE = sintoma de me-brand não aplicado (erro) — a barra do header é azul me-brand.
- Status sempre como badge semântico (cor nunca sozinha — combine com rótulo): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error. O rótulo é curto (1–2 palavras); o detalhe vai na descrição/tooltip, não no rótulo.
- Valor monetário: total/financeiro usa "R$ 1.234,56"; preço unitário/de lista usa "BRL 38,90".
- Menu por linha/item no kebab vertical (⋮); seleção em massa vira badge-toggle na filter bar (filtros desabilitados enquanto a seleção está ativa).
- Feedback de ação por toast (com desfazer quando fizer sentido); trate sempre os estados vazio, carregando e erro.
- Responsivo: no mobile, o header global vira navbar inferior e o app bar fica compacto (marca "me." + busca + avatar); o menu da sidebar vai para o subheader (não no app bar); o CTA primário vira FAB; e as ações secundárias do subheader rolam horizontalmente.
- Responsivo (widgets/KPIs): no mobile a grade de widgets (até 4 colunas no desktop) vira 1 coluna full-width empilhada e a tela rola verticalmente até a tabela, que preserva uma altura mínima — não vira carrossel horizontal.
- Layout & altura (área de dados): MeTableView/MeListView/MePreview têm header sticky e rolam o próprio corpo — exigem um ANCESTRAL com altura definida (h-full + flex flex-col + min-h-0). O slot #default do MeLayout já rola e já tem padding (p-4 sm:p-6) — não duplique. Grid de itens dentro de aba/seção usa sticky=false (ou recebe altura própria), senão a tabela colapsa a ~0 e nenhuma linha aparece.
- Estado inicial + filter bar: a view inicial deve EXIBIR dados (escopo/filtro default que retorna linhas — não abrir num recorte vazio); mesmo assim trate vazio/carregando/erro. Na filter bar, os controles de filtro (Selects/critérios) e o MeCriterionInput usam o MESMO size (altura igual).
- Header/Subheader (desktop): o header mantém a navegação horizontal + o divisor antes dos transversais (use disable-mobile-layout quando houver muitos itens, senão ele compacta e some o divisor); o MeSubheader tem regiões fixas (esquerda CTA · centro ações · direita busca/visões) — não empilhe além de ~3 ações + "Mais ações", senão o centro abre gaps.
- "Mais ações": ordene por frequência de uso e separe a ação destrutiva por um divisor.
- Ação em massa rotula a contagem do alvo ("Excluir 5 itens", não "Excluir seleção"); a barra de seleção mostra "N selecionados".
- Tabela com seleção: o checkbox do cabeçalho fica em estado indeterminado quando a seleção é parcial (nem todas as linhas).
- Filtros — dois recursos distintos: Filter Bar = filtros persistentes/rápidos sempre visíveis (chips/critérios); Filter Search = busca livre por texto (overlay). Não os confunda. A sidebar também faceta por tipo/escopo: selecionar uma faceta (ex.: Transações › Cotações) filtra a lista para aquele recorte.
- Quando há ciclo de status (ex.: documento), as ações do subheader mudam conforme o status/fase atual.
- Breadcrumb do documento (breadcrumb + "abrir em outra janela" + fechar) é chrome de MODAL; a página única (full-page) não tem essa barra — navega pelo header/sidebar do app.
- Fichas de entidade (Fornecedor/Produto) usam template dedicado (forehead + abas ancoradas + seções numeradas), sem o padrão de "locais" (Entrega/Faturamento/Cobrança) dos documentos transacionais.
- Transversais (Mensagens/Genius/Carrinho) abrem como painel lateral, com o cabeçalho do painel alinhado ao header do app (mesma altura); ao expandir, ocupam a tela inteira.

DIRETRIZES
- Entregue a TELA REAL montada 1:1 com o padrão ME (anatomia, componentes e comportamento) — completa e funcional, não descrição/esboço/esqueleto; inclua dados de exemplo realistas em PT-BR.
- Respeite a anatomia e a ORDEM das zonas do PADRÃO ME; só monte as zonas listadas.
- CONSISTÊNCIA entre telas do mesmo tipo: se o projeto JÁ tem uma tela deste tipo (ex.: outro dashboard/index/documento), SIGA-A como referência — mesmo layout, mesmos componentes, mesmos tokens e as mesmas decisões já tomadas. NÃO remonte do zero nem reinvente a estrutura; troque só o conteúdo. Consistência com a tela existente vence preferência pontual.
- Trate os estados relevantes: vazio, carregando, erro e (quando houver seleção) o estado selecionado.
- Garanta responsividade desktop/tablet/mobile e acessibilidade (foco visível, rótulos, contraste, navegação por teclado).
- Use os blocks/componentes prontos do EletroDS antes de remontar qualquer coisa; só caia para Vue puro quando não existir equivalente.

RESTRIÇÕES
Respeite o ALVO (STACK) acima — hierarquia de componentes e tokens — sem recriar o que já existe; mantenha o labeling e a voz em PT-BR conforme o Glossário do ME.
Um único template default; só o conteúdo muda por cenário..
Fonte Roboto (fonte do produto ME), não a fonte do guide..
Um CTA primário por e-mail (Concluir cadastro / Cadastrar / Acessar perfil / Recuperar senha)..
Header azul (marca "me.") + footer azul (Atendimento · Conheça o ME · LinkedIn/Facebook/Instagram) fixos..

PRONTO QUANDO
- Header/footer de marca fixos; só o conteúdo muda.
- Um CTA primário; fonte Roboto.
- Componentes EletroDS reais (blocks/Me* antes de remontar) — nada recriado do zero que já exista.
- Foundations: só classe Tailwind + var(--ui-*) — sem HEX, valor fora de escala ou style inline fixo; dark mode pelos tokens.
- A tela RENDERIZA de fato (valide o render, não só o build — build verde ≠ tela correta): listas/tabelas exibem linhas com rolagem interna e o corpo NÃO colapsa a zero; no desktop o header mostra o divisor antes dos transversais e os filtros/critérios ficam na mesma altura.

SAÍDA ESPERADA
A TELA REAL, montada e funcional 1:1 com o PADRÃO ME — pronta para rodar e visualizar (um componente Vue (Composition API) usando os componentes REAIS do EletroDS/Nuxt UI, nada recriado do zero), com dados de exemplo realistas em PT-BR e os estados tratados. NÃO entregue descrição, esboço, pseudo-código ou esqueleto — entregue a tela montada. Feche com um resumo de 1–2 linhas do que a tela entrega ao usuário.

Um template default contextualizado. Header/footer de marca fixos, 1 CTA primário, fonte Roboto.