From 4b44bc439ce2a36baf1c3f68fde8776d31ccb3f1 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Sun, 13 Sep 2026 06:25:53 +0500
Subject: [PATCH] fix: update i18n - fields components

---
 web/src/lib/components/SchemaFields.svelte    | 10 ++++++----
 .../components/fields/DimensionField.svelte   |  5 +++--
 .../fields/schema/AngleControl.svelte         |  4 +++-
 .../fields/schema/ColorsControl.svelte        |  7 +++++--
 .../fields/schema/FontStyleControl.svelte     | 19 ++++++++++---------
 .../fields/schema/GradientControl.svelte      |  5 +++--
 .../fields/schema/PlateControl.svelte         |  5 +++--
 7 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/web/src/lib/components/SchemaFields.svelte b/web/src/lib/components/SchemaFields.svelte
index d9aae45..f473a63 100644
--- a/web/src/lib/components/SchemaFields.svelte
+++ b/web/src/lib/components/SchemaFields.svelte
@@ -4,7 +4,8 @@
 		FieldSpecKind,
 		ToolSchema,
 	} from "$lib/registry-schema";
-	import { fieldLabel } from "$lib/i18n/schema-tool-strings";
+	import { fieldLabel, groupLabel } from "$lib/i18n/schema-tool-strings";
+	import { t } from "$lib/i18n/t";
 	import { RotateCcw } from "@lucide/svelte";
 	import type { Component } from "svelte";
 	import DimensionField from "./fields/DimensionField.svelte";
