@sequent-org/moodboard 1.0.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sequent-org/moodboard",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Interactive moodboard",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./style.css": "./src/ui/styles/workspace.css"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node src/index.js",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest --watch",
+    "deploy:build": "npm run build && npm run start",
+    "deploy:prod": "NODE_ENV=production npm run build && NODE_ENV=production npm run start"
+  },
+  "dependencies": {
+    "axios": "^1.0.0",
+    "pixi.js": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.7.0",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "vite": "^5.0.0",
+    "vitest": "^3.2.4"
+  },
+  "author": "Sequent",
+  "license": "MIT"
+}

package/src/assets/icons/README.md

@@ -0,0 +1,105 @@
+# SVG Иконки для MoodBoard
+
+## 📁 Структура папки
+
+Эта папка содержит SVG иконки для всех инструментов MoodBoard:
+
+- **`/`** - Иконки для основной панели инструментов (toolbar)
+- **`/topbar/`** - Иконки для верхней панели (topbar)
+
+## 🎨 Особенности SVG иконок
+
+- **Размер**: Все иконки имеют viewBox="0 0 20 20"
+- **Цвет**: Используют `fill="currentColor"` для наследования цвета от родительского элемента
+- **Стилизация**: Поддерживают CSS стили для fill, stroke, opacity
+- **Масштабируемость**: Отлично выглядят на любых разрешениях экрана
+
+## 🔧 Использование
+
+### Основная панель инструментов (Toolbar):
+```javascript
+import { iconLoader } from '../utils/iconLoader.js';
+
+// Загрузка одной иконки
+const svgContent = await iconLoader.loadIcon('select');
+
+// Загрузка всех иконок
+const allIcons = await iconLoader.loadAllIcons();
+```
+
+### Верхняя панель (Topbar):
+```javascript
+import { TopbarIconLoader } from '../utils/topbarIconLoader.js';
+
+const topbarIconLoader = new TopbarIconLoader();
+// Иконки автоматически загружаются и добавляются в DOM как символы
+```
+
+### В HTML:
+```html
+<button class="moodboard-toolbar__button">
+    <!-- SVG будет вставлен автоматически -->
+</button>
+```
+
+## 📋 Список иконок
+
+### Основная панель инструментов (Toolbar)
+
+| Иконка | Файл | Описание |
+|--------|------|----------|
+| `select` | `select.svg` | Инструмент выделения |
+| `pan` | `pan.svg` | Панорамирование |
+| `text-add` | `text-add.svg` | Добавить текст |
+| `note` | `note.svg` | Добавить записку |
+| `image` | `image.svg` | Добавить изображение |
+| `shapes` | `shapes.svg` | Геометрические фигуры |
+| `pencil` | `pencil.svg` | Инструмент рисования |
+| `comments` | `comments.svg` | Комментарии |
+| `attachments` | `attachments.svg` | Вложения |
+| `emoji` | `emoji.svg` | Эмоджи |
+| `frame` | `frame.svg` | Фрейм |
+| `clear` | `clear.svg` | Очистить холст |
+| `undo` | `undo.svg` | Отменить действие |
+| `redo` | `redo.svg` | Повторить действие |
+
+### Верхняя панель (Topbar)
+
+| Иконка | Файл | Описание |
+|--------|------|----------|
+| `grid-line` | `topbar/grid-line.svg` | Сетка с линиями |
+| `grid-dot` | `topbar/grid-dot.svg` | Сетка с точками |
+| `grid-cross` | `topbar/grid-cross.svg` | Сетка с крестиками |
+| `grid-off` | `topbar/grid-off.svg` | Сетка выключена |
+| `paint` | `topbar/paint.svg` | Палитра фона |
+
+## 🎯 Добавление новых иконок
+
+### Для основной панели инструментов (Toolbar):
+1. Создайте SVG файл с именем `icon-name.svg`
+2. Используйте viewBox="0 0 20 20"
+3. Добавьте `fill="currentColor"` для основных элементов
+4. Добавьте имя иконки в массив `iconNames` в `iconLoader.js`
+5. Обновите массив `newTools` или `existingTools` в `Toolbar.js`
+
+### Для верхней панели (Topbar):
+1. Создайте SVG файл в папке `topbar/` с именем `icon-name.svg`
+2. Используйте viewBox="0 0 18 18"
+3. Добавьте `fill="currentColor"` для основных элементов
+4. Добавьте иконку в `TopbarIconLoader.loadBuiltInIcons()` как fallback
+5. Обновите соответствующий код в `Topbar.js`
+
+## 💡 Советы по дизайну
+
+- **Простота**: Иконки должны быть простыми и понятными
+- **Консистентность**: Используйте единый стиль для всех иконок
+- **Размер**: 
+  - Основная панель: 40x40px кнопки → 20x20px иконки
+  - Верхняя панель: 36x36px кнопки → 18x18px иконки
+- **Цвета**: Используйте `currentColor` для автоматической адаптации к теме
+
+## 🚀 Производительность
+
+- Иконки кэшируются после первой загрузки
+- Fallback иконки доступны при ошибках загрузки
+- SVG файлы оптимизированы для веб-использования

