Application shell

Compose full-screen terminal applications from a main content region, top application bar, and bottom status surface.

Overview

Compose full-screen terminal applications from a main content region, top application bar, and bottom status surface.

Installation

npx @mwillbanks/tuil add app-shell app-bar status-bar

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
`AppShell`	`function AppShell`	Public function AppShell.
`AppBar`	`function AppBar`	Public function AppBar.
`StatusBar`	`function StatusBar`	Public function StatusBar.

Interaction

These are structural components. Child navigation, commands, and controls own interaction.

API and events

Shell components forward child behavior and do not emit their own events.

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 { AppShell } from "@/components/tuil/components/app-shell";

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

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