From 2b701dec6c3010e52f836f6b2666d268568cdd28 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 3 Feb 2026 22:04:39 +0500
Subject: [PATCH] fix: resolve components in legacy mode

---
 src/components/ImageCropper.svelte | 8 +++++---
 src/components/ImageUpload.svelte  | 2 +-
 src/components/PanelList.svelte    | 6 ++++--
 src/components/PanelPreview.svelte | 4 +++-
 src/components/TextManager.svelte  | 4 +++-
 svelte.config.js                   | 3 +++
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ImageCropper.svelte b/src/components/ImageCropper.svelte
index 9c5a34e..aad850a 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/ImageCropper.svelte
@@ -7,9 +7,11 @@
   import { uiStore } from "../stores/uiStore";
   import "cropperjs/dist/cropper.css";
 
-  export let imageSrc: string;
-  export let onCropComplete: (croppedImage: string) => void;
-  export let onCancel: () => void;
+  let { imageSrc, onCropComplete, onCancel }: {
+    imageSrc: string;
+    onCropComplete: (croppedImage: string) => void;
+    onCancel: () => void;
+  } = $props();
 
   let imageElement: HTMLImageElement;
   let cropper: Cropper | null = null;
diff --git a/src/components/ImageUpload.svelte b/src/components/ImageUpload.svelte
index c8d1fc7..710e876 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/ImageUpload.svelte
@@ -18,7 +18,7 @@
   let uploadedImage = $state<string | null>(null);
   let errorMessage = $state<string | null>(null);
 
-  $derived((uiError = $uiStore.error?.error));
+  const uiError = $derived($uiStore.error?.error);
 
   onMount(() => {
     setupPasteHandler();
diff --git a/src/components/PanelList.svelte b/src/components/PanelList.svelte
index d05f472..bc08c0f 100644
--- a/src/components/PanelList.svelte
+++ b/src/components/PanelList.svelte
@@ -5,8 +5,10 @@
   import { panelStorage } from "../lib/utils/panelStorage";
   import type { Panel } from "../lib/types/panel";
 
-  export let onPanelSelect: (panel: Panel) => void;
-  export let onPanelDelete: (panelId: string) => void;
+  let { onPanelSelect, onPanelDelete }: {
+    onPanelSelect: (panel: Panel) => void;
+    onPanelDelete: (panelId: string) => void;
+  } = $props();
 
   let panels = $state<Panel[]>([]);
   let selectedPanelId = $state<string | null>(null);
diff --git a/src/components/PanelPreview.svelte b/src/components/PanelPreview.svelte
index 922c093..f0fb695 100644
--- a/src/components/PanelPreview.svelte
+++ b/src/components/PanelPreview.svelte
@@ -5,7 +5,9 @@
   import type { Panel } from "../lib/types/panel";
   import type { PageProps } from "./$types";
 
-  export let onDownload?: () => void;
+  let { onDownload }: {
+    onDownload?: () => void;
+  } = $props();
 
   let Stage: any = $state(undefined);
   let Layer: any = $state(undefined);
diff --git a/src/components/TextManager.svelte b/src/components/TextManager.svelte
index 865178a..748e525 100644
--- a/src/components/TextManager.svelte
+++ b/src/components/TextManager.svelte
@@ -4,7 +4,9 @@
   import type { TextItem } from "../lib/types/panel";
   import { v4 as uuidv4 } from "uuid";
 
-  export let onTextUpdate: (texts: TextItem[]) => void;
+  let { onTextUpdate }: {
+    onTextUpdate: (texts: TextItem[]) => void;
+  } = $props();
 
   let currentPanel = $state($panelStore);
   let selectedTextId = $state<string | null>(null);
diff --git a/svelte.config.js b/svelte.config.js
index 9276581..eb62087 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,6 +13,9 @@ const config = {
       bundleStrategy: "inline",
     },
   },
+  compilerOptions: {
+    runes: true,
+  },
 };
 
 export default config;