# Handoff: Дашборд состояния группировки (Mission Ops «Состояние группировки»)

## Overview
Полноэкранная информационная панель (operations wall) для мониторинга орбитальной
группировки КА в реальном времени. Показывает на карте мира движущиеся аппараты,
их маршруты съёмки, сбросы данных на наземные станции, интервалы запрета работы и
тень Земли. Снизу — таймлайн событий по каждому КА. Воспроизведение управляется
кнопкой Play со скоростями ×1/×10/×60/×600, есть скраб по времени и кнопка «Сейчас».

Назначение: дежурная смена видит «что сейчас делает группировка» одним взглядом —
кто снимает, кто сбрасывает, кто в запрете/в тени, загрузку памяти бортов и
ближайшие события.

## About the Design Files
Файлы в этом пакете — **дизайн-референс, реализованный на HTML/React-прототипе**.
Это эталон внешнего вида и поведения, **не обязательно финальный продакшн-код**.
Задача — **воссоздать этот интерфейс в вашем кодовом окружении** (судя по скриншотам —
React + Vite, карта в стиле тёмной equirectangular-проекции), используя ваши паттерны,
ваш роутинг табов и, по возможности, **вашу существующую карту и ваши данные из API**
вместо встроенной симуляции.

Два слоя в пакете:
- `reference/` — рабочий автономный прототип (открывается в браузере, грузит React/d3 с CDN).
  Нужен только чтобы «пощупать» поведение и свериться по пикселям.
- `src/` — те же экраны, переписанные в **чистые ESM-модули** (`import/export`, без CDN
  и без `window.*`). Это то, что встраивается в приложение. См. `INTEGRATION.md`.

## Fidelity
**High-fidelity.** Цвета, типографика, отступы, состояния и анимации — финальные.
Воссоздавайте 1:1, подменяя только источник данных (см. ниже) и, при желании,
рендер карты на вашу картографическую библиотеку.

## Screens / Views
Один экран, 4 функциональные зоны в CSS-grid/flex.

### 1. Topbar (шапка) — `Header`
- **Layout:** горизонтальный флекс, высота `54px`, нижняя граница `1px var(--line)`,
  фон `linear-gradient(var(--bg1),var(--bg0))`. Три блока: бренд (слева, `min-width:248px`),
  транспорт (центр, `flex:1`, по центру), часы (справа, `min-width:248px`, выровнено вправо).
- **Бренд:** кружок-маркер `20px` с бирюзовым свечением + «СОСТОЯНИЕ ГРУППИРОВКИ»
  (600, 13px, `nowrap`) и «MISSION OPS · ТГУ» (mono, 9px, `--dim`, letter-spacing .12em).
- **Транспорт:** кнопки `−1ч`, Play/Pause (бирюзовая, 42px), `+1ч`; разделитель;
  сегмент скоростей `×1 ×10 ×60 ×600` (активная — бирюзовый фон); кнопка `СЕЙЧАС`
  (в live-режиме — зелёная).
- **Часы:** бейдж `LIVE`/`СИМ` (LIVE — зелёная пульсирующая точка), крупное mono-время
  `HH:MM:SS` (22px) + `UTC`, ниже `ДЕНЬ · ДД.ММ.ГГГГ` (mono, 10px).

### 2. Left panel (левая панель) — `SidePanel`
Ширина `328px`, фон `--bg1`, правая граница, вертикальный флекс, скролл внутри.
- **СВОДКА ГРУППИРОВКИ:** 4 плитки (grid 4×1): СНИМАЮТ / СБРОС / ЗАПРЕТ / В ТЕНИ —
  число (mono, 21px, цвет статуса) + подпись (8px, `--dim`). Под ними строка
  «● ОПТИКА n  ● ЛОКАЦИЯ n  ·  N КА».
