From e0f0726e6815bb7c2220e80172835ceaf47db85e7597bf85ce9321f31e35ee37 Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:16 +0300
Subject: [PATCH 1/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D0=B8?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=D1=80=D0=B0=D0=BA=D1=82=D0=B8=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=BA=D0=B0=D1=80=D1=82=D0=B0=20=D1=81=D0=B2?=
 =?UTF-8?q?=D1=8F=D0=B7=D0=B5=D0=B9=20(force-directed=20graph)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Переработка экрана «Связи» в интерактивный нод-граф с премиальными переходами.

Движок (js/pages/network/force-graph.js):
- diffing-переходы: общие узлы перелетают, новые расцветают каскадом, исчезнувшие — Ghost-слой (800мс, на месте);
- мягкая радиальная пружина + отталкивание (органичная орбита), упругий влёт фокуса;
- динамическая вязкость на старте (трение 0.92→0.82, отталкивание ослаблено) — мягкий разлёт без тряски;
- жёсткая заморозка (kill-switch) при затухании — нет «треска», экономия батареи;
- линии — SVG <path> Безье (изогнутые нити), прорастание; жесты pan с инерцией;
- хард-лимит DOM-аватарок (остальное — SVG-точки).

Интеграция и UX:
- adapter.js: getUserConnectionsGraph → модель движка (сервер не трогаем, read-only);
- фильтры (Все/Семья/Друзья/Сияющие), контекстное меню (node-menu.js), нижний сниппет, профиль;
- прицел в центре, дыхание фокуса, свечение сияющих;
- лаборатория network-view/lab на мок-данных (networkGraphUsers) для тестов без бэкенда.

Документация: shine-UI/Dev_Docs/features/interactive-network-graph.md.
Бамп client.version 1.2.135 -> 1.2.136.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 VERSION.properties                            |   2 +-
 .../features/interactive-network-graph.md     |  72 ++
 shine-UI/index.html                           |   2 +-
 shine-UI/js/mock-data.js                      | 113 +++
 shine-UI/js/pages/network-view.js             | 548 +++--------
 shine-UI/js/pages/network/adapter.js          |  72 ++
 shine-UI/js/pages/network/force-graph.js      | 900 ++++++++++++++++++
 shine-UI/js/pages/network/lab.js              |  86 ++
 shine-UI/js/pages/network/node-menu.js        |  84 ++
 shine-UI/styles/network-graph.css             | 426 +++++++++
 10 files changed, 1887 insertions(+), 418 deletions(-)
 create mode 100644 shine-UI/Dev_Docs/features/interactive-network-graph.md
 create mode 100644 shine-UI/js/pages/network/adapter.js
 create mode 100644 shine-UI/js/pages/network/force-graph.js
 create mode 100644 shine-UI/js/pages/network/lab.js
 create mode 100644 shine-UI/js/pages/network/node-menu.js
 create mode 100644 shine-UI/styles/network-graph.css

diff --git a/VERSION.properties b/VERSION.properties
index 5f66ce5..fe2f1be 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.135
+client.version=1.2.136
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
new file mode 100644
index 0000000..91601d6
--- /dev/null
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -0,0 +1,72 @@
+# Интерактивная карта связей (force-directed graph)
+
+Экран **«Связи»** (`network-view`) — интерактивная нод-граф карта вместо статичного списка:
+фокусный пользователь в центре, связи на орбите, навигация тапом/свайпом, премиальные
+переходы в духе нативного iOS.
+
+## Где код
+- `js/pages/network/force-graph.js` — **движок** (физика, рендер, жизненный цикл узлов, жесты).
+- `js/pages/network/adapter.js` — реальные данные → нейтральная модель движка.
+- `js/pages/network/node-menu.js` — общее контекстное меню узла.
+- `js/pages/network/lab.js` — лаборатория (`network-view/lab`) на мок-данных, без бэкенда.
+- `js/pages/network-view.js` — страница: шапка, поиск, фильтры, история, склейка с движком.
+- `js/mock-data.js` — `networkGraphUsers` (связанный мульти-граф из 10 человек для лаборатории).
+- `styles/network-graph.css` — все стили `.fg-*`.
+
+## Данные (read-only, сервер не трогаем)
+Единый источник — `authService.getUserConnectionsGraph(login)` (один запрос: логин → прямые связи).
+`network-view.js` → `buildGraphModel()` нормализует роли (parent/child/sibling/spouse/friend/contact),
+направление и метки; `adapter.engineModelFromGraphModel()` превращает это в модель движка:
+`{ focusId, nodes:[{ id, login, name, avatar, relationType, strength, shining, tier }] }`.
+
+## Модель движка и API
+`createForceGraph({ stage, model, onNodeTap, onCenterTap, onNodeLongPress })` →
+`{ setModel(model), setFilter(pred), recenter(id), getFocusNode(), destroy() }`.
+
+## Ключевые механики
+- **Diffing-переходы (непрерывность состояний):** при смене фокуса общие узлы (тот же `id`) не
+  пересоздаются, а перелетают пружиной на новые места; новые «расцветают» (bloom) каскадом из центра;
+  исчезнувшие уходят в Ghost-слой.
+- **Ghost-слой:** снимок всего старого графа (узлы + линии) на полноэкранном overlay, застывает
+  на месте, `scale 1→0.7` + `opacity 0.5→0` за **800мс**, затем удаляется (красивый шлейф истории).
+- **Физика:** мягкая радиальная пружина к орбите + взаимное отталкивание (charge) → органичная,
+  слегка неровная орбита; фокус влетает в центр упруго. Координаты узлов на трансформах (GPU).
+- **Каскадный bloom:** новые узлы скрыты в центре и «выстреливают» по очереди (`order × 40мс`).
+- **Динамическая вязкость:** первые ~600мс после перестроения трение завышено (0.92), отталкивание
+  ослаблено (×0.45) → гасит «взрыв», затем плавно к базе (0.82) — мягкое «резиновое» появление.
+- **Жёсткая заморозка (kill-switch):** когда сумма |vx|+|vy| < 0.03 — скорости обнуляются, координаты
+  округляются до целых пикселей, `cancelAnimationFrame` (sleep). Нет «треска», батарея не страдает.
+- **Линии:** SVG `<path> Q` (квадратичные Безье) — изящные изогнутые нити, тонкие/полупрозрачные;
+  при движении изгиб реагирует на скорость; новые линии прорастают (`stroke-dashoffset`).
+- **Жесты:** свайп-pan с инерцией (новое касание прерывает); короткий тап — центрирование + нижний
+  сниппет; долгий тап — контекстное меню (в `#modal-root`, позиция по `getBoundingClientRect`); тап
+  по центру — профиль.
+- **Фильтры слоёв:** Все / Семья / Друзья / Сияющие (плавное скрытие/перераспределение).
+- **Поллиш:** «прицел» в центре (+пульс при захвате фокуса), «дыхание» фокуса (бесконечная CSS-анимация
+  размера 1.48–1.52x, GPU, не будит rAF), свечение «сияющих», хард-лимит ~90 DOM-аватарок (остальное —
+  SVG-точки).
+
+## Параметры тюнинга (константы в начале `force-graph.js`)
+| Константа | Значение | Назначение |
+|---|---|---|
+| `ORBIT_MIN / ORBIT_MAX` | 150 / 240 | радиус орбиты (защитный отступ от центра — подписи не наезжают) |
+| `K_RADIAL` | 0.035 | жёсткость орбитальной пружины (мягко) |
+| `K_FOCUS` | 0.12 | жёсткость пружины фокуса к центру |
+| `CHARGE` / `CHARGE_START_FACTOR` | 1400 / 0.45 | отталкивание (на старте ослаблено) |
+| `FRICTION` / `FRICTION_BOOST` / `BOOST_FRAMES` | 0.82 / 0.92 / 36 | базовое трение / стартовая вязкость / длительность (~600мс) |
+| `SLEEP_V` | 0.03 | порог суммарной |v| для заморозки |
+| `FOCUS_SCALE` | 1.5 | базовый масштаб фокуса |
+| `MAX_FULL_NODES` | 90 | хард-лимит полных аватарок (далее — точки) |
+
+## Локальный запуск / проверка
+- Dev-сервер: `.claude/shine-ui-dev-server.cjs` (Node, порт 7321, SPA-fallback + инжект `<base href="/">`).
+- Лаборатория (без бэкенда): `http://localhost:7321/network-view/lab` — мок `networkGraphUsers`,
+  тап по узлам переключает сети.
+- Реальный путь (`/network-view`) требует живого `wss://shineup.me/ws` (локально — `ws_open_error`, это норма).
+
+## Ограничения / на будущее
+- Многоуровневая глубина (друзья друзей мельче, 3-й уровень — точки), кластеры, «общие связи»
+  упираются в API (отдаёт только прямые связи) — требуют доработки сервера.
+- `lerpX/lerpY` в движке больше не используются для отрисовки — кандидат на чистку.
+- Превью в простое троттлит `requestAnimationFrame` (физика не идёт между вызовами) — для замеров
+  прокачивать кадры; в активном табе всё работает на 60 FPS.
diff --git a/shine-UI/index.html b/shine-UI/index.html
index 5d1a017..9c7f792 100644
--- a/shine-UI/index.html
+++ b/shine-UI/index.html
@@ -12,7 +12,7 @@
     <script>
       (function attachStylesWithBuildHash() {
         const v = encodeURIComponent(window.__SHINE_BUILD_HASH__ || 'dev');
-        const cssFiles = ['./styles/main.css', './styles/layout.css', './styles/components.css'];
+        const cssFiles = ['./styles/main.css', './styles/layout.css', './styles/components.css', './styles/network-graph.css'];
         cssFiles.forEach((file) => {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
diff --git a/shine-UI/js/mock-data.js b/shine-UI/js/mock-data.js
index 3ce0540..081e18d 100644
--- a/shine-UI/js/mock-data.js
+++ b/shine-UI/js/mock-data.js
@@ -280,3 +280,116 @@ export const networkGraph = {
     { id: 'p4', name: 'Никита', initials: 'НО', x: 82, y: 76 },
   ],
 };
+
+// Мок интерактивной карты связей в форме ТЗ (focusUser + connections[]).
+// Используется лабораторным режимом `network-view/lab` для проверки физики/центрирования.
+// relationType: family | friend | business | contact; connectionStrength: 0..1 (сильнее → ближе к центру);
+// status: 'shining' даёт эффект свечения; hasOwnConnections — есть ли у узла свои связи (для глубины).
+export const networkGraphMock = {
+  focusUser: { id: 'u_100', login: 'ivan', name: 'Иван', avatar: 'url_to_image', status: 'shining' },
+  connections: [
+    { id: 'u_101', login: 'alisa', name: 'Алиса', avatar: 'url_to_image', relationType: 'family', connectionStrength: 0.95, hasOwnConnections: true, status: 'shining' },
+    { id: 'u_102', login: 'pavel', name: 'Павел', avatar: 'url_to_image', relationType: 'business', connectionStrength: 0.45, hasOwnConnections: false },
+    { id: 'u_103', login: 'marina', name: 'Марина', avatar: 'url_to_image', relationType: 'friend', connectionStrength: 0.8, hasOwnConnections: true },
+    { id: 'u_104', login: 'ilya', name: 'Илья', avatar: 'url_to_image', relationType: 'friend', connectionStrength: 0.6, hasOwnConnections: true },
+    { id: 'u_105', login: 'elena', name: 'Елена', avatar: 'url_to_image', relationType: 'family', connectionStrength: 0.88, hasOwnConnections: false },
+    { id: 'u_106', login: 'nikita', name: 'Никита', avatar: 'url_to_image', relationType: 'contact', connectionStrength: 0.3, hasOwnConnections: false },
+    { id: 'u_107', login: 'oleg', name: 'Олег', avatar: 'url_to_image', relationType: 'business', connectionStrength: 0.55, hasOwnConnections: true, status: 'shining' },
+    { id: 'u_108', login: 'sveta', name: 'Света', avatar: 'url_to_image', relationType: 'friend', connectionStrength: 0.7, hasOwnConnections: false },
+    { id: 'u_109', login: 'dmitry', name: 'Дмитрий', avatar: 'url_to_image', relationType: 'contact', connectionStrength: 0.4, hasOwnConnections: true },
+    { id: 'u_110', login: 'anna', name: 'Анна', avatar: 'url_to_image', relationType: 'family', connectionStrength: 0.92, hasOwnConnections: false },
+  ],
+};
+
+// Связанный мульти-пользовательский граф для лаборатории (network-view/lab):
+// у каждого пользователя свой набор связей, тап по узлу переключает карту на его сеть.
+// Сияющими считаем ivan/alisa/oleg — у них статус подсвечивается и в их карточках у других.
+const NETWORK_NAMES = {
+  ivan: 'Иван', alisa: 'Алиса', pavel: 'Павел', elena: 'Елена', dmitry: 'Дмитрий',
+  oleg: 'Олег', nina: 'Нина', marina: 'Марина', sveta: 'Света', kirill: 'Кирилл',
+};
+const NETWORK_SHINING = new Set(['ivan', 'alisa', 'oleg']);
+
+function networkConn(login, relationType, connectionStrength) {
+  return {
+    id: login,
+    login,
+    name: NETWORK_NAMES[login] || login,
+    avatar: null,
+    relationType,
+    connectionStrength,
+    hasOwnConnections: true,
+    status: NETWORK_SHINING.has(login) ? 'shining' : '',
+  };
+}
+
+function networkPerson(login, connections) {
+  return {
+    focusUser: {
+      id: login,
+      login,
+      name: NETWORK_NAMES[login] || login,
+      avatar: null,
+      status: NETWORK_SHINING.has(login) ? 'shining' : '',
+    },
+    connections,
+  };
+}
+
+export const networkGraphUsers = {
+  ivan: networkPerson('ivan', [
+    networkConn('alisa', 'friend', 0.9),
+    networkConn('pavel', 'friend', 0.7),
+    networkConn('elena', 'family', 0.95),
+    networkConn('dmitry', 'family', 0.95),
+    networkConn('oleg', 'business', 0.5),
+    networkConn('nina', 'contact', 0.35),
+    networkConn('kirill', 'friend', 0.6),
+  ]),
+  alisa: networkPerson('alisa', [
+    networkConn('ivan', 'friend', 0.9),
+    networkConn('marina', 'friend', 0.8),
+    networkConn('sveta', 'contact', 0.4),
+    networkConn('elena', 'contact', 0.3),
+  ]),
+  pavel: networkPerson('pavel', [
+    networkConn('ivan', 'friend', 0.7),
+    networkConn('oleg', 'business', 0.6),
+    networkConn('kirill', 'friend', 0.5),
+  ]),
+  elena: networkPerson('elena', [
+    networkConn('ivan', 'family', 0.95),
+    networkConn('dmitry', 'family', 0.9),
+    networkConn('alisa', 'contact', 0.3),
+  ]),
+  dmitry: networkPerson('dmitry', [
+    networkConn('ivan', 'family', 0.95),
+    networkConn('elena', 'family', 0.9),
+    networkConn('pavel', 'business', 0.4),
+  ]),
+  oleg: networkPerson('oleg', [
+    networkConn('pavel', 'business', 0.6),
+    networkConn('ivan', 'business', 0.5),
+    networkConn('nina', 'contact', 0.45),
+  ]),
+  nina: networkPerson('nina', [
+    networkConn('ivan', 'contact', 0.35),
+    networkConn('oleg', 'contact', 0.45),
+    networkConn('sveta', 'friend', 0.5),
+  ]),
+  marina: networkPerson('marina', [
+    networkConn('alisa', 'friend', 0.8),
+    networkConn('sveta', 'friend', 0.7),
+    networkConn('kirill', 'contact', 0.4),
+  ]),
+  sveta: networkPerson('sveta', [
+    networkConn('marina', 'friend', 0.7),
+    networkConn('alisa', 'contact', 0.4),
+    networkConn('nina', 'friend', 0.5),
+  ]),
+  kirill: networkPerson('kirill', [
+    networkConn('ivan', 'friend', 0.6),
+    networkConn('pavel', 'friend', 0.5),
+    networkConn('marina', 'contact', 0.4),
+  ]),
+};
diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index 2d82933..778c56d 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -1,16 +1,17 @@
 import { renderHeader } from '../components/header.js';
 import { authService, state } from '../state.js';
-import { renderUserAvatar } from '../components/avatar-image.js';
-import { loadUserProfileCard } from '../services/user-connections.js';
 import { makeProfileRoute } from '../services/shine-routes.js';
 import { makeProfileLinksRoute } from '../services/shine-routes.js';
+import { renderNetworkLab } from './network/lab.js';
+import { createForceGraph } from './network/force-graph.js';
+import { engineModelFromGraphModel } from './network/adapter.js';
+import { openNodeMenu, relationLabelRu } from './network/node-menu.js';
 
 export const pageMeta = { id: 'network-view', title: 'Связи' };
 
 const GENDER_MALE = 'male';
 const GENDER_FEMALE = 'female';
 const GENDER_UNKNOWN = 'unknown';
-const CENTER_NODE_ID = '__center__';
 
 function normalizeLogin(value) {
   return String(value || '').trim();
@@ -111,147 +112,6 @@ function getRelativeGenderMap(graph) {
   return map;
 }
 
-function relativeRoleLabel(role, gender) {
-  const cleanGender = normalizeGender(gender);
-  if (role === 'parent') {
-    if (cleanGender === GENDER_MALE) return 'отец';
-    if (cleanGender === GENDER_FEMALE) return 'мать';
-    return 'родитель';
-  }
-  if (role === 'child') {
-    if (cleanGender === GENDER_MALE) return 'сын';
-    if (cleanGender === GENDER_FEMALE) return 'дочь';
-    return 'потомок';
-  }
-  if (role === 'sibling') {
-    if (cleanGender === GENDER_MALE) return 'брат';
-    if (cleanGender === GENDER_FEMALE) return 'сестра';
-    return 'брат/сестра';
-  }
-  if (role === 'spouse') {
-    if (cleanGender === GENDER_MALE) return 'муж';
-    if (cleanGender === GENDER_FEMALE) return 'жена';
-    return 'жена/муж';
-  }
-  return '';
-}
-
-function buildNameLines(firstName, lastName) {
-  const first = String(firstName || '').trim();
-  const last = String(lastName || '').trim();
-  if (first && last) {
-    const full = `${first} ${last}`.trim();
-    if (full.length <= 20) return [full];
-    return [first, last];
-  }
-  if (first) return [first];
-  if (last) return [last];
-  return [];
-}
-
-function applyNodeText(node, {
-  login,
-  firstName = '',
-  lastName = '',
-  role = 'friend',
-  gender = GENDER_UNKNOWN,
-  mark = null,
-} = {}) {
-  const loginText = normalizeLogin(login);
-  const labelsWrap = node.querySelector('.node-label');
-  const nameEl = node.querySelector('.node-name');
-  const loginEl = node.querySelector('.node-login');
-  const relationEl = node.querySelector('.node-relation');
-  if (!(labelsWrap instanceof HTMLElement) || !(nameEl instanceof HTMLElement) || !(loginEl instanceof HTMLElement)) {
-    return;
-  }
-
-  const nameLines = buildNameLines(firstName, lastName);
-  nameEl.innerHTML = '';
-  if (nameLines.length) {
-    nameLines.forEach((line) => {
-      const lineEl = document.createElement('span');
-      lineEl.className = 'node-name-line';
-      lineEl.textContent = line;
-      nameEl.append(lineEl);
-    });
-    labelsWrap.classList.remove('is-login-only');
-  } else {
-    labelsWrap.classList.add('is-login-only');
-  }
-  loginEl.textContent = loginText;
-
-  const relLabel = relativeRoleLabel(role, gender);
-  if (relationEl instanceof HTMLElement) {
-    relationEl.textContent = relLabel;
-    relationEl.hidden = !relLabel;
-  }
-
-  const metaParts = [];
-  if (mark?.officialLabel) metaParts.push(mark.officialLabel);
-  if (mark?.shineLabel) metaParts.push(mark.shineLabel);
-  if (relLabel) metaParts.push(`роль: ${relLabel}`);
-  const titleMain = nameLines.length ? `${nameLines.join(' ')} (${loginText})` : loginText;
-  node.title = metaParts.length ? `${titleMain}\n${metaParts.join(', ')}` : titleMain;
-}
-
-function spread(count, start, end) {
-  if (count <= 0) return [];
-  if (count === 1) return [(start + end) / 2];
-  const out = [];
-  const step = (end - start) / (count - 1);
-  for (let i = 0; i < count; i += 1) out.push(start + step * i);
-  return out;
-}
-
-function buildNodeElement({
-  login,
-  kind = 'friend',
-  isCenter = false,
-  mark = null,
-  role = 'friend',
-  gender = GENDER_UNKNOWN,
-  firstName = '',
-  lastName = '',
-}) {
-  const node = document.createElement('button');
-  node.type = 'button';
-  const classes = [
-    'node',
-    isCenter ? 'center' : '',
-    kind === 'relative' ? 'is-relative' : 'is-friend',
-    mark?.shine ? 'is-shine' : '',
-    mark?.official ? 'is-official' : '',
-  ].filter(Boolean);
-  node.className = classes.join(' ');
-  node.dataset.nodeLogin = login;
-
-  if (mark?.official) {
-    const officialBadge = document.createElement('span');
-    officialBadge.className = 'node-badge-official';
-    officialBadge.setAttribute('aria-hidden', 'true');
-    officialBadge.textContent = 'ОФ';
-    node.append(officialBadge);
-  }
-  node.append(renderUserAvatar({
-    login,
-    avatar: mark?.avatar || null,
-    size: 'node',
-    title: login,
-  }));
-
-  const label = document.createElement('span');
-  label.className = 'node-label';
-  label.innerHTML = `
-    <span class="node-name"></span>
-    <span class="node-login"></span>
-    <span class="node-relation" hidden></span>
-  `;
-  node.append(label);
-  applyNodeText(node, { login, firstName, lastName, role, gender, mark });
-  return node;
-}
-
 function buildGraphModel(graph, centerLogin) {
   const login = normalizeLogin(graph?.login || centerLogin || state.session.login);
   const outFriends = toSet(graph?.outFriends);
@@ -264,6 +124,13 @@ function buildGraphModel(graph, centerLogin) {
   const inSiblings = toSet(graph?.inSiblings);
   const outSpouses = toSet(graph?.outSpouses);
   const inSpouses = toSet(graph?.inSpouses);
+  // контакты/подписки/знакомые — для слоя «Все контакты» (Фаза 3)
+  const outContacts = toSet(graph?.outContacts);
+  const inContacts = toSet(graph?.inContacts);
+  const outFollows = toSet(graph?.outFollows);
+  const inFollows = toSet(graph?.inFollows);
+  const outKnown = toSet(graph?.outKnownPersons);
+  const inKnown = toSet(graph?.inKnownPersons);
 
   const relativesGender = getRelativeGenderMap(graph);
   const allMarks = getMarkByLogin(graph?.allUsers);
@@ -279,6 +146,12 @@ function buildGraphModel(graph, centerLogin) {
     ...(graph?.inSiblings || []),
     ...(graph?.outSpouses || []),
     ...(graph?.inSpouses || []),
+    ...(graph?.outContacts || []),
+    ...(graph?.inContacts || []),
+    ...(graph?.outFollows || []),
+    ...(graph?.inFollows || []),
+    ...(graph?.outKnownPersons || []),
+    ...(graph?.inKnownPersons || []),
   ]).filter((entry) => normKey(entry) !== normKey(login));
 
   const relations = allLogins.map((targetLogin) => {
@@ -292,12 +165,15 @@ function buildGraphModel(graph, centerLogin) {
     const spouseIn = hasLogin(inSpouses, targetLogin);
     const friendOut = hasLogin(outFriends, targetLogin);
     const friendIn = hasLogin(inFriends, targetLogin);
+    const contactOut = hasLogin(outContacts, targetLogin) || hasLogin(outFollows, targetLogin) || hasLogin(outKnown, targetLogin);
+    const contactIn = hasLogin(inContacts, targetLogin) || hasLogin(inFollows, targetLogin) || hasLogin(inKnown, targetLogin);
 
-    let role = 'friend';
+    let role = 'contact';
     if (parentOut || parentIn) role = 'parent';
     else if (childOut || childIn) role = 'child';
     else if (spouseOut || spouseIn) role = 'spouse';
     else if (siblingOut || siblingIn) role = 'sibling';
+    else if (friendOut || friendIn) role = 'friend';
 
     let forward = friendOut;
     let backward = friendIn;
@@ -313,13 +189,16 @@ function buildGraphModel(graph, centerLogin) {
     } else if (role === 'sibling') {
       forward = siblingOut;
       backward = siblingIn;
+    } else if (role === 'contact') {
+      forward = contactOut;
+      backward = contactIn;
     }
 
     return {
       login: targetLogin,
       key: normKey(targetLogin),
       role,
-      isRelative: role !== 'friend',
+      isRelative: role === 'parent' || role === 'child' || role === 'spouse' || role === 'sibling',
       gender: normalizeGender(relativesGender.get(normKey(targetLogin))),
       forward: Boolean(forward),
       backward: Boolean(backward),
@@ -334,188 +213,14 @@ function buildGraphModel(graph, centerLogin) {
   };
 }
 
-function splitByGender(list) {
-  const left = [];
-  const right = [];
-  const center = [];
-  list.forEach((item) => {
-    if (item.gender === GENDER_FEMALE) left.push(item);
-    else if (item.gender === GENDER_MALE) right.push(item);
-    else center.push(item);
-  });
-  return { left, right, center };
-}
-
-function sortByLogin(items) {
-  return [...items].sort((a, b) => a.login.localeCompare(b.login, 'ru', { sensitivity: 'base' }));
-}
-
-function positionRows(nodes, x, yStart, yEnd) {
-  const ys = spread(nodes.length, yStart, yEnd);
-  return nodes.map((node, index) => ({ ...node, x, y: ys[index] }));
-}
-
-function layoutNodes(model) {
-  const centerNode = {
-    id: CENTER_NODE_ID,
-    login: model.centerLogin,
-    x: 50,
-    y: 50,
-    isCenter: true,
-    kind: 'center',
-    relation: null,
-    gender: GENDER_UNKNOWN,
-    mark: model.centerMark,
-  };
-
-  const parents = sortByLogin(model.relations.filter((item) => item.role === 'parent'));
-  const children = sortByLogin(model.relations.filter((item) => item.role === 'child'));
-  const spouses = sortByLogin(model.relations.filter((item) => item.role === 'spouse'));
-  const siblings = sortByLogin(model.relations.filter((item) => item.role === 'sibling'));
-  const friends = sortByLogin(model.relations.filter((item) => item.role === 'friend'));
-
-  const parentSplit = splitByGender(parents);
-  const childSplit = splitByGender(children);
-  const spouseSplit = splitByGender(spouses);
-  const siblingSplit = splitByGender(siblings);
-
-  const friendLeft = [];
-  const friendRight = [];
-  friends.forEach((item, index) => {
-    if (index % 2 === 0) friendLeft.push(item);
-    else friendRight.push(item);
-  });
-
-  const positioned = [
-    ...positionRows(parentSplit.left, 28, 16, 28),
-    ...positionRows(parentSplit.right, 72, 16, 28),
-    ...positionRows(parentSplit.center, 50, 10, 22),
-    ...positionRows(friendLeft, 12, 30, 70),
-    ...positionRows(friendRight, 88, 30, 70),
-    ...positionRows(spouseSplit.left, 36, 38, 58),
-    ...positionRows(spouseSplit.right, 64, 38, 58),
-    ...positionRows(spouseSplit.center, 50, 40, 56),
-    ...positionRows(siblingSplit.left, 30, 46, 66),
-    ...positionRows(siblingSplit.right, 70, 46, 66),
-    ...positionRows(siblingSplit.center, 50, 54, 70),
-    ...positionRows(childSplit.left, 28, 68, 84),
-    ...positionRows(childSplit.right, 72, 68, 84),
-    ...positionRows(childSplit.center, 50, 78, 88),
-  ];
-
-  const nodes = [centerNode];
-  const edges = [];
-
-  positioned.forEach((item) => {
-    const nodeId = item.key;
-    nodes.push({
-      id: nodeId,
-      login: item.login,
-      x: item.x,
-      y: item.y,
-      isCenter: false,
-      kind: item.isRelative ? 'relative' : 'friend',
-      relation: item.role,
-      gender: item.gender,
-      mark: item.mark,
-    });
-    edges.push({
-      from: item.forward ? CENTER_NODE_ID : nodeId,
-      to: item.forward ? nodeId : CENTER_NODE_ID,
-      mutual: item.forward && item.backward,
-      isRelative: item.isRelative,
-      exists: item.forward || item.backward,
-    });
-  });
-
-  return { nodes, edges };
-}
-
-function marker(svg, id, color) {
-  const el = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
-  el.setAttribute('id', id);
-  el.setAttribute('viewBox', '0 0 10 10');
-  el.setAttribute('refX', '9');
-  el.setAttribute('refY', '5');
-  el.setAttribute('markerUnits', 'strokeWidth');
-  el.setAttribute('markerWidth', '6');
-  el.setAttribute('markerHeight', '6');
-  el.setAttribute('orient', 'auto');
-
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
-  path.setAttribute('fill', color);
-  el.append(path);
-  svg.append(el);
-}
-
-function getNodeCenter(boardRect, node) {
-  const dot = node.querySelector('.node-dot');
-  if (!(dot instanceof HTMLElement)) return null;
-  const rect = dot.getBoundingClientRect();
-  return {
-    x: rect.left - boardRect.left + (rect.width / 2),
-    y: rect.top - boardRect.top + (rect.height / 2),
-    radius: rect.width / 2,
-  };
-}
-
-function shortenLine(fromPoint, toPoint, fromOffset, toOffset) {
-  const dx = toPoint.x - fromPoint.x;
-  const dy = toPoint.y - fromPoint.y;
-  const len = Math.hypot(dx, dy);
-  if (len < 1) return null;
-  const ux = dx / len;
-  const uy = dy / len;
-  return {
-    x1: fromPoint.x + (ux * fromOffset),
-    y1: fromPoint.y + (uy * fromOffset),
-    x2: toPoint.x - (ux * toOffset),
-    y2: toPoint.y - (uy * toOffset),
-  };
-}
-
-function renderEdges(svg, board, nodeElements, edges) {
-  svg.innerHTML = '';
-  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-  marker(defs, 'network-arrow-friend', 'rgba(120, 179, 255, 0.95)');
-  marker(defs, 'network-arrow-relative', 'rgba(255, 159, 94, 0.95)');
-  svg.append(defs);
-
-  const boardRect = board.getBoundingClientRect();
-  const centers = new Map();
-  nodeElements.forEach((value, key) => {
-    const pt = getNodeCenter(boardRect, value);
-    if (pt) centers.set(key, pt);
-  });
-
-  edges.forEach((edge) => {
-    if (!edge.exists) return;
-    const from = centers.get(edge.from);
-    const to = centers.get(edge.to);
-    if (!from || !to) return;
-
-    const cut = shortenLine(from, to, from.radius + 3, to.radius + 3);
-    if (!cut) return;
-
-    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-    line.setAttribute('x1', String(cut.x1));
-    line.setAttribute('y1', String(cut.y1));
-    line.setAttribute('x2', String(cut.x2));
-    line.setAttribute('y2', String(cut.y2));
-    line.setAttribute('class', `network-link ${edge.isRelative ? 'is-relative' : 'is-friend'}`);
-
-    if (!edge.mutual) {
-      line.setAttribute('marker-end', `url(#${edge.isRelative ? 'network-arrow-relative' : 'network-arrow-friend'})`);
-    }
-    svg.append(line);
-  });
-}
-
 let persistedCenterLogin = '';
 let persistedCenterHistory = [];
 
 export function render({ navigate, route }) {
+  // Лабораторный режим force-графа (Фаза 1): рендерится из мока, не трогая реальный путь ниже.
+  if (String(route?.params?.mode || '').trim().toLowerCase() === 'lab') {
+    return renderNetworkLab({ navigate });
+  }
   const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
   const routeLogin = normalizeLogin(route?.params?.login || '');
   if (!keepHistory) {
@@ -532,14 +237,35 @@ export function render({ navigate, route }) {
   stage.className = 'network-stage';
 
   const board = document.createElement('div');
-  board.className = 'network-board network-board--full';
+  board.className = 'network-board network-board--full fg-stage';
 
-  const profileCardCache = new Map();
   let centerLogin = normalizeLogin(persistedCenterLogin || state.session.login || '');
   let centerHistory = Array.isArray(persistedCenterHistory) ? [...persistedCenterHistory] : [];
-  let redrawEdges = () => {};
+  let engine = null;
+  let sheetEl = null;
   let loadSeq = 0;
 
+  // Фильтры слоёв (Фаза 3). Фокус всегда виден; предикат применяется к периферийным узлам.
+  const FILTERS = {
+    all: { label: 'Все', pred: () => true },
+    family: { label: 'Семья', pred: (n) => n.relationType === 'family' },
+    friends: { label: 'Друзья', pred: (n) => n.relationType === 'friend' },
+    shining: { label: 'Сияющие', pred: (n) => Boolean(n.shining) },
+  };
+  const FILTER_ORDER = ['all', 'family', 'friends', 'shining'];
+  let activeFilter = 'all';
+  const filterChips = {};
+
+  function applyFilter(key) {
+    if (!FILTERS[key]) return;
+    activeFilter = key;
+    FILTER_ORDER.forEach((k) => {
+      const el = filterChips[k];
+      if (el) el.classList.toggle('is-active', k === activeFilter);
+    });
+    if (engine) engine.setFilter(FILTERS[key].pred);
+  }
+
   function profileInfoRoute(login) {
     const cleanLogin = normalizeLogin(login);
     if (!cleanLogin) return '';
@@ -692,62 +418,69 @@ export function render({ navigate, route }) {
     window.setTimeout(() => inputEl.focus(), 0);
   }
 
-  function getProfileCardCached(login) {
-    const cleanLogin = normalizeLogin(login);
-    const key = normKey(cleanLogin);
-    if (!cleanLogin) return Promise.resolve(null);
-    if (!profileCardCache.has(key)) {
-      profileCardCache.set(key, loadUserProfileCard(cleanLogin).catch(() => null));
+  // Нижний сниппет (bottom sheet) с краткой сводкой об узле; не блокирует карту.
+  function showNodeSheet(node) {
+    if (!sheetEl) {
+      sheetEl = document.createElement('div');
+      sheetEl.className = 'fg-sheet';
+      stage.append(sheetEl);
     }
-    return profileCardCache.get(key);
+    const login = normalizeLogin(node.login);
+    const shineBadge = node.shining ? '<span class="fg-sheet-badge">сияющий</span>' : '';
+    sheetEl.innerHTML = `
+      <button class="fg-sheet-close" type="button" data-act="close" aria-label="Закрыть">✕</button>
+      <div class="fg-sheet-body">
+        <div class="fg-sheet-title">${escapeHtml(login)} ${shineBadge}</div>
+        <div class="fg-sheet-rel">${escapeHtml(relationLabelRu(node.relationType))}</div>
+      </div>
+      <div class="fg-sheet-actions">
+        <button class="ghost-btn" type="button" data-act="profile">Профиль</button>
+        <button class="primary-btn" type="button" data-act="write">Написать</button>
+      </div>
+    `;
+    sheetEl.classList.add('is-open');
+    sheetEl.onclick = (e) => {
+      const btn = e.target instanceof HTMLElement ? e.target.closest('[data-act]') : null;
+      if (!(btn instanceof HTMLElement)) return;
+      const act = btn.dataset.act;
+      if (act === 'close') hideNodeSheet();
+      else if (act === 'profile') { const r = profileInfoRoute(login); if (r) navigate(r); }
+      else if (act === 'write') navigate(`chat-view/${encodeURIComponent(login)}`);
+    };
   }
 
-  async function hydrateNodeProfiles(layout, nodeElements, requestId) {
-    const uniqueNodes = [];
-    const seen = new Set();
-    layout.nodes.forEach((nodeModel) => {
-      const key = normKey(nodeModel.login);
-      if (!key || seen.has(key)) return;
-      seen.add(key);
-      uniqueNodes.push(nodeModel);
-    });
-
-    const cards = await Promise.all(uniqueNodes.map((nodeModel) => getProfileCardCached(nodeModel.login)));
-    if (requestId !== loadSeq) return;
-
-    const cardByKey = new Map();
-    cards.forEach((card) => {
-      const login = normalizeLogin(card?.login);
-      if (!login) return;
-      cardByKey.set(normKey(login), card);
-    });
-
-    layout.nodes.forEach((nodeModel) => {
-      const node = nodeElements.get(nodeModel.id);
-      if (!(node instanceof HTMLElement)) return;
-      const card = cardByKey.get(normKey(nodeModel.login));
-      const cardGender = normalizeGender(card?.gender);
-      applyNodeText(node, {
-        login: nodeModel.login,
-        firstName: card?.firstName || '',
-        lastName: card?.lastName || '',
-        role: nodeModel.relation || 'friend',
-        gender: nodeModel.gender === GENDER_UNKNOWN ? cardGender : nodeModel.gender,
-        mark: nodeModel.mark || null,
-      });
-    });
-
-    requestAnimationFrame(() => redrawEdges());
+  function hideNodeSheet() {
+    if (sheetEl) sheetEl.classList.remove('is-open');
   }
 
-  function bindNodeInteraction(node, nodeModel) {
-    node.addEventListener('click', () => {
-      if (nodeModel.isCenter) {
-        const routeTo = profileInfoRoute(nodeModel.login);
+  function ensureEngine(model) {
+    if (engine) {
+      engine.setModel(model);
+      return;
+    }
+    engine = createForceGraph({
+      stage: board,
+      model,
+      // тап по периферийному узлу — центрируем (грузим его граф) и показываем нижний сниппет
+      onNodeTap: (node) => { showNodeSheet(node); void load(node.login, { pushHistory: true }); },
+      // тап по центру — полноценный профиль
+      onCenterTap: (node) => {
+        const routeTo = profileInfoRoute(node.login);
         if (routeTo) navigate(routeTo);
-        return;
-      }
-      void load(nodeModel.login, { pushHistory: true });
+      },
+      // долгое нажатие — контекстное меню (вне масштабируемого холста)
+      onNodeLongPress: (node, point) => {
+        const login = normalizeLogin(node.login);
+        openNodeMenu({
+          login,
+          relationType: node.relationType,
+          point,
+          actions: [
+            { label: 'Профиль', onClick: () => { const r = profileInfoRoute(login); if (r) navigate(r); } },
+            { label: 'Написать', onClick: () => navigate(`chat-view/${encodeURIComponent(login)}`) },
+          ],
+        });
+      },
     });
   }
 
@@ -765,34 +498,12 @@ export function render({ navigate, route }) {
       }
       syncLinksUrl(targetCenter, { push: pushHistory });
 
-      const model = buildGraphModel(graph, targetCenter);
-      const layout = layoutNodes(model);
+      const graphModel = buildGraphModel(graph, targetCenter);
+      const engineModel = engineModelFromGraphModel(graphModel);
+      ensureEngine(engineModel);
+      // сохраняем выбранный фильтр при перестроении графа (центрирование/переход)
+      if (engine && activeFilter !== 'all') engine.setFilter(FILTERS[activeFilter].pred);
 
-      board.innerHTML = '';
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttribute('class', 'network-svg');
-      board.append(svg);
-
-      const nodeElements = new Map();
-      layout.nodes.forEach((nodeModel) => {
-        const node = buildNodeElement({
-          login: nodeModel.login,
-          kind: nodeModel.kind,
-          isCenter: nodeModel.isCenter,
-          role: nodeModel.relation || 'friend',
-          gender: nodeModel.gender,
-          mark: nodeModel.mark,
-        });
-        node.style.left = `${nodeModel.x}%`;
-        node.style.top = `${nodeModel.y}%`;
-        board.append(node);
-        nodeElements.set(nodeModel.id, node);
-        bindNodeInteraction(node, nodeModel);
-      });
-
-      redrawEdges = () => renderEdges(svg, board, nodeElements, layout.edges);
-      requestAnimationFrame(() => redrawEdges());
-      void hydrateNodeProfiles(layout, nodeElements, requestId);
       persistHistory();
       setBackButtonState(backBtnEl);
     } catch (error) {
@@ -823,18 +534,10 @@ export function render({ navigate, route }) {
   const backBtnEl = header.querySelector('.header-left .icon-btn');
   setBackButtonState(backBtnEl);
 
-  const onResize = () => redrawEdges();
-  window.addEventListener('resize', onResize);
-
-  let observer = null;
-  if (typeof ResizeObserver !== 'undefined') {
-    observer = new ResizeObserver(() => redrawEdges());
-    observer.observe(board);
-  }
-
+  // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
-    window.removeEventListener('resize', onResize);
-    if (observer) observer.disconnect();
+    if (engine) engine.destroy();
+    engine = null;
     appScreenEl?.classList.remove('network-scroll-lock');
   };
 
@@ -857,8 +560,21 @@ export function render({ navigate, route }) {
   }
   setBackButtonState(backBtnEl);
 
+  // Панель фильтров слоёв (оверлей под шапкой)
+  const filterBar = document.createElement('div');
+  filterBar.className = 'fg-filter-bar';
+  FILTER_ORDER.forEach((key) => {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = `fg-filter-chip${key === activeFilter ? ' is-active' : ''}`;
+    chip.textContent = FILTERS[key].label;
+    chip.addEventListener('click', () => applyFilter(key));
+    filterChips[key] = chip;
+    filterBar.append(chip);
+  });
+
   header.classList.add('network-header-overlay');
-  stage.append(board, header);
+  stage.append(board, header, filterBar);
   screen.append(stage);
   return screen;
 }
diff --git a/shine-UI/js/pages/network/adapter.js b/shine-UI/js/pages/network/adapter.js
new file mode 100644
index 0000000..2ea11e2
--- /dev/null
+++ b/shine-UI/js/pages/network/adapter.js
@@ -0,0 +1,72 @@
+// Адаптер реальных данных → нейтральная модель движка force-графа.
+//
+// Источник — результат buildGraphModel() из network-view.js (он уже нормализует ответ
+// authService.getUserConnectionsGraph в роли/направления/метки). Здесь только конвертация
+// в форму, которую понимает движок ({ focusId, nodes[] }). Сервер не трогаем — это чтение.
+
+function normLogin(value) {
+  return String(value || '').trim();
+}
+
+const FAMILY_ROLES = ['parent', 'child', 'spouse', 'sibling'];
+
+function relationTypeFromRole(role) {
+  if (FAMILY_ROLES.includes(role)) return 'family';
+  if (role === 'friend') return 'friend';
+  return 'contact';
+}
+
+// Сила связи (0..1) → радиус орбиты в движке. Реальный API пока не отдаёт численную силу,
+// поэтому выводим её эвристически из роли и направления связи:
+//  - родственники держим ближе всего, контакты — дальше всего;
+//  - взаимные дружеские связи ближе односторонних.
+function deriveStrength(relation) {
+  if (relation.isRelative) return 0.9;
+  if (relation.role === 'contact') return 0.4;
+  if (relation.forward && relation.backward) return 0.8;
+  return 0.55;
+}
+
+/**
+ * @param {{centerLogin:string, centerMark:object|null, relations:Array}} graphModel
+ * @returns {{focusId:string, nodes:Array}}
+ */
+export function engineModelFromGraphModel(graphModel) {
+  const focusLogin = normLogin(graphModel?.centerLogin);
+  const centerMark = graphModel?.centerMark || null;
+
+  const focusNode = {
+    id: focusLogin,
+    login: focusLogin,
+    name: '',
+    avatar: centerMark?.avatar || null,
+    relationType: 'self',
+    strength: 1,
+    shining: Boolean(centerMark?.shine),
+    tier: 1,
+  };
+
+  const relations = Array.isArray(graphModel?.relations) ? graphModel.relations : [];
+  const seen = new Set();
+  const nodes = relations
+    .map((r) => {
+      const login = normLogin(r?.login);
+      const key = login.toLowerCase();
+      // исключаем сам фокус (не должно быть линии на собственный ник) и дубли
+      if (!login || key === focusLogin.toLowerCase() || seen.has(key)) return null;
+      seen.add(key);
+      return {
+        id: login,
+        login,
+        name: '',
+        avatar: r?.mark?.avatar || null,
+        relationType: relationTypeFromRole(r?.role),
+        strength: deriveStrength(r || {}),
+        shining: Boolean(r?.mark?.shine),
+        tier: 1,
+      };
+    })
+    .filter(Boolean);
+
+  return { focusId: focusLogin, nodes: [focusNode, ...nodes] };
+}
diff --git a/shine-UI/js/pages/network/force-graph.js b/shine-UI/js/pages/network/force-graph.js
new file mode 100644
index 0000000..ea5ac66
--- /dev/null
+++ b/shine-UI/js/pages/network/force-graph.js
@@ -0,0 +1,900 @@
+// Движок интерактивной карты связей (force-directed graph).
+//
+// Что делает:
+// - держит «мир» (бесконечный холст), по которому можно панорамировать свайпом;
+// - раскладывает фокусный узел в центре, остальные — по орбите (радиус зависит от силы связи);
+// - по тапу на периферийный узел плавно стягивает его в центр (новый фокус), старый уходит на орбиту;
+// - рисует рёбра аналитически (без чтения DOM в цикле) — дёшево для 60 FPS.
+//
+// Критичные требования (см. план):
+// 1) Kill-switch физики: цикл rAF останавливается, когда кинетическая энергия падает ниже порога;
+//    просыпается только при взаимодействии (pan / tap / recenter). Батарея не «выжирается».
+// 2) Конфликт жестов: любой pan мгновенно прерывает твин центрирования и отдаёт управление пальцу.
+//
+// Движок работает с нейтральной моделью (ниже buildModelFromTz конвертирует форму ТЗ в неё):
+//   model = { focusId, nodes: [{ id, login, name, avatar, relationType, strength, shining, tier }] }
+
+import { renderUserAvatar } from '../../components/avatar-image.js';
+
+// --- Параметры физики и анимации ---------------------------------------------
+const ORBIT_MIN = 150;          // минимальный радиус орбиты (защитный отступ от центра), px
+const ORBIT_MAX = 240;          // максимальный радиус орбиты (слабая связь — дальше), px
+const K_RADIAL = 0.035;         // очень мягкая пружина пера к орбите — узлы выходят «как резина»
+const K_FOCUS = 0.12;           // мягкая пружина фокуса к центру
+const CHARGE = 1400;            // базовое отталкивание (на старте перестроения временно ослабляется)
+const CHARGE_START_FACTOR = 0.45; // доля отталкивания в момент «рождения» из центра (без паники)
+const MIN_DIST = 40;            // минимальная дистанция для расчёта отталкивания
+const FRICTION = 0.82;          // базовое затухание скорости (свободное покачивание)
+const FRICTION_BOOST = 0.92;    // максимальная вязкость в первые ~600мс после перестроения (гасит «взрыв»)
+const BOOST_FRAMES = 36;        // длительность затухающего boost'а вязкости (~600мс @60fps)
+const SLEEP_V = 0.03;           // порог суммарной |vx|+|vy| для жёсткой заморозки графа
+const INTRO_FACTOR = 0.22;      // стартовый радиус пера (доля от целевого) — узлы «вылетают» из центра
+const EDGE_LERP = 0.25;         // догон концов линии за узлом за кадр (эффект натянутой резинки)
+const PAN_FRICTION = 0.93;      // трение инерционного скролла карты
+const TWEEN_MS = 560;           // длительность анимации центрирования
+const FOCUS_SCALE = 1.5;        // базовый масштаб фокуса (CSS-дыхание колеблет ±~1.3% → 1.48–1.52x)
+const PRIMARY_SCALE = 1.0;      // масштаб обычного узла 1-го уровня
+const SECONDARY_SCALE = 0.72;   // масштаб узлов 2-го уровня (друзья друзей)
+const PAN_THRESHOLD = 8;        // порог смещения (px), после которого жест считается pan, а не tap
+const LONGPRESS_MS = 480;       // порог долгого нажатия
+const MAX_FULL_NODES = 90;      // хард-лимит полных DOM-аватарок; остальное — лёгкие SVG-подобные точки
+
+const RELATION_COLORS = {
+  family: 'rgba(255, 159, 94, 0.92)',
+  friend: 'rgba(120, 179, 255, 0.9)',
+  business: 'rgba(190, 150, 255, 0.9)',
+  contact: 'rgba(170, 190, 220, 0.7)',
+};
+
+function easeOutCubic(t) {
+  const x = 1 - t;
+  return 1 - x * x * x;
+}
+
+function relationColor(relationType) {
+  return RELATION_COLORS[relationType] || RELATION_COLORS.contact;
+}
+
+// Равномерный угол по кругу — гарантирует отсутствие угловых наложений при любом N.
+// Небольшой постоянный сдвиг, чтобы первый узел не «прилипал» к горизонтали.
+function spreadAngle(index, total) {
+  if (total <= 0) return 0;
+  return ((index / total) * Math.PI * 2 + 0.52) % (Math.PI * 2);
+}
+
+// Детерминированный «джиттер» по id (0..1) — чтобы орбита была органически неровной,
+// а не идеальным кругом. Без Math.random: одинаковый узел всегда смещён одинаково.
+function hash01(str) {
+  let h = 2166136261;
+  const s = String(str || '');
+  for (let i = 0; i < s.length; i += 1) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return ((h >>> 0) % 1000) / 1000;
+}
+
+/**
+ * Создаёт движок графа внутри переданного контейнера-сцены.
+ * @param {Object} opts
+ * @param {HTMLElement} opts.stage - контейнер сцены (position: relative/absolute, overflow hidden)
+ * @param {Object} opts.model - нормализованная модель { focusId, nodes[] }
+ * @param {Function} [opts.onCenterTap] - тап по центральному узлу (node) => void
+ * @param {Function} [opts.onNodeTap] - тап по периферийному узлу (node) => void (вызывается ДО центрирования)
+ * @param {Function} [opts.onNodeLongPress] - долгое нажатие (node, screenPoint) => void
+ * @returns {{ destroy: Function, recenter: Function, setModel: Function, getFocusNode: Function }}
+ */
+export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeLongPress } = {}) {
+  // Слои DOM
+  const edgesSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  edgesSvg.setAttribute('class', 'fg-edges');
+  const world = document.createElement('div');
+  world.className = 'fg-world';
+  // «Прицел» в центре экрана: сжимается, когда под центром никого нет, и расширяется,
+  // когда под него попадает узел (визуальная зона фокуса при свободном панорамировании).
+  const reticle = document.createElement('div');
+  reticle.className = 'fg-reticle';
+  stage.append(edgesSvg, world, reticle);
+
+  // Состояние камеры (панорамирование)
+  let camX = 0;
+  let camY = 0;
+  let viewW = stage.clientWidth || window.innerWidth;
+  let viewH = stage.clientHeight || window.innerHeight;
+  let centerX = viewW / 2;
+  let centerY = viewH / 2;
+
+  // Узлы движка: { id, login, name, ..., x, y, vx, vy, targetR, angle, scale, scaleFrom, scaleTo, el, dotRadius }
+  let nodes = [];
+  let focusId = '';
+
+  // Управление циклом rAF
+  let rafId = 0;
+  let dragging = false;
+
+  // Твин центрирования
+  let tween = null; // { startTs, from: Map(id->{x,y,scale}), to: Map(id->{x,y,scale}), camFrom, camTo }
+
+  // Точка, из которой новый фокус «влетает» в центр (мировые координаты кликнутого узла)
+  let pendingFocusOrigin = null;
+
+  // Прогресс «прорастания» линий 0→1 (1 = полностью вычерчены)
+  let edgeGrowth = 1;
+
+  // Затухающий «boost» вязкости после перестроения (1→0): гасит энергию «взрыва» из центра.
+  let boost = 0;
+  let frictionNow = FRICTION;
+  let chargeNow = CHARGE;
+
+  // Инерция панорамирования (kinematic panning)
+  let panVelX = 0;
+  let panVelY = 0;
+
+  // --- Построение модели -----------------------------------------------------
+  // Вычисляем «спецификации» узлов нового графа (без создания DOM) — для диффинга:
+  // фокус + периферия, отсортированная по силе связи; сверх лимита — лёгкие точки.
+  function computeSpecs(srcModel) {
+    const list = Array.isArray(srcModel?.nodes) ? srcModel.nodes : [];
+    const fId = String(srcModel?.focusId || (list[0] && list[0].id) || '');
+    const peers = list
+      .filter((n) => String(n.id) !== fId)
+      .sort((a, b) => (Number(b.strength) || 0) - (Number(a.strength) || 0));
+    const dotCount = Math.max(0, peers.length - MAX_FULL_NODES);
+    if (dotCount > 0) {
+      console.info(`[force-graph] связей ${peers.length}: полных аватарок ${MAX_FULL_NODES}, точек ${dotCount}`);
+    }
+    const specs = [];
+    const focusSrc = list.find((n) => String(n.id) === fId) || list[0];
+    if (focusSrc) specs.push({ src: focusSrc, id: String(focusSrc.id), isFocus: true, index: 0, total: 1, dotOnly: false });
+    peers.forEach((p, i) => specs.push({ src: p, id: String(p.id), isFocus: false, index: i, total: peers.length, dotOnly: i >= MAX_FULL_NODES }));
+    return { focusId: fId, specs };
+  }
+
+  function buildNodes(srcModel) {
+    const { focusId: fId, specs } = computeSpecs(srcModel);
+    focusId = fId;
+    return specs.map((s) => makeNodeState(s.src, s.isFocus, s.index, s.total, s.dotOnly));
+  }
+
+  function makeNodeState(src, isFocus, index, total, dotOnly = false) {
+    const strength = Math.max(0, Math.min(1, Number(src.strength) || 0.5));
+    const tier = Number(src.tier) || 1;
+    // органическая неровность: детерминированный джиттер радиуса (±9px) и угла (±0.2 рад)
+    const jr = (hash01(src.id) - 0.5) * 18;
+    const ja = (hash01(`${src.id}~a`) - 0.5) * 0.4;
+    const targetR = isFocus ? 0 : ORBIT_MIN + (1 - strength) * (ORBIT_MAX - ORBIT_MIN) + jr;
+    const angle = isFocus ? 0 : spreadAngle(index, total) + ja;
+    const scale = isFocus ? FOCUS_SCALE : (tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE);
+    // целевая точка на орбите (равномерно по углу) и стартовая позиция ближе к центру —
+    // узлы «выезжают» наружу при появлении (демонстрация физики), потом пружина их фиксирует.
+    const tx = isFocus ? 0 : Math.cos(angle) * targetR;
+    const ty = isFocus ? 0 : Math.sin(angle) * targetR;
+    const el = buildNodeElement(src, isFocus, tier, dotOnly);
+    world.append(el);
+    return {
+      ...src,
+      isFocus,
+      tier,
+      dotOnly,
+      strength,
+      targetR,
+      angle,
+      tx,
+      ty,
+      x: tx * INTRO_FACTOR,
+      y: ty * INTRO_FACTOR,
+      lerpX: tx * INTRO_FACTOR,
+      lerpY: ty * INTRO_FACTOR,
+      vx: 0,
+      vy: 0,
+      scale,
+      targetScale: scale,
+      hidden: false,
+      opacity: 1,
+      targetOpacity: 1,
+      bloom: false,
+      el,
+      dotRadius: isFocus ? 32 : (dotOnly ? 7 : (tier >= 2 ? 18 : 26)),
+    };
+  }
+
+  function buildNodeElement(src, isFocus, tier, dotOnly = false) {
+    const el = document.createElement('button');
+    el.type = 'button';
+    // лёгкая точка для узлов сверх лимита: без аватара и подписи (производительность)
+    if (dotOnly) {
+      el.className = [
+        'fg-node', 'fg-dot',
+        src.shining ? 'is-shine' : '',
+        `is-${src.relationType || 'contact'}`,
+      ].filter(Boolean).join(' ');
+      el.dataset.nodeId = String(src.id);
+      el.title = src.name || src.login || '';
+      return el;
+    }
+    el.className = [
+      'fg-node',
+      isFocus ? 'is-focus' : '',
+      src.shining ? 'is-shine' : '',
+      `is-${src.relationType || 'contact'}`,
+      tier >= 2 ? 'is-secondary' : '',
+    ].filter(Boolean).join(' ');
+    el.dataset.nodeId = String(src.id);
+
+    const avatar = renderUserAvatar({
+      login: src.login || src.name || String(src.id),
+      firstName: src.name || '',
+      avatar: src.avatar || null,
+      size: 'node',
+      title: src.name || src.login || '',
+    });
+    el.append(avatar);
+
+    const label = document.createElement('span');
+    label.className = 'fg-node-label';
+    label.textContent = src.name || src.login || '';
+    el.append(label);
+    return el;
+  }
+
+  // Переиспользование узла при диффинге: сохраняем x/y/скорость, задаём новую роль и цель.
+  function updateNodeRole(node, spec) {
+    const src = spec.src;
+    const strength = Math.max(0, Math.min(1, Number(src.strength) || 0.5));
+    const tier = Number(src.tier) || 1;
+    node.isFocus = spec.isFocus;
+    node.tier = tier;
+    node.dotOnly = spec.dotOnly;
+    node.strength = strength;
+    node.relationType = src.relationType;
+    node.shining = Boolean(src.shining);
+    const jr = (hash01(src.id) - 0.5) * 18;
+    const ja = (hash01(`${src.id}~a`) - 0.5) * 0.4;
+    node.targetR = spec.isFocus ? 0 : ORBIT_MIN + (1 - strength) * (ORBIT_MAX - ORBIT_MIN) + jr;
+    node.angle = spec.isFocus ? 0 : spreadAngle(spec.index, spec.total) + ja;
+    node.tx = Math.cos(node.angle) * node.targetR;
+    node.ty = Math.sin(node.angle) * node.targetR;
+    node.targetScale = spec.isFocus ? FOCUS_SCALE : (spec.dotOnly ? 1 : (tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE));
+    node.targetOpacity = 1;
+    node.hidden = false;
+    node.bloom = false;
+    node.dotRadius = spec.isFocus ? 32 : (spec.dotOnly ? 7 : (tier >= 2 ? 18 : 26));
+    // обновляем классы элемента (роль/тип/свечение) — без пересоздания DOM
+    node.el.className = spec.dotOnly
+      ? ['fg-node', 'fg-dot', src.shining ? 'is-shine' : '', `is-${src.relationType || 'contact'}`].filter(Boolean).join(' ')
+      : ['fg-node', spec.isFocus ? 'is-focus' : '', src.shining ? 'is-shine' : '', `is-${src.relationType || 'contact'}`, tier >= 2 ? 'is-secondary' : ''].filter(Boolean).join(' ');
+  }
+
+  // --- Рендер ----------------------------------------------------------------
+  function applyWorldTransform() {
+    world.style.transform = `translate3d(${camX}px, ${camY}px, 0)`;
+  }
+
+  function renderNodes() {
+    for (const n of nodes) {
+      n.el.style.transform =
+        `translate(calc(${n.x}px - 50%), calc(${n.y}px - 50%)) scale(${n.scale})`;
+      n.el.style.opacity = String(n.opacity);
+      n.el.style.pointerEvents = n.hidden && n.opacity <= 0.01 ? 'none' : '';
+    }
+  }
+
+  function renderEdges() {
+    const focus = nodes.find((n) => n.id === focusId);
+    if (!focus) {
+      edgesSvg.innerHTML = '';
+      return;
+    }
+    // концы линий — строго по центрам узлов (намертво привязаны), изгиб даёт скорость
+    const tx = (n) => centerX + camX + n.x;
+    const ty = (n) => centerY + camY + n.y;
+
+    const fx = tx(focus);
+    const fy = ty(focus);
+    const fr = focus.dotRadius * focus.scale + 4;
+
+    const focusLogin = String(focus.login || '').toLowerCase();
+    const parts = [];
+    for (const n of nodes) {
+      if (n === focus) continue;
+      if (n.hidden) continue;
+      if (focusLogin && String(n.login || '').toLowerCase() === focusLogin) continue;
+      const nx = tx(n);
+      const ny = ty(n);
+      if ((nx < -80 && fx < -80) || (nx > viewW + 80 && fx > viewW + 80)) continue;
+      if ((ny < -80 && fy < -80) || (ny > viewH + 80 && fy > viewH + 80)) continue;
+
+      const dx = nx - fx;
+      const dy = ny - fy;
+      const len = Math.hypot(dx, dy) || 1;
+      const ux = dx / len;
+      const uy = dy / len;
+      const nr = n.dotRadius * n.scale + 4;
+      // концы линии — у краёв кружков (по истинной позиции)
+      const x1 = fx + ux * fr;
+      const y1 = fy + uy * fr;
+      const x2 = nx - ux * nr;
+      const y2 = ny - uy * nr;
+      // контрольная точка кривой Безье: постоянный лёгкий изгиб (провисание) перпендикулярно
+      // линии + динамика от запаздывания (при движении узла нить выгибается сильнее)
+      const mx = (x1 + x2) / 2;
+      const my = (y1 + y2) / 2;
+      const segLen0 = Math.hypot(x2 - x1, y2 - y1);
+      // изгиб строго перпендикулярный: заметная постоянная дуга (≈7–22px) +
+      // динамика от скорости узла → при движении нить выгибается, как натянутая резина
+      const speed = Math.hypot(n.vx, n.vy);
+      const bow = Math.max(7, Math.min(22, segLen0 * 0.13)) + Math.min(16, speed * 1.2);
+      const cpx = mx + (-uy) * bow * 2; // CP даёт середину Q-кривой = M + perp*bow
+      const cpy = my + ux * bow * 2;
+      // минимализм: тонкие (1.3–1.8px), полупрозрачные линии — без «энергетических лучей»
+      const w = 1.3 + n.strength * 0.5;
+      // прорастание: длину пути приближаем хордой, dash-offset → 0
+      let dash = '';
+      if (edgeGrowth < 1) {
+        const segLen = (Math.hypot(cpx - x1, cpy - y1) + Math.hypot(x2 - cpx, y2 - cpy)) || 1;
+        dash = ` stroke-dasharray="${segLen.toFixed(1)}" stroke-dashoffset="${(segLen * (1 - edgeGrowth)).toFixed(1)}"`;
+      }
+      parts.push(
+        `<path d="M${x1.toFixed(1)} ${y1.toFixed(1)} Q${cpx.toFixed(1)} ${cpy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}" `
+        + `fill="none" stroke="${relationColor(n.relationType)}" stroke-opacity="0.42" stroke-width="${w.toFixed(2)}" stroke-linecap="round"${dash} />`
+      );
+    }
+    edgesSvg.innerHTML = parts.join('');
+  }
+
+  function updateReticle() {
+    // ближайший видимый узел к центру экрана (центр = camX/camY смещение от мировой точки 0,0)
+    let best = Infinity;
+    for (const n of nodes) {
+      if (n.hidden) continue;
+      const d = Math.hypot(camX + n.x, camY + n.y);
+      if (d < best) best = d;
+    }
+    reticle.classList.toggle('is-locked', best < 46);
+  }
+
+  function renderAll() {
+    renderNodes();
+    renderEdges();
+    updateReticle();
+  }
+
+  // --- Физика (пружины + отталкивание) ---------------------------------------
+  // Фокус не «пинится» жёстко, а влетает к центру пружиной (упругая стабилизация).
+  // Периферия держится радиальной пружиной на орбите и расталкивается силой charge —
+  // получается органичная плавающая структура, а не жёсткий круг.
+  function stepPhysics() {
+    let totalV = 0;
+    for (const n of nodes) {
+      if (n.hidden) { n.vx = 0; n.vy = 0; continue; } // скрытые фильтром узлы физика не двигает
+      let ax = 0;
+      let ay = 0;
+
+      if (n.isFocus) {
+        // пружина к центру: быстрый влёт + лёгкий отскок (фокус сам не отталкивается)
+        ax += K_FOCUS * (0 - n.x);
+        ay += K_FOCUS * (0 - n.y);
+      } else {
+        // радиальная пружина к целевому радиусу орбиты
+        const d = Math.hypot(n.x, n.y) || 0.001;
+        const ux = n.x / d;
+        const uy = n.y / d;
+        const fr = K_RADIAL * (n.targetR - d);
+        ax += fr * ux;
+        ay += fr * uy;
+        // отталкивание от всех остальных видимых узлов (включая фокус — чтобы не залипали в центре)
+        for (const m of nodes) {
+          if (m === n || m.hidden) continue;
+          const dx = n.x - m.x;
+          const dy = n.y - m.y;
+          let dist2 = dx * dx + dy * dy;
+          if (dist2 < MIN_DIST * MIN_DIST) dist2 = MIN_DIST * MIN_DIST;
+          const dist = Math.sqrt(dist2);
+          const f = chargeNow / dist2;
+          ax += (dx / dist) * f;
+          ay += (dy / dist) * f;
+        }
+      }
+
+      n.vx = (n.vx + ax) * frictionNow;
+      n.vy = (n.vy + ay) * frictionNow;
+      n.x += n.vx;
+      n.y += n.vy;
+      totalV += Math.abs(n.vx) + Math.abs(n.vy);
+    }
+    return totalV;
+  }
+
+  // Концы линий догоняют узлы с запаздыванием (эффект резинки): lerp-позиция тянется за реальной.
+  function advanceLerp() {
+    for (const n of nodes) {
+      n.lerpX += (n.x - n.lerpX) * EDGE_LERP;
+      n.lerpY += (n.y - n.lerpY) * EDGE_LERP;
+    }
+  }
+
+  // Плавное приближение масштаба/прозрачности к целям (bloom новых, рост/уменьшение при смене роли).
+  function advanceVisual() {
+    for (const n of nodes) {
+      n.scale += (n.targetScale - n.scale) * 0.2;
+      n.opacity += (n.targetOpacity - n.opacity) * 0.2;
+    }
+  }
+
+  // Не «успокоились» ли ещё визуальные параметры (для условия заморозки).
+  function visualSettling() {
+    for (const n of nodes) {
+      if (Math.abs(n.scale - n.targetScale) > 0.01 || Math.abs(n.opacity - n.targetOpacity) > 0.01) return true;
+    }
+    return false;
+  }
+
+  // --- Твин центрирования -----------------------------------------------------
+  function startRecenterTween(newFocusId) {
+    const target = nodes.find((n) => String(n.id) === String(newFocusId));
+    if (!target || target.isFocus) return;
+
+    focusId = String(newFocusId);
+    // пересчёт ролей: новый фокус — в центр, остальные — на орбиту (включая старый фокус)
+    const peers = nodes.filter((n) => String(n.id) !== focusId);
+    const from = new Map();
+    const to = new Map();
+    nodes.forEach((n) => from.set(n.id, { x: n.x, y: n.y, scale: n.scale }));
+
+    nodes.forEach((n) => {
+      n.isFocus = String(n.id) === focusId;
+      n.el.classList.toggle('is-focus', n.isFocus);
+    });
+
+    target.targetR = 0;
+    target.tx = 0;
+    target.ty = 0;
+    target.vx = 0;
+    target.vy = 0;
+    to.set(target.id, { x: 0, y: 0, scale: FOCUS_SCALE });
+
+    peers.forEach((n, i) => {
+      n.targetR = ORBIT_MIN + (1 - n.strength) * (ORBIT_MAX - ORBIT_MIN);
+      n.angle = spreadAngle(i, peers.length);
+      n.vx = 0;
+      n.vy = 0;
+      const tx = Math.cos(n.angle) * n.targetR;
+      const ty = Math.sin(n.angle) * n.targetR;
+      n.tx = tx;             // обновляем целевую точку, иначе физика после твина утянет узел назад
+      n.ty = ty;
+      const sc = n.tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE;
+      to.set(n.id, { x: tx, y: ty, scale: sc });
+    });
+
+    tween = {
+      startTs: 0,
+      from,
+      to,
+      camFrom: { x: camX, y: camY },
+      camTo: { x: 0, y: 0 },
+    };
+    wake();
+  }
+
+  function stepTween(ts) {
+    if (!tween.startTs) tween.startTs = ts;
+    const raw = Math.min(1, (ts - tween.startTs) / TWEEN_MS);
+    const t = easeOutCubic(raw);
+    for (const n of nodes) {
+      const a = tween.from.get(n.id);
+      const b = tween.to.get(n.id);
+      if (!a || !b) continue;
+      n.x = a.x + (b.x - a.x) * t;
+      n.y = a.y + (b.y - a.y) * t;
+      n.scale = a.scale + (b.scale - a.scale) * t;
+      const ao = a.opacity ?? 1;
+      const bo = b.opacity ?? 1;
+      n.opacity = ao + (bo - ao) * t;
+    }
+    camX = tween.camFrom.x + (tween.camTo.x - tween.camFrom.x) * t;
+    camY = tween.camFrom.y + (tween.camTo.y - tween.camFrom.y) * t;
+    applyWorldTransform();
+    if (raw >= 1) {
+      tween = null; // твин завершён
+      // синхронизируем цели визуала с текущими, чтобы advanceVisual не «откатил» (важно для фильтра)
+      for (const n of nodes) { n.targetScale = n.scale; n.targetOpacity = n.opacity; }
+    }
+  }
+
+  // Прерывание твина жестом (требование «конфликт жестов»): фиксируем текущие позиции и отдаём пальцу.
+  function cancelTween() {
+    if (!tween) return;
+    tween = null;
+    for (const n of nodes) { n.vx = 0; n.vy = 0; }
+  }
+
+  // Фильтр слоёв: pred(node) → показывать ли узел. Фокус всегда виден.
+  // Видимые перераспределяются по орбите, скрытые плавно гаснут (scale↓ + opacity→0).
+  function setFilter(predicate) {
+    const pred = typeof predicate === 'function' ? predicate : () => true;
+    const from = new Map();
+    const to = new Map();
+    nodes.forEach((n) => from.set(n.id, { x: n.x, y: n.y, scale: n.scale, opacity: n.opacity }));
+
+    const visiblePeers = [];
+    nodes.forEach((n) => {
+      if (n.isFocus) { n.hidden = false; return; }
+      n.hidden = !pred(n);
+      n.vx = 0;
+      n.vy = 0;
+      if (!n.hidden) visiblePeers.push(n);
+    });
+
+    const focus = nodes.find((n) => n.isFocus);
+    if (focus) to.set(focus.id, { x: 0, y: 0, scale: FOCUS_SCALE, opacity: 1 });
+
+    visiblePeers.forEach((n, i) => {
+      n.targetR = ORBIT_MIN + (1 - n.strength) * (ORBIT_MAX - ORBIT_MIN);
+      n.angle = spreadAngle(i, visiblePeers.length);
+      n.tx = Math.cos(n.angle) * n.targetR;
+      n.ty = Math.sin(n.angle) * n.targetR;
+      const sc = n.tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE;
+      to.set(n.id, { x: n.tx, y: n.ty, scale: sc, opacity: 1 });
+    });
+
+    nodes.forEach((n) => {
+      if (n.isFocus || !n.hidden) return;
+      // скрытые: подтягиваем к центру и гасим
+      to.set(n.id, { x: n.x * 0.35, y: n.y * 0.35, scale: 0.2, opacity: 0 });
+    });
+
+    // фильтр не двигает камеру (в отличие от центрирования)
+    tween = { startTs: 0, from, to, camFrom: { x: camX, y: camY }, camTo: { x: camX, y: camY } };
+    wake();
+  }
+
+  // Жёсткая заморозка: гасим скорости, округляем координаты до целых пикселей,
+  // подтягиваем lerp и НЕ перезапускаем цикл — граф замирает намертво (без «треска»).
+  function freezeGraph() {
+    for (const n of nodes) {
+      n.vx = 0;
+      n.vy = 0;
+      n.x = Math.round(n.x);
+      n.y = Math.round(n.y);
+      n.lerpX = n.x;
+      n.lerpY = n.y;
+      n.scale = n.targetScale;
+      n.opacity = n.targetOpacity;
+    }
+    renderAll(); // финальный кадр на целых координатах
+  }
+
+  // --- Цикл с kill-switch + инерция + заморозка ------------------------------
+  function tick(ts) {
+    rafId = 0;
+
+    // инерция панорамирования (kinematic): камера докатывается с трением
+    const panActive = !dragging && (Math.abs(panVelX) > 0.15 || Math.abs(panVelY) > 0.15);
+    if (panActive) {
+      camX += panVelX;
+      camY += panVelY;
+      panVelX *= PAN_FRICTION;
+      panVelY *= PAN_FRICTION;
+      applyWorldTransform();
+    } else {
+      panVelX = 0;
+      panVelY = 0;
+    }
+
+    if (edgeGrowth < 1) edgeGrowth = Math.min(1, edgeGrowth + 0.07); // прорастание линий ~15 кадров
+
+    // динамическая вязкость: первые ~400мс после перестроения трение выше (0.90→0.82),
+    // отталкивание ослаблено — гасим «взрыв» из центра, узлы выходят на орбиту мягко
+    frictionNow = FRICTION + boost * (FRICTION_BOOST - FRICTION);
+    chargeNow = CHARGE * (1 - (1 - CHARGE_START_FACTOR) * boost);
+    if (boost > 0) boost = Math.max(0, boost - 1 / BOOST_FRAMES);
+
+    let totalV = 0;
+    if (tween) {
+      stepTween(ts);
+    } else {
+      totalV = stepPhysics();
+      advanceVisual(); // bloom/смена роли вне твина — через целевые scale/opacity
+    }
+
+    advanceLerp();
+    renderAll();
+
+    const lerpSettling = nodes.some((n) => Math.abs(n.x - n.lerpX) + Math.abs(n.y - n.lerpY) > 0.5);
+    if (tween || dragging || panActive || edgeGrowth < 1 || boost > 0 || totalV > SLEEP_V || lerpSettling || visualSettling()) {
+      schedule();
+    } else {
+      freezeGraph(); // система успокоилась — замираем
+    }
+  }
+
+  function schedule() {
+    if (!rafId) rafId = requestAnimationFrame(tick);
+  }
+
+  function wake() {
+    schedule();
+  }
+
+  // --- Жесты (pan / tap / longpress) -----------------------------------------
+  let pointerId = null;
+  let downX = 0;
+  let downY = 0;
+  let camStartX = 0;
+  let camStartY = 0;
+  let moved = false;
+  let downNodeEl = null;
+  let longTimer = 0;
+  let longFired = false;
+
+  function nodeFromEvent(ev) {
+    const el = ev.target instanceof Element ? ev.target.closest('.fg-node') : null;
+    if (!el) return null;
+    const id = el.dataset.nodeId;
+    return nodes.find((n) => String(n.id) === String(id)) || null;
+  }
+
+  function onPointerDown(ev) {
+    if (pointerId !== null) return;
+    pointerId = ev.pointerId;
+    panVelX = 0; // новое касание мгновенно прерывает инерцию
+    panVelY = 0;
+    try { stage.setPointerCapture(ev.pointerId); } catch { /* pointer уже неактивен — не критично */ }
+    downX = ev.clientX;
+    downY = ev.clientY;
+    camStartX = camX;
+    camStartY = camY;
+    moved = false;
+    longFired = false;
+    downNodeEl = ev.target instanceof Element ? ev.target.closest('.fg-node') : null;
+    const downNode = nodeFromEvent(ev);
+    if (downNode && typeof onNodeLongPress === 'function') {
+      longTimer = window.setTimeout(() => {
+        if (moved) return;
+        longFired = true;
+        const rect = downNode.el.getBoundingClientRect();
+        // координаты для меню берём из экранного rect узла (меню рендерится вне масштабируемого мира)
+        onNodeLongPress(downNode, { x: rect.left + rect.width / 2, y: rect.top, rect });
+      }, LONGPRESS_MS);
+    }
+  }
+
+  function onPointerMove(ev) {
+    if (ev.pointerId !== pointerId) return;
+    const dx = ev.clientX - downX;
+    const dy = ev.clientY - downY;
+    if (!moved && Math.hypot(dx, dy) > PAN_THRESHOLD) {
+      moved = true;
+      if (longTimer) { window.clearTimeout(longTimer); longTimer = 0; }
+      cancelTween();          // жест прерывает анимацию центрирования
+      dragging = true;
+    }
+    if (moved) {
+      const newCamX = camStartX + dx;
+      const newCamY = camStartY + dy;
+      panVelX = newCamX - camX;  // мгновенная скорость свайпа (для инерции после отпускания)
+      panVelY = newCamY - camY;
+      camX = newCamX;
+      camY = newCamY;
+      applyWorldTransform();
+      renderEdges();          // рёбра следуют за камерой синхронно (дёшево)
+      updateReticle();
+    }
+  }
+
+  function onPointerUp(ev) {
+    if (ev.pointerId !== pointerId) return;
+    if (longTimer) { window.clearTimeout(longTimer); longTimer = 0; }
+    try { stage.releasePointerCapture(ev.pointerId); } catch { /* не было захвата — ок */ }
+    const wasMoved = moved;
+    const wasLong = longFired;
+    pointerId = null;
+    dragging = false;
+
+    if (wasMoved || wasLong) {
+      // после pan даём физике чуть устаканиться и уснуть
+      if (wasMoved) wake();
+      return;
+    }
+    // это был тап
+    const tapNode = downNodeEl
+      ? nodes.find((n) => String(n.id) === String(downNodeEl.dataset.nodeId))
+      : null;
+    if (!tapNode) return;
+    if (tapNode.isFocus) {
+      if (typeof onCenterTap === 'function') onCenterTap(tapNode);
+      return;
+    }
+    if (typeof onNodeTap === 'function') {
+      // запоминаем точку, из которой новый фокус влетит в центр; перестройку делает onNodeTap (setModel)
+      pendingFocusOrigin = { id: String(tapNode.id), x: tapNode.x, y: tapNode.y };
+      onNodeTap(tapNode);
+    } else {
+      // нет внешнего обработчика — внутреннее перецентрирование (фолбэк)
+      startRecenterTween(tapNode.id);
+    }
+  }
+
+  function onResize() {
+    viewW = stage.clientWidth || window.innerWidth;
+    viewH = stage.clientHeight || window.innerHeight;
+    centerX = viewW / 2;
+    centerY = viewH / 2;
+    renderEdges();
+  }
+
+  // --- Жизненный цикл узлов (diffing) ----------------------------------------
+  // Ghost-слой = СНИМОК всего старого графа (узлы + линии) на полноэкранном слое.
+  // Клон застывает СТРОГО НА МЕСТЕ (полноэкранный overlay → координаты не сбрасываются),
+  // плавно уменьшается (scale 1→0.7) и растворяется (opacity 0.4→0) за 500мс — красивый
+  // шлейф истории перехода, — после чего полностью удаляется из DOM.
+  function spawnGhost() {
+    if (!world.childElementCount) return;
+    const ghost = document.createElement('div');
+    ghost.className = 'fg-ghost-layer';
+    const edgesClone = edgesSvg.cloneNode(true);   // .fg-edges (inset:0) → линии совпадают по координатам
+    edgesClone.style.opacity = '';                 // снимаем возможный inline-fade, слой задаёт прозрачность сам
+    const worldClone = world.cloneNode(true);      // .fg-world (центр) → узлы на своих местах
+    worldClone.style.transform = world.style.transform || '';
+    ghost.append(edgesClone, worldClone);
+    stage.insertBefore(ghost, edgesSvg);           // позади живых слоёв
+    void ghost.offsetWidth;                        // рефлоу для запуска CSS-перехода
+    ghost.style.transform = 'scale(0.7)';
+    ghost.style.opacity = '0';
+    window.setTimeout(() => ghost.remove(), 800);
+  }
+
+  // Импульс центрального кольца — подтверждение «захвата» нового фокуса.
+  function pulseReticle() {
+    reticle.classList.remove('is-pulse');
+    void reticle.offsetWidth;
+    reticle.classList.add('is-pulse');
+    window.setTimeout(() => reticle.classList.remove('is-pulse'), 620);
+  }
+
+  // Перестроение графа с НЕПРЕРЫВНОСТЬЮ состояний:
+  //  • общий узел (тот же id) — не пересоздаём, плавно перелетает на новое место (роль/орбита);
+  //  • новый узел — «расцветает» (bloom) из позиции нового фокуса (scale 0→1, opacity 0→1);
+  //  • исчезнувший — уходит призраком в глубину и удаляется.
+  function setModel(nextModel) {
+    const { focusId: newFocusId, specs } = computeSpecs(nextModel);
+    const newIds = new Set(specs.map((s) => s.id));
+    const oldById = new Map(nodes.map((n) => [String(n.id), n]));
+
+    // точка рождения новых узлов = текущая позиция нового фокуса (откуда он «исходит»)
+    const focusOld = oldById.get(String(newFocusId));
+    const originX = focusOld ? focusOld.x : (pendingFocusOrigin ? pendingFocusOrigin.x : 0);
+    const originY = focusOld ? focusOld.y : (pendingFocusOrigin ? pendingFocusOrigin.y : 0);
+
+    // снимок всего старого графа → красивый шлейф; затем убираем «ушедшие» узлы из живого мира
+    spawnGhost();
+    nodes.forEach((n) => { if (!newIds.has(String(n.id))) n.el.remove(); });
+
+    focusId = String(newFocusId);
+    edgeGrowth = 0; // линии к новым узлам прорастают из центра
+    boost = 1;      // включаем повышенную вязкость на ~400мс (гасим энергию разлёта)
+
+    const fresh = [];
+    let bloomOrder = 0;
+    nodes = specs.map((spec) => {
+      const old = oldById.get(spec.id);
+      if (old && old.dotOnly === spec.dotOnly) {
+        updateNodeRole(old, spec);           // непрерывность: тот же DOM, новая цель → перелёт пружиной
+        return old;
+      }
+      if (old) old.el.remove();              // сменился тип (точка↔аватар) — заменяем элемент
+      const node = makeNodeState(spec.src, spec.isFocus, spec.index, spec.total, spec.dotOnly);
+      // периферия «выстреливает» из центрального круга (0,0); смещение вдоль угла даёт направление силам
+      const bx = Math.cos(node.angle) * 14;
+      const by = Math.sin(node.angle) * 14;
+      node.x = node.isFocus ? originX : bx;
+      node.y = node.isFocus ? originY : by;
+      node.lerpX = node.x; node.lerpY = node.y;
+      node.scale = 0.01; node.opacity = 0; node.bloom = true;
+      node.bloomScale = spec.isFocus ? FOCUS_SCALE : (spec.dotOnly ? 1 : (Number(spec.src.tier) >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE));
+      if (node.isFocus) {
+        node.targetScale = node.bloomScale; node.targetOpacity = 1; // фокус виден сразу (влетает)
+      } else {
+        // периферия: держим скрытой в центре и «выстреливаем» по очереди (каскад 40мс)
+        node.hidden = true;
+        node.targetScale = 0; node.targetOpacity = 0;
+        node.bloomOrder = bloomOrder++;
+        fresh.push(node);
+      }
+      return node;
+    });
+
+    // новый фокус «влетает» из точки клика (если кликнули по периферийному узлу)
+    if (pendingFocusOrigin && String(pendingFocusOrigin.id) === focusId) {
+      const f = nodes.find((n) => n.isFocus);
+      if (f && !focusOld) { f.x = pendingFocusOrigin.x; f.y = pendingFocusOrigin.y; f.lerpX = f.x; f.lerpY = f.y; }
+    }
+    pendingFocusOrigin = null;
+
+    // каскад: каждый новый узел освобождается из центра через order*40мс → волна
+    fresh.forEach((node) => {
+      window.setTimeout(() => {
+        node.hidden = false;
+        node.targetScale = node.bloomScale;
+        node.targetOpacity = 1;
+        wake();
+      }, node.bloomOrder * 40);
+    });
+
+    camX = 0;
+    camY = 0;
+    applyWorldTransform();
+    renderAll();
+    // линии: плавно проявляем (старые ушли с призраком)
+    edgesSvg.style.opacity = '0';
+    void edgesSvg.offsetWidth;
+    edgesSvg.style.opacity = '1';
+    pulseReticle();
+    wake();
+  }
+
+  stage.addEventListener('pointerdown', onPointerDown);
+  stage.addEventListener('pointermove', onPointerMove);
+  stage.addEventListener('pointerup', onPointerUp);
+  stage.addEventListener('pointercancel', onPointerUp);
+  window.addEventListener('resize', onResize);
+
+  let ro = null;
+  if (typeof ResizeObserver !== 'undefined') {
+    ro = new ResizeObserver(() => onResize());
+    ro.observe(stage);
+  }
+
+  setModel(model);
+
+  return {
+    recenter: (id) => startRecenterTween(id),
+    setModel,
+    setFilter,
+    getFocusNode: () => nodes.find((n) => n.isFocus) || null,
+    destroy() {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = 0;
+      if (longTimer) window.clearTimeout(longTimer);
+      stage.removeEventListener('pointerdown', onPointerDown);
+      stage.removeEventListener('pointermove', onPointerMove);
+      stage.removeEventListener('pointerup', onPointerUp);
+      stage.removeEventListener('pointercancel', onPointerUp);
+      window.removeEventListener('resize', onResize);
+      if (ro) ro.disconnect();
+      edgesSvg.remove();
+      world.remove();
+      reticle.remove();
+    },
+  };
+}
+
+/**
+ * Конвертирует данные формы ТЗ (focusUser + connections[]) в нейтральную модель движка.
+ * Используется на этапе мок-прототипа (Фаза 1).
+ */
+export function buildModelFromTz(tz) {
+  const focus = tz?.focusUser || {};
+  const focusNode = {
+    id: String(focus.id || 'focus'),
+    login: focus.login || focus.id || '',
+    name: focus.name || '',
+    avatar: focus.avatar && focus.avatar !== 'url_to_image' ? focus.avatar : null,
+    relationType: 'self',
+    strength: 1,
+    shining: String(focus.status || '').toLowerCase() === 'shining',
+    tier: 1,
+  };
+  const connections = Array.isArray(tz?.connections) ? tz.connections : [];
+  const peerNodes = connections.map((c) => ({
+    id: String(c.id),
+    login: c.login || c.id || '',
+    name: c.name || '',
+    avatar: c.avatar && c.avatar !== 'url_to_image' ? c.avatar : null,
+    relationType: c.relationType || 'contact',
+    strength: typeof c.connectionStrength === 'number' ? c.connectionStrength : 0.5,
+    shining: String(c.status || '').toLowerCase() === 'shining',
+    tier: c.hasOwnConnections === false ? 1 : (c.tier || 1),
+  }));
+  return { focusId: focusNode.id, nodes: [focusNode, ...peerNodes] };
+}
diff --git a/shine-UI/js/pages/network/lab.js b/shine-UI/js/pages/network/lab.js
new file mode 100644
index 0000000..233184d
--- /dev/null
+++ b/shine-UI/js/pages/network/lab.js
@@ -0,0 +1,86 @@
+// Лабораторный режим карты связей (network-view/lab).
+//
+// Назначение: на мок-данных (без бэкенда) щупать физику force-графа, панорамирование,
+// центрирование и навигацию между пользователями. Используется связанный мульти-граф
+// networkGraphUsers: у каждого пользователя свой набор связей, тап по узлу переключает
+// карту на сеть этого человека (как реальный путь, но локально).
+
+import { renderHeader } from '../../components/header.js';
+import { networkGraphUsers } from '../../mock-data.js';
+import { createForceGraph, buildModelFromTz } from './force-graph.js';
+import { openNodeMenu } from './node-menu.js';
+
+const START_LOGIN = 'ivan';
+
+function helpText() {
+  return [
+    'Лаборатория карты связей (мок-данные, без сервера).',
+    '• Тащите по экрану — карта свободно перемещается (pan).',
+    '• Тап по узлу — он стягивается в центр и карта перестраивается под его сеть.',
+    '• Тап по центральному узлу — здесь открылся бы профиль.',
+    '• Долгое нажатие — контекстное меню (в реальном пути «Связи»).',
+    '',
+    'Доступные люди: Иван, Алиса, Павел, Елена, Дмитрий, Олег, Нина, Марина, Света, Кирилл.',
+  ].join('\n');
+}
+
+// Граф пользователя по логину; если такого нет в датасете — одинокий узел (без связей).
+function graphForLogin(login) {
+  const key = String(login || '').trim().toLowerCase();
+  if (networkGraphUsers[key]) return networkGraphUsers[key];
+  return { focusUser: { id: key, login: key, name: key, avatar: null, status: '' }, connections: [] };
+}
+
+export function renderNetworkLab({ navigate }) {
+  const screen = document.createElement('section');
+  screen.className = 'network-screen';
+
+  const appScreenEl = document.getElementById('app-screen');
+  appScreenEl?.classList.add('network-scroll-lock');
+
+  const stage = document.createElement('div');
+  stage.className = 'network-stage fg-stage';
+
+  const header = renderHeader({
+    title: 'Связи · лаборатория',
+    leftAction: {
+      label: '←',
+      onClick: () => navigate('network-view'),
+    },
+    rightActions: [
+      { label: '?', onClick: () => window.alert(helpText()) },
+    ],
+  });
+  header.classList.add('network-header-overlay');
+
+  const model = buildModelFromTz(graphForLogin(START_LOGIN));
+
+  stage.append(header);
+  screen.append(stage);
+
+  // Монтируем движок синхронно (не через rAF): размеры сцены движок берёт с запасом
+  // (window.innerWidth) и корректирует через ResizeObserver, когда сцена попадёт в DOM.
+  const graph = createForceGraph({
+    stage,
+    model,
+    // тап по узлу — переключаем карту на сеть выбранного человека
+    onNodeTap: (node) => { graph.setModel(buildModelFromTz(graphForLogin(node.login))); },
+    onCenterTap: (node) => window.alert(`Профиль: ${node.name || node.login || node.id}`),
+    onNodeLongPress: (node, point) => openNodeMenu({
+      login: node.name || node.login || node.id,
+      relationType: node.relationType,
+      point,
+      actions: [
+        { label: 'Профиль', onClick: () => window.alert(`Профиль: ${node.name || node.login}`) },
+        { label: 'Написать', onClick: () => window.alert(`Написать: ${node.name || node.login}`) },
+      ],
+    }),
+  });
+
+  screen.cleanup = () => {
+    graph.destroy();
+    appScreenEl?.classList.remove('network-scroll-lock');
+  };
+
+  return screen;
+}
diff --git a/shine-UI/js/pages/network/node-menu.js b/shine-UI/js/pages/network/node-menu.js
new file mode 100644
index 0000000..ed38d6c
--- /dev/null
+++ b/shine-UI/js/pages/network/node-menu.js
@@ -0,0 +1,84 @@
+// Общее контекстное меню узла (долгое нажатие) для карты связей.
+// Рендерится в #modal-root (вне масштабируемого холста), позиционируется по экранному rect узла.
+// Используется и реальным путём (network-view.js), и лабораторией (lab.js).
+
+const REL_RU = {
+  family: 'Семья',
+  friend: 'Друг',
+  business: 'Бизнес',
+  contact: 'Контакт',
+  self: 'Вы',
+};
+
+function escapeHtml(text) {
+  return String(text || '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export function relationLabelRu(relationType) {
+  return REL_RU[relationType] || 'Контакт';
+}
+
+/**
+ * Открывает контекстное меню узла.
+ * @param {Object} opts
+ * @param {string} opts.login - логин/идентификатор для заголовка
+ * @param {string} opts.relationType - тип связи (для подписи)
+ * @param {{x:number,y:number,rect?:DOMRect}} opts.point - экранная точка/rect узла
+ * @param {Array<{label:string, onClick:Function, disabled?:boolean}>} opts.actions - пункты меню
+ */
+export function openNodeMenu({ login, relationType, point, actions = [] } = {}) {
+  const root = document.getElementById('modal-root');
+  if (!(root instanceof HTMLElement)) return;
+
+  const itemsHtml = actions
+    .map((a, i) => `<button class="fg-menu-item${a.disabled ? ' is-stub' : ''}" type="button" data-i="${i}" role="menuitem"${a.disabled ? ' disabled' : ''}>${escapeHtml(a.label)}</button>`)
+    .join('');
+
+  root.innerHTML = `
+    <div class="fg-menu-overlay" id="fg-menu-overlay">
+      <div class="fg-menu" id="fg-menu" role="menu">
+        <div class="fg-menu-head">
+          <span class="fg-menu-login">${escapeHtml(login)}</span>
+          <span class="fg-menu-rel">${escapeHtml(relationLabelRu(relationType))}</span>
+        </div>
+        ${itemsHtml}
+      </div>
+    </div>
+  `;
+
+  const overlay = root.querySelector('#fg-menu-overlay');
+  const menu = root.querySelector('#fg-menu');
+  if (!(overlay instanceof HTMLElement) || !(menu instanceof HTMLElement)) { root.innerHTML = ''; return; }
+
+  // позиционируем рядом с узлом по его экранному rect (синхронно, без rAF — он может троттлиться)
+  const rect = point?.rect;
+  const px = point?.x ?? (rect ? rect.left + rect.width / 2 : window.innerWidth / 2);
+  const belowY = rect ? rect.bottom + 8 : (point?.y ?? 80);
+  const mw = menu.offsetWidth;
+  const mh = menu.offsetHeight;
+  let left = px - mw / 2;
+  left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
+  let top = belowY;
+  if (top + mh > window.innerHeight - 8) top = Math.max(8, (rect ? rect.top : belowY) - mh - 8);
+  menu.style.left = `${left}px`;
+  menu.style.top = `${top}px`;
+
+  const close = () => { root.innerHTML = ''; };
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+  menu.addEventListener('click', (e) => {
+    const btn = e.target instanceof HTMLElement ? e.target.closest('[data-i]') : null;
+    if (!(btn instanceof HTMLElement)) return;
+    const idx = Number(btn.dataset.i);
+    const action = actions[idx];
+    if (!action || action.disabled) return;
+    close();
+    if (typeof action.onClick === 'function') action.onClick();
+  });
+
+  return close;
+}
diff --git a/shine-UI/styles/network-graph.css b/shine-UI/styles/network-graph.css
new file mode 100644
index 0000000..a8957cd
--- /dev/null
+++ b/shine-UI/styles/network-graph.css
@@ -0,0 +1,426 @@
+/* ============================================================================
+   Force-directed карта связей (.fg-*) — интерактивный граф на странице «Связи».
+   Узлы позиционируются трансформами (GPU), рёбра — отдельный SVG-слой.
+   Отдельный модуль, чтобы не раздувать components.css.
+   ========================================================================== */
+
+.fg-stage {
+  touch-action: none;            /* перехватываем жесты сами (pan), без скролла страницы */
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+  background: radial-gradient(circle at 50% 42%, rgba(83, 216, 251, 0.07), rgba(255, 255, 255, 0.01) 60%);
+}
+
+.fg-stage:active {
+  cursor: grabbing;
+}
+
+.fg-world {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  will-change: transform;
+  z-index: 1;            /* узлы и подписи строго над линиями связей */
+}
+
+.fg-edges {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 0;            /* линии связей — под узлами */
+  transition: opacity 420ms ease;  /* плавное появление линий при перестройке */
+}
+
+.fg-node {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 52px;
+  height: 52px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transform-origin: center center;
+  will-change: transform;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none; /* iOS: не показывать системное меню по долгому тапу */
+  z-index: 1;
+}
+
+/* круглая аватарка узла (переиспользуем существующий .node-dot из renderUserAvatar) */
+.fg-node .node-dot {
+  width: 52px;
+  height: 52px;
+  margin: 0;
+  font-size: 16px;
+  transition: box-shadow 160ms ease, border-color 160ms ease;
+}
+
+.fg-node.is-family .node-dot {
+  background: linear-gradient(165deg, #785038, #5f3e2c);
+  border-color: rgba(255, 194, 143, 0.6);
+}
+
+.fg-node.is-friend .node-dot {
+  background: linear-gradient(165deg, #2f4f80, #2a3f62);
+  border-color: rgba(150, 190, 255, 0.5);
+}
+
+.fg-node.is-business .node-dot {
+  background: linear-gradient(165deg, #4a3b7a, #2f2750);
+  border-color: rgba(196, 165, 255, 0.55);
+}
+
+.fg-node.is-contact .node-dot {
+  background: linear-gradient(165deg, #36435c, #283142);
+  border-color: rgba(180, 200, 226, 0.4);
+}
+
+.fg-node.is-focus .node-dot {
+  background: linear-gradient(130deg, #3a5f8e, #3dc4df);
+  color: #061119;
+  border-color: rgba(180, 230, 255, 0.85);
+  box-shadow: 0 0 0 2px rgba(143, 231, 255, 0.45), 0 10px 22px rgba(4, 8, 15, 0.45);
+}
+
+.fg-node:focus-visible .node-dot,
+.fg-node:hover .node-dot {
+  border-color: rgba(166, 218, 255, 0.95);
+  box-shadow: 0 0 0 3px rgba(77, 160, 255, 0.22), 0 8px 16px rgba(4, 8, 15, 0.35);
+}
+
+/* пульсирующее свечение «сияющих» узлов */
+.fg-node.is-shine .node-dot::before {
+  content: '';
+  position: absolute;
+  inset: -12px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(130, 235, 255, 0.6) 0%, rgba(130, 235, 255, 0.26) 44%, rgba(130, 235, 255, 0) 76%);
+  filter: blur(2px);
+  z-index: -1;
+  animation: fg-shine-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes fg-shine-pulse {
+  0%, 100% { transform: scale(0.92); opacity: 0.5; }
+  50% { transform: scale(1.16); opacity: 0.95; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fg-node.is-shine .node-dot::before { animation: none; }
+}
+
+/* мягкое свечение вокруг фокуса (статичное; «дышит» вместе с размером узла ниже) */
+.fg-node.is-focus .node-dot::after {
+  content: '';
+  position: absolute;
+  inset: -12px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(130, 235, 255, 0.32) 0%, rgba(130, 235, 255, 0) 70%);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* «Дыхание» фокуса — бесконечная очень мягкая пульсация РАЗМЕРА (база 1.5x → 1.48–1.52x),
+   период 4с. CSS-анимация на transform (GPU) — НЕ будит rAF-цикл физики; интерфейс «живой». */
+.fg-node.is-focus .node-dot {
+  animation: fg-focus-breath 4s ease-in-out infinite;
+}
+
+@keyframes fg-focus-breath {
+  0%, 100% { transform: scale(0.987); }
+  50% { transform: scale(1.013); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fg-node.is-focus .node-dot { animation: none; }
+}
+
+/* подпись под узлом — абсолютная, чтобы не влиять на размер бокса (центрирование по трансформу) */
+.fg-node-label {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 5px;
+  max-width: 110px;
+  font-size: 10px;
+  line-height: 1.1;
+  color: #d6e2ff;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+
+.fg-node.is-secondary .fg-node-label {
+  opacity: 0.75;
+}
+
+/* Имя центрального узла — на подложке, чтобы линии связей не просвечивали сквозь текст */
+.fg-node.is-focus .fg-node-label {
+  margin-top: 7px;
+  padding: 3px 10px;
+  border-radius: 9px;
+  background: rgba(8, 14, 24, 0.74);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  color: #f4f8ff;
+  font-weight: 600;
+  text-shadow: none;
+}
+
+/* Лёгкая точка (узлы сверх хард-лимита DOM) — без аватара/подписи */
+.fg-dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background: #36435c;
+  box-shadow: 0 2px 6px rgba(4, 8, 15, 0.4);
+}
+
+.fg-dot.is-family { background: #6f4a34; border-color: rgba(255, 194, 143, 0.5); }
+.fg-dot.is-friend { background: #2f4f80; border-color: rgba(150, 190, 255, 0.45); }
+.fg-dot.is-business { background: #4a3b7a; border-color: rgba(196, 165, 255, 0.5); }
+.fg-dot.is-contact { background: #36435c; }
+.fg-dot.is-shine { box-shadow: 0 0 9px rgba(130, 235, 255, 0.75); }
+
+/* «Прицел» в центре экрана (зона фокуса) — позади узлов */
+.fg-reticle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 64px;
+  height: 64px;
+  margin: -32px 0 0 -32px;
+  border-radius: 50%;
+  border: 2px dashed rgba(150, 190, 255, 0.3);
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.45;
+  transition: width 200ms ease, height 200ms ease, margin 200ms ease, border-color 200ms ease, opacity 200ms ease;
+}
+
+.fg-reticle.is-locked {
+  width: 94px;
+  height: 94px;
+  margin: -47px 0 0 -47px;
+  border-color: rgba(130, 235, 255, 0.65);
+  opacity: 0.85;
+}
+
+/* «Призрак» старой карты при Z-переходе (эффект погружения) */
+.fg-ghost-layer {
+  position: absolute;
+  inset: 0;                /* полноэкранный overlay → клон линий/узлов совпадает по координатам */
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.5;            /* стартовая прозрачность шлейфа выше → дольше читается (JS уводит в 0) */
+  transform-origin: 50% 50%;
+  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Импульс центрального кольца при захвате нового фокуса */
+.fg-reticle.is-pulse {
+  animation: fg-reticle-pulse 0.6s ease;
+}
+
+@keyframes fg-reticle-pulse {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.22); border-color: rgba(130, 235, 255, 0.9); }
+  100% { transform: scale(1); }
+}
+
+/* Панель фильтров слоёв (оверлей под шапкой) */
+.fg-filter-bar {
+  position: absolute;
+  top: max(54px, calc(env(safe-area-inset-top) + 50px));
+  left: 0;
+  right: 0;
+  z-index: 11;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 12px;
+  pointer-events: none;
+}
+
+.fg-filter-chip {
+  pointer-events: auto;
+  border: 1px solid rgba(166, 196, 245, 0.28);
+  background: rgba(10, 20, 37, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #cfe0ff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 7px 13px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+
+.fg-filter-chip.is-active {
+  background: linear-gradient(130deg, rgba(61, 196, 223, 0.92), rgba(58, 95, 142, 0.92));
+  border-color: rgba(180, 230, 255, 0.85);
+  color: #061119;
+}
+
+/* Контекстное меню узла (долгое нажатие) — в #modal-root, поверх всего, не масштабируется */
+.fg-menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.fg-menu {
+  position: fixed;
+  min-width: 210px;
+  padding: 8px;
+  display: grid;
+  gap: 3px;
+  background: rgba(16, 24, 40, 0.97);
+  border: 1px solid rgba(166, 196, 245, 0.28);
+  border-radius: 14px;
+  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  z-index: 51;
+}
+
+.fg-menu-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 10px;
+  padding: 4px 8px 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 3px;
+}
+
+.fg-menu-login {
+  font-weight: 700;
+  color: #eaf1ff;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fg-menu-rel {
+  font-size: 11px;
+  color: #9fb6e0;
+  flex: 0 0 auto;
+}
+
+.fg-menu-item {
+  text-align: left;
+  background: transparent;
+  border: 0;
+  color: #dfe9ff;
+  font-size: 14px;
+  padding: 9px 10px;
+  border-radius: 9px;
+  cursor: pointer;
+}
+
+.fg-menu-item:hover {
+  background: rgba(77, 160, 255, 0.16);
+}
+
+.fg-menu-item.is-stub {
+  color: #7f8aa3;
+  cursor: default;
+}
+
+.fg-menu-item.is-stub:hover {
+  background: transparent;
+}
+
+/* Нижний сниппет (bottom sheet) */
+.fg-sheet {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: calc(12px + env(safe-area-inset-bottom));
+  z-index: 13;
+  display: none;
+  padding: 12px 14px 14px;
+  background: rgba(16, 24, 40, 0.95);
+  border: 1px solid rgba(166, 196, 245, 0.26);
+  border-radius: 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.fg-sheet.is-open {
+  display: block;
+  animation: fg-sheet-in 200ms ease;
+}
+
+@keyframes fg-sheet-in {
+  from { transform: translateY(16px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.fg-sheet-close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  background: transparent;
+  border: 0;
+  color: #9fb6e0;
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.fg-sheet-title {
+  font-weight: 700;
+  font-size: 15px;
+  color: #eaf1ff;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.fg-sheet-badge {
+  font-size: 10px;
+  background: rgba(130, 235, 255, 0.2);
+  color: #bff0ff;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.fg-sheet-rel {
+  font-size: 12px;
+  color: #9fb6e0;
+  margin-top: 3px;
+}
+
+.fg-sheet-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.fg-sheet-actions > button {
+  flex: 1;
+}
-- 
2.45.2


From 9ee6bf43800d19172ae2d52c6a7d9166f429b760ce2994336abeceba336a9336 Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:17 +0300
Subject: [PATCH 2/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D1=8B=20=D1=81=D0=B2=D1=8F=D0=B7=D0=B5=D0=B9=20(?=
 =?UTF-8?q?=D1=81=D0=B2=D0=B5=D1=87=D0=B5=D0=BD=D0=B8=D0=B5,=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=80=D0=B0=D1=81=D1=82=D0=B0=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B8=D0=B9,=20CSS-=D1=84=D0=B8=D0=BB=D1=8C?=
 =?UTF-8?q?=D1=82=D1=80=D1=8B)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Линии: тонкие дуги Безье (градиент неон-центр → цвет роли); связь к «сияющему»
  монолитно светится статичной тенью drop-shadow (без бегущих импульсов).
- Прорастание новых линий из центра: stroke-dasharray/dashoffset синхронно с
  разлётом узла (кончик трекает аватарку); старые линии исчезают мгновенно.
- Ghost-слой: только аватарки (без линий), 1000мс — нет висящих «ошмётков».
- CSS-bloom разлёта на компоновщике (устойчив к троттлингу rAF; завершение по таймеру).
- Сияющие узлы: мягкая медленная пульсация 3.6с (многослойная box-shadow + SVG-ореол);
  тестовые фото-аватарки.
- Фильтры слоёв в лаборатории + фикс перехвата click сценой (stopPropagation на чипах);
  фейд скрываемых на месте (opacity 0 + scale 0.8, 300мс), фиксация без физики (ноль тряски).
- Бамп client.version → 1.2.137; обновлена документация фичи.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 VERSION.properties                            |   2 +-
 .../features/interactive-network-graph.md     |  50 +-
 shine-UI/js/mock-data.js                      |  13 +-
 shine-UI/js/pages/network-view.js             |   3 +
 shine-UI/js/pages/network/force-graph.js      | 454 +++++++++++++-----
 shine-UI/js/pages/network/lab.js              |  47 +-
 shine-UI/styles/network-graph.css             |  51 +-
 7 files changed, 465 insertions(+), 155 deletions(-)

diff --git a/VERSION.properties b/VERSION.properties
index fe2f1be..e03abab 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.136
+client.version=1.2.137
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
index 91601d6..85e7cb9 100644
--- a/shine-UI/Dev_Docs/features/interactive-network-graph.md
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -25,26 +25,38 @@
 
 ## Ключевые механики
 - **Diffing-переходы (непрерывность состояний):** при смене фокуса общие узлы (тот же `id`) не
-  пересоздаются, а перелетают пружиной на новые места; новые «расцветают» (bloom) каскадом из центра;
+  пересоздаются, а перелетают на новые места; новые «расцветают» (bloom) каскадом из центра;
   исчезнувшие уходят в Ghost-слой.
-- **Ghost-слой:** снимок всего старого графа (узлы + линии) на полноэкранном overlay, застывает
-  на месте, `scale 1→0.7` + `opacity 0.5→0` за **800мс**, затем удаляется (красивый шлейф истории).
-- **Физика:** мягкая радиальная пружина к орбите + взаимное отталкивание (charge) → органичная,
-  слегка неровная орбита; фокус влетает в центр упруго. Координаты узлов на трансформах (GPU).
-- **Каскадный bloom:** новые узлы скрыты в центре и «выстреливают» по очереди (`order × 40мс`).
-- **Динамическая вязкость:** первые ~600мс после перестроения трение завышено (0.92), отталкивание
-  ослаблено (×0.45) → гасит «взрыв», затем плавно к базе (0.82) — мягкое «резиновое» появление.
+- **CSS-bloom (разлёт без тряски):** разлёт/перелёт узлов делают нативные CSS-переходы на
+  `transform` (компоновщик, `cubic-bezier(0.16,1,0.3,1)`, `BLOOM_MS` со ступенчатой задержкой
+  `order × 40мс`), а НЕ JS-физика. Работает даже при троттлинге rAF; цикл лишь ведёт лучи за узлами
+  (`syncPositionsFromDOM`). Завершение — гарантированно по таймеру (`endCssBloom`).
+- **Ghost-слой:** снимок только **аватарок** старого графа (без линий — иначе старые связи висят
+  «ошмётками»). Полноэкранный overlay, застывает на месте, `scale 1→0.7` + `opacity 0.5→0` за
+  **1000мс**, затем удаляется (мягкий породистый шлейф истории).
+- **Прорастание линий (Edge Growth):** новая линия тянется к ФИНАЛЬНОЙ точке узла и раскрывается
+  `stroke-dasharray`(=длина пути) + `stroke-dashoffset`(длина→0), синхронно с разлётом узла
+  (`growP = текущая дистанция / финальная`) → кончик «вытягивается» из центра вслед за аватаркой.
+  Старые линии при этом исчезают мгновенно. Только для новых узлов; переезжающие — линия следует за ними.
+- **Физика (только до-settle):** после CSS-разлёта — лёгкая радиальная пружина + отталкивание для
+  органичного покачивания; после фильтра физика НЕ включается (фиксация на равномерных углах).
 - **Жёсткая заморозка (kill-switch):** когда сумма |vx|+|vy| < 0.03 — скорости обнуляются, координаты
-  округляются до целых пикселей, `cancelAnimationFrame` (sleep). Нет «треска», батарея не страдает.
-- **Линии:** SVG `<path> Q` (квадратичные Безье) — изящные изогнутые нити, тонкие/полупрозрачные;
-  при движении изгиб реагирует на скорость; новые линии прорастают (`stroke-dashoffset`).
+  округляются, `cancelAnimationFrame` (sleep). Нет «треска», батарея не страдает.
+- **Линии:** SVG `<path> Q` (квадратичные Безье) — тонкие изящные дуги (`stroke-width ~1.3–2.2`),
+  градиент неон-центр → цвет роли. Изгиб реагирует на скорость.
+- **Сияющие связи:** линия к «сияющему» узлу — ярче (градиент в неон) и МОНОЛИТНО светится статичной
+  тенью `filter: drop-shadow(...)` (тот же приём, что у ободка аватарки). Без бегущих импульсов.
 - **Жесты:** свайп-pan с инерцией (новое касание прерывает); короткий тап — центрирование + нижний
   сниппет; долгий тап — контекстное меню (в `#modal-root`, позиция по `getBoundingClientRect`); тап
-  по центру — профиль.
-- **Фильтры слоёв:** Все / Семья / Друзья / Сияющие (плавное скрытие/перераспределение).
-- **Поллиш:** «прицел» в центре (+пульс при захвате фокуса), «дыхание» фокуса (бесконечная CSS-анимация
-  размера 1.48–1.52x, GPU, не будит rAF), свечение «сияющих», хард-лимит ~90 DOM-аватарок (остальное —
-  SVG-точки).
+  по центру — профиль. Нажатия на чипы фильтров гасят `pointerdown` (stopPropagation), чтобы сцена не
+  перехватила указатель (`setPointerCapture`) и не «съела» click кнопки.
+- **Фильтры слоёв (Все / Семья / Друзья / Сияющие):** CSS-переходы 300мс — несоответствующие узлы и их
+  линии гаснут НА МЕСТЕ (`opacity 0` + `scale 0.8`), оставшиеся плавно переплывают на равномерные углы,
+  затем жёсткая фиксация без физики (ноль тряски, мгновенный sleep).
+- **Поллиш:** «прицел» в центре (+пульс при захвате фокуса); «дыхание» фокуса (бесконечная CSS-анимация
+  размера, GPU, не будит rAF); свечение «сияющих» узлов — мягкая медленная пульсация (3.6с) многослойной
+  `box-shadow` + размытый ореол через SVG-фильтр `#fg-shine-glow`; тестовые фото-аватарки (`NETWORK_PHOTOS`);
+  хард-лимит ~90 DOM-аватарок (остальное — SVG-точки).
 
 ## Параметры тюнинга (константы в начале `force-graph.js`)
 | Константа | Значение | Назначение |
@@ -53,11 +65,15 @@
 | `K_RADIAL` | 0.035 | жёсткость орбитальной пружины (мягко) |
 | `K_FOCUS` | 0.12 | жёсткость пружины фокуса к центру |
 | `CHARGE` / `CHARGE_START_FACTOR` | 1400 / 0.45 | отталкивание (на старте ослаблено) |
-| `FRICTION` / `FRICTION_BOOST` / `BOOST_FRAMES` | 0.82 / 0.92 / 36 | базовое трение / стартовая вязкость / длительность (~600мс) |
+| `FRICTION` / `FRICTION_BOOST` / `BOOST_FRAMES` | 0.80 / 0.94 / 42 | базовое трение / стартовая вязкость / длительность (~700мс) |
+| `BLOOM_MS` / `BLOOM_STAGGER` | 900 / 40 | длительность CSS-разлёта / задержка между узлами (каскад) |
 | `SLEEP_V` | 0.03 | порог суммарной |v| для заморозки |
 | `FOCUS_SCALE` | 1.5 | базовый масштаб фокуса |
 | `MAX_FULL_NODES` | 90 | хард-лимит полных аватарок (далее — точки) |
 
+Прочее (вшито в код): Ghost-слой — 1000мс; CSS-переход фильтра — 300мс; пульсация сияния — 3.6с;
+прорастание линий привязано к прогрессу разлёта узла (а не к отдельному таймеру).
+
 ## Локальный запуск / проверка
 - Dev-сервер: `.claude/shine-ui-dev-server.cjs` (Node, порт 7321, SPA-fallback + инжект `<base href="/">`).
 - Лаборатория (без бэкенда): `http://localhost:7321/network-view/lab` — мок `networkGraphUsers`,
diff --git a/shine-UI/js/mock-data.js b/shine-UI/js/mock-data.js
index 081e18d..b44879b 100644
--- a/shine-UI/js/mock-data.js
+++ b/shine-UI/js/mock-data.js
@@ -308,7 +308,16 @@ const NETWORK_NAMES = {
   ivan: 'Иван', alisa: 'Алиса', pavel: 'Павел', elena: 'Елена', dmitry: 'Дмитрий',
   oleg: 'Олег', nina: 'Нина', marina: 'Марина', sveta: 'Света', kirill: 'Кирилл',
 };
-const NETWORK_SHINING = new Set(['ivan', 'alisa', 'oleg']);
+const NETWORK_SHINING = new Set(['ivan', 'alisa', 'oleg', 'marina', 'nina']);
+// Тестовые аватарки-фото (реальные лица по сид-номеру pravatar) — только для лаборатории.
+// Если сети нет — узлы мягко падают на инициалы (img.onerror).
+const NETWORK_PHOTOS = {
+  ivan: 'https://i.pravatar.cc/150?img=12', alisa: 'https://i.pravatar.cc/150?img=5',
+  pavel: 'https://i.pravatar.cc/150?img=13', elena: 'https://i.pravatar.cc/150?img=9',
+  dmitry: 'https://i.pravatar.cc/150?img=33', oleg: 'https://i.pravatar.cc/150?img=52',
+  nina: 'https://i.pravatar.cc/150?img=47', marina: 'https://i.pravatar.cc/150?img=44',
+  sveta: 'https://i.pravatar.cc/150?img=24', kirill: 'https://i.pravatar.cc/150?img=60',
+};
 
 function networkConn(login, relationType, connectionStrength) {
   return {
@@ -316,6 +325,7 @@ function networkConn(login, relationType, connectionStrength) {
     login,
     name: NETWORK_NAMES[login] || login,
     avatar: null,
+    photo: NETWORK_PHOTOS[login] || null,
     relationType,
     connectionStrength,
     hasOwnConnections: true,
@@ -330,6 +340,7 @@ function networkPerson(login, connections) {
       login,
       name: NETWORK_NAMES[login] || login,
       avatar: null,
+      photo: NETWORK_PHOTOS[login] || null,
       status: NETWORK_SHINING.has(login) ? 'shining' : '',
     },
     connections,
diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index 778c56d..595f53c 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -563,6 +563,9 @@ export function render({ navigate, route }) {
   // Панель фильтров слоёв (оверлей под шапкой)
   const filterBar = document.createElement('div');
   filterBar.className = 'fg-filter-bar';
+  // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
+  // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
+  filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
   FILTER_ORDER.forEach((key) => {
     const chip = document.createElement('button');
     chip.type = 'button';
diff --git a/shine-UI/js/pages/network/force-graph.js b/shine-UI/js/pages/network/force-graph.js
index ea5ac66..7faddbf 100644
--- a/shine-UI/js/pages/network/force-graph.js
+++ b/shine-UI/js/pages/network/force-graph.js
@@ -14,7 +14,9 @@
 // Движок работает с нейтральной моделью (ниже buildModelFromTz конвертирует форму ТЗ в неё):
 //   model = { focusId, nodes: [{ id, login, name, avatar, relationType, strength, shining, tier }] }
 
-import { renderUserAvatar } from '../../components/avatar-image.js';
+import { renderUserAvatar, buildAvatarInitials } from '../../components/avatar-image.js';
+
+const SVGNS = 'http://www.w3.org/2000/svg';
 
 // --- Параметры физики и анимации ---------------------------------------------
 const ORBIT_MIN = 150;          // минимальный радиус орбиты (защитный отступ от центра), px
@@ -24,14 +26,16 @@ const K_FOCUS = 0.12;           // мягкая пружина фокуса к 
 const CHARGE = 1400;            // базовое отталкивание (на старте перестроения временно ослабляется)
 const CHARGE_START_FACTOR = 0.45; // доля отталкивания в момент «рождения» из центра (без паники)
 const MIN_DIST = 40;            // минимальная дистанция для расчёта отталкивания
-const FRICTION = 0.82;          // базовое затухание скорости (свободное покачивание)
-const FRICTION_BOOST = 0.92;    // максимальная вязкость в первые ~600мс после перестроения (гасит «взрыв»)
-const BOOST_FRAMES = 36;        // длительность затухающего boost'а вязкости (~600мс @60fps)
+const FRICTION = 0.80;          // базовое затухание (после транзита — лёгкое упругое покачивание)
+const FRICTION_BOOST = 0.94;    // «гелевая» вязкость в первые ~700мс после перестроения (гасит «взрыв»)
+const BOOST_FRAMES = 42;        // длительность затухающего boost'а вязкости (~700мс @60fps)
 const SLEEP_V = 0.03;           // порог суммарной |vx|+|vy| для жёсткой заморозки графа
 const INTRO_FACTOR = 0.22;      // стартовый радиус пера (доля от целевого) — узлы «вылетают» из центра
 const EDGE_LERP = 0.25;         // догон концов линии за узлом за кадр (эффект натянутой резинки)
 const PAN_FRICTION = 0.93;      // трение инерционного скролла карты
-const TWEEN_MS = 560;           // длительность анимации центрирования
+const TWEEN_MS = 560;           // длительность анимации центрирования (фильтр/фолбэк)
+const BLOOM_MS = 900;           // длительность разлёта узлов из центра (физика выключена → ноль тряски)
+const BLOOM_STAGGER = 40;       // задержка между «выстреливанием» соседних узлов (волна), мс
 const FOCUS_SCALE = 1.5;        // базовый масштаб фокуса (CSS-дыхание колеблет ±~1.3% → 1.48–1.52x)
 const PRIMARY_SCALE = 1.0;      // масштаб обычного узла 1-го уровня
 const SECONDARY_SCALE = 0.72;   // масштаб узлов 2-го уровня (друзья друзей)
@@ -46,15 +50,59 @@ const RELATION_COLORS = {
   contact: 'rgba(170, 190, 220, 0.7)',
 };
 
+// Неоновый цвет центра — из него «вытекает» градиент каждой связи к цвету периферийного узла.
+const FOCUS_NEON = 'rgba(140, 240, 255, 0.95)';
+
+// Яркий неон сияния — в него уходит градиент связи к «сияющему» узлу (совпадает со свечением аватарки).
+const SHINE_EDGE_NEON = 'rgba(150, 245, 255, 0.95)';
+
 function easeOutCubic(t) {
   const x = 1 - t;
   return 1 - x * x * x;
 }
 
+// Решатель кубической кривой Безье (CSS cubic-bezier): прогресс x → значение y.
+function cubicBezier(x1, y1, x2, y2) {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
+  const sampleY = (t) => ((ay * t + by) * t + cy) * t;
+  const dX = (t) => (3 * ax * t + 2 * bx) * t + cx;
+  return (x) => {
+    let t = x;
+    for (let i = 0; i < 6; i += 1) {
+      const d = dX(t);
+      if (Math.abs(d) < 1e-6) break;
+      t -= (sampleX(t) - x) / d;
+    }
+    return sampleY(Math.max(0, Math.min(1, t)));
+  };
+}
+// Премиальная «вязкая» кривая для разлёта узлов (быстрый старт → очень мягкая посадка).
+const EASE_BLOOM = cubicBezier(0.16, 1, 0.3, 1);
+
 function relationColor(relationType) {
   return RELATION_COLORS[relationType] || RELATION_COLORS.contact;
 }
 
+// Однократно внедряем скрытый SVG-фильтр свечения «сияющих» узлов (мягкое гауссово размытие).
+// Применяется к псевдо-ореолу ::before, а НЕ к самой аватарке — поэтому фото не размывается.
+function ensureShineFilter() {
+  if (typeof document === 'undefined' || document.getElementById('fg-shine-glow')) return;
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('width', '0');
+  svg.setAttribute('height', '0');
+  svg.style.position = 'absolute';
+  svg.innerHTML = '<defs><filter id="fg-shine-glow" x="-120%" y="-120%" width="340%" height="340%" '
+    + 'color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="3.4"/></filter></defs>';
+  document.body.appendChild(svg);
+}
+
 // Равномерный угол по кругу — гарантирует отсутствие угловых наложений при любом N.
 // Небольшой постоянный сдвиг, чтобы первый узел не «прилипал» к горизонтали.
 function spreadAngle(index, total) {
@@ -86,7 +134,7 @@ function hash01(str) {
  */
 export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeLongPress } = {}) {
   // Слои DOM
-  const edgesSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const edgesSvg = document.createElementNS(SVGNS, 'svg');
   edgesSvg.setAttribute('class', 'fg-edges');
   const world = document.createElement('div');
   world.className = 'fg-world';
@@ -95,6 +143,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   const reticle = document.createElement('div');
   reticle.className = 'fg-reticle';
   stage.append(edgesSvg, world, reticle);
+  ensureShineFilter(); // SVG-фильтр свечения «сияющих» (нужен до первой отрисовки узлов)
 
   // Состояние камеры (панорамирование)
   let camX = 0;
@@ -118,14 +167,17 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   // Точка, из которой новый фокус «влетает» в центр (мировые координаты кликнутого узла)
   let pendingFocusOrigin = null;
 
-  // Прогресс «прорастания» линий 0→1 (1 = полностью вычерчены)
-  let edgeGrowth = 1;
-
   // Затухающий «boost» вязкости после перестроения (1→0): гасит энергию «взрыва» из центра.
   let boost = 0;
   let frictionNow = FRICTION;
   let chargeNow = CHARGE;
 
+  // Режим CSS-bloom: узлы разлетаются нативными CSS-переходами (компоновщик, без JS-физики),
+  // цикл только перерисовывает лучи вслед за узлами. Завершается по таймеру.
+  let cssBloom = false;
+  let cssBloomTimer = 0;
+  let cssBloomKind = 'bloom'; // 'bloom' (каскадный разлёт) | 'filter' (фиксация на равномерных углах)
+
   // Инерция панорамирования (kinematic panning)
   let panVelX = 0;
   let panVelY = 0;
@@ -193,11 +245,32 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       opacity: 1,
       targetOpacity: 1,
       bloom: false,
+      edgeGrow: 1, // прогресс «вырастания» линии этого узла 0→1 (для нового узла стартует с 0)
       el,
       dotRadius: isFocus ? 32 : (dotOnly ? 7 : (tier >= 2 ? 18 : 26)),
     };
   }
 
+  // Аватар из прямого URL-фото (тестовые данные лаборатории). Структура — как у renderUserAvatar
+  // (переиспользуем CSS .avatar/.node-dot), фолбэк на инициалы при ошибке загрузки (офлайн).
+  function buildPhotoAvatar(src) {
+    const wrap = document.createElement('div');
+    wrap.className = 'avatar avatar-image node-dot';
+    const fb = document.createElement('span');
+    fb.className = 'avatar-fallback';
+    fb.textContent = buildAvatarInitials({ login: src.login || String(src.id), firstName: src.name || '' });
+    wrap.append(fb);
+    const img = document.createElement('img');
+    img.alt = '';
+    img.loading = 'lazy';
+    img.decoding = 'async';
+    img.onload = () => wrap.classList.add('has-image');
+    img.onerror = () => { img.remove(); }; // нет сети — остаются инициалы
+    img.src = src.photo;
+    wrap.append(img);
+    return wrap;
+  }
+
   function buildNodeElement(src, isFocus, tier, dotOnly = false) {
     const el = document.createElement('button');
     el.type = 'button';
@@ -221,13 +294,16 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     ].filter(Boolean).join(' ');
     el.dataset.nodeId = String(src.id);
 
-    const avatar = renderUserAvatar({
-      login: src.login || src.name || String(src.id),
-      firstName: src.name || '',
-      avatar: src.avatar || null,
-      size: 'node',
-      title: src.name || src.login || '',
-    });
+    // тестовое фото (лаборатория) — прямой URL; иначе штатный аватар (Arweave/инициалы)
+    const avatar = src.photo
+      ? buildPhotoAvatar(src)
+      : renderUserAvatar({
+        login: src.login || src.name || String(src.id),
+        firstName: src.name || '',
+        avatar: src.avatar || null,
+        size: 'node',
+        title: src.name || src.login || '',
+      });
     el.append(avatar);
 
     const label = document.createElement('span');
@@ -295,51 +371,83 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
 
     const focusLogin = String(focus.login || '').toLowerCase();
     const parts = [];
+    const defs = [];
+    let gi = 0;
     for (const n of nodes) {
       if (n === focus) continue;
-      if (n.hidden) continue;
+      // скрытый фильтром узел: рисуем луч пока он гаснет (живая прозрачность > 0), затем пропускаем
+      const nodeOpacity = (typeof n.opacity === 'number') ? n.opacity : 1;
+      if (n.hidden && nodeOpacity <= 0.02) continue;
       if (focusLogin && String(n.login || '').toLowerCase() === focusLogin) continue;
       const nx = tx(n);
       const ny = ty(n);
       if ((nx < -80 && fx < -80) || (nx > viewW + 80 && fx > viewW + 80)) continue;
       if ((ny < -80 && fy < -80) || (ny > viewH + 80 && fy > viewH + 80)) continue;
 
-      const dx = nx - fx;
-      const dy = ny - fy;
+      // Эффект ПРОРАСТАНИЯ: новый узел во время разлёта (bloom) — линию тянем к его ФИНАЛЬНОЙ точке
+      // и раскрываем dashoffset'ом синхронно с разлётом (кончик трекает аватарку). Переезжающие/
+      // общие узлы и покой — линия идёт к ТЕКУЩЕЙ точке (просто следует за узлом, без dash).
+      const growing = cssBloom && cssBloomKind === 'bloom' && !n.isFocus && n.edgeGrow < 1;
+      const ex = growing ? (centerX + camX + n.bfx) : nx;
+      const ey = growing ? (centerY + camY + n.bfy) : ny;
+      const dx = ex - fx;
+      const dy = ey - fy;
       const len = Math.hypot(dx, dy) || 1;
       const ux = dx / len;
       const uy = dy / len;
       const nr = n.dotRadius * n.scale + 4;
-      // концы линии — у краёв кружков (по истинной позиции)
+      // концы линии — у краёв кружков
       const x1 = fx + ux * fr;
       const y1 = fy + uy * fr;
-      const x2 = nx - ux * nr;
-      const y2 = ny - uy * nr;
-      // контрольная точка кривой Безье: постоянный лёгкий изгиб (провисание) перпендикулярно
-      // линии + динамика от запаздывания (при движении узла нить выгибается сильнее)
+      const x2 = ex - ux * nr;
+      const y2 = ey - uy * nr;
+      // контрольная точка кривой Безье: постоянная изящная дуга (перпендикуляр) +
+      // прогиб НАЗАД против вектора скорости узла (резиновый жгут); в покое — идеальная дуга
       const mx = (x1 + x2) / 2;
       const my = (y1 + y2) / 2;
       const segLen0 = Math.hypot(x2 - x1, y2 - y1);
-      // изгиб строго перпендикулярный: заметная постоянная дуга (≈7–22px) +
-      // динамика от скорости узла → при движении нить выгибается, как натянутая резина
+      const baseBow = Math.max(7, Math.min(20, segLen0 * 0.12));   // постоянная дуга
       const speed = Math.hypot(n.vx, n.vy);
-      const bow = Math.max(7, Math.min(22, segLen0 * 0.13)) + Math.min(16, speed * 1.2);
-      const cpx = mx + (-uy) * bow * 2; // CP даёт середину Q-кривой = M + perp*bow
-      const cpy = my + ux * bow * 2;
-      // минимализм: тонкие (1.3–1.8px), полупрозрачные линии — без «энергетических лучей»
-      const w = 1.3 + n.strength * 0.5;
-      // прорастание: длину пути приближаем хордой, dash-offset → 0
-      let dash = '';
-      if (edgeGrowth < 1) {
-        const segLen = (Math.hypot(cpx - x1, cpy - y1) + Math.hypot(x2 - cpx, y2 - cpy)) || 1;
-        dash = ` stroke-dasharray="${segLen.toFixed(1)}" stroke-dashoffset="${(segLen * (1 - edgeGrowth)).toFixed(1)}"`;
-      }
-      parts.push(
-        `<path d="M${x1.toFixed(1)} ${y1.toFixed(1)} Q${cpx.toFixed(1)} ${cpy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}" `
-        + `fill="none" stroke="${relationColor(n.relationType)}" stroke-opacity="0.42" stroke-width="${w.toFixed(2)}" stroke-linecap="round"${dash} />`
+      const lag = Math.min(30, speed * 1.8);                       // отставание ∝ скорости
+      const invX = speed > 0.01 ? -n.vx / speed : 0;               // направление против движения
+      const invY = speed > 0.01 ? -n.vy / speed : 0;
+      // желаемая середина кривой = M + перпендикулярная дуга + прогиб против скорости
+      const desX = mx + (-uy) * baseBow + invX * lag;
+      const desY = my + ux * baseBow + invY * lag;
+      const cpx = 2 * desX - mx; // CP так, чтобы середина Q-кривой попала в desired
+      const cpy = 2 * desY - my;
+      // ТОНКАЯ изящная дуга: одинарная квадратичная кривая Безье, лёгкий градиентный штрих.
+      // Обычная связь — неон у центра → цвет роли у узла. Связь к «СИЯЮЩЕМУ» — ярче, уходит в
+      // неон сияния и МОНОЛИТНО светится (статичный drop-shadow через класс .fg-edge-shine).
+      const shine = Boolean(n.shining) && !n.hidden;
+      const gid = `fg-grad-${gi}`;
+      gi += 1;
+      const tipColor = shine ? SHINE_EDGE_NEON : relationColor(n.relationType);
+      const baseStop = shine ? 0.85 : 0.5;
+      const tipStop = shine ? 0.7 : 0.14;
+      defs.push(
+        `<linearGradient id="${gid}" gradientUnits="userSpaceOnUse" x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}">`
+        + `<stop offset="0" stop-color="${FOCUS_NEON}" stop-opacity="${baseStop}"/>`
+        + `<stop offset="1" stop-color="${tipColor}" stop-opacity="${tipStop}"/></linearGradient>`
       );
+      const sw = (shine ? 1.7 + n.strength * 0.8 : 1.3 + n.strength * 0.9).toFixed(2); // тонко
+      const d = `M${x1.toFixed(1)} ${y1.toFixed(1)} Q${cpx.toFixed(1)} ${cpy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`;
+      // прозрачность луча = живая прозрачность узла (гаснет вместе с узлом при фильтре/уходе)
+      const op = nodeOpacity < 0.995 ? ` opacity="${nodeOpacity.toFixed(2)}"` : '';
+      // ПРОРАСТАНИЕ из центра: dasharray = длина пути, dashoffset уводим от длины к 0 по мере
+      // разлёта (growP = доля пройденного узлом пути центр→орбита) → линия «вытягивается» из центра.
+      let dashAttr = '';
+      if (growing) {
+        const finalD = Math.hypot(n.bfx, n.bfy) || 1;
+        const curD = Math.hypot(n.x, n.y);
+        const growP = Math.max(0, Math.min(1, curD / finalD));
+        const L = (Math.hypot(cpx - x1, cpy - y1) + Math.hypot(x2 - cpx, y2 - cpy) + Math.hypot(x2 - x1, y2 - y1)) / 2;
+        dashAttr = ` stroke-dasharray="${L.toFixed(1)}" stroke-dashoffset="${(L * (1 - growP)).toFixed(1)}"`;
+      }
+      const cls = shine ? ' class="fg-edge-shine"' : ''; // монолитное неоновое свечение (drop-shadow)
+      parts.push(`<path${cls} d="${d}" fill="none" stroke="url(#${gid})" stroke-width="${sw}" stroke-linecap="round"${op}${dashAttr} />`);
     }
-    edgesSvg.innerHTML = parts.join('');
+    edgesSvg.innerHTML = `<defs>${defs.join('')}</defs>${parts.join('')}`;
   }
 
   function updateReticle() {
@@ -413,18 +521,20 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     }
   }
 
-  // Плавное приближение масштаба/прозрачности к целям (bloom новых, рост/уменьшение при смене роли).
+  // Плавное приближение масштаба/прозрачности к целям + рост линии («прорастание»).
   function advanceVisual() {
     for (const n of nodes) {
       n.scale += (n.targetScale - n.scale) * 0.2;
       n.opacity += (n.targetOpacity - n.opacity) * 0.2;
+      // линия растёт только когда узел уже «выпущен» из центра (не скрыт) — догоняет его как нить
+      if (!n.hidden && n.edgeGrow < 1) n.edgeGrow = Math.min(1, n.edgeGrow + 0.08);
     }
   }
 
-  // Не «успокоились» ли ещё визуальные параметры (для условия заморозки).
+  // Не «успокоились» ли ещё визуальные параметры/рост линий (для условия заморозки).
   function visualSettling() {
     for (const n of nodes) {
-      if (Math.abs(n.scale - n.targetScale) > 0.01 || Math.abs(n.opacity - n.targetOpacity) > 0.01) return true;
+      if (Math.abs(n.scale - n.targetScale) > 0.01 || Math.abs(n.opacity - n.targetOpacity) > 0.01 || n.edgeGrow < 1) return true;
     }
     return false;
   }
@@ -476,28 +586,41 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     wake();
   }
 
+  // Универсальный твин (физика выключена → ноль тряски). Поддерживает длительность, кривую и
+  // поканальную задержку (каскад) + рост линий. Используется для bloom-разлёта, фильтра, центрирования.
   function stepTween(ts) {
     if (!tween.startTs) tween.startTs = ts;
-    const raw = Math.min(1, (ts - tween.startTs) / TWEEN_MS);
-    const t = easeOutCubic(raw);
+    const dur = tween.dur || TWEEN_MS;
+    const ease = tween.ease || easeOutCubic;
+    const elapsed = ts - tween.startTs;
+    let allDone = true;
     for (const n of nodes) {
       const a = tween.from.get(n.id);
       const b = tween.to.get(n.id);
       if (!a || !b) continue;
+      let raw = (elapsed - (a.delay || 0)) / dur;
+      if (raw < 0) raw = 0;        // узел ещё не «выпущен» — держим в стартовой точке
+      if (raw < 1) allDone = false;
+      raw = Math.min(1, raw);
+      const t = ease(raw);
       n.x = a.x + (b.x - a.x) * t;
       n.y = a.y + (b.y - a.y) * t;
       n.scale = a.scale + (b.scale - a.scale) * t;
       const ao = a.opacity ?? 1;
       const bo = b.opacity ?? 1;
       n.opacity = ao + (bo - ao) * t;
+      n.lerpX = n.x; n.lerpY = n.y;
+      if (b.grow) n.edgeGrow = raw; // линия «вытекает» по прогрессу своего узла
     }
-    camX = tween.camFrom.x + (tween.camTo.x - tween.camFrom.x) * t;
-    camY = tween.camFrom.y + (tween.camTo.y - tween.camFrom.y) * t;
+    const camT = ease(Math.min(1, elapsed / dur));
+    camX = tween.camFrom.x + (tween.camTo.x - tween.camFrom.x) * camT;
+    camY = tween.camFrom.y + (tween.camTo.y - tween.camFrom.y) * camT;
     applyWorldTransform();
-    if (raw >= 1) {
+    if (allDone) {
+      const wasBloom = tween.idleBoost;
       tween = null; // твин завершён
-      // синхронизируем цели визуала с текущими, чтобы advanceVisual не «откатил» (важно для фильтра)
-      for (const n of nodes) { n.targetScale = n.scale; n.targetOpacity = n.opacity; }
+      for (const n of nodes) { n.targetScale = n.scale; n.targetOpacity = n.opacity; n.edgeGrow = 1; }
+      if (wasBloom) boost = 1; // в покое — лёгкое «гель»-демпфированное упругое покачивание
     }
   }
 
@@ -509,12 +632,15 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   }
 
   // Фильтр слоёв: pred(node) → показывать ли узел. Фокус всегда виден.
-  // Видимые перераспределяются по орбите, скрытые плавно гаснут (scale↓ + opacity→0).
+  // Перестроение идёт нативными CSS-переходами (компоновщик): работает даже когда rAF-цикл
+  // троттлится в простое (иначе граф «не перестраивался» бы). Скрытые узлы плавно гаснут НА МЕСТЕ
+  // (scale 0.8 + opacity 0 за 300мс), видимые плавно переплывают на равномерные углы орбиты;
+  // лучи скрываемых гаснут вместе с ними (renderEdges читает живую прозрачность из DOM).
+  // По завершении — жёсткая фиксация на этих углах БЕЗ физики (ноль тряски, идеальный sleep).
   function setFilter(predicate) {
     const pred = typeof predicate === 'function' ? predicate : () => true;
-    const from = new Map();
-    const to = new Map();
-    nodes.forEach((n) => from.set(n.id, { x: n.x, y: n.y, scale: n.scale, opacity: n.opacity }));
+    if (cssBloomTimer) { window.clearTimeout(cssBloomTimer); cssBloomTimer = 0; }
+    cancelTween(); // на случай активного JS-твина центрирования — отдаём управление CSS-переходу
 
     const visiblePeers = [];
     nodes.forEach((n) => {
@@ -525,8 +651,19 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       if (!n.hidden) visiblePeers.push(n);
     });
 
+    const FILTER_MS = 300;
+    const tf = (x, y, s) => `translate(calc(${x.toFixed(1)}px - 50%), calc(${y.toFixed(1)}px - 50%)) scale(${s})`;
+    // применяем целевое состояние как CSS-переход; финал кэшируем в bfx/bfy/bfs/bfo для endCssBloom
+    const apply = (n, x, y, s, o) => {
+      n.bfx = x; n.bfy = y; n.bfs = s; n.bfo = o;
+      n.el.style.transition = `transform ${FILTER_MS}ms cubic-bezier(0.22, 1, 0.36, 1), opacity ${FILTER_MS}ms ease`;
+      n.el.style.transform = tf(x, y, s);
+      n.el.style.opacity = String(o);
+      n.el.style.pointerEvents = o <= 0.01 ? 'none' : '';
+    };
+
     const focus = nodes.find((n) => n.isFocus);
-    if (focus) to.set(focus.id, { x: 0, y: 0, scale: FOCUS_SCALE, opacity: 1 });
+    if (focus) apply(focus, 0, 0, FOCUS_SCALE, 1);
 
     visiblePeers.forEach((n, i) => {
       n.targetR = ORBIT_MIN + (1 - n.strength) * (ORBIT_MAX - ORBIT_MIN);
@@ -534,17 +671,20 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       n.tx = Math.cos(n.angle) * n.targetR;
       n.ty = Math.sin(n.angle) * n.targetR;
       const sc = n.tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE;
-      to.set(n.id, { x: n.tx, y: n.ty, scale: sc, opacity: 1 });
+      apply(n, n.tx, n.ty, sc, 1);
     });
 
     nodes.forEach((n) => {
       if (n.isFocus || !n.hidden) return;
-      // скрытые: подтягиваем к центру и гасим
-      to.set(n.id, { x: n.x * 0.35, y: n.y * 0.35, scale: 0.2, opacity: 0 });
+      // скрытые: растворяются ПРЯМО НА МЕСТЕ (scale 0.8 + opacity 0 за 300мс) — мягкий фейд, без «вылетов»
+      apply(n, n.x, n.y, 0.8, 0);
     });
 
-    // фильтр не двигает камеру (в отличие от центрирования)
-    tween = { startTs: 0, from, to, camFrom: { x: camX, y: camY }, camTo: { x: camX, y: camY } };
+    // режим CSS-перехода: цикл лишь ведёт лучи за узлами; по таймеру — фиксация без физики
+    cssBloom = true;
+    cssBloomKind = 'filter';
+    renderEdges();
+    cssBloomTimer = window.setTimeout(endCssBloom, FILTER_MS + 60);
     wake();
   }
 
@@ -568,6 +708,15 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   function tick(ts) {
     rafId = 0;
 
+    // режим CSS-bloom: узлы анимирует компоновщик — мы лишь ведём лучи за ними (без физики)
+    if (cssBloom) {
+      syncPositionsFromDOM();
+      renderEdges();
+      updateReticle();
+      schedule();
+      return;
+    }
+
     // инерция панорамирования (kinematic): камера докатывается с трением
     const panActive = !dragging && (Math.abs(panVelX) > 0.15 || Math.abs(panVelY) > 0.15);
     if (panActive) {
@@ -581,10 +730,8 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       panVelY = 0;
     }
 
-    if (edgeGrowth < 1) edgeGrowth = Math.min(1, edgeGrowth + 0.07); // прорастание линий ~15 кадров
-
-    // динамическая вязкость: первые ~400мс после перестроения трение выше (0.90→0.82),
-    // отталкивание ослаблено — гасим «взрыв» из центра, узлы выходят на орбиту мягко
+    // динамическая вязкость: первые ~700мс после перестроения трение завышено (0.94→0.80),
+    // отталкивание ослаблено — гасим «взрыв» из центра, узлы выходят на орбиту в «геле»
     frictionNow = FRICTION + boost * (FRICTION_BOOST - FRICTION);
     chargeNow = CHARGE * (1 - (1 - CHARGE_START_FACTOR) * boost);
     if (boost > 0) boost = Math.max(0, boost - 1 / BOOST_FRAMES);
@@ -601,7 +748,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     renderAll();
 
     const lerpSettling = nodes.some((n) => Math.abs(n.x - n.lerpX) + Math.abs(n.y - n.lerpY) > 0.5);
-    if (tween || dragging || panActive || edgeGrowth < 1 || boost > 0 || totalV > SLEEP_V || lerpSettling || visualSettling()) {
+    if (tween || dragging || panActive || boost > 0 || totalV > SLEEP_V || lerpSettling || visualSettling()) {
       schedule();
     } else {
       freezeGraph(); // система успокоилась — замираем
@@ -724,24 +871,22 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   }
 
   // --- Жизненный цикл узлов (diffing) ----------------------------------------
-  // Ghost-слой = СНИМОК всего старого графа (узлы + линии) на полноэкранном слое.
-  // Клон застывает СТРОГО НА МЕСТЕ (полноэкранный overlay → координаты не сбрасываются),
-  // плавно уменьшается (scale 1→0.7) и растворяется (opacity 0.4→0) за 500мс — красивый
-  // шлейф истории перехода, — после чего полностью удаляется из DOM.
+  // Ghost-слой = СНИМОК старых АВАТАРОК (без линий!) на полноэкранном слое. Линии в шлейф НЕ
+  // копируем намеренно: старые связи должны исчезать мгновенно вместе с перерисовкой графа, а не
+  // висеть «ошмётками» секунду. Клон застывает на месте и лениво тает (scale 1→0.7 + opacity→0)
+  // за 1000мс — мягкий породистый шлейф истории, — затем удаляется из DOM (строго через 1000мс).
   function spawnGhost() {
     if (!world.childElementCount) return;
     const ghost = document.createElement('div');
     ghost.className = 'fg-ghost-layer';
-    const edgesClone = edgesSvg.cloneNode(true);   // .fg-edges (inset:0) → линии совпадают по координатам
-    edgesClone.style.opacity = '';                 // снимаем возможный inline-fade, слой задаёт прозрачность сам
-    const worldClone = world.cloneNode(true);      // .fg-world (центр) → узлы на своих местах
+    const worldClone = world.cloneNode(true);      // .fg-world (центр) → только узлы на своих местах
     worldClone.style.transform = world.style.transform || '';
-    ghost.append(edgesClone, worldClone);
+    ghost.append(worldClone);
     stage.insertBefore(ghost, edgesSvg);           // позади живых слоёв
     void ghost.offsetWidth;                        // рефлоу для запуска CSS-перехода
     ghost.style.transform = 'scale(0.7)';
     ghost.style.opacity = '0';
-    window.setTimeout(() => ghost.remove(), 800);
+    window.setTimeout(() => ghost.remove(), 1000); // удаление строго через 1000мс
   }
 
   // Импульс центрального кольца — подтверждение «захвата» нового фокуса.
@@ -752,6 +897,48 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     window.setTimeout(() => reticle.classList.remove('is-pulse'), 620);
   }
 
+  // Во время CSS-bloom узлы двигает компоновщик — читаем их фактические позиции из DOM,
+  // чтобы лучи (рисуются в JS) точно следовали за анимируемыми аватарками.
+  function syncPositionsFromDOM() {
+    const sr = stage.getBoundingClientRect();
+    for (const n of nodes) {
+      const dot = n.el.querySelector('.node-dot') || n.el;
+      const r = dot.getBoundingClientRect();
+      n.x = (r.left + r.width / 2) - sr.left - centerX - camX;
+      n.y = (r.top + r.height / 2) - sr.top - centerY - camY;
+      n.lerpX = n.x; n.lerpY = n.y;
+      // живая прозрачность из CSS-перехода — чтобы лучи гасли/проявлялись вместе с аватаркой
+      const o = parseFloat(getComputedStyle(n.el).opacity);
+      if (Number.isFinite(o)) n.opacity = o;
+    }
+  }
+
+  // Завершение CSS-bloom (по таймеру — гарантированно, даже при троттлинге rAF):
+  // снимаем переходы, ставим узлы в финал и включаем лёгкую физику покачивания в покое.
+  function endCssBloom() {
+    cssBloomTimer = 0;
+    if (!cssBloom) return;
+    cssBloom = false;
+    for (const n of nodes) {
+      n.el.style.transition = '';
+      const fo = (typeof n.bfo === 'number') ? n.bfo : 1; // финальная прозрачность (0 — скрыт фильтром)
+      n.x = n.bfx; n.y = n.bfy; n.lerpX = n.x; n.lerpY = n.y;
+      n.scale = n.bfs; n.targetScale = n.bfs; n.opacity = fo; n.targetOpacity = fo;
+      n.vx = 0; n.vy = 0; n.edgeGrow = 1;
+    }
+    if (cssBloomKind === 'filter') {
+      // ФИЛЬТР: узлы уже стоят на равномерных углах (их поставил CSS-переход) — фиксируемся
+      // строго на этих позициях БЕЗ физики: ноль тряски и идеальный мгновенный sleep.
+      if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
+      freezeGraph();
+      return;
+    }
+    boost = 1;          // BLOOM: мягкое «гель»-демпфированное упругое покачивание в покое (0.94→0.80)
+    renderNodes();
+    renderEdges();
+    wake();
+  }
+
   // Перестроение графа с НЕПРЕРЫВНОСТЬЮ состояний:
   //  • общий узел (тот же id) — не пересоздаём, плавно перелетает на новое место (роль/орбита);
   //  • новый узел — «расцветает» (bloom) из позиции нового фокуса (scale 0→1, opacity 0→1);
@@ -761,75 +948,86 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     const newIds = new Set(specs.map((s) => s.id));
     const oldById = new Map(nodes.map((n) => [String(n.id), n]));
 
-    // точка рождения новых узлов = текущая позиция нового фокуса (откуда он «исходит»)
+    // старый узел нового фокуса (если был) — фокус глайдит из его позиции
     const focusOld = oldById.get(String(newFocusId));
-    const originX = focusOld ? focusOld.x : (pendingFocusOrigin ? pendingFocusOrigin.x : 0);
-    const originY = focusOld ? focusOld.y : (pendingFocusOrigin ? pendingFocusOrigin.y : 0);
 
     // снимок всего старого графа → красивый шлейф; затем убираем «ушедшие» узлы из живого мира
     spawnGhost();
     nodes.forEach((n) => { if (!newIds.has(String(n.id))) n.el.remove(); });
 
     focusId = String(newFocusId);
-    edgeGrowth = 0; // линии к новым узлам прорастают из центра
-    boost = 1;      // включаем повышенную вязкость на ~400мс (гасим энергию разлёта)
+    if (cssBloomTimer) { window.clearTimeout(cssBloomTimer); cssBloomTimer = 0; }
+
+    const tf = (x, y, s) => `translate(calc(${x.toFixed(1)}px - 50%), calc(${y.toFixed(1)}px - 50%)) scale(${s})`;
+    let order = 0;
+    let maxDelay = 0;
+    const blooms = [];
 
-    const fresh = [];
-    let bloomOrder = 0;
     nodes = specs.map((spec) => {
-      const old = oldById.get(spec.id);
-      if (old && old.dotOnly === spec.dotOnly) {
-        updateNodeRole(old, spec);           // непрерывность: тот же DOM, новая цель → перелёт пружиной
-        return old;
-      }
-      if (old) old.el.remove();              // сменился тип (точка↔аватар) — заменяем элемент
-      const node = makeNodeState(spec.src, spec.isFocus, spec.index, spec.total, spec.dotOnly);
-      // периферия «выстреливает» из центрального круга (0,0); смещение вдоль угла даёт направление силам
-      const bx = Math.cos(node.angle) * 14;
-      const by = Math.sin(node.angle) * 14;
-      node.x = node.isFocus ? originX : bx;
-      node.y = node.isFocus ? originY : by;
-      node.lerpX = node.x; node.lerpY = node.y;
-      node.scale = 0.01; node.opacity = 0; node.bloom = true;
-      node.bloomScale = spec.isFocus ? FOCUS_SCALE : (spec.dotOnly ? 1 : (Number(spec.src.tier) >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE));
-      if (node.isFocus) {
-        node.targetScale = node.bloomScale; node.targetOpacity = 1; // фокус виден сразу (влетает)
+      const oldNode = oldById.get(spec.id);
+      let node;
+      let isNew;
+      if (oldNode && oldNode.dotOnly === spec.dotOnly) {
+        updateNodeRole(oldNode, spec); // непрерывность: тот же DOM, новая роль/орбита
+        node = oldNode; isNew = false;
       } else {
-        // периферия: держим скрытой в центре и «выстреливаем» по очереди (каскад 40мс)
-        node.hidden = true;
-        node.targetScale = 0; node.targetOpacity = 0;
-        node.bloomOrder = bloomOrder++;
-        fresh.push(node);
+        if (oldNode) oldNode.el.remove(); // сменился тип (точка↔аватар) — заменяем элемент
+        node = makeNodeState(spec.src, spec.isFocus, spec.index, spec.total, spec.dotOnly);
+        isNew = true;
       }
+
+      // финальные координаты разлёта (детерминированная орбита с джиттером — в node.tx/ty)
+      const finalX = node.isFocus ? 0 : node.tx;
+      const finalY = node.isFocus ? 0 : node.ty;
+      const finalScale = node.isFocus ? FOCUS_SCALE : (node.dotOnly ? 1 : (node.tier >= 2 ? SECONDARY_SCALE : PRIMARY_SCALE));
+
+      // стартовая точка разлёта
+      let fx; let fy; let fs; let fo; let delay = 0;
+      if (node.isFocus) {
+        if (focusOld) { fx = focusOld.x; fy = focusOld.y; fs = focusOld.scale; fo = 1; }            // глайд из старой позиции
+        else if (pendingFocusOrigin && String(pendingFocusOrigin.id) === focusId) {
+          fx = pendingFocusOrigin.x; fy = pendingFocusOrigin.y; fs = 0.6; fo = 1;                    // влёт из точки клика
+        } else { fx = 0; fy = 0; fs = 0.3; fo = 0; }                                                // первичная инициализация
+      } else if (isNew) {
+        fx = Math.cos(node.angle) * 12; fy = Math.sin(node.angle) * 12; fs = 0.2; fo = 0;           // из центрального круга
+        order += 1; delay = order * BLOOM_STAGGER;                                                  // каскад (волна)
+      } else {
+        fx = node.x; fy = node.y; fs = node.scale; fo = node.opacity;                               // непрерывность: с текущего места
+      }
+
+      // финал запоминаем для покоя; стартовое состояние держим в n.x/n.y (для первой отрисовки лучей)
+      node.bfx = finalX; node.bfy = finalY; node.bfs = finalScale; node.bfo = 1;
+      node.x = fx; node.y = fy; node.lerpX = fx; node.lerpY = fy;
+      node.scale = finalScale; node.opacity = 1; node.targetScale = finalScale; node.targetOpacity = 1;
+      node.hidden = false;
+      // НОВЫЙ узел (разлетается из центра) — помечаем для эффекта прорастания линии (edgeGrow=0);
+      // переезжающий/общий узел — линия просто следует за ним (edgeGrow=1, без dash-раскрытия).
+      node.edgeGrow = (isNew && !node.isFocus) ? 0 : 1;
+
+      maxDelay = Math.max(maxDelay, delay);
+      blooms.push({ el: node.el, start: tf(fx, fy, fs), final: tf(finalX, finalY, finalScale), fo, delay });
       return node;
     });
-
-    // новый фокус «влетает» из точки клика (если кликнули по периферийному узлу)
-    if (pendingFocusOrigin && String(pendingFocusOrigin.id) === focusId) {
-      const f = nodes.find((n) => n.isFocus);
-      if (f && !focusOld) { f.x = pendingFocusOrigin.x; f.y = pendingFocusOrigin.y; f.lerpX = f.x; f.lerpY = f.y; }
-    }
     pendingFocusOrigin = null;
 
-    // каскад: каждый новый узел освобождается из центра через order*40мс → волна
-    fresh.forEach((node) => {
-      window.setTimeout(() => {
-        node.hidden = false;
-        node.targetScale = node.bloomScale;
-        node.targetOpacity = 1;
-        wake();
-      }, node.bloomOrder * 40);
-    });
+    camX = 0; camY = 0; applyWorldTransform();
 
-    camX = 0;
-    camY = 0;
-    applyWorldTransform();
-    renderAll();
-    // линии: плавно проявляем (старые ушли с призраком)
-    edgesSvg.style.opacity = '0';
-    void edgesSvg.offsetWidth;
-    edgesSvg.style.opacity = '1';
+    // ПАСС 1: стартовое состояние без перехода
+    for (const b of blooms) { b.el.style.transition = 'none'; b.el.style.transform = b.start; b.el.style.opacity = String(b.fo); }
+    void world.offsetWidth; // один форс-рефлоу, чтобы старт «зафиксировался»
+    // ПАСС 2: включаем CSS-переход и ставим финал → компоновщик плавно «по маслу»
+    // (работает даже когда JS-rAF троттлится; премиальная вязкая кривая Apple-уровня)
+    for (const b of blooms) {
+      b.el.style.transition = `transform ${BLOOM_MS}ms cubic-bezier(0.16, 1, 0.3, 1) ${b.delay}ms, opacity 700ms ease ${b.delay}ms`;
+      b.el.style.transform = b.final;
+      b.el.style.opacity = '1';
+    }
+
+    cssBloom = true;            // физика выключена; цикл лишь ведёт лучи за CSS-узлами
+    cssBloomKind = 'bloom';     // после каскада — лёгкое упругое до-покачивание (boost)
+    renderEdges();
     pulseReticle();
+    cssBloomTimer = window.setTimeout(endCssBloom, BLOOM_MS + maxDelay + 80); // завершение гарантировано
     wake();
   }
 
@@ -880,6 +1078,7 @@ export function buildModelFromTz(tz) {
     login: focus.login || focus.id || '',
     name: focus.name || '',
     avatar: focus.avatar && focus.avatar !== 'url_to_image' ? focus.avatar : null,
+    photo: focus.photo || null,
     relationType: 'self',
     strength: 1,
     shining: String(focus.status || '').toLowerCase() === 'shining',
@@ -891,6 +1090,7 @@ export function buildModelFromTz(tz) {
     login: c.login || c.id || '',
     name: c.name || '',
     avatar: c.avatar && c.avatar !== 'url_to_image' ? c.avatar : null,
+    photo: c.photo || null,
     relationType: c.relationType || 'contact',
     strength: typeof c.connectionStrength === 'number' ? c.connectionStrength : 0.5,
     shining: String(c.status || '').toLowerCase() === 'shining',
diff --git a/shine-UI/js/pages/network/lab.js b/shine-UI/js/pages/network/lab.js
index 233184d..dc2a655 100644
--- a/shine-UI/js/pages/network/lab.js
+++ b/shine-UI/js/pages/network/lab.js
@@ -12,6 +12,16 @@ import { openNodeMenu } from './node-menu.js';
 
 const START_LOGIN = 'ivan';
 
+// Фильтры слоёв — те же, что в реальном пути network-view (предикат по периферийным узлам;
+// фокус виден всегда). Позволяют пощупать в лаборатории в т.ч. слой «Сияющие».
+const FILTERS = {
+  all: { label: 'Все', pred: () => true },
+  family: { label: 'Семья', pred: (n) => n.relationType === 'family' },
+  friends: { label: 'Друзья', pred: (n) => n.relationType === 'friend' },
+  shining: { label: 'Сияющие', pred: (n) => Boolean(n.shining) },
+};
+const FILTER_ORDER = ['all', 'family', 'friends', 'shining'];
+
 function helpText() {
   return [
     'Лаборатория карты связей (мок-данные, без сервера).',
@@ -19,6 +29,7 @@ function helpText() {
     '• Тап по узлу — он стягивается в центр и карта перестраивается под его сеть.',
     '• Тап по центральному узлу — здесь открылся бы профиль.',
     '• Долгое нажатие — контекстное меню (в реальном пути «Связи»).',
+    '• Чипы под шапкой — фильтры слоёв: Все / Семья / Друзья / Сияющие.',
     '',
     'Доступные люди: Иван, Алиса, Павел, Елена, Дмитрий, Олег, Нина, Марина, Света, Кирилл.',
   ].join('\n');
@@ -55,6 +66,19 @@ export function renderNetworkLab({ navigate }) {
 
   const model = buildModelFromTz(graphForLogin(START_LOGIN));
 
+  // Состояние активного слоя (как в network-view): фокус всегда виден.
+  let activeFilter = 'all';
+  const filterChips = {};
+  function applyFilter(key) {
+    if (!FILTERS[key]) return;
+    activeFilter = key;
+    FILTER_ORDER.forEach((k) => {
+      const el = filterChips[k];
+      if (el) el.classList.toggle('is-active', k === activeFilter);
+    });
+    graph.setFilter(FILTERS[key].pred);
+  }
+
   stage.append(header);
   screen.append(stage);
 
@@ -64,7 +88,11 @@ export function renderNetworkLab({ navigate }) {
     stage,
     model,
     // тап по узлу — переключаем карту на сеть выбранного человека
-    onNodeTap: (node) => { graph.setModel(buildModelFromTz(graphForLogin(node.login))); },
+    onNodeTap: (node) => {
+      graph.setModel(buildModelFromTz(graphForLogin(node.login)));
+      // сохраняем выбранный слой при переходе на сеть другого человека (как в network-view)
+      if (activeFilter !== 'all') graph.setFilter(FILTERS[activeFilter].pred);
+    },
     onCenterTap: (node) => window.alert(`Профиль: ${node.name || node.login || node.id}`),
     onNodeLongPress: (node, point) => openNodeMenu({
       login: node.name || node.login || node.id,
@@ -77,6 +105,23 @@ export function renderNetworkLab({ navigate }) {
     }),
   });
 
+  // Панель фильтров слоёв — тот же оверлей-стиль (.fg-filter-bar), что и в network-view.
+  const filterBar = document.createElement('div');
+  filterBar.className = 'fg-filter-bar';
+  // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
+  // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
+  filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
+  FILTER_ORDER.forEach((key) => {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = `fg-filter-chip${key === activeFilter ? ' is-active' : ''}`;
+    chip.textContent = FILTERS[key].label;
+    chip.addEventListener('click', () => applyFilter(key));
+    filterChips[key] = chip;
+    filterBar.append(chip);
+  });
+  stage.append(filterBar);
+
   screen.cleanup = () => {
     graph.destroy();
     appScreenEl?.classList.remove('network-scroll-lock');
diff --git a/shine-UI/styles/network-graph.css b/shine-UI/styles/network-graph.css
index a8957cd..c86277b 100644
--- a/shine-UI/styles/network-graph.css
+++ b/shine-UI/styles/network-graph.css
@@ -37,6 +37,12 @@
   transition: opacity 420ms ease;  /* плавное появление линий при перестройке */
 }
 
+/* Связь к «сияющему» узлу — МОНОЛИТНО светится мягким неоном (тот же приём, что у ободка аватарки):
+   статичная двухслойная тень через drop-shadow. Никакой динамики, бегущих точек и пульсаций. */
+.fg-edge-shine {
+  filter: drop-shadow(0 0 3px rgba(140, 235, 255, 0.75)) drop-shadow(0 0 6px rgba(110, 225, 255, 0.4));
+}
+
 .fg-node {
   position: absolute;
   left: 0;
@@ -99,24 +105,52 @@
   box-shadow: 0 0 0 3px rgba(77, 160, 255, 0.22), 0 8px 16px rgba(4, 8, 15, 0.35);
 }
 
-/* пульсирующее свечение «сияющих» узлов */
+/* «Сияние» — мягкое живое свечение НА УЗЛЕ (аватарке), а не на линии связи.
+   Многослойная анимированная box-shadow + размытый радиальный ореол (через внешний SVG-фильтр).
+   Пульсация очень медленная и плавная (3.6с): радиус и прозрачность «дышат» 0.5 ↔ 1.0 —
+   как мягкое свечение живого организма в темноте, а не «жирный маркер». */
+.fg-node.is-shine .node-dot {
+  border-color: rgba(150, 240, 255, 0.62);
+  animation: fg-shine-glow 3.6s ease-in-out infinite;
+}
+
+/* размытый радиальный ореол позади аватарки; внешний SVG-фильтр даёт мягкое гауссово размытие */
 .fg-node.is-shine .node-dot::before {
   content: '';
   position: absolute;
   inset: -12px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(130, 235, 255, 0.6) 0%, rgba(130, 235, 255, 0.26) 44%, rgba(130, 235, 255, 0) 76%);
-  filter: blur(2px);
+  background: radial-gradient(circle, rgba(140, 240, 255, 0.5) 0%, rgba(130, 235, 255, 0.18) 46%, rgba(130, 235, 255, 0) 72%);
+  filter: url(#fg-shine-glow);
   z-index: -1;
-  animation: fg-shine-pulse 2.4s ease-in-out infinite;
+  pointer-events: none;
+  animation: fg-shine-halo 3.6s ease-in-out infinite;
 }
 
-@keyframes fg-shine-pulse {
-  0%, 100% { transform: scale(0.92); opacity: 0.5; }
-  50% { transform: scale(1.16); opacity: 0.95; }
+/* пульсация многослойной тени: компактное приглушённое → широкое мягкое свечение */
+@keyframes fg-shine-glow {
+  0%, 100% {
+    box-shadow:
+      0 0 5px rgba(125, 232, 255, 0.30),
+      0 0 11px rgba(112, 226, 255, 0.18),
+      0 0 20px rgba(100, 220, 255, 0.10);
+  }
+  50% {
+    box-shadow:
+      0 0 9px rgba(150, 245, 255, 0.62),
+      0 0 20px rgba(122, 236, 255, 0.42),
+      0 0 36px rgba(100, 220, 255, 0.26);
+  }
+}
+
+/* ореол дышит размером и прозрачностью синхронно с тенью (мягко, без рывков) */
+@keyframes fg-shine-halo {
+  0%, 100% { transform: scale(0.9); opacity: 0.5; }
+  50% { transform: scale(1.12); opacity: 1; }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .fg-node.is-shine .node-dot { animation: none; }
   .fg-node.is-shine .node-dot::before { animation: none; }
 }
 
@@ -230,7 +264,8 @@
   z-index: 0;
   opacity: 0.5;            /* стартовая прозрачность шлейфа выше → дольше читается (JS уводит в 0) */
   transform-origin: 50% 50%;
-  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
+  /* лениво и породисто тает на месте за 1000мс — медленный дорогой шлейф истории перехода */
+  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 1000ms ease;
 }
 
 /* Импульс центрального кольца при захвате нового фокуса */
-- 
2.45.2


From dc96033cb1a16a49702cb886d832770b3609bb3ec4aba24244cfdd557910210a Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:17 +0300
Subject: [PATCH 3/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D0=B4?=
 =?UTF-8?q?=D0=B2=D1=83=D1=85=D1=81=D0=BB=D0=BE=D0=B9=D0=BD=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B8=D0=B8-=D1=81=D0=B2=D0=B5=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B4=D1=8B,=20=D0=B6=D0=B8=D0=B2=D0=BE=D0=B9=20?=
 =?UTF-8?q?=D1=84=D0=BE=D0=BD=20=D0=B8=20=D1=81=D1=82=D0=B5=D0=BA=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=BD=D0=BD=D1=8B=D0=B5=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82?=
 =?UTF-8?q?=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Сияющие связи — двухслойный неоновый «световод»: размытый glow (4px, blur 2px,
  opacity 0.4) + тонкий чёткий core (1.5px, #e0f7fc). Объёмное OLED-свечение,
  линия остаётся изящной. Оба слоя растут синхронно (общий dashoffset).
- Обычные линии — тоньше (1.0–1.2px) и глубокий уход в прозрачность (0.42 → 0.07),
  чтобы матовые связи не спорили с сияющими.
- Живой фон-«небула»: глубокое размытое сине-голубое облако под центром, медленная
  пульсация радиуса/яркости + переливы индиго↔ультрамарин (hue-rotate, 7с).
- Стеклянные чипы фильтров (frosted glass): rgba(255,255,255,0.03) + backdrop blur(12px)
  + граница 0.5px solid rgba(255,255,255,0.1); активный подсвечен сине-голубым.
- Бамп client.version → 1.2.138; документация фичи обновлена.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 VERSION.properties                            |  2 +-
 .../features/interactive-network-graph.md     | 16 +++--
 shine-UI/js/pages/network/force-graph.js      | 48 +++++++-------
 shine-UI/styles/network-graph.css             | 63 +++++++++++++++----
 4 files changed, 89 insertions(+), 40 deletions(-)

diff --git a/VERSION.properties b/VERSION.properties
index e03abab..c2ecf84 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.137
+client.version=1.2.138
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
index 85e7cb9..686fd10 100644
--- a/shine-UI/Dev_Docs/features/interactive-network-graph.md
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -42,10 +42,13 @@
   органичного покачивания; после фильтра физика НЕ включается (фиксация на равномерных углах).
 - **Жёсткая заморозка (kill-switch):** когда сумма |vx|+|vy| < 0.03 — скорости обнуляются, координаты
   округляются, `cancelAnimationFrame` (sleep). Нет «треска», батарея не страдает.
-- **Линии:** SVG `<path> Q` (квадратичные Безье) — тонкие изящные дуги (`stroke-width ~1.3–2.2`),
-  градиент неон-центр → цвет роли. Изгиб реагирует на скорость.
-- **Сияющие связи:** линия к «сияющему» узлу — ярче (градиент в неон) и МОНОЛИТНО светится статичной
-  тенью `filter: drop-shadow(...)` (тот же приём, что у ободка аватарки). Без бегущих импульсов.
+- **Обычные линии:** SVG `<path> Q` (квадратичные Безье) — тонкие матовые дуги (`stroke-width ~1.0–1.2`),
+  градиент с глубоким уходом в прозрачность: неон-центр `0.42` → цвет роли `0.07` у аватарки (растворяются
+  в фоне, не спорят с сияющими). Изгиб реагирует на скорость.
+- **Сияющие связи (двухслойный «световод», Neon Layering):** два пути на одну связь — широкий размытый
+  GLOW (`stroke-width 4`, неон, `filter: blur(2px)`, `opacity 0.4`) + тонкий чёткий CORE (`1.5px`,
+  `#e0f7fc`). Линия остаётся изящной, но обретает объёмное OLED-свечение; растут оба синхронно (общий
+  dashoffset). Никаких бегущих импульсов.
 - **Жесты:** свайп-pan с инерцией (новое касание прерывает); короткий тап — центрирование + нижний
   сниппет; долгий тап — контекстное меню (в `#modal-root`, позиция по `getBoundingClientRect`); тап
   по центру — профиль. Нажатия на чипы фильтров гасят `pointerdown` (stopPropagation), чтобы сцена не
@@ -53,6 +56,11 @@
 - **Фильтры слоёв (Все / Семья / Друзья / Сияющие):** CSS-переходы 300мс — несоответствующие узлы и их
   линии гаснут НА МЕСТЕ (`opacity 0` + `scale 0.8`), оставшиеся плавно переплывают на равномерные углы,
   затем жёсткая фиксация без физики (ноль тряски, мгновенный sleep).
+- **Живой фон (Nebula):** под центром — глубокое размытое сине-голубое облако (`.fg-stage::before`,
+  `blur 80→96px`), бесконечная анимация 7с: «дышит» радиусом/яркостью и переливается индиго↔ультрамарин
+  (`hue-rotate`). На компоновщике (GPU), не будит rAF; подписи имён остаются контрастными.
+- **Стеклянные чипы фильтров (frosted glass):** `background: rgba(255,255,255,0.03)`,
+  `backdrop-filter: blur(12px)`, граница `0.5px solid rgba(255,255,255,0.1)`; активный — подсвечен сине-голубым.
 - **Поллиш:** «прицел» в центре (+пульс при захвате фокуса); «дыхание» фокуса (бесконечная CSS-анимация
   размера, GPU, не будит rAF); свечение «сияющих» узлов — мягкая медленная пульсация (3.6с) многослойной
   `box-shadow` + размытый ореол через SVG-фильтр `#fg-shine-glow`; тестовые фото-аватарки (`NETWORK_PHOTOS`);
diff --git a/shine-UI/js/pages/network/force-graph.js b/shine-UI/js/pages/network/force-graph.js
index 7faddbf..3adf2d5 100644
--- a/shine-UI/js/pages/network/force-graph.js
+++ b/shine-UI/js/pages/network/force-graph.js
@@ -53,8 +53,6 @@ const RELATION_COLORS = {
 // Неоновый цвет центра — из него «вытекает» градиент каждой связи к цвету периферийного узла.
 const FOCUS_NEON = 'rgba(140, 240, 255, 0.95)';
 
-// Яркий неон сияния — в него уходит градиент связи к «сияющему» узлу (совпадает со свечением аватарки).
-const SHINE_EDGE_NEON = 'rgba(150, 245, 255, 0.95)';
 
 function easeOutCubic(t) {
   const x = 1 - t;
@@ -416,26 +414,14 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       const desY = my + ux * baseBow + invY * lag;
       const cpx = 2 * desX - mx; // CP так, чтобы середина Q-кривой попала в desired
       const cpy = 2 * desY - my;
-      // ТОНКАЯ изящная дуга: одинарная квадратичная кривая Безье, лёгкий градиентный штрих.
-      // Обычная связь — неон у центра → цвет роли у узла. Связь к «СИЯЮЩЕМУ» — ярче, уходит в
-      // неон сияния и МОНОЛИТНО светится (статичный drop-shadow через класс .fg-edge-shine).
+      // Связь рисуем по статусу узла:
+      //  • обычная — одна тонкая (1.0–1.2px) матовая дуга, градиент с ГЛУБОКИМ уходом в прозрачность;
+      //  • СИЯЮЩАЯ — двухслойный неоновый «световод»: широкий размытый glow (под) + тонкий чёткий
+      //    core 1.5px (над) → изящно, но с объёмным OLED-свечением (см. .fg-edge-glow / .fg-edge-core).
       const shine = Boolean(n.shining) && !n.hidden;
-      const gid = `fg-grad-${gi}`;
-      gi += 1;
-      const tipColor = shine ? SHINE_EDGE_NEON : relationColor(n.relationType);
-      const baseStop = shine ? 0.85 : 0.5;
-      const tipStop = shine ? 0.7 : 0.14;
-      defs.push(
-        `<linearGradient id="${gid}" gradientUnits="userSpaceOnUse" x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}">`
-        + `<stop offset="0" stop-color="${FOCUS_NEON}" stop-opacity="${baseStop}"/>`
-        + `<stop offset="1" stop-color="${tipColor}" stop-opacity="${tipStop}"/></linearGradient>`
-      );
-      const sw = (shine ? 1.7 + n.strength * 0.8 : 1.3 + n.strength * 0.9).toFixed(2); // тонко
       const d = `M${x1.toFixed(1)} ${y1.toFixed(1)} Q${cpx.toFixed(1)} ${cpy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`;
-      // прозрачность луча = живая прозрачность узла (гаснет вместе с узлом при фильтре/уходе)
-      const op = nodeOpacity < 0.995 ? ` opacity="${nodeOpacity.toFixed(2)}"` : '';
-      // ПРОРАСТАНИЕ из центра: dasharray = длина пути, dashoffset уводим от длины к 0 по мере
-      // разлёта (growP = доля пройденного узлом пути центр→орбита) → линия «вытягивается» из центра.
+      // ПРОРАСТАНИЕ из центра: dasharray = длина пути, dashoffset от длины к 0 по мере разлёта узла
+      // (growP = доля пройденного узлом пути центр→орбита) → линия «вытягивается» из центра.
       let dashAttr = '';
       if (growing) {
         const finalD = Math.hypot(n.bfx, n.bfy) || 1;
@@ -444,8 +430,26 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
         const L = (Math.hypot(cpx - x1, cpy - y1) + Math.hypot(x2 - cpx, y2 - cpy) + Math.hypot(x2 - x1, y2 - y1)) / 2;
         dashAttr = ` stroke-dasharray="${L.toFixed(1)}" stroke-dashoffset="${(L * (1 - growP)).toFixed(1)}"`;
       }
-      const cls = shine ? ' class="fg-edge-shine"' : ''; // монолитное неоновое свечение (drop-shadow)
-      parts.push(`<path${cls} d="${d}" fill="none" stroke="url(#${gid})" stroke-width="${sw}" stroke-linecap="round"${op}${dashAttr} />`);
+      if (shine) {
+        // glow (размытый, приглушённый) + core (тонкий, чёткий) — растут синхронно (общий dashAttr)
+        const gOp = (0.4 * nodeOpacity).toFixed(2);
+        const cOpAttr = nodeOpacity < 0.995 ? ` opacity="${nodeOpacity.toFixed(2)}"` : '';
+        parts.push(`<path class="fg-edge-glow" d="${d}"${dashAttr} opacity="${gOp}" />`);
+        parts.push(`<path class="fg-edge-core" d="${d}"${dashAttr}${cOpAttr} />`);
+      } else {
+        // обычная: тонкая дуга, градиент 0.42 (центр) → 0.07 (аватарка) — глубокий уход в прозрачность,
+        // чтобы матовые связи не спорили с сияющими.
+        const gid = `fg-grad-${gi}`;
+        gi += 1;
+        defs.push(
+          `<linearGradient id="${gid}" gradientUnits="userSpaceOnUse" x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}">`
+          + `<stop offset="0" stop-color="${FOCUS_NEON}" stop-opacity="0.42"/>`
+          + `<stop offset="1" stop-color="${relationColor(n.relationType)}" stop-opacity="0.07"/></linearGradient>`
+        );
+        const sw = (1.0 + n.strength * 0.2).toFixed(2); // 1.0–1.2px
+        const op = nodeOpacity < 0.995 ? ` opacity="${nodeOpacity.toFixed(2)}"` : '';
+        parts.push(`<path d="${d}" fill="none" stroke="url(#${gid})" stroke-width="${sw}" stroke-linecap="round"${op}${dashAttr} />`);
+      }
     }
     edgesSvg.innerHTML = `<defs>${defs.join('')}</defs>${parts.join('')}`;
   }
diff --git a/shine-UI/styles/network-graph.css b/shine-UI/styles/network-graph.css
index c86277b..eaa552f 100644
--- a/shine-UI/styles/network-graph.css
+++ b/shine-UI/styles/network-graph.css
@@ -16,6 +16,29 @@
   cursor: grabbing;
 }
 
+/* Живой фон-«небула»: глубокое размытое сине-голубое облако света строго под центральным узлом.
+   Медленно «дышит» (радиус/яркость) и переливается индиго↔ультрамарин (hue-rotate) за 7с.
+   Чистый CSS на компоновщике — создаёт ощущение живой светящейся среды, не будит rAF-цикл. */
+.fg-stage::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle 320px at 50% 47%, rgba(80, 150, 255, 0.30) 0%, rgba(60, 100, 220, 0.15) 42%, rgba(40, 70, 170, 0) 72%);
+  filter: blur(80px);
+  pointer-events: none;
+  z-index: 0;                /* строго под линиями (z:0, но раньше по порядку) и узлами (z:1) */
+  animation: fg-nebula 7s ease-in-out infinite;
+}
+
+@keyframes fg-nebula {
+  0%, 100% { opacity: 0.70; filter: blur(80px) hue-rotate(-12deg); }
+  50%      { opacity: 1.00; filter: blur(96px) hue-rotate(16deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fg-stage::before { animation: none; }
+}
+
 .fg-world {
   position: absolute;
   left: 50%;
@@ -37,10 +60,20 @@
   transition: opacity 420ms ease;  /* плавное появление линий при перестройке */
 }
 
-/* Связь к «сияющему» узлу — МОНОЛИТНО светится мягким неоном (тот же приём, что у ободка аватарки):
-   статичная двухслойная тень через drop-shadow. Никакой динамики, бегущих точек и пульсаций. */
-.fg-edge-shine {
-  filter: drop-shadow(0 0 3px rgba(140, 235, 255, 0.75)) drop-shadow(0 0 6px rgba(110, 225, 255, 0.4));
+/* Сияющая связь = двухслойный неоновый «световод» (Neon Layering): изящно, но объёмно (как OLED).
+   GLOW — широкий размытый ореол неонового оттенка под линией; CORE — тонкий чёткий светлый контур. */
+.fg-edge-glow {
+  fill: none;
+  stroke: rgba(110, 225, 255, 1);
+  stroke-width: 4;
+  stroke-linecap: round;
+  filter: blur(2px);          /* мягкое объёмное свечение вокруг нити */
+}
+.fg-edge-core {
+  fill: none;
+  stroke: #e0f7fc;            /* ультра-светлый голубой — чёткий контур луча */
+  stroke-width: 1.5;
+  stroke-linecap: round;
 }
 
 .fg-node {
@@ -294,26 +327,30 @@
   pointer-events: none;
 }
 
+/* Стеклянные табы — тонкие пластины матового стекла (frosted glass) */
 .fg-filter-chip {
   pointer-events: auto;
-  border: 1px solid rgba(166, 196, 245, 0.28);
-  background: rgba(10, 20, 37, 0.6);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  border: 0.5px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: #cfe0ff;
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
-  padding: 7px 13px;
+  padding: 7px 14px;
   border-radius: 999px;
   cursor: pointer;
-  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08); /* лёгкий стеклянный блик сверху */
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
 
+/* Активный таб — то же стекло, но подсвеченное сине-голубым (в тон неону графа) */
 .fg-filter-chip.is-active {
-  background: linear-gradient(130deg, rgba(61, 196, 223, 0.92), rgba(58, 95, 142, 0.92));
-  border-color: rgba(180, 230, 255, 0.85);
-  color: #061119;
+  background: rgba(125, 215, 255, 0.16);
+  border-color: rgba(160, 230, 255, 0.55);
+  color: #eaf7ff;
+  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0 14px rgba(110, 210, 255, 0.28);
 }
 
 /* Контекстное меню узла (долгое нажатие) — в #modal-root, поверх всего, не масштабируется */
-- 
2.45.2


From e6e96c4b0dbdcd48ae681c479bb505727b2fce1ad12be4e2b1abe034ba21b9ae Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:18 +0300
Subject: [PATCH 4/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D1=87?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=BA=D0=B0=20=D0=BC=D1=91=D1=80=D1=82=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BA=D0=BE=D0=B4=D0=B0=20=D0=B2=20=D0=B4?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B6=D0=BA=D0=B5=20(lerp,=20=D0=BD=D0=B5=D0=B8?=
 =?UTF-8?q?=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D1=83=D0=B5=D0=BC=D1=8B?=
 =?UTF-8?q?=D0=B5=20easing)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Убран механизм lerpX/lerpY: координаты для отрисовки берутся из n.x/n.y, lerp нигде
  не читался кроме условия заморозки (lerpSettling). Удалены поля, advanceLerp(), EDGE_LERP
  и lerpSettling — граф засыпает чуть раньше (без визуальных изменений; проверено: frozen=true).
- Удалены неиспользуемые cubicBezier() и EASE_BLOOM (easing теперь делает CSS); easeOutCubic
  оставлен (нужен в stepTween для фолбэк-центрирования).
- Документация фичи актуализирована (убрана заметка про lerp как кандидата на чистку).
- Бамп client.version → 1.2.139.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 VERSION.properties                            |  2 +-
 .../features/interactive-network-graph.md     |  1 -
 shine-UI/js/pages/network/force-graph.js      | 49 ++-----------------
 3 files changed, 5 insertions(+), 47 deletions(-)

diff --git a/VERSION.properties b/VERSION.properties
index c2ecf84..30b0b99 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.138
+client.version=1.2.139
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
index 686fd10..972a472 100644
--- a/shine-UI/Dev_Docs/features/interactive-network-graph.md
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -91,6 +91,5 @@
 ## Ограничения / на будущее
 - Многоуровневая глубина (друзья друзей мельче, 3-й уровень — точки), кластеры, «общие связи»
   упираются в API (отдаёт только прямые связи) — требуют доработки сервера.
-- `lerpX/lerpY` в движке больше не используются для отрисовки — кандидат на чистку.
 - Превью в простое троттлит `requestAnimationFrame` (физика не идёт между вызовами) — для замеров
   прокачивать кадры; в активном табе всё работает на 60 FPS.
diff --git a/shine-UI/js/pages/network/force-graph.js b/shine-UI/js/pages/network/force-graph.js
index 3adf2d5..7d3dc05 100644
--- a/shine-UI/js/pages/network/force-graph.js
+++ b/shine-UI/js/pages/network/force-graph.js
@@ -31,7 +31,6 @@ const FRICTION_BOOST = 0.94;    // «гелевая» вязкость в пер
 const BOOST_FRAMES = 42;        // длительность затухающего boost'а вязкости (~700мс @60fps)
 const SLEEP_V = 0.03;           // порог суммарной |vx|+|vy| для жёсткой заморозки графа
 const INTRO_FACTOR = 0.22;      // стартовый радиус пера (доля от целевого) — узлы «вылетают» из центра
-const EDGE_LERP = 0.25;         // догон концов линии за узлом за кадр (эффект натянутой резинки)
 const PAN_FRICTION = 0.93;      // трение инерционного скролла карты
 const TWEEN_MS = 560;           // длительность анимации центрирования (фильтр/фолбэк)
 const BLOOM_MS = 900;           // длительность разлёта узлов из центра (физика выключена → ноль тряски)
@@ -59,30 +58,6 @@ function easeOutCubic(t) {
   return 1 - x * x * x;
 }
 
-// Решатель кубической кривой Безье (CSS cubic-bezier): прогресс x → значение y.
-function cubicBezier(x1, y1, x2, y2) {
-  const cx = 3 * x1;
-  const bx = 3 * (x2 - x1) - cx;
-  const ax = 1 - cx - bx;
-  const cy = 3 * y1;
-  const by = 3 * (y2 - y1) - cy;
-  const ay = 1 - cy - by;
-  const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
-  const sampleY = (t) => ((ay * t + by) * t + cy) * t;
-  const dX = (t) => (3 * ax * t + 2 * bx) * t + cx;
-  return (x) => {
-    let t = x;
-    for (let i = 0; i < 6; i += 1) {
-      const d = dX(t);
-      if (Math.abs(d) < 1e-6) break;
-      t -= (sampleX(t) - x) / d;
-    }
-    return sampleY(Math.max(0, Math.min(1, t)));
-  };
-}
-// Премиальная «вязкая» кривая для разлёта узлов (быстрый старт → очень мягкая посадка).
-const EASE_BLOOM = cubicBezier(0.16, 1, 0.3, 1);
-
 function relationColor(relationType) {
   return RELATION_COLORS[relationType] || RELATION_COLORS.contact;
 }
@@ -233,8 +208,6 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       ty,
       x: tx * INTRO_FACTOR,
       y: ty * INTRO_FACTOR,
-      lerpX: tx * INTRO_FACTOR,
-      lerpY: ty * INTRO_FACTOR,
       vx: 0,
       vy: 0,
       scale,
@@ -517,14 +490,6 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     return totalV;
   }
 
-  // Концы линий догоняют узлы с запаздыванием (эффект резинки): lerp-позиция тянется за реальной.
-  function advanceLerp() {
-    for (const n of nodes) {
-      n.lerpX += (n.x - n.lerpX) * EDGE_LERP;
-      n.lerpY += (n.y - n.lerpY) * EDGE_LERP;
-    }
-  }
-
   // Плавное приближение масштаба/прозрачности к целям + рост линии («прорастание»).
   function advanceVisual() {
     for (const n of nodes) {
@@ -613,7 +578,6 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       const ao = a.opacity ?? 1;
       const bo = b.opacity ?? 1;
       n.opacity = ao + (bo - ao) * t;
-      n.lerpX = n.x; n.lerpY = n.y;
       if (b.grow) n.edgeGrow = raw; // линия «вытекает» по прогрессу своего узла
     }
     const camT = ease(Math.min(1, elapsed / dur));
@@ -693,15 +657,13 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
   }
 
   // Жёсткая заморозка: гасим скорости, округляем координаты до целых пикселей,
-  // подтягиваем lerp и НЕ перезапускаем цикл — граф замирает намертво (без «треска»).
+  // НЕ перезапускаем цикл — граф замирает намертво (без «треска»).
   function freezeGraph() {
     for (const n of nodes) {
       n.vx = 0;
       n.vy = 0;
       n.x = Math.round(n.x);
       n.y = Math.round(n.y);
-      n.lerpX = n.x;
-      n.lerpY = n.y;
       n.scale = n.targetScale;
       n.opacity = n.targetOpacity;
     }
@@ -748,11 +710,9 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       advanceVisual(); // bloom/смена роли вне твина — через целевые scale/opacity
     }
 
-    advanceLerp();
     renderAll();
 
-    const lerpSettling = nodes.some((n) => Math.abs(n.x - n.lerpX) + Math.abs(n.y - n.lerpY) > 0.5);
-    if (tween || dragging || panActive || boost > 0 || totalV > SLEEP_V || lerpSettling || visualSettling()) {
+    if (tween || dragging || panActive || boost > 0 || totalV > SLEEP_V || visualSettling()) {
       schedule();
     } else {
       freezeGraph(); // система успокоилась — замираем
@@ -910,7 +870,6 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       const r = dot.getBoundingClientRect();
       n.x = (r.left + r.width / 2) - sr.left - centerX - camX;
       n.y = (r.top + r.height / 2) - sr.top - centerY - camY;
-      n.lerpX = n.x; n.lerpY = n.y;
       // живая прозрачность из CSS-перехода — чтобы лучи гасли/проявлялись вместе с аватаркой
       const o = parseFloat(getComputedStyle(n.el).opacity);
       if (Number.isFinite(o)) n.opacity = o;
@@ -926,7 +885,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     for (const n of nodes) {
       n.el.style.transition = '';
       const fo = (typeof n.bfo === 'number') ? n.bfo : 1; // финальная прозрачность (0 — скрыт фильтром)
-      n.x = n.bfx; n.y = n.bfy; n.lerpX = n.x; n.lerpY = n.y;
+      n.x = n.bfx; n.y = n.bfy;
       n.scale = n.bfs; n.targetScale = n.bfs; n.opacity = fo; n.targetOpacity = fo;
       n.vx = 0; n.vy = 0; n.edgeGrow = 1;
     }
@@ -1001,7 +960,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
 
       // финал запоминаем для покоя; стартовое состояние держим в n.x/n.y (для первой отрисовки лучей)
       node.bfx = finalX; node.bfy = finalY; node.bfs = finalScale; node.bfo = 1;
-      node.x = fx; node.y = fy; node.lerpX = fx; node.lerpY = fy;
+      node.x = fx; node.y = fy;
       node.scale = finalScale; node.opacity = 1; node.targetScale = finalScale; node.targetOpacity = 1;
       node.hidden = false;
       // НОВЫЙ узел (разлетается из центра) — помечаем для эффекта прорастания линии (edgeGrow=0);
-- 
2.45.2


From 369ef61cab62be3c8b2e252454747a53372f49472c8d68ccdcd0ee8da822fb07 Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:18 +0300
Subject: [PATCH 5/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=80=D0=B0=D1=82=D0=BE=D1=80=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=82=D0=BE=D0=BB=D1=8C=D0=BA=D0=BE=20=D0=BB=D0=BE=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE=20(=D0=B8=D1=81=D0=BA=D0=BB=D1=8E?=
 =?UTF-8?q?=D1=87=D0=B5=D0=BD=D0=B0=20=D0=B8=D0=B7=20=D1=80=D0=B5=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D1=8F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- shine-UI/js/pages/network/lab.js убран из git (git rm --cached) и добавлен в .gitignore:
  на сервере лаборатория не нужна (там реальные данные), локально файл остаётся и работает.
- network-view.js: статический импорт lab.js заменён на ДИНАМИЧЕСКИЙ с фолбэком — если файла
  нет (прод/сервер), реальный экран «Связи» не ломается, а заход на /network-view/lab уводит
  на обычный экран. Локально лаборатория грузится как прежде.
- Документация фичи отражает, что lab.js — локальный (в .gitignore).
- Бамп client.version → 1.2.140.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |   4 +
 VERSION.properties                            |   2 +-
 .../features/interactive-network-graph.md     |   2 +
 shine-UI/js/pages/network-view.js             |  15 +-
 shine-UI/js/pages/network/lab.js              | 131 ------------------
 5 files changed, 19 insertions(+), 135 deletions(-)
 delete mode 100644 shine-UI/js/pages/network/lab.js

diff --git a/.gitignore b/.gitignore
index 914dba7..b3b6272 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,3 +93,7 @@ ESP32/**/*.a
 # Полные серверные бэкапы (тяжёлые архивы, не коммитим)
 server-backup/archive/**
 !server-backup/archive/.gitkeep
+
+# Лаборатория карты связей — только для локальной разработки (на сервере не нужна).
+# Файл остаётся локально и работает; network-view.js грузит его динамически (с фолбэком).
+shine-UI/js/pages/network/lab.js
diff --git a/VERSION.properties b/VERSION.properties
index 30b0b99..36e913f 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.139
+client.version=1.2.140
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
index 972a472..62a17ca 100644
--- a/shine-UI/Dev_Docs/features/interactive-network-graph.md
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -9,6 +9,8 @@
 - `js/pages/network/adapter.js` — реальные данные → нейтральная модель движка.
 - `js/pages/network/node-menu.js` — общее контекстное меню узла.
 - `js/pages/network/lab.js` — лаборатория (`network-view/lab`) на мок-данных, без бэкенда.
+  **Только локально** (в `.gitignore`, в репозитории её нет): на сервере она не нужна. `network-view.js`
+  грузит её **динамическим** импортом — если файла нет (прод), реальный экран «Связи» не ломается.
 - `js/pages/network-view.js` — страница: шапка, поиск, фильтры, история, склейка с движком.
 - `js/mock-data.js` — `networkGraphUsers` (связанный мульти-граф из 10 человек для лаборатории).
 - `styles/network-graph.css` — все стили `.fg-*`.
diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index 595f53c..e7f57f5 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -2,7 +2,6 @@ import { renderHeader } from '../components/header.js';
 import { authService, state } from '../state.js';
 import { makeProfileRoute } from '../services/shine-routes.js';
 import { makeProfileLinksRoute } from '../services/shine-routes.js';
-import { renderNetworkLab } from './network/lab.js';
 import { createForceGraph } from './network/force-graph.js';
 import { engineModelFromGraphModel } from './network/adapter.js';
 import { openNodeMenu, relationLabelRu } from './network/node-menu.js';
@@ -217,9 +216,19 @@ let persistedCenterLogin = '';
 let persistedCenterHistory = [];
 
 export function render({ navigate, route }) {
-  // Лабораторный режим force-графа (Фаза 1): рендерится из мока, не трогая реальный путь ниже.
+  // Лабораторный режим force-графа — ТОЛЬКО для локальной разработки. Файл `network/lab.js`
+  // намеренно НЕ в гите (см. .gitignore): на сервере он не нужен (там реальные данные). Поэтому
+  // импорт ДИНАМИЧЕСКИЙ — если файла нет (прод/сервер), реальный экран «Связи» не ломается,
+  // а заход на /network-view/lab просто уводит на обычный экран.
   if (String(route?.params?.mode || '').trim().toLowerCase() === 'lab') {
-    return renderNetworkLab({ navigate });
+    const host = document.createElement('div');
+    host.style.display = 'contents'; // прозрачная обёртка: lab-экран ведёт себя как прямой потомок
+    let inner = null;
+    import('./network/lab.js')
+      .then((m) => { inner = m.renderNetworkLab({ navigate }); host.append(inner); })
+      .catch(() => { navigate('network-view'); }); // нет файла (сервер) — на реальный экран
+    host.cleanup = () => { if (inner && typeof inner.cleanup === 'function') inner.cleanup(); };
+    return host;
   }
   const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
   const routeLogin = normalizeLogin(route?.params?.login || '');
diff --git a/shine-UI/js/pages/network/lab.js b/shine-UI/js/pages/network/lab.js
deleted file mode 100644
index dc2a655..0000000
--- a/shine-UI/js/pages/network/lab.js
+++ /dev/null
@@ -1,131 +0,0 @@
-// Лабораторный режим карты связей (network-view/lab).
-//
-// Назначение: на мок-данных (без бэкенда) щупать физику force-графа, панорамирование,
-// центрирование и навигацию между пользователями. Используется связанный мульти-граф
-// networkGraphUsers: у каждого пользователя свой набор связей, тап по узлу переключает
-// карту на сеть этого человека (как реальный путь, но локально).
-
-import { renderHeader } from '../../components/header.js';
-import { networkGraphUsers } from '../../mock-data.js';
-import { createForceGraph, buildModelFromTz } from './force-graph.js';
-import { openNodeMenu } from './node-menu.js';
-
-const START_LOGIN = 'ivan';
-
-// Фильтры слоёв — те же, что в реальном пути network-view (предикат по периферийным узлам;
-// фокус виден всегда). Позволяют пощупать в лаборатории в т.ч. слой «Сияющие».
-const FILTERS = {
-  all: { label: 'Все', pred: () => true },
-  family: { label: 'Семья', pred: (n) => n.relationType === 'family' },
-  friends: { label: 'Друзья', pred: (n) => n.relationType === 'friend' },
-  shining: { label: 'Сияющие', pred: (n) => Boolean(n.shining) },
-};
-const FILTER_ORDER = ['all', 'family', 'friends', 'shining'];
-
-function helpText() {
-  return [
-    'Лаборатория карты связей (мок-данные, без сервера).',
-    '• Тащите по экрану — карта свободно перемещается (pan).',
-    '• Тап по узлу — он стягивается в центр и карта перестраивается под его сеть.',
-    '• Тап по центральному узлу — здесь открылся бы профиль.',
-    '• Долгое нажатие — контекстное меню (в реальном пути «Связи»).',
-    '• Чипы под шапкой — фильтры слоёв: Все / Семья / Друзья / Сияющие.',
-    '',
-    'Доступные люди: Иван, Алиса, Павел, Елена, Дмитрий, Олег, Нина, Марина, Света, Кирилл.',
-  ].join('\n');
-}
-
-// Граф пользователя по логину; если такого нет в датасете — одинокий узел (без связей).
-function graphForLogin(login) {
-  const key = String(login || '').trim().toLowerCase();
-  if (networkGraphUsers[key]) return networkGraphUsers[key];
-  return { focusUser: { id: key, login: key, name: key, avatar: null, status: '' }, connections: [] };
-}
-
-export function renderNetworkLab({ navigate }) {
-  const screen = document.createElement('section');
-  screen.className = 'network-screen';
-
-  const appScreenEl = document.getElementById('app-screen');
-  appScreenEl?.classList.add('network-scroll-lock');
-
-  const stage = document.createElement('div');
-  stage.className = 'network-stage fg-stage';
-
-  const header = renderHeader({
-    title: 'Связи · лаборатория',
-    leftAction: {
-      label: '←',
-      onClick: () => navigate('network-view'),
-    },
-    rightActions: [
-      { label: '?', onClick: () => window.alert(helpText()) },
-    ],
-  });
-  header.classList.add('network-header-overlay');
-
-  const model = buildModelFromTz(graphForLogin(START_LOGIN));
-
-  // Состояние активного слоя (как в network-view): фокус всегда виден.
-  let activeFilter = 'all';
-  const filterChips = {};
-  function applyFilter(key) {
-    if (!FILTERS[key]) return;
-    activeFilter = key;
-    FILTER_ORDER.forEach((k) => {
-      const el = filterChips[k];
-      if (el) el.classList.toggle('is-active', k === activeFilter);
-    });
-    graph.setFilter(FILTERS[key].pred);
-  }
-
-  stage.append(header);
-  screen.append(stage);
-
-  // Монтируем движок синхронно (не через rAF): размеры сцены движок берёт с запасом
-  // (window.innerWidth) и корректирует через ResizeObserver, когда сцена попадёт в DOM.
-  const graph = createForceGraph({
-    stage,
-    model,
-    // тап по узлу — переключаем карту на сеть выбранного человека
-    onNodeTap: (node) => {
-      graph.setModel(buildModelFromTz(graphForLogin(node.login)));
-      // сохраняем выбранный слой при переходе на сеть другого человека (как в network-view)
-      if (activeFilter !== 'all') graph.setFilter(FILTERS[activeFilter].pred);
-    },
-    onCenterTap: (node) => window.alert(`Профиль: ${node.name || node.login || node.id}`),
-    onNodeLongPress: (node, point) => openNodeMenu({
-      login: node.name || node.login || node.id,
-      relationType: node.relationType,
-      point,
-      actions: [
-        { label: 'Профиль', onClick: () => window.alert(`Профиль: ${node.name || node.login}`) },
-        { label: 'Написать', onClick: () => window.alert(`Написать: ${node.name || node.login}`) },
-      ],
-    }),
-  });
-
-  // Панель фильтров слоёв — тот же оверлей-стиль (.fg-filter-bar), что и в network-view.
-  const filterBar = document.createElement('div');
-  filterBar.className = 'fg-filter-bar';
-  // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
-  // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
-  filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
-  FILTER_ORDER.forEach((key) => {
-    const chip = document.createElement('button');
-    chip.type = 'button';
-    chip.className = `fg-filter-chip${key === activeFilter ? ' is-active' : ''}`;
-    chip.textContent = FILTERS[key].label;
-    chip.addEventListener('click', () => applyFilter(key));
-    filterChips[key] = chip;
-    filterBar.append(chip);
-  });
-  stage.append(filterBar);
-
-  screen.cleanup = () => {
-    graph.destroy();
-    appScreenEl?.classList.remove('network-scroll-lock');
-  };
-
-  return screen;
-}
-- 
2.45.2


From 3de992d251ba07285cf691477542ced74b9fe123e7bb19130b1a9f0f7f968e95 Mon Sep 17 00:00:00 2001
From: Pixel <I@Pixel.ru>
Date: Tue, 9 Jun 2026 21:23:18 +0300
Subject: [PATCH 6/6] =?UTF-8?q?=D0=A1=D0=B2=D1=8F=D0=B7=D0=B8:=20=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D0=BD=D1=83=D1=82=D1=8C=20=D0=BB=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B0=D1=82=D0=BE=D1=80=D0=B8=D1=8E=20=D0=B2=20=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=82=D0=BA=D1=83=20(=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B0=20=D0=B3=D1=80=D0=B0?=
 =?UTF-8?q?=D1=84=D0=B0=20=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=BA=D0=B0=D1=85)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Откат удаления из aed64e7: lab.js снова в репозитории, статический импорт в network-view.js,
строка lab.js убрана из .gitignore. Лаборатория /network-view/lab нужна для демонстрации/проверки
графа на мок-данных без бэкенда. Бамп client.version → 1.2.141.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |   4 -
 VERSION.properties                            |   2 +-
 .../features/interactive-network-graph.md     |   2 -
 shine-UI/js/pages/network-view.js             |  15 +-
 shine-UI/js/pages/network/lab.js              | 131 ++++++++++++++++++
 5 files changed, 135 insertions(+), 19 deletions(-)
 create mode 100644 shine-UI/js/pages/network/lab.js

diff --git a/.gitignore b/.gitignore
index b3b6272..914dba7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,7 +93,3 @@ ESP32/**/*.a
 # Полные серверные бэкапы (тяжёлые архивы, не коммитим)
 server-backup/archive/**
 !server-backup/archive/.gitkeep
-
-# Лаборатория карты связей — только для локальной разработки (на сервере не нужна).
-# Файл остаётся локально и работает; network-view.js грузит его динамически (с фолбэком).
-shine-UI/js/pages/network/lab.js
diff --git a/VERSION.properties b/VERSION.properties
index 36e913f..f5d162c 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.140
+client.version=1.2.141
 server.version=1.2.127
diff --git a/shine-UI/Dev_Docs/features/interactive-network-graph.md b/shine-UI/Dev_Docs/features/interactive-network-graph.md
index 62a17ca..972a472 100644
--- a/shine-UI/Dev_Docs/features/interactive-network-graph.md
+++ b/shine-UI/Dev_Docs/features/interactive-network-graph.md
@@ -9,8 +9,6 @@
 - `js/pages/network/adapter.js` — реальные данные → нейтральная модель движка.
 - `js/pages/network/node-menu.js` — общее контекстное меню узла.
 - `js/pages/network/lab.js` — лаборатория (`network-view/lab`) на мок-данных, без бэкенда.
-  **Только локально** (в `.gitignore`, в репозитории её нет): на сервере она не нужна. `network-view.js`
-  грузит её **динамическим** импортом — если файла нет (прод), реальный экран «Связи» не ломается.
 - `js/pages/network-view.js` — страница: шапка, поиск, фильтры, история, склейка с движком.
 - `js/mock-data.js` — `networkGraphUsers` (связанный мульти-граф из 10 человек для лаборатории).
 - `styles/network-graph.css` — все стили `.fg-*`.
diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index e7f57f5..595f53c 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -2,6 +2,7 @@ import { renderHeader } from '../components/header.js';
 import { authService, state } from '../state.js';
 import { makeProfileRoute } from '../services/shine-routes.js';
 import { makeProfileLinksRoute } from '../services/shine-routes.js';
+import { renderNetworkLab } from './network/lab.js';
 import { createForceGraph } from './network/force-graph.js';
 import { engineModelFromGraphModel } from './network/adapter.js';
 import { openNodeMenu, relationLabelRu } from './network/node-menu.js';
@@ -216,19 +217,9 @@ let persistedCenterLogin = '';
 let persistedCenterHistory = [];
 
 export function render({ navigate, route }) {
-  // Лабораторный режим force-графа — ТОЛЬКО для локальной разработки. Файл `network/lab.js`
-  // намеренно НЕ в гите (см. .gitignore): на сервере он не нужен (там реальные данные). Поэтому
-  // импорт ДИНАМИЧЕСКИЙ — если файла нет (прод/сервер), реальный экран «Связи» не ломается,
-  // а заход на /network-view/lab просто уводит на обычный экран.
+  // Лабораторный режим force-графа (Фаза 1): рендерится из мока, не трогая реальный путь ниже.
   if (String(route?.params?.mode || '').trim().toLowerCase() === 'lab') {
-    const host = document.createElement('div');
-    host.style.display = 'contents'; // прозрачная обёртка: lab-экран ведёт себя как прямой потомок
-    let inner = null;
-    import('./network/lab.js')
-      .then((m) => { inner = m.renderNetworkLab({ navigate }); host.append(inner); })
-      .catch(() => { navigate('network-view'); }); // нет файла (сервер) — на реальный экран
-    host.cleanup = () => { if (inner && typeof inner.cleanup === 'function') inner.cleanup(); };
-    return host;
+    return renderNetworkLab({ navigate });
   }
   const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
   const routeLogin = normalizeLogin(route?.params?.login || '');
diff --git a/shine-UI/js/pages/network/lab.js b/shine-UI/js/pages/network/lab.js
new file mode 100644
index 0000000..dc2a655
--- /dev/null
+++ b/shine-UI/js/pages/network/lab.js
@@ -0,0 +1,131 @@
+// Лабораторный режим карты связей (network-view/lab).
+//
+// Назначение: на мок-данных (без бэкенда) щупать физику force-графа, панорамирование,
+// центрирование и навигацию между пользователями. Используется связанный мульти-граф
+// networkGraphUsers: у каждого пользователя свой набор связей, тап по узлу переключает
+// карту на сеть этого человека (как реальный путь, но локально).
+
+import { renderHeader } from '../../components/header.js';
+import { networkGraphUsers } from '../../mock-data.js';
+import { createForceGraph, buildModelFromTz } from './force-graph.js';
+import { openNodeMenu } from './node-menu.js';
+
+const START_LOGIN = 'ivan';
+
+// Фильтры слоёв — те же, что в реальном пути network-view (предикат по периферийным узлам;
+// фокус виден всегда). Позволяют пощупать в лаборатории в т.ч. слой «Сияющие».
+const FILTERS = {
+  all: { label: 'Все', pred: () => true },
+  family: { label: 'Семья', pred: (n) => n.relationType === 'family' },
+  friends: { label: 'Друзья', pred: (n) => n.relationType === 'friend' },
+  shining: { label: 'Сияющие', pred: (n) => Boolean(n.shining) },
+};
+const FILTER_ORDER = ['all', 'family', 'friends', 'shining'];
+
+function helpText() {
+  return [
+    'Лаборатория карты связей (мок-данные, без сервера).',
+    '• Тащите по экрану — карта свободно перемещается (pan).',
+    '• Тап по узлу — он стягивается в центр и карта перестраивается под его сеть.',
+    '• Тап по центральному узлу — здесь открылся бы профиль.',
+    '• Долгое нажатие — контекстное меню (в реальном пути «Связи»).',
+    '• Чипы под шапкой — фильтры слоёв: Все / Семья / Друзья / Сияющие.',
+    '',
+    'Доступные люди: Иван, Алиса, Павел, Елена, Дмитрий, Олег, Нина, Марина, Света, Кирилл.',
+  ].join('\n');
+}
+
+// Граф пользователя по логину; если такого нет в датасете — одинокий узел (без связей).
+function graphForLogin(login) {
+  const key = String(login || '').trim().toLowerCase();
+  if (networkGraphUsers[key]) return networkGraphUsers[key];
+  return { focusUser: { id: key, login: key, name: key, avatar: null, status: '' }, connections: [] };
+}
+
+export function renderNetworkLab({ navigate }) {
+  const screen = document.createElement('section');
+  screen.className = 'network-screen';
+
+  const appScreenEl = document.getElementById('app-screen');
+  appScreenEl?.classList.add('network-scroll-lock');
+
+  const stage = document.createElement('div');
+  stage.className = 'network-stage fg-stage';
+
+  const header = renderHeader({
+    title: 'Связи · лаборатория',
+    leftAction: {
+      label: '←',
+      onClick: () => navigate('network-view'),
+    },
+    rightActions: [
+      { label: '?', onClick: () => window.alert(helpText()) },
+    ],
+  });
+  header.classList.add('network-header-overlay');
+
+  const model = buildModelFromTz(graphForLogin(START_LOGIN));
+
+  // Состояние активного слоя (как в network-view): фокус всегда виден.
+  let activeFilter = 'all';
+  const filterChips = {};
+  function applyFilter(key) {
+    if (!FILTERS[key]) return;
+    activeFilter = key;
+    FILTER_ORDER.forEach((k) => {
+      const el = filterChips[k];
+      if (el) el.classList.toggle('is-active', k === activeFilter);
+    });
+    graph.setFilter(FILTERS[key].pred);
+  }
+
+  stage.append(header);
+  screen.append(stage);
+
+  // Монтируем движок синхронно (не через rAF): размеры сцены движок берёт с запасом
+  // (window.innerWidth) и корректирует через ResizeObserver, когда сцена попадёт в DOM.
+  const graph = createForceGraph({
+    stage,
+    model,
+    // тап по узлу — переключаем карту на сеть выбранного человека
+    onNodeTap: (node) => {
+      graph.setModel(buildModelFromTz(graphForLogin(node.login)));
+      // сохраняем выбранный слой при переходе на сеть другого человека (как в network-view)
+      if (activeFilter !== 'all') graph.setFilter(FILTERS[activeFilter].pred);
+    },
+    onCenterTap: (node) => window.alert(`Профиль: ${node.name || node.login || node.id}`),
+    onNodeLongPress: (node, point) => openNodeMenu({
+      login: node.name || node.login || node.id,
+      relationType: node.relationType,
+      point,
+      actions: [
+        { label: 'Профиль', onClick: () => window.alert(`Профиль: ${node.name || node.login}`) },
+        { label: 'Написать', onClick: () => window.alert(`Написать: ${node.name || node.login}`) },
+      ],
+    }),
+  });
+
+  // Панель фильтров слоёв — тот же оверлей-стиль (.fg-filter-bar), что и в network-view.
+  const filterBar = document.createElement('div');
+  filterBar.className = 'fg-filter-bar';
+  // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
+  // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
+  filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
+  FILTER_ORDER.forEach((key) => {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = `fg-filter-chip${key === activeFilter ? ' is-active' : ''}`;
+    chip.textContent = FILTERS[key].label;
+    chip.addEventListener('click', () => applyFilter(key));
+    filterChips[key] = chip;
+    filterBar.append(chip);
+  });
+  stage.append(filterBar);
+
+  screen.cleanup = () => {
+    graph.destroy();
+    appScreenEl?.classList.remove('network-scroll-lock');
+  };
+
+  return screen;
+}
-- 
2.45.2