chore: update plans, update deps

package-lock.json

@@ -12,6 +12,7 @@
 				"@types/uuid": "^10.0.0",
 				"cropperjs": "^2.1.0",
 				"file-saver": "^2.0.5",
+				"jszip": "^3.10.1",
 				"svelte-konva": "^1.0.1",
 				"uuid": "^13.0.0"
 			},
@@ -1209,6 +1210,12 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/core-util-is": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+			"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+			"license": "MIT"
+		},
 		"node_modules/cropperjs": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.1.0.tgz",
@@ -1331,6 +1338,18 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/immediate": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+			"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+			"license": "MIT"
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"license": "ISC"
+		},
 		"node_modules/is-reference": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1340,6 +1359,24 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/isarray": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+			"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+			"license": "MIT"
+		},
+		"node_modules/jszip": {
+			"version": "3.10.1",
+			"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+			"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+			"license": "(MIT OR GPL-3.0-or-later)",
+			"dependencies": {
+				"lie": "~3.3.0",
+				"pako": "~1.0.2",
+				"readable-stream": "~2.3.6",
+				"setimmediate": "^1.0.5"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1371,6 +1408,15 @@
 			"license": "MIT",
 			"peer": true
 		},
+		"node_modules/lie": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+			"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"immediate": "~3.0.5"
+			}
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -1436,6 +1482,12 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/pako": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+			"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+			"license": "(MIT AND Zlib)"
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1485,6 +1537,27 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/process-nextick-args": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+			"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+			"license": "MIT"
+		},
+		"node_modules/readable-stream": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+			"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+			"license": "MIT",
+			"dependencies": {
+				"core-util-is": "~1.0.0",
+				"inherits": "~2.0.3",
+				"isarray": "~1.0.0",
+				"process-nextick-args": "~2.0.0",
+				"safe-buffer": "~5.1.1",
+				"string_decoder": "~1.1.1",
+				"util-deprecate": "~1.0.1"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1557,6 +1630,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+			"license": "MIT"
+		},
 		"node_modules/set-cookie-parser": {
 			"version": "2.7.2",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -1564,6 +1643,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/setimmediate": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+			"license": "MIT"
+		},
 		"node_modules/sirv": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
@@ -1589,6 +1674,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/string_decoder": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+			"license": "MIT",
+			"dependencies": {
+				"safe-buffer": "~5.1.0"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "5.49.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.49.1.tgz",
@@ -1697,6 +1791,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"license": "MIT"
+		},
 		"node_modules/uuid": {
 			"version": "13.0.0",
 			"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",

package.json

@@ -27,6 +27,7 @@
 		"@types/uuid": "^10.0.0",
 		"cropperjs": "^2.1.0",
 		"file-saver": "^2.0.5",
+		"jszip": "^3.10.1",
 		"svelte-konva": "^1.0.1",
 		"uuid": "^13.0.0"
 	}

plans/PROJECT_PLAN.md

@@ -3,22 +3,26 @@
 ## MVP (Minimum Viable Product)
 
 ### Цель MVP
+
 Создать инструмент для быстрого создания нескольких Twitch панелей в едином стиле с разными текстами.
 
 ### Функциональность MVP
 
 #### 1. Загрузка фонового изображения
+
 - Автоматическая загрузка фонового изображения по умолчанию при старте
 - Возможность загрузки собственного фонового изображения
 - Обрезка изображения до нужных пропорций
 
 #### 2. Создание панелей
+
 - Ввод текстов для создания отдельных панелей
 - Каждый текст создает отдельную панель
 - Все панели используют одно фоновое изображение
 - Настройки текста применяются ко всем панелям
 
 #### 3. Настройки текста
+
 - Размер шрифта (10-72px)
 - Выбор шрифта из списка (Arial, Verdana, Georgia и др.)
 - Цвет текста
@@ -27,6 +31,7 @@
 - Вертикальное смещение от центра
 
 #### 4. Управление текстами
+
 - Список всех созданных текстов
 - Редактирование текста прямо в списке
 - Удаление текста кнопкой "×"
@@ -34,6 +39,7 @@
 - Автоматическая фильтрация пустых текстов и дубликатов
 
 #### 5. Просмотр панелей
+
 - Единое фоновое изображение в боковой панели (один раз вверху)
 - Превью всех созданных панелей с текстом на фоне
 - Превью только для просмотра
@@ -41,17 +47,20 @@
 - Массовое скачивание всех панелей
 
 #### 6. Экспорт панелей
+
 - Скачивание панелей в формате PNG
 - Размер панелей: 320px ширина, настраиваемая высота (по умолчанию 100px)
 
 ## Workflow работы программы (MVP)
 
 ### Шаг 1: Запуск приложения
