@startuml architecture
title Архитектура клиентской части системы

skinparam shadowing false
skinparam defaultFontName Helvetica
skinparam packageStyle rectangle
skinparam rectangle {
  BorderColor #2C5AA0
  BackgroundColor #EAF1FB
}
skinparam package {
  BorderColor #6B6B6B
  BackgroundColor #FFFFFF
}
skinparam node {
  BorderColor #444444
  BackgroundColor #F5F5F5
}

node "Браузер (SPA) — SvelteKit 5 + Vite" as spa {

  package "routes/  (страницы)" as routes {
    rectangle "/login" as r_login
    rectangle "/predict" as r_predict
    rectangle "/track" as r_track
    rectangle "/user/*" as r_user
  }

  package "features/  (функциональные модули)" as features {
    rectangle "auth\nLoginForm, Navbar" as f_auth
    rectangle "prediction\nControlPanel, ScenarioPanel,\nCurveEditor" as f_pred
    rectangle "workspaces\nWorkspacesPanel,\nWorkspaceRenderer, store" as f_ws
    rectangle "tracking\nTelemetryPanel,\nTelemetryStore" as f_track
    rectangle "wind\nWindRenderer,\nParticleField, WindCache" as f_wind
    rectangle "timeline\nTimeLine, store" as f_time
    rectangle "settings\nSettingsPanel, schema, store" as f_set
    rectangle "footer" as f_foot
  }

  package "lib/  (ядро)" as core {
    rectangle "api/\nclient (HTTP+WS, CSRF),\npredictions, telemetry, wind,\npoints, scenarios, profiles" as l_api
    rectangle "map/\nобёртка MapLibre GL JS,\nслои, инструменты" as l_map
    rectangle "ui/\nнезависимые примитивы\n(CollapsibleCard, Toast, …)" as l_ui
    rectangle "i18n/\nсловари ru / en" as l_i18n
    rectangle "auth/\nguard, store" as l_auth
    rectangle "state/\npersisted store\n(localStorage)" as l_state
    rectangle "domain/\ngeo, math, telemetry,\nprediction, scenario, wind\n(чистые типы и функции)" as l_dom
  }
}

' ── Внешние сервисы ───────────────────────────────────────────────
node "Backend (Django)" as be {
  rectangle "REST API\n/api/*" as be_rest
  rectangle "WebSocket\n/api/ws/satellite/{id}/telemetry/" as be_ws
}
node "Сервис предсказателя\n(127.0.0.1:8080)" as predictor {
  rectangle "GET /api/v1/wind/*" as pred_wind
}

' ── Внешние библиотеки ───────────────────────────────────────────
package "Внешние библиотеки" as libs {
  rectangle "Svelte 5 / SvelteKit / Vite" as lib_svelte
  rectangle "MapLibre GL JS" as lib_map
  rectangle "Bootstrap / Sveltestrap" as lib_bs
  rectangle "Chart.js, Luxon, js-cookie" as lib_misc
}

' ── Связи: страницы → модули ─────────────────────────────────────
r_login --> f_auth
r_predict --> f_pred
r_predict --> f_ws
r_predict --> f_wind
r_predict --> f_time
r_predict --> f_set
r_track --> f_track
r_user --> f_pred

' ── Модули → ядро ────────────────────────────────────────────────
features --> l_api
features --> l_map
features --> l_ui
features --> l_state
features --> l_i18n
f_auth --> l_auth

' ── Ядро → домен (чистые типы) ───────────────────────────────────
l_api --> l_dom
l_map --> l_dom
l_state --> l_dom

' ── Ядро → внешние сервисы ───────────────────────────────────────
l_api --> be_rest : HTTP /api/*
f_track --> be_ws  : WebSocket
f_wind --> pred_wind : HTTP (без CSRF)

' ── Использование внешних библиотек ──────────────────────────────
spa ..> lib_svelte
l_map ..> lib_map
l_ui ..> lib_bs
core ..> lib_misc

@enduml