From a063a2d75232e637c243d6eca9388561d50c022b Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 5 Feb 2026 23:46:28 +0500
Subject: [PATCH] feat: add text settings components

---
 src/components/layout/SettingsGrid.svelte | 21 +++++++++
 src/components/layout/SettingsRow.svelte  | 38 ++++++++++++++++
 src/components/layout/TextBar.svelte      |  5 +--
 src/components/text/TextConfig.svelte     | 32 +++++++++++++
 src/components/ui/Alignment.svelte        | 55 +++++++++++++++++++++++
 src/components/ui/ColorPicker.svelte      | 28 ++++++++++++
 src/components/ui/RangeSlider.svelte      | 54 ++++++++++++++++++++++
 src/components/ui/SelectFont.svelte       | 30 +++++++++++++
 8 files changed, 260 insertions(+), 3 deletions(-)
 create mode 100644 src/components/layout/SettingsGrid.svelte
 create mode 100644 src/components/layout/SettingsRow.svelte
 create mode 100644 src/components/text/TextConfig.svelte
 create mode 100644 src/components/ui/Alignment.svelte
 create mode 100644 src/components/ui/ColorPicker.svelte
 create mode 100644 src/components/ui/RangeSlider.svelte
 create mode 100644 src/components/ui/SelectFont.svelte

