CSCS Visual Lab

Архитектура и структура

# Архитектура на CS Visual Lab

## Високо ниво
- **Next.js 14 (App Router)** – основа на приложението, структурирано по модули под `src/app`.
- **React Server Components + Client Components** – страниците са сървърни, визуализаторите и контролерите работят на клиента.
- **TypeScript + строг режим** – всички модули са типизирани, типовете се намират в `src/types`.
- **Zustand** – използван локално във визуализаторите чрез `createVisualizerStore` за управление на състоянието на контролите.

## Организация на кода
- `src/app` – маршрути по модули: условни оператори, цикли, структури от данни и алгоритми. Сегментът `(shared)` държи общи стилове и компоненти.
- `src/components` – UI елементи (shadcn/ui), визуализатори, контролери и общи компоненти. Визуализаторите са групирани по домейн.
- `src/algorithms` – имплементации на алгоритмите и структурите от данни с генератори за стъпково визуализиране.
- `src/content/lessons` – конфигурационни модули с информация за уроците, псевдокод, цели и куизове.
- `src/constants` – регистри на алгоритми и метаданни на сайта.
- `src/lib` – помощни функции (`utils`, `algorithmRegistry`).
- `src/tests` – Vitest unit тестове и Playwright e2e сценарии.

## Визуализатори
- Всеки визуализатор приема `VisualizerProps` и управлява локален Zustand store.
- `VisualizationFrame` предоставя унифицирано оформление: заглавие, описание, канвас за анимация и псевдокод панел.
- Контролният панел (`VisualizerControls`) позволява старт, пауза, стъпка, нулиране и промяна на скоростта.

## Стил и UI
- Tailwind CSS + shadcn/ui за бързо изграждане на интерфейса.
- Компонентите са изградени с 2xl заобляне и меки сенки, съобразено с изискванията.
- Поддръжка на `prefers-reduced-motion` и aria-атрибути за контроли.

## Тестове и CI
- Unit тестове (Vitest) покриват сортирания, търсене и операции със стек/опашка/списък.
- E2E тест с Playwright валидира базовия сценарий за визуализатора на сортиране.
- GitHub Actions pipeline стартира lint, type-check, тестове и build.

## TODO
- TODO маркери в съдържанието за бъдещи визуализации: хеш таблици, дървета, графи, BFS/DFS.
- Интеграция на Monaco Editor за писане на код в реално време (подготвена зависимост).