chore: update eslint config, update tests, constants

src/components/panel/Preview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { PANEL_SETTINGS } from "$lib/constants";
-  import { imageConfigState } from "$states/imageConfig.svelte";
+  import { imageState } from "$states/image.svelte";
   import { textConfigState } from "$states/textConfig.svelte";
   import { Image, Layer, Stage, Text } from "svelte-konva";
 
@@ -12,14 +12,18 @@
   let { text, stage = $bindable() }: Props = $props();
 
   let x = $derived(textConfigState.paddingX);
-  let y = $derived(10 + textConfigState.offsetY);
+  let y = $derived(textConfigState.offsetY);
   let width = $derived(PANEL_SETTINGS.PANEL_WIDTH - 2 * textConfigState.paddingX);
   let height = PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT;
 </script>
 
-<Stage width={320} height={100} bind:this={stage}>
+<Stage
+  width={PANEL_SETTINGS.PANEL_WIDTH}
+  height={PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT}
+  bind:this={stage}
+>
   <Layer>
-    <Image image={imageConfigState.image}></Image>
+    <Image image={imageState.croppedImage}></Image>
     <Text
       {text}
       {x}

src/components/text/TextConfig.svelte

@@ -6,13 +6,19 @@
   import ColorPicker from "$components/ui/ColorPicker.svelte";
   import RangeSlider from "$components/ui/RangeSlider.svelte";
   import SelectFont from "$components/ui/SelectFont.svelte";
+  import { TYPOGRAPHY } from "$lib/constants";
   import { textConfigState } from "$states/textConfig.svelte";
 </script>
 
 <Card title="Настройки текста">
   <SettingsGrid>
     <SettingsRow label="Размер">
-      <RangeSlider bind:value={textConfigState.fontSize} min={10} max={100} step={1} />
+      <RangeSlider
+        bind:value={textConfigState.fontSize}
+        min={TYPOGRAPHY.FONT_SIZE_MIN}
+        max={TYPOGRAPHY.FONT_SIZE_MAX}
+        step={1}
+      />
     </SettingsRow>
     <SettingsRow label="Шрифт">
       <SelectFont bind:value={textConfigState.fontFamily} />
@@ -24,10 +30,20 @@
       <Alignment bind:align={textConfigState.align} />
     </SettingsRow>
     <SettingsRow label="Отступы">
-      <RangeSlider bind:value={textConfigState.paddingX} min={0} max={100} step={1} />
+      <RangeSlider
+        bind:value={textConfigState.paddingX}
+        min={TYPOGRAPHY.PADDING_X_MIN}
+        max={TYPOGRAPHY.PADDING_X_MAX}
+        step={1}
+      />
     </SettingsRow>
     <SettingsRow label="Смещение">
-      <RangeSlider bind:value={textConfigState.offsetY} min={-100} max={100} step={1} />
+      <RangeSlider
+        bind:value={textConfigState.offsetY}
+        min={TYPOGRAPHY.VERTICAL_OFFSET_MIN}
+        max={TYPOGRAPHY.VERTICAL_OFFSET_MAX}
+        step={1}
+      />
     </SettingsRow>
   </SettingsGrid>
 </Card>

src/components/ui/ColorPicker.svelte

@@ -8,7 +8,7 @@
   let { value = $bindable() }: Props = $props();
 </script>
 
-<input type="color" bind:value class="color-input" />
+<input type="color" role="button" bind:value class="color-input" />
 <span class="color-value">{value}</span>
 
 <style>

src/states/persisted.svelte.ts

@@ -1,6 +1,7 @@
 import { browser } from "$app/environment";
 
 export const STATE_DATA = Symbol("state-data");
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
 export const DEBOUNCE_DURATION = import.meta.env.MODE === "test" ? 0 : 500;
 
 export interface Persistable<D> {