diff --git a/src/components/layout/SettingsGrid.svelte b/src/components/layout/SettingsGrid.svelte
new file mode 100644
index 0000000..0f19c6e
--- /dev/null
+++ b/src/components/layout/SettingsGrid.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="settings-grid">
+  {@render children()}
+</div>
+
+<style>
+  .settings-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+</style>
diff --git a/src/components/layout/SettingsRow.svelte b/src/components/layout/SettingsRow.svelte
new file mode 100644
index 0000000..f4fd630
--- /dev/null
+++ b/src/components/layout/SettingsRow.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    label: string;
+    children: Snippet;
+  }
+
+  let { label, children }: Props = $props();
+</script>
+
+<label class="setting-row">
+  <div class="setting-label">{label}</div>
+  <div class="setting-control">
+    {@render children()}
+  </div>
+</label>
+
+<style>
+  .setting-row {
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .setting-label {
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+  }
+
+  .setting-control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+</style>
diff --git a/src/components/layout/TextBar.svelte b/src/components/layout/TextBar.svelte
index 146ddd9..8ae512d 100644
--- a/src/components/layout/TextBar.svelte
+++ b/src/components/layout/TextBar.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
+  import TextConfig from "$components/text/TextConfig.svelte";
   import TextManager from "$components/text/TextManager.svelte";
-  import Card from "./Card.svelte";
 </script>
 
 <div class="text-bar">
   <TextManager />
-
-  <Card title="Настройки текста">Настройки текста</Card>
+  <TextConfig />
 </div>
 
 <style>
diff --git a/src/components/text/TextConfig.svelte b/src/components/text/TextConfig.svelte
new file mode 100644
index 0000000..69a98a7
--- /dev/null
+++ b/src/components/text/TextConfig.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Card from "$components/layout/Card.svelte";
+  import SettingsGrid from "$components/layout/SettingsGrid.svelte";
+  import SettingsRow from "$components/layout/SettingsRow.svelte";
+  import Alignment from "$components/ui/Alignment.svelte";
+  import ColorPicker from "$components/ui/ColorPicker.svelte";
+  import RangeSlider from "$components/ui/RangeSlider.svelte";
+  import SelectFont from "$components/ui/SelectFont.svelte";
+</script>
+
+<Card title="Настройки текста">
+  <SettingsGrid>
+    <SettingsRow label="Размер">
+      <RangeSlider />
+    </SettingsRow>
+    <SettingsRow label="Шрифт">
+      <SelectFont />
+    </SettingsRow>
+    <SettingsRow label="Цвет">
+      <ColorPicker />
+    </SettingsRow>
+    <SettingsRow label="Выравнивание">
+      <Alignment />
+    </SettingsRow>
+    <SettingsRow label="Отступы">
+      <RangeSlider />
+    </SettingsRow>
+    <SettingsRow label="Смещение">
+      <RangeSlider />
+    </SettingsRow>
+  </SettingsGrid>
+</Card>
diff --git a/src/components/ui/Alignment.svelte b/src/components/ui/Alignment.svelte
new file mode 100644
index 0000000..7338a4c
--- /dev/null
+++ b/src/components/ui/Alignment.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import IconAlignCenter from "./Icons/IconAlignCenter.svelte";
+  import IconAlignLeft from "./Icons/IconAlignLeft.svelte";
+  import IconAlignRight from "./Icons/IconAlignRight.svelte";
+</script>
+
+<button class="align-btn active">
+  <IconAlignLeft />
+</button>
+<button class="align-btn">
+  <IconAlignCenter />
+</button>
+<button class="align-btn">
+  <IconAlignRight />
+</button>
+
+<style>
+  .align-btn {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .align-btn :global(svg) {
+    width: 16px;
+    height: 16px;
+    stroke: var(--text-secondary);
+    transition: var(--transition);
+  }
+
+  .align-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent-primary);
+  }
+
+  .align-btn:hover :global(svg) {
+    stroke: var(--accent-primary);
+  }
+
+  .align-btn.active {
+    background: var(--accent-primary);
+    border-color: var(--accent-primary);
+  }
+
+  .align-btn.active :global(svg) {
+    stroke: white;
+  }
+</style>
diff --git a/src/components/ui/ColorPicker.svelte b/src/components/ui/ColorPicker.svelte
new file mode 100644
index 0000000..b3fdb78
--- /dev/null
+++ b/src/components/ui/ColorPicker.svelte
@@ -0,0 +1,28 @@
+<input type="color" value="#ffffff" class="color-input" />
+<span class="color-value">#ffffff</span>
+
+<style>
+  .color-input {
+    width: 40px;
+    height: 32px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: var(--transition);
+    background: var(--bg-primary);
+  }
+
+  .color-input:hover {
+    border-color: var(--accent-primary);
+  }
+
+  .color-value {
+    font-family: "Courier New", monospace;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    padding: 4px 8px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/ui/RangeSlider.svelte b/src/components/ui/RangeSlider.svelte
new file mode 100644
index 0000000..76c1f88
--- /dev/null
+++ b/src/components/ui/RangeSlider.svelte
@@ -0,0 +1,54 @@
+<input type="range" id="fontSize" min="12" max="48" value="18" class="slider" />
+<span class="value-display" id="fontSizeValue">18</span>
+
+<style>
+  .slider {
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bg-secondary);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    cursor: pointer;
+    transition: var(--transition);
+  }
+
+  .slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  .slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    cursor: pointer;
+    border: none;
+    transition: var(--transition);
+  }
+
+  .slider::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  .value-display {
+    color: var(--text-primary);
+    font-weight: 500;
+    min-width: 40px;
+    text-align: right;
+    font-size: 13px;
+    padding: 4px 8px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/components/ui/SelectFont.svelte b/src/components/ui/SelectFont.svelte
new file mode 100644
index 0000000..d786d28
--- /dev/null
+++ b/src/components/ui/SelectFont.svelte
@@ -0,0 +1,30 @@
+<select class="select-input">
+  <option value="Arial">Arial</option>
+  <option value="Verdana">Verdana</option>
+  <option value="Georgia">Georgia</option>
+  <option value="Times New Roman">Times New Roman</option>
+  <option value="Courier New">Courier New</option>
+  <option value="Impact">Impact</option>
+  <option value="Comic Sans MS">Comic Sans MS</option>
+  <option value="Trebuchet MS">Trebuchet MS</option>
+</select>
+
+<style>
+  .select-input {
+    padding: 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: var(--transition);
+    font-family: inherit;
+    width: 100%;
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+  }
+</style>