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 { PANEL_SETTINGS, type SlideDirectionType } from "$lib/constants";
-  import { imageConfigState } from "$states/image.svelte";
+  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)}
+      {$inspect(paddingX)}
-      <Text {text} x={10} y={10} fontsize="32" fill="white"></Text>
+      <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;

src/lib/constants.ts

@@ -1,24 +1,16 @@
 // Application Constants
-// This file contains magic numbers and strings used in JavaScript/TypeScript logic
 
 // ===== PANEL SETTINGS =====
 export const PANEL_SETTINGS = {
-  // Storage
-  STORAGE_KEY: "twitch-panels",
-  MAX_PANELS_COUNT: 50,
-
-  // Dimensions
   PANEL_WIDTH: 320,
   PANEL_HEIGHT_DEFAULT: 100,
-  PANEL_HEIGHT_MAX: 1000,
+  PANEL_HEIGHT_MAX: 200,
 
-  // Default values
   DEFAULT_BACKGROUND_IMAGE: "./backgrounds/b1.jpg",
 } as const;
 
 // ===== TYPOGRAPHY =====
 export const TYPOGRAPHY = {
-  // Font families
   FONT_FAMILY_DEFAULT: "Arial",
   FONT_FAMILIES: [
     "Arial",
@@ -34,52 +26,42 @@ export const TYPOGRAPHY = {
   // Font sizes for range inputs
   FONT_SIZE_MIN: 10,
   FONT_SIZE_MAX: 72,
-  FONT_SIZE_DEFAULT: 18,
+  FONT_SIZE_DEFAULT: 32,
-
-  // Text alignment
-  TEXT_ALIGN_LEFT: "left",
-  TEXT_ALIGN_CENTER: "center",
-  TEXT_ALIGN_RIGHT: "right",
 
   // Text limits
   MAX_TEXT_LENGTH: 100,
 
   // Padding for range inputs
   PADDING_X_DEFAULT: 10,
-  PADDING_X_LARGE: 20,
+  PADDING_X_MAX: 100,
-  PADDING_X_MAX: 50,
 
   // Vertical offset for range inputs
-  VERTICAL_OFFSET_MAX: 50,
+  VERTICAL_OFFSET_MAX: 100,
-  VERTICAL_OFFSET_MIN: -50,
+  VERTICAL_OFFSET_MIN: -100,
 
   // Colors
   TEXT_COLOR_DEFAULT: "#ffffff",
-  TEXT_COLOR_ERROR: "#c62828",
 } as const;
 
 // ===== IMAGE SETTINGS =====
 export const IMAGE_SETTINGS = {
-  // File sizes
   MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB
 
-  // Supported formats
   SUPPORTED_FORMATS: ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"] as const,
 } as const;
 
-// ===== UI SETTINGS =====
+export const SlideDirection = {
-export const UI_SETTINGS = {
+  NEXT: "next",
-  // Steps
+  PREV: "prev",
-  STEPS: {
-    UPLOAD: "upload",
-    CROP: "crop",
-    TEXT: "text",
-  } as const,
 } as const;
 
-// ===== ERROR HANDLING =====
+export type SlideDirectionType = (typeof SlideDirection)[keyof typeof SlideDirection];
-export const ERROR_HANDLING = {
+
-  // Retry settings
+export const TextAlign = {
-  MAX_RETRIES: 3,
+  LEFT: "left",
-  RETRY_DELAY_MS: 1000,
+  CENTER: "center",
+  RIGHT: "right",
 } as const;
+
+export type TextAlignType = (typeof TextAlign)[keyof typeof TextAlign];
+export const DEFAULT_TEXT_ALIGN: TextAlignType = TextAlign.CENTER;

src/lib/types.ts

@@ -0,0 +1 @@
+export type HexColor = `#${string}`;

src/lib/util-types.ts

@@ -1,5 +0,0 @@
-export type SlideDirection = "next" | "prev";
-
-export type TextAlign = "left" | "center" | "right";
-
-export type HexColor = `#${string}`;

src/states/textConfig.svelte.ts

@@ -1,10 +1,11 @@
-import type { HexColor, TextAlign } from "$lib/util-types";
+import type { TextAlignType } from "$lib/constants";
+import type { HexColor } from "$lib/types";
 
 export type TextConfig = {
   fontSize: number;
   fontFamily: string;
   color: HexColor;
-  align: TextAlign;
+  align: TextAlignType;
   paddingX: number;
   offsetY: number;
 };
@@ -42,7 +43,7 @@ function createState() {
     get align() {
       return state.align;
     },
-    set align(align: TextAlign) {
+    set align(align: TextAlignType) {
       state.align = align;
     },
     get paddingX() {