feat: move to new workflow

src/components/PanelPreview.svelte

@@ -1,24 +1,47 @@
 <script lang="ts">
-  import { panelStore } from "../stores/panelStore";
   import { uiStore, setCurrentStep } from "../stores/uiStore";
-  import type { TextItem } from "../lib/types/panel";
+  import type { Panel } from "../lib/types/panel";
   import { Stage, Layer, Image, Text } from "svelte-konva";
-  import { Button } from "../lib/components/ui";
+  import { Button, IconButton } from "../lib/components/ui";
 
   let {
+    panel,
     onDownload,
+    onUpdate,
+    onDelete,
   }: {
+    panel: Panel;
     onDownload?: () => void;
+    onUpdate?: (text: string) => void;
+    onDelete?: () => void;
   } = $props();
 
+  let backgroundImage: HTMLImageElement | undefined = $state(undefined);
+  let editingText = $state(false);
+  let editText = $state("");
+
   function handleUploadNewImage() {
     setCurrentStep("upload");
   }
 
-  let backgroundImage: HTMLImageElement | undefined = $state(undefined);
+  function handleEdit() {
+    editText = panel.texts[0]?.text || "";
+    editingText = true;
+  }
+
+  function handleSaveEdit() {
+    if (onUpdate && editText.trim()) {
+      onUpdate(editText.trim());
+    }
+    editingText = false;
+  }
+
+  function handleCancelEdit() {
+    editingText = false;
+    editText = "";
+  }
 
   $effect(() => {
-    const panel = $panelStore;
     if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
       loadImage(panel.backgroundImage);
     }
@@ -39,8 +62,6 @@
   }
 
   function getTextPosition(textItem: TextItem) {
-    const panel = $panelStore;
-    if (!panel) return { x: 0, y: 0 };
     const panelWidth = 320;
     const paddingX = textItem.paddingX || 0;
     const verticalOffset = textItem.verticalOffset || 0;
@@ -59,20 +80,38 @@
 </script>
 
 <div class="panel-preview">
-  {#if $panelStore}
-    <div class="preview-header">
-      <Button variant="primary" onclick={handleDownload}>Скачать панель</Button>
-      <Button variant="secondary" onclick={handleUploadNewImage}>Загрузить</Button>
-    </div>
+  <div class="preview-header">
+    {#if editingText}
+      <div class="edit-controls">
+        <input
+          type="text"
+          bind:value={editText}
+          class="edit-input"
+          onkeypress={(e) => e.key === "Enter" && handleSaveEdit()}
+        />
+        <Button variant="primary" size="sm" onclick={handleSaveEdit}>✓</Button>
+        <Button variant="secondary" size="sm" onclick={handleCancelEdit}>✕</Button>
+      </div>
+    {:else}
+      <div class="panel-title">{panel.texts[0]?.text || "Без названия"}</div>
+      <div class="panel-actions">
+        <IconButton variant="secondary" onclick={handleEdit} ariaLabel="Редактировать">✎</IconButton>
+        <Button variant="primary" size="sm" onclick={onDownload}>Скачать</Button>
+        {#if onDelete}
+          <IconButton variant="danger" onclick={onDelete} ariaLabel="Удалить">🗑</IconButton>
+        {/if}
+      </div>
+    {/if}
+  </div>
     <div class="preview-sections">
       <!-- Превью чистой картинки -->
       <div class="preview-section">
         <h3>Фон</h3>
         <div class="canvas-container">
-          <Stage width={320} height={$panelStore.height}>
+          <Stage width={320} height={panel.height}>
             <Layer>
               {#if backgroundImage}
-                <Image image={backgroundImage} width={320} height={$panelStore.height} />
+                <Image image={backgroundImage} width={320} height={panel.height} />
               {/if}
             </Layer>
           </Stage>
@@ -83,15 +122,15 @@
       <div class="preview-section">
         <h3>Финальный результат</h3>
         <div class="canvas-container">
-          <Stage width={320} height={$panelStore.height}>
+          <Stage width={320} height={panel.height}>
             <Layer>
               {#if backgroundImage}
-                <Image image={backgroundImage} width={320} height={$panelStore.height} />
+                <Image image={backgroundImage} width={320} height={panel.height} />
               {/if}
-              {#each $panelStore.texts || [] as textItem (textItem.id)}
+              {#each panel.texts || [] as textItem (textItem.id)}
                 {@const textPosition = getTextPosition(textItem)}
                 <Text
-                  text={textItem.text}
+                  text={editingText ? editText : textItem.text}
                   fontSize={textItem.fontSize}
                   fill={textItem.color}
                   fontFamily={textItem.fontFamily}
@@ -106,11 +145,6 @@
         </div>
       </div>
     </div>
-  {:else}
-    <div class="empty-state">
-      <p>Нет данных для предпросмотра</p>
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -123,11 +157,45 @@
 
   .preview-header {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
     padding: 1rem;
     margin-bottom: 1rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  .panel-title {
+    font-weight: 600;
+    color: #333;
+    font-size: 1.1rem;
+  }
+
+  .panel-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .edit-controls {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex: 1;
+  }
+
+  .edit-input {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+
+  .edit-input:focus {
+    outline: none;
+    border-color: #007bff;
   }
 
   .preview-sections {

src/components/TextManager.svelte

@@ -1,19 +1,15 @@
 
 <script lang="ts">
-  import { panelStore, addTextToPanel, updateTextInPanel, removeTextFromPanel } from "../stores/panelStore";
-  import type { TextItem } from "../lib/types/panel";
-  import { v4 as uuidv4 } from "uuid";
-  import { Button, IconButton } from "../lib/components/ui";
+  import { Button } from "../lib/components/ui";
 
-  let { onTextUpdate }: {
-    onTextUpdate: (texts: TextItem[]) => void;
+  let { onTextAdd }: {
+    onTextAdd: (text: string) => void;
   } = $props();
 
-  let currentPanel = $state($panelStore);
   let newText = $state("");
   let errorMessage = $state<string | null>(null);
 
-  // Общие настройки текста для всех текстов
+  // Общие настройки текста для всех панелей
   let commonTextSettings = $state({
     fontSize: 18,
     fontFamily: "Arial",
@@ -35,33 +31,7 @@
     "Trebuchet MS",
   ];
 
-  // Применить общие настройки ко всем текстам
-  function applyCommonSettingsToAll() {
-    if (!currentPanel) return;
-
-    const updatedTexts = currentPanel.texts.map(text => ({
-      ...text,
-      fontSize: commonTextSettings.fontSize,
-      fontFamily: commonTextSettings.fontFamily,
-      color: commonTextSettings.color,
-      textAlign: commonTextSettings.textAlign,
-      paddingX: commonTextSettings.paddingX,
-      verticalOffset: commonTextSettings.verticalOffset,
-    }));
-
-    const updatedPanel = updatePanel(currentPanel, { texts: updatedTexts });
-    panelStore.set(updatedPanel);
-    onTextUpdate(updatedTexts);
-  }
-
-  // Subscribe to panel store
-  $effect(() => {
-    currentPanel = $panelStore;
-  });
-
   function handleAddText() {
-    if (!currentPanel) return;
-
     if (!newText.trim()) {
       errorMessage = "Введите текст";
       return;
@@ -74,46 +44,44 @@
 
     try {
       errorMessage = null;
-      const updatedPanel = addTextToPanel(currentPanel, newText.trim());
-      panelStore.set(updatedPanel);
-      onTextUpdate(updatedPanel.texts);
+      onTextAdd(newText.trim());
       newText = "";
     } catch (error) {
       errorMessage = error instanceof Error ? error.message : "Ошибка добавления текста";
     }
   }
 
-  function handleUpdateText(textId: string, updates: Partial<TextItem>) {
-    if (!currentPanel) return;
-
-    try {
-      errorMessage = null;
-      const updatedPanel = updateTextInPanel(currentPanel, textId, updates);
-      panelStore.set(updatedPanel);
-      onTextUpdate(updatedPanel.texts);
-    } catch (error) {
-      errorMessage = error instanceof Error ? error.message : "Ошибка обновления текста";
-    }
-  }
-
-  function handleRemoveText(textId: string) {
-    if (!currentPanel) return;
-
-    try {
-      errorMessage = null;
-      const updatedPanel = removeTextFromPanel(currentPanel, textId);
-      panelStore.set(updatedPanel);
-      onTextUpdate(updatedPanel.texts);
-    } catch (error) {
-      errorMessage = error instanceof Error ? error.message : "Ошибка удаления текста";
+  function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      handleAddText();
     }
   }
 </script>
 
 <div class="text-manager">
+  <div class="add-text-section">
+    <div class="input-group">
+      <input
+        type="text"
+        bind:value={newText}
+        placeholder="Введите текст для панели (например: links, about me, projects...)"
+        class="text-input"
+        maxlength="100"
+        onkeypress={handleKeyPress}
+      />
+      <Button variant="primary" onclick={handleAddText}>Добавить</Button>
+    </div>
+    {#if errorMessage}
+      <div class="error-message">
+        {errorMessage}
+      </div>
+    {/if}
+  </div>
+
   <!-- Общие настройки текста -->
   <div class="common-settings-section">
     <h3>Общие настройки текста</h3>
+    <p class="settings-note">Настройки применятся ко всем создаваемым панелям</p>
     
     <div class="settings-grid">
       <div class="control-group">
@@ -127,7 +95,6 @@
             value={commonTextSettings.fontSize}
             oninput={(e) => {
               commonTextSettings.fontSize = parseInt(e.target.value);
-              applyCommonSettingsToAll();
             }}
           />
           <span class="value-display">{commonTextSettings.fontSize}px</span>
@@ -141,7 +108,6 @@
             value={commonTextSettings.fontFamily}
             onchange={(e) => {
               commonTextSettings.fontFamily = e.target.value;
-              applyCommonSettingsToAll();
             }}
           >
             {#each availableFonts as font}
@@ -159,7 +125,6 @@
             value={commonTextSettings.color}
             oninput={(e) => {
               commonTextSettings.color = e.target.value;
-              applyCommonSettingsToAll();
             }}
           />
         </label>
@@ -169,36 +134,33 @@
         <label>
           Выравнивание:
           <div class="alignment-buttons">
-            <IconButton
-              variant={commonTextSettings.textAlign === 'left' ? 'primary' : 'secondary'}
+            <button
+              class="align-btn {commonTextSettings.textAlign === 'left' ? 'active' : ''}"
               onclick={() => {
                 commonTextSettings.textAlign = 'left';
-                applyCommonSettingsToAll();
               }}
-              ariaLabel="Выровнять по левому краю"
+              aria-label="Выровнять по левому краю"
             >
               ←
-            </IconButton>
-            <IconButton
-              variant={commonTextSettings.textAlign === 'center' ? 'primary' : 'secondary'}
+            </button>
+            <button
+              class="align-btn {commonTextSettings.textAlign === 'center' ? 'active' : ''}"
               onclick={() => {
                 commonTextSettings.textAlign = 'center';
-                applyCommonSettingsToAll();
               }}
-              ariaLabel="Выровнять по центру"
+              aria-label="Выровнять по центру"
             >
               ↔
-            </IconButton>
-            <IconButton
-              variant={commonTextSettings.textAlign === 'right' ? 'primary' : 'secondary'}
+            </button>
+            <button
+              class="align-btn {commonTextSettings.textAlign === 'right' ? 'active' : ''}"
               onclick={() => {
                 commonTextSettings.textAlign = 'right';
-                applyCommonSettingsToAll();
               }}
-              ariaLabel="Выровнять по правому краю"
+              aria-label="Выровнять по правому краю"
             >
               →
-            </IconButton>
+            </button>
           </div>
         </label>
       </div>
@@ -214,7 +176,6 @@
             value={commonTextSettings.paddingX}
             oninput={(e) => {
               commonTextSettings.paddingX = parseInt(e.target.value);
-              applyCommonSettingsToAll();
             }}
           />
           <span class="value-display">{commonTextSettings.paddingX}px</span>
@@ -232,7 +193,6 @@
             value={commonTextSettings.verticalOffset}
             oninput={(e) => {
               commonTextSettings.verticalOffset = parseInt(e.target.value);
-              applyCommonSettingsToAll();
             }}
           />
           <span class="value-display">{commonTextSettings.verticalOffset > 0 ? '+' : ''}{commonTextSettings.verticalOffset}px</span>
@@ -241,44 +201,6 @@
     </div>
   </div>
 
-  <div class="add-text-section">
-    <div class="input-group">
-      <input
-        type="text"
-        bind:value={newText}
-        placeholder="Введите текст..."
-        class="text-input"
-        maxlength="100"
-      />
-      <Button variant="primary" onclick={handleAddText}>Добавить</Button>
-    </div>
-    {#if errorMessage}
-      <div class="error-message">
-        {errorMessage}
-      </div>
-    {/if}
-  </div>
-
-  {#if currentPanel && currentPanel.texts.length > 0}
-    <div class="text-list">
-      {#each currentPanel.texts as textItem (textItem.id)}
-        <div class="text-item">
-          <span class="text-content">{textItem.text}</span>
-          <IconButton
-            variant="danger"
-            onclick={() => handleRemoveText(textItem.id)}
-            ariaLabel="Удалить текст"
-          >
-            ×
-          </IconButton>
-        </div>
-      {/each}
-    </div>
-  {:else}
-    <div class="empty-state">
-      <p>Нет добавленного текста</p>
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -289,13 +211,6 @@
     width: 100%;
   }
 
-  .text-manager h2 {
-    margin: 0;
-    color: #333;
-    font-size: 1.5rem;
-    font-weight: 600;
-  }
-
   .common-settings-section {
     background: #f8f9fa;
     border: 2px solid #e9ecef;
@@ -311,6 +226,13 @@
     font-weight: 500;
   }
 
+  .settings-note {
+    margin: 0 0 1rem 0;
+    color: #666;
+    font-size: 0.875rem;
+    font-style: italic;
+  }
+
   .settings-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -319,13 +241,35 @@
 
   .alignment-buttons {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.25rem;
+  }
+
+  .align-btn {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ddd;
+    background: white;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+  }
+
+  .align-btn:hover {
+    background: #f0f0f0;
+    border-color: #007bff;
+  }
+
+  .align-btn.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
   }
 
   .add-text-section {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    margin-bottom: 1rem;
   }
 
   .input-group {

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { panelStore, createEmptyPanel } from "../stores/panelStore";
+  import { createPanelFromText, updatePanelText } from "../stores/panelStore";
   import { uiStore, setLoading, setCurrentStep } from "../stores/uiStore";
 
   import { exportService } from "../lib/services/exportService";
@@ -10,11 +10,12 @@
   import ImageCropper from "../components/ImageCropper.svelte";
   import TextManager from "../components/TextManager.svelte";
   import PanelPreview from "../components/PanelPreview.svelte";
+  import { Button } from "../lib/components/ui";
 
   let uploadedImage = $state<string | null>(null);
-  let croppedImage = $state<string | null>(null);
-  let currentPanel = $state<Panel | null>(null);
+  let panels = $state<Panel[]>([]);
   let errorMessage = $state<string | null>(null);
+  let backgroundImage = $state<string | null>(null);
 
   onMount(async () => {
     // Загружаем фоновое изображение по умолчанию
@@ -25,8 +26,7 @@
       const blob = await response.blob();
       const reader = new FileReader();
       reader.onload = () => {
-        const base64 = reader.result as string;
-        initializePanel(base64);
+        backgroundImage = reader.result as string;
       };
       reader.readAsDataURL(blob);
     } catch (error) {
@@ -35,17 +35,6 @@
     }
   });
 
-  function initializePanel(backgroundImage: string) {
-    const newPanel = createEmptyPanel();
-    newPanel.backgroundImage = backgroundImage;
-    panelStore.set(newPanel);
-    currentPanel = newPanel;
-  }
-
-  $effect(() => {
-    currentPanel = $panelStore;
-  });
-
   function handleImageUpload(image: string) {
     uploadedImage = image;
     errorMessage = null;
@@ -57,19 +46,13 @@
   }
 
   function handleCropComplete(croppedImage: string) {
-    croppedImage = croppedImage;
-
-    // Обновляем текущую панель с обрезанным изображением
-    if (currentPanel) {
-      const updatedPanel = {
-        ...currentPanel,
-        backgroundImage: croppedImage,
-        updatedAt: new Date(),
-      };
-      panelStore.set(updatedPanel);
-      currentPanel = updatedPanel;
-    }
-
+    backgroundImage = croppedImage;
+    // Обновляем все панели с новым фоновым изображением
+    panels = panels.map(panel => ({
+      ...panel,
+      backgroundImage: croppedImage,
+      updatedAt: new Date(),
+    }));
     setCurrentStep("text");
   }
 
@@ -78,26 +61,26 @@
     setCurrentStep("text");
   }
 
-  function handleTextUpdate(texts: Panel["texts"]) {
-    if (currentPanel) {
-      const updatedPanel = {
-        ...currentPanel,
-        texts,
-        updatedAt: new Date(),
-      };
-      panelStore.set(updatedPanel);
-    }
+  function handleAddText(text: string) {
+    if (!backgroundImage) return;
+    const newPanel = createPanelFromText(backgroundImage, text);
+    panels = [...panels, newPanel];
   }
 
-  async function handleDownload() {
-    if (!currentPanel) {
-      errorMessage = "Нет панели для скачивания";
-      return;
-    }
+  function handleUpdateText(panelId: string, text: string) {
+    panels = panels.map(panel => 
+      panel.id === panelId ? updatePanelText(panel, text) : panel
+    );
+  }
 
+  function handleDeletePanel(panelId: string) {
+    panels = panels.filter(panel => panel.id !== panelId);
+  }
+
+  async function handleDownload(panel: Panel) {
     try {
       setLoading(true);
-      const result = await exportService.exportPanel(currentPanel);
+      const result = await exportService.exportPanel(panel);
 
       if (!result.success) {
         errorMessage = result.error || "Ошибка экспорта панели";
@@ -109,6 +92,19 @@
     }
   }
 
+  async function handleDownloadAll() {
+    try {
+      setLoading(true);
+      for (const panel of panels) {
+        await exportService.exportPanel(panel);
+      }
+    } catch (error) {
+      errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панелей";
+    } finally {
+      setLoading(false);
+    }
+  }
+
 
 </script>
 
@@ -131,15 +127,32 @@
         <ImageCropper imageSrc={uploadedImage} onCropComplete={handleCropComplete} onCancel={handleCropCancel} />
       {:else if $uiStore.currentStep === "text"}
         <div class="text-section">
-          <h2>Управление текстом</h2>
-          <TextManager onTextUpdate={handleTextUpdate} />
+          <h2>Добавьте тексты для панелей</h2>
+          <TextManager onTextAdd={handleAddText} />
         </div>
       {/if}
     </div>
 
     <div class="sidebar">
-      {#if $uiStore.currentStep === "text"}
-        <PanelPreview onDownload={handleDownload} />
+      {#if $uiStore.currentStep === "text" && panels.length > 0}
+        <div class="panels-container">
+          <div class="panels-header">
+            <h2>Созданные панели ({panels.length})</h2>
+            <Button variant="primary" onclick={handleDownloadAll}>Скачать все</Button>
+          </div>
+          <div class="panels-list">
+            {#each panels as panel (panel.id)}
+              <div class="panel-item">
+                <PanelPreview 
+                  panel={panel} 
+                  onDownload={() => handleDownload(panel)}
+                  onUpdate={(text) => handleUpdateText(panel.id, text)}
+                  onDelete={() => handleDeletePanel(panel.id)}
+                />
+              </div>
+            {/each}
+          </div>
+        </div>
       {/if}
     </div>
   </div>
@@ -203,6 +216,41 @@
     gap: 1.5rem;
   }
 
+  .panels-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panels-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8px;
+    color: white;
+  }
+
+  .panels-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .panels-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panel-item {
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+  }
+
   .error-message {
     background: #ffebee;
     color: #c62828;

src/stores/panelStore.ts

@@ -50,3 +50,30 @@ export const removeTextFromPanel = (panel: Panel, textId: string): Panel => {
   const updatedTexts = panel.texts.filter((text) => text.id !== textId);
   return updatePanel(panel, { texts: updatedTexts });
 };
+
+export const createPanelFromText = (backgroundImage: string, text: string, height: number = 100): Panel => {
+  const newText = {
+    id: uuidv4(),
+    text,
+    fontSize: 18,
+    fontFamily: "Arial",
+    color: "#ffffff",
+    textAlign: "center" as const,
+    paddingX: 10,
+    verticalOffset: 0,
+  };
+
+  return {
+    id: uuidv4(),
+    backgroundImage,
+    texts: [newText],
+    height,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+};
+
+export const updatePanelText = (panel: Panel, text: string): Panel => {
+  const updatedTexts = panel.texts.map((t) => ({ ...t, text }));
+  return updatePanel(panel, { texts: updatedTexts });
+};