# Layout

Multi-pane page shell for tool UIs: optional header/footer bands and a horizontal
middle row for start, content, and end zones. Pair with `LayoutContent` and
`LayoutPanel` for master-detail inspectors.

## Examples

### Default

```tsx
import { useState } from 'react';
import {
  Button,
  Layout,
  LayoutContent,
  LayoutPanel,
  ResizeHandle,
  useResizable,
} from '@var-ui/react';

const { end } = useResizable({
  regions: { end: { defaultWidth: 280, minWidth: 220, maxWidth: 400 } },
});

<Layout
  height="auto"
  padding={0}
  content={<LayoutContent padding={0}>{/* list */}</LayoutContent>}
  end={
    <>
      <LayoutPanel resizable={end} hasDivider label="Details" role="complementary">
        Inspector
      </LayoutPanel>
      <ResizeHandle {...end.handleProps} />
    </>
  }
/>
```

```astro
---
import { Layout, LayoutContent, LayoutPanel } from '@var-ui/astro';
---

<Layout height="auto" padding={0}>
  <LayoutPanel slot="start" side="start" width={180} hasDivider>Nav</LayoutPanel>
  <LayoutContent>Main</LayoutContent>
  <LayoutPanel slot="end" side="end" width={240} hasDivider>Inspector</LayoutPanel>
</Layout>
```

```html
<!-- Static shell — resize requires React -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  | Main zone shorthand — used when `content` is omitted. |
| className | string \| undefined | no |  |  |
| content | ReactNode | no |  | Main zone; wins over `children` when both are set. |
| contentWidth | number \| undefined | no |  | Constrains header/content/footer inner wrappers via `margin-inline: auto`. |
| defaultHasDividers | boolean \| undefined | no | false | Divider default inherited by `LayoutHeader`/`LayoutFooter` when they don't set `hasDivider`. |
| end | ReactNode | no |  | Right/end rail, usually a `LayoutPanel`. |
| footer | ReactNode | no |  | Bottom chrome band, usually a `LayoutFooter`. |
| header | ReactNode | no |  | Top chrome band, usually a `LayoutHeader`. |
| height | "fill" \| "auto" \| undefined | no | 'fill' |  |
| padding | LayoutPadding \| undefined | no |  | Outer/inner spacing step for all zones — sets shell CSS vars on the root. Omit for recipe default (`space[4]`). |
| start | ReactNode | no |  | Left/start rail, usually a `LayoutPanel`. |

## Accessibility

Use `role` and `label` on `LayoutContent` and `LayoutPanel` when multiple landmarks of the same type appear on a page.