@sequent-org/moodboard 1.0.19 → 1.0.20

package/package.json

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

package/src/ui/styles/workspace.css

@@ -524,16 +524,16 @@
     line-height: 1.4;
 }
 
-/* Topbar Styles */
+/* Topbar */
 .moodboard-topbar {
     position: absolute;
-    top: 16px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
+    top: 12px;
+    left: 16px;
+    height: 50px;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 12px;
+    padding: 8px 6px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
@@ -542,35 +542,53 @@
     pointer-events: auto;
 }
 
-.moodboard-topbar--dark {
-    background: #2a2a2a;
-    border-color: #444;
-    color: #fff;
-}
-
 .moodboard-topbar__button {
-    width: 36px;
-    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
     border: none;
     border-radius: 8px;
-    background: #f0f0f0;
-    color: #333;
+    /* background: #f0f0f0; */
+    /* color: #333; */
+    font-size: 16px;
     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 svg {
+    /* transform: scale(1.1); */
+}
+
 .moodboard-topbar__button:hover {
     background: #e6e6e6;
 }
 
+/* Divider for topbar */
+.moodboard-topbar__divider {
+    width: 1px;
+    height: 28px;
+    background: #e5e7eb;
+    margin: 0 6px 0 2px;
+}
+
+/* Active state for topbar buttons */
 .moodboard-topbar__button--active {
-    background: #007ACC;
-    color: #fff;
+    background: #dbeafe;
+    color: #1d4ed8;
 }
 
+/* Paint button specific styles */
 .moodboard-topbar__button--paint {
     background: #f0f0f0;
 }
@@ -579,18 +597,6 @@
     background: #e6e6e6;
 }
 
-.moodboard-topbar__divider {
-    width: 1px;
-    height: 24px;
-    background: #e0e0e0;
-    margin: 0 4px;
-}
-
-.moodboard-topbar svg {
-    width: 18px;
-    height: 18px;
-}
-
 /* Paint popover */
 .moodboard-topbar__paint-popover {
     position: absolute;

package/src/utils/topbarIconLoader.js

@@ -9,15 +9,17 @@ export class TopbarIconLoader {
 
     async init() {
         try {
-            // Загружаем иконки из файлов в папке topbar
+            // Сначала загружаем встроенные иконки как основной источник
+            this.loadBuiltInIcons();
+            
+            // Затем пытаемся загрузить из файлов (если доступно)
             await this.loadTopbarIcons();
             
             console.log('✅ Иконки верхней панели загружены успешно');
             
         } catch (error) {
             console.error('❌ Критическая ошибка загрузки иконок верхней панели:', error);
-            // В случае ошибки загружаем встроенные иконки как fallback
-            this.loadBuiltInIcons();
+            // В случае ошибки у нас уже есть встроенные иконки
         }
     }
 
@@ -28,20 +30,17 @@ export class TopbarIconLoader {
         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}`);
+                if (svgContent) {
+                    this.icons.set(iconName, svgContent);
+                    console.log(`✅ Загружена иконка из файла: ${iconName}`);
                 }
+            } catch (error) {
+                console.warn(`⚠️ Не удалось загрузить иконку ${iconName} из файла:`, error.message);
+                // Оставляем встроенную версию
             }
         }
         
-        console.log(`📦 Загружено ${this.icons.size} иконок верхней панели`);
+        console.log(`📦 Всего загружено ${this.icons.size} иконок верхней панели`);
     }
 
     async loadIconFromFile(iconName) {
@@ -50,7 +49,8 @@ export class TopbarIconLoader {
             `/src/assets/icons/topbar/${iconName}.svg`,
             `./src/assets/icons/topbar/${iconName}.svg`,
             `../assets/icons/topbar/${iconName}.svg`,
-            `assets/icons/topbar/${iconName}.svg`
+            `assets/icons/topbar/${iconName}.svg`,
+            `/assets/icons/topbar/${iconName}.svg`
         ];
         
         for (const path of paths) {
@@ -67,11 +67,11 @@ export class TopbarIconLoader {
             }
         }
         
-        throw new Error(`Не удалось загрузить иконку ${iconName} ни с одного из путей`);
+        return null; // Возвращаем null вместо ошибки
     }
 
     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"/>
@@ -123,7 +123,7 @@ export class TopbarIconLoader {
     }
 
     loadBuiltInIcons() {
-        // Загружаем только встроенные иконки как fallback
+        // Загружаем встроенные иконки как основной источник
         const iconNames = ['grid-line', 'grid-dot', 'grid-cross', 'grid-off', 'paint'];
         
         for (const iconName of iconNames) {
@@ -133,7 +133,7 @@ export class TopbarIconLoader {
             }
         }
         
-        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели (fallback)`);
+        console.log(`📦 Загружено ${this.icons.size} встроенных иконок верхней панели`);
     }
 
     getIcon(name) {