feat: add image filters, update some logic and workflow

src/components/image/ImageManager.svelte

@@ -9,14 +9,10 @@
   import { imageState } from "$states/image.svelte";
   import Pencil from "~icons/lucide/pencil";
   import Reset from "~icons/lucide/rotate-ccw";
+  import Sliders from "~icons/lucide/sliders-horizontal";
   import Upload from "~icons/lucide/upload";
   import CropInline from "./CropInline.svelte";
 
-  let brightness = $state(IMAGE_SETTINGS.DEFAULT_BRIGHTNESS);
-  let contrast = $state(IMAGE_SETTINGS.DEFAULT_CONTRAST);
-  let hue = $state(IMAGE_SETTINGS.DEFAULT_HUE);
-  let chroma = $state(IMAGE_SETTINGS.DEFAULT_CHROMA);
-
   async function handlePaste(event: ClipboardEvent) {
     let image = await uploadService.fromClipboard(event);
     if (image.ok) {
@@ -35,29 +31,50 @@
       <Button label="Сбросить" ariaLabel="Reset" icon={Reset} type="outline" />
     </div>
 
-    <SettingsGrid>
-      <SettingsRow label="Смещение цвета">
-        <RangeSlider bind:value={hue} min={IMAGE_SETTINGS.HUE_MIN} max={IMAGE_SETTINGS.HUE_MAX} />
+    <SettingsGrid label="Настройки изображения" icon={Sliders}>
+      <SettingsRow label="Сдвиг цвета">
+        <RangeSlider
+          bind:value={imageState.hue}
+          min={IMAGE_SETTINGS.HUE_MIN}
+          max={IMAGE_SETTINGS.HUE_MAX}
+          defaultValue={IMAGE_SETTINGS.HUE_DEFAULT}
+          showReset={true}
+        />
       </SettingsRow>
       <SettingsRow label="Насыщенность">
         <RangeSlider
-          bind:value={chroma}
-          min={IMAGE_SETTINGS.CHROMA_MIN}
-          max={IMAGE_SETTINGS.CHROMA_MAX}
+          bind:value={imageState.saturation}
+          min={IMAGE_SETTINGS.SATURATION_MIN}
+          max={IMAGE_SETTINGS.SATURATION_MAX}
+          defaultValue={IMAGE_SETTINGS.SATURATION_DEFAULT}
+          showReset={true}
         />
       </SettingsRow>
       <SettingsRow label="Яркость">
         <RangeSlider
-          bind:value={brightness}
+          bind:value={imageState.luminance}
+          min={IMAGE_SETTINGS.LUMINANCE_MIN}
+          max={IMAGE_SETTINGS.LUMINANCE_MAX}
+          defaultValue={IMAGE_SETTINGS.LUMINANCE_DEFAULT}
+          showReset={true}
+        />
+      </SettingsRow>
+      <SettingsRow label="Светлота">
+        <RangeSlider
+          bind:value={imageState.brightness}
           min={IMAGE_SETTINGS.BRIGHTNESS_MIN}
           max={IMAGE_SETTINGS.BRIGHTNESS_MAX}
+          defaultValue={IMAGE_SETTINGS.BRIGHTNESS_DEFAULT}
+          showReset={true}
         />
       </SettingsRow>
       <SettingsRow label="Контраст">
         <RangeSlider
-          bind:value={contrast}
+          bind:value={imageState.contrast}
           min={IMAGE_SETTINGS.CONTRAST_MIN}
           max={IMAGE_SETTINGS.CONTRAST_MAX}
+          defaultValue={IMAGE_SETTINGS.CONTRAST_DEFAULT}
+          showReset={true}
         />
       </SettingsRow>
     </SettingsGrid>