package/src/assets/icons/attachments.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.34473 0C8.74058 2.65922e-05 9.12042 0.156677 9.40137 0.435547L13.5566 4.55957C13.8404 4.84119 14 5.22524 14 5.625V16L13.9893 16.2041C13.887 17.2128 13.0356 18 12 18H2L1.7959 17.9893C0.787224 17.887 2.06229e-06 17.0357 0 16V2C2.27122e-05 0.964369 0.787234 0.113001 1.7959 0.0107422L2 0H8.34473ZM2 1C1.48234 1 1.05623 1.39336 1.00488 1.89746L1 2V16C1 16.5523 1.44772 17 2 17H12C12.5177 17 12.9438 16.6067 12.9951 16.1025L13 16V6H10C8.89543 6 8 5.10457 8 4V1H2ZM7.05078 7C7.32692 7 7.55078 7.22386 7.55078 7.5V9.5498H9.5C9.77614 9.5498 10 9.77366 10 10.0498C10 10.3259 9.77614 10.5498 9.5 10.5498H7.55078V12.5L7.54102 12.6006C7.49449 12.8286 7.29249 13 7.05078 13C6.80907 13 6.60707 12.8286 6.56055 12.6006L6.55078 12.5V10.5498H4.5C4.22386 10.5498 4 10.3259 4 10.0498C4 9.77366 4.22386 9.5498 4.5 9.5498H6.55078V7.5C6.55078 7.22386 6.77464 7 7.05078 7ZM9 4C9 4.55228 9.44771 5 10 5H12.5811L9 1.44531V4Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/clear.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M3 6H17L16 18H4L3 6Z"/>
+  <path d="M7 2H13L14 4H6L7 2Z"/>
+  <path d="M8 8V16H12V8H8Z"/>
+</svg>

package/src/assets/icons/comments.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 8C0.5 6.51664 0.939867 5.0666 1.76398 3.83323C2.58809 2.59986 3.75943 1.63856 5.12987 1.07091C6.50032 0.50325 8.00832 0.354725 9.46318 0.644114C10.918 0.933503 12.2544 1.64781 13.3033 2.6967C14.3522 3.7456 15.0665 5.08197 15.3559 6.53683C15.6453 7.99168 15.4968 9.49968 14.9291 10.8701C14.3614 12.2406 13.4001 13.4119 12.1668 14.236C10.9334 15.0601 9.48336 15.5 8 15.5H3.2C2.632 15.5 2.236 15.5 1.927 15.474C1.625 15.45 1.451 15.404 1.319 15.337C1.03651 15.1932 0.806853 14.9635 0.663 14.681C0.596 14.549 0.55 14.375 0.526 14.073C0.5 13.765 0.5 13.368 0.5 12.8V8Z" stroke="#1B1F24"/>
+</svg>

package/src/assets/icons/emoji.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1"/>
+  <circle cx="7" cy="8" r="1"/>
+  <circle cx="13" cy="8" r="1"/>
+  <path d="M7 13C7 13 8.5 15 10 15C11.5 15 13 13 13 13" stroke="currentColor" stroke-width="1" fill="none"/>
+</svg>

