Shell

Resizable

Two-pane container with a draggable handle. Pointer-based — works with mouse, touch, pen. No headless dep.

Examples

Left (40%)

Right (60%)

<Resizable bind:primarySize>
  {#snippet primary()}<div>Left</div>{/snippet}
  {#snippet secondary()}<div>Right</div>{/snippet}
</Resizable>

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Split direction.
`primarySize`	`number`	`50`	Primary pane size in percent (bindable).
`minPrimary`	`number`	`10`	Min primary size (percent).
`maxPrimary`	`number`	`90`	Max primary size (percent).
`primary`	`Snippet`	`—`	Left / top pane content.
`secondary`	`Snippet`	`—`	Right / bottom pane content.

CLI

npx @a3tai/mittsu add resizable