@@ -89,7 +90,7 @@
 
 {#each layoutGroups as group (group.key)}
 	{#if group.title}
-		<span class="group-title">{group.title}</span>
+		<span class="group-title">{groupLabel(group.title)}</span>
 	{/if}
 	<div
 		class="group-fields"
@@ -111,9 +112,10 @@
 
 <div class="panel-foot">
 	<button class="reset-btn" onclick={onreset}>
-		<RotateCcw size={14} /> Reset
+		<RotateCcw size={14} />
+		{t("ui.reset")}
 	</button>
-	<span class="auto-note"><i></i> updates automatically</span>
+	<span class="auto-note"><i></i> {t("ui.autoUpdate")}</span>
 </div>
 
 <style>
diff --git a/web/src/lib/components/fields/DimensionField.svelte b/web/src/lib/components/fields/DimensionField.svelte
index 513435c..f208396 100644
--- a/web/src/lib/components/fields/DimensionField.svelte
+++ b/web/src/lib/components/fields/DimensionField.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
 	import type {
 		Dimension,
 		DimensionSpec,
@@ -37,7 +38,7 @@
 	<span class="dimension-label">{label}</span>
 	<div class="dimension-field">
 		<label class="dimension-axis">
-			<span>Width</span>
+			<span>{t("ui.width")}</span>
 			<input
 				type="number"
 				min={sp.min}
@@ -48,7 +49,7 @@
 			/>
 		</label>
 		<label class="dimension-axis">
-			<span>Height</span>
+			<span>{t("ui.height")}</span>
 			<input
 				type="number"
 				min={sp.min}
diff --git a/web/src/lib/components/fields/schema/AngleControl.svelte b/web/src/lib/components/fields/schema/AngleControl.svelte
index 23edf70..1f8ebd2 100644
--- a/web/src/lib/components/fields/schema/AngleControl.svelte
+++ b/web/src/lib/components/fields/schema/AngleControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
+
 	interface Preset {
 		value: number;
 		label: string;
@@ -15,7 +17,7 @@
 	}
 
 	let {
-		label = "Angle",
+		label = t("ui.angle"),
 		value,
 		min = 0,
 		max = 360,
diff --git a/web/src/lib/components/fields/schema/ColorsControl.svelte b/web/src/lib/components/fields/schema/ColorsControl.svelte
index adeb9ef..296ea85 100644
--- a/web/src/lib/components/fields/schema/ColorsControl.svelte
+++ b/web/src/lib/components/fields/schema/ColorsControl.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
 	import type {
 		ColorList,
 		ColorListSpec,
@@ -59,14 +60,16 @@
 					class="remove"
 					onclick={() => removeColor(i)}
 					disabled={current.length <= 1}
-					aria-label="Remove color"
+					aria-label={t("ui.removeColor")}
 				>
 					×
 				</button>
 			</div>
 		{/each}
 	</div>
-	<button type="button" class="add" onclick={addColor}>+ Add color</button>
+	<button type="button" class="add" onclick={addColor}
+		>{t("ui.addColor")}</button
+	>
 </div>
 
 <style>
diff --git a/web/src/lib/components/fields/schema/FontStyleControl.svelte b/web/src/lib/components/fields/schema/FontStyleControl.svelte
index 64c9182..e086516 100644
--- a/web/src/lib/components/fields/schema/FontStyleControl.svelte
+++ b/web/src/lib/components/fields/schema/FontStyleControl.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
 	import type { TextFont } from "$lib/core/domText";
 	import type {
 		FieldSpec,
@@ -35,10 +36,10 @@
 		onchange?.({ ...current, [key]: val });
 	}
 
-	const FONTS: { value: TextFont; label: string }[] = [
-		{ value: "sans", label: "Sans" },
-		{ value: "serif", label: "Serif" },
-		{ value: "mono", label: "Mono" },
+	const FONTS: { value: TextFont; labelKey: string }[] = [
+		{ value: "sans", labelKey: "ui.fontSans" },
+		{ value: "serif", labelKey: "ui.fontSerif" },
+		{ value: "mono", labelKey: "ui.fontMono" },
 	];
 </script>
 
@@ -46,7 +47,7 @@
 	<span class="fs-label">{label}</span>
 	<div class="fs-grid">
 		<label class="fs-cell">
-			<span class="fs-sub">Font</span>
+			<span class="fs-sub">{t("ui.font")}</span>
 			<select
 				class="fs-select"
 				value={current.font}
@@ -54,12 +55,12 @@
 					set("font", (e.target as HTMLSelectElement).value as TextFont)}
 			>
 				{#each FONTS as option (option.value)}
-					<option value={option.value}>{option.label}</option>
+					<option value={option.value}>{t(option.labelKey)}</option>
 				{/each}
 			</select>
 		</label>
 		<label class="fs-cell">
-			<span class="fs-sub">Size</span>
+			<span class="fs-sub">{t("ui.size")}</span>
 			<input
 				class="fs-input"
 				type="number"
@@ -71,7 +72,7 @@
 			/>
 		</label>
 		<label class="fs-cell">
-			<span class="fs-sub">Color</span>
+			<span class="fs-sub">{t("ui.color")}</span>
 			<span class="fs-color">
 				<span class="swatch" style="background:{current.color}"></span>
 				<input
@@ -83,7 +84,7 @@
 			</span>
 		</label>
 		<label class="fs-cell fs-bold">
-			<span class="fs-sub">Bold</span>
+			<span class="fs-sub">{t("ui.bold")}</span>
 			<input
 				type="checkbox"
 				checked={current.bold}
diff --git a/web/src/lib/components/fields/schema/GradientControl.svelte b/web/src/lib/components/fields/schema/GradientControl.svelte
index 01c22b4..b22785e 100644
--- a/web/src/lib/components/fields/schema/GradientControl.svelte
+++ b/web/src/lib/components/fields/schema/GradientControl.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AngleControl from "./AngleControl.svelte";
+	import { t } from "$lib/i18n/t";
 	import type { FieldSpec, Gradient, GradientSpec } from "$lib/registry-schema";
 
 	interface Props {
@@ -32,7 +33,7 @@
 	<span class="gradient-label">{label}</span>
 	<div class="gradient-colors">
 		<label class="color-field">
-			<span>From</span>
+			<span>{t("ui.from")}</span>
 			<span class="swatch" style="background:{current.from}"></span>
 			<input
 				type="color"
@@ -41,7 +42,7 @@
 			/>
 		</label>
 		<label class="color-field">
-			<span>To</span>
+			<span>{t("ui.to")}</span>
 			<span class="swatch" style="background:{current.to}"></span>
 			<input
 				type="color"
diff --git a/web/src/lib/components/fields/schema/PlateControl.svelte b/web/src/lib/components/fields/schema/PlateControl.svelte
index 8aec4f4..28aeceb 100644
--- a/web/src/lib/components/fields/schema/PlateControl.svelte
+++ b/web/src/lib/components/fields/schema/PlateControl.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { t } from "$lib/i18n/t";
 	import type { FieldSpec, Plate, PlateSpec } from "$lib/registry-schema";
 
 	interface Props {
@@ -31,7 +32,7 @@
 	<span class="plate-label">{label}</span>
 	<div class="plate-row {current.enabled ? '' : 'off'}">
 		<label class="plate-enabled">
-			<span>Backing plate</span>
+			<span>{t("ui.backingPlate")}</span>
 			<input
 				type="checkbox"
 				checked={current.enabled}
@@ -49,7 +50,7 @@
 		</label>
 		<label class="plate-opacity">
 			<span>
-				Opacity
+				{t("ui.opacity")}
 				<output>{current.opacity}%</output>
 			</span>
 			<input