# XWUILayoutFlow

A Layer-2 collection layout that arranges lists, grids, card decks, and catalog grids by direction, axis, and placement strategy. It is a dispatcher: the `variant` (`itemGroup` / `cards` / `children` / `catalog`) selects which engine to mount - composing XWUIItemGroup, XWUILayoutCards, XWUIGrid, XWUILayoutMasonry, and XWUIBox. Control reading order with `horizontalDirection` / `verticalDirection`, the primary axis with `layoutDirection`, grid auto-flow with `contentFlow`, and choose `sequential` grid fill or `balanced` masonry via `placementStrategy`. Feed it `items`, `cards`, or `children` to match the variant.

## Usage

```ts
import { XWUILayoutFlow } from './XWUILayoutFlow';

const flow = new XWUILayoutFlow(
  container,
  { children: cardElements },
  {
    variant: 'children',
    layoutDirection: 'vertical',
    placementStrategy: 'balanced',
    cols: 3,
    minColWidth: '280px',
  }
);
```

## Vertical flow columns

Six varied-height tiles distributed into three vertical columns using sequential placement.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Vertical flow columns
description: Six varied-height tiles distributed into three vertical columns using sequential placement.
```

## Balanced gallery

Eight varied-height tiles packed into four balanced columns for an even, Pinterest-style gallery.

```example
file: examples/BalancedGallery.ts
html: examples/BalancedGallery.html
title: Balanced gallery
description: Eight varied-height tiles packed into four balanced columns for an even, Pinterest-style gallery.
```

## Right-to-left row

Five tiles flowed horizontally with right-to-left reading order to demonstrate RTL direction support.

```example
file: examples/RtlRow.ts
html: examples/RtlRow.html
title: Right-to-left row
description: Five tiles flowed horizontally with right-to-left reading order to demonstrate RTL direction support.
```

```api
```