feat: remove browser check to simplicity (AI dumb)

src/components/ImageCropper.svelte

@@ -1,34 +1,22 @@
-
 <script lang="ts">
   import { onMount } from "svelte";
-  import { browser } from "$app/environment";
+  import CropperJS from "cropperjs";
   import type { ImageCropResult } from "../lib/types/panel";
   import { ImageService } from "../lib/services/imageService";
   import { uiStore, setLoading } from "../stores/uiStore";
-  
-  let Cropper = $state.raw<any>(undefined);
 
-  onMount(async () => {
+  let {
-    if (browser) {
+    imageSrc,
-      const cropperModule = await import("cropperjs");
+    onCropComplete,
-      Cropper = cropperModule.default || cropperModule;
+    onCancel,
-      
+  }: {
-      // Импортируем стили только на клиенте
-
-      
-      // Инициализируем cropper после загрузки
-      initializeCropper();
-    }
-  });
-
-  let { imageSrc, onCropComplete, onCancel }: {
     imageSrc: string;
     onCropComplete: (croppedImage: string) => void;
     onCancel: () => void;
   } = $props();
 
   let imageElement: HTMLImageElement;
-  let cropper: Cropper | null = null;
+  let cropper: CropperJS | null = null;
   let isProcessing = $state(false);
   let errorMessage = $state<string | null>(null);
 
@@ -44,27 +32,12 @@
   });
 
   function initializeCropper() {
-    console.log("initializeCropper called, imageElement:", !!imageElement, "Cropper:", !!Cropper);
+    console.log("initializeCropper called, imageElement:", !!imageElement, "CropperJS:", !!CropperJS);
-    if (!imageElement || !Cropper) {
+    if (!imageElement || !CropperJS) {
       return;
     }
 
-    cropper = new Cropper(imageElement, {
+    cropper = new CropperJS(imageElement);
-      aspectRatio: NaN, // Allow any aspect ratio
-      viewMode: 1,
-      dragMode: "move",
-      autoCropArea: 1,
-      restore: false,
-      guides: true,
-      center: true,
-      highlight: false,
-      cropBoxMovable: true,
-      cropBoxResizable: true,
-      toggleDragModeOnDblclick: false,
-      minCropBoxWidth: 320,
-      minCropBoxHeight: 50,
-      responsive: true,
-    });
   }
 
   async function handleCrop() {
@@ -89,8 +62,6 @@
       // Используем метод $toCanvas для получения HTMLCanvasElement
       const canvas = await cropperCanvasElement.$toCanvas({
         width: 320,
-        imageSmoothingEnabled: true,
-        imageSmoothingQuality: "high",
       });
 
       if (!canvas) {
@@ -125,33 +96,19 @@
 
 <div class="cropper-container">
   <div class="cropper-wrapper">
-    <img
+    <img bind:this={imageElement} src={imageSrc} alt="" class="cropper-image" />
-      bind:this={imageElement}
-      src={imageSrc}
-      alt=""
-      class="cropper-image"
-    />
   </div>
 
   {#if errorMessage}
     <div class="error-message">
-      <strong>Ошибка:</strong> {errorMessage}
+      <strong>Ошибка:</strong>
+      {errorMessage}
     </div>
   {/if}
 
   <div class="cropper-actions">
-    <button
+    <button class="btn btn-secondary" onclick={handleCancel} disabled={isProcessing}> Отмена </button>
-      class="btn btn-secondary"
+    <button class="btn btn-primary" onclick={handleCrop} disabled={isProcessing}>
-      onclick={handleCancel}
-      disabled={isProcessing}
-    >
-      Отмена
-    </button>
-    <button
-      class="btn btn-primary"
-      onclick={handleCrop}
-      disabled={isProcessing}
-    >
       {isProcessing ? "Обработка..." : "Применить"}
     </button>
   </div>
@@ -255,4 +212,55 @@
   :global(.cropper-point) {
     background-color: #007bff;
   }
+
+  /* Базовые стили для cropperjs */
+  :global(.cropper-container) {
+    direction: ltr;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+  }
+
+  :global(.cropper-container img) {
+    display: block;
+    height: 100%;
+    image-orientation: 0deg;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+  }
+
+  :global(.cropper-wrap-box,
+  .cropper-canvas,
+  .cropper-drag-box,
+  .cropper-crop-box,
+  .cropper-modal) {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  :global(.cropper-wrap-box,
+  .cropper-canvas) {
+    overflow: hidden;
+  }
+
+  :global(.cropper-drag-box) {
+    background-color: #fff;
+    opacity: 0;
+  }
+
+  :global(.cropper-modal) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  :global(.cropper-crop-box) {
+    border-color: rgba(0, 123, 255, 0.5);
+  }
 </style>

src/components/PanelPreview.svelte

@@ -1,40 +1,25 @@
-
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
   import { panelStore } from "../stores/panelStore";
+  import type { TextItem } from "../lib/types/panel";
+  import { Stage, Layer, Image, Text } from "svelte-konva";
 
-  let { onDownload }: {
+  let {
+    onDownload,
+  }: {
     onDownload?: () => void;
   } = $props();
 
-  let Stage = $state.raw<any>(undefined);
-  let Layer = $state.raw<any>(undefined);
-  let KonvaImage = $state.raw<any>(undefined);
-  let Text = $state.raw<any>(undefined);
-
   let backgroundImage: HTMLImageElement | undefined = $state(undefined);
 
   $effect(() => {
-    if (!browser) return;
     const panel = $panelStore;
     if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
       loadImage(panel.backgroundImage);
     }
   });
 
-  onMount(async () => {
-    if (browser) {
-      const svelteKonva = await import("svelte-konva");
-      Stage = svelteKonva.Stage;
-      Layer = svelteKonva.Layer;
-      KonvaImage = svelteKonva.Image;
-      Text = svelteKonva.Text;
-    }
-  });
-
   function loadImage(src: string) {
-    const img = new Image();
+    const img = document.createElement("img");
     img.onload = () => {
       backgroundImage = img;
     };
@@ -47,7 +32,7 @@
     }
   }
 
-  function getTextPosition(textItem: any) {
+  function getTextPosition(textItem: TextItem) {
     const panel = $panelStore;
     if (!panel) return { x: 0, y: 0 };
     const panelWidth = 320;
@@ -71,13 +56,11 @@
   <div class="preview-header">
     <h2>Предпросмотр панели</h2>
     {#if $panelStore}
-      <button class="btn btn-primary" onclick={handleDownload}>
+      <button class="btn btn-primary" onclick={handleDownload}> Скачать </button>
-        Скачать
-      </button>
     {/if}
   </div>
 
-  {#if $panelStore && Stage}
+  {#if $panelStore}
     <div class="preview-sections">
       <!-- Превью чистой картинки -->
       <div class="preview-section">
@@ -86,11 +69,7 @@
           <Stage width={320} height={$panelStore.height}>
             <Layer>
               {#if backgroundImage}
-                <KonvaImage
+                <Image image={backgroundImage} width={320} height={$panelStore.height} />
-                  image={backgroundImage}
-                  width={320}
-                  height={$panelStore.height}
-                />
               {/if}
             </Layer>
           </Stage>
@@ -102,29 +81,25 @@
         <h3>С текстом</h3>
         <div class="canvas-container">
           <Stage width={320} height={$panelStore.height}>
-        <Layer>
+            <Layer>
-          {#if backgroundImage}
+              {#if backgroundImage}
-            <KonvaImage
+                <Image image={backgroundImage} width={320} height={$panelStore.height} />
-              image={backgroundImage}
+              {/if}
-              width={320}
+              {#each $panelStore.texts || [] as textItem (textItem.id)}
-              height={$panelStore.height}
+                {@const textPosition = getTextPosition(textItem)}
-            />
+                <Text
-          {/if}
+                  text={textItem.text}
-          {#each $panelStore.texts || [] as textItem (textItem.id)}
+                  fontSize={textItem.fontSize}
-            {@const textPosition = getTextPosition(textItem)}
+                  fill={textItem.color}
-            <Text
+                  fontFamily={textItem.fontFamily}
-              text={textItem.text}
+                  x={textPosition.x}
-              fontSize={textItem.fontSize}
+                  y={textPosition.y}
-              fill={textItem.color}
+                  align={textItem.textAlign}
-              fontFamily={textItem.fontFamily}
+                  width={320 - textItem.paddingX * 2}
-              x={textPosition.x}
+                />
-              y={textPosition.y}
+              {/each}
-              align={textItem.textAlign}
+            </Layer>
-              width={320 - (textItem.paddingX * 2)}
+          </Stage>
-            />
-          {/each}
-        </Layer>
-      </Stage>
         </div>
       </div>
     </div>

src/components/TextPreview.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
   import type { TextItem } from "../lib/types/panel";
   import { panelStore } from "../stores/panelStore";
+  import { Stage, Layer, Image, Text } from "svelte-konva";
 
   let {
     textItem,
@@ -12,32 +11,17 @@
     height: number;
   } = $props();
 
-  let Stage = $state.raw<any>(undefined);
-  let Layer = $state.raw<any>(undefined);
-  let KonvaImage = $state.raw<any>(undefined);
-  let Text = $state.raw<any>(undefined);
   let bgImage: HTMLImageElement | undefined = $state(undefined);
   let currentPanel = $state($panelStore);
 
-  onMount(async () => {
-    if (browser) {
-      const svelteKonva = await import("svelte-konva");
-      Stage = svelteKonva.Stage;
-      Layer = svelteKonva.Layer;
-      KonvaImage = svelteKonva.Image;
-      Text = svelteKonva.Text;
-    }
-  });
-
   $effect(() => {
-    if (!browser) return;
     if (currentPanel?.backgroundImage && currentPanel.backgroundImage !== bgImage?.src) {
       loadImage(currentPanel.backgroundImage);
     }
   });
 
   function loadImage(src: string) {
-    const img = new Image();
+    const img = document.createElement("img");
     img.onload = () => {
       bgImage = img;
     };
@@ -66,11 +50,11 @@
 </script>
 
 <div class="text-preview">
-  {#if Stage && bgImage}
+  {#if bgImage}
     <div class="canvas-container">
       <Stage width={320} {height}>
         <Layer>
-          <KonvaImage image={bgImage} width={320} {height} />
+          <Image image={bgImage} width={320} {height} />
           <Text
             text={textItem.text}
             fontSize={textItem.fontSize}

src/lib/services/exportService.ts

@@ -74,7 +74,7 @@ export class ExportService {
    */
   private loadImage(src: string): Promise<HTMLImageElement> {
     return new Promise((resolve, reject) => {
-      const img = new Image();
+      const img = document.createElement("img");
       img.onload = () => resolve(img);
       img.onerror = () => reject(new ImageError("Не удалось загрузить изображение"));
       img.src = src;

src/lib/utils/imageValidator.ts

@@ -66,7 +66,7 @@ export function validateImageElement(img: HTMLImageElement): ValidationResult {
 
 export async function loadImage(src: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
-    const img = new Image();
+    const img = document.createElement("img");
     img.crossOrigin = "anonymous";
 
     img.onload = () => resolve(img);

src/routes/+page.svelte

@@ -1,28 +1,14 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
   import { panelStore, createEmptyPanel } from "../stores/panelStore";
   import { uiStore, setLoading, setCurrentStep } from "../stores/uiStore";
 
   import { exportService } from "../lib/services/exportService";
   import type { Panel } from "../lib/types/panel";
 
-  let ImageUpload: any = $state(undefined);
+  import ImageUpload from "../components/ImageUpload.svelte";
-  let ImageCropper: any = $state(undefined);
+  import ImageCropper from "../components/ImageCropper.svelte";
-  let TextManager: any = $state(undefined);
+  import TextManager from "../components/TextManager.svelte";
-  let PanelPreview: any = $state(undefined);
+  import PanelPreview from "../components/PanelPreview.svelte";
-
-
-  onMount(async () => {
-    if (browser) {
-      [ImageUpload, ImageCropper, TextManager, PanelPreview] = await Promise.all([
-        import("../components/ImageUpload.svelte"),
-        import("../components/ImageCropper.svelte"),
-        import("../components/TextManager.svelte"),
-        import("../components/PanelPreview.svelte")
-      ]);
-    }
-  });
 
   let uploadedImage = $state<string | null>(null);
   let croppedImage = $state<string | null>(null);
@@ -105,29 +91,17 @@
   <div class="app-content">
     <div class="main-section">
       {#if $uiStore.currentStep === "upload"}
-        {#if ImageUpload}
+        <ImageUpload onImageSelect={handleImageUpload} />
-          {@const Upload = ImageUpload.default}
-          <Upload onImageSelect={handleImageUpload} />
-        {/if}
       {:else if $uiStore.currentStep === "crop" && uploadedImage}
-        {#if ImageCropper}
+        <ImageCropper imageSrc={uploadedImage} onCropComplete={handleCropComplete} onCancel={handleCropCancel} />
-          {@const Cropper = ImageCropper.default}
-          <Cropper imageSrc={uploadedImage} onCropComplete={handleCropComplete} onCancel={handleCropCancel} />
-        {/if}
       {:else if $uiStore.currentStep === "text"}
-        {#if TextManager}
+        <TextManager onTextUpdate={handleTextUpdate} />
-          {@const Manager = TextManager.default}
-          <Manager onTextUpdate={handleTextUpdate} />
-        {/if}
       {/if}
     </div>
 
     <div class="sidebar">
-      {#if $uiStore.currentStep === "text" && PanelPreview?.default}
+      {#if $uiStore.currentStep === "text"}
-        {@const Preview = PanelPreview.default}
+        <PanelPreview onDownload={handleDownload} />
-        <Preview onDownload={handleDownload} />
-      {:else if $uiStore.currentStep === "text"}
-        <div class="loading">Загрузка предпросмотра...</div>
       {/if}
     </div>
   </div>