---

## SplitPane
Resizable two-pane layout. A draggable divider (ARIA "window
splitter", role="separator") splits the container into a `start` and an `end`
pane; the first pane's share is controlled by `ratio` (0–1) and supports
`bind:ratio`. Resize by pointer drag or keyboard (Arrow / Home / End), with
optional collapse-to-zero. Panes clip their own overflow so their content
scrolls independently. For an application shell with a permanent nav rail
prefer SidebarLayout / Sidebar; reach for SplitPane when both regions are
primary content the user should be able to rebalance.

**Import:** `import { SplitPane } from '@urbicon-ui/blocks';`

### Examples
```svelte
<SplitPane bind:ratio={split} min="20%" max="80%">
  {#snippet start()}<nav class="p-4">…</nav>{/snippet}
  {#snippet end()}<main class="p-4">…</main>{/snippet}
</SplitPane>
```

```svelte
<SplitPane orientation="vertical" collapsible defaultRatio={0.3}>
  {#snippet start()}<section class="overflow-auto">Editor</section>{/snippet}
  {#snippet end()}<section class="overflow-auto">Preview</section>{/snippet}
</SplitPane>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| end | `Snippet` | yes |  | Second pane — fills the space the first pane leaves. Required. |
| start | `Snippet` | yes |  | First pane. In `horizontal` orientation it is the leading (left) pane; in `vertical` the top pane. Required. |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| ...SplitPaneVariants | `VariantProps` | no |  | Styling variants from SplitPaneVariants |
| class | `string` | no |  | Extra classes merged onto the root container (the flex box). |
| collapseThreshold | `number` | no | 48 | Pixel width/height of the first pane below which a drag snaps it collapsed. Only used when `collapsible`. |
| collapsible | `boolean` | no | false | Allow the first pane to collapse to zero: dragging below `collapseThreshold`, or pressing Enter on the divider, snaps it shut. |
| defaultRatio | `number` | no | 0.5 | Initial ratio for uncontrolled use; also the target of a double-click reset. |
| disabled | `boolean` | no | false | Disable resizing — the divider becomes inert (not focusable, no pointer/keyboard response). Panes stay visible. |
| handle | `Snippet` | no |  | Custom content rendered inside the divider (e.g. a grip icon). Replaces the default line; the divider stays the focusable separator. |
| handleLabel | `string` | no | 'Resize panes' | Accessible name for the divider (its `aria-label`). |
| max | `SplitPaneLimit` | no | '90%' | Upper bound for the first pane — px (`number`) or percentage string (`'90%'`). |
| min | `SplitPaneLimit` | no | '10%' | Lower bound for the first pane — px (`number`) or percentage string (`'20%'`). |
| mint | `MintProp` | no | 'none' | Micro-interaction preset applied to the divider. |
| onCollapsedChange | `(collapsed: boolean) => void` | no |  | Fires when the first pane collapses (`true`) or re-expands (`false`) via drag or Enter. |
| onRatioChange | `(ratio: number) => void` | no |  | Fires after a drag/keyboard interaction changes the ratio. Receives the new ratio (`0`–`1`). Does not fire for consumer-driven `bind:ratio` writes. |
| orientation | `'horizontal' | 'vertical'` | no | 'horizontal' | Layout axis. `horizontal` places panes side by side (vertical divider); `vertical` stacks them (horizontal divider). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ SplitPane: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| ratio | `number` | no |  | First pane's share of the container, `0`–`1`. Supports `bind:ratio`. When omitted, starts at `defaultRatio` and is managed internally. |
| slotClasses | `Partial<Record<SplitPaneSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: root (the flex container — what `class` also targets) | startPane | endPane | handle (the draggable divider / separator). |
| unstyled | `boolean` | no |  | Remove all default tv() classes; combine with `slotClasses` to rebuild the look. |

Inherited from:
- Omit<SplitPaneVariants, 'dragging' | 'orientation' | 'disabled'> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)

### Types
```ts
type MintProp = | string
  | { name: string; config?: MintConfig & Record<string, unknown> }
  | Array<string>
  | Array<string | { name: string; config?: MintConfig & Record<string, unknown> }>
```

```ts
type SplitPaneLimit = number | string
```

```ts
interface MintConfig {
trigger?: 'hover' | 'click' | 'focus' | 'load';
  duration?: number;
  delay?: number;
  easing?: string;
  disabled?: boolean;
}
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type VariantProps = Omit<
  Exclude<Parameters<T>[0], undefined>,
  'class'
>
```

### Slots (slotClasses keys)
`root`, `startPane`, `endPane`, `handle`