zablooContainer
Grouping and flex layout.
Component catalog
The thirteen kinds of node the format defines, one page each: what it draws, the props it takes, the states it carries, and how it behaves on an older SDK.
A zabloo screen is a tree of nodes,
and the format defines thirteen kinds of node — no more. This catalog is one
page per kind: what it draws, the props it takes, the states it carries, the
actions it fires, how it behaves on an older SDK, and the @zabloo/react
components that produce it.
Thirteen sounds small next to the widget list of any UI toolkit, and it is meant to. Cards, accordions, dropdowns and grids are not missing — they are built out of these thirteen, in your own code, and they flatten away before the game ever sees them. A new kind is added only when it makes something possible that none of the existing ones can express; never because a design has a name for it.
The four groups below are the four problems the set had to cover. Read them in order and the size of the set explains itself.
A tile with a Run control draws its component on the GPU, right there. One preview runs at a time — starting another returns the previous one to its poster, because a browser caps how many WebGL contexts a page may hold and drops the oldest without asking.
Structure
Putting things on the screen and deciding where they go: these four types draw the panels, the words and the pictures, and they run the layout pass that positions everything else.
Text
A run of glyphs with an intrinsic size.
Image
A textured rect sized by its source.
ScrollView
A viewport onto content bigger than itself.
Input
Taking an answer from the player. Each of these types collects one shape of answer — a press, an on/off, a choice along a range, typed characters — and hands it to the game.
Dynamic
Screens whose shape is not known when you author them: a list as long as the data behind it, a section the player opens, a number that is still loading.
Repeat
Children from an array, not the document.
Collapse
Content entering and leaving the flow.
ProgressBar
A fraction of the parent.
Spinner
An endless loop, indexed by identity.
Layers
Drawing on top of the screen instead of inside it — the confirmation dialog, the tooltip — and taking input away from what is underneath while it is open.
Modal
Overlay
Z-order, input capture, focus scope.
More names than node types
@zabloo/react also exports Row, Column, Accordion, Tabs, Badge, Modal, Toast, Tooltip, Checkbox, Switch, Radio, Select, List, Grid — composites, flattened at authoring time. They never reach the IR, which is why they are named here and not tiled above.