@sequent-org/moodboard 1.0.18 → 1.0.19

package/package.json

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

package/src/ui/styles/workspace.css

@@ -524,16 +524,16 @@
     line-height: 1.4;
 }
 
-/* Topbar */
+/* Topbar Styles */
 .moodboard-topbar {
     position: absolute;
-    top: 12px;
-    left: 16px;
-    height: 50px;
-    display: inline-flex;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 6px;
+    padding: 8px 12px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
@@ -542,44 +542,53 @@
     pointer-events: auto;
 }
 
+.moodboard-topbar--dark {
+    background: #2a2a2a;
+    border-color: #444;
+    color: #fff;
+}
+
 .moodboard-topbar__button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
+    width: 36px;
+    height: 36px;
     border: none;
     border-radius: 8px;
-    /* background: #f0f0f0; */
-    /* color: #333; */
-    font-size: 16px;
+    background: #f0f0f0;
+    color: #333;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: all 0.2s ease;
 }
 
-/* Стили для SVG иконок в кнопках верхней панели */
-.moodboard-topbar__button svg {
-    width: 16px;
-    height: 16px;
-    /* fill: currentColor;
-    stroke: currentColor; */
-    transition: all 0.2s ease;
+.moodboard-topbar__button:hover {
+    background: #e6e6e6;
 }
 
-.moodboard-topbar__button:hover svg {
-    /* transform: scale(1.1); */
+.moodboard-topbar__button--active {
+    background: #007ACC;
+    color: #fff;
 }
 
-.moodboard-topbar__button:hover {
+.moodboard-topbar__button--paint {
+    background: #f0f0f0;
+}
+
+.moodboard-topbar__button--paint:hover {
     background: #e6e6e6;
 }
 
-/* Divider for topbar */
 .moodboard-topbar__divider {
     width: 1px;
-    height: 28px;
-    background: #e5e7eb;
-    margin: 0 6px 0 2px;
+    height: 24px;
+    background: #e0e0e0;
+    margin: 0 4px;
+}
+
+.moodboard-topbar svg {
+    width: 18px;
+    height: 18px;
 }
 
 /* Paint popover */

package/src/utils/topbarIconLoader.js

@@ -9,21 +9,69 @@ export class TopbarIconLoader {
 
     async init() {
         try {
-            // Всегда используем встроенные иконки для надежности
-            // Это гарантирует работу в любом окружении (npm пакет, CDN, локальная разработка)
-            this.loadBuiltInIcons();
+            // Загружаем иконки из файлов в папке topbar
+            await this.loadTopbarIcons();
             
             console.log('✅ Иконки верхней панели загружены успешно');
             
         } catch (error) {
             console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // Даже в случае ошибки пытаемся загрузить встроенные иконки
+            // В случае ошибки загружаем встроенные иконки как fallback
             this.loadBuiltInIcons();
         }
     }
 
-    loadBuiltInIcons() {
-        // Встроенные иконки как основной источник
+    async loadTopbarIcons() {
+        // Список иконок, которые нужно загрузить
+        const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
+        
+        for (const iconName of iconNames) {
+            try {
+                const svgContent = await this.loadIconFromFile(iconName);
+                this.icons.set(iconName, svgContent);
+                console.log(`✅ Загружена иконка: ${iconName}`);
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить иконку ${iconName}:`, error);
+                // Если не удалось загрузить из файла, используем встроенную версию
+                const builtInIcon = this.getBuiltInIcon(iconName);
+                if (builtInIcon) {
+                    this.icons.set(iconName, builtInIcon);
+                    console.log(`✅ Использована встроенная иконка для: ${iconName}`);
+                }
+            }
+        }
+        
+        console.log(`📦 Загружено ${this.icons.size} иконок верхней панели`);
+    }
+
+    async loadIconFromFile(iconName) {
+        // Пробуем несколько способов загрузки для разных окружений
+        const paths = [
+            `/src/assets/icons/topbar/${iconName}.svg`,
+            `./src/assets/icons/topbar/${iconName}.svg`,
+            `../assets/icons/topbar/${iconName}.svg`,
+            `assets/icons/topbar/${iconName}.svg`
+        ];
+        
+        for (const path of paths) {
+            try {
+                const response = await fetch(path);
+                if (response.ok) {
+                    const svgContent = await response.text();
+                    console.log(`✅ Иконка ${iconName} загружена с пути: ${path}`);
+                    return svgContent;
+                }
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить ${iconName} с пути ${path}:`, error.message);
+                continue;
+            }
+        }
+        
+        throw new Error(`Не удалось загрузить иконку ${iconName} ни с одного из путей`);
+    }
+
+    getBuiltInIcon(iconName) {
+        // Встроенные иконки как 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"/>
@@ -71,12 +119,21 @@ export class TopbarIconLoader {
             </svg>`
         };
 
-        // Загружаем иконки статически
-        for (const [iconName, svgContent] of Object.entries(builtInIcons)) {
-            this.icons.set(iconName, svgContent);
+        return builtInIcons[iconName];
+    }
+
+    loadBuiltInIcons() {
+        // Загружаем только встроенные иконки как fallback
+        const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
+        
+        for (const iconName of iconNames) {
+            const builtInIcon = this.getBuiltInIcon(iconName);
+            if (builtInIcon) {
+                this.icons.set(iconName, builtInIcon);
+            }
         }
         
-        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
+        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели (fallback)`);
     }
 
     getIcon(name) {