@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/ShapePropertiesPanel.js

@@ -0,0 +1,307 @@
+import { Events } from '../core/events/Events.js';
+import {
+    sep,
+    buildShapeGroup,
+    buildFillGroup,
+    buildBorderGroup,
+    buildRadiusGroup,
+    buildTextGroup,
+} from './shape-properties/ShapePropertiesPanelDom.js';
+import {
+    updateControlsFromObject,
+    updateBorderStyleBtns,
+    setAlign,
+    syncSwatches,
+    pixiToHex,
+} from './shape-properties/ShapePropertiesPanelSync.js';
+import './styles/shape-properties-panel.css';
+
+/**
+ * ShapePropertiesPanel — плавающая панель свойств выделенной фигуры.
+ * Показывается только при одиночном выделении объекта типа 'shape'.
+ * Все изменения эмитятся через Events.Object.StateChanged.
+ * Undo/redo обеспечивает UpdateShapeStyleCommand (фаза 2).
+ */
+export class ShapePropertiesPanel {
+    constructor(eventBus, container, core = null) {
+        this.eventBus  = eventBus;
+        this.container = container;
+        this.core      = core;
+        this.panel     = null;
+        this.currentId = null;
+
+        // Единственный открытый поповер (только один одновременно)
+        this._openPopoverEl = null;
+        this._boundDocClick = this._onDocumentClick.bind(this);
+
+        this._attachEvents();
+        this._createPanel();
+    }
+
+    // ── Публичное API ──────────────────────────────────────────────────────────
+
+    updateFromSelection() {
+        const ids = this.core?.selectTool
+            ? Array.from(this.core.selectTool.selectedObjects || [])
+            : [];
+
+        if (!ids || ids.length !== 1) { this.hide(); return; }
+
+        const id = ids[0];
+        if (this.currentId === id && this.panel && this.panel.style.display !== 'none') return;
+
+        const pixi    = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(id) : null;
+        const isShape = !!(pixi && pixi._mb && pixi._mb.type === 'shape');
+
+        if (isShape) { this.showFor(id); } else { this.hide(); }
+    }
+
+    showFor(objectId) {
+        this.currentId = objectId;
+        if (this.panel) {
+            this.panel.style.display = 'flex';
+            this.reposition();
+            this._updateControlsFromObject();
+        }
+    }
+
+    hide() {
+        this.currentId = null;
+        if (this.panel) this.panel.style.display = 'none';
+        this._closePopover();
+    }
+
+    reposition() {
+        if (!this.panel || !this.currentId || this.panel.style.display === 'none') return;
+
+        const ids = this.core?.selectTool
+            ? Array.from(this.core.selectTool.selectedObjects || [])
+            : [];
+        if (!ids.includes(this.currentId)) { this.hide(); return; }
+
+        const posData  = { objectId: this.currentId, position: null };
+        const sizeData = { objectId: this.currentId, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, posData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        if (!posData.position || !sizeData.size) return;
+
+        const worldLayer  = this.core?.pixi?.worldLayer;
+        const scale       = worldLayer?.scale?.x || 1;
+        const worldX      = worldLayer?.x || 0;
+        const worldY      = worldLayer?.y || 0;
+
+        const screenX      = posData.position.x * scale + worldX;
+        const screenY      = posData.position.y * scale + worldY;
+        const objectWidth  = sizeData.size.width  * scale;
+        const objectHeight = sizeData.size.height * scale;
+
+        const panelW = this.panel.offsetWidth  || 480;
+        const panelH = this.panel.offsetHeight || 80;
+        let panelX = screenX + (objectWidth  / 2) - (panelW / 2);
+        let panelY = screenY - panelH - 16;
+
+        if (panelY < 0) panelY = screenY + objectHeight + 16;
+
+        const cw = this.container.offsetWidth || window.innerWidth;
+        panelX = Math.max(8, Math.min(panelX, cw - panelW - 8));
+        panelY = Math.max(8, panelY);
+
+        this.panel.style.left = `${Math.round(panelX)}px`;
+        this.panel.style.top  = `${Math.round(panelY)}px`;
+    }
+
+    destroy() {
+        this._closePopover();
+        this._cancelRaf();
+
+        if (this._handlers && this.eventBus?.off) {
+            const H = this._handlers;
+            this.eventBus.off(Events.Tool.SelectionAdd,       H.onSelectionAdd);
+            this.eventBus.off(Events.Tool.SelectionRemove,    H.onSelectionRemove);
+            this.eventBus.off(Events.Tool.SelectionClear,     H.onSelectionClear);
+            this.eventBus.off(Events.Object.Deleted,          H.onDeleted);
+            this.eventBus.off(Events.Tool.DragStart,          H.onDragStart);
+            this.eventBus.off(Events.Tool.DragUpdate,         H.onDragUpdate);
+            this.eventBus.off(Events.Tool.DragEnd,            H.onDragEnd);
+            this.eventBus.off(Events.Tool.GroupDragStart,     H.onGroupDragStart);
+            this.eventBus.off(Events.Tool.GroupDragUpdate,    H.onGroupDragUpdate);
+            this.eventBus.off(Events.Tool.GroupDragEnd,       H.onGroupDragEnd);
+            this.eventBus.off(Events.Tool.ResizeUpdate,       H.onResizeUpdate);
+            this.eventBus.off(Events.Tool.RotateUpdate,       H.onRotateUpdate);
+            this.eventBus.off(Events.UI.ZoomPercent,          H.onZoom);
+            this.eventBus.off(Events.Tool.PanUpdate,          H.onPan);
+            this.eventBus.off(Events.Viewport.Changed,        H.onViewportChanged);
+            this.eventBus.off(Events.Tool.Activated,          H.onActivated);
+            this.eventBus.off(Events.Object.StateChanged,     H.onStateChanged);
+            this.eventBus.off(Events.History.Changed,         H.onHistoryChanged);
+            this.eventBus.off(Events.Object.TransformUpdated, H.onTransformUpdated);
+            this._handlers = null;
+        }
+        document.removeEventListener('click', this._boundDocClick);
+
+        if (this.panel?.parentNode) this.panel.parentNode.removeChild(this.panel);
+        this.panel     = null;
+        this.currentId = null;
+    }
+
+    // ── Делегаты для подмодуля Sync ────────────────────────────────────────────
+
+    _updateControlsFromObject() { updateControlsFromObject(this); }
+    _updateBorderStyleBtns(v)   { updateBorderStyleBtns(this, v); }
+    _setAlign(v)                 { setAlign(this, v); }
+    _syncSwatches(key, hex)      { syncSwatches(this[key], hex); }
+    _pixiToHex(pixi)             { return pixiToHex(pixi); }
+
+    // ── Подписки ───────────────────────────────────────────────────────────────
+
+    _attachEvents() {
+        const H = this._handlers = {};
+
+        H.onSelectionAdd    = () => this.updateFromSelection();
+        H.onSelectionRemove = () => this.updateFromSelection();
+        H.onSelectionClear  = () => this.hide();
+        H.onDeleted         = (objectId) => {
+            if (this.currentId && objectId === this.currentId) this.hide();
+        };
+        H.onDragStart       = () => this.hide();
+        H.onDragUpdate      = () => this._repositionThrottled();
+        H.onDragEnd         = () => this.updateFromSelection();
+        H.onGroupDragStart  = () => this.hide();
+        H.onGroupDragUpdate = () => this._repositionThrottled();
+        H.onGroupDragEnd    = () => this.updateFromSelection();
+        H.onResizeUpdate    = () => this._repositionThrottled();
+        H.onRotateUpdate    = () => this._repositionThrottled();
+        H.onZoom            = () => { if (this.currentId) this._repositionThrottled(); };
+        H.onPan             = () => { if (this.currentId) this._repositionThrottled(); };
+        H.onViewportChanged = () => { if (this.currentId) this._repositionThrottled(); };
+        H.onActivated       = ({ tool }) => { if (tool !== 'select') this.hide(); };
+        H.onStateChanged    = ({ objectId }) => {
+            if (this.currentId && objectId === this.currentId &&
+                this.panel?.style.display !== 'none') {
+                this._updateControlsFromObject();
+            }
+        };
+        H.onHistoryChanged  = () => {
+            if (this.currentId && this.panel?.style.display !== 'none') {
+                this._updateControlsFromObject();
+            }
+        };
+        H.onTransformUpdated = ({ objectId }) => {
+            if (this.currentId && objectId === this.currentId &&
+                this.panel?.style.display !== 'none') {
+                this._repositionThrottled();
+            }
+        };
+
+        this.eventBus.on(Events.Tool.SelectionAdd,       H.onSelectionAdd);
+        this.eventBus.on(Events.Tool.SelectionRemove,    H.onSelectionRemove);
+        this.eventBus.on(Events.Tool.SelectionClear,     H.onSelectionClear);
+        this.eventBus.on(Events.Object.Deleted,          H.onDeleted);
+        this.eventBus.on(Events.Tool.DragStart,          H.onDragStart);
+        this.eventBus.on(Events.Tool.DragUpdate,         H.onDragUpdate);
+        this.eventBus.on(Events.Tool.DragEnd,            H.onDragEnd);
+        this.eventBus.on(Events.Tool.GroupDragStart,     H.onGroupDragStart);
+        this.eventBus.on(Events.Tool.GroupDragUpdate,    H.onGroupDragUpdate);
+        this.eventBus.on(Events.Tool.GroupDragEnd,       H.onGroupDragEnd);
+        this.eventBus.on(Events.Tool.ResizeUpdate,       H.onResizeUpdate);
+        this.eventBus.on(Events.Tool.RotateUpdate,       H.onRotateUpdate);
+        this.eventBus.on(Events.UI.ZoomPercent,          H.onZoom);
+        this.eventBus.on(Events.Tool.PanUpdate,          H.onPan);
+        this.eventBus.on(Events.Viewport.Changed,        H.onViewportChanged);
+        this.eventBus.on(Events.Tool.Activated,          H.onActivated);
+        this.eventBus.on(Events.Object.StateChanged,     H.onStateChanged);
+        this.eventBus.on(Events.History.Changed,         H.onHistoryChanged);
+        this.eventBus.on(Events.Object.TransformUpdated, H.onTransformUpdated);
+    }
+
+    // ── Построение DOM ─────────────────────────────────────────────────────────
+
+    _createPanel() {
+        const panel = document.createElement('div');
+        panel.className = 'shape-properties-panel';
+        panel.id = 'shape-properties-panel';
+
+        // Строка 1: форма, заливка, рамка, фаска
+        const row1 = document.createElement('div');
+        row1.className = 'spp-row';
+        row1.appendChild(buildShapeGroup(this));
+        row1.appendChild(sep());
+        const [fillLabel, fillWrap] = buildFillGroup(this);
+        row1.appendChild(fillLabel);
+        row1.appendChild(fillWrap);
+        row1.appendChild(sep());
+        row1.appendChild(buildBorderGroup(this));
+        row1.appendChild(sep());
+        const [rLabel, rGroup] = buildRadiusGroup(this);
+        row1.appendChild(rLabel);
+        row1.appendChild(rGroup);
+        panel.appendChild(row1);
+
+        // Строка 2: текстовые свойства
+        const row2 = document.createElement('div');
+        row2.className = 'spp-row';
+        buildTextGroup(this).forEach(n => row2.appendChild(n));
+        panel.appendChild(row2);
+
+        this.panel = panel;
+        this.container.appendChild(panel);
+    }
+
+    // ── Поповеры ───────────────────────────────────────────────────────────────
+
+    _togglePopover(popoverEl) {
+        if (this._openPopoverEl === popoverEl) {
+            this._closePopover();
+        } else {
+            this._closePopover();
+            popoverEl.style.display = 'block';
+            this._openPopoverEl = popoverEl;
+            setTimeout(() => document.addEventListener('click', this._boundDocClick), 0);
+        }
+    }
+
+    _closePopover() {
+        if (this._openPopoverEl) {
+            this._openPopoverEl.style.display = 'none';
+            this._openPopoverEl = null;
+        }
+        document.removeEventListener('click', this._boundDocClick);
+    }
+
+    _onDocumentClick(e) {
+        if (!this._openPopoverEl || !e.target) return;
+        if (!this._openPopoverEl.contains(e.target) && !this.panel.contains(e.target)) {
+            this._closePopover();
+        }
+    }
+
+    // ── Emit helper ────────────────────────────────────────────────────────────
+
+    _emit(payload) {
+        if (!this.currentId) return;
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            ...payload,
+        });
+    }
+
+    // ── RAF-позиционирование ───────────────────────────────────────────────────
+
+    _repositionThrottled() {
+        if (this._repositionScheduled) return;
+        this._repositionScheduled = true;
+        this._repositionRafId = requestAnimationFrame(() => {
+            this._repositionScheduled = false;
+            this._repositionRafId = null;
+            if (this.panel) this.reposition();
+        });
+    }
+
+    _cancelRaf() {
+        if (this._repositionRafId != null) {
+            cancelAnimationFrame(this._repositionRafId);
+            this._repositionRafId = null;
+        }
+        this._repositionScheduled = false;
+    }
+}

