From c18ea193160f17f75da9deec6278018941b169b2 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 3 Feb 2026 22:25:58 +0500
Subject: [PATCH] fix: resolve deprecated warnings

---
 src/components/ImageCropper.svelte |  2 +-
 src/components/ImageUpload.svelte  | 32 +++++++++++++++++++-----------
 src/routes/+page.svelte            | 28 ++++++++++++++++----------
 3 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/ImageCropper.svelte b/src/components/ImageCropper.svelte
index 958abdd..9dfedcd 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/ImageCropper.svelte
@@ -113,7 +113,7 @@
     <img
       bind:this={imageElement}
       src={imageSrc}
-      alt="Image to crop"
+      alt=""
       class="cropper-image"
     />
   </div>
diff --git a/src/components/ImageUpload.svelte b/src/components/ImageUpload.svelte
index 8895ef8..21281ee 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/ImageUpload.svelte
@@ -8,10 +8,10 @@
 
   let imageService = new ImageService();
 
-  let dropZone: HTMLElement;
-  let fileInput: HTMLInputElement;
-  let urlInput: HTMLInputElement;
-  let urlForm: HTMLFormElement;
+  let dropZone = $state<HTMLElement | null>(null);
+  let fileInput = $state<HTMLInputElement | null>(null);
+  let urlInput = $state<HTMLInputElement | null>(null);
+  let urlForm = $state<HTMLFormElement | null>(null);
 
   let isDragOver = $state(false);
   let showUrlInput = $state(false);
@@ -68,13 +68,13 @@
   async function handleFileUpload(file: File) {
     try {
       setLoading(true);
-      uiStore.clearError();
+      clearError();
 
       const result: ImageUploadResult = await imageService.handleFileUpload(file);
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
       } else {
         errorMessage = result.error || "Ошибка загрузки файла";
       }
@@ -90,13 +90,13 @@
 
     try {
       setLoading(true);
-      uiStore.clearError();
+      clearError();
 
       const result: ImageUploadResult = await imageService.handlePasteUpload(e);
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
       } else {
         errorMessage = result.error || "Ошибка вставки изображения";
       }
@@ -114,13 +114,13 @@
 
     try {
       setLoading(true);
-      uiStore.clearError();
+      clearError();
 
       const result: ImageUploadResult = await imageService.handleUrlUpload(urlInput.value.trim());
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
         showUrlInput = false;
       } else {
         errorMessage = result.error || "Ошибка загрузки изображения";
@@ -140,7 +140,7 @@
     uploadedImage = null;
     errorMessage = null;
     showUrlInput = false;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
   }
 </script>
 
@@ -156,7 +156,15 @@
     <div
       bind:this={dropZone}
       class="drop-zone {isDragOver ? 'drag-over' : ''} {uiError ? 'error' : ''}"
+      role="button"
+      tabindex="0"
       onclick={triggerFileInput}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          triggerFileInput();
+        }
+      }}
     >
       <div class="drop-zone-content">
         <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -169,7 +177,7 @@
         <p>Перетащите файл сюда, нажмите для выбора, или вставьте через Ctrl+V</p>
 
         <div class="upload-methods">
-          <button class="btn btn-primary" onclick={triggerFileInput}> Выбрать файл </button>
+          <button class="btn btn-primary" onclick={(e) => { e.stopPropagation(); triggerFileInput(); }}> Выбрать файл </button>
 
           <button class="btn btn-secondary" onclick={() => (showUrlInput = !showUrlInput)}>
             {showUrlInput ? "Скрыть" : "По URL"}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 00fb6c0..4184ddb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,7 @@
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { panelStore, createEmptyPanel } from "../stores/panelStore";
-  import { uiStore, setLoading } from "../stores/uiStore";
+  import { uiStore, setLoading, setCurrentStep } from "../stores/uiStore";
   import { panelStorage } from "../lib/utils/panelStorage";
   import { exportService } from "../lib/services/exportService";
   import type { Panel } from "../lib/types/panel";
@@ -47,6 +47,7 @@
   function handleImageUpload(image: string) {
     uploadedImage = image;
     errorMessage = null;
+    uiStore.setCurrentStep("crop");
   }
 
   function handleCropComplete(croppedImage: string) {
@@ -62,12 +63,12 @@
     // Сохраняем панель
     panelStorage.savePanel(newPanel);
 
-    uiStore.setCurrentStep("text");
+    setCurrentStep("text");
   }
 
   function handleCropCancel() {
     uploadedImage = null;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
   }
 
   function handleTextUpdate(texts: Panel["texts"]) {
@@ -85,14 +86,14 @@
   function handlePanelSelect(panel: Panel) {
     panelStore.set(panel);
     currentPanel = panel;
-    uiStore.setCurrentStep("preview");
+    setCurrentStep("preview");
   }
 
   function handlePanelDelete(panelId: string) {
     if (currentPanel?.id === panelId) {
       panelStore.set(null);
       currentPanel = null;
-      uiStore.setCurrentStep("upload");
+      setCurrentStep("upload");
     }
   }
 
@@ -121,7 +122,7 @@
     currentPanel = null;
     uploadedImage = null;
     croppedImage = null;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
   }
 </script>
 
@@ -141,12 +142,14 @@
     <div class="main-section">
       {#if $uiStore.currentStep === "upload"}
         {#if ImageUpload}
-          <svelte:component this={ImageUpload.default} onImageSelect={handleImageUpload} />
+          {@const Upload = ImageUpload.default}
+          <svelte:component this={Upload} onImageSelect={handleImageUpload} />
         {/if}
       {:else if $uiStore.currentStep === "crop" && uploadedImage}
         {#if ImageCropper}
+          {@const Cropper = ImageCropper.default}
           <svelte:component 
-            this={ImageCropper.default}
+            this={Cropper}
             imageSrc={uploadedImage}
             onCropComplete={handleCropComplete}
             onCancel={handleCropCancel}
@@ -154,19 +157,22 @@
         {/if}
       {:else if $uiStore.currentStep === "text"}
         {#if TextManager}
-          <svelte:component this={TextManager.default} onTextUpdate={handleTextUpdate} />
+          {@const Manager = TextManager.default}
+          <svelte:component this={Manager} onTextUpdate={handleTextUpdate} />
         {/if}
       {:else if $uiStore.currentStep === "preview"}
         {#if PanelPreview}
-          <svelte:component this={PanelPreview.default} onDownload={handleDownload} />
+          {@const Preview = PanelPreview.default}
+          <svelte:component this={Preview} onDownload={handleDownload} />
         {/if}
       {/if}
     </div>
 
     <div class="sidebar">
       {#if PanelList}
+        {@const List = PanelList.default}
         <svelte:component 
-          this={PanelList.default}
+          this={List}
           onPanelSelect={handlePanelSelect}
           onPanelDelete={handlePanelDelete}
         />