src/editor/KubikonEditor.jsx

@@ -4,12 +4,15 @@ import { jwtDecode } from 'jwt-decode';
 import { useAuth } from '../auth/AuthContext.jsx';
 import { useSanctions } from '../auth/SanctionsContext.jsx';
 import { BabylonScene } from './engine/BabylonScene';
+import { StudioCollab } from './engine/StudioCollab';
+import { CollabOverlay } from './engine/CollabOverlay';
 import { BLOCK_TYPES, BLOCK_CATEGORIES, blockPreview, registerCustomBlockType } from './engine/BlockTypes';
 import { MODEL_TYPES, MODEL_CATEGORIES, getModelType } from './engine/ModelTypes';
 import { getKit } from './engine/GameplayKits';
 import { PRIMITIVE_TYPES, PALETTE_PRIMITIVE_TYPES } from './engine/PrimitiveTypes';
 import { getModelThumbnail } from './engine/ModelThumbnails';
 import * as Kubikon3DApi from '../api/Kubikon3DService';
+import { REALTIME_HTTP } from '../api/API';
 import GameSettingsModal from './GameSettingsModal';
 import SkinManagerModal from './SkinManagerModal';
 import PublishModal from './PublishModal';
@@ -464,6 +467,15 @@ const KubikonEditor = () => {
 
     const canvasRef = useRef(null);
     const sceneRef = useRef(null);
+    // Team Create — клиент совместного редактирования + presence-overlay.
+    const collabRef = useRef(null);
+    const collabOverlayRef = useRef(null);
+    const [collabActive, setCollabActive] = useState(false);   // подключены к комнате
+    const [collabPeers, setCollabPeers] = useState(0);          // сколько ДРУГИХ соавторов
+    // Роль в коллабе: 'owner' (владелец) | 'collab' (приглашённый по ссылке).
+    // Приглашённый — гость: не может менять настройки/сохранять/публиковать.
+    const [collabRole, setCollabRole] = useState('owner');
+    const isInvitedGuest = collabActive && collabRole !== 'owner';
     // Флаш pending-debounce ScriptEditor. Зовём перед каждым doSave/перед уходом
     // со страницы — иначе последние 600мс правок скрипта потеряются.
     const scriptEditorFlushRef = useRef(null);
@@ -1010,6 +1022,14 @@ const KubikonEditor = () => {
             console.warn('[KubikonEditor] save: skip (load failed)');
             return;
         }
+        // Team Create: в комнате совместного редактирования сохраняет ТОЛЬКО host
+        // (authoritative). Иначе два соавтора autosave'ят наперегонки → last-write-wins
+        // затирает чужие правки. Не-host просто не пишет в БД, его изменения уже
+        // у host через операции.
+        if (collabRef.current?.connected && !collabRef.current?.isHost) {
+            console.log('[KubikonEditor] save: skip (collab non-host, host saves)');
+            return;
+        }
         const userId = getCurrentUserId();
         if (!userId) {
             console.warn('[KubikonEditor] save: no userId');
@@ -1229,6 +1249,108 @@ const KubikonEditor = () => {
         }, AUTOSAVE_DEBOUNCE_MS);
     }, [doSave]);
 