package/src/assets/icons/frame.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289C14.8946 1.48043 15 1.73478 15 2V14C15 14.2652 14.8946 14.5196 14.7071 14.7071C14.5196 14.8946 14.2652 15 14 15H2C1.73478 15 1.48043 14.8946 1.29289 14.7071C1.10536 14.5196 1 14.2652 1 14V6H8C8.26522 6 8.51957 5.89464 8.70711 5.70711C8.89464 5.51957 9 5.26522 9 5V1ZM8 1H2C1.73478 1 1.48043 1.10536 1.29289 1.29289C1.10536 1.48043 1 1.73478 1 2V5H8V1ZM8 0H14C14.5304 0 15.0391 0.210714 15.4142 0.585786C15.7893 0.960859 16 1.46957 16 2V14C16 14.5304 15.7893 15.0391 15.4142 15.4142C15.0391 15.7893 14.5304 16 14 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H8Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/image.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2L1.7959 15.9893C0.787223 15.887 0 15.0357 0 14V2C0 0.964349 0.787223 0.113005 1.7959 0.0107422L2 0H14ZM1 11.707V14C1 14.5523 1.44772 15 2 15H12.293L5 7.70703L1 11.707ZM2 1C1.44772 1 1 1.44772 1 2V10.293L4.64648 6.64648L4.72461 6.58203C4.91869 6.45387 5.18265 6.47562 5.35352 6.64648L13.707 15H14C14.5523 15 15 14.5523 15 14V2C15 1.44772 14.5523 1 14 1H2ZM10.5 3C11.8807 3 13 4.11929 13 5.5C13 6.88071 11.8807 8 10.5 8C9.11929 8 8 6.88071 8 5.5C8 4.11929 9.11929 3 10.5 3ZM10.5 4C9.67157 4 9 4.67157 9 5.5C9 6.32843 9.67157 7 10.5 7C11.3284 7 12 6.32843 12 5.5C12 4.67157 11.3284 4 10.5 4Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/note.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 0C15.3284 0 16 0.671573 16 1.5V9.57129L15.9902 9.76953C15.9447 10.2272 15.7421 10.6572 15.4141 10.9854L10.9854 15.4141L10.8389 15.5469C10.483 15.8385 10.0354 16 9.57129 16H1.5L1.34668 15.9922C0.590277 15.9154 0 15.2767 0 14.5V1.5C0 0.671573 0.671573 0 1.5 0H14.5ZM1.5 1C1.22386 1 1 1.22386 1 1.5V14.5C1 14.7761 1.22386 15 1.5 15H9V9.5L9.00977 9.39941C9.05629 9.17145 9.25829 9 9.5 9H15V1.5C15 1.22386 14.7761 1 14.5 1H1.5ZM10 10V14.9014C10.1021 14.8528 10.1969 14.7884 10.2783 14.707L14.707 10.2783C14.7885 10.1968 14.8538 10.1022 14.9023 10H10Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/pan.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.997 5.62H11V7C11 7.13261 11.0527 7.25979 11.1465 7.35356C11.2402 7.44732 11.3674 7.5 11.5 7.5C11.6326 7.5 11.7598 7.44732 11.8536 7.35356C11.9473 7.25979 12 7.13261 12 7V2.923C12.02 2.6653 12.139 2.42536 12.3321 2.25349C12.5251 2.08162 12.7773 1.99119 13.0355 2.00115C13.2938 2.0111 13.5382 2.12069 13.7175 2.30691C13.8967 2.49313 13.9969 2.74153 13.997 3V5.62H14V7C14 7.13261 14.0527 7.25979 14.1465 7.35356C14.2402 7.44732 14.3674 7.5 14.5 7.5C14.6326 7.5 14.7598 7.44732 14.8536 7.35356C14.9473 7.25979 15 7.13261 15 7V5C15 4.73479 15.1054 4.48043 15.2929 4.2929C15.4804 4.10536 15.7348 4 16 4C16.2652 4 16.5196 4.10536 16.7071 4.2929C16.8947 4.48043 17 4.73479 17 5V5.62H17.01V10.363C17.0103 10.4109 17.0069 10.4587 17 10.506C16.9968 10.5292 16.9945 10.5526 16.993 10.576C16.8701 12.2839 16.105 13.8818 14.8515 15.0482C13.598 16.2147 11.9493 16.8631 10.237 16.863C10.075 16.863 9.91801 16.859 9.76701 16.853C8.23201 16.783 6.88201 16.067 5.66001 14.933C4.43001 13.792 3.38001 12.273 2.47201 10.714C2.18301 10.219 1.98601 9.834 1.91701 9.521C1.89271 9.43553 1.88725 9.34579 1.90101 9.258C1.90801 9.229 1.92301 9.187 1.98801 9.123C2.05309 9.05357 2.13441 9.00141 2.22466 8.97121C2.31491 8.94101 2.41125 8.93372 2.50501 8.95C2.72901 8.98 3.02301 9.115 3.31201 9.384L3.31301 9.386L4.31301 10.331C4.45502 10.4653 4.63325 10.555 4.82568 10.589C5.01811 10.6231 5.2163 10.6 5.39577 10.5227C5.57524 10.4454 5.72811 10.3171 5.8355 10.1539C5.94288 9.99058 6.00008 9.79943 6.00001 9.604V3C6.00001 2.73479 6.10537 2.48043 6.2929 2.2929C6.48044 2.10536 6.7348 2 7.00001 2C7.26523 2 7.51958 2.10536 7.70712 2.2929C7.89465 2.48043 8.00001 2.73479 8.00001 3V7C8.00001 7.13261 8.05269 7.25979 8.14646 7.35356C8.24023 7.44732 8.3674 7.5 8.50001 7.5C8.63262 7.5 8.7598 7.44732 8.85357 7.35356C8.94733 7.25979 9.00001 7.13261 9.00001 7V2C9.00001 1.73479 9.10537 1.48043 9.2929 1.2929C9.48044 1.10536 9.73479 1 10 1C10.2652 1 10.5196 1.10536 10.7071 1.2929C10.8947 1.48043 11 1.73479 11 2V2.89C10.998 2.92664 10.997 2.96332 10.997 3V5.62ZM5.00001 5.5V3C5.00008 2.63777 5.09852 2.28235 5.28483 1.97171C5.47114 1.66106 5.73831 1.40684 6.05783 1.2362C6.37736 1.06555 6.73722 0.984888 7.09901 1.00282C7.4608 1.02075 7.81093 1.1366 8.11201 1.338C8.24888 0.946692 8.50397 0.607583 8.84198 0.36758C9.18 0.127577 9.58425 -0.00145855 9.9988 -0.00167819C10.4134 -0.00189782 10.8177 0.126709 11.156 0.366354C11.4943 0.605999 11.7497 0.944837 11.887 1.336C12.1882 1.13504 12.5383 1.01963 12.9 1.00206C13.2616 0.984492 13.6213 1.06544 13.9405 1.23625C14.2598 1.40707 14.5267 1.66136 14.7128 1.97198C14.8988 2.28261 14.9971 2.63792 14.997 3V3.27C15.301 3.09381 15.646 3.00079 15.9973 3.00032C16.3487 2.99985 16.6939 3.09194 16.9984 3.26732C17.3028 3.44271 17.5557 3.69519 17.7315 3.99936C17.9073 4.30354 18 4.64866 18 5V5.5H18.01V10.363C18.01 10.459 18.003 10.554 17.99 10.647C17.8492 12.6071 16.9712 14.441 15.5328 15.7799C14.0943 17.1187 12.2021 17.863 10.237 17.863C10.06 17.863 9.88801 17.859 9.72101 17.851C6.03901 17.684 3.46501 14.402 1.60801 11.218C1.04301 10.249 0.498011 9.175 1.29201 8.405C2.08501 7.636 3.19001 7.901 3.99701 8.655L4.00001 8.66L5.00001 9.605V5.5Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/pencil.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.00804386 1.124C-0.0107825 0.972945 0.00512428 0.819588 0.0545517 0.675614C0.103979 0.53164 0.185623 0.400851 0.29326 0.293214C0.400897 0.185577 0.531686 0.103933 0.67566 0.0545059C0.819633 0.0050785 0.972991 -0.0108283 1.12404 0.00799809L5.12404 0.507998C5.34466 0.535549 5.54979 0.635832 5.70704 0.792998L17.5 12.586C17.875 12.9611 18.0856 13.4697 18.0856 14C18.0856 14.5303 17.875 15.0389 17.5 15.414L15.414 17.5C15.039 17.8749 14.5304 18.0856 14 18.0856C13.4697 18.0856 12.9611 17.8749 12.586 17.5L0.793044 5.707C0.635877 5.54975 0.535595 5.34461 0.508044 5.124L0.00804386 1.124ZM1.00004 0.999998L1.12804 2.024L1.50004 5L10.646 14.146L14.146 10.646L5.00004 1.5L2.02404 1.128L1.00004 0.999998ZM14.854 11.354L11.354 14.854L13.293 16.793C13.4806 16.9805 13.7349 17.0858 14 17.0858C14.2652 17.0858 14.5195 16.9805 14.707 16.793L16.793 14.707C16.9805 14.5195 17.0858 14.2652 17.0858 14C17.0858 13.7348 16.9805 13.4805 16.793 13.293L14.853 11.353L14.854 11.354Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/redo.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1456 9.85411C10.099 9.80766 10.0621 9.75249 10.0369 9.69174C10.0117 9.63099 9.99871 9.56587 9.99871 9.50011C9.99871 9.43434 10.0117 9.36922 10.0369 9.30847C10.0621 9.24773 10.099 9.19255 10.1456 9.14611L12.2926 7.00011H3.49961C2.57135 7.00011 1.68111 6.63136 1.02473 5.97498C0.368355 5.3186 -0.000392914 4.42836 -0.000392914 3.50011C-0.000392914 2.57185 0.368355 1.68161 1.02473 1.02523C1.68111 0.368855 2.57135 0.000106812 3.49961 0.000106812H4.49961C4.63222 0.000106812 4.75939 0.0527849 4.85316 0.146553C4.94693 0.240321 4.99961 0.367498 4.99961 0.500107C4.99961 0.632715 4.94693 0.759892 4.85316 0.853661C4.75939 0.947429 4.63222 1.00011 4.49961 1.00011H3.49961C2.83657 1.00011 2.20068 1.2635 1.73184 1.73234C1.263 2.20118 0.999607 2.83707 0.999607 3.50011C0.999607 4.16315 1.263 4.79903 1.73184 5.26787C2.20068 5.73671 2.83657 6.00011 3.49961 6.00011H12.2926L10.1456 3.85411C10.0517 3.76022 9.99898 3.63288 9.99898 3.50011C9.99898 3.36733 10.0517 3.23999 10.1456 3.14611C10.2395 3.05222 10.3668 2.99948 10.4996 2.99948C10.6324 2.99948 10.7597 3.05222 10.8536 3.14611L13.8536 6.14611C13.9473 6.23987 14 6.36702 14 6.49961C14 6.63219 13.9473 6.75934 13.8536 6.85311L10.8536 9.85311C10.8072 9.89967 10.752 9.93661 10.6912 9.96182C10.6305 9.98703 10.5654 10 10.4996 10C10.4338 10 10.3687 9.98703 10.308 9.96182C10.2472 9.93661 10.1921 9.90067 10.1456 9.85411Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/select.svg

