Resizable

kai-resizable

Divides a screen into regions the user can resize, and respects the limits each region sets.

• Shadow DOM
• 2 events
• Up to 3 panels (nest for more)
• px or % sizing
• Expand-to-fill protocol

Preview

When to use

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 and output split.

Usage

<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">
  import '@kitn.ai/ui/web-components';
  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: a <kai-artifact expandable> fires kai-maximize-intent (bubbling, composed) and the nearest enclosing <kai-resizable> catches it and hides siblings. No wiring needed; Escape or Collapse restores the layout.

Examples

Sidebar + Chat

Code

Vertical Split

Code

Three-Panel Layout

Code

Expand-to-Fill Protocol

Pressing Expand inside an item maximizes that panel automatically:

<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">
  import '@kitn.ai/ui/web-components';
  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

Slot	Mode	Purpose
(default)	inject	The `<kai-resizable-item>` panels, in order. Dividers are inserted between them.

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
orientation	"horizontal" | "vertical"	'horizontal'	Whether the group lays out as a row or a column.
maximizedIndex	number | null	null	Which item index is maximized (null = none). Declarative source of truth.
handle	"line" | "grip" | "none"	'line'	Divider affordance drawn inside each draggable handle's 8px grab zone.

Events

Event	Detail	Notes
kai-change	{ … }	Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent.
kai-maximize-change	{ … }	Observe layout maximize state.
kai-maximize-state	{ … }	Authoritative maximize state.

Methods

Method	Signature	Notes
maximize	(index: number): void	Imperatively maximize the item at `index` (thin wrapper over `maximizedIndex`).
restore	(): void	Imperatively restore from the maximized layout.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ResizableHandle

---

Need a hand? Report a bug Ask for help