Layout and panes

Build capability-aware rows, columns, bounded containers, split panes, and keyboard-resizable regions.

Overview

Build capability-aware rows, columns, bounded containers, split panes, and keyboard-resizable regions.

Installation

npx @mwillbanks/tuil add box container stack split-pane header footer sidebar pane-tabs scroll-area resizable-pane

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`Box`	`function Box`	Public function Box.
`Container`	`function Container`	Public function Container.
`Stack`	`function Stack`	Public function Stack.
`HStack`	`function HStack`	Public function HStack.
`VStack`	`function VStack`	Public function VStack.
`Pane`	`component Pane`	Public component Pane.
`SplitPane`	`function SplitPane`	Public function SplitPane.
`Header`	`constant Header`	Public constant Header.
`Footer`	`constant Footer`	Public constant Footer.
`Sidebar`	`constant Sidebar`	Public constant Sidebar.
`PaneTabs`	`function PaneTabs`	Public function PaneTabs.
`ScrollArea`	`function ScrollArea`	Public function ScrollArea.
`ResizablePane`	`function ResizablePane`	Public function ResizablePane.

Interaction

Resizable panes consume scoped arrow-key input while passive layout primitives only project Ink layout props.

API and events

ResizablePane reports size changes through onSizeChange; other layout components are passive.

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

import type { ComponentProps } from "react";
import { Box } from "@/components/tuil/primitives/box";

export function Example(props: ComponentProps<typeof Box>) {
  return <Box {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.