# Layout-Element

## 1. Struktur

```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. Derzeit implementierte Felder

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

## 3. Elementtypen, die aktuell in `children` erlaubt sind

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

Derzeit nicht direkt als Kind unterstützt:
- `subtitle`

## 4. Wichtigste Einschränkung

`layout.children` ist keine unabhängige verschachtelte Timeline.

- Kindelemente werden nicht einzeln nach ihrem eigenen `start` geplant
- Kindelemente verhalten sich nicht wie vollständig unabhängige Top-Level-Clips
- Du solltest `children` nicht als vollständigen verschachtelten Szenengraph modellieren
- `animations / keyframes / transition` innerhalb von `children` sollten nicht mit Annahmen für Top-Level-Clips interpretiert werden

## 5. Beispiel

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