@sequent-org/moodboard 1.4.51 → 1.4.52

package/package.json

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

package/src/core/bootstrap/CoreInitializer.js

@@ -4,6 +4,7 @@ import { BoardService } from '../../services/BoardService.js';
 import { ZoomPanController } from '../../services/ZoomPanController.js';
 import { ZOrderManager } from '../../services/ZOrderManager.js';
 import { FrameService } from '../../services/FrameService.js';
+import { ImageAttachmentService } from '../../services/ImageAttachmentService.js';
 import { Events } from '../events/Events.js';
 
 export async function initializeCore(core) {
@@ -20,6 +21,8 @@ export async function initializeCore(core) {
         core.zOrder.attach();
         core.frameService = new FrameService(core.eventBus, core.pixi, core.state);
         core.frameService.attach();
+        core.imageAttachmentService = new ImageAttachmentService(core.eventBus, core.pixi, core.state);
+        core.imageAttachmentService.attach();
 
         setupViewportResize(core);
 

package/src/core/flows/ObjectLifecycleFlow.js

@@ -169,12 +169,14 @@ function tryCreateConnectorStyleCommand(core, object, objectId, updates) {
     const { style, start, end } = updates.properties;
 
     // Проверяем, что в updates.properties только style/start/end (и нет посторонних ключей)
-    const allowedKeys = new Set(['style', 'start', 'end', 'locked']);
+    const allowedKeys = new Set(['style', 'start', 'end', 'locked', 'lockMode', 'lockedByFrame']);
     const hasOtherKeys = Object.keys(updates.properties).some(k => !allowedKeys.has(k));
     if (hasOtherKeys) return false;
     // Должно быть хотя бы одно из: style, start, end
     if (!style && start === undefined && end === undefined
-        && updates.properties.locked === undefined) return false;
+        && updates.properties.locked === undefined
+        && updates.properties.lockMode === undefined
+        && updates.properties.lockedByFrame === undefined) return false;
 
     const commandUpdates = {};
     if (style !== undefined) commandUpdates.style = style;

package/src/objects/FrameObject.js

@@ -17,10 +17,10 @@ export class FrameObject {
         this.height = this.objectData.height || 100;
         // Берем стили рамки из CSS-переменных, с дефолтом
         const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
-        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '5') : 5;
         const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
         const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
-        this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        this.borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 5;
         // Используем backgroundColor из данных объекта, если есть, иначе белый
         this.fillColor = this.objectData.backgroundColor || this.objectData.properties?.backgroundColor || 0xFFFFFF;
         // Режим заливки: solid | solid-bordered | outline
@@ -50,6 +50,10 @@ export class FrameObject {
         // Под-контейнер: масштаб компенсирует зум, поэтому заголовок всегда одного размера на экране
         this.titleLayer = new PIXI.Container();
         this.titleLayer.eventMode = 'none'; // не перехватывать указатель
+        const _frameObjectId = this.objectData.id || '';
+        if (_frameObjectId) {
+            this.titleLayer.name = `mb-frame-title-${_frameObjectId}`;
+        }
 
         this.titleBg = new PIXI.Graphics();
         this.titleLayer.addChild(this.titleBg);
@@ -60,7 +64,7 @@ export class FrameObject {
             fill: 0x333333,
             fontWeight: '500'
         });
-        this.titleText.anchor.set(0, 0);
+        this.titleText.anchor.set(0, 0.5);
         this.titleLayer.addChild(this.titleText);
 
         this.container.addChild(this.titleLayer);
@@ -141,7 +145,10 @@ export class FrameObject {
 
     _onSelectionAdd(data) {
         const myId = this.objectData?.id ?? this.container?._mb?.objectId;
-        if (data?.object === myId) this.setBorderVisible(false);
+        if (data?.object !== myId) return;
+        // В outline цветная рамка — основной визуал фрейма, не дублирует синюю рамку выделения.
+        if (this.bgMode === 'outline') return;
+        this.setBorderVisible(false);
     }
 
     _onSelectionRemove(data) {
@@ -276,37 +283,29 @@ export class FrameObject {
             const fillColor = typeof color === 'number' ? color : 0xFFFFFF;
 
             if (bgMode === 'solid') {
-                // Сплошная заливка выбранным цветом, стандартная тонкая серая рамка
-                if (showStroke) {
-                    try {
-                        g.lineStyle({ width: this.borderWidth, color: this.strokeColor, alpha: 1, alignment: 1 });
-                    } catch (e) {
-                        g.lineStyle(this.borderWidth, this.strokeColor, 1);
-                    }
-                }
+                // Сплошная заливка без собственной рамки (рамка выделения — отдельно)
                 g.beginFill(fillColor, 1);
                 g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
                 g.endFill();
             } else if (bgMode === 'solid-bordered') {
-                // Контрастный белый/светлый фон + толстая цветная рамка
+                // Фон = выбранный цвет; рамка = S=100,V=50 от того же тона палитры
+                const borderColor = this._pickBorderColor(fillColor);
                 if (showStroke) {
                     try {
-                        g.lineStyle({ width: this.borderWidth * 2, color: fillColor, alpha: 1, alignment: 1 });
+                        g.lineStyle({ width: this.borderWidth, color: borderColor, alpha: 1, alignment: 0 });
                     } catch (e) {
-                        g.lineStyle(this.borderWidth * 2, fillColor, 1);
+                        g.lineStyle(this.borderWidth, borderColor, 1);
                     }
                 }
-                g.beginFill(0xFFFFFF, 0.92);
+                g.beginFill(fillColor, 1);
                 g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
                 g.endFill();
             } else {
-                // outline: прозрачный фон, рамка цвета выбранного цвета
-                if (showStroke) {
-                    try {
-                        g.lineStyle({ width: this.borderWidth, color: fillColor, alpha: 1, alignment: 1 });
-                    } catch (e) {
-                        g.lineStyle(this.borderWidth, fillColor, 1);
-                    }
+                // outline: прозрачный фон, рамка цвета выбранного цвета (всегда видна, в т.ч. при фокусе)
+                try {
+                    g.lineStyle({ width: this.borderWidth, color: fillColor, alpha: 1, alignment: 1 });
+                } catch (e) {
+                    g.lineStyle(this.borderWidth, fillColor, 1);
                 }
                 g.beginFill(0x000000, 0);
                 g.drawRoundedRect(0, 0, Math.max(0, width), Math.max(0, height), this.cornerRadius);
@@ -352,7 +351,7 @@ export class FrameObject {
 
         // Высота подложки в базовых пикселях: baseFontSize + 4px сверху + 4px снизу
         const labelBaseH = this.baseFontSize + 8;
-        const gap = 4; // зазор между нижним краем подписи и верхней границей фрейма
+        const gap = 5; // зазор между нижним краем подписи и верхней границей фрейма
 
         // Позиционируем над фреймом (y=0 — верхний край фрейма в локальных координатах контейнера)
         this.titleLayer.x = 0;
@@ -372,6 +371,143 @@ export class FrameObject {
         this._redrawTitleBg();
     }
 
+    /**
+     * YIQ-контраст: возвращает 0x000000 или 0xFFFFFF — читаемый цвет на заданном фоне
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickContrastColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+        const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+        const darkness = (1 - yiq / 255) * 100;
+        return darkness >= 35 ? 0xFFFFFF : 0x000000;
+    }
+
+    /**
+     * Цвет рамки в режиме solid-bordered.
+     * Крайне правый по горизонтали (S=100) и по середине вертикали (V=50)
+     * в палитре того же тона, что и фон.
+     * Белый фон: крайне левый по горизонтали (S=0), середина по вертикали (V=50) → нейтральный серый.
+     * Прочие ахроматические цвета (серый, чёрный — s=0): чёрный.
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickBorderColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+        if (r === 255 && g === 255 && b === 255) {
+            return 0x808080;
+        }
+        const { h, s } = this._rgbToHsv(r, g, b);
+        if (s === 0) {
+            return 0x000000;
+        }
+        return this._hsvToHex(h, 100, 50);
+    }
+
+    /**
+     * Цвет текста заголовка фрейма.
+     * Для почти-белых тонированных фонов (яркость < 5 по шкале 0=белый…100=чёрный,
+     * но не чистый белый) берёт тон из той же палитры с макс. насыщенностью (S=100, V=50).
+     * Иначе — обычный YIQ-контраст (чёрный/белый).
+     * @param {number} hexInt Цвет фона (PIXI hex)
+     * @returns {number}
+     */
+    _pickTitleTextColor(hexInt) {
+        const r = (hexInt >> 16) & 0xFF;
+        const g = (hexInt >> 8) & 0xFF;
+        const b = hexInt & 0xFF;
+
+        // Чистый белый фон — исключение: чёрный текст
+        if (r === 255 && g === 255 && b === 255) {
+            return 0x000000;
+        }
+
+        // Яркость по шкале 0 (белый) → 100 (чёрный) через HSL-lightness
+        const darkness = 100 - ((Math.max(r, g, b) + Math.min(r, g, b)) / 2 / 255) * 100;
+        if (darkness >= 5) {
+            return this._pickContrastColor(hexInt);
+        }
+
+        // Почти-белый тонированный фон: та же палитра, правый край по центру (S=100, V=50)
+        const { h } = this._rgbToHsv(r, g, b);
+        return this._hsvToHex(h, 100, 50);
+    }
+
+    /**
+     * @param {number} r 0..255
+     * @param {number} g 0..255
+     * @param {number} b 0..255
+     * @returns {{ h: number, s: number, v: number }} h 0..360, s/v 0..100
+     */
+    _rgbToHsv(r, g, b) {
+        const rn = r / 255, gn = g / 255, bn = b / 255;
+        const max = Math.max(rn, gn, bn);
+        const min = Math.min(rn, gn, bn);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === rn) {
+                h = ((gn - bn) / d) % 6;
+            } else if (max === gn) {
+                h = (bn - rn) / d + 2;
+            } else {
+                h = (rn - gn) / d + 4;
+            }
+            h *= 60;
+            if (h < 0) {
+                h += 360;
+            }
+        }
+        const s = max === 0 ? 0 : (d / max) * 100;
+        return { h, s, v: max * 100 };
+    }
+
+    /**
+     * @param {number} h 0..360
+     * @param {number} s 0..100
+     * @param {number} v 0..100
+     * @returns {number} PIXI hex
+     */
+    _hsvToHex(h, s, v) {
+        const sn = s / 100, vn = v / 100;
+        const c = vn * sn;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = vn - c;
+        let rp = 0, gp = 0, bp = 0;
+        if (h < 60) {
+            rp = c; gp = x;
+        } else if (h < 120) {
+            rp = x; gp = c;
+        } else if (h < 180) {
+            gp = c; bp = x;
+        } else if (h < 240) {
+            gp = x; bp = c;
+        } else if (h < 300) {
+            rp = x; bp = c;
+        } else {
+            rp = c; bp = x;
+        }
+        const r = Math.round((rp + m) * 255);
+        const g = Math.round((gp + m) * 255);
+        const b = Math.round((bp + m) * 255);
+        return (r << 16) | (g << 8) | b;
+    }
+
+    /**
+     * Возвращает цвета плашки заголовка в формате CSS-строк для HTML-инпута
+     * @returns {{ bgCss: string, textCss: string }}
+     */
+    getTitleColors() {
+        const bg = this.fillColor;
+        const text = this._pickTitleTextColor(bg);
+        const toHex = (n) => '#' + n.toString(16).padStart(6, '0');
+        return { bgCss: toHex(bg), textCss: toHex(text) };
+    }
+
     /**
      * Нарисовать скруглённую подложку под текущую ширину текста
      */
@@ -381,6 +517,13 @@ export class FrameObject {
         const padH = 8; // горизонтальный отступ с каждой стороны
         const padV = 4; // вертикальный отступ с каждой стороны
 
+        // Фон плашки = цвет фрейма (fill или border в зависимости от bgMode — всегда this.fillColor)
+        const bgColor = typeof this.fillColor === 'number' ? this.fillColor : 0xFFFFFF;
+        const textColor = this._pickTitleTextColor(bgColor);
+
+        // Обновляем цвет текста под контраст фона
+        this.titleText.style.fill = textColor;
+
         // Измеряем текст в базовых единицах
         const style = new PIXI.TextStyle({
             fontFamily: this.titleText.style.fontFamily,
@@ -394,18 +537,14 @@ export class FrameObject {
 
         const g = this.titleBg;
         g.clear();
-        try {
-            g.lineStyle({ width: 1, color: this.strokeColor, alpha: 1 });
-        } catch (_) {
-            g.lineStyle(1, this.strokeColor, 1);
-        }
-        g.beginFill(0xFFFFFF, 1);
+        g.lineStyle(0);
+        g.beginFill(bgColor, 1);
         g.drawRoundedRect(0, 0, bgW, bgH, 6);
         g.endFill();
 
-        // Текст внутри подложки
+        // Текст внутри подложки — по вертикали по центру (anchor.y = 0.5)
         this.titleText.x = padH;
-        this.titleText.y = padV;
+        this.titleText.y = Math.round(bgH / 2);
     }
 
     /**

package/src/services/FrameService.js

@@ -86,14 +86,40 @@ export class FrameService {
 					}
 				}
 			}
+			const lockedChanged = data.updates.properties.locked !== undefined;
+			const lockModeChanged = data.updates.properties.lockMode !== undefined;
+			if (lockedChanged || lockModeChanged) {
+				const obj = this.state.state.objects.find(o => o.id === data.objectId);
+				if (obj && obj.type === 'frame') {
+					const newLocked = lockedChanged
+						? !!data.updates.properties.locked
+						: !!(obj.properties && obj.properties.locked);
+					const newLockMode = lockModeChanged
+						? data.updates.properties.lockMode
+						: (obj.properties && obj.properties.lockMode) || 'frame';
+					const children = this._getFrameChildren(obj.id);
+					for (const childId of children) {
+						const childObj = this.state.state.objects.find(o => o.id === childId);
+						if (!childObj) continue;
+						childObj.properties = childObj.properties || {};
+						if (newLocked && newLockMode === 'frame-and-content') {
+							childObj.properties.locked = true;
+							childObj.properties.lockedByFrame = true;
+						} else if (childObj.properties.lockedByFrame) {
+							childObj.properties.locked = false;
+							delete childObj.properties.lockedByFrame;
+						}
+					}
+					this.state.markDirty();
+				}
+			}
 		};
 		this.eventBus.on(Events.Object.StateChanged, this._onStateChanged);
 
-		this._onDragStart = (data) => {
+		this.	_onDragStart = (data) => {
 			const moved = this.state.state.objects.find(o => o.id === data.object);
 			if (moved && moved.type === 'frame') {
-				// Серый фон
-				this.pixi.setFrameFill(moved.id, moved.width, moved.height, 0xFAFAFA);
+				this._frameDragOriginalFill = moved.backgroundColor ?? moved.properties?.backgroundColor ?? 0xFFFFFF;
 				// Cнимок стартовых позиций по центру PIXI
 				const fp = this.pixi.objects.get(moved.id);
 				this._frameDragFrameStart = { x: fp?.x || 0, y: fp?.y || 0 };
@@ -157,18 +183,25 @@ export class FrameService {
 			const movedObj = this.state.state.objects.find(o => o.id === data.object);
 			if (!movedObj) return;
 			if (movedObj.type === 'frame') {
-				this.pixi.setFrameFill(movedObj.id, movedObj.width, movedObj.height, 0xFFFFFF);
+				const restoreFill = this._frameDragOriginalFill ?? movedObj.backgroundColor ?? movedObj.properties?.backgroundColor ?? 0xFFFFFF;
+				this.pixi.setFrameFill(movedObj.id, movedObj.width, movedObj.height, restoreFill);
 			}
 			this._recomputeFrameAttachment(movedObj.id);
 			this._forceFramesBelow();
 			this._frameDragFrameStart = null;
 			this._frameDragChildStart = null;
+			this._frameDragOriginalFill = null;
 			if (this._frameHoverId) {
 				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
 				const prev = frames.find(fr => fr.id === this._frameHoverId);
-				if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
-			this._frameHoverId = null;
-		}
+				if (prev) {
+					const hoverOriginal = this._frameHoverOriginalFill?.get(this._frameHoverId)
+						?? prev.backgroundColor ?? prev.properties?.backgroundColor ?? 0xFFFFFF;
+					this.pixi.setFrameFill(prev.id, prev.width, prev.height, hoverOriginal);
+				}
+				this._frameHoverId = null;
+				this._frameHoverOriginalFill = null;
+			}
 		};
 		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
 	}
@@ -192,7 +225,9 @@ export class FrameService {
 		this._onDragEnd = null;
 		this._frameDragFrameStart = null;
 		this._frameDragChildStart = null;
+		this._frameDragOriginalFill = null;
 		this._frameHoverId = null;
+		this._frameHoverOriginalFill = null;
 	}
 
 	_getFrameChildren(frameId) {
@@ -234,11 +269,22 @@ export class FrameService {
 			if (hoverId !== this._frameHoverId) {
 				if (this._frameHoverId) {
 					const prev = frames.find(fr => fr.id === this._frameHoverId);
-					if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
+					if (prev) {
+						const origFill = this._frameHoverOriginalFill?.get(this._frameHoverId)
+							?? prev.backgroundColor ?? prev.properties?.backgroundColor ?? 0xFFFFFF;
+						this.pixi.setFrameFill(prev.id, prev.width, prev.height, origFill);
+					}
+					this._frameHoverOriginalFill?.delete(this._frameHoverId);
 				}
 				if (hoverId) {
 					const cur = frames.find(fr => fr.id === hoverId);
-					if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xFAFAFA);
+					if (cur) {
+						if (!this._frameHoverOriginalFill) this._frameHoverOriginalFill = new Map();
+						if (!this._frameHoverOriginalFill.has(hoverId)) {
+							this._frameHoverOriginalFill.set(hoverId, cur.backgroundColor ?? cur.properties?.backgroundColor ?? 0xFFFFFF);
+						}
+						this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xFAFAFA);
+					}
 				}
 				this._frameHoverId = hoverId || null;
 			}

package/src/services/ImageAttachmentService.js

@@ -0,0 +1,260 @@
+import { Events } from '../core/events/Events.js';
+
+const IMAGE_TYPES = new Set(['image', 'revit-screenshot-img', 'model3d-screenshot-img']);
+
+function isImageType(type) { return IMAGE_TYPES.has(type); }
+function isDrawingType(type) { return type === 'drawing'; }
+
+/**
+ * Проверяет, что прямоугольник inner целиком вмещается в outer.
+ * Координаты — мировые (top-left + size).
+ */
+function isFullyContained(inner, outer) {
+	return inner.x >= outer.x &&
+		inner.y >= outer.y &&
+		(inner.x + inner.w) <= (outer.x + outer.w) &&
+		(inner.y + inner.h) <= (outer.y + outer.h);
+}
+
+function getObjRect(obj) {
+	return {
+		x: obj.position?.x ?? 0,
+		y: obj.position?.y ?? 0,
+		w: obj.width ?? 0,
+		h: obj.height ?? 0,
+	};
+}
+
+/**
+ * Управляет привязкой drawing-объектов к изображениям.
+ *
+ * Правила:
+ * - Привязка происходит только если drawing целиком внутри изображения.
+ * - Фрейм первичен: если у drawing уже есть properties.frameId — imageId не ставим.
+ * - Привязанный drawing перемещается вместе с изображением при drag.
+ * - При resize изображения пересчитываем, какие drawing остаются внутри.
+ */
+export class ImageAttachmentService {
+	constructor(eventBus, pixi, state) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.state = state;
+	}
+
+	// ─── Вспомогательные ──────────────────────────────────────────────────────
+
+	/**
+	 * Находит id изображения, полностью вмещающего drawing.
+	 * Если несколько — берём с наибольшим zIndex PIXI (верхнее).
+	 * Если у drawing есть frameId — возвращает null (фрейм первичен).
+	 */
+	_findHostImage(drawingObj) {
+		if (drawingObj.properties?.frameId) return null;
+
+		const dr = getObjRect(drawingObj);
+		const images = (this.state.state.objects || []).filter(o => isImageType(o.type));
+		const candidates = images.filter(img => isFullyContained(dr, getObjRect(img)));
+		if (!candidates.length) return null;
+
+		candidates.sort((a, b) => {
+			const pa = this.pixi.objects.get(a.id);
+			const pb = this.pixi.objects.get(b.id);
+			return (pb?.zIndex ?? 0) - (pa?.zIndex ?? 0);
+		});
+		return candidates[0].id;
+	}
+
+	_getImageChildren(imageId) {
+		return (this.state.state.objects || [])
+			.filter(o => o.properties?.imageId === imageId)
+			.map(o => o.id);
+	}
+
+	// ─── Логика пересчёта ─────────────────────────────────────────────────────
+
+	/** Пересчитывает imageId для одного drawing по текущим bounds. */
+	_recomputeImageAttachment(objectId) {
+		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
+		if (!obj || !isDrawingType(obj.type)) return;
+
+		const newImageId = this._findHostImage(obj);
+		const prevImageId = obj.properties?.imageId ?? null;
+		if (newImageId === prevImageId) return;
+
+		obj.properties = obj.properties || {};
+		if (newImageId) {
+			obj.properties.imageId = newImageId;
+		} else {
+			delete obj.properties.imageId;
+		}
+		this.state.markDirty();
+	}
+
+	/** При создании изображения прикрепляет все drawing, оказавшиеся внутри. */
+	_attachDrawingsToNewImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+			if (obj.properties?.imageId) continue;
+			if (isFullyContained(getObjRect(obj), ir)) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	/**
+	 * Пересчитывает все drawing относительно конкретного изображения.
+	 * Вызывается после resize или drag изображения.
+	 */
+	_recomputeAllForImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+
+			const prevImageId = obj.properties?.imageId ?? null;
+			const inside = isFullyContained(getObjRect(obj), ir);
+			const attached = prevImageId === imageId;
+
+			if (inside && !attached && !prevImageId) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			} else if (!inside && attached) {
+				delete obj.properties.imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	// ─── Lifecycle ────────────────────────────────────────────────────────────
+
+	attach() {
+		if (this._attached) return;
+		this._attached = true;
+
+		// Создан объект: изображение → прикрепляем вложенные drawing;
+		//               drawing → проверяем попадание внутрь изображения.
+		this._onObjectCreated = ({ objectId, objectData }) => {
+			try {
+				if (!objectData) return;
+				if (isImageType(objectData.type)) {
+					this._attachDrawingsToNewImage(objectId);
+				} else if (isDrawingType(objectData.type)) {
+					this._recomputeImageAttachment(objectId);
+				}
+			} catch (_) { /* no-op */ }
+		};
+		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
+
+		// DragStart изображения — сохраняем начальные позиции (PIXI-центры) детей.
+		this._onDragStart = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			this._imgDragImgStart = { x: p?.x ?? 0, y: p?.y ?? 0 };
+			this._imgDragChildStart = new Map();
+			for (const childId of this._getImageChildren(moved.id)) {
+				const cp = this.pixi.objects.get(childId);
+				if (cp) this._imgDragChildStart.set(childId, { x: cp.x, y: cp.y });
+			}
+		};
+		this.eventBus.on(Events.Tool.DragStart, this._onDragStart);
+
+		// DragUpdate изображения — тащим привязанные drawing.
+		this._onDragUpdate = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			const start = this._imgDragImgStart ?? { x: p?.x ?? 0, y: p?.y ?? 0 };
+			const dx = (p?.x ?? 0) - start.x;
+			const dy = (p?.y ?? 0) - start.y;
+
+			for (const childId of this._getImageChildren(moved.id)) {
+				let startPos = this._imgDragChildStart?.get(childId);
+				const cp = this.pixi.objects.get(childId);
+				if (!startPos) {
+					if (cp) {
+						startPos = { x: cp.x - dx, y: cp.y - dy };
+						this._imgDragChildStart ??= new Map();
+						this._imgDragChildStart.set(childId, startPos);
+					} else {
+						continue;
+					}
+				}
+				const nx = startPos.x + dx;
+				const ny = startPos.y + dy;
+				if (cp) { cp.x = nx; cp.y = ny; }
+				const stObj = (this.state.state.objects || []).find(o => o.id === childId);
+				if (stObj) {
+					const hw = cp ? (cp.width ?? 0) / 2 : 0;
+					const hh = cp ? (cp.height ?? 0) / 2 : 0;
+					stObj.position.x = nx - hw;
+					stObj.position.y = ny - hh;
+					this.eventBus.emit(Events.Object.TransformUpdated, {
+						objectId: childId,
+						type: 'position',
+						position: { x: stObj.position.x, y: stObj.position.y },
+					});
+				}
+			}
+		};
+		this.eventBus.on(Events.Tool.DragUpdate, this._onDragUpdate);
+
+		// DragEnd: для drawing — пересчитываем imageId;
+		//          для изображения — финализируем drag-state и пересчитываем вложенных.
+		this._onDragEnd = (data) => {
+			const movedObj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!movedObj) return;
+
+			if (isDrawingType(movedObj.type)) {
+				this._recomputeImageAttachment(movedObj.id);
+			} else if (isImageType(movedObj.type)) {
+				this._imgDragImgStart = null;
+				this._imgDragChildStart = null;
+				this._recomputeAllForImage(movedObj.id);
+			}
+		};
+		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
+
+		// ResizeEnd изображения — пересчитываем, какие drawing остаются внутри.
+		this._onResizeEnd = (data) => {
+			const obj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!obj || !isImageType(obj.type)) return;
+			this._recomputeAllForImage(obj.id);
+		};
+		this.eventBus.on(Events.Tool.ResizeEnd, this._onResizeEnd);
+	}
+
+	detach() {
+		if (!this._attached) return;
+		this._attached = false;
+		if (this._onObjectCreated) this.eventBus.off(Events.Object.Created, this._onObjectCreated);
+		if (this._onDragStart) this.eventBus.off(Events.Tool.DragStart, this._onDragStart);
+		if (this._onDragUpdate) this.eventBus.off(Events.Tool.DragUpdate, this._onDragUpdate);
+		if (this._onDragEnd) this.eventBus.off(Events.Tool.DragEnd, this._onDragEnd);
+		if (this._onResizeEnd) this.eventBus.off(Events.Tool.ResizeEnd, this._onResizeEnd);
+		this._onObjectCreated = null;
+		this._onDragStart = null;
+		this._onDragUpdate = null;
+		this._onDragEnd = null;
+		this._onResizeEnd = null;
+		this._imgDragImgStart = null;
+		this._imgDragChildStart = null;
+	}
+}

package/src/tools/object-tools/placement/GhostController.js

@@ -378,10 +378,10 @@ export class GhostController {
         const title = host.pending.properties?.title || 'Новый';
 
         const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
-        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '5') : 5;
         const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
         const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
-        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 5;
         const cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
         let strokeColor;
         if (cssBorderColor && cssBorderColor.startsWith('#')) {

package/src/tools/object-tools/placement/PlacementPayloadFactory.js

@@ -43,7 +43,15 @@ export class PlacementPayloadFactory {
             type: 'frame',
             id: 'frame',
             position: { x, y },
-            properties: { width: Math.round(w), height: Math.round(h), title: 'Произвольный', lockedAspect: false, isArbitrary: true }
+            properties: {
+                width: Math.round(w),
+                height: Math.round(h),
+                title: 'Произвольный',
+                lockedAspect: false,
+                isArbitrary: true,
+                bgMode: 'solid',
+                backgroundColor: 0xFFFFFF,
+            }
         });
     }
 

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

@@ -50,16 +50,25 @@ export function openFrameTitleEditor(object, _create = false) {
         ? toScreenWithContainerOffset(titleLayer, view, 0, 0)
         : { x: 0, y: 0 };
 
-    // Ширина редактора = ширина titleBg в экранных пикселях (с учётом зум-компенсации)
+    // Габариты редактора = titleBg в экранных пикселях (с учётом зум-компенсации)
     let inputWidth = 150;
+    let inputHeight = 22;
     if (titleLayer && frameInstance.titleBg) {
         const bgRight = toScreenWithContainerOffset(titleLayer, view, frameInstance.titleBg.width || 150, 0);
-        inputWidth = Math.max(100, Math.round(bgRight.x - screenPos.x));
+        const bgBottom = toScreenWithContainerOffset(titleLayer, view, 0, frameInstance.titleBg.height || 22);
+        inputWidth = Math.max(1, Math.round(bgRight.x - screenPos.x));
+        inputHeight = Math.max(1, Math.round(bgBottom.y - screenPos.y));
     }
 
-    const wrapper = createFrameTitleEditorWrapper();
-    const input = createFrameTitleEditorInput(currentTitle);
+    const titleColors = typeof frameInstance.getTitleColors === 'function'
+        ? frameInstance.getTitleColors()
+        : { bgCss: '#ffffff', textCss: '#333333' };
+
+    const wrapper = createFrameTitleEditorWrapper(titleColors.bgCss);
+    wrapper.id = `mb-frame-title-editor-${objectId}`;
+    const input = createFrameTitleEditorInput(currentTitle, titleColors.textCss);
     wrapper.style.width = `${inputWidth}px`;
+    wrapper.style.height = `${inputHeight}px`;
 
     wrapper.appendChild(input);
     view.parentElement.appendChild(wrapper);

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

@@ -30,38 +30,43 @@ export function createFileNameEditorWrapper() {
     return wrapper;
 }
 
-export function createFrameTitleEditorWrapper() {
+export function createFrameTitleEditorWrapper(bgColor = '#ffffff') {
     const wrapper = document.createElement('div');
     wrapper.className = 'moodboard-frame-title-editor';
     wrapper.style.cssText = `
             position: absolute;
             z-index: 1000;
-            background: white;
-            border: 2px solid #2563eb;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            background: ${bgColor};
+            border: none;
             border-radius: 6px;
-            padding: 3px 6px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            min-width: 100px;
-            max-width: 320px;
+            padding: 4px 8px;
+            overflow: hidden;
             font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
         `;
     return wrapper;
 }
 
-export function createFrameTitleEditorInput(title) {
+export function createFrameTitleEditorInput(title, textColor = '#333333') {
     const input = document.createElement('input');
     input.type = 'text';
     input.value = title;
     input.style.cssText = `
+            box-sizing: border-box;
             border: none;
             outline: none;
             background: transparent;
             font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
             font-size: 14px;
             font-weight: 500;
+            line-height: 14px;
+            height: 14px;
             width: 100%;
-            padding: 1px 2px;
-            color: #1f2937;
+            margin: 0;
+            padding: 0;
+            color: ${textColor};
         `;
     return input;
 }

package/src/ui/FramePropertiesPanel.js

@@ -42,19 +42,19 @@ function hexToHsv(hex) {
 const FRAME_COLORS = [
     { name: 'Белый',            hex: '#FFFFFF' },
     { name: 'Светло-серый',     hex: '#EBEBEB' },
-    { name: 'Серый',            hex: '#ABABAB' },
-    { name: 'Светло-розовый',   hex: '#FFDDE0' },
-    { name: 'Розовый',          hex: '#FFB3BB' },
-    { name: 'Персиковый',       hex: '#FFE5CC' },
-    { name: 'Оранжевый',        hex: '#FFB066' },
-    { name: 'Светло-жёлтый',   hex: '#FFFACC' },
-    { name: 'Жёлтый',           hex: '#FFE566' },
-    { name: 'Светло-зелёный',   hex: '#D4F5D4' },
-    { name: 'Зелёный',          hex: '#88D888' },
-    { name: 'Небесный',         hex: '#D4EEFF' },
-    { name: 'Голубой',          hex: '#80BFFF' },
-    { name: 'Лавандовый',       hex: '#E8D4FF' },
-    { name: 'Фиолетовый',       hex: '#C499FF' },
+    { name: 'Серый',            hex: '#E4E4E4' },
+    { name: 'Светло-розовый',   hex: '#FFEFEF' },
+    { name: 'Розовый',          hex: '#FDD8D8' },
+    { name: 'Персиковый',       hex: '#FFEDD5' },
+    { name: 'Оранжевый',        hex: '#FFD3A4' },
+    { name: 'Светло-жёлтый',    hex: '#FFFBE0' },
+    { name: 'Жёлтый',           hex: '#FCF3AF' },
+    { name: 'Светло-зелёный',   hex: '#E9F9EE' },
+    { name: 'Зелёный',          hex: '#CCEBD7' },
+    { name: 'Небесный',         hex: '#EDF6FF' },
+    { name: 'Голубой',          hex: '#CEE7FE' },
+    { name: 'Лавандовый',       hex: '#F5F2FF' },
+    { name: 'Фиолетовый',       hex: '#E4DEFC' },
 ];
 
 const ICONS = {
@@ -75,6 +75,7 @@ const ICONS = {
     bgBordered: '<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="3" width="16" height="16" rx="2.5" fill="#D1D5DB"/><rect x="3" y="3" width="16" height="16" rx="2.5" stroke="#374151" stroke-width="1.5"/></svg>',
     bgOutline: '<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="3" width="16" height="16" rx="2.5" stroke="#374151" stroke-width="1.5"/></svg>',
     eyedropper: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 20.5l4-4"/><path d="M6.5 17.5L17 7a2.5 2.5 0 0 0 0-3.5l-2-2a2.5 2.5 0 0 0-3.5 0L3 10l4 4z"/></svg>',
+    check: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',
 };
 
 const RATIO_LABELS = {
@@ -241,8 +242,7 @@ export class FramePropertiesPanel {
 
         const divider = this._makeDivider();
 
-        this._btn_lock = this._makeButton(ICONS.unlock, 'Заблокировать', 'lock');
-        this._btn_lock.addEventListener('click', (e) => { e.stopPropagation(); this._toggleLocked(); });
+        const lockControl = this._makeLockControl();
 
         const more = this._makeMoreButton();
 
@@ -251,7 +251,7 @@ export class FramePropertiesPanel {
         panel.appendChild(rename);
         panel.appendChild(eye);
         panel.appendChild(divider);
-        panel.appendChild(this._btn_lock);
+        panel.appendChild(lockControl);
         panel.appendChild(more);
 
         this._lockableEls = [ratio, color, rename, eye, divider];
@@ -271,11 +271,81 @@ export class FramePropertiesPanel {
         const btn = document.createElement('button');
         btn.className = 'ipp-btn';
         btn.title = title;
-        if (key) { btn.dataset.id = 'fpp-btn-' + key; }
+        if (key) {
+            btn.id = 'fpp-btn-' + key;
+            btn.dataset.id = 'fpp-btn-' + key;
+        }
         btn.innerHTML = iconHtml;
         return btn;
     }
 
+    _makeLockControl() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'ipp-btn-split-wrapper fpp-lock-wrap';
+
+        const mainBtn = document.createElement('button');
+        mainBtn.className = 'ipp-btn-split-main';
+        mainBtn.id = 'fpp-btn-lock';
+        mainBtn.dataset.id = 'fpp-btn-lock';
+        mainBtn.title = 'Заблокировать';
+        mainBtn.innerHTML = ICONS.unlock;
+        mainBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleLocked(); });
+        this._lockSplitMain = mainBtn;
+
+        const expandBtn = document.createElement('button');
+        expandBtn.className = 'ipp-btn-split-expand fpp-lock-chevron';
+        expandBtn.title = 'Режим блокировки';
+        expandBtn.innerHTML = ICONS.expand;
+        expandBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = this._lockDropdown.classList.contains('is-open');
+            this._closeMenus();
+            if (!isOpen) {
+                this._lockDropdown.classList.add('is-open');
+                expandBtn.classList.add('is-expanded');
+                this._attachOutside();
+            }
+        });
+        this._lockExpandBtn = expandBtn;
+
+        const dropdown = document.createElement('div');
+        dropdown.className = 'fpp-lock-dropdown';
+        this._lockDropdown = dropdown;
+
+        const lockModeItems = [
+            { id: 'frame', label: 'Только фрейм' },
+            { id: 'frame-and-content', label: 'Фрейм и содержимое' },
+        ];
+
+        lockModeItems.forEach((item) => {
+            const btn = document.createElement('button');
+            btn.className = 'ipp-dropdown-item';
+            btn.id = 'fpp-lock-mode-' + item.id;
+            btn.dataset.lockMode = item.id;
+
+            const checkSpan = document.createElement('span');
+            checkSpan.className = 'fpp-lock-mode-check';
+            checkSpan.innerHTML = ICONS.check;
+            btn.appendChild(checkSpan);
+
+            const labelSpan = document.createElement('span');
+            labelSpan.textContent = item.label;
+            btn.appendChild(labelSpan);
+
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this._closeMenus();
+                this._applyLockMode(item.id);
+            });
+            dropdown.appendChild(btn);
+        });
+
+        wrapper.appendChild(mainBtn);
+        wrapper.appendChild(expandBtn);
+        wrapper.appendChild(dropdown);
+        return wrapper;
+    }
+
     _makeDivider() {
         const div = document.createElement('div');
         div.className = 'ipp-divider';
@@ -288,6 +358,7 @@ export class FramePropertiesPanel {
 
         const btn = document.createElement('button');
         btn.className = 'fpp-ratio-btn';
+        btn.id = 'fpp-ratio-btn';
         btn.dataset.id = 'fpp-ratio-btn';
 
         const textBox = document.createElement('span');
@@ -324,6 +395,7 @@ export class FramePropertiesPanel {
         items.forEach((item) => {
             const el = document.createElement('button');
             el.className = 'ipp-dropdown-item';
+            el.id = 'fpp-ratio-item-' + item.id;
             const ic = document.createElement('span');
             ic.className = 'ipp-dropdown-icon';
             ic.innerHTML = item.icon;
@@ -362,6 +434,7 @@ export class FramePropertiesPanel {
 
         const colorButton = document.createElement('button');
         colorButton.className = 'fpp-color-button';
+        colorButton.id = 'fpp-color-btn';
         colorButton.addEventListener('click', (e) => {
             e.stopPropagation();
             this._toggleColorPopup(colorButton);
@@ -394,6 +467,7 @@ export class FramePropertiesPanel {
         BG_TYPES.forEach(({ id, title, icon }) => {
             const btn = document.createElement('button');
             btn.className = 'fpp-bg-type-btn';
+            btn.id = 'fpp-bg-type-btn-' + id;
             btn.title = title;
             btn.dataset.bgMode = id;
             btn.innerHTML = ICONS[icon];
@@ -425,6 +499,7 @@ export class FramePropertiesPanel {
         // "None" swatch — transparent
         const noneSwatch = document.createElement('button');
         noneSwatch.className = 'fpp-color-swatch fpp-color-swatch--none';
+        noneSwatch.id = 'fpp-swatch-none';
         noneSwatch.title = 'Прозрачный';
         noneSwatch.dataset.colorHex = 'none';
         noneSwatch.innerHTML = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><line x1="3" y1="17" x2="17" y2="3" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/></svg>';
@@ -440,6 +515,7 @@ export class FramePropertiesPanel {
         FRAME_COLORS.forEach((color) => {
             const btn = document.createElement('button');
             btn.className = 'fpp-color-swatch';
+            btn.id = 'fpp-swatch-' + color.hex.replace('#', '').toLowerCase();
             btn.title = color.name;
             btn.dataset.colorHex = color.hex.toUpperCase();
             btn.style.setProperty('--swatch-color', color.hex);
@@ -470,6 +546,7 @@ export class FramePropertiesPanel {
 
         const addBtn = document.createElement('button');
         addBtn.className = 'fpp-add-color-btn';
+        addBtn.id = 'fpp-add-color-btn';
         addBtn.title = 'Добавить цвет';
         addBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>';
         addBtn.addEventListener('click', (e) => {
@@ -562,9 +639,18 @@ export class FramePropertiesPanel {
             this.colorButton.classList.remove('fpp-color-button--none');
         }
 
+        const targetBgMode = this._getCurrentBgMode();
+
+        this._bgTypeBtns.forEach((btn) => {
+            btn.classList.toggle('is-active', btn.dataset.bgMode === targetBgMode);
+        });
+
         this.eventBus.emit(Events.Object.StateChanged, {
             objectId: this.currentId,
-            updates: { backgroundColor: pixi },
+            updates: { 
+                backgroundColor: pixi,
+                properties: { bgMode: targetBgMode }
+            },
         });
     }
 
@@ -574,9 +660,10 @@ export class FramePropertiesPanel {
     }
 
     _setColorSectionDisabled(disabled) {
-        if (this._colorSection) {
-            this._colorSection.classList.toggle('is-disabled', disabled);
-        }
+        // Disabled logic removed as per requirements (all colour buttons remain active)
+        // if (this._colorSection) {
+        //     this._colorSection.classList.toggle('is-disabled', disabled);
+        // }
     }
 
     _markNoneSelected() {
@@ -633,6 +720,7 @@ export class FramePropertiesPanel {
         canvas.width = 212;
         canvas.height = 148;
         canvas.className = 'fpp-color-picker__canvas';
+        canvas.id = 'fpp-hsv-canvas';
         this._hsvCanvas = canvas;
 
         const cursor = document.createElement('div');
@@ -661,6 +749,7 @@ export class FramePropertiesPanel {
         hueSlider.max = '360';
         hueSlider.value = '0';
         hueSlider.className = 'fpp-color-picker__hue-slider';
+        hueSlider.id = 'fpp-hue-slider';
         this._hueSlider = hueSlider;
 
         hueSlider.addEventListener('input', (e) => {
@@ -679,6 +768,7 @@ export class FramePropertiesPanel {
 
         const eyedropper = document.createElement('button');
         eyedropper.className = 'fpp-color-picker__eyedropper';
+        eyedropper.id = 'fpp-eyedropper-btn';
         eyedropper.title = 'Пипетка';
         eyedropper.innerHTML = ICONS.eyedropper;
         eyedropper.addEventListener('click', (e) => {
@@ -694,6 +784,7 @@ export class FramePropertiesPanel {
         const hexInput = document.createElement('input');
         hexInput.type = 'text';
         hexInput.className = 'fpp-color-picker__hex-input';
+        hexInput.id = 'fpp-hex-input';
         hexInput.value = '#ffffff';
         hexInput.maxLength = 7;
         hexInput.spellcheck = false;
@@ -724,6 +815,7 @@ export class FramePropertiesPanel {
         // Apply button
         const applyBtn = document.createElement('button');
         applyBtn.className = 'fpp-color-picker__apply';
+        applyBtn.id = 'fpp-picker-apply-btn';
         applyBtn.textContent = 'Добавить';
         applyBtn.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -867,6 +959,7 @@ export class FramePropertiesPanel {
         const mainBtn = document.createElement('button');
         mainBtn.className = 'ipp-btn';
         mainBtn.title = 'Ещё';
+        mainBtn.id = 'fpp-btn-more';
         mainBtn.dataset.id = 'fpp-btn-more';
         mainBtn.innerHTML = ICONS.more;
 
@@ -911,6 +1004,7 @@ export class FramePropertiesPanel {
 
             const btn = document.createElement('button');
             btn.className = 'ipp-dropdown-item';
+            btn.id = 'fpp-more-' + item.id;
             btn.dataset.id = 'fpp-more-' + item.id;
 
             if (item.icon) {
@@ -1052,6 +1146,8 @@ export class FramePropertiesPanel {
         if (this._moreDropdown) { this._moreDropdown.classList.remove('is-open'); }
         if (this._moreMainBtn) { this._moreMainBtn.classList.remove('is-active'); }
         if (this._infoPopover) { this._infoPopover.classList.remove('is-open'); }
+        if (this._lockDropdown) { this._lockDropdown.classList.remove('is-open'); }
+        if (this._lockExpandBtn) { this._lockExpandBtn.classList.remove('is-expanded'); }
         this._detachOutside();
     }
 
@@ -1098,23 +1194,52 @@ export class FramePropertiesPanel {
     _toggleLocked() {
         if (!this.currentId) { return; }
         const newLocked = !this._isLocked();
+        const updates = { locked: newLocked };
+        if (newLocked) {
+            const data = this._getObjectData();
+            updates.lockMode = (data && data.properties && data.properties.lockMode) || 'frame';
+        }
         this.eventBus.emit(Events.Object.StateChanged, {
             objectId: this.currentId,
-            updates: { properties: { locked: newLocked } },
+            updates: { properties: updates },
+        });
+        this._updateLockUI();
+        this.reposition();
+    }
+
+    _applyLockMode(mode) {
+        if (!this.currentId) { return; }
+        const locked = this._isLocked();
+        const updates = { lockMode: mode };
+        if (!locked) { updates.locked = true; }
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: updates },
         });
         this._updateLockUI();
         this.reposition();
     }
 
     _updateLockUI() {
-        if (!this._btn_lock) { return; }
+        if (!this._lockSplitMain) { return; }
         const locked = this._isLocked();
 
         const data = this._getObjectData();
         const hidden = !!(data && data.properties && data.properties.hidden);
+        const lockMode = (data && data.properties && data.properties.lockMode) || 'frame';
+
+        this._lockSplitMain.innerHTML = locked ? ICONS.lock : ICONS.unlock;
+        this._lockSplitMain.title = locked ? 'Разблокировать' : 'Заблокировать';
 
-        this._btn_lock.innerHTML = locked ? ICONS.lock : ICONS.unlock;
-        this._btn_lock.title = locked ? 'Разблокировать' : 'Заблокировать';
+        if (this._lockExpandBtn) {
+            this._lockExpandBtn.style.display = locked ? 'none' : '';
+        }
+        if (this._lockDropdown) {
+            if (locked) { this._lockDropdown.classList.remove('is-open'); }
+            this._lockDropdown.querySelectorAll('[data-lock-mode]').forEach((btn) => {
+                btn.classList.toggle('is-active', btn.dataset.lockMode === lockMode);
+            });
+        }
 
         if (this._eyeBtn) {
             this._eyeBtn.dataset.hidden = hidden ? '1' : '0';

package/src/ui/ImagePropertiesPanel.js

@@ -1050,6 +1050,14 @@ export class ImagePropertiesPanel {
                 
                 if (item.id === 'copy') {
                     this.eventBus.emit(Events.Keyboard.Copy);
+                } else if (item.id === 'bring-front') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerBringToFront, { objectId: this.currentId });
+                } else if (item.id === 'bring-forward') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerBringForward, { objectId: this.currentId });
+                } else if (item.id === 'send-backward') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerSendBackward, { objectId: this.currentId });
+                } else if (item.id === 'send-back') {
+                    if (this.currentId) this.eventBus.emit(Events.UI.LayerSendToBack, { objectId: this.currentId });
                 } else if (item.id === 'duplicate') {
                     this._duplicateImage();
                 } else if (item.id === 'lock') {

package/src/ui/styles/panels.css

@@ -429,12 +429,12 @@
 }
 .fpp-color-swatch--none svg { pointer-events: none; }
 
-/* Disabled colour section when transparent is selected */
-.fpp-section--color.is-disabled .fpp-color-swatch:not(.fpp-color-swatch--none) {
+/* Disabled colour section when transparent is selected (removed) */
+/* .fpp-section--color.is-disabled .fpp-color-swatch:not(.fpp-color-swatch--none) {
     opacity: 0.32;
     pointer-events: none;
     cursor: default;
-}
+} */
 
 /* Custom colours row */
 .fpp-custom-row {
@@ -1326,3 +1326,43 @@
     color: #6B7280;
 }
 
+/* Lock Mode Dropdown */
+.fpp-lock-wrap {
+    position: relative;
+}
+
+.fpp-lock-dropdown {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
+    padding: 6px;
+    display: none;
+    flex-direction: column;
+    min-width: 190px;
+    z-index: 1001;
+}
+
+.fpp-lock-dropdown.is-open {
+    display: flex;
+}
+
+.fpp-lock-mode-check {
+    width: 14px;
+    height: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #374151;
+    flex-shrink: 0;
+    opacity: 0;
+}
+
+.ipp-dropdown-item.is-active .fpp-lock-mode-check {
+    opacity: 1;
+}
+

package/src/ui/styles/workspace.css

@@ -929,7 +929,7 @@
 .moodboard-root, :root {
     /* CSS variables for frame style */
     --frame-border-color: #C7CDD6;
-    --frame-border-width: 5; /* px */
+    --frame-border-width: 1; /* px */
     --frame-corner-radius: 6; /* px */
 }
 .frame-popup {