@sequent-org/moodboard 1.4.72 → 1.4.74

package/package.json

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

package/src/core/flows/ClipboardFlow.js

@@ -296,7 +296,7 @@ export function setupClipboardFlow(core) {
         }
     });
 
-    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name, skipUpload, aiMessageId, objectType, modelUrl, format }) => {
+    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name, skipUpload, aiMessageId, objectType, modelUrl, format, placeholderId }) => {
         if (!src) return;
 
         // Отдельный путь для 3D-скрина: без resolveRevitImagePayload и без загрузки на сервер
@@ -327,7 +327,10 @@ export function setupClipboardFlow(core) {
         }
 
         const uploaded = await ensureServerImage({ src, name, skipUpload });
-        if (!uploaded?.src) return;
+        if (!uploaded?.src) {
+            if (placeholderId) core.removeDropPlaceholder?.(placeholderId);
+            return;
+        }
         const world = core.pixi.worldLayer || core.pixi.app.stage;
         const s = world?.scale?.x || 1;
         const worldX = (x - (world?.x || 0)) / s;
@@ -358,6 +361,10 @@ export function setupClipboardFlow(core) {
                 { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) },
                 properties
             );
+            // Связываем drop-заглушку с объектом: снимется, когда картинка станет видимой.
+            if (placeholderId && createdData?.id) {
+                core.linkDropPlaceholderToObject?.(createdData.id, placeholderId);
+            }
             // data:-URL изображения (AI-генерация) не проходят через SaveManager,
             // поэтому Events.Save.Success никогда не придёт и объект останется скрытым.
             // Раскрываем сразу, минуя ожидание подтверждения сохранения.
@@ -372,10 +379,12 @@ export function setupClipboardFlow(core) {
             img.decoding = 'async';
             img.onload = () => { void placeWithAspect(img.naturalWidth || 0, img.naturalHeight || 0); };
             img.onerror = () => {
+                if (placeholderId) core.removeDropPlaceholder?.(placeholderId);
                 alert('Не удалось загрузить изображение с сервера. Изображение не добавлено.');
             };
             img.src = uploaded.src;
         } catch (_) {
+            if (placeholderId) core.removeDropPlaceholder?.(placeholderId);
             alert('Не удалось загрузить изображение с сервера. Изображение не добавлено.');
         }
     });

package/src/core/index.js

