# XWUISplitter

A draggable splitter bar that resizes one of its sibling panes - the single
resize engine in xwui (a resizable `XWUISeparator` Divider delegates to it).

## Usage

Place it between two panes inside a flex container:

```ts
import { XWUISplitter } from '@exonware/xwui/basic';

// row.children = [leftPane, <splitter host>, rightPane]
const splitter = new XWUISplitter(host, {}, {
  orientation: 'vertical',   // vertical bar → resizes WIDTH
  target: 'previous',        // resize the left pane
  minSize: 120,
  maxSize: 600,
  snap: [200, 300, 400],
});
splitter.onResize((px) => console.log('left pane is now', px));
```

| Config | Default | Notes |
|---|---|---|
| `orientation` | `'vertical'` | `vertical` resizes width, `horizontal` resizes height |
| `target` | `'previous'` | which sibling pane the drag resizes |
| `minSize` / `maxSize` | `40` / ∞ | clamp (px) |
| `snap` | - | detents (px), snaps within ~12px |
| `step` | `16` | keyboard Arrow-key step (Shift = 3×) |

Double-click the bar to clear the dragged size. Focus it and use Arrow keys to
resize. Emits a `resize` event (`onResize`) with the new pane size.

## Basic Usage

Vertical split between two panes with snap detents.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Vertical split between two panes with snap detents.
```

## Horizontal split

Stacked panes - drag up/down to resize editor height.

```example
file: examples/HorizontalStack.ts
html: examples/HorizontalStack.html
title: Horizontal split
description: Stacked panes - drag up/down to resize editor height.
```

## Resize the next pane

Fixed sidebar; main canvas resizes via `target:'next'`.

```example
file: examples/ResizeNextPane.ts
html: examples/ResizeNextPane.html
title: Resize the next pane
description: Fixed sidebar; main canvas resizes via target:'next'.
```

## Resize event

`onResize()` drives a status line with pane width in px.

```example
file: examples/OnResize.ts
html: examples/OnResize.html
title: Resize event
description: onResize() drives a status line with pane width in px.
```