feat: implement state and components for text config

src/components/text/TextConfig.svelte

@@ -6,27 +6,28 @@
   import ColorPicker from "$components/ui/ColorPicker.svelte";
   import RangeSlider from "$components/ui/RangeSlider.svelte";
   import SelectFont from "$components/ui/SelectFont.svelte";
+  import { textConfigState } from "$states/textConfig.svelte";
 </script>
 
 <Card title="Настройки текста">
   <SettingsGrid>
     <SettingsRow label="Размер">
-      <RangeSlider />
+      <RangeSlider bind:value={textConfigState.fontSize} min={10} max={100} step={1} />
     </SettingsRow>
     <SettingsRow label="Шрифт">
-      <SelectFont />
+      <SelectFont bind:value={textConfigState.fontFamily} />
     </SettingsRow>
     <SettingsRow label="Цвет">
-      <ColorPicker />
+      <ColorPicker bind:value={textConfigState.color} />
     </SettingsRow>
     <SettingsRow label="Выравнивание">
-      <Alignment />
+      <Alignment bind:align={textConfigState.align} />
     </SettingsRow>
     <SettingsRow label="Отступы">
-      <RangeSlider />
+      <RangeSlider bind:value={textConfigState.paddingX} min={0} max={100} step={1} />
     </SettingsRow>
     <SettingsRow label="Смещение">
-      <RangeSlider />
+      <RangeSlider bind:value={textConfigState.offsetY} min={-100} max={100} step={1} />
     </SettingsRow>
   </SettingsGrid>
 </Card>

src/components/ui/Alignment.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
+  import type { TextAlign } from "$lib/types/text";
   import IconAlignCenter from "./Icons/IconAlignCenter.svelte";
   import IconAlignLeft from "./Icons/IconAlignLeft.svelte";
   import IconAlignRight from "./Icons/IconAlignRight.svelte";
+
+  interface Props {
+    align: TextAlign;
+  }
+
+  let { align = $bindable("left") }: Props = $props();
 </script>
 
-<button class="align-btn active">
+<button class="align-btn" class:active={align === "left"} onclick={() => (align = "left")}>
   <IconAlignLeft />
 </button>
-<button class="align-btn">
+<button class="align-btn" class:active={align === "center"} onclick={() => (align = "center")}>
   <IconAlignCenter />
 </button>
-<button class="align-btn">
+<button class="align-btn" class:active={align === "right"} onclick={() => (align = "right")}>
   <IconAlignRight />
 </button>
 

src/components/ui/ColorPicker.svelte

@@ -1,5 +1,15 @@
-<input type="color" value="#ffffff" class="color-input" />
-<span class="color-value">#ffffff</span>
+<script lang="ts">
+  import type { HexColor } from "$lib/types/text";
+
+  interface Props {
+    value: HexColor;
+  }
+
+  let { value = $bindable() }: Props = $props();
+</script>
+
+<input type="color" bind:value class="color-input" />
+<span class="color-value">{value}</span>
 
 <style>
   .color-input {
@@ -10,6 +20,8 @@
     cursor: pointer;
     transition: var(--transition);
     background: var(--bg-primary);
+    padding: 0px 8px;
+    flex: 1;
   }
 
   .color-input:hover {

src/components/ui/RangeSlider.svelte

@@ -1,5 +1,19 @@
-<input type="range" id="fontSize" min="12" max="48" value="18" class="slider" />
-<span class="value-display" id="fontSizeValue">18</span>
+<script lang="ts">
+  import type { ChangeEventHandler } from "svelte/elements";
+
+  interface Props {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+  }
+
+  let { value = $bindable(), min = 0, max = 100, step = 1, onchange = () => {} }: Props = $props();
+</script>
+
+<input type="range" {min} {max} {step} bind:value class="slider" {onchange} />
+<span class="value-display">{value}</span>
 
 <style>
   .slider {

src/components/ui/SelectFont.svelte

@@ -1,4 +1,12 @@
-<select class="select-input">
+<script lang="ts">
+  interface Props {
+    value: string;
+  }
+
+  let { value = $bindable() }: Props = $props();
+</script>
+
+<select class="select-input" bind:value>
   <option value="Arial">Arial</option>
   <option value="Verdana">Verdana</option>
   <option value="Georgia">Georgia</option>