@@ -0,0 +1,9 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_66_4379" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<path d="M0 0H17V17H0V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.294 8.06299C15.4924 8.00216 15.6669 7.88112 15.7934 7.71665C15.92 7.55217 15.9922 7.35242 16.0001 7.14506C16.008 6.93771 15.9512 6.73303 15.8376 6.5594C15.724 6.38576 15.5592 6.25177 15.366 6.17599L2.36599 1.06899C2.18473 0.997562 1.98654 0.980637 1.79579 1.0203C1.60503 1.05996 1.43002 1.15448 1.29225 1.29225C1.15448 1.43002 1.05996 1.60503 1.0203 1.79579C0.980637 1.98654 0.997562 2.18473 1.06899 2.36599L6.17599 15.366C6.25177 15.5592 6.38576 15.724 6.5594 15.8376C6.73303 15.9512 6.93771 16.008 7.14506 16.0001C7.35242 15.9922 7.55217 15.92 7.71665 15.7934C7.88112 15.6669 8.00216 15.4924 8.06299 15.294L9.76399 9.76399L15.294 8.06299Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_66_4379)">
+<path d="M9.764 9.764L9.47 8.809C9.31431 8.857 9.17271 8.94231 9.05751 9.05751C8.94231 9.17271 8.857 9.31431 8.809 9.47L9.764 9.764ZM15 7.107L15.588 9.019C15.9844 8.89694 16.333 8.65467 16.5856 8.32573C16.8382 7.99679 16.9824 7.59745 16.998 7.183L15 7.107ZM15 7.107L16.999 7.183C17.0146 6.76851 16.9009 6.35942 16.6738 6.01238C16.4466 5.66534 16.1171 5.39752 15.731 5.246L15 7.107ZM2 2L15 7.107L15.731 5.246L2.731 0.138998L2 2ZM2 2L2.731 0.138998C2.36874 -0.00327954 1.97285 -0.0367717 1.59184 0.0426271C1.21083 0.122026 0.861269 0.310866 0.585999 0.585998L2 2ZM2 2L0.585999 0.585998C0.310697 0.861157 0.12167 1.21067 0.0420925 1.59168C-0.0374851 1.9727 -0.00315414 2.36865 0.138999 2.731L2 2ZM7.107 15L2 2L0.138999 2.731L5.246 15.731L7.107 15ZM7.107 15L5.246 15.731C5.39735 16.1173 5.66511 16.447 6.01216 16.6743C6.35921 16.9017 6.76839 17.0155 7.183 17L7.107 15ZM7.107 15L7.183 17C7.59745 16.9844 7.99679 16.8392 8.32573 16.5866C8.65467 16.334 8.89694 15.9854 9.019 15.589L7.107 15ZM8.809 9.47L7.107 15L9.019 15.588L10.72 10.058L8.809 9.47ZM15 7.107L9.47 8.809L10.058 10.72L15.588 9.019L15 7.107Z" fill="#1B1F24"/>
+</g>
+</svg>

