Layout

Resizable

Panels split by handles people drag.

import { Resizable } from "@flinbu/seed";

An editor layout

Tokens

<Button>Preview</Button>

Inspector

import { Button, Resizable, ResizablePanel } from "@flinbu/seed";

<div className="h-80 w-full overflow-hidden rounded-lg border border-secondary bg-primary">
  <Resizable withHandle>
    <ResizablePanel label="list" defaultSize={24} minSize={16}><div className="p-sm text-secondary body-body-3-regular">Tokens</div></ResizablePanel>
    <ResizablePanel label="canvas" minSize={30}>
      <Resizable direction="vertical">
        <ResizablePanel label="preview" defaultSize={65}><div className="seed-checker flex h-full items-center justify-center"><Button>Preview</Button></div></ResizablePanel>
        <ResizablePanel label="code"><pre className="m-0 p-sm font-mono text-secondary body-body-4-regular">{'<Button>Preview</Button>'}</pre></ResizablePanel>
      </Resizable>
    </ResizablePanel>
    <ResizablePanel label="inspector" defaultSize={26} minSize={18}><div className="p-sm text-secondary body-body-3-regular">Inspector</div></ResizablePanel>
  </Resizable>
</div>

Use it for

Editors with a list, canvas and inspector.
Code beside its preview.

Use something else for

Small screens: stack instead.

Props

Prop	Type	Default	Description
`direction`	`'horizontal''vertical'`	`'horizontal'`	Split.
`sizes / onSizesChange`	`number[]`	–	Remember a layout.
`withHandle`	`boolean`	`false`	Grip on handles.
`ResizablePanel`	`{ defaultSize?, minSize?, maxSize?, label? }`	`min 10, max 90`	Each panel.

Accessibility

Handles are focusable separators: arrows move 2%, Shift 10%, Home and End jump to the limits.
Double-click splits two panels evenly.