- **Поиск:** input (mono, 11.5px) — фильтрует список по name / NORAD / группе.
- **КОСМИЧЕСКИЕ АППАРАТЫ:** список, сгруппированный `ОПТИКА`→группы, `ЛОКАЦИЯ`→группы.
  Каждая строка КА: цветная риска слева (cyan=оптика / violet=локация), имя (500, 12.5px),
  статус справа (mono, 9px, цвет статуса, иконка ☾ если в тени), снизу `NORAD XXXXX`,
  полоса памяти (4px) и `NN%`. Цвет памяти: бирюза → амбер >78% → красный >92%.
  Клик по строке = фокус КА (подсветка только его событий).
- **АКТИВНЫЕ СОБЫТИЯ:** лента текущих событий (СЪЁМКА/СБРОС/ЗАПРЕТ) с целью/станцией
  и обратным отсчётом «ещё M:SS». Клик = фокус соответствующего КА.

### 3. Map (карта) — `MapView`
Занимает всё центральное пространство (`flex:1`). Canvas 2D, equirectangular-проекция
(d3-geo), повёрнута на `rotate([-10,0])`. Слои:
- База (кэш offscreen): океан `#0a0e0f`, сетка градусов (шаг 30°), суша `#171c1e`
  (контур `#252d30`), прямоугольники заявок (ROI) пунктиром амбер, подписи станций (mono 9px).
- Тень Земли: ночное полушарие (d3.geoCircle от антисолнечной точки, r=90°) заливкой
  `rgba(20,28,46,0.55)` с кромкой-терминатором.
- По каждому КА: синусоидальный трек (±52 мин, цвет по типу полезной нагрузки),
  «полоса обзора» (footprint, geoCircle), глиф-ромб с гало и кольцом-статусом, подпись.
- Съёмка: амбер-утолщение трека + подсветка полигона заявки.
- Сброс: анимированная пунктирная синяя линия КА→станция + свечение станции.
- Станции: белые треугольники.
- Оверлеи (абсолютно): подсказка/карточка фокуса (сверху-слева), легенда (снизу-слева),
  координаты курсора (снизу-справа, mono), тултип имени КА при наведении.

### 4. Timeline (таймлайн) — `Timeline`
Высота `248px`, фон `--bg1`, верхняя граница. Шапка: «ТАЙМЛАЙН СОБЫТИЙ» + легенда
(СЪЁМКА/СБРОС/ЗАПРЕТ РАБОТЫ(штриховка)/ТЕНЬ ЗЕМЛИ) + статус режима. Тело — SVG:
- Левая колонка (`188px`): группы и имена КА с цветной точкой.
- Ось времени сверху (часовые тики, на полночь — дата).
- Дорожка каждого КА: полосы событий — тень (низ, слейт), сброс (синий), съёмка (амбер),
  запрет (красная штриховка, во всю высоту).
- Вертикальный плейхед (бирюза в live, амбер в симуляции) + пунктирная линия «СЕЙЧАС»
  (реальное время). Зажатие+перетаскивание = скраб времени. Клик по строке = фокус КА.

## Interactions & Behavior
- **Play/Pause:** запуск/останов модельного времени.
- **Скорость ×1/×10/×60/×600:** множитель к ходу модельного времени (×1 = реальное).
- **СЕЙЧАС:** включает live-режим (время = системные часы, ×1, бейдж LIVE, зелёная пульсация).
- **−1ч / +1ч:** сдвиг модельного времени на час (выходит из live).
- **Скраб по таймлайну:** установка времени перетаскиванием (выходит из live).
- **Фокус КА:** клик в списке / на карте / в таймлайне / в ленте — подсвечивает один КА,
  затемняет остальные; повторный клик снимает фокус.
- **Наведение на карту:** тултип имени ближайшего КА + координаты курсора (lat/lon).
- **Анимации:** бегущие пунктиры линий сброса, пульсация live-точки (1.4s), плавные
  переходы полос памяти. Без бесконечных декоративных лупов на контенте.

