Nodes

Containers

• screen-container — The screen root wrapper: it applies the screen padding, background and text colour that everything inside inherits, and scrolls by default.
• column — A vertical flex container — the default way to stack children top to bottom.
• row — A horizontal flex container — children sit side by side along the main axis.
• grid — A CSS grid container: give it a column count or template and children place themselves into cells.
• stack — A layering container: children render on top of each other in one shared cell, paint order child order, with zero position props.
• pressable — A tappable container that renders as a column — wrap horizontal content in a row inside it.
• safe-area-view — Applies device insets as padding on the given edges; prefer the safeArea prop on an existing container over adding a wrapper.
• modal — A semantic marker structurally identical to a column — it carries intent for navigation and code generation rather than special rendering.
• bottom-sheet — A semantic marker for a sheet presented from the bottom — structurally a column, named for navigation and code generation.
• alert-dialog — A semantic marker for an alert dialog — structurally a column, named for navigation and code generation.

Text

• text — A run of text — the leaf that carries words, with a variant for heading, body, caption or small.
• link — Inline text that carries an action — underlined and accent-coloured by default, opinionated where text is not.
• badge — A small status word on a tinted pill — auto-coloured by common content words unless a variant overrides it.
• chip — A compact selectable token — filter, tag or removable choice — that fills when selected.

Inputs

• button — The primary affordance for an action — content, optional icon, and an action string of the action grammar's verbs.
• input — A single-line text field with an optional label and placeholder — the default way to collect a short string.
• textarea — A multi-line text field — an input that grows, with a row count for its initial height.
• select — A dropdown of string options with a current value — pick one from a closed list without opening a sheet.
• checkbox — A labelled on/off control whose checked state is a string-backed boolean.
• switch — A labelled toggle — the binary control that reads as an immediate setting rather than a form field.
• slider — A labelled range control from min to max with an optional current value.
• segmented-control — A horizontal set of mutually exclusive segments with one selected — the iOS-style alternative to a dropdown for two to four choices.
• radio-group — A labelled set of exclusive options with one selected — pick one when every choice must stay visible.
• date-picker — A labelled date field showing a YYYY-MM-DD selection — a calendar affordance without a calendar library.

Data display

• icon — Any Lucide icon by its kebab-case name — the one place a spec asks for a glyph by string.
• image — An image slot — omit src for a wireframe placeholder, or give $a(<sha>.ext) for a project asset resolved against the host's asset base.
• avatar — A circular person or entity image at a standard size — sm, md or lg.
• shape — A parametric primitive — rectangle, circle, pill, or eight generated forms like star and ring — drawn from its own numbers, not an image.
• path — A single-path vector that renders without allowRawSvg, because d is validated data rather than markup.
• data — A short series drawn as sparkline, bars or gauge from a values array — the one data-display primitive, not a chart library.
• progress-bar — A labelled bar from value over max, or indeterminate — progress you can show without wiring a real job.
• skeleton — A loading placeholder in the shape of text, an avatar, a card or an image — content that is coming, not content that is missing.

Feedback & media

• toast — A transient message — info, success, warning or error — that appears without owning screen space permanently.
• carousel — A paged horizontal strip of count items with an activeIndex — a swipe affordance drawn, not implemented.
• map — A considered placeholder that says a map goes here — it does not fetch tiles and needs no API key.
• video-player — A considered placeholder for video — duration and playing state are drawn, the file is never decoded.

Chrome

• tab-bar — The bottom (or top) tab bar: items with icon, label, and optional active-when expression and action.
• status-bar — Tells the renderer to draw the platform status bar as an absolutely-positioned overlay with zero height — it does not push content down.
• divider — A horizontal rule, optionally labelled — separation that can carry a word.
• spacer — An empty flex item that takes height or flex — deliberate blank space without a magic margin.

Structural

• component — An instance of a named component declared under components — the reference, with props, to a reusable subtree.
• slot — A named hole inside a component that an instance projects layout content into — the mechanism behind shared chrome with different bodies.

Vectors

• svg — Multi-path artwork carried as raw markup or a fetched URL — the one node that injects spec-supplied HTML, so it is opt-in behind allowRawSvg.

The count and the list above are read from KNOWN_NODE_TYPES in the schema package; a node added to the schema fails this generator until it has prose.