Bibliotecas de componentes raramente têm estes, e toda aplicação acaba escrevendo-os: os painéis que decidem onde cada coisa vai. São finos, com flexbox e CSS grid por baixo, e com a aritmética em @vitral/core, para que um adaptador para outro framework a ganhe de graça; e sobrevivem ao modo sem estilo, porque o seu layout é feito de estilos inline, e não de classes.

Os sete

Componente	Para	O que oferece
StackPanel	Uma linha de filhos	Orientação, espaçamento, alinhamento e quebra de linha. Uma flex box com as props nomeadas pelo que fazem.
WrapPanel	Filhos que fluem para novas linhas	`itemWidth` e `itemHeight` dão o mesmo tamanho a todos os filhos; as linhas se acomodam no início em vez de se esticar.
UniformGrid	Células iguais	Linhas e colunas derivadas dos filhos quando só uma das duas é informada, com `firstColumn` para deixar um vão antes da primeira.
DockPanel	Regiões presas às bordas	Um slot por borda (`#top`, `#bottom`, `#left`, `#right`), e o slot padrão preenche o que sobra. `dockOrder` decide quem fica com os cantos.
Grid	Linhas e colunas, por definição	Dimensionamento em estrela: `columns="Auto,,2,120"`. `GridItem` posiciona um filho por linha e coluna, contadas a partir de 0, com spans.
SplitView	Um painel ao lado do conteúdo	`inline`, `overlay`, `compactInline` e `compactOverlay`; os modos flutuantes fecham com um clique fora e devolvem o foco.
Splitter	Painéis que o leitor redimensiona	Arraste um divisor, ou dê foco a ele e use as setas; Home e End o levam aos seus limites.

Um shell de aplicação, num template só

AppShell.vue

<DockPanel>
    <template #top><Toolbar /></template>
    <template #bottom><StatusBar /></template>

    <SplitView v-model:open="pane" display-mode="compactInline" :open-pane-length="240">
        <template #pane><Listbox :options="sections" /></template>

        <Grid columns="2*,Auto,*" :column-spacing="12">
            <GridItem :column="0"><DataGrid :value="rows" /></GridItem>
            <GridItem :column="2"><Panel header="Details" toggleable /></GridItem>
        </Grid>
    </SplitView>
</DockPanel>

Esse é o formato que a maioria das ferramentas de desktop compartilha: uma toolbar presa no topo, uma barra de status embaixo, um painel que se recolhe numa faixa de ícones e uma grade dividindo o resto.

Dimensionamento em estrela

Auto: a trilha ocupa o que o seu conteúdo precisa.
*: uma parte do que sobra. 2* fica com o dobro da parte de um *.
Um número: pixels.
Qualquer outra coisa (20%, 10rem, minmax(8rem, 1fr)) passa direto como CSS.

Os espaçamentos entre linhas e entre colunas são props separadas, e uma flag showGridLines contorna cada célula enquanto você acerta um layout.

Painéis de layout

Os sete

Um shell de aplicação, num template só

Dimensionamento em estrela