Component libraries rarely have these, and every application ends up writing them: the panels that decide where things go. They are thin, flexbox and CSS grid underneath, with the arithmetic in @vitral/core so an adapter for another framework gets it for free, and they survive unstyled mode, because their layout is inline styles rather than classes.

The seven

Component	For	What it gives you
StackPanel	One line of children	Orientation, spacing, alignment and wrapping. A flex box with the props named after what they do.
WrapPanel	Children that flow onto new lines	`itemWidth` and `itemHeight` give every child the same size; lines pack at the start instead of stretching.
UniformGrid	Equal cells	Rows and columns derived from the children when only one is given, with `firstColumn` for a gap before the first.
DockPanel	Regions welded to the edges	A slot per edge (`#top`, `#bottom`, `#left`, `#right`), and the default slot fills what is left. `dockOrder` decides who wins the corners.
Grid	Rows and columns, by definition	Star sizing: `columns="Auto,,2,120"`. `GridItem` places a child by 0-based row and column, with spans.
SplitView	A pane beside the content	`inline`, `overlay`, `compactInline` and `compactOverlay`; the floating modes light-dismiss and return focus.
Splitter	Panels the reader resizes	Drag a gutter, or focus it and use the arrow keys; Home and End take it to its limits.

An application shell, in one template

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>

That is the shape most desktop tools share: a toolbar docked to the top, a status strip to the bottom, a pane that collapses to a strip of icons, and a grid splitting the rest.

Star sizing

Auto: the track takes what its content needs.
*: one share of what is left. 2* takes twice the share of a *.
A number: pixels.
Anything else (20%, 10rem, minmax(8rem, 1fr)) passes through as CSS.

Row and column spacing are separate props, and a showGridLines flag outlines every cell while you are getting a layout right.

Layout panels

The seven

An application shell, in one template

Star sizing