# Elemento layout

## 1. Estructura

```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. Campos implementados actualmente

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

## 3. Tipos de elementos permitidos actualmente en `children`

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

Actualmente no compatible directamente como hijo:
- `subtitle`

## 4. Limitación más importante

`layout.children` no es una timeline anidada independiente.

- Los elementos hijos no se programan individualmente según su propio `start`
- Los elementos hijos no se comportan como clips top-level totalmente independientes
- No debes modelar `children` como un scene graph anidado completo
- `animations / keyframes / transition` dentro de `children` no deben interpretarse con suposiciones de clips top-level

## 5. Ejemplo

```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
      }
    }
  ]
}
```