feat: move to new workflow, create workflow and mvp plan

src/components/PanelPreview.svelte

@@ -7,40 +7,17 @@
   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");
   }
 
-  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(() => {
     if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
       loadImage(panel.backgroundImage);
@@ -81,27 +58,8 @@
 
 <div class="panel-preview">
   <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 class="panel-title">{panel.texts[0]?.text || "Без названия"}</div>
+    <Button variant="primary" size="sm" onclick={onDownload}>Скачать</Button>
   </div>
     <div class="preview-sections">
       <!-- Превью чистой картинки -->

src/components/TextManager.svelte

@@ -2,8 +2,11 @@
 <script lang="ts">
   import { Button } from "../lib/components/ui";
 
-  let { onTextAdd }: {
+  let { onTextAdd, onTextUpdate, onTextDelete, texts }: {
     onTextAdd: (text: string) => void;
+    onTextUpdate: (id: string, text: string) => void;
+    onTextDelete: (id: string) => void;
+    texts: Array<{ id: string; text: string }>;
   } = $props();
 
   let newText = $state("");
@@ -56,6 +59,18 @@
       handleAddText();
     }
   }
+
+  function handleUpdateText(id: string, newText: string) {
+    if (onTextUpdate && newText.trim()) {
+      onTextUpdate(id, newText.trim());
+    }
+  }
+
+  function handleDeleteText(id: string) {
+    if (onTextDelete) {
+      onTextDelete(id);
+    }
+  }
 </script>
 
 <div class="text-manager">
@@ -78,6 +93,34 @@
     {/if}
   </div>
 
+  <!-- Список текстов -->
+  {#if texts.length > 0}
+    <div class="texts-list">
+      <h3>Созданные тексты ({texts.length})</h3>
+      <div class="texts-container">
+        {#each texts as textItem (textItem.id)}
+          <div class="text-item">
+            <input
+              type="text"
+              value={textItem.text}
+              oninput={(e) => handleUpdateText(textItem.id, e.target.value)}
+              class="text-edit-input"
+              maxlength="100"
+            />
+            <Button
+              variant="danger"
+              size="sm"
+              onclick={() => handleDeleteText(textItem.id)}
+              aria-label="Удалить текст"
+            >
+              ×
+            </Button>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
   <!-- Общие настройки текста -->
   <div class="common-settings-section">
     <h3>Общие настройки текста</h3>
@@ -272,6 +315,45 @@
     margin-bottom: 1rem;
   }
 
+  .texts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .texts-list h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .texts-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .text-item {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .text-edit-input {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.95rem;
+  }
+
+  .text-edit-input:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+
   .input-group {
     display: flex;
     gap: 0.5rem;

src/routes/+page.svelte

@@ -14,6 +14,7 @@
 
   let uploadedImage = $state<string | null>(null);
   let panels = $state<Panel[]>([]);
+  let texts = $state<Array<{ id: string; text: string }>>([]);
   let errorMessage = $state<string | null>(null);
   let backgroundImage = $state<string | null>(null);
 
@@ -62,20 +63,32 @@
   }
 
   function handleAddText(text: string) {
+    texts = [...texts, { id: crypto.randomUUID(), text }];
+    updatePanelsFromTexts();
+  }
+
+  function handleUpdateText(id: string, newText: string) {
+    texts = texts.map(t => t.id === id ? { ...t, text: newText } : t);
+    updatePanelsFromTexts();
+  }
+
+  function handleDeleteText(id: string) {
+    texts = texts.filter(t => t.id !== id);
+    updatePanelsFromTexts();
+  }
+
+  function updatePanelsFromTexts() {
     if (!backgroundImage) return;
-    const newPanel = createPanelFromText(backgroundImage, text);
-    panels = [...panels, newPanel];
+    panels = texts.map(textItem => {
+      const existingPanel = panels.find(p => p.texts[0]?.text === textItem.text);
+      if (existingPanel) {
+        return updatePanelText(existingPanel, textItem.text);
+      }
+      return createPanelFromText(backgroundImage, textItem.text);
+    });
   }
 
-  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 {
@@ -128,7 +141,12 @@
       {:else if $uiStore.currentStep === "text"}
         <div class="text-section">
           <h2>Добавьте тексты для панелей</h2>
-          <TextManager onTextAdd={handleAddText} />
+          <TextManager 
+            onTextAdd={handleAddText}
+            onTextUpdate={handleUpdateText}
+            onTextDelete={handleDeleteText}
+            texts={texts}
+          />
         </div>
       {/if}
     </div>
@@ -146,8 +164,6 @@
                 <PanelPreview 
                   panel={panel} 
                   onDownload={() => handleDownload(panel)}
-                  onUpdate={(text) => handleUpdateText(panel.id, text)}
-                  onDelete={() => handleDeletePanel(panel.id)}
                 />
               </div>
             {/each}