Tree and layout

The package exports a set of pure functions for manipulating and measuring the panel/split tree. None of them depend on React or the DOM.

Tree manipulation

import { splitPanel, setSplitRatio } from 'react-bannerkit'

Function	Purpose
`splitPanel(node, panelId, dir)`	Split a panel into two siblings, either `"cols"` or `"rows"`.
`setSplitRatio(node, splitId, ratio)`	Change the divider position of a split.
`deletePanel(node, panelId)`	Remove a panel and give its space to its sibling.

Every function returns a new tree — the originals are never mutated.

Layout computation

import { computeLayout, insetStyle, resolveHeight } from 'react-bannerkit'

Function	Purpose
`computeLayout(template, breakpoint)`	Walk the tree and return absolute positions for every element.
`insetStyle(element)`	Convert a positioned element's layout into CSS `position: absolute` + `inset`.
`resolveHeight(template, breakpoint)`	Compute the banner's pixel height from its sizing mode and the container width.

These are what the renderer calls internally. You can use them to build a custom renderer, a static export pipeline, or a layout test.

Working example

import { computeLayout, resolveHeight } from 'react-bannerkit'
 
const height = resolveHeight(template, 'laptop')
const layout = computeLayout(template, 'laptop')
// layout is a Map<elementId, { x, y, width, height }>