@sequent-org/moodboard 1.0.4 → 1.0.7

package/package.json

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

package/src/ui/Topbar.js

@@ -39,6 +39,11 @@ export class Topbar {
     createTopbar() {
         this.element = document.createElement('div');
         this.element.className = `moodboard-topbar moodboard-topbar--${this.theme}`;
+        
+        console.log('🔍 Topbar: создаю верхнюю панель');
+        console.log('🔍 Topbar: this.icons содержит:', this.icons);
+        console.log('🔍 Topbar: количество иконок:', Object.keys(this.icons).length);
+        
         // Кнопки выбора вида сетки (без функциональности)
         const buttons = [
             { id: 'grid-line', icon: 'grid-line', title: 'Сетка: линии', type: 'line' },
@@ -51,10 +56,14 @@ export class Topbar {
             const btn = document.createElement('button');
             btn.className = 'moodboard-topbar__button';
             
+            console.log(`🔍 Topbar: создаю кнопку для иконки "${cfg.icon}"`);
+            
             // Создаем SVG иконку
             if (this.icons[cfg.icon]) {
+                console.log(`✅ Topbar: иконка "${cfg.icon}" найдена, создаю SVG`);
                 this.createSvgIcon(btn, cfg.icon);
             } else {
+                console.warn(`⚠️ Topbar: иконка "${cfg.icon}" не найдена, создаю fallback`);
                 // Fallback: создаем простую текстовую иконку
                 const fallbackIcon = document.createElement('span');
                 fallbackIcon.textContent = cfg.icon.charAt(0).toUpperCase();
@@ -78,10 +87,14 @@ export class Topbar {
         paintBtn.className = 'moodboard-topbar__button moodboard-topbar__button--paint';
         paintBtn.title = 'Палитра фона';
         
+        console.log('🔍 Topbar: создаю кнопку краски');
+        
         // Создаем SVG иконку
         if (this.icons['paint']) {
+            console.log('✅ Topbar: иконка paint найдена, создаю SVG');
             this.createSvgIcon(paintBtn, 'paint');
         } else {
+            console.warn('⚠️ Topbar: иконка paint не найдена, создаю fallback');
             // Fallback: создаем простую текстовую иконку
             const fallbackIcon = document.createElement('span');
             fallbackIcon.textContent = '🎨';
@@ -101,7 +114,11 @@ export class Topbar {
      * Создает SVG иконку для кнопки
      */
     createSvgIcon(button, iconName) {
+        console.log(`🔍 Topbar: создаю SVG иконку "${iconName}"`);
+        console.log(`🔍 Topbar: доступные иконки:`, Object.keys(this.icons));
+        
         if (this.icons[iconName]) {
+            console.log(`✅ Topbar: иконка "${iconName}" найдена, создаю SVG элемент`);
             // Создаем SVG элемент из загруженного содержимого
             const tempDiv = document.createElement('div');
             tempDiv.innerHTML = this.icons[iconName];
@@ -115,7 +132,12 @@ export class Topbar {
                 
                 // Добавляем SVG в кнопку
                 button.appendChild(svg);
+                console.log(`✅ Topbar: SVG иконка "${iconName}" успешно добавлена в кнопку`);
+            } else {
+                console.warn(`⚠️ Topbar: не удалось найти SVG элемент в содержимом иконки "${iconName}"`);
             }
+        } else {
+            console.warn(`⚠️ Topbar: иконка "${iconName}" не найдена в this.icons`);
         }
     }
 

package/src/utils/topbarIconLoader.js

@@ -9,27 +9,21 @@ export class TopbarIconLoader {
 
     async init() {
         try {
-            // Загружаем иконки через import.meta.glob
-            const iconModules = import.meta.glob('../assets/icons/topbar/*.svg', { 
-                eager: true, 
-                as: 'raw' 
-            });
+            // Всегда используем встроенные иконки для надежности
+            // Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
+            this.loadBuiltInIcons();
             
-            for (const [path, content] of Object.entries(iconModules)) {
-                const iconName = path.split('/').pop().replace('.svg', '');
-                this.icons.set(iconName, content);
-            }
+            console.log('✅ Иконки верхней панели загружены успешно');
             
         } catch (error) {
-            console.warn('Не удалось загрузить SVG иконки через import.meta.glob, используем встроенные:', error);
+            console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
+            // Даже в случае ошибки пытаемся загрузить встроенные иконки
             this.loadBuiltInIcons();
         }
     }
 
-
-
     loadBuiltInIcons() {
-        // Встроенные иконки как fallback
+        // Встроенные иконки как основной источник
         const builtInIcons = {
             'grid-line': `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2 2H16V4H2V2Z" fill="currentColor"/>
@@ -82,10 +76,7 @@ export class TopbarIconLoader {
             this.icons.set(iconName, svgContent);
         }
         
-        // Добавляем встроенные иконки в Map
-        Object.entries(builtInIcons).forEach(([name, content]) => {
-            this.icons.set(name, content);
-        });
+        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
     }
 
     getIcon(name) {