refactor: separate components into folders

src/components/image/BackgroundPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     backgroundImage?: string | undefined;

src/components/image/ImageCropper.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import CropperJS from "cropperjs";
-  import type { ImageCropResult } from "../lib/types/panel";
-  import { ImageService } from "../lib/services/imageService";
-  import { uiStore, setLoading } from "../stores/uiStore";
-  import { Button } from "../lib/components/ui";
+  import type { ImageCropResult } from "$lib/types/panel";
+  import { ImageService } from "$lib/services/imageService";
+  import { uiStore, setLoading } from "../../stores/uiStore";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     imageSrc: string;

src/components/image/ImageUpload.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { uiStore, setLoading, clearError, setCurrentStep } from "../stores/uiStore";
-  import { panelStore } from "../stores/panelStore";
-  import { ImageService } from "../lib/services/imageService";
-  import { handleError } from "../lib/utils/errorHandler";
-  import type { ImageUploadResult } from "../lib/types/panel";
-  import { Button } from "../lib/components/ui";
+  import { uiStore, setLoading, clearError, setCurrentStep } from "../../stores/uiStore";
+  import { panelStore } from "../../stores/panelStore";
+  import { ImageService } from "$lib/services/imageService";
+  import { handleError } from "$lib/utils/errorHandler";
+  import type { ImageUploadResult } from "$lib/types/panel";
+  import { Button } from "$lib/components/ui";
 
   let imageService = new ImageService();
 

src/components/layout/AppContainer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import AppHeader from "./AppHeader.svelte";
-  import ErrorMessage from "./ErrorMessage.svelte";
+  import ErrorMessage from "../feedback/ErrorMessage.svelte";
   import AppContent from "./AppContent.svelte";
 
   interface Props {

src/components/layout/AppHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     onUploadNewImage?: () => void;

src/components/layout/MainSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { uiStore } from "../stores/uiStore";
-  import ImageManager from "./ImageManager.svelte";
-  import TextSection from "./TextSection.svelte";
+  import { uiStore } from "../../stores/uiStore";
+  import ImageManager from "../image/ImageManager.svelte";
+  import TextSection from "../text/TextSection.svelte";
 
   interface Props {
     uploadedImage: string | undefined;

src/components/layout/Sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { uiStore } from "../stores/uiStore";
-  import BackgroundPreview from "./BackgroundPreview.svelte";
-  import PanelsList from "./PanelsList.svelte";
+  import { uiStore } from "../../stores/uiStore";
+  import BackgroundPreview from "../image/BackgroundPreview.svelte";
+  import PanelsList from "../panel/PanelsList.svelte";
 
   interface Props {
     backgroundImage: string | undefined;

src/components/panel/PanelList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { panelStore } from "../stores/panelStore";
-  import { panelStorage } from "../lib/utils/panelStorage";
-  import type { Panel } from "../lib/types/panel";
-  import { IconButton } from "../lib/components/ui";
+  import { panelStore } from "../../stores/panelStore";
+  import { panelStorage } from "$lib/utils/panelStorage";
+  import type { Panel } from "$lib/types/panel";
+  import { IconButton } from "$lib/components/ui";
 
   interface Props {
     onPanelSelect: (panel: Panel) => void;

src/components/panel/PanelPreview.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { uiStore, setCurrentStep } from "../stores/uiStore";
-  import type { Panel } from "../lib/types/panel";
+  import { uiStore, setCurrentStep } from "../../stores/uiStore";
+  import type { Panel } from "$lib/types/panel";
 
   type TextItem = Panel["texts"][0];
   import { Stage, Layer, Image, Text } from "svelte-konva";
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     panel: Panel;

src/components/panel/PanelsList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Panel } from "../lib/types/panel";
+  import type { Panel } from "$lib/types/panel";
   import PanelPreview from "./PanelPreview.svelte";
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     panels: Panel[];

src/components/text/TextManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     onTextAdd: (text: string) => void;

src/components/text/TextPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { TextItem } from "../lib/types/panel";
-  import { panelStore } from "../stores/panelStore";
+  import type { TextItem } from "$lib/types/panel";
+  import { panelStore } from "../../stores/panelStore";
   import { Stage, Layer, Image, Text } from "svelte-konva";
 
   interface Props {

src/routes/+page.svelte

@@ -4,9 +4,9 @@
   import { imageService } from "../services/imageService";
   import { panelService } from "../services/panelService";
   import { exportService } from "../services/exportService";
-  import type { Panel } from "../lib/types/panel";
+  import type { Panel } from "$lib/types/panel";
 
-  import AppContainer from "../components/AppContainer.svelte";
+  import AppContainer from "../components/layout/AppContainer.svelte";
 
   let uploadedImage = $state<string | undefined>(undefined);
   let panels = $state<Panel[]>([]);