# Roof

> Flat or gable roof.

## Add it

```bash
npx @runek/cli add roof
```

Pulls `@react-three/rapier@^2.2.0`, `@runek/core@^0.15.0`, `three@^0.184.0`.

## Use it

```tsx
import { Roof } from './runek/Roof'

<Roof position={[0, 0, 0]} />
```

Or as a node in a world file ([worlds as data](https://runek.nullorder.org/docs/worlds-as-data.md)):

```json
{ "type": "Roof", "props": { "position": [0, 0, 0] } }
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `position` | `[x, y, z]` | `[0, 0, 0]` | Position [x, y, z] in units (1 unit = 1 m, Y-up). |
| `rotation` | `[x, y, z]` | `[0, 0, 0]` | Euler rotation [x, y, z] in radians. |
| `seed` | `number` |  | Accepted for the component contract; this component has no seeded variation yet. |
| `size` | `[number, number]` | `[8, 8]` | `[width, depth]` in units. The roof rests with its base at the component origin. |
| `style` | `"flat" \| "gable"` | `"gable"` |  |
| `peak` | `number` | `1.6` | Ridge height for a gable roof, in units. |
| `thickness` | `number` | `0.18` | Thickness, in units. |
| `overhang` | `number` | `0.3` |  |
| `ends` | `boolean` | `true` | Cap the triangular gable ends so the attic isn't open to the outside. |
| `color` | `color` | palette `roof` | Defaults to the world palette's `roof` slot. |
| `endColor` | `color` | palette `wall` | Gable end caps; defaults to the world palette's `wall` slot. |

## Migrate

**v0.11.0 → v0.12.0.** No signature break, but gable roofs now cap their open triangular ends with wall-colored prisms (the attic used to show the sky). The old look is one prop away.

**v0.11.0**

```tsx
<Roof style="gable" />
// v0.11.0: gable ends rendered open
```

**v0.12.0**

```tsx
<Roof style="gable" />
// v0.12.0: ends are capped by default

<Roof style="gable" ends={false} />
// opt back into the open look
```

- The caps default to the palette `wall` slot; override with `endColor`.

## Registry manifest

[https://runek.nullorder.org/r/components/roof.json](https://runek.nullorder.org/r/components/roof.json): Self-contained JSON: inlined source plus resolved dependencies, exactly what `runek add roof` fetches.

Browse the whole catalog in the **[gallery →](https://runek.nullorder.org/gallery)**.