Padrões de tela
Barra de tela
O cabeçalho de toda tela sem sub-telas: faixa de 56px que sangra de ponta a ponta e cola no topo. Ela substituiu o bloco antigo (ícone em bolha + título grande + subtítulo), que comia ~150px de altura e sumia na primeira rolagem.
components/page-bar.tsxh-14 · sticky lg+Cadastros é o molde
Anatomia
Título à esquerda, rastro da seção ao lado, ferramentas no miolo (quando existem) e ação à direita.
CadastrosPacientesListaFunil
| Peça | Medida | Token |
|---|---|---|
| Altura da faixa | 56px | h-14 · border-b · bg-surface |
| Posição | cola no topo no lg+ | lg:sticky lg:top-0 · z-30 |
| Margem lateral | 16 → 24px | px-4 lg:px-6 (wide) |
| Teto de largura | nenhum | — (o wide não centra) |
| Título (h1) | 15px · 600 | text-[0.9375rem] font-semibold |
| Rastro da seção | 14px · fg-muted | separador · em ink-400 |
| Ferramentas (miolo) | h-7/h-8 · pílula | slot tools · gap-3 |
| Ações (direita) | h-8 · pílula | slot action · ml-auto gap-2 |
| Topo do corpo | 28 → 42px | py-phi-4 (PageBody) |
| Entre blocos do corpo | 26px | mb-phi-3 |
Como se usa
A barra é o PRIMEIRO filho do <main>, fora do PageBody — é ela que sangra de ponta a ponta.
// wide SEMPRE, nas duas: a régua de largura do app é uma só (o palco também
// não tem teto), e barra centrada com corpo largo desalinha o rastro.
<PageBar title="Cadastros" wide />
<PageBody wide>
{/* resumo → toolbar → lista (space-y / mb-phi-3) */}
</PageBody>
// Quem SABE a seção publica: o rail, as abas — nunca a página.
usePageSection(abaAtiva.label) // → "Cadastros · Pacientes"
// Tela cheia (Atendimento): sem corpo rolável não há onde pôr a toolbar, então
// as ferramentas entram no MIOLO da barra e o cluster de ação fica na direita.
<PageBar title="Atendimento" wide
tools={<><Visao /><BuscaCmdK /></>}
action={<><Dupla /><AtenderFila /></>} />| Prop | O que faz |
|---|---|
| title | O h1 da tela. A barra é o cabeçalho, não decoração. |
| wide | Mesmo valor do PageBody da tela — alinha o rastro com o conteúdo. |
| tools | Ferramentas no MIOLO. Só pra tela sem corpo rolável; tela com corpo põe a toolbar no corpo. |
| action | A ação própria da tela, quando ela não é salvar (“Novo cadastro”). |
O salvar sobe pra barra
Três coisas chegam à barra por contexto, porque quem sabe cada uma vive num lugar diferente da árvore.
| O quê | Quem publica |
|---|---|
| A seção do rastro | O rail ou as abas, via usePageSection — nunca a página. |
| O botão de salvar | Cada bloco de formulário, lá no fundo da página, via useSaveSlot. |
| A própria barra | A tela, ao renderizar <PageBar>. |
Sem barra montada, o SaveBar volta a desenhar o botão dentro do card: uma tela que ainda não migrou continua com jeito de salvar. E um painel de aba OCULTA fecha o portão (SaveSlotGate) — sem isso, um bloco de aba escondida que nasce “sujo” publicava “Confirmar limites” sobre “Jeito de falar”.
NotaDois contextos, de propósito
AÇÕES é estável (só callbacks) e ESTADO muda a cada publicação. Um contexto só faria o efeito de montagem da barra rodar em toda mudança de estado — montar e desmontar em laço.
No celular
Sticky só a partir de lg.
No celular o topo já tem header + navegação grudados, e uma terceira faixa fixa comeria a tela. O que era subtítulo desce pro corpo, em text-sm text-fg-muted, quando carrega informação — e some quando era só cerimônia.
Armadilha já pagaUm h1 por página
O título da barra é o
h1. Quem desenhar uma faixa própria (o modo “atender fila” do Atendimento) copia a geometria, mas não o h1 — dois h1 na mesma página quebram a navegação por títulos no leitor de tela.