🧱 Components: layout

Layout components build the frame of a widget. There is no free-form CSS — only flexbox props and design tokens, which is why any widget still matches the chat's look.

📦 Shared box props

These work on Card, Box, Col, Row and Form:

• direction — row | col
• align — start | center | end | baseline | stretch
• justify — start | center | end | between | around | evenly
• wrap — nowrap | wrap | wrap-reverse
• gap — spacing between children
• padding, margin — a number or { top, right, bottom, left, x, y }
• radius — none | xs | sm | md | lg | xl | 2xl | full
• background — a color token or a { light, dark } pair
• border — draws a border
• flex, width, height, minWidth, maxWidth, minHeight, maxHeight, aspectRatio

🃏 Card

The outer shell of a widget, usually the root of the tree.

• size — sm | md | lg | full
• plus every shared box prop

<Card size="md" gap={4} padding={4}>
  <Title value="Order" size="lg" />
</Card>

🧩 Box, Col, Row

Plain containers. Col stacks vertically, Row horizontally, Box follows its direction.

<Row align="center" justify="between" gap={2}>
  <Text value="Total" />
  <Title value={order.total} size="sm" />
</Row>

➖ Divider

A separator line. Props: spacing, color.

↔️ Spacer

Fills the free space — inside a Row it pushes items to the edges. Prop: minSize.

📋 ListView and ListViewItem

• ListView: orientation (vertical | horizontal), gap, limit.
• limit counts rows: anything beyond that scrolls. auto lets the list grow.
• ListViewItem: align, gap, onClickAction — makes the whole row clickable.

<ListView limit={3} gap={2}>
  {orders.map(order => (
    <ListViewItem align="center" gap={2} onClickAction={{ functionName: 'open_order' }}>
      <Text value={order.title} />
    </ListViewItem>
  ))}
</ListView>

✨ Transition

Animates its children in when they first render.

• animation — fade | slide-up | slide-down | scale
• duration, delay — in milliseconds

🔁 Repeat

Repeats children over an array. In JSX you write it as .map() — see Data and bindings.

🎨 Color tokens

For text and backgrounds: default, secondary, tertiary, emphasis, inverse, disabled, surface, border, plus the semantic colors primary, success, danger, warning, info. For a per-theme color: background={{ light: "#f5f5f5", dark: "#111" }}.