+    /**
+     * Team Create: подключиться к комнате совместного редактирования.
+     * Зовётся ПОСЛЕ загрузки сцены (scene готова). projectIdNum — числовой id.
+     * Подключаемся если: владелец проекта (всегда) ИЛИ есть ?collab=<token> в URL.
+     */
+    const initCollab = useCallback(async (projectIdNum) => {
+        try {
+            if (!sceneRef.current || !projectIdNum) return;
+            if (collabRef.current) return; // уже подключены
+            const collabToken = new URLSearchParams(window.location.search).get('collab') || null;
+            const tokenRaw = localStorage.getItem('Authorization')
+                || localStorage.getItem('jwt') || '';
+            if (!tokenRaw) return;
+            // Подключаемся только если есть инвайт ИЛИ владелец (бэкенд решит в onAuth).
+            // Если не владелец и нет инвайта — onAuth вернёт 403, ловим тихо.
+            const collab = new StudioCollab(sceneRef.current, {
+                projectId: projectIdNum,
+                token: tokenRaw,
+                collabToken,
+                callbacks: {
+                    onConnected: ({ isHost, role }) => {
+                        setCollabActive(true);
+                        setCollabRole(role || (isHost ? 'owner' : 'collab'));
+                        collabOverlayRef.current?.toast(isHost
+                            ? 'Совместное редактирование включено. Пригласи друга кнопкой 👥'
+                            : 'Ты подключился к совместному редактированию!');
+                    },
+                    onError: (msg) => {
+                        // 403 (нет доступа) — норм для не-приглашённого; просто не коллабим.
+                        console.warn('[collab] error:', msg);
+                    },
+                    onLeft: () => { setCollabActive(false); },
+                    onPresenceChange: (list) => {
+                        collabOverlayRef.current?.updatePresence(list);
+                        setCollabPeers(Math.max(0, list.filter(c => !c.me).length));
+                    },
+                    onOpRejected: (m) => {
+                        collabOverlayRef.current?.toast('Этот объект сейчас редактирует другой соавтор');
+                    },
+                    onChat: (m) => { /* чат соавторов — на этап 2 */ },
+                    // host отдаёт текущую сцену новому соавтору
+                    onSnapshotRequest: (replyFn) => {
+                        try { replyFn(sceneRef.current.serialize()); } catch (e) { /* ignore */ }
+                    },
+                    // новый соавтор получил сцену от host — грузим
+                    onRemoteSnapshot: async (state) => {
+                        try {
+                            if (state) {
+                                await sceneRef.current.loadFromState(state);
+                                dirtyRef.current = false;
+                            }
+                        } catch (e) { console.warn('[collab] snapshot load failed', e); }
+                    },
+                },
+            });
+            await collab.connect();
+            collab.installInterceptors();
+            collabRef.current = collab;
+            // presence-overlay
+            const ov = new CollabOverlay(sceneRef.current);
+            ov.mount();
+            collabOverlayRef.current = ov;
+            // курсор-трекинг: шлём точку под мышью на сцене (raycast по pointermove)
+            _wireCursorTracking(sceneRef.current, collab);
+        } catch (e) {
+            // 403/нет доступа/realtime недоступен — работаем соло, не падаем.
+            console.warn('[collab] init skipped:', e?.message || e);
+        }
+    }, []);
+
+    /**
+     * Team Create: «Пригласить» — запросить collab-токен у realtime, собрать
+     * ссылку studio.rublox.pro/edit/<id>?collab=<token> и скопировать в буфер.
+     */
+    const handleInvite = useCallback(async () => {
+        try {
+            if (!/^\d+$/.test(id)) { alert('Сначала сохрани проект.'); return; }
+            const tokenRaw = localStorage.getItem('Authorization') || localStorage.getItem('jwt') || '';
+            const base = (REALTIME_HTTP || '').replace(/\/$/, '');
+            const res = await fetch(`${base}/studio-invite/${id}`, {
+                method: 'POST',
+                headers: { Authorization: tokenRaw, 'Content-Type': 'application/json' },
+            });
+            if (!res.ok) {
+                if (res.status === 403) { alert('Только автор проекта может приглашать соавторов.'); return; }
+                alert('Не удалось создать приглашение (' + res.status + ').');
+                return;
+            }
+            const { token } = await res.json();
+            const link = `${window.location.origin}/edit/${id}?collab=${token}`;
+            try {
+                await navigator.clipboard.writeText(link);
+                collabOverlayRef.current?.toast('Ссылка-приглашение скопирована! Отправь другу.');
+            } catch (e) {
+                window.prompt('Скопируй ссылку-приглашение для друга:', link);
+            }
+        } catch (e) {
+            console.warn('[collab] invite failed', e);
+            alert('Не удалось создать приглашение. Realtime недоступен?');
+        }
+    }, [id]);
+
     // Инициализация Babylon + загрузка проекта (если редактируем существующий)
     useEffect(() => {
         // RACE FIX: пока isLoading=true (auth ещё грузится), компонент
@@ -1608,6 +1730,9 @@ const KubikonEditor = () => {
                 } finally {
                     console.log(`[KubikonEditor] setSceneLoading(false) — load finally (id=${id})`);
                     setSceneLoading(false);
+                    // Team Create: после загрузки сцены — подключиться к комнате
+                    // совместного редактирования (владелец или по ?collab-инвайту).
+                    if (/^\d+$/.test(id)) initCollab(Number(id));
                 }
             })();
         } else {
@@ -1724,13 +1849,23 @@ const KubikonEditor = () => {
                 clearTimeout(autoSaveTimerRef.current);
                 autoSaveTimerRef.current = null;
             }
+            // Team Create: отключиться от комнаты + снять overlay.
+            try {
+                if (collabRef.current?.__cursorHandler && collabRef.current?.__cursorCanvas) {
+                    collabRef.current.__cursorCanvas.removeEventListener('pointermove', collabRef.current.__cursorHandler);
+                }
+                collabRef.current?.dispose();
+                collabOverlayRef.current?.dispose();
+            } catch (e) { /* ignore */ }
+            collabRef.current = null;
+            collabOverlayRef.current = null;
             scene.dispose();
             sceneRef.current = null;
         };
         // isLoading в deps — без него эффект мог стрельнуть пока canvas
         // ещё не в DOM (isLoading=true → компонент рендерит null) и больше
         // не перезапускался → вечная "Загрузка проекта… 0%".
-    }, [isAuthenticated, isLoading, id, markDirty]);
+    }, [isAuthenticated, isLoading, id, markDirty, initCollab]);
 
     // beforeunload — браузерный диалог нельзя кастомизировать (API запрещает).
     // Auto-save срабатывает на каждое изменение через ~1.5 сек, поэтому риск
