@sequent-org/moodboard 1.4.1 → 1.4.3

package/package.json

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

package/src/core/ApiClient.js

@@ -7,7 +7,7 @@ export class ApiClient {
 
     async getBoard(boardId) {
         try {
-            const response = await fetch(`/api/moodboard/${boardId}`, {
+            const response = await fetch(`/api/v2/moodboard/${boardId}`, {
                 method: 'GET',
                 headers: {
                     'Accept': 'application/json',
@@ -23,7 +23,22 @@ export class ApiClient {
             const result = await response.json();
             
             if (result.success) {
-                return { data: result.data };
+                const payload = result.data || {};
+                const state = (payload.state && typeof payload.state === 'object')
+                    ? payload.state
+                    : {};
+                return {
+                    data: {
+                        ...state,
+                        objects: Array.isArray(state.objects) ? state.objects : [],
+                        moodboardId: payload.moodboardId || boardId,
+                        name: payload.name || null,
+                        description: payload.description || null,
+                        settings: payload.settings || {},
+                        version: payload.version || null,
+                        meta: { allowEmptyLoad: true },
+                    }
+                };
             } else {
                 throw new Error(result.message || 'Ошибка загрузки доски');
             }
@@ -40,18 +55,46 @@ export class ApiClient {
         }
     }
 
-    async saveBoard(boardId, boardData) {
+    async saveBoard(boardId, boardData, options = {}) {
         try {
-            // Поддержка нового формата: { boardData: {...}, settings: {...} }
-            let payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
-            let payloadSettings = boardData && boardData.settings ? boardData.settings : undefined;
+            const actionType = options?.actionType || 'command_execute';
+            // Поддержка формата core.getBoardData(): { id, boardData, settings }
+            const payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
+            const payloadSettings = boardData && boardData.settings ? boardData.settings : {};
 
             // Фильтруем объекты изображений и файлов - убираем избыточные данные
             const cleanedData = this._cleanObjectData(payloadBoardData);
 
             const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
 
-            const response = await fetch('/api/moodboard/save', {
+            // 1) Метаданные moodboard (settings/name/description) сохраняем отдельно.
+            // Ошибка метаданных не должна блокировать сохранение контента в истории.
+            try {
+                const metadataResponse = await fetch('/api/v2/moodboard/metadata/save', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken,
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    credentials: 'same-origin',
+                    body: JSON.stringify({
+                        moodboardId: boardId,
+                        name: cleanedData?.name || null,
+                        description: cleanedData?.description ?? null,
+                        settings: payloadSettings || {}
+                    })
+                });
+                if (!metadataResponse.ok) {
+                    console.warn(`ApiClient: metadata/save вернул HTTP ${metadataResponse.status}`);
+                }
+            } catch (metadataError) {
+                console.warn('ApiClient: metadata/save завершился с ошибкой:', metadataError);
+            }
+
+            // 2) Контент (state) сохраняем append-only в history.
+            const response = await fetch('/api/v2/moodboard/history/save', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -61,9 +104,9 @@ export class ApiClient {
                 },
                 credentials: 'same-origin',
                 body: JSON.stringify({
-                    boardId: boardId,
-                    boardData: cleanedData,
-                    settings: payloadSettings
+                    moodboardId: boardId,
+                    state: cleanedData,
+                    actionType
                 })
             });
 
@@ -74,9 +117,15 @@ export class ApiClient {
             const result = await response.json();
             
             if (result.success) {
-                return { success: true, data: result };
+                return {
+                    success: true,
+                    deduplicated: !!result.deduplicated,
+                    historyVersion: result.historyVersion,
+                    moodboardId: result.moodboardId || boardId,
+                    data: result
+                };
             } else {
-                throw new Error(result.message || 'Ошибка сохранения доски');
+                throw new Error(result.message || 'Ошибка сохранения истории moodboard');
             }
         } catch (error) {
             console.error('ApiClient: Ошибка сохранения доски:', error);

package/src/core/HistoryManager.js

@@ -18,8 +18,6 @@ export class HistoryManager {
         // Флаг для предотвращения зацикливания при undo/redo
         this.isExecutingCommand = false;
         this._listenersAttached = false;
-        this._onUndo = () => this.undo();
-        this._onRedo = () => this.redo();
         this._onDebug = () => this.debugHistory();
 
         this.initEventListeners();
@@ -28,10 +26,6 @@ export class HistoryManager {
     initEventListeners() {
         if (this._listenersAttached) return;
         this._listenersAttached = true;
-        // Слушаем события клавиатуры
-        this.eventBus.on(Events.Keyboard.Undo, this._onUndo);
-        this.eventBus.on(Events.Keyboard.Redo, this._onRedo);
-
         // Для отладки
         this.eventBus.on(Events.History.Debug, this._onDebug);
     }
@@ -253,8 +247,6 @@ export class HistoryManager {
      */
     destroy() {
         this.clear();
-        this.eventBus.off(Events.Keyboard.Undo, this._onUndo);
-        this.eventBus.off(Events.Keyboard.Redo, this._onRedo);
         this.eventBus.off(Events.History.Debug, this._onDebug);
         this._listenersAttached = false;
     }

package/src/core/SaveManager.js

@@ -8,22 +8,14 @@ export class SaveManager {
         this.eventBus = eventBus;
         this.apiClient = null; // Будет установлен позже через setApiClient
         this.options = {
-            // Фиксированные настройки автосохранения данных
+            // Сохранение выполняется только по событиям изменения контента.
             autoSave: true,
-            // Уменьшенная задержка, чтобы изменения чаще успевали сохраняться
-            // (раньше было 1500 мс)
-            saveDelay: 400,
             maxRetries: 3,
             retryDelay: 1000,
-            periodicSaveInterval: 30000, // Периодическое сохранение каждые 30 сек
-
-            // Фоновая отправка при закрытии вкладки/перезагрузке страницы
-            // (используется navigator.sendBeacon при поддержке браузером)
-            useBeaconOnUnload: true,
 
             // Настраиваемые эндпоинты (берем из options)
-            saveEndpoint: options.saveEndpoint || '/api/moodboard/save',
-            loadEndpoint: options.loadEndpoint || '/api/moodboard/load'
+            saveEndpoint: options.saveEndpoint || '/api/v2/moodboard/history/save',
+            loadEndpoint: options.loadEndpoint || '/api/v2/moodboard'
         };
         
         this.saveTimer = null;
@@ -31,10 +23,8 @@ export class SaveManager {
         this.retryCount = 0;
         this.lastSavedData = null;
         this.hasUnsavedChanges = false;
-        this.periodicSaveTimer = null;
         this._listenersAttached = false;
         this._handlers = {};
-        this._domHandlers = {};
         
         // Состояния сохранения
         this.saveStatus = 'idle'; // idle, saving, saved, error
@@ -56,95 +46,13 @@ export class SaveManager {
         if (!this.options.autoSave || this._listenersAttached) return;
         this._listenersAttached = true;
 
-        this._handlers.onGridBoardDataChanged = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectCreated = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectUpdated = () => {
+        // Единый триггер сохранения: любое изменение истории команд.
+        // Это покрывает execute/undo/redo и исключает "лишние" save-триггеры.
+        this._handlers.onHistoryChanged = () => {
             this.markAsChanged();
         };
-        this._handlers.onObjectDeleted = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectStateChanged = () => {
-            this.markAsChanged();
-        };
-        
-        // Отслеживаем изменения сетки: не передаём частичные данные в сохранение,
-        // чтобы собрать полный snapshot через getBoardData()
-        this.eventBus.on(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
-        
-        // Отслеживаем создание объектов
-        this.eventBus.on(Events.Object.Created, this._handlers.onObjectCreated);
-        
-        // Отслеживаем изменения объектов
-        this.eventBus.on(Events.Object.Updated, this._handlers.onObjectUpdated);
-        
-        // Отслеживаем удаление объектов
-        this.eventBus.on(Events.Object.Deleted, this._handlers.onObjectDeleted);
-        
-        // Отслеживаем прямые изменения состояния (для Undo/Redo)
-        this.eventBus.on(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
-        
-        // Отслеживание перемещений теперь происходит через команды и state:changed
-        
-        // Сохранение при закрытии страницы (в том числе при резком закрытии окна)
-        this._domHandlers.beforeUnload = (e) => {
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем, чтобы не блокировать закрытие */ }
 
-            // Сообщаем браузеру, что есть незафиксированные изменения
-            // (текст может быть проигнорирован, но событие задержит закрытие на доли секунды)
-            e.preventDefault();
-            e.returnedValue = '';
-            e.returnValue = '';
-            return '';
-        };
-        window.addEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
-
-        // Дополнительно: обработка быстрого ухода со страницы (pagehide надёжнее в части браузеров)
-        this._domHandlers.pageHide = () => {
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (!this.options || this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем */ }
-        };
-        window.addEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
-
-        // Подстраховка на случай, когда вкладка просто уходит в фон без beforeunload/pagehide
-        this._domHandlers.visibilityChange = () => {
-            if (document.visibilityState !== 'hidden') return;
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (!this.options || this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем */ }
-        };
-        document.addEventListener('visibilitychange', this._domHandlers.visibilityChange);
-        
-        // Периодическое автосохранение
-        if (this.options.autoSave) {
-            this.periodicSaveTimer = setInterval(() => {
-                if (this.hasUnsavedChanges && !this.isRequestInProgress) {
-                    this.saveImmediately();
-                }
-            }, this.options.periodicSaveInterval);
-        }
+        this.eventBus.on(Events.History.Changed, this._handlers.onHistoryChanged);
     }
     
     /**
@@ -152,27 +60,14 @@ export class SaveManager {
      */
     markAsChanged() {
         this.hasUnsavedChanges = true;
-        this.scheduleAutoSave();
+        this.saveImmediately();
     }
     
     /**
-     * Запланировать автоматическое сохранение с задержкой
+     * Метод сохранён для совместимости; таймеры больше не используются.
      */
     scheduleAutoSave(data = null) {
-        if (!this.options.autoSave) return;
-        
-        // Отменяем предыдущий таймер
-        if (this.saveTimer) {
-            clearTimeout(this.saveTimer);
-        }
-        
-        // Устанавливаем новый таймер
-        this.saveTimer = setTimeout(() => {
-            this.saveImmediately(data);
-        }, this.options.saveDelay);
-        
-        // Обновляем статус
-        this.updateSaveStatus('pending');
+        this.saveImmediately(data);
     }
     
     /**
@@ -238,6 +133,7 @@ export class SaveManager {
                 // Эмитируем событие успешного сохранения
                 this.eventBus.emit(Events.Save.Success, {
                     data: saveData,
+                    response,
                     timestamp: new Date().toISOString()
                 });
             } else {
@@ -284,8 +180,9 @@ export class SaveManager {
         }
 
         const requestBody = {
-            boardId,
-            boardData: data
+            moodboardId: boardId,
+            state: data,
+            actionType: 'command_execute'
         };
 
         const response = await fetch(this.options.saveEndpoint, {
@@ -324,15 +221,11 @@ export class SaveManager {
         return await response.json();
     }
 
-    /**
-     * Строит единый payload сохранения для всех каналов отправки
-     * (обычный save, beacon, sync XHR fallback).
-     */
     _buildSavePayload(boardId, data, csrfToken = undefined) {
         return {
-            boardId,
-            boardData: data,
-            settings: data?.settings || undefined,
+            moodboardId: boardId,
+            state: data,
+            actionType: 'command_execute',
             _token: csrfToken || undefined
         };
     }
@@ -381,16 +274,18 @@ export class SaveManager {
             const result = await response.json();
             
             if (result.success) {
-                this.lastSavedData = result.data;
+                const payload = result.data || {};
+                const state = payload.state || payload;
+                this.lastSavedData = state;
                 this.hasUnsavedChanges = false;
                 
                 // Эмитируем событие загрузки
                 this.eventBus.emit(Events.Save.Loaded, {
-                    data: result.data,
+                    data: state,
                     timestamp: new Date().toISOString()
                 });
                 
-                return result.data;
+                return state;
             } else {
                 throw new Error(result.message || 'Ошибка загрузки');
             }
@@ -454,76 +349,6 @@ export class SaveManager {
         };
     }
     
-    /**
-     * Синхронно собирает текущие данные для сохранения через EventBus.
-     * Используется в обработчиках закрытия вкладки, где нет времени на ожидание async.
-     */
-    _collectCurrentDataSync() {
-        try {
-            const requestData = { data: null };
-            this.eventBus && this.eventBus.emit(Events.Save.GetBoardData, requestData);
-            return requestData.data || null;
-        } catch (_) {
-            return null;
-        }
-    }
-
-    /**
-     * Отправляет данные в фоне при закрытии вкладки (navigator.sendBeacon),
-     * а при отсутствии поддержки — выполняет синхронный XHR как запасной вариант.
-     */
-    _flushOnUnload() {
-        const data = this._collectCurrentDataSync();
-        if (!data) return;
-
-        const boardId = data.id || 'default';
-        // CSRF токен добавим в тело (для серверов, которые принимают _token из JSON)
-        const csrfToken = (typeof document !== 'undefined')
-            ? (document.querySelector('meta[name="csrf-token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'))
-            : undefined;
-        const payload = this._buildSavePayload(boardId, data, csrfToken);
-
-        const body = JSON.stringify(payload);
-
-        let sent = false;
-        try {
-            if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
-                const blob = new Blob([body], { type: 'application/json' });
-                sent = navigator.sendBeacon(this.options.saveEndpoint, blob);
-            }
-        } catch (_) { /* игнорируем */ }
-
-        if (!sent) {
-            // Фолбэк: синхронный XHR (доступен в beforeunload, но может быть заблокирован политиками браузера)
-            this._flushSyncFallback(data);
-        }
-
-        // Считаем, что попытались сохранить; снимаем флаг, чтобы не спамить повторно
-        this.hasUnsavedChanges = false;
-    }
-
-    /**
-     * Синхронная отправка запроса на сохранение (fallback для устаревших браузеров).
-     */
-    _flushSyncFallback(existingData) {
-        try {
-            const data = existingData || this._collectCurrentDataSync();
-            if (!data) return;
-
-            const boardId = data.id || 'default';
-            const csrfToken = (typeof document !== 'undefined') ? (document.querySelector('meta[name="csrf-token"]').getAttribute('content')) : null;
-
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', this.options.saveEndpoint, false); // синхронно
-            xhr.setRequestHeader('Content-Type', 'application/json');
-            xhr.setRequestHeader('Accept', 'application/json');
-            if (csrfToken) xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
-
-            const payload = this._buildSavePayload(boardId, data, csrfToken || undefined);
-            try { xhr.send(JSON.stringify(payload)); } catch (_) { /* игнорируем */ }
-        } catch (_) { /* игнорируем */ }
-    }
-
     /**
      * Очистка ресурсов
      */
@@ -532,29 +357,11 @@ export class SaveManager {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
         }
-        if (this.periodicSaveTimer) {
-            clearInterval(this.periodicSaveTimer);
-            this.periodicSaveTimer = null;
-        }
-        
-        // Финальное сохранение перед уничтожением
-        if (this.hasUnsavedChanges && this.options.autoSave) {
-            this.saveImmediately();
-        }
-        
-        // Удаляем обработчики событий, передавая исходные callback-ссылки.
-        if (this._handlers.onGridBoardDataChanged) this.eventBus.off(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
-        if (this._handlers.onObjectCreated) this.eventBus.off(Events.Object.Created, this._handlers.onObjectCreated);
-        if (this._handlers.onObjectUpdated) this.eventBus.off(Events.Object.Updated, this._handlers.onObjectUpdated);
-        if (this._handlers.onObjectDeleted) this.eventBus.off(Events.Object.Deleted, this._handlers.onObjectDeleted);
-        if (this._handlers.onObjectStateChanged) this.eventBus.off(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
 
-        if (this._domHandlers.beforeUnload) window.removeEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
-        if (this._domHandlers.pageHide) window.removeEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
-        if (this._domHandlers.visibilityChange) document.removeEventListener('visibilitychange', this._domHandlers.visibilityChange);
+        // Удаляем обработчики событий, передавая исходные callback-ссылки.
+        if (this._handlers.onHistoryChanged) this.eventBus.off(Events.History.Changed, this._handlers.onHistoryChanged);
 
         this._listenersAttached = false;
         this._handlers = {};
-        this._domHandlers = {};
     }
 }

package/src/core/events/Events.js

@@ -51,6 +51,8 @@ export const Events = {
 	UI: {
 		ToolbarAction: 'toolbar:action',
 		UpdateHistoryButtons: 'ui:update-history-buttons',
+		LoadPrevVersion: 'ui:load-prev-version',
+		LoadNextVersion: 'ui:load-next-version',
 		ContextMenuShow: 'ui:contextmenu:show',
 		GridChange: 'ui:grid:change',
 		GridCurrent: 'ui:grid:current',

package/src/core/index.js

@@ -226,13 +226,6 @@ export class CoreMoodBoard {
                     historySize: data.historySize,
                 });
             }
-
-            
-            // Можно здесь обновить состояние кнопок Undo/Redo в UI
-            this.eventBus.emit(Events.UI.UpdateHistoryButtons, {
-                canUndo: data.canUndo,
-                canRedo: data.canRedo
-            });
         });
     }
 

package/src/core/keyboard/KeyboardSelectionActions.js

@@ -10,11 +10,11 @@ export class KeyboardSelectionActions {
         switch (actionId) {
             case 'undo':
                 return () => {
-                    this.eventBus.emit(Events.Keyboard.Undo);
+                    this.eventBus.emit(Events.UI.LoadPrevVersion);
                 };
             case 'redo':
                 return () => {
-                    this.eventBus.emit(Events.Keyboard.Redo);
+                    this.eventBus.emit(Events.UI.LoadNextVersion);
                 };
             case 'select-all':
                 return () => {

package/src/moodboard/DataManager.js

@@ -49,8 +49,9 @@ export class DataManager {
         
 
         
-        // Очищаем доску перед загрузкой
-        this.clearBoard();
+        // Очищаем доску перед загрузкой без команд истории:
+        // загрузка снапшота не должна порождать новые записи истории.
+        this.clearBoard({ silent: true });
 
         // Применяем settings централизованно (если есть апплаер), иначе — старым способом
         try {
@@ -167,8 +168,41 @@ export class DataManager {
     /**
      * Очищает все объекты на доске
      */
-    clearBoard() {
+    clearBoard(options = {}) {
         if (!this.coreMoodboard) return;
+        const silent = options?.silent === true;
+
+        if (silent) {
+            try {
+                const objects = this.coreMoodboard?.state?.state?.objects || [];
+                const ids = objects.map((obj) => obj?.id).filter(Boolean);
+
+                ids.forEach((id) => {
+                    try { this.coreMoodboard.pixi?.removeObject?.(id); } catch (_) {}
+                });
+
+                // Страховка: убрать возможные "висячие" PIXI-объекты.
+                const pixiObjects = this.coreMoodboard?.pixi?.objects;
+                if (pixiObjects && pixiObjects.size > 0) {
+                    for (const [objectId] of pixiObjects) {
+                        try { this.coreMoodboard.pixi.removeObject(objectId); } catch (_) {}
+                    }
+                }
+
+                if (this.coreMoodboard?.state?.state) {
+                    this.coreMoodboard.state.state.objects = [];
+                    this.coreMoodboard.state.state.selectedObjects = [];
+                    this.coreMoodboard.state.state.isDirty = false;
+                }
+
+                if (this.coreMoodboard?.selectTool?.clearSelection) {
+                    this.coreMoodboard.selectTool.clearSelection();
+                }
+                return ids.length;
+            } catch (_) {
+                // fallback на командный путь ниже
+            }
+        }
         
         // 1) Удаляем все объекты, известные состоянию
         const objects = this.coreMoodboard.objects || [];

package/src/moodboard/MoodBoard.js

@@ -37,7 +37,7 @@ export class MoodBoard {
         this.options = {
             theme: 'light',
             boardId: null,
-            apiUrl: '/api/moodboard',
+            apiUrl: '/api/v2/moodboard',
             autoLoad: true,
             onSave: null,
             onLoad: null,
@@ -203,8 +203,8 @@ export class MoodBoard {
     /**
      * Публичный метод для загрузки данных из API
      */
-    async loadFromApi(boardId = null) {
-        await loadMoodBoardFromApi(this, boardId);
+    async loadFromApi(boardId = null, version = null, options = {}) {
+        await loadMoodBoardFromApi(this, boardId, version, options);
     }
     
     /**

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -85,6 +85,48 @@ export function bindToolbarEvents(board) {
             }
         }
     });
+
+    const loadVersion = async (targetVersion) => {
+        const moodboardId = board.options.boardId;
+        if (!moodboardId) return;
+        if (!Number.isFinite(targetVersion) || targetVersion < 1) return;
+        try {
+            await board.loadFromApi(moodboardId, targetVersion, { fallbackToSeedOnError: false });
+
+            // В append-only модели откат/переход по версии фиксируем новой записью,
+            // чтобы дальнейшие изменения шли от нового head и не теряли "будущее".
+            const restoreSnapshot = board.coreMoodboard?.getBoardData?.();
+            if (restoreSnapshot && board.coreMoodboard?.apiClient) {
+                const saveResult = await board.coreMoodboard.apiClient.saveBoard(
+                    moodboardId,
+                    restoreSnapshot,
+                    { actionType: 'history_restore' }
+                );
+                const restoredVersion = Number(saveResult?.historyVersion);
+                if (Number.isFinite(restoredVersion) && restoredVersion > 0) {
+                    board.currentLoadedVersion = restoredVersion;
+                    board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                        canUndo: restoredVersion > 1,
+                        canRedo: false,
+                    });
+                }
+            }
+        } catch (error) {
+            console.warn(`⚠️ Не удалось загрузить версию ${targetVersion}:`, error?.message || error);
+        }
+    };
+
+    board.coreMoodboard.eventBus.on(Events.UI.LoadPrevVersion, () => {
+        const current = Number(board.currentLoadedVersion);
+        if (!Number.isFinite(current) || current <= 1) return;
+        loadVersion(current - 1);
+    });
+
+    board.coreMoodboard.eventBus.on(Events.UI.LoadNextVersion, () => {
+        const current = Number(board.currentLoadedVersion);
+        if (!Number.isFinite(current)) return;
+        loadVersion(current + 1);
+    });
 }
 
 export function bindTopbarEvents(board) {
@@ -112,8 +154,17 @@ export function bindSaveCallbacks(board) {
         return;
     }
 
-    if (typeof board.options.onSave === 'function') {
-        board.coreMoodboard.eventBus.on('save:success', (data) => {
+    board.coreMoodboard.eventBus.on('save:success', (data) => {
+        const savedVersion = Number(data?.response?.historyVersion);
+        if (Number.isFinite(savedVersion) && savedVersion > 0) {
+            board.currentLoadedVersion = savedVersion;
+            board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                canUndo: savedVersion > 1,
+                canRedo: false,
+            });
+        }
+
+        if (typeof board.options.onSave === 'function') {
             try {
                 let screenshot = null;
                 if (board.coreMoodboard.pixi && board.coreMoodboard.pixi.app && board.coreMoodboard.pixi.app.view) {
@@ -129,9 +180,11 @@ export function bindSaveCallbacks(board) {
             } catch (error) {
                 console.warn('⚠️ Ошибка в коллбеке onSave:', error);
             }
-        });
+        }
+    });
 
-        board.coreMoodboard.eventBus.on('save:error', (data) => {
+    board.coreMoodboard.eventBus.on('save:error', (data) => {
+        if (typeof board.options.onSave === 'function') {
             try {
                 board.options.onSave({
                     success: false,
@@ -141,6 +194,6 @@ export function bindSaveCallbacks(board) {
             } catch (error) {
                 console.warn('⚠️ Ошибка в коллбеке onSave:', error);
             }
-        });
-    }
+        }
+    });
 }

package/src/moodboard/integration/MoodBoardLoadApi.js

@@ -1,3 +1,5 @@
+import { Events } from '../../core/events/Events.js';
+
 function getSeedData(board) {
     return board.data || { objects: [] };
 }
@@ -15,7 +17,40 @@ export function getCsrfToken(board) {
         || '';
 }
 
-export async function loadExistingBoard(board) {
+function resolveMoodboardApiBase(board) {
+    const raw = String(board?.options?.apiUrl || '').trim();
+    if (!raw) return '/api/v2/moodboard';
+
+    // Совместимость с legacy конфигом: /api/moodboard -> /api/v2/moodboard
+    if (raw.endsWith('/api/moodboard')) {
+        return raw.replace(/\/api\/moodboard$/, '/api/v2/moodboard');
+    }
+    if (raw.endsWith('/api/moodboard/')) {
+        return raw.replace(/\/api\/moodboard\/$/, '/api/v2/moodboard/');
+    }
+
+    return raw;
+}
+
+function normalizeLoadedPayload(payload, moodboardIdFallback) {
+    const state = (payload?.state && typeof payload.state === 'object')
+        ? payload.state
+        : {};
+    return {
+        ...state,
+        objects: Array.isArray(state.objects) ? state.objects : [],
+        moodboardId: payload?.moodboardId || moodboardIdFallback,
+        name: payload?.name || null,
+        description: payload?.description || null,
+        settings: payload?.settings || {},
+        version: payload?.version || null,
+        // Это загрузка с сервера, поэтому пустое состояние допустимо.
+        meta: { allowEmptyLoad: true },
+    };
+}
+
+export async function loadExistingBoard(board, version = null, options = {}) {
+    const fallbackToSeedOnError = options?.fallbackToSeedOnError !== false;
     try {
         const boardId = board.options.boardId;
 
@@ -27,11 +62,13 @@ export async function loadExistingBoard(board) {
             return;
         }
 
-        console.log(`📦 MoodBoard: загружаем доску ${boardId} с ${board.options.apiUrl}`);
+        const apiBase = resolveMoodboardApiBase(board);
+        console.log(`📦 MoodBoard: загружаем доску ${boardId} с ${apiBase}`);
 
-        const loadUrl = board.options.apiUrl.endsWith('/')
-            ? `${board.options.apiUrl}load/${boardId}`
-            : `${board.options.apiUrl}/load/${boardId}`;
+        const baseUrl = apiBase.endsWith('/')
+            ? `${apiBase}${boardId}`
+            : `${apiBase}/${boardId}`;
+        const loadUrl = Number.isFinite(version) ? `${baseUrl}/${version}` : baseUrl;
 
         const response = await fetch(loadUrl, {
             method: 'GET',
@@ -45,19 +82,38 @@ export async function loadExistingBoard(board) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }
 
-        const boardData = await response.json();
+        const apiResponse = await response.json();
+        const payload = apiResponse?.data || null;
 
-        if (boardData && boardData.data) {
-            console.log('✅ MoodBoard: данные загружены с сервера', boardData.data);
-            board.dataManager.loadData(boardData.data);
-            invokeOnLoad(board, { success: true, data: boardData.data });
+        if (apiResponse?.success && payload) {
+            const normalizedData = normalizeLoadedPayload(payload, boardId);
+            board.currentLoadedVersion = Number(normalizedData.version) || null;
+            console.log('✅ MoodBoard: данные загружены с сервера', normalizedData);
+            board.dataManager.loadData(normalizedData);
+            if (board?.coreMoodboard?.eventBus) {
+                board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                    canUndo: Number(board.currentLoadedVersion) > 1,
+                    // Верхнюю границу версий backend не возвращает, поэтому оставляем переход вперед доступным.
+                    canRedo: true,
+                });
+            }
+            invokeOnLoad(board, { success: true, data: normalizedData });
         } else {
             console.log('📦 MoodBoard: нет данных с сервера, загружаем пустую доску');
             const seedData = getSeedData(board);
             board.dataManager.loadData(seedData);
+            if (board?.coreMoodboard?.eventBus) {
+                board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                    canUndo: false,
+                    canRedo: false,
+                });
+            }
             invokeOnLoad(board, { success: true, data: seedData });
         }
     } catch (error) {
+        if (!fallbackToSeedOnError) {
+            throw error;
+        }
         console.warn('⚠️ MoodBoard: ошибка загрузки доски, создаем новую:', error.message);
         const seedData = getSeedData(board);
         board.dataManager.loadData(seedData);
@@ -65,7 +121,7 @@ export async function loadExistingBoard(board) {
     }
 }
 
-export async function loadFromApi(board, boardId = null) {
+export async function loadFromApi(board, boardId = null, version = null, options = {}) {
     const targetBoardId = boardId || board.options.boardId;
     if (!targetBoardId) {
         throw new Error('boardId не указан');
@@ -75,7 +131,7 @@ export async function loadFromApi(board, boardId = null) {
     board.options.boardId = targetBoardId;
 
     try {
-        await loadExistingBoard(board);
+        await loadExistingBoard(board, version, options);
     } finally {
         board.options.boardId = originalBoardId;
     }

package/src/ui/toolbar/ToolbarActionRouter.js

@@ -9,13 +9,13 @@ export class ToolbarActionRouter {
 
     routeToolbarAction(button, toolType, toolId) {
         if (toolType === 'undo') {
-            this.toolbar.eventBus.emit(Events.Keyboard.Undo);
+            this.toolbar.eventBus.emit(Events.UI.LoadPrevVersion);
             this.toolbar.animateButton(button);
             return true;
         }
 
         if (toolType === 'redo') {
-            this.toolbar.eventBus.emit(Events.Keyboard.Redo);
+            this.toolbar.eventBus.emit(Events.UI.LoadNextVersion);
             this.toolbar.animateButton(button);
             return true;
         }