Связи (13.06): орбы по референсу, линии по категории, постоянная вселенная

Орбы:
- материал «хрусталь»: чистое лицо (виньетка 0.5→0.22), диффузный блик окна
  вместо «капли» (+мягкий blur sf), стекло прозрачнее (тело 0.38→0.3),
  полупрозрачная преломляющая кромка (blur + opacity 0.25→0.2).
- размер +11.5% (node-dot 52→58px); единый ORB_R=29 как источник радиуса.
- убран значок * у общих узлов (логика is-common цела).

Линии:
- цвет по категории на ВСЕХ рёбрах; плазма только сияющим.
- общий узел наследует сияние исходного человека (не серый).
- контакт линий ровно на кромке сферы орба (ORB_R), без зазора, все уровни.

Навигация:
- констелляция (паутина 2-3 уровней) — постоянный режим; кнопка «Вселенная»
  убрана; Семья/Друзья/Сияющие остаются фильтрами. Чистка осиротевшего CSS.

Версия 1.2.161.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

shine-UI/js/pages/network/force-graph.js

@@ -90,6 +90,11 @@ const RELATION_COLORS = {
 // Неоновый цвет центра — из него «вытекает» градиент каждой связи к цвету периферийного узла.
 const FOCUS_NEON = 'rgba(140, 240, 255, 0.95)';
 
+// Радиус видимой сферы орба (world-единицы), синхронно с CSS `.fg-node .node-dot` = 58px → радиус 29
+// (сфера орба ≈ радиусу node-dot). ЕДИНЫЙ источник радиуса для контакта линий с кромкой и раскладки детей —
+// меняешь размер орба → меняй здесь и в CSS вместе, линии останутся впритык.
+const ORB_R = 29;
+
 
 function easeOutCubic(t) {
   const x = 1 - t;
@@ -437,23 +442,24 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
     svg.innerHTML = ''
       + '<defs>'
       + '<clipPath id="c' + u + '"><circle cx="50" cy="50" r="38"/></clipPath>'
-      + '<radialGradient id="sh' + u + '" cx="50%" cy="45%" r="52%"><stop offset="62%" stop-color="#bfe3ff" stop-opacity="0"/><stop offset="90%" stop-color="#dff1ff" stop-opacity="0.55"/><stop offset="100%" stop-color="#5f93b8" stop-opacity="0.25"/></radialGradient>'
-      + '<radialGradient id="sd' + u + '" cx="50%" cy="60%" r="55%"><stop offset="58%" stop-color="#000000" stop-opacity="0"/><stop offset="100%" stop-color="#02060d" stop-opacity="0.4"/></radialGradient>'
-      + '<linearGradient id="sp' + u + '" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#ffffff" stop-opacity="0.85"/><stop offset="100%" stop-color="#ffffff" stop-opacity="0"/></linearGradient>'
+      + '<radialGradient id="sh' + u + '" cx="50%" cy="45%" r="52%"><stop offset="62%" stop-color="#bfe3ff" stop-opacity="0"/><stop offset="90%" stop-color="#dff1ff" stop-opacity="0.5"/><stop offset="100%" stop-color="#5f93b8" stop-opacity="0.18"/></radialGradient>'
+      + '<radialGradient id="sd' + u + '" cx="50%" cy="60%" r="58%"><stop offset="72%" stop-color="#000000" stop-opacity="0"/><stop offset="100%" stop-color="#02060d" stop-opacity="0.22"/></radialGradient>'
+      + '<linearGradient id="sp' + u + '" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/><stop offset="100%" stop-color="#ffffff" stop-opacity="0"/></linearGradient>'
       + '<filter id="so' + u + '" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="1.3"/></filter>'
+      + '<filter id="sf' + u + '" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="3.2"/></filter>'
       + '<filter id="gl' + u + '" x="-70%" y="-70%" width="240%" height="240%"><feGaussianBlur stdDeviation="' + glowSpread + '"/></filter>'
       + '</defs>'
       + '<circle cx="50" cy="50" r="42" fill="#5facd4" opacity="' + glowOp + '" filter="url(#gl' + u + ')"/>'
-      + '<circle cx="50" cy="50" r="42" fill="#0a1626" opacity="0.38"/>'
+      + '<circle cx="50" cy="50" r="42" fill="#0a1626" opacity="0.3"/>'
       + '<circle cx="50" cy="50" r="38" fill="#26344a"/>'
       + (init ? '<text x="50" y="58" text-anchor="middle" fill="#cfe0ff" font-family="sans-serif" font-weight="600" font-size="22">' + init + '</text>' : '')
       + (src ? '<image href="' + src + '" x="12" y="12" width="76" height="76" clip-path="url(#c' + u + ')" preserveAspectRatio="xMidYMid slice" style="filter:' + imgFilter + '"/>' : '')
       + '<circle cx="50" cy="50" r="38" fill="url(#sd' + u + ')"/>'
       + '<circle cx="50" cy="50" r="42" fill="url(#sh' + u + ')"/>'
       + '<circle cx="50" cy="50" r="42" fill="#2f7fd0" opacity="0.07"/>'
-      + '<path d="M74 16 A42 42 0 0 1 90 61" fill="none" stroke="#9fd2f2" stroke-width="1.6" stroke-opacity="0.85" stroke-linecap="round" filter="url(#so' + u + ')"/>'
-      + '<circle cx="50" cy="50" r="42" fill="none" stroke="#a9d6f0" stroke-width="0.6" stroke-opacity="0.5"/>'
-      + '<ellipse cx="37" cy="30" rx="16" ry="8" fill="url(#sp' + u + ')" transform="rotate(-28 37 30)" filter="url(#so' + u + ')"/>';
+      + '<path d="M74 16 A42 42 0 0 1 90 61" fill="none" stroke="#9fd2f2" stroke-width="1.6" stroke-opacity="0.55" stroke-linecap="round" filter="url(#so' + u + ')"/>'
+      + '<circle cx="50" cy="50" r="42" fill="none" stroke="#a9d6f0" stroke-width="0.9" stroke-opacity="0.2" filter="url(#so' + u + ')"/>'
+      + '<ellipse cx="40" cy="31" rx="24" ry="12" fill="url(#sp' + u + ')" transform="rotate(-28 40 31)" filter="url(#sf' + u + ')"/>';
     const im = svg.querySelector('image');
     if (im) im.addEventListener('error', () => { try { im.remove(); } catch (e) { /* останутся инициалы */ } });
     return svg;
@@ -634,7 +640,7 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
         // АДАПТИВНЫЙ радиус орбиты (фикс слипания): дети не лезут на (возможно увеличенный зумом) родитель
         // и не накладываются друг на друга. Клиренс = радиус родителя + базовый отступ; место = по числу детей.
         const baseR = tier === 2 ? DEEP_R2 : DEEP_R3;
-        const pr = 26 * (p.scale || 1) * (p.depthScale || 1); // визуальный радиус родителя (world-единицы)
+        const pr = ORB_R * (p.scale || 1) * (p.depthScale || 1); // визуальный радиус родителя (world-единицы)
         const cnt = childCountByParent.get(n.parentId) || 1;
         const ringR = Math.max(baseR + pr, cnt * 13);  // расталкивание: дети без наложений (клиренс + место)
         const r = ringR * e;                            // при e=0 — в центре родителя, при 1 — на полной орбите
@@ -744,7 +750,9 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       const parent = (n.parentId && nodeById.get(n.parentId)) || focus;
       const fx = centerX + camX + parent.x * Z;
       const fy = centerY + camY + parent.y * Z;
-      const fr = parent.dotRadius * parent.scale * (parent.depthScale ?? 1) * Z + 4;
+      // радиус контакта = реальный радиус сферы орба: полный орб = ORB_R (см. renderNodes pr=ORB_R*…),
+      // лёгкая точка (.fg-dot) = её dotRadius. Старое dotRadius у орбов (32/16) — легаси, давало разный зазор.
+      const fr = (parent.dotOnly ? parent.dotRadius : ORB_R) * parent.scale * (parent.depthScale ?? 1) * Z;
       const nx = tx(n);
       const ny = ty(n);
       if ((nx < -80 && fx < -80) || (nx > viewW + 80 && fx > viewW + 80)) continue;
@@ -761,8 +769,8 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
       const len = Math.hypot(dx, dy) || 1;
       const ux = dx / len;
       const uy = dy / len;
-      const nr = n.dotRadius * n.scale * (n.depthScale ?? 1) * Z + 4;
-      // концы линии — у краёв кружков
+      const nr = (n.dotOnly ? n.dotRadius : ORB_R) * n.scale * (n.depthScale ?? 1) * Z;
+      // концы линии — ровно на кромке сферы орба (радиус ORB_R для полных орбов), без зазора и без захода внутрь
       const x1 = fx + ux * fr;
       const y1 = fy + uy * fr;
       const x2 = ex - ux * nr;
@@ -828,9 +836,9 @@ export function createForceGraph({ stage, model, onCenterTap, onNodeTap, onNodeL
             parts.push(`<path d="${d}" fill="none" stroke="${relationColor(n.relationType)}" stroke-width="1.0" stroke-linecap="round" opacity="${(0.42 * pe * sp).toFixed(2)}" />`);
           }
         }
-      } else if (shine || n.track || onPath) {
-        // СИЯЮЩАЯ связь — плазменный композитинг: ОДИН центральный S-путь (cubic) + ТРИ наложенных слоя
-        // с ОДИНАКОВЫМ d (объём из толщины+blur, не из геометрии). Слои: широкое поле / трубка / ядро.
+      } else if (shine) {
+        // СИЯЮЩАЯ связь → цвет сияющей линии (плазма). Только сияющим — несияющие (в т.ч. активный путь
+        // погружения track/onPath) идут ниже в ЦВЕТ КАТЕГОРИИ. Плазма: ОДИН S-путь + ТРИ слоя на одном d.
         const pnx = -uy;
         const pny = ux;                                   // перпендикуляр к хорде
         const amp = Math.min(13, 5 + segLen0 * 0.05);     // амплитуда S — спокойная изящная волна (∝ длине)