Padrões de tela
Palco de tela
surface, o palco em bg — e o conteúdo no resto. Na faixa vivem o ícone em bolha, o título, o subtítulo e o rail inteiro: o título deixa de ser texto que rola e vira endereço fixo.A grade
| Faixa | Medida | Token |
|---|---|---|
| Sidebar do app (é do shell) | 288px | w-72 · bg-surface · border-r |
| A grade do palco | 288px + o resto | lg:grid-cols-[18rem_minmax(0,1fr)] · a faixa em bg-bg |
| Calha palco → conteúdo | 28 → 42px | lg:gap-x-phi-4 |
| Conteúdo | resto (sem teto) | minmax(0,1fr) |
| Respiro na direita | 40px | lg:pr-10 |
| Topo do palco | 15px | lg:pt-3.75 |
| Recuo do título | 40px | lg:pl-10 |
| Bolha do ícone | 26px · ícone 14 | size-6.5 bg-brand-muted |
| Bolha → título | 14px | lg:gap-3.5 |
| Título | 26 → 33px | text-phi-display font-bold |
| Título → subtítulo | 4px | mt-1 text-sm text-fg-muted |
| Bloco do título → rail | 26px | mt-phi-3 |
| Topo do conteúdo | 55px (= 15 + 26 + 14) | lg:pt-13.75 |
| Pé do conteúdo | 40 → 68px | pb-phi-5 |
| Entre cards | 26px | space-y-phi-3 |
As duas linhas invisíveis
A linha da marca
A bolha do ícone tem os mesmos 26px do HipercliniMark da sidebar, e o centro dela cai no centro do cabeçalho h-14 — 28px, onde já moram a marca e o botão de recolher. Daí os 15px do topo do palco: 28 − 13.
A linha do título
O conteúdo entra em 55px (15 do topo + 26 da bolha + 14 do gap), então o topo do primeiro card nasce na linha do topo da CAIXA do título, não na do ícone. Mexeu em qualquer uma das três parcelas, mexe no lg:pt-13.75 junto.
Por isso os dois valores são fixos, e não o phi-4 fluido; o sticky do miolo usa o mesmo top-3.75 do padding, senão o bloco saltaria na primeira rolagem.
Como se usa
// loading.tsx embrulha a PAGE, nunca o layout do mesmo segmento: um await
// aqui faz o boundary de cima piscar antes de o palco aparecer.
export default function AjustesLayout({ children }) {
return (
<PageStage
icon={SlidersHorizontal}
title="Ajustes"
description={<Suspense fallback={…}><Descricao /></Suspense>}
rail={<Suspense fallback={…}><RailComPapel /></Suspense>}
>
{children}
</PageStage>
)
}
// page.tsx — a pilha de cards e o gap entre eles são da PÁGINA, não do palco.
return <div className="space-y-phi-3">{/* cards */}</div>NotaPalco cheio: quando o conteúdo é UMA caixa
data-palco-cheio; o palco reage por :has() em vez de uma prop, porque entre ele e a caixa há um layout de segmento que não sabe (nem deve saber) em que modo a tela está.Armadilha já pagaO layout do palco é síncrono
await no layout faz o boundary de cima piscar antes de o palco existir — a tela pisca inteira em vez de esqueletizar só o miolo. O que precisa de dado entra em Suspense como prop (descrição, rail com papel), não no corpo do layout.No celular
| Peça | Comportamento |
|---|---|
| A faixa | Vira cabeçalho empilhado: bolha + título + subtítulo, um sobre o outro. |
| O rail | Vira tira horizontal com rolagem e fade na borda direita. |
| Os paddings fixos | Somem: o pt-phi-4 fluido volta a valer. |
| O conteúdo | Coluna única (regra 11). |
Em uso hoje: /ajustes — onde o palco cobre as 11 sub-telas, precificação inclusive — e /configuracoes.