package/src/assets/icons/shapes.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99992 9.99977C7.10449 9.99977 7.99992 10.8952 7.99992 11.9998V14.9998C7.99992 16.1043 7.10449 16.9998 5.99992 16.9998H2.99992C1.89535 16.9998 0.999924 16.1043 0.999924 14.9998V11.9998C0.999924 10.8952 1.89536 9.99977 2.99992 9.99977H5.99992ZM13.4999 9.99977C13.7761 9.99977 13.9999 10.2236 13.9999 10.4998V12.9998H16.4999C16.7761 12.9998 16.9999 13.2236 16.9999 13.4998C16.9999 13.7759 16.7761 13.9998 16.4999 13.9998H13.9999V16.4998C13.9999 16.7759 13.7761 16.9998 13.4999 16.9998C13.2238 16.9998 12.9999 16.7759 12.9999 16.4998V13.9998H10.4999C10.2238 13.9998 9.99992 13.7759 9.99992 13.4998C9.99992 13.2236 10.2238 12.9998 10.4999 12.9998H12.9999V10.4998C12.9999 10.2236 13.2238 9.99977 13.4999 9.99977ZM2.99992 10.9998L2.89739 11.0046C2.39326 11.056 1.99992 11.4821 1.99992 11.9998V14.9998L2.00481 15.1023C2.05271 15.5727 2.42696 15.947 2.89739 15.9949L2.99992 15.9998H5.99992L6.10246 15.9949C6.57289 15.947 6.94714 15.5727 6.99504 15.1023L6.99992 14.9998V11.9998C6.99992 11.4821 6.60659 11.056 6.10246 11.0046L5.99992 10.9998H2.99992ZM3.86907 0.724375C4.26184 0.404025 4.84084 0.426618 5.20696 0.792734L8.20696 3.79273L8.27532 3.86891C8.57431 4.23549 8.57431 4.76404 8.27532 5.13062L8.20696 5.2068L5.20696 8.2068C4.84084 8.57291 4.26184 8.59551 3.86907 8.27516L3.79289 8.2068L0.792893 5.2068C0.402369 4.81627 0.402369 4.18326 0.792893 3.79273L3.79289 0.792734L3.86907 0.724375ZM13.4999 0.999766C15.4329 0.999766 16.9999 2.56677 16.9999 4.49977C16.9999 6.43276 15.4329 7.99977 13.4999 7.99977C11.5669 7.99977 9.99992 6.43276 9.99992 4.49977C9.99992 2.56677 11.5669 0.999766 13.4999 0.999766ZM1.49992 4.49977L4.49992 7.49977L7.49992 4.49977L4.49992 1.49977L1.49992 4.49977ZM13.4999 1.99977C12.1192 1.99977 10.9999 3.11905 10.9999 4.49977C10.9999 5.88048 12.1192 6.99977 13.4999 6.99977C14.8806 6.99977 15.9999 5.88048 15.9999 4.49977C15.9999 3.11905 14.8806 1.99977 13.4999 1.99977Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/text-add.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 3.5V0.5H7.5M7.5 0.5H14.5V3.5M7.5 0.5V14.5M7.5 14.5H4.5M7.5 14.5H10.5" stroke="#1B1F24" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/topbar/README.md

