Components
All v1 layout component types. Each node has id, type, optional style, and type-specific binding fields.
Layout trees are JSON objects. Containers nest children; leaf components display bound values. See Design System for binding and color rules.
| Type | Category | Bindings | Notes |
|---|---|---|---|
| container | layout | href (url, optional) | vertical | horizontal | z-stack |
| spacer | layout | — | minLength, flex |
| text | content | binding (string) | Primary copy element |
| image | content | binding (url) | HTTPS images on device |
| icon | content | binding (string) | SF Symbol name |
| avatar | content | image (url), fallback (string) | Profile / initials |
| stat | indicator | value (number), label (string) | Hero metrics |
| progress_bar | indicator | binding (number) | 0–100 style values |
| circular_progress | indicator | binding (number) | Ring charts; size ~70, lineWidth ~5 |
| status_dot | indicator | label (string), dotColor (color) | Status rows |
| badge | indicator | binding (string) | Pills and tags |
| divider | decoration | — | Separators |
| gradient | decoration | — | Linear gradient root backgrounds |
| button | interactive | href (url), label (string) | Tappable actions |
| link | interactive | href (url), label (string) | Inline links |
| timer | time | binding (date) | Countdown display |
| clock | time | binding (string, optional) | Current time |
| date | time | binding (date) | Formatted dates |
| relative_time | time | binding (date) | “2h ago” style |
Chart components (bar_chart, pie_chart) are reserved for a future interpreter version and are not valid in v1 templates.