PageHeader e PageStack são os dois padrões de página do Admin. O catálogo do HeroUI não tem cabeçalho de página nem um ritmo vertical próprio, então estes são os únicos lugares onde o Admin monta o topo de uma tela e o espaço entre as suas seções. O layout responde ao tamanho do próprio contêiner (container query), porque o menu lateral aberto estreita o conteúdo sem mudar a janela.

import { PageHeader, PageStack } from "@rastreio-x/ui";

Padrão

Título (h1) e uma descrição de uma linha, com até 62 caracteres por linha. Use o mesmo texto da descrição em todas as visões da página, para o cabeçalho não mudar ao alternar.

Com ações

As ações ficam no canto, nesta ordem: estado, ação secundária, ação principal. Só uma é primary.

Com migalhas e selo

eyebrow recebe as migalhas acima do título. badge fica na linha do título, fora do h1, e nomeia o estado do objeto.

Com seletor de visão

viewSwitch ganha uma linha própria sob a descrição, sempre na mesma posição, para o cabeçalho não pular entre visões.

Ações em contêiner estreito

Abaixo de 40rem, duas ou mais ações descem para a última linha do cabeçalho. Com uma ação só, ela fica ao lado do título; stackActions força a descida quando uma ação opcional pode chegar depois da carga, para a contagem de filhos não deslocar a página.

Ritmo da página

PageStack aplica os três espaços da página: section (8 unidades, 28 px) entre seções, block (4, 14 px) entre blocos e inner (2, 7 px) dentro de um bloco. O gap padrão é section.

Tela do Admin

Na prática o PageStack raiz separa o cabeçalho das seções, e um segundo PageStack com gap="block" agrupa os cartões.

Anatomia

O cabeçalho é uma grade de duas colunas com áreas nomeadas; áreas sem conteúdo não ocupam espaço.

Propriedades

Cabeçalho (PageHeader):

Pilha (PageStack):

Animações

O cabeçalho em si é estático: título, ações e descrição aparecem sem transição. O indicador do ViewTabs, quando usado em viewSwitch, desliza entre as visões com mola (Motion) e, com prefers-reduced-motion, salta direto para a posição final. O PageStack não anima.

Acessibilidade

• O título é o único h1 da tela; titleRef o recebe com tabIndex={-1} para o foco ir ao título depois de uma navegação.
• A descrição é um parágrafo comum; o selo é texto, então o estado nunca depende só da cor.
• PageStack as="section" troca o elemento raiz quando a região precisa de landmark; nesse caso dê um nome com aria-labelledby.
• O espaçamento não depende da janela: o conteúdo continua legível com o menu lateral aberto e em 390 px.

Boas práticas

• Use PageStack para o espaço entre seções e blocos; nunca mt-* ou gap-* avulsos para o ritmo da página.
• Ações opcionais que chegam depois da carga pedem stackActions, nas telas irmãs também.
• Títulos em Title Case curto: "Pedidos", "Marca", "Fontes".
• Não esconda ações em um menu quando cabem no canto do cabeçalho.

Relacionados

• Button para as ações do cabeçalho.
• Breadcrumbs para o eyebrow.
• Chip para o badge.
• Widget para o painel que vem logo abaixo do cabeçalho.