JSVision

Appearance

@jsvision/ui / layout

Function: layout() ​

layout(root, viewport): LayoutResult

Defined in: ui/src/layout/layout.ts:50

Lay out a box tree within a viewport. Pure: mutates neither root nor anything reachable from it; returns a fresh map with one entry per box.

The result maps each box to a parent-relative rect (relative to its parent's content-box origin). To get absolute screen coordinates, sum the origins of a box's ancestors as you walk down the tree.

Parameters ​

root ​

LayoutBox

The root of the layout input tree.

viewport ​

Size2D

The available area; clamped to integers ≥ 0. The root is placed at origin (0,0) with this size (its own size prop is not used — the root always fills the viewport).

Returns ​

LayoutResult

A LayoutResult mapping every box to its parent-relative rect.

Example ​

ts
import { layout, type LayoutBox } from '@jsvision/ui';

// A classic sidebar + main split across an 80×24 terminal, 1 cell of gap.
const sidebar: LayoutBox = { props: { size: { kind: 'fixed', cells: 20 } }, children: [] };
const main: LayoutBox = { props: { size: { kind: 'fr', weight: 1 } }, children: [] };
const root: LayoutBox = { props: { direction: 'row', gap: 1 }, children: [sidebar, main] };

const rects = layout(root, { width: 80, height: 24 });
rects.get(sidebar); // → { x: 0,  y: 0, width: 20, height: 24 }
rects.get(main);    // → { x: 21, y: 0, width: 59, height: 24 }  (fills the rest exactly)