# @jimka/typescript-ui — capability manifest for AI agents > Read this before building any UI feature against this library, so you use what > exists instead of reinventing it. Open the linked pages for detail. ## Mental model This is a layout-driven, retained-mode framework — closer to Java Swing than to React or HTML flow. There is no flexbox, no CSS grid, no document flow: every Component is a rectangle absolutely positioned and sized in JavaScript by a LayoutManager in a single doLayout() pass. Construct UIs declaratively with the callable + options-bag idiom — `Panel({ layoutManager: VBox(), components: [Text('Name'), ComboBox()] })`. Theming is token-based; DOM events go through the Event class, semantic events through on/off/emit. Full orientation: https://jimka.github.io/typescript-ui/guide/mental-model. ## Capabilities (use these — do not rebuild them) Organized by task. Columns: task → symbol · import subpath · summary · docs. ### Layouts - Stack children vertically → **VBox** · `@jimka/typescript-ui/layout` · A layout manager that places children in a single vertical column. The `mode` option selects between preferred-height sequencing (with weig… · https://jimka.github.io/typescript-ui/layouts/VBox - Lay children out in a horizontal row → **HBox** · `@jimka/typescript-ui/layout` · A layout manager that places children in a single horizontal row. The `mode` option selects between preferred-width sequencing (with weight… · https://jimka.github.io/typescript-ui/layouts/HBox - Dock regions around a center (north/south/east/west/center) → **Border** · `@jimka/typescript-ui/layout` · A layout manager that divides a container into five named regions: north, south, east, west, and center. North and south regions span the f… · https://jimka.github.io/typescript-ui/layouts/Border - Split view with a draggable divider → **Split** · `@jimka/typescript-ui/layout` · A layout manager that splits the container into two or more resizable panels separated by draggable gutter elements. The split orientation… · https://jimka.github.io/typescript-ui/layouts/Split - Rows-and-columns grid with sized tracks → **Grid** · `@jimka/typescript-ui/layout` · A layout manager that tiles children in a uniform grid of equal-sized cells. Row and column counts can be configured explicitly or left at… · https://jimka.github.io/typescript-ui/layouts/Grid - Tabbed panels sharing one region → **Tab** · `@jimka/typescript-ui/layout` · A layout manager that renders a row of tab buttons along one edge of the container content area and shows exactly one child component at a… · https://jimka.github.io/typescript-ui/layouts/Tab - Card stack showing one child at a time → **Card** · `@jimka/typescript-ui/layout` · A layout manager that shows exactly one child component at a time, sizing it to fill the container's inner bounds. The visible child is sel… · https://jimka.github.io/typescript-ui/layouts/Card - Collapsible accordion sections → **Accordion** · `@jimka/typescript-ui/layout` · A layout manager that stacks vertically collapsible sections, each with a clickable header and an animated content panel. · https://jimka.github.io/typescript-ui/layouts/Accordion - Stretch a single child to fill the container → **Fit** · `@jimka/typescript-ui/layout` · A layout manager that expects exactly one child component and positions it inside the container's entire inner bounds. The default fill mod… · https://jimka.github.io/typescript-ui/layouts/Fit - Wrap children like text that reflows (horizontal flow) → **HFlow** · `@jimka/typescript-ui/layout` · A layout manager that packs children in horizontal rows, wrapping to a new line when the next child would exceed the container's inner widt… · https://jimka.github.io/typescript-ui/layouts/HFlow ### Containers / Windows - Group labelled form fields in a bordered box → **FieldSet** · `@jimka/typescript-ui/component/container` · A fieldset component with an embedded legend title. · https://jimka.github.io/typescript-ui/components/FieldSet - Auto-build a labelled form from a field descriptor list → **LabeledFieldSet** · `@jimka/typescript-ui/component/container` · A FieldSet whose content is a baseline-aligned form of title/field pairs, generalising the hand-rolled labelled-form pattern from the Bindi… · https://jimka.github.io/typescript-ui/components/LabeledFieldSet - Line up labelled components without a border/legend → **LabeledGrid** · `@jimka/typescript-ui/component/container` · A chrome-less baseline-aligned title/field grid, rendered in a plain `
` with no border and no legend. LabeledFieldSet composes one of… · https://jimka.github.io/typescript-ui/components/LabeledGrid - Self-managing tab container (add/close/select tabs) → **TabPanel** · `@jimka/typescript-ui/component/container` · A `Container` subclass that owns an internal `Tab` layout manager and exposes a tab-typed factory-accepting `addTab` / `addLazyTab` surface… · https://jimka.github.io/typescript-ui/components/TabPanel - Self-managing accordion of collapsible sections → **AccordionPanel** · `@jimka/typescript-ui/component/container` · A `Container` subclass that owns an internal `Accordion` layout manager and exposes a section-typed `addSection` surface so consumers do no… · https://jimka.github.io/typescript-ui/components/AccordionPanel - Bottom status bar with segments → **StatusBar** · `@jimka/typescript-ui/component/container` · A thin horizontal strip mounted at the bottom of a window or panel that surfaces a transient status message and small persistent indicators. · https://jimka.github.io/typescript-ui/components/StatusBar - Virtualize a huge child list (render only visible rows) → **VirtualScroller** · `@jimka/typescript-ui/component/container` · Shared scroll machinery for transform-based virtual lists (e.g. table body, tree). Owns the rows-container element, two custom Scrollbar ov… · https://jimka.github.io/typescript-ui/components/VirtualScroller - Mutually-exclusive group of toggle buttons → **ButtonGroup** · `@jimka/typescript-ui/overlay` · Manages mutual exclusivity among a set of RadioButton or ToggleButton instances. · https://jimka.github.io/typescript-ui/components/ButtonGroup - Corner-pinned floating panel → **FloatingPanel** · `@jimka/typescript-ui/component/container` · A `Panel` that pins itself to one corner of its host's inner box, via an owned AnchorConstraints instance. · https://jimka.github.io/typescript-ui/components/FloatingPanel ### Inputs / Forms - Semantic
container with submit handling → **Form** · `@jimka/typescript-ui/core` · A Panel that bakes the semantic `` tag and wires the native `submit` event to a single `onSubmit` callback. · https://jimka.github.io/typescript-ui/components/Form - Push button → **Button** · `@jimka/typescript-ui/component/button` · A push button component with a text label and configurable pressed-state appearance. · https://jimka.github.io/typescript-ui/components/Button - Two-state toggle button → **ToggleButton** · `@jimka/typescript-ui/component/button` · A toggle button component that switches between selected and unselected states on each click. · https://jimka.github.io/typescript-ui/components/ToggleButton - Button with a primary action plus a dropdown menu → **SplitButton** · `@jimka/typescript-ui/component/button` · A push button with a trailing dropdown chevron. The main button face fires the primary `"action"` event exactly like `Button`; clicking the… · https://jimka.github.io/typescript-ui/components/SplitButton - Button whose click opens a dropdown menu → **MenuButton** · `@jimka/typescript-ui/component/button` · A push button whose click toggles a rebuild-mode dropdown `Menu` anchored under its bottom-left corner. The menu opens below the button, an… · https://jimka.github.io/typescript-ui/components/MenuButton - Button whose click opens a custom popup panel → **PopupButton** · `@jimka/typescript-ui/component/button` · A push button whose click toggles a PopupPanel anchored under its bottom-left corner, mirroring `MenuButton` with a `PopupPanel` in place o… · https://jimka.github.io/typescript-ui/components/PopupButton - Clickable text link that activates in-app (click / Enter) → **Link** · `@jimka/typescript-ui/component/input` · A text link: link-coloured, underlined, and activated by a click or the Enter key. Its **hit area is exactly its text** — it is a Text subc… · https://jimka.github.io/typescript-ui/components/Link - Checkbox → **Checkbox** · `@jimka/typescript-ui/component/input` · A custom-drawn checkbox rendered as a focusable `
` with `role="checkbox"`. · https://jimka.github.io/typescript-ui/components/Checkbox - Radio button (mutually exclusive within a group) → **RadioButton** · `@jimka/typescript-ui/component/input` · A custom-drawn radio button rendered as a focusable `
` with `role="radio"`. The ring + dot is drawn with framework primitives; the nat… · https://jimka.github.io/typescript-ui/components/RadioButton - On/off switch → **Toggle** · `@jimka/typescript-ui/component/input` · A custom-drawn on/off switch widget rendered as a focusable `
` with `role="switch"`. · https://jimka.github.io/typescript-ui/components/Toggle - Slider for a numeric range → **Slider** · `@jimka/typescript-ui/component/input` · A custom-drawn range slider rendered as a focusable `
` with `role="slider"`. · https://jimka.github.io/typescript-ui/components/Slider - Single-line text field → **TextField** · `@jimka/typescript-ui/component/input` · A single-line text field component backed by an `` element. · https://jimka.github.io/typescript-ui/components/TextField - Multi-line text area → **TextArea** · `@jimka/typescript-ui/component/input` · A multi-line text area component backed by a `