@@ -0,0 +1,39 @@
+# SVG Иконки для Верхней Панели
+
+Эта папка содержит SVG иконки для кнопок верхней панели MoodBoard.
+
+## Иконки
+
+### Сетка
+- **`grid-line.svg`** - Сетка с линиями
+- **`grid-dot.svg`** - Сетка с точками  
+- **`grid-cross.svg`** - Сетка с крестиками
+- **`grid-off.svg`** - Сетка выключена (с перечеркиванием)
+
+### Инструменты
+- **`paint.svg`** - Палитра фона
+
+## Технические детали
+
+- **Размер**: 18x18 пикселей
+- **ViewBox**: 0 0 18 18
+- **Цвет**: Использует `currentColor` для наследования цвета от родительского элемента
+- **Формат**: SVG с оптимизированными путями
+
+## Использование
+
+Иконки загружаются через `TopbarIconLoader` и добавляются в DOM как SVG символы с ID вида `icon-{имя}`.
+
+```html
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <use href="#icon-grid-line"/>
+</svg>
+```
+
+## Добавление новых иконок
+
+1. Создайте SVG файл в этой папке
+2. Убедитесь, что используется `currentColor` для цвета
+3. Добавьте иконку в `TopbarIconLoader.loadBuiltInIcons()` как fallback
+4. Обновите соответствующий код в `Topbar.js`
+

package/src/assets/icons/topbar/grid-cross.svg

