refactor: change null to undefined

src/components/AppContainer.svelte

@@ -4,10 +4,10 @@
   import AppContent from "./AppContent.svelte";
 
   interface Props {
-    errorMessage: string | null;
-    uploadedImage: string | null;
+    errorMessage: string | undefined;
+    uploadedImage: string | undefined;
     texts: Array<{ id: string; text: string }>;
-    backgroundImage: string | null;
+    backgroundImage: string | undefined;
     panels: any[];
     onUploadNewImage: () => void;
     onImageUpload: (image: string) => void;
@@ -34,12 +34,12 @@
     onTextUpdate,
     onTextDelete,
     onDownload,
-    onDownloadAll
+    onDownloadAll,
   }: Props = $props();
 </script>
 
 <div class="app-container">
-  <AppHeader onUploadNewImage={onUploadNewImage} />
+  <AppHeader {onUploadNewImage} />
 
   <ErrorMessage {errorMessage} />
 
@@ -48,15 +48,15 @@
     {texts}
     {backgroundImage}
     {panels}
-    onImageUpload={onImageUpload}
-    onCropComplete={onCropComplete}
-    onCropCancel={onCropCancel}
-    onTextAdd={onTextAdd}
-    onTextUpdate={onTextUpdate}
-    onTextDelete={onTextDelete}
-    onUploadNewImage={onUploadNewImage}
-    onDownload={onDownload}
-    onDownloadAll={onDownloadAll}
+    {onImageUpload}
+    {onCropComplete}
+    {onCropCancel}
+    {onTextAdd}
+    {onTextUpdate}
+    {onTextDelete}
+    {onUploadNewImage}
+    {onDownload}
+    {onDownloadAll}
   />
 </div>
 

src/components/AppContent.svelte

@@ -3,9 +3,9 @@
   import Sidebar from "./Sidebar.svelte";
 
   interface Props {
-    uploadedImage: string | null;
+    uploadedImage: string | undefined;
     texts: Array<{ id: string; text: string }>;
-    backgroundImage: string | null;
+    backgroundImage: string | undefined;
     panels: any[];
     onImageUpload: (image: string) => void;
     onCropComplete: (croppedImage: string) => void;
@@ -31,7 +31,7 @@
     onTextDelete,
     onUploadNewImage,
     onDownload,
-    onDownloadAll
+    onDownloadAll,
   }: Props = $props();
 </script>
 
@@ -39,20 +39,14 @@
   <MainSection
     {uploadedImage}
     {texts}
-    onImageUpload={onImageUpload}
-    onCropComplete={onCropComplete}
-    onCropCancel={onCropCancel}
-    onTextAdd={onTextAdd}
-    onTextUpdate={onTextUpdate}
-    onTextDelete={onTextDelete}
-  />
-  <Sidebar
-    {backgroundImage}
-    {panels}
-    onUploadNewImage={onUploadNewImage}
-    onDownload={onDownload}
-    onDownloadAll={onDownloadAll}
+    {onImageUpload}
+    {onCropComplete}
+    {onCropCancel}
+    {onTextAdd}
+    {onTextUpdate}
+    {onTextDelete}
   />
+  <Sidebar {backgroundImage} {panels} {onUploadNewImage} {onDownload} {onDownloadAll} />
 </div>
 
 <style>

src/components/BackgroundPreview.svelte

@@ -2,7 +2,7 @@
   import { Button } from "../lib/components/ui";
 
   interface Props {
-    backgroundImage?: string | null;
+    backgroundImage?: string | undefined;
     onUploadNewImage: () => void;
   }
 

src/components/ErrorMessage.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   interface Props {
-    message: string | null;
+    errorMessage: string | undefined;
   }
 
-  let { message }: Props = $props();
+  let { errorMessage }: Props = $props();
 </script>
 
