# Widgets and layout

> The built-in widgets, how sizing works, and how styles are written.

## The built-in widgets

| Widget | Use |
| --- | --- |
| `Flex` | The workhorse container: layout, style, hover, scroll, animation and lifecycle |
| `Text` | A run of text |
| `TextInput` | Editable text, single- or multi-line |
| `Image`, `Svg` | Raster and vector images |
| `Grid` | Grid layout |
| `Presence` | Animates between generations of content |
| `Portal` | Content drawn above the tree: menus, tooltips, dialogs |
| `Canvas` | A rectangle the host paints |
| `Slider`, `Pad` | One- and two-axis value controls |

`Flex` owns the heavy machinery. The other containers wrap it or specialise it, so most style properties work the same way everywhere.

## Sizing

`width` and `height` take one of:

- `"grow"`: take a share of the parent's leftover space.
- `"shrink"`: fit the content.
- A number: fixed, in logical pixels.
- A percentage of the parent.

A `grow` child inside a `shrink` parent contributes its content size while the parent measures itself, then stretches to the parent's final size. That is how a full-height accent bar fits a row exactly.

## A styled container

```masque
Flex {
  style: {
    width: "grow",
    height: "grow",
    direction: "column",
    main_alignment: "center",
    cross_alignment: "center",
    padding: 24,
    gap: 12,
    corner_radius: 10,
    background_color: { r: 30, g: 30, b: 30, a: 255 },
    border: { width: 1, color: { r: 90, g: 90, b: 104, a: 255 }, style: "solid" },
  },
  children: [
    Text {
      text: "Hello, world!",
      style: { size: 18, color: { r: 255, g: 255, b: 255, a: 255 } },
    },
  ],
}
```

## Unknown keys

Masque ignores a style key or value it does not recognise, so a typo like `font_size` (the key is `size`) draws without complaint. Turn on strict vocabulary during development to have these reported:

```rust
let config = RuntimeConfig::new().with_strict_vocabulary();
```

Strict vocabulary changes nothing about what is drawn. It reports each unknown key once rather than failing mid-frame.

TODO: a full style-property reference, generated from the vocabulary tables.