fix: resolve background not shown

plans/PROJECT_PLAN.md

@@ -34,7 +34,7 @@
 
 #### 5. Просмотр панелей
 - Единое фоновое изображение в боковой панели (один раз вверху)
-- Превью всех созданных панелей с текстом на прозрачном фоне
+- Превью всех созданных панелей с текстом на фоне
 - Превью только для просмотра
 - Скачивание отдельной панели
 - Массовое скачивание всех панелей
@@ -51,11 +51,12 @@
 3. Пользователь видит экран добавления текстов
 
 ### Шаг 2: Настройка фона (опционально)
-1. Пользователь может загрузить собственное фоновое изображение
+1. Фоновое изображение отображается в боковой панели с кнопкой "Загрузить"
-2. При необходимости обрезает изображение
+2. Пользователь может загрузить собственное фоновое изображение
-3. Фон отображается один раз в боковой панели
+3. При необходимости обрезает изображение
-4. Фон применяется ко всем создаваемым панелям
+4. Фон отображается один раз в боковой панели с правильными размерами (максимальная ширина 320px)
-5. Превью панелей показывают только текст на прозрачном фоне
+5. Фон применяется ко всем создаваемым панелям
+6. Превью панелей показывают финальный результат с текстом на фоне
 
 ### Шаг 3: Создание и редактирование текстов
 1. Пользователь вводит текст для первой панели (например: "links")
@@ -81,7 +82,7 @@
 ### Шаг 5: Просмотр панелей
 1. В боковой панели отображается фоновое изображение (один раз вверху)
 2. Ниже отображаются превью всех созданных панелей
-3. Превью панелей показывают только текст на прозрачном фоне
+3. Превью панелей показывают финальный результат с текстом на фоне
 4. Превью только для просмотра, редактирование происходит в списке текстов
 
 ### Шаг 6: Экспорт панелей
@@ -171,8 +172,8 @@
 ## Ограничения MVP
 
 - Один фоновый рисунок для всех панелей
-- Фон отображается один раз в боковой панели
+- Фон отображается один раз в боковой панели (максимальная ширина 320px)
-- Превью панелей показывают только текст на прозрачном фоне
+- Превью панелей показывают финальный результат с текстом на фоне
 - Один текстовый элемент на панель
 - Фиксированная ширина панели (320px)
 - Только экспорт в PNG

src/components/PanelPreview.svelte

@@ -69,6 +69,9 @@
         <div class="canvas-container">
           <Stage width={320} height={panel.height}>
             <Layer>
+              {#if backgroundImage}
+                <Image image={backgroundImage} width={320} height={panel.height} />
+              {/if}
               {#each panel.texts || [] as textItem (textItem.id)}
                 {@const textPosition = getTextPosition(textItem)}
                 <Text

src/routes/+page.svelte

@@ -154,7 +154,10 @@
     <div class="sidebar">
       {#if $uiStore.currentStep === "text" && backgroundImage}
         <div class="background-preview">
-          <h3>Фоновое изображение</h3>
+          <div class="background-header">
+            <h3>Фоновое изображение</h3>
+            <Button variant="secondary" size="sm" onclick={handleUploadNewImage}>Загрузить</Button>
+          </div>
           <img src={backgroundImage} alt="Фон" />
         </div>
       {/if}
@@ -248,6 +251,13 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
+  .background-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .background-preview h3 {
     margin: 0;
     color: #333;
@@ -257,6 +267,8 @@
 
   .background-preview img {
     width: 100%;
+    max-width: 320px;
+    height: auto;
     border-radius: 4px;
   }