@@ -69,6 +69,11 @@ export class CoreMoodBoard {
         this.gridSnapResolver = new GridSnapResolver(this);
         // Объекты, требующие подтверждения сохранения (image/file), показываем только после save:success.
         this._pendingPersistAckVisibilityIds = new Set();
+
+        // Градиентные заглушки на месте перетащенных картинок (пока идёт аплоад/сохранение).
+        this._dropPlaceholders = new Map(); // placeholderId -> { destroy, timeoutId, objectId }
+        this._dropPlaceholderByObject = new Map(); // objectId -> placeholderId
+        this._dropPlaceholderSeq = 0;
         
         // Связываем SaveManager с ApiClient для правильной обработки изображений
         this.saveManager.setApiClient(this.apiClient);
@@ -490,6 +495,10 @@ export class CoreMoodBoard {
         if (pixiObject) {
             pixiObject.visible = !!visible;
         }
+        // Картинка реально появилась на доске → снимаем её drop-заглушку.
+        if (visible) {
+            this._removeDropPlaceholderForObject(objectId);
+        }
     }
 
     revealPendingObjectsAfterSave() {
@@ -500,6 +509,66 @@ export class CoreMoodBoard {
         this._pendingPersistAckVisibilityIds.clear();
     }
 
+    /**
+     * Регистрирует градиентную заглушку drag-and-drop. Заглушку создаёт вызывающий
+     * код (ToolEventRouter) и добавляет в worldLayer; здесь храним только её lifecycle.
+     * @param {{ destroy: () => void }} entry
+     * @returns {string} placeholderId
+     */
+    registerDropPlaceholder(entry) {
+        if (!entry || typeof entry.destroy !== 'function') return null;
+        const placeholderId = `dph_${++this._dropPlaceholderSeq}`;
+        // Страховка от утечки: если объект так и не появится (ошибка сохранения и т.п.).
+        const timeoutId = setTimeout(() => this.removeDropPlaceholder(placeholderId), 30000);
+        this._dropPlaceholders.set(placeholderId, {
+            destroy: entry.destroy,
+            timeoutId,
+            objectId: null,
+        });
+        return placeholderId;
+    }
+
+    /** Связывает заглушку с созданным объектом; если объект уже видим — снимает сразу. */
+    linkDropPlaceholderToObject(objectId, placeholderId) {
+        if (!placeholderId) return;
+        const entry = this._dropPlaceholders.get(placeholderId);
+        if (!entry) return;
+        entry.objectId = objectId;
+        this._dropPlaceholderByObject.set(objectId, placeholderId);
+        const pixiObject = this.pixi?.objects?.get?.(objectId);
+        if (pixiObject && pixiObject.visible) {
+            this.removeDropPlaceholder(placeholderId);
+        }
+    }
+
+    removeDropPlaceholder(placeholderId) {
+        const entry = this._dropPlaceholders.get(placeholderId);
+        if (!entry) return;
+        this._dropPlaceholders.delete(placeholderId);
+        if (entry.objectId) {
+            this._dropPlaceholderByObject.delete(entry.objectId);
+        }
+        try {
+            if (entry.timeoutId) clearTimeout(entry.timeoutId);
+        } catch (_) { /* no-op */ }
+        try {
+            entry.destroy();
+        } catch (_) { /* no-op */ }
+    }
+
+    _removeDropPlaceholderForObject(objectId) {
+        const placeholderId = this._dropPlaceholderByObject.get(objectId);
+        if (placeholderId) {
+            this.removeDropPlaceholder(placeholderId);
+        }
+    }
+
+    clearDropPlaceholders() {
+        for (const placeholderId of Array.from(this._dropPlaceholders.keys())) {
+            this.removeDropPlaceholder(placeholderId);
+        }
+    }
+
     // === Прикрепления к фреймам ===
     // Логика фреймов перенесена в FrameService
 
@@ -701,7 +770,12 @@ export class CoreMoodBoard {
         
         // Устанавливаем флаг уничтожения
         this.destroyed = true;
-        
+
+        // Снимаем незакрытые drop-заглушки (тикеры/текстуры/ноды)
+        try {
+            this.clearDropPlaceholders();
+        } catch (_) { /* no-op */ }
+
         // Останавливаем ResizeObserver
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -18,6 +18,14 @@ function shouldOpenEditorForObject(objectType) {
         || objectType === 'file';
 }
 
+// Картинки при размещении не выделяем: выделение с попаданием в AI-композер —
+// только осознанный клик пользователя по уже лежащему на мудборде изображению.
+function shouldSelectOnCreate(objectType) {
+    return objectType !== 'image'
+        && objectType !== 'revit-screenshot-img'
+        && objectType !== 'model3d-screenshot-img';
+}
+
 function focusCreatedObject(board, createdObject) {
     if (!board?.coreMoodboard?.eventBus || !createdObject?.id) return;
     const objectType = createdObject?.type || null;
@@ -32,7 +40,7 @@ function focusCreatedObject(board, createdObject) {
     setTimeout(() => {
         board.coreMoodboard.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
         const selectTool = getSelectTool(board);
-        if (typeof selectTool?.setSelection === 'function') {
+        if (shouldSelectOnCreate(objectType) && typeof selectTool?.setSelection === 'function') {
             selectTool.setSelection([createdObject.id]);
         }
         if (shouldOpenEditorForObject(objectType)) {

package/src/objects/MindmapObject.js

@@ -56,9 +56,14 @@ export class MindmapObject {
         const rot = g.rotation || 0;
 
         this._draw();
-        g.pivot.set(Math.floor(this.width / 2), Math.floor(this.height / 2));
-        g.x = Math.round(centerX);
-        g.y = Math.round(centerY);
+        // Точный pivot (size/2, без floor) и точный центр: при нечётной ширине/высоте
+        // floor терял 0.5px, из-за чего капсула смещалась вниз-вправо относительно
+        // бокса объекта (position — целые числа). Рамка выделения строится по боксу
+        // объекта, поэтому во время резайза/редактирования её верх уходил выше капсулы.
+        // top-left = center - pivot = position (целое) → грани попадают в целый пиксель.
+        g.pivot.set(this.width / 2, this.height / 2);
+        g.x = centerX;
+        g.y = centerY;
         g.rotation = rot;
     }
 

package/src/tools/manager/ToolEventRouter.js

@@ -1,5 +1,68 @@
 import { Events } from '../../core/events/Events.js';
 import { ToolManagerGuards } from './ToolManagerGuards.js';
+import { createDropPlaceholder } from '../../utils/dropPlaceholder.js';
+
+/**
+ * Считывает натуральные пропорции файла-картинки локально (без сети), чтобы
+ * заглушка сразу получила тот же размер, что и будущее изображение.
+ * @returns {Promise<number>} aspectRatio (w/h), либо дефолт 3/2 при сбое.
+ */
+function readImageAspectRatio(file) {
+    return new Promise((resolve) => {
+        let url = null;
+        const done = (ar) => {
+            try { if (url) URL.revokeObjectURL(url); } catch (_) { /* no-op */ }
+            resolve(ar);
+        };
+        try {
+            url = URL.createObjectURL(file);
+            const img = new Image();
+            img.onload = () => {
+                const w = img.naturalWidth || 0;
+                const h = img.naturalHeight || 0;
+                done(w > 0 && h > 0 ? w / h : 1.5);
+            };
+            img.onerror = () => done(1.5);
+            img.src = url;
+        } catch (_) {
+            done(1.5);
+        }
+    });
+}
+
+/**
+ * Создаёт градиентную заглушку в worldLayer точно там и того размера,
+ * какими окажется приземлённое изображение (см. ClipboardFlow PasteImageAt:
+ * ширина 300 мировых ед., высота 300/AR, центр в точке дропа + веерный сдвиг).
+ * @returns {Promise<string|null>} placeholderId
+ */
+async function createImageDropPlaceholder(manager, file, baseScreenX, baseScreenY, index) {
+    const core = manager.core;
+    const app = core?.pixi?.app;
+    const world = core?.pixi?.worldLayer || app?.stage;
+    if (!core || !app || !world || typeof core.registerDropPlaceholder !== 'function') {
+        return null;
+    }
+
+    const ar = await readImageAspectRatio(file);
+    const w = 300;
+    const h = Math.max(1, Math.round(w / ar));
+
+    // Тот же экранный сдвиг веером, что и в emitAt (25 px на каждую следующую картинку).
+    const offset = 25 * index;
+    const screenX = baseScreenX + offset;
+    const screenY = baseScreenY + offset;
+    const scale = world?.scale?.x || 1;
+    const worldX = (screenX - (world?.x || 0)) / scale;
+    const worldY = (screenY - (world?.y || 0)) / scale;
+
+    const placeholder = createDropPlaceholder(app, w, h);
+    placeholder.node.x = Math.round(worldX - Math.round(w / 2));
+    placeholder.node.y = Math.round(worldY - Math.round(h / 2));
+    world.addChild(placeholder.node);
+
+    return core.registerDropPlaceholder({ destroy: placeholder.destroy });
+}
 
 function createPointerEvent(manager, event, extras = {}) {
     const rect = manager.container.getBoundingClientRect();
@@ -275,9 +338,10 @@ export class ToolEventRouter {
             return { dx: direction.x * step * ring, dy: direction.y * step * ring };
         };
 
-        const emitAt = (src, name, offsetIndex = 0) => {
+        const emitAt = (src, name, offsetIndex = 0, placeholderId = null) => {
             if (!isCurrentDrop()) {
                 logDropDebug(diagnostics, 'emit_skipped_stale_drop', { route: 'image', offsetIndex });
+                if (placeholderId) manager.core?.removeDropPlaceholder?.(placeholderId);
                 return;
             }
             const offset = 25 * offsetIndex;
@@ -285,7 +349,8 @@ export class ToolEventRouter {
                 x: x + offset,
                 y: y + offset,
                 src,
-                name
+                name,
+                placeholderId
             });
         };
 
@@ -314,6 +379,23 @@ export class ToolEventRouter {
         const imageFiles = limitedFiles.filter((file) => file.type && file.type.startsWith('image/'));
         if (imageFiles.length > 0) {
             logDropDebug(diagnostics, 'route_image_files', { count: imageFiles.length });
+
+            // Мгновенно рисуем градиентные заглушки на местах будущих картинок,
+            // чтобы перекрыть лаг аплоада и подтверждения сохранения.
+            const placeholderIds = await Promise.all(
+                imageFiles.map((file, index) => {
+                    if (!isCurrentDrop()) return null;
+                    return createImageDropPlaceholder(manager, file, x, y, index)
+                        .catch(() => null);
+                })
+            );
+            // Если дроп устарел, пока считали пропорции — снимаем созданные заглушки.
+            if (!isCurrentDrop()) {
+                for (const pid of placeholderIds) {
+                    if (pid) manager.core?.removeDropPlaceholder?.(pid);
+                }
+            }
+
             const imagePlacements = await mapWithConcurrency(imageFiles, 2, async (file, index) => {
                 logDropDebug(diagnostics, 'image_upload_start', {
                     fileName: file.name || 'image',
@@ -327,6 +409,7 @@ export class ToolEventRouter {
                             logDropDebug(diagnostics, 'image_upload_stale_drop_ignored', {
                                 fileName: uploadResult?.name || file.name || 'image'
                             });
+                            if (placeholderIds[index]) manager.core?.removeDropPlaceholder?.(placeholderIds[index]);
                             return null;
                         }
                         logDropDebug(diagnostics, 'image_upload_success', {
@@ -344,6 +427,7 @@ export class ToolEventRouter {
                             diagnostics,
                             { fileName: file.name || 'image' }
                         );
+                        if (placeholderIds[index]) manager.core?.removeDropPlaceholder?.(placeholderIds[index]);
                         return null;
                     }
                 } catch (error) {
@@ -361,12 +445,13 @@ export class ToolEventRouter {
                             message: error?.message || String(error)
                         }
                     );
+                    if (placeholderIds[index]) manager.core?.removeDropPlaceholder?.(placeholderIds[index]);
                     return null;
                 }
             });
             for (const placement of imagePlacements) {
                 if (!placement) continue;
-                emitAt(placement.src, placement.name, placement.index);
+                emitAt(placement.src, placement.name, placement.index, placeholderIds[placement.index]);
             }
             logDropDebug(diagnostics, 'drop_done', { route: 'image_files', itemsProcessed: imageFiles.length });
             return;

package/src/tools/object-tools/selection/MindmapInlineEditorController.js

@@ -315,7 +315,10 @@ export function openMindmapEditor(object, create = false) {
         backdrop.style.height = '100%';
         backdrop.style.display = 'flex';
         backdrop.style.alignItems = 'center';
-        backdrop.style.justifyContent = 'center';
+        // flex-start, а не center: textarea (источник координат каретки) left-aligned,
+        // backdrop должен совпадать с ней по горизонтали, иначе видимый текст уезжает
+        // относительно каретки на короткой строке/placeholder.
+        backdrop.style.justifyContent = 'flex-start';
     }
 
     const initialCssWidth = targetWidth;
@@ -332,16 +335,6 @@ export function openMindmapEditor(object, create = false) {
                     : ((typeof properties.width === 'number' && properties.width > 0) ? properties.width : MINDMAP_LAYOUT.width))
         )
     );
-    const stableBaseWorldHeight = Math.max(
-        1,
-        Math.round(
-            (typeof properties.capsuleBaseHeight === 'number' && properties.capsuleBaseHeight > 0)
-                ? properties.capsuleBaseHeight
-                : ((typeof objectHeight === 'number' && objectHeight > 0)
-                    ? objectHeight
-                    : ((typeof properties.height === 'number' && properties.height > 0) ? properties.height : MINDMAP_LAYOUT.height))
-        )
-    );
     const resizeSession = {
         started: false,
         oldSize: null,
@@ -392,6 +385,13 @@ export function openMindmapEditor(object, create = false) {
         if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
             window.requestAnimationFrame(() => {
                 alignTextareaLineTop();
+                // Каретка позиционируется по textarea.getBoundingClientRect(). После
+                // выравнивания раскладка textarea окончательна — пересчитываем каретку,
+                // иначе в медленном окружении она остаётся в позиции раннего кадра
+                // (когда textarea ещё не сжат/не отцентрован) и «прилипает» к верху капсулы.
+                if (this.textEditor && this.textEditor.caret && this.textEditor.textarea === textarea) {
+                    updateCustomCaret(textarea, this.textEditor.caret);
+                }
             });
         }
     };
@@ -449,9 +449,12 @@ export function openMindmapEditor(object, create = false) {
         const placeholderWidth = measureMindmapTextWidthPx(textarea, measureEl, textarea.placeholder || '');
         const baseCssWidth = Math.max(1, Math.round(stableBaseWorldWidth * getWorldToCssScale()));
         const placeholderCssWidth = Math.max(1, Math.ceil(placeholderWidth + padding.left + padding.right));
+        // Ширина пустого состояния (плейсхолдер/база) — нижняя граница и при вводе,
+        // чтобы капсула не схлопывалась на первой букве, а росла только когда текст длиннее.
+        const emptyStateCssWidth = Math.max(baseCssWidth, placeholderCssWidth);
         const rawNextCssWidth = hasText
-            ? Math.max(1, Math.ceil(textWidth + padding.left + padding.right))
-            : Math.max(baseCssWidth, placeholderCssWidth);
+            ? Math.max(emptyStateCssWidth, Math.ceil(textWidth + padding.left + padding.right))
+            : emptyStateCssWidth;
         const level = properties?.mindmap?.level ?? 0;
         const isRoot = level === 0;
         const minCssW = Math.max(1, Math.round(
@@ -463,7 +466,13 @@ export function openMindmapEditor(object, create = false) {
         const nextCssWidth = Math.max(minCssW, Math.min(maxCssW, rawNextCssWidth));
         const lineCount = getEditorLineCount();
         const lineHeightPx = getEditorLineHeightPx();
-        const baseCssHeight = Math.max(1, Math.round(stableBaseWorldHeight * getWorldToCssScale()));
+        // Высота одной строки капсулы = вертикальный паддинг + line-height — та же формула,
+        // что в статическом слое (MindmapHtmlTextLayer._autoFitNodeWidth: scrollHeight).
+        // Раньше базой служил capsuleBaseHeight (MINDMAP_LAYOUT.height=40), который меньше
+        // паддинга+строки, из-за чего поле сжималось при вводе и «прыгало» обратно на blur.
+        const basePaddingYWorld = Math.max(0, Math.round(properties.paddingY ?? MINDMAP_LAYOUT.paddingY));
+        const paddingYCss = Math.max(0, Math.round(basePaddingYWorld * getWorldToCssScale()));
+        const baseCssHeight = Math.max(1, 2 * paddingYCss + lineHeightPx);
         const nextCssHeight = Math.max(1, Math.ceil(baseCssHeight + (Math.max(1, lineCount) - 1) * lineHeightPx));
 
         const currentCssWidth = Math.max(1, Math.round(parseFloat(wrapper.style.width || `${initialCssWidth}`)));
@@ -844,6 +853,20 @@ export function openMindmapEditor(object, create = false) {
         object,
         textarea,
     });
+
+    // При открытии редактора textarea сжимается до одной строки и центрируется flex-ом
+    // асинхронно; первый расчёт каретки может произойти до устаканивания раскладки
+    // (offsetY ≈ 0 → каретка у верха капсулы). Пересчитываем после двух кадров, когда
+    // геометрия textarea окончательна — независимо от скорости окружения.
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                if (this.textEditor && this.textEditor.caret && this.textEditor.textarea === textarea) {
+                    updateCustomCaret(textarea, this.textEditor.caret);
+                }
+            });
+        });
+    }
 }
 
 export function closeMindmapEditor(commit) {

package/src/tools/object-tools/selection/TextEditorCaretService.js

@@ -115,10 +115,24 @@ export function updateCustomCaret(textarea, caretEl) {
     
     const pos = textarea.selectionStart;
     const coords = getCaretCoordinates(textarea, pos);
-    
+
+    // Смещение textarea относительно родителя каретки (wrapper). В обычном редакторе
+    // textarea прижата к top:0/left:0 wrapper — смещение нулевое. В mindmap-редакторе
+    // textarea центрируется flex-ом и дополнительно сдвигается через transform: translateY,
+    // поэтому без этой компенсации каретка "прилипает" к верхнему левому углу капсулы.
+    let offsetX = 0;
+    let offsetY = 0;
+    const caretParent = caretEl.parentElement;
+    if (caretParent) {
+        const parentRect = caretParent.getBoundingClientRect();
+        const textareaRect = textarea.getBoundingClientRect();
+        offsetX = textareaRect.left - parentRect.left;
+        offsetY = textareaRect.top - parentRect.top;
+    }
+
     // Adjust for scroll
-    const top = coords.top - textarea.scrollTop;
-    const left = coords.left - textarea.scrollLeft;
+    const top = offsetY + coords.top - textarea.scrollTop;
+    const left = offsetX + coords.left - textarea.scrollLeft;
     
     // Calculate width based on font size to match stroke thickness
     const computed = window.getComputedStyle(textarea);

package/src/ui/NotePropertiesPanel.js

@@ -227,6 +227,10 @@ export class NotePropertiesPanel {
             backgroundColor: '#fff',
             cursor: 'pointer',
             minWidth: '140px',
+            // Хост может форсить color-scheme: dark (как futurello), из-за чего
+            // нативный select и его опции рендерятся белым текстом на белом фоне.
+            colorScheme: 'light',
+            color: '#111827',
         });
         this.fontSelect = fontSelect;
 
@@ -249,6 +253,8 @@ export class NotePropertiesPanel {
             option.value = font.value;
             option.textContent = font.name;
             option.style.fontFamily = font.value;
+            option.style.color = '#111827';
+            option.style.backgroundColor = '#fff';
             fontSelect.appendChild(option);
         });
 
@@ -322,7 +328,12 @@ export class NotePropertiesPanel {
             border: '1px solid #ccc',
             borderRadius: '4px',
             fontSize: '11px',
-            textAlign: 'center'
+            textAlign: 'center',
+            // Хост может форсить color-scheme: dark (как futurello) — фиксируем
+            // светлую схему и явные цвета, иначе число становится белым на чёрном.
+            colorScheme: 'light',
+            color: '#111827',
+            backgroundColor: '#fff'
         });
 
         fontSizeInput.addEventListener('change', () => {

package/src/ui/styles/chat.css

@@ -11,7 +11,7 @@
 .moodboard-chat {
     position: absolute;
     left: 50%;
-    bottom: 32px;
+    bottom: 16px;
     transform: translateX(-50%);
     width: min(720px, 96%);
     z-index: 2500;

package/src/ui/styles/workspace.css

@@ -464,8 +464,8 @@
 .mb-text--mindmap {
     display: flex;
     align-items: center;
-    justify-content: center;
-    text-align: center;
+    justify-content: flex-start;
+    text-align: left;
     pointer-events: none;
     cursor: default;
     color: #212121;

package/src/ui/toolbar/ToolbarDialogsController.js

@@ -24,6 +24,28 @@ export class ToolbarDialogsController {
                     return;
                 }
 
+                const isImage = !!(file.type && file.type.startsWith('image/'));
+
+                if (isImage) {
+                    // Изображение, выбранное через диалог вложений, размещаем как картинку
+                    // (тот же путь, что и OS drag-and-drop), а не как файл-карточку.
+                    this.toolbar.eventBus.emit(Events.Place.ImageSelected, {
+                        file: file,
+                        fileName: file.name,
+                        fileSize: file.size,
+                        mimeType: file.type,
+                        properties: {
+                            width: 300,
+                            height: 200
+                        }
+                    });
+
+                    this.toolbar.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });
+                    this.toolbar.placeSelectedButtonId = 'image';
+                    this.toolbar.setActiveToolbarButton('place');
+                    return;
+                }
+
                 // Файл выбран - запускаем режим "призрака"
                 this.toolbar.eventBus.emit(Events.Place.FileSelected, {
                     file: file,

package/src/utils/dropPlaceholder.js

@@ -0,0 +1,141 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Градиентная заглушка, которую показываем в мировом слое на месте будущего
+ * изображения, пока идёт загрузка на сервер и подтверждение сохранения
+ * (OS drag-and-drop). Заглушка живёт в worldLayer, поэтому панится/зумится
+ * вместе с доской и точно совпадает по месту и размеру с приземляемой картинкой.
+ */
+
+function roundRectPath(ctx, x, y, w, h, r) {
+    const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.arcTo(x + w, y, x + w, y + h, radius);
+    ctx.arcTo(x + w, y + h, x, y + h, radius);
+    ctx.arcTo(x, y + h, x, y, radius);
+    ctx.arcTo(x, y, x + w, y, radius);
+    ctx.closePath();
+}
+
+function buildGradientCanvas(w, h, radius) {
+    const canvas = document.createElement('canvas');
+    // Ограничиваем разрешение текстуры: заглушка временная, огромные битмапы не нужны.
+    const maxDim = 1024;
+    const scale = Math.min(1, maxDim / Math.max(w, h));
+    const cw = Math.max(1, Math.round(w * scale));
+    const ch = Math.max(1, Math.round(h * scale));
+    canvas.width = cw;
+    canvas.height = ch;
+
+    const ctx = canvas.getContext('2d');
+    roundRectPath(ctx, 0, 0, cw, ch, radius * scale);
+    ctx.clip();
+
+    const grad = ctx.createLinearGradient(0, 0, cw, ch);
+    grad.addColorStop(0, '#e9edf2');
+    grad.addColorStop(0.5, '#f5f7f9');
+    grad.addColorStop(1, '#dde3ea');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, cw, ch);
+
+    return canvas;
+}
+
+function buildShimmerCanvas(bandW, h) {
+    const canvas = document.createElement('canvas');
+    const cw = Math.max(1, Math.round(bandW));
+    const ch = Math.max(1, Math.round(Math.min(h, 512)));
+    canvas.width = cw;
+    canvas.height = ch;
+
+    const ctx = canvas.getContext('2d');
+    const grad = ctx.createLinearGradient(0, 0, cw, 0);
+    grad.addColorStop(0, 'rgba(255,255,255,0)');
+    grad.addColorStop(0.5, 'rgba(255,255,255,0.55)');
+    grad.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, cw, ch);
+
+    return canvas;
+}
+
+/**
+ * @param {PIXI.Application} app - для тикера shimmer-анимации
+ * @param {number} width - мировая ширина будущего изображения
+ * @param {number} height - мировая высота будущего изображения
+ * @returns {{ node: PIXI.Container, destroy: () => void }}
+ */
+export function createDropPlaceholder(app, width, height) {
+    const w = Math.max(1, Math.round(width));
+    const h = Math.max(1, Math.round(height));
+    const radius = Math.max(4, Math.min(12, Math.min(w, h) * 0.08));
+
+    const container = new PIXI.Container();
+    container.name = 'futurello-drop-placeholder';
+    container.eventMode = 'none';
+    container.interactiveChildren = false;
+
+    const textures = [];
+    let tickerFn = null;
+
+    const baseTexture = PIXI.Texture.from(buildGradientCanvas(w, h, radius));
+    textures.push(baseTexture);
+    const base = new PIXI.Sprite(baseTexture);
+    base.width = w;
+    base.height = h;
+    container.addChild(base);
+
+    try {
+        const bandW = Math.max(48, Math.round(w * 0.35));
+        const shimmerTexture = PIXI.Texture.from(buildShimmerCanvas(bandW, h));
+        textures.push(shimmerTexture);
+        const shimmer = new PIXI.Sprite(shimmerTexture);
+        shimmer.width = bandW;
+        shimmer.height = h;
+        shimmer.x = -bandW;
+        container.addChild(shimmer);
+
+        const mask = new PIXI.Graphics();
+        mask.beginFill(0xffffff, 1);
+        mask.drawRoundedRect(0, 0, w, h, radius);
+        mask.endFill();
+        container.addChild(mask);
+        shimmer.mask = mask;
+
+        const travel = w + bandW;
+        const speed = travel / 72; // ~1.2 c при 60 fps
+        tickerFn = () => {
+            shimmer.x += speed;
+            if (shimmer.x > w) {
+                shimmer.x = -bandW;
+            }
+        };
+        app?.ticker?.add(tickerFn);
+    } catch (_) {
+        // shimmer необязателен — при сбое остаётся статичный градиент
+    }
+
+    const destroy = () => {
+        try {
+            if (tickerFn) {
+                app?.ticker?.remove(tickerFn);
+            }
+        } catch (_) { /* no-op */ }
+        try {
+            if (container.parent) {
+                container.parent.removeChild(container);
+            }
+        } catch (_) { /* no-op */ }
+        try {
+            container.destroy({ children: true });
+        } catch (_) { /* no-op */ }
+        for (const texture of textures) {
+            try {
+                texture.destroy(true);
+            } catch (_) { /* no-op */ }
+        }
+    };
+
+    return { node: container, destroy };
+}