Padrões de tela
Cabeçalho de página
betaUm por tela. E a faixa de identidade para registros com abas.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
Um por tela
O título de página usa text-page, o papel tipográfico definido no theme.css. Os componentes de controle param em 16px e não servem aqui — por isso a escala de tela existe.
<ScreenHeader
title="Bom dia, Renata"
description="Quatro turmas ativas nesta semana."
>
<Button variant="outline">Nova lição</Button>
<Button>Programar aplicação</Button>
</ScreenHeader>As ações ficam no topo
PageHeaderActions alinha à direita e ao topo, para não descer junto quando a descrição quebra em duas linhas. Uma ação primária por tela; o resto é outline ou ghost.
Quando a tela é o recorte de um registro
As telas de um aluno, de uma turma ou de uma lição não são páginas soltas: são recortes do mesmo registro. A faixa de identidade preserva nome, meta, status, alertas e ação principal enquanto se navega entre as abas.
<ScreenEntityHeader
media={<Avatar size="lg"><AvatarFallback>7B</AvatarFallback></Avatar>}
name="7º ano B"
meta="32 alunos · trilha de leitura inferencial"
status={<Badge variant="teal">Ativa</Badge>}
actions={<Button>Programar aplicação</Button>}
tabs={<Tabs>…</Tabs>}
/>Ela vive junto da casca, não como componente avulso: uma tela que montasse essa faixa por conta própria sairia da correção quando a casca mudasse. A API fala em entidade, e não em aluno, porque o mesmo componente serve a qualquer registro com abas.