@@ -0,0 +1,6 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33301 9.66699H9V11.333H7.33301V13H5.66699V11.333H4V9.66699H5.66699V8H7.33301V9.66699Z" fill="#1B1F24" fill-opacity="0.9"/>
+<path d="M3.33301 5.66699H5V7.33301H3.33301V9H1.66699V7.33301H0V5.66699H1.66699V4H3.33301V5.66699Z" fill="#1B1F24" fill-opacity="0.9"/>
+<path d="M11.333 5.66699H13V7.33301H11.333V9H9.66699V7.33301H8V5.66699H9.66699V4H11.333V5.66699Z" fill="#1B1F24" fill-opacity="0.9"/>
+<path d="M7.33301 1.66699H9V3.33301H7.33301V5H5.66699V3.33301H4V1.66699H5.66699V0H7.33301V1.66699Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/topbar/grid-dot.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 10C2.32843 10 3 10.6716 3 11.5C3 12.3284 2.32843 13 1.5 13C0.671573 13 0 12.3284 0 11.5C0 10.6716 0.671573 10 1.5 10ZM6.5 10C7.32843 10 8 10.6716 8 11.5C8 12.3284 7.32843 13 6.5 13C5.67157 13 5 12.3284 5 11.5C5 10.6716 5.67157 10 6.5 10ZM11.5 10C12.3284 10 13 10.6716 13 11.5C13 12.3284 12.3284 13 11.5 13C10.6716 13 10 12.3284 10 11.5C10 10.6716 10.6716 10 11.5 10ZM1.5 5C2.32843 5 3 5.67157 3 6.5C3 7.32843 2.32843 8 1.5 8C0.671573 8 0 7.32843 0 6.5C0 5.67157 0.671573 5 1.5 5ZM6.5 5C7.32843 5 8 5.67157 8 6.5C8 7.32843 7.32843 8 6.5 8C5.67157 8 5 7.32843 5 6.5C5 5.67157 5.67157 5 6.5 5ZM11.5 5C12.3284 5 13 5.67157 13 6.5C13 7.32843 12.3284 8 11.5 8C10.6716 8 10 7.32843 10 6.5C10 5.67157 10.6716 5 11.5 5ZM1.5 0C2.32843 0 3 0.671573 3 1.5C3 2.32843 2.32843 3 1.5 3C0.671573 3 0 2.32843 0 1.5C0 0.671573 0.671573 0 1.5 0ZM6.5 0C7.32843 0 8 0.671573 8 1.5C8 2.32843 7.32843 3 6.5 3C5.67157 3 5 2.32843 5 1.5C5 0.671573 5.67157 0 6.5 0ZM11.5 0C12.3284 0 13 0.671573 13 1.5C13 2.32843 12.3284 3 11.5 3C10.6716 3 10 2.32843 10 1.5C10 0.671573 10.6716 0 11.5 0Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/topbar/grid-line.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0.5C2 0.367392 1.94732 0.240215 1.85355 0.146447C1.75979 0.0526785 1.63261 0 1.5 0C1.36739 0 1.24021 0.0526785 1.14645 0.146447C1.05268 0.240215 1 0.367392 1 0.5V1H0.5C0.367392 1 0.240215 1.05268 0.146447 1.14645C0.0526785 1.24021 0 1.36739 0 1.5C0 1.63261 0.0526785 1.75979 0.146447 1.85355C0.240215 1.94732 0.367392 2 0.5 2H1V5H0.5C0.367392 5 0.240215 5.05268 0.146447 5.14645C0.0526785 5.24021 0 5.36739 0 5.5C0 5.63261 0.0526785 5.75979 0.146447 5.85355C0.240215 5.94732 0.367392 6 0.5 6H1V9H0.5C0.367392 9 0.240215 9.05268 0.146447 9.14645C0.0526785 9.24021 0 9.36739 0 9.5C0 9.63261 0.0526785 9.75979 0.146447 9.85355C0.240215 9.94732 0.367392 10 0.5 10H1V10.5C1 10.6326 1.05268 10.7598 1.14645 10.8536C1.24021 10.9473 1.36739 11 1.5 11C1.63261 11 1.75979 10.9473 1.85355 10.8536C1.94732 10.7598 2 10.6326 2 10.5V10H5V10.5C5 10.6326 5.05268 10.7598 5.14645 10.8536C5.24021 10.9473 5.36739 11 5.5 11C5.63261 11 5.75979 10.9473 5.85355 10.8536C5.94732 10.7598 6 10.6326 6 10.5V10H9V10.5C9 10.6326 9.05268 10.7598 9.14645 10.8536C9.24021 10.9473 9.36739 11 9.5 11C9.63261 11 9.75979 10.9473 9.85355 10.8536C9.94732 10.7598 10 10.6326 10 10.5V10H10.5C10.6326 10 10.7598 9.94732 10.8536 9.85355C10.9473 9.75979 11 9.63261 11 9.5C11 9.36739 10.9473 9.24021 10.8536 9.14645C10.7598 9.05268 10.6326 9 10.5 9H10V6H10.5C10.6326 6 10.7598 5.94732 10.8536 5.85355C10.9473 5.75979 11 5.63261 11 5.5C11 5.36739 10.9473 5.24021 10.8536 5.14645C10.7598 5.05268 10.6326 5 10.5 5H10V2H10.5C10.6326 2 10.7598 1.94732 10.8536 1.85355C10.9473 1.75979 11 1.63261 11 1.5C11 1.36739 10.9473 1.24021 10.8536 1.14645C10.7598 1.05268 10.6326 1 10.5 1H10V0.5C10 0.367392 9.94732 0.240215 9.85355 0.146447C9.75979 0.0526785 9.63261 0 9.5 0C9.36739 0 9.24021 0.0526785 9.14645 0.146447C9.05268 0.240215 9 0.367392 9 0.5V1H6V0.5C6 0.367392 5.94732 0.240215 5.85355 0.146447C5.75979 0.0526785 5.63261 0 5.5 0C5.36739 0 5.24021 0.0526785 5.14645 0.146447C5.05268 0.240215 5 0.367392 5 0.5V1H2V0.5ZM9 9V6H6V9H9ZM5 9V6H2V9H5ZM2 5V2H5V5H2ZM6 5V2H9V5H6Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/topbar/grid-off.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.500022 0C0.776022 0 1.03302 0.223 1.14102 0.477C1.18502 0.579 1.24102 0.695 1.31302 0.825C1.55302 1.26 1.92602 1.763 2.43402 2.239C3.44202 3.184 4.95402 4 7.00002 4C9.04502 4 10.558 3.184 11.566 2.24C12.074 1.763 12.446 1.26 12.687 0.825C12.759 0.695 12.815 0.579 12.858 0.477C12.968 0.223 13.224 0 13.5 0C13.776 0 13.995 0.225 13.917 0.49C13.715 1.172 13.147 2.14 12.212 3.004L13.354 4.146C13.4479 4.23989 13.5007 4.36722 13.5007 4.5C13.5007 4.63278 13.4479 4.76011 13.354 4.854C13.2601 4.94789 13.1328 5.00063 13 5.00063C12.8672 5.00063 12.7399 4.94789 12.646 4.854L11.429 3.636C10.8481 4.04408 10.2116 4.3667 9.53902 4.594L9.98502 6.379C10.0137 6.50642 9.99137 6.64 9.92283 6.75117C9.85429 6.86234 9.74497 6.94228 9.61825 6.9739C9.49153 7.00551 9.35747 6.98629 9.24474 6.92034C9.13201 6.85439 9.04956 6.74695 9.01502 6.621L8.57202 4.851C8.05408 4.95143 7.52761 5.00133 7.00002 5C6.4724 5.001 5.94593 4.95077 5.42802 4.85L4.98502 6.621C4.95048 6.74695 4.86803 6.85439 4.7553 6.92034C4.64257 6.98629 4.50851 7.00551 4.38179 6.9739C4.25507 6.94228 4.14575 6.86234 4.07721 6.75117C4.00867 6.64 3.98635 6.50642 4.01502 6.379L4.46102 4.594C3.78844 4.36672 3.15195 4.04409 2.57102 3.636L1.35402 4.854C1.30753 4.90049 1.25235 4.93736 1.19161 4.96252C1.13087 4.98768 1.06577 5.00063 1.00002 5.00063C0.934278 5.00063 0.869178 4.98768 0.808438 4.96252C0.747699 4.93736 0.69251 4.90049 0.646022 4.854C0.599534 4.80751 0.562658 4.75232 0.537499 4.69158C0.51234 4.63084 0.49939 4.56574 0.49939 4.5C0.49939 4.43426 0.51234 4.36916 0.537499 4.30842C0.562658 4.24768 0.599534 4.19249 0.646022 4.146L1.78802 3.004C0.853022 2.14 0.285022 1.172 0.0830223 0.49C0.00502229 0.225 0.223022 0 0.500022 0Z" fill="#1B1F24"/>
+</svg>

