# BarLayout

**Maturity:** experimental

Place opaque React content into reusable bar slots.

## Import

```tsx
import { BarLayout } from "@liquidify/react/bar-layout"
```

## Props

- `asChild`: `undefined`. Multiple owned elements cannot be merged onto one child.
- `center`: `LayoutSlot`. 
- `className`: `string | undefined`. Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.
- `end`: `LayoutSlot`. 
- `gap`: `LayoutSpacing | undefined`. Space between slots and their controls. Defaults to compact (8px).
- `ref`: `Ref<HTMLDivElement> | undefined`. Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.
- `shouldGrow`: `boolean | undefined`. Fill the available space between the occupied side regions. Defaults to false.
- `shouldShrink`: `boolean | undefined`. Allow the middle region to contract below its intrinsic width. Defaults to true.
- `sidebar`: `LayoutSlot`. Optional content below the bar, spanning its width.
- `start`: `LayoutSlot`. 
- `visualDebug`: `boolean | undefined`. Outline this element and its descendants without affecting layout.

## SwiftUI mapping

- `*(web-only, no direct SwiftUI analogue)*` → ``start / center / end / sidebar`` (web-only): Web layout slots for caller-owned content, with no direct SwiftUI API equivalent.
- `*(web-only, no direct SwiftUI analogue)*` → ``shouldGrow / shouldShrink / gap`` (web-only): CSS layout and token-spacing behavior.