feat: start implement panels rendering, remove unused files

src/components/panel/Preview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { SlideDirection } from "$lib/types/utils";
+  import type { SlideDirection } from "$lib/util-types";
+  import { imageConfigState } from "$states/image.svelte";
+  import { Image, Layer, Stage, Text } from "svelte-konva";
   import { fly } from "svelte/transition";
 
   interface Props {
@@ -10,8 +12,29 @@
   let { text, direction }: Props = $props();
 
   let xDirection = $derived(direction == "next" ? 320 : -320);
+
+  let image: HTMLImageElement | undefined = imageConfigState.image;
 </script>
 
-<div in:fly={{ x: xDirection, duration: 300 }} out:fly={{ x: -xDirection, duration: 300 }}>
-  {text}
+<div class="konva-wrapper" in:fly={{ x: xDirection, duration: 300 }} out:fly={{ x: -xDirection, duration: 300 }}>
+  <Stage width={320} height={100}>
+    <Layer>
+      <Image {image}></Image>
+      {$inspect(image)}
+      <Text {text} x={10} y={10} fontsize="32" fill="white"></Text>
+    </Layer>
+  </Stage>
 </div>
+
+<style>
+  .konva-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>