@sequent-org/moodboard 1.4.53 → 1.4.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.53",
+  "version": "1.4.55",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/ApiClient.js

@@ -58,6 +58,10 @@ export class ApiClient {
     async saveBoard(boardId, boardData, options = {}) {
         try {
             const actionType = options?.actionType || 'command_execute';
+            const baseVersion = options?.baseVersion ?? null;
+            const validBaseVersion = (baseVersion !== null && Number.isFinite(Number(baseVersion)) && Number(baseVersion) > 0)
+                ? Number(baseVersion)
+                : null;
             // Поддержка формата core.getBoardData(): { id, boardData, settings }
             const payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
             const payloadSettings = boardData && boardData.settings ? boardData.settings : {};
@@ -130,11 +134,23 @@ export class ApiClient {
                 body: JSON.stringify({
                     moodboardId: boardId,
                     state: cleanedData,
-                    actionType
+                    actionType,
+                    ...(validBaseVersion !== null ? { baseVersion: validBaseVersion } : {})
                 })
             });
 
             if (!response.ok) {
+                // Конфликт версий: бэкенд отверг сохранение, т.к. экземпляр устарел
+                if (response.status === 409) {
+                    let body = {};
+                    try { body = await response.json(); } catch (_) {}
+                    if (body?.code === 'stale_base_version') {
+                        const err = new Error(body.message || 'Версия доски устарела');
+                        err.code = 'stale_base_version';
+                        err.currentVersion = body.currentVersion ?? null;
+                        throw err;
+                    }
+                }
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             

package/src/core/SaveManager.js

@@ -28,6 +28,10 @@ export class SaveManager {
         
         // Состояния сохранения
         this.saveStatus = 'idle'; // idle, saving, saved, error
+
+        // Коллбеки для получения актуальной версии и перезагрузки доски при конфликте версий
+        this._versionGetter = null;
+        this._reloadHandler = null;
         
         this.setupEventListeners();
     }
@@ -38,6 +42,25 @@ export class SaveManager {
     setApiClient(apiClient) {
         this.apiClient = apiClient;
     }
+
+    /**
+     * Регистрирует функцию, возвращающую актуальный номер версии доски (board.historyHeadVersion).
+     * Вызывается перед каждым сохранением и передаётся в payload как baseVersion.
+     * Если функция вернёт null/undefined/NaN — baseVersion не отправляется (новая доска).
+     * @param {() => number|null} fn
+     */
+    setVersionGetter(fn) {
+        this._versionGetter = fn;
+    }
+
+    /**
+     * Регистрирует async-функцию, перезагружающую доску с сервера (loadExistingBoard).
+     * Вызывается при 409 stale_base_version — перечитывает latest, не перезаписывает сервер.
+     * @param {() => Promise<void>} fn
+     */
+    setReloadHandler(fn) {
+        this._reloadHandler = fn;
+    }
     
     /**
      * Настройка обработчиков событий
@@ -156,6 +179,38 @@ export class SaveManager {
                 console.warn('SaveManager: объект с data:/blob: URL пропущен при сохранении:', error.message);
                 return;
             }
+
+            // 409 stale_base_version: экземпляр устарел — нельзя перезаписывать сервер.
+            // Перечитываем latest. Retry исключён — это не transient-ошибка.
+            if (error?.code === 'stale_base_version') {
+                console.warn(
+                    'SaveManager: 409 stale_base_version — версия доски устарела. Перечитываю latest с сервера...',
+                    error.message
+                );
+                if (typeof this._reloadHandler === 'function') {
+                    try {
+                        await this._reloadHandler();
+                        // После перезагрузки сбрасываем кеш: следующее изменение
+                        // сохранится с актуальной версией без ложного дедупа.
+                        this.lastSavedData = null;
+                        this.hasUnsavedChanges = false;
+                        this.updateSaveStatus('saved');
+                        console.warn(
+                            'SaveManager: состояние доски перечитано с сервера. ' +
+                            'Локальное pending-изменение отменено во избежание затирания чужих данных. ' +
+                            'TODO: переприменить pending-изменение поверх свежего состояния.'
+                        );
+                    } catch (reloadErr) {
+                        console.error('SaveManager: ошибка перечитывания после 409:', reloadErr);
+                        this.updateSaveStatus('error', reloadErr.message);
+                    }
+                } else {
+                    console.warn('SaveManager: _reloadHandler не задан — состояние не синхронизировано.');
+                    this.updateSaveStatus('error', error.message);
+                }
+                return; // НЕ вызываем handleSaveError — retry не нужен
+            }
+
             console.error('Ошибка автосохранения:', error);
             this.handleSaveError(error, data);
         } finally {
@@ -179,10 +234,19 @@ export class SaveManager {
      */
     async sendSaveRequest(data) {
         const boardId = data.id || 'default';
+
+        // Актуальная версия — baseVersion для обнаружения конфликтов на сервере.
+        // null означает «новая доска», бэкенд игнорирует поле.
+        const baseVersion = typeof this._versionGetter === 'function'
+            ? this._versionGetter()
+            : null;
+        const validBaseVersion = (baseVersion !== null && Number.isFinite(Number(baseVersion)) && Number(baseVersion) > 0)
+            ? Number(baseVersion)
+            : null;
         
         // Если есть ApiClient, используем его (он автоматически очистит данные изображений)
         if (this.apiClient) {
-            return await this.apiClient.saveBoard(boardId, data);
+            return await this.apiClient.saveBoard(boardId, data, { baseVersion: validBaseVersion });
         }
         
         // Fallback к прямому запросу (без очистки изображений)
@@ -197,7 +261,8 @@ export class SaveManager {
         const requestBody = {
             moodboardId: boardId,
             state: data,
-            actionType: 'command_execute'
+            actionType: 'command_execute',
+            ...(validBaseVersion !== null ? { baseVersion: validBaseVersion } : {})
         };
 
         const response = await fetch(this.options.saveEndpoint, {
@@ -213,6 +278,18 @@ export class SaveManager {
         });
         
         if (!response.ok) {
+            // Конфликт версий: бэкенд отверг сохранение, т.к. экземпляр устарел
+            if (response.status === 409) {
+                let body = {};
+                try { body = await response.json(); } catch (_) {}
+                if (body?.code === 'stale_base_version') {
+                    const err = new Error(body.message || 'Версия доски устарела');
+                    err.code = 'stale_base_version';
+                    err.currentVersion = body.currentVersion ?? null;
+                    throw err;
+                }
+            }
+
             let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
             
             try {
@@ -289,12 +366,13 @@ export class SaveManager {
         }
     }
 
-    _buildSavePayload(boardId, data, csrfToken = undefined) {
+    _buildSavePayload(boardId, data, csrfToken = undefined, baseVersion = null) {
         return {
             moodboardId: boardId,
             state: data,
             actionType: 'command_execute',
-            _token: csrfToken || undefined
+            _token: csrfToken || undefined,
+            ...(baseVersion !== null ? { baseVersion } : {})
         };
     }
     

package/src/grid/BaseGrid.js

@@ -20,6 +20,9 @@ export class BaseGrid {
         this.color = options.color;
         this.opacity = options.opacity;
         this.lineWidth = options.lineWidth;
+        // Эфемерный override цвета сетки (производный от фона доски, не сериализуется).
+        // null — используется штатный цвет/бэнды типа сетки.
+        this.colorOverride = null;
         
         // Размеры области отрисовки
         this.width = options.width || 1920;
@@ -169,6 +172,15 @@ export class BaseGrid {
         this.color = color;
         this.updateVisual();
     }
+
+    /**
+     * Устанавливает override-цвет сетки (производный от фона доски).
+     * @param {number|null} color — int-цвет либо null для сброса к штатному.
+     */
+    setColorOverride(color) {
+        this.colorOverride = (typeof color === 'number' && Number.isFinite(color)) ? color : null;
+        this.updateVisual();
+    }
     
     /**
      * Устанавливает прозрачность

package/src/grid/CrossGrid.js

@@ -38,7 +38,7 @@ export class CrossGrid extends BaseGrid {
         const g = this.graphics;
         // Строго без прозрачности.
         g.alpha = 1;
-        const lineColor = getCrossColor(this._zoom, this.color);
+        const lineColor = this.colorOverride != null ? this.colorOverride : getCrossColor(this._zoom, this.color);
         g.beginFill(lineColor, 1);
 
         const checkpoint = getCrossCheckpointForZoom(this._zoom);

package/src/grid/DotGrid.js

@@ -105,7 +105,7 @@ export class DotGrid extends BaseGrid {
         const zoomPct = checkpoint?.zoomPercent ?? 100;
         const use1px = DOT_1PX_CHECKPOINTS.has(zoomPct);
         const dotSize = use1px ? 0.4 : rawDotSize;
-        const dotColor = getDotColor(this._zoom, this.color);
+        const dotColor = this.colorOverride != null ? this.colorOverride : getDotColor(this._zoom, this.color);
 
         this.graphics.beginFill(dotColor, alpha);
         for (let x = startX; x <= endX; x += stepPx) {

package/src/grid/LineGrid.js

@@ -44,15 +44,21 @@ export class LineGrid extends BaseGrid {
             this.graphics.alpha = this.opacity;
         }
         const state = this.getScreenGridState();
+        // Miro-профиль: по умолчанию нативная пара цветов. Если из палитры пришёл colorOverride
+        // (например светлый фон #f0f6fc с gridColor #d4d4d4), используем его — иначе мелкая сетка
+        // сливается с фоном.
+        const mainColor = (typeof this.colorOverride === 'number' && Number.isFinite(this.colorOverride))
+            ? this._deriveMinorColor(this.colorOverride)
+            : this.color;
         try {
             this.graphics.lineStyle({
                 width: Math.max(1, Math.round(this.lineWidth || 1)),
-                color: this.color,
+                color: mainColor,
                 alpha: 1,
                 alignment: 0
             });
         } catch (_) {
-            this.graphics.lineStyle(Math.max(1, Math.round(this.lineWidth || 1)), this.color, 1);
+            this.graphics.lineStyle(Math.max(1, Math.round(this.lineWidth || 1)), mainColor, 1);
         }
         
         // Основные линии сетки
@@ -160,15 +166,18 @@ export class LineGrid extends BaseGrid {
         const { secondGridStep } = this.getScreenGridState();
         const step = Math.max(1, Math.round(secondGridStep || 0));
         if (step <= 0) return;
+        const bigColor = (typeof this.colorOverride === 'number' && Number.isFinite(this.colorOverride))
+            ? this.colorOverride
+            : this.bigGridColor;
         try {
             this.graphics.lineStyle({
                 width: 1,
-                color: this.bigGridColor,
+                color: bigColor,
                 alpha: this.bigGridOpacity,
                 alignment: 0
             });
         } catch (_) {
-            this.graphics.lineStyle(1, this.bigGridColor, this.bigGridOpacity);
+            this.graphics.lineStyle(1, bigColor, this.bigGridOpacity);
         }
         const b = this.getDrawBounds();
         const worldX = this.viewportTransform?.worldX || 0;
@@ -198,6 +207,18 @@ export class LineGrid extends BaseGrid {
         }
     }
 
+    /**
+     * Цвет мелкой сетки из цвета крупной: на 20 светлее на канал, чтобы крупная (override)
+     * читалась как заметный якорь, а мелкая была тоньше/бледнее. Для #d4d4d4 даёт #e8e8e8.
+     */
+    _deriveMinorColor(bigColor) {
+        const delta = 0x14;
+        const r = Math.min(0xFF, ((bigColor >> 16) & 0xFF) + delta);
+        const g = Math.min(0xFF, ((bigColor >> 8) & 0xFF) + delta);
+        const b = Math.min(0xFF, (bigColor & 0xFF) + delta);
+        return (r << 16) | (g << 8) | b;
+    }
+
     _normalizeAnchor(anchor, stepPx) {
         const step = Math.max(1, Math.round(stepPx));
         return ((Math.round(anchor) % step) + step) % step;

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -1,5 +1,6 @@
 import { Events } from '../../core/events/Events.js';
 import { logMindmapCompoundDebug } from '../../mindmap/MindmapCompoundContract.js';
+import { loadExistingBoard } from './MoodBoardLoadApi.js';
 
 function getSelectTool(board) {
     const toolManager = board?.coreMoodboard?.toolManager;
@@ -115,6 +116,21 @@ export function bindSaveCallbacks(board) {
         return;
     }
 
+    // Прокидываем актуальную версию экземпляра в SaveManager, чтобы payload
+    // содержал baseVersion и бэкенд мог отклонить сохранение устаревшего состояния (409).
+    const saveManager = board.coreMoodboard.saveManager;
+    if (saveManager) {
+        saveManager.setVersionGetter(() => {
+            const v = board.historyHeadVersion ?? board.currentLoadedVersion ?? null;
+            return (v !== null && Number.isFinite(Number(v)) && Number(v) > 0) ? Number(v) : null;
+        });
+
+        // На 409 stale_base_version — перечитываем latest с сервера, не затираем чужие данные.
+        saveManager.setReloadHandler(async () => {
+            await loadExistingBoard(board, null, { fallbackToSeedOnError: false });
+        });
+    }
+
     board.coreMoodboard.eventBus.on('save:success', (data) => {
         const savedVersion = Number(data?.response?.historyVersion);
         if (Number.isFinite(savedVersion) && savedVersion > 0) {

package/src/services/BoardService.js

@@ -16,6 +16,20 @@ export class BoardService {
 		this._destroyed = false;
 		this._lastZoomCursor = null;
 		this._consumeZoomCursorAnchor = false;
+		// Override цвета сетки, производный от фона доски (null — штатный цвет типа сетки).
+		this._gridColorOverride = null;
+	}
+
+	/**
+	 * Устанавливает override цвета сетки от фона доски и применяет к текущей сетке.
+	 * Сохраняется, чтобы переехать на новую сетку при смене её типа.
+	 * @param {number|null} color
+	 */
+	setGridColorOverride(color) {
+		this._gridColorOverride = (typeof color === 'number' && Number.isFinite(color)) ? color : null;
+		if (this.grid && typeof this.grid.setColorOverride === 'function') {
+			this.grid.setColorOverride(this._gridColorOverride);
+		}
 	}
 
 	async init(getCanvasSize) {
@@ -57,6 +71,9 @@ export class BoardService {
 			};
 			try {
 				this.grid = GridFactory.createGrid(type, gridOptions);
+				if (this._gridColorOverride != null && typeof this.grid.setColorOverride === 'function') {
+					this.grid.setColorOverride(this._gridColorOverride);
+				}
 				this.pixi.setGrid(this.grid);
 				this.refreshGridViewport();
 				this.eventBus.emit(Events.UI.GridCurrent, { type });

package/src/services/SettingsApplier.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import { BOARD_PALETTE } from '../ui/boardPalette.js';
 
 export class SettingsApplier {
     constructor(eventBus, pixi, boardService = null, uiRefs = {}) {
@@ -43,6 +44,12 @@ export class SettingsApplier {
                     this.ui.topbar.setPaintButtonHex(this.ui.topbar.mapBoardToBtnHex(boardHex));
                 } catch (_) {}
             }
+            // Цвет сетки производный от фона: для палитры с заданным gridColor — override, иначе сброс.
+            try {
+                if (this.boardService && typeof this.boardService.setGridColorOverride === 'function') {
+                    this.boardService.setGridColorOverride(this._resolveGridColorOverride(bgInt));
+                }
+            } catch (_) {}
         }
 
         // 2) Сетка — применяем только если grid пришёл в partial
@@ -114,6 +121,21 @@ export class SettingsApplier {
     _toHex(intColor) {
         try { return `#${(intColor >>> 0).toString(16).padStart(6, '0')}`.toLowerCase(); } catch (_) { return '#f5f5f5'; }
     }
+
+    /**
+     * Возвращает int-цвет сетки для фона из палитры (если задан gridColor), иначе null.
+     * @param {number|null} bgInt
+     * @returns {number|null}
+     */
+    _resolveGridColorOverride(bgInt) {
+        if (bgInt == null) return null;
+        const hex = this._toHex(bgInt);
+        const entry = BOARD_PALETTE.find((p) => String(p.board).toLowerCase() === hex);
+        if (entry && entry.gridColor) {
+            return this._toIntColor(entry.gridColor);
+        }
+        return null;
+    }
 }
 
 

package/src/ui/boardPalette.js

@@ -4,7 +4,7 @@
  * btnHex — цвет кнопки в Topbar; board — реальный цвет фона canvas.
  */
 export const BOARD_PALETTE = [
-    { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc' },
+    { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc', gridColor: '#d4d4d4' },
     { id: 2, name: 'mint-light',    btnHex: '#E8F5E9', board: '#f8fff7' },
     { id: 3, name: 'peach-light',   btnHex: '#FFF3E0', board: '#fffcf7' },
     { id: 4, name: 'gray-light',    btnHex: '#f5f5f5', board: '#f5f5f5' },

package/src/ui/chat/{Model3dBoardSkeleton.js → BoardSkeleton.js}

@@ -1,22 +1,27 @@
 /**
- * DOM-скелетон 3D-модели на полотне доски.
+ * DOM-скелетон генерируемого объекта на полотне доски.
  *
- * Одна ответственность: показывать анимированную заглушку в том месте,
- * где появится сгенерированная 3D-модель. Не знает про сессию и вьюпорт —
- * экранный прямоугольник ему задаёт ChatWindow (он же держит мировые координаты
- * и пересчитывает позицию при pan/zoom).
+ * Одна ответственность: показывать анимированную заглушку (белая карточка,
+ * бегущий блик, пульсирующая иконка) в том месте, где появится результат
+ * генерации. Не знает про сессию и вьюпорт — экранный прямоугольник ему задаёт
+ * ChatWindow (он же держит мировые координаты и пересчитывает позицию при pan/zoom).
+ *
+ * Используется для 3D-моделей, изображений и видео — иконка и вариант задаются
+ * через конструктор.
  *
  * Lifecycle: attach(container) → setRect(rect)* → enter() → detach() → destroy()
  * attach/detach идемпотентны.
  */
-export class Model3dBoardSkeleton {
+export class BoardSkeleton {
     /**
      * @param {object} [opts]
      * @param {string} [opts.iconSvg] HTML-строка иконки (например ICONS.cube)
+     * @param {string} [opts.variant] Модификатор вида ('3d' | 'image' | 'video')
      */
-    constructor({ iconSvg = '' } = {}) {
+    constructor({ iconSvg = '', variant = '' } = {}) {
         this._el = null;
         this._iconSvg = iconSvg;
+        this._variant = variant;
     }
 
     /**
@@ -26,11 +31,14 @@ export class Model3dBoardSkeleton {
         if (this._el) return;
 
         const el = document.createElement('div');
-        el.className = 'moodboard-chat__3d-skeleton moodboard-chat__3d-skeleton--enter';
+        el.className = 'moodboard-chat__board-skeleton moodboard-chat__board-skeleton--enter';
+        if (this._variant) {
+            el.classList.add(`moodboard-chat__board-skeleton--${this._variant}`);
+        }
 
         if (this._iconSvg) {
             const icon = document.createElement('span');
-            icon.className = 'moodboard-chat__3d-skeleton-icon';
+            icon.className = 'moodboard-chat__board-skeleton-icon';
             icon.innerHTML = this._iconSvg;
             el.appendChild(icon);
         }
@@ -71,8 +79,8 @@ export class Model3dBoardSkeleton {
     /** Запускает анимацию появления. */
     enter() {
         if (!this._el) return;
-        this._el.classList.remove('moodboard-chat__3d-skeleton--enter');
-        this._el.classList.add('moodboard-chat__3d-skeleton--entered');
+        this._el.classList.remove('moodboard-chat__board-skeleton--enter');
+        this._el.classList.add('moodboard-chat__board-skeleton--entered');
     }
 
     /** @returns {boolean} */

package/src/ui/chat/ChatWindow.js

@@ -16,7 +16,7 @@ import { ChatSettingsPopup } from './ChatSettingsPopup.js';
 import { ChatVideoToolbarPills } from './ChatVideoToolbarPills.js';
 import { ChatExtendedPromptModal } from './ChatExtendedPromptModal.js';
 import { Model3dProgressOverlay } from './Model3dProgressOverlay.js';
-import { Model3dBoardSkeleton } from './Model3dBoardSkeleton.js';
+import { BoardSkeleton } from './BoardSkeleton.js';
 import { ICONS, RATIO_ICONS, COUNT_ICONS } from './icons.js';
 
 const CONTENT_TYPE_OPTIONS = [
@@ -237,6 +237,8 @@ export class ChatWindow {
         // Мировые координаты центра скелетона — модель приземлится ровно сюда,
         // независимо от пана/зума во время генерации.
         this._model3dSkeletonWorld = null;
+        this._videoSkeleton = null;
+        this._videoSkeletonWorld = null;
         this._boardImageMessageIds = new Set();
         this._shiftedForImageBatchKeys = new Set();
         this._boardImageShiftHistory = new Map();
@@ -538,6 +540,7 @@ export class ChatWindow {
         if (this._videoUnsubscribe) { this._videoUnsubscribe(); this._videoUnsubscribe = null; }
         this._videoSession?.abort?.();
         this._videoSession = null;
+        this._clearVideoSkeleton();
         this._videoDurationMenu?.destroy();
         this._videoDurationMenu = null;
         this._videoDurationWrapper?.remove();
@@ -851,7 +854,7 @@ export class ChatWindow {
             y: (screenCenterY - (world?.y || 0)) / s
         };
 
-        this._model3dSkeleton = new Model3dBoardSkeleton({ iconSvg: ICONS.cube });
+        this._model3dSkeleton = new BoardSkeleton({ iconSvg: ICONS.cube, variant: '3d' });
         this._model3dSkeleton.attach(this._container ?? document.body);
         this._model3dSkeleton.setRect(this._compute3dSkeletonRect(this._model3dSkeletonWorld), { animate: false });
         this._scheduleAnimationFrame(() => this._model3dSkeleton?.enter());
@@ -871,6 +874,68 @@ export class ChatWindow {
         this._model3dSkeletonWorld = null;
     }
 
+    /**
+     * Экранный прямоугольник скелетона видео из мировых координат центра.
+     * Ширина фиксирована BOARD_IMAGE_WIDTH в world-единицах, высота — по соотношению сторон видео.
+     * @param {{x:number,y:number}} worldCenter
+     */
+    _computeVideoSkeletonRect(worldCenter) {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+        const [wr, hr] = parseFormatRatio(this._videoRatioId);
+        const width = Math.round(BOARD_IMAGE_WIDTH * s);
+        const height = Math.round(width / (wr / hr));
+        const screenX = Math.round(worldCenter.x * s + (world?.x || 0));
+        const screenY = Math.round(worldCenter.y * s + (world?.y || 0));
+        return {
+            left: Math.round(screenX - width / 2),
+            top: Math.round(screenY - height / 2),
+            width,
+            height,
+            radius: Math.max(2, Math.round(12 * s))
+        };
+    }
+
+    _showVideoSkeleton() {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        if (!world) return;
+        const s = world?.scale?.x || 1;
+
+        const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+        const screenCenterX = composerRect
+            ? Math.round(composerRect.left + composerRect.width / 2)
+            : 400;
+        const screenCenterY = composerRect
+            ? Math.round(composerRect.top - 200)
+            : 200;
+
+        this._clearVideoSkeleton();
+
+        this._videoSkeletonWorld = {
+            x: (screenCenterX - (world?.x || 0)) / s,
+            y: (screenCenterY - (world?.y || 0)) / s
+        };
+
+        this._videoSkeleton = new BoardSkeleton({ iconSvg: ICONS.video, variant: 'video' });
+        this._videoSkeleton.attach(this._container ?? document.body);
+        this._videoSkeleton.setRect(this._computeVideoSkeletonRect(this._videoSkeletonWorld), { animate: false });
+        this._scheduleAnimationFrame(() => this._videoSkeleton?.enter());
+    }
+
+    _syncVideoSkeletonToViewport({ disableTransition = false } = {}) {
+        if (!this._videoSkeleton?.isAttached() || !this._videoSkeletonWorld) return;
+        this._videoSkeleton.setRect(
+            this._computeVideoSkeletonRect(this._videoSkeletonWorld),
+            { animate: !disableTransition }
+        );
+    }
+
+    _clearVideoSkeleton() {
+        this._videoSkeleton?.destroy();
+        this._videoSkeleton = null;
+        this._videoSkeletonWorld = null;
+    }
+
     _place3dModelOnBoard(result) {
         if (!this._boardCore?.eventBus) return;
         const { previewBase64, mimeType, modelUrl, format } = result;
@@ -1145,6 +1210,13 @@ export class ChatWindow {
             this._videoUnsubscribe = null;
         }
         this._videoUnsubscribe = this._videoSession.subscribe((state) => this._onVideoState(state));
+
+        try {
+            this._showVideoSkeleton();
+        } catch (e) {
+            console.warn('[ChatWindow] _showVideoSkeleton failed:', e);
+        }
+
         const opts = this._getVideoRequestOptions();
         void this._videoSession.start({ ...opts, prompt: text, referenceImages: attachments?.length ? attachments : undefined });
     }
@@ -1155,6 +1227,7 @@ export class ChatWindow {
         }
         if (state.status === 'done') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
             // Тип объекта «видео» на доске не существует. Событие Events.UI.PasteImageAt
             // ожидает data URL картинки — видео-URL несовместим. Размещение на доске
             // выходит за рамки текущей фазы (нет объекта типа video).
@@ -1166,6 +1239,7 @@ export class ChatWindow {
         }
         if (state.status === 'error') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
             if (this._refs?.errorBlock) {
                 const clean = (state.error || 'Ошибка генерации видео').replace(/^AiClient\.\w+\s*\(\d+\):\s*/, '');
                 this._refs.errorBlock.textContent = clean;
@@ -1174,6 +1248,7 @@ export class ChatWindow {
         }
         if (state.status === 'idle') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
         }
     }
 
@@ -1317,20 +1392,13 @@ export class ChatWindow {
 
             overlay.style.borderRadius = `${Math.max(2, Math.round(12 * s))}px`;
 
-            const fontSize = Math.round(20 * s);
-            const labelLeft = 12 * Math.min(1, s);
-            const labelBottom = 10 * Math.min(1, s);
-            overlay.style.setProperty('--moodboard-chat-pending-label-font-size', `${fontSize}px`);
-            overlay.style.setProperty('--moodboard-chat-pending-label-left', `${labelLeft}px`);
-            overlay.style.setProperty('--moodboard-chat-pending-label-bottom', `${labelBottom}px`);
-
             overlay.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
             overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
 
-            const label = document.createElement('span');
-            label.className = 'moodboard-chat__pending-image-label';
-            label.textContent = 'В процессе...';
-            overlay.appendChild(label);
+            const icon = document.createElement('span');
+            icon.className = 'moodboard-chat__pending-overlay-icon';
+            icon.innerHTML = ICONS.image;
+            overlay.appendChild(icon);
 
             (this._container ?? document.body).appendChild(overlay);
 
@@ -1680,10 +1748,12 @@ export class ChatWindow {
         const onPanUpdate = () => {
             this._syncPendingOverlaysToViewport({ disableTransition: true });
             this._sync3dSkeletonToViewport({ disableTransition: true });
+            this._syncVideoSkeletonToViewport({ disableTransition: true });
         };
         const onViewportChange = () => {
             this._syncPendingOverlaysToViewport({ disableTransition: true, recomputeWorld: false });
             this._sync3dSkeletonToViewport({ disableTransition: true });
+            this._syncVideoSkeletonToViewport({ disableTransition: true });
             // Зум меняет проекцию композера в мир: после него существующее изображение может
             // оказаться под заглушкой. Перепроверяем инвариант сразу, не дожидаясь рендера сессии.
             this._ensureExistingImagesClearOfPending();

package/src/ui/styles/chat.css

@@ -692,29 +692,25 @@
     overflow: hidden;
 }
 
-/* Overlay-заглушка на полотне доски во время генерации изображения */
-@keyframes moodboard-pending-shimmer {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -100% 0; }
-}
-
+/* Overlay-заглушка (скелетон) на полотне доски во время генерации изображения.
+   Тот же вид, что у скелетона 3D/видео: белая карточка, бегущий блик,
+   пульсирующая иконка. Появление — слайдом (нужно для раскладки батча). */
 .moodboard-chat__pending-overlay {
     position: fixed;
+    box-sizing: border-box;
     --moodboard-chat-board-animation-ms: 520ms;
     --moodboard-chat-pending-enter-x: 320px;
-    background: linear-gradient(
-        90deg,
-        #5F7179 0%,
-        #7A8D96 50%,
-        #5F7179 100%
-    );
-    background-size: 200% 100%;
-    animation: moodboard-pending-shimmer 5.76s linear infinite;
+    background: #ffffff;
     border-radius: 12px;
-    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow:
+        0 0 0 1px rgba(17, 24, 39, 0.08),
+        0 8px 24px rgba(15, 23, 42, 0.10);
     overflow: hidden;
     pointer-events: none;
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition:
         left var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
         transform var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
@@ -722,6 +718,21 @@
     will-change: transform, opacity;
 }
 
+/* Бегущий блик по поверхности скелетона */
+.moodboard-chat__pending-overlay::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        100deg,
+        transparent 30%,
+        rgba(17, 24, 39, 0.07) 50%,
+        transparent 70%
+    );
+    background-size: 220% 100%;
+    animation: moodboard-chat-skeleton-sweep 1.6s linear infinite;
+}
+
 .moodboard-chat__pending-overlay--enter {
     opacity: 0;
     transform: translateX(var(--moodboard-chat-pending-enter-x));
@@ -732,17 +743,19 @@
     transform: translateX(0);
 }
 
-.moodboard-chat__pending-image-label {
-    position: absolute;
-    bottom: var(--moodboard-chat-pending-label-bottom, 10px);
-    left: var(--moodboard-chat-pending-label-left, 12px);
-    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
-    font-size: var(--moodboard-chat-pending-label-font-size, 20px);
-    font-weight: 400;
-    color: #ffffff;
-    pointer-events: none;
-    white-space: nowrap;
-    text-align: left;
+.moodboard-chat__pending-overlay-icon {
+    position: relative;
+    z-index: 1;
+    width: 34%;
+    max-width: 72px;
+    color: #9CA3AF;
+    animation: moodboard-chat-skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+.moodboard-chat__pending-overlay-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
 }
 
 /* ── Прогресс генерации 3D-модели в композере ───────────────────────── */
@@ -845,8 +858,8 @@
     display: none;
 }
 
-/* ── Скелетон 3D-модели на доске ─────────────────────────────────────── */
-.moodboard-chat__3d-skeleton {
+/* ── Скелетон генерируемого объекта на доске (3D / изображение / видео) ─── */
+.moodboard-chat__board-skeleton {
     position: fixed;
     box-sizing: border-box;
     background: #ffffff;
@@ -869,7 +882,7 @@
 }
 
 /* Бегущий блик по поверхности скелетона */
-.moodboard-chat__3d-skeleton::after {
+.moodboard-chat__board-skeleton::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -883,7 +896,7 @@
     animation: moodboard-chat-skeleton-sweep 1.6s linear infinite;
 }
 
-.moodboard-chat__3d-skeleton-icon {
+.moodboard-chat__board-skeleton-icon {
     position: relative;
     z-index: 1;
     width: 34%;
@@ -892,18 +905,18 @@
     animation: moodboard-chat-skeleton-pulse 1.8s ease-in-out infinite;
 }
 
-.moodboard-chat__3d-skeleton-icon svg {
+.moodboard-chat__board-skeleton-icon svg {
     width: 100%;
     height: 100%;
     display: block;
 }
 
-.moodboard-chat__3d-skeleton--enter {
+.moodboard-chat__board-skeleton--enter {
     opacity: 0;
     transform: scale(0.92);
 }
 
-.moodboard-chat__3d-skeleton--entered {
+.moodboard-chat__board-skeleton--entered {
     opacity: 1;
     transform: scale(1);
 }