# Components

UI components organized by feature/responsibility

## Purpose

- Declarative UI components
- Single responsibility per component
- Clean props/events interface

## Layout

```
components/
├── context.md       # This file
├── auth/            # Authentication UI components
├── chat/            # AI chat interface
├── console/         # Console display components
├── editor/          # Code editor wrapper
├── game/            # Game canvas and errors
├── layout/          # App layout components
└── Editor.svelte    # Monaco editor (legacy)
```

## Scope

- In-scope: UI rendering, user interactions
- Out-of-scope: Business logic, direct state mutations

## Entrypoints

- `AppHeader.svelte` - Top navigation bar with auth
- `LoginButton.svelte` - OAuth authentication button
- `ChatPanel.svelte` - AI chat interface
- `SplitView.svelte` - Main layout container
- `ConsolePanel.svelte` - Console output display
- `GameCanvas.svelte` - Game rendering area
- `CodeEditor.svelte` - Code editing interface

## Dependencies

- Stores for reactive state
- Services for operations
- GSAP for animations
- svelte-splitpanes for layout