# Élément layout

## 1. Structure

```ts
interface LayoutClip extends BaseClip {
  type: "layout";
  direction?: "horizontal" | "vertical";
  gap?: number;
  padding?: number | [number, number, number, number];
  alignItems?: "start" | "center" | "end" | "stretch";
  justifyContent?:
    | "start"
    | "center"
    | "end"
    | "space-between"
    | "space-around";
  clip?: boolean;
  children: Clip[];
}
```

## 2. Champs actuellement implémentés

- `direction`
- `gap`
- `padding`
- `alignItems`
- `justifyContent`
- `clip`
- `children`

## 3. Types d'éléments actuellement autorisés dans `children`

- `video`
- `image`
- `text`
- `rect`
- `circle`
- `polygon`
- `audio`
- `layout`
- `template`

Actuellement non pris en charge directement comme enfant :
- `subtitle`

## 4. Limite la plus importante

`layout.children` n'est pas une timeline imbriquée indépendante.

- Les éléments enfants ne sont pas planifiés individuellement selon leur propre `start`
- Les éléments enfants ne se comportent pas comme des clips top-level entièrement indépendants
- Il ne faut pas modéliser `children` comme un graphe de scène imbriqué complet
- `animations / keyframes / transition` dans `children` ne doivent pas être interprétés avec les hypothèses des clips top-level

## 5. Exemple

```json
{
  "type": "layout",
  "start": 0,
  "duration": 6,
  "direction": "vertical",
  "gap": 24,
  "padding": 32,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": "80%",
    "height": "60%"
  },
  "children": [
    {
      "type": "text",
      "start": 0,
      "duration": 6,
      "text": "Title",
      "style": {
        "fontSize": 56,
        "fill": "#ffffff"
      }
    },
    {
      "type": "rect",
      "start": 0,
      "duration": 6,
      "transform": {
        "width": "100%",
        "height": 120
      },
      "style": {
        "fill": "#1f2937",
        "borderRadius": 16
      }
    }
  ]
}
```