src/lib/components/layout/context.md

Layout Components

Application layout structure

Purpose

• Loading state management
• Header navigation
• Two-pane layout with nested splits
• View mode transitions

Structure

layout/
├── context.md           # This file
├── LoadingScreen.svelte # Initial loading with spinner
├── AppHeader.svelte     # Top navigation bar
└── 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)

Dependencies

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