@@ -1948,6 +2083,19 @@ const KubikonEditor = () => {
                         {saveStatus === 'error'  && <><Icon name="warning" size={12} /> Ошибка</>}
                         {saveStatus === 'idle'   && '—'}
                     </span>
+                    {/* Гость-соавтор (приглашённый по ссылке) НЕ может менять
+                        настройки/сохранять/публиковать — это делает только владелец. */}
+                    {isInvitedGuest ? (
+                        <span style={{
+                            display: 'inline-flex', alignItems: 'center', gap: 6,
+                            padding: '6px 12px', borderRadius: 8,
+                            background: 'rgba(92,214,138,0.15)', color: '#5cd68a',
+                            font: '600 12px system-ui',
+                        }} title="Ты редактируешь вместе с автором. Сохраняет и публикует автор.">
+                            <Icon name="users" size={13} /> Совместное редактирование
+                        </span>
+                    ) : (
+                    <>
                     <button
                         className={cl.toolbarBtn}
                         onClick={() => setSettingsModalOpen(true)}
@@ -1956,14 +2104,7 @@ const KubikonEditor = () => {
                     >
                         <Icon name="settings" size={13} /> Настройки
                     </button>
-                    <button
-                        className={cl.toolbarBtn}
-                        onClick={() => setSkinManagerOpen(true)}
-                        title="Скины игрока: стартовый скин, магазин, рублики, свои .glb"
-                        style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
-                    >
-                        <Icon name="user-square" size={13} /> Скины
-                    </button>
+                    {/* Кнопка «Скины» переехала в TopRibbon → вкладка «Игра». */}
                     <button className={cl.toolbarBtn} onClick={handleSave}><Icon name="save" size={13} /> Сохранить</button>
                     <button
                         className={cl.toolbarBtn}
@@ -2003,6 +2144,8 @@ const KubikonEditor = () => {
                     >
                         {(publishBan || isCantPublish) ? <><Icon name="hidden" size={13} /> Запрещено</> : <><Icon name="upload" size={13} /> Опубликовать</>}
                     </button>
+                    </>
+                    )}
                     {/* Кнопка баг-репорта в шапке — кликает по скрытой плавающей. */}
                     <button
                         onClick={() => document.querySelector('[data-kubikon-bug-btn]')?.click()}
@@ -2146,6 +2289,10 @@ const KubikonEditor = () => {
                     sceneRef.current?.setSpawnAtCamera();
                     setSpawnEnabledUI(true);
                 }}
+                onSkins={() => setSkinManagerOpen(true)}
+                onInvite={handleInvite}
+                collabActive={collabActive}
+                collabPeers={collabPeers}
                 hasSelection={!!selection}
                 onDuplicate={() => sceneRef.current?.duplicateSelected()}
                 onAlignToFloor={() => sceneRef.current?.alignSelectedToFloor()}
@@ -2783,6 +2930,7 @@ const KubikonEditor = () => {
                         className={cl.canvas}
                         style={{ visibility: activeTabId === 'scene' ? 'visible' : 'hidden' }}
                     />
+                    {/* Кнопка «Пригласить» переехала в TopRibbon → вкладка «Игра» → группа «Вместе». */}
                     {isMaterialPreview && (
                         <div style={{
                             position: 'absolute', top: 10,
@@ -4012,4 +4160,34 @@ const KubikonEditor = () => {
     );
 };
 
+/**
+ * Team Create: слать соавторам точку под мышью на сцене (raycast по pointermove).
+ * Throttle уже внутри collab.sendCursor. Также шлём позицию камеры.
+ */
+function _wireCursorTracking(scene, collab) {
+    try {
+        const canvas = scene.canvas;
+        if (!canvas) return;
+        const onMove = () => {
+            const bScene = scene.scene;
+            if (!bScene) return;
+            try {
+                const pick = bScene.pick(bScene.pointerX, bScene.pointerY);
+                if (pick && pick.hit && pick.pickedPoint) {
+                    collab.sendCursor(pick.pickedPoint.x, pick.pickedPoint.y, pick.pickedPoint.z);
+                }
+            } catch (e) { /* ignore */ }
+            // камера (throttle внутри)
+            try {
+                const c = scene.camera;
+                if (c && c.position) collab.sendCamera(c.position.x, c.position.y, c.position.z);
+            } catch (e) { /* ignore */ }
+        };
+        canvas.addEventListener('pointermove', onMove);
+        // сохраним для снятия (необязательно — canvas живёт с редактором)
+        collab.__cursorHandler = onMove;
+        collab.__cursorCanvas = canvas;
+    } catch (e) { /* ignore */ }
+}
+
 export default KubikonEditor;

src/editor/TopRibbon.jsx

@@ -233,6 +233,7 @@ const TopRibbon = (props) => {
         snap, onSnapChange,
         activeTool, onToolChange,
         isPlaying, onPlayToggle, onSetSpawn,
+        onSkins, onInvite, collabActive, collabPeers,
         hasSelection,
         onDuplicate, onAlignToFloor, onDelete,
         onClearScene,
@@ -431,6 +432,22 @@ const TopRibbon = (props) => {
                                 onClick={onSetSpawn}
                                 title="Поставить точку спавна там где смотрит камера"
                             />
+                            <RibbonBtn
+                                iconName="user-square" label="Скины"
+                                onClick={onSkins}
+                                title="Скины игрока: стартовый скин, магазин, рублики, свои .glb"
+                            />
+                        </Group>
+
+                        {/* Team Create — совместное редактирование. */}
+                        <Group title="Вместе">
+                            <RibbonBtn
+                                iconName="users"
+                                label={collabActive && collabPeers > 0 ? `Вместе (${collabPeers + 1})` : 'Пригласить'}
+                                active={collabActive && collabPeers > 0}
+                                onClick={onInvite}
+                                title="Пригласить друга редактировать игру вместе (Team Create)"
+                            />
                         </Group>
 
                         {/* «Окружение» (время суток / амбиент / музыка) и

src/editor/engine/CollabOverlay.js

@@ -0,0 +1,180 @@
+/**
+ * CollabOverlay — DOM-слой совместного редактирования (Team Create).
+ *
+ * Рисует поверх canvas студии:
+ *   - панель «онлайн» (аватарки-кружки соавторов с цветом и ником);
+ *   - 3D-курсоры соавторов (точка с ником, спроецированная из мировых
+ *     координат в экранные);
+ *   - подсветку чужого выделения (по selectedKey — обводим объект);
+ *   - тосты («объект занят другим», «N присоединился»).
+ *
+ * Самодостаточный (как LoadingScreenOverlay): монтируется на parent canvas,
+ * UI обновляется методами update(...). Кнопка «Пригласить» — снаружи (TopRibbon),
+ * здесь только presence + курсоры.
+ */
+import { Vector3, Matrix } from '@babylonjs/core';
+
+let _cssInjected = false;
+function injectCss() {
+    if (_cssInjected || typeof document === 'undefined') return;
+    _cssInjected = true;
+    const s = document.createElement('style');
+    s.id = 'kbn-collab-css';
+    s.textContent =
+        '.kbnCollabCursor{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:62;transition:left 0.08s linear,top 0.08s linear;will-change:left,top}' +
+        '.kbnCollabDot{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}' +
+        '.kbnCollabName{position:absolute;left:16px;top:-2px;white-space:nowrap;font:600 11px system-ui;color:#fff;padding:1px 6px;border-radius:6px;text-shadow:0 1px 2px rgba(0,0,0,.6)}' +
+        '.kbnCollabBar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:63;display:flex;gap:6px;align-items:center;background:rgba(20,24,38,.78);padding:5px 10px;border-radius:20px;backdrop-filter:blur(6px);font:600 12px system-ui;color:#cdd6e6;pointer-events:auto}' +
+        '.kbnCollabAva{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px system-ui;color:#10131c;border:2px solid rgba(255,255,255,.25)}' +
+        '.kbnCollabToast{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:64;background:rgba(20,24,38,.92);color:#fff;padding:10px 18px;border-radius:10px;font:600 14px system-ui;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .25s}';
+    document.head.appendChild(s);
+}
+
+export class CollabOverlay {
+    constructor(scene) {
+        this.scene = scene;
+        this.root = null;
+        this.barEl = null;
+        this.cursorsEl = null;
+        this.toastEl = null;
+        this._cursors = new Map();   // sessionId → {wrap, dot, name}
+        this._presence = [];
+        this._raf = null;
+    }
+
+    mount() {
+        injectCss();
+        const parent = (this.scene.canvas && this.scene.canvas.parentElement) || document.body;
+        try { if (getComputedStyle(parent).position === 'static') parent.style.position = 'relative'; } catch (e) { /* ignore */ }
+
+        const root = document.createElement('div');
+        root.className = 'kbn-collab-root';
+        root.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:60;overflow:hidden';
+
+        const bar = document.createElement('div');
+        bar.className = 'kbnCollabBar';
+        bar.innerHTML = '<span style="opacity:.8">👥 Соавторы:</span>';
+
+        const cursors = document.createElement('div');
+        cursors.style.cssText = 'position:absolute;inset:0';
+
+        const toast = document.createElement('div');
+        toast.className = 'kbnCollabToast';
+
+        root.appendChild(bar);
+        root.appendChild(cursors);
+        root.appendChild(toast);
+        parent.appendChild(root);
+
+        this.root = root; this.barEl = bar; this.cursorsEl = cursors; this.toastEl = toast;
+        this._startLoop();
+    }
+
+    /** Обновить список соавторов (из StudioCollab.onPresenceChange). */
+    updatePresence(list) {
+        this._presence = list || [];
+        if (!this.barEl) return;
+        // Перерисовать аватарки.
+        const others = this._presence;
+        let html = '<span style="opacity:.8">👥</span>';
+        for (const c of others) {
+            const initial = (c.username || '?').trim().charAt(0).toUpperCase() || '?';
+            const ring = c.me ? 'box-shadow:0 0 0 2px #fff' : '';
+            html += `<div class="kbnCollabAva" title="${escapeHtml(c.username)}${c.isHost ? ' (хост)' : ''}${c.me ? ' — вы' : ''}" style="background:${c.color};${ring}">${escapeHtml(initial)}</div>`;
+        }
+        html += `<span style="opacity:.7;margin-left:4px">${others.length}</span>`;
+        this.barEl.innerHTML = html;
+        // Курсоры пересоберём в loop.
+        this._syncCursorEls();
+    }
+
+    _syncCursorEls() {
+        const present = new Set(this._presence.filter(c => !c.me).map(c => c.sessionId));
+        // удалить ушедших
+        for (const [sid, el] of this._cursors) {
+            if (!present.has(sid)) { try { el.wrap.remove(); } catch (e) { /* ignore */ } this._cursors.delete(sid); }
+        }
+        // добавить новых
+        for (const c of this._presence) {
+            if (c.me) continue;
+            if (!this._cursors.has(c.sessionId)) {
+                const wrap = document.createElement('div');
+                wrap.className = 'kbnCollabCursor';
+                const dot = document.createElement('div');
+                dot.className = 'kbnCollabDot';
+                const name = document.createElement('div');
+                name.className = 'kbnCollabName';
+                wrap.appendChild(dot); wrap.appendChild(name);
+                this.cursorsEl.appendChild(wrap);
+                this._cursors.set(c.sessionId, { wrap, dot, name });
+            }
+            const el = this._cursors.get(c.sessionId);
+            el.dot.style.background = c.color;
+            el.name.style.background = c.color;
+            el.name.textContent = c.username;
+        }
+    }
+
+    /** Каждый кадр проецируем 3D-курсоры соавторов в экранные координаты. */
+    _startLoop() {
+        const tick = () => {
+            this._raf = requestAnimationFrame(tick);
+            if (!this.cursorsEl || !this._presence.length) return;
+            const scene = this.scene.scene;
+            const cam = this.scene.camera;
+            const eng = this.scene.engine;
+            if (!scene || !cam || !eng) return;
+            for (const c of this._presence) {
+                if (c.me) continue;
+                const el = this._cursors.get(c.sessionId);
+                if (!el) continue;
+                const cur = c.cursor;
+                if (!cur || (cur.x === 0 && cur.y === 0 && cur.z === 0)) { el.wrap.style.display = 'none'; continue; }
+                const sp = this._project(cur.x, cur.y, cur.z, scene, cam, eng);
+                if (!sp) { el.wrap.style.display = 'none'; continue; }
+                el.wrap.style.display = 'block';
+                el.wrap.style.left = sp.x + 'px';
+                el.wrap.style.top = sp.y + 'px';
+            }
+        };
+        this._raf = requestAnimationFrame(tick);
+    }
+
+    /** Спроецировать мировую точку в экранные координаты canvas. */
+    _project(x, y, z, scene, cam, eng) {
+        try {
+            const w = eng.getRenderWidth();
+            const h = eng.getRenderHeight();
+            const p = Vector3.Project(
+                new Vector3(x, y, z),
+                Matrix.Identity(),
+                scene.getTransformMatrix(),
+                cam.viewport.toGlobal(w, h)
+            );
+            if (p.z < 0 || p.z > 1) return null; // за камерой
+            // переводим из render-пикселей в css-пиксели canvas
+            const canvas = eng.getRenderingCanvas();
+            const rect = canvas.getBoundingClientRect();
+            const sx = rect.width / w, sy = rect.height / h;
+            return { x: p.x * sx, y: p.y * sy };
+        } catch (e) { return null; }
+    }
+
+    toast(text) {
+        if (!this.toastEl) return;
+        this.toastEl.textContent = text;
+        this.toastEl.style.opacity = '1';
+        clearTimeout(this._toastT);
+        this._toastT = setTimeout(() => { if (this.toastEl) this.toastEl.style.opacity = '0'; }, 2600);
+    }
+
+    dispose() {
+        if (this._raf) cancelAnimationFrame(this._raf);
+        try { this.root?.remove(); } catch (e) { /* ignore */ }
+        this.root = null; this._cursors.clear();
+    }
+}
+
+function escapeHtml(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m]));
+}

src/editor/engine/StudioCollab.js

@@ -0,0 +1,502 @@
+/**
+ * StudioCollab — клиент совместного редактирования (Team Create) для студии.
+ *
+ * Подключается к Colyseus-комнате `studio` (одна на projectId) и:
+ *   1. ОТПРАВЛЯЕТ операции локального юзера (add/move/delete/setColor/...) —
+ *      вызывается из обёрток в KubikonEditor/менеджерах через collab.sendOp(...).
+ *   2. ПРИНИМАЕТ операции других соавторов и применяет их к сцене
+ *      (через applyRemoteOp → менеджеры BabylonScene), с флагом _fromRemote,
+ *      чтобы не отправить их обратно (анти-эхо).
+ *   3. PRESENCE: рисует курсоры/выделение/онлайн-список соавторов
+ *      (через колбэки onPresence — UI-слой подписывается).
+ *   4. SOFT-LOCK: select/deselect объекта; залоченный другим объект не дать
+ *      двигать (onLockRejected колбэк для UI-уведомления).
+ *
+ * Транспорт переиспользует существующий kubikon-realtime (Colyseus 0.16).
+ * В Colyseus 0.16 state-колбэки идут через getStateCallbacks(room) (см.
+ * feedback_colyseus_016_api).
+ */
+import { Client, getStateCallbacks } from 'colyseus.js';
+import { REALTIME_WS } from '../../api/API';
+
+export class StudioCollab {
+    /**
+     * @param {object} scene  — BabylonScene (со всеми менеджерами)
+     * @param {object} opts   — { projectId, token, collabToken?, callbacks }
+     *   callbacks: {
+     *     onConnected({sessionId,color,isHost}), onError(msg), onLeft(),
+     *     onPresenceChange(list), onOpRejected({key,by}),
+     *     onSnapshotRequest(replyFn), onRemoteSnapshot(state), onChat(msg),
+     *   }
+     */
+    constructor(scene, opts = {}) {
+        this.scene = scene;
+        this.projectId = opts.projectId;
+        this.token = opts.token;
+        this.collabToken = opts.collabToken || null;
+        this.cb = opts.callbacks || {};
+        this.room = null;
+        this.client = null;
+        this.sessionId = null;
+        this.color = '#5fd0ff';
+        this.isHost = false;
+        this.connected = false;
+        this._applyingRemote = false;   // флаг анти-эхо
+        this._cursorThrottle = 0;
+        this._camThrottle = 0;
+        this._destroyed = false;
+    }
+
+    /** true если сейчас применяем удалённую операцию (не слать обратно). */
+    get applyingRemote() { return this._applyingRemote; }
+
+    /**
+     * Обернуть методы менеджеров, чтобы ЛЮБОЕ изменение сцены (из любого
+     * UI-пути) транслировалось соавторам. Анти-эхо: при _applyingRemote
+     * (мы применяем чужую операцию) обёртки молчат.
+     *
+     * Перехватываем минимальный набор для MVP:
+     *   PrimitiveManager: addInstance, updateInstance, removeInstance
+     *   ModelManager:     addInstance, removeInstance
+     */
+    installInterceptors() {
+        const self = this;
+        const pm = this.scene.primitiveManager;
+        const mm = this.scene.modelManager;
+        if (pm && !pm.__collabPatched) {
+            pm.__collabPatched = true;
+            const origAdd = pm.addInstance.bind(pm);
+            pm.addInstance = function (type, opts = {}) {
+                const id = origAdd(type, opts);
+                if (id != null && !self._applyingRemote) {
+                    // Шлём полный снимок объекта (с id), чтобы у соавтора создался
+                    // ТОТ ЖЕ instanceId — иначе move-операции не совпадут.
+                    const data = pm.instances?.get?.(id);
+                    const def = serializePrimitive(data, id, type);
+                    self.sendOp({ op: 'add', key: 'primitive:' + id, def });
+                }
+                return id;
+            };
+            const origUpd = pm.updateInstance.bind(pm);
+            pm.updateInstance = function (id, patch) {
+                const r = origUpd(id, patch);
+                if (!self._applyingRemote && patch && typeof patch === 'object') {
+                    self.sendOp(patchToOp('primitive:' + id, patch));
+                }
+                return r;
+            };
+            const origRem = pm.removeInstance.bind(pm);
+            pm.removeInstance = function (id) {
+                const r = origRem(id);
+                if (!self._applyingRemote) self.sendOp({ op: 'delete', key: 'primitive:' + id });
+                return r;
+            };
+        }
+        // BlockManager — синхрон блоков (addBlock/removeBlock).
+        const bm = this.scene.blockManager;
+        if (bm && !bm.__collabPatched) {
+            bm.__collabPatched = true;
+            if (typeof bm.addBlock === 'function') {
+                const origAddB = bm.addBlock.bind(bm);
+                bm.addBlock = function (x, y, z, blockTypeId, color) {
+                    const r = origAddB(x, y, z, blockTypeId, color);
+                    if (!self._applyingRemote) {
+                        self.sendOp({ op: 'blockAdd', x, y, z, blockTypeId, color });
+                    }
+                    return r;
+                };
+            }
+            if (typeof bm.removeBlock === 'function') {
+                const origRemB = bm.removeBlock.bind(bm);
+                bm.removeBlock = function (x, y, z) {
+                    const r = origRemB(x, y, z);
+                    if (!self._applyingRemote) self.sendOp({ op: 'blockRemove', x, y, z });
+                    return r;
+                };
+            }
+        }
+
+        // SelectionManager — берём/снимаем soft-lock при выделении.
+        const sm = this.scene.selectionManager || this.scene.selection;
+        if (sm && !sm.__collabPatched) {
+            sm.__collabPatched = true;
+            const sendSel = () => {
+                if (self._applyingRemote) return;
+                const s = sm._selection;
+                if (s && s.type && s.id != null) {
+                    self.selectObject(s.type + ':' + s.id);
+                } else {
+                    self.deselectObject();
+                }
+            };
+            ['selectByMesh', 'selectPrimitiveById'].forEach((fn) => {
+                if (typeof sm[fn] === 'function') {
+                    const orig = sm[fn].bind(sm);
+                    sm[fn] = function (...a) { const r = orig(...a); sendSel(); return r; };
+                }
+            });
+            if (typeof sm.clear === 'function') {
+                const origClear = sm.clear.bind(sm);
+                sm.clear = function (...a) { const r = origClear(...a); if (!self._applyingRemote) self.deselectObject(); return r; };
+            }
+        }
+        if (mm && !mm.__collabPatched) {
+            mm.__collabPatched = true;
+            const origAddM = mm.addInstance.bind(mm);
+            mm.addInstance = function (modelTypeId, x, y, z, rotationY = 0) {
+                const ret = origAddM(modelTypeId, x, y, z, rotationY);
+                // addInstance модели async → ret это Promise<id>.
+                Promise.resolve(ret).then((id) => {
+                    if (id != null && !self._applyingRemote) {
+                        self.sendOp({ op: 'add', key: 'model:' + id,
+                            def: { __kind: 'model', modelTypeId, x, y, z, rotationY } });
+                    }
+                });
+                return ret;
+            };
+            const origRemM = mm.removeInstance.bind(mm);
+            mm.removeInstance = function (id) {
+                const r = origRemM(id);
+                if (!self._applyingRemote) self.sendOp({ op: 'delete', key: 'model:' + id });
+                return r;
+            };
+        }
+    }
+
+    /** Снять обёртки (при выходе из коллаба восстановить оригиналы — простой флаг). */
+    uninstallInterceptors() {
+        // Оставляем обёртки, но они станут no-op после dispose (connected=false).
+        // Полный un-patch не нужен: sendOp молчит при !connected.
+    }
+
+    async connect() {
+        this.client = new Client(REALTIME_WS);
+        const joinOpts = {
+            projectId: this.projectId,
+            token: this.token,
+        };
+        if (this.collabToken) joinOpts.collabToken = this.collabToken;
+        this.room = await this.client.joinOrCreate('studio', joinOpts);
+        this.connected = true;
+        this.sessionId = this.room.sessionId;
+
+        const room = this.room;
+        // --- сервер сообщил наши параметры ---
+        room.onMessage('joined', (m) => {
+            this.sessionId = m.sessionId;
+            this.color = m.color;
+            this.isHost = !!m.isHost;
+            this.cb.onConnected?.({ sessionId: m.sessionId, color: m.color, isHost: !!m.isHost, role: m.role });
+            // Новый соавтор грузит сцену из БД сам (как при обычном открытии
+            // проекта), дальше догоняет live-операции. Снапшот через комнату НЕ
+            // шлём — большая сцена превышает лимит payload Colyseus (RangeError).
+        });
+
+        // --- входящая операция от другого соавтора ---
+        room.onMessage('op', (m) => {
+            if (!m || m.from === this.sessionId) return;
+            this._applyRemoteOp(m.op);
+        });
+
+        // --- наша операция отклонена (объект залочен) ---
+        room.onMessage('op-rejected', (m) => { this.cb.onOpRejected?.(m); });
+        room.onMessage('select-denied', (m) => { this.cb.onOpRejected?.(m); });
+
+        // --- чат соавторов ---
+        room.onMessage('chat', (m) => { this.cb.onChat?.(m); });
+
+        // --- presence через state ---
+        this._wirePresence();
+
+        room.onLeave(() => { this.connected = false; this.cb.onLeft?.(); });
+        room.onError((code, msg) => { this.cb.onError?.(msg || ('Ошибка ' + code)); });
+
+        return this.room;
+    }
+
+    _wirePresence() {
+        const $ = getStateCallbacks(this.room);
+        const state = this.room.state;
+        const emit = () => {
+            if (this._destroyed) return;
+            const list = [];
+            const col = state && state.collaborators;
+            if (col && typeof col.forEach === 'function') {
+                col.forEach((c, sid) => {
+                    list.push({
+                        sessionId: sid,
+                        me: sid === this.sessionId,
+                        username: c.username,
+                        color: c.color,
+                        cursor: { x: c.cursorX, y: c.cursorY, z: c.cursorZ },
+                        cam: { x: c.camX, y: c.camY, z: c.camZ },
+                        selectedKey: c.selectedKey,
+                        isHost: sid === state.hostSessionId,
+                    });
+                });
+            }
+            this.cb.onPresenceChange?.(list);
+        };
+        // Подписки оборачиваем в try — в Colyseus 0.16 API колбэков для
+        // MapSchema(string) может отличаться от MapSchema(Schema); не валим коннект.
+        try {
+            $(state).collaborators.onAdd((c, _sid) => {
+                try { $(c).onChange(() => emit()); } catch (e) { /* ignore */ }
+                emit();
+            });
+            $(state).collaborators.onRemove(() => emit());
+        } catch (e) { /* ignore */ }
+        try {
+            $(state).locks.onAdd(() => emit());
+            $(state).locks.onRemove(() => emit());
+        } catch (e) { /* ignore */ }
+        emit();
+    }
+
+    // ============ ИСХОДЯЩИЕ ============
+
+    /** Отправить операцию (если подключены и это не эхо удалённой).
+     *  Для непрерывных op (move/rotate/scale) — throttle ~30/сек по ключу,
+     *  чтобы драг гизмо (60fps) не залил комнату. add/delete/setColor — сразу. */
+    sendOp(op) {
+        if (!this.connected || this._applyingRemote) return;
+        const cont = op && (op.op === 'move' || op.op === 'rotate' || op.op === 'scale');
+        if (cont) {
+            const now = Date.now();
+            if (!this._opThrottle) this._opThrottle = {};
+            const tk = op.op + ':' + op.key;
+            if (now - (this._opThrottle[tk] || 0) < 33) {
+                // запомним последнее значение, дошлём в _flushPending через rAF
+                this._pendingOps = this._pendingOps || {};
+                this._pendingOps[tk] = op;
+                this._scheduleFlush();
+                return;
+            }
+            this._opThrottle[tk] = now;
+        }
+        try { this.room.send('op', op); } catch (e) { /* ignore */ }
+    }
+
+    /** Догнать «зажатые» throttle-операции (последнее значение драга — важно
+     *  чтобы финальная позиция точно дошла, а не оборвалась на середине). */
+    _scheduleFlush() {
+        if (this._flushScheduled) return;
+        this._flushScheduled = true;
+        const run = () => {
+            this._flushScheduled = false;
+            const pend = this._pendingOps; this._pendingOps = null;
+            if (!pend || !this.connected) return;
+            const now = Date.now();
+            for (const tk in pend) {
+                const op = pend[tk];
+                this._opThrottle[tk] = now;
+                try { this.room.send('op', op); } catch (e) { /* ignore */ }
+            }
+        };
+        if (typeof requestAnimationFrame === 'function') setTimeout(run, 40);
+        else setTimeout(run, 40);
+    }
+
+    /** Курсор-точка под мышью (throttle ~20/сек). */
+    sendCursor(x, y, z) {
+        if (!this.connected) return;
+        const now = Date.now();
+        if (now - this._cursorThrottle < 50) return;
+        this._cursorThrottle = now;
+        try { this.room.send('cursor', { x, y, z }); } catch (e) { /* ignore */ }
+    }
+
+    sendCamera(x, y, z) {
+        if (!this.connected) return;
+        const now = Date.now();
+        if (now - this._camThrottle < 200) return;
+        this._camThrottle = now;
+        try { this.room.send('camera', { x, y, z }); } catch (e) { /* ignore */ }
+    }
+
+    /** Выделить объект (берёт soft-lock). key = 'primitive:42' / 'model:m3'. */
+    selectObject(key) {
+        if (!this.connected) return;
+        try { this.room.send('select', { key: key || '' }); } catch (e) { /* ignore */ }
+    }
+    deselectObject() {
+        if (!this.connected) return;
+        try { this.room.send('deselect', {}); } catch (e) { /* ignore */ }
+    }
+
+    sendChat(text) {
+        if (!this.connected) return;
+        try { this.room.send('chat', { text }); } catch (e) { /* ignore */ }
+    }
+
+    // ============ ВХОДЯЩИЕ → СЦЕНА ============
+
+    /**
+     * Применить операцию другого соавтора к локальной сцене.
+     * Оборачиваем во флаг _applyingRemote, чтобы обёртки менеджеров НЕ
+     * отправили её обратно в комнату (анти-эхо).
+     */
+    _applyRemoteOp(op) {
+        if (!op || typeof op !== 'object') return;
+        this._applyingRemote = true;
+        try {
+            applyRemoteOp(this.scene, op);
+        } catch (e) {
+            // не валим соединение из-за одной кривой операции
+            // eslint-disable-next-line no-console
+            console.warn('[StudioCollab] applyRemoteOp failed:', op?.op, e);
+        } finally {
+            this._applyingRemote = false;
+        }
+    }
+
+    dispose() {
+        this._destroyed = true;
+        this.connected = false;
+        try { this.room?.leave(true); } catch (e) { /* ignore */ }
+        this.room = null;
+        this.client = null;
+    }
+}
+
+/**
+ * Применить удалённую операцию к сцене через менеджеры BabylonScene.
+ * Каждый тип op маппится на метод менеджера. Если метода нет — тихо
+ * пропускаем (фича-парность движков: на этапе 1 поддерживаем базовый набор).
+ *
+ * Поддерживаемые операции (этап 1):
+ *   add        { kind:'primitive'|'model', def }      — создать объект
+ *   move       { key, x, y, z }                       — переместить
+ *   rotate     { key, rx, ry, rz }                    — повернуть
+ *   scale      { key, sx, sy, sz }                    — масштаб
+ *   setColor   { key, color }                         — цвет
+ *   setProp    { key, prop, value }                   — произвольное свойство
+ *   delete     { key }                                — удалить
+ */
+export function applyRemoteOp(scene, op) {
+    const t = op.op;
+    const pm = scene.primitiveManager;
+    const mm = scene.modelManager;
+    const bm = scene.blockManager;
+    const { kind, id } = parseKey(op.key);
+
+    switch (t) {
+        case 'blockAdd':
+            bm?.addBlock?.(op.x, op.y, op.z, op.blockTypeId, op.color);
+            return;
+        case 'blockRemove':
+            bm?.removeBlock?.(op.x, op.y, op.z);
+            return;
+    }
+    switch (t) {
+        case 'add': {
+            if (op.def?.__kind === 'primitive' && pm?.addInstance) {
+                // addInstance(type, opts) — opts со всеми полями (id восстановим по instanceId).
+                pm.addInstance(op.def.type, op.def);
+            } else if (op.def?.__kind === 'model' && mm?.addInstance) {
+                // ModelManager.addInstance(modelTypeId, x, y, z, rotationY) — позиционно.
+                const d = op.def;
+                mm.addInstance(d.modelTypeId || d.type, d.x, d.y, d.z, d.rotationY || 0);
+            }
+            break;
+        }
+        case 'move': {
+            if (kind === 'primitive') pm?.updateInstance?.(id, { x: op.x, y: op.y, z: op.z });
+            else if (kind === 'model') _moveModel(mm, id, op.x, op.y, op.z);
+            break;
+        }
+        case 'rotate': {
+            if (kind === 'primitive') {
+                pm?.updateInstance?.(id, { rotationX: op.rx, rotationY: op.ry, rotationZ: op.rz });
+            } else if (kind === 'model') {
+                _rotateModel(mm, id, op.ry);
+            }
+            break;
+        }
+        case 'scale': {
+            if (kind === 'primitive') pm?.updateInstance?.(id, { sx: op.sx, sy: op.sy, sz: op.sz });
+            break;
+        }
+        case 'setColor': {
+            if (kind === 'primitive') pm?.updateInstance?.(id, { color: op.color });
+            break;
+        }
+        case 'setProp': {
+            if (kind === 'primitive') { const patch = {}; patch[op.prop] = op.value; pm?.updateInstance?.(id, patch); }
+            break;
+        }
+        case 'delete': {
+            if (kind === 'primitive') pm?.removeInstance?.(id);
+            else if (kind === 'model') mm?.removeInstance?.(id);
+            break;
+        }
+        default:
+            // неизвестная операция — пропускаем (вперёд-совместимость)
+            break;
+    }
+}
+
+/** Переместить модель (нет updateInstance — двигаем rootMesh напрямую). */
+function _moveModel(mm, id, x, y, z) {
+    const inst = mm?.instances?.get?.(id);
+    if (inst?.rootMesh?.position) {
+        inst.rootMesh.position.set(x, y, z);
+        if (inst.data) { inst.data.x = x; inst.data.y = y; inst.data.z = z; }
+        inst.x = x; inst.y = y; inst.z = z;
+    }
+}
+/** Повернуть модель вокруг Y. */
+function _rotateModel(mm, id, ry) {
+    const inst = mm?.instances?.get?.(id);
+    if (inst?.rootMesh && typeof ry === 'number') {
+        inst.rootMesh.rotation = inst.rootMesh.rotation || { x: 0, y: 0, z: 0 };
+        inst.rootMesh.rotation.y = ry;
+        if (inst.data) inst.data.rotationY = ry;
+        inst.rotationY = ry;
+    }
+}
+
+/** Снимок примитива для операции 'add' (с instanceId, чтобы id совпал у всех). */
+function serializePrimitive(data, id, type) {
+    if (!data) return { __kind: 'primitive', type, instanceId: id, id };
+    return {
+        __kind: 'primitive',
+        type: data.type || type,
+        id, instanceId: id,
+        x: data.x, y: data.y, z: data.z,
+        sx: data.sx, sy: data.sy, sz: data.sz,
+        rotationX: data.rotationX, rotationY: data.rotationY, rotationZ: data.rotationZ,
+        color: data.color, material: data.material,
+        name: data.name, anchored: data.anchored, canCollide: data.canCollide,
+        visible: data.visible, mass: data.mass, studDensity: data.studDensity,
+    };
+}
+
+/** Превратить patch updateInstance в конкретную операцию (move/rotate/scale/setColor/setProp). */
+function patchToOp(key, patch) {
+    if ('x' in patch || 'y' in patch || 'z' in patch) {
+        return { op: 'move', key, x: patch.x, y: patch.y, z: patch.z };
+    }
+    if ('rotationX' in patch || 'rotationY' in patch || 'rotationZ' in patch) {
+        return { op: 'rotate', key, rx: patch.rotationX, ry: patch.rotationY, rz: patch.rotationZ };
+    }
+    if ('sx' in patch || 'sy' in patch || 'sz' in patch) {
+        return { op: 'scale', key, sx: patch.sx, sy: patch.sy, sz: patch.sz };
+    }
+    if ('color' in patch) {
+        return { op: 'setColor', key, color: patch.color };
+    }
+    // прочее — generic setProp (берём первый ключ)
+    const k = Object.keys(patch)[0];
+    return { op: 'setProp', key, prop: k, value: patch[k] };
+}
+
+/** 'primitive:42' → {kind:'primitive', id:42}; 'model:m3' → {kind:'model', id:'m3'}. */
+function parseKey(key) {
+    if (typeof key !== 'string' || !key.includes(':')) return { kind: '', id: null };
+    const i = key.indexOf(':');
+    const kind = key.slice(0, i);
+    let id = key.slice(i + 1);
+    if (kind === 'primitive') { const n = Number(id); if (Number.isFinite(n)) id = n; }
+    return { kind, id };
+}