@sequent-org/moodboard 1.1.0 → 1.2.1

package/src/ui/Toolbar.js

@@ -418,9 +418,10 @@ export class Toolbar {
                     type: 'note', 
                     properties: { 
                         content: 'Новая записка',
-                        fontSize: 16,
-                        width: 160,
-                        height: 100
+                        fontFamily: 'Caveat, Arial, cursive',
+                        fontSize: 32,
+                        width: 250,
+                        height: 250
                     }
                 });
                 return;
@@ -529,6 +530,13 @@ export class Toolbar {
                 this.setActiveToolbarButton('place'); // ← Исправление: подсвечиваем кнопку эмоджи
                 return;
             }
+
+            // Очистка холста - требует подтверждения
+            if (toolType === 'clear') {
+                this.animateButton(button);
+                this.showClearConfirmation();
+                return;
+            }
             
             // Эмитим событие для других инструментов
             this.eventBus.emit(Events.UI.ToolbarAction, {
@@ -743,9 +751,9 @@ export class Toolbar {
 
         // Первый ряд: карандаш, маркер, ластик (иконки SVG)
         const tools = [
-            { id: 'pencil-tool', tool: 'pencil', title: 'Карандаш', svg: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 14 L14 2 L18 6 L6 18 L2 18 Z" fill="#1f2937"/><path d="M12 4 L16 8" stroke="#e5e7eb" stroke-width="2"/></svg>' },
-            { id: 'marker-tool', tool: 'marker', title: 'Маркер', svg: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="3" y="3" width="10" height="6" rx="2" fill="#1f2937"/><path d="M13 4 L17 8 L12 13 L8 9 Z" fill="#374151"/></svg>' },
-            { id: 'eraser-tool', tool: 'eraser', title: 'Ластик', svg: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="4" y="10" width="10" height="6" rx="2" transform="rotate(-45 4 10)" fill="#9ca3af"/><rect x="9" y="5" width="6" height="4" rx="1" transform="rotate(-45 9 5)" fill="#d1d5db"/></svg>' }
+            { id: 'pencil-tool', tool: 'pencil', title: 'Карандаш', svg: '<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M14.492 3.414 8.921 8.985a4.312 4.312 0 0 0 6.105 6.09l5.564-5.562 1.414 1.414-5.664 5.664a6.002 6.002 0 0 1-2.182 1.392L3.344 21.94 2.06 20.656 6.02 9.845c.3-.82.774-1.563 1.391-2.18l.093-.092.01-.01L13.077 2l1.415 1.414ZM4.68 19.32l4.486-1.64a6.305 6.305 0 0 1-1.651-1.19 6.306 6.306 0 0 1-1.192-1.655L4.68 19.32Z" clip-rule="evenodd"/></svg>' },
+            { id: 'marker-tool', tool: 'marker', title: 'Маркер', svg: '<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" width="20" height="20" class="c-bxOhME c-bxOhME-dvzWZT-size-medium"><path fill="currentColor" fill-rule="evenodd" d="M12.737 2.676 8.531 7.264a1 1 0 0 0 .03 1.382l7.674 7.675a1 1 0 0 0 1.442-.029l4.589-4.97 1.468 1.357-4.588 4.97a3 3 0 0 1-3.46.689l-1.917 2.303-1.454.087-.63-.593-.828 1.38L10 22v-1l-.001-.001L10 22H1v-3l.18-.573 3.452-4.93-.817-.77.045-1.496 2.621-2.184a2.999 2.999 0 0 1 .577-3.134l4.205-4.589 1.474 1.352ZM3 19.315v.684h6.434l.76-1.268-4.09-3.85L3 19.314Zm3.007-7.27 6.904 6.498 1.217-1.46-6.667-6.25-1.454 1.212Z" clip-rule="evenodd"></path></svg>' },
+            { id: 'eraser-tool', tool: 'eraser', title: 'Ластик', svg: '<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" width="20" height="20" class="c-bxOhME c-bxOhME-dvzWZT-size-medium"><path fill="currentColor" fill-rule="evenodd" d="M12.63 3.957 4.319 12.27a3 3 0 0 0 0 4.242L7.905 20.1 8.612 20.394H21v-2h-5.6l6.629-6.63a3 3 0 0 0 0-4.242L17.858 3.42a3 3 0 0 0-4.242 0ZM5.12 14.293a1 1 0 0 0 0 1.414L8.414 19h3.172l3-3L9 10.414l-3.879 3.88Zm10.336-8.922a1 1 0 0 0-1.414 0l-3.629 3.63L16 14.585l3.63-3.629a1 1 0 0 0 0-1.414L15.457 5.37Z" clip-rule="evenodd"></path></svg>' }
         ];
         const row1 = document.createElement('div');
         row1.className = 'moodboard-draw__row';
@@ -781,7 +789,7 @@ export class Toolbar {
             if (this.currentDrawTool === 'pencil') {
                 const sizes = [
                     { id: 'size-thin-black', title: 'Тонкий черный', color: '#111827', dot: 4, width: 2 },
-                    { id: 'size-medium-red', title: 'Средний красный', color: '#ef4444', dot: 7, width: 4 },
+                    { id: 'size-medium-red', title: 'Средний красный', color: '#ef4444', dot: 8, width: 4 },
                     { id: 'size-thick-green', title: 'Толстый зеленый', color: '#16a34a', dot: 10, width: 6 }
                 ];
                 sizes.forEach(s => {
@@ -899,70 +907,194 @@ export class Toolbar {
         this.emojiPopupEl.className = 'moodboard-toolbar__popup moodboard-toolbar__popup--emoji';
         this.emojiPopupEl.style.display = 'none';
 
-        const categories = [
-            { title: 'Смайлики', items: ['😀','😁','😂','🤣','🙂','😊','😍','😘','😎','🤔','😴','😡','😭','😇','🤩','🤨','😐','😅','😏','🤗','🤫','😤','🤯','🤪'] },
-            { title: 'Жесты', items: ['👍','👎','👌','✌️','🤘','🤙','👏','🙌','🙏','💪','☝️','👋','🖐️','✋'] },
-            { title: 'Предметы', items: ['💡','📌','📎','📝','🖌️','🖼️','🗂️','📁','📷','🎥','🎯','🧩','🔒','🔑'] },
-            { title: 'Символы', items: ['⭐','🌟','✨','🔥','💥','⚡','❗','❓','✅','❌','💯','🔔','🌀'] },
-            { title: 'Животные', items: ['🐶','🐱','🦊','🐼','🐨','🐵','🐸','🐧','🐤','🦄','🐙'] }
-        ];
+        // Определяем способ загрузки эмоджи
+        let groups = new Map();
+        
+        if (typeof import.meta !== 'undefined' && import.meta.glob) {
+            // Режим с bundler (Vite) - используем import.meta.glob
+            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG,svg,SVG}', { eager: true, as: 'url' });
+            
+            // Группируем по подпапкам внутри emodji (категории)
+            const entries = Object.entries(modules).sort(([a], [b]) => a.localeCompare(b));
+            entries.forEach(([path, url]) => {
+                const marker = '/emodji/';
+                const idx = path.indexOf(marker);
+                let category = 'Разное';
+                if (idx >= 0) {
+                    const after = path.slice(idx + marker.length);
+                    const parts = after.split('/');
+                    category = parts.length > 1 ? parts[0] : 'Разное';
+                }
+                if (!groups.has(category)) groups.set(category, []);
+                groups.get(category).push({ path, url });
+            });
+        } else {
+            // Режим без bundler - используем статичный список
+            console.log('🎭 Toolbar: Режим без bundler, используем статичные эмоджи');
+            groups = this.getFallbackEmojiGroups();
+        }
+
+        // Задаем желаемый порядок категорий
+        const ORDER = ['Смайлики', 'Жесты', 'Женские эмоции', 'Котики', 'Разное'];
+        const present = [...groups.keys()];
+        const orderedFirst = ORDER.filter(name => groups.has(name));
+        const theRest = present.filter(name => !ORDER.includes(name)).sort((a, b) => a.localeCompare(b));
+        const orderedCategories = [...orderedFirst, ...theRest];
 
-        categories.forEach(cat => {
+        // Рендерим секции по категориям в нужном порядке
+        orderedCategories.forEach((cat) => {
             const section = document.createElement('div');
             section.className = 'moodboard-emoji__section';
+
             const title = document.createElement('div');
             title.className = 'moodboard-emoji__title';
-            title.textContent = cat.title;
+            title.textContent = cat;
+            section.appendChild(title);
+
             const grid = document.createElement('div');
             grid.className = 'moodboard-emoji__grid';
-            cat.items.forEach(ch => {
+
+            groups.get(cat).forEach(({ url }) => {
                 const btn = document.createElement('button');
                 btn.className = 'moodboard-emoji__btn';
-                btn.title = ch;
-                btn.textContent = ch;
+                btn.title = 'Добавить изображение';
+                const img = document.createElement('img');
+                img.className = 'moodboard-emoji__img';
+                img.src = url;
+                img.alt = '';
+                btn.appendChild(img);
+
+                // Перетаскивание: начинаем только если был реальный drag (движение > 4px)
+                btn.addEventListener('mousedown', (e) => {
+                    const startX = e.clientX;
+                    const startY = e.clientY;
+                    let startedDrag = false;
+                    const onMove = (ev) => {
+                        if (startedDrag) return;
+                        const dx = Math.abs(ev.clientX - startX);
+                        const dy = Math.abs(ev.clientY - startY);
+                        if (dx > 4 || dy > 4) {
+                            startedDrag = true;
+                            btn.__dragActive = true;
+                            const target = 64;
+                            const targetW = target;
+                            const targetH = target;
+                            // Активируем инструмент размещения и включаем режим placeOnMouseUp
+                            this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });
+                            this.eventBus.emit(Events.Place.Set, {
+                                type: 'image',
+                                properties: { src: url, width: targetW, height: targetH, isEmojiIcon: true },
+                                size: { width: targetW, height: targetH },
+                                placeOnMouseUp: true
+                            });
+                            // Закрываем поповер, чтобы не мешал курсору над холстом
+                            this.closeEmojiPopup();
+                            cleanup();
+                        }
+                    };
+                    const onUp = () => {
+                        cleanup();
+                        // Снимем флаг сразу после клика, чтобы click мог отфильтроваться
+                        setTimeout(() => { btn.__dragActive = false; }, 0);
+                    };
+                    const cleanup = () => {
+                        document.removeEventListener('mousemove', onMove);
+                        document.removeEventListener('mouseup', onUp);
+                    };
+                    document.addEventListener('mousemove', onMove);
+                    document.addEventListener('mouseup', onUp, { once: true });
+                });
+
                 btn.addEventListener('click', () => {
+                    if (btn.__dragActive) return; // не обрабатываем клик после drag
                     this.animateButton(btn);
-                    // Устанавливаем pending для размещения emoji кликом по холсту
-                    const size = 48; // базовый размер
+                    const target = 64; // кратно 128 для лучшей четкости при даунскейле
+                    const targetW = target;
+                    const targetH = target;
                     this.eventBus.emit(Events.Place.Set, {
-                        type: 'emoji',
-                        properties: { content: ch, fontSize: size, width: size, height: size },
-                        size: { width: size, height: size },
-                        // anchorCentered не используем, позиция ставится как топ-левт со смещением на половину размера
+                        type: 'image',
+                        properties: { src: url, width: targetW, height: targetH, isEmojiIcon: true },
+                        size: { width: targetW, height: targetH }
                     });
                     this.closeEmojiPopup();
                 });
+
                 grid.appendChild(btn);
             });
-            section.appendChild(title);
+
             section.appendChild(grid);
             this.emojiPopupEl.appendChild(section);
         });
+        this.container.appendChild(this.emojiPopupEl);
+    }
 
-        // Разделительная линия
-        const divider = document.createElement('div');
-        divider.className = 'moodboard-emoji__divider';
-        this.emojiPopupEl.appendChild(divider);
-
-        // Стикеры (простые крупные эмодзи или пиктограммы)
-        const stickersTitle = document.createElement('div');
-        stickersTitle.className = 'moodboard-stickers__title';
-        stickersTitle.textContent = 'Стикеры';
-        const stickersGrid = document.createElement('div');
-        stickersGrid.className = 'moodboard-stickers__grid';
+    /**
+     * Возвращает fallback группы эмоджи для работы без bundler
+     */
+    getFallbackEmojiGroups() {
+        const groups = new Map();
+        
+        // Определяем базовый путь для эмоджи
+        const basePath = this.getEmojiBasePath();
+        
+        // Статичный список эмоджи с реальными именами файлов
+        const fallbackEmojis = {
+            'Смайлики': [
+                '1f600.png', '1f601.png', '1f602.png', '1f603.png', '1f604.png',
+                '1f605.png', '1f606.png', '1f607.png', '1f609.png', '1f60a.png',
+                '1f60b.png', '1f60c.png', '1f60d.png', '1f60e.png', '1f60f.png',
+                '1f610.png', '1f611.png', '1f612.png', '1f613.png', '1f614.png',
+                '1f615.png', '1f616.png', '1f617.png', '1f618.png', '1f619.png'
+            ],
+            'Жесты': [
+                '1f446.png', '1f447.png', '1f448.png', '1f449.png', '1f44a.png',
+                '1f44b.png', '1f44c.png', '1f450.png', '1f4aa.png', '1f590.png',
+                '1f596.png', '1f64c.png', '1f64f.png', '270c.png', '270d.png'
+            ],
+            'Женские эмоции': [
+                '1f645.png', '1f646.png', '1f64b.png', '1f64d.png', '1f64e.png'
+            ],
+            'Котики': [
+                '1f638.png', '1f639.png', '1f63a.png', '1f63b.png', '1f63c.png',
+                '1f63d.png', '1f63e.png', '1f63f.png', '1f640.png'
+            ],
+            'Разное': [
+                '1f440.png', '1f441.png', '1f499.png', '1f4a1.png', '1f4a3.png',
+                '1f4a9.png', '1f4ac.png', '1f4af.png', '2764.png', '203c.png', '26d4.png'
+            ]
+        };
 
-        const stickers = ['📌','📎','🗂️','📁','🧩','🎯','💡','⭐','🔥','🚀','🎉','🧠'];
-        stickers.forEach(s => {
-            const btn = document.createElement('button');
-            btn.className = 'moodboard-sticker__btn';
-            btn.title = s;
-            btn.textContent = s;
-            btn.addEventListener('click', () => this.animateButton(btn));
-            stickersGrid.appendChild(btn);
+        Object.entries(fallbackEmojis).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(file => ({
+                path: `${basePath}${category}/${file}`,
+                url: `${basePath}${category}/${file}`
+            }));
+            groups.set(category, emojiList);
         });
-        this.emojiPopupEl.appendChild(stickersTitle);
-        this.emojiPopupEl.appendChild(stickersGrid);
-        this.container.appendChild(this.emojiPopupEl);
+
+        return groups;
+    }
+
+    /**
+     * Определяет базовый путь для эмоджи в зависимости от режима
+     */
+    getEmojiBasePath() {
+        // Проверяем, есть ли глобальная настройка базового пути
+        if (window.MOODBOARD_BASE_PATH) {
+            return `${window.MOODBOARD_BASE_PATH}src/assets/emodji/`;
+        }
+        
+        // Попытка определить автоматически
+        const scripts = document.querySelectorAll('script[src]');
+        for (const script of scripts) {
+            if (script.src.includes('moodboard') || script.src.includes('node_modules')) {
+                const baseUrl = new URL(script.src).origin;
+                return `${baseUrl}/node_modules/moodboard-futurello/src/assets/emodji/`;
+            }
+        }
+        
+        // Fallback: относительный путь
+        return './src/assets/emodji/';
     }
 
     toggleEmojiPopup(anchorButton) {
@@ -999,6 +1131,38 @@ export class Toolbar {
             this.emojiPopupEl.style.display = 'none';
         }
     }
+
+    /**
+     * Показывает диалог подтверждения очистки холста
+     */
+    showClearConfirmation() {
+        // Проверяем, есть ли объекты на холсте для очистки
+        let hasObjects = false;
+        const checkData = { objects: [] };
+        this.eventBus.emit(Events.Tool.GetAllObjects, checkData);
+        hasObjects = checkData.objects && checkData.objects.length > 0;
+
+        if (!hasObjects) {
+            // Если холст уже пуст, показываем уведомление
+            alert('Холст уже пуст');
+            return;
+        }
+
+        // Показываем диалог подтверждения
+        const confirmed = confirm(
+            'Вы уверены, что хотите очистить холст?\n\n' +
+            'Это действие удалит все объекты с холста и не может быть отменено.'
+        );
+
+        if (confirmed) {
+            // Пользователь подтвердил - выполняем очистку
+            this.eventBus.emit(Events.UI.ToolbarAction, {
+                type: 'clear',
+                id: 'clear'
+            });
+        }
+        // Если не подтвердил - ничего не делаем
+    }
     
     /**
      * Изменение темы

package/src/ui/Topbar.js

@@ -14,6 +14,15 @@ export class Topbar {
         // Загружаем иконки
         this.iconLoader = new TopbarIconLoader();
         this.icons = this.iconLoader.icons;
+        // Палитра кнопки заливки и соответствие цвету фона доски
+        this._palette = [
+            { id: 1, name: 'default-light', btnHex: '#B3E5FC', board: '#f7fbff' },
+            { 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' },
+            { id: 5, name: 'white',         btnHex: '#ffffff', board: '#ffffff' }
+        ];
+        this._pendingPaintHex = null;
         this.init();
     }
 
@@ -34,6 +43,21 @@ export class Topbar {
         this.eventBus.on(Events.UI.GridCurrent, ({ type }) => {
             this.setActive(type);
         });
+
+        // Обновляем цвет кнопки "краски" при выборе цвета фона
+        this.eventBus.on(Events.UI.PaintPick, ({ btnHex }) => {
+            if (!btnHex) return;
+            this.setPaintButtonHex(btnHex);
+        });
+
+        // Инициализация цвета кнопки "краска" из текущего фона доски, если доступен
+        try {
+            const bgHex = this._getCurrentBoardBackgroundHex();
+            if (bgHex) {
+                const mapped = this.mapBoardToBtnHex(bgHex);
+                this.setPaintButtonHex(mapped);
+            }
+        } catch (_) {}
     }
 
     createTopbar() {
@@ -104,6 +128,12 @@ export class Topbar {
         
         paintBtn.dataset.action = 'paint-toggle';
         this.element.appendChild(paintBtn);
+        this._paintBtn = paintBtn;
+        // Применяем отложенный цвет, если был задан до создания кнопки
+        if (this._pendingPaintHex) {
+            try { this._paintBtn.style.setProperty('--paint-btn-color', this._pendingPaintHex); } catch (_) {}
+            this._pendingPaintHex = null;
+        }
 
         // (кнопки зума вынесены в отдельную панель справа)
 
@@ -160,6 +190,34 @@ export class Topbar {
         // Зум обрабатывается в отдельной панели
     }
 
+    /** Возвращает текущий цвет фона канваса как hex-строку #RRGGBB */
+    _getCurrentBoardBackgroundHex() {
+        try {
+            const app = window?.moodboard?.core?.pixi?.app;
+            const colorInt = app?.renderer?.background?.color ?? app?.renderer?.backgroundColor;
+            if (typeof colorInt !== 'number') return null;
+            const hex = `#${colorInt.toString(16).padStart(6, '0')}`;
+            return hex.toLowerCase();
+        } catch (_) { return null; }
+    }
+
+    /** Маппинг цвета фона к цвету кнопки палитры */
+    mapBoardToBtnHex(boardHex) {
+        if (!boardHex) return null;
+        const found = this._palette.find(p => p.board.toLowerCase() === boardHex.toLowerCase());
+        return found ? found.btnHex : boardHex;
+    }
+
+    /** Установить цвет кнопки палитры */
+    setPaintButtonHex(btnHex) {
+        if (!btnHex) return;
+        if (this._paintBtn) {
+            try { this._paintBtn.style.setProperty('--paint-btn-color', btnHex); } catch (_) {}
+        } else {
+            this._pendingPaintHex = btnHex;
+        }
+    }
+
     setActive(type) {
         const buttons = this.element.querySelectorAll('.moodboard-topbar__button');
         buttons.forEach((b) => b.classList.remove('moodboard-topbar__button--active'));
@@ -186,37 +244,81 @@ export class Topbar {
         // 3: фон #fffcf7, кнопка #FFF3E0
         // 4: фон #f5f5f5, кнопка #f5f5f5
         // 5: фон #ffffff, кнопка #ffffff
-        const colors = [
-            { id: 1, name: 'default-light', hex: '#B3E5FC', board: '#f7fbff' },
-            { id: 2, name: 'mint-light',    hex: '#E8F5E9', board: '#f8fff7' },
-            { id: 3, name: 'peach-light',   hex: '#FFF3E0', board: '#fffcf7' },
-            { id: 4, name: 'gray-light',    hex: '#f5f5f5', board: '#f5f5f5' },
-            { id: 5, name: 'white',         hex: '#ffffff', board: '#ffffff' }
-        ];
+        const colors = this._palette.map(c => ({ id: c.id, name: c.name, hex: c.btnHex, board: c.board }));
         const grid = document.createElement('div');
         grid.className = 'moodboard-topbar__paint-grid';
+        const darken = (hex, amount = 0.25) => {
+            try {
+                const h = hex.replace('#','');
+                const r = parseInt(h.substring(0,2), 16);
+                const g = parseInt(h.substring(2,4), 16);
+                const b = parseInt(h.substring(4,6), 16);
+                const dr = Math.max(0, Math.min(255, Math.round(r * (1 - amount))));
+                const dg = Math.max(0, Math.min(255, Math.round(g * (1 - amount))));
+                const db = Math.max(0, Math.min(255, Math.round(b * (1 - amount))));
+                return `#${dr.toString(16).padStart(2,'0')}${dg.toString(16).padStart(2,'0')}${db.toString(16).padStart(2,'0')}`;
+            } catch (_) { return hex; }
+        };
+
         colors.forEach(c => {
             const b = document.createElement('button');
             b.type = 'button';
             b.className = 'moodboard-topbar__paint-btn';
             b.title = `Цвет ${c.id}`;
             b.style.background = c.hex;
+            // Тёмная обводка того же цвета
+            b.style.borderColor = darken(c.hex, 0.35);
+            // Цвет галочки — чёрный для максимальной видимости
+            b.style.color = '#111';
+            // Для надёжного сравнения — сохраняем исходный hex в dataset
+            b.dataset.hex = String(c.hex).toLowerCase();
+            // Галочка по центру
+            const tick = document.createElement('i');
+            tick.className = 'moodboard-topbar__paint-tick';
+            b.appendChild(tick);
             b.dataset.colorId = String(c.id);
             b.addEventListener('click', () => {
-                this.eventBus.emit(Events.UI.PaintPick, { id: c.id, color: c.board, name: c.name });
-                if (this._paintPopover) this._paintPopover.remove();
-                this._paintPopover = null;
+                // Обновляем галочку на выбранном цвете
+                try {
+                    const prev = grid.querySelector('.moodboard-topbar__paint-btn.is-active');
+                    if (prev) prev.classList.remove('is-active');
+                    b.classList.add('is-active');
+                } catch (_) {}
+                // Мгновенно обновляем цвет кнопки "краска"
+                this.setPaintButtonHex(c.hex);
+                // Передаём выбор в ядро для смены фона
+                this.eventBus.emit(Events.UI.PaintPick, { id: c.id, color: c.board, name: c.name, btnHex: c.hex });
+                // Поповер не закрываем, чтобы пользователь видел галочку и мог передумать
             });
             grid.appendChild(b);
         });
         pop.appendChild(grid);
 
+        // Выделяем активный цвет галочкой
+        try {
+            const boardHex = this._getCurrentBoardBackgroundHex();
+            const targetHex = (this.mapBoardToBtnHex(boardHex) || '#B3E5FC').toLowerCase();
+            const match = grid.querySelector(`[data-hex="${targetHex}"]`);
+            if (match) match.classList.add('is-active');
+        } catch (_) {}
+
         // позиционируем поповер
         const rect = anchorBtn.getBoundingClientRect();
         pop.style.position = 'absolute';
         pop.style.left = `${rect.left - this.element.getBoundingClientRect().left}px`;
         pop.style.top = `${rect.bottom - this.element.getBoundingClientRect().top + 6}px`;
 
+        // Подсветить текущий активный кружок (с галочкой)
+        try {
+            const currentBtnHex = (this._paintBtn && getComputedStyle(this._paintBtn).getPropertyValue('--paint-btn-color')) || '';
+            const normalized = currentBtnHex.trim() || '#B3E5FC';
+            const match = Array.from(grid.children).find((el) => {
+                const bg = el && el.style && el.style.background ? el.style.background.toLowerCase() : '';
+                return bg === normalized.toLowerCase();
+            });
+            if (match) match.classList.add('is-active');
+        } catch (_) {}
+
         this.element.appendChild(pop);
         this._paintPopover = pop;
 

package/src/ui/ZoomPanel.js

@@ -18,7 +18,10 @@ export class ZoomPanel {
         const zoomOutBtn = document.createElement('button');
         zoomOutBtn.className = 'moodboard-zoombar__button';
         zoomOutBtn.title = 'Уменьшить масштаб';
-        zoomOutBtn.textContent = '−';
+        const zoomOutIcon = document.createElement('span');
+        zoomOutIcon.className = 'moodboard-zoombar__icon';
+        zoomOutIcon.textContent = '−';
+        zoomOutBtn.appendChild(zoomOutIcon);
         zoomOutBtn.dataset.action = 'zoom-out';
 
         const label = document.createElement('span');
@@ -37,7 +40,10 @@ export class ZoomPanel {
         const zoomInBtn = document.createElement('button');
         zoomInBtn.className = 'moodboard-zoombar__button';
         zoomInBtn.title = 'Увеличить масштаб';
-        zoomInBtn.textContent = '+';
+        const zoomInIcon = document.createElement('span');
+        zoomInIcon.className = 'moodboard-zoombar__icon';
+        zoomInIcon.textContent = '+';
+        zoomInBtn.appendChild(zoomInIcon);
         zoomInBtn.dataset.action = 'zoom-in';
 
         this.element.appendChild(zoomOutBtn);

package/src/ui/styles/index.css

@@ -0,0 +1,5 @@
+@import './workspace.css';
+@import './toolbar.css';
+@import './topbar.css';
+@import './panels.css';
+