package/src/assets/icons/topbar/paint.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6614 12.8663C15.8442 12.6594 16.1564 12.6593 16.3392 12.8663C16.9098 13.5128 18.0003 14.8927 18.0003 16.0001C18.0002 17.1045 17.1047 17.9999 16.0003 18.0001C14.8958 18.0001 14.0003 17.1046 14.0003 16.0001C14.0003 14.8925 15.0909 13.5127 15.6614 12.8663ZM8.86943 0.224675C9.26221 -0.0955203 9.84126 -0.0730251 10.2073 0.293034L17.7073 7.79303C18.0976 8.18352 18.0976 8.81661 17.7073 9.2071L10.1214 16.793C8.98642 17.9278 7.16813 17.9634 5.99053 16.8995L5.8792 16.793L1.20732 12.1212C0.0359541 10.9496 0.0359531 9.05051 1.20732 7.87897L5.68975 3.39655L3.64678 1.35358L3.58232 1.27546C3.45416 1.08138 3.47591 0.817414 3.64678 0.64655C3.81764 0.475783 4.08165 0.453959 4.27568 0.582097L4.35381 0.64655L6.39678 2.68952L8.79326 0.293034L8.86943 0.224675ZM16.0003 14.0245C15.8222 14.2528 15.6354 14.5107 15.471 14.7803C15.1509 15.3055 15.0003 15.7309 15.0003 16.0001C15.0003 16.5523 15.448 17.0001 16.0003 17.0001C16.5524 16.9999 17.0002 16.5522 17.0003 16.0001C17.0003 15.731 16.8496 15.3054 16.5296 14.7803C16.3653 14.5107 16.1783 14.2527 16.0003 14.0245ZM7.10381 3.39655L9.85381 6.14655V6.14753C10.0497 6.05379 10.2687 6.00007 10.5003 6.00007C11.3286 6.00023 12.0003 6.67174 12.0003 7.50007C12.0002 8.32835 11.3286 8.9999 10.5003 9.00007C9.6719 9.00007 9.00034 8.32845 9.00029 7.50007C9.00029 7.2685 9.05308 7.04939 9.14678 6.85358L6.39678 4.10358L1.91436 8.586L1.77764 8.73737C1.13661 9.52287 1.18213 10.6818 1.91436 11.4141L6.58623 16.086C7.31862 16.8181 8.47754 16.8637 9.26299 16.2227L9.41436 16.086L17.0003 8.50007L9.50029 1.00007L7.10381 3.39655ZM10.5003 7.00007C10.2242 7.00007 10.0003 7.22392 10.0003 7.50007C10.0003 7.77617 10.2242 8.00007 10.5003 8.00007C10.7763 7.9999 11.0002 7.77606 11.0003 7.50007C11.0003 7.22402 10.7763 7.00023 10.5003 7.00007Z" fill="#1B1F24" fill-opacity="0.9"/>
+</svg>

package/src/assets/icons/undo.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.85403 0.146016C3.90059 0.192461 3.93753 0.247637 3.96274 0.308382C3.98795 0.369127 4.00092 0.434248 4.00092 0.500016C4.00092 0.565783 3.98795 0.630904 3.96274 0.691649C3.93753 0.752395 3.90059 0.80757 3.85403 0.854016L1.70703 3.00002H10.5C11.4283 3.00002 12.3185 3.36876 12.9749 4.02514C13.6313 4.68152 14 5.57176 14 6.50002C14 7.42827 13.6313 8.31851 12.9749 8.97489C12.3185 9.63127 11.4283 10 10.5 10H9.50003C9.36742 10 9.24024 9.94734 9.14647 9.85357C9.0527 9.7598 9.00003 9.63262 9.00003 9.50002C9.00003 9.36741 9.0527 9.24023 9.14647 9.14646C9.24024 9.05269 9.36742 9.00002 9.50003 9.00002H10.5C11.1631 9.00002 11.799 8.73662 12.2678 8.26778C12.7366 7.79894 13 7.16306 13 6.50002C13 5.83697 12.7366 5.20109 12.2678 4.73225C11.799 4.26341 11.1631 4.00002 10.5 4.00002H1.70703L3.85403 6.14602C3.94791 6.2399 4.00066 6.36724 4.00066 6.50002C4.00066 6.63279 3.94791 6.76013 3.85403 6.85402C3.76014 6.9479 3.6328 7.00065 3.50003 7.00065C3.36725 7.00065 3.23991 6.9479 3.14603 6.85402L0.146027 3.85402C0.0522916 3.76025 -0.000366211 3.6331 -0.000366211 3.50052C-0.000366211 3.36793 0.0522916 3.24078 0.146027 3.14702L3.14603 0.147016C3.19247 0.100452 3.24765 0.0635098 3.30839 0.0383034C3.36914 0.0130969 3.43426 0.00012207 3.50003 0.00012207C3.56579 0.00012207 3.63092 0.0130969 3.69166 0.0383034C3.75241 0.0635098 3.80758 0.0994524 3.85403 0.146016Z" fill="#1B1F24"/>
+</svg>