## State Management
Всё состояние — в корневом компоненте (`ConstellationDashboard.jsx`):
- `simRef` (модельное время, ms) — в `ref`, чтобы canvas рисовался на 60fps без ре-рендеров.
- `playingRef`, `speedRef`, `liveRef` — режим воспроизведения.
- `focusId` (state + ref) — выбранный КА.
- `memRef` — карта «загрузка памяти %» по КА (растёт при съёмке, падает при сбросе).
- `query` — строка поиска. `cursor`, `hover` — UI карты.
- RAF-цикл двигает время и память, рисует карту императивно (`mapApi.draw`), а панели/таймлайн
  ре-рендерит троттлингом (~12 fps) через `setTick`. Производные (статусы, счётчики,
  активные события) вычисляются в `render` из `simRef` + `memRef`.

> Контракты данных и точки замены симуляции на реальное API — в `INTEGRATION.md`.

## Design Tokens
Из `src/dashboard.css` (`:root`):
- **Фоны:** `--bg0 #0a0c0b` (канвас), `--bg1 #0e1211` (панели), `--panel #111514`,
  `--ins #0a0e0d` (вставки/карта).
- **Линии:** `--line rgba(255,255,255,.06)`, `--line2 rgba(255,255,255,.11)`.
- **Текст:** `--hi #e7ece9`, `--mid #95a19d`, `--dim #5b6662`, `--faint #3c4644`.
- **Акценты:** `--teal #5fb3a3` (управление/активное), `--amber #d99a4e` (съёмка/заявки),
  `--blue #5b9bd5` (сброс), `--red #d9685f` (запрет), `--green #5cae7e` (operational),
  `--violet #a78bdb` (локация/РСА).
- **Тип нагрузки:** ОПТИКА `#56c2c8` (cyan), ЛОКАЦИЯ `#a78bdb` (violet) — `COL` в `data.js`.
- **Карта:** океан `#0a0e0f`, суша `#171c1e`/контур `#252d30`, ночь `rgba(20,28,46,.55)`.
- **Типографика:** IBM Plex Sans (UI), IBM Plex Mono (числа/координаты/ID/метки).
  Заголовки секций — капс, letter-spacing .14–.16em.
- **Скругления:** 5–8px. **Высоты:** topbar 54, timeline 248, строка таймлайна 22.

## Assets
- Карта мира: TopoJSON `world-atlas@2` → `land-110m.json` (грузится в `MapView`).
  В проде положите файл локально или используйте свою карту (см. `INTEGRATION.md`).
- Иконок-картинок нет: станции/КА рисуются на canvas, бренд-маркер — CSS.
- Шрифты: IBM Plex Sans/Mono (Google Fonts; `@import` в `dashboard.css` можно убрать,
  если шрифты уже есть в приложении).

## Files
```
design_handoff_constellation_dashboard/
├── README.md                     ← этот файл (дизайн-референс)
├── INTEGRATION.md                ← как встроить вкладку + контракты данных
├── reference/                    ← автономный прототип «как должно выглядеть»
│   ├── preview.html              ← открыть в браузере
│   ├── styles.css
│   └── js/  (data, sim, map, timeline, panels, app — версия с CDN/window.*)
└── src/                          ← ESM-модули для встраивания
    ├── index.js                  ← точка входа (default = ConstellationDashboard)
    ├── ConstellationDashboard.jsx← корневой компонент вкладки
    ├── MapView.jsx               ← canvas-карта
    ├── Timeline.jsx              ← таймлайн событий
    ├── Panels.jsx                ← Header + SidePanel
    ├── sim.js                    ← геометрия/расписание (заменяемо на API)
    ├── data.js                   ← модель группировки (заменяемо на API)
    ├── util.js                   ← хелперы
    └── dashboard.css             ← все стили
```

См. **`INTEGRATION.md`** — пошагово: зависимости, монтирование как вкладки,
контракты данных и где подключить реальные эфемериды/расписание.