-{#if message}
+{#if errorMessage}
   <div class="error-message">
-    {message}
+    {errorMessage}
   </div>
 {/if}
 

src/components/ImageCropper.svelte

@@ -15,9 +15,9 @@
   let { imageSrc, onCropComplete, onCancel }: Props = $props();
 
   let imageElement: HTMLImageElement;
-  let cropper: CropperJS | null = null;
+  let cropper: CropperJS | undefined = undefined;
   let isProcessing = $state(false);
-  let errorMessage = $state<string | null>(null);
+  let errorMessage = $state<string | undefined>(undefined);
 
   let imageService = new ImageService();
 
@@ -46,7 +46,7 @@
 
     try {
       isProcessing = true;
-      errorMessage = null;
+      errorMessage = undefined;
       setLoading(true);
 
       console.log("Calling getCropperCanvas");

src/components/ImageManager.svelte

@@ -4,7 +4,7 @@
 
   interface Props {
     currentStep: string;
-    uploadedImage: string | null;
+    uploadedImage: string | undefined;
     onImageUpload: (image: string) => void;
     onCropComplete: (croppedImage: string) => void;
     onCropCancel: () => void;

src/components/ImageUpload.svelte

@@ -15,15 +15,15 @@
 
   let { onImageSelect }: Props = $props();
 
-  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 dropZone = $state<HTMLElement | undefined>(undefined);
+  let fileInput = $state<HTMLInputElement | undefined>(undefined);
+  let urlInput = $state<HTMLInputElement | undefined>(undefined);
+  let urlForm = $state<HTMLFormElement | undefined>(undefined);
 
   let isDragOver = $state(false);
   let showUrlInput = $state(false);
-  let uploadedImage = $state<string | null>(null);
-  let errorMessage = $state<string | null>(null);
+  let uploadedImage = $state<string | undefined>(undefined);
+  let errorMessage = $state<string | undefined>(undefined);
 
   const uiError = $derived($uiStore.error?.error);
 
@@ -148,8 +148,8 @@
   }
 
   function resetUpload() {
-    uploadedImage = null;
-    errorMessage = null;
+    uploadedImage = undefined;
+    errorMessage = undefined;
     showUrlInput = false;
     setCurrentStep("upload");
   }

src/components/MainSection.svelte

@@ -4,7 +4,7 @@
   import TextSection from "./TextSection.svelte";
 
   interface Props {
-    uploadedImage: string | null;
+    uploadedImage: string | undefined;
     texts: Array<{ id: string; text: string }>;
     onImageUpload: (image: string) => void;
     onCropComplete: (croppedImage: string) => void;
@@ -22,25 +22,14 @@
     onCropCancel,
     onTextAdd,
     onTextUpdate,
-    onTextDelete
+    onTextDelete,
   }: Props = $props();
 </script>
 
 <div class="main-section">
-  <ImageManager
-    currentStep={$uiStore.currentStep}
-    {uploadedImage}
-    onImageUpload={onImageUpload}
-    onCropComplete={onCropComplete}
-    onCropCancel={onCropCancel}
-  />
+  <ImageManager currentStep={$uiStore.currentStep} {uploadedImage} {onImageUpload} {onCropComplete} {onCropCancel} />
   {#if $uiStore.currentStep === "text"}
-    <TextSection
-      {texts}
-      onTextAdd={onTextAdd}
-      onTextUpdate={onTextUpdate}
-      onTextDelete={onTextDelete}
-    />
+    <TextSection {texts} {onTextAdd} {onTextUpdate} {onTextDelete} />
   {/if}
 </div>
 

src/components/PanelList.svelte

@@ -12,8 +12,8 @@
   let { onPanelSelect, onPanelDelete }: Props = $props();
 
   let panels = $state<Panel[]>([]);
-  let selectedPanelId = $state<string | null>(null);
-  let errorMessage = $state<string | null>(null);
+  let selectedPanelId = $state<string | undefined>(undefined);
+  let errorMessage = $state<string | undefined>(undefined);
 
   onMount(() => {
     loadPanels();
@@ -21,7 +21,7 @@
 
   function loadPanels() {
     try {
-      errorMessage = null;
+      errorMessage = undefined;
       panels = panelStorage.getAllPanels();
 
       // Если есть текущая панель в store, отмечаем её как выбранную
@@ -41,7 +41,7 @@
 
   function handlePanelDelete(panelId: string) {
     try {
-      errorMessage = null;
+      errorMessage = undefined;
       const result = panelStorage.deletePanel(panelId);
 
       if (result.success) {
@@ -49,7 +49,7 @@
 
         // Если удалили выбранную панель, сбрасываем выбор
         if (selectedPanelId === panelId) {
-          selectedPanelId = null;
+          selectedPanelId = undefined;
         }
 
         // Уведомляем родительский компонент

src/components/Sidebar.svelte

@@ -4,33 +4,20 @@
   import PanelsList from "./PanelsList.svelte";
 
   interface Props {
-    backgroundImage: string | null;
+    backgroundImage: string | undefined;
     panels: any[];
     onUploadNewImage: () => void;
     onDownload: (panel: any) => Promise<void>;
     onDownloadAll: () => Promise<void>;
   }
 
-  let {
-    backgroundImage,
-    panels,
-    onUploadNewImage,
-    onDownload,
-    onDownloadAll
-  }: Props = $props();
+  let { backgroundImage, panels, onUploadNewImage, onDownload, onDownloadAll }: Props = $props();
 </script>
 
 <div class="sidebar">
   {#if $uiStore.currentStep === "text"}
-    <BackgroundPreview
-      {backgroundImage}
-      onUploadNewImage={onUploadNewImage}
-    />
-    <PanelsList
-      {panels}
-      onDownload={onDownload}
-      onDownloadAll={onDownloadAll}
-    />
+    <BackgroundPreview {backgroundImage} {onUploadNewImage} />
+    <PanelsList {panels} {onDownload} {onDownloadAll} />
   {/if}
 </div>
 

src/components/TextManager.svelte

@@ -11,14 +11,14 @@
   let { onTextAdd, onTextUpdate, onTextDelete, texts }: Props = $props();
 
   let newText = $state("");
-  let errorMessage = $state<string | null>(null);
+  let errorMessage = $state<string | undefined>(undefined);
 
   // Общие настройки текста для всех панелей
   let commonTextSettings = $state({
     fontSize: 18,
     fontFamily: "Arial",
     color: "#ffffff",
-    textAlign: "center" as "left" | "center" | "right",
+    textAlign: "left" | "center" | "right",
     paddingX: 10,
     verticalOffset: 0,
   });
@@ -47,7 +47,7 @@
     }
 
     try {
-      errorMessage = null;
+      errorMessage = undefined;
       onTextAdd(newText.trim());
       newText = "";
     } catch (error) {