+
 1. Пользователь открывает приложение
 2. Автоматически загружается фоновое изображение по умолчанию
 3. Пользователь видит экран добавления текстов
 
 ### Шаг 2: Настройка фона (опционально)
+
 1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить"
 2. Пользователь может загрузить собственное фоновое изображение
 3. При необходимости обрезает изображение
@@ -60,6 +69,7 @@
 6. Превью панелей показывают финальный результат с текстом на фоне
 
 ### Шаг 3: Создание и редактирование текстов
+
 1. Пользователь вводит текст для первой панели (например: "links")
 2. Нажимает кнопку "Добавить"
 3. Текст добавляется в список текстов (пустые тексты и дубликаты автоматически фильтруются)
@@ -71,6 +81,7 @@
 9. При редактировании или удалении текста автоматически обновляется соответствующая панель
 
 ### Шаг 4: Настройка внешнего вида (опционально)
+
 1. Пользователь настраивает параметры текста:
    - Размер шрифта
    - Шрифт
@@ -81,12 +92,14 @@
 3. Превью панелей в боковой панели обновляется в реальном времени
 
 ### Шаг 5: Просмотр панелей
+
 1. В боковой панели отображается фоновое изображение (один раз вверху)
 2. Ниже отображаются превью всех созданных панелей
 3. Превью панелей показывают финальный результат с текстом на фоне
 4. Превью только для просмотра, редактирование происходит в списке текстов
 
 ### Шаг 6: Экспорт панелей
+
 1. Пользователь скачивает отдельные панели или все сразу
 2. Панели сохраняются в формате PNG
 3. Готовые панели загружаются в Twitch
@@ -94,14 +107,15 @@
 ## Технические требования MVP
 
 ### Frontend
+
 - Svelte 5 с runes
 - TypeScript
 - SvelteKit
-- Tailwind CSS (опционально для стилей)
 
 ### Основные компоненты
 
-#### UI компоненты (максимум 5)
+#### UI компоненты
+
 - AppHeader - заголовок приложения с кнопкой загрузки изображения
 - ImageManager - управление загрузкой и обрезкой изображений
 - TextSection - управление текстами и настройками
@@ -109,17 +123,20 @@
 - PanelsList - список превью всех созданных панелей
 
 #### Вспомогательные компоненты
+
 - ImageUpload - загрузка изображений
 - ImageCropper - обрезка изображений
 - TextManager - добавление, редактирование и удаление текстов
 - PanelPreview - превью отдельной панели (только для просмотра)
 
 ### Хранилище данных
+
 - panelStore - хранение состояния панелей и функций для их создания
 - uiStore - хранение состояния UI (текущий шаг, загрузка и т.д.)
 - texts - массив текстов для создания панелей (хранится в компоненте страницы)
 
 ### Сервисы
+
 - exportService - экспорт панелей в PNG
 
 ## Будущее развитие (Future Roadmap)
@@ -127,6 +144,7 @@
 ### Фаза 2: Расширение функциональности
 
 #### 1. Дополнительные настройки
+
 - Добавление иконок к панелям
 - Настройка тени текста
 - Градиентный текст
@@ -134,11 +152,13 @@
 - Настройка прозрачности фона
 
 #### 2. Библиотека шаблонов
+
 - Предустановленные шаблоны панелей
 - Возможность сохранения собственных шаблонов
 - Категории шаблонов (игры, технологии, искусство и т.д.)
 
 #### 3. Пакетная обработка
+
 - Импорт списка текстов из файла
 - Автоматическое создание панелей из списка
 - Пакетное переименование панелей
@@ -146,31 +166,17 @@
 ### Фаза 3: Социальные функции
 
 #### 1. Облачное хранилище
+
 - Сохранение проектов в облаке
 - Синхронизация между устройствами
 - История версий
 
 #### 2. Шаринг
+
 - Возможность делиться проектами
 - Публичная библиотека панелей
 - Рейтинг и отзывы
 
-#### 3. Интеграции
-- Интеграция с Twitch API
-- Автоматическая загрузка панелей в Twitch
-- Интеграция с другими платформами (YouTube, Discord)
-
-### Фаза 4: Монетизация
-
-#### 1. Premium функции
-- Дополнительные шаблоны
-- Расширенные настройки
-- Приоритетная поддержка
-
-#### 2. Маркетплейс
-- Продажа премиальных шаблонов
-- Комиссионные продажи
-
 ## Метрики успеха MVP
 
 - Время создания одной панели: < 30 секунд