# Layout Components

Application layout structure

## Purpose

- Loading state management
- Header navigation with view switching
- Two-pane layout with nested splits
- View mode transitions (code/preview/about)

## Structure

```
layout/
├── context.md           # This file
├── LoadingScreen.svelte # Initial loading with spinner
├── AppHeader.svelte     # Top navigation bar with Title | About | Repo
└── SplitView.svelte     # Two-pane layout with nested splits
```

## Layout Organization

- Main split: Editor pane (left) | Preview pane (right)
- Editor pane: Code editor (top) | Chat panel (bottom)
- Preview pane: Game canvas (top) | Console (bottom)
- View modes: code, preview, or about page overlay

## Dependencies

- loadingStore for loading state
- uiStore for view mode management
- svelte-splitpanes for resizable panes
- GSAP for animations