@sequent-org/moodboard 1.2.0 → 1.2.2

package/package.json

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

package/src/index.js

@@ -1,2 +1,7 @@
-// Единственный экспорт пакета - готовый MoodBoard с UI
+// Основной экспорт пакета - готовый MoodBoard с UI
 export { MoodBoard } from './moodboard/MoodBoard.js';
+
+// Дополнительные экспорты для работы без bundler
+export { initMoodBoardNoBundler, quickInitMoodBoard, injectCriticalStyles } from './initNoBundler.js';
+export { StyleLoader } from './utils/styleLoader.js';
+export { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';

package/src/initNoBundler.js

@@ -0,0 +1,147 @@
+/**
+ * Инициализация MoodBoard для использования без bundler (в Laravel и др.)
+ */
+import { MoodBoard } from './moodboard/MoodBoard.js';
+import { StyleLoader } from './utils/styleLoader.js';
+import { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';
+
+/**
+ * Инициализирует MoodBoard с автоматической загрузкой стилей и ресурсов
+ * @param {string|HTMLElement} container - контейнер для MoodBoard
+ * @param {Object} options - опции MoodBoard
+ * @param {string} basePath - базовый путь к пакету (например: '/node_modules/moodboard-futurello/')
+ * @returns {Promise<MoodBoard>} готовый экземпляр MoodBoard
+ */
+export async function initMoodBoardNoBundler(container, options = {}, basePath = '') {
+    console.log('🚀 Инициализация MoodBoard без bundler...');
+    
+    // 1. Загружаем стили
+    const styleLoader = new StyleLoader();
+    await styleLoader.loadAllStyles(basePath);
+    
+    // 2. Инициализируем загрузчик эмоджи
+    const emojiLoader = new EmojiLoaderNoBundler();
+    emojiLoader.init(basePath);
+    
+    // 3. Загружаем эмоджи для использования в панели
+    const emojiGroups = await emojiLoader.loadEmojis();
+    
+    // 4. Передаем загрузчик эмоджи в опции
+    const enhancedOptions = {
+        ...options,
+        emojiLoader: emojiLoader,
+        emojiGroups: emojiGroups,
+        emojiBasePath: basePath ? `${basePath}src/assets/emodji/` : null,
+        noBundler: true
+    };
+    
+    // 5. Создаем MoodBoard
+    const moodboard = new MoodBoard(container, enhancedOptions);
+    
+    console.log('✅ MoodBoard инициализирован без bundler');
+    
+    return moodboard;
+}
+
+/**
+ * Инжектирует критичные стили inline для мгновенного отображения
+ */
+export function injectCriticalStyles() {
+    const criticalCSS = `
+        /* Критичные стили для мгновенного отображения */
+        .moodboard-workspace {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #f7fbff;
+        }
+        
+        .moodboard-toolbar {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 1000;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .moodboard-topbar {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1000;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            height: 44px;
+        }
+        
+        .moodboard-html-handles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 999;
+        }
+        
+        /* Скрыть до полной загрузки стилей */
+        .moodboard-toolbar__popup,
+        .moodboard-properties-panel {
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .moodboard-styles-loaded .moodboard-toolbar__popup,
+        .moodboard-styles-loaded .moodboard-properties-panel {
+            opacity: 1;
+        }
+    `;
+
+    const style = document.createElement('style');
+    style.id = 'moodboard-critical-styles';
+    style.textContent = criticalCSS;
+    document.head.appendChild(style);
+}
+
+/**
+ * Простая инициализация только с критичными стилями
+ * Для быстрого запуска, полные стили загружаются асинхронно
+ */
+export function quickInitMoodBoard(container, options = {}, basePath = '') {
+    // Инжектируем критичные стили сразу
+    injectCriticalStyles();
+    
+    // Загружаем полные стили асинхронно
+    const styleLoader = new StyleLoader();
+    styleLoader.loadAllStyles(basePath).then(() => {
+        // Добавляем класс для показа полностью загруженных стилей
+        if (typeof container === 'string') {
+            container = document.querySelector(container);
+        }
+        if (container) {
+            container.classList.add('moodboard-styles-loaded');
+        }
+    });
+    
+    // Создаем MoodBoard с fallback эмоджи
+    const moodboard = new MoodBoard(container, {
+        ...options,
+        noBundler: true,
+        skipEmojiLoader: true, // Пропускаем автозагрузку эмоджи
+        emojiBasePath: basePath ? `${basePath}src/assets/emodji/` : null
+    });
+    
+    return moodboard;
+}

package/src/moodboard/MoodBoard.js

@@ -159,7 +159,10 @@ export class MoodBoard {
         this.toolbar = new Toolbar(
             this.toolbarContainer, 
             this.coreMoodboard.eventBus,
-            this.options.theme
+            this.options.theme,
+            {
+                emojiBasePath: this.options.emojiBasePath || null
+            }
         );
         
         // Добавляем функцию для отладки иконок в window

package/src/tools/object-tools/PlacementTool.js

@@ -103,9 +103,16 @@ export class PlacementTool extends BaseTool {
 
             // Обработка выбора файла
             this.eventBus.on(Events.Place.FileSelected, (fileData) => {
+                console.log('📁 PlacementTool: получен FileSelected:', fileData);
                 this.selectedFile = fileData;
                 this.selectedImage = null;
-                this.showFileGhost();
+                
+                // Если PlacementTool уже активен - показываем призрак сразу
+                if (this.world) {
+                    this.showFileGhost();
+                } else {
+                    console.log('📁 PlacementTool: world не готов, призрак будет показан при активации');
+                }
             });
 
             // Обработка отмены выбора файла
@@ -547,7 +554,16 @@ export class PlacementTool extends BaseTool {
      * Показать "призрак" файла
      */
     showFileGhost() {
-        if (!this.selectedFile || !this.world) return;
+        console.log('📁 PlacementTool.showFileGhost:', {
+            hasSelectedFile: !!this.selectedFile,
+            hasWorld: !!this.world,
+            selectedFileData: this.selectedFile
+        });
+        
+        if (!this.selectedFile || !this.world) {
+            console.warn('⚠️ Не можем показать призрак файла - нет selectedFile или world');
+            return;
+        }
         
         this.hideGhost(); // Сначала убираем старый призрак
         
@@ -562,9 +578,10 @@ export class PlacementTool extends BaseTool {
             const worldPoint = this._toWorld(cursorX, cursorY);
             this.updateGhostPosition(worldPoint.x, worldPoint.y);
         }
-        // Попробуем дождаться загрузки веб-шрифта Caveat до отрисовки
-        const pendingFont = (this.pending.properties?.fontFamily) || 'Caveat, Arial, cursive';
-        const primaryFont = String(pendingFont).split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
+        // Попробуем дождаться загрузки веб-шрифта Caveat до отрисовки  
+        // Для файлов используем selectedFile, а не pending
+        const fileFont = (this.selectedFile.properties?.fontFamily) || 'Caveat, Arial, cursive';
+        const primaryFont = String(fileFont).split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
         
         // Размеры
         const width = this.selectedFile.properties.width || 120;
@@ -622,6 +639,13 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer.pivot.y = height / 2;
         
         this.world.addChild(this.ghostContainer);
+        
+        console.log('📁 Призрак файла создан и добавлен в world:', {
+            ghostContainerSize: { w: width, h: height },
+            ghostContainerAlpha: this.ghostContainer.alpha,
+            worldHasContainer: this.world.children.includes(this.ghostContainer),
+            ghostContainerChildren: this.ghostContainer.children.length
+        });
     }
 
     /**
@@ -722,9 +746,10 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
         
-        // Размеры призрака
-        const maxWidth = this.selectedImage.properties.width || 300;
-        const maxHeight = this.selectedImage.properties.height || 200;
+        // Размеры призрака - используем размеры из pending/selected, если есть
+        const isEmojiIcon = this.selectedImage.properties?.isEmojiIcon;
+        const maxWidth = this.selectedImage.properties.width || (isEmojiIcon ? 64 : 300);
+        const maxHeight = this.selectedImage.properties.height || (isEmojiIcon ? 64 : 200);
         
         try {
             // Создаем превью изображения
@@ -816,8 +841,10 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6;
 
-        const maxWidth = this.pending.size?.width || this.pending.properties?.width || 56;
-        const maxHeight = this.pending.size?.height || this.pending.properties?.height || 56;
+        // Для эмоджи используем точные размеры из pending для согласованности
+        const isEmojiIcon = this.pending.properties?.isEmojiIcon;
+        const maxWidth = this.pending.size?.width || this.pending.properties?.width || (isEmojiIcon ? 64 : 56);
+        const maxHeight = this.pending.size?.height || this.pending.properties?.height || (isEmojiIcon ? 64 : 56);
 
         try {
             const texture = await PIXI.Texture.fromURL(src);
@@ -853,15 +880,23 @@ export class PlacementTool extends BaseTool {
 
         this.world.addChild(this.ghostContainer);
 
-        // Кастомный курсор: мини-превью иконки рядом с курсором
-        try {
-            if (this.app && this.app.view && src) {
-                const cursorSize = 24;
-                const url = encodeURI(src);
-                // Используем CSS cursor с изображением, если поддерживается
-                this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+        // Для эмоджи не используем кастомный курсор, чтобы избежать дублирования призраков
+        if (!isEmojiIcon) {
+            // Кастомный курсор только для обычных изображений
+            try {
+                if (this.app && this.app.view && src) {
+                    const cursorSize = 24;
+                    const url = encodeURI(src);
+                    // Используем CSS cursor с изображением, если поддерживается
+                    this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+                }
+            } catch (_) {}
+        } else {
+            // Для эмоджи используем стандартный курсор
+            if (this.app && this.app.view) {
+                this.app.view.style.cursor = 'crosshair';
             }
-        } catch (_) {}
+        }
     }
 
     /**

package/src/ui/Toolbar.js

@@ -5,11 +5,14 @@ import { Events } from '../core/events/Events.js';
 import { IconLoader } from '../utils/iconLoader.js';
 
 export class Toolbar {
-    constructor(container, eventBus, theme = 'light') {
+    constructor(container, eventBus, theme = 'light', options = {}) {
         this.container = container;
         this.eventBus = eventBus;
         this.theme = theme;
         
+        // Базовый путь для ассетов (эмоджи и другие ресурсы)
+        this.emojiBasePath = options.emojiBasePath || null;
+        
         // Инициализируем IconLoader
         this.iconLoader = new IconLoader();
         
@@ -906,24 +909,33 @@ export class Toolbar {
         this.emojiPopupEl = document.createElement('div');
         this.emojiPopupEl.className = 'moodboard-toolbar__popup moodboard-toolbar__popup--emoji';
         this.emojiPopupEl.style.display = 'none';
-        // Загружаем все изображения из папки src/assets/emodji (png/svg) через 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));
-        const groups = new Map();
-        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 });
-        });
+        // Определяем способ загрузки эмоджи
+        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 = ['Смайлики', 'Жесты', 'Женские эмоции', 'Котики', 'Разное'];
@@ -957,9 +969,13 @@ export class Toolbar {
 
                 // Перетаскивание: начинаем только если был реальный drag (движение > 4px)
                 btn.addEventListener('mousedown', (e) => {
+                    // Блокируем одновременную обработку
+                    if (btn.__clickProcessing || btn.__dragActive) return;
+                    
                     const startX = e.clientX;
                     const startY = e.clientY;
                     let startedDrag = false;
+                    
                     const onMove = (ev) => {
                         if (startedDrag) return;
                         const dx = Math.abs(ev.clientX - startX);
@@ -967,6 +983,10 @@ export class Toolbar {
                         if (dx > 4 || dy > 4) {
                             startedDrag = true;
                             btn.__dragActive = true;
+                            
+                            // Блокируем click handler
+                            btn.__clickProcessing = true;
+                            
                             const target = 64;
                             const targetW = target;
                             const targetH = target;
@@ -985,8 +1005,11 @@ export class Toolbar {
                     };
                     const onUp = () => {
                         cleanup();
-                        // Снимем флаг сразу после клика, чтобы click мог отфильтроваться
-                        setTimeout(() => { btn.__dragActive = false; }, 0);
+                        // Снимаем флаги с задержкой
+                        setTimeout(() => { 
+                            btn.__dragActive = false;
+                            btn.__clickProcessing = false;
+                        }, 50);
                     };
                     const cleanup = () => {
                         document.removeEventListener('mousemove', onMove);
@@ -996,8 +1019,13 @@ export class Toolbar {
                     document.addEventListener('mouseup', onUp, { once: true });
                 });
 
-                btn.addEventListener('click', () => {
-                    if (btn.__dragActive) return; // не обрабатываем клик после drag
+                btn.addEventListener('click', (e) => {
+                    // Блокируем обработку клика если был drag или если уже обрабатывается
+                    if (btn.__dragActive || btn.__clickProcessing) return;
+                    
+                    btn.__clickProcessing = true;
+                    setTimeout(() => { btn.__clickProcessing = false; }, 100);
+                    
                     this.animateButton(btn);
                     const target = 64; // кратно 128 для лучшей четкости при даунскейле
                     const targetW = target;
@@ -1019,6 +1047,96 @@ export class Toolbar {
         this.container.appendChild(this.emojiPopupEl);
     }
 
+    /**
+     * Возвращает 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'
+            ]
+        };
+
+        Object.entries(fallbackEmojis).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(file => ({
+                path: `${basePath}${category}/${file}`,
+                url: `${basePath}${category}/${file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Определяет базовый путь для эмоджи в зависимости от режима
+     */
+    getEmojiBasePath() {
+        // 1. Приоритет: опция basePath из конструктора
+        if (this.emojiBasePath) {
+            return this.emojiBasePath.endsWith('/') ? this.emojiBasePath : this.emojiBasePath + '/';
+        }
+
+        // 2. Глобальная настройка (абсолютный URL)
+        if (window.MOODBOARD_BASE_PATH) {
+            const basePath = window.MOODBOARD_BASE_PATH.endsWith('/') ? window.MOODBOARD_BASE_PATH : window.MOODBOARD_BASE_PATH + '/';
+            return `${basePath}src/assets/emodji/`;
+        }
+        
+        // 3. Вычисление от URL текущего модуля (import.meta.url)
+        try {
+            // Используем import.meta.url для получения абсолютного пути к ассетам
+            const currentModuleUrl = import.meta.url;
+            // От текущего модуля (ui/Toolbar.js) поднимаемся к корню пакета и идем к assets
+            const emojiUrl = new URL('../assets/emodji/', currentModuleUrl).href;
+            return emojiUrl;
+        } catch (error) {
+            console.warn('⚠️ Не удалось определить путь через import.meta.url:', error);
+        }
+        
+        // 4. Fallback: поиск script тега для определения базового URL
+        try {
+            const currentScript = document.currentScript;
+            if (currentScript && currentScript.src) {
+                // Пытаемся определить от текущего скрипта
+                const scriptUrl = new URL(currentScript.src);
+                const baseUrl = new URL('../assets/emodji/', scriptUrl).href;
+                return baseUrl;
+            }
+        } catch (error) {
+            console.warn('⚠️ Не удалось определить путь через currentScript:', error);
+        }
+        
+        // 5. Последний fallback: абсолютный путь от корня домена
+        return '/src/assets/emodji/';
+    }
+
     toggleEmojiPopup(anchorButton) {
         if (!this.emojiPopupEl) return;
         if (this.emojiPopupEl.style.display === 'none') {
@@ -1124,7 +1242,7 @@ export class Toolbar {
                 }
 
                 // Файл выбран - запускаем режим "призрака"
-                this.eventBus.emit(Events.Place.FileSelected, {
+                const fileSelectedData = {
                     file: file,
                     fileName: file.name,
                     fileSize: file.size,
@@ -1133,7 +1251,10 @@ export class Toolbar {
                         width: 120,
                         height: 140
                     }
-                });
+                };
+                
+                console.log('📁 Toolbar: эмитируем FileSelected:', fileSelectedData);
+                this.eventBus.emit(Events.Place.FileSelected, fileSelectedData);
 
                 // Активируем инструмент размещения
                 this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'place' });

package/src/utils/emojiLoaderNoBundler.js

@@ -0,0 +1,120 @@
+/**
+ * Загрузчик эмоджи для работы без bundler
+ * Заменяет import.meta.glob на динамическую загрузку
+ */
+export class EmojiLoaderNoBundler {
+    constructor() {
+        this.emojiCache = new Map();
+        this.basePath = '';
+    }
+
+    /**
+     * Инициализация с базовым путем
+     * @param {string} basePath - путь к папке с эмоджи (например: '/node_modules/moodboard-futurello/')
+     */
+    init(basePath = '') {
+        this.basePath = basePath;
+    }
+
+    /**
+     * Загружает список эмоджи из статичного индекса
+     * @returns {Promise<Map>} карта категорий и эмоджи
+     */
+    async loadEmojis() {
+        try {
+            // Попытка загрузить индекс эмоджи из JSON файла
+            const response = await fetch(`${this.basePath}src/assets/emodji/index.json`);
+            if (response.ok) {
+                const emojiIndex = await response.json();
+                return this.processEmojiIndex(emojiIndex);
+            }
+        } catch (error) {
+            console.warn('⚠️ Не удалось загрузить индекс эмоджи, используем fallback');
+        }
+
+        // Fallback: используем статичный список популярных эмоджи
+        return this.getFallbackEmojis();
+    }
+
+    /**
+     * Обрабатывает индекс эмоджи
+     * @param {Object} emojiIndex - индекс эмоджи из JSON
+     */
+    processEmojiIndex(emojiIndex) {
+        const groups = new Map();
+        
+        Object.entries(emojiIndex).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(emoji => ({
+                path: `${this.basePath}src/assets/emodji/${category}/${emoji.file}`,
+                url: `${this.basePath}src/assets/emodji/${category}/${emoji.file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Возвращает fallback список эмоджи
+     */
+    getFallbackEmojis() {
+        const groups = new Map();
+
+        // Статичный список популярных эмоджи
+        const fallbackEmojis = {
+            'Смайлики': [
+                '1f600.png', '1f601.png', '1f602.png', '1f603.png', '1f604.png',
+                '1f605.png', '1f606.png', '1f607.png', '1f608.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', '1f61a.png', '1f61b.png', '1f61c.png', '1f61d.png',
+                '1f61e.png', '1f61f.png', '1f620.png', '1f621.png', '1f622.png'
+            ],
+            'Жесты': [
+                '1f44d.png', '1f44e.png', '1f44f.png', '1f450.png', '1f451.png',
+                '1f590.png', '270c.png', '1f91d.png', '1f64f.png', '1f44c.png'
+            ],
+            'Разное': [
+                '2764.png', '1f494.png', '1f49c.png', '1f49a.png', '1f495.png',
+                '1f496.png', '1f497.png', '1f498.png', '1f499.png', '1f49b.png'
+            ]
+        };
+
+        Object.entries(fallbackEmojis).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(file => ({
+                path: `${this.basePath}src/assets/emodji/${category}/${file}`,
+                url: `${this.basePath}src/assets/emodji/${category}/${file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Создает индексный JSON файл из существующих эмоджи
+     * Эта функция должна быть вызвана в dev режиме для генерации индекса
+     */
+    async generateEmojiIndex() {
+        // Эта функция может быть вызвана только в dev среде с bundler
+        if (typeof import.meta !== 'undefined' && import.meta.glob) {
+            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG}', { eager: true, as: 'url' });
+            const index = {};
+            
+            Object.keys(modules).forEach(path => {
+                const match = path.match(/\/emodji\/([^\/]+)\/([^\/]+)$/);
+                if (match) {
+                    const [, category, file] = match;
+                    if (!index[category]) index[category] = [];
+                    index[category].push({ file });
+                }
+            });
+
+            console.log('📁 Индекс эмоджи:', JSON.stringify(index, null, 2));
+            return index;
+        }
+        
+        return null;
+    }
+}

package/src/utils/emojiResolver.js

@@ -67,13 +67,19 @@ export function emojiToLocalUrl(emoji) {
     }
 }
 
-// Карта локальных изображений (SVG и PNG) из src/assets/emodji (собирается Vite'ом)
-// Ключи вида '../assets/emodji/1f600.svg' / '../assets/emodji/1f600.png' → URL
-const _localEmojiModules = import.meta && typeof import.meta.glob === 'function'
-  ? {
-      ...import.meta.glob('../assets/emodji/**/*.{svg,SVG,png,PNG}', { eager: true, query: '?url', import: 'default' })
+// Карта локальных изображений (SVG и PNG) из src/assets/emodji
+// В режиме с bundler используем import.meta.glob, иначе fallback
+const _localEmojiModules = (() => {
+  if (typeof import.meta !== 'undefined' && import.meta.glob) {
+    try {
+      return import.meta.glob('../assets/emodji/**/*.{svg,SVG,png,PNG}', { eager: true, query: '?url', import: 'default' });
+    } catch (error) {
+      console.warn('⚠️ import.meta.glob failed, using fallback for emoji resolution');
+      return {};
     }
-  : {};
+  }
+  return {};
+})();
 
 // Индекс по имени файла (без пути)
 const _localEmojiIndex = (() => {
@@ -119,3 +125,44 @@ export function buildLocalPaths(emoji) {
     }
 }
 
+/**
+ * Возвращает абсолютный URL для эмоджи с учетом базового пути
+ * @param {string} emoji - эмоджи символ
+ * @param {string} basePath - базовый путь к ассетам
+ * @returns {string|null} абсолютный URL или null
+ */
+export function resolveEmojiAbsoluteUrl(emoji, basePath = null) {
+    try {
+        const base = emojiFilenameBase(emoji);
+        if (!base) return null;
+        
+        // Определяем базовый путь
+        let resolvedBasePath = basePath;
+        
+        if (!resolvedBasePath) {
+            // Пытаемся определить от import.meta.url
+            try {
+                resolvedBasePath = new URL('../assets/emodji/', import.meta.url).href;
+            } catch (error) {
+                // Fallback на глобальную настройку
+                if (window.MOODBOARD_BASE_PATH) {
+                    const globalPath = window.MOODBOARD_BASE_PATH.endsWith('/') ? window.MOODBOARD_BASE_PATH : window.MOODBOARD_BASE_PATH + '/';
+                    resolvedBasePath = `${globalPath}src/assets/emodji/`;
+                } else {
+                    resolvedBasePath = '/src/assets/emodji/';
+                }
+            }
+        }
+        
+        // Формируем URL (приоритет PNG, потом SVG)
+        if (!resolvedBasePath.endsWith('/')) resolvedBasePath += '/';
+        
+        // Возвращаем URL в формате готовом для использования
+        return `${resolvedBasePath}Смайлики/${base}.png`; // Большинство эмоджи в папке Смайлики
+        
+    } catch (error) {
+        console.warn('⚠️ Ошибка resolveEmojiAbsoluteUrl:', error);
+        return null;
+    }
+}
+

package/src/utils/styleLoader.js

@@ -0,0 +1,84 @@
+/**
+ * Утилита для загрузки CSS стилей без bundler
+ * Подключает все необходимые стили для MoodBoard
+ */
+export class StyleLoader {
+    constructor() {
+        this.loadedStyles = new Set();
+    }
+
+    /**
+     * Загружает все стили MoodBoard
+     * @param {string} basePath - базовый путь к node_modules или dist
+     */
+    async loadAllStyles(basePath = '') {
+        const styles = [
+            'src/ui/styles/workspace.css',
+            'src/ui/styles/toolbar.css', 
+            'src/ui/styles/topbar.css',
+            'src/ui/styles/panels.css'
+        ];
+
+        console.log('🎨 StyleLoader: Загружаем стили MoodBoard...');
+
+        for (const stylePath of styles) {
+            try {
+                await this.loadStyle(basePath + stylePath);
+                console.log(`✅ Стиль загружен: ${stylePath}`);
+            } catch (error) {
+                console.warn(`⚠️ Ошибка загрузки стиля ${stylePath}:`, error);
+            }
+        }
+
+        console.log('🎨 StyleLoader: Все стили загружены');
+    }
+
+    /**
+     * Загружает отдельный CSS файл
+     * @param {string} href - путь к CSS файлу
+     */
+    async loadStyle(href) {
+        // Проверяем, не загружен ли уже этот стиль
+        if (this.loadedStyles.has(href)) {
+            return;
+        }
+
+        return new Promise((resolve, reject) => {
+            // Создаем link элемент
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = href;
+
+            // Обработчики загрузки
+            link.onload = () => {
+                this.loadedStyles.add(href);
+                resolve();
+            };
+            
+            link.onerror = () => {
+                reject(new Error(`Failed to load CSS: ${href}`));
+            };
+
+            // Добавляем в head
+            document.head.appendChild(link);
+        });
+    }
+
+    /**
+     * Загружает стили синхронно (для критичных стилей)
+     * @param {string} css - CSS код
+     * @param {string} id - уникальный ID для style элемента
+     */
+    injectInlineStyles(css, id = 'moodboard-styles') {
+        // Проверяем, не загружен ли уже
+        if (document.getElementById(id)) {
+            return;
+        }
+
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = css;
+        document.head.appendChild(style);
+    }
+}