package/src/ui/TextPropertiesPanel.js

@@ -12,12 +12,14 @@ import {
     buildBackgroundColorUpdate,
     buildFontFamilyUpdate,
     buildFontSizeUpdate,
+    buildMarkdownUpdate,
     buildTextColorUpdate,
     getControlValuesFromProperties,
     getFallbackControlValues,
     getObjectGeometry,
     getObjectProperties,
     getSelectedTextObjectId,
+    LINE_HEIGHT_DEFAULT,
     syncPixiTextProperties,
 } from './text-properties/TextPropertiesPanelMapper.js';
 import {
@@ -76,7 +78,6 @@ export class TextPropertiesPanel {
 
     updateFromSelection() {
         if (this.isTextEditing) {
-            this.hide();
             return;
         }
 
@@ -213,6 +214,80 @@ export class TextPropertiesPanel {
         this._updateTextAppearance(this.currentId, { backgroundColor });
     }
 
+    _toggleFormat(prop) {
+        if (!this.currentId) {
+            return;
+        }
+
+        const properties = getObjectProperties(this.eventBus, this.currentId);
+        const newValue = !(properties ? Boolean(properties[prop]) : false);
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { [prop]: newValue } },
+        });
+        this._updateTextAppearance(this.currentId, { [prop]: newValue });
+
+        const btnMap = {
+            bold: this.boldBtn,
+            italic: this.italicBtn,
+            underline: this.underlineBtn,
+            strikethrough: this.strikethroughBtn,
+        };
+        if (btnMap[prop]) {
+            btnMap[prop].classList.toggle('is-active', newValue);
+        }
+    }
+
+    _changeTextAlign(v) {
+        if (!this.currentId) {
+            return;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { textAlign: v } },
+        });
+        this._updateTextAppearance(this.currentId, { textAlign: v });
+    }
+
+    _changeListType(v) {
+        if (!this.currentId) {
+            return;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { listType: v } },
+        });
+        this._updateTextAppearance(this.currentId, { listType: v });
+    }
+
+    _changeLineHeight(n) {
+        if (!this.currentId) {
+            return;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { lineHeight: n } },
+        });
+        this._updateTextAppearance(this.currentId, { lineHeight: n });
+    }
+
+    _changeMarkdown(markdown) {
+        if (!this.currentId) {
+            return;
+        }
+
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: buildMarkdownUpdate(markdown),
+        });
+
+        this._updateTextAppearance(this.currentId, { markdown });
+    }
+
     _updateTextAppearance(objectId, properties) {
         applyTextAppearanceToDom(objectId, properties);
         syncPixiTextProperties(this.eventBus, objectId, properties);
@@ -236,6 +311,19 @@ export class TextPropertiesPanel {
         this.fontSizeSelect.value = values.fontSize;
         this._updateCurrentColorButton(values.color);
         this._updateCurrentBgColorButton(values.backgroundColor);
+        if (this.markdownToggle) {
+            this.markdownToggle.checked = values.markdown;
+        }
+
+        if (this.boldBtn) this.boldBtn.classList.toggle('is-active', values.bold);
+        if (this.italicBtn) this.italicBtn.classList.toggle('is-active', values.italic);
+        if (this.underlineBtn) this.underlineBtn.classList.toggle('is-active', values.underline);
+        if (this.strikethroughBtn) this.strikethroughBtn.classList.toggle('is-active', values.strikethrough);
+        if (this.alignControl) this.alignControl.value = values.textAlign;
+        if (this.listControl) this.listControl.value = values.listType;
+        if (this.lineHeightSlider) {
+            this.lineHeightSlider.value = String(values.lineHeight !== null ? values.lineHeight : LINE_HEIGHT_DEFAULT);
+        }
     }
 
     reposition() {
@@ -277,6 +365,17 @@ export class TextPropertiesPanel {
             return;
         }
 
+        if (typeof event.target.closest === 'function' && event.target.closest('.moodboard-text-editor')) {
+            return;
+        }
+
+        // Клики внутри canvas-контейнера управляются через EventBus (SelectionClear).
+        // Без этой проверки тот же mousedown, который вызвал SelectionAdd → showFor,
+        // немедленно дотекает до capture-listener и закрывает только что открытую панель.
+        if (this.container.contains(event.target)) {
+            return;
+        }
+
         this.container.getBoundingClientRect();
         this.hide();
     }

package/src/ui/Toolbar.js

@@ -6,6 +6,7 @@ import { IconLoader } from '../utils/iconLoader.js';
 import { ToolbarDialogsController } from './toolbar/ToolbarDialogsController.js';
 import { ToolbarPopupsController } from './toolbar/ToolbarPopupsController.js';
 import { ToolbarActionRouter } from './toolbar/ToolbarActionRouter.js';
+import { ReactionsPopupController } from './toolbar/ReactionsPopupController.js';
 import { ToolbarTooltipController } from './toolbar/ToolbarTooltipController.js';
 import { ToolbarStateController } from './toolbar/ToolbarStateController.js';
 import { ToolbarRenderer } from './toolbar/ToolbarRenderer.js';
@@ -27,6 +28,7 @@ export class Toolbar {
 
         this.dialogsController = new ToolbarDialogsController(this);
         this.popupsController = new ToolbarPopupsController(this);
+        this.reactionsController = new ReactionsPopupController(this);
         this.actionRouter = new ToolbarActionRouter(this);
         this.tooltipController = new ToolbarTooltipController(this);
         this.stateController = new ToolbarStateController(this);
@@ -48,7 +50,6 @@ export class Toolbar {
 
         this._toolActivatedHandler = ({ tool }) => {
             this.setActiveToolbarButton(tool);
-            // Draw palette must stay open only while draw tool is active.
             if (tool !== 'draw') {
                 this.closeDrawPopup();
             }
@@ -135,18 +136,21 @@ export class Toolbar {
             const isInsideDrawPopup = this.drawPopupEl && this.drawPopupEl.contains(e.target);
             const isInsideEmojiPopup = this.emojiPopupEl && this.emojiPopupEl.contains(e.target);
             const isInsideFramePopup = this.framePopupEl && this.framePopupEl.contains(e.target);
+            const isInsideReactionsPopup = this.reactionsPopupEl && this.reactionsPopupEl.contains(e.target);
             const isShapesButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--shapes');
             const isDrawButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--pencil');
             const isEmojiButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--emoji');
             const isFrameButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--frame');
+            const isReactionsButton = e.target.closest && e.target.closest('.moodboard-toolbar__button--reactions');
             const isDrawActive = !!(this.element && this.element.querySelector('.moodboard-toolbar__button--pencil.moodboard-toolbar__button--active'));
 
-            if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton && !isInsideFramePopup && !isFrameButton) {
+            if (!isInsideToolbar && !isInsideShapesPopup && !isShapesButton && !isInsideDrawPopup && !isDrawButton && !isInsideEmojiPopup && !isEmojiButton && !isInsideFramePopup && !isFrameButton && !isInsideReactionsPopup && !isReactionsButton) {
                 this.closeShapesPopup();
                 if (!isDrawActive) {
                     this.closeDrawPopup();
                 }
                 this.closeEmojiPopup();
+                this.closeReactionsPopup();
                 this.closeFramePopup();
             }
         };
@@ -251,6 +255,25 @@ export class Toolbar {
         return this.popupsController.closeEmojiPopup();
     }
 
+    /**
+     * Всплывающая панель реакций (UI)
+     */
+    createReactionsPopup() {
+        return this.reactionsController.createReactionsPopup();
+    }
+
+    toggleReactionsPopup(anchorButton) {
+        return this.reactionsController.toggleReactionsPopup(anchorButton);
+    }
+
+    openReactionsPopup(anchorButton) {
+        return this.reactionsController.openReactionsPopup(anchorButton);
+    }
+
+    closeReactionsPopup() {
+        return this.reactionsController.closeReactionsPopup();
+    }
+
     /**
      * Показывает диалог подтверждения очистки холста
      */

package/src/ui/Topbar.js

@@ -16,7 +16,7 @@ export class Topbar {
         this.icons = this.iconLoader.icons;
         // Палитра кнопки заливки и соответствие цвету фона доски
         this._palette = [
-            { id: 1, name: 'default-light', btnHex: '#B3E5FC', board: '#f7fbff' },
+            { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc' },
             { 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' },
@@ -246,7 +246,7 @@ export class Topbar {
         const pop = document.createElement('div');
         pop.className = 'moodboard-topbar__paint-popover';
         // Пять цветов кнопок-палитры и соответствующие цвета фона доски
-        // 1: фон #f7fbff, кнопка #B3E5FC
+        // 1: фон #f0f6fc, кнопка #d6e8f7
         // 2: фон #f8fff7, кнопка #E8F5E9
         // 3: фон #fffcf7, кнопка #FFF3E0
         // 4: фон #f5f5f5, кнопка #f5f5f5

package/src/ui/animation/HoverLiftController.js

@@ -108,11 +108,12 @@ export class HoverLiftController {
         const hasStaticShadow = type === 'image' || type === 'frame';
         const restAlpha = hasStaticShadow ? IMAGE_REST_ALPHA : 0;
         const restDistance = hasStaticShadow ? IMAGE_REST_DISTANCE : 8;
-        // Фрейм — крупный структурный контейнер. Hover-«pop» (scale + подъём)
-        // на нём бессмысленен и создаёт видимый скачок в переходе hover→resize/drag:
-        // объект приподнимается на hover, а в момент нажатия мгновенно
-        // возвращается к базе. Оставляем фрейму только статичную тень, без подъёма.
-        const liftEnabled = type !== 'frame';
+        // Hover-«pop» (scale + подъём) включён в т.ч. для фрейма. Скачок в
+        // переходе hover→resize/drag снимается мгновенным snapBack по событиям
+        // ResizeStart/DragStart/SelectionAdd (см. _snapBack* ниже): к моменту
+        // нажатия объект уже возвращён к базе. Логические габариты фрейма для
+        // resize считаются из state, а не из scaled-pixi, поэтому ресайз с
+        // координатной математикой hover не пересекается.
 
         const shadow = createShadowFilter(restAlpha, restDistance);
         pixiObject.filters = [...(pixiObject.filters || []), shadow];
@@ -129,8 +130,6 @@ export class HoverLiftController {
         };
         this._entries.set(pixiObject, entry);
 
-        if (!liftEnabled) return;
-
         const w = objectData?.width ?? objectData?.properties?.width ?? 100;
         const h = objectData?.height ?? objectData?.properties?.height ?? 100;
         const preset = getPreset(w, h);

package/src/ui/chat/ChatComposer.js

@@ -25,7 +25,12 @@ export class ChatComposer {
         this._statusBar = refs.statusBar ?? null;
         this._handlers = handlers;
         this._listeners = [];
-        /** @type {File[]} */
+        /**
+         * Внутреннее хранилище вложений. `sourceObjectId` нужен для дедупа
+         * reference-картинок, которые приходят из box-select / клика по объекту:
+         * один объект на доске = одно превью в композере.
+         * @type {{ file: File, sourceObjectId: string|null }[]}
+         */
         this._attachments = [];
     }
 
@@ -76,13 +81,54 @@ export class ChatComposer {
         this._textarea.focus();
     }
 
-    addAttachment(file) {
+    /**
+     * @param {File} file
+     * @param {{ sourceObjectId?: string|null }} [options] — `sourceObjectId`
+     *   передаётся для reference-картинок с доски; дубликаты по этому id игнорируются.
+     */
+    addAttachment(file, options = {}) {
         if (!file) return;
-        this._attachments.push(file);
+        const sourceObjectId = options?.sourceObjectId ?? null;
+        if (sourceObjectId && this._attachments.some((entry) => entry.sourceObjectId === sourceObjectId)) {
+            return;
+        }
+        this._attachments.push({ file, sourceObjectId });
         this._renderAttachmentsPreview();
         this._refreshSendState();
     }
 
+    hasAttachmentForObject(sourceObjectId) {
+        if (!sourceObjectId) return false;
+        return this._attachments.some((entry) => entry.sourceObjectId === sourceObjectId);
+    }
+
+    /**
+     * Удаляет превью конкретного объекта доски. Вызывается при снятии фокуса с изображения.
+     * @param {string} sourceObjectId
+     */
+    removeAttachmentForObject(sourceObjectId) {
+        if (!sourceObjectId) return;
+        const before = this._attachments.length;
+        this._attachments = this._attachments.filter((entry) => entry.sourceObjectId !== sourceObjectId);
+        if (this._attachments.length !== before) {
+            this._renderAttachmentsPreview();
+            this._refreshSendState();
+        }
+    }
+
+    /**
+     * Удаляет все превью, добавленные с доски (sourceObjectId !== null).
+     * Файловые вложения (скрепка) не затрагиваются.
+     */
+    removeAllBoardAttachments() {
+        const before = this._attachments.length;
+        this._attachments = this._attachments.filter((entry) => entry.sourceObjectId === null);
+        if (this._attachments.length !== before) {
+            this._renderAttachmentsPreview();
+            this._refreshSendState();
+        }
+    }
+
     destroy() {
         for (const off of this._listeners) off();
         this._listeners = [];
@@ -95,7 +141,12 @@ export class ChatComposer {
         const hasAttachments = this._attachments.length > 0;
         if (!trimmed && !hasAttachments) return;
         if (this._send.dataset.state === 'streaming') return;
-        const attachments = [...this._attachments];
+        const attachments = this._attachments.map((entry) => entry.file);
+        this._textarea.value = '';
+        this._attachments = [];
+        this._resizeTextarea();
+        if (this._attachmentsPreview) this._renderAttachmentsPreview();
+        this._refreshSendState();
         this._handlers.onSubmit?.(trimmed, attachments);
     }
 
@@ -110,7 +161,7 @@ export class ChatComposer {
         const files = Array.from(this._fileInput.files || []);
         if (!files.length) return;
         for (const file of files) {
-            this._attachments.push(file);
+            this._attachments.push({ file, sourceObjectId: null });
         }
         this._fileInput.value = '';
         this._renderAttachmentsPreview();
@@ -134,8 +185,8 @@ export class ChatComposer {
         inputRow?.classList.add('has-attachments');
         this._textarea.placeholder = 'Опишите правку, изменение или стилевое направление эталонного изображения';
         for (let i = 0; i < this._attachments.length; i++) {
-            const file = this._attachments[i];
-            const item = this._buildAttachmentItem(file, i);
+            const entry = this._attachments[i];
+            const item = this._buildAttachmentItem(entry.file, i);
             container.appendChild(item);
         }
     }