# Resizable

A composable, draggable multi-panel layout container — slot in up to three panels and get interactive dividers with min/max constraints for free.

<p class="kai-tag-sub">kai-resizable</p>

Compose a draggable multi-panel shell — sidebar + chat, list + inspector, three-up — by placing `<kai-resizable-item>` children inside; dividers, drag logic, keyboard resize, and expand-to-fill are handled for you.

## Preview

> **tip:** 
Use `<kai-resizable>` for any app shell built from regions the user should resize — a conversation list beside a thread, a thread beside an artifact, a stacked code-editor / output split. In SolidJS, use the `Resizable` and `ResizablePanel` components from `@kitn.ai/ui` directly for tighter reactivity integration.

## Usage

```html
<kai-resizable orientation="horizontal" style="display:block;height:400px">
  <kai-resizable-item size="25%" min="160px"> <!-- list panel --> </kai-resizable-item>
  <kai-resizable-item> <!-- chat panel, fills remaining space --> </kai-resizable-item>
  <kai-resizable-item size="30%"> <!-- preview panel --> </kai-resizable-item>
</kai-resizable>

<script type="module">

  document.querySelector('kai-resizable')
    .addEventListener('kai-change', (e) => console.log(e.detail.sizes));
</script>
```

- **`size`** — initial main-axis size: `"280px"` or `"25%"`. Omit for a flexible panel that fills remaining space.
- **`min` / `max`** — resize bounds in px or %, e.g. `min="140px"` or `max="50%"`.
- **`locked`** — fixes the panel; adjacent dividers become non-draggable separators.
- **`hidden`** — removes the panel and its divider; remaining panels reflow. Toggle at runtime to collapse/restore.
- **`maximizedIndex`** — set this property to the zero-based panel index to maximize it (`null` to restore). Or call `el.maximize(n)` / `el.restore()` imperatively.

**Expand-to-fill** — when a `<kai-artifact expandable>` fires `kai-maximize-intent` (bubbling, composed), the nearest enclosing `<kai-resizable>` catches it automatically and hides siblings. No wiring needed. **Escape** or **Collapse** restores the layout.

## Examples

### Sidebar + Chat

### Vertical Split

### Three-Panel Layout

### Expand-to-Fill Protocol

Wire `<kai-artifact expandable>` inside an item — pressing **Expand** maximizes that panel automatically:

```html
<kai-resizable orientation="horizontal" style="display:block;height:480px">
  <kai-resizable-item size="20%" min="120px"> …list… </kai-resizable-item>
  <kai-resizable-item min="140px">           …chat… </kai-resizable-item>
  <kai-resizable-item size="35%" min="200px">
    <kai-artifact src="…/index.html" expandable></kai-artifact>
  </kai-resizable-item>
</kai-resizable>

<script type="module">

  const r = document.querySelector('kai-resizable');
  r.addEventListener('kai-change', (e) => console.log('sizes', e.detail.sizes));
  r.addEventListener('kai-maximize-change', (e) => console.log(e.detail));
  // r.restore(); or r.maximizedIndex = null;
</script>
```

## Slots

## Props

## Events

## Methods

## Composed from