From f49992b19e5bb4e1abb03679fec393ce793c106f Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 3 Feb 2026 22:12:35 +0500
Subject: [PATCH] fix: resolve on: events, svelte 5 updates

---
 src/components/ImageCropper.svelte | 24 +++++++++---
 src/components/ImageUpload.svelte  | 12 +++---
 src/components/PanelList.svelte    |  6 +--
 src/components/PanelPreview.svelte | 15 +++++---
 src/components/TextManager.svelte  | 14 +++----
 src/routes/+layout.ts              |  4 +-
 src/routes/+page.svelte            | 61 +++++++++++++++++++++---------
 7 files changed, 89 insertions(+), 47 deletions(-)

diff --git a/src/components/ImageCropper.svelte b/src/components/ImageCropper.svelte
index aad850a..aa15f0c 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/ImageCropper.svelte
@@ -1,11 +1,25 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-  import Cropper from "cropperjs";
+  import { browser } from "$app/environment";
   import type { ImageCropResult } from "../lib/types/panel";
   import { ImageService } from "../lib/services/imageService";
   import { uiStore } from "../stores/uiStore";
-  import "cropperjs/dist/cropper.css";
+  
+  let Cropper: any = $state(undefined);
+
+  onMount(async () => {
+    if (browser) {
+      const cropperModule = await import("cropperjs");
+      Cropper = cropperModule.default;
+      
+      // Импортируем стили только на клиенте
+      await import("cropperjs/dist/cropper.css");
+      
+      // Инициализируем cropper после загрузки
+      initializeCropper();
+    }
+  });
 
   let { imageSrc, onCropComplete, onCancel }: {
     imageSrc: string;
@@ -30,7 +44,7 @@
   });
 
   function initializeCropper() {
-    if (!imageElement) return;
+    if (!imageElement || !Cropper) return;
 
     cropper = new Cropper(imageElement, {
       aspectRatio: NaN, // Allow any aspect ratio
@@ -113,14 +127,14 @@
   <div class="cropper-actions">
     <button
       class="btn btn-secondary"
-      on:click={handleCancel}
+      onclick={handleCancel}
       disabled={isProcessing}
     >
       Отмена
     </button>
     <button
       class="btn btn-primary"
-      on:click={handleCrop}
+      onclick={handleCrop}
       disabled={isProcessing}
     >
       {isProcessing ? "Обработка..." : "Применить"}
diff --git a/src/components/ImageUpload.svelte b/src/components/ImageUpload.svelte
index 710e876..2bbc57f 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/ImageUpload.svelte
@@ -149,14 +149,14 @@
     <div class="uploaded-image-preview">
       <img src={uploadedImage} alt="Uploaded preview" />
       <div class="preview-actions">
-        <button class="btn btn-secondary" on:click={resetUpload}> Загрузить другое </button>
+        <button class="btn btn-secondary" onclick={resetUpload}> Загрузить другое </button>
       </div>
     </div>
   {:else}
     <div
       bind:this={dropZone}
       class="drop-zone {isDragOver ? 'drag-over' : ''} {uiError ? 'error' : ''}"
-      on:click={triggerFileInput}
+      onclick={triggerFileInput}
     >
       <div class="drop-zone-content">
         <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -169,15 +169,15 @@
         <p>Перетащите файл сюда, нажмите для выбора, или вставьте через Ctrl+V</p>
 
         <div class="upload-methods">
-          <button class="btn btn-primary" on:click={triggerFileInput}> Выбрать файл </button>
+          <button class="btn btn-primary" onclick={triggerFileInput}> Выбрать файл </button>
 
-          <button class="btn btn-secondary" on:click={() => (showUrlInput = !showUrlInput)}>
+          <button class="btn btn-secondary" onclick={() => (showUrlInput = !showUrlInput)}>
             {showUrlInput ? "Скрыть" : "По URL"}
           </button>
         </div>
 
         {#if showUrlInput}
-          <form bind:this={urlForm} on:submit={handleUrlSubmit} class="url-input-form">
+          <form bind:this={urlForm} onsubmit={handleUrlSubmit} class="url-input-form">
             <input
               bind:this={urlInput}
               type="url"
@@ -202,7 +202,7 @@
       type="file"
       accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
       style="display: none;"
-      on:change={(e) => {
+      onchange={(e) => {
         const file = e.target.files?.[0];
         if (file) handleFileUpload(file);
       }}
diff --git a/src/components/PanelList.svelte b/src/components/PanelList.svelte
index bc08c0f..dbf03c8 100644
--- a/src/components/PanelList.svelte
+++ b/src/components/PanelList.svelte
@@ -75,7 +75,7 @@
 <div class="panel-list">
   <div class="panel-list-header">
     <h2>Сохраненные панели</h2>
-    <button class="btn btn-refresh" on:click={loadPanels} aria-label="Обновить список">
+    <button class="btn btn-refresh" onclick={loadPanels} aria-label="Обновить список">
       ↻
     </button>
   </div>
@@ -95,7 +95,7 @@
       {#each panels as panel (panel.id)}
         <div
           class="panel-card {selectedPanelId === panel.id ? 'selected' : ''}"
-          on:click={() => handlePanelSelect(panel)}
+          onclick={() => handlePanelSelect(panel)}
           role="button"
           tabindex="0"
         >
@@ -120,7 +120,7 @@
             <div class="panel-actions">
               <button
                 class="btn-icon btn-delete"
-                on:click|stopPropagation={() => handlePanelDelete(panel.id)}
+                onclick={(e) => { e.stopPropagation(); handlePanelDelete(panel.id); }}
                 aria-label="Удалить панель"
               >
                 🗑️
diff --git a/src/components/PanelPreview.svelte b/src/components/PanelPreview.svelte
index f0fb695..f9ded5a 100644
--- a/src/components/PanelPreview.svelte
+++ b/src/components/PanelPreview.svelte
@@ -1,6 +1,7 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
+  import { browser } from "$app/environment";
   import { panelStore } from "../stores/panelStore";
   import type { Panel } from "../lib/types/panel";
   import type { PageProps } from "./$types";
@@ -25,11 +26,13 @@
   });
 
   onMount(async () => {
-    const svelteKonva = await import("svelte-konva");
-    Stage = svelteKonva.Stage;
-    Layer = svelteKonva.Layer;
-    Image = svelteKonva.Image;
-    Text = svelteKonva.Text;
+    if (browser) {
+      const svelteKonva = await import("svelte-konva");
+      Stage = svelteKonva.Stage;
+      Layer = svelteKonva.Layer;
+      Image = svelteKonva.Image;
+      Text = svelteKonva.Text;
+    }
   });
 
   function loadImage(src: string) {
@@ -51,7 +54,7 @@
   <div class="preview-header">
     <h2>Предпросмотр панели</h2>
     {#if currentPanel}
-      <button class="btn btn-primary" on:click={handleDownload}>
+      <button class="btn btn-primary" onclick={handleDownload}>
         Скачать
       </button>
     {/if}
diff --git a/src/components/TextManager.svelte b/src/components/TextManager.svelte
index 748e525..ef903cc 100644
--- a/src/components/TextManager.svelte
+++ b/src/components/TextManager.svelte
@@ -92,7 +92,7 @@
         class="text-input"
         maxlength="100"
       />
-      <button class="btn btn-primary" on:click={handleAddText}>
+      <button class="btn btn-primary" onclick={handleAddText}>
         Добавить
       </button>
     </div>
@@ -108,13 +108,13 @@
       {#each currentPanel.texts as textItem (textItem.id)}
         <div
           class="text-item {selectedTextId === textItem.id ? 'selected' : ''}"
-          on:click={() => handleSelectText(textItem.id)}
+          onclick={() => handleSelectText(textItem.id)}
         >
           <div class="text-preview">
             <span class="text-content">{textItem.text}</span>
             <button
               class="btn-icon btn-delete"
-              on:click|stopPropagation={() => handleRemoveText(textItem.id)}
+              onclick={(e) => { e.stopPropagation(); handleRemoveText(textItem.id); }}
               aria-label="Удалить текст"
             >
               ×
@@ -132,7 +132,7 @@
                     max="72"
                     step="1"
                     value={textItem.fontSize}
-                    on:input={(e) => handleUpdateText(textItem.id, {
+                    oninput={(e) => handleUpdateText(textItem.id, {
                       fontSize: parseInt(e.target.value)
                     })}
                   />
@@ -146,7 +146,7 @@
                   <input
                     type="color"
                     value={textItem.color}
-                    on:input={(e) => handleUpdateText(textItem.id, {
+                    oninput={(e) => handleUpdateText(textItem.id, {
                       color: e.target.value
                     })}
                   />
@@ -162,7 +162,7 @@
                     max="320"
                     step="1"
                     value={textItem.x}
-                    on:input={(e) => handleUpdateText(textItem.id, {
+                    oninput={(e) => handleUpdateText(textItem.id, {
                       x: parseInt(e.target.value)
                     })}
                   />
@@ -179,7 +179,7 @@
                     max={currentPanel.height}
                     step="1"
                     value={textItem.y}
-                    on:input={(e) => handleUpdateText(textItem.id, {
+                    oninput={(e) => handleUpdateText(textItem.id, {
                       y: parseInt(e.target.value)
                     })}
                   />
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index b73f636..1525b50 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,2 +1,2 @@
-export const ssr = true;
-export const prerender = true;
+export const ssr = false;
+export const prerender = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a97ee90..37fc774 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,13 +6,26 @@
   import { uiStore } from "../stores/uiStore";
   import { panelStorage } from "../lib/utils/panelStorage";
   import { exportService } from "../lib/services/exportService";
-  import ImageUpload from "../components/ImageUpload.svelte";
-  import ImageCropper from "../components/ImageCropper.svelte";
-  import TextManager from "../components/TextManager.svelte";
-  import PanelPreview from "../components/PanelPreview.svelte";
-  import PanelList from "../components/PanelList.svelte";
   import type { Panel } from "../lib/types/panel";
 
+  let ImageUpload: any = $state(undefined);
+  let ImageCropper: any = $state(undefined);
+  let TextManager: any = $state(undefined);
+  let PanelPreview: any = $state(undefined);
+  let PanelList: any = $state(undefined);
+
+  onMount(async () => {
+    if (browser) {
+      [ImageUpload, ImageCropper, TextManager, PanelPreview, PanelList] = await Promise.all([
+        import("../components/ImageUpload.svelte"),
+        import("../components/ImageCropper.svelte"),
+        import("../components/TextManager.svelte"),
+        import("../components/PanelPreview.svelte"),
+        import("../components/PanelList.svelte")
+      ]);
+    }
+  });
+
   let uploadedImage = $state<string | null>(null);
   let croppedImage = $state<string | null>(null);
   let currentPanel = $state<Panel | null>(null);
@@ -115,7 +128,7 @@
 <div class="app-container">
   <div class="app-header">
     <h1>Twitch Panels Creator</h1>
-    <button class="btn btn-primary" on:click={handleNewPanel}>Новая панель</button>
+    <button class="btn btn-primary" onclick={handleNewPanel}>Новая панель</button>
   </div>
 
   {#if errorMessage}
@@ -127,25 +140,37 @@
   <div class="app-content">
     <div class="main-section">
       {#if $uiStore.currentStep === "upload"}
-        <ImageUpload onImageSelect={handleImageUpload} />
+        {#if ImageUpload}
+          <svelte:component this={ImageUpload.default} onImageSelect={handleImageUpload} />
+        {/if}
       {:else if $uiStore.currentStep === "crop" && uploadedImage}
-        <ImageCropper
-          imageSrc={uploadedImage}
-          onCropComplete={handleCropComplete}
-          onCancel={handleCropCancel}
-        />
+        {#if ImageCropper}
+          <svelte:component 
+            this={ImageCropper.default}
+            imageSrc={uploadedImage}
+            onCropComplete={handleCropComplete}
+            onCancel={handleCropCancel}
+          />
+        {/if}
       {:else if $uiStore.currentStep === "text"}
-        <TextManager onTextUpdate={handleTextUpdate} />
+        {#if TextManager}
+          <svelte:component this={TextManager.default} onTextUpdate={handleTextUpdate} />
+        {/if}
       {:else if $uiStore.currentStep === "preview"}
-        <PanelPreview onDownload={handleDownload} />
+        {#if PanelPreview}
+          <svelte:component this={PanelPreview.default} onDownload={handleDownload} />
+        {/if}
       {/if}
     </div>
 
     <div class="sidebar">
-      <PanelList
-        onPanelSelect={handlePanelSelect}
-        onPanelDelete={handlePanelDelete}
-      />
+      {#if PanelList}
+        <svelte:component 
+          this={PanelList.default}
+          onPanelSelect={handlePanelSelect}
+          onPanelDelete={handlePanelDelete}
+        />
+      {/if}
     </div>
   </div>
 </div>