Read the root AGENTS.md first. This file adds ui-specific rules.
Compound and interactive widgets: Select, Tabs, Modal, Toggle, Wizard, Drawer, MultilineTextInput, ColorPicker, DatePicker, prompts, NotificationCenter. These build on top of @termuijs/widgets.
- Create
packages/ui/src/<Name>.tsand<Name>.test.tsat the package src root. - Extend
Widgetfrom@termuijs/widgets(not from a relative path; ui depends on widgets). - Export from
packages/ui/src/index.ts.
import { Widget } from '@termuijs/widgets';
import { type Screen, type KeyEvent, type Style, mergeStyles, defaultStyle, styleToCellAttrs, caps } from '@termuijs/core';- Interactive components implement
handleKey(event: KeyEvent). Key names are lowercase:enter,left,right,up,down,space,escape,tab. NeverEnterorArrowUp. - Build the base style with
mergeStyles(defaultStyle(), { ... }), not a raw object. - Set
focusable = trueon components that take keyboard focus. - Reference
src/Toggle.tsfor a small component andsrc/Wizard.tsfor a multi-step one.
bun vitest run packages/ui