fix: update types and constants

src/components/panel/Preview.svelte

@@ -1,27 +1,47 @@
 <script lang="ts">
-  import type { SlideDirection } from "$lib/util-types";
-  import { imageConfigState } from "$states/image.svelte";
+  import { PANEL_SETTINGS, type SlideDirectionType } from "$lib/constants";
+  import { imageConfigState } from "$states/imageConfig.svelte";
+  import { textConfigState } from "$states/textConfig.svelte";
   import { Image, Layer, Stage, Text } from "svelte-konva";
   import { fly } from "svelte/transition";
 
   interface Props {
     text: string;
-    direction: SlideDirection;
+    direction: SlideDirectionType;
   }
 
   let { text, direction }: Props = $props();
 
-  let xDirection = $derived(direction == "next" ? 320 : -320);
+  let xDirection = $derived(direction == "next" ? PANEL_SETTINGS.PANEL_WIDTH : -PANEL_SETTINGS.PANEL_WIDTH);
 
   let image: HTMLImageElement | undefined = imageConfigState.image;
+
+  let { align, fontSize, fontFamily, paddingX, offsetY, color } = textConfigState;
+
+  let x = $derived(paddingX);
+  let y = $derived(10 + offsetY);
+  let width = $derived(PANEL_SETTINGS.PANEL_WIDTH - 2 * paddingX);
+  let height = PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT;
 </script>
 
 <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>
+      {$inspect(paddingX)}
+      <Text
+        {text}
+        {x}
+        {y}
+        {width}
+        {height}
+        fontSize={textConfigState.fontSize}
+        fill={textConfigState.color}
+        fontFamily={textConfigState.fontFamily}
+        align={textConfigState.align}
+        wrap="none"
+        ellipsis={true}
+      />
     </Layer>
   </Stage>
 </div>

src/components/panel/PreviewControls.svelte

@@ -2,11 +2,11 @@
   import Button from "$components/ui/Button.svelte";
   import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
   import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
-  import type { SlideDirection } from "$lib/util-types";
+  import type { SlideDirectionType } from "$lib/constants";
 
   interface Props {
     current: number;
-    direction: SlideDirection;
+    direction: SlideDirectionType;
     max: number;
   }
 

src/components/panel/PreviewManager.svelte

@@ -4,13 +4,13 @@
   import Button from "$components/ui/Button.svelte";
   import IconDownload from "$components/ui/Icons/IconDownload.svelte";
   import IconEmpty from "$components/ui/Icons/IconEmpty.svelte";
-  import type { SlideDirection } from "$lib/util-types";
+  import type { SlideDirectionType } from "$lib/constants";
   import { textsState } from "$states/texts.svelte";
   import Preview from "./Preview.svelte";
   import PreviewControls from "./PreviewControls.svelte";
 
   let current: number = $state(0);
-  let direction: SlideDirection = $state("next");
+  let direction: SlideDirectionType = $state("next");
 
   $effect(() => {
     $inspect(current, textsState.texts);

src/components/ui/Alignment.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { TextAlign } from "$lib/types/text";
+  import type { TextAlignType } from "$lib/constants";
   import IconAlignCenter from "./Icons/IconAlignCenter.svelte";
   import IconAlignLeft from "./Icons/IconAlignLeft.svelte";
   import IconAlignRight from "./Icons/IconAlignRight.svelte";
 
   interface Props {
-    align: TextAlign;
+    align: TextAlignType;
   }
 
   let { align = $bindable("left") }: Props = $props();

src/components/ui/ColorPicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { HexColor } from "$lib/types/text";
+  import type { HexColor } from "$lib/types";
 
   interface Props {
     value: HexColor;